diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
deleted file mode 100644
index 4bf4af1ed..000000000
--- a/.github/CODEOWNERS
+++ /dev/null
@@ -1 +0,0 @@
-* @tailwindlabs/engineering
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 63f79fa10..75ca2dfb9 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -1,48 +1,12 @@
 # Contributing
 
-## Requirements
-
-Before getting started, ensure your system has access to the following tools:
-
-- [Node.js](https://nodejs.org/)
-- [Rustup](https://rustup.rs/)
-- [pnpm](https://pnpm.io/)
-
-## Getting started
-
-```sh
-# Install dependencies
-pnpm install
-
-# Install Rust toolchain and WASM targets
-rustup default stable
-rustup target add wasm32-wasip1-threads
-
-# Build the project
-pnpm build
-```
-
-## Development workflow
-
-During development, you can run tests in watch mode:
-
-```sh
-pnpm tdd
-```
-
-The `playgrounds` directory contains example projects you can use to test your changes. To start the Vite playground, use:
-
-```sh
-pnpm build && pnpm vite
-```
-
 ## Bug fixes
 
 If you've found a bug in Tailwind that you'd like to fix, [submit a pull request](https://github.com/tailwindlabs/tailwindcss/pulls) with your changes. Include a helpful description of the problem and how your changes address it, and provide tests so we can verify the fix works as expected.
 
 ## New features
 
-If there's a new feature you'd like to see added to Tailwind, [share your idea with us](https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas) in our discussion forum to get it on our radar as something to consider for a future release before starting work on it.
+If there's a new feature you'd like to see added to Tailwind, [share your idea with us](https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas) in our discussion forum to get it on our radar as something to consider for a future release.
 
 **Please note that we don't often accept pull requests for new features.** Adding a new feature to Tailwind requires us to think through the entire problem ourselves to make sure we agree with the proposed API, which means the feature needs to be high on our own priority list for us to be able to give it the attention it needs.
 
@@ -50,7 +14,7 @@ If you open a pull request for a new feature, we're likely to close it not becau
 
 ## Coding standards
 
-Our code formatting rules are defined in the `"prettier"` section of [package.json](https://github.com/tailwindlabs/tailwindcss/blob/main/package.json). You can check your code against these standards by running:
+Our code formatting rules are defined in the `"prettier"` section of [package.json](https://github.com/tailwindcss/tailwindcss/blob/next/package.json). You can check your code against these standards by running:
 
 ```sh
 pnpm run lint
@@ -64,40 +28,10 @@ pnpm run format
 
 ## Running tests
 
-You can run the TypeScript and Rust test suites using the following command:
+You can run the test suite using the following commands:
 
 ```sh
-pnpm test
+pnpm build && pnpm test
 ```
 
-To run the integration tests, use:
-
-```sh
-pnpm build && pnpm test:integrations
-```
-
-Additionally, some features require testing in browsers (i.e. to ensure CSS variable resolution works as expected). These can be run via:
-
-```sh
-pnpm build && pnpm test:ui
-```
-
-Please ensure that all tests are passing when submitting a pull request. If you're adding new features to Tailwind CSS, always include tests.
-
-After a successful build, you can also use the npm package tarballs created inside the `dist/` folder to install your build in other local projects.
-
-## Pull request process
-
-When submitting a pull request:
-
-- Ensure the pull request title and description explain the changes you made and why you made them.
-- Include a test plan section that outlines how you tested your contributions. We do not accept contributions without tests.
-- Ensure all tests pass. You can add the tag `[ci-all]` in your pull request description to run the test suites across all platforms.
-
-When a pull request is created, Tailwind CSS maintainers will be notified automatically.
-
-## Communication
-
-- **GitHub discussions**: For feature ideas and general questions
-- **GitHub issues**: For bug reports
-- **GitHub pull requests**: For code contributions
+Please ensure that the tests are passing when submitting a pull request. If you're adding new features to Tailwind, please include tests.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index 848c851b1..000000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1 +0,0 @@
-custom: ['https://tailwindcss.com/sponsor']
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
deleted file mode 100644
index 1b8a310c6..000000000
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-name: Bug report
-about: If you've already asked for help with a problem and confirmed something is broken with Tailwind CSS itself, create a bug report.
-title: ''
-labels: ''
-assignees: ''
----
-
-<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->
-
-**What version of Tailwind CSS are you using?**
-
-For example: v4.0.6
-
-**What build tool (or framework if it abstracts the build tool) are you using?**
-
-For example: postcss-cli 11.0.0, Next.js 15.1.7, Vite 6.1.0
-
-**What version of Node.js are you using?**
-
-For example: v20.0.0
-
-**What browser are you using?**
-
-For example: Chrome, Safari, or N/A
-
-**What operating system are you using?**
-
-For example: macOS, Windows
-
-**Reproduction URL**
-
-A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. **Please do not link to your actual project**, what we need instead is a _minimal_ reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.
-
-A reproduction is **required** when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.
-
-**Describe your issue**
-
-Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 10ee9a6b8..58166a010 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -6,6 +6,9 @@ contact_links:
   - name: Feature Request
     url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas
     about: 'Suggest any ideas you have using our discussion forums.'
+  - name: Bug Report
+    url: https://github.com/tailwindlabs/tailwindcss/issues/new?body=%3C%21--%20Please%20provide%20all%20of%20the%20information%20requested%20below.%20We%27re%20a%20small%20team%20and%20without%20all%20of%20this%20information%20it%27s%20not%20possible%20for%20us%20to%20help%20and%20your%20bug%20report%20will%20be%20closed.%20--%3E%0A%0A%2A%2AWhat%20version%20of%20Tailwind%20CSS%20are%20you%20using%3F%2A%2A%0A%0AFor%20example%3A%20v2.0.4%0A%0A%2A%2AWhat%20build%20tool%20%28or%20framework%20if%20it%20abstracts%20the%20build%20tool%29%20are%20you%20using%3F%2A%2A%0A%0AFor%20example%3A%20postcss-cli%208.3.1%2C%20Next.js%2010.0.9%2C%20webpack%205.28.0%0A%0A%2A%2AWhat%20version%20of%20Node.js%20are%20you%20using%3F%2A%2A%0A%0AFor%20example%3A%20v12.0.0%0A%0A%2A%2AWhat%20browser%20are%20you%20using%3F%2A%2A%0A%0AFor%20example%3A%20Chrome%2C%20Safari%2C%20or%20N%2FA%0A%0A%2A%2AWhat%20operating%20system%20are%20you%20using%3F%2A%2A%0A%0AFor%20example%3A%20macOS%2C%20Windows%0A%0A%2A%2AReproduction%20URL%2A%2A%0A%0AA%20Tailwind%20Play%20link%20or%20public%20GitHub%20repo%20that%20includes%20a%20minimal%20reproduction%20of%20the%20bug.%20%2A%2APlease%20do%20not%20link%20to%20your%20actual%20project%2A%2A%2C%20what%20we%20need%20instead%20is%20a%20_minimal_%20reproduction%20in%20a%20fresh%20project%20without%20any%20unnecessary%20code.%20This%20means%20it%20doesn%27t%20matter%20if%20your%20real%20project%20is%20private%2Fconfidential%2C%20since%20we%20want%20a%20link%20to%20a%20separate%2C%20isolated%20reproduction%20anyways.%0A%0AA%20reproduction%20is%20%2A%2Arequired%2A%2A%20when%20filing%20an%20issue%20%E2%80%94%20any%20issue%20opened%20without%20a%20reproduction%20will%20be%20closed%20and%20you%27ll%20be%20asked%20to%20create%20a%20new%20issue%20that%20includes%20a%20reproduction.%20We%27re%20a%20small%20team%20and%20we%20can%27t%20keep%20up%20with%20the%20volume%20of%20issues%20we%20receive%20if%20we%20need%20to%20reproduce%20each%20issue%20from%20scratch%20ourselves.%0A%0A%2A%2ADescribe%20your%20issue%2A%2A%0A%0ADescribe%20the%20problem%20you%27re%20seeing%2C%20any%20important%20steps%20to%20reproduce%20and%20what%20behavior%20you%20expect%20instead.
+    about: If you've already asked for help with a problem and confirmed something is broken with Tailwind CSS itself, create a bug report.
   - name: Documentation Issue
     url: https://github.com/tailwindlabs/tailwindcss.com
     about: 'For documentation issues, suggest changes on our documentation repository.'
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index aa0793aa3..ce7fafb97 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,26 +4,8 @@
 
 **Please ask first before starting work on any significant new features.**
 
-It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create a discussion to first discuss any significant new features.
+It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create an issue to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, or adding new component examples to the documentation.
 
-For more info, check out the contributing guide:
-
-https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md
-
--->
-
-## Summary
-
-<!--
-
-Provide a summary of the issue and the changes you're making. How does your change solve the problem?
-
--->
-
-## Test plan
-
-<!--
-
-Explain how you tested your changes. Include the exact commands that you used to verify the change works and include screenshots/screen recordings of the update behavior in the browser if applicable.
+https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md
 
 -->
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5ae59e80f..4dbbe9cbb 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,68 +2,40 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: [master, next]
   pull_request:
+    branches: [master, next]
 
 permissions:
   contents: read
 
-env:
-  NODE_VERSION: 24
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
-  tests:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
     strategy:
-      fail-fast: false
       matrix:
-        runner:
-          - name: Windows
-            os: windows-latest
-
-          - name: Linux
-            os: namespace-profile-default
-
-          # Playwright 1.62+ dropped WebKit support for macOS 14, and hangs
-          # instead of failing when launching WebKit on a macos-14 runner.
-          - name: macOS
-            os: macos-15
-
-        # Exclude windows and macos from being built on feature branches
-        run-all:
-          - ${{ github.ref == 'refs/heads/main' || contains(github.event.pull_request.body, '[ci-all]') || github.event.pull_request.user.login == 'depfu[bot]' }}
-        exclude:
-          - run-all: false
-            runner:
-              name: Windows
-          - run-all: false
-            runner:
-              name: macOS
-
-    runs-on: ${{ matrix.runner.os }}
-    timeout-minutes: 30
-
-    name: ${{ matrix.runner.name }}
+        node-version: [20]
 
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v3
         with:
-          persist-credentials: false
-      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+          version: ^8.15.0
 
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
 
       # Cargo already skips downloading dependencies if they already exist
       - name: Cache cargo
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
+        uses: actions/cache@v3
         with:
           path: |
+            ~/.cargo/bin/
             ~/.cargo/registry/index/
             ~/.cargo/registry/cache/
             ~/.cargo/git/db/
@@ -72,36 +44,23 @@ jobs:
 
       # Cache the `oxide` Rust build
       - name: Cache oxide build
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
+        uses: actions/cache@v3
         with:
           path: |
-            ./crates/node/*.node
-            ./crates/node/*.wasm
-            ./crates/node/index.d.ts
-            ./crates/node/index.js
-            ./crates/node/browser.js
-            ./crates/node/tailwindcss-oxide.wasi-browser.js
-            ./crates/node/tailwindcss-oxide.wasi.cjs
-            ./crates/node/wasi-worker-browser.mjs
-            ./crates/node/wasi-worker.mjs
-          key: ${{ runner.os }}-oxide-${{ hashFiles('./crates/**/*') }}
-
-      - name: Setup WASM target
-        run: rustup target add wasm32-wasip1-threads
+            ./oxide/target/
+            ./oxide/crates/node/*.node
+            ./oxide/crates/node/index.js
+            ./oxide/crates/node/index.d.ts
+          key: ${{ runner.os }}-oxide-${{ hashFiles('./oxide/crates/**/*') }}
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install
 
       - name: Build
         run: pnpm run build
-        env:
-          CARGO_PROFILE_RELEASE_LTO: 'off'
-          CARGO_TARGET_X86_64_PC_WINDOWS_MSVC_LINKER: 'lld-link'
 
       - name: Lint
         run: pnpm run lint
-        # Only lint on linux to avoid \r\n line ending errors
-        if: matrix.runner.os == 'ubuntu-latest'
 
       - name: Test
         run: pnpm run test
@@ -112,13 +71,12 @@ jobs:
       - name: Run Playwright tests
         run: npm run test:ui
 
-  notify:
-    if: ${{ always() && github.ref == 'refs/heads/main' && needs.tests.result == 'failure' }}
-    needs: tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Notify Discord
-        uses: discord-actions/message@5c7149c81a83146e5d01f142be1bf87a61831c4d # v2
+      - uses: actions/upload-artifact@v3
+        if: always()
         with:
-          webhookUrl: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          message: 'The [most recent ${{ github.workflow }} workflow](<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>) on the `main` branch has failed.'
+          name: playwright-report
+          path: packages/tailwindcss/playwright-report/
+          retention-days: 30
+
+      - name: Bench
+        run: pnpm run bench
diff --git a/.github/workflows/integration-tests.yml b/.github/workflows/integration-tests.yml
deleted file mode 100644
index 457c38424..000000000
--- a/.github/workflows/integration-tests.yml
+++ /dev/null
@@ -1,125 +0,0 @@
-name: Integration Tests
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-
-permissions:
-  contents: read
-
-env:
-  NODE_VERSION: 24
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  tests:
-    strategy:
-      fail-fast: false
-      matrix:
-        runner:
-          - name: Windows
-            os: windows-latest
-
-          - name: Linux
-            os: namespace-profile-default
-
-          - name: macOS
-            os: macos-14
-
-        integration:
-          - upgrade
-          - vite
-          - cli
-          - postcss
-          - oxide
-          - webpack
-
-        # Exclude windows and macos from being built on feature branches
-        run-all:
-          - ${{ github.ref == 'refs/heads/main' || contains(github.event.pull_request.body, '[ci-all]') }}
-        exclude:
-          - run-all: false
-            runner:
-              name: Windows
-          - run-all: false
-            runner:
-              name: macOS
-
-    runs-on: ${{ matrix.runner.os }}
-    timeout-minutes: 30
-
-    name: ${{ matrix.runner.name }} /  ${{ matrix.integration }}
-
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-        with:
-          persist-credentials: false
-      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
-
-      - run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      # Cargo already skips downloading dependencies if they already exist
-      - name: Cache cargo
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
-        with:
-          path: |
-            ~/.cargo/registry/index/
-            ~/.cargo/registry/cache/
-            ~/.cargo/git/db/
-            target/
-          key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      # Cache the `oxide` Rust build
-      - name: Cache oxide build
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
-        with:
-          path: |
-            ./crates/node/*.node
-            ./crates/node/*.wasm
-            ./crates/node/index.d.ts
-            ./crates/node/index.js
-            ./crates/node/browser.js
-            ./crates/node/tailwindcss-oxide.wasi-browser.js
-            ./crates/node/tailwindcss-oxide.wasi.cjs
-            ./crates/node/wasi-worker-browser.mjs
-            ./crates/node/wasi-worker.mjs
-          key: ${{ runner.os }}-oxide-${{ hashFiles('./crates/**/*') }}
-
-      - name: Setup WASM target
-        run: rustup target add wasm32-wasip1-threads
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
-        run: pnpm run build
-        env:
-          CARGO_PROFILE_RELEASE_LTO: 'off'
-          CARGO_TARGET_X86_64_PC_WINDOWS_MSVC_LINKER: 'lld-link'
-
-      - name: Test ${{ matrix.integration }}
-        run: pnpm run test:integrations ./integrations/${{ matrix.integration }}
-        env:
-          GITHUB_WORKSPACE: ${{ github.workspace }}
-
-  notify:
-    if: ${{ always() && github.ref == 'refs/heads/main' && needs.tests.result == 'failure' }}
-    needs: tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Notify Discord
-        uses: discord-actions/message@5c7149c81a83146e5d01f142be1bf87a61831c4d # v2
-        with:
-          webhookUrl: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          message: 'The [most recent ${{ github.workflow }} workflow](<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>) on the `main` branch has failed.'
diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml
deleted file mode 100644
index 24e829afd..000000000
--- a/.github/workflows/prepare-release.yml
+++ /dev/null
@@ -1,307 +0,0 @@
-name: Prepare Release
-
-on:
-  workflow_dispatch:
-    inputs:
-      dry_run:
-        description: Skip creating the draft GitHub release
-        required: false
-        default: true
-        type: boolean
-  push:
-    tags:
-      - 'v*'
-
-env:
-  APP_NAME: tailwindcss-oxide
-  NODE_VERSION: 24
-  PNPM_VERSION: '11.9.0'
-  OXIDE_LOCATION: ./crates/node
-
-permissions:
-  contents: read
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        include:
-          # Windows
-          - os: windows-latest
-            target: x86_64-pc-windows-msvc
-          - os: windows-latest
-            target: aarch64-pc-windows-msvc
-          # macOS
-          - os: macos-latest
-            target: x86_64-apple-darwin
-            strip: strip -x # Must use -x on macOS. This produces larger results on linux.
-          - os: macos-latest
-            target: aarch64-apple-darwin
-            page-size: 14
-            strip: strip -x # Must use -x on macOS. This produces larger results on linux.
-          # Android
-          - os: ubuntu-latest
-            target: aarch64-linux-android
-            strip: ${ANDROID_NDK_LATEST_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip
-          - os: ubuntu-latest
-            target: armv7-linux-androideabi
-            strip: ${ANDROID_NDK_LATEST_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip
-          # Linux
-          - os: ubuntu-latest
-            target: x86_64-unknown-linux-gnu
-            strip: strip
-            build-flags: --use-napi-cross
-          - os: ubuntu-latest
-            target: aarch64-unknown-linux-gnu
-            strip: aarch64-linux-gnu-strip
-            build-flags: --use-napi-cross
-          - os: ubuntu-latest
-            target: armv7-unknown-linux-gnueabihf
-            strip: arm-linux-gnueabihf-strip
-            build-flags: --use-napi-cross
-          - os: ubuntu-latest
-            target: aarch64-unknown-linux-musl
-            strip-zig: true
-            build-flags: -x
-          - os: ubuntu-latest
-            target: x86_64-unknown-linux-musl
-            strip: strip
-            build-flags: -x
-
-    name: Build ${{ matrix.target }} (oxide)
-    runs-on: ${{ matrix.os }}
-    timeout-minutes: 15
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-        with:
-          persist-credentials: false
-      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
-        with:
-          version: ${{ env.PNPM_VERSION }}
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          package-manager-cache: false
-
-      - name: Install gcc-arm-linux-gnueabihf
-        if: ${{ matrix.target == 'armv7-unknown-linux-gnueabihf' }}
-        run: |
-          sudo apt-get update
-          sudo apt-get install gcc-arm-linux-gnueabihf g++-arm-linux-gnueabihf -y
-
-      - name: Install binutils-aarch64-linux-gnu
-        if: ${{ matrix.target == 'aarch64-unknown-linux-gnu' }}
-        run: |
-          sudo apt-get update
-          sudo apt-get install binutils-aarch64-linux-gnu -y
-
-      - uses: mlugg/setup-zig@d1434d08867e3ee9daa34448df10607b98908d29 # v2
-        if: ${{ contains(matrix.target, 'musl') }}
-        with:
-          version: 0.14.1
-          use-cache: false
-
-      - name: Install cargo-zigbuild
-        uses: taiki-e/install-action@65851e10cd6c377f11a60e600abc07cb08643468 # v2
-        if: ${{ contains(matrix.target, 'musl') }}
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        with:
-          tool: cargo-zigbuild
-
-      - name: Setup rust target
-        run: rustup target add ${{ matrix.target }}
-
-      - name: Install dependencies
-        run: pnpm install --ignore-scripts --frozen-lockfile --filter=!./playgrounds/*
-
-      - name: Build release
-        run: pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform --target=${{ matrix.target }} ${{ matrix.build-flags }}
-        env:
-          RUST_TARGET: ${{ matrix.target }}
-          JEMALLOC_SYS_WITH_LG_PAGE: ${{ matrix.page-size }}
-
-      - name: Strip debug symbols # https://github.com/rust-lang/rust/issues/46034
-        if: ${{ matrix.strip || matrix.strip-zig }}
-        env:
-          STRIP_COMMAND: ${{ matrix.strip }}
-          STRIP_ZIG: ${{ matrix.strip-zig }}
-        run: |
-          if [ "$STRIP_ZIG" = "true" ]; then
-            for file in ${{ env.OXIDE_LOCATION }}/*.node; do
-              zig objcopy --strip-all "$file" "$file.stripped"
-              mv "$file.stripped" "$file"
-            done
-            exit 0
-          fi
-
-          eval "$STRIP_COMMAND ${{ env.OXIDE_LOCATION }}/*.node"
-
-      - name: Upload artifacts
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        with:
-          name: bindings-${{ matrix.target }}
-          path: ${{ env.OXIDE_LOCATION }}/*.node
-
-  build-freebsd:
-    name: Build x86_64-unknown-freebsd (OXIDE)
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-        with:
-          persist-credentials: false
-      - name: Build FreeBSD
-        uses: cross-platform-actions/action@cdc9ee69ef84a5f2e59c9058335d9c57bcb4ac86 # v0.25.0
-        env:
-          DEBUG: napi:*
-          RUSTUP_HOME: /usr/local/rustup
-          CARGO_HOME: /usr/local/cargo
-          RUSTUP_IO_THREADS: 1
-          RUST_TARGET: x86_64-unknown-freebsd
-        with:
-          operating_system: freebsd
-          version: '14.0'
-          memory: 13G
-          cpu_count: 3
-          environment_variables: 'DEBUG RUSTUP_IO_THREADS'
-          shell: bash
-          run: |
-            sudo pkg install -y -f curl node libnghttp2 npm
-            sudo npm install -g pnpm@${{ env.PNPM_VERSION }} --unsafe-perm=true
-            curl -sSf https://static.rust-lang.org/rustup/archive/1.27.1/x86_64-unknown-freebsd/rustup-init --output rustup-init
-            chmod +x rustup-init
-            ./rustup-init -y --profile minimal
-            source "$HOME/.cargo/env"
-            pnpm install --ignore-scripts --frozen-lockfile --filter=!./playgrounds/* || true
-            echo "~~~~ rustc --version ~~~~"
-            rustc --version
-            echo "~~~~ node -v ~~~~"
-            node -v
-            echo "~~~~ pnpm --version ~~~~"
-            pnpm --version
-            pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform
-            strip -x ${{ env.OXIDE_LOCATION }}/*.node
-            ls -la ${{ env.OXIDE_LOCATION }}
-      - name: Upload artifacts
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        with:
-          name: bindings-x86_64-unknown-freebsd
-          path: ${{ env.OXIDE_LOCATION }}/*.node
-
-  prepare:
-    runs-on: macos-14
-    timeout-minutes: 15
-    name: Build and release Tailwind CSS
-
-    permissions:
-      contents: write # Required for creating releases
-
-    needs:
-      - build
-      - build-freebsd
-
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-        with:
-          fetch-depth: 20
-          persist-credentials: false
-
-      - run: git fetch --tags -f
-
-      - name: Resolve version
-        id: vars
-        run: |
-          echo "TAG_NAME=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
-
-      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
-        with:
-          version: ${{ env.PNPM_VERSION }}
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          registry-url: 'https://registry.npmjs.org'
-          package-manager-cache: false
-
-      - name: Setup WASM target
-        run: rustup target add wasm32-wasip1-threads
-
-      - name: Install dependencies
-        run: pnpm --filter=!./playgrounds/* install --frozen-lockfile
-
-      - name: Download artifacts
-        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
-        with:
-          path: ${{ env.OXIDE_LOCATION }}
-
-      - name: Move artifacts
-        run: |
-          cd ${{ env.OXIDE_LOCATION }}
-          cp bindings-x86_64-pc-windows-msvc/* ./npm/win32-x64-msvc/
-          cp bindings-aarch64-pc-windows-msvc/* ./npm/win32-arm64-msvc/
-          cp bindings-x86_64-apple-darwin/* ./npm/darwin-x64/
-          cp bindings-aarch64-apple-darwin/* ./npm/darwin-arm64/
-          cp bindings-aarch64-linux-android/* ./npm/android-arm64/
-          cp bindings-armv7-linux-androideabi/* ./npm/android-arm-eabi/
-          cp bindings-aarch64-unknown-linux-gnu/* ./npm/linux-arm64-gnu/
-          cp bindings-aarch64-unknown-linux-musl/* ./npm/linux-arm64-musl/
-          cp bindings-armv7-unknown-linux-gnueabihf/* ./npm/linux-arm-gnueabihf/
-          cp bindings-x86_64-unknown-linux-gnu/* ./npm/linux-x64-gnu/
-          cp bindings-x86_64-unknown-linux-musl/* ./npm/linux-x64-musl/
-          cp bindings-x86_64-unknown-freebsd/* ./npm/freebsd-x64/
-
-      - name: Build Tailwind CSS
-        run: pnpm run build
-        env:
-          FEATURES_ENV: stable
-
-      - name: Run pre-publish optimizations scripts
-        run: node ./scripts/pre-publish-optimizations.mjs
-
-      - name: Lock pre-release versions
-        run: node ./scripts/lock-pre-release-versions.mjs
-
-      - name: Get release notes
-        run: |
-          RELEASE_NOTES=$(node ./scripts/release-notes.mjs)
-          echo "RELEASE_NOTES<<EOF" >> $GITHUB_ENV
-          echo "$RELEASE_NOTES" >> $GITHUB_ENV
-          echo "EOF" >> $GITHUB_ENV
-
-      - name: Upload standalone artifacts
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        with:
-          name: tailwindcss-standalone
-          path: packages/@tailwindcss-standalone/dist/
-
-      - name: Upload npm package tarballs
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        with:
-          name: npm-package-tarballs
-          path: dist/*.tgz
-
-      - name: Prepare GitHub Release
-        if: ${{ !inputs.dry_run }}
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh release create "${TAG_NAME}" \
-              --draft \
-              --title "${TAG_NAME}" \
-              --notes "${RELEASE_NOTES}" \
-              packages/@tailwindcss-standalone/dist/sha256sums.txt \
-              packages/@tailwindcss-standalone/dist/tailwindcss-linux-arm64 \
-              packages/@tailwindcss-standalone/dist/tailwindcss-linux-arm64-musl \
-              packages/@tailwindcss-standalone/dist/tailwindcss-linux-x64 \
-              packages/@tailwindcss-standalone/dist/tailwindcss-linux-x64-musl \
-              packages/@tailwindcss-standalone/dist/tailwindcss-macos-arm64 \
-              packages/@tailwindcss-standalone/dist/tailwindcss-macos-x64 \
-              packages/@tailwindcss-standalone/dist/tailwindcss-windows-x64.exe
diff --git a/.github/workflows/release-oxide.yml b/.github/workflows/release-oxide.yml
new file mode 100644
index 000000000..94a7d90fb
--- /dev/null
+++ b/.github/workflows/release-oxide.yml
@@ -0,0 +1,228 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      release_channel:
+        description: 'Release channel'
+        required: false
+        default: 'next'
+        type: string
+
+permissions:
+  contents: read
+
+env:
+  APP_NAME: tailwindcss-oxide
+  NODE_VERSION: 20
+  PNPM_VERSION: ^8.15.0
+  OXIDE_LOCATION: ./oxide/crates/node
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        include:
+          # Windows
+          - os: windows-latest
+            target: x86_64-pc-windows-msvc
+          # macOS
+          - os: macos-latest
+            target: x86_64-apple-darwin
+            strip: strip -x # Must use -x on macOS. This produces larger results on linux.
+          - os: macos-latest
+            target: aarch64-apple-darwin
+            page-size: 14
+            strip: strip -x # Must use -x on macOS. This produces larger results on linux.
+          # Android
+          - os: ubuntu-latest
+            target: aarch64-linux-android
+            strip: ${ANDROID_NDK_LATEST_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip
+          - os: ubuntu-latest
+            target: armv7-linux-androideabi
+            strip: ${ANDROID_NDK_LATEST_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip
+          # Linux
+          - os: ubuntu-latest
+            target: x86_64-unknown-linux-gnu
+            strip: strip
+            container:
+              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian
+          - os: ubuntu-latest
+            target: aarch64-unknown-linux-gnu
+            strip: llvm-strip
+            container:
+              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-aarch64
+          - os: ubuntu-latest
+            target: armv7-unknown-linux-gnueabihf
+            strip: llvm-strip
+            container:
+              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-zig
+          - os: ubuntu-latest
+            target: aarch64-unknown-linux-musl
+            strip: aarch64-linux-musl-strip
+            download: true
+            container:
+              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
+          - os: ubuntu-latest
+            target: x86_64-unknown-linux-musl
+            strip: strip
+            download: true
+            container:
+              image: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
+
+    name: Build ${{ matrix.target }} (OXIDE)
+    runs-on: ${{ matrix.os }}
+    container: ${{ matrix.container }}
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v3
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'pnpm'
+
+      # Cargo already skips downloading dependencies if they already exist
+      - name: Cache cargo
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cargo/bin/
+            ~/.cargo/registry/index/
+            ~/.cargo/registry/cache/
+            ~/.cargo/git/db/
+            target/
+          key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      # Cache the `oxide` Rust build
+      - name: Cache oxide build
+        uses: actions/cache@v3
+        with:
+          path: |
+            ./oxide/target/
+            ./oxide/crates/node/*.node
+            ./oxide/crates/node/index.js
+            ./oxide/crates/node/index.d.ts
+          key: ${{ runner.os }}-${{ matrix.target }}-oxide-${{ hashFiles('./oxide/crates/**/*') }}
+
+      - name: Install Node.JS
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Setup cross compile toolchain
+        if: ${{ matrix.setup }}
+        run: ${{ matrix.setup }}
+
+      - name: Install Rust (Stable)
+        if: ${{ matrix.download }}
+        run: |
+          rustup default stable
+
+      - name: Setup rust target
+        run: rustup target add ${{ matrix.target }}
+
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts --filter=!./playgrounds/*
+
+      - name: Build release
+        run: pnpm run build --filter ${{ env.OXIDE_LOCATION }}
+        env:
+          RUST_TARGET: ${{ matrix.target }}
+          JEMALLOC_SYS_WITH_LG_PAGE: ${{ matrix.page-size }}
+
+      - name: Strip debug symbols # https://github.com/rust-lang/rust/issues/46034
+        if: ${{ matrix.strip }}
+        run: ${{ matrix.strip }} ${{ env.OXIDE_LOCATION }}/*.node
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: bindings-${{ matrix.target }}
+          path: ${{ env.OXIDE_LOCATION }}/*.node
+
+  release:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    name: Build and release Tailwind CSS
+
+    permissions:
+      contents: read
+      # https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions
+      id-token: write
+
+    needs:
+      - build
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v3
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+
+      # Cargo already skips downloading dependencies if they already exist
+      - name: Cache cargo
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cargo/bin/
+            ~/.cargo/registry/index/
+            ~/.cargo/registry/cache/
+            ~/.cargo/git/db/
+            target/
+          key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      # Cache the `oxide` Rust build
+      - name: Cache oxide build
+        uses: actions/cache@v3
+        with:
+          path: |
+            ./oxide/target/
+            ./oxide/crates/node/*.node
+            ./oxide/crates/node/index.js
+            ./oxide/crates/node/index.d.ts
+          key: ${{ runner.os }}-${{ matrix.target }}-oxide-${{ hashFiles('./oxide/crates/**/*') }}
+
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts --filter=!./playgrounds/*
+
+      - name: Build Tailwind CSS
+        run: pnpm run build
+
+      - name: Download artifacts
+        uses: actions/download-artifact@v3
+        with:
+          path: ${{ env.OXIDE_LOCATION }}
+
+      - name: Move artifacts
+        run: |
+          cd ${{ env.OXIDE_LOCATION }}
+          cp bindings-x86_64-pc-windows-msvc/* ./npm/win32-x64-msvc/
+          cp bindings-x86_64-apple-darwin/* ./npm/darwin-x64/
+          cp bindings-aarch64-apple-darwin/* ./npm/darwin-arm64/
+          cp bindings-aarch64-linux-android/* ./npm/android-arm64/
+          cp bindings-armv7-linux-androideabi/* ./npm/android-arm-eabi/
+          cp bindings-aarch64-unknown-linux-gnu/* ./npm/linux-arm64-gnu/
+          cp bindings-aarch64-unknown-linux-musl/* ./npm/linux-arm64-musl/
+          cp bindings-armv7-unknown-linux-gnueabihf/* ./npm/linux-arm-gnueabihf/
+          cp bindings-x86_64-unknown-linux-gnu/* ./npm/linux-x64-gnu/
+          cp bindings-x86_64-unknown-linux-musl/* ./npm/linux-x64-musl/
+
+      - name: Lock pre-release versions
+        run: node ./scripts/lock-pre-release-versions.mjs
+
+      - name: Publish
+        run: pnpm --recursive publish --tag ${{ inputs.release_channel }} --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
deleted file mode 100644
index 2c957d3af..000000000
--- a/.github/workflows/release.yml
+++ /dev/null
@@ -1,358 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches: [main]
-  release:
-    types: [published]
-  workflow_dispatch:
-    inputs:
-      channel:
-        description: Release channel to publish
-        required: true
-        default: insiders
-        type: choice
-        options:
-          - insiders
-          - release
-
-permissions:
-  contents: read
-
-env:
-  APP_NAME: tailwindcss-oxide
-  NODE_VERSION: 24
-  PNPM_VERSION: '11.9.0'
-  OXIDE_LOCATION: ./crates/node
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        include:
-          # Windows
-          - os: windows-latest
-            target: x86_64-pc-windows-msvc
-          - os: windows-latest
-            target: aarch64-pc-windows-msvc
-          # macOS
-          - os: macos-latest
-            target: x86_64-apple-darwin
-            strip: strip -x # Must use -x on macOS. This produces larger results on linux.
-          - os: macos-latest
-            target: aarch64-apple-darwin
-            page-size: 14
-            strip: strip -x # Must use -x on macOS. This produces larger results on linux.
-          # Android
-          - os: ubuntu-latest
-            target: aarch64-linux-android
-            strip: ${ANDROID_NDK_LATEST_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip
-          - os: ubuntu-latest
-            target: armv7-linux-androideabi
-            strip: ${ANDROID_NDK_LATEST_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip
-          # Linux
-          - os: ubuntu-latest
-            target: x86_64-unknown-linux-gnu
-            strip: strip
-            build-flags: --use-napi-cross
-          - os: ubuntu-latest
-            target: aarch64-unknown-linux-gnu
-            strip: aarch64-linux-gnu-strip
-            build-flags: --use-napi-cross
-          - os: ubuntu-latest
-            target: armv7-unknown-linux-gnueabihf
-            strip: arm-linux-gnueabihf-strip
-            build-flags: --use-napi-cross
-          - os: ubuntu-latest
-            target: aarch64-unknown-linux-musl
-            strip-zig: true
-            build-flags: -x
-          - os: ubuntu-latest
-            target: x86_64-unknown-linux-musl
-            strip: strip
-            build-flags: -x
-
-    name: Build ${{ matrix.target }} (oxide)
-    runs-on: ${{ matrix.os }}
-    timeout-minutes: 15
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-        with:
-          persist-credentials: false
-      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
-        with:
-          version: ${{ env.PNPM_VERSION }}
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          package-manager-cache: false
-
-      - name: Install gcc-arm-linux-gnueabihf
-        if: ${{ matrix.target == 'armv7-unknown-linux-gnueabihf' }}
-        run: |
-          sudo apt-get update
-          sudo apt-get install gcc-arm-linux-gnueabihf g++-arm-linux-gnueabihf -y
-
-      - name: Install binutils-aarch64-linux-gnu
-        if: ${{ matrix.target == 'aarch64-unknown-linux-gnu' }}
-        run: |
-          sudo apt-get update
-          sudo apt-get install binutils-aarch64-linux-gnu -y
-
-      - uses: mlugg/setup-zig@d1434d08867e3ee9daa34448df10607b98908d29 # v2
-        if: ${{ contains(matrix.target, 'musl') }}
-        with:
-          version: 0.14.1
-          use-cache: false
-
-      - name: Install cargo-zigbuild
-        uses: taiki-e/install-action@65851e10cd6c377f11a60e600abc07cb08643468 # v2
-        if: ${{ contains(matrix.target, 'musl') }}
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        with:
-          tool: cargo-zigbuild
-
-      - name: Setup rust target
-        run: rustup target add ${{ matrix.target }}
-
-      - name: Install dependencies
-        run: pnpm install --ignore-scripts --frozen-lockfile --filter=!./playgrounds/*
-
-      - name: Build release
-        run: pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform --target=${{ matrix.target }} ${{ matrix.build-flags }}
-        env:
-          RUST_TARGET: ${{ matrix.target }}
-          JEMALLOC_SYS_WITH_LG_PAGE: ${{ matrix.page-size }}
-
-      - name: Strip debug symbols # https://github.com/rust-lang/rust/issues/46034
-        if: ${{ matrix.strip || matrix.strip-zig }}
-        env:
-          STRIP_COMMAND: ${{ matrix.strip }}
-          STRIP_ZIG: ${{ matrix.strip-zig }}
-        run: |
-          if [ "$STRIP_ZIG" = "true" ]; then
-            for file in ${{ env.OXIDE_LOCATION }}/*.node; do
-              zig objcopy --strip-all "$file" "$file.stripped"
-              mv "$file.stripped" "$file"
-            done
-            exit 0
-          fi
-
-          eval "$STRIP_COMMAND ${{ env.OXIDE_LOCATION }}/*.node"
-
-      - name: Upload artifacts
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        with:
-          name: bindings-${{ matrix.target }}
-          path: ${{ env.OXIDE_LOCATION }}/*.node
-
-  build-freebsd:
-    name: Build x86_64-unknown-freebsd (OXIDE)
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-        with:
-          persist-credentials: false
-      - name: Build FreeBSD
-        uses: cross-platform-actions/action@cdc9ee69ef84a5f2e59c9058335d9c57bcb4ac86 # v0.25.0
-        env:
-          DEBUG: napi:*
-          RUSTUP_HOME: /usr/local/rustup
-          CARGO_HOME: /usr/local/cargo
-          RUSTUP_IO_THREADS: 1
-          RUST_TARGET: x86_64-unknown-freebsd
-        with:
-          operating_system: freebsd
-          version: '14.0'
-          memory: 13G
-          cpu_count: 3
-          environment_variables: 'DEBUG RUSTUP_IO_THREADS'
-          shell: bash
-          run: |
-            sudo pkg install -y -f curl node libnghttp2 npm
-            sudo npm install -g pnpm@${{ env.PNPM_VERSION }} --unsafe-perm=true
-            curl -sSf https://static.rust-lang.org/rustup/archive/1.27.1/x86_64-unknown-freebsd/rustup-init --output rustup-init
-            chmod +x rustup-init
-            ./rustup-init -y --profile minimal
-            source "$HOME/.cargo/env"
-            echo "~~~~ rustc --version ~~~~"
-            rustc --version
-            echo "~~~~ node -v ~~~~"
-            node -v
-            echo "~~~~ pnpm --version ~~~~"
-            pnpm --version
-            pnpm install --ignore-scripts --frozen-lockfile --filter=!./playgrounds/* || true
-            pnpm run --filter ${{ env.OXIDE_LOCATION }} build:platform
-            strip -x ${{ env.OXIDE_LOCATION }}/*.node
-            ls -la ${{ env.OXIDE_LOCATION }}
-      - name: Upload artifacts
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        with:
-          name: bindings-x86_64-unknown-freebsd
-          path: ${{ env.OXIDE_LOCATION }}/*.node
-
-  release:
-    runs-on: macos-14
-    timeout-minutes: 15
-    name: Build and publish Tailwind CSS
-
-    permissions:
-      contents: read
-      # https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions
-      id-token: write
-
-    needs:
-      - build
-      - build-freebsd
-
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-        with:
-          fetch-depth: 20
-          persist-credentials: false
-
-      - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
-        with:
-          version: ${{ env.PNPM_VERSION }}
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          registry-url: 'https://registry.npmjs.org'
-          package-manager-cache: false
-
-      # npm trusted publishing validates the caller workflow filename, so all npm publishes live here.
-      # This workflow rebuilds the publish artifacts instead of depending on prepare-release.yml.
-      - name: Resolve release metadata
-        env:
-          INPUT_CHANNEL: ${{ github.event.inputs.channel || '' }}
-        run: |
-          if [[ "${{ github.event_name }}" == "release" || "$INPUT_CHANNEL" == "release" ]]; then
-            release_channel=$(node ./scripts/release-channel.js)
-
-            echo "RELEASE_KIND=release" >> $GITHUB_ENV
-            echo "RELEASE_CHANNEL=$release_channel" >> $GITHUB_ENV
-            echo "FEATURES_ENV=stable" >> $GITHUB_ENV
-          else
-            sha_short=$(git rev-parse --short HEAD)
-
-            echo "RELEASE_KIND=insiders" >> $GITHUB_ENV
-            echo "RELEASE_CHANNEL=insiders" >> $GITHUB_ENV
-            echo "SHA_SHORT=$sha_short" >> $GITHUB_ENV
-            echo "INSIDERS_VERSION=0.0.0-insiders.$sha_short" >> $GITHUB_ENV
-          fi
-
-      - name: Setup WASM target
-        run: rustup target add wasm32-wasip1-threads
-
-      - name: Install dependencies
-        run: pnpm --filter=!./playgrounds/* install --frozen-lockfile
-
-      - name: Download artifacts
-        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7
-        with:
-          path: ${{ env.OXIDE_LOCATION }}
-
-      - name: Move artifacts
-        run: |
-          cd ${{ env.OXIDE_LOCATION }}
-          cp bindings-x86_64-pc-windows-msvc/* ./npm/win32-x64-msvc/
-          cp bindings-aarch64-pc-windows-msvc/* ./npm/win32-arm64-msvc/
-          cp bindings-x86_64-apple-darwin/* ./npm/darwin-x64/
-          cp bindings-aarch64-apple-darwin/* ./npm/darwin-arm64/
-          cp bindings-aarch64-linux-android/* ./npm/android-arm64/
-          cp bindings-armv7-linux-androideabi/* ./npm/android-arm-eabi/
-          cp bindings-aarch64-unknown-linux-gnu/* ./npm/linux-arm64-gnu/
-          cp bindings-aarch64-unknown-linux-musl/* ./npm/linux-arm64-musl/
-          cp bindings-armv7-unknown-linux-gnueabihf/* ./npm/linux-arm-gnueabihf/
-          cp bindings-x86_64-unknown-linux-gnu/* ./npm/linux-x64-gnu/
-          cp bindings-x86_64-unknown-linux-musl/* ./npm/linux-x64-musl/
-          cp bindings-x86_64-unknown-freebsd/* ./npm/freebsd-x64/
-
-      - name: 'Version based on commit: ${{ env.INSIDERS_VERSION }}'
-        if: env.RELEASE_KIND == 'insiders'
-        run: pnpm run version-packages ${INSIDERS_VERSION}
-
-      - name: Build Tailwind CSS
-        if: env.RELEASE_KIND == 'insiders'
-        run: pnpm run build
-
-      - name: Build Tailwind CSS
-        if: env.RELEASE_KIND == 'release'
-        run: pnpm run build
-        env:
-          FEATURES_ENV: ${{ env.FEATURES_ENV }}
-
-      - name: Run pre-publish optimizations scripts
-        run: node ./scripts/pre-publish-optimizations.mjs
-
-      - name: Lock pre-release versions
-        run: node ./scripts/lock-pre-release-versions.mjs
-
-      - name: Upload npm package tarballs
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        with:
-          name: npm-package-tarballs
-          path: dist/*.tgz
-
-      - name: Publish
-        run: |
-          pnpm --recursive --filter="!@tailwindcss/oxide-wasm32-wasi" publish --tag ${RELEASE_CHANNEL} --no-git-checks
-          # The wasm package needs a special npm config that isn't read when pnpm --recursive is used
-          pushd crates/node/npm/wasm32-wasi; pnpm publish --tag ${RELEASE_CHANNEL} --no-git-checks --config.node-linker=hoisted; popd;
-
-      - name: Trigger Tailwind Play update
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
-        with:
-          github-token: ${{ secrets.TAILWIND_PLAY_TOKEN }}
-          script: |
-            await github.rest.actions.createWorkflowDispatch({
-              owner: 'tailwindlabs',
-              repo: 'upgrades',
-              ref: 'main',
-              workflow_id: 'upgrade-tailwindcss.yml'
-            })
-
-  notify:
-    if: ${{ always() && (needs.build.result == 'failure' || needs.build-freebsd.result == 'failure' || needs.release.result == 'failure') }}
-    needs:
-      - build
-      - build-freebsd
-      - release
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
-        with:
-          persist-credentials: false
-
-      - name: Resolve release label
-        id: release
-        env:
-          INPUT_CHANNEL: ${{ github.event.inputs.channel || '' }}
-          RELEASE_TAG: ${{ github.event.release.tag_name || '' }}
-        run: |
-          if [[ "${{ github.event_name }}" == "release" ]]; then
-            tag_name="${RELEASE_TAG:-${GITHUB_REF_NAME}}"
-            echo "label=release ${tag_name}" >> $GITHUB_OUTPUT
-          elif [[ "$INPUT_CHANNEL" == "release" ]]; then
-            version=$(node -p "require('./packages/tailwindcss/package.json').version")
-            echo "label=release v${version}" >> $GITHUB_OUTPUT
-          else
-            sha_short=$(git rev-parse --short HEAD)
-            echo "label=insiders release 0.0.0-insiders.${sha_short}" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Notify Discord
-        uses: discord-actions/message@5c7149c81a83146e5d01f142be1bf87a61831c4d # v2
-        with:
-          webhookUrl: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          message: 'The [most recent ${{ github.workflow }} workflow](<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>) for `${{ steps.release.outputs.label }}` has failed.'
diff --git a/.gitignore b/.gitignore
index bbac7d227..092494627 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,5 +6,3 @@ test-results/
 playwright-report/
 blob-report/
 playwright/.cache/
-target/
-.debug/
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 000000000..ded82e2f6
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers = true
diff --git a/.prettierignore b/.prettierignore
index 4f50b932f..0333c2dc5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,9 +1,8 @@
 coverage/
 node_modules/
 pnpm-lock.yaml
-target/
-crates/node/index.d.ts
-crates/node/index.js
-crates/ignore/
+oxide/target/
+oxide/crates/node/index.d.ts
+oxide/crates/node/index.js
 .next
 .fingerprint
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5e6f6f89..5390fa10f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,1576 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-### Added
-
-- Add `@tailwindcss/turbopack` package to run Tailwind CSS with Next.js ([20367](https://github.com/tailwindlabs/tailwindcss/pull/20367))
-
-### Fixed
-
-- Ensure watch mode detects changes to symlinked `@source` files whose real paths aren't otherwise scanned ([#20356](https://github.com/tailwindlabs/tailwindcss/pull/20356))
-- Ensure custom variants using `@scope` wrap the generated utilities instead of nesting inside them ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
-- Fix flattening of `@scope` at-rules ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
-- Fix standalone declarations in `@scope`, wrap them in `:where(:scope)` ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
-- Always emit a space for empty fallback values in CSS variables (e.g. `var(--tw-blur,)` → `var(--tw-blur, )`) ([#20373](https://github.com/tailwindlabs/tailwindcss/pull/20373))
-- Canonicalization: convert arbitrary breakpoint and container query variants to named equivalents (e.g. `max-[64rem]` → `max-lg`) ([#20380](https://github.com/tailwindlabs/tailwindcss/pull/20380))
-- Prevent `@tailwindcss/vite` from crashing on every edit under Vite's experimental `bundledDev` mode ([#20379](https://github.com/tailwindlabs/tailwindcss/pull/20379))
-- Ensure `@tailwindcss/oxide` falls back to WASM on platforms without native bindings ([#20383](https://github.com/tailwindlabs/tailwindcss/pull/20383))
-- Detect classes in Ruby percent literals using angle brackets or custom delimiters (e.g. `%w<flex>`, `%w|flex|`), including in Slim and Haml templates ([#20387](https://github.com/tailwindlabs/tailwindcss/pull/20387))
-- Preserve whitespace in `--default(…)` values in custom functional utilities (e.g. `--default(box alphabetic)` no longer becomes `boxalphabetic`) ([#20392](https://github.com/tailwindlabs/tailwindcss/pull/20392))
-- Don't scan gitignored directories (e.g. `node_modules` and `.git`) when the project uses a safelist-style `.gitignore` (e.g. `/*` followed by `!/…` negations) ([#20397](https://github.com/tailwindlabs/tailwindcss/pull/20397))
-- Ensure root `theme('…')` namespace lookups in JavaScript plugins and config files return the full namespace object instead of the value of its `DEFAULT` key ([#20399](https://github.com/tailwindlabs/tailwindcss/pull/20399))
-- Skip ignored directories entirely when computing watch globs (`scanner.globs`), instead of walking their full contents on every rebuild ([#20408](https://github.com/tailwindlabs/tailwindcss/pull/20408))
-- Oxide: drop invalid UTF-8 candidates ([#20389](https://github.com/tailwindlabs/tailwindcss/pull/20389))
-- `@tailwindcss/vite` no longer forces a full page reload for external files (e.g.: `.php` files) ([#20414](https://github.com/tailwindlabs/tailwindcss/issues/20414))
-- Canonicalization: don't merge utilities that reference different theme variables set to CSS-wide keywords like `unset` ([#20417](https://github.com/tailwindlabs/tailwindcss/pull/20417))
-- Don't generate utilities when a modifier is used that would otherwise be silently ignored (e.g. `rounded-sm/[5]`, `shadow-sm/foo`, `stroke-2/50`) ([#20419](https://github.com/tailwindlabs/tailwindcss/pull/20419))
-- Only normalize top-level `and`, `or`, and `not` keywords in `supports-[…]` variants (e.g. `selector(a: not (.foo))` → `selector(a:not(.foo))`) ([#20420](https://github.com/tailwindlabs/tailwindcss/pull/20420))
-- Don't warn about Angular's `::ng-deep` and `:host-context()` when optimizing CSS ([#20434](https://github.com/tailwindlabs/tailwindcss/pull/20434))
-- Don't generate CSS for candidates containing an empty additional modifier (e.g. `bg-red-500/50/` and `group-hover/foo//bar:flex`) ([#20466](https://github.com/tailwindlabs/tailwindcss/pull/20466))
-- Sort `min-*`, `max-*`, and container query variants with decimal values numerically (e.g. `min-[40.25rem]` before `min-[40.5rem]`) ([#20512](https://github.com/tailwindlabs/tailwindcss/pull/20512))
-- Ensure CSS comments ending with `\*/` are closed correctly instead of swallowing the CSS that follows (e.g. `/* C:\temp\*/`) ([#20508](https://github.com/tailwindlabs/tailwindcss/pull/20508))
-- Improve style invalidation performance of `group-*` and `peer-*` variants ([#20513](https://github.com/tailwindlabs/tailwindcss/pull/20513))
-
-## [4.3.3] - 2026-07-16
-
-### Fixed
-
-- Support `--watch --poll[=ms]` in `@tailwindcss/cli` when filesystem events are unreliable or unavailable ([#20297](https://github.com/tailwindlabs/tailwindcss/pull/20297))
-- Canonicalization: match arbitrary hex colors against theme colors case-insensitively (e.g. `bg-[#fff]` and `bg-[#FFF]` → `bg-white`) ([#20298](https://github.com/tailwindlabs/tailwindcss/pull/20298))
-- Prevent Preflight from overriding Firefox's native `iframe:focus-visible` outline styles ([#20292](https://github.com/tailwindlabs/tailwindcss/pull/20292))
-- Ensure `theme('colors.foo')` in JS plugins resolves correctly when both `--color-foo` and `--color-foo-bar` exist ([#20299](https://github.com/tailwindlabs/tailwindcss/pull/20299))
-- Ensure fractional opacity modifiers work with named shadow sizes like `shadow-sm/12.5`, `text-shadow-sm/12.5`, `drop-shadow-sm/12.5`, and `inset-shadow-sm/12.5` ([#20302](https://github.com/tailwindlabs/tailwindcss/pull/20302))
-- Parse selectors like `[data-foo]div` as two selectors instead of one ([#20303](https://github.com/tailwindlabs/tailwindcss/pull/20303))
-- Ensure `@tailwindcss/postcss` rebuilds when a preprocessor like Sass changes the input CSS without changing the input file on disk ([#20310](https://github.com/tailwindlabs/tailwindcss/pull/20310))
-- Ensure CSS nesting is handled even when Lightning CSS isn't run, such as in `@tailwindcss/browser` and Tailwind Play ([#20124](https://github.com/tailwindlabs/tailwindcss/pull/20124))
-- Prevent achromatic theme colors from shifting hue when mixed in polar color spaces like `oklch` ([#20314](https://github.com/tailwindlabs/tailwindcss/pull/20314))
-- Ensure `--spacing(0)` is optimized to `0px` instead of `0` so it remains a `<length>` when used in `calc(…)` ([#20319](https://github.com/tailwindlabs/tailwindcss/pull/20319))
-- Load `@parcel/watcher` only when needed in `@tailwindcss/cli --watch` mode, so one-off builds and `--watch --poll` work when `@parcel/watcher` can't be loaded ([#20325](https://github.com/tailwindlabs/tailwindcss/pull/20325))
-- Use explicit platform fonts instead of `system-ui` and `ui-sans-serif` so CJK text respects the page's `lang` attribute on Windows ([#20318](https://github.com/tailwindlabs/tailwindcss/pull/20318))
-- Prevent `@tailwindcss/upgrade` from rewriting ignored files when run from a subdirectory ([#20329](https://github.com/tailwindlabs/tailwindcss/pull/20329))
-- Ensure earlier `@source` rules pointing to nested files are scanned when later `@source` rules point to files in parent folders ([#20335](https://github.com/tailwindlabs/tailwindcss/pull/20335))
-- Prevent `@tailwindcss/vite` from triggering full page reloads when scanned files are processed by Vite but haven't been loaded as modules yet ([#20336](https://github.com/tailwindlabs/tailwindcss/pull/20336))
-
-## [4.3.2] - 2026-06-26
-
-### Fixed
-
-- Support bare spacing values for `auto-rows-*` and `auto-cols-*` utilities (e.g. `auto-rows-12` and `auto-cols-16`) ([#20229](https://github.com/tailwindlabs/tailwindcss/pull/20229))
-- Prevent `@tailwindcss/cli` in `--watch` mode from crashing on Windows when `@source` points to a directory that doesn't exist ([#20242](https://github.com/tailwindlabs/tailwindcss/pull/20242))
-- Prevent `@tailwindcss/vite` from crashing in Deno v2.8.x when `context.parentURL` is not a valid URL ([#20245](https://github.com/tailwindlabs/tailwindcss/pull/20245))
-- Ensure `@tailwindcss/cli` in `--watch` mode rebuilds when the input CSS file changes in an ignored directory ([#20246](https://github.com/tailwindlabs/tailwindcss/pull/20246))
-- Allow `@variant` rules used in `addBase(…)` to use custom variants defined later ([#20247](https://github.com/tailwindlabs/tailwindcss/pull/20247))
-- Prevent `@tailwindcss/vite` from crashing during HMR when scanned files or directories are deleted ([#20259](https://github.com/tailwindlabs/tailwindcss/pull/20259))
-- Generate `font-size` instead of `color` declarations for `text-[--spacing(…)]` ([#20260](https://github.com/tailwindlabs/tailwindcss/pull/20260))
-- Prevent `@source` patterns from scanning unrelated sibling files and folders ([#20263](https://github.com/tailwindlabs/tailwindcss/pull/20263))
-- Extract class candidates adjacent to Template Toolkit delimiters like `%]…[%` in `.tt`, `.tt2`, and `.tx` files ([#20269](https://github.com/tailwindlabs/tailwindcss/pull/20269))
-- Extract class candidates from conditional Maud syntax like `p.text-black[condition]` ([#20269](https://github.com/tailwindlabs/tailwindcss/pull/20269))
-- Prevent `@position-try` rules from triggering unknown at-rule warnings when optimizing CSS ([#20277](https://github.com/tailwindlabs/tailwindcss/pull/20277))
-- Support class suggestions for named opacity modifiers from `--opacity` theme values ([#20287](https://github.com/tailwindlabs/tailwindcss/pull/20287))
-- Prevent type errors in `@tailwindcss/postcss` when used with newer PostCSS patch releases ([#20289](https://github.com/tailwindlabs/tailwindcss/pull/20289))
-
-## [4.3.1] - 2026-06-12
-
-### Added
-
-- Add `--silent` option to suppress output in `@tailwindcss/cli` ([#20100](https://github.com/tailwindlabs/tailwindcss/pull/20100))
-
-### Fixed
-
-- Remove deprecation warnings by using `Module#registerHooks` instead of `Module#register` on Node 26+ ([#20028](https://github.com/tailwindlabs/tailwindcss/pull/20028))
-- Canonicalization: don't crash when plugin utilities throw for unsupported values ([#20052](https://github.com/tailwindlabs/tailwindcss/pull/20052))
-- Allow `@apply` to be used with CSS mixins ([#19427](https://github.com/tailwindlabs/tailwindcss/pull/19427))
-- Ensure `not-*` correctly negates `@container` queries, including `style(…)` queries ([#20059](https://github.com/tailwindlabs/tailwindcss/pull/20059))
-- Ensure `drop-shadow-*` color utilities work with custom shadow values containing `calc(…)` ([#20080](https://github.com/tailwindlabs/tailwindcss/pull/20080))
-- Fix 'Sourcemap is likely to be incorrect' warnings when using `@tailwindcss/vite` ([#20103](https://github.com/tailwindlabs/tailwindcss/pull/20103))
-- Ensure `@tailwindcss/webpack` can be installed in Rspack projects without requiring `webpack` as a peer dependency ([#20027](https://github.com/tailwindlabs/tailwindcss/pull/20027))
-- Canonicalization: don't suggest invalid `calc(…)` expressions (e.g. `px-[calc(1rem+0px)]` → `px-[calc(1rem+0)]`) ([#20127](https://github.com/tailwindlabs/tailwindcss/pull/20127))
-- Canonicalization: avoid suggesting large spacing-scale values for arbitrary lengths (e.g. `left-[99999px]` → `left-[99999px]`, not `left-24999.75`) ([#20130](https://github.com/tailwindlabs/tailwindcss/pull/20130))
-- Ensure `@tailwindcss/cli` in `--watch` mode recovers when a tracked dependency is deleted and restored ([#20137](https://github.com/tailwindlabs/tailwindcss/pull/20137))
-- Ensure standalone `@tailwindcss/cli` binaries are ignored when scanning for class candidates ([#20139](https://github.com/tailwindlabs/tailwindcss/pull/20139))
-- Ensure class candidates are extracted from Twig `addClass(…)` and `removeClass(…)` calls ([#20198](https://github.com/tailwindlabs/tailwindcss/pull/20198))
-- Don't crash in the Ruby or Vue preprocessors when scanning files containing invalid UTF-8 bytes ([#19588](https://github.com/tailwindlabs/tailwindcss/pull/19588))
-- Allow `@variant` to be used inside `addBase` ([#19480](https://github.com/tailwindlabs/tailwindcss/pull/19480))
-- Ensure `@source` globs with symlinks are preserved ([#20203](https://github.com/tailwindlabs/tailwindcss/pull/20203))
-- Ensure later `@source` rules can re-include files excluded by earlier `@source not` rules ([#20203](https://github.com/tailwindlabs/tailwindcss/pull/20203))
-- Upgrade: don't migrate empty class rules to invalid `@utility` rules ([#20205](https://github.com/tailwindlabs/tailwindcss/pull/20205))
-- Ensure transitions between `inset-shadow-none` and other inset shadows work correctly ([#20208](https://github.com/tailwindlabs/tailwindcss/pull/20208))
-- Ensure explicitly referenced `@source` directories are scanned even when ignored by git ([#20214](https://github.com/tailwindlabs/tailwindcss/pull/20214))
-- Ensure `@source` globs ending in `**/*` preserve dynamic path segments to avoid scanning too many files ([#20217](https://github.com/tailwindlabs/tailwindcss/pull/20217))
-- Canonicalization: don't fold `calc(…)` divisions when the result would require high precision (e.g. `w-[calc(100%/3.5)]` → `w-[calc(100%/3.5)]`, not `w-[28.571428571428573%]`) ([#20221](https://github.com/tailwindlabs/tailwindcss/pull/20221))
-- Serve ESM type declarations to ESM importers of `@tailwindcss/postcss` ([#20228](https://github.com/tailwindlabs/tailwindcss/pull/20228))
-
-### Changed
-
-- Generate `0` instead of `calc(var(--spacing) * 0)` for spacing utilities like `m-0` and `left-0` ([#20196](https://github.com/tailwindlabs/tailwindcss/pull/20196))
-- Generate `var(--spacing)` instead of `calc(var(--spacing) * 1)` for spacing utilities like `m-1` and `left-1` ([#20196](https://github.com/tailwindlabs/tailwindcss/pull/20196))
-
-## [4.3.0] - 2026-05-08
-
-### Added
-
-- Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
-- Add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981), [#20019](https://github.com/tailwindlabs/tailwindcss/pull/20019))
-- Add `scrollbar-gutter-*` utilities ([#20018](https://github.com/tailwindlabs/tailwindcss/pull/20018))
-- Add `zoom-*` utilities ([#20020](https://github.com/tailwindlabs/tailwindcss/pull/20020))
-- Add `tab-*` utilities ([#20022](https://github.com/tailwindlabs/tailwindcss/pull/20022))
-- Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
-- Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
-- Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989))
-
-### Fixed
-
-- Ensure `@plugin` resolves package JavaScript entries instead of browser CSS entries when using `@tailwindcss/vite` ([#19949](https://github.com/tailwindlabs/tailwindcss/pull/19949))
-- Fix relative `@import` and `@plugin` paths resolving from the wrong directory when using `@tailwindcss/vite` ([#19965](https://github.com/tailwindlabs/tailwindcss/pull/19965))
-- Ensure CSS files containing `@variant` are processed by `@tailwindcss/vite` ([#19966](https://github.com/tailwindlabs/tailwindcss/pull/19966))
-- Resolve imports relative to `base` when `result.opts.from` is not provided when using `@tailwindcss/postcss` ([#19980](https://github.com/tailwindlabs/tailwindcss/pull/19980))
-- Canonicalization: preserve significant `_` whitespace in arbitrary values ([#19986](https://github.com/tailwindlabs/tailwindcss/pull/19986))
-- Canonicalization: add parentheses when removing whitespace from arbitrary values would hurt readability (e.g. `w-[calc(100%---spacing(60))]` → `w-[calc(100%-(--spacing(60)))]`) ([#19986](https://github.com/tailwindlabs/tailwindcss/pull/19986))
-- Canonicalization: preserve the original unit in arbitrary values instead of normalizing to base units (e.g. `-mt-[20in]` → `mt-[-20in]`, not `mt-[-1920px]`) ([#19988](https://github.com/tailwindlabs/tailwindcss/pull/19988))
-- Canonicalization: migrate arbitrary `:has()` variants from `[&:has(…)]` to `has-[…]` ([#19991](https://github.com/tailwindlabs/tailwindcss/pull/19991))
-- Upgrade: don’t migrate inline `style` attributes (e.g. `style="flex-grow: 1"` → `style="flex-grow: 1"`, not `style="grow: 1"`) ([#19918](https://github.com/tailwindlabs/tailwindcss/pull/19918))
-- Allow multiple `@utility` definitions with the same name but different value types ([#19777](https://github.com/tailwindlabs/tailwindcss/pull/19777))
-- Export missing `PluginWithConfig` type from `tailwindcss/plugin` to fix errors when inferring plugin config types ([#19707](https://github.com/tailwindlabs/tailwindcss/pull/19707))
-- Ensure `start` and `end` legacy utilities without values do not generate CSS ([#20003](https://github.com/tailwindlabs/tailwindcss/pull/20003))
-- Ensure `--value(…)` is required in functional `@utility` definitions ([#20005](https://github.com/tailwindlabs/tailwindcss/pull/20005))
-- Canonicalization: preserve required whitespace around operators in negated arbitrary values (e.g. `-left-[(var(--a)+var(--b))]`) ([#20011](https://github.com/tailwindlabs/tailwindcss/pull/20011))
-
-## [4.2.4] - 2026-04-21
-
-### Fixed
-
-- Ensure imports in `@import` and `@plugin` still resolve correctly when using Vite aliases in `@tailwindcss/vite` ([#19947](https://github.com/tailwindlabs/tailwindcss/pull/19947))
-
-## [4.2.3] - 2026-04-20
-
-### Fixed
-
-- Canonicalization: improve canonicalization for `tracking-*` utilities by preferring non-negative utilities (e.g. `-tracking-tighter` → `tracking-wider`) ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827))
-- Fix crash due to invalid characters in candidate (exceeding valid unicode code point range) ([#19829](https://github.com/tailwindlabs/tailwindcss/pull/19829))
-- Ensure query params in imports are considered unique resources when using `@tailwindcss/webpack` ([#19723](https://github.com/tailwindlabs/tailwindcss/pull/19723))
-- Canonicalization: collapse arbitrary values into shorthand utilities (e.g. `px-[1.2rem] py-[1.2rem]` → `p-[1.2rem]`) ([#19837](https://github.com/tailwindlabs/tailwindcss/pull/19837))
-- Canonicalization: collapse `border-{t,b}-*` into `border-y-*`, `border-{l,r}-*` into `border-x-*`, and `border-{t,r,b,l}-*` into `border-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
-- Canonicalization: collapse `scroll-m{t,b}-*` into `scroll-my-*`, `scroll-m{l,r}-*` into `scroll-mx-*`, and `scroll-m{t,r,b,l}-*` into `scroll-m-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
-- Canonicalization: collapse `scroll-p{t,b}-*` into `scroll-py-*`, `scroll-p{l,r}-*` into `scroll-px-*`, and `scroll-p{t,r,b,l}-*` into `scroll-p-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
-- Canonicalization: collapse `overflow-{x,y}-*` into `overflow-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
-- Canonicalization: collapse `overscroll-{x,y}-*` into `overscroll-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842))
-- Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities ([#19843](https://github.com/tailwindlabs/tailwindcss/pull/19843))
-- Upgrade: ensure files are not emptied out when killing the upgrade process while it's running ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846))
-- Upgrade: use `config.content` when migrating from Tailwind CSS v3 to Tailwind CSS v4 ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846))
-- Upgrade: never migrate files that are ignored by git ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846))
-- Add `.env` and `.env.*` to default ignored content files ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846))
-- Canonicalization: migrate `overflow-ellipsis` into `text-ellipsis` ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849))
-- Canonicalization: migrate `start-full` → `inset-s-full`, `start-auto` → `inset-s-auto`, `start-px` → `inset-s-px`, and `start-<number>` → `inset-s-<number>` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849))
-- Canonicalization: migrate `end-full` → `inset-e-full`, `end-auto` → `inset-e-auto`, `end-px` → `inset-e-px`, and `end-<number>` → `inset-e-<number>` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849))
-- Canonicalization: move the `-` sign inside the arbitrary value `-left-[9rem]` → `left-[-9rem]` ([#19858](https://github.com/tailwindlabs/tailwindcss/pull/19858))
-- Canonicalization: move the `-` sign outside the arbitrary value `ml-[calc(-1*var(--width))]` → `-ml-(--width)` ([#19858](https://github.com/tailwindlabs/tailwindcss/pull/19858))
-- Improve performance when scanning JSONL / NDJSON files ([#19862](https://github.com/tailwindlabs/tailwindcss/pull/19862))
-- Support `NODE_PATH` environment variable in standalone CLI ([#19617](https://github.com/tailwindlabs/tailwindcss/pull/19617))
-
-## [4.2.2] - 2026-03-18
-
-### Fixed
-
-- Don't crash when candidates contain prototype properties like `row-constructor` ([#19725](https://github.com/tailwindlabs/tailwindcss/pull/19725))
-- Canonicalize `calc(var(--spacing)*…)` expressions into `--spacing(…)` ([#19769](https://github.com/tailwindlabs/tailwindcss/pull/19769))
-- Fix crash in canonicalization step when handling utilities containing `@property` at-rules (e.g. `shadow-sm border`) ([#19727](https://github.com/tailwindlabs/tailwindcss/pull/19727))
-- Skip full reload for server only modules scanned by client CSS when using `@tailwindcss/vite` ([#19745](https://github.com/tailwindlabs/tailwindcss/pull/19745))
-- Add support for Vite 8 in `@tailwindcss/vite` ([#19790](https://github.com/tailwindlabs/tailwindcss/pull/19790))
-- Improve canonicalization for bare values exceeding default spacing scale suggestions (e.g. `w-1234 h-1234` → `size-1234`) ([#19809](https://github.com/tailwindlabs/tailwindcss/pull/19809))
-- Fix canonicalization resulting in empty list (e.g. `w-5 h-5 size-5` → `''` instead of `size-5`) ([#19812](https://github.com/tailwindlabs/tailwindcss/pull/19812))
-- Resolve tsconfig paths to allow for `@import '@/path/to/file';` when using `@tailwindcss/vite` ([#19803](https://github.com/tailwindlabs/tailwindcss/pull/19803))
-
-## [4.2.1] - 2026-02-23
-
-### Fixed
-
-- Allow trailing dash in functional utility names for backwards compatibility ([#19696](https://github.com/tailwindlabs/tailwindcss/pull/19696))
-- Properly detect classes containing `.` characters within curly braces in MDX files ([#19711](https://github.com/tailwindlabs/tailwindcss/pull/19711))
-
-## [4.2.0] - 2026-02-18
-
-### Added
-
-- Add mauve, olive, mist, and taupe color palettes to the default theme ([#19627](https://github.com/tailwindlabs/tailwindcss/pull/19627))
-- Add `@tailwindcss/webpack` package to run Tailwind CSS as a webpack plugin ([#19610](https://github.com/tailwindlabs/tailwindcss/pull/19610))
-- Add `pbs-*` and `pbe-*` utilities for `padding-block-start` and `padding-block-end` ([#19601](https://github.com/tailwindlabs/tailwindcss/pull/19601))
-- Add `mbs-*` and `mbe-*` utilities for `margin-block-start` and `margin-block-end` ([#19601](https://github.com/tailwindlabs/tailwindcss/pull/19601))
-- Add `scroll-pbs-*` and `scroll-pbe-*` utilities for `scroll-padding-block-start` and `scroll-padding-block-end` ([#19601](https://github.com/tailwindlabs/tailwindcss/pull/19601))
-- Add `scroll-mbs-*` and `scroll-mbe-*` utilities for `scroll-margin-block-start` and `scroll-margin-block-end` ([#19601](https://github.com/tailwindlabs/tailwindcss/pull/19601))
-- Add `border-bs-*` and `border-be-*` utilities for `border-block-start` and `border-block-end` ([#19601](https://github.com/tailwindlabs/tailwindcss/pull/19601))
-- Add `inline-*`, `min-inline-*`, `max-inline-*` utilities for `inline-size`, `min-inline-size`, and `max-inline-size` ([#19612](https://github.com/tailwindlabs/tailwindcss/pull/19612))
-- Add `block-*`, `min-block-*`, `max-block-*` utilities for `block-size`, `min-block-size`, and `max-block-size` ([#19612](https://github.com/tailwindlabs/tailwindcss/pull/19612))
-- Add `inset-s-*`, `inset-e-*`, `inset-bs-*`, `inset-be-*` utilities for `inset-inline-start`, `inset-inline-end`, `inset-block-start`, and `inset-block-end` ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613))
-- Add `font-features-*` utility for `font-feature-settings` ([#19623](https://github.com/tailwindlabs/tailwindcss/pull/19623))
-
-### Fixed
-
-- Prevent double `@supports` wrapper for `color-mix` values ([#19450](https://github.com/tailwindlabs/tailwindcss/pull/19450))
-- Allow whitespace around `@source inline()` argument ([#19461](https://github.com/tailwindlabs/tailwindcss/pull/19461))
-- Emit comment when source maps are saved to files when using `@tailwindcss/cli` ([#19447](https://github.com/tailwindlabs/tailwindcss/pull/19447))
-- Detect utilities containing capital letters followed by numbers ([#19465](https://github.com/tailwindlabs/tailwindcss/pull/19465))
-- Fix class extraction for Rails' strict locals ([#19525](https://github.com/tailwindlabs/tailwindcss/pull/19525))
-- Align `@utility` name validation with Oxide scanner rules ([#19524](https://github.com/tailwindlabs/tailwindcss/pull/19524))
-- Fix infinite loop when using `@variant` inside `@custom-variant` ([#19633](https://github.com/tailwindlabs/tailwindcss/pull/19633))
-- Allow multiples of `.25` in `aspect-*` fractions (e.g. `aspect-8.5/11`) ([#19688](https://github.com/tailwindlabs/tailwindcss/pull/19688))
-- Ensure changes to external files listed via `@source` trigger a full page reload when using `@tailwindcss/vite` ([#19670](https://github.com/tailwindlabs/tailwindcss/pull/19670))
-- Improve performance of Oxide scanner in bigger projects by reducing file system walks ([#19632](https://github.com/tailwindlabs/tailwindcss/pull/19632))
-- Ensure import aliases in Astro v5 work without crashing when using `@tailwindcss/vite` ([#19677](https://github.com/tailwindlabs/tailwindcss/issues/19677))
-- Allow escape characters in `@utility` names to improve support with formatters such as Biome ([#19626](https://github.com/tailwindlabs/tailwindcss/pull/19626))
-- Fix incorrect canonicalization results when canonicalizing multiple times ([#19675](https://github.com/tailwindlabs/tailwindcss/pull/19675))
-- Add `.jj` to default ignored content directories ([#19687](https://github.com/tailwindlabs/tailwindcss/pull/19687))
-
-### Deprecated
-
-- Deprecate `start-*` and `end-*` utilities in favor of `inset-s-*` and `inset-e-*` utilities ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613))
-
-## [4.1.18] - 2025-12-11
-
-### Fixed
-
-- Ensure validation of `source(…)` happens relative to the file it is in ([#19274](https://github.com/tailwindlabs/tailwindcss/pull/19274))
-- Include filename and line numbers in CSS parse errors ([#19282](https://github.com/tailwindlabs/tailwindcss/pull/19282))
-- Skip comments in Ruby files when checking for class names ([#19243](https://github.com/tailwindlabs/tailwindcss/pull/19243))
-- Skip over arbitrary property utilities with a top-level `!` in the value ([#19243](https://github.com/tailwindlabs/tailwindcss/pull/19243))
-- Support environment API in `@tailwindcss/vite` ([#18970](https://github.com/tailwindlabs/tailwindcss/pull/18970))
-- Preserve case of theme keys from JS configs and plugins ([#19337](https://github.com/tailwindlabs/tailwindcss/pull/19337))
-- Write source maps correctly on the CLI when using `--watch` ([#19373](https://github.com/tailwindlabs/tailwindcss/pull/19373))
-- Handle special defaults (like `ringColor.DEFAULT`) in JS configs ([#19348](https://github.com/tailwindlabs/tailwindcss/pull/19348))
-- Improve backwards compatibility for `content` theme key from JS configs ([#19381](https://github.com/tailwindlabs/tailwindcss/pull/19381))
-- Upgrade: Handle `future` and `experimental` config keys ([#19344](https://github.com/tailwindlabs/tailwindcss/pull/19344))
-- Try to canonicalize any arbitrary utility to a bare value ([#19379](https://github.com/tailwindlabs/tailwindcss/pull/19379))
-- Validate candidates similarly to Oxide ([#19397](https://github.com/tailwindlabs/tailwindcss/pull/19397))
-- Canonicalization: combine `text-*` and `leading-*` classes ([#19396](https://github.com/tailwindlabs/tailwindcss/pull/19396))
-- Correctly handle duplicate CLI arguments ([#19416](https://github.com/tailwindlabs/tailwindcss/pull/19416))
-- Don’t emit color-mix fallback rules inside `@keyframes` ([#19419](https://github.com/tailwindlabs/tailwindcss/pull/19419))
-- CLI: Don't hang when output is `/dev/stdout` ([#19421](https://github.com/tailwindlabs/tailwindcss/pull/19421))
-
-## [3.4.19] - 2025-12-10
-
-### Fixed
-
-- Don’t break `sibling-*()` functions when used inside `calc(…)` ([#19335](https://github.com/tailwindlabs/tailwindcss/pull/19335))
-
-## [4.1.17] - 2025-11-06
-
-### Fixed
-
-- Substitute `@variant` inside legacy JS APIs ([#19263](https://github.com/tailwindlabs/tailwindcss/pull/19263))
-- Prevent occasional crash on Windows when loaded into a worker thread ([#19242](https://github.com/tailwindlabs/tailwindcss/pull/19242))
-
-## [4.1.16] - 2025-10-23
-
-### Fixed
-
-- Discard candidates with an empty data type ([#19172](https://github.com/tailwindlabs/tailwindcss/pull/19172))
-- Fix canonicalization of arbitrary variants with attribute selectors ([#19176](https://github.com/tailwindlabs/tailwindcss/pull/19176))
-- Fix invalid colors due to nested `&` ([#19184](https://github.com/tailwindlabs/tailwindcss/pull/19184))
-- Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#19178](https://github.com/tailwindlabs/tailwindcss/pull/19178))
-
-## [4.1.15] - 2025-10-20
-
-### Fixed
-
-- Fix Safari devtools rendering issue due to `color-mix` fallback ([#19069](https://github.com/tailwindlabs/tailwindcss/pull/19069))
-- Suppress Lightning CSS warnings about `:deep`, `:slotted`, and `:global` ([#19094](https://github.com/tailwindlabs/tailwindcss/pull/19094))
-- Fix resolving theme keys when starting with the name of another theme key in JS configs and plugins ([#19097](https://github.com/tailwindlabs/tailwindcss/pull/19097))
-- Allow named groups in combination with `not-*`, `has-*`, and `in-*` ([#19100](https://github.com/tailwindlabs/tailwindcss/pull/19100))
-- Prevent important utilities from affecting other utilities ([#19110](https://github.com/tailwindlabs/tailwindcss/pull/19110))
-- Don’t index into strings with the `theme(…)` function ([#19111](https://github.com/tailwindlabs/tailwindcss/pull/19111))
-- Fix parsing issue when `\t` is used in at-rules ([#19130](https://github.com/tailwindlabs/tailwindcss/pull/19130))
-- Upgrade: Canonicalize utilities containing `0` values ([#19095](https://github.com/tailwindlabs/tailwindcss/pull/19095))
-- Upgrade: Migrate deprecated `break-words` to `wrap-break-word` ([#19157](https://github.com/tailwindlabs/tailwindcss/pull/19157))
-
-### Changed
-
-- Remove the `postinstall` script from oxide ([#19149])(https://github.com/tailwindlabs/tailwindcss/pull/19149)
-
-## [4.1.14] - 2025-10-01
-
-### Fixed
-
-- Handle `'` syntax in ClojureScript when extracting classes ([#18888](https://github.com/tailwindlabs/tailwindcss/pull/18888))
-- Handle `@variant` inside `@custom-variant` ([#18885](https://github.com/tailwindlabs/tailwindcss/pull/18885))
-- Merge suggestions when using `@utility` ([#18900](https://github.com/tailwindlabs/tailwindcss/pull/18900))
-- Ensure that file system watchers created when using the CLI are always cleaned up ([#18905](https://github.com/tailwindlabs/tailwindcss/pull/18905))
-- Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
-- Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
-- Prevent duplicate CSS when overwriting a static utility with a theme key ([#18056](https://github.com/tailwindlabs/tailwindcss/pull/18056))
-- Show Lightning CSS warnings (if any) when optimizing/minifying ([#18918](https://github.com/tailwindlabs/tailwindcss/pull/18918))
-- Use `default` export condition for `@tailwindcss/vite` ([#18948](https://github.com/tailwindlabs/tailwindcss/pull/18948))
-- Re-throw errors from PostCSS nodes ([#18373](https://github.com/tailwindlabs/tailwindcss/pull/18373))
-- Detect classes in markdown inline directives ([#18967](https://github.com/tailwindlabs/tailwindcss/pull/18967))
-- Ensure files with only `@theme` produce no output when built ([#18979](https://github.com/tailwindlabs/tailwindcss/pull/18979))
-- Support Maud templates when extracting classes ([#18988](https://github.com/tailwindlabs/tailwindcss/pull/18988))
-- Upgrade: Do not migrate `variant = 'outline'` during upgrades ([#18922](https://github.com/tailwindlabs/tailwindcss/pull/18922))
-- Upgrade: Show version mismatch (if any) when running upgrade tool ([#19028](https://github.com/tailwindlabs/tailwindcss/pull/19028))
-- Upgrade: Ensure first class inside `className` is migrated ([#19031](https://github.com/tailwindlabs/tailwindcss/pull/19031))
-- Upgrade: Migrate classes inside `*ClassName` and `*Class` attributes ([#19031](https://github.com/tailwindlabs/tailwindcss/pull/19031))
-
-## [3.4.18] - 2025-10-01
-
-### Fixed
-
-- Improve support for raw `supports-[…]` queries in arbitrary values ([#13605](https://github.com/tailwindlabs/tailwindcss/pull/13605))
-- Fix `require.cache` error when loaded through a TypeScript file in Node 22.18+ ([#18665](https://github.com/tailwindlabs/tailwindcss/pull/18665))
-- Support `import.meta.resolve(…)` in configs for new enough Node.js versions ([#18938](https://github.com/tailwindlabs/tailwindcss/pull/18938))
-- Allow using newer versions of `postcss-load-config` for better ESM and TypeScript PostCSS config support with the CLI ([#18938](https://github.com/tailwindlabs/tailwindcss/pull/18938))
-- Remove irrelevant utility rules when matching important classes ([#19030](https://github.com/tailwindlabs/tailwindcss/pull/19030))
-
-## [4.1.13] - 2025-09-03
-
-### Changed
-
-- Drop warning from browser build ([#18731](https://github.com/tailwindlabs/tailwindcss/issues/18731))
-- Drop exact duplicate declarations when emitting CSS ([#18809](https://github.com/tailwindlabs/tailwindcss/issues/18809))
-
-### Fixed
-
-- Don't transition `visibility` when using `transition` ([#18795](https://github.com/tailwindlabs/tailwindcss/pull/18795))
-- Discard matched variants with unknown named values ([#18799](https://github.com/tailwindlabs/tailwindcss/pull/18799))
-- Discard matched variants with non-string values ([#18799](https://github.com/tailwindlabs/tailwindcss/pull/18799))
-- Show suggestions for known `matchVariant` values ([#18798](https://github.com/tailwindlabs/tailwindcss/pull/18798))
-- Replace deprecated `clip` with `clip-path` in `sr-only` ([#18769](https://github.com/tailwindlabs/tailwindcss/pull/18769))
-- Hide internal fields from completions in `matchUtilities` ([#18820](https://github.com/tailwindlabs/tailwindcss/pull/18820))
-- Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#18855](https://github.com/tailwindlabs/tailwindcss/pull/18855))
-- Consider variants starting with `@-` to be invalid (e.g. `@-2xl:flex`) ([#18869](https://github.com/tailwindlabs/tailwindcss/pull/18869))
-- Do not allow custom variants to start or end with a `-` or `_` ([#18867](https://github.com/tailwindlabs/tailwindcss/pull/18867), [#18872](https://github.com/tailwindlabs/tailwindcss/pull/18872))
-- Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#18815](https://github.com/tailwindlabs/tailwindcss/pull/18815))
-- Upgrade: Migrate `data` theme keys to `@custom-variant` ([#18816](https://github.com/tailwindlabs/tailwindcss/pull/18816))
-- Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#18817](https://github.com/tailwindlabs/tailwindcss/pull/18817))
-
-## [4.1.12] - 2025-08-13
-
-### Fixed
-
-- Don't consider the global important state in `@apply` ([#18404](https://github.com/tailwindlabs/tailwindcss/pull/18404))
-- Add missing suggestions for `flex-<number>` utilities ([#18642](https://github.com/tailwindlabs/tailwindcss/pull/18642))
-- Fix trailing `)` from interfering with extraction in Clojure keywords ([#18345](https://github.com/tailwindlabs/tailwindcss/pull/18345))
-- Detect classes inside Elixir charlist, word list, and string sigils ([#18432](https://github.com/tailwindlabs/tailwindcss/pull/18432))
-- Track source locations through `@plugin` and `@config` ([#18345](https://github.com/tailwindlabs/tailwindcss/pull/18345))
-- Allow boolean values of `process.env.DEBUG` in `@tailwindcss/node` ([#18485](https://github.com/tailwindlabs/tailwindcss/pull/18485))
-- Ignore consecutive semicolons in the CSS parser ([#18532](https://github.com/tailwindlabs/tailwindcss/pull/18532))
-- Center the dropdown icon added to an input with a paired datalist by default ([#18511](https://github.com/tailwindlabs/tailwindcss/pull/18511))
-- Extract candidates in Slang templates ([#18565](https://github.com/tailwindlabs/tailwindcss/pull/18565))
-- Improve error messages when encountering invalid functional utility names ([#18568](https://github.com/tailwindlabs/tailwindcss/pull/18568))
-- Discard CSS AST objects with `false` or `undefined` properties ([#18571](https://github.com/tailwindlabs/tailwindcss/pull/18571))
-- Allow users to disable URL rebasing in `@tailwindcss/postcss` via `transformAssetUrls: false` ([#18321](https://github.com/tailwindlabs/tailwindcss/pull/18321))
-- Fix false-positive migrations in `addEventListener` and JavaScript variable names ([#18718](https://github.com/tailwindlabs/tailwindcss/pull/18718))
-- Fix Standalone CLI showing default Bun help when run via symlink on Windows ([#18723](https://github.com/tailwindlabs/tailwindcss/pull/18723))
-- Read from `--border-color-*` theme keys in `divide-*` utilities for backwards compatibility ([#18704](https://github.com/tailwindlabs/tailwindcss/pull/18704/))
-- Don't scan `.hdr` and `.exr` files for classes by default ([#18734](https://github.com/tailwindlabs/tailwindcss/pull/18734))
-
-## [4.1.11] - 2025-06-26
-
-### Fixed
-
-- Add heuristic to skip candidate migrations inside `emit(…)` ([#18330](https://github.com/tailwindlabs/tailwindcss/pull/18330))
-- Extract candidates with variants in Clojure/ClojureScript keywords ([#18338](https://github.com/tailwindlabs/tailwindcss/pull/18338))
-- Document `--watch=always` in the CLI's usage ([#18337](https://github.com/tailwindlabs/tailwindcss/pull/18337))
-- Add support for Vite 7 to `@tailwindcss/vite` ([#18384](https://github.com/tailwindlabs/tailwindcss/pull/18384))
-
-## [4.1.10] - 2025-06-11
-
-### Fixed
-
-- Fix incorrectly generated CSS when using percentages in arbitrary values with calc (e.g. `w-[calc(100%-var(--offset))]`) ([#18289](https://github.com/tailwindlabs/tailwindcss/pull/18289))
-
-## [4.1.9] - 2025-06-11
-
-### Fixed
-
-- Correctly parse custom properties with strings containing semicolons ([#18251](https://github.com/tailwindlabs/tailwindcss/pull/18251))
-- Upgrade: Migrate arbitrary modifiers without percentage signs to bare values (e.g. `/[0.16]` → `/16`) ([#18184](https://github.com/tailwindlabs/tailwindcss/pull/18184))
-- Upgrade: Migrate CSS variable shorthands where fallback value contains function call ([#18184](https://github.com/tailwindlabs/tailwindcss/pull/18184))
-- Upgrade: Migrate negative arbitrary values to negative bare values (e.g. `mb-[-32rem]` → `-mb-128`) ([#18212](https://github.com/tailwindlabs/tailwindcss/pull/18212))
-- Upgrade: Do not migrate `blur` in `wire:model.blur` ([#18216](https://github.com/tailwindlabs/tailwindcss/pull/18216))
-- Don't add spaces around CSS dashed idents when formatting math expressions ([#18220](https://github.com/tailwindlabs/tailwindcss/pull/18220))
-
-## [4.1.8] - 2025-05-27
-
-### Added
-
-- Improve error messages when `@apply` fails ([#18059](https://github.com/tailwindlabs/tailwindcss/pull/18059))
-
-### Fixed
-
-- Upgrade: Do not migrate declarations that look like candidates in `<style>` blocks ([#18057](https://github.com/tailwindlabs/tailwindcss/pull/18057), [18068](https://github.com/tailwindlabs/tailwindcss/pull/18068))
-- Upgrade: Don't error when looking for `tailwindcss` in pnpm monorepos ([#18065](https://github.com/tailwindlabs/tailwindcss/pull/18065))
-- Upgrade: Don't error when updating dependencies in pnpm monorepos ([#18065](https://github.com/tailwindlabs/tailwindcss/pull/18065))
-- Upgrade: Migrate deprecated `order-none` to `order-0` ([#18126](https://github.com/tailwindlabs/tailwindcss/pull/18126))
-- Support Leptos `class:` attributes when extracting classes ([#18093](https://github.com/tailwindlabs/tailwindcss/pull/18093))
-- Fix "Cannot read properties of undefined" crash on malformed arbitrary value ([#18133](https://github.com/tailwindlabs/tailwindcss/pull/18133))
-- Upgrade: Migrate `-mt-[0px]` to `mt-[0px]` instead of the other way around ([#18154](https://github.com/tailwindlabs/tailwindcss/pull/18154))
-- Fix Haml pre-processing crash when there is no `\n` at the end of the file ([#18155](https://github.com/tailwindlabs/tailwindcss/pull/18155))
-- Ignore `.pnpm-store` folders by default (can be overridden by `@source …` rules) ([#18163](https://github.com/tailwindlabs/tailwindcss/pull/18163))
-- Fix PostCSS crash when calling `toJSON()` ([#18083](https://github.com/tailwindlabs/tailwindcss/pull/18083))
-
-## [4.1.7] - 2025-05-15
-
-### Added
-
-- Upgrade: Migrate bare values to named values ([#18000](https://github.com/tailwindlabs/tailwindcss/pull/18000))
-- Upgrade: Added cache to improve template migration performance ([#18025](https://github.com/tailwindlabs/tailwindcss/pull/18025))
-
-### Fixed
-
-- Allow `_` before numbers during candidate extraction ([#17961](https://github.com/tailwindlabs/tailwindcss/pull/17961))
-- Prevent duplicate suggestions when using `@theme` and `@utility` together ([#17675](https://github.com/tailwindlabs/tailwindcss/pull/17675))
-- Ensure that media queries within `::before` and `::after` pseudo selectors create valid CSS rules in production builds ([#17979](https://github.com/tailwindlabs/tailwindcss/pull/17979))
-- Ensure that the standalone CLI does not leave temporary files behind ([#17981](https://github.com/tailwindlabs/tailwindcss/pull/17981))
-- Ensure `-rotate-*` utilities properly negate arbitrary values ([#18014](https://github.com/tailwindlabs/tailwindcss/pull/18014))
-- Ignore custom variants using `:merge(…)` selectors in legacy JS plugins ([#18020](https://github.com/tailwindlabs/tailwindcss/pull/18020))
-- Ensure classes containing `.` are properly extracted from Clojure files ([#18038](https://github.com/tailwindlabs/tailwindcss/pull/18038))
-- Upgrade: Fix error when using `@import … source(…)` ([#17963](https://github.com/tailwindlabs/tailwindcss/pull/17963))
-- Upgrade: Change casing of utilities with named values to kebab-case to match updated theme variables ([#18017](https://github.com/tailwindlabs/tailwindcss/pull/18017))
-- Upgrade: Don't migrate strings that match utility names in Vue attribute bindings other than `class` ([#18025](https://github.com/tailwindlabs/tailwindcss/pull/18025))
-
-## [4.1.6] - 2025-05-09
-
-### Added
-
-- Upgrade: Automatically convert arbitrary values to named values when possible (e.g. `h-[1lh]` to `h-lh`) ([#17831](https://github.com/tailwindlabs/tailwindcss/pull/17831), [#17854](https://github.com/tailwindlabs/tailwindcss/pull/17854))
-- Upgrade: Update dependencies in parallel for improved performance ([#17898](https://github.com/tailwindlabs/tailwindcss/pull/17898))
-- Add detailed logging about `@source` directives, discovered files and scanned files when using `DEBUG=*` ([#17906](https://github.com/tailwindlabs/tailwindcss/pull/17906), [#17952](https://github.com/tailwindlabs/tailwindcss/pull/17952))
-- Add support for generating source maps in development ([#17775](https://github.com/tailwindlabs/tailwindcss/pull/17775))
-
-### Fixed
-
-- Ensure negative arbitrary `scale` values generate negative values ([#17831](https://github.com/tailwindlabs/tailwindcss/pull/17831))
-- Fix HAML extraction with embedded Ruby ([#17846](https://github.com/tailwindlabs/tailwindcss/pull/17846))
-- Don't scan files for utilities when using `@reference` ([#17836](https://github.com/tailwindlabs/tailwindcss/pull/17836))
-- Fix incorrectly replacing `_` with ` ` in arbitrary modifier shorthand `bg-red-500/(--my_opacity)` ([#17889](https://github.com/tailwindlabs/tailwindcss/pull/17889))
-- Don't scan `.log` files for classes by default ([#17906](https://github.com/tailwindlabs/tailwindcss/pull/17906))
-- Ensure that custom utilities applying other custom utilities don't swallow nested `@apply` rules ([#17925](https://github.com/tailwindlabs/tailwindcss/pull/17925))
-- Download platform specific package if `optionalDependencies` are skipped ([#17929](https://github.com/tailwindlabs/tailwindcss/pull/17929))
-
-## [4.1.5] - 2025-04-30
-
-### Added
-
-- Support using `@tailwindcss/upgrade` to upgrade between versions of v4.\* ([#17717](https://github.com/tailwindlabs/tailwindcss/pull/17717))
-- Add `h-lh` / `min-h-lh` / `max-h-lh` utilities ([#17790](https://github.com/tailwindlabs/tailwindcss/pull/17790))
-- Transition `display`, `visibility`, `content-visibility`, `overlay`, and `pointer-events` when using `transition` to simplify `@starting-style` usage ([#17812](https://github.com/tailwindlabs/tailwindcss/pull/17812))
-
-### Fixed
-
-- Don't scan `.geojson` or `.db` files for classes by default ([#17700](https://github.com/tailwindlabs/tailwindcss/pull/17700), [#17711](https://github.com/tailwindlabs/tailwindcss/pull/17711))
-- Hide default shadow suggestions when missing default shadow theme keys ([#17743](https://github.com/tailwindlabs/tailwindcss/pull/17743))
-- Replace `_` with `.` in theme suggestions for `@utility` if surrounded by digits ([#17733](https://github.com/tailwindlabs/tailwindcss/pull/17733))
-- Skip `color-mix(…)` when opacity is `100%` ([#17815](https://github.com/tailwindlabs/tailwindcss/pull/17815))
-- PostCSS: Ensure that errors in imported stylesheets are recoverable ([#17754](https://github.com/tailwindlabs/tailwindcss/pull/17754))
-- Upgrade: Bump all Tailwind CSS related dependencies during upgrade ([#17763](https://github.com/tailwindlabs/tailwindcss/pull/17763))
-- Upgrade: Don't add `-` to variants starting with `@` ([#17814](https://github.com/tailwindlabs/tailwindcss/pull/17814))
-- Upgrade: Don't format stylesheets that didn't change when upgrading ([#17824](https://github.com/tailwindlabs/tailwindcss/pull/17824))
-
-### Changed
-
-- Ignore `.hg`, `.svn`, `.venv`, `venv`, `.yarn`, `.next`, `.turbo`, `.parcel-cache`, `__pycache__`, and `.svelte-kit` folders by default (can be overridden by `@source …` rules) ([#17892](https://github.com/tailwindlabs/tailwindcss/pull/17892))
-- `@source` rules that point inside `.hg`, `.svn`, `.venv`, `venv`, `.yarn`, `.next`, `.turbo`, `.parcel-cache`, `__pycache__`, and `.svelte-kit` folders no longer consider your `.gitignore` rules ([#17892](https://github.com/tailwindlabs/tailwindcss/pull/17892))
-
-## [4.1.4] - 2025-04-14
-
-### Added
-
-- Add experimental `@tailwindcss/oxide-wasm32-wasi` target for running Tailwind in browser environments like StackBlitz ([#17558](https://github.com/tailwindlabs/tailwindcss/pull/17558))
-
-### Fixed
-
-- Ensure `color-mix(…)` polyfills do not cause used CSS variables to be removed ([#17555](https://github.com/tailwindlabs/tailwindcss/pull/17555))
-- Ensure `color-mix(…)` polyfills create fallbacks for theme variables that reference other theme variables ([#17562](https://github.com/tailwindlabs/tailwindcss/pull/17562))
-- Fix brace expansion in declining ranges like `{10..0..5}` and `{0..10..-5}` ([#17591](https://github.com/tailwindlabs/tailwindcss/pull/17591))
-- Work around a Chrome rendering bug when using the `skew-*` utilities ([#17627](https://github.com/tailwindlabs/tailwindcss/pull/17627))
-- Ensure container query variant names can contain hyphens ([#17628](https://github.com/tailwindlabs/tailwindcss/pull/17628))
-- Ensure `shadow-inherit`, `inset-shadow-inherit`, `drop-shadow-inherit`, and `text-shadow-inherit` inherit the shadow color ([#17647](https://github.com/tailwindlabs/tailwindcss/pull/17647))
-- Ensure compatibility with array tuples used in `fontSize` JS theme keys ([#17630](https://github.com/tailwindlabs/tailwindcss/pull/17630))
-- Ensure folders with binary file extensions in their names are scanned for utilities ([#17595](https://github.com/tailwindlabs/tailwindcss/pull/17595))
-- Upgrade: Convert `fontSize` array tuple syntax to CSS theme variables ([#17630](https://github.com/tailwindlabs/tailwindcss/pull/17630))
-
-## [4.1.3] - 2025-04-04
-
-### Fixed
-
-- Show warning when using unsupported bare value data type in `--value(…)` ([#17464](https://github.com/tailwindlabs/tailwindcss/pull/17464))
-- PostCSS: Ensure changes to the input CSS file don't generate stale output when using Turbopack ([#17554](https://github.com/tailwindlabs/tailwindcss/pull/17554))
-- Ensure classes are detected in Ruby's `%w` syntax in Slim templates ([#17557](https://github.com/tailwindlabs/tailwindcss/pull/17557))
-
-## [4.1.2] - 2025-04-03
-
-### Fixed
-
-- Don't rely on the presence of `@layer base` to polyfill `@property` ([#17506](https://github.com/tailwindlabs/tailwindcss/pull/17506))
-- Support setting multiple inset shadows as arbitrary values ([#17523](https://github.com/tailwindlabs/tailwindcss/pull/17523))
-- Fix `drop-shadow-*` utilities that are defined with multiple shadows ([#17515](https://github.com/tailwindlabs/tailwindcss/pull/17515))
-- PostCSS: Fix race condition when two changes are queued concurrently ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514))
-- PostCSS: Ensure files containing `@tailwind utilities` are processed ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514))
-- Ensure the `color-mix(…)` polyfill creates fallbacks even when using colors that cannot be statically analyzed ([#17513](https://github.com/tailwindlabs/tailwindcss/pull/17513))
-- Fix slow incremental builds with `@tailwindcss/vite` and `@tailwindcss/postscss` (especially on Windows) ([#17511](https://github.com/tailwindlabs/tailwindcss/pull/17511))
-- Vite: Fix missing CSS file in Qwik setups ([#17533](https://github.com/tailwindlabs/tailwindcss/pull/17533))
-
-## [4.1.1] - 2025-04-02
-
-### Fixed
-
-- Disable padding in `@source inline(…)` brace expansion ([#17491](https://github.com/tailwindlabs/tailwindcss/pull/17491))
-- Inject polyfills after `@import` and body-less `@layer` ([#17493](https://github.com/tailwindlabs/tailwindcss/pull/17493))
-- Ensure `@tailwindcss/cli` does not contain an import for `jiti` ([#17502](https://github.com/tailwindlabs/tailwindcss/pull/17502))
-
-## [4.1.0] - 2025-04-01
-
-### Added
-
-- Add `details-content` variant ([#15319](https://github.com/tailwindlabs/tailwindcss/pull/15319))
-- Add `inverted-colors` variant ([#11693](https://github.com/tailwindlabs/tailwindcss/pull/11693))
-- Add `noscript` variant ([#11929](https://github.com/tailwindlabs/tailwindcss/pull/11929), [#17431](https://github.com/tailwindlabs/tailwindcss/pull/17431))
-- Add `items-baseline-last` and `self-baseline-last` utilities ([#13888](https://github.com/tailwindlabs/tailwindcss/pull/13888), [#17476](https://github.com/tailwindlabs/tailwindcss/pull/17476))
-- Add `pointer-none`, `pointer-coarse`, and `pointer-fine` variants ([#16946](https://github.com/tailwindlabs/tailwindcss/pull/16946))
-- Add `any-pointer-none`, `any-pointer-coarse`, and `any-pointer-fine` variants ([#16941](https://github.com/tailwindlabs/tailwindcss/pull/16941))
-- Add safe alignment utilities ([#14607](https://github.com/tailwindlabs/tailwindcss/pull/14607))
-- Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
-- Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))
-- Add `@source inline(…)` and `@source not inline(…)` ([#17147](https://github.com/tailwindlabs/tailwindcss/pull/17147))
-- Add `@source not "…"` ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
-- Add `text-shadow-*` utilities ([#17389](https://github.com/tailwindlabs/tailwindcss/pull/17389))
-- Add `mask-*` utilities ([#17134](https://github.com/tailwindlabs/tailwindcss/pull/17134))
-- Add `bg-{position,size}-*` utilities for arbitrary values ([#17432](https://github.com/tailwindlabs/tailwindcss/pull/17432))
-- Add `shadow-*/<alpha>`, `inset-shadow-*/<alpha>`, `drop-shadow-*/<alpha>`, and `text-shadow-*/<alpha>` utilities to control shadow opacity ([#17398](https://github.com/tailwindlabs/tailwindcss/pull/17398), [#17434](https://github.com/tailwindlabs/tailwindcss/pull/17434))
-- Add `drop-shadow-<color>` utilities ([#17434](https://github.com/tailwindlabs/tailwindcss/pull/17434))
-- Improve compatibility with older versions of Safari and Firefox ([#17435](https://github.com/tailwindlabs/tailwindcss/pull/17435))
-
-### Fixed
-
-- Follow symlinks when resolving `@source` directives ([#17391](https://github.com/tailwindlabs/tailwindcss/pull/17391))
-- Don't scan ignored files for classes when changing an ignored file triggers a rebuild using `@tailwindcss/cli` ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
-- Support negated `content` rules in legacy JavaScript configuration ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
-- Interpret syntax like `@("@")md:…` as `@md:…` in Razor files ([#17427](https://github.com/tailwindlabs/tailwindcss/pull/17427))
-- Disallow top-level braces, top-level semicolons, and unbalanced parentheses and brackets in arbitrary values ([#17361](https://github.com/tailwindlabs/tailwindcss/pull/17361))
-- Ensure the `--theme(…)` function still resolves to the CSS variables when using legacy JS plugins ([#17458](https://github.com/tailwindlabs/tailwindcss/pull/17458))
-- Detect used theme variables in CSS module files ([#17433](https://github.com/tailwindlabs/tailwindcss/pull/17433), [#17467](https://github.com/tailwindlabs/tailwindcss/pull/17467))
-
-### Changed
-
-- Ignore `node_modules` by default (can be overridden by `@source …` rules) ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
-- `@source` rules that include file extensions or point inside `node_modules/` folders no longer consider your `.gitignore` rules ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
-- Deprecate `bg-{left,right}-{top,bottom}` in favor of `bg-{top,bottom}-{left,right}` utilities ([#17378](https://github.com/tailwindlabs/tailwindcss/pull/17378))
-- Deprecate `object-{left,right}-{top,bottom}` in favor of `object-{top,bottom}-{left,right}` utilities ([#17437](https://github.com/tailwindlabs/tailwindcss/pull/17437))
-
-## [4.0.17] - 2025-03-26
-
-### Fixed
-
-- Fix an issue causing the CLI to hang when processing Ruby files ([#17383](https://github.com/tailwindlabs/tailwindcss/pull/17383))
-
-## [4.0.16] - 2025-03-25
-
-### Added
-
-- Add support for literal values in `--value('…')` and `--modifier('…')` ([#17304](https://github.com/tailwindlabs/tailwindcss/pull/17304))
-
-### Fixed
-
-- Fix class extraction followed by `(` in Pug ([#17320](https://github.com/tailwindlabs/tailwindcss/pull/17320))
-- Ensure `@keyframes` for theme animations are emitted if they are referenced following a comma ([#17352](https://github.com/tailwindlabs/tailwindcss/pull/17352))
-- Vite: Ensure that updates to an imported CSS file are properly propagated after updating source files ([#17347](https://github.com/tailwindlabs/tailwindcss/pull/17347))
-- Pre process `Slim` templates embedded in Ruby files ([#17336](https://github.com/tailwindlabs/tailwindcss/pull/17336))
-- Error when input and output files resolve to the same file when using the CLI ([#17311](https://github.com/tailwindlabs/tailwindcss/pull/17311))
-- Add missing suggestions when `--spacing(--value(integer, number))` is used ([#17308](https://github.com/tailwindlabs/tailwindcss/pull/17308))
-- Add `::-webkit-details-marker` pseudo to `marker` variant ([#17362](https://github.com/tailwindlabs/tailwindcss/pull/17362))
-
-## [4.0.15] - 2025-03-20
-
-### Fixed
-
-- Fix incorrect angle in `-bg-conic-*` utilities ([#17174](https://github.com/tailwindlabs/tailwindcss/pull/17174))
-- Fix `border-[12px_4px]` being interpreted as a `border-color` instead of a `border-width` ([#17248](https://github.com/tailwindlabs/tailwindcss/pull/17248))
-- Work around a crash in Safari 16.4 and 16.5 when using the default Preflight styles ([#17306](https://github.com/tailwindlabs/tailwindcss/pull/17306))
-- Pre-process `<template lang="…">` in Vue files ([#17252](https://github.com/tailwindlabs/tailwindcss/pull/17252))
-- Ensure that all CSS variables used by Preflight are prefixed ([#17036](https://github.com/tailwindlabs/tailwindcss/pull/17036))
-- Prevent segfault when loaded in a worker thread on Linux ([#17276](https://github.com/tailwindlabs/tailwindcss/pull/17276))
-- Ensure multiple `--value(…)` or `--modifier(…)` calls don't delete subsequent declarations ([#17273](https://github.com/tailwindlabs/tailwindcss/pull/17273))
-- Fix class extraction followed by `(` in Slim ([#17278](https://github.com/tailwindlabs/tailwindcss/pull/17278))
-- Export `PluginUtils` from `tailwindcss/plugin` for compatibility with v3 ([#17299](https://github.com/tailwindlabs/tailwindcss/pull/17299))
-- Remove redundant `line-height: initial` from Preflight ([#15212](https://github.com/tailwindlabs/tailwindcss/pull/15212))
-- Increase Standalone hardware compatibility on macOS x64 builds ([#17267](https://github.com/tailwindlabs/tailwindcss/pull/17267))
-- Ensure that the CSS file rebuilds if a new CSS variable is used from templates ([#17301](https://github.com/tailwindlabs/tailwindcss/pull/17301))
-
-### Changed
-
-- The `--theme(…)` function now returns CSS variables from your theme variables unless used inside positions where CSS variables are invalid (e.g. inside `@media` queries) ([#17036](https://github.com/tailwindlabs/tailwindcss/pull/17036))
-
-## [4.0.14] - 2025-03-13
-
-### Fixed
-
-- Do not extract candidates with JS string interpolation `${` ([#17142](https://github.com/tailwindlabs/tailwindcss/pull/17142))
-- Fix extraction of variants containing `.` character ([#17153](https://github.com/tailwindlabs/tailwindcss/pull/17153))
-- Fix extracting candidates in Clojure/ClojureScript ([#17087](https://github.com/tailwindlabs/tailwindcss/pull/17087))
-
-## [4.0.13] - 2025-03-11
-
-### Fixed
-
-- Fix Haml pre-processing ([#17051](https://github.com/tailwindlabs/tailwindcss/pull/17051))
-- Ensure `.node` and `.wasm` files are not scanned for utilities ([#17123](https://github.com/tailwindlabs/tailwindcss/pull/17123))
-- Improve performance when scanning JSON files ([#17125](https://github.com/tailwindlabs/tailwindcss/pull/17125))
-- Fix extracting candidates containing dots in Haml, Pug, and Slim pre processors ([#17094](https://github.com/tailwindlabs/tailwindcss/pull/17094), [#17085](https://github.com/tailwindlabs/tailwindcss/pull/17085), [#17113](https://github.com/tailwindlabs/tailwindcss/pull/17113))
-- Don't create invalid CSS when encountering a link wrapped in square brackets ([#17129](https://github.com/tailwindlabs/tailwindcss/pull/17129))
-
-## [4.0.12] - 2025-03-07
-
-### Fixed
-
-- Vite: Fix `url(…)` rebasing in transitively imported CSS files ([#16965](https://github.com/tailwindlabs/tailwindcss/pull/16965))
-- PostCSS: Rebase `url(…)`s in imported CSS files ([#16965](https://github.com/tailwindlabs/tailwindcss/pull/16965))
-- Ensure utilities are sorted based on their actual property order ([#16995](https://github.com/tailwindlabs/tailwindcss/pull/16995))
-- Ensure strings in Pug and Slim templates are handled correctly ([#17000](https://github.com/tailwindlabs/tailwindcss/pull/17000))
-- Ensure classes between `}` and `{` are properly extracted ([#17001](https://github.com/tailwindlabs/tailwindcss/pull/17001))
-- Fix `razor`/`cshtml` pre-processing ([#17027](https://github.com/tailwindlabs/tailwindcss/pull/17027))
-- Ensure extracting candidates from JS embedded in a PHP string works as expected ([#17031](https://github.com/tailwindlabs/tailwindcss/pull/17031))
-
-## [4.0.11] - 2025-03-06
-
-### Fixed
-
-- Ensure classes containing `--` are extracted correctly ([#16972](https://github.com/tailwindlabs/tailwindcss/pull/16972))
-- Ensure classes containing numbers followed by dash or underscore are extracted correctly ([#16980](https://github.com/tailwindlabs/tailwindcss/pull/16980))
-- Ensure arbitrary container queries are extracted correctly ([#16984](https://github.com/tailwindlabs/tailwindcss/pull/16984))
-- Ensure classes ending in `[` are extracted in Slim templating language ([#16985](https://github.com/tailwindlabs/tailwindcss/pull/16985))
-- Ensure arbitrary variables with data types are extracted correctly ([#16986](https://github.com/tailwindlabs/tailwindcss/pull/16986))
-
-## [4.0.10] - 2025-03-05
-
-### Added
-
-- Add `col-<number>` and `row-<number>` utilities for `grid-column` and `grid-row` ([#15183](https://github.com/tailwindlabs/tailwindcss/pull/15183))
-
-### Fixed
-
-- Ensure `not-*` does not remove `:is(…)` from variants ([#16825](https://github.com/tailwindlabs/tailwindcss/pull/16825))
-- Ensure `@keyframes` are correctly emitted when using a prefix ([#16850](https://github.com/tailwindlabs/tailwindcss/pull/16850))
-- Don't swallow `@utility` declarations when `@apply` is used in nested rules ([#16940](https://github.com/tailwindlabs/tailwindcss/pull/16940))
-- Ensure `outline-hidden` behaves like `outline-none` outside of forced colors mode ([#16943](https://github.com/tailwindlabs/tailwindcss/pull/16943))
-- Allow `!important` on CSS variables again ([#16873](https://github.com/tailwindlabs/tailwindcss/pull/16873))
-- Vite: Do not crash when encountering an `.svg` file with `#` or `?` in the filename ([#16957](https://github.com/tailwindlabs/tailwindcss/pull/16957))
-- Ensure utilities are properly detected within square brackets ([#16306](https://github.com/tailwindlabs/tailwindcss/pull/16306))
-- Ensure utilities are properly detected using Angular's conditional class binding syntax ([#16306](https://github.com/tailwindlabs/tailwindcss/pull/16306))
-- Ensure utilities starting with numbers are properly extracted from Slim templates ([#16306](https://github.com/tailwindlabs/tailwindcss/pull/16306))
-- Discard arbitrary property candidates that have guaranteed-invalid property names ([#16306](https://github.com/tailwindlabs/tailwindcss/pull/16306))
-
-### Changed
-
-- Removed `max-w-auto` and `max-h-auto` utilities as they generate invalid CSS ([#16917](https://github.com/tailwindlabs/tailwindcss/pull/16917))
-- Replaced the existing candidate extractor with a brand new extractor to improve maintainability, correctness, and performance ([#16306](https://github.com/tailwindlabs/tailwindcss/pull/16306))
-
-## [4.0.9] - 2025-02-25
-
-### Fixed
-
-- Make JS APIs available to plugins and configs in the Standalone CLI ([#15934](https://github.com/tailwindlabs/tailwindcss/pull/15934))
-- Vite: Don't crash when importing a virtual module from JavaScript that ends in `.css` ([#16780](https://github.com/tailwindlabs/tailwindcss/pull/16780))
-- Fix an issue where `@reference "…"` would sometimes omit keyframe animations ([#16774](https://github.com/tailwindlabs/tailwindcss/pull/16774))
-- Ensure `z-*!` utilities are properly marked as `!important` ([#16795](https://github.com/tailwindlabs/tailwindcss/pull/16795))
-- Read UTF-8 CSS files that start with a byte-order mark (BOM) ([#16800](https://github.com/tailwindlabs/tailwindcss/pull/16800))
-- Ensure nested functions in selectors used with JavaScript plugins are not truncated ([#16802](https://github.com/tailwindlabs/tailwindcss/pull/16802))
-
-### Changed
-
-- Emit variable fallbacks when using `@reference "…"` instead of duplicate CSS variable declarations ([#16774](https://github.com/tailwindlabs/tailwindcss/pull/16774))
-
-## [4.0.8] - 2025-02-21
-
-### Added
-
-- Allow `@import` with `theme(…)` options for stylesheets that contain more than just `@theme` rules ([#16514](https://github.com/tailwindlabs/tailwindcss/pull/16514))
-
-### Fixed
-
-- Don't add `!important` to CSS variable declarations when using the important modifier ([#16668](https://github.com/tailwindlabs/tailwindcss/pull/16668))
-- Vite: Ignore files and directories specified in your `.gitignore` file when using automatic source detection([#16631](https://github.com/tailwindlabs/tailwindcss/pull/16631))
-- Vite: Don't rely on the module graph for detecting candidates to ensure setups with multiple Vite builds work as expected ([#16631](https://github.com/tailwindlabs/tailwindcss/pull/16631))
-- Vite: Ensure Astro production builds always contain classes used in client-only components ([#16631](https://github.com/tailwindlabs/tailwindcss/pull/16631))
-- Vite: Always scan raw file contents for utility classes before any other transforms have been applied to ensure utility classes are scanned without any additional escaping ([#16631](https://github.com/tailwindlabs/tailwindcss/pull/16631))
-- Ensure utilities with more declarations are always sorted before utilities with fewer declarations when utilities only define CSS variables ([#16715](https://github.com/tailwindlabs/tailwindcss/pull/16715))
-- Only include `translate-z-px` utilities once in compiled CSS ([#16718](https://github.com/tailwindlabs/tailwindcss/pull/16718))
-
-### Changed
-
-- Don't include theme variables that aren't used in compiled CSS ([#16211](https://github.com/tailwindlabs/tailwindcss/pull/16211), [#16676](https://github.com/tailwindlabs/tailwindcss/pull/16676))
-
-## [4.0.7] - 2025-02-18
-
-### Fixed
-
-- Export `tailwindcss/lib/util/flattenColorPalette.js` for backward compatibility ([#16411](https://github.com/tailwindlabs/tailwindcss/pull/16411))
-- Fix sorting of numeric utility suggestions when they have different magnitudes ([#16414](https://github.com/tailwindlabs/tailwindcss/pull/16414))
-- Show suggestions for fractions in IntelliSense ([#16353](https://github.com/tailwindlabs/tailwindcss/pull/16353))
-- Don’t replace `_` in suggested theme keys ([#16433](https://github.com/tailwindlabs/tailwindcss/pull/16433))
-- Ensure `--default-outline-width` can be used to change the `outline-width` value of the `outline` utility ([#16469](https://github.com/tailwindlabs/tailwindcss/pull/16469))
-- Ensure drop shadow utilities don't inherit unexpectedly ([#16471](https://github.com/tailwindlabs/tailwindcss/pull/16471))
-- Export config and plugin types from `tailwindcss/plugin` for backward compatibility ([#16505](https://github.com/tailwindlabs/tailwindcss/pull/16505))
-- Ensure JavaScript plugins that emit nested rules referencing the utility name work as expected ([#16539](https://github.com/tailwindlabs/tailwindcss/pull/16539))
-- Statically link Visual Studio redistributables in `@tailwindcss/oxide` Windows builds ([#16602](https://github.com/tailwindlabs/tailwindcss/pull/16602))
-- Ensure that Next.js splat routes are scanned for classes ([#16457](https://github.com/tailwindlabs/tailwindcss/pull/16457))
-- Pin exact version of `tailwindcss` in `@tailwindcss/*` packages ([#16623](https://github.com/tailwindlabs/tailwindcss/pull/16623))
-- Upgrade: Report errors when updating dependencies ([#16504](https://github.com/tailwindlabs/tailwindcss/pull/16504))
-- Upgrade: Ensure a `darkMode` JS config setting with block syntax converts to use `@slot` ([#16507](https://github.com/tailwindlabs/tailwindcss/pull/16507))
-- Upgrade: Ensure the latest version of `tailwindcss` and `@tailwindcss/postcss` are installed when upgrading ([#16620](https://github.com/tailwindlabs/tailwindcss/pull/16620))
-
-## [4.0.6] - 2025-02-10
-
-### Fixed
-
-- Revert change to no longer include theme variables that aren't used in compiled CSS ([#16403](https://github.com/tailwindlabs/tailwindcss/pull/16403))
-- Upgrade: Don't migrate `blur` to `blur-sm` when used with Next.js `<Image placeholder="blur" />` ([#16405](https://github.com/tailwindlabs/tailwindcss/pull/16405))
-
-## [4.0.5] - 2025-02-08
-
-### Added
-
-- Add `@theme static` option for always including theme variables in compiled CSS ([#16211](https://github.com/tailwindlabs/tailwindcss/pull/16211))
-
-### Fixed
-
-- Remove rogue `console.log` from `@tailwindcss/vite` ([#16307](https://github.com/tailwindlabs/tailwindcss/pull/16307))
-
-### Changed
-
-- Don't include theme variables that aren't used in compiled CSS ([#16211](https://github.com/tailwindlabs/tailwindcss/pull/16211))
-
-## [4.0.4] - 2025-02-06
-
-### Fixed
-
-- Fix a crash when setting JS theme values to `null` ([#16210](https://github.com/tailwindlabs/tailwindcss/pull/16210))
-- Ensure escaped underscores in CSS variables in arbitrary values are properly unescaped ([#16206](https://github.com/tailwindlabs/tailwindcss/pull/16206))
-- Ensure that the `containers` JS theme key is added to the `--container-*` namespace ([#16169](https://github.com/tailwindlabs/tailwindcss/pull/16169))
-- Ensure theme `@keyframes` are generated even if an `--animation-*` variable spans multiple lines ([#16237](https://github.com/tailwindlabs/tailwindcss/pull/16237))
-- Vite: Skip parsing stylesheets with the `?commonjs-proxy` flag ([#16238](https://github.com/tailwindlabs/tailwindcss/pull/16238))
-- Fix `order-first` and `order-last` for Firefox ([#16266](https://github.com/tailwindlabs/tailwindcss/pull/16266))
-- Fix support for older instruction sets on Linux x64 builds of the standalone CLI ([#16244](https://github.com/tailwindlabs/tailwindcss/pull/16244))
-- Ensure `NODE_PATH` is respected when resolving JavaScript and CSS files ([#16274](https://github.com/tailwindlabs/tailwindcss/pull/16274))
-- Ensure Node addons are packaged correctly with FreeBSD builds ([#16277](https://github.com/tailwindlabs/tailwindcss/pull/16277))
-- Fix an issue where `@variant` inside a referenced stylesheet could cause a stack overflow ([#16300](https://github.com/tailwindlabs/tailwindcss/pull/16300))
-
-## [4.0.3] - 2025-02-01
-
-### Fixed
-
-- Fix incorrect removal of `@import url();` ([#16144](https://github.com/tailwindlabs/tailwindcss/pull/16144))
-
-## [4.0.2] - 2025-01-31
-
-### Fixed
-
-- Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
-- Ensure escaped theme variables are handled correctly ([#16064](https://github.com/tailwindlabs/tailwindcss/pull/16064))
-- Ensure we process Tailwind CSS features when only using `@reference` or `@variant` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057))
-- Refactor gradient implementation to work around [prettier/prettier#17058](https://github.com/prettier/prettier/issues/17058) ([#16072](https://github.com/tailwindlabs/tailwindcss/pull/16072))
-- Vite: Ensure hot-reloading works with SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052))
-- Vite: Fix a crash when starting the development server in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052))
-- Vite: Don't rebase URLs that appear to be aliases ([#16078](https://github.com/tailwindlabs/tailwindcss/pull/16078))
-- Vite: Transform `<style>` blocks in HTML files ([#16069](https://github.com/tailwindlabs/tailwindcss/pull/16069))
-- Prevent camel-casing CSS custom properties added by JavaScript plugins ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103))
-- Do not emit `@keyframes` in `@theme reference` ([#16120](https://github.com/tailwindlabs/tailwindcss/pull/16120))
-- Discard invalid declarations when parsing CSS ([#16093](https://github.com/tailwindlabs/tailwindcss/pull/16093))
-- Do not emit empty CSS rules and at-rules ([#16121](https://github.com/tailwindlabs/tailwindcss/pull/16121))
-- Handle `@variant` when at the top-level of a stylesheet ([#16129](https://github.com/tailwindlabs/tailwindcss/pull/16129))
-
-## [4.0.1] - 2025-01-29
-
-### Added
-
-- Include `:open` pseudo-class in existing `open` variant ([#15349](https://github.com/tailwindlabs/tailwindcss/pull/15349))
-
-### Fixed
-
-- Remove invalid `min-w/h-none` utilities ([#15845](https://github.com/tailwindlabs/tailwindcss/pull/15845))
-- Discard CSS variable shorthand utilities that don't use valid CSS variables ([#15738](https://github.com/tailwindlabs/tailwindcss/pull/15738))
-- Ensure font-size utilities with `none` modifier have a line-height set e.g. `text-sm/none` ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
-- Ensure font-size utilities with unknown modifier don't generate CSS ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
-- Don’t suggest font weight utilities more than once ([#15857](https://github.com/tailwindlabs/tailwindcss/pull/15857))
-- Suggest container query variants ([#15857](https://github.com/tailwindlabs/tailwindcss/pull/15857))
-- Disable bare value suggestions when not using the `--spacing` variable ([#15857](https://github.com/tailwindlabs/tailwindcss/pull/15857))
-- Ensure suggested classes are properly sorted ([#15857](https://github.com/tailwindlabs/tailwindcss/pull/15857))
-- Don’t look at .gitignore files outside initialized repos ([#15941](https://github.com/tailwindlabs/tailwindcss/pull/15941))
-- Find utilities when using the Svelte class shorthand syntax across multiple lines ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
-- Find utilities when using the Angular class shorthand syntax ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
-- Find utilities when using functions inside arrays ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
-- Ensure that `@tailwindcss/browser` does not pollute the global namespace ([#15978](https://github.com/tailwindlabs/tailwindcss/pull/15978))
-- Ensure that `tailwind-merge` is not scanned when using the Vite plugin ([#16005](https://github.com/tailwindlabs/tailwindcss/pull/16005))
-- Ensure CSS theme variables are available within shadow roots ([#15975](https://github.com/tailwindlabs/tailwindcss/pull/15975))
-- Fix crash when project lives in the `/` directory ([#15988](https://github.com/tailwindlabs/tailwindcss/pull/15988))
-- Ensure custom variants have a non-empty selector list ([#16009](https://github.com/tailwindlabs/tailwindcss/pull/16009))
-- _Upgrade_: Ensure JavaScript config files on different drives are correctly migrated ([#15927](https://github.com/tailwindlabs/tailwindcss/pull/15927))
-- _Upgrade_: Migrate `leading-[1]` to `leading-none` ([#16004](https://github.com/tailwindlabs/tailwindcss/pull/16004))
-- _Upgrade_: Do not migrate arbitrary leading utilities to bare values ([#16004](https://github.com/tailwindlabs/tailwindcss/pull/16004))
-
-## [4.0.0] - 2025-01-21
-
-### Added
-
-- [New high-performance engine](https://tailwindcss.com/blog/tailwindcss-v4#new-high-performance-engine) — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
-- [Designed for the modern web](https://tailwindcss.com/blog/tailwindcss-v4#designed-for-the-modern-web) — built on cutting-edge CSS features like cascade layers, registered custom properties with `@property`, and `color-mix()`.
-- [Simplified installation](https://tailwindcss.com/blog/tailwindcss-v4#simplified-installation) — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
-- [First-party Vite plugin](https://tailwindcss.com/blog/tailwindcss-v4#first-party-vite-plugin) — tight integration for maximum performance and minimum configuration.
-- [Automatic content detection](https://tailwindcss.com/blog/tailwindcss-v4#automatic-content-detection) — all of your template files are discovered automatically, with no configuration required.
-- [Built-in import support](https://tailwindcss.com/blog/tailwindcss-v4#built-in-import-support) — no additional tooling necessary to bundle multiple CSS files.
-- [CSS-first configuration](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration) — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
-- [CSS theme variables](https://tailwindcss.com/blog/tailwindcss-v4#css-theme-variables) — all of your design tokens exposed as native CSS variables so you can access them anywhere.
-- [Dynamic utility values and variants](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants) — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
-- [Modernized P3 color palette](https://tailwindcss.com/blog/tailwindcss-v4#modernized-p3-color-palette) — a redesigned, more vivid color palette that takes full advantage of modern display technology.
-- [Container queries](https://tailwindcss.com/blog/tailwindcss-v4#container-queries) — first-class APIs for styling elements based on their container size, no plugins required.
-- [New 3D transform utilities](https://tailwindcss.com/blog/tailwindcss-v4#new-3d-transform-utilities) — transform elements in 3D space directly in your HTML.
-- [Expanded gradient APIs](https://tailwindcss.com/blog/tailwindcss-v4#expanded-gradient-apis) — radial and conic gradients, interpolation modes, and more.
-- [@starting-style support](https://tailwindcss.com/blog/tailwindcss-v4#starting-style-support) — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
-- [not-\* variant](https://tailwindcss.com/blog/tailwindcss-v4#not-variant) — style an element only when it doesn't match another variant, custom selector, or media or feature query.
-- [Even more new utilities and variants](https://tailwindcss.com/blog/tailwindcss-v4#even-more-new-utilities-and-variants) — including support for `color-scheme`, `field-sizing`, complex shadows, `inert`, and more.
-
-Start using Tailwind CSS v4.0 today by [installing it in a new project](https://tailwindcss.com/docs/installation/), or playing with it directly in the browser on [Tailwind Play](https://play.tailwindcss.com/).
-
-For existing projects, we've published a comprehensive [upgrade guide](https://tailwindcss.com/docs/upgrade-guide) and built an [automated upgrade tool](https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool) to get you on the latest version as quickly and painlessly as possible.
-
-For a deep-dive into everything that's new, [check out the announcement post](https://tailwindcss.com/blog/tailwindcss-v4).
-
-## [4.0.0-beta.10] - 2025-01-21
-
-### Added
-
-- Add support for using `@variant` to use variants in your CSS ([#15663](https://github.com/tailwindlabs/tailwindcss/pull/15663))
-- Include `outline-color` when transitioning colors ([#15690](https://github.com/tailwindlabs/tailwindcss/pull/15690))
-
-### Fixed
-
-- Add missing `main` and `browser` fields for `@tailwindcss/browser` ([#15594](https://github.com/tailwindlabs/tailwindcss/pull/15594))
-- Support escaping `*` in theme namespace syntax (e.g.: `--color-\*: initial;`) ([#15603](https://github.com/tailwindlabs/tailwindcss/pull/15603))
-- Respect `@theme` options when resolving values in custom functional utilities ([#15623](https://github.com/tailwindlabs/tailwindcss/pull/15623))
-- Discard invalid variants (e.g. `data-checked-[selected=1]:*`) ([#15629](https://github.com/tailwindlabs/tailwindcss/pull/15629))
-- Ensure `-outline-offset-*` utilities are suggested in IntelliSense ([#15646](https://github.com/tailwindlabs/tailwindcss/pull/15646))
-- Write to `stdout` when `--output` is set to `-` or omitted with `@tailwindcss/cli` ([#15656](https://github.com/tailwindlabs/tailwindcss/pull/15656))
-- Prevent `not-*` from being used with variants that have multiple sibling rules ([#15689](https://github.com/tailwindlabs/tailwindcss/pull/15689))
-- _Upgrade (experimental)_: Pretty print `--spacing(…)` to prevent ambiguity ([#15596](https://github.com/tailwindlabs/tailwindcss/pull/15596))
-
-### Changed
-
-- Use more modern `--alpha(color / 50%)` syntax instead of `--alpha(color, 50%)` ([#15665](https://github.com/tailwindlabs/tailwindcss/pull/15665))
-- Rename `@variant` to `@custom-variant` ([#15663](https://github.com/tailwindlabs/tailwindcss/pull/15663))
-- Change `outline-hidden` to set `outline-style: none` except in forced colors mode ([#15690](https://github.com/tailwindlabs/tailwindcss/pull/15690))
-
-## [4.0.0-beta.9] - 2025-01-09
-
-### Added
-
-- Add `@tailwindcss/browser` package to run Tailwind CSS in the browser ([#15558](https://github.com/tailwindlabs/tailwindcss/pull/15558))
-- Add `@reference "…"` API as a replacement for the previous `@import "…" reference` option ([#15565](https://github.com/tailwindlabs/tailwindcss/pull/15565))
-- Add support for defining functional utilities in CSS ([#15455](https://github.com/tailwindlabs/tailwindcss/pull/15455))
-- Add new `--spacing(…)`, `--alpha(…)`, and `--theme(…)` CSS functions ([#15572](https://github.com/tailwindlabs/tailwindcss/pull/15572))
-- Add musl-based Linux builds of the standalone CLI ([#15567](https://github.com/tailwindlabs/tailwindcss/pull/15567))
-- Improve performance of internal AST manipulations ([#15529](https://github.com/tailwindlabs/tailwindcss/pull/15529))
-
-### Fixed
-
-- Use the correct property value for `place-content-between`, `place-content-around`, and `place-content-evenly` utilities ([#15440](https://github.com/tailwindlabs/tailwindcss/pull/15440))
-- Don’t detect arbitrary properties when preceded by an escape ([#15456](https://github.com/tailwindlabs/tailwindcss/pull/15456))
-- Fix incorrectly named `bg-round` and `bg-space` utilities to `bg-repeat-round` to `bg-repeat-space` ([#15462](https://github.com/tailwindlabs/tailwindcss/pull/15462))
-- Fix `inset-shadow-*` suggestions in IntelliSense ([#15471](https://github.com/tailwindlabs/tailwindcss/pull/15471))
-- Only compile arbitrary values ending in `]` ([#15503](https://github.com/tailwindlabs/tailwindcss/pull/15503))
-- Ensure `@apply` rules are processed in the correct order ([#15542](https://github.com/tailwindlabs/tailwindcss/pull/15542))
-- Allow negative utility names in `@utility` ([#15573](https://github.com/tailwindlabs/tailwindcss/pull/15573))
-- Remove all `@keyframes` contributed by JavaScript plugins when using `@reference` imports ([#15581](https://github.com/tailwindlabs/tailwindcss/pull/15581))
-- _Upgrade (experimental)_: Do not extract class names from functions (e.g. `shadow` in `filter: 'drop-shadow(…)'`) ([#15566](https://github.com/tailwindlabs/tailwindcss/pull/15566))
-- _Upgrade (experimental)_: Migrate `theme(spacing.2)` to `--spacing(2)` ([#15579](https://github.com/tailwindlabs/tailwindcss/pull/15579))
-- _Upgrade (experimental)_: Migrate `theme(…)` to `--theme(…)` ([#15579](https://github.com/tailwindlabs/tailwindcss/pull/15579))
-
-### Changed
-
-- Remove `--container-prose` in favor of a deprecated `--max-width-prose` theme variable so that `*-prose` is only available for max-width utilities and only for backward compatibility ([#15439](https://github.com/tailwindlabs/tailwindcss/pull/15439))
-- Use Vite post-processor APIs for processing Svelte `<style>` blocks ([#15436](https://github.com/tailwindlabs/tailwindcss/pull/15436))
-- Remove `@property` fallback rules for Firefox ([#15622](https://github.com/tailwindlabs/tailwindcss/pull/15622))
-
-## [4.0.0-beta.8] - 2024-12-17
-
-### Fixed
-
-- Ensure `Symbol.dispose` and `Symbol.asyncDispose` are polyfilled ([#15404](https://github.com/tailwindlabs/tailwindcss/pull/15404))
-
-## [4.0.0-beta.7] - 2024-12-13
-
-### Added
-
-- Export `tailwindcss/lib/util/flattenColorPalette` for backward compatibility ([#15318](https://github.com/tailwindlabs/tailwindcss/pull/15318))
-- Improve debug logs to get better insights ([#15303](https://github.com/tailwindlabs/tailwindcss/pull/15303))
-
-### Fixed
-
-- Fix dependency related warnings when using `@tailwindcss/postcss` on Windows ([#15321](https://github.com/tailwindlabs/tailwindcss/pull/15321))
-- Skip creating a compiler for CSS files that should not be processed ([#15340](https://github.com/tailwindlabs/tailwindcss/pull/15340))
-- Fix missing `shadow-none` suggestion in IntelliSense ([#15342](https://github.com/tailwindlabs/tailwindcss/pull/15342))
-- Optimize AST before printing for IntelliSense ([#15347](https://github.com/tailwindlabs/tailwindcss/pull/15347))
-- Generate vendor prefixes for Chrome 111+ (e.g. `-webkit-background-clip: text`) ([#15389](https://github.com/tailwindlabs/tailwindcss/pull/15389))
-
-### Changed
-
-- Rename `--aspect-ratio-*` theme key to `--aspect-*` ([#15365](https://github.com/tailwindlabs/tailwindcss/pull/15365))
-- Derive `aspect-video` utility from theme ([#15365](https://github.com/tailwindlabs/tailwindcss/pull/15365))
-
-## [4.0.0-beta.6] - 2024-12-06
-
-### Fixed
-
-- Ensure `@import "…" reference` never generates utilities ([#15307](https://github.com/tailwindlabs/tailwindcss/pull/15307))
-
-## [4.0.0-beta.5] - 2024-12-04
-
-### Added
-
-- Parallelize parsing of individual source files ([#15270](https://github.com/tailwindlabs/tailwindcss/pull/15270))
-- Add new `@import "…" reference` option for importing Tailwind CSS configuration details into another CSS entry point without duplicating CSS ([#15228](https://github.com/tailwindlabs/tailwindcss/pull/15228))
-- Improve performance of `@tailwindcss/postcss` by translating between internal data structures and PostCSS nodes directly without additional parsing or stringification ([#15297](https://github.com/tailwindlabs/tailwindcss/pull/15297))
-
-### Fixed
-
-- Ensure absolute URLs inside imported CSS files are not rebased when using `@tailwindcss/vite` ([#15275](https://github.com/tailwindlabs/tailwindcss/pull/15275))
-- Fix issues with dev servers using Svelte 5 with `@tailwindcss/vite` ([#15274](https://github.com/tailwindlabs/tailwindcss/issues/15274))
-- Support installing `@tailwindcss/vite` in Vite 6 projects ([#15274](https://github.com/tailwindlabs/tailwindcss/issues/15274))
-- Fix resolution of imported CSS files in SSR builds with `@tailwindcss/vite` ([#15279](https://github.com/tailwindlabs/tailwindcss/issues/15279))
-- Ensure other plugins can run after `@tailwindcss/postcss` ([#15273](https://github.com/tailwindlabs/tailwindcss/pull/15273))
-- Rebase URLs inside imported CSS files when using Vite with the `@tailwindcss/postcss` extension ([#15273](https://github.com/tailwindlabs/tailwindcss/pull/15273))
-- Fix missing font family suggestions in IntelliSense ([#15288](https://github.com/tailwindlabs/tailwindcss/pull/15288))
-- Fix missing `@container` suggestion in IntelliSense ([#15288](https://github.com/tailwindlabs/tailwindcss/pull/15288))
-
-## [4.0.0-beta.4] - 2024-11-29
-
-### Fixed
-
-- Don't scan source files for utilities unless `@tailwind utilities` is present in the CSS in `@tailwindcss/postcss` and `@tailwindcss/vite` ([#15226](https://github.com/tailwindlabs/tailwindcss/pull/15226))
-- Skip reserializing CSS files that don't use Tailwind features in `@tailwindcss/postcss` and `@tailwindcss/vite` ([#15226](https://github.com/tailwindlabs/tailwindcss/pull/15226))
-- _Upgrade (experimental)_: Do not migrate the `overflow-clip` utility ([#15244](https://github.com/tailwindlabs/tailwindcss/pull/15244))
-- _Upgrade (experimental)_: Rename `backdrop-blur` to `backdrop-blur-sm` and `backdrop-blur-sm` to `backdrop-blur-xs` ([#15242](https://github.com/tailwindlabs/tailwindcss/pull/15242))
-
-## [4.0.0-beta.3] - 2024-11-27
-
-### Fixed
-
-- Ensure any necessary vendor prefixes are generated for iOS Safari, Firefox, and Chrome ([#15166](https://github.com/tailwindlabs/tailwindcss/pull/15166))
-- Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174))
-- Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179))
-- Ensure `--spacing-*` variables take precedence over `--container-*` variables ([#15180](https://github.com/tailwindlabs/tailwindcss/pull/15180))
-- Fix scanning classes delimited by tab characters ([#15169](https://github.com/tailwindlabs/tailwindcss/pull/15169))
-- Ensure opacity modifiers and semi-transparent gradients render correctly by default in Safari ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
-- Fix element size thrashing when transitioning gradients on elements with a defined font-size in Safari ([#15216](https://github.com/tailwindlabs/tailwindcss/pull/15216))
-- Ensure `translate-*` utilities work with arbitrary values that use `calc(…)` ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
-- Ensure gradient stop position utilities work with arbitrary values that use `calc(…)` ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
-- Ensure Node addons are packaged correctly with Windows ARM builds ([#15171](https://github.com/tailwindlabs/tailwindcss/pull/15171))
-- Ensure the Vite plugin resolves CSS and JS files according to the configured resolver conditions ([#15173])(https://github.com/tailwindlabs/tailwindcss/pull/15173)
-- _Upgrade (experimental)_: Migrate prefixes for `.group` and `.peer` classes ([#15208](https://github.com/tailwindlabs/tailwindcss/pull/15208))
-
-### Changed
-
-- Interpolate gradients using OKLAB instead of OKLCH by default ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
-- Error when `layer(…)` in `@import` is not first in the list of functions/conditions ([#15109](https://github.com/tailwindlabs/tailwindcss/pull/15109))
-- Use unitless line-height values for font-size variables in default theme ([#15216](https://github.com/tailwindlabs/tailwindcss/pull/15216))
-- Don't register custom properties with explicit types unless those custom properties need to be animateable ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
-
-## [4.0.0-beta.2] - 2024-11-22
-
-### Fixed
-
-- Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
-- Ensure `space-x/y-*` and `divide-x/y-*` with variants can undo `space-x/y-reverse` and `divide-x/y-reverse` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094))
-- Don't print minified code when the build fails in the CLI ([#15106](https://github.com/tailwindlabs/tailwindcss/pull/15106))
-- Generate the correct CSS for the `break-keep` utility ([#15108](https://github.com/tailwindlabs/tailwindcss/pull/15108))
-- Detect single word utilities that include numbers (e.g. `h1`) when scanning files ([#15110](https://github.com/tailwindlabs/tailwindcss/pull/15110))
-- _Upgrade (experimental)_: Always add `layer(…)` as the first param to `@import` ([#15102](https://github.com/tailwindlabs/tailwindcss/pull/15102))
-
-### Changed
-
-- Revert the new base styles for buttons and form controls ([#15100](https://github.com/tailwindlabs/tailwindcss/pull/15100))
-
-## [4.0.0-beta.1] - 2024-11-21
-
-### Added
-
-- _Upgrade (experimental)_: Drop unnecessary `opacity` theme values when migrating to CSS ([#15067](https://github.com/tailwindlabs/tailwindcss/pull/15067))
-
-### Fixed
-
-- Ensure `opacity` theme values configured as decimal numbers via JS config files work with color utilities ([#15067](https://github.com/tailwindlabs/tailwindcss/pull/15067))
-- Bring back support for `decoration-clone`, `decoration-slice`, `overflow-ellipsis`, `flex-grow-*`, and `flex-shrink-*` ([#15069](https://github.com/tailwindlabs/tailwindcss/pull/15069))
-- _Upgrade (experimental)_: Include `color` in the form reset snippet ([#15064](https://github.com/tailwindlabs/tailwindcss/pull/15064))
-
-## [4.0.0-alpha.36] - 2024-11-21
-
-### Added
-
-- Add consistent base styles for buttons and form controls ([#15036](https://github.com/tailwindlabs/tailwindcss/pull/15036))
-- _Upgrade (experimental)_: Convert `group-[]:flex` to `in-[.group]:flex` ([#15054](https://github.com/tailwindlabs/tailwindcss/pull/15054))
-- _Upgrade (experimental)_: Add form reset styles to CSS files for compatibility with v3 ([#15036](https://github.com/tailwindlabs/tailwindcss/pull/15036))
-- _Upgrade (experimental)_: Migrate `ring` to `ring-3` ([#15063](https://github.com/tailwindlabs/tailwindcss/pull/15063))
-
-### Fixed
-
-- _Upgrade (experimental)_: Don't migrate arbitrary variants to `in-*` that use the child combinator instead of the descendant combinator ([#15054](https://github.com/tailwindlabs/tailwindcss/pull/15054))
-
-### Changed
-
-- Use single drop shadow values instead of multiple ([#15056](https://github.com/tailwindlabs/tailwindcss/pull/15056))
-- Do not parse invalid candidates with empty arbitrary values ([#15055](https://github.com/tailwindlabs/tailwindcss/pull/15055))
-
-## [4.0.0-alpha.35] - 2024-11-20
-
-### Added
-
-- Reintroduce `max-w-screen-*` utilities that read from the `--breakpoint` namespace as deprecated utilities ([#15013](https://github.com/tailwindlabs/tailwindcss/pull/15013))
-- Support using CSS variables as arbitrary values without `var(…)` by using parentheses instead of square brackets (e.g. `bg-(--my-color)`) ([#15020](https://github.com/tailwindlabs/tailwindcss/pull/15020))
-- Add new `in-*` variant ([#15025](https://github.com/tailwindlabs/tailwindcss/pull/15025))
-- Bundle `@tailwindcss/forms`, `@tailwindcss/typography`, and `@tailwindcss/aspect-ratio` with the standalone CLI ([#15028](https://github.com/tailwindlabs/tailwindcss/pull/15028))
-- Allow `addUtilities()` and `addComponents()` to work with child combinators and other complex selectors ([#15029](https://github.com/tailwindlabs/tailwindcss/pull/15029))
-- Support colors that use `<alpha-value>` in JS configs and plugins ([#15033](https://github.com/tailwindlabs/tailwindcss/pull/15033))
-- Add new `transition-discrete` and `transition-normal` utilities for `transition-behavior` ([#15051](https://github.com/tailwindlabs/tailwindcss/pull/15051))
-- _Upgrade (experimental)_: Migrate `[&>*]` to the `*` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
-- _Upgrade (experimental)_: Migrate `[&_*]` to the `**` variant ([#15022](https://github.com/tailwindlabs/tailwindcss/pull/15022))
-- _Upgrade (experimental)_: Warn when trying to migrating a project that is not on Tailwind CSS v3 ([#15015](https://github.com/tailwindlabs/tailwindcss/pull/15015))
-- _Upgrade (experimental)_: Migrate colors that use `<alpha-value>` in JS configs ([#15033](https://github.com/tailwindlabs/tailwindcss/pull/15033))
-
-### Fixed
-
-- Ensure `flex` is suggested ([#15014](https://github.com/tailwindlabs/tailwindcss/pull/15014))
-- Improve module resolution for `cjs`-only and `esm`-only plugins ([#15041](https://github.com/tailwindlabs/tailwindcss/pull/15041))
-- Perform `calc(…)` on just values for negative `-rotate-*` utilities, not on the `rotateX/Y/Z(…)` functions themselves ([#15044](https://github.com/tailwindlabs/tailwindcss/pull/15044))
-- _Upgrade (experimental)_: Resolve imports when specifying a CSS entry point on the command-line ([#15010](https://github.com/tailwindlabs/tailwindcss/pull/15010))
-- _Upgrade (experimental)_: Resolve nearest Tailwind config file when CSS file does not contain `@config` ([#15001](https://github.com/tailwindlabs/tailwindcss/pull/15001))
-- _Upgrade (experimental)_: Improve output when CSS imports can not be found ([#15038](https://github.com/tailwindlabs/tailwindcss/pull/15038))
-- _Upgrade (experimental)_: Ignore analyzing imports with external URLs (e.g.: `@import "https://fonts.google.com"`) ([#15040](https://github.com/tailwindlabs/tailwindcss/pull/15040))
-- _Upgrade (experimental)_: Ignore analyzing imports with `url(…)` (e.g.: `@import url("https://fonts.google.com")`) ([#15040](https://github.com/tailwindlabs/tailwindcss/pull/15040))
-- _Upgrade (experimental)_: Use `resolveJsId` when resolving `tailwindcss/package.json` ([#15041](https://github.com/tailwindlabs/tailwindcss/pull/15041))
-- _Upgrade (experimental)_: Ensure children of Tailwind root file are not considered Tailwind root files ([#15048](https://github.com/tailwindlabs/tailwindcss/pull/15048))
-
-### Changed
-
-- Bring back support for color opacity modifiers to read from `--opacity-*` theme values ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278))
-
-## [4.0.0-alpha.34] - 2024-11-14
-
-### Added
-
-- Support opacity values in increments of `0.25` by default ([#14980](https://github.com/tailwindlabs/tailwindcss/pull/14980))
-- Support specifying the color interpolation method for gradients via modifier ([#14984](https://github.com/tailwindlabs/tailwindcss/pull/14984))
-- Reintroduce `container` component as a utility ([#14993](https://github.com/tailwindlabs/tailwindcss/pull/14993), [#14999](https://github.com/tailwindlabs/tailwindcss/pull/14999))
-- _Upgrade (experimental)_: Migrate `container` component configuration to CSS ([#14999](https://github.com/tailwindlabs/tailwindcss/pull/14999))
-
-### Fixed
-
-- Ensure that CSS inside Svelte `<style>` blocks always run the expected Svelte processors when using the Vite extension ([#14981](https://github.com/tailwindlabs/tailwindcss/pull/14981))
-- _Upgrade (experimental)_: Ensure it's safe to migrate `blur`, `rounded`, or `shadow` ([#14979](https://github.com/tailwindlabs/tailwindcss/pull/14979))
-- _Upgrade (experimental)_: Do not rename classes using custom defined theme values ([#14976](https://github.com/tailwindlabs/tailwindcss/pull/14976))
-- _Upgrade (experimental)_: Ensure `@config` is injected in nearest common ancestor stylesheet ([#14989](https://github.com/tailwindlabs/tailwindcss/pull/14989))
-- _Upgrade (experimental)_: Add missing `layer(…)` to imports above Tailwind directives ([#14982](https://github.com/tailwindlabs/tailwindcss/pull/14982))
-
-## [4.0.0-alpha.33] - 2024-11-11
-
-### Fixed
-
-- Don't reset horizontal padding on date/time pseudo-elements ([#14959](https://github.com/tailwindlabs/tailwindcss/pull/14959))
-- Don't emit `calc()` with invalid values for bare values that aren't integers in spacing utilities ([#14962](https://github.com/tailwindlabs/tailwindcss/pull/14962))
-- Ensure spacing scale values work as line-height modifiers ([#14966](https://github.com/tailwindlabs/tailwindcss/pull/14966))
-
-## [4.0.0-alpha.32] - 2024-11-11
-
-### 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))
-- Add new `**` variant ([#14903](https://github.com/tailwindlabs/tailwindcss/pull/14903))
-- Process `<style>` blocks inside Svelte files when using the Vite extension ([#14151](https://github.com/tailwindlabs/tailwindcss/pull/14151))
-- Normalize date/time input styles in Preflight ([#14931](https://github.com/tailwindlabs/tailwindcss/pull/14931))
-- _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))
-- _Upgrade (experimental)_: Rename `shadow` to `shadow-sm`, `shadow-sm` to `shadow-xs`, and `shadow-xs` to `shadow-2xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
-- _Upgrade (experimental)_: Rename `inset-shadow` to `inset-shadow-sm`, `inset-shadow-sm` to `inset-shadow-xs`, and `inset-shadow-xs` to `inset-shadow-2xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
-- _Upgrade (experimental)_: Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
-- _Upgrade (experimental)_: Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
-- _Upgrade (experimental)_: Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14875](https://github.com/tailwindlabs/tailwindcss/pull/14875))
-- _Upgrade (experimental)_: Migrate `theme()` usage and JS config files to use the new `--spacing` multiplier where possible ([#14905](https://github.com/tailwindlabs/tailwindcss/pull/14905))
-- _Upgrade (experimental)_: Migrate arbitrary values in variants to built-in values where possible ([#14841](https://github.com/tailwindlabs/tailwindcss/pull/14841))
-
-### Fixed
-
-- Detect classes in new files when using `@tailwindcss/postcss` ([#14829](https://github.com/tailwindlabs/tailwindcss/pull/14829))
-- Fix crash when using `@source` containing `..` ([#14831](https://github.com/tailwindlabs/tailwindcss/pull/14831))
-- Ensure instances of the same variant with different values are always sorted deterministically (e.g. `data-focus:flex` and `data-active:flex`) ([#14835](https://github.com/tailwindlabs/tailwindcss/pull/14835))
-- Ensure `--inset-ring=*` and `--inset-shadow-*` variables are ignored by `inset-*` utilities ([#14855](https://github.com/tailwindlabs/tailwindcss/pull/14855))
-- Ensure `url(…)` containing special characters such as `;` or `{}` end up in one declaration ([#14879](https://github.com/tailwindlabs/tailwindcss/pull/14879))
-- Ensure adjacent rules are merged together after handling nesting when generating optimized CSS ([#14873](https://github.com/tailwindlabs/tailwindcss/pull/14873))
-- Rebase `url()` inside imported CSS files when using Vite ([#14877](https://github.com/tailwindlabs/tailwindcss/pull/14877))
-- Ensure that CSS transforms from other Vite plugins correctly work in full builds (e.g. `:deep()` in Vue) ([#14871](https://github.com/tailwindlabs/tailwindcss/pull/14871))
-- Ensure the CSS `theme()` function handles newlines and tabs in its arguments list ([#14917](https://github.com/tailwindlabs/tailwindcss/pull/14917))
-- Don't unset keys like `--inset-shadow-*` when unsetting keys like `--inset-*` ([#14906](https://github.com/tailwindlabs/tailwindcss/pull/14906))
-- Ensure spacing utilities with no value (e.g. `px` or `translate-y`) don't generate CSS ([#14911](https://github.com/tailwindlabs/tailwindcss/pull/14911))
-- Don't override user-agent background color for input elements in Preflight ([#14913](https://github.com/tailwindlabs/tailwindcss/pull/14913))
-- Don't attempt to convert CSS variables (which should already be percentages) to percentages when used as opacity modifiers ([#14916](https://github.com/tailwindlabs/tailwindcss/pull/14916))
-- Ensure custom utilities registered with the plugin API can start with `@` ([#14793](https://github.com/tailwindlabs/tailwindcss/pull/14793))
-- _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830))
-- _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838))
-- _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896))
-- _Upgrade (experimental)_: Don't convert `theme(…/15%)` to modifier unless it is the entire arbitrary value of a utility ([#14922](https://github.com/tailwindlabs/tailwindcss/pull/14922))
-- _Upgrade (experimental)_: Convert `,` to ` ` in arbitrary `grid-cols-*`, `grid-rows-*`, and `object-*` values ([#14927](https://github.com/tailwindlabs/tailwindcss/pull/14927))
-
-### Changed
-
-- Remove `--drop-shadow-none` from the default theme in favor of a static `drop-shadow-none` utility ([#14847](https://github.com/tailwindlabs/tailwindcss/pull/14847))
-- Rename `shadow` to `shadow-sm`, `shadow-sm` to `shadow-xs`, and `shadow-xs` to `shadow-2xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
-- Rename `inset-shadow` to `inset-shadow-sm`, `inset-shadow-sm` to `inset-shadow-xs`, and `inset-shadow-xs` to `inset-shadow-2xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
-- 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-*` utilities 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))
-- Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))
-- Remove static `font-weight` utilities and add `--font-weight-*` values to the default theme ([#14883](https://github.com/tailwindlabs/tailwindcss/pull/14883))
-- Rename `--transition-timing-function-*` variables to `--ease-*` ([#14886](https://github.com/tailwindlabs/tailwindcss/pull/14886))
-- Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
-- Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
-- Rename `--font-family-*` variables to `--font-*` ([#14885](https://github.com/tailwindlabs/tailwindcss/pull/14885))
-- Rename `--letter-spacing-*` variables to `--tracking-*` ([#14921](https://github.com/tailwindlabs/tailwindcss/pull/14921))
-- Rename `--line-height-*` variables to `--leading-*` ([#14925](https://github.com/tailwindlabs/tailwindcss/pull/14925))
-- Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920))
-- Replace `outline-none` with `outline-hidden`, add new simplified `outline-none` utility ([#14926](https://github.com/tailwindlabs/tailwindcss/pull/14926))
-- Revert adding borders by default to form inputs ([#14929](https://github.com/tailwindlabs/tailwindcss/pull/14929))
-- Deprecate `shadow-inner` utility ([#14933](https://github.com/tailwindlabs/tailwindcss/pull/14933))
-- Remove `--leading-none` from the default theme in favor of a static `leading-none` utility ([#14934](https://github.com/tailwindlabs/tailwindcss/pull/14934))
-
-## [4.0.0-alpha.31] - 2024-10-29
-
-### Added
-
-- Support specifying the base path for automatic source detection using a `source(…)` function on `@tailwind utilities` or `@import "tailwindcss"` ([#14820](https://github.com/tailwindlabs/tailwindcss/pull/14820))
-- Support disabling automatic source detection with `source(none)` ([#14820](https://github.com/tailwindlabs/tailwindcss/pull/14820))
-- Support passing directories to `@source` without needing to pass a complete glob ([#14820](https://github.com/tailwindlabs/tailwindcss/pull/14820))
-- _Upgrade (experimental)_: Bump `prettier-plugin-tailwindcss` to latest version during upgrade ([#14808](https://github.com/tailwindlabs/tailwindcss/pull/14808))
-
-### Fixed
-
-- Support calling `config()` with no arguments in plugin API ([#14799](https://github.com/tailwindlabs/tailwindcss/pull/14799))
-
-### Changed
-
-- Use logical `*-inline` and `*-block` properties for all x/y utilities like `px-*`, `my-*`, `scroll-px-*`, and `inset-y-*` ([#14805](https://github.com/tailwindlabs/tailwindcss/pull/14805))
-- Respect automatic source detection heuristics in sources registered with `@source` ([#14820](https://github.com/tailwindlabs/tailwindcss/pull/14820))
-
-## [4.0.0-alpha.30] - 2024-10-24
-
-### Added
-
-- Support `not-*` with all built-in media query and `supports-*` variants ([#14743](https://github.com/tailwindlabs/tailwindcss/pull/14743))
-- Support `not-*` with custom variants containing at-rules ([#14743](https://github.com/tailwindlabs/tailwindcss/pull/14743))
-- Support `group-*`, `peer-*`, and `has-*` with custom variants containing multiple, non-nested style rules ([#14743](https://github.com/tailwindlabs/tailwindcss/pull/14743))
-
-### Fixed
-
-- Ensure individual logical property utilities are sorted later than left/right pair utilities ([#14777](https://github.com/tailwindlabs/tailwindcss/pull/14777))
-- Don't migrate important modifiers inside conditional statements in Vue and Alpine (e.g. `<div v-if="!border" />`) ([#14774](https://github.com/tailwindlabs/tailwindcss/pull/14774))
-- Ensure third-party plugins with `exports` in their `package.json` are resolved correctly ([#14775](https://github.com/tailwindlabs/tailwindcss/pull/14775))
-- Ensure underscores in the `url()` function are never unescaped ([#14776](https://github.com/tailwindlabs/tailwindcss/pull/14776))
-- Ensure complex variants are displayed correctly in IntelliSense completions ([#14743](https://github.com/tailwindlabs/tailwindcss/pull/14743))
-- _Upgrade (experimental)_: Ensure `@import` statements for relative CSS files are actually migrated to use relative path syntax ([#14769](https://github.com/tailwindlabs/tailwindcss/pull/14769))
-- _Upgrade (experimental)_: Only generate Preflight compatibility styles when Preflight is used ([#14773](https://github.com/tailwindlabs/tailwindcss/pull/14773))
-- _Upgrade (experimental)_: Don't escape underscores when printing theme values migrated to CSS variables in arbitrary values (e.g. `m-[var(--spacing-1_5)]` instead of `m-[var(--spacing-1\_5)]`) ([#14778](https://github.com/tailwindlabs/tailwindcss/pull/14778))
-- _Upgrade (experimental)_: Ensure `layer(…)` on `@import` is only removed when `@utility` is present ([#14783](https://github.com/tailwindlabs/tailwindcss/pull/14783))
-
-### Changed
-
-- Don't convert underscores in the first argument to `var()` and `theme()` to spaces ([#14776](https://github.com/tailwindlabs/tailwindcss/pull/14776), [#14781](https://github.com/tailwindlabs/tailwindcss/pull/14781))
-- Sort text alignment and wrapping utilities with typography utilities ([#14787](https://github.com/tailwindlabs/tailwindcss/pull/14787))
-- Sort line height and letter spacing utilities before text color utilities ([#14787](https://github.com/tailwindlabs/tailwindcss/pull/14787))
-
-## [4.0.0-alpha.29] - 2024-10-23
-
-### Added
-
-- _Upgrade (experimental)_: Migrate `plugins` with options to CSS ([#14700](https://github.com/tailwindlabs/tailwindcss/pull/14700))
-- _Upgrade (experimental)_: Allow JS configuration files with `corePlugins` options to be migrated to CSS ([#14742](https://github.com/tailwindlabs/tailwindcss/pull/14742))
-- _Upgrade (experimental)_: Migrate `@import` statements for relative CSS files to use relative path syntax (e.g. `./file.css`) ([#14755](https://github.com/tailwindlabs/tailwindcss/pull/14755))
-- _Upgrade (experimental)_: Migrate `max-w-screen-*` utilities to `max-w-[var(…)]`([#14754](https://github.com/tailwindlabs/tailwindcss/pull/14754))
-- _Upgrade (experimental)_: Migrate `@variants` and `@responsive` directives ([#14748](https://github.com/tailwindlabs/tailwindcss/pull/14748))
-- _Upgrade (experimental)_: Migrate `@screen` directive ([#14749](https://github.com/tailwindlabs/tailwindcss/pull/14749))
-- _Upgrade (experimental)_: Generate compatibility styles for legacy default border color ([#14746](https://github.com/tailwindlabs/tailwindcss/pull/14746))
-- _Upgrade (experimental)_: Generate compatibility styles for legacy default border width on form elements ([#14746](https://github.com/tailwindlabs/tailwindcss/pull/14746))
-
-### Fixed
-
-- Allow spaces spaces around operators in attribute selector variants ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703))
-- Ensure color opacity modifiers work with OKLCH colors ([#14741](https://github.com/tailwindlabs/tailwindcss/pull/14741))
-- Ensure changes to the input CSS file result in a full rebuild ([#14744](https://github.com/tailwindlabs/tailwindcss/pull/14744))
-- Add `postcss` as a dependency of `@tailwindcss/postcss` ([#14750](https://github.com/tailwindlabs/tailwindcss/pull/14750))
-- Ensure the JS `theme()` function can reference CSS theme variables that contain special characters without escaping them (e.g. referencing `--width-1\/2` as `theme('width.1/2')`) ([#14739](https://github.com/tailwindlabs/tailwindcss/pull/14739))
-- Ensure JS theme keys containing special characters correctly produce utility classes (e.g. `'1/2': 50%` to `w-1/2`) ([#14739](https://github.com/tailwindlabs/tailwindcss/pull/14739))
-- Always emit keyframes registered in `addUtilities` ([#14747](https://github.com/tailwindlabs/tailwindcss/pull/14747))
-- Ensure loading stylesheets via the `?raw` and `?url` static asset query works when using the Vite plugin ([#14716](https://github.com/tailwindlabs/tailwindcss/pull/14716))
-- _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721))
-- _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720))
-- _Upgrade (experimental)_: Ensure legacy theme values ending in `1` (like `theme(spacing.1)`) are correctly migrated to custom properties ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724))
-- _Upgrade (experimental)_: Migrate arbitrary values to bare values for the `from-*`, `via-*`, and `to-*` utilities ([#14725](https://github.com/tailwindlabs/tailwindcss/pull/14725))
-- _Upgrade (experimental)_: Ensure `layer(utilities)` is removed from `@import` to keep `@utility` top-level ([#14738](https://github.com/tailwindlabs/tailwindcss/pull/14738))
-- _Upgrade (experimental)_: Ensure JS theme keys with special characters are escaped when migrated to CSS variables ([#14736](https://github.com/tailwindlabs/tailwindcss/pull/14736))
-- _Upgrade (experimental)_: Don't migrate important modifiers that are actually logical negations (e.g. `let foo = !border` to `let foo = border!`) ([#14737](https://github.com/tailwindlabs/tailwindcss/pull/14737))
-
-### Changed
-
-- Require a relative path prefix for importing relative CSS files (e.g. `@import './styles.css'` instead of `@import 'styles.css'`) ([#14755](https://github.com/tailwindlabs/tailwindcss/pull/14755))
-- _Upgrade (experimental)_: Don't create `@source` rules for `content` paths that are already covered by automatic source detection ([#14714](https://github.com/tailwindlabs/tailwindcss/pull/14714))
-
-## [4.0.0-alpha.28] - 2024-10-17
-
-### Added
-
-- Add first draft of new wide-gamut color palette ([#14693](https://github.com/tailwindlabs/tailwindcss/pull/14693))
-- Support linear gradient angles as bare values ([#14707](https://github.com/tailwindlabs/tailwindcss/pull/14707))
-- Interpolate gradients in OKLCH by default ([#14708](https://github.com/tailwindlabs/tailwindcss/pull/14708))
-- _Upgrade (experimental)_: Migrate `theme(…)` calls to `var(…)` or to the modern `theme(…)` syntax ([#14664](https://github.com/tailwindlabs/tailwindcss/pull/14664), [#14695](https://github.com/tailwindlabs/tailwindcss/pull/14695))
-- _Upgrade (experimental)_: Support migrating JS configurations to CSS that contain functions inside the `theme` object ([#14675](https://github.com/tailwindlabs/tailwindcss/pull/14675))
-
-### Fixed
-
-- Ensure `theme` values defined outside of `extend` in JS configuration files overwrite all existing values for that namespace ([#14672](https://github.com/tailwindlabs/tailwindcss/pull/14672))
-- Remove unnecessary variable fallbacks in gradient utilities ([#14705](https://github.com/tailwindlabs/tailwindcss/pull/14705))
-- _Upgrade (experimental)_: Speed up template migrations ([#14679](https://github.com/tailwindlabs/tailwindcss/pull/14679))
-- _Upgrade (experimental)_: Don't generate invalid CSS when migrating a complex `screens` config ([#14691](https://github.com/tailwindlabs/tailwindcss/pull/14691))
-
-## [4.0.0-alpha.27] - 2024-10-15
-
-### Added
-
-- Add support for `tailwindcss/colors.js`, `tailwindcss/defaultTheme.js`, and `tailwindcss/plugin.js` exports ([#14595](https://github.com/tailwindlabs/tailwindcss/pull/14595))
-- Support `keyframes` in JS config file themes ([#14594](https://github.com/tailwindlabs/tailwindcss/pull/14594))
-- Support the `color` parameter in JS theme configuration callbacks ([#14651](https://github.com/tailwindlabs/tailwindcss/pull/14651))
-- Support using the object parameter in the JS theme configuration callback as `theme()` function ([#14659](https://github.com/tailwindlabs/tailwindcss/pull/14659))
-- _Upgrade (experimental)_: Automatically discover JavaScript config files ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597))
-- _Upgrade (experimental)_: Inject `@config "…"` when a `tailwind.config.{js,ts,…}` is detected ([#14635](https://github.com/tailwindlabs/tailwindcss/pull/14635))
-- _Upgrade (experimental)_: Migrate `@media screen(…)` when running codemods ([#14603](https://github.com/tailwindlabs/tailwindcss/pull/14603))
-- _Upgrade (experimental)_: Migrate `aria-*`, `data-*`, and `supports-*` variants from arbitrary values to bare values ([#14644](https://github.com/tailwindlabs/tailwindcss/pull/14644))
-- _Upgrade (experimental)_: Migrate arbitrary values to bare values ([#14669](https://github.com/tailwindlabs/tailwindcss/pull/14669))
-- _Upgrade (experimental)_: Migrate legacy classes to the v4 alternative ([#14643](https://github.com/tailwindlabs/tailwindcss/pull/14643))
-- _Upgrade (experimental)_: Migrate static JS configurations to CSS ([#14639](https://github.com/tailwindlabs/tailwindcss/pull/14639), [#14650](https://github.com/tailwindlabs/tailwindcss/pull/14650), [#14648](https://github.com/tailwindlabs/tailwindcss/pull/14648), [#14666](https://github.com/tailwindlabs/tailwindcss/pull/14666))
-- _Upgrade (experimental)_: Migrate v3 PostCSS setups to v4 in some cases ([#14612](https://github.com/tailwindlabs/tailwindcss/pull/14612))
-
-### Fixed
-
-- Don’t crash when scanning a candidate equal to the configured prefix ([#14588](https://github.com/tailwindlabs/tailwindcss/pull/14588))
-- Ensure there's always a space before `!important` when stringifying CSS ([#14611](https://github.com/tailwindlabs/tailwindcss/pull/14611))
-- Don't set `display: none` on elements that use `hidden="until-found"` ([#14631](https://github.com/tailwindlabs/tailwindcss/pull/14631))
-- Ensure the CSS `theme()` function resolves to the right value in some compatibility situations ([#14614](https://github.com/tailwindlabs/tailwindcss/pull/14614))
-- Fix issue that could cause the CLI to crash when files are deleted while watching ([#14616](https://github.com/tailwindlabs/tailwindcss/pull/14616))
-- Ensure custom variants using the JS API have access to modifiers ([#14637](https://github.com/tailwindlabs/tailwindcss/pull/14637))
-- Ensure auto complete suggestions work when using `matchUtilities` ([#14589](https://github.com/tailwindlabs/tailwindcss/pull/14589))
-- Pass options when using `addComponents` and `matchComponents` ([#14590](https://github.com/tailwindlabs/tailwindcss/pull/14590))
-- Ensure `boxShadow` and `animation` theme keys in JS config files are accessible under `--shadow-*` and `--animate-*` using the `theme()` function ([#14642](https://github.com/tailwindlabs/tailwindcss/pull/14642))
-- Ensure all theme keys with new names are also accessible under their old names when using the `theme()` function with the legacy dot notation syntax ([#14642](https://github.com/tailwindlabs/tailwindcss/pull/14642))
-- Ensure `var(…)` can be used as the opacity value inside the `theme([path] / [modifier])` function ([#14653](https://github.com/tailwindlabs/tailwindcss/pull/14653))
-- Ensure `font-stretch` utilities only accepts positive integer bare values ([#14670](https://github.com/tailwindlabs/tailwindcss/pull/14670))
-- _Upgrade (experimental)_: Ensure CSS before a layer stays unlayered when running codemods ([#14596](https://github.com/tailwindlabs/tailwindcss/pull/14596))
-- _Upgrade (experimental)_: Resolve issues where some prefixed candidates were not properly migrated ([#14600](https://github.com/tailwindlabs/tailwindcss/pull/14600))
-
-## [4.0.0-alpha.26] - 2024-10-03
-
-### Added
-
-- Add support for prefixes ([#14501](https://github.com/tailwindlabs/tailwindcss/pull/14501))
-- Expose timing information in debug mode ([#14553](https://github.com/tailwindlabs/tailwindcss/pull/14553))
-- Add support for `blocklist` in JS config files ([#14556](https://github.com/tailwindlabs/tailwindcss/pull/14556))
-- Add `color-scheme` utilities ([#14567](https://github.com/tailwindlabs/tailwindcss/pull/14567))
-- Add support for `important` option in JS config files ([#14448](https://github.com/tailwindlabs/tailwindcss/pull/14448))
-- _Upgrade (experimental)_: Convert `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` in CSS files ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514))
-- _Upgrade (experimental)_: Apply all utility upgrades to `@apply` in CSS files ([#14574](https://github.com/tailwindlabs/tailwindcss/pull/14574))
-- _Upgrade (experimental)_: Update variant order in template files ([#14524](https://github.com/tailwindlabs/tailwindcss/pull/14524]))
-- _Upgrade (experimental)_: Convert `bg-gradient-*` utilities to `bg-linear-*` in template files ([#14537](https://github.com/tailwindlabs/tailwindcss/pull/14537]))
-- _Upgrade (experimental)_: Convert legacy prefixes to variant prefixes in template files ([#14557](https://github.com/tailwindlabs/tailwindcss/pull/14557]))
-- _Upgrade (experimental)_: Convert bare CSS variables in arbitrary values to `var(…)` in template files ([#14526](https://github.com/tailwindlabs/tailwindcss/pull/14526))
-- _Upgrade (experimental)_: Convert legacy important modifier syntax to trailing syntax ([#14502](https://github.com/tailwindlabs/tailwindcss/pull/14502))
-
-### Fixed
-
-- Use the right import base path when using the CLI to reading files from stdin ([#14522](https://github.com/tailwindlabs/tailwindcss/pull/14522))
-- Ensure that `@utility` is top-level and cannot be nested ([#14525](https://github.com/tailwindlabs/tailwindcss/pull/14525))
-- Only setup a single compiler in `@tailwindcss/postcss` for initial builds ([#14565](https://github.com/tailwindlabs/tailwindcss/pull/14565))
-- Ensure editing imported CSS files triggers a rebuild ([#14561](https://github.com/tailwindlabs/tailwindcss/pull/14561))
-- Ensure `@apply` and CSS functions work inside imported stylesheets ([#14576](https://github.com/tailwindlabs/tailwindcss/pull/14576))
-- _Upgrade (experimental)_: Don't wrap custom CSS after utilities in a layer ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512))
-- _Upgrade (experimental)_: Don't add empty `layer()` to `@import` at-rules when the styles do not need to be imported into a layer ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513))
-- _Upgrade (experimental)_: Don't wrap comment nodes in `@layer` when running codemods ([#14517](https://github.com/tailwindlabs/tailwindcss/pull/14517))
-- _Upgrade (experimental)_: Fix scenario where selectors can be lost in multi-selector rules ([#14518](https://github.com/tailwindlabs/tailwindcss/pull/14518))
-- _Upgrade (experimental)_: Ensure custom CSS before `@tailwind` rules is wrapped with `@layer base` when prepending `@import "tailwindcss"` to the top of the file ([#14536](https://github.com/tailwindlabs/tailwindcss/pull/14536))
-
-### Changed
-
-- Disallow bare values with decimal places ([#14562](https://github.com/tailwindlabs/tailwindcss/pull/14562))
-
-## [4.0.0-alpha.25] - 2024-09-24
-
-### Added
-
-- Add support for `aria`, `supports`, and `data` variants defined in JS config files ([#14407](https://github.com/tailwindlabs/tailwindcss/pull/14407))
-- Add `@tailwindcss/upgrade` tooling ([#14434](https://github.com/tailwindlabs/tailwindcss/pull/14434))
-- Support `screens` in JS config files ([#14415](https://github.com/tailwindlabs/tailwindcss/pull/14415))
-- Add `bg-radial-*` and `bg-conic-*` utilities for radial and conic gradients ([#14467](https://github.com/tailwindlabs/tailwindcss/pull/14467))
-- Add new `shadow-initial` and `inset-shadow-initial` utilities for resetting shadow colors ([#14468](https://github.com/tailwindlabs/tailwindcss/pull/14468))
-- Add `field-sizing-*` utilities ([#14469](https://github.com/tailwindlabs/tailwindcss/pull/14469))
-- Include gradient color properties in color transitions ([#14489](https://github.com/tailwindlabs/tailwindcss/pull/14489))
-- _Upgrade (experimental)_: Convert important syntax in `@apply` in CSS files ([#14411](https://github.com/tailwindlabs/tailwindcss/pull/14434))
-- _Upgrade (experimental)_: Convert `@tailwind` directives to `@import` rules in CSS files ([#14411](https://github.com/tailwindlabs/tailwindcss/pull/14411), [#14504](https://github.com/tailwindlabs/tailwindcss/pull/14504))
-- _Upgrade (experimental)_: Convert custom CSS in `@layer utilities` and `@layer components` to use `@utility` in CSS files ([#14455](https://github.com/tailwindlabs/tailwindcss/pull/14455))
-
-### Fixed
-
-- Support `borderRadius.*` as an alias for `--radius-*` when using dot notation inside the `theme()` function ([#14436](https://github.com/tailwindlabs/tailwindcss/pull/14436))
-- Ensure individual variants from groups are always sorted earlier than stacked variants from the same groups ([#14431](https://github.com/tailwindlabs/tailwindcss/pull/14431))
-- Allow `anchor-size(…)` in arbitrary values ([#14394](https://github.com/tailwindlabs/tailwindcss/pull/14394))
-- Skip candidates with invalid `theme()` calls ([#14437](https://github.com/tailwindlabs/tailwindcss/pull/14437))
-- Don't generate `inset-*` utilities for `--inset-shadow-*` and `--inset-ring-*` theme values ([#14447](https://github.com/tailwindlabs/tailwindcss/pull/14447))
-- Include `--default-transition-*` variables in `transition-*` utility output ([#14482](https://github.com/tailwindlabs/tailwindcss/pull/14482))
-- Ensure `rtl` and `ltr` variants work with `[dir=auto]` ([#14306](https://github.com/tailwindlabs/tailwindcss/pull/14306))
-
-### Changed
-
-- Preserve explicit `leading-*`, `tracking-*`, and `font-{weight}` value when overriding font-size ([#14403](https://github.com/tailwindlabs/tailwindcss/pull/14403))
-- Disallow negative bare values in core utilities and variants ([#14453](https://github.com/tailwindlabs/tailwindcss/pull/14453))
-- Preserve explicit shadow color when overriding shadow size ([#14458](https://github.com/tailwindlabs/tailwindcss/pull/14458))
-- Preserve explicit transition duration and timing function when overriding transition property ([#14490](https://github.com/tailwindlabs/tailwindcss/pull/14490))
-- Change the implementation for `@import` resolution to speed up initial builds ([#14446](https://github.com/tailwindlabs/tailwindcss/pull/14446))
-- Remove automatic `var(…)` injection ([#13657](https://github.com/tailwindlabs/tailwindcss/pull/13657))
-- Only apply `:hover` states on devices that support `@media (hover: hover)` ([#14500](https://github.com/tailwindlabs/tailwindcss/pull/14500))
-
-## [4.0.0-alpha.24] - 2024-09-11
-
-### Added
-
-- Support CSS `theme()` functions inside other `@custom-media`, `@container`, and `@supports` rules ([#14358](https://github.com/tailwindlabs/tailwindcss/pull/14358))
-- Export `Config` type from `tailwindcss` for JS config files ([#14360](https://github.com/tailwindlabs/tailwindcss/pull/14360))
-- Add support for `matchVariant` plugins using the `@plugin` directive ([#14371](https://github.com/tailwindlabs/tailwindcss/pull/14371))
-- Warn when the `tailwindcss` package is used as a PostCSS plugin ([#14378](https://github.com/tailwindlabs/tailwindcss/pull/14378))
-
-### Fixed
-
-- Ensure there is always CLI feedback on save even when no new classes were found ([#14351](https://github.com/tailwindlabs/tailwindcss/pull/14351))
-- Properly resolve `theme('someKey.DEFAULT')` when all `--some-key-*` keys have a suffix ([#14354](https://github.com/tailwindlabs/tailwindcss/pull/14354))
-- Make sure tuple theme values in JS configs take precedence over `@theme default` values ([#14359](https://github.com/tailwindlabs/tailwindcss/pull/14359))
-- Improve IntelliSense completions for `border` utilities ([#14370](https://github.com/tailwindlabs/tailwindcss/pull/14370))
-
-## [4.0.0-alpha.23] - 2024-09-05
-
-### Added
-
-- Add opacity modifier support to the `theme()` function in plugins ([#14348](https://github.com/tailwindlabs/tailwindcss/pull/14348))
-
-## [4.0.0-alpha.22] - 2024-09-04
-
-### Added
-
-- Support TypeScript for `@plugin` and `@config` files ([#14317](https://github.com/tailwindlabs/tailwindcss/pull/14317))
-- Add `default` option to `@theme` to support overriding default theme values from plugins/JS config files ([#14327](https://github.com/tailwindlabs/tailwindcss/pull/14327))
-- Add support for `<style>` tags in Astro files to the Vite plugin ([#14340](https://github.com/tailwindlabs/tailwindcss/pull/14340))
-
-### Fixed
-
-- Ensure content globs defined in `@config` files are relative to that file ([#14314](https://github.com/tailwindlabs/tailwindcss/pull/14314))
-- Ensure CSS `theme()` functions are evaluated in media query ranges with collapsed whitespace ([#14321](https://github.com/tailwindlabs/tailwindcss/pull/14321))
-- Fix support for Nuxt projects in the Vite plugin (requires Nuxt 3.13.1+) ([#14319](https://github.com/tailwindlabs/tailwindcss/pull/14319))
-- Evaluate theme functions in plugins and JS config files ([#14326](https://github.com/tailwindlabs/tailwindcss/pull/14326))
-- Ensure theme values overridden with `reference` values don't generate stale CSS variables ([#14327](https://github.com/tailwindlabs/tailwindcss/pull/14327))
-- Don’t suggest named opacity modifiers in IntelliSense ([#14339](https://github.com/tailwindlabs/tailwindcss/pull/14339))
-- Fix a crash with older Node.js versions ([#14342](https://github.com/tailwindlabs/tailwindcss/pull/14342))
-- Support defining theme values as arrays of strings in JS config files ([#14343](https://github.com/tailwindlabs/tailwindcss/pull/14343))
-- Ensure `--default-font-*` and `--default-mono-font-*` variables respect theme customizations in JS config files ([#14344](https://github.com/tailwindlabs/tailwindcss/pull/14344))
-
-## [4.0.0-alpha.21] - 2024-09-02
-
-### Added
-
-- Add new standalone builds of Tailwind CSS v4 ([#14270](https://github.com/tailwindlabs/tailwindcss/pull/14270))
-- Support JavaScript configuration files using `@config` ([#14239](https://github.com/tailwindlabs/tailwindcss/pull/14239))
-- Support plugin options in `@plugin` ([#14264](https://github.com/tailwindlabs/tailwindcss/pull/14264))
-- Add support for using the Vite extension with `css.transformer` set to `lightningcss` ([#14269](https://github.com/tailwindlabs/tailwindcss/pull/14269))
-
-### Fixed
-
-- Bring back type exports for the cjs build of `@tailwindcss/postcss` ([#14256](https://github.com/tailwindlabs/tailwindcss/pull/14256))
-- Correctly merge tuple values when using the plugin API ([#14260](https://github.com/tailwindlabs/tailwindcss/pull/14260))
-- Handle arrays in the CSS `theme()` function when using plugins ([#14262](https://github.com/tailwindlabs/tailwindcss/pull/14262))
-- Fix fallback values when using the CSS `theme()` function ([#14262](https://github.com/tailwindlabs/tailwindcss/pull/14262))
-- Fix support for declaration fallbacks in plugins ([#14265](https://github.com/tailwindlabs/tailwindcss/pull/14265))
-- Support bare values when using `tailwindcss/defaultTheme` ([#14257](https://github.com/tailwindlabs/tailwindcss/pull/14257))
-- Correctly update builds when using the Vite extension with `build --watch` ([#14269](https://github.com/tailwindlabs/tailwindcss/pull/14269))
-
-### Changed
-
-- Remove named opacity support for color opacity modifiers ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278))
-
-## [4.0.0-alpha.20] - 2024-08-23
-
-### Added
-
-- Add support for `addBase` plugins using the `@plugin` directive ([#14172](https://github.com/tailwindlabs/tailwindcss/pull/14172))
-- Add support for the `tailwindcss/plugin` export ([#14173](https://github.com/tailwindlabs/tailwindcss/pull/14173))
-- Add support for the `theme()` function in plugins ([#14207](https://github.com/tailwindlabs/tailwindcss/pull/14207))
-- Add support for `addComponents`, `matchComponents`, `prefix` plugin APIs ([#14221](https://github.com/tailwindlabs/tailwindcss/pull/14221))
-- Add support for `tailwindcss/colors` and `tailwindcss/defaultTheme` exports for use with plugins ([#14221](https://github.com/tailwindlabs/tailwindcss/pull/14221))
-- Add support for the `@tailwindcss/typography` and `@tailwindcss/forms` plugins ([#14221](https://github.com/tailwindlabs/tailwindcss/pull/14221))
-- Add support for the `theme()` function in CSS and class names ([#14177](https://github.com/tailwindlabs/tailwindcss/pull/14177))
-- Add support for matching multiple utility definitions for one candidate ([#14231](https://github.com/tailwindlabs/tailwindcss/pull/14231))
-
-### Fixed
-
-- Don't wrap relative selectors in arbitrary variants with `:is(…)` ([#14203](https://github.com/tailwindlabs/tailwindcss/pull/14203))
-
-## [4.0.0-alpha.19] - 2024-08-09
-
-### Added
-
-- Add support for `inline` option when defining `@theme` values ([#14095](https://github.com/tailwindlabs/tailwindcss/pull/14095))
-- Add `inert` variant ([#14129](https://github.com/tailwindlabs/tailwindcss/pull/14129))
-- Add support for explicitly registering content paths using new `@source` at-rule ([#14078](https://github.com/tailwindlabs/tailwindcss/pull/14078))
-- Add support for scanning `<style>` tags in Vue files to the Vite plugin ([#14158](https://github.com/tailwindlabs/tailwindcss/pull/14158))
-- Add support for basic `addUtilities` and `matchUtilities` plugins using the `@plugin` directive ([#14114](https://github.com/tailwindlabs/tailwindcss/pull/14114))
-
-### Fixed
-
-- Ensure `@apply` works inside `@utility` ([#14144](https://github.com/tailwindlabs/tailwindcss/pull/14144))
-
-## [4.0.0-alpha.18] - 2024-07-25
-
-### Added
-
-- Add support for basic `addVariant` plugins with new `@plugin` directive ([#13982](https://github.com/tailwindlabs/tailwindcss/pull/13982), [#14008](https://github.com/tailwindlabs/tailwindcss/pull/14008))
-- Add `@variant` at-rule for defining custom variants in CSS ([#13992](https://github.com/tailwindlabs/tailwindcss/pull/13992), [#14008](https://github.com/tailwindlabs/tailwindcss/pull/14008))
-- Add `@utility` at-rule for defining custom utilities in CSS ([#14044](https://github.com/tailwindlabs/tailwindcss/pull/14044))
-
-### Fixed
-
-- Discard invalid classes such as `bg-red-[#000]` ([#13970](https://github.com/tailwindlabs/tailwindcss/pull/13970))
-- Fix parsing body-less at-rule without terminating semicolon ([#13978](https://github.com/tailwindlabs/tailwindcss/pull/13978))
-- Ensure opacity modifier with variables work with `color-mix()` ([#13972](https://github.com/tailwindlabs/tailwindcss/pull/13972))
-- Discard invalid `variants` and `utilities` with modifiers ([#13977](https://github.com/tailwindlabs/tailwindcss/pull/13977))
-- Add missing utilities that exist in v3, such as `resize`, `fill-none`, `accent-none`, `drop-shadow-none`, and negative `hue-rotate` and `backdrop-hue-rotate` utilities ([#13971](https://github.com/tailwindlabs/tailwindcss/pull/13971))
-- Don’t allow at-rule-only variants to be compounded ([#14015](https://github.com/tailwindlabs/tailwindcss/pull/14015))
-- Ensure compound variants work with variants with multiple selectors ([#14016](https://github.com/tailwindlabs/tailwindcss/pull/14016))
-- Ensure attribute values in `data-*` and `aria-*` modifiers are always quoted in the generated CSS ([#14040](https://github.com/tailwindlabs/tailwindcss/pull/14037))
-
-### Changed
-
-- Reduce the specificity of the `*` variant so those styles can be overridden by child elements ([#14056](https://github.com/tailwindlabs/tailwindcss/pull/14056))
-
-## [4.0.0-alpha.17] - 2024-07-04
-
-### Added
-
-- Add `rounded-4xl` utility ([#13827](https://github.com/tailwindlabs/tailwindcss/pull/13827))
-- Add `backdrop-blur-none` and `blur-none` utilities ([#13831](https://github.com/tailwindlabs/tailwindcss/pull/13831))
-- Include variable in output for bare utilities like `rounded` ([#13836](https://github.com/tailwindlabs/tailwindcss/pull/13836))
-
-### Fixed
-
-- Support combining arbitrary shadows without a color with shadow color utilities ([#13876](https://github.com/tailwindlabs/tailwindcss/pull/13876))
-- Ensure `@property` fallbacks work correctly with properties with no `initial-value` ([#13949](https://github.com/tailwindlabs/tailwindcss/pull/13949))
-
-## [4.0.0-alpha.16] - 2024-06-07
-
-### Added
-
-- Add `nth-*` variants ([#13661](https://github.com/tailwindlabs/tailwindcss/pull/13661))
-- Add `bg-linear-*` utilities as an alias for the existing `bg-gradient-*` utilities ([#13783](https://github.com/tailwindlabs/tailwindcss/pull/13783))
-- Support arbitrary linear gradient angles (e.g. `bg-linear-[125deg]`) ([#13783](https://github.com/tailwindlabs/tailwindcss/pull/13783))
-
-### Fixed
-
-- Use `length` data type for `background-size` instead of `background-position` ([#13771](https://github.com/tailwindlabs/tailwindcss/pull/13771))
-- Support negative values for `{col,row}-{start,end}` utilities ([#13780](https://github.com/tailwindlabs/tailwindcss/pull/13780))
-- Use long form `<length> | <percentage>` syntax for properties ([#13660](https://github.com/tailwindlabs/tailwindcss/pull/13660))
-- Fix background position value of `bg-right-top`, `bg-right-bottom`, `bg-left-bottom` and `bg-left-top` ([#13806](https://github.com/tailwindlabs/tailwindcss/pull/13806))
-
-## [4.0.0-alpha.15] - 2024-05-08
-
-### Fixed
-
-- Make sure `contain-*` utility variables resolve to a valid value ([#13521](https://github.com/tailwindlabs/tailwindcss/pull/13521))
-- Support unbalanced parentheses and braces in quotes in arbitrary values and variants ([#13608](https://github.com/tailwindlabs/tailwindcss/pull/13608))
-- Add fallbacks for `@property` rules for Firefox ([#13655](https://github.com/tailwindlabs/tailwindcss/pull/13655))
-
-### Changed
-
-- Use `rem` units for breakpoints by default instead of `px` ([#13469](https://github.com/tailwindlabs/tailwindcss/pull/13469))
-- Use natural sorting when sorting classes ([#13507](https://github.com/tailwindlabs/tailwindcss/pull/13507), [#13532](https://github.com/tailwindlabs/tailwindcss/pull/13532))
-
-## [4.0.0-alpha.14] - 2024-04-09
-
-### Fixed
-
-- Ensure deterministic SSR builds in `@tailwindcss/vite` ([#13457](https://github.com/tailwindlabs/tailwindcss/pull/13457))
-
-### Changed
-
-- Apply variants from left to right instead of inside-out ([#13478](https://github.com/tailwindlabs/tailwindcss/pull/13478))
-- Don't special-case `[hidden]` elements in `space-*`/`divide-*` utilities ([#13459](https://github.com/tailwindlabs/tailwindcss/pull/13459))
-
-## [4.0.0-alpha.13] - 2024-04-04
-
-### Fixed
-
-- Always inline values for `shadow-*` utilities to ensure shadow colors work correctly ([#13449](https://github.com/tailwindlabs/tailwindcss/pull/13449))
-
-## [4.0.0-alpha.12] - 2024-04-04
-
-### Fixed
-
-- Enable Vite's `waitForRequestsIdle()` for client requests only ([#13394](https://github.com/tailwindlabs/tailwindcss/pull/13394))
-- Make sure `::first-letter` respects `::selection` styles ([#13408](https://github.com/tailwindlabs/tailwindcss/pull/13408))
-
-## [4.0.0-alpha.11] - 2024-03-27
-
-### Added
-
-- Make `rotate-x/y/z-*` utilities composable ([#13319](https://github.com/tailwindlabs/tailwindcss/pull/13319))
-- Apply Vite's CSS plugin transform to Tailwind-generated CSS in `@tailwindcss/vite` (e.g. inlining images) ([#13218](https://github.com/tailwindlabs/tailwindcss/pull/13218))
-- Add `starting` variant for `@starting-style` ([#13329](https://github.com/tailwindlabs/tailwindcss/pull/13329))
-- Target `:popover-open` in existing `open` variant ([#13331](https://github.com/tailwindlabs/tailwindcss/pull/13331))
-
-### Fixed
-
-- Remove percentage values for `translate-z` utilities ([#13321](https://github.com/tailwindlabs/tailwindcss/pull/13321), [#13327](https://github.com/tailwindlabs/tailwindcss/pull/13327))
-- Generate unique CSS bundle hashes in `@tailwindcss/vite` when Tailwind-generated CSS changes ([#13218](https://github.com/tailwindlabs/tailwindcss/pull/13218))
-- Inherit letter spacing in form controls ([#13328](https://github.com/tailwindlabs/tailwindcss/pull/13328))
-- Ensure `build` command is executed when using `--output` instead of `-o` ([#13369](https://github.com/tailwindlabs/tailwindcss/pull/13369))
-- Prevent `@tailwindcss/vite` from hanging in serve mode ([#13380](https://github.com/tailwindlabs/tailwindcss/pull/13380))
-
-## [4.0.0-alpha.10] - 2024-03-19
-
-### Added
-
-- Add `inherit` as a universal color ([#13258](https://github.com/tailwindlabs/tailwindcss/pull/13258))
-- Add 3D transform utilities ([#13248](https://github.com/tailwindlabs/tailwindcss/pull/13248), [#13288](https://github.com/tailwindlabs/tailwindcss/pull/13288))
-
-### Fixed
-
-- Validate bare values ([#13245](https://github.com/tailwindlabs/tailwindcss/pull/13245))
-- Parse candidates in `.svelte` files with `class:abc="condition"` syntax ([#13274](https://github.com/tailwindlabs/tailwindcss/pull/13274))
-
-### Changed
-
-- Inline `@import` rules in `tailwindcss/index.css` at publish time for better performance ([#13233](https://github.com/tailwindlabs/tailwindcss/pull/13233))
-- Include custom properties with fallbacks in utility class values ([#13177](https://github.com/tailwindlabs/tailwindcss/pull/13177))
-
-## [4.0.0-alpha.9] - 2024-03-13
-
-### Added
-
-- Support `@theme reference { … }` for defining theme values without emitting variables ([#13222](https://github.com/tailwindlabs/tailwindcss/pull/13222))
-
-### Fixed
-
-- Fix incorrect properties in line-clamp utilities ([#13220](https://github.com/tailwindlabs/tailwindcss/pull/13220))
-- Don't rely on existence of `--default-transition-*` variables in `transition-*` utilities ([#13219](https://github.com/tailwindlabs/tailwindcss/pull/13219))
-
-### Changed
-
-- Move `optimizeCss` to the packages where it's used ([#13230](https://github.com/tailwindlabs/tailwindcss/pull/13230))
+Nothing yet!
 
 ## [4.0.0-alpha.8] - 2024-03-11
 
@@ -1639,7 +70,7 @@ For a deep-dive into everything that's new, [check out the announcement post](ht
 
 ### Fixed
 
-- Node compatibility fix ([#13104](https://github.com/tailwindlabs/tailwindcss/pull/13104))
+- Node compatability fix ([#13104](https://github.com/tailwindlabs/tailwindcss/pull/13104))
 
 ### Changes
 
@@ -1652,2781 +83,3 @@ For a deep-dive into everything that's new, [check out the announcement post](ht
 - Move the CLI into a separate `@tailwindcss/cli` package ([#13095](https://github.com/tailwindlabs/tailwindcss/pull/13095))
 
 ## [4.0.0-alpha.1] - 2024-03-06
-
-- First 4.0.0-alpha.1 release
-
-## [3.4.17] - 2024-12-17
-
-### Fixed
-
-- Work around Node v22.12+ issue ([#15421](https://github.com/tailwindlabs/tailwindcss/pull/15421))
-
-## [3.4.16] - 2024-12-03
-
-### Fixed
-
-- Ensure the TypeScript types for `PluginsConfig` allow `undefined` values ([#14668](https://github.com/tailwindlabs/tailwindcss/pull/14668))
-
-# Changed
-
-- Bumped lilconfig to v3.x ([#15289](https://github.com/tailwindlabs/tailwindcss/pull/15289))
-
-## [3.4.15] - 2024-11-14
-
-- Bump versions for security vulnerabilities ([#14697](https://github.com/tailwindlabs/tailwindcss/pull/14697))
-- Ensure the TypeScript types for the `boxShadow` theme configuration allows arrays ([#14856](https://github.com/tailwindlabs/tailwindcss/pull/14856))
-- Set fallback for opacity variables to ensure setting colors with the `selection:*` variant works in Chrome 131 ([#15003](https://github.com/tailwindlabs/tailwindcss/pull/15003))
-
-## [3.4.14] - 2024-10-15
-
-### Fixed
-
-- Don't set `display: none` on elements that use `hidden="until-found"` ([#14625](https://github.com/tailwindlabs/tailwindcss/pull/14625))
-
-## [3.4.13] - 2024-09-23
-
-### Fixed
-
-- Improve source glob verification performance ([#14481](https://github.com/tailwindlabs/tailwindcss/pull/14481))
-
-## [3.4.12] - 2024-09-17
-
-### Fixed
-
-- Ensure using `@apply` with utilities that use `@defaults` works with rules defined in the base layer when using `optimizeUniversalDefaults` ([#14427](https://github.com/tailwindlabs/tailwindcss/pull/14427))
-
-## [3.4.11] - 2024-09-11
-
-### Fixed
-
-- Allow `anchor-size(…)` in arbitrary values ([#14393](https://github.com/tailwindlabs/tailwindcss/pull/14393))
-
-## [3.4.10] - 2024-08-13
-
-### Fixed
-
-- Bump versions of plugins in the Standalone CLI ([#14185](https://github.com/tailwindlabs/tailwindcss/pull/14185))
-
-## [3.4.9] - 2024-08-08
-
-### Fixed
-
-- No longer warns when broad glob patterns are detecting `vendor` folders
-
-## [3.4.8] - 2024-08-07
-
-### Fixed
-
-- Fix minification when using nested CSS ([#14105](https://github.com/tailwindlabs/tailwindcss/pull/14105))
-- Warn when broad glob patterns are used in the content configuration ([#14140](https://github.com/tailwindlabs/tailwindcss/pull/14140))
-
-## [3.4.7] - 2024-07-25
-
-### Fixed
-
-- Fix class detection in Slim templates with attached attributes and ID ([#14019](https://github.com/tailwindlabs/tailwindcss/pull/14019))
-- Ensure attribute values in `data-*` and `aria-*` modifiers are always quoted in the generated CSS ([#14037](https://github.com/tailwindlabs/tailwindcss/pull/14037))
-
-## [3.4.6] - 2024-07-16
-
-### Fixed
-
-- Fix detection of some utilities in Slim/Pug templates ([#14006](https://github.com/tailwindlabs/tailwindcss/pull/14006))
-
-### Changed
-
-- Loosen `:is()` wrapping rules when using an important selector ([#13900](https://github.com/tailwindlabs/tailwindcss/pull/13900))
-
-## [3.4.5] - 2024-07-15
-
-### Fixed
-
-- Disable automatic `var()` injection for anchor properties ([#13826](https://github.com/tailwindlabs/tailwindcss/pull/13826))
-- Use no value instead of `blur(0px)` for `backdrop-blur-none` and `blur-none` utilities ([#13830](https://github.com/tailwindlabs/tailwindcss/pull/13830))
-- Add `.mts` and `.cts` config file detection ([#13940](https://github.com/tailwindlabs/tailwindcss/pull/13940))
-- Don't generate utilities like `px-1` unnecessarily when using utilities like `px-1.5` ([#13959](https://github.com/tailwindlabs/tailwindcss/pull/13959))
-- Always generate `-webkit-backdrop-filter` for `backdrop-*` utilities ([#13997](https://github.com/tailwindlabs/tailwindcss/pull/13997))
-
-## [3.4.4] - 2024-06-05
-
-### Fixed
-
-- Make it possible to use multiple `<alpha-value>` placeholders in a single color definition ([#13740](https://github.com/tailwindlabs/tailwindcss/pull/13740))
-- Don't prefix classes in arbitrary values of `has-*`, `group-has-*`, and `peer-has-*` variants ([#13770](https://github.com/tailwindlabs/tailwindcss/pull/13770))
-- Support negative values for `{col,row}-{start,end}` utilities ([#13781](https://github.com/tailwindlabs/tailwindcss/pull/13781))
-- Update embedded browserslist database ([#13792](https://github.com/tailwindlabs/tailwindcss/pull/13792))
-
-## [3.4.3] - 2024-03-27
-
-### Fixed
-
-- Revert changes to glob handling ([#13384](https://github.com/tailwindlabs/tailwindcss/pull/13384))
-
-## [3.4.2] - 2024-03-27
-
-### Fixed
-
-- Ensure max specificity of `0,0,1` for button and input Preflight rules ([#12735](https://github.com/tailwindlabs/tailwindcss/pull/12735))
-- Improve glob handling for folders with `(`, `)`, `[` or `]` in the file path ([#12715](https://github.com/tailwindlabs/tailwindcss/pull/12715))
-- Split `:has` rules when using `experimental.optimizeUniversalDefaults` ([#12736](https://github.com/tailwindlabs/tailwindcss/pull/12736))
-- Sort arbitrary properties alphabetically across multiple class lists ([#12911](https://github.com/tailwindlabs/tailwindcss/pull/12911))
-- Add `mix-blend-plus-darker` utility ([#12923](https://github.com/tailwindlabs/tailwindcss/pull/12923))
-- Ensure dashes are allowed in variant modifiers ([#13303](https://github.com/tailwindlabs/tailwindcss/pull/13303))
-- Fix crash showing completions in Intellisense when using a custom separator ([#13306](https://github.com/tailwindlabs/tailwindcss/pull/13306))
-- Transpile `import.meta.url` in config files ([#13322](https://github.com/tailwindlabs/tailwindcss/pull/13322))
-- Reset letter spacing for form elements ([#13150](https://github.com/tailwindlabs/tailwindcss/pull/13150))
-- Fix missing `xx-large` and remove double `x-large` absolute size ([#13324](https://github.com/tailwindlabs/tailwindcss/pull/13324))
-- Don't error when encountering nested CSS unless trying to `@apply` a class that uses nesting ([#13325](https://github.com/tailwindlabs/tailwindcss/pull/13325))
-- Ensure that arbitrary properties respect `important` configuration ([#13353](https://github.com/tailwindlabs/tailwindcss/pull/13353))
-- Change dark mode selector so `@apply` works correctly with pseudo elements ([#13379](https://github.com/tailwindlabs/tailwindcss/pull/13379))
-
-## [3.4.1] - 2024-01-05
-
-### Fixed
-
-- Don't remove keyframe stops when using important utilities ([#12639](https://github.com/tailwindlabs/tailwindcss/pull/12639))
-- Don't add spaces to gradients and grid track names when followed by `calc()` ([#12704](https://github.com/tailwindlabs/tailwindcss/pull/12704))
-- Restore old behavior for `class` dark mode strategy ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
-- Improve glob handling for folders with `(`, `)`, `[` or `]` in the file path ([#12715](https://github.com/tailwindlabs/tailwindcss/pull/12715))
-
-### Added
-
-- Add new `selector` and `variant` strategies for dark mode ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
-
-### Changed
-
-- Support `rtl` and `ltr` variants on same element as `dir` attribute ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
-
-## [3.4.0] - 2023-12-19
-
-### Added
-
-- Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317))
-- Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318))
-- Add `text-wrap` utilities including `text-balance` and `text-pretty` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320), [#12031](https://github.com/tailwindlabs/tailwindcss/pull/12031))
-- Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832))
-- Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200))
-- Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180))
-- Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287))
-- Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298))
-- Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300))
-- Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931))
-- Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694), [#12582](https://github.com/tailwindlabs/tailwindcss/pull/12582))
-- Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404))
-- Add logical property values for `float` and `clear` utilities ([#12480](https://github.com/tailwindlabs/tailwindcss/pull/12480))
-- Add `*` variant for targeting direct children ([#12551](https://github.com/tailwindlabs/tailwindcss/pull/12551))
-
-### Changed
-
-- Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748))
-- Disable the tap highlight overlay on iOS ([#12299](https://github.com/tailwindlabs/tailwindcss/pull/12299))
-- Improve relative precedence of `rtl`, `ltr`, `forced-colors`, and `dark` variants ([#12584](https://github.com/tailwindlabs/tailwindcss/pull/12584))
-
-## [3.3.7] - 2023-12-18
-
-### Fixed
-
-- Fix support for container query utilities with arbitrary values ([#12534](https://github.com/tailwindlabs/tailwindcss/pull/12534))
-- Fix custom config loading in Standalone CLI ([#12616](https://github.com/tailwindlabs/tailwindcss/pull/12616))
-
-## [3.3.6] - 2023-12-04
-
-### Fixed
-
-- Don’t add spaces to negative numbers following a comma ([#12324](https://github.com/tailwindlabs/tailwindcss/pull/12324))
-- Don't emit `@config` in CSS when watching via the CLI ([#12327](https://github.com/tailwindlabs/tailwindcss/pull/12327))
-- Improve types for `resolveConfig` ([#12272](https://github.com/tailwindlabs/tailwindcss/pull/12272))
-- Ensure configured `font-feature-settings` for `mono` are included in Preflight ([#12342](https://github.com/tailwindlabs/tailwindcss/pull/12342))
-- Improve candidate detection in minified JS arrays (without spaces) ([#12396](https://github.com/tailwindlabs/tailwindcss/pull/12396))
-- Don't crash when given applying a variant to a negated version of a simple utility ([#12514](https://github.com/tailwindlabs/tailwindcss/pull/12514))
-- Fix support for slashes in arbitrary modifiers ([#12515](https://github.com/tailwindlabs/tailwindcss/pull/12515))
-- Fix source maps of variant utilities that come from an `@layer` rule ([#12508](https://github.com/tailwindlabs/tailwindcss/pull/12508))
-- Fix loading of built-in plugins when using an ESM or TypeScript config with the Standalone CLI ([#12506](https://github.com/tailwindlabs/tailwindcss/pull/12506))
-
-## [3.3.5] - 2023-10-25
-
-### Fixed
-
-- Fix incorrect spaces around `-` in `calc()` expression ([#12283](https://github.com/tailwindlabs/tailwindcss/pull/12283))
-
-## [3.3.4] - 2023-10-24
-
-### Fixed
-
-- Improve normalisation of `calc()`-like functions ([#11686](https://github.com/tailwindlabs/tailwindcss/pull/11686))
-- Skip `calc()` normalisation in nested `theme()` calls ([#11705](https://github.com/tailwindlabs/tailwindcss/pull/11705))
-- Fix incorrectly generated CSS when using square brackets inside arbitrary properties ([#11709](https://github.com/tailwindlabs/tailwindcss/pull/11709))
-- Make `content` optional for presets in TypeScript types ([#11730](https://github.com/tailwindlabs/tailwindcss/pull/11730))
-- Handle variable colors that have variable fallback values ([#12049](https://github.com/tailwindlabs/tailwindcss/pull/12049))
-- Batch reading content files to prevent `too many open files` error ([#12079](https://github.com/tailwindlabs/tailwindcss/pull/12079))
-- Skip over classes inside `:not(…)` when nested in an at-rule ([#12105](https://github.com/tailwindlabs/tailwindcss/pull/12105))
-- Update types to work with `Node16` module resolution ([#12097](https://github.com/tailwindlabs/tailwindcss/pull/12097))
-- Don’t crash when important and parent selectors are equal in `@apply` ([#12112](https://github.com/tailwindlabs/tailwindcss/pull/12112))
-- Eliminate irrelevant rules when applying variants ([#12113](https://github.com/tailwindlabs/tailwindcss/pull/12113))
-- Improve RegEx parser, reduce possibilities as the key for arbitrary properties ([#12121](https://github.com/tailwindlabs/tailwindcss/pull/12121))
-- Fix sorting of utilities that share multiple candidates ([#12173](https://github.com/tailwindlabs/tailwindcss/pull/12173))
-- Ensure variants with arbitrary values and a modifier are correctly matched in the RegEx based parser ([#12179](https://github.com/tailwindlabs/tailwindcss/pull/12179))
-- Fix crash when watching renamed files on FreeBSD ([#12193](https://github.com/tailwindlabs/tailwindcss/pull/12193))
-- Allow plugins from a parent document to be used in an iframe ([#12208](https://github.com/tailwindlabs/tailwindcss/pull/12208))
-- Add types for `tailwindcss/nesting` ([#12269](https://github.com/tailwindlabs/tailwindcss/pull/12269))
-- Bump `jiti`, `fast-glob`, and `browserlist` dependencies ([#11550](https://github.com/tailwindlabs/tailwindcss/pull/11550))
-- Improve automatic `var` injection for properties that accept a `<dashed-ident>` ([#12236](https://github.com/tailwindlabs/tailwindcss/pull/12236))
-
-## [3.3.3] - 2023-07-13
-
-### Fixed
-
-- Fix issue where some pseudo-element variants generated the wrong selector ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962), [#11111](https://github.com/tailwindlabs/tailwindcss/pull/11111))
-- Make font settings propagate into buttons, inputs, etc. ([#10940](https://github.com/tailwindlabs/tailwindcss/pull/10940))
-- Fix parsing of `theme()` inside `calc()` when there are no spaces around operators ([#11157](https://github.com/tailwindlabs/tailwindcss/pull/11157))
-- Ensure `repeating-conic-gradient` is detected as an image ([#11180](https://github.com/tailwindlabs/tailwindcss/pull/11180))
-- Move unknown pseudo-elements outside of `:is` by default ([#11345](https://github.com/tailwindlabs/tailwindcss/pull/11345))
-- Escape animation names when prefixes contain special characters ([#11470](https://github.com/tailwindlabs/tailwindcss/pull/11470))
-- Don't prefix arbitrary classes in `group` and `peer` variants ([#11454](https://github.com/tailwindlabs/tailwindcss/pull/11454))
-- Sort classes using position of first matching rule ([#11504](https://github.com/tailwindlabs/tailwindcss/pull/11504))
-- Allow variant to be an at-rule without a prelude ([#11589](https://github.com/tailwindlabs/tailwindcss/pull/11589))
-- Make PostCSS plugin async to improve performance ([#11548](https://github.com/tailwindlabs/tailwindcss/pull/11548))
-- Don’t error when a config file is missing ([f97759f](https://github.com/tailwindlabs/tailwindcss/commit/f97759f808d15ace66647b1405744fcf95a392e5))
-
-### Added
-
-- Add `aria-busy` utility ([#10966](https://github.com/tailwindlabs/tailwindcss/pull/10966))
-
-### Changed
-
-- Reset padding for `<dialog>` elements in preflight ([#11069](https://github.com/tailwindlabs/tailwindcss/pull/11069))
-
-## [3.3.2] - 2023-04-25
-
-### Fixed
-
-- Don’t move unknown pseudo-elements to the end of selectors ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962))
-- Inherit gradient stop positions when using variants ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
-- Honor default `to` position of gradient when using implicit transparent colors ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
-- Ensure `@tailwindcss/oxide` doesn't leak in the stable engine ([#10988](https://github.com/tailwindlabs/tailwindcss/pull/10988))
-- Ensure multiple `theme(spacing[5])` calls with bracket notation in arbitrary properties work ([#11039](https://github.com/tailwindlabs/tailwindcss/pull/11039))
-- Normalize arbitrary modifiers ([#11057](https://github.com/tailwindlabs/tailwindcss/pull/11057))
-
-### Changed
-
-- Drop support for Node.js v12 ([#11089](https://github.com/tailwindlabs/tailwindcss/pull/11089))
-
-## [3.3.1] - 2023-03-30
-
-### Fixed
-
-- Fix edge case bug when loading a TypeScript config file with webpack ([#10898](https://github.com/tailwindlabs/tailwindcss/pull/10898))
-- Fix variant, `@apply`, and `important` selectors when using `:is()` or `:has()` with pseudo-elements ([#10903](https://github.com/tailwindlabs/tailwindcss/pull/10903))
-- Fix `safelist` config types ([#10901](https://github.com/tailwindlabs/tailwindcss/pull/10901))
-- Fix build errors caused by `@tailwindcss/line-clamp` warning ([#10915](https://github.com/tailwindlabs/tailwindcss/pull/10915), [#10919](https://github.com/tailwindlabs/tailwindcss/pull/10919))
-- Fix "process is not defined" error ([#10919](https://github.com/tailwindlabs/tailwindcss/pull/10919))
-
-## [3.3.0] - 2023-03-27
-
-### Added
-
-- Support ESM and TypeScript config files ([#10785](https://github.com/tailwindlabs/tailwindcss/pull/10785))
-- Extend default color palette with new 950 shades ([#10879](https://github.com/tailwindlabs/tailwindcss/pull/10879))
-- Add `line-height` modifier support to `font-size` utilities ([#9875](https://github.com/tailwindlabs/tailwindcss/pull/9875))
-- Add support for using variables as arbitrary values without `var(...)` ([#9880](https://github.com/tailwindlabs/tailwindcss/pull/9880), [#9962](https://github.com/tailwindlabs/tailwindcss/pull/9962))
-- Add logical properties support for inline direction ([#10166](https://github.com/tailwindlabs/tailwindcss/pull/10166))
-- Add `hyphens` utilities ([#10071](https://github.com/tailwindlabs/tailwindcss/pull/10071))
-- Add `from-{position}`, `via-{position}` and `to-{position}` utilities ([#10886](https://github.com/tailwindlabs/tailwindcss/pull/10886))
-- Add `list-style-image` utilities ([#10817](https://github.com/tailwindlabs/tailwindcss/pull/10817))
-- Add `caption-side` utilities ([#10470](https://github.com/tailwindlabs/tailwindcss/pull/10470))
-- Add `line-clamp` utilities from `@tailwindcss/line-clamp` to core ([#10768](https://github.com/tailwindlabs/tailwindcss/pull/10768), [#10876](https://github.com/tailwindlabs/tailwindcss/pull/10876), [#10862](https://github.com/tailwindlabs/tailwindcss/pull/10862))
-- Add `delay-0` and `duration-0` utilities ([#10294](https://github.com/tailwindlabs/tailwindcss/pull/10294))
-- Add `justify-normal` and `justify-stretch` utilities ([#10560](https://github.com/tailwindlabs/tailwindcss/pull/10560))
-- Add `content-normal` and `content-stretch` utilities ([#10645](https://github.com/tailwindlabs/tailwindcss/pull/10645))
-- Add `whitespace-break-spaces` utility ([#10729](https://github.com/tailwindlabs/tailwindcss/pull/10729))
-- Add support for configuring default `font-variation-settings` for a `font-family` ([#10034](https://github.com/tailwindlabs/tailwindcss/pull/10034), [#10515](https://github.com/tailwindlabs/tailwindcss/pull/10515))
-
-### Fixed
-
-- Disallow using multiple selectors in arbitrary variants ([#10655](https://github.com/tailwindlabs/tailwindcss/pull/10655))
-- Sort class lists deterministically for Prettier plugin ([#10672](https://github.com/tailwindlabs/tailwindcss/pull/10672))
-- Ensure CLI builds have a non-zero exit code on failure ([#10703](https://github.com/tailwindlabs/tailwindcss/pull/10703))
-- Ensure module dependencies for value `null`, is an empty `Set` ([#10877](https://github.com/tailwindlabs/tailwindcss/pull/10877))
-- Fix format assumption when resolving module dependencies ([#10878](https://github.com/tailwindlabs/tailwindcss/pull/10878))
-
-### Changed
-
-- Mark `rtl` and `ltr` variants as stable and remove warnings ([#10764](https://github.com/tailwindlabs/tailwindcss/pull/10764))
-- Use `inset` instead of `top`, `right`, `bottom`, and `left` properties ([#10765](https://github.com/tailwindlabs/tailwindcss/pull/10765))
-- Make `dark` and `rtl`/`ltr` variants insensitive to DOM order ([#10766](https://github.com/tailwindlabs/tailwindcss/pull/10766))
-- Use `:is` to make important selector option insensitive to DOM order ([#10835](https://github.com/tailwindlabs/tailwindcss/pull/10835))
-
-## [3.2.7] - 2023-02-16
-
-### Fixed
-
-- Fix use of `:where(.btn)` when matching `!btn` ([#10601](https://github.com/tailwindlabs/tailwindcss/pull/10601))
-- Revert including `outline-color` in `transition` and `transition-colors` by default ([#10604](https://github.com/tailwindlabs/tailwindcss/pull/10604))
-
-## [3.2.6] - 2023-02-08
-
-### Fixed
-
-- Fix installation failing with yarn and pnpm by dropping `oxide-api-shim` ([add1636](https://github.com/tailwindlabs/tailwindcss/commit/add16364b4b1100e1af23ad1ca6900a0b53cbba0))
-
-## [3.2.5] - 2023-02-08
-
-### Added
-
-- Add standalone CLI build for 64-bit Windows on ARM (`node16-win-arm64`) ([#10001](https://github.com/tailwindlabs/tailwindcss/pull/10001))
-
-### Fixed
-
-- Cleanup unused `variantOrder` ([#9829](https://github.com/tailwindlabs/tailwindcss/pull/9829))
-- Fix `foo-[abc]/[def]` not being handled correctly ([#9866](https://github.com/tailwindlabs/tailwindcss/pull/9866))
-- Add container queries plugin to standalone CLI ([#9865](https://github.com/tailwindlabs/tailwindcss/pull/9865))
-- Support renaming of output files by PostCSS plugins in CLI ([#9944](https://github.com/tailwindlabs/tailwindcss/pull/9944))
-- Improve return value of `resolveConfig`, unwrap `ResolvableTo` ([#9972](https://github.com/tailwindlabs/tailwindcss/pull/9972))
-- Clip unbalanced brackets in arbitrary values ([#9973](https://github.com/tailwindlabs/tailwindcss/pull/9973))
-- Don’t reorder webkit scrollbar pseudo elements ([#9991](https://github.com/tailwindlabs/tailwindcss/pull/9991))
-- Deterministic sorting of arbitrary variants ([#10016](https://github.com/tailwindlabs/tailwindcss/pull/10016))
-- Add `data` key to theme types ([#10023](https://github.com/tailwindlabs/tailwindcss/pull/10023))
-- Prevent invalid arbitrary variant selectors from failing the build ([#10059](https://github.com/tailwindlabs/tailwindcss/pull/10059))
-- Properly handle subtraction followed by a variable ([#10074](https://github.com/tailwindlabs/tailwindcss/pull/10074))
-- Fix missing `string[]` in the `theme.dropShadow` types ([#10072](https://github.com/tailwindlabs/tailwindcss/pull/10072))
-- Update list of length units ([#10100](https://github.com/tailwindlabs/tailwindcss/pull/10100))
-- Fix not matching arbitrary properties when closely followed by square brackets ([#10212](https://github.com/tailwindlabs/tailwindcss/pull/10212))
-- Allow direct nesting in `root` or `@layer` nodes ([#10229](https://github.com/tailwindlabs/tailwindcss/pull/10229))
-- Don't prefix classes in arbitrary variants ([#10214](https://github.com/tailwindlabs/tailwindcss/pull/10214))
-- Fix perf regression when checking for changed content ([#10234](https://github.com/tailwindlabs/tailwindcss/pull/10234))
-- Fix missing `blocklist` member in the `Config` type ([#10239](https://github.com/tailwindlabs/tailwindcss/pull/10239))
-- Escape group names in selectors ([#10276](https://github.com/tailwindlabs/tailwindcss/pull/10276))
-- Consider earlier variants before sorting functions ([#10288](https://github.com/tailwindlabs/tailwindcss/pull/10288))
-- Allow variants with slashes ([#10336](https://github.com/tailwindlabs/tailwindcss/pull/10336))
-- Ensure generated CSS is always sorted in the same order for a given set of templates ([#10382](https://github.com/tailwindlabs/tailwindcss/pull/10382))
-- Handle variants when the same class appears multiple times in a selector ([#10397](https://github.com/tailwindlabs/tailwindcss/pull/10397))
-- Handle group/peer variants with quoted strings ([#10400](https://github.com/tailwindlabs/tailwindcss/pull/10400))
-- Parse alpha value from rgba/hsla colors when using variables ([#10429](https://github.com/tailwindlabs/tailwindcss/pull/10429))
-- Sort by `layer` inside `variants` layer ([#10505](https://github.com/tailwindlabs/tailwindcss/pull/10505))
-- Add `--watch=always` option to prevent exit when stdin closes ([#9966](https://github.com/tailwindlabs/tailwindcss/pull/9966))
-
-### Changed
-
-- Alphabetize `theme` keys in default config ([#9953](https://github.com/tailwindlabs/tailwindcss/pull/9953))
-- Update esbuild to v17 ([#10368](https://github.com/tailwindlabs/tailwindcss/pull/10368))
-- Include `outline-color` in `transition` and `transition-colors` utilities ([#10385](https://github.com/tailwindlabs/tailwindcss/pull/10385))
-
-## [3.2.4] - 2022-11-11
-
-### Added
-
-- Add `blocklist` option to prevent generating unwanted CSS ([#9812](https://github.com/tailwindlabs/tailwindcss/pull/9812))
-
-### Fixed
-
-- Fix watching of files on Linux when renames are involved ([#9796](https://github.com/tailwindlabs/tailwindcss/pull/9796))
-- Make sure errors are always displayed when watching for changes ([#9810](https://github.com/tailwindlabs/tailwindcss/pull/9810))
-
-## [3.2.3] - 2022-11-09
-
-### Fixed
-
-- Fixed use of `raw` content in the CLI ([#9773](https://github.com/tailwindlabs/tailwindcss/pull/9773))
-- Pick up changes from files that are both context and content deps ([#9787](https://github.com/tailwindlabs/tailwindcss/pull/9787))
-- Sort pseudo-elements ONLY after classes when using variants and `@apply` ([#9765](https://github.com/tailwindlabs/tailwindcss/pull/9765))
-- Support important utilities in the safelist (pattern must include a `!`) ([#9791](https://github.com/tailwindlabs/tailwindcss/pull/9791))
-
-## [3.2.2] - 2022-11-04
-
-### Fixed
-
-- Escape special characters in resolved content base paths ([#9650](https://github.com/tailwindlabs/tailwindcss/pull/9650))
-- Don't reuse container for array returning variant functions ([#9644](https://github.com/tailwindlabs/tailwindcss/pull/9644))
-- Exclude non-relevant selectors when generating rules with the important modifier ([#9677](https://github.com/tailwindlabs/tailwindcss/issues/9677))
-- Fix merging of arrays during config resolution ([#9706](https://github.com/tailwindlabs/tailwindcss/issues/9706))
-- Ensure configured `font-feature-settings` are included in Preflight ([#9707](https://github.com/tailwindlabs/tailwindcss/pull/9707))
-- Fix fractional values not being parsed properly inside arbitrary properties ([#9705](https://github.com/tailwindlabs/tailwindcss/pull/9705))
-- Fix incorrect selectors when using `@apply` in selectors with combinators and pseudos ([#9722](https://github.com/tailwindlabs/tailwindcss/pull/9722))
-- Fix cannot read properties of undefined (reading 'modifier') ([#9656](https://github.com/tailwindlabs/tailwindcss/pull/9656), [aa979d6](https://github.com/tailwindlabs/tailwindcss/commit/aa979d645f8bf4108c5fc938d7c0ba085b654c31))
-
-## [3.2.1] - 2022-10-21
-
-### Fixed
-
-- Fix missing `supports` in types ([#9616](https://github.com/tailwindlabs/tailwindcss/pull/9616))
-- Fix missing PostCSS dependencies in the CLI ([#9617](https://github.com/tailwindlabs/tailwindcss/pull/9617))
-- Ensure `micromatch` is a proper CLI dependency ([#9620](https://github.com/tailwindlabs/tailwindcss/pull/9620))
-- Ensure modifier values exist when using a `modifiers` object for `matchVariant` ([ba6551d](https://github.com/tailwindlabs/tailwindcss/commit/ba6551db0f2726461371b4f3c6cd4c7090888504))
-
-## [3.2.0] - 2022-10-19
-
-### Added
-
-- Add new `@config` directive ([#9405](https://github.com/tailwindlabs/tailwindcss/pull/9405))
-- Add new `relative: true` option to resolve content paths relative to the config file ([#9396](https://github.com/tailwindlabs/tailwindcss/pull/9396))
-- Add new `supports-*` variant ([#9453](https://github.com/tailwindlabs/tailwindcss/pull/9453))
-- Add new `min-*` and `max-*` variants ([#9558](https://github.com/tailwindlabs/tailwindcss/pull/9558))
-- Add new `aria-*` variants ([#9557](https://github.com/tailwindlabs/tailwindcss/pull/9557), [#9588](https://github.com/tailwindlabs/tailwindcss/pull/9588))
-- Add new `data-*` variants ([#9559](https://github.com/tailwindlabs/tailwindcss/pull/9559), [#9588](https://github.com/tailwindlabs/tailwindcss/pull/9588))
-- Add new `break-keep` utility for `word-break: keep-all` ([#9393](https://github.com/tailwindlabs/tailwindcss/pull/9393))
-- Add new `collapse` utility for `visibility: collapse` ([#9181](https://github.com/tailwindlabs/tailwindcss/pull/9181))
-- Add new `fill-none` utility for `fill: none` ([#9403](https://github.com/tailwindlabs/tailwindcss/pull/9403))
-- Add new `stroke-none` utility for `stroke: none` ([#9403](https://github.com/tailwindlabs/tailwindcss/pull/9403))
-- Add new `place-content-baseline` utility for `place-content: baseline` ([#9498](https://github.com/tailwindlabs/tailwindcss/pull/9498))
-- Add new `place-items-baseline` utility for `place-items: baseline` ([#9507](https://github.com/tailwindlabs/tailwindcss/pull/9507))
-- Add new `content-baseline` utility for `align-content: baseline` ([#9507](https://github.com/tailwindlabs/tailwindcss/pull/9507))
-- Add support for configuring default `font-feature-settings` for a font family ([#9039](https://github.com/tailwindlabs/tailwindcss/pull/9039))
-- Add standalone CLI build for 32-bit Linux on ARM (`node16-linux-armv7`) ([#9084](https://github.com/tailwindlabs/tailwindcss/pull/9084))
-- Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
-- Add negative value support for `outline-offset` ([#9136](https://github.com/tailwindlabs/tailwindcss/pull/9136))
-- Add support for modifiers to `matchUtilities` ([#9541](https://github.com/tailwindlabs/tailwindcss/pull/9541))
-- Allow negating utilities using `min`/`max`/`clamp` ([#9237](https://github.com/tailwindlabs/tailwindcss/pull/9237))
-- Implement fallback plugins when there is ambiguity between plugins when using arbitrary values ([#9376](https://github.com/tailwindlabs/tailwindcss/pull/9376))
-- Support `sort` function in `matchVariant` ([#9423](https://github.com/tailwindlabs/tailwindcss/pull/9423))
-- Upgrade to `postcss-nested` v6.0 ([#9546](https://github.com/tailwindlabs/tailwindcss/pull/9546))
-
-### Fixed
-
-- Use absolute paths when resolving changed files for resilience against working directory changes ([#9032](https://github.com/tailwindlabs/tailwindcss/pull/9032))
-- Fix ring color utility generation when using `respectDefaultRingColorOpacity` ([#9070](https://github.com/tailwindlabs/tailwindcss/pull/9070))
-- Sort tags before classes when `@apply`-ing a selector with joined classes ([#9107](https://github.com/tailwindlabs/tailwindcss/pull/9107))
-- Remove invalid `outline-hidden` utility ([#9147](https://github.com/tailwindlabs/tailwindcss/pull/9147))
-- Honor the `hidden` attribute on elements in preflight ([#9174](https://github.com/tailwindlabs/tailwindcss/pull/9174))
-- Don't stop watching atomically renamed files ([#9173](https://github.com/tailwindlabs/tailwindcss/pull/9173), [#9215](https://github.com/tailwindlabs/tailwindcss/pull/9215))
-- Fix duplicate utilities issue causing memory leaks ([#9208](https://github.com/tailwindlabs/tailwindcss/pull/9208))
-- Fix `fontFamily` config TypeScript types ([#9214](https://github.com/tailwindlabs/tailwindcss/pull/9214))
-- Handle variants on complex selector utilities ([#9262](https://github.com/tailwindlabs/tailwindcss/pull/9262))
-- Fix shared config mutation issue ([#9294](https://github.com/tailwindlabs/tailwindcss/pull/9294))
-- Fix ordering of parallel variants ([#9282](https://github.com/tailwindlabs/tailwindcss/pull/9282))
-- Handle variants in utility selectors using `:where()` and `:has()` ([#9309](https://github.com/tailwindlabs/tailwindcss/pull/9309))
-- Improve data type analysis for arbitrary values ([#9320](https://github.com/tailwindlabs/tailwindcss/pull/9320))
-- Don't emit generated utilities with invalid uses of theme functions ([#9319](https://github.com/tailwindlabs/tailwindcss/pull/9319))
-- Revert change that only listened for stdin close on TTYs ([#9331](https://github.com/tailwindlabs/tailwindcss/pull/9331))
-- Ignore unset values (like `null` or `undefined`) when resolving the classList for intellisense ([#9385](https://github.com/tailwindlabs/tailwindcss/pull/9385))
-- Improve type checking for formal syntax ([#9349](https://github.com/tailwindlabs/tailwindcss/pull/9349), [#9448](https://github.com/tailwindlabs/tailwindcss/pull/9448))
-- Fix incorrect required `content` key in custom plugin configs ([#9502](https://github.com/tailwindlabs/tailwindcss/pull/9502), [#9545](https://github.com/tailwindlabs/tailwindcss/pull/9545))
-- Fix content path detection on Windows ([#9569](https://github.com/tailwindlabs/tailwindcss/pull/9569))
-- Ensure `--content` is used in the CLI when passed ([#9587](https://github.com/tailwindlabs/tailwindcss/pull/9587))
-
-## [3.1.8] - 2022-08-05
-
-### Fixed
-
-- Don’t prefix classes within reused arbitrary variants ([#8992](https://github.com/tailwindlabs/tailwindcss/pull/8992))
-- Fix usage of alpha values inside single-named colors that are functions ([#9008](https://github.com/tailwindlabs/tailwindcss/pull/9008))
-- Fix `@apply` of user utilities when negative and non-negative versions both exist ([#9027](https://github.com/tailwindlabs/tailwindcss/pull/9027))
-
-## [3.1.7] - 2022-07-29
-
-### Fixed
-
-- Don't rewrite source maps for `@layer` rules ([#8971](https://github.com/tailwindlabs/tailwindcss/pull/8971))
-
-### Added
-
-- Added types for `resolveConfig` ([#8924](https://github.com/tailwindlabs/tailwindcss/pull/8924))
-
-## [3.1.6] - 2022-07-11
-
-### Fixed
-
-- Fix usage on Node 12.x ([b4e637e](https://github.com/tailwindlabs/tailwindcss/commit/b4e637e2e096a9d6f2210efba9541f6fd4f28e56))
-- Handle theme keys with slashes when using `theme()` in CSS ([#8831](https://github.com/tailwindlabs/tailwindcss/pull/8831))
-
-## [3.1.5] - 2022-07-07
-
-### Added
-
-- Support configuring a default `font-weight` for each font size utility ([#8763](https://github.com/tailwindlabs/tailwindcss/pull/8763))
-- Add support for alpha values in safe list ([#8774](https://github.com/tailwindlabs/tailwindcss/pull/8774))
-
-### Fixed
-
-- Improve types to support fallback values in the CSS-in-JS syntax used in plugin APIs ([#8762](https://github.com/tailwindlabs/tailwindcss/pull/8762))
-- Support including `tailwindcss` and `autoprefixer` in `postcss.config.js` in standalone CLI ([#8769](https://github.com/tailwindlabs/tailwindcss/pull/8769))
-- Fix using special-characters as prefixes ([#8772](https://github.com/tailwindlabs/tailwindcss/pull/8772))
-- Don’t prefix classes used within arbitrary variants ([#8773](https://github.com/tailwindlabs/tailwindcss/pull/8773))
-- Add more explicit types for the default theme ([#8780](https://github.com/tailwindlabs/tailwindcss/pull/8780))
-
-## [3.1.4] - 2022-06-21
-
-### Fixed
-
-- Provide default to `<alpha-value>` when using `theme()` ([#8652](https://github.com/tailwindlabs/tailwindcss/pull/8652))
-- Detect arbitrary variants with quotes ([#8687](https://github.com/tailwindlabs/tailwindcss/pull/8687))
-- Don’t add spaces around raw `/` that are preceded by numbers ([#8688](https://github.com/tailwindlabs/tailwindcss/pull/8688))
-
-## [3.1.3] - 2022-06-14
-
-### Fixed
-
-- Fix extraction of multi-word utilities with arbitrary values and quotes ([#8604](https://github.com/tailwindlabs/tailwindcss/pull/8604))
-- Fix casing of import of `corePluginList` type definition ([#8587](https://github.com/tailwindlabs/tailwindcss/pull/8587))
-- Ignore PostCSS nodes returned by `addVariant` ([#8608](https://github.com/tailwindlabs/tailwindcss/pull/8608))
-- Fix missing spaces around arithmetic operators ([#8615](https://github.com/tailwindlabs/tailwindcss/pull/8615))
-- Detect alpha value in CSS `theme()` function when using quotes ([#8625](https://github.com/tailwindlabs/tailwindcss/pull/8625))
-- Fix "Maximum call stack size exceeded" bug ([#8636](https://github.com/tailwindlabs/tailwindcss/pull/8636))
-- Allow functions returning parallel variants to mutate the container ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
-- Remove text opacity CSS variables from `::marker` ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
-
-## [3.1.2] - 2022-06-10
-
-### Fixed
-
-- Ensure `\` is a valid arbitrary variant token ([#8576](https://github.com/tailwindlabs/tailwindcss/pull/8576))
-- Enable `postcss-import` in the CLI by default in watch mode ([#8574](https://github.com/tailwindlabs/tailwindcss/pull/8574), [#8580](https://github.com/tailwindlabs/tailwindcss/pull/8580))
-
-## [3.1.1] - 2022-06-09
-
-### Fixed
-
-- Fix candidate extractor regression ([#8558](https://github.com/tailwindlabs/tailwindcss/pull/8558))
-- Split `::backdrop` into separate defaults group ([#8567](https://github.com/tailwindlabs/tailwindcss/pull/8567))
-- Fix postcss plugin type ([#8564](https://github.com/tailwindlabs/tailwindcss/pull/8564))
-- Fix class detection in markdown code fences and slim templates ([#8569](https://github.com/tailwindlabs/tailwindcss/pull/8569))
-
-## [3.1.0] - 2022-06-08
-
-### Fixed
-
-- Types: allow for arbitrary theme values (for 3rd party plugins) ([#7926](https://github.com/tailwindlabs/tailwindcss/pull/7926))
-- Don’t split vars with numbers in them inside arbitrary values ([#8091](https://github.com/tailwindlabs/tailwindcss/pull/8091))
-- Require matching prefix when detecting negatives ([#8121](https://github.com/tailwindlabs/tailwindcss/pull/8121))
-- Handle duplicate At Rules without children ([#8122](https://github.com/tailwindlabs/tailwindcss/pull/8122))
-- Allow arbitrary values with commas in `@apply` ([#8125](https://github.com/tailwindlabs/tailwindcss/pull/8125))
-- Fix intellisense for plugins with multiple `@apply` rules ([#8213](https://github.com/tailwindlabs/tailwindcss/pull/8213))
-- Improve type detection for arbitrary color values ([#8201](https://github.com/tailwindlabs/tailwindcss/pull/8201))
-- Support PostCSS config options in config file in CLI ([#8226](https://github.com/tailwindlabs/tailwindcss/pull/8226))
-- Remove default `[hidden]` style in preflight ([#8248](https://github.com/tailwindlabs/tailwindcss/pull/8248))
-- Only check selectors containing base apply candidates for circular dependencies ([#8222](https://github.com/tailwindlabs/tailwindcss/pull/8222))
-- Rewrite default class extractor ([#8204](https://github.com/tailwindlabs/tailwindcss/pull/8204))
-- Move `important` selector to the front when `@apply`-ing selector-modifying variants in custom utilities ([#8313](https://github.com/tailwindlabs/tailwindcss/pull/8313))
-- Error when registering an invalid custom variant ([#8345](https://github.com/tailwindlabs/tailwindcss/pull/8345))
-- Create tailwind.config.cjs file in ESM package when running init ([#8363](https://github.com/tailwindlabs/tailwindcss/pull/8363))
-- Fix `matchVariant` that use at-rules and placeholders ([#8392](https://github.com/tailwindlabs/tailwindcss/pull/8392))
-- Improve types of the `tailwindcss/plugin` ([#8400](https://github.com/tailwindlabs/tailwindcss/pull/8400))
-- Allow returning parallel variants from `addVariant` or `matchVariant` callback functions ([#8455](https://github.com/tailwindlabs/tailwindcss/pull/8455))
-- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
-- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
-- Don't inherit `to` value from parent gradients ([#8489](https://github.com/tailwindlabs/tailwindcss/pull/8489))
-- Remove process dependency from log functions ([#8530](https://github.com/tailwindlabs/tailwindcss/pull/8530))
-- Ensure we can use `@import 'tailwindcss/...'` without node_modules ([#8537](https://github.com/tailwindlabs/tailwindcss/pull/8537))
-
-### Changed
-
-- Only apply hover styles when supported (future) ([#8394](https://github.com/tailwindlabs/tailwindcss/pull/8394))
-- Respect default ring color opacity (future) ([#8448](https://github.com/tailwindlabs/tailwindcss/pull/8448), [3f4005e](https://github.com/tailwindlabs/tailwindcss/commit/3f4005e833445f7549219eb5ae89728cbb3a2630))
-
-### Added
-
-- Support PostCSS `Document` nodes ([#7291](https://github.com/tailwindlabs/tailwindcss/pull/7291))
-- Add `text-start` and `text-end` utilities ([#6656](https://github.com/tailwindlabs/tailwindcss/pull/6656))
-- Support customizing class name when using `darkMode: 'class'` ([#5800](https://github.com/tailwindlabs/tailwindcss/pull/5800))
-- Add `--poll` option to the CLI ([#7725](https://github.com/tailwindlabs/tailwindcss/pull/7725))
-- Add new `border-spacing` utilities ([#7102](https://github.com/tailwindlabs/tailwindcss/pull/7102))
-- Add `enabled` variant ([#7905](https://github.com/tailwindlabs/tailwindcss/pull/7905))
-- Add TypeScript types for the `tailwind.config.js` file ([#7891](https://github.com/tailwindlabs/tailwindcss/pull/7891))
-- Add `backdrop` variant ([#7924](https://github.com/tailwindlabs/tailwindcss/pull/7924), [#8526](https://github.com/tailwindlabs/tailwindcss/pull/8526))
-- Add `grid-flow-dense` utility ([#8193](https://github.com/tailwindlabs/tailwindcss/pull/8193))
-- Add `mix-blend-plus-lighter` utility ([#8288](https://github.com/tailwindlabs/tailwindcss/pull/8288))
-- Add arbitrary variants ([#8299](https://github.com/tailwindlabs/tailwindcss/pull/8299))
-- Add experimental `matchVariant` API ([#8310](https://github.com/tailwindlabs/tailwindcss/pull/8310), [34fd0fb8](https://github.com/tailwindlabs/tailwindcss/commit/34fd0fb82aa574cddc5c7aa3ad7d1af5e3735e5d))
-- Add `prefers-contrast` media query variants ([#8410](https://github.com/tailwindlabs/tailwindcss/pull/8410))
-- Add opacity support when referencing colors with `theme` function ([#8416](https://github.com/tailwindlabs/tailwindcss/pull/8416))
-- Add `postcss-import` support to the CLI ([#8437](https://github.com/tailwindlabs/tailwindcss/pull/8437))
-- Add `optional` variant ([#8486](https://github.com/tailwindlabs/tailwindcss/pull/8486))
-- Add `<alpha-value>` placeholder support for custom colors ([#8501](https://github.com/tailwindlabs/tailwindcss/pull/8501))
-
-## [3.0.24] - 2022-04-12
-
-### Fixed
-
-- Prevent nesting plugin from breaking other plugins ([#7563](https://github.com/tailwindlabs/tailwindcss/pull/7563))
-- Recursively collapse adjacent rules ([#7565](https://github.com/tailwindlabs/tailwindcss/pull/7565))
-- Preserve source maps for generated CSS ([#7588](https://github.com/tailwindlabs/tailwindcss/pull/7588))
-- Split box shadows on top-level commas only ([#7479](https://github.com/tailwindlabs/tailwindcss/pull/7479))
-- Use local user CSS cache for `@apply` ([#7524](https://github.com/tailwindlabs/tailwindcss/pull/7524))
-- Invalidate context when main CSS changes ([#7626](https://github.com/tailwindlabs/tailwindcss/pull/7626))
-- Only add `!` to selector class matching template candidate when using important modifier with multi-class selectors ([#7664](https://github.com/tailwindlabs/tailwindcss/pull/7664))
-- Correctly parse and prefix animation names with dots ([#7163](https://github.com/tailwindlabs/tailwindcss/pull/7163))
-- Fix extraction from template literal/function with array ([#7481](https://github.com/tailwindlabs/tailwindcss/pull/7481))
-- Don't output unparsable arbitrary values ([#7789](https://github.com/tailwindlabs/tailwindcss/pull/7789))
-- Fix generation of `div:not(.foo)` if `.foo` is never defined ([#7815](https://github.com/tailwindlabs/tailwindcss/pull/7815))
-- Allow for custom properties in `rgb`, `rgba`, `hsl` and `hsla` colors ([#7933](https://github.com/tailwindlabs/tailwindcss/pull/7933))
-- Remove autoprefixer as explicit peer-dependency to avoid invalid warnings in situations where it isn't actually needed ([#7949](https://github.com/tailwindlabs/tailwindcss/pull/7949))
-- Ensure the `percentage` data type is validated correctly ([#8015](https://github.com/tailwindlabs/tailwindcss/pull/8015))
-- Make sure `font-weight` is inherited by form controls in all browsers ([#8078](https://github.com/tailwindlabs/tailwindcss/pull/8078))
-
-### Changed
-
-- Replace `chalk` with `picocolors` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6039))
-- Replace `cosmiconfig` with `lilconfig` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6038))
-- Update `cssnano` to avoid removing empty variables when minifying ([#7818](https://github.com/tailwindlabs/tailwindcss/pull/7818))
-
-## [3.0.23] - 2022-02-16
-
-### Fixed
-
-- Remove opacity variables from `:visited` pseudo class ([#7458](https://github.com/tailwindlabs/tailwindcss/pull/7458))
-- Support arbitrary values + calc + theme with quotes ([#7462](https://github.com/tailwindlabs/tailwindcss/pull/7462))
-- Don't duplicate layer output when scanning content with variants + wildcards ([#7478](https://github.com/tailwindlabs/tailwindcss/pull/7478))
-- Implement `getClassOrder` instead of `sortClassList` ([#7459](https://github.com/tailwindlabs/tailwindcss/pull/7459))
-
-## [3.0.22] - 2022-02-11
-
-### Fixed
-
-- Temporarily move `postcss` to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
-
-## [3.0.21] - 2022-02-10
-
-### Fixed
-
-- Move prettier plugin to dev dependencies ([#7418](https://github.com/tailwindlabs/tailwindcss/pull/7418))
-
-## [3.0.20] - 2022-02-10
-
-### Added
-
-- Expose `context.sortClassList(classes)` ([#7412](https://github.com/tailwindlabs/tailwindcss/pull/7412))
-
-## [3.0.19] - 2022-02-07
-
-### Fixed
-
-- Fix preflight border color fallback ([#7288](https://github.com/tailwindlabs/tailwindcss/pull/7288))
-- Correctly parse shadow lengths without a leading zero ([#7289](https://github.com/tailwindlabs/tailwindcss/pull/7289))
-- Don't crash when scanning extremely long class candidates ([#7331](https://github.com/tailwindlabs/tailwindcss/pull/7331))
-- Use less hacky fix for URLs detected as custom properties ([#7275](https://github.com/tailwindlabs/tailwindcss/pull/7275))
-- Correctly generate negative utilities when dash is before the prefix ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
-- Detect prefixed negative utilities in the safelist ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
-
-## [3.0.18] - 2022-01-28
-
-### Fixed
-
-- Fix `@apply` order regression (in `addComponents`, `addUtilities`, ...) ([#7232](https://github.com/tailwindlabs/tailwindcss/pull/7232))
-- Quick fix for incorrect arbitrary properties when using URLs ([#7252](https://github.com/tailwindlabs/tailwindcss/pull/7252))
-
-## [3.0.17] - 2022-01-26
-
-### Fixed
-
-- Remove false positive warning in CLI when using the `--content` option ([#7220](https://github.com/tailwindlabs/tailwindcss/pull/7220))
-
-## [3.0.16] - 2022-01-24
-
-### Fixed
-
-- Ensure to transpile the PostCSS Nesting plugin (tailwindcss/nesting) ([#7080](https://github.com/tailwindlabs/tailwindcss/pull/7080))
-- Improve various warnings ([#7118](https://github.com/tailwindlabs/tailwindcss/pull/7118))
-- Fix grammatical mistake ([cca5a38](https://github.com/tailwindlabs/tailwindcss/commit/cca5a3804e1d3ee0214491921e1aec35bf62a813))
-
-## [3.0.15] - 2022-01-15
-
-### Fixed
-
-- Temporarily remove optional chaining in nesting plugin ([#7077](https://github.com/tailwindlabs/tailwindcss/pull/7077))
-
-## [3.0.14] - 2022-01-14
-
-### Added
-
-- Show warnings for invalid content config ([#7065](https://github.com/tailwindlabs/tailwindcss/pull/7065))
-
-### Fixed
-
-- Only emit utility/component variants when those layers exist ([#7066](https://github.com/tailwindlabs/tailwindcss/pull/7066))
-- Ensure nesting plugins can receive options ([#7016](https://github.com/tailwindlabs/tailwindcss/pull/7016))
-
-## [3.0.13] - 2022-01-11
-
-### Fixed
-
-- Fix consecutive builds with at apply producing different CSS ([#6999](https://github.com/tailwindlabs/tailwindcss/pull/6999))
-
-## [3.0.12] - 2022-01-07
-
-### Fixed
-
-- Allow use of falsy values in theme config ([#6917](https://github.com/tailwindlabs/tailwindcss/pull/6917))
-- Ensure we can apply classes that are grouped with non-class selectors ([#6922](https://github.com/tailwindlabs/tailwindcss/pull/6922))
-- Improve standalone CLI compatibility on Linux by switching to the `linuxstatic` build target ([#6914](https://github.com/tailwindlabs/tailwindcss/pull/6914))
-- Ensure `@apply` works consistently with or without `@layer` ([#6938](https://github.com/tailwindlabs/tailwindcss/pull/6938))
-- Only emit defaults when using base layer ([#6926](https://github.com/tailwindlabs/tailwindcss/pull/6926))
-- Emit plugin defaults regardless of usage ([#6926](https://github.com/tailwindlabs/tailwindcss/pull/6926))
-- Move default border color back to preflight ([#6926](https://github.com/tailwindlabs/tailwindcss/pull/6926))
-- Change `experimental.optimizeUniversalDefaults` to only work with `@tailwind base` ([#6926](https://github.com/tailwindlabs/tailwindcss/pull/6926))
-
-## [3.0.11] - 2022-01-05
-
-### Fixed
-
-- Preserve casing of CSS variables added by plugins ([#6888](https://github.com/tailwindlabs/tailwindcss/pull/6888))
-- Ignore content paths that are passed in but don't actually exist ([#6901](https://github.com/tailwindlabs/tailwindcss/pull/6901))
-- Revert change that applies Tailwind's defaults in isolated environments like CSS modules ([9fdc391](https://github.com/tailwindlabs/tailwindcss/commit/9fdc391d4ff93e7e350f5ce439060176b1f0162f))
-
-## [3.0.10] - 2022-01-04
-
-### Fixed
-
-- Fix `@apply` in files without `@tailwind` directives ([#6580](https://github.com/tailwindlabs/tailwindcss/pull/6580), [#6875](https://github.com/tailwindlabs/tailwindcss/pull/6875))
-- CLI: avoid unnecessary writes to output files ([#6550](https://github.com/tailwindlabs/tailwindcss/pull/6550))
-
-### Added
-
-- Allow piping data into the CLI ([#6876](https://github.com/tailwindlabs/tailwindcss/pull/6876))
-
-## [3.0.9] - 2022-01-03
-
-### Fixed
-
-- Improve `DEBUG` flag ([#6797](https://github.com/tailwindlabs/tailwindcss/pull/6797), [#6804](https://github.com/tailwindlabs/tailwindcss/pull/6804))
-- Ensure we can use `<` and `>` characters in modifiers ([#6851](https://github.com/tailwindlabs/tailwindcss/pull/6851))
-- Validate `theme()` works in arbitrary values ([#6852](https://github.com/tailwindlabs/tailwindcss/pull/6852))
-- Properly detect `theme()` value usage in arbitrary properties ([#6854](https://github.com/tailwindlabs/tailwindcss/pull/6854))
-- Improve collapsing of duplicate declarations ([#6856](https://github.com/tailwindlabs/tailwindcss/pull/6856))
-- Remove support for `TAILWIND_MODE=watch` ([#6858](https://github.com/tailwindlabs/tailwindcss/pull/6858))
-
-## [3.0.8] - 2021-12-28
-
-### Fixed
-
-- Reduce specificity of `abbr` rule in preflight ([#6671](https://github.com/tailwindlabs/tailwindcss/pull/6671))
-- Support HSL with hue units in arbitrary values ([#6726](https://github.com/tailwindlabs/tailwindcss/pull/6726))
-- Add `node16-linux-arm64` target for standalone CLI ([#6693](https://github.com/tailwindlabs/tailwindcss/pull/6693))
-
-## [3.0.7] - 2021-12-17
-
-### Fixed
-
-- Don't mutate custom color palette when overriding per-plugin colors ([#6546](https://github.com/tailwindlabs/tailwindcss/pull/6546))
-- Improve circular dependency detection when using `@apply` ([#6588](https://github.com/tailwindlabs/tailwindcss/pull/6588))
-- Only generate variants for non-`user` layers ([#6589](https://github.com/tailwindlabs/tailwindcss/pull/6589))
-- Properly extract classes with arbitrary values in arrays and classes followed by escaped quotes ([#6590](https://github.com/tailwindlabs/tailwindcss/pull/6590))
-- Improve jsx interpolation candidate matching ([#6593](https://github.com/tailwindlabs/tailwindcss/pull/6593))
-- Ensure `@apply` of a rule inside an AtRule works ([#6594](https://github.com/tailwindlabs/tailwindcss/pull/6594))
-
-## [3.0.6] - 2021-12-16
-
-### Fixed
-
-- Support square bracket notation in paths ([#6519](https://github.com/tailwindlabs/tailwindcss/pull/6519))
-- Ensure all plugins are executed for a given candidate ([#6540](https://github.com/tailwindlabs/tailwindcss/pull/6540))
-
-## [3.0.5] - 2021-12-15
-
-### Fixed
-
-- Revert: add `li` to list-style reset ([9777562d](https://github.com/tailwindlabs/tailwindcss/commit/9777562da37ee631bbf77374c0d14825f09ef9af))
-
-## [3.0.4] - 2021-12-15
-
-### Fixed
-
-- Insert always-on defaults layer in correct spot ([#6526](https://github.com/tailwindlabs/tailwindcss/pull/6526))
-
-## [3.0.3] - 2021-12-15
-
-### Added
-
-- Warn about invalid globs in `content` ([#6449](https://github.com/tailwindlabs/tailwindcss/pull/6449))
-- Add standalone tailwindcss CLI ([#6506](https://github.com/tailwindlabs/tailwindcss/pull/6506))
-- Add `li` to list-style reset ([00f60e6](https://github.com/tailwindlabs/tailwindcss/commit/00f60e61013c6e4e3419e4b699371a13eb30b75d))
-
-### Fixed
-
-- Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
-- Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier ([#6378](https://github.com/tailwindlabs/tailwindcss/pull/6378))
-- Move defaults to their own always-on layer ([#6500](https://github.com/tailwindlabs/tailwindcss/pull/6500))
-- Support negative values in safelist patterns ([#6480](https://github.com/tailwindlabs/tailwindcss/pull/6480))
-
-## [3.0.2] - 2021-12-13
-
-### Fixed
-
-- Temporarily disable optimize universal defaults, fixes issue with transforms/filters/rings not being `@apply`-able in CSS modules/Svelte components/Vue components ([#6461](https://github.com/tailwindlabs/tailwindcss/pull/6461))
-
-## [3.0.1] - 2021-12-10
-
-### Fixed
-
-- Ensure complex variants with multiple classes work ([#6311](https://github.com/tailwindlabs/tailwindcss/pull/6311))
-- Re-add `default` interop to public available functions ([#6348](https://github.com/tailwindlabs/tailwindcss/pull/6348))
-- Detect circular dependencies when using `@apply` ([#6365](https://github.com/tailwindlabs/tailwindcss/pull/6365))
-- Fix defaults optimization when vendor prefixes are involved ([#6369](https://github.com/tailwindlabs/tailwindcss/pull/6369))
-
-## [3.0.0] - 2021-12-09
-
-### Fixed
-
-- Enforce the order of some variants (like `before` and `after`) ([#6018](https://github.com/tailwindlabs/tailwindcss/pull/6018))
-
-### Added
-
-- Add `placeholder` variant ([#6106](https://github.com/tailwindlabs/tailwindcss/pull/6106))
-- Add composable `touch-action` utilities ([#6115](https://github.com/tailwindlabs/tailwindcss/pull/6115))
-- Add support for "arbitrary properties" ([#6161](https://github.com/tailwindlabs/tailwindcss/pull/6161))
-- Add `portrait` and `landscape` variants ([#6046](https://github.com/tailwindlabs/tailwindcss/pull/6046))
-- Add `text-decoration-style`, `text-decoration-thickness`, and `text-underline-offset` utilities ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
-- Add `menu` reset to preflight ([#6213](https://github.com/tailwindlabs/tailwindcss/pull/6213))
-- Allow `0` as a valid `length` value ([#6233](https://github.com/tailwindlabs/tailwindcss/pull/6233), [#6259](https://github.com/tailwindlabs/tailwindcss/pull/6259))
-- Add CSS functions to data types ([#6258](https://github.com/tailwindlabs/tailwindcss/pull/6258))
-- Support negative values for `scale-*` utilities ([c48e629](https://github.com/tailwindlabs/tailwindcss/commit/c48e629955585ad18dadba9f470fda59cc448ab7))
-- Improve `length` data type, by validating each value individually ([#6283](https://github.com/tailwindlabs/tailwindcss/pull/6283))
-
-### Changed
-
-- Deprecate `decoration-slice` and `decoration-break` in favor `box-decoration-slice` and `box-decoration-break` _(non-breaking)_ ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
-
-## [3.0.0-alpha.2] - 2021-11-08
-
-### Changed
-
-- Don't use pointer cursor on disabled buttons by default ([#5772](https://github.com/tailwindlabs/tailwindcss/pull/5772))
-- Set default content value in preflight instead of within each before/after utility ([#5820](https://github.com/tailwindlabs/tailwindcss/pull/5820))
-- Remove `prefix` as a function ([#5829](https://github.com/tailwindlabs/tailwindcss/pull/5829))
-
-### Added
-
-- Add `flex-basis` utilities ([#5671](https://github.com/tailwindlabs/tailwindcss/pull/5671))
-- Make negative values a first-class feature ([#5709](https://github.com/tailwindlabs/tailwindcss/pull/5709))
-- Add `fit-content` values for `min/max-width/height` utilities ([#5638](https://github.com/tailwindlabs/tailwindcss/pull/5638))
-- Add `min/max-content` values for `min/max-height` utilities ([#5729](https://github.com/tailwindlabs/tailwindcss/pull/5729))
-- Add all standard `cursor-*` values by default ([#5734](https://github.com/tailwindlabs/tailwindcss/pull/5734))
-- Add `grow-*` and `shrink-*` utilities, deprecate `flex-grow-*` and `flex-shrink-*` ([#5733](https://github.com/tailwindlabs/tailwindcss/pull/5733))
-- Add `text-decoration-color` utilities ([#5760](https://github.com/tailwindlabs/tailwindcss/pull/5760))
-- Add new declarative `addVariant` API ([#5809](https://github.com/tailwindlabs/tailwindcss/pull/5809))
-- Add first-class `print` variant for targeting printed media ([#5885](https://github.com/tailwindlabs/tailwindcss/pull/5885))
-- Add `outline-style`, `outline-color`, `outline-width` and `outline-offset` utilities ([#5887](https://github.com/tailwindlabs/tailwindcss/pull/5887))
-- Add full color palette for `fill-*` and `stroke-*` utilities (#5933[](https://github.com/tailwindlabs/tailwindcss/pull/5933))
-- Add composable API for colored box shadows ([#5979](https://github.com/tailwindlabs/tailwindcss/pull/5979))
-
-### Fixed
-
-- Configure chokidar's `awaitWriteFinish` setting to avoid occasional stale builds on Windows ([#5774](https://github.com/tailwindlabs/tailwindcss/pull/5774))
-- Fix CLI `--content` option ([#5775](https://github.com/tailwindlabs/tailwindcss/pull/5775))
-- Fix before/after utilities overriding custom content values at larger breakpoints ([#5820](https://github.com/tailwindlabs/tailwindcss/pull/5820))
-- Cleanup duplicate properties ([#5830](https://github.com/tailwindlabs/tailwindcss/pull/5830))
-- Allow `_` inside `url()` when using arbitrary values ([#5853](https://github.com/tailwindlabs/tailwindcss/pull/5853))
-- Prevent crashes when using comments in `@layer` AtRules ([#5854](https://github.com/tailwindlabs/tailwindcss/pull/5854))
-- Handle color transformations properly with `theme(...)` for all relevant plugins ([#4533](https://github.com/tailwindlabs/tailwindcss/pull/4533), [#5871](https://github.com/tailwindlabs/tailwindcss/pull/5871))
-- Ensure `@apply`-ing a utility with multiple definitions works ([#5870](https://github.com/tailwindlabs/tailwindcss/pull/5870))
-
-## [3.0.0-alpha.1] - 2021-10-01
-
-### Changed
-
-- Remove AOT engine, make JIT the default ([#5340](https://github.com/tailwindlabs/tailwindcss/pull/5340))
-- Throw when trying to `@apply` the `group` class ([#4666](https://github.com/tailwindlabs/tailwindcss/pull/4666))
-- Remove dependency on `modern-normalize`, inline and consolidate with Preflight ([#5358](https://github.com/tailwindlabs/tailwindcss/pull/5358))
-- Enable extended color palette by default with updated color names ([#5384](https://github.com/tailwindlabs/tailwindcss/pull/5384))
-- Move `vertical-align` values to config file instead of hard-coding ([#5487](https://github.com/tailwindlabs/tailwindcss/pull/5487))
-- Rename `overflow-clip` to `text-clip` and `overflow-ellipsis` to `text-ellipsis` ([#5630](https://github.com/tailwindlabs/tailwindcss/pull/5630))
-
-### Added
-
-- Add native `aspect-ratio` utilities ([#5359](https://github.com/tailwindlabs/tailwindcss/pull/5359))
-- Unify config callback helpers into single object ([#5382](https://github.com/tailwindlabs/tailwindcss/pull/5382))
-- Preserve original color format when adding opacity whenever possible ([#5154](https://github.com/tailwindlabs/tailwindcss/pull/5154))
-- Add `accent-color` utilities ([#5387](https://github.com/tailwindlabs/tailwindcss/pull/5387))
-- Add `scroll-behavior` utilities ([#5388](https://github.com/tailwindlabs/tailwindcss/pull/5388))
-- Add `will-change` utilities ([#5448](https://github.com/tailwindlabs/tailwindcss/pull/5448))
-- Add `text-indent` utilities ([#5449](https://github.com/tailwindlabs/tailwindcss/pull/5449))
-- Add `column` utilities ([#5457](https://github.com/tailwindlabs/tailwindcss/pull/5457))
-- Add `border-hidden` utility ([#5485](https://github.com/tailwindlabs/tailwindcss/pull/5485))
-- Add `align-sub` and `align-super` utilities by default ([#5486](https://github.com/tailwindlabs/tailwindcss/pull/5486))
-- Add `break-before`, `break-inside` and `break-after` utilities ([#5530](https://github.com/tailwindlabs/tailwindcss/pull/5530))
-- Add `file` variant for `::file-selector-button` pseudo element ([#4936](https://github.com/tailwindlabs/tailwindcss/pull/4936))
-- Add comprehensive arbitrary value support ([#5568](https://github.com/tailwindlabs/tailwindcss/pull/5568))
-- Add `touch-action` utilities ([#5603](https://github.com/tailwindlabs/tailwindcss/pull/5603))
-- Add `inherit` to default color palette ([#5597](https://github.com/tailwindlabs/tailwindcss/pull/5597))
-- Add `overflow-clip`, `overflow-x-clip` and `overflow-y-clip` utilities ([#5630](https://github.com/tailwindlabs/tailwindcss/pull/5630))
-- Add `[open]` variant ([#5627](https://github.com/tailwindlabs/tailwindcss/pull/5627))
-- Add `scroll-snap` utilities ([#5637](https://github.com/tailwindlabs/tailwindcss/pull/5637))
-- Add `border-x` and `border-y` width and color utilities ([#5639](https://github.com/tailwindlabs/tailwindcss/pull/5639))
-
-### Fixed
-
-- Fix defining colors as functions when color opacity plugins are disabled ([#5470](https://github.com/tailwindlabs/tailwindcss/pull/5470))
-- Fix using negated `content` globs ([#5625](https://github.com/tailwindlabs/tailwindcss/pull/5625))
-- Fix using backslashes in `content` globs ([#5628](https://github.com/tailwindlabs/tailwindcss/pull/5628))
-
-## [2.2.19] - 2021-10-29
-
-### Fixed
-
-- Ensure `corePlugins` order is consistent in AOT mode ([#5928](https://github.com/tailwindlabs/tailwindcss/pull/5928))
-
-## [2.2.18] - 2021-10-29
-
-### Fixed
-
-- Bump versions for security vulnerabilities ([#5924](https://github.com/tailwindlabs/tailwindcss/pull/5924))
-
-## [2.2.17] - 2021-10-13
-
-### Fixed
-
-- Configure chokidar's `awaitWriteFinish` setting to avoid occasional stale builds on Windows ([#5758](https://github.com/tailwindlabs/tailwindcss/pull/5758))
-
-## [2.2.16] - 2021-09-26
-
-### Fixed
-
-- JIT: Properly handle animations that use CSS custom properties ([#5602](https://github.com/tailwindlabs/tailwindcss/pull/5602))
-
-## [2.2.15] - 2021-09-10
-
-### Fixed
-
-- Ensure using CLI without `-i` for input file continues to work even though deprecated ([#5464](https://github.com/tailwindlabs/tailwindcss/pull/5464))
-
-## [2.2.14] - 2021-09-08
-
-### Fixed
-
-- Only use `@defaults` in JIT, switch back to `clean-css` in case there's any meaningful differences in the output ([bf248cb](https://github.com/tailwindlabs/tailwindcss/commit/bf248cb0de889d48854fbdd26536f4a492556efd))
-
-## [2.2.13] - 2021-09-08
-
-### Fixed
-
-- Replace `clean-css` with `cssnano` for CDN builds to fix minified builds ([75cc3ca](https://github.com/tailwindlabs/tailwindcss/commit/75cc3ca305aedddc8a85f3df1a420fefad3fb5c4))
-
-## [2.2.12] - 2021-09-08
-
-### Fixed
-
-- Ensure that divide utilities inject a default border color ([#5438](https://github.com/tailwindlabs/tailwindcss/pull/5438))
-
-## [2.2.11] - 2021-09-07
-
-### Fixed
-
-- Rebundle to fix missing CLI peer dependencies
-
-## [2.2.10] - 2021-09-06
-
-### Fixed
-
-- Fix build error when using `presets: []` in config file ([#4903](https://github.com/tailwindlabs/tailwindcss/pull/4903))
-
-### Added
-
-- Reintroduce universal selector optimizations under experimental `optimizeUniversalDefaults` flag ([a9e160c](https://github.com/tailwindlabs/tailwindcss/commit/a9e160cf9acb75a2bbac34f8864568b12940f89a))
-
-## [2.2.9] - 2021-08-30
-
-### Fixed
-
-- JIT: Fix `@apply`ing utilities that contain variants + the important modifier ([#4854](https://github.com/tailwindlabs/tailwindcss/pull/4854))
-- JIT: Don't strip "null" when parsing tracked file paths ([#5008](https://github.com/tailwindlabs/tailwindcss/pull/5008))
-- Pin `clean-css` to v5.1.4 to fix empty CSS variables in CDN builds ([#5338](https://github.com/tailwindlabs/tailwindcss/pull/5338))
-
-## [2.2.8] - 2021-08-27
-
-### Fixed
-
-- Improve accessibility of default link focus styles in Firefox ([#5082](https://github.com/tailwindlabs/tailwindcss/pull/5082))
-- JIT: Fix animation variants corrupting keyframes rules ([#5223](https://github.com/tailwindlabs/tailwindcss/pull/5223))
-- JIT: Ignore escaped commas when splitting selectors to apply prefixes ([#5239](https://github.com/tailwindlabs/tailwindcss/pull/5239/))
-- Nesting: Maintain PostCSS node sources when handling `@apply` ([#5249](https://github.com/tailwindlabs/tailwindcss/pull/5249))
-- JIT: Fix support for animation lists ([#5252](https://github.com/tailwindlabs/tailwindcss/pull/5252))
-- JIT: Fix arbitrary value support for `object-position` utilities ([#5245](https://github.com/tailwindlabs/tailwindcss/pull/5245))
-- CLI: Abort watcher if stdin is closed to avoid zombie processes ([#4997](https://github.com/tailwindlabs/tailwindcss/pull/4997))
-- JIT: Ignore arbitrary values with unbalanced brackets ([#5293](https://github.com/tailwindlabs/tailwindcss/pull/5293))
-
-## [2.2.7] - 2021-07-23
-
-### Fixed
-
-- Temporarily revert runtime performance optimizations introduced in v2.2.5, use universal selector again ([#5060](https://github.com/tailwindlabs/tailwindcss/pull/5060))
-
-## [2.2.6] - 2021-07-21
-
-### Fixed
-
-- Fix issue where base styles not generated for translate transforms in JIT ([#5038](https://github.com/tailwindlabs/tailwindcss/pull/5038))
-
-## [2.2.5] - 2021-07-21
-
-### Added
-
-- Added `self-baseline` utility (I know this is a patch release, no one's going to die relax) ([#5000](https://github.com/tailwindlabs/tailwindcss/pull/5000))
-
-### Changed
-
-- JIT: Optimize universal selector usage by inlining only the relevant selectors ([#4850](https://github.com/tailwindlabs/tailwindcss/pull/4850)))
-
-  This provides a very significant performance boost on pages with a huge number of DOM nodes, but there's a chance it could be a breaking change in very rare edge cases we haven't thought of. Please open an issue if anything related to shadows, rings, transforms, filters, or backdrop-filters seems to be behaving differently after upgrading.
-
-### Fixed
-
-- Fix support for `step-start` and `step-end` in animation utilities ([#4795](https://github.com/tailwindlabs/tailwindcss/pull/4795)))
-- JIT: Prevent presence of `!*` in templates from ruining everything ([#4816](https://github.com/tailwindlabs/tailwindcss/pull/4816)))
-- JIT: Improve support for quotes in arbitrary values ([#4817](https://github.com/tailwindlabs/tailwindcss/pull/4817)))
-- Fix filter/backdrop-filter/transform utilities being inserted into the wrong position if not all core plugins are enabled ([#4852](https://github.com/tailwindlabs/tailwindcss/pull/4852)))
-- JIT: Fix `@layer` rules being mistakenly inserted during incremental rebuilds ([#4853](https://github.com/tailwindlabs/tailwindcss/pull/4853)))
-- Improve build performance for projects with many small non-Tailwind stylesheets ([#4644](https://github.com/tailwindlabs/tailwindcss/pull/4644))
-- Ensure `[hidden]` works as expected on elements where we override the default `display` value in Preflight ([#4873](https://github.com/tailwindlabs/tailwindcss/pull/4873))
-- Fix variant configuration not being applied to `backdropOpacity` utilities ([#4892](https://github.com/tailwindlabs/tailwindcss/pull/4892))
-
-## [2.2.4] - 2021-06-23
-
-### Fixed
-
-- Remove `postinstall` script that was preventing people from installing the library ([1eacfb9](https://github.com/tailwindlabs/tailwindcss/commit/1eacfb98849c0d4737e0af3595ddec8c73addaac))
-
-## [2.2.3] - 2021-06-23
-
-### Added
-
-- Pass extended color palette to theme closures so it can be used without installing Tailwind when using `npx tailwindcss` ([359252c](https://github.com/tailwindlabs/tailwindcss/commit/359252c9b429e81217c28eb3ca7bab73d8f81e6d))
-
-### Fixed
-
-- JIT: Explicitly error when `-` is used as a custom separator ([#4704](https://github.com/tailwindlabs/tailwindcss/pull/4704))
-- JIT: Don't add multiple `~` when stacking `peer-*` variants ([#4757](https://github.com/tailwindlabs/tailwindcss/pull/4757))
-- Remove outdated focus style fix in Preflight ([#4780](https://github.com/tailwindlabs/tailwindcss/pull/4780))
-- Enable `purge` if provided on the CLI ([#4772](https://github.com/tailwindlabs/tailwindcss/pull/4772))
-- JIT: Fix error when not using a config file with postcss-cli ([#4773](https://github.com/tailwindlabs/tailwindcss/pull/4773))
-- Fix issue with `resolveConfig` not being importable in Next.js pages ([#4725](https://github.com/tailwindlabs/tailwindcss/pull/4725))
-
-## [2.2.2] - 2021-06-18
-
-### Fixed
-
-- JIT: Reintroduce `transform`, `filter`, and `backdrop-filter` classes purely to create stacking contexts to minimize the impact of the breaking change ([#4700](https://github.com/tailwindlabs/tailwindcss/pull/4700))
-
-## [2.2.1] - 2021-06-18
-
-### Fixed
-
-- Recover from errors gracefully in CLI watch mode ([#4693](https://github.com/tailwindlabs/tailwindcss/pull/4693))
-- Fix issue with media queries not being generated properly when using PostCSS 7 ([#4695](https://github.com/tailwindlabs/tailwindcss/pull/4695))
-
-## [2.2.0] - 2021-06-17
-
-### Changed
-
-- JIT: Use "tracking" context by default instead of "watching" context for improved reliability with most bundlers ([#4514](https://github.com/tailwindlabs/tailwindcss/pull/4514))
-
-  Depending on which tooling you use, you may need to explicitly set `TAILWIND_MODE=watch` until your build runner has been updated to support PostCSS's `dir-dependency` message type.
-
-### Added
-
-- Add `background-origin` utilities ([#4117](https://github.com/tailwindlabs/tailwindcss/pull/4117))
-- Improve `@apply` performance in projects that process many CSS sources ([#3178](https://github.com/tailwindlabs/tailwindcss/pull/3718))
-- JIT: Don't use CSS variables for color utilities if color opacity utilities are disabled ([#3984](https://github.com/tailwindlabs/tailwindcss/pull/3984))
-- JIT: Redesign `matchUtilities` API to make it more suitable for third-party use ([#4232](https://github.com/tailwindlabs/tailwindcss/pull/4232))
-- JIT: Support applying important utility variants ([#4260](https://github.com/tailwindlabs/tailwindcss/pull/4260))
-- JIT: Support coercing arbitrary values when the type isn't detectable ([#4263](https://github.com/tailwindlabs/tailwindcss/pull/4263))
-- JIT: Support for `raw` syntax in `purge` config ([#4272](https://github.com/tailwindlabs/tailwindcss/pull/4272))
-- Add `empty` variant ([#3298](https://github.com/tailwindlabs/tailwindcss/pull/3298))
-- Update `modern-normalize` to v1.1 ([#4287](https://github.com/tailwindlabs/tailwindcss/pull/4287))
-- Implement `theme` function internally, remove `postcss-functions` dependency ([#4317](https://github.com/tailwindlabs/tailwindcss/pull/4317))
-- Add `screen` function to improve nesting plugin compatibility ([#4318](https://github.com/tailwindlabs/tailwindcss/pull/4318))
-- JIT: Add universal shorthand color opacity syntax ([#4348](https://github.com/tailwindlabs/tailwindcss/pull/4348))
-- JIT: Add `@tailwind variants` directive to replace `@tailwind screens` ([#4356](https://github.com/tailwindlabs/tailwindcss/pull/4356))
-- JIT: Add support for PostCSS `dir-dependency` messages in `TAILWIND_DISABLE_TOUCH` mode ([#4388](https://github.com/tailwindlabs/tailwindcss/pull/4388))
-- JIT: Add per-side border color utilities ([#4404](https://github.com/tailwindlabs/tailwindcss/pull/4404))
-- JIT: Add support for `before` and `after` pseudo-element variants and `content` utilities ([#4461](https://github.com/tailwindlabs/tailwindcss/pull/4461))
-- Add new `transform` and `extract` APIs to simplify PurgeCSS/JIT customization ([#4469](https://github.com/tailwindlabs/tailwindcss/pull/4469))
-- JIT: Add exhaustive pseudo-class and pseudo-element variant support ([#4482](https://github.com/tailwindlabs/tailwindcss/pull/4482))
-- JIT: Add `caret-color` utilities ([#4499](https://github.com/tailwindlabs/tailwindcss/pull/4499))
-- Rename `lightBlue` to `sky`, emit console warning when using deprecated name ([#4513](https://github.com/tailwindlabs/tailwindcss/pull/4513))
-- New CLI with improved JIT support, `--watch` mode, and more ([#4526](https://github.com/tailwindlabs/tailwindcss/pull/4526), [4558](https://github.com/tailwindlabs/tailwindcss/pull/4558))
-- JIT: Add new `peer-*` variants for styling based on sibling state ([#4556](https://github.com/tailwindlabs/tailwindcss/pull/4556))
-- Expose `safelist` as a top-level option under `purge` for both JIT and classic engines ([#4580](https://github.com/tailwindlabs/tailwindcss/pull/4580))
-- JIT: Remove need for `transform` class when using classes like `scale-*`, `rotate-*`, etc. ([#4604](https://github.com/tailwindlabs/tailwindcss/pull/4604))
-- JIT: Remove need for `filter` and `backdrop-filter` classes when using classes like `contrast-*`, `backdrop-blur-*`, etc. ([#4614](https://github.com/tailwindlabs/tailwindcss/pull/4614))
-- Support passing a custom path for your PostCSS configuration in the Tailwind CLI ([#4607](https://github.com/tailwindlabs/tailwindcss/pull/4607))
-- Add `blur-none` by default with intent to deprecate `blur-0` ([#4614](https://github.com/tailwindlabs/tailwindcss/pull/4614))
-
-### Fixed
-
-- JIT: Improve support for Svelte class bindings ([#4187](https://github.com/tailwindlabs/tailwindcss/pull/4187))
-- JIT: Improve support for `calc` and `var` in arbitrary values ([#4147](https://github.com/tailwindlabs/tailwindcss/pull/4147))
-- Convert `hsl` colors to `hsla` when transforming for opacity support instead of `rgba` ([#3850](https://github.com/tailwindlabs/tailwindcss/pull/3850))
-- Fix `backdropBlur` variants not being generated ([#4188](https://github.com/tailwindlabs/tailwindcss/pull/4188))
-- Improve animation value parsing ([#4250](https://github.com/tailwindlabs/tailwindcss/pull/4250))
-- Ignore unknown object types when hashing config ([82f4eaa](https://github.com/tailwindlabs/tailwindcss/commit/82f4eaa6832ef8a4e3fd90869e7068efdf6e34f2))
-- Ensure variants are grouped properly for plugins with order-dependent utilities ([#4273](https://github.com/tailwindlabs/tailwindcss/pull/4273))
-- JIT: Fix temp file storage when node temp directories are kept on a different drive than the project itself ([#4044](https://github.com/tailwindlabs/tailwindcss/pull/4044))
-- Support border-opacity utilities alongside default `border` utility ([#4277](https://github.com/tailwindlabs/tailwindcss/pull/4277))
-- JIT: Fix source maps for expanded `@tailwind` directives ([2f15411](https://github.com/tailwindlabs/tailwindcss/commit/2f1541123dea29d8a2ab0f1411bf60c79eeb96b4))
-- JIT: Ignore whitespace when collapsing adjacent rules ([15642fb](https://github.com/tailwindlabs/tailwindcss/commit/15642fbcc885eba9cc50b7678a922b09c90d6b51))
-- JIT: Generate group parent classes correctly when using custom separator ([#4508](https://github.com/tailwindlabs/tailwindcss/pull/4508))
-- JIT: Fix incorrect stacking of multiple `group` variants ([#4551](https://github.com/tailwindlabs/tailwindcss/pull/4551))
-- JIT: Fix memory leak due to holding on to unused contexts ([#4571](https://github.com/tailwindlabs/tailwindcss/pull/4571))
-
-### Internals
-
-- Add integration tests for popular build runners ([#4354](https://github.com/tailwindlabs/tailwindcss/pull/4354))
-
-## [2.1.4] - 2021-06-02
-
-### Fixed
-
-- Skip `raw` PurgeCSS sources when registering template dependencies ([#4542](https://github.com/tailwindlabs/tailwindcss/pull/4542))
-
-## [2.1.3] - 2021-06-01
-
-### Fixed
-
-- Register PurgeCSS paths as PostCSS dependencies to guarantee proper cache-busting in webpack 5 ([#4530](https://github.com/tailwindlabs/tailwindcss/pull/4530))
-
-## [2.1.2] - 2021-04-23
-
-### Fixed
-
-- Fix issue where JIT engine would generate the wrong CSS when using PostCSS 7 ([#4078](https://github.com/tailwindlabs/tailwindcss/pull/4078))
-
-## [2.1.1] - 2021-04-05
-
-### Fixed
-
-- Fix issue where JIT engine would fail to compile when a source path isn't provided by the build runner for the current input file ([#3978](https://github.com/tailwindlabs/tailwindcss/pull/3978))
-
-## [2.1.0] - 2021-04-05
-
-### Added
-
-- Add alternate JIT engine (in preview) ([#3905](https://github.com/tailwindlabs/tailwindcss/pull/3905))
-- Add new `mix-blend-mode` and `background-blend-mode` utilities ([#3920](https://github.com/tailwindlabs/tailwindcss/pull/3920))
-- Add new `box-decoration-break` utilities ([#3911](https://github.com/tailwindlabs/tailwindcss/pull/3911))
-- Add new `isolation` utilities ([#3914](https://github.com/tailwindlabs/tailwindcss/pull/3914))
-- Add `inline-table` display utility ([#3563](https://github.com/tailwindlabs/tailwindcss/pull/3563))
-- Add `list-item` display utility ([#3929](https://github.com/tailwindlabs/tailwindcss/pull/3929))
-- Add new `filter` and `backdrop-filter` utilities ([#3923](https://github.com/tailwindlabs/tailwindcss/pull/3923))
-
-## [2.0.4] - 2021-03-17
-
-### Fixed
-
-- Pass full `var(--bg-opacity)` value as `opacityValue` when defining colors as functions
-
-## [2.0.3] - 2021-02-07
-
-### Fixed
-
-- Ensure sourcemap input is deterministic when using `@apply` in Vue components ([#3356](https://github.com/tailwindlabs/tailwindcss/pull/3356))
-- Ensure placeholder opacity is consistent across browsers ([#3308](https://github.com/tailwindlabs/tailwindcss/pull/3308))
-- Fix issue where `theme()` didn't work with colors defined as functions ([#2919](https://github.com/tailwindlabs/tailwindcss/pull/2919))
-- Enable `dark` variants by default for color opacity utilities ([#2975](https://github.com/tailwindlabs/tailwindcss/pull/2975))
-
-### Added
-
-- Add support for a `tailwind.config.cjs` file in Node ESM projects ([#3181](https://github.com/tailwindlabs/tailwindcss/pull/3181))
-- Add version comment to Preflight ([#3255](https://github.com/tailwindlabs/tailwindcss/pull/3255))
-- Add `cursor-help` by default ([#3199](https://github.com/tailwindlabs/tailwindcss/pull/3199))
-
-## [2.0.2] - 2020-12-11
-
-### Fixed
-
-- Fix issue with `@apply` not working as expected with `!important` inside an at-rule ([#2824](https://github.com/tailwindlabs/tailwindcss/pull/2824))
-- Fix issue with `@apply` not working as expected with defined classes ([#2832](https://github.com/tailwindlabs/tailwindcss/pull/2832))
-- Fix memory leak, and broken `@apply` when splitting up files ([#3032](https://github.com/tailwindlabs/tailwindcss/pull/3032))
-
-### Added
-
-- Add default values for the `ring` utility ([#2951](https://github.com/tailwindlabs/tailwindcss/pull/2951))
-
-## [2.0.1] - 2020-11-18
-
-- Nothing, just the only thing I could do when I found out npm won't let me publish the same version under two tags.
-
-## [2.0.0] - 2020-11-18
-
-### Added
-
-- Add redesigned color palette ([#2623](https://github.com/tailwindlabs/tailwindcss/pull/2623), [700866c](https://github.com/tailwindlabs/tailwindcss/commit/700866ce5e0c0b8d140be161c4d07fc6f31242bc), [#2633](https://github.com/tailwindlabs/tailwindcss/pull/2633))
-- Add dark mode support ([#2279](https://github.com/tailwindlabs/tailwindcss/pull/2279), [#2631](https://github.com/tailwindlabs/tailwindcss/pull/2631))
-- Add `overflow-ellipsis` and `overflow-clip` utilities ([#1289](https://github.com/tailwindlabs/tailwindcss/pull/1289))
-- Add `transform-gpu` to force hardware acceleration on transforms when desired ([#1380](https://github.com/tailwindlabs/tailwindcss/pull/1380))
-- Extend default spacing scale ([#2630](https://github.com/tailwindlabs/tailwindcss/pull/2630), [7f05204](https://github.com/tailwindlabs/tailwindcss/commit/7f05204ce7a5581b6845591448265c3c21afde86))
-- Add spacing scale to `inset` plugin ([#2630](https://github.com/tailwindlabs/tailwindcss/pull/2630))
-- Add percentage sizes to `translate`, `inset`, and `height` plugins ([#2630](https://github.com/tailwindlabs/tailwindcss/pull/2630), [5259560](https://github.com/tailwindlabs/tailwindcss/commit/525956065272dc53e8f8395f55f9ad13077a38d1))
-- Extend default font size scale ([#2609](https://github.com/tailwindlabs/tailwindcss/pull/2609), [#2619](https://github.com/tailwindlabs/tailwindcss/pull/2619))
-- Support using `@apply` with complex classes, including variants like `lg:hover:bg-blue-500` ([#2159](https://github.com/tailwindlabs/tailwindcss/pull/2159))
-- Add new `2xl` breakpoint at 1536px by default ([#2609](https://github.com/tailwindlabs/tailwindcss/pull/2609))
-- Add default line-height values for font-size utilities ([#2609](https://github.com/tailwindlabs/tailwindcss/pull/2609))
-- Support defining theme values using arrays for CSS properties that support comma separated values ([e13f083c4](https://github.com/tailwindlabs/tailwindcss/commit/e13f083c4bc48bf9870d27c966136a9584943127))
-- Enable `group-hover` for color plugins, `boxShadow`, and `textDecoration` by default ([28985b6](https://github.com/tailwindlabs/tailwindcss/commit/28985b6cd592e72d4849fdb9ce97eb045744e09c), [f6923b1](https://github.com/tailwindlabs/tailwindcss/commit/f6923b1))
-- Enable `focus` for z-index utilities by default ([ae5b3d3](https://github.com/tailwindlabs/tailwindcss/commit/ae5b3d312d5000ae9c2065001f3df7add72dc365))
-- Support `extend` in `variants` configuration ([#2651](https://github.com/tailwindlabs/tailwindcss/pull/2651))
-- Add `max-w-prose` class by default ([#2574](https://github.com/tailwindlabs/tailwindcss/pull/2574))
-- Support flattening deeply nested color objects ([#2148](https://github.com/tailwindlabs/tailwindcss/pull/2148))
-- Support defining presets as functions ([#2680](https://github.com/tailwindlabs/tailwindcss/pull/2680))
-- Support deep merging of objects under `extend` ([#2679](https://github.com/tailwindlabs/tailwindcss/pull/2679), [#2700](https://github.com/tailwindlabs/tailwindcss/pull/2700))
-- Enable `focus-within` for all plugins that have `focus` enabled by default ([1a21f072](https://github.com/tailwindlabs/tailwindcss/commit/1a21f0721c7368d61fa3feef33d616de3f78c7d7), [f6923b1](https://github.com/tailwindlabs/tailwindcss/commit/f6923b1))
-- Added new `ring` utilities for creating outline/focus rings using box shadows ([#2747](https://github.com/tailwindlabs/tailwindcss/pull/2747), [879f088](https://github.com/tailwindlabs/tailwindcss/commit/879f088), [e0788ef](https://github.com/tailwindlabs/tailwindcss/commit/879f088))
-- Added `5` and `95` to opacity scale ([#2747](https://github.com/tailwindlabs/tailwindcss/pull/2747))
-- Add support for default duration and timing function values whenever enabling transitions ([#2755](https://github.com/tailwindlabs/tailwindcss/pull/2755))
-
-### Changed
-
-- Completely redesign color palette ([#2623](https://github.com/tailwindlabs/tailwindcss/pull/2623), [700866c](https://github.com/tailwindlabs/tailwindcss/commit/700866ce5e0c0b8d140be161c4d07fc6f31242bc), [#2633](https://github.com/tailwindlabs/tailwindcss/pull/2633))
-- Drop support for Node 8 and 10 ([#2582](https://github.com/tailwindlabs/tailwindcss/pull/2582))
-- Removed `target` feature and dropped any compatibility with IE 11 ([#2571](https://github.com/tailwindlabs/tailwindcss/pull/2571))
-- Upgrade to PostCSS 8 (but include PostCSS 7 compatibility build) ([729b400](https://github.com/tailwindlabs/tailwindcss/commit/729b400a685973f46af73c8a68b364f20f7c5e1e), [1d8679d](https://github.com/tailwindlabs/tailwindcss/commit/1d8679d37e0eb1ba8281b2076bade5fc754f47dd), [c238ed1](https://github.com/tailwindlabs/tailwindcss/commit/c238ed15b5c02ff51978965511312018f2bc2cae))
-- Removed `shadow-outline`, `shadow-solid`, and `shadow-xs` by default in favor of new `ring` API ([#2747](https://github.com/tailwindlabs/tailwindcss/pull/2747))
-- Switch `normalize.css` to `modern-normalize` ([#2572](https://github.com/tailwindlabs/tailwindcss/pull/2572))
-- Rename `whitespace-no-wrap` to `whitespace-nowrap` ([#2664](https://github.com/tailwindlabs/tailwindcss/pull/2664))
-- Rename `flex-no-wrap` to `flex-nowrap` ([#2676](https://github.com/tailwindlabs/tailwindcss/pull/2676))
-- Remove `clearfix` utility, recommend `flow-root` instead ([#2766](https://github.com/tailwindlabs/tailwindcss/pull/2766))
-- Disable `hover` and `focus` for `fontWeight` utilities by default ([f6923b1](https://github.com/tailwindlabs/tailwindcss/commit/f6923b1))
-- Remove `grid-gap` fallbacks needed for old versions of Safari ([5ec45fa](https://github.com/tailwindlabs/tailwindcss/commit/5ec45fa))
-- Change special use of 'default' in config to 'DEFAULT' ([#2580](https://github.com/tailwindlabs/tailwindcss/pull/2580))
-- New `@apply` implementation, slight backwards incompatibilities with previous behavior ([#2159](https://github.com/tailwindlabs/tailwindcss/pull/2159))
-- Make `theme` retrieve the expected resolved value when theme value is complex ([e13f083c4](https://github.com/tailwindlabs/tailwindcss/commit/e13f083c4bc48bf9870d27c966136a9584943127))
-- Move `truncate` class to `textOverflow` core plugin ([#2562](https://github.com/tailwindlabs/tailwindcss/pull/2562))
-- Remove `scrolling-touch` and `scrolling-auto` utilities ([#2573](https://github.com/tailwindlabs/tailwindcss/pull/2573))
-- Modernize default system font stacks ([#1711](https://github.com/tailwindlabs/tailwindcss/pull/1711))
-- Upgrade to PurgeCSS 3.0 ([8e4e0a0](https://github.com/tailwindlabs/tailwindcss/commit/8e4e0a0eb8dcbf84347c7562988b4f9afd344081))
-- Change default `text-6xl` font-size to 3.75rem instead of 4rem ([#2619](https://github.com/tailwindlabs/tailwindcss/pull/2619))
-- Ignore `[hidden]` elements within `space` and `divide` utilities instead of `template` elements ([#2642](https://github.com/tailwindlabs/tailwindcss/pull/2642))
-- Automatically prefix keyframes and animation names when a prefix is configured ([#2621](https://github.com/tailwindlabs/tailwindcss/pull/2621), [#2641](https://github.com/tailwindlabs/tailwindcss/pull/2641))
-- Merge `extend` objects deeply by default ([#2679](https://github.com/tailwindlabs/tailwindcss/pull/2679))
-- Respect `preserveHtmlElements` option even when using custom PurgeCSS extractor ([#2704](https://github.com/tailwindlabs/tailwindcss/pull/2704))
-- Namespace all internal custom properties under `tw-` to avoid collisions with end-user custom properties ([#2771](https://github.com/tailwindlabs/tailwindcss/pull/2771))
-
-## [2.0.0-alpha.25] - 2020-11-17
-
-### Fixed
-
-- Fix issue where `ring-offset-0` didn't work due to unitless `0` in `calc` function ([3de0c48](https://github.com/tailwindlabs/tailwindcss/commit/3de0c48))
-
-## [2.0.0-alpha.24] - 2020-11-16
-
-### Changed
-
-- Don't override ring color when overriding ring width with a variant ([e40079a](https://github.com/tailwindlabs/tailwindcss/commit/e40079a))
-
-### Fixed
-
-- Prevent shadow/ring styles from cascading to children ([e40079a](https://github.com/tailwindlabs/tailwindcss/commit/e40079a))
-- Ensure rings have a default color even if `colors.blue.500` is not present in config ([e40079a](https://github.com/tailwindlabs/tailwindcss/commit/e40079a))
-
-## [2.0.0-alpha.23] - 2020-11-16
-
-### Added
-
-- Add scripts for generating a PostCSS 7 compatible build alongside PostCSS 8 version ([#2773](https://github.com/tailwindlabs/tailwindcss/pull/2773))
-
-### Changed
-
-- All custom properties have been internally namespaced under `tw-` to avoid collisions with end-user custom properties ([#2771](https://github.com/tailwindlabs/tailwindcss/pull/2771))
-
-## [2.0.0-alpha.22] - 2020-11-16
-
-### Changed
-
-- ~~All custom properties have been internally namespaced under `tw-` to avoid collisions with end-user custom properties ([#2771](https://github.com/tailwindlabs/tailwindcss/pull/2771))~~ I made a git boo-boo, check alpha.23 instead
-
-## [2.0.0-alpha.21] - 2020-11-15
-
-### Changed
-
-- Upgrade to PostCSS 8, Autoprefixer 10, move `postcss` and `autoprefixer` to peerDependencies ([729b400](https://github.com/tailwindlabs/tailwindcss/commit/729b400))
-
-## [2.0.0-alpha.20] - 2020-11-13
-
-### Changed
-
-- Remove `clearfix` utility, recommend `flow-root` instead ([#2766](https://github.com/tailwindlabs/tailwindcss/pull/2766))
-
-## [2.0.0-alpha.19] - 2020-11-13
-
-### Fixed
-
-- Don't crash when color palette is empty ([278c203](https://github.com/tailwindlabs/tailwindcss/commit/278c203))
-
-## [2.0.0-alpha.18] - 2020-11-13
-
-### Changed
-
-- `black` and `white` have been added to `colors.js` ([b3ed724](https://github.com/tailwindlabs/tailwindcss/commit/b3ed724))
-
-### Fixed
-
-- Add support for colors as closures to `ringColor` and `ringOffsetColor`, previously would crash build ([62a47f9](https://github.com/tailwindlabs/tailwindcss/commit/62a47f9))
-
-## [2.0.0-alpha.17] - 2020-11-13
-
-### Changed
-
-- Remove `grid-gap` fallbacks needed for old versions of Safari ([5ec45fa](https://github.com/tailwindlabs/tailwindcss/commit/5ec45fa))
-
-## [2.0.0-alpha.16] - 2020-11-12
-
-### Added
-
-- Enable `focus`, `focus-within`, and `dark` variants (when enabled) for all ring utilities by default ([e0788ef](https://github.com/tailwindlabs/tailwindcss/commit/879f088))
-
-## [2.0.0-alpha.15] - 2020-11-11
-
-### Added
-
-- Added `ring-inset` utility for rendering rings as inset shadows ([879f088](https://github.com/tailwindlabs/tailwindcss/commit/879f088))
-
-### Changed
-
-- `ringWidth` utilities always reset ring styles to ensure no accidental variable inheritance through the cascade ([879f088](https://github.com/tailwindlabs/tailwindcss/commit/879f088))
-
-## [2.0.0-alpha.14] - 2020-11-11
-
-### Added
-
-- Enable `focus-within` for `outline` utilities by default ([f6923b1](https://github.com/tailwindlabs/tailwindcss/commit/f6923b1))
-- Enable `focus-within` for `ringWidth` utilities by default ([f6923b1](https://github.com/tailwindlabs/tailwindcss/commit/f6923b1))
-- Enable `group-hover` for `boxShadow` utilities by default ([f6923b1](https://github.com/tailwindlabs/tailwindcss/commit/f6923b1))
-- Enable `group-hover` and `focus-within` for `textDecoration` utilities by default ([f6923b1](https://github.com/tailwindlabs/tailwindcss/commit/f6923b1))
-
-### Changed
-
-- Disable `hover` and `focus` for `fontWeight` utilities by default ([f6923b1](https://github.com/tailwindlabs/tailwindcss/commit/f6923b1))
-
-## [2.0.0-alpha.13] - 2020-11-11
-
-### Added
-
-- Add support for default duration and timing function values whenever enabling transitions ([#2755](https://github.com/tailwindlabs/tailwindcss/pull/2755))
-
-## [2.0.0-alpha.12] - 2020-11-10
-
-### Fixed
-
-- Prevent `boxShadow` utilities from overriding ring shadows added by components like in the custom forms plugin ([c3dd3b6](https://github.com/tailwindlabs/tailwindcss/commit/c3dd3b68454ad418833a9edf7f3409cad66fb5b0))
-
-## [2.0.0-alpha.11] - 2020-11-09
-
-### Fixed
-
-- Convert `none` to `0 0 #0000` when used for shadows to ensure compatibility with `ring` utilities ([4eecc27](https://github.com/tailwindlabs/tailwindcss/commit/4eecc2751ca0c461e8da5bd5772ae650197a2e5d))
-
-## [2.0.0-alpha.10] - 2020-11-09
-
-### Added
-
-- Added new `ring` utilities ([#2747](https://github.com/tailwindlabs/tailwindcss/pull/2747))
-- Added `5` and `95` to opacity scale ([#2747](https://github.com/tailwindlabs/tailwindcss/pull/2747))
-
-### Changed
-
-- Removed `shadow-outline`, `shadow-solid`, and `shadow-xs` in favor of new `ring` API ([#2747](https://github.com/tailwindlabs/tailwindcss/pull/2747))
-
-## [2.0.0-alpha.9] - 2020-11-07
-
-### Added
-
-- Added `shadow-solid` utility, a 2px solid shadow that uses the current text color ([369cfae](https://github.com/tailwindlabs/tailwindcss/commit/369cfae2905a577033529c46a5e8ca58c69f5623))
-- Enable `focus-within` where useful by default ([1a21f072](https://github.com/tailwindlabs/tailwindcss/commit/1a21f0721c7368d61fa3feef33d616de3f78c7d7))
-
-### Changed
-
-- Update `shadow-outline` to use the new blue ([b078238](https://github.com/tailwindlabs/tailwindcss/commit/b0782385c9832d35a10929b38b4fcaf27e055d6b))
-
-## [2.0.0-alpha.8] - 2020-11-06
-
-### Added
-
-- Add `11` to spacing scale ([7f05204](https://github.com/tailwindlabs/tailwindcss/commit/7f05204ce7a5581b6845591448265c3c21afde86))
-- Add percentage-based height values ([5259560](https://github.com/tailwindlabs/tailwindcss/commit/525956065272dc53e8f8395f55f9ad13077a38d1))
-- Add indigo to the color palette by default ([700866c](https://github.com/tailwindlabs/tailwindcss/commit/700866ce5e0c0b8d140be161c4d07fc6f31242bc))
-
-### Changed
-
-- Use `coolGray` as the default gray ([700866c](https://github.com/tailwindlabs/tailwindcss/commit/700866ce5e0c0b8d140be161c4d07fc6f31242bc))
-
-## [2.0.0-alpha.7] - 2020-11-05
-
-### Changed
-
-- Revert upgrading to PostCSS 8 lol
-
-## [2.0.0-alpha.6] - 2020-11-04
-
-### Changed
-
-- Respect `preserveHtmlElements` option even when using custom PurgeCSS extractor ([#2704](https://github.com/tailwindlabs/tailwindcss/pull/2704))
-- Set font-family and line-height to `inherit` on `body` to behave more like v1.x ([#2729](https://github.com/tailwindlabs/tailwindcss/pull/2729))
-
-## [2.0.0-alpha.5] - 2020-10-30
-
-### Changed
-
-- Upgrade to PostCSS 8 ([59aa484](https://github.com/tailwindlabs/tailwindcss/commit/59aa484dfea0607d96bff6ef41b1150c78576c37))
-
-## [2.0.0-alpha.4] - 2020-10-29
-
-### Added
-
-- Support deep merging of arrays of objects under `extend` ([#2700](https://github.com/tailwindlabs/tailwindcss/pull/2700))
-
-## [2.0.0-alpha.3] - 2020-10-27
-
-### Added
-
-- Support flattening deeply nested color objects ([#2148](https://github.com/tailwindlabs/tailwindcss/pull/2148))
-- Support defining presets as functions ([#2680](https://github.com/tailwindlabs/tailwindcss/pull/2680))
-
-### Changed
-
-- Merge `extend` objects deeply by default ([#2679](https://github.com/tailwindlabs/tailwindcss/pull/2679))
-- Rename `flex-no-wrap` to `flex-nowrap` ([#2676](https://github.com/tailwindlabs/tailwindcss/pull/2676))
-
-## [2.0.0-alpha.2] - 2020-10-25
-
-### Added
-
-- Support `extend` in `variants` configuration ([#2651](https://github.com/tailwindlabs/tailwindcss/pull/2651))
-- Add `max-w-prose` class by default ([#2574](https://github.com/tailwindlabs/tailwindcss/pull/2574))
-
-### Changed
-
-- Revert use of logical properties for `space` and `divide` utilities ([#2644](https://github.com/tailwindlabs/tailwindcss/pull/2644))
-- `space` and `divide` utilities ignore elements with `[hidden]` now instead of only ignoring `template` elements ([#2642](https://github.com/tailwindlabs/tailwindcss/pull/2642))
-- Set default font on `body`, not just `html` ([#2643](https://github.com/tailwindlabs/tailwindcss/pull/2643))
-- Automatically prefix keyframes and animation names when a prefix is configured ([#2621](https://github.com/tailwindlabs/tailwindcss/pull/2621), [#2641](https://github.com/tailwindlabs/tailwindcss/pull/2641))
-- Rename `whitespace-no-wrap` to `whitespace-nowrap` ([#2664](https://github.com/tailwindlabs/tailwindcss/pull/2664))
-
-## [1.9.6] - 2020-10-23
-
-### Changed
-
-- The `presets` feature had unexpected behavior where a preset config without its own `presets` key would not extend the default config. ([#2662](https://github.com/tailwindlabs/tailwindcss/pull/2662))
-
-  If you were depending on this unexpected behavior, just add `presets: []` to your own preset to exclude the default configuration.
-
-## [2.0.0-alpha.1] - 2020-10-20
-
-### Added
-
-- Added dark mode support ([#2279](https://github.com/tailwindlabs/tailwindcss/pull/2279), [#2631](https://github.com/tailwindlabs/tailwindcss/pull/2631))
-- Added `overflow-ellipsis` and `overflow-clip` utilities ([#1289](https://github.com/tailwindlabs/tailwindcss/pull/1289))
-- Add `transform-gpu` to force hardware acceleration on transforms when beneficial ([#1380](https://github.com/tailwindlabs/tailwindcss/pull/1380))
-- Extended spacing scale ([#2630](https://github.com/tailwindlabs/tailwindcss/pull/2630))
-- Add spacing scale to `inset` plugin ([#2630](https://github.com/tailwindlabs/tailwindcss/pull/2630))
-- Enable useful relative sizes for more plugins ([#2630](https://github.com/tailwindlabs/tailwindcss/pull/2630))
-- Extend font size scale ([#2609](https://github.com/tailwindlabs/tailwindcss/pull/2609), [#2619](https://github.com/tailwindlabs/tailwindcss/pull/2619))
-- Support using `@apply` with complex classes ([#2159](https://github.com/tailwindlabs/tailwindcss/pull/2159))
-- Add new `2xl` breakpoint ([#2609](https://github.com/tailwindlabs/tailwindcss/pull/2609))
-- Add default line-height values for font-size utilities ([#2609](https://github.com/tailwindlabs/tailwindcss/pull/2609))
-- Support defining theme values using arrays wherever it makes sense (box-shadow, transition-property, etc.) ([e13f083c4](https://github.com/tailwindlabs/tailwindcss/commit/e13f083c4bc48bf9870d27c966136a9584943127))
-- Enable `group-hover` for color utilities by default ([28985b6](https://github.com/tailwindlabs/tailwindcss/commit/28985b6cd592e72d4849fdb9ce97eb045744e09c))
-- Enable `focus` for z-index utilities by default ([ae5b3d3](https://github.com/tailwindlabs/tailwindcss/commit/ae5b3d312d5000ae9c2065001f3df7add72dc365))
-
-### Changed
-
-- New `@apply` implementation, slight backwards incompatibilities with previous behavior ([#2159](https://github.com/tailwindlabs/tailwindcss/pull/2159))
-- Move `truncate` class to `textOverflow` core plugin ([#2562](https://github.com/tailwindlabs/tailwindcss/pull/2562))
-- Removed `target` feature and dropped any compatibility with IE 11 ([#2571](https://github.com/tailwindlabs/tailwindcss/pull/2571))
-- Switch `normalize.css` to `modern-normalize` ([#2572](https://github.com/tailwindlabs/tailwindcss/pull/2572))
-- Remove `scrolling-touch` and `scrolling-auto` utilities ([#2573](https://github.com/tailwindlabs/tailwindcss/pull/2573))
-- Change special use of 'default' in config to 'DEFAULT' ([#2580](https://github.com/tailwindlabs/tailwindcss/pull/2580))
-- Drop support for Node 8 and 10 ([#2582](https://github.com/tailwindlabs/tailwindcss/pull/2582))
-- Modernize default system font stacks ([#1711](https://github.com/tailwindlabs/tailwindcss/pull/1711))
-- Upgrade to PurgeCSS 3.0
-- ~~Upgrade to PostCSS 8.0~~ Reverted for now
-- Use logical properties for `space` and `divide` utilities ([#1883](https://github.com/tailwindlabs/tailwindcss/pull/1883))
-- Make `theme` retrieve the expected resolved value when theme value is complex ([e13f083c4](https://github.com/tailwindlabs/tailwindcss/commit/e13f083c4bc48bf9870d27c966136a9584943127))
-- Adjust default font-size scale to include 60px instead of 64px ([#2619](https://github.com/tailwindlabs/tailwindcss/pull/2619))
-- Update default colors in Preflight to match new color palette ([#2633](https://github.com/tailwindlabs/tailwindcss/pull/2633))
-
-## [1.9.5] - 2020-10-19
-
-### Fixed
-
-- Fix issue where using `theme` with default line-heights did not resolve correctly
-
-## [1.9.4] - 2020-10-17
-
-### Fixed
-
-- Fix issue changing plugins defined using the `withOptions` API would not trigger rebuilds in watch processes
-
-## [1.9.3] - 2020-10-16
-
-### Fixed
-
-- Fix issue where `tailwindcss init --full` scaffolded a corrupt config file (https://github.com/tailwindlabs/tailwindcss/issues/2556)
-
-### Changed
-
-- Remove console warnings about upcoming breaking changes
-
-## [1.9.2] - 2020-10-14
-
-### Fixed
-
-- Merge plugins when merging config with preset ([#2561](https://github.com/tailwindlabs/tailwindcss/pulls/#2561)
-- Use `word-wrap` and `overflow-wrap` together, not one or the other since `word-wrap` is IE-only
-
-## [1.9.1] - 2020-10-14
-
-### Fixed
-
-- Don't import `corePlugins` in `resolveConfig` to avoid bundling browser-incompatible code ([#2548](https://github.com/tailwindlabs/tailwindcss/pull/2548))
-
-## [1.9.0] - 2020-10-12
-
-### Added
-
-- Add new `presets` config option ([#2474](https://github.com/tailwindlabs/tailwindcss/pull/2474))
-- Scaffold new `tailwind.config.js` files with available `future` flags commented out ([#2379](https://github.com/tailwindlabs/tailwindcss/pull/2379))
-- Add `col-span-full` and `row-span-full` ([#2471](https://github.com/tailwindlabs/tailwindcss/pull/2471))
-- Make `outline` configurable, `outline-none` more accessible by default, and add `outline-black` and `outline-white` ([#2460](https://github.com/tailwindlabs/tailwindcss/pull/2460))
-- Add additional small `rotate` and `skew` values ([#2528](https://github.com/tailwindlabs/tailwindcss/pull/2528))
-- Add `xl`, `2xl`, and `3xl` border radius values ([#2529](https://github.com/tailwindlabs/tailwindcss/pull/2529))
-- Add new utilities for `grid-auto-columns` and `grid-auto-rows` ([#2531](https://github.com/tailwindlabs/tailwindcss/pull/2531))
-- Promote `defaultLineHeights` and `standardFontWeights` from experimental to future
-
-### Fixed
-
-- Don't escape keyframe values ([#2432](https://github.com/tailwindlabs/tailwindcss/pull/2432))
-- Use `word-wrap` instead of `overflow-wrap` in `ie11` target mode ([#2391](https://github.com/tailwindlabs/tailwindcss/pull/2391))
-
-### Experimental
-
-- Add experimental `2xl` breakpoint ([#2468](https://github.com/tailwindlabs/tailwindcss/pull/2468))
-- Rename `{u}-max-content` and `{u}-min-content` utilities to `{u}-max` and `{u}-min` in experimental extended spacing scale ([#2532](https://github.com/tailwindlabs/tailwindcss/pull/2532))
-- Support disabling dark mode variants globally ([#2530](https://github.com/tailwindlabs/tailwindcss/pull/2530))
-
-## [1.8.13] - 2020-10-09
-
-### Fixed
-
-- Support defining colors as closures even when opacity variables are not supported ([#2536](https://github.com/tailwindlabs/tailwindcss/pull/2515))
-
-## [1.8.12] - 2020-10-07
-
-### Fixed
-
-- Reset color opacity variable in utilities generated using closure colors ([#2515](https://github.com/tailwindlabs/tailwindcss/pull/2515))
-
-## [1.8.11] - 2020-10-06
-
-- Make `tailwindcss.plugin` work in ESM environments for reasons
-
-## [1.8.10] - 2020-09-14
-
-### Fixed
-
-- Prevent new `dark` experiment from causing third-party `dark` variants to inherit stacking behavior ([#2382](https://github.com/tailwindlabs/tailwindcss/pull/2382))
-
-## [1.8.9] - 2020-09-13
-
-### Fixed
-
-- Add negative spacing values to inset plugin in the `extendedSpacingScale` experiment ([#2358](https://github.com/tailwindlabs/tailwindcss/pull/2358))
-- Fix issue where `!important` was stripped from declarations within rules that used `@apply` with `applyComplexClasses` ([#2376](https://github.com/tailwindlabs/tailwindcss/pull/2376))
-
-### Changed
-
-- Add `future` section to config stubs ([#2372](https://github.com/tailwindlabs/tailwindcss/pull/2372), [3090b98](https://github.com/tailwindlabs/tailwindcss/commit/3090b98ece766b1046abe5bbaa94204e811f7fac))
-
-## [1.8.8] - 2020-09-11
-
-### Fixed
-
-- Register dark mode plugin outside of `resolveConfig` code path ([#2368](https://github.com/tailwindlabs/tailwindcss/pull/2368))
-
-## [1.8.7] - 2020-09-10
-
-### Fixed
-
-- Fix issue where classes in escaped strings (like `class=\"block\"`) weren't extracted properly for purging ([#2364](https://github.com/tailwindlabs/tailwindcss/pull/2364))
-
-## [1.8.6] - 2020-09-09
-
-### Fixed
-
-- Fix issue where container padding not applied when using object syntax ([#2353](https://github.com/tailwindlabs/tailwindcss/pull/2353))
-
-## [1.8.5] - 2020-09-07
-
-### Fixed
-
-- Fix issue where `resolveConfig` didn't take into account configs added by feature flags ([#2347](https://github.com/tailwindlabs/tailwindcss/pull/2347))
-
-## [1.8.4] - 2020-09-06
-
-### Fixed
-
-- Fix [issue](https://github.com/tailwindlabs/tailwindcss/issues/2258) where inserting extra PurgeCSS control comments could break integrated PurgeCSS support
-- Fix issue where dark variant in 'class' mode was incompatible with 'group-hover' variant ([#2337](https://github.com/tailwindlabs/tailwindcss/pull/2337))
-- Support basic nesting structure with `@apply` when using the `applyComplexClasses` experiment ([#2271](https://github.com/tailwindlabs/tailwindcss/pull/2271))
-
-### Changed
-
-- Rename `font-hairline` and `font-thin` to `font-thin` and `font-extralight` behind `standardFontWeights` flag (experimental until v1.9.0) ([#2333](https://github.com/tailwindlabs/tailwindcss/pull/2333))
-
-## [1.8.3] - 2020-09-05
-
-### Fixed
-
-- Fix issue where `font-variant-numeric` utilities would break in combination with most CSS minifier configurations ([f3660ce](https://github.com/tailwindlabs/tailwindcss/commit/f3660ceed391cfc9390ca4ea1a729a955e64b895))
-- Only warn about `conservative` purge mode being deprecated once per process ([58781b5](https://github.com/tailwindlabs/tailwindcss/commit/58781b517daffbaf80fc5c0791d311f53b2d67d8))
-
-## [1.8.2] - 2020-09-04
-
-### Fixed
-
-- Fix bug where dark mode variants would cause an error if you had a `plugins` array in your config ([#2322](https://github.com/tailwindlabs/tailwindcss/pull/2322))
-
-## [1.8.1] - 2020-09-04
-
-### Fixed
-
-- Fix bug in the new font-variant-numeric utilities which broke the whole rule ([#2318](https://github.com/tailwindlabs/tailwindcss/pull/2318))
-- Fix bug while purging ([#2320](https://github.com/tailwindlabs/tailwindcss/pull/2320))
-
-## [1.8.0] - 2020-09-04
-
-### Added
-
-- Dark mode variant (experimental) ([#2279](https://github.com/tailwindlabs/tailwindcss/pull/2279))
-- New `preserveHtmlElements` option for `purge` ([#2283](https://github.com/tailwindlabs/tailwindcss/pull/2283))
-- New `layers` mode for `purge` ([#2288](https://github.com/tailwindlabs/tailwindcss/pull/2288))
-- New `font-variant-numeric` utilities ([#2305](https://github.com/tailwindlabs/tailwindcss/pull/2305))
-- New `place-items`, `place-content`, `place-self`, `justify-items`, and `justify-self` utilities ([#2306](https://github.com/tailwindlabs/tailwindcss/pull/2306))
-- Support configuring variants as functions ([#2309](https://github.com/tailwindlabs/tailwindcss/pull/2309))
-
-### Changed
-
-- CSS within `@layer` at-rules are now grouped with the corresponding `@tailwind` at-rule ([#2312](https://github.com/tailwindlabs/tailwindcss/pull/2312))
-
-### Deprecated
-
-- `conservative` purge mode, deprecated in favor of `layers`
-
-## [1.7.6] - 2020-08-29
-
-### Fixed
-
-- Fix bug where the new experimental `@apply` implementation broke when applying a variant class with the important option globally enabled
-
-## [1.7.5] - 2020-08-28
-
-### Changed
-
-- Update lodash to latest to silence security warnings
-
-## [1.7.4] - 2020-08-26
-
-### Added
-
-- Add new -p flag to CLI to quickly scaffold a `postcss.config.js` file
-
-### Changed
-
-- Make `@apply` insensitive to whitespace in the new `applyComplexClasses` experiment
-
-### Fixed
-
-- Fix bug where the new `applyComplexClasses` experiment didn't behave as expected with rules with multiple selectors, like `.foo, .bar { color: red }`
-
-## [1.7.3] - 2020-08-20
-
-### Changed
-
-- Log feature flag notices to stderr instead of stdout to preserve compatibility with pipe-based build systems
-- Add missing bg-none utility for disabling background images
-
-### Fixed
-
-- Fix bug that prevented defining colors as closures when the `gradientColorStops` plugin was enabled
-
-## [1.7.2] - 2020-08-19
-
-### Added
-
-- Reuse generated CSS as much as possible in long-running processes instead of needlessly recalculating
-
-## [1.7.1] - 2020-08-28
-
-### Changed
-
-- Don't issue duplicate flag notices in long-running build processes
-
-## [1.7.0] - 2020-08-28
-
-### Added
-
-- Gradients
-- New background-clip utilities
-- New `contents` display utility
-- Default letter-spacing per font-size
-- Divide border styles
-- Access entire config object from plugins
-- Define colors as closures
-- Use `@apply` with variants and other complex classes (experimental)
-- New additional color-palette (experimental)
-- Extended spacing scale (experimental)
-- Default line-heights per font-size by default (experimental)
-- Extended font size scale (experimental)
-
-### Deprecated
-
-- Deprecated gap utilities
-
-## [1.6.3] - 2020-08-18
-
-### Fixed
-
-- Fixes issue where motion-safe and motion-reduce variants didn't stack correctly with group-hover variants
-
-## [1.6.2] - 2020-08-03
-
-### Fixed
-
-- Fixes issue where `@keyframes` respecting the important option would break animations in Chrome
-
-## [1.6.1] - 2020-08-02
-
-### Fixed
-
-- Fixes an issue where animation keyframes weren't included in the build without @tailwind base (#2108)
-
-## [1.6.0] - 2020-07-28
-
-### Added
-
-- Animation support
-- New `prefers-reduced-motion` variants
-- New `overscroll-behaviour` utilities
-- Generate CSS without an input file
-
-## [1.5.2] - 2020-07-21
-
-### Fixed
-
-- Fixes issue where you could no longer use `@apply` with unprefixed class names if you had configured a prefix
-
-## [1.5.1] - 2020-07-15
-
-### Fixed
-
-- Fixes accidental breaking change where adding component variants using the old manual syntax (as recommended in the docs) stopped working
-
-## [1.5.0] - 2020-07-15
-
-### Added
-
-- Component `variants` support
-- Responsive `container` variants
-- New `focus-visible` variant
-- New `checked` variant
-
-## v0.0.0-658250a96 - 2020-07-12 [YANKED]
-
-No release notes
-
-## [1.4.6] - 2020-05-08
-
-### Changed
-
-- Explicitly error when using a class as the important config option instead of just generating the wrong CSS
-
-## [1.4.5] - 2020-05-06
-
-### Fixed
-
-- Fix bug where the `divideColor` plugin was using the wrong '' in IE11 target mode
-
-## [1.4.4] - 2020-05-01
-
-### Fixed
-
-- Fix bug where target: 'browserslist' didn't work, only `target: ['browserslist', {...}]` did
-
-## [1.4.3] - 2020-05-01
-
-### Changed
-
-- Don't generate unnecessary CSS in color plugins when color opacity utilities are disabled
-
-## [1.4.2] - 2020-05-01
-
-### Fixed
-
-- Fix issue where `purge: { enabled: false }` was ignored, add `purge: false` shorthand
-
-## [1.4.1] - 2020-04-30
-
-### Changed
-
-- Improve built-in PurgeCSS extractor to better support Haml and Slim templates
-
-## [1.4.0] - 2020-04-29
-
-### Added
-
-- New color opacity utilities
-- Built-in PurgeCSS
-- IE 11 target mode (experimental)
-
-## [1.3.5] - 2020-04-23
-
-### Removed
-
-- Drop `fs-extra` dependency to `^8.0.0` to preserve Node 8 compatibility until Tailwind 2.0
-
-### Fixed
-
-- Fix missing unit in calc bug in space plugin (`space-x-0` didn't work for example)
-
-## [1.3.4] - 2020-04-21
-
-### Fixed
-
-- Fix bug where `divide-{x/y}-0` utilities didn't work due to missing unit in `calc` call
-
-## [1.3.3] - 2020-04-21
-
-### Added
-
-- Add forgotten responsive variants for `space`, `divideWidth`, and `divideColor` utilities
-
-## [1.3.1] - 2020-04-21
-
-### Fixed
-
-- Fix bug where the `space-x` utilities were not being applied correctly due to referencing `--space-y-reverse` instead of `--space-x-reverse`
-
-## [1.3.0] - 2020-04-21
-
-### Added
-
-- New `space` and `divide` layout utilities
-- New `transition-delay` utilities
-- New `group-focus` variant
-- Support for specifying a default line-height for each font-size utility
-- Support for breakpoint-specific padding for `container` class
-- Added `current` to the default color palette
-- New `inline-grid` utility
-- New `flow-root` display utility
-- New `clear-none` utility
-
-## [1.2.0] - 2020-02-05
-
-### Added
-
-- CSS Transition support
-- CSS Transform support
-- CSS Grid support
-- Added `max-w-{screen}` utilities
-- Added `max-w-none` utility
-- Added `rounded-md` utility
-- Added `shadow-sm` utility
-- Added `shadow-xs` utility
-- Added `stroke-width` utilities
-- Added fixed line-height utilities
-- Added additional display utilities for table elements
-- Added box-sizing utilities
-- Added clear utilities
-- Config file dependencies are now watchable
-- Added new `plugin` and `plugin.withOptions` APIs
-
-### Changed
-
-- Allow plugins to extend the user's config
-
-## [1.2.0-canary.8] - 2020-02-05
-
-### Added
-
-- Add additional fixed-size line-height utilities
-
-## [1.2.0-canary.7] - 2020-02-04
-
-### Removed
-
-- Remove Inter from font-sans, plan to add later under new class
-
-## [1.2.0-canary.6] - 2020-02-03
-
-### Added
-
-- Add system-ui to default font stack
-- Add shadow-xs, increase shadow-sm alpha to 0.05
-- Support import syntax even without postcss-import
-- Alias tailwind bin to tailwindcss
-- Add fill/stroke to transition-colors
-- Add transition-shadow, add box-shadow to default transition
-- Combine gap/columnGap/rowGap
-- Add grid row utilities
-- Add skew utilities
-
-### Changed
-
-- Use font-sans as default font
-
-## [1.2.0-canary.5] - 2020-01-08
-
-### Added
-
-- Adds missing dependency `resolve` which is required for making config dependencies watchable
-
-## [1.2.0-canary.4] - 2020-01-08
-
-### Added
-
-- CSS Transition support
-- CSS Transform support
-- CSS Grid support
-- New `max-w-{screen}` utilities
-- Added `max-w-none` utility
-- Added "Inter" to the default sans-serif font stack
-- Add `rounded-md` utility
-- Add `shadow-sm` utility
-- Added stroke-width utilities
-- Added additional display utilities for table elements
-- Added box-sizing utilities
-- Added clear utilities
-- Config file dependencies are now watchable
-- Allow plugins to extend the user's config
-- Add new `plugin` and `plugin.withOptions` APIs
-
-## [v1.2.0-canary.3] - 2020-01-08 [YANKED]
-
-No release notes
-
-## [1.1.4] - 2019-11-25
-
-### Changed
-
-- Note: Although this is a bugfix it could affect your site if you were working around the bug in your own code by not prefixing the `.group` class. I'm sorry 😞
-
-### Fixed
-
-- Fixes a bug where the `.group` class was not receiving the user's configured prefix when using the `prefix` option
-
-## [1.2.0-canary.1] - 2019-10-22
-
-### Changed
-
-- Don't watch `node_modules` files for changes
-
-### Fixed
-
-- Fixes significant build performance regression in `v1.2.0-canary.0`
-
-## [1.1.3] - 2019-10-22
-
-### Fixed
-
-- Fixes an issue where in some cases function properties in the user's `theme` config didn't receive the second utils argument
-
-## [1.2.0-canary.0] - 2019-10-14
-
-### Added
-
-- Automatically watch all config file dependencies (plugins, design tokens imported from other files, etc.) for changes when build watcher is running
-- Add `justify-evenly` utility
-
-### Changed
-
-- Allow plugins to add their own config file to be resolved with the user's custom config
-
-## [1.1.2] - 2019-08-14
-
-### Fixed
-
-- Fixes a bug with horizontal rules where they were displayed with a 2px border instead of a 1px border
-- Fixes a bug with horizontal rules where they were rendered with default top/bottom margin
-
-## [1.1.1] - 2019-08-09
-
-### Fixed
-
-- Fixes issue where values like `auto` would fail to make it through the default negative margin config
-
-## [1.1.0] - 2019-08-06
-
-### Added
-
-- Added utilities for screenreader visibility
-- Added utilities for placeholder color
-- First, last, even, and odd child variants
-- Disabled variant
-- Visited variant
-- Increase utility specificity using a scope instead of !important
-- Add hover/focus variants for opacity by default
-- Added `border-double` utility
-- Support negative prefix for boxShadow and letterSpacing plugins
-- Support passing config path via object
-
-### Fixed
-
-- Placeholders no longer have a default opacity
-- Make horizontal rules visible by default
-- Generate correct negative margins when using calc
-
-## [1.0.6] - 2019-08-01
-
-### Fixed
-
-- Fixes issue where modifiers would mutate nested rules
-
-## [1.0.5] - 2019-07-11
-
-### Added
-
-- Support built-in variants for utilities that include pseudo-elements
-
-### Changed
-
-- Update several dependencies, including postcss-js which fixes an issue with using `!important` directly in Tailwind utility plugins
-
-## [1.0.4] - 2019-06-11
-
-### Changed
-
-- Increase precision of percentage width values to avoid 1px rounding issues in grid layouts
-
-## [1.0.3] - 2019-06-01
-
-### Changed
-
-- Throws an error when someone tries to use `@tailwind preflight` instead of `@tailwind base`, this is the source of many support requests
-
-## [1.0.2] - 2019-05-27
-
-### Fixed
-
-- Fixes a bug where `@screen` rules weren't bubbled properly when nested in plugins
-
-## [1.0.1] - 2019-05-13
-
-### Fixed
-
-- Fixes a bug where global variants weren't properly merged
-
-## [1.0.0] - 2019-05-13
-
-No release notes
-
-## [1.0.0-beta.10] - 2019-05-12
-
-### Changed
-
-- Use `9999` and `-9999` for `order-last` and `order-first` utilities respectively
-
-## [1.0.0-beta.9] - 2019-05-12
-
-### Added
-
-- Add `bg-repeat-round` and `bg-repeat-space` utilities
-- Add `select-all` and `select-auto` utilities
-
-### Changed
-
-- Make all utilities responsive by default
-
-## [1.0.0-beta.8] - 2019-04-28
-
-### Added
-
-- Adds `responsive` variants for the new order utilities by default, should have been there all along
-
-## [1.0.0-beta.7] - 2019-04-27
-
-### Fixed
-
-- Fixes a bug where you couldn't extend the margin config
-
-## [1.0.0-beta.6] - 2019-04-27
-
-### Added
-
-- Added support for negative inset (`-top-6`, `-right-4`) and z-index (`-z-10`) utilities, using the same negative key syntax supported by the margin plugin
-- Add missing fractions as well as x/12 fractions to width scale
-- Add `order` utilities
-- Add `cursor-text` class by default
-
-### Changed
-
-- Make it possible to access your fully merged config file in JS
-
-### Removed
-
-- Removed `negativeMargin` plugin, now the regular `margin` plugin supports generating negative classes (like `-mx-6`) by using negative keys in the config, like `-6`
-
-## [1.0.0-beta.5] - 2019-04-18
-
-### Changed
-
-- Make it possible to disable all core plugins using `corePlugins: false`
-- Make it possible to configure a single list of variants that applies to all utility plugins
-- Make it possible to safelist which core plugins should be enabled
-
-### Fixed
-
-- Fix a bug where stroke and fill plugins didn't properly handle the next object syntax for color definitions
-- Fix a bug where you couldn't have comments near `@apply` directives
-
-## [1.0.0-beta.4] - 2019-03-29
-
-### Added
-
-- Add the `container` key to the scaffolded config file when generated with `--full`
-
-### Changed
-
-- Bumps node dependency to 8.9.0 so we can keep our default config file clean, 6.9.0 is EOL next month anyways
-
-### Removed
-
-- Removes `SFMono-Regular` from the beginning of the default monospace font stack, it has no italic support and Menlo looks better anyways
-
-### Fixed
-
-- Fixes an issue where the user's config object was being mutated during processing (only affects @bradlc 😅)
-- Fixes an issue where you couldn't use a closure to define theme sections under `extend`
-
-## [1.0.0-beta.3] - 2019-03-18
-
-### Added
-
-- Support lazy evaluation in `theme.extend`
-
-### Changed
-
-- Use lighter default border color
-- Revert #745 and use `bolder` for strong tags by default instead of `fontWeight.bold`
-
-## [1.0.0-beta.2] - 2019-03-17
-
-### Changed
-
-- Closures in the `theme` section of the config file are now passed a `theme` function instead of an object
-
-### Fixed
-
-- Fix issue where `@screen` didn't work at all 🙃
-
-## [1.0.0-beta.1] - 2019-03-17
-
-### Added
-
-- New config file structure
-- New expanded default color palette
-- New default `maxWidth` scale
-- Added utilities for `list-style-type` and `list-style-position`
-- Added `break-all` utility
-
-### Changed
-
-- `object-position` utilities are now customizable under `theme.objectPosition`
-- `cursor` utilities are now customizable under `theme.cursors`
-- `flex-grow/shrink` utilities are now customizable under `theme.flexGrow/flexShrink`
-- Default variant output position can be customized
-- Extended default line-height scale
-- Extended default letter-spacing scale
-
-## [0.7.4] - 2019-01-23
-
-### Changed
-
-- Update our PostCSS related dependencies
-
-### Fixed
-
-- Fix bug where class names containing a `.`character had the responsive prefix added in the wrong place
-
-## [0.7.3] - 2018-12-03
-
-### Changed
-
-- Update Normalize to v8.0.1
-
-## [0.7.2] - 2018-11-05
-
-### Added
-
-- Add `--no-autoprefixer` option to CLI `build` command
-
-## [0.7.1] - 2018-11-05
-
-### Changed
-
-- Update autoprefixer dependency
-
-## [0.7.0] - 2018-10-31
-
-### Added
-
-- Registering new variants from plugins
-- Variant order can be customized per module
-- Added focus-within variant
-- Fancy CLI updates
-- Option to generate config without comments
-- Make configured prefix optional when using @apply
-- Improve Flexbox behavior in IE 10/11
-
-### Changed
-
-- Variant order in modules is now significant
-- Normalize.css updated to v8.0.0
-- Removed CSS fix for Chrome 62 button border radius change
-
-## [0.6.6] - 2018-09-21
-
-### Changed
-
-- Promote `shadowLookup` from experiment to official feature
-
-## [0.6.5] - 2018-08-18
-
-### Fixed
-
-- Fixes an issue where units were stripped from zero value properties
-
-## [0.6.4] - 2018-07-16
-
-### Fixed
-
-- Fixes an issue where changes to your configuration file were ignored when using `webpack --watch`
-
-## [0.6.3] - 2018-07-11
-
-### Fixed
-
-- Fixes an issue where `@tailwind utilities` generated no output
-
-## [0.6.2] - 2018-03-11
-
-### Added
-
-- Added table layout utilities for styling tables
-- Configuration can now be passed as an object
-- Registering new variants from plugins (experimental)
-- Allow `@apply`-ing classes that aren't defined but would be generated (experimental)
-
-### Changed
-
-- Default config file changes
-
-## [0.6.1] - 2018-06-22
-
-### Fixed
-
-- Fix incorrect box-shadow syntax for the `.shadow-outline` utility 🤦‍♂️
-
-## [0.6.0] - 2018-06-21
-
-### Added
-
-- Added border collapse utilities for styling tables
-- Added more axis-specific overflow utilities
-- Added `.outline-none` utility for suppressing focus styles
-- Added `.shadow-outline` utility as an alternative to default browser focus styles
-- Extended default padding, margin, negative margin, width, and height scales
-- Enable focus and hover variants for more modules by default
-
-### Changed
-
-- Removed default `outline: none !important` styles from focusable but keyboard-inaccessible elements
-- Moved screen prefix for responsive `group-hover` variants
-- Default config file changes
-
-## [0.5.3] - 2018-05-07
-
-### Changed
-
-- Improve sourcemaps for replaced styles like `preflight`
-
-### Fixed
-
-- Fix bug where informational messages were being logged to stdout during build, preventing the ability to use Tailwind's output in Unix pipelines
-
-## [0.5.2] - 2018-03-29
-
-### Fixed
-
-- Fixes an issue with a dependency that had a security vulnerability
-
-## [0.5.1] - 2018-03-13
-
-### Removed
-
-- Reverts a change that renamed the `.roman` class to `.not-italic` due to the fact that it breaks compatibility with cssnext: [postcss/postcss-selector-not#10](https://github.com/postcss/postcss-selector-not/issues/10). We'll stick with `.roman` for now with a plan to switch to `.not-italic` in another breaking version should that issue get resolved in postcss-selector-not.
-
-## [0.5.0] - 2018-03-13
-
-### Added
-
-- Plugin system
-- Added `.sticky position` utility
-- Added `.cursor-wait` and `.cursor-move` utilities
-- Added `.bg-auto` background size utility
-- Background sizes are now customizable
-- Support for active variants
-- Better postcss-import support
-- Configuration options for the `.container` component
-
-### Changed
-
-- The `.container` component is now a built-in plugin
-- State variant precedence changes
-- New config file keys
-- `.overflow-x/y-scroll` now set `overflow: scroll` instead of `overflow: auto`
-- `.roman` renamed to `.not-italic`
-
-## [0.4.3] - 2018-03-13
-
-### Changed
-
-- Use `global.Object` to avoid issues with polyfills when importing the Tailwind config into other JS
-
-## [0.4.2] - 2018-03-01
-
-### Added
-
-- Add support for using a function to define class prefixes in addition to a simple string
-
-### Changed
-
-- Improve the performance of @apply by using a lookup table instead of searching
-
-### Fixed
-
-- Fix an issue where borders couldn't be applied to `img` tags without specifying a border style
-
-## [0.4.1] - 2018-01-22
-
-### Changed
-
-- Make default sans-serif font stack more future proof and safe to use with CSS `font` shorthand
-- Replace stylefmt with Perfectionist to avoid weird stylelint conflicts
-
-## [0.4.0] - 2017-12-15
-
-### Added
-
-- `@apply`'d classes can now be made `!important` explicitly
-
-### Changed
-
-- `@apply` now strips `!important` from any mixed in classes
-- Default color palette tweaks
-
-## [0.3.0] - 2017-12-01
-
-### Added
-
-- Enable/disable modules and control which variants are generated for each
-- Focus variants
-- Group hover variants
-- New `@variants` at-rule
-- Customize the separator character
-- Missing config keys now fallback to their default values
-- New utilities
-
-### Changed
-
-- Lists now have no margins by default
-- `.pin` no longer sets width and height to 100%
-- SVG `fill` no longer defaults to currentcolor
-
-## [0.2.2] - 2017-11-19
-
-### Fixed
-
-- Fix issue with dist files not being published due to bug in latest npm
-
-## [0.2.1] - 2017-11-18
-
-### Fixed
-
-- Fix overly specific border-radius reset for Chrome 62 button styles
-
-## [0.2.0] - 2017-11-17
-
-### Added
-
-- Add a custom prefix to all utilities
-- Optionally make all utilities `!important`
-- Round element corners independently
-- Cascading border colors and styles
-
-### Changed
-
-- `auto` is no longer a hard-coded margin value
-- The `defaultConfig` function is now a separate module
-- Rounded utilities now combine position and radius size
-- Border width utilities no longer affect border color/style
-- `@apply` is now very strict about what classes can be applied
-- Add `options` key to your config
-- Spacing, radius, and border width utility declaration order changes
-
-## [0.1.6] - 2017-11-09
-
-### Fixed
-
-- Fix CDN files not being published to npm
-
-## [0.1.5] - 2017-11-08
-
-### Changed
-
-- Apply the same default placeholder styling that's applied to inputs to textareas
-
-### Fixed
-
-- Fix CLI tool not loading config files properly
-
-## [0.1.4] - 2017-11-06
-
-### Added
-
-- Autoprefix dist assets for quick hacking and prototyping
-- Add `my-auto`, `mt-auto`, and `mb-auto` margin utilities
-- Add `sans-serif` to end of default `sans` font stack
-
-### Changed
-
-- If using Webpack, it will now watch your config file changes
-- When running `tailwind init [filename]`, automatically append `.js` to filename if not present
-- Support default fallback value in `config(...)` function, ie. `config('colors.blue', #0000ff)`
-- Don't output empty media queries if Tailwind processes a file that doesn't use Tailwind
-
-### Fixed
-
-- Move list utilities earlier in stylesheet to allow overriding with spacing utilities
-
-## [0.1.3] - 2017-11-02
-
-### Added
-
-- Add new `.scrolling-touch` and `.scrolling-auto` utilities for controlling inertial scroll behavior on WebKit touch devices
-- Generate separate dist files for preflight, utilities, and tailwind for CDN usage
-
-## [0.1.2] - 2017-11-01
-
-### Changed
-
-- Target Node 6.9.0 explicitly (instead of 8.6 implicitly) to support more users
-
-### Fixed
-
-- Fix issue with config option not being respected in `tailwind build`
-
-## [0.1.1] - 2017-11-01
-
-### Fixed
-
-- Fix `tailwind build` CLI command not writing output files
-
-## [0.1.0] - 2017-11-01
-
-### Added
-
-- Everything!
-
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.3...HEAD
-[4.3.3]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.2...v4.3.3
-[4.3.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.1...v4.3.2
-[4.3.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.0...v4.3.1
-[4.3.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.4...v4.3.0
-[4.2.4]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.3...v4.2.4
-[4.2.3]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.2...v4.2.3
-[4.2.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.1...v4.2.2
-[4.2.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.0...v4.2.1
-[4.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.18...v4.2.0
-[4.1.18]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.17...v4.1.18
-[3.4.19]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.18...v3.4.19
-[4.1.17]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.16...v4.1.17
-[4.1.16]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.15...v4.1.16
-[4.1.15]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.14...v4.1.15
-[4.1.14]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.13...v4.1.14
-[3.4.18]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.17...v3.4.18
-[4.1.13]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.12...v4.1.13
-[4.1.12]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.11...v4.1.12
-[4.1.11]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.10...v4.1.11
-[4.1.10]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.9...v4.1.10
-[4.1.9]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.8...v4.1.9
-[4.1.8]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.7...v4.1.8
-[4.1.7]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.6...v4.1.7
-[4.1.6]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.5...v4.1.6
-[4.1.5]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.4...v4.1.5
-[4.1.4]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.3...v4.1.4
-[4.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.2...v4.1.3
-[4.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.1...v4.1.2
-[4.1.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.0...v4.1.1
-[4.1.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.17...v4.1.0
-[4.0.17]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.16...v4.0.17
-[4.0.16]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.15...v4.0.16
-[4.0.15]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.14...v4.0.15
-[4.0.14]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.13...v4.0.14
-[4.0.13]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.12...v4.0.13
-[4.0.12]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.11...v4.0.12
-[4.0.11]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.10...v4.0.11
-[4.0.10]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.9...v4.0.10
-[4.0.9]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.8...v4.0.9
-[4.0.8]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.7...v4.0.8
-[4.0.7]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.6...v4.0.7
-[4.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.5...v4.0.6
-[4.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.4...v4.0.5
-[4.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.3...v4.0.4
-[4.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.2...v4.0.3
-[4.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.1...v4.0.2
-[4.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0...v4.0.1
-[4.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.10...v4.0.0
-[4.0.0-beta.10]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.9...v4.0.0-beta.10
-[4.0.0-beta.9]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.8...v4.0.0-beta.9
-[4.0.0-beta.8]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.7...v4.0.0-beta.8
-[4.0.0-beta.7]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.6...v4.0.0-beta.7
-[4.0.0-beta.6]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.5...v4.0.0-beta.6
-[4.0.0-beta.5]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.4...v4.0.0-beta.5
-[4.0.0-beta.4]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.3...v4.0.0-beta.4
-[4.0.0-beta.3]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.2...v4.0.0-beta.3
-[4.0.0-beta.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-beta.1...v4.0.0-beta.2
-[4.0.0-beta.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.36...v4.0.0-beta.1
-[4.0.0-alpha.36]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.35...v4.0.0-alpha.36
-[4.0.0-alpha.35]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.34...v4.0.0-alpha.35
-[4.0.0-alpha.34]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.33...v4.0.0-alpha.34
-[4.0.0-alpha.33]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.32...v4.0.0-alpha.33
-[4.0.0-alpha.32]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.31...v4.0.0-alpha.32
-[4.0.0-alpha.31]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.30...v4.0.0-alpha.31
-[4.0.0-alpha.30]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.29...v4.0.0-alpha.30
-[4.0.0-alpha.29]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.28...v4.0.0-alpha.29
-[4.0.0-alpha.28]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.27...v4.0.0-alpha.28
-[4.0.0-alpha.27]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.26...v4.0.0-alpha.27
-[4.0.0-alpha.26]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.25...v4.0.0-alpha.26
-[4.0.0-alpha.25]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.24...v4.0.0-alpha.25
-[4.0.0-alpha.24]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.23...v4.0.0-alpha.24
-[4.0.0-alpha.23]: https://github.com/tailwindlabs/tailwindcss/compare/v4.0.0-alpha.22...v4.0.0-alpha.23
-[4.0.0-alpha.22]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.17...v4.0.0-alpha.22
-[3.4.17]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.16...v3.4.17
-[3.4.16]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.15...v3.4.16
-[3.4.15]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.14...v3.4.15
-[3.4.14]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.13...v3.4.14
-[3.4.13]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.12...v3.4.13
-[3.4.12]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.11...v3.4.12
-[3.4.11]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.10...v3.4.11
-[3.4.10]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.9...v3.4.10
-[3.4.9]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.8...v3.4.9
-[3.4.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.7...v3.4.8
-[3.4.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.6...v3.4.7
-[3.4.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.5...v3.4.6
-[3.4.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.4...v3.4.5
-[3.4.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.3...v3.4.4
-[3.4.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.2...v3.4.3
-[3.4.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.1...v3.4.2
-[3.4.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.0...v3.4.1
-[3.4.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.7...v3.4.0
-[3.3.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.6...v3.3.7
-[3.3.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.5...v3.3.6
-[3.3.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.4...v3.3.5
-[3.3.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.3...v3.3.4
-[3.3.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.2...v3.3.3
-[3.3.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.1...v3.3.2
-[3.3.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.0...v3.3.1
-[3.3.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.7...v3.3.0
-[3.2.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.6...v3.2.7
-[3.2.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.5...v3.2.6
-[3.2.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.4...v3.2.5
-[3.2.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.3...v3.2.4
-[3.2.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.2...v3.2.3
-[3.2.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.1...v3.2.2
-[3.2.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.0...v3.2.1
-[3.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.8...v3.2.0
-[3.1.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.7...v3.1.8
-[3.1.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.6...v3.1.7
-[3.1.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.5...v3.1.6
-[3.1.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.4...v3.1.5
-[3.1.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.3...v3.1.4
-[3.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.2...v3.1.3
-[3.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.1...v3.1.2
-[3.1.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.0...v3.1.1
-[3.1.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.24...v3.1.0
-[3.0.24]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...v3.0.24
-[3.0.23]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...v3.0.23
-[3.0.22]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.21...v3.0.22
-[3.0.21]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.20...v3.0.21
-[3.0.20]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.19...v3.0.20
-[3.0.19]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.18...v3.0.19
-[3.0.18]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.17...v3.0.18
-[3.0.17]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.16...v3.0.17
-[3.0.16]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.15...v3.0.16
-[3.0.15]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.14...v3.0.15
-[3.0.14]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.13...v3.0.14
-[3.0.13]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.12...v3.0.13
-[3.0.12]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.11...v3.0.12
-[3.0.11]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.10...v3.0.11
-[3.0.10]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.9...v3.0.10
-[3.0.9]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.8...v3.0.9
-[3.0.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...v3.0.8
-[3.0.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.7
-[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.5...v3.0.6
-[3.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.4...v3.0.5
-[3.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.3...v3.0.4
-[3.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.2...v3.0.3
-[3.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.1...v3.0.2
-[3.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0...v3.0.1
-[3.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.2...v3.0.0
-[3.0.0-alpha.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...v3.0.0-alpha.2
-[3.0.0-alpha.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.19...v3.0.0-alpha.1
-[2.2.19]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.18...v2.2.19
-[2.2.18]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.17...v2.2.18
-[2.2.17]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.16...v2.2.17
-[2.2.16]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.15...v2.2.16
-[2.2.15]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.14...v2.2.15
-[2.2.14]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.13...v2.2.14
-[2.2.13]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.12...v2.2.13
-[2.2.12]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.11...v2.2.12
-[2.2.11]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.10...v2.2.11
-[2.2.10]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.9...v2.2.10
-[2.2.9]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.8...v2.2.9
-[2.2.8]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.7...v2.2.8
-[2.2.7]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.6...v2.2.7
-[2.2.6]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.5...v2.2.6
-[2.2.5]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.4...v2.2.5
-[2.2.4]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.3...v2.2.4
-[2.2.3]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.2...v2.2.3
-[2.2.2]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.1...v2.2.2
-[2.2.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.0...v2.2.1
-[2.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v2.1.4...v2.2.0
-[2.1.4]: https://github.com/tailwindlabs/tailwindcss/compare/v2.1.3...v2.1.4
-[2.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v2.1.2...v2.1.3
-[2.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v2.1.1...v2.1.2
-[2.1.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.1.0...v2.1.1
-[2.1.0]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.4...v2.1.0
-[2.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.3...v2.0.4
-[2.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.2...v2.0.3
-[2.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.1...v2.0.2
-[2.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0...v2.0.1
-[2.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.6...v2.0.0
-[2.0.0-alpha.25]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.24...v2.0.0-alpha.25
-[2.0.0-alpha.24]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.23...v2.0.0-alpha.24
-[2.0.0-alpha.23]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.22...v2.0.0-alpha.23
-[2.0.0-alpha.22]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.21...v2.0.0-alpha.22
-[2.0.0-alpha.21]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.20...v2.0.0-alpha.21
-[2.0.0-alpha.20]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.19...v2.0.0-alpha.20
-[2.0.0-alpha.19]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.18...v2.0.0-alpha.19
-[2.0.0-alpha.18]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.17...v2.0.0-alpha.18
-[2.0.0-alpha.17]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.16...v2.0.0-alpha.17
-[2.0.0-alpha.16]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.15...v2.0.0-alpha.16
-[2.0.0-alpha.15]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.14...v2.0.0-alpha.15
-[2.0.0-alpha.14]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.13...v2.0.0-alpha.14
-[2.0.0-alpha.13]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.12...v2.0.0-alpha.13
-[2.0.0-alpha.12]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.11...v2.0.0-alpha.12
-[2.0.0-alpha.11]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.10...v2.0.0-alpha.11
-[2.0.0-alpha.10]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.9...v2.0.0-alpha.10
-[2.0.0-alpha.9]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.8...v2.0.0-alpha.9
-[2.0.0-alpha.8]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.7...v2.0.0-alpha.8
-[2.0.0-alpha.7]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.6...v2.0.0-alpha.7
-[2.0.0-alpha.6]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.5...v2.0.0-alpha.6
-[2.0.0-alpha.5]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.4...v2.0.0-alpha.5
-[2.0.0-alpha.4]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.3...v2.0.0-alpha.4
-[2.0.0-alpha.3]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.2...v2.0.0-alpha.3
-[2.0.0-alpha.2]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0-alpha.1...v2.0.0-alpha.2
-[1.9.6]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.5...v1.9.6
-[2.0.0-alpha.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.5...v2.0.0-alpha.1
-[1.9.5]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.4...v1.9.5
-[1.9.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.3...v1.9.4
-[1.9.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.2...v1.9.3
-[1.9.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.1...v1.9.2
-[1.9.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.9.0...v1.9.1
-[1.9.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.13...v1.9.0
-[1.8.13]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.12...v1.8.13
-[1.8.12]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.11...v1.8.12
-[1.8.11]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.10...v1.8.11
-[1.8.10]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.9...v1.8.10
-[1.8.9]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.8...v1.8.9
-[1.8.8]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.7...v1.8.8
-[1.8.7]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.6...v1.8.7
-[1.8.6]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.5...v1.8.6
-[1.8.5]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.4...v1.8.5
-[1.8.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.3...v1.8.4
-[1.8.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.2...v1.8.3
-[1.8.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.1...v1.8.2
-[1.8.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.8.0...v1.8.1
-[1.8.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.7.6...v1.8.0
-[1.7.6]: https://github.com/tailwindlabs/tailwindcss/compare/v1.7.5...v1.7.6
-[1.7.5]: https://github.com/tailwindlabs/tailwindcss/compare/v1.7.4...v1.7.5
-[1.7.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.7.3...v1.7.4
-[1.7.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.7.2...v1.7.3
-[1.7.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.7.1...v1.7.2
-[1.7.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.7.0...v1.7.1
-[1.7.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.6.3...v1.7.0
-[1.6.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.6.2...v1.6.3
-[1.6.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.6.1...v1.6.2
-[1.6.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.6.0...v1.6.1
-[1.6.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.5.2...v1.6.0
-[1.5.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.5.1...v1.5.2
-[1.5.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.5.0...v1.5.1
-[1.5.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.4.6...v1.5.0
-[1.4.6]: https://github.com/tailwindlabs/tailwindcss/compare/v1.4.5...v1.4.6
-[1.4.5]: https://github.com/tailwindlabs/tailwindcss/compare/v1.4.4...v1.4.5
-[1.4.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.4.3...v1.4.4
-[1.4.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.4.2...v1.4.3
-[1.4.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.4.1...v1.4.2
-[1.4.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.4.0...v1.4.1
-[1.4.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.3.5...v1.4.0
-[1.3.5]: https://github.com/tailwindlabs/tailwindcss/compare/v1.3.4...v1.3.5
-[1.3.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.3.3...v1.3.4
-[1.3.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.3.1...v1.3.3
-[1.3.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.3.0...v1.3.1
-[1.3.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.2.0...v1.3.0
-[1.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.1.4...v1.2.0
-[1.2.0-canary.8]: https://github.com/tailwindlabs/tailwindcss/compare/v1.2.0-canary.7...v1.2.0-canary.8
-[1.2.0-canary.7]: https://github.com/tailwindlabs/tailwindcss/compare/v1.2.0-canary.6...v1.2.0-canary.7
-[1.2.0-canary.6]: https://github.com/tailwindlabs/tailwindcss/compare/v1.2.0-canary.5...v1.2.0-canary.6
-[1.2.0-canary.5]: https://github.com/tailwindlabs/tailwindcss/compare/v1.2.0-canary.4...v1.2.0-canary.5
-[1.2.0-canary.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.2.0-canary.3...v1.2.0-canary.4
-[1.1.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.1.3...v1.1.4
-[1.2.0-canary.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.2.0-canary.0...v1.2.0-canary.1
-[1.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.1.2...v1.1.3
-[1.2.0-canary.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.1.2...v1.2.0-canary.0
-[1.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.1.1...v1.1.2
-[1.1.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.1.0...v1.1.1
-[1.1.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.6...v1.1.0
-[1.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.5...v1.0.6
-[1.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.4...v1.0.5
-[1.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.3...v1.0.4
-[1.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.2...v1.0.3
-[1.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.1...v1.0.2
-[1.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0...v1.0.1
-[1.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.10...v1.0.0
-[1.0.0-beta.10]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.9...v1.0.0-beta.10
-[1.0.0-beta.9]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.8...v1.0.0-beta.9
-[1.0.0-beta.8]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.7...v1.0.0-beta.8
-[1.0.0-beta.7]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.6...v1.0.0-beta.7
-[1.0.0-beta.6]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.5...v1.0.0-beta.6
-[1.0.0-beta.5]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.4...v1.0.0-beta.5
-[1.0.0-beta.4]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.3...v1.0.0-beta.4
-[1.0.0-beta.3]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.2...v1.0.0-beta.3
-[1.0.0-beta.2]: https://github.com/tailwindlabs/tailwindcss/compare/v1.0.0-beta.1...v1.0.0-beta.2
-[1.0.0-beta.1]: https://github.com/tailwindlabs/tailwindcss/compare/v0.7.4...v1.0.0-beta.1
-[0.7.4]: https://github.com/tailwindlabs/tailwindcss/compare/v0.7.3...v0.7.4
-[0.7.3]: https://github.com/tailwindlabs/tailwindcss/compare/v0.7.2...v0.7.3
-[0.7.2]: https://github.com/tailwindlabs/tailwindcss/compare/v0.7.1...v0.7.2
-[0.7.1]: https://github.com/tailwindlabs/tailwindcss/compare/v0.7.0...v0.7.1
-[0.7.0]: https://github.com/tailwindlabs/tailwindcss/compare/v0.6.6...v0.7.0
-[0.6.6]: https://github.com/tailwindlabs/tailwindcss/compare/v0.6.5...v0.6.6
-[0.6.5]: https://github.com/tailwindlabs/tailwindcss/compare/v0.6.4...v0.6.5
-[0.6.4]: https://github.com/tailwindlabs/tailwindcss/compare/v0.6.3...v0.6.4
-[0.6.3]: https://github.com/tailwindlabs/tailwindcss/compare/v0.6.2...v0.6.3
-[0.6.2]: https://github.com/tailwindlabs/tailwindcss/compare/v0.6.1...v0.6.2
-[0.6.1]: https://github.com/tailwindlabs/tailwindcss/compare/v0.6.0...v0.6.1
-[0.6.0]: https://github.com/tailwindlabs/tailwindcss/compare/v0.5.3...v0.6.0
-[0.5.3]: https://github.com/tailwindlabs/tailwindcss/compare/v0.5.2...v0.5.3
-[0.5.2]: https://github.com/tailwindlabs/tailwindcss/compare/v0.5.1...v0.5.2
-[0.5.1]: https://github.com/tailwindlabs/tailwindcss/compare/v0.5.0...v0.5.1
-[0.5.0]: https://github.com/tailwindlabs/tailwindcss/compare/v0.4.3...v0.5.0
-[0.4.3]: https://github.com/tailwindlabs/tailwindcss/compare/v0.4.2...v0.4.3
-[0.4.2]: https://github.com/tailwindlabs/tailwindcss/compare/v0.4.1...v0.4.2
-[0.4.1]: https://github.com/tailwindlabs/tailwindcss/compare/v0.4.0...v0.4.1
-[0.4.0]: https://github.com/tailwindlabs/tailwindcss/compare/v0.3.0...v0.4.0
-[0.3.0]: https://github.com/tailwindlabs/tailwindcss/compare/v0.2.2...v0.3.0
-[0.2.2]: https://github.com/tailwindlabs/tailwindcss/compare/v0.2.1...v0.2.2
-[0.2.1]: https://github.com/tailwindlabs/tailwindcss/compare/v0.2.0...v0.2.1
-[0.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.6...v0.2.0
-[0.1.6]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.5...v0.1.6
-[0.1.5]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.4...v0.1.5
-[0.1.4]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.3...v0.1.4
-[0.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.2...v0.1.3
-[0.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.1...v0.1.2
-[0.1.1]: https://github.com/tailwindlabs/tailwindcss/compare/v0.1.0...v0.1.1
-[0.1.0]: https://github.com/tailwindlabs/tailwindcss/releases/tag/v0.1.0
diff --git a/Cargo.lock b/Cargo.lock
deleted file mode 100644
index 73fd9e995..000000000
--- a/Cargo.lock
+++ /dev/null
@@ -1,948 +0,0 @@
-# This file is automatically @generated by Cargo.
-# It is not intended for manual editing.
-version = 4
-
-[[package]]
-name = "aho-corasick"
-version = "1.1.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e60d3430d3a69478ad0993f19238d2df97c507009a52b3c10addcd7f6bcb916"
-dependencies = [
- "memchr",
-]
-
-[[package]]
-name = "arrayvec"
-version = "0.7.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7c02d123df017efcdfbd739ef81735b36c5ba83ec3c59c80a9d7ecc718f92e50"
-
-[[package]]
-name = "bexpand"
-version = "1.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "045d7d9db8390cf2c59f39f3bd138f1962ef616b096d1b9f5651c7acba19e5a7"
-dependencies = [
- "itertools",
- "nom",
-]
-
-[[package]]
-name = "bitflags"
-version = "2.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b048fb63fd8b5923fc5aa7b340d8e156aec7ec02f0c78fa8a6ddc2613f6f71de"
-
-[[package]]
-name = "bstr"
-version = "1.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "531a9155a481e2ee699d4f98f43c0ca4ff8ee1bfd55c31e9e98fb29d2b176fe0"
-dependencies = [
- "memchr",
- "regex-automata 0.4.18",
- "serde",
-]
-
-[[package]]
-name = "cfg-if"
-version = "1.0.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
-
-[[package]]
-name = "classification-macros"
-version = "0.1.0"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
-]
-
-[[package]]
-name = "console"
-version = "0.16.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4fe5f465a4f6fee88fad41b85d990f84c835335e85b5d9e6e63e0d06d28cba7c"
-dependencies = [
- "encode_unicode",
- "libc",
- "windows-sys 0.61.2",
-]
-
-[[package]]
-name = "convert_case"
-version = "0.11.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "affbf0190ed2caf063e3def54ff444b449371d55c58e513a95ab98eca50adb49"
-dependencies = [
- "unicode-segmentation",
-]
-
-[[package]]
-name = "crossbeam-channel"
-version = "0.5.15"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "82b8f8f868b36967f9606790d1903570de9ceaf870a7bf9fbbd3016d636a2cb2"
-dependencies = [
- "crossbeam-utils",
-]
-
-[[package]]
-name = "crossbeam-deque"
-version = "0.8.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "613f8cc01fe9cf1a3eb3d7f488fd2fa8388403e97039e2f73692932e291a770d"
-dependencies = [
- "crossbeam-epoch",
- "crossbeam-utils",
-]
-
-[[package]]
-name = "crossbeam-epoch"
-version = "0.9.18"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b82ac4a3c2ca9c3460964f020e1402edd5753411d7737aa39c3714ad1b5420e"
-dependencies = [
- "crossbeam-utils",
-]
-
-[[package]]
-name = "crossbeam-utils"
-version = "0.8.20"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22ec99545bb0ed0ea7bb9b8e1e9122ea386ff8a48c0922e43f36d45ab09e0e80"
-
-[[package]]
-name = "ctor"
-version = "1.0.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2d83cb7e7a873830708d6b02a78cd36a592c6fa14bf267b68725103b85c0d77f"
-
-[[package]]
-name = "diff"
-version = "0.1.13"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "56254986775e3233ffa9c4d7d3faaf6d36a2c09d30b20687e9f88bc8bafc16c8"
-
-[[package]]
-name = "dunce"
-version = "1.0.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "92773504d58c093f6de2459af4af33faa518c13451eb8f2b5698ed3d36e7c813"
-
-[[package]]
-name = "either"
-version = "1.8.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7fcaabb2fef8c910e7f4c7ce9f67a1283a1715879a7c230ca9d6d1ae31f16d91"
-
-[[package]]
-name = "encode_unicode"
-version = "1.0.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34aa73646ffb006b8f5147f3dc182bd4bcb190227ce861fc4a4844bf8e3cb2c0"
-
-[[package]]
-name = "errno"
-version = "0.3.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "534c5cf6194dfab3db3242765c03bbe257cf92f22b38f6bc0c58d59108a820ba"
-dependencies = [
- "libc",
- "windows-sys 0.52.0",
-]
-
-[[package]]
-name = "fast-glob"
-version = "0.4.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0eca69ef247d19faa15ac0156968637440824e5ff22baa5ee0cd35b2f7ea6a0f"
-dependencies = [
- "arrayvec",
-]
-
-[[package]]
-name = "fastrand"
-version = "2.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e8c02a5121d4ea3eb16a80748c74f5549a5665e4c21333c6098f283870fbdea6"
-
-[[package]]
-name = "futures"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8b147ee9d1f6d097cef9ce628cd2ee62288d963e16fb287bd9286455b241382d"
-dependencies = [
- "futures-channel",
- "futures-core",
- "futures-executor",
- "futures-io",
- "futures-sink",
- "futures-task",
- "futures-util",
-]
-
-[[package]]
-name = "futures-channel"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07bbe89c50d7a535e539b8c17bc0b49bdb77747034daa8087407d655f3f7cc1d"
-dependencies = [
- "futures-core",
- "futures-sink",
-]
-
-[[package]]
-name = "futures-core"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e3450815272ef58cec6d564423f6e755e25379b217b0bc688e295ba24df6b1d"
-
-[[package]]
-name = "futures-executor"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "baf29c38818342a3b26b5b923639e7b1f4a61fc5e76102d4b1981c6dc7a7579d"
-dependencies = [
- "futures-core",
- "futures-task",
- "futures-util",
-]
-
-[[package]]
-name = "futures-io"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cecba35d7ad927e23624b22ad55235f2239cfa44fd10428eecbeba6d6a717718"
-
-[[package]]
-name = "futures-macro"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e835b70203e41293343137df5c0664546da5745f82ec9b84d40be8336958447b"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
-]
-
-[[package]]
-name = "futures-sink"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c39754e157331b013978ec91992bde1ac089843443c49cbc7f46150b0fad0893"
-
-[[package]]
-name = "futures-task"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "037711b3d59c33004d3856fbdc83b99d4ff37a24768fa1be9ce3538a1cde4393"
-
-[[package]]
-name = "futures-util"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
-dependencies = [
- "futures-channel",
- "futures-core",
- "futures-io",
- "futures-macro",
- "futures-sink",
- "futures-task",
- "memchr",
- "pin-project-lite",
- "slab",
-]
-
-[[package]]
-name = "globset"
-version = "0.4.20"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07c34a9410465b45bd9787443bc7370f37735bad04b0f0cd57ff1a3186c98988"
-dependencies = [
- "aho-corasick",
- "bstr",
- "log",
- "regex-automata 0.4.18",
- "regex-syntax 0.8.5",
-]
-
-[[package]]
-name = "globwalk"
-version = "0.9.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0bf760ebf69878d9fd8f110c89703d90ce35095324d1f1edcb595c63945ee757"
-dependencies = [
- "bitflags",
- "ignore 0.4.23",
- "walkdir",
-]
-
-[[package]]
-name = "ignore"
-version = "0.4.23"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d89fd380afde86567dfba715db065673989d6253f42b88179abd3eae47bda4b"
-dependencies = [
- "crossbeam-deque",
- "globset",
- "log",
- "memchr",
- "regex-automata 0.4.18",
- "same-file",
- "walkdir",
- "winapi-util",
-]
-
-[[package]]
-name = "ignore"
-version = "0.4.33"
-dependencies = [
- "bstr",
- "crossbeam-channel",
- "crossbeam-deque",
- "dunce",
- "globset",
- "log",
- "memchr",
- "regex-automata 0.4.18",
- "same-file",
- "walkdir",
- "winapi-util",
-]
-
-[[package]]
-name = "insta"
-version = "1.48.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "86f0f8fee8c926415c58d6ae43a08523a26faccb2323f5e6b644fe7dd4ef6b82"
-dependencies = [
- "console",
- "once_cell",
- "similar",
- "tempfile",
-]
-
-[[package]]
-name = "itertools"
-version = "0.11.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b1c173a5686ce8bfa551b3563d0c2170bf24ca44da99c7ca4bfdab5418c3fe57"
-dependencies = [
- "either",
-]
-
-[[package]]
-name = "lazy_static"
-version = "1.4.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
-
-[[package]]
-name = "libc"
-version = "0.2.159"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "561d97a539a36e26a9a5fad1ea11a3039a67714694aaa379433e580854bc3dc5"
-
-[[package]]
-name = "libloading"
-version = "0.9.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "754ca22de805bb5744484a5b151a9e1a8e837d5dc232c2d7d8c2e3492edc8b60"
-dependencies = [
- "cfg-if",
- "windows-link",
-]
-
-[[package]]
-name = "linux-raw-sys"
-version = "0.4.14"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "78b3ae25bc7c8c38cec158d1f2757ee79e9b3740fbc7ccf0e59e4b08d793fa89"
-
-[[package]]
-name = "log"
-version = "0.4.22"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a7a70ba024b9dc04c27ea2f0c0548feb474ec5c54bba33a7f72f873a39d07b24"
-
-[[package]]
-name = "matchers"
-version = "0.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8263075bb86c5a1b1427b5ae862e8889656f126e9f77c484496e8b47cf5c5558"
-dependencies = [
- "regex-automata 0.1.10",
-]
-
-[[package]]
-name = "memchr"
-version = "2.7.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "78ca9ab1a0babb1e7d5695e3530886289c18cf2f87ec19a575a0abdce112e3a3"
-
-[[package]]
-name = "minimal-lexical"
-version = "0.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
-
-[[package]]
-name = "napi"
-version = "3.11.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "de33522036981030a75c231829566bc63414e08101a6f5ff4ac6cef19c8e0941"
-dependencies = [
- "bitflags",
- "ctor",
- "futures",
- "napi-build",
- "napi-sys",
- "nohash-hasher",
- "rustc-hash",
-]
-
-[[package]]
-name = "napi-build"
-version = "2.3.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c9c366d2c8c60b86fa632df75f745509b52f9128f91a6bad4c796e44abb505e1"
-
-[[package]]
-name = "napi-derive"
-version = "3.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a49c513341a61a16a10af6efcce46b30d0822ba2d4fb197d24d33dfc199c78d5"
-dependencies = [
- "convert_case",
- "ctor",
- "napi-derive-backend",
- "proc-macro2",
- "quote",
- "syn",
-]
-
-[[package]]
-name = "napi-derive-backend"
-version = "6.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d60b5d773ad46c698c8cc2cd9fde0b283d39cbb7f71c04bee633c7bdba4423bd"
-dependencies = [
- "convert_case",
- "proc-macro2",
- "quote",
- "semver",
- "syn",
-]
-
-[[package]]
-name = "napi-sys"
-version = "3.3.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "85fbf1fa9f1babfe396d74bbbf52b3643770243e8f5b0b46715d4caf7f0dfc9a"
-dependencies = [
- "libloading",
-]
-
-[[package]]
-name = "nohash-hasher"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2bf50223579dc7cdcfb3bfcacf7069ff68243f8c363f62ffa99cf000a6b9c451"
-
-[[package]]
-name = "nom"
-version = "7.1.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d273983c5a657a70a3e8f2a01329822f3b8c8172b73826411a55751e404a0a4a"
-dependencies = [
- "memchr",
- "minimal-lexical",
-]
-
-[[package]]
-name = "nu-ansi-term"
-version = "0.46.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77a8165726e8236064dbb45459242600304b42a5ea24ee2948e18e023bf7ba84"
-dependencies = [
- "overload",
- "winapi",
-]
-
-[[package]]
-name = "once_cell"
-version = "1.21.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
-
-[[package]]
-name = "overload"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b15813163c1d831bf4a13c3610c05c0d03b39feb07f7e09fa234dac9b15aaf39"
-
-[[package]]
-name = "pin-project-lite"
-version = "0.2.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e0a7ae3ac2f1173085d398531c705756c94a4c56843785df85a60c1a0afac116"
-
-[[package]]
-name = "pretty_assertions"
-version = "1.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3ae130e2f271fbc2ac3a40fb1d07180839cdbbe443c7a27e1e3c13c5cac0116d"
-dependencies = [
- "diff",
- "yansi",
-]
-
-[[package]]
-name = "proc-macro2"
-version = "1.0.86"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5e719e8df665df0d1c8fbfd238015744736151d4445ec0836b8e628aae103b77"
-dependencies = [
- "unicode-ident",
-]
-
-[[package]]
-name = "quote"
-version = "1.0.45"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41f2619966050689382d2b44f664f4bc593e129785a36d6ee376ddf37259b924"
-dependencies = [
- "proc-macro2",
-]
-
-[[package]]
-name = "rayon"
-version = "1.12.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fb39b166781f92d482534ef4b4b1b2568f42613b53e5b6c160e24cfbfa30926d"
-dependencies = [
- "either",
- "rayon-core",
-]
-
-[[package]]
-name = "rayon-core"
-version = "1.13.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22e18b0f0062d30d4230b2e85ff77fdfe4326feb054b9783a3460d8435c8ab91"
-dependencies = [
- "crossbeam-deque",
- "crossbeam-utils",
-]
-
-[[package]]
-name = "regex"
-version = "1.11.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b544ef1b4eac5dc2db33ea63606ae9ffcfac26c1416a2806ae0bf5f56b201191"
-dependencies = [
- "aho-corasick",
- "memchr",
- "regex-automata 0.4.18",
- "regex-syntax 0.8.5",
-]
-
-[[package]]
-name = "regex-automata"
-version = "0.1.10"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6c230d73fb8d8c1b9c0b3135c5142a8acee3a0558fb8db5cf1cb65f8d7862132"
-dependencies = [
- "regex-syntax 0.6.29",
-]
-
-[[package]]
-name = "regex-automata"
-version = "0.4.18"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ad8553b9b26413251cbf30e620595c7a41b3887f03da04579c0e6b0d6a06b4b2"
-dependencies = [
- "aho-corasick",
- "memchr",
- "regex-syntax 0.8.5",
-]
-
-[[package]]
-name = "regex-syntax"
-version = "0.6.29"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f162c6dd7b008981e4d40210aca20b4bd0f9b60ca9271061b07f78537722f2e1"
-
-[[package]]
-name = "regex-syntax"
-version = "0.8.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2b15c43186be67a4fd63bee50d0303afffcef381492ebe2c5d87f324e1b8815c"
-
-[[package]]
-name = "rustc-hash"
-version = "2.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d"
-
-[[package]]
-name = "rustix"
-version = "0.38.37"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8acb788b847c24f28525660c4d7758620a7210875711f79e7f663cc152726811"
-dependencies = [
- "bitflags",
- "errno",
- "libc",
- "linux-raw-sys",
- "windows-sys 0.52.0",
-]
-
-[[package]]
-name = "same-file"
-version = "1.0.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "93fc1dc3aaa9bfed95e02e6eadabb4baf7e3078b0bd1b4d7b6b0b68378900502"
-dependencies = [
- "winapi-util",
-]
-
-[[package]]
-name = "semver"
-version = "1.0.17"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bebd363326d05ec3e2f532ab7660680f3b02130d780c299bca73469d521bc0ed"
-
-[[package]]
-name = "serde"
-version = "1.0.163"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2113ab51b87a539ae008b5c6c02dc020ffa39afd2d83cffcb3f4eb2722cebec2"
-
-[[package]]
-name = "sharded-slab"
-version = "0.1.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "900fba806f70c630b0a382d0d825e17a0f19fcd059a2ade1ff237bcddf446b31"
-dependencies = [
- "lazy_static",
-]
-
-[[package]]
-name = "similar"
-version = "2.7.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bbbb5d9659141646ae647b42fe094daf6c6192d1620870b449d9557f748b2daa"
-
-[[package]]
-name = "slab"
-version = "0.4.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
-
-[[package]]
-name = "smallvec"
-version = "1.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a507befe795404456341dfab10cef66ead4c041f62b8b11bbb92bffe5d0953e0"
-
-[[package]]
-name = "syn"
-version = "2.0.87"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "25aa4ce346d03a6dcd68dd8b4010bcb74e54e62c90c573f394c46eae99aba32d"
-dependencies = [
- "proc-macro2",
- "quote",
- "unicode-ident",
-]
-
-[[package]]
-name = "tailwind-oxide"
-version = "0.0.0"
-dependencies = [
- "napi",
- "napi-build",
- "napi-derive",
- "rayon",
- "tailwindcss-oxide",
-]
-
-[[package]]
-name = "tailwindcss-oxide"
-version = "0.1.0"
-dependencies = [
- "bexpand",
- "bstr",
- "classification-macros",
- "dunce",
- "fast-glob",
- "globwalk",
- "ignore 0.4.33",
- "insta",
- "log",
- "pretty_assertions",
- "rayon",
- "regex",
- "rustc-hash",
- "tempfile",
- "tracing",
- "tracing-subscriber",
- "unicode-width",
- "walkdir",
-]
-
-[[package]]
-name = "tempfile"
-version = "3.13.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f0f2c9fc62d0beef6951ccffd757e241266a2c833136efbe35af6cd2567dca5b"
-dependencies = [
- "cfg-if",
- "fastrand",
- "once_cell",
- "rustix",
- "windows-sys 0.59.0",
-]
-
-[[package]]
-name = "thread_local"
-version = "1.1.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3fdd6f064ccff2d6567adcb3873ca630700f00b5ad3f060c25b5dcfd9a4ce152"
-dependencies = [
- "cfg-if",
- "once_cell",
-]
-
-[[package]]
-name = "tracing"
-version = "0.1.40"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c3523ab5a71916ccf420eebdf5521fcef02141234bbc0b8a49f2fdc4544364ef"
-dependencies = [
- "pin-project-lite",
- "tracing-attributes",
- "tracing-core",
-]
-
-[[package]]
-name = "tracing-attributes"
-version = "0.1.27"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
-]
-
-[[package]]
-name = "tracing-core"
-version = "0.1.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c06d3da6113f116aaee68e4d601191614c9053067f9ab7f6edbcb161237daa54"
-dependencies = [
- "once_cell",
- "valuable",
-]
-
-[[package]]
-name = "tracing-log"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ee855f1f400bd0e5c02d150ae5de3840039a3f54b025156404e34c23c03f47c3"
-dependencies = [
- "log",
- "once_cell",
- "tracing-core",
-]
-
-[[package]]
-name = "tracing-subscriber"
-version = "0.3.18"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ad0f048c97dbd9faa9b7df56362b8ebcaa52adb06b498c050d2f4e32f90a7a8b"
-dependencies = [
- "matchers",
- "nu-ansi-term",
- "once_cell",
- "regex",
- "sharded-slab",
- "smallvec",
- "thread_local",
- "tracing",
- "tracing-core",
- "tracing-log",
-]
-
-[[package]]
-name = "unicode-ident"
-version = "1.0.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b15811caf2415fb889178633e7724bad2509101cde276048e013b9def5e51fa0"
-
-[[package]]
-name = "unicode-segmentation"
-version = "1.10.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1dd624098567895118886609431a7c3b8f516e41d30e0643f03d94592a147e36"
-
-[[package]]
-name = "unicode-width"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fc81956842c57dac11422a97c3b8195a1ff727f06e85c84ed2e8aa277c9a0fd"
-
-[[package]]
-name = "valuable"
-version = "0.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "830b7e5d4d90034032940e4ace0d9a9a057e7a45cd94e6c007832e39edb82f6d"
-
-[[package]]
-name = "walkdir"
-version = "2.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "29790946404f91d9c5d06f9874efddea1dc06c5efe94541a7d6863108e3a5e4b"
-dependencies = [
- "same-file",
- "winapi-util",
-]
-
-[[package]]
-name = "winapi"
-version = "0.3.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5c839a674fcd7a98952e593242ea400abe93992746761e38641405d28b00f419"
-dependencies = [
- "winapi-i686-pc-windows-gnu",
- "winapi-x86_64-pc-windows-gnu",
-]
-
-[[package]]
-name = "winapi-i686-pc-windows-gnu"
-version = "0.4.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6"
-
-[[package]]
-name = "winapi-util"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "70ec6ce85bb158151cae5e5c87f95a8e97d2c0c4b001223f33a334e3ce5de178"
-dependencies = [
- "winapi",
-]
-
-[[package]]
-name = "winapi-x86_64-pc-windows-gnu"
-version = "0.4.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
-
-[[package]]
-name = "windows-link"
-version = "0.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
-
-[[package]]
-name = "windows-sys"
-version = "0.52.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
-dependencies = [
- "windows-targets",
-]
-
-[[package]]
-name = "windows-sys"
-version = "0.59.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e38bc4d79ed67fd075bcc251a1c39b32a1776bbe92e5bef1f0bf1f8c531853b"
-dependencies = [
- "windows-targets",
-]
-
-[[package]]
-name = "windows-sys"
-version = "0.61.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ae137229bcbd6cdf0f7b80a31df61766145077ddf49416a728b02cb3921ff3fc"
-dependencies = [
- "windows-link",
-]
-
-[[package]]
-name = "windows-targets"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9b724f72796e036ab90c1021d4780d4d3d648aca59e491e6b98e725b84e99973"
-dependencies = [
- "windows_aarch64_gnullvm",
- "windows_aarch64_msvc",
- "windows_i686_gnu",
- "windows_i686_gnullvm",
- "windows_i686_msvc",
- "windows_x86_64_gnu",
- "windows_x86_64_gnullvm",
- "windows_x86_64_msvc",
-]
-
-[[package]]
-name = "windows_aarch64_gnullvm"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "32a4622180e7a0ec044bb555404c800bc9fd9ec262ec147edd5989ccd0c02cd3"
-
-[[package]]
-name = "windows_aarch64_msvc"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "09ec2a7bb152e2252b53fa7803150007879548bc709c039df7627cabbd05d469"
-
-[[package]]
-name = "windows_i686_gnu"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e9b5ad5ab802e97eb8e295ac6720e509ee4c243f69d781394014ebfe8bbfa0b"
-
-[[package]]
-name = "windows_i686_gnullvm"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0eee52d38c090b3caa76c563b86c3a4bd71ef1a819287c19d586d7334ae8ed66"
-
-[[package]]
-name = "windows_i686_msvc"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "240948bc05c5e7c6dabba28bf89d89ffce3e303022809e73deaefe4f6ec56c66"
-
-[[package]]
-name = "windows_x86_64_gnu"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "147a5c80aabfbf0c7d901cb5895d1de30ef2907eb21fbbab29ca94c5b08b1a78"
-
-[[package]]
-name = "windows_x86_64_gnullvm"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "24d5b23dc417412679681396f2b49f3de8c1473deb516bd34410872eff51ed0d"
-
-[[package]]
-name = "windows_x86_64_msvc"
-version = "0.52.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
-
-[[package]]
-name = "yansi"
-version = "1.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cfe53a6657fd280eaa890a3bc59152892ffa3e30101319d168b781ed6529b049"
diff --git a/README.md b/README.md
index 5f532607d..95ec9d87d 100644
--- a/README.md
+++ b/README.md
@@ -13,10 +13,10 @@
 </p>
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=next" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
 </p>
 
 ---
@@ -27,10 +27,14 @@ For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
 
 ## Community
 
-For help, discussion about best practices, or feature ideas:
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
 
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
+[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions)
+
+For chatting with others using the framework:
+
+[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
 
 ## Contributing
 
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
+If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**.
diff --git a/crates/classification-macros/Cargo.toml b/crates/classification-macros/Cargo.toml
deleted file mode 100644
index 7053c893a..000000000
--- a/crates/classification-macros/Cargo.toml
+++ /dev/null
@@ -1,12 +0,0 @@
-[package]
-name = "classification-macros"
-version = "0.1.0"
-edition = "2021"
-
-[lib]
-proc-macro = true
-
-[dependencies]
-syn = "2"
-quote = "1"
-proc-macro2 = "1"
diff --git a/crates/classification-macros/src/lib.rs b/crates/classification-macros/src/lib.rs
deleted file mode 100644
index 7bee55595..000000000
--- a/crates/classification-macros/src/lib.rs
+++ /dev/null
@@ -1,253 +0,0 @@
-use proc_macro::TokenStream;
-use quote::quote;
-use syn::{
-    parse_macro_input, punctuated::Punctuated, token::Comma, Attribute, Data, DataEnum,
-    DeriveInput, Expr, ExprLit, ExprRange, Ident, Lit, RangeLimits, Result, Variant,
-};
-
-/// A custom derive that supports:
-///
-/// - `#[bytes(…)]` for single byte literals
-/// - `#[bytes_range(…)]` for inclusive byte ranges (b'a'..=b'z')
-/// - `#[fallback]` for a variant that covers everything else
-///
-/// Example usage:
-///
-/// ```rust
-/// use classification_macros::ClassifyBytes;
-///
-/// #[derive(Clone, Copy, ClassifyBytes)]
-/// enum Class {
-///     #[bytes(b'a', b'b', b'c')]
-///     Letters,
-///
-///     #[bytes_range(b'0'..=b'9')]
-///     Digits,
-///
-///     #[fallback]
-///     Other,
-/// }
-/// ```
-/// Then call `b'a'.into()` to get `Example::SomeLetters`.
-#[proc_macro_derive(ClassifyBytes, attributes(bytes, bytes_range, fallback))]
-pub fn classify_bytes_derive(input: TokenStream) -> TokenStream {
-    let ast = parse_macro_input!(input as DeriveInput);
-
-    // This derive only works on an enum
-    let Data::Enum(DataEnum { variants, .. }) = &ast.data else {
-        return syn::Error::new_spanned(
-            &ast.ident,
-            "ClassifyBytes can only be derived on an enum.",
-        )
-        .to_compile_error()
-        .into();
-    };
-
-    let enum_name = &ast.ident;
-
-    let mut byte_map: [Option<Ident>; 256] = [const { None }; 256];
-    let mut fallback_variant: Option<Ident> = None;
-
-    // Start parsing the variants
-    for variant in variants {
-        let variant_ident = &variant.ident;
-
-        // If this variant has #[fallback], record it
-        if has_fallback_attr(variant) {
-            if fallback_variant.is_some() {
-                let err = syn::Error::new_spanned(
-                    variant_ident,
-                    "Multiple variants have #[fallback]. Only one allowed.",
-                );
-                return err.to_compile_error().into();
-            }
-            fallback_variant = Some(variant_ident.clone());
-        }
-
-        // Get #[bytes(…)]
-        let single_bytes = get_bytes_attrs(&variant.attrs);
-
-        // Get #[bytes_range(…)]
-        let range_bytes = get_bytes_range_attrs(&variant.attrs);
-
-        // Combine them
-        let all_bytes = single_bytes
-            .into_iter()
-            .chain(range_bytes)
-            .collect::<Vec<_>>();
-
-        // Mark them in the table
-        for b in all_bytes {
-            byte_map[b as usize] = Some(variant_ident.clone());
-        }
-    }
-
-    // If no fallback variant is found, default to "Other"
-    let fallback_ident = fallback_variant.expect("A variant marked with #[fallback] is missing");
-
-    // For each of the 256 byte values, fill the table
-    let fill = byte_map
-        .clone()
-        .into_iter()
-        .map(|variant_opt| match variant_opt {
-            Some(ident) => quote!(#enum_name::#ident),
-            None => quote!(#enum_name::#fallback_ident),
-        });
-
-    // Generate the final expanded code
-    let expanded = quote! {
-        impl #enum_name {
-            pub const TABLE: [#enum_name; 256] = [
-                #(#fill),*
-            ];
-        }
-
-        impl From<u8> for #enum_name {
-            fn from(byte: u8) -> Self {
-                #enum_name::TABLE[byte as usize]
-            }
-        }
-
-        impl From<&u8> for #enum_name {
-            fn from(byte: &u8) -> Self {
-                #enum_name::TABLE[*byte as usize]
-            }
-        }
-    };
-
-    TokenStream::from(expanded)
-}
-
-/// Checks if a variant has `#[fallback]`
-fn has_fallback_attr(variant: &Variant) -> bool {
-    variant
-        .attrs
-        .iter()
-        .any(|attr| attr.path().is_ident("fallback"))
-}
-
-/// Get all single byte literals from `#[bytes(…)]`
-fn get_bytes_attrs(attrs: &[Attribute]) -> Vec<u8> {
-    let mut assigned = Vec::new();
-    for attr in attrs {
-        if attr.path().is_ident("bytes") {
-            match parse_bytes_attr(attr) {
-                Ok(list) => assigned.extend(list),
-                Err(e) => panic!("Error parsing #[bytes(...)]: {}", e),
-            }
-        }
-    }
-    assigned
-}
-
-/// Parse `#[bytes(...)]` as a comma-separated list of **byte literals**, e.g. `b'a'`, `b'\n'`.
-fn parse_bytes_attr(attr: &Attribute) -> Result<Vec<u8>> {
-    // We'll parse it as a list of syn::Lit separated by commas: e.g. (b'a', b'b')
-    let items: Punctuated<Lit, Comma> = attr.parse_args_with(Punctuated::parse_terminated)?;
-    let mut out = Vec::new();
-    for lit in items {
-        match lit {
-            Lit::Byte(lb) => out.push(lb.value()),
-            _ => {
-                return Err(syn::Error::new_spanned(
-                    lit,
-                    "Expected a byte literal like b'a'",
-                ))
-            }
-        }
-    }
-    Ok(out)
-}
-
-/// Get all byte ranges from `#[bytes_range(...)]`
-fn get_bytes_range_attrs(attrs: &[Attribute]) -> Vec<u8> {
-    let mut assigned = Vec::new();
-    for attr in attrs {
-        if attr.path().is_ident("bytes_range") {
-            match parse_bytes_range_attr(attr) {
-                Ok(list) => assigned.extend(list),
-                Err(e) => panic!("Error parsing #[bytes_range(...)]: {}", e),
-            }
-        }
-    }
-    assigned
-}
-
-/// Parse `#[bytes_range(...)]` as a comma-separated list of range expressions, e.g.:
-/// `b'a'..=b'z', b'0'..=b'9'`
-fn parse_bytes_range_attr(attr: &Attribute) -> Result<Vec<u8>> {
-    // We'll parse each element as a syn::Expr, then see if it's an Expr::Range
-    let exprs: Punctuated<Expr, Comma> = attr.parse_args_with(Punctuated::parse_terminated)?;
-    let mut out = Vec::new();
-
-    for expr in exprs {
-        if let Expr::Range(ExprRange {
-            start: Some(start),
-            end: Some(end),
-            limits,
-            ..
-        }) = expr
-        {
-            let from = extract_byte_literal(&start)?;
-            let to = extract_byte_literal(&end)?;
-
-            match limits {
-                RangeLimits::Closed(_) => {
-                    // b'a'..=b'z'
-                    if from <= to {
-                        out.extend(from..=to);
-                    }
-                }
-                RangeLimits::HalfOpen(_) => {
-                    // b'a'..b'z'  => from..(to-1)
-                    if from < to {
-                        out.extend(from..to);
-                    }
-                }
-            }
-        } else {
-            return Err(syn::Error::new_spanned(
-                expr,
-                "Expected a byte range like b'a'..=b'z'",
-            ));
-        }
-    }
-
-    Ok(out)
-}
-
-/// Extract a u8 from an expression that can be:
-///
-/// - `Expr::Lit(Lit::Byte(...))`, e.g. b'a'
-/// - `Expr::Lit(Lit::Int(...))`, e.g. 0x80 or 255
-fn extract_byte_literal(expr: &Expr) -> Result<u8> {
-    if let Expr::Lit(ExprLit { lit, .. }) = expr {
-        match lit {
-            // Existing case: b'a'
-            Lit::Byte(lb) => Ok(lb.value()),
-
-            // New case: 0x80, 255, etc.
-            Lit::Int(li) => {
-                let value = li.base10_parse::<u64>()?;
-                if value <= 255 {
-                    Ok(value as u8)
-                } else {
-                    Err(syn::Error::new_spanned(
-                        li,
-                        format!("Integer literal {} out of range for a byte (0..255)", value),
-                    ))
-                }
-            }
-
-            _ => Err(syn::Error::new_spanned(
-                lit,
-                "Expected b'...' or an integer literal in range 0..=255",
-            )),
-        }
-    } else {
-        Err(syn::Error::new_spanned(
-            expr,
-            "Expected a literal expression like b'a' or 0x80",
-        ))
-    }
-}
diff --git a/crates/ignore/COPYING b/crates/ignore/COPYING
deleted file mode 100644
index bb9c20a09..000000000
--- a/crates/ignore/COPYING
+++ /dev/null
@@ -1,3 +0,0 @@
-This project is dual-licensed under the Unlicense and MIT licenses.
-
-You may use this code under the terms of either license.
diff --git a/crates/ignore/Cargo.toml b/crates/ignore/Cargo.toml
deleted file mode 100644
index d0af38ba9..000000000
--- a/crates/ignore/Cargo.toml
+++ /dev/null
@@ -1,50 +0,0 @@
-[package]
-name = "ignore"
-version = "0.4.33"  #:version
-authors = ["Andrew Gallant <jamslam@gmail.com>"]
-description = """
-A fast library for efficiently matching ignore files such as `.gitignore`
-against file paths.
-"""
-documentation = "https://docs.rs/ignore"
-homepage = "https://github.com/BurntSushi/ripgrep/tree/master/crates/ignore"
-repository = "https://github.com/BurntSushi/ripgrep/tree/master/crates/ignore"
-readme = "README.md"
-keywords = ["glob", "ignore", "gitignore", "pattern", "file"]
-license = "Unlicense OR MIT"
-# CHANGED: Use an explicit edition instead of `edition.workspace = true` since this crate is
-# vendored into the Tailwind CSS workspace.
-edition = "2024"
-rust-version = "1.88"
-
-[lib]
-name = "ignore"
-bench = false
-
-[dependencies]
-crossbeam-deque = "0.8.3"
-# CHANGED: Use the published globset crate instead of a path dependency.
-globset = "0.4.20"
-log = "0.4.20"
-memchr = "2.6.3"
-same-file = "1.0.6"
-walkdir = "2.4.0"
-# CHANGED: Added `dunce` to canonicalize paths without UNC prefixes on Windows.
-dunce = "1.0.5"
-
-[dependencies.regex-automata]
-version = "0.4.18"
-default-features = false
-features = ["std", "perf", "syntax", "meta", "nfa", "hybrid", "dfa-onepass"]
-
-[target.'cfg(windows)'.dependencies.winapi-util]
-version = "0.1.2"
-
-[dev-dependencies]
-bstr = { version = "1.6.2", default-features = false, features = ["std"] }
-crossbeam-channel = "0.5.15"
-
-[features]
-# DEPRECATED. It is a no-op. SIMD is done automatically through runtime
-# dispatch.
-simd-accel = []
diff --git a/crates/ignore/LICENSE-MIT b/crates/ignore/LICENSE-MIT
deleted file mode 100644
index 3b0a5dc09..000000000
--- a/crates/ignore/LICENSE-MIT
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 Andrew Gallant
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/crates/ignore/README.md b/crates/ignore/README.md
deleted file mode 100644
index 72258e6b5..000000000
--- a/crates/ignore/README.md
+++ /dev/null
@@ -1,59 +0,0 @@
-ignore
-======
-The ignore crate provides a fast recursive directory iterator that respects
-various filters such as globs, file types and `.gitignore` files. This crate
-also provides lower level direct access to gitignore and file type matchers.
-
-[![Build status](https://github.com/BurntSushi/ripgrep/workflows/ci/badge.svg)](https://github.com/BurntSushi/ripgrep/actions)
-[![](https://img.shields.io/crates/v/ignore.svg)](https://crates.io/crates/ignore)
-
-Dual-licensed under MIT or the [UNLICENSE](https://unlicense.org/).
-
-### Documentation
-
-[https://docs.rs/ignore](https://docs.rs/ignore)
-
-### Usage
-
-Add this to your `Cargo.toml`:
-
-```toml
-[dependencies]
-ignore = "0.4"
-```
-
-### Example
-
-This example shows the most basic usage of this crate. This code will
-recursively traverse the current directory while automatically filtering out
-files and directories according to ignore globs found in files like
-`.ignore` and `.gitignore`:
-
-
-```rust,no_run
-use ignore::Walk;
-
-for result in Walk::new("./") {
-    // Each item yielded by the iterator is either a directory entry or an
-    // error, so either print the path or the error.
-    match result {
-        Ok(entry) => println!("{}", entry.path().display()),
-        Err(err) => println!("ERROR: {}", err),
-    }
-}
-```
-
-### Example: advanced
-
-By default, the recursive directory iterator will ignore hidden files and
-directories. This can be disabled by building the iterator with `WalkBuilder`:
-
-```rust,no_run
-use ignore::WalkBuilder;
-
-for result in WalkBuilder::new("./").hidden(false).build() {
-    println!("{:?}", result);
-}
-```
-
-See the documentation for `WalkBuilder` for many other options.
diff --git a/crates/ignore/UNLICENSE b/crates/ignore/UNLICENSE
deleted file mode 100644
index 68a49daad..000000000
--- a/crates/ignore/UNLICENSE
+++ /dev/null
@@ -1,24 +0,0 @@
-This is free and unencumbered software released into the public domain.
-
-Anyone is free to copy, modify, publish, use, compile, sell, or
-distribute this software, either in source code form or as a compiled
-binary, for any purpose, commercial or non-commercial, and by any
-means.
-
-In jurisdictions that recognize copyright laws, the author or authors
-of this software dedicate any and all copyright interest in the
-software to the public domain. We make this dedication for the benefit
-of the public at large and to the detriment of our heirs and
-successors. We intend this dedication to be an overt act of
-relinquishment in perpetuity of all present and future rights to this
-software under copyright law.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
-OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
-ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-OTHER DEALINGS IN THE SOFTWARE.
-
-For more information, please refer to <http://unlicense.org/>
diff --git a/crates/ignore/examples/walk.rs b/crates/ignore/examples/walk.rs
deleted file mode 100644
index c61d0515e..000000000
--- a/crates/ignore/examples/walk.rs
+++ /dev/null
@@ -1,64 +0,0 @@
-use std::{env, io::Write, path::Path};
-
-use {bstr::ByteVec, ignore::WalkBuilder, walkdir::WalkDir};
-
-fn main() {
-    let mut path = env::args().nth(1).unwrap();
-    let mut parallel = false;
-    let mut simple = false;
-    let (tx, rx) = crossbeam_channel::bounded::<DirEntry>(100);
-    if path == "parallel" {
-        path = env::args().nth(2).unwrap();
-        parallel = true;
-    } else if path == "walkdir" {
-        path = env::args().nth(2).unwrap();
-        simple = true;
-    }
-
-    let stdout_thread = std::thread::spawn(move || {
-        let mut stdout = std::io::BufWriter::new(std::io::stdout());
-        for dent in rx {
-            stdout.write_all(&Vec::from_path_lossy(dent.path())).unwrap();
-            stdout.write_all(b"\n").unwrap();
-        }
-    });
-
-    if parallel {
-        let walker = WalkBuilder::new(path).threads(6).build_parallel();
-        walker.run(|| {
-            let tx = tx.clone();
-            Box::new(move |result| {
-                use ignore::WalkState::*;
-
-                tx.send(DirEntry::Y(result.unwrap())).unwrap();
-                Continue
-            })
-        });
-    } else if simple {
-        let walker = WalkDir::new(path);
-        for result in walker {
-            tx.send(DirEntry::X(result.unwrap())).unwrap();
-        }
-    } else {
-        let walker = WalkBuilder::new(path).build();
-        for result in walker {
-            tx.send(DirEntry::Y(result.unwrap())).unwrap();
-        }
-    }
-    drop(tx);
-    stdout_thread.join().unwrap();
-}
-
-enum DirEntry {
-    X(walkdir::DirEntry),
-    Y(ignore::DirEntry),
-}
-
-impl DirEntry {
-    fn path(&self) -> &Path {
-        match *self {
-            DirEntry::X(ref x) => x.path(),
-            DirEntry::Y(ref y) => y.path(),
-        }
-    }
-}
diff --git a/crates/ignore/src/default_types.rs b/crates/ignore/src/default_types.rs
deleted file mode 100644
index 6b5bba0f0..000000000
--- a/crates/ignore/src/default_types.rs
+++ /dev/null
@@ -1,378 +0,0 @@
-/// This list represents the default file types that ripgrep ships with. In
-/// general, any file format is fair game, although it should generally be
-/// limited to reasonably popular open formats. For other cases, you can add
-/// types to each invocation of ripgrep with the '--type-add' flag.
-///
-/// If you would like to add or improve this list, please file a PR:
-/// <https://github.com/BurntSushi/ripgrep>.
-///
-/// Please try to keep this list sorted lexicographically and wrapped to 79
-/// columns (inclusive).
-#[rustfmt::skip]
-pub(crate) const DEFAULT_TYPES: &[(&[&str], &[&str])] = &[
-    (&["ada"], &["*.adb", "*.ads"]),
-    (&["agda"], &["*.agda", "*.lagda"]),
-    (&["aidl"], &["*.aidl"]),
-    (&["alire"], &["alire.toml"]),
-    (&["amake"], &["*.mk", "*.bp"]),
-    (&["asciidoc"], &["*.adoc", "*.asc", "*.asciidoc"]),
-    (&["asm"], &["*.asm", "*.s", "*.S"]),
-    (&["asp"], &[
-        "*.aspx", "*.aspx.cs", "*.aspx.vb", "*.ascx", "*.ascx.cs",
-        "*.ascx.vb", "*.asp"
-    ]),
-    (&["ats"], &["*.ats", "*.dats", "*.sats", "*.hats"]),
-    (&["avro"], &["*.avdl", "*.avpr", "*.avsc"]),
-    (&["awk"], &["*.awk"]),
-    (&["bat", "batch"], &["*.bat"]),
-    (&["bazel"], &[
-        "*.bazel", "*.bzl", "*.BUILD", "*.bazelrc", "BUILD", "MODULE.bazel",
-        "WORKSPACE", "WORKSPACE.bazel", "WORKSPACE.bzlmod",
-    ]),
-    (&["bitbake"], &["*.bb", "*.bbappend", "*.bbclass", "*.conf", "*.inc"]),
-    (&["boxlang"], &["*.bx", "*.bxm", "*.bxs"]),
-    (&["brotli"], &["*.br"]),
-    (&["buildstream"], &["*.bst"]),
-    (&["bzip2"], &["*.bz2", "*.tbz2"]),
-    (&["c"], &["*.[chH]", "*.[chH].in", "*.cats"]),
-    (&["cabal"], &["*.cabal"]),
-    (&["candid"], &["*.did"]),
-    (&["carp"], &["*.carp"]),
-    (&["cbor"], &["*.cbor"]),
-    (&["ceylon"], &["*.ceylon"]),
-    (&["cfml"], &["*.cfc", "*.cfm"]),
-    (&["clojure"], &["*.clj", "*.cljc", "*.cljs", "*.cljx"]),
-    (&["cmake"], &["*.cmake", "CMakeLists.txt"]),
-    (&["cmd"], &["*.bat", "*.cmd"]),
-    (&["cml"], &["*.cml"]),
-    (&["coffeescript"], &["*.coffee"]),
-    (&["config"], &["*.cfg", "*.conf", "*.config", "*.ini"]),
-    (&["container"], &["*Containerfile*", "*Dockerfile*"]),
-    (&["coq"], &["*.v"]),
-    (&["cpp"], &[
-        "*.[ChH]", "*.cc", "*.[ch]pp", "*.[ch]xx", "*.hh",  "*.inl",
-        "*.[ChH].in", "*.cc.in", "*.[ch]pp.in", "*.[ch]xx.in", "*.hh.in",
-    ]),
-    (&["creole"], &["*.creole"]),
-    (&["crystal"], &["Projectfile", "*.cr", "*.ecr", "shard.yml"]),
-    (&["cs"], &["*.cs"]),
-    (&["csharp"], &["*.cs"]),
-    (&["cshtml"], &["*.cshtml"]),
-    (&["csproj"], &["*.csproj"]),
-    (&["css"], &["*.css", "*.scss"]),
-    (&["csv"], &["*.csv"]),
-    (&["cuda"], &["*.cu", "*.cuh"]),
-    (&["cython"], &["*.pyx", "*.pxi", "*.pxd"]),
-    (&["d"], &["*.d"]),
-    (&["dart"], &["*.dart"]),
-    (&["devicetree"], &["*.dts", "*.dtsi", "*.dtso"]),
-    (&["dhall"], &["*.dhall"]),
-    (&["diff"], &["*.patch", "*.diff"]),
-    (&["dita"], &["*.dita", "*.ditamap", "*.ditaval"]),
-    (&["docker"], &["*Dockerfile*"]),
-    (&["dockercompose"], &["docker-compose.yml", "docker-compose.*.yml"]),
-    (&["dts"], &["*.dts", "*.dtsi"]),
-    (&["dvc"], &["Dvcfile", "*.dvc"]),
-    (&["ebuild"], &["*.ebuild", "*.eclass"]),
-    (&["edn"], &["*.edn"]),
-    (&["elisp"], &["*.el"]),
-    (&["elixir"], &["*.ex", "*.eex", "*.exs", "*.heex", "*.leex", "*.livemd"]),
-    (&["elm"], &["*.elm"]),
-    (&["erb"], &["*.erb"]),
-    (&["erlang"], &["*.erl", "*.hrl"]),
-    (&["fennel"], &["*.fnl"]),
-    (&["fidl"], &["*.fidl"]),
-    (&["fish"], &["*.fish"]),
-    (&["flatbuffers"], &["*.fbs"]),
-    (&["fortran"], &[
-        "*.f", "*.F", "*.f77", "*.F77", "*.pfo",
-        "*.f90", "*.F90", "*.f95", "*.F95",
-    ]),
-    (&["fsharp"], &["*.fs", "*.fsx", "*.fsi"]),
-    (&["fut"], &["*.fut"]),
-    (&["gap"], &["*.g", "*.gap", "*.gi", "*.gd", "*.tst"]),
-    (&["gdscript"], &["*.gd"]),
-    (&["gleam"], &["*.gleam"]),
-    (&["gn"], &["*.gn", "*.gni"]),
-    (&["go"], &["*.go"]),
-    (&["gprbuild"], &["*.gpr"]),
-    (&["gradle"], &[
-        "*.gradle", "*.gradle.kts", "gradle.properties", "gradle-wrapper.*",
-        "gradlew", "gradlew.bat",
-    ]),
-    (&["graphql"], &["*.graphql", "*.graphqls"]),
-    (&["groovy"], &["*.groovy", "*.gradle"]),
-    (&["gzip"], &["*.gz", "*.tgz"]),
-    (&["h"], &["*.h", "*.hh", "*.hpp"]),
-    (&["haml"], &["*.haml"]),
-    (&["hare"], &["*.ha"]),
-    (&["haskell"], &["*.hs", "*.lhs", "*.cpphs", "*.c2hs", "*.hsc"]),
-    (&["hbs"], &["*.hbs"]),
-    (&["hs"], &["*.hs", "*.lhs"]),
-    (&["html"], &["*.htm", "*.html", "*.ejs"]),
-    (&["hurl"], &["*.hurl"]),
-    (&["hy"], &["*.hy"]),
-    (&["idris"], &["*.idr", "*.lidr"]),
-    (&["janet"], &["*.janet"]),
-    (&["java"], &["*.java", "*.jsp", "*.jspx", "*.properties"]),
-    (&["jinja"], &["*.j2", "*.jinja", "*.jinja2"]),
-    (&["jl"], &["*.jl"]),
-    (&["js"], &["*.js", "*.jsx", "*.vue", "*.cjs", "*.mjs"]),
-    (&["json"], &["*.json", "composer.lock", "*.sarif"]),
-    (&["jsonl"], &["*.jsonl"]),
-    (&["julia"], &["*.jl"]),
-    (&["jupyter"], &["*.ipynb", "*.jpynb"]),
-    (&["k"], &["*.k"]),
-    (&["kconfig"], &["Kconfig", "Kconfig.*"]),
-    (&["kotlin"], &["*.kt", "*.kts"]),
-    (&["lean"], &["*.lean"]),
-    (&["less"], &["*.less"]),
-    (&["license"], &[
-        // General
-        "COPYING", "COPYING[.-]*",
-        "COPYRIGHT", "COPYRIGHT[.-]*",
-        "EULA", "EULA[.-]*",
-        "licen[cs]e", "licen[cs]e.*",
-        "LICEN[CS]E", "LICEN[CS]E[.-]*", "*[.-]LICEN[CS]E*",
-        "NOTICE", "NOTICE[.-]*",
-        "PATENTS", "PATENTS[.-]*",
-        "UNLICEN[CS]E", "UNLICEN[CS]E[.-]*",
-        // GPL (gpl.txt, etc.)
-        "agpl[.-]*",
-        "gpl[.-]*",
-        "lgpl[.-]*",
-        // Other license-specific (APACHE-2.0.txt, etc.)
-        "AGPL-*[0-9]*",
-        "APACHE-*[0-9]*",
-        "BSD-*[0-9]*",
-        "CC-BY-*",
-        "GFDL-*[0-9]*",
-        "GNU-*[0-9]*",
-        "GPL-*[0-9]*",
-        "LGPL-*[0-9]*",
-        "MIT-*[0-9]*",
-        "MPL-*[0-9]*",
-        "OFL-*[0-9]*",
-    ]),
-    (&["lilypond"], &["*.ly", "*.ily"]),
-    (&["lisp"], &["*.el", "*.jl", "*.lisp", "*.lsp", "*.sc", "*.scm"]),
-    (&["llvm"], &["*.ll"]),
-    (&["lock"], &["*.lock", "package-lock.json"]),
-    (&["log"], &["*.log"]),
-    (&["lua"], &["*.lua"]),
-    (&["lz4"], &["*.lz4"]),
-    (&["lzma"], &["*.lzma"]),
-    (&["m4"], &["*.ac", "*.m4"]),
-    (&["make"], &[
-        "[Gg][Nn][Uu]makefile", "[Mm]akefile",
-        "[Gg][Nn][Uu]makefile.am", "[Mm]akefile.am",
-        "[Gg][Nn][Uu]makefile.in", "[Mm]akefile.in",
-        "Makefile.*",
-        "*.mk", "*.mak"
-    ]),
-    (&["mako"], &["*.mako", "*.mao"]),
-    (&["man"], &["*.[0-9lnpx]", "*.[0-9][cEFMmpSx]"]),
-    (&["markdown", "md"], &[
-        "*.markdown",
-        "*.md",
-        "*.mdown",
-        "*.mdwn",
-        "*.mkd",
-        "*.mkdn",
-        "*.mdx",
-    ]),
-    (&["matlab"], &["*.m"]),
-    (&["meson"], &["meson.build", "meson_options.txt", "meson.options"]),
-    (&["minified"], &["*.min.html", "*.min.css", "*.min.js"]),
-    (&["mint"], &["*.mint"]),
-    (&["mk"], &["mkfile"]),
-    (&["ml"], &["*.ml"]),
-    (&["mojo"], &["*.mojo"]),
-    (&["motoko"], &["*.mo"]),
-    (&["msbuild"], &[
-        "*.csproj", "*.fsproj", "*.vcxproj", "*.proj", "*.props", "*.targets",
-        "*.sln", "*.slnf"
-    ]),
-    (&["nim"], &["*.nim", "*.nimf", "*.nimble", "*.nims"]),
-    (&["nix"], &["*.nix"]),
-    (&["objc"], &["*.h", "*.m"]),
-    (&["objcpp"], &["*.h", "*.mm"]),
-    (&["ocaml"], &["*.ml", "*.mli", "*.mll", "*.mly"]),
-    (&["org"], &["*.org", "*.org_archive"]),
-    (&["pants"], &["BUILD"]),
-    (&["pascal"], &["*.pas", "*.dpr", "*.lpr", "*.pp", "*.inc"]),
-    (&["pdf"], &["*.pdf"]),
-    (&["perl"], &["*.perl", "*.pl", "*.PL", "*.plh", "*.plx", "*.pm", "*.t"]),
-    (&["php"], &[
-        // note that PHP 6 doesn't exist
-        // See: https://wiki.php.net/rfc/php6
-        "*.php", "*.php3", "*.php4", "*.php5", "*.php7", "*.php8",
-        "*.pht", "*.phtml"
-    ]),
-    (&["pkgbuild"], &["PKGBUILD"]),
-    (&["po"], &["*.po"]),
-    (&["pod"], &["*.pod"]),
-    (&["postscript"], &["*.eps", "*.ps"]),
-    (&["prolog"], &["*.pl", "*.pro", "*.prolog", "*.P"]),
-    (&["proto", "protobuf"], &["*.proto"]),
-    (&["ps"], &["*.cdxml", "*.ps1", "*.ps1xml", "*.psd1", "*.psm1"]),
-    (&["puppet"], &["*.epp", "*.erb", "*.pp", "*.rb"]),
-    (&["purs"], &["*.purs"]),
-    (&["py", "python"], &["*.py", "*.pyi"]),
-    (&["qmake"], &["*.pro", "*.pri", "*.prf"]),
-    (&["qml"], &["*.qml"]),
-    (&["qrc"], &["*.qrc"]),
-    (&["qui"], &["*.ui"]),
-    (&["r"], &["*.R", "*.r", "*.Rmd", "*.rmd", "*.Rnw", "*.rnw"]),
-    (&["racket"], &["*.rkt"]),
-    (&["raku"], &[
-        "*.raku", "*.rakumod", "*.rakudoc", "*.rakutest",
-        "*.p6", "*.pl6", "*.pm6"
-    ]),
-    (&["rdoc"], &["*.rdoc"]),
-    (&["readme"], &["README*", "*README"]),
-    (&["reasonml"], &["*.re", "*.rei"]),
-    (&["red"], &["*.r", "*.red", "*.reds"]),
-    (&["rescript"], &["*.res", "*.resi"]),
-    (&["robot"], &["*.robot"]),
-    (&["rocq"], &["*.v"]),
-    (&["rst"], &["*.rst"]),
-    (&["ruby"], &[
-        // Idiomatic files
-        "config.ru", "Gemfile", ".irbrc", "Rakefile",
-        // Extensions
-        "*.gemspec", "*.rb", "*.rbw", "*.rake"
-    ]),
-    (&["rust"], &["*.rs"]),
-    (&["sass"], &["*.sass", "*.scss"]),
-    (&["scala"], &["*.scala", "*.sbt"]),
-    (&["scdoc"], &["*.scd", "*.scdoc"]),
-    (&["seed7"], &["*.sd7", "*.s7i"]),
-    (&["sh"], &[
-        // Portable/misc. init files
-        ".env", ".login", ".logout", ".profile", "profile",
-        // bash-specific init files
-        ".bash_login", "bash_login",
-        ".bash_logout", "bash_logout",
-        ".bash_profile", "bash_profile",
-        ".bashrc", "bashrc", "*.bashrc",
-        // csh-specific init files
-        ".cshrc", "*.cshrc",
-        // ksh-specific init files
-        ".kshrc", "*.kshrc",
-        // tcsh-specific init files
-        ".tcshrc",
-        // zsh-specific init files
-        ".zshenv", "zshenv",
-        ".zlogin", "zlogin",
-        ".zlogout", "zlogout",
-        ".zprofile", "zprofile",
-        ".zshrc", "zshrc",
-        // Extensions
-        "*.bash", "*.csh", "*.env", "*.ksh", "*.sh", "*.tcsh", "*.zsh",
-    ]),
-    (&["slim"], &["*.skim", "*.slim", "*.slime"]),
-    (&["smarty"], &["*.tpl"]),
-    (&["sml"], &["*.sml", "*.sig"]),
-    (&["solidity"], &["*.sol"]),
-    (&["soy"], &["*.soy"]),
-    (&["spark"], &["*.spark"]),
-    (&["spec"], &["*.spec"]),
-    (&["sql"], &["*.sql", "*.psql"]),
-    (&["ssa"], &["*.ssa"]),
-    (&["stylus"], &["*.styl"]),
-    (&["sv"], &["*.v", "*.vg", "*.sv", "*.svh", "*.h"]),
-    (&["svelte"], &["*.svelte", "*.svelte.ts"]),
-    (&["svg"], &["*.svg"]),
-    (&["swift"], &["*.swift"]),
-    (&["swig"], &["*.def", "*.i"]),
-    (&["systemd"], &[
-        "*.automount", "*.conf", "*.device", "*.link", "*.mount", "*.path",
-        "*.scope", "*.service", "*.slice", "*.socket", "*.swap", "*.target",
-        "*.timer",
-    ]),
-    (&["taskpaper"], &["*.taskpaper"]),
-    (&["tcl"], &["*.tcl"]),
-    (&["tex"], &["*.tex", "*.ltx", "*.cls", "*.sty", "*.bib", "*.dtx", "*.ins"]),
-    (&["texinfo"], &["*.texi"]),
-    (&["textile"], &["*.textile"]),
-    (&["tf"], &[
-        "*.tf", "*.tf.json", "*.tfvars", "*.tfvars.json",
-        "*.terraformrc", "terraform.rc", "*.tfrc", "*.terraform.lock.hcl",
-    ]),
-    (&["thrift"], &["*.thrift"]),
-    (&["toml"], &["*.toml", "Cargo.lock"]),
-    (&["ts", "typescript"], &["*.ts", "*.tsx", "*.cts", "*.mts"]),
-    (&["twig"], &["*.twig"]),
-    (&["txt"], &["*.txt"]),
-    (&["typoscript"], &["*.typoscript", "*.ts"]),
-    (&["typst"], &["*.typ"]),
-    (&["usd"], &["*.usd", "*.usda", "*.usdc"]),
-    (&["v"], &["*.v", "*.vsh"]),
-    (&["vala"], &["*.vala"]),
-    (&["vb"], &["*.vb"]),
-    (&["vcl"], &["*.vcl"]),
-    (&["verilog"], &["*.v", "*.vh", "*.sv", "*.svh"]),
-    (&["vhdl"], &["*.vhd", "*.vhdl"]),
-    (&["vim"], &[
-        "*.vim", ".vimrc", ".gvimrc", "vimrc", "gvimrc", "_vimrc", "_gvimrc",
-    ]),
-    (&["vimscript"], &[
-        "*.vim", ".vimrc", ".gvimrc", "vimrc", "gvimrc", "_vimrc", "_gvimrc",
-    ]),
-    (&["vue"], &["*.vue"]),
-    (&["webidl"], &["*.idl", "*.webidl", "*.widl"]),
-    (&["wgsl"], &["*.wgsl"]),
-    (&["wiki"], &["*.mediawiki", "*.wiki"]),
-    (&["xml"], &[
-        "*.xml", "*.xml.dist", "*.dtd", "*.xsl", "*.xslt", "*.xsd", "*.xjb",
-        "*.rng", "*.sch", "*.xhtml",
-    ]),
-    (&["xz"], &["*.xz", "*.txz"]),
-    (&["yacc"], &["*.y"]),
-    (&["yaml"], &["*.yaml", "*.yml"]),
-    (&["yang"], &["*.yang"]),
-    (&["z"], &["*.Z"]),
-    (&["zig"], &["*.zig"]),
-    (&["zsh"], &[
-        ".zshenv", "zshenv",
-        ".zlogin", "zlogin",
-        ".zlogout", "zlogout",
-        ".zprofile", "zprofile",
-        ".zshrc", "zshrc",
-        "*.zsh",
-    ]),
-    (&["zstd"], &["*.zst", "*.zstd"]),
-];
-
-#[cfg(test)]
-mod tests {
-    use super::DEFAULT_TYPES;
-
-    #[test]
-    fn default_types_are_sorted() {
-        let mut names = DEFAULT_TYPES.iter().map(|(aliases, _)| aliases[0]);
-        let Some(mut previous_name) = names.next() else {
-            return;
-        };
-        for name in names {
-            assert!(
-                name > previous_name,
-                r#""{}" should be sorted before "{}" in `DEFAULT_TYPES`"#,
-                name,
-                previous_name
-            );
-            previous_name = name;
-        }
-    }
-
-    #[test]
-    fn default_types_aliases_are_sorted() {
-        for (aliases, _) in DEFAULT_TYPES.iter() {
-            assert!(
-                aliases.is_sorted(),
-                "this alias list is not sorted: {aliases:?}",
-            );
-        }
-    }
-}
diff --git a/crates/ignore/src/dir.rs b/crates/ignore/src/dir.rs
deleted file mode 100644
index 6bee724c8..000000000
--- a/crates/ignore/src/dir.rs
+++ /dev/null
@@ -1,1648 +0,0 @@
-// This module provides a data structure, `Ignore`, that connects "directory
-// traversal" with "ignore matchers." Specifically, it knows about gitignore
-// semantics and precedence, and is organized based on directory hierarchy.
-// Namely, every matcher logically corresponds to ignore rules from a single
-// directory, and points to the matcher for its corresponding parent directory.
-// In this sense, `Ignore` is a *persistent* data structure.
-//
-// This design was specifically chosen to make it possible to use this data
-// structure in a parallel directory iterator.
-//
-// My initial intention was to expose this module as part of this crate's
-// public API, but I think the data structure's public API is too complicated
-// with non-obvious failure modes. Alas, such things haven't been documented
-// well.
-
-use std::{
-    collections::HashMap,
-    ffi::{OsStr, OsString},
-    fs::{self, File, FileType},
-    io::{self, BufRead},
-    path::{Path, PathBuf},
-    sync::{Arc, RwLock, Weak},
-};
-
-use crate::{
-    gitignore::{self, Gitignore, GitignoreBuilder},
-    overrides::{self, Override},
-    pathutil::{is_hidden_entry, strip_prefix},
-    types::{self, Types},
-    walk::DirEntry,
-    {Error, Match, PartialErrorBuilder},
-};
-
-/// IgnoreMatch represents information about where a match came from when using
-/// the `Ignore` matcher.
-#[derive(Clone, Debug)]
-#[allow(dead_code)]
-pub(crate) struct IgnoreMatch<'a>(IgnoreMatchInner<'a>);
-
-/// IgnoreMatchInner describes precisely where the match information came from.
-/// This is private to allow expansion to more matchers in the future.
-#[derive(Clone, Debug)]
-#[allow(dead_code)]
-enum IgnoreMatchInner<'a> {
-    Override(overrides::Glob<'a>),
-    Gitignore(&'a gitignore::Glob),
-    Types(types::Glob<'a>),
-    Hidden,
-}
-
-impl<'a> IgnoreMatch<'a> {
-    fn overrides(x: overrides::Glob<'a>) -> IgnoreMatch<'a> {
-        IgnoreMatch(IgnoreMatchInner::Override(x))
-    }
-
-    fn gitignore(x: &'a gitignore::Glob) -> IgnoreMatch<'a> {
-        IgnoreMatch(IgnoreMatchInner::Gitignore(x))
-    }
-
-    fn types(x: types::Glob<'a>) -> IgnoreMatch<'a> {
-        IgnoreMatch(IgnoreMatchInner::Types(x))
-    }
-
-    fn hidden() -> IgnoreMatch<'static> {
-        IgnoreMatch(IgnoreMatchInner::Hidden)
-    }
-}
-
-/// Options for the ignore matcher, shared between the matcher itself and the
-/// builder.
-#[derive(Clone, Copy, Debug)]
-struct IgnoreOptions {
-    /// Whether to ignore hidden file paths or not.
-    hidden: bool,
-    /// Whether to read .ignore files.
-    ignore: bool,
-    /// Whether to respect any ignore files in parent directories.
-    parents: bool,
-    /// Whether to read git's global gitignore file.
-    git_global: bool,
-    /// Whether to read .gitignore files.
-    git_ignore: bool,
-    /// Whether to read .git/info/exclude files.
-    git_exclude: bool,
-    /// Whether to ignore files case insensitively
-    ignore_case_insensitive: bool,
-    /// Whether a git repository must be present in order to apply any
-    /// git-related ignore rules.
-    require_git: bool,
-}
-
-/// Ignore is a matcher useful for recursively walking one or more directories.
-#[derive(Clone, Debug)]
-pub(crate) struct Ignore {
-    inner: Arc<IgnoreInner>,
-    // Parent matchers are cached independently of the path being walked, but
-    // matching them still needs the canonicalized path originally passed to
-    // `add_parents`. For example, when walking `/tmp/project/src`, parent
-    // matchers use `/tmp/project/src` to rewrite `/tmp/project/src/foo.py`
-    // before matching it against ignore files from `/tmp/project` and its
-    // ancestors.
-    //
-    // For ripgrep itself, this means that `rg pat src tests` must rewrite
-    // `src/foo` relative to `.../src`, and not whatever root was prepared
-    // first.
-    //
-    // See: https://github.com/BurntSushi/ripgrep/pull/3420
-    // See: https://github.com/BurntSushi/ripgrep/issues/3376
-    // See: https://github.com/BurntSushi/ripgrep/issues/3419
-    // See: https://github.com/BurntSushi/ripgrep/issues/3320
-    absolute_base: Option<Arc<PathBuf>>,
-}
-
-#[derive(Clone, Debug)]
-struct IgnoreInner {
-    /// A map of all existing directories that have already been
-    /// compiled into matchers.
-    ///
-    /// Note that this is never used during matching, only when adding new
-    /// parent directory matchers. This avoids needing to rebuild glob sets for
-    /// parent directories if many paths are being searched.
-    compiled: Arc<RwLock<HashMap<OsString, Weak<IgnoreInner>>>>,
-    /// The path to the directory that this matcher was built from.
-    dir: PathBuf,
-    /// An override matcher (default is empty).
-    overrides: Arc<Override>,
-    /// A file type matcher.
-    types: Arc<Types>,
-    /// The parent directory to match next.
-    ///
-    /// If this is the root directory or there are otherwise no more
-    /// directories to match, then `parent` is `None`.
-    parent: Option<Arc<IgnoreInner>>,
-    /// Whether this is an absolute parent matcher, as added by add_parent.
-    is_absolute_parent: bool,
-    /// The directory that gitignores should be interpreted relative to.
-    ///
-    /// Usually this is the directory containing the gitignore file. But in
-    /// some cases, like for global gitignores or for gitignores specified
-    /// explicitly, this should generally be set to the current working
-    /// directory. This is only used for global gitignores or "explicit"
-    /// gitignores.
-    ///
-    /// When `None`, this means the CWD could not be determined or is unknown.
-    /// In this case, global gitignore files are ignored because they otherwise
-    /// cannot be matched correctly.
-    global_gitignores_relative_to: Option<PathBuf>,
-    /// Explicit global ignore matchers specified by the caller.
-    explicit_ignores: Arc<Vec<Gitignore>>,
-    /// Ignore files used in addition to `.ignore`
-    custom_ignore_filenames: Arc<Vec<OsString>>,
-    /// The matcher for custom ignore files
-    custom_ignore_matcher: Gitignore,
-    /// The matcher for .ignore files.
-    ignore_matcher: Gitignore,
-    /// A global gitignore matcher, usually from $XDG_CONFIG_HOME/git/ignore.
-    git_global_matcher: Arc<Gitignore>,
-    /// The matcher for .gitignore files.
-    git_ignore_matcher: Gitignore,
-    /// Special matcher for `.git/info/exclude` files.
-    git_exclude_matcher: Gitignore,
-    /// Whether this directory contains a .git sub-directory.
-    has_git: bool,
-    /// Ignore config.
-    opts: IgnoreOptions,
-}
-
-impl Ignore {
-    /// Return the directory path of this matcher.
-    #[cfg(test)]
-    pub(crate) fn path(&self) -> &Path {
-        &self.inner.dir
-    }
-
-    /// Return true if this matcher has no parent.
-    pub(crate) fn is_root(&self) -> bool {
-        self.inner.parent.is_none()
-    }
-
-    /// Return this matcher's parent, if one exists.
-    pub(crate) fn parent(&self) -> Option<Ignore> {
-        self.inner.parent.as_ref().map(|parent| Ignore {
-            inner: parent.clone(),
-            absolute_base: self.absolute_base.clone(),
-        })
-    }
-
-    /// Create a new `Ignore` matcher with the parent directories of `dir`.
-    ///
-    /// Note that this can only be called on an `Ignore` matcher with no
-    /// parents (i.e., `is_root` returns `true`). This will panic otherwise.
-    pub(crate) fn add_parents<P: AsRef<Path>>(
-        &self,
-        path: P,
-    ) -> (Ignore, Option<Error>) {
-        if !self.inner.opts.parents
-            && !self.inner.opts.git_ignore
-            && !self.inner.opts.git_exclude
-            && !self.inner.opts.git_global
-        {
-            // If we never need info from parent directories, then don't do
-            // anything.
-            return (self.clone(), None);
-        }
-        if !self.is_root() {
-            panic!("Ignore::add_parents called on non-root matcher");
-        }
-        // CHANGED: Use `dunce::canonicalize` as we use it everywhere else.
-        let absolute_base = match dunce::canonicalize(path.as_ref()) {
-            Ok(path) => Arc::new(path),
-            Err(_) => {
-                // There's not much we can do here, so just return our
-                // existing matcher. We drop the error to be consistent
-                // with our general pattern of ignoring I/O errors when
-                // processing ignore files.
-                return (self.clone(), None);
-            }
-        };
-        // List of parents, from child to root.
-        let mut parents = vec![];
-        let mut path = &**absolute_base;
-        while let Some(parent) = path.parent() {
-            parents.push(parent);
-            path = parent;
-        }
-        let mut errs = PartialErrorBuilder::default();
-        let mut ig = self.clone();
-        for parent in parents.into_iter().rev() {
-            let mut compiled = self.inner.compiled.write().unwrap();
-            if let Some(weak) = compiled.get(parent.as_os_str()) {
-                if let Some(prebuilt) = weak.upgrade() {
-                    ig = Ignore {
-                        inner: prebuilt,
-                        absolute_base: Some(absolute_base.clone()),
-                    };
-                    continue;
-                }
-            }
-            let (mut igtmp, err) = ig.add_child_path(parent);
-            errs.maybe_push(err);
-            igtmp.is_absolute_parent = true;
-            igtmp.has_git =
-                if self.inner.opts.require_git && self.inner.opts.git_ignore {
-                    parent.join(".git").exists() || parent.join(".jj").exists()
-                } else {
-                    false
-                };
-            let ig_arc = Arc::new(igtmp);
-            ig = Ignore {
-                inner: ig_arc.clone(),
-                absolute_base: Some(absolute_base.clone()),
-            };
-            compiled.insert(
-                parent.as_os_str().to_os_string(),
-                Arc::downgrade(&ig_arc),
-            );
-        }
-        (ig, errs.into_error_option())
-    }
-
-    /// Create a new `Ignore` matcher for the given child directory.
-    ///
-    /// Since building the matcher may require reading from multiple
-    /// files, it's possible that this method partially succeeds. Therefore,
-    /// a matcher is always returned (which may match nothing) and an error is
-    /// returned if it exists.
-    ///
-    /// Note that all I/O errors are completely ignored.
-    pub(crate) fn add_child<P: AsRef<Path>>(
-        &self,
-        dir: P,
-    ) -> (Ignore, Option<Error>) {
-        let (ig, err) = self.add_child_path(dir.as_ref());
-        (
-            Ignore {
-                inner: Arc::new(ig),
-                absolute_base: self.absolute_base.clone(),
-            },
-            err,
-        )
-    }
-
-    /// Like add_child, but uses successful read_dir entries to reduce
-    /// probing when discovering ignore files.
-    pub(crate) fn add_child_with_entries<P: AsRef<Path>>(
-        &self,
-        dir: P,
-        entries: &[fs::DirEntry],
-    ) -> (Ignore, Option<Error>) {
-        let files = self.collect_ignore_files(entries);
-        let (ig, err) = self.add_child_path_with_found_ignore_files(
-            dir.as_ref(),
-            Some(&files),
-        );
-        (
-            Ignore {
-                inner: Arc::new(ig),
-                absolute_base: self.absolute_base.clone(),
-            },
-            err,
-        )
-    }
-
-    /// Like add_child, but takes a full path and returns an IgnoreInner.
-    fn add_child_path(&self, dir: &Path) -> (IgnoreInner, Option<Error>) {
-        self.add_child_path_with_found_ignore_files(dir, None)
-    }
-
-    fn collect_ignore_files(
-        &self,
-        entries: &[fs::DirEntry],
-    ) -> IgnoreFilesFound {
-        let custom_ignore_filenames = &self.inner.custom_ignore_filenames;
-        let mut files = IgnoreFilesFound {
-            has_ignore: false,
-            has_git_ignore: false,
-            has_git_dir: false,
-            has_jj_dir: false,
-            custom_ignore_files: vec![false; custom_ignore_filenames.len()],
-        };
-        for entry in entries {
-            let file_name = entry.file_name();
-            if file_name == OsStr::new(".ignore") {
-                files.has_ignore = true;
-            } else if file_name == OsStr::new(".gitignore") {
-                files.has_git_ignore = true;
-            } else if file_name == OsStr::new(".git") {
-                files.has_git_dir = true;
-            } else if file_name == OsStr::new(".jj") {
-                files.has_jj_dir = true;
-            }
-            for (i, name) in custom_ignore_filenames.iter().enumerate() {
-                if file_name == name.as_os_str() {
-                    files.custom_ignore_files[i] = true;
-                }
-            }
-        }
-        files
-    }
-
-    fn add_child_path_with_found_ignore_files(
-        &self,
-        dir: &Path,
-        ignore_files_list: Option<&IgnoreFilesFound>,
-    ) -> (IgnoreInner, Option<Error>) {
-        let check_vcs_dir = self.inner.opts.require_git
-            && (self.inner.opts.git_ignore || self.inner.opts.git_exclude);
-        let git_type = if check_vcs_dir
-            && ignore_files_list.is_none_or(|i| i.has_git_dir)
-        {
-            dir.join(".git").metadata().ok().map(|md| md.file_type())
-        } else {
-            None
-        };
-        let has_jj = check_vcs_dir
-            && ignore_files_list.is_none_or(|i| i.has_jj_dir)
-            && dir.join(".jj").exists();
-        let has_git = check_vcs_dir && (git_type.is_some() || has_jj);
-
-        let mut errs = PartialErrorBuilder::default();
-        let custom_ig_matcher = if self
-            .inner
-            .custom_ignore_filenames
-            .is_empty()
-        {
-            Gitignore::empty()
-        } else {
-            let custom_ignore_names: Vec<&OsString> = match ignore_files_list {
-                None => self.inner.custom_ignore_filenames.iter().collect(),
-                Some(m) => self
-                    .inner
-                    .custom_ignore_filenames
-                    .iter()
-                    .zip(m.custom_ignore_files.iter())
-                    .filter(|&(_, &matched)| matched)
-                    .map(|(name, _)| name)
-                    .collect(),
-            };
-            if custom_ignore_names.is_empty() {
-                Gitignore::empty()
-            } else {
-                let (m, err) = create_gitignore(
-                    &dir,
-                    &dir,
-                    &custom_ignore_names,
-                    self.inner.opts.ignore_case_insensitive,
-                );
-                errs.maybe_push(err);
-                m
-            }
-        };
-        let ig_matcher = if !self.inner.opts.ignore
-            || !ignore_files_list.is_none_or(|i| i.has_ignore)
-        {
-            Gitignore::empty()
-        } else {
-            let (m, err) = create_gitignore(
-                &dir,
-                &dir,
-                &[".ignore"],
-                self.inner.opts.ignore_case_insensitive,
-            );
-            errs.maybe_push(err);
-            m
-        };
-        let gi_matcher = if !self.inner.opts.git_ignore
-            || !ignore_files_list.is_none_or(|i| i.has_git_ignore)
-        {
-            Gitignore::empty()
-        } else {
-            let (m, err) = create_gitignore(
-                &dir,
-                &dir,
-                &[".gitignore"],
-                self.inner.opts.ignore_case_insensitive,
-            );
-            errs.maybe_push(err);
-            m
-        };
-
-        let gi_exclude_matcher = if !self.inner.opts.git_exclude
-            || !ignore_files_list.is_none_or(|i| i.has_git_dir)
-        {
-            Gitignore::empty()
-        } else {
-            match resolve_git_commondir(dir, git_type) {
-                Ok(git_dir) => {
-                    let (m, err) = create_gitignore(
-                        &dir,
-                        &git_dir,
-                        &["info/exclude"],
-                        self.inner.opts.ignore_case_insensitive,
-                    );
-                    errs.maybe_push(err);
-                    m
-                }
-                Err(err) => {
-                    errs.maybe_push(err);
-                    Gitignore::empty()
-                }
-            }
-        };
-        let ig = IgnoreInner {
-            compiled: self.inner.compiled.clone(),
-            dir: dir.to_path_buf(),
-            overrides: self.inner.overrides.clone(),
-            types: self.inner.types.clone(),
-            parent: Some(self.inner.clone()),
-            is_absolute_parent: false,
-            global_gitignores_relative_to: self
-                .inner
-                .global_gitignores_relative_to
-                .clone(),
-            explicit_ignores: self.inner.explicit_ignores.clone(),
-            custom_ignore_filenames: self
-                .inner
-                .custom_ignore_filenames
-                .clone(),
-            custom_ignore_matcher: custom_ig_matcher,
-            ignore_matcher: ig_matcher,
-            git_global_matcher: self.inner.git_global_matcher.clone(),
-            git_ignore_matcher: gi_matcher,
-            git_exclude_matcher: gi_exclude_matcher,
-            has_git,
-            opts: self.inner.opts,
-        };
-        (ig, errs.into_error_option())
-    }
-
-    /// Returns true if at least one type of ignore rule should be matched.
-    fn has_any_ignore_rules(&self) -> bool {
-        let opts = self.inner.opts;
-        let has_custom_ignore_files =
-            !self.inner.custom_ignore_filenames.is_empty();
-        let has_explicit_ignores = !self.inner.explicit_ignores.is_empty();
-
-        opts.ignore
-            || opts.git_global
-            || opts.git_ignore
-            || opts.git_exclude
-            || has_custom_ignore_files
-            || has_explicit_ignores
-    }
-
-    /// Like `matched`, but works with a directory entry instead.
-    pub(crate) fn matched_dir_entry<'a>(
-        &'a self,
-        dent: &DirEntry,
-    ) -> Match<IgnoreMatch<'a>> {
-        let m = self.matched(dent.path(), dent.is_dir());
-        if m.is_none() && self.inner.opts.hidden && is_hidden_entry(dent) {
-            return Match::Ignore(IgnoreMatch::hidden());
-        }
-        m
-    }
-
-    /// Returns a match indicating whether the given file path should be
-    /// ignored or not.
-    ///
-    /// The match contains information about its origin.
-    pub(crate) fn matched<'a, P: AsRef<Path>>(
-        &'a self,
-        path: P,
-        is_dir: bool,
-    ) -> Match<IgnoreMatch<'a>> {
-        // We need to be careful with our path. If it has a leading ./, then
-        // strip it because it causes nothing but trouble.
-        let mut path = path.as_ref();
-        if let Some(p) = strip_prefix("./", path) {
-            path = p;
-        }
-        // Match against the override patterns. If an override matches
-        // regardless of whether it's whitelist/ignore, then we quit and
-        // return that result immediately. Overrides have the highest
-        // precedence.
-        if !self.inner.overrides.is_empty() {
-            let mat = self
-                .inner
-                .overrides
-                .matched(path, is_dir)
-                .map(IgnoreMatch::overrides);
-            if !mat.is_none() {
-                return mat;
-            }
-        }
-        let mut whitelisted = Match::None;
-        if self.has_any_ignore_rules() {
-            let mat = self.matched_ignore(path, is_dir);
-            if mat.is_ignore() {
-                return mat;
-            } else if mat.is_whitelist() {
-                whitelisted = mat;
-            }
-        }
-        if !self.inner.types.is_empty() {
-            let mat =
-                self.inner.types.matched(path, is_dir).map(IgnoreMatch::types);
-            if mat.is_ignore() {
-                return mat;
-            } else if mat.is_whitelist() {
-                whitelisted = mat;
-            }
-        }
-        whitelisted
-    }
-
-    /// Performs matching only on the ignore files for this directory and
-    /// all parent directories.
-    pub(crate) fn matched_ignore<'a>(
-        &'a self,
-        path: &Path,
-        is_dir: bool,
-    ) -> Match<IgnoreMatch<'a>> {
-        let (
-            mut m_custom_ignore,
-            mut m_ignore,
-            mut m_gi,
-            mut m_gi_exclude,
-            mut m_explicit,
-        ) = (Match::None, Match::None, Match::None, Match::None, Match::None);
-        let any_git = !self.inner.opts.require_git
-            || self.parents().any(|ig| ig.inner.has_git);
-        let mut saw_git = false;
-        for ig in self.parents().take_while(|ig| !ig.inner.is_absolute_parent)
-        {
-            if m_custom_ignore.is_none() {
-                m_custom_ignore = ig
-                    .inner
-                    .custom_ignore_matcher
-                    .matched(path, is_dir)
-                    .map(IgnoreMatch::gitignore);
-            }
-            if m_ignore.is_none() {
-                m_ignore = ig
-                    .inner
-                    .ignore_matcher
-                    .matched(path, is_dir)
-                    .map(IgnoreMatch::gitignore);
-            }
-            if any_git && !saw_git && m_gi.is_none() {
-                m_gi = ig
-                    .inner
-                    .git_ignore_matcher
-                    .matched(path, is_dir)
-                    .map(IgnoreMatch::gitignore);
-            }
-            if any_git && !saw_git && m_gi_exclude.is_none() {
-                m_gi_exclude = ig
-                    .inner
-                    .git_exclude_matcher
-                    .matched(path, is_dir)
-                    .map(IgnoreMatch::gitignore);
-            }
-            saw_git = saw_git || ig.inner.has_git;
-        }
-        if self.inner.opts.parents {
-            if let Some(abs_parent_path) = self.absolute_base() {
-                // What we want to do here is take the absolute base path of
-                // this directory and join it with the path we're searching.
-                // The main issue we want to avoid is accidentally duplicating
-                // directory components, so we try to strip any common prefix
-                // off of `path`. Overall, this seems a little ham-fisted, but
-                // it does fix a nasty bug. It should do fine until we overhaul
-                // this crate.
-                let path = abs_parent_path.join(
-                    self.parents()
-                        .take_while(|ig| !ig.inner.is_absolute_parent)
-                        .last()
-                        .map_or(path, |ig| {
-                            // This is a weird special case when ripgrep users
-                            // search with just a `.`, as some tools do
-                            // automatically (like consult). In this case, if
-                            // we don't bail out now, the code below will strip
-                            // a leading `.` from `path`, which might mangle
-                            // a hidden file name!
-                            if ig.inner.dir.as_path() == Path::new(".") {
-                                return path;
-                            }
-                            let without_dot_slash = strip_if_is_prefix(
-                                "./",
-                                ig.inner.dir.as_path(),
-                            );
-                            let relative_base =
-                                strip_if_is_prefix(without_dot_slash, path);
-                            strip_if_is_prefix("/", relative_base)
-                        }),
-                );
-
-                for ig in self
-                    .parents()
-                    .skip_while(|ig| !ig.inner.is_absolute_parent)
-                {
-                    if m_custom_ignore.is_none() {
-                        m_custom_ignore = ig
-                            .inner
-                            .custom_ignore_matcher
-                            .matched(&path, is_dir)
-                            .map(IgnoreMatch::gitignore);
-                    }
-                    if m_ignore.is_none() {
-                        m_ignore = ig
-                            .inner
-                            .ignore_matcher
-                            .matched(&path, is_dir)
-                            .map(IgnoreMatch::gitignore);
-                    }
-                    if any_git && !saw_git && m_gi.is_none() {
-                        m_gi = ig
-                            .inner
-                            .git_ignore_matcher
-                            .matched(&path, is_dir)
-                            .map(IgnoreMatch::gitignore);
-                    }
-                    if any_git && !saw_git && m_gi_exclude.is_none() {
-                        m_gi_exclude = ig
-                            .inner
-                            .git_exclude_matcher
-                            .matched(&path, is_dir)
-                            .map(IgnoreMatch::gitignore);
-                    }
-                    saw_git = saw_git || ig.inner.has_git;
-                }
-            }
-        }
-        for gi in self.inner.explicit_ignores.iter().rev() {
-            if !m_explicit.is_none() {
-                break;
-            }
-            // CHANGED: We need to make sure that the explicit gitignore rules
-            // apply to the path
-            //
-            //     path      = Is the current file/folder we are traversing
-            //     gi.path() = Is the path of the custom gitignore file
-            //
-            // E.g.: If we have a custom rule for `/src/utils` with `**/*`, and
-            //       we are looking at just `/src`, then the `**/*` rules do
-            //       not apply to this folder, so we can ignore the current
-            //       custom gitignore file.
-            if !path.starts_with(gi.path()) {
-                continue;
-            }
-            m_explicit = gi.matched(&path, is_dir).map(IgnoreMatch::gitignore);
-        }
-        let m_global = if any_git {
-            self.inner
-                .git_global_matcher
-                .matched(&path, is_dir)
-                .map(IgnoreMatch::gitignore)
-        } else {
-            Match::None
-        };
-
-        // CHANGED: We added logic to configure an order in which the ignore
-        // files are respected. Explicitly added ignores (via
-        // `WalkBuilder::add_gitignore`) take precedence over all ignore files
-        // found on disk, and the first source with a definitive answer wins.
-        let order = [
-            // Manually added ignores
-            m_explicit,
-            // .custom-ignore
-            m_custom_ignore,
-            // .ignore
-            m_ignore,
-            // .gitignore
-            m_gi,
-            // .git/info/exclude
-            m_gi_exclude,
-            // Global gitignore
-            m_global,
-        ];
-        for check in order.into_iter() {
-            if !check.is_none() {
-                return check;
-            }
-        }
-        Match::None
-    }
-
-    /// Returns an iterator over parent ignore matchers, including this one.
-    pub(crate) fn parents(&self) -> Parents<'_> {
-        Parents(Some(IgnoreRef { inner: &self.inner }))
-    }
-
-    /// Returns the first absolute path of the first absolute parent, if
-    /// one exists.
-    fn absolute_base(&self) -> Option<&Path> {
-        self.absolute_base.as_ref().map(|p| &***p)
-    }
-}
-
-/// State for tracking what kinds of files ripgrep is interested in for a
-/// given directory.
-///
-/// This is computed over the entire set of files in a directory instead of
-/// trying to stat each file individually. If a file is present, it's only then
-/// that we stat it for more information, instead of relying on the stat to
-/// determine its existence.
-#[derive(Debug)]
-struct IgnoreFilesFound {
-    has_ignore: bool,
-    has_git_ignore: bool,
-    has_git_dir: bool,
-    has_jj_dir: bool,
-    custom_ignore_files: Vec<bool>,
-}
-
-#[derive(Clone, Copy)]
-pub(crate) struct IgnoreRef<'a> {
-    inner: &'a IgnoreInner,
-}
-
-impl IgnoreRef<'_> {
-    pub(crate) fn path(&self) -> &Path {
-        &self.inner.dir
-    }
-
-    pub(crate) fn is_absolute_parent(&self) -> bool {
-        self.inner.is_absolute_parent
-    }
-}
-
-/// An iterator over all parents of an ignore matcher, including itself.
-pub(crate) struct Parents<'a>(Option<IgnoreRef<'a>>);
-
-impl<'a> Iterator for Parents<'a> {
-    type Item = IgnoreRef<'a>;
-
-    fn next(&mut self) -> Option<IgnoreRef<'a>> {
-        match self.0.take() {
-            None => None,
-            Some(ig) => {
-                self.0 = ig
-                    .inner
-                    .parent
-                    .as_deref()
-                    .map(|inner| IgnoreRef { inner });
-                Some(ig)
-            }
-        }
-    }
-}
-
-/// A builder for creating an Ignore matcher.
-#[derive(Clone, Debug)]
-pub(crate) struct IgnoreBuilder {
-    /// The root directory path for this ignore matcher.
-    dir: PathBuf,
-    /// An override matcher (default is empty).
-    overrides: Arc<Override>,
-    /// A type matcher (default is empty).
-    types: Arc<Types>,
-    /// Explicit global ignore matchers.
-    explicit_ignores: Vec<Gitignore>,
-    /// Ignore files in addition to .ignore.
-    custom_ignore_filenames: Vec<OsString>,
-    /// The directory that gitignores should be interpreted relative to.
-    ///
-    /// Usually this is the directory containing the gitignore file. But in
-    /// some cases, like for global gitignores or for gitignores specified
-    /// explicitly, this should generally be set to the current working
-    /// directory. This is only used for global gitignores or "explicit"
-    /// gitignores.
-    ///
-    /// When `None`, global gitignores are ignored.
-    global_gitignores_relative_to: Option<PathBuf>,
-    /// Ignore config.
-    opts: IgnoreOptions,
-}
-
-impl IgnoreBuilder {
-    /// Create a new builder for an `Ignore` matcher.
-    ///
-    /// It is likely a bug to use this without also calling `current_dir()`
-    /// outside of tests. This isn't made mandatory because this is an internal
-    /// abstraction and it's annoying to update tests.
-    pub(crate) fn new() -> IgnoreBuilder {
-        IgnoreBuilder {
-            dir: Path::new("").to_path_buf(),
-            overrides: Arc::new(Override::empty()),
-            types: Arc::new(Types::empty()),
-            explicit_ignores: vec![],
-            custom_ignore_filenames: vec![],
-            global_gitignores_relative_to: None,
-            opts: IgnoreOptions {
-                hidden: true,
-                ignore: true,
-                parents: true,
-                git_global: true,
-                git_ignore: true,
-                git_exclude: true,
-                ignore_case_insensitive: false,
-                require_git: true,
-            },
-        }
-    }
-
-    /// Builds a new `Ignore` matcher.
-    ///
-    /// The matcher returned won't match anything until ignore rules from
-    /// directories are added to it.
-    pub(crate) fn build(&self) -> Ignore {
-        self.build_with_cwd(None)
-    }
-
-    /// Builds a new `Ignore` matcher using the given CWD directory.
-    ///
-    /// The matcher returned won't match anything until ignore rules from
-    /// directories are added to it.
-    pub(crate) fn build_with_cwd(&self, cwd: Option<PathBuf>) -> Ignore {
-        let global_gitignores_relative_to =
-            cwd.or_else(|| self.global_gitignores_relative_to.clone());
-        let git_global_matcher = if !self.opts.git_global {
-            Gitignore::empty()
-        } else if let Some(ref cwd) = global_gitignores_relative_to {
-            let mut builder = GitignoreBuilder::new(cwd);
-            builder
-                .case_insensitive(self.opts.ignore_case_insensitive)
-                .unwrap();
-            let (gi, err) = builder.build_global();
-            if let Some(err) = err {
-                log::debug!("{}", err);
-            }
-            gi
-        } else {
-            log::debug!(
-                "ignoring global gitignore file because CWD is not known"
-            );
-            Gitignore::empty()
-        };
-
-        Ignore {
-            inner: Arc::new(IgnoreInner {
-                compiled: Arc::new(RwLock::new(HashMap::new())),
-                dir: self.dir.clone(),
-                overrides: self.overrides.clone(),
-                types: self.types.clone(),
-                parent: None,
-                is_absolute_parent: true,
-                global_gitignores_relative_to,
-                explicit_ignores: Arc::new(self.explicit_ignores.clone()),
-                custom_ignore_filenames: Arc::new(
-                    self.custom_ignore_filenames.clone(),
-                ),
-                custom_ignore_matcher: Gitignore::empty(),
-                ignore_matcher: Gitignore::empty(),
-                git_global_matcher: Arc::new(git_global_matcher),
-                git_ignore_matcher: Gitignore::empty(),
-                git_exclude_matcher: Gitignore::empty(),
-                has_git: false,
-                opts: self.opts,
-            }),
-            absolute_base: None,
-        }
-    }
-
-    /// Set the current directory used for matching global gitignores.
-    pub(crate) fn current_dir(
-        &mut self,
-        cwd: impl Into<PathBuf>,
-    ) -> &mut IgnoreBuilder {
-        self.global_gitignores_relative_to = Some(cwd.into());
-        self
-    }
-
-    /// Add an override matcher.
-    ///
-    /// By default, no override matcher is used.
-    ///
-    /// This overrides any previous setting.
-    pub(crate) fn overrides(
-        &mut self,
-        overrides: Override,
-    ) -> &mut IgnoreBuilder {
-        self.overrides = Arc::new(overrides);
-        self
-    }
-
-    /// Add a file type matcher.
-    ///
-    /// By default, no file type matcher is used.
-    ///
-    /// This overrides any previous setting.
-    pub(crate) fn types(&mut self, types: Types) -> &mut IgnoreBuilder {
-        self.types = Arc::new(types);
-        self
-    }
-
-    /// Adds a new global ignore matcher from the ignore file path given.
-    pub(crate) fn add_ignore(&mut self, ig: Gitignore) -> &mut IgnoreBuilder {
-        self.explicit_ignores.push(ig);
-        self
-    }
-
-    /// Add a custom ignore file name
-    ///
-    /// These ignore files have higher precedence than all other ignore files.
-    ///
-    /// When specifying multiple names, earlier names have lower precedence than
-    /// later names.
-    pub(crate) fn add_custom_ignore_filename<S: AsRef<OsStr>>(
-        &mut self,
-        file_name: S,
-    ) -> &mut IgnoreBuilder {
-        self.custom_ignore_filenames.push(file_name.as_ref().to_os_string());
-        self
-    }
-
-    /// Enables ignoring hidden files.
-    ///
-    /// This is enabled by default.
-    pub(crate) fn hidden(&mut self, yes: bool) -> &mut IgnoreBuilder {
-        self.opts.hidden = yes;
-        self
-    }
-
-    /// Whether ignoring hidden files is enabled or not.
-    pub(crate) fn is_hidden(&self) -> bool {
-        self.opts.hidden
-    }
-
-    /// Enables reading `.ignore` files.
-    ///
-    /// `.ignore` files have the same semantics as `gitignore` files and are
-    /// supported by search tools such as ripgrep and The Silver Searcher.
-    ///
-    /// This is enabled by default.
-    pub(crate) fn ignore(&mut self, yes: bool) -> &mut IgnoreBuilder {
-        self.opts.ignore = yes;
-        self
-    }
-
-    /// Enables reading ignore files from parent directories.
-    ///
-    /// If this is enabled, then .gitignore files in parent directories of each
-    /// file path given are respected. Otherwise, they are ignored.
-    ///
-    /// This is enabled by default.
-    pub(crate) fn parents(&mut self, yes: bool) -> &mut IgnoreBuilder {
-        self.opts.parents = yes;
-        self
-    }
-
-    /// Add a global gitignore matcher.
-    ///
-    /// Its precedence is lower than both normal `.gitignore` files and
-    /// `.git/info/exclude` files.
-    ///
-    /// This overwrites any previous global gitignore setting.
-    ///
-    /// This is enabled by default.
-    pub(crate) fn git_global(&mut self, yes: bool) -> &mut IgnoreBuilder {
-        self.opts.git_global = yes;
-        self
-    }
-
-    /// Enables reading `.gitignore` files.
-    ///
-    /// `.gitignore` files have match semantics as described in the `gitignore`
-    /// man page.
-    ///
-    /// This is enabled by default.
-    pub(crate) fn git_ignore(&mut self, yes: bool) -> &mut IgnoreBuilder {
-        self.opts.git_ignore = yes;
-        self
-    }
-
-    /// Enables reading `.git/info/exclude` files.
-    ///
-    /// `.git/info/exclude` files have match semantics as described in the
-    /// `gitignore` man page.
-    ///
-    /// This is enabled by default.
-    pub(crate) fn git_exclude(&mut self, yes: bool) -> &mut IgnoreBuilder {
-        self.opts.git_exclude = yes;
-        self
-    }
-
-    /// Whether a git repository is required to apply git-related ignore
-    /// rules (global rules, .gitignore and local exclude rules).
-    ///
-    /// When disabled, git-related ignore rules are applied even when searching
-    /// outside a git repository.
-    pub(crate) fn require_git(&mut self, yes: bool) -> &mut IgnoreBuilder {
-        self.opts.require_git = yes;
-        self
-    }
-
-    /// Process ignore files case insensitively
-    ///
-    /// This is disabled by default.
-    pub(crate) fn ignore_case_insensitive(
-        &mut self,
-        yes: bool,
-    ) -> &mut IgnoreBuilder {
-        self.opts.ignore_case_insensitive = yes;
-        self
-    }
-}
-
-/// Creates a new gitignore matcher for the directory given.
-///
-/// The matcher is meant to match files below `dir`.
-/// Ignore globs are extracted from each of the file names relative to
-/// `dir_for_ignorefile` in the order given (earlier names have lower
-/// precedence than later names).
-///
-/// I/O errors are ignored.
-pub(crate) fn create_gitignore<T: AsRef<OsStr>>(
-    dir: &Path,
-    dir_for_ignorefile: &Path,
-    names: &[T],
-    case_insensitive: bool,
-) -> (Gitignore, Option<Error>) {
-    let mut builder = GitignoreBuilder::new(dir);
-    let mut errs = PartialErrorBuilder::default();
-    builder.case_insensitive(case_insensitive).unwrap();
-    for name in names {
-        let gipath = dir_for_ignorefile.join(name.as_ref());
-        // This check is not necessary, but is added for performance. Namely,
-        // a simple stat call checking for existence can often be just a bit
-        // quicker than actually trying to open a file. Since the number of
-        // directories without ignore files likely greatly exceeds the number
-        // with ignore files, this check generally makes sense.
-        //
-        // However, until demonstrated otherwise, we speculatively do not do
-        // this on Windows since Windows is notorious for having slow file
-        // system operations. Namely, it's not clear whether this analysis
-        // makes sense on Windows.
-        //
-        // For more details: https://github.com/BurntSushi/ripgrep/pull/1381
-        if cfg!(windows) || gipath.exists() {
-            errs.maybe_push_ignore_io(builder.add(gipath));
-        }
-    }
-    let gi = match builder.build() {
-        Ok(gi) => gi,
-        Err(err) => {
-            errs.push(err);
-            GitignoreBuilder::new(dir).build().unwrap()
-        }
-    };
-    (gi, errs.into_error_option())
-}
-
-/// Find the GIT_COMMON_DIR for the given git worktree.
-///
-/// This is the directory that may contain a private ignore file
-/// "info/exclude". Unlike git, this function does *not* read environment
-/// variables GIT_DIR and GIT_COMMON_DIR, because it is not clear how to use
-/// them when multiple repositories are searched.
-///
-/// Some I/O errors are ignored.
-fn resolve_git_commondir(
-    dir: &Path,
-    git_type: Option<FileType>,
-) -> Result<PathBuf, Option<Error>> {
-    let git_dir_path = || dir.join(".git");
-    let git_dir = git_dir_path();
-    if !git_type.map_or(false, |ft| ft.is_file()) {
-        return Ok(git_dir);
-    }
-    let file = match File::open(git_dir) {
-        Ok(file) => io::BufReader::new(file),
-        Err(err) => {
-            return Err(Some(Error::Io(err).with_path(git_dir_path())));
-        }
-    };
-    let dot_git_line = match file.lines().next() {
-        Some(Ok(line)) => line,
-        Some(Err(err)) => {
-            return Err(Some(Error::Io(err).with_path(git_dir_path())));
-        }
-        None => return Err(None),
-    };
-    if !dot_git_line.starts_with("gitdir: ") {
-        return Err(None);
-    }
-    let real_git_dir = PathBuf::from(&dot_git_line["gitdir: ".len()..]);
-    let git_commondir_file = || real_git_dir.join("commondir");
-    let file = match File::open(git_commondir_file()) {
-        Ok(file) => io::BufReader::new(file),
-        Err(_) => return Err(None),
-    };
-    let commondir_line = match file.lines().next() {
-        Some(Ok(line)) => line,
-        Some(Err(err)) => {
-            return Err(Some(Error::Io(err).with_path(git_commondir_file())));
-        }
-        None => return Err(None),
-    };
-    let commondir_abs = if commondir_line.starts_with(".") {
-        real_git_dir.join(commondir_line) // relative commondir
-    } else {
-        PathBuf::from(commondir_line)
-    };
-    Ok(commondir_abs)
-}
-
-/// Strips `prefix` from `path` if it's a prefix, otherwise returns `path`
-/// unchanged.
-fn strip_if_is_prefix<'a, P: AsRef<Path> + ?Sized>(
-    prefix: &'a P,
-    path: &'a Path,
-) -> &'a Path {
-    strip_prefix(prefix, path).map_or(path, |p| p)
-}
-
-#[cfg(test)]
-mod tests {
-    use std::{io::Write, path::Path, sync::Arc};
-
-    use crate::{
-        Error, dir::IgnoreBuilder, gitignore::Gitignore, tests::TempDir,
-    };
-
-    fn wfile<P: AsRef<Path>>(path: P, contents: &str) {
-        let mut file = std::fs::File::create(path).unwrap();
-        file.write_all(contents.as_bytes()).unwrap();
-    }
-
-    fn mkdirp<P: AsRef<Path>>(path: P) {
-        std::fs::create_dir_all(path).unwrap();
-    }
-
-    fn partial(err: Error) -> Vec<Error> {
-        match err {
-            Error::Partial(errs) => errs,
-            _ => panic!("expected partial error but got {:?}", err),
-        }
-    }
-
-    fn tmpdir() -> TempDir {
-        TempDir::new().unwrap()
-    }
-
-    #[test]
-    fn explicit_ignore() {
-        let td = tmpdir();
-        wfile(td.path().join("not-an-ignore"), "foo\n!bar");
-
-        let (gi, err) = Gitignore::new(td.path().join("not-an-ignore"));
-        assert!(err.is_none());
-        let (ig, err) =
-            IgnoreBuilder::new().add_ignore(gi).build().add_child(td.path());
-        assert!(err.is_none());
-        // CHANGED: Explicit ignores only apply to paths inside the directory
-        // of the ignore file, so we have to match against full paths.
-        assert!(ig.matched(td.path().join("foo"), false).is_ignore());
-        assert!(ig.matched(td.path().join("bar"), false).is_whitelist());
-        assert!(ig.matched(td.path().join("baz"), false).is_none());
-        assert!(ig.matched("/foo", false).is_none());
-    }
-
-    #[test]
-    fn git_exclude() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git/info"));
-        wfile(td.path().join(".git/info/exclude"), "foo\n!bar");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_ignore());
-        assert!(ig.matched("bar", false).is_whitelist());
-        assert!(ig.matched("baz", false).is_none());
-    }
-
-    #[test]
-    fn gitignore() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        wfile(td.path().join(".gitignore"), "foo\n!bar");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_ignore());
-        assert!(ig.matched("bar", false).is_whitelist());
-        assert!(ig.matched("baz", false).is_none());
-    }
-
-    #[test]
-    fn gitignore_with_jj() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".jj"));
-        wfile(td.path().join(".gitignore"), "foo\n!bar");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_ignore());
-        assert!(ig.matched("bar", false).is_whitelist());
-        assert!(ig.matched("baz", false).is_none());
-    }
-
-    #[test]
-    fn gitignore_no_git() {
-        let td = tmpdir();
-        wfile(td.path().join(".gitignore"), "foo\n!bar");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_none());
-        assert!(ig.matched("bar", false).is_none());
-        assert!(ig.matched("baz", false).is_none());
-    }
-
-    #[test]
-    fn gitignore_allowed_no_git() {
-        let td = tmpdir();
-        wfile(td.path().join(".gitignore"), "foo\n!bar");
-
-        let (ig, err) = IgnoreBuilder::new()
-            .require_git(false)
-            .build()
-            .add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_ignore());
-        assert!(ig.matched("bar", false).is_whitelist());
-        assert!(ig.matched("baz", false).is_none());
-    }
-
-    #[test]
-    fn ignore() {
-        let td = tmpdir();
-        wfile(td.path().join(".ignore"), "foo\n!bar");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_ignore());
-        assert!(ig.matched("bar", false).is_whitelist());
-        assert!(ig.matched("baz", false).is_none());
-    }
-
-    #[test]
-    fn custom_ignore() {
-        let td = tmpdir();
-        let custom_ignore = ".customignore";
-        wfile(td.path().join(custom_ignore), "foo\n!bar");
-
-        let (ig, err) = IgnoreBuilder::new()
-            .add_custom_ignore_filename(custom_ignore)
-            .build()
-            .add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_ignore());
-        assert!(ig.matched("bar", false).is_whitelist());
-        assert!(ig.matched("baz", false).is_none());
-    }
-
-    // Tests that a custom ignore file will override an .ignore.
-    #[test]
-    fn custom_ignore_over_ignore() {
-        let td = tmpdir();
-        let custom_ignore = ".customignore";
-        wfile(td.path().join(".ignore"), "foo");
-        wfile(td.path().join(custom_ignore), "!foo");
-
-        let (ig, err) = IgnoreBuilder::new()
-            .add_custom_ignore_filename(custom_ignore)
-            .build()
-            .add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_whitelist());
-    }
-
-    // Tests that earlier custom ignore files have lower precedence than later.
-    #[test]
-    fn custom_ignore_precedence() {
-        let td = tmpdir();
-        let custom_ignore1 = ".customignore1";
-        let custom_ignore2 = ".customignore2";
-        wfile(td.path().join(custom_ignore1), "foo");
-        wfile(td.path().join(custom_ignore2), "!foo");
-
-        let (ig, err) = IgnoreBuilder::new()
-            .add_custom_ignore_filename(custom_ignore1)
-            .add_custom_ignore_filename(custom_ignore2)
-            .build()
-            .add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_whitelist());
-    }
-
-    // Tests that an .ignore will override a .gitignore.
-    #[test]
-    fn ignore_over_gitignore() {
-        let td = tmpdir();
-        wfile(td.path().join(".gitignore"), "foo");
-        wfile(td.path().join(".ignore"), "!foo");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("foo", false).is_whitelist());
-    }
-
-    // Tests that exclude has lower precedent than both .ignore and .gitignore.
-    #[test]
-    fn exclude_lowest() {
-        let td = tmpdir();
-        wfile(td.path().join(".gitignore"), "!foo");
-        wfile(td.path().join(".ignore"), "!bar");
-        mkdirp(td.path().join(".git/info"));
-        wfile(td.path().join(".git/info/exclude"), "foo\nbar\nbaz");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_none());
-        assert!(ig.matched("baz", false).is_ignore());
-        assert!(ig.matched("foo", false).is_whitelist());
-        assert!(ig.matched("bar", false).is_whitelist());
-    }
-
-    #[test]
-    fn errored() {
-        let td = tmpdir();
-        wfile(td.path().join(".gitignore"), "{foo");
-
-        let (_, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_some());
-    }
-
-    #[test]
-    fn errored_both() {
-        let td = tmpdir();
-        wfile(td.path().join(".gitignore"), "{foo");
-        wfile(td.path().join(".ignore"), "{bar");
-
-        let (_, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert_eq!(2, partial(err.expect("an error")).len());
-    }
-
-    #[test]
-    fn errored_partial() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        wfile(td.path().join(".gitignore"), "{foo\nbar");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_some());
-        assert!(ig.matched("bar", false).is_ignore());
-    }
-
-    #[test]
-    fn errored_partial_and_ignore() {
-        let td = tmpdir();
-        wfile(td.path().join(".gitignore"), "{foo\nbar");
-        wfile(td.path().join(".ignore"), "!bar");
-
-        let (ig, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_some());
-        assert!(ig.matched("bar", false).is_whitelist());
-    }
-
-    #[test]
-    fn not_present_empty() {
-        let td = tmpdir();
-
-        let (_, err) = IgnoreBuilder::new().build().add_child(td.path());
-        assert!(err.is_none());
-    }
-
-    #[test]
-    fn stops_at_git_dir() {
-        // This tests that .gitignore files beyond a .git barrier aren't
-        // matched, but .ignore files are.
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("foo/.git"));
-        wfile(td.path().join(".gitignore"), "foo");
-        wfile(td.path().join(".ignore"), "bar");
-
-        let ig0 = IgnoreBuilder::new().build();
-        let (ig1, err) = ig0.add_child(td.path());
-        assert!(err.is_none());
-        let (ig2, err) = ig1.add_child(ig1.path().join("foo"));
-        assert!(err.is_none());
-
-        assert!(ig1.matched("foo", false).is_ignore());
-        assert!(ig2.matched("foo", false).is_none());
-
-        assert!(ig1.matched("bar", false).is_ignore());
-        assert!(ig2.matched("bar", false).is_ignore());
-    }
-
-    #[test]
-    fn absolute_parent() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("foo"));
-        wfile(td.path().join(".gitignore"), "bar");
-
-        // First, check that the parent gitignore file isn't detected if the
-        // parent isn't added. This establishes a baseline.
-        let ig0 = IgnoreBuilder::new().build();
-        let (ig1, err) = ig0.add_child(td.path().join("foo"));
-        assert!(err.is_none());
-        assert!(ig1.matched("bar", false).is_none());
-
-        // Second, check that adding a parent directory actually works.
-        let ig0 = IgnoreBuilder::new().build();
-        let (ig1, err) = ig0.add_parents(td.path().join("foo"));
-        assert!(err.is_none());
-        let (ig2, err) = ig1.add_child(td.path().join("foo"));
-        assert!(err.is_none());
-        assert!(ig2.matched("bar", false).is_ignore());
-    }
-
-    #[test]
-    fn absolute_parent_anchored() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("src/llvm"));
-        wfile(td.path().join(".gitignore"), "/llvm/\nfoo");
-
-        let ig0 = IgnoreBuilder::new().build();
-        let (ig1, err) = ig0.add_parents(td.path().join("src"));
-        assert!(err.is_none());
-        let (ig2, err) = ig1.add_child("src");
-        assert!(err.is_none());
-
-        assert!(ig1.matched("llvm", true).is_none());
-        assert!(ig2.matched("llvm", true).is_none());
-        assert!(ig2.matched("src/llvm", true).is_none());
-        assert!(ig2.matched("foo", false).is_ignore());
-        assert!(ig2.matched("src/foo", false).is_ignore());
-    }
-
-    #[test]
-    fn absolute_parent_matchers_are_cached_across_roots() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("src/build"));
-        mkdirp(td.path().join("tests/build"));
-        wfile(td.path().join(".gitignore"), "tests/**/build/\n");
-
-        let ig0 = IgnoreBuilder::new().build();
-        let (src_parents, err) = ig0.add_parents(td.path().join("src"));
-        assert!(err.is_none());
-        let (src, err) = src_parents.add_child(td.path().join("src"));
-        assert!(err.is_none());
-        let (tests_parents, err) = ig0.add_parents(td.path().join("tests"));
-        assert!(err.is_none());
-        let (tests, err) = tests_parents.add_child(td.path().join("tests"));
-        assert!(err.is_none());
-
-        assert!(Arc::ptr_eq(&src_parents.inner, &tests_parents.inner));
-        assert!(src.matched("build", true).is_none());
-        assert!(tests.matched("build", true).is_ignore());
-    }
-
-    /// Parent matchers are shared across search roots, but path rewriting for
-    /// absolute parents must use each root's own base path. Otherwise a rule
-    /// like `src/invalid` is matched against the wrong absolute path when
-    /// `src` is searched before a sibling root (e.g. `tests`).
-    ///
-    /// Paths passed to `matched` use the same relative layout as `Walk` when
-    /// roots are given as relative directory names.
-    ///
-    /// Regression for: https://github.com/BurntSushi/ripgrep/issues/3376
-    /// and https://github.com/BurntSushi/ripgrep/issues/3419
-    #[test]
-    fn multi_root_gitignore_order_independent() {
-        let td = tmpdir();
-        let cwd = std::env::current_dir().unwrap();
-        // Use paths relative to CWD like the CLI walk does for `rg pat src tests`.
-        let root = td.path().strip_prefix(&cwd).unwrap_or(td.path());
-        let src_root = root.join("src");
-        let tests_root = root.join("tests");
-
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("src"));
-        mkdirp(td.path().join("tests"));
-        wfile(td.path().join(".gitignore"), "src/invalid\n");
-        wfile(td.path().join("src/invalid"), "x");
-        wfile(td.path().join("src/valid"), "x");
-        wfile(td.path().join("tests/valid"), "x");
-
-        let ig0 = IgnoreBuilder::new().build();
-
-        // Historically buggy order: search `src` first, then `tests`.
-        let (src_parents, err) = ig0.add_parents(&src_root);
-        assert!(err.is_none());
-        let (src, err) = src_parents.add_child(&src_root);
-        assert!(err.is_none());
-        let (tests_parents, err) = ig0.add_parents(&tests_root);
-        assert!(err.is_none());
-        let (tests, err) = tests_parents.add_child(&tests_root);
-        assert!(err.is_none());
-
-        assert!(Arc::ptr_eq(&src_parents.inner, &tests_parents.inner));
-        // Each root must carry its own absolute_base even though inners are shared.
-        assert_ne!(
-            src.absolute_base.as_ref().unwrap().as_path(),
-            tests.absolute_base.as_ref().unwrap().as_path()
-        );
-        assert!(
-            src.matched(src_root.join("invalid"), false).is_ignore(),
-            "parent .gitignore must apply for the src root even when \
-             another root was prepared in the same process"
-        );
-        assert!(src.matched(src_root.join("valid"), false).is_none());
-        assert!(tests.matched(tests_root.join("valid"), false).is_none());
-
-        // Reverse order should behave the same way.
-        let ig0 = IgnoreBuilder::new().build();
-        let (tests_parents, err) = ig0.add_parents(&tests_root);
-        assert!(err.is_none());
-        let (tests, err) = tests_parents.add_child(&tests_root);
-        assert!(err.is_none());
-        let (src_parents, err) = ig0.add_parents(&src_root);
-        assert!(err.is_none());
-        let (src, err) = src_parents.add_child(&src_root);
-        assert!(err.is_none());
-
-        assert!(src.matched(src_root.join("invalid"), false).is_ignore());
-        assert!(src.matched(src_root.join("valid"), false).is_none());
-        assert!(tests.matched(tests_root.join("valid"), false).is_none());
-    }
-
-    /// Same multi-root / order issue for non-git ignore files (e.g. `.rgignore`
-    /// via custom ignore names).
-    ///
-    /// Regression for: https://github.com/BurntSushi/ripgrep/issues/3320
-    #[test]
-    fn multi_root_custom_ignore_order_independent() {
-        let td = tmpdir();
-        let cwd = std::env::current_dir().unwrap();
-        let root = td.path().strip_prefix(&cwd).unwrap_or(td.path());
-        let alpha_root = root.join("alpha");
-        let beta_root = root.join("beta");
-
-        mkdirp(td.path().join("alpha"));
-        mkdirp(td.path().join("beta"));
-        wfile(td.path().join(".rgignore"), "beta/**/*.svg\n");
-        wfile(td.path().join("alpha/a.txt"), "x");
-        wfile(td.path().join("beta/x.svg"), "x");
-
-        let ig0 = IgnoreBuilder::new()
-            .add_custom_ignore_filename(".rgignore")
-            .ignore(false)
-            .git_ignore(false)
-            .git_global(false)
-            .git_exclude(false)
-            .build();
-
-        let (alpha_parents, err) = ig0.add_parents(&alpha_root);
-        assert!(err.is_none());
-        let (alpha, err) = alpha_parents.add_child(&alpha_root);
-        assert!(err.is_none());
-        let (beta_parents, err) = ig0.add_parents(&beta_root);
-        assert!(err.is_none());
-        let (beta, err) = beta_parents.add_child(&beta_root);
-        assert!(err.is_none());
-
-        assert_ne!(
-            alpha.absolute_base.as_ref().unwrap().as_path(),
-            beta.absolute_base.as_ref().unwrap().as_path()
-        );
-        assert!(alpha.matched(alpha_root.join("a.txt"), false).is_none());
-        assert!(
-            beta.matched(beta_root.join("x.svg"), false).is_ignore(),
-            "parent .rgignore must apply for the beta root regardless of \
-             which root was set up first"
-        );
-    }
-
-    #[test]
-    fn git_info_exclude_in_linked_worktree() {
-        let td = tmpdir();
-        let git_dir = td.path().join(".git");
-        mkdirp(git_dir.join("info"));
-        wfile(git_dir.join("info/exclude"), "ignore_me");
-        mkdirp(git_dir.join("worktrees/linked-worktree"));
-        let commondir_path =
-            || git_dir.join("worktrees/linked-worktree/commondir");
-        mkdirp(td.path().join("linked-worktree"));
-        let worktree_git_dir_abs = format!(
-            "gitdir: {}",
-            git_dir.join("worktrees/linked-worktree").to_str().unwrap(),
-        );
-        wfile(td.path().join("linked-worktree/.git"), &worktree_git_dir_abs);
-
-        // relative commondir
-        wfile(commondir_path(), "../..");
-        let ib = IgnoreBuilder::new().build();
-        let (ignore, err) = ib.add_child(td.path().join("linked-worktree"));
-        assert!(err.is_none());
-        assert!(ignore.matched("ignore_me", false).is_ignore());
-
-        // absolute commondir
-        wfile(commondir_path(), git_dir.to_str().unwrap());
-        let (ignore, err) = ib.add_child(td.path().join("linked-worktree"));
-        assert!(err.is_none());
-        assert!(ignore.matched("ignore_me", false).is_ignore());
-
-        // missing commondir file
-        assert!(std::fs::remove_file(commondir_path()).is_ok());
-        let (_, err) = ib.add_child(td.path().join("linked-worktree"));
-        // We squash the error in this case, because it occurs in repositories
-        // that are not linked worktrees but have submodules.
-        assert!(err.is_none());
-
-        wfile(td.path().join("linked-worktree/.git"), "garbage");
-        let (_, err) = ib.add_child(td.path().join("linked-worktree"));
-        assert!(err.is_none());
-
-        wfile(td.path().join("linked-worktree/.git"), "gitdir: garbage");
-        let (_, err) = ib.add_child(td.path().join("linked-worktree"));
-        assert!(err.is_none());
-    }
-}
diff --git a/crates/ignore/src/gitignore.rs b/crates/ignore/src/gitignore.rs
deleted file mode 100644
index 8824139b5..000000000
--- a/crates/ignore/src/gitignore.rs
+++ /dev/null
@@ -1,913 +0,0 @@
-/*!
-The gitignore module provides a way to match globs from a gitignore file
-against file paths.
-
-Note that this module implements the specification as described in the
-`gitignore` man page from scratch. That is, this module does *not* shell out to
-the `git` command line tool.
-*/
-
-use std::{
-    fs::File,
-    io::{BufRead, BufReader, Read},
-    path::{Path, PathBuf},
-    sync::Arc,
-};
-
-use {
-    globset::{Candidate, GlobBuilder, GlobSet, GlobSetBuilder},
-    regex_automata::util::pool::Pool,
-};
-
-use crate::{
-    Error, Match, PartialErrorBuilder,
-    pathutil::{is_file_name, strip_prefix},
-};
-
-/// Glob represents a single glob in a gitignore file.
-///
-/// This is used to report information about the highest precedent glob that
-/// matched in one or more gitignore files.
-#[derive(Clone, Debug)]
-pub struct Glob {
-    /// The file path that this glob was extracted from.
-    from: Option<PathBuf>,
-    /// The original glob string.
-    original: String,
-    /// The actual glob string used to convert to a regex.
-    actual: String,
-    /// Whether this is a whitelisted glob or not.
-    is_whitelist: bool,
-    /// Whether this glob should only match directories or not.
-    is_only_dir: bool,
-}
-
-impl Glob {
-    /// Returns the file path that defined this glob.
-    pub fn from(&self) -> Option<&Path> {
-        self.from.as_ref().map(|p| &**p)
-    }
-
-    /// The original glob as it was defined in a gitignore file.
-    pub fn original(&self) -> &str {
-        &self.original
-    }
-
-    /// The actual glob that was compiled to respect gitignore
-    /// semantics.
-    pub fn actual(&self) -> &str {
-        &self.actual
-    }
-
-    /// Whether this was a whitelisted glob or not.
-    pub fn is_whitelist(&self) -> bool {
-        self.is_whitelist
-    }
-
-    /// Whether this glob must match a directory or not.
-    pub fn is_only_dir(&self) -> bool {
-        self.is_only_dir
-    }
-
-    /// Returns true if and only if this glob has a `**/` prefix.
-    fn has_doublestar_prefix(&self) -> bool {
-        self.actual.starts_with("**/") || self.actual == "**"
-    }
-}
-
-/// Gitignore is a matcher for the globs in one or more gitignore files
-/// in the same directory.
-#[derive(Clone, Debug)]
-pub struct Gitignore {
-    set: GlobSet,
-    root: PathBuf,
-    globs: Vec<Glob>,
-    num_ignores: u64,
-    num_whitelists: u64,
-    matches: Option<Arc<Pool<Vec<usize>>>>,
-    // CHANGED: Add a flag to have Gitignore rules that apply only to files.
-    only_on_files: bool,
-}
-
-impl Gitignore {
-    /// Creates a new gitignore matcher from the gitignore file path given.
-    ///
-    /// If it's desirable to include multiple gitignore files in a single
-    /// matcher, or read gitignore globs from a different source, then
-    /// use `GitignoreBuilder`.
-    ///
-    /// This always returns a valid matcher, even if it's empty. In particular,
-    /// a Gitignore file can be partially valid, e.g., when one glob is invalid
-    /// but the rest aren't.
-    ///
-    /// Note that I/O errors are ignored. For more granular control over
-    /// errors, use `GitignoreBuilder`.
-    pub fn new<P: AsRef<Path>>(
-        gitignore_path: P,
-    ) -> (Gitignore, Option<Error>) {
-        let path = gitignore_path.as_ref();
-        let parent = path.parent().unwrap_or(Path::new("/"));
-        let mut builder = GitignoreBuilder::new(parent);
-        let mut errs = PartialErrorBuilder::default();
-        errs.maybe_push_ignore_io(builder.add(path));
-        match builder.build() {
-            Ok(gi) => (gi, errs.into_error_option()),
-            Err(err) => {
-                errs.push(err);
-                (Gitignore::empty(), errs.into_error_option())
-            }
-        }
-    }
-
-    /// Creates a new gitignore matcher from the global ignore file, if one
-    /// exists.
-    ///
-    /// The global config file path is specified by git's `core.excludesFile`
-    /// config option.
-    ///
-    /// # Behavior
-    ///
-    /// This routine does its best to discover any global git exclude files.
-    /// This will try to parse out the `excludesFile` config option in your
-    /// global git configuration, if necessary.
-    ///
-    /// The specific things this routine tries (which are subject to change
-    /// based on how git behaves) are:
-    ///
-    ///
-    ///
-    /// Git's config file location is `$HOME/.gitconfig`. If `$HOME/.gitconfig`
-    /// does not exist or does not specify `core.excludesFile`, then
-    /// `$XDG_CONFIG_HOME/git/ignore` is read. If `$XDG_CONFIG_HOME` is not
-    /// set or is empty, then `$HOME/.config/git/ignore` is used instead.
-    pub fn global() -> (Gitignore, Option<Error>) {
-        match std::env::current_dir() {
-            Ok(cwd) => GitignoreBuilder::new(cwd).build_global(),
-            Err(err) => (Gitignore::empty(), Some(err.into())),
-        }
-    }
-
-    /// Creates a new empty gitignore matcher that never matches anything.
-    ///
-    /// Its path is empty.
-    pub fn empty() -> Gitignore {
-        Gitignore {
-            set: GlobSet::empty(),
-            root: PathBuf::from(""),
-            globs: vec![],
-            num_ignores: 0,
-            num_whitelists: 0,
-            matches: None,
-            // CHANGED: Add a flag to have Gitignore rules that apply only to
-            // files.
-            only_on_files: false,
-        }
-    }
-
-    /// Returns the directory containing this gitignore matcher.
-    ///
-    /// All matches are done relative to this path.
-    pub fn path(&self) -> &Path {
-        &*self.root
-    }
-
-    /// Returns true if and only if this gitignore has zero globs, and
-    /// therefore never matches any file path.
-    pub fn is_empty(&self) -> bool {
-        self.set.is_empty()
-    }
-
-    /// Returns the total number of globs, which should be equivalent to
-    /// `num_ignores + num_whitelists`.
-    pub fn len(&self) -> usize {
-        self.set.len()
-    }
-
-    /// Returns the total number of ignore globs.
-    pub fn num_ignores(&self) -> u64 {
-        self.num_ignores
-    }
-
-    /// Returns the total number of whitelisted globs.
-    pub fn num_whitelists(&self) -> u64 {
-        self.num_whitelists
-    }
-
-    /// Returns whether the given path (file or directory) matched a pattern in
-    /// this gitignore matcher.
-    ///
-    /// `is_dir` should be true if the path refers to a directory and false
-    /// otherwise.
-    ///
-    /// The given path is matched relative to the path given when building
-    /// the matcher. Specifically, before matching `path`, its prefix (as
-    /// determined by a common suffix of the directory containing this
-    /// gitignore) is stripped. If there is no common suffix/prefix overlap,
-    /// then `path` is assumed to be relative to this matcher.
-    pub fn matched<P: AsRef<Path>>(
-        &self,
-        path: P,
-        is_dir: bool,
-    ) -> Match<&Glob> {
-        if self.is_empty() {
-            return Match::None;
-        }
-        self.matched_stripped(self.strip(path.as_ref()), is_dir)
-    }
-
-    /// Returns whether the given path (file or directory, and expected to be
-    /// under the root) or any of its parent directories (up to the root)
-    /// matched a pattern in this gitignore matcher.
-    ///
-    /// NOTE: This method is more expensive than walking the directory hierarchy
-    /// top-to-bottom and matching the entries. But, is easier to use in cases
-    /// when a list of paths are available without a hierarchy.
-    ///
-    /// `is_dir` should be true if the path refers to a directory and false
-    /// otherwise.
-    ///
-    /// The given path is matched relative to the path given when building
-    /// the matcher. Specifically, before matching `path`, its prefix (as
-    /// determined by a common suffix of the directory containing this
-    /// gitignore) is stripped. If there is no common suffix/prefix overlap,
-    /// then `path` is assumed to be relative to this matcher.
-    ///
-    /// # Panics
-    ///
-    /// This method panics if the given file path is not under the root path
-    /// of this matcher.
-    pub fn matched_path_or_any_parents<P: AsRef<Path>>(
-        &self,
-        path: P,
-        is_dir: bool,
-    ) -> Match<&Glob> {
-        if self.is_empty() {
-            return Match::None;
-        }
-        let mut path = self.strip(path.as_ref());
-        assert!(!path.has_root(), "path is expected to be under the root");
-
-        match self.matched_stripped(path, is_dir) {
-            Match::None => (), // walk up
-            a_match => return a_match,
-        }
-        while let Some(parent) = path.parent() {
-            match self.matched_stripped(parent, /* is_dir */ true) {
-                Match::None => path = parent, // walk up
-                a_match => return a_match,
-            }
-        }
-        Match::None
-    }
-
-    /// Like matched, but takes a path that has already been stripped.
-    fn matched_stripped<P: AsRef<Path>>(
-        &self,
-        path: P,
-        is_dir: bool,
-    ) -> Match<&Glob> {
-        if self.is_empty() {
-            return Match::None;
-        }
-        // CHANGED: Rules marked as only_on_files can not match against
-        // directories.
-        if self.only_on_files && is_dir {
-            return Match::None;
-        }
-        let path = path.as_ref();
-        let mut matches = self.matches.as_ref().unwrap().get();
-        let candidate = Candidate::new(path);
-        self.set.matches_candidate_into(&candidate, &mut *matches);
-        for &i in matches.iter().rev() {
-            let glob = &self.globs[i];
-            if !glob.is_only_dir() || is_dir {
-                return if glob.is_whitelist() {
-                    Match::Whitelist(glob)
-                } else {
-                    Match::Ignore(glob)
-                };
-            }
-        }
-        Match::None
-    }
-
-    /// Strips the given path such that it's suitable for matching with this
-    /// gitignore matcher.
-    fn strip<'a, P: 'a + AsRef<Path> + ?Sized>(
-        &'a self,
-        path: &'a P,
-    ) -> &'a Path {
-        let mut path = path.as_ref();
-        // A leading ./ is completely superfluous. We also strip it from
-        // our gitignore root path, so we need to strip it from our candidate
-        // path too.
-        if let Some(p) = strip_prefix("./", path) {
-            path = p;
-        }
-        // Strip any common prefix between the candidate path and the root
-        // of the gitignore, to make sure we get relative matching right.
-        // BUT, a file name might not have any directory components to it,
-        // in which case, we don't want to accidentally strip any part of the
-        // file name.
-        //
-        // As an additional special case, if the root is just `.`, then we
-        // shouldn't try to strip anything, e.g., when path begins with a `.`.
-        if self.root != Path::new(".") && !is_file_name(path) {
-            if let Some(p) = strip_prefix(&self.root, path) {
-                path = p;
-                // If we're left with a leading slash, get rid of it.
-                if let Some(p) = strip_prefix("/", path) {
-                    path = p;
-                }
-            }
-        }
-        path
-    }
-}
-
-/// Builds a matcher for a single set of globs from a .gitignore file.
-#[derive(Clone, Debug)]
-pub struct GitignoreBuilder {
-    builder: GlobSetBuilder,
-    root: PathBuf,
-    globs: Vec<Glob>,
-    case_insensitive: bool,
-    allow_unclosed_class: bool,
-    // CHANGED: Add a flag to have Gitignore rules that apply only to files.
-    only_on_files: bool,
-}
-
-impl GitignoreBuilder {
-    /// Create a new builder for a gitignore file.
-    ///
-    /// The path given should be the path at which the globs for this gitignore
-    /// file should be matched. Note that paths are always matched relative
-    /// to the root path given here. Generally, the root path should correspond
-    /// to the *directory* containing a `.gitignore` file.
-    pub fn new<P: AsRef<Path>>(root: P) -> GitignoreBuilder {
-        let root = root.as_ref();
-        GitignoreBuilder {
-            builder: GlobSetBuilder::new(),
-            root: strip_prefix("./", root).unwrap_or(root).to_path_buf(),
-            globs: vec![],
-            case_insensitive: false,
-            allow_unclosed_class: true,
-            // CHANGED: Add a flag to have Gitignore rules that apply only to
-            // files.
-            only_on_files: false,
-        }
-    }
-
-    /// Builds a new matcher from the globs added so far.
-    ///
-    /// Once a matcher is built, no new globs can be added to it.
-    pub fn build(&self) -> Result<Gitignore, Error> {
-        let nignore = self.globs.iter().filter(|g| !g.is_whitelist()).count();
-        let nwhite = self.globs.iter().filter(|g| g.is_whitelist()).count();
-        let set = self
-            .builder
-            .build()
-            .map_err(|err| Error::Glob { glob: None, err: err.to_string() })?;
-        Ok(Gitignore {
-            set,
-            root: self.root.clone(),
-            globs: self.globs.clone(),
-            num_ignores: nignore as u64,
-            num_whitelists: nwhite as u64,
-            matches: Some(Arc::new(
-                Pool::with_available_parallelism_capacity(|| vec![]),
-            )),
-            // CHANGED: Add a flag to have Gitignore rules that apply only to
-            // files.
-            only_on_files: self.only_on_files,
-        })
-    }
-
-    /// Build a global gitignore matcher using the configuration in this
-    /// builder.
-    ///
-    /// This consumes ownership of the builder unlike `build` because it
-    /// must mutate the builder to add the global gitignore globs.
-    ///
-    /// Note that this ignores the path given to this builder's constructor
-    /// and instead derives the path automatically from git's global
-    /// configuration.
-    pub fn build_global(mut self) -> (Gitignore, Option<Error>) {
-        match gitconfig_excludes_path() {
-            None => (Gitignore::empty(), None),
-            Some(path) => {
-                if !path.is_file() {
-                    (Gitignore::empty(), None)
-                } else {
-                    let mut errs = PartialErrorBuilder::default();
-                    errs.maybe_push_ignore_io(self.add(path));
-                    match self.build() {
-                        Ok(gi) => (gi, errs.into_error_option()),
-                        Err(err) => {
-                            errs.push(err);
-                            (Gitignore::empty(), errs.into_error_option())
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    /// Add each glob from the file path given.
-    ///
-    /// The file given should be formatted as a `gitignore` file.
-    ///
-    /// Note that partial errors can be returned. For example, if there was
-    /// a problem adding one glob, an error for that will be returned, but
-    /// all other valid globs will still be added.
-    pub fn add<P: AsRef<Path>>(&mut self, path: P) -> Option<Error> {
-        let path = path.as_ref();
-        let file = match File::open(path) {
-            Err(err) => return Some(Error::Io(err).with_path(path)),
-            Ok(file) => file,
-        };
-        log::debug!("opened gitignore file: {}", path.display());
-        let rdr = BufReader::new(file);
-        let mut errs = PartialErrorBuilder::default();
-        for (i, line) in rdr.lines().enumerate() {
-            let lineno = (i + 1) as u64;
-            let line = match line {
-                Ok(line) => line,
-                Err(err) => {
-                    errs.push(Error::Io(err).tagged(path, lineno));
-                    break;
-                }
-            };
-
-            // Match Git's handling of .gitignore files that begin with the Unicode BOM
-            const UTF8_BOM: &str = "\u{feff}";
-            let line =
-                if i == 0 { line.trim_start_matches(UTF8_BOM) } else { &line };
-
-            if let Err(err) = self.add_line(Some(path.to_path_buf()), &line) {
-                errs.push(err.tagged(path, lineno));
-            }
-        }
-        errs.into_error_option()
-    }
-
-    /// Add each glob line from the string given.
-    ///
-    /// If this string came from a particular `gitignore` file, then its path
-    /// should be provided here.
-    ///
-    /// The string given should be formatted as a `gitignore` file.
-    #[cfg(test)]
-    fn add_str(
-        &mut self,
-        from: Option<PathBuf>,
-        gitignore: &str,
-    ) -> Result<&mut GitignoreBuilder, Error> {
-        for line in gitignore.lines() {
-            self.add_line(from.clone(), line)?;
-        }
-        Ok(self)
-    }
-
-    /// Add a line from a gitignore file to this builder.
-    ///
-    /// If this line came from a particular `gitignore` file, then its path
-    /// should be provided here.
-    ///
-    /// If the line could not be parsed as a glob, then an error is returned.
-    pub fn add_line(
-        &mut self,
-        from: Option<PathBuf>,
-        mut line: &str,
-    ) -> Result<&mut GitignoreBuilder, Error> {
-        #![allow(deprecated)]
-
-        if line.starts_with("#") {
-            return Ok(self);
-        }
-        if !line.ends_with("\\ ") {
-            line = line.trim_right();
-        }
-        if line.is_empty() {
-            return Ok(self);
-        }
-        let mut glob = Glob {
-            from,
-            original: line.to_string(),
-            actual: String::new(),
-            is_whitelist: false,
-            is_only_dir: false,
-        };
-        let mut is_absolute = false;
-        if line.starts_with("\\!") || line.starts_with("\\#") {
-            line = &line[1..];
-            is_absolute = line.chars().nth(0) == Some('/');
-        } else {
-            if line.starts_with("!") {
-                glob.is_whitelist = true;
-                line = &line[1..];
-            }
-            if line.starts_with("/") {
-                // `man gitignore` says that if a glob starts with a slash,
-                // then the glob can only match the beginning of a path
-                // (relative to the location of gitignore). We achieve this by
-                // simply banning wildcards from matching /.
-                line = &line[1..];
-                is_absolute = true;
-            }
-        }
-        // If it ends with a slash, then this should only match directories,
-        // but the slash should otherwise not be used while globbing.
-        if line.as_bytes().last() == Some(&b'/') {
-            glob.is_only_dir = true;
-            line = &line[..line.len() - 1];
-            // If the slash was escaped, then remove the escape.
-            // See: https://github.com/BurntSushi/ripgrep/issues/2236
-            if line.as_bytes().last() == Some(&b'\\') {
-                line = &line[..line.len() - 1];
-            }
-        }
-        glob.actual = line.to_string();
-        // If there is a literal slash, then this is a glob that must match the
-        // entire path name. Otherwise, we should let it match anywhere, so use
-        // a **/ prefix.
-        if !is_absolute && !line.chars().any(|c| c == '/') {
-            // ... but only if we don't already have a **/ prefix.
-            if !glob.has_doublestar_prefix() {
-                glob.actual = format!("**/{}", glob.actual);
-            }
-        }
-        // If the glob ends with `/**`, then we should only match everything
-        // inside a directory, but not the directory itself. Standard globs
-        // will match the directory. So we add `/*` to force the issue.
-        if glob.actual.ends_with("/**") {
-            glob.actual = format!("{}/*", glob.actual);
-        }
-        let parsed = GlobBuilder::new(&glob.actual)
-            .literal_separator(true)
-            .case_insensitive(self.case_insensitive)
-            .backslash_escape(true)
-            .allow_unclosed_class(self.allow_unclosed_class)
-            .build()
-            .map_err(|err| Error::Glob {
-                glob: Some(glob.original.clone()),
-                err: err.kind().to_string(),
-            })?;
-        self.builder.add(parsed);
-        self.globs.push(glob);
-        Ok(self)
-    }
-
-    /// Toggle whether the globs should be matched case insensitively or not.
-    ///
-    /// When this option is changed, only globs added after the change will be
-    /// affected.
-    ///
-    /// This is disabled by default.
-    pub fn case_insensitive(
-        &mut self,
-        yes: bool,
-    ) -> Result<&mut GitignoreBuilder, Error> {
-        // TODO: This should not return a `Result`. Fix this in the next semver
-        // release.
-        self.case_insensitive = yes;
-        Ok(self)
-    }
-
-    /// Toggle whether unclosed character classes are allowed. When allowed,
-    /// a `[` without a matching `]` is treated literally instead of resulting
-    /// in a parse error.
-    ///
-    /// For example, if this is set then the glob `[abc` will be treated as the
-    /// literal string `[abc` instead of returning an error.
-    ///
-    /// By default, this is true in order to match established `gitignore`
-    /// semantics. Generally speaking, enabling this leads to worse failure
-    /// modes since the glob parser becomes more permissive. You might want to
-    /// enable this when compatibility (e.g., with POSIX glob implementations)
-    /// is more important than good error messages.
-    pub fn allow_unclosed_class(
-        &mut self,
-        yes: bool,
-    ) -> &mut GitignoreBuilder {
-        self.allow_unclosed_class = yes;
-        self
-    }
-
-    /// CHANGED: Add a flag to have Gitignore rules that apply only to files.
-    ///
-    /// If this is set, then the globs will only be matched against file paths.
-    /// This will ensure that ignore rules like `*.pages` will _only_ ignore
-    /// files ending in `.pages` and not folders ending in `.pages`.
-    pub fn only_on_files(&mut self, yes: bool) -> &mut GitignoreBuilder {
-        self.only_on_files = yes;
-        self
-    }
-}
-
-/// Return the file path of the current environment's global gitignore file.
-///
-/// Note that the file path returned may not exist.
-pub fn gitconfig_excludes_path() -> Option<PathBuf> {
-    // When GIT_CONFIG_GLOBAL is set, it replaces both $HOME/.gitconfig and
-    // $XDG_CONFIG_HOME/git/config (per git 2.32+). Otherwise, git supports
-    // $HOME/.gitconfig and $XDG_CONFIG_HOME/git/config simultaneously, where
-    // $HOME/.gitconfig takes precedent.
-    gitconfig_global_env_contents()
-        .and_then(|x| parse_excludes_file(&x))
-        .or_else(|| {
-            gitconfig_home_contents().and_then(|x| parse_excludes_file(&x))
-        })
-        .or_else(|| {
-            gitconfig_xdg_contents().and_then(|x| parse_excludes_file(&x))
-        })
-        // System-level config has the lowest priority for core.excludesFile.
-        // GIT_CONFIG_SYSTEM overrides the default /etc/gitconfig path.
-        .or_else(|| {
-            gitconfig_system_contents().and_then(|x| parse_excludes_file(&x))
-        })
-        .or_else(excludes_file_default)
-}
-
-/// Returns the file contents of git's global config file from the path
-/// specified by the `GIT_CONFIG_GLOBAL` environment variable.
-fn gitconfig_global_env_contents() -> Option<Vec<u8>> {
-    let path = std::env::var_os("GIT_CONFIG_GLOBAL").map(PathBuf::from)?;
-    if path.as_os_str().is_empty() {
-        return None;
-    }
-    let mut file = BufReader::new(File::open(path).ok()?);
-    let mut contents = vec![];
-    file.read_to_end(&mut contents).ok().map(|_| contents)
-}
-
-/// Returns the file contents of git's system-level config file.
-///
-/// Checks `GIT_CONFIG_SYSTEM` first, then falls back to `/etc/gitconfig`.
-fn gitconfig_system_contents() -> Option<Vec<u8>> {
-    let path = std::env::var_os("GIT_CONFIG_SYSTEM")
-        .map(PathBuf::from)
-        .filter(|x| !x.as_os_str().is_empty())
-        .unwrap_or_else(|| PathBuf::from("/etc/gitconfig"));
-    let mut file = BufReader::new(File::open(path).ok()?);
-    let mut contents = vec![];
-    file.read_to_end(&mut contents).ok().map(|_| contents)
-}
-
-/// Returns the file contents of git's global config file, if one exists, in
-/// the user's home directory.
-fn gitconfig_home_contents() -> Option<Vec<u8>> {
-    let home = home_dir()?;
-    let mut file = BufReader::new(File::open(home.join(".gitconfig")).ok()?);
-    let mut contents = vec![];
-    file.read_to_end(&mut contents).ok().map(|_| contents)
-}
-
-/// Returns the file contents of git's global config file, if one exists, in
-/// the user's XDG_CONFIG_HOME directory.
-fn gitconfig_xdg_contents() -> Option<Vec<u8>> {
-    let path = std::env::var_os("XDG_CONFIG_HOME")
-        .map(PathBuf::from)
-        .filter(|x| !x.as_os_str().is_empty())
-        .or_else(|| home_dir().map(|p| p.join(".config")))
-        .map(|x| x.join("git/config"))?;
-    let mut file = BufReader::new(File::open(path).ok()?);
-    let mut contents = vec![];
-    file.read_to_end(&mut contents).ok().map(|_| contents)
-}
-
-/// Returns the default file path for a global .gitignore file.
-///
-/// Specifically, this respects XDG_CONFIG_HOME.
-fn excludes_file_default() -> Option<PathBuf> {
-    std::env::var_os("XDG_CONFIG_HOME")
-        .map(PathBuf::from)
-        .filter(|x| !x.as_os_str().is_empty())
-        .or_else(|| home_dir().map(|p| p.join(".config")))
-        .map(|x| x.join("git/ignore"))
-}
-
-/// Extract git's `core.excludesfile` config setting from the raw file contents
-/// given.
-fn parse_excludes_file(data: &[u8]) -> Option<PathBuf> {
-    use std::sync::OnceLock;
-
-    use regex_automata::{meta::Regex, util::syntax};
-
-    // N.B. This is the lazy approach, and isn't technically correct, but
-    // probably works in more circumstances. I guess we would ideally have
-    // a full INI parser. Yuck.
-    static RE: OnceLock<Regex> = OnceLock::new();
-    let re = RE.get_or_init(|| {
-        Regex::builder()
-            .configure(Regex::config().utf8_empty(false))
-            .syntax(syntax::Config::new().utf8(false))
-            .build(r#"(?im-u)^\s*excludesfile\s*=\s*"?\s*(\S+?)\s*"?\s*$"#)
-            .unwrap()
-    });
-    // We don't care about amortizing allocs here I think. This should only
-    // be called ~once per traversal or so? (Although it's not guaranteed...)
-    let mut caps = re.create_captures();
-    re.captures(data, &mut caps);
-    let span = caps.get_group(1)?;
-    let candidate = &data[span];
-    std::str::from_utf8(candidate).ok().map(|s| PathBuf::from(expand_tilde(s)))
-}
-
-/// Expands ~ in file paths to the value of $HOME.
-fn expand_tilde(path: &str) -> String {
-    let home = match home_dir() {
-        None => return path.to_string(),
-        Some(home) => home.to_string_lossy().into_owned(),
-    };
-    path.replace("~", &home)
-}
-
-/// Returns the location of the user's home directory.
-fn home_dir() -> Option<PathBuf> {
-    // We're fine with using std::env::home_dir for now. Its bugs are, IMO,
-    // pretty minor corner cases.
-    #![allow(deprecated)]
-    std::env::home_dir()
-}
-
-#[cfg(test)]
-mod tests {
-    use std::path::Path;
-
-    use super::{Gitignore, GitignoreBuilder};
-
-    fn gi_from_str<P: AsRef<Path>>(root: P, s: &str) -> Gitignore {
-        let mut builder = GitignoreBuilder::new(root);
-        builder.add_str(None, s).unwrap();
-        builder.build().unwrap()
-    }
-
-    macro_rules! ignored {
-        ($name:ident, $root:expr, $gi:expr, $path:expr) => {
-            ignored!($name, $root, $gi, $path, false);
-        };
-        ($name:ident, $root:expr, $gi:expr, $path:expr, $is_dir:expr) => {
-            #[test]
-            fn $name() {
-                let gi = gi_from_str($root, $gi);
-                assert!(gi.matched($path, $is_dir).is_ignore());
-            }
-        };
-    }
-
-    macro_rules! not_ignored {
-        ($name:ident, $root:expr, $gi:expr, $path:expr) => {
-            not_ignored!($name, $root, $gi, $path, false);
-        };
-        ($name:ident, $root:expr, $gi:expr, $path:expr, $is_dir:expr) => {
-            #[test]
-            fn $name() {
-                let gi = gi_from_str($root, $gi);
-                assert!(!gi.matched($path, $is_dir).is_ignore());
-            }
-        };
-    }
-
-    const ROOT: &'static str = "/home/foobar/rust/rg";
-
-    ignored!(ig1, ROOT, "months", "months");
-    ignored!(ig2, ROOT, "*.lock", "Cargo.lock");
-    ignored!(ig3, ROOT, "*.rs", "src/main.rs");
-    ignored!(ig4, ROOT, "src/*.rs", "src/main.rs");
-    ignored!(ig5, ROOT, "/*.c", "cat-file.c");
-    ignored!(ig6, ROOT, "/src/*.rs", "src/main.rs");
-    ignored!(ig7, ROOT, "!src/main.rs\n*.rs", "src/main.rs");
-    ignored!(ig8, ROOT, "foo/", "foo", true);
-    ignored!(ig9, ROOT, "**/foo", "foo");
-    ignored!(ig10, ROOT, "**/foo", "src/foo");
-    ignored!(ig11, ROOT, "**/foo/**", "src/foo/bar");
-    ignored!(ig12, ROOT, "**/foo/**", "wat/src/foo/bar/baz");
-    ignored!(ig13, ROOT, "**/foo/bar", "foo/bar");
-    ignored!(ig14, ROOT, "**/foo/bar", "src/foo/bar");
-    ignored!(ig15, ROOT, "abc/**", "abc/x");
-    ignored!(ig16, ROOT, "abc/**", "abc/x/y");
-    ignored!(ig17, ROOT, "abc/**", "abc/x/y/z");
-    ignored!(ig18, ROOT, "a/**/b", "a/b");
-    ignored!(ig19, ROOT, "a/**/b", "a/x/b");
-    ignored!(ig20, ROOT, "a/**/b", "a/x/y/b");
-    ignored!(ig21, ROOT, r"\!xy", "!xy");
-    ignored!(ig22, ROOT, r"\#foo", "#foo");
-    ignored!(ig23, ROOT, "foo", "./foo");
-    ignored!(ig24, ROOT, "target", "grep/target");
-    ignored!(ig25, ROOT, "Cargo.lock", "./tabwriter-bin/Cargo.lock");
-    ignored!(ig26, ROOT, "/foo/bar/baz", "./foo/bar/baz");
-    ignored!(ig27, ROOT, "foo/", "xyz/foo", true);
-    ignored!(ig28, "./src", "/llvm/", "./src/llvm", true);
-    ignored!(ig29, ROOT, "node_modules/ ", "node_modules", true);
-    ignored!(ig30, ROOT, "**/", "foo/bar", true);
-    ignored!(ig31, ROOT, "path1/*", "path1/foo");
-    ignored!(ig32, ROOT, ".a/b", ".a/b");
-    ignored!(ig33, "./", ".a/b", ".a/b");
-    ignored!(ig34, ".", ".a/b", ".a/b");
-    ignored!(ig35, "./.", ".a/b", ".a/b");
-    ignored!(ig36, "././", ".a/b", ".a/b");
-    ignored!(ig37, "././.", ".a/b", ".a/b");
-    ignored!(ig38, ROOT, "\\[", "[");
-    ignored!(ig39, ROOT, "\\?", "?");
-    ignored!(ig40, ROOT, "\\*", "*");
-    ignored!(ig41, ROOT, "\\a", "a");
-    ignored!(ig42, ROOT, "s*.rs", "sfoo.rs");
-    ignored!(ig43, ROOT, "**", "foo.rs");
-    ignored!(ig44, ROOT, "**/**/*", "a/foo.rs");
-
-    not_ignored!(ignot1, ROOT, "amonths", "months");
-    not_ignored!(ignot2, ROOT, "monthsa", "months");
-    not_ignored!(ignot3, ROOT, "/src/*.rs", "src/grep/src/main.rs");
-    not_ignored!(ignot4, ROOT, "/*.c", "mozilla-sha1/sha1.c");
-    not_ignored!(ignot5, ROOT, "/src/*.rs", "src/grep/src/main.rs");
-    not_ignored!(ignot6, ROOT, "*.rs\n!src/main.rs", "src/main.rs");
-    not_ignored!(ignot7, ROOT, "foo/", "foo", false);
-    not_ignored!(ignot8, ROOT, "**/foo/**", "wat/src/afoo/bar/baz");
-    not_ignored!(ignot9, ROOT, "**/foo/**", "wat/src/fooa/bar/baz");
-    not_ignored!(ignot10, ROOT, "**/foo/bar", "foo/src/bar");
-    not_ignored!(ignot11, ROOT, "#foo", "#foo");
-    not_ignored!(ignot12, ROOT, "\n\n\n", "foo");
-    not_ignored!(ignot13, ROOT, "foo/**", "foo", true);
-    not_ignored!(
-        ignot14,
-        "./third_party/protobuf",
-        "m4/ltoptions.m4",
-        "./third_party/protobuf/csharp/src/packages/repositories.config"
-    );
-    not_ignored!(ignot15, ROOT, "!/bar", "foo/bar");
-    not_ignored!(ignot16, ROOT, "*\n!**/", "foo", true);
-    not_ignored!(ignot17, ROOT, "src/*.rs", "src/grep/src/main.rs");
-    not_ignored!(ignot18, ROOT, "path1/*", "path2/path1/foo");
-    not_ignored!(ignot19, ROOT, "s*.rs", "src/foo.rs");
-
-    fn bytes(s: &str) -> Vec<u8> {
-        s.to_string().into_bytes()
-    }
-
-    fn path_string<P: AsRef<Path>>(path: P) -> String {
-        path.as_ref().to_str().unwrap().to_string()
-    }
-
-    #[test]
-    fn parse_excludes_file1() {
-        let data = bytes("[core]\nexcludesFile = /foo/bar");
-        let got = super::parse_excludes_file(&data).unwrap();
-        assert_eq!(path_string(got), "/foo/bar");
-    }
-
-    #[test]
-    fn parse_excludes_file2() {
-        let data = bytes("[core]\nexcludesFile = ~/foo/bar");
-        let got = super::parse_excludes_file(&data).unwrap();
-        assert_eq!(path_string(got), super::expand_tilde("~/foo/bar"));
-    }
-
-    #[test]
-    fn parse_excludes_file3() {
-        let data = bytes("[core]\nexcludeFile = /foo/bar");
-        assert!(super::parse_excludes_file(&data).is_none());
-    }
-
-    #[test]
-    fn parse_excludes_file4() {
-        let data = bytes("[core]\nexcludesFile = \"~/foo/bar\"");
-        let got = super::parse_excludes_file(&data);
-        assert_eq!(
-            path_string(got.unwrap()),
-            super::expand_tilde("~/foo/bar")
-        );
-    }
-
-    #[test]
-    fn parse_excludes_file5() {
-        let data = bytes("[core]\nexcludesFile = \" \"~/foo/bar \" \"");
-        assert!(super::parse_excludes_file(&data).is_none());
-    }
-
-    // See: https://github.com/BurntSushi/ripgrep/issues/106
-    #[test]
-    fn regression_106() {
-        gi_from_str("/", " ");
-    }
-
-    #[test]
-    fn case_insensitive() {
-        let gi = GitignoreBuilder::new(ROOT)
-            .case_insensitive(true)
-            .unwrap()
-            .add_str(None, "*.html")
-            .unwrap()
-            .build()
-            .unwrap();
-        assert!(gi.matched("foo.html", false).is_ignore());
-        assert!(gi.matched("foo.HTML", false).is_ignore());
-        assert!(!gi.matched("foo.htm", false).is_ignore());
-        assert!(!gi.matched("foo.HTM", false).is_ignore());
-    }
-
-    ignored!(cs1, ROOT, "*.html", "foo.html");
-    not_ignored!(cs2, ROOT, "*.html", "foo.HTML");
-    not_ignored!(cs3, ROOT, "*.html", "foo.htm");
-    not_ignored!(cs4, ROOT, "*.html", "foo.HTM");
-}
diff --git a/crates/ignore/src/incremental.rs b/crates/ignore/src/incremental.rs
deleted file mode 100644
index 5030b0d00..000000000
--- a/crates/ignore/src/incremental.rs
+++ /dev/null
@@ -1,1286 +0,0 @@
-use std::{
-    collections::HashMap,
-    path::{Path, PathBuf},
-    sync::OnceLock,
-};
-
-use crate::{
-    Error, Match, PartialErrorBuilder, dir::Ignore, pathutil::is_hidden_path,
-};
-
-/// A cached matcher for checking paths against hierarchical ignore files.
-///
-/// An `IncrementalIgnore` is built from a [`crate::WalkBuilder`]. Unlike a
-/// recursive walk, it can check individual paths while still respecting the
-/// ignore files in every relevant parent directory. Matchers for directories
-/// are compiled on first use and then retained for later queries.
-/// Each matcher corresponds to exactly one root configured on the builder,
-/// and paths passed to it are interpreted relative to that root.
-/// A matcher for the special `-` root representing standard input is inert
-/// and always returns a non-match.
-///
-/// The matcher checks path-based filters in the same precedence order as
-/// a traversal. This includes glob overrides, `.ignore`, `.gitignore`,
-/// `.git/info/exclude`, global and explicitly added ignore files, custom
-/// ignore file names and file type selections. It does not apply filters that
-/// require a directory entry or other traversal state, such as custom entry
-/// predicates. Hidden-file detection, minimum and maximum depth limits and the
-/// maximum file size are applied.
-///
-/// A matcher is a snapshot at directory granularity. Once the ignore files in
-/// a directory have been loaded, edits to those files are not observed. Build
-/// a new matcher to reload them.
-///
-/// # Warning
-///
-/// The incremental path checking here necessarily needs to do a lot more work
-/// per path matched. Callers should _not_ use this to run directory traversal.
-/// This is intended to avoid the work of re-traversing an entire directory
-/// tree when only a few changes are detected. (For example, in response to
-/// file additions or deletions.)
-///
-/// # Example
-///
-/// ```rust,no_run
-/// use ignore::WalkBuilder;
-///
-/// let mut builder = WalkBuilder::new(".");
-/// builder.add_custom_ignore_filename(".rgignore");
-/// let mut matchers = builder.build_matchers();
-/// let matcher = &mut matchers[0];
-///
-/// if matcher.matched("src/generated.rs", false).is_ignore() {
-///     println!("ignored");
-/// }
-/// ```
-#[derive(Clone, Debug)]
-pub struct IncrementalIgnore {
-    /// The root exactly as it was given to `WalkBuilder`.
-    root: PathBuf,
-    /// The normalized root used only by the opt-in normalization routine.
-    normalized_root: OnceLock<Option<PathBuf>>,
-    /// The matcher for the configured root directory, loaded on first use.
-    ignore: RootIgnore,
-    /// Directory paths relative to `root`, excluding the root itself.
-    dirs: HashMap<PathBuf, CachedDir>,
-    /// Options for additional filtering beyond gitignore.
-    options: IncrementalIgnoreOptions,
-}
-
-/// The options for a matcher, mostly meant to duplicate as much as we can from
-/// `WalkParallel`.
-#[derive(Clone, Debug)]
-pub(crate) struct IncrementalIgnoreOptions {
-    pub(crate) min_depth: Option<usize>,
-    pub(crate) max_depth: Option<usize>,
-    pub(crate) max_filesize: Option<u64>,
-    pub(crate) hidden: bool,
-    pub(crate) follow_links: bool,
-}
-
-#[derive(Clone, Debug)]
-enum RootIgnore {
-    Unloaded(Ignore),
-    Loaded(Ignore),
-    NotDirectory,
-    Stdin,
-}
-
-/// Cached traversal state for a directory relative to the configured root.
-///
-/// The presence of an entry means that the directory and every ancestor
-/// between it and the root have already been checked.
-#[derive(Clone, Debug)]
-enum CachedDir {
-    /// The directory may be descended into. The matcher includes the ignore
-    /// rules loaded through this directory and is therefore the matcher to use
-    /// for its children.
-    Allowed(Ignore),
-    /// The directory may not be descended into because it was ignored by a
-    /// path rule or hidden-file filtering. Every descendant is consequently
-    /// ignored, and ignore files inside this directory are not loaded.
-    Ignored,
-}
-
-impl IncrementalIgnore {
-    pub(crate) fn new(
-        root: PathBuf,
-        ignore: Ignore,
-        options: IncrementalIgnoreOptions,
-    ) -> IncrementalIgnore {
-        // File traversal special cases `-` to search stdin, so we recognize
-        // it here for completeness too. In particular, we really want
-        // `WalkBuilder::build_matchers` to return a matcher for every root,
-        // even when it's a simple file (handled automatically) or when it's
-        // stdin (necessarily special cased).
-        //
-        // If callers need to search a file or directory named `-`, then they
-        // can use `./-`. As is the case for file traversal too.
-        let ignore = if root == Path::new("-") {
-            RootIgnore::Stdin
-        } else {
-            RootIgnore::Unloaded(ignore)
-        };
-        IncrementalIgnore {
-            root,
-            normalized_root: OnceLock::new(),
-            ignore,
-            dirs: HashMap::new(),
-            options,
-        }
-    }
-
-    /// Return the root that paths matched by this matcher are relative to.
-    pub fn root(&self) -> &Path {
-        &self.root
-    }
-
-    /// Normalize `path` and return it relative to this matcher's root.
-    ///
-    /// This returns `None` when `path` cannot be made absolute or
-    /// when it is known to be outside this matcher's root. Unlike
-    /// [`IncrementalIgnore::matched`], this performs absolute path conversion,
-    /// lexical normalization and allocation. It is intended as an opt-in
-    /// convenience for callers that do not already have root-relative paths.
-    ///
-    /// Note that `.` is interpreted relative to the process level current
-    /// working directory. It is _not_ interpreted relative to the root of
-    /// this matcher.
-    ///
-    /// Note also that this may reject paths that only differ in casing. For
-    /// example, if the root path for this matcher is `/FOO` but the provided
-    /// path is `/foo/bar`, then this may return `None`. Callers must ensure
-    /// casing is consistent between the path provided and the root path for
-    /// this matcher.
-    pub fn normalize<P: AsRef<Path>>(&self, path: P) -> Option<PathBuf> {
-        if matches!(self.ignore, RootIgnore::Stdin) {
-            return None;
-        }
-        let path = normalize_absolute(path.as_ref())?;
-        let root = self
-            .normalized_root
-            .get_or_init(|| normalize_absolute(&self.root))
-            .as_ref()?;
-        path.strip_prefix(root).ok().map(Path::to_path_buf)
-    }
-
-    /// Match a root-relative path against ignore files in its directory and
-    /// all relevant parent directories.
-    ///
-    /// `is_dir` should be true when `path` should be matched as a directory.
-    ///
-    /// For the return value, use [`IncrementalMatch::is_ignore`],
-    /// [`IncrementalMatch::is_whitelist`] or [`IncrementalMatch::is_none`] to
-    /// inspect it.
-    ///
-    /// Matchers for previously unseen directories are loaded and cached during
-    /// this call. Errors encountered while loading ignore files are logged. To
-    /// receive those errors, use [`IncrementalIgnore::matched_with_errors`].
-    ///
-    /// `path` must be relative to this matcher's root and must not contain a
-    /// parent directory (`..`) component. Behavior is unspecified when these
-    /// preconditions are violated. Callers with an absolute path or with a
-    /// path containing `.` or `..` may use [`IncrementalIgnore::normalize`]
-    /// to get a path satisfying these preconditions. In all cases, a relative
-    /// path is *assumed* to be relative to the root of this ignore matcher.
-    ///
-    /// In general, it is intended that callers doing recursive directory
-    /// traversal on the root of this matcher may provide relative paths to
-    /// this routine *without* calling [`IncrementalIgnore::normalize`].
-    ///
-    /// The empty path represents the explicitly configured root and also
-    /// returns non-match, consistent with recursive traversal where a root is
-    /// always treated as being at depth zero.
-    pub fn matched<P: AsRef<Path>>(
-        &mut self,
-        path: P,
-        is_dir: bool,
-    ) -> IncrementalMatch {
-        let (matched, err) = self.matched_with_errors(path, is_dir);
-        if let Some(err) = err {
-            log::debug!("error while loading ignore files: {err}");
-        }
-        matched
-    }
-
-    /// Match a root-relative path and return errors encountered while loading
-    /// ignore files.
-    ///
-    /// This is equivalent to [`IncrementalIgnore::matched`], except that
-    /// it returns any errors from newly loaded ignore files. Loading can
-    /// partially succeed, so valid rules are always applied to the returned
-    /// match even when an error is present.
-    pub fn matched_with_errors<P: AsRef<Path>>(
-        &mut self,
-        path: P,
-        is_dir: bool,
-    ) -> (IncrementalMatch, Option<Error>) {
-        let mut errs = PartialErrorBuilder::default();
-        let matched =
-            self.matched_with_errors_impl(path.as_ref(), is_dir, &mut errs);
-        (matched, errs.into_error_option())
-    }
-
-    fn matched_with_errors_impl(
-        &mut self,
-        relative: &Path,
-        is_dir: bool,
-        errs: &mut PartialErrorBuilder,
-    ) -> IncrementalMatch {
-        // We short-circuit here when our matcher corresponds to `Stdin` in
-        // order to always return a non-match. This is somewhat redundant with
-        // `root_ignore()` which does this too, but we do it here so that it
-        // always happens, e.g., before depth filtering.
-        if relative.is_absolute() || matches!(self.ignore, RootIgnore::Stdin) {
-            return IncrementalMatch::none(is_dir);
-        }
-
-        let (mut satisfies_min, mut edge_max) = (true, false);
-        if self.options.min_depth.is_some() || self.options.max_depth.is_some()
-        {
-            let depth = relative
-                .components()
-                .filter_map(|component| match component {
-                    std::path::Component::CurDir => None,
-                    component => Some(component),
-                })
-                .count();
-            satisfies_min =
-                self.options.min_depth.is_none_or(|min| depth >= min);
-            let satisfies_max =
-                self.options.max_depth.is_none_or(|max| depth <= max);
-            edge_max = self.options.max_depth.is_some_and(|max| depth == max);
-            // When we have a file that isn't past our min depth, we can give
-            // up right away.
-            if !is_dir && !satisfies_min {
-                return IncrementalMatch::ignore().not_within_depth();
-            }
-            // Same for *anything* that exceeds our max depth.
-            if !satisfies_max {
-                return IncrementalMatch::ignore().not_within_depth();
-            }
-        }
-
-        // When the path is invalid in some way, we bail out early to avoid
-        // potentially doing a stat call below.
-        let (mut mat, valid) = self
-            .matched_with_errors_ignore(relative, is_dir, errs)
-            .map(|mat| (mat, true))
-            .unwrap_or_else(|| (IncrementalMatch::none(is_dir), false));
-
-        if !is_dir
-            && !mat.is_ignore()
-            && valid
-            && let Some(max_filesize) = self.options.max_filesize
-        {
-            let path = self.root().join(relative);
-            let result = if self.options.follow_links {
-                path.metadata()
-            } else {
-                path.symlink_metadata()
-            };
-            match result {
-                Ok(md) if md.len() > max_filesize => {
-                    return IncrementalMatch::ignore();
-                }
-                Ok(_) => {}
-                Err(err) => {
-                    // Record the error but otherwise fall through
-                    let err = Error::from(err);
-                    errs.push(err.with_path(path));
-                }
-            }
-        }
-
-        // We still need to tag our `mat` if it doesn't pass the depth filter,
-        // or if it's a directory on the edge of a depth filter. This can only
-        // happen when the path is reported as a directory. Otherwise regular
-        // files are always handled above.
-        if is_dir {
-            if !satisfies_min {
-                mat = mat.not_within_depth();
-            }
-            if edge_max {
-                mat = mat.no_descent();
-            }
-        }
-        mat
-    }
-
-    fn matched_with_errors_ignore(
-        &mut self,
-        relative: &Path,
-        is_dir: bool,
-        errs: &mut PartialErrorBuilder,
-    ) -> Option<IncrementalMatch> {
-        let mut components = relative
-            .components()
-            .filter_map(|component| match component {
-                std::path::Component::CurDir => None,
-                component => Some(component),
-            })
-            .peekable();
-        components.peek()?;
-
-        // If the exact parent is cached, then all of its ancestors have
-        // already been checked. An allowed cache entry is the matcher to use
-        // for children of that directory, while an ignored cache entry is
-        // terminal for every descendant. In the usual case, this avoids both
-        // walking every component and allocating a relative directory path.
-        //
-        // Only try the fast path when the final component is a normal path
-        // component. Invalid paths are handled by the component walk below.
-        let has_normal_final_component =
-            relative.components().next_back().is_some_and(|component| {
-                matches!(component, std::path::Component::Normal(_))
-            });
-        if has_normal_final_component && let Some(parent) = relative.parent() {
-            match self.dirs.get(parent) {
-                Some(CachedDir::Allowed(ignore)) => {
-                    return Some(self.match_path(ignore, relative, is_dir));
-                }
-                Some(CachedDir::Ignored) => {
-                    return Some(IncrementalMatch::ignore());
-                }
-                None => {}
-            }
-        }
-
-        let mut ignore = self.root_ignore(errs)?;
-        let mut dir = PathBuf::new();
-        while let Some(component) = components.next() {
-            match component {
-                std::path::Component::ParentDir
-                | std::path::Component::RootDir
-                | std::path::Component::Prefix(_) => {
-                    return None;
-                }
-                std::path::Component::CurDir => continue,
-                std::path::Component::Normal(_) => {}
-            }
-            if components.peek().is_none() {
-                break;
-            }
-            dir.push(component.as_os_str());
-            match self.dirs.get(&dir) {
-                Some(CachedDir::Allowed(cached)) => {
-                    ignore = cached.clone();
-                    continue;
-                }
-                Some(CachedDir::Ignored) => {
-                    return Some(IncrementalMatch::ignore());
-                }
-                None => {}
-            }
-
-            let path = self.root.join(&dir);
-            let mat = ignore.matched(&path, true);
-            let is_hidden =
-                self.options.hidden && mat.is_none() && is_hidden_path(&path);
-            if mat.is_ignore() || is_hidden {
-                self.dirs.insert(dir.clone(), CachedDir::Ignored);
-                return Some(IncrementalMatch::ignore());
-            }
-            let (child, err) = ignore.add_child(&path);
-            errs.maybe_push(err);
-            self.dirs.insert(dir.clone(), CachedDir::Allowed(child.clone()));
-            ignore = child;
-        }
-
-        Some(self.match_path(&ignore, relative, is_dir))
-    }
-
-    fn match_path(
-        &self,
-        ignore: &Ignore,
-        relative: &Path,
-        is_dir: bool,
-    ) -> IncrementalMatch {
-        let path = self.root.join(relative);
-        let mut mat = IncrementalMatch::from_match(
-            ignore.matched(&path, is_dir).map(|_| ()),
-            is_dir,
-        );
-        // Whether a file is hidden or not has low precedence in filtering. We
-        // only check it if we haven't matched anything above. This permits
-        // callers to whitelist hidden files or directories.
-        if self.options.hidden && mat.is_none() && is_hidden_path(&path) {
-            mat = IncrementalMatch::ignore();
-        }
-        mat
-    }
-
-    fn root_ignore(
-        &mut self,
-        errs: &mut PartialErrorBuilder,
-    ) -> Option<Ignore> {
-        let ignore = match self.ignore {
-            RootIgnore::Unloaded(ref ignore) => ignore.clone(),
-            RootIgnore::Loaded(ref ignore) => return Some(ignore.clone()),
-            RootIgnore::NotDirectory | RootIgnore::Stdin => return None,
-        };
-        if !self.root.is_dir() {
-            self.ignore = RootIgnore::NotDirectory;
-            return None;
-        }
-
-        let (parents, err) = ignore.add_parents(&self.root);
-        errs.maybe_push(err);
-        let (root, err) = parents.add_child(&self.root);
-        errs.maybe_push(err);
-        self.ignore = RootIgnore::Loaded(root.clone());
-        Some(root)
-    }
-}
-
-/// The result of an incremental match.
-///
-/// This is similar to [`Match`] in that it reports whether a file path should
-/// be ignored, whitelisted or didn't match anything at all. It also has extra
-/// data, such as whether a directory matched but should not be descended into.
-///
-/// Generally speaking, callers that only care about specific files can stick
-/// to the `is_none()`, `is_ignore()` or `is_whitelist()` predicates. Directory
-/// entries are more complicated because we sometimes want to yield directories
-/// to descend into, but not actually visit (e.g., for the minimum depth
-/// filter). Or, we may want to yield a directory to visit but not descend into
-/// (e.g., for the maximum depth filter).
-#[derive(Clone, Debug)]
-pub struct IncrementalMatch {
-    mat: Match<()>,
-    should_descend: bool,
-    is_within_depth: bool,
-}
-
-impl IncrementalMatch {
-    fn none(is_dir: bool) -> IncrementalMatch {
-        IncrementalMatch {
-            mat: Match::None,
-            should_descend: is_dir,
-            is_within_depth: true,
-        }
-    }
-
-    fn ignore() -> IncrementalMatch {
-        IncrementalMatch {
-            mat: Match::Ignore(()),
-            should_descend: false,
-            is_within_depth: true,
-        }
-    }
-
-    fn from_match(mat: Match<()>, is_dir: bool) -> IncrementalMatch {
-        let should_descend = is_dir && !mat.is_ignore();
-        IncrementalMatch { mat, should_descend, is_within_depth: true }
-    }
-
-    fn no_descent(self) -> IncrementalMatch {
-        IncrementalMatch { should_descend: false, ..self }
-    }
-
-    fn not_within_depth(self) -> IncrementalMatch {
-        IncrementalMatch { is_within_depth: false, ..self }
-    }
-
-    /// Returns true if the match result didn't match anything.
-    pub fn is_none(&self) -> bool {
-        self.mat.is_none()
-    }
-
-    /// Returns true if the match result implies the path should be ignored.
-    pub fn is_ignore(&self) -> bool {
-        self.mat.is_ignore()
-    }
-
-    /// Returns true if the match result implies the path should be
-    /// whitelisted.
-    pub fn is_whitelist(&self) -> bool {
-        self.mat.is_whitelist()
-    }
-
-    /// Returns true only when this match corresponds to a directory *and*
-    /// whether the caller should look inside this directory for additional
-    /// results.
-    ///
-    /// It is possible for a match to report `false` for
-    /// [`IncrementalMatch::is_ignore`] _and_ `false` for
-    /// [`IncrementalMatch::should_descend`]. This can occur, for example, when
-    /// a maximum depth setting allows a directory through, but where none of
-    /// its children entries should be visited.
-    ///
-    /// This is always `false` for a file path that does *not* correspond to a
-    /// directory.
-    pub fn should_descend(&self) -> bool {
-        self.should_descend
-    }
-
-    /// Returns true only when this result corresponds to an entry that is
-    /// within the depth filter.
-    ///
-    /// This is `false` when a path corresponds to a directory and is less than
-    /// the minimum depth. In this case, callers should continue looking inside
-    /// that directory.
-    ///
-    /// This is always `true` for a match corresponding to a file path that
-    /// isn't a directory.
-    pub fn is_within_depth(&self) -> bool {
-        self.is_within_depth
-    }
-
-    /// Inverts the match so that `Ignore` becomes `Whitelist` and
-    /// `Whitelist` becomes `Ignore`. A non-match remains the same.
-    pub fn invert(self) -> IncrementalMatch {
-        IncrementalMatch { mat: self.mat.invert(), ..self }
-    }
-}
-
-/// Return a lexically normalized absolute representation of `path`.
-///
-/// This collapses `.` and `..`, but intentionally does not canonicalize or
-/// resolve symlinks. Ignore rules apply to the lexical path, and resolving a
-/// symlink below a root could move the result outside of that root.
-fn normalize_absolute(path: &Path) -> Option<PathBuf> {
-    let absolute = std::path::absolute(path).ok()?;
-    let mut normalized = PathBuf::new();
-    for component in absolute.components() {
-        match component {
-            std::path::Component::CurDir => {}
-            std::path::Component::ParentDir => {
-                normalized.pop();
-            }
-            _ => normalized.push(component.as_os_str()),
-        }
-    }
-    Some(normalized)
-}
-
-#[cfg(test)]
-mod tests {
-    use std::{
-        fs::{self, File},
-        io::Write,
-        path::{Path, PathBuf},
-    };
-
-    use crate::{
-        IncrementalIgnore, IncrementalMatch, WalkBuilder,
-        overrides::OverrideBuilder, tests::TempDir, types::TypesBuilder,
-    };
-
-    use super::CachedDir;
-
-    fn wfile<P: AsRef<Path>>(path: P, contents: &str) {
-        let mut file = File::create(path).unwrap();
-        file.write_all(contents.as_bytes()).unwrap();
-    }
-
-    fn mkdirp<P: AsRef<Path>>(path: P) {
-        fs::create_dir_all(path).unwrap();
-    }
-
-    fn tmpdir() -> TempDir {
-        TempDir::new().unwrap()
-    }
-
-    fn builder<P: AsRef<Path>>(path: P) -> WalkBuilder {
-        let mut builder = WalkBuilder::new(path);
-        builder.git_global(false);
-        builder
-    }
-
-    fn one_matcher(builder: &WalkBuilder) -> IncrementalIgnore {
-        let mut matchers = builder.build_matchers();
-        assert_eq!(matchers.len(), 1);
-        matchers.pop().unwrap()
-    }
-
-    fn builders<I: IntoIterator<Item = P>, P: AsRef<Path>>(
-        paths: I,
-    ) -> WalkBuilder {
-        let mut builder = WalkBuilder::from_iter(paths);
-        builder.git_global(false);
-        builder
-    }
-
-    fn matchers(builder: &WalkBuilder) -> Vec<IncrementalIgnore> {
-        builder.build_matchers()
-    }
-
-    fn matchedf<P: AsRef<Path>>(
-        matcher: &mut IncrementalIgnore,
-        path: P,
-    ) -> IncrementalMatch {
-        let (matched, err) = matcher.matched_with_errors(path, false);
-        assert!(err.is_none(), "unexpected matcher error: {err:?}");
-        matched
-    }
-
-    fn matchedd<P: AsRef<Path>>(
-        matcher: &mut IncrementalIgnore,
-        path: P,
-    ) -> IncrementalMatch {
-        let (matched, err) = matcher.matched_with_errors(path, true);
-        assert!(err.is_none(), "unexpected matcher error: {err:?}");
-        matched
-    }
-
-    // Test that multiple parent ignore files, when nested, are respected.
-    #[test]
-    fn nested_parent_gitignores() {
-        let td = tmpdir();
-        let root = td.path().join("project/work");
-        mkdirp(td.path().join(".git"));
-        mkdirp(root.join("src"));
-        wfile(td.path().join(".gitignore"), "*.tmp\n");
-        wfile(td.path().join("project/.gitignore"), "!keep.tmp\nnested.log\n");
-
-        let mut m = one_matcher(&builder(&root));
-        assert_eq!(m.root(), root);
-        assert!(matchedf(&mut m, "src/drop.tmp").is_ignore());
-        assert!(matchedf(&mut m, "src/keep.tmp").is_whitelist());
-        assert!(matchedf(&mut m, "src/nested.log").is_ignore());
-        assert!(matchedf(&mut m, "src/ok.rs").is_none());
-    }
-
-    // Test that an anchored rule in a child directory is matched relative to
-    // that directory, not relative to the configured root.
-    #[test]
-    fn anchored_child_rule_uses_child_root() {
-        let td = tmpdir();
-        let root = td.path().join("root");
-        mkdirp(root.join("a"));
-        wfile(root.join("a/.ignore"), "/foo\n");
-
-        let mut m = one_matcher(&builder(&root));
-        assert!(matchedf(&mut m, "a/foo").is_ignore());
-        assert!(matchedf(&mut m, "a/b/foo").is_none());
-    }
-
-    // Test that a leading `./` impacts how the rules are matched.
-    #[cfg(not(windows))]
-    #[test]
-    fn leading_dot_slash_impacts_matching() {
-        let td = tmpdir();
-        let root = td.path().join("root");
-        mkdirp(root.join("a"));
-        wfile(root.join(".ignore"), "/foo\n");
-        wfile(root.join("a/.ignore"), "/foo\n");
-
-        let mut m = one_matcher(&builder(&root));
-        assert!(matchedf(&mut m, "foo").is_ignore());
-        assert!(matchedf(&mut m, "./foo").is_none());
-        assert!(matchedf(&mut m, "a/allowed").is_none());
-        assert!(matchedf(&mut m, "a/foo").is_ignore());
-        assert!(matchedf(&mut m, "./a/foo").is_none());
-    }
-
-    // Test that custom ignore files are respected.
-    #[test]
-    fn parent_ignore_and_custom_ignore() {
-        let td = tmpdir();
-        let root = td.path().join("project/work");
-        mkdirp(root.join("src"));
-        wfile(td.path().join(".ignore"), "*.cache\n");
-        wfile(td.path().join(".rgignore"), "*.svg\n");
-        wfile(td.path().join("project/.ignore"), "!keep.cache\n");
-        wfile(td.path().join("project/.rgignore"), "!keep.svg\n");
-
-        let mut builder = builder(&root);
-        builder.add_custom_ignore_filename(".rgignore");
-        let mut m = one_matcher(&builder);
-        assert!(matchedf(&mut m, "src/drop.cache").is_ignore());
-        assert!(matchedf(&mut m, "src/keep.cache").is_whitelist());
-        assert!(matchedf(&mut m, "src/drop.svg").is_ignore());
-        assert!(matchedf(&mut m, "src/keep.svg").is_whitelist());
-    }
-
-    // Test that glob overrides take precedence over ignore files.
-    #[test]
-    fn glob_overrides_are_applied() {
-        let td = tmpdir();
-        wfile(td.path().join(".ignore"), "keep.rs\n!drop.rs\n");
-
-        let mut overrides = OverrideBuilder::new(td.path());
-        overrides.add("keep.rs").unwrap();
-        overrides.add("!drop.rs").unwrap();
-        let mut b = builder(td.path());
-        b.overrides(overrides.build().unwrap());
-        let mut m = one_matcher(&b);
-
-        assert!(matchedf(&mut m, "keep.rs").is_whitelist());
-        assert!(matchedf(&mut m, "drop.rs").is_ignore());
-    }
-
-    // Test that an override-ignored directory prevents matching rules below
-    // it, just as it prevents a traversal from descending into the directory.
-    #[test]
-    fn glob_overrides_apply_to_ancestors() {
-        let td = tmpdir();
-        mkdirp(td.path().join("blocked"));
-        wfile(td.path().join("blocked/.ignore"), "!keep.rs\n");
-
-        let mut overrides = OverrideBuilder::new(td.path());
-        overrides.add("!blocked/").unwrap();
-        let mut b = builder(td.path());
-        b.overrides(overrides.build().unwrap());
-        let mut m = one_matcher(&b);
-
-        assert!(matchedf(&mut m, "blocked/keep.rs").is_ignore());
-    }
-
-    // Test that file type selections are applied to files, but not
-    // directories.
-    #[test]
-    fn file_types_are_applied() {
-        let td = tmpdir();
-        mkdirp(td.path().join("src"));
-
-        let mut types = TypesBuilder::new();
-        types.add("rust", "*.rs").unwrap();
-        types.select("rust");
-        let mut b = builder(td.path());
-        b.types(types.build().unwrap());
-        let mut m = one_matcher(&b);
-
-        assert!(matchedd(&mut m, "src").is_none());
-        assert!(matchedf(&mut m, "src/lib.rs").is_whitelist());
-        assert!(matchedf(&mut m, "README.md").is_ignore());
-    }
-
-    #[test]
-    fn directly_ignored_directory_is_not_descended() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("blocked"));
-        wfile(td.path().join(".gitignore"), "blocked/\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        let dir = matchedd(&mut m, "blocked");
-        assert!(dir.is_ignore());
-        assert!(!dir.should_descend());
-    }
-
-    // Test that when a directory is ignored, anything below it always ignored
-    // even when there are explicit whitelist rules. This matches directory
-    // traversal semantics.
-    #[test]
-    fn ignored_ancestor_wins() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("blocked"));
-        mkdirp(td.path().join("open"));
-        // This is the key line: since the entire `blocked` directory is
-        // ignored, a proper file traversal won't ever descend into it. So
-        // `blocked/keep.rs` should be ignored even if there are ignore rules
-        // "beneath" it that whitelist it.
-        wfile(td.path().join(".gitignore"), "blocked/\n!blocked/keep.rs\n");
-        wfile(td.path().join("blocked/.gitignore"), "!keep.rs\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, "blocked/keep.rs").is_ignore());
-        assert!(matchedf(&mut m, "blocked/other.rs").is_ignore());
-        assert!(matchedf(&mut m, "open/keep.rs").is_none());
-    }
-
-    // Test that we respect git boundaries. And that we don't respect git
-    // boundaries when not configured to do so.
-    #[test]
-    fn respects_git_repository_boundaries() {
-        let td = tmpdir();
-        let root = td.path().join("repo/src");
-        mkdirp(td.path().join("repo/.git"));
-        mkdirp(&root);
-        wfile(td.path().join(".gitignore"), "outside-rule\n");
-        wfile(td.path().join(".ignore"), "tool-rule\n");
-        wfile(td.path().join("repo/.gitignore"), "inside-rule\n");
-
-        let mut m = one_matcher(&builder(&root));
-        assert!(matchedf(&mut m, "inside-rule").is_ignore());
-        assert!(matchedf(&mut m, "outside-rule").is_none());
-        assert!(matchedf(&mut m, "tool-rule").is_ignore());
-
-        let mut no_git_required = builder(&root);
-        no_git_required.require_git(false);
-        let mut m = one_matcher(&no_git_required);
-        assert!(matchedf(&mut m, "outside-rule").is_ignore());
-    }
-
-    // Test that when a gitignore matcher in a parent directory is created, we
-    // reuse that matcher from memory even if it's changed on disk.
-    #[test]
-    fn compiled_matchers_are_reused() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a"));
-        wfile(td.path().join("a/.ignore"), "*.tmp\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, "a/first.tmp").is_ignore());
-
-        // Below demonstrates that this new ignore file contents
-        // aren't actually picked up because it was already loaded.
-        wfile(td.path().join("a/.ignore"), "!*.tmp\n*.rs\n");
-        assert!(matchedf(&mut m, "a/first.tmp").is_ignore());
-        assert!(matchedf(&mut m, "a/second.tmp").is_ignore());
-        assert!(matchedf(&mut m, "a/keep.rs").is_none());
-        // To get the new ignore file, we need to rebuild the matcher.
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, "a/first.tmp").is_whitelist());
-        assert!(matchedf(&mut m, "a/second.tmp").is_whitelist());
-        assert!(matchedf(&mut m, "a/keep.rs").is_ignore());
-    }
-
-    #[test]
-    fn cached_allowed_parent_matches_children() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b"));
-        wfile(td.path().join("a/b/.ignore"), "ignored\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, "a/b/allowed").is_none());
-        assert!(matches!(
-            m.dirs.get(Path::new("a/b")),
-            Some(CachedDir::Allowed(_))
-        ));
-        assert!(matchedf(&mut m, "a/b/ignored").is_ignore());
-    }
-
-    #[test]
-    fn cached_ignored_parent_matches_children() {
-        let td = tmpdir();
-        mkdirp(td.path().join("blocked"));
-        wfile(td.path().join(".ignore"), "blocked/\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, "blocked/first").is_ignore());
-        assert!(matches!(
-            m.dirs.get(Path::new("blocked")),
-            Some(CachedDir::Ignored)
-        ));
-        assert!(matchedf(&mut m, "blocked/second").is_ignore());
-    }
-
-    #[test]
-    fn cached_parent_matcher_is_used_for_directory() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b"));
-        wfile(td.path().join("a/b/.ignore"), "**\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, "a/b/file").is_ignore());
-        assert!(matches!(
-            m.dirs.get(Path::new("a/b")),
-            Some(CachedDir::Allowed(_))
-        ));
-        let dir = matchedd(&mut m, "a/b");
-        assert!(dir.is_none());
-        assert!(dir.should_descend());
-    }
-
-    // Like `compiled_matchers_are_reused`, but with multiple roots.
-    #[test]
-    fn compiled_multi_matchers_are_reused() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b/c"));
-
-        wfile(td.path().join("a/.ignore"), "*.tmp\n");
-        let mut mats = matchers(&builders([
-            td.path().join("a/b"),
-            td.path().join("a/b/c"),
-        ]));
-        assert!(matchedf(&mut mats[0], "first.tmp").is_ignore());
-        assert!(matchedf(&mut mats[0], "c/first.tmp").is_ignore());
-
-        // Even though we haven't used the second matcher, it should still
-        // reuse the `a/.ignore` above. If it didn't, then `a/b/c/first.tmp`
-        // below would be whitelisted.
-        wfile(td.path().join("a/.ignore"), "!*.tmp\n");
-        assert!(matchedf(&mut mats[1], "first.tmp").is_ignore());
-    }
-
-    #[test]
-    fn compiled_multi_child_matchers_are_not_reused() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b/c/d/e"));
-
-        wfile(td.path().join("a/b/c/d/e/.ignore"), "*.tmp\n");
-        let mut mats = matchers(&builders([
-            td.path().join("a/b"),
-            td.path().join("a/b/c"),
-        ]));
-        // Some sanity checking first.
-        assert!(matchedf(&mut mats[0], "c/first.tmp").is_none());
-        assert!(matchedf(&mut mats[0], "c/d/first.tmp").is_none());
-        assert!(matchedf(&mut mats[0], "c/d/e/first.tmp").is_ignore());
-
-        // Now write a new ignore file at the same location as above
-        // and check that the other matcher still uses the "stale" data.
-        wfile(td.path().join("a/b/c/d/e/.ignore"), "!*.tmp\n");
-        assert!(matchedf(&mut mats[1], "first.tmp").is_none());
-        assert!(matchedf(&mut mats[1], "d/first.tmp").is_none());
-        // This is the punch line: because we didn't load `mats[1]` before
-        // changing the ignore file, it loads it here and thus this path gets
-        // whitelisted.
-        assert!(matchedf(&mut mats[1], "d/e/first.tmp").is_whitelist());
-        // ... but `mats[0]` still uses the stale gitignore matcher cached in
-        // memory!
-        assert!(matchedf(&mut mats[0], "c/d/e/first.tmp").is_ignore());
-
-        // If we rebuilder the matcher... then we force reloading and they're
-        // now consistent with one another.
-        let mut mats = matchers(&builders([
-            td.path().join("a/b"),
-            td.path().join("a/b/c"),
-        ]));
-        assert!(matchedf(&mut mats[0], "c/d/e/first.tmp").is_whitelist());
-        assert!(matchedf(&mut mats[1], "d/e/first.tmp").is_whitelist());
-    }
-
-    // Tests that even when there is an error with a glob pattern, we still
-    // respect other glob patterns that are valid.
-    #[test]
-    fn partial_errors_keep_valid_rules() {
-        let td = tmpdir();
-        let root = td.path().join("work");
-        mkdirp(&root);
-        wfile(td.path().join(".ignore"), "{bad\n*.tmp\n");
-
-        let mut builder = builder(&root);
-        builder.git_ignore(false).git_exclude(false);
-        let mut m = one_matcher(&builder);
-        let (matched, err) = m.matched_with_errors("drop.tmp", false);
-        assert!(err.is_some());
-        assert!(matched.is_ignore());
-    }
-
-    // Tests that parent rules are not respected if the matcher is configured
-    // not to do so.
-    #[test]
-    fn parent_loading_can_be_disabled() {
-        let td = tmpdir();
-        let root = td.path().join("work");
-        mkdirp(&root);
-        wfile(td.path().join(".ignore"), "parent-rule\n");
-        wfile(root.join(".ignore"), "root-rule\n");
-
-        let mut b = builder(&root);
-        b.parents(false);
-        let mut m = one_matcher(&b);
-        assert!(matchedf(&mut m, "parent-rule").is_none());
-        assert!(matchedf(&mut m, "root-rule").is_ignore());
-
-        // Sanity check that without `parents(false)`, the parent rule is
-        // respected.
-        let mut m = one_matcher(&builder(&root));
-        assert!(matchedf(&mut m, "parent-rule").is_ignore());
-        assert!(matchedf(&mut m, "root-rule").is_ignore());
-    }
-
-    // Tests that we can normalize a file path that isn't already in "normal"
-    // relative form, and then use that to match on ignore files.
-    #[test]
-    fn paths_are_relative_to_the_root() {
-        let td = tmpdir();
-        let root = td.path().join("root");
-        let outside = td.path().join("outside");
-        mkdirp(&root);
-        mkdirp(&outside);
-        wfile(root.join(".ignore"), "file\n");
-
-        let mut m = one_matcher(&builder(&root));
-        assert!(matchedd(&mut m, "").is_none());
-        assert!(matchedd(&mut m, ".").is_none());
-        assert!(matchedf(&mut m, "file").is_ignore());
-        // Doesn't work because it isn't relative to the root. It's absolute.
-        assert!(matchedf(&mut m, root.join("file")).is_none());
-        // Also doesn't work because while it's relative, it contains `..`.
-        assert!(matchedf(&mut m, "dir/../file").is_none());
-
-        let norm = m.normalize(root.join("dir/../file")).unwrap();
-        assert_eq!(norm, Path::new("file"));
-        assert!(matchedf(&mut m, "file").is_ignore());
-
-        // Doesn't normalize because its an absolute path outside of our root.
-        assert_eq!(m.normalize(outside.join("file")), None);
-    }
-
-    // Tests that two matchers in two different directories correctly interpret
-    // the same parent gitignore file.
-    #[test]
-    fn multiple_roots_keep_their_own_context() {
-        let td = tmpdir();
-        let root_a = td.path().join("a");
-        let root_b = td.path().join("b");
-        mkdirp(td.path().join(".git"));
-        mkdirp(&root_a);
-        mkdirp(&root_b);
-        wfile(td.path().join(".gitignore"), "/a/*.tmp\n/b/*.log\n");
-
-        let mut builder =
-            builders([root_a.as_path(), Path::new("-"), root_b.as_path()]);
-        builder.git_global(false);
-        let mut ms = matchers(&builder);
-        assert_eq!(ms.len(), 3);
-        assert_eq!(ms[0].root(), root_a);
-        assert_eq!(ms[1].root(), Path::new("-"));
-        assert_eq!(ms[2].root(), root_b);
-        assert!(matchedf(&mut ms[0], "drop.tmp").is_ignore());
-        assert!(matchedf(&mut ms[0], "keep.log").is_none());
-        assert!(matchedf(&mut ms[1], "anything").is_none());
-        assert_eq!(ms[1].normalize("anything"), None);
-        assert!(matchedf(&mut ms[2], "keep.tmp").is_none());
-        assert!(matchedf(&mut ms[2], "drop.log").is_ignore());
-    }
-
-    // Tests that only the exact `-` root represents standard input.
-    #[test]
-    fn dot_dash_root_is_not_stdin() {
-        let m = one_matcher(&builder("./-"));
-        assert_eq!(m.root(), Path::new("./-"));
-        assert_eq!(m.normalize("./-/file"), Some(PathBuf::from("file")));
-    }
-
-    #[test]
-    fn stdin_is_inert_with_depth_limits() {
-        let mut b = builder("-");
-        b.min_depth(Some(2));
-        let mut m = one_matcher(&b);
-        let mat = matchedf(&mut m, "file");
-        assert!(mat.is_none());
-        assert!(mat.is_within_depth());
-
-        let mut b = builder("-");
-        b.max_depth(Some(0));
-        let mut m = one_matcher(&b);
-        let mat = matchedd(&mut m, "dir");
-        assert!(mat.is_none());
-        assert!(mat.is_within_depth());
-        assert!(mat.should_descend());
-    }
-
-    // Tests that ignore matching works lexically, and doesn't accidentally
-    // resolve symbolic links.
-    #[cfg(unix)]
-    #[test]
-    fn symlink_path_stays_under_lexical_root() {
-        use std::os::unix::fs::symlink;
-
-        let td = tmpdir();
-        let root = td.path().join("root");
-        let outside = td.path().join("outside");
-        mkdirp(&root);
-        mkdirp(&outside);
-        wfile(root.join(".ignore"), "link\n");
-        wfile(outside.join("target"), "");
-        symlink(outside.join("target"), root.join("link")).unwrap();
-
-        let mut m = one_matcher(&builder(&root));
-        assert!(matchedf(&mut m, "link").is_ignore());
-    }
-
-    #[test]
-    fn depth_limits() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b/c/d"));
-
-        let mut b = builder(td.path());
-        b.min_depth(Some(2)).max_depth(Some(3));
-        let mut m = one_matcher(&b);
-
-        let dir = matchedd(&mut m, "a");
-        assert!(!dir.is_within_depth());
-        assert!(dir.should_descend());
-        assert!(matchedf(&mut m, "file").is_ignore());
-
-        let dir = matchedd(&mut m, "a/b");
-        assert!(dir.is_within_depth());
-        assert!(dir.should_descend());
-        assert!(!matchedf(&mut m, "a/file").is_ignore());
-
-        let dir = matchedd(&mut m, "a/b/c");
-        assert!(dir.is_within_depth());
-        assert!(!dir.should_descend());
-        assert!(!matchedf(&mut m, "a/b/file").is_ignore());
-        assert!(matchedf(&mut m, "a/b/c/file").is_ignore());
-
-        let dir = matchedd(&mut m, "a/b/c/d");
-        assert!(dir.is_ignore());
-        assert!(!dir.is_within_depth());
-        assert!(!dir.should_descend());
-        assert!(matchedf(&mut m, "a/b/c/d/file").is_ignore());
-    }
-
-    #[test]
-    fn depth_limits_apply_to_root() {
-        let td = tmpdir();
-
-        let mut b = builder(td.path());
-        b.min_depth(Some(1));
-        let mut m = one_matcher(&b);
-        for path in ["", "."] {
-            let root = matchedd(&mut m, path);
-            assert!(root.is_none());
-            assert!(!root.is_within_depth());
-            assert!(root.should_descend());
-        }
-
-        let mut b = builder(td.path());
-        b.max_depth(Some(0));
-        let mut m = one_matcher(&b);
-        for path in ["", "."] {
-            let root = matchedd(&mut m, path);
-            assert!(root.is_none());
-            assert!(root.is_within_depth());
-            assert!(!root.should_descend());
-        }
-    }
-
-    #[test]
-    fn max_filesize() {
-        let td = tmpdir();
-        mkdirp(td.path().join("dir"));
-        wfile(td.path().join("empty"), "");
-        wfile(td.path().join("at-limit"), "12345");
-        wfile(td.path().join("over-limit"), "123456");
-
-        let mut b = builder(td.path());
-        b.max_filesize(Some(5));
-        let mut m = one_matcher(&b);
-
-        assert!(matchedf(&mut m, "empty").is_none());
-        assert!(matchedf(&mut m, "at-limit").is_none());
-        assert!(matchedf(&mut m, "over-limit").is_ignore());
-
-        let dir = matchedd(&mut m, "dir");
-        assert!(dir.is_none());
-        assert!(dir.should_descend());
-    }
-
-    #[test]
-    fn max_filesize_does_not_stat_ignored_file() {
-        let td = tmpdir();
-        wfile(td.path().join(".ignore"), "ignored\n");
-
-        let mut b = builder(td.path());
-        b.max_filesize(Some(0));
-        let mut m = one_matcher(&b);
-        let (mat, err) = m.matched_with_errors("ignored", false);
-        assert!(mat.is_ignore());
-        assert!(err.is_none(), "ignored missing file was statted: {err:?}");
-    }
-
-    #[cfg(unix)]
-    #[test]
-    fn max_filesize_respects_follow_links() {
-        use std::os::unix::fs::symlink;
-
-        let td = tmpdir();
-        wfile(
-            td.path().join("target"),
-            "target contents are much longer than the size limit",
-        );
-        symlink("target", td.path().join("link")).unwrap();
-
-        let mut b = builder(td.path());
-        b.max_filesize(Some(10));
-        let mut m = one_matcher(&b);
-        assert!(matchedf(&mut m, "link").is_none());
-
-        b.follow_links(true);
-        let mut m = one_matcher(&b);
-        assert!(matchedf(&mut m, "link").is_ignore());
-    }
-
-    #[test]
-    fn hidden_files_and_directories() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".hidden-dir"));
-        mkdirp(td.path().join("visible-dir"));
-        wfile(td.path().join(".hidden-file"), "");
-        wfile(td.path().join("visible-file"), "");
-
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, ".hidden-file").is_ignore());
-        let dir = matchedd(&mut m, ".hidden-dir");
-        assert!(dir.is_ignore());
-        assert!(!dir.should_descend());
-        assert!(matchedf(&mut m, "visible-file").is_none());
-        let dir = matchedd(&mut m, "visible-dir");
-        assert!(dir.is_none());
-        assert!(dir.should_descend());
-
-        let mut b = builder(td.path());
-        b.hidden(false);
-        let mut m = one_matcher(&b);
-        assert!(matchedf(&mut m, ".hidden-file").is_none());
-        let dir = matchedd(&mut m, ".hidden-dir");
-        assert!(dir.is_none());
-        assert!(dir.should_descend());
-    }
-
-    #[test]
-    fn gitignore_whitelist_overrides_hidden_filter() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join(".hidden-dir"));
-        wfile(td.path().join(".hidden-file"), "");
-        wfile(td.path().join(".gitignore"), "!.hidden-file\n!.hidden-dir/\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, ".hidden-file").is_whitelist());
-        let dir = matchedd(&mut m, ".hidden-dir");
-        assert!(dir.is_whitelist());
-        assert!(dir.should_descend());
-    }
-
-    #[test]
-    fn descendants_of_hidden_directories_are_ignored() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join(".hidden/nested"));
-        mkdirp(td.path().join("visible/.hidden"));
-        wfile(td.path().join(".hidden/file"), "");
-        wfile(td.path().join(".hidden/nested/file"), "");
-        wfile(td.path().join("visible/.hidden/file"), "");
-        wfile(td.path().join(".hidden/.gitignore"), "!file\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        assert!(matchedf(&mut m, ".hidden/file").is_ignore());
-        assert!(matchedf(&mut m, ".hidden/nested/file").is_ignore());
-        assert!(matchedf(&mut m, "visible/.hidden/file").is_ignore());
-    }
-
-    #[test]
-    fn whitelisted_hidden_directory_allows_descendants() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join(".hidden"));
-        wfile(td.path().join(".hidden/file"), "");
-        wfile(td.path().join(".gitignore"), "!.hidden/\n");
-
-        let mut m = one_matcher(&builder(td.path()));
-        let dir = matchedd(&mut m, ".hidden");
-        assert!(dir.is_whitelist());
-        assert!(dir.should_descend());
-        assert!(matchedf(&mut m, ".hidden/file").is_none());
-    }
-
-    #[test]
-    fn hidden_directories_outside_depth_limits() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/.hidden"));
-
-        let mut b = builder(td.path());
-        b.min_depth(Some(3));
-        let mut m = one_matcher(&b);
-        let dir = matchedd(&mut m, "a/.hidden");
-        assert!(dir.is_ignore());
-        assert!(!dir.is_within_depth());
-
-        let mut b = builder(td.path());
-        b.max_depth(Some(1));
-        let mut m = one_matcher(&b);
-        let dir = matchedd(&mut m, "a/.hidden");
-        assert!(dir.is_ignore());
-        assert!(!dir.is_within_depth());
-    }
-}
diff --git a/crates/ignore/src/lib.rs b/crates/ignore/src/lib.rs
deleted file mode 100644
index b9c9a3ece..000000000
--- a/crates/ignore/src/lib.rs
+++ /dev/null
@@ -1,549 +0,0 @@
-/*!
-The ignore crate provides a fast recursive directory iterator that respects
-various filters such as globs, file types and `.gitignore` files. The precise
-matching rules and precedence is explained in the documentation for
-`WalkBuilder`.
-
-Secondarily, this crate exposes gitignore and file type matchers for use cases
-that demand more fine-grained control.
-
-# Example
-
-This example shows the most basic usage of this crate. This code will
-recursively traverse the current directory while automatically filtering out
-files and directories according to ignore globs found in files like
-`.ignore` and `.gitignore`:
-
-
-```rust,no_run
-use ignore::Walk;
-
-for result in Walk::new("./") {
-    // Each item yielded by the iterator is either a directory entry or an
-    // error, so either print the path or the error.
-    match result {
-        Ok(entry) => println!("{}", entry.path().display()),
-        Err(err) => println!("ERROR: {}", err),
-    }
-}
-```
-
-# Example: advanced
-
-By default, the recursive directory iterator will ignore hidden files and
-directories. This can be disabled by building the iterator with `WalkBuilder`:
-
-```rust,no_run
-use ignore::WalkBuilder;
-
-for result in WalkBuilder::new("./").hidden(false).build() {
-    println!("{:?}", result);
-}
-```
-
-See the documentation for `WalkBuilder` for many other options.
-*/
-
-#![deny(missing_docs)]
-
-use std::path::{Path, PathBuf};
-
-pub use crate::incremental::{IncrementalIgnore, IncrementalMatch};
-pub use crate::walk::{
-    DirEntry, ParallelVisitor, ParallelVisitorBuilder, Walk, WalkBuilder,
-    WalkParallel, WalkState,
-};
-
-mod default_types;
-mod dir;
-pub mod gitignore;
-mod incremental;
-pub mod overrides;
-mod pathutil;
-pub mod types;
-mod walk;
-
-/// Represents an error that can occur when parsing a gitignore file.
-#[derive(Debug)]
-pub enum Error {
-    /// A collection of "soft" errors. These occur when adding an ignore
-    /// file partially succeeded.
-    Partial(Vec<Error>),
-    /// An error associated with a specific line number.
-    WithLineNumber {
-        /// The line number.
-        line: u64,
-        /// The underlying error.
-        err: Box<Error>,
-    },
-    /// An error associated with a particular file path.
-    WithPath {
-        /// The file path.
-        path: PathBuf,
-        /// The underlying error.
-        err: Box<Error>,
-    },
-    /// An error associated with a particular directory depth when recursively
-    /// walking a directory.
-    WithDepth {
-        /// The directory depth.
-        depth: usize,
-        /// The underlying error.
-        err: Box<Error>,
-    },
-    /// An error that occurs when a file loop is detected when traversing
-    /// symbolic links.
-    Loop {
-        /// The ancestor file path in the loop.
-        ancestor: PathBuf,
-        /// The child file path in the loop.
-        child: PathBuf,
-    },
-    /// An error that occurs when doing I/O, such as reading an ignore file.
-    Io(std::io::Error),
-    /// An error that occurs when trying to parse a glob.
-    Glob {
-        /// The original glob that caused this error. This glob, when
-        /// available, always corresponds to the glob provided by an end user.
-        /// e.g., It is the glob as written in a `.gitignore` file.
-        ///
-        /// (This glob may be distinct from the glob that is actually
-        /// compiled, after accounting for `gitignore` semantics.)
-        glob: Option<String>,
-        /// The underlying glob error as a string.
-        err: String,
-    },
-    /// A type selection for a file type that is not defined.
-    UnrecognizedFileType(String),
-    /// A user specified file type definition could not be parsed.
-    InvalidDefinition,
-}
-
-impl Clone for Error {
-    fn clone(&self) -> Error {
-        match *self {
-            Error::Partial(ref errs) => Error::Partial(errs.clone()),
-            Error::WithLineNumber { line, ref err } => {
-                Error::WithLineNumber { line, err: err.clone() }
-            }
-            Error::WithPath { ref path, ref err } => {
-                Error::WithPath { path: path.clone(), err: err.clone() }
-            }
-            Error::WithDepth { depth, ref err } => {
-                Error::WithDepth { depth, err: err.clone() }
-            }
-            Error::Loop { ref ancestor, ref child } => Error::Loop {
-                ancestor: ancestor.clone(),
-                child: child.clone(),
-            },
-            Error::Io(ref err) => match err.raw_os_error() {
-                Some(e) => Error::Io(std::io::Error::from_raw_os_error(e)),
-                None => {
-                    Error::Io(std::io::Error::new(err.kind(), err.to_string()))
-                }
-            },
-            Error::Glob { ref glob, ref err } => {
-                Error::Glob { glob: glob.clone(), err: err.clone() }
-            }
-            Error::UnrecognizedFileType(ref err) => {
-                Error::UnrecognizedFileType(err.clone())
-            }
-            Error::InvalidDefinition => Error::InvalidDefinition,
-        }
-    }
-}
-
-impl Error {
-    /// Returns true if this is a partial error.
-    ///
-    /// A partial error occurs when only some operations failed while others
-    /// may have succeeded. For example, an ignore file may contain an invalid
-    /// glob among otherwise valid globs.
-    pub fn is_partial(&self) -> bool {
-        match *self {
-            Error::Partial(_) => true,
-            Error::WithLineNumber { ref err, .. } => err.is_partial(),
-            Error::WithPath { ref err, .. } => err.is_partial(),
-            Error::WithDepth { ref err, .. } => err.is_partial(),
-            _ => false,
-        }
-    }
-
-    /// Returns true if this error is exclusively an I/O error.
-    pub fn is_io(&self) -> bool {
-        match *self {
-            Error::Partial(ref errs) => errs.len() == 1 && errs[0].is_io(),
-            Error::WithLineNumber { ref err, .. } => err.is_io(),
-            Error::WithPath { ref err, .. } => err.is_io(),
-            Error::WithDepth { ref err, .. } => err.is_io(),
-            Error::Loop { .. } => false,
-            Error::Io(_) => true,
-            Error::Glob { .. } => false,
-            Error::UnrecognizedFileType(_) => false,
-            Error::InvalidDefinition => false,
-        }
-    }
-
-    /// Inspect the original [`std::io::Error`] if there is one.
-    ///
-    /// [`None`] is returned if the [`Error`] doesn't correspond to an
-    /// [`std::io::Error`]. This might happen, for example, when the error was
-    /// produced because a cycle was found in the directory tree while
-    /// following symbolic links.
-    ///
-    /// This method returns a borrowed value that is bound to the lifetime of the [`Error`]. To
-    /// obtain an owned value, the [`into_io_error`] can be used instead.
-    ///
-    /// > This is the original [`std::io::Error`] and is _not_ the same as
-    /// > [`impl From<Error> for std::io::Error`][impl] which contains
-    /// > additional context about the error.
-    ///
-    /// [`None`]: https://doc.rust-lang.org/stable/std/option/enum.Option.html#variant.None
-    /// [`std::io::Error`]: https://doc.rust-lang.org/stable/std/io/struct.Error.html
-    /// [`From`]: https://doc.rust-lang.org/stable/std/convert/trait.From.html
-    /// [`Error`]: struct.Error.html
-    /// [`into_io_error`]: struct.Error.html#method.into_io_error
-    /// [impl]: struct.Error.html#impl-From%3CError%3E
-    pub fn io_error(&self) -> Option<&std::io::Error> {
-        match *self {
-            Error::Partial(ref errs) => {
-                if errs.len() == 1 {
-                    errs[0].io_error()
-                } else {
-                    None
-                }
-            }
-            Error::WithLineNumber { ref err, .. } => err.io_error(),
-            Error::WithPath { ref err, .. } => err.io_error(),
-            Error::WithDepth { ref err, .. } => err.io_error(),
-            Error::Loop { .. } => None,
-            Error::Io(ref err) => Some(err),
-            Error::Glob { .. } => None,
-            Error::UnrecognizedFileType(_) => None,
-            Error::InvalidDefinition => None,
-        }
-    }
-
-    /// Similar to [`io_error`] except consumes self to convert to the original
-    /// [`std::io::Error`] if one exists.
-    ///
-    /// [`io_error`]: struct.Error.html#method.io_error
-    /// [`std::io::Error`]: https://doc.rust-lang.org/stable/std/io/struct.Error.html
-    pub fn into_io_error(self) -> Option<std::io::Error> {
-        match self {
-            Error::Partial(mut errs) => {
-                if errs.len() == 1 {
-                    errs.remove(0).into_io_error()
-                } else {
-                    None
-                }
-            }
-            Error::WithLineNumber { err, .. } => err.into_io_error(),
-            Error::WithPath { err, .. } => err.into_io_error(),
-            Error::WithDepth { err, .. } => err.into_io_error(),
-            Error::Loop { .. } => None,
-            Error::Io(err) => Some(err),
-            Error::Glob { .. } => None,
-            Error::UnrecognizedFileType(_) => None,
-            Error::InvalidDefinition => None,
-        }
-    }
-
-    /// Returns a depth associated with recursively walking a directory (if
-    /// this error was generated from a recursive directory iterator).
-    pub fn depth(&self) -> Option<usize> {
-        match *self {
-            Error::WithPath { ref err, .. } => err.depth(),
-            Error::WithDepth { depth, .. } => Some(depth),
-            _ => None,
-        }
-    }
-
-    /// Turn an error into a tagged error with the given file path.
-    fn with_path<P: AsRef<Path>>(self, path: P) -> Error {
-        Error::WithPath {
-            path: path.as_ref().to_path_buf(),
-            err: Box::new(self),
-        }
-    }
-
-    /// Turn an error into a tagged error with the given depth.
-    fn with_depth(self, depth: usize) -> Error {
-        Error::WithDepth { depth, err: Box::new(self) }
-    }
-
-    /// Turn an error into a tagged error with the given file path and line
-    /// number. If path is empty, then it is omitted from the error.
-    fn tagged<P: AsRef<Path>>(self, path: P, lineno: u64) -> Error {
-        let errline =
-            Error::WithLineNumber { line: lineno, err: Box::new(self) };
-        if path.as_ref().as_os_str().is_empty() {
-            return errline;
-        }
-        errline.with_path(path)
-    }
-
-    /// Build an error from a walkdir error.
-    fn from_walkdir(err: walkdir::Error) -> Error {
-        let depth = err.depth();
-        if let (Some(anc), Some(child)) = (err.loop_ancestor(), err.path()) {
-            return Error::WithDepth {
-                depth,
-                err: Box::new(Error::Loop {
-                    ancestor: anc.to_path_buf(),
-                    child: child.to_path_buf(),
-                }),
-            };
-        }
-        let path = err.path().map(|p| p.to_path_buf());
-        let mut ig_err = Error::WithDepth {
-            depth,
-            err: Box::new(Error::Io(std::io::Error::from(err))),
-        };
-        if let Some(path) = path {
-            ig_err = Error::WithPath { path, err: Box::new(ig_err) };
-        }
-        ig_err
-    }
-}
-
-impl std::error::Error for Error {
-    #[allow(deprecated)]
-    fn description(&self) -> &str {
-        match *self {
-            Error::Partial(_) => "partial error",
-            Error::WithLineNumber { ref err, .. } => err.description(),
-            Error::WithPath { ref err, .. } => err.description(),
-            Error::WithDepth { ref err, .. } => err.description(),
-            Error::Loop { .. } => "file system loop found",
-            Error::Io(ref err) => err.description(),
-            Error::Glob { ref err, .. } => err,
-            Error::UnrecognizedFileType(_) => "unrecognized file type",
-            Error::InvalidDefinition => "invalid definition",
-        }
-    }
-}
-
-impl std::fmt::Display for Error {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        match *self {
-            Error::Partial(ref errs) => {
-                let msgs: Vec<String> =
-                    errs.iter().map(|err| err.to_string()).collect();
-                write!(f, "{}", msgs.join("\n"))
-            }
-            Error::WithLineNumber { line, ref err } => {
-                write!(f, "line {}: {}", line, err)
-            }
-            Error::WithPath { ref path, ref err } => {
-                write!(f, "{}: {}", path.display(), err)
-            }
-            Error::WithDepth { ref err, .. } => err.fmt(f),
-            Error::Loop { ref ancestor, ref child } => write!(
-                f,
-                "File system loop found: \
-                           {} points to an ancestor {}",
-                child.display(),
-                ancestor.display()
-            ),
-            Error::Io(ref err) => err.fmt(f),
-            Error::Glob { glob: None, ref err } => write!(f, "{}", err),
-            Error::Glob { glob: Some(ref glob), ref err } => {
-                write!(f, "error parsing glob '{}': {}", glob, err)
-            }
-            Error::UnrecognizedFileType(ref ty) => {
-                write!(f, "unrecognized file type: {}", ty)
-            }
-            Error::InvalidDefinition => write!(
-                f,
-                "invalid definition (format is type:glob, e.g., \
-                           html:*.html)"
-            ),
-        }
-    }
-}
-
-impl From<std::io::Error> for Error {
-    fn from(err: std::io::Error) -> Error {
-        Error::Io(err)
-    }
-}
-
-#[derive(Debug, Default)]
-struct PartialErrorBuilder(Vec<Error>);
-
-impl PartialErrorBuilder {
-    fn push(&mut self, err: Error) {
-        self.0.push(err);
-    }
-
-    fn push_ignore_io(&mut self, err: Error) {
-        if !err.is_io() {
-            self.push(err);
-        }
-    }
-
-    fn maybe_push(&mut self, err: Option<Error>) {
-        if let Some(err) = err {
-            self.push(err);
-        }
-    }
-
-    fn maybe_push_ignore_io(&mut self, err: Option<Error>) {
-        if let Some(err) = err {
-            self.push_ignore_io(err);
-        }
-    }
-
-    fn into_error_option(mut self) -> Option<Error> {
-        if self.0.is_empty() {
-            None
-        } else if self.0.len() == 1 {
-            Some(self.0.pop().unwrap())
-        } else {
-            Some(Error::Partial(self.0))
-        }
-    }
-}
-
-/// The result of a glob match.
-///
-/// The type parameter `T` typically refers to a type that provides more
-/// information about a particular match. For example, it might identify
-/// the specific gitignore file and the specific glob pattern that caused
-/// the match.
-#[derive(Clone, Debug)]
-pub enum Match<T> {
-    /// The path didn't match any glob.
-    None,
-    /// The highest precedent glob matched indicates the path should be
-    /// ignored.
-    Ignore(T),
-    /// The highest precedent glob matched indicates the path should be
-    /// whitelisted.
-    Whitelist(T),
-}
-
-impl<T> Match<T> {
-    /// Returns true if the match result didn't match any globs.
-    pub fn is_none(&self) -> bool {
-        match *self {
-            Match::None => true,
-            Match::Ignore(_) | Match::Whitelist(_) => false,
-        }
-    }
-
-    /// Returns true if the match result implies the path should be ignored.
-    pub fn is_ignore(&self) -> bool {
-        match *self {
-            Match::Ignore(_) => true,
-            Match::None | Match::Whitelist(_) => false,
-        }
-    }
-
-    /// Returns true if the match result implies the path should be
-    /// whitelisted.
-    pub fn is_whitelist(&self) -> bool {
-        match *self {
-            Match::Whitelist(_) => true,
-            Match::None | Match::Ignore(_) => false,
-        }
-    }
-
-    /// Inverts the match so that `Ignore` becomes `Whitelist` and
-    /// `Whitelist` becomes `Ignore`. A non-match remains the same.
-    pub fn invert(self) -> Match<T> {
-        match self {
-            Match::None => Match::None,
-            Match::Ignore(t) => Match::Whitelist(t),
-            Match::Whitelist(t) => Match::Ignore(t),
-        }
-    }
-
-    /// Return the value inside this match if it exists.
-    pub fn inner(&self) -> Option<&T> {
-        match *self {
-            Match::None => None,
-            Match::Ignore(ref t) => Some(t),
-            Match::Whitelist(ref t) => Some(t),
-        }
-    }
-
-    /// Apply the given function to the value inside this match.
-    ///
-    /// If the match has no value, then return the match unchanged.
-    pub fn map<U, F: FnOnce(T) -> U>(self, f: F) -> Match<U> {
-        match self {
-            Match::None => Match::None,
-            Match::Ignore(t) => Match::Ignore(f(t)),
-            Match::Whitelist(t) => Match::Whitelist(f(t)),
-        }
-    }
-
-    /// Return the match if it is not none. Otherwise, return other.
-    pub fn or(self, other: Self) -> Self {
-        if self.is_none() { other } else { self }
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use std::{
-        env, fs,
-        path::{Path, PathBuf},
-    };
-
-    /// A convenient result type alias.
-    pub(crate) type Result<T> =
-        std::result::Result<T, Box<dyn std::error::Error + Send + Sync>>;
-
-    macro_rules! err {
-        ($($tt:tt)*) => {
-            Box::<dyn std::error::Error + Send + Sync>::from(format!($($tt)*))
-        }
-    }
-
-    /// A simple wrapper for creating a temporary directory that is
-    /// automatically deleted when it's dropped.
-    ///
-    /// We use this in lieu of tempfile because tempfile brings in too many
-    /// dependencies.
-    #[derive(Debug)]
-    pub struct TempDir(PathBuf);
-
-    impl Drop for TempDir {
-        fn drop(&mut self) {
-            fs::remove_dir_all(&self.0).unwrap();
-        }
-    }
-
-    impl TempDir {
-        /// Create a new empty temporary directory under the system's configured
-        /// temporary directory.
-        pub fn new() -> Result<TempDir> {
-            use std::sync::atomic::{AtomicUsize, Ordering};
-
-            static TRIES: usize = 100;
-            static COUNTER: AtomicUsize = AtomicUsize::new(0);
-
-            let tmpdir = env::temp_dir();
-            for _ in 0..TRIES {
-                let count = COUNTER.fetch_add(1, Ordering::Relaxed);
-                let path = tmpdir.join("rust-ignore").join(count.to_string());
-                if path.is_dir() {
-                    continue;
-                }
-                fs::create_dir_all(&path).map_err(|e| {
-                    err!("failed to create {}: {}", path.display(), e)
-                })?;
-                return Ok(TempDir(path));
-            }
-            Err(err!("failed to create temp dir after {} tries", TRIES))
-        }
-
-        /// Return the underlying path to this temporary directory.
-        pub fn path(&self) -> &Path {
-            &self.0
-        }
-    }
-}
diff --git a/crates/ignore/src/overrides.rs b/crates/ignore/src/overrides.rs
deleted file mode 100644
index 005cae8f2..000000000
--- a/crates/ignore/src/overrides.rs
+++ /dev/null
@@ -1,293 +0,0 @@
-/*!
-The overrides module provides a way to specify a set of override globs.
-
-This provides functionality similar to `--include` or `--exclude` in command
-line tools.
-*/
-
-use std::path::Path;
-
-use crate::{
-    Error, Match,
-    gitignore::{self, Gitignore, GitignoreBuilder},
-};
-
-/// Glob represents a single glob in an override matcher.
-///
-/// This is used to report information about the highest precedent glob
-/// that matched.
-///
-/// Note that not all matches necessarily correspond to a specific glob. For
-/// example, if there are one or more whitelist globs and a file path doesn't
-/// match any glob in the set, then the file path is considered to be ignored.
-///
-/// The lifetime `'a` refers to the lifetime of the matcher that produced
-/// this glob.
-#[derive(Clone, Debug)]
-#[allow(dead_code)]
-pub struct Glob<'a>(GlobInner<'a>);
-
-#[derive(Clone, Debug)]
-#[allow(dead_code)]
-enum GlobInner<'a> {
-    /// No glob matched, but the file path should still be ignored.
-    UnmatchedIgnore,
-    /// A glob matched.
-    Matched(&'a gitignore::Glob),
-}
-
-impl<'a> Glob<'a> {
-    fn unmatched() -> Glob<'a> {
-        Glob(GlobInner::UnmatchedIgnore)
-    }
-}
-
-/// Manages a set of overrides provided explicitly by the end user.
-#[derive(Clone, Debug)]
-pub struct Override(Gitignore);
-
-impl Override {
-    /// Returns an empty matcher that never matches any file path.
-    pub fn empty() -> Override {
-        Override(Gitignore::empty())
-    }
-
-    /// Returns the directory of this override set.
-    ///
-    /// All matches are done relative to this path.
-    pub fn path(&self) -> &Path {
-        self.0.path()
-    }
-
-    /// Returns true if and only if this matcher is empty.
-    ///
-    /// When a matcher is empty, it will never match any file path.
-    pub fn is_empty(&self) -> bool {
-        self.0.is_empty()
-    }
-
-    /// Returns the total number of ignore globs.
-    pub fn num_ignores(&self) -> u64 {
-        self.0.num_whitelists()
-    }
-
-    /// Returns the total number of whitelisted globs.
-    pub fn num_whitelists(&self) -> u64 {
-        self.0.num_ignores()
-    }
-
-    /// Returns whether the given file path matched a pattern in this override
-    /// matcher.
-    ///
-    /// `is_dir` should be true if the path refers to a directory and false
-    /// otherwise.
-    ///
-    /// If there are no overrides, then this always returns `Match::None`.
-    ///
-    /// If there is at least one whitelist override and `is_dir` is false, then
-    /// this never returns `Match::None`, since non-matches are interpreted as
-    /// ignored.
-    ///
-    /// The given path is matched to the globs relative to the path given
-    /// when building the override matcher. Specifically, before matching
-    /// `path`, its prefix (as determined by a common suffix of the directory
-    /// given) is stripped. If there is no common suffix/prefix overlap, then
-    /// `path` is assumed to reside in the same directory as the root path for
-    /// this set of overrides.
-    pub fn matched<'a, P: AsRef<Path>>(
-        &'a self,
-        path: P,
-        is_dir: bool,
-    ) -> Match<Glob<'a>> {
-        if self.is_empty() {
-            return Match::None;
-        }
-        let mat = self.0.matched(path, is_dir).invert();
-        if mat.is_none() && self.num_whitelists() > 0 && !is_dir {
-            return Match::Ignore(Glob::unmatched());
-        }
-        mat.map(move |giglob| Glob(GlobInner::Matched(giglob)))
-    }
-}
-
-/// Builds a matcher for a set of glob overrides.
-#[derive(Clone, Debug)]
-pub struct OverrideBuilder {
-    builder: GitignoreBuilder,
-}
-
-impl OverrideBuilder {
-    /// Create a new override builder.
-    ///
-    /// Matching is done relative to the directory path provided.
-    pub fn new<P: AsRef<Path>>(path: P) -> OverrideBuilder {
-        let mut builder = GitignoreBuilder::new(path);
-        builder.allow_unclosed_class(false);
-        OverrideBuilder { builder }
-    }
-
-    /// Builds a new override matcher from the globs added so far.
-    ///
-    /// Once a matcher is built, no new globs can be added to it.
-    pub fn build(&self) -> Result<Override, Error> {
-        Ok(Override(self.builder.build()?))
-    }
-
-    /// Add a glob to the set of overrides.
-    ///
-    /// Globs provided here have precisely the same semantics as a single
-    /// line in a `gitignore` file, where the meaning of `!` is inverted:
-    /// namely, `!` at the beginning of a glob will ignore a file. Without `!`,
-    /// all matches of the glob provided are treated as whitelist matches.
-    pub fn add(&mut self, glob: &str) -> Result<&mut OverrideBuilder, Error> {
-        self.builder.add_line(None, glob)?;
-        Ok(self)
-    }
-
-    /// Toggle whether the globs should be matched case insensitively or not.
-    ///
-    /// When this option is changed, only globs added after the change will be
-    /// affected.
-    ///
-    /// This is disabled by default.
-    pub fn case_insensitive(
-        &mut self,
-        yes: bool,
-    ) -> Result<&mut OverrideBuilder, Error> {
-        // TODO: This should not return a `Result`. Fix this in the next semver
-        // release.
-        self.builder.case_insensitive(yes)?;
-        Ok(self)
-    }
-
-    /// Toggle whether unclosed character classes are allowed. When allowed,
-    /// a `[` without a matching `]` is treated literally instead of resulting
-    /// in a parse error.
-    ///
-    /// For example, if this is set then the glob `[abc` will be treated as the
-    /// literal string `[abc` instead of returning an error.
-    ///
-    /// By default, this is false. Generally speaking, enabling this leads to
-    /// worse failure modes since the glob parser becomes more permissive. You
-    /// might want to enable this when compatibility (e.g., with POSIX glob
-    /// implementations) is more important than good error messages.
-    ///
-    /// This default is different from the default for [`Gitignore`]. Namely,
-    /// [`Gitignore`] is intended to match git's behavior as-is. But this
-    /// abstraction for "override" globs does not necessarily conform to any
-    /// other known specification and instead prioritizes better error
-    /// messages.
-    pub fn allow_unclosed_class(&mut self, yes: bool) -> &mut OverrideBuilder {
-        self.builder.allow_unclosed_class(yes);
-        self
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::{Override, OverrideBuilder};
-
-    const ROOT: &'static str = "/home/andrew/foo";
-
-    fn ov(globs: &[&str]) -> Override {
-        let mut builder = OverrideBuilder::new(ROOT);
-        for glob in globs {
-            builder.add(glob).unwrap();
-        }
-        builder.build().unwrap()
-    }
-
-    #[test]
-    fn empty() {
-        let ov = ov(&[]);
-        assert!(ov.matched("a.foo", false).is_none());
-        assert!(ov.matched("a", false).is_none());
-        assert!(ov.matched("", false).is_none());
-    }
-
-    #[test]
-    fn simple() {
-        let ov = ov(&["*.foo", "!*.bar"]);
-        assert!(ov.matched("a.foo", false).is_whitelist());
-        assert!(ov.matched("a.foo", true).is_whitelist());
-        assert!(ov.matched("a.rs", false).is_ignore());
-        assert!(ov.matched("a.rs", true).is_none());
-        assert!(ov.matched("a.bar", false).is_ignore());
-        assert!(ov.matched("a.bar", true).is_ignore());
-    }
-
-    #[test]
-    fn only_ignores() {
-        let ov = ov(&["!*.bar"]);
-        assert!(ov.matched("a.rs", false).is_none());
-        assert!(ov.matched("a.rs", true).is_none());
-        assert!(ov.matched("a.bar", false).is_ignore());
-        assert!(ov.matched("a.bar", true).is_ignore());
-    }
-
-    #[test]
-    fn precedence() {
-        let ov = ov(&["*.foo", "!*.bar.foo"]);
-        assert!(ov.matched("a.foo", false).is_whitelist());
-        assert!(ov.matched("a.baz", false).is_ignore());
-        assert!(ov.matched("a.bar.foo", false).is_ignore());
-    }
-
-    #[test]
-    fn gitignore() {
-        let ov = ov(&["/foo", "bar/*.rs", "baz/**"]);
-        assert!(ov.matched("bar/lib.rs", false).is_whitelist());
-        assert!(ov.matched("bar/wat/lib.rs", false).is_ignore());
-        assert!(ov.matched("wat/bar/lib.rs", false).is_ignore());
-        assert!(ov.matched("foo", false).is_whitelist());
-        assert!(ov.matched("wat/foo", false).is_ignore());
-        assert!(ov.matched("baz", false).is_ignore());
-        assert!(ov.matched("baz/a", false).is_whitelist());
-        assert!(ov.matched("baz/a/b", false).is_whitelist());
-    }
-
-    #[test]
-    fn allow_directories() {
-        // This tests that directories are NOT ignored when they are unmatched.
-        let ov = ov(&["*.rs"]);
-        assert!(ov.matched("foo.rs", false).is_whitelist());
-        assert!(ov.matched("foo.c", false).is_ignore());
-        assert!(ov.matched("foo", false).is_ignore());
-        assert!(ov.matched("foo", true).is_none());
-        assert!(ov.matched("src/foo.rs", false).is_whitelist());
-        assert!(ov.matched("src/foo.c", false).is_ignore());
-        assert!(ov.matched("src/foo", false).is_ignore());
-        assert!(ov.matched("src/foo", true).is_none());
-    }
-
-    #[test]
-    fn absolute_path() {
-        let ov = ov(&["!/bar"]);
-        assert!(ov.matched("./foo/bar", false).is_none());
-    }
-
-    #[test]
-    fn case_insensitive() {
-        let ov = OverrideBuilder::new(ROOT)
-            .case_insensitive(true)
-            .unwrap()
-            .add("*.html")
-            .unwrap()
-            .build()
-            .unwrap();
-        assert!(ov.matched("foo.html", false).is_whitelist());
-        assert!(ov.matched("foo.HTML", false).is_whitelist());
-        assert!(ov.matched("foo.htm", false).is_ignore());
-        assert!(ov.matched("foo.HTM", false).is_ignore());
-    }
-
-    #[test]
-    fn default_case_sensitive() {
-        let ov =
-            OverrideBuilder::new(ROOT).add("*.html").unwrap().build().unwrap();
-        assert!(ov.matched("foo.html", false).is_whitelist());
-        assert!(ov.matched("foo.HTML", false).is_ignore());
-        assert!(ov.matched("foo.htm", false).is_ignore());
-        assert!(ov.matched("foo.HTM", false).is_ignore());
-    }
-}
diff --git a/crates/ignore/src/pathutil.rs b/crates/ignore/src/pathutil.rs
deleted file mode 100644
index 5de8c106c..000000000
--- a/crates/ignore/src/pathutil.rs
+++ /dev/null
@@ -1,171 +0,0 @@
-use std::{ffi::OsStr, path::Path};
-
-use crate::walk::DirEntry;
-
-/// Returns true if and only if this path is considered to be hidden.
-///
-/// # Platform behavior
-///
-/// ## Windows
-///
-/// This returns true if one of the following is true:
-///
-/// * The base name of the path starts with a `.`.
-/// * The file attributes have the `HIDDEN` property set.
-///
-/// ## All other platforms
-///
-/// This only returns true if the base name of the path starts with a `.`.
-pub(crate) fn is_hidden_path(dent: &Path) -> bool {
-    #[cfg(not(windows))]
-    fn imp(path: &Path) -> bool {
-        is_hidden_path_only(path)
-    }
-
-    #[cfg(windows)]
-    fn imp(path: &Path) -> bool {
-        use std::os::windows::fs::MetadataExt;
-        use winapi_util::file;
-
-        if let Ok(md) = path.metadata() {
-            if file::is_hidden(md.file_attributes() as u64) {
-                return true;
-            }
-        }
-        is_hidden_path_only(path)
-    }
-
-    imp(dent)
-}
-
-/// Returns true if and only if this directory entry is considered to be
-/// hidden.
-///
-/// # Platform behavior
-///
-/// ## Windows
-///
-/// This returns true if one of the following is true:
-///
-/// * The base name of the path starts with a `.`.
-/// * The file attributes have the `HIDDEN` property set.
-///
-/// ## All other platforms
-///
-/// This only returns true if the base name of the path starts with a `.`.
-pub(crate) fn is_hidden_entry(dent: &DirEntry) -> bool {
-    #[cfg(not(windows))]
-    fn imp(dent: &DirEntry) -> bool {
-        is_hidden_path_only(dent.path())
-    }
-
-    #[cfg(windows)]
-    fn imp(dent: &DirEntry) -> bool {
-        use std::os::windows::fs::MetadataExt;
-        use winapi_util::file;
-
-        // This looks like we're doing an extra stat call, but on Windows, the
-        // directory traverser reuses the metadata retrieved from each directory
-        // entry and stores it on the DirEntry itself. So this is "free."
-        if let Ok(md) = dent.metadata() {
-            if file::is_hidden(md.file_attributes() as u64) {
-                return true;
-            }
-        }
-        is_hidden_path_only(dent.path())
-    }
-
-    imp(dent)
-}
-
-/// Returns true if and only if this path is considered to be hidden from only
-/// the path itself.
-///
-/// This has the same behavior on all platforms.
-fn is_hidden_path_only(path: &Path) -> bool {
-    if let Some(name) = file_name(path) {
-        name.as_encoded_bytes().starts_with(b".")
-    } else {
-        false
-    }
-}
-
-/// Strip `prefix` from the `path` and return the remainder.
-///
-/// If `path` doesn't have a prefix `prefix`, then return `None`.
-pub(crate) fn strip_prefix<'a, P: AsRef<Path> + ?Sized>(
-    prefix: &'a P,
-    path: &'a Path,
-) -> Option<&'a Path> {
-    #[cfg(unix)]
-    fn imp<'a>(prefix: &'a Path, path: &'a Path) -> Option<&'a Path> {
-        use std::os::unix::ffi::OsStrExt;
-
-        let prefix = prefix.as_os_str().as_bytes();
-        let path = path.as_os_str().as_bytes();
-        if prefix.len() > path.len() || prefix != &path[0..prefix.len()] {
-            None
-        } else {
-            Some(&Path::new(OsStr::from_bytes(&path[prefix.len()..])))
-        }
-    }
-
-    #[cfg(not(unix))]
-    fn imp<'a>(prefix: &'a Path, path: &'a Path) -> Option<&'a Path> {
-        path.strip_prefix(prefix).ok()
-    }
-
-    imp(prefix.as_ref(), path)
-}
-
-/// Returns true if this file path is just a file name. i.e., Its parent is
-/// the empty string.
-pub(crate) fn is_file_name<P: AsRef<Path>>(path: P) -> bool {
-    #[cfg(unix)]
-    {
-        memchr::memchr(b'/', path.as_ref().as_os_str().as_encoded_bytes())
-            .is_none()
-    }
-    #[cfg(not(unix))]
-    {
-        path.as_ref()
-            .parent()
-            .map(|p| p.as_os_str().is_empty())
-            .unwrap_or(false)
-    }
-}
-
-/// The final component of the path, if it is a normal file.
-///
-/// If the path terminates in `.`, `..`, or consists solely of a root of
-/// prefix, this will return `None`.
-pub(crate) fn file_name<'a, P: AsRef<Path> + ?Sized>(
-    path: &'a P,
-) -> Option<&'a OsStr> {
-    #[cfg(unix)]
-    fn imp(path: &Path) -> Option<&OsStr> {
-        use std::os::unix::ffi::OsStrExt;
-
-        use memchr::memrchr;
-
-        let path = path.as_os_str().as_bytes();
-        if path.is_empty() {
-            return None;
-        } else if path.len() == 1 && path[0] == b'.' {
-            return None;
-        } else if path.last() == Some(&b'.') {
-            return None;
-        } else if path.len() >= 2 && &path[path.len() - 2..] == &b".."[..] {
-            return None;
-        }
-        let last_slash = memrchr(b'/', path).map(|i| i + 1).unwrap_or(0);
-        Some(OsStr::from_bytes(&path[last_slash..]))
-    }
-
-    #[cfg(not(unix))]
-    fn imp(path: &Path) -> Option<&OsStr> {
-        path.file_name()
-    }
-
-    imp(path.as_ref())
-}
diff --git a/crates/ignore/src/types.rs b/crates/ignore/src/types.rs
deleted file mode 100644
index 313cf5c0e..000000000
--- a/crates/ignore/src/types.rs
+++ /dev/null
@@ -1,588 +0,0 @@
-/*!
-The types module provides a way of associating globs on file names to file
-types.
-
-This can be used to match specific types of files. For example, among
-the default file types provided, the Rust file type is defined to be `*.rs`
-with name `rust`. Similarly, the C file type is defined to be `*.{c,h}` with
-name `c`.
-
-Note that the set of default types may change over time.
-
-# Example
-
-This shows how to create and use a simple file type matcher using the default
-file types defined in this crate.
-
-```
-use ignore::types::TypesBuilder;
-
-let mut builder = TypesBuilder::new();
-builder.add_defaults();
-builder.select("rust");
-let matcher = builder.build().unwrap();
-
-assert!(matcher.matched("foo.rs", false).is_whitelist());
-assert!(matcher.matched("foo.c", false).is_ignore());
-```
-
-# Example: negation
-
-This is like the previous example, but shows how negating a file type works.
-That is, this will let us match file paths that *don't* correspond to a
-particular file type.
-
-```
-use ignore::types::TypesBuilder;
-
-let mut builder = TypesBuilder::new();
-builder.add_defaults();
-builder.negate("c");
-let matcher = builder.build().unwrap();
-
-assert!(matcher.matched("foo.rs", false).is_none());
-assert!(matcher.matched("foo.c", false).is_ignore());
-```
-
-# Example: custom file type definitions
-
-This shows how to extend this library default file type definitions with
-your own.
-
-```
-use ignore::types::TypesBuilder;
-
-let mut builder = TypesBuilder::new();
-builder.add_defaults();
-builder.add("foo", "*.foo");
-// Another way of adding a file type definition.
-// This is useful when accepting input from an end user.
-builder.add_def("bar:*.bar");
-// Note: we only select `foo`, not `bar`.
-builder.select("foo");
-let matcher = builder.build().unwrap();
-
-assert!(matcher.matched("x.foo", false).is_whitelist());
-// This is ignored because we only selected the `foo` file type.
-assert!(matcher.matched("x.bar", false).is_ignore());
-```
-
-We can also add file type definitions based on other definitions.
-
-```
-use ignore::types::TypesBuilder;
-
-let mut builder = TypesBuilder::new();
-builder.add_defaults();
-builder.add("foo", "*.foo");
-builder.add_def("bar:include:foo,cpp");
-builder.select("bar");
-let matcher = builder.build().unwrap();
-
-assert!(matcher.matched("x.foo", false).is_whitelist());
-assert!(matcher.matched("y.cpp", false).is_whitelist());
-```
-*/
-
-use std::{collections::HashMap, path::Path, sync::Arc};
-
-use {
-    globset::{GlobBuilder, GlobSet, GlobSetBuilder},
-    regex_automata::util::pool::Pool,
-};
-
-use crate::{Error, Match, default_types::DEFAULT_TYPES, pathutil::file_name};
-
-/// Glob represents a single glob in a set of file type definitions.
-///
-/// There may be more than one glob for a particular file type.
-///
-/// This is used to report information about the highest precedent glob
-/// that matched.
-///
-/// Note that not all matches necessarily correspond to a specific glob.
-/// For example, if there are one or more selections and a file path doesn't
-/// match any of those selections, then the file path is considered to be
-/// ignored.
-///
-/// The lifetime `'a` refers to the lifetime of the underlying file type
-/// definition, which corresponds to the lifetime of the file type matcher.
-#[derive(Clone, Debug)]
-pub struct Glob<'a>(GlobInner<'a>);
-
-#[derive(Clone, Debug)]
-enum GlobInner<'a> {
-    /// No glob matched, but the file path should still be ignored.
-    UnmatchedIgnore,
-    /// A glob matched.
-    Matched {
-        /// The file type definition which provided the glob.
-        def: &'a FileTypeDef,
-    },
-}
-
-impl<'a> Glob<'a> {
-    fn unmatched() -> Glob<'a> {
-        Glob(GlobInner::UnmatchedIgnore)
-    }
-
-    /// Return the file type definition that matched, if one exists. A file type
-    /// definition always exists when a specific definition matches a file
-    /// path.
-    pub fn file_type_def(&self) -> Option<&FileTypeDef> {
-        match self {
-            Glob(GlobInner::UnmatchedIgnore) => None,
-            Glob(GlobInner::Matched { def, .. }) => Some(def),
-        }
-    }
-}
-
-/// A single file type definition.
-///
-/// File type definitions can be retrieved in aggregate from a file type
-/// matcher. File type definitions are also reported when its responsible
-/// for a match.
-#[derive(Clone, Debug, Eq, PartialEq)]
-pub struct FileTypeDef {
-    name: String,
-    globs: Vec<String>,
-}
-
-impl FileTypeDef {
-    /// Return the name of this file type.
-    pub fn name(&self) -> &str {
-        &self.name
-    }
-
-    /// Return the globs used to recognize this file type.
-    pub fn globs(&self) -> &[String] {
-        &self.globs
-    }
-}
-
-/// Types is a file type matcher.
-#[derive(Clone, Debug)]
-pub struct Types {
-    /// All of the file type definitions, sorted lexicographically by name.
-    defs: Vec<FileTypeDef>,
-    /// All of the selections made by the user.
-    selections: Vec<Selection<FileTypeDef>>,
-    /// Whether there is at least one Selection::Select in our selections.
-    /// When this is true, a Match::None is converted to Match::Ignore.
-    has_selected: bool,
-    /// A mapping from glob index in the set to two indices. The first is an
-    /// index into `selections` and the second is an index into the
-    /// corresponding file type definition's list of globs.
-    glob_to_selection: Vec<(usize, usize)>,
-    /// The set of all glob selections, used for actual matching.
-    set: GlobSet,
-    /// Temporary storage for globs that match.
-    matches: Arc<Pool<Vec<usize>>>,
-}
-
-/// Indicates the type of a selection for a particular file type.
-#[derive(Clone, Debug)]
-enum Selection<T> {
-    Select(String, T),
-    Negate(String, T),
-}
-
-impl<T> Selection<T> {
-    fn is_negated(&self) -> bool {
-        match *self {
-            Selection::Select(..) => false,
-            Selection::Negate(..) => true,
-        }
-    }
-
-    fn name(&self) -> &str {
-        match *self {
-            Selection::Select(ref name, _) => name,
-            Selection::Negate(ref name, _) => name,
-        }
-    }
-
-    fn map<U, F: FnOnce(T) -> U>(self, f: F) -> Selection<U> {
-        match self {
-            Selection::Select(name, inner) => {
-                Selection::Select(name, f(inner))
-            }
-            Selection::Negate(name, inner) => {
-                Selection::Negate(name, f(inner))
-            }
-        }
-    }
-
-    fn inner(&self) -> &T {
-        match *self {
-            Selection::Select(_, ref inner) => inner,
-            Selection::Negate(_, ref inner) => inner,
-        }
-    }
-}
-
-impl Types {
-    /// Creates a new file type matcher that never matches any path and
-    /// contains no file type definitions.
-    pub fn empty() -> Types {
-        Types {
-            defs: vec![],
-            selections: vec![],
-            has_selected: false,
-            glob_to_selection: vec![],
-            set: GlobSetBuilder::new().build().unwrap(),
-            matches: Arc::new(Pool::with_available_parallelism_capacity(
-                || vec![],
-            )),
-        }
-    }
-
-    /// Returns true if and only if this matcher has zero selections.
-    pub fn is_empty(&self) -> bool {
-        self.selections.is_empty()
-    }
-
-    /// Returns the number of selections used in this matcher.
-    pub fn len(&self) -> usize {
-        self.selections.len()
-    }
-
-    /// Return the set of current file type definitions.
-    ///
-    /// Definitions and globs are sorted.
-    pub fn definitions(&self) -> &[FileTypeDef] {
-        &self.defs
-    }
-
-    /// Returns a match for the given path against this file type matcher.
-    ///
-    /// The path is considered whitelisted if it matches a selected file type.
-    /// The path is considered ignored if it matches a negated file type.
-    /// If at least one file type is selected and `path` doesn't match, then
-    /// the path is also considered ignored.
-    pub fn matched<'a, P: AsRef<Path>>(
-        &'a self,
-        path: P,
-        is_dir: bool,
-    ) -> Match<Glob<'a>> {
-        // File types don't apply to directories, and we can't do anything
-        // if our glob set is empty.
-        if is_dir || self.set.is_empty() {
-            return Match::None;
-        }
-        // We only want to match against the file name, so extract it.
-        // If one doesn't exist, then we can't match it.
-        let name = match file_name(path.as_ref()) {
-            Some(name) => name,
-            None if self.has_selected => {
-                return Match::Ignore(Glob::unmatched());
-            }
-            None => {
-                return Match::None;
-            }
-        };
-        let mut matches = self.matches.get();
-        self.set.matches_into(name, &mut *matches);
-        // The highest precedent match is the last one.
-        if let Some(&i) = matches.last() {
-            let (isel, _) = self.glob_to_selection[i];
-            let sel = &self.selections[isel];
-            let glob = Glob(GlobInner::Matched { def: sel.inner() });
-            return if sel.is_negated() {
-                Match::Ignore(glob)
-            } else {
-                Match::Whitelist(glob)
-            };
-        }
-        if self.has_selected {
-            Match::Ignore(Glob::unmatched())
-        } else {
-            Match::None
-        }
-    }
-}
-
-/// TypesBuilder builds a type matcher from a set of file type definitions and
-/// a set of file type selections.
-pub struct TypesBuilder {
-    types: HashMap<String, FileTypeDef>,
-    selections: Vec<Selection<()>>,
-}
-
-impl TypesBuilder {
-    /// Create a new builder for a file type matcher.
-    ///
-    /// The builder contains *no* type definitions to start with. A set
-    /// of default type definitions can be added with `add_defaults`, and
-    /// additional type definitions can be added with `select` and `negate`.
-    pub fn new() -> TypesBuilder {
-        TypesBuilder { types: HashMap::new(), selections: vec![] }
-    }
-
-    /// Build the current set of file type definitions *and* selections into
-    /// a file type matcher.
-    pub fn build(&self) -> Result<Types, Error> {
-        let defs = self.definitions();
-        let has_selected = self.selections.iter().any(|s| !s.is_negated());
-
-        let mut selections = vec![];
-        let mut glob_to_selection = vec![];
-        let mut build_set = GlobSetBuilder::new();
-        for (isel, selection) in self.selections.iter().enumerate() {
-            let def = match self.types.get(selection.name()) {
-                Some(def) => def.clone(),
-                None => {
-                    let name = selection.name().to_string();
-                    return Err(Error::UnrecognizedFileType(name));
-                }
-            };
-            for (iglob, glob) in def.globs.iter().enumerate() {
-                build_set.add(
-                    GlobBuilder::new(glob)
-                        .literal_separator(true)
-                        .build()
-                        .map_err(|err| Error::Glob {
-                            glob: Some(glob.to_string()),
-                            err: err.kind().to_string(),
-                        })?,
-                );
-                glob_to_selection.push((isel, iglob));
-            }
-            selections.push(selection.clone().map(move |_| def));
-        }
-        let set = build_set
-            .build()
-            .map_err(|err| Error::Glob { glob: None, err: err.to_string() })?;
-        Ok(Types {
-            defs,
-            selections,
-            has_selected,
-            glob_to_selection,
-            set,
-            matches: Arc::new(Pool::with_available_parallelism_capacity(
-                || vec![],
-            )),
-        })
-    }
-
-    /// Return the set of current file type definitions.
-    ///
-    /// Definitions and globs are sorted.
-    pub fn definitions(&self) -> Vec<FileTypeDef> {
-        let mut defs = vec![];
-        for def in self.types.values() {
-            let mut def = def.clone();
-            def.globs.sort();
-            defs.push(def);
-        }
-        defs.sort_by(|def1, def2| def1.name().cmp(def2.name()));
-        defs
-    }
-
-    /// Select the file type given by `name`.
-    ///
-    /// If `name` is `all`, then all file types currently defined are selected.
-    pub fn select(&mut self, name: &str) -> &mut TypesBuilder {
-        if name == "all" {
-            for name in self.types.keys() {
-                self.selections.push(Selection::Select(name.to_string(), ()));
-            }
-        } else {
-            self.selections.push(Selection::Select(name.to_string(), ()));
-        }
-        self
-    }
-
-    /// Ignore the file type given by `name`.
-    ///
-    /// If `name` is `all`, then all file types currently defined are negated.
-    pub fn negate(&mut self, name: &str) -> &mut TypesBuilder {
-        if name == "all" {
-            for name in self.types.keys() {
-                self.selections.push(Selection::Negate(name.to_string(), ()));
-            }
-        } else {
-            self.selections.push(Selection::Negate(name.to_string(), ()));
-        }
-        self
-    }
-
-    /// Clear any file type definitions for the type name given.
-    pub fn clear(&mut self, name: &str) -> &mut TypesBuilder {
-        self.types.remove(name);
-        self
-    }
-
-    /// Add a new file type definition. `name` can be arbitrary and `pat`
-    /// should be a glob recognizing file paths belonging to the `name` type.
-    ///
-    /// If `name` is `all` or otherwise contains any character that is not a
-    /// Unicode letter or number, then an error is returned.
-    pub fn add(&mut self, name: &str, glob: &str) -> Result<(), Error> {
-        if name == "all" || !name.chars().all(|c| c.is_alphanumeric()) {
-            return Err(Error::InvalidDefinition);
-        }
-        let (key, glob) = (name.to_string(), glob.to_string());
-        self.types
-            .entry(key)
-            .or_insert_with(|| FileTypeDef {
-                name: name.to_string(),
-                globs: vec![],
-            })
-            .globs
-            .push(glob);
-        Ok(())
-    }
-
-    /// Add a new file type definition specified in string form. There are two
-    /// valid formats:
-    /// 1. `{name}:{glob}`.  This defines a 'root' definition that associates the
-    ///     given name with the given glob.
-    /// 2. `{name}:include:{comma-separated list of already defined names}.
-    ///     This defines an 'include' definition that associates the given name
-    ///     with the definitions of the given existing types.
-    /// Names may not include any characters that are not
-    /// Unicode letters or numbers.
-    pub fn add_def(&mut self, def: &str) -> Result<(), Error> {
-        let parts: Vec<&str> = def.split(':').collect();
-        match parts.len() {
-            2 => {
-                let name = parts[0];
-                let glob = parts[1];
-                if name.is_empty() || glob.is_empty() {
-                    return Err(Error::InvalidDefinition);
-                }
-                self.add(name, glob)
-            }
-            3 => {
-                let name = parts[0];
-                let types_string = parts[2];
-                if name.is_empty()
-                    || parts[1] != "include"
-                    || types_string.is_empty()
-                {
-                    return Err(Error::InvalidDefinition);
-                }
-                let types = types_string.split(',');
-                // Check ahead of time to ensure that all types specified are
-                // present and fail fast if not.
-                if types.clone().any(|t| !self.types.contains_key(t)) {
-                    return Err(Error::InvalidDefinition);
-                }
-                for type_name in types {
-                    let globs =
-                        self.types.get(type_name).unwrap().globs.clone();
-                    for glob in globs {
-                        self.add(name, &glob)?;
-                    }
-                }
-                Ok(())
-            }
-            _ => Err(Error::InvalidDefinition),
-        }
-    }
-
-    /// Add a set of default file type definitions.
-    pub fn add_defaults(&mut self) -> &mut TypesBuilder {
-        static MSG: &'static str = "adding a default type should never fail";
-        for &(names, exts) in DEFAULT_TYPES {
-            for name in names {
-                for ext in exts {
-                    self.add(name, ext).expect(MSG);
-                }
-            }
-        }
-        self
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::TypesBuilder;
-
-    macro_rules! matched {
-        ($name:ident, $types:expr, $sel:expr, $selnot:expr,
-         $path:expr) => {
-            matched!($name, $types, $sel, $selnot, $path, true);
-        };
-        (not, $name:ident, $types:expr, $sel:expr, $selnot:expr,
-         $path:expr) => {
-            matched!($name, $types, $sel, $selnot, $path, false);
-        };
-        ($name:ident, $types:expr, $sel:expr, $selnot:expr,
-         $path:expr, $matched:expr) => {
-            #[test]
-            fn $name() {
-                let mut btypes = TypesBuilder::new();
-                for tydef in $types {
-                    btypes.add_def(tydef).unwrap();
-                }
-                for sel in $sel {
-                    btypes.select(sel);
-                }
-                for selnot in $selnot {
-                    btypes.negate(selnot);
-                }
-                let types = btypes.build().unwrap();
-                let mat = types.matched($path, false);
-                assert_eq!($matched, !mat.is_ignore());
-            }
-        };
-    }
-
-    fn types() -> Vec<&'static str> {
-        vec![
-            "html:*.html",
-            "html:*.htm",
-            "rust:*.rs",
-            "js:*.js",
-            "py:*.py",
-            "python:*.py",
-            "foo:*.{rs,foo}",
-            "combo:include:html,rust",
-        ]
-    }
-
-    matched!(match1, types(), vec!["rust"], vec![], "lib.rs");
-    matched!(match2, types(), vec!["html"], vec![], "index.html");
-    matched!(match3, types(), vec!["html"], vec![], "index.htm");
-    matched!(match4, types(), vec!["html", "rust"], vec![], "main.rs");
-    matched!(match5, types(), vec![], vec![], "index.html");
-    matched!(match6, types(), vec![], vec!["rust"], "index.html");
-    matched!(match7, types(), vec!["foo"], vec!["rust"], "main.foo");
-    matched!(match8, types(), vec!["combo"], vec![], "index.html");
-    matched!(match9, types(), vec!["combo"], vec![], "lib.rs");
-    matched!(match10, types(), vec!["py"], vec![], "main.py");
-    matched!(match11, types(), vec!["python"], vec![], "main.py");
-
-    matched!(not, matchnot1, types(), vec!["rust"], vec![], "index.html");
-    matched!(not, matchnot2, types(), vec![], vec!["rust"], "main.rs");
-    matched!(not, matchnot3, types(), vec!["foo"], vec!["rust"], "main.rs");
-    matched!(not, matchnot4, types(), vec!["rust"], vec!["foo"], "main.rs");
-    matched!(not, matchnot5, types(), vec!["rust"], vec!["foo"], "main.foo");
-    matched!(not, matchnot6, types(), vec!["combo"], vec![], "leftpad.js");
-    matched!(not, matchnot7, types(), vec!["py"], vec![], "index.html");
-    matched!(not, matchnot8, types(), vec!["python"], vec![], "doc.md");
-
-    #[test]
-    fn test_invalid_defs() {
-        let mut btypes = TypesBuilder::new();
-        for tydef in types() {
-            btypes.add_def(tydef).unwrap();
-        }
-        // Preserve the original definitions for later comparison.
-        let original_defs = btypes.definitions();
-        let bad_defs = vec![
-            // Reference to type that does not exist
-            "combo:include:html,qwerty",
-            // Bad format
-            "combo:foobar:html,rust",
-            "",
-        ];
-        for def in bad_defs {
-            assert!(btypes.add_def(def).is_err());
-            // Ensure that nothing changed, even if some of the includes were valid.
-            assert_eq!(btypes.definitions(), original_defs);
-        }
-    }
-}
diff --git a/crates/ignore/src/walk.rs b/crates/ignore/src/walk.rs
deleted file mode 100644
index 2dff78852..000000000
--- a/crates/ignore/src/walk.rs
+++ /dev/null
@@ -1,2757 +0,0 @@
-use std::{
-    cmp::Ordering,
-    ffi::OsStr,
-    fs::{self, FileType, Metadata},
-    io,
-    path::{Path, PathBuf},
-    sync::atomic::{AtomicBool, AtomicUsize, Ordering as AtomicOrdering},
-    sync::{Arc, OnceLock},
-};
-
-use {
-    crossbeam_deque::{Stealer, Worker as Deque},
-    same_file::Handle,
-    walkdir::WalkDir,
-};
-
-use crate::{
-    Error, PartialErrorBuilder,
-    dir::{Ignore, IgnoreBuilder},
-    // CHANGED: Also import `Gitignore` for `WalkBuilder::add_gitignore`.
-    gitignore::{Gitignore, GitignoreBuilder},
-    incremental::{IncrementalIgnore, IncrementalIgnoreOptions},
-    overrides::Override,
-    types::Types,
-};
-
-/// A directory entry with a possible error attached.
-///
-/// The error typically refers to a problem parsing ignore files in a
-/// particular directory.
-#[derive(Clone, Debug)]
-pub struct DirEntry {
-    dent: DirEntryInner,
-    err: Option<Error>,
-}
-
-impl DirEntry {
-    /// The full path that this entry represents.
-    pub fn path(&self) -> &Path {
-        self.dent.path()
-    }
-
-    /// The full path that this entry represents.
-    /// Analogous to [`DirEntry::path`], but moves ownership of the path.
-    pub fn into_path(self) -> PathBuf {
-        self.dent.into_path()
-    }
-
-    /// Whether this entry corresponds to a symbolic link or not.
-    pub fn path_is_symlink(&self) -> bool {
-        self.dent.path_is_symlink()
-    }
-
-    /// Returns true if and only if this entry corresponds to stdin.
-    ///
-    /// i.e., The entry has depth 0 and its file name is `-`.
-    pub fn is_stdin(&self) -> bool {
-        self.dent.is_stdin()
-    }
-
-    /// Return the metadata for the file that this entry points to.
-    pub fn metadata(&self) -> Result<Metadata, Error> {
-        self.dent.metadata()
-    }
-
-    /// Return the file type for the file that this entry points to.
-    ///
-    /// This entry doesn't have a file type if it corresponds to stdin.
-    pub fn file_type(&self) -> Option<FileType> {
-        self.dent.file_type()
-    }
-
-    /// Return the file name of this entry.
-    ///
-    /// If this entry has no file name (e.g., `/`), then the full path is
-    /// returned.
-    pub fn file_name(&self) -> &OsStr {
-        self.dent.file_name()
-    }
-
-    /// Returns the depth at which this entry was created relative to the root.
-    pub fn depth(&self) -> usize {
-        self.dent.depth()
-    }
-
-    /// Returns the underlying inode number if one exists.
-    ///
-    /// If this entry doesn't have an inode number, then `None` is returned.
-    #[cfg(unix)]
-    pub fn ino(&self) -> Option<u64> {
-        self.dent.ino()
-    }
-
-    /// Returns an error, if one exists, associated with processing this entry.
-    ///
-    /// An example of an error is one that occurred while parsing an ignore
-    /// file. Errors related to traversing a directory tree itself are reported
-    /// as part of yielding the directory entry, and not with this method.
-    pub fn error(&self) -> Option<&Error> {
-        self.err.as_ref()
-    }
-
-    /// Returns true if and only if this entry points to a directory.
-    pub(crate) fn is_dir(&self) -> bool {
-        self.dent.is_dir()
-    }
-
-    fn new_stdin() -> DirEntry {
-        DirEntry { dent: DirEntryInner::Stdin, err: None }
-    }
-
-    fn new_walkdir(dent: walkdir::DirEntry, err: Option<Error>) -> DirEntry {
-        DirEntry { dent: DirEntryInner::Walkdir(dent), err }
-    }
-
-    fn new_raw(dent: DirEntryRaw, err: Option<Error>) -> DirEntry {
-        DirEntry { dent: DirEntryInner::Raw(dent), err }
-    }
-}
-
-/// DirEntryInner is the implementation of DirEntry.
-///
-/// It specifically represents three distinct sources of directory entries:
-///
-/// 1. From the walkdir crate.
-/// 2. Special entries that represent things like stdin.
-/// 3. From a path.
-///
-/// Specifically, (3) has to essentially re-create the DirEntry implementation
-/// from WalkDir.
-#[derive(Clone, Debug)]
-enum DirEntryInner {
-    Stdin,
-    Walkdir(walkdir::DirEntry),
-    Raw(DirEntryRaw),
-}
-
-impl DirEntryInner {
-    fn path(&self) -> &Path {
-        use self::DirEntryInner::*;
-        match *self {
-            Stdin => Path::new("<stdin>"),
-            Walkdir(ref x) => x.path(),
-            Raw(ref x) => x.path(),
-        }
-    }
-
-    fn into_path(self) -> PathBuf {
-        use self::DirEntryInner::*;
-        match self {
-            Stdin => PathBuf::from("<stdin>"),
-            Walkdir(x) => x.into_path(),
-            Raw(x) => x.into_path(),
-        }
-    }
-
-    fn path_is_symlink(&self) -> bool {
-        use self::DirEntryInner::*;
-        match *self {
-            Stdin => false,
-            Walkdir(ref x) => x.path_is_symlink(),
-            Raw(ref x) => x.path_is_symlink(),
-        }
-    }
-
-    fn is_stdin(&self) -> bool {
-        match *self {
-            DirEntryInner::Stdin => true,
-            _ => false,
-        }
-    }
-
-    fn metadata(&self) -> Result<Metadata, Error> {
-        use self::DirEntryInner::*;
-        match *self {
-            Stdin => {
-                let err = Error::Io(io::Error::new(
-                    io::ErrorKind::Other,
-                    "<stdin> has no metadata",
-                ));
-                Err(err.with_path("<stdin>"))
-            }
-            Walkdir(ref x) => x.metadata().map_err(|err| {
-                Error::Io(io::Error::from(err))
-                    .with_depth(x.depth())
-                    .with_path(x.path())
-            }),
-            Raw(ref x) => x.metadata(),
-        }
-    }
-
-    fn file_type(&self) -> Option<FileType> {
-        use self::DirEntryInner::*;
-        match *self {
-            Stdin => None,
-            Walkdir(ref x) => Some(x.file_type()),
-            Raw(ref x) => Some(x.file_type()),
-        }
-    }
-
-    fn file_name(&self) -> &OsStr {
-        use self::DirEntryInner::*;
-        match *self {
-            Stdin => OsStr::new("<stdin>"),
-            Walkdir(ref x) => x.file_name(),
-            Raw(ref x) => x.file_name(),
-        }
-    }
-
-    fn depth(&self) -> usize {
-        use self::DirEntryInner::*;
-        match *self {
-            Stdin => 0,
-            Walkdir(ref x) => x.depth(),
-            Raw(ref x) => x.depth(),
-        }
-    }
-
-    #[cfg(unix)]
-    fn ino(&self) -> Option<u64> {
-        use self::DirEntryInner::*;
-        use walkdir::DirEntryExt;
-        match *self {
-            Stdin => None,
-            Walkdir(ref x) => Some(x.ino()),
-            Raw(ref x) => Some(x.ino()),
-        }
-    }
-
-    /// Returns true if and only if this entry points to a directory.
-    fn is_dir(&self) -> bool {
-        self.file_type().map(|ft| ft.is_dir()).unwrap_or(false)
-    }
-}
-
-/// DirEntryRaw is essentially copied from the walkdir crate so that we can
-/// build `DirEntry`s from whole cloth in the parallel iterator.
-#[derive(Clone)]
-struct DirEntryRaw {
-    /// The path as reported by the `fs::ReadDir` iterator (even if it's a
-    /// symbolic link).
-    path: PathBuf,
-    /// The file type. Necessary for recursive iteration, so store it.
-    ty: FileType,
-    /// Is set when this entry was created from a symbolic link and the user
-    /// expects the iterator to follow symbolic links.
-    follow_link: bool,
-    /// The depth at which this entry was generated relative to the root.
-    depth: usize,
-    /// The underlying inode number (Unix only).
-    #[cfg(unix)]
-    ino: u64,
-    /// The underlying metadata (Windows only). We store this on Windows
-    /// because this comes for free while reading a directory.
-    #[cfg(windows)]
-    metadata: fs::Metadata,
-}
-
-impl std::fmt::Debug for DirEntryRaw {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        // Leaving out FileType because it doesn't have a debug impl
-        // in Rust 1.9. We could add it if we really wanted to by manually
-        // querying each possibly file type. Meh. ---AG
-        f.debug_struct("DirEntryRaw")
-            .field("path", &self.path)
-            .field("follow_link", &self.follow_link)
-            .field("depth", &self.depth)
-            .finish()
-    }
-}
-
-impl DirEntryRaw {
-    fn path(&self) -> &Path {
-        &self.path
-    }
-
-    fn into_path(self) -> PathBuf {
-        self.path
-    }
-
-    fn path_is_symlink(&self) -> bool {
-        self.ty.is_symlink() || self.follow_link
-    }
-
-    fn metadata(&self) -> Result<Metadata, Error> {
-        self.metadata_internal()
-    }
-
-    #[cfg(windows)]
-    fn metadata_internal(&self) -> Result<fs::Metadata, Error> {
-        if self.follow_link {
-            fs::metadata(&self.path)
-        } else {
-            Ok(self.metadata.clone())
-        }
-        .map_err(|err| Error::Io(io::Error::from(err)).with_path(&self.path))
-    }
-
-    #[cfg(not(windows))]
-    fn metadata_internal(&self) -> Result<fs::Metadata, Error> {
-        if self.follow_link {
-            fs::metadata(&self.path)
-        } else {
-            fs::symlink_metadata(&self.path)
-        }
-        .map_err(|err| {
-            Error::Io(err).with_depth(self.depth).with_path(&self.path)
-        })
-    }
-
-    fn file_type(&self) -> FileType {
-        self.ty
-    }
-
-    fn file_name(&self) -> &OsStr {
-        self.path.file_name().unwrap_or_else(|| self.path.as_os_str())
-    }
-
-    fn depth(&self) -> usize {
-        self.depth
-    }
-
-    #[cfg(unix)]
-    fn ino(&self) -> u64 {
-        self.ino
-    }
-
-    fn from_entry(
-        depth: usize,
-        ent: &fs::DirEntry,
-    ) -> Result<DirEntryRaw, Error> {
-        let ty = ent.file_type().map_err(|err| {
-            let err = Error::Io(err).with_depth(depth).with_path(ent.path());
-            Error::WithDepth { depth, err: Box::new(err) }
-        })?;
-        DirEntryRaw::from_entry_os(depth, ent, ty)
-    }
-
-    #[cfg(windows)]
-    fn from_entry_os(
-        depth: usize,
-        ent: &fs::DirEntry,
-        ty: fs::FileType,
-    ) -> Result<DirEntryRaw, Error> {
-        let md = ent.metadata().map_err(|err| {
-            let err = Error::Io(err).with_depth(depth).with_path(ent.path());
-            Error::WithDepth { depth, err: Box::new(err) }
-        })?;
-        Ok(DirEntryRaw {
-            path: ent.path(),
-            ty,
-            follow_link: false,
-            depth,
-            metadata: md,
-        })
-    }
-
-    #[cfg(unix)]
-    fn from_entry_os(
-        depth: usize,
-        ent: &fs::DirEntry,
-        ty: fs::FileType,
-    ) -> Result<DirEntryRaw, Error> {
-        use std::os::unix::fs::DirEntryExt;
-
-        Ok(DirEntryRaw {
-            path: ent.path(),
-            ty,
-            follow_link: false,
-            depth,
-            ino: ent.ino(),
-        })
-    }
-
-    // Placeholder implementation to allow compiling on non-standard platforms
-    // (e.g. wasm32).
-    #[cfg(not(any(windows, unix)))]
-    fn from_entry_os(
-        depth: usize,
-        ent: &fs::DirEntry,
-        ty: fs::FileType,
-    ) -> Result<DirEntryRaw, Error> {
-        Err(Error::Io(io::Error::new(
-            io::ErrorKind::Other,
-            "unsupported platform",
-        )))
-    }
-
-    #[cfg(windows)]
-    fn from_path(
-        depth: usize,
-        pb: PathBuf,
-        link: bool,
-    ) -> Result<DirEntryRaw, Error> {
-        let md = fs::metadata(&pb)
-            .map_err(|err| Error::Io(err).with_depth(depth).with_path(&pb))?;
-        Ok(DirEntryRaw {
-            path: pb,
-            ty: md.file_type(),
-            follow_link: link,
-            depth,
-            metadata: md,
-        })
-    }
-
-    #[cfg(unix)]
-    fn from_path(
-        depth: usize,
-        pb: PathBuf,
-        link: bool,
-    ) -> Result<DirEntryRaw, Error> {
-        use std::os::unix::fs::MetadataExt;
-
-        let md = fs::metadata(&pb)
-            .map_err(|err| Error::Io(err).with_depth(depth).with_path(&pb))?;
-        Ok(DirEntryRaw {
-            path: pb,
-            ty: md.file_type(),
-            follow_link: link,
-            depth,
-            ino: md.ino(),
-        })
-    }
-
-    // Placeholder implementation to allow compiling on non-standard platforms
-    // (e.g. wasm32).
-    #[cfg(not(any(windows, unix)))]
-    fn from_path(
-        depth: usize,
-        pb: PathBuf,
-        link: bool,
-    ) -> Result<DirEntryRaw, Error> {
-        Err(Error::Io(io::Error::new(
-            io::ErrorKind::Other,
-            "unsupported platform",
-        )))
-    }
-}
-
-/// WalkBuilder builds a recursive directory iterator.
-///
-/// The builder supports a large number of configurable options. This includes
-/// specific glob overrides, file type matching, toggling whether hidden
-/// files are ignored or not, and of course, support for respecting gitignore
-/// files.
-///
-/// By default, all ignore files found are respected. This includes `.ignore`,
-/// `.gitignore`, `.git/info/exclude` and even your global gitignore
-/// globs, usually found in `$XDG_CONFIG_HOME/git/ignore`.
-///
-/// Some standard recursive directory options are also supported, such as
-/// limiting the recursive depth or whether to follow symbolic links (disabled
-/// by default).
-///
-/// # Ignore rules
-///
-/// There are many rules that influence whether a particular file or directory
-/// is skipped by this iterator. Those rules are documented here. Note that
-/// the rules assume a default configuration.
-///
-/// * First, glob overrides are checked. If a path matches a glob override,
-/// then matching stops. The path is then only skipped if the glob that matched
-/// the path is an ignore glob. (An override glob is a whitelist glob unless it
-/// starts with a `!`, in which case it is an ignore glob.)
-/// * Second, ignore files are checked. Ignore files currently only come from
-/// git ignore files (`.gitignore`, `.git/info/exclude` and the configured
-/// global gitignore file), plain `.ignore` files, which have the same format
-/// as gitignore files, or explicitly added ignore files. The precedence order
-/// is: `.ignore`, `.gitignore`, `.git/info/exclude`, global gitignore and
-/// finally explicitly added ignore files. Note that precedence between
-/// different types of ignore files is not impacted by the directory hierarchy;
-/// any `.ignore` file overrides all `.gitignore` files. Within each precedence
-/// level, more nested ignore files have a higher precedence than less nested
-/// ignore files.
-/// * Third, if the previous step yields an ignore match, then all matching
-/// is stopped and the path is skipped. If it yields a whitelist match, then
-/// matching continues. A whitelist match can be overridden by a later matcher.
-/// * Fourth, unless the path is a directory, the file type matcher is run on
-/// the path. As above, if it yields an ignore match, then all matching is
-/// stopped and the path is skipped. If it yields a whitelist match, then
-/// matching continues.
-/// * Fifth, if the path hasn't been whitelisted and it is hidden, then the
-/// path is skipped.
-/// * Sixth, unless the path is a directory, the size of the file is compared
-/// against the max filesize limit. If it exceeds the limit, it is skipped.
-/// * Seventh, if the path has made it this far then it is yielded in the
-/// iterator.
-#[derive(Clone)]
-pub struct WalkBuilder {
-    paths: Vec<PathBuf>,
-    ig_builder: IgnoreBuilder,
-    max_depth: Option<usize>,
-    min_depth: Option<usize>,
-    max_filesize: Option<u64>,
-    follow_links: bool,
-    same_file_system: bool,
-    sorter: Option<Sorter>,
-    threads: usize,
-    skip: Option<Arc<Handle>>,
-    filter: Option<Filter>,
-    /// The directory that gitignores should be interpreted relative to.
-    ///
-    /// Usually this is the directory containing the gitignore file. But in
-    /// some cases, like for global gitignores or for gitignores specified
-    /// explicitly, this should generally be set to the current working
-    /// directory. This is only used for global gitignores or "explicit"
-    /// gitignores.
-    ///
-    /// When `None`, the CWD is fetched from `std::env::current_dir()`. If
-    /// that fails, then global gitignores are ignored (an error is logged).
-    global_gitignores_relative_to:
-        OnceLock<Result<PathBuf, Arc<std::io::Error>>>,
-}
-
-#[derive(Clone)]
-enum Sorter {
-    ByName(Arc<dyn Fn(&OsStr, &OsStr) -> Ordering + Send + Sync + 'static>),
-    ByPath(Arc<dyn Fn(&Path, &Path) -> Ordering + Send + Sync + 'static>),
-}
-
-#[derive(Clone)]
-struct Filter(Arc<dyn Fn(&DirEntry) -> bool + Send + Sync + 'static>);
-
-impl std::fmt::Debug for WalkBuilder {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.debug_struct("WalkBuilder")
-            .field("paths", &self.paths)
-            .field("ig_builder", &self.ig_builder)
-            .field("max_depth", &self.max_depth)
-            .field("min_depth", &self.min_depth)
-            .field("max_filesize", &self.max_filesize)
-            .field("follow_links", &self.follow_links)
-            .field("same_file_system", &self.same_file_system)
-            .field("sorter", &"<...>")
-            .field("threads", &self.threads)
-            .field("skip", &self.skip)
-            .field("filter", &"<...>")
-            .field(
-                "global_gitignores_relative_to",
-                &self.global_gitignores_relative_to,
-            )
-            .finish()
-    }
-}
-
-impl WalkBuilder {
-    /// Create a new builder for a recursive directory iterator for the
-    /// directory given.
-    ///
-    /// Note that if you want to traverse multiple different directories, it
-    /// is better to call `add` on this builder than to create multiple
-    /// `Walk` values.
-    pub fn new<P: AsRef<Path>>(path: P) -> WalkBuilder {
-        WalkBuilder::from_iter([path])
-    }
-
-    /// Create an empty builder to which paths can be added.
-    ///
-    /// Note that if you call `build` on this instance before calling `add`
-    /// on it, it will return exactly zero items during iteration.
-    pub fn empty() -> WalkBuilder {
-        WalkBuilder {
-            paths: vec![],
-            ig_builder: IgnoreBuilder::new(),
-            max_depth: None,
-            min_depth: None,
-            max_filesize: None,
-            follow_links: false,
-            same_file_system: false,
-            sorter: None,
-            threads: 0,
-            skip: None,
-            filter: None,
-            global_gitignores_relative_to: OnceLock::new(),
-        }
-    }
-
-    /// Create a new builder for a recursive directory iterator from the
-    /// sequence of paths.
-    ///
-    /// Note that if the iterator is empty, this is the same as
-    /// `WalkBuilder::empty`.
-    pub fn from_iter<P: AsRef<Path>, I: IntoIterator<Item = P>>(
-        paths: I,
-    ) -> WalkBuilder {
-        let mut builder = WalkBuilder::empty();
-        for path in paths.into_iter() {
-            builder.add(path);
-        }
-        builder
-    }
-
-    /// Build a new `Walk` iterator.
-    pub fn build(&self) -> Walk {
-        let follow_links = self.follow_links;
-        let max_depth = self.max_depth;
-        let min_depth = self.min_depth;
-        let sorter = self.sorter.clone();
-        let its = self
-            .paths
-            .iter()
-            .map(move |p| {
-                if p == Path::new("-") {
-                    (p.to_path_buf(), None)
-                } else {
-                    let mut wd = WalkDir::new(p);
-                    wd = wd.follow_links(follow_links || p.is_file());
-                    wd = wd.same_file_system(self.same_file_system);
-                    if let Some(max_depth) = max_depth {
-                        wd = wd.max_depth(max_depth);
-                    }
-                    if let Some(min_depth) = min_depth {
-                        wd = wd.min_depth(min_depth);
-                    }
-                    if let Some(ref sorter) = sorter {
-                        match sorter.clone() {
-                            Sorter::ByName(cmp) => {
-                                wd = wd.sort_by(move |a, b| {
-                                    cmp(a.file_name(), b.file_name())
-                                });
-                            }
-                            Sorter::ByPath(cmp) => {
-                                wd = wd.sort_by(move |a, b| {
-                                    cmp(a.path(), b.path())
-                                });
-                            }
-                        }
-                    }
-                    (p.to_path_buf(), Some(WalkEventIter::from(wd)))
-                }
-            })
-            .collect::<Vec<_>>()
-            .into_iter();
-        let ig_root = self.build_ignore();
-        Walk {
-            its,
-            it: None,
-            ig_root: ig_root.clone(),
-            ig: ig_root.clone(),
-            max_depth: self.max_depth,
-            max_filesize: self.max_filesize,
-            skip: self.skip.clone(),
-            filter: self.filter.clone(),
-        }
-    }
-
-    /// Build matchers for checking paths against ignore files without
-    /// recursively walking the configured roots.
-    ///
-    /// The returned matchers use the path-based filtering configuration
-    /// on this builder, including glob overrides, file type selections,
-    /// parent ignore files, `.ignore`, `.gitignore`, global Git
-    /// ignore files, explicitly added ignore files and custom ignore
-    /// file names. For example, ripgrep configures `.rgignore` via
-    /// [`WalkBuilder::add_custom_ignore_filename`]. Minimum and maximum depth
-    /// limits, maximum file size and hidden-file filtering are also applied.
-    /// Other options that only control traversal or require a directory entry,
-    /// such as custom entry predicates, are not applied.
-    ///
-    /// One matcher is returned for each configured path, in the same order as
-    /// the paths were added to this builder. Each matcher accepts paths
-    /// relative to its own [`IncrementalIgnore::root`]. The matcher for the
-    /// special `-` path representing standard input always returns a non-match
-    /// for all inputs.
-    ///
-    /// Ignore matchers are loaded lazily and cached by directory.
-    /// Thus, the first query may read ignore files from the root and
-    /// its parents, while later queries reuse the compiled matchers.
-    /// Errors encountered while loading ignore files are returned by
-    /// [`IncrementalIgnore::matched_with_errors`]. Once an ignore file has
-    /// been loaded, changes to it are not observed. Build new matchers to
-    /// reload changed ignore files.
-    ///
-    /// Matchers built together share the builder's base ignore configuration
-    /// and compiled parent matchers.
-    pub fn build_matchers(&self) -> Vec<IncrementalIgnore> {
-        let ignore = self.build_ignore();
-        let options = IncrementalIgnoreOptions {
-            min_depth: self.min_depth,
-            max_depth: self.max_depth,
-            max_filesize: self.max_filesize,
-            hidden: self.ig_builder.is_hidden(),
-            follow_links: self.follow_links,
-        };
-        self.paths
-            .iter()
-            .map(move |path| {
-                IncrementalIgnore::new(
-                    path.clone(),
-                    ignore.clone(),
-                    options.clone(),
-                )
-            })
-            .collect()
-    }
-
-    /// Build a new `WalkParallel` iterator.
-    ///
-    /// Note that this *doesn't* return something that implements `Iterator`.
-    /// Instead, the returned value must be run with a closure. e.g.,
-    /// `builder.build_parallel().run(|| |path| { println!("{path:?}"); WalkState::Continue })`.
-    pub fn build_parallel(&self) -> WalkParallel {
-        let ig_root = self.build_ignore();
-        WalkParallel {
-            paths: self.paths.clone().into_iter(),
-            ig_root,
-            max_depth: self.max_depth,
-            min_depth: self.min_depth,
-            max_filesize: self.max_filesize,
-            follow_links: self.follow_links,
-            same_file_system: self.same_file_system,
-            threads: self.threads,
-            skip: self.skip.clone(),
-            filter: self.filter.clone(),
-        }
-    }
-
-    /// Add a file path to the iterator.
-    ///
-    /// Each additional file path added is traversed recursively. This should
-    /// be preferred over building multiple `Walk` iterators since this
-    /// enables reusing resources across iteration.
-    pub fn add<P: AsRef<Path>>(&mut self, path: P) -> &mut WalkBuilder {
-        self.paths.push(path.as_ref().to_path_buf());
-        self
-    }
-
-    /// The maximum depth to recurse.
-    ///
-    /// The default, `None`, imposes no depth restriction.
-    pub fn max_depth(&mut self, depth: Option<usize>) -> &mut WalkBuilder {
-        self.max_depth = depth;
-        if self.min_depth.is_some()
-            && self.max_depth.is_some()
-            && self.max_depth < self.min_depth
-        {
-            self.max_depth = self.min_depth;
-        }
-        self
-    }
-
-    /// The minimum depth to recurse.
-    ///
-    /// The default, `None`, imposes no minimum depth restriction.
-    pub fn min_depth(&mut self, depth: Option<usize>) -> &mut WalkBuilder {
-        self.min_depth = depth;
-        if self.max_depth.is_some()
-            && self.min_depth.is_some()
-            && self.min_depth > self.max_depth
-        {
-            self.min_depth = self.max_depth;
-        }
-        self
-    }
-
-    /// Whether to follow symbolic links or not.
-    pub fn follow_links(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.follow_links = yes;
-        self
-    }
-
-    /// Whether to ignore files above the specified limit.
-    pub fn max_filesize(&mut self, filesize: Option<u64>) -> &mut WalkBuilder {
-        self.max_filesize = filesize;
-        self
-    }
-
-    /// The number of threads to use for traversal.
-    ///
-    /// Note that this only has an effect when using `build_parallel`.
-    ///
-    /// The default setting is `0`, which chooses the number of threads
-    /// automatically using heuristics.
-    pub fn threads(&mut self, n: usize) -> &mut WalkBuilder {
-        self.threads = n;
-        self
-    }
-
-    /// Add a global ignore file to the matcher.
-    ///
-    /// This has lower precedence than all other sources of ignore rules.
-    ///
-    /// # Errors
-    ///
-    /// If there was a problem adding the ignore file, then an error is
-    /// returned. Note that the error may indicate *partial* failure. For
-    /// example, if an ignore file contains an invalid glob, all other globs
-    /// are still applied.
-    ///
-    /// An error will also occur if this walker could not get the current
-    /// working directory (and `WalkBuilder::current_dir` isn't set).
-    pub fn add_ignore<P: AsRef<Path>>(&mut self, path: P) -> Option<Error> {
-        // CHANGED: Root the ignore file at `""` instead of the current working
-        // directory. Explicit ignores are scoped to the directory of the
-        // ignore file (see `matched_ignore`), and a root of `""` makes the
-        // rules apply to every walked path regardless of the walk root. This
-        // also avoids depending on the current working directory entirely.
-        //
-        // let path = path.as_ref();
-        // let Some(cwd) = self.get_or_set_current_dir() else {
-        //     let err = std::io::Error::other(format!(
-        //         "CWD is not known, ignoring global gitignore {}",
-        //         path.display()
-        //     ));
-        //     return Some(err.into());
-        // };
-        // let mut builder = GitignoreBuilder::new(cwd);
-        let mut builder = GitignoreBuilder::new("");
-        let mut errs = PartialErrorBuilder::default();
-        errs.maybe_push(builder.add(path));
-        match builder.build() {
-            Ok(gi) => {
-                self.ig_builder.add_ignore(gi);
-            }
-            Err(err) => {
-                errs.push(err);
-            }
-        }
-        errs.into_error_option()
-    }
-
-    /// CHANGED: Add a prebuilt Gitignore to the builder.
-    ///
-    /// Like the ignore file added via `add_ignore`, these rules are matched
-    /// against the full path of each walked entry, scoped to the `Gitignore`'s
-    /// root path.
-    pub fn add_gitignore(&mut self, gi: Gitignore) {
-        self.ig_builder.add_ignore(gi);
-    }
-
-    /// Add a custom ignore file name
-    ///
-    /// These ignore files have higher precedence than all other ignore files.
-    ///
-    /// When specifying multiple names, earlier names have lower precedence than
-    /// later names.
-    pub fn add_custom_ignore_filename<S: AsRef<OsStr>>(
-        &mut self,
-        file_name: S,
-    ) -> &mut WalkBuilder {
-        self.ig_builder.add_custom_ignore_filename(file_name);
-        self
-    }
-
-    /// Add an override matcher.
-    ///
-    /// By default, no override matcher is used.
-    ///
-    /// This overrides any previous setting.
-    pub fn overrides(&mut self, overrides: Override) -> &mut WalkBuilder {
-        self.ig_builder.overrides(overrides);
-        self
-    }
-
-    /// Add a file type matcher.
-    ///
-    /// By default, no file type matcher is used.
-    ///
-    /// This overrides any previous setting.
-    pub fn types(&mut self, types: Types) -> &mut WalkBuilder {
-        self.ig_builder.types(types);
-        self
-    }
-
-    /// Enables all the standard ignore filters.
-    ///
-    /// This toggles, as a group, all the filters that are enabled by default:
-    ///
-    /// - [hidden()](#method.hidden)
-    /// - [parents()](#method.parents)
-    /// - [ignore()](#method.ignore)
-    /// - [git_ignore()](#method.git_ignore)
-    /// - [git_global()](#method.git_global)
-    /// - [git_exclude()](#method.git_exclude)
-    ///
-    /// They may still be toggled individually after calling this function.
-    ///
-    /// This is (by definition) enabled by default.
-    pub fn standard_filters(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.hidden(yes)
-            .parents(yes)
-            .ignore(yes)
-            .git_ignore(yes)
-            .git_global(yes)
-            .git_exclude(yes)
-    }
-
-    /// Enables ignoring hidden files.
-    ///
-    /// This is enabled by default.
-    pub fn hidden(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.ig_builder.hidden(yes);
-        self
-    }
-
-    /// Enables reading ignore files from parent directories.
-    ///
-    /// If this is enabled, then .gitignore files in parent directories of each
-    /// file path given are respected. Otherwise, they are ignored.
-    ///
-    /// This is enabled by default.
-    pub fn parents(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.ig_builder.parents(yes);
-        self
-    }
-
-    /// Enables reading `.ignore` files.
-    ///
-    /// `.ignore` files have the same semantics as `gitignore` files and are
-    /// supported by search tools such as ripgrep and The Silver Searcher.
-    ///
-    /// This is enabled by default.
-    pub fn ignore(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.ig_builder.ignore(yes);
-        self
-    }
-
-    /// Enables reading a global gitignore file, whose path is specified in
-    /// git's `core.excludesFile` config option.
-    ///
-    /// Git's config file location is `$HOME/.gitconfig`. If `$HOME/.gitconfig`
-    /// does not exist or does not specify `core.excludesFile`, then
-    /// `$XDG_CONFIG_HOME/git/ignore` is read. If `$XDG_CONFIG_HOME` is not
-    /// set or is empty, then `$HOME/.config/git/ignore` is used instead.
-    ///
-    /// This is enabled by default.
-    pub fn git_global(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.ig_builder.git_global(yes);
-        self
-    }
-
-    /// Enables reading `.gitignore` files.
-    ///
-    /// `.gitignore` files have match semantics as described in the `gitignore`
-    /// man page.
-    ///
-    /// This is enabled by default.
-    pub fn git_ignore(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.ig_builder.git_ignore(yes);
-        self
-    }
-
-    /// Enables reading `.git/info/exclude` files.
-    ///
-    /// `.git/info/exclude` files have match semantics as described in the
-    /// `gitignore` man page.
-    ///
-    /// This is enabled by default.
-    pub fn git_exclude(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.ig_builder.git_exclude(yes);
-        self
-    }
-
-    /// Whether a git repository is required to apply git-related ignore
-    /// rules (global rules, .gitignore and local exclude rules).
-    ///
-    /// When disabled, git-related ignore rules are applied even when searching
-    /// outside a git repository.
-    ///
-    /// In particular, if this is `false` then `.gitignore` files will be read
-    /// from parent directories above the git root directory containing `.git`,
-    /// which is different from the git behavior.
-    pub fn require_git(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.ig_builder.require_git(yes);
-        self
-    }
-
-    /// Process ignore files case insensitively
-    ///
-    /// This is disabled by default.
-    pub fn ignore_case_insensitive(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.ig_builder.ignore_case_insensitive(yes);
-        self
-    }
-
-    /// Set a function for sorting directory entries by their path.
-    ///
-    /// If a compare function is set, the resulting iterator will return all
-    /// paths in sorted order. The compare function will be called to compare
-    /// entries from the same directory.
-    ///
-    /// This is like `sort_by_file_name`, except the comparator accepts
-    /// a `&Path` instead of the base file name, which permits it to sort by
-    /// more criteria.
-    ///
-    /// This method will override any previous sorter set by this method or
-    /// by `sort_by_file_name`.
-    ///
-    /// Note that this is not used in the parallel iterator.
-    pub fn sort_by_file_path<F>(&mut self, cmp: F) -> &mut WalkBuilder
-    where
-        F: Fn(&Path, &Path) -> Ordering + Send + Sync + 'static,
-    {
-        self.sorter = Some(Sorter::ByPath(Arc::new(cmp)));
-        self
-    }
-
-    /// Set a function for sorting directory entries by file name.
-    ///
-    /// If a compare function is set, the resulting iterator will return all
-    /// paths in sorted order. The compare function will be called to compare
-    /// names from entries from the same directory using only the name of the
-    /// entry.
-    ///
-    /// This method will override any previous sorter set by this method or
-    /// by `sort_by_file_path`.
-    ///
-    /// Note that this is not used in the parallel iterator.
-    pub fn sort_by_file_name<F>(&mut self, cmp: F) -> &mut WalkBuilder
-    where
-        F: Fn(&OsStr, &OsStr) -> Ordering + Send + Sync + 'static,
-    {
-        self.sorter = Some(Sorter::ByName(Arc::new(cmp)));
-        self
-    }
-
-    /// Do not cross file system boundaries.
-    ///
-    /// When this option is enabled, directory traversal will not descend into
-    /// directories that are on a different file system from the root path.
-    ///
-    /// Currently, this option is only supported on Unix and Windows. If this
-    /// option is used on an unsupported platform, then directory traversal
-    /// will immediately return an error and will not yield any entries.
-    pub fn same_file_system(&mut self, yes: bool) -> &mut WalkBuilder {
-        self.same_file_system = yes;
-        self
-    }
-
-    /// Do not yield directory entries that are believed to correspond to
-    /// stdout.
-    ///
-    /// This is useful when a command is invoked via shell redirection to a
-    /// file that is also being read. For example, `grep -r foo ./ > results`
-    /// might end up trying to search `results` even though it is also writing
-    /// to it, which could cause an unbounded feedback loop. Setting this
-    /// option prevents this from happening by skipping over the `results`
-    /// file.
-    ///
-    /// This is disabled by default.
-    pub fn skip_stdout(&mut self, yes: bool) -> &mut WalkBuilder {
-        if yes {
-            self.skip = stdout_handle().map(Arc::new);
-        } else {
-            self.skip = None;
-        }
-        self
-    }
-
-    /// Yields only entries which satisfy the given predicate and skips
-    /// descending into directories that do not satisfy the given predicate.
-    ///
-    /// The predicate is applied to all entries. If the predicate is
-    /// true, iteration carries on as normal. If the predicate is false, the
-    /// entry is ignored and if it is a directory, it is not descended into.
-    ///
-    /// Note that the errors for reading entries that may not satisfy the
-    /// predicate will still be yielded.
-    ///
-    /// Note also that only one filter predicate can be applied to a
-    /// `WalkBuilder`. Calling this subsequent times overrides previous filter
-    /// predicates.
-    pub fn filter_entry<P>(&mut self, filter: P) -> &mut WalkBuilder
-    where
-        P: Fn(&DirEntry) -> bool + Send + Sync + 'static,
-    {
-        self.filter = Some(Filter(Arc::new(filter)));
-        self
-    }
-
-    /// Set the current working directory used for matching global gitignores.
-    ///
-    /// If this is not set, then this walker will attempt to discover the
-    /// correct path from the environment's current working directory. If
-    /// that fails, then global gitignore files will be ignored.
-    ///
-    /// Global gitignore files come from things like a user's git configuration
-    /// or from gitignore files added via [`WalkBuilder::add_ignore`].
-    pub fn current_dir(
-        &mut self,
-        cwd: impl Into<PathBuf>,
-    ) -> &mut WalkBuilder {
-        let cwd = cwd.into();
-        self.ig_builder.current_dir(cwd.clone());
-        if let Err(cwd) = self.global_gitignores_relative_to.set(Ok(cwd)) {
-            // OK because `Err` from `set` implies a value exists.
-            *self.global_gitignores_relative_to.get_mut().unwrap() = cwd;
-        }
-        self
-    }
-
-    /// Gets the currently configured CWD on this walk builder.
-    ///
-    /// This is "lazy." That is, we only ask for the CWD from the environment
-    /// if `WalkBuilder::current_dir` hasn't been called yet. And we ensure
-    /// that we only do it once.
-    fn get_or_set_current_dir(&self) -> Option<&Path> {
-        let result = self.global_gitignores_relative_to.get_or_init(|| {
-            let result = std::env::current_dir().map_err(Arc::new);
-            match result {
-                Ok(ref path) => {
-                    log::trace!(
-                        "automatically discovered CWD: {}",
-                        path.display()
-                    );
-                }
-                Err(ref err) => {
-                    log::debug!(
-                        "failed to find CWD \
-                         (global gitignores will be ignored): \
-                         {err}"
-                    );
-                }
-            }
-            result
-        });
-        result.as_ref().ok().map(|path| &**path)
-    }
-
-    /// Build the root ignore matcher shared by all consumers of this builder.
-    fn build_ignore(&self) -> Ignore {
-        self.get_or_set_current_dir()
-            .map(|cwd| self.ig_builder.build_with_cwd(Some(cwd.to_path_buf())))
-            .unwrap_or_else(|| self.ig_builder.build())
-    }
-}
-
-/// Walk is a recursive directory iterator over file paths in one or more
-/// directories.
-///
-/// Only file and directory paths matching the rules are returned. By default,
-/// ignore files like `.gitignore` are respected. The precise matching rules
-/// and precedence is explained in the documentation for `WalkBuilder`.
-pub struct Walk {
-    its: std::vec::IntoIter<(PathBuf, Option<WalkEventIter>)>,
-    it: Option<WalkEventIter>,
-    ig_root: Ignore,
-    ig: Ignore,
-    max_depth: Option<usize>,
-    max_filesize: Option<u64>,
-    skip: Option<Arc<Handle>>,
-    filter: Option<Filter>,
-}
-
-impl Walk {
-    /// Creates a new recursive directory iterator for the file path given.
-    ///
-    /// Note that this uses default settings, which include respecting
-    /// `.gitignore` files. To configure the iterator, use `WalkBuilder`
-    /// instead.
-    pub fn new<P: AsRef<Path>>(path: P) -> Walk {
-        WalkBuilder::new(path).build()
-    }
-
-    /// Create a new recursive directory iterator from the sequence of paths
-    /// given.
-    ///
-    /// Note that if the provided iterator is empty, then `Walk` is guaranteed
-    /// to yield zero entries.
-    pub fn from_iter<P: AsRef<Path>, I: IntoIterator<Item = P>>(
-        paths: I,
-    ) -> Walk {
-        WalkBuilder::from_iter(paths).build()
-    }
-
-    fn skip_entry(&self, ent: &DirEntry) -> Result<bool, Error> {
-        if ent.depth() == 0 {
-            return Ok(false);
-        }
-        // We ensure that trivial skipping is done before any other potentially
-        // expensive operations (stat, filesystem other) are done. This seems
-        // like an obvious optimization but becomes critical when filesystem
-        // operations even as simple as stat can result in significant
-        // overheads; an example of this was a bespoke filesystem layer in
-        // Windows that hosted files remotely and would download them on-demand
-        // when particular filesystem operations occurred. Users of this system
-        // who ensured correct file-type filters were being used could still
-        // get unnecessary file access resulting in large downloads.
-        if should_skip_entry(&self.ig, ent) {
-            return Ok(true);
-        }
-        if let Some(ref stdout) = self.skip {
-            if path_equals(ent, stdout)? {
-                return Ok(true);
-            }
-        }
-        if self.max_filesize.is_some() && !ent.is_dir() {
-            return Ok(skip_filesize(
-                self.max_filesize.unwrap(),
-                ent.path(),
-                &ent.metadata().ok(),
-            ));
-        }
-        if let Some(Filter(filter)) = &self.filter {
-            if !filter(ent) {
-                return Ok(true);
-            }
-        }
-        Ok(false)
-    }
-}
-
-impl Iterator for Walk {
-    type Item = Result<DirEntry, Error>;
-
-    #[inline(always)]
-    fn next(&mut self) -> Option<Result<DirEntry, Error>> {
-        loop {
-            let ev = match self.it.as_mut().and_then(|it| it.next()) {
-                Some(ev) => ev,
-                None => {
-                    match self.its.next() {
-                        None => return None,
-                        Some((_, None)) => {
-                            return Some(Ok(DirEntry::new_stdin()));
-                        }
-                        Some((path, Some(it))) => {
-                            self.it = Some(it);
-                            if path.is_dir() {
-                                let (ig, err) = self.ig_root.add_parents(path);
-                                self.ig = ig;
-                                if let Some(err) = err {
-                                    return Some(Err(err));
-                                }
-                            } else {
-                                self.ig = self.ig_root.clone();
-                            }
-                        }
-                    }
-                    continue;
-                }
-            };
-            match ev {
-                Err(err) => {
-                    return Some(Err(Error::from_walkdir(err)));
-                }
-                Ok(WalkEvent::Exit) => {
-                    self.ig = self.ig.parent().unwrap();
-                }
-                Ok(WalkEvent::Dir(ent)) => {
-                    let mut ent = DirEntry::new_walkdir(ent, None);
-                    let should_skip = match self.skip_entry(&ent) {
-                        Err(err) => return Some(Err(err)),
-                        Ok(should_skip) => should_skip,
-                    };
-                    if should_skip {
-                        self.it.as_mut().unwrap().it.skip_current_dir();
-                        // Still need to push this on the stack because
-                        // we'll get a WalkEvent::Exit event for this dir.
-                        // Its ignore files cannot apply to any visited entry.
-                        let (igtmp, _) =
-                            self.ig.add_child_with_entries(ent.path(), &[]);
-                        self.ig = igtmp;
-                        continue;
-                    }
-                    let (igtmp, err) = if self.max_depth == Some(ent.depth()) {
-                        self.ig.add_child_with_entries(ent.path(), &[])
-                    } else {
-                        self.ig.add_child(ent.path())
-                    };
-                    self.ig = igtmp;
-                    ent.err = err;
-                    return Some(Ok(ent));
-                }
-                Ok(WalkEvent::File(ent)) => {
-                    let ent = DirEntry::new_walkdir(ent, None);
-                    let should_skip = match self.skip_entry(&ent) {
-                        Err(err) => return Some(Err(err)),
-                        Ok(should_skip) => should_skip,
-                    };
-                    if should_skip {
-                        continue;
-                    }
-                    return Some(Ok(ent));
-                }
-            }
-        }
-    }
-}
-
-impl std::iter::FusedIterator for Walk {}
-
-/// WalkEventIter transforms a WalkDir iterator into an iterator that more
-/// accurately describes the directory tree. Namely, it emits events that are
-/// one of three types: directory, file or "exit." An "exit" event means that
-/// the entire contents of a directory have been enumerated.
-struct WalkEventIter {
-    depth: usize,
-    it: walkdir::IntoIter,
-    next: Option<Result<walkdir::DirEntry, walkdir::Error>>,
-}
-
-#[derive(Debug)]
-enum WalkEvent {
-    Dir(walkdir::DirEntry),
-    File(walkdir::DirEntry),
-    Exit,
-}
-
-impl From<WalkDir> for WalkEventIter {
-    fn from(it: WalkDir) -> WalkEventIter {
-        WalkEventIter { depth: 0, it: it.into_iter(), next: None }
-    }
-}
-
-impl Iterator for WalkEventIter {
-    type Item = walkdir::Result<WalkEvent>;
-
-    #[inline(always)]
-    fn next(&mut self) -> Option<walkdir::Result<WalkEvent>> {
-        let dent = self.next.take().or_else(|| self.it.next());
-        let depth = match dent {
-            None => 0,
-            Some(Ok(ref dent)) => dent.depth(),
-            Some(Err(ref err)) => err.depth(),
-        };
-        if depth < self.depth {
-            self.depth -= 1;
-            self.next = dent;
-            return Some(Ok(WalkEvent::Exit));
-        }
-        self.depth = depth;
-        match dent {
-            None => None,
-            Some(Err(err)) => Some(Err(err)),
-            Some(Ok(dent)) => {
-                if walkdir_is_dir(&dent) {
-                    self.depth += 1;
-                    Some(Ok(WalkEvent::Dir(dent)))
-                } else {
-                    Some(Ok(WalkEvent::File(dent)))
-                }
-            }
-        }
-    }
-}
-
-/// WalkState is used in the parallel recursive directory iterator to indicate
-/// whether walking should continue as normal, skip descending into a
-/// particular directory or quit the walk entirely.
-#[derive(Clone, Copy, Debug, Eq, PartialEq)]
-pub enum WalkState {
-    /// Continue walking as normal.
-    Continue,
-    /// If the directory entry given is a directory, don't descend into it.
-    /// In all other cases, this has no effect.
-    Skip,
-    /// Quit the entire iterator as soon as possible.
-    ///
-    /// Note that this is an inherently asynchronous action. It is possible
-    /// for more entries to be yielded even after instructing the iterator
-    /// to quit.
-    Quit,
-}
-
-impl WalkState {
-    fn is_continue(&self) -> bool {
-        *self == WalkState::Continue
-    }
-
-    fn is_quit(&self) -> bool {
-        *self == WalkState::Quit
-    }
-}
-
-/// A builder for constructing a visitor when using [`WalkParallel::visit`].
-/// The builder will be called for each thread started by `WalkParallel`. The
-/// visitor returned from each builder is then called for every directory
-/// entry.
-pub trait ParallelVisitorBuilder<'s> {
-    /// Create per-thread `ParallelVisitor`s for `WalkParallel`.
-    fn build(&mut self) -> Box<dyn ParallelVisitor + 's>;
-}
-
-impl<'a, 's, P: ParallelVisitorBuilder<'s>> ParallelVisitorBuilder<'s>
-    for &'a mut P
-{
-    fn build(&mut self) -> Box<dyn ParallelVisitor + 's> {
-        (**self).build()
-    }
-}
-
-/// Receives files and directories for the current thread.
-///
-/// Setup for the traversal can be implemented as part of
-/// [`ParallelVisitorBuilder::build`]. Teardown when traversal finishes can be
-/// implemented by implementing the `Drop` trait on your traversal type.
-pub trait ParallelVisitor: Send {
-    /// Receives files and directories for the current thread. This is called
-    /// once for every directory entry visited by traversal.
-    fn visit(&mut self, entry: Result<DirEntry, Error>) -> WalkState;
-}
-
-struct FnBuilder<F> {
-    builder: F,
-}
-
-impl<'s, F: FnMut() -> FnVisitor<'s>> ParallelVisitorBuilder<'s>
-    for FnBuilder<F>
-{
-    fn build(&mut self) -> Box<dyn ParallelVisitor + 's> {
-        let visitor = (self.builder)();
-        Box::new(FnVisitorImp { visitor })
-    }
-}
-
-type FnVisitor<'s> =
-    Box<dyn FnMut(Result<DirEntry, Error>) -> WalkState + Send + 's>;
-
-struct FnVisitorImp<'s> {
-    visitor: FnVisitor<'s>,
-}
-
-impl<'s> ParallelVisitor for FnVisitorImp<'s> {
-    fn visit(&mut self, entry: Result<DirEntry, Error>) -> WalkState {
-        (self.visitor)(entry)
-    }
-}
-
-/// WalkParallel is a parallel recursive directory iterator over files paths
-/// in one or more directories.
-///
-/// Only file and directory paths matching the rules are returned. By default,
-/// ignore files like `.gitignore` are respected. The precise matching rules
-/// and precedence is explained in the documentation for `WalkBuilder`.
-///
-/// Unlike `Walk`, this uses multiple threads for traversing a directory.
-pub struct WalkParallel {
-    paths: std::vec::IntoIter<PathBuf>,
-    ig_root: Ignore,
-    max_filesize: Option<u64>,
-    max_depth: Option<usize>,
-    min_depth: Option<usize>,
-    follow_links: bool,
-    same_file_system: bool,
-    threads: usize,
-    skip: Option<Arc<Handle>>,
-    filter: Option<Filter>,
-}
-
-impl WalkParallel {
-    /// Execute the parallel recursive directory iterator. `mkf` is called
-    /// for each thread used for iteration. The function produced by `mkf`
-    /// is then in turn called for each visited file path.
-    pub fn run<'s, F>(self, mkf: F)
-    where
-        F: FnMut() -> FnVisitor<'s>,
-    {
-        self.visit(&mut FnBuilder { builder: mkf })
-    }
-
-    /// Execute the parallel recursive directory iterator using a custom
-    /// visitor.
-    ///
-    /// The builder given is used to construct a visitor for every thread
-    /// used by this traversal. The visitor returned from each builder is then
-    /// called for every directory entry seen by that thread.
-    ///
-    /// Typically, creating a custom visitor is useful if you need to perform
-    /// some kind of cleanup once traversal is finished. This can be achieved
-    /// by implementing `Drop` for your builder (or for your visitor, if you
-    /// want to execute cleanup for every thread that is launched).
-    ///
-    /// For example, each visitor might build up a data structure of results
-    /// corresponding to the directory entries seen for each thread. Since each
-    /// visitor runs on only one thread, this build-up can be done without
-    /// synchronization. Then, once traversal is complete, all of the results
-    /// can be merged together into a single data structure.
-    pub fn visit(mut self, builder: &mut dyn ParallelVisitorBuilder<'_>) {
-        let threads = self.threads();
-        let mut stack = vec![];
-        {
-            let mut visitor = builder.build();
-            let mut paths = Vec::new().into_iter();
-            std::mem::swap(&mut paths, &mut self.paths);
-            // Send the initial set of root paths to the pool of workers. Note
-            // that we only send directories. For files, we send to them the
-            // callback directly.
-            for path in paths {
-                let (dent, root_device) = if path == Path::new("-") {
-                    (DirEntry::new_stdin(), None)
-                } else {
-                    let root_device = if !self.same_file_system {
-                        None
-                    } else {
-                        match device_num(&path) {
-                            Ok(root_device) => Some(root_device),
-                            Err(err) => {
-                                let err = Error::Io(err).with_path(path);
-                                if visitor.visit(Err(err)).is_quit() {
-                                    return;
-                                }
-                                continue;
-                            }
-                        }
-                    };
-                    match DirEntryRaw::from_path(0, path, false) {
-                        Ok(dent) => {
-                            (DirEntry::new_raw(dent, None), root_device)
-                        }
-                        Err(err) => {
-                            if visitor.visit(Err(err)).is_quit() {
-                                return;
-                            }
-                            continue;
-                        }
-                    }
-                };
-                stack.push(Message::Work(Work {
-                    dent,
-                    ignore: self.ig_root.clone(),
-                    root_device,
-                }));
-            }
-            // ... but there's no need to start workers if we don't need them.
-            if stack.is_empty() {
-                return;
-            }
-        }
-        // Create the workers and then wait for them to finish.
-        let quit_now = Arc::new(AtomicBool::new(false));
-        let active_workers = Arc::new(AtomicUsize::new(threads));
-        let stacks = Stack::new_for_each_thread(threads, stack);
-        // Collect all of the workers first. In the case that
-        // `builder.build()` panics, we want that to happen and
-        // propagate before we actually start to run any of the
-        // workers.
-        let workers: Vec<_> = stacks
-            .into_iter()
-            .map(|stack| Worker {
-                visitor: builder.build(),
-                stack,
-                quit_now: quit_now.clone(),
-                active_workers: active_workers.clone(),
-                max_depth: self.max_depth,
-                min_depth: self.min_depth,
-                max_filesize: self.max_filesize,
-                follow_links: self.follow_links,
-                skip: self.skip.clone(),
-                filter: self.filter.clone(),
-            })
-            .collect();
-        std::thread::scope(|s| {
-            let handles: Vec<_> = workers
-                .into_iter()
-                .map(|worker| s.spawn(|| worker.run()))
-                .collect();
-            for handle in handles {
-                handle.join().unwrap();
-            }
-        });
-    }
-
-    fn threads(&self) -> usize {
-        if self.threads == 0 {
-            std::thread::available_parallelism().map_or(1, |n| n.get()).min(12)
-        } else {
-            self.threads
-        }
-    }
-}
-
-/// Message is the set of instructions that a worker knows how to process.
-enum Message {
-    /// A work item corresponds to a directory that should be descended into.
-    /// Work items for entries that should be skipped or ignored should not
-    /// be produced.
-    Work(Work),
-    /// This instruction indicates that the worker should quit.
-    Quit,
-}
-
-/// A unit of work for each worker to process.
-///
-/// Each unit of work corresponds to a directory that should be descended
-/// into.
-struct Work {
-    /// The directory entry.
-    dent: DirEntry,
-    /// Any ignore matchers that have been built for this directory's parents.
-    ignore: Ignore,
-    /// The root device number. When present, only files with the same device
-    /// number should be considered.
-    root_device: Option<u64>,
-}
-
-#[derive(Default)]
-struct ReadDirResult {
-    entries: Vec<fs::DirEntry>,
-    errors: Vec<Error>,
-}
-
-impl Work {
-    /// Returns true if and only if this work item is a directory.
-    fn is_dir(&self) -> bool {
-        self.dent.is_dir()
-    }
-
-    /// Returns true if and only if this work item is a symlink.
-    fn is_symlink(&self) -> bool {
-        self.dent.file_type().map_or(false, |ft| ft.is_symlink())
-    }
-
-    /// Adds ignore rules for parent directories.
-    ///
-    /// Note that this only applies to entries at depth 0. On all other
-    /// entries, this is a no-op.
-    fn add_parents(&mut self) -> Option<Error> {
-        if self.dent.depth() > 0 {
-            return None;
-        }
-        // At depth 0, the path of this entry is a root path, so we can
-        // use it directly to add parent ignore rules.
-        let (ig, err) = self.ignore.add_parents(self.dent.path());
-        self.ignore = ig;
-        err
-    }
-
-    /// Adds ignore rules for this directory without reading its contents.
-    fn add_ignore(&mut self) {
-        let (ig, err) = self.ignore.add_child(self.dent.path());
-        self.ignore = ig;
-        self.dent.err = err;
-    }
-
-    /// Reads the directory contents of this work item and adds ignore
-    /// rules for this directory.
-    ///
-    /// If there was a problem with reading the directory contents, then
-    /// an error is returned. If there was a problem reading the ignore
-    /// rules for this directory, then the error is attached to this
-    /// work item's directory entry.
-    fn read_dir(&mut self) -> Result<ReadDirResult, Error> {
-        let readdir = match fs::read_dir(self.dent.path()) {
-            Ok(readdir) => readdir,
-            Err(err) => {
-                let err = Error::from(err)
-                    .with_path(self.dent.path())
-                    .with_depth(self.dent.depth());
-                return Err(err);
-            }
-        };
-        // Actually descend into the directory and read its contents
-        let mut result = ReadDirResult::default();
-        for entry in readdir {
-            match entry {
-                Ok(entry) => result.entries.push(entry),
-                Err(err) => result.errors.push(
-                    Error::from(err)
-                        .with_path(self.dent.path())
-                        .with_depth(self.dent.depth() + 1),
-                ),
-            }
-        }
-        let (ig, err) = self
-            .ignore
-            .add_child_with_entries(self.dent.path(), &result.entries);
-        self.ignore = ig;
-        self.dent.err = err;
-        Ok(result)
-    }
-}
-
-/// A work-stealing stack.
-#[derive(Debug)]
-struct Stack {
-    /// This thread's index.
-    index: usize,
-    /// The thread-local stack.
-    deque: Deque<Message>,
-    /// The work stealers.
-    stealers: Arc<[Stealer<Message>]>,
-}
-
-impl Stack {
-    /// Create a work-stealing stack for each thread. The given messages
-    /// correspond to the initial paths to start the search at. They will
-    /// be distributed automatically to each stack in a round-robin fashion.
-    fn new_for_each_thread(threads: usize, init: Vec<Message>) -> Vec<Stack> {
-        // Using new_lifo() ensures each worker operates depth-first, not
-        // breadth-first. We do depth-first because a breadth first traversal
-        // on wide directories with a lot of gitignores is disastrous (for
-        // example, searching a directory tree containing all of crates.io).
-        let deques: Vec<Deque<Message>> =
-            std::iter::repeat_with(Deque::new_lifo).take(threads).collect();
-        let stealers = Arc::<[Stealer<Message>]>::from(
-            deques.iter().map(Deque::stealer).collect::<Vec<_>>(),
-        );
-        let stacks: Vec<Stack> = deques
-            .into_iter()
-            .enumerate()
-            .map(|(index, deque)| Stack {
-                index,
-                deque,
-                stealers: stealers.clone(),
-            })
-            .collect();
-        // Distribute the initial messages, reverse the order to cancel out
-        // the other reversal caused by the inherent LIFO processing of the
-        // per-thread stacks which are filled here.
-        init.into_iter()
-            .rev()
-            .zip(stacks.iter().cycle())
-            .for_each(|(m, s)| s.push(m));
-        stacks
-    }
-
-    /// Push a message.
-    fn push(&self, msg: Message) {
-        self.deque.push(msg);
-    }
-
-    /// Pop a message.
-    fn pop(&self) -> Option<Message> {
-        self.deque.pop().or_else(|| self.steal())
-    }
-
-    /// Steal a message from another queue.
-    fn steal(&self) -> Option<Message> {
-        // For fairness, try to steal from index + 1, index + 2, ... len - 1,
-        // then wrap around to 0, 1, ... index - 1.
-        let (left, right) = self.stealers.split_at(self.index);
-        // Don't steal from ourselves
-        let right = &right[1..];
-
-        right
-            .iter()
-            .chain(left.iter())
-            .map(|s| s.steal_batch_and_pop(&self.deque))
-            .find_map(|s| s.success())
-    }
-}
-
-/// A worker is responsible for descending into directories, updating the
-/// ignore matchers, producing new work and invoking the caller's callback.
-///
-/// Note that a worker is *both* a producer and a consumer.
-struct Worker<'s> {
-    /// The caller's callback.
-    visitor: Box<dyn ParallelVisitor + 's>,
-    /// A work-stealing stack of work to do.
-    ///
-    /// We use a stack instead of a channel because a stack lets us visit
-    /// directories in depth first order. This can substantially reduce peak
-    /// memory usage by keeping both the number of file paths and gitignore
-    /// matchers in memory lower.
-    stack: Stack,
-    /// Whether all workers should terminate at the next opportunity. Note
-    /// that we need this because we don't want other `Work` to be done after
-    /// we quit. We wouldn't need this if have a priority channel.
-    quit_now: Arc<AtomicBool>,
-    /// The number of currently active workers.
-    active_workers: Arc<AtomicUsize>,
-    /// The maximum depth of directories to descend. A value of `0` means no
-    /// descension at all.
-    max_depth: Option<usize>,
-    /// The minimum depth of directories to descend.
-    min_depth: Option<usize>,
-    /// The maximum size a searched file can be (in bytes). If a file exceeds
-    /// this size it will be skipped.
-    max_filesize: Option<u64>,
-    /// Whether to follow symbolic links or not. When this is enabled, loop
-    /// detection is performed.
-    follow_links: bool,
-    /// A file handle to skip, currently is either `None` or stdout, if it's
-    /// a file and it has been requested to skip files identical to stdout.
-    skip: Option<Arc<Handle>>,
-    /// A predicate applied to dir entries. If true, the entry and all
-    /// children will be skipped.
-    filter: Option<Filter>,
-}
-
-impl<'s> Worker<'s> {
-    /// Runs this worker until there is no more work left to do.
-    ///
-    /// The worker will call the caller's callback for all entries that aren't
-    /// skipped by the ignore matcher.
-    fn run(mut self) {
-        while let Some(work) = self.get_work() {
-            if let WalkState::Quit = self.run_one(work) {
-                self.quit_now();
-            }
-        }
-    }
-
-    fn run_one(&mut self, mut work: Work) -> WalkState {
-        let should_visit = self
-            .min_depth
-            .map(|min_depth| work.dent.depth() >= min_depth)
-            .unwrap_or(true);
-
-        // If the work is not a directory, then we can just execute the
-        // caller's callback immediately and move on.
-        if work.is_symlink() || !work.is_dir() {
-            return if should_visit {
-                self.visitor.visit(Ok(work.dent))
-            } else {
-                WalkState::Continue
-            };
-        }
-        if let Some(err) = work.add_parents() {
-            let state = self.visitor.visit(Err(err));
-            if state.is_quit() {
-                return state;
-            }
-        }
-
-        let descend = if let Some(root_device) = work.root_device {
-            match is_same_file_system(root_device, work.dent.path()) {
-                Ok(true) => true,
-                Ok(false) => false,
-                Err(err) => {
-                    let state = self.visitor.visit(Err(err));
-                    if state.is_quit() {
-                        return state;
-                    }
-                    false
-                }
-            }
-        } else {
-            true
-        };
-
-        // Try to read the directory first before we transfer ownership
-        // to the provided closure. Do not unwrap it immediately, though,
-        // as we may receive an `Err` value e.g. in the case when we do not
-        // have sufficient read permissions to list the directory.
-        // In that case we still want to provide the closure with a valid
-        // entry before passing the error value.
-        let depth = work.dent.depth();
-        let readdir = if descend && self.max_depth.is_none_or(|m| depth < m) {
-            Some(work.read_dir())
-        } else {
-            work.add_ignore();
-            None
-        };
-        if should_visit {
-            let state = self.visitor.visit(Ok(work.dent));
-            if !state.is_continue() {
-                return state;
-            }
-        }
-        if !descend {
-            return WalkState::Skip;
-        }
-
-        let readdir = match readdir {
-            Some(readdir) => readdir,
-            None => return WalkState::Skip,
-        };
-        let readdir = match readdir {
-            Ok(readdir) => readdir,
-            Err(err) => {
-                return self.visitor.visit(Err(err));
-            }
-        };
-
-        for result in readdir.entries {
-            let state = self.generate_work(
-                &work.ignore,
-                depth + 1,
-                work.root_device,
-                result,
-            );
-            if state.is_quit() {
-                return state;
-            }
-        }
-        for err in readdir.errors {
-            let state = self.visitor.visit(Err(err));
-            if state.is_quit() {
-                return state;
-            }
-        }
-        WalkState::Continue
-    }
-
-    /// Decides whether to submit the given directory entry as a file to
-    /// search.
-    ///
-    /// If the entry is a path that should be ignored, then this is a no-op.
-    /// Otherwise, the entry is pushed on to the queue. (The actual execution
-    /// of the callback happens in `run_one`.)
-    ///
-    /// If an error occurs while reading the entry, then it is sent to the
-    /// caller's callback.
-    ///
-    /// `ig` is the `Ignore` matcher for the parent directory. `depth` should
-    /// be the depth of this entry. `result` should be the item yielded by
-    /// a directory iterator.
-    fn generate_work(
-        &mut self,
-        ig: &Ignore,
-        depth: usize,
-        root_device: Option<u64>,
-        fs_dent: fs::DirEntry,
-    ) -> WalkState {
-        let mut dent = match DirEntryRaw::from_entry(depth, &fs_dent) {
-            Ok(dent) => DirEntry::new_raw(dent, None),
-            Err(err) => {
-                return self.visitor.visit(Err(err));
-            }
-        };
-        let is_symlink = dent.file_type().map_or(false, |ft| ft.is_symlink());
-        if self.follow_links && is_symlink {
-            let path = dent.path().to_path_buf();
-            dent = match DirEntryRaw::from_path(depth, path, true) {
-                Ok(dent) => DirEntry::new_raw(dent, None),
-                Err(err) => {
-                    return self.visitor.visit(Err(err));
-                }
-            };
-            if dent.is_dir() {
-                if let Err(err) = check_symlink_loop(ig, dent.path(), depth) {
-                    return self.visitor.visit(Err(err));
-                }
-            }
-        }
-        // N.B. See analogous call in the single-threaded implementation about
-        // why it's important for this to come before the checks below.
-        if should_skip_entry(ig, &dent) {
-            return WalkState::Continue;
-        }
-        if let Some(ref stdout) = self.skip {
-            let is_stdout = match path_equals(&dent, stdout) {
-                Ok(is_stdout) => is_stdout,
-                Err(err) => return self.visitor.visit(Err(err)),
-            };
-            if is_stdout {
-                return WalkState::Continue;
-            }
-        }
-        let should_skip_filesize =
-            if self.max_filesize.is_some() && !dent.is_dir() {
-                skip_filesize(
-                    self.max_filesize.unwrap(),
-                    dent.path(),
-                    &dent.metadata().ok(),
-                )
-            } else {
-                false
-            };
-        let should_skip_filtered =
-            if let Some(Filter(predicate)) = &self.filter {
-                !predicate(&dent)
-            } else {
-                false
-            };
-        if !should_skip_filesize && !should_skip_filtered {
-            self.send(Work { dent, ignore: ig.clone(), root_device });
-        }
-        WalkState::Continue
-    }
-
-    /// Returns the next directory to descend into.
-    ///
-    /// If all work has been exhausted, then this returns None. The worker
-    /// should then subsequently quit.
-    fn get_work(&mut self) -> Option<Work> {
-        let mut value = self.recv();
-        loop {
-            // Simulate a priority channel: If quit_now flag is set, we can
-            // receive only quit messages.
-            if self.is_quit_now() {
-                value = Some(Message::Quit)
-            }
-            match value {
-                Some(Message::Work(work)) => {
-                    return Some(work);
-                }
-                Some(Message::Quit) => {
-                    // Repeat quit message to wake up sleeping threads, if
-                    // any. The domino effect will ensure that every thread
-                    // will quit.
-                    self.send_quit();
-                    return None;
-                }
-                None => {
-                    if self.deactivate_worker() == 0 {
-                        // If deactivate_worker() returns 0, every worker thread
-                        // is currently within the critical section between the
-                        // acquire in deactivate_worker() and the release in
-                        // activate_worker() below.  For this to happen, every
-                        // worker's local deque must be simultaneously empty,
-                        // meaning there is no more work left at all.
-                        self.send_quit();
-                        return None;
-                    }
-                    // Wait for next `Work` or `Quit` message.
-                    loop {
-                        if self.is_quit_now() {
-                            return None;
-                        }
-                        if let Some(v) = self.recv() {
-                            self.activate_worker();
-                            value = Some(v);
-                            break;
-                        }
-                        // Our stack isn't blocking. Instead of burning the
-                        // CPU waiting, we let the thread sleep for a bit. In
-                        // general, this tends to only occur once the search is
-                        // approaching termination.
-                        let dur = std::time::Duration::from_millis(1);
-                        std::thread::sleep(dur);
-                    }
-                }
-            }
-        }
-    }
-
-    /// Indicates that all workers should quit immediately.
-    fn quit_now(&self) {
-        self.quit_now.store(true, AtomicOrdering::SeqCst);
-    }
-
-    /// Returns true if this worker should quit immediately.
-    fn is_quit_now(&self) -> bool {
-        self.quit_now.load(AtomicOrdering::SeqCst)
-    }
-
-    /// Send work.
-    fn send(&self, work: Work) {
-        self.stack.push(Message::Work(work));
-    }
-
-    /// Send a quit message.
-    fn send_quit(&self) {
-        self.stack.push(Message::Quit);
-    }
-
-    /// Receive work.
-    fn recv(&self) -> Option<Message> {
-        self.stack.pop()
-    }
-
-    /// Deactivates a worker and returns the number of currently active workers.
-    fn deactivate_worker(&self) -> usize {
-        self.active_workers.fetch_sub(1, AtomicOrdering::Acquire) - 1
-    }
-
-    /// Reactivates a worker.
-    fn activate_worker(&self) {
-        self.active_workers.fetch_add(1, AtomicOrdering::Release);
-    }
-}
-
-impl<'s> Drop for Worker<'s> {
-    fn drop(&mut self) {
-        if std::thread::panicking() {
-            self.quit_now();
-        }
-    }
-}
-
-fn check_symlink_loop(
-    ig_parent: &Ignore,
-    child_path: &Path,
-    child_depth: usize,
-) -> Result<(), Error> {
-    let hchild = Handle::from_path(child_path).map_err(|err| {
-        Error::from(err).with_path(child_path).with_depth(child_depth)
-    })?;
-    for ig in ig_parent.parents().take_while(|ig| !ig.is_absolute_parent()) {
-        let h = Handle::from_path(ig.path()).map_err(|err| {
-            Error::from(err).with_path(child_path).with_depth(child_depth)
-        })?;
-        if hchild == h {
-            return Err(Error::Loop {
-                ancestor: ig.path().to_path_buf(),
-                child: child_path.to_path_buf(),
-            }
-            .with_depth(child_depth));
-        }
-    }
-    Ok(())
-}
-
-// Before calling this function, make sure that you ensure that is really
-// necessary as the arguments imply a file stat.
-fn skip_filesize(
-    max_filesize: u64,
-    path: &Path,
-    ent: &Option<Metadata>,
-) -> bool {
-    let filesize = match *ent {
-        Some(ref md) => Some(md.len()),
-        None => None,
-    };
-
-    if let Some(fs) = filesize {
-        if fs > max_filesize {
-            log::debug!("ignoring {}: {} bytes", path.display(), fs);
-            true
-        } else {
-            false
-        }
-    } else {
-        false
-    }
-}
-
-fn should_skip_entry(ig: &Ignore, dent: &DirEntry) -> bool {
-    let m = ig.matched_dir_entry(dent);
-    if m.is_ignore() {
-        log::debug!("ignoring {}: {:?}", dent.path().display(), m);
-        true
-    } else if m.is_whitelist() {
-        log::debug!("whitelisting {}: {:?}", dent.path().display(), m);
-        false
-    } else {
-        false
-    }
-}
-
-/// Returns a handle to stdout for filtering search.
-///
-/// A handle is returned if and only if stdout is being redirected to a file.
-/// The handle returned corresponds to that file.
-///
-/// This can be used to ensure that we do not attempt to search a file that we
-/// may also be writing to.
-fn stdout_handle() -> Option<Handle> {
-    let h = match Handle::stdout() {
-        Err(_) => return None,
-        Ok(h) => h,
-    };
-    let md = match h.as_file().metadata() {
-        Err(_) => return None,
-        Ok(md) => md,
-    };
-    if !md.is_file() {
-        return None;
-    }
-    Some(h)
-}
-
-/// Returns true if and only if the given directory entry is believed to be
-/// equivalent to the given handle. If there was a problem querying the path
-/// for information to determine equality, then that error is returned.
-fn path_equals(dent: &DirEntry, handle: &Handle) -> Result<bool, Error> {
-    #[cfg(unix)]
-    fn never_equal(dent: &DirEntry, handle: &Handle) -> bool {
-        dent.ino() != Some(handle.ino())
-    }
-
-    #[cfg(not(unix))]
-    fn never_equal(_: &DirEntry, _: &Handle) -> bool {
-        false
-    }
-
-    // If we know for sure that these two things aren't equal, then avoid
-    // the costly extra stat call to determine equality.
-    if dent.is_stdin() || never_equal(dent, handle) {
-        return Ok(false);
-    }
-    Handle::from_path(dent.path()).map(|h| &h == handle).map_err(|err| {
-        Error::Io(err).with_depth(dent.depth()).with_path(dent.path())
-    })
-}
-
-/// Returns true if the given walkdir entry corresponds to a directory.
-///
-/// This is normally just `dent.file_type().is_dir()`, but when we aren't
-/// following symlinks, the root directory entry may be a symlink to a
-/// directory that we *do* follow---by virtue of it being specified by the user
-/// explicitly. In that case, we need to follow the symlink and query whether
-/// it's a directory or not. But we only do this for root entries to avoid an
-/// additional stat check in most cases.
-fn walkdir_is_dir(dent: &walkdir::DirEntry) -> bool {
-    if dent.file_type().is_dir() {
-        return true;
-    }
-    if !dent.file_type().is_symlink() || dent.depth() > 0 {
-        return false;
-    }
-    dent.path().metadata().ok().map_or(false, |md| md.file_type().is_dir())
-}
-
-/// Returns true if and only if the given path is on the same device as the
-/// given root device.
-fn is_same_file_system(root_device: u64, path: &Path) -> Result<bool, Error> {
-    let dent_device =
-        device_num(path).map_err(|err| Error::Io(err).with_path(path))?;
-    Ok(root_device == dent_device)
-}
-
-#[cfg(unix)]
-fn device_num<P: AsRef<Path>>(path: P) -> io::Result<u64> {
-    use std::os::unix::fs::MetadataExt;
-
-    path.as_ref().metadata().map(|md| md.dev())
-}
-
-#[cfg(windows)]
-fn device_num<P: AsRef<Path>>(path: P) -> io::Result<u64> {
-    use winapi_util::{Handle, file};
-
-    let h = Handle::from_path_any(path)?;
-    file::information(h).map(|info| info.volume_serial_number())
-}
-
-#[cfg(not(any(unix, windows)))]
-fn device_num<P: AsRef<Path>>(_: P) -> io::Result<u64> {
-    Err(io::Error::new(
-        io::ErrorKind::Other,
-        "walkdir: same_file_system option not supported on this platform",
-    ))
-}
-
-#[cfg(test)]
-mod tests {
-    use std::ffi::OsStr;
-    use std::fs::{self, File};
-    use std::io::Write;
-    use std::path::Path;
-    use std::sync::{Arc, Mutex};
-
-    use super::{DirEntry, WalkBuilder, WalkState};
-    use crate::tests::TempDir;
-
-    fn wfile<P: AsRef<Path>>(path: P, contents: &str) {
-        let mut file = File::create(path).unwrap();
-        file.write_all(contents.as_bytes()).unwrap();
-    }
-
-    fn wfile_size<P: AsRef<Path>>(path: P, size: u64) {
-        let file = File::create(path).unwrap();
-        file.set_len(size).unwrap();
-    }
-
-    #[cfg(unix)]
-    fn symlink<P: AsRef<Path>, Q: AsRef<Path>>(src: P, dst: Q) {
-        use std::os::unix::fs::symlink;
-        symlink(src, dst).unwrap();
-    }
-
-    fn mkdirp<P: AsRef<Path>>(path: P) {
-        fs::create_dir_all(path).unwrap();
-    }
-
-    fn normal_path(unix: &str) -> String {
-        if cfg!(windows) { unix.replace("\\", "/") } else { unix.to_string() }
-    }
-
-    fn walk_collect(prefix: &Path, builder: &WalkBuilder) -> Vec<String> {
-        let mut paths = vec![];
-        for result in builder.build() {
-            let dent = match result {
-                Err(_) => continue,
-                Ok(dent) => dent,
-            };
-            let path = dent.path().strip_prefix(prefix).unwrap();
-            if path.as_os_str().is_empty() {
-                continue;
-            }
-            paths.push(normal_path(path.to_str().unwrap()));
-        }
-        paths.sort();
-        paths
-    }
-
-    fn walk_collect_parallel(
-        prefix: &Path,
-        builder: &WalkBuilder,
-    ) -> Vec<String> {
-        let mut paths = vec![];
-        for dent in walk_collect_entries_parallel(builder) {
-            let path = dent.path().strip_prefix(prefix).unwrap();
-            if path.as_os_str().is_empty() {
-                continue;
-            }
-            paths.push(normal_path(path.to_str().unwrap()));
-        }
-        paths.sort();
-        paths
-    }
-
-    fn walk_collect_entries_parallel(builder: &WalkBuilder) -> Vec<DirEntry> {
-        let dents = Arc::new(Mutex::new(vec![]));
-        builder.build_parallel().run(|| {
-            let dents = dents.clone();
-            Box::new(move |result| {
-                if let Ok(dent) = result {
-                    dents.lock().unwrap().push(dent);
-                }
-                WalkState::Continue
-            })
-        });
-
-        let dents = dents.lock().unwrap();
-        dents.to_vec()
-    }
-
-    fn mkpaths(paths: &[&str]) -> Vec<String> {
-        let mut paths: Vec<_> = paths.iter().map(|s| s.to_string()).collect();
-        paths.sort();
-        paths
-    }
-
-    fn tmpdir() -> TempDir {
-        TempDir::new().unwrap()
-    }
-
-    fn assert_paths(prefix: &Path, builder: &WalkBuilder, expected: &[&str]) {
-        let got = walk_collect(prefix, builder);
-        assert_eq!(got, mkpaths(expected), "single threaded");
-        let got = walk_collect_parallel(prefix, builder);
-        assert_eq!(got, mkpaths(expected), "parallel");
-    }
-
-    #[test]
-    fn no_ignores() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b/c"));
-        mkdirp(td.path().join("x/y"));
-        wfile(td.path().join("a/b/foo"), "");
-        wfile(td.path().join("x/y/foo"), "");
-
-        assert_paths(
-            td.path(),
-            &WalkBuilder::new(td.path()),
-            &["x", "x/y", "x/y/foo", "a", "a/b", "a/b/foo", "a/b/c"],
-        );
-    }
-
-    #[test]
-    fn custom_ignore() {
-        let td = tmpdir();
-        let custom_ignore = ".customignore";
-        mkdirp(td.path().join("a"));
-        wfile(td.path().join(custom_ignore), "foo");
-        wfile(td.path().join("foo"), "");
-        wfile(td.path().join("a/foo"), "");
-        wfile(td.path().join("bar"), "");
-        wfile(td.path().join("a/bar"), "");
-
-        let mut builder = WalkBuilder::new(td.path());
-        builder.add_custom_ignore_filename(&custom_ignore);
-        assert_paths(td.path(), &builder, &["bar", "a", "a/bar"]);
-    }
-
-    #[test]
-    fn custom_ignore_exclusive_use() {
-        let td = tmpdir();
-        let custom_ignore = ".customignore";
-        mkdirp(td.path().join("a"));
-        wfile(td.path().join(custom_ignore), "foo");
-        wfile(td.path().join("foo"), "");
-        wfile(td.path().join("a/foo"), "");
-        wfile(td.path().join("bar"), "");
-        wfile(td.path().join("a/bar"), "");
-
-        let mut builder = WalkBuilder::new(td.path());
-        builder.ignore(false);
-        builder.git_ignore(false);
-        builder.git_global(false);
-        builder.git_exclude(false);
-        builder.add_custom_ignore_filename(&custom_ignore);
-        assert_paths(td.path(), &builder, &["bar", "a", "a/bar"]);
-    }
-
-    #[test]
-    fn gitignore() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("a"));
-        wfile(td.path().join(".gitignore"), "foo");
-        wfile(td.path().join("foo"), "");
-        wfile(td.path().join("a/foo"), "");
-        wfile(td.path().join("bar"), "");
-        wfile(td.path().join("a/bar"), "");
-
-        assert_paths(
-            td.path(),
-            &WalkBuilder::new(td.path()),
-            &["bar", "a", "a/bar"],
-        );
-    }
-
-    #[test]
-    fn explicit_ignore() {
-        let td = tmpdir();
-        let igpath = td.path().join(".not-an-ignore");
-        mkdirp(td.path().join("a"));
-        wfile(&igpath, "foo");
-        wfile(td.path().join("foo"), "");
-        wfile(td.path().join("a/foo"), "");
-        wfile(td.path().join("bar"), "");
-        wfile(td.path().join("a/bar"), "");
-
-        let mut builder = WalkBuilder::new(td.path());
-        assert!(builder.add_ignore(&igpath).is_none());
-        assert_paths(td.path(), &builder, &["bar", "a", "a/bar"]);
-    }
-
-    #[test]
-    fn explicit_ignore_exclusive_use() {
-        let td = tmpdir();
-        let igpath = td.path().join(".not-an-ignore");
-        mkdirp(td.path().join("a"));
-        wfile(&igpath, "foo");
-        wfile(td.path().join("foo"), "");
-        wfile(td.path().join("a/foo"), "");
-        wfile(td.path().join("bar"), "");
-        wfile(td.path().join("a/bar"), "");
-
-        let mut builder = WalkBuilder::new(td.path());
-        builder.standard_filters(false);
-        assert!(builder.add_ignore(&igpath).is_none());
-        assert_paths(
-            td.path(),
-            &builder,
-            &[".not-an-ignore", "bar", "a", "a/bar"],
-        );
-    }
-
-    #[test]
-    fn gitignore_parent() {
-        let td = tmpdir();
-        mkdirp(td.path().join(".git"));
-        mkdirp(td.path().join("a"));
-        wfile(td.path().join(".gitignore"), "foo");
-        wfile(td.path().join("a/foo"), "");
-        wfile(td.path().join("a/bar"), "");
-
-        let root = td.path().join("a");
-        assert_paths(&root, &WalkBuilder::new(&root), &["bar"]);
-    }
-
-    #[test]
-    fn max_depth() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b/c"));
-        wfile(td.path().join("foo"), "");
-        wfile(td.path().join("a/foo"), "");
-        wfile(td.path().join("a/b/foo"), "");
-        wfile(td.path().join("a/b/c/foo"), "");
-
-        let mut builder = WalkBuilder::new(td.path());
-        assert_paths(
-            td.path(),
-            &builder,
-            &["a", "a/b", "a/b/c", "foo", "a/foo", "a/b/foo", "a/b/c/foo"],
-        );
-        assert_paths(td.path(), builder.max_depth(Some(0)), &[]);
-        assert_paths(td.path(), builder.max_depth(Some(1)), &["a", "foo"]);
-        assert_paths(
-            td.path(),
-            builder.max_depth(Some(2)),
-            &["a", "a/b", "foo", "a/foo"],
-        );
-    }
-
-    #[test]
-    fn max_depth_does_not_load_unreachable_ignore_files() {
-        let td = tmpdir();
-        let leaf = td.path().join("leaf");
-        mkdirp(&leaf);
-        wfile(leaf.join(".ignore"), "{invalid\n");
-
-        let mut builder = WalkBuilder::new(td.path());
-        builder.max_depth(Some(1));
-        let entry = builder
-            .build()
-            .find_map(|result| {
-                let entry = result.unwrap();
-                (entry.path() == leaf).then_some(entry)
-            })
-            .unwrap();
-
-        assert!(entry.error().is_none());
-        assert_paths(td.path(), &builder, &["leaf"]);
-    }
-
-    #[test]
-    fn min_depth() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b/c"));
-        wfile(td.path().join("foo"), "");
-        wfile(td.path().join("a/foo"), "");
-        wfile(td.path().join("a/b/foo"), "");
-        wfile(td.path().join("a/b/c/foo"), "");
-
-        let builder = WalkBuilder::new(td.path());
-        assert_paths(
-            td.path(),
-            &builder,
-            &["a", "a/b", "a/b/c", "foo", "a/foo", "a/b/foo", "a/b/c/foo"],
-        );
-        let mut builder = WalkBuilder::new(td.path());
-        assert_paths(
-            td.path(),
-            &builder.min_depth(Some(0)),
-            &["a", "a/b", "a/b/c", "foo", "a/foo", "a/b/foo", "a/b/c/foo"],
-        );
-        assert_paths(
-            td.path(),
-            &builder.min_depth(Some(1)),
-            &["a", "a/b", "a/b/c", "foo", "a/foo", "a/b/foo", "a/b/c/foo"],
-        );
-        assert_paths(
-            td.path(),
-            builder.min_depth(Some(2)),
-            &["a/b", "a/b/c", "a/b/c/foo", "a/b/foo", "a/foo"],
-        );
-        assert_paths(
-            td.path(),
-            builder.min_depth(Some(3)),
-            &["a/b/c", "a/b/c/foo", "a/b/foo"],
-        );
-        assert_paths(td.path(), builder.min_depth(Some(10)), &[]);
-
-        assert_paths(
-            td.path(),
-            builder.min_depth(Some(2)).max_depth(Some(1)),
-            &["a/b", "a/foo"],
-        );
-    }
-
-    #[test]
-    fn max_filesize() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b"));
-        wfile_size(td.path().join("foo"), 0);
-        wfile_size(td.path().join("bar"), 400);
-        wfile_size(td.path().join("baz"), 600);
-        wfile_size(td.path().join("a/foo"), 600);
-        wfile_size(td.path().join("a/bar"), 500);
-        wfile_size(td.path().join("a/baz"), 200);
-
-        let mut builder = WalkBuilder::new(td.path());
-        assert_paths(
-            td.path(),
-            &builder,
-            &["a", "a/b", "foo", "bar", "baz", "a/foo", "a/bar", "a/baz"],
-        );
-        assert_paths(
-            td.path(),
-            builder.max_filesize(Some(0)),
-            &["a", "a/b", "foo"],
-        );
-        assert_paths(
-            td.path(),
-            builder.max_filesize(Some(500)),
-            &["a", "a/b", "foo", "bar", "a/bar", "a/baz"],
-        );
-        assert_paths(
-            td.path(),
-            builder.max_filesize(Some(50000)),
-            &["a", "a/b", "foo", "bar", "baz", "a/foo", "a/bar", "a/baz"],
-        );
-    }
-
-    #[cfg(unix)] // because symlinks on windows are weird
-    #[test]
-    fn symlinks() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b"));
-        symlink(td.path().join("a/b"), td.path().join("z"));
-        wfile(td.path().join("a/b/foo"), "");
-
-        let mut builder = WalkBuilder::new(td.path());
-        assert_paths(td.path(), &builder, &["a", "a/b", "a/b/foo", "z"]);
-        assert_paths(
-            td.path(),
-            &builder.follow_links(true),
-            &["a", "a/b", "a/b/foo", "z", "z/foo"],
-        );
-    }
-
-    #[cfg(unix)] // because symlinks on windows are weird
-    #[test]
-    fn first_path_not_symlink() {
-        let td = tmpdir();
-        mkdirp(td.path().join("foo"));
-
-        let dents = WalkBuilder::new(td.path().join("foo"))
-            .build()
-            .into_iter()
-            .collect::<Result<Vec<_>, _>>()
-            .unwrap();
-        assert_eq!(1, dents.len());
-        assert!(!dents[0].path_is_symlink());
-
-        let dents = walk_collect_entries_parallel(&WalkBuilder::new(
-            td.path().join("foo"),
-        ));
-        assert_eq!(1, dents.len());
-        assert!(!dents[0].path_is_symlink());
-    }
-
-    #[cfg(unix)] // because symlinks on windows are weird
-    #[test]
-    fn symlink_loop() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b"));
-        symlink(td.path().join("a"), td.path().join("a/b/c"));
-
-        let mut builder = WalkBuilder::new(td.path());
-        assert_paths(td.path(), &builder, &["a", "a/b", "a/b/c"]);
-        assert_paths(td.path(), &builder.follow_links(true), &["a", "a/b"]);
-    }
-
-    // It's a little tricky to test the 'same_file_system' option since
-    // we need an environment with more than one file system. We adopt a
-    // heuristic where /sys is typically a distinct volume on Linux and roll
-    // with that.
-    #[test]
-    #[cfg(target_os = "linux")]
-    fn same_file_system() {
-        use super::device_num;
-
-        // If for some reason /sys doesn't exist or isn't a directory, just
-        // skip this test.
-        if !Path::new("/sys").is_dir() {
-            return;
-        }
-
-        // If our test directory actually isn't a different volume from /sys,
-        // then this test is meaningless and we shouldn't run it.
-        let td = tmpdir();
-        if device_num(td.path()).unwrap() == device_num("/sys").unwrap() {
-            return;
-        }
-
-        mkdirp(td.path().join("same_file"));
-        symlink("/sys", td.path().join("same_file").join("alink"));
-
-        // Create a symlink to sys and enable following symlinks. If the
-        // same_file_system option doesn't work, then this probably will hit a
-        // permission error. Otherwise, it should just skip over the symlink
-        // completely.
-        let mut builder = WalkBuilder::new(td.path());
-        builder.follow_links(true).same_file_system(true);
-        assert_paths(td.path(), &builder, &["same_file", "same_file/alink"]);
-    }
-
-    #[cfg(target_os = "linux")]
-    #[test]
-    fn no_read_permissions() {
-        let dir_path = Path::new("/root");
-
-        // There's no /etc/sudoers.d, skip the test.
-        if !dir_path.is_dir() {
-            return;
-        }
-        // We're the root, so the test won't check what we want it to.
-        if fs::read_dir(&dir_path).is_ok() {
-            return;
-        }
-
-        // Check that we can't descend but get an entry for the parent dir.
-        let builder = WalkBuilder::new(&dir_path);
-        assert_paths(dir_path.parent().unwrap(), &builder, &["root"]);
-    }
-
-    #[test]
-    fn filter() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b/c"));
-        mkdirp(td.path().join("x/y"));
-        wfile(td.path().join("a/b/foo"), "");
-        wfile(td.path().join("x/y/foo"), "");
-
-        assert_paths(
-            td.path(),
-            &WalkBuilder::new(td.path()),
-            &["x", "x/y", "x/y/foo", "a", "a/b", "a/b/foo", "a/b/c"],
-        );
-
-        assert_paths(
-            td.path(),
-            &WalkBuilder::new(td.path())
-                .filter_entry(|entry| entry.file_name() != OsStr::new("a")),
-            &["x", "x/y", "x/y/foo"],
-        );
-    }
-
-    #[test]
-    fn empty() {
-        let td = tmpdir();
-        assert_paths(td.path(), &WalkBuilder::empty(), &[]);
-
-        let empty_paths: Vec<&OsStr> = Vec::new();
-        assert_paths(td.path(), &WalkBuilder::from_iter(empty_paths), &[]);
-    }
-
-    #[test]
-    fn from_iter() {
-        let td = tmpdir();
-        mkdirp(td.path().join("a/b/c"));
-        mkdirp(td.path().join("d/e/f"));
-        mkdirp(td.path().join("x/y"));
-        wfile(td.path().join("a/b/foo"), "");
-        wfile(td.path().join("d/e/f/foo"), "");
-        wfile(td.path().join("x/y/foo"), "");
-
-        let paths = vec![
-            td.path().join("a"),
-            td.path().join("d"),
-            td.path().join("x"),
-        ];
-
-        assert_paths(
-            td.path(),
-            &WalkBuilder::from_iter(paths),
-            &[
-                "x",
-                "x/y",
-                "x/y/foo",
-                "d",
-                "d/e",
-                "d/e/f",
-                "d/e/f/foo",
-                "a",
-                "a/b",
-                "a/b/foo",
-                "a/b/c",
-            ],
-        );
-    }
-
-    // This should always panic and never hang.
-    //
-    // Ref: https://github.com/BurntSushi/ripgrep/issues/3009
-    #[test]
-    #[should_panic]
-    fn panic_in_parallel() {
-        let td = tmpdir();
-        wfile(td.path().join("foo.txt"), "");
-
-        WalkBuilder::new(td.path())
-            .threads(40)
-            .build_parallel()
-            .run(|| Box::new(|_| panic!("oops!")));
-    }
-
-    // This should always panic and never hang. The first call to the visitor
-    // builder is used while processing the root paths. Previously, a panic on
-    // the third call occurred after the first worker had already been spawned,
-    // leaving it waiting indefinitely for workers that were never created.
-    #[test]
-    #[should_panic(expected = "builder panic")]
-    fn panic_in_parallel_builder() {
-        let td = tmpdir();
-        wfile(td.path().join("foo.txt"), "");
-
-        let mut builds = 0;
-        WalkBuilder::new(td.path()).threads(2).build_parallel().run(|| {
-            builds += 1;
-            if builds == 3 {
-                panic!("builder panic");
-            }
-            Box::new(|_| WalkState::Continue)
-        });
-    }
-}
diff --git a/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.gitignore b/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.gitignore
deleted file mode 100644
index ac09e12f7..000000000
--- a/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.gitignore
+++ /dev/null
@@ -1,216 +0,0 @@
-# Based on https://github.com/behnam/gitignore-test/blob/master/.gitignore
-
-### file in root
-
-# MATCH /file_root_1
-file_root_00
-
-# NO_MATCH
-file_root_01/
-
-# NO_MATCH
-file_root_02/*
-
-# NO_MATCH
-file_root_03/**
-
-
-# MATCH /file_root_10
-/file_root_10
-
-# NO_MATCH
-/file_root_11/
-
-# NO_MATCH
-/file_root_12/*
-
-# NO_MATCH
-/file_root_13/**
-
-
-# NO_MATCH
-*/file_root_20
-
-# NO_MATCH
-*/file_root_21/
-
-# NO_MATCH
-*/file_root_22/*
-
-# NO_MATCH
-*/file_root_23/**
-
-
-# MATCH /file_root_30
-**/file_root_30
-
-# NO_MATCH
-**/file_root_31/
-
-# NO_MATCH
-**/file_root_32/*
-
-# NO_MATCH
-**/file_root_33/**
-
-
-### file in sub-dir
-
-# MATCH /parent_dir/file_deep_1
-file_deep_00
-
-# NO_MATCH
-file_deep_01/
-
-# NO_MATCH
-file_deep_02/*
-
-# NO_MATCH
-file_deep_03/**
-
-
-# NO_MATCH
-/file_deep_10
-
-# NO_MATCH
-/file_deep_11/
-
-# NO_MATCH
-/file_deep_12/*
-
-# NO_MATCH
-/file_deep_13/**
-
-
-# MATCH /parent_dir/file_deep_20
-*/file_deep_20
-
-# NO_MATCH
-*/file_deep_21/
-
-# NO_MATCH
-*/file_deep_22/*
-
-# NO_MATCH
-*/file_deep_23/**
-
-
-# MATCH /parent_dir/file_deep_30
-**/file_deep_30
-
-# NO_MATCH
-**/file_deep_31/
-
-# NO_MATCH
-**/file_deep_32/*
-
-# NO_MATCH
-**/file_deep_33/**
-
-
-### dir in root
-
-# MATCH /dir_root_00
-dir_root_00
-
-# MATCH /dir_root_01
-dir_root_01/
-
-# MATCH /dir_root_02
-dir_root_02/*
-
-# MATCH /dir_root_03
-dir_root_03/**
-
-
-# MATCH /dir_root_10
-/dir_root_10
-
-# MATCH /dir_root_11
-/dir_root_11/
-
-# MATCH /dir_root_12
-/dir_root_12/*
-
-# MATCH /dir_root_13
-/dir_root_13/**
-
-
-# NO_MATCH
-*/dir_root_20
-
-# NO_MATCH
-*/dir_root_21/
-
-# NO_MATCH
-*/dir_root_22/*
-
-# NO_MATCH
-*/dir_root_23/**
-
-
-# MATCH /dir_root_30
-**/dir_root_30
-
-# MATCH /dir_root_31
-**/dir_root_31/
-
-# MATCH /dir_root_32
-**/dir_root_32/*
-
-# MATCH /dir_root_33
-**/dir_root_33/**
-
-
-### dir in sub-dir
-
-# MATCH /parent_dir/dir_deep_00
-dir_deep_00
-
-# MATCH /parent_dir/dir_deep_01
-dir_deep_01/
-
-# NO_MATCH
-dir_deep_02/*
-
-# NO_MATCH
-dir_deep_03/**
-
-
-# NO_MATCH
-/dir_deep_10
-
-# NO_MATCH
-/dir_deep_11/
-
-# NO_MATCH
-/dir_deep_12/*
-
-# NO_MATCH
-/dir_deep_13/**
-
-
-# MATCH /parent_dir/dir_deep_20
-*/dir_deep_20
-
-# MATCH /parent_dir/dir_deep_21
-*/dir_deep_21/
-
-# MATCH /parent_dir/dir_deep_22
-*/dir_deep_22/*
-
-# MATCH /parent_dir/dir_deep_23
-*/dir_deep_23/**
-
-
-# MATCH /parent_dir/dir_deep_30
-**/dir_deep_30
-
-# MATCH /parent_dir/dir_deep_31
-**/dir_deep_31/
-
-# MATCH /parent_dir/dir_deep_32
-**/dir_deep_32/*
-
-# MATCH /parent_dir/dir_deep_33
-**/dir_deep_33/**
diff --git a/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.rs b/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.rs
deleted file mode 100644
index ecb7b47e3..000000000
--- a/crates/ignore/tests/gitignore_matched_path_or_any_parents_tests.rs
+++ /dev/null
@@ -1,318 +0,0 @@
-use std::path::Path;
-
-use ignore::gitignore::{Gitignore, GitignoreBuilder};
-
-const IGNORE_FILE: &'static str =
-    "tests/gitignore_matched_path_or_any_parents_tests.gitignore";
-
-fn get_gitignore() -> Gitignore {
-    let mut builder = GitignoreBuilder::new("ROOT");
-    let error = builder.add(IGNORE_FILE);
-    assert!(error.is_none(), "failed to open gitignore file");
-    builder.build().unwrap()
-}
-
-#[test]
-#[should_panic(expected = "path is expected to be under the root")]
-fn test_path_should_be_under_root() {
-    let gitignore = get_gitignore();
-    let path = "/tmp/some_file";
-    gitignore.matched_path_or_any_parents(Path::new(path), false);
-    assert!(false);
-}
-
-#[test]
-fn test_files_in_root() {
-    let gitignore = get_gitignore();
-    let m = |path: &str| {
-        gitignore.matched_path_or_any_parents(Path::new(path), false)
-    };
-
-    // 0x
-    assert!(m("ROOT/file_root_00").is_ignore());
-    assert!(m("ROOT/file_root_01").is_none());
-    assert!(m("ROOT/file_root_02").is_none());
-    assert!(m("ROOT/file_root_03").is_none());
-
-    // 1x
-    assert!(m("ROOT/file_root_10").is_ignore());
-    assert!(m("ROOT/file_root_11").is_none());
-    assert!(m("ROOT/file_root_12").is_none());
-    assert!(m("ROOT/file_root_13").is_none());
-
-    // 2x
-    assert!(m("ROOT/file_root_20").is_none());
-    assert!(m("ROOT/file_root_21").is_none());
-    assert!(m("ROOT/file_root_22").is_none());
-    assert!(m("ROOT/file_root_23").is_none());
-
-    // 3x
-    assert!(m("ROOT/file_root_30").is_ignore());
-    assert!(m("ROOT/file_root_31").is_none());
-    assert!(m("ROOT/file_root_32").is_none());
-    assert!(m("ROOT/file_root_33").is_none());
-}
-
-#[test]
-fn test_files_in_deep() {
-    let gitignore = get_gitignore();
-    let m = |path: &str| {
-        gitignore.matched_path_or_any_parents(Path::new(path), false)
-    };
-
-    // 0x
-    assert!(m("ROOT/parent_dir/file_deep_00").is_ignore());
-    assert!(m("ROOT/parent_dir/file_deep_01").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_02").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_03").is_none());
-
-    // 1x
-    assert!(m("ROOT/parent_dir/file_deep_10").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_11").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_12").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_13").is_none());
-
-    // 2x
-    assert!(m("ROOT/parent_dir/file_deep_20").is_ignore());
-    assert!(m("ROOT/parent_dir/file_deep_21").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_22").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_23").is_none());
-
-    // 3x
-    assert!(m("ROOT/parent_dir/file_deep_30").is_ignore());
-    assert!(m("ROOT/parent_dir/file_deep_31").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_32").is_none());
-    assert!(m("ROOT/parent_dir/file_deep_33").is_none());
-}
-
-#[test]
-fn test_dirs_in_root() {
-    let gitignore = get_gitignore();
-    let m = |path: &str, is_dir: bool| {
-        gitignore.matched_path_or_any_parents(Path::new(path), is_dir)
-    };
-
-    // 00
-    assert!(m("ROOT/dir_root_00", true).is_ignore());
-    assert!(m("ROOT/dir_root_00/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_00/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_00/child_dir/file", false).is_ignore());
-
-    // 01
-    assert!(m("ROOT/dir_root_01", true).is_ignore());
-    assert!(m("ROOT/dir_root_01/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_01/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_01/child_dir/file", false).is_ignore());
-
-    // 02
-    assert!(m("ROOT/dir_root_02", true).is_none()); // dir itself doesn't match
-    assert!(m("ROOT/dir_root_02/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_02/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_02/child_dir/file", false).is_ignore());
-
-    // 03
-    assert!(m("ROOT/dir_root_03", true).is_none()); // dir itself doesn't match
-    assert!(m("ROOT/dir_root_03/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_03/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_03/child_dir/file", false).is_ignore());
-
-    // 10
-    assert!(m("ROOT/dir_root_10", true).is_ignore());
-    assert!(m("ROOT/dir_root_10/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_10/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_10/child_dir/file", false).is_ignore());
-
-    // 11
-    assert!(m("ROOT/dir_root_11", true).is_ignore());
-    assert!(m("ROOT/dir_root_11/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_11/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_11/child_dir/file", false).is_ignore());
-
-    // 12
-    assert!(m("ROOT/dir_root_12", true).is_none()); // dir itself doesn't match
-    assert!(m("ROOT/dir_root_12/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_12/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_12/child_dir/file", false).is_ignore());
-
-    // 13
-    assert!(m("ROOT/dir_root_13", true).is_none());
-    assert!(m("ROOT/dir_root_13/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_13/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_13/child_dir/file", false).is_ignore());
-
-    // 20
-    assert!(m("ROOT/dir_root_20", true).is_none());
-    assert!(m("ROOT/dir_root_20/file", false).is_none());
-    assert!(m("ROOT/dir_root_20/child_dir", true).is_none());
-    assert!(m("ROOT/dir_root_20/child_dir/file", false).is_none());
-
-    // 21
-    assert!(m("ROOT/dir_root_21", true).is_none());
-    assert!(m("ROOT/dir_root_21/file", false).is_none());
-    assert!(m("ROOT/dir_root_21/child_dir", true).is_none());
-    assert!(m("ROOT/dir_root_21/child_dir/file", false).is_none());
-
-    // 22
-    assert!(m("ROOT/dir_root_22", true).is_none());
-    assert!(m("ROOT/dir_root_22/file", false).is_none());
-    assert!(m("ROOT/dir_root_22/child_dir", true).is_none());
-    assert!(m("ROOT/dir_root_22/child_dir/file", false).is_none());
-
-    // 23
-    assert!(m("ROOT/dir_root_23", true).is_none());
-    assert!(m("ROOT/dir_root_23/file", false).is_none());
-    assert!(m("ROOT/dir_root_23/child_dir", true).is_none());
-    assert!(m("ROOT/dir_root_23/child_dir/file", false).is_none());
-
-    // 30
-    assert!(m("ROOT/dir_root_30", true).is_ignore());
-    assert!(m("ROOT/dir_root_30/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_30/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_30/child_dir/file", false).is_ignore());
-
-    // 31
-    assert!(m("ROOT/dir_root_31", true).is_ignore());
-    assert!(m("ROOT/dir_root_31/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_31/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_31/child_dir/file", false).is_ignore());
-
-    // 32
-    assert!(m("ROOT/dir_root_32", true).is_none()); // dir itself doesn't match
-    assert!(m("ROOT/dir_root_32/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_32/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_32/child_dir/file", false).is_ignore());
-
-    // 33
-    assert!(m("ROOT/dir_root_33", true).is_none()); // dir itself doesn't match
-    assert!(m("ROOT/dir_root_33/file", false).is_ignore());
-    assert!(m("ROOT/dir_root_33/child_dir", true).is_ignore());
-    assert!(m("ROOT/dir_root_33/child_dir/file", false).is_ignore());
-}
-
-#[test]
-fn test_dirs_in_deep() {
-    let gitignore = get_gitignore();
-    let m = |path: &str, is_dir: bool| {
-        gitignore.matched_path_or_any_parents(Path::new(path), is_dir)
-    };
-
-    // 00
-    assert!(m("ROOT/parent_dir/dir_deep_00", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_00/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_00/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_00/child_dir/file", false).is_ignore()
-    );
-
-    // 01
-    assert!(m("ROOT/parent_dir/dir_deep_01", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_01/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_01/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_01/child_dir/file", false).is_ignore()
-    );
-
-    // 02
-    assert!(m("ROOT/parent_dir/dir_deep_02", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_02/file", false).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_02/child_dir", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_02/child_dir/file", false).is_none());
-
-    // 03
-    assert!(m("ROOT/parent_dir/dir_deep_03", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_03/file", false).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_03/child_dir", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_03/child_dir/file", false).is_none());
-
-    // 10
-    assert!(m("ROOT/parent_dir/dir_deep_10", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_10/file", false).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_10/child_dir", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_10/child_dir/file", false).is_none());
-
-    // 11
-    assert!(m("ROOT/parent_dir/dir_deep_11", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_11/file", false).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_11/child_dir", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_11/child_dir/file", false).is_none());
-
-    // 12
-    assert!(m("ROOT/parent_dir/dir_deep_12", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_12/file", false).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_12/child_dir", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_12/child_dir/file", false).is_none());
-
-    // 13
-    assert!(m("ROOT/parent_dir/dir_deep_13", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_13/file", false).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_13/child_dir", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_13/child_dir/file", false).is_none());
-
-    // 20
-    assert!(m("ROOT/parent_dir/dir_deep_20", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_20/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_20/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_20/child_dir/file", false).is_ignore()
-    );
-
-    // 21
-    assert!(m("ROOT/parent_dir/dir_deep_21", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_21/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_21/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_21/child_dir/file", false).is_ignore()
-    );
-
-    // 22
-    // dir itself doesn't match
-    assert!(m("ROOT/parent_dir/dir_deep_22", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_22/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_22/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_22/child_dir/file", false).is_ignore()
-    );
-
-    // 23
-    // dir itself doesn't match
-    assert!(m("ROOT/parent_dir/dir_deep_23", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_23/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_23/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_23/child_dir/file", false).is_ignore()
-    );
-
-    // 30
-    assert!(m("ROOT/parent_dir/dir_deep_30", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_30/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_30/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_30/child_dir/file", false).is_ignore()
-    );
-
-    // 31
-    assert!(m("ROOT/parent_dir/dir_deep_31", true).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_31/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_31/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_31/child_dir/file", false).is_ignore()
-    );
-
-    // 32
-    // dir itself doesn't match
-    assert!(m("ROOT/parent_dir/dir_deep_32", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_32/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_32/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_32/child_dir/file", false).is_ignore()
-    );
-
-    // 33
-    // dir itself doesn't match
-    assert!(m("ROOT/parent_dir/dir_deep_33", true).is_none());
-    assert!(m("ROOT/parent_dir/dir_deep_33/file", false).is_ignore());
-    assert!(m("ROOT/parent_dir/dir_deep_33/child_dir", true).is_ignore());
-    assert!(
-        m("ROOT/parent_dir/dir_deep_33/child_dir/file", false).is_ignore()
-    );
-}
diff --git a/crates/ignore/tests/gitignore_skip_bom.gitignore b/crates/ignore/tests/gitignore_skip_bom.gitignore
deleted file mode 100644
index a78c13a9b..000000000
--- a/crates/ignore/tests/gitignore_skip_bom.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-ignore/this/path
-# This file begins with a BOM (U+FEFF)
diff --git a/crates/ignore/tests/gitignore_skip_bom.rs b/crates/ignore/tests/gitignore_skip_bom.rs
deleted file mode 100644
index 14d533d63..000000000
--- a/crates/ignore/tests/gitignore_skip_bom.rs
+++ /dev/null
@@ -1,17 +0,0 @@
-use ignore::gitignore::GitignoreBuilder;
-
-const IGNORE_FILE: &'static str = "tests/gitignore_skip_bom.gitignore";
-
-/// Skip a Byte-Order Mark (BOM) at the beginning of the file, matching Git's
-/// behavior.
-///
-/// Ref: <https://github.com/BurntSushi/ripgrep/issues/2177>
-#[test]
-fn gitignore_skip_bom() {
-    let mut builder = GitignoreBuilder::new("ROOT");
-    let error = builder.add(IGNORE_FILE);
-    assert!(error.is_none(), "failed to open gitignore file");
-    let g = builder.build().unwrap();
-
-    assert!(g.matched("ignore/this/path", false).is_ignore());
-}
diff --git a/crates/node/.cargo/config.toml b/crates/node/.cargo/config.toml
deleted file mode 100644
index 5196ec610..000000000
--- a/crates/node/.cargo/config.toml
+++ /dev/null
@@ -1,14 +0,0 @@
-[target.aarch64-unknown-linux-gnu]
-linker = "aarch64-linux-gnu-gcc"
-[target.aarch64-unknown-linux-musl]
-linker = "aarch64-linux-musl-gcc"
-rustflags = ["-C", "target-feature=-crt-static"]
-[target.armv7-unknown-linux-gnueabihf]
-linker = "arm-linux-gnueabihf-gcc"
-# Statically link Visual Studio redistributables on Windows builds
-[target.x86_64-pc-windows-msvc]
-rustflags = ["-C", "target-feature=+crt-static"]
-[target.aarch64-pc-windows-msvc]
-rustflags = ["-C", "target-feature=+crt-static"]
-[target.'cfg(target_env = "gnu")']
-rustflags = ["-C", "link-args=-Wl,-z,nodelete"]
diff --git a/crates/node/npm/wasm32-wasi/.gitignore b/crates/node/npm/wasm32-wasi/.gitignore
deleted file mode 100644
index c2658d7d1..000000000
--- a/crates/node/npm/wasm32-wasi/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-node_modules/
diff --git a/crates/node/npm/wasm32-wasi/README.md b/crates/node/npm/wasm32-wasi/README.md
deleted file mode 100644
index 2a5368149..000000000
--- a/crates/node/npm/wasm32-wasi/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# `@tailwindcss/oxide-wasm32-wasi`
-
-This is the **wasm32-wasip1-threads** build of `@tailwindcss/oxide`
diff --git a/crates/node/npm/wasm32-wasi/package.json b/crates/node/npm/wasm32-wasi/package.json
deleted file mode 100644
index cee9fb05a..000000000
--- a/crates/node/npm/wasm32-wasi/package.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "@tailwindcss/oxide-wasm32-wasi",
-  "version": "4.3.3",
-  "main": "tailwindcss-oxide.wasi.cjs",
-  "files": [
-    "tailwindcss-oxide.wasm32-wasi.wasm",
-    "tailwindcss-oxide.wasi.cjs",
-    "tailwindcss-oxide.wasi-browser.js",
-    "wasi-worker.mjs",
-    "wasi-worker-browser.mjs"
-  ],
-  "license": "MIT",
-  "engines": {
-    "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
-  },
-  "publishConfig": {
-    "provenance": true,
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node"
-  },
-  "browser": "tailwindcss-oxide.wasi-browser.js",
-  "dependencies": {
-    "@napi-rs/wasm-runtime": "^1.2.2",
-    "@emnapi/core": "^1.11.3",
-    "@emnapi/runtime": "^1.11.3",
-    "@tybys/wasm-util": "^0.10.3",
-    "@emnapi/wasi-threads": "^1.2.3",
-    "tslib": "^2.8.1"
-  },
-  "bundledDependencies": [
-    "@napi-rs/wasm-runtime",
-    "@emnapi/core",
-    "@emnapi/runtime",
-    "@tybys/wasm-util",
-    "@emnapi/wasi-threads",
-    "tslib"
-  ]
-}
diff --git a/crates/node/npm/win32-arm64-msvc/README.md b/crates/node/npm/win32-arm64-msvc/README.md
deleted file mode 100644
index 456a5cece..000000000
--- a/crates/node/npm/win32-arm64-msvc/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# `@tailwindcss/oxide-win32-arm64-msvc`
-
-This is the **arm64-pc-windows-msvc** binary for `@tailwindcss/oxide`
diff --git a/crates/node/npm/win32-arm64-msvc/package.json b/crates/node/npm/win32-arm64-msvc/package.json
deleted file mode 100644
index 991727a32..000000000
--- a/crates/node/npm/win32-arm64-msvc/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "@tailwindcss/oxide-win32-arm64-msvc",
-  "version": "4.3.3",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/win32-arm64-msvc"
-  },
-  "os": [
-    "win32"
-  ],
-  "cpu": [
-    "arm64"
-  ],
-  "main": "tailwindcss-oxide.win32-arm64-msvc.node",
-  "files": [
-    "tailwindcss-oxide.win32-arm64-msvc.node"
-  ],
-  "publishConfig": {
-    "provenance": true,
-    "access": "public"
-  },
-  "license": "MIT",
-  "engines": {
-    "node": ">= 20"
-  }
-}
diff --git a/crates/node/package.json b/crates/node/package.json
deleted file mode 100644
index be09427fb..000000000
--- a/crates/node/package.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
-  "name": "@tailwindcss/oxide",
-  "version": "4.3.3",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node"
-  },
-  "main": "index.js",
-  "types": "index.d.ts",
-  "napi": {
-    "binaryName": "tailwindcss-oxide",
-    "packageName": "@tailwindcss/oxide",
-    "targets": [
-      "armv7-linux-androideabi",
-      "aarch64-linux-android",
-      "aarch64-apple-darwin",
-      "aarch64-unknown-linux-gnu",
-      "aarch64-unknown-linux-musl",
-      "armv7-unknown-linux-gnueabihf",
-      "x86_64-unknown-linux-musl",
-      "x86_64-unknown-freebsd",
-      "i686-pc-windows-msvc",
-      "aarch64-pc-windows-msvc",
-      "wasm32-wasip1-threads"
-    ],
-    "wasm": {
-      "initialMemory": 16384,
-      "browser": {
-        "fs": true
-      }
-    }
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@emnapi/core": "1.11.3",
-    "@emnapi/runtime": "1.11.3",
-    "@napi-rs/cli": "3.7.4",
-    "@napi-rs/wasm-runtime": "^1.2.2",
-    "emnapi": "1.11.3"
-  },
-  "engines": {
-    "node": ">= 20"
-  },
-  "files": [
-    "index.js",
-    "index.d.ts"
-  ],
-  "publishConfig": {
-    "provenance": true,
-    "access": "public"
-  },
-  "scripts": {
-    "build": "pnpm run build:platform && pnpm run build:wasm",
-    "build:platform": "napi build --platform --release",
-    "postbuild:platform": "node ./scripts/move-artifacts.mjs",
-    "build:wasm": "napi build --release --target wasm32-wasip1-threads",
-    "postbuild:wasm": "node ./scripts/move-artifacts.mjs",
-    "dev": "cargo watch --quiet --shell 'npm run build'",
-    "build:debug": "napi build --platform",
-    "version": "napi version"
-  },
-  "optionalDependencies": {
-    "@tailwindcss/oxide-android-arm64": "workspace:*",
-    "@tailwindcss/oxide-darwin-arm64": "workspace:*",
-    "@tailwindcss/oxide-darwin-x64": "workspace:*",
-    "@tailwindcss/oxide-freebsd-x64": "workspace:*",
-    "@tailwindcss/oxide-linux-arm-gnueabihf": "workspace:*",
-    "@tailwindcss/oxide-linux-arm64-gnu": "workspace:*",
-    "@tailwindcss/oxide-linux-arm64-musl": "workspace:*",
-    "@tailwindcss/oxide-linux-x64-gnu": "workspace:*",
-    "@tailwindcss/oxide-linux-x64-musl": "workspace:*",
-    "@tailwindcss/oxide-wasm32-wasi": "workspace:*",
-    "@tailwindcss/oxide-win32-arm64-msvc": "workspace:*",
-    "@tailwindcss/oxide-win32-x64-msvc": "workspace:*"
-  }
-}
diff --git a/crates/node/scripts/move-artifacts.mjs b/crates/node/scripts/move-artifacts.mjs
deleted file mode 100644
index faf4728ef..000000000
--- a/crates/node/scripts/move-artifacts.mjs
+++ /dev/null
@@ -1,37 +0,0 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import url from 'node:url'
-
-const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
-let root = path.resolve(__dirname, '..')
-const tailwindcssOxideRoot = path.join(root)
-
-// Move napi artifacts into sub packages
-for (let file of await fs.readdir(tailwindcssOxideRoot)) {
-  if (file.startsWith('tailwindcss-oxide.') && file.endsWith('.node')) {
-    let target = file.split('.')[1]
-    await fs.cp(
-      path.join(tailwindcssOxideRoot, file),
-      path.join(tailwindcssOxideRoot, 'npm', target, file),
-    )
-    console.log(`Moved ${file} to npm/${target}`)
-  }
-}
-
-// Move napi wasm artifacts into sub package
-let wasmArtifacts = {
-  'tailwindcss-oxide.debug.wasm': 'tailwindcss-oxide.wasm32-wasi.debug.wasm',
-  'tailwindcss-oxide.wasm': 'tailwindcss-oxide.wasm32-wasi.wasm',
-  'tailwindcss-oxide.wasi-browser.js': 'tailwindcss-oxide.wasi-browser.js',
-  'tailwindcss-oxide.wasi.cjs': 'tailwindcss-oxide.wasi.cjs',
-  'wasi-worker-browser.mjs': 'wasi-worker-browser.mjs',
-  'wasi-worker.mjs': 'wasi-worker.mjs',
-}
-for (let file of await fs.readdir(tailwindcssOxideRoot)) {
-  if (!wasmArtifacts[file]) continue
-  await fs.cp(
-    path.join(tailwindcssOxideRoot, file),
-    path.join(tailwindcssOxideRoot, 'npm', 'wasm32-wasi', wasmArtifacts[file]),
-  )
-  console.log(`Moved ${file} to npm/wasm32-wasi`)
-}
diff --git a/crates/node/src/lib.rs b/crates/node/src/lib.rs
deleted file mode 100644
index fb32a818c..000000000
--- a/crates/node/src/lib.rs
+++ /dev/null
@@ -1,192 +0,0 @@
-use utf16::IndexConverter;
-
-#[macro_use]
-extern crate napi_derive;
-
-mod utf16;
-
-#[derive(Debug, Clone)]
-#[napi(object)]
-pub struct ChangedContent {
-  /// File path to the changed file
-  pub file: Option<String>,
-
-  /// Contents of the changed file
-  pub content: Option<String>,
-
-  /// File extension
-  pub extension: String,
-}
-
-#[derive(Debug, Clone)]
-#[napi(object)]
-pub struct GlobEntry {
-  /// Base path of the glob
-  pub base: String,
-
-  /// Glob pattern
-  pub pattern: String,
-}
-
-#[derive(Debug, Clone)]
-#[napi(object)]
-pub struct SourceEntry {
-  /// Base path of the glob
-  pub base: String,
-
-  /// Glob pattern
-  pub pattern: String,
-
-  /// Negated flag
-  pub negated: bool,
-}
-
-impl From<ChangedContent> for tailwindcss_oxide::ChangedContent {
-  fn from(changed_content: ChangedContent) -> Self {
-    if let Some(file) = changed_content.file {
-      return tailwindcss_oxide::ChangedContent::File(file.into(), changed_content.extension);
-    }
-
-    if let Some(contents) = changed_content.content {
-      return tailwindcss_oxide::ChangedContent::Content(contents, changed_content.extension);
-    }
-
-    unreachable!()
-  }
-}
-
-impl From<GlobEntry> for tailwindcss_oxide::GlobEntry {
-  fn from(glob: GlobEntry) -> Self {
-    Self {
-      base: glob.base,
-      pattern: glob.pattern,
-    }
-  }
-}
-
-impl From<tailwindcss_oxide::GlobEntry> for GlobEntry {
-  fn from(glob: tailwindcss_oxide::GlobEntry) -> Self {
-    Self {
-      base: glob.base,
-      pattern: glob.pattern,
-    }
-  }
-}
-
-impl From<SourceEntry> for tailwindcss_oxide::PublicSourceEntry {
-  fn from(source: SourceEntry) -> Self {
-    Self {
-      base: source.base,
-      pattern: source.pattern,
-      negated: source.negated,
-    }
-  }
-}
-
-// ---
-
-#[derive(Debug, Clone)]
-#[napi(object)]
-pub struct ScannerOptions {
-  /// Glob sources
-  pub sources: Option<Vec<SourceEntry>>,
-}
-
-#[derive(Debug, Clone)]
-#[napi]
-pub struct Scanner {
-  scanner: tailwindcss_oxide::Scanner,
-}
-
-#[derive(Debug, Clone)]
-#[napi(object)]
-pub struct CandidateWithPosition {
-  /// The candidate string
-  pub candidate: String,
-
-  /// The position of the candidate inside the content file
-  pub position: i64,
-}
-
-#[napi]
-impl Scanner {
-  #[napi(constructor)]
-  pub fn new(opts: ScannerOptions) -> Self {
-    Self {
-      scanner: tailwindcss_oxide::Scanner::new(match opts.sources {
-        Some(sources) => sources.into_iter().map(Into::into).collect(),
-        None => vec![],
-      }),
-    }
-  }
-
-  #[napi]
-  pub fn scan(&mut self) -> Vec<String> {
-    self.scanner.scan()
-  }
-
-  #[napi]
-  pub fn scan_files(&mut self, input: Vec<ChangedContent>) -> Vec<String> {
-    self
-      .scanner
-      .scan_content(input.into_iter().map(Into::into).collect())
-  }
-
-  #[napi]
-  pub fn get_candidates_with_positions(
-    &mut self,
-    input: ChangedContent,
-  ) -> Vec<CandidateWithPosition> {
-    let content = input.content.unwrap_or_else(|| {
-      std::fs::read_to_string(input.file.unwrap()).expect("Failed to read file")
-    });
-
-    let input = ChangedContent {
-      file: None,
-      content: Some(content.clone()),
-      extension: input.extension,
-    };
-
-    let mut utf16_idx = IndexConverter::new(&content[..]);
-
-    self
-      .scanner
-      .get_candidates_with_positions(input.into())
-      .into_iter()
-      .map(|(candidate, position)| CandidateWithPosition {
-        candidate,
-        position: utf16_idx.get(position),
-      })
-      .collect()
-  }
-
-  #[napi(getter)]
-  pub fn files(&mut self) -> Vec<String> {
-    self.scanner.get_files()
-  }
-
-  #[napi(getter)]
-  pub fn scanned_files(&self) -> Vec<String> {
-    self.scanner.get_scanned_files()
-  }
-
-  #[napi(getter)]
-  pub fn globs(&mut self) -> Vec<GlobEntry> {
-    self
-      .scanner
-      .get_globs()
-      .into_iter()
-      .map(Into::into)
-      .collect()
-  }
-
-  #[napi(getter)]
-  pub fn normalized_sources(&mut self) -> Vec<GlobEntry> {
-    self
-      .scanner
-      .get_normalized_sources()
-      .into_iter()
-      .map(Into::into)
-      .collect()
-  }
-}
diff --git a/crates/node/src/utf16.rs b/crates/node/src/utf16.rs
deleted file mode 100644
index a7e7018cb..000000000
--- a/crates/node/src/utf16.rs
+++ /dev/null
@@ -1,94 +0,0 @@
-/// The `IndexConverter` is used to convert UTF-8 *BYTE* indexes to UTF-16
-/// *character* indexes
-#[derive(Clone)]
-pub struct IndexConverter<'a> {
-  input: &'a str,
-  curr_utf8: usize,
-  curr_utf16: usize,
-}
-
-impl<'a> IndexConverter<'a> {
-  pub fn new(input: &'a str) -> Self {
-    Self {
-      input,
-      curr_utf8: 0,
-      curr_utf16: 0,
-    }
-  }
-
-  pub fn get(&mut self, pos: usize) -> i64 {
-    #[cfg(debug_assertions)]
-    if self.curr_utf8 > self.input.len() {
-      panic!("curr_utf8 points past the end of the input string");
-    }
-
-    if pos < self.curr_utf8 {
-      self.curr_utf8 = 0;
-      self.curr_utf16 = 0;
-    }
-
-    // SAFETY: No matter what `pos` is passed into this function `curr_utf8`
-    // will only ever be incremented up to the length of the input string.
-    //
-    // This eliminates a "potential" panic that cannot actually happen
-    let slice = unsafe { self.input.get_unchecked(self.curr_utf8..) };
-
-    for c in slice.chars() {
-      if self.curr_utf8 >= pos {
-        break;
-      }
-
-      self.curr_utf8 += c.len_utf8();
-      self.curr_utf16 += c.len_utf16();
-    }
-
-    self.curr_utf16 as i64
-  }
-}
-
-#[cfg(test)]
-mod test {
-  use super::*;
-  use std::collections::HashMap;
-
-  #[test]
-  fn test_index_converter() {
-    let mut converter = IndexConverter::new("Hello 🔥🥳 world!");
-
-    let map = HashMap::from([
-      // hello<space>
-      (0, 0),
-      (1, 1),
-      (2, 2),
-      (3, 3),
-      (4, 4),
-      (5, 5),
-      (6, 6),
-      // inside the 🔥
-      (7, 8),
-      (8, 8),
-      (9, 8),
-      (10, 8),
-      // inside the 🥳
-      (11, 10),
-      (12, 10),
-      (13, 10),
-      (14, 10),
-      // <space>world!
-      (15, 11),
-      (16, 12),
-      (17, 13),
-      (18, 14),
-      (19, 15),
-      (20, 16),
-      (21, 17),
-      // Past the end should return the last utf-16 character index
-      (22, 17),
-      (100, 17),
-    ]);
-
-    for (idx_utf8, idx_utf16) in map {
-      assert_eq!(converter.get(idx_utf8), idx_utf16);
-    }
-  }
-}
diff --git a/crates/oxide/Cargo.toml b/crates/oxide/Cargo.toml
deleted file mode 100644
index f8a5f6137..000000000
--- a/crates/oxide/Cargo.toml
+++ /dev/null
@@ -1,26 +0,0 @@
-[package]
-name = "tailwindcss-oxide"
-version = "0.1.0"
-edition = "2021"
-
-[dependencies]
-bstr = "1.11.3"
-globwalk = "0.9.1"
-log = "0.4.22"
-rayon = "1.10.0"
-fxhash = { package = "rustc-hash", version = "2.1.1" }
-tracing = { version = "0.1.40", features = [] }
-tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
-walkdir = "2.5.0"
-dunce = "1.0.5"
-bexpand = "1.2.0"
-fast-glob = "0.4.3"
-classification-macros = { path = "../classification-macros" }
-ignore = { path = "../ignore" }
-regex = "1.11.1"
-
-[dev-dependencies]
-insta = "1.48.0"
-tempfile = "3.13.0"
-pretty_assertions = "1.4.1"
-unicode-width = "0.2.0"
diff --git a/crates/oxide/src/cursor.rs b/crates/oxide/src/cursor.rs
deleted file mode 100644
index 71cdccdf6..000000000
--- a/crates/oxide/src/cursor.rs
+++ /dev/null
@@ -1,134 +0,0 @@
-use std::{ascii::escape_default, fmt::Display};
-
-#[derive(Debug, Clone, Copy)]
-pub struct Cursor<'a> {
-    // The input we're scanning
-    pub input: &'a [u8],
-
-    // The location of the cursor in the input
-    pub pos: usize,
-}
-
-impl<'a> Cursor<'a> {
-    #[inline(always)]
-    pub fn new(input: &'a [u8]) -> Self {
-        Self { input, pos: 0 }
-    }
-
-    /// The current byte at `pos`, or 0x00 if past the end.
-    #[inline(always)]
-    pub fn curr(&self) -> u8 {
-        if self.pos < self.input.len() {
-            unsafe { *self.input.get_unchecked(self.pos) }
-        } else {
-            0x00
-        }
-    }
-
-    /// The next byte at `pos + 1`, or 0x00 if past the end.
-    #[inline(always)]
-    pub fn next(&self) -> u8 {
-        let next_pos = self.pos + 1;
-        if next_pos < self.input.len() {
-            unsafe { *self.input.get_unchecked(next_pos) }
-        } else {
-            0x00
-        }
-    }
-
-    /// The previous byte at `pos - 1`, or 0x00 if at the start.
-    #[inline(always)]
-    pub fn prev(&self) -> u8 {
-        if self.pos > 0 {
-            unsafe { *self.input.get_unchecked(self.pos - 1) }
-        } else {
-            0x00
-        }
-    }
-
-    pub fn advance_by(&mut self, amount: usize) {
-        self.move_to(self.pos.saturating_add(amount));
-    }
-
-    #[inline(always)]
-    pub fn advance(&mut self) {
-        self.pos += 1;
-    }
-
-    #[inline(always)]
-    pub fn advance_twice(&mut self) {
-        self.pos += 2;
-    }
-
-    pub fn move_to(&mut self, pos: usize) {
-        self.pos = pos.min(self.input.len());
-    }
-}
-
-impl Display for Cursor<'_> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        let len = self.input.len().to_string();
-
-        let pos = format!("{: >len_count$}", self.pos, len_count = len.len());
-        write!(f, "{}/{} ", pos, len)?;
-
-        if self.pos == 0 {
-            write!(f, "S ")?;
-        } else if self.pos + 1 >= self.input.len() {
-            write!(f, "E ")?;
-        } else {
-            write!(f, "M ")?;
-        }
-
-        fn to_str(c: u8) -> String {
-            if c == 0x00 {
-                "NUL".into()
-            } else {
-                format!("{:?}", escape_default(c).to_string())
-            }
-        }
-
-        write!(
-            f,
-            "[{} {} {}]",
-            to_str(self.prev()),
-            to_str(self.curr()),
-            to_str(self.next())
-        )
-    }
-}
-
-#[cfg(test)]
-mod test {
-    use super::*;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    fn test_cursor() {
-        let mut cursor = Cursor::new(b"hello world");
-        assert_eq!(cursor.pos, 0);
-        assert_eq!(cursor.prev(), 0x00);
-        assert_eq!(cursor.curr(), b'h');
-        assert_eq!(cursor.next(), b'e');
-
-        cursor.advance_by(1);
-        assert_eq!(cursor.pos, 1);
-        assert_eq!(cursor.prev(), b'h');
-        assert_eq!(cursor.curr(), b'e');
-        assert_eq!(cursor.next(), b'l');
-
-        // Advancing too far should stop at the end
-        cursor.advance_by(10);
-        assert_eq!(cursor.pos, 11);
-        assert_eq!(cursor.prev(), b'd');
-        assert_eq!(cursor.curr(), 0x00);
-        assert_eq!(cursor.next(), 0x00);
-
-        // Can't advance past the end
-        cursor.advance_by(1);
-        assert_eq!(cursor.pos, 11);
-        assert_eq!(cursor.prev(), b'd');
-        assert_eq!(cursor.curr(), 0x00);
-        assert_eq!(cursor.next(), 0x00);
-    }
-}
diff --git a/crates/oxide/src/extractor/arbitrary_property_machine.rs b/crates/oxide/src/extractor/arbitrary_property_machine.rs
deleted file mode 100644
index a43253339..000000000
--- a/crates/oxide/src/extractor/arbitrary_property_machine.rs
+++ /dev/null
@@ -1,457 +0,0 @@
-use crate::cursor;
-use crate::extractor::bracket_stack::BracketStack;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::string_machine::StringMachine;
-use crate::extractor::CssVariableMachine;
-use classification_macros::ClassifyBytes;
-use std::marker::PhantomData;
-
-#[derive(Debug, Default)]
-pub struct IdleState;
-
-/// Parsing the property, e.g.:
-///
-/// ```text
-/// [color:red]
-///  ^^^^^
-///
-/// [--my-color:red]
-///  ^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ParsingPropertyState;
-
-/// Parsing the value, e.g.:
-///
-/// ```text
-/// [color:red]
-///        ^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ParsingValueState;
-
-/// Extracts arbitrary properties from the input, including the brackets.
-///
-/// E.g.:
-///
-/// ```text
-/// [color:red]
-/// ^^^^^^^^^^^
-///
-/// [--my-color:red]
-/// ^^^^^^^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ArbitraryPropertyMachine<State = IdleState> {
-    /// Start position of the arbitrary value
-    start_pos: usize,
-
-    /// Track brackets to ensure they are balanced
-    bracket_stack: BracketStack,
-
-    css_variable_machine: CssVariableMachine,
-    string_machine: StringMachine,
-
-    _state: PhantomData<State>,
-}
-
-impl<State> ArbitraryPropertyMachine<State> {
-    #[inline(always)]
-    fn transition<NextState>(&self) -> ArbitraryPropertyMachine<NextState> {
-        ArbitraryPropertyMachine {
-            start_pos: self.start_pos,
-            bracket_stack: Default::default(),
-            css_variable_machine: Default::default(),
-            string_machine: Default::default(),
-            _state: PhantomData,
-        }
-    }
-}
-
-impl Machine for ArbitraryPropertyMachine<IdleState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match cursor.curr().into() {
-            // Start of an arbitrary property
-            Class::OpenBracket => {
-                self.start_pos = cursor.pos;
-                cursor.advance();
-                self.transition::<ParsingPropertyState>().next(cursor)
-            }
-
-            // Anything else is not a valid start of an arbitrary value
-            _ => MachineState::Idle,
-        }
-    }
-}
-
-impl Machine for ArbitraryPropertyMachine<ParsingPropertyState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        let len = cursor.input.len();
-
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                Class::Dash => match cursor.next().into() {
-                    // Start of a CSS variable
-                    //
-                    // E.g.: `[--my-color:red]`
-                    //         ^^
-                    Class::Dash => return self.parse_property_variable(cursor),
-
-                    // Dashes are allowed in the property name
-                    //
-                    // E.g.: `[background-color:red]`
-                    //                   ^
-                    _ => cursor.advance(),
-                },
-
-                // Alpha characters are allowed in the property name
-                //
-                // E.g.: `[color:red]`
-                //         ^^^^^
-                Class::AlphaLower => cursor.advance(),
-
-                // End of the property name, but there must be at least a single character
-                Class::Colon if cursor.pos > self.start_pos + 1 => {
-                    cursor.advance();
-                    return self.transition::<ParsingValueState>().next(cursor);
-                }
-
-                // Anything else is not a valid property character
-                _ => return self.restart(),
-            }
-        }
-
-        self.restart()
-    }
-}
-
-impl ArbitraryPropertyMachine<ParsingPropertyState> {
-    fn parse_property_variable(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match self.css_variable_machine.next(cursor) {
-            MachineState::Idle => self.restart(),
-            MachineState::Done(_) => match cursor.next().into() {
-                // End of the CSS variable, must be followed by a `:`
-                //
-                // E.g.: `[--my-color:red]`
-                //                   ^
-                Class::Colon => {
-                    cursor.advance_twice();
-                    self.transition::<ParsingValueState>().next(cursor)
-                }
-
-                // Invalid arbitrary property
-                _ => self.restart(),
-            },
-        }
-    }
-}
-
-impl Machine for ArbitraryPropertyMachine<ParsingValueState> {
-    #[inline(always)]
-    fn reset(&mut self) {
-        self.bracket_stack.reset();
-    }
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        let len = cursor.input.len();
-        let start_of_value_pos = cursor.pos;
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                Class::Escape => match cursor.next().into() {
-                    // An escaped whitespace character is not allowed
-                    //
-                    // E.g.: `[color:var(--my-\ color)]`
-                    //                         ^
-                    Class::Whitespace => return self.restart(),
-
-                    // An escaped character, skip the next character, resume after
-                    //
-                    // E.g.: `[color:var(--my-\#color)]`
-                    //                        ^
-                    _ => cursor.advance_twice(),
-                },
-
-                Class::OpenParen | Class::OpenBracket | Class::OpenCurly => {
-                    if !self.bracket_stack.push(cursor.curr()) {
-                        return self.restart();
-                    }
-                    cursor.advance();
-                }
-
-                Class::CloseParen | Class::CloseBracket | Class::CloseCurly
-                    if !self.bracket_stack.is_empty() =>
-                {
-                    if !self.bracket_stack.pop(cursor.curr()) {
-                        return self.restart();
-                    }
-                    cursor.advance();
-                }
-
-                // End of an arbitrary value
-                //
-                // 1. All brackets must be balanced
-                // 2. There must be at least a single character inside the brackets
-                Class::CloseBracket
-                    if self.start_pos + 1 != cursor.pos && self.bracket_stack.is_empty() =>
-                {
-                    return self.done(self.start_pos, cursor)
-                }
-
-                // Start of a string
-                Class::Quote => return self.parse_string(cursor),
-
-                // Another `:` inside of an arbitrary property is only valid inside of a string or
-                // inside of brackets. Everywhere else, it's invalid.
-                //
-                // E.g.: `[color:red:blue]`
-                //                  ^ Not valid
-                // E.g.: `[background:url(https://example.com)]`
-                //                             ^ Valid
-                // E.g.: `[content:'a:b:c:']`
-                //                   ^ ^ ^ Valid
-                Class::Colon if self.bracket_stack.is_empty() => return self.restart(),
-
-                // Any kind of whitespace is not allowed
-                Class::Whitespace => return self.restart(),
-
-                // URLs are not allowed
-                Class::Slash if start_of_value_pos == cursor.pos => return self.restart(),
-
-                // String interpolation-like syntax is not allowed. E.g.: `[${x}]`
-                Class::Dollar if matches!(cursor.next().into(), Class::OpenCurly) => {
-                    return self.restart()
-                }
-
-                // An `!` at the top-level is invalid. We don't allow things to end with
-                // `!important` either as we have dedicated syntax for this.
-                Class::Exclamation if self.bracket_stack.is_empty() => {
-                    return self.restart();
-                }
-
-                // Everything else is valid
-                _ => cursor.advance(),
-            };
-        }
-
-        self.restart()
-    }
-}
-
-impl ArbitraryPropertyMachine<ParsingValueState> {
-    fn parse_string(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match self.string_machine.next(cursor) {
-            MachineState::Idle => self.restart(),
-            MachineState::Done(_) => {
-                cursor.advance();
-                self.next(cursor)
-            }
-        }
-    }
-}
-
-#[derive(Clone, Copy, ClassifyBytes)]
-enum Class {
-    #[bytes(b'(')]
-    OpenParen,
-
-    #[bytes(b'[')]
-    OpenBracket,
-
-    #[bytes(b'{')]
-    OpenCurly,
-
-    #[bytes(b')')]
-    CloseParen,
-
-    #[bytes(b']')]
-    CloseBracket,
-
-    #[bytes(b'}')]
-    CloseCurly,
-
-    #[bytes(b'\\')]
-    Escape,
-
-    #[bytes(b'"', b'\'', b'`')]
-    Quote,
-
-    #[bytes(b'-')]
-    Dash,
-
-    #[bytes(b'$')]
-    Dollar,
-
-    #[bytes_range(b'a'..=b'z')]
-    AlphaLower,
-
-    #[bytes(b':')]
-    Colon,
-
-    #[bytes(b'/')]
-    Slash,
-
-    #[bytes(b'!')]
-    Exclamation,
-
-    #[bytes(b' ', b'\t', b'\n', b'\r', b'\x0C')]
-    Whitespace,
-
-    #[bytes(b'\0')]
-    End,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::{ArbitraryPropertyMachine, IdleState};
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_arbitrary_property_machine_performance() {
-        let input = r#"<button class="[color:red] [background-color:red] [--my-color:red] [background:url('https://example.com')]">"#.repeat(10);
-
-        ArbitraryPropertyMachine::<IdleState>::test_throughput(1_000_000, &input);
-        ArbitraryPropertyMachine::<IdleState>::test_duration_once(&input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_arbitrary_property_machine_extraction() {
-        for (input, expected) in [
-            // Simple arbitrary property
-            ("[color:red]", vec!["[color:red]"]),
-            // Name with dashes
-            ("[background-color:red]", vec!["[background-color:red]"]),
-            // Name with leading `-` is valid
-            ("[-webkit-value:red]", vec!["[-webkit-value:red]"]),
-            // Setting a CSS Variable
-            ("[--my-color:red]", vec!["[--my-color:red]"]),
-            // Value with nested brackets
-            (
-                "[background:url(https://example.com)]",
-                vec!["[background:url(https://example.com)]"],
-            ),
-            // Value containing strings
-            (
-                "[background:url('https://example.com')]",
-                vec!["[background:url('https://example.com')]"],
-            ),
-            // --------------------------------------------------------
-
-            // Invalid CSS Variable
-            ("[--my#color:red]", vec![]),
-            // Spaces are not allowed
-            ("[color: red]", vec![]),
-            // Multiple colons are not allowed
-            ("[color:red:blue]", vec![]),
-            // Only alphanumeric characters are allowed in the property name
-            ("[background_color:red]", vec![]),
-            // A color is required
-            ("[red]", vec![]),
-            // The property cannot be empty
-            ("[:red]", vec![]),
-            // Empty brackets are not allowed
-            ("[]", vec![]),
-            // URLs
-            ("[http://example.com]", vec![]),
-            ("[https://example.com]", vec![]),
-            // Missing colon in more complex example
-            (r#"[CssClass("gap-y-4")]"#, vec![]),
-            // Brackets must be balanced
-            ("[background:url(https://example.com]", vec![]),
-            // Many brackets (>= 8) must be balanced
-            (
-                "[background:url(https://example.com?q={[{[([{[[2]]}])]}]})]",
-                vec!["[background:url(https://example.com?q={[{[([{[[2]]}])]}]})]"],
-            ),
-            // A property containing `!` at the top-level is invalid
-            ("[color:red!]", vec![]),
-            ("[color:red!important]", vec![]),
-        ] {
-            for wrapper in [
-                // No wrapper
-                "{}",
-                // With leading spaces
-                " {}",
-                // With trailing spaces
-                "{} ",
-                // Surrounded by spaces
-                " {} ",
-                // Inside a string
-                "'{}'",
-                // Inside a function call
-                "fn({})",
-                // Inside nested function calls
-                "fn1(fn2({}))",
-                // --------------------------
-                //
-                // HTML
-                // Inside a class (on its own)
-                r#"<div class="{}"></div>"#,
-                // Inside a class (first)
-                r#"<div class="{} foo"></div>"#,
-                // Inside a class (second)
-                r#"<div class="foo {}"></div>"#,
-                // Inside a class (surrounded)
-                r#"<div class="foo {} bar"></div>"#,
-                // --------------------------
-                //
-                // JavaScript
-                // Inside a variable
-                r#"let classes = '{}';"#,
-                // Inside an object (key)
-                r#"let classes = { '{}': true };"#,
-                // Inside an object (no spaces, key)
-                r#"let classes = {'{}':true};"#,
-                // Inside an object (value)
-                r#"let classes = { primary: '{}' };"#,
-                // Inside an object (no spaces, value)
-                r#"let classes = {primary:'{}'};"#,
-            ] {
-                let input = wrapper.replace("{}", input);
-                let actual = ArbitraryPropertyMachine::<IdleState>::test_extract_all(&input);
-
-                if actual != expected {
-                    dbg!(&input);
-                }
-                assert_eq!(actual, expected);
-            }
-        }
-    }
-
-    #[test]
-    fn test_exceptions() {
-        for (input, expected) in [
-            // JS string interpolation
-            // In key
-            ("[${x}:value]", vec![]),
-            // As part of the key
-            ("[background-${property}:value]", vec![]),
-            // In value
-            ("[key:${x}]", vec![]),
-            // As part of the value
-            ("[key:value-${x}]", vec![]),
-            // Allowed in strings
-            ("[--img:url('${x}')]", vec!["[--img:url('${x}')]"]),
-        ] {
-            assert_eq!(
-                ArbitraryPropertyMachine::<IdleState>::test_extract_all(input),
-                expected
-            );
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/arbitrary_value_machine.rs b/crates/oxide/src/extractor/arbitrary_value_machine.rs
deleted file mode 100644
index cbef62c42..000000000
--- a/crates/oxide/src/extractor/arbitrary_value_machine.rs
+++ /dev/null
@@ -1,213 +0,0 @@
-use crate::cursor;
-use crate::extractor::bracket_stack::BracketStack;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::string_machine::StringMachine;
-use classification_macros::ClassifyBytes;
-
-/// Extracts arbitrary values including the brackets.
-///
-/// E.g.:
-///
-/// ```text
-/// bg-[#0088cc]
-///    ^^^^^^^^^
-///
-/// bg-red-500/[20%]
-///            ^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ArbitraryValueMachine {
-    /// Track brackets to ensure they are balanced
-    bracket_stack: BracketStack,
-
-    string_machine: StringMachine,
-}
-
-impl Machine for ArbitraryValueMachine {
-    #[inline(always)]
-    fn reset(&mut self) {
-        self.bracket_stack.reset();
-    }
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        // An arbitrary value must start with an open bracket
-        if Class::OpenBracket != cursor.curr().into() {
-            return MachineState::Idle;
-        }
-
-        let start_pos = cursor.pos;
-        cursor.advance();
-
-        let len = cursor.input.len();
-
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                Class::Escape => match cursor.next().into() {
-                    // An escaped whitespace character is not allowed
-                    //
-                    // E.g.: `[color:var(--my-\ color)]`
-                    //                         ^
-                    Class::Whitespace => {
-                        cursor.advance_twice();
-                        return self.restart();
-                    }
-
-                    // An escaped character, skip the next character, resume after
-                    //
-                    // E.g.: `[color:var(--my-\#color)]`
-                    //                        ^
-                    _ => cursor.advance_twice(),
-                },
-
-                Class::OpenParen | Class::OpenBracket | Class::OpenCurly => {
-                    if !self.bracket_stack.push(cursor.curr()) {
-                        return self.restart();
-                    }
-                    cursor.advance();
-                }
-
-                Class::CloseParen | Class::CloseBracket | Class::CloseCurly
-                    if !self.bracket_stack.is_empty() =>
-                {
-                    if !self.bracket_stack.pop(cursor.curr()) {
-                        return self.restart();
-                    }
-                    cursor.advance();
-                }
-
-                // End of an arbitrary value
-                //
-                // 1. All brackets must be balanced
-                // 2. There must be at least a single character inside the brackets
-                Class::CloseBracket
-                    if start_pos + 1 != cursor.pos && self.bracket_stack.is_empty() =>
-                {
-                    return self.done(start_pos, cursor);
-                }
-
-                // Start of a string
-                Class::Quote => match self.string_machine.next(cursor) {
-                    MachineState::Idle => return self.restart(),
-                    MachineState::Done(_) => cursor.advance(),
-                },
-
-                // Any kind of whitespace is not allowed
-                Class::Whitespace => return self.restart(),
-
-                // String interpolation-like syntax is not allowed. E.g.: `[${x}]`
-                Class::Dollar if matches!(cursor.next().into(), Class::OpenCurly) => {
-                    return self.restart()
-                }
-
-                // Everything else is valid
-                _ => cursor.advance(),
-            };
-        }
-
-        self.restart()
-    }
-}
-
-#[derive(Clone, Copy, PartialEq, ClassifyBytes)]
-enum Class {
-    #[bytes(b'\\')]
-    Escape,
-
-    #[bytes(b'(')]
-    OpenParen,
-
-    #[bytes(b')')]
-    CloseParen,
-
-    #[bytes(b'[')]
-    OpenBracket,
-
-    #[bytes(b']')]
-    CloseBracket,
-
-    #[bytes(b'{')]
-    OpenCurly,
-
-    #[bytes(b'}')]
-    CloseCurly,
-
-    #[bytes(b'"', b'\'', b'`')]
-    Quote,
-
-    #[bytes(b' ', b'\t', b'\n', b'\r', b'\x0C')]
-    Whitespace,
-
-    #[bytes(b'$')]
-    Dollar,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::ArbitraryValueMachine;
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_arbitrary_value_machine_performance() {
-        let input = r#"<div class="[color:red] [[data-foo]] [url('https://tailwindcss.com')] [url(https://tailwindcss.com)]"></div>"#.repeat(100);
-
-        ArbitraryValueMachine::test_throughput(100_000, &input);
-        ArbitraryValueMachine::test_duration_once(&input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_arbitrary_value_machine_extraction() {
-        for (input, expected) in [
-            // Simple variable
-            ("[#0088cc]", vec!["[#0088cc]"]),
-            // With parentheses
-            (
-                "[url(https://tailwindcss.com)]",
-                vec!["[url(https://tailwindcss.com)]"],
-            ),
-            // With strings, where bracket balancing doesn't matter
-            ("['[({])}']", vec!["['[({])}']"]),
-            // With strings later in the input
-            (
-                "[url('https://tailwindcss.com?[{]}')]",
-                vec!["[url('https://tailwindcss.com?[{]}')]"],
-            ),
-            // With nested brackets
-            ("[[data-foo]]", vec!["[[data-foo]]"]),
-            (
-                "[&>[data-slot=icon]:last-child]",
-                vec!["[&>[data-slot=icon]:last-child]"],
-            ),
-            // With data types
-            ("[length:32rem]", vec!["[length:32rem]"]),
-            // Spaces are not allowed
-            ("[ #0088cc ]", vec![]),
-            // Unbalanced brackets are not allowed
-            ("[foo[bar]", vec![]),
-            // Empty brackets are not allowed
-            ("[]", vec![]),
-        ] {
-            assert_eq!(ArbitraryValueMachine::test_extract_all(input), expected);
-        }
-    }
-
-    #[test]
-    fn test_exceptions() {
-        for (input, expected) in [
-            // JS string interpolation
-            ("[${x}]", vec![]),
-            ("[url(${x})]", vec![]),
-            // Allowed in strings
-            ("[url('${x}')]", vec!["[url('${x}')]"]),
-        ] {
-            assert_eq!(ArbitraryValueMachine::test_extract_all(input), expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/arbitrary_variable_machine.rs b/crates/oxide/src/extractor/arbitrary_variable_machine.rs
deleted file mode 100644
index e8d475557..000000000
--- a/crates/oxide/src/extractor/arbitrary_variable_machine.rs
+++ /dev/null
@@ -1,413 +0,0 @@
-use crate::cursor;
-use crate::extractor::bracket_stack::BracketStack;
-use crate::extractor::css_variable_machine::CssVariableMachine;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::string_machine::StringMachine;
-use classification_macros::ClassifyBytes;
-use std::marker::PhantomData;
-
-#[derive(Debug, Default)]
-pub struct IdleState;
-
-/// Currently parsing the inside of the arbitrary variable
-///
-/// ```text
-/// (--my-opacity)
-///  ^^^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ParsingState;
-
-/// Currently parsing the data type of the arbitrary variable
-///
-/// ```text
-/// (length:--my-opacity)
-///  ^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ParsingDataTypeState;
-
-/// Currently parsing the fallback of the arbitrary variable
-///
-/// ```text
-/// (--my-opacity,50%)
-///              ^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ParsingFallbackState;
-
-/// Extracts arbitrary variables including the parens.
-///
-/// E.g.:
-///
-/// ```text
-/// (--my-value)
-/// ^^^^^^^^^^^^
-///
-/// bg-red-500/(--my-opacity)
-///            ^^^^^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ArbitraryVariableMachine<State = IdleState> {
-    /// Start position of the arbitrary variable
-    start_pos: usize,
-
-    /// Track brackets to ensure they are balanced
-    bracket_stack: BracketStack,
-
-    string_machine: StringMachine,
-    css_variable_machine: CssVariableMachine,
-
-    _state: PhantomData<State>,
-}
-
-impl<State> ArbitraryVariableMachine<State> {
-    #[inline(always)]
-    fn transition<NextState>(&self) -> ArbitraryVariableMachine<NextState> {
-        ArbitraryVariableMachine {
-            start_pos: self.start_pos,
-            bracket_stack: Default::default(),
-            string_machine: Default::default(),
-            css_variable_machine: Default::default(),
-            _state: PhantomData,
-        }
-    }
-}
-
-impl Machine for ArbitraryVariableMachine<IdleState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline(always)]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match cursor.curr().into() {
-            // Arbitrary variables start with `(` followed by a CSS variable
-            //
-            // E.g.: `(--my-variable)`
-            //        ^^
-            //
-            Class::OpenParen => match cursor.next().into() {
-                Class::Dash => {
-                    self.start_pos = cursor.pos;
-                    cursor.advance();
-                    self.transition::<ParsingState>().next(cursor)
-                }
-
-                Class::AlphaLower => {
-                    self.start_pos = cursor.pos;
-                    cursor.advance();
-                    self.transition::<ParsingDataTypeState>().next(cursor)
-                }
-
-                _ => MachineState::Idle,
-            },
-
-            // Everything else, is not a valid start of the arbitrary variable. But the next
-            // character might be a valid start for a new utility.
-            _ => MachineState::Idle,
-        }
-    }
-}
-
-impl Machine for ArbitraryVariableMachine<ParsingState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline(always)]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match self.css_variable_machine.next(cursor) {
-            MachineState::Idle => self.restart(),
-            MachineState::Done(_) => match cursor.next().into() {
-                // A CSS variable followed by a `,` means that there is a fallback
-                //
-                // E.g.: `(--my-color,red)`
-                //                   ^
-                Class::Comma => {
-                    cursor.advance_twice(); // Skip the `,`
-                    self.transition::<ParsingFallbackState>().next(cursor)
-                }
-
-                // End of the CSS variable
-                //
-                // E.g.: `(--my-color)`
-                //                  ^
-                _ => {
-                    cursor.advance();
-
-                    match cursor.curr().into() {
-                        // End of an arbitrary variable, must be followed by `)`
-                        Class::CloseParen => self.done(self.start_pos, cursor),
-
-                        // Invalid arbitrary variable, not ending at `)`
-                        _ => self.restart(),
-                    }
-                }
-            },
-        }
-    }
-}
-
-impl Machine for ArbitraryVariableMachine<ParsingDataTypeState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline(always)]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        let len = cursor.input.len();
-
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                // Valid data type characters
-                //
-                // E.g.: `(length:--my-length)`
-                //         ^
-                Class::AlphaLower | Class::Dash => {
-                    cursor.advance();
-                }
-
-                // End of the data type
-                //
-                // E.g.: `(length:--my-length)`
-                //               ^
-                Class::Colon => match cursor.next().into() {
-                    Class::Dash => {
-                        cursor.advance();
-                        return self.transition::<ParsingState>().next(cursor);
-                    }
-
-                    _ => return self.restart(),
-                },
-
-                // Anything else is not a valid character
-                _ => return self.restart(),
-            };
-        }
-        self.restart()
-    }
-}
-
-impl Machine for ArbitraryVariableMachine<ParsingFallbackState> {
-    #[inline(always)]
-    fn reset(&mut self) {
-        self.bracket_stack.reset();
-    }
-
-    #[inline(always)]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        let len = cursor.input.len();
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                Class::Escape => match cursor.next().into() {
-                    // An escaped whitespace character is not allowed
-                    //
-                    // E.g.: `(--my-\ color)`
-                    //              ^^
-                    Class::Whitespace => return self.restart(),
-
-                    // An escaped character, skip the next character, resume after
-                    //
-                    // E.g.: `(--my-\#color)`
-                    //              ^^
-                    _ => cursor.advance_twice(),
-                },
-
-                Class::OpenParen | Class::OpenBracket | Class::OpenCurly => {
-                    if !self.bracket_stack.push(cursor.curr()) {
-                        return self.restart();
-                    }
-                    cursor.advance();
-                }
-
-                Class::CloseParen | Class::CloseBracket | Class::CloseCurly
-                    if !self.bracket_stack.is_empty() =>
-                {
-                    if !self.bracket_stack.pop(cursor.curr()) {
-                        return self.restart();
-                    }
-                    cursor.advance();
-                }
-
-                // End of an arbitrary variable
-                Class::CloseParen => return self.done(self.start_pos, cursor),
-
-                // Start of a string
-                Class::Quote => match self.string_machine.next(cursor) {
-                    MachineState::Idle => return self.restart(),
-                    MachineState::Done(_) => cursor.advance(),
-                },
-
-                // A `:` inside of a fallback value is only valid inside of brackets or inside of a
-                // string. Everywhere else, it's invalid.
-                //
-                // E.g.: `(--foo,bar:baz)`
-                //                  ^ Not valid
-                //
-                // E.g.: `(--url,url(https://example.com))`
-                //                        ^ Valid
-                //
-                // E.g.: `(--my-content:'a:b:c:')`
-                //                        ^ ^ ^ Valid
-                Class::Colon if self.bracket_stack.is_empty() => return self.restart(),
-
-                // Any kind of whitespace is not allowed
-                Class::Whitespace => return self.restart(),
-
-                // String interpolation-like syntax is not allowed. E.g.: `[${x}]`
-                Class::Dollar if matches!(cursor.next().into(), Class::OpenCurly) => {
-                    return self.restart()
-                }
-
-                // Everything else is valid
-                _ => cursor.advance(),
-            };
-        }
-
-        self.restart()
-    }
-}
-
-#[derive(Clone, Copy, PartialEq, ClassifyBytes)]
-enum Class {
-    #[bytes_range(b'a'..=b'z')]
-    AlphaLower,
-
-    #[bytes_range(b'A'..=b'Z')]
-    AlphaUpper,
-
-    #[bytes(b'@')]
-    At,
-
-    #[bytes(b':')]
-    Colon,
-
-    #[bytes(b',')]
-    Comma,
-
-    #[bytes(b'-')]
-    Dash,
-
-    #[bytes(b'.')]
-    Dot,
-
-    #[bytes(b'$')]
-    Dollar,
-
-    #[bytes(b'\\')]
-    Escape,
-
-    #[bytes(b'\0')]
-    End,
-
-    #[bytes_range(b'0'..=b'9')]
-    Number,
-
-    #[bytes(b'[')]
-    OpenBracket,
-
-    #[bytes(b']')]
-    CloseBracket,
-
-    #[bytes(b'(')]
-    OpenParen,
-
-    #[bytes(b')')]
-    CloseParen,
-
-    #[bytes(b'{')]
-    OpenCurly,
-
-    #[bytes(b'}')]
-    CloseCurly,
-
-    #[bytes(b'"', b'\'', b'`')]
-    Quote,
-
-    #[bytes(b'_')]
-    Underscore,
-
-    #[bytes(b' ', b'\t', b'\n', b'\r', b'\x0C')]
-    Whitespace,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::ArbitraryVariableMachine;
-    use crate::extractor::{arbitrary_variable_machine::IdleState, machine::Machine};
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_arbitrary_variable_machine_performance() {
-        let input = r#"<div class="(--foo) (--my-color,red,blue) (--my-img,url('https://example.com?q=(][)'))"></div>"#.repeat(100);
-
-        ArbitraryVariableMachine::<IdleState>::test_throughput(100_000, &input);
-        ArbitraryVariableMachine::<IdleState>::test_duration_once(&input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_arbitrary_variable_extraction() {
-        for (input, expected) in [
-            // Simple utility
-            ("(--foo)", vec!["(--foo)"]),
-            // With dashes
-            ("(--my-color)", vec!["(--my-color)"]),
-            // With a fallback
-            ("(--my-color,red,blue)", vec!["(--my-color,red,blue)"]),
-            // With a fallback containing a string with unbalanced brackets
-            (
-                "(--my-img,url('https://example.com?q=(][)'))",
-                vec!["(--my-img,url('https://example.com?q=(][)'))"],
-            ),
-            // With a type hint
-            ("(length:--my-length)", vec!["(length:--my-length)"]),
-            // --------------------------------------------------------
-
-            // Exceptions:
-            // Arbitrary variable must start with a CSS variable
-            (r"(bar)", vec![]),
-            // Arbitrary variables must be valid CSS variables
-            (r"(--my-\ color)", vec![]),
-            (r"(--my#color)", vec![]),
-            // Fallbacks cannot have spaces
-            (r"(--my-color, red)", vec![]),
-            // Fallbacks cannot have escaped spaces
-            (r"(--my-color,\ red)", vec![]),
-            // Variables must have at least one character after the `--`
-            (r"(--)", vec![]),
-            (r"(--,red)", vec![]),
-            (r"(-)", vec![]),
-            (r"(-my-color)", vec![]),
-        ] {
-            assert_eq!(
-                ArbitraryVariableMachine::<IdleState>::test_extract_all(input),
-                expected
-            );
-        }
-    }
-
-    #[test]
-    fn test_exceptions() {
-        for (input, expected) in [
-            // JS string interpolation
-            // As part of the variable
-            ("(--my-${var})", vec![]),
-            // As the fallback
-            ("(--my-variable,${var})", vec![]),
-            // As the fallback in strings
-            (
-                "(--my-variable,url('${var}'))",
-                vec!["(--my-variable,url('${var}'))"],
-            ),
-        ] {
-            assert_eq!(
-                ArbitraryVariableMachine::<IdleState>::test_extract_all(input),
-                expected
-            );
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/boundary.rs b/crates/oxide/src/extractor/boundary.rs
deleted file mode 100644
index 78f9d3184..000000000
--- a/crates/oxide/src/extractor/boundary.rs
+++ /dev/null
@@ -1,128 +0,0 @@
-use classification_macros::ClassifyBytes;
-
-use crate::extractor::Span;
-
-#[inline(always)]
-pub fn is_valid_before_boundary(c: &u8) -> bool {
-    matches!(c.into(), Class::Common | Class::Before)
-}
-
-#[inline(always)]
-pub fn is_valid_after_boundary(c: &u8) -> bool {
-    matches!(c.into(), Class::Common | Class::After)
-}
-
-#[inline(always)]
-pub fn has_valid_boundaries(span: &Span, input: &[u8]) -> bool {
-    let before = {
-        if span.start == 0 {
-            b'\0'
-        } else {
-            input[span.start - 1]
-        }
-    };
-
-    let after = {
-        if span.end >= input.len() - 1 {
-            b'\0'
-        } else {
-            input[span.end + 1]
-        }
-    };
-
-    // Ensure the span has valid boundary characters before and after
-    is_valid_before_boundary(&before) && is_valid_after_boundary(&after)
-}
-
-#[derive(Debug, Clone, Copy, ClassifyBytes)]
-enum Class {
-    // Whitespace, e.g.:
-    //
-    // ```
-    // <div class="flex flex-col items-center"></div>
-    //                 ^        ^
-    // ```
-    #[bytes(b'\t', b'\n', b'\x0C', b'\r', b' ')]
-    // Quotes, e.g.:
-    //
-    // ```
-    // <div class="flex">
-    //            ^    ^
-    // ```
-    #[bytes(b'"', b'\'', b'`')]
-    // End of the input, e.g.:
-    //
-    // ```
-    // flex
-    //     ^
-    // ```
-    #[bytes(b'\0')]
-    Common,
-
-    // Angular like attributes, e.g.:
-    //
-    // ````
-    // [class.foo]
-    //       ^
-    // ```
-    #[bytes(b'.')]
-    // Twig-like templating languages, e.g.:
-    //
-    // ```
-    // <div class="{% if true %}flex{% else %}block{% endif %}">
-    //                         ^
-    // ```
-    #[bytes(b'}')]
-    // XML-like languages where classes are inside the tag, e.g.:
-    // ```
-    // <f:case value="0">from-blue-900 to-cyan-200</f:case>
-    //                  ^
-    // ```
-    #[bytes(b'>')]
-    Before,
-
-    // Clojure and Angular like languages, e.g.:
-    // ```
-    // [:div.p-2]
-    //          ^
-    // [class.foo]
-    //           ^
-    // ```
-    #[bytes(b']')]
-    // Twig like templating languages, e.g.:
-    //
-    // ```
-    // <div class="{% if true %}flex{% else %}block{% endif %}">
-    //                              ^
-    // ```
-    #[bytes(b'{')]
-    // Svelte like attributes, e.g.:
-    //
-    // ```
-    // <div class:flex="bool"></div>
-    //                ^
-    // ```
-    #[bytes(b'=')]
-    // Escaped character when embedding one language in another via strings, e.g.:
-    //
-    // ```
-    // $attributes->merge([
-    //   'x-init' => '$el.classList.add(\'-translate-x-full\'); $el.classList.add(\'transition-transform\')',
-    //                                                     ^                                            ^
-    // ]);
-    // ```
-    //
-    // In this case there is some JavaScript embedded in an string in PHP and some of the quotes
-    // need to be escaped.
-    #[bytes(b'\\')]
-    // XML-like languages where classes are inside the tag, e.g.:
-    // ```
-    // <f:case value="0">from-blue-900 to-cyan-200</f:case>
-    //                                            ^
-    // ```
-    #[bytes(b'<')]
-    After,
-
-    #[fallback]
-    Other,
-}
diff --git a/crates/oxide/src/extractor/bracket_stack.rs b/crates/oxide/src/extractor/bracket_stack.rs
deleted file mode 100644
index 2b8d3a13f..000000000
--- a/crates/oxide/src/extractor/bracket_stack.rs
+++ /dev/null
@@ -1,57 +0,0 @@
-const SIZE: usize = 32;
-
-#[repr(C)]
-#[derive(Debug, Default)]
-pub struct BracketStack {
-    /// Bracket stack to ensure properly balanced brackets.
-    bracket_stack: [u8; SIZE],
-    bracket_stack_len: usize,
-}
-
-impl BracketStack {
-    #[inline(always)]
-    pub fn is_empty(&self) -> bool {
-        self.bracket_stack_len == 0
-    }
-
-    #[inline(always)]
-    pub fn push(&mut self, bracket: u8) -> bool {
-        if self.bracket_stack_len >= SIZE {
-            return false;
-        }
-
-        unsafe {
-            *self.bracket_stack.get_unchecked_mut(self.bracket_stack_len) = match bracket {
-                b'(' => b')',
-                b'[' => b']',
-                b'{' => b'}',
-                b'<' => b'>',
-                _ => std::hint::unreachable_unchecked(),
-            };
-        }
-
-        self.bracket_stack_len += 1;
-        true
-    }
-
-    #[inline(always)]
-    pub fn pop(&mut self, bracket: u8) -> bool {
-        if self.bracket_stack_len == 0 {
-            return false;
-        }
-
-        self.bracket_stack_len -= 1;
-        unsafe {
-            if *self.bracket_stack.get_unchecked(self.bracket_stack_len) != bracket {
-                return false;
-            }
-        }
-
-        true
-    }
-
-    #[inline(always)]
-    pub fn reset(&mut self) {
-        self.bracket_stack_len = 0;
-    }
-}
diff --git a/crates/oxide/src/extractor/candidate_machine.rs b/crates/oxide/src/extractor/candidate_machine.rs
deleted file mode 100644
index a755cf02a..000000000
--- a/crates/oxide/src/extractor/candidate_machine.rs
+++ /dev/null
@@ -1,361 +0,0 @@
-use crate::cursor;
-use crate::extractor::boundary::{has_valid_boundaries, is_valid_before_boundary};
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::utility_machine::UtilityMachine;
-use crate::extractor::variant_machine::VariantMachine;
-use crate::extractor::Span;
-
-/// Extract full candidates including variants and utilities.
-#[derive(Debug, Default)]
-pub struct CandidateMachine {
-    /// Start position of the candidate
-    start_pos: usize,
-
-    /// End position of the last variant (if any)
-    last_variant_end_pos: Option<usize>,
-
-    utility_machine: UtilityMachine,
-    variant_machine: VariantMachine,
-}
-
-impl Machine for CandidateMachine {
-    #[inline(always)]
-    fn reset(&mut self) {
-        self.start_pos = 0;
-        self.last_variant_end_pos = None;
-    }
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        let len = cursor.input.len();
-
-        while cursor.pos < len {
-            // Skip ahead for known characters that will never be part of a candidate. No need to
-            // run any sub-machines.
-            if cursor.curr().is_ascii_whitespace() {
-                self.reset();
-                cursor.advance();
-                continue;
-            }
-
-            // Candidates don't start with these characters, so we can skip ahead.
-            if matches!(cursor.curr(), b':' | b'"' | b'\'' | b'`') {
-                self.reset();
-                cursor.advance();
-                continue;
-            }
-
-            // Jump ahead if the character is known to be an invalid boundary and we should start
-            // at the next boundary even though "valid" candidates can exist.
-            //
-            // E.g.: `<div class="">`
-            //         ^^^            Valid candidate
-            //        ^               But this character makes it invalid
-            //             ^          Therefore we jump here
-            //
-            // E.g.: `Some Class`
-            //        ^    ^       Invalid, we can jump ahead to the next boundary
-            //
-            if matches!(cursor.curr(), b'<' | b'A'..=b'Z') {
-                if let Some(offset) = cursor.input[cursor.pos..]
-                    .iter()
-                    .position(|&c| is_valid_before_boundary(&c))
-                {
-                    self.reset();
-                    cursor.advance_by(offset + 1);
-                } else {
-                    return self.restart();
-                }
-
-                continue;
-            }
-
-            let mut variant_cursor = cursor.clone();
-            let variant_machine_state = self.variant_machine.next(&mut variant_cursor);
-
-            let mut utility_cursor = cursor.clone();
-            let utility_machine_state = self.utility_machine.next(&mut utility_cursor);
-
-            match (variant_machine_state, utility_machine_state) {
-                // No variant, but the utility machine completed
-                (MachineState::Idle, MachineState::Done(utility_span)) => {
-                    cursor.move_to(utility_cursor.pos + 1);
-
-                    let span = match self.last_variant_end_pos {
-                        Some(end_pos) => {
-                            // Verify that the utility is touching the last variant
-                            if end_pos + 1 != utility_span.start {
-                                return self.restart();
-                            }
-
-                            Span::new(self.start_pos, utility_span.end)
-                        }
-                        None => utility_span,
-                    };
-
-                    // Ensure the span has valid boundary characters before and after
-                    if !has_valid_boundaries(&span, cursor.input) {
-                        return self.restart();
-                    }
-
-                    return self.done_span(span);
-                }
-
-                // Both variant and utility machines are done
-                // E.g.: `hover:flex`
-                //        ^^^^^^      Variant
-                //        ^^^^^       Utility
-                //
-                (MachineState::Done(variant_span), MachineState::Done(utility_span)) => {
-                    cursor.move_to(variant_cursor.pos + 1);
-
-                    if let Some(end_pos) = self.last_variant_end_pos {
-                        // Verify variant is touching the last variant
-                        if end_pos + 1 != variant_span.start {
-                            return self.restart();
-                        }
-                    } else {
-                        // We know that there is no variant before this one.
-                        //
-                        // Edge case: JavaScript keys should be considered utilities if they are
-                        // not preceded by another variant, and followed by any kind of whitespace
-                        // or the end of the line.
-                        //
-                        // E.g.: `{ underline: true }`
-                        //          ^^^^^^^^^^        Variant
-                        //          ^^^^^^^^^         Utility (followed by `: `)
-                        let after = cursor.input.get(utility_span.end + 2).unwrap_or(&b'\0');
-                        if after.is_ascii_whitespace() || *after == b'\0' {
-                            cursor.move_to(utility_cursor.pos + 2);
-                            return self.done_span(utility_span);
-                        }
-
-                        self.start_pos = variant_span.start;
-                    }
-
-                    self.last_variant_end_pos = Some(variant_cursor.pos);
-                }
-
-                // Variant is done, utility is invalid
-                (MachineState::Done(variant_span), MachineState::Idle) => {
-                    cursor.move_to(variant_cursor.pos + 1);
-
-                    if let Some(end_pos) = self.last_variant_end_pos {
-                        if end_pos + 1 > variant_span.start {
-                            self.reset();
-                            return MachineState::Idle;
-                        }
-                    } else {
-                        self.start_pos = variant_span.start;
-                    }
-
-                    self.last_variant_end_pos = Some(variant_cursor.pos);
-                }
-
-                (MachineState::Idle, MachineState::Idle) => {
-                    // Skip main cursor to the next character after both machines. We already know
-                    // there is no candidate here.
-                    if variant_cursor.pos > cursor.pos || utility_cursor.pos > cursor.pos {
-                        cursor.move_to(variant_cursor.pos.max(utility_cursor.pos));
-                    }
-
-                    self.reset();
-                    cursor.advance();
-                }
-            }
-        }
-
-        MachineState::Idle
-    }
-}
-
-impl CandidateMachine {
-    #[inline(always)]
-    fn done_span(&mut self, span: Span) -> MachineState {
-        self.reset();
-        MachineState::Done(span)
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::CandidateMachine;
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_candidate_machine_performance() {
-        let n = 10_000;
-        let input = include_str!("../fixtures/example.html");
-        // let input = &r#"<button type="button" class="absolute -top-1 -left-1.5 flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">"#.repeat(100);
-
-        CandidateMachine::test_throughput(n, input);
-        CandidateMachine::test_duration_once(input);
-        CandidateMachine::test_duration_n(n, input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_candidate_extraction() {
-        for (input, expected) in [
-            // Simple utility
-            ("flex", vec!["flex"]),
-            // Simple utility with special character(s)
-            ("@container", vec!["@container"]),
-            // Single character utility
-            ("a", vec!["a"]),
-            // Simple utility with dashes
-            ("items-center", vec!["items-center"]),
-            // Simple utility with numbers
-            ("px-2.5", vec!["px-2.5"]),
-            // Simple variant with simple utility
-            ("hover:flex", vec!["hover:flex"]),
-            // Arbitrary properties
-            ("[color:red]", vec!["[color:red]"]),
-            ("![color:red]", vec!["![color:red]"]),
-            ("[color:red]!", vec!["[color:red]!"]),
-            ("[color:red]/20", vec!["[color:red]/20"]),
-            ("![color:red]/20", vec!["![color:red]/20"]),
-            ("[color:red]/20!", vec!["[color:red]/20!"]),
-            // With multiple variants
-            ("hover:focus:flex", vec!["hover:focus:flex"]),
-            // Exceptions:
-            //
-            // Keys inside of a JS object could be a variant-less candidate. Vue example.
-            ("{ underline: true }", vec!["underline", "true"]),
-            // With complex variants
-            (
-                "[&>[data-slot=icon]:last-child]:right-2.5",
-                vec!["[&>[data-slot=icon]:last-child]:right-2.5"],
-            ),
-            // With multiple (complex) variants
-            (
-                "[&>[data-slot=icon]:last-child]:sm:right-2.5",
-                vec!["[&>[data-slot=icon]:last-child]:sm:right-2.5"],
-            ),
-            (
-                "sm:[&>[data-slot=icon]:last-child]:right-2.5",
-                vec!["sm:[&>[data-slot=icon]:last-child]:right-2.5"],
-            ),
-            // Exceptions regarding boundaries
-            //
-            // `flex!` is valid, but since it's followed by a non-boundary character it's invalid.
-            // `block` is therefore also invalid because it didn't start after a boundary.
-            ("flex!block", vec![]),
-        ] {
-            for (wrapper, additional) in [
-                // No wrapper
-                ("{}", vec![]),
-                // With leading spaces
-                (" {}", vec![]),
-                ("  {}", vec![]),
-                ("   {}", vec![]),
-                // With trailing spaces
-                ("{} ", vec![]),
-                ("{}  ", vec![]),
-                ("{}   ", vec![]),
-                // Surrounded by spaces
-                (" {} ", vec![]),
-                // Inside a string
-                ("'{}'", vec![]),
-                // Inside a function call
-                ("fn('{}')", vec![]),
-                // Inside nested function calls
-                ("fn1(fn2('{}'))", vec![]),
-                // --------------------------
-                //
-                // HTML
-                // Inside a class (on its own)
-                (r#"<div class="{}"></div>"#, vec!["class"]),
-                // Inside a class (first)
-                (r#"<div class="{} foo"></div>"#, vec!["class", "foo"]),
-                // Inside a class (second)
-                (r#"<div class="foo {}"></div>"#, vec!["class", "foo"]),
-                // Inside a class (surrounded)
-                (
-                    r#"<div class="foo {} bar"></div>"#,
-                    vec!["class", "foo", "bar"],
-                ),
-                // --------------------------
-                //
-                // JavaScript
-                // Inside a variable
-                (r#"let classes = '{}';"#, vec!["let", "classes"]),
-                // Inside an object (key)
-                (
-                    r#"let classes = { '{}': true };"#,
-                    vec!["let", "classes", "true"],
-                ),
-                // Inside an object (no spaces, key)
-                (r#"let classes = {'{}':true};"#, vec!["let", "classes"]),
-                // Inside an object (value)
-                (
-                    r#"let classes = { primary: '{}' };"#,
-                    vec!["let", "classes", "primary"],
-                ),
-                // Inside an object (no spaces, value)
-                (r#"let classes = {primary:'{}'};"#, vec!["let", "classes"]),
-            ] {
-                let input = wrapper.replace("{}", input);
-
-                let mut expected = expected.clone();
-                expected.extend(additional);
-                expected.sort();
-
-                let mut actual = CandidateMachine::test_extract_all(&input);
-                actual.sort();
-
-                if actual != expected {
-                    dbg!(&input);
-                }
-
-                assert_eq!(actual, expected);
-            }
-        }
-    }
-
-    #[test]
-    fn do_not_consider_svg_path_commands() {
-        for input in [
-            r#"<path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>"#,
-            r#"<path d="0h2m-2"/>"#,
-        ] {
-            assert_eq!(
-                CandidateMachine::test_extract_all(input),
-                Vec::<&str>::new()
-            );
-        }
-    }
-
-    #[test]
-    fn test_js_interpolation() {
-        for (input, expected) in [
-            // Utilities
-            // Arbitrary value
-            ("bg-[${color}]", vec![]),
-            // Arbitrary property
-            ("[color:${value}]", vec![]),
-            ("[${key}:value]", vec![]),
-            ("[${key}:${value}]", vec![]),
-            // Arbitrary property for CSS variables
-            ("[--color:${value}]", vec![]),
-            ("[--color-${name}:value]", vec![]),
-            // Arbitrary variable
-            ("bg-(--my-${name})", vec![]),
-            ("bg-(--my-variable,${fallback})", vec![]),
-            (
-                "bg-(--my-image,url('https://example.com?q=${value}'))",
-                vec!["bg-(--my-image,url('https://example.com?q=${value}'))"],
-            ),
-            // Variants
-            ("data-[state=${state}]:flex", vec![]),
-            ("support-(--my-${value}):flex", vec![]),
-            ("support-(--my-variable,${fallback}):flex", vec![]),
-            ("[@media(width>=${value})]:flex", vec![]),
-        ] {
-            assert_eq!(CandidateMachine::test_extract_all(input), expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/css_variable_machine.rs b/crates/oxide/src/extractor/css_variable_machine.rs
deleted file mode 100644
index 7beb827ee..000000000
--- a/crates/oxide/src/extractor/css_variable_machine.rs
+++ /dev/null
@@ -1,214 +0,0 @@
-use crate::cursor;
-use crate::extractor::machine::{Machine, MachineState};
-use classification_macros::ClassifyBytes;
-
-/// Extract CSS variables from an input.
-///
-/// E.g.:
-///
-/// ```text
-/// var(--my-variable)
-///     ^^^^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct CssVariableMachine;
-
-impl Machine for CssVariableMachine {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        // CSS Variables must start with `--`
-        if Class::Dash != cursor.curr().into() || Class::Dash != cursor.next().into() {
-            return MachineState::Idle;
-        }
-
-        let start_pos = cursor.pos;
-        let len = cursor.input.len();
-
-        cursor.advance_twice();
-
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                // https://drafts.csswg.org/css-syntax-3/#ident-token-diagram
-                //
-                Class::AllowedCharacter | Class::Dash => {
-                    match cursor.next().into() {
-                        // Valid character followed by a valid character or an escape character
-                        //
-                        // E.g.: `--my-variable`
-                        //                ^^
-                        // E.g.: `--my-\#variable`
-                        //            ^^
-                        Class::AllowedCharacter | Class::Dash | Class::Escape => cursor.advance(),
-
-                        // Valid character followed by anything else means the variable is done
-                        //
-                        // E.g.: `'--my-variable'`
-                        //                      ^
-                        _ => {
-                            // There must be at least 1 character after the `--`
-                            if cursor.pos - start_pos < 2 {
-                                return self.restart();
-                            } else {
-                                return self.done(start_pos, cursor);
-                            }
-                        }
-                    }
-                }
-
-                Class::Escape => match cursor.next().into() {
-                    // An escaped whitespace character is not allowed
-                    //
-                    // In CSS it is allowed, but in the context of a class it's not because then we
-                    // would have spaces in the class.
-                    //
-                    // E.g.: `bg-(--my-\ color)`
-                    //                  ^
-                    Class::Whitespace => return self.restart(),
-
-                    // An escape at the end of the class is not allowed
-                    Class::End => return self.restart(),
-
-                    // An escaped character, skip the next character, resume after
-                    //
-                    // E.g.: `--my-\#variable`
-                    //             ^           We are here
-                    //               ^         Resume here
-                    _ => cursor.advance_twice(),
-                },
-
-                // Character is not valid anymore
-                _ => return self.restart(),
-            }
-        }
-
-        MachineState::Idle
-    }
-}
-
-#[derive(Clone, Copy, PartialEq, ClassifyBytes)]
-enum Class {
-    #[bytes(b'-')]
-    Dash,
-
-    #[bytes(b'_')]
-    #[bytes_range(b'a'..=b'z', b'A'..=b'Z', b'0'..=b'9')]
-    // non-ASCII (such as Emoji): https://drafts.csswg.org/css-syntax-3/#non-ascii-ident-code-point
-    #[bytes_range(0x80..=0xff)]
-    AllowedCharacter,
-
-    #[bytes(b'\\')]
-    Escape,
-
-    #[bytes(b' ', b'\t', b'\n', b'\r', b'\x0C')]
-    Whitespace,
-
-    #[bytes(b'\0')]
-    End,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::CssVariableMachine;
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_css_variable_machine_performance() {
-        let input = r#"This sentence will contain a few variables here and there var(--my-variable) --other-variable-1\/2 var(--more-variables-here)"#.repeat(100);
-
-        CssVariableMachine::test_throughput(100_000, &input);
-        CssVariableMachine::test_duration_once(&input);
-
-        todo!();
-    }
-
-    #[test]
-    fn test_css_variable_machine_extraction() {
-        for (input, expected) in [
-            // Simple variable
-            ("--foo", vec!["--foo"]),
-            ("--my-variable", vec!["--my-variable"]),
-            // Multiple variables
-            (
-                "calc(var(--first) + var(--second))",
-                vec!["--first", "--second"],
-            ),
-            // Variables with... emojis
-            ("--😀", vec!["--😀"]),
-            ("--😀-😁", vec!["--😀-😁"]),
-            // Escaped character in the middle, skips the next character
-            (r#"--spacing-1\/2"#, vec![r#"--spacing-1\/2"#]),
-            // Escaped whitespace is not allowed
-            (r#"--my-\ variable"#, vec![]),
-            // --------------------------
-            //
-            // Exceptions
-            // Not a valid variable
-            ("", vec![]),
-            ("-", vec![]),
-            ("--", vec![]),
-        ] {
-            for wrapper in [
-                // No wrapper
-                "{}",
-                // With leading spaces
-                " {}",
-                // With trailing spaces
-                "{} ",
-                // Surrounded by spaces
-                " {} ",
-                // Inside a string
-                "'{}'",
-                // Inside a function call
-                "fn({})",
-                // Inside nested function calls
-                "fn1(fn2({}))",
-                // --------------------------
-                //
-                // HTML
-                // Inside a class (on its own)
-                r#"<div class="{}"></div>"#,
-                // Inside a class (first)
-                r#"<div class="{} foo"></div>"#,
-                // Inside a class (second)
-                r#"<div class="foo {}"></div>"#,
-                // Inside a class (surrounded)
-                r#"<div class="foo {} bar"></div>"#,
-                // Inside an arbitrary property
-                r#"<div class="[{}:red]"></div>"#,
-                // --------------------------
-                //
-                // JavaScript
-                // Inside a variable
-                r#"let classes = '{}';"#,
-                // Inside an object (key)
-                r#"let classes = { '{}': true };"#,
-                // Inside an object (no spaces, key)
-                r#"let classes = {'{}':true};"#,
-                // Inside an object (value)
-                r#"let classes = { primary: '{}' };"#,
-                // Inside an object (no spaces, value)
-                r#"let classes = {primary:'{}'};"#,
-                // Inside an array
-                r#"let classes = ['{}'];"#,
-            ] {
-                let input = wrapper.replace("{}", input);
-
-                let actual = CssVariableMachine::test_extract_all(&input);
-
-                if actual != expected {
-                    dbg!(&input);
-                }
-
-                assert_eq!(actual, expected);
-            }
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/machine.rs b/crates/oxide/src/extractor/machine.rs
deleted file mode 100644
index 5874e4b63..000000000
--- a/crates/oxide/src/extractor/machine.rs
+++ /dev/null
@@ -1,161 +0,0 @@
-use crate::cursor;
-
-#[derive(Debug, Clone, Copy)]
-pub struct Span {
-    /// Inclusive start position of the span
-    pub start: usize,
-
-    /// Inclusive end position of the span
-    pub end: usize,
-}
-
-impl Span {
-    pub fn new(start: usize, end: usize) -> Self {
-        Self { start, end }
-    }
-
-    #[inline(always)]
-    pub fn slice<'a>(&self, input: &'a [u8]) -> &'a [u8] {
-        &input[self.start..=self.end]
-    }
-}
-
-#[derive(Debug, Default)]
-pub enum MachineState {
-    /// Machine is not doing anything at the moment
-    #[default]
-    Idle,
-
-    /// Machine is done parsing and has extracted a span
-    Done(Span),
-}
-
-pub trait Machine: Sized + Default {
-    fn reset(&mut self);
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState;
-
-    /// Reset the state machine, and mark the machine as [MachineState::Idle].
-    #[inline(always)]
-    fn restart(&mut self) -> MachineState {
-        self.reset();
-        MachineState::Idle
-    }
-
-    /// Reset the state machine, and mark the machine as [MachineState::Done(…)].
-    #[inline(always)]
-    fn done(&mut self, start: usize, cursor: &cursor::Cursor<'_>) -> MachineState {
-        self.reset();
-        MachineState::Done(Span::new(start, cursor.pos))
-    }
-
-    #[cfg(test)]
-    fn test_throughput(iterations: usize, input: &str) {
-        use crate::throughput::Throughput;
-        use std::hint::black_box;
-
-        let input = input.as_bytes();
-        let len = input.len();
-
-        let throughput = Throughput::compute(iterations, len, || {
-            let mut machine = Self::default();
-            let mut cursor = cursor::Cursor::new(input);
-
-            while cursor.pos < len {
-                _ = black_box(machine.next(&mut cursor));
-
-                cursor.advance();
-            }
-        });
-        eprintln!(
-            "{}: Throughput: {}",
-            std::any::type_name::<Self>(),
-            throughput
-        );
-    }
-
-    #[cfg(test)]
-    fn test_duration_once(input: &str) {
-        use std::hint::black_box;
-
-        let input = input.as_bytes();
-        let len = input.len();
-
-        let duration = {
-            let start = std::time::Instant::now();
-            let mut machine = Self::default();
-            let mut cursor = cursor::Cursor::new(input);
-
-            while cursor.pos < len {
-                _ = black_box(machine.next(&mut cursor));
-
-                cursor.advance();
-            }
-
-            start.elapsed()
-        };
-        eprintln!(
-            "{}:   Duration: {:?}",
-            std::any::type_name::<Self>(),
-            duration
-        );
-    }
-
-    #[cfg(test)]
-    fn test_duration_n(n: usize, input: &str) {
-        use std::hint::black_box;
-
-        let input = input.as_bytes();
-        let len = input.len();
-
-        let duration = {
-            let start = std::time::Instant::now();
-
-            for _ in 0..n {
-                let mut machine = Self::default();
-                let mut cursor = cursor::Cursor::new(input);
-
-                while cursor.pos < len {
-                    _ = black_box(machine.next(&mut cursor));
-
-                    cursor.advance();
-                }
-            }
-
-            start.elapsed()
-        };
-        eprintln!(
-            "{}:   Duration: {:?} ({} iterations, ~{:?} per iteration)",
-            std::any::type_name::<Self>(),
-            duration,
-            n,
-            duration / n as u32
-        );
-    }
-
-    #[cfg(test)]
-    fn test_extract_all(input: &str) -> Vec<&str> {
-        input
-            // Mimicking the behavior of how we parse lines individually
-            .split_terminator("\n")
-            .flat_map(|input| {
-                let mut machine = Self::default();
-                let mut cursor = cursor::Cursor::new(input.as_bytes());
-
-                let mut actual: Vec<&str> = vec![];
-                let len = cursor.input.len();
-
-                while cursor.pos < len {
-                    if let MachineState::Done(span) = machine.next(&mut cursor) {
-                        actual.push(unsafe {
-                            std::str::from_utf8_unchecked(span.slice(cursor.input))
-                        });
-                    }
-
-                    cursor.advance();
-                }
-
-                actual
-            })
-            .collect()
-    }
-}
diff --git a/crates/oxide/src/extractor/mod.rs b/crates/oxide/src/extractor/mod.rs
deleted file mode 100644
index a3d806a27..000000000
--- a/crates/oxide/src/extractor/mod.rs
+++ /dev/null
@@ -1,1149 +0,0 @@
-use crate::cursor;
-use crate::extractor::machine::Span;
-use candidate_machine::CandidateMachine;
-use css_variable_machine::CssVariableMachine;
-use machine::{Machine, MachineState};
-use std::fmt;
-
-pub mod arbitrary_property_machine;
-pub mod arbitrary_value_machine;
-pub mod arbitrary_variable_machine;
-mod boundary;
-pub mod bracket_stack;
-pub mod candidate_machine;
-pub mod css_variable_machine;
-pub mod machine;
-pub mod modifier_machine;
-pub mod named_utility_machine;
-pub mod named_variant_machine;
-pub mod pre_processors;
-pub mod string_machine;
-pub mod utility_machine;
-pub mod variant_machine;
-
-#[derive(Debug)]
-pub enum Extracted<'a> {
-    /// Extracted a valid looking candidate
-    ///
-    /// E.g.: `flex`
-    ///
-    Candidate(&'a [u8]),
-
-    /// Extracted a valid looking CSS variable
-    ///
-    /// E.g.: `--my-variable`
-    ///
-    CssVariable(&'a [u8]),
-}
-
-impl fmt::Display for Extracted<'_> {
-    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
-        match self {
-            Extracted::Candidate(candidate) => {
-                write!(f, "Candidate({})", std::str::from_utf8(candidate).unwrap())
-            }
-            Extracted::CssVariable(candidate) => {
-                write!(
-                    f,
-                    "CssVariable({})",
-                    std::str::from_utf8(candidate).unwrap()
-                )
-            }
-        }
-    }
-}
-
-#[derive(Debug)]
-pub struct Extractor<'a> {
-    cursor: cursor::Cursor<'a>,
-
-    css_variable_machine: CssVariableMachine,
-    candidate_machine: CandidateMachine,
-}
-
-impl<'a> Extractor<'a> {
-    pub fn new(input: &'a [u8]) -> Self {
-        Self {
-            cursor: cursor::Cursor::new(input),
-
-            css_variable_machine: Default::default(),
-            candidate_machine: Default::default(),
-        }
-    }
-
-    pub fn extract(&mut self) -> Vec<Extracted<'a>> {
-        // Candidates found by inner candidate machines. If the outer machine finds a solution, we
-        // can discard the inner machines. Otherwise, we can keep the candidates from the inner
-        // machines.
-        let mut in_flight_spans: Vec<Span> = Vec::with_capacity(15);
-
-        // All the extracted values
-        let mut extracted = Vec::with_capacity(100);
-
-        let len = self.cursor.input.len();
-
-        // CSS Variable extractor
-        {
-            let cursor = &mut self.cursor.clone();
-            while cursor.pos < len {
-                if cursor.curr().is_ascii_whitespace() {
-                    cursor.advance();
-                    continue;
-                }
-
-                if let MachineState::Done(span) = self.css_variable_machine.next(cursor) {
-                    extracted.push(Extracted::CssVariable(span.slice(self.cursor.input)));
-                }
-
-                cursor.advance();
-            }
-        }
-
-        // Candidate extractor
-        {
-            let cursor = &mut self.cursor.clone();
-
-            while cursor.pos < len {
-                if cursor.curr().is_ascii_whitespace() {
-                    cursor.advance();
-                    continue;
-                }
-
-                let before = cursor.pos;
-                match self.candidate_machine.next(cursor) {
-                    MachineState::Done(span) => {
-                        in_flight_spans.push(span);
-                        extract_sub_candidates(before..span.start, cursor, &mut in_flight_spans);
-                    }
-                    MachineState::Idle => {
-                        extract_sub_candidates(
-                            before..cursor.pos.min(cursor.input.len()),
-                            cursor,
-                            &mut in_flight_spans,
-                        );
-                    }
-                }
-
-                cursor.advance();
-            }
-
-            // Commit the remaining in-flight spans as extracted candidates
-            if !in_flight_spans.is_empty() {
-                extracted.extend(
-                    drop_covered_spans(in_flight_spans)
-                        .iter()
-                        .map(|span| Extracted::Candidate(span.slice(self.cursor.input))),
-                );
-            }
-        }
-
-        extracted
-    }
-
-    pub fn extract_variables_from_css(&mut self) -> Vec<Extracted<'a>> {
-        let mut extracted = Vec::with_capacity(100);
-
-        let len = self.cursor.input.len();
-
-        let cursor = &mut self.cursor.clone();
-        while cursor.pos < len {
-            if cursor.curr().is_ascii_whitespace() {
-                cursor.advance();
-                continue;
-            }
-
-            if let MachineState::Done(span) = self.css_variable_machine.next(cursor) {
-                // We are only interested in variables that are used, not defined. Therefore we
-                // need to ensure that the variable is prefixed with `var(`.
-                if span.start < 4 {
-                    cursor.advance();
-                    continue;
-                }
-
-                let slice_before = Span::new(span.start - 4, span.start - 1);
-                if !slice_before.slice(self.cursor.input).starts_with(b"var(") {
-                    cursor.advance();
-                    continue;
-                }
-
-                extracted.push(Extracted::CssVariable(span.slice(self.cursor.input)));
-            }
-
-            cursor.advance();
-        }
-
-        extracted
-    }
-}
-
-// Extract sub-candidates from a given range.
-//
-// E.g.: `[ClassPrefix('gap-y-4')]` will not be a valid candidate or variant. In that case we want
-//       to extract candidates from inside the `[…]`.
-//
-// ```
-// [ClassPrefix('gap-y-4')]
-//  ^ Try again here
-// ```
-#[inline(always)]
-fn extract_sub_candidates(
-    range: std::ops::Range<usize>,
-    cursor: &cursor::Cursor<'_>,
-    in_flight_spans: &mut Vec<Span>,
-) {
-    let end = range.end;
-    for i in range {
-        if cursor.input[i] == b'[' {
-            let mut cursor = cursor.clone();
-            cursor.move_to(i + 1);
-
-            let mut machine = CandidateMachine::default();
-
-            while cursor.pos < end {
-                if let MachineState::Done(span) = machine.next(&mut cursor) {
-                    in_flight_spans.push(span);
-                }
-
-                cursor.advance();
-            }
-        }
-    }
-}
-
-fn drop_covered_spans(mut spans: Vec<Span>) -> Vec<Span> {
-    if spans.len() <= 1 {
-        return spans;
-    }
-
-    spans.sort_by(|a, b| a.start.cmp(&b.start).then(b.end.cmp(&a.end)));
-
-    let mut result = Vec::with_capacity(spans.len());
-    let mut max_end = None;
-
-    for span in spans {
-        if max_end.is_none_or(|end| span.end > end) {
-            result.push(span);
-            max_end = Some(span.end);
-        }
-    }
-
-    result
-}
-
-#[cfg(test)]
-mod tests {
-    use super::{Extracted, Extractor};
-    use crate::throughput::Throughput;
-    use pretty_assertions::assert_eq;
-    use std::hint::black_box;
-
-    fn pre_process_input(input: &str, extension: &str) -> String {
-        let input = crate::scanner::pre_process_input(input.as_bytes().to_vec(), extension);
-        String::from_utf8(input).unwrap()
-    }
-
-    fn extract_sorted_candidates(input: &str) -> Vec<&str> {
-        let mut machine = Extractor::new(input.as_bytes());
-        let mut actual = machine
-            .extract()
-            .iter()
-            .filter_map(|x| match x {
-                Extracted::Candidate(candidate) => std::str::from_utf8(candidate).ok(),
-                Extracted::CssVariable(_) => None,
-            })
-            .collect::<Vec<_>>();
-        actual.sort();
-        actual
-    }
-
-    fn extract_sorted_css_variables(input: &str) -> Vec<&str> {
-        let mut machine = Extractor::new(input.as_bytes());
-        let mut actual = machine
-            .extract()
-            .iter()
-            .filter_map(|x| match x {
-                Extracted::Candidate(_) => None,
-                Extracted::CssVariable(bytes) => std::str::from_utf8(bytes).ok(),
-            })
-            .collect::<Vec<_>>();
-        actual.sort();
-        actual
-    }
-
-    fn assert_extract_sorted_candidates(input: &str, expected: Vec<&str>) {
-        let mut actual = extract_sorted_candidates(input);
-        actual.sort();
-        actual.dedup();
-
-        let mut expected = expected;
-        expected.sort();
-        expected.dedup();
-
-        if actual != expected {
-            dbg!(&input);
-        }
-        assert_eq!(actual, expected);
-    }
-
-    fn assert_extract_candidates_contains(input: &str, expected: Vec<&str>) {
-        let actual = extract_sorted_candidates(input);
-
-        let mut missing = vec![];
-        for item in &expected {
-            if !actual.contains(item) {
-                missing.push(item);
-            }
-        }
-
-        if !missing.is_empty() {
-            dbg!(&actual, &missing);
-            panic!("Missing some items");
-        }
-    }
-
-    fn assert_extract_sorted_css_variables(input: &str, expected: Vec<&str>) {
-        let actual = extract_sorted_css_variables(input);
-
-        let mut expected = expected;
-        expected.sort();
-
-        if actual != expected {
-            dbg!(&input);
-        }
-        assert_eq!(actual, expected);
-    }
-
-    #[test]
-    #[ignore]
-    fn test_extract_performance() {
-        if true {
-            let iterations = 50_000;
-
-            let input = include_bytes!("../fixtures/example.html");
-
-            let throughput = Throughput::compute(iterations, input.len(), || {
-                let mut extractor = Extractor::new(input);
-                _ = black_box(extractor.extract());
-            });
-            eprintln!("Extractor throughput: {:}", throughput);
-
-            let mut extractor = Extractor::new(input);
-            let start = std::time::Instant::now();
-            _ = black_box(extractor.extract().len());
-            let end = start.elapsed();
-            eprintln!("Extractor took: {:?}", end);
-
-            todo!();
-        }
-    }
-
-    #[test]
-    fn test_candidates_extraction() {
-        for (input, expected) in [
-            // Simple utility
-            ("flex", vec!["flex"]),
-            // Single character utility
-            ("a", vec!["a"]),
-            // Simple variant with simple utility
-            ("hover:flex", vec!["hover:flex"]),
-            // Multiple utilities
-            ("flex block", vec!["flex", "block"]),
-            // Simple utility with dashes
-            ("items-center", vec!["items-center"]),
-            ("items--center", vec!["items--center"]),
-            // Simple utility with numbers
-            ("px-2.5", vec!["px-2.5"]),
-            // Arbitrary properties
-            ("[color:red]", vec!["[color:red]"]),
-            ("![color:red]", vec!["![color:red]"]),
-            ("[color:red]!", vec!["[color:red]!"]),
-            ("[color:red]/20", vec!["[color:red]/20"]),
-            ("![color:red]/20", vec!["![color:red]/20"]),
-            ("[color:red]/20!", vec!["[color:red]/20!"]),
-            // In HTML
-            (
-                r#"<div class="flex items-center px-2.5 bg-[#0088cc] text-(--my-color)"></div>"#,
-                vec![
-                    "class",
-                    "flex",
-                    "items-center",
-                    "px-2.5",
-                    "bg-[#0088cc]",
-                    "text-(--my-color)",
-                ],
-            ),
-            // In an array, looks like an arbitrary property (because it starts with `[`).
-            (r#"["flex"]"#, vec!["flex"]),
-            (r#"["p-2.5"]"#, vec!["p-2.5"]),
-            (r#"["flex","p-2.5"]"#, vec!["flex", "p-2.5"]),
-            (r#"["flex", "p-2.5"]"#, vec!["flex", "p-2.5"]),
-            // Overlapping candidates, outer candidate should win
-            (
-                r#"[CssClass("[&:hover]:flex",'italic')]"#,
-                vec!["[&:hover]:flex", "italic"],
-            ),
-            (
-                r#"["flex",["italic",["underline"]]]"#,
-                vec!["flex", "italic", "underline"],
-            ),
-            (r#"[:is(italic):is(underline)]"#, vec![]),
-            (
-                r#"[:is(italic):is(underline)]:flex"#,
-                vec!["[:is(italic):is(underline)]:flex"],
-            ),
-            (r#"[:div {:class ["p-2""#, vec!["p-2"]),
-            (r#"               "text-green"]}"#, vec!["text-green"]),
-            (r#"[:div.p-2]"#, vec!["p-2"]),
-            // Longer example with mixed types of variants and utilities
-            (
-                "[&>[data-slot=icon]:last-child]:right-2.5",
-                vec!["[&>[data-slot=icon]:last-child]:right-2.5"],
-            ),
-            (
-                "sm:[&>[data-slot=icon]:last-child]:right-2.5",
-                vec!["sm:[&>[data-slot=icon]:last-child]:right-2.5"],
-            ),
-            // --------------------------------------------------------
-
-            // Exceptions:
-            //
-            // Keys inside of a JS object could be a variant-less candidate. Vue example.
-            ("{ underline: true }", vec!["underline", "true"]),
-            (
-                r#"            <CheckIcon className={clsx('h-4 w-4', { invisible: index !== 0 })} />"#,
-                vec!["className", "h-4", "w-4", "invisible", "index"],
-            ),
-            // You can have variants but in a string. Vue example.
-            (
-                "{ 'hover:underline': true }",
-                vec!["hover:underline", "true"],
-            ),
-            // Important marker on both sides is invalid
-            ("!flex!", vec![]),
-            // Important marker before a modifier is invalid
-            ("bg-red-500!/20", vec![]),
-            // HTML start of a tag
-            ("<div", vec![]),
-            // HTML end of a tag
-            ("</div>", vec![]),
-            // HTML element on its own
-            ("<div></div>", vec![]),
-            // Modifier followed by a modifier is invalid
-            ("bg-red-500/20/20", vec![]),
-            ("bg-red-500/20/[20%]", vec![]),
-            ("bg-red-500/20/(--my-opacity)", vec![]),
-            ("bg-red-500/[20%]/20", vec![]),
-            ("bg-red-500/[20%]/[20%]", vec![]),
-            ("bg-red-500/[20%]/(--my-opacity)", vec![]),
-            ("bg-red-500/(--my-opacity)/20", vec![]),
-            ("bg-red-500/(--my-opacity)/[20%]", vec![]),
-            ("bg-red-500/(--my-opacity)/(--my-opacity)", vec![]),
-            // Arbitrary value followed by an arbitrary value is invalid
-            ("bg-[red]-[blue]", vec![]),
-            ("bg-[red][blue]", vec![]),
-            // Arbitrary value followed by an arbitrary variable is invalid
-            ("bg-[red]-(--my-color)", vec![]),
-            ("bg-[red](--my-color)", vec![]),
-            // Important looking utility cannot be followed by another utility
-            ("flex!block", vec![]),
-            // Invalid variants make the whole candidate invalid
-            ("[foo]/bar:flex", vec![]),
-            // Utilities cannot start with `_`
-            ("_blank", vec![]),
-            ("hover:_blank", vec![]),
-            ("hover:focus:_blank", vec![]),
-        ] {
-            assert_extract_sorted_candidates(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_extractor_extract_candidates() {
-        for (input, expected) in [
-            // Simple utility
-            ("flex", vec!["flex"]),
-            // Simple utility with special character(s)
-            ("@container", vec!["@container"]),
-            // Single character utility
-            ("a", vec!["a"]),
-            // Simple utility with dashes
-            ("items-center", vec!["items-center"]),
-            // Simple utility with numbers
-            ("px-2.5", vec!["px-2.5"]),
-            // Simple variant with simple utility
-            ("hover:flex", vec!["hover:flex"]),
-            // Arbitrary properties
-            ("[color:red]", vec!["[color:red]"]),
-            ("![color:red]", vec!["![color:red]"]),
-            ("[color:red]!", vec!["[color:red]!"]),
-            ("[color:red]/20", vec!["[color:red]/20"]),
-            ("![color:red]/20", vec!["![color:red]/20"]),
-            ("[color:red]/20!", vec!["[color:red]/20!"]),
-            // With multiple variants
-            ("hover:focus:flex", vec!["hover:focus:flex"]),
-            // Exceptions:
-            //
-            // Keys inside of a JS object could be a variant-less candidate. Vue example.
-            ("{ underline: true }", vec!["underline", "true"]),
-            // With complex variants
-            (
-                "[&>[data-slot=icon]:last-child]:right-2.5",
-                vec!["[&>[data-slot=icon]:last-child]:right-2.5"],
-            ),
-            // With multiple (complex) variants
-            (
-                "[&>[data-slot=icon]:last-child]:sm:right-2.5",
-                vec!["[&>[data-slot=icon]:last-child]:sm:right-2.5"],
-            ),
-            (
-                "sm:[&>[data-slot=icon]:last-child]:right-2.5",
-                vec!["sm:[&>[data-slot=icon]:last-child]:right-2.5"],
-            ),
-            // Exceptions regarding boundaries
-            //
-            // `flex!` is valid, but since it's followed by a non-boundary character it's invalid.
-            // `block` is therefore also invalid because it didn't start after a boundary.
-            ("flex!block", vec![]),
-        ] {
-            for (wrapper, additional) in [
-                // No wrapper
-                ("{}", vec![]),
-                // With leading spaces
-                (" {}", vec![]),
-                ("  {}", vec![]),
-                ("   {}", vec![]),
-                // With trailing spaces
-                ("{} ", vec![]),
-                ("{}  ", vec![]),
-                ("{}   ", vec![]),
-                // Surrounded by spaces
-                (" {} ", vec![]),
-                // Inside a string
-                ("'{}'", vec![]),
-                // Inside a function call
-                ("fn('{}')", vec![]),
-                // Inside nested function calls
-                ("fn1(fn2('{}'))", vec![]),
-                // --------------------------
-                //
-                // HTML
-                // Inside a class (on its own)
-                (r#"<div class="{}"></div>"#, vec!["class"]),
-                // Inside a class (first)
-                (r#"<div class="{} foo"></div>"#, vec!["class", "foo"]),
-                // Inside a class (second)
-                (r#"<div class="foo {}"></div>"#, vec!["class", "foo"]),
-                // Inside a class (surrounded)
-                (
-                    r#"<div class="foo {} bar"></div>"#,
-                    vec!["class", "foo", "bar"],
-                ),
-                // --------------------------
-                //
-                // JavaScript
-                // Inside a variable
-                (r#"let classes = '{}';"#, vec!["let", "classes"]),
-                // Inside an object (key)
-                (
-                    r#"let classes = { '{}': true };"#,
-                    vec!["let", "classes", "true"],
-                ),
-                // Inside an object (no spaces, key)
-                (r#"let classes = {'{}':true};"#, vec!["let", "classes"]),
-                // Inside an object (value)
-                (
-                    r#"let classes = { primary: '{}' };"#,
-                    vec!["let", "classes", "primary"],
-                ),
-                // Inside an object (no spaces, value)
-                (r#"let classes = {primary:'{}'};"#, vec!["let", "classes"]),
-                // Inside an array
-                (r#"let classes = ['{}'];"#, vec!["let", "classes"]),
-            ] {
-                let input = &wrapper.replace("{}", input);
-                let mut expected = expected.clone();
-                expected.extend(additional);
-
-                assert_extract_sorted_candidates(input, expected);
-            }
-        }
-    }
-
-    #[test]
-    fn test_ruby_syntax() {
-        for (input, expected) in [
-            (r#"%w[flex]"#, vec!["flex"]),
-            (r#"%w[flex items-center]"#, vec!["flex", "items-center"]),
-            (r#"%w[[color:red]]"#, vec!["[color:red]"]),
-            // See: https://github.com/tailwindlabs/tailwindcss/issues/13778
-            (
-                r#"def call = tag.span "Foo", class: %w[rounded-full h-0.75 w-0.75]"#,
-                vec![
-                    "def",
-                    "call",
-                    "span",
-                    "class",
-                    "rounded-full",
-                    "h-0.75",
-                    "w-0.75",
-                ],
-            ),
-            (
-                r#"def call = tag.span "Foo", class: %w[rounded-full w-0.75 h-0.75]"#,
-                vec![
-                    "def",
-                    "call",
-                    "span",
-                    "class",
-                    "rounded-full",
-                    "h-0.75",
-                    "w-0.75",
-                ],
-            ),
-            (
-                r#"def call = tag.span "Foo", class: %w[w-0.75 h-0.75 rounded-full]"#,
-                vec![
-                    "def",
-                    "call",
-                    "span",
-                    "class",
-                    "rounded-full",
-                    "h-0.75",
-                    "w-0.75",
-                ],
-            ),
-            // Other similar syntaxes
-            (r#"%w[flex]"#, vec!["flex"]),
-            (r#"%w(flex)"#, vec!["flex"]),
-        ] {
-            assert_extract_sorted_candidates(&pre_process_input(input, "rb"), expected);
-        }
-    }
-
-    // Pug syntax, see: https://github.com/tailwindlabs/tailwindcss/issues/14005
-    #[test]
-    fn test_pug_syntax() {
-        for (input, expected) in [
-            // Class literal
-            (
-                ".bg-green-300.2xl:bg-red-500",
-                vec!["bg-green-300", "2xl:bg-red-500"],
-            ),
-            (
-                ".2xl:bg-red-500.bg-green-300",
-                vec!["bg-green-300", "2xl:bg-red-500"],
-            ),
-            (".xl:col-span-2.xl:pr-8", vec!["xl:col-span-2", "xl:pr-8"]),
-            (
-                "div.2xl:bg-red-500.bg-green-300",
-                vec!["div", "bg-green-300", "2xl:bg-red-500"],
-            ),
-            // Quoted attribute
-            (
-                r#"input(type="checkbox" class="px-2.5")"#,
-                vec!["input", "type", "checkbox", "class", "px-2.5"],
-            ),
-        ] {
-            assert_extract_sorted_candidates(&pre_process_input(input, "pug"), expected);
-        }
-    }
-
-    // Slim syntax, see: https://github.com/tailwindlabs/tailwindcss/issues/16790
-    #[test]
-    fn test_slim_syntax() {
-        for (input, expected) in [
-            // Class literal
-            (
-                ".bg-blue-100.2xl:bg-red-100",
-                vec!["bg-blue-100", "2xl:bg-red-100"],
-            ),
-            (
-                ".2xl:bg-red-100.bg-blue-100",
-                vec!["bg-blue-100", "2xl:bg-red-100"],
-            ),
-            // Quoted attribute
-            (r#"div class="px-2.5""#, vec!["div", "class", "px-2.5"]),
-        ] {
-            assert_extract_sorted_candidates(&pre_process_input(input, "slim"), expected);
-        }
-    }
-
-    // C# syntax, see: https://github.com/tailwindlabs/tailwindcss/issues/16189#issue-2826350984
-    #[test]
-    fn test_csharp_syntax() {
-        for (input, expected) in [
-            // Not a valid arbitrary value or variant
-            // Extract inner candidates: `gap-y-4`
-            (r#"[CssClass("gap-y-4")]"#, vec!["gap-y-4"]),
-            (r#"[CssClass("hover:gap-y-4")]"#, vec!["hover:gap-y-4"]),
-            // Valid arbitrary variant + utility, extract full candidate without inner candidates
-            (
-                r#"[CssClass("gap-y-4")]:flex"#,
-                vec![r#"[CssClass("gap-y-4")]:flex"#],
-            ),
-        ] {
-            assert_extract_sorted_candidates(input, expected);
-        }
-    }
-
-    // Clojure syntax, see: https://github.com/tailwindlabs/tailwindcss/issues/16189#issuecomment-2642438176
-    #[test]
-    fn test_clojure_syntax() {
-        for (input, expected) in [
-            (r#"[:div {:class ["p-2"]}"#, vec!["p-2"]),
-            (
-                r#"[:div {:class ["p-2" "text-green"]}"#,
-                vec!["p-2", "text-green"],
-            ),
-            (r#"[:div {:class ["p-2""#, vec!["p-2"]),
-            (r#"               "text-green"]}"#, vec!["text-green"]),
-            (r#"[:div.p-2]"#, vec!["p-2"]),
-            (r#"[:div {:class ["p-2"]}"#, vec!["p-2"]),
-            (
-                r#"[:div {:class ["p-2" "text-green"]}"#,
-                vec!["p-2", "text-green"],
-            ),
-        ] {
-            assert_extract_candidates_contains(&pre_process_input(input, "cljs"), expected);
-        }
-    }
-
-    // Gleam syntax, see: https://github.com/tailwindlabs/tailwindcss/issues/15632#issuecomment-2617431021
-    #[test]
-    fn test_gleam_syntax() {
-        for (input, expected) in [
-            (r#"html.div([attribute.class("py-10")], [])"#, vec!["py-10"]),
-            (
-                r#"html.div([attribute.class("hover:py-10")], [])"#,
-                vec!["hover:py-10"],
-            ),
-        ] {
-            assert_extract_sorted_candidates(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_overlapping_candidates() {
-        for (input, expected) in [
-            // Not a valid arbitrary property
-            // Not a valid arbitrary variant
-            // Extract inner candidates
-            (
-                r#"[CssClass("[&:hover]:flex",'italic')]"#,
-                vec!["[&:hover]:flex", "italic"],
-            ),
-            // Not a valid arbitrary property or variant, array syntax
-            // Extract inner candidates
-            (
-                r#"["flex",["italic",["underline"]]]"#,
-                vec!["flex", "italic", "underline"],
-            ),
-            // Not a valid arbitrary variant (not followed by a candidate)
-            // Inner classes `is`, `italic` and `underline` are not valid in this context
-            (r#"[:is(italic):is(underline)]"#, vec![]),
-            // Valid arbitrary variant, nothing inside should be extracted
-            (
-                r#"[:is(italic):is(underline)]:flex"#,
-                vec!["[:is(italic):is(underline)]:flex"],
-            ),
-        ] {
-            assert_extract_sorted_candidates(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_js_syntax() {
-        for (input, expected) in [
-            // String
-            (
-                r#"let classes = 'flex items-center';"#,
-                vec!["let", "classes", "flex", "items-center"],
-            ),
-            // Array
-            (
-                r#"let classes = ['flex', 'items-center'];"#,
-                vec!["let", "classes", "flex", "items-center"],
-            ),
-            // Minified array
-            (
-                r#"let classes = ['flex','items-center'];"#,
-                vec!["let", "classes", "flex", "items-center"],
-            ),
-            // Function call
-            (
-                r#"let classes = something('flex');"#,
-                vec!["let", "classes", "flex"],
-            ),
-            // Function call in array
-            (
-                r#"let classes = [wrapper('flex')]"#,
-                vec!["let", "classes", "flex"],
-            ),
-        ] {
-            assert_extract_sorted_candidates(input, expected);
-        }
-    }
-
-    // See: https://github.com/tailwindlabs/tailwindcss/issues/16750
-    #[test]
-    fn test_js_tuple_syntax() {
-        for (input, expected) in [
-            // Split
-            (
-                r#"["h-[calc(100vh-(var(--spacing)*8)-(var(--spacing)*14))]",\n  true],"#,
-                vec![
-                    "h-[calc(100vh-(var(--spacing)*8)-(var(--spacing)*14))]",
-                    "true",
-                ],
-            ),
-            // Same line
-            (
-                r#"["h-[calc(100vh-(var(--spacing)*8)-(var(--spacing)*14))]", true],"#,
-                vec![
-                    "h-[calc(100vh-(var(--spacing)*8)-(var(--spacing)*14))]",
-                    "true",
-                ],
-            ),
-            // Split with space in front
-            (
-                r#"[ "h-[calc(100vh-(var(--spacing)*8)-(var(--spacing)*14))]",\n  true],"#,
-                vec![
-                    "h-[calc(100vh-(var(--spacing)*8)-(var(--spacing)*14))]",
-                    "true",
-                ],
-            ),
-        ] {
-            assert_extract_sorted_candidates(input, expected);
-        }
-    }
-
-    // See: https://github.com/tailwindlabs/tailwindcss/issues/16801
-    #[test]
-    fn test_angular_binding_syntax() {
-        for (input, expected) in [
-            (
-                r#"'[ngClass]': `{"variant": variant(), "no-variant": !variant() }`"#,
-                vec!["variant", "no-variant"],
-            ),
-            (
-                r#"'[class]': '"bg-gradient-to-b px-6 py-3 rounded-3xl from-5%"',"#,
-                vec!["bg-gradient-to-b", "px-6", "py-3", "rounded-3xl", "from-5%"],
-            ),
-            (
-                r#"'[class.from-secondary-light]': `variant() === 'secondary'`,"#,
-                vec!["from-secondary-light", "secondary"],
-            ),
-            (
-                r#"'[class.to-secondary]': `variant() === 'secondary'`,"#,
-                vec!["to-secondary", "secondary"],
-            ),
-            (
-                r#"'[class.from-5%]': `variant() === 'secondary'`,"#,
-                vec!["from-5%", "secondary"],
-            ),
-            (
-                r#"'[class.from-1%]': `variant() === 'primary'`,"#,
-                vec!["from-1%", "primary"],
-            ),
-            (
-                r#"'[class.from-light-blue]': `variant() === 'primary'`,"#,
-                vec!["from-light-blue", "primary"],
-            ),
-            (
-                r#"'[class.to-primary]': `variant() === 'primary'`,"#,
-                vec!["to-primary", "primary"],
-            ),
-        ] {
-            assert_extract_sorted_candidates(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_angular_binding_attribute_syntax() {
-        for (input, expected) in [
-            // Simple class
-            (
-                r#"<div [class.underline]="bool"></div>"#,
-                vec!["underline", "bool"],
-            ),
-            // With additional dots
-            (
-                r#"<div [class.px-2.5]="bool"></div>"#,
-                vec!["px-2.5", "bool"],
-            ),
-            // With additional square brackets
-            (
-                r#"<div [class.bg-[#0088cc]]="bool"></div>"#,
-                vec!["bg-[#0088cc]", "bool"],
-            ),
-        ] {
-            assert_extract_sorted_candidates(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_svelte_shorthand_syntax() {
-        assert_extract_sorted_candidates(
-            &pre_process_input(r#"<div class:px-4='condition'></div>"#, "svelte"),
-            vec!["class", "px-4", "condition"],
-        );
-        assert_extract_sorted_candidates(
-            &pre_process_input(r#"<div class:flex='condition'></div>"#, "svelte"),
-            vec!["class", "flex", "condition"],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/16999
-    #[test]
-    fn test_twig_syntax() {
-        assert_extract_candidates_contains(
-            r#"<div class="flex items-center mx-4{% if session.isValid %}{% else %} h-4{% endif %}"></div>"#,
-            vec!["flex", "items-center", "mx-4", "h-4"],
-        );
-
-        // With touching both `}` and `{`
-        assert_extract_candidates_contains(
-            r#"<div class="{% if true %}flex{% else %}block{% endif %}">"#,
-            vec!["flex", "block"],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/20233
-    #[test]
-    fn test_template_toolkit_syntax() {
-        assert_extract_candidates_contains(
-            &pre_process_input(
-                r#"<div class="[% IF $is_open %]bg-white/40[% ELSE %]bg-white/10[% END %]"></div>"#,
-                "tx",
-            ),
-            vec!["bg-white/40", "bg-white/10"],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17050
-    #[test]
-    fn test_haml_syntax() {
-        for (input, expected) in [
-            // Element with classes
-            (
-                "%body.flex.flex-col.items-center.justify-center",
-                vec!["flex", "flex-col", "items-center", "justify-center"],
-            ),
-            // Plain element
-            (
-                ".text-slate-500.xl:text-gray-500",
-                vec!["text-slate-500", "xl:text-gray-500"],
-            ),
-            // Element with hash attributes
-            (
-                ".text-black.xl:text-red-500{ data: { tailwind: 'css' } }",
-                vec!["text-black", "xl:text-red-500"],
-            ),
-            // Element with a boolean attribute
-            (
-                ".text-green-500.xl:text-blue-500(data-sidebar)",
-                vec!["text-green-500", "xl:text-blue-500"],
-            ),
-            // Element with interpreted content
-            (
-                ".text-yellow-500.xl:text-purple-500= 'Element with interpreted content'",
-                vec!["text-yellow-500", "xl:text-purple-500"],
-            ),
-            // Element with a hash at the end and an extra class.
-            (
-                ".text-orange-500.xl:text-pink-500{ class: 'bg-slate-100' }",
-                vec!["text-orange-500", "xl:text-pink-500", "bg-slate-100"],
-            ),
-            // Object reference
-            (
-                ".text-teal-500.xl:text-indigo-500[@user, :greeting]",
-                vec!["text-teal-500", "xl:text-indigo-500"],
-            ),
-            // Element with an ID
-            (
-                ".text-lime-500.xl:text-emerald-500#root",
-                vec!["text-lime-500", "xl:text-emerald-500"],
-            ),
-        ] {
-            assert_extract_candidates_contains(&pre_process_input(input, "haml"), expected);
-        }
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17088
-    #[test]
-    fn test_fluid_template_syntax() {
-        let input = r#"
-            <f:variable name="bgStyle">
-              <f:switch expression="{data.layout}">
-                <f:case value="0">from-blue-900 to-cyan-200</f:case>
-                <f:case value="1">from-cyan-600 to-teal-200</f:case>
-                <f:defaultCase>from-blue-300 to-cyan-100</f:defaultCase>
-              </f:switch>
-            </f:variable>
-        "#;
-
-        assert_extract_candidates_contains(
-            input,
-            vec![
-                "from-blue-900",
-                "to-cyan-200",
-                "from-cyan-600",
-                "to-teal-200",
-                "from-blue-300",
-                "to-cyan-100",
-            ],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/16982
-    #[test]
-    fn test_arbitrary_container_queries_syntax() {
-        assert_extract_sorted_candidates(
-            r#"<div class="@md:flex @max-md:flex @-[36rem]:flex @[36rem]:flex"></div>"#,
-            vec![
-                "class",
-                "@md:flex",
-                "@max-md:flex",
-                "@-[36rem]:flex",
-                "@[36rem]:flex",
-            ],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17023
-    #[test]
-    fn test_js_embedded_in_php_syntax() {
-        // Escaped single quotes
-        let input = r#"
-            @php
-            if ($sidebarIsStashable) {
-                $attributes = $attributes->merge([
-                    'x-init' => '$el.classList.add(\'-translate-x-full\'); $el.classList.add(\'transition-transform\')',
-                ]);
-            }
-            @endphp
-        "#;
-        assert_extract_candidates_contains(
-            input,
-            vec!["-translate-x-full", "transition-transform"],
-        );
-
-        // Double quotes
-        let input = r#"
-            @php
-            if ($sidebarIsStashable) {
-                $attributes = $attributes->merge([
-                    'x-init' => "\$el.classList.add('-translate-x-full'); \$el.classList.add('transition-transform')",
-                ]);
-            }
-            @endphp
-        "#;
-        assert_extract_candidates_contains(
-            input,
-            vec!["-translate-x-full", "transition-transform"],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/16978
-    #[test]
-    fn test_classes_containing_number_followed_by_dash_or_underscore() {
-        assert_extract_sorted_candidates(
-            r#"<div class="text-Title1_Strong"></div>"#,
-            vec!["class", "text-Title1_Strong"],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/16983
-    #[test]
-    fn test_arbitrary_variable_with_data_type() {
-        assert_extract_sorted_candidates(
-            r#"<div class="bg-(length:--my-length) bg-[color:var(--my-color)]"></div>"#,
-            vec![
-                "class",
-                "bg-(length:--my-length)",
-                "bg-[color:var(--my-color)]",
-            ],
-        );
-    }
-
-    // See: https://github.com/tailwindlabs/tailwindcss/issues/18092
-    #[test]
-    fn test_leptos_rs_view_class_colon_syntax() {
-        for (input, expected) in [
-            (r#"<div class:px-6=true>"#, vec!["class", "px-6"]),
-            (
-                r#"view! { <div class:px-6=true> }"#,
-                vec!["class", "px-6", "view!"],
-            ),
-        ] {
-            assert_extract_sorted_candidates(&pre_process_input(input, "svelte"), expected);
-        }
-    }
-
-    #[test]
-    fn test_extract_css_variables() {
-        for (input, expected) in [
-            // Simple variable
-            ("--foo", vec!["--foo"]),
-            ("--my-variable", vec!["--my-variable"]),
-            // Multiple variables
-            (
-                "calc(var(--first) + var(--second))",
-                vec!["--first", "--second"],
-            ),
-            // Escaped character in the middle, skips the next character
-            (r#"--spacing-1\/2"#, vec![r#"--spacing-1\/2"#]),
-            // Escaped whitespace is not allowed
-            (r#"--my-\ variable"#, vec![]),
-        ] {
-            for wrapper in [
-                // No wrapper
-                "{}",
-                // With leading spaces
-                " {}",
-                // With trailing spaces
-                "{} ",
-                // Surrounded by spaces
-                " {} ",
-                // Inside a string
-                "'{}'",
-                // Inside a function call
-                "fn({})",
-                // Inside nested function calls
-                "fn1(fn2({}))",
-                // --------------------------
-                //
-                // HTML
-                // Inside a class (on its own)
-                r#"<div class="{}"></div>"#,
-                // Inside a class (first)
-                r#"<div class="{} foo"></div>"#,
-                // Inside a class (second)
-                r#"<div class="foo {}"></div>"#,
-                // Inside a class (surrounded)
-                r#"<div class="foo {} bar"></div>"#,
-                // Inside an arbitrary property
-                r#"<div class="[{}:red]"></div>"#,
-                // --------------------------
-                //
-                // JavaScript
-                // Inside a variable
-                r#"let classes = '{}';"#,
-                // Inside an object (key)
-                r#"let classes = { '{}': true };"#,
-                // Inside an object (no spaces, key)
-                r#"let classes = {'{}':true};"#,
-                // Inside an object (value)
-                r#"let classes = { primary: '{}' };"#,
-                // Inside an object (no spaces, value)
-                r#"let classes = {primary:'{}'};"#,
-                // Inside an array
-                r#"let classes = ['{}'];"#,
-            ] {
-                let input = wrapper.replace("{}", input);
-
-                assert_extract_sorted_css_variables(&input, expected.clone());
-            }
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/modifier_machine.rs b/crates/oxide/src/extractor/modifier_machine.rs
deleted file mode 100644
index 811bc9ded..000000000
--- a/crates/oxide/src/extractor/modifier_machine.rs
+++ /dev/null
@@ -1,167 +0,0 @@
-use crate::cursor;
-use crate::extractor::arbitrary_value_machine::ArbitraryValueMachine;
-use crate::extractor::arbitrary_variable_machine::ArbitraryVariableMachine;
-use crate::extractor::machine::{Machine, MachineState};
-use classification_macros::ClassifyBytes;
-
-/// Extract modifiers from an input including the `/`.
-///
-/// E.g.:
-///
-/// ```text
-/// bg-red-500/20
-///           ^^^
-///
-/// bg-red-500/[20%]
-///           ^^^^^^
-///
-/// bg-red-500/(--my-opacity)
-///           ^^^^^^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct ModifierMachine {
-    arbitrary_value_machine: ArbitraryValueMachine,
-    arbitrary_variable_machine: ArbitraryVariableMachine,
-}
-
-impl Machine for ModifierMachine {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        // A modifier must start with a `/`, everything else is not a valid start of a modifier
-        if Class::Slash != cursor.curr().into() {
-            return MachineState::Idle;
-        }
-
-        let start_pos = cursor.pos;
-        cursor.advance();
-
-        match cursor.curr().into() {
-            // Start of an arbitrary value:
-            //
-            // ```
-            // bg-red-500/[20%]
-            //            ^^^^^
-            // ```
-            Class::OpenBracket => match self.arbitrary_value_machine.next(cursor) {
-                MachineState::Idle => self.restart(),
-                MachineState::Done(_) => self.done(start_pos, cursor),
-            },
-
-            // Start of an arbitrary variable:
-            //
-            // ```
-            // bg-red-500/(--my-opacity)
-            //            ^^^^^^^^^^^^^^
-            // ```
-            Class::OpenParen => match self.arbitrary_variable_machine.next(cursor) {
-                MachineState::Idle => self.restart(),
-                MachineState::Done(_) => self.done(start_pos, cursor),
-            },
-
-            // Start of a named modifier:
-            //
-            // ```
-            // bg-red-500/20
-            //            ^^
-            // ```
-            Class::ValidStart => {
-                let len = cursor.input.len();
-                while cursor.pos < len {
-                    match cursor.curr().into() {
-                        Class::ValidStart | Class::ValidInside => {
-                            match cursor.next().into() {
-                                // Only valid characters are allowed, if followed by another valid character
-                                Class::ValidStart | Class::ValidInside => cursor.advance(),
-
-                                // Valid character, but at the end of the modifier, this ends the
-                                // modifier
-                                _ => return self.done(start_pos, cursor),
-                            }
-                        }
-
-                        // Anything else is invalid, end of the modifier
-                        _ => return self.restart(),
-                    }
-                }
-
-                MachineState::Idle
-            }
-
-            // Anything else is not a valid start of a modifier
-            _ => MachineState::Idle,
-        }
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, ClassifyBytes)]
-enum Class {
-    #[bytes_range(b'a'..=b'z', b'A'..=b'Z', b'0'..=b'9')]
-    ValidStart,
-
-    #[bytes(b'-', b'_', b'.')]
-    ValidInside,
-
-    #[bytes(b'[')]
-    OpenBracket,
-
-    #[bytes(b'(')]
-    OpenParen,
-
-    #[bytes(b'/')]
-    Slash,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::ModifierMachine;
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_modifier_machine_performance() {
-        let input = r#"<button class="group-hover/name:flex bg-red-500/20 text-black/[20%] border-white/(--my-opacity)">"#;
-
-        ModifierMachine::test_throughput(1_000_000, input);
-        ModifierMachine::test_duration_once(input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_modifier_extraction() {
-        for (input, expected) in [
-            // Simple modifier
-            ("foo/bar", vec!["/bar"]),
-            ("foo/bar-baz", vec!["/bar-baz"]),
-            // Simple modifier with numbers
-            ("foo/20", vec!["/20"]),
-            // Simple modifier with numbers
-            ("foo/20", vec!["/20"]),
-            // Arbitrary value
-            ("foo/[20]", vec!["/[20]"]),
-            // Arbitrary value with CSS variable shorthand
-            ("foo/(--x)", vec!["/(--x)"]),
-            ("foo/(--foo-bar)", vec!["/(--foo-bar)"]),
-            // --------------------------------------------------------
-
-            // Empty arbitrary value is not allowed
-            ("foo/[]", vec![]),
-            // Empty arbitrary value shorthand is not allowed
-            ("foo/()", vec![]),
-            // A CSS variable must start with `--` and must have at least a single character
-            ("foo/(-)", vec![]),
-            ("foo/(--)", vec![]),
-            // Arbitrary value shorthand should be a valid CSS variable
-            ("foo/(--my#color)", vec![]),
-        ] {
-            assert_eq!(ModifierMachine::test_extract_all(input), expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/named_utility_machine.rs b/crates/oxide/src/extractor/named_utility_machine.rs
deleted file mode 100644
index 24dc027b2..000000000
--- a/crates/oxide/src/extractor/named_utility_machine.rs
+++ /dev/null
@@ -1,535 +0,0 @@
-use crate::cursor;
-use crate::extractor::arbitrary_value_machine::ArbitraryValueMachine;
-use crate::extractor::arbitrary_variable_machine::ArbitraryVariableMachine;
-use crate::extractor::boundary::is_valid_after_boundary;
-use crate::extractor::machine::{Machine, MachineState};
-use classification_macros::ClassifyBytes;
-use std::marker::PhantomData;
-
-#[derive(Debug, Default)]
-pub struct IdleState;
-
-#[derive(Debug, Default)]
-pub struct ParsingState;
-
-/// Extracts named utilities from an input.
-///
-/// E.g.:
-///
-/// ```text
-/// flex
-/// ^^^^
-///
-/// bg-red-500
-/// ^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct NamedUtilityMachine<State = IdleState> {
-    /// Start position of the utility
-    start_pos: usize,
-
-    arbitrary_variable_machine: ArbitraryVariableMachine,
-    arbitrary_value_machine: ArbitraryValueMachine,
-
-    _state: PhantomData<State>,
-}
-
-impl<State> NamedUtilityMachine<State> {
-    #[inline(always)]
-    fn transition<NextState>(&self) -> NamedUtilityMachine<NextState> {
-        NamedUtilityMachine {
-            start_pos: self.start_pos,
-            arbitrary_variable_machine: Default::default(),
-            arbitrary_value_machine: Default::default(),
-            _state: PhantomData,
-        }
-    }
-}
-
-impl Machine for NamedUtilityMachine<IdleState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match cursor.curr().into() {
-            Class::AlphaLower => match cursor.next().into() {
-                // Valid single character utility in between quotes
-                //
-                // E.g.: `<div class="a"></div>`
-                //                    ^
-                // E.g.: `<div class="a "></div>`
-                //                    ^
-                // E.g.: `<div class=" a"></div>`
-                //                     ^
-                Class::Whitespace | Class::Quote | Class::End => self.done(cursor.pos, cursor),
-
-                // Valid start characters
-                //
-                // E.g.: `flex`
-                //        ^
-                _ => {
-                    self.start_pos = cursor.pos;
-                    cursor.advance();
-                    self.transition::<ParsingState>().next(cursor)
-                }
-            },
-
-            // Valid start characters
-            //
-            // E.g.: `@container`
-            //        ^
-            Class::At => {
-                self.start_pos = cursor.pos;
-                cursor.advance();
-                self.transition::<ParsingState>().next(cursor)
-            }
-
-            // Valid start of a negative utility, if followed by another set of valid
-            // characters. `@` as a second character is invalid.
-            //
-            // E.g.: `-mx-2.5`
-            //        ^^
-            Class::Dash => match cursor.next().into() {
-                Class::AlphaLower => {
-                    self.start_pos = cursor.pos;
-                    cursor.advance();
-                    self.transition::<ParsingState>().next(cursor)
-                }
-
-                // A dash should not be followed by anything else
-                _ => MachineState::Idle,
-            },
-
-            // Everything else, is not a valid start of the utility.
-            _ => MachineState::Idle,
-        }
-    }
-}
-
-impl Machine for NamedUtilityMachine<ParsingState> {
-    #[inline(always)]
-    fn reset(&mut self) {
-        self.start_pos = 0;
-    }
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        let len = cursor.input.len();
-
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                // Followed by a boundary character, we are at the end of the utility.
-                //
-                // E.g.: `'flex'`
-                //             ^
-                // E.g.: `<div class="flex items-center">`
-                //                        ^
-                // E.g.: `[flex]` (Angular syntax)
-                //             ^
-                // E.g.: `[class.flex.items-center]` (Angular syntax)
-                //                   ^
-                // E.g.: `:div="{ flex: true }"` (JavaScript object syntax)
-                //                    ^
-                Class::AlphaLower | Class::AlphaUpper => {
-                    if is_valid_after_boundary(&cursor.next()) || {
-                        // Or any of these characters
-                        //
-                        // - `:`, because of JS object keys
-                        // - `/`, because of modifiers
-                        // - `!`, because of important
-                        matches!(
-                            cursor.next().into(),
-                            Class::Colon | Class::Slash | Class::Exclamation
-                        )
-                    } {
-                        return self.done(self.start_pos, cursor);
-                    }
-
-                    // Still valid characters
-                    cursor.advance()
-                }
-
-                Class::Dash => match cursor.next().into() {
-                    // Start of an arbitrary value
-                    //
-                    // E.g.: `bg-[#0088cc]`
-                    //          ^^
-                    Class::OpenBracket => {
-                        cursor.advance();
-                        return match self.arbitrary_value_machine.next(cursor) {
-                            MachineState::Idle => self.restart(),
-                            MachineState::Done(_) => self.done(self.start_pos, cursor),
-                        };
-                    }
-
-                    // Start of an arbitrary variable
-                    //
-                    // E.g.: `bg-(--my-color)`
-                    //          ^^
-                    Class::OpenParen => {
-                        cursor.advance();
-                        return match self.arbitrary_variable_machine.next(cursor) {
-                            MachineState::Idle => self.restart(),
-                            MachineState::Done(_) => self.done(self.start_pos, cursor),
-                        };
-                    }
-
-                    // A dash is a valid character if it is followed by another valid
-                    // character.
-                    //
-                    // E.g.: `flex-`
-                    //            ^    Invalid
-                    // E.g.: `flex-!`
-                    //            ^    Invalid
-                    // E.g.: `flex-/`
-                    //            ^    Invalid
-                    // E.g.: `flex-2`
-                    //            ^    Valid
-                    // E.g.: `foo--bar`
-                    //            ^    Valid
-                    Class::AlphaLower | Class::AlphaUpper | Class::Number | Class::Dash => {
-                        cursor.advance();
-                    }
-
-                    // Everything else is invalid
-                    _ => return self.restart(),
-                },
-
-                Class::Underscore => match cursor.next().into() {
-                    // Valid characters _if_ followed by another valid character. These characters are
-                    // only valid inside of the utility but not at the end of the utility.
-                    //
-                    // E.g.: `custom_`
-                    //              ^    Invalid
-                    // E.g.: `custom_!`
-                    //              ^    Invalid
-                    // E.g.: `custom_/`
-                    //              ^    Invalid
-                    // E.g.: `custom_2`
-                    //              ^    Valid
-                    //
-                    Class::AlphaLower | Class::AlphaUpper | Class::Number | Class::Underscore => {
-                        cursor.advance();
-                    }
-
-                    // Followed by a boundary character, we are at the end of the utility.
-                    //
-                    // E.g.: `'flex'`
-                    //             ^
-                    // E.g.: `<div class="flex items-center">`
-                    //                        ^
-                    // E.g.: `[flex]` (Angular syntax)
-                    //             ^
-                    // E.g.: `[class.flex.items-center]` (Angular syntax)
-                    //                   ^
-                    // E.g.: `:div="{ flex: true }"` (JavaScript object syntax)
-                    //                    ^
-                    _ if is_valid_after_boundary(&cursor.next()) || {
-                        // Or any of these characters
-                        //
-                        // - `:`, because of JS object keys
-                        // - `/`, because of modifiers
-                        // - `!`, because of important
-                        matches!(
-                            cursor.next().into(),
-                            Class::Colon | Class::Slash | Class::Exclamation
-                        )
-                    } =>
-                    {
-                        return self.done(self.start_pos, cursor)
-                    }
-
-                    // Everything else is invalid
-                    _ => return self.restart(),
-                },
-
-                // A dot must be surrounded by numbers
-                //
-                // E.g.: `px-2.5`
-                //           ^^^
-                Class::Dot => {
-                    if !matches!(cursor.prev().into(), Class::Number) {
-                        return self.restart();
-                    }
-
-                    if !matches!(cursor.next().into(), Class::Number) {
-                        return self.restart();
-                    }
-
-                    cursor.advance();
-                }
-
-                // A number must be preceded by a `-`, `.` or another alphanumeric
-                // character, and can be followed by a `.` or an alphanumeric character or
-                // dash or underscore.
-                //
-                // E.g.: `text-2xs`
-                //            ^^
-                //       `p-2.5`
-                //           ^^
-                //       `bg-red-500`
-                //                ^^
-                // It can also be followed by a %, but that will be considered the end of
-                // the candidate.
-                //
-                // E.g.: `from-15%`
-                //               ^
-                //
-                Class::Number => {
-                    if !matches!(
-                        cursor.prev().into(),
-                        Class::Dash
-                            | Class::Underscore
-                            | Class::Dot
-                            | Class::Number
-                            | Class::AlphaLower
-                            | Class::AlphaUpper
-                    ) {
-                        return self.restart();
-                    }
-
-                    if !matches!(
-                        cursor.next().into(),
-                        Class::Dot
-                            | Class::Number
-                            | Class::AlphaLower
-                            | Class::AlphaUpper
-                            | Class::Percent
-                            | Class::Underscore
-                            | Class::Dash
-                    ) {
-                        return self.done(self.start_pos, cursor);
-                    }
-
-                    cursor.advance();
-                }
-
-                // A percent sign must be preceded by a number.
-                //
-                // E.g.:
-                //
-                // ```
-                // from-15%
-                //       ^^
-                // ```
-                Class::Percent => {
-                    if !matches!(cursor.prev().into(), Class::Number) {
-                        return self.restart();
-                    }
-
-                    return self.done(self.start_pos, cursor);
-                }
-
-                // Everything else is invalid
-                _ => return self.restart(),
-            };
-        }
-
-        self.restart()
-    }
-}
-
-#[derive(Clone, Copy, ClassifyBytes)]
-enum Class {
-    #[bytes_range(b'a'..=b'z')]
-    AlphaLower,
-
-    #[bytes_range(b'A'..=b'Z')]
-    AlphaUpper,
-
-    #[bytes(b'@')]
-    At,
-
-    #[bytes(b':')]
-    Colon,
-
-    #[bytes(b'-')]
-    Dash,
-
-    #[bytes(b'.')]
-    Dot,
-
-    #[bytes(b'\0')]
-    End,
-
-    #[bytes(b'!')]
-    Exclamation,
-
-    #[bytes_range(b'0'..=b'9')]
-    Number,
-
-    #[bytes(b'[')]
-    OpenBracket,
-
-    #[bytes(b']')]
-    CloseBracket,
-
-    #[bytes(b'(')]
-    OpenParen,
-
-    #[bytes(b'%')]
-    Percent,
-
-    #[bytes(b'"', b'\'', b'`')]
-    Quote,
-
-    #[bytes(b'/')]
-    Slash,
-
-    #[bytes(b'_')]
-    Underscore,
-
-    #[bytes(b' ', b'\t', b'\n', b'\r', b'\x0C')]
-    Whitespace,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::{IdleState, NamedUtilityMachine};
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_named_utility_machine_performance() {
-        let input = r#"<button class="flex items-center px-2.5 -inset-x-2 bg-[#0088cc] text-(--my-color)">"#;
-
-        NamedUtilityMachine::<IdleState>::test_throughput(1_000_000, input);
-        NamedUtilityMachine::<IdleState>::test_duration_once(input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_named_utility_extraction() {
-        for (input, expected) in [
-            // Simple utility
-            ("flex", vec!["flex"]),
-            // Simple utility with special character(s)
-            ("@container", vec!["@container"]),
-            // Simple single-character utility
-            ("a", vec!["a"]),
-            // With dashes
-            ("items-center", vec!["items-center"]),
-            // With double dashes
-            ("items--center", vec!["items--center"]),
-            // With numbers
-            ("px-5", vec!["px-5"]),
-            ("px-2.5", vec!["px-2.5"]),
-            // Underscores followed by numbers
-            ("header_1", vec!["header_1"]),
-            ("header_1_2", vec!["header_1_2"]),
-            // With number followed by dash or underscore
-            ("text-title1-strong", vec!["text-title1-strong"]),
-            ("text-title1_strong", vec!["text-title1_strong"]),
-            // With capital letter followed by number
-            ("text-titleV1-strong", vec!["text-titleV1-strong"]),
-            // With trailing % sign
-            ("from-15%", vec!["from-15%"]),
-            // Arbitrary value with bracket notation
-            ("bg-[#0088cc]", vec!["bg-[#0088cc]"]),
-            // Arbitrary variable
-            ("bg-(--my-color)", vec!["bg-(--my-color)"]),
-            // Arbitrary variable with fallback
-            ("bg-(--my-color,red,blue)", vec!["bg-(--my-color,red,blue)"]),
-            // --------------------------------------------------------
-
-            // Exceptions:
-            // Arbitrary variable must be valid
-            (r"bg-(--my-color\)", vec![]),
-            (r"bg-(--my#color)", vec![]),
-            // Single letter utility with uppercase letter is invalid
-            ("A", vec![]),
-            // A dot must be in-between numbers
-            ("opacity-0.5", vec!["opacity-0.5"]),
-            ("opacity-.5", vec![]),
-            ("opacity-5.", vec![]),
-            // A number must be preceded by a `-`, `.` or another number
-            ("text-2xs", vec!["text-2xs"]),
-            // Random invalid utilities
-            ("-$", vec![]),
-            ("-_", vec![]),
-            ("-foo-", vec![]),
-            ("foo-=", vec![]),
-            ("foo-#", vec![]),
-            ("foo-!", vec![]),
-            ("foo-/20", vec![]),
-            ("-", vec![]),
-            ("--", vec![]),
-            ("---", vec![]),
-        ] {
-            for (wrapper, additional) in [
-                // No wrapper
-                ("{}", vec![]),
-                // With leading spaces
-                (" {}", vec![]),
-                // With trailing spaces
-                ("{} ", vec![]),
-                // Surrounded by spaces
-                (" {} ", vec![]),
-                // Inside a string
-                ("'{}'", vec![]),
-                // Inside a function call
-                ("fn('{}')", vec![]),
-                // Inside nested function calls
-                ("fn1(fn2('{}'))", vec!["fn1", "fn2"]),
-                // --------------------------
-                //
-                // HTML
-                // Inside a class (on its own)
-                (r#"<div class="{}"></div>"#, vec!["div", "class"]),
-                // Inside a class (first)
-                (r#"<div class="{} foo"></div>"#, vec!["div", "class", "foo"]),
-                // Inside a class (second)
-                (r#"<div class="foo {}"></div>"#, vec!["div", "class", "foo"]),
-                // Inside a class (surrounded)
-                (
-                    r#"<div class="foo {} bar"></div>"#,
-                    vec!["div", "class", "foo", "bar"],
-                ),
-                // --------------------------
-                //
-                // JavaScript
-                // Inside a variable
-                (r#"let classes = '{}';"#, vec!["let", "classes"]),
-                // Inside an object (key)
-                (
-                    r#"let classes = { '{}': true };"#,
-                    vec!["let", "classes", "true"],
-                ),
-                // Inside an object (no spaces, key)
-                (r#"let classes = {'{}':true};"#, vec!["let", "classes"]),
-                // Inside an object (value)
-                (
-                    r#"let classes = { primary: '{}' };"#,
-                    vec!["let", "classes", "primary"],
-                ),
-                // Inside an object (no spaces, value)
-                (
-                    r#"let classes = {primary:'{}'};"#,
-                    vec!["let", "classes", "primary"],
-                ),
-                // Inside an array
-                (r#"let classes = ['{}'];"#, vec!["let", "classes"]),
-            ] {
-                let input = wrapper.replace("{}", input);
-
-                let mut expected = expected.clone();
-                expected.extend(additional);
-                expected.sort();
-
-                let mut actual = NamedUtilityMachine::<IdleState>::test_extract_all(&input);
-                actual.sort();
-
-                if actual != expected {
-                    dbg!(&input);
-                }
-                assert_eq!(actual, expected);
-            }
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/named_variant_machine.rs b/crates/oxide/src/extractor/named_variant_machine.rs
deleted file mode 100644
index 285fe6ab5..000000000
--- a/crates/oxide/src/extractor/named_variant_machine.rs
+++ /dev/null
@@ -1,422 +0,0 @@
-use crate::cursor;
-use crate::extractor::arbitrary_value_machine::ArbitraryValueMachine;
-use crate::extractor::arbitrary_variable_machine::ArbitraryVariableMachine;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::modifier_machine::ModifierMachine;
-use classification_macros::ClassifyBytes;
-use std::marker::PhantomData;
-
-#[derive(Debug, Default)]
-pub struct IdleState;
-
-/// Parsing a variant
-#[derive(Debug, Default)]
-pub struct ParsingState;
-
-/// Parsing a modifier
-///
-/// E.g.:
-///
-/// ```text
-/// group-hover/name:
-///            ^^^^^
-/// ```
-///
-#[derive(Debug, Default)]
-pub struct ParsingModifierState;
-
-/// Parsing the end of a variant
-///
-/// E.g.:
-///
-/// ```text
-/// hover:
-///      ^
-/// ```
-#[derive(Debug, Default)]
-pub struct ParsingEndState;
-
-/// Extract named variants from an input including the `:`.
-///
-/// E.g.:
-///
-/// ```text
-/// hover:flex
-/// ^^^^^^
-///
-/// data-[state=pending]:flex
-/// ^^^^^^^^^^^^^^^^^^^^^
-///
-/// supports-(--my-variable):flex
-/// ^^^^^^^^^^^^^^^^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct NamedVariantMachine<State = IdleState> {
-    /// Start position of the variant
-    start_pos: usize,
-
-    arbitrary_variable_machine: ArbitraryVariableMachine,
-    arbitrary_value_machine: ArbitraryValueMachine,
-    modifier_machine: ModifierMachine,
-
-    _state: PhantomData<State>,
-}
-
-impl<State> NamedVariantMachine<State> {
-    #[inline(always)]
-    fn transition<NextState>(&self) -> NamedVariantMachine<NextState> {
-        NamedVariantMachine {
-            start_pos: self.start_pos,
-            arbitrary_variable_machine: Default::default(),
-            arbitrary_value_machine: Default::default(),
-            modifier_machine: Default::default(),
-            _state: PhantomData,
-        }
-    }
-}
-
-impl Machine for NamedVariantMachine<IdleState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline(always)]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match cursor.curr().into() {
-            Class::AlphaLower | Class::Star => match cursor.next().into() {
-                // Valid single character variant, must be followed by a `:`
-                //
-                // E.g.: `<div class="x:flex"></div>`
-                //                    ^^
-                // E.g.: `*:`
-                //        ^^
-                Class::Colon => {
-                    cursor.advance();
-                    self.transition::<ParsingEndState>().next(cursor)
-                }
-
-                // Valid start characters
-                //
-                // E.g.: `hover:`
-                //        ^
-                // E.g.: `**:`
-                //        ^
-                _ => {
-                    self.start_pos = cursor.pos;
-                    cursor.advance();
-                    self.transition::<ParsingState>().next(cursor)
-                }
-            },
-
-            // Valid start characters
-            //
-            // E.g.: `2xl:`
-            //        ^
-            // E.g.: `@md:`
-            //        ^
-            Class::Number | Class::At => {
-                self.start_pos = cursor.pos;
-                cursor.advance();
-                self.transition::<ParsingState>().next(cursor)
-            }
-
-            // Everything else, is not a valid start of the variant.
-            _ => MachineState::Idle,
-        }
-    }
-}
-
-impl Machine for NamedVariantMachine<ParsingState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline(always)]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        let len = cursor.input.len();
-
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                Class::Dash => match cursor.next().into() {
-                    // Start of an arbitrary value
-                    //
-                    // E.g.: `data-[state=pending]:`.
-                    //            ^^
-                    Class::OpenBracket => {
-                        cursor.advance();
-                        return match self.arbitrary_value_machine.next(cursor) {
-                            MachineState::Idle => self.restart(),
-                            MachineState::Done(_) => self.parse_arbitrary_end(cursor),
-                        };
-                    }
-
-                    // Start of an arbitrary variable
-                    //
-                    // E.g.: `supports-(--my-color):`.
-                    //                ^^
-                    Class::OpenParen => {
-                        cursor.advance();
-                        return match self.arbitrary_variable_machine.next(cursor) {
-                            MachineState::Idle => self.restart(),
-                            MachineState::Done(_) => self.parse_arbitrary_end(cursor),
-                        };
-                    }
-
-                    // Valid characters _if_ followed by another valid character. These characters are
-                    // only valid inside of the variant but not at the end of the variant.
-                    //
-                    // E.g.: `hover-`
-                    //             ^   Invalid
-                    // E.g.: `hover-!`
-                    //             ^   Invalid
-                    // E.g.: `hover-/`
-                    //             ^   Invalid
-                    // E.g.: `flex-1`
-                    //            ^    Valid
-                    Class::Dash
-                    | Class::Underscore
-                    | Class::AlphaLower
-                    | Class::AlphaUpper
-                    | Class::Number => cursor.advance(),
-
-                    // Everything else is invalid
-                    _ => return self.restart(),
-                },
-
-                // Start of an arbitrary value
-                //
-                // E.g.: `@[state=pending]:`.
-                //         ^
-                Class::OpenBracket => {
-                    return match self.arbitrary_value_machine.next(cursor) {
-                        MachineState::Idle => self.restart(),
-                        MachineState::Done(_) => self.parse_arbitrary_end(cursor),
-                    };
-                }
-
-                Class::Underscore => match cursor.next().into() {
-                    // Valid characters _if_ followed by another valid character. These characters are
-                    // only valid inside of the variant but not at the end of the variant.
-                    //
-                    // E.g.: `hover_`
-                    //             ^     Invalid
-                    // E.g.: `hover_!`
-                    //             ^     Invalid
-                    // E.g.: `hover_/`
-                    //             ^     Invalid
-                    // E.g.: `custom_1`
-                    //              ^    Valid
-                    Class::Dash
-                    | Class::Underscore
-                    | Class::AlphaLower
-                    | Class::AlphaUpper
-                    | Class::Number => cursor.advance(),
-
-                    // Everything else is invalid
-                    _ => return self.restart(),
-                },
-
-                // Still valid characters
-                Class::AlphaLower | Class::AlphaUpper | Class::Number | Class::Star => {
-                    cursor.advance()
-                }
-
-                // A `/` means we are at the end of the variant, but there might be a modifier
-                //
-                // E.g.:
-                //
-                // ```
-                // group-hover/name:
-                //            ^
-                // ```
-                Class::Slash => return self.transition::<ParsingModifierState>().next(cursor),
-
-                // A `:` means we are at the end of the variant
-                //
-                // E.g.: `hover:`
-                //             ^
-                Class::Colon => return self.done(self.start_pos, cursor),
-
-                // A dot must be surrounded by numbers
-                //
-                // E.g.: `2.5xl:flex`
-                //        ^^^
-                Class::Dot => {
-                    if !matches!(cursor.prev().into(), Class::Number) {
-                        return self.restart();
-                    }
-
-                    if !matches!(cursor.next().into(), Class::Number) {
-                        return self.restart();
-                    }
-
-                    cursor.advance();
-                }
-
-                // Everything else is invalid
-                _ => return self.restart(),
-            };
-        }
-
-        self.restart()
-    }
-}
-
-impl NamedVariantMachine<ParsingState> {
-    #[inline(always)]
-    fn parse_arbitrary_end(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match cursor.next().into() {
-            Class::Slash => {
-                cursor.advance();
-                self.transition::<ParsingModifierState>().next(cursor)
-            }
-            Class::Colon => {
-                cursor.advance();
-                self.transition::<ParsingEndState>().next(cursor)
-            }
-            _ => self.restart(),
-        }
-    }
-}
-
-impl Machine for NamedVariantMachine<ParsingModifierState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline(always)]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match self.modifier_machine.next(cursor) {
-            MachineState::Idle => self.restart(),
-            MachineState::Done(_) => match cursor.next().into() {
-                // Modifier must be followed by a `:`
-                //
-                // E.g.: `group-hover/name:`
-                //                        ^
-                Class::Colon => {
-                    cursor.advance();
-                    self.transition::<ParsingEndState>().next(cursor)
-                }
-
-                // Everything else is invalid
-                _ => self.restart(),
-            },
-        }
-    }
-}
-
-impl Machine for NamedVariantMachine<ParsingEndState> {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline(always)]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match cursor.curr().into() {
-            // The end of a variant must be the `:`
-            //
-            // E.g.: `hover:`
-            //             ^
-            Class::Colon => self.done(self.start_pos, cursor),
-
-            // Everything else is invalid
-            _ => self.restart(),
-        }
-    }
-}
-
-#[derive(Clone, Copy, ClassifyBytes)]
-enum Class {
-    #[bytes_range(b'a'..=b'z')]
-    AlphaLower,
-
-    #[bytes_range(b'A'..=b'Z')]
-    AlphaUpper,
-
-    #[bytes(b'@')]
-    At,
-
-    #[bytes(b':')]
-    Colon,
-
-    #[bytes(b'-')]
-    Dash,
-
-    #[bytes(b'.')]
-    Dot,
-
-    #[bytes_range(b'0'..=b'9')]
-    Number,
-
-    #[bytes(b'[')]
-    OpenBracket,
-
-    #[bytes(b'(')]
-    OpenParen,
-
-    #[bytes(b'*')]
-    Star,
-
-    #[bytes(b'/')]
-    Slash,
-
-    #[bytes(b'_')]
-    Underscore,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::{IdleState, NamedVariantMachine};
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_named_variant_machine_performance() {
-        let input = r#"<button class="hover:focus:flex data-[state=pending]:flex supports-(--my-variable):flex group-hover/named:not-has-peer-data-disabled:flex">"#;
-
-        NamedVariantMachine::<IdleState>::test_throughput(1_000_000, input);
-        NamedVariantMachine::<IdleState>::test_duration_once(input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_named_variant_extraction() {
-        for (input, expected) in [
-            // Simple variant
-            ("hover:", vec!["hover:"]),
-            // Simple single-character variant
-            ("a:", vec!["a:"]),
-            ("a/foo:", vec!["a/foo:"]),
-            //
-            ("group-hover:flex", vec!["group-hover:"]),
-            ("group-hover/name:flex", vec!["group-hover/name:"]),
-            (
-                "group-[data-state=pending]/name:flex",
-                vec!["group-[data-state=pending]/name:"],
-            ),
-            ("supports-(--foo)/name:flex", vec!["supports-(--foo)/name:"]),
-            // Odd media queries
-            ("1.5xl:flex", vec!["1.5xl:"]),
-            // Container queries
-            ("@md:flex", vec!["@md:"]),
-            ("@max-md:flex", vec!["@max-md:"]),
-            ("@-[36rem]:flex", vec!["@-[36rem]:"]),
-            ("@[36rem]:flex", vec!["@[36rem]:"]),
-            // --------------------------------------------------------
-
-            // Exceptions:
-            // Arbitrary variable must be valid
-            (r"supports-(--my-color\):", vec![]),
-            (r"supports-(--my#color)", vec![]),
-            // Single letter variant with uppercase letter is invalid
-            ("A:", vec![]),
-        ] {
-            let actual = NamedVariantMachine::<IdleState>::test_extract_all(input);
-            if actual != expected {
-                dbg!(&input);
-            }
-            assert_eq!(actual, expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/clojure.rs b/crates/oxide/src/extractor/pre_processors/clojure.rs
deleted file mode 100644
index 3fb4ce601..000000000
--- a/crates/oxide/src/extractor/pre_processors/clojure.rs
+++ /dev/null
@@ -1,436 +0,0 @@
-use crate::cursor;
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use bstr::ByteSlice;
-
-#[derive(Debug, Default)]
-pub struct Clojure;
-
-/// This is meant to be a rough estimate of a valid ClojureScript keyword
-///
-/// This can be approximated by the following regex:
-/// /::?[a-zA-Z0-9!#$%&*+./:<=>?_|-]+/
-///
-/// However, keywords are intended to be detected as utilities. Since the set
-/// of valid characters in a utility (outside of arbitrary values) is smaller,
-/// along with the fact that neither `[]` nor `()` are allowed in keywords we
-/// can simplify this list quite a bit.
-#[inline]
-fn is_keyword_character(byte: u8) -> bool {
-    (matches!(
-        byte,
-        b'!' | b'#' | b'%' | b'*' | b'+' | b'-' | b'.' | b'/' | b':' | b'_'
-    ) | byte.is_ascii_alphanumeric())
-}
-
-impl PreProcessor for Clojure {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let content = content
-            .replace(":class", "      ")
-            .replace(":className", "          ");
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(&content);
-
-        while cursor.pos < len {
-            match cursor.curr() {
-                // Consume strings as-is
-                b'"' => {
-                    result[cursor.pos] = b' ';
-                    cursor.advance();
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // Escaped character, skip ahead to the next character
-                            b'\\' => cursor.advance_twice(),
-
-                            // End of the string
-                            b'"' => {
-                                result[cursor.pos] = b' ';
-                                break;
-                            }
-
-                            // Everything else is valid
-                            _ => cursor.advance(),
-                        };
-                    }
-                }
-
-                // Discard line comments until the end of the line.
-                // Comments start with `;;`
-                b';' if matches!(cursor.next(), b';') => {
-                    while cursor.pos < len && cursor.curr() != b'\n' {
-                        result[cursor.pos] = b' ';
-                        cursor.advance();
-                    }
-                }
-
-                // Consume keyword until a terminating character is reached.
-                b':' => {
-                    result[cursor.pos] = b' ';
-                    cursor.advance();
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // A `.` surrounded by digits is a decimal number, so we don't want to replace it.
-                            //
-                            // E.g.:
-                            // ```
-                            // gap-1.5
-                            //      ^
-                            // ```
-                            b'.' if cursor.prev().is_ascii_digit()
-                                && cursor.next().is_ascii_digit() =>
-                            {
-                                // Keep the `.` as-is
-                            }
-                            // A `.` not surrounded by digits denotes the start of a new class name in a
-                            // dot-delimited keyword.
-                            //
-                            // E.g.:
-                            // ```
-                            // flex.gap-1.5
-                            //     ^
-                            // ```
-                            b'.' => {
-                                result[cursor.pos] = b' ';
-                            }
-                            // End of keyword.
-                            _ if !is_keyword_character(cursor.curr()) => {
-                                result[cursor.pos] = b' ';
-                                break;
-                            }
-
-                            // Consume everything else.
-                            _ => {}
-                        };
-
-                        cursor.advance();
-                    }
-                }
-
-                // Handle quote with a list, e.g.: `'(…)`
-                // and with a vector, e.g.: `'[…]`
-                b'\'' if matches!(cursor.next(), b'[' | b'(') => {
-                    result[cursor.pos] = b' ';
-                    cursor.advance();
-                    result[cursor.pos] = b' ';
-                    let end = match cursor.curr() {
-                        b'[' => b']',
-                        b'(' => b')',
-                        _ => unreachable!(),
-                    };
-
-                    // Consume until the closing `]`
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            x if x == end => {
-                                result[cursor.pos] = b' ';
-                                break;
-                            }
-
-                            // Consume strings as-is
-                            b'"' => {
-                                result[cursor.pos] = b' ';
-                                cursor.advance();
-
-                                while cursor.pos < len {
-                                    match cursor.curr() {
-                                        // Escaped character, skip ahead to the next character
-                                        b'\\' => cursor.advance_twice(),
-
-                                        // End of the string
-                                        b'"' => {
-                                            result[cursor.pos] = b' ';
-                                            break;
-                                        }
-
-                                        // Everything else is valid
-                                        _ => cursor.advance(),
-                                    };
-                                }
-                            }
-                            _ => {}
-                        };
-
-                        cursor.advance();
-                    }
-                }
-
-                // Handle quote with a keyword, e.g.: `'bg-white`
-                b'\'' if !cursor.next().is_ascii_whitespace() => {
-                    result[cursor.pos] = b' ';
-                    cursor.advance();
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // End of keyword.
-                            _ if !is_keyword_character(cursor.curr()) => {
-                                result[cursor.pos] = b' ';
-                                break;
-                            }
-
-                            // Consume everything else.
-                            _ => {}
-                        };
-
-                        cursor.advance();
-                    }
-                }
-
-                // Aggressively discard everything else, reducing false positives and preventing
-                // characters surrounding keywords from producing false negatives.
-                // E.g.:
-                // ```
-                // (when condition :bg-white)
-                //                          ^
-                // ```
-                // A ')' is never a valid part of a keyword, but will nonetheless prevent 'bg-white'
-                // from being extracted if not discarded.
-                _ => {
-                    result[cursor.pos] = b' ';
-                }
-            };
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Clojure;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_clojure_pre_processor() {
-        for (input, expected) in [
-            (":div.flex-1.flex-2", " div flex-1 flex-2"),
-            (
-                ":.flex-3.flex-4 ;defaults to div",
-                "  flex-3 flex-4                 ",
-            ),
-            ("{:class :flex-5.flex-6", "         flex-5 flex-6"),
-            (r#"{:class "flex-7 flex-8"}"#, r#"         flex-7 flex-8  "#),
-            (
-                r#"{:class  ["flex-9" :flex-10]}"#,
-                r#"           flex-9   flex-10  "#,
-            ),
-            (
-                r#"(dom/div {:class "flex-11 flex-12"})"#,
-                r#"                  flex-11 flex-12   "#,
-            ),
-            ("(dom/div :.flex-13.flex-14", "           flex-13 flex-14"),
-            (
-                r#"[:div#hello.bg-white.pr-1.5 {:class ["grid grid-cols-[auto,1fr] grid-rows-2"]}]"#,
-                r#"  div#hello bg-white pr-1.5           grid grid-cols-[auto,1fr] grid-rows-2    "#,
-            ),
-        ] {
-            Clojure::test(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_extract_candidates() {
-        // https://github.com/luckasRanarison/tailwind-tools.nvim/issues/68#issuecomment-2660951258
-        let input = r#"
-            :div.c1.c2
-            :.c3.c4 ;defaults to div
-            {:class :c5.c6
-            {:class "c7 c8"}
-            {:class  ["c9" :c10]}
-            (dom/div {:class "c11 c12"})
-            (dom/div :.c13.c14
-            {:className :c15.c16
-            {:className "c17 c18"}
-            {:className  ["c19" :c20]}
-            (dom/div {:className "c21 c22"})
-        "#;
-
-        Clojure::test_extract_contains(
-            input,
-            vec![
-                "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "c11", "c12", "c13",
-                "c14", "c15", "c16", "c17", "c18", "c19", "c20", "c21", "c22",
-            ],
-        );
-
-        // Similar structure but using real classes
-        let input = r#"
-            :div.flex-1.flex-2
-            :.flex-3.flex-4 ;defaults to div
-            {:class :flex-5.flex-6
-            {:class "flex-7 flex-8"}
-            {:class  ["flex-9" :flex-10]}
-            (dom/div {:class "flex-11 flex-12"})
-            (dom/div :.flex-13.flex-14
-            {:className :flex-15.flex-16
-            {:className "flex-17 flex-18"}
-            {:className  ["flex-19" :flex-20]}
-            (dom/div {:className "flex-21 flex-22"})
-        "#;
-
-        Clojure::test_extract_contains(
-            input,
-            vec![
-                "flex-1", "flex-2", "flex-3", "flex-4", "flex-5", "flex-6", "flex-7", "flex-8",
-                "flex-9", "flex-10", "flex-11", "flex-12", "flex-13", "flex-14", "flex-15",
-                "flex-16", "flex-17", "flex-18", "flex-19", "flex-20", "flex-21", "flex-22",
-            ],
-        );
-    }
-
-    #[test]
-    fn test_special_characters_are_valid_in_strings() {
-        // In this case the `:` and `.` should not be replaced by ` ` because they are inside a
-        // string.
-        let input = r#"
-            (dom/div {:class "hover:flex px-1.5"})
-        "#;
-
-        Clojure::test_extract_contains(input, vec!["hover:flex", "px-1.5"]);
-    }
-
-    #[test]
-    fn test_ignore_comments_with_invalid_strings() {
-        let input = r#"
-            ;; This is an unclosed string: "
-            (dom/div {:class "hover:flex px-1.5"})
-        "#;
-
-        Clojure::test_extract_contains(input, vec!["hover:flex", "px-1.5"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17760
-    #[test]
-    fn test_extraction_of_classes_with_dots() {
-        let input = r#"
-            ($ :div {:class [:flex :gap-1.5 :p-1]} …)
-        "#;
-
-        Clojure::test_extract_contains(input, vec!["flex", "gap-1.5", "p-1"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/18336
-    #[test]
-    fn test_extraction_of_pseudoclasses_from_keywords() {
-        let input = r#"
-            ($ :div {:class [:flex :first:lg:pr-6 :first:2xl:pl-6 :group-hover/2:2xs:pt-6]} …)
-
-            :.hover:bg-white
-
-            [:div#hello.bg-white.pr-1.5]
-        "#;
-
-        Clojure::test_extract_contains(
-            input,
-            vec![
-                "flex",
-                "first:lg:pr-6",
-                "first:2xl:pl-6",
-                "group-hover/2:2xs:pt-6",
-                "hover:bg-white",
-                "bg-white",
-                "pr-1.5",
-            ],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/18344
-    #[test]
-    fn test_noninterference_of_parens_on_keywords() {
-        let input = r#"
-            (get props :y-padding :py-5)
-            ($ :div {:class [:flex.pr-1.5 (if condition :bg-white :bg-black)]})
-        "#;
-
-        Clojure::test_extract_contains(
-            input,
-            vec!["py-5", "flex", "pr-1.5", "bg-white", "bg-black"],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/18882
-    #[test]
-    fn test_extract_from_symbol_list() {
-        let input = r#"
-            [:div {:class '[z-1 z-2
-                            z-3 z-4]}]
-        "#;
-        Clojure::test_extract_contains(input, vec!["z-1", "z-2", "z-3", "z-4"]);
-
-        // https://github.com/tailwindlabs/tailwindcss/pull/18345#issuecomment-3253403847
-        let input = r#"
-            (def hl-class-names '[ring ring-blue-500])
-
-            [:div
-             {:class (cond-> '[input w-full]
-                       textarea? (conj 'textarea)
-                       (seq errors) (concat '[border-red-500 bg-red-100])
-                       highlight? (concat hl-class-names))}]
-        "#;
-        Clojure::test_extract_contains(
-            input,
-            vec![
-                "ring",
-                "ring-blue-500",
-                "input",
-                "w-full",
-                "textarea",
-                "border-red-500",
-                "bg-red-100",
-            ],
-        );
-
-        let input = r#"
-          [:div
-            {:class '[h-100 lg:h-200 max-w-32 mx-auto py-60
-                      flex flex-col justify-end items-center
-                      lg:flex-row lg:justify-between
-                      bg-cover bg-center bg-no-repeat rounded-3xl overflow-hidden
-                      font-semibold text-gray-900]}]
-        "#;
-        Clojure::test_extract_contains(
-            input,
-            vec![
-                "h-100",
-                "lg:h-200",
-                "max-w-32",
-                "mx-auto",
-                "py-60",
-                "flex",
-                "flex-col",
-                "justify-end",
-                "items-center",
-                "lg:flex-row",
-                "lg:justify-between",
-                "bg-cover",
-                "bg-center",
-                "bg-no-repeat",
-                "rounded-3xl",
-                "overflow-hidden",
-                "font-semibold",
-                "text-gray-900",
-            ],
-        );
-
-        // `/` is invalid and requires explicit quoting
-        let input = r#"
-            '[p-32 "text-black/50"]
-        "#;
-        Clojure::test_extract_contains(input, vec!["p-32", "text-black/50"]);
-
-        // `[…]` is invalid and requires explicit quoting
-        let input = r#"
-            (print '[ring ring-blue-500 "bg-[#0088cc]"])
-        "#;
-        Clojure::test_extract_contains(input, vec!["ring", "ring-blue-500", "bg-[#0088cc]"]);
-
-        // `'(…)` looks similar to `[…]` but uses parentheses instead of brackets
-        let input = r#"
-            (print '(ring ring-blue-500 "bg-[#0088cc]"))
-        "#;
-        Clojure::test_extract_contains(input, vec!["ring", "ring-blue-500", "bg-[#0088cc]"]);
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/elixir.rs b/crates/oxide/src/extractor/pre_processors/elixir.rs
deleted file mode 100644
index 7737a6b2d..000000000
--- a/crates/oxide/src/extractor/pre_processors/elixir.rs
+++ /dev/null
@@ -1,154 +0,0 @@
-use crate::cursor;
-use crate::extractor::bracket_stack::BracketStack;
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-#[derive(Debug, Default)]
-pub struct Elixir;
-
-impl PreProcessor for Elixir {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let mut cursor = cursor::Cursor::new(content);
-        let mut result = content.to_vec();
-        let mut bracket_stack = BracketStack::default();
-
-        while cursor.pos < content.len() {
-            // Look for a sigil marker
-            if cursor.curr() != b'~' {
-                cursor.advance();
-                continue;
-            }
-
-            // Scan charlists, strings, and wordlists
-            if !matches!(cursor.next(), b'c' | b'C' | b's' | b'S' | b'w' | b'W') {
-                cursor.advance();
-                continue;
-            }
-
-            cursor.advance_twice();
-
-            // Match the opening for a sigil
-            if !matches!(cursor.curr(), b'(' | b'[' | b'{') {
-                continue;
-            }
-
-            // Replace the opening bracket with a space
-            result[cursor.pos] = b' ';
-
-            // Scan until we find a balanced closing one and replace it too
-            bracket_stack.push(cursor.curr());
-
-            while cursor.pos < content.len() {
-                cursor.advance();
-
-                match cursor.curr() {
-                    // Escaped character, skip ahead to the next character
-                    b'\\' => cursor.advance_twice(),
-                    b'(' | b'[' | b'{' => {
-                        bracket_stack.push(cursor.curr());
-                    }
-                    b')' | b']' | b'}' if !bracket_stack.is_empty() => {
-                        bracket_stack.pop(cursor.curr());
-
-                        if bracket_stack.is_empty() {
-                            // Replace the closing bracket with a space
-                            result[cursor.pos] = b' ';
-                            break;
-                        }
-                    }
-                    _ => {}
-                }
-            }
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Elixir;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_elixir_pre_processor() {
-        for (input, expected) in [
-            // Simple sigils
-            ("~W(flex underline)", "~W flex underline "),
-            ("~W[flex underline]", "~W flex underline "),
-            ("~W{flex underline}", "~W flex underline "),
-            // Sigils with nested brackets
-            (
-                "~W(text-(--my-color) bg-(--my-color))",
-                "~W text-(--my-color) bg-(--my-color) ",
-            ),
-            ("~W[text-[red] bg-[red]]", "~W text-[red] bg-[red] "),
-            // Word sigils with modifiers
-            ("~W(flex underline)a", "~W flex underline a"),
-            ("~W(flex underline)c", "~W flex underline c"),
-            ("~W(flex underline)s", "~W flex underline s"),
-            // Other sigil types
-            ("~w(flex underline)", "~w flex underline "),
-            ("~c(flex underline)", "~c flex underline "),
-            ("~C(flex underline)", "~C flex underline "),
-            ("~s(flex underline)", "~s flex underline "),
-            ("~S(flex underline)", "~S flex underline "),
-        ] {
-            Elixir::test(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_extract_candidates() {
-        let input = r#"
-          ~W(c1 c2)
-          ~W[c3 c4]
-          ~W{c5 c6}
-          ~W(text-(--c7) bg-(--c8))
-          ~W[text-[c9] bg-[c10]]
-          ~W(c13 c14)a
-          ~W(c15 c16)c
-          ~W(c17 c18)s
-          ~w(c19 c20)
-          ~c(c21 c22)
-          ~C(c23 c24)
-          ~s(c25 c26)
-          ~S(c27 c28)
-          ~W"c29 c30"
-          ~W'c31 c32'
-        "#;
-
-        Elixir::test_extract_contains(
-            input,
-            vec![
-                "c1",
-                "c2",
-                "c3",
-                "c4",
-                "c5",
-                "c6",
-                "text-(--c7)",
-                "bg-(--c8)",
-                "c13",
-                "c14",
-                "c15",
-                "c16",
-                "c17",
-                "c18",
-                "c19",
-                "c20",
-                "c21",
-                "c22",
-                "c23",
-                "c24",
-                "c25",
-                "c26",
-                "c27",
-                "c28",
-                "c29",
-                "c30",
-                "c31",
-                "c32",
-            ],
-        );
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/haml.rs b/crates/oxide/src/extractor/pre_processors/haml.rs
deleted file mode 100644
index ec8be0817..000000000
--- a/crates/oxide/src/extractor/pre_processors/haml.rs
+++ /dev/null
@@ -1,616 +0,0 @@
-use crate::cursor;
-use crate::extractor::bracket_stack::BracketStack;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use crate::extractor::variant_machine::VariantMachine;
-use crate::scanner::pre_process_input;
-use bstr::ByteVec;
-
-#[derive(Debug, Default)]
-pub struct Haml;
-
-impl PreProcessor for Haml {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(content);
-        let mut bracket_stack = BracketStack::default();
-
-        // Haml Comments: -#
-        // https://haml.info/docs/yardoc/file.REFERENCE.html#ruby-evaluation
-        //
-        // > The hyphen followed immediately by the pound sign signifies a silent comment. Any text
-        // > following this isn’t rendered in the resulting document at all.
-        //
-        // ```haml
-        // %p foo
-        // -# This is a comment
-        // %p bar
-        // ```
-        //
-        // > You can also nest text beneath a silent comment. None of this text will be rendered.
-        //
-        // ```haml
-        // %p foo
-        // -#
-        //   This won't be displayed
-        //     Nor will this
-        //                    Nor will this.
-        // %p bar
-        // ```
-        //
-        // Ruby Evaluation
-        // https://haml.info/docs/yardoc/file.REFERENCE.html#ruby-evaluation
-        //
-        // When any of the following characters are the first non-whitespace character on the line,
-        // then the line is treated as Ruby code:
-        //
-        // - Inserting Ruby: =
-        //   https://haml.info/docs/yardoc/file.REFERENCE.html#inserting_ruby
-        //
-        //   ```haml
-        //   %p
-        //     = ['hi', 'there', 'reader!'].join " "
-        //     = "yo"
-        //   ```
-        //
-        // - Running Ruby: -
-        //   https://haml.info/docs/yardoc/file.REFERENCE.html#running-ruby--
-        //
-        //   ```haml
-        //   - foo = "hello"
-        //   - foo << " there"
-        //   - foo << " you!"
-        //   %p= foo
-        //   ```
-        //
-        // - Whitespace Preservation: ~
-        //   https://haml.info/docs/yardoc/file.REFERENCE.html#tilde
-        //
-        //   > ~ works just like =, except that it runs Haml::Helpers.preserve on its input.
-        //
-        //   ```haml
-        //   ~ "Foo\n<pre>Bar\nBaz</pre>"
-        //   ```
-        //
-        // Important note:
-        //
-        // > A line of Ruby code can be stretched over multiple lines as long as each line but the
-        // > last ends with a comma.
-        //
-        // ```haml
-        // - links = {:home => "/",
-        //   :docs => "/docs",
-        //   :about => "/about"}
-        // ```
-        //
-        // Ruby Blocks:
-        // https://haml.info/docs/yardoc/file.REFERENCE.html#ruby-blocks
-        //
-        // > Ruby blocks, like XHTML tags, don’t need to be explicitly closed in Haml. Rather,
-        // > they’re automatically closed, based on indentation. A block begins whenever the
-        // > indentation is increased after a Ruby evaluation command. It ends when the indentation
-        // > decreases (as long as it’s not an else clause or something similar).
-        //
-        // ```haml
-        // - (42...47).each do |i|
-        //   %p= i
-        // %p See, I can count!
-        // ```
-        //
-        let mut last_newline_position = 0;
-
-        while cursor.pos < len {
-            match cursor.curr() {
-                // Escape the next character
-                b'\\' => {
-                    cursor.advance_twice();
-                    continue;
-                }
-
-                // Track the last newline position
-                b'\n' => {
-                    last_newline_position = cursor.pos;
-                    cursor.advance();
-                    continue;
-                }
-
-                // Skip HAML comments. `-#`
-                b'-' if cursor.input[last_newline_position..cursor.pos]
-                    .iter()
-                    .all(u8::is_ascii_whitespace)
-                    && matches!(cursor.next(), b'#') =>
-                {
-                    // Just consume the comment
-                    let updated_last_newline_position =
-                        self.skip_indented_block(&mut cursor, last_newline_position);
-
-                    // Override the last known newline position
-                    last_newline_position = updated_last_newline_position;
-                }
-
-                // Skip HTML comments. `/`
-                b'/' if cursor.input[last_newline_position..cursor.pos]
-                    .iter()
-                    .all(u8::is_ascii_whitespace) =>
-                {
-                    // Just consume the comment
-                    let updated_last_newline_position =
-                        self.skip_indented_block(&mut cursor, last_newline_position);
-
-                    // Override the last known newline position
-                    last_newline_position = updated_last_newline_position;
-                }
-
-                // Ruby evaluation
-                b'-' | b'=' | b'~'
-                    if cursor.input[last_newline_position..cursor.pos]
-                        .iter()
-                        .all(u8::is_ascii_whitespace) =>
-                {
-                    let mut start = cursor.pos;
-                    let end = self.skip_indented_block(&mut cursor, last_newline_position);
-
-                    // Increment start with 1 character to skip the `=` or `-` character
-                    start += 1;
-
-                    let ruby_code = &cursor.input[start..end];
-
-                    // Override the last known newline position
-                    last_newline_position = end;
-
-                    let replaced = pre_process_input(ruby_code.to_vec(), "rb");
-                    result.replace_range(start..end, replaced);
-                }
-
-                // Only replace `.` with a space if it's not surrounded by numbers. E.g.:
-                //
-                // ```diff
-                // - .flex.items-center
-                // +  flex items-center
-                // ```
-                //
-                // But with numbers, it's allowed:
-                //
-                // ```diff
-                // - px-2.5
-                // + px-2.5
-                // ```
-                b'.' => {
-                    // Don't replace dots with spaces when inside of any type of brackets, because
-                    // this could be part of arbitrary values. E.g.: `bg-[url(https://example.com)]`
-                    //                                                                       ^
-                    if !bracket_stack.is_empty() {
-                        cursor.advance();
-                        continue;
-                    }
-
-                    // If the dot is surrounded by digits, we want to keep it. E.g.: `px-2.5`
-                    // EXCEPT if it's followed by a valid variant that happens to start with a
-                    // digit.
-                    // E.g.: `bg-red-500.2xl:flex`
-                    //                 ^^^
-                    if cursor.prev().is_ascii_digit() && cursor.next().is_ascii_digit() {
-                        let mut next_cursor = cursor.clone();
-                        next_cursor.advance();
-
-                        let mut variant_machine = VariantMachine::default();
-                        if let MachineState::Done(_) = variant_machine.next(&mut next_cursor) {
-                            result[cursor.pos] = b' ';
-                        }
-                    } else {
-                        result[cursor.pos] = b' ';
-                    }
-                }
-
-                // Handle Ruby syntax with `%w[]` arrays embedded in Haml attribute hashes. E.g.:
-                //
-                // ```haml
-                // %div{class: %w[bg-blue-500 w-10 h-10]}
-                // ```
-                //
-                // A `%` that follows a value is not a percent literal. E.g.: the `50%w` in
-                // `hit rate 50%w.`
-                b'%' if matches!(cursor.next(), b'w' | b'W')
-                    && !cursor.prev().is_ascii_alphanumeric()
-                    && !matches!(cursor.prev(), b'_' | b')' | b']' | b'}') =>
-                {
-                    // Boundary characters
-                    let (open, close) = match cursor.input.get(cursor.pos + 2) {
-                        Some(b'[') => (b'[', b']'),
-                        Some(b'(') => (b'(', b')'),
-                        Some(b'{') => (b'{', b'}'),
-                        Some(b'<') => (b'<', b'>'),
-
-                        // Any other ASCII punctuation can be used as a custom delimiter
-                        Some(&c) if c.is_ascii_punctuation() => (c, c),
-
-                        // Everything else is not a valid delimiter
-                        _ => {
-                            cursor.advance();
-                            continue;
-                        }
-                    };
-
-                    result[cursor.pos] = b' '; // Replace `%`
-                    cursor.advance();
-                    result[cursor.pos] = b' '; // Replace `w`
-                    cursor.advance();
-                    result[cursor.pos] = b' '; // Replace the opening delimiter
-                    cursor.advance();
-
-                    // Paired delimiters can be nested as long as they are balanced. E.g.:
-                    // `%w[foo[bar]baz]` produces a flat array.
-                    let mut depth = 1_usize;
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // Skip escaped characters, unless the backslash is the delimiter
-                            // itself
-                            b'\\' if close != b'\\' => {
-                                // Use backslash to embed spaces in the strings.
-                                if cursor.next() == b' ' {
-                                    result[cursor.pos] = b' ';
-                                }
-
-                                cursor.advance();
-                            }
-
-                            // Start of a nested delimiter pair
-                            c if c == open && open != close => depth += 1,
-
-                            // Closing delimiter
-                            c if c == close => {
-                                depth -= 1;
-
-                                // End of the literal, replace the closing delimiter with a space
-                                if depth == 0 {
-                                    result[cursor.pos] = b' ';
-                                    break;
-                                }
-                            }
-
-                            // Everything else is valid content
-                            _ => {}
-                        }
-
-                        cursor.advance();
-                    }
-                }
-
-                // Replace following characters with spaces if they are not inside of brackets
-                b'#' | b'=' if bracket_stack.is_empty() => {
-                    result[cursor.pos] = b' ';
-                }
-
-                b'(' | b'[' | b'{' => {
-                    // Replace first bracket with a space
-                    if bracket_stack.is_empty() {
-                        result[cursor.pos] = b' ';
-                    }
-                    bracket_stack.push(cursor.curr());
-                }
-
-                b')' | b']' | b'}' if !bracket_stack.is_empty() => {
-                    bracket_stack.pop(cursor.curr());
-
-                    // Replace closing bracket with a space
-                    if bracket_stack.is_empty() {
-                        result[cursor.pos] = b' ';
-                    }
-                }
-
-                // Consume everything else
-                _ => {}
-            };
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-impl Haml {
-    fn skip_indented_block(
-        &self,
-        cursor: &mut cursor::Cursor,
-        last_known_newline_position: usize,
-    ) -> usize {
-        let len = cursor.input.len();
-
-        // Special case: if the first character of the block is `=`, then newlines are only allowed
-        // _if_ the last character of the previous line is a comma `,`.
-        //
-        // https://haml.info/docs/yardoc/file.REFERENCE.html#inserting_ruby
-        //
-        // > A line of Ruby code can be stretched over multiple lines as long as each line but the
-        // > last ends with a comma. For example:
-        //
-        // ```haml
-        // = link_to_remote "Add to cart",
-        //     :url => { :action => "add", :id => product.id },
-        //     :update => { :success => "cart", :failure => "error" }
-        // ```
-        let evaluation_type = cursor.curr();
-
-        let block_indentation_level = cursor
-            .pos
-            .saturating_sub(last_known_newline_position)
-            .saturating_sub(1); /* The newline itself */
-
-        let mut last_newline_position = last_known_newline_position;
-
-        // Consume until the end of the line first
-        while cursor.pos < len && cursor.curr() != b'\n' {
-            cursor.advance();
-        }
-
-        // Block is already done, aka just a line
-        if evaluation_type == b'=' && cursor.prev() != b',' {
-            return cursor.pos;
-        }
-
-        'outer: while cursor.pos < len {
-            match cursor.curr() {
-                // Escape the next character
-                b'\\' => {
-                    cursor.advance_twice();
-                    continue;
-                }
-
-                // Track the last newline position
-                b'\n' => {
-                    last_newline_position = cursor.pos;
-
-                    // We are done with this block
-                    if evaluation_type == b'=' && cursor.prev() != b',' {
-                        break;
-                    }
-
-                    cursor.advance();
-                    continue;
-                }
-
-                // Skip whitespace and compute the indentation level
-                x if x.is_ascii_whitespace() => {
-                    // Find first non-whitespace character
-                    while cursor.pos < len && cursor.curr().is_ascii_whitespace() {
-                        if cursor.curr() == b'\n' {
-                            last_newline_position = cursor.pos;
-
-                            if evaluation_type == b'=' && cursor.prev() != b',' {
-                                // We are done with this block
-                                break 'outer;
-                            }
-                        }
-
-                        cursor.advance();
-                    }
-
-                    let indentation = cursor
-                        .pos
-                        .saturating_sub(last_newline_position)
-                        .saturating_sub(1); /* The newline itself */
-                    if indentation < block_indentation_level {
-                        // We are done with this block
-                        break;
-                    }
-                }
-
-                // Not whitespace, end of block
-                _ => break,
-            };
-
-            cursor.advance();
-        }
-
-        // We didn't find a newline, we reached the end of the input
-        if last_known_newline_position == last_newline_position {
-            return cursor.pos;
-        }
-
-        // Move the cursor to the last newline position
-        cursor.move_to(last_newline_position);
-
-        last_newline_position
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Haml;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    fn test_haml_pre_processor() {
-        for (input, expected) in [
-            // Element with classes
-            (
-                "%body.flex.flex-col.items-center.justify-center",
-                "%body flex flex-col items-center justify-center",
-            ),
-            // Plain element
-            (
-                ".text-slate-500.xl:text-gray-500",
-                " text-slate-500 xl:text-gray-500",
-            ),
-            // Element with hash attributes
-            (
-                ".text-black.xl:text-red-500{ data: { tailwind: 'css' } }",
-                " text-black xl:text-red-500  data: { tailwind: 'css' }  ",
-            ),
-            // Element with a boolean attribute
-            (
-                ".text-green-500.xl:text-blue-500(data-sidebar)",
-                " text-green-500 xl:text-blue-500 data-sidebar ",
-            ),
-            // Element with interpreted content
-            (
-                ".text-yellow-500.xl:text-purple-500= 'Element with interpreted content'",
-                " text-yellow-500 xl:text-purple-500  'Element with interpreted content'",
-            ),
-            // Element with a hash at the end and an extra class.
-            (
-                ".text-orange-500.xl:text-pink-500{ class: 'bg-slate-100' }",
-                " text-orange-500 xl:text-pink-500  class: 'bg-slate-100'  ",
-            ),
-            // Object reference
-            (
-                ".text-teal-500.xl:text-indigo-500[@user, :greeting]",
-                " text-teal-500 xl:text-indigo-500 @user, :greeting ",
-            ),
-            // Element with an ID
-            (
-                ".text-lime-500.xl:text-emerald-500#root",
-                " text-lime-500 xl:text-emerald-500 root",
-            ),
-            // Dots in strings in HTML attributes stay as-is
-            (r#"<div id="px-2.5"></div>"#, r#"<div id "px-2.5"></div>"#),
-        ] {
-            Haml::test(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_strings_only_occur_when_nested() {
-        let input = r#"
-            %p.mt-2.text-xl
-              The quote in the next word, can't be the start of a string
-
-            %h3.mt-24.text-center.text-4xl.font-bold.italic
-              The classes above should be extracted
-        "#;
-
-        Haml::test_extract_contains(
-            input,
-            vec![
-                // First paragraph
-                "mt-2",
-                "text-xl",
-                // second paragraph
-                "mt-24",
-                "text-center",
-                "text-4xl",
-                "font-bold",
-                "italic",
-            ],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/20386
-    #[test]
-    fn test_embedded_ruby_percent_w_delimiters() {
-        for (input, expected) in [
-            // %w[…] in an attribute hash
-            (
-                "%div{class: %w[flex px-2.5]}",
-                "%div class:    flex px-2.5  ",
-            ),
-            // %w<…>
-            (
-                "%div{class: %w<flex px-2.5>}",
-                "%div class:    flex px-2.5  ",
-            ),
-            // Nested `<…>` does not end the literal
-            (
-                "%div{class: %w<flex <nested> px-2.5>}",
-                "%div class:    flex <nested> px-2.5  ",
-            ),
-            // Custom delimiters
-            (
-                "%div{class: %w|flex px-2.5|}",
-                "%div class:    flex px-2.5  ",
-            ),
-            (
-                "%div{class: %W!flex px-2.5!}",
-                "%div class:    flex px-2.5  ",
-            ),
-            (
-                "%div{class: %w#text-sm leading-6#}",
-                "%div class:    text-sm leading-6  ",
-            ),
-            (
-                "%div{class: %w=italic tracking-wide=}",
-                "%div class:    italic tracking-wide  ",
-            ),
-            // Nested paired delimiters stay balanced inside the literal
-            (
-                "%div{class: %w[content-['[hello]'] p-4]}",
-                "%div class:    content-['[hello]'] p-4  ",
-            ),
-            // Escaped spaces embed a space in a single array element
-            (
-                r#"%div{class: %w[foo\ bar baz-1]}"#,
-                r#"%div class:    foo  bar baz-1  "#,
-            ),
-            // A `%` that follows a value is not a percent literal
-            ("%p hit rate 50%w.", "%p hit rate 50%w "),
-        ] {
-            Haml::test(input, expected);
-        }
-
-        let input = r#"
-            %div{class: %w[bg-blue-500 w-10 h-10]}
-            %div{class: %w<flex px-2.5>}
-            %div{class: %w|underline font-bold|}
-            - classes = %w<mt-4 grid>
-        "#;
-
-        Haml::test_extract_contains(
-            input,
-            vec![
-                "bg-blue-500",
-                "w-10",
-                "h-10",
-                "flex",
-                "px-2.5",
-                "underline",
-                "font-bold",
-                "mt-4",
-                "grid",
-            ],
-        );
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/pull/17051#issuecomment-2711181352
-    #[test]
-    fn test_haml_full_file_17051() {
-        let actual = Haml::extract_annotated(include_bytes!("./test-fixtures/haml/src-17051.haml"));
-        let expected = include_str!("./test-fixtures/haml/dst-17051.haml");
-
-        assert_eq!(actual.replace("\r\n", "\n"), expected.replace("\r\n", "\n"));
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17813
-    #[test]
-    fn test_haml_full_file_17813() {
-        let actual = Haml::extract_annotated(include_bytes!("./test-fixtures/haml/src-17813.haml"));
-        let expected = include_str!("./test-fixtures/haml/dst-17813.haml");
-
-        assert_eq!(actual.replace("\r\n", "\n"), expected.replace("\r\n", "\n"));
-    }
-
-    #[test]
-    fn test_arbitrary_code_followed_by_classes() {
-        let input = r#"
-            %p
-              = i < 3
-              .flex.items-center
-        "#;
-        Haml::test_extract_contains(input, vec!["flex", "items-center"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17379#issuecomment-2910108646
-    #[test]
-    fn test_crash_missing_newline() {
-        // The empty `""` will introduce a newline
-        let good = ["- index = 0", "- index += 1", ""].join("\n");
-        Haml::test_extract_contains(&good, vec!["index"]);
-
-        // This used to crash before the fix
-        let bad = ["- index = 0", "- index += 1"].join("\n");
-        Haml::test_extract_contains(&bad, vec!["index"]);
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/json.rs b/crates/oxide/src/extractor/pre_processors/json.rs
deleted file mode 100644
index cd457050c..000000000
--- a/crates/oxide/src/extractor/pre_processors/json.rs
+++ /dev/null
@@ -1,63 +0,0 @@
-use crate::cursor;
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-#[derive(Debug, Default)]
-pub struct Json;
-
-impl PreProcessor for Json {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(content);
-
-        while cursor.pos < len {
-            match cursor.curr() {
-                // Consume strings as-is
-                b'"' => {
-                    cursor.advance();
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // Escaped character, skip ahead to the next character
-                            b'\\' => cursor.advance_twice(),
-
-                            // End of the string
-                            b'"' => break,
-
-                            // Everything else is valid
-                            _ => cursor.advance(),
-                        };
-                    }
-                }
-
-                // Replace brackets and curlies with spaces
-                b'[' | b'{' | b']' | b'}' => {
-                    result[cursor.pos] = b' ';
-                }
-
-                // Consume everything else
-                _ => {}
-            };
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Json;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_json_pre_processor() {
-        let (input, expected) = (
-            r#"[1,[2,[3,4,["flex flex-1 content-['hello_world']"]]], {"flex": true}]"#,
-            r#" 1, 2, 3,4, "flex flex-1 content-['hello_world']"   ,  "flex": true  "#,
-        );
-
-        Json::test(input, expected);
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/markdown.rs b/crates/oxide/src/extractor/pre_processors/markdown.rs
deleted file mode 100644
index 488614ee5..000000000
--- a/crates/oxide/src/extractor/pre_processors/markdown.rs
+++ /dev/null
@@ -1,83 +0,0 @@
-use crate::cursor;
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-#[derive(Debug, Default)]
-pub struct Markdown;
-
-impl PreProcessor for Markdown {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(content);
-        let mut bracket_stack = vec![];
-
-        let mut in_directive = false;
-
-        while cursor.pos < len {
-            match (in_directive, cursor.curr()) {
-                (false, b'{') => {
-                    result[cursor.pos] = b' ';
-                    in_directive = true;
-                }
-                (true, b'(' | b'[' | b'{' | b'<') => {
-                    bracket_stack.push(cursor.curr());
-                }
-                (true, b')' | b']' | b'}' | b'>') if !bracket_stack.is_empty() => {
-                    bracket_stack.pop();
-                }
-                (true, b'}') => {
-                    result[cursor.pos] = b' ';
-                    in_directive = false;
-                }
-                (true, b'.') if bracket_stack.is_empty() => {
-                    result[cursor.pos] = b' ';
-                }
-                _ => {}
-            }
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Markdown;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_markdown_pre_processor() {
-        for (input, expected) in [
-            // Convert dots to spaces inside markdown inline directives
-            (
-                ":span[Some Text]{.text-gray-500}",
-                ":span[Some Text]  text-gray-500 ",
-            ),
-            (
-                ":span[Some Text]{.text-gray-500.bg-red-500}",
-                ":span[Some Text]  text-gray-500 bg-red-500 ",
-            ),
-            (
-                ":span[Some Text]{#myId .my-class key=val key2='val 2'}",
-                ":span[Some Text] #myId  my-class key=val key2='val 2' ",
-            ),
-        ] {
-            Markdown::test(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_nested_classes_keep_the_dots() {
-        for (input, expected) in [
-            (
-                r#"{<div class="px-2.5"></div>}"#,
-                r#" <div class="px-2.5"></div> "#,
-            ),
-            (r#"{content-['example.js']}"#, r#" content-['example.js'] "#),
-        ] {
-            Markdown::test(input, expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/mod.rs b/crates/oxide/src/extractor/pre_processors/mod.rs
deleted file mode 100644
index 1a04af5c9..000000000
--- a/crates/oxide/src/extractor/pre_processors/mod.rs
+++ /dev/null
@@ -1,31 +0,0 @@
-pub mod clojure;
-pub mod elixir;
-pub mod haml;
-pub mod json;
-pub mod markdown;
-pub mod pre_processor;
-pub mod pug;
-pub mod razor;
-pub mod ruby;
-pub mod rust;
-pub mod slim;
-pub mod svelte;
-pub mod template_toolkit;
-pub mod twig;
-pub mod vue;
-
-pub use clojure::*;
-pub use elixir::*;
-pub use haml::*;
-pub use json::*;
-pub use markdown::*;
-pub use pre_processor::*;
-pub use pug::*;
-pub use razor::*;
-pub use ruby::*;
-pub use rust::*;
-pub use slim::*;
-pub use svelte::*;
-pub use template_toolkit::*;
-pub use twig::*;
-pub use vue::*;
diff --git a/crates/oxide/src/extractor/pre_processors/pre_processor.rs b/crates/oxide/src/extractor/pre_processors/pre_processor.rs
deleted file mode 100644
index 8e02b8f69..000000000
--- a/crates/oxide/src/extractor/pre_processors/pre_processor.rs
+++ /dev/null
@@ -1,186 +0,0 @@
-pub trait PreProcessor: Sized + Default {
-    fn process(&self, content: &[u8]) -> Vec<u8>;
-
-    #[cfg(test)]
-    fn test(input: &str, expected: &str) {
-        use pretty_assertions::assert_eq;
-
-        let input = input.as_bytes();
-        let expected = expected.as_bytes();
-
-        let processor = Self::default();
-
-        let actual = processor.process(input);
-
-        // Convert to strings for better error messages.
-        let input = String::from_utf8_lossy(input);
-        let actual = String::from_utf8_lossy(&actual);
-        let expected = String::from_utf8_lossy(expected);
-
-        // The input and output should have the exact same length.
-        assert_eq!(input.len(), actual.len());
-        assert_eq!(actual.len(), expected.len());
-
-        assert_eq!(actual, expected);
-    }
-
-    #[cfg(test)]
-    fn test_extract_exact(input: &str, expected: Vec<&str>) {
-        use crate::extractor::{Extracted, Extractor};
-
-        let input = input.as_bytes();
-
-        let processor = Self::default();
-        let transformed = processor.process(input);
-
-        let extracted = Extractor::new(&transformed).extract();
-
-        // Extract all candidates and css variables.
-        let candidates = extracted
-            .iter()
-            .filter_map(|x| match x {
-                Extracted::Candidate(bytes) => std::str::from_utf8(bytes).ok(),
-                Extracted::CssVariable(bytes) => std::str::from_utf8(bytes).ok(),
-            })
-            .collect::<Vec<_>>();
-
-        if candidates != expected {
-            dbg!(&candidates, &expected);
-            panic!("Extracted candidates do not match expected candidates");
-        }
-    }
-
-    #[cfg(test)]
-    fn test_extract_contains(input: &str, expected: Vec<&str>) {
-        use crate::extractor::{Extracted, Extractor};
-
-        let input = input.as_bytes();
-
-        let processor = Self::default();
-        let transformed = processor.process(input);
-
-        let extracted = Extractor::new(&transformed).extract();
-
-        // Extract all candidates and css variables.
-        let candidates = extracted
-            .iter()
-            .filter_map(|x| match x {
-                Extracted::Candidate(bytes) => std::str::from_utf8(bytes).ok(),
-                Extracted::CssVariable(bytes) => std::str::from_utf8(bytes).ok(),
-            })
-            .collect::<Vec<_>>();
-
-        // Ensure all items are present in the candidates.
-        let mut missing = vec![];
-        for item in &expected {
-            if !candidates.contains(item) {
-                missing.push(item);
-            }
-        }
-
-        if !missing.is_empty() {
-            dbg!(&candidates, &missing);
-            panic!("Missing some items");
-        }
-    }
-
-    #[cfg(test)]
-    fn extract_annotated(input: &[u8]) -> String {
-        use crate::extractor::{Extracted, Extractor};
-        use std::collections::BTreeMap;
-        use unicode_width::UnicodeWidthStr;
-
-        let processor = Self::default();
-        let transformed = processor.process(input);
-
-        let extracted = Extractor::new(&transformed).extract();
-
-        // Extract only candidate positions
-        let byte_ranges = extracted
-            .iter()
-            .filter_map(|x| match x {
-                Extracted::Candidate(bytes) => {
-                    let start = bytes.as_ptr() as usize - transformed.as_ptr() as usize;
-                    let end = start + bytes.len();
-                    Some((start, end))
-                }
-                _ => None,
-            })
-            .collect::<Vec<_>>();
-
-        // Convert byte ranges to (line, start_col, end_col)
-        let mut annotations = byte_ranges
-            .into_iter()
-            .map(|(start, end)| {
-                let (line, start_col) = byte_offset_to_line_and_column(input, start);
-                let (_, end_col) = byte_offset_to_line_and_column(input, end);
-                (line, start_col, end_col)
-            })
-            .collect::<Vec<_>>();
-
-        // Sort for safe insertion
-        annotations.sort_by(|a, b| b.0.cmp(&a.0).then(b.1.cmp(&a.1)));
-
-        // Convert input to lines
-        let mut lines = std::str::from_utf8(input)
-            .expect("Input must be valid UTF-8")
-            .lines()
-            .map(|line| line.to_string())
-            .collect::<Vec<_>>();
-
-        // Group annotations per line
-        let mut grouped = BTreeMap::<usize, Vec<(usize, usize)>>::new();
-        for (line, start_char, end_char) in annotations {
-            grouped
-                .entry(line)
-                .or_default()
-                .push((start_char, end_char));
-        }
-
-        // Inject annotation lines
-        for (line_idx, spans) in grouped.into_iter().rev() {
-            let display_line = &lines[line_idx];
-            let width = UnicodeWidthStr::width(display_line.as_str());
-            let mut annotation = vec![' '; width];
-
-            for (start, end) in spans {
-                for i in start..end.min(annotation.len()) {
-                    annotation[i] = '^';
-                }
-            }
-
-            let annotation_line: String = annotation
-                .into_iter()
-                .collect::<String>()
-                .trim_end()
-                .to_owned();
-            lines.insert(line_idx + 1, annotation_line);
-        }
-
-        lines.join("\n").trim_end().to_string() + "\n"
-    }
-}
-
-#[cfg(test)]
-fn byte_offset_to_line_and_column(input: &[u8], offset: usize) -> (usize, usize) {
-    use unicode_width::UnicodeWidthStr;
-
-    let mut line_start = 0;
-    let mut line = 0;
-
-    for (i, &b) in input.iter().enumerate() {
-        if i >= offset {
-            break;
-        }
-        if b == b'\n' {
-            line += 1;
-            line_start = i + 1;
-        }
-    }
-
-    let slice = &input[line_start..offset];
-    let column = std::str::from_utf8(slice).expect("Valid UTF-8");
-    let column = UnicodeWidthStr::width(column);
-
-    (line, column)
-}
diff --git a/crates/oxide/src/extractor/pre_processors/pug.rs b/crates/oxide/src/extractor/pre_processors/pug.rs
deleted file mode 100644
index 70dfe5683..000000000
--- a/crates/oxide/src/extractor/pre_processors/pug.rs
+++ /dev/null
@@ -1,181 +0,0 @@
-use crate::cursor;
-use crate::extractor::bracket_stack::BracketStack;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use crate::extractor::variant_machine::VariantMachine;
-
-#[derive(Debug, Default)]
-pub struct Pug;
-
-impl PreProcessor for Pug {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(content);
-        let mut bracket_stack = BracketStack::default();
-
-        while cursor.pos < len {
-            match cursor.curr() {
-                // Only replace `.` with a space if it's not surrounded by numbers. E.g.:
-                //
-                // ```diff
-                // - .flex.items-center
-                // +  flex items-center
-                // ```
-                //
-                // But with numbers, it's allowed:
-                //
-                // ```diff
-                // - px-2.5
-                // + px-2.5
-                // ```
-                b'.' => {
-                    // Don't replace dots with spaces when inside of any type of brackets, because
-                    // this could be part of arbitrary values. E.g.: `bg-[url(https://example.com)]`
-                    //                                                                       ^
-                    if !bracket_stack.is_empty() {
-                        cursor.advance();
-                        continue;
-                    }
-
-                    // If the dot is surrounded by digits, we want to keep it. E.g.: `px-2.5`
-                    // EXCEPT if it's followed by a valid variant that happens to start with a
-                    // digit.
-                    // E.g.: `bg-red-500.2xl:flex`
-                    //                 ^^^
-                    if cursor.prev().is_ascii_digit() && cursor.next().is_ascii_digit() {
-                        let mut next_cursor = cursor.clone();
-                        next_cursor.advance();
-
-                        let mut variant_machine = VariantMachine::default();
-                        if let MachineState::Done(_) = variant_machine.next(&mut next_cursor) {
-                            result[cursor.pos] = b' ';
-                        }
-                    } else {
-                        result[cursor.pos] = b' ';
-                    }
-                }
-
-                // In Pug the class name shorthand can be followed by a parenthesis. E.g.:
-                //
-                // ```pug
-                // body.border-t-4.p-8(attr=value)
-                //                    ^ Not part of the p-8 class
-                // ```
-                //
-                // This means that we need to replace all these `(` and `)` with spaces to make
-                // sure that we can extract the `p-8`.
-                //
-                // However, we also need to make sure that we keep the parens that are part of the
-                // utility class. E.g.: `bg-(--my-color)`.
-                b'(' if bracket_stack.is_empty() && !matches!(cursor.prev(), b'-' | b'/') => {
-                    result[cursor.pos] = b' ';
-                    bracket_stack.push(cursor.curr());
-                }
-
-                b'(' | b'[' | b'{' => {
-                    bracket_stack.push(cursor.curr());
-                }
-
-                b')' | b']' | b'}' if !bracket_stack.is_empty() => {
-                    bracket_stack.pop(cursor.curr());
-                }
-
-                // Consume everything else
-                _ => {}
-            };
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Pug;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_pug_pre_processor() {
-        for (input, expected) in [
-            // Convert dots to spaces
-            ("div.flex.bg-red-500", "div flex bg-red-500"),
-            (".flex.bg-red-500", " flex bg-red-500"),
-            // Keep dots in strings
-            (r#"div(class="px-2.5")"#, r#"div class="px-2.5")"#),
-            // Nested brackets
-            (
-                "bg-[url(https://example.com/?q=[1,2])]",
-                "bg-[url(https://example.com/?q=[1,2])]",
-            ),
-            // Classes in HTML attributes
-            (r#"<div id="px-2.5"></div>"#, r#"<div id="px-2.5"></div>"#),
-        ] {
-            Pug::test(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_strings_only_occur_when_nested() {
-        let input = r#"
-            p.mt-2.text-xl
-              div The quote in the next word, can't be the start of a string
-
-            h3.mt-24.text-center.text-4xl.font-bold.italic
-              div The classes above should be extracted
-        "#;
-
-        Pug::test_extract_contains(
-            input,
-            vec![
-                // First paragraph
-                "mt-2",
-                "text-xl",
-                // second paragraph
-                "mt-24",
-                "text-center",
-                "text-4xl",
-                "font-bold",
-                "italic",
-            ],
-        );
-    }
-
-    #[test]
-    fn test_arbitrary_code_followed_by_classes() {
-        let input = r#"
-            - i < 3
-              .flex.items-center
-        "#;
-        Pug::test_extract_contains(input, vec!["flex", "items-center"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17313
-    #[test]
-    fn test_class_shorthand_followed_by_parens() {
-        let input = r#"
-            .text-sky-600.bg-neutral-900(title="A tooltip") This div has an HTML attribute.
-        "#;
-        Pug::test_extract_contains(input, vec!["text-sky-600", "bg-neutral-900"]);
-
-        // Additional test with CSS Variable shorthand syntax in the attribute itself because `(`
-        // and `)` are not valid in the class shorthand version.
-        //
-        // Also included an arbitrary value including `(` and `)` to make sure that we don't
-        // accidentally remove those either.
-        let input = r#"
-            .p-8(class="bg-(--my-color) bg-(--my-color)/(--my-opacity) bg-[url(https://example.com)]")
-        "#;
-        Pug::test_extract_contains(
-            input,
-            vec![
-                "p-8",
-                "bg-(--my-color)",
-                "bg-(--my-color)/(--my-opacity)",
-                "bg-[url(https://example.com)]",
-            ],
-        );
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/razor.rs b/crates/oxide/src/extractor/pre_processors/razor.rs
deleted file mode 100644
index 2713ea748..000000000
--- a/crates/oxide/src/extractor/pre_processors/razor.rs
+++ /dev/null
@@ -1,42 +0,0 @@
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use bstr::ByteSlice;
-
-#[derive(Debug, Default)]
-pub struct Razor;
-
-impl PreProcessor for Razor {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        content.replace("@@", " @").replace(r#"@("@")"#, "     @")
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Razor;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_razor_pre_processor() {
-        let (input, expected) = (
-            r#"<div class="@@sm:text-red-500">"#,
-            r#"<div class=" @sm:text-red-500">"#,
-        );
-        Razor::test(input, expected);
-        Razor::test_extract_contains(input, vec!["@sm:text-red-500"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17424
-    #[test]
-    fn test_razor_syntax_with() {
-        let (input, expected) = (
-            r#"<p class="@("@")md:bg-red-500 @@md:border-green-500 border-8">With 2 elements</p>"#,
-            r#"<p class="     @md:bg-red-500  @md:border-green-500 border-8">With 2 elements</p>"#,
-        );
-
-        Razor::test(input, expected);
-        Razor::test_extract_contains(
-            input,
-            vec!["@md:bg-red-500", "@md:border-green-500", "border-8"],
-        );
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/ruby.rs b/crates/oxide/src/extractor/pre_processors/ruby.rs
deleted file mode 100644
index d9a57ab77..000000000
--- a/crates/oxide/src/extractor/pre_processors/ruby.rs
+++ /dev/null
@@ -1,528 +0,0 @@
-// See: - https://docs.ruby-lang.org/en/3.4/syntax/literals_rdoc.html#label-Percent+Literals
-//      - https://docs.ruby-lang.org/en/3.4/syntax/literals_rdoc.html#label-25w+and+-25W-3A+String-Array+Literals
-use crate::cursor;
-use crate::extractor::bracket_stack;
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use crate::scanner::pre_process_input;
-use bstr::ByteVec;
-use regex::{Regex, RegexBuilder};
-use std::sync;
-
-static TEMPLATE_START_REGEX: sync::LazyLock<Regex> = sync::LazyLock::new(|| {
-    RegexBuilder::new(r#"\s*([a-z0-9_-]+)_template\s*<<[-~]?([A-Z]+)$"#)
-        .multi_line(true)
-        .build()
-        .unwrap()
-});
-
-static TEMPLATE_END_REGEX: sync::LazyLock<Regex> = sync::LazyLock::new(|| {
-    RegexBuilder::new(r#"^\s*([A-Z]+)"#)
-        .multi_line(true)
-        .build()
-        .unwrap()
-});
-
-#[derive(Debug, Default)]
-pub struct Ruby;
-
-impl PreProcessor for Ruby {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(content);
-        let mut bracket_stack = bracket_stack::BracketStack::default();
-
-        // Extract embedded template languages
-        // https://viewcomponent.org/guide/templates.html#interpolations
-        // Only process if content is valid UTF-8, otherwise skip HEREDOC extraction
-        // but still perform the byte-level Ruby processing below
-        if let Ok(content_as_str) = std::str::from_utf8(content) {
-            let starts = TEMPLATE_START_REGEX
-                .captures_iter(content_as_str)
-                .collect::<Vec<_>>();
-            let ends = TEMPLATE_END_REGEX
-                .captures_iter(content_as_str)
-                .collect::<Vec<_>>();
-
-            for start in starts.iter() {
-                // The language for this block
-                let lang = start.get(1).unwrap().as_str();
-
-                // The HEREDOC delimiter
-                let delimiter_start = start.get(2).unwrap().as_str();
-
-                // Where the "body" starts for the HEREDOC block
-                let body_start = start.get(0).unwrap().end();
-
-                // Look through all of the ends to find a matching language
-                for end in ends.iter() {
-                    // 1. This must appear after the start
-                    let body_end = end.get(0).unwrap().start();
-                    if body_end < body_start {
-                        continue;
-                    }
-
-                    // The languages must match otherwise we haven't found the end
-                    let delimiter_end = end.get(1).unwrap().as_str();
-                    if delimiter_end != delimiter_start {
-                        continue;
-                    }
-
-                    let body = &content_as_str[body_start..body_end];
-                    let replaced =
-                        pre_process_input(body.as_bytes().to_vec(), &lang.to_ascii_lowercase());
-
-                    result.replace_range(body_start..body_end, replaced);
-                    break;
-                }
-            }
-        }
-
-        // Ruby extraction
-        while cursor.pos < len {
-            match cursor.curr() {
-                b'"' => {
-                    cursor.advance();
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // Escaped character, skip ahead to the next character
-                            b'\\' => cursor.advance_twice(),
-
-                            // End of the string
-                            b'"' => break,
-
-                            // Everything else is valid
-                            _ => cursor.advance(),
-                        };
-                    }
-
-                    cursor.advance();
-                    continue;
-                }
-
-                b'\'' => {
-                    cursor.advance();
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // Escaped character, skip ahead to the next character
-                            b'\\' => cursor.advance_twice(),
-
-                            // End of the string
-                            b'\'' => break,
-
-                            // Everything else is valid
-                            _ => cursor.advance(),
-                        };
-                    }
-
-                    cursor.advance();
-                    continue;
-                }
-
-                // Replace comments in Ruby files
-                //
-                // Except for strict locals, these are defined in a `<%# locals: … %>`. Checking if
-                // the comment is preceded by a `%` should be enough without having to perform more
-                // parsing logic. Worst case we _do_ scan a few comments.
-                //
-                // We also want to skip interpolation syntax, which look like `#{…}`.
-                b'#' if !matches!(cursor.prev(), b'%') && !matches!(cursor.next(), b'{') => {
-                    result[cursor.pos] = b' ';
-                    cursor.advance();
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // End of the comment
-                            b'\n' => break,
-
-                            // Everything else is part of the comment and replaced
-                            _ => {
-                                result[cursor.pos] = b' ';
-                                cursor.advance();
-                            }
-                        };
-                    }
-
-                    cursor.advance();
-                    continue;
-                }
-
-                _ => {}
-            }
-
-            // Looking for `%w`, `%W`, or `%p`
-            if cursor.curr() != b'%' || !matches!(cursor.next(), b'w' | b'W' | b'p') {
-                cursor.advance();
-                continue;
-            }
-
-            // A `%` that follows a value is a modulo operation, not a percent literal. E.g.: the
-            // `50%w` in `hit rate 50%w.`
-            if cursor.prev().is_ascii_alphanumeric()
-                || matches!(cursor.prev(), b'_' | b')' | b']' | b'}')
-            {
-                cursor.advance();
-                continue;
-            }
-
-            cursor.advance_twice();
-
-            // Boundary character
-            let boundary = match cursor.curr() {
-                b'[' => b']',
-                b'(' => b')',
-                b'{' => b'}',
-                b'<' => b'>',
-                b' ' => b'\n',
-
-                // Any other ASCII punctuation can be used as a custom delimiter
-                c if c.is_ascii_punctuation() => c,
-
-                // Everything else is not a valid delimiter
-                _ => {
-                    cursor.advance();
-                    continue;
-                }
-            };
-
-            bracket_stack.reset();
-
-            // Replace the current character with a space
-            result[cursor.pos] = b' ';
-
-            // Skip the boundary character
-            cursor.advance();
-
-            while cursor.pos < len {
-                match cursor.curr() {
-                    // Skip escaped characters, unless the backslash is the delimiter itself
-                    b'\\' if boundary != b'\\' => {
-                        // Use backslash to embed spaces in the strings.
-                        if cursor.next() == b' ' {
-                            result[cursor.pos] = b' ';
-                        }
-
-                        cursor.advance();
-                    }
-
-                    // Start of a nested bracket
-                    b'[' | b'(' | b'{' => {
-                        bracket_stack.push(cursor.curr());
-                    }
-
-                    // Start of a nested `<…>`, which Ruby allows inside a `%w<…>` literal
-                    b'<' if boundary == b'>' => {
-                        bracket_stack.push(cursor.curr());
-                    }
-
-                    // End of a nested bracket
-                    b']' | b')' | b'}' if !bracket_stack.is_empty() => {
-                        if !bracket_stack.pop(cursor.curr()) {
-                            // Unbalanced
-                            cursor.advance();
-                        }
-                    }
-
-                    // End of a nested `<…>`
-                    b'>' if boundary == b'>' && !bracket_stack.is_empty() => {
-                        if !bracket_stack.pop(cursor.curr()) {
-                            // Unbalanced
-                            cursor.advance();
-                        }
-                    }
-
-                    // End of the pattern, replace the boundary character with a space
-                    _ if cursor.curr() == boundary => {
-                        if boundary != b'\n' {
-                            result[cursor.pos] = b' ';
-                        }
-
-                        break;
-                    }
-
-                    // Everything else is valid
-                    _ => {}
-                }
-
-                cursor.advance();
-            }
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Ruby;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_ruby_pre_processor() {
-        for (input, expected) in [
-            // %w[…]
-            ("%w[flex px-2.5]", "%w flex px-2.5 "),
-            (
-                "%w[flex data-[state=pending]:bg-[#0088cc] flex-col]",
-                "%w flex data-[state=pending]:bg-[#0088cc] flex-col ",
-            ),
-            // %w{…}
-            ("%w{flex px-2.5}", "%w flex px-2.5 "),
-            (
-                "%w{flex data-[state=pending]:bg-(--my-color) flex-col}",
-                "%w flex data-[state=pending]:bg-(--my-color) flex-col ",
-            ),
-            // %w(…)
-            ("%w(flex px-2.5)", "%w flex px-2.5 "),
-            (
-                "%w(flex data-[state=pending]:bg-(--my-color) flex-col)",
-                "%w flex data-[state=pending]:bg-(--my-color) flex-col ",
-            ),
-            // %w<…>
-            ("%w<flex px-2.5>", "%w flex px-2.5 "),
-            (
-                "%w<flex data-[state=pending]:bg-(--my-color) flex-col>",
-                "%w flex data-[state=pending]:bg-(--my-color) flex-col ",
-            ),
-            // Nested `<…>` does not end the literal
-            ("%w<flex <nested> px-2.5>", "%w flex <nested> px-2.5 "),
-            // %w|…|, %w:…:, %w!…!
-            ("%w|flex px-2.5|", "%w flex px-2.5 "),
-            ("%w:flex px-2.5:", "%w flex px-2.5 "),
-            ("%w!flex px-2.5!", "%w flex px-2.5 "),
-            (r#"%w\flex px-2.5\"#, r#"%w flex px-2.5 "#),
-            // A `%` that follows a value is a modulo operation, not a percent literal
-            (
-                "hit rate 50%w.\n%w[flex px-2.5]",
-                "hit rate 50%w.\n%w flex px-2.5 ",
-            ),
-
-            // %w …\n
-            ("%w flex px-2.5\n", "%w flex px-2.5\n"),
-
-            // Use backslash to embed spaces in the strings.
-            (r#"%w[foo\ bar baz\ bat]"#, r#"%w foo  bar baz  bat "#),
-            (r#"%W[foo\ bar baz\ bat]"#, r#"%W foo  bar baz  bat "#),
-
-            // The nested delimiters evaluated to a flat array of strings
-            // (not nested array).
-            (r#"%w[foo[bar baz]qux]"#, r#"%w foo[bar baz]qux "#),
-
-            (
-              "# test\n# test\n# {ActiveRecord::Base#save!}[rdoc-ref:Persistence#save!]\n%w[flex px-2.5]",
-              "      \n      \n                                                        \n%w flex px-2.5 "
-            ),
-
-            (r#""foo # bar""#, r#""foo # bar""#),
-            (r#"'foo # bar'"#, r#"'foo # bar'"#),
-            (
-              r#"def call = tag.span "Foo", class: %w[rounded-full h-0.75 w-0.75]"#,
-              r#"def call = tag.span "Foo", class: %w rounded-full h-0.75 w-0.75 "#
-            ),
-
-            (r#"%w[foo ' bar]"#, r#"%w foo ' bar "#),
-            (r#"%w[foo " bar]"#, r#"%w foo " bar "#),
-            (r#"%W[foo ' bar]"#, r#"%W foo ' bar "#),
-            (r#"%W[foo " bar]"#, r#"%W foo " bar "#),
-
-            (r#"%p foo ' bar "#, r#"%p foo ' bar "#),
-            (r#"%p foo " bar "#, r#"%p foo " bar "#),
-
-            (
-              "%p has a ' quote\n# this should be removed\n%p has a ' quote",
-              "%p has a ' quote\n                        \n%p has a ' quote"
-            ),
-            (
-              "%p has a \" quote\n# this should be removed\n%p has a \" quote",
-              "%p has a \" quote\n                        \n%p has a \" quote"
-            ),
-
-            (
-              "%w#this text is kept# # this text is not",
-              "%w this text is kept                    ",
-            ),
-        ] {
-            Ruby::test(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_ruby_extraction() {
-        for (input, expected) in [
-            // %w[…]
-            ("%w[flex px-2.5]", vec!["flex", "px-2.5"]),
-            ("%w[px-2.5 flex]", vec!["flex", "px-2.5"]),
-            ("%w[2xl:flex]", vec!["2xl:flex"]),
-            (
-                "%w[flex data-[state=pending]:bg-[#0088cc] flex-col]",
-                vec!["flex", "data-[state=pending]:bg-[#0088cc]", "flex-col"],
-            ),
-            // %w{…}
-            ("%w{flex px-2.5}", vec!["flex", "px-2.5"]),
-            ("%w{px-2.5 flex}", vec!["flex", "px-2.5"]),
-            ("%w{2xl:flex}", vec!["2xl:flex"]),
-            (
-                "%w{flex data-[state=pending]:bg-(--my-color) flex-col}",
-                vec!["flex", "data-[state=pending]:bg-(--my-color)", "flex-col"],
-            ),
-            // %w(…)
-            ("%w(flex px-2.5)", vec!["flex", "px-2.5"]),
-            ("%w(px-2.5 flex)", vec!["flex", "px-2.5"]),
-            ("%w(2xl:flex)", vec!["2xl:flex"]),
-            (
-                "%w(flex data-[state=pending]:bg-(--my-color) flex-col)",
-                vec!["flex", "data-[state=pending]:bg-(--my-color)", "flex-col"],
-            ),
-            // %w<…>
-            ("%w<flex px-2.5>", vec!["flex", "px-2.5"]),
-            ("%w<px-2.5 flex>", vec!["flex", "px-2.5"]),
-            ("%w<2xl:flex>", vec!["2xl:flex"]),
-            (
-                "%w<flex data-[state=pending]:bg-(--my-color) flex-col>",
-                vec!["flex", "data-[state=pending]:bg-(--my-color)", "flex-col"],
-            ),
-            // Nested `<…>` does not end the literal
-            ("%w<flex <nested> px-2.5>", vec!["flex", "px-2.5"]),
-            // %w|…|, %w:…:, %w!…!
-            ("%w|flex px-2.5|", vec!["flex", "px-2.5"]),
-            ("%w:flex px-2.5:", vec!["flex", "px-2.5"]),
-            ("%w!flex px-2.5!", vec!["flex", "px-2.5"]),
-
-            (
-              "# test\n# test\n# {ActiveRecord::Base#save!}[rdoc-ref:Persistence#save!]\n%w[flex px-2.5]",
-              vec!["flex", "px-2.5"],
-            ),
-
-            (r#""foo # bar""#, vec!["foo", "bar"]),
-            (r#"'foo # bar'"#, vec!["foo", "bar"]),
-
-            (r#"%w[foo ' bar]"#, vec!["foo", "bar"]),
-        ] {
-            Ruby::test_extract_contains(input, expected);
-        }
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17334
-    #[test]
-    fn test_embedded_slim_extraction() {
-        let input = r#"
-            class QweComponent < ApplicationComponent
-              slim_template <<~SLIM
-                button.rounded-full.bg-red-500
-                  | Some text
-                button.rounded-full(
-                  class="flex"
-                )
-                  | Some text
-              SLIM
-            end
-        "#;
-
-        Ruby::test_extract_contains(input, vec!["rounded-full", "bg-red-500", "flex"]);
-
-        // Embedded Svelte just to verify that we properly pick up the `{x}_template`
-        let input = r#"
-            class QweComponent < ApplicationComponent
-              svelte_template <<~HTML
-                  <div class:flex="true"></div>
-              HTML
-            end
-        "#;
-
-        Ruby::test_extract_contains(input, vec!["flex"]);
-
-        // Together in the same file
-        let input = r#"
-            class QweComponent < ApplicationComponent
-              slim_template <<~SLIM
-                button.z-1.z-2
-                  | Some text
-              SLIM
-            end
-
-            class QweComponent < ApplicationComponent
-              svelte_template <<~HTML
-                <div class:z-3="true"></div>
-              HTML
-            end
-        "#;
-        Ruby::test_extract_contains(input, vec!["z-1", "z-2", "z-3"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/19728
-    #[test]
-    fn test_interpolated_expressions() {
-        let input = r#"
-            def width_class(width = nil)
-              <<~STYLE_CLASS
-                #{width || 'w-100'}
-              STYLE_CLASS
-            end
-        "#;
-
-        Ruby::test_extract_contains(input, vec!["w-100"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/19239
-    #[test]
-    fn test_skip_comments() {
-        let input = r#"
-          # From activerecord-8.1.1/lib/active_record/errors.rb:147
-          # Rails uses RDoc cross-reference syntax in inline documentation:
-          # {ActiveRecord::Base#save!}[rdoc-ref:Persistence#save!]
-        "#;
-
-        // Nothing should be extracted from comments, so expect an empty array.
-        Ruby::test_extract_exact(input, vec![]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/19481
-    #[test]
-    fn test_strict_locals() {
-        // Strict locals are defined in a `<%# locals: … %>`, but the `#` looks like a comment
-        // which we should not ignore in this case.
-        let input = r#"
-          <%# locals: (css: "text-amber-600") %>
-          <% more_css = "text-sky-500" %>
-
-          <p class="text-green-500">
-            In a partial
-          </p>
-
-          <p class="<%= css %>">
-            In a partial using explicit local variables
-          </p>
-
-          <p class="<%= more_css %>">
-            In a partial using explicit local variables
-          </p>
-        "#;
-
-        Ruby::test_extract_contains(
-            input,
-            vec!["text-amber-600", "text-sky-500", "text-green-500"],
-        );
-    }
-
-    #[test]
-    fn test_invalid_utf8_does_not_panic() {
-        // Invalid UTF-8 sequence: 0x80 is a continuation byte without a leading byte
-        let invalid_utf8: &[u8] = &[0x80, 0x81, 0x82];
-
-        let processor = Ruby::default();
-
-        // Should not panic, just return the input unchanged
-        let result = processor.process(invalid_utf8);
-        assert_eq!(result, invalid_utf8);
-    }
-
-    #[test]
-    fn test_valid_utf8_with_multibyte_chars() {
-        // Test that valid UTF-8 with multi-byte characters (like em-dashes) works
-        let input = "# Comment with em—dash\n%w[flex px-2.5]";
-
-        Ruby::test_extract_contains(input, vec!["flex", "px-2.5"]);
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/rust.rs b/crates/oxide/src/extractor/pre_processors/rust.rs
deleted file mode 100644
index 4fa53f793..000000000
--- a/crates/oxide/src/extractor/pre_processors/rust.rs
+++ /dev/null
@@ -1,238 +0,0 @@
-use crate::extractor::bracket_stack;
-use crate::extractor::cursor;
-use crate::extractor::machine::Machine;
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use crate::extractor::variant_machine::VariantMachine;
-use crate::extractor::MachineState;
-use bstr::ByteSlice;
-
-#[derive(Debug, Default)]
-pub struct Rust;
-
-impl PreProcessor for Rust {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        // Leptos support: https://github.com/tailwindlabs/tailwindcss/pull/18093
-        let replaced_content = content
-            .replace(" class:", " class ")
-            .replace("\tclass:", " class ")
-            .replace("\nclass:", " class ");
-
-        if replaced_content.contains_str(b"html!") {
-            self.process_maud_templates(&replaced_content)
-        } else {
-            replaced_content
-        }
-    }
-}
-
-impl Rust {
-    fn process_maud_templates(&self, replaced_content: &[u8]) -> Vec<u8> {
-        let len = replaced_content.len();
-        let mut result = replaced_content.to_vec();
-        let mut cursor = cursor::Cursor::new(replaced_content);
-        let mut bracket_stack = bracket_stack::BracketStack::default();
-
-        while cursor.pos < len {
-            match cursor.curr() {
-                // Escaped character, skip ahead to the next character
-                b'\\' => {
-                    cursor.advance_twice();
-                    continue;
-                }
-
-                // Consume strings as-is
-                b'"' => {
-                    result[cursor.pos] = b' ';
-                    cursor.advance();
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // Escaped character, skip ahead to the next character
-                            b'\\' => cursor.advance_twice(),
-
-                            // End of the string
-                            b'"' => {
-                                result[cursor.pos] = b' ';
-                                break;
-                            }
-
-                            // Everything else is valid
-                            _ => cursor.advance(),
-                        };
-                    }
-                }
-
-                // Only replace `.` with a space if it's not surrounded by numbers. E.g.:
-                //
-                // ```diff
-                // - .flex.items-center
-                // +  flex items-center
-                // ```
-                //
-                // But with numbers, it's allowed:
-                //
-                // ```diff
-                // - px-2.5
-                // + px-2.5
-                // ```
-                b'.' => {
-                    // Don't replace dots with spaces when inside of any type of brackets, because
-                    // this could be part of arbitrary values. E.g.: `bg-[url(https://example.com)]`
-                    //                                                                       ^
-                    if !bracket_stack.is_empty() {
-                        cursor.advance();
-                        continue;
-                    }
-
-                    // If the dot is surrounded by digits, we want to keep it. E.g.: `px-2.5`
-                    // EXCEPT if it's followed by a valid variant that happens to start with a
-                    // digit.
-                    // E.g.: `bg-red-500.2xl:flex`
-                    //                 ^^^
-                    if cursor.prev().is_ascii_digit() && cursor.next().is_ascii_digit() {
-                        let mut next_cursor = cursor.clone();
-                        next_cursor.advance();
-
-                        let mut variant_machine = VariantMachine::default();
-                        if let MachineState::Done(_) = variant_machine.next(&mut next_cursor) {
-                            result[cursor.pos] = b' ';
-                        }
-                    } else {
-                        result[cursor.pos] = b' ';
-                    }
-                }
-
-                b'[' => {
-                    bracket_stack.push(cursor.curr());
-
-                    // Handle `p.flex[condition]`. If there is a `-` before it, it will likely be an
-                    // arbitrary value e.g. `text-[red]`
-                    if !matches!(cursor.prev(), b'-') {
-                        result[cursor.pos] = b' ';
-                    }
-                }
-
-                b']' if !bracket_stack.is_empty() => {
-                    bracket_stack.pop(cursor.curr());
-                }
-
-                // Consume everything else
-                _ => {}
-            };
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Rust;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_leptos_extraction() {
-        for (input, expected) in [
-            // Spaces
-            (
-                "<div class:flex class:px-2.5={condition()}>",
-                "<div class flex class px-2.5={condition()}>",
-            ),
-            // Tabs
-            (
-                "<div\tclass:flex class:px-2.5={condition()}>",
-                "<div class flex class px-2.5={condition()}>",
-            ),
-            // Newlines
-            (
-                "<div\nclass:flex class:px-2.5={condition()}>",
-                "<div class flex class px-2.5={condition()}>",
-            ),
-        ] {
-            Rust::test(input, expected);
-        }
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/18984
-    #[test]
-    fn test_maud_template_extraction() {
-        let input = r#"
-            use maud::{html, Markup};
-
-            pub fn main() -> Markup {
-                html! {
-                    header.px-8.py-4.text-black {
-                        "Hello, world!"
-                    }
-                }
-            }
-        "#;
-
-        Rust::test_extract_contains(input, vec!["px-8", "py-4", "text-black"]);
-
-        // https://maud.lambda.xyz/elements-attributes.html#classes-and-ids-foo-bar
-        let input = r#"
-            html! {
-                input #cannon .big.scary.bright-red type="button" value="Launch Party Cannon";
-            }
-        "#;
-        Rust::test_extract_contains(input, vec!["big", "scary", "bright-red"]);
-
-        let input = r#"
-            html! {
-                div."bg-[#0088cc]" { "Quotes for backticks" }
-            }
-        "#;
-        Rust::test_extract_contains(input, vec!["bg-[#0088cc]"]);
-
-        let input = r#"
-            html! {
-                #main {
-                    "Main content!"
-                    .tip { "Storing food in a refrigerator can make it 20% cooler." }
-                }
-            }
-        "#;
-        Rust::test_extract_contains(input, vec!["tip"]);
-
-        let input = r#"
-            html! {
-                div."bg-[url(https://example.com)]" { "Arbitrary values" }
-            }
-        "#;
-        Rust::test_extract_contains(input, vec!["bg-[url(https://example.com)]"]);
-
-        let input = r#"
-            html! {
-                div.px-4.text-black {
-                    "Some text, with unbalanced brackets ]["
-                }
-                div.px-8.text-white {
-                    "Some more text, with unbalanced brackets ]["
-                }
-            }
-        "#;
-        Rust::test_extract_contains(input, vec!["px-4", "text-black", "px-8", "text-white"]);
-
-        let input = r#"html! { \x.px-4.text-black {  } }"#;
-        Rust::test(input, r#"html! { \x px-4 text-black {  } }"#);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/20233
-    #[test]
-    fn test_maud_template_extraction_with_conditional_classes() {
-        let input = r#"
-            use maud::{html, Markup};
-
-            pub fn main() -> Markup {
-                html! {
-                    p.text-black[cuteness > 50] { "Squee!" }
-                }
-            }
-        "#;
-
-        Rust::test_extract_contains(input, vec!["text-black"]);
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/slim.rs b/crates/oxide/src/extractor/pre_processors/slim.rs
deleted file mode 100644
index 5683858d5..000000000
--- a/crates/oxide/src/extractor/pre_processors/slim.rs
+++ /dev/null
@@ -1,449 +0,0 @@
-use crate::cursor;
-use crate::extractor::bracket_stack::BracketStack;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use crate::extractor::variant_machine::VariantMachine;
-
-#[derive(Debug, Default)]
-pub struct Slim;
-
-impl PreProcessor for Slim {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(content);
-        let mut bracket_stack = BracketStack::default();
-
-        while cursor.pos < len {
-            match cursor.curr() {
-                // Only replace `.` with a space if it's not surrounded by numbers. E.g.:
-                //
-                // ```diff
-                // - .flex.items-center
-                // +  flex items-center
-                // ```
-                //
-                // But with numbers, it's allowed:
-                //
-                // ```diff
-                // - px-2.5
-                // + px-2.5
-                // ```
-                b'.' => {
-                    // Don't replace dots with spaces when inside of any type of brackets, because
-                    // this could be part of arbitrary values. E.g.: `bg-[url(https://example.com)]`
-                    //                                                                       ^
-                    if !bracket_stack.is_empty() {
-                        cursor.advance();
-                        continue;
-                    }
-
-                    // If the dot is surrounded by digits, we want to keep it. E.g.: `px-2.5`
-                    // EXCEPT if it's followed by a valid variant that happens to start with a
-                    // digit.
-                    // E.g.: `bg-red-500.2xl:flex`
-                    //                 ^^^
-                    if cursor.prev().is_ascii_digit() && cursor.next().is_ascii_digit() {
-                        let mut next_cursor = cursor.clone();
-                        next_cursor.advance();
-
-                        let mut variant_machine = VariantMachine::default();
-                        if let MachineState::Done(_) = variant_machine.next(&mut next_cursor) {
-                            result[cursor.pos] = b' ';
-                        }
-                    } else {
-                        result[cursor.pos] = b' ';
-                    }
-                }
-
-                // Handle Ruby syntax with `%w[]` arrays embedded in Slim directly.
-                //
-                // E.g.:
-                //
-                // ```
-                // div [
-                //   class=%w[bg-blue-500 w-10 h-10]
-                // ]
-                // ```
-                //
-                // A `%` that follows a value is not a percent literal. E.g.: the `50%w` in
-                // `hit rate 50%w.`
-                b'%' if matches!(cursor.next(), b'w' | b'W')
-                    && !cursor.prev().is_ascii_alphanumeric()
-                    && !matches!(cursor.prev(), b'_' | b')' | b']' | b'}') =>
-                {
-                    // Boundary characters
-                    let (open, close) = match cursor.input.get(cursor.pos + 2) {
-                        Some(b'[') => (b'[', b']'),
-                        Some(b'(') => (b'(', b')'),
-                        Some(b'{') => (b'{', b'}'),
-                        Some(b'<') => (b'<', b'>'),
-
-                        // Any other ASCII punctuation can be used as a custom delimiter
-                        Some(&c) if c.is_ascii_punctuation() => (c, c),
-
-                        // Everything else is not a valid delimiter
-                        _ => {
-                            cursor.advance();
-                            continue;
-                        }
-                    };
-
-                    result[cursor.pos] = b' '; // Replace `%`
-                    cursor.advance();
-                    result[cursor.pos] = b' '; // Replace `w`
-                    cursor.advance();
-                    result[cursor.pos] = b' '; // Replace the opening delimiter
-                    cursor.advance();
-
-                    // Paired delimiters can be nested as long as they are balanced. E.g.:
-                    // `%w[foo[bar]baz]` produces a flat array.
-                    let mut depth = 1_usize;
-
-                    while cursor.pos < len {
-                        match cursor.curr() {
-                            // Skip escaped characters, unless the backslash is the delimiter
-                            // itself
-                            b'\\' if close != b'\\' => {
-                                // Use backslash to embed spaces in the strings.
-                                if cursor.next() == b' ' {
-                                    result[cursor.pos] = b' ';
-                                }
-
-                                cursor.advance();
-                            }
-
-                            // Start of a nested delimiter pair
-                            c if c == open && open != close => depth += 1,
-
-                            // Closing delimiter
-                            c if c == close => {
-                                depth -= 1;
-
-                                // End of the literal, replace the closing delimiter with a space
-                                if depth == 0 {
-                                    result[cursor.pos] = b' ';
-                                    break;
-                                }
-                            }
-
-                            // Everything else is valid content
-                            _ => {}
-                        }
-
-                        cursor.advance();
-                    }
-                }
-
-                // Any `[` preceded by an alphanumeric value will not be part of a candidate.
-                //
-                // E.g.:
-                //
-                // ```
-                //  .text-xl.text-red-600[
-                //                       ^ not part of the `text-red-600` candidate
-                //    data-foo="bar"
-                //  ]
-                //    | This line should be red
-                // ```
-                //
-                // We know that `-[` is valid for an arbitrary value and that `:[` is valid as a
-                // variant. However `[color:red]` is also valid, in this case `[` will be preceded
-                // by nothing or a boundary character.
-                // Instead of listing all boundary characters, let's list the characters we know
-                // will be invalid instead.
-                b'[' if bracket_stack.is_empty()
-                    && matches!(cursor.prev(), b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9') =>
-                {
-                    result[cursor.pos] = b' ';
-                    bracket_stack.push(cursor.curr());
-                }
-
-                // In Slim the class name shorthand can be followed by a parenthesis. E.g.:
-                //
-                // ```slim
-                // body.border-t-4.p-8(attr=value)
-                //                    ^ Not part of the p-8 class
-                // ```
-                //
-                // This means that we need to replace all these `(` and `)` with spaces to make
-                // sure that we can extract the `p-8`.
-                //
-                // However, we also need to make sure that we keep the parens that are part of the
-                // utility class. E.g.: `bg-(--my-color)`.
-                b'(' if bracket_stack.is_empty() && !matches!(cursor.prev(), b'-' | b'/') => {
-                    result[cursor.pos] = b' ';
-                    bracket_stack.push(cursor.curr());
-                }
-
-                b'(' | b'[' | b'{' => {
-                    bracket_stack.push(cursor.curr());
-                }
-
-                b')' | b']' | b'}' if !bracket_stack.is_empty() => {
-                    bracket_stack.pop(cursor.curr());
-                }
-
-                // Consume everything else
-                _ => {}
-            };
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Slim;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_slim_pre_processor() {
-        for (input, expected) in [
-            // Convert dots to spaces
-            ("div.flex.bg-red-500", "div flex bg-red-500"),
-            (".flex.bg-red-500", " flex bg-red-500"),
-            (".bg-red-500.2xl:flex", " bg-red-500 2xl:flex"),
-            (
-                ".bg-red-500.2xl:flex.bg-green-200.3xl:flex",
-                " bg-red-500 2xl:flex bg-green-200 3xl:flex",
-            ),
-            // Keep dots in strings
-            (r#"div(class="px-2.5")"#, r#"div class="px-2.5")"#),
-            // Replace top-level `(a-z0-9)[` with `$1 `. E.g.: `.flex[x]` -> `.flex x]`
-            (".text-xl.text-red-600[", " text-xl text-red-600 "),
-            // But keep important brackets:
-            (".text-[#0088cc]", " text-[#0088cc]"),
-            // Arbitrary value and arbitrary modifier
-            (
-                ".text-[#0088cc].bg-[#0088cc]/[20%]",
-                " text-[#0088cc] bg-[#0088cc]/[20%]",
-            ),
-            // Start of arbitrary property
-            ("[color:red]", "[color:red]"),
-            // Arbitrary container query
-            ("@[320px]:flex", "@[320px]:flex"),
-            // Nested brackets
-            (
-                "bg-[url(https://example.com/?q=[1,2])]",
-                "bg-[url(https://example.com/?q=[1,2])]",
-            ),
-            // Nested brackets, with "invalid" syntax but valid due to nesting
-            ("content-['50[]']", "content-['50[]']"),
-            // Escaped string
-            ("content-['a\'b\'c\'']", "content-['a\'b\'c\'']"),
-            // Classes in HTML attributes
-            ("<div id=\"px-2.5\"></div>", "<div id=\"px-2.5\"></div>"),
-            (
-                "<div id=\"px-2.5 bg-red-500 2xl:flex bg-green-200 3xl:flex\"></div>",
-                "<div id=\"px-2.5 bg-red-500 2xl:flex bg-green-200 3xl:flex\"></div>",
-            ),
-        ] {
-            Slim::test(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_nested_slim_syntax() {
-        let input = r#"
-            .text-black[
-              data-controller= ['foo', ('bar' if rand.positive?)].join(' ')
-            ]
-              .bg-green-300
-                | BLACK on GREEN - OK
-
-              .bg-red-300[
-                data-foo= 42
-              ]
-                | Should be BLACK on RED - FAIL
-        "#;
-
-        Slim::test_extract_contains(input, vec!["text-black", "bg-green-300", "bg-red-300"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17081
-    // https://github.com/slim-template/slim?tab=readme-ov-file#verbatim-text-with-trailing-white-space-
-    #[test]
-    fn test_single_quotes_to_enforce_trailing_whitespace() {
-        let input = r#"
-            div
-              'A single quote enforces trailing white space
-              = 1234
-
-            .text-red-500.text-3xl
-              | This text should be red
-        "#;
-
-        let expected = r#"
-            div
-              'A single quote enforces trailing white space
-              = 1234
-
-             text-red-500 text-3xl
-              | This text should be red
-        "#;
-
-        Slim::test(input, expected);
-        Slim::test_extract_contains(input, vec!["text-red-500", "text-3xl"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17277
-    #[test]
-    fn test_class_shorthand_followed_by_parens() {
-        let input = r#"
-              body.border-t-4.p-8(class="\#{body_classes}" data-hotwire-native="\#{hotwire_native_app?}" data-controller="update-time-zone")
-        "#;
-        Slim::test_extract_contains(input, vec!["border-t-4", "p-8"]);
-
-        // Additional test with CSS Variable shorthand syntax in the attribute itself because `(`
-        // and `)` are not valid in the class shorthand version.
-        //
-        // Also included an arbitrary value including `(` and `)` to make sure that we don't
-        // accidentally remove those either.
-        let input = r#"
-              body.p-8(class="bg-(--my-color) bg-(--my-color)/(--my-opacity) bg-[url(https://example.com)]")
-        "#;
-        Slim::test_extract_contains(
-            input,
-            vec![
-                "p-8",
-                "bg-(--my-color)",
-                "bg-(--my-color)/(--my-opacity)",
-                "bg-[url(https://example.com)]",
-            ],
-        );
-
-        // Top-level class shorthand with parens
-        let input = r#"
-            div class="bg-(--my-color) bg-(--my-color)/(--my-opacity)"
-        "#;
-        Slim::test_extract_contains(
-            input,
-            vec!["bg-(--my-color)", "bg-(--my-color)/(--my-opacity)"],
-        );
-    }
-
-    #[test]
-    fn test_strings_only_occur_when_nested() {
-        let input = r#"
-            p.mt-2.text-xl
-              | The quote in the next word, can't be the start of a string
-
-            h3.mt-24.text-center.text-4xl.font-bold.italic
-              | The classes above should be extracted
-        "#;
-
-        Slim::test_extract_contains(
-            input,
-            vec![
-                // First paragraph
-                "mt-2",
-                "text-xl",
-                // second paragraph
-                "mt-24",
-                "text-center",
-                "text-4xl",
-                "font-bold",
-                "italic",
-            ],
-        );
-    }
-
-    #[test]
-    fn test_arbitrary_code_followed_by_classes() {
-        let input = r#"
-            - i < 3
-              .flex.items-center
-        "#;
-        Slim::test_extract_contains(input, vec!["flex", "items-center"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17542
-    #[test]
-    fn test_embedded_ruby_percent_w_extraction() {
-        let input = r#"
-            div[
-              class=%w[bg-blue-500 w-10 h-10]
-            ]
-            div[
-              class=%w[w-10 bg-green-500 h-10]
-            ]
-        "#;
-
-        let expected = "
-            div \n              class=   bg-blue-500 w-10 h-10 \n            ]
-            div \n              class=   w-10 bg-green-500 h-10 \n            ]
-        ";
-
-        Slim::test(input, expected);
-        Slim::test_extract_contains(input, vec!["bg-blue-500", "bg-green-500", "w-10", "h-10"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/20386
-    #[test]
-    fn test_embedded_ruby_percent_w_delimiters() {
-        for (input, expected) in [
-            // %w<…>, Slim only counts `[({` nesting in attribute values, so the code must be
-            // wrapped in parentheses to contain spaces
-            (
-                "div class=(%w<bg-blue-500 w-10 h-10>)",
-                "div class=    bg-blue-500 w-10 h-10 )",
-            ),
-            // Nested `<…>` does not end the literal
-            (
-                "div class=(%w<flex <nested> px-2.5>)",
-                "div class=    flex <nested> px-2.5 )",
-            ),
-            // Custom delimiters
-            ("div class=(%w|flex px-2.5|)", "div class=    flex px-2.5 )"),
-            ("div class=(%W!flex px-2.5!)", "div class=    flex px-2.5 )"),
-            (
-                "div class=(%w#text-sm leading-6#)",
-                "div class=    text-sm leading-6 )",
-            ),
-            (
-                "div class=(%w=italic tracking-wide=)",
-                "div class=    italic tracking-wide )",
-            ),
-            // Nested paired delimiters stay balanced inside the literal
-            (
-                "div class=(%w[content-['[hello]'] p-4])",
-                "div class=    content-['[hello]'] p-4 )",
-            ),
-            // Escaped spaces embed a space in a single array element
-            (
-                r#"div class=(%w[foo\ bar baz-1])"#,
-                r#"div class=    foo  bar baz-1 )"#,
-            ),
-            // Ruby control line, which is plain Ruby code
-            ("- classes = %w<mt-4 flex>", "- classes =    mt-4 flex "),
-            // A `%` that follows a value is not a percent literal
-            ("| hit rate 50%w.", "| hit rate 50%w "),
-        ] {
-            Slim::test(input, expected);
-        }
-
-        let input = r#"
-            div[
-              class=(%w<bg-blue-500 w-10 h-10>)
-            ]
-            - classes = %w|w-10 bg-green-500 h-10|
-            = tag.div class: %W!px-2.5 flex!
-        "#;
-
-        Slim::test_extract_contains(
-            input,
-            vec![
-                "bg-blue-500",
-                "bg-green-500",
-                "w-10",
-                "h-10",
-                "px-2.5",
-                "flex",
-            ],
-        );
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/svelte.rs b/crates/oxide/src/extractor/pre_processors/svelte.rs
deleted file mode 100644
index 5834f7feb..000000000
--- a/crates/oxide/src/extractor/pre_processors/svelte.rs
+++ /dev/null
@@ -1,43 +0,0 @@
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use bstr::ByteSlice;
-
-#[derive(Debug, Default)]
-pub struct Svelte;
-
-impl PreProcessor for Svelte {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        content
-            .replace(" class:", " class ")
-            .replace("\tclass:", " class ")
-            .replace("\nclass:", " class ")
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Svelte;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_svelte_pre_processor() {
-        for (input, expected) in [
-            // Spaces
-            (
-                "<div class:flex class:px-2.5={condition()}>",
-                "<div class flex class px-2.5={condition()}>",
-            ),
-            // Tabs
-            (
-                "<div\tclass:flex class:px-2.5={condition()}>",
-                "<div class flex class px-2.5={condition()}>",
-            ),
-            // Newlines
-            (
-                "<div\nclass:flex class:px-2.5={condition()}>",
-                "<div class flex class px-2.5={condition()}>",
-            ),
-        ] {
-            Svelte::test(input, expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/template_toolkit.rs b/crates/oxide/src/extractor/pre_processors/template_toolkit.rs
deleted file mode 100644
index 6456a2694..000000000
--- a/crates/oxide/src/extractor/pre_processors/template_toolkit.rs
+++ /dev/null
@@ -1,52 +0,0 @@
-use crate::cursor;
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-#[derive(Debug, Default)]
-pub struct TemplateToolkit;
-
-impl PreProcessor for TemplateToolkit {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(content);
-
-        while cursor.pos < len {
-            match (cursor.curr(), cursor.next()) {
-                (b'[', b'%') => result[cursor.pos] = b' ',
-                (b'%', b']') => result[cursor.pos + 1] = b' ',
-                _ => {}
-            }
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::TemplateToolkit;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_template_toolkit_pre_processor() {
-        for (input, expected) in [
-            (
-                "[% IF $is_open %]bg-white/40[% ELSE %]bg-white/10[% END %]",
-                " % IF $is_open % bg-white/40 % ELSE % bg-white/10 % END % ",
-            ),
-            ("[% WRAPPER %]flex[% END %]", " % WRAPPER % flex % END % "),
-        ] {
-            TemplateToolkit::test(input, expected);
-        }
-    }
-
-    #[test]
-    fn test_extraction_between_template_tags_works() {
-        TemplateToolkit::test_extract_contains(
-            r#"<div class="[% IF $is_open %]bg-white/40[% ELSE %]bg-white/10[% END %]"></div>"#,
-            vec!["bg-white/40", "bg-white/10"],
-        );
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17051.haml b/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17051.haml
deleted file mode 100644
index 56a38cbe3..000000000
--- a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17051.haml
+++ /dev/null
@@ -1,262 +0,0 @@
-/ https://github.com/tailwindlabs/tailwindcss/pull/17051#issuecomment-2711181352
-- star_styles = "size-[800px] mask mask-star bg-gradient-to-r from-secondary via-cyan-400 to-lime-400"
-  ^^^^^^^^^^^    ^^^^^^^^^^^^ ^^^^ ^^^^^^^^^ ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^ ^^^^^^^^^^^^ ^^^^^^^^^^^
-- crazy_text_styles = "italic font-black bg-gradient-to-r via-60% to-90% from-orange-500 via-secondary to-primary text-transparent bg-clip-text inline-block py-2"
-  ^^^^^^^^^^^^^^^^^    ^^^^^^ ^^^^^^^^^^ ^^^^^^^^^^^^^^^^ ^^^^^^^ ^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^ ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^ ^^^^^^^^^^^^ ^^^^
-
-.relative
- ^^^^^^^^
-  - # Blurred background star
-  .absolute.left-0.z-0{ class: "-top-[400px] -right-[400px]" }
-   ^^^^^^^^ ^^^^^^ ^^^  ^^^^^   ^^^^^^^^^^^^ ^^^^^^^^^^^^^^
-    .flex.justify-end.blur-3xl
-     ^^^^ ^^^^^^^^^^^ ^^^^^^^^
-      %div{ class: star_styles }
-            ^^^^^  ^^^^^^^^^^^
-
-  .relative.z-10
-   ^^^^^^^^ ^^^^
-    %h1.mt-8.text-center.text-5xl.font-black.tracking-wide.drop-shadow-lg
-        ^^^^ ^^^^^^^^^^^ ^^^^^^^^ ^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^^
-      %div
-        Components, Guides, and Paradigms
-                            ^^^
-      .md:inline-flex.md:items-center.justify-center
-       ^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^
-        %span.-mr-2
-              ^^^^^
-          for
-          ^^^
-        %span.relative.-rotate-3.hover:-rotate-6.hover:scale-125.transition-transform
-              ^^^^^^^^ ^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^
-          %span{ class: crazy_text_styles + " absolute blur-xl" }
-                 ^^^^^  ^^^^^^^^^^^^^^^^^     ^^^^^^^^ ^^^^^^^
-            &nbsp;CRAZY&nbsp;
-          %span{ class: crazy_text_styles + " drop-shadow-[0_0_1px_#fff]" }
-                 ^^^^^  ^^^^^^^^^^^^^^^^^     ^^^^^^^^^^^^^^^^^^^^^^^^^^
-            &nbsp;CRAZY&nbsp;
-        %span.-ml-3.md:-ml-1
-              ^^^^^ ^^^^^^^^
-          \-fast Development
-      %div
-        in Ruby on Rails!
-        ^^      ^^
-
-    .mt-16.text-center
-     ^^^^^ ^^^^^^^^^^^
-      = daisy_button "😃 Get Started", css: "btn-primary text-xl",
-        ^^^^^^^^^^^^                   ^^^   ^^^^^^^^^^^ ^^^^^^^
-        right_icon: "arrow-right", target: "_blank",
-        ^^^^^^^^^^   ^^^^^^^^^^^   ^^^^^^
-        href: "https://github.com/profoundry-us/loco_motion#locomotion-components"
-        ^^^^                                                ^^^^^^^^^^^^^^^^^^^^^
-
-    .mt-32.lg:flex.lg:space-x-8
-     ^^^^^ ^^^^^^^ ^^^^^^^^^^^^
-      %div{ class: "md:basis-2/5" }
-            ^^^^^   ^^^^^^^^^^^^
-        %h3.text-4xl.font-bold
-            ^^^^^^^^ ^^^^^^^^^
-          Easy, Flexible Components
-        %p.mt-2.text-xl
-           ^^^^ ^^^^^^^
-          Powered by the fabulous
-                  ^^ ^^^ ^^^^^^^^
-          = succeed ',' do
-            ^^^^^^^     ^^
-            = daisy_link("ViewComponent", "https://viewcomponent.org", target: "_blank")
-                                                                 ^^^   ^^^^^^
-          = succeed ', and' do
-            ^^^^^^^    ^^^  ^^
-            = daisy_link "DaisyUI", "https://daisyui.com/", target: "_blank"
-              ^^^^^^^^^^                                    ^^^^^^
-          = daisy_link "TailwindCSS", "https://tailwindcss.com/", target: "_blank"
-            ^^^^^^^^^^                                            ^^^^^^
-          libraries, our components are designed to be fast, flexible, and easy to
-                     ^^^ ^^^^^^^^^^ ^^^ ^^^^^^^^ ^^ ^^                 ^^^ ^^^^ ^^
-          use <i>directly</i> in Ruby on Rails!
-          ^^^    ^^^^^^^^     ^^      ^^
-
-      = doc_example(css: "mt-8 lg:mt-0 lg:basis-3/5 h-44") do
-                    ^^^   ^^^^ ^^^^^^^ ^^^^^^^^^^^^ ^^^^   ^^
-        .flex.flex-col.sm:flex-row.items-center.gap-4
-         ^^^^ ^^^^^^^^ ^^^^^^^^^^^ ^^^^^^^^^^^^ ^^^^^
-          = daisy_button "Accent Button", css: "btn-accent"
-            ^^^^^^^^^^^^                  ^^^   ^^^^^^^^^^
-          = daisy_tip("Click to Swap") do
-                             ^^        ^^
-            = daisy_swap off: "🌚", on: "🌞", css: "swap-rotate text-4xl"
-              ^^^^^^^^^^ ^^^        ^^        ^^^   ^^^^^^^^^^^ ^^^^^^^^
-          = daisy_badge "Large Badge", css: "badge-secondary badge-lg"
-            ^^^^^^^^^^^                ^^^   ^^^^^^^^^^^^^^^ ^^^^^^^^
-
-
-    .mt-32.xl:flex.xl:flex-row-reverse.xl:items-center
-     ^^^^^ ^^^^^^^ ^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^
-      .text-xl.xl:ml-8
-       ^^^^^^^ ^^^^^^^
-        %h3.text-4xl.font-bold
-            ^^^^^^^^ ^^^^^^^^^
-          Simple, Concise Views
-
-        %p.mt-2
-           ^^^^
-          Utilize
-          = daisy_link("HAML", "https://haml.info/", target: "_blank")
-                                                     ^^^^^^
-          so your views are simple, concise, and easy to understand.
-          ^^ ^^^^ ^^^^^ ^^^                  ^^^ ^^^^ ^^ ^^^^^^^^^^
-
-        %p.mt-2
-           ^^^^
-          No more messy ERB files with all of their closing tags and Ruby wrappers.
-             ^^^^ ^^^^^     ^^^^^ ^^^^ ^^^ ^^ ^^^^^ ^^^^^^^ ^^^^ ^^^      ^^^^^^^^
-          HAML feels more natural to write and reduces file sizes, making your
-               ^^^^^ ^^^^ ^^^^^^^ ^^ ^^^^^ ^^^ ^^^^^^^ ^^^^        ^^^^^^ ^^^^
-          views easier to read and maintain.
-          ^^^^^ ^^^^^^ ^^ ^^^^ ^^^ ^^^^^^^^
-
-        %p.mt-2
-           ^^^^
-          :markdown
-            **PLUS!** You can utilize filters like _Markdown_, CoffeeScript,
-                          ^^^ ^^^^^^^ ^^^^^^^ ^^^^
-            Textile, and many more!
-                     ^^^ ^^^^ ^^^^^
-
-      .mt-8.xl:mt-0
-       ^^^^ ^^^^^^^
-        .flex.flex-col.xl:flex.xl:flex-row.w-full
-         ^^^^ ^^^^^^^^ ^^^^^^^ ^^^^^^^^^^^ ^^^^^^
-          = doc_code(css: "grow", code_css: "xl:pl-2 xl:pr-0 xl:rounded-r-none", language: "erb") do
-                     ^^^   ^^^^   ^^^^^^^^   ^^^^^^^ ^^^^^^^ ^^^^^^^^^^^^^^^^^   ^^^^^^^^   ^^^   ^^
-            :escaped
-              <% # Ruby %>
-
-              <% 5.times do |i| %>
-                   ^^^^^ ^^
-                <% if i.even? %>
-                   ^^ ^
-                  <p class="odd">Number <%= i %></p>
-                     ^^^^^  ^^^             ^
-                <% else %>
-                   ^^^^
-                  <p class="even">Numero <%= i %></p>
-                     ^^^^^  ^^^^             ^
-                <% end %>
-                   ^^^
-              <% end %>
-                 ^^^
-
-          = doc_code(css: "grow mt-8 xl:mt-0", pre_css: "xl:h-full", code_css: "xl:pl-0 xl:pr-2 xl:h-full xl:rounded-l-none") do
-                     ^^^   ^^^^ ^^^^ ^^^^^^^   ^^^^^^^   ^^^^^^^^^   ^^^^^^^^   ^^^^^^^ ^^^^^^^ ^^^^^^^^^ ^^^^^^^^^^^^^^^^^   ^^
-            :escaped
-              - # HAML
-
-              - 5.times do |i|
-                  ^^^^^ ^^
-                - if i.even?
-                  ^^
-                  %p.odd Number \#{i}
-                     ^^^           ^
-                - else
-                  ^^^^
-                  %p.even Numero \#{i}
-                     ^^^^           ^
-
-
-    %h3.mt-32.text-4xl.font-bold
-        ^^^^^ ^^^^^^^^ ^^^^^^^^^
-      Build Your <i>OWN</i> Components
-
-    %p.mt-2.text-xl
-       ^^^^ ^^^^^^^
-      Can't find exactly what you need? No problem! Build your own components
-          ^ ^^^^ ^^^^^^^ ^^^^ ^^^          ^^^^^^^^       ^^^^ ^^^ ^^^^^^^^^^
-      with ease using our simple, flexible, and powerful DSL.
-      ^^^^ ^^^^ ^^^^^ ^^^                   ^^^ ^^^^^^^^
-
-    .mt-8.xl:flex.xl:space-x-8
-     ^^^^ ^^^^^^^ ^^^^^^^^^^^^
-      %div
-        = doc_code(language: "ruby") do
-                   ^^^^^^^^   ^^^^   ^^
-          :escaped
-            # app/components/application_component.rb
-                                                   ^^
-            class ApplicationComponent < LocoMotion::BaseComponent
-            ^^^^^
-              # Add your custom / shared component logic here!
-                    ^^^^ ^^^^^^   ^^^^^^ ^^^^^^^^^ ^^^^^ ^^^^^
-            end
-            ^^^
-
-        = doc_code(language: "haml", css: "mt-8") do
-                   ^^^^^^^^   ^^^^   ^^^   ^^^^   ^^
-          :escaped
-            - # app/components/character_component.html.haml
-            = part(:component) do
-                               ^^
-              = part(:head)
-              = part(:body) do
-                            ^^
-                = content
-                  ^^^^^^^
-              = part(:legs)
-
-      %div.mt-8.xl:mt-0
-           ^^^^ ^^^^^^^
-        = doc_code(language: "ruby") do
-                   ^^^^^^^^   ^^^^   ^^
-          :escaped
-            # app/components/character_component.rb
-                                                 ^^
-            class CharacterComponent < ApplicationComponent
-            ^^^^^
-              define_parts :head, :body, :legs
-              ^^^^^^^^^^^^
-
-              def before_render
-              ^^^ ^^^^^^^^^^^^^
-                set_tag_name(:head, :h1)
-                ^^^^^^^^^^^^
-                add_css(:head, "text-3xl font-bold")
-                ^^^^^^^         ^^^^^^^^ ^^^^^^^^^
-
-                set_tag_name(:body, :p)
-                ^^^^^^^^^^^^
-                add_stimulus_controller(:body, "character-body")
-                ^^^^^^^^^^^^^^^^^^^^^^^         ^^^^^^^^^^^^^^
-                add_css(:body, "text-lg")
-                ^^^^^^^         ^^^^^^^
-
-                set_tag_name(:legs, :footer)
-                ^^^^^^^^^^^^
-                add_css(:legs, "text-sm")
-                ^^^^^^^         ^^^^^^^
-              end
-              ^^^
-            end
-            ^^^
-
-    %h3.mt-24.text-center.text-4xl.font-bold.italic
-        ^^^^^ ^^^^^^^^^^^ ^^^^^^^^ ^^^^^^^^^ ^^^^^^
-      More Coming Soon!
-    %p.mt-2.text-xl.text-center
-       ^^^^ ^^^^^^^ ^^^^^^^^^^^
-      Keen an eye out as we'll be adding more components, guides, and
-           ^^ ^^^ ^^^ ^^ ^^ ^^ ^^ ^^^^^^ ^^^^                     ^^^
-      %br.max-sm:hidden
-          ^^^^^^^^^^^^^
-      suggested gems for you to build amazing Rails apps!
-      ^^^^^^^^^ ^^^^ ^^^ ^^^ ^^ ^^^^^ ^^^^^^^       ^^^^^
-    .mt-4.text-center
-     ^^^^ ^^^^^^^^^^^
-      = daisy_button "😉 Get Started", css: "btn-primary text-xl",
-        ^^^^^^^^^^^^                   ^^^   ^^^^^^^^^^^ ^^^^^^^
-        right_icon: "arrow-right", target: "_blank",
-        ^^^^^^^^^^   ^^^^^^^^^^^   ^^^^^^
-        class: "px-2.5"
-        ^^^^^   ^^^^^^
-        href: "https://github.com/profoundry-us/loco_motion#locomotion-components"
-        ^^^^                                                ^^^^^^^^^^^^^^^^^^^^^
diff --git a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17813.haml b/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17813.haml
deleted file mode 100644
index 18f0fdc4b..000000000
--- a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/dst-17813.haml
+++ /dev/null
@@ -1,30 +0,0 @@
-:ruby
-  - devices_classes = 'size-5 mr-2px'
-    ^^^^^^^^^^^^^^^    ^^^^^^ ^^^^^^
-  - icon_classes = 'w-[12px] h-[12px]'
-    ^^^^^^^^^^^^    ^^^^^^^^ ^^^^^^^^
-!!!
-%html{ lang: 'en' }
-       ^^^^   ^^
-  %head
-    %title Tailwind v4.1.4 + HAML bug
-                    ^^^^^^        ^^^
-
-  -# This is a comment
-          ^^ ^ ^^^^^^^
-
-    A multi-line comment
-      ^^^^^^^^^^ ^^^^^^^
-      With more indentation
-           ^^^^ ^^^^^^^^^^^
-
-    Which can dedent again just fine
-          ^^^ ^^^^^^ ^^^^^ ^^^^ ^^^^
-
-  %body
-  - icon_classes = 'self-center w-[16px] h-[16px]'
-    ^^^^^^^^^^^^    ^^^^^^^^^^^ ^^^^^^^^ ^^^^^^^^
-    .flex{ class: icon_classes }
-     ^^^^  ^^^^^  ^^^^^^^^^^^^
-    .flex{ class: devices_classes }
-     ^^^^  ^^^^^  ^^^^^^^^^^^^^^^
diff --git a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17051.haml b/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17051.haml
deleted file mode 100644
index 8f9b61941..000000000
--- a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17051.haml
+++ /dev/null
@@ -1,155 +0,0 @@
-/ https://github.com/tailwindlabs/tailwindcss/pull/17051#issuecomment-2711181352
-- star_styles = "size-[800px] mask mask-star bg-gradient-to-r from-secondary via-cyan-400 to-lime-400"
-- crazy_text_styles = "italic font-black bg-gradient-to-r via-60% to-90% from-orange-500 via-secondary to-primary text-transparent bg-clip-text inline-block py-2"
-
-.relative
-  - # Blurred background star
-  .absolute.left-0.z-0{ class: "-top-[400px] -right-[400px]" }
-    .flex.justify-end.blur-3xl
-      %div{ class: star_styles }
-
-  .relative.z-10
-    %h1.mt-8.text-center.text-5xl.font-black.tracking-wide.drop-shadow-lg
-      %div
-        Components, Guides, and Paradigms
-      .md:inline-flex.md:items-center.justify-center
-        %span.-mr-2
-          for
-        %span.relative.-rotate-3.hover:-rotate-6.hover:scale-125.transition-transform
-          %span{ class: crazy_text_styles + " absolute blur-xl" }
-            &nbsp;CRAZY&nbsp;
-          %span{ class: crazy_text_styles + " drop-shadow-[0_0_1px_#fff]" }
-            &nbsp;CRAZY&nbsp;
-        %span.-ml-3.md:-ml-1
-          \-fast Development
-      %div
-        in Ruby on Rails!
-
-    .mt-16.text-center
-      = daisy_button "😃 Get Started", css: "btn-primary text-xl",
-        right_icon: "arrow-right", target: "_blank",
-        href: "https://github.com/profoundry-us/loco_motion#locomotion-components"
-
-    .mt-32.lg:flex.lg:space-x-8
-      %div{ class: "md:basis-2/5" }
-        %h3.text-4xl.font-bold
-          Easy, Flexible Components
-        %p.mt-2.text-xl
-          Powered by the fabulous
-          = succeed ',' do
-            = daisy_link("ViewComponent", "https://viewcomponent.org", target: "_blank")
-          = succeed ', and' do
-            = daisy_link "DaisyUI", "https://daisyui.com/", target: "_blank"
-          = daisy_link "TailwindCSS", "https://tailwindcss.com/", target: "_blank"
-          libraries, our components are designed to be fast, flexible, and easy to
-          use <i>directly</i> in Ruby on Rails!
-
-      = doc_example(css: "mt-8 lg:mt-0 lg:basis-3/5 h-44") do
-        .flex.flex-col.sm:flex-row.items-center.gap-4
-          = daisy_button "Accent Button", css: "btn-accent"
-          = daisy_tip("Click to Swap") do
-            = daisy_swap off: "🌚", on: "🌞", css: "swap-rotate text-4xl"
-          = daisy_badge "Large Badge", css: "badge-secondary badge-lg"
-
-
-    .mt-32.xl:flex.xl:flex-row-reverse.xl:items-center
-      .text-xl.xl:ml-8
-        %h3.text-4xl.font-bold
-          Simple, Concise Views
-
-        %p.mt-2
-          Utilize
-          = daisy_link("HAML", "https://haml.info/", target: "_blank")
-          so your views are simple, concise, and easy to understand.
-
-        %p.mt-2
-          No more messy ERB files with all of their closing tags and Ruby wrappers.
-          HAML feels more natural to write and reduces file sizes, making your
-          views easier to read and maintain.
-
-        %p.mt-2
-          :markdown
-            **PLUS!** You can utilize filters like _Markdown_, CoffeeScript,
-            Textile, and many more!
-
-      .mt-8.xl:mt-0
-        .flex.flex-col.xl:flex.xl:flex-row.w-full
-          = doc_code(css: "grow", code_css: "xl:pl-2 xl:pr-0 xl:rounded-r-none", language: "erb") do
-            :escaped
-              <% # Ruby %>
-
-              <% 5.times do |i| %>
-                <% if i.even? %>
-                  <p class="odd">Number <%= i %></p>
-                <% else %>
-                  <p class="even">Numero <%= i %></p>
-                <% end %>
-              <% end %>
-
-          = doc_code(css: "grow mt-8 xl:mt-0", pre_css: "xl:h-full", code_css: "xl:pl-0 xl:pr-2 xl:h-full xl:rounded-l-none") do
-            :escaped
-              - # HAML
-
-              - 5.times do |i|
-                - if i.even?
-                  %p.odd Number \#{i}
-                - else
-                  %p.even Numero \#{i}
-
-
-    %h3.mt-32.text-4xl.font-bold
-      Build Your <i>OWN</i> Components
-
-    %p.mt-2.text-xl
-      Can't find exactly what you need? No problem! Build your own components
-      with ease using our simple, flexible, and powerful DSL.
-
-    .mt-8.xl:flex.xl:space-x-8
-      %div
-        = doc_code(language: "ruby") do
-          :escaped
-            # app/components/application_component.rb
-            class ApplicationComponent < LocoMotion::BaseComponent
-              # Add your custom / shared component logic here!
-            end
-
-        = doc_code(language: "haml", css: "mt-8") do
-          :escaped
-            - # app/components/character_component.html.haml
-            = part(:component) do
-              = part(:head)
-              = part(:body) do
-                = content
-              = part(:legs)
-
-      %div.mt-8.xl:mt-0
-        = doc_code(language: "ruby") do
-          :escaped
-            # app/components/character_component.rb
-            class CharacterComponent < ApplicationComponent
-              define_parts :head, :body, :legs
-
-              def before_render
-                set_tag_name(:head, :h1)
-                add_css(:head, "text-3xl font-bold")
-
-                set_tag_name(:body, :p)
-                add_stimulus_controller(:body, "character-body")
-                add_css(:body, "text-lg")
-
-                set_tag_name(:legs, :footer)
-                add_css(:legs, "text-sm")
-              end
-            end
-
-    %h3.mt-24.text-center.text-4xl.font-bold.italic
-      More Coming Soon!
-    %p.mt-2.text-xl.text-center
-      Keen an eye out as we'll be adding more components, guides, and
-      %br.max-sm:hidden
-      suggested gems for you to build amazing Rails apps!
-    .mt-4.text-center
-      = daisy_button "😉 Get Started", css: "btn-primary text-xl",
-        right_icon: "arrow-right", target: "_blank",
-        class: "px-2.5"
-        href: "https://github.com/profoundry-us/loco_motion#locomotion-components"
diff --git a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17813.haml b/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17813.haml
deleted file mode 100644
index 5fdaefdb0..000000000
--- a/crates/oxide/src/extractor/pre_processors/test-fixtures/haml/src-17813.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-:ruby
-  - devices_classes = 'size-5 mr-2px'
-  - icon_classes = 'w-[12px] h-[12px]'
-!!!
-%html{ lang: 'en' }
-  %head
-    %title Tailwind v4.1.4 + HAML bug
-
-  -# This is a comment
-
-    A multi-line comment
-      With more indentation
-
-    Which can dedent again just fine
-
-  %body
-  - icon_classes = 'self-center w-[16px] h-[16px]'
-    .flex{ class: icon_classes }
-    .flex{ class: devices_classes }
diff --git a/crates/oxide/src/extractor/pre_processors/twig.rs b/crates/oxide/src/extractor/pre_processors/twig.rs
deleted file mode 100644
index b6f4a3319..000000000
--- a/crates/oxide/src/extractor/pre_processors/twig.rs
+++ /dev/null
@@ -1,179 +0,0 @@
-use crate::cursor;
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-#[derive(Debug, Default)]
-pub struct Twig;
-
-impl PreProcessor for Twig {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let len = content.len();
-        let mut result = content.to_vec();
-        let mut cursor = cursor::Cursor::new(content);
-        let mut bracket_stack = vec![];
-
-        const ADD_CLASS: &[u8] = b"addClass";
-        const REMOVE_CLASS: &[u8] = b"removeClass";
-
-        while cursor.pos < len {
-            match (!bracket_stack.is_empty(), cursor.curr()) {
-                // addClass(
-                //         ^
-                (false, b'(')
-                    if cursor.pos >= ADD_CLASS.len()
-                        && matches!(
-                            &content[cursor.pos - ADD_CLASS.len()..cursor.pos],
-                            ADD_CLASS
-                        ) =>
-                {
-                    bracket_stack.push(cursor.curr());
-                    result[cursor.pos] = b' ';
-                }
-
-                // removeClass(
-                //            ^
-                (false, b'(')
-                    if cursor.pos >= REMOVE_CLASS.len()
-                        && matches!(
-                            &content[cursor.pos - REMOVE_CLASS.len()..cursor.pos],
-                            REMOVE_CLASS
-                        ) =>
-                {
-                    bracket_stack.push(cursor.curr());
-                    result[cursor.pos] = b' ';
-                }
-
-                (true, b'(') => {
-                    bracket_stack.push(cursor.curr());
-                }
-
-                (true, b')') => {
-                    bracket_stack.pop();
-
-                    if bracket_stack.is_empty() {
-                        result[cursor.pos] = b' ';
-                    }
-                }
-
-                _ => {}
-            }
-
-            cursor.advance();
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Twig;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_twig_pre_processor() {
-        for (input, expected) in [
-            (
-                // Ensure we don't crash when we encounter an `(`
-                "(p-(--value))",
-                "(p-(--value))",
-            ),
-            (
-                // addClass with single argument
-                "addClass(p-(--value))",
-                "addClass p-(--value) ",
-            ),
-            (
-                // addClass with single argument
-                "addClass(m-4 p-8 w-full)",
-                "addClass m-4 p-8 w-full ",
-            ),
-            (
-                // removeClass with single argument
-                "removeClass(p-(--value))",
-                "removeClass p-(--value) ",
-            ),
-            (
-                // removeClass with single argument
-                "removeClass(m-4 p-8 w-full)",
-                "removeClass m-4 p-8 w-full ",
-            ),
-            (
-                // Combined with single arguments
-                "addClass(m-(--value))|removeClass(p-(--value))",
-                "addClass m-(--value) |removeClass p-(--value) ",
-            ),
-        ] {
-            Twig::test(input, expected);
-        }
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/19458
-    #[test]
-    fn test_extraction_in_add_class_and_remove_class_works() {
-        // Inside normal HTML
-        let input = r#"
-          <div data-loading="addClass(opacity-50)">
-            <!-- -->
-          </div>
-        "#;
-
-        let expected = r#"
-          <div data-loading="addClass opacity-50 ">
-            <!-- -->
-          </div>
-        "#;
-
-        Twig::test(input, expected);
-        Twig::test_extract_contains(input, vec!["opacity-50"]);
-
-        // Inside a component
-        let input = r#"
-            <twig:d:Card
-              {{ ...attributes.defaults({
-                  as: "a",
-                  class: "cursor-pointer bg-base-200 card-sm md:card-md lg:card-lg",
-                  role: "button",
-                  tabindex: "0",
-                  "data-action": "live#$render",
-                  "data-loading": "addAttribute(disabled)",
-                  "data-poll": "delay(60000)|$render",
-                  "data-loading": "addClass(border border-red-500 opacity-75)",
-                 })
-              }}
-            >
-        "#;
-
-        let expected = r#"
-            <twig:d:Card
-              {{ ...attributes.defaults({
-                  as: "a",
-                  class: "cursor-pointer bg-base-200 card-sm md:card-md lg:card-lg",
-                  role: "button",
-                  tabindex: "0",
-                  "data-action": "live#$render",
-                  "data-loading": "addAttribute(disabled)",
-                  "data-poll": "delay(60000)|$render",
-                  "data-loading": "addClass border border-red-500 opacity-75 ",
-                 })
-              }}
-            >
-        "#;
-
-        Twig::test(input, expected);
-        Twig::test_extract_contains(
-            input,
-            vec![
-                // class
-                "cursor-pointer",
-                "bg-base-200",
-                "card-sm",
-                "md:card-md",
-                "lg:card-lg",
-                // data-loading
-                "border",
-                "border-red-500",
-                "opacity-75",
-            ],
-        );
-    }
-}
diff --git a/crates/oxide/src/extractor/pre_processors/vue.rs b/crates/oxide/src/extractor/pre_processors/vue.rs
deleted file mode 100644
index ae037435c..000000000
--- a/crates/oxide/src/extractor/pre_processors/vue.rs
+++ /dev/null
@@ -1,60 +0,0 @@
-use crate::extractor::pre_processors::pre_processor::PreProcessor;
-use crate::scanner::pre_process_input;
-use bstr::ByteSlice;
-use regex::Regex;
-use std::sync;
-
-static TEMPLATE_REGEX: sync::LazyLock<Regex> = sync::LazyLock::new(|| {
-    Regex::new(r#"<template lang=['"]([^"']*)['"]>([\s\S]*)<\/template>"#).unwrap()
-});
-
-#[derive(Debug, Default)]
-pub struct Vue;
-
-impl PreProcessor for Vue {
-    fn process(&self, content: &[u8]) -> Vec<u8> {
-        let mut result = content.to_vec();
-
-        // Only process template tags if content is valid UTF-8
-        if let Ok(content_as_str) = std::str::from_utf8(content) {
-            for (_, [lang, body]) in TEMPLATE_REGEX
-                .captures_iter(content_as_str)
-                .map(|c| c.extract())
-            {
-                let replaced = pre_process_input(body.as_bytes().to_vec(), lang);
-                result = result.replace(body, replaced);
-            }
-        }
-
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::Vue;
-    use crate::extractor::pre_processors::pre_processor::PreProcessor;
-
-    #[test]
-    fn test_vue_template_pug() {
-        let input = r#"
-            <template lang="pug">
-            .bg-neutral-900.text-red-500 This is a test.
-            </template>
-        "#;
-
-        Vue::test_extract_contains(input, vec!["bg-neutral-900", "text-red-500"]);
-    }
-
-    #[test]
-    fn test_invalid_utf8_does_not_panic() {
-        // Invalid UTF-8 sequence: 0x80 is a continuation byte without a leading byte
-        let invalid_utf8: &[u8] = &[0x80, 0x81, 0x82];
-
-        let processor = Vue::default();
-
-        // Should not panic, just return the input unchanged
-        let result = processor.process(invalid_utf8);
-        assert_eq!(result, invalid_utf8);
-    }
-}
diff --git a/crates/oxide/src/extractor/string_machine.rs b/crates/oxide/src/extractor/string_machine.rs
deleted file mode 100644
index 4fad49faa..000000000
--- a/crates/oxide/src/extractor/string_machine.rs
+++ /dev/null
@@ -1,138 +0,0 @@
-use crate::cursor;
-use crate::extractor::machine::{Machine, MachineState};
-use classification_macros::ClassifyBytes;
-
-/// Extracts a string (including the quotes) from the input.
-///
-/// Rules:
-///
-/// - The string must start and end with the same quote character.
-/// - The string cannot contain any whitespace characters.
-/// - The string can contain any other character except for the quote character (unless it's escaped).
-/// - Balancing of brackets is not required.
-///
-///
-/// E.g.:
-///
-/// ```text
-/// 'hello_world'
-/// ^^^^^^^^^^^^^
-///
-/// content-['hello_world']
-///          ^^^^^^^^^^^^^
-/// ```
-#[derive(Debug, Default)]
-pub struct StringMachine;
-
-impl Machine for StringMachine {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        if Class::Quote != cursor.curr().into() {
-            return MachineState::Idle;
-        }
-
-        // Start of a string
-        let len = cursor.input.len();
-        let start_pos = cursor.pos;
-        let end_char = cursor.curr();
-
-        cursor.advance();
-
-        while cursor.pos < len {
-            match cursor.curr().into() {
-                Class::Escape => match cursor.next().into() {
-                    // An escaped whitespace character is not allowed
-                    Class::Whitespace => return MachineState::Idle,
-
-                    // An escaped character, skip ahead to the next character
-                    _ => cursor.advance(),
-                },
-
-                // End of the string
-                Class::Quote if cursor.curr() == end_char => return self.done(start_pos, cursor),
-
-                // Any kind of whitespace is not allowed
-                Class::Whitespace => return MachineState::Idle,
-
-                // Everything else is valid
-                _ => {}
-            };
-
-            cursor.advance()
-        }
-
-        MachineState::Idle
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq, ClassifyBytes)]
-enum Class {
-    #[bytes(b'"', b'\'', b'`')]
-    Quote,
-
-    #[bytes(b'\\')]
-    Escape,
-
-    #[bytes(b' ', b'\t', b'\n', b'\r', b'\x0C')]
-    Whitespace,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::StringMachine;
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_string_machine_performance() {
-        let input = r#"There will be a 'string' in this input, even "strings_with_other_quotes_and_\#escaped_characters"  "#.repeat(100);
-
-        StringMachine::test_throughput(100_000, &input);
-        StringMachine::test_duration_once(&input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_string_machine_extraction() {
-        for (input, expected) in [
-            // Simple string
-            ("'foo'", vec!["'foo'"]),
-            // String as part of a candidate
-            ("content-['hello_world']", vec!["'hello_world'"]),
-            // With nested quotes
-            (r#"'"`hello`"'"#, vec![r#"'"`hello`"'"#]),
-            // With escaped opening quote
-            (r#"'Tailwind\'s_parser'"#, vec![r#"'Tailwind\'s_parser'"#]),
-            (
-                r#"'Tailwind\'\'s_parser'"#,
-                vec![r#"'Tailwind\'\'s_parser'"#],
-            ),
-            (
-                r#"'Tailwind\'\'\'s_parser'"#,
-                vec![r#"'Tailwind\'\'\'s_parser'"#],
-            ),
-            (
-                r#"'Tailwind\'\'\'\'s_parser'"#,
-                vec![r#"'Tailwind\'\'\'\'s_parser'"#],
-            ),
-            // Spaces are not allowed
-            ("' hello world '", vec![]),
-            // With unfinished quote
-            ("'unfinished_quote", vec![]),
-            // An escape at the end will never be valid, because it _must_ be followed by the
-            // ending quote.
-            (r#"'escaped_ending_quote\'"#, vec![]),
-            (r#"'escaped_end\"#, vec![]),
-        ] {
-            assert_eq!(StringMachine::test_extract_all(input), expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/utility_machine.rs b/crates/oxide/src/extractor/utility_machine.rs
deleted file mode 100644
index c116ec4e4..000000000
--- a/crates/oxide/src/extractor/utility_machine.rs
+++ /dev/null
@@ -1,346 +0,0 @@
-use crate::cursor;
-use crate::extractor::arbitrary_property_machine::ArbitraryPropertyMachine;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::modifier_machine::ModifierMachine;
-use crate::extractor::named_utility_machine::NamedUtilityMachine;
-use classification_macros::ClassifyBytes;
-
-#[derive(Debug, Default)]
-pub struct UtilityMachine {
-    /// Start position of the utility
-    start_pos: usize,
-
-    /// Whether the legacy important marker `!` was used
-    legacy_important: bool,
-
-    arbitrary_property_machine: ArbitraryPropertyMachine,
-    named_utility_machine: NamedUtilityMachine,
-    modifier_machine: ModifierMachine,
-}
-
-impl Machine for UtilityMachine {
-    #[inline(always)]
-    fn reset(&mut self) {
-        self.start_pos = 0;
-        self.legacy_important = false;
-    }
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match cursor.curr().into() {
-            // LEGACY: Important marker
-            Class::Exclamation => {
-                self.legacy_important = true;
-
-                match cursor.next().into() {
-                    // Start of an arbitrary property
-                    //
-                    // E.g.: `![color:red]`
-                    //        ^
-                    Class::OpenBracket => {
-                        self.start_pos = cursor.pos;
-                        cursor.advance();
-                        self.parse_arbitrary_property(cursor)
-                    }
-
-                    // Start of a named utility
-                    //
-                    // E.g.: `!flex`
-                    //        ^
-                    _ => {
-                        self.start_pos = cursor.pos;
-                        cursor.advance();
-                        self.parse_named_utility(cursor)
-                    }
-                }
-            }
-
-            // Start of an arbitrary property
-            //
-            // E.g.: `[color:red]`
-            //        ^
-            Class::OpenBracket => {
-                self.start_pos = cursor.pos;
-                self.parse_arbitrary_property(cursor)
-            }
-
-            // Everything else might be a named utility. Delegate to the named utility machine
-            // to determine if it's a named utility or not.
-            _ => {
-                self.start_pos = cursor.pos;
-                self.parse_named_utility(cursor)
-            }
-        }
-    }
-}
-
-impl UtilityMachine {
-    fn parse_arbitrary_property(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match self.arbitrary_property_machine.next(cursor) {
-            MachineState::Idle => self.restart(),
-            MachineState::Done(_) => match cursor.next().into() {
-                // End of arbitrary property, but there is a potential modifier.
-                //
-                // E.g.: `[color:#0088cc]/`
-                //                       ^
-                Class::Slash => {
-                    cursor.advance();
-                    self.parse_modifier(cursor)
-                }
-
-                // End of arbitrary property, but there is an `!`.
-                //
-                // E.g.: `[color:#0088cc]!`
-                //                       ^
-                Class::Exclamation => {
-                    cursor.advance();
-                    self.parse_important(cursor)
-                }
-
-                // End of arbitrary property
-                //
-                // E.g.: `[color:#0088cc]`
-                //                      ^
-                _ => self.done(self.start_pos, cursor),
-            },
-        }
-    }
-
-    fn parse_named_utility(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match self.named_utility_machine.next(cursor) {
-            MachineState::Idle => self.restart(),
-            MachineState::Done(_) => match cursor.next().into() {
-                // End of a named utility, but there is a potential modifier.
-                //
-                // E.g.: `bg-red-500/`
-                //                  ^
-                Class::Slash => {
-                    cursor.advance();
-                    self.parse_modifier(cursor)
-                }
-
-                // End of named utility, but there is an `!`.
-                //
-                // E.g.: `bg-red-500!`
-                //                  ^
-                Class::Exclamation => {
-                    cursor.advance();
-                    self.parse_important(cursor)
-                }
-
-                // End of a named utility
-                //
-                // E.g.: `bg-red-500`
-                //                 ^
-                _ => self.done(self.start_pos, cursor),
-            },
-        }
-    }
-
-    fn parse_modifier(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match self.modifier_machine.next(cursor) {
-            MachineState::Idle => self.restart(),
-            MachineState::Done(_) => match cursor.next().into() {
-                // A modifier followed by a modifier is invalid
-                Class::Slash => self.restart(),
-
-                // A modifier followed by the important marker `!`
-                Class::Exclamation => {
-                    cursor.advance();
-                    self.parse_important(cursor)
-                }
-
-                // Everything else is valid
-                _ => self.done(self.start_pos, cursor),
-            },
-        }
-    }
-
-    fn parse_important(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        // Only the `!` is valid if we didn't start with `!`
-        //
-        // E.g.:
-        //
-        // ```
-        // !bg-red-500!
-        //            ^ invalid because of the first `!`
-        // ```
-        if self.legacy_important {
-            return self.restart();
-        }
-
-        self.done(self.start_pos, cursor)
-    }
-}
-
-#[derive(Debug, Clone, Copy, ClassifyBytes)]
-enum Class {
-    #[bytes(b'!')]
-    Exclamation,
-
-    #[bytes(b'[')]
-    OpenBracket,
-
-    #[bytes(b'/')]
-    Slash,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::UtilityMachine;
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_utility_machine_performance() {
-        let input = r#"<button type="button" class="absolute -top-1 -left-1.5 flex items-center justify-center p-1.5 text-gray-400">"#.repeat(100);
-
-        UtilityMachine::test_throughput(100_000, &input);
-        UtilityMachine::test_duration_once(&input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_utility_extraction() {
-        for (input, expected) in [
-            // Simple utility
-            ("flex", vec!["flex"]),
-            // Simple utility with special character(s)
-            ("@container", vec!["@container"]),
-            // Single character utility
-            ("a", vec!["a"]),
-            // Important utilities
-            ("!flex", vec!["!flex"]),
-            ("flex!", vec!["flex!"]),
-            ("flex! block", vec!["flex!", "block"]),
-            // With dashes
-            ("items-center", vec!["items-center"]),
-            ("items--center", vec!["items--center"]),
-            // Inside a string
-            ("'flex'", vec!["flex"]),
-            // Multiple utilities
-            ("flex items-center", vec!["flex", "items-center"]),
-            // Arbitrary property
-            ("[color:red]", vec!["[color:red]"]),
-            ("![color:red]", vec!["![color:red]"]),
-            ("[color:red]!", vec!["[color:red]!"]),
-            ("[color:red]/20", vec!["[color:red]/20"]),
-            ("![color:red]/20", vec!["![color:red]/20"]),
-            ("[color:red]/20!", vec!["[color:red]/20!"]),
-            // Modifiers
-            ("bg-red-500/20", vec!["bg-red-500/20"]),
-            ("bg-red-500/[20%]", vec!["bg-red-500/[20%]"]),
-            (
-                "bg-red-500/(--my-opacity)",
-                vec!["bg-red-500/(--my-opacity)"],
-            ),
-            // Modifiers with important (legacy)
-            ("!bg-red-500/20", vec!["!bg-red-500/20"]),
-            ("!bg-red-500/[20%]", vec!["!bg-red-500/[20%]"]),
-            (
-                "!bg-red-500/(--my-opacity)",
-                vec!["!bg-red-500/(--my-opacity)"],
-            ),
-            // Modifiers with important
-            ("bg-red-500/20!", vec!["bg-red-500/20!"]),
-            ("bg-red-500/[20%]!", vec!["bg-red-500/[20%]!"]),
-            (
-                "bg-red-500/(--my-opacity)!",
-                vec!["bg-red-500/(--my-opacity)!"],
-            ),
-            // Arbitrary value with bracket notation
-            ("bg-[#0088cc]", vec!["bg-[#0088cc]"]),
-            // Arbitrary value with arbitrary property shorthand modifier
-            (
-                "bg-[#0088cc]/(--my-opacity)",
-                vec!["bg-[#0088cc]/(--my-opacity)"],
-            ),
-            // Arbitrary value with CSS property shorthand
-            ("bg-(--my-color)", vec!["bg-(--my-color)"]),
-            // Multiple utilities including arbitrary property shorthand
-            (
-                "bg-(--my-color) flex px-(--my-padding)",
-                vec!["bg-(--my-color)", "flex", "px-(--my-padding)"],
-            ),
-            // --------------------------------------------------------
-
-            // Exceptions:
-            ("bg-red-500/20/20", vec![]),
-            ("bg-[#0088cc]/20/20", vec![]),
-        ] {
-            for (wrapper, additional) in [
-                // No wrapper
-                ("{}", vec![]),
-                // With leading spaces
-                (" {}", vec![]),
-                // With trailing spaces
-                ("{} ", vec![]),
-                // Surrounded by spaces
-                (" {} ", vec![]),
-                // Inside a string
-                ("'{}'", vec![]),
-                // Inside a function call
-                ("fn('{}')", vec![]),
-                // Inside nested function calls
-                ("fn1(fn2('{}'))", vec!["fn1", "fn2"]),
-                // --------------------------
-                //
-                // HTML
-                // Inside a class (on its own)
-                (r#"<div class="{}"></div>"#, vec!["div", "class"]),
-                // Inside a class (first)
-                (r#"<div class="{} foo"></div>"#, vec!["div", "class", "foo"]),
-                // Inside a class (second)
-                (r#"<div class="foo {}"></div>"#, vec!["div", "class", "foo"]),
-                // Inside a class (surrounded)
-                (
-                    r#"<div class="foo {} bar"></div>"#,
-                    vec!["div", "class", "foo", "bar"],
-                ),
-                // --------------------------
-                //
-                // JavaScript
-                // Inside a variable
-                (r#"let classes = '{}';"#, vec!["let", "classes"]),
-                // Inside an object (key)
-                (
-                    r#"let classes = { '{}': true };"#,
-                    vec!["let", "classes", "true"],
-                ),
-                // Inside an object (no spaces, key)
-                (r#"let classes = {'{}':true};"#, vec!["let", "classes"]),
-                // Inside an object (value)
-                (
-                    r#"let classes = { primary: '{}' };"#,
-                    vec!["let", "classes", "primary"],
-                ),
-                // Inside an object (no spaces, value)
-                (
-                    r#"let classes = {primary:'{}'};"#,
-                    vec!["let", "classes", "primary"],
-                ),
-                // Inside an array
-                (r#"let classes = ['{}'];"#, vec!["let", "classes"]),
-            ] {
-                let input = wrapper.replace("{}", input);
-
-                let mut expected = expected.clone();
-                expected.extend(additional);
-                expected.sort();
-
-                let mut actual = UtilityMachine::test_extract_all(&input);
-                actual.sort();
-
-                if actual != expected {
-                    dbg!(&input);
-                }
-                assert_eq!(actual, expected);
-            }
-        }
-    }
-}
diff --git a/crates/oxide/src/extractor/variant_machine.rs b/crates/oxide/src/extractor/variant_machine.rs
deleted file mode 100644
index 9ec2adc09..000000000
--- a/crates/oxide/src/extractor/variant_machine.rs
+++ /dev/null
@@ -1,146 +0,0 @@
-use crate::cursor;
-use crate::extractor::arbitrary_value_machine::ArbitraryValueMachine;
-use crate::extractor::machine::{Machine, MachineState};
-use crate::extractor::named_variant_machine::NamedVariantMachine;
-use classification_macros::ClassifyBytes;
-
-#[derive(Debug, Default)]
-pub struct VariantMachine {
-    arbitrary_value_machine: ArbitraryValueMachine,
-    named_variant_machine: NamedVariantMachine,
-}
-
-impl Machine for VariantMachine {
-    #[inline(always)]
-    fn reset(&mut self) {}
-
-    #[inline]
-    fn next(&mut self, cursor: &mut cursor::Cursor<'_>) -> MachineState {
-        match cursor.curr().into() {
-            // Start of an arbitrary variant
-            //
-            // E.g.: `[&:hover]:`
-            //        ^
-            Class::OpenBracket => {
-                let start_pos = cursor.pos;
-                match self.arbitrary_value_machine.next(cursor) {
-                    MachineState::Idle => self.restart(),
-                    MachineState::Done(_) => self.parse_arbitrary_end(start_pos, cursor),
-                }
-            }
-
-            // Start of a named variant
-            _ => {
-                let start_pos = cursor.pos;
-                match self.named_variant_machine.next(cursor) {
-                    MachineState::Idle => self.restart(),
-                    MachineState::Done(_) => self.done(start_pos, cursor),
-                }
-            }
-        }
-    }
-}
-
-impl VariantMachine {
-    #[inline(always)]
-    fn parse_arbitrary_end(
-        &mut self,
-        start_pos: usize,
-        cursor: &mut cursor::Cursor<'_>,
-    ) -> MachineState {
-        match cursor.next().into() {
-            // End of an arbitrary value, must be followed by a `:`
-            //
-            // E.g.: `[&:hover]:`
-            //                 ^
-            Class::Colon => {
-                cursor.advance();
-                self.done(start_pos, cursor)
-            }
-
-            // Everything else is invalid
-            _ => self.restart(),
-        }
-    }
-}
-
-#[derive(Debug, Clone, Copy, ClassifyBytes)]
-enum Class {
-    #[bytes(b'[')]
-    OpenBracket,
-
-    #[bytes(b':')]
-    Colon,
-
-    #[fallback]
-    Other,
-}
-
-#[cfg(test)]
-mod tests {
-    use super::VariantMachine;
-    use crate::extractor::machine::Machine;
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    #[ignore]
-    fn test_variant_machine_performance() {
-        let input = r#"<button class="hover:focus:flex data-[state=pending]:[&.in-progress]:flex supports-(--my-variable):flex group-hover/named:not-has-peer-data-disabled:flex">"#;
-
-        VariantMachine::test_throughput(100_000, input);
-        VariantMachine::test_duration_once(input);
-
-        todo!()
-    }
-
-    #[test]
-    fn test_variant_extraction() {
-        for (input, expected) in [
-            // Simple variant
-            ("hover:flex", vec!["hover:"]),
-            // Single character variant
-            ("a:flex", vec!["a:"]),
-            ("*:flex", vec!["*:"]),
-            // With special characters
-            ("**:flex", vec!["**:"]),
-            // With dashes
-            ("data-disabled:flex", vec!["data-disabled:"]),
-            // Multiple variants
-            ("hover:focus:flex", vec!["hover:", "focus:"]),
-            // Arbitrary variant
-            ("[&:hover:focus]:flex", vec!["[&:hover:focus]:"]),
-            // Arbitrary variant with nested brackets
-            (
-                "[&>[data-slot=icon]:last-child]:",
-                vec!["[&>[data-slot=icon]:last-child]:"],
-            ),
-            (
-                "sm:[&>[data-slot=icon]:last-child]:",
-                vec!["sm:", "[&>[data-slot=icon]:last-child]:"],
-            ),
-            (
-                "[:is(italic):is(underline)]:",
-                vec!["[:is(italic):is(underline)]:"],
-            ),
-            // Modifiers
-            ("group-hover/foo:flex", vec!["group-hover/foo:"]),
-            ("group-hover/[.parent]:flex", vec!["group-hover/[.parent]:"]),
-            // Arbitrary variant with bracket notation
-            ("data-[state=pending]:flex", vec!["data-[state=pending]:"]),
-            // Arbitrary variant with CSS property shorthand
-            ("supports-(--my-color):flex", vec!["supports-(--my-color):"]),
-            // -------------------------------------------------------------
-
-            // Exceptions
-            // Empty arbitrary variant is not allowed
-            ("[]:flex", vec![]),
-            // Named variant must be followed by `:`
-            ("hover", vec![]),
-            // Modifier cannot be followed by another modifier. However, we don't check boundary
-            // characters in this state machine so we will get `bar:`.
-            ("group-hover/foo/bar:flex", vec!["bar:"]),
-        ] {
-            assert_eq!(VariantMachine::test_extract_all(input), expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/glob.rs b/crates/oxide/src/glob.rs
deleted file mode 100644
index 9a6296bcb..000000000
--- a/crates/oxide/src/glob.rs
+++ /dev/null
@@ -1,601 +0,0 @@
-use fxhash::{FxHashMap, FxHashSet};
-use std::path::PathBuf;
-use tracing::event;
-
-#[derive(Debug, Clone, PartialEq)]
-pub struct GlobEntry {
-    /// Base path of the glob
-    pub base: String,
-
-    /// Glob pattern
-    pub pattern: String,
-}
-
-pub fn hoist_static_glob_parts(entries: &Vec<GlobEntry>, emit_parent_glob: bool) -> Vec<GlobEntry> {
-    let mut result = vec![];
-
-    for entry in entries {
-        let (static_part, dynamic_part) = split_pattern(&entry.pattern);
-
-        let base: PathBuf = entry.base.clone().into();
-        let base = match static_part {
-            Some(static_part) => base.join(static_part),
-            None => base,
-        };
-
-        let base = match dunce::canonicalize(&base) {
-            Ok(base) => base,
-            Err(err) => {
-                event!(tracing::Level::ERROR, "Failed to resolve glob: {:?}", err);
-                // If we can't resolve the new base on disk, let's just skip this entry.
-                continue;
-            }
-        };
-
-        let pattern = match dynamic_part {
-            Some(dynamic_part) => dynamic_part,
-            None => {
-                if base.is_dir() {
-                    "**/*".to_owned()
-                } else {
-                    "".to_owned()
-                }
-            }
-        };
-
-        // If the base path is a file, then we want to move the file to the pattern, and point the
-        // directory to the base. This is necessary for file watchers that can only listen to
-        // folders.
-        if emit_parent_glob && pattern.is_empty() && base.is_file() {
-            result.push(GlobEntry {
-                // SAFETY: `parent()` will be available because we verify `base` is a file, thus a
-                // parent folder exists.
-                base: base.parent().unwrap().to_string_lossy().to_string(),
-                // SAFETY: `file_name()` will be available because we verify `base` is a file.
-                pattern: base.file_name().unwrap().to_string_lossy().to_string(),
-            });
-        }
-
-        result.push(GlobEntry {
-            base: base.to_string_lossy().to_string(),
-            pattern,
-        });
-    }
-
-    result
-}
-
-/// This function attempts to optimize the glob patterns to improve performance. The problem is
-/// that if you run the following command:
-/// ```sh
-/// tailwind --pwd ./project --content "{pages,components}/**/*.js"
-/// ```
-/// Then the globwalk library will scan every single file and folder in the `./project` folder,
-/// then it will check if the file matches the glob pattern and keep it if it does. This is very
-/// slow, because if you have vendor folders (like node_modules), then this will take a while...
-///
-/// Instead, we will optimize the pattern, and move as many directories as possible to the base
-/// path. This will allow us to scope the globwalk library to only scan the directories that we
-/// care about.
-///
-/// This means, that the following command:
-/// ```sh
-/// tailwind --pwd ./project --content "{pages,components}/**/*.js"
-/// ```
-///
-/// Will now conceptually do this instead behind the scenes:
-/// ```sh
-/// tailwind --pwd ./project/pages --content "**/*.js"
-/// tailwind --pwd ./project/components --content "**/*.js"
-/// ```
-pub fn optimize_patterns(entries: &Vec<GlobEntry>) -> Vec<GlobEntry> {
-    let entries = hoist_static_glob_parts(entries, true);
-
-    // Track all base paths and their patterns. Later we will turn them back into `GlobalEntry`s.
-    let mut pattern_map: FxHashMap<String, FxHashSet<String>> = FxHashMap::default();
-
-    for glob_entry in entries {
-        let entry = pattern_map.entry(glob_entry.base).or_default();
-        entry.insert(glob_entry.pattern.clone());
-    }
-
-    let mut glob_entries = pattern_map
-        .into_iter()
-        .map(|(base, patterns)| {
-            let size = patterns.len();
-
-            let mut patterns = patterns.into_iter();
-
-            GlobEntry {
-                base,
-                pattern: match size {
-                    // SAFETY: we can unwrap here because we know that the size is 1.
-                    1 => patterns.next().unwrap(),
-                    _ => {
-                        let mut patterns = patterns.collect::<Vec<_>>();
-
-                        // Sort the patterns to ensure stable results.
-                        patterns.sort();
-
-                        // TODO: Right now this will generate something like `{**/*.html,**/*.js}`,
-                        // but maybe we want to generate this instead:`**/*.{html,js}`.
-                        format!("{{{}}}", patterns.join(","))
-                    }
-                },
-            }
-        })
-        .collect::<Vec<GlobEntry>>();
-
-    // Sort the entries by base path to ensure we have stable results.
-    glob_entries.sort_by(|a, z| a.base.cmp(&z.base));
-
-    glob_entries
-}
-
-// Split a glob pattern into a `static` and `dynamic` part.
-//
-// Assumption: we assume that all globs are expanded, which means that the only dynamic parts are
-// using `*`.
-//
-// E.g.:
-//
-//  Input:
-//  - `../project-b/**/*.html`
-//  - `../project-b/**/*.js`
-//
-//  Split results in:
-//  - `("../project-b", "**/*.html")`
-//  - `("../project-b", "**/*.js")`
-//
-// A static file glob should also be considered as a dynamic part.
-//
-// E.g.:
-//
-// Input: `../project-b/foo/bar.html`
-// Split results in: `("../project-b/foo", "bar.html")`
-//
-pub fn split_pattern(pattern: &str) -> (Option<String>, Option<String>) {
-    // No dynamic parts, so we can just return the input as-is.
-    if !pattern.contains('*') {
-        return (Some(pattern.to_owned()), None);
-    }
-
-    let mut last_slash_position = None;
-
-    for (i, c) in pattern.char_indices() {
-        if c == '/' {
-            last_slash_position = Some(i);
-        }
-
-        if c == '*' || c == '!' {
-            break;
-        }
-    }
-
-    // Very first character is a `*`, therefore there is no static part, only a dynamic part.
-    let Some(last_slash_position) = last_slash_position else {
-        return (None, Some(pattern.to_owned()));
-    };
-
-    let static_part = pattern[..last_slash_position].to_owned();
-    let dynamic_part = pattern[last_slash_position + 1..].to_owned();
-
-    let static_part = (!static_part.is_empty()).then_some(static_part);
-    let dynamic_part = (!dynamic_part.is_empty()).then_some(dynamic_part);
-
-    (static_part, dynamic_part)
-}
-
-#[cfg(test)]
-mod tests {
-    use super::optimize_patterns;
-    use crate::GlobEntry;
-    use bexpand::Expression;
-    use pretty_assertions::assert_eq;
-    use std::process::Command;
-    use std::{fs, path};
-    use tempfile::tempdir;
-
-    fn create_folders(folders: &[&str]) -> String {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Initialize this directory as a git repository
-        let _ = Command::new("git").arg("init").current_dir(&dir).output();
-
-        // Create the necessary files
-        for path in folders {
-            // Ensure we use the right path separator for the current platform
-            let path = dir.join(path.replace('/', path::MAIN_SEPARATOR.to_string().as_str()));
-            let parent = path.parent().unwrap();
-            if !parent.exists() {
-                fs::create_dir_all(parent).unwrap();
-            }
-
-            fs::write(path, "").unwrap();
-        }
-
-        let base = format!("{}", dir.display());
-
-        base
-    }
-
-    fn test(base: &str, sources: &[GlobEntry]) -> Vec<GlobEntry> {
-        // Resolve all content paths for the (temporary) current working directory
-        let sources: Vec<GlobEntry> = sources
-            .iter()
-            .map(|x| GlobEntry {
-                base: format!("{}{}", base, x.base),
-                pattern: x.pattern.clone(),
-            })
-            .collect();
-
-        // Expand glob patterns into multiple `GlobEntry`s.
-        let sources = sources
-            .iter()
-            .flat_map(|source| {
-                let expression: Result<Expression, _> = source.pattern[..].try_into();
-                let Ok(expression) = expression else {
-                    return vec![source.clone()];
-                };
-
-                expression
-                    .into_iter()
-                    .filter_map(Result::ok)
-                    .map(move |pattern| GlobEntry {
-                        base: source.base.clone(),
-                        pattern: pattern.into(),
-                    })
-                    .collect::<Vec<_>>()
-            })
-            .collect::<Vec<_>>();
-
-        let optimized_sources = optimize_patterns(&sources);
-
-        let parent_dir =
-            format!("{}{}", dunce::canonicalize(base).unwrap().display(), "/").replace('\\', "/");
-
-        // Remove the temporary directory from the base
-        optimized_sources
-            .into_iter()
-            .map(|source| {
-                GlobEntry {
-                    // Normalize paths to use unix style separators
-                    base: source.base.replace('\\', "/").replace(&parent_dir, "/"),
-                    pattern: source.pattern,
-                }
-            })
-            .collect()
-    }
-
-    #[test]
-    fn it_should_keep_globs_that_start_with_file_wildcards_as_is() {
-        let base = create_folders(&["projects"]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![GlobEntry {
-            base: "/projects".to_string(),
-            pattern: "*.html".to_string(),
-        }];
-
-        assert_eq!(actual, expected);
-    }
-
-    #[test]
-    fn it_should_keep_globs_that_start_with_folder_wildcards_as_is() {
-        let base = create_folders(&["projects"]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "**/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![GlobEntry {
-            base: "/projects".to_string(),
-            pattern: "**/*.html".to_string(),
-        }];
-
-        assert_eq!(actual, expected,);
-    }
-
-    #[test]
-    fn it_should_move_the_starting_folder_to_the_path() {
-        let base = create_folders(&["projects/example"]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "example/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![GlobEntry {
-            base: "/projects/example".to_string(),
-            pattern: "*.html".to_string(),
-        }];
-
-        assert_eq!(actual, expected,);
-    }
-
-    #[test]
-    fn it_should_move_the_starting_folders_to_the_path() {
-        let base = create_folders(&["projects/example/other"]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "example/other/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![GlobEntry {
-            base: "/projects/example/other".to_string(),
-            pattern: "*.html".to_string(),
-        }];
-
-        assert_eq!(actual, expected,);
-    }
-
-    #[test]
-    fn it_should_branch_expandable_folders() {
-        let base = create_folders(&["projects/foo", "projects/bar"]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "{foo,bar}/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![
-            GlobEntry {
-                base: "/projects/bar".to_string(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/foo".to_string(),
-                pattern: "*.html".to_string(),
-            },
-        ];
-
-        assert_eq!(actual, expected,);
-    }
-
-    #[test]
-    fn it_should_expand_multiple_expansions_in_the_same_folder() {
-        let base = create_folders(&[
-            "projects/a-b-d-e-g",
-            "projects/a-b-d-f-g",
-            "projects/a-c-d-e-g",
-            "projects/a-c-d-f-g",
-        ]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "a-{b,c}-d-{e,f}-g/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![
-            GlobEntry {
-                base: "/projects/a-b-d-e-g".to_string(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-b-d-f-g".to_string(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-d-e-g".to_string(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-d-f-g".to_string(),
-                pattern: "*.html".to_string(),
-            },
-        ];
-
-        assert_eq!(actual, expected,);
-    }
-
-    #[test]
-    fn multiple_expansions_per_folder_starting_at_the_root() {
-        let base = create_folders(&[
-            "projects/a-c-d-f/b-d-e-g",
-            "projects/a-c-d-f/b-d-f-g",
-            "projects/a-c-d-f/c-d-e-g",
-            "projects/a-c-d-f/c-d-f-g",
-            "projects/a-c-e-f/b-d-e-g",
-            "projects/a-c-e-f/b-d-f-g",
-            "projects/a-c-e-f/c-d-e-g",
-            "projects/a-c-e-f/c-d-f-g",
-            "projects/b-c-d-f/b-d-e-g",
-            "projects/b-c-d-f/b-d-f-g",
-            "projects/b-c-d-f/c-d-e-g",
-            "projects/b-c-d-f/c-d-f-g",
-            "projects/b-c-e-f/b-d-e-g",
-            "projects/b-c-e-f/b-d-f-g",
-            "projects/b-c-e-f/c-d-e-g",
-            "projects/b-c-e-f/c-d-f-g",
-        ]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "{a,b}-c-{d,e}-f/{b,c}-d-{e,f}-g/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![
-            GlobEntry {
-                base: "/projects/a-c-d-f/b-d-e-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-d-f/b-d-f-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-d-f/c-d-e-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-d-f/c-d-f-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-e-f/b-d-e-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-e-f/b-d-f-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-e-f/c-d-e-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a-c-e-f/c-d-f-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/b-c-d-f/b-d-e-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/b-c-d-f/b-d-f-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/b-c-d-f/c-d-e-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/b-c-d-f/c-d-f-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/b-c-e-f/b-d-e-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/b-c-e-f/b-d-f-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/b-c-e-f/c-d-e-g".into(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/b-c-e-f/c-d-f-g".into(),
-                pattern: "*.html".to_string(),
-            },
-        ];
-
-        assert_eq!(actual, expected,);
-    }
-
-    #[test]
-    fn it_should_stop_expanding_once_we_hit_a_wildcard() {
-        let base = create_folders(&["projects/bar/example", "projects/foo/example"]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "{foo,bar}/example/**/{baz,qux}/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![
-            GlobEntry {
-                base: "/projects/bar/example".to_string(),
-                pattern: "{**/baz/*.html,**/qux/*.html}".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/foo/example".to_string(),
-                pattern: "{**/baz/*.html,**/qux/*.html}".to_string(),
-            },
-        ];
-
-        assert_eq!(actual, expected,);
-    }
-
-    #[test]
-    fn it_should_keep_the_negation_symbol_for_all_new_patterns() {
-        let base = create_folders(&["projects"]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "!{foo,bar}/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![GlobEntry {
-            base: "/projects".to_string(),
-            // TODO: This is wrong, because `!` should be in front. But right now we don't support
-            // `@source "!../foo/bar";` anyway.
-            pattern: "{!bar/*.html,!foo/*.html}".to_string(),
-        }];
-
-        assert_eq!(actual, expected,);
-    }
-
-    #[test]
-    fn it_should_expand_a_complex_example() {
-        let base = create_folders(&[
-            "projects/a/b/d/e/g",
-            "projects/a/b/d/f/g",
-            "projects/a/c/d/e/g",
-            "projects/a/c/d/f/g",
-        ]);
-
-        let actual = test(
-            &base,
-            &[GlobEntry {
-                base: "/projects".to_string(),
-                pattern: "a/{b,c}/d/{e,f}/g/*.html".to_string(),
-            }],
-        );
-
-        let expected = vec![
-            GlobEntry {
-                base: "/projects/a/b/d/e/g".to_string(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a/b/d/f/g".to_string(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a/c/d/e/g".to_string(),
-                pattern: "*.html".to_string(),
-            },
-            GlobEntry {
-                base: "/projects/a/c/d/f/g".to_string(),
-                pattern: "*.html".to_string(),
-            },
-        ];
-
-        assert_eq!(actual, expected,);
-    }
-}
diff --git a/crates/oxide/src/lib.rs b/crates/oxide/src/lib.rs
deleted file mode 100644
index d7f0321af..000000000
--- a/crates/oxide/src/lib.rs
+++ /dev/null
@@ -1,12 +0,0 @@
-pub mod cursor;
-pub mod extractor;
-pub mod fast_skip;
-pub mod glob;
-pub mod paths;
-pub mod scanner;
-pub mod throughput;
-
-pub use glob::GlobEntry;
-pub use scanner::sources::PublicSourceEntry;
-pub use scanner::ChangedContent;
-pub use scanner::Scanner;
diff --git a/crates/oxide/src/main.rs b/crates/oxide/src/main.rs
deleted file mode 100644
index 1fa2918af..000000000
--- a/crates/oxide/src/main.rs
+++ /dev/null
@@ -1,65 +0,0 @@
-use std::hint::black_box;
-use tailwindcss_oxide::cursor::Cursor;
-use tailwindcss_oxide::extractor::machine::{Machine, MachineState};
-use tailwindcss_oxide::extractor::{Extracted, Extractor};
-use tailwindcss_oxide::throughput::Throughput;
-
-fn run_full_extractor(input: &[u8]) -> Vec<&[u8]> {
-    Extractor::new(input)
-        .extract()
-        .into_iter()
-        .map(|x| match x {
-            Extracted::Candidate(bytes) => bytes,
-            Extracted::CssVariable(bytes) => bytes,
-        })
-        .collect::<Vec<_>>()
-}
-
-fn _run_machine<T: Machine>(input: &[u8]) -> Vec<&[u8]> {
-    let len = input.len();
-    let mut machine = T::default();
-    let mut cursor = Cursor::new(input);
-    let mut result = Vec::with_capacity(25);
-
-    while cursor.pos < len {
-        if let MachineState::Done(span) = machine.next(&mut cursor) {
-            result.push(span.slice(input));
-        }
-
-        cursor.advance();
-    }
-
-    result
-}
-
-fn run(input: &[u8]) -> Vec<&[u8]> {
-    // _run_machine::<tailwindcss_oxide::extractor::arbitrary_property_machine::ArbitraryPropertyMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::arbitrary_value_machine::ArbitraryValueMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::arbitrary_variable_machine::ArbitraryVariableMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::candidate_machine::CandidateMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::css_variable_machine::CssVariableMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::modifier_machine::ModifierMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::named_utility_machine::NamedUtilityMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::named_variant_machine::NamedVariantMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::string_machine::StringMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::utility_machine::UtilityMachine>(input)
-    // _run_machine::<tailwindcss_oxide::extractor::variant_machine::VariantMachine>(input)
-
-    run_full_extractor(input)
-}
-
-fn main() {
-    let iterations = 10_000;
-    let input = include_bytes!("./fixtures/example.html");
-
-    let throughput = Throughput::compute(iterations, input.len(), || {
-        _ = black_box(
-            input
-                .split(|x| *x == b'\n')
-                .flat_map(run)
-                .collect::<Vec<_>>(),
-        );
-    });
-
-    eprintln!("Extractor: {:}", throughput);
-}
diff --git a/crates/oxide/src/paths.rs b/crates/oxide/src/paths.rs
deleted file mode 100644
index ca3b345be..000000000
--- a/crates/oxide/src/paths.rs
+++ /dev/null
@@ -1,65 +0,0 @@
-use std::fmt::Display;
-use std::io;
-use std::path;
-
-#[derive(Clone)]
-pub struct Path {
-    inner: path::PathBuf,
-}
-
-impl From<path::PathBuf> for Path {
-    fn from(value: path::PathBuf) -> Self {
-        Self { inner: value }
-    }
-}
-
-impl From<String> for Path {
-    fn from(value: String) -> Self {
-        Self {
-            inner: value.into(),
-        }
-    }
-}
-
-impl From<&str> for Path {
-    fn from(value: &str) -> Self {
-        Self {
-            inner: value.into(),
-        }
-    }
-}
-
-impl Display for Path {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(
-            f,
-            "{}",
-            format!("{}", self.inner.display()).replace('\\', "/")
-        )
-    }
-}
-
-impl Path {
-    pub fn trim_prefix(&self, prefix: String) -> Self {
-        let prefix = prefix.replace('\\', "/");
-        let my_path = self.to_string();
-
-        if let Some(str) = my_path.strip_prefix(&prefix) {
-            return str.into();
-        }
-
-        my_path.into()
-    }
-
-    pub fn join(&self, component: &str) -> Self {
-        if component.is_empty() {
-            return self.clone();
-        }
-
-        self.inner.join(component).into()
-    }
-
-    pub fn canonicalize(&self) -> io::Result<Self> {
-        Ok(dunce::canonicalize(&self.inner)?.into())
-    }
-}
diff --git a/crates/oxide/src/scanner/auto_source_detection.rs b/crates/oxide/src/scanner/auto_source_detection.rs
deleted file mode 100644
index 0d723a1ab..000000000
--- a/crates/oxide/src/scanner/auto_source_detection.rs
+++ /dev/null
@@ -1,71 +0,0 @@
-use ignore::gitignore::{Gitignore, GitignoreBuilder};
-use std::sync;
-
-/// All the default rules for auto source detection.
-///
-/// This includes:
-///
-/// - Ignoring common content directories like `.git` and `node_modules`
-/// - Ignoring file extensions we definitely don't want to include like `.css` and `.scss`
-/// - Ignoring common binary file extensions like `.png` and `.jpg`
-/// - Ignoring common files like `yarn.lock` and `package-lock.json`
-///
-pub static RULES: sync::LazyLock<Vec<Gitignore>> = sync::LazyLock::new(|| {
-    let mut builder = GitignoreBuilder::new("");
-
-    builder.add_line(None, &IGNORED_CONTENT_DIRS_GLOB).unwrap();
-    builder.add_line(None, &IGNORED_EXTENSIONS_GLOB).unwrap();
-    builder.add_line(None, &IGNORED_FILES_GLOB).unwrap();
-
-    // Ensure these rules do not match on folder names
-    let mut file_only_builder = GitignoreBuilder::new("");
-    file_only_builder
-        .only_on_files(true)
-        .add_line(None, &BINARY_EXTENSIONS_GLOB)
-        .unwrap();
-
-    vec![builder.build().unwrap(), file_only_builder.build().unwrap()]
-});
-
-pub static IGNORED_CONTENT_DIRS: sync::LazyLock<Vec<&'static str>> = sync::LazyLock::new(|| {
-    include_str!("fixtures/ignored-content-dirs.txt")
-        .trim()
-        .lines()
-        .collect()
-});
-
-static IGNORED_CONTENT_DIRS_GLOB: sync::LazyLock<String> =
-    sync::LazyLock::new(|| format!("{{{}}}/", IGNORED_CONTENT_DIRS.join(",")));
-
-static IGNORED_EXTENSIONS_GLOB: sync::LazyLock<String> = sync::LazyLock::new(|| {
-    format!(
-        "*.{{{}}}",
-        include_str!("fixtures/ignored-extensions.txt")
-            .trim()
-            .lines()
-            .collect::<Vec<&str>>()
-            .join(",")
-    )
-});
-
-pub static BINARY_EXTENSIONS_GLOB: sync::LazyLock<String> = sync::LazyLock::new(|| {
-    format!(
-        "*.{{{}}}",
-        include_str!("fixtures/binary-extensions.txt")
-            .trim()
-            .lines()
-            .collect::<Vec<&str>>()
-            .join(",")
-    )
-});
-
-static IGNORED_FILES_GLOB: sync::LazyLock<String> = sync::LazyLock::new(|| {
-    format!(
-        "{{{}}}",
-        include_str!("fixtures/ignored-files.txt")
-            .trim()
-            .lines()
-            .collect::<Vec<&str>>()
-            .join(",")
-    )
-});
diff --git a/crates/oxide/src/scanner/detect_sources.rs b/crates/oxide/src/scanner/detect_sources.rs
deleted file mode 100644
index 6cfdd49cc..000000000
--- a/crates/oxide/src/scanner/detect_sources.rs
+++ /dev/null
@@ -1,160 +0,0 @@
-use crate::scanner::auto_source_detection::IGNORED_CONTENT_DIRS;
-use crate::GlobEntry;
-use fxhash::FxHashSet;
-use globwalk::DirEntry;
-use std::cmp::Ordering;
-use std::path::PathBuf;
-use std::sync;
-use walkdir::WalkDir;
-
-static KNOWN_EXTENSIONS: sync::LazyLock<Vec<&'static str>> = sync::LazyLock::new(|| {
-    include_str!("fixtures/template-extensions.txt")
-        .trim()
-        .lines()
-        // Drop commented lines
-        .filter(|x| !x.starts_with('#'))
-        // Drop empty lines
-        .filter(|x| !x.is_empty())
-        .collect()
-});
-
-// Sorting to make sure that we always see the directories before the files. Also sorting
-// alphabetically by default.
-fn sort_by_dir_and_name(a: &DirEntry, z: &DirEntry) -> Ordering {
-    match (a.file_type().is_dir(), z.file_type().is_dir()) {
-        (true, false) => Ordering::Less,
-        (false, true) => Ordering::Greater,
-        _ => a.file_name().cmp(z.file_name()),
-    }
-}
-
-pub fn resolve_globs(
-    base: PathBuf,
-    dirs: &FxHashSet<PathBuf>,
-    extensions: &FxHashSet<String>,
-) -> Vec<GlobEntry> {
-    // A list of known extensions + a list of extensions we found in the project.
-    let mut found_extensions: FxHashSet<String> =
-        FxHashSet::from_iter(KNOWN_EXTENSIONS.iter().map(|x| x.to_string()));
-    found_extensions.extend(extensions.iter().cloned());
-
-    // A list of directory names where we can't use globs, but we should track each file
-    // individually instead. This is because these directories are often used for both source and
-    // destination files.
-    let forced_static_directories: FxHashSet<PathBuf> =
-        FxHashSet::from_iter(vec![base.join("public")]);
-
-    // All directories where we can safely use deeply nested globs to watch all files.
-    // In other comments we refer to these as "deep glob directories" or similar.
-    //
-    // E.g.: `./src/**/*.{html,js}`
-    let mut deep_globable_directories: FxHashSet<PathBuf> = Default::default();
-
-    // All directories where we can only use shallow globs to watch all direct files but not
-    // folders.
-    // In other comments we refer to these as "shallow glob directories" or similar.
-    //
-    // E.g.: `./src/*/*.{html,js}`
-    let mut shallow_globable_directories: FxHashSet<PathBuf> = Default::default();
-
-    // Collect all valid paths from the root. This will already filter out ignored files, unknown
-    // extensions and binary files.
-    let mut it = WalkDir::new(&base)
-        .sort_by(sort_by_dir_and_name)
-        .into_iter();
-
-    // Figure out all the shallow globable directories.
-    while let Some(Ok(entry)) = it.next() {
-        let path = entry.path();
-        if !path.is_dir() {
-            continue;
-        }
-
-        if !dirs.contains(path) {
-            let mut path = path;
-            while let Some(parent) = path.parent() {
-                if parent == base {
-                    break;
-                }
-
-                shallow_globable_directories.insert(parent.to_path_buf());
-                path = parent
-            }
-
-            it.skip_current_dir();
-        }
-    }
-
-    // Figure out all the deep globable directories.
-    let mut it = WalkDir::new(&base)
-        .sort_by(sort_by_dir_and_name)
-        .into_iter();
-
-    while let Some(Ok(entry)) = it.next() {
-        let path = entry.path();
-        if path.is_file() {
-            continue;
-        }
-
-        if path == base {
-            continue;
-        }
-
-        if IGNORED_CONTENT_DIRS
-            .iter()
-            .any(|dir| match path.file_name() {
-                Some(name) => name == *dir,
-                None => false,
-            })
-        {
-            it.skip_current_dir();
-            continue;
-        }
-
-        if !dirs.contains(path) {
-            it.skip_current_dir();
-            continue;
-        }
-
-        // Already marked as a shallow globable directory.
-        if shallow_globable_directories.contains(path) {
-            continue;
-        }
-
-        if forced_static_directories.contains(path) {
-            it.skip_current_dir();
-            continue;
-        }
-
-        // Track deep globable directories.
-        deep_globable_directories.insert(path.to_path_buf());
-        it.skip_current_dir();
-    }
-
-    let mut extension_list = found_extensions.clone().into_iter().collect::<Vec<_>>();
-
-    extension_list.sort();
-
-    let extension_list = extension_list.join(",");
-
-    // Build the globs for all globable directories.
-    let shallow_globs = shallow_globable_directories.iter().map(|path| GlobEntry {
-        base: path.display().to_string(),
-        pattern: format!("*/*.{{{}}}", extension_list),
-    });
-
-    let deep_globs = deep_globable_directories.iter().map(|path| GlobEntry {
-        base: path.display().to_string(),
-        pattern: format!("**/*.{{{}}}", extension_list),
-    });
-
-    shallow_globs
-        .chain(deep_globs)
-        // Insert a glob for the base path, so we can see new files/folders in the directory
-        // itself
-        .chain(vec![GlobEntry {
-            base: base.to_string_lossy().into(),
-            pattern: "*".into(),
-        }])
-        .collect::<Vec<_>>()
-}
diff --git a/crates/oxide/src/scanner/fixtures/ignored-content-dirs.txt b/crates/oxide/src/scanner/fixtures/ignored-content-dirs.txt
deleted file mode 100644
index 79f01ecc1..000000000
--- a/crates/oxide/src/scanner/fixtures/ignored-content-dirs.txt
+++ /dev/null
@@ -1,15 +0,0 @@
-.git
-.hg
-.jj
-.next
-.parcel-cache
-.pnpm-store
-.svelte-kit
-.svn
-.turbo
-.venv
-.vercel
-.yarn
-__pycache__
-node_modules
-venv
diff --git a/crates/oxide/src/scanner/init_tracing.rs b/crates/oxide/src/scanner/init_tracing.rs
deleted file mode 100644
index dd4c1d071..000000000
--- a/crates/oxide/src/scanner/init_tracing.rs
+++ /dev/null
@@ -1,102 +0,0 @@
-use std::fs::OpenOptions;
-use std::io::{self, Write};
-use std::path::Path;
-use std::sync::{self, Arc, Mutex};
-use tracing_subscriber::fmt::writer::BoxMakeWriter;
-
-pub static SHOULD_TRACE: sync::LazyLock<bool> = sync::LazyLock::new(
-    || matches!(std::env::var("DEBUG"), Ok(value) if value.eq("*") || (value.contains("tailwindcss:oxide") && !value.contains("-tailwindcss:oxide"))),
-);
-
-fn dim(input: &str) -> String {
-    format!("\u{001b}[2m{input}\u{001b}[22m")
-}
-
-fn blue(input: &str) -> String {
-    format!("\u{001b}[34m{input}\u{001b}[39m")
-}
-
-fn highlight(input: &str) -> String {
-    format!("{}{}{}", dim(&blue("`")), blue(input), dim(&blue("`")))
-}
-
-struct MutexWriter(Arc<Mutex<std::fs::File>>);
-
-impl Write for MutexWriter {
-    fn write(&mut self, buf: &[u8]) -> io::Result<usize> {
-        self.0.lock().unwrap().write(buf)
-    }
-
-    fn flush(&mut self) -> io::Result<()> {
-        self.0.lock().unwrap().flush()
-    }
-}
-
-pub fn init_tracing() {
-    if !*SHOULD_TRACE {
-        return;
-    }
-
-    let root = Path::new(".tailwindcss");
-    let logs_dir = root.join("logs");
-    if let Err(err) = std::fs::create_dir_all(&logs_dir) {
-        eprintln!(
-            "{} Failed to create {}, skipping debug logs ({err})",
-            dim("[DEBUG]"),
-            highlight(&logs_dir.display().to_string())
-        );
-        return;
-    }
-
-    // Ensure everything inside `.tailwindcss/` is ignored by git. The file is only created if it
-    // doesn't exist yet, an existing `.gitignore` is left untouched.
-    if let Ok(mut file) = std::fs::File::create_new(root.join(".gitignore")) {
-        _ = file.write_all(b"*\n");
-    }
-
-    let file_path = logs_dir.join(format!(
-        "scanner-{}-{}.log",
-        std::time::SystemTime::now()
-            .duration_since(std::time::UNIX_EPOCH)
-            .map(|d| d.as_millis())
-            .unwrap_or(0),
-        std::process::id()
-    ));
-    let file = match OpenOptions::new()
-        .create(true)
-        .append(true)
-        .open(&file_path)
-    {
-        Ok(file) => file,
-        Err(err) => {
-            eprintln!(
-                "{} Failed to create {}, skipping debug logs ({err})",
-                dim("[DEBUG]"),
-                highlight(&file_path.display().to_string())
-            );
-            return;
-        }
-    };
-
-    let absolute_file_path = dunce::canonicalize(&file_path).unwrap_or_else(|_| file_path.clone());
-    eprintln!(
-        "{} Writing debug info to: {}\n",
-        dim("[DEBUG]"),
-        highlight(&absolute_file_path.display().to_string())
-    );
-
-    let file = Arc::new(Mutex::new(file));
-
-    let writer: BoxMakeWriter = BoxMakeWriter::new({
-        let file = file.clone();
-        move || Box::new(MutexWriter(file.clone())) as Box<dyn Write + Send>
-    });
-
-    _ = tracing_subscriber::fmt()
-        .with_max_level(tracing::Level::INFO)
-        .with_span_events(tracing_subscriber::fmt::format::FmtSpan::ACTIVE)
-        .with_writer(writer)
-        .with_ansi(false)
-        .compact()
-        .try_init();
-}
diff --git a/crates/oxide/src/scanner/mod.rs b/crates/oxide/src/scanner/mod.rs
deleted file mode 100644
index b7da9aa17..000000000
--- a/crates/oxide/src/scanner/mod.rs
+++ /dev/null
@@ -1,952 +0,0 @@
-pub mod auto_source_detection;
-pub mod detect_sources;
-pub mod init_tracing;
-pub mod sources;
-
-use crate::extractor::{Extracted, Extractor};
-use crate::glob::optimize_patterns;
-use crate::scanner::detect_sources::resolve_globs;
-use crate::scanner::sources::{
-    public_source_entries_to_private_source_entries, PublicSourceEntry, SourceEntry, Sources,
-};
-use crate::GlobEntry;
-use auto_source_detection::BINARY_EXTENSIONS_GLOB;
-use bstr::ByteSlice;
-use fast_glob::glob_match;
-use fxhash::{FxHashMap, FxHashSet};
-use ignore::{gitignore::GitignoreBuilder, WalkBuilder};
-use init_tracing::{init_tracing, SHOULD_TRACE};
-use rayon::prelude::*;
-use std::path::{Path, PathBuf};
-use std::sync::{Arc, Mutex};
-use std::time::SystemTime;
-use tracing::event;
-
-// @source "some/folder";               // This is auto source detection
-// @source "some/folder/**/*";          // This is auto source detection
-// @source "some/folder/*.html";        // This is just a glob, but new files matching this should be included
-// @source "node_modules/my-ui-lib";    // Auto source detection but since node_modules is explicit we allow it
-//                                      // Maybe could be considered `external(…)` automatically if:
-//                                      // 1. It's git ignored but listed explicitly
-//                                      // 2. It exists outside of the current working directory (do we know that?)
-//
-// @source "do-include-me.bin";         // `.bin` is typically ignored, but now it's explicit so should be included
-// @source "git-ignored.html";          // A git ignored file that is listed explicitly, should be scanned
-
-#[derive(Debug, Clone)]
-pub enum ChangedContent {
-    File(PathBuf, String),
-    Content(String, String),
-}
-
-#[derive(Debug, Clone)]
-pub struct ScanOptions {
-    /// Base path to start scanning from
-    pub base: Option<String>,
-
-    /// Glob sources
-    pub sources: Vec<GlobEntry>,
-}
-
-#[derive(Debug, Clone)]
-pub struct ScanResult {
-    pub candidates: Vec<String>,
-    pub files: Vec<String>,
-    pub globs: Vec<GlobEntry>,
-}
-
-#[derive(Debug, Clone, Default)]
-pub struct Scanner {
-    /// Content sources
-    sources: Sources,
-
-    /// The walker to detect all files that we have to scan
-    walker: Option<WalkBuilder>,
-
-    /// All found extensions
-    extensions: FxHashSet<String>,
-
-    /// All files that we have to scan
-    files: FxHashSet<PathBuf>,
-
-    /// All directories, sub-directories, etc… we saw during source detection
-    dirs: FxHashSet<PathBuf>,
-
-    /// All generated globs, used for setting up watchers
-    globs: Option<Vec<GlobEntry>>,
-
-    /// Track unique set of candidates
-    candidates: FxHashSet<String>,
-
-    /// Track mtimes for files so incremental scans can skip unchanged files.
-    mtimes: FxHashMap<PathBuf, SystemTime>,
-
-    /// Files that were scanned during the last `scan()` call.
-    scanned_files: Vec<String>,
-
-    /// Whether we've completed at least one full scan. When false, we skip
-    /// mtime tracking entirely so the initial build stays fast.
-    has_scanned_once: bool,
-
-    /// Whether sources have been scanned since the last `scan()` call
-    sources_scanned: bool,
-}
-
-impl Scanner {
-    pub fn new(sources: Vec<PublicSourceEntry>) -> Self {
-        init_tracing();
-
-        if *SHOULD_TRACE {
-            event!(tracing::Level::INFO, "Provided sources:");
-            for source in &sources {
-                event!(tracing::Level::INFO, "Source: {:?}", source);
-            }
-        }
-
-        let sources = Sources::new(public_source_entries_to_private_source_entries(sources));
-        if *SHOULD_TRACE {
-            event!(tracing::Level::INFO, "Optimized sources:");
-            for source in sources.iter() {
-                event!(tracing::Level::INFO, "Source: {:?}", source);
-            }
-        }
-
-        let walker = create_walker(&sources);
-
-        Self {
-            sources,
-            walker,
-            ..Default::default()
-        }
-    }
-
-    pub fn scan(&mut self) -> Vec<String> {
-        self.sources_scanned = false;
-
-        let (scanned_blobs, css_files, files) = self.discover_sources();
-
-        self.extract_candidates(scanned_blobs, css_files);
-        self.scanned_files = files;
-
-        // Return all candidates sorted
-        let mut result = self.candidates.iter().cloned().collect::<Vec<_>>();
-        result.par_sort_unstable();
-        result
-    }
-
-    #[tracing::instrument(skip_all)]
-    pub fn scan_content(&mut self, changed_content: Vec<ChangedContent>) -> Vec<String> {
-        let (changed_files, changed_contents) =
-            changed_content
-                .into_iter()
-                .partition::<Vec<_>, _>(|x| match x {
-                    ChangedContent::File(_, _) => true,
-                    ChangedContent::Content(_, _) => false,
-                });
-
-        // Raw content can be parsed directly, no need to verify if the file exists and is allowed
-        // to be scanned.
-        let mut content_to_scan: Vec<ChangedContent> = changed_contents;
-
-        // Fully resolve all files
-        let changed_files = changed_files
-            .into_iter()
-            .filter_map(|changed_content| match changed_content {
-                ChangedContent::File(file, extension) => {
-                    let Ok(file) = dunce::canonicalize(file) else {
-                        return None;
-                    };
-                    Some(ChangedContent::File(file, extension))
-                }
-                _ => unreachable!(),
-            })
-            .collect::<Vec<_>>();
-
-        let (known_files, mut new_unknown_files) = changed_files
-            .into_iter()
-            .partition::<Vec<_>, _>(|changed_file| match changed_file {
-                ChangedContent::Content(_, _) => unreachable!(),
-                ChangedContent::File(file, _) => self.files.contains(file),
-            });
-
-        // All known files are allowed to be scanned
-        content_to_scan.extend(known_files);
-
-        // Figure out if the new unknown files are allowed to be scanned
-        if !new_unknown_files.is_empty() {
-            if let Some(walk_builder) = &mut self.walker {
-                for entry in walk_builder.build().filter_map(Result::ok) {
-                    let path = entry.path();
-                    if !path.is_file() {
-                        continue;
-                    }
-
-                    // The walked path can contain symlinks, while the changed files have already
-                    // been canonicalized. Lazily canonicalize the walked path so we can compare
-                    // the real paths as well.
-                    let mut canonical_path: Option<PathBuf> = None;
-
-                    let mut drop_file_indexes = vec![];
-                    for (idx, changed_file) in new_unknown_files.iter().enumerate().rev() {
-                        let ChangedContent::File(file, _) = changed_file else {
-                            continue;
-                        };
-
-                        // When the file is found on disk it means that all the rules pass. We can
-                        // extract the current file and remove it from the list of passed in files.
-                        let matches = file == path
-                            || (file.file_name() == path.file_name() && {
-                                if canonical_path.is_none() {
-                                    canonical_path = dunce::canonicalize(path).ok();
-                                }
-                                canonical_path.as_deref() == Some(file.as_path())
-                            });
-
-                        if matches {
-                            self.files.insert(path.to_path_buf()); // Track for future use
-                            content_to_scan.push(changed_file.clone()); // Track for parsing
-                            drop_file_indexes.push(idx);
-                        }
-                    }
-
-                    // Remove all files that we found on disk
-                    if !drop_file_indexes.is_empty() {
-                        drop_file_indexes.into_iter().for_each(|idx| {
-                            new_unknown_files.remove(idx);
-                        });
-                    }
-
-                    // We can stop walking the file system if all files we are interested in have
-                    // been found.
-                    if new_unknown_files.is_empty() {
-                        break;
-                    }
-                }
-            }
-        }
-
-        // Read all content into blobs for extraction
-        let blobs = read_all_files(content_to_scan);
-        self.extract_candidates(blobs, vec![])
-    }
-
-    #[tracing::instrument(skip_all)]
-    fn extract_candidates(&mut self, blobs: Vec<Vec<u8>>, css_files: Vec<PathBuf>) -> Vec<String> {
-        // Extract all candidates from the pre-read blobs
-        let mut new_candidates = parse_all_blobs(blobs);
-
-        // Extract all CSS variables from the CSS files
-        if !css_files.is_empty() {
-            let css_variables = extract_css_variables(read_all_files(
-                css_files
-                    .into_iter()
-                    .map(|file| ChangedContent::File(file, "css".into()))
-                    .collect(),
-            ));
-
-            new_candidates.extend(css_variables);
-        }
-
-        // Only keep candidates we haven't seen before
-        for existing in self.candidates.iter() {
-            new_candidates.remove(existing);
-        }
-
-        // Track new candidates for subsequent calls
-        self.candidates.extend(new_candidates.iter().cloned());
-
-        let mut result: Vec<String> = new_candidates.into_iter().collect();
-        result.par_sort_unstable();
-
-        result
-    }
-
-    #[tracing::instrument(skip_all)]
-    pub fn get_files(&mut self) -> Vec<String> {
-        let _ = self.discover_sources();
-
-        self.files
-            .par_iter()
-            .filter_map(|x| x.clone().into_os_string().into_string().ok())
-            .collect()
-    }
-
-    #[tracing::instrument(skip_all)]
-    pub fn get_scanned_files(&self) -> Vec<String> {
-        self.scanned_files.clone()
-    }
-
-    #[tracing::instrument(skip_all)]
-    pub fn get_globs(&mut self) -> Vec<GlobEntry> {
-        if let Some(globs) = &self.globs {
-            return globs.clone();
-        }
-
-        let _ = self.discover_sources();
-
-        let mut globs = vec![];
-        for source in self.sources.iter() {
-            match source {
-                SourceEntry::Auto { base } | SourceEntry::External { base } => {
-                    globs.extend(resolve_globs(
-                        base.to_path_buf(),
-                        &self.dirs,
-                        &self.extensions,
-                    ));
-                }
-                SourceEntry::Pattern { base, pattern } => {
-                    globs.push(GlobEntry {
-                        base: base.to_string_lossy().to_string(),
-                        pattern: pattern.to_string(),
-                    });
-                }
-                _ => {}
-            }
-        }
-
-        // Re-optimize the globs to reduce the number of patterns we have to scan.
-        globs = optimize_patterns(&globs);
-
-        // Track the globs for subsequent calls
-        self.globs = Some(globs.clone());
-
-        globs
-    }
-
-    #[tracing::instrument(skip_all)]
-    pub fn get_normalized_sources(&self) -> Vec<GlobEntry> {
-        self.sources
-            .iter()
-            .filter_map(|source| match source {
-                SourceEntry::Auto { base } | SourceEntry::External { base } => Some(GlobEntry {
-                    base: base.to_string_lossy().to_string(),
-                    pattern: "**/*".to_string(),
-                }),
-                SourceEntry::Pattern { base, pattern } => Some(GlobEntry {
-                    base: base.to_string_lossy().to_string(),
-                    pattern: pattern.to_string(),
-                }),
-                _ => None,
-            })
-            .collect()
-    }
-
-    #[tracing::instrument(skip_all)]
-    pub fn get_candidates_with_positions(
-        &mut self,
-        changed_content: ChangedContent,
-    ) -> Vec<(String, usize)> {
-        let content = read_changed_content(changed_content).unwrap_or_default();
-        let original_content = &content;
-
-        // Workaround for legacy upgrades:
-        //
-        // `-[]` won't parse in the new parser (`[…]` must contain _something_), but we do need it
-        // for people using `group-[]` (which we will later replace with `in-[.group]` instead).
-        let content = content.replace("-[]", "XYZ");
-        let offset = content.as_ptr() as usize;
-
-        let mut extractor = Extractor::new(&content[..]);
-
-        extractor
-            .extract()
-            .into_par_iter()
-            .flat_map(|extracted| match extracted {
-                Extracted::Candidate(s) => {
-                    let i = s.as_ptr() as usize - offset;
-                    let original = &original_content[i..i + s.len()];
-                    if original.contains_str("-[]") {
-                        return String::from_utf8(original.to_vec())
-                            .ok()
-                            .map(|candidate| (candidate, i));
-                    }
-
-                    String::from_utf8(s.to_vec())
-                        .ok()
-                        .map(|candidate| (candidate, i))
-                }
-
-                _ => None,
-            })
-            .collect()
-    }
-
-    #[tracing::instrument(skip_all)]
-    fn discover_sources(&mut self) -> (Vec<Vec<u8>>, Vec<PathBuf>, Vec<String>) {
-        if self.sources_scanned {
-            return (vec![], vec![], vec![]);
-        }
-        self.sources_scanned = true;
-
-        let Some(walker) = &mut self.walker else {
-            return (vec![], vec![], vec![]);
-        };
-
-        // Use synchronous walk for the initial build (lower overhead) and parallel
-        // walk for subsequent calls (watch mode) where the overhead is amortised.
-        let all_entries = if self.has_scanned_once {
-            walk_parallel(walker)
-        } else {
-            walk_synchronous(walker)
-        };
-
-        let mut css_files: Vec<PathBuf> = vec![];
-        let mut content_paths: Vec<(PathBuf, String)> = vec![];
-        let mut changed_files = vec![];
-
-        // Fresh state
-        self.files.clear();
-        self.dirs.clear();
-        self.extensions.clear();
-        self.globs = None;
-
-        // Cache canonicalized folders in case a file itself is not symlinked, but any of the parent
-        // folders are symlinked.
-        let mut cached_canonical_dirs: FxHashMap<PathBuf, PathBuf> = FxHashMap::default();
-
-        for entry in all_entries {
-            match entry {
-                WalkEntry::Dir(path) => {
-                    self.dirs.insert(path);
-                }
-                WalkEntry::File {
-                    path,
-                    mtime,
-                    is_symlink,
-                } => {
-                    // Deduplicate: parallel walk can visit the same file from multiple threads
-                    if !self.files.insert(path.clone()) {
-                        continue;
-                    }
-
-                    // Track canonicalized paths in addition to potentially symlinked file paths
-                    let canonical = if is_symlink {
-                        dunce::canonicalize(&path).ok()
-                    } else {
-                        path.parent().and_then(|parent| {
-                            // Perf: cache the canonicalized parent path such that sibling files don't
-                            // have to canonicalize over and over again.
-                            let canonical_parent = cached_canonical_dirs
-                                .entry(parent.to_path_buf())
-                                .or_insert_with(|| {
-                                    dunce::canonicalize(parent)
-                                        .unwrap_or_else(|_| parent.to_path_buf())
-                                });
-
-                            if canonical_parent.as_path() != parent {
-                                path.file_name()
-                                    .map(|file_name| canonical_parent.join(file_name))
-                            } else {
-                                None
-                            }
-                        })
-                    };
-
-                    if let Some(canonical) = canonical {
-                        if canonical != path {
-                            self.files.insert(canonical);
-                        }
-                    }
-                    let extension = path
-                        .extension()
-                        .and_then(|x| x.to_str())
-                        .unwrap_or_default()
-                        .to_owned();
-
-                    self.extensions.insert(extension.to_owned());
-
-                    // On incremental scans, check mtime to skip unchanged files.
-                    // On the first scan, track mtimes while still scanning every file.
-                    let changed = if self.has_scanned_once {
-                        match mtime {
-                            Some(mtime) => {
-                                let prev = self.mtimes.insert(path.clone(), mtime);
-                                prev.is_none_or(|prev| prev != mtime)
-                            }
-                            None => true,
-                        }
-                    } else {
-                        if let Some(mtime) = mtime {
-                            self.mtimes.insert(path.clone(), mtime);
-                        }
-
-                        true
-                    };
-
-                    if !changed {
-                        continue;
-                    }
-
-                    if let Ok(file) = path.clone().into_os_string().into_string() {
-                        changed_files.push(file);
-                    }
-
-                    match extension.as_str() {
-                        // Special handing for CSS files, we don't want to extract candidates from
-                        // these files, but we do want to extract used CSS variables.
-                        "css" => css_files.push(path),
-                        _ => content_paths.push((path, extension)),
-                    }
-                }
-            }
-        }
-
-        // Ensure `mtimes` don't include stale files
-        self.mtimes.retain(|path, _| self.files.contains(path));
-
-        // Read + preprocess all discovered files in parallel
-        let scanned_blobs: Vec<Vec<u8>> = content_paths
-            .into_par_iter()
-            .filter_map(|(path, ext)| {
-                let content = std::fs::read(&path).ok()?;
-                event!(tracing::Level::INFO, "Reading {:?}", path);
-                let processed = pre_process_input(content, &ext);
-                if processed.is_empty() {
-                    None
-                } else {
-                    Some(processed)
-                }
-            })
-            .collect();
-
-        if !self.has_scanned_once {
-            self.has_scanned_once = true;
-        }
-
-        changed_files.par_sort_unstable();
-
-        (scanned_blobs, css_files, changed_files)
-    }
-}
-
-fn read_changed_content(c: ChangedContent) -> Option<Vec<u8>> {
-    let (content, extension) = match c {
-        ChangedContent::File(file, extension) => match std::fs::read(&file) {
-            Ok(content) => {
-                event!(tracing::Level::INFO, "Reading {:?}", file);
-                (content, extension)
-            }
-            Err(e) => {
-                event!(tracing::Level::ERROR, "Failed to read file: {:?}", e);
-                return None;
-            }
-        },
-
-        ChangedContent::Content(contents, extension) => (contents.into_bytes(), extension),
-    };
-
-    Some(pre_process_input(content, &extension))
-}
-
-pub fn pre_process_input(content: Vec<u8>, extension: &str) -> Vec<u8> {
-    use crate::extractor::pre_processors::*;
-
-    match extension {
-        "clj" | "cljs" | "cljc" => Clojure.process(&content),
-        "heex" | "eex" | "ex" | "exs" => Elixir.process(&content),
-        "cshtml" | "razor" => Razor.process(&content),
-        "haml" => Haml.process(&content),
-        "json" | "jsonl" | "ndjson" => Json.process(&content),
-        "md" | "mdx" => Markdown.process(&content),
-        "pug" => Pug.process(&content),
-        "rb" | "erb" => Ruby.process(&content),
-        "slim" | "slang" => Slim.process(&content),
-        "svelte" => Svelte.process(&content),
-        "rs" => Rust.process(&content),
-        "tt" | "tt2" | "tx" => TemplateToolkit.process(&content),
-        "twig" => Twig.process(&content),
-        "vue" => Vue.process(&content),
-        _ => content,
-    }
-}
-
-#[tracing::instrument(skip_all)]
-fn read_all_files(changed_content: Vec<ChangedContent>) -> Vec<Vec<u8>> {
-    event!(
-        tracing::Level::INFO,
-        "Reading {:?} file(s)",
-        changed_content.len()
-    );
-
-    changed_content
-        .into_par_iter()
-        .filter_map(read_changed_content)
-        .collect()
-}
-
-#[tracing::instrument(skip_all)]
-fn extract_css_variables(blobs: Vec<Vec<u8>>) -> FxHashSet<String> {
-    extract(blobs, |mut extractor| {
-        extractor.extract_variables_from_css()
-    })
-}
-
-#[tracing::instrument(skip_all)]
-fn parse_all_blobs(blobs: Vec<Vec<u8>>) -> FxHashSet<String> {
-    extract(blobs, |mut extractor| extractor.extract())
-}
-
-#[tracing::instrument(skip_all)]
-fn extract<H>(blobs: Vec<Vec<u8>>, handle: H) -> FxHashSet<String>
-where
-    H: Fn(Extractor) -> Vec<Extracted> + std::marker::Sync,
-{
-    blobs
-        .par_iter()
-        .flat_map(|blob| blob.par_split(|x| *x == b'\n'))
-        .filter_map(|blob| {
-            if blob.is_empty() {
-                return None;
-            }
-
-            let extracted = handle(crate::extractor::Extractor::new(blob));
-            if extracted.is_empty() {
-                return None;
-            }
-
-            Some(FxHashSet::from_iter(extracted.into_iter().map(
-                |x| match x {
-                    Extracted::Candidate(bytes) => bytes,
-                    Extracted::CssVariable(bytes) => bytes,
-                },
-            )))
-        })
-        .reduce(Default::default, |mut a, b| {
-            a.extend(b);
-            a
-        })
-        .into_iter()
-        .filter_map(|s| String::from_utf8(s.to_vec()).ok())
-        .collect()
-}
-
-#[derive(Debug)]
-enum WalkEntry {
-    Dir(PathBuf),
-    File {
-        path: PathBuf,
-        mtime: Option<SystemTime>,
-
-        /// Whether the path itself is a symlink
-        is_symlink: bool,
-    },
-}
-
-impl From<ignore::DirEntry> for WalkEntry {
-    fn from(entry: ignore::DirEntry) -> Self {
-        let is_dir = entry.file_type().map(|ft| ft.is_dir()).unwrap_or(false);
-        let is_symlink = entry.path_is_symlink();
-        let path = entry.into_path();
-
-        if is_dir {
-            WalkEntry::Dir(path)
-        } else {
-            let mtime = path.metadata().ok().and_then(|m| m.modified().ok());
-            WalkEntry::File {
-                path,
-                mtime,
-                is_symlink,
-            }
-        }
-    }
-}
-
-/// Walk the file system synchronously. Used for the initial build where the overhead of spawning
-/// parallel walker threads is not worth it.
-#[tracing::instrument(skip_all)]
-fn walk_synchronous(walker: &mut WalkBuilder) -> Vec<WalkEntry> {
-    walker
-        .build()
-        .filter_map(Result::ok)
-        .map(WalkEntry::from)
-        .collect()
-}
-
-/// Walk the file system in parallel. Used in watch mode where the parallel walker overhead is
-/// amortised across many rebuilds and subsequent calls are much faster.
-#[tracing::instrument(skip_all)]
-fn walk_parallel(walker: &mut WalkBuilder) -> Vec<WalkEntry> {
-    struct FlushOnDrop {
-        local: Vec<WalkEntry>,
-        shared: Arc<Mutex<Vec<WalkEntry>>>,
-    }
-
-    impl Drop for FlushOnDrop {
-        fn drop(&mut self) {
-            if !self.local.is_empty() {
-                self.shared.lock().unwrap().append(&mut self.local);
-            }
-        }
-    }
-
-    let collected: Arc<Mutex<Vec<WalkEntry>>> = Arc::new(Mutex::new(vec![]));
-
-    walker.build_parallel().run(|| {
-        let mut buf = FlushOnDrop {
-            local: Vec::with_capacity(256),
-            shared: collected.clone(),
-        };
-
-        Box::new(move |entry| {
-            let Ok(entry) = entry else {
-                return ignore::WalkState::Continue;
-            };
-
-            buf.local.push(WalkEntry::from(entry));
-
-            if buf.local.len() >= 256 {
-                buf.shared.lock().unwrap().append(&mut buf.local);
-            }
-
-            ignore::WalkState::Continue
-        })
-    });
-
-    // All threads have finished and flushed their buffers via FlushOnDrop::drop
-    Arc::try_unwrap(collected).unwrap().into_inner().unwrap()
-}
-
-/// Sets up a WalkBuilder with all source roots, gitignore rules, and source pattern matching.
-///
-/// This is the common setup shared between the full walker (with mtime tracking for re-scans)
-/// and the parallel walker (without mtime tracking for the initial scan).
-fn create_walker(sources: &Sources) -> Option<WalkBuilder> {
-    let mut other_roots: FxHashSet<&PathBuf> = FxHashSet::default();
-    let mut first_root: Option<&PathBuf> = None;
-
-    let mut ignores: Vec<(&PathBuf, Vec<String>)> = Default::default();
-    let mut emit = |base, pattern| match ignores.last_mut() {
-        Some((prev_base, patterns)) if *prev_base == base => {
-            patterns.push(pattern);
-        }
-        _ => {
-            ignores.push((base, vec![pattern]));
-        }
-    };
-
-    for source in sources.iter() {
-        match source {
-            SourceEntry::Auto { base } => {
-                if first_root.is_none() {
-                    first_root = Some(base);
-                } else {
-                    other_roots.insert(base);
-                }
-            }
-            SourceEntry::Pattern { base, pattern } => {
-                let pattern = pattern.to_owned();
-
-                if first_root.is_none() {
-                    first_root = Some(base);
-                } else {
-                    other_roots.insert(base);
-                }
-
-                if !pattern.contains("**") {
-                    // Specific patterns should take precedence even over git-ignored files:
-                    emit(base, format!("!{}", pattern));
-                } else {
-                    // Assumption: the pattern we receive will already be brace expanded. So
-                    // `*.{html,jsx}` will result in two separate patterns: `*.html` and `*.jsx`.
-                    if let Some(extension) = Path::new(&pattern).extension() {
-                        // Extend auto source detection to include the extension
-                        emit(base, format!("!*.{}", extension.to_string_lossy()));
-                    }
-                }
-            }
-            SourceEntry::Ignored { base, pattern } => {
-                emit(base, pattern.to_owned());
-            }
-            SourceEntry::External { base } => {
-                if first_root.is_none() {
-                    first_root = Some(base);
-                } else {
-                    other_roots.insert(base);
-                }
-
-                // External sources should take precedence even over git-ignored files:
-                emit(base, "!/**/*".to_owned());
-
-                // External sources should still disallow binary extensions:
-                emit(base, BINARY_EXTENSIONS_GLOB.clone());
-            }
-        }
-    }
-
-    let mut builder = WalkBuilder::new(first_root?);
-
-    // We have to follow symlinks
-    builder.follow_links(true);
-
-    // Scan hidden files / directories
-    builder.hidden(false);
-
-    // Don't respect global gitignore files
-    builder.git_global(false);
-
-    // By default, allow .gitignore files to be used regardless of whether or not
-    // a .git directory is present. This is an optimization for when projects
-    // are first created and may not be in a git repo yet.
-    builder.require_git(false);
-
-    // If we are in a git repo then require it to ensure that only rules within
-    // the repo are used. For example, we don't want to consider a .gitignore file
-    // in the user's home folder if we're in a git repo.
-    //
-    // The alternative is using a call like `.parents(false)` but that will
-    // prevent looking at parent directories for .gitignore files from within
-    // the repo and that's not what we want.
-    //
-    // For example, in a project with this structure:
-    //
-    // home
-    // .gitignore
-    //  my-project
-    //   .gitignore
-    //   apps
-    //     .gitignore
-    //     web
-    //       {root}
-    //
-    // We do want to consider all .gitignore files listed:
-    // - home/.gitignore
-    // - my-project/.gitignore
-    // - my-project/apps/.gitignore
-    //
-    // However, if a repo is initialized inside my-project then only the following
-    // make sense for consideration:
-    // - my-project/.gitignore
-    // - my-project/apps/.gitignore
-    //
-    // Setting the require_git(true) flag conditionally allows us to do this.
-    for parent in first_root?.ancestors() {
-        if parent.join(".git").exists() {
-            builder.require_git(true);
-            break;
-        }
-    }
-
-    for root in other_roots {
-        builder.add(root);
-    }
-
-    // Setup auto source detection rules
-    for ignore in auto_source_detection::RULES.iter() {
-        builder.add_gitignore(ignore.clone());
-    }
-
-    // Setup ignores based on `@source` definitions
-    for (base, patterns) in ignores {
-        let mut ignore_builder = GitignoreBuilder::new(base);
-        for pattern in patterns {
-            ignore_builder.add_line(None, &pattern).unwrap();
-        }
-        let ignore = ignore_builder.build().unwrap();
-        builder.add_gitignore(ignore);
-    }
-
-    // Pre-compute source matching data to avoid allocations in the hot filter_entry path
-    let auto_bases: Vec<PathBuf> = sources
-        .iter()
-        .filter_map(|source| match source {
-            SourceEntry::Auto { base } | SourceEntry::External { base } => Some(base.clone()),
-            _ => None,
-        })
-        .collect();
-
-    let pattern_sources: Vec<(PathBuf, String)> = sources
-        .iter()
-        .filter_map(|source| match source {
-            SourceEntry::Pattern { base, pattern } => Some((base.into(), pattern.into())),
-            _ => None,
-        })
-        .collect();
-
-    // Source pattern matching filter (lock-free, safe for parallel walking)
-    builder.filter_entry(move |entry| {
-        let path = entry.path();
-
-        // Ensure the entries are matching any of the provided source patterns (this is
-        // necessary for manual-patterns that can filter the file extension)
-        if path.is_file() {
-            let mut matches = false;
-
-            for base in &auto_bases {
-                if path.starts_with(base) {
-                    matches = true;
-                    break;
-                }
-            }
-
-            if !matches {
-                for (base, pattern) in &pattern_sources {
-                    let remainder = path.strip_prefix(base);
-                    if remainder.is_ok_and(|remainder| {
-                        let mut path_str = remainder.to_string_lossy().to_string();
-                        if !path_str.starts_with("/") {
-                            path_str = format!("/{path_str}");
-                        }
-                        glob_match(pattern, path_str.as_bytes())
-                    }) {
-                        matches = true;
-                        break;
-                    }
-                }
-            }
-
-            if !matches {
-                return false;
-            }
-        }
-
-        true
-    });
-
-    Some(builder)
-}
-
-#[cfg(test)]
-mod tests {
-    use super::{ChangedContent, Scanner};
-    use pretty_assertions::assert_eq;
-
-    #[test]
-    fn test_positions() {
-        let mut scanner = Scanner::new(vec![]);
-
-        for (input, expected) in [
-            // Before migrations
-            (
-                r#"<div class="!tw__flex sm:!tw__block tw__bg-gradient-to-t flex tw:[color:red] group-[]:tw__flex"#,
-                vec![
-                    ("class".to_string(), 5),
-                    ("!tw__flex".to_string(), 12),
-                    ("sm:!tw__block".to_string(), 22),
-                    ("tw__bg-gradient-to-t".to_string(), 36),
-                    ("flex".to_string(), 57),
-                    ("tw:[color:red]".to_string(), 62),
-                    ("group-[]:tw__flex".to_string(), 77),
-                ],
-            ),
-            // After migrations
-            (
-                r#"<div class="tw:flex! tw:sm:block! tw:bg-linear-to-t flex tw:[color:red] tw:in-[.tw\:group]:flex"></div>"#,
-                vec![
-                    ("class".to_string(), 5),
-                    ("tw:flex!".to_string(), 12),
-                    ("tw:sm:block!".to_string(), 21),
-                    ("tw:bg-linear-to-t".to_string(), 34),
-                    ("flex".to_string(), 52),
-                    ("tw:[color:red]".to_string(), 57),
-                    ("tw:in-[.tw\\:group]:flex".to_string(), 72),
-                ],
-            ),
-        ] {
-            let candidates = scanner.get_candidates_with_positions(ChangedContent::Content(
-                input.to_string(),
-                "html".into(),
-            ));
-            assert_eq!(candidates, expected);
-        }
-    }
-}
diff --git a/crates/oxide/src/scanner/sources.rs b/crates/oxide/src/scanner/sources.rs
deleted file mode 100644
index 53c09387f..000000000
--- a/crates/oxide/src/scanner/sources.rs
+++ /dev/null
@@ -1,938 +0,0 @@
-use crate::GlobEntry;
-use bexpand::Expression;
-use fxhash::{FxHashMap, FxHashSet};
-use ignore::gitignore::Gitignore;
-use std::path::{Component, Path, PathBuf};
-use tracing::{event, Level};
-
-use super::auto_source_detection::IGNORED_CONTENT_DIRS;
-
-#[derive(Debug, Clone)]
-pub struct PublicSourceEntry {
-    /// Base path of the glob
-    pub base: String,
-
-    /// Glob pattern
-    pub pattern: String,
-
-    /// Negated flag
-    pub negated: bool,
-}
-
-#[derive(Debug, Clone, PartialEq)]
-pub enum SourceEntry {
-    /// Auto source detection
-    ///
-    /// Represented by:
-    ///
-    /// ```css
-    /// @source "src";`
-    /// @source "src/**/*";`
-    /// ```
-    Auto { base: PathBuf },
-
-    /// Explicit source pattern regardless of any auto source detection rules
-    ///
-    /// Represented by:
-    ///
-    /// ```css
-    /// @source "src/**/*.html";`
-    /// ```
-    Pattern { base: PathBuf, pattern: String },
-
-    /// Ignored pattern
-    ///
-    /// Represented by:
-    ///
-    /// ```css
-    /// @source not "src";`
-    /// @source not "src/**/*.html";`
-    /// ```
-    Ignored { base: PathBuf, pattern: String },
-
-    /// External sources are directories that are ignored (by us or .gitignore rules), but should be
-    /// included bypassing the default ignore rules.
-    ///
-    /// Represented by:
-    ///
-    /// ```css
-    /// @source "../node_modules/my-lib";`
-    /// @source "../node_modules/my-lib/**/*";`
-    /// ```
-    External { base: PathBuf },
-}
-
-#[derive(Debug, Clone, Default)]
-pub struct Sources {
-    sources: Vec<SourceEntry>,
-}
-
-impl Sources {
-    pub fn new(sources: Vec<SourceEntry>) -> Self {
-        Self { sources }
-    }
-
-    pub fn iter(&self) -> impl Iterator<Item = &SourceEntry> {
-        self.sources.iter()
-    }
-}
-
-/// When dealing with a pattern, then it could be that we end up with:
-///
-/// ```json
-/// { base: '/some/folder', pattern: 'foo.ts' }
-/// ```
-///
-/// If we just emit `!foo.ts` for the `/some/folder` path, then _everything_ else in that folder
-/// would still be walked (but the result will be ignored).
-///
-/// Instead, we have to ensure that we ignore everything in that folder _except_ for the `foo.ts`
-/// pattern.
-///
-/// This should be equivalent to:
-/// ```gitignore
-/// *
-/// !foo.ts
-/// ```
-///
-/// However, we have to be careful that we don't start ignoring files/folders that already exist.
-/// ```css
-/// @source "./some/folder/foo.ts";
-/// @source "./some/folder/bar.ts";
-/// ```
-/// Would result in:
-/// ```json
-/// { base: '/some/folder', pattern: 'foo.ts' }
-/// { base: '/some/folder', pattern: 'bar.ts' }
-/// ```
-///
-/// If we were to blindly emit `*` for each pattern, then the `.gitignore` equivalent would look like
-/// this:
-/// ```gitignore
-/// *
-/// !foo.ts
-/// *
-/// !bar.ts
-/// ```
-///
-/// This would result in ignoring the `foo.ts` file as well. Therefore we only want to insert
-/// this `*` pattern when nothing else exists yet.
-///
-/// There is another problem that we need to solve. Let's say you have a pattern that contains a `*`
-/// in the pattern:
-/// ```css
-/// @source './src/ba*/*.html';
-/// ```
-///
-/// This would result in
-/// ```json
-/// { base: '/src', pattern: '/ba*/*.html' }
-/// ```
-///
-/// If we now inject the `*` pattern for the `/src` folder, then we wouldn't scan any `ba*` folders
-/// (e.g. `bar` or `baz`). For this, we have to make sure that we add inverse patterns for these
-/// folders. This would essentially result in:
-/// ```gitignore
-/// *                     ← ignore everything
-/// !/ba*/                ← except for the `ba*/` pattern, so we scan these folders
-/// !/ba*/*.html          ← then ensure we scan the `*.html` files in it as well
-/// ```
-///
-fn expand_restricted_patterns(sources: Vec<SourceEntry>) -> Vec<SourceEntry> {
-    let unrestricted_roots = sources
-        .iter()
-        .filter_map(|source| match source {
-            SourceEntry::Auto { base } | SourceEntry::External { base } => Some(base.clone()),
-            SourceEntry::Pattern { base, pattern } if pattern.contains("**") => Some(base.clone()),
-            _ => None,
-        })
-        .collect::<Vec<_>>();
-
-    // Bases of restricted patterns. Each of these becomes its own walk root with its own
-    // `*` + `!<pattern>` rules, so an ancestor base must not ignore them recursively.
-    let pattern_roots = sources
-        .iter()
-        .filter_map(|source| match source {
-            SourceEntry::Pattern { base, .. } => Some(base.clone()),
-            _ => None,
-        })
-        .collect::<Vec<_>>();
-
-    let mut restricted_roots: FxHashSet<PathBuf> = FxHashSet::default();
-    let mut expanded = vec![];
-
-    for source in sources {
-        let SourceEntry::Pattern { base, pattern } = &source else {
-            expanded.push(source);
-            continue;
-        };
-
-        // `base` is already included by another `@source` that we know should be walked. This
-        // includes the case where `base` is _nested_ inside such a root, because everything under
-        // an unrestricted root is walked already. Restricting it would incorrectly hide siblings
-        // that the broader source is supposed to pick up.
-        if unrestricted_roots.iter().any(|root| base.starts_with(root)) {
-            expanded.push(source);
-            continue;
-        }
-
-        // Ignore everything in the directory. We will later add the specific patterns we are
-        // interested in.
-        if restricted_roots.insert(base.clone()) {
-            // When another source root is nested inside this base — an unrestricted root, or the
-            // base of another restricted pattern (which is walked from its own root with its own
-            // rules) — only ignore direct children so the nested root can still be walked.
-            let has_nested_root = unrestricted_roots.iter().any(|root| root.starts_with(base))
-                || pattern_roots
-                    .iter()
-                    .any(|root| root != base && root.starts_with(base));
-
-            let pattern = if has_nested_root { "/*" } else { "*" };
-
-            expanded.push(SourceEntry::Ignored {
-                base: base.clone(),
-                pattern: pattern.to_owned(),
-            });
-        }
-
-        // Ensure to _include_ parent paths, otherwise the `*` from above would block walking the
-        // folders that need to be walked.
-        //
-        // ```css
-        // @source './src/ba*/*.html';
-        // ```
-        //
-        // ```gitignore
-        // *                     ← added by the above rule
-        // !/ba*/                ← this is what we're focusing on in this block
-        // !/ba*/*.html          ← this is added later
-        // ```
-        {
-            let mut dir = PathBuf::new();
-            let mut components = Path::new(pattern).components().peekable();
-
-            while let Some(component) = components.next() {
-                if components.peek().is_none() {
-                    break;
-                }
-
-                match component {
-                    Component::Prefix(_) | Component::RootDir | Component::CurDir => continue,
-                    Component::ParentDir | Component::Normal(_) => dir.push(component),
-                }
-
-                expanded.push(SourceEntry::Ignored {
-                    base: base.clone(),
-                    pattern: format!("!/{}/", path_to_posix_string(&dir).trim_start_matches('/')),
-                });
-            }
-        }
-
-        // Track the original source
-        expanded.push(source);
-    }
-
-    expanded
-}
-
-impl PublicSourceEntry {
-    /// Optimize the PublicSourceEntry by trying to move all the static parts of the pattern to the
-    /// base of the PublicSourceEntry.
-    ///
-    /// ```diff
-    /// - { base: '/', pattern: 'src/**/*.html'}
-    /// + { base: '/src', pattern: '**/*.html'}
-    /// ```
-    ///
-    /// A file stays in the `pattern` part, because the `base` should only be a directory.
-    ///
-    /// ```diff
-    /// - { base: '/', pattern: 'src/examples/index.html'}
-    /// + { base: '/src/examples', pattern: 'index.html'}
-    /// ```
-    ///
-    /// A folder will be moved to the `base` part, and the `pattern` will be set to `**/*`.
-    ///
-    /// ```diff
-    /// - { base: '/', pattern: 'src/examples'}
-    /// + { base: '/src/examples', pattern: '**/*'}
-    /// ```
-    ///
-    /// In addition, we will canonicalize the base path so we always work with the correctly
-    /// resolved path.
-    pub fn optimize(&mut self) {
-        // Resolve base path immediately
-        let Ok(mut base) = dunce::canonicalize(&self.base) else {
-            event!(Level::ERROR, "Failed to resolve base: {:?}", self.base);
-            return;
-        };
-
-        let mut new_pattern = PathBuf::new();
-        enum ComponentStage {
-            Base,
-            Pattern,
-        }
-        let mut stage = ComponentStage::Base;
-
-        let mut components = Path::new(&self.pattern).components().peekable();
-        while let Some(component) = components.next() {
-            match stage {
-                ComponentStage::Base => {
-                    match component {
-                        // Ignore the current dir, e.g. `.`
-                        Component::CurDir => {}
-
-                        // Go up a directory, e.g. `..`
-                        Component::ParentDir => {
-                            base.pop();
-                        }
-
-                        // Once we hit a component that contains a wildcard character, then we
-                        // can't change the base anymore and we must move to the pattern part.
-                        Component::Normal(part) if part.to_string_lossy().contains("*") => {
-                            new_pattern.push(component);
-                            stage = ComponentStage::Pattern;
-                        }
-
-                        // File or folder, but not the last component
-                        Component::Normal(part) if components.peek().is_some() => {
-                            base.push(part);
-                        }
-
-                        // Last file or folder. If it's a folder, we move it to the base,
-                        // otherwise we move it to the pattern.
-                        Component::Normal(part) => {
-                            let full_path = base.join(part);
-                            if full_path.is_dir() {
-                                base.push(part);
-                            } else {
-                                new_pattern.push(part);
-                            }
-                        }
-
-                        // When we're dealing with an absolute path, then we have to bypass the
-                        // `base` entirely.
-                        Component::Prefix(_) => {
-                            base.clear();
-                            base.push(component);
-                        }
-                        Component::RootDir => {
-                            #[cfg(not(windows))]
-                            base.clear();
-                            base.push(component);
-                        }
-                    }
-                }
-                ComponentStage::Pattern => {
-                    new_pattern.push(component);
-                }
-            }
-        }
-
-        self.base = base.to_string_lossy().to_string();
-        self.pattern = path_to_posix_string(&new_pattern);
-
-        // Ensure we have `**/*` when the base is a folder and we don't have a pattern at all
-        if self.pattern == "" {
-            self.pattern = "/**/*".to_owned();
-        }
-        // Ensure that the pattern is pinned to the base path.
-        else if !self.pattern.starts_with("/") {
-            self.pattern = format!("/{}", self.pattern);
-        }
-    }
-}
-
-fn path_to_posix_string(path: &Path) -> String {
-    let mut parts = Vec::new();
-    let mut is_rooted = false;
-
-    for component in path.components() {
-        match component {
-            Component::Prefix(prefix) => {
-                parts.push(prefix.as_os_str().to_string_lossy().to_string());
-            }
-            Component::RootDir => {
-                is_rooted = true;
-                if parts.is_empty() {
-                    parts.push(String::new());
-                }
-            }
-            Component::CurDir => {
-                parts.push(".".to_string());
-            }
-            Component::ParentDir => {
-                parts.push("..".to_string());
-            }
-            Component::Normal(part) => {
-                parts.push(part.to_string_lossy().to_string());
-            }
-        }
-    }
-
-    let result = parts.join("/");
-    if result.is_empty() && is_rooted {
-        "/".to_string()
-    } else {
-        result
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-    use pretty_assertions::assert_eq;
-    use std::fs;
-    use tempfile::tempdir;
-
-    #[test]
-    fn path_to_posix_string_serializes_relative_paths() {
-        let path = PathBuf::from("src").join("**").join("*.html");
-
-        assert_eq!(path_to_posix_string(&path), "src/**/*.html");
-    }
-
-    #[test]
-    fn path_to_posix_string_serializes_rooted_paths() {
-        let path = PathBuf::from(std::path::MAIN_SEPARATOR.to_string())
-            .join("src")
-            .join("**")
-            .join("*.html");
-
-        assert_eq!(path_to_posix_string(&path), "/src/**/*.html");
-    }
-
-    #[test]
-    fn path_to_posix_string_serializes_empty_paths() {
-        assert_eq!(path_to_posix_string(&PathBuf::new()), "");
-    }
-
-    #[test]
-    fn optimize_hoists_static_directories_and_keeps_files_in_the_pattern() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join("src").join("examples")).unwrap();
-
-        let mut source = PublicSourceEntry {
-            base: dir.path().to_string_lossy().to_string(),
-            pattern: "src/examples/index.html".to_string(),
-            negated: false,
-        };
-
-        source.optimize();
-
-        assert_eq!(
-            source.base,
-            dunce::canonicalize(dir.path().join("src").join("examples"))
-                .unwrap()
-                .to_string_lossy()
-        );
-        assert_eq!(source.pattern, "/index.html");
-    }
-
-    #[test]
-    fn optimize_hoists_folder_patterns() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join("src").join("examples")).unwrap();
-
-        let mut source = PublicSourceEntry {
-            base: dir.path().to_string_lossy().to_string(),
-            pattern: "src/examples".to_string(),
-            negated: false,
-        };
-
-        source.optimize();
-
-        assert_eq!(
-            source.base,
-            dunce::canonicalize(dir.path().join("src").join("examples"))
-                .unwrap()
-                .to_string_lossy()
-        );
-        assert_eq!(source.pattern, "/**/*");
-    }
-
-    #[test]
-    fn optimize_keeps_wildcards_in_the_pattern() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join("src")).unwrap();
-
-        let mut source = PublicSourceEntry {
-            base: dir.path().to_string_lossy().to_string(),
-            pattern: "src/**/*.html".to_string(),
-            negated: false,
-        };
-
-        source.optimize();
-
-        assert_eq!(
-            source.base,
-            dunce::canonicalize(dir.path().join("src"))
-                .unwrap()
-                .to_string_lossy()
-        );
-        assert_eq!(source.pattern, "/**/*.html");
-    }
-
-    #[test]
-    fn concrete_patterns_are_expanded_to_restrict_their_base() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join("src")).unwrap();
-        let base = dunce::canonicalize(dir.path().join("src")).unwrap();
-
-        let sources = public_source_entries_to_private_source_entries(vec![PublicSourceEntry {
-            base: dir.path().to_string_lossy().to_string(),
-            pattern: "src/foo.html".to_string(),
-            negated: false,
-        }]);
-
-        assert_eq!(
-            sources,
-            vec![
-                SourceEntry::Ignored {
-                    base: base.clone(),
-                    pattern: "*".to_string(),
-                },
-                SourceEntry::Pattern {
-                    base,
-                    pattern: "/foo.html".to_string(),
-                },
-            ]
-        );
-    }
-
-    #[test]
-    fn restricted_patterns_include_parent_directory_allow_rules() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join("src")).unwrap();
-        let base = dunce::canonicalize(dir.path().join("src")).unwrap();
-
-        let sources = public_source_entries_to_private_source_entries(vec![PublicSourceEntry {
-            base: dir.path().to_string_lossy().to_string(),
-            pattern: "src/ef*/*.html".to_string(),
-            negated: false,
-        }]);
-
-        assert_eq!(
-            sources,
-            vec![
-                SourceEntry::Ignored {
-                    base: base.clone(),
-                    pattern: "*".to_string(),
-                },
-                SourceEntry::Ignored {
-                    base: base.clone(),
-                    pattern: "!/ef*/".to_string(),
-                },
-                SourceEntry::Pattern {
-                    base,
-                    pattern: "/ef*/*.html".to_string(),
-                },
-            ]
-        );
-    }
-
-    #[test]
-    fn unrestricted_sources_do_not_expand_patterns_for_the_same_base() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join("src")).unwrap();
-        let base = dunce::canonicalize(dir.path().join("src")).unwrap();
-
-        let sources = public_source_entries_to_private_source_entries(vec![
-            PublicSourceEntry {
-                base: dir.path().to_string_lossy().to_string(),
-                pattern: "src".to_string(),
-                negated: false,
-            },
-            PublicSourceEntry {
-                base: dir.path().to_string_lossy().to_string(),
-                pattern: "src/foo.html".to_string(),
-                negated: false,
-            },
-        ]);
-
-        assert_eq!(
-            sources,
-            vec![
-                SourceEntry::Auto { base: base.clone() },
-                SourceEntry::Pattern {
-                    base,
-                    pattern: "/foo.html".to_string(),
-                },
-            ]
-        );
-    }
-
-    #[test]
-    fn restricted_parent_bases_do_not_open_unrelated_siblings() {
-        let dir = tempdir().unwrap();
-        let project = dir.path().join("Users").join("robin").join("docus-test");
-        fs::create_dir_all(&project).unwrap();
-
-        let users = dunce::canonicalize(dir.path().join("Users")).unwrap();
-        let project = dunce::canonicalize(project).unwrap();
-
-        let sources = public_source_entries_to_private_source_entries(vec![
-            PublicSourceEntry {
-                base: project.to_string_lossy().to_string(),
-                pattern: "**/*".to_string(),
-                negated: false,
-            },
-            PublicSourceEntry {
-                base: project.to_string_lossy().to_string(),
-                pattern: "../../app.config.ts".to_string(),
-                negated: false,
-            },
-        ]);
-
-        assert_eq!(
-            sources,
-            vec![
-                SourceEntry::Auto {
-                    base: project.clone(),
-                },
-                SourceEntry::Ignored {
-                    base: users.clone(),
-                    pattern: "/*".to_string(),
-                },
-                SourceEntry::Pattern {
-                    base: users,
-                    pattern: "/app.config.ts".to_string(),
-                },
-            ]
-        );
-    }
-
-    #[test]
-    fn restricted_patterns_preserve_source_order() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join("src")).unwrap();
-        let base = dunce::canonicalize(dir.path().join("src")).unwrap();
-
-        let sources = public_source_entries_to_private_source_entries(vec![
-            PublicSourceEntry {
-                base: dir.path().to_string_lossy().to_string(),
-                pattern: "src/foo.html".to_string(),
-                negated: false,
-            },
-            PublicSourceEntry {
-                base: dir.path().to_string_lossy().to_string(),
-                pattern: "src/foo.html".to_string(),
-                negated: true,
-            },
-        ]);
-
-        assert_eq!(
-            sources,
-            vec![
-                SourceEntry::Ignored {
-                    base: base.clone(),
-                    pattern: "*".to_string(),
-                },
-                SourceEntry::Pattern {
-                    base: base.clone(),
-                    pattern: "/foo.html".to_string(),
-                },
-                SourceEntry::Ignored {
-                    base,
-                    pattern: "/foo.html".to_string(),
-                },
-            ]
-        );
-    }
-
-    /// Run the public-to-private conversion for an auto-detected source pointing at `base` and
-    /// return the resulting entry.
-    fn auto_source_entry(base: &Path) -> SourceEntry {
-        public_source_entries_to_private_source_entries(vec![PublicSourceEntry {
-            base: base.to_string_lossy().to_string(),
-            pattern: "**/*".to_string(),
-            negated: false,
-        }])
-        .into_iter()
-        .next()
-        .unwrap()
-    }
-
-    #[test]
-    fn auto_detected_folders_become_auto_sources() {
-        let dir = tempdir().unwrap();
-        let base = dir.path().join("src");
-        fs::create_dir_all(&base).unwrap();
-        let base = dunce::canonicalize(&base).unwrap();
-
-        assert_eq!(auto_source_entry(&base), SourceEntry::Auto { base });
-    }
-
-    #[test]
-    fn folders_ignored_by_default_become_external_sources() {
-        let dir = tempdir().unwrap();
-        let base = dir.path().join("node_modules").join("my-lib");
-        fs::create_dir_all(&base).unwrap();
-        let base = dunce::canonicalize(&base).unwrap();
-
-        assert_eq!(auto_source_entry(&base), SourceEntry::External { base });
-    }
-
-    #[test]
-    fn folders_ignored_by_gitignore_become_external_sources() {
-        let dir = tempdir().unwrap();
-        // Pretend this is a git repository so the `.gitignore` search is bounded to it.
-        fs::create_dir_all(dir.path().join(".git")).unwrap();
-        fs::write(dir.path().join(".gitignore"), "dist/\n").unwrap();
-
-        let base = dir.path().join("dist");
-        fs::create_dir_all(&base).unwrap();
-        let base = dunce::canonicalize(&base).unwrap();
-
-        assert_eq!(auto_source_entry(&base), SourceEntry::External { base });
-    }
-
-    #[test]
-    fn folders_ignored_by_a_parent_gitignore_become_external_sources() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join(".git")).unwrap();
-        // A `.gitignore` higher up in the tree should still apply to nested directories.
-        fs::write(dir.path().join(".gitignore"), "generated/\n").unwrap();
-
-        let base = dir.path().join("packages").join("app").join("generated");
-        fs::create_dir_all(&base).unwrap();
-        let base = dunce::canonicalize(&base).unwrap();
-
-        assert_eq!(auto_source_entry(&base), SourceEntry::External { base });
-    }
-
-    #[test]
-    fn folders_not_ignored_by_gitignore_stay_auto_sources() {
-        let dir = tempdir().unwrap();
-        fs::create_dir_all(dir.path().join(".git")).unwrap();
-        fs::write(dir.path().join(".gitignore"), "dist/\n").unwrap();
-
-        let base = dir.path().join("src");
-        fs::create_dir_all(&base).unwrap();
-        let base = dunce::canonicalize(&base).unwrap();
-
-        assert_eq!(auto_source_entry(&base), SourceEntry::Auto { base });
-    }
-}
-
-/// For each public source entry:
-///
-/// 1. Perform brace expansion
-///
-/// ```diff
-/// - { base: '/', pattern: 'src/{foo,bar}.html'}
-/// + { base: '/', pattern: 'src/foo.html'}
-/// + { base: '/', pattern: 'src/bar.html'}
-/// ```
-///
-/// 2. Hoist static parts, e.g.:
-///
-/// ```diff
-/// - { base: '/', pattern: 'src/**/*.html'}
-/// + { base: '/src', pattern: '**/*.html'}
-/// ```
-///
-/// 3. Convert to private SourceEntry
-///
-pub fn public_source_entries_to_private_source_entries(
-    sources: Vec<PublicSourceEntry>,
-) -> Vec<SourceEntry> {
-    // Perform brace expansion
-    let expanded_globs = sources
-        .into_iter()
-        .flat_map(|source| {
-            let expression: Result<Expression, _> = source.pattern[..].try_into();
-            let Ok(expression) = expression else {
-                return vec![source];
-            };
-
-            expression
-                .into_iter()
-                .filter_map(Result::ok)
-                .map(move |pattern| PublicSourceEntry {
-                    base: source.base.clone(),
-                    pattern: pattern.into(),
-                    negated: source.negated,
-                })
-                .collect::<Vec<_>>()
-        })
-        .map(|mut public_source| {
-            public_source.optimize();
-            public_source
-        })
-        .collect::<Vec<_>>();
-
-    // Compiled `.gitignore` matchers are cached per directory so we read and parse each
-    // `.gitignore` file at most once, even though entries commonly share ancestor directories (e.g.
-    // the repository root). A cached `None` means the directory has no `.gitignore` file.
-    let mut gitignores: FxHashMap<PathBuf, Option<Gitignore>> = FxHashMap::default();
-
-    // Boundary for the `.gitignore` walk when a source is not inside a git repository (see below).
-    let cwd = std::env::current_dir()
-        .map(|cwd| dunce::canonicalize(&cwd).unwrap_or(cwd))
-        .ok();
-
-    // Convert from public SourceEntry to private SourceEntry
-    let sources = expanded_globs
-        .into_iter()
-        .map(|public_source| {
-            let mut source: SourceEntry = public_source.into();
-
-            // Promote auto-sources to external sources if they were gitignored
-            if let SourceEntry::Auto { ref base } = source {
-                let inside_git_repo = base.ancestors().any(|dir| dir.join(".git").exists());
-
-                // Walk up from the folder, applying each `.gitignore` relative to the directory
-                // that contains it (matching git), and stop at the git repository root so
-                // `.gitignore` files outside of the repo are not considered.
-                for dir in base.ancestors() {
-                    let gitignore = gitignores.entry(dir.to_path_buf()).or_insert_with(|| {
-                        let path = dir.join(".gitignore");
-
-                        // `Gitignore::new` roots the matcher at the directory containing the file,
-                        // so patterns match relative to it.
-                        path.is_file().then(|| Gitignore::new(&path).0)
-                    });
-
-                    // Only `.gitignore` files in ancestors of `base` can ignore `base` itself.
-                    // Patterns in `base`'s own `.gitignore` only match paths _inside_ `base`, never
-                    // `base` itself (the file walker still applies them to `base`'s contents).
-                    //
-                    // Skipping `base`'s own `.gitignore` also prevents a false positive for
-                    // whitelist style `.gitignore` files, because relativizing `base` against
-                    // itself yields the empty path, which incorrectly matches `/*`.
-                    //
-                    // E.g.:
-                    //
-                    // ```gitignore
-                    // /*
-                    // !/.gitignore
-                    // !/app
-                    // !/public
-                    // ```
-                    //
-                    // Everything inside `base` except `.gitignore`, `app` and `public` is ignored,
-                    // but `base` itself is not.
-                    if dir != base {
-                        if let Some(gitignore) = gitignore {
-                            if gitignore
-                                .matched_path_or_any_parents(&base, true)
-                                .is_ignore()
-                            {
-                                source = SourceEntry::External { base: base.into() };
-                                break;
-                            }
-                        }
-                    }
-
-                    // Stop at the git repository root.
-                    if dir.join(".git").exists() {
-                        break;
-                    }
-
-                    // Without a git repository there is no repository root to stop at. Stop once
-                    // the directory contains the current working directory instead, so `.gitignore`
-                    // files outside of the project (e.g. in the user's home directory) can never
-                    // promote a source to an external source. Note that the file walker still
-                    // applies those `.gitignore` files when deciding which files to scan.
-                    if !inside_git_repo && cwd.as_ref().is_some_and(|cwd| cwd.starts_with(dir)) {
-                        break;
-                    }
-                }
-            }
-
-            source
-        })
-        .collect::<Vec<SourceEntry>>();
-
-    expand_restricted_patterns(sources)
-}
-
-/// Convert a public source entry to a source entry
-impl From<PublicSourceEntry> for SourceEntry {
-    fn from(value: PublicSourceEntry) -> Self {
-        if value.negated {
-            return SourceEntry::Ignored {
-                base: value.base.into(),
-                pattern: value.pattern,
-            };
-        }
-
-        let auto =
-            value.pattern == "/**/*" || PathBuf::from(&value.base).join(&value.pattern).is_dir();
-
-        if !auto {
-            return SourceEntry::Pattern {
-                base: value.base.into(),
-                pattern: value.pattern,
-            };
-        }
-
-        let inside_ignored_content_dir = IGNORED_CONTENT_DIRS.iter().any(|dir| {
-            value.base.contains(&format!(
-                "{}{}{}",
-                std::path::MAIN_SEPARATOR,
-                dir,
-                std::path::MAIN_SEPARATOR
-            )) || value
-                .base
-                .ends_with(&format!("{}{}", std::path::MAIN_SEPARATOR, dir))
-        });
-
-        match inside_ignored_content_dir {
-            false => SourceEntry::Auto {
-                base: value.base.into(),
-            },
-            true => SourceEntry::External {
-                base: value.base.into(),
-            },
-        }
-    }
-}
-
-impl From<GlobEntry> for SourceEntry {
-    fn from(value: GlobEntry) -> Self {
-        SourceEntry::Pattern {
-            base: PathBuf::from(value.base),
-            pattern: value.pattern,
-        }
-    }
-}
-
-impl From<SourceEntry> for GlobEntry {
-    fn from(value: SourceEntry) -> Self {
-        match value {
-            SourceEntry::Auto { base } | SourceEntry::External { base } => GlobEntry {
-                base: base.to_string_lossy().into(),
-                pattern: "**/*".into(),
-            },
-            SourceEntry::Pattern { base, pattern } => GlobEntry {
-                base: base.to_string_lossy().into(),
-                pattern: pattern.clone(),
-            },
-            SourceEntry::Ignored { base, pattern } => GlobEntry {
-                base: base.to_string_lossy().into(),
-                pattern: pattern.clone(),
-            },
-        }
-    }
-}
-
-impl From<&SourceEntry> for GlobEntry {
-    fn from(value: &SourceEntry) -> Self {
-        match value {
-            SourceEntry::Auto { base } | SourceEntry::External { base } => GlobEntry {
-                base: base.to_string_lossy().into(),
-                pattern: "**/*".into(),
-            },
-            SourceEntry::Pattern { base, pattern } => GlobEntry {
-                base: base.to_string_lossy().into(),
-                pattern: pattern.clone(),
-            },
-            SourceEntry::Ignored { base, pattern } => GlobEntry {
-                base: base.to_string_lossy().into(),
-                pattern: pattern.clone(),
-            },
-        }
-    }
-}
diff --git a/crates/oxide/src/throughput.rs b/crates/oxide/src/throughput.rs
deleted file mode 100644
index 19597925f..000000000
--- a/crates/oxide/src/throughput.rs
+++ /dev/null
@@ -1,52 +0,0 @@
-use std::fmt::Display;
-
-pub struct Throughput {
-    rate: f64,
-    elapsed: std::time::Duration,
-}
-
-impl Display for Throughput {
-    #[inline(always)]
-    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
-        write!(
-            f,
-            "{}/s over {:.2}s",
-            format_byte_size(self.rate),
-            self.elapsed.as_secs_f64()
-        )
-    }
-}
-
-impl Throughput {
-    #[inline(always)]
-    pub fn compute<F>(iterations: usize, memory_baseline: usize, cb: F) -> Self
-    where
-        F: Fn(),
-    {
-        let now = std::time::Instant::now();
-        for _ in 0..iterations {
-            cb();
-        }
-        let elapsed = now.elapsed();
-        let memory_size = iterations * memory_baseline;
-
-        Self {
-            rate: memory_size as f64 / elapsed.as_secs_f64(),
-            elapsed,
-        }
-    }
-}
-
-#[inline(always)]
-fn format_byte_size(size: f64) -> String {
-    let units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-    let unit = 1000;
-    let mut size = size;
-    let mut i = 0;
-    while size > unit as f64 {
-        size /= unit as f64;
-        i += 1;
-    }
-
-    format!("{:.2} {}", size, units[i])
-}
diff --git a/crates/oxide/tests/scanner.rs b/crates/oxide/tests/scanner.rs
deleted file mode 100644
index fb5354a87..000000000
--- a/crates/oxide/tests/scanner.rs
+++ /dev/null
@@ -1,4080 +0,0 @@
-#[cfg(test)]
-mod scanner {
-    use insta::assert_snapshot;
-    use pretty_assertions::assert_eq;
-    use std::path::{Path, PathBuf};
-    use std::process::Command;
-    use std::thread::sleep;
-    use std::time::Duration;
-    use std::{fs, path};
-
-    use tailwindcss_oxide::*;
-    use tempfile::tempdir;
-
-    fn symlink<P: AsRef<Path>, Q: AsRef<Path>>(original: P, link: Q) -> std::io::Result<()> {
-        #[cfg(not(windows))]
-        let result = std::os::unix::fs::symlink(original, link);
-
-        #[cfg(windows)]
-        let result = std::os::windows::fs::symlink_dir(original, link);
-
-        result
-    }
-
-    fn symlink_file<P: AsRef<Path>, Q: AsRef<Path>>(original: P, link: Q) -> std::io::Result<()> {
-        #[cfg(not(windows))]
-        let result = std::os::unix::fs::symlink(original, link);
-
-        #[cfg(windows)]
-        let result = std::os::windows::fs::symlink_file(original, link);
-
-        result
-    }
-
-    fn public_source_entry_from_pattern(dir: PathBuf, pattern: &str) -> PublicSourceEntry {
-        let mut parts = pattern.split_whitespace();
-        let _ = parts.next().unwrap_or_default();
-        let not_or_pattern = parts.next().unwrap_or_default();
-        if not_or_pattern == "not" {
-            let pattern = parts.next().unwrap_or_default();
-            return PublicSourceEntry {
-                base: dir.to_string_lossy().into(),
-                pattern: pattern[1..pattern.len() - 1].to_string(),
-                negated: true,
-            };
-        }
-
-        PublicSourceEntry {
-            base: dir.to_string_lossy().into(),
-            pattern: not_or_pattern[1..not_or_pattern.len() - 1].to_string(),
-            negated: false,
-        }
-    }
-
-    struct ScanResult {
-        files: Vec<String>,
-        globs: Vec<String>,
-        normalized_sources: Vec<String>,
-        candidates: Vec<String>,
-        tree: String,
-    }
-
-    /// Renders the directory as a tree, annotating every file and folder with an indicator that
-    /// shows whether the scanner picked it up:
-    ///
-    /// - `✓` — scanned
-    /// - `✗` — ignored / skipped
-    ///
-    /// Symlinks are rendered as `link → target`, where the target is shown relative to the folder
-    /// containing the symlink. The contents of every `.gitignore` file are printed right below the
-    /// file itself.
-    ///
-    /// Folders that are a git repository root (they contain a `.git` folder) are marked with
-    /// `(git)`, because ignore rules behave differently inside and outside of a repository.
-    fn fs_tree(root: &Path, scanned: &[String]) -> String {
-        /// Computes the relative path from `parent` to `target`, where both are relative to the
-        /// same root, e.g.: `b/c` seen from `b` is `c`, and the root itself seen from `b` is `..`.
-        fn relative_to(target: &Path, parent: &Path) -> String {
-            let target = target.components().collect::<Vec<_>>();
-            let parent = parent.components().collect::<Vec<_>>();
-
-            let common = target
-                .iter()
-                .zip(&parent)
-                .take_while(|(a, b)| **a == **b)
-                .count();
-
-            let mut parts = vec![".."; parent.len() - common];
-            parts.extend(
-                target[common..]
-                    .iter()
-                    .map(|component| component.as_os_str().to_str().unwrap()),
-            );
-
-            if parts.is_empty() {
-                // The symlink points to its own parent folder
-                ".".into()
-            } else {
-                parts.join("/")
-            }
-        }
-
-        fn walk(
-            dir: &Path,
-            root: &Path,
-            prefix: &str,
-            scanned: &[String],
-            visited: &mut Vec<PathBuf>,
-            out: &mut String,
-        ) {
-            let mut entries = fs::read_dir(dir)
-                .unwrap()
-                .filter_map(Result::ok)
-                .filter(|entry| entry.file_name() != ".git")
-                .collect::<Vec<_>>();
-            entries.sort_by_key(|entry| entry.file_name());
-
-            for (i, entry) in entries.iter().enumerate() {
-                let last = i == entries.len() - 1;
-                let connector = if last { "└── " } else { "├── " };
-                let child_prefix = if last { "    " } else { "│   " };
-
-                let path = entry.path();
-                let name = entry.file_name().to_string_lossy().to_string();
-                let rel = path
-                    .strip_prefix(root)
-                    .unwrap()
-                    .to_string_lossy()
-                    .replace('\\', "/");
-
-                let file_type = entry.file_type().unwrap();
-
-                // a file is scanned when it shows up in the scanned files list. a folder is
-                // considered scanned when any scanned file lives inside of it. paths that go
-                // through a symlink count towards the symlink, not towards the target directory.
-                let dir_prefix = format!("{rel}/");
-                let is_scanned = scanned
-                    .iter()
-                    .any(|file| file == &rel || file.starts_with(&dir_prefix));
-                let indicator = if is_scanned { "✓" } else { "✗" };
-
-                let mut display_name = name.clone();
-                if path.join(".git").exists() {
-                    display_name = format!("{display_name} (git)");
-                }
-                if file_type.is_symlink() {
-                    if let Ok(target) = fs::read_link(&path) {
-                        // Show the target relative to the folder containing the symlink, or as-is
-                        // when it points outside of the tree.
-                        let target = match (target.strip_prefix(root), dir.strip_prefix(root)) {
-                            (Ok(target), Ok(parent)) => relative_to(target, parent),
-                            _ => target.to_string_lossy().replace('\\', "/"),
-                        };
-                        display_name = format!("{name} → {target}");
-
-                        // The symlink points to a target that doesn't exist
-                        if path.metadata().is_err() {
-                            display_name = format!("{display_name} (broken)");
-                        }
-                    }
-                }
-
-                out.push_str(&format!("{prefix}{connector}{indicator} {display_name}\n"));
-
-                // Print the contents of `.gitignore` files below the file itself, so the ignore
-                // rules are visible in the same output.
-                if name == ".gitignore" {
-                    if let Ok(contents) = fs::read_to_string(&path) {
-                        for line in contents.lines() {
-                            let line = format!("{prefix}{child_prefix}    {line}");
-                            out.push_str(line.trim_end());
-                            out.push('\n');
-                        }
-                    }
-                }
-
-                // Descend into directories, including symlinked ones. The paths inside a symlinked
-                // directory are computed through the symlink, so the indicators show what the
-                // scanner saw via that route. A visited stack prevents symlink cycles from
-                // recursing forever.
-                if path.metadata().map(|meta| meta.is_dir()).unwrap_or(false) {
-                    let Ok(canonical) = dunce::canonicalize(&path) else {
-                        continue;
-                    };
-                    if visited.contains(&canonical) {
-                        continue;
-                    }
-
-                    visited.push(canonical);
-                    walk(
-                        &path,
-                        root,
-                        &format!("{prefix}{child_prefix}"),
-                        scanned,
-                        visited,
-                        out,
-                    );
-                    visited.pop();
-                }
-            }
-        }
-
-        let mut visited = vec![dunce::canonicalize(root).unwrap()];
-        let mut out = if root.join(".git").exists() {
-            String::from(". (git)\n")
-        } else {
-            String::from(".\n")
-        };
-        walk(root, root, "", scanned, &mut visited, &mut out);
-        out
-    }
-
-    fn create_files_in(dir: &path::Path, paths: &[(&str, &str)]) {
-        // Create the necessary files
-        for (path, contents) in paths {
-            // Ensure we use the right path separator for the current platform
-            let path = dir.join(path.replace('/', path::MAIN_SEPARATOR.to_string().as_str()));
-            let parent = path.parent().unwrap();
-            if !parent.exists() {
-                fs::create_dir_all(parent).unwrap();
-            }
-
-            fs::write(path, contents).unwrap()
-        }
-    }
-
-    fn scanned_files(scanner: &mut Scanner, base: &Path) -> Vec<String> {
-        let base_dir =
-            format!("{}{}", dunce::canonicalize(base).unwrap().display(), "/").replace('\\', "/");
-
-        let mut files = scanner
-            .get_files()
-            .iter()
-            // Normalize paths to use unix style separators
-            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
-            .collect::<Vec<_>>();
-        files.sort();
-        files
-    }
-
-    fn scanned_globs(scanner: &mut Scanner, base: &Path) -> Vec<String> {
-        let base_dir =
-            format!("{}{}", dunce::canonicalize(base).unwrap().display(), "/").replace('\\', "/");
-
-        let mut globs = scanner
-            .get_globs()
-            .iter()
-            .map(|glob| {
-                if glob.pattern.starts_with('/') {
-                    format!("{}{}", glob.base, glob.pattern)
-                } else {
-                    format!("{}/{}", glob.base, glob.pattern)
-                }
-            })
-            // Normalize paths to use unix style separators
-            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
-            .collect::<Vec<_>>();
-        globs.sort();
-        globs
-    }
-
-    fn normalize_files(files: Vec<String>, base: &Path) -> Vec<String> {
-        let base_dir =
-            format!("{}{}", dunce::canonicalize(base).unwrap().display(), "/").replace('\\', "/");
-
-        let mut files = files
-            .iter()
-            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
-            .collect::<Vec<_>>();
-        files.sort();
-        files
-    }
-
-    fn scan_with_globs(
-        paths_with_content: &[(&str, &str)],
-        source_directives: Vec<&str>,
-    ) -> ScanResult {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Initialize this directory as a git repository
-        let _ = Command::new("git").arg("init").current_dir(&dir).output();
-
-        // Create the necessary files
-        self::create_files_in(&dir, paths_with_content);
-
-        let base = format!("{}", dir.display()).replace('\\', "/");
-
-        // Resolve all content paths for the (temporary) current working directory
-        let sources: Vec<PublicSourceEntry> = source_directives
-            .iter()
-            .map(|str| public_source_entry_from_pattern(base.clone().into(), str))
-            .collect();
-
-        let mut scanner = Scanner::new(sources);
-
-        let candidates = scanner.scan();
-        let base_dir =
-            format!("{}{}", dunce::canonicalize(&base).unwrap().display(), "/").replace('\\', "/");
-
-        // Get all scanned files as strings relative to the base directory
-        let files = scanned_files(&mut scanner, Path::new(&base));
-
-        // Get all scanned globs as strings relative to the base directory
-        let globs = scanned_globs(&mut scanner, Path::new(&base));
-
-        // Get all normalized sources as strings relative to the base directory
-        let mut normalized_sources = scanner
-            .get_normalized_sources()
-            .iter()
-            .map(|glob| {
-                if glob.pattern.starts_with('/') {
-                    format!("{}{}", glob.base, glob.pattern)
-                } else {
-                    format!("{}/{}", glob.base, glob.pattern)
-                }
-            })
-            // Normalize paths to use unix style separators
-            .map(|file| file.replace('\\', "/").replace(&base_dir, ""))
-            .collect::<Vec<_>>();
-        normalized_sources.sort();
-
-        let tree = fs_tree(&dir, &files);
-
-        ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            candidates,
-            tree,
-        }
-    }
-
-    fn scan(paths_with_content: &[(&str, &str)]) -> ScanResult {
-        scan_with_globs(paths_with_content, vec!["@source '**/*'"])
-    }
-
-    #[test]
-    fn it_should_work_with_a_set_of_root_files() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            ("index.html", ""),
-            ("a.html", ""),
-            ("b.html", ""),
-            ("c.html", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ a.html
-        ├── ✓ b.html
-        ├── ✓ c.html
-        └── ✓ index.html
-        ");
-        assert_eq!(files, vec!["a.html", "b.html", "c.html", "index.html"]);
-        assert_eq!(globs, vec!["*"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_work_with_a_set_of_root_files_and_ignore_ignored_files() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            (".gitignore", "b.html"),
-            ("index.html", ""),
-            ("a.html", ""),
-            ("b.html", ""),
-            ("c.html", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       b.html
-        ├── ✓ a.html
-        ├── ✗ b.html
-        ├── ✓ c.html
-        └── ✓ index.html
-        ");
-
-        assert_eq!(files, vec!["a.html", "c.html", "index.html"]);
-        assert_eq!(globs, vec!["*"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_list_all_files_in_the_public_folder_explicitly() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            ("index.html", ""),
-            ("public/a.html", ""),
-            ("public/b.html", ""),
-            ("public/c.html", ""),
-            ("public/nested/c.html", ""),
-            ("public/deeply/nested/c.html", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ index.html
-        └── ✓ public
-            ├── ✓ a.html
-            ├── ✓ b.html
-            ├── ✓ c.html
-            ├── ✓ deeply
-            │   └── ✓ nested
-            │       └── ✓ c.html
-            └── ✓ nested
-                └── ✓ c.html
-        ");
-
-        assert_eq!(
-            files,
-            vec![
-                "index.html",
-                "public/a.html",
-                "public/b.html",
-                "public/c.html",
-                "public/deeply/nested/c.html",
-                "public/nested/c.html",
-            ]
-        );
-        assert_eq!(globs, vec!["*"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_list_nested_folders_explicitly_in_the_public_folder() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            ("index.html", ""),
-            ("public/a.html", ""),
-            ("public/b.html", ""),
-            ("public/c.html", ""),
-            ("public/nested/a.html", ""),
-            ("public/nested/b.html", ""),
-            ("public/nested/c.html", ""),
-            ("public/nested/again/a.html", ""),
-            ("public/very/deeply/nested/a.html", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ index.html
-        └── ✓ public
-            ├── ✓ a.html
-            ├── ✓ b.html
-            ├── ✓ c.html
-            ├── ✓ nested
-            │   ├── ✓ a.html
-            │   ├── ✓ again
-            │   │   └── ✓ a.html
-            │   ├── ✓ b.html
-            │   └── ✓ c.html
-            └── ✓ very
-                └── ✓ deeply
-                    └── ✓ nested
-                        └── ✓ a.html
-        ");
-
-        assert_eq!(
-            files,
-            vec![
-                "index.html",
-                "public/a.html",
-                "public/b.html",
-                "public/c.html",
-                "public/nested/a.html",
-                "public/nested/again/a.html",
-                "public/nested/b.html",
-                "public/nested/c.html",
-                "public/very/deeply/nested/a.html",
-            ]
-        );
-        assert_eq!(globs, vec!["*",]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_list_all_files_in_the_public_folder_explicitly_except_ignored_files() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            (".gitignore", "public/b.html\na.html"),
-            ("index.html", ""),
-            ("public/a.html", ""),
-            ("public/b.html", ""),
-            ("public/c.html", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       public/b.html
-        │       a.html
-        ├── ✓ index.html
-        └── ✓ public
-            ├── ✗ a.html
-            ├── ✗ b.html
-            └── ✓ c.html
-        ");
-
-        assert_eq!(files, vec!["index.html", "public/c.html",]);
-        assert_eq!(globs, vec!["*"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_use_a_glob_for_top_level_folders() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            ("index.html", ""),
-            ("src/a.html", ""),
-            ("src/b.html", ""),
-            ("src/c.html", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ index.html
-        └── ✓ src
-            ├── ✓ a.html
-            ├── ✓ b.html
-            └── ✓ c.html
-        ");
-
-        assert_eq!(
-            files,
-            vec!["index.html", "src/a.html", "src/b.html", "src/c.html"]
-        );
-        assert_eq!(globs, vec![
-            "*",
-            "src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-        ]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_ignore_binary_files() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            ("index.html", ""),
-            ("a.mp4", ""),
-            ("b.png", ""),
-            ("c.lock", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ a.mp4
-        ├── ✗ b.png
-        ├── ✗ c.lock
-        └── ✓ index.html
-        ");
-
-        assert_eq!(files, vec!["index.html"]);
-        assert_eq!(globs, vec!["*"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17569
-    #[test]
-    fn it_should_not_ignore_folders_that_end_with_a_binary_extension() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            // Looks like `.pages` binary extension, but it's a folder
-            ("some.pages/index.html", "content-['some.pages/index.html']"),
-            // Ignore a specific folder. This is to ensure that this still "wins" from the internal
-            // solution of dealing with binary extensions for files only.
-            (".gitignore", "other.pages"),
-            (
-                "other.pages/index.html",
-                "content-['other.pages/index.html']",
-            ),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       other.pages
-        ├── ✗ other.pages
-        │   └── ✗ index.html
-        └── ✓ some.pages
-            └── ✓ index.html
-        ");
-
-        assert_eq!(files, vec!["some.pages/index.html"]);
-        assert_eq!(globs, vec!["*", "some.pages/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_ignore_known_extensions() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            ("index.html", ""),
-            ("a.css", ""),
-            ("b.sass", ""),
-            ("c.less", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ a.css
-        ├── ✗ b.sass
-        ├── ✗ c.less
-        └── ✓ index.html
-        ");
-
-        assert_eq!(files, vec!["a.css", "index.html"]);
-        assert_eq!(globs, vec!["*"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_find_new_extensions() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[("src/index.my-extension", "")]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ src
-            └── ✓ index.my-extension
-        ");
-
-        assert_eq!(files, vec!["src/index.my-extension"]);
-        assert_eq!(globs, vec!["*", "src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,my-extension,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_ignore_known_files() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            ("index.html", ""),
-            ("package-lock.json", ""),
-            ("yarn.lock", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ index.html
-        ├── ✗ package-lock.json
-        └── ✗ yarn.lock
-        ");
-
-        assert_eq!(files, vec!["index.html"]);
-        assert_eq!(globs, vec!["*"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_ignore_and_expand_nested_ignored_folders() {
-        let ScanResult {
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            // Explicitly listed root files
-            ("foo.html", ""),
-            ("bar.html", ""),
-            ("baz.html", ""),
-            // Nested folder A, using glob
-            ("nested-a/foo.html", ""),
-            ("nested-a/bar.html", ""),
-            ("nested-a/baz.html", ""),
-            // Nested folder B, with deeply nested files, using glob
-            ("nested-b/deeply-nested/foo.html", ""),
-            ("nested-b/deeply-nested/bar.html", ""),
-            ("nested-b/deeply-nested/baz.html", ""),
-            // Nested folder C, with ignored sub-folder
-            ("nested-c/foo.html", ""),
-            ("nested-c/bar.html", ""),
-            ("nested-c/baz.html", ""),
-            //   Ignored folder
-            ("nested-c/.gitignore", "ignored-folder/"),
-            ("nested-c/ignored-folder/foo.html", ""),
-            ("nested-c/ignored-folder/bar.html", ""),
-            ("nested-c/ignored-folder/baz.html", ""),
-            //   Deeply nested, without issues
-            ("nested-c/sibling-folder/foo.html", ""),
-            ("nested-c/sibling-folder/bar.html", ""),
-            ("nested-c/sibling-folder/baz.html", ""),
-            // Nested folder D, with deeply nested ignored folder
-            ("nested-d/foo.html", ""),
-            ("nested-d/bar.html", ""),
-            ("nested-d/baz.html", ""),
-            ("nested-d/.gitignore", "deep/"),
-            ("nested-d/very/deeply/nested/deep/foo.html", ""),
-            ("nested-d/very/deeply/nested/deep/bar.html", ""),
-            ("nested-d/very/deeply/nested/deep/baz.html", ""),
-            ("nested-d/very/deeply/nested/foo.html", ""),
-            ("nested-d/very/deeply/nested/bar.html", ""),
-            ("nested-d/very/deeply/nested/baz.html", ""),
-            ("nested-d/very/deeply/nested/directory/foo.html", ""),
-            ("nested-d/very/deeply/nested/directory/bar.html", ""),
-            ("nested-d/very/deeply/nested/directory/baz.html", ""),
-            ("nested-d/very/deeply/nested/directory/again/foo.html", ""),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ bar.html
-        ├── ✓ baz.html
-        ├── ✓ foo.html
-        ├── ✓ nested-a
-        │   ├── ✓ bar.html
-        │   ├── ✓ baz.html
-        │   └── ✓ foo.html
-        ├── ✓ nested-b
-        │   └── ✓ deeply-nested
-        │       ├── ✓ bar.html
-        │       ├── ✓ baz.html
-        │       └── ✓ foo.html
-        ├── ✓ nested-c
-        │   ├── ✗ .gitignore
-        │   │       ignored-folder/
-        │   ├── ✓ bar.html
-        │   ├── ✓ baz.html
-        │   ├── ✓ foo.html
-        │   ├── ✗ ignored-folder
-        │   │   ├── ✗ bar.html
-        │   │   ├── ✗ baz.html
-        │   │   └── ✗ foo.html
-        │   └── ✓ sibling-folder
-        │       ├── ✓ bar.html
-        │       ├── ✓ baz.html
-        │       └── ✓ foo.html
-        └── ✓ nested-d
-            ├── ✗ .gitignore
-            │       deep/
-            ├── ✓ bar.html
-            ├── ✓ baz.html
-            ├── ✓ foo.html
-            └── ✓ very
-                └── ✓ deeply
-                    └── ✓ nested
-                        ├── ✓ bar.html
-                        ├── ✓ baz.html
-                        ├── ✗ deep
-                        │   ├── ✗ bar.html
-                        │   ├── ✗ baz.html
-                        │   └── ✗ foo.html
-                        ├── ✓ directory
-                        │   ├── ✓ again
-                        │   │   └── ✓ foo.html
-                        │   ├── ✓ bar.html
-                        │   ├── ✓ baz.html
-                        │   └── ✓ foo.html
-                        └── ✓ foo.html
-        ");
-
-        assert_eq!(
-            files,
-            vec![
-                "bar.html",
-                "baz.html",
-                "foo.html",
-                "nested-a/bar.html",
-                "nested-a/baz.html",
-                "nested-a/foo.html",
-                "nested-b/deeply-nested/bar.html",
-                "nested-b/deeply-nested/baz.html",
-                "nested-b/deeply-nested/foo.html",
-                "nested-c/bar.html",
-                "nested-c/baz.html",
-                "nested-c/foo.html",
-                "nested-c/sibling-folder/bar.html",
-                "nested-c/sibling-folder/baz.html",
-                "nested-c/sibling-folder/foo.html",
-                "nested-d/bar.html",
-                "nested-d/baz.html",
-                "nested-d/foo.html",
-                "nested-d/very/deeply/nested/bar.html",
-                "nested-d/very/deeply/nested/baz.html",
-                "nested-d/very/deeply/nested/directory/again/foo.html",
-                "nested-d/very/deeply/nested/directory/bar.html",
-                "nested-d/very/deeply/nested/directory/baz.html",
-                "nested-d/very/deeply/nested/directory/foo.html",
-                "nested-d/very/deeply/nested/foo.html",
-            ]
-        );
-        assert_eq!(globs, vec![
-            "*",
-            "nested-a/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            "nested-b/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            "nested-c/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            "nested-c/sibling-folder/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            "nested-d/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            "nested-d/very/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            "nested-d/very/deeply/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            "nested-d/very/deeply/nested/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            "nested-d/very/deeply/nested/directory/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-        ]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_scan_for_utilities() {
-        let mut ignores = String::new();
-        ignores.push_str("# md:font-bold\n");
-        ignores.push_str("foo.html\n");
-
-        let ScanResult {
-            candidates,
-            normalized_sources,
-            tree,
-            ..
-        } = scan(&[
-            // The gitignore file is used to filter out files but not scanned for candidates
-            (".gitignore", &ignores),
-            // A file that should definitely be scanned
-            ("index.html", "font-bold md:flex"),
-            // A file that should definitely not be scanned
-            ("foo.jpg", "xl:font-bold"),
-            // A file that is ignored
-            ("foo.html", "lg:font-bold"),
-            // An Angular file using the class shorthand syntax
-            (
-                "index.angular.html",
-                "<div [class.underline]=\"bool\"></div>",
-            ),
-            // A svelte file with `class:foo="bar"` syntax
-            ("index.svelte", "<div class:px-4='condition'></div>"),
-            ("index2.svelte", "<div\n\tclass:px-5='condition'></div>"),
-            ("index3.svelte", "<div\n  class:px-6='condition'></div>"),
-            ("index4.svelte", "<div\nclass:px-7='condition'></div>"),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       # md:font-bold
-        │       foo.html
-        ├── ✗ foo.html
-        ├── ✗ foo.jpg
-        ├── ✓ index.angular.html
-        ├── ✓ index.html
-        ├── ✓ index.svelte
-        ├── ✓ index2.svelte
-        ├── ✓ index3.svelte
-        └── ✓ index4.svelte
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "bool",
-                "class",
-                "condition",
-                "font-bold",
-                "md:flex",
-                "px-4",
-                "px-5",
-                "px-6",
-                "px-7",
-                "underline"
-            ]
-        );
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn it_should_be_possible_to_scan_in_the_parent_directory() {
-        let ScanResult {
-            candidates,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[("foo/bar/baz/foo.html", "content-['foo.html']")],
-            vec!["@source '**/*'", "@source './foo/bar/baz/..'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ foo
-            └── ✓ bar
-                └── ✓ baz
-                    └── ✓ foo.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['foo.html']"]);
-        assert_eq!(normalized_sources, vec!["**/*", "foo/bar/**/*"]);
-    }
-
-    #[test]
-    fn it_should_preserve_source_order_when_referencing_a_sibling_project() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("project-a/src/index.css", ""),
-                ("project-b/keep/keep.html", "content-['GOOD-1']"),
-                ("project-b/ignored/ignored.html", "content-['BAD-1']"),
-                ("project-b/ignored/except.html", "content-['GOOD-2']"),
-            ],
-        );
-
-        let base = dir.join("project-a/src");
-        let mut scanner = Scanner::new(vec![
-            public_source_entry_from_pattern(base.clone(), "@source '../../project-b'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../../project-b/ignored'"),
-            public_source_entry_from_pattern(
-                base.clone(),
-                "@source '../../project-b/ignored/except.html'",
-            ),
-        ]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ project-a
-        │   └── ✗ src
-        │       └── ✗ index.css
-        └── ✓ project-b
-            ├── ✓ ignored
-            │   ├── ✓ except.html
-            │   └── ✗ ignored.html
-            └── ✓ keep
-                └── ✓ keep.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['GOOD-1']", "content-['GOOD-2']"]);
-    }
-
-    #[test]
-    fn it_should_scan_files_without_extensions() {
-        // These look like folders, but they are files
-        let ScanResult {
-            candidates,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[("my-file", "content-['my-file']")],
-            vec!["@source '**/*'", "@source './my-file'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ my-file
-        ");
-
-        assert_eq!(candidates, vec!["content-['my-file']"]);
-        assert_eq!(normalized_sources, vec!["**/*", "my-file"]);
-    }
-
-    #[test]
-    fn it_should_scan_folders_with_extensions() {
-        // These look like files, but they are folders
-        let ScanResult {
-            candidates,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                (
-                    "my-folder.templates/foo.html",
-                    "content-['my-folder.templates/foo.html']",
-                ),
-                (
-                    "my-folder.bin/foo.html",
-                    "content-['my-folder.bin/foo.html']",
-                ),
-            ],
-            vec![
-                "@source '**/*'",
-                "@source './my-folder.templates'",
-                "@source './my-folder.bin'",
-            ],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ my-folder.bin
-        │   └── ✓ foo.html
-        └── ✓ my-folder.templates
-            └── ✓ foo.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['my-folder.bin/foo.html']",
-                "content-['my-folder.templates/foo.html']",
-            ]
-        );
-        assert_eq!(
-            normalized_sources,
-            vec!["**/*", "my-folder.bin/**/*", "my-folder.templates/**/*"]
-        );
-    }
-
-    #[test]
-    fn it_should_scan_content_paths() {
-        let ScanResult {
-            candidates,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                // We know that `.styl` extensions are ignored, so they are not covered by auto content
-                // detection.
-                ("foo.styl", "content-['foo.styl']"),
-            ],
-            vec!["@source '**/*'", "@source '*.styl'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ foo.styl
-        ");
-
-        assert_eq!(candidates, vec!["content-['foo.styl']"]);
-        assert_eq!(normalized_sources, vec!["**/*", "*.styl"]);
-    }
-
-    #[test]
-    fn it_should_drop_invalid_utf8_candidates() {
-        let dir = tempdir().unwrap();
-        fs::write(dir.path().join("index.html"), b"flex bg-[\x80] block").unwrap();
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.path().to_path_buf(),
-            "@source '*.html'",
-        )]);
-
-        let candidates = scanner
-            .scan()
-            .into_iter()
-            .map(String::into_bytes)
-            .collect::<Vec<_>>();
-
-        assert_eq!(candidates, vec![b"block".to_vec(), b"flex".to_vec()]);
-    }
-
-    #[test]
-    fn it_should_not_store_invalid_utf8_candidates_during_incremental_scans() {
-        let dir = tempdir().unwrap();
-        let file = dir.path().join("index.html");
-        fs::write(&file, b"flex bg-[\x80]").unwrap();
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.path().to_path_buf(),
-            "@source '*.html'",
-        )]);
-
-        let candidates = scanner
-            .scan_content(vec![ChangedContent::File(file, "html".into())])
-            .into_iter()
-            .map(String::into_bytes)
-            .collect::<Vec<_>>();
-        assert_eq!(candidates, vec![b"flex".to_vec()]);
-
-        let candidates =
-            scanner.scan_content(vec![ChangedContent::Content("block".into(), "html".into())]);
-        assert_eq!(candidates, vec!["block"]);
-
-        let candidates = scanner
-            .scan()
-            .into_iter()
-            .map(String::into_bytes)
-            .collect::<Vec<_>>();
-        assert_eq!(candidates, vec![b"block".to_vec(), b"flex".to_vec()]);
-    }
-
-    #[test]
-    fn it_should_drop_invalid_utf8_candidates_with_positions() {
-        let dir = tempdir().unwrap();
-        let file = dir.path().join("index.html");
-        fs::write(
-            &file,
-            b"flex bg-[\x80] group-[]:block group-[]:bg-[\x80] grid",
-        )
-        .unwrap();
-
-        let mut scanner = Scanner::new(vec![]);
-        let candidates = scanner
-            .get_candidates_with_positions(ChangedContent::File(file, "html".into()))
-            .into_iter()
-            .map(|(candidate, position)| (candidate.into_bytes(), position))
-            .collect::<Vec<_>>();
-
-        assert_eq!(
-            candidates,
-            vec![
-                (b"flex".to_vec(), 0),
-                (b"group-[]:block".to_vec(), 12),
-                (b"grid".to_vec(), 43),
-            ]
-        );
-    }
-
-    #[test]
-    fn it_should_preserve_valid_utf8_candidates() {
-        let dir = tempdir().unwrap();
-        fs::write(
-            dir.path().join("index.html"),
-            "before:content-['💩'] bg-[é] font-[中文]".as_bytes(),
-        )
-        .unwrap();
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.path().to_path_buf(),
-            "@source '*.html'",
-        )]);
-
-        assert_eq!(
-            scanner.scan(),
-            vec!["before:content-['💩']", "bg-[é]", "font-[中文]"]
-        );
-    }
-
-    #[test]
-    fn it_should_preserve_paths_for_sources_ending_in_a_deep_glob() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                (
-                    "blog/2024/foo/bar/baz/index.html",
-                    "content-['blog/2024/foo/bar/baz/index.html']",
-                ),
-                (
-                    "blog/2024/foo/bar/qux/index.html",
-                    "content-['blog/2024/foo/bar/qux/index.html']",
-                ),
-            ],
-            vec!["@source './blog/*/foo/bar/baz/**/*'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ blog
-            └── ✓ 2024
-                └── ✓ foo
-                    └── ✓ bar
-                        ├── ✓ baz
-                        │   └── ✓ index.html
-                        └── ✗ qux
-                            └── ✗ index.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['blog/2024/foo/bar/baz/index.html']"]
-        );
-        assert_eq!(files, vec!["blog/2024/foo/bar/baz/index.html"]);
-        assert_eq!(globs, vec!["blog/*/foo/bar/baz/**/*"]);
-        assert_eq!(normalized_sources, vec!["blog/*/foo/bar/baz/**/*"]);
-    }
-
-    #[test]
-    fn it_should_scan_next_dynamic_folders() {
-        let ScanResult {
-            candidates,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                // We know that `.styl` extensions are ignored, so they are not covered by auto content
-                // detection.
-                ("app/[slug]/page.styl", "content-['[slug]']"),
-                ("app/[...slug]/page.styl", "content-['[...slug]']"),
-                ("app/[[...slug]]/page.styl", "content-['[[...slug]]']"),
-                ("app/(theme)/page.styl", "content-['(theme)']"),
-            ],
-            vec!["@source '**/*'", "@source './**/*.{styl}'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ app
-            ├── ✓ (theme)
-            │   └── ✓ page.styl
-            ├── ✓ [...slug]
-            │   └── ✓ page.styl
-            ├── ✓ [[...slug]]
-            │   └── ✓ page.styl
-            └── ✓ [slug]
-                └── ✓ page.styl
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['(theme)']",
-                "content-['[...slug]']",
-                "content-['[[...slug]]']",
-                "content-['[slug]']",
-            ],
-        );
-        assert_eq!(normalized_sources, vec!["**/*", "**/*.styl"]);
-    }
-
-    #[test]
-    fn it_should_scan_absolute_paths() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Initialize this directory as a git repository
-        let _ = Command::new("git").arg("init").current_dir(&dir).output();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("project-a/index.html", "content-['project-a/index.html']"),
-                ("project-b/index.html", "content-['project-b/index.html']"),
-            ],
-        );
-
-        // Get POSIX-style absolute path
-        let full_path = format!("{}", dir.display()).replace('\\', "/");
-
-        let sources = vec![PublicSourceEntry {
-            base: full_path.clone(),
-            pattern: full_path.clone(),
-            negated: false,
-        }];
-
-        let mut scanner = Scanner::new(sources);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        ├── ✓ project-a
-        │   └── ✓ index.html
-        └── ✓ project-b
-            └── ✓ index.html
-        ");
-
-        // We've done the initial scan and found the files
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['project-a/index.html']",
-                "content-['project-b/index.html']"
-            ]
-        );
-    }
-
-    #[test]
-    fn it_should_scan_content_paths_even_when_they_are_git_ignored() {
-        let ScanResult {
-            candidates,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                (".gitignore", "foo.styl"),
-                // We know that `.styl` extensions are ignored, so they are not covered by auto content
-                // detection.
-                ("foo.styl", "content-['foo.styl']"),
-            ],
-            // But explicitly including them should still work
-            vec!["@source '**/*'", "@source 'foo.styl'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       foo.styl
-        └── ✓ foo.styl
-        ");
-
-        assert_eq!(candidates, vec!["content-['foo.styl']"]);
-        assert_eq!(normalized_sources, vec!["**/*", "foo.styl"]);
-    }
-
-    #[test]
-    fn it_should_pick_up_new_files() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Initialize this directory as a git repository
-        let _ = Command::new("git").arg("init").current_dir(&dir).output();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("project-a/index.html", "content-['project-a/index.html']"),
-                ("project-b/index.html", "content-['project-b/index.html']"),
-            ],
-        );
-
-        let sources = vec![
-            public_source_entry_from_pattern(dir.join("project-a"), "@source '**/*'"),
-            public_source_entry_from_pattern(dir.join("project-b"), "@source '**/*'"),
-        ];
-
-        let mut scanner = Scanner::new(sources);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        ├── ✓ project-a
-        │   └── ✓ index.html
-        └── ✓ project-b
-            └── ✓ index.html
-        ");
-
-        // We've done the initial scan and found the files
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['project-a/index.html']",
-                "content-['project-b/index.html']"
-            ]
-        );
-
-        // We have to sleep because it might run too fast (seriously) and the
-        // mtimes of the directories end up being the same as the last time we
-        // checked them
-        sleep(Duration::from_millis(100));
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("project-a/new.html", "content-['project-a/new.html']"),
-                ("project-b/new.html", "content-['project-b/new.html']"),
-            ],
-        );
-
-        let candidates = scanner.scan();
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['project-a/index.html']",
-                "content-['project-a/new.html']",
-                "content-['project-b/index.html']",
-                "content-['project-b/new.html']"
-            ]
-        );
-
-        // We have to sleep because it might run too fast (seriously) and the
-        // mtimes of the directories end up being the same as the last time we
-        // checked them
-        sleep(Duration::from_millis(100));
-
-        // Create folders
-        create_files_in(
-            &dir,
-            &[
-                (
-                    "project-a/sub1/sub2/index.html",
-                    "content-['project-a/sub1/sub2/index.html']",
-                ),
-                (
-                    "project-b/sub1/sub2/index.html",
-                    "content-['project-b/sub1/sub2/index.html']",
-                ),
-            ],
-        );
-
-        let candidates = scanner.scan();
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['project-a/index.html']",
-                "content-['project-a/new.html']",
-                "content-['project-a/sub1/sub2/index.html']",
-                "content-['project-b/index.html']",
-                "content-['project-b/new.html']",
-                "content-['project-b/sub1/sub2/index.html']"
-            ]
-        );
-
-        // We have to sleep because it might run too fast (seriously) and the
-        // mtimes of the directories end up being the same as the last time we
-        // checked them
-        sleep(Duration::from_millis(100));
-
-        // Create folders
-        create_files_in(
-            &dir,
-            &[
-                (
-                    "project-a/sub1/sub2/new.html",
-                    "content-['project-a/sub1/sub2/new.html']",
-                ),
-                (
-                    "project-b/sub1/sub2/new.html",
-                    "content-['project-b/sub1/sub2/new.html']",
-                ),
-            ],
-        );
-
-        let candidates = scanner.scan();
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['project-a/index.html']",
-                "content-['project-a/new.html']",
-                "content-['project-a/sub1/sub2/index.html']",
-                "content-['project-a/sub1/sub2/new.html']",
-                "content-['project-b/index.html']",
-                "content-['project-b/new.html']",
-                "content-['project-b/sub1/sub2/index.html']",
-                "content-['project-b/sub1/sub2/new.html']"
-            ]
-        );
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        ├── ✓ project-a
-        │   ├── ✓ index.html
-        │   ├── ✓ new.html
-        │   └── ✓ sub1
-        │       └── ✓ sub2
-        │           ├── ✓ index.html
-        │           └── ✓ new.html
-        └── ✓ project-b
-            ├── ✓ index.html
-            ├── ✓ new.html
-            └── ✓ sub1
-                └── ✓ sub2
-                    ├── ✓ index.html
-                    └── ✓ new.html
-        ");
-    }
-
-    #[test]
-    fn it_should_remove_deleted_files_from_scanned_files() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Initialize this directory as a git repository
-        let _ = Command::new("git").arg("init").current_dir(&dir).output();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("src/index.html", "content-['src/index.html']"),
-                ("src/keep.html", "content-['src/keep.html']"),
-                ("src/remove.html", "content-['src/remove.html']"),
-            ],
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '**/*'",
-        )]);
-
-        scanner.scan();
-        assert_eq!(
-            scanned_files(&mut scanner, &dir),
-            vec!["src/index.html", "src/keep.html", "src/remove.html"]
-        );
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        └── ✓ src
-            ├── ✓ index.html
-            ├── ✓ keep.html
-            └── ✓ remove.html
-        ");
-
-        fs::remove_file(dir.join("src/remove.html")).unwrap();
-
-        scanner.scan();
-        assert_eq!(
-            scanned_files(&mut scanner, &dir),
-            vec!["src/index.html", "src/keep.html"]
-        );
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        └── ✓ src
-            ├── ✓ index.html
-            └── ✓ keep.html
-        ");
-    }
-
-    #[test]
-    fn it_should_remove_deleted_directories_from_scanned_files() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Initialize this directory as a git repository
-        let _ = Command::new("git").arg("init").current_dir(&dir).output();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("src/index.html", "content-['src/index.html']"),
-                ("src/keep/index.html", "content-['src/keep/index.html']"),
-                ("src/remove/index.html", "content-['src/remove/index.html']"),
-                (
-                    "src/remove/nested/index.html",
-                    "content-['src/remove/nested/index.html']",
-                ),
-            ],
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '**/*'",
-        )]);
-
-        scanner.scan();
-        assert_eq!(
-            scanned_files(&mut scanner, &dir),
-            vec![
-                "src/index.html",
-                "src/keep/index.html",
-                "src/remove/index.html",
-                "src/remove/nested/index.html",
-            ]
-        );
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        └── ✓ src
-            ├── ✓ index.html
-            ├── ✓ keep
-            │   └── ✓ index.html
-            └── ✓ remove
-                ├── ✓ index.html
-                └── ✓ nested
-                    └── ✓ index.html
-        ");
-
-        fs::remove_dir_all(dir.join("src/remove")).unwrap();
-
-        scanner.scan();
-        assert_eq!(
-            scanned_files(&mut scanner, &dir),
-            vec!["src/index.html", "src/keep/index.html"]
-        );
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        └── ✓ src
-            ├── ✓ index.html
-            └── ✓ keep
-                └── ✓ index.html
-        ");
-    }
-
-    #[test]
-    fn it_should_remove_deleted_directories_from_scanned_globs() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Initialize this directory as a git repository
-        let _ = Command::new("git").arg("init").current_dir(&dir).output();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("index.html", "content-['index.html']"),
-                ("src/index.html", "content-['src/index.html']"),
-            ],
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '**/*'",
-        )]);
-
-        scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        ├── ✓ index.html
-        └── ✓ src
-            └── ✓ index.html
-        ");
-
-        let globs = scanned_globs(&mut scanner, &dir);
-        assert!(globs.iter().any(|glob| glob.starts_with("src/**/*")));
-
-        fs::remove_dir_all(dir.join("src")).unwrap();
-
-        scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        . (git)
-        └── ✓ index.html
-        ");
-
-        let globs = scanned_globs(&mut scanner, &dir);
-        assert!(!globs.iter().any(|glob| glob.starts_with("src/**/*")));
-    }
-
-    #[test]
-    fn it_should_track_files_scanned_by_the_last_scan() {
-        let dir = tempdir().unwrap().into_path();
-
-        let _ = Command::new("git").arg("init").current_dir(&dir).output();
-
-        create_files_in(
-            &dir,
-            &[
-                ("src/index.html", "content-['src/index.html']"),
-                ("src/keep.html", "content-['src/keep.html']"),
-            ],
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '**/*'",
-        )]);
-
-        assert_eq!(
-            scanner.scan(),
-            vec!["content-['src/index.html']", "content-['src/keep.html']"]
-        );
-
-        assert_eq!(
-            scanner.scan(),
-            vec!["content-['src/index.html']", "content-['src/keep.html']"]
-        );
-        assert_eq!(scanner.get_scanned_files(), Vec::<String>::new());
-
-        sleep(Duration::from_millis(10));
-        fs::write(dir.join("src/index.html"), "content-['src/changed.html']").unwrap();
-
-        assert_eq!(
-            scanner.scan(),
-            vec![
-                "content-['src/changed.html']",
-                "content-['src/index.html']",
-                "content-['src/keep.html']",
-            ]
-        );
-        assert_eq!(
-            normalize_files(scanner.get_scanned_files(), &dir),
-            vec!["src/index.html"]
-        );
-    }
-
-    #[test]
-    fn it_should_ignore_negated_custom_sources() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("src/index.ts", "content-['src/index.ts']"),
-                ("src/colors/red.jsx", "content-['src/colors/red.jsx']"),
-                ("src/colors/blue.tsx", "content-['src/colors/blue.tsx']"),
-                ("src/colors/green.tsx", "content-['src/colors/green.tsx']"),
-                ("src/utils/string.ts", "content-['src/utils/string.ts']"),
-                ("src/utils/date.ts", "content-['src/utils/date.ts']"),
-                ("src/utils/file.ts", "content-['src/utils/file.ts']"),
-                (
-                    "src/admin/foo/template.html",
-                    "content-['src/admin/template.html']",
-                ),
-                (
-                    "src/templates/index.html",
-                    "content-['src/templates/index.html']",
-                ),
-            ],
-            vec![
-                "@source '**/*'",
-                "@source not 'src/index.ts'",
-                "@source not '**/*.{jsx,tsx}'",
-                "@source not 'src/utils'",
-                "@source not 'dist'",
-            ],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ src
-            ├── ✓ admin
-            │   └── ✓ foo
-            │       └── ✓ template.html
-            ├── ✗ colors
-            │   ├── ✗ blue.tsx
-            │   ├── ✗ green.tsx
-            │   └── ✗ red.jsx
-            ├── ✗ index.ts
-            ├── ✓ templates
-            │   └── ✓ index.html
-            └── ✗ utils
-                ├── ✗ date.ts
-                ├── ✗ file.ts
-                └── ✗ string.ts
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['src/admin/template.html']",
-                "content-['src/templates/index.html']",
-            ]
-        );
-
-        assert_eq!(
-            files,
-            vec![
-                "src/admin/foo/template.html",
-                "src/templates/index.html",
-                // These files are ignored and thus do not need to be watched:
-
-                // "src/colors/blue.tsx",
-                // "src/colors/green.tsx",
-                // "src/colors/red.jsx",
-                // "src/index.ts",
-                // "src/utils/date.ts",
-                // "src/utils/file.ts",
-                // "src/utils/string.ts"
-            ]
-        );
-        assert_eq!(
-            globs,
-            vec![
-                "*",
-                "src/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-                "src/admin/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-                "src/colors/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-                "src/templates/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-            ]
-        );
-
-        assert_eq!(normalized_sources, vec!["**/*",]);
-    }
-
-    #[test]
-    fn it_should_include_defined_extensions_that_are_ignored_by_default() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            // Typically skipped
-            &[
-                ("src/index.exe", "content-['src/index.exe']"),
-                ("src/index.bin", "content-['src/index.bin']"),
-                ("out/out.exe", "content-['out/out.exe']"),
-            ],
-            // But explicitly included
-            vec!["@source '**/*'", "@source 'src/**/*.{exe,bin}'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ out
-        │   └── ✗ out.exe
-        └── ✓ src
-            ├── ✓ index.bin
-            └── ✓ index.exe
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['src/index.bin']", "content-['src/index.exe']",]
-        );
-        assert_eq!(files, vec!["src/index.bin", "src/index.exe",]);
-        assert_eq!(
-            globs,
-            vec![
-                "*",
-                // Contains `.exe` and `.bin` in the list
-                "out/**/*.{aspx,astro,bin,cjs,cts,eex,erb,exe,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-                "src/{**/*.bin,**/*.exe,**/*.{aspx,astro,bin,cjs,cts,eex,erb,exe,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}}",
-            ]
-        );
-        assert_eq!(
-            normalized_sources,
-            vec!["**/*", "src/**/*.bin", "src/**/*.exe"]
-        );
-    }
-
-    #[test]
-    fn it_should_work_with_manual_glob_only() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("index.html", "content-['index.html']"),
-                ("src/index.html", "content-['src/index.html']"),
-                ("src/ignore.html", "content-['src/ignore.html']"),
-                ("src/admin/index.html", "content-['src/admin/index.html']"),
-                ("src/admin/ignore.html", "content-['src/admin/ignore.html']"),
-                (
-                    "src/dashboard/index.html",
-                    "content-['src/dashboard/index.html']",
-                ),
-                (
-                    "src/dashboard/ignore.html",
-                    "content-['src/dashboard/ignore.html']",
-                ),
-                ("src/lib.ts", "content-['src/lib.ts']"),
-            ],
-            vec![
-                "@source './src/**/*.html'",
-                "@source not './src/index.html'",
-                "@source not './src/**/ignore.html'",
-            ],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ index.html
-        └── ✓ src
-            ├── ✓ admin
-            │   ├── ✗ ignore.html
-            │   └── ✓ index.html
-            ├── ✓ dashboard
-            │   ├── ✗ ignore.html
-            │   └── ✓ index.html
-            ├── ✗ ignore.html
-            ├── ✗ index.html
-            └── ✗ lib.ts
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['src/admin/index.html']",
-                "content-['src/dashboard/index.html']",
-            ]
-        );
-
-        assert_eq!(
-            files,
-            vec!["src/admin/index.html", "src/dashboard/index.html",]
-        );
-        assert_eq!(globs, vec!["src/**/*.html"]);
-        assert_eq!(normalized_sources, vec!["src/**/*.html"]);
-    }
-
-    #[test]
-    fn it_should_restrict_explicit_file_sources_to_the_matching_file() {
-        let ScanResult {
-            candidates,
-            files,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("src/foo.html", "content-['src/foo.html']"),
-                ("src/bar.html", "content-['src/bar.html']"),
-            ],
-            vec!["@source './src/foo.html'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ src
-            ├── ✗ bar.html
-            └── ✓ foo.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['src/foo.html']"]);
-        assert_eq!(files, vec!["src/foo.html"]);
-    }
-
-    #[test]
-    fn it_should_combine_multiple_restricted_sources_for_the_same_base() {
-        let ScanResult {
-            candidates,
-            files,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("src/foo.html", "content-['src/foo.html']"),
-                ("src/bar.html", "content-['src/bar.html']"),
-                ("src/baz.html", "content-['src/baz.html']"),
-            ],
-            vec!["@source './src/foo.html'", "@source './src/bar.html'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ src
-            ├── ✓ bar.html
-            ├── ✗ baz.html
-            └── ✓ foo.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['src/bar.html']", "content-['src/foo.html']"]
-        );
-        assert_eq!(files, vec!["src/bar.html", "src/foo.html"]);
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/20333
-    #[test]
-    fn it_should_combine_nested_and_root_restricted_sources() {
-        // The restriction (`*`) added for the root-level file must not prevent walking into the
-        // `nested` folder that another explicit source points into. At the same time, relaxing
-        // that restriction to `/*` must not accidentally open up sibling folders (`ignore-me`)
-        // or files that no explicit source points at.
-        let paths_with_content = &[
-            ("nested/component.html", "content-['nested/component.html']"),
-            ("nested/ignore-me.html", "content-['nested/ignore-me.html']"),
-            ("ignore-me/component.html", "content-['ignore-me']"),
-            ("component-sources.classes.txt", "content-['classes.txt']"),
-            ("ignore-me.txt", "content-['ignore-me.txt']"),
-        ];
-
-        let ScanResult {
-            candidates,
-            files,
-            tree,
-            ..
-        } = scan_with_globs(
-            paths_with_content,
-            vec![
-                "@source './nested/component.html'",
-                "@source './component-sources.classes.txt'",
-            ],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ component-sources.classes.txt
-        ├── ✗ ignore-me
-        │   └── ✗ component.html
-        ├── ✗ ignore-me.txt
-        └── ✓ nested
-            ├── ✓ component.html
-            └── ✗ ignore-me.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['classes.txt']",
-                "content-['nested/component.html']"
-            ]
-        );
-        assert_eq!(
-            files,
-            vec!["component-sources.classes.txt", "nested/component.html"]
-        );
-
-        // Same setup, but with the root-level source declared first
-        let ScanResult {
-            candidates,
-            files,
-            tree,
-            ..
-        } = scan_with_globs(
-            paths_with_content,
-            vec![
-                "@source './component-sources.classes.txt'",
-                "@source './nested/component.html'",
-            ],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ component-sources.classes.txt
-        ├── ✗ ignore-me
-        │   └── ✗ component.html
-        ├── ✗ ignore-me.txt
-        └── ✓ nested
-            ├── ✓ component.html
-            └── ✗ ignore-me.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['classes.txt']",
-                "content-['nested/component.html']"
-            ]
-        );
-        assert_eq!(
-            files,
-            vec!["component-sources.classes.txt", "nested/component.html"]
-        );
-    }
-
-    #[test]
-    fn it_should_allow_later_ignores_to_override_restricted_sources() {
-        let ScanResult {
-            candidates,
-            files,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[("src/foo.html", "content-['src/foo.html']")],
-            vec!["@source './src/foo.html'", "@source not './src/foo.html'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✗ src
-            └── ✗ foo.html
-        ");
-
-        assert!(candidates.is_empty());
-        assert!(files.is_empty());
-    }
-
-    #[test]
-    fn it_should_handle_sources_with_parent_patterns() {
-        {
-            let ScanResult {
-                candidates,
-                files,
-                tree,
-                ..
-            } = scan_with_globs(
-                &[
-                    ("src/foo.html", "content-['src/foo.html']"),
-                    ("src/bar/index.html", "content-['src/bar/index.html']"),
-                    ("src/bar/ignore.html", "content-['src/bar/ignore.html']"),
-                ],
-                vec!["@source './src/ba*/*.html'"],
-            );
-
-            assert_snapshot!(tree, @"
-            . (git)
-            └── ✓ src
-                ├── ✓ bar
-                │   ├── ✓ ignore.html
-                │   └── ✓ index.html
-                └── ✗ foo.html
-            ");
-
-            assert_eq!(
-                candidates,
-                vec![
-                    "content-['src/bar/ignore.html']",
-                    "content-['src/bar/index.html']"
-                ]
-            );
-            assert_eq!(files, vec!["src/bar/ignore.html", "src/bar/index.html"]);
-        }
-
-        {
-            let ScanResult {
-                candidates,
-                files,
-                tree,
-                ..
-            } = scan_with_globs(
-                &[
-                    ("src/foo.html", "content-['src/foo.html']"),
-                    ("src/bar/index.html", "content-['src/bar/index.html']"),
-                    ("src/bar/ignore.html", "content-['src/bar/ignore.html']"),
-                ],
-                vec![
-                    "@source './src/ba*/*.html'",
-                    "@source not './src/bar/ignore.html'", // Ignore the ignore.html
-                ],
-            );
-
-            assert_snapshot!(tree, @"
-            . (git)
-            └── ✓ src
-                ├── ✓ bar
-                │   ├── ✗ ignore.html
-                │   └── ✓ index.html
-                └── ✗ foo.html
-            ");
-
-            assert_eq!(candidates, vec!["content-['src/bar/index.html']"]);
-            assert_eq!(files, vec!["src/bar/index.html"]);
-        }
-
-        {
-            let ScanResult {
-                candidates,
-                files,
-                tree,
-                ..
-            } = scan_with_globs(
-                &[
-                    ("src/foo.html", "content-['src/foo.html']"),
-                    ("src/bar/index.html", "content-['src/bar/index.html']"),
-                    ("src/bar/ignore.html", "content-['src/bar/ignore.html']"),
-                ],
-                vec!["@source '**/*'", "@source not './src/ba*/*.html'"],
-            );
-
-            assert_snapshot!(tree, @"
-            . (git)
-            └── ✓ src
-                ├── ✗ bar
-                │   ├── ✗ ignore.html
-                │   └── ✗ index.html
-                └── ✓ foo.html
-            ");
-
-            assert_eq!(candidates, vec!["content-['src/foo.html']"]);
-            assert_eq!(files, vec!["src/foo.html"]);
-        }
-
-        {
-            let ScanResult {
-                candidates,
-                files,
-                tree,
-                ..
-            } = scan_with_globs(
-                &[
-                    ("src/foo.html", "content-['src/foo.html']"),
-                    ("src/bar/index.html", "content-['src/bar/index.html']"),
-                    ("src/bar/ignore.html", "content-['src/bar/ignore.html']"),
-                ],
-                vec![
-                    "@source '**/*'",
-                    "@source not './src/ba*/*.html'",
-                    "@source './src/bar/index.html'", //
-                ],
-            );
-
-            assert_snapshot!(tree, @"
-            . (git)
-            └── ✓ src
-                ├── ✓ bar
-                │   ├── ✗ ignore.html
-                │   └── ✓ index.html
-                └── ✓ foo.html
-            ");
-
-            assert_eq!(
-                candidates,
-                vec!["content-['src/bar/index.html']", "content-['src/foo.html']"]
-            );
-            assert_eq!(files, vec!["src/bar/index.html", "src/foo.html"]);
-        }
-    }
-
-    #[test]
-    fn nested_explicit_source_should_not_suppress_siblings_of_broad_source() {
-        // A broad `**/*` source should keep auto-detecting every file, even when a more
-        // specific `@source` points at a single file inside a subdirectory. The restriction
-        // added for the explicit file must not hide its siblings from the broad source.
-        let ScanResult {
-            candidates,
-            files,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("src/components/button.html", "content-['button']"),
-                ("src/components/card.html", "content-['card']"),
-            ],
-            vec!["@source '**/*'", "@source './src/components/button.html'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ src
-            └── ✓ components
-                ├── ✓ button.html
-                └── ✓ card.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['button']", "content-['card']"]);
-        assert_eq!(
-            files,
-            vec!["src/components/button.html", "src/components/card.html"]
-        );
-    }
-
-    #[test]
-    fn nested_explicit_source_should_not_suppress_siblings_of_auto_source() {
-        // Same as above, but the broad source is an auto-detected directory (`@source "src"`)
-        // and the explicit file lives in a nested subdirectory of it.
-        let ScanResult {
-            candidates,
-            files,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("src/components/button.html", "content-['button']"),
-                ("src/components/card.html", "content-['card']"),
-            ],
-            vec!["@source 'src'", "@source './src/components/button.html'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ src
-            └── ✓ components
-                ├── ✓ button.html
-                └── ✓ card.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['button']", "content-['card']"]);
-        assert_eq!(
-            files,
-            vec!["src/components/button.html", "src/components/card.html"]
-        );
-    }
-
-    #[test]
-    fn root_file_source_should_not_suppress_sibling_source_roots() {
-        let ScanResult {
-            candidates, tree, ..
-        } = scan_with_globs(
-            &[
-                ("index.css", ""),
-                ("src/index.html", "content-['src/index.html']"),
-                ("pages/foo.html", "content-['pages/foo.html']"),
-                ("pages/nested/foo.html", "content-['pages/nested/foo.html']"),
-            ],
-            vec![
-                "@source './src'",
-                "@source './pages/**/*.html'",
-                "@source './index.css'",
-            ],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✓ index.css
-        ├── ✓ pages
-        │   ├── ✓ foo.html
-        │   └── ✓ nested
-        │       └── ✓ foo.html
-        └── ✓ src
-            └── ✓ index.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['pages/foo.html']",
-                "content-['pages/nested/foo.html']",
-                "content-['src/index.html']",
-            ]
-        );
-    }
-
-    #[test]
-    fn it_respects_gitignore_in_workspace_root() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                (".gitignore", "ignore-1.html\nweb/ignore-2.html"),
-                ("src/index.html", "content-['src/index.html']"),
-                ("web/index.html", "content-['web/index.html']"),
-                ("web/ignore-1.html", "content-['web/ignore-1.html']"),
-                ("web/ignore-2.html", "content-['web/ignore-2.html']"),
-            ],
-            vec!["@source './src'", "@source './web'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       ignore-1.html
-        │       web/ignore-2.html
-        ├── ✓ src
-        │   └── ✓ index.html
-        └── ✓ web
-            ├── ✗ ignore-1.html
-            ├── ✗ ignore-2.html
-            └── ✓ index.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['src/index.html']", "content-['web/index.html']",]
-        );
-
-        assert_eq!(files, vec!["src/index.html", "web/index.html",]);
-        assert_eq!(globs, vec!["src/*", "web/*",]);
-        assert_eq!(normalized_sources, vec!["src/**/*", "web/**/*",]);
-    }
-
-    #[test]
-    fn it_includes_skipped_by_default_extensions_with_a_specific_source() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("src/logo.jpg", "content-['/src/logo.jpg']"),
-                ("src/logo.png", "content-['/src/logo.png']"),
-            ],
-            vec!["@source './src/logo.{jpg,png}'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ src
-            ├── ✓ logo.jpg
-            └── ✓ logo.png
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['/src/logo.jpg']", "content-['/src/logo.png']"]
-        );
-        assert_eq!(files, vec!["src/logo.jpg", "src/logo.png"]);
-        assert!(globs.is_empty());
-        assert_eq!(normalized_sources, vec!["src/logo.jpg", "src/logo.png"]);
-    }
-
-    #[test]
-    fn it_respects_gitignore_in_workspace_root_for_manual_globs() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                (".gitignore", "ignore-1.html\n/web/ignore-2.html"),
-                ("web/index.html", "content-['web/index.html']"),
-                ("web/ignore-1.html", "content-['web/ignore-1.html']"),
-                ("web/ignore-2.html", "content-['web/ignore-2.html']"),
-            ],
-            vec!["@source './web'", "@source './web/ignore-1.html'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       ignore-1.html
-        │       /web/ignore-2.html
-        └── ✓ web
-            ├── ✓ ignore-1.html
-            ├── ✗ ignore-2.html
-            └── ✓ index.html
-        ");
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['web/ignore-1.html']",
-                "content-['web/index.html']",
-            ]
-        );
-
-        assert_eq!(files, vec!["web/ignore-1.html", "web/index.html",]);
-        assert_eq!(globs, vec!["web/*"]);
-        assert_eq!(normalized_sources, vec!["web/**/*", "web/ignore-1.html"]);
-    }
-
-    #[test]
-    fn it_respects_gitignore_files_with_whitelist_patterns() {
-        // https://github.com/tailwindlabs/tailwindcss/discussions/20382
-        //
-        // A `.gitignore` that ignores everything (`/*`) and then whitelists specific
-        // directories and files using negated patterns.
-        let ScanResult {
-            files,
-            candidates,
-            tree,
-            ..
-        } = scan(&[
-            (
-                ".gitignore",
-                "/*\n!/app\n!/public\n!/package.json\n!/.gitignore\n",
-            ),
-            ("app/index.html", "content-['app/index.html']"),
-            ("public/index.html", "content-['public/index.html']"),
-            ("package.json", ""),
-            // These are all ignored by the `/*` rule because they are not whitelisted
-            ("build/generated.html", "content-['build/generated.html']"),
-            ("logs/dev.log", "content-['logs/dev.log']"),
-            (
-                "node_modules/my-ui-lib/index.html",
-                "content-['node_modules/my-ui-lib/index.html']",
-            ),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       /*
-        │       !/app
-        │       !/public
-        │       !/package.json
-        │       !/.gitignore
-        ├── ✓ app
-        │   └── ✓ index.html
-        ├── ✗ build
-        │   └── ✗ generated.html
-        ├── ✗ logs
-        │   └── ✗ dev.log
-        ├── ✗ node_modules
-        │   └── ✗ my-ui-lib
-        │       └── ✗ index.html
-        ├── ✓ package.json
-        └── ✓ public
-            └── ✓ index.html
-        ");
-
-        assert_eq!(
-            files,
-            vec!["app/index.html", "package.json", "public/index.html"]
-        );
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['app/index.html']",
-                "content-['public/index.html']"
-            ]
-        );
-    }
-
-    #[test]
-    fn it_respects_gitignore_files_with_nested_whitelist_patterns() {
-        // Example from the official `.gitignore` documentation:
-        //
-        // ```gitignore
-        // # exclude everything except directory foo/bar
-        // /*
-        // !/foo
-        // /foo/*
-        // !/foo/bar
-        // ```
-        let ScanResult {
-            files,
-            candidates,
-            tree,
-            ..
-        } = scan(&[
-            (
-                ".gitignore",
-                "# exclude everything except directory foo/bar\n/*\n!/foo\n/foo/*\n!/foo/bar\n",
-            ),
-            ("foo/bar/index.html", "content-['foo/bar/index.html']"),
-            (
-                "foo/bar/nested/index.html",
-                "content-['foo/bar/nested/index.html']",
-            ),
-            // These are all ignored because they are not inside `foo/bar`
-            ("index.html", "content-['index.html']"),
-            ("foo/index.html", "content-['foo/index.html']"),
-            ("foo/baz/index.html", "content-['foo/baz/index.html']"),
-        ]);
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       # exclude everything except directory foo/bar
-        │       /*
-        │       !/foo
-        │       /foo/*
-        │       !/foo/bar
-        ├── ✓ foo
-        │   ├── ✓ bar
-        │   │   ├── ✓ index.html
-        │   │   └── ✓ nested
-        │   │       └── ✓ index.html
-        │   ├── ✗ baz
-        │   │   └── ✗ index.html
-        │   └── ✗ index.html
-        └── ✗ index.html
-        ");
-
-        assert_eq!(
-            files,
-            vec!["foo/bar/index.html", "foo/bar/nested/index.html"]
-        );
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['foo/bar/index.html']",
-                "content-['foo/bar/nested/index.html']"
-            ]
-        );
-    }
-
-    #[test]
-    fn explicit_source_directories_respect_their_own_gitignore() {
-        // A directory referenced via `@source` behaves like an auto source detection
-        // root. The `.gitignore` file _inside_ that directory still applies to its
-        // contents. Only when the directory itself is ignored (by an ancestor
-        // `.gitignore`, see the tests above) do we bypass the ignore rules.
-        let ScanResult {
-            files,
-            candidates,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("vendor/.gitignore", "ignored.html"),
-                ("vendor/index.html", "content-['vendor/index.html']"),
-                ("vendor/ignored.html", "content-['vendor/ignored.html']"),
-            ],
-            vec!["@source 'vendor'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ vendor
-            ├── ✗ .gitignore
-            │       ignored.html
-            ├── ✗ ignored.html
-            └── ✓ index.html
-        ");
-
-        assert_eq!(files, vec!["vendor/index.html"]);
-        assert_eq!(candidates, vec!["content-['vendor/index.html']"]);
-    }
-
-    #[test]
-    fn explicit_sources_can_include_files_inside_gitignored_parent_directories() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                (".gitignore", "src/efgh/"),
-                ("src/efgh/index.html", "content-['src/efgh/index.html']"),
-                ("src/efgh/ignore.js", "content-['src/efgh/ignore.js']"),
-                ("src/abcd/index.html", "content-['src/abcd/index.html']"),
-            ],
-            vec!["@source './src/ef*/*.html'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       src/efgh/
-        └── ✓ src
-            ├── ✗ abcd
-            │   └── ✗ index.html
-            └── ✓ efgh
-                ├── ✗ ignore.js
-                └── ✓ index.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['src/efgh/index.html']"]);
-        assert_eq!(files, vec!["src/efgh/index.html"]);
-        assert_eq!(globs, vec!["src/ef*/*.html"]);
-    }
-
-    #[test]
-    fn skips_ignore_files_outside_of_a_repo() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                // This file should always be picked up
-                ("home/project/apps/web/index.html", "content-['index.html']"),
-                // Set up various ignore rules
-                ("home/.gitignore", "ignore-home.html"),
-                ("home/project/.gitignore", "ignore-project.html"),
-                ("home/project/apps/.gitignore", "ignore-apps.html"),
-                ("home/project/apps/web/.gitignore", "ignore-web.html"),
-                // Some of these should be ignored depending on which dir is the repo root
-                (
-                    "home/project/apps/web/ignore-home.html",
-                    "content-['ignore-home.html']",
-                ),
-                (
-                    "home/project/apps/web/ignore-project.html",
-                    "content-['ignore-project.html']",
-                ),
-                (
-                    "home/project/apps/web/ignore-apps.html",
-                    "content-['ignore-apps.html']",
-                ),
-                (
-                    "home/project/apps/web/ignore-web.html",
-                    "content-['ignore-web.html']",
-                ),
-                // Auto content detection outside of `web/`
-                (
-                    "home/project/apps/admin/index.html",
-                    "content-['home/project/apps/admin/index.html']",
-                ),
-                // Manual sources outside of `web/`
-                (
-                    "home/project/apps/dashboard/index.html",
-                    "content-['home/project/apps/dashboard/index.html']",
-                ),
-            ],
-        );
-
-        let sources = vec![
-            public_source_entry_from_pattern(
-                dir.join("home/project/apps/web")
-                    .to_string_lossy()
-                    .to_string()
-                    .into(),
-                "@source '**/*'",
-            ),
-            public_source_entry_from_pattern(
-                dir.join("home/project/apps/web")
-                    .to_string_lossy()
-                    .to_string()
-                    .into(),
-                "@source '../admin'",
-            ),
-            public_source_entry_from_pattern(
-                dir.join("home/project/apps/web")
-                    .to_string_lossy()
-                    .to_string()
-                    .into(),
-                "@source '../dashboard/*.html'",
-            ),
-        ];
-
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ home
-            ├── ✗ .gitignore
-            │       ignore-home.html
-            └── ✓ project
-                ├── ✗ .gitignore
-                │       ignore-project.html
-                └── ✓ apps
-                    ├── ✗ .gitignore
-                    │       ignore-apps.html
-                    ├── ✓ admin
-                    │   └── ✓ index.html
-                    ├── ✓ dashboard
-                    │   └── ✓ index.html
-                    └── ✓ web
-                        ├── ✗ .gitignore
-                        │       ignore-web.html
-                        ├── ✗ ignore-apps.html
-                        ├── ✗ ignore-home.html
-                        ├── ✗ ignore-project.html
-                        ├── ✗ ignore-web.html
-                        └── ✓ index.html
-        ");
-
-        // All ignore files are applied because there's no git repo
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['home/project/apps/admin/index.html']",
-                "content-['home/project/apps/dashboard/index.html']",
-                "content-['index.html']"
-            ]
-        );
-
-        // Initialize `home` as a git repository and scan again
-        // The results should be the same as before
-        _ = Command::new("git")
-            .arg("init")
-            .current_dir(dir.join("home"))
-            .output();
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ home (git)
-            ├── ✗ .gitignore
-            │       ignore-home.html
-            └── ✓ project
-                ├── ✗ .gitignore
-                │       ignore-project.html
-                └── ✓ apps
-                    ├── ✗ .gitignore
-                    │       ignore-apps.html
-                    ├── ✓ admin
-                    │   └── ✓ index.html
-                    ├── ✓ dashboard
-                    │   └── ✓ index.html
-                    └── ✓ web
-                        ├── ✗ .gitignore
-                        │       ignore-web.html
-                        ├── ✗ ignore-apps.html
-                        ├── ✗ ignore-home.html
-                        ├── ✗ ignore-project.html
-                        ├── ✗ ignore-web.html
-                        └── ✓ index.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['home/project/apps/admin/index.html']",
-                "content-['home/project/apps/dashboard/index.html']",
-                "content-['index.html']"
-            ]
-        );
-
-        // Drop the .git folder
-        fs::remove_dir_all(dir.join("home/.git")).unwrap();
-
-        // Initialize `home/project` as a git repository and scan again
-        _ = Command::new("git")
-            .arg("init")
-            .current_dir(dir.join("home/project"))
-            .output();
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ home
-            ├── ✗ .gitignore
-            │       ignore-home.html
-            └── ✓ project (git)
-                ├── ✗ .gitignore
-                │       ignore-project.html
-                └── ✓ apps
-                    ├── ✗ .gitignore
-                    │       ignore-apps.html
-                    ├── ✓ admin
-                    │   └── ✓ index.html
-                    ├── ✓ dashboard
-                    │   └── ✓ index.html
-                    └── ✓ web
-                        ├── ✗ .gitignore
-                        │       ignore-web.html
-                        ├── ✗ ignore-apps.html
-                        ├── ✓ ignore-home.html
-                        ├── ✗ ignore-project.html
-                        ├── ✗ ignore-web.html
-                        └── ✓ index.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['home/project/apps/admin/index.html']",
-                "content-['home/project/apps/dashboard/index.html']",
-                "content-['ignore-home.html']",
-                "content-['index.html']"
-            ]
-        );
-
-        // Drop the .git folder
-        fs::remove_dir_all(dir.join("home/project/.git")).unwrap();
-
-        // Initialize `home/project/apps` as a git repository and scan again
-        _ = Command::new("git")
-            .arg("init")
-            .current_dir(dir.join("home/project/apps"))
-            .output();
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ home
-            ├── ✗ .gitignore
-            │       ignore-home.html
-            └── ✓ project
-                ├── ✗ .gitignore
-                │       ignore-project.html
-                └── ✓ apps (git)
-                    ├── ✗ .gitignore
-                    │       ignore-apps.html
-                    ├── ✓ admin
-                    │   └── ✓ index.html
-                    ├── ✓ dashboard
-                    │   └── ✓ index.html
-                    └── ✓ web
-                        ├── ✗ .gitignore
-                        │       ignore-web.html
-                        ├── ✗ ignore-apps.html
-                        ├── ✓ ignore-home.html
-                        ├── ✓ ignore-project.html
-                        ├── ✗ ignore-web.html
-                        └── ✓ index.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['home/project/apps/admin/index.html']",
-                "content-['home/project/apps/dashboard/index.html']",
-                "content-['ignore-home.html']",
-                "content-['ignore-project.html']",
-                "content-['index.html']"
-            ]
-        );
-
-        // Drop the .git folder
-        fs::remove_dir_all(dir.join("home/project/apps/.git")).unwrap();
-
-        // Initialize `home/project/apps` as a git repository and scan again
-        _ = Command::new("git")
-            .arg("init")
-            .current_dir(dir.join("home/project/apps/web"))
-            .output();
-
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ home
-            ├── ✗ .gitignore
-            │       ignore-home.html
-            └── ✓ project
-                ├── ✗ .gitignore
-                │       ignore-project.html
-                └── ✓ apps
-                    ├── ✗ .gitignore
-                    │       ignore-apps.html
-                    ├── ✓ admin
-                    │   └── ✓ index.html
-                    ├── ✓ dashboard
-                    │   └── ✓ index.html
-                    └── ✓ web (git)
-                        ├── ✗ .gitignore
-                        │       ignore-web.html
-                        ├── ✓ ignore-apps.html
-                        ├── ✓ ignore-home.html
-                        ├── ✓ ignore-project.html
-                        ├── ✗ ignore-web.html
-                        └── ✓ index.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['home/project/apps/admin/index.html']",
-                "content-['home/project/apps/dashboard/index.html']",
-                "content-['ignore-apps.html']",
-                "content-['ignore-home.html']",
-                "content-['ignore-project.html']",
-                "content-['index.html']",
-            ]
-        );
-    }
-
-    #[test]
-    fn test_explicitly_ignore_explicitly_allowed_files() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("src/keep-me.html", "content-['keep-me.html']"),
-                ("src/ignore-me.html", "content-['ignore-me.html']"),
-            ],
-        );
-
-        let sources = vec![
-            public_source_entry_from_pattern(dir.clone(), "@source '**/*.html'"),
-            public_source_entry_from_pattern(dir.clone(), "@source not 'src/ignore-me.html'"),
-        ];
-
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ src
-            ├── ✗ ignore-me.html
-            └── ✓ keep-me.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['keep-me.html']"]);
-    }
-
-    #[test]
-    fn test_works_with_filenames_containing_glob_characters() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("src/app/[foo]/ignore-me.html", "content-['ignore-me.html']"),
-                ("src/app/[foo]/keep-me.html", "content-['keep-me.html']"),
-            ],
-        );
-
-        let sources = vec![
-            public_source_entry_from_pattern(dir.clone(), "@source '**/*'"),
-            public_source_entry_from_pattern(
-                dir.clone(),
-                "@source not 'src/app/[foo]/ignore*.html'",
-            ),
-        ];
-
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ src
-            └── ✓ app
-                └── ✓ [foo]
-                    ├── ✗ ignore-me.html
-                    └── ✓ keep-me.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['keep-me.html']"]);
-    }
-
-    #[test]
-    fn test_ignore_files_can_be_included_with_custom_source_rule() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[("src/keep-me.html", "content-['src/keep-me.html']")],
-        );
-
-        let mut scanner = Scanner::new(vec![
-            public_source_entry_from_pattern(dir.clone(), "@source '**/*.html'"),
-            public_source_entry_from_pattern(
-                dir.clone(),
-                "@source not 'src/ignored-by-source-not.html'",
-            ),
-        ]);
-
-        let candidates = scanner.scan();
-        assert_eq!(candidates, vec!["content-['src/keep-me.html']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ src
-            └── ✓ keep-me.html
-        ");
-
-        // Create new files that should definitely be ignored
-        create_files_in(
-            &dir,
-            &[
-                // Create new file that matches the `@source '…'` glob
-                ("src/new-file.html", "content-['src/new-file.html']"),
-                // Create new file that is ignored based on file extension
-                (
-                    "src/ignore-by-extension.bin",
-                    "content-['src/ignore-by-extension.bin']",
-                ),
-                // Create a file that is ignored based on the `.gitignore` file
-                (".gitignore", "src/ignored-by-gitignore.html"),
-                (
-                    "src/ignored-by-gitignore.html",
-                    "content-['src/ignored-by-gitignore.html']",
-                ),
-                // Create a file that is ignored by the `@source not '…'`
-                (
-                    "src/ignored-by-source-not.html",
-                    "content-['src/ignored-by-source-not.html']",
-                ),
-            ],
-        );
-
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       src/ignored-by-gitignore.html
-        └── ✓ src
-            ├── ✗ ignore-by-extension.bin
-            ├── ✓ ignored-by-gitignore.html
-            ├── ✗ ignored-by-source-not.html
-            ├── ✓ keep-me.html
-            └── ✓ new-file.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                // Ignored by git ignore BUT included by `@source "**/*.html"`
-                "content-['src/ignored-by-gitignore.html']",
-                "content-['src/keep-me.html']",
-                "content-['src/new-file.html']"
-            ]
-        );
-    }
-
-    #[test]
-    fn test_allow_default_ignored_files() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(&dir, &[("foo.styl", "content-['foo.styl']")]);
-
-        let sources = vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '**/*'",
-        )];
-
-        let mut scanner = Scanner::new(sources.clone());
-
-        let candidates = scanner.scan();
-        assert!(candidates.is_empty());
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✗ foo.styl
-        ");
-
-        // Explicitly allow `.styl` files
-        let mut scanner = Scanner::new(vec![
-            public_source_entry_from_pattern(dir.clone(), "@source '**/*'"),
-            public_source_entry_from_pattern(dir.clone(), "@source '*.styl'"),
-        ]);
-
-        let candidates = scanner.scan();
-        assert_eq!(candidates, vec!["content-['foo.styl']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        └── ✓ foo.styl
-        ");
-    }
-
-    #[test]
-    fn test_allow_default_ignored_files_via_gitignore() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                ("index.html", "content-['index.html']"),
-                (".gitignore", "index.html"),
-            ],
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '**/*'",
-        )]);
-
-        let candidates = scanner.scan();
-        assert!(candidates.is_empty());
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       index.html
-        └── ✗ index.html
-        ");
-
-        let mut scanner = Scanner::new(vec![
-            public_source_entry_from_pattern(dir.clone(), "@source '**/*'"),
-            public_source_entry_from_pattern(dir.clone(), "@source './*.html'"),
-        ]);
-
-        let candidates = scanner.scan();
-        assert_eq!(candidates, vec!["content-['index.html']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       index.html
-        └── ✓ index.html
-        ");
-    }
-
-    #[test]
-    fn test_allow_explicit_node_modules_paths() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                // Current project
-                ("src/index.html", "content-['src/index.html']"),
-                // Ignore file
-                (".gitignore", "node_modules"),
-                // Library ignored by default
-                (
-                    "node_modules/my-ui-lib/index.html",
-                    "content-['node_modules/my-ui-lib/index.html']",
-                ),
-            ],
-        );
-
-        // Default auto source detection
-        let sources = vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source './'",
-        )];
-
-        let mut scanner = Scanner::new(sources.clone());
-
-        let candidates = scanner.scan();
-        assert_eq!(candidates, vec!["content-['src/index.html']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       node_modules
-        ├── ✗ node_modules
-        │   └── ✗ my-ui-lib
-        │       └── ✗ index.html
-        └── ✓ src
-            └── ✓ index.html
-        ");
-
-        // Explicitly listing all `*.html` files, should not include `node_modules` because it's
-        // ignored
-        let sources = vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '**/*.html'",
-        )];
-
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-        assert_eq!(candidates, vec!["content-['src/index.html']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       node_modules
-        ├── ✗ node_modules
-        │   └── ✗ my-ui-lib
-        │       └── ✗ index.html
-        └── ✓ src
-            └── ✓ index.html
-        ");
-
-        // Explicitly listing all `*.html` files
-        // Explicitly list the `node_modules/my-ui-lib`
-        //
-        let sources = vec![
-            public_source_entry_from_pattern(dir.clone(), "@source '**/*.html'"),
-            public_source_entry_from_pattern(dir.clone(), "@source 'node_modules/my-ui-lib'"),
-        ];
-
-        let mut scanner = Scanner::new(sources.clone());
-        let candidates = scanner.scan();
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['node_modules/my-ui-lib/index.html']",
-                "content-['src/index.html']"
-            ]
-        );
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       node_modules
-        ├── ✓ node_modules
-        │   └── ✓ my-ui-lib
-        │       └── ✓ index.html
-        └── ✓ src
-            └── ✓ index.html
-        ");
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/19844
-    #[test]
-    fn test_allow_explicit_sources_ignored_by_allow_list_gitignore() {
-        let ScanResult {
-            candidates, tree, ..
-        } = scan_with_globs(
-            &[
-                (".gitignore", "*\n!/app\n!/app/design\n!/app/design/**\n"),
-                (
-                    "app/design/frontend/theme/templates/component.phtml",
-                    "content-['app/design/frontend/theme/templates/component.phtml']",
-                ),
-                (
-                    "vendor/acme/theme/module/templates/component.phtml",
-                    "content-['vendor/acme/theme/module/templates/component.phtml']",
-                ),
-            ],
-            vec!["@source 'vendor/acme/theme'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       *
-        │       !/app
-        │       !/app/design
-        │       !/app/design/**
-        ├── ✗ app
-        │   └── ✗ design
-        │       └── ✗ frontend
-        │           └── ✗ theme
-        │               └── ✗ templates
-        │                   └── ✗ component.phtml
-        └── ✓ vendor
-            └── ✓ acme
-                └── ✓ theme
-                    └── ✓ module
-                        └── ✓ templates
-                            └── ✓ component.phtml
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['vendor/acme/theme/module/templates/component.phtml']"]
-        );
-    }
-
-    #[test]
-    fn test_ignore_node_modules_without_gitignore() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                (
-                    "packages/web/index.html",
-                    "content-['packages/web/index.html']",
-                ),
-                (
-                    "node_modules/index.html",
-                    "content-['node_modules/index.html']",
-                ),
-                (
-                    "packages/web/node_modules/index.html",
-                    "content-['packages/web/node_modules/index.html']",
-                ),
-            ],
-            vec!["@source '**/*'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ node_modules
-        │   └── ✗ index.html
-        └── ✓ packages
-            └── ✓ web
-                ├── ✓ index.html
-                └── ✗ node_modules
-                    └── ✗ index.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['packages/web/index.html']"]);
-
-        assert_eq!(files, vec!["packages/web/index.html",]);
-        assert_eq!(globs, vec!["*", "packages/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}", "packages/web/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn test_ignore_gitignore_in_node_modules_source() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                (".gitignore", "node_modules\ndist"),
-                (
-                    "node_modules/my-ui-lib/dist/index.html",
-                    "content-['node_modules/my-ui-lib/dist/index.html']",
-                ),
-                (
-                    "node_modules/my-ui-lib/node.exe",
-                    "content-['node_modules/my-ui-lib/node.exe']",
-                ),
-            ],
-            vec!["@source 'node_modules/my-ui-lib'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       node_modules
-        │       dist
-        └── ✓ node_modules
-            └── ✓ my-ui-lib
-                ├── ✓ dist
-                │   └── ✓ index.html
-                └── ✗ node.exe
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['node_modules/my-ui-lib/dist/index.html']"]
-        );
-        assert_eq!(files, vec!["node_modules/my-ui-lib/dist/index.html"]);
-        assert_eq!(globs, vec!["node_modules/my-ui-lib/*", "node_modules/my-ui-lib/dist/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}"]);
-        assert_eq!(normalized_sources, vec!["node_modules/my-ui-lib/**/*"]);
-    }
-
-    #[test]
-    fn test_manually_scanning_files_should_follow_all_rules() {
-        // Create a temporary working directory
-        let dir = tempdir().unwrap().into_path();
-
-        // Create files
-        create_files_in(
-            &dir,
-            &[
-                // Ignore all `.jsx` files, and all `generated` folders
-                (".gitignore", "*.jsx\ngenerated/"),
-                // .tsx files are allowed
-                (
-                    "src/components/button.tsx",
-                    "content-['src/components/button.tsx']",
-                ),
-                // .jsx files are not allowed
-                (
-                    "src/components/button.jsx",
-                    "content-['src/components/button.jsx']",
-                ),
-            ],
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '**/*'",
-        )]);
-
-        let candidates = scanner.scan();
-        assert_eq!(candidates, vec!["content-['src/components/button.tsx']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       *.jsx
-        │       generated/
-        └── ✓ src
-            └── ✓ components
-                ├── ✗ button.jsx
-                └── ✓ button.tsx
-        ");
-
-        // Create 2 new files, one "good" and one "bad" file, and manually scan them. This should
-        // only return the "good" file because the "bad" one is ignored by a `.gitignore` file.
-        create_files_in(
-            &dir,
-            &[
-                (
-                    "src/components/good.tsx",
-                    "content-['src/components/good.tsx']",
-                ),
-                (
-                    "src/components/bad.jsx",
-                    "content-['src/components/bad.jsx']",
-                ),
-            ],
-        );
-
-        let candidates = scanner.scan_content(vec![
-            ChangedContent::File(dir.join("src/components/good.tsx"), "tsx".to_owned()),
-            ChangedContent::File(dir.join("src/components/bad.jsx"), "jsx".to_owned()),
-        ]);
-
-        assert_eq!(candidates, vec!["content-['src/components/good.tsx']"]);
-
-        // Create a generated file in a nested folder that is ignored by a `.gitignore` file higher
-        // up the tree.
-        create_files_in(
-            &dir,
-            &[
-                (
-                    "src/components/generated/bad.tsx",
-                    "content-['src/components/generated/bad.tsx']",
-                ),
-                (
-                    "src/components/generated/bad.jsx",
-                    "content-['src/components/generated/bad.jsx']",
-                ),
-            ],
-        );
-
-        let candidates = scanner.scan_content(vec![
-            ChangedContent::File(
-                dir.join("src/components/generated/bad.tsx"),
-                "tsx".to_owned(),
-            ),
-            ChangedContent::File(
-                dir.join("src/components/generated/bad.jsx"),
-                "jsx".to_owned(),
-            ),
-        ]);
-
-        assert!(candidates.is_empty());
-    }
-
-    #[test]
-    fn test_works_with_utf8_special_character_paths() {
-        let ScanResult {
-            candidates,
-            files,
-            globs,
-            normalized_sources,
-            tree,
-            ..
-        } = scan_with_globs(
-            &[
-                ("src/💩.js", "content-['src/💩.js']"),
-                ("src/🤦‍♂️.tsx", "content-['src/🤦‍♂️.tsx']"),
-                ("src/🤦‍♂️/foo.tsx", "content-['src/🤦‍♂️/foo.tsx']"),
-            ],
-            vec!["@source '**/*'", "@source not 'src/🤦‍♂️'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        └── ✓ src
-            ├── ✓ 💩.js
-            ├── ✗ 🤦‍♂️
-            │   └── ✗ foo.tsx
-            └── ✓ 🤦‍♂️.tsx
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['src/💩.js']", "content-['src/🤦‍♂️.tsx']"]
-        );
-
-        assert_eq!(files, vec!["src/💩.js", "src/🤦‍♂️.tsx"]);
-        assert_eq!(globs, vec!["*", "src/*/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}"]);
-        assert_eq!(normalized_sources, vec!["**/*"]);
-    }
-
-    #[test]
-    fn test_glob_with_symlinks() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(
-            &dir,
-            &[
-                (".gitignore", "node_modules\ndist"),
-                (
-                    "node_modules/.pnpm/@org+my-ui-library/dist/index.ts",
-                    "content-['node_modules/.pnpm/@org+my-ui-library/dist/index.ts']",
-                ),
-                // Make sure the `@org` does exist
-                ("node_modules/@org/.gitkeep", ""),
-            ],
-        );
-        let _ = symlink(
-            dir.join("node_modules/.pnpm/@org+my-ui-library"),
-            dir.join("node_modules/@org/my-ui-library"),
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source 'node_modules'",
-        )]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       node_modules
-        │       dist
-        └── ✓ node_modules
-            ├── ✓ .pnpm
-            │   └── ✓ @org+my-ui-library
-            │       └── ✓ dist
-            │           └── ✓ index.ts
-            └── ✓ @org
-                ├── ✓ .gitkeep
-                └── ✓ my-ui-library → ../.pnpm/@org+my-ui-library
-                    └── ✓ dist
-                        └── ✓ index.ts
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['node_modules/.pnpm/@org+my-ui-library/dist/index.ts']"]
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source 'node_modules/@org/my-ui-library'",
-        )]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       node_modules
-        │       dist
-        └── ✓ node_modules
-            ├── ✓ .pnpm
-            │   └── ✓ @org+my-ui-library
-            │       └── ✓ dist
-            │           └── ✓ index.ts
-            └── ✓ @org
-                ├── ✗ .gitkeep
-                └── ✓ my-ui-library → ../.pnpm/@org+my-ui-library
-                    └── ✓ dist
-                        └── ✓ index.ts
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['node_modules/.pnpm/@org+my-ui-library/dist/index.ts']"]
-        );
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source 'node_modules/@org'",
-        )]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ .gitignore
-        │       node_modules
-        │       dist
-        └── ✓ node_modules
-            ├── ✓ .pnpm
-            │   └── ✓ @org+my-ui-library
-            │       └── ✓ dist
-            │           └── ✓ index.ts
-            └── ✓ @org
-                ├── ✓ .gitkeep
-                └── ✓ my-ui-library → ../.pnpm/@org+my-ui-library
-                    └── ✓ dist
-                        └── ✓ index.ts
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['node_modules/.pnpm/@org+my-ui-library/dist/index.ts']"]
-        );
-    }
-
-    #[test]
-    fn test_globs_with_recursive_symlinks() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(
-            &dir,
-            &[
-                ("b/index.html", "content-['b/index.html']"),
-                ("z/index.html", "content-['z/index.html']"),
-            ],
-        );
-
-        // Create recursive symlinks:
-        //
-        // - `a → b`, `b/c → c`, `c → a` form a cycle
-        // - `b/root → .` points back at the root directory
-        let _ = symlink(dir.join("b"), dir.join("a"));
-        let _ = symlink(dir.join("c"), dir.join("b/c"));
-        let _ = symlink(&dir, dir.join("b/root"));
-        let _ = symlink(dir.join("a"), dir.join("c"));
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source '.'",
-        )]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✓ a → b
-        │   ├── ✗ c → ../c
-        │   ├── ✓ index.html
-        │   └── ✗ root → ..
-        ├── ✓ b
-        │   ├── ✗ c → ../c
-        │   ├── ✓ index.html
-        │   └── ✗ root → ..
-        ├── ✓ c → a
-        │   ├── ✗ c → .
-        │   ├── ✓ index.html
-        │   └── ✗ root → ..
-        └── ✓ z
-            └── ✓ index.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec!["content-['b/index.html']", "content-['z/index.html']"]
-        );
-    }
-
-    #[test]
-    fn test_partial_globs_with_symlinks() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(&dir, &[("abcd/xyz.html", "content-['abcd/xyz.html']")]);
-        let _ = symlink(dir.join("abcd"), dir.join("efgh"));
-
-        // No sources should find nothing
-        let mut scanner = Scanner::new(vec![]);
-        let candidates = scanner.scan();
-        assert!(candidates.is_empty());
-
-        // Full symlinked folder name, should find the file
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source 'efgh/*.html'",
-        )]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✓ abcd
-        │   └── ✓ xyz.html
-        └── ✓ efgh → abcd
-            └── ✓ xyz.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['abcd/xyz.html']"]);
-
-        // Partially referencing the symlinked folder with a glob, should find the file
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source 'ef*/*.html'",
-        )]);
-        let candidates = scanner.scan();
-
-        assert_eq!(candidates, vec!["content-['abcd/xyz.html']"]);
-    }
-
-    #[test]
-    fn test_symlinked_sources_within_the_scanned_tree_can_be_ignored() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(
-            &dir,
-            &[
-                ("src/keep.html", "content-['src/keep.html']"),
-                (
-                    "actual-dir/ignore.html",
-                    "content-['actual-dir/ignore.html']",
-                ),
-                ("actual-file.html", "content-['actual-file.html']"),
-            ],
-        );
-
-        let _ = symlink(dir.join("actual-dir"), dir.join("linked-dir"));
-        let _ = symlink_file(dir.join("actual-file.html"), dir.join("linked-file.html"));
-
-        let base = dir.join("src");
-        let mut scanner = Scanner::new(vec![
-            public_source_entry_from_pattern(base.clone(), "@source '../**/*'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../actual-dir'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../linked-dir'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../actual-file.html'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../linked-file.html'"),
-        ]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ actual-dir
-        │   └── ✗ ignore.html
-        ├── ✗ actual-file.html
-        ├── ✗ linked-dir → actual-dir
-        │   └── ✗ ignore.html
-        ├── ✗ linked-file.html → actual-file.html
-        └── ✓ src
-            └── ✓ keep.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['src/keep.html']"]);
-
-        let mut scanner = Scanner::new(vec![
-            public_source_entry_from_pattern(base.clone(), "@source '../**/*'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../actual-dir/**/*.html'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../linked-dir/**/*.html'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../actual-file.html'"),
-            public_source_entry_from_pattern(base.clone(), "@source not '../linked-file.html'"),
-        ]);
-        let candidates = scanner.scan();
-
-        assert_eq!(candidates, vec!["content-['src/keep.html']"]);
-    }
-
-    #[test]
-    fn test_symlinked_sources_outside_the_scanned_tree_can_be_ignored() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(
-            &dir,
-            &[
-                (
-                    "actual-dir/ignore.html",
-                    "content-['actual-dir/ignore.html']",
-                ),
-                ("project/keep.html", "content-['project/keep.html']"),
-            ],
-        );
-
-        let _ = symlink(dir.join("actual-dir"), dir.join("project/linked-dir"));
-
-        let base = dir.join("project");
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            base.clone(),
-            "@source '**/*'",
-        )]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✓ actual-dir
-        │   └── ✓ ignore.html
-        └── ✓ project
-            ├── ✓ keep.html
-            └── ✓ linked-dir → ../actual-dir
-                └── ✓ ignore.html
-        ");
-
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['actual-dir/ignore.html']",
-                "content-['project/keep.html']",
-            ]
-        );
-
-        let mut scanner = Scanner::new(vec![
-            public_source_entry_from_pattern(base.clone(), "@source '**/*'"),
-            public_source_entry_from_pattern(base.clone(), "@source not 'linked-dir'"),
-        ]);
-        let candidates = scanner.scan();
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✗ actual-dir
-        │   └── ✗ ignore.html
-        └── ✓ project
-            ├── ✓ keep.html
-            └── ✗ linked-dir → ../actual-dir
-                └── ✗ ignore.html
-        ");
-
-        assert_eq!(candidates, vec!["content-['project/keep.html']"]);
-    }
-
-    #[test]
-    fn test_files_behind_symlinks_are_tracked_with_their_canonical_paths() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(
-            &dir,
-            &[
-                (
-                    "packages/repro/source.html",
-                    "content-['packages/repro/source.html']",
-                ),
-                (
-                    "packages/repro/nested/deep.html",
-                    "content-['packages/repro/nested/deep.html']",
-                ),
-                (
-                    "packages/other/index.html",
-                    "content-['packages/other/index.html']",
-                ),
-            ],
-        );
-
-        // Mimic a pnpm workspace where `node_modules` contains a symlink to the actual package
-        fs::create_dir_all(dir.join("node_modules")).unwrap();
-        let _ = symlink(dir.join("packages/repro"), dir.join("node_modules/repro"));
-
-        // A directly symlinked file
-        let _ = symlink_file(
-            dir.join("packages/other/index.html"),
-            dir.join("linked.html"),
-        );
-
-        let mut scanner = Scanner::new(vec![
-            public_source_entry_from_pattern(
-                dir.clone(),
-                "@source 'node_modules/repro/source.html'",
-            ),
-            // The symlink sits multiple levels up from the file
-            public_source_entry_from_pattern(
-                dir.clone(),
-                "@source 'node_modules/repro/nested/deep.html'",
-            ),
-            public_source_entry_from_pattern(dir.clone(), "@source 'linked.html'"),
-        ]);
-
-        let candidates = scanner.scan();
-        assert_eq!(
-            candidates,
-            vec![
-                "content-['packages/other/index.html']",
-                "content-['packages/repro/nested/deep.html']",
-                "content-['packages/repro/source.html']",
-            ]
-        );
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✓ linked.html → packages/other/index.html
-        ├── ✓ node_modules
-        │   └── ✓ repro → ../packages/repro
-        │       ├── ✓ nested
-        │       │   └── ✓ deep.html
-        │       └── ✓ source.html
-        └── ✓ packages
-            ├── ✓ other
-            │   └── ✓ index.html
-            └── ✓ repro
-                ├── ✓ nested
-                │   └── ✓ deep.html
-                └── ✓ source.html
-        ");
-
-        // Both the symlinked paths and the canonical paths should be tracked, such that file
-        // watchers watching the returned files also watch the real files on disk.
-        let files = scanned_files(&mut scanner, &dir);
-        assert_eq!(
-            files,
-            vec![
-                "linked.html",
-                "node_modules/repro/nested/deep.html",
-                "node_modules/repro/source.html",
-                "packages/other/index.html",
-                "packages/repro/nested/deep.html",
-                "packages/repro/source.html",
-            ]
-        );
-    }
-
-    #[test]
-    fn test_changes_to_the_canonical_path_of_a_symlinked_file_are_detected() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(&dir, &[("packages/repro/source.html", "content-['v1']")]);
-
-        // Mimic a pnpm workspace where `node_modules` contains a symlink to the actual package
-        fs::create_dir_all(dir.join("node_modules")).unwrap();
-        let _ = symlink(dir.join("packages/repro"), dir.join("node_modules/repro"));
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source 'node_modules/repro/source.html'",
-        )]);
-
-        let candidates = scanner.scan();
-        assert_eq!(candidates, vec!["content-['v1']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✓ node_modules
-        │   └── ✓ repro → ../packages/repro
-        │       └── ✓ source.html
-        └── ✓ packages
-            └── ✓ repro
-                └── ✓ source.html
-        ");
-
-        // Update the real file on disk. This is the path file watchers will report changes for.
-        create_files_in(&dir, &[("packages/repro/source.html", "content-['v2']")]);
-
-        let candidates = scanner.scan_content(vec![ChangedContent::File(
-            dir.join("packages/repro/source.html"),
-            "html".into(),
-        )]);
-        assert_eq!(candidates, vec!["content-['v2']"]);
-    }
-
-    #[test]
-    fn test_new_files_behind_symlinks_are_detected_at_their_canonical_path() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(&dir, &[("packages/repro/a.html", "content-['a']")]);
-
-        // Mimic a pnpm workspace where `node_modules` contains a symlink to the actual package
-        fs::create_dir_all(dir.join("node_modules")).unwrap();
-        let _ = symlink(dir.join("packages/repro"), dir.join("node_modules/repro"));
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source 'node_modules/repro/*.html'",
-        )]);
-
-        let candidates = scanner.scan();
-        assert_eq!(candidates, vec!["content-['a']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✓ node_modules
-        │   └── ✓ repro → ../packages/repro
-        │       └── ✓ a.html
-        └── ✓ packages
-            └── ✓ repro
-                └── ✓ a.html
-        ");
-
-        // Create a new file in the real directory. File watchers watching the real directory
-        // will report the new file with its canonical path.
-        create_files_in(&dir, &[("packages/repro/b.html", "content-['b']")]);
-
-        let candidates = scanner.scan_content(vec![ChangedContent::File(
-            dir.join("packages/repro/b.html"),
-            "html".into(),
-        )]);
-        assert_eq!(candidates, vec!["content-['b']"]);
-
-        assert_snapshot!(fs_tree(&dir, &scanned_files(&mut scanner, &dir)), @"
-        .
-        ├── ✓ node_modules
-        │   └── ✓ repro → ../packages/repro
-        │       ├── ✓ a.html
-        │       └── ✓ b.html
-        └── ✓ packages
-            └── ✓ repro
-                ├── ✓ a.html
-                └── ✗ b.html
-        ");
-    }
-
-    // https://github.com/tailwindlabs/tailwindcss/pull/20408
-    #[test]
-    fn test_resolving_globs_does_not_traverse_gitignored_directories() {
-        let ScanResult {
-            files, globs, tree, ..
-        } = scan_with_globs(
-            &[
-                (".gitignore", "/vendor\n"),
-                ("vendor/pkg/canary/index.html", ""),
-                ("src/index.html", ""),
-            ],
-            vec!["@source '**/*'", "@source './vendor/pkg/canary'"],
-        );
-
-        assert_snapshot!(tree, @"
-        . (git)
-        ├── ✗ .gitignore
-        │       /vendor
-        ├── ✓ src
-        │   └── ✓ index.html
-        └── ✓ vendor
-            └── ✓ pkg
-                └── ✓ canary
-                    └── ✓ index.html
-        ");
-
-        assert_eq!(
-            files,
-            vec!["src/index.html", "vendor/pkg/canary/index.html"]
-        );
-        assert_eq!(globs, vec![
-            "*",
-            "src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}",
-
-            // This should not include `**` or `**.*.{aspx,...}` otherwise this might be scanned recursively.
-            "vendor/pkg/canary/*",
-        ]);
-    }
-
-    #[test]
-    fn test_extract_used_css_variables_from_css() {
-        let dir = tempdir().unwrap().into_path();
-        create_files_in(
-            &dir,
-            &[
-                (
-                    "src/index.css",
-                    r#"
-                        @theme {
-                            --color-red: #ff0000; /* Not used, so don't extract */
-                            --color-green: #00ff00; /* Not used, so don't extract */
-                        }
-
-                        .button {
-                            color: var(--color-red); /* Used, so extract */
-                        }
-                    "#,
-                ),
-                ("src/used-at-start.css", "var(--color-used-at-start)"),
-                // Here to verify that we don't crash when trying to find `var(` in front of the
-                // variable.
-                ("src/defined-at-start.css", "--color-defined-at-start: red;"),
-            ],
-        );
-        fs::write(
-            dir.join("src/invalid.css"),
-            b".button { color: var(--color-\x80); }",
-        )
-        .unwrap();
-
-        let mut scanner = Scanner::new(vec![public_source_entry_from_pattern(
-            dir.clone(),
-            "@source './'",
-        )]);
-        let candidates = scanner.scan();
-
-        assert_eq!(candidates, vec!["--color-red", "--color-used-at-start"]);
-    }
-}
diff --git a/integrations/cli/config.test.ts b/integrations/cli/config.test.ts
deleted file mode 100644
index dda70814b..000000000
--- a/integrations/cli/config.test.ts
+++ /dev/null
@@ -1,361 +0,0 @@
-import { candidate, css, html, js, json, test, ts } from '../utils'
-
-test(
-  'Config files (CJS)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.js': js`
-        module.exports = {
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.js';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-    ])
-  },
-)
-
-test(
-  'Config files (ESM)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.mjs': js`
-        export default {
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.mjs';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-    ])
-  },
-)
-
-test(
-  'Config files (TS)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.ts': ts`
-        export default {
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        } satisfies { theme: { extend: { colors: { primary: string } } } }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.ts';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-    ])
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/issues/19706
-test(
-  'Config files (TS, valid types)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          },
-          "devDependencies": {
-            "typescript": "^5.9.3"
-          }
-        }
-      `,
-      'tsconfig.json': json`
-        {
-          "compilerOptions": {
-            "target": "ES2022",
-            "module": "NodeNext",
-            "moduleResolution": "NodeNext",
-            "declaration": true,
-            "composite": true,
-            "outDir": "./.build",
-            "skipLibCheck": true
-          },
-          "include": ["tailwind.config.ts"]
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.ts': ts`
-        import type { Config } from 'tailwindcss'
-
-        function defineConfig(config: Config): Config {
-          return config
-        }
-
-        export default defineConfig({
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        })
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.ts';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    // We expect that these commands don't crash:
-    await exec('pnpm tsc -b')
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [candidate`text-primary`])
-  },
-)
-
-test(
-  'Config files (CJS, watch mode)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.js': js`
-        const myColor = require('./my-color')
-        module.exports = {
-          theme: {
-            extend: {
-              colors: {
-                primary: myColor,
-              },
-            },
-          },
-        }
-      `,
-      'my-color.js': js`module.exports = 'blue'`,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.js';
-      `,
-    },
-  },
-  async ({ fs, spawn }) => {
-    let process = await spawn(
-      'pnpm tailwindcss --input src/index.css --output dist/out.css --watch',
-    )
-    await process.onStderr((m) => m.includes('Done in'))
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: blue',
-    ])
-
-    await fs.write('my-color.js', js`module.exports = 'red'`)
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: red',
-    ])
-  },
-)
-
-test(
-  'Config files (ESM, watch mode)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.mjs': js`
-        import myColor from './my-color.mjs'
-        export default {
-          theme: {
-            extend: {
-              colors: {
-                primary: myColor,
-              },
-            },
-          },
-        }
-      `,
-      'my-color.mjs': js`export default 'blue'`,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.mjs';
-      `,
-    },
-  },
-  async ({ fs, spawn }) => {
-    let process = await spawn(
-      'pnpm tailwindcss --input src/index.css --output dist/out.css --watch',
-    )
-    await process.onStderr((m) => m.includes('Done in'))
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: blue',
-    ])
-
-    await fs.write('my-color.mjs', js`export default 'red'`)
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: red',
-    ])
-  },
-)
-
-test(
-  'Config files (TS, watch mode)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.ts': js`
-        import myColor from './my-color.ts'
-        export default {
-          theme: {
-            extend: {
-              colors: {
-                primary: myColor,
-              },
-            },
-          },
-        }
-      `,
-      'my-color.ts': js`export default 'blue'`,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.ts';
-      `,
-    },
-  },
-  async ({ fs, spawn }) => {
-    let process = await spawn(
-      'pnpm tailwindcss --input src/index.css --output dist/out.css --watch',
-    )
-    await process.onStderr((m) => m.includes('Done in'))
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: blue',
-    ])
-
-    await fs.write('my-color.ts', js`export default 'red'`)
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: red',
-    ])
-  },
-)
diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
deleted file mode 100644
index 07f8bcb68..000000000
--- a/integrations/cli/index.test.ts
+++ /dev/null
@@ -1,3186 +0,0 @@
-import dedent from 'dedent'
-import os from 'node:os'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { describe } from 'vitest'
-import { candidate, css, html, js, json, retryAssertion, test, ts, txt, yaml } from '../utils'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const STANDALONE_BINARY = (() => {
-  switch (os.platform()) {
-    case 'win32':
-      return 'tailwindcss-windows-x64.exe'
-    case 'darwin':
-      return os.arch() === 'x64' ? 'tailwindcss-macos-x64' : 'tailwindcss-macos-arm64'
-    case 'linux':
-      return os.arch() === 'x64' ? 'tailwindcss-linux-x64' : 'tailwindcss-linux-arm64'
-    default:
-      throw new Error(`Unsupported platform: ${os.platform()} ${os.arch()}`)
-  }
-})()
-
-describe.each([
-  ['CLI', 'pnpm tailwindcss'],
-  [
-    'Standalone CLI',
-    path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`),
-  ],
-])('%s', (kind, command) => {
-  test(
-    'production build',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'project-a/index.html': html`
-          <div
-            class="underline 2xl:font-bold hocus:underline inverted:flex *:flex **:flex"
-          ></div>
-        `,
-        'project-a/plugin.js': js`
-          module.exports = function ({ addVariant }) {
-            addVariant('inverted', '@media (inverted-colors: inverted)')
-            addVariant('hocus', ['&:focus', '&:hover'])
-          }
-        `,
-        'project-a/tailwind.config.js': js`
-          module.exports = {
-            content: ['../project-b/src/**/*.js'],
-          }
-        `,
-        'project-a/src/index.css': css`
-          @import 'tailwindcss/utilities';
-          @config '../tailwind.config.js';
-          @source '../../project-b/src/**/*.html';
-          @plugin '../plugin.js';
-        `,
-        'project-a/src/index.js': js`
-          const className = "content-['project-a/src/index.js']"
-          module.exports = { className }
-        `,
-        'project-b/src/index.html': html`
-          <div class="flex" />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, fs, exec }) => {
-      await exec(`${command} --input src/index.css --output dist/out.css`, {
-        cwd: path.join(root, 'project-a'),
-      })
-
-      await fs.expectFileToContain('project-a/dist/out.css', [
-        candidate`underline`,
-        candidate`flex`,
-        candidate`content-['project-a/src/index.js']`,
-        candidate`content-['project-b/src/index.js']`,
-        candidate`inverted:flex`,
-        candidate`hocus:underline`,
-        candidate`*:flex`,
-        candidate`**:flex`,
-      ])
-    },
-  )
-
-  test(
-    'production build — read input from stdin',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'project-a/index.html': html`
-          <div
-            class="underline 2xl:font-bold hocus:underline inverted:flex *:flex **:flex"
-          ></div>
-        `,
-        'project-a/plugin.js': js`
-          module.exports = function ({ addVariant }) {
-            addVariant('inverted', '@media (inverted-colors: inverted)')
-            addVariant('hocus', ['&:focus', '&:hover'])
-          }
-        `,
-        'project-a/tailwind.config.js': js`
-          module.exports = {
-            content: ['../project-b/src/**/*.js'],
-          }
-        `,
-        'project-a/src/index.js': js`
-          const className = "content-['project-a/src/index.js']"
-          module.exports = { className }
-        `,
-        'project-b/src/index.html': html`
-          <div class="flex" />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, fs, exec }) => {
-      await exec(
-        `${command} --input - --output dist/out.css`,
-        { cwd: path.join(root, 'project-a') },
-        {
-          stdin: css`
-            @import 'tailwindcss/utilities';
-            @config './tailwind.config.js';
-            @source '../project-b/src/**/*.html';
-            @plugin './plugin.js';
-          `,
-        },
-      )
-
-      await fs.expectFileToContain('project-a/dist/out.css', [
-        candidate`underline`,
-        candidate`flex`,
-        candidate`content-['project-a/src/index.js']`,
-        candidate`content-['project-b/src/index.js']`,
-        candidate`inverted:flex`,
-        candidate`hocus:underline`,
-        candidate`*:flex`,
-        candidate`**:flex`,
-      ])
-    },
-  )
-
-  test(
-    'production build — (write to stdout)',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'project-a/index.html': html`
-          <div
-            class="underline 2xl:font-bold hocus:underline inverted:flex *:flex **:flex"
-          ></div>
-        `,
-        'project-a/plugin.js': js`
-          module.exports = function ({ addVariant }) {
-            addVariant('inverted', '@media (inverted-colors: inverted)')
-            addVariant('hocus', ['&:focus', '&:hover'])
-          }
-        `,
-        'project-a/tailwind.config.js': js`
-          module.exports = {
-            content: ['../project-b/src/**/*.js'],
-          }
-        `,
-        'project-a/src/index.css': css`
-          @import 'tailwindcss/utilities';
-          @config '../tailwind.config.js';
-          @source '../../project-b/src/**/*.html';
-          @plugin '../plugin.js';
-        `,
-        'project-a/src/index.js': js`
-          const className = "content-['project-a/src/index.js']"
-          module.exports = { className }
-        `,
-        'project-b/src/index.html': html`
-          <div class="flex" />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, expect, exec }) => {
-      let stdout = await exec(`${command} --input src/index.css --output -`, {
-        cwd: path.join(root, 'project-a'),
-      })
-
-      expect(stdout).toContain(candidate`underline`)
-      expect(stdout).toContain(candidate`flex`)
-      expect(stdout).toContain(candidate`content-['project-a/src/index.js']`)
-      expect(stdout).toContain(candidate`content-['project-b/src/index.js']`)
-      expect(stdout).toContain(candidate`inverted:flex`)
-      expect(stdout).toContain(candidate`hocus:underline`)
-      expect(stdout).toContain(candidate`*:flex`)
-      expect(stdout).toContain(candidate`**:flex`)
-    },
-  )
-
-  test(
-    'watch mode',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'project-a/index.html': html`
-          <div
-            class="underline 2xl:font-bold hocus:underline inverted:flex text-primary"
-          ></div>
-        `,
-        'project-a/plugin.js': js`
-          module.exports = function ({ addVariant }) {
-            addVariant('inverted', '@media (inverted-colors: inverted)')
-            addVariant('hocus', ['&:focus', '&:hover'])
-          }
-        `,
-        'project-a/tailwind.config.js': js`
-          module.exports = {
-            content: ['../project-b/src/**/*.js'],
-          }
-        `,
-        'project-a/src/index.css': css`
-          @import 'tailwindcss/utilities';
-          @import './custom-theme.css';
-          @config '../tailwind.config.js';
-          @source '../../project-b/src/**/*.html';
-          @plugin '../plugin.js';
-        `,
-        'project-a/src/custom-theme.css': css`
-          /* Will be overwritten later */
-          @theme {
-            --color-primary: black;
-          }
-        `,
-        'project-a/src/index.js': js`
-          const className = "content-['project-a/src/index.js']"
-          module.exports = { className }
-        `,
-        'project-b/src/index.html': html`
-          <div class="flex" />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, fs, spawn }) => {
-      let process = await spawn(`${command} --input src/index.css --output dist/out.css --watch`, {
-        cwd: path.join(root, 'project-a'),
-      })
-      await process.onStderr((m) => m.includes('Done in'))
-
-      await fs.expectFileToContain('project-a/dist/out.css', [
-        candidate`underline`,
-        candidate`flex`,
-        candidate`content-['project-a/src/index.js']`,
-        candidate`content-['project-b/src/index.js']`,
-        candidate`inverted:flex`,
-        candidate`hocus:underline`,
-        css`
-          .text-primary {
-            color: var(--color-primary);
-          }
-        `,
-      ])
-
-      await fs.write(
-        'project-a/src/index.js',
-        js`
-          const className = "[.changed_&]:content-['project-a/src/index.js']"
-          module.exports = { className }
-        `,
-      )
-      await fs.expectFileToContain('project-a/dist/out.css', [
-        candidate`[.changed_&]:content-['project-a/src/index.js']`,
-      ])
-
-      await fs.write(
-        'project-b/src/index.js',
-        js`
-          const className = "[.changed_&]:content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      )
-      await fs.expectFileToContain('project-a/dist/out.css', [
-        candidate`[.changed_&]:content-['project-b/src/index.js']`,
-      ])
-
-      await fs.write(
-        'project-a/src/custom-theme.css',
-        css`
-          /* Overriding the primary color */
-          @theme {
-            --color-primary: red;
-          }
-        `,
-      )
-
-      await fs.expectFileToContain('project-a/dist/out.css', [
-        css`
-          .text-primary {
-            color: var(--color-primary);
-          }
-        `,
-      ])
-
-      await fs.write(
-        'project-a/src/index.css',
-        css`
-          @import 'tailwindcss/utilities';
-          @theme {
-            --color-*: initial;
-          }
-        `,
-      )
-
-      await fs.expectFileToContain('project-a/dist/out.css', [css``])
-    },
-  )
-
-  test(
-    'watch mode with polling',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'src/index.css': css`@import 'tailwindcss/utilities';`,
-        'src/index.html': html`
-          <div class="underline"></div>
-        `,
-      },
-    },
-    async ({ fs, spawn }) => {
-      let process = await spawn(
-        `${command} --input src/index.css --output dist/out.css --watch --poll=50`,
-      )
-      await process.onStderr((m) => m.includes('Done in'))
-
-      await fs.expectFileToContain('dist/out.css', [candidate`underline`])
-
-      await fs.write('src/index.html', html`
-          <div class="underline flex"></div>
-        `)
-
-      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
-    },
-  )
-
-  test(
-    "watch mode with unknown @source paths shouldn't crash on Windows",
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'index.html': html`
-          <div class="underline"></div>
-        `,
-        'src/index.css': css`
-          @import 'tailwindcss';
-          @source "unknown-folder/**/*";
-        `,
-      },
-    },
-    async ({ fs, spawn }) => {
-      let process = await spawn(`${command} --input src/index.css --output dist/out.css --watch`)
-      await process.onStderr((m) => m.includes('Done in'))
-
-      await fs.expectFileToContain('dist/out.css', [candidate`underline`])
-    },
-  )
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/17632
-  test(
-    'watch mode rebuilds when the input file is in an ignored folder',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'assets/tailwind.config.js': js`
-          module.exports = {
-            content: {
-              relative: true,
-              files: ['html/*.html'],
-            },
-          }
-        `,
-        'assets/html/index.html': html`
-          <div class="underline"></div>
-        `,
-        'assets/css/index.css': css`
-          @import 'tailwindcss' source(none);
-          @config '../tailwind.config.js';
-        `,
-      },
-    },
-    async ({ fs, spawn }) => {
-      let process = await spawn(
-        `${command} --input assets/css/index.css --output dist/out.css --watch`,
-      )
-      await process.onStderr((m) => m.includes('Done in'))
-
-      await fs.expectFileToContain('dist/out.css', [candidate`underline`])
-
-      await fs.write(
-        'assets/css/index.css',
-        css`
-          @import 'tailwindcss' source(none);
-          @config '../tailwind.config.js';
-          @source inline("flex");
-        `,
-      )
-
-      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
-    },
-  )
-
-  test(
-    'production build (stdin)',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'index.html': html`
-          <div class="underline"></div>
-        `,
-        'src/index.css': css`@import 'tailwindcss';`,
-      },
-    },
-    async ({ fs, exec }) => {
-      await exec(`${command} --input=- --output dist/out.css < src/index.css`)
-
-      await fs.expectFileToContain('dist/out.css', [candidate`underline`])
-    },
-  )
-
-  test(
-    'module resolution using CJS, ESM, CTS, and MTS',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-cjs
-            - project-esm
-            - plugin-cjs
-            - plugin-esm
-            - plugin-cts
-            - plugin-mts
-        `,
-        'project-cjs/package.json': json`
-          {
-            "type": "commonjs",
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^",
-              "plugin-cjs": "workspace:*",
-              "plugin-esm": "workspace:*",
-              "plugin-cts": "workspace:*",
-              "plugin-mts": "workspace:*"
-            }
-          }
-        `,
-        'project-cjs/index.html': html`
-          <div class="cjs esm cts mts"></div>
-        `,
-        'project-cjs/src/index.css': css`
-          @import 'tailwindcss/utilities';
-          @plugin 'plugin-cjs';
-          @plugin 'plugin-esm';
-          @plugin 'plugin-cts';
-          @plugin 'plugin-mts';
-        `,
-
-        'project-esm/package.json': json`
-          {
-            "type": "module",
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^",
-              "plugin-cjs": "workspace:*",
-              "plugin-esm": "workspace:*",
-              "plugin-cts": "workspace:*",
-              "plugin-mts": "workspace:*"
-            }
-          }
-        `,
-        'project-esm/index.html': html`
-          <div class="cjs esm cts mts"></div>
-        `,
-        'project-esm/src/index.css': css`
-          @import 'tailwindcss/utilities';
-          @plugin 'plugin-cjs';
-          @plugin 'plugin-esm';
-          @plugin 'plugin-cts';
-          @plugin 'plugin-mts';
-        `,
-
-        'plugin-cjs/package.json': json`
-          {
-            "name": "plugin-cjs",
-            "type": "commonjs",
-            "exports": {
-              ".": {
-                "require": "./index.cjs"
-              }
-            }
-          }
-        `,
-        'plugin-cjs/index.cjs': js`
-          module.exports = function ({ addUtilities }) {
-            addUtilities({ '.cjs': { content: '"cjs"' } })
-          }
-        `,
-
-        'plugin-esm/package.json': json`
-          {
-            "name": "plugin-esm",
-            "type": "module",
-            "exports": {
-              ".": {
-                "import": "./index.mjs"
-              }
-            }
-          }
-        `,
-        'plugin-esm/index.mjs': js`
-          export default function ({ addUtilities }) {
-            addUtilities({ '.esm': { content: '"esm"' } })
-          }
-        `,
-
-        'plugin-cts/package.json': json`
-          {
-            "name": "plugin-cts",
-            "type": "commonjs",
-            "exports": {
-              ".": {
-                "require": "./index.cts"
-              }
-            }
-          }
-        `,
-        'plugin-cts/index.cts': ts`
-          export default function ({ addUtilities }) {
-            addUtilities({ '.cts': { content: '"cts"' as const } })
-          }
-        `,
-
-        'plugin-mts/package.json': json`
-          {
-            "name": "plugin-mts",
-            "type": "module",
-            "exports": {
-              ".": {
-                "import": "./index.mts"
-              }
-            }
-          }
-        `,
-        'plugin-mts/index.mts': ts`
-          export default function ({ addUtilities }) {
-            addUtilities({ '.mts': { content: '"mts"' as const } })
-          }
-        `,
-      },
-    },
-    async ({ root, fs, exec }) => {
-      await exec(`${command} --input src/index.css --output dist/out.css`, {
-        cwd: path.join(root, 'project-cjs'),
-      })
-      await exec(`${command} --input src/index.css --output dist/out.css`, {
-        cwd: path.join(root, 'project-esm'),
-      })
-
-      await fs.expectFileToContain('./project-cjs/dist/out.css', [
-        candidate`cjs`,
-        candidate`esm`,
-        candidate`cts`,
-        candidate`mts`,
-      ])
-      await fs.expectFileToContain('./project-esm/dist/out.css', [
-        candidate`cjs`,
-        candidate`esm`,
-        candidate`cts`,
-        candidate`mts`,
-      ])
-    },
-  )
-
-  test(
-    'git ignore files outside of a repo are not considered',
-    {
-      fs: {
-        // Make the test root a pnpm workspace that includes `home/project` so
-        // the install below resolves the transitive dependency overrides that
-        // the test harness injects into this `pnpm-workspace.yaml`.
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - home/project
-        `,
-
-        // Ignore everything in the "home" directory
-        'home/.gitignore': '*',
-
-        // Only ignore files called ignore-*.html in the actual git repo
-        'home/project/.gitignore': 'ignore-*.html',
-
-        'home/project/package.json': json`
-          {
-            "type": "module",
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-
-        'home/project/src/index.css': css` @import 'tailwindcss'; `,
-        'home/project/src/index.html': html`
-          <div
-            class="content-['index.html']"
-          ></div>
-        `,
-        'home/project/src/ignore-1.html': html`
-          <div
-            class="content-['ignore-1.html']"
-          ></div>
-        `,
-        'home/project/src/ignore-2.html': html`
-          <div
-            class="content-['ignore-2.html']"
-          ></div>
-        `,
-      },
-
-      installDependencies: false,
-    },
-    async ({ fs, root, exec }) => {
-      await exec(`pnpm install`, {
-        cwd: path.join(root, 'home/project'),
-      })
-
-      // No git repo = all ignore files are considered
-      await exec(`${command} --input src/index.css --output dist/out.css`, {
-        cwd: path.join(root, 'home/project'),
-      })
-
-      await fs.expectFileNotToContain('./home/project/dist/out.css', [
-        candidate`content-['index.html']`,
-        candidate`content-['ignore-1.html']`,
-        candidate`content-['ignore-2.html']`,
-      ])
-
-      // Make home/project a git repo
-      // Only ignore files within the repo are considered
-      await exec(`git init`, {
-        cwd: path.join(root, 'home/project'),
-      })
-
-      await exec(`${command} --input src/index.css --output dist/out.css`, {
-        cwd: path.join(root, 'home/project'),
-      })
-
-      await fs.expectFileToContain('./home/project/dist/out.css', [
-        candidate`content-['index.html']`,
-      ])
-
-      await fs.expectFileNotToContain('./home/project/dist/out.css', [
-        candidate`content-['ignore-1.html']`,
-        candidate`content-['ignore-2.html']`,
-      ])
-    },
-  )
-
-  test(
-    'production build + inline source maps',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'src/index.html': html`
-          <div class="flex"></div>
-        `,
-        'src/index.css': css`
-          @import 'tailwindcss/utilities';
-          /*  */
-        `,
-      },
-    },
-    async ({ exec, expect, fs, parseSourceMap }) => {
-      await exec(`${command} --input src/index.css --output dist/out.css --map`)
-
-      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
-
-      // Make sure we can find a source map
-      let map = parseSourceMap(await fs.read('dist/out.css'))
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}...',
-      })
-    },
-  )
-
-  test(
-    'production build + separate source maps',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'src/index.html': html`
-          <div class="flex"></div>
-        `,
-        'src/index.css': css`
-          @import 'tailwindcss/utilities';
-          /*  */
-        `,
-      },
-    },
-    async ({ exec, expect, fs, parseSourceMap }) => {
-      await exec(`${command} --input src/index.css --output dist/out.css --map dist/out.css.map`)
-
-      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
-
-      // Make sure we can find a source map
-      let map = parseSourceMap({
-        map: await fs.read('dist/out.css.map'),
-        content: await fs.read('dist/out.css'),
-      })
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n\n/*# sou...',
-      })
-    },
-  )
-
-  // Skipped because Lightning CSS has a bug with source maps containing
-  // license comments and it breaks stuff.
-  test.skip(
-    'production build + minify + source maps',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'src/index.html': html`
-          <div class="flex"></div>
-        `,
-        'src/index.css': css`
-          @import 'tailwindcss/utilities';
-          /*  */
-        `,
-      },
-    },
-    async ({ exec, expect, fs, parseSourceMap }) => {
-      await exec(`${command} --input src/index.css --output dist/out.css --minify --map`)
-
-      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
-
-      // Make sure we can find a source map
-      let map = parseSourceMap(await fs.read('dist/out.css'))
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n\n/*# sou...',
-      })
-    },
-  )
-
-  test(
-    'watch mode + inline source maps',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'src/index.html': html`
-          <div class="flex"></div>
-        `,
-        'src/index.css': css`
-          @import 'tailwindcss/utilities';
-          /*  */
-        `,
-      },
-    },
-    async ({ spawn, expect, fs, parseSourceMap }) => {
-      let process = await spawn(
-        `${command} --input src/index.css --output dist/out.css --map --watch`,
-      )
-      await process.onStderr((m) => m.includes('Done in'))
-
-      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
-
-      let originalCss = await fs.read('dist/out.css')
-      let currentCss = originalCss
-
-      // Make sure we can find a source map
-      let map = parseSourceMap(currentCss)
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}...',
-      })
-
-      // Write to project source files
-      await fs.write('src/index.html', html`
-        <div class="flex underline"></div>
-      `)
-
-      // Wait for the CSS to be rebuilt
-      await retryAssertion(async () => {
-        currentCss = await fs.read('dist/out.css')
-        expect(currentCss).not.toEqual(originalCss)
-        originalCss = currentCss
-      })
-
-      // Make sure the source map was updated
-      map = parseSourceMap(currentCss)
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n.underli...',
-      })
-
-      expect(map.at(5, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.underline...',
-      })
-
-      expect(map.at(6, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'text-decor...',
-      })
-
-      expect(map.at(7, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}...',
-      })
-
-      // Write to the main CSS file
-      await fs.write(
-        'src/index.css',
-        css`
-          @import 'tailwindcss/utilities';
-          @source inline("w-auto");
-        `,
-      )
-
-      // Wait for the CSS to be rebuilt
-      await retryAssertion(async () => {
-        currentCss = await fs.read('dist/out.css')
-        expect(currentCss).not.toEqual(originalCss)
-        originalCss = currentCss
-      })
-
-      // Make sure the source map was updated
-      map = parseSourceMap(currentCss)
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n.w-auto...',
-      })
-
-      expect(map.at(5, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.w-auto {...',
-      })
-
-      expect(map.at(6, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'width: aut...',
-      })
-
-      expect(map.at(7, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n.underli...',
-      })
-
-      expect(map.at(8, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.underline...',
-      })
-
-      expect(map.at(9, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'text-decor...',
-      })
-
-      expect(map.at(10, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}...',
-      })
-    },
-  )
-
-  test(
-    'watch mode + separate source maps',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'src/index.html': html`
-          <div class="flex"></div>
-        `,
-        'src/index.css': css`
-          @import 'tailwindcss/utilities';
-          /*  */
-        `,
-      },
-    },
-    async ({ spawn, expect, fs, parseSourceMap }) => {
-      let process = await spawn(
-        `${command} --input src/index.css --output dist/out.css --map dist/out.css.map --watch`,
-      )
-      await process.onStderr((m) => m.includes('Done in'))
-
-      await fs.expectFileToContain('dist/out.css', [candidate`flex`])
-
-      // Make sure we can find a source map
-      let originalCss = await fs.read('dist/out.css')
-      let originalMap = await fs.read('dist/out.css.map')
-      let currentCss = originalCss
-      let currentMap = originalMap
-
-      // Make sure we can find a source map
-      let map = parseSourceMap({ map: currentMap, content: currentCss })
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n\n/*# sou...',
-      })
-
-      // Write to project source files
-      await fs.write('src/index.html', html`
-        <div class="flex underline"></div>
-      `)
-
-      // Wait for the CSS to be rebuilt
-      await retryAssertion(async () => {
-        currentCss = await fs.read('dist/out.css')
-        currentMap = await fs.read('dist/out.css.map')
-        expect(currentCss).not.toEqual(originalCss)
-        expect(currentMap).not.toEqual(originalMap)
-        originalCss = currentCss
-        originalMap = currentMap
-      })
-
-      // Make sure the source map was updated
-      map = parseSourceMap({ map: currentMap, content: currentCss })
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n.underli...',
-      })
-
-      expect(map.at(5, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.underline...',
-      })
-
-      expect(map.at(6, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'text-decor...',
-      })
-
-      expect(map.at(7, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n\n/*# sou...',
-      })
-
-      // Write to the main CSS file
-      await fs.write(
-        'src/index.css',
-        css`
-          @import 'tailwindcss/utilities';
-          @source inline("w-auto");
-        `,
-      )
-
-      // Wait for the CSS to be rebuilt
-      await retryAssertion(async () => {
-        currentCss = await fs.read('dist/out.css')
-        currentMap = await fs.read('dist/out.css.map')
-        expect(currentCss).not.toEqual(originalCss)
-        expect(currentMap).not.toEqual(originalMap)
-        originalCss = currentCss
-        originalMap = currentMap
-      })
-
-      // Make sure the source map was updated
-      map = parseSourceMap({ map: currentMap, content: currentCss })
-
-      expect(map.at(1, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '/*! tailwi...',
-      })
-
-      expect(map.at(2, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.flex {...',
-      })
-
-      expect(map.at(3, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'display: f...',
-      })
-
-      expect(map.at(4, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n.w-auto...',
-      })
-
-      expect(map.at(5, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.w-auto {...',
-      })
-
-      expect(map.at(6, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'width: aut...',
-      })
-
-      expect(map.at(7, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n.underli...',
-      })
-
-      expect(map.at(8, 0)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: '.underline...',
-      })
-
-      expect(map.at(9, 2)).toMatchObject({
-        source:
-          kind === 'CLI'
-            ? expect.stringContaining('utilities.css')
-            : expect.stringMatching(/\/utilities-\w+\.css$/),
-        original: '@tailwind...',
-        generated: 'text-decor...',
-      })
-
-      expect(map.at(10, 0)).toMatchObject({
-        source: null,
-        original: '(none)',
-        generated: '}\n\n/*# sou...',
-      })
-    },
-  )
-
-  test(
-    'watch mode should trigger a full rebuild when a dependency is removed',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "workspace:^",
-              "@tailwindcss/cli": "workspace:^"
-            }
-          }
-        `,
-        'src/index.html': html`
-          <div class="flex text-primary"></div>
-        `,
-        'src/index.css': css`
-          @import 'tailwindcss/utilities';
-          @config '../tailwind.config.js';
-        `,
-        'tailwind.config.js': js`
-          const myColor = require('./my-color')
-
-          module.exports = {
-            theme: {
-              extend: {
-                colors: {
-                  primary: myColor,
-                },
-              },
-            },
-          }
-        `,
-        'my-color.js': js`
-          //
-          module.exports = 'blue'
-        `,
-      },
-    },
-    async ({ spawn, fs, expect }) => {
-      let process = await spawn(`${command} --input src/index.css --output dist/out.css --watch`)
-      await process.onStderr((m) => m.includes('Done in'))
-
-      expect(await fs.dumpFiles('dist/*.css')).toMatchInlineSnapshot(`
-        "
-        --- dist/out.css ---
-        .flex {
-          display: flex;
-        }
-        .text-primary {
-          color: blue;
-        }
-        "
-      `)
-
-      // Remove the dependency of the tailwind.config.js file
-      await fs.delete('my-color.js')
-
-      // We expect an error
-      await process.onStderr((m) => m.includes('Error'))
-      await process.onStderr((m) => m.includes('Done in'))
-
-      // Re-create the file to resolve the issue
-      await fs.write('my-color.js', js`module.exports = 'red'`)
-      await process.onStderr((m) => m.includes('Done in'))
-
-      // Expect a full rebuild
-      expect(await fs.dumpFiles('dist/*.css')).toMatchInlineSnapshot(`
-        "
-        --- dist/out.css ---
-        .flex {
-          display: flex;
-        }
-        .text-primary {
-          color: red;
-        }
-        "
-      `)
-    },
-  )
-})
-
-test(
-  'auto source detection kitchen sink',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.css': css`
-        @reference 'tailwindcss/theme';
-
-        /* (1) */
-        /* - Only './src' should be auto-scanned, not the current working directory */
-        /* - .gitignore'd paths should be ignored (node_modules) */
-        /* - Binary extensions should be ignored (jpg, zip) */
-        @import 'tailwindcss/utilities' source('./src');
-
-        /* (2) */
-        /* - All HTML and JSX files in 'ignored/components' should be scanned */
-        /* - All other extensions should be ignored */
-        @source "./ignored/components/*.{html,jsx}";
-
-        /* (3) */
-        /* - './components' should be auto-scanned in addition to './src' */
-        /* - './components/ignored.html' should still be ignored */
-        /* - Binary extensions in './components' should be ignored */
-        @source "./components";
-
-        /* (4) */
-        /* - './pages' should be auto-scanned */
-        /* - Only '.html' files should be included */
-        /* - './page/ignored.html' will not be ignored because of the specific pattern */
-        @source "./pages/**/*.html";
-      `,
-
-      '.gitignore': dedent`
-        /src/ignored
-        /ignored
-        /components/ignored.html
-        /pages/ignored.html
-      `,
-
-      // (1)
-      'index.html': 'content-["index.html"] content-["BAD"]', // "Root" source is in `./src`
-      'src/index.html': 'content-["src/index.html"]',
-      'src/nested/index.html': 'content-["src/nested/index.html"]',
-      'src/index.jpg': 'content-["src/index.jpg"] content-["BAD"]',
-      'src/nested/index.tar': 'content-["src/nested/index.tar"] content-["BAD"]',
-      'src/ignored/index.html': 'content-["src/ignored/index.html"] content-["BAD"]',
-
-      // (2)
-      'ignored/components/my-component.html': 'content-["ignored/components/my-component.html"]',
-      'ignored/components/my-component.jsx': 'content-["ignored/components/my-component.jsx"]',
-
-      // Ignored and not explicitly listed by (2)
-      'ignored/components/my-component.tsx':
-        'content-["ignored/components/my-component.tsx"] content-["BAD"]',
-      'ignored/components/nested/my-component.html':
-        'content-["ignored/components/nested/my-component.html"] content-["BAD"]',
-
-      // (3)
-      'components/my-component.tsx': 'content-["components/my-component.tsx"]',
-      'components/nested/my-component.tsx': 'content-["components/nested/my-component.tsx"]',
-      'components/ignored.html': 'content-["components/ignored.html"] content-["BAD"]',
-
-      // (4)
-      'pages/foo.html': 'content-["pages/foo.html"]',
-      'pages/nested/foo.html': 'content-["pages/nested/foo.html"]',
-      'pages/ignored.html': 'content-["pages/ignored.html"]',
-      'pages/foo.jsx': 'content-["pages/foo.jsx"] content-["BAD"]',
-      'pages/nested/foo.jsx': 'content-["pages/nested/foo.jsx"] content-["BAD"]',
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm tailwindcss --input index.css --output dist/out.css')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      @layer properties;
-      .content-\\[\\"components\\/my-component\\.tsx\\"\\] {
-        --tw-content: "components/my-component.tsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"components\\/nested\\/my-component\\.tsx\\"\\] {
-        --tw-content: "components/nested/my-component.tsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"ignored\\/components\\/my-component\\.html\\"\\] {
-        --tw-content: "ignored/components/my-component.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"ignored\\/components\\/my-component\\.jsx\\"\\] {
-        --tw-content: "ignored/components/my-component.jsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/foo\\.html\\"\\] {
-        --tw-content: "pages/foo.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/ignored\\.html\\"\\] {
-        --tw-content: "pages/ignored.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/nested\\/foo\\.html\\"\\] {
-        --tw-content: "pages/nested/foo.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"src\\/index\\.html\\"\\] {
-        --tw-content: "src/index.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"src\\/nested\\/index\\.html\\"\\] {
-        --tw-content: "src/nested/index.html";
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'auto source detection in depth, source(…) and `@source` can be configured to use auto source detection (build + watch mode)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'project-a/src/index.css': css`
-        @reference 'tailwindcss/theme';
-
-        /* Run auto-content detection in ../../project-b */
-        @import 'tailwindcss/utilities' source('../../project-b');
-
-        /* Explicitly using node_modules in the @source allows git ignored folders */
-        @source '../node_modules/{my-lib-1,my-lib-2}/src/**/*.html';
-
-        /* We typically ignore these extensions, but now include them explicitly */
-        @source './logo.{jpg,png}';
-
-        /* Project C should apply auto source detection */
-        @source '../../project-c';
-
-        /* Project D should apply auto source detection rules, such as ignoring node_modules */
-        @source '../../project-d/**/*.{html,js}';
-        @source '../../project-d/**/*.bin';
-
-        /* Same as above, but my-lib-2 _should_ be includes */
-        @source '../../project-d/node_modules/my-lib-2/src/*.{html,js}';
-
-        /* bar.html is git ignored, but explicitly listed here to scan */
-        @source '../../project-d/src/bar.html';
-
-        /* Project E's source ends with '..' */
-        @source '../../project-e/nested/..';
-      `,
-
-      // Project A is the current folder, but we explicitly configured
-      // `source(project-b)`, therefore project-a should not be included in
-      // the output.
-      'project-a/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-a/src/index.html']"
-        ></div>
-      `,
-
-      // Project A explicitly includes an extension we usually ignore,
-      // therefore it should be included in the output.
-      'project-a/src/logo.jpg': html`
-        <div
-          class="content-['project-a/src/logo.jpg']"
-        ></div>
-      `,
-
-      // Project A explicitly includes node_modules/{my-lib-1,my-lib-2},
-      // therefore these files should be included in the output.
-      'project-a/node_modules/my-lib-1/src/index.html': html`
-        <div
-          class="content-['project-a/node_modules/my-lib-1/src/index.html']"
-        ></div>
-      `,
-      'project-a/node_modules/my-lib-2/src/index.html': html`
-        <div
-          class="content-['project-a/node_modules/my-lib-2/src/index.html']"
-        ></div>
-      `,
-
-      // Project B is the configured `source(…)`, therefore auto source
-      // detection should include known extensions and folders in the output.
-      'project-b/src/index.html': html`
-        <div
-          class="content-['project-b/src/index.html']"
-        ></div>
-      `,
-
-      // Project B is the configured `source(…)`, therefore auto source
-      // detection should apply and node_modules should not be included in the
-      // output.
-      'project-b/node_modules/my-lib-3/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-b/node_modules/my-lib-3/src/index.html']"
-        ></div>
-      `,
-
-      // Project C should apply auto source detection, therefore known
-      // extensions and folders should be included in the output.
-      'project-c/src/index.html': html`
-        <div
-          class="content-['project-c/src/index.html']"
-        ></div>
-      `,
-
-      // Project C should apply auto source detection, therefore known ignored
-      // extensions should not be included in the output.
-      'project-c/src/logo.jpg': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-c/src/logo.jpg']"
-        ></div>
-      `,
-
-      // Project C should apply auto source detection, therefore node_modules
-      // should not be included in the output.
-      'project-c/node_modules/my-lib-1/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-c/node_modules/my-lib-1/src/index.html']"
-        ></div>
-      `,
-
-      // Project D should apply auto source detection rules, such as ignoring
-      // node_modules.
-      'project-d/node_modules/my-lib-1/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-d/node_modules/my-lib-1/src/index.html']"
-        ></div>
-      `,
-
-      // Project D has an explicit glob containing node_modules, thus should include the html file
-      'project-d/node_modules/my-lib-2/src/index.html': html`
-        <div
-          class="content-['project-d/node_modules/my-lib-2/src/index.html']"
-        ></div>
-      `,
-
-      'project-d/src/.gitignore': dedent`
-        foo.html
-        bar.html
-      `,
-
-      // Project D, foo.html is ignored by the gitignore file but the source rule is explicit about
-      // adding all `.html` files.
-      'project-d/src/foo.html': html`
-        <div
-          class="content-['project-d/src/foo.html']"
-        ></div>
-      `,
-
-      // Project D, bar.html is ignored by the gitignore file. But explicitly
-      // listed as a `@source` glob.
-      'project-d/src/bar.html': html`
-        <div
-          class="content-['project-d/src/bar.html']"
-        ></div>
-      `,
-
-      // Project D should look for files with the extensions html and js.
-      'project-d/src/index.html': html`
-        <div
-          class="content-['project-d/src/index.html']"
-        ></div>
-      `,
-
-      // Project D should have a binary file even though we ignore binary files
-      // by default, but it's explicitly listed.
-      'project-d/my-binary-file.bin': html`
-        <div
-          class="content-['project-d/my-binary-file.bin']"
-        ></div>
-      `,
-
-      // Project E's `@source "project-e/nested/.."` ends with `..`, which
-      // should look for files in `project-e` itself.
-      'project-e/index.html': html`<div class="content-['project-e/index.html']"></div>`,
-      'project-e/nested/index.html': html`<div
-          class="content-['project-e/nested/index.html']"
-        ></div>`,
-    },
-  },
-  async ({ fs, exec, spawn, root, expect }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./project-a/dist/out.css ---
-      @layer properties;
-      .content-\\[\\'project-a\\/node_modules\\/my-lib-1\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-a/node modules/my-lib-1/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-a\\/node_modules\\/my-lib-2\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-a/node modules/my-lib-2/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-a\\/src\\/logo\\.jpg\\'\\] {
-        --tw-content: 'project-a/src/logo.jpg';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-b\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-b/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-c\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-c/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/my-binary-file\\.bin\\'\\] {
-        --tw-content: 'project-d/my-binary-file.bin';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/node_modules\\/my-lib-2\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-d/node modules/my-lib-2/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/src\\/bar\\.html\\'\\] {
-        --tw-content: 'project-d/src/bar.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/src\\/foo\\.html\\'\\] {
-        --tw-content: 'project-d/src/foo.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-d/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-e\\/index\\.html\\'\\] {
-        --tw-content: 'project-e/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-e\\/nested\\/index\\.html\\'\\] {
-        --tw-content: 'project-e/nested/index.html';
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-
-    // Watch mode tests
-    let process = await spawn(
-      'pnpm tailwindcss --input src/index.css --output dist/out.css --watch',
-      {
-        cwd: path.join(root, 'project-a'),
-      },
-    )
-    await process.onStderr((m) => m.includes('Done in'))
-
-    // Changes to project-a should not be included in the output, we changed the
-    // base folder to project-b.
-    await fs.write(
-      'project-a/src/index.html',
-      html`<div class="[.changed_&]:content-['project-a/src/index.html']"></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/src/index.html']`,
-    ])
-
-    // Changes to this file should be included, because we explicitly listed
-    // them using `@source`.
-    await fs.write(
-      'project-a/src/logo.jpg',
-      html`<div class="[.changed_&]:content-['project-a/src/logo.jpg']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/src/logo.jpg']`,
-    ])
-
-    // Changes to these files should be included, because we explicitly listed
-    // them using `@source`.
-    await fs.write(
-      'project-a/node_modules/my-lib-1/src/index.html',
-      html`<div
-          class="[.changed_&]:content-['project-a/node_modules/my-lib-1/src/index.html']"
-        ></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/node_modules/my-lib-1/src/index.html']`,
-    ])
-    await fs.write(
-      'project-a/node_modules/my-lib-2/src/index.html',
-      html`<div
-          class="[.changed_&]:content-['project-a/node_modules/my-lib-2/src/index.html']"
-        ></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/node_modules/my-lib-2/src/index.html']`,
-    ])
-
-    // Changes to this file should be included, because we changed the base to
-    // `project-b`.
-    await fs.write(
-      'project-b/src/index.html',
-      html`<div class="[.changed_&]:content-['project-b/src/index.html']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-b/src/index.html']`,
-    ])
-
-    // Changes to this file should not be included. We did change the base to
-    // `project-b`, but we still apply the auto source detection rules which
-    // ignore `node_modules`.
-    await fs.write(
-      'project-b/node_modules/my-lib-3/src/index.html',
-      html`<div
-          class="[.changed_&]:content-['project-b/node_modules/my-lib-3/src/index.html']"
-        ></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-b/node_modules/my-lib-3/src/index.html']`,
-    ])
-
-    // Project C was added explicitly via `@source`, therefore changes to these
-    // files should be included.
-    await fs.write(
-      'project-c/src/index.html',
-      html`<div class="[.changed_&]:content-['project-c/src/index.html']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-c/src/index.html']`,
-    ])
-
-    // Except for these files, since they are ignored by the default auto source
-    // detection rules.
-    await fs.write(
-      'project-c/src/logo.jpg',
-      html`<div class="[.changed_&]:content-['project-c/src/logo.jpg']"></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-c/src/logo.jpg']`,
-    ])
-    await fs.write(
-      'project-c/node_modules/my-lib-1/src/index.html',
-      html`<div
-          class="[.changed_&]:content-['project-c/node_modules/my-lib-1/src/index.html']"
-        ></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-c/node_modules/my-lib-1/src/index.html']`,
-    ])
-
-    // Creating new files in the "root" of auto source detected folders
-    await fs.write(
-      'project-b/new-file.html',
-      html`<div class="[.created_&]:content-['project-b/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-b/new-folder/new-file.html',
-      html`<div class="[.created_&]:content-['project-b/new-folder/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-c/new-file.html',
-      html`<div class="[.created_&]:content-['project-c/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-c/new-folder/new-file.html',
-      html`<div class="[.created_&]:content-['project-c/new-folder/new-file.html']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.created_&]:content-['project-b/new-file.html']`,
-      candidate`[.created_&]:content-['project-b/new-folder/new-file.html']`,
-      candidate`[.created_&]:content-['project-c/new-file.html']`,
-      candidate`[.created_&]:content-['project-c/new-folder/new-file.html']`,
-    ])
-  },
-)
-
-test(
-  'source(…) and `@source` are relative to the file they are in',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.css': css` @import './project-a/src/index.css'; `,
-
-      'project-a/src/index.css': css`
-        /* Run auto-content detection in ../../project-b */
-        @import 'tailwindcss/utilities' source('../../project-b');
-
-        /* Explicitly using node_modules in the @source allows git ignored folders */
-        @source '../../project-c';
-      `,
-
-      // Project A is the current folder, but we explicitly configured
-      // `source(project-b)`, therefore project-a should not be included in
-      // the output.
-      'project-a/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-a/src/index.html']"
-        ></div>
-      `,
-
-      // Project B is the configured `source(…)`, therefore auto source
-      // detection should include known extensions and folders in the output.
-      'project-b/src/index.html': html`
-        <div
-          class="content-['project-b/src/index.html']"
-        ></div>
-      `,
-
-      // Project C should apply auto source detection, therefore known
-      // extensions and folders should be included in the output.
-      'project-c/src/index.html': html`
-        <div
-          class="content-['project-c/src/index.html']"
-        ></div>
-      `,
-    },
-  },
-  async ({ fs, exec, root, expect }) => {
-    await exec('pnpm tailwindcss --input ./index.css --output dist/out.css', { cwd: root })
-
-    let content = await fs.dumpFiles('./dist/*.css')
-
-    expect(content).not.toContain(candidate`content-['project-a/src/index.html']`)
-    expect(content).toContain(candidate`content-['project-b/src/index.html']`)
-    expect(content).toContain(candidate`content-['project-c/src/index.html']`)
-  },
-)
-
-test(
-  '@source order is important (referencing sibling project)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'project-a/src/index.css': css`
-        @import 'tailwindcss/utilities' source(none);
-
-        @source '../../project-b';
-        @source not '../../project-b/ignored';
-        @source '../../project-b/ignored/except.html';
-      `,
-
-      'project-b/keep/keep.html': html`<div class="content-['GOOD-1']"></div>`,
-      'project-b/ignored/ignored.html': html`<div class="content-['BAD-1']"></div>`,
-      'project-b/ignored/except.html': html`<div class="content-['GOOD-2']"></div>`,
-    },
-  },
-  async ({ fs, root, exec, expect }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./project-a/dist/out.css ---
-      @layer properties;
-      .content-\\[\\'GOOD-1\\'\\] {
-        --tw-content: 'GOOD-1';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'GOOD-2\\'\\] {
-        --tw-content: 'GOOD-2';
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  '@source works with symlinks (referencing sibling project)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'project-a/src/index.css': css`
-        @import 'tailwindcss/utilities' source(none);
-
-        /* Same as the previous test, but using symlinks instead */
-        @source '../../project-b';
-        @source not '../../project-b/ignored';
-        @source '../../project-b/ignored/except.html';
-      `,
-
-      'project-b/keep/keep.html': html`<div class="content-['GOOD-1']"></div>`,
-      'project-c/ignored/ignored.html': html`<div class="content-['BAD-1']"></div>`,
-      'project-c/ignored/except.html': html`<div class="content-['GOOD-2']"></div>`,
-
-      // Symlink the ignored folder to another project
-      'project-b/ignored': 'symlink:../../project-c/ignored/',
-    },
-  },
-  async ({ fs, root, exec, expect }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./project-a/dist/out.css ---
-      @layer properties;
-      .content-\\[\\'GOOD-1\\'\\] {
-        --tw-content: 'GOOD-1';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'GOOD-2\\'\\] {
-        --tw-content: 'GOOD-2';
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/issues/19844
-test(
-  '@source scans directories ignored by allow-list .gitignore files',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      '.gitignore': txt`
-        *
-        !/app
-        !/app/design
-        !/app/design/**
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities' source(none);
-        @source '../vendor/acme/theme';
-      `,
-      // 1. Ignored by the `*` in `.gitignore`
-      // 2. Included by the `!` pattern in `.gitignore`
-      // 3. Ignored by `source(none)`
-      //
-      // → Should be ignored
-      'app/design/frontend/theme/templates/component.phtml': html`
-        <div
-          class="content-['app/design/frontend/theme/templates/component.phtml']"
-        ></div>
-      `,
-      // 1. Ignored by the `*` in `.gitignore`
-      // 2. Included by the `!` pattern in `.gitignore`
-      // 3. Ignored by `source(none)`
-      // 4. Included by the `@source` directive
-      //
-      // → Should be included
-      'vendor/acme/theme/module/templates/component.phtml': html`
-        <div
-          class="content-['vendor/acme/theme/module/templates/component.phtml']"
-        ></div>
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    // 1. Ignored by the `*` in `.gitignore`
-    // 2. Included by the `!` pattern in `.gitignore`
-    // 3. Ignored by `source(none)`
-    //
-    // → Should be ignored
-    await fs.expectFileNotToContain('dist/out.css', [
-      candidate`content-['app/design/frontend/theme/templates/component.phtml']`,
-    ])
-
-    // 1. Ignored by the `*` in `.gitignore`
-    // 2. Included by the `!` pattern in `.gitignore`
-    // 3. Ignored by `source(none)`
-    // 4. Included by the `@source` directive
-    //
-    // → Should be included
-    await fs.expectFileToContain('dist/out.css', [
-      candidate`content-['vendor/acme/theme/module/templates/component.phtml']`,
-    ])
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/discussions/20382
-test(
-  'auto source detection respects allow-list .gitignore files',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      '.gitignore': txt`
-        /*
-        !/.gitignore
-        !/app
-        !/public
-        !/package.json
-      `,
-      'app/root.css': css` @import 'tailwindcss/utilities'; `,
-      // Included by the `!/app` pattern in `.gitignore`
-      //
-      // → Should be included
-      'app/index.html': html`
-        <div class="content-['app/index.html']"></div>
-      `,
-      // Included by the `!/public` pattern in `.gitignore`
-      //
-      // → Should be included
-      'public/index.html': html`
-        <div class="content-['public/index.html']"></div>
-      `,
-      // Ignored by the `/*` in `.gitignore`
-      //
-      // → Should be ignored
-      'build/index.html': html`
-        <div class="content-['build/index.html']"></div>
-      `,
-      // Ignored by the `/*` in `.gitignore` and the default `node_modules` rules
-      //
-      // → Should be ignored
-      'node_modules/my-ui-lib/index.html': html`
-        <div
-          class="content-['node_modules/my-ui-lib/index.html']"
-        ></div>
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input app/root.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      candidate`content-['app/index.html']`,
-      candidate`content-['public/index.html']`,
-    ])
-
-    await fs.expectFileNotToContain('dist/out.css', [
-      candidate`content-['build/index.html']`,
-      candidate`content-['node_modules/my-ui-lib/index.html']`,
-    ])
-  },
-)
-
-test(
-  '@source works with symlinks (referencing folder in current folder)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities' source(none);
-
-        /* Same as the previous test, but using symlinks instead */
-        @source '../lib';
-        @source not '../lib/ignored';
-        @source '../lib/ignored/except.html';
-      `,
-
-      'lib/keep/keep.html': html`<div class="content-['GOOD-1']"></div>`,
-      'vendor/ignored/ignored.html': html`<div class="content-['BAD-1']"></div>`,
-      'vendor/ignored/except.html': html`<div class="content-['GOOD-2']"></div>`,
-
-      // Symlink the ignored folder to another folder
-      'lib/ignored': 'symlink:../../vendor/ignored/',
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      @layer properties;
-      .content-\\[\\'GOOD-1\\'\\] {
-        --tw-content: 'GOOD-1';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'GOOD-2\\'\\] {
-        --tw-content: 'GOOD-2';
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'auto source detection disabled',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.css': css`
-        @reference 'tailwindcss/theme';
-
-        /* (1) */
-        /* - Disable auto-source detection */
-        @import 'tailwindcss/utilities' source(none);
-
-        /* (2) */
-        /* - './pages' should be auto-scanned */
-        /* - Only '.html' files should be included */
-        /* - './page/ignored.html' will not be ignored because of the specific pattern */
-        @source "./pages/**/*.html";
-      `,
-
-      '.gitignore': dedent`
-        /src/ignored
-        /pages/ignored.html
-      `,
-
-      // (1)
-      'index.html': 'content-["index.html"] content-["BAD"]', // "Root" source is in `./src`
-      'src/index.html': 'content-["src/index.html"] content-["BAD"]',
-      'src/nested/index.html': 'content-["src/nested/index.html"] content-["BAD"]',
-      'src/index.jpg': 'content-["src/index.jpg"] content-["BAD"]',
-      'src/nested/index.tar': 'content-["src/nested/index.tar"] content-["BAD"]',
-      'src/ignored/index.html': 'content-["src/ignored/index.html"] content-["BAD"]',
-
-      // (4)
-      'pages/foo.html': 'content-["pages/foo.html"]',
-      'pages/nested/foo.html': 'content-["pages/nested/foo.html"]',
-      'pages/ignored.html': 'content-["pages/ignored.html"]',
-      'pages/foo.jsx': 'content-["pages/foo.jsx"] content-["BAD"]',
-      'pages/nested/foo.jsx': 'content-["pages/nested/foo.jsx"] content-["BAD"]',
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm tailwindcss --input index.css --output dist/out.css')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      @layer properties;
-      .content-\\[\\"pages\\/foo\\.html\\"\\] {
-        --tw-content: "pages/foo.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/ignored\\.html\\"\\] {
-        --tw-content: "pages/ignored.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/nested\\/foo\\.html\\"\\] {
-        --tw-content: "pages/nested/foo.html";
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  '@theme reference should never emit values',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'src/index.css': css`
-        @reference "tailwindcss";
-
-        .keep-me {
-          color: red;
-        }
-      `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn(
-      `pnpm tailwindcss --input src/index.css --output dist/out.css --watch`,
-    )
-    await process.onStderr((m) => m.includes('Done in'))
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      .keep-me {
-        color: red;
-      }
-      "
-    `)
-
-    await fs.write(
-      './src/index.css',
-      css`
-        @reference "tailwindcss";
-
-        /* Not a reference! */
-        @theme {
-          --color-pink: pink;
-        }
-
-        .keep-me {
-          color: red;
-        }
-      `,
-    )
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      .keep-me {
-        color: red;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'emit CSS variables if used outside of utilities',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @theme {
-          --color-blue-500: blue;
-        }
-      `,
-      'src/index.ts': ts`
-        function MyComponent() {
-          return <motion.div />
-        }
-      `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn(
-      'pnpm tailwindcss --input src/index.css --output dist/out.css --watch',
-    )
-    await process.onStderr((m) => m.includes('Done in'))
-
-    // No CSS variables are used, so nothing should be generated yet.
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      <EMPTY>
-      "
-    `)
-
-    // Use a CSS variable in JS/TS land, now it should be generated.
-    await fs.write(
-      './src/index.ts',
-      ts`
-        function MyComponent() {
-          return <motion.div animate={{ backgroundColor: 'var(--color-blue-500)' }} />
-        }
-      `,
-    )
-
-    // prettier-ignore
-    await fs.expectFileToContain(
-      './dist/out.css',
-      css`
-        :root, :host {
-          --color-blue-500: blue;
-        }
-      `,
-    )
-  },
-)
-
-test(
-  'can read files with UTF-8 files with BOM',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.css': withBOM(css`
-        @reference 'tailwindcss/theme.css';
-        @import 'tailwindcss/utilities';
-      `),
-      'index.html': withBOM(html`
-        <div class="underline"></div>
-      `),
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm tailwindcss --input index.css --output dist/out.css')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      .underline {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'fails when reading files with UTF-16 files with BOM',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await fs.write(
-      'index.css',
-      withBOM(css`
-        @reference 'tailwindcss/theme.css';
-        @import 'tailwindcss/utilities';
-      `),
-      'utf16le',
-    )
-    await fs.write(
-      'index.html',
-      withBOM(html`
-        <div class="underline"></div>
-      `),
-      'utf16le',
-    )
-
-    await expect(exec('pnpm tailwindcss --input index.css --output dist/out.css')).rejects.toThrow(
-      /Invalid declaration:/,
-    )
-  },
-)
-
-test(
-  'fails when input file does not exist',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-    },
-  },
-  async ({ exec, expect }) => {
-    await expect(exec('pnpm tailwindcss --input index.css --output dist/out.css')).rejects.toThrow(
-      /Specified input file.*does not exist./,
-    )
-  },
-)
-
-test(
-  'fails when input file and output file are the same',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'input.css': '',
-    },
-  },
-  async ({ exec, expect }) => {
-    await expect(exec('pnpm tailwindcss --input input.css --output input.css')).rejects.toThrow(
-      /Specified input file.*and output file.*are identical./,
-    )
-    await expect(
-      exec('pnpm tailwindcss --input input.css --output ./src/../input.css'),
-    ).rejects.toThrow(/Specified input file.*and output file.*are identical./)
-  },
-)
-
-test(
-  'input and output flags can be the same if `-` is used',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`<div class="flex"></div>`,
-    },
-  },
-  async ({ exec, expect }) => {
-    expect(
-      await exec('pnpm tailwindcss --input - --output -', undefined, {
-        stdin: '@tailwind utilities;',
-      }),
-    ).toContain(candidate`flex`)
-  },
-)
-
-test(
-  'suppress output by using the --silent flag',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.css': css` @import 'tailwindcss/utilities';`,
-      'index.html': html`<div class="flex"></div>`,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    let output = await exec('pnpm tailwindcss --input index.css --output dist/loud.css')
-    expect(output).toContain('Done in')
-
-    let silentOutput = await exec(
-      'pnpm tailwindcss --input index.css --output dist/silent.css --silent',
-    )
-    expect(silentOutput).not.toContain('Done in')
-    expect(silentOutput).not.toContain('tailwindcss v')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/loud.css ---
-      .flex {
-        display: flex;
-      }
-
-
-      --- ./dist/silent.css ---
-      .flex {
-        display: flex;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'changes to CSS files should pick up new CSS variables (if any)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'unrelated.module.css': css`
-        .module {
-          color: var(--color-blue-500);
-        }
-      `,
-      'index.css': css`
-        @import 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'index.html': html`<div class="flex"></div>`,
-    },
-  },
-  async ({ spawn, exec, fs, expect }) => {
-    // Generate the initial build so output CSS files exist on disk
-    await exec('pnpm tailwindcss --input ./index.css --output ./dist/out.css')
-
-    // NOTE: We are writing to an output CSS file which is not being ignored by
-    // `.gitignore` nor marked with `@source not`. This should not result in an
-    // infinite loop.
-    let process = await spawn(
-      'pnpm tailwindcss --input ./index.css --output ./dist/out.css --watch',
-    )
-    await process.onStderr((m) => m.includes('Done in'))
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      :root, :host {
-        --color-blue-500: oklch(62.3% 0.214 259.815);
-      }
-      .flex {
-        display: flex;
-      }
-      "
-    `)
-
-    await fs.write(
-      'unrelated.module.css',
-      css`
-        .module {
-          color: var(--color-blue-500);
-          background-color: var(--color-red-500);
-        }
-      `,
-    )
-    await process.onStderr((m) => m.includes('Done in'))
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      :root, :host {
-        --color-red-500: oklch(63.7% 0.237 25.331);
-        --color-blue-500: oklch(62.3% 0.214 259.815);
-      }
-      .flex {
-        display: flex;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'polyfills should be imported after external `@import url(…)` statements',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.css': css`
-        @import url('https://fonts.googleapis.com');
-        @import 'tailwindcss';
-      `,
-      'index.html': html`<div class="bg-red-500/50 shadow-md"></div>`,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm tailwindcss --input ./index.css --output ./dist/out.css')
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      @import url('https://fonts.googleapis.com');
-      @layer properties;
-      @layer theme, base, components, utilities;
-      @layer theme {
-        :root, :host {
-          --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,
-          sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-          --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-          monospace;
-          --color-red-500: oklch(63.7% 0.237 25.331);
-          --default-font-family: var(--font-sans);
-          --default-mono-font-family: var(--font-mono);
-        }
-      }
-      @layer base {
-        *, ::after, ::before, ::backdrop, ::file-selector-button {
-          box-sizing: border-box;
-          margin: 0;
-          padding: 0;
-          border: 0 solid;
-        }
-        html, :host {
-          line-height: 1.5;
-          -webkit-text-size-adjust: 100%;
-          tab-size: 4;
-          font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
-          font-feature-settings: var(--default-font-feature-settings, normal);
-          font-variation-settings: var(--default-font-variation-settings, normal);
-          -webkit-tap-highlight-color: transparent;
-        }
-        hr {
-          height: 0;
-          color: inherit;
-          border-top-width: 1px;
-        }
-        abbr:where([title]) {
-          -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-        }
-        h1, h2, h3, h4, h5, h6 {
-          font-size: inherit;
-          font-weight: inherit;
-        }
-        a {
-          color: inherit;
-          -webkit-text-decoration: inherit;
-          text-decoration: inherit;
-        }
-        b, strong {
-          font-weight: bolder;
-        }
-        code, kbd, samp, pre {
-          font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
-          font-feature-settings: var(--default-mono-font-feature-settings, normal);
-          font-variation-settings: var(--default-mono-font-variation-settings, normal);
-          font-size: 1em;
-        }
-        small {
-          font-size: 80%;
-        }
-        sub, sup {
-          font-size: 75%;
-          line-height: 0;
-          position: relative;
-          vertical-align: baseline;
-        }
-        sub {
-          bottom: -0.25em;
-        }
-        sup {
-          top: -0.5em;
-        }
-        table {
-          text-indent: 0;
-          border-color: inherit;
-          border-collapse: collapse;
-        }
-        :-moz-focusring:where(:not(iframe)) {
-          outline: auto;
-        }
-        progress {
-          vertical-align: baseline;
-        }
-        summary {
-          display: list-item;
-        }
-        ol, ul, menu {
-          list-style: none;
-        }
-        img, svg, video, canvas, audio, iframe, embed, object {
-          display: block;
-          vertical-align: middle;
-        }
-        img, video {
-          max-width: 100%;
-          height: auto;
-        }
-        button, input, select, optgroup, textarea, ::file-selector-button {
-          font: inherit;
-          font-feature-settings: inherit;
-          font-variation-settings: inherit;
-          letter-spacing: inherit;
-          color: inherit;
-          border-radius: 0;
-          background-color: transparent;
-          opacity: 1;
-        }
-        :where(select:is([multiple], [size])) optgroup {
-          font-weight: bolder;
-        }
-        :where(select:is([multiple], [size])) optgroup option {
-          padding-inline-start: 20px;
-        }
-        ::file-selector-button {
-          margin-inline-end: 4px;
-        }
-        ::placeholder {
-          opacity: 1;
-        }
-        @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-          ::placeholder {
-            color: currentcolor;
-            @supports (color: color-mix(in lab, red, red)) {
-              color: color-mix(in oklab, currentcolor 50%, transparent);
-            }
-          }
-        }
-        textarea {
-          resize: vertical;
-        }
-        ::-webkit-search-decoration {
-          -webkit-appearance: none;
-        }
-        ::-webkit-date-and-time-value {
-          min-height: 1lh;
-          text-align: inherit;
-        }
-        ::-webkit-datetime-edit {
-          display: inline-flex;
-        }
-        ::-webkit-datetime-edit-fields-wrapper {
-          padding: 0;
-        }
-        ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
-          padding-block: 0;
-        }
-        ::-webkit-calendar-picker-indicator {
-          line-height: 1;
-        }
-        :-moz-ui-invalid {
-          box-shadow: none;
-        }
-        button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
-          appearance: button;
-        }
-        ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-          height: auto;
-        }
-        [hidden]:where(:not([hidden='until-found'])) {
-          display: none !important;
-        }
-      }
-      @layer utilities {
-        .bg-red-500\\/50 {
-          background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-          }
-        }
-        .shadow-md {
-          --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-        }
-      }
-      @property --tw-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-      @property --tw-shadow-color {
-        syntax: "*";
-        inherits: false;
-      }
-      @property --tw-shadow-alpha {
-        syntax: "<percentage>";
-        inherits: false;
-        initial-value: 100%;
-      }
-      @property --tw-inset-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-      @property --tw-inset-shadow-color {
-        syntax: "*";
-        inherits: false;
-      }
-      @property --tw-inset-shadow-alpha {
-        syntax: "<percentage>";
-        inherits: false;
-        initial-value: 100%;
-      }
-      @property --tw-ring-color {
-        syntax: "*";
-        inherits: false;
-      }
-      @property --tw-ring-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-      @property --tw-inset-ring-color {
-        syntax: "*";
-        inherits: false;
-      }
-      @property --tw-inset-ring-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-      @property --tw-ring-inset {
-        syntax: "*";
-        inherits: false;
-      }
-      @property --tw-ring-offset-width {
-        syntax: "<length>";
-        inherits: false;
-        initial-value: 0px;
-      }
-      @property --tw-ring-offset-color {
-        syntax: "*";
-        inherits: false;
-        initial-value: #fff;
-      }
-      @property --tw-ring-offset-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-shadow: 0 0 #0000;
-            --tw-shadow-color: initial;
-            --tw-shadow-alpha: 100%;
-            --tw-inset-shadow: 0 0 #0000;
-            --tw-inset-shadow-color: initial;
-            --tw-inset-shadow-alpha: 100%;
-            --tw-ring-color: initial;
-            --tw-ring-shadow: 0 0 #0000;
-            --tw-inset-ring-color: initial;
-            --tw-inset-ring-shadow: 0 0 #0000;
-            --tw-ring-inset: initial;
-            --tw-ring-offset-width: 0px;
-            --tw-ring-offset-color: #fff;
-            --tw-ring-offset-shadow: 0 0 #0000;
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'CSS parse errors should include filename and line number',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'input.css': txt`
-        .test {
-          color: red;
-          */
-        }
-      `,
-    },
-  },
-  async ({ exec, expect }) => {
-    await expect(exec('pnpm tailwindcss --input input.css --output dist/out.css')).rejects.toThrow(
-      /CssSyntaxError: .*input.css:3:3: Invalid declaration: `\*\/`/,
-    )
-  },
-)
-
-function withBOM(text: string): string {
-  return '\uFEFF' + text
-}
diff --git a/integrations/cli/plugins.test.ts b/integrations/cli/plugins.test.ts
deleted file mode 100644
index 0b810c538..000000000
--- a/integrations/cli/plugins.test.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-import { candidate, css, html, json, test, ts } from '../utils'
-
-test(
-  'builds the `@tailwindcss/typography` plugin utilities',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/typography": "^0.5.14",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div className="prose prose-stone prose-invert">
-          <h1>Headline</h1>
-          <p>
-            Until now, trying to style an article, document, or blog post with Tailwind has been a
-            tedious task that required a keen eye for typography and a lot of complex custom CSS.
-          </p>
-        </div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin '@tailwindcss/typography';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    // Verify that `prose-stone` is defined before `prose-invert`
-    {
-      let contents = await fs.read('dist/out.css')
-      let proseInvertIdx = contents.indexOf('.prose-invert')
-      let proseStoneIdx = contents.indexOf('.prose-stone')
-
-      expect(proseStoneIdx).toBeLessThan(proseInvertIdx)
-    }
-
-    await fs.expectFileToContain('dist/out.css', [
-      candidate`prose`,
-      ':where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *))',
-      ':where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *))',
-    ])
-  },
-)
-
-test(
-  'builds the `@tailwindcss/typography` plugin utilities with `@variant` usages',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/typography": "^0.5.14",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div className="prose prose-custom">
-          <h1>Headline</h1>
-          <p>
-            Until now, trying to style an article, document, or blog post with Tailwind has been a
-            tedious task that required a keen eye for typography and a lot of complex custom CSS.
-          </p>
-        </div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @theme {
-          --breakpoint-sm: 640px;
-        }
-        @plugin '@tailwindcss/typography';
-        @config '../tailwind.config.js';
-        @custom-variant custom (&.custom);
-      `,
-      'tailwind.config.js': ts`
-        module.exports = {
-          theme: {
-            typography: ({ theme }) => ({
-              custom: {
-                css: {
-                  hr: {
-                    '--x': '1',
-                    '@variant sm:custom': {
-                      '--x': '2',
-                    },
-                  },
-                },
-              },
-            }),
-          },
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    // We don't want to see `@variant` in the output
-    let contents = await fs.read('dist/out.css')
-    expect(contents).not.toContain('@variant')
-
-    expect(await fs.dumpFiles('dist/out.css')).toMatchInlineSnapshot(`
-      "
-      --- dist/out.css ---
-      .prose-custom :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-        --x: 1;
-        @media (width >= 640px) {
-          &.custom {
-            --x: 2;
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'builds the `@tailwindcss/forms` plugin utilities',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/forms": "^0.5.7",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <input type="text" class="form-input" />
-        <textarea class="form-textarea"></textarea>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin '@tailwindcss/forms';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`form-input`,
-      candidate`form-textarea`,
-    ])
-    await fs.expectFileNotToContain('dist/out.css', [
-      //
-      candidate`form-radio`,
-    ])
-  },
-)
-
-test(
-  'builds the `@tailwindcss/forms` plugin utilities (with options)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/forms": "^0.5.7",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <input type="text" class="form-input" />
-        <textarea class="form-textarea"></textarea>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin '@tailwindcss/forms' {
-          strategy: base;
-        }
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      `::-webkit-date-and-time-value`,
-      `input:where([type='checkbox']):indeterminate`,
-    ])
-
-    // No classes are included even though they are used in the HTML
-    // because the `base` strategy is used
-    await fs.expectFileNotToContain('dist/out.css', [
-      //
-      candidate`form-input`,
-      candidate`form-textarea`,
-      candidate`form-radio`,
-    ])
-  },
-)
-
-test(
-  'builds the `@tailwindcss/aspect-ratio` plugin utilities',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/aspect-ratio": "^0.4.2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div class="aspect-w-16 aspect-h-9">
-          <iframe
-            src="https://www.youtube.com/embed/dQw4w9WgXcQ"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-          ></iframe>
-        </div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin '@tailwindcss/aspect-ratio';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`aspect-w-16`,
-      candidate`aspect-h-9`,
-    ])
-  },
-)
-
-test(
-  'builds the `tailwindcss-animate` plugin utilities',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss-animate": "^1.0.7",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div class="animate-in fade-in zoom-in duration-350"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin 'tailwindcss-animate';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      candidate`animate-in`,
-      candidate`fade-in`,
-      candidate`zoom-in`,
-      candidate`duration-350`,
-      'transition-duration: 350ms',
-      'animation-duration: 350ms',
-      '@keyframes enter {',
-    ])
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/issues/15844
-test(
-  'builds CSS with a custom plugin compiled from TypeScript',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          },
-          "devDependencies": {
-            "typescript": "^5.7.2"
-          }
-        }
-      `,
-      'tsconfig.json': json`
-        {
-          "compilerOptions": {
-            "target": "ES2022",
-            "module": "NodeNext",
-            "moduleResolution": "NodeNext",
-            "declaration": true,
-            "composite": true,
-            "rootDir": "./src",
-            "outDir": "./.build",
-            "skipLibCheck": true
-          },
-          "include": ["src/**/*.ts"]
-        }
-      `,
-      'index.html': html`
-        <div class="test-red"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin '../.build/plugin.js';
-      `,
-      'src/plugin.ts': ts`
-        import plugin from 'tailwindcss/plugin'
-
-        export const typedPlugin = plugin(() => {
-          return ({ matchComponents }) => {
-            matchComponents(
-              {
-                test: (content: string) => ({
-                  color: content,
-                }),
-              },
-              {
-                values: {
-                  red: 'red',
-                },
-              },
-            )
-          }
-        })
-
-        export default plugin(({ matchComponents }) => {
-          matchComponents(
-            {
-              test: (content: string) => ({
-                color: content,
-              }),
-            },
-            {
-              values: {
-                red: 'red',
-              },
-            },
-          )
-        })
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    // We expect that these commands don't crash:
-    await exec('pnpm tsc -b')
-    await exec('pnpm tailwindcss --input src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [candidate`test-red`])
-  },
-)
diff --git a/integrations/cli/standalone.test.ts b/integrations/cli/standalone.test.ts
deleted file mode 100644
index f84bf4511..000000000
--- a/integrations/cli/standalone.test.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-import nodeFs from 'node:fs/promises'
-import os from 'node:os'
-import path from 'node:path'
-import { candidate, css, html, IS_WINDOWS, js, json, test, ts } from '../utils'
-
-const STANDALONE_BINARY = (() => {
-  switch (os.platform()) {
-    case 'win32':
-      return 'tailwindcss-windows-x64.exe'
-    case 'darwin':
-      return os.arch() === 'x64' ? 'tailwindcss-macos-x64' : 'tailwindcss-macos-arm64'
-    case 'linux':
-      return os.arch() === 'x64' ? 'tailwindcss-linux-x64' : 'tailwindcss-linux-arm64'
-    default:
-      throw new Error(`Unsupported platform: ${os.platform()} ${os.arch()}`)
-  }
-})()
-
-test(
-  'does not scan itself for candidates',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {}
-        }
-      `,
-      'src/index.css': css` @import 'tailwindcss'; `,
-    },
-  },
-  async ({ root, fs, exec }) => {
-    let sourceBinary = path.resolve(
-      __dirname,
-      `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`,
-    )
-    let binary = IS_WINDOWS ? 'tailwindcss.exe' : 'tailwindcss'
-    let localBinary = path.join(root, binary)
-    await nodeFs.copyFile(sourceBinary, localBinary)
-
-    if (!IS_WINDOWS) {
-      await nodeFs.chmod(localBinary, 0o755)
-    }
-
-    await exec(`${IS_WINDOWS ? binary : `./${binary}`} --input src/index.css --output dist/out.css`)
-
-    await fs.expectFileNotToContain('dist/out.css', [
-      candidate`flex`,
-      candidate`grid`,
-      candidate`underline`,
-    ])
-  },
-)
-
-test(
-  'includes first-party plugins',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'index.html': html`
-        <div className="prose">
-          <h1>Headline</h1>
-        </div>
-        <input type="text" class="form-input" />
-        <div class="aspect-w-16"></div>
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-
-        @plugin '@tailwindcss/forms';
-        @plugin '@tailwindcss/typography';
-        @plugin '@tailwindcss/aspect-ratio';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec(
-      `${path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`)} --input src/index.css --output dist/out.css`,
-    )
-
-    await fs.expectFileToContain('dist/out.css', [
-      candidate`form-input`,
-      candidate`prose`,
-      candidate`aspect-w-16`,
-    ])
-  },
-)
-
-test(
-  'includes js APIs for plugins',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {}
-        }
-      `,
-      'index.html': html`
-        <div class="underline example1 example2 example3"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/theme' theme(reference);
-        @import 'tailwindcss/utilities';
-        @plugin './plugin.js';
-        @plugin './plugin.cjs';
-        @plugin './plugin.ts';
-      `,
-      'src/plugin.js': js`
-        import plugin from 'tailwindcss/plugin'
-
-        // Make sure all available JS APIs can be imported and used
-        import * as tw from 'tailwindcss'
-        import colors from 'tailwindcss/colors'
-        import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
-        import defaultTheme from 'tailwindcss/defaultTheme'
-        import * as pkg from 'tailwindcss/package.json'
-
-        export default plugin(function ({ addUtilities }) {
-          addUtilities({
-            '.example1': {
-              '--version': pkg.version,
-              '--default-theme': typeof defaultTheme,
-              '--flatten-color-palette': typeof flattenColorPalette,
-              '--colors': typeof colors,
-              '--core': typeof tw,
-              color: 'red',
-            },
-          })
-        })
-      `,
-      'src/plugin.cjs': js`
-        const plugin = require('tailwindcss/plugin')
-
-        // Make sure all available JS APIs can be imported and used
-        const tw = require('tailwindcss')
-        const colors = require('tailwindcss/colors')
-        const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette')
-        const defaultTheme = require('tailwindcss/defaultTheme')
-        const pkg = require('tailwindcss/package.json')
-
-        module.exports = plugin(function ({ addUtilities }) {
-          addUtilities({
-            '.example2': {
-              '--version': pkg.version,
-              '--default-theme': typeof defaultTheme,
-              '--flatten-color-palette': typeof flattenColorPalette,
-              '--colors': typeof colors,
-              '--core': typeof tw,
-              color: 'red',
-            },
-          })
-        })
-      `,
-      'src/plugin.ts': ts`
-        import plugin from 'tailwindcss/plugin'
-
-        // Make sure all available JS APIs can be imported and used
-        import * as tw from 'tailwindcss'
-        import colors from 'tailwindcss/colors'
-        import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'
-        import defaultTheme from 'tailwindcss/defaultTheme'
-        import * as pkg from 'tailwindcss/package.json'
-
-        export interface PluginOptions {}
-
-        export default plugin(function ({ addUtilities }) {
-          addUtilities({
-            '.example3': {
-              '--version': pkg.version,
-              '--default-theme': typeof defaultTheme,
-              '--flatten-color-palette': typeof flattenColorPalette,
-              '--colors': typeof colors,
-              '--core': typeof tw,
-              color: 'red',
-            },
-          })
-        })
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec(
-      `${path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`)} --input src/index.css --output dist/out.css`,
-    )
-
-    await fs.expectFileToContain('dist/out.css', [
-      candidate`underline`,
-      candidate`example1`,
-      candidate`example2`,
-      candidate`example3`,
-    ])
-  },
-)
diff --git a/integrations/oxide/wasm.test.ts b/integrations/oxide/wasm.test.ts
deleted file mode 100644
index 2d63c707a..000000000
--- a/integrations/oxide/wasm.test.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-import { css, js, json, test, yaml } from '../utils'
-
-// This test runs the wasm build using the `node:wasi` runtime.
-//
-// There are currently a known problems that the Node WASI preview implementation does not properly
-// handle FS reads on macOS and it does not implement all APIs on Windows. Because of that, this
-// test is only run on Linux for now.
-//
-// https://github.com/nodejs/node/issues/47193
-// https://github.com/nodejs/uvwasi/issues/11
-
-let testFn = process.platform === 'linux' ? test : test.skip
-
-testFn(
-  '@tailwindcss/oxide-wasm32-wasi can be loaded into a Node.js process',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/oxide-wasm32-wasi": "workspace:^"
-          }
-        }
-      `,
-      'src/index.css': css`@import 'tailwindcss/utilities';`,
-      'src/index.js': js`
-        const className = "content-['src/index.js']"
-        module.exports = { className }
-      `,
-      'index.mjs': js`
-        import { Scanner } from '@tailwindcss/oxide-wasm32-wasi'
-        import { join, resolve } from 'node:path'
-
-        let scanner = new Scanner({
-          sources: [
-            {
-              base: join(process.cwd(), 'src'),
-              pattern: '**/*',
-              negated: false,
-            },
-          ],
-        })
-        console.log(JSON.stringify(scanner.scan()))
-        process.exit()
-      `,
-    },
-  },
-  async ({ expect, exec }) => {
-    let output = await exec(`node index.mjs`)
-    expect(JSON.parse(output)).toMatchInlineSnapshot(`
-      [
-        "className",
-        "const",
-        "content-['src/index.js']",
-        "exports",
-      ]
-    `)
-  },
-)
-
-testFn(
-  '`@tailwindcss/oxide` falls back to the wasm build when no native binding is available',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/oxide": "workspace:^"
-          }
-        }
-      `,
-      'pnpm-workspace.yaml': yaml`
-        # Trick pnpm in only supporting an architecture that @tailwindcss/oxide
-        # doesn't support, and therefore should fallback to the wasm version.
-        supportedArchitectures:
-          os:
-            - openbsd
-          cpu:
-            - x64
-      `,
-      'src/index.js': js`
-        const className = "content-['src/index.js']"
-        module.exports = { className }
-      `,
-      'index.mjs': js`
-        import { createRequire } from 'node:module'
-        import { join } from 'node:path'
-
-        let require = createRequire(import.meta.url)
-        let { Scanner } = require('@tailwindcss/oxide')
-
-        let loaded = Object.keys(require.cache)
-
-        let scanner = new Scanner({
-          sources: [
-            {
-              base: join(process.cwd(), 'src'),
-              pattern: '**/*',
-              negated: false,
-            },
-          ],
-        })
-
-        console.log(
-          JSON.stringify({
-            native: loaded.filter((file) => file.endsWith('.node')),
-            wasi: loaded.some((file) => file.endsWith('tailwindcss-oxide.wasi.cjs')),
-            candidates: scanner.scan(),
-          }),
-        )
-        process.exit()
-      `,
-    },
-  },
-  async ({ expect, exec }) => {
-    // Since vitest runs under `pnpm run`, pnpm's bin shims export a NODE_PATH
-    // that includes the repository's hidden hoist directory
-    // (`node_modules/.pnpm/node_modules`), which links every workspace package,
-    // including all native `@tailwindcss/oxide-*` bindings.
-    //
-    // Node uses `NODE_PATH` exactly when the local `node_modules` lookup fails,
-    // which would defeat the simulated unsupported platform, so clear it.
-    let output = await exec(`node index.mjs`, { env: { NODE_PATH: '' } })
-    let { native, wasi, candidates } = JSON.parse(output)
-
-    // No native binding was installed or loaded, ...
-    expect(native).toEqual([])
-
-    // ... the wasm32-wasi binding is what actually loaded, ...
-    expect(wasi).toBe(true)
-
-    // ... and scanning real files on disk works through it.
-    expect(candidates).toMatchInlineSnapshot(`
-      [
-        "className",
-        "const",
-        "content-['src/index.js']",
-        "exports",
-      ]
-    `)
-  },
-)
-
-testFn(
-  'the wasm build loads even when preopening the filesystem root is denied',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/oxide": "workspace:^"
-          }
-        }
-      `,
-      'pnpm-workspace.yaml': yaml`
-        # Trick pnpm in only supporting an architecture that @tailwindcss/oxide
-        # doesn't support, and therefore should fallback to the wasm version.
-        supportedArchitectures:
-          os:
-            - openbsd
-          cpu:
-            - x64
-      `,
-      // The wasm bindings generated by `@napi-rs/cli` preopen the filesystem
-      // root, which sandboxed platforms (e.g. OpenHarmony, Android) deny with
-      // `UVWASI_EACCES`, making the wasm fallback fail to load on exactly the
-      // platforms that need it.
-      //
-      // We patch `@napi-rs/cli`'s templates to retry with narrower preopens
-      // (see `patches/@napi-rs__cli@3.7.4.patch`). Simulate such a sandbox by
-      // denying `/` preopens.
-      'preload.cjs': js`
-        const wasi = require('node:wasi')
-        const RealWASI = wasi.WASI
-
-        wasi.WASI = class WASI extends RealWASI {
-          constructor(options) {
-            if (options?.preopens?.['/'] !== undefined) {
-              const error = new Error('UVWASI_EACCES, uvwasi_init')
-              error.code = 'UVWASI_EACCES'
-              error.syscall = 'uvwasi_init'
-              throw error
-            }
-            super(options)
-          }
-        }
-      `,
-      'src/index.js': js`
-        const className = "content-['src/index.js']"
-        module.exports = { className }
-      `,
-      'index.mjs': js`
-        import { createRequire } from 'node:module'
-        import { join } from 'node:path'
-
-        let require = createRequire(import.meta.url)
-        let { Scanner } = require('@tailwindcss/oxide')
-
-        let loaded = Object.keys(require.cache)
-
-        let scanner = new Scanner({
-          sources: [
-            {
-              base: join(process.cwd(), 'src'),
-              pattern: '**/*',
-              negated: false,
-            },
-          ],
-        })
-
-        console.log(
-          JSON.stringify({
-            wasi: loaded.some((file) => file.endsWith('tailwindcss-oxide.wasi.cjs')),
-            candidates: scanner.scan(),
-          }),
-        )
-        process.exit()
-      `,
-    },
-  },
-  async ({ expect, exec }) => {
-    // See the note about NODE_PATH in the test above.
-    let output = await exec(`node --require ./preload.cjs index.mjs`, { env: { NODE_PATH: '' } })
-
-    // Only parse the first line, because Node prints an `ExperimentalWarning`
-    // about WASI to stderr, which `exec` appends to the output.
-    let { wasi, candidates } = JSON.parse(output.trim().split('\n')[0])
-
-    // The wasm32-wasi binding loaded despite `/` being denied, ...
-    expect(wasi).toBe(true)
-
-    // ... and scanning files under the current working directory still works
-    // through the narrower preopen.
-    expect(candidates).toMatchInlineSnapshot(`
-      [
-        "className",
-        "const",
-        "content-['src/index.js']",
-        "exports",
-      ]
-    `)
-  },
-)
diff --git a/integrations/oxide/workers.test.ts b/integrations/oxide/workers.test.ts
deleted file mode 100644
index 54d85f271..000000000
--- a/integrations/oxide/workers.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { js, json, test } from '../utils'
-
-test(
-  '@tailwindcss/oxide can be loaded into a Node.js worker thread',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "@tailwindcss/oxide": "workspace:^"
-          }
-        }
-      `,
-      'start.js': js`
-        let { Worker } = require('worker_threads')
-        new Worker('./worker.js')
-      `,
-      'worker.js': js`
-        require('@tailwindcss/oxide')
-        process.on('exit', () => console.log('worker thread exited'))
-      `,
-    },
-  },
-  async ({ exec, expect }) => {
-    let output = await exec('node ./start.js').then(
-      (out) => out.trim(),
-      (err) => `${err}`,
-    )
-
-    expect(output).toEqual('worker thread exited')
-  },
-)
diff --git a/integrations/package.json b/integrations/package.json
deleted file mode 100644
index ae337b5e4..000000000
--- a/integrations/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "internal-integrations",
-  "version": "0.0.0",
-  "private": true,
-  "devDependencies": {
-    "dedent": "catalog:",
-    "fast-glob": "^3.3.3",
-    "source-map-js": "^1.2.1",
-    "yaml": "^2.9.0"
-  }
-}
diff --git a/integrations/postcss/config.test.ts b/integrations/postcss/config.test.ts
deleted file mode 100644
index 11a3c4bd6..000000000
--- a/integrations/postcss/config.test.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import { candidate, css, html, js, json, test } from '../utils'
-
-test(
-  'Config files (CJS)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        /** @type {import('postcss-load-config').Config} */
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.js': js`
-        module.exports = {
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.js';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-    ])
-  },
-)
-
-test(
-  'Config files (ESM)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.mjs': js`
-        import tailwindcss from '@tailwindcss/postcss'
-        /** @type {import('postcss-load-config').Config} */
-        export default {
-          plugins: [tailwindcss()],
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.mjs': js`
-        export default {
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.mjs';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-    ])
-  },
-)
-
-test(
-  'Config files (CJS, watch mode)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        /** @type {import('postcss-load-config').Config} */
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.js': js`
-        let myColor = require('./my-color.js')
-        module.exports = {
-          theme: {
-            extend: {
-              colors: {
-                primary: myColor,
-              },
-            },
-          },
-        }
-      `,
-      'my-color.js': js`module.exports = 'blue'`,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.js';
-      `,
-    },
-  },
-  async ({ fs, spawn }) => {
-    let process = await spawn('pnpm postcss src/index.css --output dist/out.css --watch --verbose')
-    await process.onStderr((m) => m.includes('Waiting for file changes'))
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: blue',
-    ])
-
-    // While working on this test we noticed that it was failing in about 1-2%
-    // of the runs. We tracked this down to being a proper `delete
-    // require.cache` call for the `my-color.js` file but for some reason
-    // reading it will result in the previous contents.
-    //
-    // To work around this, we give postcss some time to stabilize.
-    await new Promise((resolve) => setTimeout(resolve, 500))
-
-    await fs.write('my-color.js', js`module.exports = 'red'`)
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: red',
-    ])
-  },
-)
-
-test(
-  'Config files (ESM, watch mode)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.mjs': js`
-        import tailwindcss from '@tailwindcss/postcss'
-        /** @type {import('postcss-load-config').Config} */
-        export default {
-          plugins: [tailwindcss()],
-        }
-      `,
-      'index.html': html`
-        <div class="text-primary"></div>
-      `,
-      'tailwind.config.mjs': js`
-        import myColor from './my-color.mjs'
-        export default {
-          theme: {
-            extend: {
-              colors: {
-                primary: myColor,
-              },
-            },
-          },
-        }
-      `,
-      'my-color.mjs': js`export default 'blue'`,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.mjs';
-      `,
-    },
-  },
-  async ({ fs, spawn }) => {
-    let process = await spawn('pnpm postcss src/index.css --output dist/out.css --watch --verbose')
-    await process.onStderr((m) => m.includes('Waiting for file changes'))
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: blue',
-    ])
-
-    // While working on this test we noticed that it was failing in about 1-2%
-    // of the runs. We tracked this down to being a proper reset of ESM imports
-    // for the `my-color.js` file but for some reason reading it will result in
-    // the previous contents.
-    //
-    // To work around this, we give postcss some time to stabilize.
-    await new Promise((resolve) => setTimeout(resolve, 500))
-
-    await fs.write('my-color.mjs', js`export default 'red'`)
-
-    await fs.expectFileToContain('dist/out.css', [
-      //
-      candidate`text-primary`,
-      'color: red',
-    ])
-  },
-)
diff --git a/integrations/postcss/core-as-postcss-plugin.test.ts b/integrations/postcss/core-as-postcss-plugin.test.ts
deleted file mode 100644
index 839c80e7b..000000000
--- a/integrations/postcss/core-as-postcss-plugin.test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { describe } from 'vitest'
-import { css, js, json, test } from '../utils'
-
-const variantConfig = {
-  string: {
-    'postcss.config.js': js`
-      module.exports = {
-        plugins: {
-          tailwindcss: {},
-        },
-      }
-    `,
-  },
-  ESM: {
-    'postcss.config.mjs': js`
-      import tailwindcss from 'tailwindcss'
-      export default {
-        plugins: [tailwindcss()],
-      }
-    `,
-  },
-  CJS: {
-    'postcss.config.cjs': js`
-      let tailwindcss = require('tailwindcss')
-      module.exports = {
-        plugins: [tailwindcss()],
-      }
-    `,
-  },
-}
-
-describe.each(Object.keys(variantConfig))('%s', (variant) => {
-  test(
-    `can not use \`tailwindcss\` as a postcss module`,
-    {
-      fs: {
-        ...variantConfig[variant],
-        'package.json': json`
-          {
-            "dependencies": {
-              "postcss": "^8",
-              "postcss-cli": "^10",
-              "tailwindcss": "workspace:^"
-            }
-          }
-        `,
-        'src/index.css': css`@import 'tailwindcss';`,
-      },
-    },
-    async ({ exec, expect }) => {
-      await expect(
-        exec('pnpm postcss src/index.css --output dist/out.css', undefined, { ignoreStdErr: true }),
-      ).rejects.toThrow(
-        `It looks like you're trying to use \`tailwindcss\` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install \`@tailwindcss/postcss\` and update your PostCSS configuration.`,
-      )
-    },
-  )
-})
diff --git a/integrations/postcss/index.test.ts b/integrations/postcss/index.test.ts
deleted file mode 100644
index 80025f945..000000000
--- a/integrations/postcss/index.test.ts
+++ /dev/null
@@ -1,893 +0,0 @@
-import path from 'node:path'
-import { candidate, css, html, js, json, test, ts, yaml } from '../utils'
-
-test(
-  'production build (string)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'project-a/postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'project-a/index.html': html`
-        <div
-          class="underline 2xl:font-bold hocus:underline inverted:flex"
-        ></div>
-      `,
-      'project-a/plugin.js': js`
-        module.exports = function ({ addVariant }) {
-          addVariant('inverted', '@media (inverted-colors: inverted)')
-          addVariant('hocus', ['&:focus', '&:hover'])
-        }
-      `,
-      'project-a/tailwind.config.js': js`
-        module.exports = {
-          content: ['../project-b/src/**/*.js'],
-        }
-      `,
-      'project-a/src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @config '../tailwind.config.js';
-        @source '../../project-b/src/**/*.html';
-        @plugin '../plugin.js';
-      `,
-      'project-a/src/index.js': js`
-        const className = "content-['a/src/index.js']"
-        module.exports = { className }
-      `,
-      'project-b/src/index.html': html`
-        <div class="flex" />
-      `,
-      'project-b/src/index.js': js`
-        const className = "content-['b/src/index.js']"
-        module.exports = { className }
-      `,
-    },
-  },
-  async ({ root, fs, exec }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    await fs.expectFileToContain('project-a/dist/out.css', [
-      candidate`underline`,
-      candidate`flex`,
-      candidate`content-['a/src/index.js']`,
-      candidate`content-['b/src/index.js']`,
-      candidate`inverted:flex`,
-      candidate`hocus:underline`,
-    ])
-  },
-)
-
-test(
-  'production build with `postcss-import` (string)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "postcss-import": "^16",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'project-a/postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            'postcss-import': {},
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'project-a/index.html': html`
-        <div
-          class="underline 2xl:font-bold hocus:underline inverted:flex"
-        ></div>
-      `,
-      'project-a/plugin.js': js`
-        module.exports = function ({ addVariant }) {
-          addVariant('inverted', '@media (inverted-colors: inverted)')
-          addVariant('hocus', ['&:focus', '&:hover'])
-        }
-      `,
-      'project-a/tailwind.config.js': js`
-        module.exports = {
-          content: ['../project-b/src/**/*.js'],
-        }
-      `,
-      'project-a/src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @config '../tailwind.config.js';
-        @source '../../project-b/src/**/*.html';
-        @plugin '../plugin.js';
-      `,
-      'project-a/src/index.js': js`
-        const className = "content-['a/src/index.js']"
-        module.exports = { className }
-      `,
-      'project-b/src/index.html': html`
-        <div class="flex" />
-      `,
-      'project-b/src/index.js': js`
-        const className = "content-['b/src/index.js']"
-        module.exports = { className }
-      `,
-    },
-  },
-  async ({ root, fs, exec }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    await fs.expectFileToContain('project-a/dist/out.css', [
-      candidate`underline`,
-      candidate`flex`,
-      candidate`content-['a/src/index.js']`,
-      candidate`content-['b/src/index.js']`,
-      candidate`inverted:flex`,
-      candidate`hocus:underline`,
-    ])
-  },
-)
-
-test(
-  'production build (ESM)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'project-a/postcss.config.mjs': js`
-        import tailwindcss from '@tailwindcss/postcss'
-        export default {
-          plugins: [tailwindcss()],
-        }
-      `,
-      'project-a/index.html': html`
-        <div
-          class="underline 2xl:font-bold hocus:underline inverted:flex"
-        ></div>
-      `,
-      'project-a/plugin.js': js`
-        module.exports = function ({ addVariant }) {
-          addVariant('inverted', '@media (inverted-colors: inverted)')
-          addVariant('hocus', ['&:focus', '&:hover'])
-        }
-      `,
-      'project-a/tailwind.config.js': js`
-        module.exports = {
-          content: ['../project-b/src/**/*.js'],
-        }
-      `,
-      'project-a/src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @config '../tailwind.config.js';
-        @source '../../project-b/src/**/*.html';
-        @plugin '../plugin.js';
-      `,
-      'project-a/src/index.js': js`
-        const className = "content-['a/src/index.js']"
-        module.exports = { className }
-      `,
-      'project-b/src/index.html': html`
-        <div class="flex" />
-      `,
-      'project-b/src/index.js': js`
-        const className = "content-['b/src/index.js']"
-        module.exports = { className }
-      `,
-    },
-  },
-  async ({ root, fs, exec }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    await fs.expectFileToContain('project-a/dist/out.css', [
-      candidate`underline`,
-      candidate`flex`,
-      candidate`content-['a/src/index.js']`,
-      candidate`content-['b/src/index.js']`,
-      candidate`inverted:flex`,
-      candidate`hocus:underline`,
-    ])
-  },
-)
-
-test(
-  'production build (CJS)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'project-a/postcss.config.cjs': js`
-        let tailwindcss = require('@tailwindcss/postcss')
-        module.exports = {
-          plugins: [tailwindcss()],
-        }
-      `,
-      'project-a/index.html': html`
-        <div
-          class="underline 2xl:font-bold hocus:underline inverted:flex"
-        ></div>
-      `,
-      'project-a/plugin.js': js`
-        module.exports = function ({ addVariant }) {
-          addVariant('inverted', '@media (inverted-colors: inverted)')
-          addVariant('hocus', ['&:focus', '&:hover'])
-        }
-      `,
-      'project-a/tailwind.config.js': js`
-        module.exports = {
-          content: ['../project-b/src/**/*.js'],
-        }
-      `,
-      'project-a/src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @config '../tailwind.config.js';
-        @source '../../project-b/src/**/*.html';
-        @plugin '../plugin.js';
-      `,
-      'project-a/src/index.js': js`
-        const className = "content-['a/src/index.js']"
-        module.exports = { className }
-      `,
-      'project-b/src/index.html': html`
-        <div class="flex" />
-      `,
-      'project-b/src/index.js': js`
-        const className = "content-['b/src/index.js']"
-        module.exports = { className }
-      `,
-    },
-  },
-  async ({ root, fs, exec }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    await fs.expectFileToContain('project-a/dist/out.css', [
-      candidate`underline`,
-      candidate`flex`,
-      candidate`content-['a/src/index.js']`,
-      candidate`content-['b/src/index.js']`,
-      candidate`inverted:flex`,
-      candidate`hocus:underline`,
-    ])
-  },
-)
-
-test(
-  'module resolution using CJS, ESM, CTS, and MTS',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-cjs
-          - project-esm
-          - plugin-cjs
-          - plugin-esm
-          - plugin-cts
-          - plugin-mts
-      `,
-      'project-cjs/package.json': json`
-        {
-          "type": "commonjs",
-          "dependencies": {
-            "@tailwindcss/postcss": "workspace:^",
-            "plugin-cjs": "workspace:*",
-            "plugin-cts": "workspace:*",
-            "plugin-esm": "workspace:*",
-            "plugin-mts": "workspace:*",
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'project-cjs/postcss.config.cjs': js`
-        let tailwindcss = require('@tailwindcss/postcss')
-        module.exports = {
-          plugins: [tailwindcss()],
-        }
-      `,
-      'project-cjs/index.html': html`
-        <div class="cjs esm cts mts"></div>
-      `,
-      'project-cjs/src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @plugin 'plugin-cjs';
-        @plugin 'plugin-esm';
-        @plugin 'plugin-cts';
-        @plugin 'plugin-mts';
-      `,
-
-      'project-esm/package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/postcss": "workspace:^",
-            "plugin-cjs": "workspace:*",
-            "plugin-cts": "workspace:*",
-            "plugin-esm": "workspace:*",
-            "plugin-mts": "workspace:*",
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'project-esm/postcss.config.mjs': js`
-        import tailwindcss from '@tailwindcss/postcss'
-        export default {
-          plugins: [tailwindcss()],
-        }
-      `,
-      'project-esm/index.html': html`
-        <div class="cjs esm cts mts"></div>
-      `,
-      'project-esm/src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @plugin 'plugin-cjs';
-        @plugin 'plugin-esm';
-        @plugin 'plugin-cts';
-        @plugin 'plugin-mts';
-      `,
-
-      'plugin-cjs/package.json': json`
-        {
-          "name": "plugin-cjs",
-          "type": "commonjs",
-          "exports": {
-            ".": {
-              "require": "./index.cjs"
-            }
-          }
-        }
-      `,
-      'plugin-cjs/index.cjs': js`
-        module.exports = function ({ addUtilities }) {
-          addUtilities({ '.cjs': { content: '"cjs"' } })
-        }
-      `,
-
-      'plugin-esm/package.json': json`
-        {
-          "name": "plugin-esm",
-          "type": "module",
-          "exports": {
-            ".": {
-              "import": "./index.mjs"
-            }
-          }
-        }
-      `,
-      'plugin-esm/index.mjs': js`
-        export default function ({ addUtilities }) {
-          addUtilities({ '.esm': { content: '"esm"' } })
-        }
-      `,
-
-      'plugin-cts/package.json': json`
-        {
-          "name": "plugin-cts",
-          "type": "commonjs",
-          "exports": {
-            ".": {
-              "require": "./index.cts"
-            }
-          }
-        }
-      `,
-      'plugin-cts/index.cts': ts`
-        export default function ({ addUtilities }) {
-          addUtilities({ '.cts': { content: '"cts"' as const } })
-        }
-      `,
-
-      'plugin-mts/package.json': json`
-        {
-          "name": "plugin-mts",
-          "type": "module",
-          "exports": {
-            ".": {
-              "import": "./index.mts"
-            }
-          }
-        }
-      `,
-      'plugin-mts/index.mts': ts`
-        export default function ({ addUtilities }) {
-          addUtilities({ '.mts': { content: '"mts"' as const } })
-        }
-      `,
-    },
-  },
-  async ({ root, fs, exec }) => {
-    await exec(`pnpm postcss src/index.css --output dist/out.css`, {
-      cwd: path.join(root, 'project-cjs'),
-    })
-    await exec(`pnpm postcss src/index.css --output dist/out.css`, {
-      cwd: path.join(root, 'project-esm'),
-    })
-
-    await fs.expectFileToContain('./project-cjs/dist/out.css', [
-      candidate`cjs`,
-      candidate`esm`,
-      candidate`cts`,
-      candidate`mts`,
-    ])
-    await fs.expectFileToContain('./project-esm/dist/out.css', [
-      candidate`cjs`,
-      candidate`esm`,
-      candidate`cts`,
-      candidate`mts`,
-    ])
-  },
-)
-
-test(
-  'watch mode',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'project-a/postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'project-a/index.html': html`
-        <div
-          class="underline 2xl:font-bold hocus:underline inverted:flex text-primary"
-        ></div>
-      `,
-      'project-a/plugin.js': js`
-        module.exports = function ({ addVariant }) {
-          addVariant('inverted', '@media (inverted-colors: inverted)')
-          addVariant('hocus', ['&:focus', '&:hover'])
-        }
-      `,
-      'project-a/tailwind.config.js': js`
-        module.exports = {
-          content: ['../project-b/src/**/*.js'],
-        }
-      `,
-      'project-a/src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @import './custom-theme.css';
-        @config '../tailwind.config.js';
-        @source '../../project-b/src/**/*.html';
-        @plugin '../plugin.js';
-      `,
-      'project-a/src/custom-theme.css': css`
-        /* Will be overwritten later */
-        @theme {
-          --color-primary: black;
-        }
-      `,
-      'project-a/src/index.js': js`
-        const className = "content-['a/src/index.js']"
-        module.exports = { className }
-      `,
-      'project-b/src/index.html': html`
-        <div class="flex" />
-      `,
-      'project-b/src/index.js': js`
-        const className = "content-['b/src/index.js']"
-        module.exports = { className }
-      `,
-      'project-c/src/index.js': js`
-        const className = "content-['c/src/index.js']"
-        module.exports = { className }
-      `,
-    },
-  },
-  async ({ root, fs, spawn }) => {
-    let process = await spawn(
-      'pnpm postcss src/index.css --output dist/out.css --watch --verbose',
-      { cwd: path.join(root, 'project-a') },
-    )
-    await process.onStderr((message) => message.includes('Waiting for file changes...'))
-
-    await fs.expectFileToContain('project-a/dist/out.css', [
-      candidate`underline`,
-      candidate`flex`,
-      candidate`content-['a/src/index.js']`,
-      candidate`content-['b/src/index.js']`,
-      candidate`inverted:flex`,
-      candidate`hocus:underline`,
-      css`
-        .text-primary {
-          color: var(--color-primary);
-        }
-      `,
-    ])
-
-    await fs.write(
-      'project-a/src/index.js',
-      js`
-        const className = "[.changed_&]:content-['project-a/src/index.js']"
-        module.exports = { className }
-      `,
-    )
-
-    await fs.expectFileToContain('project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/src/index.js']`,
-    ])
-
-    await fs.write(
-      'project-b/src/index.js',
-      js`
-        const className = "[.changed_&]:content-['project-b/src/index.js']"
-        module.exports = { className }
-      `,
-    )
-
-    await fs.expectFileToContain('project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-b/src/index.js']`,
-    ])
-
-    await fs.write(
-      'project-a/src/custom-theme.css',
-      css`
-        /* Overriding the primary color */
-        @theme {
-          --color-primary: red;
-        }
-      `,
-    )
-
-    await fs.expectFileToContain('project-a/dist/out.css', [
-      css`
-        .text-primary {
-          color: var(--color-primary);
-        }
-      `,
-    ])
-
-    // Adding a new @source directive will scan for new candidates
-    await fs.write(
-      'project-a/src/index.css',
-      css`
-        @import 'tailwindcss/utilities';
-        @import './custom-theme.css';
-        @config '../tailwind.config.js';
-        @source '../../project-b/src/**/*.html';
-        @plugin '../plugin.js';
-        @source '../../project-c/src/**/*.js';
-      `,
-    )
-    await fs.expectFileToContain('project-a/dist/out.css', [candidate`content-['c/src/index.js']`])
-  },
-)
-
-test(
-  'rebuild error recovery',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "devDependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'src/index.html': html`
-        <div class="underline"></div>
-      `,
-      'src/index.css': css` @import './tailwind.css'; `,
-      'src/tailwind.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ fs, expect, spawn }) => {
-    // 1. Start the watcher
-    //
-    // It must have valid CSS for the initial build
-    let process = await spawn('pnpm postcss src/index.css --output dist/out.css --watch --verbose')
-
-    await process.onStderr((message) => message.includes('Waiting for file changes...'))
-
-    expect(await fs.dumpFiles('dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- dist/out.css ---
-      .underline {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-
-    // 2. Cause an error
-    await fs.write(
-      'src/tailwind.css',
-      css`
-        @reference 'tailwindcss/does-not-exist';
-        @import 'tailwindcss/utilities';
-      `,
-    )
-
-    // 2.5 Write to a content file
-    await fs.write('src/index.html', html`
-      <div class="flex underline"></div>
-    `)
-
-    await process.onStderr((message) => message.includes('"./does-not-exist" is not exported'))
-
-    expect(await fs.dumpFiles('dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- dist/out.css ---
-      .underline {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-
-    // 3. Fix the CSS file
-    await fs.write(
-      'src/tailwind.css',
-      css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    )
-
-    await process.onStderr((message) => message.includes('Waiting for file changes...'))
-
-    expect(await fs.dumpFiles('dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- dist/out.css ---
-      .flex {
-        display: flex;
-      }
-      .underline {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-
-    // Now break the CSS file again
-    await fs.write(
-      'src/tailwind.css',
-      css`
-        @reference 'tailwindcss/does-not-exist';
-        @import 'tailwindcss/utilities';
-      `,
-    )
-
-    await process.onStderr((message) => message.includes('"./does-not-exist" is not exported'))
-
-    expect(await fs.dumpFiles('dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- dist/out.css ---
-      .flex {
-        display: flex;
-      }
-      .underline {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'dev mode + source maps',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^11",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          map: { inline: true },
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'src/index.html': html`
-        <div class="flex"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @source not inline("inline");
-        /*  */
-      `,
-    },
-  },
-  async ({ fs, exec, expect, parseSourceMap }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [candidate`flex`])
-
-    let map = parseSourceMap(await fs.read('dist/out.css'))
-
-    expect(map.at(1, 0)).toMatchObject({
-      source: '<no source>',
-      original: '(none)',
-      generated: '/*! tailwi...',
-    })
-
-    expect(map.at(2, 0)).toMatchObject({
-      source: expect.stringContaining('utilities.css'),
-      original: '@tailwind...',
-      generated: '.flex {...',
-    })
-
-    expect(map.at(3, 2)).toMatchObject({
-      source: expect.stringContaining('utilities.css'),
-      original: '@tailwind...',
-      generated: 'display: f...',
-    })
-
-    expect(map.at(4, 0)).toMatchObject({
-      source: expect.stringContaining('utilities.css'),
-      original: ';...',
-      generated: '}...',
-    })
-  },
-)
-
-test(
-  'source(…) and `@source` are relative to the file they are in',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-
-      'index.css': css` @import './project-a/src/index.css'; `,
-
-      'project-a/src/index.css': css`
-        /* Run auto-content detection in ../../project-b */
-        @import 'tailwindcss/utilities' source('../../project-b');
-
-        /* Explicitly using node_modules in the @source allows git ignored folders */
-        @source '../../project-c';
-      `,
-
-      // Project A is the current folder, but we explicitly configured
-      // `source(project-b)`, therefore project-a should not be included in
-      // the output.
-      'project-a/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-a/src/index.html']"
-        ></div>
-      `,
-
-      // Project B is the configured `source(…)`, therefore auto source
-      // detection should include known extensions and folders in the output.
-      'project-b/src/index.html': html`
-        <div
-          class="content-['project-b/src/index.html']"
-        ></div>
-      `,
-
-      // Project C should apply auto source detection, therefore known
-      // extensions and folders should be included in the output.
-      'project-c/src/index.html': html`
-        <div
-          class="content-['project-c/src/index.html']"
-        ></div>
-      `,
-    },
-  },
-  async ({ fs, exec, root, expect }) => {
-    await exec('pnpm postcss ./index.css --output dist/out.css', { cwd: root })
-
-    let content = await fs.dumpFiles('./dist/*.css')
-
-    expect(content).not.toContain(candidate`content-['project-a/src/index.html']`)
-    expect(content).toContain(candidate`content-['project-b/src/index.html']`)
-    expect(content).toContain(candidate`content-['project-c/src/index.html']`)
-  },
-)
diff --git a/integrations/postcss/multi-root.test.ts b/integrations/postcss/multi-root.test.ts
deleted file mode 100644
index c2c52c7e4..000000000
--- a/integrations/postcss/multi-root.test.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { candidate, css, html, js, json, test } from '../utils'
-
-test(
-  'production build',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'index.html': html`
-        <div class="one:underline two:underline"></div>
-      `,
-      'src/shared.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/root1.css': css`
-        @import './shared.css';
-        @custom-variant one (&:is([data-root='1']));
-      `,
-      'src/root2.css': css`
-        @import './shared.css';
-        @custom-variant two (&:is([data-root='2']));
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm postcss src/*.css -d dist')
-
-    await fs.expectFileToContain('dist/root1.css', [candidate`one:underline`])
-    await fs.expectFileNotToContain('dist/root1.css', [candidate`two:underline`])
-
-    await fs.expectFileNotToContain('dist/root2.css', [candidate`one:underline`])
-    await fs.expectFileToContain('dist/root2.css', [candidate`two:underline`])
-  },
-)
diff --git a/integrations/postcss/next.test.ts b/integrations/postcss/next.test.ts
deleted file mode 100644
index 7fc0ccdcf..000000000
--- a/integrations/postcss/next.test.ts
+++ /dev/null
@@ -1,486 +0,0 @@
-import { describe } from 'vitest'
-import { candidate, css, fetchStyles, js, json, jsx, retryAssertion, test, txt } from '../utils'
-
-test(
-  'production build',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "react": "^18",
-            "react-dom": "^18",
-            "next": "^14"
-          },
-          "devDependencies": {
-            "@tailwindcss/postcss": "workspace:^",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.mjs': js`
-        export default {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'next.config.mjs': js`export default {}`,
-      'app/layout.js': js`
-        import './globals.css'
-
-        export default function RootLayout({ children }) {
-          return (
-            <html>
-              <body>{children}</body>
-            </html>
-          )
-        }
-      `,
-      'app/page.js': js`
-        import styles from './page.module.css'
-        export default function Page() {
-          return (
-            <h1 className={styles.heading + ' text-3xl font-bold underline'}>Hello, Next.js!</h1>
-          )
-        }
-      `,
-      'app/page.module.css': css`
-        @reference './globals.css';
-        .heading {
-          @apply text-red-500 animate-ping skew-7;
-        }
-      `,
-      'app/globals.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm next build')
-
-    let files = await fs.glob('.next/static/css/**/*.css')
-    expect(files).toHaveLength(2)
-
-    let globalCss: string | null = null
-    let moduleCss: string | null = null
-    for (let [filename, content] of files) {
-      if (content.includes('@keyframes page_ping')) moduleCss = filename
-      else globalCss = filename
-    }
-
-    await fs.expectFileToContain(globalCss!, [
-      candidate`underline`,
-      candidate`font-bold`,
-      candidate`text-3xl`,
-    ])
-
-    await fs.expectFileToContain(moduleCss!, [
-      'color:var(--color-red-500,oklch(63.7% .237 25.331)',
-      'animation:var(--animate-ping,ping 1s cubic-bezier(0,0,.2,1) infinite)',
-      /@keyframes page_ping.*{75%,to{transform:scale\(2\);opacity:0}/,
-      '--tw-skew-x:skewX(7deg);',
-    ])
-  },
-)
-
-describe.each(['turbo', 'webpack'])('%s', (bundler) => {
-  test(
-    'dev mode',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "react": "^18",
-              "react-dom": "^18",
-              "next": "^14"
-            },
-            "devDependencies": {
-              "@tailwindcss/postcss": "workspace:^",
-              "tailwindcss": "workspace:^"
-            }
-          }
-        `,
-        'postcss.config.mjs': js`
-          export default {
-            plugins: {
-              '@tailwindcss/postcss': {},
-            },
-          }
-        `,
-        'next.config.mjs': js`export default {}`,
-        'app/layout.js': js`
-          import './globals.css'
-
-          export default function RootLayout({ children }) {
-            return (
-              <html>
-                <body>{children}</body>
-              </html>
-            )
-          }
-        `,
-        'app/page.js': js`
-          import styles from './page.module.css'
-          export default function Page() {
-            return <h1 className={styles.heading + ' underline'}>Hello, Next.js!</h1>
-          }
-        `,
-        'app/page.module.css': css`
-          @reference './globals.css';
-          .heading {
-            @apply text-red-500 animate-ping skew-7 content-['module'];
-          }
-        `,
-        'app/globals.css': css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-        `,
-      },
-    },
-    async ({ fs, spawn, expect }) => {
-      let process = await spawn(`pnpm next dev ${bundler === 'turbo' ? '--turbo' : ''}`)
-
-      let url = ''
-      await process.onStdout((m) => {
-        let match = /Local:\s*(http.*)/.exec(m)
-        if (match) url = match[1]
-        return Boolean(url)
-      })
-
-      await process.onStdout((m) => m.includes('Ready in'))
-
-      await retryAssertion(async () => {
-        let css = await fetchStyles(url)
-        expect(css).toContain(candidate`underline`)
-        expect(css).toContain('content: var(--tw-content)')
-        expect(css).toContain('@keyframes')
-      })
-
-      await fs.write(
-        'app/page.js',
-        js`
-          import styles from './page.module.css'
-          export default function Page() {
-            return <h1 className={styles.heading + ' underline bg-red-500'}>Hello, Next.js!</h1>
-          }
-        `,
-      )
-      await process.onStdout((m) => m.includes('Compiled in'))
-
-      await retryAssertion(async () => {
-        let css = await fetchStyles(url)
-        expect(css).toContain(candidate`underline`)
-        expect(css).toContain(candidate`bg-red-500`)
-        expect(css).toContain('--tw-skew-x: skewX(7deg);')
-        expect(css).toContain('content: var(--tw-content)')
-        expect(css).toContain('@keyframes')
-      })
-    },
-  )
-})
-
-test(
-  'should scan dynamic route segments',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "react": "^18",
-            "react-dom": "^18",
-            "next": "^14"
-          },
-          "devDependencies": {
-            "@tailwindcss/postcss": "workspace:^",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.mjs': js`
-        export default {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'next.config.mjs': js`export default {}`,
-      'app/a/[slug]/page.js': js`
-        export default function Page() {
-          return <h1 className="content-['[slug]']">Hello, Next.js!</h1>
-        }
-      `,
-      'app/b/[...slug]/page.js': js`
-        export default function Page() {
-          return <h1 className="content-['[...slug]']">Hello, Next.js!</h1>
-        }
-      `,
-      'app/c/[[...slug]]/page.js': js`
-        export default function Page() {
-          return <h1 className="content-['[[...slug]]']">Hello, Next.js!</h1>
-        }
-      `,
-      'app/d/(theme)/page.js': js`
-        export default function Page() {
-          return <h1 className="content-['(theme)']">Hello, Next.js!</h1>
-        }
-      `,
-      'app/layout.js': js`
-        import './globals.css'
-
-        export default function RootLayout({ children }) {
-          return (
-            <html>
-              <body>{children}</body>
-            </html>
-          )
-        }
-      `,
-      'app/globals.css': css`
-        @import 'tailwindcss/utilities' source(none);
-        @source './**/*.{js,ts,jsx,tsx,mdx}';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm next build')
-
-    let files = await fs.glob('.next/static/css/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [
-      candidate`content-['[slug]']`,
-      candidate`content-['[...slug]']`,
-      candidate`content-['[[...slug]]']`,
-      candidate`content-['(theme)']`,
-    ])
-  },
-)
-
-test(
-  'changes to CSS files should pick up new CSS variables (if any)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "react": "^18",
-            "react-dom": "^18",
-            "next": "^14"
-          },
-          "devDependencies": {
-            "@tailwindcss/postcss": "workspace:^",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.mjs': js`
-        export default {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'next.config.mjs': js`export default {}`,
-      'app/layout.js': js`
-        import './globals.css'
-
-        export default function RootLayout({ children }) {
-          return (
-            <html>
-              <body>{children}</body>
-            </html>
-          )
-        }
-      `,
-      'app/page.js': js`
-        export default function Page() {
-          return <div className="flex"></div>
-        }
-      `,
-      'unrelated.module.css': css`
-        .module {
-          color: var(--color-blue-500);
-        }
-      `,
-      'app/globals.css': css`
-        @import 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ spawn, exec, fs, expect }) => {
-    // Generate the initial build so output CSS files exist on disk
-    await exec('pnpm next build')
-
-    // NOTE: We are writing to an output CSS file which is not being ignored by
-    // `.gitignore` nor marked with `@source not`. This should not result in an
-    // infinite loop.
-    let process = await spawn(`pnpm next dev`)
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)/.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await process.onStdout((m) => m.includes('Ready in'))
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`flex`)
-      expect(css).toContain('--color-blue-500:')
-      expect(css).not.toContain('--color-red-500:')
-    })
-
-    await fs.write(
-      'unrelated.module.css',
-      css`
-        .module {
-          color: var(--color-blue-500);
-          background-color: var(--color-red-500);
-        }
-      `,
-    )
-    await process.onStdout((m) => m.includes('Compiled in'))
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`flex`)
-      expect(css).toContain('--color-blue-500:')
-      expect(css).toContain('--color-red-500:')
-    })
-  },
-)
-
-test(
-  'changes to `public/` should not trigger an infinite loop',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "react": "^18",
-            "react-dom": "^18",
-            "next": "^15",
-            "@ducanh2912/next-pwa": "^10.2.9"
-          },
-          "devDependencies": {
-            "@tailwindcss/postcss": "workspace:^",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      '.gitignore': txt`
-        .next/
-        public/workbox-*.js
-        public/sw.js
-      `,
-      'postcss.config.mjs': js`
-        export default {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'next.config.mjs': js`
-        import withPWA from '@ducanh2912/next-pwa'
-
-        const pwaConfig = {
-          dest: 'public',
-          register: true,
-          skipWaiting: true,
-          reloadOnOnline: false,
-          cleanupOutdatedCaches: true,
-          clientsClaim: true,
-          maximumFileSizeToCacheInBytes: 20 * 1024 * 1024,
-        }
-
-        const nextConfig = {}
-
-        const configWithPWA = withPWA(pwaConfig)(nextConfig)
-
-        export default configWithPWA
-      `,
-      'app/layout.js': js`
-        import './globals.css'
-
-        export default function RootLayout({ children }) {
-          return (
-            <html>
-              <body>{children}</body>
-            </html>
-          )
-        }
-      `,
-      'app/page.js': js`
-        export default function Page() {
-          return <div className="flex"></div>
-        }
-      `,
-      'app/globals.css': css`
-        @import 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ spawn, fs, expect }) => {
-    let process = await spawn('pnpm next dev')
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)/.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await process.onStdout((m) => m.includes('Ready in'))
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`flex`)
-      expect(css).not.toContain(candidate`underline`)
-    })
-
-    await fs.write(
-      'app/page.js',
-      jsx`
-        export default function Page() {
-          return <div className="flex underline"></div>
-        }
-      `,
-    )
-    await process.onStdout((m) => m.includes('Compiled in'))
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`flex`)
-      expect(css).toContain(candidate`underline`)
-    })
-    // Flush all existing messages in the queue
-    process.flush()
-
-    // Fetch the styles one more time, to ensure we see the latest version of
-    // the CSS
-    await fetchStyles(url)
-
-    // At this point, no changes should trigger a compile step. If we see any
-    // changes, there is an infinite loop because we (the user) didn't write any
-    // files to disk.
-    //
-    // Ensure there are no more changes in stdout (signaling no infinite loop)
-    let result = await Promise.race([
-      // If this succeeds, it means that it saw another change which indicates
-      // an infinite loop.
-      process.onStdout((m) => m.includes('Compiled in')).then(() => 'infinite loop detected'),
-
-      // There should be no changes in stdout
-      new Promise((resolve) => setTimeout(() => resolve('no infinite loop detected'), 2_000)),
-    ])
-    expect(result).toBe('no infinite loop detected')
-  },
-)
diff --git a/integrations/postcss/plugins.test.ts b/integrations/postcss/plugins.test.ts
deleted file mode 100644
index c36e8fd14..000000000
--- a/integrations/postcss/plugins.test.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { candidate, css, html, js, json, test } from '../utils'
-
-test(
-  'builds the `@headlessui/tailwindcss` plugin utilities (CJS)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "commonjs",
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^",
-            "@headlessui/tailwindcss": "^0.2.1"
-          }
-        }
-      `,
-      'postcss.config.cjs': js`
-        let tailwindcss = require('@tailwindcss/postcss')
-        module.exports = {
-          plugins: [tailwindcss()],
-        }
-      `,
-      'index.html': html`
-        <div className="ui-open:flex"></div>
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-        @plugin '@headlessui/tailwindcss';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [candidate`ui-open:flex`])
-  },
-)
-
-test(
-  'builds the `@headlessui/tailwindcss` plugin utilities (ESM)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^",
-            "@headlessui/tailwindcss": "^0.2.1"
-          }
-        }
-      `,
-      'postcss.config.mjs': js`
-        import tailwindcss from '@tailwindcss/postcss'
-        export default {
-          plugins: [tailwindcss()],
-        }
-      `,
-      'index.html': html`
-        <div className="ui-open:flex"></div>
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-        @plugin '@headlessui/tailwindcss';
-      `,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [candidate`ui-open:flex`])
-  },
-)
diff --git a/integrations/postcss/source.test.ts b/integrations/postcss/source.test.ts
deleted file mode 100644
index e89d4bbdd..000000000
--- a/integrations/postcss/source.test.ts
+++ /dev/null
@@ -1,831 +0,0 @@
-import dedent from 'dedent'
-import path from 'node:path'
-import { candidate, css, html, js, json, test, yaml } from '../utils'
-
-test(
-  'auto source detection kitchen sink',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'index.css': css`
-        @reference 'tailwindcss/theme';
-
-        /* (1) */
-        /* - Only './src' should be auto-scanned, not the current working directory */
-        /* - .gitignore'd paths should be ignored (node_modules) */
-        /* - Binary extensions should be ignored (jpg, zip) */
-        @import 'tailwindcss/utilities' source('./src');
-
-        /* (2) */
-        /* - All HTML and JSX files in 'ignored/components' should be scanned */
-        /* - All other extensions should be ignored */
-        @source "./ignored/components/*.{html,jsx}";
-
-        /* (3) */
-        /* - './components' should be auto-scanned in addition to './src' */
-        /* - './components/ignored.html' should still be ignored */
-        /* - Binary extensions in './components' should be ignored */
-        @source "./components";
-
-        /* (4) */
-        /* - './pages' should be auto-scanned */
-        /* - Only '.html' files should be included */
-        /* - './page/ignored.html' will not be ignored because of the specific pattern */
-        @source "./pages/**/*.html";
-      `,
-
-      '.gitignore': dedent`
-        /src/ignored
-        /ignored
-        /components/ignored.html
-        /pages/ignored.html
-      `,
-
-      // (1)
-      'index.html': 'content-["index.html"] content-["BAD"]', // "Root" source is in `./src`
-      'src/index.html': 'content-["src/index.html"]',
-      'src/nested/index.html': 'content-["src/nested/index.html"]',
-      'src/index.jpg': 'content-["src/index.jpg"] content-["BAD"]',
-      'src/nested/index.tar': 'content-["src/nested/index.tar"] content-["BAD"]',
-      'src/ignored/index.html': 'content-["src/ignored/index.html"] content-["BAD"]',
-
-      // (2)
-      'ignored/components/my-component.html': 'content-["ignored/components/my-component.html"]',
-      'ignored/components/my-component.jsx': 'content-["ignored/components/my-component.jsx"]',
-
-      // Ignored and not explicitly listed by (2)
-      'ignored/components/my-component.tsx':
-        'content-["ignored/components/my-component.tsx"] content-["BAD"]',
-      'ignored/components/nested/my-component.html':
-        'content-["ignored/components/nested/my-component.html"] content-["BAD"]',
-
-      // (3)
-      'components/my-component.tsx': 'content-["components/my-component.tsx"]',
-      'components/nested/my-component.tsx': 'content-["components/nested/my-component.tsx"]',
-      'components/ignored.html': 'content-["components/ignored.html"] content-["BAD"]',
-
-      // (4)
-      'pages/foo.html': 'content-["pages/foo.html"]',
-      'pages/nested/foo.html': 'content-["pages/nested/foo.html"]',
-      'pages/ignored.html': 'content-["pages/ignored.html"]',
-      'pages/foo.jsx': 'content-["pages/foo.jsx"] content-["BAD"]',
-      'pages/nested/foo.jsx': 'content-["pages/nested/foo.jsx"] content-["BAD"]',
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm postcss index.css --output dist/out.css')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      @layer properties;
-      .content-\\[\\"components\\/my-component\\.tsx\\"\\] {
-        --tw-content: "components/my-component.tsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"components\\/nested\\/my-component\\.tsx\\"\\] {
-        --tw-content: "components/nested/my-component.tsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"ignored\\/components\\/my-component\\.html\\"\\] {
-        --tw-content: "ignored/components/my-component.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"ignored\\/components\\/my-component\\.jsx\\"\\] {
-        --tw-content: "ignored/components/my-component.jsx";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/foo\\.html\\"\\] {
-        --tw-content: "pages/foo.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/ignored\\.html\\"\\] {
-        --tw-content: "pages/ignored.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/nested\\/foo\\.html\\"\\] {
-        --tw-content: "pages/nested/foo.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"src\\/index\\.html\\"\\] {
-        --tw-content: "src/index.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"src\\/nested\\/index\\.html\\"\\] {
-        --tw-content: "src/nested/index.html";
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'auto source detection in depth, source(…) and `@source` can be configured to use auto source detection (build + watch mode)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'project-a/postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'project-a/src/index.css': css`
-        @reference 'tailwindcss/theme';
-
-        /* Run auto-content detection in ../../project-b */
-        @import 'tailwindcss/utilities' source('../../project-b');
-
-        /* Explicitly using node_modules in the @source allows git ignored folders */
-        @source '../node_modules/{my-lib-1,my-lib-2}/src/**/*.html';
-
-        /* We typically ignore these extensions, but now include them explicitly */
-        @source './logo.{jpg,png}';
-
-        /* Project C should apply auto source detection */
-        @source '../../project-c';
-
-        /* Project D should apply auto source detection rules, such as ignoring node_modules */
-        @source '../../project-d/**/*.{html,js}';
-        @source '../../project-d/**/*.bin';
-
-        /* Same as above, but my-lib-2 _should_ be includes */
-        @source '../../project-d/node_modules/my-lib-2/src/*.{html,js}';
-
-        /* bar.html is git ignored, but explicitly listed here to scan */
-        @source '../../project-d/src/bar.html';
-      `,
-
-      // Project A is the current folder, but we explicitly configured
-      // `source(project-b)`, therefore project-a should not be included in
-      // the output.
-      'project-a/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-a/src/index.html']"
-        ></div>
-      `,
-
-      // Project A explicitly includes an extension we usually ignore,
-      // therefore it should be included in the output.
-      'project-a/src/logo.jpg': html`
-        <div
-          class="content-['project-a/src/logo.jpg']"
-        ></div>
-      `,
-
-      // Project A explicitly includes node_modules/{my-lib-1,my-lib-2},
-      // therefore these files should be included in the output.
-      'project-a/node_modules/my-lib-1/src/index.html': html`
-        <div
-          class="content-['project-a/node_modules/my-lib-1/src/index.html']"
-        ></div>
-      `,
-      'project-a/node_modules/my-lib-2/src/index.html': html`
-        <div
-          class="content-['project-a/node_modules/my-lib-2/src/index.html']"
-        ></div>
-      `,
-
-      // Project B is the configured `source(…)`, therefore auto source
-      // detection should include known extensions and folders in the output.
-      'project-b/src/index.html': html`
-        <div
-          class="content-['project-b/src/index.html']"
-        ></div>
-      `,
-
-      // Project B is the configured `source(…)`, therefore auto source
-      // detection should apply and node_modules should not be included in the
-      // output.
-      'project-b/node_modules/my-lib-3/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-b/node_modules/my-lib-3/src/index.html']"
-        ></div>
-      `,
-
-      // Project C should apply auto source detection, therefore known
-      // extensions and folders should be included in the output.
-      'project-c/src/index.html': html`
-        <div
-          class="content-['project-c/src/index.html']"
-        ></div>
-      `,
-
-      // Project C should apply auto source detection, therefore known ignored
-      // extensions should not be included in the output.
-      'project-c/src/logo.jpg': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-c/src/logo.jpg']"
-        ></div>
-      `,
-
-      // Project C should apply auto source detection, therefore node_modules
-      // should not be included in the output.
-      'project-c/node_modules/my-lib-1/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-c/node_modules/my-lib-1/src/index.html']"
-        ></div>
-      `,
-
-      // Project D should apply auto source detection rules, such as ignoring
-      // node_modules.
-      'project-d/node_modules/my-lib-1/src/index.html': html`
-        <div
-          class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-d/node_modules/my-lib-1/src/index.html']"
-        ></div>
-      `,
-
-      // Project D has an explicit glob containing node_modules, thus should include the html file
-      'project-d/node_modules/my-lib-2/src/index.html': html`
-        <div
-          class="content-['project-d/node_modules/my-lib-2/src/index.html']"
-        ></div>
-      `,
-
-      'project-d/src/.gitignore': dedent`
-        foo.html
-        bar.html
-      `,
-
-      // Project D, foo.html is ignored by the gitignore file but the source rule is explicit about
-      // adding all `.html` files.
-      'project-d/src/foo.html': html`
-        <div
-          class="content-['project-d/src/foo.html']"
-        ></div>
-      `,
-
-      // Project D, bar.html is ignored by the gitignore file. But explicitly
-      // listed as a `@source` glob.
-      'project-d/src/bar.html': html`
-        <div
-          class="content-['project-d/src/bar.html']"
-        ></div>
-      `,
-
-      // Project D should look for files with the extensions html and js.
-      'project-d/src/index.html': html`
-        <div
-          class="content-['project-d/src/index.html']"
-        ></div>
-      `,
-
-      // Project D should have a binary file even though we ignore binary files
-      // by default, but it's explicitly listed.
-      'project-d/my-binary-file.bin': html`
-        <div
-          class="content-['project-d/my-binary-file.bin']"
-        ></div>
-      `,
-    },
-  },
-  async ({ fs, exec, spawn, root, expect }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css --verbose', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./project-a/dist/out.css ---
-      @layer properties;
-      .content-\\[\\'project-a\\/node_modules\\/my-lib-1\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-a/node modules/my-lib-1/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-a\\/node_modules\\/my-lib-2\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-a/node modules/my-lib-2/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-a\\/src\\/logo\\.jpg\\'\\] {
-        --tw-content: 'project-a/src/logo.jpg';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-b\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-b/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-c\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-c/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/my-binary-file\\.bin\\'\\] {
-        --tw-content: 'project-d/my-binary-file.bin';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/node_modules\\/my-lib-2\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-d/node modules/my-lib-2/src/index.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/src\\/bar\\.html\\'\\] {
-        --tw-content: 'project-d/src/bar.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/src\\/foo\\.html\\'\\] {
-        --tw-content: 'project-d/src/foo.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-d\\/src\\/index\\.html\\'\\] {
-        --tw-content: 'project-d/src/index.html';
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-
-    // Watch mode tests
-    let process = await spawn(
-      'pnpm postcss src/index.css --output dist/out.css --watch --verbose',
-      {
-        cwd: path.join(root, 'project-a'),
-      },
-    )
-    await process.onStderr((message) => message.includes('Waiting for file changes...'))
-
-    // Changes to project-a should not be included in the output, we changed the
-    // base folder to project-b.
-    await fs.write(
-      'project-a/src/index.html',
-      html`<div class="[.changed_&]:content-['project-a/src/index.html']"></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/src/index.html']`,
-    ])
-
-    // Changes to this file should be included, because we explicitly listed
-    // them using `@source`.
-    await fs.write(
-      'project-a/src/logo.jpg',
-      html`<div class="[.changed_&]:content-['project-a/src/logo.jpg']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/src/logo.jpg']`,
-    ])
-
-    // Changes to these files should be included, because we explicitly listed
-    // them using `@source`.
-    await fs.write(
-      'project-a/node_modules/my-lib-1/src/index.html',
-      html`<div
-          class="[.changed_&]:content-['project-a/node_modules/my-lib-1/src/index.html']"
-        ></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/node_modules/my-lib-1/src/index.html']`,
-    ])
-
-    await fs.write(
-      'project-a/node_modules/my-lib-2/src/index.html',
-      html`<div
-          class="[.changed_&]:content-['project-a/node_modules/my-lib-2/src/index.html']"
-        ></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/node_modules/my-lib-2/src/index.html']`,
-    ])
-
-    // Changes to this file should be included, because we changed the base to
-    // `project-b`.
-    await fs.write(
-      'project-b/src/index.html',
-      html`<div class="[.changed_&]:content-['project-b/src/index.html']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-b/src/index.html']`,
-    ])
-
-    // Changes to this file should not be included. We did change the base to
-    // `project-b`, but we still apply the auto source detection rules which
-    // ignore `node_modules`.
-    await fs.write(
-      'project-b/node_modules/my-lib-3/src/index.html',
-      html`<div
-          class="[.changed_&]:content-['project-b/node_modules/my-lib-3/src/index.html']"
-        ></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-b/node_modules/my-lib-3/src/index.html']`,
-    ])
-
-    // Project C was added explicitly via `@source`, therefore changes to these
-    // files should be included.
-    await fs.write(
-      'project-c/src/index.html',
-      html`<div class="[.changed_&]:content-['project-c/src/index.html']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-c/src/index.html']`,
-    ])
-
-    // Except for these files, since they are ignored by the default auto source
-    // detection rules.
-    await fs.write(
-      'project-c/src/logo.jpg',
-      html`<div class="[.changed_&]:content-['project-c/src/logo.jpg']"></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-c/src/logo.jpg']`,
-    ])
-    await fs.write(
-      'project-c/node_modules/my-lib-1/src/index.html',
-      html`<div
-          class="[.changed_&]:content-['project-c/node_modules/my-lib-1/src/index.html']"
-        ></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-c/node_modules/my-lib-1/src/index.html']`,
-    ])
-
-    // Creating new files in the "root" of auto source detected folders
-    // We need to create the files and *then* update them because postcss-cli
-    // does not pick up new files — only changes to existing files.
-    await fs.create([
-      'project-b/new-file.html',
-      'project-b/new-folder/new-file.html',
-      'project-c/new-file.html',
-      'project-c/new-folder/new-file.html',
-    ])
-
-    // If we don't wait writes will be coalesced into a "add" event which
-    // isn't picked up by postcss-cli.
-    await new Promise((resolve) => setTimeout(resolve, 100))
-
-    await fs.write(
-      'project-b/new-file.html',
-      html`<div class="[.created_&]:content-['project-b/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-b/new-folder/new-file.html',
-      html`<div class="[.created_&]:content-['project-b/new-folder/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-c/new-file.html',
-      html`<div class="[.created_&]:content-['project-c/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-c/new-folder/new-file.html',
-      html`<div class="[.created_&]:content-['project-c/new-folder/new-file.html']"></div>`,
-    )
-
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.created_&]:content-['project-b/new-file.html']`,
-      candidate`[.created_&]:content-['project-b/new-folder/new-file.html']`,
-      candidate`[.created_&]:content-['project-c/new-file.html']`,
-      candidate`[.created_&]:content-['project-c/new-folder/new-file.html']`,
-    ])
-  },
-)
-
-test(
-  'auto source detection disabled',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'index.css': css`
-        @reference 'tailwindcss/theme';
-
-        /* (1) */
-        /* - Only './src' should be auto-scanned, not the current working directory */
-        /* - .gitignore'd paths should be ignored (node_modules) */
-        /* - Binary extensions should be ignored (jpg, zip) */
-        @import 'tailwindcss/utilities' source(none);
-
-        /* (2) */
-        /* - './pages' should be auto-scanned */
-        /* - Only '.html' files should be included */
-        /* - './page/ignored.html' will not be ignored because of the specific pattern */
-        @source "./pages/**/*.html";
-      `,
-
-      '.gitignore': dedent`
-        /src/ignored
-        /pages/ignored.html
-      `,
-
-      // (1)
-      'index.html': 'content-["index.html"] content-["BAD"]', // "Root" source is in `./src`
-      'src/index.html': 'content-["src/index.html"] content-["BAD"]',
-      'src/nested/index.html': 'content-["src/nested/index.html"] content-["BAD"]',
-      'src/index.jpg': 'content-["src/index.jpg"] content-["BAD"]',
-      'src/nested/index.tar': 'content-["src/nested/index.tar"] content-["BAD"]',
-      'src/ignored/index.html': 'content-["src/ignored/index.html"] content-["BAD"]',
-
-      // (4)
-      'pages/foo.html': 'content-["pages/foo.html"]',
-      'pages/nested/foo.html': 'content-["pages/nested/foo.html"]',
-      'pages/ignored.html': 'content-["pages/ignored.html"]',
-      'pages/foo.jsx': 'content-["pages/foo.jsx"] content-["BAD"]',
-      'pages/nested/foo.jsx': 'content-["pages/nested/foo.jsx"] content-["BAD"]',
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm postcss index.css --output dist/out.css')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/out.css ---
-      @layer properties;
-      .content-\\[\\"pages\\/foo\\.html\\"\\] {
-        --tw-content: "pages/foo.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/ignored\\.html\\"\\] {
-        --tw-content: "pages/ignored.html";
-        content: var(--tw-content);
-      }
-      .content-\\[\\"pages\\/nested\\/foo\\.html\\"\\] {
-        --tw-content: "pages/nested/foo.html";
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  '`@source not "…"`',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'project-a/postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'project-a/src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-
-        /* Ignore a specific file */
-        @source not "./ignore-me-file.html";
-
-        /* Ignore a entire folder */
-        @source not "./ignore-me-folder";
-
-        /* Ignore an extension */
-        @source not "**/*.ts";
-
-        /* Explicit source detection for 'project-b' */
-        @source "../../project-b/**/*.html";
-
-        /* Explicitly ignoring a file in 'project-b' */
-        @source not "../../project-b/src/ignore-me.html";
-      `,
-      'project-a/src/ignore-me-file.html': html`
-        <div>
-          <div class="content-['project-a/src/ignore-me-file.html']"></div>
-        </div>
-      `,
-      'project-a/src/ignore-me-folder/index.html': html`
-        <div>
-          <div class="content-['project-a/src/ignore-me-folder/index.html']"></div>
-        </div>
-      `,
-      'project-a/src/keep-me.html': html`<div class="content-['keep-me.html']"></div>`,
-      'project-a/src/ignore-me-extension.ts': html`
-        <div>
-          <div class="content-['ignore-me-extension.ts']"></div>
-        </div>
-      `,
-      'project-b/src/ignore-me.html': html`
-        <div>
-          <div class="content-['project-b/src/ignore-me.html']"></div>
-        </div>
-      `,
-      'project-b/src/keep-me.html': html`
-        <div>
-          <div class="content-['project-b/src/keep-me.html']"></div>
-        </div>
-      `,
-    },
-  },
-  async ({ fs, exec, spawn, root, expect }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css --verbose', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./project-a/dist/out.css ---
-      @layer properties;
-      .content-\\[\\'keep-me\\.html\\'\\] {
-        --tw-content: 'keep-me.html';
-        content: var(--tw-content);
-      }
-      .content-\\[\\'project-b\\/src\\/keep-me\\.html\\'\\] {
-        --tw-content: 'project-b/src/keep-me.html';
-        content: var(--tw-content);
-      }
-      @property --tw-content {
-        syntax: "*";
-        inherits: false;
-        initial-value: "";
-      }
-      @layer properties {
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-      "
-    `)
-
-    // Watch mode tests
-    let process = await spawn(
-      'pnpm postcss src/index.css --output dist/out.css --watch --verbose',
-      {
-        cwd: path.join(root, 'project-a'),
-      },
-    )
-    await process.onStderr((message) => message.includes('Waiting for file changes...'))
-
-    fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`content-['project-a/src/ignore-me-file.html']`,
-      candidate`content-['project-a/src/ignore-me-folder/index.html']`,
-      candidate`content-['project-b/src/ignore-me.html']`,
-    ])
-
-    // Changes to the keep-me files should be included
-    await fs.write(
-      'project-a/src/keep-me.html',
-      html`<div class="[.changed_&]:content-['project-a/src/keep-me.html']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/src/keep-me.html']`,
-    ])
-
-    await fs.write(
-      'project-b/src/keep-me.html',
-      html`<div class="[.changed_&]:content-['project-b/src/keep-me.html']"></div>`,
-    )
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-b/src/keep-me.html']`,
-    ])
-
-    // Changes to the ignored files should not be included
-    await fs.write(
-      'project-a/src/ignore-me.html',
-      html`<div class="[.changed_&]:content-['project-a/src/ignore-me.html']"></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-a/src/ignore-me.html']`,
-    ])
-
-    await fs.write(
-      'project-b/src/ignore-me.html',
-      html`<div class="[.changed_&]:content-['project-b/src/ignore-me.html']"></div>`,
-    )
-    await fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`[.changed_&]:content-['project-b/src/ignore-me.html']`,
-    ])
-
-    fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`content-['project-a/src/ignore-me-file.html']`,
-      candidate`content-['project-a/src/ignore-me-folder/index.html']`,
-      candidate`content-['project-b/src/ignore-me.html']`,
-    ])
-
-    // Creating new files that match the source patterns should be included.
-    await fs.create([
-      'project-a/src/new-file.html',
-      'project-a/src/new-folder/new-file.html',
-      'project-b/src/new-file.html',
-      'project-b/src/new-folder/new-file.html',
-    ])
-
-    await fs.write(
-      'project-a/src/new-file.html',
-      html`<div class="[.created_&]:content-['project-a/src/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-a/src/new-folder/new-file.html',
-      html`<div class="[.created_&]:content-['project-a/src/new-folder/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-b/src/new-file.html',
-      html`<div class="[.created_&]:content-['project-b/src/new-file.html']"></div>`,
-    )
-    await fs.write(
-      'project-b/src/new-folder/new-file.html',
-      html`<div class="[.created_&]:content-['project-b/src/new-folder/new-file.html']"></div>`,
-    )
-
-    // If we don't wait writes will be coalesced into a "add" event which
-    // isn't picked up by postcss-cli.
-    await new Promise((resolve) => setTimeout(resolve, 100))
-
-    await fs.expectFileToContain('./project-a/dist/out.css', [
-      candidate`[.created_&]:content-['project-a/src/new-file.html']`,
-      candidate`[.created_&]:content-['project-a/src/new-folder/new-file.html']`,
-      candidate`[.created_&]:content-['project-b/src/new-file.html']`,
-      candidate`[.created_&]:content-['project-b/src/new-folder/new-file.html']`,
-    ])
-
-    fs.expectFileNotToContain('./project-a/dist/out.css', [
-      candidate`content-['project-a/src/ignore-me-file.html']`,
-      candidate`content-['project-a/src/ignore-me-folder/index.html']`,
-      candidate`content-['project-b/src/ignore-me.html']`,
-    ])
-  },
-)
diff --git a/integrations/postcss/url-rewriting.test.ts b/integrations/postcss/url-rewriting.test.ts
deleted file mode 100644
index bac9d95d5..000000000
--- a/integrations/postcss/url-rewriting.test.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { css, js, json, test } from '../utils'
-
-test(
-  'can rewrite urls in production builds',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss';
-        @import './dir-1/bar.css';
-        @import './dir-1/dir-2/baz.css';
-        @import './dir-1/dir-2/vector.css';
-      `,
-      'src/dir-1/bar.css': css`
-        .test1 {
-          background-image: url('../../resources/image.png');
-        }
-      `,
-      'src/dir-1/dir-2/baz.css': css`
-        .test2 {
-          background-image: url('../../../resources/image.png');
-        }
-      `,
-      'src/dir-1/dir-2/vector.css': css`
-        @import './dir-3/vector.css';
-        .test3 {
-          background-image: url('../../../resources/vector.svg');
-        }
-      `,
-      'src/dir-1/dir-2/dir-3/vector.css': css`
-        .test4 {
-          background-image: url('./vector-2.svg');
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css')
-
-    expect(await fs.dumpFiles('dist/out.css')).toMatchInlineSnapshot(`
-      "
-      --- dist/out.css ---
-      .test1 {
-        background-image: url('../resources/image.png');
-      }
-      .test2 {
-        background-image: url('../resources/image.png');
-      }
-      .test4 {
-        background-image: url('./dir-1/dir-2/dir-3/vector-2.svg');
-      }
-      .test3 {
-        background-image: url('../resources/vector.svg');
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'url rewriting can be disabled',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {
-              transformAssetUrls: false,
-            },
-          },
-        }
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss';
-        @import './dir-1/bar.css';
-        @import './dir-1/dir-2/baz.css';
-        @import './dir-1/dir-2/vector.css';
-      `,
-      'src/dir-1/bar.css': css`
-        .test1 {
-          background-image: url('../../resources/image.png');
-        }
-      `,
-      'src/dir-1/dir-2/baz.css': css`
-        .test2 {
-          background-image: url('../../../resources/image.png');
-        }
-      `,
-      'src/dir-1/dir-2/vector.css': css`
-        @import './dir-3/vector.css';
-        .test3 {
-          background-image: url('../../../resources/vector.svg');
-        }
-      `,
-      'src/dir-1/dir-2/dir-3/vector.css': css`
-        .test4 {
-          background-image: url('./vector-2.svg');
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm postcss src/index.css --output dist/out.css')
-
-    expect(await fs.dumpFiles('dist/out.css')).toMatchInlineSnapshot(`
-      "
-      --- dist/out.css ---
-      .test1 {
-        background-image: url('../../resources/image.png');
-      }
-      .test2 {
-        background-image: url('../../../resources/image.png');
-      }
-      .test4 {
-        background-image: url('./vector-2.svg');
-      }
-      .test3 {
-        background-image: url('../../../resources/vector.svg');
-      }
-      "
-    `)
-  },
-)
diff --git a/integrations/turbopack/loader.test.ts b/integrations/turbopack/loader.test.ts
deleted file mode 100644
index 755cd60df..000000000
--- a/integrations/turbopack/loader.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { candidate, css, fetchStyles, js, json, jsx, retryAssertion, test } from '../utils'
-
-test(
-  '@tailwindcss/turbopack loader (dev)',
-  {
-    timeout: 120_000,
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "next": "^16.2.7",
-            "react": "^19.2.7",
-            "react-dom": "^19.2.7",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/turbopack": "workspace:^"
-          }
-        }
-      `,
-      'next.config.mjs': js`
-        export default {
-          turbopack: {
-            rules: {
-              '*.css': {
-                loaders: ['@tailwindcss/turbopack'],
-                as: '*.css',
-              },
-            },
-          },
-        }
-      `,
-      'app/layout.js': jsx`
-        import './globals.css'
-
-        export default function RootLayout({ children }) {
-          return (
-            <html>
-              <body>{children}</body>
-            </html>
-          )
-        }
-      `,
-      'app/page.js': jsx`
-        export default function Page() {
-          return <div className="flex">Hello, Next.js!</div>
-        }
-      `,
-      'app/globals.css': css` @import 'tailwindcss'; `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm next dev')
-
-    let url = ''
-    await process.onStdout((message) => {
-      let match = /Local:\s*(http.*)/.exec(message)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await process.onStdout((message) => message.includes('Ready in'))
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url)
-      expect(styles).toContain(candidate`flex`)
-      expect(styles).not.toContain(candidate`underline`)
-    })
-
-    await fs.write(
-      'app/page.js',
-      jsx`
-        export default function Page() {
-          return <div className="flex underline">Hello, Next.js!</div>
-        }
-      `,
-    )
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url)
-      expect(styles).toContain(candidate`flex`)
-      expect(styles).toContain(candidate`underline`)
-    })
-  },
-)
diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
deleted file mode 100644
index efac411db..000000000
--- a/integrations/upgrade/index.test.ts
+++ /dev/null
@@ -1,3512 +0,0 @@
-import path from 'node:path'
-import { isRepoDirty } from '../../packages/@tailwindcss-upgrade/src/utils/git'
-import { candidate, css, html, js, json, test, ts, txt, yaml } from '../utils'
-
-test(
-  'error when no CSS file with @tailwind is used',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <h1>🤠👋</h1>
-        <div class="!flex"></div>
-      `,
-      'src/fonts.css': css`/* Unrelated CSS file */`,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    let output = await exec('pnpm exec upgrade')
-    expect(output).toContain('Cannot find any CSS files that reference Tailwind CSS.')
-
-    // Files should not be modified
-    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <h1>🤠👋</h1>
-      <div class="!flex"></div>
-
-      --- ./src/fonts.css ---
-      /* Unrelated CSS file */
-      "
-    `)
-  },
-)
-
-test(
-  `upgrades a v3 project to v4`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <h1>🤠👋</h1>
-        <div
-          class="!flex sm:!block bg-gradient-to-t bg-[--my-red] max-w-screen-md ml-[theme(screens.md)] group-[]:flex"
-        ></div>
-        <!-- Migrate to sm -->
-        <div class="blur shadow rounded inset-shadow drop-shadow"></div>
-
-        <!-- Migrate to xs -->
-        <div class="blur-sm shadow-sm rounded-sm inset-shadow-sm drop-shadow-sm"></div>
-
-        <!-- Migrate to 2xs -->
-        <div class="shadow-xs inset-shadow-xs"></div>
-
-        <!-- Migrate to -3 -->
-        <div class="ring"></div>
-
-        <!-- Migrate to -solid -->
-        <div class="outline"></div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-
-        @variants hover, focus {
-          .foo {
-            color: red;
-          }
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <h1>🤠👋</h1>
-      <div
-        class="flex! sm:block! bg-linear-to-t bg-(--my-red) max-w-(--breakpoint-md) ml-(--breakpoint-md) in-[.group]:flex"
-      ></div>
-      <!-- Migrate to sm -->
-      <div class="blur-sm shadow-sm rounded-sm inset-shadow-sm drop-shadow-sm"></div>
-
-      <!-- Migrate to xs -->
-      <div class="blur-xs shadow-xs rounded-xs inset-shadow-xs drop-shadow-xs"></div>
-
-      <!-- Migrate to 2xs -->
-      <div class="shadow-2xs inset-shadow-2xs"></div>
-
-      <!-- Migrate to -3 -->
-      <div class="ring-3"></div>
-
-      <!-- Migrate to -solid -->
-      <div class="outline-solid"></div>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      @utility foo {
-        color: red;
-      }
-      "
-    `)
-
-    let packageJsonContent = await fs.read('package.json')
-    let packageJson = JSON.parse(packageJsonContent)
-    expect(packageJson.dependencies).toMatchObject({
-      tailwindcss: expect.stringMatching(/^\^4/),
-    })
-
-    // Ensure the v4 project compiles correctly
-    await exec('pnpm exec tailwindcss --input src/input.css --output dist/out.css')
-
-    await fs.expectFileToContain('dist/out.css', [
-      candidate`flex!`,
-      candidate`sm:block!`,
-      candidate`bg-linear-to-t`,
-      candidate`bg-(--my-red)`,
-      candidate`max-w-(--breakpoint-md)`,
-      candidate`ml-(--breakpoint-md)`,
-    ])
-  },
-)
-
-test(
-  'only migrates files matched by `config.content` when upgrading from v3 to v4',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.html'],
-        }
-      `,
-      'src/index.html': html`
-        <div class="order-[0] bg-[--my-red]"></div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      'templates/email.php': html`
-        <div class="order-[0] bg-[--my-red]"></div>
-      `,
-      'notes/unrelated.txt': `order-[0] bg-[--my-red]`,
-    },
-    retry: 0,
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./**/*.{html,php,txt}')).toMatchInlineSnapshot(`
-      "
-      --- notes/unrelated.txt ---
-      order-[0] bg-[--my-red]
-
-      --- src/index.html ---
-      <div class="order-0 bg-(--my-red)"></div>
-
-      --- templates/email.php ---
-      <div class="order-[0] bg-[--my-red]"></div>
-      "
-    `)
-  },
-)
-
-test(
-  `upgrades a v3 project with prefixes to v4`,
-  {
-    // Somehow this test takes *way* longer than the rest (but not always?)
-    timeout: 180_000,
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-          prefix: 'tw__',
-        }
-      `,
-      'src/index.html': html`
-        <div
-          class="!tw__flex sm:!tw__block tw__bg-gradient-to-t flex [color:red] group-[]:tw__flex"
-        ></div>
-        <div
-          class="tw__group tw__group/foo tw__peer tw__peer/foo group-hover:tw__flex group-hover/foo:tw__flex peer-hover:tw__flex peer-hover/foo:tw__flex"
-        ></div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-
-        .btn {
-          @apply !tw__rounded-md tw__px-2 tw__py-1 tw__bg-blue-500 tw__text-white;
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div
-        class="tw:flex! tw:sm:block! tw:bg-linear-to-t flex tw:text-[red] tw:in-[.tw\\:group]:flex"
-      ></div>
-      <div
-        class="tw:group tw:group/foo tw:peer tw:peer/foo tw:group-hover:flex tw:group-hover/foo:flex tw:peer-hover:flex tw:peer-hover/foo:flex"
-      ></div>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss' prefix(tw);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      .btn {
-        @apply tw:rounded-md! tw:px-2 tw:py-1 tw:bg-blue-500 tw:text-white;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate @apply',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @import 'tailwindcss/tailwind.css';
-
-        .a {
-          @apply flex;
-        }
-
-        .b {
-          @apply !flex;
-        }
-
-        .c {
-          @apply !flex flex-col! items-center !important;
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      .a {
-        @apply flex;
-      }
-
-      .b {
-        @apply flex!;
-      }
-
-      .c {
-        @apply flex! flex-col! items-center!;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate `@tailwind` directives',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @tailwind base;
-
-        html {
-          color: #333;
-        }
-
-        @tailwind components;
-
-        .btn {
-          color: red;
-        }
-
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      @layer base {
-        html {
-          color: #333;
-        }
-      }
-
-      @layer components {
-        .btn {
-          color: red;
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate `@layer utilities` and `@layer components`',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @import 'tailwindcss/tailwind.css';
-
-        @layer components {
-          .btn {
-            @apply rounded-md px-2 py-1 bg-blue-500 text-white;
-          }
-        }
-
-        @layer utilities {
-          .no-scrollbar::-webkit-scrollbar {
-            display: none;
-          }
-
-          .no-scrollbar {
-            -ms-overflow-style: none;
-            scrollbar-width: none;
-          }
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      @utility btn {
-        @apply rounded-md px-2 py-1 bg-blue-500 text-white;
-      }
-
-      @utility no-scrollbar {
-        &::-webkit-scrollbar {
-          display: none;
-        }
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate imports with `layer(…)`',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @import './base.css';
-        @import './components.css';
-        @import './utilities.css';
-        @import './mix.css';
-
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      'src/base.css': css`
-        html {
-          color: red;
-        }
-      `,
-      'src/components.css': css`
-        @layer components {
-          .foo {
-            color: red;
-          }
-        }
-      `,
-      'src/utilities.css': css`
-        @layer utilities {
-          .bar {
-            color: red;
-          }
-        }
-      `,
-      'src/mix.css': css`
-        html {
-          color: blue;
-        }
-
-        @layer components {
-          .foo-mix {
-            color: red;
-          }
-        }
-
-        @layer utilities {
-          .bar-mix {
-            color: red;
-          }
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import './base.css' layer(base);
-      @import './components.css';
-      @import './utilities.css';
-      @import './mix.css' layer(base);
-      @import './mix.utilities.css';
-
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- ./src/base.css ---
-      html {
-        color: red;
-      }
-
-      --- ./src/components.css ---
-      @utility foo {
-        color: red;
-      }
-
-      --- ./src/mix.css ---
-      html {
-        color: blue;
-      }
-
-      --- ./src/mix.utilities.css ---
-      @utility foo-mix {
-        color: red;
-      }
-
-      @utility bar-mix {
-        color: red;
-      }
-
-      --- ./src/utilities.css ---
-      @utility bar {
-        color: red;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrates a simple postcss setup',
-  {
-    timeout: 120_000,
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "postcss-import": "^16",
-            "autoprefixer": "^10",
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            'postcss-import': {},
-            'tailwindcss/nesting': 'postcss-nesting',
-            tailwindcss: {},
-            autoprefixer: {},
-          },
-        }
-      `,
-      'src/index.html': html`
-        <div class="bg-[--my-red]"></div>
-      `,
-      'src/index.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    await fs.expectFileToContain(
-      'postcss.config.js',
-      js`
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-    )
-    await fs.expectFileToContain('src/index.css', css`@import 'tailwindcss';`)
-    await fs.expectFileToContain(
-      'src/index.html',
-      // prettier-ignore
-      js`
-        <div class="bg-(--my-red)"></div>
-      `,
-    )
-
-    let packageJsonContent = await fs.read('package.json')
-    let packageJson = JSON.parse(packageJsonContent)
-    expect(packageJson.dependencies).toMatchObject({
-      tailwindcss: expect.stringMatching(/^\^4/),
-    })
-    expect(packageJson.dependencies).not.toHaveProperty('autoprefixer')
-    expect(packageJson.dependencies).not.toHaveProperty('postcss-import')
-    expect(packageJson.dependencies).toMatchObject({
-      '@tailwindcss/postcss': expect.stringMatching(/^\^4/),
-    })
-  },
-)
-
-test(
-  '`@tailwindcss/postcss` should be installed in dependencies when `tailwindcss` exists in dependencies',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            tailwindcss: {},
-          },
-        }
-      `,
-      'src/index.html': html`
-        <div class="bg-[--my-red]"></div>
-      `,
-      'src/index.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    let packageJsonContent = await fs.read('package.json')
-    let packageJson = JSON.parse(packageJsonContent)
-    expect(packageJson.dependencies).toMatchObject({
-      '@tailwindcss/postcss': expect.stringMatching(/^\^4/),
-    })
-  },
-)
-
-test(
-  '`@tailwindcss/postcss` should be installed in devDependencies when `tailwindcss` exists in dev dependencies',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "devDependencies": {
-            "postcss": "^8",
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'postcss.config.js': js`
-        module.exports = {
-          plugins: {
-            tailwindcss: {},
-          },
-        }
-      `,
-      'src/index.html': html`
-        <div class="bg-[--my-red]"></div>
-      `,
-      'src/index.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    let packageJsonContent = await fs.read('package.json')
-    let packageJson = JSON.parse(packageJsonContent)
-    expect(packageJson.devDependencies).toMatchObject({
-      '@tailwindcss/postcss': expect.stringMatching(/^\^4/),
-    })
-  },
-)
-
-test(
-  'migrates a postcss setup using package.json config',
-  {
-    timeout: 120_000,
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "postcss-import": "^16",
-            "autoprefixer": "^10",
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "postcss": {
-            "plugins": {
-              "postcss-import": {},
-              "tailwindcss/nesting": "postcss-nesting",
-              "tailwindcss": {},
-              "autoprefixer": {}
-            }
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <div class="bg-[--my-red]"></div>
-      `,
-      'src/index.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    await fs.expectFileToContain('src/index.css', css`@import 'tailwindcss';`)
-    await fs.expectFileToContain(
-      'src/index.html',
-      // prettier-ignore
-      js`
-        <div class="bg-(--my-red)"></div>
-      `,
-    )
-
-    let packageJsonContent = await fs.read('package.json')
-    let packageJson = JSON.parse(packageJsonContent)
-    expect(packageJson.postcss).toMatchInlineSnapshot(`
-      {
-        "plugins": {
-          "@tailwindcss/postcss": {},
-        },
-      }
-    `)
-
-    expect(packageJson.dependencies).toMatchObject({
-      tailwindcss: expect.stringMatching(/^\^4/),
-    })
-    expect(packageJson.dependencies).not.toHaveProperty('autoprefixer')
-    expect(packageJson.dependencies).not.toHaveProperty('postcss-import')
-    expect(packageJson.dependencies).toMatchObject({
-      '@tailwindcss/postcss': expect.stringMatching(/^\^4/),
-    })
-  },
-)
-
-test(
-  'migrates a postcss setup using a json based config file',
-  {
-    timeout: 120_000,
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "postcss": "^8",
-            "postcss-cli": "^10",
-            "postcss-import": "^16",
-            "autoprefixer": "^10",
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      '.postcssrc.json': json`
-        {
-          "plugins": {
-            "postcss-import": {},
-            "tailwindcss/nesting": "postcss-nesting",
-            "tailwindcss": {},
-            "autoprefixer": {}
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <div class="bg-[--my-red]"></div>
-      `,
-      'src/index.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    await fs.expectFileToContain('src/index.css', css`@import 'tailwindcss';`)
-    await fs.expectFileToContain(
-      'src/index.html',
-      // prettier-ignore
-      js`
-        <div class="bg-(--my-red)"></div>
-      `,
-    )
-
-    let jsonConfigContent = await fs.read('.postcssrc.json')
-    let jsonConfig = JSON.parse(jsonConfigContent)
-    expect(jsonConfig).toMatchInlineSnapshot(`
-      {
-        "plugins": {
-          "@tailwindcss/postcss": {},
-        },
-      }
-    `)
-
-    let packageJsonContent = await fs.read('package.json')
-    let packageJson = JSON.parse(packageJsonContent)
-    expect(packageJson.dependencies).toMatchObject({
-      tailwindcss: expect.stringMatching(/^\^4/),
-    })
-    expect(packageJson.dependencies).not.toHaveProperty('autoprefixer')
-    expect(packageJson.dependencies).not.toHaveProperty('postcss-import')
-    expect(packageJson.dependencies).toMatchObject({
-      '@tailwindcss/postcss': expect.stringMatching(/^\^4/),
-    })
-  },
-)
-
-test(
-  `migrates prefixes even if other files have unprefixed versions of the candidate`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-          prefix: 'tw__',
-        }
-      `,
-      'src/index.html': html`
-        <div class="flex"></div>
-      `,
-      'src/other.html': html`
-        <div class="tw__flex"></div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.html')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div class="flex"></div>
-
-      --- ./src/other.html ---
-      <div class="tw:flex"></div>
-      "
-    `)
-  },
-)
-
-test(
-  `prefixed variants do not cause their unprefixed counterparts to be valid`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-          prefix: 'tw__',
-        }
-      `,
-      'src/index.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      'src/index.html': html`
-        <div class="tw__bg-gradient-to-t"></div>
-      `,
-      'src/other.html': html`
-        <div class="bg-gradient-to-t"></div>
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.html')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div class="tw:bg-linear-to-t"></div>
-
-      --- ./src/other.html ---
-      <div class="bg-gradient-to-t"></div>
-      "
-    `)
-  },
-)
-
-test(
-  'migrate utilities in an imported file',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @import 'tailwindcss/tailwind.css';
-        @import './utilities.css' layer(utilities);
-      `,
-      'src/utilities.css': css`
-        .no-scrollbar::-webkit-scrollbar {
-          display: none;
-        }
-
-        .no-scrollbar {
-          -ms-overflow-style: none;
-          scrollbar-width: none;
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import 'tailwindcss';
-      @import './utilities.css';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- ./src/utilities.css ---
-      @utility no-scrollbar {
-        &::-webkit-scrollbar {
-          display: none;
-        }
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate utilities in an imported file and keep @utility top-level',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @import './utilities.css';
-        @import 'tailwindcss/components';
-      `,
-      'src/utilities.css': css`
-        @layer utilities {
-          .no-scrollbar::-webkit-scrollbar {
-            display: none;
-          }
-
-          .no-scrollbar {
-            -ms-overflow-style: none;
-            scrollbar-width: none;
-          }
-        }
-      `,
-    },
-    retry: 0,
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-      @import './utilities.css';
-
-      --- ./src/utilities.css ---
-      @utility no-scrollbar {
-        &::-webkit-scrollbar {
-          display: none;
-        }
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate utilities in deep import trees',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/cli": "workspace:^",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.html': html`
-        <div class="hover:thing"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @import './a.1.css' layer(utilities);
-        @import './b.1.css' layer(components);
-        @import './c.1.css';
-        @import './d.1.css';
-      `,
-      'src/a.1.css': css`
-        @import './a.1.utilities.css';
-
-        .foo-from-a {
-          color: red;
-        }
-      `,
-      'src/a.1.utilities.css': css`
-        #foo {
-          --keep: me;
-        }
-
-        .foo-from-import {
-          color: blue;
-        }
-      `,
-      'src/b.1.css': css`
-        @import './b.1.components.css';
-
-        .bar-from-b {
-          color: red;
-        }
-      `,
-      'src/b.1.components.css': css`
-        .bar-from-import {
-          color: blue;
-        }
-      `,
-      'src/c.1.css': css`
-        @import './c.2.css' layer(utilities);
-        .baz-from-c {
-          color: green;
-        }
-      `,
-      'src/c.2.css': css`
-        @import './c.3.css';
-        #baz {
-          --keep: me;
-        }
-        .baz-from-import {
-          color: yellow;
-        }
-      `,
-      'src/c.3.css': css`
-        #baz {
-          --keep: me;
-        }
-        .baz-from-import {
-          color: yellow;
-        }
-      `,
-
-      // This is a super deep import chain
-      // And no `*.utilities.css` files should be created for these
-      // because there are no rules that need to be separated
-      'src/d.1.css': css`@import './d.2.css' layer(utilities);`,
-      'src/d.2.css': css`@import './d.3.css';`,
-      'src/d.3.css': css`@import './d.4.css';`,
-      'src/d.4.css': css`
-        .from-a-4 {
-          color: blue;
-        }
-      `,
-    },
-    retry: 0,
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-      @import './a.1.css' layer(utilities);
-      @import './a.1.utilities.1.css';
-      @import './b.1.css';
-      @import './c.1.css' layer(utilities);
-      @import './c.1.utilities.css';
-      @import './d.1.css';
-
-      --- ./src/a.1.css ---
-      @import './a.1.utilities.css'
-
-      --- ./src/a.1.utilities.1.css ---
-      @import './a.1.utilities.utilities.css';
-
-      @utility foo-from-a {
-        color: red;
-      }
-
-      --- ./src/a.1.utilities.css ---
-      #foo {
-        --keep: me;
-      }
-
-      --- ./src/a.1.utilities.utilities.css ---
-      @utility foo-from-import {
-        color: blue;
-      }
-
-      --- ./src/b.1.components.css ---
-      @utility bar-from-import {
-        color: blue;
-      }
-
-      --- ./src/b.1.css ---
-      @import './b.1.components.css';
-
-      @utility bar-from-b {
-        color: red;
-      }
-
-      --- ./src/c.1.css ---
-      @import './c.2.css' layer(utilities);
-      .baz-from-c {
-        color: green;
-      }
-
-      --- ./src/c.1.utilities.css ---
-      @import './c.2.utilities.css'
-
-      --- ./src/c.2.css ---
-      @import './c.3.css';
-
-      #baz {
-        --keep: me;
-      }
-
-      --- ./src/c.2.utilities.css ---
-      @import './c.3.utilities.css';
-
-      @utility baz-from-import {
-        color: yellow;
-      }
-
-      --- ./src/c.3.css ---
-      #baz {
-        --keep: me;
-      }
-
-      --- ./src/c.3.utilities.css ---
-      @utility baz-from-import {
-        color: yellow;
-      }
-
-      --- ./src/d.1.css ---
-      @import './d.2.css'
-
-      --- ./src/d.2.css ---
-      @import './d.3.css'
-
-      --- ./src/d.3.css ---
-      @import './d.4.css'
-
-      --- ./src/d.4.css ---
-      @utility from-a-4 {
-        color: blue;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate utility files imported by multiple roots',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/cli": "workspace:^",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.html': html`
-        <div class="hover:thing"></div>
-      `,
-      'src/root.1.css': css`
-        @import 'tailwindcss/utilities';
-        @import './a.1.css' layer(utilities);
-      `,
-      'src/root.2.css': css`
-        @import 'tailwindcss/utilities';
-        @import './a.1.css' layer(components);
-      `,
-      'src/root.3.css': css`
-        @import 'tailwindcss/utilities';
-        @import './a.1.css';
-      `,
-      'src/a.1.css': css`
-        .foo-from-a {
-          color: red;
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    let output = await exec('pnpm exec upgrade --force')
-
-    expect(output).toMatch(
-      /You have one or more stylesheets that are imported into a utility layer and non-utility layer./,
-    )
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/a.1.css ---
-      .foo-from-a {
-        color: red;
-      }
-
-      --- ./src/root.1.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-      @import './a.1.css' layer(utilities);
-
-      --- ./src/root.2.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-      @import './a.1.css' layer(components);
-
-      --- ./src/root.3.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-      @import './a.1.css' layer(utilities);
-      "
-    `)
-  },
-)
-
-test(
-  'injecting `@config` when a tailwind.config.{js,ts,…} is detected',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': js`
-        export default {
-          content: ['./src/**/*.{html,js}'],
-          plugins: [
-            () => {}, // custom stuff which is too complicated to migrate to CSS
-          ],
-        }
-      `,
-      'src/index.html': html`
-        <div
-          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
-        ></div>
-      `,
-      'src/root.1/index.css': css`
-        /* Inject missing @config */
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      'src/root.1/tailwind.config.ts': js`
-        export default {
-          content: ['./src/**/*.{html,js}'],
-          plugins: [
-            () => {}, // custom stuff which is too complicated to migrate to CSS
-          ],
-        }
-      `,
-      'src/root.2/index.css': css`
-        /* Already contains @config */
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @config "../../tailwind.config.ts";
-      `,
-      'src/root.3/index.css': css`
-        /* Inject missing @config above first @theme */
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-
-        @custom-variant hocus (&:hover, &:focus);
-
-        @theme {
-          --color-red-500: #f00;
-        }
-
-        @theme {
-          --color-blue-500: #00f;
-        }
-      `,
-      'src/root.3/tailwind.config.ts': js`
-        export default {
-          content: ['./src/**/*.{html,js}'],
-          plugins: [
-            () => {}, // custom stuff which is too complicated to migrate to CSS
-          ],
-        }
-      `,
-      'src/root.4/index.css': css`
-        /* Inject missing @config due to nested imports with tailwind imports */
-        @import './base.css';
-        @import './utilities.css';
-      `,
-      'src/root.4/tailwind.config.ts': js`
-        export default {
-          content: ['./src/**/*.{html,js}'],
-          plugins: [
-            () => {}, // custom stuff which is too complicated to migrate to CSS
-          ],
-        }
-      `,
-      'src/root.4/base.css': css`@import 'tailwindcss/base';`,
-      'src/root.4/utilities.css': css`@import 'tailwindcss/utilities';`,
-
-      'src/root.5/index.css': css`@import './tailwind.css';`,
-      'src/root.5/tailwind.css': css`
-        /* Inject missing @config in this file, due to full import */
-        /* Should be located in the root: ../../ */
-        @import 'tailwindcss';
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div
-        class="flex! sm:block! bg-linear-to-t bg-(--my-red)"
-      ></div>
-
-      --- ./src/root.1/index.css ---
-      /* Inject missing @config */
-      @import 'tailwindcss';
-
-      @config './tailwind.config.ts';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- ./src/root.2/index.css ---
-      /* Already contains @config */
-      @import 'tailwindcss';
-
-      @config "../../tailwind.config.ts";
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- ./src/root.3/index.css ---
-      /* Inject missing @config above first @theme */
-      @import 'tailwindcss';
-
-      @config './tailwind.config.ts';
-
-      @custom-variant hocus (&:hover, &:focus);
-
-      @theme {
-        --color-red-500: #f00;
-      }
-
-      @theme {
-        --color-blue-500: #00f;
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- ./src/root.4/index.css ---
-      /* Inject missing @config due to nested imports with tailwind imports */
-      @import './base.css';
-      @import './utilities.css';
-
-      @config './tailwind.config.ts';
-
-      --- ./src/root.4/base.css ---
-      @import 'tailwindcss/theme' layer(theme);
-      @import 'tailwindcss/preflight' layer(base);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- ./src/root.4/utilities.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-
-      --- ./src/root.5/index.css ---
-      @import './tailwind.css';
-
-      --- ./src/root.5/tailwind.css ---
-      /* Inject missing @config in this file, due to full import */
-      /* Should be located in the root: ../../ */
-      @import 'tailwindcss';
-
-      @config '../../tailwind.config.ts';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'multiple CSS roots that resolve to the same Tailwind config file requires manual intervention',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': js`
-        export default {
-          content: ['./src/**/*.{html,js}'],
-          plugins: [
-            () => {}, // custom stuff which is too complicated to migrate to CSS
-          ],
-        }
-      `,
-      'src/index.html': html`
-        <div
-          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
-        ></div>
-      `,
-      'src/root.1.css': css`
-        /* Inject missing @config */
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      'src/root.2.css': css`
-        /* Already contains @config */
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @config "../tailwind.config.ts";
-      `,
-      'src/root.3.css': css`
-        /* Inject missing @config above first @theme */
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-
-        @custom-variant hocus (&:hover, &:focus);
-
-        @theme {
-          --color-red-500: #f00;
-        }
-
-        @theme {
-          --color-blue-500: #00f;
-        }
-      `,
-      'src/root.4.css': css`
-        /* Inject missing @config due to nested imports with tailwind imports */
-        @import './root.4/base.css';
-        @import './root.4/utilities.css';
-      `,
-      'src/root.4/base.css': css`@import 'tailwindcss/base';`,
-      'src/root.4/utilities.css': css`@import 'tailwindcss/utilities';`,
-
-      'src/root.5.css': css`@import './root.5/tailwind.css';`,
-      'src/root.5/tailwind.css': css`
-        /* Inject missing @config in this file, due to full import */
-        @import 'tailwindcss/tailwind.css';
-      `,
-    },
-  },
-  async ({ exec, expect }) => {
-    let output = await exec('pnpm exec upgrade --force', {}, { ignoreStdErr: true }).catch((e) =>
-      e.toString(),
-    )
-
-    expect(output).toMatch('Could not determine configuration file for:')
-  },
-)
-
-test(
-  'injecting `@config` in the shared root, when a tailwind.config.{js,ts,…} is detected',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': js`
-        export default {
-          content: ['./src/**/*.{html,js}'],
-          plugins: [
-            () => {
-              // custom stuff which is too complicated to migrate to CSS
-            },
-          ],
-        }
-      `,
-      'src/index.html': html`
-        <div
-          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
-        ></div>
-      `,
-      'src/index.css': css`@import './tailwind-setup.css';`,
-      'src/tailwind-setup.css': css`
-        @import './base.css';
-        @import './components.css';
-        @import './utilities.css';
-      `,
-      'src/base.css': css`
-        html {
-          color: red;
-        }
-        @tailwind base;
-      `,
-      'src/components.css': css`
-        @import './typography.css';
-        @layer components {
-          .foo {
-            color: red;
-          }
-        }
-        @tailwind components;
-      `,
-      'src/typography.css': css`
-        .typography {
-          color: red;
-        }
-      `,
-      'src/utilities.css': css`
-        @layer utilities {
-          .bar {
-            color: red;
-          }
-        }
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import './tailwind-setup.css';
-
-      --- ./src/index.html ---
-      <div
-        class="flex! sm:block! bg-linear-to-t bg-(--my-red)"
-      ></div>
-
-      --- ./src/base.css ---
-      @import 'tailwindcss/theme' layer(theme);
-      @import 'tailwindcss/preflight' layer(base);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      @layer base {
-        html {
-          color: red;
-        }
-      }
-
-      --- ./src/components.css ---
-      @import './typography.css' layer(components);
-
-      @utility foo {
-        color: red;
-      }
-
-      --- ./src/tailwind-setup.css ---
-      @import './base.css';
-      @import './components.css';
-      @import './utilities.css';
-
-      @config '../tailwind.config.ts';
-
-      --- ./src/typography.css ---
-      .typography {
-        color: red;
-      }
-
-      --- ./src/utilities.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-
-      @utility bar {
-        color: red;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'injecting `@config` in the shared root (+ migrating), when a tailwind.config.{js,ts,…} is detected',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': js`
-        export default {
-          content: ['./src/**/*.{html,js}'],
-          theme: {
-            extend: {
-              colors: {
-                'my-red': 'red',
-              },
-            },
-          },
-        }
-      `,
-      'src/index.html': html`
-        <div
-          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
-        ></div>
-      `,
-      'src/index.css': css`@import './tailwind-setup.css';`,
-      'src/tailwind-setup.css': css`
-        @import './base.css';
-        @import './components.css';
-        @import './utilities.css';
-      `,
-      'src/base.css': css`
-        html {
-          color: red;
-        }
-        @tailwind base;
-      `,
-      'src/components.css': css`
-        @import './typography.css';
-        @layer components {
-          .foo {
-            color: red;
-          }
-        }
-        @tailwind components;
-      `,
-      'src/typography.css': css`
-        .typography {
-          color: red;
-        }
-      `,
-      'src/utilities.css': css`
-        @layer utilities {
-          .bar {
-            color: red;
-          }
-        }
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import './tailwind-setup.css';
-
-      --- ./src/index.html ---
-      <div
-        class="flex! sm:block! bg-linear-to-t bg-(--my-red)"
-      ></div>
-
-      --- ./src/base.css ---
-      @import 'tailwindcss/theme' layer(theme);
-      @import 'tailwindcss/preflight' layer(base);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      @layer base {
-        html {
-          color: red;
-        }
-      }
-
-      --- ./src/components.css ---
-      @import './typography.css' layer(components);
-
-      @utility foo {
-        color: red;
-      }
-
-      --- ./src/tailwind-setup.css ---
-      @import './base.css';
-      @import './components.css';
-      @import './utilities.css';
-
-      @theme {
-        --color-my-red: red;
-      }
-
-      --- ./src/typography.css ---
-      .typography {
-        color: red;
-      }
-
-      --- ./src/utilities.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-
-      @utility bar {
-        color: red;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'finds the correct root Tailwind CSS file',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': js`export default {}`,
-
-      /* Considered a Tailwind root because of: `@import 'tailwindcss/components'` */
-      'src/index.css': css`
-        @import 'base.css';
-        @import 'other.css';
-        @import 'tailwindcss/components';
-        @import 'utilities.css';
-      `,
-
-      /* Considered a Tailwind root because of: `@tailwind base` */
-      'src/base.css': css`
-        html {
-          color: red;
-        }
-        @tailwind base;
-      `,
-      'src/other.css': css`
-        .typography {
-          color: red;
-        }
-      `,
-
-      /* Considered a Tailwind root because of: `@tailwind utilities` */
-      'src/utilities.css': css`
-        @layer utilities {
-          .foo {
-            color: red;
-          }
-        }
-
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import './base.css' layer(components);
-      @import './other.css' layer(components);
-      @import './utilities.css';
-
-      --- ./src/base.css ---
-      @import 'tailwindcss/theme' layer(theme);
-      @import 'tailwindcss/preflight' layer(base);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      @layer base {
-        html {
-          color: red;
-        }
-      }
-
-      --- ./src/other.css ---
-      .typography {
-        color: red;
-      }
-
-      --- ./src/utilities.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-
-      @utility foo {
-        color: red;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'relative imports without a relative path prefix are migrated to include a relative path prefix',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @import 'tailwindcss/base';
-        @import 'tailwindcss/components';
-        @import 'styles/components';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/styles/components.css': css`
-        .btn {
-          @apply bg-black px-4 py-2 rounded-md text-white font-medium hover:bg-zinc-800;
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import 'tailwindcss';
-      @import './styles/components.css' layer(components);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- ./src/styles/components.css ---
-      .btn {
-        @apply bg-black px-4 py-2 rounded-md text-white font-medium hover:bg-zinc-800;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'that it attaches the correct layers to the imported files',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @import 'tailwindcss/components';
-
-        /* No layer expected */
-        @import './my-components.css';
-
-        /* No layer expected */
-        @import './my-utilities.css';
-
-        /* Expecting a layer */
-        @import './my-other.css';
-
-        @import 'tailwindcss/utilities';
-      `,
-      'src/my-components.css': css`
-        @layer components {
-          .foo {
-            color: red;
-          }
-        }
-      `,
-      'src/my-utilities.css': css`
-        @layer utilities {
-          .css {
-            color: red;
-          }
-        }
-      `,
-      'src/my-other.css': css`
-        /* All my fonts! */
-        @font-face {
-        }
-      `,
-    },
-    retry: 0,
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      /* No layer expected */
-      @import './my-components.css';
-
-      /* No layer expected */
-      @import './my-utilities.css';
-
-      /* Expecting a layer */
-      @import './my-other.css' layer(components);
-
-      @import 'tailwindcss/utilities' layer(utilities);
-
-      --- ./src/my-components.css ---
-      @utility foo {
-        color: red;
-      }
-
-      --- ./src/my-other.css ---
-      /* All my fonts! */
-      @font-face {
-      }
-
-      --- ./src/my-utilities.css ---
-      @utility css {
-        color: red;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrating the prettier-plugin-tailwindcss version',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "prettier-plugin-tailwindcss": "0.5.0"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    let pkg = JSON.parse(await fs.read('package.json'))
-
-    expect(pkg.devDependencies).toMatchObject({
-      'prettier-plugin-tailwindcss': expect.any(String),
-    })
-    expect(pkg.devDependencies['prettier-plugin-tailwindcss']).not.toEqual('0.5.0')
-  },
-)
-
-test(
-  'only migrate legacy classes when it is safe to do so',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "prettier-plugin-tailwindcss": "0.5.0"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        module.exports = {
-          content: ['./*.html'],
-          theme: {
-            // Overrides the default boxShadow entirely so none of the
-            // migrations are safe.
-            boxShadow: {
-              DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-            },
-
-            ringWidth: {
-              DEFAULT: '4px',
-            },
-
-            extend: {
-              // Changes the "before" class definition. 'blur' -> 'blur-sm' is
-              // not safe because 'blur' has a custom value.
-              //
-              // But 'blur-sm' -> 'blur-xs' is safe because 'blur-xs' uses the
-              // default value.
-              blur: {
-                DEFAULT: 'var(--custom-default-blur)',
-              },
-              backdropBlur: {
-                DEFAULT: 'var(--custom-default-blur)',
-              },
-
-              // Changes the "after" class definition. 'rounded' -> 'rounded-sm' is
-              // not safe because 'rounded-sm' has a custom value.
-              borderRadius: {
-                sm: 'var(--custom-rounded-sm)',
-              },
-            },
-          },
-        }
-      `,
-      'index.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      'index.html': html`
-        <div>
-          <div class="shadow shadow-sm shadow-xs"></div>
-          <div class="blur blur-sm"></div>
-          <div class="backdrop-blur backdrop-blur-sm"></div>
-          <div class="rounded rounded-sm"></div>
-          <div class="ring"></div>
-        </div>
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    // Files should not be modified
-    expect(await fs.dumpFiles('./*.{js,css,html}')).toMatchInlineSnapshot(`
-      "
-      --- index.css ---
-      @import 'tailwindcss';
-
-      @theme {
-        --shadow-*: initial;
-        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-
-        --default-ring-width: 4px;
-
-        --blur: var(--custom-default-blur);
-
-        --backdrop-blur: var(--custom-default-blur);
-
-        --radius-sm: var(--custom-rounded-sm);
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- index.html ---
-      <div>
-        <div class="shadow shadow-sm shadow-xs"></div>
-        <div class="blur blur-xs"></div>
-        <div class="backdrop-blur backdrop-blur-xs"></div>
-        <div class="rounded rounded-sm"></div>
-        <div class="ring"></div>
-      </div>
-      "
-    `)
-  },
-)
-
-test(
-  'make suffix-less migrations safe (e.g.: `blur`, `rounded`, `shadow`, `ring`)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "prettier-plugin-tailwindcss": "0.5.0"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        module.exports = {
-          content: ['./*.{html,tsx}'],
-        }
-      `,
-      'index.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      'index.html': html`
-        <div class="rounded blur shadow ring"></div>
-      `,
-      'example-component.tsx': ts`
-        type Star = [
-          x: number,
-          y: number,
-          dim?: boolean,
-          blur?: boolean,
-          rounded?: boolean,
-          shadow?: boolean,
-          ring?: boolean,
-        ]
-
-        function Star({ point: [cx, cy, dim, blur, rounded, shadow, ring] }: { point: Star }) {
-          return <svg class="rounded shadow blur ring" filter={blur ? 'url(…)' : undefined} />
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade --force')
-
-    // Files should not be modified
-    expect(await fs.dumpFiles('./*.{js,css,html,tsx}')).toMatchInlineSnapshot(`
-      "
-      --- index.css ---
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- index.html ---
-      <div class="rounded-sm blur-sm shadow-sm ring-3"></div>
-
-      --- example-component.tsx ---
-      type Star = [
-        x: number,
-        y: number,
-        dim?: boolean,
-        blur?: boolean,
-        rounded?: boolean,
-        shadow?: boolean,
-        ring?: boolean,
-      ]
-
-      function Star({ point: [cx, cy, dim, blur, rounded, shadow, ring] }: { point: Star }) {
-        return <svg class="rounded-sm shadow-sm blur-sm ring-3" filter={blur ? 'url(…)' : undefined} />
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'passing in a single CSS file should resolve all imports and migrate them',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`module.exports = {}`,
-      'src/index.css': css`
-        @import './base.css';
-        @import './components.css';
-        @import './utilities.css';
-        @import './generated/ignore-me.css';
-      `,
-      'src/generated/.gitignore': txt`
-        *
-        !.gitignore
-      `,
-      'src/generated/ignore-me.css': css`
-        /* This should not be converted */
-        @layer utilities {
-          .ignore-me {
-            color: red;
-          }
-        }
-      `,
-      'src/base.css': css`@import 'tailwindcss/base';`,
-      'src/components.css': css`
-        @import './typography.css';
-        @layer components {
-          .foo {
-            color: red;
-          }
-        }
-        @tailwind components;
-      `,
-      'src/utilities.css': css`
-        @layer utilities {
-          .bar {
-            color: blue;
-          }
-        }
-        @tailwind utilities;
-      `,
-      'src/typography.css': css`
-        @layer components {
-          .typography {
-            color: red;
-          }
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade ./src/index.css')
-
-    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.css ---
-      @import './base.css';
-      @import './components.css';
-      @import './utilities.css';
-      @import './generated/ignore-me.css';
-
-      --- ./src/base.css ---
-      @import 'tailwindcss/theme' layer(theme);
-      @import 'tailwindcss/preflight' layer(base);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- ./src/components.css ---
-      @import './typography.css';
-
-      @utility foo {
-        color: red;
-      }
-
-      --- ./src/typography.css ---
-      @utility typography {
-        color: red;
-      }
-
-      --- ./src/utilities.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-
-      @utility bar {
-        color: blue;
-      }
-
-      --- ./src/generated/ignore-me.css ---
-      /* This should not be converted */
-      @layer utilities {
-        .ignore-me {
-          color: red;
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  `upgrades opacity namespace values to percentages`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          theme: {
-            opacity: {
-              0: '0',
-              2.5: '.025',
-              5: '.05',
-              7.5: 0.075,
-              10: 0.1,
-
-              semitransparent: '0.5',
-              transparent: 1,
-
-              50: '50%',
-              50.5: '50.5%',
-              '50.50': '50.5%',
-              '75%': '75%',
-              '100%': '100%',
-            },
-          },
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <div
-          class="text-red-500/0
-            text-red-500/2.5
-            text-red-500/5
-            text-red-500/7.5
-            text-red-500/10
-            text-red-500/semitransparent
-            text-red-500/transparent
-            text-red-500/50
-            text-red-500/50.5
-            text-red-500/50.50
-            text-red-500/50%
-            text-red-500/100%"
-        ></div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div
-        class="text-red-500/0
-          text-red-500/2.5
-          text-red-500/5
-          text-red-500/7.5
-          text-red-500/10
-          text-red-500/semitransparent
-          text-red-500/transparent
-          text-red-500/semitransparent
-          text-red-500/50.50
-          text-red-500/50.50
-          text-red-500/50%
-          text-red-500/100%"
-      ></div>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss';
-
-      @theme {
-        --opacity-*: initial;
-        --opacity-semitransparent: 50%;
-        --opacity-transparent: 100%;
-        --opacity-50_50: 50.5%;
-        --opacity-75\\%: 75%;
-        --opacity-100\\%: 100%;
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  `can read files with BOM`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': withBOM(html`
-        <div class="ring"></div>
-      `),
-      'src/input.css': withBOM(css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `),
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div class="ring-3"></div>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'upgrades are idempotent, and can run on v4 projects',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <div class="ring"></div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-
-        .foo {
-          @apply !bg-[var(--my-color)] rounded;
-        }
-      `,
-    },
-  },
-  async ({ exec, root, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    let before = await fs.dumpFiles('./src/**/*.{css,html}')
-    expect(before).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div class="ring-3"></div>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      .foo {
-        @apply bg-(--my-color)! rounded-sm;
-      }
-      "
-    `)
-
-    // Commit the changes
-    if (isRepoDirty(root)) {
-      await exec('git add .')
-      await exec('git commit -m "upgrade"')
-    }
-
-    // Run the upgrade again
-    let output = await exec('pnpm exec upgrade')
-    expect(output).toContain('No changes were made to your repository')
-
-    let after = await fs.dumpFiles('./src/**/*.{css,html}')
-    expect(after).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div class="ring-3"></div>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      .foo {
-        @apply bg-(--my-color)! rounded-sm;
-      }
-      "
-    `)
-
-    // Ensure the file system is in the same state
-    expect(before).toEqual(after)
-  },
-)
-
-test(
-  'upgrades run on v4 projects',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^4",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'src/index.html': html`
-        <!-- Migrating 'ring', 'rounded' and 'outline-none' are unsafe in v4 -> v4 migrations -->
-        <div class="ring rounded outline"></div>
-
-        <!-- Variant order is also unsafe to change in v4 projects -->
-        <div class="file:hover:flex *:hover:flex"></div>
-        <div class="hover:file:flex hover:*:flex"></div>
-
-        <!-- These are safe to migrate: -->
-        <div
-          class="!flex bg-red-500/[var(--my-opacity)] [@media(pointer:fine)]:flex bg-right-bottom object-left-top"
-        ></div>
-      `,
-      'src/input.css': css`
-        @import 'tailwindcss';
-
-        .foo {
-          @apply !bg-[var(--my-color)];
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <!-- Migrating 'ring', 'rounded' and 'outline-none' are unsafe in v4 -> v4 migrations -->
-      <div class="ring rounded outline"></div>
-
-      <!-- Variant order is also unsafe to change in v4 projects -->
-      <div class="file:hover:flex *:hover:flex"></div>
-      <div class="hover:file:flex hover:*:flex"></div>
-
-      <!-- These are safe to migrate: -->
-      <div
-        class="flex! bg-red-500/(--my-opacity) pointer-fine:flex bg-bottom-right object-top-left"
-      ></div>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss';
-
-      .foo {
-        @apply bg-(--my-color)!;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'v4 ignores .env files during template migration',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^4",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'src/app.css': css`@import 'tailwindcss';`,
-      'src/index.html': html`
-        <div class="order-[0]"></div>
-      `,
-      'src/.env': `TW_TEST_CLASS=order-[0]`,
-      'src/.env.production': `TW_TEST_CLASS=order-[0]`,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/{*,.env,.env.*}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <div class="order-0"></div>
-
-      --- ./src/.env ---
-      TW_TEST_CLASS=order-[0]
-
-      --- ./src/.env.production ---
-      TW_TEST_CLASS=order-[0]
-
-      --- ./src/app.css ---
-      @import 'tailwindcss';
-      "
-    `)
-  },
-)
-
-test(
-  'v4 linked configs respect `content` and still ignore gitignored files',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^4",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/*.html', './src/*.less'],
-        }
-      `,
-      'src/app.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.js';
-      `,
-
-      // Ignore all .html files
-      'src/.gitignore': txt`
-        *.html
-      `,
-
-      // HTML files are in .gitignore, even though they are explicitly mentioned
-      // in the `content` array. Still ignore them
-      'src/do-not-migrate-me.html': html`
-        <div class="order-[0]"></div>
-      `,
-
-      // Should be picked up by auto-content detection
-      'templates/migrate-me.php': html`
-        <div class="order-[0]"></div>
-      `,
-
-      // Does not get picked up by auto content detection (because it's a less
-      // file), but was explicitly listed in the `content` array.
-      //
-      // A bit of a hacky way, I admit, but it allows us to differentiate
-      // between git ignored files, auto content detection and explicitly listed
-      // files.
-      'src/migrate-me.less': html`
-        <div class="order-[0]"></div>
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./{src,templates}/**/*')).toMatchInlineSnapshot(`
-      "
-      --- ./src/app.css ---
-      @import 'tailwindcss';
-      @config '../tailwind.config.js';
-
-      --- ./src/do-not-migrate-me.html ---
-      <div class="order-[0]"></div>
-
-      --- ./src/migrate-me.less ---
-      <div class="order-0"></div>
-
-      --- ./templates/migrate-me.php ---
-      <div class="order-0"></div>
-      "
-    `)
-  },
-)
-
-test(
-  'interrupting template migration does not truncate files',
-  {
-    timeout: 180_000,
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^4",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'src/app.css': css` @import 'tailwindcss'; `,
-      'src/index.html': html`
-        <div class="order-[0]"></div>
-      `,
-      'hook.cjs': js`
-        let fs = require('node:fs/promises')
-        let path = require('node:path')
-        let originalWriteFile = fs.writeFile.bind(fs)
-
-        fs.writeFile = async (file, contents, ...rest) => {
-          // Mimic a bad write
-          await originalWriteFile(file, '') // As-if we truncated first
-          console.error('__TRUNCATED_TARGET__')
-          await new Promise((r) => setTimeout(r, 50)) // Wait 50ms to allow us to kill the process
-          await originalWriteFile(file, contents, ...rest) // Write the actual contents
-        }
-      `,
-      'src/keep.php': `
-        <?php
-
-        return [
-          'keep' => 'this file should never be truncated',
-        ];
-      `,
-    },
-  },
-  async ({ spawn, fs, expect }) => {
-    let repeatedCandidates = Array.from(
-      { length: 250 },
-      () => '<div class="order-[0]"></div>',
-    ).join('\n')
-
-    for (let i = 0; i < 100; i++) {
-      await fs.write(
-        `src/templates/template-${i}.php`,
-        `<?php\n\n${repeatedCandidates}\n\nreturn ['template' => ${i}];\n`,
-      )
-    }
-
-    let originalKeepFile = await fs.read('src/keep.php')
-    let originalTemplate = await fs.read('src/templates/template-0.php')
-
-    // NOTE: This test intentionally keeps `npx` instead of `pnpm exec`. It uses
-    // a `NODE_OPTIONS` hook that overrides `fs.writeFile` to simulate a bad
-    // write, and `pnpm exec` may write a bin shim on startup which would trip
-    // that hook before template migration begins.
-    let process = await spawn('npx @tailwindcss/upgrade --force', {
-      env: {
-        NODE_OPTIONS: '--require=./hook.cjs',
-      },
-    })
-
-    // We're only interested once we start migrating the templates
-    await process.onStderr((message) => message.includes('Migrating templates'))
-
-    // Wait for the trigger that we are mid-write
-    await process.onStderr((message) => message === '__TRUNCATED_TARGET__')
-
-    // Kill the process
-    await process.dispose()
-
-    expect(await fs.read('src/keep.php')).toBe(originalKeepFile)
-    expect(await fs.read('src/templates/template-0.php')).toBe(originalTemplate)
-
-    for (let [file, contents] of await fs.glob('src/**/*.{html,php,css}')) {
-      expect(contents.trim(), `${file} should not be empty after interruption`).not.toBe('')
-    }
-  },
-)
-
-test(
-  'upgrades can run in a pnpm workspace',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^4"
-          },
-          "devDependencies": {
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'project-a/src/index.html': html`
-        <!-- Migrating 'ring', 'rounded' and 'outline-none' are unsafe in v4 -> v4 migrations -->
-        <div class="ring rounded outline"></div>
-
-        <!-- Variant order is also unsafe to change in v4 projects -->
-        <div class="file:hover:flex *:hover:flex"></div>
-        <div class="hover:file:flex hover:*:flex"></div>
-
-        <!-- These are safe to migrate: -->
-        <div
-          class="!flex bg-red-500/[var(--my-opacity)] [@media(pointer:fine)]:flex bg-right-bottom object-left-top"
-        ></div>
-      `,
-      'project-a/src/input.css': css`
-        @import 'tailwindcss';
-
-        .foo {
-          @apply !bg-[var(--my-color)];
-        }
-      `,
-    },
-  },
-  async ({ root, exec, fs, expect }) => {
-    let stdout = await exec('pnpm exec upgrade', {
-      cwd: path.join(root, 'project-a'),
-    })
-
-    expect(/Path .*? is not in cwd/.test(stdout)).toBe(false)
-
-    expect(await fs.dumpFiles('./project-a/src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./project-a/src/index.html ---
-      <!-- Migrating 'ring', 'rounded' and 'outline-none' are unsafe in v4 -> v4 migrations -->
-      <div class="ring rounded outline"></div>
-
-      <!-- Variant order is also unsafe to change in v4 projects -->
-      <div class="file:hover:flex *:hover:flex"></div>
-      <div class="hover:file:flex hover:*:flex"></div>
-
-      <!-- These are safe to migrate: -->
-      <div
-        class="flex! bg-red-500/(--my-opacity) pointer-fine:flex bg-bottom-right object-top-left"
-      ></div>
-
-      --- ./project-a/src/input.css ---
-      @import 'tailwindcss';
-
-      .foo {
-        @apply bg-(--my-color)!;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'upgrades can run in a pnpm workspace root',
-  {
-    fs: {
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - .
-      `,
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^4"
-          },
-          "devDependencies": {
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'src/index.html': html`
-        <!-- Migrating 'ring', 'rounded' and 'outline-none' are unsafe in v4 -> v4 migrations -->
-        <div class="ring rounded outline"></div>
-
-        <!-- Variant order is also unsafe to change in v4 projects -->
-        <div class="file:hover:flex *:hover:flex"></div>
-        <div class="hover:file:flex hover:*:flex"></div>
-
-        <!-- These are safe to migrate: -->
-        <div
-          class="!flex bg-red-500/[var(--my-opacity)] [@media(pointer:fine)]:flex bg-right-bottom object-left-top"
-        ></div>
-      `,
-      'src/input.css': css`
-        @import 'tailwindcss';
-
-        .foo {
-          @apply !bg-[var(--my-color)];
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    let stdout = await exec('pnpm exec upgrade')
-
-    expect(stdout).not.toContain(
-      'Running this command will add the dependency to the workspace root',
-    )
-
-    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.html ---
-      <!-- Migrating 'ring', 'rounded' and 'outline-none' are unsafe in v4 -> v4 migrations -->
-      <div class="ring rounded outline"></div>
-
-      <!-- Variant order is also unsafe to change in v4 projects -->
-      <div class="file:hover:flex *:hover:flex"></div>
-      <div class="hover:file:flex hover:*:flex"></div>
-
-      <!-- These are safe to migrate: -->
-      <div
-        class="flex! bg-red-500/(--my-opacity) pointer-fine:flex bg-bottom-right object-top-left"
-      ></div>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss';
-
-      .foo {
-        @apply bg-(--my-color)!;
-      }
-      "
-    `)
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/issues/20328
-test(
-  'ignored files should not be touched when upgrading from a nested directory',
-  {
-    fs: {
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - packages/*
-      `,
-      'package.json': json`
-        {
-          "name": "root",
-          "private": true
-        }
-      `,
-      'packages/css/package.json': json`
-        {
-          "name": "css-pkg",
-          "private": true,
-          "devDependencies": {
-            "tailwindcss": "^4",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'packages/css/src/input.css': css`
-        @import 'tailwindcss/utilities.css' layer(utilities) source(none);
-      `,
-      'packages/css/src/index.html': html`<div class="flex text-red-500">Hi</div>`,
-
-      // Ensure files/folders ignored by a `.gitignore` in the root take effect
-      // when executing the upgrade tool from a sub-package.
-      '.gitignore': txt`
-        node_modules/
-      `,
-    },
-  },
-  async ({ root, exec, fs, expect }) => {
-    await exec('git init', { cwd: root })
-
-    await exec('pnpm exec upgrade --force', {
-      cwd: path.join(root, 'packages/css'),
-    })
-
-    expect(await fs.dumpFiles('packages/css/node_modules/tailwindcss/utilities.css'))
-      .toMatchInlineSnapshot(`
-        "
-        --- packages/css/node_modules/tailwindcss/utilities.css ---
-        @tailwind utilities;
-        "
-    `)
-  },
-)
-
-test(
-  'upgrade <style> blocks carefully',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^4",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'src/index.vue': html`
-        <template>
-          <div class="!flex"></div>
-        </template>
-
-        <style>
-          @reference "./input.css";
-
-          .foo {
-            @apply !bg-red-500;
-          }
-
-          .bar {
-            /* Do not upgrade the key: */
-            flex-shrink: 0;
-          }
-        </style>
-      `,
-      'src/input.css': css`
-        @import 'tailwindcss';
-
-        .foo {
-          flex-shrink: 1;
-        }
-
-        .bar {
-          @apply !underline;
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('./src/**/*.{css,vue}')).toMatchInlineSnapshot(`
-      "
-      --- ./src/index.vue ---
-      <template>
-        <div class="flex!"></div>
-      </template>
-
-      <style>
-        @reference "./input.css";
-
-        .foo {
-          @apply !bg-red-500;
-        }
-
-        .bar {
-          /* Do not upgrade the key: */
-          flex-shrink: 0;
-        }
-      </style>
-
-      --- ./src/input.css ---
-      @import 'tailwindcss';
-
-      .foo {
-        flex-shrink: 1;
-      }
-
-      .bar {
-        @apply underline!;
-      }
-      "
-    `)
-  },
-)
-
-function withBOM(text: string): string {
-  return '\uFEFF' + text
-}
diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
deleted file mode 100644
index cab0d3d62..000000000
--- a/integrations/upgrade/js-config.test.ts
+++ /dev/null
@@ -1,2187 +0,0 @@
-import path from 'node:path'
-import { describe } from 'vitest'
-import { css, html, json, test, ts, txt } from '../utils'
-
-test(
-  `upgrade JS config files with flat theme values, darkMode, and content fields`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-        import defaultTheme from 'tailwindcss/defaultTheme'
-
-        module.exports = {
-          darkMode: 'selector',
-          content: ['./src/**/*.{html,js}', './node_modules/my-external-lib/**/*.{html}'],
-          theme: {
-            boxShadow: {
-              sm: '0 2px 6px rgb(15 23 42 / 0.08)',
-            },
-            colors: {
-              red: {
-                400: '#f87171',
-                500: 'red',
-              },
-              superRed: '#ff0000',
-              steel: 'rgb(70 130 180 / <alpha-value>)',
-              smoke: 'rgba(245, 245, 245, var(--smoke-alpha, <alpha-value>))',
-            },
-            ringColor: {
-              DEFAULT: '#c0ffee',
-            },
-            opacity: {
-              superOpaque: '0.95',
-            },
-            fontSize: {
-              xs: ['0.75rem', { lineHeight: '1rem' }],
-              sm: ['0.875rem', { lineHeight: '1.5rem' }],
-              base: ['1rem', { lineHeight: '2rem' }],
-              lg: ['1.125rem', '2.5rem'],
-              xl: ['1.5rem', '3rem', 'invalid'],
-              '2xl': ['2rem'],
-            },
-            width: {
-              px: '1px',
-              auto: 'auto',
-              1: '0.25rem',
-              1.5: '0.375rem',
-              2: '0.5rem',
-              2.5: '0.625rem',
-              3: '0.75rem',
-              3.5: '0.875rem',
-              4: '1rem',
-              5: '1.25rem',
-              6: '1.5rem',
-              8: '2rem',
-              10: '2.5rem',
-              11: '2.75rem',
-              12: '3rem',
-              16: '4rem',
-              24: '6rem',
-              32: '8rem',
-              40: '10rem',
-              48: '12rem',
-              64: '16rem',
-              80: '20rem',
-              96: '24rem',
-              128: '32rem',
-
-              full: '100%',
-              0: '0%',
-              '1/2': '50%',
-              '1/3': 'calc(100% / 3)',
-              '2/3': 'calc(100% / 3 * 2)',
-              '1/4': '25%',
-              '3/4': '75%',
-              '1/5': '20%',
-              '2/5': '40%',
-              '3/5': '60%',
-              '4/5': '80%',
-              '1/6': 'calc(100% / 6)',
-              '5/6': 'calc(100% / 6 * 5)',
-              '1/7': 'calc(100% / 7)',
-              '1/10': 'calc(100% / 10)',
-              '3/10': 'calc(100% / 10 * 3)',
-              '7/10': 'calc(100% / 10 * 7)',
-              '9/10': 'calc(100% / 10 * 9)',
-              screen: '100vw',
-
-              'full-minus-80': 'calc(100% - 20rem)',
-              'full-minus-96': 'calc(100% - 24rem)',
-
-              '225px': '225px',
-            },
-            extend: {
-              colors: {
-                red: {
-                  500: '#ef4444',
-                  600: '#dc2626',
-                },
-              },
-              fontFamily: {
-                sans: 'Inter, system-ui, sans-serif',
-                display: ['Cabinet Grotesk', ...defaultTheme.fontFamily.sans],
-              },
-              borderRadius: {
-                '4xl': '2rem',
-              },
-              keyframes: {
-                'spin-clockwise': {
-                  '0%': { transform: 'rotate(0deg)' },
-                  '100%': { transform: 'rotate(360deg)' },
-                },
-                'spin-counterclockwise': {
-                  '0%': { transform: 'rotate(0deg)' },
-                  '100%': { transform: 'rotate(-360deg)' },
-                },
-              },
-              animation: {
-                'spin-clockwise': 'spin-clockwise 1s linear infinite',
-                'spin-counterclockwise': 'spin-counterclockwise 1s linear infinite',
-              },
-              letterSpacing: {
-                superWide: '0.25em',
-              },
-              lineHeight: {
-                superLoose: '3',
-              },
-            },
-          },
-          plugins: [],
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      // prettier-ignore
-      'src/test.js': ts`
-        export default {
-          'shouldNotMigrate': !border.test + '',
-          'filter': 'drop-shadow(0 0 0.5rem #000)',
-        }
-      `,
-      'src/index.html': html`
-        <div
-          class="[letter-spacing:theme(letterSpacing.superWide)] [line-height:theme(lineHeight.superLoose)]"
-        ></div>
-        <div class="text-superRed/superOpaque leading-superLoose"></div>
-      `,
-      'node_modules/my-external-lib/src/template.html': html`
-        <div class="text-red-500">
-          Hello world!
-        </div>
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.{css,js,html}')).toMatchInlineSnapshot(`
-      "
-      --- src/index.html ---
-      <div
-        class="tracking-superWide leading-superLoose"
-      ></div>
-      <div class="text-superRed/superOpaque leading-superLoose"></div>
-
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @source '../node_modules/my-external-lib/**/*.{html}';
-
-      @custom-variant dark (&:where(.dark, .dark *));
-
-      @theme {
-        --shadow-*: initial;
-        --shadow-sm: 0 2px 6px rgb(15 23 42 / 0.08);
-
-        --color-*: initial;
-        --color-red-400: #f87171;
-        --color-red-500: #ef4444;
-        --color-red-600: #dc2626;
-
-        --color-superRed: #ff0000;
-        --color-steel: rgb(70 130 180);
-        --color-smoke: rgba(245, 245, 245, var(--smoke-alpha, 1));
-
-        --default-ring-color: #c0ffee;
-
-        --opacity-*: initial;
-        --opacity-superOpaque: 95%;
-
-        --text-*: initial;
-        --text-xs: 0.75rem;
-        --text-xs--line-height: 1rem;
-        --text-sm: 0.875rem;
-        --text-sm--line-height: 1.5rem;
-        --text-base: 1rem;
-        --text-base--line-height: 2rem;
-        --text-lg: 1.125rem;
-        --text-lg--line-height: 2.5rem;
-        --text-xl: 1.5rem;
-        --text-xl--line-height: 3rem;
-        --text-2xl: 2rem;
-
-        --width-*: initial;
-        --width-0: 0%;
-        --width-1: 0.25rem;
-        --width-2: 0.5rem;
-        --width-3: 0.75rem;
-        --width-4: 1rem;
-        --width-5: 1.25rem;
-        --width-6: 1.5rem;
-        --width-8: 2rem;
-        --width-10: 2.5rem;
-        --width-11: 2.75rem;
-        --width-12: 3rem;
-        --width-16: 4rem;
-        --width-24: 6rem;
-        --width-32: 8rem;
-        --width-40: 10rem;
-        --width-48: 12rem;
-        --width-64: 16rem;
-        --width-80: 20rem;
-        --width-96: 24rem;
-        --width-128: 32rem;
-        --width-px: 1px;
-        --width-auto: auto;
-        --width-1_5: 0.375rem;
-        --width-2_5: 0.625rem;
-        --width-3_5: 0.875rem;
-        --width-full: 100%;
-        --width-1\\/2: 50%;
-        --width-1\\/3: calc(100% / 3);
-        --width-2\\/3: calc(100% / 3 * 2);
-        --width-1\\/4: 25%;
-        --width-3\\/4: 75%;
-        --width-1\\/5: 20%;
-        --width-2\\/5: 40%;
-        --width-3\\/5: 60%;
-        --width-4\\/5: 80%;
-        --width-1\\/6: calc(100% / 6);
-        --width-5\\/6: calc(100% / 6 * 5);
-        --width-1\\/7: calc(100% / 7);
-        --width-1\\/10: calc(100% / 10);
-        --width-3\\/10: calc(100% / 10 * 3);
-        --width-7\\/10: calc(100% / 10 * 7);
-        --width-9\\/10: calc(100% / 10 * 9);
-        --width-screen: 100vw;
-        --width-full-minus-80: calc(100% - 20rem);
-        --width-full-minus-96: calc(100% - 24rem);
-        --width-225px: 225px;
-
-        --font-sans: Inter, system-ui, sans-serif;
-        --font-display:
-          Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-          'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
-        --radius-4xl: 2rem;
-
-        --animate-spin-clockwise: spin-clockwise 1s linear infinite;
-        --animate-spin-counterclockwise: spin-counterclockwise 1s linear infinite;
-
-        --tracking-superWide: 0.25em;
-
-        --leading-superLoose: 3;
-
-        @keyframes spin-clockwise {
-          0% {
-            transform: rotate(0deg);
-          }
-          100% {
-            transform: rotate(360deg);
-          }
-        }
-        @keyframes spin-counterclockwise {
-          0% {
-            transform: rotate(0deg);
-          }
-          100% {
-            transform: rotate(-360deg);
-          }
-        }
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- src/test.js ---
-      export default {
-        'shouldNotMigrate': !border.test + '',
-        'filter': 'drop-shadow(0 0 0.5rem #000)',
-      }
-      "
-    `)
-
-    expect((await fs.dumpFiles('tailwind.config.ts')).trim()).toBe('')
-  },
-)
-
-test(
-  'skips gitignored template files even when they are explicitly referenced in `content`',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      '.gitignore': txt`
-        node_modules
-        src/ignored
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-
-        module.exports = {
-          content: [
-            './src/migrate-me.html',
-            './src/ignored/do-not-migrate-me.html',
-            './node_modules/my-external-lib/template.html',
-          ],
-          theme: {},
-          plugins: [],
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      'src/migrate-me.html': html`
-        <div class="order-[0]"></div>
-      `,
-      'src/ignored/do-not-migrate-me.html': html`
-        <div class="order-[0]"></div>
-      `,
-      'node_modules/my-external-lib/template.html': html`
-        <div
-          class="order-[0]"
-        ></div>
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(
-      await fs.dumpFiles(
-        '{src/**/*.{css,html},node_modules/my-external-lib/template.html,.gitignore}',
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      --- .gitignore ---
-      node_modules
-      src/ignored
-
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @source './ignored/do-not-migrate-me.html';
-      @source '../node_modules/my-external-lib/template.html';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- src/migrate-me.html ---
-      <div class="order-0"></div>
-
-      --- node_modules/my-external-lib/template.html ---
-      <div
-        class="order-[0]"
-      ></div>
-
-      --- src/ignored/do-not-migrate-me.html ---
-      <div class="order-[0]"></div>
-      "
-    `)
-  },
-)
-
-test(
-  'upgrades JS config files with plugins',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/typography": "^0.5.15",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-        import typography from '@tailwindcss/typography'
-        import customPlugin from './custom-plugin'
-
-        export default {
-          darkMode: [
-            'variant',
-            [
-              '@media not print { .dark & }',
-              '@media not eink { .dark & }',
-              '&:where(.dark, .dark *)',
-            ],
-          ],
-          plugins: [
-            typography,
-            customPlugin({
-              'is-null': null,
-              'is-true': true,
-              'is-false': false,
-              'is-int': 1234567,
-              'is-float': 1.35,
-              'is-sci': 1.35e-5,
-              'is-str-null': 'null',
-              'is-str-true': 'true',
-              'is-str-false': 'false',
-              'is-str-int': '1234567',
-              'is-str-float': '1.35',
-              'is-str-sci': '1.35e-5',
-              'is-arr': ['foo', 'bar'],
-              'is-arr-mixed': [null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'],
-            }),
-          ],
-        } satisfies Config
-      `,
-      'custom-plugin.js': ts`
-        import plugin from 'tailwindcss/plugin'
-        export default plugin.withOptions((_options) => ({ addVariant }) => {
-          addVariant('inverted', '@media (inverted-colors: inverted)')
-          addVariant('hocus', ['&:focus', '&:hover'])
-        })
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @plugin '@tailwindcss/typography';
-      @plugin '../custom-plugin' {
-        is-null: null;
-        is-true: true;
-        is-false: false;
-        is-int: 1234567;
-        is-float: 1.35;
-        is-sci: 0.0000135;
-        is-str-null: 'null';
-        is-str-true: 'true';
-        is-str-false: 'false';
-        is-str-int: '1234567';
-        is-str-float: '1.35';
-        is-str-sci: '1.35e-5';
-        is-arr: 'foo', 'bar';
-        is-arr-mixed: null, true, false, 1234567, 1.35, 'foo', 'bar', 'true';
-      }
-
-      @custom-variant dark {
-        @media not print {
-          .dark & {
-            @slot;
-          }
-        }
-        @media not eink {
-          .dark & {
-            @slot;
-          }
-        }
-        &:where(.dark, .dark *) {
-          @slot;
-        }
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-
-    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
-      "
-
-      "
-    `)
-  },
-)
-
-test(
-  'upgrades JS config files with functions in the theme config',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-
-        export default {
-          theme: {
-            extend: {
-              colors: ({ colors }) => ({
-                gray: colors.neutral,
-              }),
-            },
-          },
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.{css,ts}')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @theme {
-        --color-gray-50: oklch(98.5% 0 none);
-        --color-gray-100: oklch(97% 0 none);
-        --color-gray-200: oklch(92.2% 0 none);
-        --color-gray-300: oklch(87% 0 none);
-        --color-gray-400: oklch(70.8% 0 none);
-        --color-gray-500: oklch(55.6% 0 none);
-        --color-gray-600: oklch(43.9% 0 none);
-        --color-gray-700: oklch(37.1% 0 none);
-        --color-gray-800: oklch(26.9% 0 none);
-        --color-gray-900: oklch(20.5% 0 none);
-        --color-gray-950: oklch(14.5% 0 none);
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-
-    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
-      "
-
-      "
-    `)
-  },
-)
-
-test(
-  'does not upgrade JS config files with theme keys contributed to by plugins in the theme config',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-
-        export default {
-          theme: {
-            typography: {
-              DEFAULT: {
-                css: {
-                  '--tw-prose-body': 'red',
-                  color: 'var(--tw-prose-body)',
-                },
-              },
-            },
-          },
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @config '../tailwind.config.ts';
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @config '../tailwind.config.ts';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-
-    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
-      "
-      --- tailwind.config.ts ---
-      import { type Config } from 'tailwindcss'
-
-      export default {
-        theme: {
-          typography: {
-            DEFAULT: {
-              css: {
-                '--tw-prose-body': 'red',
-                color: 'var(--tw-prose-body)',
-              },
-            },
-          },
-        },
-      } satisfies Config
-      "
-    `)
-  },
-)
-
-test(
-  `does not upgrade JS config files with inline plugins`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-
-        export default {
-          plugins: [function complexConfig() {}],
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @config '../tailwind.config.ts';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-
-    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
-      "
-      --- tailwind.config.ts ---
-      import { type Config } from 'tailwindcss'
-
-      export default {
-        plugins: [function complexConfig() {}],
-      } satisfies Config
-      "
-    `)
-  },
-)
-
-test(
-  `does not upgrade JS config files with non-simple screens object`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-
-        export default {
-          theme: {
-            screens: {
-              xl: { min: '1024px', max: '1279px' },
-              tall: { raw: '(min-height: 800px)' },
-            },
-          },
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @config '../tailwind.config.ts';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-
-    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
-      "
-      --- tailwind.config.ts ---
-      import { type Config } from 'tailwindcss'
-
-      export default {
-        theme: {
-          screens: {
-            xl: { min: '1024px', max: '1279px' },
-            tall: { raw: '(min-height: 800px)' },
-          },
-        },
-      } satisfies Config
-      "
-    `)
-  },
-)
-
-test(
-  'multi-root project',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-
-      // Project A
-      'project-a/tailwind.config.ts': ts`
-        export default {
-          content: {
-            relative: true,
-            files: ['./src/**/*.html'],
-          },
-          theme: {
-            extend: {
-              colors: {
-                primary: 'red',
-              },
-            },
-          },
-        }
-      `,
-      'project-a/src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @config "../tailwind.config.ts";
-      `,
-      'project-a/src/index.html': html`<div class="!text-primary"></div>`,
-
-      // Project B
-      'project-b/tailwind.config.ts': ts`
-        export default {
-          content: {
-            relative: true,
-            files: ['./src/**/*.html'],
-          },
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        }
-      `,
-      'project-b/src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @config "../tailwind.config.ts";
-      `,
-      'project-b/src/index.html': html`<div class="!text-primary"></div>`,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('project-{a,b}/**/*.{css,ts}')).toMatchInlineSnapshot(`
-      "
-      --- project-a/src/input.css ---
-      @import 'tailwindcss';
-
-      @theme {
-        --color-primary: red;
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-
-      --- project-b/src/input.css ---
-      @import 'tailwindcss';
-
-      @theme {
-        --color-primary: blue;
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate sources when pointing to folders outside the project root',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-
-      'frontend/tailwind.config.ts': ts`
-        export default {
-          content: {
-            relative: true,
-            files: ['./src/**/*.html', '../backend/mails/**/*.blade.php'],
-          },
-          theme: {
-            extend: {
-              colors: {
-                primary: 'red',
-              },
-            },
-          },
-        }
-      `,
-      'frontend/src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @config "../tailwind.config.ts";
-      `,
-      'frontend/src/index.html': html`<div class="!text-primary"></div>`,
-
-      'backend/mails/welcome.blade.php': html`<div class="!text-primary"></div>`,
-    },
-  },
-  async ({ root, exec, fs, expect }) => {
-    await exec('pnpm exec upgrade', {
-      cwd: path.join(root, 'frontend'),
-    })
-
-    expect(await fs.dumpFiles('frontend/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- frontend/src/input.css ---
-      @import 'tailwindcss';
-
-      @source '../../backend/mails/**/*.blade.php';
-
-      @theme {
-        --color-primary: red;
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate aria theme keys to custom variants',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        export default {
-          content: {
-            relative: true,
-            files: ['./src/**/*.html'],
-          },
-          theme: {
-            extend: {
-              aria: {
-                // Built-in (not really, but visible because of intellisense)
-                busy: 'busy="true"',
-
-                // Automatically handled by bare values
-                foo: 'foo="true"',
-
-                // Quotes are optional in CSS for these kinds of attribute
-                // selectors
-                bar: 'bar=true',
-
-                // Not automatically handled by bare values because names differ
-                baz: 'qux="true"',
-
-                // Completely custom
-                asc: 'sort="ascending"',
-                desc: 'sort="descending"',
-              },
-            },
-          },
-        }
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @custom-variant aria-baz (&[aria-qux="true"]);
-      @custom-variant aria-asc (&[aria-sort="ascending"]);
-      @custom-variant aria-desc (&[aria-sort="descending"]);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate data theme keys to custom variants',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        export default {
-          content: {
-            relative: true,
-            files: ['./src/**/*.html'],
-          },
-          theme: {
-            extend: {
-              data: {
-                // Automatically handled by bare values
-                foo: 'foo',
-
-                // Not automatically handled by bare values because names differ
-                bar: 'baz',
-
-                // Custom
-                checked: 'ui~="checked"',
-              },
-            },
-          },
-        }
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @custom-variant data-bar (&[data-baz]);
-      @custom-variant data-checked (&[data-ui~="checked"]);
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'migrate supports theme keys to custom variants',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        export default {
-          content: {
-            relative: true,
-            files: ['./src/**/*.html'],
-          },
-          theme: {
-            extend: {
-              supports: {
-                // Automatically handled by bare values (using CSS variable as the value)
-                foo: 'foo: var(--foo)', // parentheses are optional
-                bar: '(bar: var(--bar))',
-
-                // Not automatically handled by bare values because names differ
-                foo: 'bar: var(--foo)', // parentheses are optional
-                bar: '(qux: var(--bar))',
-
-                // Custom
-                grid: 'display: grid',
-              },
-            },
-          },
-        }
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @custom-variant supports-foo {
-        @supports (bar: var(--foo)) {
-          @slot;
-        }
-      }
-      @custom-variant supports-bar {
-        @supports ((qux: var(--bar))) {
-          @slot;
-        }
-      }
-      @custom-variant supports-grid {
-        @supports (display: grid) {
-          @slot;
-        }
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-  },
-)
-
-describe('border compatibility', () => {
-  test(
-    'migrate border compatibility',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "^3",
-              "@tailwindcss/upgrade": "workspace:^"
-            }
-          }
-        `,
-        'tailwind.config.ts': ts`
-          import { type Config } from 'tailwindcss'
-
-          // Empty / default config
-          export default {
-            theme: {
-              extend: {},
-            },
-          } satisfies Config
-        `,
-        'src/input.css': css`
-          @tailwind base;
-          @tailwind components;
-          @tailwind utilities;
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec('pnpm exec upgrade')
-
-      expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-        "
-        --- src/input.css ---
-        @import 'tailwindcss';
-
-        /*
-          The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-          so we've added these compatibility styles to make sure everything still
-          looks the same as it did with Tailwind CSS v3.
-
-          If we ever want to remove these styles, we need to add an explicit border
-          color utility to any element that depends on these defaults.
-        */
-        @layer base {
-          *,
-          ::after,
-          ::before,
-          ::backdrop,
-          ::file-selector-button {
-            border-color: var(--color-gray-200, currentcolor);
-          }
-        }
-        "
-      `)
-    },
-  )
-
-  test(
-    'migrate border compatibility if a custom border color is used',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "^3",
-              "@tailwindcss/upgrade": "workspace:^"
-            }
-          }
-        `,
-        'tailwind.config.ts': ts`
-          import { type Config } from 'tailwindcss'
-
-          export default {
-            theme: {
-              extend: {
-                borderColor: ({ colors }) => ({
-                  DEFAULT: colors.blue[500],
-                }),
-              },
-            },
-          } satisfies Config
-        `,
-        'src/input.css': css`
-          @tailwind base;
-          @tailwind components;
-          @tailwind utilities;
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec('pnpm exec upgrade')
-
-      expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-        "
-        --- src/input.css ---
-        @import 'tailwindcss';
-
-        /*
-          The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-          so we've added these compatibility styles to make sure everything still
-          looks the same as it did with Tailwind CSS v3.
-
-          If we ever want to remove these styles, we need to add an explicit border
-          color utility to any element that depends on these defaults.
-        */
-        @layer base {
-          *,
-          ::after,
-          ::before,
-          ::backdrop,
-          ::file-selector-button {
-            border-color: oklch(62.3% 0.214 259.815);
-          }
-        }
-        "
-      `)
-    },
-  )
-
-  test(
-    'migrate border compatibility if a custom border color is used, that matches the default v4 border color',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "^3",
-              "@tailwindcss/upgrade": "workspace:^"
-            }
-          }
-        `,
-        'tailwind.config.ts': ts`
-          import { type Config } from 'tailwindcss'
-
-          export default {
-            theme: {
-              extend: {
-                borderColor: ({ colors }) => ({
-                  DEFAULT: 'currentcolor',
-                }),
-              },
-            },
-          } satisfies Config
-        `,
-        'src/input.css': css`
-          @tailwind base;
-          @tailwind components;
-          @tailwind utilities;
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec('pnpm exec upgrade')
-
-      expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-        "
-        --- src/input.css ---
-        @import 'tailwindcss';
-        "
-      `)
-    },
-  )
-
-  test(
-    'migrate border compatibility in the file that uses the `@import "tailwindcss"` import',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "^3",
-              "@tailwindcss/upgrade": "workspace:^"
-            }
-          }
-        `,
-        'tailwind.config.ts': ts`
-          import { type Config } from 'tailwindcss'
-
-          export default {
-            theme: {},
-          } satisfies Config
-        `,
-        'src/input.css': css`@import './tailwind.css';`,
-        'src/tailwind.css': css`
-          @tailwind base;
-          @tailwind components;
-          @tailwind utilities;
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec('pnpm exec upgrade')
-
-      expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-        "
-        --- src/input.css ---
-        @import './tailwind.css';
-
-        --- src/tailwind.css ---
-        @import 'tailwindcss';
-
-        /*
-          The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-          so we've added these compatibility styles to make sure everything still
-          looks the same as it did with Tailwind CSS v3.
-
-          If we ever want to remove these styles, we need to add an explicit border
-          color utility to any element that depends on these defaults.
-        */
-        @layer base {
-          *,
-          ::after,
-          ::before,
-          ::backdrop,
-          ::file-selector-button {
-            border-color: var(--color-gray-200, currentcolor);
-          }
-        }
-        "
-      `)
-    },
-  )
-
-  test(
-    'migrate border compatibility in the file that uses the `@import "tailwindcss/preflight"` import',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "^3",
-              "@tailwindcss/upgrade": "workspace:^"
-            }
-          }
-        `,
-        'tailwind.config.ts': ts`
-          import { type Config } from 'tailwindcss'
-
-          export default {
-            theme: {},
-          } satisfies Config
-        `,
-        'src/input.css': css`
-          @import './base.css';
-          @import './my-base.css';
-          @import './utilities.css';
-        `,
-        'src/base.css': css`@tailwind base;`,
-        'src/utilities.css': css`
-          @tailwind components;
-          @tailwind utilities;
-        `,
-        'src/my-base.css': css`
-          @layer base {
-            html {
-              color: black;
-            }
-          }
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec('pnpm exec upgrade')
-
-      expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-        "
-        --- src/base.css ---
-        @import 'tailwindcss/theme' layer(theme);
-        @import 'tailwindcss/preflight' layer(base);
-
-        /*
-          The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-          so we've added these compatibility styles to make sure everything still
-          looks the same as it did with Tailwind CSS v3.
-
-          If we ever want to remove these styles, we need to add an explicit border
-          color utility to any element that depends on these defaults.
-        */
-        @layer base {
-          *,
-          ::after,
-          ::before,
-          ::backdrop,
-          ::file-selector-button {
-            border-color: var(--color-gray-200, currentcolor);
-          }
-        }
-
-        --- src/input.css ---
-        @import './base.css';
-        @import './my-base.css';
-        @import './utilities.css';
-
-        --- src/my-base.css ---
-        @layer base {
-          html {
-            color: black;
-          }
-        }
-
-        --- src/utilities.css ---
-        @import 'tailwindcss/utilities' layer(utilities);
-        "
-      `)
-    },
-  )
-
-  test(
-    'migrates extended spacing keys',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "^3",
-              "@tailwindcss/upgrade": "workspace:^"
-            }
-          }
-        `,
-        'tailwind.config.ts': ts`
-          import { type Config } from 'tailwindcss'
-
-          export default {
-            content: ['./src/**/*.html'],
-            theme: {
-              extend: {
-                spacing: {
-                  2: '0.5rem',
-                  4.5: '1.125rem',
-                  5.5: '1.375em', // Units are different from --spacing scale
-                  13: '3.25rem',
-                  100: '100px',
-                  miami: '1337px',
-                },
-              },
-            },
-          } satisfies Config
-        `,
-        'src/input.css': css`
-          @tailwind base;
-          @tailwind components;
-          @tailwind utilities;
-
-          .container {
-            width: theme(spacing.2);
-            width: theme(spacing[4.5]);
-            width: theme(spacing[5.5]);
-            width: theme(spacing[13]);
-            width: theme(spacing[100]);
-            width: theme(spacing.miami);
-          }
-        `,
-        'src/index.html': html`
-          <div
-            class="[width:theme(spacing.2)]
-              [width:theme(spacing[4.5])]
-              [width:theme(spacing[5.5])]
-              [width:theme(spacing[13])]
-              [width:theme(spacing[100])]
-              [width:theme(spacing.miami)]"
-          ></div>
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec('pnpm exec upgrade')
-
-      expect(await fs.dumpFiles('src/**/*.{css,html}')).toMatchInlineSnapshot(`
-        "
-        --- src/index.html ---
-        <div
-          class="w-2
-            w-4.5
-            w-5.5
-            w-13
-            w-100
-            w-miami"
-        ></div>
-
-        --- src/input.css ---
-        @import 'tailwindcss';
-
-        @theme {
-          --spacing-100: 100px;
-          --spacing-5_5: 1.375em;
-          --spacing-miami: 1337px;
-        }
-
-        /*
-          The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-          so we've added these compatibility styles to make sure everything still
-          looks the same as it did with Tailwind CSS v3.
-
-          If we ever want to remove these styles, we need to add an explicit border
-          color utility to any element that depends on these defaults.
-        */
-        @layer base {
-          *,
-          ::after,
-          ::before,
-          ::backdrop,
-          ::file-selector-button {
-            border-color: var(--color-gray-200, currentcolor);
-          }
-        }
-
-        .container {
-          width: --spacing(2);
-          width: --spacing(4.5);
-          width: var(--spacing-5_5);
-          width: --spacing(13);
-          width: var(--spacing-100);
-          width: var(--spacing-miami);
-        }
-        "
-      `)
-    },
-  )
-
-  test(
-    'retains overwriting spacing scale',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "^3",
-              "@tailwindcss/upgrade": "workspace:^"
-            }
-          }
-        `,
-        'tailwind.config.ts': ts`
-          import { type Config } from 'tailwindcss'
-
-          export default {
-            content: ['./src/**/*.html'],
-            theme: {
-              spacing: {
-                2: '0.5rem',
-                4.5: '1.125rem',
-                5.5: '1.375em',
-                13: '3.25rem',
-                100: '100px',
-                miami: '1337px',
-              },
-            },
-          } satisfies Config
-        `,
-        'src/input.css': css`
-          @tailwind base;
-          @tailwind components;
-          @tailwind utilities;
-
-          .container {
-            width: theme(spacing.2);
-            width: theme(spacing[4.5]);
-            width: theme(spacing[5.5]);
-            width: theme(spacing[13]);
-            width: theme(spacing[100]);
-            width: theme(spacing.miami);
-          }
-        `,
-        'src/index.html': html`
-          <div
-            class="[width:theme(spacing.2)]
-              [width:theme(spacing[4.5])]
-              [width:theme(spacing[5.5])]
-              [width:theme(spacing[13])]
-              [width:theme(spacing[100])]
-              [width:theme(spacing.miami)]"
-          ></div>
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec('pnpm exec upgrade')
-
-      expect(await fs.dumpFiles('src/**/*.{css,html}')).toMatchInlineSnapshot(`
-        "
-        --- src/index.html ---
-        <div
-          class="w-2
-            w-4.5
-            w-5.5
-            w-13
-            w-100
-            w-miami"
-        ></div>
-
-        --- src/input.css ---
-        @import 'tailwindcss';
-
-        @theme {
-          --spacing-*: initial;
-          --spacing-2: 0.5rem;
-          --spacing-13: 3.25rem;
-          --spacing-100: 100px;
-          --spacing-4_5: 1.125rem;
-          --spacing-5_5: 1.375em;
-          --spacing-miami: 1337px;
-        }
-
-        /*
-          The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-          so we've added these compatibility styles to make sure everything still
-          looks the same as it did with Tailwind CSS v3.
-
-          If we ever want to remove these styles, we need to add an explicit border
-          color utility to any element that depends on these defaults.
-        */
-        @layer base {
-          *,
-          ::after,
-          ::before,
-          ::backdrop,
-          ::file-selector-button {
-            border-color: var(--color-gray-200, currentcolor);
-          }
-        }
-
-        .container {
-          width: var(--spacing-2);
-          width: var(--spacing-4_5);
-          width: var(--spacing-5_5);
-          width: var(--spacing-13);
-          width: var(--spacing-100);
-          width: var(--spacing-miami);
-        }
-        "
-      `)
-    },
-  )
-
-  test(
-    'migrates `container` component configurations',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "dependencies": {
-              "tailwindcss": "^3",
-              "@tailwindcss/upgrade": "workspace:^"
-            }
-          }
-        `,
-        'tailwind.config.ts': ts`
-          import { type Config } from 'tailwindcss'
-
-          export default {
-            content: ['./src/**/*.html'],
-            theme: {
-              container: {
-                center: true,
-                padding: {
-                  DEFAULT: '2rem',
-                  '2xl': '4rem',
-                },
-                screens: {
-                  md: '48rem', // Matches a default --breakpoint
-                  xl: '1280px',
-                  '2xl': '1536px',
-                },
-              },
-            },
-          } satisfies Config
-        `,
-        'src/input.css': css`
-          @tailwind base;
-          @tailwind components;
-          @tailwind utilities;
-        `,
-        'src/index.html': html`
-          <div class="container"></div>
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec('pnpm exec upgrade')
-
-      expect(await fs.dumpFiles('src/**/*.{css,html}')).toMatchInlineSnapshot(`
-        "
-        --- src/index.html ---
-        <div class="container"></div>
-
-        --- src/input.css ---
-        @import 'tailwindcss';
-
-        @utility container {
-          margin-inline: auto;
-          padding-inline: 2rem;
-          @media (width >= --theme(--breakpoint-sm)) {
-            max-width: none;
-          }
-          @media (width >= 48rem) {
-            max-width: 48rem;
-          }
-          @media (width >= 1280px) {
-            max-width: 1280px;
-          }
-          @media (width >= 1536px) {
-            max-width: 1536px;
-            padding-inline: 4rem;
-          }
-        }
-
-        /*
-          The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-          so we've added these compatibility styles to make sure everything still
-          looks the same as it did with Tailwind CSS v3.
-
-          If we ever want to remove these styles, we need to add an explicit border
-          color utility to any element that depends on these defaults.
-        */
-        @layer base {
-          *,
-          ::after,
-          ::before,
-          ::backdrop,
-          ::file-selector-button {
-            border-color: var(--color-gray-200, currentcolor);
-          }
-        }
-        "
-      `)
-    },
-  )
-})
-
-test(
-  `future and experimental keys are supported`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-        import defaultTheme from 'tailwindcss/defaultTheme'
-
-        module.exports = {
-          darkMode: 'selector',
-          content: ['./src/**/*.{html,js}'],
-          future: {
-            hoverOnlyWhenSupported: true,
-            respectDefaultRingColorOpacity: true,
-            disableColorOpacityUtilitiesByDefault: true,
-            relativeContentPathsByDefault: true,
-          },
-          experimental: {
-            generalizedModifiers: true,
-          },
-          theme: {
-            colors: {
-              red: {
-                400: '#f87171',
-                500: 'red',
-              },
-            },
-          },
-          plugins: [],
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @custom-variant dark (&:where(.dark, .dark *));
-
-      @theme {
-        --color-*: initial;
-        --color-red-400: #f87171;
-        --color-red-500: red;
-      }
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-
-    expect((await fs.dumpFiles('tailwind.config.ts')).trim()).toBe('')
-  },
-)
-
-test(
-  `unknown future keys dont migrate the config`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-        import defaultTheme from 'tailwindcss/defaultTheme'
-
-        module.exports = {
-          darkMode: 'selector',
-          content: ['./src/**/*.{html,js}'],
-          future: {
-            something: true,
-          },
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @config '../tailwind.config.ts';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-
-    expect((await fs.dumpFiles('tailwind.config.ts')).trim()).toMatchInlineSnapshot(`
-      "--- tailwind.config.ts ---
-      import { type Config } from 'tailwindcss'
-      import defaultTheme from 'tailwindcss/defaultTheme'
-
-      module.exports = {
-        darkMode: 'selector',
-        content: ['./src/**/*.{html,js}'],
-        future: {
-          something: true,
-        },
-      } satisfies Config"
-    `)
-  },
-)
-
-test(
-  `unknown experimental keys dont migrate the config`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.ts': ts`
-        import { type Config } from 'tailwindcss'
-        import defaultTheme from 'tailwindcss/defaultTheme'
-
-        module.exports = {
-          darkMode: 'selector',
-          content: ['./src/**/*.{html,js}'],
-          experimental: {
-            something: true,
-          },
-        } satisfies Config
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm exec upgrade')
-
-    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
-      "
-      --- src/input.css ---
-      @import 'tailwindcss';
-
-      @config '../tailwind.config.ts';
-
-      /*
-        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-        so we've added these compatibility styles to make sure everything still
-        looks the same as it did with Tailwind CSS v3.
-
-        If we ever want to remove these styles, we need to add an explicit border
-        color utility to any element that depends on these defaults.
-      */
-      @layer base {
-        *,
-        ::after,
-        ::before,
-        ::backdrop,
-        ::file-selector-button {
-          border-color: var(--color-gray-200, currentcolor);
-        }
-      }
-      "
-    `)
-
-    expect((await fs.dumpFiles('tailwind.config.ts')).trim()).toMatchInlineSnapshot(`
-      "--- tailwind.config.ts ---
-      import { type Config } from 'tailwindcss'
-      import defaultTheme from 'tailwindcss/defaultTheme'
-
-      module.exports = {
-        darkMode: 'selector',
-        content: ['./src/**/*.{html,js}'],
-        experimental: {
-          something: true,
-        },
-      } satisfies Config"
-    `)
-  },
-)
diff --git a/integrations/upgrade/upgrade-errors.test.ts b/integrations/upgrade/upgrade-errors.test.ts
deleted file mode 100644
index fdc60828e..000000000
--- a/integrations/upgrade/upgrade-errors.test.ts
+++ /dev/null
@@ -1,254 +0,0 @@
-import { stripVTControlCharacters } from 'node:util'
-import { css, html, js, json, test } from '../utils'
-
-test(
-  'upgrades half-upgraded v3 project to v4 (pnpm)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <div class="!flex">Hello World</div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-    retry: 0,
-  },
-  async ({ exec, expect }) => {
-    // Ensure we are in a git repo
-    await exec('git init')
-    await exec('git add --all')
-    await exec('git commit -m "before migration"')
-
-    // Fully upgrade to v4
-    await exec('pnpm exec upgrade')
-
-    // Undo all changes to the current repo. This will bring the repo back to a
-    // v3 state, but the `node_modules` will now have v4 installed.
-    await exec('git reset --hard HEAD')
-
-    // Re-running the upgrade should result in an error
-    return expect(() => {
-      return exec('pnpm exec upgrade', {}, { ignoreStdErr: true }).catch((e) => {
-        // Replacing the current version with a hardcoded `v4` to make it stable
-        // when we release new minor/patch versions.
-        return Promise.reject(
-          stripVTControlCharacters(e.message.replace(/\d+\.\d+\.\d+/g, '4.0.0')),
-        )
-      })
-    }).rejects.toThrowErrorMatchingInlineSnapshot(`
-      "Command failed: pnpm exec upgrade
-      ≈ tailwindcss v4.0.0
-
-      │ ↳ Upgrading from Tailwind CSS \`v4.0.0\` 
-
-      │ ↳ Version mismatch 
-      │    
-      │   \`\`\`diff 
-      │   - "tailwindcss": "^3" (expected version in \`package.json\`) 
-      │   + "tailwindcss": "4.0.0" (installed version in \`node_modules\`) 
-      │   \`\`\` 
-      │    
-      │   Make sure to run \`pnpm install\` and try again. 
-
-      "
-    `)
-  },
-)
-
-test(
-  'upgrades half-upgraded v3 project to v4 (bun)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^",
-            "bun": "^1.0.0"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <div class="!flex">Hello World</div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-    retry: 0,
-  },
-  async ({ exec, expect }) => {
-    // Use `bun` to install dependencies
-    await exec('rm ./pnpm-lock.yaml')
-    try {
-      await exec('npx bun install', {}, { ignoreStdErr: true })
-    } catch (e) {
-      // When preparing for a release, the version in `package.json` will point
-      // to a non-existent version because it's not published yet.
-      // TODO: Find a better approach to handle this and actually test it even
-      // on release branches. Note: the pnpm version _does_ work because of
-      // overrides in the package.json file.
-      if (`${e}`.includes('No version matching')) return
-      throw e
-    }
-
-    // Ensure we are in a git repo
-    await exec('git init')
-    await exec('git add --all')
-    await exec('git commit -m "before migration"')
-
-    // Fully upgrade to v4
-    await exec('npx @tailwindcss/upgrade')
-
-    // Undo all changes to the current repo. This will bring the repo back to a
-    // v3 state, but the `node_modules` will now have v4 installed.
-    await exec('git reset --hard HEAD')
-
-    // Re-running the upgrade should result in an error
-    return expect(() => {
-      return exec('npx @tailwindcss/upgrade', {}, { ignoreStdErr: true }).catch((e) => {
-        // Replacing the current version with a hardcoded `v4` to make it stable
-        // when we release new minor/patch versions.
-        return Promise.reject(
-          stripVTControlCharacters(e.message.replace(/\d+\.\d+\.\d+/g, '4.0.0')),
-        )
-      })
-    }).rejects.toThrowErrorMatchingInlineSnapshot(`
-      "Command failed: npx @tailwindcss/upgrade
-      ≈ tailwindcss v4.0.0
-
-      │ ↳ Upgrading from Tailwind CSS \`v4.0.0\` 
-
-      │ ↳ Version mismatch 
-      │    
-      │   \`\`\`diff 
-      │   - "tailwindcss": "^3" (expected version in \`package.json\`) 
-      │   + "tailwindcss": "4.0.0" (installed version in \`node_modules\`) 
-      │   \`\`\` 
-      │    
-      │   Make sure to run \`bun install\` and try again. 
-
-      "
-    `)
-  },
-)
-
-test(
-  'upgrades half-upgraded v3 project to v4 (npm)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "dependencies": {
-            "tailwindcss": "^3",
-            "@tailwindcss/upgrade": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/cli": "workspace:^"
-          }
-        }
-      `,
-      'tailwind.config.js': js`
-        /** @type {import('tailwindcss').Config} */
-        module.exports = {
-          content: ['./src/**/*.{html,js}'],
-        }
-      `,
-      'src/index.html': html`
-        <div class="!flex">Hello World</div>
-      `,
-      'src/input.css': css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-    },
-    retry: 0,
-  },
-  async ({ exec, expect }) => {
-    // Use `npm` to install dependencies
-    await exec('rm ./pnpm-lock.yaml')
-    await exec('rm -rf ./node_modules')
-    try {
-      await exec('npm install', {}, { ignoreStdErr: true })
-    } catch (e) {
-      // When preparing for a release, the version in `package.json` will point
-      // to a non-existent version because it's not published yet.
-      // TODO: Find a better approach to handle this and actually test it even
-      // on release branches. Note: the pnpm version _does_ work because of
-      // overrides in the package.json file.
-      if (`${e}`.includes('npm error code ETARGET')) return
-      throw e
-    }
-
-    // Ensure we are in a git repo
-    await exec('git init')
-    await exec('git add --all')
-    await exec('git commit -m "before migration"')
-
-    // Fully upgrade to v4
-    await exec('npx @tailwindcss/upgrade')
-
-    // Undo all changes to the current repo. This will bring the repo back to a
-    // v3 state, but the `node_modules` will now have v4 installed.
-    await exec('git reset --hard HEAD')
-
-    // Re-running the upgrade should result in an error
-    return expect(() => {
-      return exec('npx @tailwindcss/upgrade', {}, { ignoreStdErr: true }).catch((e) => {
-        // Replacing the current version with a hardcoded `v4` to make it stable
-        // when we release new minor/patch versions.
-        return Promise.reject(
-          stripVTControlCharacters(e.message.replace(/\d+\.\d+\.\d+/g, '4.0.0')),
-        )
-      })
-    }).rejects.toThrowErrorMatchingInlineSnapshot(`
-      "Command failed: npx @tailwindcss/upgrade
-      ≈ tailwindcss v4.0.0
-
-      │ ↳ Upgrading from Tailwind CSS \`v4.0.0\` 
-
-      │ ↳ Version mismatch 
-      │    
-      │   \`\`\`diff 
-      │   - "tailwindcss": "^3" (expected version in \`package.json\`) 
-      │   + "tailwindcss": "4.0.0" (installed version in \`node_modules\`) 
-      │   \`\`\` 
-      │    
-      │   Make sure to run \`npm install\` and try again. 
-
-      "
-    `)
-  },
-)
diff --git a/integrations/utils.ts b/integrations/utils.ts
deleted file mode 100644
index 9863918d1..000000000
--- a/integrations/utils.ts
+++ /dev/null
@@ -1,871 +0,0 @@
-import dedent from 'dedent'
-import fastGlob from 'fast-glob'
-import { exec, execFile, spawn, type ChildProcess } from 'node:child_process'
-import fs from 'node:fs/promises'
-import { createServer } from 'node:net'
-import { platform, tmpdir } from 'node:os'
-import path from 'node:path'
-import { promisify, stripVTControlCharacters } from 'node:util'
-import { RawSourceMap, SourceMapConsumer } from 'source-map-js'
-import { test as defaultTest, type ExpectStatic } from 'vitest'
-import * as Yaml from 'yaml'
-import { createLineTable } from '../packages/tailwindcss/src/source-maps/line-table'
-import { escape } from '../packages/tailwindcss/src/utils/escape'
-
-const REPO_ROOT = path.join(__dirname, '..')
-const ROOT_PNPM_WORKSPACE = Yaml.parse(
-  await fs.readFile(path.join(REPO_ROOT, 'pnpm-workspace.yaml'), 'utf8'),
-)
-const PUBLIC_PACKAGES = (await fs.readdir(path.join(REPO_ROOT, 'dist'))).map((name) =>
-  name.replace('tailwindcss-', '@tailwindcss/').replace('.tgz', ''),
-)
-
-interface SpawnedProcess {
-  dispose: () => Promise<void>
-  flush: () => void
-  onStdout: (predicate: (message: string) => boolean) => Promise<void>
-  onStderr: (predicate: (message: string) => boolean) => Promise<void>
-}
-
-interface ChildProcessOptions {
-  cwd?: string
-  env?: Record<string, string>
-}
-
-interface ExecOptions {
-  ignoreStdErr?: boolean
-  stdin?: string
-}
-
-interface TestConfig {
-  fs: {
-    [filePath: string]: string | Uint8Array
-  }
-
-  timeout?: number
-  installDependencies?: boolean
-  retry?: number
-}
-interface TestContext {
-  root: string
-  expect: ExpectStatic
-  exec(command: string, options?: ChildProcessOptions, execOptions?: ExecOptions): Promise<string>
-  spawn(command: string, options?: ChildProcessOptions): Promise<SpawnedProcess>
-  parseSourceMap(opts: string | SourceMapOptions): SourceMap
-  fs: {
-    write(filePath: string, content: string, encoding?: BufferEncoding): Promise<void>
-    symlink(dst: string, src: string): Promise<void>
-    create(filePaths: string[]): Promise<void>
-    read(filePath: string): Promise<string>
-    delete(filePath: string): Promise<void>
-    glob(pattern: string): Promise<[string, string][]>
-    dumpFiles(pattern: string): Promise<string>
-    expectFileToContain(
-      filePath: string,
-      contents: string | RegExp | (string | RegExp)[],
-    ): Promise<void>
-    expectFileNotToContain(filePath: string, contents: string[]): Promise<void>
-  }
-}
-type TestCallback = (context: TestContext) => Promise<void> | void
-interface TestFlags {
-  only?: boolean
-  skip?: boolean
-  debug?: boolean
-  concurrent?: boolean
-}
-
-type SpawnActor = { predicate: (message: string) => boolean; resolve: () => void }
-
-export const IS_WINDOWS = platform() === 'win32'
-
-const execFileAsync = promisify(execFile)
-
-const TEST_TIMEOUT = IS_WINDOWS ? 120000 : 60000
-const ASSERTION_TIMEOUT = IS_WINDOWS ? 10000 : 5000
-
-// On Windows CI, tmpdir returns a path containing a weird RUNNER~1 folder that
-// apparently causes the vite builds to not work.
-const TMP_ROOT =
-  process.env.CI && IS_WINDOWS ? path.dirname(process.env.GITHUB_WORKSPACE!) : tmpdir()
-
-export function test(
-  name: string,
-  config: TestConfig,
-  testCallback: TestCallback,
-  { only = false, skip = false, debug = false, concurrent = false }: TestFlags = {},
-) {
-  return defaultTest(
-    name,
-    {
-      timeout: config.timeout ?? TEST_TIMEOUT,
-      retry: config.retry ?? (process.env.CI ? 2 : 0),
-      only: only || (!process.env.CI && debug),
-      skip,
-      concurrent,
-    },
-    async (options) => {
-      let rootDir = debug ? path.join(REPO_ROOT, '.debug') : TMP_ROOT
-      await fs.mkdir(rootDir, { recursive: true })
-
-      let root = await fs.mkdtemp(path.join(rootDir, 'tailwind-integrations'))
-
-      if (debug) {
-        console.log('Running test in debug mode. File system will be written to:')
-        console.log(root)
-        console.log()
-      }
-
-      let context = {
-        root,
-        expect: options.expect,
-        parseSourceMap,
-        async exec(
-          command: string,
-          childProcessOptions: ChildProcessOptions = {},
-          execOptions: ExecOptions = {},
-        ) {
-          let cwd = childProcessOptions.cwd ?? root
-          let originalCommand = command
-
-          // Avoid `pnpm exec upgrade` on Windows because the upgrader runs
-          // `pnpm add`, which rewrites Windows `.cmd` shims while the current
-          // shim is still executing.
-          //
-          // Pretty sure this is a pnpm v11 bug on Windows.
-          if (IS_WINDOWS && command.includes('pnpm exec upgrade')) {
-            for (let base = cwd; ; base = path.dirname(base)) {
-              let upgradeBin = path.join(
-                base,
-                'node_modules',
-                '@tailwindcss',
-                'upgrade',
-                'dist',
-                'index.mjs',
-              )
-
-              try {
-                await fs.access(upgradeBin)
-                command = command.replace('pnpm exec upgrade', `node "${upgradeBin}"`)
-                break
-              } catch (error: any) {
-                if (error?.code !== 'ENOENT') throw error
-              }
-
-              let parent = path.dirname(base)
-              if (parent === base) {
-                throw new Error(`Unable to resolve @tailwindcss/upgrade from ${cwd}`)
-              }
-            }
-          }
-
-          if (debug && cwd !== root) {
-            let relative = path.relative(root, cwd)
-            if (relative[0] !== '.') relative = `./${relative}`
-            console.log(`> cd ${relative}`)
-          }
-          if (debug) console.log(`> ${command}`)
-          return new Promise((resolve, reject) => {
-            let child = exec(
-              command,
-              {
-                cwd,
-                ...childProcessOptions,
-                env: {
-                  ...process.env,
-                  ...childProcessOptions.env,
-                },
-              },
-              (error, stdout, stderr) => {
-                if (error) {
-                  if (command !== originalCommand) {
-                    error.message = error.message.replace(command, originalCommand)
-                    let mappedError = error as any
-                    mappedError.cmd = originalCommand
-                  }
-                  if (execOptions.ignoreStdErr !== true) console.error(stderr)
-                  if (only || debug) {
-                    console.error(stdout)
-                  }
-                  reject(error)
-                } else {
-                  if (only || debug) {
-                    console.log(stdout.toString() + '\n\n' + stderr.toString())
-                  }
-                  resolve(stdout.toString() + '\n\n' + stderr.toString())
-                }
-              },
-            )
-            if (execOptions.stdin) {
-              child.stdin?.write(execOptions.stdin)
-              child.stdin?.end()
-            }
-          })
-        },
-        async spawn(command: string, childProcessOptions: ChildProcessOptions = {}) {
-          let resolveDisposal: (() => void) | undefined
-          let rejectDisposal: ((error: Error) => void) | undefined
-          let disposePromise = new Promise<void>((resolve, reject) => {
-            resolveDisposal = resolve
-            rejectDisposal = reject
-          })
-
-          let cwd = childProcessOptions.cwd ?? root
-          if (debug && cwd !== root) {
-            let relative = path.relative(root, cwd)
-            if (relative[0] !== '.') relative = `./${relative}`
-            console.log(`> cd ${relative}`)
-          }
-          if (debug) console.log(`>& ${command}`)
-          let child = spawn(command, {
-            cwd,
-            detached: !IS_WINDOWS,
-            shell: true,
-            ...childProcessOptions,
-            env: {
-              ...process.env,
-              ...childProcessOptions.env,
-            },
-          })
-
-          let disposed = false
-
-          async function dispose() {
-            if (disposed) return disposePromise
-            disposed = true
-
-            await killProcessTree(child)
-
-            let timer = setTimeout(() => {
-              forceKillProcessTree(child)
-              rejectDisposal?.(new Error(`spawned process (${command}) did not exit in time`))
-            }, ASSERTION_TIMEOUT)
-            disposePromise.then(
-              () => clearTimeout(timer),
-              () => clearTimeout(timer),
-            )
-            return disposePromise
-          }
-          disposables.push(dispose)
-
-          function onExit() {
-            resolveDisposal?.()
-          }
-
-          let stdoutMessages: string[] = []
-          let stderrMessages: string[] = []
-
-          let stdoutActors: SpawnActor[] = []
-          let stderrActors: SpawnActor[] = []
-
-          function notifyNext(actors: SpawnActor[], messages: string[]) {
-            if (actors.length <= 0) return
-            let [next] = actors
-
-            for (let [idx, message] of messages.entries()) {
-              if (next.predicate(message)) {
-                messages.splice(0, idx + 1)
-                let actorIdx = actors.indexOf(next)
-                actors.splice(actorIdx, 1)
-                next.resolve()
-                break
-              }
-            }
-          }
-
-          let combined: ['stdout' | 'stderr', string][] = []
-
-          child.stdout.on('data', (result) => {
-            let content = result.toString()
-            if (debug || only) console.log(content)
-            combined.push(['stdout', content])
-            for (let line of content.split('\n')) {
-              stdoutMessages.push(stripVTControlCharacters(line))
-            }
-            notifyNext(stdoutActors, stdoutMessages)
-          })
-          child.stderr.on('data', (result) => {
-            let content = result.toString()
-            if (debug || only) console.error(content)
-            combined.push(['stderr', content])
-            for (let line of content.split('\n')) {
-              stderrMessages.push(stripVTControlCharacters(line))
-            }
-            notifyNext(stderrActors, stderrMessages)
-          })
-          child.on('exit', onExit)
-          child.on('error', (error) => {
-            if (error.name !== 'AbortError') {
-              throw error
-            }
-          })
-
-          options.onTestFailed(() => {
-            // In only or debug mode, messages are logged to the console
-            // immediately.
-            if (only || debug) return
-
-            for (let [type, message] of combined) {
-              if (type === 'stdout') {
-                console.log(message)
-              } else {
-                console.error(message)
-              }
-            }
-          })
-
-          return {
-            dispose,
-            flush() {
-              stdoutActors.splice(0)
-              stderrActors.splice(0)
-
-              stdoutMessages.splice(0)
-              stderrMessages.splice(0)
-            },
-            onStdout(predicate: (message: string) => boolean) {
-              return new Promise<void>((resolve) => {
-                stdoutActors.push({ predicate, resolve })
-                notifyNext(stdoutActors, stdoutMessages)
-              })
-            },
-            onStderr(predicate: (message: string) => boolean) {
-              return new Promise<void>((resolve) => {
-                stderrActors.push({ predicate, resolve })
-                notifyNext(stderrActors, stderrMessages)
-              })
-            },
-          }
-        },
-        fs: {
-          async write(filename, content, encoding = 'utf8') {
-            let full = path.join(root, filename)
-            let dir = path.dirname(full)
-            await fs.mkdir(dir, { recursive: true })
-
-            if (typeof content !== 'string') {
-              return await fs.writeFile(full, content)
-            }
-
-            if (filename.endsWith('package.json')) {
-              content = await overwriteVersionsInPackageJson(content)
-            } else if (filename.endsWith('pnpm-workspace.yaml')) {
-              content = overwriteVersionsInPnpmWorkspace(content)
-            }
-
-            // Ensure that files written on Windows use \r\n line ending
-            if (IS_WINDOWS) {
-              content = content.replace(/\n/g, '\r\n')
-            }
-
-            await fs.writeFile(full, content, encoding)
-          },
-
-          async symlink(target, src) {
-            let targetAbsolute = path.join(root, target)
-            let targetParent = path.dirname(targetAbsolute)
-            await fs.mkdir(targetParent, { recursive: true })
-
-            let srcAbsolute = path.join(root, src)
-            let srcParent = path.dirname(srcAbsolute)
-            await fs.mkdir(srcParent, { recursive: true })
-
-            await fs.symlink(targetAbsolute, srcAbsolute)
-          },
-
-          async create(filenames) {
-            for (let filename of filenames) {
-              let full = path.join(root, filename)
-
-              let dir = path.dirname(full)
-              await fs.mkdir(dir, { recursive: true })
-              await fs.writeFile(full, '')
-            }
-          },
-
-          async delete(filename) {
-            await fs.unlink(path.join(root, filename))
-          },
-
-          async read(filePath) {
-            let content = await fs.readFile(path.resolve(root, filePath), 'utf8')
-
-            // Ensure that files read on Windows have \r\n line endings removed
-            if (IS_WINDOWS) {
-              content = content.replace(/\r\n/g, '\n')
-            }
-
-            return content
-          },
-          async glob(pattern) {
-            let files = await fastGlob(pattern, { cwd: root })
-            return Promise.all(
-              files.map(async (file) => {
-                let content = await fs.readFile(path.join(root, file), 'utf8')
-                return [
-                  file,
-                  // Drop license comment
-                  content.replace(/[\s\n]*\/\*![\s\S]*?\*\/[\s\n]*/g, ''),
-                ]
-              }),
-            )
-          },
-          async dumpFiles(pattern) {
-            let files = await context.fs.glob(pattern)
-            return `\n${files
-              .slice()
-              .sort((a: [string], z: [string]) => {
-                let aParts = a[0].split('/')
-                let zParts = z[0].split('/')
-
-                let aFile = aParts.at(-1)
-                let zFile = zParts.at(-1)
-
-                // Sort by depth, shallow first
-                if (aParts.length < zParts.length) return -1
-                if (aParts.length > zParts.length) return 1
-
-                // Sort by folder names, alphabetically
-                for (let i = 0; i < aParts.length - 1; i++) {
-                  let diff = aParts[i].localeCompare(zParts[i])
-                  if (diff !== 0) return diff
-                }
-
-                // Sort by filename, sort files named `index` before others
-                if (aFile?.startsWith('index') && !zFile?.startsWith('index')) return -1
-                if (zFile?.startsWith('index') && !aFile?.startsWith('index')) return 1
-
-                // Sort by filename, alphabetically
-                return a[0].localeCompare(z[0])
-              })
-              .map(([file, content]) => `--- ${file} ---\n${content || '<EMPTY>'}`)
-              .join('\n\n')
-              .trim()}\n`
-          },
-          async expectFileToContain(filePath, contents) {
-            return retryAssertion(async () => {
-              let fileContent = await this.read(filePath)
-              for (let content of Array.isArray(contents) ? contents : [contents]) {
-                if (content instanceof RegExp) {
-                  options.expect(fileContent).toMatch(content)
-                } else {
-                  options.expect(fileContent).toContain(content)
-                }
-              }
-            })
-          },
-          async expectFileNotToContain(filePath, contents) {
-            return retryAssertion(async () => {
-              let fileContent = await this.read(filePath)
-              for (let content of contents) {
-                options.expect(fileContent).not.toContain(content)
-              }
-            })
-          },
-        },
-      } satisfies TestContext
-
-      config.fs['.gitignore'] ??= txt`
-        node_modules/
-      `
-
-      // Disable Git's automatic line ending conversion in these throwaway test
-      // repositories. Tools like pnpm write files (e.g. `pnpm-lock.yaml`) with
-      // LF endings, which on Windows (where `core.autocrlf=true` is common)
-      // makes Git emit noisy "LF will be replaced by CRLF" warnings when it
-      // touches those files.
-      config.fs['.gitattributes'] ??= txt`
-        * -text
-      `
-
-      // Ensure there is always a root `pnpm-workspace.yaml` so that transitive
-      // dependency overrides (and the build allow list) are injected into it.
-      // As of pnpm v10, these can no longer live in the `pnpm.overrides` field
-      // of `package.json`.
-      config.fs['pnpm-workspace.yaml'] ??= ''
-
-      for (let [filename, content] of Object.entries(config.fs)) {
-        if (content.toString().startsWith('symlink:')) {
-          // The symlink path is relative to the target destination's path
-          let target = path.join(
-            filename,
-            content.toString().slice('symlink:'.length), // Relative path
-          )
-
-          await context.fs.symlink(target, filename)
-        } else {
-          await context.fs.write(filename, content)
-        }
-      }
-
-      let shouldInstallDependencies = config.installDependencies ?? true
-
-      try {
-        // Every test project gets its own root `pnpm-workspace.yaml` (see
-        // above). This makes the test directory its own workspace root, so even
-        // in debug mode — where the directory lives inside this repository's
-        // pnpm workspace — `pnpm install` won't attach to the parent workspace.
-        if (shouldInstallDependencies) {
-          await context.exec(`pnpm install`)
-        }
-      } catch (error: any) {
-        console.error(error)
-        console.error(error.stdout?.toString())
-        console.error(error.stderr?.toString())
-        throw error
-      }
-
-      let disposables: (() => Promise<void>)[] = []
-
-      async function dispose() {
-        let results = await Promise.allSettled(disposables.map((dispose) => dispose()))
-
-        if (!debug) {
-          await gracefullyRemove(root)
-        }
-
-        let errors = results.flatMap((result) =>
-          result.status === 'rejected' ? [result.reason] : [],
-        )
-        if (errors.length > 0) {
-          throw new AggregateError(errors, 'Failed to clean up spawned processes')
-        }
-      }
-
-      options.onTestFinished(dispose)
-
-      // Make it a git repository, and commit all files
-      if (only || debug) {
-        try {
-          await context.exec('git init', { cwd: root })
-          await context.exec('git add --all', { cwd: root })
-          await context.exec('git commit -m "before migration" --allow-empty', { cwd: root })
-        } catch (error: any) {
-          console.error(error)
-          console.error(error.stdout?.toString())
-          console.error(error.stderr?.toString())
-          throw error
-        }
-      }
-
-      return await testCallback(context)
-    },
-  )
-}
-test.only = (name: string, config: TestConfig, testCallback: TestCallback) => {
-  return test(name, config, testCallback, { only: true })
-}
-test.skip = (name: string, config: TestConfig, testCallback: TestCallback) => {
-  return test(name, config, testCallback, { skip: true })
-}
-test.concurrent = (name: string, config: TestConfig, testCallback: TestCallback) => {
-  return test(name, config, testCallback, { concurrent: true })
-}
-test.debug = (name: string, config: TestConfig, testCallback: TestCallback) => {
-  return test(name, config, testCallback, { debug: true })
-}
-
-// Maps package names to their tarball filenames. See scripts/pack-packages.ts
-// for more details.
-function pkgToFilename(name: string) {
-  return `${name.replace('@', '').replace('/', '-')}.tgz`
-}
-
-async function overwriteVersionsInPackageJson(content: string): Promise<string> {
-  let json = JSON.parse(content)
-
-  // Resolve all workspace:^ versions to local tarballs
-  for (let key of ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']) {
-    let dependencies = json[key] || {}
-    for (let dependency in dependencies) {
-      if (dependencies[dependency] === 'workspace:^') {
-        dependencies[dependency] = resolveVersion(dependency)
-      }
-    }
-  }
-
-  return JSON.stringify(json, null, 2)
-}
-
-function overwriteVersionsInPnpmWorkspace(content: string): string {
-  let workspace = content.trim() === '' ? {} : Yaml.parse(content)
-
-  // Inherit information from the root workspace
-  workspace.allowBuilds = {
-    ...ROOT_PNPM_WORKSPACE.allowBuilds,
-    ...workspace.allowBuilds,
-  }
-
-  // Inject transitive dependency overwrite. This is necessary because
-  // @tailwindcss/vite internally depends on a specific version of
-  // @tailwindcss/oxide and we instead want to resolve it to the locally built
-  // version.
-  //
-  // As of pnpm v10, the `pnpm.overrides` field in `package.json` is no longer
-  // read. Overrides have to be defined in `pnpm-workspace.yaml` instead.
-  workspace.overrides ||= {}
-  for (let pkg of PUBLIC_PACKAGES) {
-    if (pkg === 'tailwindcss') {
-      // We want to be explicit about the `tailwindcss` package so our tests can
-      // also import v3 without conflicting v4 tarballs.
-      workspace.overrides['@tailwindcss/node>tailwindcss'] = resolveVersion(pkg)
-      workspace.overrides['@tailwindcss/upgrade>tailwindcss'] = resolveVersion(pkg)
-      workspace.overrides['@tailwindcss/cli>tailwindcss'] = resolveVersion(pkg)
-      workspace.overrides['@tailwindcss/postcss>tailwindcss'] = resolveVersion(pkg)
-      workspace.overrides['@tailwindcss/turbopack>tailwindcss'] = resolveVersion(pkg)
-      workspace.overrides['@tailwindcss/vite>tailwindcss'] = resolveVersion(pkg)
-      workspace.overrides['@tailwindcss/webpack>tailwindcss'] = resolveVersion(pkg)
-    } else {
-      workspace.overrides[pkg] = resolveVersion(pkg)
-    }
-  }
-
-  return Yaml.stringify(workspace)
-}
-
-function resolveVersion(dependency: string) {
-  let tarball = path.join(REPO_ROOT, 'dist', pkgToFilename(dependency))
-  return `file:${tarball}`
-}
-
-export function stripTailwindComment(content: string) {
-  return content.replace(/\/\*! tailwindcss .*? \*\//g, '').trim()
-}
-
-export let svg = dedent
-export let css = dedent
-export let html = dedent
-export let ts = dedent
-export let js = dedent
-export let jsx = dedent
-export let json = dedent
-export let yaml = dedent
-export let txt = dedent
-
-export function binary(str: string | TemplateStringsArray, ...values: unknown[]): Uint8Array {
-  let base64 = typeof str === 'string' ? str : String.raw(str, ...values)
-
-  return Uint8Array.from(atob(base64), (c) => c.charCodeAt(0))
-}
-
-export function candidate(strings: TemplateStringsArray, ...values: any[]) {
-  let output: string[] = []
-  for (let i = 0; i < strings.length; i++) {
-    output.push(strings[i])
-    if (i < values.length) {
-      output.push(values[i])
-    }
-  }
-
-  return `.${escape(output.join('').trim())}`
-}
-
-export async function retryAssertion<T>(
-  fn: () => Promise<T>,
-  { timeout = ASSERTION_TIMEOUT, delay = 5 }: { timeout?: number; delay?: number } = {},
-) {
-  let end = Date.now() + timeout
-  let error: any
-  while (Date.now() < end) {
-    try {
-      return await fn()
-    } catch (err) {
-      Error.captureStackTrace(err, retryAssertion)
-      error = err
-      await new Promise((resolve) => setTimeout(resolve, delay))
-    }
-  }
-  throw error
-}
-
-export async function fetchStyles(base: string, path = '/'): Promise<string> {
-  while (base.endsWith('/')) {
-    base = base.slice(0, -1)
-  }
-
-  let index = await fetch(`${base}${path}`)
-  let html = await index.text()
-
-  let linkRegex = /<link rel="stylesheet" href="([a-zA-Z0-9/_.?=%-]+)"/gi
-  let styleRegex = /<style\b[^>]*>([\s\S]*?)<\/style>/gi
-
-  let stylesheets: string[] = []
-
-  let paths: string[] = []
-  for (let match of html.matchAll(linkRegex)) {
-    let path: string = match[1]
-    if (path.startsWith('./')) {
-      path = path.slice(1)
-    }
-    paths.push(path)
-  }
-  stylesheets.push(
-    ...(await Promise.all(
-      paths.map(async (path) => {
-        let css = await fetch(`${base}${path}`, {
-          headers: {
-            Accept: 'text/css',
-          },
-        })
-        return await css.text()
-      }),
-    )),
-  )
-
-  for (let match of html.matchAll(styleRegex)) {
-    stylesheets.push(match[1])
-  }
-
-  return stylesheets.reduce((acc, css) => {
-    if (acc.length > 0) acc += '\n'
-    acc += css
-    return acc
-  }, '')
-}
-
-export async function getRandomPort() {
-  return new Promise<number>((resolve, reject) => {
-    let server = createServer()
-    server.unref()
-    server.on('error', reject)
-    server.listen(0, '127.0.0.1', () => {
-      let address = server.address()
-      server.close(() => {
-        if (address && typeof address === 'object') {
-          resolve(address.port)
-        } else {
-          reject(new Error('Unable to allocate random port'))
-        }
-      })
-    })
-  })
-}
-
-async function killProcessTree(child: ChildProcess) {
-  if (child.exitCode !== null || child.signalCode !== null || child.pid === undefined) {
-    return
-  }
-
-  if (IS_WINDOWS) {
-    await execFileAsync('taskkill', ['/pid', String(child.pid), '/T', '/F'], {
-      timeout: ASSERTION_TIMEOUT,
-      windowsHide: true,
-    }).catch(() => {})
-    return
-  }
-
-  try {
-    process.kill(-child.pid, 'SIGTERM')
-  } catch (error: any) {
-    if (error?.code !== 'ESRCH') {
-      child.kill()
-    }
-  }
-}
-
-function forceKillProcessTree(child: ChildProcess) {
-  if (child.exitCode !== null || child.signalCode !== null || child.pid === undefined) {
-    return
-  }
-
-  if (IS_WINDOWS) {
-    execFile('taskkill', ['/pid', String(child.pid), '/T', '/F'], { windowsHide: true }, () => {})
-    return
-  }
-
-  try {
-    process.kill(-child.pid, 'SIGKILL')
-  } catch (error: any) {
-    if (error?.code !== 'ESRCH') {
-      child.kill('SIGKILL')
-    }
-  }
-}
-
-async function gracefullyRemove(dir: string) {
-  // Skip removing the directory in CI because it can stall on Windows
-  if (!process.env.CI) {
-    await fs.rm(dir, { recursive: true, force: true }).catch((error) => {
-      console.log(`Failed to remove ${dir}`, error)
-    })
-  }
-}
-
-const SOURCE_MAP_COMMENT = /^\/\*# sourceMappingURL=data:application\/json;base64,(.*) \*\/$/
-
-export interface SourceMap {
-  at(
-    line: number,
-    column: number,
-  ): {
-    source: string | null
-    original: string
-    generated: string
-  }
-}
-
-interface SourceMapOptions {
-  /**
-   * A raw source map
-   *
-   * This may be a string or an object. Strings will be decoded.
-   */
-  map: string | object
-
-  /**
-   * The content of the generated file the source map is for
-   */
-  content: string
-
-  /**
-   * The encoding of the source map
-   *
-   * Can be used to decode a base64 map (e.g. an inline source map URI)
-   */
-  encoding?: BufferEncoding
-}
-
-function parseSourceMap(opts: string | SourceMapOptions): SourceMap {
-  if (typeof opts === 'string') {
-    let lines = opts.trimEnd().split('\n')
-    let comment = lines.at(-1) ?? ''
-    let map = String(comment).match(SOURCE_MAP_COMMENT)?.[1] ?? null
-    if (!map) throw new Error('No source map comment found')
-
-    return parseSourceMap({
-      map,
-      content: lines.slice(0, -1).join('\n'),
-      encoding: 'base64',
-    })
-  }
-
-  let rawMap: RawSourceMap
-  let content = opts.content
-
-  if (typeof opts.map === 'object') {
-    rawMap = opts.map as RawSourceMap
-  } else {
-    rawMap = JSON.parse(Buffer.from(opts.map, opts.encoding ?? 'utf-8').toString())
-  }
-
-  let map = new SourceMapConsumer(rawMap)
-  let generatedTable = createLineTable(content)
-
-  return {
-    at(line: number, column: number) {
-      let pos = map.originalPositionFor({ line, column })
-      let source = pos.source ? map.sourceContentFor(pos.source) : null
-      let originalTable = createLineTable(source ?? '')
-      let originalOffset = originalTable.findOffset(pos)
-      let generatedOffset = generatedTable.findOffset({ line, column })
-
-      return {
-        source: pos.source,
-        original: source
-          ? source.slice(originalOffset, originalOffset + 10).trim() + '...'
-          : '(none)',
-        generated: content.slice(generatedOffset, generatedOffset + 10).trim() + '...',
-      }
-    },
-  }
-}
diff --git a/integrations/vite/astro.test.ts b/integrations/vite/astro.test.ts
deleted file mode 100644
index f828b5071..000000000
--- a/integrations/vite/astro.test.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import { candidate, css, fetchStyles, html, js, json, retryAssertion, test, ts } from '../utils'
-
-test(
-  'dev mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "astro": "^4.15.2",
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'astro.config.mjs': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'astro/config'
-
-        // https://astro.build/config
-        export default defineConfig({
-          vite: { plugins: [tailwindcss()] },
-          build: { inlineStylesheets: 'never' },
-        })
-      `,
-      'src/pages/index.astro': html`
-       <div class="underline">Hello, world!</div>
-
-        <style is:global>
-          @import 'tailwindcss';
-        </style>
-      `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm astro dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await process.onStdout((m) => m.includes('watching for file changes'))
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`underline`)
-    })
-
-    await retryAssertion(async () => {
-      await fs.write(
-        'src/pages/index.astro',
-        html`
-          <div class="underline font-bold">Hello, world!</div>
-
-          <style is:global>
-            @import 'tailwindcss';
-          </style>
-      `,
-      )
-
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(candidate`font-bold`)
-    })
-  },
-)
-
-test(
-  'build mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "astro": "^4.15.2",
-            "react": "^19",
-            "react-dom": "^19",
-            "@astrojs/react": "^4",
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'astro.config.mjs': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import react from '@astrojs/react'
-        import { defineConfig } from 'astro/config'
-
-        // https://astro.build/config
-        export default defineConfig({
-          vite: { plugins: [tailwindcss()] },
-          integrations: [react()],
-          build: { inlineStylesheets: 'never' },
-        })
-      `,
-      // prettier-ignore
-      'src/pages/index.astro': html`
-        ---
-        import ClientOnly from './client-only';
-        ---
-
-        <div class="underline">Hello, world!</div>
-
-        <ClientOnly client:only="react" />
-
-        <style is:global>
-          @import 'tailwindcss';
-        </style>
-      `,
-      'src/pages/client-only.jsx': js`
-        export default function ClientOnly() {
-          return <div className="overline">Hello, world!</div>
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm astro build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-
-    await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`overline`])
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/issues/19677
-test(
-  'import aliases should work in <style> blocks',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "astro": "^5",
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'astro.config.mjs': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'astro/config'
-
-        // https://astro.build/config
-        export default defineConfig({
-          vite: { plugins: [tailwindcss()] },
-        })
-      `,
-      'tsconfig.json': json`
-        {
-          "extends": "astro/tsconfigs/strict",
-          "include": [".astro/types.d.ts", "**/*"],
-          "exclude": ["dist"],
-          "compilerOptions": {
-            "paths": {
-              "@styles/*": ["./src/styles/*"]
-            }
-          }
-        }
-      `,
-      // prettier-ignore
-      'src/pages/index.astro': html`
-        ---
-        import '@styles/global.css'
-        ---
-
-        <html lang="en">
-          <head>
-            <meta charset="utf-8" />
-            <meta name="viewport" content="width=device-width" />
-            <meta name="generator" content={Astro.generator} />
-            <title>Astro</title>
-            <style>
-              @reference "@styles/global.css";
-            </style>
-          </head>
-          <body>
-            <h1 class="underline">Astro</h1>
-          </body>
-        </html>
-      `,
-      'src/styles/global.css': css`@import 'tailwindcss';`,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm astro build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-
-    await fs.expectFileToContain(files[0][0], [candidate`underline`])
-  },
-)
diff --git a/integrations/vite/bundled-dev.test.ts b/integrations/vite/bundled-dev.test.ts
deleted file mode 100644
index 8ba1b6b73..000000000
--- a/integrations/vite/bundled-dev.test.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import path from 'node:path'
-import { candidate, css, html, json, retryAssertion, test, ts, txt, yaml } from '../utils'
-
-// Vite's experimental `bundledDev` mode invokes the `hotUpdate` hook without a
-// `server`, which used to crash the plugin on every file edit.
-//
-// - https://github.com/tailwindlabs/tailwindcss/issues/20378
-// - https://vite.dev/blog/announcing-vite8-1#experimental-bundled-dev-mode
-test(
-  'dev mode (experimental `bundledDev`)',
-  {
-    fs: {
-      'package.json': json`{}`,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - project-a
-      `,
-      'project-a/package.json': txt`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8.1"
-          }
-        }
-      `,
-      'project-a/vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          experimental: {
-            bundledDev: true,
-          },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'project-a/index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="underline">Hello, world!</div>
-        </body>
-      `,
-      'project-a/src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-        @source '../../project-b/src/**/*.html';
-      `,
-      'project-b/src/index.html': html`
-        <div class="flex" />
-      `,
-    },
-  },
-  async ({ root, spawn, fs, expect }) => {
-    let process = await spawn('pnpm vite dev', {
-      cwd: path.join(root, 'project-a'),
-      env: {
-        // Some CI machines have an upstream rolldown bug where its file watcher
-        // never delivers a single event. The debug output is the only way to
-        // tell that apart from a real regression (see below).
-        DEBUG: 'vite:full-bundle-mode',
-      },
-    })
-
-    // Any debug output beyond the "INITIAL:" startup lines proves rolldown's
-    // watcher delivered at least one file event.
-    let watcherAlive = false
-
-    // `hotUpdate` errors don't kill the dev server, they are only printed to
-    // stderr. Track them explicitly so a crash fails the test even if the
-    // rebuild happens to succeed anyway.
-    let pluginErrors: string[] = []
-    process.onStderr((message) => {
-      if (message.includes('vite:full-bundle-mode')) {
-        if (!message.includes('INITIAL:')) watcherAlive = true
-      } else if (message.includes('@tailwindcss/vite')) {
-        pluginErrors.push(message)
-      }
-      return false
-    })
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    // In `bundledDev` mode the stylesheet is not served separately. Instead the
-    // generated CSS is embedded in the bundled JS and injected at runtime, so
-    // extract the bundle from the served HTML. While the bundle is being built,
-    // Vite serves a temporary fallback page instead.
-    //
-    // The bundle can be split into multiple chunks (e.g. the HMR client runtime
-    // and the app itself), and the chunk containing the CSS is not always the
-    // first one, so fetch every referenced script and stylesheet.
-    async function fetchBundledStyles(): Promise<string> {
-      let index = await fetch(`${url}/`)
-      let html = await index.text()
-      if (html.includes('__vite_is_fallback_page__')) {
-        throw new Error('Bundling still in progress')
-      }
-
-      let sources = [
-        ...html.matchAll(/<script[^>]*\ssrc="([^"]+)"/g),
-        ...html.matchAll(/<link[^>]*\srel="stylesheet"[^>]*\shref="([^"]+)"/g),
-      ].map((match) => match[1])
-      if (sources.length === 0) throw new Error(`No scripts or stylesheets found in:\n\n${html}`)
-
-      let contents = await Promise.all(
-        sources.map(async (src) => {
-          let response = await fetch(new URL(src, `${url}/`))
-          return await response.text()
-        }),
-      )
-      return contents.join('\n')
-    }
-
-    await retryAssertion(
-      async () => {
-        let styles = await fetchBundledStyles()
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
-      },
-      { timeout: 10_000, delay: 100 },
-    )
-
-    // Edit a module file and a manually `@source`d file. Without a connected
-    // HMR websocket client (this test only uses HTTP fetches), a file change
-    // does not trigger an eager rebuild — it only marks the bundle as stale,
-    // and the next fetch kicks off the rebuild. So poll with fetches without
-    // touching the files again: rewriting would re-mark the bundle stale right
-    // before each fetch and the rebuild could never be observed.
-    await fs.write(
-      'project-a/index.html',
-      html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="underline m-2">Hello, world!</div>
-        </body>
-      `,
-    )
-
-    await fs.write('project-b/src/index.html', html`
-      <div class="flex font-bold" />
-    `)
-
-    try {
-      await retryAssertion(
-        async () => {
-          let styles = await fetchBundledStyles()
-          expect(styles).toContain(candidate`underline`)
-          expect(styles).toContain(candidate`flex`)
-          expect(styles).toContain(candidate`m-2`)
-          expect(styles).toContain(candidate`font-bold`)
-        },
-        { timeout: 15_000, delay: 100 },
-      )
-    } catch (error) {
-      // If rolldown's watcher delivered any file event, the updates were
-      // genuinely dropped somewhere along the way — a real failure.
-      if (watcherAlive) throw error
-
-      // Otherwise the watcher never delivered a single event, so the updates
-      // can never be observed no matter how long we wait — an upstream
-      // rolldown bug on some CI machines, not a plugin regression. The crash
-      // regression this test guards is still covered: `hotUpdate` is driven
-      // by Vite's own (working) chokidar watcher and asserted via
-      // `pluginErrors` below.
-      //
-      // Skipping is only sound while the server still healthily serves the
-      // original bundle. If it stopped serving (crashed, or wedged on the
-      // fallback page), that's real breakage a silent watcher must not mask.
-      console.log(error)
-      let styles = await fetchBundledStyles()
-      expect(styles).toContain(candidate`underline`)
-      expect(styles).toContain(candidate`flex`)
-      console.warn(
-        'Skipping update assertions: rolldown’s file watcher delivered no events on this machine.',
-      )
-    }
-
-    expect(pluginErrors).toEqual([])
-  },
-)
diff --git a/integrations/vite/config.test.ts b/integrations/vite/config.test.ts
deleted file mode 100644
index 0ac68f5e9..000000000
--- a/integrations/vite/config.test.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-import { candidate, css, fetchStyles, html, js, json, retryAssertion, test, ts } from '../utils'
-
-test(
-  'Config files (CJS)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="text-primary"></div>
-        </body>
-      `,
-      'tailwind.config.cjs': js`
-        module.exports = {
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.cjs';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [
-      //
-      candidate`text-primary`,
-    ])
-  },
-)
-
-test(
-  'Config files (ESM)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="text-primary"></div>
-        </body>
-      `,
-      'tailwind.config.js': js`
-        export default {
-          theme: {
-            extend: {
-              colors: {
-                primary: 'blue',
-              },
-            },
-          },
-        }
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.js';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [
-      //
-      candidate`text-primary`,
-    ])
-  },
-)
-
-test(
-  'Config files (CJS, dev mode)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="text-primary"></div>
-        </body>
-      `,
-      'tailwind.config.cjs': js`
-        const myColor = require('./my-color.cjs')
-        module.exports = {
-          theme: {
-            extend: {
-              colors: {
-                primary: myColor,
-              },
-            },
-          },
-        }
-      `,
-      'my-color.cjs': js`module.exports = 'blue'`,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.cjs';
-      `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url, '/index.html')
-      expect(css).toContain(candidate`text-primary`)
-      expect(css).toContain('color: blue')
-    })
-
-    await retryAssertion(async () => {
-      await fs.write('my-color.cjs', js`module.exports = 'red'`)
-
-      let css = await fetchStyles(url, '/index.html')
-      expect(css).toContain(candidate`text-primary`)
-      expect(css).toContain('color: red')
-    })
-  },
-)
-
-test(
-  'Config files (ESM, dev mode)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="text-primary"></div>
-        </body>
-      `,
-      'tailwind.config.mjs': js`
-        import myColor from './my-color.mjs'
-        export default {
-          theme: {
-            extend: {
-              colors: {
-                primary: myColor,
-              },
-            },
-          },
-        }
-      `,
-      'my-color.mjs': js`export default 'blue'`,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @config '../tailwind.config.mjs';
-      `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url, '/index.html')
-      expect(css).toContain(candidate`text-primary`)
-      expect(css).toContain('color: blue')
-    })
-
-    await retryAssertion(async () => {
-      await fs.write('my-color.mjs', js`export default 'red'`)
-
-      let css = await fetchStyles(url, '/index.html')
-      expect(css).toContain(candidate`text-primary`)
-      expect(css).toContain('color: red')
-    })
-  },
-)
diff --git a/integrations/vite/css-modules.test.ts b/integrations/vite/css-modules.test.ts
deleted file mode 100644
index a680ab9b7..000000000
--- a/integrations/vite/css-modules.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { describe } from 'vitest'
-import { css, html, test, ts, txt } from '../utils'
-
-describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
-  test(
-    `dev mode`,
-    {
-      fs: {
-        'package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'index.html': html`
-          <head>
-            <script type="module" src="/src/component.ts"></script>
-          </head>
-          <body>
-            <div id="root" />
-          </body>
-        `,
-        'src/component.ts': ts`
-          import { foo } from './component.module.css'
-          let root = document.getElementById('root')
-          root.className = foo
-          root.innerText = 'Hello, world!'
-        `,
-        'src/component.module.css': css`
-          @import 'tailwindcss/utilities';
-
-          .foo {
-            @apply underline;
-          }
-        `,
-      },
-    },
-    async ({ exec, fs, expect }) => {
-      await exec(`pnpm vite build`)
-
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [filename] = files[0]
-
-      await fs.expectFileToContain(filename, [/text-decoration-line: underline;/gi])
-    },
-  )
-})
diff --git a/integrations/vite/html-style-blocks.test.ts b/integrations/vite/html-style-blocks.test.ts
deleted file mode 100644
index 22bb91d78..000000000
--- a/integrations/vite/html-style-blocks.test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { html, json, test, ts } from '../utils'
-
-test(
-  'transforms html style blocks',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import { defineConfig } from 'vite'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig({
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <!doctype html>
-        <html>
-          <body>
-            <div class="foo"></div>
-            <style>
-              .foo {
-                @apply underline;
-              }
-            </style>
-          </body>
-        </html>
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    expect(await fs.dumpFiles('dist/*.html')).toMatchInlineSnapshot(`
-      "
-      --- dist/index.html ---
-      <!doctype html>
-      <html>
-        <body>
-          <div class="foo"></div>
-          <style>.foo{text-decoration-line:underline}</style>
-        </body>
-      </html>
-      "
-    `)
-  },
-)
diff --git a/integrations/vite/ignored-packages.test.ts b/integrations/vite/ignored-packages.test.ts
deleted file mode 100644
index 1efa9dc61..000000000
--- a/integrations/vite/ignored-packages.test.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils'
-
-const WORKSPACE = {
-  fs: {
-    'package.json': txt`
-    {
-      "type": "module",
-      "dependencies": {
-        "tailwind-merge": "^2",
-        "@tailwindcss/vite": "workspace:^",
-        "tailwindcss": "workspace:^"
-      },
-      "devDependencies": {
-        "vite": "^7"
-      }
-    }
-  `,
-    'vite.config.ts': ts`
-      import tailwindcss from '@tailwindcss/vite'
-      import { defineConfig } from 'vite'
-
-      export default defineConfig({
-        build: { cssMinify: false },
-        plugins: [tailwindcss()],
-      })
-    `,
-    'index.html': html`
-      <head>
-        <link rel="stylesheet" href="./src/index.css" />
-        <script type="module" src="./src/index.js"></script>
-      </head>
-    `,
-    'src/index.js': js`
-      import { twMerge } from 'tailwind-merge'
-
-      twMerge('underline')
-
-      console.log('underline')
-    `,
-    'src/index.css': css`@import 'tailwindcss/utilities' layer(utilities);`,
-  },
-}
-
-test(
-  'does not scan tailwind-merge in production builds',
-  WORKSPACE,
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [, content] = files[0]
-
-    expect(content).toMatchInlineSnapshot(`
-      "@layer utilities {
-        .underline {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  },
-)
-
-test('does not scan tailwind-merge in dev builds', WORKSPACE, async ({ spawn, expect }) => {
-  let process = await spawn('pnpm vite dev')
-  await process.onStdout((m) => m.includes('ready in'))
-
-  let url = ''
-  await process.onStdout((m) => {
-    let match = /Local:\s*(http.*)\//.exec(m)
-    if (match) url = match[1]
-    return Boolean(url)
-  })
-
-  await retryAssertion(async () => {
-    let styles = await fetchStyles(url, '/index.html')
-
-    expect(styles).not.toContain(candidate`flex`)
-  })
-})
diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts
deleted file mode 100644
index c346f8e37..000000000
--- a/integrations/vite/index.test.ts
+++ /dev/null
@@ -1,1726 +0,0 @@
-import path from 'node:path'
-import { describe } from 'vitest'
-import {
-  candidate,
-  css,
-  fetchStyles,
-  html,
-  js,
-  json,
-  jsx,
-  retryAssertion,
-  test,
-  ts,
-  txt,
-  yaml,
-} from '../utils'
-
-describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
-  test(
-    `production build`,
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'project-a/vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'project-a/index.html': html`
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="underline m-2">Hello, world!</div>
-          </body>
-        `,
-        'project-a/tailwind.config.js': js`
-          export default {
-            content: ['../project-b/src/**/*.js'],
-          }
-        `,
-        'project-a/src/index.css': css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-          @config '../tailwind.config.js';
-          @source '../../project-b/src/**/*.html';
-        `,
-        'project-b/src/index.html': html`
-          <div class="flex" />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, fs, exec, expect }) => {
-      await exec('pnpm vite build', { cwd: path.join(root, 'project-a') })
-
-      let files = await fs.glob('project-a/dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [filename] = files[0]
-
-      await fs.expectFileToContain(filename, [
-        candidate`underline`,
-        candidate`m-2`,
-        candidate`flex`,
-        candidate`content-['project-b/src/index.js']`,
-      ])
-    },
-  )
-
-  test(
-    'dev mode',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'project-a/vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'project-a/index.html': html`
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="underline">Hello, world!</div>
-          </body>
-        `,
-        'project-a/about.html': html`
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="font-bold">Tailwind Labs</div>
-          </body>
-        `,
-        'project-a/tailwind.config.js': js`
-          export default {
-            content: ['../project-b/src/**/*.js'],
-          }
-        `,
-        'project-a/src/index.css': css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-          @import './imported.css';
-          @config '../tailwind.config.js';
-          @source '../../project-b/src/**/*.html';
-        `,
-        'project-a/src/imported.css': css`
-          .imported {
-            color: red;
-          }
-        `,
-        'project-b/src/index.html': html`
-          <div class="flex" />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, spawn, fs, expect }) => {
-      let process = await spawn('pnpm vite dev', {
-        cwd: path.join(root, 'project-a'),
-      })
-      await process.onStdout((m) => m.includes('ready in'))
-
-      let url = ''
-      await process.onStdout((m) => {
-        let match = /Local:\s*(http.*)\//.exec(m)
-        if (match) url = match[1]
-        return Boolean(url)
-      })
-
-      await retryAssertion(async () => {
-        let styles = await fetchStyles(url, '/index.html')
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
-        expect(styles).toContain(candidate`font-bold`)
-        expect(styles).toContain(candidate`imported`)
-      })
-
-      await retryAssertion(async () => {
-        // Updates are additive and cause new candidates to be added.
-        await fs.write(
-          'project-a/index.html',
-          html`
-            <head>
-              <link rel="stylesheet" href="./src/index.css" />
-            </head>
-            <body>
-              <div class="underline m-2">Hello, world!</div>
-            </body>
-          `,
-        )
-
-        let styles = await fetchStyles(url)
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
-        expect(styles).toContain(candidate`font-bold`)
-        expect(styles).toContain(candidate`imported`)
-        expect(styles).toContain(candidate`m-2`)
-      })
-
-      await retryAssertion(async () => {
-        // Manually added `@source`s are watched and trigger a rebuild
-        await fs.write(
-          'project-b/src/index.js',
-          js`
-            const className = "[.changed_&]:content-['project-b/src/index.js']"
-            module.exports = { className }
-          `,
-        )
-
-        let styles = await fetchStyles(url)
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
-        expect(styles).toContain(candidate`font-bold`)
-        expect(styles).toContain(candidate`imported`)
-        expect(styles).toContain(candidate`m-2`)
-        expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
-      })
-
-      await retryAssertion(async () => {
-        // After updates to the CSS file, all previous candidates should still be in
-        // the generated CSS
-        await fs.write(
-          'project-a/src/index.css',
-          css`
-            ${await fs.read('project-a/src/index.css')}
-
-            .red {
-              color: red;
-            }
-          `,
-        )
-
-        let styles = await fetchStyles(url)
-        expect(styles).toContain(candidate`red`)
-        expect(styles).toContain(candidate`flex`)
-        expect(styles).toContain(candidate`imported`)
-        expect(styles).toContain(candidate`m-2`)
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
-        expect(styles).toContain(candidate`font-bold`)
-      })
-
-      await retryAssertion(async () => {
-        // Trigger a partial rebuild for the next test
-        await fs.write(
-          'project-a/index.html',
-          html`
-            <head>
-              <link rel="stylesheet" href="./src/index.css" />
-            </head>
-            <body>
-              <div class="m-4">Hello, world!</div>
-            </body>
-          `,
-        )
-        let styles = await fetchStyles(url)
-        expect(styles).toContain(candidate`m-4`)
-      })
-
-      await retryAssertion(async () => {
-        // Changing an `@imported` CSS file after a partial rebuild also triggers the correct update
-        await fs.write(
-          'project-a/src/imported.css',
-          css`
-            .imported-updated {
-              color: red;
-            }
-          `,
-        )
-
-        let styles = await fetchStyles(url)
-        expect(styles).toContain(candidate`red`)
-        expect(styles).toContain(candidate`flex`)
-        expect(styles).toContain(candidate`m-2`)
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
-        expect(styles).toContain(candidate`font-bold`)
-        expect(styles).toContain(candidate`imported-updated`)
-      })
-    },
-  )
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/20346
-  test(
-    'dev mode + symlinked `@source` files pick up changes to the real file',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-            - packages/*
-        `,
-        'project-a/package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "repro-package": "workspace:*",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'project-a/vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'project-a/index.html': html`
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="underline">Hello, world!</div>
-          </body>
-        `,
-
-        // The `@source` points through the `node_modules` symlink that pnpm
-        // creates for the workspace package. Vite's file watcher ignores
-        // `node_modules` by default, so the symlinked path can not be watched.
-        // The real file (in `packages/repro-package`) has to be watched
-        // instead.
-        'project-a/src/index.css': css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-          @source '../node_modules/repro-package/source.html';
-        `,
-        'packages/repro-package/package.json': json`
-          {
-            "name": "repro-package",
-            "private": true,
-            "version": "1.0.0"
-          }
-        `,
-        'packages/repro-package/source.html': html`
-          <div class="content-['v1']">
-            Hello, world!
-          </div>
-        `,
-      },
-    },
-    async ({ root, spawn, fs, expect }) => {
-      let process = await spawn('pnpm vite dev', {
-        cwd: path.join(root, 'project-a'),
-      })
-      await process.onStdout((m) => m.includes('ready in'))
-
-      let url = ''
-      await process.onStdout((m) => {
-        let match = /Local:\s*(http.*)\//.exec(m)
-        if (match) url = match[1]
-        return Boolean(url)
-      })
-
-      await retryAssertion(async () => {
-        let styles = await fetchStyles(url, '/index.html')
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`content-['v1']`)
-      })
-
-      await retryAssertion(async () => {
-        // Changes to the real file (behind the symlink) should be picked up
-        await fs.write(
-          'packages/repro-package/source.html',
-          html`
-            <div class="content-['v1'] content-['v2']">
-              Hello, world!
-            </div>
-          `,
-        )
-
-        let styles = await fetchStyles(url)
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`content-['v1']`)
-        expect(styles).toContain(candidate`content-['v2']`)
-      })
-    },
-  )
-
-  test(
-    'watch mode',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'project-a/vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'project-a/index.html': html`
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="underline text-primary">Hello, world!</div>
-          </body>
-        `,
-        'project-a/tailwind.config.js': js`
-          export default {
-            content: ['../project-b/src/**/*.js'],
-          }
-        `,
-        'project-a/src/index.css': css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-          @import './custom-theme.css';
-          @config '../tailwind.config.js';
-          @source '../../project-b/src/**/*.html';
-        `,
-        'project-a/src/custom-theme.css': css`
-          /* Will be overwritten later */
-          @theme {
-            --color-primary: black;
-          }
-        `,
-        'project-b/src/index.html': html`
-          <div class="flex" />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, spawn, fs, expect }) => {
-      let process = await spawn('pnpm vite build --watch', {
-        cwd: path.join(root, 'project-a'),
-      })
-      await process.onStdout((m) => m.includes('built in'))
-
-      let filename = ''
-      await retryAssertion(async () => {
-        let files = await fs.glob('project-a/dist/**/*.css')
-        expect(files).toHaveLength(1)
-        filename = files[0][0]
-      })
-
-      await fs.expectFileToContain(filename, [
-        candidate`underline`,
-        candidate`flex`,
-        css`
-          .text-primary {
-            color: var(--color-primary);
-          }
-        `,
-      ])
-
-      await retryAssertion(async () => {
-        await fs.write(
-          'project-a/src/custom-theme.css',
-          css`
-            /* Overriding the primary color */
-            @theme {
-              --color-primary: red;
-            }
-          `,
-        )
-
-        let files = await fs.glob('project-a/dist/**/*.css')
-        expect(files).toHaveLength(1)
-        let [, styles] = files[0]
-
-        expect(styles).toContain(css`
-          .text-primary {
-            color: var(--color-primary);
-          }
-        `)
-      })
-
-      await retryAssertion(async () => {
-        // Updates are additive and cause new candidates to be added.
-        await fs.write(
-          'project-a/index.html',
-          html`
-            <head>
-              <link rel="stylesheet" href="./src/index.css" />
-            </head>
-            <body>
-              <div class="underline m-2">Hello, world!</div>
-            </body>
-          `,
-        )
-
-        let files = await fs.glob('project-a/dist/**/*.css')
-        expect(files).toHaveLength(1)
-        let [, styles] = files[0]
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
-        expect(styles).toContain(candidate`m-2`)
-      })
-
-      await retryAssertion(async () => {
-        // Manually added `@source`s are watched and trigger a rebuild
-        await fs.write(
-          'project-b/src/index.js',
-          js`
-            const className = "[.changed_&]:content-['project-b/src/index.js']"
-            module.exports = { className }
-          `,
-        )
-
-        let files = await fs.glob('project-a/dist/**/*.css')
-        expect(files).toHaveLength(1)
-        let [, styles] = files[0]
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
-        expect(styles).toContain(candidate`m-2`)
-        expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
-      })
-
-      await retryAssertion(async () => {
-        // After updates to the CSS file, all previous candidates should still be in
-        // the generated CSS
-        await fs.write(
-          'project-a/src/index.css',
-          css`
-            ${await fs.read('project-a/src/index.css')}
-
-            .red {
-              color: red;
-            }
-          `,
-        )
-
-        let files = await fs.glob('project-a/dist/**/*.css')
-        expect(files).toHaveLength(1)
-        let [, styles] = files[0]
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
-        expect(styles).toContain(candidate`m-2`)
-        expect(styles).toContain(candidate`[.changed_&]:content-['project-b/src/index.js']`)
-        expect(styles).toContain(candidate`red`)
-      })
-    },
-  )
-
-  describe.each([['^6'], ['7.0.8'], ['7.1.12'], ['7.3.1'], ['8.0.0']])(
-    'Using Vite %s',
-    (version) => {
-      test(
-        'external source file changes update the CSS',
-        {
-          fs: {
-            'package.json': json`{}`,
-            'pnpm-workspace.yaml': yaml`
-              #
-              packages:
-                - project-a
-            `,
-            'project-a/package.json': json`
-            {
-              "type": "module",
-              "dependencies": {
-                "@tailwindcss/vite": "workspace:^",
-                "tailwindcss": "workspace:^"
-              },
-              "devDependencies": {
-                ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-                "vite": "${version}"
-              }
-            }
-          `,
-            'project-a/vite.config.ts': ts`
-              import fs from 'node:fs'
-              import path from 'node:path'
-              import tailwindcss from '@tailwindcss/vite'
-              import { defineConfig } from 'vite'
-
-              export default defineConfig({
-                css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-                build: { cssMinify: false },
-                plugins: [tailwindcss()],
-                logLevel: 'info',
-              })
-            `,
-            'project-a/index.html': html`
-              <html>
-                <head>
-                  <link rel="stylesheet" href="./src/index.css" />
-                </head>
-                <body>
-                  <div id="app"></div>
-                  <script type="module" src="./src/main.ts"></script>
-                </body>
-              </html>
-            `,
-            'project-a/src/main.ts': jsx`import { classes } from './app'`,
-            'project-a/src/app.ts': jsx`export let classes = "content-['project-a/src/app.ts']"`,
-            'project-a/src/index.css': css`
-              @import 'tailwindcss';
-              @source '../../project-b/**/*.php';
-            `,
-            'project-b/src/index.php': html`
-              <div
-                class="content-['project-b/src/index.php']"
-              ></div>
-            `,
-          },
-        },
-        async ({ root, spawn, fs, expect }) => {
-          let process = await spawn('pnpm vite dev --debug hmr', {
-            cwd: path.join(root, 'project-a'),
-          })
-          await process.onStdout((m) => m.includes('ready in'))
-
-          let url = ''
-          await process.onStdout((m) => {
-            let match = /Local:\s*(http.*)\//.exec(m)
-            if (match) url = match[1]
-            return Boolean(url)
-          })
-
-          await retryAssertion(async () => {
-            let styles = await fetchStyles(url, '/index.html')
-            expect(styles).toContain(candidate`content-['project-b/src/index.php']`)
-          })
-
-          // Flush all messages so that we can be sure the next messages are
-          // from the file changes we're about to make
-          process.flush()
-
-          // Changing an external .php file hot-updates the generated CSS
-          {
-            await fs.write(
-              'project-b/src/index.php',
-              txt`<div class="content-['updated:project-b/src/index.php']"></div>`,
-            )
-
-            // On Vite < 7.1, Vite itself hard-invalidates watched files that
-            // aren't part of the module graph and reloads the page.
-            //
-            // On newer versions nothing reloads the page: the CSS hot-updates
-            // through the regular pipeline because the changed file is a
-            // watch dependency of the CSS root.
-            //
-            // Reloading the page for external template changes is the
-            // responsibility of the backend integration (e.g. `laravel-vite-plugin`'s `refresh` option, or `vite-plugin-full-reload`).
-            //
-            // https://github.com/tailwindlabs/tailwindcss/issues/20411
-            if (version === '^6' || version === '7.0.8') {
-              await process.onStdout((m) => m.includes('page reload') && m.includes('index.php'))
-            } else {
-              await process.onStdout((m) => m.includes('hmr update') && m.includes('index.css'))
-            }
-
-            // Ensure the styles were regenerated with the new content
-            let styles = await fetchStyles(url, '/index.html')
-            expect(styles).toContain(candidate`content-['updated:project-b/src/index.php']`)
-          }
-        },
-      )
-    },
-  )
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/20320
-  // https://github.com/tailwindlabs/tailwindcss/issues/19903
-  test(
-    'editing scanned files that Vite can process as modules does not trigger a full reload',
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': json`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^8"
-            }
-          }
-        `,
-        'project-a/vite.config.ts': ts`
-          import fs from 'node:fs'
-          import path from 'node:path'
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [
-              tailwindcss(),
-              {
-                // A plugin that processes a custom file type into a JS
-                // module, similar to e.g. \`.vue\` or \`.svelte\` files
-                name: 'custom-file-type',
-                transform(code, id) {
-                  if (id.endsWith('.custom')) {
-                    return { code: 'export default ' + JSON.stringify(code), map: null }
-                  }
-                },
-              },
-              {
-                // Log all HMR payloads to a file so the test can assert on
-                // them
-                name: 'hmr-wiretap',
-                configureServer(server) {
-                  let logFile = path.resolve('hmr.log')
-                  fs.writeFileSync(logFile, '')
-                  for (let environment of Object.values(server.environments)) {
-                    let send = environment.hot.send.bind(environment.hot)
-                    environment.hot.send = (payload) => {
-                      fs.appendFileSync(logFile, JSON.stringify(payload) + '\\n')
-                      return send(payload)
-                    }
-                  }
-                },
-              },
-            ],
-          })
-        `,
-        'project-a/index.html': html`
-          <html>
-            <head>
-              <link rel="stylesheet" href="./src/index.css" />
-            </head>
-            <body>
-              <div id="app"></div>
-              <script type="module" src="./src/main.ts"></script>
-            </body>
-          </html>
-        `,
-        'project-a/src/main.ts': ts`
-          import compA from './comp-a.custom'
-          import snippet from './snippet.php?raw'
-          console.log(compA, snippet)
-        `,
-        'project-a/src/snippet.php': html`
-          <div
-            class="content-['src/snippet.php']"
-          ></div>
-        `,
-        'project-a/src/comp-a.custom': html`
-          <div
-            class="content-['src/comp-a.custom']"
-          ></div>
-        `,
-        'project-a/src/comp-b.custom': html`
-          <div
-            class="content-['src/comp-b.custom']"
-          ></div>
-        `,
-        'project-a/src/lazy.tsx': jsx`
-          export default function Lazy() {
-            return <div className="content-['src/lazy.tsx']" />
-          }
-        `,
-        'project-a/src/unimported.css': css`
-          .unimported {
-            color: red;
-          }
-        `,
-        'project-a/src/index.css': css`
-          @import 'tailwindcss';
-          @source '../../project-b/**/*.php';
-        `,
-        'project-b/src/index.php': html`
-          <div
-            class="content-['project-b/src/index.php']"
-          ></div>
-        `,
-      },
-    },
-    async ({ root, spawn, fs, expect }) => {
-      let process = await spawn('pnpm vite dev', {
-        cwd: path.join(root, 'project-a'),
-      })
-      await process.onStdout((m) => m.includes('ready in'))
-
-      let url = ''
-      await process.onStdout((m) => {
-        let match = /Local:\s*(http.*)\//.exec(m)
-        if (match) url = match[1]
-        return Boolean(url)
-      })
-
-      await retryAssertion(async () => {
-        let styles = await fetchStyles(url, '/index.html')
-        expect(styles).toContain(candidate`content-['src/lazy.tsx']`)
-        expect(styles).toContain(candidate`content-['src/comp-b.custom']`)
-        expect(styles).toContain(candidate`content-['project-b/src/index.php']`)
-      })
-
-      // Load `main.ts`, `comp-a.custom`, and `snippet.php?raw` as real
-      // modules, like a browser visiting the page would
-      await fetch(`${url}/src/main.ts`)
-      await fetch(`${url}/src/comp-a.custom?import`)
-      await fetch(`${url}/src/snippet.php?raw`)
-
-      // Changing a scanned `.tsx` file that is not part of the module graph
-      // (e.g. a lazily-loaded route that hasn't been visited yet) should not
-      // trigger a full reload, but new classes should still apply
-      //
-      // https://github.com/tailwindlabs/tailwindcss/issues/20320
-      {
-        await fs.write(
-          'project-a/src/lazy.tsx',
-          jsx`
-            export default function Lazy() {
-              return <div className="content-['updated:src/lazy.tsx']" />
-            }
-          `,
-        )
-
-        await retryAssertion(async () => {
-          let styles = await fetchStyles(url, '/index.html')
-          expect(styles).toContain(candidate`content-['updated:src/lazy.tsx']`)
-        })
-      }
-
-      // The same holds for a custom file type as long as some file of the
-      // same type was processed as a module before
-      {
-        await fs.write(
-          'project-a/src/comp-b.custom',
-          html`<div class="content-['updated:src/comp-b.custom']"></div>`,
-        )
-
-        await retryAssertion(async () => {
-          let styles = await fetchStyles(url, '/index.html')
-          expect(styles).toContain(candidate`content-['updated:src/comp-b.custom']`)
-        })
-      }
-
-      // Changing a scanned stylesheet that is not part of the module graph
-      // (e.g. a component stylesheet that a framework plugin compiles into
-      // the component) should not trigger a full reload either
-      //
-      // https://github.com/tailwindlabs/tailwindcss/issues/19903
-      {
-        let updates = (await fs.read('project-a/hmr.log')).split('"type":"update"').length
-
-        await fs.write(
-          'project-a/src/unimported.css',
-          css`
-            .unimported {
-              color: blue;
-            }
-          `,
-        )
-
-        // Wait until the change was handled and an update was pushed
-        await retryAssertion(async () => {
-          let log = await fs.read('project-a/hmr.log')
-          expect(log.split('"type":"update"').length).toBeGreaterThan(updates)
-        })
-      }
-
-      // Changing an external file (e.g. a PHP template) hot-updates the
-      // generated CSS but does not trigger a full reload either. Reloading the
-      // page for external template changes is the responsibility of the backend
-      // integration (e.g. `laravel-vite-plugin`'s `refresh` option, or
-      // `vite-plugin-full-reload`).
-      //
-      // https://github.com/tailwindlabs/tailwindcss/issues/20411
-      {
-        let updates = (await fs.read('project-a/hmr.log')).split('"type":"update"').length
-
-        await fs.write(
-          'project-b/src/index.php',
-          html`<div class="content-['updated:project-b/src/index.php']"></div>`,
-        )
-
-        await retryAssertion(async () => {
-          let log = await fs.read('project-a/hmr.log')
-          expect(log.split('"type":"update"').length).toBeGreaterThan(updates)
-        })
-
-        let styles = await fetchStyles(url, '/index.html')
-        expect(styles).toContain(candidate`content-['updated:project-b/src/index.php']`)
-      }
-    },
-  )
-
-  test(
-    `source(none) disables looking at the module graph`,
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'project-a/vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'project-a/index.html': html`
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="underline m-2">Hello, world!</div>
-          </body>
-        `,
-        'project-a/src/index.css': css`
-          @import 'tailwindcss' source(none);
-          @source '../../project-b/src/**/*.html';
-        `,
-        'project-b/src/index.html': html`
-          <div class="flex" />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, fs, exec, expect }) => {
-      await exec('pnpm vite build', { cwd: path.join(root, 'project-a') })
-
-      let files = await fs.glob('project-a/dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [filename] = files[0]
-
-      // `underline` and `m-2` are only present from files in the module graph
-      // which we've explicitly disabled with source(none) so they should not
-      // be present
-      await fs.expectFileNotToContain(filename, [
-        //
-        candidate`underline`,
-        candidate`m-2`,
-      ])
-
-      // The files from `project-b` should be included because there is an
-      // explicit `@source` directive for it
-      await fs.expectFileToContain(filename, [
-        //
-        candidate`flex`,
-      ])
-
-      // The explicit source directive only covers HTML files, so the JS file
-      // should not be included
-      await fs.expectFileNotToContain(filename, [
-        //
-        candidate`content-['project-b/src/index.js']`,
-      ])
-    },
-  )
-
-  test(
-    `source("…") filters the module graph`,
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'project-a/vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'project-a/index.html': html`
-          <head>
-            <link rel="stylesheet" href="/src/index.css" />
-          </head>
-          <body>
-            <div class="underline m-2 content-['project-a/index.html']">Hello, world!</div>
-            <script type="module" src="/app/index.js"></script>
-          </body>
-        `,
-        'project-a/app/index.js': js`
-          const className = "content-['project-a/app/index.js']"
-          export default { className }
-        `,
-        'project-a/src/index.css': css`
-          @import 'tailwindcss' source('../app');
-          @source '../../project-b/src/**/*.html';
-        `,
-        'project-b/src/index.html': html`
-          <div
-            class="content-['project-b/src/index.html']"
-          />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, fs, exec, expect }) => {
-      await exec('pnpm vite build', { cwd: path.join(root, 'project-a') })
-
-      let files = await fs.glob('project-a/dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [filename] = files[0]
-
-      // `underline` and `m-2` are present in files in the module graph but
-      // we've filtered the module graph such that we only look in
-      // `./app/**/*` so they should not be present
-      await fs.expectFileNotToContain(filename, [
-        //
-        candidate`underline`,
-        candidate`m-2`,
-        candidate`content-['project-a/index.html']`,
-      ])
-
-      // We've filtered the module graph to only look in ./app/**/* so the
-      // candidates from that project should be present
-      await fs.expectFileToContain(filename, [
-        //
-        candidate`content-['project-a/app/index.js']`,
-      ])
-
-      // Even through we're filtering the module graph explicit sources are
-      // additive and as such files from `project-b` should be included
-      // because there is an explicit `@source` directive for it
-      await fs.expectFileToContain(filename, [
-        //
-        candidate`content-['project-b/src/index.html']`,
-      ])
-
-      // The explicit source directive only covers HTML files, so the JS file
-      // should not be included
-      await fs.expectFileNotToContain(filename, [
-        //
-        candidate`content-['project-b/src/index.js']`,
-      ])
-    },
-  )
-
-  test(
-    `source("…") must be a directory`,
-    {
-      fs: {
-        'package.json': json`{}`,
-        'pnpm-workspace.yaml': yaml`
-          #
-          packages:
-            - project-a
-        `,
-        'project-a/package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'project-a/vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'project-a/index.html': html`
-          <head>
-            <link rel="stylesheet" href="/src/index.css" />
-          </head>
-          <body>
-            <div class="underline m-2 content-['project-a/index.html']">Hello, world!</div>
-            <script type="module" src="/app/index.js"></script>
-          </body>
-        `,
-        'project-a/app/index.js': js`
-          const className = "content-['project-a/app/index.js']"
-          export default { className }
-        `,
-        'project-a/src/index.css': css`
-          @import 'tailwindcss' source('../i-do-not-exist');
-          @source '../../project-b/src/**/*.html';
-        `,
-        'project-b/src/index.html': html`
-          <div
-            class="content-['project-b/src/index.html']"
-          />
-        `,
-        'project-b/src/index.js': js`
-          const className = "content-['project-b/src/index.js']"
-          module.exports = { className }
-        `,
-      },
-    },
-    async ({ root, fs, exec, expect }) => {
-      await expect(() =>
-        exec('pnpm vite build', { cwd: path.join(root, 'project-a') }, { ignoreStdErr: true }),
-      ).rejects.toThrow('The `source(../i-do-not-exist)` does not exist')
-
-      let files = await fs.glob('project-a/dist/**/*.css')
-      expect(files).toHaveLength(0)
-    },
-  )
-
-  test(
-    'source(…) and `@source` are relative to the file they are in',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^7"
-            }
-          }
-        `,
-        'vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'index.html': html`
-          <head>
-            <link rel="stylesheet" href="/index.css" />
-          </head>
-          <body></body>
-        `,
-        'index.css': css` @import './project-a/src/index.css'; `,
-
-        'project-a/src/index.css': css`
-          /* Run auto-content detection in ../../project-b */
-          @import 'tailwindcss/utilities' source('../../project-b');
-
-          /* Explicitly using node_modules in the @source allows git ignored folders */
-          @source '../../project-c';
-        `,
-
-        // Project A is the current folder, but we explicitly configured
-        // `source(project-b)`, therefore project-a should not be included in
-        // the output.
-        'project-a/src/index.html': html`
-          <div
-            class="content-['SHOULD-NOT-EXIST-IN-OUTPUT'] content-['project-a/src/index.html']"
-          ></div>
-        `,
-
-        // Project B is the configured `source(…)`, therefore auto source
-        // detection should include known extensions and folders in the output.
-        'project-b/src/index.html': html`
-          <div
-            class="content-['project-b/src/index.html']"
-          ></div>
-        `,
-
-        // Project C should apply auto source detection, therefore known
-        // extensions and folders should be included in the output.
-        'project-c/src/index.html': html`
-          <div
-            class="content-['project-c/src/index.html']"
-          ></div>
-        `,
-      },
-    },
-    async ({ fs, exec, spawn, root, expect }) => {
-      await exec('pnpm vite build', { cwd: root })
-
-      let content = await fs.dumpFiles('./dist/assets/*.css')
-
-      expect(content).not.toContain(candidate`content-['project-a/src/index.html']`)
-      expect(content).toContain(candidate`content-['project-b/src/index.html']`)
-      expect(content).toContain(candidate`content-['project-c/src/index.html']`)
-    },
-  )
-})
-
-test(
-  `demote Tailwind roots to regular CSS files and back to Tailwind roots`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="underline">Hello, world!</div>
-        </body>
-      `,
-      'about.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="font-bold">Tailwind Labs</div>
-        </body>
-      `,
-      'src/index.css': css`@import 'tailwindcss';`,
-    },
-  },
-  async ({ spawn, fs, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/index.html')
-      expect(styles).toContain(candidate`underline`)
-      expect(styles).toContain(candidate`font-bold`)
-    })
-
-    await retryAssertion(async () => {
-      // We change the CSS file so it is no longer a valid Tailwind root.
-      await fs.write('src/index.css', css`@import 'tailwindcss';`)
-
-      let styles = await fetchStyles(url)
-      expect(styles).toContain(candidate`underline`)
-      expect(styles).toContain(candidate`font-bold`)
-    })
-  },
-)
-
-test(
-  `does not interfere with ?raw and ?url static asset handling`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <script type="module" src="./src/index.js"></script>
-        </head>
-      `,
-      'src/index.js': js`
-        import url from './index.css?url'
-        import raw from './index.css?raw'
-      `,
-      'src/index.css': css`@import 'tailwindcss';`,
-    },
-  },
-  async ({ spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let baseUrl = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) baseUrl = match[1]
-      return Boolean(baseUrl)
-    })
-
-    await retryAssertion(async () => {
-      // We have to load the .js file first so that the static assets are
-      // resolved
-      await fetch(`${baseUrl}/src/index.js`).then((r) => r.text())
-
-      let [raw, url] = await Promise.all([
-        fetch(`${baseUrl}/src/index.css?raw`).then((r) => r.text()),
-        fetch(`${baseUrl}/src/index.css?url`).then((r) => r.text()),
-      ])
-
-      expect(firstLine(raw)).toBe(`export default "@import 'tailwindcss';"`)
-      expect(firstLine(url)).toBe(`export default "/src/index.css"`)
-    })
-  },
-)
-
-test(
-  `does not interfere with ?commonjs-proxy modules`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^",
-            "plotly.js": "^3",
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <script type="module" src="./src/index.js"></script>
-        </head>
-      `,
-      'src/index.js': js`import Plotly from 'plotly.js/lib/core'`,
-
-      // `plotly.js` pulls in `es5-ext`, which has a build script. As of pnpm
-      // v10, build scripts only run when explicitly allowed.
-      'pnpm-workspace.yaml': yaml`
-        #
-        allowBuilds:
-          es5-ext: true
-      `,
-    },
-  },
-  async ({ exec, expect, fs }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [candidate`maplibregl-map`])
-  },
-)
-
-function firstLine(str: string) {
-  return str.split('\n')[0]
-}
-
-test(
-  'optimize option: disabled',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss({ optimize: false })],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="focus:text-[black]">Hello, world!</div>
-        </body>
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ exec, expect, fs }) => {
-    await exec('pnpm vite build')
-
-    // Should not be minified when optimize is disabled
-    expect((await fs.dumpFiles('dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-<hash>.css'))
-      .toMatchInlineSnapshot(`
-        "
-        --- dist/assets/index-<hash>.css ---
-        .focus\\:text-\\[black\\]:focus {
-          color: black;
-        }
-        "
-      `)
-  },
-)
-
-test(
-  'optimize option: enabled with minify disabled',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss({ optimize: { minify: false } })],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="hover:text-[black]">Hello, world!</div>
-        </body>
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ exec, expect, fs }) => {
-    await exec('pnpm vite build')
-
-    expect((await fs.dumpFiles('dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-<hash>.css'))
-      .toMatchInlineSnapshot(`
-      "
-      --- dist/assets/index-<hash>.css ---
-      @media (hover: hover) {
-        .hover\\:text-\\[black\\]:hover {
-          color: #000;
-        }
-      }
-      "
-    `)
-  },
-)
-
-test(
-  `the plugin works when using the environment API`,
-  {
-    fs: {
-      'package.json': txt`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          plugins: [tailwindcss()],
-          builder: {},
-          environments: {
-            server: {
-              build: {
-                cssMinify: false,
-                emitAssets: true,
-                rollupOptions: { input: './src/server.ts' },
-              },
-            },
-          },
-        })
-      `,
-      // Has to exist or the build fails
-      'index.html': html`
-        <div class="content-['index.html']"></div>
-      `,
-      'src/server.ts': js`
-        // Import the stylesheet in the server build
-        import a from './index.css?url'
-        console.log(a)
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ root, fs, exec, expect }) => {
-    await exec('pnpm vite build', { cwd: root })
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [candidate`content-['index.html']`])
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/issues/17532
-test(
-  'deleting a file should not crash Vite',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "6.2.5"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <body>
-          <div id="app" class="underline"></div>
-          <script type="module" src="./src/main.js"></script>
-        </body>
-      `,
-      'src/index.css': css`@import 'tailwindcss';`,
-      'src/main.js': js`
-        import iconUrl from './assets/icon.svg?url'
-        import './index.css'
-
-        document.querySelector('#app').innerHTML = iconUrl
-      `,
-      'src/assets/icon.svg': html`
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
-          <rect class="fill-red-500" width="1" height="1" />
-        </svg>
-       `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let [main, css] = await Promise.all([
-        fetch(`${url}/src/main.js`).then((r) => r.text()),
-        fetch(`${url}/src/index.css`).then((r) => r.text()),
-      ])
-
-      expect(main).toContain('/src/assets/icon.svg?import&url')
-      expect(main).toContain('/src/index.css')
-      expect(css).toContain('.fill-red-500')
-    })
-
-    process.flush()
-
-    let unexpectedError = process.onStderr((m) => {
-      return /error|crash|panic/i.test(m)
-    })
-
-    await fs.write(
-      'src/main.js',
-      js`
-        import './index.css'
-        document.querySelector('#app').innerHTML = 'Hello World'
-      `,
-    )
-
-    await fs.delete('src/assets/icon.svg')
-
-    let result = await Promise.race([
-      unexpectedError.then(() => 'stderr'),
-      new Promise((resolve) => setTimeout(() => resolve('timeout'), 500)),
-    ])
-
-    expect(result).toBe('timeout')
-
-    await retryAssertion(async () => {
-      let response = await fetch(`${url}/src/index.css?t=${Date.now()}`)
-      expect(response.status).toBe(200)
-    })
-  },
-)
diff --git a/integrations/vite/multi-root.test.ts b/integrations/vite/multi-root.test.ts
deleted file mode 100644
index 4020aff0f..000000000
--- a/integrations/vite/multi-root.test.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
-
-test(
-  `production build`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import path from 'node:path'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: {
-            cssMinify: false,
-            rollupOptions: {
-              input: {
-                root1: path.resolve(__dirname, 'root1.html'),
-                root2: path.resolve(__dirname, 'root2.html'),
-              },
-            },
-          },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'root1.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/root1.css" />
-        </head>
-        <body>
-          <div class="one:underline two:underline">Hello, world!</div>
-        </body>
-      `,
-      'src/shared.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/root1.css': css`
-        @import './shared.css';
-        @custom-variant one (&:is([data-root='1']));
-      `,
-      'root2.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/root2.css" />
-        </head>
-        <body>
-          <div class="one:underline two:underline">Hello, world!</div>
-        </body>
-      `,
-      'src/root2.css': css`
-        @import './shared.css';
-        @custom-variant two (&:is([data-root='2']));
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(2)
-
-    let root1 = files.find(([filename]) => filename.includes('root1'))
-    let root2 = files.find(([filename]) => filename.includes('root2'))
-
-    expect(root1).toBeDefined()
-    expect(root2).toBeDefined()
-
-    expect(root1![1]).toContain(candidate`one:underline`)
-    expect(root1![1]).not.toContain(candidate`two:underline`)
-
-    expect(root2![1]).not.toContain(candidate`one:underline`)
-    expect(root2![1]).toContain(candidate`two:underline`)
-  },
-)
-
-test(
-  'dev mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import path from 'node:path'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'root1.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/root1.css" />
-        </head>
-        <body>
-          <div class="one:underline two:underline">Hello, world!</div>
-        </body>
-      `,
-      'src/shared.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/root1.css': css`
-        @import './shared.css';
-        @custom-variant one (&:is([data-root='1']));
-      `,
-      'root2.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/root2.css" />
-        </head>
-        <body>
-          <div class="one:underline two:underline">Hello, world!</div>
-        </body>
-      `,
-      'src/root2.css': css`
-        @import './shared.css';
-        @custom-variant two (&:is([data-root='2']));
-      `,
-    },
-  },
-  async ({ spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    // Candidates are resolved lazily, so the first visit of index.html
-    // will only have candidates from this file.
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/root1.html')
-      expect(styles).toContain(candidate`one:underline`)
-      expect(styles).not.toContain(candidate`two:underline`)
-    })
-
-    // Going to about.html will extend the candidate list to include
-    // candidates from about.html.
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/root2.html')
-      expect(styles).not.toContain(candidate`one:underline`)
-      expect(styles).toContain(candidate`two:underline`)
-    })
-  },
-)
diff --git a/integrations/vite/nuxt.test.ts b/integrations/vite/nuxt.test.ts
deleted file mode 100644
index 20f367020..000000000
--- a/integrations/vite/nuxt.test.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import {
-  candidate,
-  css,
-  fetchStyles,
-  getRandomPort,
-  html,
-  json,
-  retryAssertion,
-  test,
-  ts,
-  yaml,
-} from '../utils'
-
-const SETUP = {
-  fs: {
-    'package.json': json`
-      {
-        "type": "module",
-        "dependencies": {
-          "@tailwindcss/vite": "workspace:^",
-          "nuxt": "3.16.0",
-          "nitropack": "2.11.0",
-          "tailwindcss": "workspace:^",
-          "vue": "latest"
-        }
-      }
-    `,
-    'pnpm-workspace.yaml': yaml`
-      #
-      overrides:
-        nuxi: 3.28.0
-    `,
-    'nuxt.config.ts': ts`
-      import tailwindcss from '@tailwindcss/vite'
-
-      // https://nuxt.com/docs/api/configuration/nuxt-config
-      export default defineNuxtConfig({
-        vite: {
-          plugins: [tailwindcss()],
-        },
-
-        css: ['~/assets/css/main.css'],
-        devtools: { enabled: true },
-        compatibilityDate: '2024-08-30',
-      })
-    `,
-    'app.vue': html`
-        <template>
-        <div class="underline">Hello world!</div>
-      </template>
-      `,
-    'assets/css/main.css': css`@import 'tailwindcss';`,
-  },
-}
-
-test('dev mode', SETUP, async ({ fs, spawn, expect }) => {
-  let process = await spawn('pnpm nuxt dev', {
-    env: {
-      TEST: 'false', // VERY IMPORTANT OTHERWISE YOU WON'T GET OUTPUT
-      NODE_ENV: 'development',
-    },
-  })
-
-  let url = ''
-  await process.onStdout((m) => {
-    let match = /Local:\s*(http.*)\//.exec(m)
-    if (match) url = match[1]
-    return Boolean(url)
-  })
-
-  await process.onStdout((m) => m.includes('server warmed up in'))
-
-  await retryAssertion(async () => {
-    let css = await fetchStyles(url)
-    expect(css).toContain(candidate`underline`)
-  })
-
-  await retryAssertion(async () => {
-    await fs.write(
-      'app.vue',
-      html`
-        <template>
-          <div class="underline font-bold">Hello world!</div>
-        </template>
-      `,
-    )
-
-    let css = await fetchStyles(url)
-    expect(css).toContain(candidate`underline`)
-    expect(css).toContain(candidate`font-bold`)
-  })
-})
-
-test('build', SETUP, async ({ spawn, exec, expect }) => {
-  await exec('pnpm nuxt build')
-  // The Nuxt preview server does not automatically assign a free port if 3000
-  // is taken, so we use a random port instead.
-  let port = await getRandomPort()
-  let process = await spawn(`pnpm nuxt preview --port ${port}`, {
-    env: {
-      TEST: 'false',
-      NODE_ENV: 'development',
-    },
-  })
-
-  let url = ''
-  await process.onStdout((m) => {
-    let match = /Listening on\s*(http.*)\/?/.exec(m)
-    if (match) url = match[1].replace('http://[::]', 'http://127.0.0.1')
-    return m.includes('Listening on')
-  })
-
-  await retryAssertion(async () => {
-    let css = await fetchStyles(url)
-    expect(css).toContain(candidate`underline`)
-  })
-})
diff --git a/integrations/vite/other-transforms.test.ts b/integrations/vite/other-transforms.test.ts
deleted file mode 100644
index d56396065..000000000
--- a/integrations/vite/other-transforms.test.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import dedent from 'dedent'
-import { describe } from 'vitest'
-import { css, fetchStyles, html, retryAssertion, test, ts, txt } from '../utils'
-
-function createSetup(transformer: 'postcss' | 'lightningcss') {
-  return {
-    fs: {
-      'package.json': txt`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-          build: { cssMinify: false },
-          plugins: [
-            tailwindcss(),
-            {
-              name: 'recolor',
-              transform(code, id) {
-                if (id.includes('.css')) {
-                  return code.replace(/red;/g, 'blue;')
-                }
-              },
-            },
-          ],
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="foo [background-color:red]">Hello, world!</div>
-        </body>
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-
-        .foo {
-          color: red;
-        }
-      `,
-    },
-  }
-}
-
-describe.each(['postcss', 'lightningcss'] as const)('%s', (transformer) => {
-  test(`production build`, createSetup(transformer), async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [
-      css`
-        .foo {
-          color: blue;
-        }
-      `,
-      // Running the transforms on utilities generated by Tailwind might change in the future
-      dedent`
-        .\[background-color\:red\] {
-          background-color: blue;
-        }
-      `,
-    ])
-  })
-
-  test('dev mode', createSetup(transformer), async ({ spawn, fs, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/index.html')
-      expect(styles).toContain(css`
-        .foo {
-          color: blue;
-        }
-      `)
-      // Running the transforms on utilities generated by Tailwind might change in the future
-      expect(styles).toContain(dedent`
-        .\[background-color\:red\] {
-          background-color: blue;
-        }
-      `)
-    })
-
-    await retryAssertion(async () => {
-      await fs.write(
-        'src/index.css',
-        css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-
-          .foo {
-            background-color: red;
-          }
-        `,
-      )
-
-      let styles = await fetchStyles(url)
-      expect(styles).toContain(css`
-        .foo {
-          background-color: blue;
-        }
-      `)
-    })
-  })
-
-  test('watch mode', createSetup(transformer), async ({ spawn, fs, expect }) => {
-    let process = await spawn('pnpm vite build --watch')
-    await process.onStdout((m) => m.includes('built in'))
-
-    await retryAssertion(async () => {
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [, styles] = files[0]
-
-      expect(styles).toContain(css`
-        .foo {
-          color: blue;
-        }
-      `)
-      // Running the transforms on utilities generated by Tailwind might change in the future
-      expect(styles).toContain(dedent`
-        .\[background-color\:red\] {
-          background-color: blue;
-        }
-      `)
-    })
-
-    await retryAssertion(async () => {
-      await fs.write(
-        'src/index.css',
-        css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-
-          .foo {
-            background-color: red;
-          }
-        `,
-      )
-
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [, styles] = files[0]
-
-      expect(styles).toContain(css`
-        .foo {
-          background-color: blue;
-        }
-      `)
-    })
-  })
-})
diff --git a/integrations/vite/preact.test.ts b/integrations/vite/preact.test.ts
deleted file mode 100644
index 8e4deec2b..000000000
--- a/integrations/vite/preact.test.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts, txt } from '../utils'
-
-test(
-  'dev mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "preact": "^10"
-          },
-          "devDependencies": {
-            "@preact/preset-vite": "^2",
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^",
-            "vite": "^8"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import fs from 'node:fs'
-        import path from 'node:path'
-        import preact from '@preact/preset-vite'
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          plugins: [
-            tailwindcss(),
-            preact(),
-            {
-              // Log all HMR payloads to a file so the test can assert on them
-              name: 'hmr-wiretap',
-              configureServer(server) {
-                let logFile = path.resolve('hmr.log')
-                fs.writeFileSync(logFile, '')
-                for (let environment of Object.values(server.environments)) {
-                  let send = environment.hot.send.bind(environment.hot)
-                  environment.hot.send = (payload) => {
-                    fs.appendFileSync(logFile, JSON.stringify(payload) + '\\n')
-                    return send(payload)
-                  }
-                }
-              },
-            },
-          ],
-        })
-      `,
-      'index.html': html`
-        <html>
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div id="app"></div>
-            <script type="module" src="./src/main.tsx"></script>
-          </body>
-        </html>
-      `,
-      'src/main.tsx': ts`
-        import { render } from 'preact'
-        import { App } from './app'
-
-        render(<App />, document.getElementById('app')!)
-      `,
-      'src/app.tsx': ts`
-        import { useState } from 'preact/hooks'
-
-        export function App() {
-          const [count, setCount] = useState(0)
-          return (
-            <button className="underline" onClick={() => setCount((c) => c + 1)}>
-              Count: {count}
-            </button>
-          )
-        }
-      `,
-      'src/index.css': css`@import 'tailwindcss';`,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url)
-      expect(styles).toContain(candidate`underline`)
-    })
-
-    // Load the component modules, like a browser visiting the page would
-    await fetch(`${url}/src/main.tsx`)
-    await fetch(`${url}/src/app.tsx`)
-
-    // Editing a component keeps HMR intact: new classes are delivered through
-    // a regular update, not a full page reload (which would lose all state)
-    {
-      await fs.write(
-        'src/app.tsx',
-        ts`
-          import { useState } from 'preact/hooks'
-
-          export function App() {
-            const [count, setCount] = useState(0)
-            return (
-              <button className="underline flex" onClick={() => setCount((c) => c + 1)}>
-                Count: {count}
-              </button>
-            )
-          }
-        `,
-      )
-
-      await retryAssertion(async () => {
-        let styles = await fetchStyles(url)
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`flex`)
-      })
-      expect(await fs.read('hmr.log')).toContain('"type":"update"')
-      expect(await fs.read('hmr.log')).not.toContain('full-reload')
-    }
-
-    // Changing a scanned file that is not part of the module graph (e.g.
-    // `package.json`, which package managers and other tooling write to while
-    // the dev server is running) should not trigger a full reload either —
-    // that would destroy client state. New candidates should still be picked
-    // up because the file is a watch dependency of the CSS root, so the CSS
-    // hot-updates through Vite's regular pipeline.
-    //
-    // https://github.com/tailwindlabs/tailwindcss/issues/20411
-    {
-      await fs.write(
-        'package.json',
-        txt`
-          {
-            "type": "module",
-            "description": "content-['package.json']",
-            "dependencies": {
-              "preact": "^10"
-            },
-            "devDependencies": {
-              "@preact/preset-vite": "^2",
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^",
-              "vite": "^8"
-            }
-          }
-        `,
-      )
-
-      await retryAssertion(async () => {
-        let styles = await fetchStyles(url)
-        expect(styles).toContain(candidate`content-['package.json']`)
-      })
-      expect(await fs.read('hmr.log')).not.toContain('full-reload')
-    }
-  },
-)
diff --git a/integrations/vite/qwik.test.ts b/integrations/vite/qwik.test.ts
deleted file mode 100644
index 42db6563a..000000000
--- a/integrations/vite/qwik.test.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { candidate, css, fetchStyles, json, retryAssertion, test, ts } from '../utils'
-
-test(
-  'dev mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@builder.io/qwik": "^1",
-            "@builder.io/qwik-city": "^1",
-            "vite": "^5",
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import { defineConfig } from 'vite'
-        import { qwikVite } from '@builder.io/qwik/optimizer'
-        import { qwikCity } from '@builder.io/qwik-city/vite'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig(() => {
-          return {
-            plugins: [tailwindcss(), qwikCity(), qwikVite()],
-          }
-        })
-      `,
-      'src/root.tsx': ts`
-        import { component$ } from '@builder.io/qwik'
-        import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city'
-
-        import './global.css'
-
-        export default component$(() => {
-          return (
-            <QwikCityProvider>
-              <head></head>
-              <body>
-                <RouterOutlet />
-              </body>
-            </QwikCityProvider>
-          )
-        })
-      `,
-      'src/global.css': css`@import 'tailwindcss/utilities.css';`,
-      'src/entry.ssr.tsx': ts`
-        import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/server'
-        import Root from './root'
-
-        export default function (opts: RenderToStreamOptions) {
-          return renderToStream(<Root />, opts)
-        }
-      `,
-      'src/routes/index.tsx': ts`
-        import { component$ } from '@builder.io/qwik'
-
-        export default component$(() => {
-          return <h1 class="underline">Hello World!</h1>
-        })
-      `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm vite --mode ssr')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      console.log(m)
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`underline`)
-    })
-
-    await retryAssertion(async () => {
-      await fs.write(
-        'src/routes/index.tsx',
-        ts`
-          import { component$ } from '@builder.io/qwik'
-
-          export default component$(() => {
-            return <h1 class="underline flex">Hello World!</h1>
-          })
-        `,
-      )
-
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(candidate`flex`)
-    })
-  },
-)
diff --git a/integrations/vite/react-router.test.ts b/integrations/vite/react-router.test.ts
deleted file mode 100644
index 98b0c928d..000000000
--- a/integrations/vite/react-router.test.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-import { candidate, css, fetchStyles, json, retryAssertion, test, ts, txt } from '../utils'
-
-const WORKSPACE = {
-  'package.json': json`
-    {
-      "type": "module",
-      "dependencies": {
-        "@react-router/dev": "^7",
-        "@react-router/node": "^7",
-        "@react-router/serve": "^7",
-        "@tailwindcss/vite": "workspace:^",
-        "@types/node": "^20",
-        "@types/react-dom": "^19",
-        "@types/react": "^19",
-        "isbot": "^5",
-        "react-dom": "^19",
-        "react-router": "^7",
-        "react": "^19",
-        "tailwindcss": "workspace:^",
-        "vite": "^5"
-      }
-    }
-  `,
-  'react-router.config.ts': ts`
-    import type { Config } from '@react-router/dev/config'
-    export default { ssr: true } satisfies Config
-  `,
-  'vite.config.ts': ts`
-    import { defineConfig } from 'vite'
-    import { reactRouter } from '@react-router/dev/vite'
-    import tailwindcss from '@tailwindcss/vite'
-
-    export default defineConfig({
-      plugins: [tailwindcss(), reactRouter()],
-    })
-  `,
-  'app/routes/home.tsx': ts`
-    export default function Home() {
-      return <h1 className="font-bold">Welcome to React Router</h1>
-    }
-  `,
-  'app/app.css': css`@import 'tailwindcss';`,
-  'app/routes.ts': ts`
-    import { type RouteConfig, index } from '@react-router/dev/routes'
-    export default [index('routes/home.tsx')] satisfies RouteConfig
-  `,
-  'app/root.tsx': ts`
-    import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
-    import './app.css'
-    export function Layout({ children }: { children: React.ReactNode }) {
-      return (
-        <html lang="en">
-          <head>
-            <meta charSet="utf-8" />
-            <meta name="viewport" content="width=device-width, initial-scale=1" />
-            <Meta />
-            <Links />
-          </head>
-          <body>
-            {children}
-            <ScrollRestoration />
-            <Scripts />
-          </body>
-        </html>
-      )
-    }
-
-    export default function App() {
-      return <Outlet />
-    }
-  `,
-}
-
-test('dev mode', { fs: WORKSPACE }, async ({ fs, spawn, expect }) => {
-  let process = await spawn('pnpm react-router dev')
-
-  let url = ''
-  await process.onStdout((m) => {
-    let match = /Local:\s*(http.*)\//.exec(m)
-    if (match) url = match[1]
-    return Boolean(url)
-  })
-
-  await retryAssertion(async () => {
-    let css = await fetchStyles(url)
-    expect(css).toContain(candidate`font-bold`)
-  })
-
-  await retryAssertion(async () => {
-    await fs.write(
-      'app/routes/home.tsx',
-      ts`
-        export default function Home() {
-          return <h1 className="font-bold underline">Welcome to React Router</h1>
-        }
-      `,
-    )
-
-    let css = await fetchStyles(url)
-    expect(css).toContain(candidate`underline`)
-    expect(css).toContain(candidate`font-bold`)
-  })
-})
-
-test(
-  // cf. https://github.com/remix-run/react-router/blob/00cb4d7b310663b2e84152700c05d3b503005e83/integration/vite-hmr-hdr-test.ts#L311-L318
-  'dev mode, editing a server-only loader dependency triggers HDR instead of a full reload',
-  {
-    fs: {
-      ...WORKSPACE,
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@react-router/dev": "^7",
-            "@react-router/node": "^7",
-            "@react-router/serve": "^7",
-            "@tailwindcss/vite": "workspace:^",
-            "@types/node": "^20",
-            "@types/react-dom": "^19",
-            "@types/react": "^19",
-            "isbot": "^5",
-            "react-dom": "^19",
-            "react-router": "^7",
-            "react": "^19",
-            "tailwindcss": "workspace:^",
-            "vite": "^7"
-          }
-        }
-      `,
-      'app/routes/home.tsx': ts`
-        import type { Route } from './+types/home'
-        import { direct } from '../direct-hdr-dep'
-
-        export async function loader() {
-          return { message: direct }
-        }
-
-        export default function Home({ loaderData }: Route.ComponentProps) {
-          return (
-            <div>
-              <h1 className="font-bold">{loaderData.message}</h1>
-              <input data-testinput />
-            </div>
-          )
-        }
-      `,
-      'app/direct-hdr-dep.ts': ts` export const direct = 'HDR: 0' `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm react-router dev')
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    // check initial state
-    await retryAssertion(async () => {
-      let html = await (await fetch(url)).text()
-      expect(html).toContain('HDR: 0')
-
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`font-bold`)
-    })
-
-    // Flush stdout so we only see messages triggered by the edit below.
-    process.flush()
-
-    // Edit the server-only module. The client environment watches this file
-    // but it only exists in the server module graph. Without the fix, the
-    // Tailwind CSS plugin would trigger a full page reload on the client
-    // instead of letting react-router handle HDR.
-    await fs.write('app/direct-hdr-dep.ts', ts` export const direct = 'HDR: 1' `)
-
-    // check update
-    await retryAssertion(async () => {
-      let html = await (await fetch(url)).text()
-      expect(html).toContain('HDR: 1')
-
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`font-bold`)
-    })
-
-    // Assert the client receives an HMR update (not a full page reload).
-    await process.onStdout((m) => m.includes('(client) hmr update'))
-  },
-)
-
-test('build mode', { fs: WORKSPACE }, async ({ spawn, exec, expect }) => {
-  await exec('pnpm react-router build')
-  let process = await spawn('pnpm react-router-serve ./build/server/index.js')
-
-  let url = ''
-  await process.onStdout((m) => {
-    let match = /\[react-router-serve\]\s*(http.*) \/?/.exec(m)
-    if (match) url = match[1]
-    return url != ''
-  })
-
-  await retryAssertion(async () => {
-    let css = await fetchStyles(url)
-    expect(css).toContain(candidate`font-bold`)
-  })
-})
-
-test(
-  'build mode using ?url stylesheet imports should only build one stylesheet (requires `file-system` scanner)',
-  {
-    fs: {
-      ...WORKSPACE,
-      'app/root.tsx': ts`
-        import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
-        import styles from './app.css?url'
-        export const links: Route.LinksFunction = () => [{ rel: 'stylesheet', href: styles }]
-        export function Layout({ children }: { children: React.ReactNode }) {
-          return (
-            <html lang="en">
-              <head>
-                <meta charSet="utf-8" />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <Meta />
-                <Links />
-              </head>
-              <body class="dark">
-                {children}
-                <ScrollRestoration />
-                <Scripts />
-              </body>
-            </html>
-          )
-        }
-
-        export default function App() {
-          return <Outlet />
-        }
-      `,
-      'vite.config.ts': ts`
-        import { defineConfig } from 'vite'
-        import { reactRouter } from '@react-router/dev/vite'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig({
-          plugins: [tailwindcss(), reactRouter()],
-        })
-      `,
-      '.gitignore': txt`
-        node_modules/
-        build/
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm react-router build')
-
-    let files = await fs.glob('build/client/assets/**/*.css')
-
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [candidate`font-bold`])
-  },
-)
diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts
deleted file mode 100644
index fc9aca5c7..000000000
--- a/integrations/vite/resolvers.test.ts
+++ /dev/null
@@ -1,804 +0,0 @@
-import { describe } from 'vitest'
-import {
-  candidate,
-  css,
-  fetchStyles,
-  html,
-  js,
-  json,
-  retryAssertion,
-  test,
-  ts,
-  txt,
-  yaml,
-} from '../utils'
-
-test(
-  'resolves tsconfig paths in production build',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8"
-          }
-        }
-      `,
-      'tsconfig.json': json`
-        {
-          "compilerOptions": {
-            "baseUrl": ".",
-            "paths": {
-              "@/*": ["./src/*"]
-            }
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-          resolve: {
-            tsconfigPaths: true,
-          },
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="underline custom-underline">Hello, world!</div>
-        </body>
-      `,
-      'src/index.css': css`
-        @import '@/styles/base.css';
-        @plugin '@/plugin.js';
-      `,
-      'src/styles/base.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/plugin.js': js`
-        export default function ({ addUtilities }) {
-          addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
-  },
-)
-
-test(
-  'resolves tsconfig paths in dev mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8"
-          }
-        }
-      `,
-      'tsconfig.json': json`
-        {
-          "compilerOptions": {
-            "baseUrl": ".",
-            "paths": {
-              "@/*": ["./src/*"]
-            }
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-          resolve: {
-            tsconfigPaths: true,
-          },
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="underline custom-underline">Hello, world!</div>
-        </body>
-      `,
-      'src/index.css': css`
-        @import '@/styles/base.css';
-        @plugin '@/plugin.js';
-      `,
-      'src/styles/base.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/plugin.js': js`
-        export default function ({ addUtilities }) {
-          addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
-        }
-      `,
-    },
-  },
-  async ({ spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/index.html')
-      expect(styles).toContain(candidate`underline`)
-      expect(styles).toContain(candidate`custom-underline`)
-    })
-  },
-)
-
-test(
-  'resolves at-sign aliases in production build',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-        import { fileURLToPath } from 'node:url'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-          resolve: {
-            alias: [{ find: '@', replacement: fileURLToPath(new URL('.', import.meta.url)) }],
-          },
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="underline custom-underline">Hello, world!</div>
-        </body>
-      `,
-      'src/index.css': css`
-        @import '@/src/styles/base.css';
-        @plugin '@/src/plugin.js';
-      `,
-      'src/styles/base.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/plugin.js': js`
-        export default function ({ addUtilities }) {
-          addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
-  },
-)
-
-test(
-  'resolves package plugins in production build with at-sign aliases',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "tailwind-scrollbar": "^4.0.2",
-            "tailwindcss-motion": "^1.1.1",
-            "vite": "^8"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-        import { fileURLToPath } from 'node:url'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-          resolve: {
-            alias: [{ find: '@', replacement: fileURLToPath(new URL('.', import.meta.url)) }],
-          },
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="scrollbar scrollbar-thumb-red-500 motion-preset-fade">Hello, world!</div>
-        </body>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin 'tailwind-scrollbar';
-        @plugin 'tailwindcss-motion';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [
-      candidate`scrollbar`,
-      candidate`scrollbar-thumb-red-500`,
-      candidate`motion-preset-fade`,
-    ])
-  },
-)
-
-test(
-  'resolves package plugins to JS entries in production build when browser points to CSS',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "plugin-browser-css": "workspace:*",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8"
-          }
-        }
-      `,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - packages/*
-      `,
-      'packages/plugin-browser-css/package.json': json`
-        {
-          "name": "plugin-browser-css",
-          "version": "1.0.0",
-          "type": "module",
-          "main": "./index.js",
-          "module": "./index.js",
-          "browser": "./browser.css"
-        }
-      `,
-      'packages/plugin-browser-css/index.js': js`
-        export default function ({ addUtilities }) {
-          addUtilities({ '.browser-css-plugin': { 'border-bottom': '1px solid green' } })
-        }
-      `,
-      'packages/plugin-browser-css/browser.css': css`
-        .should-not-be-loaded-as-a-plugin {
-          display: none;
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <html>
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="browser-css-plugin">Hello, world!</div>
-          </body>
-        </html>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin 'plugin-browser-css';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-    let [filename] = files[0]
-
-    await fs.expectFileToContain(filename, [candidate`browser-css-plugin`])
-  },
-)
-
-test(
-  'resolves package plugins to JS entries in dev mode when browser points to CSS',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "plugin-browser-css": "workspace:*",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8"
-          }
-        }
-      `,
-      'pnpm-workspace.yaml': yaml`
-        #
-        packages:
-          - packages/*
-      `,
-      'packages/plugin-browser-css/package.json': json`
-        {
-          "name": "plugin-browser-css",
-          "version": "1.0.0",
-          "type": "module",
-          "main": "./index.js",
-          "module": "./index.js",
-          "browser": "./browser.css"
-        }
-      `,
-      'packages/plugin-browser-css/index.js': js`
-        export default function ({ addUtilities }) {
-          addUtilities({ '.browser-css-plugin': { 'border-bottom': '1px solid green' } })
-        }
-      `,
-      'packages/plugin-browser-css/browser.css': css`
-        .should-not-be-loaded-as-a-plugin {
-          display: none;
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <html>
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="browser-css-plugin">Hello, world!</div>
-          </body>
-        </html>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin 'plugin-browser-css';
-      `,
-    },
-  },
-  async ({ spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/index.html')
-      expect(styles).toContain(candidate`browser-css-plugin`)
-    })
-  },
-)
-
-test(
-  'resolves package plugins in dev mode when package exports CSS files',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "daisyui": "^5",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <html>
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <button class="btn btn-primary">Hello, world!</button>
-          </body>
-        </html>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss';
-        @plugin 'daisyui';
-      `,
-    },
-  },
-  async ({ spawn, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/index.html')
-      expect(styles).toContain('.btn')
-      expect(styles).toContain('.btn-primary')
-    })
-  },
-)
-
-test(
-  'resolve relative CSS files correctly',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <html>
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body></body>
-        </html>
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-        @import './themes/glow.css';
-      `,
-      // References a file in the current folder, which names happens to match a
-      // file in the parent folder as well.
-      'src/themes/glow.css': css`@import './entry.css';`,
-      'src/themes/entry.css': css`
-        .do-include-me {
-          color: green;
-        }
-      `,
-
-      // Never rerefenced, so should not be included
-      'src/entry.css': css`
-        .do-not-include-me {
-          color: red;
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm vite build')
-
-    expect(
-      (await fs.dumpFiles('./dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-<hash>.css'),
-    ).toMatchInlineSnapshot(`
-      "
-      --- ./dist/assets/index-<hash>.css ---
-      .do-include-me {
-        color: green;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  'resolve relative JS files correctly',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^8"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <html>
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body></body>
-        </html>
-      `,
-      'src/index.css': css`
-        @reference 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-        @import './themes/glow.css';
-      `,
-      // References a file in the current folder, which names happens to match a
-      // file in the parent folder as well.
-      'src/themes/glow.css': css`@plugin "./my-plugin.js";`,
-      'src/themes/my-plugin.js': ts`
-        export default function ({ addBase }) {
-          addBase({ '.do-include-me': { color: 'green' } })
-        }
-      `,
-
-      // Never rerefenced, so should not be included
-      'src/my-plugin.js': css`
-        export default function ({ addBase }) {
-          addBase({ '.do-not-include-me': { 'color': 'red' } })
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm vite build')
-
-    expect(
-      (await fs.dumpFiles('./dist/**/*.css')).replace(/-([-_a-zA-Z0-9]*?)\.css/g, '-<hash>.css'),
-    ).toMatchInlineSnapshot(`
-        "
-        --- ./dist/assets/index-<hash>.css ---
-        @layer base {
-          .do-include-me {
-            color: green;
-          }
-        }
-        "
-      `)
-  },
-)
-
-describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
-  test(
-    'resolves aliases in production build',
-    {
-      fs: {
-        'package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^5.3.5"
-            }
-          }
-        `,
-        'vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-          import { fileURLToPath } from 'node:url'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-            resolve: {
-              alias: {
-                '#css-alias': fileURLToPath(new URL('./src/alias.css', import.meta.url)),
-                '#js-alias': fileURLToPath(new URL('./src/plugin.js', import.meta.url)),
-              },
-            },
-          })
-        `,
-        'index.html': html`
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="underline custom-underline">Hello, world!</div>
-          </body>
-        `,
-        'src/index.css': css`
-          @import '#css-alias';
-          @plugin '#js-alias';
-        `,
-        'src/alias.css': css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-        `,
-        'src/plugin.js': js`
-          export default function ({ addUtilities }) {
-            addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
-          }
-        `,
-      },
-    },
-    async ({ fs, exec, expect }) => {
-      await exec('pnpm vite build')
-
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [filename] = files[0]
-
-      await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
-    },
-  )
-
-  test(
-    'resolves aliases in dev mode',
-    {
-      fs: {
-        'package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^5.3.5"
-            }
-          }
-        `,
-        'vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-          import { fileURLToPath } from 'node:url'
-
-          export default defineConfig({
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-            build: { cssMinify: false },
-            plugins: [tailwindcss()],
-            resolve: {
-              alias: {
-                '#css-alias': fileURLToPath(new URL('./src/alias.css', import.meta.url)),
-                '#js-alias': fileURLToPath(new URL('./src/plugin.js', import.meta.url)),
-              },
-            },
-          })
-        `,
-        'index.html': html`
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div class="underline custom-underline">Hello, world!</div>
-          </body>
-        `,
-        'src/index.css': css`
-          @import '#css-alias';
-          @plugin '#js-alias';
-        `,
-        'src/alias.css': css`
-          @reference 'tailwindcss/theme';
-          @import 'tailwindcss/utilities';
-        `,
-        'src/plugin.js': js`
-          export default function ({ addUtilities }) {
-            addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
-          }
-        `,
-      },
-    },
-    async ({ spawn, expect }) => {
-      let process = await spawn('pnpm vite dev')
-      await process.onStdout((m) => m.includes('ready in'))
-
-      let url = ''
-      await process.onStdout((m) => {
-        let match = /Local:\s*(http.*)\//.exec(m)
-        if (match) url = match[1]
-        return Boolean(url)
-      })
-
-      await retryAssertion(async () => {
-        let styles = await fetchStyles(url, '/index.html')
-        expect(styles).toContain(candidate`underline`)
-        expect(styles).toContain(candidate`custom-underline`)
-      })
-    },
-  )
-})
diff --git a/integrations/vite/solidstart.test.ts b/integrations/vite/solidstart.test.ts
deleted file mode 100644
index bbe9ccc88..000000000
--- a/integrations/vite/solidstart.test.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { candidate, css, fetchStyles, js, json, retryAssertion, test, ts } from '../utils'
-
-const WORKSPACE = {
-  'package.json': json`
-    {
-      "type": "module",
-      "dependencies": {
-        "@solidjs/start": "^1",
-        "solid-js": "^1",
-        "vinxi": "^0",
-        "@tailwindcss/vite": "workspace:^",
-        "tailwindcss": "workspace:^"
-      }
-    }
-  `,
-  'jsconfig.json': json`
-    {
-      "compilerOptions": {
-        "jsx": "preserve",
-        "jsxImportSource": "solid-js"
-      }
-    }
-  `,
-  'app.config.js': ts`
-    import { defineConfig } from '@solidjs/start/config'
-    import tailwindcss from '@tailwindcss/vite'
-
-    export default defineConfig({
-      vite: {
-        plugins: [tailwindcss()],
-      },
-    })
-  `,
-  'src/entry-server.jsx': js`
-    // @refresh reload
-    import { createHandler, StartServer } from '@solidjs/start/server'
-
-    export default createHandler(() => (
-      <StartServer
-        document={({ assets, children, scripts }) => (
-          <html lang="en">
-            <head>{assets}</head>
-            <body>
-              <div id="app">{children}</div>
-              {scripts}
-            </body>
-          </html>
-        )}
-      />
-    ))
-  `,
-  'src/entry-client.jsx': js`
-    // @refresh reload
-    import { mount, StartClient } from '@solidjs/start/client'
-
-    mount(() => <StartClient />, document.getElementById('app'))
-  `,
-  'src/app.jsx': js`
-    import './app.css'
-    export default function App() {
-      return <h1 class="underline">Hello world!</h1>
-    }
-  `,
-  'src/app.css': css`@import 'tailwindcss';`,
-}
-
-test(
-  'dev mode',
-  {
-    fs: WORKSPACE,
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn('pnpm vinxi dev', {
-      env: {
-        TEST: 'false', // VERY IMPORTANT OTHERWISE YOU WON'T GET OUTPUT
-        NODE_ENV: 'development',
-      },
-    })
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`underline`)
-    })
-
-    await retryAssertion(async () => {
-      await fs.write(
-        'src/app.jsx',
-        js`
-          import './app.css'
-          export default function App() {
-            return <h1 class="underline font-bold">Hello world!</h1>
-          }
-        `,
-      )
-
-      let css = await fetchStyles(url)
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(candidate`font-bold`)
-    })
-  },
-)
diff --git a/integrations/vite/source-maps.test.ts b/integrations/vite/source-maps.test.ts
deleted file mode 100644
index fe26d9a7c..000000000
--- a/integrations/vite/source-maps.test.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
-
-test(
-  `dev build`,
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "lightningcss": "^1",
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          plugins: [tailwindcss()],
-          css: {
-            devSourcemap: true,
-          },
-        })
-      `,
-      'index.html': html`
-        <head>
-          <link rel="stylesheet" href="./src/index.css" />
-        </head>
-        <body>
-          <div class="flex">Hello, world!</div>
-        </body>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities';
-        /*  */
-      `,
-    },
-  },
-  async ({ fs, spawn, expect, parseSourceMap }) => {
-    // Source maps only work in development mode in Vite
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    let styles = await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/index.html')
-
-      // Wait until we have the right CSS
-      expect(styles).toContain(candidate`flex`)
-
-      return styles
-    })
-
-    // Make sure we can find a source map
-    let map = parseSourceMap(styles)
-
-    expect(map.at(1, 0)).toMatchObject({
-      source: null,
-      original: '(none)',
-      generated: '/*! tailwi...',
-    })
-
-    expect(map.at(2, 0)).toMatchObject({
-      source: expect.stringContaining('utilities.css'),
-      original: '@tailwind...',
-      generated: '.flex {...',
-    })
-
-    expect(map.at(3, 2)).toMatchObject({
-      source: expect.stringContaining('utilities.css'),
-      original: '@tailwind...',
-      generated: 'display: f...',
-    })
-
-    expect(map.at(4, 0)).toMatchObject({
-      source: null,
-      original: '(none)',
-      generated: '}...',
-    })
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/issues/19930
-test(
-  'production build without Tailwind roots should not result in source map warnings',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "@tailwindcss/vite": "workspace:^",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import { defineConfig } from 'vite'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig({
-          plugins: [
-            tailwindcss(),
-            {
-              name: 'inspect-source-map-chain',
-              enforce: 'pre',
-              transform(_, id) {
-                if (id.includes('.css')) {
-                  // Force Rollup to collapse the sourcemap chain during this build.
-                  this.getCombinedSourcemap()
-                }
-              },
-            },
-          ],
-          css: {
-            devSourcemap: true,
-          },
-          build: {
-            sourcemap: true,
-          },
-        })
-      `,
-      'index.html': html`
-        <body>
-          <script type="module" src="./src/index.js"></script>
-          <div>Hello, world!</div>
-        </body>
-      `,
-      'src/index.js': ts` import './index.css' `,
-      'src/index.css': css`
-        body {
-          color: red;
-        }
-      `,
-    },
-  },
-  async ({ exec, expect }) => {
-    let output = await exec('pnpm vite build')
-
-    expect(output).not.toContain('Sourcemap is likely to be incorrect')
-  },
-)
diff --git a/integrations/vite/ssr.test.ts b/integrations/vite/ssr.test.ts
deleted file mode 100644
index a1d660816..000000000
--- a/integrations/vite/ssr.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { describe } from 'vitest'
-import { candidate, css, html, json, test, ts } from '../utils'
-
-describe.each([['^5.3'], ['^6.0'], ['^7'], ['^8']])('Using Vite %s', (version) => {
-  test(
-    `SSR build`,
-    {
-      fs: {
-        'package.json': json`
-          {
-            "type": "module",
-            "dependencies": {
-              "@tailwindcss/vite": "workspace:^",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              "vite": "${version}"
-            }
-          }
-        `,
-        'vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            build: {
-              cssMinify: false,
-              ssrEmitAssets: true,
-            },
-            plugins: [tailwindcss()],
-          })
-        `,
-        'index.html': html`
-          <body>
-            <div id="app"></div>
-            <script type="module" src="./src/index.ts"></script>
-          </body>
-        `,
-        'src/index.css': css`@import 'tailwindcss';`,
-        'src/index.ts': ts`
-          import './index.css'
-
-          document.querySelector('#app').innerHTML = \`
-            <div class="underline m-2">Hello, world!</div>
-          \`
-        `,
-        'server.ts': ts`
-          import css from './src/index.css?url'
-
-          document.querySelector('#app').innerHTML = \`
-            <link rel="stylesheet" href="\${css}">
-            <div class="overline m-3">Hello, world!</div>
-          \`
-        `,
-      },
-    },
-    async ({ fs, exec, expect }) => {
-      await exec('pnpm vite build --ssr server.ts')
-
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [filename] = files[0]
-
-      await fs.expectFileToContain(filename, [
-        candidate`underline`,
-        candidate`m-2`,
-        candidate`overline`,
-        candidate`m-3`,
-      ])
-    },
-  )
-})
diff --git a/integrations/vite/svelte.test.ts b/integrations/vite/svelte.test.ts
deleted file mode 100644
index e186c3f85..000000000
--- a/integrations/vite/svelte.test.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-import { candidate, css, html, json, retryAssertion, test, ts } from '../utils'
-
-test(
-  'production build',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "svelte": "^5",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "@sveltejs/vite-plugin-svelte": "^5",
-            "@tailwindcss/vite": "workspace:^",
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import { defineConfig } from 'vite'
-        import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig({
-          plugins: [
-            svelte({
-              preprocess: [vitePreprocess()],
-            }),
-            tailwindcss(),
-          ],
-        })
-      `,
-      'index.html': html`
-        <!doctype html>
-        <html>
-          <body>
-            <div id="app"></div>
-            <script type="module" src="./src/main.ts"></script>
-          </body>
-        </html>
-      `,
-      'src/main.ts': ts`
-        import App from './App.svelte'
-        const app = new App({
-          target: document.body,
-        })
-      `,
-      'src/index.css': css`@import 'tailwindcss';`,
-      'src/App.svelte': html`
-        <script>
-          import './index.css'
-          let name = 'world'
-        </script>
-
-        <h1 class="global local underline">Hello {name}!</h1>
-
-        <style>
-          @import './other.css';
-          @reference 'tailwindcss';
-        </style>
-      `,
-      'src/other.css': css`
-        .local {
-          @apply text-red-500;
-          animation: 2s ease-in-out infinite localKeyframes;
-        }
-
-        :global(.global) {
-          @apply text-green-500;
-          animation: 2s ease-in-out infinite globalKeyframes;
-        }
-
-        @keyframes -global-globalKeyframes {
-          0% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 100%;
-          }
-        }
-
-        @keyframes localKeyframes {
-          0% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 100%;
-          }
-        }
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    let output = await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-
-    await fs.expectFileToContain(files[0][0], [
-      candidate`underline`,
-      '.global{color:var(--color-green-500,oklch(72.3% .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
-      /\.local.svelte-.*\{color:var\(--color-red-500,oklch\(63\.7% \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
-      /@keyframes globalKeyframes\{/,
-      /@keyframes svelte-.*-localKeyframes\{/,
-    ])
-
-    // Should not print any warnings
-    expect(output).not.toContain('vite-plugin-svelte')
-  },
-)
-
-test(
-  'watch mode',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "svelte": "^5",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "@sveltejs/vite-plugin-svelte": "^5",
-            "@tailwindcss/vite": "workspace:^",
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import { defineConfig } from 'vite'
-        import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig({
-          plugins: [
-            svelte({
-              preprocess: [vitePreprocess()],
-            }),
-            tailwindcss(),
-          ],
-        })
-      `,
-      'index.html': html`
-        <!doctype html>
-        <html>
-          <body>
-            <div id="app"></div>
-            <script type="module" src="./src/main.ts"></script>
-          </body>
-        </html>
-      `,
-      'src/main.ts': ts`
-        import App from './App.svelte'
-        const app = new App({
-          target: document.body,
-        })
-      `,
-      'src/App.svelte': html`
-        <script>
-          import './index.css'
-          let name = 'world'
-        </script>
-
-        <h1 class="local global underline">Hello {name}!</h1>
-
-        <style>
-          @import './other.css';
-          @reference 'tailwindcss';
-        </style>
-      `,
-      'src/index.css': css` @import 'tailwindcss'; `,
-      'src/other.css': css`
-        .local {
-          @apply text-red-500;
-          animation: 2s ease-in-out infinite localKeyframes;
-        }
-
-        :global(.global) {
-          @apply text-green-500;
-          animation: 2s ease-in-out infinite globalKeyframes;
-        }
-
-        @keyframes -global-globalKeyframes {
-          0% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 100%;
-          }
-        }
-
-        @keyframes localKeyframes {
-          0% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 100%;
-          }
-        }
-      `,
-    },
-  },
-  async ({ fs, spawn, expect }) => {
-    let process = await spawn(`pnpm vite build --watch`)
-    await process.onStdout((m) => m.includes('built in'))
-
-    await retryAssertion(async () => {
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [, css] = files[0]
-      expect(css).toContain(candidate`underline`)
-      expect(css).toContain(
-        '.global{color:var(--color-green-500,oklch(72.3% .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
-      )
-      expect(css).toMatch(
-        /\.local.svelte-.*\{color:var\(--color-red-500,oklch\(63\.7% \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
-      )
-      expect(css).toMatch(/@keyframes globalKeyframes\{/)
-      expect(css).toMatch(/@keyframes svelte-.*-localKeyframes\{/)
-    })
-
-    await fs.write(
-      'src/App.svelte',
-      (await fs.read('src/App.svelte')).replace('underline', 'font-bold bar'),
-    )
-
-    await fs.write(
-      'src/other.css',
-      `${await fs.read('src/other.css')}\n.bar { @apply text-pink-500; }`,
-    )
-
-    await retryAssertion(async () => {
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-      let [, css] = files[0]
-      expect(css).toContain(candidate`font-bold`)
-      expect(css).toContain(
-        '.global{color:var(--color-green-500,oklch(72.3% .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
-      )
-      expect(css).toMatch(
-        /\.local.svelte-.*\{color:var\(--color-red-500,oklch\(63\.7% \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
-      )
-      expect(css).toMatch(/@keyframes globalKeyframes\{/)
-      expect(css).toMatch(/@keyframes svelte-.*-localKeyframes\{/)
-      expect(css).toMatch(
-        /\.bar.svelte-.*\{color:var\(--color-pink-500,oklch\(65\.6% \.241 354\.308\)\)\}/,
-      )
-    })
-  },
-)
diff --git a/integrations/vite/sveltekit.test.ts b/integrations/vite/sveltekit.test.ts
deleted file mode 100644
index 92e855da9..000000000
--- a/integrations/vite/sveltekit.test.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { candidate, css, html, js, json, test, ts } from '../utils'
-
-test(
-  'sveltekit build resolves package plugins',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "scripts": {
-            "prepare": "svelte-kit sync || echo ''"
-          },
-          "dependencies": {
-            "svelte": "^5",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "@sveltejs/adapter-auto": "^6",
-            "@sveltejs/kit": "^2",
-            "@tailwindcss/forms": "^0.5.11",
-            "@tailwindcss/vite": "workspace:^",
-            "vite": "^8"
-          }
-        }
-      `,
-      'svelte.config.js': js`
-        import adapter from '@sveltejs/adapter-auto'
-
-        export default {
-          kit: {
-            adapter: adapter(),
-          },
-        }
-      `,
-      'vite.config.ts': ts`
-        import tailwindcss from '@tailwindcss/vite'
-        import { sveltekit } from '@sveltejs/kit/vite'
-        import { defineConfig } from 'vite'
-
-        export default defineConfig({
-          build: { cssMinify: false },
-          plugins: [tailwindcss(), sveltekit()],
-        })
-      `,
-      'src/app.html': html`
-        <!doctype html>
-        <html lang="en">
-          <head>
-            %sveltekit.head%
-          </head>
-          <body data-sveltekit-preload-data="hover">
-            <div style="display: contents">%sveltekit.body%</div>
-          </body>
-        </html>
-      `,
-      'src/routes/+layout.svelte': html`
-        <script>
-          import '../app.css'
-        </script>
-
-        <slot />
-      `,
-      'src/routes/+page.svelte': html`
-        <div class="form-input">Hello, world!</div>
-      `,
-      'src/app.css': css`
-        @import 'tailwindcss';
-        @plugin '@tailwindcss/forms';
-      `,
-    },
-  },
-  async ({ exec, fs, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('.svelte-kit/output/client/**/*.css')
-    expect(files.length).toBeGreaterThan(0)
-
-    await fs.expectFileToContain(files[0][0], [candidate`form-input`])
-  },
-)
diff --git a/integrations/vite/url-rewriting.test.ts b/integrations/vite/url-rewriting.test.ts
deleted file mode 100644
index 500fe6d71..000000000
--- a/integrations/vite/url-rewriting.test.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { describe } from 'vitest'
-import { binary, css, html, svg, test, ts, txt } from '../utils'
-
-const SIMPLE_IMAGE = `iVBORw0KGgoAAAANSUhEUgAAADAAAAAlAQAAAAAsYlcCAAAACklEQVR4AWMYBQABAwABRUEDtQAAAABJRU5ErkJggg==`
-
-describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
-  test(
-    'can rewrite urls in production builds',
-    {
-      fs: {
-        'package.json': txt`
-          {
-            "type": "module",
-            "dependencies": {
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "@tailwindcss/vite": "workspace:^",
-              "vite": "^7"
-            }
-          }
-        `,
-        'vite.config.ts': ts`
-          import tailwindcss from '@tailwindcss/vite'
-          import { defineConfig } from 'vite'
-
-          export default defineConfig({
-            plugins: [tailwindcss()],
-            build: {
-              assetsInlineLimit: 256,
-              cssMinify: false,
-            },
-            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
-          })
-        `,
-        'index.html': html`
-          <!doctype html>
-          <html>
-            <head>
-              <link rel="stylesheet" href="./src/app.css" />
-            </head>
-            <body>
-              <div id="app"></div>
-            </body>
-          </html>
-        `,
-        'src/app.css': css`
-          @reference 'tailwindcss';
-          @import './dir-1/bar.css';
-          @import './dir-1/dir-2/baz.css';
-          @import './dir-1/dir-2/vector.css';
-        `,
-        'src/dir-1/bar.css': css`
-          .test1 {
-            background-image: url('../../resources/image.png');
-          }
-        `,
-        'src/dir-1/dir-2/baz.css': css`
-          .test2 {
-            background-image: url('../../../resources/image.png');
-          }
-        `,
-        'src/dir-1/dir-2/vector.css': css`
-          @import './dir-3/vector.css';
-          .test3 {
-            background-image: url('../../../resources/vector.svg');
-          }
-        `,
-        'src/dir-1/dir-2/dir-3/vector.css': css`
-          .test4 {
-            background-image: url('./vector-2.svg');
-          }
-        `,
-        'resources/image.png': binary(SIMPLE_IMAGE),
-        'resources/vector.svg': svg`
-          <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
-            <rect width="100%" height="100%" fill="red" />
-            <circle cx="200" cy="100" r="80" fill="green" />
-            <rect width="100%" height="100%" fill="red" />
-            <circle cx="200" cy="100" r="80" fill="green" />
-          </svg>
-        `,
-        'src/dir-1/dir-2/dir-3/vector-2.svg': svg`
-          <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
-            <rect width="100%" height="100%" fill="blue" />
-            <circle cx="200" cy="100" r="80" fill="green" />
-            <rect width="100%" height="100%" fill="red" />
-            <circle cx="200" cy="100" r="80" fill="pink" />
-          </svg>
-       `,
-      },
-    },
-    async ({ fs, exec, expect }) => {
-      await exec('pnpm vite build')
-
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-
-      await fs.expectFileToContain(files[0][0], [SIMPLE_IMAGE])
-
-      let images = await fs.glob('dist/**/*.svg')
-      expect(images).toHaveLength(2)
-
-      await fs.expectFileToContain(files[0][0], [/\/assets\/vector-.*?\.svg/])
-    },
-  )
-})
diff --git a/integrations/vite/virtual-modules.test.ts b/integrations/vite/virtual-modules.test.ts
deleted file mode 100644
index 12eadb6c7..000000000
Binary files a/integrations/vite/virtual-modules.test.ts and /dev/null differ
diff --git a/integrations/vite/vue.test.ts b/integrations/vite/vue.test.ts
deleted file mode 100644
index b04f57c6b..000000000
--- a/integrations/vite/vue.test.ts
+++ /dev/null
@@ -1,380 +0,0 @@
-import { stripVTControlCharacters } from 'node:util'
-import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
-
-test(
-  'production build',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "vue": "^3.4.37",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "@vitejs/plugin-vue": "^5.1.2",
-            "@tailwindcss/vite": "workspace:^",
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import { defineConfig } from 'vite'
-        import vue from '@vitejs/plugin-vue'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig({
-          plugins: [vue(), tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <!doctype html>
-        <html>
-          <body>
-            <div id="app"></div>
-            <script type="module" src="./src/main.ts"></script>
-          </body>
-        </html>
-      `,
-      'src/main.ts': ts`
-        import { createApp } from 'vue'
-        import App from './App.vue'
-
-        createApp(App).mount('#app')
-      `,
-      'src/App.vue': html`
-        <style>
-          @import 'tailwindcss';
-          .foo {
-            @apply text-red-500;
-          }
-        </style>
-        <style scoped>
-          @import 'tailwindcss' reference;
-          :deep(.bar) {
-            color: red;
-          }
-        </style>
-        <template>
-          <div class="underline foo bar">Hello Vue!</div>
-        </template>
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm vite build')
-
-    let files = await fs.glob('dist/**/*.css')
-    expect(files).toHaveLength(1)
-
-    await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`foo`])
-    await fs.expectFileToContain(files[0][0], ['.bar{'])
-  },
-)
-
-{
-  const VUE_COMPONENT_COUNT = 1_000
-
-  let vueComponentsWithReferences = Object.fromEntries(
-    Array.from({ length: VUE_COMPONENT_COUNT }, (_, idx) => [
-      `src/components/Component${idx}.vue`,
-      html`
-        <template>
-          <div class="content-['component-${idx}']">Component ${idx}</div>
-        </template>
-
-        <style>
-          @reference '../main.css';
-
-          .component-${idx} {
-            @apply text-red-500;
-          }
-        </style>
-      `,
-    ]),
-  )
-
-  let vueComponentImports = Array.from(
-    { length: VUE_COMPONENT_COUNT },
-    (_, idx) => `import Component${idx} from './components/Component${idx}.vue'`,
-  ).join('\n')
-
-  let vueComponentUsages = Array.from(
-    { length: VUE_COMPONENT_COUNT },
-    (_, idx) => `<Component${idx} class="component-${idx}" />`,
-  ).join('\n')
-
-  test(
-    'production build with many Vue style blocks referencing the main stylesheet',
-    {
-      fs: {
-        'package.json': json`
-          {
-            "type": "module",
-            "dependencies": {
-              "vue": "^3.4.37",
-              "tailwindcss": "workspace:^"
-            },
-            "devDependencies": {
-              "@vitejs/plugin-vue": "^5.1.2",
-              "@tailwindcss/vite": "workspace:^",
-              "vite": "^7"
-            }
-          }
-        `,
-        'vite.config.ts': ts`
-          import { defineConfig } from 'vite'
-          import vue from '@vitejs/plugin-vue'
-          import tailwindcss from '@tailwindcss/vite'
-
-          export default defineConfig({
-            plugins: [vue(), tailwindcss()],
-          })
-        `,
-        'index.html': html`
-          <!doctype html>
-          <html>
-            <body>
-              <div id="app"></div>
-              <script type="module" src="./src/main.ts"></script>
-            </body>
-          </html>
-        `,
-        'src/main.css': css`@import 'tailwindcss';`,
-        'src/main.ts': ts`
-          import { createApp } from 'vue'
-          import './main.css'
-          import App from './App.vue'
-
-          createApp(App).mount('#app')
-        `,
-        'src/App.vue': html`
-          <script setup>
-            ${vueComponentImports}
-          </script>
-
-          <template>${vueComponentUsages}</template>
-        `,
-        ...vueComponentsWithReferences,
-      },
-    },
-    async ({ fs, exec, expect }) => {
-      await exec('pnpm vite build')
-
-      let files = await fs.glob('dist/**/*.css')
-      expect(files).toHaveLength(1)
-
-      await fs.expectFileToContain(files[0][0], [
-        candidate`content-['component-0']`,
-        candidate`component-0`,
-        candidate`content-['component-99']`,
-        candidate`component-99`,
-        candidate`content-['component-999']`,
-        candidate`component-999`,
-      ])
-    },
-  )
-}
-
-test(
-  'error when using `@apply` without `@reference`',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "vue": "^3.4.37",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "@vitejs/plugin-vue": "^5.1.2",
-            "@tailwindcss/vite": "workspace:^",
-            "vite": "^7"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import { defineConfig } from 'vite'
-        import vue from '@vitejs/plugin-vue'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig({
-          plugins: [vue(), tailwindcss()],
-        })
-      `,
-      'index.html': html`
-        <!doctype html>
-        <html>
-          <body>
-            <div id="app"></div>
-            <script type="module" src="./src/main.ts"></script>
-          </body>
-        </html>
-      `,
-      'src/main.ts': ts`
-        import { createApp } from 'vue'
-        import App from './App.vue'
-
-        createApp(App).mount('#app')
-      `,
-      'src/App.vue': html`
-        <template>
-          <div class="foo">Hello Vue!</div>
-        </template>
-
-        <style>
-          .foo {
-            @apply text-red-500;
-          }
-        </style>
-      `,
-    },
-  },
-  async ({ exec, expect }) => {
-    expect.assertions(1)
-
-    try {
-      await exec('pnpm vite build', {}, { ignoreStdErr: true })
-    } catch (error) {
-      let [, message] =
-        /error during build:([\s\S]*?)file:/g.exec(
-          stripVTControlCharacters(error.message.replace(/\r?\n/g, '\n')),
-        ) ?? []
-      expect(message.trim()).toMatchInlineSnapshot(
-        `"[@tailwindcss/vite:generate:build] Cannot apply unknown utility class \`text-red-500\`. Are you using CSS modules or similar and missing \`@reference\`? https://tailwindcss.com/docs/functions-and-directives#reference-directive"`,
-      )
-    }
-  },
-)
-
-// https://github.com/tailwindlabs/tailwindcss/issues/20320
-test(
-  'editing a scanned `.vue` file that is not loaded as a module does not trigger a full reload',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "type": "module",
-          "dependencies": {
-            "vue": "^3.4.37",
-            "tailwindcss": "workspace:^"
-          },
-          "devDependencies": {
-            "@vitejs/plugin-vue": "^6",
-            "@tailwindcss/vite": "workspace:^",
-            "vite": "^8"
-          }
-        }
-      `,
-      'vite.config.ts': ts`
-        import fs from 'node:fs'
-        import path from 'node:path'
-        import { defineConfig } from 'vite'
-        import vue from '@vitejs/plugin-vue'
-        import tailwindcss from '@tailwindcss/vite'
-
-        export default defineConfig({
-          plugins: [
-            vue(),
-            tailwindcss(),
-            {
-              // Log update and full-reload HMR payloads to a file so the
-              // test can assert on them. Custom events are not logged
-              // because \`@vitejs/plugin-vue\` sends a \`file-changed\` event
-              // for every file change, including changes to the log file
-              // itself, which would cause an infinite feedback loop.
-              name: 'hmr-wiretap',
-              configureServer(server) {
-                let logFile = path.resolve('hmr.log')
-                fs.writeFileSync(logFile, '')
-                for (let environment of Object.values(server.environments)) {
-                  let send = environment.hot.send.bind(environment.hot)
-                  environment.hot.send = (payload) => {
-                    if (payload.type === 'update' || payload.type === 'full-reload') {
-                      fs.appendFileSync(logFile, JSON.stringify(payload) + '\\n')
-                    }
-                    return send(payload)
-                  }
-                }
-              },
-            },
-          ],
-        })
-      `,
-      'index.html': html`
-        <!doctype html>
-        <html>
-          <head>
-            <link rel="stylesheet" href="./src/index.css" />
-          </head>
-          <body>
-            <div id="app"></div>
-            <script type="module" src="./src/main.ts"></script>
-          </body>
-        </html>
-      `,
-      'src/index.css': css`@import 'tailwindcss';`,
-      'src/main.ts': ts`
-        import { createApp } from 'vue'
-        import App from './App.vue'
-
-        createApp(App).mount('#app')
-      `,
-      'src/App.vue': html`
-        <template>
-          <div class="content-['src/App.vue']">Hello Vue!</div>
-        </template>
-      `,
-
-      // This file is scanned by Tailwind but never imported, so it is not
-      // part of the loaded module graph (e.g. a lazy route that hasn't been
-      // visited yet)
-      'src/LazyRoute.vue': html`
-        <template>
-          <div class="content-['src/LazyRoute.vue']">Lazy</div>
-        </template>
-      `,
-    },
-  },
-  async ({ spawn, fs, expect }) => {
-    let process = await spawn('pnpm vite dev')
-    await process.onStdout((m) => m.includes('ready in'))
-
-    let url = ''
-    await process.onStdout((m) => {
-      let match = /Local:\s*(http.*)\//.exec(m)
-      if (match) url = match[1]
-      return Boolean(url)
-    })
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/index.html')
-      expect(styles).toContain(candidate`content-['src/App.vue']`)
-      expect(styles).toContain(candidate`content-['src/LazyRoute.vue']`)
-    })
-
-    // Load `main.ts` and `App.vue` as real modules, like a browser visiting
-    // the page would
-    await fetch(`${url}/src/main.ts`)
-    await fetch(`${url}/src/App.vue`)
-
-    // Changing the scanned but unloaded `.vue` file should not trigger a
-    // full reload, but new classes should still apply
-    await fs.write(
-      'src/LazyRoute.vue',
-      html`
-        <template>
-          <div class="content-['updated:src/LazyRoute.vue']">Lazy</div>
-        </template>
-      `,
-    )
-
-    await retryAssertion(async () => {
-      let styles = await fetchStyles(url, '/index.html')
-      expect(styles).toContain(candidate`content-['updated:src/LazyRoute.vue']`)
-    })
-    expect(await fs.read('hmr.log')).not.toContain('full-reload')
-  },
-)
diff --git a/integrations/vitest.config.mts b/integrations/vitest.config.mts
deleted file mode 100644
index 6855b146b..000000000
--- a/integrations/vitest.config.mts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineProject } from 'vitest/config'
-
-export default defineProject({
-  test: {
-    hideSkippedTests: true,
-  },
-})
diff --git a/integrations/webpack/index.test.ts b/integrations/webpack/index.test.ts
deleted file mode 100644
index 2a91411d2..000000000
--- a/integrations/webpack/index.test.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { css, html, js, json, test } from '../utils'
-
-test(
-  'webpack + PostCSS (watch)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "main": "./src/index.js",
-          "browser": "./src/index.js",
-          "dependencies": {
-            "css-loader": "^6",
-            "postcss": "^8",
-            "postcss-loader": "^7",
-            "webpack": "^5",
-            "webpack-cli": "^5",
-            "mini-css-extract-plugin": "^2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/postcss": "workspace:^"
-          }
-        }
-      `,
-      'postcss.config.js': js`
-        /** @type {import('postcss-load-config').Config} */
-        module.exports = {
-          plugins: {
-            '@tailwindcss/postcss': {},
-          },
-        }
-      `,
-      'webpack.config.js': js`
-        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-        module.exports = {
-          output: {
-            clean: true,
-          },
-          plugins: [new MiniCssExtractPlugin()],
-          module: {
-            rules: [
-              {
-                test: /.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
-              },
-            ],
-          },
-        }
-      `,
-      'src/index.js': js`import './index.css'`,
-      'src/index.html': html`
-        <div class="flex"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/unrelated.module.css': css`
-        .module {
-          color: var(--color-blue-500);
-        }
-      `,
-    },
-  },
-  async ({ fs, spawn, exec, expect }) => {
-    // Generate the initial build so output CSS files exist on disk
-    await exec('pnpm webpack --mode=development')
-
-    // NOTE: We are writing to an output CSS file which is not being ignored by
-    // `.gitignore` nor marked with `@source not`. This should not result in an
-    // infinite loop.
-    let process = await spawn('pnpm webpack --mode=development --watch')
-    await process.onStdout((m) => m.includes('compiled successfully in'))
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      :root, :host {
-        --color-blue-500: oklch(62.3% 0.214 259.815);
-      }
-      .flex {
-        display: flex;
-      }
-      "
-    `)
-
-    await fs.write(
-      'src/unrelated.module.css',
-      css`
-        .module {
-          color: var(--color-blue-500);
-          background-color: var(--color-red-500);
-        }
-      `,
-    )
-    await process.onStdout((m) => m.includes('compiled successfully in'))
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      :root, :host {
-        --color-red-500: oklch(63.7% 0.237 25.331);
-        --color-blue-500: oklch(62.3% 0.214 259.815);
-      }
-      .flex {
-        display: flex;
-      }
-      "
-    `)
-  },
-)
diff --git a/integrations/webpack/loader.test.ts b/integrations/webpack/loader.test.ts
deleted file mode 100644
index 9c3d870af..000000000
--- a/integrations/webpack/loader.test.ts
+++ /dev/null
@@ -1,495 +0,0 @@
-import { css, html, js, json, test } from '../utils'
-
-test(
-  '@tailwindcss/webpack loader (build)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "main": "./src/index.js",
-          "browser": "./src/index.js",
-          "dependencies": {
-            "css-loader": "^6",
-            "webpack": "^5",
-            "webpack-cli": "^5",
-            "mini-css-extract-plugin": "^2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/webpack": "workspace:^"
-          }
-        }
-      `,
-      'webpack.config.js': js`
-        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-        module.exports = {
-          output: {
-            clean: true,
-          },
-          plugins: [new MiniCssExtractPlugin()],
-          module: {
-            rules: [
-              {
-                test: /.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'],
-              },
-            ],
-          },
-        }
-      `,
-      'src/index.js': js`import './index.css'`,
-      'src/index.html': html`
-        <div class="flex"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm webpack --mode=development')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      .flex {
-        display: flex;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  '@tailwindcss/webpack loader (watch)',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "main": "./src/index.js",
-          "browser": "./src/index.js",
-          "dependencies": {
-            "css-loader": "^6",
-            "webpack": "^5",
-            "webpack-cli": "^5",
-            "mini-css-extract-plugin": "^2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/webpack": "workspace:^"
-          }
-        }
-      `,
-      'webpack.config.js': js`
-        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-        module.exports = {
-          output: {
-            clean: true,
-          },
-          plugins: [new MiniCssExtractPlugin()],
-          module: {
-            rules: [
-              {
-                test: /.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'],
-              },
-            ],
-          },
-        }
-      `,
-      'src/index.js': js`import './index.css'`,
-      'src/index.html': html`
-        <div class="flex"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ fs, spawn, exec, expect }) => {
-    // Generate the initial build so output CSS files exist on disk
-    await exec('pnpm webpack --mode=development')
-
-    let process = await spawn('pnpm webpack --mode=development --watch')
-    await process.onStdout((m) => m.includes('compiled successfully in'))
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      .flex {
-        display: flex;
-      }
-      "
-    `)
-
-    // Add a new Tailwind class to the HTML file
-    await fs.write('src/index.html', html`
-        <div class="flex underline"></div>
-      `)
-    await process.onStdout((m) => m.includes('compiled successfully in'))
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      .flex {
-        display: flex;
-      }
-      .underline {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  '@tailwindcss/webpack loader with @apply',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "main": "./src/index.js",
-          "browser": "./src/index.js",
-          "dependencies": {
-            "css-loader": "^6",
-            "webpack": "^5",
-            "webpack-cli": "^5",
-            "mini-css-extract-plugin": "^2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/webpack": "workspace:^"
-          }
-        }
-      `,
-      'webpack.config.js': js`
-        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-        module.exports = {
-          output: {
-            clean: true,
-          },
-          plugins: [new MiniCssExtractPlugin()],
-          module: {
-            rules: [
-              {
-                test: /.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'],
-              },
-            ],
-          },
-        }
-      `,
-      'src/index.js': js`import './index.css'`,
-      'src/index.css': css`
-        @import 'tailwindcss/theme';
-
-        .btn {
-          @apply flex items-center px-4 py-2 rounded-md;
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm webpack --mode=development')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      :root, :host {
-        --spacing: 0.25rem;
-        --radius-md: 0.375rem;
-      }
-      .btn {
-        display: flex;
-        align-items: center;
-        border-radius: var(--radius-md);
-        padding-inline: calc(var(--spacing) * 4);
-        padding-block: calc(var(--spacing) * 2);
-      }
-      "
-    `)
-  },
-)
-
-test(
-  '@tailwindcss/webpack loader with optimization',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "main": "./src/index.js",
-          "browser": "./src/index.js",
-          "dependencies": {
-            "css-loader": "^6",
-            "webpack": "^5",
-            "webpack-cli": "^5",
-            "mini-css-extract-plugin": "^2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/webpack": "workspace:^"
-          }
-        }
-      `,
-      'webpack.config.js': js`
-        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-        module.exports = {
-          output: {
-            clean: true,
-          },
-          plugins: [new MiniCssExtractPlugin()],
-          module: {
-            rules: [
-              {
-                test: /.css$/i,
-                use: [
-                  MiniCssExtractPlugin.loader,
-                  'css-loader',
-                  {
-                    loader: '@tailwindcss/webpack',
-                    options: {
-                      optimize: true,
-                    },
-                  },
-                ],
-              },
-            ],
-          },
-        }
-      `,
-      'src/index.js': js`import './index.css'`,
-      'src/index.html': html`
-        <div class="flex"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm webpack --mode=development')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      .flex{display:flex}
-      "
-    `)
-  },
-)
-
-test(
-  '@tailwindcss/webpack loader with CSS @import',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "main": "./src/index.js",
-          "browser": "./src/index.js",
-          "dependencies": {
-            "css-loader": "^6",
-            "webpack": "^5",
-            "webpack-cli": "^5",
-            "mini-css-extract-plugin": "^2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/webpack": "workspace:^"
-          }
-        }
-      `,
-      'webpack.config.js': js`
-        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-        module.exports = {
-          output: {
-            clean: true,
-          },
-          plugins: [new MiniCssExtractPlugin()],
-          module: {
-            rules: [
-              {
-                test: /.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'],
-              },
-            ],
-          },
-        }
-      `,
-      'src/index.js': js`import './index.css'`,
-      'src/index.html': html`
-        <div class="flex custom-util"></div>
-      `,
-      'src/index.css': css`
-        @import './custom.css';
-        @import 'tailwindcss/theme';
-        @import 'tailwindcss/utilities';
-      `,
-      'src/custom.css': css`
-        /**/
-        @utility custom-util {
-          color: var(--color-red-500);
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm webpack --mode=development')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      :root, :host {
-        --color-red-500: oklch(63.7% 0.237 25.331);
-      }
-      .flex {
-        display: flex;
-      }
-      .custom-util {
-        color: var(--color-red-500);
-      }
-      "
-    `)
-  },
-)
-
-test(
-  '@tailwindcss/webpack loader with @plugin',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "main": "./src/index.js",
-          "browser": "./src/index.js",
-          "dependencies": {
-            "css-loader": "^6",
-            "webpack": "^5",
-            "webpack-cli": "^5",
-            "mini-css-extract-plugin": "^2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/webpack": "workspace:^"
-          }
-        }
-      `,
-      'webpack.config.js': js`
-        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-        module.exports = {
-          output: {
-            clean: true,
-          },
-          plugins: [new MiniCssExtractPlugin()],
-          module: {
-            rules: [
-              {
-                test: /.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'],
-              },
-            ],
-          },
-        }
-      `,
-      'src/index.js': js`import './index.css'`,
-      'src/index.html': html`
-        <div class="custom-underline"></div>
-      `,
-      'src/index.css': css`
-        @import 'tailwindcss/utilities';
-        @plugin './plugin.js';
-      `,
-      'src/plugin.js': js`
-        export default function ({ addUtilities }) {
-          addUtilities({
-            '.custom-underline': {
-              'border-bottom': '1px solid green',
-            },
-          })
-        }
-      `,
-    },
-  },
-  async ({ fs, exec, expect }) => {
-    await exec('pnpm webpack --mode=development')
-
-    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
-      "
-      --- ./dist/main.css ---
-      .custom-underline {
-        border-bottom: 1px solid green;
-      }
-      "
-    `)
-  },
-)
-
-test(
-  '@tailwindcss/webpack loader isolates cache by resource including query',
-  {
-    fs: {
-      'package.json': json`
-        {
-          "main": "./src/index.js",
-          "browser": "./src/index.js",
-          "dependencies": {
-            "css-loader": "^6",
-            "webpack": "^5",
-            "webpack-cli": "^5",
-            "mini-css-extract-plugin": "^2",
-            "tailwindcss": "workspace:^",
-            "@tailwindcss/webpack": "workspace:^"
-          }
-        }
-      `,
-      'webpack.config.js': js`
-        let MiniCssExtractPlugin = require('mini-css-extract-plugin')
-        let path = require('node:path')
-
-        module.exports = {
-          mode: 'development',
-          entry: {
-            a: './src/a.js',
-            b: './src/b.js',
-          },
-          output: {
-            clean: true,
-          },
-          plugins: [new MiniCssExtractPlugin()],
-          module: {
-            rules: [
-              {
-                test: /.css$/i,
-                use: [
-                  MiniCssExtractPlugin.loader,
-                  'css-loader',
-                  '@tailwindcss/webpack',
-                  path.resolve(__dirname, 'query-loader.js'),
-                ],
-              },
-            ],
-          },
-        }
-      `,
-      'query-loader.js': js`
-        module.exports = function (source) {
-          if (this.resourceQuery.includes('a')) {
-            return '@import "tailwindcss/utilities"; @utility only-a {color: var(--color-red-500);}'
-          }
-
-          if (this.resourceQuery.includes('b')) {
-            return '@import "tailwindcss/utilities"; @utility only-b {color: var(--color-blue-500);}'
-          }
-
-          return source
-        }
-      `,
-      'src/a.js': js`import './index.css?a'`,
-      'src/b.js': js`import './index.css?b'`,
-      'src/index.css': css``,
-    },
-  },
-  async ({ fs, exec }) => {
-    await exec('pnpm webpack --mode=development')
-
-    await fs.expectFileToContain('dist/a.css', ['only-a', '--color-red-500'])
-    await fs.expectFileToContain('dist/b.css', ['only-b', '--color-blue-500'])
-    await fs.expectFileNotToContain('dist/a.css', ['only-b', '--color-blue-500'])
-    await fs.expectFileNotToContain('dist/b.css', ['only-a', '--color-red-500'])
-  },
-)
diff --git a/oxide/.gitignore b/oxide/.gitignore
new file mode 100644
index 000000000..2f7896d1d
--- /dev/null
+++ b/oxide/.gitignore
@@ -0,0 +1 @@
+target/
diff --git a/oxide/Cargo.lock b/oxide/Cargo.lock
new file mode 100644
index 000000000..7404bde1d
--- /dev/null
+++ b/oxide/Cargo.lock
@@ -0,0 +1,1200 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 3
+
+[[package]]
+name = "aho-corasick"
+version = "0.7.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc936419f96fa211c1b9166887b38e5e40b19958e5b895be7c1f93adec7071ac"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "aho-corasick"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67fc08ce920c31afb70f013dcce1bfc3a3195de6a228474e45e1f145b36f8d04"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "atty"
+version = "0.2.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9b39be18770d11421cdb1b9947a45dd3f37e93092cbf377614828a319d5fee8"
+dependencies = [
+ "hermit-abi 0.1.19",
+ "libc",
+ "winapi",
+]
+
+[[package]]
+name = "autocfg"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
+
+[[package]]
+name = "bitflags"
+version = "1.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
+
+[[package]]
+name = "bitflags"
+version = "2.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6776fc96284a0bb647b615056fc496d1fe1644a7ab01829818a6d91cae888b84"
+
+[[package]]
+name = "bstr"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a246e68bb43f6cd9db24bea052a53e40405417c5fb372e3d1a8a7f770a564ef5"
+dependencies = [
+ "memchr",
+ "once_cell",
+ "regex-automata",
+ "serde",
+]
+
+[[package]]
+name = "bumpalo"
+version = "3.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a3e2c3daef883ecc1b5d58c15adae93470a91d425f3532ba1695849656af3fc1"
+
+[[package]]
+name = "byteorder"
+version = "1.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "14c189c53d098945499cdfa7ecc63567cf3886b3332b312a5b4585d8d3a6a610"
+
+[[package]]
+name = "cast"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "37b2a672a2cb129a2e41c10b1224bb368f9f37a2b16b612598138befd7b37eb5"
+
+[[package]]
+name = "cc"
+version = "1.0.79"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50d30906286121d95be3d479533b458f87493b30a4b5f79a607db8f5d11aa91f"
+
+[[package]]
+name = "cfg-if"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+
+[[package]]
+name = "clap"
+version = "2.34.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a0610544180c38b88101fecf2dd634b174a62eef6946f84dfc6a7127512b381c"
+dependencies = [
+ "bitflags 1.3.2",
+ "textwrap",
+ "unicode-width",
+]
+
+[[package]]
+name = "convert_case"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec182b0ca2f35d8fc196cf3404988fd8b8c739a4d270ff118a398feb0cbec1ca"
+dependencies = [
+ "unicode-segmentation",
+]
+
+[[package]]
+name = "criterion"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b01d6de93b2b6c65e17c634a26653a29d107b3c98c607c765bf38d041531cd8f"
+dependencies = [
+ "atty",
+ "cast",
+ "clap",
+ "criterion-plot",
+ "csv",
+ "itertools",
+ "lazy_static",
+ "num-traits",
+ "oorandom",
+ "plotters",
+ "rayon",
+ "regex",
+ "serde",
+ "serde_cbor",
+ "serde_derive",
+ "serde_json",
+ "tinytemplate",
+ "walkdir",
+]
+
+[[package]]
+name = "criterion-plot"
+version = "0.4.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2673cc8207403546f45f5fd319a974b1e6983ad1a3ee7e6041650013be041876"
+dependencies = [
+ "cast",
+ "itertools",
+]
+
+[[package]]
+name = "crossbeam"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2801af0d36612ae591caa9568261fddce32ce6e08a7275ea334a06a4ad021a2c"
+dependencies = [
+ "cfg-if",
+ "crossbeam-channel",
+ "crossbeam-deque",
+ "crossbeam-epoch",
+ "crossbeam-queue",
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-channel"
+version = "0.5.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a33c2bf77f2df06183c3aa30d1e96c0695a313d4f9c453cc3762a6db39f99200"
+dependencies = [
+ "cfg-if",
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-deque"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ce6fd6f855243022dcecf8702fef0c297d4338e226845fe067f6341ad9fa0cef"
+dependencies = [
+ "cfg-if",
+ "crossbeam-epoch",
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-epoch"
+version = "0.9.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "46bd5f3f85273295a9d14aedfb86f6aadbff6d8f5295c4a9edb08e819dcf5695"
+dependencies = [
+ "autocfg",
+ "cfg-if",
+ "crossbeam-utils",
+ "memoffset",
+ "scopeguard",
+]
+
+[[package]]
+name = "crossbeam-queue"
+version = "0.3.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d1cfb3ea8a53f37c40dea2c7bedcbd88bdfae54f5e2175d6ecaff1c988353add"
+dependencies = [
+ "cfg-if",
+ "crossbeam-utils",
+]
+
+[[package]]
+name = "crossbeam-utils"
+version = "0.8.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c063cd8cc95f5c377ed0d4b49a4b21f632396ff690e8470c29b3359b346984b"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "csv"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b015497079b9a9d69c02ad25de6c0a6edef051ea6360a327d0bd05802ef64ad"
+dependencies = [
+ "csv-core",
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "csv-core"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2b2466559f260f48ad25fe6317b3c8dac77b5bdb5763ac7d9d6103530663bc90"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "ctor"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "990a40740adf249724a6000c0fc4bd574712f50bb17c2d6f6cec837ae2f0ee75"
+dependencies = [
+ "quote",
+ "syn 2.0.18",
+]
+
+[[package]]
+name = "either"
+version = "1.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7fcaabb2fef8c910e7f4c7ce9f67a1283a1715879a7c230ca9d6d1ae31f16d91"
+
+[[package]]
+name = "errno"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4bcfec3a70f97c962c307b2d2c56e358cf1d00b558d74262b5f929ee8cc7e73a"
+dependencies = [
+ "errno-dragonfly",
+ "libc",
+ "windows-sys 0.48.0",
+]
+
+[[package]]
+name = "errno-dragonfly"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aa68f1b12764fab894d2755d2518754e71b4fd80ecfb822714a1206c2aab39bf"
+dependencies = [
+ "cc",
+ "libc",
+]
+
+[[package]]
+name = "fastrand"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e51093e27b0797c359783294ca4f0a911c270184cb10f85783b118614a1501be"
+dependencies = [
+ "instant",
+]
+
+[[package]]
+name = "fnv"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
+
+[[package]]
+name = "fxhash"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c31b6d751ae2c7f11320402d34e41349dd1016f8d5d45e48c4312bc8625af50c"
+dependencies = [
+ "byteorder",
+]
+
+[[package]]
+name = "globset"
+version = "0.4.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "029d74589adefde59de1a0c4f4732695c32805624aec7b68d91503d4dba79afc"
+dependencies = [
+ "aho-corasick 0.7.20",
+ "bstr",
+ "fnv",
+ "log",
+ "regex",
+]
+
+[[package]]
+name = "globwalk"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93e3af942408868f6934a7b85134a3230832b9977cf66125df2f9edcfce4ddcc"
+dependencies = [
+ "bitflags 1.3.2",
+ "ignore",
+ "walkdir",
+]
+
+[[package]]
+name = "half"
+version = "1.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eabb4a44450da02c90444cf74558da904edde8fb4e9035a9a6a4e15445af0bd7"
+
+[[package]]
+name = "hermit-abi"
+version = "0.1.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62b467343b94ba476dcb2500d242dadbb39557df889310ac77c5d99100aaac33"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "hermit-abi"
+version = "0.2.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee512640fe35acbfb4bb779db6f0d80704c2cacfa2e39b601ef3e3f47d1ae4c7"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "hermit-abi"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fed44880c466736ef9a5c5b5facefb5ed0785676d0c02d612db14e54f0d84286"
+
+[[package]]
+name = "ignore"
+version = "0.4.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dbe7873dab538a9a44ad79ede1faf5f30d49f9a5c883ddbab48bce81b64b7492"
+dependencies = [
+ "globset",
+ "lazy_static",
+ "log",
+ "memchr",
+ "regex",
+ "same-file",
+ "thread_local",
+ "walkdir",
+ "winapi-util",
+]
+
+[[package]]
+name = "instant"
+version = "0.1.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a5bbe824c507c5da5956355e86a746d82e0e1464f65d862cc5e71da70e94b2c"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "io-lifetimes"
+version = "1.0.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eae7b9aee968036d54dce06cebaefd919e4472e753296daccd6d344e3e2df0c2"
+dependencies = [
+ "hermit-abi 0.3.1",
+ "libc",
+ "windows-sys 0.48.0",
+]
+
+[[package]]
+name = "itertools"
+version = "0.10.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b0fd2260e829bddf4cb6ea802289de2f86d6a7a690192fbe91b3f46e0f2c8473"
+dependencies = [
+ "either",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "453ad9f582a441959e5f0d088b02ce04cfe8d51a8eaf077f12ac6d3e94164ca6"
+
+[[package]]
+name = "js-sys"
+version = "0.3.63"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f37a4a5928311ac501dee68b3c7613a1037d0edb30c8e5427bd832d55d1b790"
+dependencies = [
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "lazy_static"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
+
+[[package]]
+name = "libc"
+version = "0.2.144"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2b00cc1c228a6782d0f076e7b232802e0c5689d41bb5df366f2a6b6621cfdfe1"
+
+[[package]]
+name = "libloading"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b67380fd3b2fbe7527a606e18729d21c6f3951633d0500574c4dc22d2d638b9f"
+dependencies = [
+ "cfg-if",
+ "winapi",
+]
+
+[[package]]
+name = "linux-raw-sys"
+version = "0.3.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef53942eb7bf7ff43a617b3e2c1c4a5ecf5944a7c1bc12d7ee39bbb15e5c1519"
+
+[[package]]
+name = "log"
+version = "0.4.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "518ef76f2f87365916b142844c16d8fefd85039bc5699050210a7778ee1cd1de"
+
+[[package]]
+name = "matchers"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8263075bb86c5a1b1427b5ae862e8889656f126e9f77c484496e8b47cf5c5558"
+dependencies = [
+ "regex-automata",
+]
+
+[[package]]
+name = "memchr"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2dffe52ecf27772e601905b7522cb4ef790d2cc203488bbd0e2fe85fcb74566d"
+
+[[package]]
+name = "memoffset"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d61c719bcfbcf5d62b3a09efa6088de8c54bc0bfcd3ea7ae39fcc186108b8de1"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "napi"
+version = "2.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7f0a2e93526dd9c8c522d72a4d0c88678be8966fabe9fb8f2947fde6339b682"
+dependencies = [
+ "bitflags 2.3.1",
+ "ctor",
+ "napi-derive",
+ "napi-sys",
+ "once_cell",
+]
+
+[[package]]
+name = "napi-build"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "882a73d9ef23e8dc2ebbffb6a6ae2ef467c0f18ac10711e4cc59c5485d41df0e"
+
+[[package]]
+name = "napi-derive"
+version = "2.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da1c6a8fa84d549aa8708fcd062372bf8ec6e849de39016ab921067d21bde367"
+dependencies = [
+ "cfg-if",
+ "convert_case",
+ "napi-derive-backend",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "napi-derive-backend"
+version = "1.0.52"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "20bbc7c69168d06a848f925ec5f0e0997f98e8c8d4f2cc30157f0da51c009e17"
+dependencies = [
+ "convert_case",
+ "once_cell",
+ "proc-macro2",
+ "quote",
+ "regex",
+ "semver",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "napi-sys"
+version = "2.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "166b5ef52a3ab5575047a9fe8d4a030cdd0f63c96f071cd6907674453b07bae3"
+dependencies = [
+ "libloading",
+]
+
+[[package]]
+name = "nu-ansi-term"
+version = "0.46.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "77a8165726e8236064dbb45459242600304b42a5ea24ee2948e18e023bf7ba84"
+dependencies = [
+ "overload",
+ "winapi",
+]
+
+[[package]]
+name = "num-traits"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "578ede34cf02f8924ab9447f50c28075b4d3e5b269972345e7e0372b38c6cdcd"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "num_cpus"
+version = "1.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fac9e2da13b5eb447a6ce3d392f23a29d8694bff781bf03a16cd9ac8697593b"
+dependencies = [
+ "hermit-abi 0.2.6",
+ "libc",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.17.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9670a07f94779e00908f3e686eab508878ebb390ba6e604d3a284c00e8d0487b"
+
+[[package]]
+name = "oorandom"
+version = "11.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0ab1bc2a289d34bd04a330323ac98a1b4bc82c9d9fcb1e66b63caa84da26b575"
+
+[[package]]
+name = "overload"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b15813163c1d831bf4a13c3610c05c0d03b39feb07f7e09fa234dac9b15aaf39"
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e0a7ae3ac2f1173085d398531c705756c94a4c56843785df85a60c1a0afac116"
+
+[[package]]
+name = "plotters"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2538b639e642295546c50fcd545198c9d64ee2a38620a628724a3b266d5fbf97"
+dependencies = [
+ "num-traits",
+ "plotters-backend",
+ "plotters-svg",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "plotters-backend"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "193228616381fecdc1224c62e96946dfbc73ff4384fba576e052ff8c1bea8142"
+
+[[package]]
+name = "plotters-svg"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f9a81d2759aae1dae668f783c308bc5c8ebd191ff4184aaa1b37f65a6ae5a56f"
+dependencies = [
+ "plotters-backend",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.59"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6aeca18b86b413c660b781aa319e4e2648a3e6f9eadc9b47e9038e6fe9f3451b"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b9ab9c7eadfd8df19006f1cf1a4aed13540ed5cbc047010ece5826e10825488"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "rayon"
+version = "1.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d2df5196e37bcc87abebc0053e20787d73847bb33134a69841207dd0a47f03b"
+dependencies = [
+ "either",
+ "rayon-core",
+]
+
+[[package]]
+name = "rayon-core"
+version = "1.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4b8f95bd6966f5c87776639160a66bd8ab9895d9d4ab01ddba9fc60661aebe8d"
+dependencies = [
+ "crossbeam-channel",
+ "crossbeam-deque",
+ "crossbeam-utils",
+ "num_cpus",
+]
+
+[[package]]
+name = "redox_syscall"
+version = "0.3.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "567664f262709473930a4bf9e51bf2ebf3348f2e748ccc50dea20646858f8f29"
+dependencies = [
+ "bitflags 1.3.2",
+]
+
+[[package]]
+name = "regex"
+version = "1.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81ca098a9821bd52d6b24fd8b10bd081f47d39c22778cafaa75a2857a62c6390"
+dependencies = [
+ "aho-corasick 1.0.1",
+ "memchr",
+ "regex-syntax 0.7.2",
+]
+
+[[package]]
+name = "regex-automata"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c230d73fb8d8c1b9c0b3135c5142a8acee3a0558fb8db5cf1cb65f8d7862132"
+dependencies = [
+ "regex-syntax 0.6.29",
+]
+
+[[package]]
+name = "regex-syntax"
+version = "0.6.29"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f162c6dd7b008981e4d40210aca20b4bd0f9b60ca9271061b07f78537722f2e1"
+
+[[package]]
+name = "regex-syntax"
+version = "0.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "436b050e76ed2903236f032a59761c1eb99e1b0aead2c257922771dab1fc8c78"
+
+[[package]]
+name = "rustix"
+version = "0.37.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "acf8729d8542766f1b2cf77eb034d52f40d375bb8b615d0b147089946e16613d"
+dependencies = [
+ "bitflags 1.3.2",
+ "errno",
+ "io-lifetimes",
+ "libc",
+ "linux-raw-sys",
+ "windows-sys 0.48.0",
+]
+
+[[package]]
+name = "ryu"
+version = "1.0.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f91339c0467de62360649f8d3e185ca8de4224ff281f66000de5eb2a77a79041"
+
+[[package]]
+name = "same-file"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93fc1dc3aaa9bfed95e02e6eadabb4baf7e3078b0bd1b4d7b6b0b68378900502"
+dependencies = [
+ "winapi-util",
+]
+
+[[package]]
+name = "scopeguard"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d29ab0c6d3fc0ee92fe66e2d99f700eab17a8d57d1c1d3b748380fb20baa78cd"
+
+[[package]]
+name = "semver"
+version = "1.0.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bebd363326d05ec3e2f532ab7660680f3b02130d780c299bca73469d521bc0ed"
+
+[[package]]
+name = "serde"
+version = "1.0.163"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2113ab51b87a539ae008b5c6c02dc020ffa39afd2d83cffcb3f4eb2722cebec2"
+
+[[package]]
+name = "serde_cbor"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2bef2ebfde456fb76bbcf9f59315333decc4fda0b2b44b420243c11e0f5ec1f5"
+dependencies = [
+ "half",
+ "serde",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.163"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8c805777e3930c8883389c602315a24224bcc738b63905ef87cd1420353ea93e"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.18",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.96"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "057d394a50403bcac12672b2b18fb387ab6d289d957dab67dd201875391e52f1"
+dependencies = [
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "sharded-slab"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "900fba806f70c630b0a382d0d825e17a0f19fcd059a2ade1ff237bcddf446b31"
+dependencies = [
+ "lazy_static",
+]
+
+[[package]]
+name = "smallvec"
+version = "1.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a507befe795404456341dfab10cef66ead4c041f62b8b11bbb92bffe5d0953e0"
+
+[[package]]
+name = "syn"
+version = "1.0.109"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b64191b275b66ffe2469e8af2c1cfe3bafa67b529ead792a6d0160888b4237"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32d41677bcbe24c20c52e7c70b0d8db04134c5d1066bf98662e2871ad200ea3e"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "tailwind-oxide"
+version = "0.0.0"
+dependencies = [
+ "napi",
+ "napi-build",
+ "napi-derive",
+ "rayon",
+ "tailwindcss-core",
+]
+
+[[package]]
+name = "tailwindcss-core"
+version = "0.1.0"
+dependencies = [
+ "bstr",
+ "criterion",
+ "crossbeam",
+ "fxhash",
+ "globwalk",
+ "ignore",
+ "lazy_static",
+ "log",
+ "rayon",
+ "tempfile",
+ "tracing",
+ "tracing-subscriber",
+ "walkdir",
+]
+
+[[package]]
+name = "tempfile"
+version = "3.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9fbec84f381d5795b08656e4912bec604d162bff9291d6189a78f4c8ab87998"
+dependencies = [
+ "cfg-if",
+ "fastrand",
+ "redox_syscall",
+ "rustix",
+ "windows-sys 0.45.0",
+]
+
+[[package]]
+name = "textwrap"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d326610f408c7a4eb6f51c37c330e496b08506c9457c9d34287ecc38809fb060"
+dependencies = [
+ "unicode-width",
+]
+
+[[package]]
+name = "thread_local"
+version = "1.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fdd6f064ccff2d6567adcb3873ca630700f00b5ad3f060c25b5dcfd9a4ce152"
+dependencies = [
+ "cfg-if",
+ "once_cell",
+]
+
+[[package]]
+name = "tinytemplate"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be4d6b5f19ff7664e8c98d03e2139cb510db9b0a60b55f8e8709b689d939b6bc"
+dependencies = [
+ "serde",
+ "serde_json",
+]
+
+[[package]]
+name = "tracing"
+version = "0.1.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ce8c33a8d48bd45d624a6e523445fd21ec13d3653cd51f681abf67418f54eb8"
+dependencies = [
+ "cfg-if",
+ "pin-project-lite",
+ "tracing-attributes",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-attributes"
+version = "0.1.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0f57e3ca2a01450b1a921183a9c9cbfda207fd822cef4ccb00a65402cbba7a74"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.18",
+]
+
+[[package]]
+name = "tracing-core"
+version = "0.1.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0955b8137a1df6f1a2e9a37d8a6656291ff0297c1a97c24e0d8425fe2312f79a"
+dependencies = [
+ "once_cell",
+ "valuable",
+]
+
+[[package]]
+name = "tracing-log"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "78ddad33d2d10b1ed7eb9d1f518a5674713876e97e5bb9b7345a7984fbb4f922"
+dependencies = [
+ "lazy_static",
+ "log",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-subscriber"
+version = "0.3.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "30a651bc37f915e81f087d86e62a18eec5f79550c7faff886f7090b4ea757c77"
+dependencies = [
+ "matchers",
+ "nu-ansi-term",
+ "once_cell",
+ "regex",
+ "sharded-slab",
+ "smallvec",
+ "thread_local",
+ "tracing",
+ "tracing-core",
+ "tracing-log",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b15811caf2415fb889178633e7724bad2509101cde276048e013b9def5e51fa0"
+
+[[package]]
+name = "unicode-segmentation"
+version = "1.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1dd624098567895118886609431a7c3b8f516e41d30e0643f03d94592a147e36"
+
+[[package]]
+name = "unicode-width"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0edd1e5b14653f783770bce4a4dabb4a5108a5370a5f5d8cfe8710c361f6c8b"
+
+[[package]]
+name = "valuable"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "830b7e5d4d90034032940e4ace0d9a9a057e7a45cd94e6c007832e39edb82f6d"
+
+[[package]]
+name = "walkdir"
+version = "2.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "36df944cda56c7d8d8b7496af378e6b16de9284591917d307c9b4d313c44e698"
+dependencies = [
+ "same-file",
+ "winapi-util",
+]
+
+[[package]]
+name = "wasm-bindgen"
+version = "0.2.86"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5bba0e8cb82ba49ff4e229459ff22a191bbe9a1cb3a341610c9c33efc27ddf73"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-backend"
+version = "0.2.86"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "19b04bc93f9d6bdee709f6bd2118f57dd6679cf1176a1af464fca3ab0d66d8fb"
+dependencies = [
+ "bumpalo",
+ "log",
+ "once_cell",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.18",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-macro"
+version = "0.2.86"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "14d6b024f1a526bb0234f52840389927257beb670610081360e5a03c5df9c258"
+dependencies = [
+ "quote",
+ "wasm-bindgen-macro-support",
+]
+
+[[package]]
+name = "wasm-bindgen-macro-support"
+version = "0.2.86"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e128beba882dd1eb6200e1dc92ae6c5dbaa4311aa7bb211ca035779e5efc39f8"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.18",
+ "wasm-bindgen-backend",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-shared"
+version = "0.2.86"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed9d5b4305409d1fc9482fee2d7f9bcbf24b3972bf59817ef757e23982242a93"
+
+[[package]]
+name = "web-sys"
+version = "0.3.63"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3bdd9ef4e984da1187bf8110c5cf5b845fbc87a23602cdf912386a76fcd3a7c2"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "winapi"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c839a674fcd7a98952e593242ea400abe93992746761e38641405d28b00f419"
+dependencies = [
+ "winapi-i686-pc-windows-gnu",
+ "winapi-x86_64-pc-windows-gnu",
+]
+
+[[package]]
+name = "winapi-i686-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6"
+
+[[package]]
+name = "winapi-util"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70ec6ce85bb158151cae5e5c87f95a8e97d2c0c4b001223f33a334e3ce5de178"
+dependencies = [
+ "winapi",
+]
+
+[[package]]
+name = "winapi-x86_64-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
+
+[[package]]
+name = "windows-sys"
+version = "0.45.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75283be5efb2831d37ea142365f009c02ec203cd29a3ebecbc093d52315b66d0"
+dependencies = [
+ "windows-targets 0.42.2",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
+dependencies = [
+ "windows-targets 0.48.0",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e5180c00cd44c9b1c88adb3693291f1cd93605ded80c250a75d472756b4d071"
+dependencies = [
+ "windows_aarch64_gnullvm 0.42.2",
+ "windows_aarch64_msvc 0.42.2",
+ "windows_i686_gnu 0.42.2",
+ "windows_i686_msvc 0.42.2",
+ "windows_x86_64_gnu 0.42.2",
+ "windows_x86_64_gnullvm 0.42.2",
+ "windows_x86_64_msvc 0.42.2",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7b1eb6f0cd7c80c79759c929114ef071b87354ce476d9d94271031c0497adfd5"
+dependencies = [
+ "windows_aarch64_gnullvm 0.48.0",
+ "windows_aarch64_msvc 0.48.0",
+ "windows_i686_gnu 0.48.0",
+ "windows_i686_msvc 0.48.0",
+ "windows_x86_64_gnu 0.48.0",
+ "windows_x86_64_gnullvm 0.48.0",
+ "windows_x86_64_msvc 0.48.0",
+]
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91ae572e1b79dba883e0d315474df7305d12f569b400fcf90581b06062f7e1bc"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2ef27e0d7bdfcfc7b868b317c1d32c641a6fe4629c171b8928c7b08d98d7cf3"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "622a1962a7db830d6fd0a69683c80a18fda201879f0f447f065a3b7467daa241"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4542c6e364ce21bf45d69fdd2a8e455fa38d316158cfd43b3ac1c5b1b19f8e00"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca2b8a661f7628cbd23440e50b05d705db3686f894fc9580820623656af974b1"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7896dbc1f41e08872e9d5e8f8baa8fdd2677f29468c4e156210174edc7f7b953"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a515f5799fe4961cb532f983ce2b23082366b898e52ffbce459c86f67c8378a"
diff --git a/Cargo.toml b/oxide/Cargo.toml
similarity index 100%
rename from Cargo.toml
rename to oxide/Cargo.toml
diff --git a/oxide/README.md b/oxide/README.md
new file mode 100644
index 000000000..fa0a1e39d
--- /dev/null
+++ b/oxide/README.md
@@ -0,0 +1 @@
+## Tailwind CSS Oxide
diff --git a/oxide/crates/core/Cargo.toml b/oxide/crates/core/Cargo.toml
new file mode 100644
index 000000000..8f9f26432
--- /dev/null
+++ b/oxide/crates/core/Cargo.toml
@@ -0,0 +1,29 @@
+[package]
+name = "tailwindcss-core"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+bstr = "1.0.1"
+globwalk = "0.8.1"
+log = "0.4"
+rayon = "1.5.3"
+fxhash = "0.2.1"
+crossbeam = "0.8.2"
+tracing = { version = "0.1.37", features = [] }
+tracing-subscriber = { version = "0.3.16", features = ["env-filter"] }
+walkdir = "2.3.3"
+ignore = "0.4.20"
+lazy_static = "1.4.0"
+
+[dev-dependencies]
+criterion = { version = "0.3", features = ['html_reports'] }
+tempfile = "3.5.0"
+
+[[bench]]
+name = "parse_candidates"
+harness = false
+
+[[bench]]
+name = "scan_files"
+harness = false
diff --git a/oxide/crates/core/benches/fixtures/template-000.html b/oxide/crates/core/benches/fixtures/template-000.html
new file mode 100644
index 000000000..8d9a823f1
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-000.html
@@ -0,0 +1,2203 @@
+<div class="lg:grid-cols-12 lg:gap-x-8 lg:grid pt-10">
+  <p class="bg-gray-50">
+    <span class="truncate"> This is text fe914826-0ae1-4507-903a-a4e5b5cb1112 </span>
+    <a href="#" class="shadow-sm md:items-stretch rounded-md items-center flex">
+      This is link d30fe654-03f5-49d1-8cca-ecc40dd6bd52
+    </a>
+    <a href="#" class="text-sm text-gray-900 font-bold mt-10">
+      This is link e2ef44c4-ede1-4f3b-85b6-5358f926c5ab
+    </a>
+  </p>
+  <main class="sr-only">
+    <img
+      class="focus:ring-indigo-500 w-4 rounded h-4 border-gray-300 text-indigo-600"
+      alt="Profile picture of user 761a1558-6e1d-4ac6-b228-194dfeedec83"
+      src="https://example.org/pictures/2db7cc44-4450-4012-adcc-1750aaabe2a5"
+    />
+    <img
+      class="mt-1"
+      alt="Profile picture of user d6eb4cbe-4a90-48cb-82e7-849f9a233b3d"
+      src="https://example.org/pictures/8b7ff308-d305-4072-a7d5-b72cc33d5748"
+    />
+    <select class="w-6 h-6">
+      <option value="fbcae2f4-cb27-4e02-a19c-1eac0d97dd15">
+        This is item c3f409cb-92d0-4ece-a83f-544c38b22ce0
+      </option>
+      <option>This is item 98b5d4ee-b318-465c-b64a-702a515d524f</option>
+    </select>
+    <input type="email" class="relative flex" />
+  </main>
+  <ul
+    class="rounded-md focus:ring-white hover:bg-gray-700 text-gray-400 p-2 hover:text-white inline-flex justify-center focus:ring-2 focus:outline-none items-center focus:ring-inset"
+  >
+    <li class="items-center flex group py-2 rounded-md text-sm font-medium px-2">
+      <ul class="bg-white">
+        <li class="h-8 w-auto">
+          <ol class="hover:bg-gray-100 relative text-gray-900 py-1.5 bg-white focus:z-10">
+            <li class="flex items-center">
+              <ol class="text-gray-900 text-3xl tracking-tight">
+                <li class="flex-auto truncate ml-3">
+                  This is item bc9cdb26-3bfc-46ee-b19e-cccefdac00c2
+                </li>
+                <li class="h-full lg:flex hidden">
+                  This is item 344e4f83-d6dd-4bff-b243-f43345163e64
+                </li>
+                <li class="bg-gray-900 pt-6">This is item b4237dc3-38b1-40b7-a7a0-57afaa46a4f8</li>
+                <li class="mx-auto max-w-xl text-gray-500 mt-5 text-xl">
+                  This is item 25c94631-cd50-4677-bac5-ed0dbc384edb
+                </li>
+              </ol>
+              <ul
+                class="px-4 sm:shadow-none sm:ring-0 sm:bg-transparent sm:rounded-none py-3 bg-white sm:p-0 rounded-lg relative"
+              >
+                <li class="flex mt-5 lg:ml-4 lg:mt-0">
+                  This is item b21af7e8-f719-4348-abd6-db1ca5ae8624
+                </li>
+                <li class="h-8 w-auto">This is item 27c24c5e-d1ff-4e36-b626-6a09c74a9a9f</li>
+                <li class="sr-only">This is item 4a882789-bb98-4a33-9318-8fe5e1639c92</li>
+                <li class="justify-end flex items-center flex-1">
+                  This is item 01355b2a-dd32-42e0-9d49-d0df857c54c3
+                </li>
+              </ul>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="mx-auto w-7 flex rounded-full h-7 items-center justify-center"
+              >
+                This is link 9af437fd-bf11-44bb-b687-90685adb6441
+              </a>
+              <img
+                class="w-5 h-5"
+                alt="Profile picture of user ba18d60e-288b-40ec-bc25-762722cc8428"
+                src="https://example.org/pictures/2414bea9-bae7-4e4d-8b71-6a9caee3a8fa"
+              />
+            </li>
+            <li class="font-medium">
+              <ul class="top-0 absolute transform p-2 origin-top md:hidden transition inset-x-0">
+                <li class="rounded-full w-8 h-8">
+                  This is item d556110b-ffc4-4a8f-a983-9123fc808fe5
+                </li>
+                <li class="space-x-8 h-full flex">
+                  This is item 28f695fb-68a4-47de-9f3c-26e263c241f2
+                </li>
+                <li class="py-1">This is item 606fc1a4-5487-45a7-86d7-f0152ed20c49</li>
+                <li class="h-6 w-6">This is item edcf7a84-6751-4039-acd3-0bda8440b1e9</li>
+              </ul>
+              <img
+                class="font-medium text-gray-500 rounded-full whitespace-nowrap sm:px-3 text-sm relative hover:bg-gray-100 inline-flex py-2 bg-gray-50 items-center px-2"
+                alt="Profile picture of user 8834c5a4-2338-4ded-a423-a24c0f2f09be"
+                src="https://example.org/pictures/28b50a69-8515-4c25-9ed5-5d000dae3a47"
+              />
+              <img
+                class="w-7 rounded-full mx-auto h-7 justify-center flex items-center"
+                alt="Profile picture of user 554ef559-610b-449e-988f-12bad5dc63e6"
+                src="https://example.org/pictures/a2fc81f5-98d7-4d51-b382-1b745a5979db"
+              />
+              <ul
+                class="p-2 text-indigo-300 hover:text-white focus:ring-white justify-center focus:ring-2 inline-flex bg-indigo-900 hover:bg-indigo-800 focus:ring-inset items-center focus:outline-none rounded-md"
+              >
+                <li class="text-sm font-medium text-gray-900">
+                  This is item 33a4e3d8-0b2f-406c-9ca2-1bb6efd4063c
+                </li>
+                <li class="flex items-center">This is item 3efe8d6d-6dfa-4fd7-adc1-fce29dba4534</li>
+                <li class="h-10 w-10 rounded-full">
+                  This is item f61781ad-58ac-416d-967f-55d42b6b86e0
+                </li>
+              </ul>
+            </li>
+            <li class="sr-only">
+              <ul class="text-5xl tracking-tight text-white font-bold">
+                <li class="sm:col-span-4 col-span-full">
+                  This is item c759a871-52fa-469e-b924-4097ab79fc13
+                </li>
+                <li class="space-x-10 lg:ml-10 hidden lg:flex">
+                  This is item 8011f319-b7fa-4ead-9e2d-b3e23651b1ae
+                </li>
+                <li class="pt-6 sm:pt-4 space-y-6 sm:space-y-4">
+                  This is item cc8f4865-b9a4-46b4-a87d-ab25978709f8
+                </li>
+                <li class="sm:flex lg:block">This is item 0ecbf096-4c02-4405-b6a4-f6d974891c61</li>
+              </ul>
+            </li>
+          </ol>
+          <ol
+            class="hover:text-gray-900 font-medium group text-base items-center bg-white focus:ring-2 focus:outline-none focus:ring-indigo-500 focus:ring-offset-2 inline-flex rounded-md"
+          >
+            <li class="mx-auto lg:max-w-none px-4 max-w-2xl">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="py-2 relative group w-full hover:bg-indigo-700 bg-indigo-600 flex border-transparent focus:ring-offset-2 focus:ring-2 focus:ring-indigo-500 text-sm font-medium text-white rounded-md focus:outline-none border justify-center px-4"
+              >
+                This is link fadb4c63-f3bf-43ca-ab40-42ef75f61a44
+              </a>
+            </li>
+            <li class="flex-shrink-0 text-gray-400 w-5 group-hover:text-gray-500 -mr-1 ml-1 h-5">
+              <ul class="space-y-6 mt-6">
+                <li class="justify-center items-center mx-auto h-7 rounded-full flex w-7">
+                  This is item 449a8153-4c3d-4080-8acf-27e1c0f7cf03
+                </li>
+                <li class="-ml-1 mr-1 flex-shrink-0 h-5 text-gray-500 w-5">
+                  This is item 62c4844b-15e4-4047-adff-047e897be694
+                </li>
+                <li class="text-gray-500 text-lg">
+                  This is item 2c50bb49-9c0b-4e18-9466-44436833f96f
+                </li>
+                <li class="w-64 md:w-72 h-64 object-cover rounded-lg md:h-72">
+                  This is item a0eb727d-99d7-455d-9972-79e999d4a5ae
+                </li>
+                <li class="mt-8 xl:mt-0">This is item 8648de19-1e74-42e6-a7f1-499a3a6d4ab1</li>
+              </ul>
+              <a href="#" class="cursor-default select-none rounded-md px-4 py-2">
+                This is link b5951035-a7c4-4cd2-97ae-3458607e1852
+              </a>
+            </li>
+            <li class="md:px-0 px-4 sm:px-6">
+              <ol class="rounded-full flex-shrink-0 w-6 h-6">
+                <li class="rounded-md shadow">This is item 07facc3a-b455-44ba-88f0-54b0203c925b</li>
+                <li
+                  class="py-4 border-transparent block px-6 text-xl text-center bg-indigo-600 hover:bg-indigo-700 leading-6 rounded-lg w-full border font-medium text-white"
+                >
+                  This is item 4e85bcc1-a02f-421b-a937-adf84268d95e
+                </li>
+                <li class="text-gray-900 block -m-2 font-medium p-2">
+                  This is item a0e7c3f7-e7d5-49de-9132-6ee36ccbb04d
+                </li>
+                <li
+                  class="hover:text-indigo-500 font-medium text-indigo-600 whitespace-nowrap text-sm"
+                >
+                  This is item d60fa673-b3b6-4712-a3f1-604f63b7dedd
+                </li>
+              </ol>
+              <ul class="items-center w-7 rounded-full h-7 flex mx-auto justify-center">
+                <li class="px-6 font-medium pb-4 text-left w-1/4 leading-6 text-gray-900 text-lg">
+                  This is item 8b7991ee-3278-4890-8826-daab4ade64ca
+                </li>
+                <li class="space-y-4 mt-6">This is item 2d8fab33-8141-4a56-875c-75e678d54a34</li>
+                <li
+                  class="lg:col-start-1 lg:max-w-none prose-indigo lg:row-start-1 prose mt-5 mx-auto text-gray-500"
+                >
+                  This is item f8ff678e-d01e-4483-b263-99465725cf13
+                </li>
+                <li
+                  class="divide-gray-200 border-t font-medium pt-4 mt-6 sm:mt-0 space-x-4 sm:border-none divide-x flex sm:ml-4 border-gray-200 sm:pt-0 items-center text-sm"
+                >
+                  This is item 69c6fcd5-da1e-46f4-8fed-110e321429d2
+                </li>
+              </ul>
+              <img
+                class="md:mt-0 mt-12"
+                alt="Profile picture of user 57a8aa4b-f3dc-4995-9e30-c682f46f4565"
+                src="https://example.org/pictures/82daa68c-b428-4b6a-beb4-89c98b38ea1c"
+              />
+            </li>
+            <li
+              class="bg-white absolute shadow-lg focus:outline-none z-10 w-48 rounded-md ring-opacity-5 ring-1 py-1 right-0 ring-black origin-top-right mt-2"
+            >
+              <img
+                class="inset-0 fixed bg-opacity-25 bg-black"
+                alt="Profile picture of user acf0cc09-3ff5-4137-9300-34e584a8009b"
+                src="https://example.org/pictures/f898c526-64a0-409c-a5cc-95cf03ea2a9c"
+              />
+              <a href="#" rel="noreferrer" class="h-14 inline-block w-14 rounded-full">
+                This is link 5b8781d5-d35d-434a-a232-7ec451c0e33b
+              </a>
+              <ul class="text-gray-700 font-medium text-sm block">
+                <li class="hidden sm:inline">This is item c70002d3-05d9-4751-844c-ea1cd19d80e9</li>
+                <li class="sr-only">This is item 8164ee04-8e4f-4df3-bb99-58a9aff71631</li>
+                <li class="text-gray-900 font-medium">
+                  This is item 3f65c94f-d334-4ddc-8c29-5b3b49490dbe
+                </li>
+              </ul>
+              <ol class="ml-3 text-sm">
+                <li class="md:mt-0 md:col-span-2 mt-5">
+                  This is item 57548763-3354-456c-b888-23a42bcd873c
+                </li>
+                <li class="h-5 text-gray-500 w-5">
+                  This is item bdc85c06-aabf-48e7-b9fd-fcff7854e5c6
+                </li>
+              </ol>
+            </li>
+          </ol>
+          <ul class="max-h-80 scroll-pb-2 overflow-y-auto space-y-2 scroll-pt-11 pb-2">
+            <li class="text-gray-900 text-base font-medium">
+              <img
+                class="text-2xl text-gray-900 tracking-tight sm:text-3xl font-bold"
+                alt="Profile picture of user 53485d3e-3130-4102-aca0-9b4cb93225ee"
+                src="https://example.org/pictures/3148862d-733a-464f-b6d9-3130913ab2cf"
+              />
+            </li>
+            <li class="xl:text-center text-gray-400 text-base">
+              <img
+                class="w-full focus:ring-indigo-500 shadow-sm sm:text-sm border-gray-300 block rounded-md focus:border-indigo-500"
+                alt="Profile picture of user af77f5b9-2363-46d7-8591-594b5d68d7cc"
+                src="https://example.org/pictures/c26b6d8b-2102-4b67-bfd8-01ef415f9ead"
+              />
+              <ul class="text-warm-gray-900 font-bold text-2xl sm:tracking-tight sm:text-3xl">
+                <li
+                  class="py-1 focus:outline-none ring-black w-48 shadow-lg z-10 right-0 absolute origin-top-right ring-opacity-5 mt-2 ring-1 bg-white rounded-md"
+                >
+                  This is item 5038b69c-d755-4c02-8a24-ead37cb83711
+                </li>
+                <li
+                  class="focus:border-grape-500 block w-full sm:text-sm shadow-sm focus:ring-grape-500 border-gray-300 rounded-md"
+                >
+                  This is item 2981aca2-1792-456a-bcaf-2a50aca6d12d
+                </li>
+                <li class="text-gray-500">This is item 46f97ba3-8f57-4da5-8278-32e07f2ea600</li>
+                <li class="fixed z-40 inset-0 flex">
+                  This is item ddb64fa7-a990-4fb3-b49c-f0066fb496a3
+                </li>
+                <li class="h-6 w-6">This is item b41fc979-fdb8-423c-aa55-3dfc0b391b7b</li>
+              </ul>
+              <ol class="hover:text-gray-800">
+                <li
+                  class="aspect-w-2 aspect-h-1 overflow-hidden sm:aspect-h-2 sm:aspect-w-5 rounded-lg bg-gray-100"
+                >
+                  This is item 51e80955-27d0-4357-8b0b-aa40835780c6
+                </li>
+                <li class="h-10 w-auto">This is item 992c6df9-23ad-4efd-ad4a-f901a1df1bd4</li>
+              </ol>
+            </li>
+            <li class="lg:px-8 max-w-7xl mx-auto pl-4 pr-8 z-10 relative sm:px-6">
+              <img
+                class="text-gray-500 font-medium text-sm"
+                alt="Profile picture of user 9d4ff7f7-554b-4bea-99b8-ba18efbd34e3"
+                src="https://example.org/pictures/cec985fc-8c1a-4601-882f-d1ebefb515cb"
+              />
+              <ol class="bg-white focus:z-10 hover:bg-gray-100 py-1.5">
+                <li class="font-medium ml-3">This is item e86a32e7-c0b9-46cd-86e7-eeae3fd4de1d</li>
+                <li class="h-5 w-5">This is item ee9f2b5a-28d3-44d3-af80-7c99401b2818</li>
+                <li class="text-xl text-gray-900 font-semibold">
+                  This is item 896b20ae-afaf-4bea-a316-d667d6696d3c
+                </li>
+                <li class="relative -mt-80">This is item 30015788-f2a4-4f91-a597-210904c9222a</li>
+              </ol>
+              <a href="#" target="_blank" class="ml-3">
+                This is link 1e9e3a2a-72c6-4bb7-b8f4-cfa25c2a360c
+              </a>
+            </li>
+            <li class="bg-white hover:bg-gray-100 py-1.5 focus:z-10">
+              <ul class="flex items-center justify-between">
+                <li class="mx-auto w-7 flex rounded-full items-center justify-center h-7">
+                  This is item e3713250-d3a5-4780-b19b-8dd0fb9bff44
+                </li>
+                <li
+                  class="md:my-8 w-full flex md:px-4 text-left transform md:max-w-2xl lg:max-w-4xl transition text-base"
+                >
+                  This is item b59dff69-8f3a-48e5-a694-74d8321d80b8
+                </li>
+              </ul>
+            </li>
+            <li class="bg-white focus:z-10 hover:bg-gray-100 py-1.5">
+              <ul class="h-6 mr-3 w-6">
+                <li class="grid-cols-7 text-center mt-10 text-gray-500 leading-6 text-xs grid">
+                  This is item 9b393dd5-a7f4-452f-ba17-d4f1596bb720
+                </li>
+                <li class="text-blue-gray-500 mt-1">
+                  This is item 06c3836f-b84c-432e-819c-a591b7e82a29
+                </li>
+                <li class="text-white bg-indigo-800">
+                  This is item 8fd93538-c8aa-4edf-b7ab-164fcc0859f1
+                </li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                class="group-hover:text-gray-500 h-6 w-6 flex-shrink-0 text-gray-400"
+              >
+                This is link d10c99c1-aa9a-488a-8d66-41a59be27b27
+              </a>
+            </li>
+          </ul>
+          <img
+            class="sm:grid-cols-2 lg:col-span-2 mt-8 grid grid-cols-1 sm:gap-x-8 lg:mt-0 sm:gap-y-12 gap-12"
+            alt="Profile picture of user 6747bae5-0254-4f0e-9f6c-4f2b156dc8ea"
+            src="https://example.org/pictures/cb1de241-dee0-43c0-a96f-a8c4cd145b3e"
+          />
+        </li>
+        <li class="w-1/4 pr-4">
+          <img
+            class="ml-3"
+            alt="Profile picture of user 0adce5ae-08a5-4253-b21e-28fdf9f6719a"
+            src="https://example.org/pictures/44ef3bf3-d729-40cc-ab75-1c6287314c90"
+          />
+        </li>
+        <li class="justify-center min-h-full flex py-12 sm:px-6 lg:px-8 flex-col">
+          <ol class="hidden top-0 absolute right-0 pt-4 sm:block pr-4">
+            <li
+              class="items-center sm:gap-x-6 border-gray-200 sm:grid sm:grid-cols-4 p-4 sm:p-6 border-b flex"
+            >
+              <ol class="mt-4">
+                <li class="object-center object-cover">
+                  This is item c9f74ac9-76a7-4887-84f0-34da54118cdc
+                </li>
+                <li class="items-center text-sm font-medium flex text-gray-700 hover:text-gray-800">
+                  This is item e9b45179-3677-452d-8462-4ef86cac0a4e
+                </li>
+                <li class="text-gray-700">This is item 73a11f17-97d8-4e76-8ea5-4e5258d258b6</li>
+                <li class="sr-only">This is item 6168eac9-d8ec-4071-870e-f7b82babde83</li>
+              </ol>
+            </li>
+            <li class="mt-1">
+              <a href="#" target="_blank" class="w-6 h-6">
+                This is link f6366c61-cb5b-4663-825f-0c00acacd202
+              </a>
+              <ul class="bg-white py-1.5 hover:bg-gray-100 focus:z-10">
+                <li
+                  class="w-10 focus:ring-inset focus:ring-white ml-1 items-center focus:ring-2 justify-center focus:outline-none h-10 flex rounded-full"
+                >
+                  This is item 564958d8-4715-4ccf-a778-f0cb15d615e8
+                </li>
+                <li class="border-t-2 pt-6 border-gray-100">
+                  This is item 47dda745-b9ab-44d7-b584-77c73ebc503a
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="sr-only">
+                This is link c8b2e46b-d477-4ce2-ac98-284f4094238b
+              </a>
+              <ul class="sr-only">
+                <li class="inset-y-0 sm:hidden absolute flex items-center left-0">
+                  This is item ae33d352-1b2e-4a35-a081-b575d08c77b2
+                </li>
+                <li class="rounded-full w-7 flex justify-center items-center h-7 mx-auto">
+                  This is item 875f0aea-b801-42e2-95c0-e7ce52c6bb27
+                </li>
+                <li class="py-4 flex justify-between items-center">
+                  This is item c200aca2-1f05-4c93-913f-f6052e666ed5
+                </li>
+                <li class="font-medium text-sm text-gray-900">
+                  This is item 3e123388-e190-40f8-a08e-ba2f87719e00
+                </li>
+                <li class="text-sm font-medium text-gray-900">
+                  This is item 6f276856-ce5e-40d9-97a1-8ed75df7ad9f
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <ol class="-mb-8">
+            <li
+              class="text-sm items-center border-gray-300 pl-3 py-2 bg-white rounded-md pr-2 text-gray-700 shadow-sm flex font-medium border hover:bg-gray-50"
+            >
+              <img
+                class="bg-white rounded-full focus:ring-offset-2 text-sm focus:outline-none focus:ring-2 flex focus:ring-indigo-500"
+                alt="Profile picture of user 548c4551-593a-4279-a565-210dd2b2a776"
+                src="https://example.org/pictures/b84375c8-ea4e-45c6-b9b1-6fead5284f90"
+              />
+              <a
+                href="#"
+                rel="noreferrer"
+                class="focus:ring-offset-gray-800 bg-gray-800 focus:ring-offset-2 text-gray-400 rounded-full hover:text-white p-1 focus:ring-2 focus:outline-none focus:ring-white flex-shrink-0 ml-auto"
+              >
+                This is link dd8af783-b5d1-46f7-a968-755444b66996
+              </a>
+              <ul class="font-semibold text-3xl text-center sm:-mx-6 tracking-tight text-gray-900">
+                <li
+                  class="border-gray-300 rounded-md focus:border-indigo-500 sm:text-sm shadow-sm focus:ring-indigo-500 w-full block"
+                >
+                  This is item 3402852e-8aa7-4334-a8da-0de08161d304
+                </li>
+                <li class="font-medium text-white hover:text-gray-100 text-sm">
+                  This is item baafa347-1e56-42f5-b151-878ba2cd80dc
+                </li>
+              </ul>
+            </li>
+            <li class="text-base text-white font-medium">
+              <ul class="space-x-10 md:flex hidden">
+                <li class="lg:px-8 sm:px-6 max-w-7xl mx-auto">
+                  This is item 28fb856d-7c07-4b31-8a10-f6cc17854fec
+                </li>
+                <li class="lg:flex-1">This is item a28dadad-a217-4bbd-a5d3-45855abb2a61</li>
+                <li class="text-gray-500 font-medium text-base">
+                  This is item 37f1ff88-c757-48c4-bae1-a02a9ea57070
+                </li>
+                <li
+                  class="overflow-y-auto bg-white flex shadow-xl w-full pb-12 relative flex-col max-w-xs"
+                >
+                  This is item 2dc02a5a-a5b5-4227-907a-a0479dd6a3b9
+                </li>
+              </ul>
+              <a href="#" rel="noreferrer" class="sr-only">
+                This is link c600f6de-4787-49ec-a750-bdba5d91b460
+              </a>
+            </li>
+            <li class="text-lg font-medium text-gray-900 leading-6">
+              <ol class="text-gray-300 hover:text-white text-base">
+                <li class="lg:max-w-4xl max-w-md mx-auto">
+                  This is item 03a62457-cbdd-4547-ac51-618ad8c44ce1
+                </li>
+                <li class="hover:text-indigo-500 text-indigo-600">
+                  This is item 06e31510-7e82-408b-a565-da90b4beb3b2
+                </li>
+                <li class="sr-only">This is item 371a5897-2e97-41c8-aef6-9cce920b51d2</li>
+                <li class="hover:bg-gray-100 focus:z-10 bg-white py-1.5">
+                  This is item a8e5a983-d107-44bd-8187-b08d04623d42
+                </li>
+              </ol>
+              <a href="#" rel="noreferrer" class="relative mt-4">
+                This is link 89098f9a-2561-4dc1-be2c-a7db29cbf8fa
+              </a>
+            </li>
+            <li
+              class="lg:grid-cols-2 gap-y-10 lg:col-span-2 grid-cols-1 lg:gap-x-8 lg:gap-y-0 grid"
+            >
+              <ul class="sm:px-6 mx-auto max-w-3xl items-center flex px-4">
+                <li class="inline-flex">This is item 30805e9c-58d6-4ebf-8b34-8a71796ca6eb</li>
+                <li class="block">This is item 2c1ec91b-e9ca-423e-8e93-aa0f71aefe36</li>
+                <li class="max-h-12">This is item 2b31feb5-6f03-4066-853f-16f66319ef8f</li>
+              </ul>
+            </li>
+            <li
+              class="absolute inset-y-0 lg:w-full lg:right-0 bg-gray-50 left-1/2 w-screen rounded-l-3xl lg:left-80"
+            >
+              <ul
+                class="h-4 focus:ring-indigo-500 flex-shrink-0 text-indigo-600 rounded border-gray-300 w-4"
+              >
+                <li class="text-sm items-center px-3 group py-2 flex border-l-4 font-medium">
+                  This is item 304d8ee8-3c20-4b4e-b39a-7a28cd6ff961
+                </li>
+                <li class="lg:grid-cols-3 lg:gap-8 lg:grid pt-16 mt-16">
+                  This is item 3fd9a7ae-4e57-4b8e-a463-bc254bea783c
+                </li>
+                <li
+                  class="inline-flex px-5 py-2 focus:outline-none border border-transparent items-center focus:ring-offset-2 font-medium focus:ring-indigo-500 text-white focus:ring-2 rounded-full hover:bg-indigo-700 shadow-sm text-base bg-indigo-600"
+                >
+                  This is item 90b53b64-c603-45ec-aa67-d02eee93582e
+                </li>
+              </ul>
+              <ul class="text-gray-700">
+                <li class="aspect-w-3 overflow-hidden aspect-h-2 bg-gray-100 rounded-lg">
+                  This is item eea407b8-3c3c-4d6d-b67a-c97344f6afe5
+                </li>
+                <li class="lg:col-span-7 sm:col-span-8">
+                  This is item e9c7bfcf-aad1-4dc6-bb50-2222a94fda89
+                </li>
+                <li class="pointer-events-none absolute text-gray-400 w-5 left-4 top-3.5 h-5">
+                  This is item 76ca6f2b-8e12-4b21-99d8-f18fa14c42e2
+                </li>
+              </ul>
+              <img
+                class="relative lg:ml-10"
+                alt="Profile picture of user afaf4703-c472-4df5-86b6-164504e176a4"
+                src="https://example.org/pictures/5bc36265-6545-4223-bf8a-b96a4faaf195"
+              />
+              <img
+                class="text-sm ml-3 block font-medium"
+                alt="Profile picture of user 9c5b91cd-0d95-4ced-adc5-87fb0b7b907f"
+                src="https://example.org/pictures/6e98b611-8d9c-4a49-9151-d0848dad2587"
+              />
+            </li>
+          </ol>
+          <a href="#" target="_blank" class="w-6 h-6">
+            This is link 3bafe9bf-3936-4c04-ad0e-1cf0cd4607e7
+          </a>
+        </li>
+        <li class="text-sm block py-2 px-4 text-gray-700">
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="md:justify-center relative flex sm:h-10 justify-between items-center"
+          >
+            This is link 7f74317c-33e4-4620-bc2b-788c9574779c
+          </a>
+        </li>
+      </ul>
+      <img
+        class="text-gray-900 font-medium ml-4 text-base"
+        alt="Profile picture of user 86c49772-b4a2-4f80-91f8-d07faa65a080"
+        src="https://example.org/pictures/e5bd6ee2-654f-4bb6-bd27-3c56f4499c32"
+      />
+    </li>
+    <li
+      class="mx-auto font-semibold text-white w-7 rounded-full items-center bg-indigo-600 h-7 justify-center flex"
+    >
+      <ul class="xl:top-auto absolute xl:self-center xl:right-auto xl:relative top-6 right-0">
+        <li class="h-5 w-5">
+          <ol class="sm:space-x-10 sm:space-y-0 space-y-6 px-5 bg-gray-50 sm:flex py-5 sm:px-8">
+            <li class="md:col-span-7 md:mt-0 mt-2">
+              <ul class="flex divide-gray-200 text-sm space-x-4 divide-x sm:space-x-6">
+                <li class="px-2 max-w-7xl mx-auto lg:px-8 sm:px-6">
+                  This is item 565bc85c-ee3c-43e7-b5a6-a571e496cc9e
+                </li>
+                <li
+                  class="lg:pr-8 lg:border-r lg:pt-6 lg:pb-16 lg:col-start-1 lg:col-span-2 lg:border-gray-200 py-10"
+                >
+                  This is item 32c563b4-0241-4ac7-a765-31d5bc322c6d
+                </li>
+                <li class="h-5 group-hover:text-gray-500 w-5 ml-2">
+                  This is item a1d7c309-150e-4179-a7d7-af2fc93c81f0
+                </li>
+                <li class="mx-auto flex w-7 items-center rounded-full justify-center h-7">
+                  This is item a37f4ee6-1faa-4365-82c8-9e6a280a6278
+                </li>
+                <li class="pt-6">This is item 3071e18f-cfea-4e61-9b64-7abe250bf596</li>
+              </ul>
+            </li>
+            <li class="lg:col-span-7 text-sm divide-gray-100 mt-4 divide-y xl:col-span-8 leading-6">
+              <ol class="flex-1">
+                <li class="text-gray-700 font-medium underline">
+                  This is item b8f9f096-7739-44b2-a59d-7f8a7a2d54bb
+                </li>
+                <li class="sm:ml-6 lg:mt-6 mt-4 lg:ml-0 sm:mt-0">
+                  This is item d8930437-300c-4031-b256-b8c8d3c29f83
+                </li>
+                <li class="font-medium text-gray-900 text-sm mt-1">
+                  This is item dac96525-86ea-4fab-aad4-1dc636a18155
+                </li>
+                <li class="sr-only">This is item c6e4fcd0-bbfa-4517-b787-7ea909c4f1a9</li>
+              </ol>
+              <ol class="hover:bg-gray-50">
+                <li
+                  class="bg-white w-full hover:bg-gray-50 border text-center text-gray-700 text-sm block font-medium shadow-sm px-4 py-2 rounded-md border-gray-300"
+                >
+                  This is item 4cf8e028-be07-4866-8057-16327097f45c
+                </li>
+                <li class="px-4 mx-auto lg:px-8 sm:px-6 lg:py-24 py-12 max-w-7xl">
+                  This is item b8b89d4d-e944-4938-a5f9-b9796bb270a6
+                </li>
+                <li
+                  class="text-sm items-center sm:px-6 h-10 lg:px-8 font-medium flex bg-indigo-600 px-4 justify-center text-white"
+                >
+                  This is item 1d712708-3dff-437a-a5c5-2af1f02dd206
+                </li>
+                <li class="w-6 h-6">This is item da8b3704-3196-4f08-bdf4-2df56e6e493d</li>
+              </ol>
+            </li>
+            <li
+              class="lg:translate-y-20 translate-x-6 transform object-cover rounded-md translate-y-6 object-left-top sm:translate-x-16"
+            >
+              <a href="#" rel="noreferrer" class="lg:block hidden">
+                This is link 551db731-2707-42bb-aaec-a415f1bac4c8
+              </a>
+            </li>
+            <li class="space-y-4 mt-4">
+              <ul class="text-gray-400 group-hover:text-gray-500">
+                <li class="ml-3">This is item 2213f615-1215-454f-91d4-73831f0823c1</li>
+                <li class="text-gray-700 font-medium block text-sm">
+                  This is item 3088f66a-bca3-4583-aba3-718d73169217
+                </li>
+                <li class="group relative">This is item 4723f5f1-4c58-496a-b0ee-28a5ccd08c82</li>
+                <li class="h-5 w-5 flex-shrink-0">
+                  This is item b75b13bc-a86c-4c05-915d-7e1addd48e63
+                </li>
+                <li class="flex text-sm font-medium text-gray-700 items-center hover:text-gray-800">
+                  This is item acfea0a0-4e7d-404c-b87d-4d23d59fd543
+                </li>
+              </ul>
+              <img
+                class="flex items-center"
+                alt="Profile picture of user 1d0bbd65-5c79-4378-ad37-8d8b585a6f4a"
+                src="https://example.org/pictures/51285af4-3cd8-4208-8ada-e9880ac67719"
+              />
+            </li>
+          </ol>
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="items-center focus:ring-purple-500 justify-center focus:outline-none bg-gray-50 focus:ring-offset-2 text-gray-400 focus:ring-2 hover:text-gray-500 rounded-md p-2 hover:bg-gray-100 focus:ring-offset-gray-50 inline-flex"
+          >
+            This is link 8ec00a6e-ef30-4533-8d30-53421cc2566b
+          </a>
+          <img
+            class="pt-12 pb-64 xl:col-start-1 sm:pt-24 sm:pb-64 relative xl:pb-24"
+            alt="Profile picture of user df82b6da-a8ef-4e38-a07b-bc817693080d"
+            src="https://example.org/pictures/c82a83e9-b66d-4150-988a-c4f847010e2d"
+          />
+          <ol class="justify-between items-center flex">
+            <li class="text-gray-500 ml-3 text-sm group-hover:text-gray-900 font-medium">
+              <ol class="font-medium text-gray-700 block text-sm">
+                <li class="bg-white hover:bg-gray-100 focus:z-10 py-1.5">
+                  This is item 93b2f6aa-4e4e-46cf-8b16-f0854e2135f0
+                </li>
+                <li
+                  class="pl-3 border-gray-300 text-gray-400 flex md:hover:bg-gray-50 items-center pr-4 hover:text-gray-500 border-r-0 rounded-l-md justify-center md:px-2 py-2 md:w-9 focus:relative bg-white border"
+                >
+                  This is item 8a8dfc86-b30b-4c2b-8d4f-8dd52e3435de
+                </li>
+              </ol>
+              <ol class="items-start flex justify-between">
+                <li
+                  class="-mt-2.5 -ml-14 text-right text-xs text-gray-400 pr-2 left-0 leading-5 sticky w-14"
+                >
+                  This is item e1fc2df5-1009-4c87-a32a-2135a1fa8c84
+                </li>
+                <li class="flex-1 items-center flex lg:hidden">
+                  This is item 33ac1eca-0aa8-4b14-860d-468f08fa8f2c
+                </li>
+                <li class="mx-auto max-w-2xl">This is item 010637d0-8599-4c0b-b2c7-ca16fdffae3a</li>
+                <li class="py-10 border-gray-200 border-t">
+                  This is item bc07f54f-2565-43c6-a9bd-e91f42d05518
+                </li>
+                <li class="w-5 h-5">This is item db20cec2-f331-4aa4-ae8b-8437f0437da8</li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-lg text-gray-900 font-medium leading-6"
+              >
+                This is link 1eee3f7c-2128-488d-925a-5efd2ed25d30
+              </a>
+            </li>
+            <li class="mt-12">
+              <a href="#" rel="noreferrer" class="text-sm text-gray-500 mt-2">
+                This is link 013ffe90-d794-4fbd-a695-bab5463e75a5
+              </a>
+              <a href="#" rel="noreferrer" class="lg:px-8 mx-auto sm:px-6 max-w-7xl">
+                This is link dcf00fef-94a6-4a3f-a55e-d7a87445a475
+              </a>
+            </li>
+            <li class="inset-0 flex absolute">
+              <ol class="xl:grid-cols-3 xl:gap-8 py-20 xl:grid">
+                <li
+                  class="text-gray-400 text-xs -mt-2.5 pr-2 left-0 leading-5 z-20 sticky text-right w-14 -ml-14"
+                >
+                  This is item abbd72d7-6c1f-4413-901c-7d59d4b06b8f
+                </li>
+                <li class="mt-4 sm:mt-0 sm:flex-shrink-0 sm:ml-6">
+                  This is item 74187c34-bc86-4a69-b239-345738c3b746
+                </li>
+                <li class="text-gray-500">This is item 705b738d-e2f5-4405-83e4-6e523d809190</li>
+                <li class="h-5 w-5">This is item bb173abe-3ca5-47ad-9a5a-460f52f723b4</li>
+                <li class="w-full flex-shrink-0">
+                  This is item 8e3ceef2-91f0-4b0e-a86b-5696d74a0e8a
+                </li>
+              </ol>
+              <img
+                class="font-medium hover:text-gray-900 text-gray-500"
+                alt="Profile picture of user dc436fc9-6472-4514-bd24-324f3a1d3c4e"
+                src="https://example.org/pictures/039ddd9e-4da3-48d4-b615-a7fe40588c26"
+              />
+              <ul
+                class="rounded-l-md border-gray-300 flex md:px-2 text-gray-400 bg-white md:w-9 items-center md:hover:bg-gray-50 focus:relative justify-center border-r-0 border pr-4 hover:text-gray-500 py-2 pl-3"
+              >
+                <li class="sm:max-w-xs w-full">
+                  This is item caaea842-e565-4d57-8f33-e45a9d8300cd
+                </li>
+                <li class="text-gray-50">This is item 64ed8f5e-cf1a-47d5-9493-8543a9ffb16c</li>
+                <li class="truncate flex-auto ml-3">
+                  This is item 5e59684f-3b2e-4b9d-aa4f-c49bea6b20c5
+                </li>
+                <li class="hover:bg-gray-100 py-1.5 rounded-tr-lg bg-white focus:z-10">
+                  This is item ad16f756-8722-4d6e-8768-1498fd40337a
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="h-6 w-6">
+          <ol class="py-5 px-4 sm:px-6">
+            <li class="focus:z-10 hover:bg-gray-100 bg-white py-1.5">
+              <ul class="space-y-6 mt-6">
+                <li class="mt-3 text-gray-500">
+                  This is item 11649964-fd28-4884-851e-4310180cdb03
+                </li>
+                <li
+                  class="p-1.5 -top-1 hover:text-gray-500 -right-1.5 items-center text-gray-400 absolute flex justify-center"
+                >
+                  This is item 058bdbf5-2457-4933-9358-5997fffc2ec6
+                </li>
+                <li class="mt-2 text-gray-500">
+                  This is item b8c80c54-63bc-47e2-a728-c3d7bd4bd088
+                </li>
+                <li class="relative bg-white">This is item d3a0d036-8741-4d08-982c-c5a79b37032b</li>
+                <li class="group-hover:text-gray-500 w-5 ml-2 h-5">
+                  This is item bc83c76e-932d-4364-ae96-520c703132d1
+                </li>
+              </ul>
+              <ol class="max-w-2xl sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8 px-4 py-16 mx-auto">
+                <li class="p-8 bg-white">This is item 0540c750-8a14-49fb-ad64-d9498c6d2cf1</li>
+                <li class="bg-white items-center flex justify-center p-8">
+                  This is item 358e7162-0e6b-4f72-8ae7-33962baf0bb0
+                </li>
+                <li class="flow-root">This is item 33f6dc3e-c083-458a-bea1-b5f262bff4ce</li>
+              </ol>
+            </li>
+            <li
+              class="flex-col divide-y text-center bg-white shadow flex divide-gray-200 rounded-lg col-span-1"
+            >
+              <ol class="items-center flex">
+                <li class="sr-only">This is item 04fa9563-ea91-4d1c-962f-87ef099c04a7</li>
+                <li
+                  class="text-gray-400 inline-flex items-center w-10 justify-center rounded-full -m-2 h-10 hover:text-gray-500"
+                >
+                  This is item c6539a5b-e70c-4394-8def-cfe933fd2c4c
+                </li>
+              </ol>
+            </li>
+            <li class="text-sm text-gray-700">
+              <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                This is link 70d9fcb5-6643-4124-9d3f-66016e56a3f4
+              </a>
+              <a href="#" class="text-gray-400 bg-gray-50 hover:bg-gray-100 focus:z-10 py-1.5">
+                This is link f781cc24-8863-48fd-b45b-b61e72465dcb
+              </a>
+              <img
+                class="text-sm text-gray-900 font-medium"
+                alt="Profile picture of user 30d53fa6-cd08-4607-9aae-17cc62e5102a"
+                src="https://example.org/pictures/5b5d8a65-5f13-4844-9b2b-1251ecd7f601"
+              />
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="right-4 md:top-6 md:right-6 absolute text-gray-400 top-4 lg:right-8 hover:text-gray-500 lg:top-8 sm:top-8 sm:right-6"
+              >
+                This is link 3057b37e-58e1-4053-ab95-2a6be43b0be6
+              </a>
+            </li>
+            <li class="max-w-none prose mt-4 text-gray-500 prose-sm">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="md:hover:bg-gray-50 flex pl-3 items-center py-2 rounded-l-md focus:relative border hover:text-gray-500 md:w-9 border-r-0 bg-white justify-center text-gray-400 md:px-2 pr-4 border-gray-300"
+              >
+                This is link 665f218f-f4a5-452b-9838-274d24c8a9c8
+              </a>
+              <ol class="bg-gray-900">
+                <li class="sm:p-6 overflow-y-auto inset-0 md:p-20 z-10 fixed p-4">
+                  This is item 44cf6d58-11e2-4d59-b96c-1d29761be2ed
+                </li>
+                <li class="sr-only">This is item af42d158-7714-47ed-8f75-d7ea082fc47c</li>
+                <li class="sm:space-y-4 pt-6 sm:pt-4 space-y-6">
+                  This is item 56c9a5b1-9593-4ea0-bae8-656c2471afcd
+                </li>
+                <li
+                  class="text-gray-900 flex-col h-14 py-2 focus:z-10 hover:bg-gray-100 bg-white flex px-3"
+                >
+                  This is item 1aa53b2f-f97d-4dd0-8415-bfe1628fac5d
+                </li>
+              </ol>
+            </li>
+            <li class="sm:col-span-1">
+              <ol class="flex-shrink-0">
+                <li class="flex justify-between px-4 items-center">
+                  This is item 865bb766-7a0b-4940-8bc2-4536bcc79008
+                </li>
+                <li class="text-base hover:text-indigo-50 font-medium text-white">
+                  This is item c4fc6207-bbfa-4412-b28a-2f96959927c2
+                </li>
+                <li class="divide-y divide-gray-200">
+                  This is item b9ebb4a7-09b5-4c94-9097-8f0b9881f666
+                </li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+        <li class="lg:hidden font-normal">
+          <img
+            class="text-gray-900 font-medium text-sm"
+            alt="Profile picture of user b4d78fcf-f953-4ce4-88a5-5ff6df6b98a9"
+            src="https://example.org/pictures/cc37f912-7080-400c-8156-be3acc4ee093"
+          />
+          <ul
+            class="lg:row-start-1 lg:grid-cols-10 lg:col-span-10 lg:grid lg:col-start-3 bg-indigo-600 relative lg:items-center lg:rounded-3xl"
+          >
+            <li
+              class="rounded-md sm:text-sm block shadow-sm border-gray-300 focus:border-sky-500 mt-1 focus:ring-sky-500 w-full"
+            >
+              <img
+                class="mt-16 sm:mt-24"
+                alt="Profile picture of user 9465b15b-6bfe-496c-a219-7e993df78583"
+                src="https://example.org/pictures/a9f184ab-82c5-4d19-a91f-00d02ad42641"
+              />
+            </li>
+            <li class="-mr-2">
+              <a href="#" target="_blank" class="text-gray-700 block text-sm font-medium">
+                This is link af9c9c30-0f28-4330-9553-3c9d5a0ea0a8
+              </a>
+              <ol class="space-y-8 xl:col-span-1">
+                <li class="sr-only">This is item 49c617f0-2985-4cb3-b8ab-a178ac557c22</li>
+                <li
+                  class="flex-col bg-gray-50 text-gray-500 h-14 focus:z-10 py-2 hover:bg-gray-100 px-3 flex"
+                >
+                  This is item 6b4071ec-de68-4f1a-b56e-4ecdf9d8e0d0
+                </li>
+              </ol>
+              <ul class="py-2 border-gray-200 border-t">
+                <li class="text-indigo-600 ml-1">
+                  This is item 27c53e02-d146-4558-a72e-38c3fe0237dd
+                </li>
+                <li class="border-gray-300 pl-4 ml-4 border-l">
+                  This is item 717c3c66-ed52-4b2c-8a0f-1418f531d5db
+                </li>
+                <li class="flex items-center mx-auto w-7 h-7 rounded-full justify-center">
+                  This is item fe288c02-6ef3-4c5f-b7d4-b9b75a1d1abb
+                </li>
+                <li class="lg:px-0 sm:px-6 flex justify-between items-center px-4">
+                  This is item d4f57b60-ef5c-4288-ba68-6420fefdcbc4
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="font-semibold text-gray-900">
+          <ul class="mt-2 flex justify-between">
+            <li
+              class="text-sm focus:ring-offset-gray-800 focus:ring-white focus:outline-none bg-gray-800 focus:ring-offset-2 focus:ring-2 flex rounded-full"
+            >
+              <ul class="font-medium block">
+                <li class="text-sm font-medium text-cyan-600">
+                  This is item 3097fa29-3f89-4091-a615-bacb60c4db58
+                </li>
+                <li class="xl:gap-x-16 lg:gap-x-12 lg:items-start lg:grid-cols-12 mt-12 lg:grid">
+                  This is item e6225482-2b7f-48e8-a555-cccc89ba2fa4
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="hidden h-8 lg:block w-auto">
+                This is link aafeaa30-60ed-4c13-958a-c71cc714ca2f
+              </a>
+            </li>
+            <li class="text-center">
+              <a href="#" rel="noreferrer" class="-mr-12 absolute top-0 right-0 pt-4">
+                This is link cf4a421c-414a-4225-8561-d32dbd6a7156
+              </a>
+              <a href="#" class="hover:text-gray-800">
+                This is link cf8011f0-3cdb-426a-9af8-7ad7ee9fc26b
+              </a>
+              <ul class="xl:grid-cols-3 border-gray-200 xl:grid xl:gap-x-8 pt-16 border-t">
+                <li class="justify-between flex items-center">
+                  This is item 07c78fb1-892b-402a-b6af-b1182b062969
+                </li>
+                <li class="mt-1">This is item 8a87e8e9-0fb5-4c14-8694-85cc90667703</li>
+                <li
+                  class="text-indigo-200 px-3 text-sm hover:text-white py-2 rounded-md font-medium"
+                >
+                  This is item bad9361b-e709-4e1f-a2b4-f318cc4e04c5
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <img
+            class="w-6 h-6"
+            alt="Profile picture of user f837cae7-6f11-46d2-85f3-43c742cc4c07"
+            src="https://example.org/pictures/e17d3b83-7058-4170-8809-b62e5ec36dc3"
+          />
+          <ul class="bg-white">
+            <li class="font-medium text-gray-900">
+              <ul class="absolute inset-0 z-10">
+                <li
+                  class="max-w-md sm:px-0 absolute lg:-translate-x-1/2 lg:left-1/2 transform z-10 lg:ml-0 px-2 mt-3 w-screen -ml-4"
+                >
+                  This is item 672a6b0d-1857-4f12-a052-ac554d72bbb2
+                </li>
+                <li
+                  class="bg-indigo-600 flex focus:outline-none w-full hover:bg-indigo-700 items-center focus:ring-offset-2 rounded-md focus:ring-offset-gray-50 border justify-center border-transparent focus:ring-indigo-500 py-3 text-white focus:ring-2 font-medium px-8 text-base"
+                >
+                  This is item 0c2ed2de-46bc-43d3-8d60-d9d1624d5bdb
+                </li>
+                <li class="sm:px-6 max-w-7xl mx-auto py-8 lg:px-8">
+                  This is item e9f4cb5a-24b4-4ace-9b8a-ec2efbe41f8b
+                </li>
+              </ul>
+              <ul class="gap-y-12 grid-cols-1 sm:gap-x-8 sm:grid-cols-2 grid sm:col-span-2">
+                <li class="flex items-center">This is item 86a08eed-6246-475c-ba1f-87e4cf5900ef</li>
+                <li class="grid sm:grid-cols-6 grid-cols-3 gap-3">
+                  This is item e7482fe2-5b4a-4090-8486-1773a149d323
+                </li>
+                <li class="sm:col-span-4 lg:col-span-5">
+                  This is item a423e280-ec76-4028-8dc4-ab64b1733825
+                </li>
+                <li
+                  class="bg-gradient-to-r rounded-md py-2 hover:to-indigo-700 hover:from-purple-700 from-purple-600 shadow-sm border-transparent text-base bg-origin-border to-indigo-600 border text-white inline-flex px-4 font-medium"
+                >
+                  This is item 43a96ee5-9fb6-4d3c-8fbb-f2e5431d0bbe
+                </li>
+                <li class="ml-4 flex-shrink-0">
+                  This is item 56984aed-47c3-4b25-8b72-0028486e1209
+                </li>
+              </ul>
+              <ol class="px-5 pt-5 pb-6">
+                <li class="font-medium text-gray-900">
+                  This is item 40729a01-8998-4f8b-9b80-a8645a61ff69
+                </li>
+                <li class="text-sm font-medium text-gray-500">
+                  This is item 8c613060-10f7-45d8-b5df-6aa84951962d
+                </li>
+              </ol>
+            </li>
+            <li class="sm:max-w-md flex mt-2">
+              <ul class="text-lg text-gray-900 leading-6 font-medium">
+                <li
+                  class="p-1.5 focus:ring-2 hover:bg-white text-gray-400 focus:outline-none focus:ring-indigo-500 focus:ring-inset hover:shadow-sm rounded-md"
+                >
+                  This is item ae3e4596-138a-4219-9af3-ff742fbc35e9
+                </li>
+                <li class="hover:text-gray-900 text-gray-500 font-medium text-base">
+                  This is item aa92d299-c6f1-430f-ba68-fe2e7affb82c
+                </li>
+              </ul>
+              <a href="#" target="_blank" rel="noreferrer" class="items-center flex mt-1">
+                This is link 3462b57a-046b-47bd-9f8f-0535eaba188c
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="relative z-0 flex-1 focus:outline-none overflow-y-auto"
+              >
+                This is link 4b1b16bb-c796-4dab-bb54-c03dae47dd08
+              </a>
+            </li>
+            <li class="focus:z-10 bg-white hover:bg-gray-100 py-1.5">
+              <ul class="max-w-7xl lg:px-8 sm:px-6 py-16 px-4 mx-auto">
+                <li class="text-indigo-600 font-medium hover:text-indigo-500">
+                  This is item 4f3fa0e8-d606-4bc0-b6cd-d04fff12a6f6
+                </li>
+                <li class="sr-only">This is item fb8c8ae2-16fe-4088-abf1-83ddbee52a6d</li>
+                <li class="text-sm text-gray-500 ml-3">
+                  This is item 11bbc240-a1e8-474f-8b91-6e5beaaa7357
+                </li>
+                <li
+                  class="bg-white focus-within:ring-2 space-x-3 border-gray-300 py-5 focus-within:ring-indigo-500 items-center px-6 rounded-lg shadow-sm focus-within:ring-offset-2 hover:border-gray-400 relative flex border"
+                >
+                  This is item a6a6adda-84ce-4cda-8a0b-c122b3841fa0
+                </li>
+              </ul>
+              <img
+                class="bg-white focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none rounded-md font-medium hover:text-gray-500 text-gray-700 text-sm"
+                alt="Profile picture of user da0040d4-7bfd-4c24-bede-d561e77c710f"
+                src="https://example.org/pictures/f8fc8997-845d-4123-b67f-6ba7c445d9c4"
+              />
+            </li>
+            <li class="space-y-6 mt-6">
+              <ol
+                class="rounded-md block font-medium hover:bg-gray-700 hover:text-white text-gray-400 px-3 text-base py-2"
+              >
+                <li class="h-7 rounded-full mx-auto justify-center items-center w-7 flex">
+                  This is item 9e8699ea-5a22-435a-9e5a-70ba519a777a
+                </li>
+                <li class="text-gray-500 mt-4">
+                  This is item ea9d13ec-44ad-4955-b417-4920752d4ec5
+                </li>
+                <li class="mt-4 relative">This is item d4a1cdcc-0bc1-4c3a-973d-1a86e701919a</li>
+                <li class="sr-only">This is item b1379601-3e64-4d51-9ff1-f9b8f7152a2b</li>
+              </ol>
+              <img
+                class="md:rounded-lg shadow relative ring-black ring-1 overflow-hidden ring-opacity-5"
+                alt="Profile picture of user 20c97175-0c15-4c2d-95e9-56c49bc1f0c2"
+                src="https://example.org/pictures/5e24dc1a-726e-46f4-b13b-942d0abd6daa"
+              />
+              <img
+                class="h-10 items-center mx-auto justify-between max-w-7xl px-4 sm:px-6 flex lg:px-8"
+                alt="Profile picture of user 596b54e2-dbbb-46cc-8c83-83ab778b8d02"
+                src="https://example.org/pictures/cc8645e5-4564-4637-abea-39c58acfbc7f"
+              />
+              <img
+                class="text-gray-700 text-sm ml-3"
+                alt="Profile picture of user aff5418e-fa01-441a-9b71-808c89a4e393"
+                src="https://example.org/pictures/650b5e79-8f85-4cfa-a72c-0c5f79ccba56"
+              />
+            </li>
+          </ul>
+          <ol class="text-base ml-4 font-medium text-gray-900">
+            <li class="text-2xl mt-6 font-medium text-white">
+              <a
+                href="#"
+                class="pr-3 sm:pl-6 text-gray-900 whitespace-nowrap font-medium pl-4 py-4 text-sm"
+              >
+                This is link 49915c80-8594-4e79-8e41-df251adf44bd
+              </a>
+            </li>
+            <li class="flex items-baseline">
+              <img
+                class="max-w-lg lg:pt-16 mx-auto"
+                alt="Profile picture of user ca13a08a-8459-4fa6-857b-cb51a0f62e11"
+                src="https://example.org/pictures/3b4bfdaf-097a-48ba-8ff5-bb994bba75a1"
+              />
+              <img
+                class="text-gray-500 hover:text-gray-600"
+                alt="Profile picture of user 8e74f40a-b442-43c0-a298-e4c8bb9e1579"
+                src="https://example.org/pictures/dc0f228f-2592-4230-940d-33a5dfb08d62"
+              />
+              <a href="#" class="flex w-7 justify-center h-7 rounded-full items-center mx-auto">
+                This is link c37f6503-44a8-4c52-92d1-3cdd0a3ba09c
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                class="md:justify-between hidden md:flex md:flex-1 md:items-center"
+              >
+                This is link 0a156656-42dc-451b-9e80-8c145d777225
+              </a>
+            </li>
+            <li class="sm:items-baseline flex sm:space-x-4">
+              <ul class="bg-white border-l hidden lg:block w-96 overflow-y-auto border-gray-200">
+                <li
+                  class="w-8 justify-center text-gray-900 h-8 hover:bg-gray-200 mx-auto items-center rounded-full flex"
+                >
+                  This is item 4e3b5091-2edb-4f85-bad1-50f3dc8cbcc6
+                </li>
+                <li class="ring-4  {{ }} action.iconForeground ring-white">
+                  This is item aa3c55b3-0ed8-4fcb-be1a-cc5144377777
+                </li>
+                <li class="text-gray-500 text-sm">
+                  This is item 99128d4d-7dc9-43ee-8894-ec9681855b00
+                </li>
+              </ul>
+            </li>
+            <li class="px-4 py-2 text-sm flex">
+              <a href="#" rel="noreferrer" class="border-gray-200 border-t py-2">
+                This is link 686c107d-8556-44e5-997e-ed789480d88e
+              </a>
+              <ol class="text-gray-500 text-base hover:text-gray-900">
+                <li class="items-center flex flex-shrink-0">
+                  This is item 36fa6d77-222b-45b0-942a-8922996a2be1
+                </li>
+                <li class="font-medium text-gray-900 text-lg">
+                  This is item f72f337d-4f8e-40e7-b269-d124c8755790
+                </li>
+              </ol>
+              <img
+                class="border-t border-gray-200 py-3"
+                alt="Profile picture of user 46fb96c7-e40c-4712-ba8b-12fa33968146"
+                src="https://example.org/pictures/9601b005-ddce-47a0-ad32-9f32eeda8409"
+              />
+              <ol class="flex">
+                <li class="flex-shrink-0 w-full block group">
+                  This is item a6648d10-0dfd-4f4c-870d-2947d301bdbf
+                </li>
+                <li class="mt-6">This is item bc39bcdc-99f8-480c-bdba-6ce9039679a2</li>
+                <li class="bg-white">This is item d819d242-8304-4503-adea-c2ba76829236</li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+        <li class="font-semibold text-indigo-600">
+          <ol class="inset-y-0 pl-10 fixed max-w-full pointer-events-none flex right-0">
+            <li
+              class="rounded-md focus:ring-indigo-500 shadow-sm sm:text-sm w-full focus:border-indigo-500 border-gray-300 block"
+            >
+              <ul class="sr-only">
+                <li class="flex-1 pt-5 h-0 pb-4 overflow-y-auto">
+                  This is item 941ac420-295e-4b73-b653-2d4930b5fa33
+                </li>
+                <li class="mt-1">This is item 8944ebcb-a186-4a55-8080-27ac13899de7</li>
+                <li
+                  class="group-hover:opacity-75 aspect-h-1 aspect-w-1 bg-gray-100 overflow-hidden rounded-md"
+                >
+                  This is item 5eb45058-3c8e-4455-8e07-bf4e92339dbf
+                </li>
+                <li class="space-y-4 mt-4">This is item fe725603-7f88-4ecf-8870-80960797214e</li>
+                <li class="flex-shrink-0 h-5 w-5 mr-1.5 text-gray-500">
+                  This is item f3e47459-145d-445d-b5f9-a46f31c5a2cf
+                </li>
+              </ul>
+              <ul class="justify-center relative mt-12 sm:mt-16 flex">
+                <li class="text-gray-800 text-base font-medium">
+                  This is item 55e1762d-2172-42bf-9247-869c5d77ca83
+                </li>
+                <li class="text-sm">This is item 088d98ac-9c18-40dd-ad4a-d64c2ad41fd4</li>
+                <li class="sm:flex lg:block">This is item 8cf223d1-7d6a-4f6e-80e8-7dbf5b4b445d</li>
+                <li class="md:hidden border-b border-gray-700">
+                  This is item 1296b90c-b89d-4b5e-b9e2-6218434d96ed
+                </li>
+              </ul>
+              <ol class="relative bg-white">
+                <li
+                  class="bg-gray-200 text-gray-900 group-hover:bg-gray-300 flex-none rounded ml-2"
+                >
+                  This is item a137af93-8777-4dd7-898b-dc571ad35aec
+                </li>
+                <li class="bg-white hover:bg-gray-100 py-1.5 focus:z-10">
+                  This is item 18cb24c0-a8fe-45cb-b92a-90ae62102bb7
+                </li>
+              </ol>
+              <ol class="text-yellow-400 h-5 w-5">
+                <li class="lg:col-start-1 md:col-span-2 lg:row-start-1 col-span-1">
+                  This is item f1b9976d-36e8-47cc-9169-e9f6c12a9dac
+                </li>
+                <li class="focus:z-10 bg-white py-1.5 hover:bg-gray-100">
+                  This is item 28de5ced-d11e-44f2-b1f2-18600b6a480b
+                </li>
+                <li
+                  class="border-gray-300 focus:relative text-gray-700 hover:bg-gray-50 hover:text-gray-900 bg-white text-sm border-t border-b hidden px-3.5 font-medium md:block"
+                >
+                  This is item 1eaf0f03-c6c3-4b9c-a369-616f2f1b2b8a
+                </li>
+              </ol>
+            </li>
+            <li class="flow-root">
+              <ul class="border-4 h-96 border-gray-200 border-dashed rounded-lg">
+                <li class="flow-root">This is item 94e07da9-cac0-41b1-899c-bff3ae74232a</li>
+                <li class="font-medium text-gray-900">
+                  This is item b9bae6f8-bdb5-4d37-8a05-865b683e20bf
+                </li>
+              </ul>
+              <img
+                class="border-b border-gray-200 focus-within:border-indigo-600"
+                alt="Profile picture of user ffb91d1a-14e8-4ea4-8d53-11c95afb27c9"
+                src="https://example.org/pictures/6887e3cd-5026-4db1-8f54-89b4ed32f4eb"
+              />
+              <img
+                class="w-10 focus:outline-none rounded-full focus:ring-2 justify-center focus:ring-white h-10 focus:ring-inset ml-1 flex items-center"
+                alt="Profile picture of user ab321cf0-b40f-4c9c-8dd9-fa468bc62df3"
+                src="https://example.org/pictures/2fa11f28-1887-4523-bf84-e4942c45fb08"
+              />
+              <img
+                class="shadow-md ring-2 ring-indigo-700 bg-white"
+                alt="Profile picture of user 3f53b8c8-a9c6-4aae-88b2-53614abdb643"
+                src="https://example.org/pictures/4aaf37c5-d80c-4887-8b0d-9833300f86c4"
+              />
+            </li>
+            <li class="flex group px-4 select-none py-2 items-center cursor-default">
+              <a href="#" target="_blank" rel="noreferrer" class="flex items-center ml-6">
+                This is link 0715a46a-9f2c-4aa1-ad5d-407231ca8612
+              </a>
+            </li>
+          </ol>
+          <ul class="text-sm">
+            <li class="tracking-tight text-5xl order-1 font-bold text-indigo-600">
+              <img
+                class="sm:pb-32 relative bg-sky-800 pb-24"
+                alt="Profile picture of user 1d4751b7-6618-4515-a03f-3c12dc725d74"
+                src="https://example.org/pictures/64e81d88-b631-48a0-bbed-dad5767b5c02"
+              />
+            </li>
+            <li class="font-bold text-gray-900 text-3xl mt-2 tracking-tight">
+              <ul class="relative">
+                <li class="hover:bg-gray-100 bg-gray-50 py-1.5 text-gray-400 focus:z-10">
+                  This is item 46c80f21-7b56-43b6-9478-b79ae22fcb2c
+                </li>
+                <li class="space-x-4 flex flex-none">
+                  This is item 76a043c3-7edd-40c4-a1da-f48e93dbf79c
+                </li>
+              </ul>
+              <a href="#" class="px-3 text-sm text-gray-500 whitespace-nowrap py-4">
+                This is link ece6204c-b791-493a-a5f4-0e3e48aa9719
+              </a>
+              <ul class="block">
+                <li class="leading-6 text-gray-900 text-lg font-medium">
+                  This is item 4a9cebe0-189b-49ae-b179-c3419f92f5d4
+                </li>
+                <li
+                  class="-m-2 hover:text-gray-500 relative text-gray-400 h-10 rounded-full items-center justify-center w-10 inline-flex"
+                >
+                  This is item cf79f029-be80-472e-9a61-0406c632e5b9
+                </li>
+                <li class="flex items-center h-5">
+                  This is item 51b8d5cb-c0dc-4fe8-9779-1923b7b9bcf3
+                </li>
+                <li
+                  class="border-gray-300 bg-white px-4 hover:bg-gray-50 items-center font-medium border flex justify-center py-2 text-sm rounded-md text-gray-700 shadow-sm"
+                >
+                  This is item d55c211f-3b00-4181-aae0-e99558813605
+                </li>
+              </ul>
+              <ul class="h-12">
+                <li class="h-8 sm:h-10 w-auto">
+                  This is item da0731da-61c9-4f89-baaf-ef0637482687
+                </li>
+                <li class="justify-center w-7 rounded-full mx-auto flex h-7 items-center">
+                  This is item cbb51df0-76c3-4fcf-adb7-168eb71e4a22
+                </li>
+                <li class="relative ml-3 sm:hidden">
+                  This is item 2475156a-551f-42dc-8703-164683a22593
+                </li>
+                <li class="relative">This is item 9f8f765b-f441-47ca-9b7e-695b795ed0ca</li>
+                <li class="text-gray-600 mt-4 text-xl max-w-xl mx-auto">
+                  This is item ad5ac533-0703-418f-97fc-7a779246589b
+                </li>
+              </ul>
+            </li>
+            <li class="relative bg-white overflow-hidden py-16">
+              <img
+                class="grid mt-2 text-sm grid-cols-7"
+                alt="Profile picture of user 6b017c94-e8cc-43dc-b26d-20d808ec9517"
+                src="https://example.org/pictures/fb45b61b-f01c-4914-9a79-ff99ac9c0d70"
+              />
+              <ul class="bg-white lg:overflow-y-visible shadow-sm lg:static">
+                <li class="text-gray-500 text-sm font-medium">
+                  This is item 153b0cbb-574e-4839-9e98-464107969a4d
+                </li>
+                <li class="w-10 h-10 rounded-full">
+                  This is item aae15b18-fb58-4dd5-9691-13de471f883f
+                </li>
+                <li class="block">This is item 9dbbce97-59e0-45de-9e37-4e8304a2c521</li>
+                <li
+                  class="text-sm sm:pr-6 pt-4 pl-3 text-gray-900 text-right font-semibold md:pr-0 pr-4"
+                >
+                  This is item e04687f4-eaf9-4ae2-9725-99817e9e77e3
+                </li>
+              </ul>
+            </li>
+            <li class="divide-gray-200 border-b divide-y border-t mt-2 border-gray-200">
+              <ul class="mt-10">
+                <li class="hover:bg-gray-100 py-1.5 relative focus:z-10 text-gray-900 bg-white">
+                  This is item 6f4115c1-9187-451f-b454-519e74ad09b3
+                </li>
+                <li class="flex-shrink-0 mr-1.5 text-gray-400 h-5 w-5">
+                  This is item a78d72e9-c45f-4223-b89d-2c57b23516c5
+                </li>
+                <li class="flex-shrink-0">This is item e68fe670-9160-4699-97ce-01f89575fdc2</li>
+              </ul>
+              <ul
+                class="h-8 items-center flex border-indigo-600 justify-center w-8 bg-white rounded-full border-2 relative"
+              >
+                <li
+                  class="focus:ring-offset-2 focus:ring-2 items-center focus:ring-indigo-500 bg-white focus:outline-none text-sm flex max-w-xs rounded-full"
+                >
+                  This is item 6f662ea1-d133-4bf3-aa7d-4c940c4211c4
+                </li>
+                <li class="flex items-center justify-between space-x-3 min-w-0">
+                  This is item e0f53815-4493-4a33-a6f3-ac1052c15efd
+                </li>
+                <li class="text-sm py-1 flex-1 text-gray-500 min-w-0 pl-5 sm:py-3">
+                  This is item 02ece24d-c082-4c3c-b2ae-d6e571260eb0
+                </li>
+              </ul>
+              <img
+                class="sm:flex sm:items-start"
+                alt="Profile picture of user 094c9f00-b70c-46b1-b752-8da4c628a2ff"
+                src="https://example.org/pictures/1b0c3043-5552-4df0-a420-563090d5c2bb"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <img
+        class="group"
+        alt="Profile picture of user fcee012e-853d-4df0-846b-998fc8fcedee"
+        src="https://example.org/pictures/bd613652-8555-4f9d-a3a2-54f0f3fdacd5"
+      />
+      <img
+        class="bg-white"
+        alt="Profile picture of user da2579d7-c3a6-4215-8b36-f257f299a68f"
+        src="https://example.org/pictures/092d290b-9fb8-434f-b050-1b5bb557130c"
+      />
+    </li>
+    <li class="w-20 flex-col flex">
+      <a href="#" target="_blank" class="flex -mb-px space-x-8 px-4">
+        This is link efcfce9b-d293-4877-81df-fcd6e1acabdb
+      </a>
+    </li>
+    <li class="flex pointer-events-none left-0 items-center pl-3 inset-y-0 absolute">
+      <img
+        class="object-center object-cover"
+        alt="Profile picture of user 861a4e65-cdae-4abc-8c29-b08d462612d6"
+        src="https://example.org/pictures/247aae2d-4f35-468a-bc41-082ff81f22f5"
+      />
+    </li>
+  </ul>
+  <main class="z-10 relative">
+    <h3 class="gap-8 grid-cols-2 grid-rows-1 text-sm grid">
+      This is heading 3e11960f-d5c3-4bc4-a097-9137acb476e6
+    </h3>
+    <h3 class="hover:bg-gray-100 focus:z-10 text-gray-900 bg-white py-1.5">
+      This is heading e5129e54-0bd8-4c57-8a61-b956c1daef9a
+    </h3>
+    <ol class="space-y-16 sm:space-y-24">
+      <li class="pointer-events-none flex items-stretch absolute inset-0">
+        <a
+          href="#"
+          rel="noreferrer"
+          class="text-base text-gray-500 hover:text-gray-900 font-medium whitespace-nowrap"
+        >
+          This is link d2210a2b-6731-40b8-af4d-8e3970dbd503
+        </a>
+        <img
+          class="text-gray-500 text-sm font-medium"
+          alt="Profile picture of user 3021b302-2c1a-4e3e-89a2-48426376d115"
+          src="https://example.org/pictures/1626c440-3e04-4a74-a9fd-35237c4219a2"
+        />
+      </li>
+      <li class="py-24 lg:py-32">
+        <ol class="px-4 sm:p-6 py-5">
+          <li class="py-1.5 focus:z-10 hover:bg-gray-100 text-gray-400 bg-gray-50">
+            <ul class="h-20 lg:w-24 w-20 mx-auto rounded-full lg:h-24">
+              <li class="text-gray-500 mt-2 text-base">
+                <ul class="flex-shrink-0 ml-4"></ul>
+              </li>
+              <li class="text-indigo-600 font-medium hover:text-indigo-500">
+                <ol class="inline-flex shadow rounded-md"></ol>
+              </li>
+              <li class="mx-auto justify-center flex h-7 rounded-full w-7 items-center">
+                <a href="#" class="h-5 text-green-400 w-5">
+                  This is link c0ce148f-c3e9-418f-a3ad-db9aa43f10ed
+                </a>
+                <a href="#" target="_blank" class="h-6 w-6">
+                  This is link afa9520d-1c2f-4c6b-b026-5fa394099365
+                </a>
+                <a href="#" class="mt-20"> This is link b6074445-0539-405b-aea2-f7892176b467 </a>
+              </li>
+              <li class="text-gray-300">
+                <img
+                  class="mt-12 xl:mt-0 md:mt-16"
+                  alt="Profile picture of user 5d1aa59c-07d3-4f45-8c4d-602b807420f7"
+                  src="https://example.org/pictures/896ac51f-fb04-42c6-bf16-1b7e3d0ec640"
+                />
+                <ul class="text-gray-900 contents text-base font-medium"></ul>
+                <a href="#" class="sm:mt-0 mt-6 flex-shrink-0">
+                  This is link 6217b443-2f21-4900-9a94-86f34685ab54
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="gap-y-10 grid lg:col-span-2 lg:gap-y-0 lg:grid-cols-2 grid-cols-1 lg:gap-x-8">
+            <img
+              class="px-4 sm:px-6 py-4"
+              alt="Profile picture of user 01366bd5-e915-4583-887a-92aaf60cc962"
+              src="https://example.org/pictures/66e5ab48-bcb4-4bd6-a3c8-27719345456d"
+            />
+            <img
+              class="hidden lg:block lg:[overflow-anchor:none] lg:w-full lg:h-full lg:inset-y-0 lg:absolute"
+              alt="Profile picture of user 8b1fe04f-4eec-42f0-a6a5-d61b039b58d9"
+              src="https://example.org/pictures/f392459d-296d-4829-a3c8-2b91629ff40e"
+            />
+          </li>
+        </ol>
+        <ul class="flow-root">
+          <li class="inline-block border-gray-300 border-l">
+            <a
+              href="#"
+              target="_blank"
+              class="w-56 -mr-1 absolute origin-top-right ring-opacity-5 bg-white shadow-lg right-0 ring-black rounded-md focus:outline-none mt-2 z-10 ring-1"
+            >
+              This is link 448ede22-6981-464a-9fdd-b01a626af81c
+            </a>
+          </li>
+          <li class="px-4 sm:py-24 lg:px-8 sm:px-6 max-w-7xl mx-auto py-16">
+            <ol class="text-warm-gray-500 mt-4 text-lg">
+              <li
+                class="px-4 text-sm sm:px-6 divide-gray-200 space-x-6 flex divide-x mx-auto lg:px-8 max-w-7xl"
+              >
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="grid gap-4 lg:gap-8 grid-rows-2 grid-cols-2 sm:gap-6"
+                >
+                  This is link dfc0b558-e566-4d2e-afee-4090c5902664
+                </a>
+                <img
+                  class="-mx-3 rounded-lg py-2 text-gray-900 leading-7 text-base px-3 block font-semibold hover:bg-gray-400/10"
+                  alt="Profile picture of user e546ce2d-6fa0-47ae-9cd0-a6f9de625d3c"
+                  src="https://example.org/pictures/c882fa0e-277d-4c94-9b65-7cdfc973df03"
+                />
+                <img
+                  class="truncate"
+                  alt="Profile picture of user 26c83d03-038a-4b82-8525-9268f94ea3e4"
+                  src="https://example.org/pictures/4146090a-8148-4ee0-a053-cfb660f78142"
+                />
+                <ul class="mt-6 sm:space-y-4 space-y-6 sm:mt-4"></ul>
+              </li>
+              <li
+                class="grid divide-y lg:grid-cols-3 divide-gray-200 lg:divide-y-0 lg:divide-x grid-cols-1"
+              >
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="focus:outline-none text-sm focus:ring-1 focus:border-indigo-500 border-gray-300 focus:ring-indigo-500 bg-white py-2 focus:z-10 inline-flex -ml-px border items-center text-gray-700 relative hover:bg-gray-50 px-3 rounded-r-md font-medium"
+                >
+                  This is link 75a7fc51-0bb0-4834-9f32-356ea6816363
+                </a>
+                <ol class="font-semibold text-white"></ol>
+                <ul class="max-w-2xl px-4 mx-auto"></ul>
+              </li>
+              <li class="-mx-4 lg:mt-0 mt-10 lg:col-start-1 relative">
+                <ol class="bg-white relative"></ol>
+                <ol
+                  class="lg:inset-y-0 overflow-hidden w-full inset-x-0 -translate-x-1/2 left-1/2 transform absolute"
+                ></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="space-y-8 xl:col-span-1">
+                  This is link dc5d33e6-6624-406e-9c32-6054dd19fec6
+                </a>
+              </li>
+              <li class="sm:col-span-6">
+                <img
+                  class="text-gray-700 block text-sm font-medium"
+                  alt="Profile picture of user aa50633f-6495-453f-b7a1-97b28889e12b"
+                  src="https://example.org/pictures/31a46ee6-c799-42a7-8c9d-83d1bba994ff"
+                />
+              </li>
+              <li class="hover:text-gray-600 text-gray-500">
+                <ul class="flex items-center"></ul>
+                <a href="#" rel="noreferrer" class="mt-3 flex items-center flex-col">
+                  This is link 116754f8-8157-40f6-8d4c-070bf6ef248b
+                </a>
+                <ol class="w-20 rounded-md"></ol>
+                <img
+                  class="bg-gray-100 text-gray-900"
+                  alt="Profile picture of user 86103038-385d-4c4a-8fde-540e09f90485"
+                  src="https://example.org/pictures/72f303ed-a586-4823-a965-afb011429915"
+                />
+              </li>
+            </ol>
+            <ol class="absolute inset-0">
+              <li class="h-16 w-16 rounded-full">
+                <ol class="mt-6 space-y-4 sm:space-x-5 sm:flex sm:space-y-0"></ol>
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user 08a4358b-fc10-4785-b48b-c399991b1e21"
+                  src="https://example.org/pictures/bef4cbc6-f1a4-45a4-8f93-604dbba44f7c"
+                />
+              </li>
+              <li
+                class="hover:bg-gray-50 font-medium focus:ring-indigo-500 shadow-sm border focus:ring-2 border-gray-300 inline-flex text-gray-700 rounded disabled:opacity-30 items-center text-xs focus:ring-offset-2 focus:outline-none px-2.5 bg-white disabled:cursor-not-allowed py-1.5"
+              >
+                <ol class="-mr-12 pt-2 absolute right-0 top-0"></ol>
+                <ul class="justify-center items-center flex mx-auto w-7 h-7 rounded-full"></ul>
+                <ul class="text-white h-6 w-6"></ul>
+                <ol class="sm:ml-6 flex-none"></ol>
+              </li>
+              <li class="text-base text-teal-50 flex">
+                <a href="#" target="_blank" class="sm:col-span-3">
+                  This is link c1f8d4be-7fcd-4617-b41d-9e42d5de3ecf
+                </a>
+                <ol class="md:mt-0 mt-8 md:order-1 text-gray-400 text-base"></ol>
+              </li>
+              <li class="space-y-4">
+                <a
+                  href="#"
+                  class="w-full focus:ring-0 p-0 text-gray-900 placeholder-gray-500 block border-0 sm:text-sm"
+                >
+                  This is link b6cb9e1d-0c83-469a-bc36-d0011a473660
+                </a>
+                <ol class="w-full h-full object-cover"></ol>
+                <ul class="border-dashed border-gray-300 border-2 rounded-lg"></ul>
+                <ol class="bg-white hover:bg-gray-100 focus:z-10 py-1.5"></ol>
+              </li>
+              <li class="sm:flex-shrink-0">
+                <a href="#" rel="noreferrer" class="w-6 h-6">
+                  This is link 23fbc184-4b7b-4eff-a5d3-f5ac8e5d5836
+                </a>
+                <img
+                  class="w-4 text-indigo-600 focus:ring-indigo-500 h-4 border-gray-300"
+                  alt="Profile picture of user 3c677d62-4c24-4b53-9807-d43d27054c62"
+                  src="https://example.org/pictures/29ae0007-90ba-4755-8774-2956b1338433"
+                />
+                <img
+                  class="bg-pink-100 text-sm px-2.5 items-center text-pink-800 rounded-md inline-flex font-medium py-0.5"
+                  alt="Profile picture of user 1f2bd7a2-4615-4d83-97c0-126425303231"
+                  src="https://example.org/pictures/ddc7425e-0aba-40d5-841a-71a4edf846d1"
+                />
+              </li>
+            </ol>
+            <ul class="h-6 w-6">
+              <li class="lg:items-center lg:flex-1 lg:flex lg:justify-end hidden lg:space-x-6">
+                <img
+                  class="text-sm block text-gray-700 font-medium"
+                  alt="Profile picture of user 6b6aca17-f470-4080-ad73-69088236e020"
+                  src="https://example.org/pictures/e356bb6c-e2b8-434a-a3d0-dbc87b200c6c"
+                />
+                <ul class="text-sm font-medium hover:text-indigo-500 text-indigo-600"></ul>
+                <ol class="text-sm text-gray-700"></ol>
+                <ol
+                  class="relative bg-white focus-within:ring-indigo-600 focus-within:ring-inset py-5 hover:bg-gray-50 focus-within:ring-2 px-4"
+                ></ol>
+              </li>
+              <li class="bg-gray-100">
+                <a href="#" target="_blank" class="sr-only">
+                  This is link acb08fa4-9d18-4477-8b34-fbcb6437d481
+                </a>
+                <img
+                  class="h-6 ring-2 w-6 ring-white rounded-full relative inline-block z-10"
+                  alt="Profile picture of user ad1f9c24-f041-4ba3-9db7-59c3d8041422"
+                  src="https://example.org/pictures/977e1ae8-8ead-4939-b51f-999bc4addb52"
+                />
+                <img
+                  class="absolute -mr-12 right-0 pt-2 top-0"
+                  alt="Profile picture of user 8a3149aa-d5d9-4151-aa7c-14983cf8f4b6"
+                  src="https://example.org/pictures/446dff58-5b65-4a80-b727-b6733ded40c1"
+                />
+                <img
+                  class="block focus:ring-indigo-500 border-gray-300 w-full rounded-r-md rounded-none sm:text-sm flex-1 focus:border-indigo-500"
+                  alt="Profile picture of user 14a8263f-a0ec-40fd-b6a7-72bb9c678c45"
+                  src="https://example.org/pictures/f5139e33-acd3-4888-8b9c-8968a3ad28d3"
+                />
+              </li>
+              <li class="mt-8 text-gray-500 text-lg">
+                <ul class="py-2 relative bg-white px-3"></ul>
+                <img
+                  class="flow-root"
+                  alt="Profile picture of user a09a04a8-d868-4f83-9ac5-2a4bf07af002"
+                  src="https://example.org/pictures/d201846b-4459-454c-87a6-4b9749768086"
+                />
+              </li>
+            </ul>
+            <ul class="h-6 w-6 text-gray-400">
+              <li class="py-1.5 focus:z-10 bg-white hover:bg-gray-100">
+                <img
+                  class="mt-6 space-y-6"
+                  alt="Profile picture of user 32e53efe-29a2-497b-b769-e950457bfc6c"
+                  src="https://example.org/pictures/743f1962-3fbf-471a-a9e0-719d804be6a4"
+                />
+                <img
+                  class="mt-1 text-sm text-gray-500"
+                  alt="Profile picture of user 637793d2-832a-4897-9e83-9e94e8717232"
+                  src="https://example.org/pictures/7415fe39-f10c-4e6f-a417-5f2dc056c6b4"
+                />
+              </li>
+              <li class="mt-6 text-sm text-gray-500">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="text-gray-300 hover:text-white hover:bg-gray-700"
+                >
+                  This is link 5a4b7505-b124-4073-8ca2-14e43ee3b920
+                </a>
+                <ol class="flex-1 min-w-0"></ol>
+                <a href="#" target="_blank" class="text-center">
+                  This is link 2f368188-8eb2-46d7-a67f-5df819ea1805
+                </a>
+              </li>
+              <li class="text-base text-blue-gray-500 mt-2">
+                <ul
+                  class="z-10 sm:px-0 w-screen px-2 mt-3 lg:-translate-x-1/2 max-w-md absolute -ml-4 lg:ml-0 lg:left-1/2 transform"
+                ></ul>
+                <ol class="flex"></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="sm:tracking-tight leading-7 text-gray-900 sm:truncate font-bold sm:text-3xl text-2xl"
+                >
+                  This is link 498f326b-2421-478e-9319-d53d0eea7dee
+                </a>
+              </li>
+              <li class="mt-1 text-gray-600 text-sm">
+                <ol class="items-center flex h-7 ml-6"></ol>
+                <ul class="inline-block w-10 h-10 rounded-full"></ul>
+                <img
+                  class="max-w-3xl mx-auto"
+                  alt="Profile picture of user f9e0d192-7143-47b3-88e5-7045063e7ce2"
+                  src="https://example.org/pictures/1f6c4171-8cc4-4450-93bc-1040fe59fa8b"
+                />
+                <ul class="items-center sm:justify-center flex sm:px-4 justify-end"></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="flex md:order-2 space-x-6">
+            <a href="#" target="_blank" rel="noreferrer" class="relative">
+              This is link e4888978-d924-4632-be4e-928952806452
+            </a>
+            <ul class="text-gray-500 flex text-sm items-center mt-2">
+              <li class="flex space-x-8 h-full">
+                <ol class="space-x-4 inline-flex"></ol>
+                <ol
+                  class="rounded-md relative group bg-gray-100 aspect-w-1 aspect-h-1 overflow-hidden"
+                ></ol>
+                <ol class="lg:px-8 px-4 mx-auto sm:px-6 max-w-7xl w-full"></ol>
+                <a href="#" class="sr-only"> This is link a6ada992-ac2c-460d-87cd-7c4994e7fc3f </a>
+              </li>
+              <li class="text-gray-900 font-bold text-2xl tracking-tight">
+                <ul class="font-medium text-gray-500 text-base"></ul>
+              </li>
+              <li class="h-6 w-6 rounded-full inline-block ring-2 z-30 relative ring-white">
+                <ul class="px-4 lg:px-8 max-w-7xl sm:py-24 sm:px-6 py-16 mx-auto"></ul>
+              </li>
+              <li class="h-auto w-5 block flex-shrink-0">
+                <a
+                  href="#"
+                  class="focus:border-indigo-600 border-gray-300 focus:ring-offset-1 focus:ring-opacity-25 inline-flex px-4 bg-white hover:bg-gray-100 focus:outline-none h-10 rounded-md focus:ring-2 focus:ring-offset-indigo-600 border focus:ring-indigo-600 items-center"
+                >
+                  This is link 06091801-d6f9-4dde-b117-0fc4dd340b0a
+                </a>
+                <ul class="bg-black inset-0 fixed bg-opacity-25"></ul>
+                <ol class="relative"></ol>
+                <ol
+                  class="border-gray-300 font-medium border px-4 flex hover:bg-gray-50 shadow-sm justify-center bg-white items-center text-sm py-2 rounded-md text-gray-700"
+                ></ol>
+              </li>
+              <li class="ml-3 truncate">
+                <ol class="py-2 text-gray-700 block text-sm px-4"></ol>
+                <ul class="md:items-center md:ml-4 hidden md:flex-shrink-0 md:flex"></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="text-gray-900 -m-2 block p-2 font-medium">
+            <ol class="mt-6 space-y-6">
+              <li class="overflow-hidden bg-white rounded-lg shadow">
+                <img
+                  class="py-6"
+                  alt="Profile picture of user 8c69bd08-e488-48cf-a9c2-eb193ea15f19"
+                  src="https://example.org/pictures/8b05ac7c-573b-449d-a824-ed8527c7e6ee"
+                />
+                <a href="#" class="md:flex md:justify-between md:items-center">
+                  This is link a4a6689c-e9d6-4627-a40a-45b02281fb84
+                </a>
+                <a href="#" target="_blank" class="border-t space-y-8 border-gray-200 mt-6 py-6">
+                  This is link 26f111d4-4418-48b6-8918-cfe623fc9250
+                </a>
+              </li>
+              <li class="text-gray-200">
+                <ul class="space-y-12"></ul>
+                <a href="#" class="mx-auto flex w-7 rounded-full items-center h-7 justify-center">
+                  This is link 6d0c5a18-200c-4719-9a8c-6a416b51c912
+                </a>
+                <img
+                  class="text-gray-900 block font-medium sm:pt-2 text-sm sm:mt-px"
+                  alt="Profile picture of user 307133eb-2a41-4b41-b9a7-35ecec3d8b80"
+                  src="https://example.org/pictures/f05d73af-e975-476a-a728-c23ae5196302"
+                />
+              </li>
+              <li class="text-gray-900 tracking-tight font-bold text-3xl mt-6">
+                <ol class="md:gap-8 pt-6 md:grid-cols-12 md:grid pb-8"></ol>
+              </li>
+              <li class="sm:px-6 px-4 mx-auto max-w-6xl lg:px-8">
+                <a href="#" target="_blank" class="font-semibold text-gray-900">
+                  This is link eb0ff181-d0e2-4bda-ad2c-b8b049fbd9c7
+                </a>
+              </li>
+            </ol>
+            <ol class="h-8 sm:h-10 w-auto">
+              <li class="w-7 rounded-full items-center justify-center h-7 flex mx-auto">
+                <img
+                  class="font-medium text-gray-900 text-sm"
+                  alt="Profile picture of user 04efcb78-c4a9-4301-bc2d-f646452db21e"
+                  src="https://example.org/pictures/4bbffa7d-0879-4256-bb7b-4edfae35abbd"
+                />
+                <img
+                  class="flex absolute inset-0 items-center"
+                  alt="Profile picture of user 4a9dd125-d5b1-4385-b937-f13d012a4448"
+                  src="https://example.org/pictures/a43c3152-462d-4766-95f5-739f93525fdf"
+                />
+                <img
+                  class="absolute sm:inset-auto inset-y-0 sm:ml-6 pr-2 right-0 sm:pr-0 flex items-center sm:static"
+                  alt="Profile picture of user cea7ffb0-086b-47c7-88b0-ef70565e623b"
+                  src="https://example.org/pictures/76866695-5059-4b67-81b3-e7b68de9456e"
+                />
+              </li>
+              <li
+                class="bg-white sm:pb-16 lg:w-full xl:pb-32 lg:max-w-2xl z-10 lg:pb-28 pb-8 relative md:pb-20"
+              >
+                <ul class="h-7 mx-auto items-center w-7 flex justify-center rounded-full"></ul>
+              </li>
+              <li
+                class="px-8 flex-none border-l border-gray-100 w-1/2 py-10 md:block max-w-md hidden"
+              >
+                <a href="#" class="h-6 w-6 mr-3">
+                  This is link ad91af07-db17-42b5-94b4-ab88b0a38ddc
+                </a>
+                <ul class="sr-only"></ul>
+                <img
+                  class="pointer-events-auto max-w-2xl w-screen"
+                  alt="Profile picture of user 564116ed-6b5c-4632-bc8a-37471f75b4f6"
+                  src="https://example.org/pictures/73d3f0c2-b9c3-414d-8533-dfcfb46709b2"
+                />
+              </li>
+              <li class="w-6 h-6">
+                <ul class="h-5 w-5 text-gray-400 flex-shrink-0 mr-1.5"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="py-4 items-center flex border-b justify-between px-6 border-gray-200"
+                >
+                  This is link 8f2b7162-dc10-4ec7-b809-0e7d229613b6
+                </a>
+                <ol class="font-medium block text-gray-900 p-2 -m-2"></ol>
+              </li>
+            </ol>
+          </li>
+        </ul>
+        <ul
+          class="h-4 focus:ring-indigo-500 w-4 text-indigo-600 border-gray-300 rounded flex-shrink-0"
+        >
+          <li class="text-gray-700 font-medium">
+            <ul class="border-l border-gray-200 pl-3 ml-3">
+              <li class="-ml-1 flex-shrink-0 mr-3 w-6 h-6">
+                <a href="#" class="flex-col h-full flex">
+                  This is link bf4c3185-7df6-4900-85d2-8d903444517a
+                </a>
+              </li>
+              <li class="bg-white overflow-hidden sm:rounded-lg shadow">
+                <ul
+                  class="text-gray-900 flex text-base font-medium justify-between space-x-8 mt-4 items-center"
+                ></ul>
+              </li>
+            </ul>
+            <ul class="sr-only">
+              <li
+                class="rounded-md py-2 border justify-center bg-white border-gray-300 hover:bg-gray-50 focus:outline-none items-center focus:ring-offset-2 md:w-auto focus:ring-indigo-500 px-4 w-full focus:ring-2 flex text-sm text-gray-700 font-medium shadow-sm"
+              >
+                <img
+                  class="relative py-2 px-3 bg-white"
+                  alt="Profile picture of user ead223d2-4495-4333-95eb-700e8f30b335"
+                  src="https://example.org/pictures/e6977d06-6f98-49ec-ad7b-934dae599dc9"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  class="text-sm font-medium group-hover:text-gray-900 text-gray-700"
+                >
+                  This is link 1cb0330b-ce81-4351-a52b-437a388b2c13
+                </a>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="sm:px-6 max-w-7xl lg:py-16 mx-auto py-12 text-center lg:px-8 px-4"
+                >
+                  This is link b2f573ab-f873-48ae-902d-9d153602bf08
+                </a>
+              </li>
+              <li class="flex-col flex mt-8">
+                <ol
+                  class="inset-x-0 absolute p-2 transition z-30 max-w-3xl transform top-0 w-full mx-auto origin-top"
+                ></ol>
+                <img
+                  class="mx-auto max-w-none"
+                  alt="Profile picture of user 14aed72e-fbc4-41ca-9f2f-965f0993f134"
+                  src="https://example.org/pictures/cc5a392c-df99-4441-9f4e-a72572cd77e2"
+                />
+                <ol class="w-4 border-gray-300 h-4 focus:ring-grape-500 text-grape-600"></ol>
+              </li>
+            </ul>
+            <a href="#" target="_blank" rel="noreferrer" class="text-gray-500">
+              This is link c3d1e381-6f53-4dd8-af58-5d36478dd4d6
+            </a>
+            <ul class="w-full">
+              <li class="lg:col-span-2 gap-4 grid-cols-1 grid">
+                <img
+                  class="w-5 pointer-events-none left-4 absolute text-gray-400 h-5 top-3.5"
+                  alt="Profile picture of user 045b8754-006d-4a1d-8138-d7d6a588648a"
+                  src="https://example.org/pictures/19ef4c5a-1894-441a-a2bc-e986a79f1ac4"
+                />
+                <a href="#" class="inset-0 transition-opacity bg-gray-500 bg-opacity-25 fixed">
+                  This is link f9c0401b-7fbc-4ada-8a4b-4fd9a131ddca
+                </a>
+                <img
+                  class="px-4 block py-2 text-sm"
+                  alt="Profile picture of user 414475f4-6c80-4d83-bd7a-2d88db3ef846"
+                  src="https://example.org/pictures/23a4c897-8c07-4043-9a02-3189f587e4ba"
+                />
+              </li>
+              <li class="w-8 h-8 text-white">
+                <a
+                  href="#"
+                  target="_blank"
+                  class="block w-full border-gray-300 shadow-sm text-gray-900 rounded-md focus:ring-indigo-500 focus:border-indigo-500 px-4 py-3"
+                >
+                  This is link ae6ee0f2-0fd8-4c16-899e-db4703bda03a
+                </a>
+              </li>
+              <li
+                class="sm:text-sm shadow-sm w-full focus:ring-indigo-500 rounded-md focus:border-indigo-500 max-w-lg block border-gray-300"
+              >
+                <img
+                  class="flex items-center py-3"
+                  alt="Profile picture of user e33cf3cc-816f-49a7-9617-9fa778411d26"
+                  src="https://example.org/pictures/36467f82-d7ad-4af0-b452-edc22f37b99a"
+                />
+                <ol
+                  class="hover:text-gray-500 -mr-2 flex justify-center text-gray-400 items-center h-10 w-10 p-2"
+                ></ol>
+                <ol class="leading-6 text-gray-900 text-lg font-medium"></ol>
+                <a
+                  href="#"
+                  class="relative bg-white hover:bg-gray-100 focus:z-10 py-1.5 text-gray-900"
+                >
+                  This is link 3ab5bbcb-94fd-4606-8374-d2955ed069ad
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="h-8 w-auto">
+            <img
+              class="text-gray-900 contents text-base font-medium"
+              alt="Profile picture of user dfc96dd2-8de3-47df-93e2-919c74884c91"
+              src="https://example.org/pictures/1ff183f1-9fff-4c84-86f5-916a5c47df9b"
+            />
+          </li>
+          <li class="text-gray-500 mt-4 text-sm">
+            <a href="#" target="_blank" class="space-y-6 mt-6">
+              This is link 58e8ef06-de84-4f53-8951-8057c1f34aa7
+            </a>
+          </li>
+          <li
+            class="shadow rounded-lg mt-1 right-0 ring-opacity-5 py-3 text-base max-h-56 ring-black sm:text-sm bg-white absolute w-52 z-10 overflow-auto ring-1 focus:outline-none"
+          >
+            <a href="#" rel="noreferrer" class="text-gray-900">
+              This is link e2ac501f-5433-4cfa-a275-2aadf0ac2dc5
+            </a>
+          </li>
+        </ul>
+        <img
+          class="h-8 w-auto"
+          alt="Profile picture of user be6b3aa8-9174-4c78-85fb-5758b5c9a9c5"
+          src="https://example.org/pictures/136a1dd2-ca92-4c35-97ed-6641bd903463"
+        />
+      </li>
+      <li class="mt-2 leading-8">
+        <ul class="relative z-0">
+          <li class="flex-1 w-0 justify-end flex -mt-px">
+            <ul class="sr-only">
+              <li class="px-4 lg:px-8 sm:px-6">
+                <img
+                  class="object-center object-cover"
+                  alt="Profile picture of user 822069de-150b-431c-9c51-48f30c010126"
+                  src="https://example.org/pictures/52913cd0-a949-483f-9b17-95b33d653c09"
+                />
+                <img
+                  class="gap-x-8 grid gap-y-4 grid-cols-2"
+                  alt="Profile picture of user 1f19b5a1-492f-40a1-93f6-48662923dc14"
+                  src="https://example.org/pictures/644c6307-4222-4fc9-9e1d-8a55e747dce9"
+                />
+              </li>
+              <li class="overflow-y-auto max-h-[800px]">
+                <ul class="justify-center relative flex"></ul>
+                <ol class="justify-center w-7 items-center flex mx-auto rounded-full h-7"></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="sm:items-baseline sm:justify-between sm:flex"
+                >
+                  This is link d1a8a2f5-c7bd-414a-9f00-7003a343014b
+                </a>
+              </li>
+              <li
+                class="-right-2 rounded-md origin-top-right z-10 absolute mt-2 bg-white w-48 ring-black focus:outline-none shadow-lg py-1 ring-opacity-5 ring-1"
+              >
+                <ul
+                  class="px-3 h-14 focus:z-10 hover:bg-gray-100 flex py-2 flex-col bg-white text-gray-900"
+                ></ul>
+                <img
+                  class="text-base flex-1 border-b-2 py-4 whitespace-nowrap px-1 font-medium"
+                  alt="Profile picture of user 3f64f681-4daf-415d-aea1-fa782b00e8aa"
+                  src="https://example.org/pictures/c4211c49-07fd-4ce1-8967-8d3328dbb126"
+                />
+                <a href="#" rel="noreferrer" class="px-3 relative py-2 bg-white">
+                  This is link cfb4f4f6-3219-4ecc-a7aa-1bedf2c54eb4
+                </a>
+              </li>
+              <li class="mt-6 space-y-6">
+                <img
+                  class="mt-16"
+                  alt="Profile picture of user ec588dfd-45f5-4a23-9437-d2c7a59d0279"
+                  src="https://example.org/pictures/01adf10c-f3d9-4001-ad38-90378401ec7e"
+                />
+                <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                  This is link 0e8ead9f-cf37-4d99-8a04-c710463442a6
+                </a>
+                <img
+                  class="text-gray-900 font-medium"
+                  alt="Profile picture of user f6c44743-5529-48cd-a224-2ba72c0b1dff"
+                  src="https://example.org/pictures/a63abbb5-3a9d-49b6-b73e-e1f3065853ff"
+                />
+              </li>
+            </ul>
+          </li>
+          <li class="py-6 mx-auto sm:px-6 max-w-7xl lg:px-8">
+            <a
+              href="#"
+              target="_blank"
+              class="focus:ring-inset items-center w-10 focus:outline-none focus:ring-2 h-10 focus:ring-white flex ml-1 rounded-full justify-center"
+            >
+              This is link fbdf976c-110b-4866-b58a-9b9330b6d572
+            </a>
+            <img
+              class="sm:px-2 max-w-7xl mx-auto lg:px-8"
+              alt="Profile picture of user 843a5239-2748-4bfa-9f66-54659b9835d7"
+              src="https://example.org/pictures/c0fa1b6c-546f-4cb2-9855-ee4413eca63a"
+            />
+            <ol
+              class="ease-in-out flex-shrink-0 cursor-pointer transition-colors focus:ring-2 focus:ring-offset-2 border-transparent rounded-full focus:outline-none border-2 h-6 focus:ring-indigo-500 relative w-11 inline-flex duration-200"
+            >
+              <li class="border-t py-10 border-gray-200">
+                <img
+                  class="flex w-7 h-7 justify-center items-center mx-auto rounded-full"
+                  alt="Profile picture of user 5a5f4e77-a58d-44c1-afee-7dd71082c39d"
+                  src="https://example.org/pictures/75cc1e86-f766-4b39-8bf8-4dbbf0361c35"
+                />
+              </li>
+              <li
+                class="focus:ring-offset-4 focus:ring-opacity-50 text-gray-900 flex bg-white focus:ring cursor-pointer justify-center hover:bg-gray-50 items-center rounded-md relative font-medium h-24 focus:outline-none uppercase text-sm"
+              >
+                <img
+                  class="max-w-lg mx-auto"
+                  alt="Profile picture of user 72b83fea-c9b9-4ea5-bcad-b28146c0d0bc"
+                  src="https://example.org/pictures/8895a7c2-bd0c-441e-baec-d2a592e0d6fd"
+                />
+                <img
+                  class="sm:px-6 lg:px-8 max-w-7xl px-4 mx-auto"
+                  alt="Profile picture of user 3a2a3b3e-c02b-434e-840f-ba5cfb7fff5f"
+                  src="https://example.org/pictures/c80c90ba-5cdc-4dc5-9bb8-491174b34150"
+                />
+                <ul class="flex group"></ul>
+              </li>
+              <li class="leading-7 mt-5 text-base text-gray-600">
+                <img
+                  class="hover:bg-gray-100 py-2 bg-white flex text-gray-900 px-3 focus:z-10 h-14 flex-col"
+                  alt="Profile picture of user c9c2643b-a93e-4ac0-84a5-2168c6527ebc"
+                  src="https://example.org/pictures/84c5c0f1-2abf-4c5f-95ff-92de434b5361"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="bg-white flex-col min-h-full flex pt-16 pb-12"
+                >
+                  This is link 8c00b231-0a5f-4d4e-b7ea-1ffa7505dcdc
+                </a>
+                <ul
+                  class="h-16 items-center rounded-lg w-16 flex-shrink-0 flex justify-center"
+                ></ul>
+                <a href="#" target="_blank" class="sr-only">
+                  This is link eda4ca6c-afca-42fc-b85d-e987feeb72f2
+                </a>
+              </li>
+              <li class="flex-shrink-0 w-5 h-5 text-gray-400 mr-1.5">
+                <ol class="text-sm py-3.5 text-gray-900 px-3 text-left font-semibold"></ol>
+                <ul class="text-sm text-gray-600 font-medium"></ul>
+                <ul class="space-y-10"></ul>
+                <ol class="border-t py-2 border-gray-200"></ol>
+              </li>
+            </ol>
+          </li>
+          <li class="h-8 w-auto">
+            <a href="#" class="text-sm mt-1 text-white">
+              This is link 38a2b462-9661-471a-8cfa-7c0286a3d138
+            </a>
+            <img
+              class="text-sm text-gray-500"
+              alt="Profile picture of user ba4dea61-dbbb-48d5-8a25-54061f13da5a"
+              src="https://example.org/pictures/b98a9057-35cc-4f55-b3c0-6e79bdbd8c48"
+            />
+            <ol class="mt-1">
+              <li class="lg:flex-1 lg:w-0">
+                <ol class="top-4 -ml-px bg-gray-200 w-0.5 left-4 absolute h-full"></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="flex w-7 justify-center items-center rounded-full h-7 mx-auto"
+                >
+                  This is link e8b5209d-8792-411c-9450-8e79473b76cf
+                </a>
+              </li>
+              <li class="mt-1">
+                <ol class="lg:col-span-4 max-w-2xl w-full mt-16 lg:max-w-none lg:mt-0 mx-auto"></ol>
+                <a href="#" rel="noreferrer" class="items-center p-2 flex -m-2 group">
+                  This is link 6b2f9a93-3f7d-4e98-a552-e1e81c6ddd06
+                </a>
+              </li>
+              <li class="text-gray-500 hover:text-gray-900 text-base">
+                <ul class="sr-only"></ul>
+              </li>
+            </ol>
+            <ol
+              class="focus:ring-offset-2 bg-white hover:bg-gray-50 text-sm border ml-5 focus:outline-none rounded-md px-3 focus:ring-2 leading-4 text-gray-700 py-2 font-medium focus:ring-indigo-500 border-gray-300 shadow-sm"
+            >
+              <li class="flex-1 px-1 text-base font-medium whitespace-nowrap border-b-2 py-4">
+                <ul
+                  class="-m-3 flex rounded-lg duration-150 p-3 items-start hover:bg-gray-50 transition ease-in-out"
+                ></ul>
+                <ol
+                  class="sm:py-16 to-cyan-700 lg:px-20 lg:items-center lg:flex from-sky-800 rounded-3xl bg-gradient-to-l lg:py-20 px-6 sm:px-12 py-10"
+                ></ol>
+                <ol class="text-gray-500 mt-2 text-base"></ol>
+              </li>
+              <li class="items-center flex">
+                <ul
+                  class="h-8 rounded-full flex group-hover:bg-indigo-800 relative w-8 z-10 bg-indigo-600 items-center justify-center"
+                ></ul>
+                <ol class="mt-6 font-medium"></ol>
+                <ul class="w-7 flex h-7 justify-center items-center rounded-full mx-auto"></ul>
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user 208fb185-365a-4931-a0cb-33ff0aefdba7"
+                  src="https://example.org/pictures/466284d8-318c-4db3-8625-dd9916454eff"
+                />
+              </li>
+              <li class="max-w-7xl mx-auto lg:px-8 px-4 sm:px-6">
+                <ol class="xl:mt-0 mt-8"></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                  This is link a55c589b-115c-4661-bc21-081278a60bcf
+                </a>
+                <ul class="mx-auto max-w-2xl lg:max-w-4xl"></ul>
+              </li>
+            </ol>
+          </li>
+          <li class="flex mt-2 sm:max-w-md">
+            <ol class="flex px-4 sm:px-6 py-6">
+              <li class="sm:inline hidden">
+                <ul
+                  class="text-gray-900 bg-white relative py-1.5 focus:z-10 hover:bg-gray-100"
+                ></ul>
+                <img
+                  class="w-6 h-6 rounded-full inline-block"
+                  alt="Profile picture of user db8f64e5-8566-4394-9afb-9d04632e8d8d"
+                  src="https://example.org/pictures/1756280b-b6e2-477d-8e3d-25c01cef2605"
+                />
+                <ul class="-mr-3 lg:m-0 lg:left-0 absolute top-8 right-1/2"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="justify-center md:col-span-2 col-span-1 flex lg:col-span-1"
+                >
+                  This is link 9b55fe53-f0f1-4f29-9402-8d3a9b222f0c
+                </a>
+              </li>
+              <li class="min-h-[700px] flex">
+                <ol
+                  class="mt-6 border-transparent font-medium px-8 rounded-md text-white inline-block bg-gray-900 w-full hover:bg-gray-800 py-3 border sm:w-auto"
+                ></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="justify-center p-8 bg-white flex items-center"
+                >
+                  This is link 3ab8a90d-85db-4222-bf9e-63b9839fd294
+                </a>
+                <img
+                  class="hover:text-gray-500 text-gray-400"
+                  alt="Profile picture of user 252a6f38-f65b-419c-95a0-3d62d89bc9e5"
+                  src="https://example.org/pictures/dea715f6-f8c4-4f2d-8caf-e80bf3545a25"
+                />
+              </li>
+              <li class="-mt-6">
+                <ol class="p-3 hover:bg-gray-50 items-start -m-3 rounded-lg flex"></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="flex-wrap justify-between -ml-8 flex -mt-4 lg:-ml-4"
+                >
+                  This is link 05851fa2-4288-4dc5-9cdd-799fc91ee941
+                </a>
+                <ul class="text-sm text-gray-900 mt-4"></ul>
+                <a href="#" class="text-yellow-400">
+                  This is link c40d8904-99a6-4cec-9d40-9c09d08a9b67
+                </a>
+              </li>
+              <li
+                class="pb-16 max-w-2xl sm:pt-16 px-4 lg:px-8 mx-auto sm:px-6 pt-12 lg:max-w-7xl sm:pb-24"
+              >
+                <ul
+                  class="text-indigo-600 focus:outline-none font-medium rounded-md bg-white focus:ring-indigo-500 hover:text-indigo-500 focus:ring-offset-2 focus:ring-2"
+                ></ul>
+                <a href="#" class="font-medium text-sm mt-1 text-gray-900">
+                  This is link d1927356-b4d0-4228-9953-6a5be4caad3b
+                </a>
+                <ol class="focus:z-10 hover:bg-gray-100 bg-white py-1.5"></ol>
+                <ul
+                  class="absolute inset-0 from-transparent bg-gradient-to-b to-black opacity-50"
+                ></ul>
+              </li>
+              <li class="sm:space-y-4 mt-6 space-y-6 sm:mt-4">
+                <img
+                  class="font-medium text-gray-700 group-hover:text-gray-900 text-base"
+                  alt="Profile picture of user 0beb3b5b-320b-48c4-b083-a96910d1839b"
+                  src="https://example.org/pictures/f1ceea49-540b-41f9-8d09-f9963bd5ab5f"
+                />
+                <img
+                  class="rounded h-4 w-4 focus:ring-indigo-500 border-gray-300 text-indigo-600"
+                  alt="Profile picture of user 27817884-935e-4ded-a9a3-b06b4d95ea9f"
+                  src="https://example.org/pictures/5c84f427-0221-40a2-a4d6-67f78246d611"
+                />
+                <ol class="mt-1 text-sm text-gray-900"></ol>
+              </li>
+            </ol>
+            <ol class="max-w-7xl lg:px-8 mx-auto py-12 px-4 sm:px-6">
+              <li class="rounded-md divide-gray-200 border border-gray-200 divide-y">
+                <a href="#" class="py-4 px-4 sm:px-0">
+                  This is link a34c781e-2dba-4447-9f44-64cc0b08b382
+                </a>
+              </li>
+              <li class="hover:text-gray-900 text-base text-gray-500">
+                <ol class="flow-root"></ol>
+                <img
+                  class="overflow-y-auto w-full bg-white flex-col shadow-xl pb-6 flex ml-auto relative h-full py-4 max-w-xs"
+                  alt="Profile picture of user a6e4855c-7744-4dde-a6de-a959e316a017"
+                  src="https://example.org/pictures/e73c3f37-32de-43b5-9ab4-f8f2ececa719"
+                />
+                <img
+                  class="p-6 h-full"
+                  alt="Profile picture of user a33b6d2d-bd7d-4bb2-a701-5b9d5c25ee61"
+                  src="https://example.org/pictures/4b929804-0b19-41cc-b568-649064464aca"
+                />
+                <a href="#" rel="noreferrer" class="rounded-lg shadow w-full bg-white h-full">
+                  This is link f1a1f9e8-c5c0-41f9-a667-5407dc36d597
+                </a>
+              </li>
+            </ol>
+            <ul class="ml-3 text-sm">
+              <li class="group inline-flex text-sm text-gray-500 hover:text-gray-700">
+                <a href="#" target="_blank" class="text-gray-900 font-medium">
+                  This is link b3248782-8152-47ef-b809-53e48076d06d
+                </a>
+                <ul class="font-medium text-xl text-white leading-none"></ul>
+              </li>
+              <li class="px-3 font-medium rounded-md block text-gray-900 py-2">
+                <img
+                  class="items-center justify-center rounded-full h-7 flex w-7 mx-auto"
+                  alt="Profile picture of user ccf773ca-1e8f-4e02-ac31-ee3398a18e17"
+                  src="https://example.org/pictures/9be02b24-470e-47a9-9df3-81de016a53a3"
+                />
+              </li>
+              <li class="sr-only">
+                <img
+                  class="flex-grow"
+                  alt="Profile picture of user f9f0d9f7-151d-4a25-aac4-fdebf6dfdcf8"
+                  src="https://example.org/pictures/d5cfa1f3-b2a6-49b7-af59-a7cae77ad5f0"
+                />
+                <ul class="text-gray-400 flex-shrink-0 h-5 w-5"></ul>
+              </li>
+              <li class="mt-1 relative">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="relative inline-block text-left"
+                >
+                  This is link a0f42648-ea28-4903-9a72-fdbae6dce223
+                </a>
+                <ul class="tracking-tight text-indigo-600 leading-8 text-lg font-semibold"></ul>
+              </li>
+              <li class="bg-gray-50 text-gray-500 px-3 relative py-2">
+                <ol
+                  class="pr-2 -mt-2.5 z-20 leading-5 -ml-14 text-xs left-0 w-14 sticky text-right text-gray-400"
+                ></ol>
+                <ul class="bg-cover bg-center bg-gray-300 min-h-[600px]"></ul>
+              </li>
+            </ul>
+            <ul
+              class="rounded-md text-sm text-gray-700 items-center inline-flex relative bg-white border px-4 border-gray-300 hover:bg-gray-50 font-medium py-2"
+            >
+              <li class="group-hover:text-indigo-500 w-6 h-6 text-indigo-400">
+                <a href="#" target="_blank" class="h-5 w-5 text-gray-400">
+                  This is link 2189aff9-23f4-42dd-9260-f6d00f1fdcbd
+                </a>
+              </li>
+              <li class="hover:text-gray-500 text-gray-400 p-2 lg:ml-4">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="-space-y-px bg-white relative rounded-md"
+                >
+                  This is link 3977f522-274b-4b2e-94a4-d9cbb7bfa7b0
+                </a>
+                <ul
+                  class="text-gray-400 text-right z-20 pr-2 sticky leading-5 text-xs left-0 w-14 -ml-14 -mt-2.5"
+                ></ul>
+              </li>
+              <li class="items-center flex space-x-2">
+                <ol class="transform h-5 w-5"></ol>
+                <ol class="h-5 w-5 text-gray-400"></ol>
+                <a href="#" rel="noreferrer" class="items-center text-center flex-col flex">
+                  This is link fa8ddef7-89e9-4384-bfb4-fdbcd92215aa
+                </a>
+              </li>
+              <li class="justify-center w-7 rounded-full mx-auto h-7 flex items-center">
+                <img
+                  class="justify-center flex rounded-full h-7 w-7 mx-auto items-center"
+                  alt="Profile picture of user 986649a0-493b-441d-9eea-fef4cc501ff7"
+                  src="https://example.org/pictures/8a40efe7-9298-479f-967c-ddbeb93ae551"
+                />
+                <a href="#" rel="noreferrer" class="text-gray-500">
+                  This is link f724fb04-ad4b-44e3-a36f-14a41ea3bab7
+                </a>
+                <ol class="justify-center h-7 mx-auto flex rounded-full w-7 items-center"></ol>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </main>
+</div>
diff --git a/oxide/crates/core/benches/fixtures/template-001.html b/oxide/crates/core/benches/fixtures/template-001.html
new file mode 100644
index 000000000..d05b12e6c
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-001.html
@@ -0,0 +1,4400 @@
+<div class="mt-6 space-y-6">
+  <main class="flex-shrink-0 ml-4">
+    <ul class="grid grid-cols-6 gap-6">
+      <li class="-mr-2 md:hidden -my-2">
+        <ol class="justify-between h-16 flex relative">
+          <li class="items-center left-0 flex inset-y-0 pointer-events-none pl-3 absolute">
+            <ul class="w-6 h-6">
+              <li class="text-center text-gray-900 font-bold tracking-tight text-3xl">
+                <ul class="mt-2"></ul>
+                <ol class="h-5 text-gray-500 w-5"></ol>
+                <img
+                  class="focus:ring-2 text-gray-400 focus:outline-none border-gray-200 lg:hidden border-r focus:ring-inset focus:ring-cyan-500 px-4"
+                  alt="Profile picture of user 3e00776c-13ff-43ae-a546-9f0827263e6e"
+                  src="https://example.org/pictures/b73f19f2-2c2c-40c8-8de0-a43e77ed920b"
+                />
+                <ol class="gap-8 grid-cols-2 mt-12 grid xl:mt-0 xl:col-span-2"></ol>
+              </li>
+              <li class="ml-3 flex-auto truncate">
+                <ul class="h-7 w-7 justify-center mx-auto rounded-full items-center flex"></ul>
+              </li>
+              <li class="text-gray-500 flex-shrink-0 mr-1.5 h-5 w-5">
+                <ol class="bg-white cursor-pointer text-gray-900 shadow-sm"></ol>
+                <a href="#" class="flex items-center">
+                  This is link 3cd56718-76d9-4d38-9721-bdfcdd53cb01
+                </a>
+              </li>
+              <li class="text-base font-medium text-gray-900 hover:text-gray-700">
+                <ul
+                  class="focus:ring-indigo-500 rounded-md border-gray-300 w-full mt-1 sm:text-sm shadow-sm block focus:border-indigo-500"
+                ></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="text-sm flex">
+            <a href="#" rel="noreferrer" class="hover:underline">
+              This is link 528d1ee2-968a-4dba-b020-335154c221f8
+            </a>
+          </li>
+          <li
+            class="justify-between text-gray-900 font-medium text-base flex space-x-8 mt-4 items-center"
+          >
+            <img
+              class="mt-6 w-full flex-1 px-2 space-y-1"
+              alt="Profile picture of user 1448b485-f7b9-438f-982b-2fb42c5a22cb"
+              src="https://example.org/pictures/37190fab-231a-49d6-a4ca-4e3590ac04c7"
+            />
+            <img
+              class="sr-only"
+              alt="Profile picture of user 828a7977-bd55-472e-a59d-e8b591e53f6d"
+              src="https://example.org/pictures/a584b6cc-6658-4894-a2a1-9afdd931a6fb"
+            />
+            <img
+              class="rounded-full h-5 w-5"
+              alt="Profile picture of user 6d72fb81-c39b-44c3-8cd6-e81e877ec802"
+              src="https://example.org/pictures/dc362d2e-4029-416e-b2fb-a2e93a88ed6a"
+            />
+          </li>
+        </ol>
+      </li>
+      <li class="lg:w-0 lg:flex-1 justify-start flex">
+        <a href="#" class="bg-white hover:bg-gray-100 focus:z-10 py-1.5">
+          This is link 3b1c13d7-33b5-4b64-91fc-18676137fa8f
+        </a>
+        <img
+          class="mt-6 space-y-6"
+          alt="Profile picture of user 8e764361-2a33-4af9-b65e-d4ad5cb3a20f"
+          src="https://example.org/pictures/08a3b969-30db-4f5f-9d28-c5feced1ff26"
+        />
+        <a href="#" class="bg-gray-50 px-3 text-gray-500 py-2 relative">
+          This is link e856d0a2-a6ba-4d9a-885e-e318db5271d1
+        </a>
+        <img
+          class="flex-auto flex flex-col"
+          alt="Profile picture of user bc80e7f3-2d37-42ac-82e9-37d0dfd57f13"
+          src="https://example.org/pictures/b38915ca-dc49-494d-ba97-f548a5de055b"
+        />
+      </li>
+      <li class="w-6 flex-none text-opacity-40 text-gray-900 h-6">
+        <ul
+          class="space-x-3 justify-between px-2 sm:px-3 py-2 border-t flex items-center border-gray-200"
+        >
+          <li class="h-5 w-5 flex-shrink-0 text-gray-400">
+            <ol class="sr-only">
+              <li class="relative">
+                <ol
+                  class="lg:mx-auto lg:px-8 lg:grid-flow-col-dense lg:grid-cols-2 lg:grid lg:max-w-7xl lg:gap-24"
+                ></ol>
+                <ol class="flex-shrink-0"></ol>
+              </li>
+              <li class="sr-only">
+                <img
+                  class="flex-col-reverse flex"
+                  alt="Profile picture of user 040fc17d-bf62-42b9-a628-6108945fc042"
+                  src="https://example.org/pictures/9d1a9c6e-ba12-4d4b-a26e-2c20a2bbc870"
+                />
+                <img
+                  class="lg:px-8 max-w-3xl sm:py-24 px-4 sm:px-6 mx-auto py-16"
+                  alt="Profile picture of user e400ebfe-93dd-45be-8bbc-b91ca51f08b5"
+                  src="https://example.org/pictures/32dc96bf-104f-4155-bc2a-a26a86322a90"
+                />
+                <ol
+                  class="bg-white text-gray-400 rounded-full focus:outline-none flex focus:ring-indigo-500 focus:ring-2 w-8 items-center h-8 justify-center hover:text-gray-500 hover:bg-gray-100"
+                ></ol>
+                <ul class="flex items-center px-5"></ul>
+              </li>
+            </ol>
+            <ul class="lg:grid lg:grid-cols-2 lg:gap-8">
+              <li
+                class="mt-1 rounded-md shadow-sm focus:ring-blue-500 sm:text-sm w-full text-blue-gray-900 focus:border-blue-500 block border-blue-gray-300"
+              >
+                <img
+                  class="px-2 flex font-medium text-base text-gray-300 hover:bg-gray-700 items-center hover:text-white rounded-md py-2"
+                  alt="Profile picture of user 71b1f5de-a722-484a-af41-847aabd38eae"
+                  src="https://example.org/pictures/5b9502ba-99ef-4de6-8f3e-7eb45a2c2bb4"
+                />
+                <ul class="text-gray-500"></ul>
+                <ul class="bg-gray-900 text-white"></ul>
+              </li>
+              <li class="gap-x-6 gap-y-10 lg:gap-x-8 grid-cols-1 grid sm:grid-cols-2">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="font-medium pr-6 ml-3 text-gray-900 text-sm whitespace-nowrap"
+                >
+                  This is link f6945ba2-4b3e-43c7-a344-4b2861d41b7e
+                </a>
+                <ol class="justify-center flex space-x-5"></ol>
+              </li>
+              <li class="mt-6 space-y-6">
+                <ul class="bg-gray-900"></ul>
+                <img
+                  class="-space-y-px shadow-sm rounded-md"
+                  alt="Profile picture of user 4c10d21a-3bb6-40fe-a0e1-6838b442648a"
+                  src="https://example.org/pictures/76d640c0-9015-421d-9cca-dff0a7e45c8c"
+                />
+                <a href="#" rel="noreferrer" class="block">
+                  This is link c20a09fb-97e9-43e9-b891-9e7b3fe1c2d3
+                </a>
+              </li>
+            </ul>
+            <img
+              class="whitespace-nowrap border-b-2 px-1 text-sm font-medium pb-4"
+              alt="Profile picture of user a82f16b5-3cbc-46c3-ac8b-28fa3145cfa5"
+              src="https://example.org/pictures/5891be1e-1026-4f34-b0d8-d725b55b25e0"
+            />
+            <ul class="font-medium text-lg mt-1 text-gray-900">
+              <li class="justify-between items-center py-2 flex">
+                <ol class="flex-col inline-flex lg:w-auto w-64 text-center"></ol>
+                <ol class="gap-8 lg:grid-cols-5 md:grid-cols-6 grid grid-cols-2"></ol>
+              </li>
+              <li class="pt-10 border-gray-200 mt-10 border-t">
+                <ol class="rounded-lg w-64 md:w-72 md:h-72 h-64 object-cover"></ol>
+                <ol class="space-y-4 mt-4"></ol>
+                <img
+                  class="lg:ml-8 ml-4 flow-root"
+                  alt="Profile picture of user 78aa6b7c-9493-426b-b881-65dd56534994"
+                  src="https://example.org/pictures/60f03393-19d1-44cc-a903-8567f6dee825"
+                />
+              </li>
+            </ul>
+          </li>
+          <li
+            class="rounded-lg -m-3 ease-in-out duration-150 flex transition p-3 hover:bg-gray-100"
+          >
+            <ol class="inset-0 bg-black bg-opacity-25 fixed">
+              <li
+                class="py-2 rounded-md flex font-medium text-gray-700 text-sm hover:text-gray-900 group hover:bg-gray-50 items-center px-3"
+              >
+                <ul class="sr-only"></ul>
+                <ol class="text-lg max-w-prose mx-auto"></ol>
+                <ul class="h-7 flex rounded-full items-center mx-auto justify-center w-7"></ul>
+                <ol class="sm:w-full hidden sm:absolute sm:block sm:h-full sm:inset-y-0"></ol>
+              </li>
+              <li class="p-2 text-gray-500 -m-2 block">
+                <ol class="text-sm font-medium text-gray-900"></ol>
+                <ol class="flex flex-wrap mt-5 sm:space-x-3 space-y-3 sm:space-y-0"></ol>
+                <ul class="z-40 inset-0 fixed"></ul>
+              </li>
+            </ol>
+            <img
+              class="text-2xl font-bold text-gray-900 sm:pr-12"
+              alt="Profile picture of user 95db06ca-4a52-44c3-9622-99a21f6b40b9"
+              src="https://example.org/pictures/85c38e8b-8f84-476b-af52-407f339c68d3"
+            />
+            <img
+              class="hover:text-gray-800 text-sm flex font-medium items-center text-gray-700"
+              alt="Profile picture of user b961f302-bb86-4d98-afef-63965b6fc655"
+              src="https://example.org/pictures/6e0a7a4f-847b-48d3-a428-347aa4616efd"
+            />
+            <img
+              class="sr-only"
+              alt="Profile picture of user 45b15757-4695-4881-8c47-91ebd7ff8917"
+              src="https://example.org/pictures/3cbafc74-eb0c-45aa-b9b5-395444bca496"
+            />
+          </li>
+          <li
+            class="focus:ring-indigo-500 shadow-sm sm:text-sm block border-gray-300 focus:border-indigo-500 mt-1 w-full rounded-md"
+          >
+            <img
+              class="bg-gray-50 fixed hidden h-full lg:block right-0 w-1/2 top-0"
+              alt="Profile picture of user 4e2678c6-27f8-4b69-b132-0c98bd628afa"
+              src="https://example.org/pictures/a0142cd2-9934-428d-9a60-51f5c8395473"
+            />
+            <ol class="mt-4 space-y-4">
+              <li class="w-5 h-5">
+                <ol class="mb-4 mt-2 text-xs font-semibold text-gray-500"></ol>
+                <ol class="space-y-1"></ol>
+                <ul class="pt-2 space-y-1 pb-3 px-2"></ul>
+                <ul
+                  class="hidden whitespace-nowrap sm:table-cell py-4 text-sm text-gray-500 px-3"
+                ></ul>
+              </li>
+              <li class="text-xl max-w-3xl mt-6 text-warm-gray-500">
+                <a href="#" rel="noreferrer" class="bg-white">
+                  This is link ada41ef2-0b0f-45d8-944c-e679d6d4ec31
+                </a>
+              </li>
+              <li class="sm:w-40 lg:w-48 font-medium text-sm sm:flex-shrink-0 text-gray-500">
+                <ul class="pl-3 relative pr-4 sm:pr-6 py-3.5"></ul>
+              </li>
+              <li class="flex group border-l-4 py-2 font-medium text-sm items-center px-3">
+                <ol class="lg:px-8 px-4 sm:px-6 relative"></ol>
+                <ol class="rounded-tl-lg rounded-tr-lg sm:rounded-tr-none"></ol>
+              </li>
+            </ol>
+            <ul class="h-4 border-gray-300 w-4 focus:ring-indigo-500 text-indigo-600">
+              <li class="min-h-[640px] bg-gray-100">
+                <a href="#" target="_blank" rel="noreferrer" class="gap-4 grid-cols-2 grid">
+                  This is link cb1ac342-8be9-4782-b8e9-23e3820b722b
+                </a>
+                <a href="#" target="_blank" rel="noreferrer" class="bg-white">
+                  This is link b5c2b4ab-f080-4190-85f5-b0b54ae0f6b9
+                </a>
+                <ol class="block truncate font-medium"></ol>
+              </li>
+              <li class="mt-1">
+                <ul class="ml-3 inline-flex"></ul>
+                <ul class="text-gray-900 text-sm font-medium"></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="object-center object-cover">
+            <ul
+              class="flex focus:ring-white focus:ring-inset w-10 h-10 items-center ml-1 focus:outline-none justify-center focus:ring-2 rounded-full"
+            >
+              <li class="px-2.5 py-0.5 font-medium items-center rounded-full text-xs inline-flex">
+                <img
+                  class="font-medium py-2 text-base block px-3 rounded-md"
+                  alt="Profile picture of user 8746f562-d62d-4b23-b226-6764ee2bf7e6"
+                  src="https://example.org/pictures/634bd1f1-7176-4a1c-ac60-41a7ce969907"
+                />
+                <a href="#" rel="noreferrer" class="w-screen pointer-events-auto max-w-md">
+                  This is link a01c4154-8759-45fe-832c-0f044a5a0ee1
+                </a>
+              </li>
+              <li class="sm:block ml-3 hidden">
+                <ul class="leading-6 text-gray-900 text-lg font-medium"></ul>
+                <a href="#" target="_blank" class="space-y-6 mt-6">
+                  This is link e98f1c23-7fa1-4502-b55c-4d66ff04c6cd
+                </a>
+              </li>
+              <li class="px-4 text-sm block py-2">
+                <a href="#" rel="noreferrer" class="flex-shrink-0">
+                  This is link 43ff8a27-a7b9-4a2d-9d2f-bc90b3160a41
+                </a>
+                <a href="#" rel="noreferrer" class="justify-between items-start flex">
+                  This is link 653b6f76-840f-46b5-9c41-30574962d915
+                </a>
+                <ol
+                  class="flex pl-3 inset-y-0 pointer-events-none left-0 absolute items-center"
+                ></ol>
+                <img
+                  class="mt-24"
+                  alt="Profile picture of user 563528db-75c2-4978-883f-1b13851edd6f"
+                  src="https://example.org/pictures/7a547078-e0cc-4195-a0d8-2307833dcd5c"
+                />
+              </li>
+              <li class="sr-only">
+                <img
+                  class="flex-shrink-0 w-5 h-auto"
+                  alt="Profile picture of user 22b9a12a-1941-4a54-8be4-d4efdae8749c"
+                  src="https://example.org/pictures/e9bb349c-6de2-4c77-8061-9adcc0b5adfb"
+                />
+              </li>
+            </ul>
+            <a href="#" rel="noreferrer" class="font-medium text-sm text-gray-900 mt-4">
+              This is link 0693c4ff-7941-4b11-b47a-401ac8f0bba6
+            </a>
+          </li>
+          <li class="text-gray-900 font-bold text-3xl tracking-tight sm:text-4xl">
+            <ul class="relative hover:bg-gray-100 text-gray-400 bg-gray-50 focus:z-10 py-1.5">
+              <li class="px-4 bottom-0 inset-x-0">
+                <img
+                  class="w-5 h-5 rounded-full flex-shrink-0"
+                  alt="Profile picture of user 43183380-2e7d-44f5-b68a-b55e12a611f3"
+                  src="https://example.org/pictures/b037f64c-92d8-4f04-a2ae-f98a3002bc3f"
+                />
+                <img
+                  class="text-gray-400 hover:text-gray-500"
+                  alt="Profile picture of user db34ed6b-7788-4068-827e-d7879801db1f"
+                  src="https://example.org/pictures/d05e3713-9e7b-41bb-8a9c-0b36d1f7e901"
+                />
+                <ul
+                  class="sm:px-6 py-16 lg:grid px-4 lg:grid-cols-2 lg:mx-auto lg:max-w-7xl lg:py-32 lg:px-8 relative sm:py-24"
+                ></ul>
+              </li>
+              <li class="text-gray-400 -ml-14 pr-2 leading-5 w-14 text-right text-xs -mt-2.5">
+                <ul class="text-gray-700 font-medium"></ul>
+                <img
+                  class="focus:z-10 bg-white hover:bg-gray-100 py-1.5"
+                  alt="Profile picture of user 7c443279-0590-44b6-b44c-6cdee96cd0d9"
+                  src="https://example.org/pictures/eb13ab51-a034-446f-a96a-58a0d26be88b"
+                />
+                <ul class="hidden lg:inset-y-0 sm:block lg:w-screen lg:right-0 lg:absolute"></ul>
+                <ul class="focus:z-10 hover:bg-gray-100 bg-white rounded-bl-lg py-1.5"></ul>
+              </li>
+              <li class="bg-gray-50 pb-8 rounded-lg px-6 flow-root">
+                <ul class="divide-gray-200 space-y-10 divide-y"></ul>
+                <img
+                  class="ml-auto"
+                  alt="Profile picture of user 2daa1435-60cd-468d-8b79-561a9bb988c0"
+                  src="https://example.org/pictures/45dc9b68-9b20-419b-af5a-4f59c7981102"
+                />
+                <ol class="font-semibold text-sm text-gray-900 text-left px-3 py-3.5"></ol>
+                <ol class="overflow-hidden bg-white shadow rounded-lg"></ol>
+              </li>
+              <li class="flex-shrink-0">
+                <img
+                  class="xl:col-span-1 space-y-8"
+                  alt="Profile picture of user 35cb35e1-39ef-481e-8123-679c8f14b299"
+                  src="https://example.org/pictures/d210d00d-c9ef-4f66-813b-cf94f658f6dc"
+                />
+                <img
+                  class="text-indigo-600 font-medium text-base"
+                  alt="Profile picture of user 0931e1d8-ba6d-481c-80d6-542e87d3a3b7"
+                  src="https://example.org/pictures/10320a15-98b7-481a-be0a-b332663badda"
+                />
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <ul class="text-gray-500 text-sm mt-3">
+          <li class="w-7 mx-auto justify-center rounded-full flex h-7 items-center">
+            <a href="#" rel="noreferrer" class="text-sm font-medium hover:text-gray-100 text-white">
+              This is link fe0ca940-5be9-4b7d-9511-2f1164707553
+            </a>
+            <ul class="font-semibold text-gray-900 justify-center items-center">
+              <li class="text-indigo-600">
+                <ol class="hidden md:block"></ol>
+                <img
+                  class="truncate"
+                  alt="Profile picture of user 3b5b4c23-e509-4f3b-ba8c-2abaad038bc8"
+                  src="https://example.org/pictures/a84f99e8-996d-43a7-a06c-ece38aaf2584"
+                />
+                <img
+                  class="text-left sm:pl-6 py-3.5 pl-4 text-gray-900 text-sm pr-4 font-semibold"
+                  alt="Profile picture of user 5b296aab-f565-4f79-9504-bc75c81da971"
+                  src="https://example.org/pictures/d7bab2af-4dd3-4552-b42d-2197aac34a6e"
+                />
+                <img
+                  class="py-2 border-t border-gray-200"
+                  alt="Profile picture of user 74c090f8-cb40-4710-8f5c-cbf5be8c056c"
+                  src="https://example.org/pictures/f84c84f4-f2be-4145-b829-e07f00b34dab"
+                />
+              </li>
+              <li class="font-medium hover:text-white py-2 rounded-md text-sm px-3 text-indigo-200">
+                <ol class="text-sm p-4 text-gray-500"></ol>
+                <img
+                  class="text-gray-500 hover:text-gray-600"
+                  alt="Profile picture of user 2e23160d-89ec-4273-96ac-830eaf3274e4"
+                  src="https://example.org/pictures/8c0c691a-bf75-44a4-b9d2-f6265bb8c2d4"
+                />
+                <a
+                  href="#"
+                  class="sm:w-auto px-8 text-gray-900 text-base rounded-md border-transparent font-medium block mt-8 py-3 w-full border bg-white hover:bg-gray-100"
+                >
+                  This is link 0400a3d6-f40d-43a6-b747-f97c3f4e793e
+                </a>
+              </li>
+              <li class="text-gray-500">
+                <a href="#" class="focus:z-10 py-1.5 bg-white hover:bg-gray-100">
+                  This is link be773848-e116-4077-9c36-8c005265a157
+                </a>
+                <img
+                  class="hover:bg-gray-100 bg-white focus:z-10 py-1.5"
+                  alt="Profile picture of user fc6c4485-b4a1-4bdd-8912-ca9200a5f4c4"
+                  src="https://example.org/pictures/36a6c392-4e6f-49ca-8cb9-055b1971addf"
+                />
+              </li>
+              <li class="flex-auto ml-3 truncate">
+                <ul
+                  class="px-4 sm:grid-cols-3 sm:gap-4 sm:grid space-y-1 sm:px-6 sm:py-5 sm:space-y-0"
+                ></ul>
+                <ul
+                  class="absolute ring-opacity-5 shadow-2xl origin-top-right bg-white right-0 focus:outline-none w-40 mt-2 ring-black z-10 ring-1 rounded-md"
+                ></ul>
+              </li>
+              <li class="space-y-10">
+                <a href="#" class="mt-8"> This is link 3a4c54a9-822b-4752-8b39-ffd88dd0d3ff </a>
+              </li>
+            </ul>
+            <img
+              class="focus:z-10 bg-white hover:bg-gray-100 py-1.5"
+              alt="Profile picture of user d86215ca-b028-4e0c-ab1a-c4ed7a60ea26"
+              src="https://example.org/pictures/417a9f87-4f63-403b-8794-3bb886da64a1"
+            />
+          </li>
+          <li class="focus:outline-none">
+            <a href="#" target="_blank" rel="noreferrer" class="relative flex-shrink-0">
+              This is link accc342e-0d6d-40d4-b7a3-ea0d97e0d7c2
+            </a>
+            <img
+              class="border-gray-300 block rounded-none flex-grow w-full focus:border-sky-500 focus:ring-sky-500 sm:text-sm min-w-0 rounded-r-md"
+              alt="Profile picture of user 02f504d8-5aff-44c7-a8b6-8627b44068c6"
+              src="https://example.org/pictures/589f5ff7-d6d4-4c80-8218-b698e6451944"
+            />
+          </li>
+        </ul>
+        <a href="#" class="gap-x-6 grid-cols-1 gap-y-10 sm:grid-cols-2 grid lg:gap-x-8">
+          This is link 99b8dda0-443a-415d-88f7-5ea1289936a8
+        </a>
+        <a href="#" class="text-gray-900 focus:z-10 hover:bg-gray-100 py-1.5 bg-white">
+          This is link 9736363e-67b8-40b6-956e-7bc5d019fe61
+        </a>
+      </li>
+      <li class="max-w-2xl mx-auto">
+        <img
+          class="focus:outline-none focus:ring-2 focus:ring-inset items-center p-2 hover:bg-gray-700 rounded-md hover:text-white focus:ring-white justify-center text-gray-400 inline-flex"
+          alt="Profile picture of user 0403e776-81b0-451a-bf5d-34da9eed09d0"
+          src="https://example.org/pictures/c4578fd0-60d3-4ab4-9b13-d91208cc7f59"
+        />
+      </li>
+      <li class="lg:grid-cols-12 lg:gap-x-16 lg:grid">
+        <img
+          class="max-w-md px-4 sm:px-7 md:max-w-4xl mx-auto md:px-6"
+          alt="Profile picture of user 0d3e20e9-b774-4c65-b9f3-48d1a26d9e1d"
+          src="https://example.org/pictures/20c7bbcb-ab16-4cca-b958-1765ff375fd5"
+        />
+        <a href="#" class="py-3 flex items-center">
+          This is link b664deb8-7733-47d1-bfca-f148f23244ce
+        </a>
+      </li>
+    </ul>
+    <span class="block"> This is text d60c61e4-6aeb-4eb3-965b-617cc507dcf8 </span>
+    <a
+      href="#"
+      target="_blank"
+      class="px-2 items-center absolute inset-y-0 right-0 flex pointer-events-none"
+    >
+      This is link eadc06c7-f2d4-47ae-93f2-3895885e8d32
+    </a>
+    <nav class="font-semibold text-xs mt-4 px-3 text-gray-900 mb-2">
+      <ul class="sm:grid-cols-7 grid col-end-2 grid-cols-1 sm:pr-8 col-start-1 row-start-1">
+        <li class="block">
+          <ol class="sm:hidden">
+            <li class="mt-3 space-y-1">
+              <ol class="py-3 justify-center flex items-center">
+                <li class="sm:flex sm:justify-between">
+                  This is item 384efd91-e967-40b0-8e0e-4412738d3265
+                </li>
+                <li
+                  class="block focus:border-indigo-500 w-full shadow-sm sm:text-sm border-gray-300 focus:ring-indigo-500 rounded-md"
+                >
+                  This is item 74088b2f-57bf-40d7-bfac-c86c69fd6a0a
+                </li>
+                <li class="flex-auto font-semibold sm:mt-0 text-gray-900 mt-2">
+                  This is item 58604662-2ba5-41b6-af5d-041efe5f7945
+                </li>
+                <li
+                  class="rounded-md lg:w-full hover:bg-gray-50 py-2 inline-flex font-medium border-gray-300 mt-6 justify-center sm:w-auto border bg-white w-full text-sm px-8 text-gray-900 items-center"
+                >
+                  This is item be254673-acd2-4414-ad13-9dc2e99b52e5
+                </li>
+              </ol>
+              <a href="#" class="fixed z-40 flex inset-0">
+                This is link d73027b7-5783-4f22-9dbb-084218a7f6d3
+              </a>
+            </li>
+            <li class="mt-0.5 sm:mt-1 text-gray-700">
+              <img
+                class="space-y-1"
+                alt="Profile picture of user 7c9b4d46-c5d5-4b92-9d87-6f7f30522ea4"
+                src="https://example.org/pictures/79e24224-b356-4f24-95f8-54d2ccad122a"
+              />
+            </li>
+            <li class="font-medium text-gray-900">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="md:col-start-3 md:mt-0 grid-cols-2 lg:col-start-2 sm:grid-cols-3 gap-8 grid md:col-span-8 lg:col-span-6 col-span-6 mt-10 md:row-start-1"
+              >
+                This is link 4e8004f5-ae0e-4adb-b6c8-17f1591092cb
+              </a>
+            </li>
+          </ol>
+          <img
+            class="block font-medium text-base text-center hover:text-white text-indigo-200"
+            alt="Profile picture of user 5315e46c-295f-4b37-96b2-c3e6b49bd860"
+            src="https://example.org/pictures/00b52c1a-b5e0-4e91-84ce-75fd43dca558"
+          />
+        </li>
+        <li class="border-t py-2 border-gray-200">
+          <ol class="lg:max-w-7xl sm:max-w-3xl px-4 lg:px-8 sm:px-6 text-center mx-auto max-w-md">
+            <li class="sr-only">
+              <ol class="hover:underline">
+                <li class="mt-1">This is item 9fb35868-bef7-4ec2-922e-e5957738f2e4</li>
+                <li class="flex-col mt-6 space-y-6 flex">
+                  This is item 0a8c72ec-927b-4764-a0c9-fe10b574e4aa
+                </li>
+                <li
+                  class="shadow-sm sm:w-auto border font-medium text-sm justify-center focus:outline-none focus:ring-indigo-500 items-center text-white border-transparent hover:bg-indigo-700 focus:ring-offset-2 inline-flex py-2 rounded-md focus:ring-2 px-4 bg-indigo-600"
+                >
+                  This is item 0548ae51-ccf1-4bb2-8e22-823770f25160
+                </li>
+                <li class="px-3 py-4 text-sm text-gray-500 whitespace-nowrap">
+                  This is item c829ed06-3121-466e-90b6-98f9aa0d1729
+                </li>
+              </ol>
+              <img
+                class="flex flex-shrink-0 px-4 items-center"
+                alt="Profile picture of user 5975d2c7-ec67-4488-95c6-5286f741e3f0"
+                src="https://example.org/pictures/302438b4-228b-4367-bc27-1810e21042ea"
+              />
+            </li>
+            <li class="sm:ml-3">
+              <img
+                class="sr-only"
+                alt="Profile picture of user 83c7e97f-ff32-4cde-a785-2b2cfce38b3f"
+                src="https://example.org/pictures/ab50086a-b053-4ed3-8169-9333ca784a19"
+              />
+              <ul class="flex-shrink-0 items-center flex px-4">
+                <li
+                  class="relative bg-white w-full group-hover:opacity-100 rounded-md z-10 text-sm text-gray-900 bg-opacity-75 opacity-0 py-2 focus:opacity-100 px-4"
+                >
+                  This is item 1a2f77a7-d364-45d4-a023-01150b1b988b
+                </li>
+                <li class="text-gray-500 group-hover:text-gray-700 font-medium text-xs">
+                  This is item 5480ceea-e959-4ecc-b4f6-2617e701491d
+                </li>
+                <li
+                  class="space-between sm:space-between sm:items-center flex sm:space-y-0 sm:flex-row space-y-4 flex-col"
+                >
+                  This is item f825f607-7d1b-4288-9531-9f8775906564
+                </li>
+              </ul>
+            </li>
+            <li class="top-8 absolute -ml-3 left-1/2">
+              <ul class="flex-shrink-0">
+                <li class="lg:w-1/2 lg:absolute lg:inset-y-0 lg:right-0">
+                  This is item 4f358ce8-6995-4f72-8ee6-ac34ad67fd7f
+                </li>
+                <li class="flex sm:px-6 justify-center py-12 px-4 lg:px-8">
+                  This is item c03301d2-3312-460b-964c-e1fd033827ff
+                </li>
+              </ul>
+              <ol
+                class="aspect-h-1 rounded-md aspect-w-1 relative bg-gray-100 overflow-hidden group"
+              >
+                <li
+                  class="inset-1 flex-col flex p-2 hover:bg-indigo-100 text-xs group bg-indigo-50 leading-5 overflow-y-auto absolute rounded-lg"
+                >
+                  This is item b11b98ee-d304-44d6-85f6-a2bcd3cc712e
+                </li>
+                <li class="justify-center flex h-full space-x-8">
+                  This is item 441a1b4f-6a46-4e4a-895b-fcf3be3b0f7b
+                </li>
+                <li class="space-y-16 max-w-2xl lg:hidden mx-auto">
+                  This is item c2ad454a-5caa-414b-ab5a-09ebb92bd7f5
+                </li>
+                <li
+                  class="focus:ring-offset-2 bg-white text-gray-700 rounded-md border-gray-300 font-medium shadow-sm px-3 border py-2 focus:ring-2 leading-4 ml-5 focus:ring-indigo-500 hover:bg-gray-50 text-sm focus:outline-none"
+                >
+                  This is item 3c881330-9462-48e4-9b11-e269710d5cfc
+                </li>
+                <li class="h-8 w-8 rounded-full ring-2 inline-block ring-white">
+                  This is item 064fe036-7df8-4c40-a577-99e9c76930e5
+                </li>
+              </ol>
+              <ol class="h-6 w-6">
+                <li class="lg:p-0 sm:px-6 max-w-md lg:h-full px-4 sm:max-w-3xl mx-auto">
+                  This is item 1198b9ac-942f-4d35-9ad6-ab1d3950039b
+                </li>
+                <li class="text-sm">This is item c4c3b97d-55ac-48b2-ae32-282b6072d873</li>
+                <li class="sr-only">This is item 929fccdb-f6b3-4931-be5c-f323d336fb1b</li>
+              </ol>
+            </li>
+            <li class="text-gray-700 flex items-center text-sm font-medium hover:text-gray-800">
+              <img
+                class="leading-6 grid grid-cols-7 mt-6 text-xs text-gray-500"
+                alt="Profile picture of user d88e7b46-a66b-4df0-93f1-1ef43a9b23e3"
+                src="https://example.org/pictures/b9d98104-763d-4ae4-9371-aef54ece4c86"
+              />
+              <ol class="space-y-4">
+                <li class="text-center">This is item 2f11ad66-08d3-4c27-8831-941116b9f2b7</li>
+                <li
+                  class="w-full grid-cols-1 gap-y-8 sm:grid-cols-12 gap-x-6 items-start grid lg:gap-x-8"
+                >
+                  This is item 45fc073f-4585-4741-ade7-1ce39e540f39
+                </li>
+              </ol>
+            </li>
+            <li
+              class="bg-white focus:outline-none ring-black origin-top-right right-0 z-10 absolute ring-opacity-5 p-4 mt-2 rounded-md shadow-2xl ring-1"
+            >
+              <a href="#" target="_blank" rel="noreferrer" class="px-2">
+                This is link 9d272160-aaf7-4a4b-8ead-8a22e3cfafdf
+              </a>
+              <a
+                href="#"
+                class="bg-white md:px-10 justify-center text-base border-transparent md:py-4 items-center font-medium rounded-md hover:bg-gray-50 py-3 border w-full flex px-8 md:text-lg text-indigo-600"
+              >
+                This is link 80e2e0dd-8ea9-4b3b-9914-3b35373d70a2
+              </a>
+            </li>
+          </ol>
+          <ul class="mt-3 max-w-3xl text-lg text-gray-500">
+            <li class="space-y-3 pt-6">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="lg:mx-auto lg:max-w-6xl lg:px-8 px-4 sm:px-6"
+              >
+                This is link 976ffecd-d6e9-40b7-90c0-65e0a32cb1b7
+              </a>
+              <ol class="mr-2 h-5 w-5 -ml-1 text-gray-500">
+                <li class="font-medium text-indigo-100 text-base">
+                  This is item 91916bb5-c40f-4fd2-9e89-58746351f2a3
+                </li>
+                <li class="flex space-x-3 items-center">
+                  This is item 1f7f1d74-9260-4ada-8ec1-6463f9240b56
+                </li>
+                <li
+                  class="rounded-lg bg-gray-200 isolate text-sm gap-px ring-gray-200 grid-cols-7 grid shadow mt-2 ring-1"
+                >
+                  This is item 63d6d270-2a4a-4721-9b11-bfb248f61d57
+                </li>
+              </ol>
+              <ul class="text-sm text-gray-700 block font-medium">
+                <li class="mt-4">This is item 59f451aa-5446-4115-91d6-3f080805330c</li>
+                <li class="divide-gray-200 mt-10 divide-y">
+                  This is item d5672aba-abf7-4615-9696-c3ce4a48c6ee
+                </li>
+                <li
+                  class="bg-gray-700 px-4 text-white items-center shadow-sm inline-flex rounded-md focus:ring-offset-gray-800 border focus:ring-offset-2 font-medium focus:ring-indigo-500 hover:bg-gray-600 text-sm border-transparent focus:ring-2 focus:outline-none py-2"
+                >
+                  This is item 4edea135-04df-4511-8904-5a6a27f42fe3
+                </li>
+                <li class="bg-white lg:px-8 px-4 xl:py-36 sm:px-6 py-16 overflow-hidden">
+                  This is item 33f487a3-a2e9-4d62-b367-425941a054b1
+                </li>
+                <li class="text-sm text-gray-500 text-center sm:mt-0 mt-6">
+                  This is item 09583fe5-75cb-41c2-a9f7-d2030688bb6d
+                </li>
+              </ul>
+            </li>
+            <li class="w-6 h-6">
+              <a href="#" class="sm:text-left text-center lg:text-center sm:flex lg:block">
+                This is link 999e7c29-82f3-4296-894a-969d48d5a6f8
+              </a>
+            </li>
+            <li class="text-sm mt-1 text-gray-500">
+              <ul class="sr-only">
+                <li
+                  class="mx-auto w-8 justify-center rounded-full h-8 items-center hover:bg-gray-200 text-gray-900 flex"
+                >
+                  This is item d00926ff-83b2-4e9e-8f57-2f98324cf654
+                </li>
+                <li class="bg-gray-900 text-white">
+                  This is item c79d8ff6-413f-42d8-80ab-49f7e46c3ff6
+                </li>
+                <li class="items-center left-0 pointer-events-none flex pl-3 inset-y-0 absolute">
+                  This is item 972bfa78-57b3-4dc3-98d2-3ef2241bda15
+                </li>
+                <li class="top-3.5 pointer-events-none h-5 absolute w-5 text-gray-400 left-4">
+                  This is item 417797cc-5361-416c-85a1-08cda6f53a2f
+                </li>
+                <li
+                  class="bg-white ring-opacity-5 mx-auto max-w-xl ring-black rounded-xl shadow-2xl p-2 transition-all ring-1 transform"
+                >
+                  This is item 5ca3b040-8456-4db7-a382-99171f83d78b
+                </li>
+              </ul>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="hover:bg-indigo-700 font-medium text-base border-transparent focus:outline-none text-white flex border rounded-md bg-indigo-600 focus:ring-2 shadow-sm focus:ring-offset-2 py-2 w-full focus:ring-indigo-500 items-center justify-center px-4"
+              >
+                This is link 707f3fd0-ede1-476f-a27d-62dadc3c63de
+              </a>
+            </li>
+          </ul>
+          <ol class="mt-2">
+            <li
+              class="gap-x-8 gap-y-8 mt-6 grid-cols-1 lg:grid-cols-4 grid sm:grid-cols-2 sm:gap-y-10"
+            >
+              <ol
+                class="md:px-10 border-transparent px-8 font-medium items-center bg-indigo-600 text-white justify-center hover:bg-indigo-700 md:py-4 flex py-3 w-full rounded-md text-base border md:text-lg"
+              >
+                <li class="text-sm px-3 whitespace-nowrap text-gray-500 py-4">
+                  This is item a6bcc186-93d6-4fed-bb1c-095ef0a0ed85
+                </li>
+                <li class="overflow-x-auto sm:-mx-6 lg:-mx-8 -mx-4 -my-2">
+                  This is item 93958434-4932-4cdd-b5a4-74a242c63498
+                </li>
+                <li class="truncate">This is item 18b0e5c2-e270-4bdf-a723-dd7bf61199b4</li>
+              </ol>
+              <a href="#" target="_blank" class="justify-between flex">
+                This is link 7caea20e-0636-4c4a-b66a-71bb0349b704
+              </a>
+            </li>
+            <li class="text-gray-400 flex-shrink-0 w-5 group-hover:text-gray-500 h-5">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="border-transparent bg-white text-base inline-block font-medium text-indigo-600 py-2 border rounded-md px-4 hover:bg-indigo-50"
+              >
+                This is link 998a11b1-92e1-4431-9192-a0e7ac700286
+              </a>
+            </li>
+          </ol>
+          <ul class="w-full h-full text-gray-300">
+            <li class="mt-6 space-y-6">
+              <img
+                class="items-center md:justify-start border-gray-100 md:space-x-10 py-6 justify-between flex border-b-2"
+                alt="Profile picture of user 408271a9-6dc3-4e4d-9b32-d750b6fc5284"
+                src="https://example.org/pictures/c8b7ba17-8439-4faa-8bf4-27041bed1d0a"
+              />
+            </li>
+            <li class="group relative">
+              <ol class="text-gray-500 truncate text-sm flex-col flex">
+                <li class="text-sm">This is item 0f411496-2ca4-4f35-9fdc-53349123a2d1</li>
+                <li
+                  class="sticky z-20 text-xs text-right pr-2 -ml-14 -mt-2.5 left-0 leading-5 text-gray-400 w-14"
+                >
+                  This is item 11ddd365-d733-4b0c-ae47-16a12eb72c57
+                </li>
+                <li class="sr-only">This is item add3974a-67a5-4620-9064-5e1581c5f388</li>
+              </ol>
+              <img
+                class="flex ml-4"
+                alt="Profile picture of user 03b0928d-3aa1-42e3-b565-3647b0259d66"
+                src="https://example.org/pictures/2310c33e-40ef-47d6-8115-07fc53bcaa99"
+              />
+              <a href="#" class="sr-only"> This is link 5f666f61-0a12-4ae3-9fe3-52d5136218ca </a>
+            </li>
+            <li class="w-full h-full object-cover">
+              <a href="#" class="sm:-mx-6 overflow-x-auto -my-2 lg:-mx-8">
+                This is link c455ed2a-338c-4d8e-a62d-6d3f32a6f3c4
+              </a>
+              <ul class="mr-4 h-6 w-6 flex-shrink-0">
+                <li class="justify-between flex">
+                  This is item a510e912-5699-480f-a2ec-518760930223
+                </li>
+                <li
+                  class="lg:items-start lg:px-8 lg:max-w-7xl lg:gap-24 lg:grid-cols-2 lg:mx-auto lg:grid"
+                >
+                  This is item 220494ca-c246-4239-91a1-62228f75986e
+                </li>
+                <li class="font-medium text-lg text-gray-900">
+                  This is item 6a2d9299-54fe-4c98-bc57-3d24e4a0c94b
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="sr-only">
+          <img
+            class="sm:text-4xl text-gray-900 font-bold tracking-tight text-4xl"
+            alt="Profile picture of user d0dc9a0f-dd27-4c8c-bd3c-79ba42bfdeb6"
+            src="https://example.org/pictures/23ed9aee-13cf-4251-b3df-fbeecba946fd"
+          />
+        </li>
+      </ul>
+    </nav>
+    <section class="md:grid-cols-2 md:grid md:gap-8">
+      <input type="email" class="grid grid-cols-1 lg:grid-cols-3" />
+    </section>
+    <div class="font-semibold hover:text-indigo-500 text-sm text-indigo-600">
+      <main class="ml-3 flex-col flex">
+        <form class="space-x-2 mt-6 flex">
+          <button type="button">This is action 804350a9-ec04-4bf3-a43b-6bf1f80eb9f0</button>
+          <select
+            class="w-0 py-4 hover:text-gray-500 text-gray-700 font-medium flex-1 rounded-br-lg text-sm items-center relative border-transparent inline-flex justify-center border"
+          >
+            <option>This is item 12078015-55b9-4820-928d-ab6f9fadc205</option>
+            <option value="cc2a02a7-3f6e-4130-8690-064ce3ef9174">
+              This is item c62782cb-8654-4cdd-aa1f-910fda846be7
+            </option>
+            <option>This is item fec1c087-2d9a-4c9a-b212-7b6162efb6a8</option>
+            <option value="90545bc3-6253-489c-85d7-7acef20fba7d">
+              This is item ef622cae-cb19-45cd-ac2d-4f438f64ca2f
+            </option>
+            <option value="3a015cfd-07d4-4f3a-abf2-9391b9237b3b">
+              This is item 398fb000-4dbd-485d-98d3-964b2b0e9a32
+            </option>
+          </select>
+        </form>
+        <select class="ml-6 flex items-center">
+          <option value="bbad16fc-425f-4b3a-9d36-f48efa25f585">
+            This is item 455af15d-d547-4181-897b-ae0aa335b8eb
+          </option>
+          <option>This is item 3588cdd4-5081-4bdb-9f13-613e82142f08</option>
+          <option>This is item d1266762-3aa6-47f6-814a-6fabb90b952a</option>
+          <option value="e22c9911-b5e1-4a39-962c-4aab43885007">
+            This is item 0e962986-fefd-4a4c-8ae9-b390c15fdc21
+          </option>
+        </select>
+        <a href="#" rel="noreferrer" class="text-gray-900 py-3 font-medium px-2">
+          This is link c9359bca-edb7-4f24-b13b-d2103b86bc79
+        </a>
+        <nav
+          class="from-purple-600 justify-center items-center bg-gradient-to-r h-10 rounded-md to-indigo-600 text-white w-10 flex-shrink-0 flex"
+        >
+          <ul class="text-gray-900 text-sm font-medium">
+            <li
+              class="flex mt-4 lg:ml-4 ml-8 flex-shrink-0 flex-grow justify-center lg:flex-grow-0"
+            >
+              <img
+                class="bg-gray-900 lg:overflow-hidden sm:pt-16 pt-10 lg:pb-14 lg:pt-8"
+                alt="Profile picture of user 21eadba0-7923-491c-a121-69508cb9d2db"
+                src="https://example.org/pictures/f94370ef-c4b6-495f-a27b-9fafa9608b04"
+              />
+              <a href="#" class="bg-gray-100 p-8">
+                This is link 0cd39f6f-b6df-4086-8dda-9deae93aafda
+              </a>
+            </li>
+            <li class="h-5 w-5">
+              <ol class="ring-1 ring-black overflow-hidden ring-opacity-5 shadow-lg rounded-lg">
+                <li class="sm:col-span-2 col-span-4">
+                  This is item 45f493a9-e17a-4288-85b0-0aa089baa854
+                </li>
+                <li class="h-5 ml-2 w-5 -mr-1">
+                  This is item be8f8129-5421-49de-8107-ec9bc2b0ffe4
+                </li>
+                <li class="hover:text-indigo-900 text-indigo-600">
+                  This is item cc064eb6-8d0a-4a66-8fc4-5802208f8310
+                </li>
+                <li class="mt-6 leading-6 text-xs grid text-gray-500 grid-cols-7">
+                  This is item d5d10dfd-c037-4343-9862-1f1e21571963
+                </li>
+                <li class="border bg-white border-gray-300 w-16 h-16 text-gray-300">
+                  This is item 08f90a77-6045-4db6-9f27-675839a90e2f
+                </li>
+              </ol>
+            </li>
+            <li
+              class="text-gray-400 text-xs left-0 text-right -ml-14 -mt-2.5 leading-5 pr-2 w-14 sticky z-20"
+            >
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="lg:px-8 sm:justify-between sm:flex sm:px-6 sm:items-baseline px-4"
+              >
+                This is link 03c7bbf4-a377-4e31-9c96-4c9eff05b02a
+              </a>
+              <ul class="h-6 w-6">
+                <li class="mt-4 space-x-2 text-sm text-gray-700 flex">
+                  This is item 7aaac8e6-a566-4163-a478-5807b7b69f41
+                </li>
+                <li class="prose-sm mt-4 text-gray-500 prose">
+                  This is item 577ef933-bca7-477f-b28b-32f82f23f380
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+        <div class="font-bold text-gray-900 tracking-tight text-2xl">
+          <main class="text-gray-900">
+            <ol class="w-1/2 h-full">
+              <li class="sm:flex sm:items-center">
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="w-7 flex rounded-full mx-auto justify-center h-7 items-center"
+                >
+                  This is link 1bf332ed-1def-4a8f-9e85-ba41e76809df
+                </a>
+                <ol class="flow-root"></ol>
+                <ol class="bg-white sm:rounded-lg px-4 py-5 sm:px-6 shadow"></ol>
+                <img
+                  class="sm:-mx-6 overflow-x-auto lg:-mx-8 -my-2 -mx-4"
+                  alt="Profile picture of user af753b29-7520-4459-a429-7627b2098bd5"
+                  src="https://example.org/pictures/b7c566ad-672e-4925-b61c-3cd8e41b1739"
+                />
+              </li>
+              <li class="font-medium text-blue-gray-900">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="text-2xl text-gray-900 tracking-tight font-bold"
+                >
+                  This is link d5ef1507-85e8-45c4-9424-4cdd5be56b5a
+                </a>
+              </li>
+            </ol>
+            <p class="focus:z-10 py-1.5 bg-white hover:bg-gray-100">
+              This is paragraph 704fe54d-6438-41de-9147-711be237e8f6
+            </p>
+            <a href="#" rel="noreferrer" class="min-w-0 flex-1">
+              This is link 68b03134-2b7b-438e-815c-dc696e75398a
+            </a>
+            <a href="#" class="-ml-14 text-right pr-2 text-xs -mt-2.5 w-14 text-gray-400 leading-5">
+              This is link 2fc751bf-98b0-4445-99d3-945c269505cd
+            </a>
+            <div class="-m-2 text-gray-400 p-2 inline-flex hover:text-gray-500">
+              <section
+                class="sm:grid-cols-2 grid-cols-1 gap-x-6 mt-6 gap-y-10 grid lg:grid-cols-4 xl:gap-x-8"
+              >
+                <main class="border-b border-gray-200"></main>
+                <span class="flex"> This is text 347f1818-6424-42c3-8b91-fb1e77ac5800 </span>
+                <nav class="font-medium text-base text-gray-500"></nav>
+                <p class="flex px-4 items-center justify-between">
+                  This is paragraph 1f671368-6b0f-4ea9-9173-a9d8d30344c6
+                </p>
+              </section>
+              <select class="block font-medium text-sm text-gray-700">
+                <option>This is item 901824c7-4391-4d39-815f-462a8784f804</option>
+                <option value="6f8421a6-9385-408d-8f77-6550d1d4a577">
+                  This is item bff5df03-199a-4bf0-9d55-a7a522dc6028
+                </option>
+                <option value="baefc876-b32e-4062-8c2a-7599e397cc71">
+                  This is item 87d9d334-09f2-4590-89fe-bca967aeb95b
+                </option>
+              </select>
+            </div>
+          </main>
+          <p class="py-16 sm:py-24 bg-white">
+            <span class="object-center object-cover">
+              This is text 5c23358e-043c-47ab-9556-41591cb3e6f8
+            </span>
+          </p>
+          <ol class="mt-4 space-y-4">
+            <li class="font-medium text-gray-900 text-base">
+              <ol class="text-sm block">
+                <li class="text-cyan-700 font-medium hover:text-cyan-600">
+                  This is item 07691c01-d3c1-4ffd-915e-8acc347436e4
+                </li>
+                <li class="shadow sm:mt-0 sm:ml-3 mt-3 rounded-md">
+                  This is item aa25a485-91d4-4aec-a9d2-62945198e6b4
+                </li>
+                <li class="border-t justify-between items-center flex border-gray-200 pt-4">
+                  This is item 470b6f06-cdef-48a3-82ab-9b454b9f649e
+                </li>
+                <li class="flex items-center p-3 hover:bg-gray-50 -m-3 rounded-md">
+                  This is item a697511b-a0db-4be7-924c-7505624eef18
+                </li>
+              </ol>
+            </li>
+            <li class="mt-12 md:mt-0">
+              <ul class="mt-6 space-y-6">
+                <li class="font-bold sm:text-4xl text-blue-gray-900 tracking-tight text-3xl">
+                  This is item 664e4f6d-7486-4532-a400-9906e5eddaf9
+                </li>
+                <li class="mt-4 text-base text-blue-gray-500">
+                  This is item d3bf58aa-18f4-484d-8a00-8d28ee2e1da3
+                </li>
+                <li class="flow-root">This is item 91d5de3d-4d7f-4c3d-af53-43707ba31a56</li>
+                <li class="sm:px-6 px-4">This is item 3d3a9d5c-968c-4274-901c-47d8f04f74a6</li>
+              </ul>
+              <ol class="sr-only">
+                <li class="inset-0 absolute">This is item fd65f1a1-a714-4188-b74d-5d83d032334f</li>
+                <li class="lg:grid lg:gap-x-8 lg:space-y-0 mt-10 space-y-12 lg:grid-cols-3">
+                  This is item 528b2986-d143-4ace-863d-0a4c2aba89fb
+                </li>
+              </ol>
+              <ul class="sr-only">
+                <li class="overflow-hidden hidden lg:block absolute inset-0 rounded-3xl">
+                  This is item 0a135858-49f4-465e-bbc9-781d0e62879c
+                </li>
+                <li class="text-indigo-300 h-6 mr-4 w-6 flex-shrink-0">
+                  This is item d43be1d8-6315-4736-a1d7-36cfa0183c02
+                </li>
+                <li class="py-6 max-w-7xl sm:px-6 lg:px-8 mx-auto">
+                  This is item 9ac222ec-c50d-40d3-a11c-c3e59ca80dff
+                </li>
+                <li
+                  class="max-w-7xl justify-between flex pt-8 items-center relative xl:px-8 px-6 mx-auto"
+                >
+                  This is item d96195ec-c214-4a44-8f8f-3b5c900309b1
+                </li>
+              </ul>
+            </li>
+            <li class="mx-auto max-w-7xl px-8">
+              <ol class="items-start justify-between flex">
+                <li class="leading-6 mt-6 grid-cols-7 grid text-xs text-gray-500">
+                  This is item 82b417bf-efe9-475c-a252-82b5f63de22d
+                </li>
+                <li class="px-4 py-2 block text-gray-700 text-sm">
+                  This is item 63e03c0c-1e42-412e-860b-7b2b1d73c73a
+                </li>
+                <li
+                  class="py-0.5 text-sm text-rose-700 hover:bg-rose-100 font-medium rounded-full bg-rose-50 px-3 items-center inline-flex"
+                >
+                  This is item 32c1265f-8b56-479f-9a08-8145c79e4986
+                </li>
+                <li
+                  class="inline-flex h-8 w-8 rounded-full justify-center text-gray-400 focus:ring-2 items-center focus:ring-purple-500 focus:outline-none hover:text-gray-500 focus:ring-offset-2 bg-white"
+                >
+                  This is item 7976e3cd-14fe-4ddd-bb28-5645d6887f7c
+                </li>
+                <li class="w-64 text-right mx-auto">
+                  This is item 35bb085b-9d0e-44e9-8555-2d9ca920bf1e
+                </li>
+              </ol>
+              <ol class="rounded-full ring-white h-6 ring-2 w-6 inline-block">
+                <li class="mx-auto max-w-7xl lg:px-8 sm:px-6 px-4">
+                  This is item 8f25f8c8-0619-4909-9953-9cb906f952be
+                </li>
+                <li
+                  class="whitespace-nowrap pl-3 py-4 text-sm font-medium sm:pr-6 text-right relative pr-4"
+                >
+                  This is item 1c91d284-d14c-4fb6-ad18-969178b8d444
+                </li>
+                <li class="sm:px-6 border-t px-4 border-gray-200 py-4">
+                  This is item 5f03c882-eb99-4f71-8c79-ce838def0b4f
+                </li>
+              </ol>
+              <ul class="flex">
+                <li class="sm:px-6 max-w-7xl lg:px-8 px-4 mx-auto">
+                  This is item 35247dba-6d89-4e6f-b6f0-d30e375947e7
+                </li>
+                <li class="divide-y divide-gray-200 sm:hidden shadow overflow-hidden mt-2">
+                  This is item 0976f1fe-37d5-4597-b102-520191196251
+                </li>
+                <li class="sm:space-x-8 sm:flex sm:items-center hidden">
+                  This is item d129ec43-f028-4c32-bd90-faaf90c4a2f3
+                </li>
+                <li class="lg:flex hidden h-full">
+                  This is item aa95c49c-39b6-403a-9490-4dae837e2097
+                </li>
+                <li class="text-sm flex mt-1">This is item 6a02c64c-2d76-46da-86da-3ab89b2da3fc</li>
+              </ul>
+              <ul class="max-w-7xl mx-auto relative">
+                <li class="object-cover object-center rounded-3xl shadow-2xl">
+                  This is item dd3b32d1-6f6c-446c-8568-f4e4e667a029
+                </li>
+                <li class="rounded-full bg-indigo-600 h-2">
+                  This is item 20024d36-8a63-44c8-b9d3-655053a4807d
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <nav class="h-full w-full text-gray-300">
+            <ul class="lg:space-x-8 sm:min-w-0 sm:flex-1 sm:space-x-6 space-x-4 flex">
+              <li class="pt-2 mx-auto pb-3 sm:px-4 max-w-3xl space-y-1 px-2">
+                <img
+                  class="text-gray-500 hover:text-gray-600"
+                  alt="Profile picture of user 4cdaa88a-d2ef-4500-a9aa-d94a19f41446"
+                  src="https://example.org/pictures/8153aae7-86d1-42e3-a778-7b7a8a4c9d05"
+                />
+              </li>
+              <li class="lg:col-span-7 sm:flex">
+                <ol class="group-hover:text-gray-800 font-medium ml-2 text-sm text-gray-700"></ol>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="text-indigo-700 items-center pr-1 font-medium bg-indigo-100 inline-flex pl-2.5 py-0.5 rounded-full text-sm"
+                >
+                  This is link fad40ed7-8174-4b91-8d23-cb09e2ef080c
+                </a>
+                <img
+                  class="flex text-sm py-2 group rounded-md px-3 items-center font-medium"
+                  alt="Profile picture of user 4f1c6914-5634-43a6-b39d-a67b74243293"
+                  src="https://example.org/pictures/0d007e7e-030c-4756-bb77-0c3fce6921ac"
+                />
+              </li>
+              <li class="ml-3 block truncate">
+                <ol class="relative"></ol>
+              </li>
+              <li
+                class="justify-center font-medium group text-gray-700 hover:text-gray-900 items-center inline-flex text-sm"
+              >
+                <a href="#" target="_blank" class="underline font-medium text-white">
+                  This is link 1332f8b3-6561-4efe-bc06-cd0526b34ad5
+                </a>
+              </li>
+              <li class="text-sm block text-gray-700 font-medium">
+                <a href="#" rel="noreferrer" class="text-gray-500 hover:text-gray-900 text-base">
+                  This is link 9652323e-5658-442d-a553-42e7682c45c6
+                </a>
+              </li>
+            </ul>
+          </nav>
+          <ol class="flex-shrink-0 gap-y-6 grid-cols-1 grid lg:gap-y-8">
+            <li class="text-3xl tracking-tight sm:text-4xl text-white font-bold">
+              <a href="#" class="space-x-10 flex">
+                This is link f7bf48d9-54fc-4d7d-9876-e2cca6fffa9d
+              </a>
+              <ul class="flex lg:flex-col md:h-full">
+                <li class="flex-shrink-0">This is item b3d24da5-7b2b-4cee-983e-50c71b83d80a</li>
+                <li class="justify-end flex items-center flex-1">
+                  This is item 473e4022-92fb-4ac1-a698-0144e4d61909
+                </li>
+                <li class="-my-10">This is item 469e9e37-9223-41c1-a454-9a453f41ec92</li>
+                <li class="text-gray-500">This is item 465403a2-c93b-4d0c-b409-b4b16a5f2722</li>
+              </ul>
+              <ul class="py-5">
+                <li class="mt-2">This is item d3543dcd-f381-494e-bbe8-a48c5ef75782</li>
+                <li class="font-medium text-gray-900 text-base">
+                  This is item a1e5c65d-b922-41a9-8893-0425affd0cb6
+                </li>
+                <li class="space-y-1">This is item 04e76794-ca77-452d-b38d-953ebd7af2f2</li>
+                <li class="flex -ml-4 sm:flex-nowrap flex-wrap justify-between items-center -mt-2">
+                  This is item a0d1e6ff-ef3c-4ae1-9298-18061fcf4b97
+                </li>
+              </ul>
+            </li>
+            <li class="hidden sm:block">
+              <img
+                class="sm:flex"
+                alt="Profile picture of user d9904edf-a0a2-4fdf-a790-90899184bc11"
+                src="https://example.org/pictures/a6d42ae5-3663-40eb-be38-9746224f8aa7"
+              />
+              <img
+                class="hover:underline text-gray-900"
+                alt="Profile picture of user 4cd913d7-c966-4fe9-8e0d-7ac6e1573006"
+                src="https://example.org/pictures/1c68a3ba-e40e-4009-aa31-5180fe55baad"
+              />
+              <ol
+                class="justify-center flex py-2 text-white border-transparent text-base focus:outline-none font-medium bg-indigo-600 shadow-sm px-4 rounded-md border w-full focus:ring-indigo-500 focus:ring-2 items-center hover:bg-indigo-700 focus:ring-offset-2"
+              >
+                <li class="object-cover group-hover:opacity-75 object-center">
+                  This is item 60ca5d08-e932-4ce4-8c16-6e818f6b8e13
+                </li>
+                <li class="py-4 justify-between flex items-center">
+                  This is item 5f0b4d2a-dfd4-40f6-97d0-0f6729346584
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="lg:gap-x-8 grid grid-cols-1 lg:col-span-2 gap-y-10 lg:gap-y-0 lg:grid-cols-2"
+              >
+                This is link 4a9b2d2e-e900-4ee5-a075-22a9ad45a240
+              </a>
+            </li>
+            <li class="bg-gray-50">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="mt-8 xl:ml-8 sm:w-full xl:mt-0 sm:max-w-md"
+              >
+                This is link d7e11d43-8b3c-41cc-b1d8-de8daf81e1eb
+              </a>
+            </li>
+          </ol>
+          <img
+            class="text-sm font-medium text-gray-900"
+            alt="Profile picture of user 48d840a2-d618-40a2-9269-058f12953881"
+            src="https://example.org/pictures/d4d90c2d-25a7-4e89-8fd9-175cae5c3af7"
+          />
+        </div>
+        <button type="reset">This is action fa6ec1b1-cd4d-45ab-a93a-0f3250d205ef</button>
+        <select
+          class="lg:justify-between lg:px-8 lg:py-24 mx-auto py-12 lg:items-center max-w-7xl lg:flex px-4 sm:px-6"
+        >
+          <option>This is item 97b30bee-9031-4176-91de-e58c78a67436</option>
+          <option>This is item f0dd2e79-3137-410f-8ad4-035f53bfd093</option>
+          <option value="7b40e0ff-21a7-4a41-9b39-b219478366cf">
+            This is item 265a9cc9-a3a4-46eb-95c6-25f6bd889904
+          </option>
+          <option>This is item dc3f23d9-0b00-4373-8913-b6fe891a218a</option>
+          <option value="dbf05476-4747-4540-8694-be77c624afec">
+            This is item f998b4a5-44c1-4819-84ed-aaebc75b11dc
+          </option>
+          <option value="f4523722-0168-4eff-a356-df8686271327">
+            This is item fe21098e-4984-412f-9e62-7b4214c5da75
+          </option>
+          <option value="6417a43d-3162-4535-b575-1faf7f36945a">
+            This is item 7b5a70c6-7353-406a-bf97-effc11e5e684
+          </option>
+        </select>
+      </main>
+      <ol class="bg-sky-700 overflow-hidden relative pb-32">
+        <li class="shadow bg-white sm:rounded-lg">
+          <ul class="text-sm text-indigo-600 font-medium">
+            <li class="z-40 lg:hidden relative">
+              <ol
+                class="py-3 px-2 text-gray-400 bg-white items-center justify-between flex w-full text-sm"
+              >
+                <li
+                  class="text-right text-sm md:table-cell hidden py-3 px-6 text-gray-500 whitespace-nowrap"
+                >
+                  This is item 375ac5d6-8135-4fb8-b81d-a2278cb827ac
+                </li>
+                <li class="h-full">This is item dcf6da3f-cd0c-42cd-bf3e-ff95f11a42b7</li>
+                <li class="md:mt-16 xl:mt-0 mt-12">
+                  This is item dee3e7ac-c875-4eec-b123-0a428625a69d
+                </li>
+                <li
+                  class="md:pt-4 border-l-4 md:border-t-4 pl-4 md:pl-0 border-indigo-600 py-2 flex-col md:pb-0 md:border-l-0 flex"
+                >
+                  This is item d4befb0b-141f-4d37-b94d-8f1ab68b05be
+                </li>
+                <li class="sr-only">This is item 1b41f76d-72ac-4acb-a502-c1470961b613</li>
+              </ol>
+              <ol class="relative">
+                <li class="text-base">This is item bea3b7da-238b-48f6-a914-ceca9bd81531</li>
+                <li class="w-8 h-8">This is item 9a36c6dc-4a33-441e-81fc-0e20358726cb</li>
+                <li class="text-gray-900 font-bold tracking-tight text-3xl">
+                  This is item 86ae9612-9d1e-47e6-b04f-5abce55ab608
+                </li>
+              </ol>
+              <img
+                class="md:text-5xl lg:text-6xl font-bold text-white text-4xl tracking-tight"
+                alt="Profile picture of user c5c6fea2-9828-47a3-b6d0-5a5c7b6cf60c"
+                src="https://example.org/pictures/e60cc92a-53e3-44dd-83d0-9074e1c92148"
+              />
+              <a href="#" rel="noreferrer" class="sm:flex-auto">
+                This is link 0a46a84b-a8f0-49ec-a2da-22fdf9626e73
+              </a>
+            </li>
+            <li
+              class="border-gray-300 w-full shadow-sm focus:border-indigo-500 rounded-md sm:text-sm focus:ring-indigo-500 block"
+            >
+              <a href="#" target="_blank" class="relative mt-1">
+                This is link 3e5b2529-f139-4d58-bb77-7446e17b28c3
+              </a>
+              <ol class="rounded-md flex py-2 font-medium group text-sm w-full pl-2 items-center">
+                <li class="hover:bg-gray-100 text-gray-400 focus:z-10 py-1.5 bg-gray-50">
+                  This is item 3cc144e6-c381-43c1-ad90-d204647ebeba
+                </li>
+                <li class="w-6 h-6">This is item 567414f0-1e20-4178-9d85-ea59264925ef</li>
+              </ol>
+              <ol class="w-64 text-right mx-auto">
+                <li class="px-4 w-1/4">This is item e2298703-fdbd-4eed-af0e-cdb070e2706b</li>
+                <li class="flex mt-8 flex-col">
+                  This is item 35d252da-75d5-4aa5-a11f-c75050e4fef9
+                </li>
+                <li class="ring-opacity-5 ring-1 overflow-hidden shadow-lg ring-black rounded-lg">
+                  This is item 16ee79e0-a037-40ed-90e6-dc5ed27dd9a1
+                </li>
+              </ol>
+              <ol class="relative overflow-hidden">
+                <li class="mt-6 font-medium justify-center flex text-gray-500 text-sm">
+                  This is item 61bb31d3-a7a4-493e-9056-f279d01826b4
+                </li>
+                <li class="mt-1">This is item 2d40465f-a65c-41fd-8a27-6c652e1b4037</li>
+                <li class="items-center flex">This is item 5f0733bb-b419-4a71-abda-83f2286f1d5c</li>
+                <li
+                  class="lg:col-start-2 lg:px-0 lg:max-w-none lg:py-32 px-4 lg:mx-0 mx-auto sm:px-6 max-w-xl"
+                >
+                  This is item 71770100-a00f-4b8d-a22a-8698b94a7cb7
+                </li>
+              </ol>
+            </li>
+            <li class="text-white">
+              <ol
+                class="flex-shrink-0 w-20 rounded-lg overflow-hidden bg-gray-200 h-20 sm:w-40 sm:h-40"
+              >
+                <li class="sr-only">This is item d032389a-7f9d-443d-a99e-56a8d337ce7b</li>
+                <li class="lg:hidden px-4 py-6 sm:px-6">
+                  This is item b5fa59db-df70-4817-9103-b9f5131912f1
+                </li>
+                <li class="sm:mt-24 mt-16">This is item 519e0fd2-e4e8-46c7-9ff2-fc1fc709e8fd</li>
+              </ol>
+              <a href="#" class="text-gray-900 ml-3 text-base font-medium">
+                This is link 093d8f89-fc9c-4fd6-adf7-69faae1459d1
+              </a>
+            </li>
+          </ul>
+          <a href="#" target="_blank" class="bg-gray-600 fixed bg-opacity-75 inset-0">
+            This is link 2bf81a67-3359-4e32-bbe7-3be22ccb814e
+          </a>
+          <img
+            class="flex"
+            alt="Profile picture of user a1d55302-8081-4857-ade1-4c2e3243c56d"
+            src="https://example.org/pictures/81ef95f2-6955-45e6-a1fa-5956b97f694d"
+          />
+        </li>
+        <li class="h-7 mx-auto w-7 rounded-full items-center justify-center flex">
+          <ul class="items-center justify-center w-7 rounded-full mx-auto flex h-7">
+            <li class="font-medium text-lg text-gray-900">
+              <img
+                class="flex md:inset-y-0 md:absolute items-center flex-1 md:left-0"
+                alt="Profile picture of user 406601b8-eb71-466e-9051-997d07290a5d"
+                src="https://example.org/pictures/93f5206b-fadd-425b-b3e3-28f8c0b0e3a1"
+              />
+            </li>
+            <li
+              class="-m-3 transition hover:bg-gray-50 duration-150 items-start ease-in-out flex p-3 rounded-lg"
+            >
+              <img
+                class="text-sm text-gray-900 font-medium"
+                alt="Profile picture of user 8d3d66b4-edf4-4c3d-970d-9834019514ba"
+                src="https://example.org/pictures/6010bb17-116e-4907-9af4-a8a1e20152df"
+              />
+              <img
+                class="mt-8"
+                alt="Profile picture of user bdf5c00e-7d03-4b4e-b4cb-4a9132600943"
+                src="https://example.org/pictures/22ff71fb-46e7-4542-97bd-7618774929fa"
+              />
+              <ul class="sr-only">
+                <li
+                  class="bg-indigo-600 focus:ring-2 text-base border-transparent sm:inline-flex flex w-full justify-center focus:outline-none font-medium text-white rounded-md px-4 focus:ring-offset-2 border py-2 items-center sm:w-auto hover:bg-indigo-700 focus:ring-indigo-500"
+                >
+                  This is item 05b7745e-80c1-4dca-8ef6-3849e9527fd8
+                </li>
+                <li
+                  class="px-2.5 items-center bg-white disabled:cursor-not-allowed focus:ring-indigo-500 font-medium focus:outline-none text-gray-700 border-gray-300 focus:ring-2 focus:ring-offset-2 shadow-sm hover:bg-gray-50 disabled:opacity-30 inline-flex rounded py-1.5 text-xs border"
+                >
+                  This is item 9bd66bd1-30aa-469f-8873-f8a632274199
+                </li>
+                <li
+                  class="block border-gray-300 shadow-sm w-full rounded-md focus:ring-indigo-500 sm:text-sm focus:border-indigo-500"
+                >
+                  This is item c20e3976-1e89-43b7-9004-73347641b456
+                </li>
+                <li class="flex px-4 flex-shrink-0 items-center">
+                  This is item e61f6a70-9fbf-4300-9403-d1414f3e857b
+                </li>
+                <li
+                  class="focus:ring-offset-2 text-white focus:ring-white focus:ring-offset-indigo-700 flex text-sm rounded-full focus:ring-2 bg-indigo-700 focus:outline-none"
+                >
+                  This is item 10fd4bba-fa7d-4417-8ef0-c149f1c36bc0
+                </li>
+              </ul>
+              <ol class="text-sm">
+                <li
+                  class="sm:px-6 divide-gray-200 divide-y-2 lg:px-8 sm:py-24 max-w-7xl px-4 py-16 mx-auto"
+                >
+                  This is item f690de44-c991-4716-9f69-639d6cab5674
+                </li>
+                <li
+                  class="focus:ring-indigo-600 border rounded-md border-gray-300 items-center focus:ring-offset-1 focus:ring-offset-indigo-600 h-10 focus:ring-2 px-4 focus:border-indigo-600 hover:bg-gray-100 bg-white focus:outline-none inline-flex focus:ring-opacity-25"
+                >
+                  This is item 997899af-005c-4a03-892c-4320e2e49779
+                </li>
+                <li class="mt-12 sm:mt-16 space-y-16">
+                  This is item 487a2b87-faeb-493a-a902-b9b6be3bc7ae
+                </li>
+                <li class="bg-white p-8">This is item 751f67dc-0258-455d-8b5f-7924ad276810</li>
+              </ol>
+            </li>
+            <li class="lg:mt-0 mt-10 w-full max-w-xs">
+              <ol
+                class="px-4 border border-transparent py-3 flex rounded-tr-lg font-medium w-full text-indigo-600 focus:outline-none focus:ring-2 text-sm justify-center rounded-none focus:ring-indigo-500 focus:z-10 hover:text-indigo-500 items-center"
+              >
+                <li class="space-x-6 py-6 flex">
+                  This is item a0234046-9f6b-4c26-b1fa-b3ab9ee3d1be
+                </li>
+                <li class="flow-root">This is item 3445c4fe-82fe-4c26-9215-70ebd987a400</li>
+                <li class="items-center h-7 flex mx-auto w-7 rounded-full justify-center">
+                  This is item 785a55d6-8356-44cd-a9f8-61b65cf1d6e0
+                </li>
+              </ol>
+              <img
+                class="px-4 mt-6 relative flex-1 sm:px-6"
+                alt="Profile picture of user 475128ca-34a7-4ae5-87b1-007fab13027b"
+                src="https://example.org/pictures/e791c0db-08d8-48b4-b84a-a353ce7a3c5e"
+              />
+            </li>
+            <li
+              class="bg-opacity-20 block focus:border-transparent pr-3 w-full sm:text-sm focus:bg-opacity-100 placeholder-white pl-10 focus:ring-0 focus:text-gray-900 border border-transparent focus:outline-none bg-white text-white rounded-md leading-5 py-2 focus:placeholder-gray-500"
+            >
+              <ol class="font-medium text-lg text-gray-900">
+                <li class="lg:row-start-1 md:col-span-2 lg:col-start-1 col-span-1">
+                  This is item cd767806-2991-471b-8912-b19ce1a244ab
+                </li>
+                <li class="flex rounded-full justify-center mx-auto h-7 w-7 items-center">
+                  This is item a3b760d7-4d24-4995-aa57-b4539f9d9099
+                </li>
+                <li class="items-center flex flex-1">
+                  This is item 8bb797af-3568-4d4e-858c-f0556180142b
+                </li>
+                <li class="text-gray-500">This is item 39f09b91-8da8-4415-a8dd-6875bf44529f</li>
+                <li class="p-2 rounded-md text-gray-400 bg-white lg:hidden">
+                  This is item 2fc0cc16-33a8-4ff9-bc51-afcc0018856f
+                </li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+        <li class="gap-x-8 py-16 grid-cols-2 gap-y-10 grid">
+          <ul class="focus:z-10 bg-gray-50 hover:bg-gray-100 rounded-tl-lg text-gray-400 py-1.5">
+            <li class="sm:mt-12 bg-gray-900 mt-24">
+              <a href="#" class="col-span-3"> This is link 666a56ff-1492-49ea-be55-cfa03d4b465b </a>
+              <ol class="bg-gray-100">
+                <li
+                  class="flex-col flex pt-32 lg:px-8 relative sm:px-6 px-4 text-center items-center max-w-7xl mx-auto"
+                >
+                  This is item 3d8cfd9e-92d6-455c-862d-cae54535cbe6
+                </li>
+                <li class="font-medium text-gray-900">
+                  This is item b38dfe93-6090-4e18-90f6-7d01fa966730
+                </li>
+                <li class="justify-center rounded-full mx-auto items-center w-7 flex h-7">
+                  This is item 23cf4321-a4d0-49ec-8b76-f309bda558df
+                </li>
+                <li
+                  class="rounded-md text-base border hover:text-indigo-500 bg-white inline-flex py-2 px-4 text-indigo-600 font-medium items-center border-transparent"
+                >
+                  This is item f9aa0163-3cec-44e2-b2d0-1b069aed4cc3
+                </li>
+              </ol>
+              <ol class="flex justify-end">
+                <li
+                  class="p-5 transform inline-block absolute top-0 bg-blue-600 rounded-xl -translate-y-1/2 shadow-lg"
+                >
+                  This is item 8cd3166b-11e2-4510-acfc-e7164291ed60
+                </li>
+                <li class="sr-only">This is item cc319df9-9621-4a81-a2cf-08e416d924f4</li>
+                <li class="bg-gray-700 flex-shrink-0 p-4 flex">
+                  This is item aca77c09-4b37-4793-8062-e27d2080fe3e
+                </li>
+                <li class="flex h-full space-x-8">
+                  This is item fb350f75-3b62-41f4-8b47-af0a0fc6b13d
+                </li>
+                <li class="mt-4 text-lg text-gray-500">
+                  This is item 6ae0363e-b38d-4f40-8c7f-10eab45f8312
+                </li>
+              </ol>
+            </li>
+            <li class="bg-white focus:z-10 py-1.5 hover:bg-gray-100">
+              <a href="#" rel="noreferrer" class="pt-6 border-gray-200 border-t">
+                This is link 02711a81-0962-41ee-b004-295c9444da0d
+              </a>
+              <ul
+                class="-m-2 flex items-center hover:text-gray-600 rounded-full p-1.5 text-gray-500"
+              >
+                <li class="sm:grid-cols-2 gap-12 lg:grid-cols-3 grid grid-cols-1">
+                  This is item 71d26b75-6b13-4e57-86b3-23ee061c52d6
+                </li>
+                <li class="mt-4 text-sm">This is item a054d31d-18d0-4782-b0f2-0c777d1cab3a</li>
+              </ul>
+            </li>
+          </ul>
+          <img
+            class="hover:bg-gray-100 focus:z-10 py-1.5 bg-gray-50 text-gray-400"
+            alt="Profile picture of user 2aa2a0f9-585f-479d-99ff-78cac697f407"
+            src="https://example.org/pictures/f5db3647-2f11-4428-b601-adf35337f6ad"
+          />
+        </li>
+        <li class="z-30 transition absolute ease-out duration-200 h-0.5 inset-x-0 -bottom-px">
+          <a href="#" class="w-6 h-6"> This is link 83e61d6f-2754-44e3-82d8-f1dfed04a37b </a>
+          <ol class="rounded-md h-40 w-40 bg-gray-200 object-center object-cover flex-none">
+            <li class="h-6 text-indigo-300 w-6">
+              <img
+                class="sr-only"
+                alt="Profile picture of user c7fa150f-e78f-454d-bde1-65f0c8fff72f"
+                src="https://example.org/pictures/0125152e-7dd2-4361-bd16-6218e535c9b7"
+              />
+              <a
+                href="#"
+                class="hover:border-gray-300 pr-4 font-medium text-gray-600 py-2 text-base border-transparent block hover:bg-gray-50 border-l-4 hover:text-gray-800 pl-3"
+              >
+                This is link f3f00510-6ff9-4c9d-a655-8a4b97e8edfa
+              </a>
+              <img
+                class="md:flex hidden"
+                alt="Profile picture of user eb6eb0d4-0a87-4e74-946b-e074fd143a5c"
+                src="https://example.org/pictures/67c129e1-d1de-4642-b09e-3be77cd14fdd"
+              />
+              <a href="#" rel="noreferrer" class="divide-y divide-gray-200 -my-5">
+                This is link 2b4d5045-366f-4f97-aba6-aa8fbfdf0859
+              </a>
+            </li>
+            <li class="flex-shrink-0 h-6 w-6 text-gray-400 mx-auto">
+              <img
+                class="flex py-2 group px-4 items-center text-sm"
+                alt="Profile picture of user 2f0ab145-954c-4bc2-9c21-9d206011d46b"
+                src="https://example.org/pictures/6db481ae-7f4a-4dd6-904d-af47a1a4958b"
+              />
+              <ul
+                class="flex hover:bg-indigo-700 justify-center bg-indigo-600 sm:w-full border px-2.5 text-sm items-center sm:flex-grow-0 focus:ring-indigo-500 shadow-sm w-full focus:ring-2 text-white focus:ring-offset-2 focus:outline-none border-transparent font-medium py-2 rounded-md"
+              >
+                <li class="bg-white shadow sm:rounded-lg">
+                  This is item 96eb027b-135a-48e9-afc5-a72fe54c2bc6
+                </li>
+                <li class="ml-4 flex-shrink-0">
+                  This is item 157260d3-6dc1-4c21-98ac-bbc8ea3fb381
+                </li>
+                <li class="mt-3 text-gray-500">
+                  This is item 6f1f76b9-62de-47c5-84eb-2f5860438f5e
+                </li>
+                <li class="block w-full group flex-shrink-0">
+                  This is item 1dff0ac0-c446-4e13-9d4a-50de18b3596f
+                </li>
+                <li class="pt-5 pb-6">This is item 157bdf66-c20c-4c0f-b008-697a56bd9a38</li>
+              </ul>
+            </li>
+            <li class="md:mt-0 mt-12">
+              <ol class="block text-sm font-medium text-gray-700 ml-3">
+                <li class="space-y-1">This is item 4153d60e-c196-443d-9e91-4d0d21f02007</li>
+                <li class="hover:text-gray-600 text-gray-500">
+                  This is item 63085d0e-ae97-41cb-b2be-2b3c3c8c3dce
+                </li>
+              </ol>
+              <img
+                class="pl-3 py-3.5 relative pr-4 sm:pr-6"
+                alt="Profile picture of user 326da026-4632-45be-b6a2-62c1f8f9cc6d"
+                src="https://example.org/pictures/66433fda-1583-42ba-8c6b-8ee833aaebec"
+              />
+            </li>
+          </ol>
+          <ul class="md:flex-shrink-0 md:bg-gray-800 md:overflow-y-auto hidden md:block">
+            <li class="flow-root">
+              <ol class="lg:col-start-1 col-span-1 md:col-span-2 lg:row-start-1">
+                <li class="flow-root">This is item 3dff1fdb-cb3f-499a-9cb7-48b0f1b2a18d</li>
+                <li class="pt-5 pb-6">This is item 6fab8596-c691-4ff2-a7e8-d46f9bb1b3af</li>
+                <li class="h-full overflow-y-auto">
+                  This is item e53385ec-06b8-4078-a72a-a76919751304
+                </li>
+                <li class="text-gray-900 font-medium">
+                  This is item fc0c7d43-0c5f-4e37-8f85-bd6ef6326d0d
+                </li>
+                <li class="h-12">This is item f6ea44cb-640e-48dd-ae9b-46f166535fd9</li>
+              </ol>
+            </li>
+            <li
+              class="from-transparent bg-gradient-to-b sm:inset-0 opacity-50 to-black sm:absolute"
+            >
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="md:justify-center flex items-center sm:h-10 justify-between relative"
+              >
+                This is link 23263dcb-1f74-4698-b619-3cc69379df91
+              </a>
+              <ol class="shrink-0 cursor-pointer w-4 h-4 mt-0.5">
+                <li class="sr-only">This is item 3f0f3655-43dd-4507-9834-d28c612f407f</li>
+                <li class="sm:text-4xl mt-2 tracking-tight font-bold text-3xl text-gray-900">
+                  This is item 238d0ecf-a537-4cf9-8f00-96153aa066c4
+                </li>
+                <li class="text-gray-500 text-base mt-4">
+                  This is item 512511bd-97e0-4d1e-a5a5-b5901a6ea29d
+                </li>
+                <li class="text-gray-900 text-base font-medium rounded-md hover:text-gray-700">
+                  This is item b44d6866-1714-4d12-b3a7-7509fef36a05
+                </li>
+                <li class="max-w-2xl mx-auto">This is item eabe5cbd-6962-4f90-8cc5-4e8f02e41d0d</li>
+              </ol>
+              <a href="#" target="_blank" class="space-x-8 -mb-px flex">
+                This is link c0aeffea-c392-43ef-af5c-a1d0cb864ab6
+              </a>
+              <img
+                class="sr-only"
+                alt="Profile picture of user be02d0ad-9540-4193-b14a-ea910b771e51"
+                src="https://example.org/pictures/34bce3e5-0e13-42f7-a7a8-4dd49ca8e444"
+              />
+            </li>
+            <li class="py-4 items-center flex justify-between">
+              <ul
+                class="px-4 py-2 text-white bg-indigo-600 border-transparent focus:outline-none rounded-md focus:ring-2 inline-flex focus:ring-offset-2 focus:ring-indigo-500 items-center font-medium hover:bg-indigo-700 shadow-sm relative text-sm border"
+              >
+                <li class="flex items-start">This is item 6a7b6bf9-eb38-4283-b56a-ac2f1d123fd4</li>
+                <li class="text-gray-900 text-sm sm:ml-6 mt-1 sm:mt-0 sm:col-span-2">
+                  This is item afaba457-0ad5-4f13-95f4-d0d03a2d2cb7
+                </li>
+                <li class="bg-white py-8">This is item cbde9411-b585-4ed2-9933-ccffdb473eac</li>
+                <li class="mt-6 space-y-6 flex-col flex">
+                  This is item bf863aa5-fb7f-4b62-8566-33ee9faa6548
+                </li>
+                <li class="font-medium block">This is item cc2fa77d-24ca-4816-9317-7bf33e3e33bc</li>
+              </ul>
+              <ol
+                class="flex-grow ml-8 lg:flex-grow-0 flex mt-4 lg:ml-4 justify-center flex-shrink-0"
+              >
+                <li class="bg-gray-700 flex-shrink-0 p-4 flex">
+                  This is item 3b018c51-e571-4b31-904d-b319ce98a598
+                </li>
+                <li class="text-sm">This is item c4bb5670-1adb-4269-b41e-a353be1baac8</li>
+              </ol>
+              <ol class="sr-only">
+                <li
+                  class="rounded-full font-medium py-3 shadow-sm focus:ring-2 focus:ring-indigo-500 focus:outline-none text-base items-center border text-white inline-flex bg-indigo-600 px-6 border-transparent focus:ring-offset-2 hover:bg-indigo-700"
+                >
+                  This is item d410ad2b-1228-40f0-959a-77d2f7b5cf38
+                </li>
+                <li class="sm:gap-4 sm:grid-cols-3 sm:py-5 py-4 sm:grid">
+                  This is item f461e819-a23e-4b72-8f66-8208555dd146
+                </li>
+                <li class="absolute inset-0">This is item 5ebca9a5-bbe8-4fd8-8a21-5ae265b9af91</li>
+                <li class="bg-gray-100 text-gray-900">
+                  This is item 6f5a5685-e9e3-4df4-93ee-3f7f40891765
+                </li>
+                <li class="lg:block hidden lg:flex-1">
+                  This is item 0891844b-f03f-4a3c-99c2-3f4ac225ecd9
+                </li>
+              </ol>
+            </li>
+            <li class="text-white md:text-5xl tracking-tight font-bold text-4xl">
+              <ol class="text-gray-400 w-6 h-6">
+                <li class="bg-gray-100 justify-center p-8 flex">
+                  This is item 311f2f3c-1089-407b-a88e-b08e0f6389c9
+                </li>
+                <li class="inset-0 absolute flex-col sm:hidden flex">
+                  This is item cf25611f-46d9-4e18-b262-60572f7f5337
+                </li>
+                <li class="w-full flex justify-between items-center md:w-auto">
+                  This is item ccb01c55-3e62-4ade-b421-b772044a3926
+                </li>
+                <li class="max-w-2xl mx-auto py-16 sm:py-24 px-4 lg:max-w-7xl sm:px-6 lg:px-8">
+                  This is item 87b332ba-ee1f-4fc5-a819-0a5de5648f2c
+                </li>
+                <li class="pl-3 relative sm:pr-6 py-3 pr-4">
+                  This is item d04ad918-2de5-41f1-a323-7d421c1f9f27
+                </li>
+              </ol>
+              <ol
+                class="md:flex py-6 md:justify-between lg:border-t lg:border-gray-200 md:items-center"
+              >
+                <li class="sm:ml-3">This is item f7920b8d-f19b-4f1f-8bf6-f7bca94ea8c6</li>
+                <li class="mt-4 space-y-4">This is item cf9a3f5c-ee30-4799-b20b-41a427c2982b</li>
+                <li class="items-center flex h-5">
+                  This is item 9eb52214-fff9-4953-9230-002f351ac62e
+                </li>
+                <li class="sm:-mb-24 mt-12 lg:-mb-80 -mb-10">
+                  This is item 959fad8f-dfb9-4898-ae8d-22a3b8dd5d20
+                </li>
+              </ol>
+              <ol class="sm:mt-0 mt-2 flex-auto">
+                <li class="bg-white px-4 py-5 shadow sm:p-6 sm:rounded-lg">
+                  This is item dc51a993-0760-4f9b-8b7c-60a10248e166
+                </li>
+                <li class="py-1">This is item c70f13c6-6b5a-4698-9ee8-f625cda2adb0</li>
+                <li
+                  class="border rounded-none items-center flex focus:ring-indigo-500 focus:outline-none w-full focus:ring-2 text-sm text-indigo-600 font-medium border-transparent justify-center p-4 rounded-r-lg hover:text-indigo-500"
+                >
+                  This is item b7b6efd4-4f3c-4ca0-a6f9-59724663859e
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <ul class="text-lg text-gray-300 font-semibold">
+            <li class="bg-opacity-75 inset-0 fixed bg-gray-600">
+              <a href="#" class="text-warm-gray-900 font-medium text-sm block">
+                This is link 25c6d6fc-f94f-4580-a36f-2a44998b9733
+              </a>
+              <ul class="object-center object-cover">
+                <li class="group-hover:text-gray-500 text-gray-400 w-6 h-6 flex-shrink-0">
+                  This is item c44c43b8-1d10-4251-aee9-a77385d4ce37
+                </li>
+                <li class="grid-cols-1 grid sm:gap-x-6 sm:grid-cols-6 gap-y-6">
+                  This is item fe8fa393-b198-41d1-825a-7eb12e31eaad
+                </li>
+                <li
+                  class="divide-y-2 divide-gray-50 ring-1 ring-black ring-opacity-5 shadow-lg rounded-lg bg-white"
+                >
+                  This is item bb6f17f7-7f7e-4ec1-ab6e-58dee2a10e53
+                </li>
+                <li class="tracking-tight text-indigo-600 order-1 text-5xl font-bold">
+                  This is item b10811ae-f86e-4cfb-b2ed-61e9d99864b3
+                </li>
+              </ul>
+              <ol class="text-gray-600 text-base leading-7 mt-6">
+                <li class="ring-1 overflow-hidden ring-black rounded-lg ring-opacity-5 shadow-lg">
+                  This is item a3f9e46b-c779-48ca-adf0-d169abd7bc5f
+                </li>
+                <li class="w-8 rounded-full h-8">
+                  This is item e3a4b25f-0303-43bc-99f3-965c074b0397
+                </li>
+              </ol>
+              <ul class="bg-white">
+                <li class="ml-3 block font-medium text-sm">
+                  This is item e931813f-7668-4238-aeda-357a7c9443aa
+                </li>
+                <li class="space-y-4">This is item a92e9e71-2ea2-44ff-a5d7-0cac09e171f7</li>
+                <li class="mt-4 space-y-4">This is item a02d64a6-a7e2-4ad3-9e53-c6465be2eb9a</li>
+                <li class="text-sm pr-4 py-3 items-center justify-between flex pl-3">
+                  This is item 07ee939e-9f39-41a4-9e47-080460185bf1
+                </li>
+                <li class="rounded-full w-10 h-10">
+                  This is item 8c3d9f5d-05ae-4f65-aa64-e2aaeb381d6d
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-500 text-sm ml-2">
+              <ul class="ml-4">
+                <li class="text-gray-900 font-medium">
+                  This is item 9faca138-9bd0-49d4-82d1-b6de3b5b697d
+                </li>
+                <li class="font-medium text-gray-500 text-base hover:text-gray-900">
+                  This is item 598778a7-b5d3-426f-b43b-4aa40999329c
+                </li>
+                <li class="gap-x-6 grid-cols-2 text-sm grid">
+                  This is item f6755a82-3875-42d6-8a2b-c502338c5e1d
+                </li>
+                <li class="text-gray-700 text-sm font-medium block">
+                  This is item 75e1ed85-f225-4a06-a44d-3a1cb66d49e7
+                </li>
+              </ul>
+              <ul class="text-yellow-400">
+                <li class="w-6 h-6">This is item ef3b02d8-9349-44b4-8d89-148526e07fca</li>
+                <li
+                  class="origin-top-right w-56 ring-black focus:outline-none z-10 bg-white mt-2 ring-1 right-0 absolute ring-opacity-5 rounded-md shadow-lg"
+                >
+                  This is item a8b8f0c2-901c-479e-bec3-4f6a6b5fdf82
+                </li>
+                <li class="sr-only">This is item 240be924-8da5-48a8-99cb-c7809ed6c48f</li>
+              </ul>
+              <a href="#" target="_blank" class="block xl:inline">
+                This is link 948945c0-2254-4178-9e96-5a14ee275940
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="max-w-2xl mx-auto lg:max-w-none lg:px-0 px-4">
+          <ol class="md:hidden ml-6 relative">
+            <li class="text-sm px-3 rounded-full items-center font-medium inline-flex py-0.5">
+              <ul class="text-sm text-gray-500 whitespace-nowrap py-4 px-3">
+                <li class="flex-shrink-0 h-6 w-6 text-gray-400">
+                  This is item 924e179f-5079-4843-bd5e-51b2a7b855f9
+                </li>
+                <li class="-my-1.5 flex -mx-2">
+                  This is item 7199569e-c052-4517-9658-65b02f027df8
+                </li>
+                <li class="text-gray-900 font-medium p-2 block -m-2">
+                  This is item 70b5684c-8ebd-4c00-be2a-e86cd4fd6919
+                </li>
+              </ul>
+              <ul class="lg:hidden items-center flex flex-1">
+                <li
+                  class="w-full text-white border justify-center border-transparent focus:ring-offset-2 focus:ring-2 focus:ring-offset-gray-50 py-3 focus:ring-indigo-500 flex focus:outline-none rounded-md px-8 items-center bg-indigo-600 text-base font-medium hover:bg-indigo-700"
+                >
+                  This is item 32d42d3e-8d3a-4718-930f-24f16063efc7
+                </li>
+                <li class="h-5 items-center ml-3 flex">
+                  This is item c29ecf8a-b16f-4778-9397-d31c646b54c7
+                </li>
+                <li class="flex-1 space-y-1 pb-4 px-2">
+                  This is item f8739f11-3a74-4f7a-ad40-12e78d700cd5
+                </li>
+                <li class="sm:col-span-1">This is item 75beed10-0db5-470b-acf6-60f144ca5db1</li>
+                <li class="items-center -m-2 p-2 flex">
+                  This is item f35cb374-5553-49fd-a402-fa60025a297c
+                </li>
+              </ul>
+            </li>
+            <li class="sr-only">
+              <img
+                class="bg-yellow-400 absolute border-yellow-400 rounded-full inset-y-0 border"
+                alt="Profile picture of user a7c517ca-0899-4a2a-8fcf-ba1fc2fb66b5"
+                src="https://example.org/pictures/0c2e5045-6947-4521-a55e-e2f437e66dae"
+              />
+              <ol class="text-sm text-gray-700 block font-medium">
+                <li class="items-start flex">This is item 699b5cda-8940-4809-9b98-050fb4b11c22</li>
+                <li class="text-red-500 w-5 -ml-1 h-5 flex-shrink-0 self-center mr-0.5">
+                  This is item aac912f7-6acf-47ea-8d9a-deffb164bfb4
+                </li>
+              </ol>
+              <ol class="w-6 h-6">
+                <li class="text-gray-400 h-3 w-3">
+                  This is item 5f574f89-a3f3-4594-9a09-14d5838f8b53
+                </li>
+                <li class="ml-4 flex flex-shrink-0">
+                  This is item d66c13ac-be53-41f1-ab7a-028d47cf4d07
+                </li>
+              </ol>
+              <ul class="shadow sm:rounded-lg bg-white">
+                <li class="space-x-8 items-center md:flex hidden md:flex-1 justify-end lg:w-0">
+                  This is item a29b2c4d-1b90-449d-aa7a-bab8b863243c
+                </li>
+                <li class="space-y-6 mt-6">This is item b8fc0089-7ca7-4eb0-8722-1662da683fb4</li>
+                <li class="text-sm px-2 whitespace-nowrap py-2 text-gray-900">
+                  This is item 0bc0a83b-cf91-45e9-871b-07529726f312
+                </li>
+                <li
+                  class="focus:outline-none focus:ring-indigo-500 focus:ring-2 flex bg-white focus:ring-offset-2 rounded-full text-sm"
+                >
+                  This is item 6cd91658-d2e0-4f1f-b002-7ae34ae7eecc
+                </li>
+                <li class="block h-8 w-auto">This is item 5eb4fd90-ab71-4984-ba8d-a6a2a7529fa6</li>
+              </ul>
+            </li>
+            <li class="gap-7 sm:grid-cols-2 sm:gap-y-8 grid sm:gap-x-4">
+              <img
+                class="w-px lg:mx-6 h-6 bg-gray-200 mx-4"
+                alt="Profile picture of user d41483d2-7d26-4ef8-98de-d93e5b13dc15"
+                src="https://example.org/pictures/a4f96563-52c3-4df9-b155-3c780e3f6000"
+              />
+              <ol class="-m-2 p-2 hover:text-gray-500 text-gray-400">
+                <li
+                  class="rounded-md py-2 text-purple-600 border bg-purple-100 px-4 text-base whitespace-nowrap font-medium hover:bg-purple-200 inline-flex items-center justify-center border-transparent"
+                >
+                  This is item 733ed128-8da0-4086-a8c0-a8d2ad178651
+                </li>
+                <li class="mt-6 space-y-6">This is item 10e418dd-d680-489e-819e-20eebe47ca13</li>
+              </ol>
+              <a href="#" rel="noreferrer" class="w-auto h-8">
+                This is link aa6c77e5-ce06-4b50-8563-3c5335277659
+              </a>
+            </li>
+            <li class="sr-only">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="hover:text-gray-600 text-gray-500"
+              >
+                This is link 55e050ea-be7f-4126-a907-387f4b5cd09a
+              </a>
+              <a href="#" class="h-5 mr-2.5 w-5 text-gray-400">
+                This is link 40058854-4895-4f26-8eea-c10c4b2cb928
+              </a>
+              <a href="#" target="_blank" class="font-medium leading-none text-sm text-gray-400">
+                This is link 85c6399c-5ef2-4f08-af2b-f37a14617345
+              </a>
+            </li>
+          </ol>
+        </li>
+      </ol>
+      <select class="w-screen pointer-events-auto max-w-md">
+        <option>This is item 20a33873-a401-44a7-850c-aad116e40e83</option>
+        <option value="b7300864-8832-44fd-b6b0-43f3601fa7c2">
+          This is item 7842eca7-d7e5-4800-8250-09302d0e3acc
+        </option>
+      </select>
+      <img
+        class="sm:py-32 lg:px-8 sm:px-6 py-24 px-4 relative max-w-7xl mx-auto"
+        alt="Profile picture of user 6feb5bbe-a224-4b1f-b3c0-f33c7d23b6a3"
+        src="https://example.org/pictures/00fe2b17-0d37-426e-83c1-730cf210e35d"
+      />
+      <img
+        class="flex-auto"
+        alt="Profile picture of user ce98532f-31d6-46dc-ae9b-9a3cb3890eb3"
+        src="https://example.org/pictures/bfcd7ab2-b410-4804-ae54-7aca48927a20"
+      />
+      <h3 class="bg-white text-gray-900 py-1.5 hover:bg-gray-100 focus:z-10">
+        This is heading 1410e2cf-01ca-452f-9c12-ba3db01acaf4
+      </h3>
+    </div>
+    <nav class="absolute inset-y-0 flex pointer-events-none items-center right-0 px-2">
+      <ul class="truncate ml-3 flex-auto">
+        <li class="flow-root">
+          <a href="#" class="bg-white px-3 py-2 relative">
+            This is link 1359f939-537a-4f8a-9c36-c9931b118fc7
+          </a>
+          <ol class="grid-cols-3 text-sm gap-x-8 gap-y-10 grid text-gray-500">
+            <li class="flex lg:ml-6">
+              <ul
+                class="flex-shrink-0 focus:ring-offset-sky-900 focus:bg-sky-900 focus:outline-none focus:ring-2 rounded-full text-sky-200 focus:ring-white hover:text-white focus:ring-offset-2 hover:bg-sky-800 p-1"
+              >
+                <li class="max-w-7xl mx-auto">This is item d399f60d-ad2e-40d1-832c-84b41ef71b7f</li>
+                <li class="h-10">This is item 2f978d1b-4fe3-4418-8725-8e33e08a448e</li>
+                <li class="sr-only">This is item 96f7703a-5844-4c0c-a9d6-586980f638e1</li>
+              </ul>
+            </li>
+            <li class="text-gray-700 font-medium ml-2 group-hover:text-gray-800 text-sm">
+              <ol class="flex">
+                <li class="w-7 items-center flex rounded-full mx-auto h-7 justify-center">
+                  This is item 74ae39bf-8ed6-4688-baf5-c4b2389b4c27
+                </li>
+                <li class="lg:block hidden right-0 absolute -mr-20 -mt-20 top-0">
+                  This is item 1ed5fda2-8d28-4d8d-9db7-77d7d911f7ba
+                </li>
+              </ol>
+              <a href="#" rel="noreferrer" class="text-yellow-400 w-5 h-5">
+                This is link 75d46f86-1899-4561-868f-030c932f6c1c
+              </a>
+              <a href="#" rel="noreferrer" class="rounded-md shadow-sm relative mt-1">
+                This is link d1408eeb-2c26-4b14-b054-6435d0a732f3
+              </a>
+              <ol class="-m-3 items-start rounded-lg p-3 flex hover:bg-gray-50">
+                <li
+                  class="text-sm text-yellow-800 inline-flex font-medium px-3 rounded-full bg-yellow-100 py-0.5 items-center"
+                >
+                  This is item 6edadca5-07a9-43fe-bca7-f87629d5b868
+                </li>
+                <li class="fixed inset-0 z-10 overflow-y-auto">
+                  This is item e5255d84-c378-4f22-8770-4ea84a1074fe
+                </li>
+                <li class="md:mt-0 flex justify-center space-x-8 mt-6">
+                  This is item df8e96f8-4eef-47d1-9283-a4c467ea7e92
+                </li>
+                <li
+                  class="block mt-2 font-medium text-sm truncate text-gray-900 pointer-events-none"
+                >
+                  This is item 82f9f93f-4ad4-4e24-a96d-a04c287046cb
+                </li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+        <li
+          class="focus:ring-offset-2 flex max-w-xs focus:ring-2 focus:ring-indigo-500 items-center focus:outline-none rounded-full bg-white text-sm"
+        >
+          <ol class="text-gray-700">
+            <li class="md:gap-8 md:grid-cols-2 md:space-y-0 space-y-12 md:grid">
+              <img
+                class="w-8 rounded-full h-8 flex text-gray-900 justify-center items-center hover:bg-gray-200 mx-auto"
+                alt="Profile picture of user f8317e98-81fb-42b2-beaa-8e677980f8e2"
+                src="https://example.org/pictures/15653fb7-9e56-433b-b3c6-d72b52d6497c"
+              />
+              <img
+                class="space-y-6 xl:space-y-10"
+                alt="Profile picture of user aef4284f-bc9a-4512-905b-7608cf5f462d"
+                src="https://example.org/pictures/ee371ad2-1d36-487f-97fa-834432ac8cd1"
+              />
+            </li>
+            <li class="sr-only">
+              <a href="#" rel="noreferrer" class="flex items-center">
+                This is link 49583fb6-fcae-4f6e-bef4-7ada8d312c7b
+              </a>
+              <a href="#" target="_blank" class="sr-only">
+                This is link 613266ff-70bb-4417-ab11-4ee732cc197d
+              </a>
+              <ul class="py-1">
+                <li
+                  class="flex lg:items-center gap-6 rounded-3xl sm:p-10 lg:gap-8 lg:flex-row ring-gray-900/10 p-8 flex-col ring-1"
+                >
+                  This is item b9f2fdb8-818b-4bff-895f-fbd4a96e9e09
+                </li>
+                <li class="mt-3 text-sm">This is item 35c9cd23-d887-4f98-84c8-ab65d7178beb</li>
+                <li class="rounded-lg h-full absolute w-1/2 right-0">
+                  This is item 2d3d0c58-b720-41cb-afe4-ff6c8df85940
+                </li>
+              </ul>
+              <ol class="justify-between md:block flex">
+                <li class="h-5 flex-shrink-0 w-5">
+                  This is item 903a96fb-fa1b-42ff-aefc-ca6ebc64f6d3
+                </li>
+                <li class="text-sm text-gray-700 lg:block font-medium hidden hover:text-gray-800">
+                  This is item 736aa889-9eae-43de-81f5-ad40f6bf379d
+                </li>
+                <li class="lg:flex hidden">This is item 3e144415-4f81-40b8-b68e-5ebd88a43e44</li>
+              </ol>
+            </li>
+          </ol>
+          <ul class="items-center flex px-5">
+            <li class="object-cover h-full object-center w-full">
+              <ul class="border-gray-300 border-2 w-full bg-white h-64 text-gray-200 border-dashed">
+                <li class="whitespace-nowrap font-medium border-b-2 flex-1 text-base py-4 px-1">
+                  This is item 370b3a82-f3c0-46da-a48b-0a6d08b2e45e
+                </li>
+                <li class="sr-only">This is item 89749ad1-64f4-4292-8c7c-b1b72d2ab494</li>
+                <li class="text-left text-gray-900 text-sm font-semibold py-3.5 px-3">
+                  This is item 279ead71-815b-4495-a5d3-9ea509b879ef
+                </li>
+                <li class="mt-2 flex font-medium text-sm sm:mt-4">
+                  This is item bdb9188f-995c-4d10-9caa-f6ff936aa38a
+                </li>
+                <li class="h-6 w-6">This is item 7ca583ca-a0b9-4a7c-8491-575d9a3bb4ab</li>
+              </ul>
+              <ul class="space-x-3 items-center flex">
+                <li class="p-8 bg-gray-800">This is item 77fd6849-26b2-4ae3-b7f5-69c94f728eb6</li>
+                <li class="mb-8 px-4">This is item b0a72058-064a-4fcf-976f-75f5376efdb4</li>
+                <li class="flow-root">This is item e8775f5e-d587-4e52-8aa0-a76ca01b240e</li>
+                <li
+                  class="text-gray-500 border-transparent hover:border-gray-300 hover:text-gray-700"
+                >
+                  This is item eb24e03c-afdf-492c-a441-b0f7bc5ca8e0
+                </li>
+                <li class="flex-1 overflow-y-auto mt-5 flex pt-1 h-0 flex-col">
+                  This is item 7993f989-8e45-4890-9498-5b3f305d4271
+                </li>
+              </ul>
+              <a href="#" rel="noreferrer" class="h-5 w-5 text-gray-300">
+                This is link f21ce98c-7aa7-48cd-b7b6-2b09ebc215d1
+              </a>
+              <ol class="font-bold tracking-tight text-gray-900 sm:text-4xl text-3xl">
+                <li class="text-sm ml-3">This is item 02684ecc-33bd-4e38-b736-15a2f04ab2b8</li>
+                <li class="flex-shrink-0 w-6 text-gray-400 h-6">
+                  This is item 6db0d04c-61c6-436e-93f0-9dcd1968bbe2
+                </li>
+                <li class="sr-only">This is item 713fdce9-a634-4db5-a9d7-75962f6c2f5f</li>
+              </ol>
+            </li>
+            <li class="bg-gray-50">
+              <ol class="font-medium block text-gray-700 text-sm">
+                <li class="h-4 border-gray-300 rounded w-4 text-indigo-600 focus:ring-indigo-500">
+                  This is item e956b204-8e18-4de9-9553-86f0430d8663
+                </li>
+                <li class="flex justify-center mx-auto items-center w-7 rounded-full h-7">
+                  This is item 3c76013a-20d1-4eca-8fa1-73a7edceed61
+                </li>
+                <li class="relative">This is item 1fdc55a8-22af-4746-8943-6775fdc6a7a5</li>
+                <li class="max-w-none mt-4 text-gray-500 prose prose-sm">
+                  This is item 15d9d7b2-6da7-4dda-a569-fbc08c5e5b9c
+                </li>
+                <li class="border-gray-200 border-t space-y-6 py-6 px-4">
+                  This is item b5d817fa-6f62-43bf-934c-8c930770a535
+                </li>
+              </ol>
+              <ul class="text-indigo-600 font-semibold hover:text-indigo-500 text-base">
+                <li class="flex pt-5 pb-2 px-4">
+                  This is item ae46f435-1c1e-4971-8edf-103574cc87a1
+                </li>
+                <li class="w-full object-cover lg:absolute lg:h-full h-56">
+                  This is item 841435eb-9af8-42ab-8bec-bd2afb755f9c
+                </li>
+                <li class="h-5 w-5">This is item 414da35e-9408-4157-87a2-95706b03400a</li>
+                <li class="flex">This is item 3e677f69-341f-451c-9cf2-0bb5c42e8e50</li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="aspect-w-4 overflow-hidden bg-gray-100 aspect-h-3 rounded-lg"
+              >
+                This is link 9114d78d-f961-4295-a269-0b6edd2c21d6
+              </a>
+              <a href="#" class="block font-medium ml-3 text-gray-900 text-base">
+                This is link c9f75c37-c978-4f4d-be7d-9c55a151d904
+              </a>
+            </li>
+            <li class="space-y-6 mt-6">
+              <ul
+                class="sm:px-6 px-4 lg:py-32 divide-y-2 max-w-md lg:max-w-7xl mx-auto lg:px-8 divide-blue-gray-200 sm:max-w-3xl py-24"
+              >
+                <li class="space-y-1">This is item 0cf833ad-6837-42f9-8054-c0654a0603c3</li>
+                <li class="sr-only">This is item c85e23b0-3ebf-403f-afd0-1fd6a9054a10</li>
+                <li class="space-y-1">This is item 96b89143-ffff-43aa-a6d4-1dd9cafb7812</li>
+                <li class="mt-10">This is item 50dd95b5-27b4-4661-92d9-688832c28a94</li>
+              </ul>
+              <ul
+                class="focus:outline-none focus:ring-2 flex justify-center items-center h-12 w-12 focus:ring-white rounded-full"
+              >
+                <li class="font-medium hover:text-gray-700 rounded-md text-gray-900 text-base">
+                  This is item 186ec320-bb32-4a02-8494-3e7821faf431
+                </li>
+                <li class="ring-1 ring-opacity-5 ring-black">
+                  This is item 8de5a12f-3851-4076-9bd3-80f8febd3385
+                </li>
+                <li class="w-auto h-6">This is item 331d0e6c-d819-4ed9-875f-bf901b5f72e2</li>
+              </ul>
+              <img
+                class="md:grid-cols-3 md:gap-6 md:grid"
+                alt="Profile picture of user 8b59f8a7-ca4f-49ca-8567-ecf37eee3b45"
+                src="https://example.org/pictures/b7657743-54d4-482a-a7ed-eedcbece2941"
+              />
+            </li>
+            <li class="h-12">
+              <ol class="xl:col-span-4 lg:mt-0 mt-6 lg:col-span-5">
+                <li
+                  class="flex justify-center sm:items-center sm:px-6 items-stretch text-center lg:px-8 min-h-full"
+                >
+                  This is item a71d29a8-5447-4cda-b1c5-d056ac0c620d
+                </li>
+                <li class="py-1.5 hover:bg-gray-100 bg-white focus:z-10">
+                  This is item c2605607-7280-401a-afce-4d450448d653
+                </li>
+                <li class="min-h-full">This is item 3e3f9d98-9940-414b-8347-d467671472c1</li>
+                <li class="text-gray-900 font-medium text-base">
+                  This is item c94c3ad9-bf65-4f00-9218-5b93fd589952
+                </li>
+              </ol>
+            </li>
+            <li
+              class="bg-white focus:ring-indigo-500 font-medium items-center focus:outline-none hover:text-gray-900 focus:ring-2 text-base inline-flex focus:ring-offset-2 rounded-md group"
+            >
+              <a
+                href="#"
+                rel="noreferrer"
+                class="md:flex-1 items-center justify-end lg:w-0 hidden md:flex"
+              >
+                This is link dbcd3e39-1f3a-4233-ba1c-ac05e499721f
+              </a>
+              <ol class="lg:col-start-1">
+                <li class="font-bold text-gray-900 tracking-tight text-xl">
+                  This is item c040b815-4361-42b9-94d2-a021e7718dc5
+                </li>
+                <li class="flex">This is item 9e918163-66f0-44d2-9889-7007f11573b4</li>
+                <li class="text-green-500 w-6 flex-none h-6">
+                  This is item 84bb0c29-daf7-4ac2-b503-0cc1f1e013db
+                </li>
+                <li class="text-gray-700 font-medium text-sm block">
+                  This is item a0ce0ac3-1468-405c-a7e1-de06c43d2a3c
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-3xl sm:text-4xl text-gray-900 tracking-tight font-bold mt-2"
+              >
+                This is link 367f1933-8971-4b7a-bad1-c60eb4742594
+              </a>
+              <ol class="text-gray-400 h-5 w-5">
+                <li class="bg-gray-300">This is item f9a3634c-6bb9-4d13-bc43-fa5ebbbe09e3</li>
+                <li
+                  class="block focus:border-indigo-500 border bg-white py-2 focus:outline-none sm:text-sm mt-1 px-3 shadow-sm rounded-md border-gray-300 w-full focus:ring-indigo-500"
+                >
+                  This is item 60e4afc1-de22-4a6b-89fa-8b9605e0bb6e
+                </li>
+                <li class="block rounded-lg overflow-hidden aspect-h-7 w-full aspect-w-10">
+                  This is item 6924381d-67bb-484c-bdb3-3987a647d389
+                </li>
+                <li class="hidden space-x-10 md:flex">
+                  This is item 7037402a-5d13-4d30-94e1-b4fbab934280
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <ul
+            class="rounded-md focus:ring-grape-500 items-center text-gray-400 bg-gray-50 justify-center focus:outline-none p-2 inline-flex hover:bg-gray-100 focus-ring-inset focus:ring-2"
+          >
+            <li class="p-3 -m-3 hover:bg-gray-50 rounded-lg flex items-center">
+              <img
+                class="font-medium text-gray-700 text-sm block"
+                alt="Profile picture of user 282fd9a4-c964-489c-be6a-c1111c5ff231"
+                src="https://example.org/pictures/dbb20b5e-c685-420d-a67e-3a2f8e6a44c2"
+              />
+            </li>
+            <li
+              class="sm:text-sm shadow-sm border-gray-300 focus:border-indigo-500 block focus:ring-indigo-500 rounded-md w-full"
+            >
+              <ol class="text-gray-900 font-medium">
+                <li class="text-gray-400 h-5 mr-2.5 w-5">
+                  This is item 1238beb3-71d0-40b6-a223-301459d6eea1
+                </li>
+                <li class="sr-only">This is item 2d066b59-e039-4b77-b0cf-61bd4c7f6bcf</li>
+                <li class="bg-white">This is item ad2f7e24-8c7e-44e8-857a-6c1777a8aaa3</li>
+                <li class="text-gray-900 text-base font-medium hover:text-gray-700">
+                  This is item d9f300b5-a36b-4c36-83b4-f0507665dc49
+                </li>
+                <li class="bg-white py-2 px-3 relative">
+                  This is item fd77f429-e6c9-4798-b424-f2269027518d
+                </li>
+              </ol>
+              <ol
+                class="bg-white text-gray-400 py-2 text-sm border focus:ring-indigo-500 relative focus:ring-1 items-center px-4 focus:outline-none font-medium hover:bg-gray-50 inline-flex focus:z-10 border-gray-300 focus:border-indigo-500"
+              >
+                <li class="flex-1 lg:hidden flex items-center">
+                  This is item faea6f07-af08-4145-bfa9-71dbc023385a
+                </li>
+                <li
+                  class="rounded-md focus-within:ring-white border-transparent -ml-2 group focus-within:ring-2 relative"
+                >
+                  This is item 13248e1e-ae90-4afa-93e8-76b18cc438d1
+                </li>
+                <li class="bg-gray-50 sm:p-6 px-4 py-5">
+                  This is item 0154a4a3-770b-47b9-a5c4-bd76b285ced7
+                </li>
+                <li class="text-sm px-3 py-4 whitespace-nowrap text-gray-500">
+                  This is item beb31738-fb2c-4230-acbf-f1a23c7d4acc
+                </li>
+              </ol>
+              <ul class="grid grid-cols-1 lg:grid-cols-4 gap-x-8 gap-y-10">
+                <li class="hover:text-gray-800">
+                  This is item 6ca8cab7-43fe-4ff5-848b-ed2e73c8eef7
+                </li>
+                <li class="bg-white py-1.5 hover:bg-gray-100 focus:z-10">
+                  This is item 1e10dcf6-45e0-4b67-8c64-61a527062627
+                </li>
+                <li class="mt-2 flex sm:max-w-md">
+                  This is item 5d32ee9d-0af1-4f1f-8657-a592091f8c5a
+                </li>
+                <li class="sr-only">This is item 67eb5da2-e270-4064-bf72-1fc230b9dddc</li>
+                <li class="focus:z-10 hover:bg-gray-100 py-1.5 bg-white">
+                  This is item 5761e96c-f849-4a25-ba87-783be40775b0
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="bg-white py-8">
+            <li class="px-5 mt-6">
+              <ul class="inset-0 bg-opacity-25 bg-black fixed">
+                <li class="text-gray-900 font-medium">
+                  This is item 5089bef7-e61c-476e-9a66-50812c5c6178
+                </li>
+                <li
+                  class="font-bold mt-2 sm:text-4xl tracking-tight text-3xl leading-8 text-gray-900"
+                >
+                  This is item afeb11b3-1c59-4a38-ab60-17361c791c77
+                </li>
+              </ul>
+              <ol class="text-sm group-hover:text-gray-900 font-medium text-gray-700">
+                <li class="px-2 space-y-1">This is item d1639778-a57b-4e78-ba54-c207f36e6137</li>
+                <li class="lg:hidden flex">This is item abd4cda7-ebd1-4a45-aab8-92d74b2d09d0</li>
+                <li class="ml-4">This is item 8207e27c-5890-48be-ad3d-2c1f59cb3c86</li>
+                <li class="lg:max-w-3xl transform z-10 absolute w-screen -ml-4 max-w-md mt-3">
+                  This is item 93c04e46-08d9-43a0-a9db-7cd5841f0bd8
+                </li>
+                <li class="flex relative items-start">
+                  This is item 0dfe6e1d-d9eb-4ffa-84d9-3639c6967669
+                </li>
+              </ol>
+              <ol class="text-gray-900 tracking-tight sm:text-4xl text-3xl font-bold">
+                <li class="items-center inset-y-0 left-0 absolute flex pl-3 pointer-events-none">
+                  This is item aa3f17a9-29b5-48a4-95b9-390d59eaeb43
+                </li>
+                <li class="sm:pb-40 lg:pb-48 sm:pt-24 lg:pt-40 pb-80 pt-16">
+                  This is item c922b871-9d3b-45e1-98a2-b1bd56f8796a
+                </li>
+                <li class="text-gray-500 ml-3 text-base">
+                  This is item 358a93ba-1da0-4502-a7c4-8792648bb5c5
+                </li>
+                <li class="relative flex-shrink-0 inline-block">
+                  This is item 47fd8369-5f53-43fd-b38d-48522ec1b29a
+                </li>
+                <li class="ml-4">This is item 2eb56136-a6ac-48ce-98ee-355224297c94</li>
+              </ol>
+            </li>
+            <li class="-inset-px border-2 absolute rounded-lg pointer-events-none">
+              <ul class="text-gray-600 hover:bg-gray-50 hover:text-gray-900">
+                <li class="text-right sm:col-span-2">
+                  This is item bfb22198-ad9d-44f5-82ff-d3a678fbae4b
+                </li>
+                <li class="px-4 items-center flex">
+                  This is item 0bdf6b1e-2ec1-46ac-8bfc-37329a5a57c7
+                </li>
+                <li class="text-green-800 bg-green-100">
+                  This is item 8ced22a1-9fe7-4996-82cd-575307768d83
+                </li>
+                <li class="sr-only">This is item 81f4b18b-de10-4cb9-8993-3b7cc4bca9c9</li>
+              </ul>
+            </li>
+            <li class="border-t py-2 border-gray-200">
+              <ul class="font-medium hover:text-gray-600 text-sm text-gray-500">
+                <li class="divide-y divide-gray-200 mt-2 leading-6 text-gray-500 text-sm">
+                  This is item a611eaef-a7ff-427d-ae3e-db53e616421e
+                </li>
+                <li class="block ml-3 font-medium text-sm">
+                  This is item e338254c-4bf9-48ab-b7eb-48f170912385
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="lg:px-8 mx-auto items-start py-3 flex sm:px-6 max-w-3xl px-4">
+          <ol class="w-8 h-8 rounded-full inline-block">
+            <li class="grid-cols-2 gap-y-10 gap-x-8 grid">
+              <a href="#" target="_blank" rel="noreferrer" class="col-span-4 sm:col-span-2">
+                This is link 97cf207f-2a31-4e6f-bd8a-c0a05468e708
+              </a>
+              <ol class="text-sm px-6 text-center py-5 font-medium">
+                <li
+                  class="w-full flex-col shadow-xl overflow-y-auto max-w-xs relative pb-12 flex bg-white"
+                >
+                  This is item 1f06c1f2-7664-4d89-b31e-f1e44a92a75b
+                </li>
+                <li class="font-bold text-white text-3xl tracking-tight sm:text-4xl">
+                  This is item 042d50ec-344e-4d3f-8efc-37a1e85a6952
+                </li>
+              </ol>
+              <ul class="font-medium text-sm">
+                <li class="flex-1 justify-end flex items-center">
+                  This is item f63b8ac3-cb56-4bc4-8a4a-3a72c967db78
+                </li>
+                <li class="mt-2 flex sm:max-w-md">
+                  This is item 123c1eed-6997-4e9e-b7cd-6e7b20ae6380
+                </li>
+                <li class="flow-root">This is item f53ca3f4-7452-42ed-a8f9-e4c16cb2c049</li>
+                <li class="w-px lg:mx-6 mx-4 bg-gray-200 h-6">
+                  This is item e1c13ace-0bd4-44e8-bcc9-8304cf3c8d40
+                </li>
+              </ul>
+              <ol
+                class="lg:col-start-2 grid-cols-2 md:mt-0 md:col-start-3 md:row-start-1 md:col-span-8 sm:grid-cols-3 grid lg:col-span-6 col-span-6 mt-10 gap-8"
+              >
+                <li class="flex-shrink-0 w-12 h-12">
+                  This is item c004da23-dba5-4b57-b579-39deaf2f9832
+                </li>
+                <li class="font-medium text-gray-900 text-base">
+                  This is item 85f267a3-e980-49b8-bb7c-7229c97f42d6
+                </li>
+                <li class="hover:text-gray-900 text-base text-gray-500 font-medium">
+                  This is item 0a58dbce-34a2-4e11-8653-d8c0e9bbc5ae
+                </li>
+              </ol>
+            </li>
+            <li class="hover:bg-gray-100 focus:z-10 bg-white py-1.5">
+              <img
+                class="flex-1 sm:flex sm:items-center min-w-0 sm:justify-between"
+                alt="Profile picture of user 6989648a-2e00-436e-843f-bffd00bd0b38"
+                src="https://example.org/pictures/8f99da52-bab4-447f-9a81-ff4378d70bdb"
+              />
+            </li>
+            <li class="text-gray-500 text-sm">
+              <ul class="flex-shrink-0">
+                <li class="max-w-2xl px-4 mx-auto">
+                  This is item 22847717-79db-4619-8bdc-83dfb0516f2a
+                </li>
+                <li class="space-y-1 flex-1">This is item 60f6f00f-d02c-41e1-897c-edc7ddffc7c6</li>
+              </ul>
+              <ol class="min-h-[576px] bg-gray-50 h-0">
+                <li
+                  class="ring-1 -mx-4 overflow-hidden ring-black mt-8 sm:-mx-6 md:mx-0 ring-opacity-5 shadow md:rounded-lg"
+                >
+                  This is item 655a7345-1550-4b54-bfca-0e043ae99b55
+                </li>
+                <li class="-ml-1 h-5 w-5 mr-0.5 text-gray-400">
+                  This is item 64ba2d64-7573-4046-b10e-f6f1f8f05562
+                </li>
+                <li class="text-gray-900 text-lg font-medium">
+                  This is item e0bf35ea-14d2-4c7c-89d8-f6aec08350cb
+                </li>
+              </ol>
+            </li>
+            <li class="py-10 bg-gray-100">
+              <img
+                class="md:text-6xl text-4xl font-bold sm:text-5xl tracking-tight text-white"
+                alt="Profile picture of user 6fd77f44-51b6-4c2e-bd6b-4f534582a4d4"
+                src="https://example.org/pictures/93e426ce-9e18-44bb-bb0d-6290068cbebe"
+              />
+              <a href="#" class="w-5 h-5 text-white">
+                This is link 0b616d3e-57dc-4f3e-9790-65f2b8b02072
+              </a>
+              <ol class="flex text-gray-600 text-sm">
+                <li class="py-12 max-w-7xl sm:px-6 mx-auto lg:px-8">
+                  This is item 2c490a0b-1695-443f-ab4e-089ecfd14bb2
+                </li>
+                <li class="mt-4 font-medium text-gray-900 block">
+                  This is item 73fa91b7-141b-4d7b-908b-7fbc360da0a6
+                </li>
+              </ol>
+              <a href="#" target="_blank" class="justify-center h-full space-x-8 flex">
+                This is link 78944f14-6a39-417d-82d2-a6debc648b00
+              </a>
+            </li>
+            <li class="font-sans">
+              <a
+                href="#"
+                target="_blank"
+                class="md:flex-grow text-lg text-white relative font-medium"
+              >
+                This is link 85853a80-efe4-4612-b97d-3bea061fcf5d
+              </a>
+            </li>
+          </ol>
+        </li>
+        <li class="flex justify-end">
+          <ol class="sm:mt-8 relative mt-6 self-center rounded-lg p-0.5 bg-gray-100 flex">
+            <li class="hidden lg:items-center lg:flex-1 lg:flex">
+              <ul class="px-6 py-5">
+                <li class="w-2.5 bg-transparent rounded-full group-hover:bg-gray-300 h-2.5">
+                  This is item 8fd5498f-0b2f-4187-a805-39ab235e2d74
+                </li>
+                <li class="space-y-6 sm:space-y-4 sm:mt-4 mt-6">
+                  This is item a8558bf5-7465-4f6e-8816-1be9b5c6ceb9
+                </li>
+                <li class="h-5 group-hover:text-gray-500 w-5 ml-2">
+                  This is item e1117663-4b5a-4456-9435-c889c2f651b7
+                </li>
+              </ul>
+              <ul class="bg-gray-50 sm:pt-16 pt-12">
+                <li class="bg-gray-50 absolute bottom-0 sm:px-6 px-4 py-4 inset-x-0">
+                  This is item 3daaf32b-d53a-4af7-b8a9-75230d9a6980
+                </li>
+                <li
+                  class="pl-3 py-2 text-gray-500 text-base hover:bg-gray-50 pr-4 border-l-4 font-medium hover:text-gray-700 hover:border-gray-300 border-transparent block"
+                >
+                  This is item bcd0f759-f18b-466b-8440-419ad964b998
+                </li>
+                <li class="items-center flex w-full py-6 flex-col">
+                  This is item f86ff31b-df19-4de1-978e-b3cb756fcb97
+                </li>
+                <li class="mt-1">This is item c0b30e96-fc96-48b5-b1b0-c997b5b093fb</li>
+              </ul>
+              <ul class="flex sm:block text-gray-500 lg:hidden flex-col mt-1">
+                <li class="sr-only">This is item c76faa81-78c1-495b-bf5c-81e5d2479591</li>
+                <li class="sm:max-w-none mx-auto sm:justify-center max-w-sm sm:flex mt-10">
+                  This is item 34dcf2e6-5dde-4f99-8c01-cb45235ec19f
+                </li>
+                <li class="lg:flex lg:items-center lg:justify-between">
+                  This is item cc12e5d4-5190-411c-8778-6f5bdb90260d
+                </li>
+                <li class="lg:px-8 mx-auto px-4 max-w-7xl sm:px-6">
+                  This is item c1c667a9-4736-4d60-8a04-78a9b44afc1a
+                </li>
+              </ul>
+              <ol
+                class="text-purple-600 focus:ring-offset-2 focus:outline-none font-medium hover:text-purple-500 focus:ring-purple-500 bg-white focus:ring-2 rounded-md"
+              >
+                <li class="border-t py-2 border-gray-200">
+                  This is item 8dda81df-8332-40a6-a39e-a50bbf01beb8
+                </li>
+                <li class="mx-auto px-6 lg:max-w-7xl max-w-xl lg:px-8 relative">
+                  This is item d02895b9-ce84-4e52-97c0-c37b40db1448
+                </li>
+                <li class="flex">This is item efa9af79-9cd3-45e6-bcf9-3f2c60738fe2</li>
+              </ol>
+            </li>
+            <li class="flex mt-8 lg:mt-0 lg:flex-shrink-0">
+              <ol class="md:justify-between md:space-x-5 md:flex md:items-center">
+                <li
+                  class="aspect-h-1 overflow-hidden aspect-w-1 bg-gray-100 rounded-lg group-hover:opacity-75"
+                >
+                  This is item 10cac5e5-9792-48a2-8081-d3e4034f6d6c
+                </li>
+                <li class="flex items-center">This is item df6dc27f-e197-4f7e-9b0e-5ca001d7d3ba</li>
+                <li class="justify-center md:col-span-2 lg:col-span-1 col-span-1 flex">
+                  This is item 3c43ceef-da41-4146-9344-fd18681e8ef4
+                </li>
+                <li class="text-base">This is item 0ab700ea-4120-4b72-be6e-2d4eaf5c0aa9</li>
+              </ol>
+              <a href="#" rel="noreferrer" class="flex items-center flex-1">
+                This is link 30ed190e-55b2-4067-ad77-9eacda81cd54
+              </a>
+            </li>
+            <li class="sm:flex-auto">
+              <ol class="flex space-x-6">
+                <li class="relative focus-within:text-gray-400 text-indigo-200">
+                  This is item d01551cd-ba46-43d1-a036-ab000b39d759
+                </li>
+                <li class="sr-only">This is item fd19315f-80c7-4143-b356-4ac8196a4060</li>
+                <li class="sr-only">This is item 5359757c-1180-45b4-82d1-34f7aa526b77</li>
+                <li class="max-w-7xl px-8 mx-auto">
+                  This is item 77d90acf-da3b-4c72-b363-990dfa56537f
+                </li>
+                <li class="w-12 h-12 rounded-full">
+                  This is item 486a278e-3b2d-4ea1-9514-2472d1d0aba4
+                </li>
+              </ol>
+              <ul class="justify-end flex-1 items-center flex">
+                <li class="group p-2 -m-2 flex items-center">
+                  This is item 5a91a0ed-d8ff-4f96-a7ff-3402a2433a2c
+                </li>
+                <li class="flex space-x-2 items-center">
+                  This is item e51349be-4448-4412-89d1-6b8230538b8e
+                </li>
+                <li class="text-gray-500 hover:text-gray-600">
+                  This is item d78f844e-60d9-4339-9ef8-403f198b8cc5
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-900 -m-2 p-2 block font-medium">
+              <a href="#" class="aspect-h-3 bg-gray-100 rounded-lg aspect-w-4 overflow-hidden">
+                This is link a953d8e2-e78c-4d65-8c52-08dc5abfb2c5
+              </a>
+              <a href="#" target="_blank" class="text-white">
+                This is link d409fb2a-7692-4a73-bfb2-9be539f906e4
+              </a>
+              <ul class="hover:text-indigo-900 text-indigo-600">
+                <li class="sr-only">This is item 940e36cf-32f1-473e-b577-8fd8a5b6b89e</li>
+                <li class="font-bold sm:text-4xl text-white tracking-tight text-3xl">
+                  This is item 01fb316b-1767-461f-9415-af19fabc21e1
+                </li>
+                <li class="py-1.5 hover:bg-gray-100 focus:z-10 bg-white">
+                  This is item c2390c42-ecb6-4d8e-a0e1-50c5d40442df
+                </li>
+              </ul>
+              <img
+                class="bg-white"
+                alt="Profile picture of user eb7f791e-ee29-42d8-888e-f20637a5d637"
+                src="https://example.org/pictures/eff29b46-de48-41c8-86a8-fc09e5b3633c"
+              />
+            </li>
+          </ol>
+          <img
+            class="font-medium text-sm text-gray-700 block"
+            alt="Profile picture of user 1cfebbca-d775-4e0c-9787-d8ee174f3464"
+            src="https://example.org/pictures/25a84175-62d6-4560-b548-cd84aa8eca80"
+          />
+          <img
+            class="text-base text-teal-50 mt-6 max-w-3xl"
+            alt="Profile picture of user 4f09aff8-fd08-4389-892c-ff049000a8fb"
+            src="https://example.org/pictures/a91d65e2-efcc-4b29-889b-e51a6742cb07"
+          />
+          <a href="#" target="_blank" rel="noreferrer" class="text-base">
+            This is link b631c586-cd8b-4ce6-bfe5-b6d8653f6c89
+          </a>
+        </li>
+        <li class="text-yellow-400">
+          <img
+            class="text-gray-400 hover:text-gray-500 p-2 ml-2"
+            alt="Profile picture of user 2502afe5-b046-41c5-8067-4cbf0f4ccd1e"
+            src="https://example.org/pictures/7654c4bc-593a-4dbc-b8ca-8c60da284185"
+          />
+          <ul
+            class="ring-white w-2.5 top-0 absolute h-2.5 block rounded-full ring-2 bg-green-400 right-0"
+          >
+            <li class="text-gray-700 hover:bg-gray-50">
+              <ul
+                class="z-10 mt-2 shadow-lg rounded-md ring-1 right-0 w-48 focus:outline-none bg-white ring-opacity-5 absolute py-1 ring-black origin-top-right"
+              >
+                <li class="bg-white overflow-hidden relative">
+                  This is item 7a1a294d-2340-4699-9829-b0b1edc4ea48
+                </li>
+                <li class="lg:pr-16">This is item 0157d5f4-317e-48fe-946a-7ba26aa5a47f</li>
+                <li class="sm:block hidden">This is item 9824b93a-b740-47f4-916e-f3a2487627fe</li>
+                <li class="sr-only">This is item 5ac6212c-887b-4534-92e3-852d8099fdef</li>
+              </ul>
+              <img
+                class="max-w-7xl mx-auto"
+                alt="Profile picture of user 810ce340-e312-4595-a72a-e3914a11847e"
+                src="https://example.org/pictures/c7b53da2-5dc4-4aae-b4b3-e423294d6156"
+              />
+              <a
+                href="#"
+                rel="noreferrer"
+                class="bg-gray-200 grid-cols-7 border-gray-300 leading-6 border-b text-xs font-semibold text-gray-700 lg:flex-none grid gap-px text-center"
+              >
+                This is link d13c6ec0-4535-49e6-9011-be5125d6dcd8
+              </a>
+            </li>
+            <li class="flex justify-between">
+              <ol class="border-gray-100 border-t text-center py-10">
+                <li
+                  class="text-indigo-600 border-gray-300 rounded flex-shrink-0 w-4 h-4 focus:ring-indigo-500"
+                >
+                  This is item e4dca4c2-02bf-4007-9647-d16914039563
+                </li>
+                <li class="bg-gray-50 px-6 sm:p-16 py-16 rounded-2xl">
+                  This is item 8473b144-f3a0-48ab-8c0e-517df8d30af0
+                </li>
+              </ol>
+              <a href="#" target="_blank" rel="noreferrer" class="h-auto block w-5 flex-shrink-0">
+                This is link 31aaded2-11b1-4651-9037-6e094b93a071
+              </a>
+            </li>
+          </ul>
+          <img
+            class="focus:z-10 text-gray-900 py-1.5 hover:bg-gray-100 bg-white"
+            alt="Profile picture of user dc9c1801-333e-454b-aba1-824f406f9964"
+            src="https://example.org/pictures/9b7ea21c-e795-439a-9314-a536945ac9f0"
+          />
+          <a href="#" target="_blank" rel="noreferrer" class="w-full">
+            This is link 7bd9be86-8d92-4d57-878e-78915baf38ce
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </main>
+  <main class="max-w-7xl mx-auto">
+    <input type="email" class="text-sm block text-gray-700 font-medium" />
+    <ul class="bg-gray-50 text-gray-400 focus:z-10 rounded-bl-lg py-1.5 hover:bg-gray-100">
+      <li class="text-sm sm:block hover:text-indigo-500 font-medium hidden text-indigo-600">
+        <img
+          class="text-sm ease-out relative font-medium transition-colors duration-200 justify-center items-center flex z-10"
+          alt="Profile picture of user 408161b7-928f-4f66-9d16-606cec3ca6d3"
+          src="https://example.org/pictures/04bcd948-ab49-4a9b-a068-2359e5457303"
+        />
+        <ol class="h-6 w-6">
+          <li class="text-gray-500 hover:text-gray-600">
+            <a href="#" target="_blank" class="mt-1 space-y-1">
+              This is link b790ec1e-3e1f-4034-964f-1e3f481d8f2c
+            </a>
+            <ul class="bg-gray-100">
+              <li class="truncate">
+                <a href="#" class="sr-only"> This is link 98acc936-def1-44d2-8031-8742275b0278 </a>
+                <img
+                  class="h-8 w-8"
+                  alt="Profile picture of user 4105075b-8ab7-4f56-8797-3bf9d331aba2"
+                  src="https://example.org/pictures/ed4bbfeb-44e9-482d-a13a-25aca153ff98"
+                />
+              </li>
+              <li class="mt-4 text-gray-500 text-xl">
+                <a
+                  href="#"
+                  class="border-gray-200 md:flex border-t pt-8 md:items-center mt-8 md:justify-between"
+                >
+                  This is link 26094828-fec5-4210-91e3-f4f1723591e0
+                </a>
+                <ol class="text-gray-900 text-sm mt-1"></ol>
+                <a href="#" target="_blank" class="mt-1">
+                  This is link 3b65021c-85fc-4b7a-972f-a756a74622cf
+                </a>
+                <img
+                  class="flex"
+                  alt="Profile picture of user 26eea4fb-5743-473c-8c8e-63832d945fae"
+                  src="https://example.org/pictures/99300e36-11ce-466c-aa4d-bd9fec94dace"
+                />
+              </li>
+            </ul>
+            <ul class="text-sm text-warm-gray-500">
+              <li class="-mr-2 -my-2 md:hidden">
+                <ol class="text-base text-gray-900 font-medium"></ol>
+                <img
+                  class="w-6 inline-block ring-white h-6 ring-2 rounded-full"
+                  alt="Profile picture of user b817b708-281a-4ea1-98ee-083f98ff7729"
+                  src="https://example.org/pictures/d5495949-a30d-4e9f-b4f7-5f941ba26622"
+                />
+              </li>
+              <li class="mx-auto max-w-3xl">
+                <ul class="sm:aspect-w-3 aspect-w-3 h-0 aspect-h-2 sm:aspect-h-4"></ul>
+                <ul class="py-1"></ul>
+                <a href="#" target="_blank" rel="noreferrer" class="mt-1">
+                  This is link b0f39a15-a2ec-4670-9f05-d9c19ae686c5
+                </a>
+                <ul class="h-6 w-6"></ul>
+              </li>
+              <li class="justify-between px-4 flex-1 md:px-0 flex">
+                <ol class="text-white w-6 h-6"></ol>
+                <img
+                  class="flex py-4 whitespace-nowrap border-b-2 text-sm px-1 font-medium"
+                  alt="Profile picture of user 95f5726f-d6ea-4c79-9a2e-4b9568f04f5c"
+                  src="https://example.org/pictures/6abdb20b-d777-4e86-8902-5d3d06c9e31c"
+                />
+                <ul
+                  class="focus:z-10 relative py-1.5 hover:bg-gray-100 text-gray-900 bg-white"
+                ></ul>
+                <ul class="flex items-center"></ul>
+              </li>
+              <li class="bg-white">
+                <ol class="flex-1 mt-6 2xl:block min-w-0 sm:hidden"></ol>
+                <ul
+                  class="sm:divide-x sm:divide-y-0 border-t divide-gray-200 divide-y sm:grid-cols-3 bg-gray-50 border-gray-200 grid grid-cols-1"
+                ></ul>
+              </li>
+              <li class="py-2 text-sm px-4 block">
+                <ul class="bg-black fixed bg-opacity-25 inset-0"></ul>
+                <a href="#" rel="noreferrer" class="sr-only">
+                  This is link 0f81952d-1a38-45e5-94c2-5a0cc529c16e
+                </a>
+                <a href="#" rel="noreferrer" class="sr-only">
+                  This is link 2fba21a7-d22c-4f21-9b88-dffbe6e1a62d
+                </a>
+              </li>
+            </ul>
+            <img
+              class="flex-shrink-0"
+              alt="Profile picture of user 2f64e666-23a8-49f6-88ee-c27d506967fa"
+              src="https://example.org/pictures/4567360d-5ad3-45ef-ab17-45dcbbc6890b"
+            />
+          </li>
+          <li class="bg-white w-12 border border-gray-300 text-gray-300 h-12">
+            <ul class="flex-shrink-0">
+              <li class="md:mt-0 mt-12">
+                <ul class="ml-auto"></ul>
+                <ul class="h-6 w-6"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="hidden lg:space-x-6 lg:flex lg:items-center"
+                >
+                  This is link 4ea8a4b7-550a-4574-93da-cc15935bd2ad
+                </a>
+                <ol class="text-5xl order-1 font-bold tracking-tight text-white"></ol>
+              </li>
+              <li class="border-b-2 py-6 whitespace-nowrap text-sm font-medium">
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="appearance-none focus:border-indigo-500 border-gray-300 py-2 focus:ring-1 shadow-sm text-base min-w-0 px-4 focus:outline-none bg-white placeholder-gray-500 w-full focus:ring-indigo-500 rounded-md text-gray-900 border"
+                >
+                  This is link 118ab9f5-96be-487f-99ac-4a0632873bd1
+                </a>
+                <img
+                  class="border bg-white hover:text-gray-500 md:hover:bg-gray-50 text-gray-400 rounded-r-md py-2 justify-center focus:relative md:w-9 border-gray-300 border-l-0 md:px-2 pr-3 items-center flex pl-4"
+                  alt="Profile picture of user 578fcdd4-9de4-478f-968c-2dca34f6bc24"
+                  src="https://example.org/pictures/a40e0cc5-f883-4fea-8d4d-623b6d343c86"
+                />
+                <img
+                  class="border-gray-300 shadow-sm focus:border-indigo-500 w-full sm:text-sm rounded-md block focus:ring-indigo-500"
+                  alt="Profile picture of user 563b00a1-c261-43b6-83d3-d0659cf5fc88"
+                  src="https://example.org/pictures/7939bbe8-a29c-439c-b796-7f3dd5d5a723"
+                />
+              </li>
+              <li class="shadow top-1/2 absolute inset-0 bg-white">
+                <ol class="h-8 w-auto"></ol>
+                <ul class="text-gray-900 hover:underline font-medium text-sm"></ul>
+              </li>
+            </ul>
+            <img
+              class="mt-2 text-4xl font-bold tracking-tight"
+              alt="Profile picture of user 5f4f7ef4-4425-4d4d-8569-2c541d6bbb7b"
+              src="https://example.org/pictures/97fd53ed-d920-43b2-91d3-b540631a168e"
+            />
+            <img
+              class="items-center hover:text-gray-500 flex-none p-1.5 flex justify-center -my-1.5 text-gray-400"
+              alt="Profile picture of user 56afb519-e3b3-44a3-889d-3ad17239b322"
+              src="https://example.org/pictures/6639937a-8846-4821-b005-d681e82c1e9d"
+            />
+            <img
+              class="sm:p-6 px-4 py-5"
+              alt="Profile picture of user 0dbb0e62-d605-4245-a44a-f0615cd72094"
+              src="https://example.org/pictures/2699978f-599d-4567-a27e-07c4868d85cd"
+            />
+          </li>
+          <li class="border-b border-gray-200">
+            <ul class="xl:col-span-8 lg:col-span-7 flex-auto">
+              <li class="rounded-lg absolute w-1/2 h-full right-0">
+                <img
+                  class="shadow-xl w-full pb-12 bg-white flex-col overflow-y-auto flex relative max-w-xs"
+                  alt="Profile picture of user e27e6370-5f17-4e71-a312-e075f1031083"
+                  src="https://example.org/pictures/1ae667ee-ba64-48fe-87af-031da228e6a9"
+                />
+              </li>
+              <li class="hover:text-gray-900 text-gray-600 bg-white hover:bg-gray-50">
+                <img
+                  class="flex pt-2 items-center pb-3 flex-col"
+                  alt="Profile picture of user 5f81654c-3cb8-44d2-ac34-0b927ecc8da1"
+                  src="https://example.org/pictures/ac0d6ab2-17de-4f76-8f1c-23a69ee7ce65"
+                />
+                <img
+                  class="py-1"
+                  alt="Profile picture of user 050b1241-908d-44ad-bec1-bf37aab77dbb"
+                  src="https://example.org/pictures/a806a183-c9e5-4cb1-9431-5574d7d80efc"
+                />
+                <a
+                  href="#"
+                  class="rounded-md border-gray-300 focus:border-sky-500 sm:text-sm block w-full focus:ring-sky-500 shadow-sm"
+                >
+                  This is link 598142f3-27b5-4eee-aefc-8670da31ddeb
+                </a>
+                <ol class="font-medium text-rose-500"></ol>
+              </li>
+              <li
+                class="flex items-center mx-auto text-gray-400 hover:bg-gray-200 h-8 rounded-full w-8 justify-center"
+              >
+                <a href="#" rel="noreferrer" class="py-2 border-t border-gray-200">
+                  This is link 6c8ff809-8a45-4c1c-bfa4-15574cc76092
+                </a>
+                <ul class="mt-10"></ul>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="max-w-md mt-3 mx-auto md:max-w-3xl text-gray-500 md:mt-5 sm:text-xl text-lg"
+                >
+                  This is link 48739a20-035d-4a99-8456-672f6e7b4c88
+                </a>
+              </li>
+            </ul>
+            <a href="#" class="border border-opacity-10 border-black rounded-full">
+              This is link 510f2b0d-6d39-4eb5-87eb-f9910e922e87
+            </a>
+          </li>
+        </ol>
+      </li>
+      <li class="pt-10">
+        <a href="#" class="flex px-5 items-center">
+          This is link 09deae38-cead-47ae-94ee-ac9417965cc1
+        </a>
+        <a href="#" target="_blank" class="flex-shrink-0 ml-4">
+          This is link d30fe18f-7ffa-425b-8b37-7ff35869199b
+        </a>
+        <a href="#" target="_blank" rel="noreferrer" class="w-6 h-6">
+          This is link 9ec6c100-9f5f-4292-8fa6-2bd436097bf2
+        </a>
+      </li>
+      <li class="aspect-w-3 overflow-hidden rounded-lg aspect-h-2">
+        <ol class="gap-x-6 lg:grid-cols-4 xl:gap-x-8 grid-cols-1 grid gap-y-10 sm:grid-cols-2 mt-6">
+          <li class="divide-gray-200 divide-y">
+            <img
+              class="md:px-10 md:text-lg w-full text-white py-3 items-center flex px-8 bg-indigo-600 rounded-md hover:bg-indigo-700 justify-center font-medium border-transparent text-base md:py-4 border"
+              alt="Profile picture of user 3861e56f-8744-4035-bf67-cf29880ad28e"
+              src="https://example.org/pictures/a41e1a9a-0d5a-4054-b5e4-1329359422e7"
+            />
+            <ol class="sm:py-24 max-w-7xl lg:px-8 mx-auto sm:px-6 py-16 px-4">
+              <li class="text-gray-500 text-sm ml-3">
+                <img
+                  class="font-medium text-gray-900 text-sm"
+                  alt="Profile picture of user 45d25ac0-ebe8-4b7f-9ac0-0b33eb945047"
+                  src="https://example.org/pictures/d106b7d5-f164-4f7b-b680-dc23ca49ff09"
+                />
+                <ul
+                  class="rounded-md select-none cursor-default group px-3 items-center py-2 flex"
+                ></ul>
+                <ul class="border-b border-gray-200"></ul>
+              </li>
+              <li
+                class="group text-sm focus:outline-none items-center flex focus:ring-2 text-left pr-1 focus:ring-indigo-500 rounded-md pl-2 font-medium py-2 w-full"
+              >
+                <img
+                  class="truncate"
+                  alt="Profile picture of user f1b9ca19-7c2b-4c32-acd9-fe952e407391"
+                  src="https://example.org/pictures/aff1741e-5152-46d7-b472-3674d26cd2e1"
+                />
+              </li>
+              <li class="space-y-1">
+                <a href="#" rel="noreferrer" class="whitespace-nowrap">
+                  This is link 6b1a7a45-01ea-49a5-b09e-6ca87ca1053a
+                </a>
+                <a href="#" target="_blank" rel="noreferrer" class="pt-6">
+                  This is link 3705e208-ba39-4002-9ccb-413437b5d607
+                </a>
+                <ol
+                  class="px-4 md:grid lg:px-8 bg-white sm:py-24 md:place-items-center sm:px-6 min-h-full py-16"
+                ></ol>
+              </li>
+            </ol>
+            <ol class="text-gray-400 h-5 w-5">
+              <li class="font-medium text-sm text-gray-500">
+                <ul
+                  class="px-3 rounded-md text-sm text-indigo-200 hover:text-white py-2 font-medium"
+                ></ul>
+                <ul class="mt-4"></ul>
+              </li>
+              <li class="text-sm mt-5">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="flex ml-8 flex-grow lg:ml-4 lg:flex-grow-0 mt-4 flex-shrink-0"
+                >
+                  This is link 49f46650-a1f2-46c1-aa9b-dcc419ef0c17
+                </a>
+                <ul class="text-base font-medium text-gray-900 hover:text-gray-700 rounded-md"></ul>
+                <ol class="flex inset-0 z-40 fixed"></ol>
+              </li>
+            </ol>
+            <a href="#" target="_blank" class="flex items-start">
+              This is link e850108f-536c-435c-9c21-9b31a070dd07
+            </a>
+          </li>
+          <li
+            class="rounded-md focus:ring-indigo-500 focus:ring-2 hover:text-gray-500 text-gray-400 bg-white"
+          >
+            <img
+              class="relative sm:px-6 max-w-md px-4 lg:px-0 sm:max-w-3xl mx-auto"
+              alt="Profile picture of user 6c2a3458-15da-44c7-80d0-048983ce02ae"
+              src="https://example.org/pictures/ae4f949b-f03a-4743-9315-a17b7482d3fb"
+            />
+          </li>
+          <li class="lg:pl-9">
+            <ol class="font-medium text-gray-700 block text-sm">
+              <li class="justify-center items-center rounded-full w-7 flex mx-auto h-7">
+                <a href="#" class="bg-blue-50 p-4 rounded-md">
+                  This is link c3fd504d-5784-4c86-a97c-243bcd21b142
+                </a>
+                <ul
+                  class="focus:border-indigo-500 border-gray-300 w-full sm:text-sm focus:ring-indigo-500 rounded-md block shadow-sm"
+                ></ul>
+                <ol class="w-7 h-7 justify-center flex rounded-full items-center mx-auto"></ol>
+              </li>
+              <li class="font-medium ml-3 truncate text-white">
+                <ol class="px-6 mx-auto max-w-xl lg:mx-0 lg:max-w-none lg:py-16 lg:px-0"></ol>
+              </li>
+              <li
+                class="focus:outline-none items-center focus:ring-offset-2 group inline-flex bg-white text-base font-medium hover:text-gray-900 rounded-md focus:ring-blue-500 focus:ring-2"
+              >
+                <img
+                  class="gap-4 lg:grid-cols-4 grid-cols-4 grid sm:grid-cols-8"
+                  alt="Profile picture of user 7cc8cfb3-e86c-4c4e-9417-b909d49e8e00"
+                  src="https://example.org/pictures/4f6345ce-34a5-4de8-a448-ec8db278f5d2"
+                />
+                <ol
+                  class="text-white text-3xl mt-2 lg:text-5xl font-bold sm:text-4xl tracking-tight"
+                ></ol>
+                <a href="#" class="h-12"> This is link c19f6b12-7e2e-4fdd-93bd-802463bf4a5f </a>
+              </li>
+              <li class="px-4 w-1/4">
+                <ul class="px-3 py-2 bg-white relative"></ul>
+                <ol class="text-base text-gray-900 font-medium"></ol>
+                <img
+                  class="lg:hidden"
+                  alt="Profile picture of user 68464872-37d4-43f4-9cbd-29ef555f75d9"
+                  src="https://example.org/pictures/3afb30af-7355-4109-83fa-1384d6197243"
+                />
+                <a href="#" rel="noreferrer" class="bg-white w-full h-48">
+                  This is link c3497294-9815-4a85-b9a3-bbfaa0646501
+                </a>
+              </li>
+            </ol>
+            <a href="#" rel="noreferrer" class="w-6 h-6">
+              This is link 65935e6c-edfc-4dc7-b94b-84f37d085ea1
+            </a>
+          </li>
+          <li class="-mr-2 sm:hidden flex">
+            <img
+              class="rounded-lg border-2 absolute -inset-px pointer-events-none"
+              alt="Profile picture of user 965d6ca6-5530-41cd-8498-bc0444dc59e8"
+              src="https://example.org/pictures/76f51da0-9bac-481f-b147-f0e76e43262f"
+            />
+            <img
+              class="relative"
+              alt="Profile picture of user 86ff3184-a41b-4e0b-bbca-d220fc29a36b"
+              src="https://example.org/pictures/36f87a8c-4215-4a20-9f22-90bb556f475d"
+            />
+            <ul class="w-7 mx-auto rounded-full flex items-center justify-center h-7">
+              <li class="text-sm text-gray-600 ml-3">
+                <a href="#" target="_blank" rel="noreferrer" class="h-6 mr-4 w-6 flex-shrink-0">
+                  This is link b33047d9-6337-446e-af6a-5fbcd785c7bb
+                </a>
+              </li>
+              <li class="ml-3 text-sm font-medium block">
+                <ul class="py-20 border-gray-200 border-t"></ul>
+              </li>
+              <li class="block text-red-900">
+                <ul class="sr-only"></ul>
+                <a href="#" target="_blank" class="divide-gray-200 -my-6 divide-y">
+                  This is link 4c838057-6dd5-44ab-a374-c085e96f82c7
+                </a>
+                <a href="#" target="_blank" rel="noreferrer" class="flex-auto font-semibold">
+                  This is link 8fadbe98-40e1-40f9-9fc1-e1e62a1567fd
+                </a>
+                <ul class="w-auto h-5"></ul>
+              </li>
+              <li class="px-5 flex pt-4 justify-between items-center">
+                <img
+                  class="mt-12"
+                  alt="Profile picture of user 9822fe2d-374b-46c4-8eff-882cf1acfd8b"
+                  src="https://example.org/pictures/6156563e-40ec-4b8d-9abd-a03240cdd7c9"
+                />
+                <ul class="sr-only"></ul>
+                <ul class="pt-6"></ul>
+                <ul class="flex flex-col justify-between space-y-4"></ul>
+              </li>
+            </ul>
+            <a href="#" rel="noreferrer" class="items-center justify-between w-full flex lg:w-auto">
+              This is link 72480259-4e39-41d1-a215-8ab77e936396
+            </a>
+          </li>
+        </ol>
+        <ul class="text-gray-400 h-5 w-5">
+          <li class="flex inset-0 fixed z-40">
+            <a href="#" class="bg-white top-0 flex h-16 flex-shrink-0 z-10 sticky shadow">
+              This is link 36175fd7-f33b-4581-8fd5-34431eb74d76
+            </a>
+            <a href="#" class="text-white lg:flex-none text-sm flex-1 font-medium text-center">
+              This is link 26f601db-5607-48f9-ba66-50dc923abe12
+            </a>
+            <ol class="flex flex-shrink-0 justify-center items-center w-16">
+              <li class="font-medium text-sm hover:text-gray-900 relative text-gray-500">
+                <img
+                  class="bg-white"
+                  alt="Profile picture of user 390c464c-0412-4e55-be51-424126218ec4"
+                  src="https://example.org/pictures/c3509d5e-57d5-4783-b2c8-f020aa9cc2b9"
+                />
+              </li>
+              <li class="w-6 h-6">
+                <ol class="bg-gray-900"></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="hover:bg-gray-50 border-gray-300 focus:relative px-3.5 border-b font-medium text-sm hover:text-gray-900 text-gray-700 border-t hidden md:block bg-white"
+                >
+                  This is link 0317bb0a-0e0e-4b62-981b-53bd79c0b68b
+                </a>
+                <ol class="text-white font-bold tracking-tight text-3xl sm:text-4xl"></ol>
+              </li>
+              <li class="bg-gray-200 left-5 h-full top-5 absolute w-0.5 -ml-px">
+                <img
+                  class="bg-white inline-flex focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hover:bg-gray-50 px-4 text-sm border focus:outline-none items-center text-gray-700 shadow-sm py-2 font-medium relative border-gray-300 rounded-md"
+                  alt="Profile picture of user 2af6ec01-0c69-443c-bb8b-58f95facd744"
+                  src="https://example.org/pictures/bef2bbe1-8182-45cc-9213-f7279a8cb3d9"
+                />
+                <img
+                  class="mt-8"
+                  alt="Profile picture of user 0b14d645-8210-40b9-a474-07123cf0a6c9"
+                  src="https://example.org/pictures/7988af5b-b8cf-4325-a532-5e43fb95629e"
+                />
+                <img
+                  class="lg:max-w-none max-w-2xl mx-auto"
+                  alt="Profile picture of user cb882d31-904e-46d1-a0bc-1d5bf99d068b"
+                  src="https://example.org/pictures/5330f433-49be-4f5a-ad65-7403ac6e0e25"
+                />
+                <img
+                  class="text-sm font-medium flex-auto space-y-1"
+                  alt="Profile picture of user f366b3ae-c8b0-46d6-897d-dc957264f6ca"
+                  src="https://example.org/pictures/630cce6d-ed62-44b0-8bd8-a766a7f0a020"
+                />
+              </li>
+            </ol>
+          </li>
+          <li class="text-sm text-gray-500 flex items-center">
+            <ul class="w-6 h-6">
+              <li class="text-center border-gray-100 border-t py-10">
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="max-w-7xl sm:px-2 mx-auto lg:px-4 sm:py-32 py-24"
+                >
+                  This is link 92da345e-89bc-429f-b6d9-8a630c76b5ea
+                </a>
+                <a href="#" target="_blank" class="flex items-center h-16 justify-between">
+                  This is link d705ea77-6d53-4f1c-a110-19675eaccad6
+                </a>
+              </li>
+              <li class="flex lg:hidden flex-1 items-center">
+                <ul class="text-base hover:text-gray-700 font-medium text-gray-900"></ul>
+                <ul class="relative"></ul>
+              </li>
+              <li class="rounded-full items-center h-7 flex mx-auto justify-center w-7">
+                <img
+                  class="mx-auto max-w-7xl"
+                  alt="Profile picture of user 9df027c1-ef42-4748-b4c4-ea81ee53136e"
+                  src="https://example.org/pictures/fdb392e6-ba15-4787-b339-23eef1572d9a"
+                />
+                <img
+                  class="flex space-x-4"
+                  alt="Profile picture of user 524ec1d7-20e7-4150-9b74-d7e92d2a7339"
+                  src="https://example.org/pictures/0ab7b62c-3a61-4496-b375-9f87404d5119"
+                />
+                <ul class="bg-gray-200 ml-2 rounded-full text-xs px-2 py-0.5 text-gray-600"></ul>
+              </li>
+              <li class="hover:text-indigo-500 text-indigo-600">
+                <img
+                  class="bg-white text-gray-200 w-full h-8 border-dashed border-gray-300 border-2 rounded"
+                  alt="Profile picture of user 46c15ff6-12e8-43e5-bcd6-eb21004ca3fa"
+                  src="https://example.org/pictures/45fcbaea-cae9-467b-829a-d301205c3fe1"
+                />
+                <img
+                  class="font-semibold relative text-white text-lg"
+                  alt="Profile picture of user 97a79af6-2701-498f-90a9-37aaca3611b9"
+                  src="https://example.org/pictures/46f17f8e-de15-41fc-bf6d-b8f919eda7c7"
+                />
+                <ol class="hover:text-gray-500 p-2 text-gray-400 lg:ml-4"></ol>
+                <ul
+                  class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                ></ul>
+              </li>
+              <li class="mt-3 sm:mt-0 sm:ml-4">
+                <ol class="space-y-10"></ol>
+              </li>
+            </ul>
+            <ul class="font-medium text-white">
+              <li class="w-auto h-8">
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user c21a06a4-c306-43e6-9845-6cde67a2296c"
+                  src="https://example.org/pictures/3883afa2-86df-4ce9-8b64-8b3b8b24c129"
+                />
+                <ol class="items-center flex"></ol>
+                <ul class="text-gray-700 text-sm font-medium block"></ul>
+                <ul class="text-gray-900"></ul>
+              </li>
+              <li class="block flex-1 min-w-0">
+                <ul class="p-8 bg-white"></ul>
+              </li>
+              <li class="shadow sm:flex-shrink-0 mt-3 rounded-md sm:mt-0 sm:ml-3">
+                <ul
+                  class="items-center text-gray-900 mx-auto flex hover:bg-gray-200 rounded-full w-8 justify-center h-8"
+                ></ul>
+                <ul class="px-8 max-w-7xl mx-auto"></ul>
+                <ol class="sm:space-x-8 sm:ml-6 sm:flex hidden"></ol>
+              </li>
+            </ul>
+            <a href="#" rel="noreferrer" class="flex items-start">
+              This is link a0d39ac8-0afb-4403-a9f6-0866f432864a
+            </a>
+          </li>
+          <li class="grid-cols-3 grid gap-3 sm:grid-cols-6">
+            <ol class="bg-white hover:bg-gray-100 py-1.5 text-gray-900 focus:z-10">
+              <li class="h-6 w-6">
+                <a href="#" class="inset-0 absolute">
+                  This is link 7276b5bf-c76d-4a3c-a3dc-48c0a223eed7
+                </a>
+                <img
+                  class="bg-gray-50 hover:bg-gray-100 py-1.5 text-gray-400 focus:z-10 rounded-bl-lg"
+                  alt="Profile picture of user 41984f1b-f1cf-4cb8-a891-ce1bce4cc4a6"
+                  src="https://example.org/pictures/5d4cc12a-11fe-4e9c-9bed-005d77d2ff55"
+                />
+              </li>
+              <li class="justify-between flex flex-1 mt-4 items-end">
+                <ol class="mt-6 gap-y-6 grid-cols-3 sm:grid-cols-4 gap-x-4 grid"></ol>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="gap-12 lg:col-span-2 grid-cols-1 grid sm:gap-x-8 mt-8 sm:gap-y-12 lg:mt-0 sm:grid-cols-2"
+                >
+                  This is link 5fd33191-2f22-4611-b4a8-372b88826b0b
+                </a>
+                <ol class="text-white font-semibold"></ol>
+              </li>
+              <li class="text-sm">
+                <img
+                  class="pt-6 px-6 pb-8"
+                  alt="Profile picture of user 9d16db76-e440-4cdf-8607-a4a904e791f2"
+                  src="https://example.org/pictures/c0b372ad-7447-48c0-95fa-5d11df94358b"
+                />
+                <a href="#" rel="noreferrer" class="flex items-center h-5">
+                  This is link 99ca2ea8-67d8-4db8-aa28-4cda44e5230c
+                </a>
+              </li>
+              <li class="font-medium block text-gray-900 text-sm">
+                <a href="#" rel="noreferrer" class="flex-col flex">
+                  This is link 5f1adbde-041e-4ffd-a4df-5c6ce998c690
+                </a>
+                <ul class="mx-auto max-w-xl w-full"></ul>
+              </li>
+              <li
+                class="right-0 xl:transform-none mb-48 translate-x-1/2 bottom-0 lg:top-0 transform lg:mb-0 absolute xl:translate-x-0 text-gray-700 lg:mt-28"
+              >
+                <img
+                  class="pt-6 sm:pt-5"
+                  alt="Profile picture of user e0071035-46d5-4c82-8593-3114026e430a"
+                  src="https://example.org/pictures/3a60643b-f5b8-4a3a-93b8-2940c9055799"
+                />
+                <img
+                  class="pt-5 pb-6"
+                  alt="Profile picture of user eab71629-facc-42dc-a3b2-b78e635b6ac2"
+                  src="https://example.org/pictures/7b68896a-e61e-46d3-bf63-f776dfe73088"
+                />
+              </li>
+            </ol>
+            <img
+              class="rounded-md hover:text-indigo-500 focus:outline-none focus:ring-offset-2 focus:ring-2 text-indigo-600 focus:ring-indigo-500 font-medium bg-white"
+              alt="Profile picture of user 74f65803-f972-4b86-9cf8-90ab5ee9add9"
+              src="https://example.org/pictures/7be377a9-0221-45d1-94cb-0ff2a1ff742f"
+            />
+            <img
+              class="pb-12 max-w-7xl mx-auto lg:px-8 px-4 relative pt-20 sm:px-6 lg:py-20"
+              alt="Profile picture of user b47632cc-3c91-42d4-a3e5-2f038f397321"
+              src="https://example.org/pictures/1da553b3-cee2-42a2-92bd-cc6cc9429954"
+            />
+          </li>
+        </ul>
+        <ol class="text-gray-900 text-base font-medium">
+          <li
+            class="bg-indigo-600 ml-6 text-sm focus:outline-none text-white py-2 rounded-md border-transparent font-medium shadow-sm border px-4 hover:bg-indigo-700 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >
+            <ul class="text-red-600">
+              <li class="sm:mt-0 sm:ml-6 sm:w-40 mt-6 sm:flex-none space-y-4">
+                <img
+                  class="w-6 h-6"
+                  alt="Profile picture of user 17c23ce7-e715-442e-b111-37a9d56bd843"
+                  src="https://example.org/pictures/9fe79b4d-083d-4eae-bfde-8baaab451be6"
+                />
+              </li>
+              <li
+                class="sm:pl-16 max-w-full fixed pointer-events-none inset-y-0 right-0 pl-10 flex"
+              >
+                <a href="#" class="mt-12 md:mt-0">
+                  This is link 349f088b-f099-4d80-ad3e-925a340b05ab
+                </a>
+                <a
+                  href="#"
+                  class="absolute rounded text-indigo-600 focus:ring-indigo-500 top-1/2 h-4 sm:left-6 border-gray-300 w-4 -mt-2 left-4"
+                >
+                  This is link 80ed28fe-f80c-4b26-bbd0-19df39ae986e
+                </a>
+              </li>
+              <li class="relative justify-center flex">
+                <img
+                  class="flex items-center justify-between"
+                  alt="Profile picture of user 6e1acb67-244e-446f-8dfe-3e4abbc9a155"
+                  src="https://example.org/pictures/b98b6d95-9928-47a5-b86b-fd6a2d0b844a"
+                />
+                <a href="#" target="_blank" class="lg:pl-8 lg:col-start-2">
+                  This is link f7119b7d-7745-47d5-b6fb-33fca8c0dcc5
+                </a>
+              </li>
+              <li class="sr-only">
+                <ul
+                  class="justify-center text-gray-700 focus:ring-2 focus:ring-offset-2 font-medium px-2.5 border text-sm bg-white focus:ring-indigo-500 flex focus:outline-none items-center hover:bg-gray-50 py-2 shadow-sm border-gray-300 rounded-md"
+                ></ul>
+              </li>
+              <li class="text-gray-900 text-base font-medium">
+                <ul class="sr-only"></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="ml-3">
+            <ol class="sr-only">
+              <li class="w-6 text-gray-400 h-6 mx-auto">
+                <a href="#" class="h-6 flex-shrink-0 text-gray-400 w-6">
+                  This is link bd3fc890-2075-4bf8-878e-a91484bd7c69
+                </a>
+                <a href="#" class="opacity-25 cursor-not-allowed">
+                  This is link 119ab919-8d0d-4ac6-824b-91f8a76a1572
+                </a>
+                <ol class="bg-gray-600 w-px h-6"></ol>
+                <img
+                  class="flex-col min-h-0 flex-1 flex bg-gray-800"
+                  alt="Profile picture of user 06820744-cd28-4b38-835d-20636321e774"
+                  src="https://example.org/pictures/ce41b9b3-b832-492b-aa52-807c01290025"
+                />
+              </li>
+              <li
+                class="absolute justify-center flex h-full inset-0 w-full items-center transition-opacity"
+              >
+                <ul class="border-gray-200 border-dashed border-2 h-full"></ul>
+              </li>
+              <li
+                class="absolute h-12 bg-indigo-500 w-12 rounded-xl justify-center flex items-center text-white"
+              >
+                <a href="#" class="text-sm"> This is link 262d1566-f451-4c81-b573-28706bdfccd3 </a>
+                <img
+                  class="align-middle min-w-full py-2 inline-block"
+                  alt="Profile picture of user de4492f8-269c-4054-b0e7-cb897170f035"
+                  src="https://example.org/pictures/83e26174-1996-49b9-9db2-25b352c0b846"
+                />
+                <img
+                  class="sm:px-6 lg:px-8 px-4 bg-white py-6"
+                  alt="Profile picture of user 4de4cab5-eabd-4703-bfa0-5daccb52154f"
+                  src="https://example.org/pictures/06044e80-2daf-4f2b-b862-920608b8ff0c"
+                />
+                <ul class="space-y-4 top-6 sticky"></ul>
+              </li>
+              <li class="gap-x-8 grid gap-y-10 grid-cols-2">
+                <img
+                  class="font-medium text-base text-white"
+                  alt="Profile picture of user eb03eff3-8ed1-4936-a4fc-e9114067da2c"
+                  src="https://example.org/pictures/024174ba-dd7d-4c9d-8d96-ba8581e26f97"
+                />
+                <ul class="mt-2 sm:mt-0 sm:ml-4"></ul>
+              </li>
+              <li class="ml-4 h-5 group-hover:text-gray-500 w-5 text-gray-400">
+                <ul class="absolute top-0 right-0"></ul>
+                <ul
+                  class="items-center py-0.5 inline-flex font-medium border hover:bg-gray-50 border-gray-300 leading-5 bg-white text-gray-700 text-sm px-2.5 rounded-full shadow-sm"
+                ></ul>
+                <a href="#" class="py-6 space-y-12 px-4">
+                  This is link e900e102-0160-4c02-be9e-087d4d4f1cda
+                </a>
+              </li>
+            </ol>
+            <ol class="fixed overflow-hidden inset-0">
+              <li
+                class="focus:border-indigo-500 w-full rounded-md max-w-lg sm:max-w-xs sm:text-sm border-gray-300 shadow-sm focus:ring-indigo-500 block"
+              >
+                <ul class="shadow-md"></ul>
+                <ul class="text-sm font-bold text-gray-900 mt-10"></ul>
+              </li>
+              <li class="bg-gray-100">
+                <ol class="space-y-6 mt-6"></ol>
+              </li>
+              <li class="lg:py-5 lg:ml-4 lg:pr-0.5 hidden lg:flex lg:items-center">
+                <img
+                  class="bg-gray-50 sm:rounded-lg overflow-hidden"
+                  alt="Profile picture of user e3139d17-1e83-4cc5-ac33-5538775b708c"
+                  src="https://example.org/pictures/79d52c1e-d235-4909-b9c5-fad27e40ec69"
+                />
+                <ol class="justify-center h-7 rounded-full w-7 items-center flex mx-auto"></ol>
+                <ul class="relative"></ul>
+              </li>
+              <li class="text-base">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="sm:px-6 px-4 mx-auto lg:px-8 max-w-7xl"
+                >
+                  This is link fbda274b-1140-422d-9d5c-5ed81d6536b5
+                </a>
+              </li>
+            </ol>
+            <ul class="space-y-1 mt-3 px-2">
+              <li class="text-sm">
+                <ul class="h-5 text-yellow-400 w-5"></ul>
+                <ul class="mt-4 sm:mt-0"></ul>
+              </li>
+              <li class="lg:text-center lg:mx-auto max-w-2xl">
+                <ul class="items-center flex"></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="text-yellow-400">
+            <ol class="h-full sm:h-full sm:w-full w-full object-center object-cover">
+              <li class="block truncate">
+                <a href="#" rel="noreferrer" class="sm:col-span-9 col-span-8">
+                  This is link a9b053e5-e142-4e3c-aeb0-3dd14acdb3b6
+                </a>
+              </li>
+              <li class="text-gray-400 ml-2 h-5 w-5">
+                <ol class="text-white h-6 w-6"></ol>
+              </li>
+              <li class="-mt-4 absolute left-0 top-1/2">
+                <ol class="text-base hover:text-gray-700 font-medium text-gray-900"></ol>
+                <img
+                  class="hover:bg-gray-100 focus:z-10 py-1.5 bg-white"
+                  alt="Profile picture of user 46656e04-add1-40be-ad39-ff81105cf0cb"
+                  src="https://example.org/pictures/7301abff-9320-4c15-a156-be4587db74b8"
+                />
+              </li>
+            </ol>
+          </li>
+          <li
+            class="ring-8 ring-white bg-gray-400 items-center justify-center flex h-10 rounded-full w-10"
+          >
+            <img
+              class="bg-white focus:ring-indigo-500 border-gray-300 focus:outline-none w-full text-gray-900 py-2 placeholder-gray-500 min-w-0 rounded-md focus:ring-1 text-base px-4 appearance-none border shadow-sm focus:border-indigo-500"
+              alt="Profile picture of user 659a703a-2f70-481b-b15f-5e25da8f4223"
+              src="https://example.org/pictures/f8091ae6-5643-4865-83e1-70b1d9055cdd"
+            />
+            <ul class="bg-gray-100">
+              <li class="xl:col-span-2 lg:static md:inset-y-0 md:absolute md:left-0 flex">
+                <ol class="text-indigo-600 hover:text-indigo-500 font-medium"></ol>
+                <ol class="py-10"></ol>
+                <ol class="rounded-full flex w-7 mx-auto h-7 justify-center items-center"></ol>
+                <ol class="flex-none h-6 w-6 text-green-500"></ol>
+              </li>
+              <li class="space-y-4 mt-4">
+                <ol class="py-2"></ol>
+                <img
+                  class="pt-5 pb-6"
+                  alt="Profile picture of user 32edf52b-f47e-46e1-bc52-22384e015495"
+                  src="https://example.org/pictures/57a046b9-4599-4604-99ff-875cd795b911"
+                />
+              </li>
+            </ul>
+            <ul class="focus:z-10 bg-white hover:bg-gray-100 py-1.5">
+              <li class="md:flex-col mt-6 md:flex-grow md:flex">
+                <img
+                  class="bg-white"
+                  alt="Profile picture of user 85158973-3498-4405-9030-271a4dcc8e84"
+                  src="https://example.org/pictures/6d10dec6-baf9-480e-9dee-66167fa1b324"
+                />
+                <a href="#" class="space-x-4 items-center lg:space-x-6 flex">
+                  This is link 6b05d339-e9b3-4ddb-9504-40dd224a59aa
+                </a>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="h-64 border-gray-300 border-2 border-dashed text-gray-200 bg-white w-full"
+                >
+                  This is link 49b983f6-4baf-467f-878b-8d2fb26a4839
+                </a>
+              </li>
+              <li class="inline-flex ml-3 sm:ml-0">
+                <ul class="sr-only"></ul>
+                <ol class="ml-2 font-medium text-sm group-hover:text-gray-800 text-gray-700"></ol>
+                <ul class="pt-10 pb-4 text-center"></ul>
+                <ol
+                  class="focus:outline-none py-2 sm:text-sm w-full block bg-white focus:ring-1 focus:border-rose-500 text-sm focus:placeholder-gray-400 focus:text-gray-900 focus:ring-rose-500 border-gray-300 pl-10 placeholder-gray-500 pr-3 border rounded-md"
+                ></ol>
+              </li>
+              <li class="w-8 rounded-full h-8">
+                <ol class="relative bg-white"></ol>
+              </li>
+            </ul>
+          </li>
+          <li class="hover:text-gray-900 text-gray-500 font-medium">
+            <ol class="mt-6 text-gray-500 text-sm">
+              <li class="font-medium text-sm text-gray-900">
+                <ul
+                  class="focus:ring-2 hover:text-gray-500 items-center focus:ring-inset inline-flex hover:bg-gray-100 focus:outline-none focus:ring-indigo-500 justify-center p-2 text-gray-400 rounded-md bg-white"
+                ></ul>
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user 5b8565e2-003f-4055-8586-2b05f3b63a5c"
+                  src="https://example.org/pictures/6f010e50-16b2-4d9d-a583-ccfd4a234289"
+                />
+                <ol class="leading-5 text-sm text-gray-500"></ol>
+                <a href="#" class="w-6 h-6"> This is link 4f02f720-403c-42fb-baf8-5458beb6ca49 </a>
+              </li>
+              <li class="flex">
+                <ol
+                  class="py-2 focus:border-white border bg-none text-base appearance-none border-transparent focus:outline-none bg-gray-700 rounded-md w-full focus:ring-white pl-3 text-white sm:text-sm pr-10 block"
+                ></ol>
+                <ol class="sr-only"></ol>
+              </li>
+              <li class="mr-3 text-gray-400 h-5 w-5">
+                <a href="#" rel="noreferrer" class="space-y-6 mt-6">
+                  This is link fa9a311d-0a11-48ed-a62f-ce39372fca04
+                </a>
+                <ol class="rounded-full h-7 justify-center flex items-center mx-auto w-7"></ol>
+                <img
+                  class="flex divide-x sm:space-x-6 divide-gray-200 space-x-4 text-sm"
+                  alt="Profile picture of user a3940851-2656-49a4-900c-563d3031343c"
+                  src="https://example.org/pictures/de326840-ec85-4613-aeea-ec02885acfa8"
+                />
+                <ul class="absolute inset-0 h-full w-full object-cover"></ul>
+              </li>
+            </ol>
+            <ul class="h-8 w-auto">
+              <li class="sr-only">
+                <ul class="ml-4"></ul>
+                <a href="#" target="_blank" class="overflow-auto bg-white min-h-[583px]">
+                  This is link 2d772ade-fbf2-4c2b-add7-5023f4ac6920
+                </a>
+                <img
+                  class="sm:not-sr-only sr-only"
+                  alt="Profile picture of user 1429b14b-05bd-4ca2-9ed4-8cab0d6b863d"
+                  src="https://example.org/pictures/f1e3f5a7-2365-43d4-9a6f-2d3704bdeac1"
+                />
+              </li>
+              <li class="relative hover:bg-gray-100 focus:z-10 bg-white py-1.5 text-gray-900">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="sm:overflow-hidden sm:rounded-2xl relative shadow-xl"
+                >
+                  This is link 5feee335-e294-4912-b3a5-6d749c421287
+                </a>
+              </li>
+              <li class="flex h-full space-x-8">
+                <ul class="text-sm"></ul>
+                <img
+                  class="ml-3 leading-7 sm:leading-9 font-bold sm:truncate text-gray-900 text-2xl"
+                  alt="Profile picture of user 14860d4e-4a0e-4031-85cc-1176a9f3af94"
+                  src="https://example.org/pictures/6eb074f9-828a-4d17-9274-db1da7e93e75"
+                />
+                <a href="#" target="_blank" class="font-bold text-gray-900 text-3xl tracking-tight">
+                  This is link 68849011-c82a-4726-8164-fdfa53da8a76
+                </a>
+              </li>
+            </ul>
+            <img
+              class="font-sans"
+              alt="Profile picture of user 188e2f46-015c-4cd7-83e7-a4444203ef94"
+              src="https://example.org/pictures/d67c221e-b40a-4bcf-ad84-545ec90bd651"
+            />
+            <a href="#" class="font-medium block text-sm text-gray-700">
+              This is link 5360ca05-9dec-45fe-8f1a-b0d9f6799d78
+            </a>
+          </li>
+        </ol>
+        <ol class="mt-4 ml-4">
+          <li class="w-6 h-6 justify-center hover:text-gray-500 flex text-gray-400 items-center">
+            <ol class="bg-gray-50 border-gray-200 border-t">
+              <li class="relative text-center py-0 w-1/4">
+                <a href="#" target="_blank" class="border-t border-gray-200 py-2">
+                  This is link 71bee19a-01b5-4f38-a521-199059628bcd
+                </a>
+                <ol class="bg-white"></ol>
+                <ol
+                  class="h-8 text-gray-900 items-center mx-auto flex w-8 justify-center hover:bg-gray-200 rounded-full"
+                ></ol>
+              </li>
+              <li
+                class="rounded-md sm:flex-1 justify-center border items-center hover:bg-gray-50 py-3 focus:outline-none px-4 font-medium relative uppercase sm:py-6 group flex text-sm"
+              >
+                <ol class="group-hover:text-gray-500 flex-shrink-0 w-6 text-gray-400 h-6"></ol>
+              </li>
+              <li class="tracking-tight md:text-6xl text-4xl mt-4 text-white font-bold sm:text-5xl">
+                <ol class="flow-root"></ol>
+                <ol
+                  class="w-full px-8 rounded-md flex focus:outline-none py-3 border-transparent mt-6 focus:ring-2 border focus:ring-indigo-500 text-base hover:bg-indigo-700 items-center justify-center bg-indigo-600 font-medium focus:ring-offset-2 text-white"
+                ></ol>
+                <ol class="mt-1 sm:mt-0"></ol>
+              </li>
+            </ol>
+            <a href="#" rel="noreferrer" class="p-2 text-gray-400 hover:text-gray-500 -m-2">
+              This is link a34090fd-1a70-42e3-9202-01dfee5cc7de
+            </a>
+            <img
+              class="ml-4 flex-shrink-0"
+              alt="Profile picture of user 73e8c19f-9897-4778-80f8-8f7af2e73848"
+              src="https://example.org/pictures/3feabfe7-14ee-4e60-8faa-cedb4ac15b6d"
+            />
+          </li>
+          <li class="lg:grid lg:grid-cols-2 lg:gap-8">
+            <a
+              href="#"
+              target="_blank"
+              rel="noreferrer"
+              class="text-sm text-gray-700 hover:text-gray-800 items-center font-medium flex"
+            >
+              This is link cfaa255a-acf0-4114-a8a0-358f45dcc5a1
+            </a>
+            <ul class="text-gray-900 font-medium text-sm">
+              <li class="lg:col-span-5 mt-6 lg:mt-0">
+                <a href="#" rel="noreferrer" class="flex">
+                  This is link b2500a0a-cb48-42cc-bda3-6db6046c71dd
+                </a>
+                <ol class="mt-6 space-y-6"></ol>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="w-full h-full object-cover group-hover:opacity-75 object-center"
+                >
+                  This is link 6823cf65-9d21-49d7-9d8d-2a130d2b902a
+                </a>
+              </li>
+              <li class="text-white hover:bg-indigo-500 hover:bg-opacity-75">
+                <a href="#" rel="noreferrer" class="font-medium text-sm text-gray-500">
+                  This is link f52d9aaa-cd48-4fa8-a4ed-ca16ae530e2c
+                </a>
+              </li>
+              <li class="p-2 font-medium block text-gray-900 -m-2">
+                <img
+                  class="mt-10 lg:col-start-2 lg:row-span-2 lg:mt-0 lg:self-center"
+                  alt="Profile picture of user 52a58cf9-92e9-4340-ae44-fbd59452c577"
+                  src="https://example.org/pictures/6c2f4a47-b3b9-43df-a99b-4dbdb4dc189e"
+                />
+              </li>
+              <li class="py-1.5 bg-gray-50 hover:bg-gray-100 text-gray-400 focus:z-10">
+                <img
+                  class="h-5 text-gray-300 w-4"
+                  alt="Profile picture of user b4246cf8-73ba-452c-8cee-f0260889e22c"
+                  src="https://example.org/pictures/972b685b-cb4e-492b-8b20-281197588377"
+                />
+                <ol
+                  class="border-b-2 font-medium items-center text-gray-900 text-sm border-indigo-500 pt-1 inline-flex px-1"
+                ></ol>
+                <img
+                  class="mx-auto top-0 inset-0 px-8 absolute h-px max-w-7xl"
+                  alt="Profile picture of user d19bd0fa-28fc-4250-962c-23a94a214b98"
+                  src="https://example.org/pictures/1d3a8128-1573-46f0-929f-16d82c7700e1"
+                />
+              </li>
+            </ul>
+            <a
+              href="#"
+              target="_blank"
+              rel="noreferrer"
+              class="xl:col-span-2 gap-8 grid grid-cols-2"
+            >
+              This is link dfc6f0c1-aa25-4389-b558-8b74c1933a68
+            </a>
+            <a href="#" rel="noreferrer" class="group-hover:text-pink-700 text-pink-500">
+              This is link 0eb76eb8-d467-45b1-b7f8-392eb9a133a8
+            </a>
+          </li>
+          <li class="sr-only">
+            <img
+              class="sr-only"
+              alt="Profile picture of user a268fb10-faa4-482e-89af-86d50b3caa81"
+              src="https://example.org/pictures/842752de-aa5e-4bdb-8252-93fcc2a194dc"
+            />
+            <ul class="grid-cols-2 gap-x-8 gap-y-10 grid py-16">
+              <li class="text-gray-500 text-sm max-w-2xl">
+                <ol class="mt-16"></ol>
+              </li>
+              <li class="rounded-md hover:bg-gray-50 p-3 -m-3 flex items-center">
+                <ul class="rounded-full w-6 h-6 flex-none"></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="w-6 flex-shrink-0 h-6 mr-3 -ml-1">
+            <ol class="sr-only">
+              <li class="truncate">
+                <img
+                  class="text-gray-500"
+                  alt="Profile picture of user 208843ae-b921-45ba-9a0c-f67410b75188"
+                  src="https://example.org/pictures/13f1ec06-8505-4d22-a952-1be35a3f16ee"
+                />
+                <a
+                  href="#"
+                  class="aspect-w-1 group-hover:opacity-75 bg-gray-100 overflow-hidden rounded-lg aspect-h-1"
+                >
+                  This is link e3d10936-d242-4c14-ba65-d415ce474ba0
+                </a>
+                <ul class="py-1.5 bg-white hover:bg-gray-100 focus:z-10"></ul>
+              </li>
+              <li class="px-4 border-gray-200 border-b pb-14 sm:px-0 sm:pb-0">
+                <a href="#" target="_blank" class="space-y-6 border-gray-200 px-4 py-6 border-t">
+                  This is link 1a78096f-aa31-4c54-bada-d5b06225581f
+                </a>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="font-medium text-sm divide-y divide-gray-200 text-gray-900"
+                >
+                  This is link 81daa35f-7a7e-4477-9fb5-0dc819df3100
+                </a>
+                <ol class="text-gray-900 font-semibold items-center justify-center"></ol>
+              </li>
+            </ol>
+            <ol class="text-base text-gray-500 hover:text-gray-900">
+              <li class="w-7 justify-center flex mx-auto items-center h-7 rounded-full">
+                <ul class="object-center object-cover"></ul>
+              </li>
+              <li class="space-y-4">
+                <ol class="items-center flex h-16"></ol>
+                <img
+                  class="ml-2 group-hover:text-gray-500 w-5 h-5"
+                  alt="Profile picture of user 25e46876-c9e1-4f1e-b0b5-65fceb2beed8"
+                  src="https://example.org/pictures/2847c529-1206-46b2-b881-dfbc3f2fc975"
+                />
+              </li>
+              <li class="bg-white">
+                <ul class="object-center object-cover"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="sm:justify-between space-y-1 sm:space-x-6 sm:items-start sm:flex"
+                >
+                  This is link e0c4e425-29fd-4f0f-ba67-a42241df0ea3
+                </a>
+              </li>
+              <li class="h-7 w-7 justify-center flex mx-auto items-center rounded-full">
+                <ul class="sm:col-span-6 col-span-6 lg:col-span-2"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="bg-black fixed inset-0 bg-opacity-25"
+                >
+                  This is link b060d6bc-8659-4bec-88c6-d192cb545c7c
+                </a>
+                <img
+                  class="focus:outline-none text-sm focus:ring-offset-2 bg-white focus:ring-indigo-500 flex rounded-full focus:ring-2"
+                  alt="Profile picture of user d07975cf-7000-472f-a4fd-b5897893e70b"
+                  src="https://example.org/pictures/5ef7750d-fd3a-4b8e-a515-db803e59c14e"
+                />
+              </li>
+            </ol>
+            <a href="#" rel="noreferrer" class="mx-auto max-w-3xl">
+              This is link dd8b26eb-56ed-4260-9bdc-dfa5617d9eaf
+            </a>
+          </li>
+          <li class="flex-shrink-0">
+            <ul class="text-center">
+              <li class="justify-center h-7 rounded-full w-7 mx-auto items-center flex">
+                <img
+                  class="items-center flex"
+                  alt="Profile picture of user d7b6bd7a-7e3d-441d-9757-33584bb3ae4e"
+                  src="https://example.org/pictures/071d3c7b-91ab-4131-a04d-25fe5fdd4f10"
+                />
+                <ol class="-m-3 flex p-3 items-center rounded-lg hover:bg-gray-50"></ol>
+              </li>
+              <li class="font-medium -m-2 block p-2 text-gray-900">
+                <ul class="text-gray-400 hover:text-gray-500"></ul>
+                <ul class="max-w-2xl sm:px-6 lg:max-w-7xl py-24 mx-auto lg:px-8 px-4"></ul>
+                <ol class="sr-only"></ol>
+                <a href="#" class="divide-gray-200 divide-y">
+                  This is link 40090603-1930-4943-8023-8a75daf865f6
+                </a>
+              </li>
+              <li class="rounded text-indigo-600 border-gray-300 w-4 h-4 focus:ring-indigo-500">
+                <ol class="font-semibold hover:text-indigo-500 text-sm block text-indigo-600"></ol>
+                <img
+                  class="py-4 col-start-1 row-start-1"
+                  alt="Profile picture of user a2f60288-6b28-459b-ba97-31168d1dc69a"
+                  src="https://example.org/pictures/eb923dc9-804b-415f-8809-5e7446a3531a"
+                />
+                <ul class="flex-1"></ul>
+                <ol class="mt-2 block"></ol>
+              </li>
+            </ul>
+            <a href="#" target="_blank" rel="noreferrer" class="relative ml-4 flex-shrink-0">
+              This is link d710ebe9-77a1-4c18-9e23-5e1523b387d1
+            </a>
+          </li>
+        </ol>
+      </li>
+      <li class="sr-only">
+        <ul class="space-y-1">
+          <li class="bg-indigo-700">
+            <img
+              class="sr-only"
+              alt="Profile picture of user 4a6c7863-9e0e-4fb9-bc49-512548498be8"
+              src="https://example.org/pictures/873d28b0-4f04-47d2-84c8-0a0f528acfbb"
+            />
+            <ul class="sr-only">
+              <li class="w-14 flex-shrink-0">
+                <ul
+                  class="bg-white overflow-hidden shadow-md ring-black ring-opacity-5 ring-1 rounded-lg"
+                ></ul>
+                <ol class="space-x-4 flex"></ol>
+              </li>
+              <li class="text-gray-400">
+                <ul class="inset-0 fixed overflow-hidden"></ul>
+              </li>
+            </ul>
+            <ul class="flex-1 min-w-0">
+              <li class="text-gray-900 font-medium text-base">
+                <ul class="lg:max-w-none max-w-prose lg:mt-0 relative mt-12 mx-auto text-base"></ul>
+                <img
+                  class="relative flex items-center px-5 py-6 group"
+                  alt="Profile picture of user a567014c-1c2c-49a8-873a-e8f1b60b1005"
+                  src="https://example.org/pictures/83560523-3f42-413b-beee-a33589f12a03"
+                />
+                <ul class="flex items-center"></ul>
+                <ol class="py-2 px-3 rounded-md text-base block font-medium"></ol>
+              </li>
+              <li class="hover:bg-opacity-50 hover:bg-blue-50">
+                <img
+                  class="text-gray-900 text-sm font-medium"
+                  alt="Profile picture of user 3befae86-4759-4477-bcea-8a732b21a039"
+                  src="https://example.org/pictures/1af1d29d-b6e8-4d4d-b6cc-7a49e27dfc0e"
+                />
+                <a href="#" target="_blank" class="flex justify-between items-center">
+                  This is link 5eef875b-5960-4fda-9171-89b4b0a845ca
+                </a>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="z-20 w-14 left-0 pr-2 text-xs leading-5 -ml-14 text-gray-400 text-right sticky -mt-2.5"
+                >
+                  This is link 80ab5f34-d707-4ba5-99fd-c29590a1f59c
+                </a>
+              </li>
+            </ul>
+            <ol class="h-8 hidden w-auto lg:block">
+              <li
+                class="py-6 flex-col relative justify-center flex bg-white flex-1 px-4 text-center focus:z-10"
+              >
+                <a href="#" target="_blank" class="border-indigo-500 text-gray-900">
+                  This is link 83d9a172-5aa1-472c-9d9e-370f375f594e
+                </a>
+                <a
+                  href="#"
+                  class="lg:col-span-4 md:col-start-3 md:mt-0 lg:row-start-1 lg:col-start-9 md:col-span-8 md:row-start-2 mt-12"
+                >
+                  This is link 438f33df-1812-496a-9034-87e59d89760f
+                </a>
+                <ul class="h-5 w-5 text-gray-400"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="col-span-1 lg:col-start-1 md:col-span-2 lg:row-start-1"
+                >
+                  This is link f55b94e4-9695-4099-9563-bb94a73060cc
+                </a>
+              </li>
+              <li class="bg-white shadow">
+                <ul class="text-red-600 w-6 h-6"></ul>
+              </li>
+            </ol>
+          </li>
+          <li class="lg:py-64 mx-auto py-24 max-w-2xl lg:max-w-none">
+            <a href="#" target="_blank" rel="noreferrer" class="text-blue-200 mt-2 text-base">
+              This is link d432fbda-6240-46e5-b166-4361f18175d4
+            </a>
+            <ul class="justify-center flex items-center py-3">
+              <li class="pb-3 pt-2 px-2 space-y-1">
+                <ul class="justify-center text-gray-500 items-center text-sm flex"></ul>
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user b338620b-b983-4419-9a07-27704c2d9cad"
+                  src="https://example.org/pictures/c7c912f7-5994-4480-9b39-b5bbc9ce7172"
+                />
+              </li>
+              <li class="pt-5 pb-4 overflow-y-auto flex-1 h-0">
+                <img
+                  class="w-full object-center object-cover h-full"
+                  alt="Profile picture of user db479c92-c0ed-41ce-a4f1-fb8efd58b570"
+                  src="https://example.org/pictures/433e3199-a609-4d33-888b-7375c0a4b6b6"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="px-4 py-6 border-gray-200 space-y-6 border-t"
+                >
+                  This is link e27e4ca9-f802-4960-bfd7-4a054829ce8f
+                </a>
+                <ol class="border-t px-4 space-y-6 border-gray-200 py-6"></ol>
+                <ul class="text-indigo-600"></ul>
+              </li>
+              <li class="text-sm grid gap-y-10 text-gray-500 gap-x-8 grid-cols-3">
+                <img
+                  class="lg:ml-0 lg:left-1/2 lg:max-w-2xl mt-3 w-screen lg:-translate-x-1/2 absolute max-w-md z-10 -ml-4 transform"
+                  alt="Profile picture of user 64e418f3-cff1-4a58-8385-d771e63a0282"
+                  src="https://example.org/pictures/b6f19bbc-a14b-4471-bcfe-e5cf572898ff"
+                />
+              </li>
+              <li class="max-w-md lg:px-8 mx-auto px-4 lg:max-w-7xl sm:max-w-3xl sm:px-6">
+                <ul class="flex"></ul>
+                <ul class="border-gray-200 mt-5 border-t"></ul>
+                <ol class="mt-4 border-t border-gray-200"></ol>
+              </li>
+            </ul>
+            <ul class="sr-only">
+              <li class="text-sm text-gray-500">
+                <ul
+                  class="py-6 lg:col-span-5 px-4 bg-gray-50 mt-16 sm:p-6 lg:p-8 rounded-lg lg:mt-0"
+                ></ul>
+                <ul class="sr-only"></ul>
+                <img
+                  class="border opacity-0 text-gray-700 px-3 border-gray-300 ml-6 py-2 focus:opacity-100 hover:bg-gray-50 bg-white self-center font-semibold group-hover:opacity-100 shadow-sm rounded-md flex-none"
+                  alt="Profile picture of user 4ff40f2c-17bd-4e4b-a7b2-f683638dc255"
+                  src="https://example.org/pictures/d144a781-9d5a-4b93-a8be-72607d040da2"
+                />
+              </li>
+              <li class="space-x-6 -mb-px flex">
+                <ul class="flex-shrink-0"></ul>
+                <img
+                  class="xl:inline block text-indigo-600"
+                  alt="Profile picture of user 87c39fcf-ab08-4b48-a073-0ab09f338226"
+                  src="https://example.org/pictures/31b30fbf-687a-4d34-9f59-e47d41fba13b"
+                />
+                <img
+                  class="font-medium text-gray-900 w-3"
+                  alt="Profile picture of user 55124bcd-f83a-49b1-8742-1769c3d12e9f"
+                  src="https://example.org/pictures/391cbbad-73be-4d32-afdf-11d26bb5244d"
+                />
+              </li>
+              <li class="ml-4 lg:ml-0 flex">
+                <ol
+                  class="bg-white whitespace-nowrap sm:px-8 w-1/2 focus:ring-2 text-sm focus:outline-none sm:w-auto shadow-sm py-2 relative rounded-md focus:z-10 border-gray-200 font-medium focus:ring-indigo-500 text-gray-900"
+                ></ol>
+                <a href="#" rel="noreferrer" class="sr-only">
+                  This is link a2ee5558-7bac-4c62-b448-afab1de3098b
+                </a>
+              </li>
+              <li class="divide-gray-200 -mt-px flex divide-x">
+                <ul class="h-5 flex absolute items-center"></ul>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="text-gray-400 group-hover:text-gray-500 h-6 w-6 flex-shrink-0"
+                >
+                  This is link cd64a306-0cd8-49f2-801e-a766e5862381
+                </a>
+              </li>
+              <li class="block font-medium text-sm ml-3">
+                <ul
+                  class="w-full text-center shadow border rounded-md text-white font-medium hover:bg-blue-600 py-2 block bg-blue-500 border-transparent px-4"
+                ></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="h-6 w-6">
+            <ol class="px-1 relative">
+              <li class="mt-1 relative shadow-sm rounded-md">
+                <a href="#" target="_blank" class="bg-white py-2">
+                  This is link 2468b331-fd55-471c-b918-c7f7c2808214
+                </a>
+              </li>
+              <li class="flex-shrink-0 items-center justify-center flex absolute">
+                <a
+                  href="#"
+                  target="_blank"
+                  class="-m-2.5 justify-center hover:text-gray-500 h-10 flex rounded-full items-center w-10 text-gray-400"
+                >
+                  This is link d4399a33-e9c2-47a5-9721-2d475da7637e
+                </a>
+              </li>
+              <li class="flex p-2 items-center -m-2 group">
+                <img
+                  class="hover:text-gray-800"
+                  alt="Profile picture of user 005ac02d-efca-4c81-a657-3f4f68c4fcd3"
+                  src="https://example.org/pictures/e76d032a-8aff-47d0-8fe4-79b2bee4198c"
+                />
+                <ol class="min-h-[768px] bg-white"></ol>
+                <img
+                  class="py-1.5 hover:bg-gray-100 text-gray-900 bg-white focus:z-10"
+                  alt="Profile picture of user c949e32b-6aaa-4653-8cd7-60a4ab3d9139"
+                  src="https://example.org/pictures/129058d1-2220-4f91-89e5-d1bc961f98cc"
+                />
+              </li>
+            </ol>
+          </li>
+          <li class="relative inline-block">
+            <ul class="overflow-hidden rounded-lg relative">
+              <li class="py-5 px-4 sm:px-6 bg-white">
+                <img
+                  class="rounded-lg overflow-hidden aspect-h-1 bg-gray-100 aspect-w-1"
+                  alt="Profile picture of user 996ee296-674f-47de-80f0-be24091f36cd"
+                  src="https://example.org/pictures/fae1c2d0-c27b-4617-a846-48c5a02cdb86"
+                />
+                <ol class="h-5 w-5"></ol>
+                <img
+                  class="py-5 font-normal px-6 text-gray-500 text-left text-sm"
+                  alt="Profile picture of user 4cfe27b9-7b4b-4ce3-b990-1a5c64affeae"
+                  src="https://example.org/pictures/28f14ec4-7f56-4987-bbe5-1432cf42d4d7"
+                />
+              </li>
+              <li class="rounded-full w-7 justify-center flex mx-auto items-center h-7">
+                <ol
+                  class="aspect-w-1 aspect-h-1 relative rounded-md bg-gray-100 overflow-hidden group"
+                ></ol>
+                <a href="#" target="_blank" class="lg:col-span-7">
+                  This is link 14428621-8afa-43b1-a387-12410982bdf3
+                </a>
+              </li>
+            </ul>
+            <a
+              href="#"
+              rel="noreferrer"
+              class="lg:left-1/2 lg:ml-0 px-2 sm:px-0 transform -ml-4 mt-3 w-screen max-w-md z-10 lg:-translate-x-1/2 absolute"
+            >
+              This is link a0806520-722c-4fed-bb9d-67daf99c63f9
+            </a>
+          </li>
+          <li class="text-gray-900 font-medium">
+            <ol class="grid grid-cols-7 text-gray-500 leading-6 mt-6 text-xs">
+              <li class="block text-cyan-900">
+                <ol class="md:col-span-1"></ol>
+                <ol class="group rounded-md font-medium px-2 py-2 flex items-center text-base"></ol>
+                <img
+                  class="hover:bg-gray-100 py-1.5 focus:z-10 bg-white"
+                  alt="Profile picture of user 427201fa-fa3e-42d9-ae7c-1bde2dd3f4d7"
+                  src="https://example.org/pictures/eb2085de-a170-4dd3-810b-afe34b75e156"
+                />
+              </li>
+              <li class="pb-4 bg-white flex-1 flex max-w-xs flex-col pt-5 w-full relative">
+                <ul class="items-center w-7 rounded-full h-7 justify-center flex mx-auto"></ul>
+              </li>
+              <li class="p-8 bg-white">
+                <img
+                  class="font-medium leading-6 pb-4 w-1/4 px-6 text-gray-900 text-left text-lg"
+                  alt="Profile picture of user b32a331c-f395-4d80-a91f-5a190d8653f1"
+                  src="https://example.org/pictures/9134fc44-5302-41ca-b124-65fcc2df213c"
+                />
+                <img
+                  class="text-gray-900 -m-3 p-3 text-base flex font-medium rounded-md hover:bg-gray-50 items-center"
+                  alt="Profile picture of user 4ebc152e-c647-4425-9f56-79713c9eb104"
+                  src="https://example.org/pictures/5e344c81-9df2-483d-85f5-d09562de4326"
+                />
+                <ol class="rounded-full h-10 w-10"></ol>
+                <img
+                  class="bg-gray-50"
+                  alt="Profile picture of user eb5a4bb9-0e73-4497-a4fb-0dd562cdb8d6"
+                  src="https://example.org/pictures/31783220-fe3f-4fc3-be8e-56ed5a521c74"
+                />
+              </li>
+            </ol>
+            <img
+              class="p-1 flex-shrink-0 hover:text-gray-500 ml-auto rounded-full focus:ring-2 bg-white text-gray-400 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none"
+              alt="Profile picture of user 5d12bfa6-5785-47f1-8bff-e2078320e7af"
+              src="https://example.org/pictures/51d3483b-b38c-4af1-bc1e-54543916c9ad"
+            />
+            <ol class="absolute flex-shrink-0 right-0 lg:hidden">
+              <li class="space-x-8 h-full justify-center flex">
+                <a
+                  href="#"
+                  target="_blank"
+                  class="py-4 text-sm text-gray-500 whitespace-nowrap px-3"
+                >
+                  This is link 3190f3c3-b72d-4d4e-b162-108de7239045
+                </a>
+                <ol
+                  class="flex items-center right-0 absolute inset-y-0 pointer-events-none pr-2"
+                ></ol>
+                <a href="#" rel="noreferrer" class="text-gray-500 leading-5 text-sm">
+                  This is link c06ac47c-3518-4e00-9de5-fed9eaf639a7
+                </a>
+              </li>
+              <li class="ring-1 ring-opacity-5 ring-black rounded-lg shadow-xl">
+                <img
+                  class="flex flex-col w-20"
+                  alt="Profile picture of user af14a6ca-42cb-4a14-a45f-e0d80b14bd0d"
+                  src="https://example.org/pictures/d6012eac-3b5b-44c7-80c3-599f1f2d80e8"
+                />
+                <ul class="inset-0 overflow-hidden fixed"></ul>
+                <ol class="justify-center mx-auto w-7 rounded-full flex items-center h-7"></ol>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="h-6 group-hover:text-gray-500 mr-2 w-6 flex-shrink-0 text-gray-400"
+                >
+                  This is link 17990967-d2cc-47c8-a41e-2496de3d8c8f
+                </a>
+              </li>
+              <li class="sm:block hidden flex-shrink-0">
+                <a href="#" target="_blank" class="text-gray-500 font-medium text-base">
+                  This is link e6b24a98-81ab-4d7a-a823-37f2f3a1d1a0
+                </a>
+              </li>
+              <li class="flex flex-1 justify-center lg:justify-end">
+                <ol
+                  class="border-gray-100 sm:flex py-10 border-t sm:items-center sm:justify-between"
+                ></ol>
+              </li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+      <li class="mt-6 block text-gray-900 font-medium">
+        <img
+          class="space-y-6"
+          alt="Profile picture of user dffa4e52-91ce-479e-a7e9-abfbc3b2ac5f"
+          src="https://example.org/pictures/467275df-c6ff-4944-b155-37afffa50cba"
+        />
+        <ol class="relative lg:min-h-full">
+          <li class="text-gray-500">
+            <ul class="block text-sm px-4 py-2">
+              <li class="py-1">
+                <ol class="object-cover w-full h-full"></ol>
+                <ul
+                  class="sm:text-sm bg-blue-gray-50 rounded-l-md items-center border-r-0 px-3 border-blue-gray-300 border inline-flex text-blue-gray-500"
+                ></ul>
+                <a href="#" target="_blank" class="sr-only">
+                  This is link 3a91473f-c49e-46d0-9917-95a91f21d4e1
+                </a>
+              </li>
+              <li class="h-6 w-6">
+                <img
+                  class="font-medium block p-2 text-gray-900 -m-2"
+                  alt="Profile picture of user f8f63890-d6d8-478a-9766-94cb54808c4f"
+                  src="https://example.org/pictures/f0b8d86f-0da3-4d79-aa7d-adf5a44f92b2"
+                />
+              </li>
+            </ul>
+            <a href="#" class="w-6 h-6"> This is link 5d849f39-7192-4a28-b86f-155dead684ba </a>
+          </li>
+          <li class="flex-shrink-0 flex ml-2">
+            <ul class="items-center flex hover:text-gray-800 text-sm text-gray-700 font-medium">
+              <li class="text-gray-600 mt-2 ml-10 leading-7 text-base">
+                <a href="#" target="_blank" class="font-medium text-gray-900">
+                  This is link 3d8b46f6-58e3-4970-ba4a-9f8c392c4ff8
+                </a>
+                <img
+                  class="text-base text-gray-500 hover:text-gray-900"
+                  alt="Profile picture of user e4d2be33-12fc-452c-a29e-1364df4df913"
+                  src="https://example.org/pictures/cc8d4274-3e3a-4177-a70c-3673125fb952"
+                />
+              </li>
+              <li
+                class="focus:ring-offset-gray-800 hover:text-white text-gray-400 focus:ring-offset-2 bg-gray-800 focus:ring-2 focus:ring-white p-1 rounded-full focus:outline-none"
+              >
+                <a href="#" class="h-5 w-5"> This is link 7721da92-77df-46c2-8574-c9c841da6c86 </a>
+                <img
+                  class="bg-white isolate"
+                  alt="Profile picture of user 465056f0-ba88-4fb3-b2c2-275660e8befe"
+                  src="https://example.org/pictures/561cf456-d70a-4f91-82c9-a3455973b132"
+                />
+                <ul class="mt-1"></ul>
+                <ol class="border-gray-200 py-6 px-4 border-t"></ol>
+              </li>
+            </ul>
+            <ul class="justify-center flex h-7 w-7 rounded-full mx-auto items-center">
+              <li class="bg-gray-100 min-h-[800px]">
+                <img
+                  class="py-3 px-2 items-center text-gray-400 bg-white w-full flex text-sm justify-between"
+                  alt="Profile picture of user b5fd6828-5994-40b9-aec8-b7964706171c"
+                  src="https://example.org/pictures/09fd69f7-3813-42b6-a9ab-5cdcffb0dcca"
+                />
+              </li>
+              <li class="absolute flex pl-3 inset-y-0 items-center pointer-events-none left-0">
+                <img
+                  class="ring-1 z-10 absolute origin-top-right w-48 bg-white shadow-lg mt-2 py-1 ring-black focus:outline-none right-0 ring-opacity-5 rounded-md"
+                  alt="Profile picture of user 4507d052-444a-4ef5-a241-84a7da7ea719"
+                  src="https://example.org/pictures/5b04d161-79e0-43db-a556-935b0318c371"
+                />
+                <img
+                  class="text-sm block font-medium text-gray-700"
+                  alt="Profile picture of user 1fe1d011-5e9e-4777-9e7d-7d4548789407"
+                  src="https://example.org/pictures/728ea819-0c84-4a55-850d-4400faee1aae"
+                />
+              </li>
+            </ul>
+            <ol class="sr-only">
+              <li class="bg-gray-100 text-gray-900">
+                <ol class="px-4 sm:hidden mt-6"></ol>
+              </li>
+              <li
+                class="mx-auto flex font-semibold bg-gray-900 justify-center h-7 w-7 items-center rounded-full text-white"
+              >
+                <ol
+                  class="sm:items-center border-b border-gray-200 sm:justify-between sm:flex pb-5"
+                ></ol>
+                <ol class="items-center h-7 rounded-full w-7 mx-auto justify-center flex"></ol>
+              </li>
+            </ol>
+          </li>
+          <li class="sm:grid-cols-6 mt-6 gap-x-4 grid grid-cols-1 gap-y-6">
+            <a href="#" rel="noreferrer" class="bg-white lg:p-12 flex-1 py-8 px-6">
+              This is link bb96ae17-0980-4625-aa7c-dcaa6d71b872
+            </a>
+            <ol class="relative">
+              <li class="mt-4 sm:flex sm:max-w-md">
+                <a href="#" target="_blank" class="mt-0.5 sm:mt-1 text-gray-700">
+                  This is link cf81e6b9-d3b0-4714-9891-8bc4516421f2
+                </a>
+              </li>
+              <li class="w-0 flex items-center flex-1">
+                <ol class="text-white"></ol>
+                <img
+                  class="py-1.5 focus:z-10 hover:bg-gray-100 bg-gray-50 relative text-gray-400"
+                  alt="Profile picture of user 184a9afb-f15b-4146-9195-17b8be42a742"
+                  src="https://example.org/pictures/49f53c29-b1cc-4815-b853-c8b8c775da46"
+                />
+                <ul class="divide-y divide-gray-200"></ul>
+              </li>
+            </ol>
+            <ol class="space-x-8 -mb-px flex">
+              <li class="hidden text-gray-500 sm:block sm:mt-2">
+                <img
+                  class="flex-shrink-0 ml-4"
+                  alt="Profile picture of user 04660158-01fd-4e45-a2fe-85521bac3917"
+                  src="https://example.org/pictures/408a0c83-0407-4d61-ac42-2c2ab7de1aa6"
+                />
+                <img
+                  class="flex p-2 -m-2 group items-center"
+                  alt="Profile picture of user aa463ccb-1f04-4a58-b021-b2c63912aa08"
+                  src="https://example.org/pictures/e8e1a5b6-ca36-41c8-a375-03c9ff1f2ada"
+                />
+              </li>
+              <li class="rounded-lg bg-gray-50 border border-gray-200 text-center p-6">
+                <ul class="overflow-y-auto sm:p-6 md:p-20 fixed z-10 inset-0 p-4"></ul>
+              </li>
+            </ol>
+          </li>
+          <li class="flow-root border-gray-200 border-t divide-gray-200 -mb-6 mt-6 divide-y">
+            <a
+              href="#"
+              target="_blank"
+              class="border-gray-300 h-full bg-white border w-16 text-gray-300"
+            >
+              This is link 262159cb-31e3-4b5f-b48d-89c96521bc1a
+            </a>
+            <img
+              class="absolute sm:text-sm mt-1 rounded-md focus:outline-none overflow-auto z-10 bg-white text-base ring-1 w-full ring-black ring-opacity-5 shadow-lg max-h-60 py-1"
+              alt="Profile picture of user d959bbaf-8a7d-4db6-a76e-63a02ecc2334"
+              src="https://example.org/pictures/7a5077ef-a568-447d-a1d3-cb6142969c65"
+            />
+          </li>
+          <li class="py-10 border-gray-100 border-t text-center">
+            <img
+              class="font-medium text-sm truncate text-gray-500"
+              alt="Profile picture of user e224e4cc-5440-46e6-91a7-70eba1cf851e"
+              src="https://example.org/pictures/8da6032b-4e86-493d-b8bb-2b39c8273045"
+            />
+            <ol class="text-gray-500 mt-3 text-base">
+              <li class="lg:gap-x-8 lg:grid-cols-2 lg:items-start lg:grid">
+                <ul class="flex lg:ml-6"></ul>
+                <ul class="py-1"></ul>
+                <img
+                  class="bg-opacity-25 inset-0 fixed bg-gray-500 transition-opacity"
+                  alt="Profile picture of user 4001abc4-2862-4fe3-a525-862305cdb01a"
+                  src="https://example.org/pictures/16ce6819-3947-4946-a428-9acf62c33b51"
+                />
+                <a href="#" class="text-gray-500 hover:text-gray-600">
+                  This is link 0f448cd2-6d6a-4c88-a346-a1c3673a269d
+                </a>
+              </li>
+              <li class="mt-6">
+                <img
+                  class="mt-5 space-y-1 flex-1 px-2"
+                  alt="Profile picture of user 5fc5ed61-53ce-4e48-bda4-2540ffd6f481"
+                  src="https://example.org/pictures/5ed946f5-e1e6-4dff-982e-d558deaab39a"
+                />
+              </li>
+              <li class="h-full">
+                <a href="#" class="px-4 sm:space-y-6 sm:px-6 space-y-8">
+                  This is link 5a224ecf-75cf-4d51-93cc-54fdaf150748
+                </a>
+                <a href="#" class="text-sm px-3 font-medium py-2 rounded-md">
+                  This is link 3bdd9979-76eb-4277-b5da-c1e0704f66e1
+                </a>
+                <img
+                  class="text-sm"
+                  alt="Profile picture of user fb934e1a-d207-48e1-98f1-2b4c94ece88c"
+                  src="https://example.org/pictures/62061200-d13a-4e64-8310-ea3cb7164f9f"
+                />
+              </li>
+              <li class="flex-1 overflow-y-auto">
+                <img
+                  class="w-4 border-gray-300 text-indigo-600 h-4 focus:ring-indigo-500"
+                  alt="Profile picture of user 0f404abb-0ad3-4c22-8177-24ba6dd80d84"
+                  src="https://example.org/pictures/1a822d0d-f840-4a72-a07a-ec2b8c09914e"
+                />
+                <ul class="text-gray-500"></ul>
+                <ul class="relative"></ul>
+              </li>
+            </ol>
+          </li>
+        </ol>
+        <ol class="text-gray-500">
+          <li class="justify-start flex relative">
+            <ul class="flex mt-10">
+              <li class="tracking-tight font-bold text-3xl text-blue-gray-900">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="mx-auto overflow-hidden sm:px-6 px-4 lg:px-8 max-w-7xl py-16"
+                >
+                  This is link bd7c42fe-024a-450b-a4ed-27af3b2300fa
+                </a>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="leading-6 text-lg font-medium space-y-1"
+                >
+                  This is link 40b3bdc4-3a01-45e5-81b8-16525bf23fbe
+                </a>
+                <a href="#" rel="noreferrer" class="text-sm bg-opacity-60 p-4 bg-white">
+                  This is link f6d409e7-53ed-4be8-b6df-fb22a174d17f
+                </a>
+                <ul class="text-gray-400 group-hover:text-gray-500"></ul>
+              </li>
+              <li class="h-6 w-6 text-gray-500 flex-none">
+                <img
+                  class="font-medium text-gray-900 text-lg"
+                  alt="Profile picture of user f5da3083-ce69-46d5-a4e8-d3f4612ab759"
+                  src="https://example.org/pictures/2f6e24ca-b573-4e8e-a0f3-915f66d627ec"
+                />
+                <ul
+                  class="flex-shrink-0 inline-flex hover:bg-gray-200 text-gray-400 p-1 h-4 ml-1 rounded-full w-4 hover:text-gray-500"
+                ></ul>
+                <ul class="w-6 h-6"></ul>
+              </li>
+              <li
+                class="lg:gap-8 max-w-3xl lg:px-8 lg:grid mx-auto lg:grid-cols-12 lg:max-w-7xl sm:px-6"
+              >
+                <img
+                  class="justify-center -mr-1.5 items-center flex-none -my-1.5 hover:text-gray-500 flex p-1.5 text-gray-400 ml-2"
+                  alt="Profile picture of user 6a9ad308-f556-49da-b3cc-a3ea119a2aab"
+                  src="https://example.org/pictures/4125cdf0-8e1e-414d-9aa2-613d31c04c42"
+                />
+              </li>
+              <li class="ml-3">
+                <a href="#" rel="noreferrer" class="text-gray-500">
+                  This is link 5ede6c83-2cb3-4a7d-913a-2e59601104e6
+                </a>
+                <img
+                  class="text-gray-900 font-medium"
+                  alt="Profile picture of user 12b4246c-abaf-4a08-af8b-8c0c5715803c"
+                  src="https://example.org/pictures/d714e8ae-e313-4535-a4f5-a87bb9792b60"
+                />
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user 2c51abf0-fa13-4f19-a6d5-4a6c0ce74b9f"
+                  src="https://example.org/pictures/55f8f5a8-5339-4425-a5c2-7ef9fd232b90"
+                />
+              </li>
+              <li class="absolute right-0 flex inset-y-0 items-center pointer-events-none">
+                <ul class="py-2"></ul>
+                <img
+                  class="bg-white relative"
+                  alt="Profile picture of user 48fdf982-ec6b-467f-8072-255c08143b4d"
+                  src="https://example.org/pictures/edbfdb26-64b5-4ee0-baef-8d824414d4d1"
+                />
+                <ol class="lg:mt-0 -mx-4 mt-10 relative"></ol>
+              </li>
+            </ul>
+            <img
+              class="lg:px-6 px-2 w-full"
+              alt="Profile picture of user 3bf22e70-b75a-431a-8dc3-506986c36492"
+              src="https://example.org/pictures/b329990d-f96f-4c64-9e6a-edfc03a93d9b"
+            />
+            <ul class="space-y-5 sm:mt-0">
+              <li class="text-gray-900 tracking-tight text-4xl font-bold">
+                <img
+                  class="w-6 text-green-500 flex-shrink-0 h-6"
+                  alt="Profile picture of user fd6227db-2a31-4132-8f58-c686c8c33c82"
+                  src="https://example.org/pictures/ddc4b57d-2cc1-41e1-8c48-797f8ad84306"
+                />
+                <ul class="flex-shrink-0"></ul>
+                <ul class="relative flex items-start"></ul>
+              </li>
+              <li class="sm:mt-0 mt-4 sm:text-left text-sm text-center text-gray-500">
+                <img
+                  class="items-center flex-col pb-1.5 flex pt-3"
+                  alt="Profile picture of user e84671d8-a947-4663-a749-2d9310b7c33a"
+                  src="https://example.org/pictures/7ea5a14f-ab9f-4ae5-9d28-dcf9f6f452d1"
+                />
+                <ul class="space-x-4 flex"></ul>
+              </li>
+              <li class="font-medium text-sm sm:mt-px block text-gray-700 sm:pt-2">
+                <ol class="flex items-start justify-between"></ol>
+                <ul class="relative px-3 bg-white py-2"></ul>
+              </li>
+            </ul>
+          </li>
+          <li class="flex-shrink-0 block group w-full">
+            <ul class="gap-y-16 lg:gap-x-8 grid-cols-1 mt-16 lg:grid-cols-2 grid">
+              <li class="mt-1 sm:hidden">
+                <ul class="text-gray-600 text-lg"></ul>
+                <ul
+                  class="h-10 ring-2 rounded-full ring-white z-20 relative inline-block w-10"
+                ></ul>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="h-24 object-cover w-24 object-center rounded-md sm:w-32 sm:h-32"
+                >
+                  This is link e2f6f34e-4502-4cce-9567-bb637674ab07
+                </a>
+              </li>
+              <li class="text-gray-900 font-medium">
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user be36dcfd-ed58-4256-8a9f-e01d59bd58a0"
+                  src="https://example.org/pictures/88c00b55-b6cf-4f77-a271-2b353d9f93b7"
+                />
+                <img
+                  class="border-b-2 items-center flex justify-between md:justify-start md:space-x-10 py-6 border-gray-100"
+                  alt="Profile picture of user f0a6e718-86b7-42b2-9ed2-0d2878ccccc0"
+                  src="https://example.org/pictures/109f3d0b-1822-4881-9d6e-3befa20f9247"
+                />
+                <a href="#" rel="noreferrer" class="text-base text-gray-500 font-medium">
+                  This is link 9436bd4d-edd3-4a6f-a667-6e37fe8aedf7
+                </a>
+                <ol class="flex mt-6 items-center"></ol>
+              </li>
+              <li class="lg:max-w-none prose-lg prose prose-indigo text-gray-500">
+                <img
+                  class="items-start gap-x-8 pt-10 grid-cols-2 gap-y-10 grid pb-12"
+                  alt="Profile picture of user 4a833308-782e-467e-aaa2-bf8503db1a0e"
+                  src="https://example.org/pictures/01e7f85e-7a52-4458-8bd2-f656eb6e9f7a"
+                />
+                <img
+                  class="items-center rounded-full justify-center w-7 flex mx-auto h-7"
+                  alt="Profile picture of user 7a0adcf5-21e7-4a1e-9ac5-1b0ef91d5997"
+                  src="https://example.org/pictures/bc6dfbb1-cc5b-46eb-98b8-9e9bd6f4916a"
+                />
+              </li>
+              <li class="flex min-h-[640px] bg-gray-100">
+                <img
+                  class="h-7 mx-auto rounded-full justify-center w-7 flex items-center"
+                  alt="Profile picture of user 900d6ba2-c978-45d1-b28f-73566b210797"
+                  src="https://example.org/pictures/832bedd7-a246-4535-a6e7-3856b2adde13"
+                />
+              </li>
+              <li class="shadow ring-1 ring-opacity-5 ring-black">
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user bb3eeb76-0525-4303-8bb9-a913aeb1f7e5"
+                  src="https://example.org/pictures/0046feb5-f8c7-41ee-9cd8-31ef40a4dc5b"
+                />
+                <ul class="py-4"></ul>
+              </li>
+            </ul>
+            <img
+              class="bg-gray-600 text-sm items-center rounded-md font-medium focus:ring-offset-gray-800 focus:outline-none text-white focus:ring-indigo-500 focus:ring-2 focus:ring-offset-2 shadow-sm px-4 border-transparent inline-flex py-2 hover:bg-gray-700 border"
+              alt="Profile picture of user a599e559-2625-4a3d-b38e-3a6bbf89f448"
+              src="https://example.org/pictures/e1d2e3ae-4ed4-494f-af85-8cd8e6e90d62"
+            />
+            <img
+              class="flex-1"
+              alt="Profile picture of user 85dcbd7a-4962-42fb-930c-dad1fed0a9bb"
+              src="https://example.org/pictures/4e92ad42-a589-42b4-9e19-cd57b7796793"
+            />
+            <a href="#" target="_blank" class="text-sm text-gray-500 mt-2">
+              This is link a89c2cb6-76eb-4239-bf00-fcb911c3c296
+            </a>
+          </li>
+          <li class="flex mt-4 tracking-tight font-bold text-5xl items-baseline text-gray-900">
+            <ul class="text-sm text-gray-500">
+              <li class="text-base font-medium mt-2 text-indigo-200">
+                <img
+                  class="border-2 border-dashed pb-6 flex px-6 rounded-md border-gray-300 pt-5 mt-1 justify-center"
+                  alt="Profile picture of user c506839b-47eb-4c8a-a485-a7e4b063a03c"
+                  src="https://example.org/pictures/fb100ffd-0f66-4b61-a184-aba62e6fdd48"
+                />
+                <ol class="sr-only"></ol>
+                <ol class="lg:col-span-2 hidden lg:block"></ol>
+              </li>
+              <li class="w-7 flex items-center rounded-full mx-auto h-7 justify-center">
+                <ul class="gap-x-14 relative grid-cols-1 grid md:grid-cols-2"></ul>
+                <ol class="hover:text-gray-600 text-gray-500"></ol>
+                <ul class="text-sm font-medium text-gray-900"></ul>
+              </li>
+              <li class="sm:hidden">
+                <ul class="h-5 flex items-center"></ul>
+                <img
+                  class="border-gray-200 border-b"
+                  alt="Profile picture of user d77fba0c-2f0a-4e45-ada1-5bfecb35268c"
+                  src="https://example.org/pictures/fb7ab0b7-a0a3-4da5-a817-7f3e53973001"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="text-sm py-2 px-4 text-gray-700 block"
+                >
+                  This is link 593c32ad-b884-45bc-9d83-f85bdfacf625
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 py-4">
+            <ul class="border-b border-gray-200">
+              <li class="flex py-2 items-center text-sm group px-4">
+                <ul class="ml-10 items-baseline space-x-4 flex"></ul>
+                <img
+                  class="hover:text-gray-700 text-gray-900 font-medium"
+                  alt="Profile picture of user 4417e5a0-7145-47c0-8cd3-b7afced1664f"
+                  src="https://example.org/pictures/989e415e-4c96-44af-a63a-63886621c206"
+                />
+                <ol class="sr-only"></ol>
+                <ul
+                  class="flex-col flex space-y-4 sm:flex-row items-start sm:space-y-0 sm:space-x-4 sm:items-center"
+                ></ul>
+              </li>
+              <li class="border-gray-200 border-dashed border-2 h-full">
+                <ul class="aspect-w-3 w-full overflow-hidden rounded-lg aspect-h-2"></ul>
+              </li>
+              <li class="order-2 sm:order-3 sm:ml-3 flex-shrink-0">
+                <a href="#" class="mt-1"> This is link ca2e22b2-ac84-45e2-9b66-906f35b7f320 </a>
+                <img
+                  class="col-span-3"
+                  alt="Profile picture of user 74e0a832-3984-438d-a0b8-c23a15f2228c"
+                  src="https://example.org/pictures/57b8d4ef-cf93-49ba-8c49-7d761a1b5f08"
+                />
+                <img
+                  class="lg:px-8 sm:px-4 max-w-7xl mx-auto px-2"
+                  alt="Profile picture of user d86108aa-604a-4763-9444-0b1e58151b4c"
+                  src="https://example.org/pictures/d7c23b45-7b9e-4271-b833-c7beddaf5bce"
+                />
+                <a href="#" class="ml-3"> This is link f645f1c3-1ecb-4bbc-8010-3c316a202458 </a>
+              </li>
+              <li class="rounded-full w-8 h-8 justify-center flex items-center">
+                <ul class="text-gray-900"></ul>
+                <img
+                  class="h-5 flex-shrink-0 w-5"
+                  alt="Profile picture of user d80b1c2b-314b-4fd6-aa74-9959237bf61d"
+                  src="https://example.org/pictures/54d8a713-a96c-40f7-94ec-8353e53d79dc"
+                />
+                <ol class="text-gray-500"></ol>
+                <ul class="overflow-hidden relative"></ul>
+              </li>
+              <li class="group relative">
+                <img
+                  class="md:h-full lg:flex-col flex"
+                  alt="Profile picture of user ad5536c3-f233-4937-9f6c-fda130855ef6"
+                  src="https://example.org/pictures/0342cdf1-468f-47c1-b313-f68f9f905d16"
+                />
+                <img
+                  class="lg:text-sm text-xs font-medium"
+                  alt="Profile picture of user 1d6c1f96-8b9b-49aa-8c0f-42bd57ec6467"
+                  src="https://example.org/pictures/2ee0d1a5-56db-4e89-9265-24e4748e6bb1"
+                />
+                <img
+                  class="leading-8 text-gray-500 mt-8 text-xl"
+                  alt="Profile picture of user cfc1d77f-e40d-4d4d-9477-326e5973eeab"
+                  src="https://example.org/pictures/7dd171ee-4bdc-4a3d-a370-7df2659bfa70"
+                />
+                <a href="#" target="_blank" class="h-5 mr-1.5 w-5 flex-shrink-0 text-gray-400">
+                  This is link 3cbf6528-a4f0-4b84-a93f-9407133e0f97
+                </a>
+              </li>
+            </ul>
+            <img
+              class="mt-1 font-medium px-3 text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 text-base block py-2 rounded-md"
+              alt="Profile picture of user e9b3a063-ed21-45b8-9cbd-07e1087fd52b"
+              src="https://example.org/pictures/3a4e543d-04db-4c0e-921a-c851b926d8ee"
+            />
+            <img
+              class="absolute max-h-60 ring-1 ring-black bg-white text-base focus:outline-none z-10 ring-opacity-5 shadow-lg py-1 overflow-auto rounded-md mt-1 w-full sm:text-sm"
+              alt="Profile picture of user 999962be-9d89-40c0-80a1-5f0a35047b3d"
+              src="https://example.org/pictures/41b6aed1-3c40-4194-804c-9b3e929e6cf8"
+            />
+          </li>
+          <li class="text-gray-500 text-sm font-medium">
+            <a href="#" rel="noreferrer" class="text-sm">
+              This is link 330fd7db-9aed-449a-986c-5a57038fe3fd
+            </a>
+          </li>
+        </ol>
+      </li>
+    </ul>
+    <h3 class="border-gray-200 border-b">This is heading f8a5e5dc-f6b2-483b-8ff2-0ac1a20f235d</h3>
+  </main>
+  <a href="#" target="_blank" class="pb-10 border-gray-200 border-b pt-24">
+    This is link 1166bd3e-162d-456f-a80f-42b5d7299732
+  </a>
+  <img
+    class="flex-none w-28"
+    alt="Profile picture of user ccad3d15-1a11-4d87-93f3-0c26d0c3cff8"
+    src="https://example.org/pictures/57bc4cd1-5865-4671-94a5-da4d576824c4"
+  />
+  <h3 class="pt-5 pb-6">This is heading 9334ab2a-6eff-4bfc-b2a3-0df5a3308e7b</h3>
+</div>
diff --git a/oxide/crates/core/benches/fixtures/template-002.html b/oxide/crates/core/benches/fixtures/template-002.html
new file mode 100644
index 000000000..de34f32b5
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-002.html
@@ -0,0 +1,9027 @@
+<div class="text-sm">
+  <a href="#" class="text-gray-700"> This is link 3ba81bb0-79d3-4665-85c9-b5afb8f0c095 </a>
+  <ul
+    class="hover:text-gray-700 pt-4 hover:border-gray-300 border-t-2 px-4 font-medium border-transparent inline-flex text-sm items-center text-gray-500"
+  >
+    <li class="tracking-tight text-gray-900 font-bold text-2xl">
+      <ul class="text-gray-400 mx-auto w-5 h-5">
+        <li class="flow-root">
+          <ul class="text-3xl text-gray-900 font-bold tracking-tight">
+            <li class="group-hover:bg-gray-800 bg-gray-900">
+              <ul class="-ml-1 mr-3 w-5 h-5">
+                <li
+                  class="focus:outline-none px-2 absolute inset-y-0 rounded-r-md right-0 items-center flex"
+                >
+                  This is item 1d9752a2-6a3c-4fde-bbeb-0cd2e9494087
+                </li>
+                <li class="mx-auto w-7 justify-center h-7 items-center flex rounded-full">
+                  This is item 8ab5fbe5-1a6c-4001-8a9a-addae960c0af
+                </li>
+                <li class="md:gap-x-6 grid-cols-1 gap-y-10 md:grid-cols-2 grid auto-rows-min">
+                  This is item 88721283-1b17-4eac-b26f-9b05c564de22
+                </li>
+                <li class="space-y-4 mt-4">This is item 6056d8f9-30ee-4b85-97d9-6564d1762d9c</li>
+                <li class="mt-1">This is item 312fd964-a837-4a0f-a768-4600729c8f88</li>
+              </ul>
+            </li>
+            <li class="flex-auto ml-3 truncate">
+              <ol class="max-w-3xl text-lg text-gray-600 mt-3">
+                <li class="lg:items-center lg:grid lg:grid-cols-3 lg:gap-8">
+                  This is item e4987c46-abed-425d-b2c9-5dcda87a60a3
+                </li>
+                <li class="h-5 rounded-full w-5">
+                  This is item f9632c66-620b-43b2-8cc1-6f7b4cd58722
+                </li>
+              </ol>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="grid-cols-1 md:gap-y-16 md:grid-cols-12 md:gap-x-8 md:grid-flow-col md:auto-rows-min grid"
+              >
+                This is link 2857d7fe-46a0-46d3-9d09-a41f7eb03375
+              </a>
+              <ul class="justify-center items-center rounded-full flex w-7 mx-auto h-7">
+                <li class="px-4 sm:max-w-3xl sm:px-6 lg:max-w-none max-w-md mx-auto lg:p-0">
+                  This is item aeadf1ce-9848-4cf9-a798-bd494a924a05
+                </li>
+                <li class="-bottom-0.5 px-0.5 rounded-tl absolute bg-white py-px -right-1">
+                  This is item d63421fa-b161-4aa6-8867-ab2ed945b161
+                </li>
+              </ul>
+              <ol class="sm:ml-4 text-center sm:mt-0 sm:text-left mt-3">
+                <li
+                  class="items-center bg-indigo-600 w-8 relative flex h-8 justify-center rounded-full hover:bg-indigo-900"
+                >
+                  This is item 75968155-df41-435b-9765-7b3577cb6b4c
+                </li>
+                <li
+                  class="focus:ring-indigo-500 sm:text-sm w-full block border-gray-300 shadow-sm focus:border-indigo-500 rounded-md mt-1"
+                >
+                  This is item 14a47d0a-514e-480c-9243-5dd6264e6d2f
+                </li>
+                <li class="w-full lg:px-6 px-2">
+                  This is item 22a23886-d195-4cab-a5c0-361883f20e42
+                </li>
+              </ol>
+            </li>
+            <li class="flex-shrink-0">
+              <a
+                href="#"
+                rel="noreferrer"
+                class="border-black rounded-full border border-opacity-10"
+              >
+                This is link a7f95d3b-25ff-4db2-ab94-2fa36e5d524d
+              </a>
+              <img
+                class="space-x-8 flex"
+                alt="Profile picture of user b44d8637-b85c-4bf6-9acf-b016497069a3"
+                src="https://example.org/pictures/647c5b08-e967-40b3-aca1-e1159afe5ddf"
+              />
+              <ol class="text-sm mt-1 text-gray-500">
+                <li class="text-gray-900 font-bold text-4xl tracking-tight">
+                  This is item e4f0cb6f-804c-48c3-9049-162a8bfa2a58
+                </li>
+                <li class="items-center flex-shrink-0 flex">
+                  This is item 9e1a5248-f572-46b2-9336-f2ca5612139e
+                </li>
+                <li class="px-4 text-sm py-2 block">
+                  This is item d3f13efe-8dd6-407c-a866-f22dee6daf80
+                </li>
+              </ol>
+              <a href="#" class="flex-1 min-w-0">
+                This is link 8038c5e5-ad1d-422f-9d81-8cddd6eeaa00
+              </a>
+            </li>
+            <li class="block py-2 text-sm px-4 text-gray-700">
+              <ol class="mt-12 md:mt-0">
+                <li class="flex-col bg-gray-100 min-h-0 flex-1 border-r flex border-gray-200">
+                  This is item f73e8cca-18f2-41d1-860a-3df8ff822bef
+                </li>
+                <li class="py-3 justify-between font-medium text-sm flex">
+                  This is item 3edd9c90-582a-4c3a-9fdd-cccc3ae580e8
+                </li>
+                <li
+                  class="h-4 rounded-full pointer-events-none transition-colors ease-in-out mx-auto w-9 absolute duration-200"
+                >
+                  This is item f4709056-37ca-4c22-a08c-938ff31d9e16
+                </li>
+                <li class="border-t border-gray-300 w-full">
+                  This is item 9fb83569-6949-4791-9113-293a7333648f
+                </li>
+                <li class="h-8 w-auto block lg:hidden">
+                  This is item 7dde6001-364d-46a8-a33a-bafac6c314b1
+                </li>
+              </ol>
+              <ol class="select-none cursor-default rounded-md py-2 flex px-3 items-center group">
+                <li class="relative z-10">This is item ac9bc80c-41cf-479c-94f5-473339bb9065</li>
+                <li class="h-full object-center object-cover w-full">
+                  This is item dd2fd6f7-66e0-45a1-8e21-558c1b38452b
+                </li>
+                <li class="h-6 w-6">This is item 78e30f97-c92c-487a-871a-c06d8f6b4572</li>
+              </ol>
+            </li>
+          </ul>
+          <ol
+            class="hover:bg-gray-100 focus:outline-none text-gray-400 inline-flex bg-white focus:ring-2 p-2 hover:text-gray-500 focus:ring-indigo-500 items-center justify-center focus:ring-inset rounded-md"
+          >
+            <li class="cursor-default select-none px-4 py-2">
+              <ul class="bg-gray-100 flex min-h-[640px]">
+                <li
+                  class="w-56 rounded-lg relative xl:w-auto h-80 flex hover:opacity-75 p-6 overflow-hidden flex-col"
+                >
+                  This is item f7711130-e381-4ee1-91e7-8a159a8f012e
+                </li>
+                <li class="font-medium mt-1 text-gray-900">
+                  This is item 4ec8ec03-e21c-41b3-baf5-b7cbc20bd99d
+                </li>
+                <li class="sm:col-span-2 text-sm flex text-gray-900 mt-1 sm:mt-0">
+                  This is item 1ce0b33d-7177-4265-b0cf-2eab6b6b835c
+                </li>
+              </ul>
+              <a href="#" target="_blank" rel="noreferrer" class="sm:block hidden">
+                This is link 892267ed-aea1-469a-a350-96d2490d2bed
+              </a>
+              <ul class="h-32 w-full relative lg:hidden">
+                <li class="flex space-x-8 -mb-px px-4">
+                  This is item 47882342-5ab4-4480-a6a4-dabf24577179
+                </li>
+                <li class="lg:mt-0 lg:row-span-3 mt-8 lg:row-start-1 lg:col-span-7 lg:col-start-1">
+                  This is item 7190c573-7d60-49b9-8838-a35d8d1f2eaf
+                </li>
+                <li class="sr-only">This is item 253478bc-2370-4ce0-afed-fcce7bccbb71</li>
+                <li
+                  class="justify-center focus:ring-offset-2 focus:ring-2 flex sm:w-full border font-medium bg-indigo-600 max-w-xs py-3 px-8 flex-1 focus:ring-indigo-500 hover:bg-indigo-700 border-transparent rounded-md items-center focus:ring-offset-gray-50 text-white text-base focus:outline-none"
+                >
+                  This is item c6d8e9b4-fdee-4295-b617-7c333ed46018
+                </li>
+                <li class="group flex-shrink-0 block">
+                  This is item 913071a6-1f6e-41a6-9330-71a8122fa8a5
+                </li>
+              </ul>
+              <a href="#" target="_blank" rel="noreferrer" class="mt-3">
+                This is link e58161ee-5e80-4d15-a9ae-18a979feac74
+              </a>
+            </li>
+            <li class="sr-only">
+              <img
+                class="mt-2"
+                alt="Profile picture of user a9a1a043-b5f2-4295-8239-4a69bcb8492a"
+                src="https://example.org/pictures/350e2504-4b06-4162-8a41-53b96b1d26ee"
+              />
+            </li>
+            <li class="mt-6">
+              <ul class="px-4 pt-16 max-w-2xl lg:max-w-7xl pb-24 sm:px-6 lg:px-8 mx-auto">
+                <li class="text-sm">This is item 57b01633-26c0-439f-9da4-a41fe597c3f8</li>
+                <li class="w-6 h-6">This is item 4205203f-4367-4a24-8db7-e1dbd3824704</li>
+                <li class="text-base text-white font-medium">
+                  This is item b9ce1fb8-ccae-4d32-a12e-45d3ef544c7c
+                </li>
+                <li class="w-auto h-8">This is item 6db89219-b326-434d-a809-8b5ec10cf56e</li>
+                <li class="relative">This is item 4220ee0b-1755-41d3-869a-97969a5fb70c</li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="absolute sm:text-sm inset-x-0 text-gray-500 top-full">
+          <img
+            class="sm:not-sr-only sr-only"
+            alt="Profile picture of user f0a79b95-461d-43e0-ae83-a53912e5800f"
+            src="https://example.org/pictures/c3374df2-a9ed-4466-8755-c91d03c529d5"
+          />
+          <img
+            class="max-h-12"
+            alt="Profile picture of user 74e2ae86-7c0b-4693-8393-d43612a305b8"
+            src="https://example.org/pictures/5b233339-8f44-416b-b4ba-776080efc7c7"
+          />
+          <ol class="lg:py-0 flex ml-9 lg:pb-4 mt-2 text-base text-gray-500">
+            <li
+              class="bg-gray-50 sm:text-sm border-b focus:ring-0 border-0 w-full block border-transparent focus:border-indigo-600"
+            >
+              <ul
+                class="px-4 inline-flex text-sm text-gray-500 shadow-sm py-2 border bg-white w-full border-gray-300 font-medium rounded-md hover:bg-gray-50 justify-center"
+              >
+                <li
+                  class="justify-between pb-2 sm:px-6 mx-auto max-w-7xl relative pt-6 px-4 lg:px-8 flex items-center"
+                >
+                  This is item 1e8c4c01-531b-4911-aef2-723aa147e1fb
+                </li>
+                <li class="mx-auto lg:px-8 lg:grid-cols-2 relative lg:grid max-w-7xl">
+                  This is item 016c1593-2b7a-43aa-9664-573e344d7b01
+                </li>
+                <li class="hover:text-gray-700 font-medium text-gray-900 text-base">
+                  This is item 7318f784-33c1-4c13-a237-7be97d98f39e
+                </li>
+                <li class="gap-y-10 grid-cols-2 grid gap-x-8">
+                  This is item cd27bc06-b9cc-45ec-bf5c-6b1d320e274c
+                </li>
+                <li class="block text-sm px-4 py-2">
+                  This is item 4f34c9e1-1b90-4c8c-96c1-d0cd223a5e59
+                </li>
+              </ul>
+              <ul class="font-medium text-gray-500 hover:text-gray-700 ml-4 text-sm">
+                <li class="font-bold text-lg">This is item 46f1e2c6-5fc7-4506-9914-4420bbe4ce39</li>
+                <li class="shadow-sm md:items-stretch flex items-center rounded-md">
+                  This is item 65e40ee1-3ce2-4ee0-94da-e75a5194a146
+                </li>
+                <li
+                  class="text-gray-400 p-2 justify-center focus:ring-white focus:outline-none items-center focus:ring-2 inline-flex focus:ring-inset rounded-md hover:text-white hover:bg-gray-700"
+                >
+                  This is item 66ff1cf0-f38e-4804-91c8-395e9abd2b7f
+                </li>
+              </ul>
+              <ol
+                class="relative z-10 flex ease-out font-medium duration-200 pt-px transition-colors items-center border-b-2 text-sm -mb-px"
+              >
+                <li class="mx-auto rounded-full flex justify-center h-7 w-7 items-center">
+                  This is item 31ab550d-e342-44f8-ad52-2f369c805d55
+                </li>
+                <li class="justify-center p-8 items-center flex bg-white">
+                  This is item 1d8620cb-49a5-431e-ab85-ea38f2be534e
+                </li>
+                <li class="px-1 text-sm pb-4 font-medium whitespace-nowrap border-b-2">
+                  This is item fbcbfdba-ce8b-4406-b57c-24b008056f7f
+                </li>
+                <li class="flex-1">This is item 80755f96-df51-467e-acbd-8a7f23baad8a</li>
+              </ol>
+            </li>
+            <li class="px-4 py-6 border-gray-200 space-y-6 border-t">
+              <ul class="sr-only">
+                <li class="flex items-center inset-y-0 pr-2 right-0 absolute pointer-events-none">
+                  This is item 2caf4c94-2f27-4795-8f53-bdd4a5a88ecb
+                </li>
+                <li class="sr-only">This is item bb0ecf84-08a8-4881-b7e0-547df46d5b7f</li>
+              </ul>
+            </li>
+            <li class="lg:border-opacity-20 w-full lg:border-t py-5 lg:border-white">
+              <ul class="text-xl sm:mt-4 mt-3 text-gray-500">
+                <li
+                  class="bg-indigo-100 pl-2 text-xs pr-0.5 items-center font-medium inline-flex rounded-full py-0.5 text-indigo-700"
+                >
+                  This is item 010ed75e-513c-46e5-9e2f-74d3ae943ce7
+                </li>
+                <li class="bg-gray-50 focus:z-10 py-1.5 text-gray-400 hover:bg-gray-100">
+                  This is item fb73c48f-580d-4939-abae-66adce1e2e65
+                </li>
+                <li class="mt-6 text-gray-500 space-y-6">
+                  This is item 909c2f90-c46f-48bc-8770-3ceeb2681cb3
+                </li>
+                <li class="mt-2 leading-8">This is item f486ffae-e700-4709-a0b7-6d4dcaf04ed1</li>
+              </ul>
+            </li>
+            <li class="hidden sm:flex">
+              <img
+                class="sr-only"
+                alt="Profile picture of user 4bc26a8a-0abf-4b0c-9e19-06eda96bacba"
+                src="https://example.org/pictures/3f3cc66b-b3cc-47a6-899c-2b452187cd8f"
+              />
+              <ol class="rounded-full px-3 inline-block text-xs py-0.5 ml-3 font-medium">
+                <li class="mt-3 space-y-3 text-gray-500">
+                  This is item bdb753c6-afc5-42d8-b0c1-0b47cd948131
+                </li>
+                <li class="font-normal sm:table-cell py-3 hidden pr-8">
+                  This is item 693fdff6-7153-494a-ae81-621454d92e6b
+                </li>
+              </ol>
+              <img
+                class="sm:col-span-4 col-span-6"
+                alt="Profile picture of user 3099b750-ec15-4638-a993-2c0fbefe740c"
+                src="https://example.org/pictures/8e8983d1-9be2-49a8-a188-28d64f1bbf73"
+              />
+            </li>
+            <li
+              class="bg-gray-200 text-gray-700 font-semibold rounded px-1.5 text-xs ml-1.5 tabular-nums py-0.5"
+            >
+              <ol class="ml-3 relative flex-1">
+                <li class="border-t border-gray-200 mt-10 pt-10">
+                  This is item 2780d00c-384d-4785-a667-e361d0040674
+                </li>
+                <li class="font-medium text-base text-gray-900">
+                  This is item b6f9f1e4-7f77-4281-bb09-56b45f765c12
+                </li>
+              </ol>
+              <img
+                class="font-medium text-gray-900"
+                alt="Profile picture of user 0c3a8ba4-28ae-41c7-af8c-5bb32b522931"
+                src="https://example.org/pictures/0eee9252-da55-4d75-a379-f20c59b396e7"
+              />
+              <ul
+                class="bg-white focus:ring-1 relative focus:ring-blue-600 px-4 focus:z-10 font-medium border-gray-300 items-center focus:outline-none hover:bg-gray-50 text-sm py-2 inline-flex focus:border-blue-600 rounded-l-md text-gray-500 border"
+              >
+                <li class="font-medium text-gray-900">
+                  This is item 2d8b9f80-843c-42b4-84ce-2e79a156ba0c
+                </li>
+                <li class="h-12">This is item 70655d8d-73dc-4296-884f-97162ea83dba</li>
+              </ul>
+              <ul
+                class="px-2 tracking-wide rounded-full text-gray-600 ml-2 py-0.5 text-xs bg-gray-200"
+              >
+                <li class="text-4xl font-bold tracking-tight text-gray-900">
+                  This is item f4863e14-0856-474e-9952-909e4c3b1a36
+                </li>
+                <li class="z-10 relative">This is item f1e87ceb-86d8-4cc4-a2e2-acd5bea4f0fd</li>
+                <li
+                  class="block focus:ring-indigo-500 rounded-md focus:border-indigo-500 shadow-sm w-full sm:text-sm border-gray-300"
+                >
+                  This is item 05917886-5c3a-49d7-9fc0-fefadd8800d5
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="bg-white xl:flex-shrink-0 xl:border-gray-200 xl:border-r xl:w-64">
+          <img
+            class="sr-only"
+            alt="Profile picture of user 22ee6ba4-2e3d-40f6-b6d5-effe7507adf3"
+            src="https://example.org/pictures/3dcea7ad-60e2-433c-897d-809aaf976f4a"
+          />
+          <img
+            class="grid gap-y-8"
+            alt="Profile picture of user e47e0fce-1bfd-49b4-92d8-67bfda9bdd0f"
+            src="https://example.org/pictures/ce4aea53-618b-4d3a-8789-17f88b3a63e5"
+          />
+        </li>
+        <li class="px-2 w-full">
+          <ul class="flex flex-col justify-end">
+            <li class="sr-only">
+              <a href="#" rel="noreferrer" class="font-medium text-gray-900">
+                This is link b5a9b789-731e-4305-8905-9da4864d2061
+              </a>
+              <a href="#" class="text-gray-900 font-medium">
+                This is link 01b8b04f-961f-47aa-ad38-c75dcb631521
+              </a>
+            </li>
+            <li class="font-sans">
+              <img
+                class="mt-6 sm:hidden"
+                alt="Profile picture of user 878371e7-ae9f-40f2-b303-5024af5d2620"
+                src="https://example.org/pictures/e76ced81-9d5c-460b-8b2c-f02a3f12805d"
+              />
+              <img
+                class="text-left"
+                alt="Profile picture of user 1150027a-2ca3-45de-9a29-ef727d79628f"
+                src="https://example.org/pictures/99a885a7-a354-46c4-a32c-e4c515f23d62"
+              />
+              <ul
+                class="border-gray-300 focus:border-indigo-500 rounded-md block focus:ring-indigo-500 w-full"
+              >
+                <li class="text-sm">This is item 9c81576c-c65a-4e09-97a9-01e8c9946f1d</li>
+                <li class="text-gray-500 font-medium text-sm">
+                  This is item 00c4e702-5bc0-4a2c-936b-b2a3eb16bd5d
+                </li>
+                <li class="space-y-4 mt-4">This is item fa1f61bd-d460-410c-9e07-ae9177791f76</li>
+                <li class="max-w-xl">This is item 0ba97795-dfe5-414e-aacf-b0f0cff7b5ea</li>
+              </ul>
+              <img
+                class="mt-8 relative"
+                alt="Profile picture of user c079304e-dbc3-4900-8117-9614f4df9301"
+                src="https://example.org/pictures/7ffeeb8a-0d94-4167-8e32-9f3424ae5fe7"
+              />
+            </li>
+            <li class="mt-1">
+              <a href="#" target="_blank" rel="noreferrer" class="text-center">
+                This is link cede245c-4ef7-410e-9875-ac8cc32196ea
+              </a>
+              <img
+                class="mt-1"
+                alt="Profile picture of user a834b88b-16d2-4262-a243-5b64988e7059"
+                src="https://example.org/pictures/e8f472cf-4124-430d-aa44-5ede3d9108c5"
+              />
+              <a href="#" class="bg-white"> This is link ffea77c7-9c9c-411c-8e4f-cbdffb1d7913 </a>
+            </li>
+          </ul>
+          <ol class="w-5 flex-shrink-0 h-5 group-hover:text-gray-500 text-gray-400">
+            <li class="flex-shrink-0 w-14">
+              <ul
+                class="shadow-sm py-3 focus:ring-indigo-500 w-full border-gray-300 text-gray-900 px-4 block rounded-md focus:border-indigo-500"
+              >
+                <li class="h-5 w-5 text-yellow-400">
+                  This is item 26c050a7-742e-45fb-a978-a589a135564a
+                </li>
+                <li class="-mt-32">This is item cced1bbe-e516-48ba-b41d-34f3407a6a0b</li>
+                <li class="md:inline hidden">This is item 2f4655ab-aae6-4218-a5c1-bf3a515694f8</li>
+                <li
+                  class="h-8 items-center mt-1 flex font-semibold text-gray-900 justify-center w-8"
+                >
+                  This is item 2eea132a-a625-4b35-aeb5-ba64bf5833c2
+                </li>
+              </ul>
+              <img
+                class="sr-only"
+                alt="Profile picture of user f75ad9f0-5ef0-4f7c-9a18-0b4016a4b453"
+                src="https://example.org/pictures/0f016b8b-7153-4a4e-9889-9990c2155cb4"
+              />
+              <ul class="text-sm text-gray-900">
+                <li class="gap-x-8 gap-y-10 grid items-start pt-10 pb-12 grid-cols-2">
+                  This is item ba6f529c-4485-4a6e-a1cd-c595f45ea86b
+                </li>
+                <li class="sr-only">This is item 93056b40-dd20-4c3b-8c2a-d8ae6af3c2b5</li>
+                <li class="py-1.5 hover:bg-gray-100 text-gray-400 bg-gray-50 focus:z-10">
+                  This is item 526c4c07-d76d-40a9-af41-e24a1a855437
+                </li>
+                <li class="font-medium text-lg text-gray-900">
+                  This is item a64a3598-b64e-44b1-99da-cd5b192c1c5c
+                </li>
+              </ul>
+              <ul class="text-orange-600 hover:text-orange-900">
+                <li
+                  class="text-sm font-medium px-4 text-gray-500 border-transparent hover:text-gray-700 pt-4 hover:border-gray-200 border-t-2 inline-flex items-center"
+                >
+                  This is item 197d2f5f-341b-448c-b6d7-03cc0c5a8d8c
+                </li>
+                <li class="lg:absolute lg:right-0 lg:inset-y-0 lg:w-1/2">
+                  This is item 0210350a-c07a-4729-8783-4bb93487d86c
+                </li>
+              </ul>
+            </li>
+            <li class="rounded-br-lg py-1.5 hover:bg-gray-100 text-gray-400 bg-gray-50 focus:z-10">
+              <ol class="justify-between flex py-3 sm:grid sm:grid-cols-2">
+                <li class="mx-auto px-4 max-w-2xl">
+                  This is item c9d712af-237d-4cc8-b3b3-a2393043d896
+                </li>
+                <li class="hover:bg-gray-100 focus:z-10 py-1.5 bg-white">
+                  This is item 0f8be103-38f7-4491-aacf-8e6e49cd33b8
+                </li>
+                <li class="text-gray-900 font-medium">
+                  This is item ec158782-c23c-4208-ac6a-7e4cc0d329a2
+                </li>
+                <li class="h-10 rounded-full w-10">
+                  This is item 5369d4ee-109a-490e-a1ca-7caa25d32c53
+                </li>
+              </ol>
+              <a href="#" rel="noreferrer" class="ml-3">
+                This is link 963caf1b-b863-46df-9326-ed94f9941825
+              </a>
+              <ul
+                class="px-4 sm:px-6 sm:space-y-0 sm:gap-4 sm:py-5 sm:grid-cols-3 sm:grid space-y-2 sm:items-start"
+              >
+                <li
+                  class="rounded-md focus:ring-2 text-gray-700 focus:ring-offset-gray-100 text-left focus:ring-purple-500 text-sm focus:outline-none py-2 font-medium hover:bg-gray-200 bg-gray-100 focus:ring-offset-2 w-full group px-3.5"
+                >
+                  This is item 1c9fba27-8ccf-4a51-802d-2ccd84a99c89
+                </li>
+                <li class="bg-white p-4 text-base sm:text-sm bg-opacity-60">
+                  This is item b1e9673d-0869-41b4-bfe9-4fbaf5616f10
+                </li>
+                <li class="align-middle border-gray-200 min-w-full inline-block border-b">
+                  This is item 507d43db-fb31-4634-9e1d-0ddd117e3ea8
+                </li>
+                <li
+                  class="rounded-md text-sm font-medium bg-white hover:bg-gray-50 px-4 text-gray-900 py-2.5 mt-4"
+                >
+                  This is item 104574cb-b5cc-48f0-b04d-47320da67275
+                </li>
+                <li class="text-sm text-gray-700">
+                  This is item 84b979d9-4021-4407-b23e-fc3a4141b13b
+                </li>
+              </ul>
+              <img
+                class="text-white text-sm mt-1"
+                alt="Profile picture of user ffdbf27d-3270-4b5a-a7e2-e5be8659f741"
+                src="https://example.org/pictures/a4d12f64-d858-4841-92dc-f1694f1d5043"
+              />
+            </li>
+            <li class="sr-only">
+              <ol class="ml-3">
+                <li class="sm:grid-cols-2 grid mt-1 grid-cols-1 gap-4">
+                  This is item 735385f0-ca0e-4d0a-a0f1-d8bda842d309
+                </li>
+                <li class="font-medium text-base text-white">
+                  This is item 8d365ef3-1430-49fe-87f5-2a7f82838ae1
+                </li>
+                <li class="space-y-6 mt-6">This is item 2eb770ea-dcd3-4ecd-84ee-88cef48621b0</li>
+                <li class="relative">This is item d5a3f992-f74a-4db3-a2e0-2aa91ffddc57</li>
+                <li
+                  class="flex-shrink-0 h-4 w-4 hover:text-gray-500 rounded-full inline-flex p-1 ml-1 text-gray-400 hover:bg-gray-200"
+                >
+                  This is item 24c19d58-2172-4f13-9762-d2ec7537773c
+                </li>
+              </ol>
+              <img
+                class="space-y-6 mt-6"
+                alt="Profile picture of user 788476ea-eadf-48ed-aa98-73376176afbb"
+                src="https://example.org/pictures/2f942dfc-1d1e-4f31-8dc4-909a7b307991"
+              />
+              <ol class="lg:text-left sm:mx-auto lg:mx-0 sm:text-center sm:max-w-lg mt-8">
+                <li class="text-gray-900 text-2xl font-semibold">
+                  This is item 8271752d-d4ab-4b0f-a267-151c420c064a
+                </li>
+                <li class="divide-gray-200 divide-y opacity-25">
+                  This is item 605f45cd-b819-4638-ab05-3d3223b36e43
+                </li>
+                <li
+                  class="pl-2 flex bg-none group-hover:text-gray-800 focus:outline-none text-gray-700 text-sm rounded-md pr-5 border-transparent font-medium focus:border-transparent py-0.5 focus:ring-0 items-center"
+                >
+                  This is item 46f0359a-15b9-4c6b-bc58-a626bc01c96d
+                </li>
+              </ol>
+              <img
+                class="pb-8 pt-14 shadow-2xl items-center lg:p-8 md:p-6 bg-white sm:pt-8 flex overflow-hidden px-4 relative w-full sm:px-6"
+                alt="Profile picture of user d5bde696-ce57-41b9-b629-5287c7945e6e"
+                src="https://example.org/pictures/1f737cd8-3273-4929-bd8b-53757af37b3e"
+              />
+            </li>
+          </ol>
+          <ul class="mt-1">
+            <li class="py-10 text-center border-t border-gray-100">
+              <a href="#" rel="noreferrer" class="lg:flex hidden lg:items-center">
+                This is link 45d2a270-3994-4355-814e-b2b0896f07b6
+              </a>
+              <img
+                class="sr-only"
+                alt="Profile picture of user 361eb6bf-ef65-40dd-9035-5f6826016ee3"
+                src="https://example.org/pictures/1e6e28da-e595-4927-8a5f-918bf44511e4"
+              />
+            </li>
+            <li class="sr-only">
+              <img
+                class="tracking-tight text-3xl font-bold sm:text-4xl text-white"
+                alt="Profile picture of user 2f2c20e6-ffef-4206-9433-58bf709849af"
+                src="https://example.org/pictures/1b92c3c9-2b4b-438d-9250-c7f01a81a09a"
+              />
+            </li>
+          </ul>
+          <ol class="mt-6">
+            <li class="bg-white p-6">
+              <a href="#" target="_blank" class="flex-col md:pl-64 flex-1 flex">
+                This is link aefd9423-f4de-4944-a7e2-262c8be52ea3
+              </a>
+              <ol
+                class="text-base font-medium p-2 text-blue-gray-600 rounded-md items-center flex group hover:text-blue-gray-900 hover:bg-blue-gray-50"
+              >
+                <li
+                  class="-ml-6 sm:ml-auto absolute ring-opacity-5 w-60 ring-1 rounded-lg focus:outline-none sm:text-sm bg-white mt-1 sm:w-64 z-10 text-base py-3 shadow ring-black"
+                >
+                  This is item ad0e87d9-f7af-4e3f-bb21-0ab1efbdb91a
+                </li>
+                <li class="absolute bottom-0 inset-x-0 bg-gray-100 h-1/2">
+                  This is item a78c8836-2495-46a5-97e3-d49a8b976f5e
+                </li>
+                <li class="sr-only">This is item b619479a-25fa-4f48-9c5e-3f77089d23ba</li>
+                <li class="items-center flex space-x-3 mt-4">
+                  This is item b4d63262-ae95-4e8d-961d-72eb7ce93612
+                </li>
+              </ol>
+              <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                This is link 1e49b1a4-8956-4069-b0f3-4e826efdc82a
+              </a>
+            </li>
+            <li class="h-5 w-5 text-indigo-600">
+              <ul class="font-bold text-4xl sm:text-5xl text-gray-900 tracking-tight">
+                <li class="inset-0 absolute rounded-md overflow-hidden">
+                  This is item 14f4004a-f3b1-4b2e-a5b7-3677fedb584e
+                </li>
+                <li class="mt-2 sm:mt-0">This is item 30fba329-c1a1-4b00-b738-a1a057c37680</li>
+                <li class="flex h-7 mx-auto items-center rounded-full w-7 justify-center">
+                  This is item de4e5c27-05c6-40b2-ad52-5a10727ed14b
+                </li>
+                <li class="w-4 border-gray-300 focus:ring-indigo-500 rounded text-indigo-600 h-4">
+                  This is item 25861be0-48b2-4819-aa7b-45eea061862d
+                </li>
+              </ul>
+              <ul class="mx-auto lg:px-8 sm:px-6 max-w-7xl">
+                <li class="hover:text-gray-600 text-gray-500">
+                  This is item e0b62228-fa56-4d7d-b548-0ee6a6a9359d
+                </li>
+                <li class="hover:text-gray-600 text-gray-500">
+                  This is item 8aa7e970-aa22-4094-8acd-f66db9e830a2
+                </li>
+                <li
+                  class="focus:outline-none pl-3 sm:text-sm w-full py-2 border-gray-300 focus:border-indigo-500 block focus:ring-indigo-500 pr-10 text-base rounded-md"
+                >
+                  This is item a99f29b1-a833-4a29-8b6a-47146d2312ba
+                </li>
+              </ul>
+              <ol class="sm:flex sm:items-center sm:justify-between">
+                <li class="text-gray-900 block font-medium mt-6">
+                  This is item e5945d2a-e170-4edd-92c8-3e079553b84a
+                </li>
+                <li class="bg-gray-50">This is item 049cd986-6d56-4628-b704-98cef031b398</li>
+                <li class="gap-8 py-20 lg:grid-cols-4 grid-cols-2 sm:grid-cols-2 sm:gap-y-0 grid">
+                  This is item cbfea0b7-f033-46f0-8d01-7c904427a445
+                </li>
+                <li
+                  class="duration-200 bottom-0 ease-out inset-x-0 sm:mt-5 sm:translate-y-px transition-colors absolute h-0.5 sm:transform"
+                >
+                  This is item 6f997bbf-9db0-4cb6-aa12-830637a23e18
+                </li>
+                <li class="inset-y-0 items-center left-0 pl-3 absolute flex pointer-events-none">
+                  This is item de13db4d-72c8-442c-bbeb-917a2f08e7ba
+                </li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+      </ul>
+      <ul class="space-y-6 mt-6">
+        <li class="absolute inset-0">
+          <img
+            class="flex inset-0 fixed z-40"
+            alt="Profile picture of user 8ec4667f-8dfa-4aa2-a476-17efe1c010fd"
+            src="https://example.org/pictures/38b105d8-c732-4739-9790-d71d6a1414ee"
+          />
+          <img
+            class="lg:hidden"
+            alt="Profile picture of user 635fe4ea-2919-45eb-83e4-d8271097446e"
+            src="https://example.org/pictures/7b26cf54-c682-4f82-9a84-be79b122c28c"
+          />
+          <ul class="focus:z-10 bg-white hover:bg-gray-100 py-1.5">
+            <li class="h-7 flex items-center rounded-full w-7 mx-auto justify-center">
+              <ul class="bg-white">
+                <li class="inset-0 fixed bg-opacity-25 bg-black">
+                  This is item 814098f4-c99e-477d-ae1d-c0e970f26beb
+                </li>
+                <li
+                  class="font-medium focus:ring-offset-gray-50 bg-indigo-600 border border-transparent focus:ring-indigo-500 focus:ring-offset-2 py-3 focus:outline-none rounded-md focus:ring-2 hover:bg-indigo-700 px-4 text-white w-full text-base shadow-sm"
+                >
+                  This is item b23a8cd4-9a4b-425c-8c9c-707bda3584db
+                </li>
+                <li class="text-white h-12 w-12 opacity-25">
+                  This is item c64594c8-c0a8-428e-96bb-2c5eff02f3f8
+                </li>
+              </ul>
+            </li>
+            <li
+              class="lg:row-end-2 lg:col-span-3 lg:row-span-2 max-w-2xl mx-auto lg:max-w-none mt-14 lg:mt-0 sm:mt-16"
+            >
+              <a href="#" target="_blank" rel="noreferrer" class="text-sm text-gray-500 mt-6">
+                This is link 43447af4-852d-480d-a813-62719e0f0743
+              </a>
+            </li>
+            <li class="-m-2 p-2 font-medium block text-gray-900">
+              <ol class="text-3xl font-bold tracking-tight sm:text-4xl text-gray-900">
+                <li class="font-medium text-gray-500 hover:text-gray-600">
+                  This is item a0586145-433d-49b8-b19f-4b48b7abb1f8
+                </li>
+                <li class="h-12">This is item b8009ace-41d6-474a-a131-4d13cb5820c2</li>
+                <li class="sr-only">This is item e31414ec-580f-4947-8ba7-1ca01049bf1c</li>
+                <li class="h-5 w-5 text-gray-400">
+                  This is item fde81971-3334-457c-9c5a-229c5f850b18
+                </li>
+                <li class="bg-gray-50 hover:bg-gray-100 text-gray-400 py-1.5 focus:z-10">
+                  This is item f358ccd5-2d89-41a4-95e5-7a481e6ff53f
+                </li>
+              </ol>
+              <ol
+                class="bg-gray-700 justify-center focus:ring-2 w-full focus:ring-white border text-white py-2 border-transparent focus:ring-offset-2 focus:ring-offset-gray-900 px-4 font-medium hover:bg-gray-800 focus:outline-none items-center flex rounded-md text-base"
+              >
+                <li
+                  class="lg:col-span-4 lg:col-start-9 lg:row-start-1 md:col-start-3 mt-12 md:mt-0 md:row-start-2 md:col-span-8"
+                >
+                  This is item 3b0a6e0e-3079-4dcb-aada-d4180e37bc82
+                </li>
+                <li class="text-gray-500 text-sm gap-x-8 grid-cols-3 gap-y-10 grid">
+                  This is item 5bd164d8-d1d7-4b87-ba2b-28ee17193d49
+                </li>
+                <li class="space-y-10 mt-10">This is item 8e74ff55-b7f9-4c28-8d3c-4706ea629ca7</li>
+                <li class="px-3 text-gray-900 py-3.5 text-left text-sm font-semibold">
+                  This is item 886d56e6-0db6-4e28-99fb-320ed6ab1073
+                </li>
+                <li class="space-y-10 mt-12">This is item 4114e404-d58c-4f13-8cc4-0f5138c590b7</li>
+              </ol>
+              <ul class="flex">
+                <li class="text-base font-medium text-white">
+                  This is item ca3c8b79-9a07-4769-99c8-6dd50ffad4a5
+                </li>
+                <li class="sm:h-10 w-auto h-8">
+                  This is item f3d1a7bf-5344-4c36-b9a1-ea0e8c1efcd6
+                </li>
+              </ul>
+            </li>
+            <li class="lg:col-span-2 col-span-6 sm:col-span-3">
+              <a href="#" target="_blank" rel="noreferrer" class="w-64 mx-auto">
+                This is link 5da67059-d871-4122-927d-97b57808a967
+              </a>
+            </li>
+            <li class="object-cover w-full object-center group-hover:opacity-75 h-full">
+              <img
+                class="sticky z-20 left-0 -ml-14 text-gray-400 text-xs leading-5 text-right w-14 pr-2 -mt-2.5"
+                alt="Profile picture of user e5ae4aaa-6424-438d-8b19-e96169054814"
+                src="https://example.org/pictures/eaf1c9f7-ae23-48bc-acde-49e619efbdb2"
+              />
+            </li>
+          </ul>
+          <ul class="rounded-full mx-auto flex items-center justify-center h-7 w-7">
+            <li class="sr-only">
+              <ol class="text-left transition sm:my-8 text-base transform w-full max-w-3xl flex">
+                <li class="shadow overflow-hidden bg-white rounded-lg">
+                  This is item 24b0897f-837c-4a35-afe7-ee3c4628ecdc
+                </li>
+                <li
+                  class="rounded-md p-2 bg-white focus:ring-blue-500 justify-center hover:bg-gray-100 hover:text-gray-500 items-center focus:ring-inset focus:ring-2 inline-flex text-gray-400 focus:outline-none"
+                >
+                  This is item a6cbba1c-4b8f-4170-8fbe-c1329a80b55c
+                </li>
+              </ol>
+              <ul class="bg-gray-50 text-gray-400 relative hover:bg-gray-100 py-1.5 focus:z-10">
+                <li class="flex items-start">This is item d623c0e9-ef1b-4619-955f-9429d9b23c61</li>
+                <li class="pl-4 flex sm:pl-6">This is item 467746e2-3e45-4f26-991d-36aa88c4ad6c</li>
+                <li class="sm:grid sm:grid-cols-3 sm:px-6 sm:gap-4 bg-gray-50 py-5 px-4">
+                  This is item 6aba0127-da82-49ef-b3b8-3347a5bd0ccf
+                </li>
+              </ul>
+              <img
+                class="focus:ring-2 focus:ring-inset items-center hover:bg-gray-100 focus:outline-none bg-white rounded-md focus:ring-indigo-500 justify-center inline-flex p-2 hover:text-gray-500 text-gray-400"
+                alt="Profile picture of user 4c573264-284b-4841-b7a3-1463841c57bd"
+                src="https://example.org/pictures/aaa70532-a752-462d-bd33-4d66bc36302b"
+              />
+              <img
+                class="w-6 h-6"
+                alt="Profile picture of user 887910ff-0112-49d1-b230-c386750c6d81"
+                src="https://example.org/pictures/e0e125aa-7d7c-45d6-8df6-e189fbe5e6be"
+              />
+            </li>
+            <li class="w-4 h-4 text-indigo-300">
+              <ul class="relative">
+                <li class="w-5 h-5 flex-shrink-0 text-gray-500">
+                  This is item 00e5b7df-36a3-4203-9849-0e04f3fc6b92
+                </li>
+                <li class="mt-1">This is item 7ef2ef9d-d635-45ac-85aa-b521c27da03c</li>
+                <li class="text-indigo-600 hover:text-indigo-500">
+                  This is item 1b150360-8284-43be-8fc4-1e9ff3042332
+                </li>
+                <li class="items-center flex mt-6">
+                  This is item 9319575d-51ef-4cdc-b1c8-0397eb6edf09
+                </li>
+                <li class="relative">This is item b82de6b8-8ea0-4d37-bfba-49776a4b4d8e</li>
+              </ul>
+              <ol class="h-5 w-5">
+                <li class="relative">This is item 7014dbd0-20d2-4a5e-aa54-f57f8ad2e0c1</li>
+                <li class="text-teal-200 hover:text-teal-100">
+                  This is item 4989db0d-2a75-4152-aed7-6e6684924d00
+                </li>
+                <li
+                  class="text-sm justify-center inline-flex hover:text-gray-900 font-medium group text-gray-700"
+                >
+                  This is item 5eb99884-f60d-4c60-b70f-ce10af3e5827
+                </li>
+              </ol>
+              <a href="#" target="_blank" class="text-indigo-700 w-6 h-6">
+                This is link 4e984f9a-5012-41a1-8a7a-ef57f75a7cd9
+              </a>
+            </li>
+            <li class="h-12">
+              <img
+                class="inline-flex rounded-md shadow-sm isolate"
+                alt="Profile picture of user a910fe6f-6273-499c-b66c-2f5f0cc4e435"
+                src="https://example.org/pictures/594f626c-1fff-4bda-8592-993c1d66c99f"
+              />
+              <ol class="h-5 flex-shrink-0 w-5">
+                <li class="items-center mx-auto rounded-full justify-center flex h-7 w-7">
+                  This is item 3b375efe-c0e9-4f57-9fab-65acb49e14b9
+                </li>
+                <li class="w-6 h-6">This is item cb3d461c-b942-47ab-96e8-479644581059</li>
+                <li class="lg:px-8 sm:px-6 max-w-7xl mx-auto sm:pt-16">
+                  This is item 6ad13bd2-c833-444a-a3e3-72d42fc0f589
+                </li>
+                <li class="text-gray-400 lg:hidden p-2 rounded-md bg-white">
+                  This is item 4c669a1e-3d08-4344-af1f-f4163a27e48f
+                </li>
+              </ol>
+            </li>
+            <li class="shadow ring-black lg:flex-col lg:flex ring-opacity-5 ring-1 lg:flex-auto">
+              <img
+                class="mt-4 text-gray-900 text-sm"
+                alt="Profile picture of user 3c5a4a7b-2326-4652-8782-1a1ef90e4446"
+                src="https://example.org/pictures/ec96954c-c5e4-439d-a2d2-aee8427fe1ca"
+              />
+            </li>
+            <li class="sm:overflow-hidden shadow sm:rounded-md">
+              <a href="#" class="sm:flex-none sm:ml-16 sm:mt-0 mt-4">
+                This is link 605d29ba-89f0-43d0-a1fd-afab4e6937bc
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="fixed flex inset-0 z-40">
+          <a href="#" target="_blank" rel="noreferrer" class="text-sm block px-4 py-2">
+            This is link 1750e28c-1a3c-4cca-9398-2be2a29579cd
+          </a>
+          <ul class="text-gray-500">
+            <li class="hover:text-gray-500 text-gray-400">
+              <ol class="flex-shrink-0">
+                <li class="border-gray-200 py-20 border-t">
+                  This is item 7fb37267-1823-487c-923e-de855da5b276
+                </li>
+                <li class="text-white mt-auto text-center font-bold relative text-xl">
+                  This is item 1d6ba5ec-530b-4517-ad44-c8e63061d9ac
+                </li>
+              </ol>
+            </li>
+            <li
+              class="sm:items-baseline px-4 sm:flex sm:justify-between sm:px-0 space-y-2 sm:space-y-0"
+            >
+              <ul class="text-sm mt-6 text-gray-500">
+                <li class="text-indigo-600">This is item b99d4e29-2927-4d79-b286-13e1668d31d1</li>
+                <li class="flex-col lg:w-auto text-center inline-flex w-64">
+                  This is item 9d0eacba-9c3b-4ced-82bd-a69f9ec63297
+                </li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="pt-8 md:flex md:items-center md:justify-between border-t border-gray-200 mt-8"
+              >
+                This is link 61fd992b-a9cd-4b42-a6db-3077f85263bb
+              </a>
+            </li>
+            <li class="w-6 h-6">
+              <ul class="mt-4 sm:flex sm:mt-6">
+                <li class="text-sm font-medium text-gray-400">
+                  This is item 12a3396f-252e-4c66-9aef-61276740710d
+                </li>
+                <li class="inset-0 absolute z-10">
+                  This is item f368116c-2f42-4052-8a72-4ced4a5a8fcd
+                </li>
+                <li class="sr-only">This is item 77712eff-07fc-4b5a-aa4f-768c4c201eab</li>
+              </ul>
+              <ul
+                class="bg-indigo-50 block text-base pl-3 py-2 font-medium border-l-4 border-indigo-500 text-indigo-700 pr-4"
+              >
+                <li
+                  class="bg-white flex-col py-2 text-gray-900 flex px-3 hover:bg-gray-100 focus:z-10 h-14"
+                >
+                  This is item e3fbcd78-5a7b-412c-925b-dbfb5b8450fc
+                </li>
+                <li
+                  class="border items-center flex hover:text-gray-500 border-transparent p-2 rounded-full text-gray-400 -mx-2"
+                >
+                  This is item 62371d1a-0fc2-46c5-bf59-fd137fb2d369
+                </li>
+                <li class="right-0 pt-4 -mr-12 top-0 absolute">
+                  This is item 2ad07de5-1ef1-43d8-a597-178cda3e57b6
+                </li>
+                <li class="text-center">This is item 53747a87-bd31-4d22-a5a6-b2f40825655f</li>
+              </ul>
+              <a href="#" rel="noreferrer" class="text-gray-600 bg-gray-200">
+                This is link 10e489ef-494a-4258-b5b2-dd2e69b0208c
+              </a>
+              <img
+                class="shadow-sm items-center focus:ring-2 justify-center text-sm rounded-md border bg-white hover:bg-gray-50 px-2.5 focus:ring-offset-2 text-gray-700 focus:outline-none flex focus:ring-indigo-500 font-medium border-gray-300 py-2"
+                alt="Profile picture of user 730095ce-0913-49f8-b172-02b8812aea64"
+                src="https://example.org/pictures/6fd1bb3d-0fbd-4b0a-9d91-e6f29f8743be"
+              />
+            </li>
+            <li class="border-b px-4 flex-auto sm:px-0 border-gray-200">
+              <ol class="flex items-start">
+                <li class="mt-1">This is item 1597a27a-a339-47d3-be5a-49d44e97719f</li>
+                <li class="bg-gray-50">This is item 4194d35e-6f14-4f2b-8ce6-6bf82d51378b</li>
+                <li class="border-l border-gray-300 inline-block">
+                  This is item a3551818-df64-4b4e-9a86-d0b02b5e61b5
+                </li>
+              </ol>
+              <ol class="items-center flex space-x-4">
+                <li class="text-gray-900 text-sm mt-1">
+                  This is item 4c23c735-39e3-4bfa-bf36-ceee45051410
+                </li>
+                <li class="leading-8 text-gray-900 text-lg font-semibold ml-10">
+                  This is item 6beb081b-b3ca-4245-986f-1a266bb31e57
+                </li>
+                <li class="shadow-sm bg-white">
+                  This is item c70579b5-b239-4aae-a1cf-1317bc987c0c
+                </li>
+                <li class="sr-only">This is item 3e33369f-7fff-4fbe-ae89-45cf538b6587</li>
+              </ol>
+              <img
+                class="hover:bg-gray-50 hover:text-gray-900 text-gray-600"
+                alt="Profile picture of user e5aa7162-05d0-4297-bd40-819a6c4eaad5"
+                src="https://example.org/pictures/b46eaa53-5e06-4a3b-9706-0b5c5a497068"
+              />
+              <ol class="sr-only">
+                <li class="group-hover:text-gray-500 mr-4 w-6 text-gray-400 h-6">
+                  This is item 6667dbbd-249d-4949-8869-08254c4d3532
+                </li>
+                <li class="items-center flex h-7 w-7 rounded-full mx-auto justify-center">
+                  This is item f3dd9562-ad9c-4446-9751-4a738fec5c2c
+                </li>
+                <li class="sm:pt-0 font-medium sm:block text-gray-900 pt-6 flex justify-between">
+                  This is item d4090540-2afe-4332-a55f-728c4a9e2eed
+                </li>
+                <li class="hidden text-center md:block">
+                  This is item eed2748e-665e-42d6-be3b-aa2863f9d5f5
+                </li>
+              </ol>
+            </li>
+            <li class="border-t border-gray-200 mt-12 pt-8">
+              <ul class="w-7 h-7 rounded-full items-center justify-center mx-auto flex">
+                <li class="mt-6 flow-root">This is item 924fe7e4-7d53-4938-bf12-8bb737948221</li>
+                <li class="overflow-y-scroll h-full flex-col shadow-xl flex bg-white">
+                  This is item 30d61253-37a0-4c97-839a-a989b7ee0e6b
+                </li>
+                <li class="inline-block relative">
+                  This is item 6573e7bf-742a-40dc-b4dd-ea482933d85b
+                </li>
+                <li class="space-x-6 flex">This is item 79eeee22-a096-4e09-a22e-2b89737c1df5</li>
+                <li
+                  class="py-2 bg-indigo-600 rounded-full border-transparent font-medium focus:ring-2 border focus:outline-none text-white items-center focus:ring-indigo-500 shadow-sm text-sm focus:ring-offset-2 inline-flex hover:bg-indigo-700 px-4"
+                >
+                  This is item 274319c9-1013-4696-aeec-ec1b706b773e
+                </li>
+              </ul>
+              <ol class="absolute inset-0">
+                <li class="rounded-full w-10 h-10">
+                  This is item a4993e72-4055-4a4c-9a9b-8a4a4aff03fe
+                </li>
+                <li class="mx-auto max-w-4xl">This is item 7763a903-c7cd-4439-a821-ba5c68e05eca</li>
+                <li class="py-6">This is item bfeb2930-6175-4f4d-b898-20e811c6b19c</li>
+                <li class="text-center">This is item b8451827-4ab6-419b-8202-db3c543e8e0b</li>
+              </ol>
+              <img
+                class="grid-cols-2 xl:col-span-2 mt-12 gap-8 grid xl:mt-0"
+                alt="Profile picture of user 61102ceb-1e28-462e-ab38-9774b566ff0c"
+                src="https://example.org/pictures/5c8315ec-ba27-46f5-906d-13d600cb743c"
+              />
+            </li>
+          </ul>
+          <img
+            class="shrink-0 w-4 h-4 mt-0.5 cursor-pointer"
+            alt="Profile picture of user c9bd7da0-2287-4f2b-a4c4-b9087f8e85e5"
+            src="https://example.org/pictures/fc99b5c1-cc8d-4f2e-a136-e7fd0fd91653"
+          />
+        </li>
+        <li class="sr-only">
+          <a href="#" target="_blank" class="text-sm text-gray-600">
+            This is link 3f4e88d7-435b-40cb-84c7-9a80f92aa863
+          </a>
+          <ol class="bg-gray-100 overflow-hidden aspect-h-1 aspect-w-1 rounded-lg">
+            <li
+              class="ml-auto hover:text-gray-500 focus:ring-offset-2 text-gray-400 focus:ring-blue-500 flex-shrink-0 focus:outline-none rounded-full p-1 focus:ring-2 bg-white"
+            >
+              <ol class="sm:py-16 mt-24 sm:mt-32 relative">
+                <li class="hover:bg-gray-100 py-1.5 bg-white focus:z-10">
+                  This is item c489aad2-d06a-47a0-9eaa-9d525b33ae81
+                </li>
+                <li class="pl-4 w-1/4 -mt-px">This is item 1d332acc-9702-4557-aa24-561e4e3e14ea</li>
+                <li class="sm:px-0 px-4">This is item f97daf83-623e-4add-8431-b2ffffb0a156</li>
+                <li class="mx-auto sm:px-6 lg:px-8 py-12 max-w-7xl px-4">
+                  This is item cc2aa40f-c846-4e9e-8c33-0d70494f8446
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-white font-medium ml-3 truncate"
+              >
+                This is link d84d15c4-46e3-4901-ba67-6dfff30bd1cc
+              </a>
+            </li>
+            <li class="max-w-7xl sm:px-6 sm:mt-24 mt-16 mx-auto px-4">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="lg:max-w-none mx-auto max-w-2xl px-4"
+              >
+                This is link a68d55ae-b7a1-4073-a699-95e061b00e24
+              </a>
+            </li>
+          </ol>
+          <ol class="font-medium text-gray-900 text-base">
+            <li class="grid-cols-2 grid gap-x-4">
+              <ol class="sm:space-y-4 sm:mt-4 space-y-6 mt-6">
+                <li
+                  class="text-gray-500 flex-none hidden ml-3 xl:block group-hover:text-indigo-600"
+                >
+                  This is item e7643b1b-54e6-4658-b812-e368188049aa
+                </li>
+                <li class="-my-3 flow-root -mx-2">
+                  This is item 2b44ad48-70f6-454a-bc66-358123ac782c
+                </li>
+                <li class="h-12">This is item d2133271-1cb6-40c6-85d3-a35af5bf3a34</li>
+                <li class="font-medium text-lg text-gray-900">
+                  This is item e0d7d87b-bc52-41b2-bbd1-8d5ce8551ac1
+                </li>
+                <li class="text-sm">This is item 37ffcb10-7198-4f3f-a6fc-a8a52401db15</li>
+              </ol>
+              <ul class="grid-cols-2 grid gap-y-10 gap-x-8">
+                <li class="w-auto h-8">This is item 7dfbe6ed-2be5-461f-ac96-e7dbebf5ab33</li>
+                <li class="sr-only">This is item 3aba80bd-ae5d-4f1f-a76f-e7ac33d7ee8d</li>
+                <li class="sr-only">This is item 0be32d9e-c1e2-4f5c-bef0-873355b508e6</li>
+                <li class="max-w-7xl mx-auto px-8">
+                  This is item 61ef412a-65f7-4719-b61c-0e934fea09d4
+                </li>
+              </ul>
+            </li>
+            <li class="px-4 py-6 absolute sm:px-6 inset-0">
+              <img
+                class="sr-only"
+                alt="Profile picture of user 3f00a703-96e8-4003-9eb8-692637f3f0e1"
+                src="https://example.org/pictures/f0ba9a28-b1ae-453b-8f39-fd515abfe9aa"
+              />
+              <ol class="ml-4 flex-shrink-0">
+                <li class="bg-gray-800 p-8">This is item 850fc236-c688-4182-91f8-7e75007102c3</li>
+                <li
+                  class="overflow-y-auto max-w-xs shadow-xl flex w-full ml-auto relative bg-white h-full py-4 flex-col pb-6"
+                >
+                  This is item c88e601a-2a4c-492e-af16-67771ddb81e3
+                </li>
+                <li class="absolute items-center flex right-0 pointer-events-none inset-y-0">
+                  This is item ed8e3539-a7b7-40f9-9c89-fd8569430bff
+                </li>
+                <li
+                  class="focus:ring-offset-2 bg-white focus:ring-indigo-500 rounded-md focus:outline-none text-sm focus:ring-2 ml-6 font-medium text-indigo-600 hover:text-indigo-500"
+                >
+                  This is item 68455b0e-76b8-4331-8d87-42ca9ea79cb1
+                </li>
+                <li class="-m-3 rounded-lg items-start flex p-3 hover:bg-gray-50">
+                  This is item 5568bb6e-c1b7-4714-bc08-38b8a0a27476
+                </li>
+              </ol>
+              <ol class="text-sm pt-1 items-center font-medium border-b-2 px-1 inline-flex">
+                <li
+                  class="left-0 -translate-y-2 text-gray-200 w-8 -translate-x-3 h-8 top-0 absolute transform"
+                >
+                  This is item 30afd3b1-7996-400a-bb09-a31f1e7e2eea
+                </li>
+                <li class="text-sm text-gray-500">
+                  This is item b76c7ab1-d53c-48d1-85dd-40abfbc659ce
+                </li>
+                <li class="py-5 sm:px-6 px-4">This is item 18f92394-f42b-4ab1-b748-988c10559de6</li>
+              </ol>
+              <img
+                class="flow-root"
+                alt="Profile picture of user f56b6658-b3fb-4f29-9a40-557b15b5966c"
+                src="https://example.org/pictures/33f89223-7aaf-4d2e-a31c-9c09659ea613"
+              />
+            </li>
+            <li class="w-full absolute h-full inset-0">
+              <img
+                class="border-gray-200 border-t"
+                alt="Profile picture of user 13c58e04-25e3-48b5-909d-22061101a27c"
+                src="https://example.org/pictures/67ef4312-a3d5-45d0-8dbe-c09450fd92ab"
+              />
+              <img
+                class="px-4 lg:py-16 lg:px-8 py-12 mx-auto sm:px-6 max-w-7xl"
+                alt="Profile picture of user e6f1fb8d-3547-4d7c-bd12-ccd91b5ee28d"
+                src="https://example.org/pictures/573de3e9-4547-49f5-ba31-962364ff2612"
+              />
+              <img
+                class="sr-only"
+                alt="Profile picture of user b3064b42-84d8-4ca6-a1c6-556e019cc17e"
+                src="https://example.org/pictures/7cfd9111-ba0c-47a6-8484-b2643b80ba00"
+              />
+              <ol
+                class="w-full block border-gray-300 sm:text-sm min-w-0 rounded-r-md flex-1 focus:border-indigo-500 rounded-none focus:ring-indigo-500"
+              >
+                <li class="flex-col space-y-6 flex mt-6">
+                  This is item a24d67cd-325e-40b9-94d8-cadbe05f173c
+                </li>
+                <li class="flex-1 px-4 py-6 relative sm:px-6">
+                  This is item de9d4c82-628e-4a0d-8ded-4bcd9f9a1792
+                </li>
+              </ol>
+            </li>
+            <li class="bg-gray-100 py-10">
+              <ul
+                class="pt-8 border-t md:items-center mt-8 md:flex border-gray-700 md:justify-between"
+              >
+                <li
+                  class="h-8 text-base items-center font-semibold flex w-8 mt-3 justify-center rounded-full text-gray-900"
+                >
+                  This is item 80077062-1ea7-40f3-897e-cb7373708173
+                </li>
+                <li class="sm:py-32 lg:px-8 lg:max-w-7xl sm:px-6 max-w-2xl py-24 px-4 mx-auto">
+                  This is item 729a6494-a1bb-4f59-95d5-2ab56fc79226
+                </li>
+                <li class="w-6 h-6">This is item 582c4d63-4058-4026-8140-738b19f483c6</li>
+              </ul>
+              <ol class="rounded-lg overflow-hidden bg-gray-200">
+                <li class="w-7 justify-center h-7 flex rounded-full items-center mx-auto">
+                  This is item 041af07f-a618-418a-9883-041a49c2bdca
+                </li>
+                <li class="mt-1 text-gray-500 text-sm">
+                  This is item 65d67767-ee86-4108-8f76-5e2b93b3121c
+                </li>
+              </ol>
+              <a href="#" target="_blank" class="h-full justify-center flex space-x-8">
+                This is link 57c42f41-9b97-41a4-881b-8fc475fa0c70
+              </a>
+            </li>
+          </ol>
+          <ul class="h-full p-6">
+            <li class="h-10 w-10 rounded-full">
+              <a href="#" rel="noreferrer" class="font-semibold text-xl text-gray-900">
+                This is link 6abed5b0-2789-4265-a0cf-f0463e5d99ba
+              </a>
+              <ol
+                class="text-gray-900 pl-4 whitespace-nowrap pr-3 font-medium sm:pl-6 text-sm py-4"
+              >
+                <li class="h-5 w-5">This is item 2f06bd71-a9c2-40ce-9a72-f8fce0764a3e</li>
+                <li class="ml-3">This is item bbadb0a4-87f3-424c-b4df-0363b2eed25e</li>
+                <li class="sr-only">This is item 879502c8-241e-4273-af32-645bca8e7f51</li>
+                <li class="inset-0 absolute">This is item 8eacbdf2-0e1a-4432-8ceb-431390c31971</li>
+              </ol>
+            </li>
+            <li class="hover:text-gray-700 hover:border-gray-300 border-transparent text-gray-500">
+              <img
+                class="lg:px-0 z-10 flex relative px-2"
+                alt="Profile picture of user c31ecc18-8b8f-4df6-986b-ebca6811a274"
+                src="https://example.org/pictures/80d831bc-fd7d-4c27-953d-8af402186a73"
+              />
+              <ul class="bg-white">
+                <li
+                  class="space-y-4 items-center sm:space-y-0 sm:items-end sm:flex-row flex sm:justify-around max-w-3xl justify-start flex-col mx-auto"
+                >
+                  This is item 545bbe42-3837-46a7-bccb-9e19d577676c
+                </li>
+                <li class="lg:gap-x-8 space-y-16 mt-16 lg:space-y-0 lg:grid-cols-3 lg:grid">
+                  This is item f939c04a-5bf0-43ee-84ae-ff436280e8a0
+                </li>
+                <li class="sr-only">This is item de15e145-965a-43c5-ac40-4adba35d71d9</li>
+                <li class="h-5 w-5 text-green-400 flex-shrink-0 mr-1.5">
+                  This is item 9ad2db9c-8e4f-49c0-8a6d-be7645d54446
+                </li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                class="shadow-sm hover:bg-indigo-700 rounded-md border-transparent border font-medium focus:ring-indigo-500 justify-center bg-indigo-600 text-sm focus:outline-none focus:ring-offset-2 px-4 inline-flex py-2 ml-3 text-white focus:ring-2"
+              >
+                This is link dcc0c909-0d4d-4c75-9791-642038264866
+              </a>
+            </li>
+            <li class="p-8 bg-white justify-center flex items-center">
+              <ul
+                class="px-4 sm:shadow-none py-3 rounded-lg sm:rounded-none sm:ring-0 sm:p-0 sm:bg-transparent relative bg-white"
+              >
+                <li class="h-6 w-6 rounded-full">
+                  This is item 123d7cd9-99fe-41c1-802b-c52866977c50
+                </li>
+                <li class="w-auto h-8">This is item 02432b20-ca0e-4eb4-b16c-a99ba3326b33</li>
+                <li
+                  class="text-gray-900 flex text-base duration-150 -m-3 rounded-md hover:bg-gray-100 p-3 items-center transition ease-in-out font-medium"
+                >
+                  This is item 7133a22c-f6ee-4c66-84a0-bacdd05538a5
+                </li>
+              </ul>
+              <img
+                class="lg:col-span-2 sm:grid-cols-3 grid-cols-2 grid text-sm sm:col-span-3 flex-1 gap-x-6"
+                alt="Profile picture of user a721aca4-9c11-4850-bb41-18f30f686b89"
+                src="https://example.org/pictures/1b8fe5cb-436a-43b1-af09-338018ef16ed"
+              />
+            </li>
+            <li class="flex-1 truncate">
+              <a href="#" target="_blank" class="text-gray-700 text-sm mt-4">
+                This is link 264dd6c8-506c-48ef-ad07-38719361f15e
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="flex-shrink-0 ml-1 w-5 group-hover:text-gray-500 -mr-1 h-5 text-gray-400">
+          <ul class="py-6 border-gray-200 px-4 space-y-6 border-t">
+            <li class="flex-1 min-w-0 ml-3 text-gray-600">
+              <ol
+                class="gap-x-6 grid text-sm lg:col-span-2 flex-1 grid-cols-2 sm:col-span-3 sm:grid-cols-3"
+              >
+                <li class="items-center inset-y-0 right-0 px-2 pointer-events-none absolute flex">
+                  This is item d4c99761-2872-4ff2-9e56-990d34cbbe05
+                </li>
+                <li class="block">This is item 91e726b3-0730-493c-8956-a275c802a0a7</li>
+                <li class="bg-gray-900">This is item e56110cd-ad04-486c-9576-e3e7042c0d8f</li>
+                <li class="px-5 py-6">This is item 93febb42-4830-48c1-9941-05295fd5d9dd</li>
+                <li class="sr-only">This is item 49ca3ff8-3fec-472a-bec7-53e49d90a3b7</li>
+              </ol>
+              <ul class="flex md:hidden -mr-2">
+                <li class="mx-auto relative items-center text-center flex flex-col max-w-3xl">
+                  This is item e9d9f639-db7a-4c32-9ac1-1938236ec1cb
+                </li>
+                <li class="flex-1 min-w-0">This is item 81bdfdc5-d056-4ca8-ae1e-d7e769b7e13b</li>
+                <li class="space-y-6 sm:mt-4 sm:space-y-4 mt-6">
+                  This is item be9f5d55-4502-4ded-a5b1-50d0e4dda545
+                </li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="px-4 items-center rounded-md text-base inline-flex py-2 text-white hover:bg-gray-700 font-medium border-transparent bg-gray-600 border"
+              >
+                This is link 2b2fd4f4-7b7b-4734-a0e8-0c72600c0632
+              </a>
+              <ol class="py-1.5 bg-white focus:z-10 hover:bg-gray-100">
+                <li class="rounded-full justify-center items-center flex mx-auto w-7 h-7">
+                  This is item d04b41a2-4b47-46c2-bbc8-2382c7aa2280
+                </li>
+                <li class="ml-3 sm:hidden relative">
+                  This is item 6b85cda2-6992-493b-a29e-d716808f8cb6
+                </li>
+              </ol>
+            </li>
+            <li class="w-6 text-gray-400 mx-auto h-6">
+              <ol class="items-center flex">
+                <li
+                  class="justify-center sm:text-sm text-base shadow-sm border inline-flex px-4 border-transparent focus:ring-offset-2 rounded-md text-white focus:ring-2 bg-red-600 font-medium w-full hover:bg-red-700 focus:outline-none py-2 sm:w-auto focus:ring-red-500"
+                >
+                  This is item 758b2cf0-c9fc-4a64-a6d7-0e291fd57e11
+                </li>
+                <li class="text-sm group-hover:text-blue-gray-700 text-blue-gray-500 font-medium">
+                  This is item 0f5965e6-b626-44b9-b22d-1a051003ff69
+                </li>
+              </ol>
+            </li>
+            <li class="sm:w-2/5 pr-8 lg:w-1/3 font-normal py-3">
+              <ul class="flex">
+                <li class="py-10 grid-cols-2 grid border-t text-sm gap-x-6 border-gray-200">
+                  This is item 71599fcc-bdec-43c3-aaa2-c0ffdc376e3a
+                </li>
+                <li class="ml-3 text-gray-500">
+                  This is item 4f1db426-556c-45c2-86f1-0ef5398788d8
+                </li>
+              </ul>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="ring-0 h-5 w-5 duration-200 inline-block shadow ease-in-out rounded-full transform transition bg-white"
+              >
+                This is link 96f4fa4c-e6c0-4e71-a119-9353cc308b25
+              </a>
+              <img
+                class="focus:z-10 text-gray-900 px-3 py-2 bg-white hover:bg-gray-100 flex-col flex h-14"
+                alt="Profile picture of user 2d94ff47-6147-48e7-9316-67659a65593c"
+                src="https://example.org/pictures/1c49b7da-798c-4f20-ad83-e379a54fe68a"
+              />
+              <ul
+                class="absolute right-10 rounded-md top-3 ring-1 ring-black divide-gray-200 divide-y mx-3 origin-top-right w-48 ring-opacity-5 bg-white mt-1 z-10 shadow-lg focus:outline-none"
+              >
+                <li class="divide-gray-200 divide-y opacity-25">
+                  This is item 13a345c2-0134-49c9-bf04-fe6391a9e770
+                </li>
+                <li class="mt-1">This is item 8a67297d-f001-447f-988d-64e32de6c303</li>
+                <li class="py-1.5 relative text-gray-900 focus:z-10 bg-white hover:bg-gray-100">
+                  This is item 7c888bf4-a4f5-477b-9ca3-879926df6b1b
+                </li>
+                <li class="sm:flex mt-8">This is item ce3f5d7a-5267-4711-a691-0eb876a0377d</li>
+              </ul>
+            </li>
+            <li class="focus:z-10 hover:bg-gray-100 py-1.5 bg-white">
+              <img
+                class="text-yellow-400"
+                alt="Profile picture of user eb88c669-7f51-4a62-8590-0698c1b78c23"
+                src="https://example.org/pictures/f4005435-afae-4589-962b-a1b6d7daec1e"
+              />
+            </li>
+            <li class="h-12 mx-auto w-auto">
+              <ol class="text-gray-700 block text-sm font-medium">
+                <li class="hover:bg-gray-50 block">
+                  This is item 820ccfad-2a5c-4dc1-990b-cfcf87b64971
+                </li>
+                <li
+                  class="xl:border-l flex items-start xl:border-opacity-50 xl:mt-0 xl:pl-3.5 xl:ml-3.5 mt-2 space-x-3 xl:border-gray-400"
+                >
+                  This is item daf4a475-94fc-490a-a4b3-ac89bea68449
+                </li>
+                <li class="group text-sm items-center rounded-md py-2 flex font-medium px-2">
+                  This is item 71f0d9c0-b948-4746-83a7-01f62281fe74
+                </li>
+                <li class="flex-1 pb-4 px-2 space-y-1">
+                  This is item 10fe916b-7496-4090-98df-799a9ba1cdee
+                </li>
+                <li class="sr-only">This is item 611a6a92-3680-4a52-9a26-370ab2c11476</li>
+              </ol>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="px-4 from-purple-600 bg-gradient-to-r shadow-sm rounded-md py-2 border inline-flex to-indigo-600 hover:to-indigo-700 text-base border-transparent font-medium bg-origin-border hover:from-purple-700 text-white"
+              >
+                This is link b0f3dec1-c308-40f7-9590-0f089e33b216
+              </a>
+              <ol class="items-center flex text-gray-500 text-sm">
+                <li class="whitespace-nowrap text-gray-900 text-sm pr-3 py-4 font-medium">
+                  This is item bc8c3cd0-40c1-476c-aa19-864c527ceff7
+                </li>
+                <li class="max-w-7xl lg:px-8 sm:px-6 mx-auto py-6">
+                  This is item 26f8cb32-12a7-440e-8d07-e41511eb6638
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="border-opacity-10 border-t text-sm space-y-6 font-medium border-white pt-6"
+          >
+            This is link bcf2135b-4ef0-46c8-8133-5e1e88a0cd12
+          </a>
+        </li>
+      </ul>
+      <a href="#" target="_blank" class="relative bg-white">
+        This is link 1304c937-eb73-448a-9805-bad4fff0b66e
+      </a>
+    </li>
+    <li class="-ml-2 p-2 text-white">
+      <ol class="space-y-1 pb-4 pt-2">
+        <li class="flex-1 flex justify-center">
+          <img
+            class="p-2"
+            alt="Profile picture of user b069426a-c112-478f-94dc-84e5b151bacc"
+            src="https://example.org/pictures/d26ea161-ef44-42eb-8544-9fe716c858c2"
+          />
+          <ol class="object-center object-cover">
+            <li class="mt-6">
+              <img
+                class="sm:flex sm:flex-row-reverse mt-5 sm:mt-4"
+                alt="Profile picture of user c5668d02-1637-4902-a37c-0aa821a72d33"
+                src="https://example.org/pictures/3d20aed8-fc34-4e88-8cad-06df2df05a4f"
+              />
+              <ol class="w-full h-72 overflow-hidden rounded-lg relative">
+                <li class="mt-6">This is item 94e842aa-6c6d-4f51-bb76-a6804baa2239</li>
+                <li class="hover:text-gray-800 font-medium text-gray-700 text-sm">
+                  This is item 81a2c68a-121f-4920-b094-4d2d15088497
+                </li>
+                <li class="mt-4 flex">This is item 2e2f6fb0-2b1a-4e7b-81f2-b794048ba8a2</li>
+                <li class="inline-flex ml-3">This is item 9a97a474-1810-473b-a82b-5087bab50caf</li>
+                <li class="w-6 h-6">This is item 8bd97327-1c73-40e6-a89c-ac9d37465977</li>
+              </ol>
+              <ol class="grid-rows-1 grid-cols-1 grid flex-auto">
+                <li class="text-center text-sm mt-6">
+                  This is item 735c0b3b-78e4-4c13-ae78-f5ef2300ddfd
+                </li>
+                <li class="overflow-hidden bg-gray-100 aspect-h-3 aspect-w-4 rounded-lg">
+                  This is item 9dcb3726-dd4f-42f1-8c9d-c2c9741e2a73
+                </li>
+              </ol>
+              <img
+                class="truncate text-sm text-gray-500"
+                alt="Profile picture of user 7637a190-f800-4beb-b19a-87656323cd3e"
+                src="https://example.org/pictures/274fcf2e-5585-4765-a880-48af974f4f8d"
+              />
+            </li>
+            <li class="-m-2 flex items-center p-2">
+              <img
+                class="text-sm hover:text-gray-800 text-gray-700 font-medium"
+                alt="Profile picture of user b1643d07-cf1d-438e-b73f-647d27bcf932"
+                src="https://example.org/pictures/34ce5237-e8ea-4776-8b66-20904bc04835"
+              />
+              <ol class="text-sm mt-4">
+                <li class="p-2 ml-2 text-gray-400 hover:text-gray-500">
+                  This is item 25f0879f-bf31-46db-b53c-eb74232db3f5
+                </li>
+                <li class="font-semibold text-gray-900 text-base mt-4">
+                  This is item 17f449e1-6f2a-4368-990c-15a3a9ad3f39
+                </li>
+                <li class="text-gray-500 hover:text-gray-600">
+                  This is item 27dae7da-7945-4a88-add4-42f817ee222f
+                </li>
+                <li class="items-center space-x-8 md:flex-1 lg:w-0 hidden md:flex justify-end">
+                  This is item d33bdb83-cf66-4498-9b90-21cc5c2bc7e7
+                </li>
+              </ol>
+              <img
+                class="sm:px-0 px-4"
+                alt="Profile picture of user 7350cf77-f496-45ee-ac4f-dc33eb3595cc"
+                src="https://example.org/pictures/4e0b1bb8-3f12-4a9b-9e60-e9f5a9afad43"
+              />
+              <ol
+                class="lg:row-start-1 lg:col-span-4 lg:col-start-9 md:row-start-2 mt-12 md:mt-0 md:col-start-3 md:col-span-8"
+              >
+                <li class="flex -m-2 p-2 items-center">
+                  This is item 66c4c3c2-705a-4776-a97e-4f08f63e515c
+                </li>
+                <li class="font-medium text-sm text-gray-900">
+                  This is item cbb365f6-0804-4ded-a0e7-bbf2562d3f1a
+                </li>
+                <li
+                  class="focus:outline-none hover:bg-indigo-700 bg-indigo-600 border-transparent focus:ring-offset-gray-50 px-4 focus:ring-indigo-500 rounded-md py-2 shadow-sm text-white border font-medium focus:ring-offset-2 focus:ring-2 text-sm"
+                >
+                  This is item 775b9d37-8870-4ce0-923a-38c5bfb88993
+                </li>
+                <li class="sr-only">This is item c387e84a-8f19-44a8-bb53-a781baa35210</li>
+                <li
+                  class="hover:bg-gray-100 py-2 text-gray-900 h-14 bg-white focus:z-10 flex px-3 flex-col"
+                >
+                  This is item 9a1792bf-b38a-4f41-8dfa-968e5220b9d9
+                </li>
+              </ol>
+            </li>
+          </ol>
+          <ol class="text-gray-400 w-5 h-5 flex-shrink-0">
+            <li class="space-y-6 mt-6">
+              <img
+                class="py-6 sm:py-10 flex"
+                alt="Profile picture of user 4f3a8e49-7cc2-4f9f-8a94-a25009638b9f"
+                src="https://example.org/pictures/40fb225e-4fe6-43e8-904c-6d08fcdeb4fa"
+              />
+              <img
+                class="text-gray-500 hover:text-gray-900 font-medium text-base"
+                alt="Profile picture of user d9fb6e5a-cd03-4003-a149-8140796ee9bf"
+                src="https://example.org/pictures/c4b5925c-946d-487b-94fe-a037a9110b52"
+              />
+              <ol class="text-gray-400 hover:text-gray-300">
+                <li
+                  class="right-0 inset-y-0 items-center pr-2 justify-center pointer-events-none flex absolute"
+                >
+                  This is item 2b148006-571a-43f3-a87e-f398423b42cf
+                </li>
+                <li
+                  class="block border-warm-gray-300 py-3 shadow-sm px-4 focus:ring-teal-500 rounded-md text-warm-gray-900 w-full focus:border-teal-500"
+                >
+                  This is item a2b81a41-159f-4086-9f6e-5af792bc8e54
+                </li>
+              </ol>
+            </li>
+            <li class="rounded-md shadow">
+              <ul class="flex justify-center mx-auto items-center rounded-full w-7 h-7">
+                <li class="sr-only">This is item 6c399faf-bd81-4788-bb03-c879122d9a03</li>
+                <li
+                  class="justify-between lg:px-8 flex sm:px-6 pb-2 pt-6 mx-auto relative px-4 max-w-7xl items-center"
+                >
+                  This is item a2cb09c1-d688-4d19-b64b-0406ce9a977e
+                </li>
+                <li class="px-2 space-y-1">This is item 327262da-2318-47da-a01c-9a7a9b39c3df</li>
+                <li class="sr-only">This is item 6a9d7b12-81c5-44e6-9850-897611f3b1d7</li>
+              </ul>
+              <ol class="sr-only">
+                <li class="bg-gray-50 sm:pt-24 pt-16 lg:pt-32 relative">
+                  This is item 8c1cebc7-e0b7-4a59-82ec-3e9a485f0014
+                </li>
+                <li class="text-gray-700 mt-2 text-sm">
+                  This is item 925c353e-43ee-4c9d-a807-178da359cd3d
+                </li>
+                <li class="h-5 text-gray-500 w-5">
+                  This is item 51a614e4-8bc9-4321-adb4-426493be8e97
+                </li>
+                <li class="text-base">This is item 01f2703f-993c-43a9-baa4-a62ea6c255bc</li>
+                <li class="pt-10 border-t mt-10 border-gray-200">
+                  This is item d5fc5b60-7a42-4cfd-89af-056ad9415b31
+                </li>
+              </ol>
+              <ol class="border-b border-gray-200 items-center flex">
+                <li class="flex space-x-3 md:ml-4 mt-6 md:mt-0">
+                  This is item 26813eaf-72b4-49bc-9fab-fe31aa0df40a
+                </li>
+                <li class="ml-4 flex lg:ml-0">This is item 1530041b-7bb9-4e4d-bd29-19ea220902a1</li>
+                <li class="max-w-7xl sm:px-6 py-16 lg:px-8 w-full mx-auto px-4">
+                  This is item 2c3d66ac-17f5-4821-9760-29c0be5cfa8a
+                </li>
+                <li class="text-sm mt-2 text-gray-600">
+                  This is item 4d412085-2638-468e-8d66-1a553d31e3a5
+                </li>
+              </ol>
+              <ol class="lg:py-24 py-12">
+                <li class="items-center flex">This is item 92c5f7b4-c7ad-4513-a5a0-f2c5ff3ac457</li>
+                <li class="mt-2 text-indigo-600">
+                  This is item 4898ead1-2b96-4e4b-8a2f-cb83d31a43e1
+                </li>
+                <li class="sr-only">This is item f70674f8-9b36-4a38-bc26-0cc02dcd45ce</li>
+                <li class="mt-4 text-gray-500">
+                  This is item e1c7abfc-67fd-4408-b877-8e1580ed8976
+                </li>
+                <li
+                  class="absolute block bg-red-400 ring-white w-3.5 bottom-0 ring-2 h-3.5 rounded-full right-0"
+                >
+                  This is item f6c30e2f-c53e-4840-b006-2fc76e9d0c34
+                </li>
+              </ol>
+            </li>
+            <li class="rounded-full mx-auto flex w-7 h-7 justify-center items-center">
+              <img
+                class="text-base hover:bg-opacity-75 hover:bg-indigo-500 py-2 rounded-md px-3 text-white block font-medium"
+                alt="Profile picture of user 0c075f82-19c6-42fb-a080-e7ce5bed8ede"
+                src="https://example.org/pictures/1f944610-a16e-49fb-ae18-34d8dda58d62"
+              />
+              <ol class="text-gray-500 text-sm">
+                <li class="lg:hidden">This is item 42a87309-a825-4326-b7f6-e89e9b70fa5a</li>
+                <li class="text-sm text-gray-900 font-medium">
+                  This is item 30ac2a21-8c95-45a9-bb63-1e9fa9daf5f4
+                </li>
+                <li class="text-indigo-600 font-medium hover:text-indigo-500">
+                  This is item c6d5348e-4cb0-451d-a493-d63ecbf4f39e
+                </li>
+                <li class="text-gray-500 hover:text-gray-700">
+                  This is item 655b34f9-f59d-4cd4-ae5b-a4084791f4e0
+                </li>
+              </ol>
+            </li>
+            <li
+              class="font-medium pr-3 sm:max-w-none w-full max-w-0 text-sm py-4 text-gray-900 sm:pl-6 sm:w-auto pl-4"
+            >
+              <ol class="p-8 flex justify-center bg-gray-100">
+                <li class="border-dashed rounded-lg border-gray-200 h-full border-2">
+                  This is item bb98f70a-6aa6-4fbf-b184-06d19c3470dd
+                </li>
+                <li class="divide-y border-b divide-gray-200 border-t border-gray-200">
+                  This is item a5173bdb-8cda-4c1e-a85f-ddc586dcd30b
+                </li>
+              </ol>
+            </li>
+            <li class="text-gray-900">
+              <ul class="sm:items-center sm:flex">
+                <li class="font-medium text-sm text-gray-900">
+                  This is item 34ac7fe7-5ffa-4573-91c6-d4916bc65d40
+                </li>
+                <li class="items-center flex">This is item 46b3ac05-a930-4db8-8498-1757a76dae30</li>
+                <li class="p-4 bg-white text-sm bg-opacity-60">
+                  This is item 8bc8bab3-fb2f-4225-9317-0ca6748d6ae0
+                </li>
+              </ul>
+              <img
+                class="flex xl:col-span-1 items-center"
+                alt="Profile picture of user 3fc9e3a3-39ff-435c-b90d-088afad2273b"
+                src="https://example.org/pictures/1ac5d03c-6494-4452-b830-71ff695b25a5"
+              />
+              <ol class="w-full max-w-lg mx-auto">
+                <li class="text-gray-900">This is item 3085a74b-96fe-45c5-a362-884db0b86f42</li>
+                <li class="sr-only">This is item 42577904-fbde-461e-98f7-df2784261fff</li>
+                <li class="mt-10 sm:mt-0">This is item 01415b67-ac34-434b-b081-0a4cbf445def</li>
+                <li class="px-3 text-sm lg:table-cell text-gray-500 py-3.5 hidden">
+                  This is item f7e6b828-4688-4751-8b7c-6b4d489845b0
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="inline-flex text-white focus:outline-none focus:ring-2 rounded-md hover:bg-gray-700 focus:ring-offset-gray-800 border focus:ring-offset-2 items-center px-4 border-transparent font-medium focus:ring-indigo-500 text-sm bg-gray-600 shadow-sm py-2"
+              >
+                This is link ce083d41-7056-45ee-9207-70d86af9511b
+              </a>
+            </li>
+          </ol>
+        </li>
+        <li class="sr-only">
+          <a href="#" rel="noreferrer" class="h-6 w-6">
+            This is link a2b9e344-dfc4-40f0-bdc4-377481044a79
+          </a>
+          <ul class="py-6 flex">
+            <li class="text-gray-400 rounded-md justify-center -m-2 items-center p-2 inline-flex">
+              <ul class="flex-shrink-0">
+                <li class="sm:flex-shrink-0 sm:mt-0 mt-3 sm:ml-4">
+                  This is item 3868cbfb-5a22-4954-bddb-979470bfba8e
+                </li>
+                <li class="items-center flex flex-shrink-0">
+                  This is item ac403ec8-6f36-49f3-a7cb-ff5416895102
+                </li>
+              </ul>
+            </li>
+            <li class="py-3.5 lg:pr-8 relative sm:pr-6 pr-4 pl-3">
+              <a href="#" target="_blank" class="text-gray-900">
+                This is link 43c39260-c4b0-4a6f-b411-8e16919912db
+              </a>
+              <ol class="relative">
+                <li class="text-gray-500 text-sm">
+                  This is item ce8859dc-7e73-4cd8-a90f-b50b8c1c061d
+                </li>
+                <li class="object-cover shadow-lg rounded-lg object-center">
+                  This is item fc073569-cef6-455f-99d5-f541c04d4197
+                </li>
+                <li class="sr-only">This is item 2e53456e-2eab-4d76-a631-a380921ac11a</li>
+                <li class="mt-2">This is item dc789b58-943d-4fb5-8990-ea9786519113</li>
+              </ol>
+              <img
+                class="font-medium text-xs flex-shrink-0 leading-5"
+                alt="Profile picture of user 844a82e9-f5d7-4627-909e-0f87dceaf60a"
+                src="https://example.org/pictures/37c0569c-8125-428a-8003-8a86e01a8a05"
+              />
+            </li>
+            <li class="text-sm">
+              <img
+                class="text-gray-900 text-base font-medium"
+                alt="Profile picture of user 0c676a97-c3ec-404d-bf86-7b6fe525d047"
+                src="https://example.org/pictures/ccf1bd6c-8c5d-44e8-979d-085e557aaa3a"
+              />
+            </li>
+            <li class="text-indigo-600 block text-sm hover:text-indigo-500 font-semibold">
+              <a href="#" class="mt-6"> This is link a13ea5ea-38aa-4c50-86d5-78fc5337a42f </a>
+              <a href="#" class="py-6 border-gray-200 border-t px-4 space-y-6">
+                This is link 0aefd628-045e-4d43-912e-7a21aabcf4be
+              </a>
+              <img
+                class="text-indigo-600 block"
+                alt="Profile picture of user 7df9347d-6aa2-478c-a28a-410480bbbe03"
+                src="https://example.org/pictures/13c7d0a0-5722-430e-9ba6-0c6b7561efd1"
+              />
+              <ol class="text-gray-900">
+                <li class="flex-shrink-0 w-6 h-6 text-indigo-200">
+                  This is item 01ad49b5-3cd3-4874-b102-3da075c6247d
+                </li>
+                <li
+                  class="bg-white group-hover:opacity-100 bg-opacity-75 opacity-0 text-gray-900 relative py-2 rounded-md z-10 focus:opacity-100 px-4 w-full text-sm"
+                >
+                  This is item 8590b441-8107-4e4a-a9a6-b4486815487b
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <a
+            href="#"
+            rel="noreferrer"
+            class="bg-gray-200 divide-gray-200 shadow sm:grid divide-y overflow-hidden sm:gap-px sm:grid-cols-2 sm:divide-y-0 rounded-lg"
+          >
+            This is link e04c0136-244e-4027-a4ba-127f6c1c2121
+          </a>
+        </li>
+      </ol>
+      <ol class="px-5 flex items-center">
+        <li class="mt-16">
+          <img
+            class="bg-gray-100 min-h-[640px]"
+            alt="Profile picture of user fcd0f040-2c3a-4f5c-acd6-bf764d423d65"
+            src="https://example.org/pictures/2023a675-2ce2-47dc-b3bd-62de7a4d8052"
+          />
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="rounded-md block font-medium px-3 text-base py-2"
+          >
+            This is link 80fa6b7d-44b4-472f-8de1-34ad345c06f2
+          </a>
+          <a href="#" rel="noreferrer" class="font-medium text-gray-900 mt-1 text-sm">
+            This is link eeb92aff-b55d-4515-b229-1a91c8a2c43b
+          </a>
+          <ul class="lg:items-center lg:flex-1 lg:justify-end lg:space-x-6 hidden lg:flex">
+            <li class="block flex-shrink-0 group">
+              <img
+                class="flex w-7 h-7 items-center rounded-full mx-auto justify-center"
+                alt="Profile picture of user cdb258ef-f913-4c02-85a0-5882f8ce076b"
+                src="https://example.org/pictures/83db48d1-6f24-4d6d-8df6-c42e0a61f145"
+              />
+              <a href="#" target="_blank" class="w-full">
+                This is link c9fa7b80-8afb-451e-a9e1-85ca61964f96
+              </a>
+              <img
+                class="text-gray-400 hover:text-gray-300"
+                alt="Profile picture of user a5400d6b-a20d-4bb9-ab32-158f1f4566cb"
+                src="https://example.org/pictures/c36d0ecd-baca-4ff2-9e47-e3151af0ea8a"
+              />
+            </li>
+            <li
+              class="text-gray-900 hover:bg-gray-100 px-3 flex-col py-2 h-14 bg-white focus:z-10 flex"
+            >
+              <ol
+                class="justify-center p-0.5 -m-0.5 items-center focus:outline-none relative rounded-full cursor-pointer flex"
+              >
+                <li class="sm:col-span-6">This is item 173079ed-ac2c-448a-a9a5-4603db6040b7</li>
+                <li class="sm:mt-4 sm:space-y-4 space-y-6 mt-6">
+                  This is item 8c6f3c2d-b194-4a91-87df-7b324586ad99
+                </li>
+                <li class="gap-6 grid-cols-6 grid">
+                  This is item 64cd1282-cac3-46c8-8c00-5164e974f26d
+                </li>
+                <li class="p-6 bg-white">This is item 29202220-17b1-4c55-94d4-239d425a833d</li>
+                <li
+                  class="w-full focus:ring-0 block focus:border-transparent sm:text-sm pl-12 border-transparent placeholder-gray-500"
+                >
+                  This is item 3a701ad0-0cf7-408e-894d-17c7d7d1140a
+                </li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+        <li class="space-y-4">
+          <img
+            class="flex justify-between font-medium text-gray-900 text-base"
+            alt="Profile picture of user 92c599da-97c2-4453-aa75-911685fe9999"
+            src="https://example.org/pictures/ea1fa1b9-8f65-4c84-b037-fc527c1f98a7"
+          />
+          <a href="#" target="_blank" class="h-6 w-6">
+            This is link 42238130-1323-489d-b725-37042af114e1
+          </a>
+        </li>
+        <li class="border-gray-200 py-6 px-4 border-t">
+          <ul class="col-span-6">
+            <li
+              class="mt-1 block rounded-md text-base hover:bg-indigo-600 px-3 py-2 font-medium hover:text-indigo-100 text-indigo-200"
+            >
+              <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                This is link 1b49cd95-919a-495a-90b3-1eab7872ab6f
+              </a>
+            </li>
+            <li class="bg-gray-100 min-h-[730px]">
+              <ol class="justify-end flex-1 flex items-center">
+                <li class="mt-5 border-gray-200 border-t">
+                  This is item dbd25028-ba1d-4f97-9289-1b353e3b112c
+                </li>
+                <li class="text-gray-500 mt-3 max-w-3xl text-lg">
+                  This is item bddfd5f1-4fd5-468f-a620-9cce4a0005f0
+                </li>
+                <li class="space-y-6 mt-6">This is item f0caa90d-d7c8-4232-a9d4-800b231efe90</li>
+                <li class="flex justify-between h-16">
+                  This is item ea646b56-9ea5-4128-8200-cdfe8be637bf
+                </li>
+              </ol>
+              <a href="#" class="md:gap-8 md:grid-cols-2 md:grid">
+                This is link dd8f1761-2e80-4ab1-82fd-15059cc4eade
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="grid gap-8 xl:col-span-2 mt-12 grid-cols-2 xl:mt-0">
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="text-xl sm:pr-12 text-gray-900 font-medium"
+          >
+            This is link 4ac2eb00-4b59-4f7c-b5bd-1452b1d544dc
+          </a>
+          <img
+            class="text-white hover:text-gray-100 text-sm font-medium"
+            alt="Profile picture of user f5d6fcef-5389-44d5-8938-6d6dba461093"
+            src="https://example.org/pictures/c901c714-69e8-437a-b597-d37d894f3831"
+          />
+        </li>
+        <li class="text-green-800 font-medium text-sm">
+          <ul
+            class="pl-7 focus:border-indigo-500 sm:text-sm rounded-md w-full block focus:ring-indigo-500 pr-12 border-gray-300"
+          >
+            <li class="min-w-full divide-gray-300 divide-y">
+              <img
+                class="justify-between flex items-center"
+                alt="Profile picture of user 32100a0f-9e14-4ea4-8050-821811ecf19b"
+                src="https://example.org/pictures/503e47ac-0b38-4a26-953b-aaa073d0eb39"
+              />
+            </li>
+            <li class="h-5 w-auto">
+              <a href="#" target="_blank" class="text-gray-500">
+                This is link a39fdcbb-63c3-4065-baa3-3492053df7c0
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                class="sm:flex-wrap flex-col sm:mt-0 flex mt-1 sm:space-x-6 sm:flex-row"
+              >
+                This is link 875d8642-89fd-463c-beeb-2001f7ed8ffc
+              </a>
+              <a href="#" rel="noreferrer" class="space-x-6 items-center flex">
+                This is link 1e451de3-c64e-4625-b107-20b856e940ca
+              </a>
+              <img
+                class="flex h-7 justify-center mx-auto items-center w-7 rounded-full"
+                alt="Profile picture of user 91f5bb45-b729-4a4c-a088-9a37a5539173"
+                src="https://example.org/pictures/13a48174-8298-409f-880b-cc5e623a5207"
+              />
+            </li>
+            <li class="space-y-6 mt-6">
+              <img
+                class="text-sm grid-cols-7 mt-2 grid"
+                alt="Profile picture of user 3599d98f-e00f-4442-9388-f4f68b3a7c99"
+                src="https://example.org/pictures/2551e2f6-ec77-498b-a915-4f0d6437024e"
+              />
+              <img
+                class="text-right text-sm px-6 text-gray-500 py-4 whitespace-nowrap"
+                alt="Profile picture of user 2ec0ac15-ed5b-4617-8c84-4a66f7a77723"
+                src="https://example.org/pictures/c0c06c88-54e3-41b3-91da-51287f840c65"
+              />
+              <a href="#" rel="noreferrer" class="flex-col flex flex-auto">
+                This is link b8f54435-8b65-468c-8a2c-82626d5f1ee5
+              </a>
+            </li>
+            <li class="text-gray-500">
+              <ul class="absolute inset-0 flex-col flex">
+                <li class="sm:pr-6 pr-4 py-4 pl-3 lg:pr-8 font-medium text-right text-sm">
+                  This is item 2bd7835e-9196-4968-a27c-853fa4323975
+                </li>
+                <li
+                  class="sm:rounded-lg lg:aspect-w-3 lg:aspect-h-4 aspect-h-5 aspect-w-4 sm:overflow-hidden"
+                >
+                  This is item 8b0fa54f-32cf-47e0-ac2a-1cd769821291
+                </li>
+                <li class="sr-only">This is item 0197a154-be0a-4701-b764-d72b4f592f74</li>
+                <li class="border-t mt-12 border-gray-200 pt-8">
+                  This is item 93dfed5e-e053-43a1-9664-cbaf14fd80df
+                </li>
+              </ul>
+              <ol class="sr-only">
+                <li class="md:mt-0 mt-12">This is item f63f5fe1-8c90-472e-89e7-75377c8c547a</li>
+                <li class="font-medium text-gray-900">
+                  This is item 841965f3-169d-4c07-a1e3-3c0047f4cf62
+                </li>
+                <li class="max-w-lg lg:max-w-none mx-auto">
+                  This is item 4868535c-9b12-49fc-b440-dbc60a9582c0
+                </li>
+              </ol>
+              <ol class="block text-gray-700 font-medium text-sm">
+                <li class="hover:text-gray-600 text-gray-500">
+                  This is item 35aaab85-9867-49a9-afb5-f40472db8eea
+                </li>
+                <li class="lg:self-stretch hidden lg:ml-8 lg:block">
+                  This is item 7fcf38d9-3a4f-4a7f-8baa-a8af0337d7da
+                </li>
+              </ol>
+              <ol class="text-indigo-600">
+                <li class="w-full border-gray-200 border-t">
+                  This is item ff0053d4-19df-4b9e-98a9-407a3ddd8e2b
+                </li>
+                <li class="text-gray-400 h-5 w-5 mx-auto">
+                  This is item 7923e012-d2aa-48c3-8463-20f994e6faaa
+                </li>
+              </ol>
+            </li>
+            <li class="bg-white">
+              <ol class="relative mt-1.5">
+                <li class="bg-white border-b border-gray-200 flex-shrink-0">
+                  This is item 91745cce-1f71-45be-8fbe-110d1c416166
+                </li>
+                <li class="sm:mt-0 mt-2">This is item 1afbde96-2a19-478f-929b-ceec12f6ed00</li>
+              </ol>
+              <ol class="mx-auto h-12 text-gray-400 w-12">
+                <li class="z-10 relative">This is item 9d25ad19-1055-4e20-aac6-2aaebf6fa5ef</li>
+                <li class="mt-3 px-2 space-y-1">
+                  This is item 05eba93a-c4cd-4d6a-a9bc-5e8124e1e65f
+                </li>
+                <li class="ml-3 items-center h-7 flex">
+                  This is item 4c81fdb6-ccda-4267-8b21-34761ae0aff2
+                </li>
+                <li class="max-w-md w-full mx-auto">
+                  This is item 153356f2-1762-41ea-bc3f-b0af2f620b47
+                </li>
+              </ol>
+              <ul
+                class="rounded-md lg:aspect-none bg-gray-200 aspect-h-1 lg:h-80 aspect-w-1 group-hover:opacity-75 overflow-hidden min-h-80 w-full"
+              >
+                <li class="-ml-px bg-indigo-600 absolute mt-0.5 left-4 w-0.5 top-4 h-full">
+                  This is item 750a24db-af5b-4db2-abf3-c64ed4d3ae33
+                </li>
+                <li class="text-white tracking-tight sm:text-5xl lg:text-6xl text-4xl font-bold">
+                  This is item 69679321-f30b-4ba9-9a75-889109dce138
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="mt-2 divide-gray-200 divide-y border-b border-gray-200 border-t">
+            <li
+              class="border shadow-sm mt-1 sm:text-sm py-2 focus:outline-none focus:border-indigo-500 px-3 rounded-md w-full focus:ring-indigo-500 border-gray-300 block"
+            >
+              <img
+                class="sr-only"
+                alt="Profile picture of user 500d75e1-a7f2-403f-8064-1247c3f35612"
+                src="https://example.org/pictures/9fbd4d6c-dbd6-4b09-9dbb-10ca2d29af77"
+              />
+              <a href="#" class="lg:px-8 sm:px-6 px-4 py-12">
+                This is link 781700fb-ce85-4c50-b88b-d043d368a91c
+              </a>
+            </li>
+            <li class="text-gray-900 mt-1 sm:mt-0 text-sm sm:col-span-2">
+              <img
+                class="font-medium text-gray-500 text-sm"
+                alt="Profile picture of user c8447bc7-15a6-4b2d-b90a-d16fe2dc4321"
+                src="https://example.org/pictures/d91bdd9e-def6-458e-b365-002a47cfb90f"
+              />
+              <ul class="object-center object-cover">
+                <li
+                  class="font-medium focus:outline-none border-transparent px-4 rounded-md py-2 items-center focus:ring-offset-2 text-white focus:ring-2 text-base hover:bg-indigo-700 flex justify-center border w-full bg-indigo-600 shadow-sm focus:ring-indigo-500"
+                >
+                  This is item f09d275a-d1fe-4f33-b299-1e07b0f92c03
+                </li>
+                <li class="relative inline-block">
+                  This is item a8a9becf-0752-4dd3-ba32-ddca0080d207
+                </li>
+                <li class="space-y-1 flex-auto">
+                  This is item a4cdbbaf-bc9c-4032-9631-9a09917abdbc
+                </li>
+              </ul>
+            </li>
+            <li
+              class="text-gray-400 -ml-14 left-0 pr-2 sticky leading-5 z-20 text-xs text-right -mt-2.5 w-14"
+            >
+              <a href="#" rel="noreferrer" class="justify-end items-center flex flex-1">
+                This is link 438b9e97-8c98-4443-bb98-4b6281a968b9
+              </a>
+              <ul class="z-40 sm:hidden relative">
+                <li class="mt-8">This is item 1bbc2b6d-6ab1-44a3-9190-d28f5a39f0bc</li>
+                <li class="lg:flex-1 hidden lg:items-center lg:flex lg:justify-end lg:space-x-6">
+                  This is item 260c9989-c02d-4611-b411-46e4fcdc08e8
+                </li>
+                <li class="sm:space-y-4 mt-6 space-y-6 sm:mt-4">
+                  This is item 5fbf2e32-e1fc-4e1d-88ed-e4233cc8243e
+                </li>
+                <li class="mt-4 sm:max-w-md sm:flex">
+                  This is item 50acb19a-0d10-47ca-8924-559d55e3ad3d
+                </li>
+                <li class="h-7 items-center flex">
+                  This is item 1813fb9b-89ee-46ac-a785-ff5e8192865a
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ol>
+      <ol class="sm:ml-6 border-l pl-4 sm:pl-6 border-gray-200 ml-4">
+        <li class="object-cover h-full object-center w-full">
+          <ul class="relative justify-between mx-auto sm:px-6 px-4 flex max-w-7xl items-center">
+            <li class="hidden sm:inline">
+              <img
+                class="text-indigo-600 border-gray-300 h-4 focus:ring-indigo-500 w-4 rounded"
+                alt="Profile picture of user 41100214-029c-4263-81ad-056edd40700a"
+                src="https://example.org/pictures/e9f6e078-8e14-46b9-8880-113214cf25bf"
+              />
+              <ol class="inset-y-0 pointer-events-none fixed max-w-full pl-10 right-0 flex">
+                <li class="sr-only">This is item 2673bfb6-ff20-4698-ade5-f0390ddeb2e1</li>
+                <li class="text-sm font-medium block text-gray-700">
+                  This is item 8b3e8691-2e43-4d0c-bdce-ac7d3ef1ffe9
+                </li>
+              </ol>
+              <ul class="text-gray-500 text-base font-medium">
+                <li class="w-6 h-6 text-white">
+                  This is item d0c2a0f9-f2d1-4aad-b611-f67871e35645
+                </li>
+                <li class="flex items-center flex-1 justify-end">
+                  This is item deda0ab6-e9e6-4c45-8fa8-824bcff87a97
+                </li>
+                <li class="h-6 w-6">This is item fd432851-f7bc-45aa-b1b8-d997e9731f0a</li>
+                <li class="grid-cols-1 gap-y-6 grid">
+                  This is item ab3123b6-a19c-4c75-98bf-d6e051f4a0ff
+                </li>
+                <li class="min-h-[768px] bg-gray-50 h-0">
+                  This is item c2477702-7c31-4f24-b31b-a4d5a304a64f
+                </li>
+              </ul>
+              <ul
+                class="left-0 z-20 pr-2 text-xs -ml-14 text-gray-400 w-14 text-right -mt-2.5 leading-5 sticky"
+              >
+                <li class="border-gray-200 pt-8 mt-12 border-t">
+                  This is item 69902f0c-ccc4-452f-86e2-320869e1faa8
+                </li>
+                <li
+                  class="block border px-3 rounded-md shadow-sm w-full focus:border-indigo-500 sm:text-sm focus:ring-indigo-500 focus:outline-none border-gray-300 py-2 mt-1"
+                >
+                  This is item 577eab1a-cb18-4966-97a9-fc33a3db7c7d
+                </li>
+                <li class="flex lg:ml-6">This is item 1b397d28-3ea8-4272-819f-11f96404956d</li>
+              </ul>
+            </li>
+            <li class="sr-only">
+              <ul class="items-center flex text-gray-500 text-sm mt-2">
+                <li class="border-t border-gray-200 bg-white">
+                  This is item 9a0da54f-4a48-48ad-a939-78025b6f09f1
+                </li>
+                <li class="bg-white hover:bg-gray-100 focus:z-10 py-1.5">
+                  This is item 0738c3b2-1f66-4263-9d3a-78bebc620999
+                </li>
+                <li class="overflow-hidden inset-0 absolute">
+                  This is item 1b6ab678-6bfd-4979-a7d9-b3b4ce373c12
+                </li>
+                <li class="h-8 rounded-full w-8">
+                  This is item 28e0290e-1539-4729-b962-29090cd336c7
+                </li>
+              </ul>
+              <img
+                class="flex items-center"
+                alt="Profile picture of user 93b9dd48-32a0-4b72-ab50-30bbb237421f"
+                src="https://example.org/pictures/82b82850-9a0b-4021-8108-09c02321b231"
+              />
+              <img
+                class="text-blue-gray-900 font-medium text-sm block"
+                alt="Profile picture of user 0ab849df-d64e-4c04-96d1-200ffe8e0e3e"
+                src="https://example.org/pictures/e5e73a02-5fee-4160-9ff6-254917d00ae6"
+              />
+            </li>
+            <li class="px-2 mt-3 space-y-1">
+              <ul class="border-t border-gray-200 bg-white">
+                <li class="max-w-7xl py-12 sm:px-6 lg:px-8 mx-auto">
+                  This is item 540ef5f5-527d-47eb-ba92-20d3b22735a9
+                </li>
+                <li class="lg:grid-cols-2 lg:items-start lg:gap-8 lg:grid">
+                  This is item fba88539-e4f0-4dae-a8f0-223422b3d877
+                </li>
+                <li class="border-t w-full border-gray-300">
+                  This is item c5c542ac-9682-4dad-bf8d-ccb6afb7d3a4
+                </li>
+                <li class="md:justify-between md:flex mt-2 md:items-center">
+                  This is item 4f277638-8823-4dfd-8973-7c2ada6c2da7
+                </li>
+                <li class="bg-gray-50">This is item 61d1655b-7e5a-4737-ae8b-82885cfbee1f</li>
+              </ul>
+              <ol class="mt-2 text-gray-500 text-base">
+                <li class="text-base whitespace-nowrap py-4 px-1 flex-1 border-b-2 font-medium">
+                  This is item 6122fd26-aff6-46a8-87e1-cde523fed879
+                </li>
+                <li class="text-gray-700 font-medium">
+                  This is item b038b53e-8195-40d7-b842-227d181ebd0c
+                </li>
+              </ol>
+              <ul class="md:text-center pl-1 text-sm ml-6 md:pl-0 md:ml-0">
+                <li class="-ml-14 text-gray-400 text-xs w-14 leading-5 text-right -mt-2.5 pr-2">
+                  This is item 62aa7562-8d4d-49a6-8e14-b6418d6ec476
+                </li>
+                <li class="px-2 flex items-center lg:px-0">
+                  This is item dc2ac1e2-76e7-491d-9fb4-b7c3f6f59164
+                </li>
+                <li class="md:-mt-px md:flex hidden">
+                  This is item 28fbe577-7c7a-41a7-8af3-e84fa41a3030
+                </li>
+              </ul>
+            </li>
+            <li class="lg:items-center lg:ml-4 hidden lg:flex">
+              <a href="#" target="_blank" class="block">
+                This is link 17b2e271-9e8c-4592-9348-74b6143519e3
+              </a>
+            </li>
+          </ul>
+          <a href="#" class="pt-6"> This is link 16c86736-f23a-4a60-ba6e-64f425c3c506 </a>
+          <ul class="-mr-2">
+            <li class="bg-white sm:rounded-lg sm:shadow overflow-hidden">
+              <img
+                class="mt-6"
+                alt="Profile picture of user c941dbe5-33ba-4abe-87d2-2e614673f104"
+                src="https://example.org/pictures/26843e1b-f14b-465c-b6af-e37af2869ed7"
+              />
+              <img
+                class="w-auto h-8"
+                alt="Profile picture of user 52c8f9a3-9409-4925-836b-c41f4fc20769"
+                src="https://example.org/pictures/98dba2ff-8162-41ab-8c84-fb4143186078"
+              />
+            </li>
+            <li class="mt-6">
+              <img
+                class="bg-gray-500 transition-opacity bg-opacity-75 fixed md:block hidden inset-0"
+                alt="Profile picture of user 24e1d3e6-6a82-4370-96b9-18e7c97a76c2"
+                src="https://example.org/pictures/2dbba26e-0ea8-4460-a89f-d898ec696619"
+              />
+              <ol class="text-gray-600 sm:mt-0 mt-1 text-sm sm:ml-3 whitespace-nowrap">
+                <li class="font-medium text-warm-gray-700 text-base">
+                  This is item 59cd0911-069d-48b2-a83e-329a268bc49c
+                </li>
+                <li
+                  class="md:absolute md:justify-end md:items-center hidden md:right-0 md:inset-y-0 md:flex"
+                >
+                  This is item 1cf7bc6d-cdcf-49da-b226-61290406e70e
+                </li>
+                <li
+                  class="bg-white overflow-y-auto flex w-full h-full shadow-xl max-w-xs relative flex-col ml-auto py-4 pb-6"
+                >
+                  This is item 86163d82-1dda-47fb-b2a1-9e8d883ebaa9
+                </li>
+                <li class="relative">This is item c6b674ce-1187-488b-9f19-2370ae953279</li>
+              </ol>
+            </li>
+            <li
+              class="bg-green-100 px-2 rounded py-0.5 font-medium inline-flex items-center text-green-800 text-xs"
+            >
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-gray-400 p-2 hover:text-gray-500 ml-2"
+              >
+                This is link ff14d219-764d-401d-b616-18436166913b
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                class="flex-col flex mx-auto text-center relative max-w-3xl items-center"
+              >
+                This is link 7ba63a08-9792-4819-a522-2dded1164f46
+              </a>
+              <ul
+                class="bg-white border-b hover:text-gray-900 px-3.5 focus:relative hidden text-sm hover:bg-gray-50 border-t border-gray-300 text-gray-700 font-medium md:block"
+              >
+                <li class="font-medium text-gray-900">
+                  This is item 6979c18d-15f7-4aab-a5c1-973b2041f0bd
+                </li>
+                <li class="min-w-0 bg-white xl:flex flex-1">
+                  This is item 27320198-29ff-4026-9cf8-3455d016cf59
+                </li>
+              </ul>
+              <ol class="rounded-full items-center flex justify-center w-7 h-7 mx-auto">
+                <li class="sr-only">This is item 46d3defe-31b6-4f53-9ba0-8a195eec5d12</li>
+                <li class="text-gray-200">This is item de391e81-482e-4acd-a8db-1ac5e322de6d</li>
+                <li class="w-5 h-5">This is item 5b803026-27db-4f33-9dbd-c138a60678bd</li>
+                <li class="grid-cols-1 max-w-7xl grid lg:grid-cols-2 mx-auto relative">
+                  This is item a270e7c3-332e-41fc-b178-e1fc57066f2f
+                </li>
+              </ol>
+            </li>
+            <li class="text-sm text-gray-500 font-medium">
+              <ul
+                class="bg-red-100 sm:h-10 h-12 justify-center flex items-center sm:mx-0 flex-shrink-0 mx-auto rounded-full sm:w-10 w-12"
+              >
+                <li
+                  class="items-center flex w-10 border-2 justify-center flex-shrink-0 rounded-full border-indigo-600 h-10"
+                >
+                  This is item b595a285-9929-49fd-9dbb-1cfb72557048
+                </li>
+                <li class="h-6 w-6">This is item 7aa961a1-9509-4eff-8841-abf3868c5871</li>
+                <li class="cursor-default select-none py-2 px-4">
+                  This is item 7571b4c7-8101-4955-92c1-c5460c8d1d42
+                </li>
+              </ul>
+              <img
+                class="mt-1 text-sm text-gray-500"
+                alt="Profile picture of user 850afeef-3f60-436b-be2f-f7adb40a8155"
+                src="https://example.org/pictures/3ded983e-4cbf-4bf4-94a4-b26c972dea75"
+              />
+              <ul class="text-sm pl-7">
+                <li
+                  class="max-w-7xl lg:px-8 px-4 mx-auto sm:space-y-0 sm:px-6 py-5 sm:flex sm:space-x-10 space-y-6"
+                >
+                  This is item 44967160-a355-4f5c-a862-013a5c1ec043
+                </li>
+                <li class="h-7 flex justify-center w-7 items-center rounded-full mx-auto">
+                  This is item 459c7c2d-704c-43d7-badb-420a9d727faa
+                </li>
+                <li class="px-2 space-y-1">This is item b638583b-84f5-493b-841a-02fff6d873dc</li>
+                <li class="mt-8">This is item 4774b763-4ec2-4b50-a6c9-5a5fc76861d3</li>
+                <li class="flex py-6 items-start space-x-4">
+                  This is item 6f8b439b-154e-473f-b6b1-cb25959a7204
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li
+          class="bottom-0 text-sm font-medium flex-col-reverse text-gray-900 lg:hidden inset-x-0 flex fixed"
+        >
+          <ol class="flex relative">
+            <li class="bg-gradient-to-t from-white via-white absolute inset-0">
+              <ol class="w-6 h-6">
+                <li class="mx-auto max-w-xs w-full">
+                  This is item 57adad31-dd90-4acb-9df1-bc15271de09e
+                </li>
+                <li class="max-w-4xl mx-auto">This is item 83a64aab-ac27-4730-b120-eb7acd076cb7</li>
+              </ol>
+              <ol
+                class="bg-gray-50 sm:text-sm items-center border-gray-300 border-r-0 text-gray-500 px-3 inline-flex border rounded-l-md"
+              >
+                <li class="sr-only">This is item 9c3f4a22-1e5e-46a5-bfaa-e3758ca1c817</li>
+                <li class="sr-only">This is item 8ed22468-5ce7-4378-8db1-d045aa32844a</li>
+              </ol>
+            </li>
+            <li class="sm:block font-semibold text-indigo-600 text-sm hidden hover:text-indigo-500">
+              <ul class="relative flex sm:col-start-3 mt-px">
+                <li class="h-6 w-6">This is item 9cb59109-1835-475f-ac7a-b9b8fd5c85e4</li>
+                <li
+                  class="focus-within:ring-1 focus-within:border-indigo-600 shadow-sm border rounded-md focus-within:ring-indigo-600 py-2 border-gray-300 px-3"
+                >
+                  This is item 075bee15-70cb-4fc0-a47f-18cc8d15708d
+                </li>
+                <li class="sr-only">This is item 7e342ccd-df87-4fd0-849f-2a10a4ad628b</li>
+                <li class="xl:gap-8 xl:grid-cols-3 xl:grid">
+                  This is item 177e6113-dc31-493b-bae6-99b483b46ecd
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="text-sm block ml-2 text-gray-900">
+                This is link 64d4b6d9-87f5-478f-9b04-8a197d636151
+              </a>
+              <img
+                class="flex pt-4 justify-between items-center"
+                alt="Profile picture of user d7ec6d86-7857-4721-82f6-2381fcdd22e0"
+                src="https://example.org/pictures/fd9d49a2-2bed-4ab6-a3f1-14396dea0581"
+              />
+              <img
+                class="justify-center lg:col-span-1 col-span-1 md:col-span-2 flex"
+                alt="Profile picture of user 1c8dedd9-9d01-4809-bdae-f5fd69836df5"
+                src="https://example.org/pictures/d9e1323a-08b2-42b1-bfbc-ef709ff45215"
+              />
+            </li>
+          </ol>
+          <ul class="mx-auto lg:max-w-none max-w-2xl px-4">
+            <li class="mx-auto py-32 lg:px-8 max-w-7xl sm:px-2">
+              <img
+                class="min-w-0 flex-1"
+                alt="Profile picture of user 50abd1b0-5720-454b-846d-2d93f597e8b4"
+                src="https://example.org/pictures/945190e8-fe5d-4904-8f8e-f6974f32c69a"
+              />
+              <ol class="text-gray-500 text-sm truncate">
+                <li class="leading-6 text-lg font-medium text-gray-900">
+                  This is item a6acb5bb-24d4-4cd5-8fa8-eb0979acaf53
+                </li>
+                <li class="font text-gray-900 font-bold tracking-tight text-4xl sm:text-6xl">
+                  This is item c9a2a88b-1807-4c56-aa01-e9a1cffb82f8
+                </li>
+                <li class="focus:z-10 py-1.5 hover:bg-gray-100 bg-white">
+                  This is item bb738dbc-5365-48ad-88f0-0e79d3fdade2
+                </li>
+                <li class="text-sm text-gray-500 mt-1">
+                  This is item aeff441d-bfe1-4bde-be2d-c0e97a958fef
+                </li>
+                <li
+                  class="font-medium hover:bg-indigo-50 py-2 text-indigo-600 border-transparent bg-white justify-center shadow-sm items-center border px-4 text-sm flex rounded-md"
+                >
+                  This is item 9778adc6-93d3-41eb-be2f-76808eded2e3
+                </li>
+              </ol>
+            </li>
+            <li class="bg-gray-100 min-h-[192px]">
+              <ol class="sm:col-span-2 col-span-3">
+                <li class="text-gray-900 text-sm font-medium">
+                  This is item 9fde286d-8df5-479b-8cac-3e3d39e8adc0
+                </li>
+                <li class="ml-2.5 text-sm font-medium">
+                  This is item 1a002425-cb1b-467c-b13c-dad41e76a13b
+                </li>
+                <li class="bg-gray-50">This is item 20445b40-1bfc-4983-8a8a-c4168d672c40</li>
+              </ol>
+              <ul class="font-medium sm:pt-2 sm:mt-px block text-sm text-gray-700">
+                <li class="text-indigo-600 hover:text-indigo-500">
+                  This is item 66fce308-7d70-424c-a0bd-35a9051f0787
+                </li>
+                <li class="items-center text-center flex flex-col">
+                  This is item 2099afc8-7095-4dd3-8ac7-51a78025c924
+                </li>
+                <li class="w-auto h-8">This is item f9f45923-823e-473e-8745-eadd0f0fa235</li>
+                <li class="font-medium text-gray-900">
+                  This is item c7a658c5-f091-4077-ab46-5e654a2cc5c5
+                </li>
+              </ul>
+              <ol class="inset-0 absolute bg-gradient-to-t from-white">
+                <li class="pr-4">This is item 17e74bcc-dc26-481c-b63a-738d7cb7543e</li>
+                <li class="lg:px-8 py-6 bg-white px-4 sm:px-6">
+                  This is item b20b4014-c197-4b5f-85f7-b33d5ac159da
+                </li>
+                <li class="space-y-6 sm:space-y-4 sm:mt-4 mt-6">
+                  This is item f46b668f-b26b-4a1b-8bc7-15e7398b28ad
+                </li>
+                <li
+                  class="md:grid-cols-4 lg:gap-x-8 grid-cols-2 gap-y-10 md:gap-y-0 grid gap-x-4 mt-6 sm:gap-x-6"
+                >
+                  This is item c218864b-14c0-4766-ab5a-6c8a6b148eaa
+                </li>
+                <li class="space-y-6 mt-6">This is item 71ad4cfa-7190-4044-acf0-a0f6b4cd3d59</li>
+              </ol>
+            </li>
+            <li class="text-gray-300">
+              <ul
+                class="absolute focus-within:opacity-100 text-white hover:opacity-100 inset-0 justify-center bg-opacity-75 text-sm bg-black items-center h-full w-full font-medium opacity-0 flex"
+              >
+                <li class="truncate">This is item ed8e9eee-d0da-4f2b-97aa-3c2b0fe29368</li>
+                <li class="sm:shadow overflow-hidden sm:rounded-lg bg-white">
+                  This is item 43fb0042-c317-46a5-a11e-d1c4d5713095
+                </li>
+                <li class="mt-4">This is item 0cb72b52-5d35-4ad8-a8e5-b5eb879833e0</li>
+              </ul>
+              <a href="#" class="mt-6 flow-root">
+                This is link 43ccaf70-1ce8-4cdd-8ae5-a44f90a11562
+              </a>
+              <a href="#" target="_blank" class="flex md:pb-4 py-4 md:py-0">
+                This is link ee182cbe-e995-4a95-b39b-775d27adc934
+              </a>
+            </li>
+            <li class="py-6 font-medium text-gray-500 text-lg text-left w-full cursor-auto">
+              <ol class="group-hover:opacity-75 object-center object-cover">
+                <li class="w-6 h-6">This is item 7d258b9a-0b2e-41cb-98dd-b7dccc916a65</li>
+                <li class="text-gray-900 mt-6 font-medium block">
+                  This is item f94e62f8-48d7-4f1f-aa2f-d962b3adbf65
+                </li>
+                <li
+                  class="lg:gap-x-8 sm:rounded-lg py-6 lg:grid-cols-12 sm:px-6 lg:px-8 px-4 bg-gray-100 lg:grid lg:py-8"
+                >
+                  This is item 4631386f-418c-4e1c-8098-3517db276424
+                </li>
+              </ol>
+            </li>
+            <li class="text-sm block text-gray-700 font-medium">
+              <ul class="h-8 w-auto sm:h-10">
+                <li class="mr-4 w-6 h-6 text-cyan-200 flex-shrink-0">
+                  This is item 85f2811c-2e4b-4cd9-8584-5ee66bbaab23
+                </li>
+                <li class="font-semibold text-gray-900">
+                  This is item 46e57b7b-0c7a-4d28-a97f-d1fd5462dbc7
+                </li>
+                <li class="mt-2 flex sm:max-w-md">
+                  This is item b763a594-b482-435f-ad8f-e065a0887b25
+                </li>
+                <li class="hover:text-gray-800">
+                  This is item 0be070a3-d0db-4577-b2c9-2f67f41a0360
+                </li>
+                <li class="bg-gray-100 p-8">This is item 263862f9-6b29-4de1-9b98-a59d5d526402</li>
+              </ul>
+              <img
+                class="bg-white focus:z-10 py-1.5 hover:bg-gray-100"
+                alt="Profile picture of user 6c3073e0-3709-4c0a-8840-1ae980be7f0f"
+                src="https://example.org/pictures/96e7a573-d628-46f4-9a2a-45b7c609386e"
+              />
+            </li>
+          </ul>
+          <ol class="flex-1 flex pb-4 pt-5 overflow-y-auto flex-col">
+            <li
+              class="focus:ring-0 pl-11 placeholder-gray-400 border-0 w-full h-12 bg-transparent pr-4 text-gray-800 sm:text-sm"
+            >
+              <ul class="flex -m-3 hover:bg-gray-50 rounded-lg items-center p-3">
+                <li class="py-1.5 hover:bg-gray-100 bg-white focus:z-10">
+                  This is item 7690d7ac-78c1-46fd-92f7-783e8e9eb1ce
+                </li>
+                <li class="text-indigo-600">This is item f461d4bb-d083-4f0d-90a5-b2c2920c5675</li>
+                <li class="inline-block">This is item 964abe80-81b1-4f8e-a512-a69a98219fa8</li>
+              </ul>
+              <a href="#" class="w-screen max-w-md pointer-events-auto">
+                This is link ca54969b-43b1-43e2-9d1e-13c2d26d9f36
+              </a>
+              <a href="#" target="_blank" class="text-gray-900 font-medium">
+                This is link c5dfb2b1-ec11-444a-ba3c-e42b0825a962
+              </a>
+            </li>
+            <li class="mt-1 text-sm text-gray-600">
+              <ul class="object-cover inset-0 w-full h-full absolute">
+                <li class="flex mt-6 items-center">
+                  This is item 9c2bcd60-fb29-4211-ac00-bcc3f61e3380
+                </li>
+                <li class="h-8 w-auto">This is item 87682c45-0146-4454-a4ec-b582c6c42f0a</li>
+                <li class="mt-5 text-xl sm:text-center text-gray-500">
+                  This is item 928ca386-8999-424b-94fb-918c5b9f1df9
+                </li>
+                <li class="sm:flex-col space-x-6 sm:space-y-6 sm:space-x-0 lg:space-y-8 flex">
+                  This is item 4a760d7d-5236-4df1-9f7e-4340a5fb9baa
+                </li>
+                <li class="min-h-full">This is item ba971414-4194-40d4-b990-4fe9b48f744e</li>
+              </ul>
+              <ul class="hover:text-gray-800 hidden lg:items-center lg:flex text-gray-700">
+                <li class="h-6 w-6">This is item 5f9192c5-3227-41ba-9924-f87d9b77e2d5</li>
+                <li class="mt-10">This is item 26a53467-cbb3-419e-a42b-23585d82e085</li>
+                <li class="h-5 w-5 text-gray-500">
+                  This is item f92fd20b-79dc-452c-9f75-645d10a2fc40
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="relative py-3 w-full h-full">
+          <img
+            class="sm:p-6 py-5 px-4"
+            alt="Profile picture of user 59d86f4b-7131-4f0d-9c1e-426bc304393f"
+            src="https://example.org/pictures/5262df05-ac99-4d86-b905-a8374f17e1e1"
+          />
+          <a
+            href="#"
+            target="_blank"
+            class="aspect-h-3 rounded-lg bg-gray-100 overflow-hidden aspect-w-4"
+          >
+            This is link 211bdf0c-d9a1-4aa5-bda6-5ecb5fa07a31
+          </a>
+          <ol class="flex-shrink-0 self-center">
+            <li class="pointer-events-none h-12 absolute w-full items-center flex justify-center">
+              <ol class="sr-only">
+                <li class="px-4 border-t space-y-6 border-gray-200 py-6">
+                  This is item 60a99cf6-0cd9-4da9-87d5-fdcac5bd1a02
+                </li>
+                <li
+                  class="justify-between py-1.5 bg-gray-50 px-4 flex items-center border-gray-200 border-b"
+                >
+                  This is item 806191ff-25d2-4ba4-bf44-69289d2dedac
+                </li>
+                <li class="-m-1 flex-1 p-1 block">
+                  This is item c695b164-943e-454e-82ac-b789698b1f48
+                </li>
+                <li class="border-gray-200 border-b">
+                  This is item 031f44bb-dc23-4882-8b57-7f818011dfcc
+                </li>
+              </ol>
+              <ol class="text-gray-900 font-semibold text-lg leading-8">
+                <li class="items-center mt-6 flex">
+                  This is item 746fea94-1531-4430-b6b7-669973358b7f
+                </li>
+                <li class="flex mt-4 text-gray-900 items-baseline">
+                  This is item 3b302137-1238-4e6a-a6a3-33b65dc5b085
+                </li>
+                <li class="right-0 absolute bg-warm-gray-50 left-0 h-1/2">
+                  This is item 7130838b-3490-481f-b219-30b91fa60c7c
+                </li>
+                <li class="items-center flex">This is item a93b413f-5bf3-4c58-81a9-4b510f6354f8</li>
+              </ol>
+            </li>
+            <li
+              class="font-medium text-gray-900 pl-4 py-4 whitespace-nowrap lg:pl-8 pr-3 text-sm sm:pl-6"
+            >
+              <img
+                class="hover:text-gray-600 text-gray-900 font-medium"
+                alt="Profile picture of user 55495569-2120-4220-a270-9d6aeb8e8b3f"
+                src="https://example.org/pictures/723ce708-9ada-4f04-83b1-ada7a54f7ddb"
+              />
+              <ul class="bg-white py-8">
+                <li
+                  class="flex py-3 rounded-md px-3 ml-4 justify-center hover:text-gray-500 items-center hover:bg-gray-100 text-gray-400"
+                >
+                  This is item afa407c1-9920-4c33-a754-b0994ac7ef85
+                </li>
+                <li class="bg-opacity-60 p-4 sm:text-sm bg-white text-base">
+                  This is item af6dbcd5-7ff7-44d1-9a1a-e656d5a7b562
+                </li>
+                <li class="relative">This is item b469991c-5627-4549-8d1a-6eba76da5058</li>
+                <li class="lg:w-auto w-full flex items-center justify-between">
+                  This is item 04dc958f-2440-4857-91e3-bf326585400d
+                </li>
+                <li class="items-start flex justify-between">
+                  This is item a6143852-63a3-4ae1-8251-c683101d28c5
+                </li>
+              </ul>
+              <ul class="md:grid md:gap-8 md:grid-cols-2">
+                <li class="flex-shrink-0 text-indigo-300 w-6 h-6 mr-3">
+                  This is item a48003af-e217-4129-8d6f-14df30792982
+                </li>
+                <li
+                  class="border-gray-300 block focus:ring-indigo-500 w-full rounded-md focus:border-indigo-500"
+                >
+                  This is item 0752b1dd-d980-439d-a48b-0bfd0431d347
+                </li>
+                <li class="relative z-10">This is item c72d5144-f426-4dc7-a6af-dcbec9e3322e</li>
+                <li class="h-6 w-6">This is item edd01c5c-eed0-4508-8114-6b00496d83cd</li>
+                <li
+                  class="border px-3 mt-1 w-full focus:ring-sky-500 rounded-md sm:text-sm border-gray-300 block focus:border-sky-500 focus:outline-none py-2 shadow-sm"
+                >
+                  This is item d3f9b48a-1212-4cc6-a5d7-20d8124000d1
+                </li>
+              </ul>
+              <ol class="sr-only">
+                <li class="shadow-md">This is item 99181785-f5b5-4b22-9bf2-61747b910ff9</li>
+                <li class="font-medium text-gray-700 text-sm block sm:pt-2 sm:mt-px">
+                  This is item cd60a888-12a9-42c3-9e73-2cec30b03745
+                </li>
+                <li class="grid-cols-4 mt-6 grid gap-6">
+                  This is item eb9693fd-d717-4c97-8108-af80862d4513
+                </li>
+                <li class="w-6 h-6">This is item f8aa95e3-52b9-47d4-b24f-3cf5bfcd30cc</li>
+              </ol>
+            </li>
+          </ol>
+          <a href="#" target="_blank" class="font-medium text-gray-900 text-lg">
+            This is link 5b259449-46db-4053-84df-3927cdf989de
+          </a>
+        </li>
+        <li class="bg-white">
+          <img
+            class="items-center py-2 justify-center text-sm shadow-sm border hover:bg-indigo-700 border-transparent font-medium bg-indigo-600 px-4 rounded-md sm:w-auto focus:ring-indigo-500 focus:outline-none focus:ring-2 text-white inline-flex focus:ring-offset-2"
+            alt="Profile picture of user 73de469c-642c-4fd2-bbe0-70dfc62d1fc3"
+            src="https://example.org/pictures/53a888a0-56d0-455e-9a03-0b70cbd41aa1"
+          />
+        </li>
+      </ol>
+      <ol class="h-7 items-center mx-auto flex w-7 rounded-full justify-center">
+        <li class="text-gray-700 ml-2">
+          <ul class="lg:col-span-1 flex col-span-2 md:col-span-3 justify-center">
+            <li
+              class="block focus:ring-2 focus:ring-offset-indigo-600 rounded-md text-white bg-indigo-500 focus:ring-white border-transparent py-3 w-full font-medium sm:px-10 border hover:bg-indigo-400 focus:ring-offset-2 shadow focus:outline-none px-5 text-base"
+            >
+              <img
+                class="max-w-7xl px-4 lg:px-8 mx-auto sm:px-6"
+                alt="Profile picture of user 9f1d3970-0f7a-4507-ad79-6f4ea41d7874"
+                src="https://example.org/pictures/a3416228-5fcf-4155-aec0-2ff3b68105fa"
+              />
+              <ul class="max-w-3xl mx-auto w-full">
+                <li class="bg-white">This is item bf007a81-a654-413f-a8c4-d75de07e1cad</li>
+                <li class="pt-6 space-x-3 flex items-center mt-auto justify-center">
+                  This is item a6a6604d-d36c-4e41-945d-740efbab2556
+                </li>
+                <li
+                  class="flex h-12 bg-green-100 rounded-full items-center w-12 justify-center mx-auto"
+                >
+                  This is item 339a0f1f-ea53-4b2c-a1c0-1165f02c34d2
+                </li>
+                <li
+                  class="h-8 mt-3 w-8 text-gray-900 font-semibold rounded-full items-center flex justify-center text-base"
+                >
+                  This is item 95ee39d4-1d0d-4373-88e6-411f257ef2a5
+                </li>
+                <li
+                  class="rounded-full font-medium items-baseline text-sm inline-flex px-2.5 py-0.5"
+                >
+                  This is item a6283234-e2c9-4882-8c51-9618b3c1f489
+                </li>
+              </ul>
+              <img
+                class="z-10 text-gray-500 inset-x-0 absolute top-full text-sm"
+                alt="Profile picture of user f7bde420-d706-4a96-8da2-fa20e61fcb0e"
+                src="https://example.org/pictures/1d0efea6-8417-41d5-93b9-63187657d74e"
+              />
+              <a href="#" class="ml-2"> This is link 781a450a-cca0-4a64-8e7e-cc1615c59e99 </a>
+            </li>
+            <li class="space-y-4">
+              <img
+                class="text-gray-900 font-medium"
+                alt="Profile picture of user 9ca6ea3b-e6ec-48ad-b846-af4e8d594eb2"
+                src="https://example.org/pictures/7276cd40-8c7a-4fd2-a986-6549639cf943"
+              />
+              <ol class="p-2 hover:text-gray-500 text-gray-400 flex items-center -m-2">
+                <li class="rounded-lg overflow-hidden bg-white shadow">
+                  This is item 8672ac1f-6370-4cc9-9c16-9a38f2d48c3d
+                </li>
+                <li class="text-sm font-medium text-gray-900">
+                  This is item 4e2904f4-fd3b-4b2f-bf3f-0d8c677472c5
+                </li>
+                <li class="grid grid-cols-2 gap-8 xl:col-span-2">
+                  This is item a9a4f01e-c223-419f-9ac5-708c501a6927
+                </li>
+              </ol>
+              <ul class="select-none flex group cursor-default p-2 rounded-md items-center">
+                <li class="justify-center space-x-8 h-full flex">
+                  This is item afc33bc3-014f-4ba7-b65d-7a2c70a08562
+                </li>
+                <li class="font-medium text-sm text-gray-700 block">
+                  This is item 4f49ab20-780c-4512-953c-dddd011fb0e3
+                </li>
+              </ul>
+            </li>
+            <li
+              class="border bg-indigo-600 disabled:text-gray-500 text-sm font-medium focus:outline-none py-2 disabled:cursor-not-allowed rounded-md px-4 focus:ring-2 w-full hover:bg-indigo-700 text-white disabled:bg-gray-100 focus:ring-indigo-500 focus:ring-offset-2 border-transparent mt-6 shadow-sm"
+            >
+              <ul class="lg:flex lg:items-center lg:justify-between">
+                <li class="p-8 bg-white">This is item 1243590c-f7ef-4c4e-a60d-2ab0063f9a4a</li>
+                <li class="w-5 h-5">This is item 34e0c9d8-e2db-451c-85e9-9b43c363fd3a</li>
+                <li class="hover:text-gray-800">
+                  This is item 0f41ca8d-97bd-4923-aa42-396584ff2a0f
+                </li>
+              </ul>
+            </li>
+            <li class="bg-white py-1.5 focus:z-10 hover:bg-gray-100">
+              <img
+                class="border-b border-gray-200"
+                alt="Profile picture of user 31cb12ad-42c8-4e0f-821a-8e3f5f5e18ea"
+                src="https://example.org/pictures/40244b0f-a573-4d90-b59f-6bcfe9dfb3e2"
+              />
+            </li>
+          </ul>
+          <a
+            href="#"
+            rel="noreferrer"
+            class="bg-white z-10 origin-top-right focus:outline-none ring-1 right-0 ring-black ring-opacity-5 shadow-lg absolute mt-2 w-48 rounded-md py-1"
+          >
+            This is link 3da86357-a16d-4e78-82c6-45a0b5450bfe
+          </a>
+        </li>
+        <li class="text-gray-900 tracking-tight font-bold text-3xl">
+          <ul class="w-auto block h-8 lg:hidden">
+            <li class="px-3 text-gray-500 py-3.5 text-sm">
+              <ol
+                class="text-gray-700 focus:outline-none focus:ring-sky-500 border-gray-300 text-sm bg-white rounded-md focus:ring-2 border hover:bg-gray-50 font-medium inline-flex px-4 focus:ring-offset-2 justify-center shadow-sm py-2"
+              >
+                <li class="px-6 items-start flex py-5 font-medium text-sm">
+                  This is item 96c2104e-6cd4-4b04-a105-54c626750965
+                </li>
+                <li class="object-cover h-full w-full">
+                  This is item b39b8e39-1168-49ef-8dd1-6cf3b6577cd6
+                </li>
+                <li class="relative lg:hidden z-40">
+                  This is item 9e667f2f-e4ab-4d03-8a60-842dc22417a2
+                </li>
+              </ol>
+              <a href="#" target="_blank" class="mt-4">
+                This is link 0a6ff190-b83f-476c-97f6-79a9e00fcd39
+              </a>
+              <ol
+                class="rounded-md overflow-hidden aspect-w-1 aspect-h-1 bg-gray-100 group-hover:opacity-75"
+              >
+                <li class="flex justify-end flex-1 items-center">
+                  This is item 892bdf8b-e836-4050-a6d7-60121a4f79f9
+                </li>
+                <li class="sm:hidden items-center flex -mr-2">
+                  This is item 9e82807c-6b3c-47e0-bf85-a69023ce9ad1
+                </li>
+              </ol>
+              <ol class="hidden font-medium text-gray-600 grid-cols-4 mt-6 sm:grid">
+                <li class="py-6 text-lg font-medium text-gray-500 text-left cursor-auto w-full">
+                  This is item 18216de4-abf7-4c8a-9157-32131d1036ca
+                </li>
+                <li class="py-6 sm:flex">This is item 66600a1a-eb96-4daf-b666-5ba0cbab2a75</li>
+                <li class="fixed inset-0 bg-opacity-25 bg-black">
+                  This is item 74c2dc78-ce74-4d4b-9737-df12acb5cd96
+                </li>
+              </ol>
+            </li>
+            <li class="text-sm text-gray-500 hover:text-gray-600">
+              <ul class="h-16 flex items-center justify-between">
+                <li
+                  class="text-gray-500 hover:bg-gray-50 block pr-4 pl-3 border-transparent border-l-4 hover:text-gray-700 hover:border-gray-300 font-medium text-base py-2"
+                >
+                  This is item a7ff4175-58c8-4483-b978-5360f2531e2b
+                </li>
+                <li class="justify-center flex flex-shrink-0">
+                  This is item 7f7f9d81-19ac-4b56-8932-9a43cc01f5f9
+                </li>
+                <li class="sm:flex">This is item a9409968-e8f1-4143-b713-60bad2dc85f5</li>
+                <li class="flex mt-3 items-center">
+                  This is item 0b320d65-9019-4de6-b984-80c3936bf7ed
+                </li>
+                <li class="font-medium text-gray-500 text-sm">
+                  This is item 8c996538-8f8d-4272-aac5-ff7c3b0d89b3
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="leading-6 text-gray-900 font-medium text-lg">
+                This is link 740b4aa2-33de-450e-b9e8-d6c61d43d97f
+              </a>
+              <img
+                class="flex-shrink-0"
+                alt="Profile picture of user f33059cc-1fba-4952-94bf-9e06ee4d20ec"
+                src="https://example.org/pictures/e848a14b-d9fc-4f00-9171-626412702637"
+              />
+            </li>
+            <li class="bg-white relative">
+              <a href="#" class="text-gray-500">
+                This is link 712bf91a-99b8-43d5-9506-a101350a0b40
+              </a>
+              <a href="#" class="divide-purple-600 divide-x shadow-sm rounded-md inline-flex">
+                This is link 26f8f1d4-1a1d-4ede-8f21-03b7622174bf
+              </a>
+            </li>
+            <li class="font-medium text-base hover:text-gray-900 text-gray-500">
+              <a href="#" rel="noreferrer" class="block rounded-full w-10 h-10 mx-auto">
+                This is link 1128c3e5-1125-4b47-95be-b9d423d4cdaa
+              </a>
+              <ul class="h-6 w-6">
+                <li class="text-sm text-gray-700 font-medium block">
+                  This is item 9c811439-d262-4d1d-a29e-e7d2584dec43
+                </li>
+                <li class="w-6 text-white h-6">
+                  This is item ace7de7a-55a4-41d8-8c78-56d22a8f1211
+                </li>
+                <li class="sm:col-span-6">This is item 6fccc6c2-8d66-4f74-aaaa-5443c5e59e20</li>
+                <li class="sm:flex lg:px-8 sm:justify-between sm:px-6 px-4 xl:px-0 sm:items-center">
+                  This is item a6040971-eb71-456c-b85f-f965eb79ace8
+                </li>
+              </ul>
+              <img
+                class="text-base ml-3 text-gray-500"
+                alt="Profile picture of user 7bf88f86-61e3-4127-b2e3-32fe4580d1a1"
+                src="https://example.org/pictures/3d5caa5d-0698-45b7-9606-3f95c601ce67"
+              />
+            </li>
+          </ul>
+          <ul
+            class="border-transparent border rounded-full hover:text-gray-500 flex -mx-2 p-2 items-center text-gray-400"
+          >
+            <li class="font-bold sm:text-3xl text-gray-900 text-2xl sm:tracking-tight">
+              <a href="#" class="bg-gray-100">
+                This is link ab1b9d4f-866b-43f5-be6a-aae4b23363f4
+              </a>
+            </li>
+            <li class="bg-white">
+              <img
+                class="text-white h-6 w-6"
+                alt="Profile picture of user 9e832966-5012-4bdb-9786-bbb1462e6c21"
+                src="https://example.org/pictures/26174daa-07e5-4647-ba98-f21b4fbacd61"
+              />
+              <a
+                href="#"
+                target="_blank"
+                class="hover:bg-indigo-600 hover:bg-opacity-75 text-white"
+              >
+                This is link bf1cf34e-accd-4182-894a-02a8eeb3d544
+              </a>
+              <ul class="border-gray-300 w-4 h-4 focus:ring-indigo-500 text-indigo-600">
+                <li class="sm:px-6 max-w-7xl px-4 mx-auto lg:px-8">
+                  This is item 6ff5574d-45bb-4018-bd81-a92ef4944655
+                </li>
+                <li class="block font-medium">This is item 4feb6f2e-18a2-43a9-aa92-43af8af6a8bb</li>
+              </ul>
+            </li>
+            <li
+              class="bg-gray-800 focus-ring-inset text-gray-400 items-center justify-center focus:outline-none p-2 focus:ring-2 focus:ring-white hover:bg-gray-700 inline-flex rounded-md"
+            >
+              <img
+                class="lg:row-end-2 lg:row-span-2 mt-14 lg:col-span-3 max-w-2xl lg:max-w-none sm:mt-16 mx-auto lg:mt-0"
+                alt="Profile picture of user 09f2fa20-1964-4156-9bb7-034633b54b21"
+                src="https://example.org/pictures/d1c865c3-83c0-4f4f-8959-1d4780b56841"
+              />
+              <a
+                href="#"
+                class="ml-auto hover:text-gray-500 p-1 focus:ring-indigo-500 bg-white focus:ring-2 flex-shrink-0 rounded-full focus:outline-none text-gray-400 focus:ring-offset-2"
+              >
+                This is link b39b0557-89ab-4d36-a308-32d8c00cc4c0
+              </a>
+              <a href="#" class="py-2 text-gray-500 relative bg-gray-50 px-3">
+                This is link d0c4e4d6-827f-4f42-8e17-d83077eddf33
+              </a>
+              <ul class="md:grid md:gap-8 md:grid-cols-2">
+                <li
+                  class="-ml-px py-2 bg-white text-sm font-medium px-4 inline-flex focus:ring-1 focus:outline-none hover:bg-gray-50 focus:ring-indigo-500 items-center border-gray-300 focus:z-10 focus:border-indigo-500 text-gray-700 relative border"
+                >
+                  This is item 9d4d75b3-4833-4729-a344-31b72eb369b3
+                </li>
+                <li class="relative space-x-3 group py-4 flex items-start">
+                  This is item 5651d53f-ddaf-414a-9e76-03bbedc9f0c6
+                </li>
+                <li class="flex-shrink-0 mr-4">
+                  This is item e6a93943-8681-4d7b-a247-4e201eb0aa22
+                </li>
+                <li class="font-medium text-sm text-gray-900">
+                  This is item db75ded7-cc29-400a-b797-b97e08480d2c
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-900 font-semibold">
+              <ul class="font-medium text-white text-base">
+                <li class="grid-cols-2 gap-y-4 gap-x-8 grid">
+                  This is item 4d40ac5d-b9cb-4f02-84b1-2f9943aefa87
+                </li>
+                <li class="sr-only">This is item 023e2a5a-76a1-47b0-abc1-51b9adef1a46</li>
+              </ul>
+              <a href="#" rel="noreferrer" class="text-white w-6 h-6">
+                This is link fb9d7386-6f10-41f0-aacd-098772c8799e
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="border-gray-200 border-t pt-10 text-sm space-y-6">
+          <img
+            class="group flex cursor-default p-3 select-none rounded-xl"
+            alt="Profile picture of user 68287cf5-56d9-479a-b74d-24904b012a24"
+            src="https://example.org/pictures/099190b4-73a1-4290-9daf-fb183999c311"
+          />
+          <ul class="sr-only">
+            <li class="text-sm text-gray-700 ml-3 font-medium block">
+              <ul class="py-16 px-4 lg:px-8 mx-auto sm:px-6 sm:py-24 max-w-4xl">
+                <li class="flex-none rounded-md object-center w-20 h-20 object-cover">
+                  This is item b76bf85e-1d43-407a-8b70-c259ccc5465c
+                </li>
+                <li class="h-0 min-h-[768px] bg-white">
+                  This is item 6531c89b-f6f8-47a0-864f-61521acf7cbd
+                </li>
+              </ul>
+              <ol class="justify-center h-7 w-7 items-center mx-auto flex rounded-full">
+                <li class="inset-0 bg-opacity-25 fixed transition-opacity bg-gray-500">
+                  This is item ceec80f1-a2bf-431e-8568-ebf02166e82e
+                </li>
+                <li class="mt-6 space-y-6">This is item 2c57953e-f8ac-40d9-a138-52a6253aab61</li>
+                <li
+                  class="rounded-md py-2 mt-1 border focus:outline-none block sm:text-sm w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white border-gray-300 px-3"
+                >
+                  This is item 95cfa46c-a747-41f4-8bf9-6719a37acbb6
+                </li>
+                <li
+                  class="items-center px-4 group space-x-4 rounded-xl flex hover:bg-gray-100 focus-within:bg-gray-100 py-2"
+                >
+                  This is item 7e97c30a-55dd-4a81-ac49-594e85c6fac0
+                </li>
+              </ol>
+            </li>
+            <li class="w-full">
+              <ul class="max-w-7xl mx-auto lg:px-8 sm:px-6 px-4">
+                <li class="hidden lg:flex lg:items-center lg:justify-between lg:flex-1 lg:min-w-0">
+                  This is item e15cf5ed-8613-4e16-b0cb-647310f70dc6
+                </li>
+                <li class="flex space-x-6 md:order-2">
+                  This is item 6997c458-8065-415d-a64a-d4e3b7aa9193
+                </li>
+                <li class="divide-gray-200 pt-6 divide-y">
+                  This is item f3b40bcf-d444-45a2-b9f1-99e99507e4fc
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ol>
+    </li>
+    <li class="flex items-center space-x-4">
+      <ul class="text-sm text-gray-500 mt-1">
+        <li class="not-italic">
+          <ul class="mt-6">
+            <li
+              class="text-white pl-11 w-full border-0 h-12 focus:ring-0 placeholder-gray-500 pr-4 bg-transparent sm:text-sm"
+            >
+              <ol class="mx-auto w-16 h-16">
+                <li class="text-sm text-gray-700 font-medium block">
+                  This is item c46fc70c-ceca-4081-9047-c4854febfeef
+                </li>
+                <li
+                  class="sm:pr-6 hover:border-gray-300 sm:pl-5 text-gray-500 hover:bg-gray-50 border-transparent pr-4 py-2 hover:text-gray-700 font-medium border-l-4 pl-3 block text-base"
+                >
+                  This is item 94cc75cd-77a6-4495-bbaa-28985b78ad33
+                </li>
+                <li class="ring-black ring-opacity-5 ring-1 shadow-sm">
+                  This is item a055d012-e1a3-4d09-9bb1-cc71693c8868
+                </li>
+              </ol>
+              <img
+                class="hover:text-gray-800"
+                alt="Profile picture of user faa5df5b-e51a-4d03-bca5-596052906e0d"
+                src="https://example.org/pictures/f1389158-81b8-45f9-847a-e30a445934bf"
+              />
+              <img
+                class="bg-gradient-to-b to-black from-transparent opacity-50"
+                alt="Profile picture of user b2d85417-8fa3-4a90-8fdf-b978ddd9a178"
+                src="https://example.org/pictures/e90c950b-ef53-47af-93e1-ae4c6d820c7e"
+              />
+              <a href="#" class="space-y-10"> This is link 424dc053-1115-4d25-9108-47fd64546cbe </a>
+            </li>
+            <li class="hover:text-gray-800 lg:items-center text-gray-700 lg:flex hidden">
+              <ul class="text-gray-900 mt-4 font-semibold">
+                <li class="w-6 h-6">This is item 335aa77e-6c08-46d8-bf3e-4bbf352c5481</li>
+                <li class="bg-gray-100">This is item 10a2649a-0238-40ec-9191-5fb73229355d</li>
+              </ul>
+              <ol class="border-t py-6 border-gray-200 space-y-6 px-4">
+                <li class="max-w-3xl mx-auto">This is item 698d4e56-4a94-46c4-a67e-484f66ac6a13</li>
+                <li class="items-center rounded-full justify-center mx-auto h-7 w-7 flex">
+                  This is item 80804ccd-c5de-4718-906d-f8ffe4473d02
+                </li>
+              </ol>
+            </li>
+            <li class="mt-4 text-gray-400">
+              <ul class="w-10 rounded-full h-10">
+                <li class="space-y-12">This is item 7db1e958-0773-4136-ae37-8fe88b7cb3aa</li>
+                <li class="font-semibold text-white">
+                  This is item 741c6dd3-3266-4a6e-8e39-fad4d86c5bd9
+                </li>
+                <li class="flex-none bottom-0 p-6 border-gray-200 sticky border-t bg-gray-50">
+                  This is item d46e2b37-27c2-4d44-bc9b-334468edf2f2
+                </li>
+                <li class="mt-1">This is item de89c021-72f6-4a35-8ac2-3515a4863b25</li>
+                <li class="rounded-full mx-auto w-7 items-center h-7 justify-center flex">
+                  This is item 7456df3e-5024-4777-bd0c-a1b6f2cfebea
+                </li>
+              </ul>
+              <ol class="sm:px-6 py-6 mx-auto max-w-7xl lg:px-8">
+                <li
+                  class="transition-all ring-1 max-w-2xl ring-black divide-gray-500 ring-opacity-5 divide-y backdrop-blur rounded-xl divide-opacity-10 bg-opacity-80 mx-auto backdrop-filter transform shadow-2xl overflow-hidden bg-white"
+                >
+                  This is item ef5fd74e-02af-44e9-8530-81061e729348
+                </li>
+                <li class="mt-16">This is item 74e78f2d-34d0-4807-9e78-0eaec32126a8</li>
+                <li class="items-center flex flex-shrink-0 px-4">
+                  This is item 22b61ff2-67bd-4a57-8e25-6e5d48e261e3
+                </li>
+                <li class="hidden lg:flex">This is item 81f170e7-5ef5-4e63-97fa-ce1da7981c9e</li>
+              </ol>
+              <ul
+                class="text-gray-700 sm:px-8 w-1/2 sm:w-auto focus:outline-none ml-0.5 text-sm rounded-md focus:ring-2 border border-transparent focus:ring-purple-500 relative font-medium whitespace-nowrap focus:z-10 py-2"
+              >
+                <li class="sm:flex-col absolute hidden inset-0 sm:flex">
+                  This is item 25622602-f9a3-4a1c-987d-17d0c9a1a128
+                </li>
+                <li class="row-start-1 gap-y-10 grid-cols-3 text-sm grid gap-x-8">
+                  This is item d7b64d07-a8f1-4424-9083-ff02be455b21
+                </li>
+                <li class="lg:items-center lg:flex sm:px-4 lg:px-0 px-0 lg:justify-between">
+                  This is item 3333067f-1e5e-494b-be50-6d4e3d9b7b7a
+                </li>
+              </ul>
+              <ol class="opacity-25 xl:inset-0 xl:absolute h-full w-full object-cover">
+                <li class="flex">This is item d686685b-f9f2-4661-afed-e53990c1af1e</li>
+                <li class="text-teal-200 hover:text-teal-100">
+                  This is item c82850f7-091d-4a50-bff5-cc5f7bb1360f
+                </li>
+                <li class="text-white">This is item d3df98a9-da63-4e13-b4a6-b4e1ed96614a</li>
+                <li class="py-16 max-w-2xl sm:px-6 px-4 sm:py-24 lg:px-0 mx-auto">
+                  This is item 72f1888f-90b0-43a8-888b-627ef47146e0
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <ul class="items-center flex justify-between">
+            <li class="font-medium text-gray-700 block text-sm">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="aspect-w-2 sm:relative group sm:aspect-none overflow-hidden aspect-h-1 rounded-lg sm:h-full"
+              >
+                This is link 63090699-e9e8-4b7d-bbfb-91b398a6a2f4
+              </a>
+              <ol class="flex flex-col">
+                <li class="max-w-lg space-y-6 mx-auto">
+                  This is item ed7258f6-b9e0-4bd8-b113-485897c4fd7a
+                </li>
+                <li class="hidden h-full lg:flex">
+                  This is item 3558274d-f2fb-4dbd-9aa9-b39ea900da9e
+                </li>
+              </ol>
+              <a href="#" target="_blank" rel="noreferrer" class="text-sm">
+                This is link b6e3048b-c953-443c-ae3f-a23c924a376e
+              </a>
+              <img
+                class="text-gray-200"
+                alt="Profile picture of user 64140837-710f-43cb-a0f8-c6b8438cb4c3"
+                src="https://example.org/pictures/146ad41d-3079-4677-b802-8a6b18c872ff"
+              />
+            </li>
+            <li
+              class="text-sm text-gray-500 items-center hover:text-gray-700 border-t-2 font-medium pt-4 hover:border-gray-200 border-transparent inline-flex px-4"
+            >
+              <a
+                href="#"
+                rel="noreferrer"
+                class="text-gray-900 ring-gray-200 rounded-lg mt-2 text-sm grid shadow gap-px ring-1 grid-cols-7 bg-gray-200"
+              >
+                This is link 53edd615-acf0-4669-8cff-b8280f1d5a7d
+              </a>
+              <a href="#" rel="noreferrer" class="inset-0 absolute overflow-hidden">
+                This is link 31ba1301-a0a0-4c51-a87b-430e07babaa6
+              </a>
+              <ul class="mt-6">
+                <li class="absolute bg-white -bottom-0.5 px-0.5 -right-1 py-px rounded-tl">
+                  This is item 64f7964e-5714-420e-9ca9-4e63fa06d6bf
+                </li>
+                <li class="block">This is item d61f24a0-434d-459d-b23f-01182a307f6e</li>
+                <li
+                  class="w-10 ring-white h-10 rounded-full ring-8 items-center flex justify-center bg-gray-400"
+                >
+                  This is item 6d1498aa-0365-4466-860f-604ecf7dbcdd
+                </li>
+                <li class="relative">This is item e2a6d89d-99c9-41d4-b434-013451caf28f</li>
+              </ul>
+            </li>
+            <li class="flex -ml-px w-0 flex-1">
+              <img
+                class="flow-root"
+                alt="Profile picture of user a4279d99-d5d9-4e65-9165-d09c4f114a7c"
+                src="https://example.org/pictures/f1f6367e-4bdc-4c98-8a25-f523628f2ddd"
+              />
+              <a href="#" class="lg:block hidden space-x-8 ml-10">
+                This is link 0ab1c8bf-d132-47a0-8dbd-cf794bf0abb7
+              </a>
+              <a href="#" class="text-gray-900">
+                This is link eb32658c-622c-4ffb-958f-1cdb1b162ac5
+              </a>
+              <a href="#" rel="noreferrer" class="items-center flex">
+                This is link 4f40f48f-56b0-47e9-a028-dd25b9058d5f
+              </a>
+            </li>
+            <li class="text-sm text-gray-500">
+              <a
+                href="#"
+                rel="noreferrer"
+                class="bg-indigo-600 p-1 border border-transparent items-center inline-flex focus:ring-indigo-500 shadow-sm text-white focus:outline-none focus:ring-offset-2 hover:bg-indigo-700 rounded-full focus:ring-2"
+              >
+                This is link 4753feec-e4ac-45da-a418-88c2c05d235b
+              </a>
+              <ul class="pt-5 pb-2 px-4 flex">
+                <li class="hover:bg-gray-100 py-1.5 focus:z-10 bg-white">
+                  This is item abbc9789-de19-459e-b5df-6c4a9c0260b3
+                </li>
+                <li
+                  class="focus:outline-none shadow-sm focus:ring-indigo-500 border px-4 hover:bg-gray-50 focus:ring-2 text-gray-700 border-gray-300 rounded-md py-2 bg-white text-sm focus:ring-offset-2 font-medium"
+                >
+                  This is item 976b0ee1-bc6b-4384-8c52-2805d7284b0e
+                </li>
+                <li class="sm:pr-12 font-bold text-2xl text-gray-900">
+                  This is item 35bd8538-9982-472c-97a8-8b349d8b2393
+                </li>
+                <li
+                  class="shadow-sm border justify-center text-sm text-white flex focus:ring-2 border-transparent hover:bg-indigo-700 py-2 w-full focus:outline-none rounded-md focus:ring-offset-2 focus:ring-indigo-500 bg-indigo-600 font-medium px-4"
+                >
+                  This is item 80f3be43-6dd6-44b8-8c57-4de48384dd63
+                </li>
+                <li class="pb-24 mt-16">This is item 837e4230-9620-49d1-991b-636caf37c8fa</li>
+              </ul>
+              <a href="#" class="text-sm"> This is link bdd2a4a8-61d8-431f-a648-c7df5015c475 </a>
+            </li>
+          </ul>
+        </li>
+        <li class="text-sm font-medium block text-gray-700">
+          <ul class="sr-only">
+            <li class="h-8 w-8 z-20 ring-white inline-block rounded-full relative ring-2">
+              <ol class="sm:px-6 mx-auto max-w-3xl px-4 items-center flex">
+                <li class="ml-3">This is item 3f3fd608-d791-4001-b055-48bcdd67b5c9</li>
+                <li class="border-gray-200 border-b">
+                  This is item 1ffd38c4-6b54-4766-b13b-f1d441fa193f
+                </li>
+                <li class="text-indigo-600 hover:bg-indigo-50 bg-white">
+                  This is item e6bfc7db-b965-4ecf-8a36-6d6149fc68ad
+                </li>
+                <li class="px-2 space-y-1">This is item adb9177e-d263-4c70-86e5-c95e6d4c4438</li>
+                <li class="pt-10 pb-6 space-y-12 px-4">
+                  This is item 8ba4e935-e5ae-4c0b-8bd0-0582a41666bf
+                </li>
+              </ol>
+              <img
+                class="block"
+                alt="Profile picture of user 42db5322-1960-491f-b21c-60a530601ae8"
+                src="https://example.org/pictures/19ea54ab-4923-42d2-9f95-21d63ffc015e"
+              />
+              <img
+                class="text-sm mt-1 text-gray-500"
+                alt="Profile picture of user 1eda6b9c-f578-4fa5-bc14-ed2d35233173"
+                src="https://example.org/pictures/c5b77ede-06d6-436a-8a66-50ea2dd247b9"
+              />
+            </li>
+            <li class="-m-2 font-medium p-2 block text-gray-900">
+              <ol class="space-y-1">
+                <li
+                  class="rounded-full h-8 text-gray-900 mx-auto justify-center flex w-8 items-center hover:bg-gray-200"
+                >
+                  This is item 5aca5624-6cc8-4ec4-9c62-2bdb7e5ba8bd
+                </li>
+                <li class="mx-auto items-center flex h-7 w-7 rounded-full justify-center">
+                  This is item 614e3e83-bf1f-45f1-897a-056d925a1d52
+                </li>
+                <li class="border-b border-gray-200">
+                  This is item 0d289522-fea9-4f95-9a82-254932bfc858
+                </li>
+              </ol>
+            </li>
+            <li class="sr-only">
+              <ul
+                class="focus:outline-none hover:text-gray-500 rounded-md focus:ring-inset focus:ring-2 p-2 items-center inline-flex focus:ring-indigo-500 hover:bg-gray-100 text-gray-400 justify-center"
+              >
+                <li class="space-y-1 mt-3">This is item d8d71c4a-194a-4c04-a411-d05991e09aff</li>
+                <li class="overflow-y-auto divide-y divide-gray-200 flex-1">
+                  This is item a484ba2e-0ddc-4740-9dca-faab10bc4c9c
+                </li>
+                <li class="sr-only">This is item 0724b22e-f099-4feb-b44c-767791e004d3</li>
+                <li class="rounded-full justify-center h-7 items-center w-7 flex mx-auto">
+                  This is item 1eca2abb-27d5-40d2-aa75-fd344ca52f8a
+                </li>
+                <li class="border-gray-200 border-t-2 flex-1">
+                  This is item 5ffabe21-54fa-44c8-9b6d-9a8c2adcd0fc
+                </li>
+              </ul>
+              <img
+                class="mt-0.5 sm:mt-1 text-gray-700"
+                alt="Profile picture of user 1a5a7534-915f-48b8-b4bf-3f8ec6653db2"
+                src="https://example.org/pictures/07e074f4-852c-4209-90f8-0db254059f4f"
+              />
+            </li>
+          </ul>
+          <img
+            class="grid rounded-lg isolate grid-cols-7 ring-1 bg-gray-200 shadow mt-2 ring-gray-200 text-sm gap-px"
+            alt="Profile picture of user 5eb039ec-b839-4286-84a5-b85542fa3dd8"
+            src="https://example.org/pictures/677dd484-1c35-48c8-9645-a5c1d6e57d1a"
+          />
+          <a href="#" target="_blank" class="text-gray-600">
+            This is link 1f016c54-a032-435f-beb5-6bb095fe89b6
+          </a>
+        </li>
+      </ul>
+      <ul class="w-10 relative h-10 z-10 rounded-full inline-block ring-2 ring-white">
+        <li class="overflow-x-auto py-2 xl:overflow-visible relative box-content h-80">
+          <a href="#" target="_blank" class="h-5 w-5 text-gray-400 mx-auto">
+            This is link 1c695a1a-b2ce-49ea-b0a1-904711e4f477
+          </a>
+          <ul class="mt-6 divide-gray-200 border-b border-t border-gray-200 divide-y">
+            <li class="pb-20 pt-16">
+              <ol class="-ml-1 mr-2 w-5 h-5 text-gray-400">
+                <li class="space-y-6 mt-6">This is item ad28acce-d688-4d24-bef7-604d118cce1c</li>
+                <li
+                  class="sm:p-6 md:justify-between lg:space-x-8 sm:rounded-lg md:space-x-6 px-4 md:flex md:items-center py-6 bg-gray-50"
+                >
+                  This is item 56aec4e9-11d3-4929-8dd2-bdf1f530fa20
+                </li>
+              </ol>
+              <ol class="group-hover:text-gray-500 text-gray-400">
+                <li class="sm:px-6 relative pt-6 lg:px-8 px-4">
+                  This is item c5789444-d9a7-41c2-8440-985a82ff8be1
+                </li>
+                <li class="hover:text-gray-600 text-gray-500">
+                  This is item a961797c-3d47-4b79-bb9b-8634c4ba3579
+                </li>
+              </ol>
+              <img
+                class="text-2xl text-gray-900 font-bold"
+                alt="Profile picture of user ff21c75f-d673-4f4a-98ec-a313d45bc3f2"
+                src="https://example.org/pictures/de44c56d-0ffe-4f5d-a681-53ca2dea3720"
+              />
+            </li>
+            <li class="flow-root">
+              <img
+                class="justify-between flex-wrap -ml-8 lg:-ml-4 -mt-4 flex"
+                alt="Profile picture of user 7fb87f5c-6a77-4acc-80f1-0135e00d34d6"
+                src="https://example.org/pictures/5273e665-dabb-46f8-8c5d-810b08fa3a56"
+              />
+              <a href="#" class="bg-white"> This is link 401854ae-24ae-420f-95e5-06b3e30630f2 </a>
+            </li>
+            <li class="sr-only">
+              <img
+                class="bg-white border-r pb-4 overflow-y-auto flex border-gray-200 flex-grow flex-col pt-5"
+                alt="Profile picture of user bd8ba873-43e6-4148-ae6c-771d336a0f2a"
+                src="https://example.org/pictures/12845370-e5df-488b-95b6-af777d67b50d"
+              />
+            </li>
+          </ul>
+          <ul
+            class="bg-blue-100 text-blue-800 items-center rounded font-medium px-2 text-xs inline-flex py-0.5"
+          >
+            <li class="text-gray-500 hover:text-gray-600">
+              <img
+                class="md:block flex-1 min-w-0 sm:hidden mt-6"
+                alt="Profile picture of user 3a79f91b-1816-4f56-b585-26f45f861e47"
+                src="https://example.org/pictures/4f86d527-4a65-43f8-baad-5aaaef88830f"
+              />
+              <ol class="text-gray-500 mt-2 text-base">
+                <li class="bg-gray-200 h-0.5 w-full">
+                  This is item 4ea78b1a-52e9-48c8-b7d3-4fc5946f890a
+                </li>
+                <li class="mt-6 font-medium text-gray-900 block">
+                  This is item 4350914d-0e10-4485-8532-b9f847bf70d8
+                </li>
+              </ol>
+              <a href="#" class="items-center w-7 justify-center flex mx-auto h-7 rounded-full">
+                This is link 85ac8f25-178f-4216-ab0b-5b196e84fd35
+              </a>
+            </li>
+            <li class="space-y-6 mt-6">
+              <ol class="min-h-[851px] overflow-auto bg-white">
+                <li class="bg-white focus:z-10 hover:bg-gray-100 py-1.5">
+                  This is item 8234d144-f700-414e-8ef6-7a9aa239e2da
+                </li>
+                <li class="text-sm px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+                  This is item a76acd4d-fc26-4066-8b3b-086bdad6b08c
+                </li>
+                <li class="text-blue-600 block">
+                  This is item bd9118c1-f817-4a77-95dd-ae0e87e25a01
+                </li>
+                <li class="ml-4 flex-shrink-0">
+                  This is item 82f06c11-86de-49fa-9408-907eb388e9fa
+                </li>
+                <li class="scroll-py-2 text-gray-800 text-sm max-h-72 py-2 overflow-y-auto">
+                  This is item d7f04927-e671-4b3f-bdc9-f6779acaf0c7
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="divide-gray-200 bg-white divide-y"
+              >
+                This is link afeefcc6-5a4b-4289-97a0-f5bf8deac53f
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li
+          class="ml-1.5 rounded-full font-semibold flex justify-center text-white bg-indigo-600 items-center w-8 h-8"
+        >
+          <a href="#" target="_blank" rel="noreferrer" class="flex inset-0 z-40 fixed">
+            This is link 503e2cf1-fa1e-43df-a593-c150c2bec61c
+          </a>
+          <a href="#" class="items-center flex justify-center py-3">
+            This is link 8e58e91c-8730-4a98-b228-e1059d372bdf
+          </a>
+        </li>
+        <li class="sr-only">
+          <ul class="text-gray-400 text-base">
+            <li
+              class="hover:text-indigo-900 inline-flex items-center font-medium group text-indigo-600"
+            >
+              <img
+                class="bg-white p-8"
+                alt="Profile picture of user 595508c3-92fe-459c-bb5f-6ab5f248be7f"
+                src="https://example.org/pictures/843f8b50-ef23-476a-974c-0b673cd4ad15"
+              />
+            </li>
+            <li class="mx-auto flex justify-center w-7 h-7 rounded-full items-center">
+              <img
+                class="text-gray-500 text-sm"
+                alt="Profile picture of user 127a6fe6-96b6-4516-b1be-cd86ca826227"
+                src="https://example.org/pictures/789402fe-c096-4a9b-9657-e2d82a3beb7d"
+              />
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="lg:col-span-2 col-span-6 sm:col-span-3"
+              >
+                This is link 8b30cdf8-ab95-4a4d-975d-ef6aebf581ba
+              </a>
+            </li>
+            <li class="sm:px-14 px-6 text-center py-14 text-sm">
+              <img
+                class="space-y-6 mt-6"
+                alt="Profile picture of user bae6f06b-2598-479b-9ac5-34554eaf9d41"
+                src="https://example.org/pictures/aee142b6-e827-4dd1-9c04-bc82bd7974d7"
+              />
+            </li>
+            <li class="sm:items-end space-y-4 w-full flex-col flex items-center">
+              <ul
+                class="rounded-md justify-center sm:flex-1 uppercase sm:py-6 flex px-4 py-3 relative border group focus:outline-none font-medium hover:bg-gray-50 items-center text-sm"
+              >
+                <li class="mt-2 sm:block text-gray-500 hidden text-sm">
+                  This is item c9a5adaa-7716-4311-9395-90e91155d670
+                </li>
+                <li class="font-medium text-sm leading-none text-gray-400">
+                  This is item 1a71dad3-22af-49b2-8376-6afd5e55c395
+                </li>
+                <li class="mt-10 border-t border-gray-200 pt-10">
+                  This is item 8cc2d708-27b4-4aa0-8c41-f17da9cf5d9c
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="block">
+                This is link 7dbe8cbd-c162-4746-910b-e067bccb867d
+              </a>
+              <ol class="h-8 w-auto">
+                <li class="text-base hover:text-white text-gray-300">
+                  This is item 64b1c173-9f04-41c7-bf97-229dc3a0f127
+                </li>
+                <li class="text-center pt-10 pb-4">
+                  This is item 36c8f892-5b14-4061-9f3e-7250ad18d71e
+                </li>
+              </ol>
+              <ul class="flex">
+                <li class="py-24 relative sm:px-6 max-w-7xl lg:px-8 px-4 mx-auto lg:py-32">
+                  This is item b7ff145b-ab54-4ef6-8591-c847a0406543
+                </li>
+                <li class="flex-shrink-0 absolute justify-center flex items-center">
+                  This is item 178a08b3-5a27-43b4-ab17-0355eddd103c
+                </li>
+                <li class="w-6 h-6">This is item c6d31216-a22b-4282-aa63-031eae09b2af</li>
+                <li class="absolute inset-0">This is item f9aee801-4d33-4e28-a337-0bc2c09775d5</li>
+              </ul>
+            </li>
+            <li class="hover:text-white text-gray-300">
+              <ol class="relative bg-white">
+                <li class="w-5 h-5 ml-3 hidden text-gray-400 flex-none">
+                  This is item 1a2b379d-afc0-42c9-9a4b-0d274f2b5b1a
+                </li>
+                <li class="py-6 bg-gray-100">This is item 6fdcc501-be3d-4921-a1d1-263e72e65bd4</li>
+                <li class="h-full flex space-x-8">
+                  This is item 45eb42ee-18e6-4710-b701-ec2b5d7f3430
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-gray-900 tracking-tight text-2xl sm:text-3xl font-bold"
+              >
+                This is link 786255c9-3c07-4d4a-84d7-78f1826b844b
+              </a>
+              <ol class="ml-3">
+                <li class="text-gray-500">This is item 739d0386-dadf-47d6-82b0-bd2ba8e3f953</li>
+                <li class="hidden lg:ml-8 lg:flex">
+                  This is item db82b18a-019f-42a1-bb9f-eaa406188c85
+                </li>
+                <li class="text-gray-500 text-base mt-2">
+                  This is item bc987077-01f6-41e4-a4f8-73b47af98041
+                </li>
+              </ol>
+              <ol class="sm:rounded-lg bg-white overflow-hidden shadow">
+                <li class="bg-gray-100">This is item aabe698b-3ca8-44e1-b26e-19e2680954f9</li>
+                <li class="mx-auto lg:max-w-5xl max-w-md">
+                  This is item 12f448ab-41a8-4609-80bd-4063fdbfff41
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <ol class="bg-opacity-10 justify-center items-center w-12 h-12 bg-white rounded-xl flex">
+            <li class="sm:pt-16 lg:pt-24 pt-12">
+              <a href="#" class="items-center flex mt-6">
+                This is link 317251d9-dbda-406a-9d0b-d8c0e974328d
+              </a>
+              <ol class="pointer-events-none items-center absolute flex inset-y-0 right-0">
+                <li class="flow-root">This is item 781f07a6-2887-4004-b1f1-f8d5445ccc46</li>
+                <li class="text-blue-gray-900 font-medium block text-sm">
+                  This is item 99d4d45f-480f-4886-99bf-4a53870e80b0
+                </li>
+                <li class="block font-medium text-gray-900 -m-2 p-2">
+                  This is item 3c23c152-4410-404e-ba88-2bfd3fe2dbf7
+                </li>
+                <li class="w-0 items-center flex-1 flex">
+                  This is item 674d3734-99c3-4f2f-99bd-c35c07df396a
+                </li>
+              </ol>
+            </li>
+            <li class="relative px-6 w-12 sm:w-16 sm:px-8">
+              <img
+                class="text-white font-bold tracking-tight sm:text-4xl text-3xl"
+                alt="Profile picture of user 7a4f4ca5-acff-4321-bd48-f94412c43907"
+                src="https://example.org/pictures/2db2c71a-12cc-4349-945e-f815aa638440"
+              />
+            </li>
+            <li class="py-4 flex">
+              <ul class="max-w-7xl py-12 lg:px-8 mx-auto sm:px-6">
+                <li class="py-6">This is item 3a0260c3-aaef-40d2-9af5-d80cd6249465</li>
+                <li class="justify-center items-center flex p-8 bg-white">
+                  This is item 1aa2b464-bcff-485a-82a5-2975a15bbc0e
+                </li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                class="focus:relative md:block border-t hidden border-b hover:text-gray-900 border-gray-300 hover:bg-gray-50 bg-white px-3.5 text-sm text-gray-700 font-medium"
+              >
+                This is link d8aba20c-5d6e-4466-bd27-ee114bd2b63b
+              </a>
+              <img
+                class="lg:pl-2"
+                alt="Profile picture of user 8c956d01-a5fc-4068-b556-5072d7770d64"
+                src="https://example.org/pictures/3cdd6176-8ef4-4c15-8bb4-6b59bd7faba9"
+              />
+            </li>
+            <li class="hover:bg-gray-100 bg-white py-1.5 focus:z-10">
+              <ul class="w-full relative focus-within:text-gray-600 text-gray-400">
+                <li
+                  class="font-semibold text-green-800 leading-5 rounded-full text-xs bg-green-100 px-2 inline-flex"
+                >
+                  This is item 6bcc25a2-9a42-46a1-b6a0-4d7d7cfec0f9
+                </li>
+                <li class="inset-0 absolute">This is item d0cde650-40f2-47b2-9188-e97389535d7f</li>
+              </ul>
+              <img
+                class="text-sm font-medium text-gray-700 block"
+                alt="Profile picture of user 7be423ff-49d1-4381-b52d-b8e1d1fc49d2"
+                src="https://example.org/pictures/91e6d3f3-02de-4884-a3ae-139461de1134"
+              />
+            </li>
+            <li class="py-2 border-gray-200 border-t">
+              <ol
+                class="text-gray-500 md:hidden border-gray-200 focus:outline-none focus:ring-indigo-500 px-4 focus:ring-inset border-r focus:ring-2"
+              >
+                <li class="rounded-full block bg-indigo-600 w-2.5 h-2.5 hover:bg-indigo-900">
+                  This is item 5d3f0359-0bf5-42c2-bc49-987b65ceaf89
+                </li>
+                <li class="text-gray-500 font-medium text-sm">
+                  This is item 765791c8-75b4-4eb0-ade3-77cde5fac867
+                </li>
+                <li class="h-24 w-auto mx-auto -my-1">
+                  This is item a31c4b7b-3ce9-467a-abd9-16682630dde3
+                </li>
+              </ol>
+              <img
+                class="flex relative"
+                alt="Profile picture of user 13838112-b81d-4f8d-840e-03ea4ed6adfb"
+                src="https://example.org/pictures/8e9ba709-e54d-4131-bd10-5ddded686796"
+              />
+              <a href="#" target="_blank" rel="noreferrer" class="text-right w-64 mx-auto">
+                This is link d406fa5d-2c1a-481b-990c-7e432caade31
+              </a>
+            </li>
+          </ol>
+          <a href="#" target="_blank" rel="noreferrer" class="border-gray-300 ml-4 border-l pl-4">
+            This is link 08cecac2-1477-416e-82cb-66d19cf9deda
+          </a>
+          <img
+            class="text-white hover:text-gray-100 font-medium text-sm"
+            alt="Profile picture of user e928df5f-58b8-424a-b490-b34bfc9ed77c"
+            src="https://example.org/pictures/62f5304d-7121-438a-99f8-609f962540c5"
+          />
+        </li>
+        <li class="focus:z-10 bg-white py-1.5 hover:bg-gray-100">
+          <a href="#" target="_blank" class="items-center flex">
+            This is link 92bb50f6-e30a-4f38-885f-c8ea1592ed92
+          </a>
+          <ul
+            class="border-b border-t sm:border-0 flex border-gray-100 text-center p-6 sm:border-l flex-col sm:border-r"
+          >
+            <li class="lg:gap-x-6 xl:gap-x-8 lg:grid-cols-2 lg:grid">
+              <ul class="sm:flex-shrink-0 lg:w-48 text-gray-500 sm:w-40 font-medium text-sm">
+                <li class="relative">This is item d32fef0e-07d1-4de1-96e6-c948e828f3ab</li>
+                <li class="w-full flex-shrink-0 group block">
+                  This is item 25aa3dbb-8466-458d-a8f0-b8dde39bf3c2
+                </li>
+                <li class="flex flex-col mt-5 flex-grow">
+                  This is item 2dda561d-9e51-4b79-8503-52bda6b775dd
+                </li>
+              </ul>
+              <img
+                class="z-40 flex inset-0 fixed"
+                alt="Profile picture of user b7d6dcb6-577e-47a0-981b-3268ff632a96"
+                src="https://example.org/pictures/eb41d5e6-8333-4235-b159-c64c41f815fd"
+              />
+            </li>
+            <li class="text-lg mt-3 text-gray-500">
+              <ul class="flex-shrink-0 pt-0.5">
+                <li class="aspect-h-7 lg:aspect-none aspect-w-12">
+                  This is item e17358de-1266-4515-bddb-24d3a45e991e
+                </li>
+                <li
+                  class="md:gap-x-8 grid-cols-1 sm:grid-cols-2 gap-6 text-sm lg:pl-8 lg:col-span-5 grid"
+                >
+                  This is item 9ba48ec4-9f52-4229-badb-ba2c133ea2b2
+                </li>
+                <li class="-mb-px px-4 flex space-x-8">
+                  This is item 13235afa-07b6-41a9-b3f5-c92fb1781b6d
+                </li>
+                <li class="-mr-2">This is item ccb505b1-3547-4d4e-8631-4b745981d9eb</li>
+              </ul>
+              <img
+                class="h-5 w-5 text-gray-400 mr-3"
+                alt="Profile picture of user 8b352cb5-94d4-4cd5-8743-be4550847545"
+                src="https://example.org/pictures/f237dfd8-475b-4dcb-addd-9dcd985022c2"
+              />
+            </li>
+          </ul>
+          <ul class="sm:max-w-xs w-full">
+            <li class="w-64 mx-auto">
+              <ul class="justify-center items-center mx-auto h-7 flex w-7 rounded-full">
+                <li class="md:mt-0 text-base md:order-1 mt-8 text-gray-400">
+                  This is item bec5e033-3260-46ca-b1d3-25e6ea8fb46e
+                </li>
+                <li class="text-sm font-medium text-gray-900">
+                  This is item 2e364fe5-d727-45b3-8f7a-56e3760f2a7d
+                </li>
+                <li class="flex-shrink-0 flex items-center">
+                  This is item 785d3483-7b0e-4bf0-bc3f-00a76e860cfd
+                </li>
+                <li
+                  class="focus:outline-none inset-y-0 px-2 flex absolute items-center right-0 rounded-r-md"
+                >
+                  This is item acabf5af-db2c-45e9-9f80-b2b7548e0b52
+                </li>
+                <li class="lg:col-span-2">This is item 7d0d447f-1c4b-49fa-8ce2-93c34974cc94</li>
+              </ul>
+            </li>
+            <li class="h-6 w-6">
+              <img
+                class="border-gray-300 bg-white focus:ring-indigo-500 text-sm px-4 hover:bg-gray-50 py-2 md:w-auto text-gray-700 items-center focus:outline-none rounded-md border flex justify-center w-full focus:ring-offset-2 font-medium shadow-sm focus:ring-2"
+                alt="Profile picture of user 020efd51-c33e-40fd-ac1f-3c4444caa07a"
+                src="https://example.org/pictures/824c8a65-0f30-4bcf-8603-95a065942087"
+              />
+              <img
+                class="block relative border focus:outline-none cursor-pointer p-4 border-gray-300 rounded-lg"
+                alt="Profile picture of user 1c56e07b-fe55-48d5-93bc-8be7096066bd"
+                src="https://example.org/pictures/5c513221-3c6b-40c4-b7ba-cf1beb85a071"
+              />
+              <ul class="max-w-7xl lg:px-8 px-4 py-12 mx-auto sm:px-6">
+                <li class="font-medium text-sm block text-gray-700">
+                  This is item 4a2a55ca-2420-4375-9485-c508925e2948
+                </li>
+                <li
+                  class="bg-gray-800 focus:ring-white rounded-full focus:ring-offset-gray-800 text-sm focus:ring-2 focus:outline-none text-white focus:ring-offset-2 flex"
+                >
+                  This is item 2ac1e9c4-479d-4ff8-89aa-48e836ca0d90
+                </li>
+              </ul>
+              <a href="#" target="_blank" rel="noreferrer" class="-mb-8">
+                This is link 2980a77f-d5f3-442a-941b-54db439683c3
+              </a>
+            </li>
+            <li class="text-gray-900 font-medium md:mt-10 mt-6">
+              <img
+                class="h-10 rounded-full w-10"
+                alt="Profile picture of user 4d599621-1669-4258-a343-87f2c2c71b0c"
+                src="https://example.org/pictures/fc1ef785-1347-4073-a31b-b21bfba3f3cc"
+              />
+            </li>
+            <li class="text-sm block font-medium text-gray-700">
+              <ol class="mt-1 text-sm text-gray-500">
+                <li class="sm:flex">This is item 824ddf4b-65b2-45e7-9197-179f033e6168</li>
+                <li class="object-center w-24 object-cover bg-gray-100 flex-none h-24 rounded-md">
+                  This is item e792a5dc-82e3-4bb7-a897-1262e2634fec
+                </li>
+                <li class="hover:text-gray-900 text-base text-gray-500">
+                  This is item aac8030a-e4bc-4263-ab5b-a364dd69a6d4
+                </li>
+                <li class="h-5 w-5">This is item 922779fa-700b-40a5-bf61-2507473d38cf</li>
+              </ol>
+              <ol class="mt-6 space-y-4">
+                <li class="pt-4 border-t pb-3 border-sky-800">
+                  This is item 07b07af8-ee98-47a3-8c9b-741f8cf29473
+                </li>
+                <li
+                  class="shadow-sm hover:bg-indigo-50 border-transparent px-4 bg-white inline-flex whitespace-nowrap border text-indigo-600 items-center font-medium text-base py-2 rounded-md justify-center"
+                >
+                  This is item c6243362-2098-4ac0-bf94-fccdd0eb2c03
+                </li>
+                <li class="w-5 h-5 text-gray-400">
+                  This is item 846ef751-bed4-446c-94cb-8e7cc52c2b65
+                </li>
+              </ol>
+              <img
+                class="lg:hidden flex relative justify-end"
+                alt="Profile picture of user 93a1b8d7-e175-4318-a4c2-3748b5ead6e5"
+                src="https://example.org/pictures/0670695e-b240-4487-bf8f-dc8607026402"
+              />
+            </li>
+            <li class="bg-white shadow overflow-hidden rounded-lg">
+              <img
+                class="w-full object-cover object-center h-full"
+                alt="Profile picture of user ba860a9b-c6a5-48dc-993f-54e949b9a1a1"
+                src="https://example.org/pictures/18ce0287-3ec8-4efa-a46d-d4a7b7c1cfd3"
+              />
+              <ul class="flex-1 pt-5 flex pb-4 w-full flex-col bg-indigo-700 relative max-w-xs">
+                <li class="md:block hidden">This is item 3e494ff6-1151-4032-a409-d61604e5ce7a</li>
+                <li class="font-medium text-blue-gray-900 text-sm block">
+                  This is item bbf58a84-9d3f-4218-80ae-fc29e2d0dcb5
+                </li>
+                <li class="text-gray-600">This is item 82e9fa45-f8b4-4869-80e1-7a53385d472c</li>
+              </ul>
+              <ul class="lg:grid-cols-3 lg:gap-8 lg:grid">
+                <li class="text-gray-200">This is item 0cc45abe-f559-43dc-9d7e-9e43138b69ee</li>
+                <li class="focus:outline-none hover:underline">
+                  This is item 6db0e361-8812-496d-b99f-bde3ce42cfec
+                </li>
+                <li class="grid-rows-1 flex-auto grid grid-cols-1">
+                  This is item 2b1d683a-360b-4dd2-86d7-0fa78a43bcb2
+                </li>
+                <li class="ml-3 text-sm font-medium block">
+                  This is item 2a04adb3-4022-4485-ac71-8c7422ad0382
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li
+          class="divide-gray-100 mx-auto transform ring-opacity-5 rounded-xl divide-y max-w-xl shadow-2xl ring-1 ring-black bg-white transition-all overflow-hidden"
+        >
+          <img
+            class="text-white bg-gray-900"
+            alt="Profile picture of user 32fe9e49-f339-4467-8643-9cc4f5410e1f"
+            src="https://example.org/pictures/148f98cb-f20c-456f-932b-8c7953824136"
+          />
+        </li>
+      </ul>
+    </li>
+    <li class="transition-opacity fixed bg-gray-500 inset-0 bg-opacity-25">
+      <ul class="sm:aspect-none bg-gray-200 aspect-w-3 sm:h-96 group-hover:opacity-75 aspect-h-4">
+        <li class="text-base text-gray-500 hover:text-gray-900 font-medium">
+          <img
+            class="px-3 py-2 bg-white relative"
+            alt="Profile picture of user 86ab823e-c61f-4e75-8a40-ece480473180"
+            src="https://example.org/pictures/e7ffddaf-4f3c-498c-8f63-a4e66d7e2146"
+          />
+          <ul class="bg-white py-1.5 hover:bg-gray-100 focus:z-10">
+            <li class="relative">
+              <img
+                class="items-center absolute pl-3 flex left-0 pointer-events-none inset-y-0"
+                alt="Profile picture of user 24f3a87e-8766-41fa-8967-b912f9bece5c"
+                src="https://example.org/pictures/f29d83d6-ad85-404e-9298-e96e58419b30"
+              />
+              <ul class="sm:px-6 bg-gray-50 px-4 lg:hidden py-6">
+                <li class="text-indigo-600 md:block h-5 w-5 hidden mx-1">
+                  This is item 1de5f3bd-a140-4a1e-b87f-8b98cc88e26a
+                </li>
+                <li class="md:items-center md:ml-4 md:flex hidden">
+                  This is item 22f57704-6019-454d-8389-f9256784f721
+                </li>
+                <li class="rounded-full justify-center items-center w-7 mx-auto h-7 flex">
+                  This is item a106aa0a-7fd0-49eb-af8f-cadb50f9f48c
+                </li>
+              </ul>
+            </li>
+            <li class="mt-6 sm:hidden">
+              <a href="#" target="_blank" class="text-gray-300 w-5 flex-shrink-0 sm:-ml-1 h-5">
+                This is link 38f0896c-ec1c-4391-88e8-01533f5ac34f
+              </a>
+            </li>
+            <li
+              class="focus:ring-indigo-500 rounded-md focus:ring-2 text-sm border-transparent px-4 py-2 hover:bg-indigo-700 bg-indigo-600 text-white focus:outline-none font-medium shadow-sm ml-6 border focus:ring-offset-2"
+            >
+              <a href="#" target="_blank" class="text-gray-700 block font-medium text-sm ml-3">
+                This is link bcd6f509-ec22-499c-9ec7-65bdfbc1fc09
+              </a>
+            </li>
+          </ul>
+          <a href="#" target="_blank" class="md:px-8 mx-auto sm:px-6 px-4 max-w-7xl">
+            This is link ac3d52de-8356-497d-8e51-11288d01bdda
+          </a>
+        </li>
+        <li class="mt-1">
+          <ul class="md:fixed md:flex md:w-64 hidden md:inset-y-0 md:flex-col">
+            <li class="flex-1 min-w-0">
+              <img
+                class="w-full aspect-h-1 aspect-w-1"
+                alt="Profile picture of user bfa9e9ab-6627-4232-b2d6-1734c0357822"
+                src="https://example.org/pictures/1465dc98-1132-4f69-b9e7-d857a172bef5"
+              />
+            </li>
+            <li class="h-7 w-7 rounded-full flex justify-center mx-auto items-center">
+              <img
+                class="w-0 flex-1 lg:pl-64 flex-col flex"
+                alt="Profile picture of user 2acb93e8-2410-4ae2-9409-1adde05b63de"
+                src="https://example.org/pictures/8a4658dc-1899-4273-824a-0d6a0f0adc0e"
+              />
+              <img
+                class="text-gray-600 text-sm flex"
+                alt="Profile picture of user 7727dfd1-ea3d-43d7-853d-3666f7930443"
+                src="https://example.org/pictures/4b338c78-11c4-4c81-ab47-b6d70e32b117"
+              />
+              <ol class="flex flex-col xl:flex-col sm:flex-row">
+                <li class="text-sm mt-1 text-gray-500">
+                  This is item e917dfab-3bec-47e6-9ae9-a9b8da71c4aa
+                </li>
+                <li
+                  class="gap-y-6 sm:gap-x-6 mt-6 grid sm:grid-cols-2 grid-cols-1 lg:gap-8 sm:grid-rows-2"
+                >
+                  This is item b3a1b236-f46e-4bac-b5ce-4da0324c7a9a
+                </li>
+                <li class="space-y-4 mt-4">This is item 09f5cd5d-9db1-4746-846e-d37073652c80</li>
+                <li
+                  class="border-gray-300 shadow-sm focus-within:ring-indigo-500 overflow-hidden border focus-within:ring-1 focus-within:border-indigo-500 rounded-lg"
+                >
+                  This is item 52893aba-7bc6-42f1-b92c-825ccc5db958
+                </li>
+                <li class="w-5 h-5">This is item 4508f1c1-e228-493e-9fe7-07f0609b9261</li>
+              </ol>
+            </li>
+          </ul>
+          <img
+            class="py-6 px-5 space-y-6"
+            alt="Profile picture of user 1825bbc3-0117-4892-8731-14eee7e93089"
+            src="https://example.org/pictures/4c1ce60f-4bb1-4aac-8532-263d9f222594"
+          />
+        </li>
+        <li class="hover:bg-gray-100 py-1.5 text-gray-400 focus:z-10 bg-gray-50">
+          <ol class="rounded-full mx-auto w-7 justify-center h-7 flex items-center">
+            <li class="mt-4 space-y-4">
+              <a href="#" class="mt-12 sm:w-full sm:max-w-lg sm:flex">
+                This is link 4ed326c8-93d3-49ff-8e14-cc509a6681ed
+              </a>
+              <img
+                class="text-base px-5 py-3 font-medium border text-indigo-600 border-transparent hover:bg-indigo-50 bg-white rounded-md items-center inline-flex justify-center"
+                alt="Profile picture of user 11670888-b5cd-4c32-a716-84cd625d2bc1"
+                src="https://example.org/pictures/8faf5e4a-271d-4641-ae0c-c4940a46e326"
+              />
+            </li>
+            <li class="flex hover:bg-gray-50 rounded-lg -m-3 p-3 items-center">
+              <a href="#" rel="noreferrer" class="py-2 text-sm block px-4">
+                This is link 76771dd0-1d27-467f-8af6-8985669507d9
+              </a>
+              <img
+                class="text-sm mt-1 text-gray-500"
+                alt="Profile picture of user e8a14051-ed8c-47bf-bacd-b86cbd9d8846"
+                src="https://example.org/pictures/2349a90e-2f5d-4d39-bb8e-62fb0745e617"
+              />
+              <img
+                class="pb-3 pt-2 sm:px-3 space-y-1 px-2"
+                alt="Profile picture of user c667d5f4-eb0f-4eb3-ad1f-06f86cc9e450"
+                src="https://example.org/pictures/cf236468-f8d9-4156-a1e9-a7adce23256b"
+              />
+            </li>
+            <li
+              class="border rounded-md font-medium text-white bg-indigo-500 px-4 bg-opacity-60 sm:px-8 justify-center border-transparent hover:bg-opacity-70 flex shadow-sm py-3 items-center text-base"
+            >
+              <a href="#" class="lg:col-span-2 sm:col-span-3 col-span-6">
+                This is link 08811a03-7693-42a5-b2bc-e1133980fe8f
+              </a>
+              <a href="#" target="_blank" rel="noreferrer" class="bg-white relative">
+                This is link 2024f756-5c5d-4276-b57e-4f7d0cb010b4
+              </a>
+            </li>
+          </ol>
+          <img
+            class="w-full max-w-xs lg:max-w-md mx-auto"
+            alt="Profile picture of user 255f1a0e-c4e7-4d0e-9bf9-108369ec7b32"
+            src="https://example.org/pictures/5c5f2bc1-bfa3-4247-8ae9-bad3ac6527e8"
+          />
+          <ul class="text-gray-600 flex-1 min-w-0 ml-3">
+            <li class="text-base lg:max-w-none max-w-prose">
+              <ul class="sm:col-span-2 space-y-5">
+                <li class="sm:-mb-48 lg:relative -mb-16 lg:m-0 mt-12">
+                  This is item 8df39723-f9e6-481f-a7e4-060597afc00a
+                </li>
+                <li class="sm:flex">This is item 74b6a166-cd40-4a1d-912e-6a250f2f025b</li>
+                <li class="sr-only">This is item b4f25f21-2969-458e-91e0-5ce64b77985d</li>
+              </ul>
+              <ol class="sm:block hidden">
+                <li
+                  class="flex flex-col overflow-y-auto w-full h-full shadow-xl bg-white py-4 max-w-xs pb-6 relative ml-auto"
+                >
+                  This is item 9220887b-f9b3-4a36-8d6d-71e6fa121b8f
+                </li>
+                <li class="block text-sm text-gray-700 font-medium">
+                  This is item dff1f913-d4ef-47e3-998e-e382ca36c120
+                </li>
+              </ol>
+              <ol class="w-auto h-8">
+                <li
+                  class="text-xs -ml-14 text-right -mt-2.5 pr-2 left-0 sticky w-14 text-gray-400 leading-5"
+                >
+                  This is item 01d6eb4f-cb24-4967-a2f6-a1eb828f4bc7
+                </li>
+                <li
+                  class="text-white text-base bg-opacity-50 flex py-4 items-center px-4 bg-cyan-700"
+                >
+                  This is item ed00abee-a4c8-4045-a8c0-727340ecc922
+                </li>
+                <li class="mt-8">This is item 534c4178-dc62-4dc1-9dec-4ba1bfb8012f</li>
+                <li class="flex-shrink-0">This is item e7be045d-ff14-47bd-9155-efbd8c26c2a3</li>
+              </ol>
+              <ol class="text-gray-300">
+                <li class="flex text-gray-500 ml-2 items-center text-sm">
+                  This is item ed061e8b-0487-4875-8367-cf4bdbcbf2dd
+                </li>
+                <li class="rounded-full h-8 w-8">
+                  This is item f920d4f5-10d1-4c74-a264-5932983769dd
+                </li>
+                <li class="flow-root">This is item bf71052c-2ab5-4452-aee7-98a4eb362b2b</li>
+                <li
+                  class="border-indigo-700 shadow-sm focus:ring-white py-2 focus:ring-offset-indigo-700 focus:outline-none bg-white hover:bg-indigo-50 rounded-md text-sm focus:ring-offset-2 text-indigo-700 px-6 relative whitespace-nowrap focus:z-10 font-medium focus:ring-2"
+                >
+                  This is item 4869cc74-0566-4c47-a150-56cbe03c6651
+                </li>
+                <li class="text-sm">This is item 49fe7f09-8ff4-4ba6-a415-bc39da29389a</li>
+              </ol>
+            </li>
+            <li class="bg-white divide-gray-200 divide-y">
+              <ol class="py-1.5 focus:z-10 bg-white hover:bg-gray-100">
+                <li class="-my-2">This is item db4ad3aa-2a57-44a1-94ca-1ed6aa578e7b</li>
+                <li class="sm:col-span-4 col-span-3">
+                  This is item 24af17c2-b7c6-4a31-a80c-8db21ec133af
+                </li>
+                <li
+                  class="bg-white focus:ring-2 flex rounded-full focus:ring-gray-900 focus:ring-offset-2 focus:outline-none"
+                >
+                  This is item d63fa296-6a7c-4733-b662-28b5d63af0a8
+                </li>
+              </ol>
+              <ul class="px-3 relative py-2 bg-white">
+                <li
+                  class="bg-white px-4 w-full border text-gray-500 text-sm rounded-md font-medium border-gray-300 justify-center shadow-sm py-2 inline-flex hover:bg-gray-50"
+                >
+                  This is item 0d51b9b0-6ba1-4c86-8f45-43b0fb38d223
+                </li>
+                <li class="pr-10 font-semibold xl:pr-0 text-gray-900">
+                  This is item 846113b5-db89-415d-a645-feb1e5d2b983
+                </li>
+                <li class="-ml-2 flex-wrap items-baseline flex -mt-2">
+                  This is item 1da01374-4d2e-413f-8aac-bf881338898c
+                </li>
+                <li class="shadow-sm flex md:items-stretch items-center rounded-md">
+                  This is item e0dc9b6c-8919-4cf3-bd45-040ec3e331d2
+                </li>
+                <li class="sr-only">This is item 2c7adba9-32bd-4d18-bb83-2a891aff0b24</li>
+              </ul>
+              <a href="#" target="_blank" class="max-h-12">
+                This is link 166ebb7a-b0d9-499e-a8ad-daccb26eef1b
+              </a>
+            </li>
+          </ul>
+          <a href="#" class="flex space-x-3"> This is link 29a2fb31-aa5e-4454-bce4-3760b8d69fc8 </a>
+        </li>
+        <li class="sr-only">
+          <ul class="border-gray-200 md:border-t-0 border-t divide-y divide-gray-200">
+            <li class="truncate">
+              <ul class="mt-3 text-gray-300 sm:mt-4 text-sm">
+                <li class="mt-8">This is item 1e360179-d34a-41b7-aaf4-3bcd236b40ae</li>
+                <li
+                  class="py-5 items-center focus-within:ring-2 px-6 relative focus-within:ring-inset hover:bg-gray-50 flex space-x-3 focus-within:ring-indigo-500"
+                >
+                  This is item 73b3ad62-1ae5-458a-8928-0ac7a13cbbd8
+                </li>
+                <li class="h-12">This is item 4f158cad-c67f-4f5b-9485-686ed84ec544</li>
+                <li class="text-gray-500 hover:text-gray-900 text-base">
+                  This is item 3fd7ec26-9e57-41f9-a43b-117b2ac79206
+                </li>
+              </ul>
+              <img
+                class="w-full h-full rounded-full bg-indigo-200"
+                alt="Profile picture of user eeec003f-25fa-490c-886b-f43300f8955f"
+                src="https://example.org/pictures/02d01b07-131f-45e3-8204-60ba7e94b10b"
+              />
+            </li>
+            <li class="divide-y divide-gray-100">
+              <a href="#" target="_blank" class="sr-only">
+                This is link d9f30590-3c9a-49f9-9ada-90bef5df6a17
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                class="border-gray-300 h-48 rounded border-dashed bg-white w-full border-2 text-gray-200"
+              >
+                This is link 15fadd34-8940-41b8-ba7d-357b82df6283
+              </a>
+              <ul
+                class="focus:border-indigo-500 w-full px-4 block py-3 rounded-md shadow-sm border-gray-300 focus:ring-indigo-500"
+              >
+                <li class="sm:ml-6 sm:flex hidden sm:items-center">
+                  This is item 040a6f05-38c3-46a7-99c0-7aac0d1b59db
+                </li>
+                <li class="w-full object-center object-cover h-full">
+                  This is item efc9f7a5-bb34-48f0-9c4b-133f75665dd4
+                </li>
+                <li class="gap-x-4 grid-cols-1 mt-6 grid gap-y-6 sm:grid-cols-3">
+                  This is item 05e42186-73d7-4f71-bc07-8366e33620b1
+                </li>
+              </ul>
+              <ol class="px-2 rounded-md items-center font-medium py-2 group flex text-sm">
+                <li class="w-6 text-gray-400 h-6">
+                  This is item c4cc4b54-5597-4628-8543-c9e21f500db1
+                </li>
+                <li class="gap-x-6 lg:gap-x-8 gap-y-10 grid grid-cols-1">
+                  This is item c00e358e-6b9f-4c68-8d3d-c4601a674384
+                </li>
+              </ol>
+            </li>
+            <li class="relative flex">
+              <ul class="group-hover:text-gray-500 ml-2 w-5 h-5">
+                <li class="flex space-x-8 mt-6 justify-between">
+                  This is item a4c89850-1208-4734-b4ac-01bcb3488872
+                </li>
+                <li class="sr-only">This is item 3c5e3a71-cb6d-43ce-8306-13b7f7d80aa0</li>
+                <li class="flex rounded-full w-7 justify-center h-7 items-center mx-auto">
+                  This is item da2cd611-5e83-41b2-b1c8-a88a4e3bdfaf
+                </li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="mt-16 xl:grid-cols-4 grid lg:grid-cols-3 sm:gap-y-16 sm:grid-cols-2 gap-x-6 grid-cols-1 gap-y-10 lg:gap-x-8"
+              >
+                This is link 3011783f-29c2-4124-a7c0-df134ecd294f
+              </a>
+            </li>
+          </ul>
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="lg:mt-9 text-center lg:row-start-1 lg:col-end-13 mt-10 xl:col-start-9 lg:col-start-8"
+          >
+            This is link 8d025940-3728-4603-9602-6a00dc543d39
+          </a>
+          <ul class="bg-indigo-600 lg:border-none border-b border-opacity-25 border-indigo-300">
+            <li class="text-indigo-200 text-lg mt-4 leading-6">
+              <img
+                class="prose max-w-none prose-sm mt-2 text-gray-500"
+                alt="Profile picture of user f5f20fad-9607-49c5-9b31-fc851f4de296"
+                src="https://example.org/pictures/3970ac20-7a9b-4cba-92d3-d3ed202c97ee"
+              />
+              <ul class="sm:flex py-4">
+                <li class="h-8 w-auto">This is item 97ef9df3-2085-4b9c-b82d-02772d741fb8</li>
+                <li
+                  class="absolute ring-opacity-5 shadow-lg w-48 right-0 ring-1 origin-top-right ring-black rounded-md bg-white z-10 focus:outline-none py-1 mt-2"
+                >
+                  This is item 49a8b97d-cbc8-4f3c-aaf2-47cadec89411
+                </li>
+                <li class="lg:col-start-1 md:col-span-2 lg:row-start-1 col-span-1">
+                  This is item 8330bd16-51f5-4345-93c3-6fe3268a8fb4
+                </li>
+              </ul>
+              <ul
+                class="rounded-md hover:text-white text-gray-400 hover:bg-gray-700 block px-3 text-base font-medium py-2"
+              >
+                <li class="pt-6 border-gray-200 border-t mt-8">
+                  This is item 876f1735-f8b2-462e-a34f-3d445e032443
+                </li>
+                <li class="flex -mb-px space-x-8">
+                  This is item c080cded-e57b-4a53-bf62-08e087c18c6e
+                </li>
+                <li class="sr-only">This is item 37d1250c-d792-452f-a011-b251916164e7</li>
+                <li class="flex items-start justify-between">
+                  This is item 694fe092-2d9c-4744-8f40-ec7115f1df99
+                </li>
+              </ul>
+            </li>
+            <li class="text-center mt-6 text-sm text-gray-500">
+              <ol class="flex-shrink-0 w-5 h-5">
+                <li class="p-2 rounded-lg bg-indigo-800 flex">
+                  This is item 4de00f8d-810d-4a98-8ef5-c56f7eae1e87
+                </li>
+                <li class="flex-1 justify-end flex items-center">
+                  This is item afb90421-0dae-4f1e-8cd1-38985c656529
+                </li>
+                <li class="font-medium text-sm py-2 hover:bg-sky-400 rounded-md px-3 text-white">
+                  This is item f212e3d1-431d-43a1-ac13-fd7f95a21380
+                </li>
+              </ol>
+              <img
+                class="relative z-10"
+                alt="Profile picture of user 7d8374b0-6c74-452c-8ba0-7065bd2a516c"
+                src="https://example.org/pictures/7d2b149a-378f-44e4-9cf3-ccaa4461bd37"
+              />
+              <ul
+                class="shadow-sm border focus:ring-indigo-500 border-transparent bg-indigo-600 rounded-md text-white text-sm focus:ring-offset-2 px-4 w-full py-2 focus:ring-2 focus:outline-none justify-center hover:bg-indigo-700 font-medium flex"
+              >
+                <li class="hover:text-gray-500 lg:block ml-6 text-gray-400 p-2 hidden">
+                  This is item 610b4745-7417-4d4c-a75d-0ecc27316d1b
+                </li>
+                <li class="py-2 justify-center bg-white flex">
+                  This is item 261d2dd7-38a6-4cb2-b7e3-ca8522093cf1
+                </li>
+                <li
+                  class="lg:grid-cols-2 gap-y-10 lg:col-span-2 grid lg:gap-x-8 grid-cols-1 lg:gap-y-0"
+                >
+                  This is item 5ac97726-6c77-4681-ba91-72ab4fd1a435
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-900 font-semibold text-left py-3.5 text-sm px-3">
+              <a href="#" class="sm:text-2xl font-medium text-xl">
+                This is link fdf4fd88-3f82-476f-8369-cffe3acff91f
+              </a>
+            </li>
+            <li class="hidden text-indigo-100 flex-none ml-3">
+              <ul class="space-y-8">
+                <li class="items-center flex hover:text-gray-800 font-medium text-gray-700 text-sm">
+                  This is item e5e62b35-04e1-45cd-86f3-8b022df8c5de
+                </li>
+                <li
+                  class="bg-indigo-700 sm:px-12 sm:py-16 rounded-3xl lg:flex lg:items-center px-6 lg:p-20 py-10"
+                >
+                  This is item f5df527b-b282-4ff7-a169-3e4adec097d8
+                </li>
+                <li class="sm:mt-0 mt-1 sm:col-span-2">
+                  This is item 17657a4f-2272-44f7-9eed-c6f3b4150eec
+                </li>
+              </ul>
+              <img
+                class="relative py-32"
+                alt="Profile picture of user cb0a5c68-7edf-4334-9128-91f8d1861dbb"
+                src="https://example.org/pictures/a978d4e6-7791-4326-be16-f342f94fb345"
+              />
+              <img
+                class="justify-center items-center rounded-full mx-auto h-7 w-7 flex"
+                alt="Profile picture of user d67e8307-ac6a-4b5d-8974-38b871223d4e"
+                src="https://example.org/pictures/6fabfe3b-8ce2-4693-943e-f90261861611"
+              />
+              <ol class="flex-shrink-0 w-5 h-5">
+                <li class="flex py-4 space-x-3 items-center">
+                  This is item 3156d280-ea7e-4bc6-a57a-ffda6e1c41fe
+                </li>
+                <li class="text-sm grid-cols-2 grid grid-rows-1 gap-8">
+                  This is item 230b5854-8dcf-43c0-9e7e-29687187a51f
+                </li>
+              </ol>
+            </li>
+            <li class="bg-gray-200 h-2.5 rounded-full w-2.5 hover:bg-gray-400 block">
+              <ol class="max-w-7xl px-8 mx-auto">
+                <li class="h-auto w-5 flex-shrink-0 block">
+                  This is item 0200bdff-4061-4e04-8d85-84d137ed92b5
+                </li>
+                <li class="sm:mt-4 sm:space-y-4 space-y-6 mt-6">
+                  This is item ede58ba6-520a-47d5-a3e1-62eec30b043a
+                </li>
+                <li class="xl:px-20 pt-10 sm:px-16 lg:pr-0 sm:pt-16 pb-12 px-6 xl:py-20 lg:py-16">
+                  This is item c94a9363-fcb1-4cf3-bdee-58ac6a3b9056
+                </li>
+              </ol>
+              <ol class="text-gray-600">
+                <li
+                  class="bg-gray-50 px-4 lg:col-span-5 mt-16 rounded-lg lg:p-8 sm:p-6 lg:mt-0 py-6"
+                >
+                  This is item 9a4715d2-13a9-4cf7-87fc-c982b496c0c7
+                </li>
+                <li class="ml-3 text-xs text-gray-400 flex-none font-semibold">
+                  This is item daed189a-6c58-4235-85cc-a144f26cf68f
+                </li>
+                <li class="font-medium hover:text-indigo-500 text-indigo-600">
+                  This is item 62e84d78-2696-4e08-9e38-51260171aeaa
+                </li>
+              </ol>
+              <ul class="w-4 focus:ring-grape-500 border-gray-300 h-4 text-grape-600">
+                <li class="bg-gray-100 py-10">This is item d2b3e285-35d7-4b8d-ba68-5533b588a813</li>
+                <li class="max-w-7xl px-2 sm:px-4 lg:px-8 mx-auto">
+                  This is item aa5532b2-a232-40d6-8eb9-979d2e8367c2
+                </li>
+                <li class="text-sm text-gray-500 font-medium ml-4 hover:text-gray-700">
+                  This is item 14a4b767-843f-4785-9799-6082d09994de
+                </li>
+                <li class="sr-only">This is item 8160528c-1ad2-4713-a7c9-f8f7c291955b</li>
+                <li class="min-w-full border-separate">
+                  This is item 3528ed6d-2e83-4570-b7e7-d728bcb51fa9
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <ol class="justify-center px-4 py-12 bg-white flex items-center">
+            <li class="sm:ml-6">
+              <ol class="sr-only">
+                <li class="text-base font-medium hover:text-gray-700 text-gray-900">
+                  This is item d132fb9f-fffe-4447-8821-cf1c2dbf49f6
+                </li>
+                <li class="rounded-full flex h-7 mx-auto justify-center items-center w-7">
+                  This is item 776406dc-9e0d-45ba-a9b8-7a857a1f3b76
+                </li>
+                <li class="block">This is item 92eb4912-a545-4ccb-8155-fc11294b9bd6</li>
+                <li
+                  class="focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md w-full shadow-sm block sm:text-sm"
+                >
+                  This is item ba20a27c-a520-4436-be5f-bd69a5e2d06a
+                </li>
+                <li class="relative">This is item c25c8bab-afa4-40b4-8ff5-3dac1ffbd6c6</li>
+              </ol>
+            </li>
+            <li
+              class="group inline-flex text-sm justify-center text-gray-700 font-medium hover:text-gray-900"
+            >
+              <ul class="block lg:inline">
+                <li class="text-gray-500 h-5 -mr-1 w-5 ml-2">
+                  This is item dafcb840-33c5-41a1-97b4-7e8c30bccd18
+                </li>
+                <li class="font-medium text-gray-900 block p-2 -m-2">
+                  This is item 970bd239-2f33-4160-ab47-d7dd52c5fa13
+                </li>
+                <li class="sr-only">This is item 80a18d5e-80a4-48f8-9395-8e6e8ff914c9</li>
+                <li class="bg-gray-900">This is item 88349831-8ddf-4c31-b8b1-fc49b42ab080</li>
+                <li class="sr-only">This is item 52fea8dd-a6c4-450c-8ea7-e6abe5a7fc89</li>
+              </ul>
+              <ol class="lg:mt-0 lg:col-start-1 mt-8 lg:row-span-3 lg:col-span-7 lg:row-start-1">
+                <li class="ml-3 text-sm">This is item e2f3aa3b-a971-477d-9987-d557c01127e1</li>
+                <li class="rounded-full flex w-7 items-center mx-auto justify-center h-7">
+                  This is item 2ff4da91-85f7-4bac-92bd-15d704ae0849
+                </li>
+              </ol>
+              <a
+                href="#"
+                class="p-1 text-gray-400 focus:ring-offset-2 ml-auto focus:ring-white focus:outline-none bg-gray-800 flex-shrink-0 focus:ring-offset-gray-800 rounded-full hover:text-white focus:ring-2"
+              >
+                This is link fd4021d7-e85e-442a-aab6-27b6f21abbf4
+              </a>
+              <img
+                class="space-y-6"
+                alt="Profile picture of user 0314c84c-818f-4f22-a2fe-bd4da99249e9"
+                src="https://example.org/pictures/1463088b-ab82-472c-9a04-4e1254003383"
+              />
+            </li>
+            <li class="shadow-sm sm:flex-1 sm:min-w-0 relative rounded-md">
+              <ul class="sm:grid-cols-2 gap-y-12 grid-cols-1 sm:gap-x-8 grid sm:col-span-2">
+                <li
+                  class="sm:grid-cols-7 col-end-2 sm:pr-8 col-start-1 grid-cols-1 grid row-start-1"
+                >
+                  This is item 4016c028-c5f2-453e-b79c-1967f6caac73
+                </li>
+                <li
+                  class="border-transparent rounded-md font-medium focus:ring-2 text-sm border bg-indigo-600 focus:ring-indigo-500 focus:ring-offset-2 py-2 items-center focus:outline-none hover:bg-indigo-700 ml-3 text-white shadow-sm inline-flex px-4"
+                >
+                  This is item 8cb0dd8f-7448-4c96-b602-6b7647926bfb
+                </li>
+                <li class="flex xl:mt-0 xl:ml-4 mt-5">
+                  This is item 1baa244f-8715-4dac-a63d-c7e45610d7bd
+                </li>
+                <li
+                  class="group-hover:opacity-75 sm:aspect-h-3 sm:h-auto rounded-lg h-96 overflow-hidden w-full sm:aspect-w-2"
+                >
+                  This is item d5269819-6ec3-4069-a1e8-7d3636b45e3b
+                </li>
+                <li
+                  class="lg:col-span-5 aspect-w-2 overflow-hidden bg-gray-100 aspect-h-3 rounded-lg sm:col-span-4"
+                >
+                  This is item d3153834-e7ee-4846-83eb-4762847dea18
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+      </ul>
+      <ul class="border-gray-300 h-4 rounded text-indigo-600 focus:ring-indigo-500 w-4">
+        <li class="text-base font-medium text-gray-800">
+          <img
+            class="flex items-center"
+            alt="Profile picture of user 21843a2e-1381-4721-8b51-3fb37a728a4c"
+            src="https://example.org/pictures/51bc1028-4e90-4544-a49c-054fa25357fc"
+          />
+          <ul
+            class="-mr-1 ring-opacity-5 z-10 ring-black divide-gray-200 mt-2 absolute overflow-hidden bg-white w-72 origin-top-right sm:left-auto focus:outline-none rounded-md shadow-lg sm:right-0 divide-y left-0 ring-1"
+          >
+            <li class="gap-y-10 grid-cols-2 gap-x-8 grid">
+              <a
+                href="#"
+                class="sm:block sm:mt-0 flex items-center sm:top-0 mt-4 sm:left-1/2 sm:absolute"
+              >
+                This is link e950aeb3-aef8-467b-b795-170286332f58
+              </a>
+              <ol
+                class="rounded-full items-center inline-flex text-green-800 py-0.5 text-sm px-3 font-medium bg-green-100"
+              >
+                <li class="flex-1 min-w-0">This is item a2148d80-d73f-4aef-9612-cafad4a2480e</li>
+                <li class="lg:pl-9">This is item 97498355-f590-41ab-ac66-5b19edcb5927</li>
+              </ol>
+            </li>
+            <li class="text-gray-900 font-bold text-xl">
+              <ol
+                class="focus:ring-indigo-500 focus:ring-inset hover:bg-gray-100 focus:outline-none focus:ring-2 rounded-md text-gray-400 items-center bg-white p-2 inline-flex justify-center hover:text-gray-500"
+              >
+                <li class="leading-6 text-lg text-gray-900 font-medium ml-16">
+                  This is item 5b7a5ae6-e752-44e3-b5e2-413d4c8272e2
+                </li>
+                <li class="mt-6 px-5">This is item 812a5c24-d525-49ac-b032-6793a9c2c0d3</li>
+                <li class="-my-2 -mr-2 md:hidden">
+                  This is item 74fafecb-a6c1-4f43-be7e-d13a776ffdbc
+                </li>
+              </ol>
+              <a href="#" target="_blank" class="h-5 w-5">
+                This is link 91df79f8-165b-470a-9b09-f951cb51410e
+              </a>
+            </li>
+            <li class="text-base mt-4 text-gray-900 font-semibold">
+              <ul class="sr-only">
+                <li class="grid-cols-1 gap-y-12 sm:grid-cols-2 sm:col-span-2 grid sm:gap-x-8">
+                  This is item 6d308f17-2b5e-4f7f-833d-982b168614e2
+                </li>
+                <li class="py-2 font-medium rounded-md text-sm px-3">
+                  This is item 5f3c6666-b5d9-4850-97ee-25aaac012a28
+                </li>
+              </ul>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="text-3xl sm:text-4xl text-gray-900 tracking-tight font-bold"
+              >
+                This is link 439375dc-d1e1-471d-bb0d-1754cc570279
+              </a>
+              <ul class="py-1">
+                <li class="lg:hidden">This is item 67984683-66f1-4390-bb2f-518ab744bd41</li>
+                <li class="w-6 h-6">This is item dacfd789-d1b8-42aa-bfbf-ee924987c067</li>
+                <li class="text-gray-500 font-medium text-sm">
+                  This is item d1335dea-89cd-4c08-a2bf-f71519137a29
+                </li>
+                <li
+                  class="block rounded-md px-3 hover:bg-gray-700 text-gray-400 text-base hover:text-white py-2 font-medium"
+                >
+                  This is item 5a1c0667-ea18-4ad0-ae82-53f9cbaebf87
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="flex py-4 items-center justify-between">
+          <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+            This is link 1f46191c-f92a-475f-82e9-e99419478713
+          </a>
+        </li>
+        <li
+          class="bg-indigo-900 lg:pb-24 lg:col-start-2 lg:w-full lg:pt-0 pt-6 lg:px-0 lg:bg-transparent pb-12 lg:mx-auto lg:max-w-lg md:px-10 lg:row-start-1 text-indigo-300"
+        >
+          <img
+            class="h-full text-gray-300 w-full"
+            alt="Profile picture of user 7d9faec9-4f79-47ae-93cb-e4f91912e055"
+            src="https://example.org/pictures/f23ee6d4-0a91-486f-a950-0583bac5f970"
+          />
+        </li>
+      </ul>
+      <a
+        href="#"
+        target="_blank"
+        rel="noreferrer"
+        class="w-16 focus:ring-inset h-16 focus:outline-none flex items-center justify-center focus:ring-2 focus:ring-blue-600 bg-cyan-400 lg:w-20"
+      >
+        This is link d98658c5-d285-42ce-86ee-2fdc243b0405
+      </a>
+      <ol class="text-yellow-400">
+        <li class="flex sm:block items-center sm:text-center sm:flex-none">
+          <img
+            class="bg-white focus:ring-indigo-500 hover:text-indigo-500 focus:ring-2 text-indigo-600 focus:ring-offset-2 focus:outline-none text-sm rounded-md font-medium"
+            alt="Profile picture of user 9b634ecd-f317-4568-bc24-80d02a7c4db4"
+            src="https://example.org/pictures/dbcb98d9-2868-4337-a0f7-6c06b9668de1"
+          />
+          <img
+            class="h-7 flex mx-auto justify-center w-7 items-center rounded-full"
+            alt="Profile picture of user 27de8125-94bb-47e8-81c0-76c0aa412713"
+            src="https://example.org/pictures/f2589bc1-6e95-4403-9447-686285951f76"
+          />
+          <ol class="max-w-lg mx-auto lg:mx-0">
+            <li
+              class="text-gray-400 p-1 focus:ring-2 flex-shrink-0 focus:ring-offset-2 bg-white focus:outline-none ml-auto focus:ring-indigo-500 hover:text-gray-500 rounded-full"
+            >
+              <ol class="w-6 h-6 flex-shrink-0 group-hover:text-gray-500 text-gray-400">
+                <li class="flex-shrink-0 px-4 items-center flex">
+                  This is item 31fd67ff-41b8-46bb-a0c8-56a96d59c10d
+                </li>
+                <li class="lg:flex lg:items-center lg:flex-1 hidden">
+                  This is item 79a553ab-4780-43d7-a4b6-b4666407729f
+                </li>
+                <li class="justify-center w-7 items-center mx-auto rounded-full flex h-7">
+                  This is item d4254c51-a7d4-4307-9909-c9d25d4edd66
+                </li>
+                <li class="border-gray-200 py-5 border-t px-4 sm:px-6">
+                  This is item a15deaa5-1774-4d75-91e9-aa45342f0b74
+                </li>
+              </ol>
+              <img
+                class="inline-flex items-center focus:ring-indigo-500 focus:ring-offset-gray-800 border focus:ring-offset-2 py-2 px-4 focus:ring-2 text-sm focus:outline-none hover:bg-gray-700 text-white border-transparent font-medium rounded-md bg-gray-600 shadow-sm"
+                alt="Profile picture of user dad780be-2cc8-4798-8f3d-412237563e69"
+                src="https://example.org/pictures/001d1fba-5072-4aa9-b562-a8ab7d1f402e"
+              />
+              <img
+                class="inset-0 absolute"
+                alt="Profile picture of user c9fa02d6-8927-49d4-9d02-bcdc7ee1ae7b"
+                src="https://example.org/pictures/9da5fa19-57a0-4190-b031-87bda9839315"
+              />
+              <img
+                class="space-y-4"
+                alt="Profile picture of user 9ae48787-c006-40ea-952e-2c1372826df0"
+                src="https://example.org/pictures/04620d1f-8b23-4459-8bcb-c93caeebb820"
+              />
+            </li>
+            <li class="h-12 w-12 opacity-25 text-white">
+              <ol class="col-span-full">
+                <li class="bg-white">This is item 88608bd6-7d89-4826-8484-1e9f2c7175eb</li>
+                <li class="inset-0 transition-opacity fixed bg-opacity-25 bg-gray-500">
+                  This is item a36f167c-f49e-4c00-85ed-f205c0884067
+                </li>
+                <li
+                  class="rounded-l-md pl-3 md:px-2 py-2 border-gray-300 items-center flex md:w-9 text-gray-400 border pr-4 md:hover:bg-gray-50 border-r-0 justify-center bg-white hover:text-gray-500 focus:relative"
+                >
+                  This is item d2234dcb-fc30-455e-9361-96a76863db91
+                </li>
+                <li class="items-start flex">This is item 57fdfb3c-38ce-477e-b5d7-0bc4265c1d06</li>
+              </ol>
+              <img
+                class="mx-auto rounded-full justify-center items-center w-7 h-7 flex"
+                alt="Profile picture of user e9a996fe-0fc1-4beb-a7de-8be9dc04f863"
+                src="https://example.org/pictures/89983abf-7ccf-4f80-9236-27ea0f2f3446"
+              />
+              <ol class="bg-white py-12 sm:px-6 lg:px-8 px-4">
+                <li class="fixed inset-0 bg-black bg-opacity-25">
+                  This is item b2a06076-f9d8-4368-906e-7bb48181ec88
+                </li>
+                <li
+                  class="bg-white hidden items-center border relative px-4 text-sm border-gray-300 focus:z-20 md:inline-flex font-medium text-gray-500 py-2 hover:bg-gray-50"
+                >
+                  This is item 82d9f52c-30f3-44e5-9a3f-d77f11e20a85
+                </li>
+                <li class="-mr-2">This is item 39da06e2-2a36-4edf-acce-7d9bfde29045</li>
+                <li class="py-6 border-t space-y-6 border-gray-200 px-4">
+                  This is item 1315d21e-5b56-4ff8-908f-3d89c77fe77e
+                </li>
+              </ol>
+              <ul class="bg-gray-100">
+                <li class="mt-1">This is item cb6ddf5b-d44d-4354-aa67-911c8845d55d</li>
+                <li class="mx-auto items-center flex rounded-full justify-center w-7 h-7">
+                  This is item 1ed2bbf0-c223-43fc-b2ec-2f41a39bc52e
+                </li>
+                <li class="text-sm">This is item 2377627b-e939-4ff4-92d9-268a5728aa9a</li>
+                <li class="-mt-px divide-gray-200 flex divide-x">
+                  This is item b5e67a67-b613-4325-836c-313e4fb18596
+                </li>
+              </ul>
+            </li>
+            <li
+              class="border-gray-300 focus:ring-indigo-500 block w-full focus:border-indigo-500 sm:text-sm rounded-md pl-16"
+            >
+              <img
+                class="flex-grow flex flex-col"
+                alt="Profile picture of user a8a5d85d-0747-4748-88a8-6bceb4c9921d"
+                src="https://example.org/pictures/f8b9fe96-39e3-4625-903b-97d157a843ab"
+              />
+              <img
+                class="px-8 mx-auto max-w-7xl"
+                alt="Profile picture of user 5d72903c-0db6-4bad-932f-128cbd5277fd"
+                src="https://example.org/pictures/6ec282c5-f4a2-46d0-a5ef-a2959cea1a83"
+              />
+              <a href="#" class="mt-1"> This is link e74fa8c5-cfb3-474e-a8dd-f6ea92ba02e1 </a>
+              <ul
+                class="-ml-14 -mt-2.5 text-xs pr-2 text-right text-gray-400 left-0 sticky w-14 z-20 leading-5"
+              >
+                <li class="mt-1 grid-cols-1 gap-4 sm:grid-cols-2 grid">
+                  This is item 92bee578-266c-4fd1-95ca-3fb1c0dc8f96
+                </li>
+                <li
+                  class="hover:bg-gray-900 text-white block w-full rounded-md border border-gray-800 text-center text-sm font-semibold bg-gray-800 mt-6 py-2"
+                >
+                  This is item c2fdb768-6e36-4f1e-8f59-627995fb245a
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <ol class="inset-0 absolute">
+            <li class="sm:col-span-3">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="font-medium focus:ring-2 hover:text-purple-500 bg-white text-purple-600 focus:ring-offset-2 rounded-md focus:ring-purple-500 focus:outline-none"
+              >
+                This is link 273f105e-23da-4069-8eed-12fe8fbeb537
+              </a>
+              <ul class="pointer-events-none absolute right-0 flex items-center inset-y-0">
+                <li class="text-gray-900 hover:bg-gray-100 hover:text-gray-900 bg-gray-100">
+                  This is item 579efe57-079f-49e5-a44f-144968a78914
+                </li>
+                <li class="font-medium text-gray-900 text-sm">
+                  This is item fe44a9e8-30f3-4e0a-86e6-d6e2b8a61cd9
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="sm:px-6 inset-0 py-6 lg:px-8 absolute px-4">
+                This is link a70668bd-3cfa-45a6-9d8c-57e8ed161561
+              </a>
+            </li>
+            <li class="text-gray-500">
+              <ol class="text-sm text-gray-900 font-medium">
+                <li class="lg:hidden">This is item d771a7ec-cd2e-4fe3-b60d-4e113e0082b6</li>
+                <li class="p-4">This is item 125a4cb2-3d9e-4387-a7de-24f5e1bd3026</li>
+                <li class="block">This is item 006076fe-68d2-482a-9c81-26935b7683fd</li>
+                <li class="h-full inset-0 w-full absolute">
+                  This is item 927e812f-3048-40e5-9c4d-597ce09bf3a7
+                </li>
+                <li class="space-y-2">This is item ece42509-e0a1-4db6-a3a9-581ea1993f4c</li>
+              </ol>
+              <ul class="ml-2">
+                <li
+                  class="focus:ring-offset-2 text-base focus:ring-2 rounded-md py-3 text-white focus:ring-indigo-500 inline-flex bg-indigo-600 items-center font-medium border hover:bg-indigo-700 px-6 focus:outline-none border-transparent shadow-sm"
+                >
+                  This is item 14293408-6796-43dd-8bf4-859fab77695c
+                </li>
+                <li
+                  class="block lg:text-base text-base font-semibold xl:text-lg text-gray-500 sm:text-lg"
+                >
+                  This is item bf792ad7-a821-468b-95db-a2261454f362
+                </li>
+                <li class="py-10 text-center border-gray-100 border-t">
+                  This is item 33376620-ea83-4f93-aa47-9f1614950a2d
+                </li>
+                <li class="mx-auto h-6 w-6 text-gray-400">
+                  This is item 02b83ba1-b152-4352-9dc5-f9cfacb3610f
+                </li>
+                <li class="flex mt-3 items-center">
+                  This is item c1aa3a5e-0b9d-4fb8-a574-183354aa9ab7
+                </li>
+              </ul>
+              <ol class="inset-0 z-10 absolute">
+                <li class="xl:grid pb-8 xl:grid-cols-5 xl:gap-8">
+                  This is item 7245ed93-bd60-430c-ab3e-c1128b583b29
+                </li>
+                <li class="bg-gray-50">This is item c47c5a00-802a-4cf4-b4fa-7db4da305326</li>
+                <li
+                  class="inline-flex hover:text-gray-500 justify-center focus:ring-2 focus:outline-none rounded-md hover:bg-gray-100 focus:ring-indigo-500 focus:ring-inset p-2 text-gray-400 items-center"
+                >
+                  This is item 4fc1c6f7-d594-4e2f-bd5d-ab918b5d6f5b
+                </li>
+                <li
+                  class="sm:grid-cols-2 grid gap-y-10 gap-x-6 lg:grid-cols-3 grid-cols-1 xl:gap-x-8"
+                >
+                  This is item 285026ce-ff0a-4c71-881b-718dcc596fce
+                </li>
+              </ol>
+            </li>
+            <li class="w-5 h-5 text-gray-400 flex-shrink-0">
+              <ul class="tracking-tight sm:text-4xl font-bold mt-2 text-3xl text-gray-900">
+                <li class="mt-1">This is item debd3c5c-020c-403b-aa81-6b46331f8c59</li>
+                <li class="divide-y flex divide-gray-200 flex-col">
+                  This is item c0d605fc-2eb4-4fb2-859d-3505e0f35ae3
+                </li>
+              </ul>
+              <a href="#" target="_blank" rel="noreferrer" class="sm:px-6 lg:px-8 px-4">
+                This is link 434dfad3-44f0-434b-bfdc-cba93e97a7e7
+              </a>
+              <ul class="text-gray-600">
+                <li class="w-6 h-6">This is item 35db3caf-bf9f-492a-be14-d8479fc6806f</li>
+                <li class="flex flex-col flex-1 md:pl-64">
+                  This is item c4693afd-e170-413d-8b68-a5cf55498d24
+                </li>
+                <li class="rounded-full h-7 items-center w-7 justify-center flex mx-auto">
+                  This is item 8266831d-aa5b-4962-8c02-6045532cbde7
+                </li>
+                <li
+                  class="rounded-md px-3 py-2 hover:bg-gray-50 block font-medium text-gray-700 text-base hover:text-gray-900"
+                >
+                  This is item 172487dd-cc1c-487e-b8cc-a6eab8e06cb4
+                </li>
+              </ul>
+            </li>
+            <li class="font-medium text-gray-900 text-base">
+              <img
+                class="text-gray-900 font-medium text-lg"
+                alt="Profile picture of user ef825843-3de2-4d21-83dc-052ee13f6f87"
+                src="https://example.org/pictures/e3169bbc-4312-4aa5-8db3-c1a993b155fa"
+              />
+              <a
+                href="#"
+                target="_blank"
+                class="group bg-pink-50 hover:bg-pink-100 text-xs inset-1 p-2 absolute flex-col flex overflow-y-auto leading-5 rounded-lg"
+              >
+                This is link 5d4793c2-80ab-476e-9ede-a23a27a9d2f1
+              </a>
+            </li>
+            <li class="flex-1 text-gray-900 font-bold text-2xl">
+              <ol class="sr-only">
+                <li class="py-2">This is item cb66331c-574f-4760-9136-e76c2d7232cc</li>
+                <li class="space-y-10">This is item d303e596-86b7-4fb5-8b44-aa468e824f48</li>
+                <li class="items-center flex flex-1">
+                  This is item 0cb06971-975e-4f4c-8cc5-5d4baa8b2125
+                </li>
+                <li class="w-6 h-6">This is item b5d1e090-5f2e-4cda-9b9e-70087df41771</li>
+                <li class="mt-2 text-base text-gray-500">
+                  This is item 38c77f51-521b-4a42-9c6a-c91c34a65dcb
+                </li>
+              </ol>
+              <a href="#" target="_blank" rel="noreferrer" class="flex-1 flex">
+                This is link 5362cfb7-32a4-4cb6-90dd-a4cbe5c265b6
+              </a>
+              <ul class="relative">
+                <li class="flex">This is item 5c890115-3491-437f-a12f-71b3446be07e</li>
+                <li class="lg:grid-cols-3 gap-16 grid-cols-1 lg:grid grid">
+                  This is item 54b899cf-b046-4756-90e6-80029f895d19
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="mt-6 space-y-6">
+          <ul class="text-gray-900 font-medium">
+            <li
+              class="text-cyan-800 text-sm px-3 rounded-full font-medium items-center inline-flex bg-cyan-100 py-0.5"
+            >
+              <img
+                class="shadow-2xl ring-opacity-5 divide-y transition-all max-w-xl mx-auto divide-gray-100 transform bg-white ring-1 overflow-hidden rounded-xl ring-black"
+                alt="Profile picture of user 670f7cde-403b-4d6a-a82b-dffa9782d034"
+                src="https://example.org/pictures/cb1babda-d4a4-49d9-9fe3-34f0d9b4240c"
+              />
+              <ol class="h-6 w-6">
+                <li class="h-6 w-6">This is item 42bc83b8-0df6-4ddd-b684-1a1f495b558a</li>
+                <li class="max-w-7xl px-4 lg:px-8 mx-auto sm:px-6">
+                  This is item 908df639-fa67-4b1c-a63a-e781201cdd57
+                </li>
+              </ol>
+            </li>
+            <li class="shadow-xl h-full divide-y divide-gray-200 bg-white flex-col flex">
+              <img
+                class="mt-8"
+                alt="Profile picture of user bbaf8939-dbd0-4573-9d37-1443fd485f33"
+                src="https://example.org/pictures/5e61594c-e841-4924-84c6-9acedfe901b5"
+              />
+            </li>
+          </ul>
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="font-bold text-4xl text-indigo-600 tracking-tight sm:text-5xl"
+          >
+            This is link f0ce1d12-eb71-4d60-b0df-20ade513490c
+          </a>
+          <a href="#" class="lg:mx-auto lg:px-8 sm:py-24 py-16 lg:max-w-7xl">
+            This is link 5fcac56e-4cf1-4380-a1ad-2c63c9d29656
+          </a>
+        </li>
+      </ol>
+    </li>
+    <li
+      class="bg-indigo-900 lg:bg-transparent lg:row-start-1 lg:w-full lg:pt-0 lg:pb-24 md:px-10 lg:col-start-2 lg:max-w-lg lg:mx-auto text-indigo-300 lg:px-0 py-12"
+    >
+      <img
+        class="flex space-x-8 -mb-px px-4"
+        alt="Profile picture of user 4d5bae14-8137-4fb7-bd66-ac6707261f9c"
+        src="https://example.org/pictures/65552cba-0334-46d3-9ba7-64d43e2800d8"
+      />
+      <ul class="flex space-x-8">
+        <li class="text-gray-900 font-medium text-base">
+          <ol class="flow-root mt-4">
+            <li class="px-6 text-center sm:px-14 py-14">
+              <a
+                href="#"
+                target="_blank"
+                class="flex sm:items-end w-full items-center space-y-4 flex-col"
+              >
+                This is link 1aa92c57-6ece-40fc-9075-c3dd7dccf35f
+              </a>
+              <a href="#" rel="noreferrer" class="sr-only">
+                This is link 3adb4e0a-a215-4e20-a2a3-6b4b0be58ac2
+              </a>
+              <img
+                class="z-40 fixed inset-0 flex"
+                alt="Profile picture of user 2fc3f4ae-a0f5-472a-9d07-492e8003c3fe"
+                src="https://example.org/pictures/b8787c8a-3f47-47d9-8c2b-72bb0d0d79b2"
+              />
+            </li>
+            <li class="hover:bg-gray-100 bg-white focus:z-10 py-1.5">
+              <ol class="w-auto sm:h-10 h-8">
+                <li class="md:aspect-w-2 md:aspect-h-1 aspect-w-5 aspect-h-3 -mt-6">
+                  This is item 4c71d9ed-3228-4721-ad51-06277033eb46
+                </li>
+                <li class="text-gray-400 hover:bg-gray-100 py-1.5 bg-gray-50 focus:z-10">
+                  This is item da0116b5-4d5c-4dbd-8930-f7de0aee9b4f
+                </li>
+                <li class="text-gray-900 text-3xl tracking-tight font-bold">
+                  This is item 737baf7a-661a-4050-8baa-c63759fb5295
+                </li>
+                <li
+                  class="font-semibold text-sm hidden text-indigo-600 hover:text-indigo-500 sm:block"
+                >
+                  This is item 982a882d-0a6a-4be8-9c49-79a55c50cd06
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                class="border-transparent border font-medium py-2 rounded-md text-sm inline-flex bg-indigo-600 text-white focus:ring-2 hover:bg-indigo-700 focus:ring-offset-2 sm:w-auto justify-center focus:outline-none focus:ring-indigo-500 px-4 items-center shadow-sm"
+              >
+                This is link c2e3fc57-8baf-4a95-88ad-020e3c2a87f3
+              </a>
+              <a href="#" class="flex items-center space-x-2">
+                This is link 40a1d32c-13ad-4c4b-bfb7-03ebe264496f
+              </a>
+            </li>
+            <li class="truncate">
+              <img
+                class="group"
+                alt="Profile picture of user 1b36ee1d-1a6e-4c23-bd00-2493961b2e18"
+                src="https://example.org/pictures/d6b9c11d-c78b-4725-a83b-85c7304136ed"
+              />
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="md:grid-cols-12 grid-cols-1 md:auto-rows-min md:gap-x-8 grid md:grid-flow-col md:gap-y-16"
+              >
+                This is link 4938c511-66f2-4511-b2ae-3c6547af28eb
+              </a>
+              <img
+                class="bg-gray-100 py-8"
+                alt="Profile picture of user 3f1ffb8e-91d6-466a-8a65-f7f2562dd21e"
+                src="https://example.org/pictures/e284ac08-6ba9-4b77-9681-b43e1ef20e16"
+              />
+              <a href="#" rel="noreferrer" class="bg-white">
+                This is link 23534fb7-705e-4a7e-8428-b608f5fc4be1
+              </a>
+            </li>
+          </ol>
+          <ol class="font-medium text-xs group-hover:text-gray-200 text-gray-300">
+            <li class="bg-white">
+              <ul
+                class="py-1.5 bg-gray-50 focus:z-10 text-gray-400 rounded-bl-lg hover:bg-gray-100"
+              >
+                <li class="h-6 w-6">This is item 26bb084a-1f21-4841-830e-f7df1c7e3208</li>
+                <li class="py-4 flex">This is item bd55b788-2a31-45b4-85bf-81fca3510bb4</li>
+                <li class="pr-8 py-6">This is item ccf3fc07-bafa-4fd1-8cf4-7d7739372661</li>
+              </ul>
+            </li>
+            <li
+              class="bg-white ring-1 divide-gray-100 ring-opacity-5 transform rounded-xl overflow-hidden max-w-xl mx-auto shadow-2xl transition-all ring-black divide-y"
+            >
+              <ul class="relative px-6 sm:w-16 sm:px-8 w-12">
+                <li class="gap-10 grid sm:grid-cols-2 mt-10 grid-cols-1 lg:grid-cols-4">
+                  This is item 8452aea4-45c0-434f-a10f-02fc5f73548f
+                </li>
+                <li
+                  class="hover:text-purple-500 bg-white focus:ring-purple-500 focus:outline-none rounded-md focus:ring-2 focus:ring-offset-2 text-purple-600 font-medium"
+                >
+                  This is item 0cdd5942-ea05-46a8-b917-096be0c76012
+                </li>
+                <li class="mt-5 md:col-span-2 space-y-6 md:mt-0">
+                  This is item 249bcdc8-5ee3-40bd-b302-c8cb7efc8160
+                </li>
+              </ul>
+            </li>
+            <li class="sr-only">
+              <a href="#" class="bg-white md:px-6 py-6 lg:px-8 px-4">
+                This is link a206d37c-59be-49e3-8983-e2dd16d27ade
+              </a>
+            </li>
+            <li class="sm:max-w-2xl px-4 lg:px-0 mx-auto lg:max-w-none sm:px-6 max-w-md">
+              <ul class="md:grid-cols-2 gap-x-14 relative grid-cols-1 grid">
+                <li class="group flex">This is item db9722dd-13fa-4c7f-bd71-1fb4985b36de</li>
+                <li class="flex text-sm font-medium py-4 px-6 items-center">
+                  This is item dced7782-5584-446e-a85b-a5d2984cc75f
+                </li>
+              </ul>
+              <ul class="text-gray-900 font-bold tracking-tight mt-2 sm:text-4xl text-3xl">
+                <li
+                  class="w-full justify-between py-3 text-gray-400 flex bg-white text-sm px-2 items-center"
+                >
+                  This is item ceb8d458-e94e-4c6c-b00d-f4f52b04d1d8
+                </li>
+                <li class="text-sm">This is item fae93bca-09ae-42a7-80cd-f99a7f3d3bce</li>
+                <li
+                  class="grid mt-11 gap-x-6 lg:grid-cols-4 gap-y-16 grid-cols-1 sm:mt-16 sm:grid-cols-2 items-start lg:gap-x-8"
+                >
+                  This is item 3e32bb80-4e41-46f8-a7cb-19d494229947
+                </li>
+                <li class="text-gray-900 font-medium text-sm">
+                  This is item 3de0bae7-a61b-42ab-a58e-453d3d04d409
+                </li>
+                <li
+                  class="block border shadow-sm placeholder-gray-500 focus:ring-indigo-500 px-5 focus:border-indigo-500 rounded-md text-gray-900 w-full py-3 border-gray-300 text-base"
+                >
+                  This is item a3b5eeea-ed5b-4010-a6b7-9a044901e8d6
+                </li>
+              </ul>
+              <a href="#" class="flow-root"> This is link 4bced6ac-3c36-4489-afd5-b0b0b8d9ae83 </a>
+            </li>
+          </ol>
+          <ol class="text-gray-900">
+            <li class="text-base">
+              <ul class="mt-6 text-base">
+                <li class="text-gray-900 mt-1 font-semibold">
+                  This is item c1bc5db9-e2f9-4cb3-b4c6-f4e53818189c
+                </li>
+                <li class="bg-white">This is item be16b145-ea4f-49ee-b10e-33d4d76e6848</li>
+                <li class="bg-white">This is item 62dec902-9690-4739-9b48-28c74c703fe6</li>
+                <li class="bg-white">This is item 67d9e660-9283-4a9a-a7a0-fd2d343687fa</li>
+              </ul>
+              <ul class="flex mt-1 space-x-4">
+                <li
+                  class="relative w-56 rounded-lg p-6 xl:w-auto flex-col overflow-hidden hover:opacity-75 flex h-80"
+                >
+                  This is item ad2319fa-c91a-4ac2-a138-e79280d9b3c1
+                </li>
+                <li class="lg:flex-1 overflow-hidden relative">
+                  This is item 6a38ac33-5643-4322-abf7-1f5610e9feba
+                </li>
+              </ul>
+              <img
+                class="font-bold text-3xl text-gray-900 tracking-tight"
+                alt="Profile picture of user 74a1c52e-055b-46fc-9efa-700aa88b489b"
+                src="https://example.org/pictures/9a100aa5-057f-48d4-94b7-099b9e88b50f"
+              />
+              <ul class="flow-root">
+                <li class="flex-shrink-0 ml-4">
+                  This is item c32ebc0a-42a0-4c5d-80c9-fc9e4e4e4a22
+                </li>
+                <li class="sm:justify-end sm:col-span-2 sm:flex">
+                  This is item f215a99d-8124-4ce1-91ec-b0fcea021b6e
+                </li>
+              </ul>
+            </li>
+            <li class="text-sm text-gray-700 block">
+              <ol class="aspect-h-2 aspect-w-3">
+                <li
+                  class="z-10 -mb-px font-medium ease-out border-b-2 relative flex text-sm pt-px transition-colors items-center duration-200"
+                >
+                  This is item c7fb594e-b8e2-44cc-bdf9-a4e4e792dd8d
+                </li>
+                <li class="select-none py-2 px-4 cursor-default">
+                  This is item b951d767-4392-4cf7-bd35-ef8cab311e06
+                </li>
+                <li
+                  class="md:col-span-2 lg:col-span-1 col-span-2 md:col-start-4 justify-center flex"
+                >
+                  This is item 703aef20-90c2-4526-8da5-73cf4963ee73
+                </li>
+                <li class="ring-8 items-center ring-white justify-center flex">
+                  This is item d5b61145-0da8-4a0a-b5bf-94f625df79b0
+                </li>
+              </ol>
+              <img
+                class="max-w-lg mx-auto"
+                alt="Profile picture of user 75f0816c-7b7a-4948-b28e-c45761f1f973"
+                src="https://example.org/pictures/03889b6a-20ff-4957-804d-70dd0751e812"
+              />
+            </li>
+            <li
+              class="focus:ring-indigo-500 px-4 text-white text-sm focus:ring-2 focus:ring-offset-2 bg-indigo-600 shadow-sm border-transparent rounded-md hover:bg-indigo-700 py-2 focus:outline-none ml-6 font-medium border"
+            >
+              <a
+                href="#"
+                target="_blank"
+                class="max-w-sm bg-white ring-black ring-opacity-5 w-full pointer-events-auto shadow-lg rounded-lg ring-1 overflow-hidden"
+              >
+                This is link 7d97b0a6-3c4c-4649-a36a-2c6110d0a751
+              </a>
+              <ol class="h-10 rounded-full w-10 inline-block">
+                <li class="text-sm text-gray-500">
+                  This is item fb50b380-1ee5-4537-aa22-3e7e850e9bf7
+                </li>
+                <li class="bg-white pb-16">This is item 66f3c613-631a-495e-a52e-a34e17f5c739</li>
+                <li class="bg-opacity-25 fixed transition-opacity inset-0 bg-gray-500">
+                  This is item 3dfd20c0-7a6f-4769-bfce-ad9f6624491f
+                </li>
+              </ol>
+              <ul
+                class="rounded-full border-gray-300 border items-center py-0.5 relative inline-flex px-3"
+              >
+                <li class="sr-only">This is item f625dc23-e54d-4de9-8a14-dee04565e3b1</li>
+                <li class="px-4 lg:px-8 sm:px-6 mx-auto max-w-7xl">
+                  This is item 17a8bc3d-e51f-4e90-9be3-f5f1e5b32a7b
+                </li>
+                <li class="text-sm text-indigo-600 truncate font-medium">
+                  This is item 52002c80-99d1-4673-9caf-2d9c5880d267
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="w-6 h-6">
+          <ol class="flex items-center">
+            <li class="items-center font-medium text-sm flex text-gray-700 hover:text-gray-800">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="bg-gray-800 overflow-hidden relative"
+              >
+                This is link 58152948-90e7-48ec-96e1-6b05f3d23313
+              </a>
+            </li>
+            <li class="bg-white">
+              <a href="#" rel="noreferrer" class="font-medium text-white text-base">
+                This is link a84cdc58-37a2-42a4-bae5-5f6e9ca4a3f4
+              </a>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="divide-y border-b border-gray-200 divide-gray-200"
+              >
+                This is link 80326973-81b5-4462-8d8d-e3afe004d74e
+              </a>
+            </li>
+          </ol>
+        </li>
+        <li class="text-sm block font-medium text-gray-700">
+          <img
+            class="sm:hidden"
+            alt="Profile picture of user 9cbef80d-c81d-4ee4-8a75-d198ded7cdd1"
+            src="https://example.org/pictures/7308e4a6-35c9-411c-a2d4-e318c9fa4ee4"
+          />
+          <ol
+            class="sm:grid-cols-3 md:col-span-8 md:col-start-3 md:row-start-1 lg:col-start-2 md:mt-0 col-span-6 lg:col-span-6 grid-cols-2 mt-10 gap-8 grid"
+          >
+            <li class="flex">
+              <ul class="sr-only">
+                <li class="text-sm block text-gray-700 font-medium">
+                  This is item e2dda6d2-57ae-4c94-b701-11ffb7127aef
+                </li>
+                <li class="mt-6 space-y-6">This is item 3a6ddd31-e46d-49d9-95ef-080e44ebccec</li>
+                <li class="h-6 w-6">This is item 4401f3c6-2efc-4eed-bfbe-fbb4bb6feb8a</li>
+                <li
+                  class="group border-transparent focus-within:ring-white rounded-md focus-within:ring-2 -ml-2 relative bg-gray-900"
+                >
+                  This is item ada777b0-9f9f-4e8a-87f2-b4d31ca848f2
+                </li>
+                <li class="text-base font-medium text-indigo-300 hover:text-white">
+                  This is item 742f1d4b-b89f-4a98-b46a-8fe581073318
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="sr-only">
+                This is link 7d29e76d-c66e-4ec2-8429-1d9533ddbe01
+              </a>
+            </li>
+            <li
+              class="text-sky-200 text-base py-2 hover:bg-sky-800 hover:text-white block rounded-md px-3 font-medium"
+            >
+              <a href="#" class="border-transparent">
+                This is link 6f0d56bb-d41d-444d-9a8b-cdadc1a00f97
+              </a>
+              <a href="#" target="_blank" class="px-4 py-2 text-sm block text-gray-700">
+                This is link e943dd0f-ec70-4cca-98aa-a26075ebffd4
+              </a>
+              <a href="#" rel="noreferrer" class="mt-6 space-y-6">
+                This is link 442d3f24-2ea6-4c7c-9487-b0d65aa57bee
+              </a>
+            </li>
+            <li class="space-x-3 flex">
+              <a href="#" rel="noreferrer" class="mt-1 text-gray-500">
+                This is link 68d135e2-211c-4fee-b328-eca96d8b781a
+              </a>
+            </li>
+            <li class="sr-only">
+              <img
+                class="text-base hover:bg-gray-50 block font-medium py-2 text-gray-900 px-3 rounded-md"
+                alt="Profile picture of user 31a88661-31df-458b-9d5c-81038c9d6330"
+                src="https://example.org/pictures/a0373616-1a6c-4cd6-9e75-1b0fe4a58c2e"
+              />
+              <a
+                href="#"
+                rel="noreferrer"
+                class="shadow sm:grid-cols-2 rounded-lg bg-gray-200 divide-gray-200 sm:divide-y-0 sm:grid sm:gap-px divide-y overflow-hidden"
+              >
+                This is link 83caf83d-8f36-4757-b6ca-f1ae89ebc283
+              </a>
+            </li>
+            <li class="hidden lg:block">
+              <ol class="flex-shrink-0">
+                <li class="mt-1">This is item 19e5cc12-0997-4129-aeff-2ce182328c14</li>
+                <li class="sr-only">This is item b5685a73-b9ce-44b4-ae27-7810fef4391b</li>
+                <li
+                  class="rounded-md focus:ring-2 focus:outline-none focus:ring-inset justify-center focus:ring-pink-600 inline-flex -mr-3 h-12 hover:text-gray-900 text-gray-500 w-12 items-center"
+                >
+                  This is item 3cd701d6-3a20-4e9f-803b-222dd0b5a41a
+                </li>
+                <li class="sm:text-4xl text-3xl tracking-tight text-gray-900 font-bold">
+                  This is item 35d88335-f405-4a08-bf8f-5bcc95fb6f72
+                </li>
+                <li class="md:hidden relative z-20">
+                  This is item 43ff42f4-c18f-4538-be67-f6a042aafcc5
+                </li>
+              </ol>
+              <a
+                href="#"
+                class="flex focus:ring-white focus:ring-2 focus:ring-offset-2 bg-indigo-600 focus:outline-none text-sm focus:ring-offset-indigo-600 text-white rounded-full"
+              >
+                This is link decbc356-4dc3-444f-b4a9-d0aadb22b6aa
+              </a>
+            </li>
+          </ol>
+          <a href="#" target="_blank" rel="noreferrer" class="inset-0 absolute">
+            This is link b67143ef-7f93-4a3c-a766-1743747f5485
+          </a>
+        </li>
+        <li class="font-medium block text-gray-900 p-2 -m-2">
+          <ol class="md:pt-0 text-gray-900 pt-4 md:block justify-between font-medium flex">
+            <li class="mt-1 rounded-md flex shadow-sm">
+              <ol class="sm:px-6 bg-indigo-700 px-4 py-6">
+                <li class="bg-white hover:bg-gray-100 py-1.5 relative text-gray-900 focus:z-10">
+                  This is item 09a80ad2-e839-401d-ac45-63aded6f892c
+                </li>
+                <li class="flex-shrink-0">This is item b3705a26-8ab2-4748-8016-13fd3cf95606</li>
+                <li class="items-center flex text-sm font-medium px-6 py-4">
+                  This is item 2c082440-e52d-43ea-bdd7-d6c752207f38
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="md:flex md:items-center hidden md:ml-4"
+              >
+                This is link 9e1949d7-b6a6-4258-be8a-1d7a0d5d2e59
+              </a>
+            </li>
+            <li class="relative flex items-start">
+              <a
+                href="#"
+                rel="noreferrer"
+                class="absolute focus:outline-none right-0 mt-2 w-56 bg-white shadow-lg ring-1 origin-top-right ring-black rounded-md z-10 ring-opacity-5"
+              >
+                This is link 10218dcc-0007-47e9-8f90-e316d81aa2ed
+              </a>
+              <a href="#" target="_blank" class="font-medium">
+                This is link 17be3f1b-71eb-4013-a563-75694a76b648
+              </a>
+              <img
+                class="text-gray-900"
+                alt="Profile picture of user 1a2c40cf-994a-4b51-ba92-972348c26855"
+                src="https://example.org/pictures/ac1e7572-17f8-4e0f-8c8f-afc0e1f26756"
+              />
+              <ul class="h-12 rounded-md w-12">
+                <li class="hover:text-gray-800">
+                  This is item c50420bf-144a-4930-9c53-0e45458a763a
+                </li>
+                <li class="text-sm">This is item a8a60971-007e-468d-815e-c0ed3fd4036b</li>
+                <li class="sm:mt-px text-gray-900 block font-medium text-sm sm:pt-2">
+                  This is item 211f3116-f325-4618-8cb7-99228b2b8fb9
+                </li>
+                <li class="py-1">This is item 088d3537-614e-495e-abb1-f9ae6438ba6a</li>
+              </ul>
+            </li>
+            <li
+              class="aspect-h-1 overflow-hidden group-hover:opacity-75 aspect-w-1 w-full rounded-lg bg-gray-100"
+            >
+              <img
+                class="h-14 text-white flex-col hover:bg-gray-100 flex py-2 focus:z-10 bg-white font-semibold px-3"
+                alt="Profile picture of user 8eaf08e5-3e2d-41c6-b244-2ed8a2ff5d84"
+                src="https://example.org/pictures/6c6004a8-84ba-4aa4-b1ca-8069e8eac1d2"
+              />
+              <ol
+                class="rounded-lg border flex bg-white relative border-gray-200 group overflow-hidden flex-col"
+              >
+                <li class="w-7 rounded-full items-center justify-center mx-auto flex h-7">
+                  This is item abd6f999-8d83-4e62-b681-a263265d8fc4
+                </li>
+                <li class="text-sm font-medium text-gray-900">
+                  This is item 470832c4-9711-4ad5-bdc6-398ae955e5eb
+                </li>
+                <li
+                  class="hover:bg-gray-200 rounded-full items-center text-gray-900 w-8 flex mx-auto justify-center h-8"
+                >
+                  This is item f88b84ca-be4b-4531-b7bd-8d03ec668e19
+                </li>
+                <li class="py-1.5 focus:z-10 hover:bg-gray-100 bg-white">
+                  This is item 5e5d9b59-28fa-4728-9586-d3468b34cc53
+                </li>
+                <li class="sm:w-32 rounded-full ring-white w-24 sm:h-32 h-24 ring-4">
+                  This is item edabd2f6-e9e5-4bc0-b25c-983b5bcef958
+                </li>
+              </ol>
+            </li>
+          </ol>
+          <ol
+            class="text-gray-900 text-sm gap-px shadow ring-1 grid-cols-7 mt-2 ring-gray-200 rounded-lg grid bg-gray-200"
+          >
+            <li class="h-5 flex items-center">
+              <ol class="text-gray-700 hover:text-gray-800 flex items-center font-medium text-sm">
+                <li
+                  class="transform mt-3 left-1/2 max-w-md -translate-x-1/2 absolute sm:px-0 z-10 px-2 w-screen"
+                >
+                  This is item 9a24fbe1-3b27-4fc8-ae3d-80451854ffce
+                </li>
+                <li class="sr-only">This is item 285b433c-0181-44e3-b395-88256c617ba9</li>
+                <li class="sr-only">This is item cded11c6-05a8-4d0c-beb9-ecafd931da0d</li>
+                <li class="mx-auto max-w-7xl sm:px-6 lg:px-8 px-4 py-12">
+                  This is item 49fe1aeb-b17a-4176-aa8b-38dc4063b85f
+                </li>
+                <li class="flex h-7 items-center rounded-full w-7 justify-center mx-auto">
+                  This is item e7302180-50ad-491a-94e0-37d019a7b64b
+                </li>
+              </ol>
+              <ol class="font-medium hover:text-indigo-500 text-sm text-indigo-600">
+                <li class="text-base text-warm-gray-400 hover:text-warm-gray-300">
+                  This is item b0bf90e5-c44a-40f6-95ef-a411d3eb346f
+                </li>
+                <li class="pl-3 text-sm flex py-3 items-center pr-4 justify-between">
+                  This is item 82c1bc29-2961-483d-8283-63c7bbaae235
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="focus:border-indigo-500 border-gray-300 focus:ring-indigo-500 rounded-md w-full sm:text-sm shadow-sm block"
+              >
+                This is link f43815dc-3e93-4760-b8b2-cf17f38a5f3f
+              </a>
+              <ol class="ml-3">
+                <li class="sr-only">This is item 91c4fa1d-95d4-4ade-82cf-9574f230e92a</li>
+                <li class="mr-1.5 w-5 text-gray-400 h-5">
+                  This is item 2a627abe-763b-46a2-bcd1-7ca7603098fc
+                </li>
+              </ol>
+            </li>
+            <li class="inset-0 shadow bg-white top-1/2 absolute">
+              <ol
+                class="sm:inline-block bg-white block text-blue-700 font-medium text-center border-transparent hover:bg-blue-gray-50 text-base rounded-md px-5 shadow-md py-3 border sm:w-auto w-full"
+              >
+                <li
+                  class="text-sm hidden sm:table-cell text-right text-gray-900 px-3 py-3.5 font-semibold"
+                >
+                  This is item bd595f9e-4b9c-42b6-8e15-03fca4ff31bf
+                </li>
+                <li class="flex justify-between">
+                  This is item 3d23a966-ef2f-4eff-b73e-cd2b0d3cfa79
+                </li>
+                <li class="text-white text-base font-medium flex-none">
+                  This is item 7ef7e3d2-f1c1-4126-b787-42c12151176f
+                </li>
+                <li class="divide-y border-gray-200 border-b divide-gray-200 border-t">
+                  This is item 4b4edd60-33c3-4642-b88a-251a9912d090
+                </li>
+              </ol>
+              <img
+                class="lg:pt-16 sm:px-6 lg:grid-rows-[auto,auto,1fr] px-4 lg:gap-x-8 max-w-2xl pt-10 lg:max-w-7xl mx-auto lg:px-8 lg:grid lg:grid-cols-3"
+                alt="Profile picture of user 4b03ca05-ce79-41ae-9999-5bd781247c42"
+                src="https://example.org/pictures/77afee96-30f4-4ead-a271-5a1a1c7bef14"
+              />
+            </li>
+            <li class="font-medium text-gray-900">
+              <ul class="h-12">
+                <li class="mt-8">This is item 9e341230-4582-437f-9cce-0adb06ecb936</li>
+                <li class="flex items-center">This is item 99708a4a-3c20-4175-b6b8-af2c8cdae427</li>
+              </ul>
+              <a href="#" rel="noreferrer" class="relative flex flex-col min-h-screen">
+                This is link 465bfc1f-f82d-4c40-81d2-ec9a7c96b26d
+              </a>
+              <img
+                class="text-sm pr-6 text-left font-medium pl-6 pb-4 text-gray-900"
+                alt="Profile picture of user 0b03589b-d988-4411-8a1c-df700c18f24d"
+                src="https://example.org/pictures/ddfe5e8e-ca4a-4e25-b558-9c12d58fea60"
+              />
+            </li>
+            <li class="sr-only">
+              <ul
+                class="group md:border-t-4 md:pt-4 pl-4 flex-col flex hover:border-indigo-800 md:border-l-0 border-l-4 py-2 md:pl-0 md:pb-0 border-indigo-600"
+              >
+                <li
+                  class="bg-gradient-to-r px-4 hover:from-purple-700 w-full flex items-center shadow-sm text-base text-white to-indigo-600 border-transparent bg-origin-border rounded-md from-purple-600 hover:to-indigo-700 justify-center font-medium py-3 border"
+                >
+                  This is item d7307f63-757a-4d17-b3f0-21a7df5d00e3
+                </li>
+                <li class="flex">This is item 2721feec-e251-499c-aad0-7a276fa9cf69</li>
+              </ul>
+            </li>
+            <li class="mx-auto relative max-w-xl">
+              <img
+                class="text-sm sm:table-cell text-right hidden py-4 text-gray-500 px-3"
+                alt="Profile picture of user bcb6f02b-757d-4d47-a452-b7fd55a3476e"
+                src="https://example.org/pictures/f8526a0f-9703-487a-866c-a3ec072da3e6"
+              />
+              <a
+                href="#"
+                rel="noreferrer"
+                class="rounded text-indigo-600 w-4 border-gray-300 h-4 focus:ring-indigo-500"
+              >
+                This is link 5d7951b4-8742-49cb-80c8-d95ed2b529e5
+              </a>
+              <img
+                class="sm:px-6 sm:py-24 lg:py-32 px-4 lg:px-8 relative py-16"
+                alt="Profile picture of user 3b1eabe3-5306-4702-a69a-ba8c05bc1030"
+                src="https://example.org/pictures/f9e40061-1576-45f5-b911-a5bbb44f4814"
+              />
+              <img
+                class="font-medium text-gray-900"
+                alt="Profile picture of user 9bc66520-5591-4517-96d5-e55b7b4ace95"
+                src="https://example.org/pictures/a8bde251-0738-4dde-864e-4ac8c5479413"
+              />
+            </li>
+          </ol>
+          <ul class="text-center flex-none p-6">
+            <li class="bg-white focus:z-10 hover:bg-gray-100 py-1.5">
+              <ol class="mt-6">
+                <li class="flex justify-center relative">
+                  This is item c20f8d69-0ba1-4f3e-81bb-73c0fcda1d2b
+                </li>
+                <li class="font-medium text-base text-gray-900">
+                  This is item f21ecc30-6a36-4b54-8c89-5a97a0975530
+                </li>
+                <li class="bg-gray-100">This is item 41e24ed2-fbd2-4120-8134-7cde4a41ce3f</li>
+              </ol>
+              <ul class="rounded-md select-none cursor-default py-2 items-center px-3 group flex">
+                <li class="flex space-x-3">This is item a879bed7-69ab-42d5-90aa-ae6d91ec97f3</li>
+                <li class="px-4 py-12 max-w-7xl lg:px-8 mx-auto sm:px-6 lg:py-16">
+                  This is item 08c3e5fa-cfc0-4f2f-b782-2cbf7e71bfa3
+                </li>
+                <li
+                  class="px-4 max-w-7xl sm:px-6 flex justify-between items-center mx-auto h-10 lg:px-8"
+                >
+                  This is item 713dfdc0-decf-4171-949b-2fd06c5c7f90
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-600">
+              <a
+                href="#"
+                class="text-sm hover:border-gray-300 text-gray-500 pt-1 hover:text-gray-700 items-center font-medium border-b-2 border-transparent px-1 inline-flex"
+              >
+                This is link 6a48160b-d704-4813-9e10-07af5eabf458
+              </a>
+              <a href="#" rel="noreferrer" class="ml-3 block font-medium text-gray-900 text-base">
+                This is link a67bfa12-6022-4d7f-9901-c14b5f92e528
+              </a>
+              <ul class="divide-y divide-gray-200 border-gray-200 border-b mt-10 border-t">
+                <li class="rounded-full">This is item 41534f01-a0b9-4966-b9a1-b28555ba67fe</li>
+                <li class="hover:text-gray-500 -m-2 text-gray-400 p-2">
+                  This is item c9851fb2-7b2c-41c0-8967-6b0e0855143c
+                </li>
+              </ul>
+              <ol class="block px-4 text-sm py-2">
+                <li class="h-6 w-6">This is item 4cacaada-54f8-468c-898d-3257ec1825c2</li>
+                <li class="rounded-full w-7 mx-auto items-center h-7 justify-center flex">
+                  This is item 922d48e9-4693-44d2-9980-369e1a54ea61
+                </li>
+              </ol>
+            </li>
+            <li class="border-gray-200 border-b py-6">
+              <img
+                class="w-5 h-5"
+                alt="Profile picture of user 8a9ead07-a87a-4745-8f3c-d7f7c535a5d5"
+                src="https://example.org/pictures/fa8ddab7-ebe9-43d5-8559-092c50cfb25b"
+              />
+              <ol class="mx-auto max-w-xs w-full">
+                <li class="mt-6">This is item 61efe723-9ae4-4e23-b59d-6102d57c310c</li>
+                <li class="sr-only">This is item 1a70b572-0c8e-43d3-937c-0af292310677</li>
+                <li
+                  class="font-medium lg:pr-8 sm:pr-6 text-right relative pl-3 py-4 pr-4 whitespace-nowrap text-sm"
+                >
+                  This is item ac23c04b-a0df-4daa-bb42-5cdd37cc002a
+                </li>
+                <li
+                  class="p-2.5 inline-flex text-gray-700 items-center rounded-md justify-center -m-2.5"
+                >
+                  This is item a246ab46-e258-416e-b94e-3e2d4686e8dd
+                </li>
+              </ol>
+              <a href="#" class="border-gray-300 pl-4 border-l flex">
+                This is link a1ede39e-b189-448e-a433-1be16496a351
+              </a>
+            </li>
+          </ul>
+          <ul
+            class="hover:bg-gray-200 mx-auto flex rounded-full w-8 justify-center h-8 items-center text-gray-900"
+          >
+            <li
+              class="rounded-full ml-1 focus:ring-white h-10 flex focus:ring-2 items-center focus:outline-none w-10 focus:ring-inset justify-center"
+            >
+              <ol class="h-9">
+                <li
+                  class="focus:ring-offset-2 rounded-md inline-flex font-medium focus:ring-indigo-500 focus:ring-2 bg-white hover:text-gray-900 group items-center text-base focus:outline-none"
+                >
+                  This is item 3028f6cc-ac40-4e45-a061-a3d3afba51ee
+                </li>
+                <li class="text-sm text-gray-500 mt-1 max-w-2xl">
+                  This is item d7a5ae20-6501-41e0-9825-4cec8dfa9ffc
+                </li>
+                <li
+                  class="left-0 pr-2 text-gray-400 leading-5 z-20 -ml-14 -mt-2.5 text-right w-14 sticky text-xs"
+                >
+                  This is item cd6bb095-a061-49ea-9998-76c9a1d53df5
+                </li>
+                <li class="ml-3">This is item f3e18e7f-0f18-461a-a2ed-9212269633ff</li>
+                <li class="-m-2 items-center flex p-2">
+                  This is item 42aef5b2-189d-4759-9d01-8076bc7fe99c
+                </li>
+              </ol>
+              <ul class="text-lg text-gray-900 font-medium">
+                <li class="items-center flex">This is item e8614322-7471-4af5-b127-0e26404f30eb</li>
+                <li class="aspect-w-2 col-span-2">
+                  This is item f13004e2-1d28-4650-95b3-318328845763
+                </li>
+                <li class="mt-4 space-y-4">This is item fdf2a049-76be-4c1e-b074-5f5cb1e3766b</li>
+              </ul>
+              <ul class="mt-1">
+                <li class="flex-1 py-10">This is item d3cc47c3-bd93-4265-9524-40fbb23f503f</li>
+                <li class="bg-white">This is item d8322d4f-e37a-431c-9def-4088015bdea0</li>
+                <li class="sm:text-4xl tracking-tight text-3xl font-bold">
+                  This is item d981bb32-6688-4410-b571-328f4cfbe7aa
+                </li>
+                <li class="lg:h-full w-full h-56 lg:absolute object-cover">
+                  This is item 19a7cd16-cd63-4c07-86ae-3ae976aa7bf7
+                </li>
+              </ul>
+              <img
+                class="w-6 h-6"
+                alt="Profile picture of user 86912805-edd0-47c8-bd5e-0c6e974c9735"
+                src="https://example.org/pictures/48962cde-acb4-461d-8913-aedb05593e60"
+              />
+            </li>
+            <li class="space-x-4 flex">
+              <ol class="h-8 w-8">
+                <li class="block p-2 -m-2 font-medium text-gray-900">
+                  This is item 002c7eca-0d93-4026-9676-147afb1fb909
+                </li>
+                <li class="relative z-10">This is item b77b041e-c42e-414e-826f-146100a84258</li>
+              </ol>
+              <ul class="p-8 bg-white">
+                <li class="text-gray-400 text-base">
+                  This is item 283ad28c-8616-4039-8097-bba2dddcdc59
+                </li>
+                <li class="lg:hidden">This is item c313f548-9a45-49a9-bb0e-2a0f6366e348</li>
+                <li class="max-w-4xl mx-auto">This is item 1ac14e1c-e4d0-4824-879a-2779b3e1aa1c</li>
+                <li class="px-4 sm:px-6 lg:px-8 py-16 sm:py-24 relative lg:py-32">
+                  This is item 0219dfb3-daab-4894-b898-b9761bd09ce7
+                </li>
+                <li class="lg:mt-0 mt-5 lg:ml-4 flex">
+                  This is item 2886dec4-bbda-40bf-8981-06a9d2147b84
+                </li>
+              </ul>
+              <img
+                class="sm:flex-auto"
+                alt="Profile picture of user e742e332-59b3-4262-8904-079044b04dd4"
+                src="https://example.org/pictures/f20ed314-5ec6-4758-8e54-746783387f98"
+              />
+            </li>
+            <li class="text-sm font-medium text-gray-900">
+              <ul class="inset-0 bg-gray-900 absolute opacity-50">
+                <li class="-mr-2">This is item e7a2ec9e-6b2d-41c6-8698-7b8db8e9269b</li>
+                <li class="-ml-1 mr-2 w-5 h-5 text-gray-300">
+                  This is item e9110b77-b90a-4436-a963-a1ee04b2530a
+                </li>
+                <li class="w-5 h-5">This is item b85878a3-4635-409c-9770-ac5f8b348cef</li>
+                <li class="text-sm">This is item ac89a060-81b7-4780-a64d-8be5982aeae7</li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="hidden lg:inline">
+          <ol class="lg:hidden md:absolute md:inset-y-0 flex items-center md:right-0">
+            <li class="text-gray-900 text-sm font-medium">
+              <ul
+                class="bg-black p-8 w-full bg-opacity-40 flex flex-col justify-end items-start relative sm:p-12"
+              >
+                <li class="sm:px-8 px-5 py-5 bg-gray-50 sm:py-8">
+                  This is item c535ff21-661e-4c03-b6d6-58e6cd0a56c7
+                </li>
+                <li
+                  class="bg-white shadow-sm justify-center text-gray-500 w-full font-medium py-2 rounded-md text-sm inline-flex px-4 border hover:bg-gray-50 border-gray-300"
+                >
+                  This is item a66e4e76-0f65-475e-b5f8-522833a18265
+                </li>
+              </ul>
+              <img
+                class="max-w-7xl inset-0 xl:px-8 overflow-hidden absolute mx-auto"
+                alt="Profile picture of user a24abfcf-26b2-4cb0-9a6b-bb4a393e1859"
+                src="https://example.org/pictures/5fbb8a8c-746f-4f39-a310-4c13b6b662c2"
+              />
+            </li>
+            <li class="xl:grid xl:grid-cols-3 xl:gap-8">
+              <ul class="py-2 border-gray-200 border-t">
+                <li class="hidden sm:block mt-8">
+                  This is item 99bbe6ec-c7f2-49b9-8933-d45b9c245f06
+                </li>
+                <li
+                  class="text-sm px-2 font-semibold text-left py-3.5 text-gray-900 whitespace-nowrap"
+                >
+                  This is item 5cf8f8ee-95d2-46fd-bf0b-288c27440990
+                </li>
+                <li class="mt-6">This is item 3a4c5941-0d0a-40d9-868d-966575be4a2f</li>
+              </ul>
+            </li>
+            <li class="py-12 lg:px-8 sm:px-6 mx-auto max-w-7xl">
+              <ol class="text-sm text-gray-500">
+                <li class="items-center justify-between flex">
+                  This is item a0bc371a-2315-49f3-9057-d2f443664886
+                </li>
+                <li class="inset-0 sm:px-6 px-4 absolute">
+                  This is item 791c3e5f-b72d-4942-bce5-90750f2aa8fe
+                </li>
+                <li class="flex">This is item e44be071-b5ac-491a-a41e-1bc2d3377407</li>
+                <li class="mx-auto max-w-4xl">This is item 1a9e87a1-e4a7-444f-8171-abb5f77572ac</li>
+                <li class="mt-6">This is item 1767a60d-3de9-41b5-a9d7-f9764892ba23</li>
+              </ol>
+              <ul class="overflow-hidden absolute inset-0">
+                <li class="flex lg:ml-8 items-center">
+                  This is item d05c4c62-cfac-4123-970d-1ce322840f11
+                </li>
+                <li class="lg:space-x-8 lg:flex lg:py-2 hidden">
+                  This is item ce4a5831-5f53-4620-8a08-5afdd656d1dd
+                </li>
+                <li class="flex py-3 font-medium justify-between text-sm">
+                  This is item 130690bd-04b4-4d15-b0ff-2ffc63af957c
+                </li>
+              </ul>
+            </li>
+            <li class="bg-white">
+              <ol class="w-6 h-6">
+                <li class="pt-6">This is item 1fc2fdaf-4b1c-4eaf-b942-5de2de90e06b</li>
+                <li
+                  class="bg-white focus:ring-indigo-500 items-center max-w-xs focus:outline-none flex focus:ring-2 focus:ring-offset-2 text-sm rounded-full"
+                >
+                  This is item aba4e759-dbf3-4b7b-9401-0c786d89d22c
+                </li>
+                <li class="flex-none text-gray-400 ml-3 text-xs font-semibold">
+                  This is item 550aa546-27d1-46fd-a952-9298616927f0
+                </li>
+                <li class="font-medium text-gray-900">
+                  This is item 1d25e893-1f5e-4acf-9ad2-9145b324556b
+                </li>
+                <li class="font-medium text-gray-900">
+                  This is item f640a0c2-a8b9-4371-9e03-3217805443ad
+                </li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <nav class="text-gray-400 w-5 mr-1.5 h-5 flex-shrink-0">
+    <ul class="absolute inset-y-0 pointer-events-none flex items-center right-0 pr-2">
+      <li class="block h-auto w-5 flex-shrink-0">
+        <ul class="grid sm:gap-8 relative bg-white sm:p-8 py-6 gap-6 px-5">
+          <li class="lg:mt-24 mt-16">
+            <ul class="py-1.5 text-gray-400 bg-gray-50 hover:bg-gray-100 focus:z-10 relative">
+              <li
+                class="font-medium sm:px-6 leading-6 text-lg px-4 mt-8 mx-auto lg:px-8 max-w-6xl text-gray-900"
+              >
+                <ol
+                  class="sm:text-sm focus:border-indigo-500 block w-full shadow-sm focus:ring-indigo-500 rounded-md border-gray-300"
+                ></ol>
+                <a href="#" rel="noreferrer" class="w-6 h-6">
+                  This is link 31fc8bb1-722b-4f64-be85-d63107e743c5
+                </a>
+                <ol class="text-sm text-gray-500 max-w-xl mt-2"></ol>
+                <ol
+                  class="sm:border-t sm:border-gray-200 sm:gap-4 sm:grid sm:pt-5 sm:items-center sm:grid-cols-3"
+                ></ol>
+              </li>
+              <li class="items-center inset-y-0 right-0 flex absolute pointer-events-none">
+                <img
+                  class="col-span-full"
+                  alt="Profile picture of user 9dd53d51-be17-48b8-975e-209e03322c30"
+                  src="https://example.org/pictures/f5ed54d4-310a-4f1a-a34b-cd26ef938086"
+                />
+                <img
+                  class="lg:fixed hidden lg:flex-col lg:w-64 lg:flex lg:inset-y-0"
+                  alt="Profile picture of user 6ce94e8b-3d0f-44a2-82b5-96abc3411933"
+                  src="https://example.org/pictures/ac09a848-4170-4d8f-806c-fc4a55d29474"
+                />
+                <a href="#" target="_blank" class="lg:hidden">
+                  This is link 58281e97-5545-4f32-a562-77d762d2662c
+                </a>
+                <a href="#" target="_blank" class="text-base font-medium text-gray-900">
+                  This is link 35e22386-03ef-4cbf-b303-32e8a89e70f9
+                </a>
+              </li>
+              <li
+                class="border px-4 shadow-sm focus:ring-1 focus:border-indigo-500 focus:ring-indigo-500 min-w-0 w-full py-2 bg-white appearance-none text-gray-900 border-gray-300 rounded-md text-base placeholder-gray-500 focus:outline-none"
+              >
+                <a
+                  href="#"
+                  target="_blank"
+                  class="space-y-4 sm:space-y-0 sm:space-x-4 flex sm:flex-row flex-col"
+                >
+                  This is link 6b49bee6-7725-404a-a7ef-79427af58cb8
+                </a>
+              </li>
+            </ul>
+            <ol class="text-gray-900 font-semibold">
+              <li class="border-l border-gray-200 pl-3 ml-3">
+                <ol
+                  class="border-transparent focus-within:ring-2 group focus-within:ring-white relative rounded-md -ml-2"
+                ></ol>
+                <img
+                  class="mx-auto max-w-xl px-4"
+                  alt="Profile picture of user 3cd05adc-52f0-4cb2-a6f6-7db4937f8efc"
+                  src="https://example.org/pictures/fe4962ff-8956-4888-bc19-bab74ba98c13"
+                />
+                <ol class="sm:max-w-md sm:flex mt-4"></ol>
+              </li>
+              <li class="text-sm text-gray-700 hover:text-gray-800 font-medium">
+                <a href="#" class="text-lg"> This is link 0f63a828-a0bb-40e6-b835-cb151a659ab4 </a>
+                <ol
+                  class="-mr-1.5 flex-none hover:text-gray-500 flex justify-center text-gray-400 ml-2 p-1.5 -my-1.5 items-center"
+                ></ol>
+                <ol
+                  class="rounded-tl-lg focus:z-10 text-gray-400 bg-gray-50 py-1.5 hover:bg-gray-100"
+                ></ol>
+              </li>
+              <li class="py-2 px-4 text-sm block">
+                <ol class="flex-shrink-0"></ol>
+              </li>
+              <li class="text-base text-gray-500 mt-2">
+                <ol class="px-5 space-y-6 py-6"></ol>
+                <ul
+                  class="rounded-full absolute border-2 block transform bottom-0 right-0 translate-x-1/2 border-white translate-y-1/2"
+                ></ul>
+                <img
+                  class="bg-gradient-to-r rounded-md sm:h-12 items-center to-indigo-600 w-10 flex flex-shrink-0 sm:w-12 h-10 justify-center from-purple-600 text-white"
+                  alt="Profile picture of user e10a856e-41b5-438e-837b-b3a02dc3fd93"
+                  src="https://example.org/pictures/473650e6-e1be-4408-aac0-407b99012755"
+                />
+              </li>
+              <li class="sm:flex-shrink-0 rounded-md sm:ml-3 shadow sm:mt-0 mt-3">
+                <img
+                  class="flow-root"
+                  alt="Profile picture of user aa8c635a-9706-43d0-a32e-b4f293de1e73"
+                  src="https://example.org/pictures/b8c5d0e8-b17c-401b-96aa-3be778c36e6f"
+                />
+                <img
+                  class="lg:grid-cols-2 lg:items-start lg:grid lg:gap-x-8"
+                  alt="Profile picture of user b557af5d-9d02-45ba-802e-0187f382880f"
+                  src="https://example.org/pictures/6bd972f1-b6a6-4aa3-97c0-0d76e923923f"
+                />
+                <a href="#" target="_blank" class="space-y-4">
+                  This is link 106b3387-f86e-4ce7-b736-589f5782e299
+                </a>
+              </li>
+            </ol>
+            <a href="#" rel="noreferrer" class="pl-4 text-gray-500 border-l border-gray-200 ml-4">
+              This is link 89acacf2-9063-4f05-a473-c081ffdb35a2
+            </a>
+            <a
+              href="#"
+              target="_blank"
+              rel="noreferrer"
+              class="lg:grid-cols-4 lg:gap-x-8 sm:gap-x-6 sm:grid-cols-2 gap-y-12 grid lg:gap-y-0 grid-cols-1"
+            >
+              This is link 4e97688c-ad03-4a35-9154-86db8aa1ac16
+            </a>
+          </li>
+          <li
+            class="hidden -ml-px hover:bg-gray-50 px-4 border py-2 bg-white border-gray-300 relative focus:border-blue-600 items-center focus:outline-none focus:ring-1 focus:ring-blue-600 font-medium focus:z-10 text-gray-900 sm:inline-flex text-sm"
+          >
+            <ol class="text-gray-500">
+              <li class="sr-only">
+                <a href="#" target="_blank" rel="noreferrer" class="truncate">
+                  This is link 9b338592-e885-4c0d-b07b-55ec502f6fa3
+                </a>
+                <a href="#" target="_blank" class="mt-6 space-y-6">
+                  This is link a4f21c14-50f1-4662-be48-1d85c92dd750
+                </a>
+                <ol class="text-sm group relative"></ol>
+                <ul class="min-h-full"></ul>
+              </li>
+              <li
+                class="bg-white z-10 ring-1 grid text-xs ring-black top-0 ring-opacity-5 flex-none text-gray-500 sticky shadow md:hidden grid-cols-7"
+              >
+                <ul class="fixed z-10 overflow-y-auto inset-0"></ul>
+                <ol class="rounded-full h-12 bg-gray-100 overflow-hidden inline-block w-12"></ol>
+                <a href="#" class="mt-2"> This is link 0288923d-cfe7-4e5c-bdac-f8536b2e49a7 </a>
+              </li>
+              <li class="flex items-center mt-4">
+                <ol class="bg-white shadow-sm"></ol>
+                <ul
+                  class="text-gray-700 hover:text-gray-500 bg-white font-medium text-sm items-center relative border border-gray-300 inline-flex px-4 ml-3 rounded-md py-2"
+                ></ul>
+              </li>
+            </ol>
+          </li>
+          <li class="mt-1">
+            <ul class="w-5 flex-shrink-0 h-5">
+              <li class="lg:flex-1 mt-12 lg:ml-8 sm:w-full sm:max-w-md lg:mt-0">
+                <a href="#" target="_blank" class="text-gray-600 text-sm">
+                  This is link 1aedb42b-ee74-4ee8-a6f6-2be7bb1cefc4
+                </a>
+                <ol
+                  class="focus:outline-none focus:ring-inset px-4 text-gray-500 border-r focus:ring-indigo-500 border-gray-200 focus:ring-2 md:hidden"
+                ></ol>
+                <ul class="sm:mt-1"></ul>
+                <ul class="text-sm text-gray-700"></ul>
+              </li>
+              <li class="mx-auto items-center justify-center flex rounded-full w-7 h-7">
+                <a href="#" class="-m-2 text-gray-900 p-2 block font-medium">
+                  This is link c5957e83-4b56-42d6-bd5f-89a682b4b792
+                </a>
+                <img
+                  class="p-2 -ml-2 rounded-md bg-white text-gray-400"
+                  alt="Profile picture of user 4c4ebdc2-285b-4e27-b8dc-5daff62e1d3b"
+                  src="https://example.org/pictures/fb6d5a0b-03d6-4823-9a37-5b032139352f"
+                />
+                <a href="#" class="font-medium sm:flex-shrink-0 text-sm sm:w-40 text-gray-500">
+                  This is link 0224b8c2-c8eb-4b18-809e-f779b528c8da
+                </a>
+              </li>
+              <li class="text-left inline-block ml-3 relative">
+                <img
+                  class="sm:not-sr-only sr-only"
+                  alt="Profile picture of user 0689e734-2b8a-4ef5-bc77-196931d98448"
+                  src="https://example.org/pictures/aeca32ea-db85-47cf-b315-c90653003ba7"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="hover:text-gray-500 text-gray-400"
+                >
+                  This is link 40feb9ae-1d92-4642-ba3c-4feee84177cd
+                </a>
+                <img
+                  class="flex h-full lg:rounded-none lg:rounded-r-lg overflow-hidden rounded-lg flex-col shadow-lg"
+                  alt="Profile picture of user 3dae3057-cb12-42c8-998a-4fc0018db9f2"
+                  src="https://example.org/pictures/8cd1b496-ee23-4893-8e27-d74afe998136"
+                />
+              </li>
+            </ul>
+            <a href="#" class="min-w-full divide-gray-300 divide-y">
+              This is link ec8715b9-c509-432a-885d-406efcf6d02d
+            </a>
+            <img
+              class="hover:bg-gray-200 flex mx-auto rounded-full w-8 justify-center text-gray-900 items-center h-8"
+              alt="Profile picture of user f697ae05-404e-491c-a642-de5f543690d1"
+              src="https://example.org/pictures/0369d165-e5f6-4490-8a2e-698c37c3be21"
+            />
+          </li>
+          <li class="md:ml-6 ml-4 items-center flex">
+            <a href="#" class="sr-only"> This is link 14840d55-b6b6-4529-8449-687a86ee7c49 </a>
+            <ol class="group relative text-base sm:text-sm">
+              <li class="text-gray-900 font-medium text-sm">
+                <ul class="bg-white"></ul>
+              </li>
+              <li class="sm:px-6 max-w-7xl md:px-8 mx-auto px-4">
+                <img
+                  class="rounded-full w-10 h-10"
+                  alt="Profile picture of user 2be0a564-3556-43dc-a9f8-8aec7ec38b78"
+                  src="https://example.org/pictures/e34df15e-a8e0-4d67-8a4d-1ce1430f5aee"
+                />
+                <ol class="flex"></ol>
+              </li>
+              <li
+                class="focus:outline-none rounded-full hover:text-white focus:ring-offset-gray-800 focus:ring-2 focus:ring-offset-2 text-gray-400 bg-gray-800 p-1 focus:ring-white"
+              >
+                <a href="#" rel="noreferrer" class="sm:space-y-24 space-y-16">
+                  This is link 084c09a7-4089-4620-a615-4ef355a0c729
+                </a>
+                <ul class="sr-only"></ul>
+                <a href="#" target="_blank" rel="noreferrer" class="space-y-1 px-2">
+                  This is link 0effe0a6-3157-4bee-9338-f1565948d0fb
+                </a>
+              </li>
+              <li class="w-6 h-6">
+                <ul
+                  class="pr-2 text-xs -mt-2.5 -ml-14 z-20 text-right text-gray-400 leading-5 w-14 left-0 sticky"
+                ></ul>
+                <ul class="items-center flex"></ul>
+                <ul class="z-40 relative lg:hidden"></ul>
+                <a href="#" target="_blank" class="h-full w-full text-gray-300">
+                  This is link 3304378c-786f-4c66-8a59-aeacbc8f8a23
+                </a>
+              </li>
+            </ol>
+          </li>
+        </ul>
+        <ul class="relative">
+          <li
+            class="sm:mt-16 mt-12 sm:grid-cols-2 space-y-4 sm:grid xl:max-w-none sm:space-y-0 lg:max-w-4xl xl:grid-cols-4 lg:mx-auto xl:mx-0 sm:gap-6"
+          >
+            <img
+              class="w-auto h-8 block"
+              alt="Profile picture of user 2b851d20-3133-4de4-bc59-532f2df52be4"
+              src="https://example.org/pictures/a4132951-fcba-495b-98a7-53749b6460e7"
+            />
+          </li>
+          <li class="h-5 flex-shrink-0 w-5">
+            <ol
+              class="justify-center sm:h-12 text-white bg-indigo-500 w-10 inline-flex rounded-md items-center sm:w-12 h-10"
+            >
+              <li class="rounded-full w-7 items-center flex mx-auto h-7 justify-center">
+                <ol class="object-cover object-center"></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="right-0 items-center pointer-events-none inset-y-0 flex absolute"
+                >
+                  This is link e28e3fdf-a90a-4d90-a068-c15d210d4b30
+                </a>
+                <ol class="text-gray-500 text-base"></ol>
+              </li>
+              <li class="grid grid-cols-7 text-gray-500 mt-6 leading-6 text-xs">
+                <a href="#" class="bg-gray-50">
+                  This is link 1469b628-27c9-4e07-9d94-5f918acfcc56
+                </a>
+                <ol class="max-w-7xl mx-auto"></ol>
+                <a href="#" class="mt-2 text-warm-gray-500 text-base">
+                  This is link ef11bffc-aba2-4c19-bac0-02abe9dfe38c
+                </a>
+              </li>
+              <li class="pt-6">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="absolute mt-2 origin-bottom-right ring-1 w-40 right-0 ring-opacity-5 z-10 bg-white rounded-md focus:outline-none shadow-lg ring-black"
+                >
+                  This is link ff3a13b0-557e-4fdb-a3d0-20e6504bfb8a
+                </a>
+                <ol class="rounded-lg inline-flex p-3"></ol>
+                <ul class="justify-center mx-auto w-7 flex h-7 items-center rounded-full"></ul>
+                <img
+                  class="lg:px-8 sm:px-6 mx-auto px-4 max-w-7xl py-6"
+                  alt="Profile picture of user 9aafccb4-77af-4b1f-9e98-7c44cb8d60dd"
+                  src="https://example.org/pictures/25800965-0f7c-45e5-a0fc-10272bd4c32c"
+                />
+              </li>
+            </ol>
+            <a href="#" target="_blank" class="divide-gray-200 divide-y">
+              This is link 97be46d6-dad2-4de8-aec1-46dd5c1d1ea7
+            </a>
+            <img
+              class="border-gray-200 border-t md:border-t-0 divide-gray-200 divide-y"
+              alt="Profile picture of user b79a8d18-cb12-48d5-88e9-46de1005a029"
+              src="https://example.org/pictures/53802977-1b05-4fba-899c-2a49a1a81c6d"
+            />
+          </li>
+          <li class="hover:text-gray-500 text-gray-400">
+            <img
+              class="hover:text-gray-900 hover:bg-gray-50 text-gray-600"
+              alt="Profile picture of user 661789ea-7d6c-41eb-bebe-daa7e91d69f5"
+              src="https://example.org/pictures/df6bf8a9-1b2b-4deb-b55b-ee12822e0c4d"
+            />
+          </li>
+          <li class="absolute inset-0 overflow-hidden">
+            <a
+              href="#"
+              target="_blank"
+              rel="noreferrer"
+              class="font-medium text-sm text-gray-700 block"
+            >
+              This is link f92f1dd9-b730-46ae-a115-37ee63c182ed
+            </a>
+            <ol class="flex items-center h-7 mx-auto justify-center rounded-full w-7">
+              <li class="xl:col-span-1 space-y-8">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="rounded-lg -inset-px border-2 absolute pointer-events-none"
+                >
+                  This is link cfeb8ddf-abc1-4c58-aff3-033885a5be52
+                </a>
+                <a href="#" class="ml-3 text-sm">
+                  This is link 7ed24a32-cc3e-4761-a385-5b6c3cab4e04
+                </a>
+                <a href="#" rel="noreferrer" class="py-6 mx-auto lg:px-8 max-w-7xl sm:px-6">
+                  This is link d4484aaf-d4ea-462a-95f2-549b682cf776
+                </a>
+              </li>
+              <li class="flex items-center">
+                <ol
+                  class="text-sm shadow-sm font-medium border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center border bg-white text-gray-700 px-4 py-2 inline-flex focus:ring-purple-500 hover:bg-gray-50"
+                ></ol>
+                <img
+                  class="text-gray-900 leading-6 font-medium text-lg"
+                  alt="Profile picture of user f32fb240-a06f-4024-8366-81f9fbf50999"
+                  src="https://example.org/pictures/303888e4-abd5-45ff-a127-913cd4a24c32"
+                />
+                <ol class="text-sm sm:mt-0 mt-1 sm:col-span-2 text-gray-900"></ol>
+                <ul class="gap-16 lg:gap-x-5 grid mt-12 lg:gap-y-12 pt-12 lg:grid-cols-3"></ul>
+              </li>
+            </ol>
+            <ul class="flex-shrink-0">
+              <li class="px-4 py-16 lg:px-8 mx-auto sm:py-24 max-w-7xl sm:px-6">
+                <ol class="text-lg text-gray-900 font-medium"></ol>
+                <ul
+                  class="lg:absolute w-full h-64 lg:h-full sm:h-72 lg:right-0 relative lg:inset-y-0 md:h-96 lg:w-1/2"
+                ></ul>
+                <a
+                  href="#"
+                  class="lg:row-start-1 z-10 lg:py-16 lg:col-start-1 lg:col-span-4 relative lg:bg-transparent"
+                >
+                  This is link b3add0d3-f2c3-4f83-b216-dfc2f3262489
+                </a>
+                <ol class="relative"></ol>
+              </li>
+              <li class="block">
+                <img
+                  class="relative bg-white"
+                  alt="Profile picture of user d4471838-fd8f-4901-b1bb-6e1920cb5ab0"
+                  src="https://example.org/pictures/d1ecb08b-8861-4ad7-9382-9b90ed4a55ba"
+                />
+                <ol class="border-gray-200 pb-5 border-b"></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="mt-1 text-gray-500 text-sm">
+                  This is link 4c55a52d-f106-44db-b084-1738287ca906
+                </a>
+              </li>
+              <li class="divide-y divide-gray-200 bg-white">
+                <ul class="hover:bg-gray-100 py-1.5 focus:z-10 bg-white"></ul>
+                <img
+                  class="bg-white px-4 focus:outline-none text-gray-700 hover:bg-gray-50 font-medium text-sm border-gray-300 shadow-sm focus:ring-offset-2 focus:ring-2 border focus:ring-sky-500 items-center py-2 rounded-md inline-flex"
+                  alt="Profile picture of user e0f83337-cf17-488f-84ef-a2a541464420"
+                  src="https://example.org/pictures/a95f4d73-1766-4a53-b19c-d6d1987e99b1"
+                />
+                <img
+                  class="pt-10 mt-10 border-t border-gray-200"
+                  alt="Profile picture of user 3bd50470-e8c2-4400-8b95-06f4d83a12cf"
+                  src="https://example.org/pictures/08655e86-9587-44ed-b3b0-992e0fbd78e8"
+                />
+              </li>
+              <li class="text-gray-900 text-4xl font-bold tracking-tight">
+                <ul class="text-gray-300 text-xl"></ul>
+              </li>
+            </ul>
+            <ol
+              class="absolute z-30 transform top-0 transition p-2 md:hidden inset-x-0 origin-top-right"
+            >
+              <li class="sr-only">
+                <img
+                  class="sm:col-span-2 sm:flex sm:justify-end"
+                  alt="Profile picture of user e7f494c7-bb61-47af-83bb-959bfca33cbc"
+                  src="https://example.org/pictures/9dda3778-be1b-4391-be3e-e0bbdb9b541f"
+                />
+                <img
+                  class="max-w-7xl py-6 sm:px-6 mx-auto lg:px-8"
+                  alt="Profile picture of user a4f463a7-b9ab-44a9-89ad-70145e70494d"
+                  src="https://example.org/pictures/194bf0ec-3062-4f3a-9160-444572b6135e"
+                />
+                <img
+                  class="xl:mt-0 md:mt-16 mt-16"
+                  alt="Profile picture of user 6fb45adb-7595-442d-8887-5dbcf43fe5b0"
+                  src="https://example.org/pictures/10632e5a-c7db-4c0d-82e7-6ade805f7c17"
+                />
+                <ol
+                  class="-translate-x-1/2 sm:px-0 z-10 w-screen max-w-md mt-3 transform left-1/2 absolute px-2"
+                ></ol>
+              </li>
+              <li class="block">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="w-5 flex-shrink-0 text-white h-5"
+                >
+                  This is link 88dc18a7-606e-4334-b99c-4fe00ae98d3e
+                </a>
+                <ol class="bg-gray-400"></ol>
+                <a href="#" rel="noreferrer" class="sm:text-xl text-gray-900 text-lg">
+                  This is link 9df18eb8-07e9-4731-8214-08aa7da87692
+                </a>
+              </li>
+              <li class="border-b border-gray-200 pb-5">
+                <img
+                  class="w-6 h-6 flex-shrink-0 group-hover:text-gray-500 text-gray-400"
+                  alt="Profile picture of user 48f8f09d-1805-415f-b0f4-1fedd0cae352"
+                  src="https://example.org/pictures/97c6f15c-f387-4997-b953-cdbd0fa68d4d"
+                />
+                <img
+                  class="items-center text-sm bg-indigo-600 shadow-sm focus:ring-2 font-medium hover:bg-indigo-700 focus:ring-offset-2 focus:ring-indigo-500 rounded-md leading-4 border-transparent py-2 px-3 border focus:outline-none text-white inline-flex"
+                  alt="Profile picture of user 6f616cb8-7835-4f8f-8d5f-fa7c66c402e1"
+                  src="https://example.org/pictures/301f5ca1-058e-4947-9b68-7b439b19afae"
+                />
+              </li>
+              <li
+                class="xl:justify-between max-w-7xl sm:px-6 lg:px-8 mx-auto px-4 xl:flex xl:items-center"
+              >
+                <img
+                  class="font-medium leading-6 text-lg text-gray-900"
+                  alt="Profile picture of user 257387fe-da02-4ff9-86f8-6d694b13a358"
+                  src="https://example.org/pictures/c0647a9c-38bf-4441-89c8-d7ee2122a3f1"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="bg-gray-50 text-gray-400 hover:bg-gray-100 focus:z-10 py-1.5"
+                >
+                  This is link 837b2b73-3bf1-4d71-8250-c555d0190f6d
+                </a>
+                <ul class="justify-between flex"></ul>
+                <ol class="flex items-center justify-between"></ol>
+              </li>
+            </ol>
+          </li>
+        </ul>
+        <a
+          href="#"
+          target="_blank"
+          rel="noreferrer"
+          class="bg-white pt-6 relative pb-8 overflow-hidden flex-col sm:rounded-lg w-full flex lg:py-8 sm:pb-6"
+        >
+          This is link c560702e-2903-4d63-be29-6b3e69aebf59
+        </a>
+        <ol
+          class="text-gray-400 -mr-2 h-10 w-10 flex justify-center rounded-md items-center p-2 bg-white"
+        >
+          <li class="-m-2 font-medium p-2 block text-gray-900">
+            <ol class="col-span-full sm:col-span-4">
+              <li class="mx-auto items-center justify-center w-7 flex h-7 rounded-full">
+                <ul class="sm:mt-16 space-y-16 mt-12"></ul>
+                <img
+                  class="space-y-4 items-start flex sm:space-y-0 sm:flex-row sm:items-center flex-col sm:space-x-4"
+                  alt="Profile picture of user 52eeb15e-eb1d-449a-92a2-381a467811e7"
+                  src="https://example.org/pictures/f48535e2-f54a-4f70-b9c0-a3c14989b1f9"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="text-cyan-100 text-base mt-2 font-medium"
+                >
+                  This is link 015ce967-d3ec-4617-99d6-56102c5095df
+                </a>
+              </li>
+              <li class="flex items-center justify-between">
+                <ul
+                  class="absolute items-center bg-indigo-500 flex w-12 h-12 rounded-md justify-center"
+                ></ul>
+              </li>
+            </ol>
+            <ol
+              class="xl:px-2 sm:pt-8 max-w-7xl pt-4 sm:px-6 px-4 pb-16 sm:pb-24 xl:pt-14 mx-auto lg:px-8"
+            >
+              <li class="flex flex-1 lg:hidden items-center">
+                <ol class="flex-shrink-0 ml-4"></ol>
+                <ul class="mx-auto items-center justify-center flex rounded-full w-7 h-7"></ul>
+                <img
+                  class="text-gray-400 hover:text-gray-500 p-2 -m-2"
+                  alt="Profile picture of user cebdd973-4689-4b1e-b010-902bc80305b8"
+                  src="https://example.org/pictures/542bca8c-f061-4c26-a7c6-545e09c20370"
+                />
+                <ul class="divide-x isolate flex divide-gray-200 shadow rounded-lg"></ul>
+              </li>
+              <li class="text-sm">
+                <img
+                  class="flow-root lg:ml-8 ml-4"
+                  alt="Profile picture of user 21b286fb-24c0-40d0-9695-56f1e1b3dcb5"
+                  src="https://example.org/pictures/547b3eb9-f641-4d66-99b0-925fe1fd6e55"
+                />
+              </li>
+              <li class="absolute flex inset-0">
+                <img
+                  class="py-2 block px-4 text-gray-700 text-sm"
+                  alt="Profile picture of user 3aaaa659-364e-449a-a348-663808f5a368"
+                  src="https://example.org/pictures/f00c3be6-2b50-4994-92b8-928f93343fcb"
+                />
+                <img
+                  class="px-4 block text-sm py-2"
+                  alt="Profile picture of user 4e6ec492-fca8-4fbe-a031-d24f0b554475"
+                  src="https://example.org/pictures/4c64b968-ff46-4e88-895c-52424f3fcaea"
+                />
+                <ol class="w-5 h-5"></ol>
+                <ul class="bg-gray-300"></ul>
+              </li>
+              <li class="pl-3 cursor-default select-none relative pr-9 py-2">
+                <a
+                  href="#"
+                  class="sm:space-x-4 sm:space-y-0 space-y-4 sm:flex-row sm:items-center flex-col flex items-start"
+                >
+                  This is link cb25c4ca-33f8-4832-9826-1457d5f8bf81
+                </a>
+                <ol class="inline-flex ml-3 sm:ml-0"></ol>
+                <ul class="h-6 mr-4 flex-shrink-0 w-6"></ul>
+                <ul class="mt-6"></ul>
+              </li>
+              <li class="hidden sm:block">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="lg:px-8 lg:max-w-7xl sm:max-w-3xl max-w-md px-6 text-center mx-auto"
+                >
+                  This is link a7e95383-983f-48e3-b958-6a02f74d583a
+                </a>
+                <ol
+                  class="rounded w-full h-48 border-2 bg-transparent border-dashed text-gray-200 border-gray-300"
+                ></ol>
+                <ul class="w-full h-full text-gray-300"></ul>
+              </li>
+            </ol>
+          </li>
+          <li class="fixed inset-0 bg-black bg-opacity-25">
+            <ol
+              class="rounded-md shadow-sm sm:text-sm w-full block focus:ring-blue-500 mt-1 text-blue-gray-900 focus:border-blue-500 border-blue-gray-300"
+            >
+              <li class="truncate">
+                <ul class="leading-8 text-lg text-gray-900 mt-6 font-semibold"></ul>
+                <ol class="z-10 absolute inset-x-0 top-full"></ol>
+                <img
+                  class="row-span-full col-start-7"
+                  alt="Profile picture of user c4a237cc-49ed-40ec-a325-42f1f3543eee"
+                  src="https://example.org/pictures/f4254ae3-2911-4c04-b4c7-3d34b7e87732"
+                />
+              </li>
+              <li class="text-sm">
+                <ul class="object-center object-cover"></ul>
+                <ul class="font-medium"></ul>
+                <img
+                  class="bg-gray-900 text-white"
+                  alt="Profile picture of user 52ffe417-a7d9-4bd7-bd54-fe05209ab807"
+                  src="https://example.org/pictures/9a035f27-d9de-4806-b7fd-06295e9057f5"
+                />
+              </li>
+            </ol>
+            <ol class="sr-only">
+              <li class="flex-col flex-grow flex">
+                <ol class="divide-gray-200 divide-x"></ol>
+                <ol
+                  class="text-base font-medium whitespace-nowrap hover:text-gray-900 text-gray-500"
+                ></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="flex-col xl:flex-row mt-2 text-gray-500 flex"
+                >
+                  This is link 41cbf232-cbf7-4e07-9f69-699407726cb7
+                </a>
+                <a href="#" target="_blank" class="overflow-hidden rounded-lg bg-white shadow">
+                  This is link ad17b6ba-4f06-43c5-9fe1-827bfa194437
+                </a>
+              </li>
+              <li class="inset-0 absolute">
+                <ol
+                  class="text-sm sm:hidden text-indigo-600 hover:text-indigo-500 font-medium"
+                ></ol>
+              </li>
+              <li class="hover:text-gray-600 text-gray-500 text-sm">
+                <ul class="text-indigo-600 border-indigo-500"></ul>
+              </li>
+              <li class="h-5 text-gray-400 w-5">
+                <img
+                  class="sm:px-6 px-2 mx-auto max-w-7xl lg:px-8"
+                  alt="Profile picture of user 46b84719-0c46-467c-8018-f45035a3aff5"
+                  src="https://example.org/pictures/1a3bf97c-4b50-41de-b737-99b49e95cc21"
+                />
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="hover:text-indigo-700 hover:bg-white bg-gray-50 text-indigo-700"
+                >
+                  This is link 1badad9b-66c6-4f63-9987-88234f851f57
+                </a>
+                <img
+                  class="text-gray-500 hover:text-gray-600"
+                  alt="Profile picture of user 386de1a8-ce69-4e05-bbe2-25bc9e97b679"
+                  src="https://example.org/pictures/49c10d55-84a9-4eb6-a78a-d55e71477e5b"
+                />
+                <ul class="rounded-tr-lg py-1.5 bg-white hover:bg-gray-100 focus:z-10"></ul>
+              </li>
+              <li class="py-2 text-sm px-4 block text-gray-700">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="p-2 text-gray-400 bg-white lg:hidden rounded-md"
+                >
+                  This is link 9d0e087f-a100-4527-bd7d-dcc3e2485d1e
+                </a>
+                <ol class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 -mx-4"></ol>
+                <a href="#" rel="noreferrer" class="text-gray-500 hover:text-gray-600">
+                  This is link 390ec6bc-66cc-4476-bc15-d7cdf55cc543
+                </a>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="justify-center h-7 items-center w-7 rounded-full flex mx-auto"
+                >
+                  This is link a2d1dc6d-60aa-4827-8c03-60f945d53177
+                </a>
+              </li>
+            </ol>
+            <ol class="space-y-4 mt-4">
+              <li
+                class="mt-3 right-0 absolute z-10 shadow-lg ring-1 ring-black overflow-hidden bg-white origin-top-right w-36 focus:outline-none rounded-md ring-opacity-5"
+              >
+                <img
+                  class="font-medium text-white hover:text-gray-100 text-sm"
+                  alt="Profile picture of user a7b42dac-0105-4ba9-96cb-b08810ae4caa"
+                  src="https://example.org/pictures/65225758-8ba1-40db-953a-466c7030e4d4"
+                />
+                <ul class="online"></ul>
+                <a href="#" rel="noreferrer" class="h-16 justify-between items-center flex">
+                  This is link a26f2298-b93c-4202-9a25-6cc3d331311c
+                </a>
+                <ol
+                  class="gap-12 sm:grid-flow-col sm:grid-cols-2 grid-cols-1 grid sm:grid-rows-4"
+                ></ol>
+              </li>
+              <li class="hover:text-gray-700 font-medium text-gray-900 text-base">
+                <ul class="pb-3 border-gray-700 border-t pt-4"></ul>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="items-center inline-flex bg-black p-1 sm:text-base pr-2 xl:text-base rounded-full text-white lg:text-sm hover:text-gray-200"
+                >
+                  This is link 412346b0-9182-4af8-b363-104ed8ce7692
+                </a>
+                <ul
+                  class="p-1 hover:text-white rounded-full ml-auto focus:ring-offset-2 focus:ring-white flex-shrink-0 focus:ring-offset-indigo-600 bg-indigo-600 text-indigo-200 focus:ring-2 focus:outline-none"
+                ></ul>
+              </li>
+            </ol>
+            <img
+              class="font-sans"
+              alt="Profile picture of user 486c7864-b297-4d4e-8f1f-b10c1bae7e00"
+              src="https://example.org/pictures/8ef7f4c9-ede3-484e-8e01-ddfc3b514288"
+            />
+          </li>
+          <li class="focus:z-10 py-1.5 hover:bg-gray-100 bg-white">
+            <img
+              class="text-gray-400 mx-1"
+              alt="Profile picture of user f981b0af-1830-4b78-af2b-6261d95dda80"
+              src="https://example.org/pictures/a94b8b34-f2d5-4a18-bc2a-08cee5d063f6"
+            />
+            <a href="#" target="_blank" rel="noreferrer" class="bg-gray-800">
+              This is link 0051ba86-2835-4493-9ca3-5bab90b51e4c
+            </a>
+            <a href="#" rel="noreferrer" class="hover:text-gray-600 text-gray-500">
+              This is link 77d792f1-653a-49b6-ba82-ce4d5cfe8512
+            </a>
+          </li>
+          <li class="px-2 mt-5 space-y-1 bg-gray-800 flex-1">
+            <ul class="h-0 bg-gray-50 min-h-[768px]">
+              <li class="px-3 py-2 bg-white relative">
+                <ul
+                  class="lg:space-y-0 px-4 lg:px-8 lg:grid-cols-3 lg:max-w-7xl sm:px-6 mx-auto lg:grid space-y-12 lg:gap-x-8 max-w-2xl"
+                ></ul>
+                <img
+                  class="fixed p-4 sm:p-6 overflow-y-auto md:p-20 z-10 inset-0"
+                  alt="Profile picture of user f3d7dc1d-deee-4c4f-9ee1-0850fa7d9929"
+                  src="https://example.org/pictures/b053b6ef-a80a-4210-84fc-0f5d4df44ba0"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="bg-indigo-600 focus:ring-white hover:text-white p-1 focus:outline-none focus:ring-offset-indigo-600 focus:ring-offset-2 rounded-full text-indigo-200 focus:ring-2"
+                >
+                  This is link 7049d6e4-7fd9-430e-bb95-8c457bd43606
+                </a>
+              </li>
+              <li class="block font-medium text-sm text-gray-700">
+                <a href="#" class="sr-only"> This is link 3da214ed-a5dc-4a0d-a873-3b93c54625eb </a>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="text-sm text-gray-500 group-hover:text-gray-700 font-medium"
+                >
+                  This is link b82a5089-b899-45c3-9dcf-bf4862d08135
+                </a>
+                <ol class="text-gray-400 hover:text-gray-500"></ol>
+              </li>
+              <li class="sr-only">
+                <img
+                  class="text-base text-indigo-600 font-medium"
+                  alt="Profile picture of user b0997c24-d615-4d96-8505-fa2c0f9bc123"
+                  src="https://example.org/pictures/6d720f60-cf59-4cbf-94c7-079ccd951009"
+                />
+                <a href="#" class="px-4 flex-1 sm:px-6 mt-6 relative">
+                  This is link 16fd2d2b-324f-4cbf-b011-940456e37522
+                </a>
+              </li>
+              <li class="mx-auto w-5 text-gray-400 h-5">
+                <img
+                  class="h-64 bg-white text-gray-200 border-2 w-full border-gray-300 border-dashed"
+                  alt="Profile picture of user 40d760d0-b933-4002-ae6a-56bd854eddc5"
+                  src="https://example.org/pictures/42b2216c-04ab-4ab2-a03e-9aa9c97ef36a"
+                />
+                <ul class="sm:hidden mt-1"></ul>
+                <ul class="text-sm group flex hover:text-gray-700 text-gray-500"></ul>
+              </li>
+              <li
+                class="flex p-4 items-end justify-center sm:p-0 min-h-full sm:items-center text-center"
+              >
+                <a href="#" target="_blank" class="text-gray-900">
+                  This is link ad05be79-aa5b-415f-94df-d497a5ee58e5
+                </a>
+                <ul class="bg-white py-6 relative px-4 sm:px-6"></ul>
+                <a href="#" class="ml-3 relative">
+                  This is link a135e269-eaec-40f7-9be1-283b9784c14b
+                </a>
+              </li>
+            </ul>
+            <ul class="px-2 space-y-1">
+              <li class="inline-block">
+                <a href="#" class="mt-1"> This is link eb83ae77-1cb7-42ca-b0cc-a5f598afacd7 </a>
+                <ol class="leading-6 font-medium text-lg text-gray-900"></ol>
+                <ul class="grid col-start-2 grid-cols-2 gap-x-8"></ul>
+                <ol class="mr-0.5"></ol>
+              </li>
+              <li class="items-center flex space-x-5">
+                <ul
+                  class="focus:outline-none font-medium items-center border focus:ring-offset-2 py-2 focus:ring-indigo-500 bg-indigo-100 text-indigo-700 hover:bg-indigo-200 inline-flex rounded-md px-4 border-transparent text-sm focus:ring-2"
+                ></ul>
+                <img
+                  class="lg:hidden flex items-center"
+                  alt="Profile picture of user 333378f3-f0de-4c3c-a63e-6228c37610fe"
+                  src="https://example.org/pictures/21c913e0-b7b1-4112-93e2-4990554e08b1"
+                />
+              </li>
+              <li
+                class="focus:outline-none text-gray-700 text-sm rounded-md px-4 bg-white border focus:ring-2 font-medium py-2 hover:bg-gray-50 focus:ring-indigo-500 border-gray-300 shadow-sm focus:ring-offset-2"
+              >
+                <a href="#" target="_blank" class="sr-only">
+                  This is link e021593d-c663-4c53-8645-e61711e21d88
+                </a>
+              </li>
+              <li class="justify-center bg-white flex py-2">
+                <ol class="inset-x-0 bottom-0 fixed"></ol>
+                <a href="#" target="_blank" class="sm:flex">
+                  This is link b3d1f9da-bcaf-4fa2-be91-91c4b3e0e4f2
+                </a>
+              </li>
+              <li class="-m-2 hover:text-gray-500 p-2 text-gray-400">
+                <a href="#" rel="noreferrer" class="h-12 rounded-full w-12">
+                  This is link 1cde9b1a-0ac9-4d89-9e80-80f821a7e66a
+                </a>
+              </li>
+            </ul>
+            <ul class="mt-6 px-4 sm:mt-10 flow-root sm:px-0">
+              <li class="text-sm font-medium text-gray-900">
+                <ul class="grid-cols-2 grid gap-y-10 gap-x-8 py-16"></ul>
+                <img
+                  class="lg:grid-cols-7 lg:grid relative"
+                  alt="Profile picture of user 9b4ecdc2-c5f5-4d3d-8d65-f385350ffc88"
+                  src="https://example.org/pictures/46114cd7-2c35-4509-a658-109f12ac01f0"
+                />
+                <img
+                  class="text-gray-900 font-medium"
+                  alt="Profile picture of user 56f694c6-f235-4b16-af97-43f4a327287b"
+                  src="https://example.org/pictures/29a71e15-9156-4365-8063-4529881e1972"
+                />
+              </li>
+              <li
+                class="text-3xl sm:text-4xl tracking-tight inline font-bold sm:block text-gray-900"
+              >
+                <ol class="mt-1 relative"></ol>
+                <ul class="ml-1 flex-shrink-0 font-normal text-gray-500"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="rounded-lg aspect-w-4 bg-gray-100 aspect-h-3 overflow-hidden"
+                >
+                  This is link 994ac074-5915-4a6a-8d8f-6a3fd701e5ac
+                </a>
+              </li>
+              <li class="pr-4 text-sm sm:pr-6 text-right pl-3 py-4 font-medium whitespace-nowrap">
+                <ol class="space-y-6 sm:mt-4 mt-6 sm:space-y-4"></ol>
+                <ol class="overflow-hidden sm:rounded-md shadow"></ol>
+                <ol class="text-sm"></ol>
+              </li>
+              <li class="ml-3">
+                <img
+                  class="font-medium whitespace-nowrap text-gray-500 text-base hover:text-gray-900"
+                  alt="Profile picture of user 10c50d13-bdb2-44f3-b4ac-f9d7f704dc4f"
+                  src="https://example.org/pictures/f7e8681f-c0fa-4293-9723-3436e7af0b41"
+                />
+                <img
+                  class="bg-white py-1.5 hover:bg-gray-100 focus:z-10"
+                  alt="Profile picture of user 92fa4b6e-62a9-4c50-b3ae-93a6794ee9c4"
+                  src="https://example.org/pictures/03e3f7d1-f375-4416-90cc-1d2e0c8a1159"
+                />
+                <ol class="mt-6 relative"></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="text-gray-500">
+                  This is link 098b8af4-56a5-4f50-a797-d40620d27103
+                </a>
+              </li>
+            </ul>
+            <a href="#" target="_blank" rel="noreferrer" class="pt-3 pb-2">
+              This is link 29c8f429-ced1-4148-889a-f08f926ecfa2
+            </a>
+          </li>
+        </ol>
+      </li>
+      <li class="hidden sm:inline sm:mx-2">
+        <img
+          class="flex-auto truncate ml-3"
+          alt="Profile picture of user abbfef68-509a-421f-a3fb-a0474d2755b2"
+          src="https://example.org/pictures/41039638-b5db-43b2-b3d3-cd98b7322213"
+        />
+        <a
+          href="#"
+          rel="noreferrer"
+          class="text-sm text-gray-500 hover:text-gray-700 font-medium ml-4"
+        >
+          This is link a0b0f948-f6a6-40fc-89e4-98eab070bfee
+        </a>
+      </li>
+      <li class="relative bg-white">
+        <ol
+          class="focus:ring-indigo-500 py-2 block text-base border-gray-300 focus:border-indigo-500 sm:text-sm w-full rounded-md focus:outline-none pr-10 pl-3"
+        >
+          <li
+            class="bg-white w-full justify-between text-gray-400 hover:text-gray-500 py-3 flex items-center text-sm"
+          >
+            <ol class="md:gap-8 md:grid-cols-2 md:grid space-y-12 md:space-y-0">
+              <li class="text-gray-900 font-medium">
+                <ol class="space-y-4 mt-4"></ol>
+              </li>
+              <li class="flex-auto space-y-1">
+                <ol class="flex pt-2 justify-between items-end flex-1"></ol>
+                <ul class="flex"></ul>
+                <a href="#" class="pointer-events-none object-cover">
+                  This is link 245a5a2b-b274-41f4-b515-9456f407a6c1
+                </a>
+              </li>
+              <li class="w-5 h-5 flex-shrink-0">
+                <ul class="text-green-500 absolute h-6 w-6"></ul>
+                <img
+                  class="gap-x-8 lg:grid-cols-2 max-w-lg lg:max-w-none grid mx-auto gap-y-16 grid-cols-1"
+                  alt="Profile picture of user 55e1298a-f46d-404f-82b3-f1f8e44c10ba"
+                  src="https://example.org/pictures/caf15c29-8f54-40c8-b0d5-310a1463993b"
+                />
+                <img
+                  class="-m-2 p-2 font-medium block text-gray-900"
+                  alt="Profile picture of user 63a81191-2f71-4dc3-b0d0-3c376eb63ca2"
+                  src="https://example.org/pictures/47926447-567a-4e1d-91c3-720407e3be22"
+                />
+              </li>
+            </ol>
+            <a
+              href="#"
+              target="_blank"
+              class="w-7 flex justify-center rounded-full items-center mx-auto h-7"
+            >
+              This is link cd5519d6-f0ab-446e-b81f-cf5d6e1b074c
+            </a>
+            <a href="#" target="_blank" rel="noreferrer" class="space-x-6 flex">
+              This is link ee6cd47c-41cf-4847-864a-e151303213df
+            </a>
+            <a href="#" rel="noreferrer" class="z-10 relative">
+              This is link 682d9d4c-d9ec-4fda-b8b0-08a26f877ead
+            </a>
+          </li>
+          <li class="text-right px-4 bg-gray-50 py-3 sm:px-6">
+            <ul class="hover:text-gray-500 text-gray-400">
+              <li class="items-center flex h-7 rounded-full mx-auto justify-center w-7">
+                <ol class="flex-shrink-0 w-6 text-gray-400 h-6 group-hover:text-gray-500"></ol>
+                <ul class="px-8 max-w-7xl mx-auto"></ul>
+              </li>
+              <li class="bg-white hover:bg-indigo-50 text-indigo-600">
+                <ul class="py-2 block text-sm px-4 text-gray-700"></ul>
+                <ul class="font-medium text-gray-700 text-sm block"></ul>
+                <img
+                  class="absolute inset-0"
+                  alt="Profile picture of user 745de110-fa23-4010-8476-6cf6212eb388"
+                  src="https://example.org/pictures/9d2ad33b-1e02-42ee-a9d8-6fdaada32a1f"
+                />
+                <ol class="items-center flex pt-4 px-5 justify-between"></ol>
+              </li>
+            </ul>
+          </li>
+          <li class="space-y-8 flex-1">
+            <img
+              class="max-w-none mx-auto"
+              alt="Profile picture of user 2a22b7bc-a481-481e-a19c-58b523824072"
+              src="https://example.org/pictures/86bc4f34-c8df-4a6a-b81b-7560f0f272e3"
+            />
+            <a href="#" class="text-base mt-6">
+              This is link 265af612-3de8-4007-9b6e-7edb7ed50a5a
+            </a>
+            <ul class="text-gray-900 font-medium leading-6 text-lg">
+              <li class="whitespace-nowrap text-base py-4 border-b-2 flex-1 px-1 font-medium">
+                <ul class="items-center flex space-x-8"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="hover:text-gray-900 text-gray-600 hover:bg-gray-50"
+                >
+                  This is link c1314c71-f929-4e53-88f4-708616b4f445
+                </a>
+                <img
+                  class="relative z-10"
+                  alt="Profile picture of user 3d25d5cc-e200-4109-acf7-490f58bb1226"
+                  src="https://example.org/pictures/3bbbc507-017d-4c34-8441-28d6572e5b63"
+                />
+                <img
+                  class="mt-6 space-y-6"
+                  alt="Profile picture of user a43e66b1-c833-479c-aa72-3d01d1327160"
+                  src="https://example.org/pictures/bc43a065-6249-40ba-9a5e-5f3816af7b99"
+                />
+              </li>
+              <li class="w-7 h-7 flex mx-auto items-center justify-center rounded-full">
+                <a href="#" target="_blank" class="w-6 h-6">
+                  This is link dde8b039-1e0c-4972-af58-d341d583f1d6
+                </a>
+                <ul class="text-base text-gray-500 order-2 font-medium"></ul>
+                <ol class="mt-6"></ol>
+              </li>
+              <li class="border-gray-100 py-14 border-t text-center px-6 sm:px-14 text-sm">
+                <ol class="max-w-sm mx-auto"></ol>
+                <ol class="font-medium text-gray-700 hover:text-gray-800 text-sm"></ol>
+              </li>
+              <li class="hover:bg-gray-100 py-1.5 text-gray-900 bg-white focus:z-10">
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user 551a77a7-cb75-4640-b3b8-c81894eee992"
+                  src="https://example.org/pictures/acdb10f5-1da0-4e0a-91de-16bfa5e5b54a"
+                />
+                <ol
+                  class="text-base hover:text-gray-800 py-2 hover:bg-gray-100 block text-gray-500 font-medium px-4"
+                ></ol>
+                <ul class="w-full flex md:ml-0"></ul>
+              </li>
+              <li class="fixed z-10 overflow-y-auto inset-0">
+                <ol
+                  class="flex justify-between py-6 relative w-full text-left group items-center"
+                ></ol>
+                <ol class="w-8 h-8"></ol>
+                <ol
+                  class="ring-1 ring-opacity-5 py-1 shadow-lg absolute z-10 bg-white right-0 mt-2 ring-black origin-top-right w-48 focus:outline-none rounded-md"
+                ></ol>
+              </li>
+            </ul>
+            <img
+              class="h-6 w-6"
+              alt="Profile picture of user f26ed8d8-ee6c-43d3-8f96-31f2a580186a"
+              src="https://example.org/pictures/9fe0070e-a716-4f72-83dd-462a13dcd9f1"
+            />
+          </li>
+          <li class="font-medium text-indigo-600 ml-3 hover:text-indigo-500 text-sm">
+            <a
+              href="#"
+              target="_blank"
+              rel="noreferrer"
+              class="bg-white sm:w-auto border sm:ml-3 sm:text-sm px-4 border-gray-300 rounded-md font-medium justify-center focus:ring-indigo-500 hover:bg-gray-50 focus:ring-offset-2 text-gray-700 text-base focus:outline-none w-full py-2 focus:ring-2 sm:mt-0 inline-flex mt-3 shadow-sm"
+            >
+              This is link e31569d2-c042-4a42-9da9-a46ece2134dd
+            </a>
+            <ul class="space-y-6">
+              <li class="text-warm-gray-400 xl:text-center text-base">
+                <ul
+                  class="absolute -top-px h-px inset-0 mx-auto sm:top-0 max-w-7xl sm:px-6 lg:px-8"
+                ></ul>
+                <ol
+                  class="hover:bg-gray-700 font-medium text-sm text-gray-300 rounded-md hover:text-white py-2 px-3"
+                ></ol>
+              </li>
+              <li class="sm:mt-4 sm:space-y-4 mt-6 space-y-6">
+                <img
+                  class="flex-shrink-0 items-center px-4 flex"
+                  alt="Profile picture of user 6b992e73-67d2-4469-ab46-b196ca22e642"
+                  src="https://example.org/pictures/88e9f675-fac9-4538-9a9b-72bdfd8cbee3"
+                />
+              </li>
+            </ul>
+            <a href="#" rel="noreferrer" class="text-gray-900 font-medium">
+              This is link 3112ecfe-06fb-43cb-83cb-049a4b05990d
+            </a>
+          </li>
+          <li
+            class="focus:border-indigo-500 w-full border-gray-300 min-w-0 rounded-r-md sm:text-sm focus:ring-indigo-500 block flex-grow rounded-none"
+          >
+            <ol class="lg:gap-x-6 xl:gap-x-8 lg:grid lg:grid-cols-2">
+              <li class="h-full flex-col flex bg-white overflow-y-scroll shadow-xl">
+                <ul class="border-0 py-3 block resize-none w-full focus:ring-0 sm:text-sm"></ul>
+                <ol class="text-gray-400"></ol>
+              </li>
+              <li
+                class="focus:outline-none focus:ring-offset-2 bg-white focus:ring-indigo-500 rounded-full flex focus:ring-2"
+              >
+                <ol class="border-indigo-300 border-opacity-25 mt-6 border-t pt-10"></ol>
+              </li>
+              <li class="h-6 w-6">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="hover:text-gray-600 text-sm text-gray-500"
+                >
+                  This is link 61272592-5f72-4204-a3d1-b257e61c1d77
+                </a>
+              </li>
+              <li class="lg:block hidden text-sm hover:text-gray-800 font-medium text-gray-700">
+                <a href="#" target="_blank" class="flex justify-center h-16 flex-col">
+                  This is link 44ab59e5-99e6-4a33-a73c-72b007d027b9
+                </a>
+                <ul class="text-sm text-gray-500"></ul>
+              </li>
+            </ol>
+            <img
+              class="text-gray-500"
+              alt="Profile picture of user a466ab58-08a4-44a3-8cbd-1fcb49ba671f"
+              src="https://example.org/pictures/d26e0e49-9884-4799-a567-e2ad4ba4b08d"
+            />
+          </li>
+        </ol>
+      </li>
+      <li class="text-center">
+        <a
+          href="#"
+          class="md:col-start-2 col-span-1 lg:col-span-1 flex md:col-span-2 justify-center"
+        >
+          This is link 5e12c8d8-de07-49e8-a0bb-5488dff1fd0c
+        </a>
+        <ul class="items-center ml-6 flex">
+          <li class="sm:ml-32 mt-10 sm:pl-6">
+            <ol class="flow-root">
+              <li class="rounded-md py-2 cursor-default select-none px-3 group flex items-center">
+                <ul
+                  class="shadow-lg divide-gray-100 w-36 ring-1 ring-opacity-5 divide-y bg-white overflow-hidden right-0 rounded-md z-10 mt-3 focus:outline-none origin-top-right ring-black absolute"
+                ></ul>
+                <img
+                  class="flex items-center"
+                  alt="Profile picture of user 714766b6-666f-440b-8726-e0d849a87542"
+                  src="https://example.org/pictures/122f7a15-34df-4c13-bb71-84424880a07a"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="sm:w-full object-cover sm:h-full object-center sm:inset-0 sm:absolute group-hover:opacity-75"
+                >
+                  This is link acf7947f-2f13-4888-a4b9-9d765d8fb943
+                </a>
+                <ul class="bg-gray-50"></ul>
+              </li>
+              <li class="pt-6 justify-between border-gray-200 border-t items-center flex">
+                <ol class="fixed inset-0 bg-opacity-25 bg-black"></ol>
+                <ul
+                  class="ring-black ring-1 ring-opacity-5 bg-white rounded-lg shadow-lg overflow-hidden"
+                ></ul>
+                <a href="#" target="_blank" class="sr-only">
+                  This is link 6151a20a-c0eb-4a42-9c93-7e7ce5cfa44c
+                </a>
+              </li>
+              <li class="flex md:mt-0 md:ml-4 mt-4 flex-shrink-0">
+                <ul
+                  class="opacity-50 inset-x-0 bg-gradient-to-t absolute bottom-0 from-black h-36"
+                ></ul>
+              </li>
+              <li class="sr-only">
+                <ol class="items-center flex justify-between"></ol>
+                <img
+                  class="w-6 h-6"
+                  alt="Profile picture of user 7b57f4a5-5a85-447c-9784-51814154ee3a"
+                  src="https://example.org/pictures/aea23a83-e243-4252-8232-90ae1bce6650"
+                />
+                <img
+                  class="max-w-3xl mt-6 text-lg text-warm-gray-500"
+                  alt="Profile picture of user bb4ff01a-9242-4842-9b4b-ea662a454034"
+                  src="https://example.org/pictures/f56cbd22-e906-4673-9075-fdbf15e2ef4d"
+                />
+              </li>
+              <li
+                class="focus:z-10 hover:bg-gray-100 py-1.5 rounded-bl-lg text-gray-400 bg-gray-50"
+              >
+                <ul class="gap-4 grid-cols-2 grid"></ul>
+                <ul
+                  class="focus:ring-indigo-500 focus:ring-2 focus:outline-none shadow-sm py-2 bg-white border w-full text-sm font-medium focus:ring-offset-gray-100 border-gray-300 text-gray-700 focus:ring-offset-2 inline-flex rounded-md hover:bg-gray-50 px-4 justify-center"
+                ></ul>
+              </li>
+            </ol>
+          </li>
+          <li class="py-1.5 hover:bg-gray-100 focus:z-10 bg-white">
+            <img
+              class="max-w-7xl sm:px-6 lg:px-8 mx-auto px-4"
+              alt="Profile picture of user b63f1c09-2aa9-45a4-94ac-8232c2932746"
+              src="https://example.org/pictures/b945f16a-0ed5-4af5-b810-d7dd72e4cc30"
+            />
+          </li>
+          <li class="text-gray-900 font-medium text-sm">
+            <ol class="border-white space-y-6 border-t pt-6 border-opacity-10 text-sm font-medium">
+              <li class="flex">
+                <img
+                  class="text-gray-500 md:text-xl sm:mt-5 md:mt-5 sm:mx-auto mt-3 text-base lg:mx-0 sm:max-w-xl sm:text-lg"
+                  alt="Profile picture of user 4a144ade-b336-41ff-8bd4-358167c79b06"
+                  src="https://example.org/pictures/c690a945-5368-499c-95a6-f47a3a5cd7c4"
+                />
+                <img
+                  class="w-full flex-auto flex"
+                  alt="Profile picture of user 4c034709-1aba-405d-8c54-049a52f33071"
+                  src="https://example.org/pictures/d917e7b5-76ac-40ec-a296-00b2c9cbc89c"
+                />
+                <ul class="w-4 focus:ring-indigo-500 border-gray-300 text-indigo-600 h-4"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="divide-y divide-gray-200 space-y-8"
+                >
+                  This is link add54c9d-1a22-4899-9b84-44fdf11c9732
+                </a>
+              </li>
+              <li
+                class="bg-gray-200 w-20 overflow-hidden sm:w-40 rounded-lg h-20 flex-shrink-0 sm:h-40"
+              >
+                <img
+                  class="bg-gray-50 hover:bg-gray-100 py-1.5 text-gray-400 focus:z-10"
+                  alt="Profile picture of user 77124f88-e9b8-4e90-a421-1dce4a78a5bf"
+                  src="https://example.org/pictures/5b534b62-c7c8-461d-a27e-7d7d979a4f97"
+                />
+                <ul class="mt-4 ml-4 flex-shrink-0"></ul>
+              </li>
+              <li class="text-gray-500 text-sm font-medium">
+                <a href="#" rel="noreferrer" class="hover:text-gray-800">
+                  This is link d12ab2e5-183a-40a3-aa13-60d8f7291899
+                </a>
+                <ol class="hover:text-indigo-500 text-indigo-600"></ol>
+              </li>
+              <li class="mt-1">
+                <ol class="divide-y divide-gray-200 border-b border-t border-gray-200 mt-4"></ol>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="border-gray-300 h-4 focus:ring-indigo-500 rounded w-4 text-indigo-600"
+                >
+                  This is link ea863977-dbc9-4e6d-bc23-178c91bfcb72
+                </a>
+              </li>
+            </ol>
+            <ol class="mt-3 sm:ml-4 sm:mt-0">
+              <li class="font-medium mt-2 text-gray-500 text-lg order-2 leading-6">
+                <img
+                  class="bg-gray-100"
+                  alt="Profile picture of user 11020721-163a-4e87-a8c5-15ccbbdc3df7"
+                  src="https://example.org/pictures/aa493f4a-a753-42cc-8015-10a5bc3b9db8"
+                />
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="to-cyan-600 pb-24 bg-gradient-to-r from-sky-800"
+                >
+                  This is link 8322313b-485c-4231-9840-4e9b1021c217
+                </a>
+                <ul class="mr-4 flex-shrink-0"></ul>
+              </li>
+              <li class="font-normal text-gray-500">
+                <ol class="relative bg-white"></ol>
+                <a href="#" class="relative"> This is link 4de9ef2a-7abe-46fa-b04e-a347e177f830 </a>
+                <a href="#" target="_blank" class="mr-2 w-5 h-5 -ml-1">
+                  This is link 82711713-cc36-4fcc-8db2-250c8ac97b8b
+                </a>
+                <a href="#" target="_blank" class="flex mt-6 flex-1 items-end">
+                  This is link 3ab84085-10fd-4c40-b285-cc10ec234cfa
+                </a>
+              </li>
+              <li class="flex items-center justify-center">
+                <ul class="w-10 h-10 ring-2 ring-white rounded-full inline-block"></ul>
+                <ol class="relative w-full overflow-x-auto pb-6 -mb-6"></ol>
+                <ul class="inset-0 absolute"></ul>
+              </li>
+              <li class="font-medium text-gray-700 lg:block hidden hover:text-gray-800 text-sm">
+                <a href="#" rel="noreferrer" class="sm:pl-6 sm:ml-40">
+                  This is link da4cdd9f-1a4d-46a3-b6c2-b776a7830065
+                </a>
+              </li>
+            </ol>
+            <img
+              class="group text-base relative sm:text-sm"
+              alt="Profile picture of user e81b4118-9011-41f2-877c-dd5fcf99bf2b"
+              src="https://example.org/pictures/ce07f8af-7fc5-4785-a13c-d16f82b14519"
+            />
+          </li>
+        </ul>
+        <a
+          href="#"
+          target="_blank"
+          class="focus:ring-indigo-500 shadow-sm border-gray-300 block focus:border-indigo-500 w-full rounded-md sm:text-sm"
+        >
+          This is link e755c20c-e44d-4e81-94d2-c73243ebabab
+        </a>
+        <ol class="relative">
+          <li class="gap-x-8 text-sm mt-10 grid gap-y-10 sm:grid-cols-2 grid-cols-1">
+            <a href="#" rel="noreferrer" class="py-1">
+              This is link 667e2789-3fb1-4fdf-8788-c419d5abc379
+            </a>
+            <ul
+              class="-top-32 sm:top-6 sm:translate-x-0 -translate-x-1/2 left-1/2 transform absolute"
+            >
+              <li
+                class="text-sm text-right text-gray-900 border-b px-6 bg-gray-50 py-3 md:table-cell hidden border-gray-200 font-semibold"
+              >
+                <img
+                  class="md:grid p-4  relative md:pr-6 focus:outline-none md:grid-cols-3 : flex flex-col '' 'rounded-bl-md }} md:pl-4 {{ ? border rounded-br-md' cursor-pointer loop.last"
+                  alt="Profile picture of user 54a7ee7d-aa53-42b9-bb01-1ad2887ebe20"
+                  src="https://example.org/pictures/1061dd5e-f46a-4d55-9577-bb393f446a5e"
+                />
+              </li>
+              <li class="sr-only">
+                <img
+                  class="mx-auto bg-blue-600 lg:bg-transparent lg:px-8 max-w-7xl"
+                  alt="Profile picture of user dac117dd-27a9-4d76-b732-ee4d3962f34b"
+                  src="https://example.org/pictures/208eebec-85e2-4b2b-9029-eac6735365b4"
+                />
+                <a href="#" class="flex items-center space-x-4">
+                  This is link afed8551-69dc-46a9-b63b-a0af97d284f2
+                </a>
+              </li>
+              <li class="items-center flex">
+                <a href="#" target="_blank" class="relative pl-4 pr-3 sm:pl-6 text-sm py-4">
+                  This is link 0f50e297-b4f6-4153-bdee-82bd25034352
+                </a>
+                <ul class="flex-shrink-0 h-5 w-5"></ul>
+                <ul class="justify-between flex"></ul>
+              </li>
+            </ul>
+            <img
+              class="max-w-7xl lg:py-16 sm:px-6 px-4 py-12 lg:px-8 mx-auto"
+              alt="Profile picture of user f23c1788-07e0-4df6-beee-4092da65e595"
+              src="https://example.org/pictures/54caa59e-4122-4a0c-8146-96414f10772c"
+            />
+          </li>
+          <li class="hover:text-white hover:bg-gray-700 text-gray-300">
+            <ol class="font-medium text-gray-900">
+              <li class="mt-10">
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="items-center mx-auto w-7 flex justify-center h-7 rounded-full"
+                >
+                  This is link 9c08b596-4251-4d99-8613-922a15a8871c
+                </a>
+                <ol
+                  class="relative items-center border font-medium py-2 border-gray-300 text-sm inline-flex bg-white px-4 text-gray-700"
+                ></ol>
+                <ul
+                  class="flex sm:absolute px-2 justify-center sm:inset-0 flex-1 items-center z-0 relative"
+                ></ul>
+                <ul class="pt-6 bg-gray-900"></ul>
+              </li>
+              <li class="truncate text-sm font-medium text-indigo-600">
+                <a
+                  href="#"
+                  class="focus:ring-0 font-medium focus:border-transparent bg-none focus:outline-none pl-2 text-gray-700 rounded-md items-center flex text-sm group-hover:text-gray-800 pr-5 border-transparent py-0.5"
+                >
+                  This is link a0532a37-8356-456a-be7c-09457e9ba21e
+                </a>
+                <ul class="ml-3"></ul>
+                <img
+                  class="flex-shrink-0 w-5 mr-1.5 h-5 text-gray-400"
+                  alt="Profile picture of user 5d3b8abf-519c-4ef0-ae53-9fe4f643b15b"
+                  src="https://example.org/pictures/a5ebbed9-9fe0-4255-95c2-c8ae381a6661"
+                />
+                <img
+                  class="items-center -mr-2 flex md:hidden"
+                  alt="Profile picture of user f3fb23bc-7690-485a-a4e2-efe340aa4b66"
+                  src="https://example.org/pictures/b7b793f9-7e56-4fc1-9370-595e9f76f4fd"
+                />
+              </li>
+              <li class="font-medium text-lg text-gray-900">
+                <ol class="flex w-7 items-center rounded-full justify-center mx-auto h-7"></ol>
+              </li>
+              <li class="flex overflow-x-auto">
+                <ul class="h-5 w-5"></ul>
+                <a href="#" class="sm:flex sm:space-x-5">
+                  This is link c8a09fb1-7da7-4801-bb0c-f9de53ff0c8c
+                </a>
+                <ul class="font-medium text-white text-base"></ul>
+              </li>
+              <li class="hover:text-gray-600 text-gray-500">
+                <a href="#" rel="noreferrer" class="ring-2 bg-white shadow-md ring-indigo-700">
+                  This is link 08fc163c-65be-49e9-b1e4-06dac1e34df4
+                </a>
+              </li>
+            </ol>
+            <ol class="mt-10 text-gray-500 space-y-6 text-sm font-medium">
+              <li class="rounded-full bg-gray-100 w-12 inline-block h-12 overflow-hidden">
+                <ul class="sr-only"></ul>
+                <a href="#" rel="noreferrer" class="sr-only">
+                  This is link 69ac5158-ecea-4c3b-81d8-dd94c5fc96a2
+                </a>
+                <a href="#" class="bg-white shadow h-full rounded-lg w-full">
+                  This is link fa8705cc-4d9b-495c-b29f-981df3e49e82
+                </a>
+              </li>
+              <li class="text-gray-500 hover:text-gray-900 text-base">
+                <a href="#" rel="noreferrer" class="border-t mt-12 border-warm-gray-200 pt-8">
+                  This is link 02e44682-1c6d-475f-8f65-d475eb8bd621
+                </a>
+                <ol class="text-xs group-hover:text-gray-700 font-medium text-gray-500"></ol>
+                <ol class="flex mx-auto items-center justify-center h-7 rounded-full w-7"></ol>
+                <a
+                  href="#"
+                  class="ring-opacity-5 bg-white ring-1 rounded-lg shadow-lg ring-black divide-gray-50 divide-y-2"
+                >
+                  This is link 9f889efb-fd67-426c-bcf6-1e2caf72365a
+                </a>
+              </li>
+              <li class="sr-only">
+                <ul
+                  class="bg-white justify-center w-8 rounded-full items-center flex border-indigo-600 relative h-8 border-2 z-10"
+                ></ul>
+                <ol class="h-8 w-auto"></ol>
+                <img
+                  class="tracking-tight text-4xl font-bold mt-4 text-gray-900"
+                  alt="Profile picture of user 955ceb8d-4413-4d21-b0ad-9f1d1119a040"
+                  src="https://example.org/pictures/3395f130-e4a6-46ec-872a-504b94e8cf49"
+                />
+              </li>
+              <li class="font-medium block mt-6 text-gray-900">
+                <img
+                  class="flex"
+                  alt="Profile picture of user 4b1088d7-56c9-4a1f-a279-c31432ae506b"
+                  src="https://example.org/pictures/5fa024eb-4a21-41a9-9b49-9931cbe3ba88"
+                />
+                <img
+                  class="relative"
+                  alt="Profile picture of user ead56924-fc42-4d3f-90cb-e6b37c08d7c0"
+                  src="https://example.org/pictures/ef4e381d-31b4-4519-ba81-378fd7629f9d"
+                />
+                <ul class="w-1/2 bg-gray-50"></ul>
+                <ul class="bg-white"></ul>
+              </li>
+              <li class="bg-white">
+                <img
+                  class="h-8 w-8"
+                  alt="Profile picture of user 00993433-675e-44fb-8737-23b8e90e23fc"
+                  src="https://example.org/pictures/4f3152b8-2d10-4df9-99ee-01c3515948b7"
+                />
+                <ol class="ml-3"></ol>
+                <a href="#" rel="noreferrer" class="items-center flex">
+                  This is link 9db6e38b-7c76-4e1b-b85e-c31c920caf6b
+                </a>
+                <ul
+                  class="grid gap-x-6 w-full sm:grid-cols-12 items-start grid-cols-1 gap-y-8 lg:gap-x-8"
+                ></ul>
+              </li>
+            </ol>
+            <a href="#" rel="noreferrer" class="py-2 text-sm px-4 block">
+              This is link b9ff203e-2500-4f03-acf7-f3c32a7d1bed
+            </a>
+          </li>
+          <li class="space-y-4 mt-4">
+            <a href="#" target="_blank" class="text-gray-500 mt-2 text-sm">
+              This is link 2847a322-1696-4e5a-8ee2-c3fefa89ac62
+            </a>
+            <ul class="flex bg-white justify-center px-8 py-12">
+              <li class="mt-3 sm:flex-shrink-0 sm:ml-3 rounded-md sm:mt-0">
+                <ol class="text-gray-500 text-sm mt-1"></ol>
+                <img
+                  class="absolute justify-center items-center flex-shrink-0 flex"
+                  alt="Profile picture of user eed6b496-b166-457a-ac18-07725c1855a5"
+                  src="https://example.org/pictures/904d0cd9-031a-4358-b0eb-a8890a28f97c"
+                />
+              </li>
+              <li class="text-gray-900">
+                <ol class="sr-only"></ol>
+                <ol class="block font-medium text-sm sm:mt-px text-gray-700 sm:pt-2"></ol>
+              </li>
+            </ul>
+            <img
+              class="text-orange-600 hover:bg-white bg-gray-50"
+              alt="Profile picture of user dcc52b6f-539a-4bf5-b4b0-05e7e170b9c6"
+              src="https://example.org/pictures/72b743a4-c90a-4765-85ed-de3f1a976a00"
+            />
+            <a href="#" rel="noreferrer" class="flex-wrap justify-between flex items-start">
+              This is link 255efefc-d9db-4ec7-ad3e-8ff3d8863baf
+            </a>
+          </li>
+          <li class="sr-only">
+            <ul class="text-gray-500 text-sm">
+              <li class="bg-gray-900">
+                <ol class="font-medium text-base text-gray-200"></ol>
+                <a href="#" rel="noreferrer" class="flex py-4 relative items-start">
+                  This is link 49d14466-5db8-4bd3-a46f-65d5f4b4bc19
+                </a>
+                <img
+                  class="py-1.5 focus:z-10 hover:bg-gray-100 bg-white"
+                  alt="Profile picture of user ec9f4c38-5ed7-4b90-bc7d-0768193637da"
+                  src="https://example.org/pictures/2ee8fa46-b19f-4b68-8748-e202cf8891c4"
+                />
+                <img
+                  class="text-sm mt-4 text-gray-700"
+                  alt="Profile picture of user 10317fa5-ccb1-46b1-8804-bb43db1b1da7"
+                  src="https://example.org/pictures/928b51c8-fdd1-4915-bb58-aa8473424c69"
+                />
+              </li>
+              <li class="rounded-full mx-auto justify-center h-7 items-center w-7 flex">
+                <img
+                  class="font-medium text-gray-900"
+                  alt="Profile picture of user 8c5646ed-5d49-4fc0-895d-27f86fd2096e"
+                  src="https://example.org/pictures/5da59810-7c46-42ae-acfd-4a8c64303edd"
+                />
+                <ul class="ml-4 flex-auto"></ul>
+                <a href="#" target="_blank" class="focus:outline-none cursor-pointer">
+                  This is link 5baabf3f-d1b7-415c-ac01-b1d4382c2323
+                </a>
+                <ol class="mx-auto lg:max-w-7xl sm:pt-32 sm:px-6 px-4 max-w-xl pt-24 lg:px-8"></ol>
+              </li>
+              <li class="px-4 flex-1 mt-6 sm:px-6 relative">
+                <a href="#" target="_blank" class="overflow-y-auto bg-white h-full p-8">
+                  This is link 3ba26c0f-b82c-4fac-bf0e-e50433e37381
+                </a>
+                <img
+                  class="h-4 focus:ring-indigo-500 absolute border-gray-300 w-4 sm:left-6 text-indigo-600 -mt-2 top-1/2 left-4 rounded"
+                  alt="Profile picture of user d1577424-995f-48bd-902a-9989e804dc51"
+                  src="https://example.org/pictures/3f36b56f-6ff0-4eb4-920a-26fbb009f9f3"
+                />
+              </li>
+              <li
+                class="focus:ring-indigo-500 shadow-sm rounded-md px-4 border-transparent font-medium text-sm focus:ring-2 border focus:ring-offset-2 bg-indigo-600 ml-6 text-white hover:bg-indigo-700 py-2 focus:outline-none"
+              >
+                <ul
+                  class="items-center sm:mt-0 capitalize mt-3 text-sm sm:mr-6 flex text-gray-500 font-medium"
+                ></ul>
+                <ol
+                  class="shadow duration-200 ring-0 transition bg-white pointer-events-none w-5 inline-block ease-in-out transform rounded-full h-5"
+                ></ol>
+                <ul
+                  class="z-20 -ml-14 sticky text-gray-400 text-right pr-2 w-14 leading-5 -mt-2.5 text-xs left-0"
+                ></ul>
+              </li>
+            </ul>
+            <ol class="mt-4 text-gray-900 block font-medium">
+              <li class="rounded-lg sm:flex ml-6 p-0.5 hidden bg-gray-100 items-center">
+                <a href="#" rel="noreferrer" class="text-gray-500">
+                  This is link a46cad34-847e-40a0-9195-05583f92b01e
+                </a>
+                <ol class="sm:grid-cols-2 sm:gap-x-8 mt-9 grid gap-y-6 grid-cols-1"></ol>
+                <ol class="text-gray-500"></ol>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="text-gray-300 font-medium hover:text-white text-sm"
+                >
+                  This is link 6206370b-c3aa-433d-b6f2-1cae5a31faf4
+                </a>
+              </li>
+              <li class="text-gray-900 font-semibold text-2xl">
+                <a href="#" class="h-8 w-auto">
+                  This is link d5c6b456-861c-4ba4-a6ed-2d35cc1d0e08
+                </a>
+              </li>
+              <li class="hidden lg:flex lg:ml-8">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="mr-2 group-hover:text-gray-500 text-gray-400 flex-none h-5 w-5"
+                >
+                  This is link a30c06d7-4bd1-44a2-88f7-3add45a02c14
+                </a>
+                <ol class="sr-only"></ol>
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user ed6ce831-a5b7-491f-b2c3-a884cc28753d"
+                  src="https://example.org/pictures/e0f962f6-255d-4f36-bc53-54e6c9d8e433"
+                />
+                <ol class="font-medium text-gray-700"></ol>
+              </li>
+              <li
+                class="inline-flex justify-center font-medium bg-cyan-50 text-cyan-700 text-base py-3 px-5 sm:w-auto border items-center hover:bg-cyan-100 w-full rounded-md mt-8 border-transparent"
+              >
+                <img
+                  class="pt-10 border-gray-200 border-t mt-10"
+                  alt="Profile picture of user 9416bf59-9ba2-48d8-a813-504d37fa6858"
+                  src="https://example.org/pictures/8593b222-70f1-4ee1-97dc-40022ec84524"
+                />
+                <ul class="flex flex-col-reverse"></ul>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="font-bold text-2xl order-1 sm:text-3xl text-indigo-600 sm:tracking-tight"
+                >
+                  This is link 040a366c-481a-41ac-82d3-03165a369741
+                </a>
+              </li>
+              <li class="sr-only">
+                <ul class="font-sans"></ul>
+                <img
+                  class="sm:col-span-3 col-span-4"
+                  alt="Profile picture of user 9322b0dd-e104-4bc7-9dd3-15bc70b45048"
+                  src="https://example.org/pictures/2db63eb4-4dcf-4e78-b9b9-00ae64c2c7a2"
+                />
+              </li>
+            </ol>
+            <ol class="mt-6 flex-col flex sm:ml-3 sm:flex-row sm:flex-wrap sm:mt-1">
+              <li class="hover:text-gray-800 font-medium text-sm text-gray-700">
+                <ol
+                  class="flex border-transparent font-medium px-8 py-3 hover:bg-gray-50 md:px-10 w-full md:text-lg md:py-4 rounded-md bg-white border text-base text-indigo-600 justify-center items-center"
+                ></ol>
+                <ul class="align-top px-6 h-full py-8"></ul>
+                <a href="#" class="aspect-w-2 col-span-2">
+                  This is link ca7eaa25-5c91-47f4-9e12-7333c78ee925
+                </a>
+                <ol class="mb-1 bg-gray-400 w-1.5 rounded-full mx-0.5 h-1.5"></ol>
+              </li>
+              <li
+                class="sm:p-6 px-4 pointer-events-none items-end fixed flex py-6 inset-0 sm:items-start"
+              >
+                <ul
+                  class="duration-200 inset-x-0 sm:mt-5 bottom-0 ease-out absolute sm:transform h-0.5 sm:translate-y-px transition-colors"
+                ></ul>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="tracking-tight text-gray-900 font-bold text-3xl"
+                >
+                  This is link 671e037a-1069-4ac2-9d50-417c13f8b460
+                </a>
+                <ol class="sr-only"></ol>
+              </li>
+              <li class="pb-6 px-5 pt-5">
+                <ul class="sr-only"></ul>
+                <img
+                  class="max-w-xl text-gray-500 text-sm"
+                  alt="Profile picture of user 5cb66e26-4b3d-4b4a-9f8b-6f0f6b8d6f61"
+                  src="https://example.org/pictures/630e3a82-6333-4a59-88f8-7a23fd2100d3"
+                />
+              </li>
+              <li class="font-medium text-base text-gray-900">
+                <ul class="space-y-4"></ul>
+                <ul class="px-5 pb-6 pt-5"></ul>
+                <img
+                  class="flex justify-between py-3 px-4 border-gray-200 border-t bg-white items-center"
+                  alt="Profile picture of user c8f4ff5d-d583-4cd0-a7c6-c3a7d3f3a3b1"
+                  src="https://example.org/pictures/2b762f53-1880-4069-9221-97e6d563a3dc"
+                />
+              </li>
+              <li class="text-gray-900 text-sm block font-medium">
+                <ul class="font-medium text-warm-gray-900 block text-sm"></ul>
+                <ul class="space-y-1"></ul>
+                <img
+                  class="truncate"
+                  alt="Profile picture of user 4c63261b-00fd-41d7-8021-158e30d5439e"
+                  src="https://example.org/pictures/134a415c-e464-4877-bf49-1cd4f602b59d"
+                />
+                <ol class="font-medium text-gray-500 text-base hover:text-gray-900"></ol>
+              </li>
+            </ol>
+          </li>
+        </ol>
+      </li>
+    </ul>
+  </nav>
+  <ul class="flex p-8 items-center justify-center">
+    <li class="overflow-hidden flex -space-x-1">
+      <ul class="hidden sm:block text-gray-500 text-sm mt-2">
+        <li
+          class="bg-white focus:outline-none rounded-full text-gray-400 focus:ring-2 focus:ring-offset-2 flex-shrink-0 p-1 hover:text-gray-500 focus:ring-indigo-500"
+        >
+          <a href="#" target="_blank" class="object-cover object-center">
+            This is link 9ac03f53-613b-46e3-a58e-17e997a7c57d
+          </a>
+        </li>
+        <li class="text-sm font-medium text-gray-700 sm:pt-2 sm:mt-px block">
+          <ol class="h-8 w-auto">
+            <li class="flex-shrink-0 w-5 text-gray-300 h-5 ml-2">
+              <ol class="focus:z-10 py-1.5 hover:bg-gray-100 bg-white">
+                <li class="space-x-2 flex">This is item 9e4983b5-1f84-48d6-97e9-1a7734a1dd8b</li>
+                <li
+                  class="h-8 justify-center font-semibold text-base mt-3 bg-gray-900 flex items-center rounded-full w-8 text-white"
+                >
+                  This is item 60d3bf2c-43b9-45a6-9cf7-765a9fea1b2e
+                </li>
+              </ol>
+            </li>
+            <li class="sr-only">
+              <ol
+                class="focus:outline-none rounded-full text-sm leading-4 text-white items-center px-3.5 focus:ring-indigo-500 py-2 font-medium hover:bg-indigo-700 focus:ring-2 border bg-indigo-600 border-transparent focus:ring-offset-2 inline-flex shadow-sm"
+              >
+                <li class="justify-center w-7 mx-auto rounded-full h-7 items-center flex">
+                  This is item 088c2ee8-74e7-4a5f-aaa0-c19337508d26
+                </li>
+                <li
+                  class="block rounded-lg p-4 cursor-pointer border focus:outline-none border-gray-300 relative"
+                >
+                  This is item d45a6e63-f228-4018-836a-06bacb2ac57f
+                </li>
+                <li class="mt-12">This is item 5bc3e2da-e3ee-4b3d-8f32-8a1be7383414</li>
+                <li
+                  class="flex focus:outline-none -m-0.5 cursor-pointer p-0.5 items-center relative justify-center rounded-full"
+                >
+                  This is item 6f837b34-bb44-481f-8e35-eabba2f667df
+                </li>
+                <li class="text-blue-gray-900 font-medium text-sm block">
+                  This is item 9a86007b-8db9-4ee1-a97d-97fafbf55feb
+                </li>
+              </ol>
+              <ol class="mt-1">
+                <li class="sm:col-span-2 mt-1 text-gray-900 sm:mt-0 text-sm">
+                  This is item 5dd7b28b-bda1-47bd-ab54-92aff6fbc5b3
+                </li>
+                <li class="space-y-6 mt-6">This is item 61544ceb-d711-432a-95fd-d46a664b4558</li>
+                <li class="md:flex border-t md:justify-between border-gray-200 py-12 text-center">
+                  This is item feabaa44-dd8e-45d5-b541-40f55b5afc53
+                </li>
+                <li class="hover:text-gray-800">
+                  This is item 8bfa9f2f-d95a-4b19-878b-18cb76c72a29
+                </li>
+                <li class="lg:justify-end px-2 flex justify-center lg:ml-6 items-center flex-1">
+                  This is item 3e8baf7b-662d-4d32-99fb-38153dc6af37
+                </li>
+              </ol>
+              <img
+                class="h-full object-center object-cover w-full"
+                alt="Profile picture of user fbe73822-a8f0-4a47-9ab7-48cd1da175ba"
+                src="https://example.org/pictures/4115fecb-4550-4647-8584-a6696f221469"
+              />
+              <ul class="font-medium text-gray-900 text-lg">
+                <li class="w-6 h-6">This is item 0e6fa430-47f5-4648-bba7-797531e39c91</li>
+                <li class="relative mt-6">This is item 00313385-2c62-41be-b8ed-156f61cae6bf</li>
+                <li class="w-5 h-5 group-hover:text-gray-500 ml-2">
+                  This is item 57805b60-dda7-41c6-ab9c-78cc8dc1251b
+                </li>
+                <li class="px-4 pt-5 pb-2 flex">
+                  This is item afaf11ef-f44d-4b56-9cd1-56afda4ae92b
+                </li>
+                <li class="bg-white">This is item c49a193b-1510-4737-87f9-29fc1d5af89d</li>
+              </ul>
+            </li>
+          </ol>
+          <ol class="px-3 text-sm text-left text-gray-900 font-semibold py-3.5">
+            <li class="text-xl max-w-prose mt-5 mx-auto text-gray-500">
+              <a href="#" target="_blank" rel="noreferrer" class="mt-4 text-base text-gray-500">
+                This is link 8ffc51b6-58ef-4058-9019-78c09a9f6b88
+              </a>
+              <ol class="divide-gray-200 divide-y">
+                <li class="pt-8 sm:gap-x-6 grid gap-y-6 grid-cols-1 sm:grid-cols-6">
+                  This is item 85344568-0353-48ed-abad-af440078cdcd
+                </li>
+                <li class="sm:not-sr-only sr-only">
+                  This is item a7dc4825-9c46-44ba-8131-f1989b3439a0
+                </li>
+                <li
+                  class="border-2 block w-full text-gray-200 border-gray-300 h-full border-dashed rounded"
+                >
+                  This is item 5a515481-6be9-4d5c-9a3c-0bcd0ddf6055
+                </li>
+              </ol>
+              <img
+                class="-ml-1 items-center font-medium text-sm text-blue-gray-900 space-x-3 inline-flex"
+                alt="Profile picture of user dd35e013-7b25-48c7-9b04-685b709c7ea0"
+                src="https://example.org/pictures/3539dc43-9b81-47c3-ae03-c9c5e8a5f7d3"
+              />
+            </li>
+            <li class="-mr-14 p-1 right-0 top-1 absolute">
+              <img
+                class="text-gray-900 text-sm font-medium"
+                alt="Profile picture of user 579b7406-6673-4397-b4fb-c40802c717c7"
+                src="https://example.org/pictures/27b452ba-ecb2-440a-8b49-390c96db7a2c"
+              />
+              <ul class="sr-only">
+                <li class="w-auto h-8">This is item 4f34d387-e409-4807-9689-2a82e9cba535</li>
+                <li class="mt-3 sm:mt-5 text-center">
+                  This is item 375c8d24-ed33-46fd-99e9-911262c54702
+                </li>
+                <li class="flex items-center -m-2 p-2">
+                  This is item e48ab701-a4ca-4711-9ecc-680da862e5ca
+                </li>
+                <li class="bg-gray-50">This is item 0d3c4cba-291f-4cd9-9920-a486b916ac10</li>
+                <li class="border-gray-200 px-4 border-t space-y-6 py-6">
+                  This is item a73e04c2-efdf-48dc-b363-69e9f846d2c8
+                </li>
+              </ul>
+              <ol class="block text-base ml-3 font-medium text-gray-900">
+                <li class="mt-2 text-gray-700 text-sm">
+                  This is item 6b2b8da8-25d0-4a19-970d-3ea6fd47a6ac
+                </li>
+                <li class="mt-1 text-sm text-gray-900 font-medium">
+                  This is item ea53a8a7-3e1d-4023-a691-05e7db34ae7f
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="font-medium hover:text-indigo-500 text-indigo-600"
+              >
+                This is link f79585de-1885-4b5f-8e0a-36b8e1f0b8d5
+              </a>
+            </li>
+            <li class="text-gray-800 font-medium text-base">
+              <a
+                href="#"
+                class="max-w-2xl lg:col-span-4 lg:max-w-none lg:mt-0 mx-auto w-full mt-16"
+              >
+                This is link d4f53bd7-e2ed-420b-bee4-109bfd300026
+              </a>
+              <ol class="sm:pr-6 relative py-3.5 pr-4 pl-3">
+                <li class="ml-3">This is item 1951d8e0-2fab-4fa5-a6f4-fc721832afd0</li>
+                <li class="h-6 w-6">This is item a7ce2888-ab37-4e2f-9fa0-ac438c8ada47</li>
+                <li class="-mt-96 relative sm:mt-0">
+                  This is item 7956cbac-e34a-4a4d-9acc-d3a33880c783
+                </li>
+                <li class="sm:grid-cols-2 sm:grid sm:gap-x-6 mt-4 border-t pt-6 border-gray-200">
+                  This is item 7c26624f-67ad-4c30-934f-dc0db39468d6
+                </li>
+                <li class="w-full md:ml-0 flex">
+                  This is item 7a031a5e-c052-47cf-bab4-1bca8691f1fc
+                </li>
+              </ol>
+              <img
+                class="border-transparent border py-2 hover:bg-indigo-50 text-base font-medium rounded-md px-4 inline-block bg-white text-indigo-600"
+                alt="Profile picture of user 0b2b4781-f8b8-4b48-b892-c56d02021517"
+                src="https://example.org/pictures/f5c47e80-d21b-4cca-8b5e-5e24d2ad5c83"
+              />
+            </li>
+            <li class="group inline-flex">
+              <a href="#" target="_blank" rel="noreferrer" class="text-lg text-gray-500 mt-6">
+                This is link 34cc77e8-8326-4b2f-9412-b0934d184b46
+              </a>
+            </li>
+          </ol>
+          <ul class="font-medium sm:justify-between sm:flex text-gray-900">
+            <li class="font-medium hover:text-indigo-500 text-indigo-600 text-sm">
+              <img
+                class="text-gray-500 mt-3"
+                alt="Profile picture of user f376931a-64a6-4900-aa13-2329d76ee3be"
+                src="https://example.org/pictures/362bd69c-40d7-42f4-82b1-325e6d1a01be"
+              />
+              <ol class="w-auto sm:h-10 h-8">
+                <li
+                  class="border-gray-200 -inset-px pointer-events-none rounded-md border-2 absolute"
+                >
+                  This is item 78d8926a-1fc2-4ce9-a86e-3d2e0f46c60b
+                </li>
+                <li class="min-w-0 flex-1">This is item 1d4fede4-0dee-44fa-8356-016edd161444</li>
+              </ol>
+              <img
+                class="rounded-full h-8 w-8"
+                alt="Profile picture of user dbf01d9b-ace7-4bb3-8978-319c171cebce"
+                src="https://example.org/pictures/b68795dc-cc13-4719-acab-414761f3d0a1"
+              />
+              <a href="#" rel="noreferrer" class="text-gray-500 mt-1 text-sm">
+                This is link e73509c8-db10-40c4-ba1e-df74de2f5cab
+              </a>
+            </li>
+            <li class="mt-6">
+              <ul class="pt-2 pb-3 space-y-1 px-2">
+                <li class="ml-3 text-sm font-medium">
+                  This is item d31ff027-03f0-497d-a30c-315428bdc6bc
+                </li>
+                <li
+                  class="2xl:grid-cols-4 px-4 xl:max-w-none max-w-3xl grid grid-cols-1 gap-y-16 sm:px-6 py-16 xl:px-8 mx-auto sm:grid-cols-2 xl:grid-cols-3 gap-x-8"
+                >
+                  This is item deb350ce-46eb-43f4-b122-956f30745787
+                </li>
+                <li class="font-medium text-gray-700">
+                  This is item 7c8349cc-0649-49e0-9774-d73549755985
+                </li>
+              </ul>
+              <img
+                class="flex-shrink-0"
+                alt="Profile picture of user cedd5d3d-dbe1-475c-b16e-b94de72a15e1"
+                src="https://example.org/pictures/8dccb586-0b5f-43f2-a23e-8d1efe983b84"
+              />
+              <img
+                class="border-gray-200 border-t"
+                alt="Profile picture of user 4caa2809-afe9-4813-a807-05463da2db40"
+                src="https://example.org/pictures/639fa62b-e8dc-4f65-a738-b1339104683c"
+              />
+              <ol
+                class="mt-12 md:mt-0 md:col-start-3 lg:col-start-9 md:row-start-2 lg:col-span-4 lg:row-start-1 md:col-span-8"
+              >
+                <li
+                  class="rounded-md absolute ring-1 w-40 ring-black origin-top-left left-0 ring-opacity-5 mt-2 bg-white z-10 shadow-2xl focus:outline-none"
+                >
+                  This is item 557e8ceb-250d-467a-bf94-cef82244c6ad
+                </li>
+                <li class="relative bg-white">This is item 468308ac-f810-4164-8fa7-e991871dbf3b</li>
+              </ol>
+            </li>
+            <li class="w-6 h-6">
+              <ol class="block">
+                <li class="text-cyan-700 font-medium hover:text-cyan-900">
+                  This is item d8b33590-85cf-4617-a513-929b65b99bad
+                </li>
+                <li class="flex h-0 flex-1">This is item aefafc6e-bb35-4ec7-b65c-c1a395deb29c</li>
+                <li
+                  class="overflow-hidden transform max-w-xl divide-gray-100 ring-black rounded-xl shadow-2xl ring-opacity-5 ring-1 divide-y mx-auto transition-all bg-white"
+                >
+                  This is item ff99d33c-bbd1-4da4-8e30-5639b2c56d1b
+                </li>
+                <li class="flex sm:flex-wrap mt-1 sm:space-x-6 flex-col sm:flex-row sm:mt-0">
+                  This is item 96d5db40-0e2f-4896-9e27-d035f1f6b2c1
+                </li>
+              </ol>
+              <ul class="w-12 h-12 text-gray-400 mx-auto">
+                <li class="sm:col-span-2">This is item f2e2ff88-61ee-4509-af55-8d68c8657828</li>
+                <li class="ml-4">This is item 8b3f7c4f-93de-4060-a241-823c7aebd9cb</li>
+                <li class="h-5 flex items-center">
+                  This is item df1d1f46-cb66-4c36-8e1d-9cddd9675cbe
+                </li>
+                <li
+                  class="block shadow-sm rounded-md focus:border-indigo-500 w-full sm:text-sm border-gray-300 focus:ring-indigo-500"
+                >
+                  This is item 0d4cedd3-824e-4d2b-83a7-82315661fbdb
+                </li>
+              </ul>
+              <a href="#" target="_blank" rel="noreferrer" class="relative lg:hidden z-40">
+                This is link 066a80c0-bc0d-445e-bc3a-99de0ecb029d
+              </a>
+              <img
+                class="focus:ring-indigo-500 border-gray-300 block shadow-sm sm:text-sm rounded-md w-full focus:border-indigo-500"
+                alt="Profile picture of user 9d3f9ecf-ee98-48e5-aebf-f68379e8ae56"
+                src="https://example.org/pictures/5b936771-cd05-4382-a54b-73d21e6d595c"
+              />
+            </li>
+            <li class="border-gray-200 py-6 space-y-6 px-4 border-t">
+              <ol class="py-1">
+                <li class="px-2 pb-3 pt-2">This is item 4a0a9ffa-9442-4aa3-9e37-ae7046809a91</li>
+                <li class="sm:pt-14 overflow-hidden pt-32">
+                  This is item 7254e05e-ac98-4bad-99de-d5a7031468f1
+                </li>
+                <li
+                  class="shadow-sm focus:ring-indigo-500 rounded-md block sm:text-sm focus:border-indigo-500 border-gray-300 w-full"
+                >
+                  This is item 3bb45de1-05e4-4691-8976-9c69a1beb854
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <ol class="group-hover:text-gray-500 ml-2 w-5 h-5">
+            <li class="sm:flex">
+              <a
+                href="#"
+                rel="noreferrer"
+                class="border-gray-200 mt-4 sm:space-y-4 space-y-6 pt-6 border-t"
+              >
+                This is link 587d2bda-0e32-4dd3-a9cd-83794864dc12
+              </a>
+              <ol class="w-5 h-5">
+                <li class="text-gray-900 block font-medium mt-4">
+                  This is item b14fcd96-e601-4763-9e1d-094a4f74b7bb
+                </li>
+                <li class="justify-between flex sm:grid sm:grid-cols-2">
+                  This is item d298356d-4f28-4443-a47c-934efbd85d3d
+                </li>
+                <li class="flex flex-shrink-0 items-center">
+                  This is item c9d3fb5c-33ef-4f9d-9a52-e39a2824936a
+                </li>
+                <li class="px-1 flex-1 border-b-2 font-medium whitespace-nowrap text-base py-4">
+                  This is item 2e300ca8-86f6-4209-bf62-4786a81e0d82
+                </li>
+                <li class="min-h-[640px] bg-gray-100 flex">
+                  This is item 2ea08648-bc48-42e0-95ba-bf82a63f3900
+                </li>
+              </ol>
+            </li>
+            <li class="lg:self-center">
+              <ul class="relative">
+                <li class="px-6 text-center py-14 border-gray-100 text-sm border-t sm:px-14">
+                  This is item c1b22c1e-9b70-42bc-9f65-18b3ae69be8a
+                </li>
+                <li class="flex mx-auto max-w-lg">
+                  This is item 0c135656-6af4-4874-bfa9-09931dc9cf09
+                </li>
+                <li class="text-gray-900 font-medium">
+                  This is item fbbf90f7-1d3e-4f14-a7f8-af68cb0f0a35
+                </li>
+                <li
+                  class="rounded border-2 w-full bg-transparent border-dashed border-gray-300 text-gray-200 h-8"
+                >
+                  This is item 37a2b81c-2ac9-4fe6-891f-a408041b4e03
+                </li>
+                <li class="text-sm">This is item 37dd09ae-b285-4c04-aa2c-880ba8b0b7ac</li>
+              </ul>
+              <ul class="text-gray-500">
+                <li class="w-2.5 group-hover:bg-gray-300 h-2.5 bg-transparent rounded-full">
+                  This is item 02bdc507-64e9-4923-bf2e-d84a026c8efb
+                </li>
+                <li class="xl:w-0 xl:flex-1">This is item 71ecf5b8-f97d-43ce-b5de-55b0e9993d74</li>
+                <li class="sm:space-y-4 sm:mt-4 mt-6 space-y-6">
+                  This is item 6f1528c1-daad-47a2-a96f-a2c0a9131437
+                </li>
+                <li class="font-medium text-white text-base">
+                  This is item d2e63a88-7620-4702-897b-bb46e18d7733
+                </li>
+                <li class="block py-2 text-gray-700 text-sm px-4">
+                  This is item fa553380-4da8-4682-9989-13f689af37d0
+                </li>
+              </ul>
+            </li>
+            <li class="text-lg max-w-3xl mt-3 text-blue-gray-500">
+              <ul
+                class="bg-indigo-600 border font-medium justify-center text-sm focus:ring-offset-2 focus:ring-indigo-500 rounded-md py-2 px-4 focus:outline-none text-white inline-flex border-transparent hover:bg-indigo-700 focus:ring-2 shadow-sm ml-4"
+              >
+                <li class="group-hover:text-teal-500 text-teal-500">
+                  This is item 8e493b9c-dd0d-40c1-8d3b-12b5fb0492e6
+                </li>
+                <li class="block p-2 text-gray-500 -m-2">
+                  This is item 5b6af404-baaa-43a8-83d3-b8cf0708190f
+                </li>
+                <li
+                  class="md:grid-cols-12 grid-cols-1 md:grid-flow-col md:gap-x-8 md:gap-y-16 grid md:auto-rows-min"
+                >
+                  This is item e43797bf-9e7d-45ff-a6ba-d4d2a6ecc93a
+                </li>
+              </ul>
+              <ol class="lg:block p-2 hover:text-gray-500 text-gray-400 hidden ml-6">
+                <li
+                  class="mx-auto md:max-w-3xl md:mt-5 sm:text-lg text-base text-gray-500 md:text-xl max-w-md mt-3"
+                >
+                  This is item e6d58d85-7a6b-4ae3-8e88-1ad9397667fd
+                </li>
+                <li class="flex flex-col justify-end">
+                  This is item 3f7c18c2-2b2a-457a-8bda-eaa0bb8a0118
+                </li>
+                <li class="bg-white relative text-gray-900 focus:z-10 hover:bg-gray-100 py-1.5">
+                  This is item 40c15f4a-d766-4021-a868-ff4725c4714c
+                </li>
+              </ol>
+            </li>
+            <li class="px-4 lg:px-8 max-w-7xl mx-auto py-12 sm:px-6">
+              <ul class="text-gray-500">
+                <li class="mx-auto max-w-7xl sm:px-6 lg:px-8 px-4">
+                  This is item eaee1545-2186-45f9-aa6c-3c09c961689d
+                </li>
+                <li class="mt-8">This is item 9b747afd-fc39-4130-b44f-f4a20155e8d3</li>
+                <li class="px-2 space-y-1">This is item f60630fe-8d44-43a9-8036-96557a42519c</li>
+              </ul>
+              <img
+                class="pb-6 pt-5 px-5 space-y-6"
+                alt="Profile picture of user 5c095f64-2637-481f-9752-a145ad716024"
+                src="https://example.org/pictures/46d68bd7-e1f1-4eb3-8573-c26f17ff78c1"
+              />
+              <ul class="flow-root">
+                <li class="flex justify-between py-2 px-4 text-sm">
+                  This is item eed34444-1f71-4aa6-b4e0-25ca0d219cd0
+                </li>
+                <li class="text-gray-200">This is item 6847d3ab-bbd6-46c9-aa2b-cdf82eabad96</li>
+                <li class="xl:h-full h-80 w-full bottom-0 absolute xl:inset-0">
+                  This is item 2cf62214-0a5c-48da-a9e8-b2e9518a85f8
+                </li>
+                <li
+                  class="grid grid-cols-1 lg:gap-y-0 lg:col-span-2 lg:grid-cols-2 lg:gap-x-8 gap-y-10"
+                >
+                  This is item 32e34142-03cc-4e9a-ad68-96c057cda261
+                </li>
+              </ul>
+            </li>
+            <li
+              class="absolute h-36 -translate-x-8 -translate-y-24 w-36 transform top-0 text-indigo-200 opacity-50 left-0"
+            >
+              <ul
+                class="focus:outline-none text-sm border items-center px-4 text-white focus:ring-2 shadow-sm font-medium focus:ring-indigo-500 inline-flex hover:bg-indigo-700 border-transparent rounded-md py-2 focus:ring-offset-2 bg-indigo-600"
+              >
+                <li class="bg-white px-4 py-8">
+                  This is item 8aa2587c-6297-4f12-a94e-96e28ad83a82
+                </li>
+                <li class="max-w-7xl mx-auto py-16 lg:px-8 px-4 sm:px-6">
+                  This is item ed350fb4-1707-4772-a3f6-7b4422169b38
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="w-6 h-6 text-gray-400 mx-auto">
+          <img
+            class="px-4 lg:px-8 sm:px-6 flex-col flex-grow mx-auto max-w-7xl w-full flex"
+            alt="Profile picture of user dd9937bb-ce51-4f50-89b6-ac75fd420369"
+            src="https://example.org/pictures/870afd33-bfdf-40f3-9d68-843e3fbcecbc"
+          />
+          <ol class="bg-black inset-0 fixed bg-opacity-25">
+            <li class="py-14 text-center sm:px-14 text-sm px-6">
+              <img
+                class="bg-gray-100 text-gray-900"
+                alt="Profile picture of user ab302a49-d8e0-4343-b8af-ab2b0064fcf5"
+                src="https://example.org/pictures/e772651b-12f3-430d-b0f8-38c244d458cb"
+              />
+              <a href="#" target="_blank" rel="noreferrer" class="py-2 block px-4 text-sm">
+                This is link a9da12ed-554b-446d-a317-673fdffc0319
+              </a>
+              <ul
+                class="xl:grid-cols-3 2xl:grid-cols-4 gap-x-8 xl:px-8 px-4 py-16 xl:max-w-none mx-auto gap-y-16 grid-cols-1 sm:px-6 grid sm:grid-cols-2 max-w-3xl"
+              >
+                <li class="flex-col pt-8 px-8 flex">
+                  This is item eafb08b6-9626-4968-80da-64c082487037
+                </li>
+                <li class="font-medium text-sm text-gray-400">
+                  This is item 6f46b86c-7223-4a12-9807-77bde49abee7
+                </li>
+              </ul>
+            </li>
+            <li class="lg:py-12 py-4">
+              <a href="#" class="tracking-tight text-gray-900 text-3xl font-bold sm:text-4xl">
+                This is link c20d05c2-dd9e-4cb0-ba57-afa0b88a07d4
+              </a>
+            </li>
+            <li
+              class="bg-white block rounded-lg relative focus:ring-indigo-500 focus:ring-offset-2 overflow-hidden focus:outline-none w-full focus:ring-2"
+            >
+              <ol
+                class="bg-gray-50 px-6 text-sm py-3 text-gray-900 text-left font-semibold md:block hidden"
+              >
+                <li class="sr-only">This is item 9eedb881-ef5c-4e91-8286-60466e03354e</li>
+                <li class="max-w-xl text-xl mt-5 mx-auto text-gray-500">
+                  This is item 899f744b-7ce8-4e21-a122-88300e0810f2
+                </li>
+                <li class="flex-col justify-end flex">
+                  This is item 6905bae4-54e1-497b-b6ed-9ae40034950d
+                </li>
+              </ol>
+              <ol
+                class="sm:text-sm focus:border-indigo-500 block w-full shadow-sm border-gray-300 focus:ring-indigo-500 rounded-md"
+              >
+                <li class="text-center">This is item 2e1caf6f-27a5-4232-91fa-499017e10b38</li>
+                <li class="flex -m-2 group p-2 items-center">
+                  This is item 2708774b-e56b-4054-9497-3d9b1e6c0bc5
+                </li>
+              </ol>
+            </li>
+            <li class="hover:bg-opacity-75 hover:bg-indigo-600 text-indigo-100">
+              <ol class="h-5 flex-shrink-0 w-5">
+                <li class="font-medium text-gray-900 text-lg">
+                  This is item a4922d74-b12d-4057-9d24-a21f345a35ed
+                </li>
+                <li
+                  class="text-purple-600 focus:ring-2 rounded-md font-medium focus:outline-none hover:text-purple-500 bg-white focus:ring-purple-500 focus:ring-offset-2"
+                >
+                  This is item 1220fe33-f90e-4241-abee-7dbeb474f732
+                </li>
+                <li class="bg-gray-50">This is item b2c15ea8-1dc9-47d9-8519-b15178088643</li>
+                <li class="font-semibold text-gray-900 text-xl">
+                  This is item 7b014209-3648-428b-9dfc-72202669d775
+                </li>
+                <li
+                  class="h-0.5 inset-x-0 duration-200 sm:transform sm:mt-5 absolute ease-out bottom-0 transition-colors sm:translate-y-px"
+                >
+                  This is item 36227ebf-fcd6-4b68-93ce-bdc1cb3a1983
+                </li>
+              </ol>
+              <a href="#" class="mt-1"> This is link 638083f5-8973-4f75-a595-323b2365fda4 </a>
+              <ul class="text-gray-900 font-medium">
+                <li class="object-cover w-full object-center h-full">
+                  This is item a58e10ab-846a-46d5-971d-c599b53c762d
+                </li>
+                <li class="sr-only">This is item 2c5e12c6-af50-4f35-82ba-9022b6f8fb23</li>
+                <li class="flex-1 min-w-0 py-0">
+                  This is item d1335199-5d0e-413f-8585-62c9c0228d86
+                </li>
+              </ul>
+            </li>
+            <li class="mt-10 border-t border-gray-200">
+              <ul class="bg-white relative">
+                <li class="text-base mt-2 font-medium text-indigo-200">
+                  This is item 372eb66e-a562-4463-ab5f-a68f5783e6a3
+                </li>
+                <li class="-ml-14 pr-2 -mt-2.5 w-14 leading-5 text-right text-gray-400 text-xs">
+                  This is item 8cfd378e-8ca0-4d25-9486-6d1d6f5b2926
+                </li>
+                <li class="h-5 w-5 flex-shrink-0">
+                  This is item a5fc1097-3372-4a8d-9781-dc20968ab90f
+                </li>
+                <li class="container sm:px-6 lg:px-8 mx-auto">
+                  This is item d4d8f0e2-e051-4865-a938-6be7ce0e8e5c
+                </li>
+                <li class="bg-gray-50">This is item c0f92b2b-bf77-4755-82e9-835b392d0f69</li>
+              </ul>
+              <a href="#" rel="noreferrer" class="top-1/2 bg-white inset-0 absolute shadow">
+                This is link e1d0e64f-1b20-4cd1-9480-634a4c859876
+              </a>
+              <ul class="sr-only">
+                <li class="items-start flex relative">
+                  This is item 0af6149f-b093-4686-81a6-9182959b0161
+                </li>
+                <li class="block text-gray-700 text-sm font-medium">
+                  This is item 9b1c70fa-8d38-4947-aec3-57a454815d7e
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <img
+            class="bg-white"
+            alt="Profile picture of user 49d972c6-ed23-4a78-8bf2-1e7df72b1153"
+            src="https://example.org/pictures/4cb88296-fedf-400a-9848-d7904a8892a7"
+          />
+          <a href="#" class="py-2 relative bg-white px-3">
+            This is link 01b9aff9-e273-4c34-a595-60a71bcefdd6
+          </a>
+        </li>
+        <li class="flex-shrink-0 w-6 h-6 text-blue-600">
+          <ul
+            class="pr-5 flex focus:border-transparent focus:outline-none bg-none items-center text-gray-700 font-medium border-transparent group-hover:text-gray-800 text-sm rounded-md focus:ring-0 py-0.5 pl-2"
+          >
+            <li class="mt-1">
+              <ul
+                class="text-gray-900 py-2 flex-col h-14 hover:bg-gray-100 flex focus:z-10 px-3 bg-white"
+              >
+                <li class="sr-only">This is item 96a5653a-6dae-48d4-9c0c-aa063ad4d7de</li>
+                <li class="flex">This is item 0b7f9ce1-ca64-4245-8621-3e6b7c81fc1d</li>
+                <li class="w-10 h-10 rounded-full">
+                  This is item 112d0e59-db13-4bf6-a67d-28739391d165
+                </li>
+                <li class="inset-0 py-6 sm:px-6 lg:px-8 absolute px-4">
+                  This is item 3c4b8c99-9fce-4906-900a-b4ba6efe45db
+                </li>
+              </ul>
+              <img
+                class="font-medium text-gray-900"
+                alt="Profile picture of user 343520a1-cad4-4b61-ac0b-43de6e7373cc"
+                src="https://example.org/pictures/8ec12545-0dfb-43c5-8397-59940a7bc249"
+              />
+              <ol class="font-medium text-gray-700 block text-sm">
+                <li class="lg:inset-y-0 hidden lg:absolute lg:w-1/2 lg:right-0 lg:block">
+                  This is item 41272104-2c05-44be-8562-02cd11ff30ce
+                </li>
+                <li class="rounded-full h-6 flex-none w-6">
+                  This is item c8a56a0c-c736-4b9d-97c6-27c5c932e376
+                </li>
+              </ol>
+              <ul class="text-yellow-400">
+                <li class="object-cover object-center w-full h-full">
+                  This is item 6139f729-cb8f-457c-8860-13bc958c616b
+                </li>
+                <li class="mx-auto h-7 justify-center flex rounded-full w-7 items-center">
+                  This is item 40f040ec-3754-48f1-8559-8e0849e6a8a3
+                </li>
+                <li class="text-indigo-600">This is item 31c2978c-f4bb-41df-88e4-909e3fea085b</li>
+                <li class="items-center inline-flex text-sm">
+                  This is item ca59c4b5-dcc5-4dc4-ab13-c07b8eea179c
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-900 font-medium">
+              <ol class="w-12 rounded-md h-12 inline-block">
+                <li class="py-8 bg-white px-4">
+                  This is item 5fac07e2-71a6-4323-961b-b6827fe8c53d
+                </li>
+                <li class="rounded-full w-6 flex-shrink-0 h-6">
+                  This is item ec7de49a-681a-44a8-b810-ed8f612d99cb
+                </li>
+                <li
+                  class="py-0.5 inline-flex rounded-md font-medium text-blue-800 bg-blue-100 text-sm items-center px-2.5"
+                >
+                  This is item 967089d6-10b4-4c6f-9611-1037c3b80625
+                </li>
+                <li
+                  class="py-2 text-base font-medium block hover:text-gray-800 text-gray-500 hover:bg-gray-100 px-4 sm:px-6"
+                >
+                  This is item 865154f2-474a-410a-a5d3-c7d724f752a4
+                </li>
+              </ol>
+              <img
+                class="hover:text-gray-100 text-sm font-medium text-white"
+                alt="Profile picture of user 7636f849-467c-46d7-9129-406d3e703b2b"
+                src="https://example.org/pictures/45d6d44e-50fe-41a0-9988-a3a13ca4cd03"
+              />
+              <img
+                class="sm:px-6 lg:px-8 px-4 mx-auto max-w-6xl"
+                alt="Profile picture of user 49e93044-4580-41fe-8c78-1541c96c8880"
+                src="https://example.org/pictures/186c9a2e-1b2d-4af9-9f6b-ab0e4f1d69c9"
+              />
+            </li>
+            <li class="text-gray-900 font-medium">
+              <ol class="text-lg text-gray-900 font-medium">
+                <li class="text-sm mt-2 text-gray-700">
+                  This is item e88e48e4-3c7d-42cc-b5b0-f5c2f419f28f
+                </li>
+                <li class="text-gray-900">This is item 152021f5-71c2-41bc-96eb-dd3dfc9303f1</li>
+              </ol>
+              <ol class="sr-only">
+                <li class="py-10 bg-gray-100">This is item de87701b-7032-4c73-b302-2934bad832a1</li>
+                <li class="sr-only">This is item 0dedf242-3027-48d4-85f4-6b69b4dc8e08</li>
+              </ol>
+              <img
+                class="text-sm font-medium text-gray-500"
+                alt="Profile picture of user 42c89517-e54c-489d-941e-4c7c4a0f0a1a"
+                src="https://example.org/pictures/6c5a56d0-3431-4c19-ac84-807e3e7321ea"
+              />
+            </li>
+          </ul>
+          <a href="#" target="_blank" class="lg:px-8 px-4 sm:px-6 max-w-7xl mx-auto py-16">
+            This is link ccd05d94-02ee-4549-b793-d7d8112f2b46
+          </a>
+          <ul class="mt-6">
+            <li class="text-center">
+              <a href="#" rel="noreferrer" class="mt-1">
+                This is link e59ff411-e55d-4b97-b769-455773fb4b4d
+              </a>
+              <img
+                class="text-gray-400 hover:text-gray-500"
+                alt="Profile picture of user 89a1a3a0-7500-4e9d-bfe4-2464289e2e2a"
+                src="https://example.org/pictures/e167c3a4-6ae0-4b13-82dc-f77ae99755cf"
+              />
+            </li>
+            <li class="flex mx-auto w-7 items-center h-7 rounded-full justify-center">
+              <a href="#" class="text-gray-400 group-hover:text-gray-300">
+                This is link b3c50c35-4a89-4522-9346-5af9c25b6d56
+              </a>
+              <ul class="sm:flex mt-12 sm:mx-auto sm:max-w-lg">
+                <li
+                  class="text-sm px-6 py-2 font-medium bg-gray-50 text-gray-500 border-b border-t border-gray-200"
+                >
+                  This is item 853e3b29-9d85-4059-871e-6db908456561
+                </li>
+                <li class="ml-3 flex-none text-gray-400 font-semibold text-xs">
+                  This is item 2c5037d5-f407-4f21-926f-eb9e3df0fde3
+                </li>
+                <li class="sr-only">This is item f648d537-08c7-4714-a103-7458c2881ae1</li>
+                <li
+                  class="flex-auto truncate group-hover:text-indigo-600 text-gray-900 font-medium"
+                >
+                  This is item b644e293-abd0-4b83-802f-d82f428da115
+                </li>
+                <li
+                  class="sm:justify-around items-center max-w-3xl space-y-4 sm:flex-row flex-col sm:items-end sm:space-y-0 mx-auto flex justify-start"
+                >
+                  This is item a9180546-1794-4de5-8218-2294ecf9f0b7
+                </li>
+              </ul>
+            </li>
+            <li class="sr-only">
+              <ol class="font-medium text-gray-900">
+                <li class="px-2 space-y-1">This is item 11b71db4-4834-47b0-9a3e-15ff784fe973</li>
+                <li class="text-lg">This is item f798e66b-207f-4ea2-926b-8afd5207ddc0</li>
+                <li class="fixed inset-0">This is item 0d494a17-7706-4277-bca7-a608cfd1d72a</li>
+                <li class="w-6 h-6 rounded-full flex-none">
+                  This is item 530132b5-c41f-4e86-9bd2-77b14920f32e
+                </li>
+                <li class="gap-x-4 gap-y-6 grid grid-cols-1 mt-6 sm:grid-cols-3">
+                  This is item 17ad2b47-1987-4ec3-b65d-cf2898d9248f
+                </li>
+              </ol>
+              <img
+                class="h-8 mx-auto justify-center text-gray-900 flex w-8 items-center hover:bg-gray-200 rounded-full"
+                alt="Profile picture of user ed360a7b-15cc-47d1-8790-72b48e0c3d6f"
+                src="https://example.org/pictures/cb81c8b0-bd11-4737-a754-9599601d24f3"
+              />
+              <ul class="h-6 w-6">
+                <li
+                  class="sm:py-5 sm:gap-4 sm:grid py-4 sm:border-gray-200 sm:border-b sm:grid-cols-3"
+                >
+                  This is item 74eb4f4e-e839-49c6-a914-d5e40ae25c7c
+                </li>
+                <li class="fixed overflow-hidden inset-0">
+                  This is item ddb1d65b-f2c1-402b-9728-d971f27ea4d6
+                </li>
+              </ul>
+              <ul class="lg:px-8 max-w-7xl sm:px-6 mx-auto">
+                <li class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  This is item 40ef8323-8a45-427d-95c7-92e95a94b61a
+                </li>
+                <li
+                  class="sm:items-stretch sm:justify-start flex items-center justify-center flex-1"
+                >
+                  This is item a8fb1615-5f4a-4d81-ba7a-ce21d08f2224
+                </li>
+                <li class="md:hidden">This is item a5a84d67-0c4d-487a-90d8-5470cfa391af</li>
+              </ul>
+            </li>
+            <li class="text-gray-900 font-medium block p-2 -m-2">
+              <ul class="inline-block relative text-left px-4">
+                <li class="text-lg font-semibold text-indigo-600 leading-8 tracking-tight">
+                  This is item 630428fe-c300-450a-8852-e81c534cf841
+                </li>
+                <li
+                  class="placeholder-gray-500 border-gray-300 py-3 focus:ring-indigo-500 w-full px-4 focus:border-indigo-500 shadow-sm block rounded-md"
+                >
+                  This is item 826e934b-3c9b-49db-8e7a-28730a549bb4
+                </li>
+                <li class="sm:flex-auto">This is item 8465ce6d-c918-49b5-8452-79b57799465a</li>
+                <li class="justify-between items-center flex">
+                  This is item 67351737-5409-49b6-bac0-137d185c9611
+                </li>
+              </ul>
+              <ol
+                class="rounded-lg bg-gray-100 aspect-h-1 group-hover:opacity-75 aspect-w-1 overflow-hidden"
+              >
+                <li class="sr-only">This is item 9572ae63-12dc-4f52-a531-e00681cb8a03</li>
+                <li class="mt-20">This is item bff5404c-0833-47fd-baeb-98d115e9dd6f</li>
+                <li class="border-black rounded-full border border-opacity-10">
+                  This is item 6d5f6391-c4d3-464c-9beb-a668a3172f3f
+                </li>
+                <li class="text-sm py-2 block text-gray-700 px-4">
+                  This is item 0a74ef91-0e80-4577-bc20-a1914867f10f
+                </li>
+                <li class="text-gray-500 text-sm font-medium">
+                  This is item 79110fd0-0c9f-4e66-88c2-8ae83f197b69
+                </li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <img
+        class="sm:col-span-3"
+        alt="Profile picture of user 52180165-00e2-4ad5-9cf1-1a10ff6f4c6f"
+        src="https://example.org/pictures/96988d26-9ae0-4e5f-989f-5b6d92f0752d"
+      />
+      <ul class="hover:text-indigo-900 text-indigo-600">
+        <li class="bg-grape-400">
+          <ul class="tracking-tight font-bold sm:text-4xl mt-2 text-3xl text-gray-900 leading-8">
+            <li class="block py-2 text-sm font-medium text-gray-900 px-4">
+              <a href="#" class="sr-only"> This is link d20927e9-c88a-4f87-b805-4b8bed23d06b </a>
+              <img
+                class="focus:z-10 bg-white hover:bg-gray-100 py-1.5 rounded-tr-lg text-gray-900"
+                alt="Profile picture of user 15fba03f-c563-4f97-8879-00286cb2476f"
+                src="https://example.org/pictures/727b1f47-1d5e-40f3-a4fc-dda1611f160f"
+              />
+              <img
+                class="hover:text-white text-base text-gray-300"
+                alt="Profile picture of user f64802de-8601-4173-a428-d5ef88f0248d"
+                src="https://example.org/pictures/98378ee9-f68b-4c45-a936-04960a2cd27e"
+              />
+            </li>
+            <li class="sr-only">
+              <img
+                class="space-y-12"
+                alt="Profile picture of user 7bc00957-1d22-4f16-bf40-7f178a72e354"
+                src="https://example.org/pictures/3e3835c5-c46d-4ca3-b018-2c71ae222a93"
+              />
+              <a href="#" rel="noreferrer" class="mt-1">
+                This is link f695dfd1-03a9-4496-b68c-6521ba0d9b3f
+              </a>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="w-14 flex-shrink-0 rounded-lg justify-center inline-flex items-center h-14"
+              >
+                This is link 19fecd34-a986-4dab-aae2-8afc6f3eb9a9
+              </a>
+            </li>
+          </ul>
+          <ol class="flex-col flex mt-6 space-y-6">
+            <li class="max-w-xl">
+              <img
+                class="h-5 text-green-500 self-center flex-shrink-0 w-5"
+                alt="Profile picture of user e72b522e-b909-49c0-be80-7536852100ad"
+                src="https://example.org/pictures/3b2a1587-0786-4f0b-b8d8-79047561538a"
+              />
+              <a href="#" class="flex items-center mx-auto rounded-full h-7 w-7 justify-center">
+                This is link 910c9553-f5b9-48bc-aec8-e0c670e1a491
+              </a>
+              <img
+                class="text-white h-6 w-6"
+                alt="Profile picture of user b2ae90df-cdda-4a22-910f-959dc32183c4"
+                src="https://example.org/pictures/cd1785a9-db96-413a-9338-475a215b0ce2"
+              />
+              <ul class="items-center flex justify-center py-3">
+                <li class="flex-none py-10">This is item e3f30467-c84b-4278-8bcd-034b7637d935</li>
+                <li class="text-sm font-medium ml-4 hover:text-gray-700 text-gray-500">
+                  This is item 33d45dd4-cc2a-48dd-8c7c-7ab118672ec6
+                </li>
+                <li class="text-gray-500 sm:block hidden">
+                  This is item d4af29f6-cb27-4351-91cd-262f852da17a
+                </li>
+                <li class="absolute w-5 flex h-5 p-px">
+                  This is item aa8c5a74-0f2d-43ca-866b-8d607fcdc7c9
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-500 text-base font-medium">
+              <a href="#" target="_blank" class="sr-only">
+                This is link 6d49f795-c574-4737-a64a-8c790944752c
+              </a>
+              <img
+                class="lg:grid-cols-12 lg:gap-x-8 lg:auto-rows-min lg:grid"
+                alt="Profile picture of user 3e240b50-3e5a-492e-8810-97ec5bbabd45"
+                src="https://example.org/pictures/7bb49236-03ea-4d9c-bf39-e27941b8de4d"
+              />
+            </li>
+            <li class="w-4 rounded focus:ring-indigo-500 text-indigo-600 border-gray-300 h-4">
+              <ol class="text-white">
+                <li class="items-center flex">This is item 4315381d-b740-47fa-aa5d-69e2d0eda652</li>
+                <li class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
+                  This is item 24eb1716-cf55-41ca-9b3b-a513fc0799fd
+                </li>
+                <li class="flex justify-between">
+                  This is item 397d3010-c4a7-4f9a-b2a9-aeb1e58f653f
+                </li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+        <li class="focus-within:text-gray-500 relative max-w-2xl text-gray-400">
+          <ol class="md:mt-10 text-gray-900 mt-6 font-medium">
+            <li class="sm:px-6 py-5 px-4">
+              <img
+                class="font-medium text-gray-900 block text-base ml-3"
+                alt="Profile picture of user 84c59c55-563b-46dc-a0ca-a91fd3e22db9"
+                src="https://example.org/pictures/ee9f7205-07d6-4ea2-88d6-9a2f76348696"
+              />
+              <ol class="mt-1">
+                <li
+                  class="scroll-py-2 divide-y divide-gray-500 divide-opacity-10 max-h-80 overflow-y-auto"
+                >
+                  This is item 4cd8be36-3897-48c1-afe8-da97c807f03c
+                </li>
+                <li class="bg-white">This is item 4954c7eb-41a9-4c0c-a950-317fe51aeced</li>
+                <li
+                  class="text-sm pt-6 space-y-6 font-medium border-t text-gray-500 border-gray-200"
+                >
+                  This is item 6cf15103-15f0-419a-bab0-a16e11702675
+                </li>
+              </ol>
+              <img
+                class="text-gray-500 space-y-3 mt-3"
+                alt="Profile picture of user 09879d64-5300-481b-a9ee-f3053d78d77f"
+                src="https://example.org/pictures/20a23b36-bc44-4775-8e5b-049d588f12f8"
+              />
+              <a href="#" rel="noreferrer" class="sr-only">
+                This is link 8dd9a4d2-945d-4444-83d2-4b7bfe1aa30d
+              </a>
+            </li>
+            <li class="rounded-lg -m-3 flex p-3 items-start hover:bg-gray-50">
+              <a href="#" target="_blank" class="text-gray-700 text-sm">
+                This is link 264dd631-a71d-4e31-918c-f8e3f1081796
+              </a>
+              <ul
+                class="bg-indigo-600 text-base py-1.5 font-semibold hover:ring-indigo-700 text-white inline-block px-4 rounded-lg ring-1 leading-7 hover:bg-indigo-700 shadow-sm ring-indigo-600"
+              >
+                <li class="sr-only">This is item 1a683e50-5162-4335-8f30-b907edd03e0f</li>
+                <li class="flex">This is item 0278c3ce-6404-4d98-ad46-7752bb444ccc</li>
+                <li
+                  class="focus:ring-2 hover:bg-indigo-700 border rounded-full border-transparent focus:outline-none text-white shadow-sm focus:ring-offset-2 p-1.5 focus:ring-indigo-500 inline-flex bg-indigo-600 items-center"
+                >
+                  This is item 60d3e2be-1f5c-4205-90e0-fc693aaf7612
+                </li>
+              </ul>
+              <ol class="font-semibold mt-4 text-gray-900">
+                <li class="sr-only">This is item bbebc48b-9ab2-4b1b-82ed-9861125fb1bd</li>
+                <li class="bg-gray-50">This is item 33e67e29-5686-410a-9465-bef31fdf0462</li>
+              </ol>
+            </li>
+            <li class="grid-cols-7 text-xs text-center leading-6 mt-6 grid text-gray-500">
+              <img
+                class="mt-1 text-sm text-gray-500"
+                alt="Profile picture of user 212defda-a12a-4302-aa96-5cad1ed85efb"
+                src="https://example.org/pictures/128ebc6d-a995-4a1c-adcc-77fb7df54286"
+              />
+              <ul class="sm:pb-24 pb-16 relative pt-48">
+                <li class="divide-y divide-gray-100">
+                  This is item bf046a14-8f7c-44d0-8c81-381cf549f208
+                </li>
+                <li class="focus:z-10 relative bg-white hover:bg-gray-100 text-gray-900 py-1.5">
+                  This is item f8759c57-69e3-4990-943d-5c04c859e275
+                </li>
+                <li class="pr-9 py-2 select-none text-gray-900 pl-3 cursor-default relative">
+                  This is item c15dcb2d-30d5-48a9-8ed3-f37e2f355220
+                </li>
+                <li class="border-gray-200 border-t w-full">
+                  This is item 84fbd472-1eb6-44aa-a7d2-b98c0338bacf
+                </li>
+                <li class="text-sm ml-4">This is item a10f5c93-2214-4a49-b673-f12f7a261d8b</li>
+              </ul>
+              <a href="#" rel="noreferrer" class="bg-gray-50 py-2 relative text-gray-500 px-3">
+                This is link ce467d98-ad6b-4556-a60f-3bf3b1f3cc2c
+              </a>
+              <ol class="py-6 border-t px-4 border-gray-200">
+                <li class="relative bg-white">This is item 70cc6df9-a81f-4ca3-95a3-b26c1e64feea</li>
+                <li class="border-gray-200 py-6 border-t space-y-6 px-4">
+                  This is item b5903592-2bc9-47c8-86ee-6bdd2af2ecda
+                </li>
+              </ol>
+            </li>
+            <li class="sr-only">
+              <img
+                class="font-medium text-sm"
+                alt="Profile picture of user f968d83e-a470-4f9b-b1b7-ef13a16295b3"
+                src="https://example.org/pictures/5518522d-e933-4bff-bf5b-d987aa99d1af"
+              />
+              <a
+                href="#"
+                rel="noreferrer"
+                class="lg:gap-x-8 lg:max-w-7xl px-4 lg:grid sm:py-24 sm:px-6 max-w-2xl lg:px-8 lg:grid-cols-2 py-16 mx-auto"
+              >
+                This is link e52af2bc-6476-4d58-ae98-8507c65de9cb
+              </a>
+              <ol class="mx-auto px-8 max-w-7xl">
+                <li class="font-medium text-gray-700 text-sm block">
+                  This is item 10d06a53-e77b-4c1e-9ff7-7c9603161334
+                </li>
+                <li class="pb-8 px-4 space-y-10 pt-10">
+                  This is item 4c7af633-37d0-41c8-98c0-3c525f77429b
+                </li>
+              </ol>
+              <ol class="flex lg:ml-6">
+                <li class="overflow-hidden rounded-lg shadow bg-white">
+                  This is item 43b644c2-1144-4b2a-a9a6-6978faae186b
+                </li>
+                <li class="hover:text-gray-800">
+                  This is item d2255653-81f9-4f4a-811e-dc8be3520dae
+                </li>
+                <li
+                  class="px-5 py-3 border-transparent focus:ring-white border focus:ring-2 rounded-md focus:ring-offset-2 focus:ring-offset-gray-800 sm:max-w-xs focus:border-white w-full placeholder-gray-500"
+                >
+                  This is item 91c927d2-3526-42c1-9671-82d3e5b0032c
+                </li>
+                <li class="mt-8">This is item 027f1c39-cdd9-4d06-a0d0-9dfb69df527b</li>
+                <li
+                  class="pl-10 pointer-events-none flex fixed inset-y-0 max-w-full right-0 sm:pl-16"
+                >
+                  This is item 2c20c2b2-65e7-43e6-8004-43a7b4cb7711
+                </li>
+              </ol>
+            </li>
+          </ol>
+          <a href="#" target="_blank" class="z-10 relative">
+            This is link 6d2a802a-d2f3-4edb-b33c-360ce15c319a
+          </a>
+          <img
+            class="font-semibold text-base text-rose-200"
+            alt="Profile picture of user fd797ed5-784d-4c73-b6bc-9a18c08a5a11"
+            src="https://example.org/pictures/7f86be04-f2b7-4058-9f1c-cef52385dd2a"
+          />
+          <ol class="text-sm">
+            <li class="text-sm mt-2 font-medium text-gray-900">
+              <ol class="py-12 px-4 sm:px-6 lg:px-8 mt-12 mx-auto lg:py-16 max-w-7xl">
+                <li class="overflow-y-auto h-0 flex-1 mt-5">
+                  This is item 4a8d33ea-cb13-49fd-a203-93b47ddb9e70
+                </li>
+                <li class="flex h-16 justify-between">
+                  This is item 62ba05dc-93f1-426c-9b91-82ab27b24ce0
+                </li>
+                <li class="text-gray-500 whitespace-nowrap px-3 py-4 text-sm">
+                  This is item 121bc9a4-1463-4761-b54c-76765a8f9cb0
+                </li>
+                <li
+                  class="rounded-lg aspect-h-7 aspect-w-10 block overflow-hidden bg-gray-100 group w-full"
+                >
+                  This is item 18526fbe-f99f-4367-86da-a7e260cef15a
+                </li>
+              </ol>
+              <ol
+                class="text-gray-300 px-3 text-sm font-medium rounded-md py-2 hover:bg-gray-700 hover:text-white"
+              >
+                <li class="text-gray-400 text-sm">
+                  This is item 73e600a8-314f-4fc8-a369-573b6f41f150
+                </li>
+                <li
+                  class="rounded-md focus-within:ring-white border-transparent -ml-2 focus-within:ring-2 relative group"
+                >
+                  This is item c17e4f3b-e066-4e42-9595-a8e3c82bee07
+                </li>
+                <li class="xl:h-56 mx-auto h-40 w-40 rounded-full xl:w-56">
+                  This is item fc561f61-b0a9-44dd-88f7-ff0b0314f356
+                </li>
+                <li class="rounded-full h-8 w-8">
+                  This is item 7b50c4a4-e115-4a32-8b69-480b724c188b
+                </li>
+                <li class="py-4">This is item 47280d39-76e3-453b-83a5-bf736f5855e7</li>
+              </ol>
+            </li>
+            <li class="bg-white shadow-sm">
+              <ol class="divide-white divide-y font-medium divide-opacity-10 text-sm">
+                <li class="flex ml-4 lg:ml-0">This is item 10d3e54e-4bcb-4b6a-8c42-7ecc6846706b</li>
+                <li class="overflow-hidden bg-white relative">
+                  This is item 91152251-d019-432c-b3f3-9dc7c8f6cb94
+                </li>
+                <li class="flex">This is item 60766970-570c-47cc-a747-57cd0744cda9</li>
+                <li class="sr-only">This is item c4a12615-b600-4069-bcfd-1f3f2c4d9479</li>
+                <li class="border-transparent border rounded-md text-sm font-medium px-3 py-1.5">
+                  This is item 6b1c7f26-ec1e-49ce-b81c-f497a595c134
+                </li>
+              </ol>
+            </li>
+            <li class="h-7 mx-auto items-center rounded-full justify-center flex w-7">
+              <a href="#" target="_blank" class="h-5 w-5">
+                This is link 994457da-6aae-45e7-a30a-51751afc7e99
+              </a>
+              <img
+                class="bg-gray-50 p-5 sm:p-8"
+                alt="Profile picture of user bc93e29e-d884-4f6c-ac1a-d00e29b0bb67"
+                src="https://example.org/pictures/d6dfba27-fc79-43dc-9aa8-4764b4ddd3f2"
+              />
+            </li>
+          </ol>
+        </li>
+      </ul>
+      <ul class="items-center select-none group p-2 rounded-md flex cursor-default">
+        <li class="bg-white">
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="h-7 w-7 rounded-full flex justify-center items-center mx-auto"
+          >
+            This is link 38166f8a-2fe8-484c-a6dd-f48435e141da
+          </a>
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="w-full border text-white border-gray-800 py-2 rounded-md text-center font-semibold hover:bg-gray-900 text-sm bg-gray-800 block"
+          >
+            This is link 57f585bb-ffe2-4feb-829f-b32d13797834
+          </a>
+        </li>
+        <li class="bg-gray-900">
+          <ul class="flex mt-8 lg:mt-0 lg:flex-shrink-0">
+            <li class="mt-1 text-gray-500 text-sm">
+              <ol class="border-transparent border-t">
+                <li class="text-white font-semibold">
+                  This is item 88dd01ce-5c54-4d50-804d-b0588f245ea8
+                </li>
+                <li class="flex ml-10 items-baseline space-x-4">
+                  This is item 079e00d8-b1a1-4791-8037-78fdda17ea31
+                </li>
+                <li
+                  class="overflow-hidden rounded-md divide-y ring-black absolute focus:outline-none bg-white ring-opacity-5 w-36 origin-top-right divide-gray-100 shadow-lg right-0 ring-1 z-10 mt-3"
+                >
+                  This is item b98b3e82-e528-4a03-a530-1fead947632f
+                </li>
+                <li class="bg-warm-gray-50">This is item c2a2b957-af3a-4e35-901f-5808345cf69b</li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                class="h-7 mx-auto w-7 flex rounded-full justify-center items-center"
+              >
+                This is link 6dc9c2d8-3463-494f-ad5c-36b454e805ba
+              </a>
+              <ul class="sm:block hidden">
+                <li class="h-5 w-5">This is item a1919486-00d0-4a32-b339-bb850c7b7f9c</li>
+                <li class="flex ml-2 flex-shrink-0">
+                  This is item 45893876-7be2-4069-b17e-28c53ca3ab37
+                </li>
+                <li class="text-gray-400 flex-shrink-0 w-5 h-5">
+                  This is item 59d9d720-b88a-41ca-b734-2a80538438ab
+                </li>
+              </ul>
+            </li>
+            <li class="mt-12 md:mt-0">
+              <ul class="text-xs group-hover:text-gray-700 font-medium text-gray-500">
+                <li class="relative focus:z-10 py-1.5 text-gray-900 hover:bg-gray-100 bg-white">
+                  This is item b784fd9d-716c-4993-82e9-3a5ba89f06f1
+                </li>
+                <li class="bg-gray-100">This is item 108a643b-3b0e-4b1e-a3f3-538e7c668dcf</li>
+                <li class="relative flex justify-between items-center h-16">
+                  This is item a7f128a5-f160-4a5e-9916-5504dfbe16a4
+                </li>
+                <li class="text-gray-200 bg-gray-50 cursor-not-allowed">
+                  This is item b12bbd5c-f4ba-4a9c-ae2b-1bc9da956858
+                </li>
+                <li class="font-bold text-gray-900 truncate text-2xl">
+                  This is item c3501253-2ed4-4d1d-9f2b-939b3b32858a
+                </li>
+              </ul>
+              <img
+                class="text-gray-500 hover:text-gray-600"
+                alt="Profile picture of user bb1eca72-6ad8-44cc-9cad-77602c574cbd"
+                src="https://example.org/pictures/106c6b49-9722-4e25-a41a-80da65c864a9"
+              />
+            </li>
+          </ul>
+          <a
+            href="#"
+            target="_blank"
+            class="bg-black flex-col flex justify-end w-full items-start bg-opacity-40 p-8 sm:p-12 relative"
+          >
+            This is link 45e4d9f1-b2b9-41e3-b73b-fc5a2c576a77
+          </a>
+          <ul class="font-medium text-lg leading-6 text-gray-900">
+            <li class="sm:px-6 px-4 max-w-7xl mx-auto py-12 lg:px-8">
+              <img
+                class="border-b border-gray-200"
+                alt="Profile picture of user 1a63556a-a307-4577-b525-4f1c396a79b1"
+                src="https://example.org/pictures/106c86e7-9a18-4204-ba73-dc413ee5765e"
+              />
+              <ol class="mt-4 space-y-6">
+                <li class="object-cover object-center group-hover:opacity-75">
+                  This is item 31657468-cccd-4c40-ac97-b7bee5f37ac5
+                </li>
+                <li class="text-right">This is item 99f64a05-1490-4384-8b22-50f4a01b16fd</li>
+                <li
+                  class="w-10 justify-center h-10 rounded-full focus:outline-none ml-1 focus:ring-white items-center flex focus:ring-2 focus:ring-inset"
+                >
+                  This is item 44bdd4bc-52e2-4385-9251-64defbca7061
+                </li>
+              </ol>
+            </li>
+            <li class="max-w-lg lg:max-w-none mx-auto">
+              <ul class="border-b border-gray-200 divide-gray-200 sm:border-t text-sm divide-y">
+                <li class="p-8 bg-gray-800">This is item a4e18caa-3036-4268-82ed-883947c44cc6</li>
+                <li class="bg-gray-800">This is item d3b52e98-1521-4bdf-9a9c-4f52d1ad0b2f</li>
+                <li class="bg-white">This is item 9fb6256c-2b9e-4188-86e9-5d2ae12019d8</li>
+                <li class="object-center h-full w-full object-cover">
+                  This is item b7c2b4b9-f8ee-4b25-9053-f9d5955a1087
+                </li>
+                <li class="text-gray-500 hover:text-gray-600">
+                  This is item d8c4bebf-ef19-405d-aae9-70a9b07116e4
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="focus-within:text-gray-600 relative w-full text-gray-400">
+          <a href="#" class="w-6 h-6"> This is link 3d40d8a9-426d-4a0b-9d78-93b72c5a1c8c </a>
+          <img
+            class="sm:text-4xl tracking-tight font-bold text-3xl text-gray-900"
+            alt="Profile picture of user 18b2ca1c-4da3-45f1-a4b6-0b1618381a0a"
+            src="https://example.org/pictures/a7cef033-6887-4804-b66c-80f9724e90c5"
+          />
+          <ol class="hover:text-gray-600 text-gray-500">
+            <li class="text-white font-semibold">
+              <a href="#" target="_blank" class="sr-only">
+                This is link cc63a069-7310-48e0-92d9-d14f4cbeab5b
+              </a>
+              <img
+                class="flex-shrink-0 ml-4"
+                alt="Profile picture of user 9dec3fbe-7daa-4a5c-800f-348fd2893548"
+                src="https://example.org/pictures/b6da0086-a820-4230-95b7-0faf3e2556b5"
+              />
+            </li>
+            <li class="mt-1 gap-3 grid grid-cols-3">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-sm hover:text-indigo-500 text-indigo-600 font-medium"
+              >
+                This is link 25f81072-d0a1-443d-8ebd-1369c83f71c5
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="sm:py-32 lg:px-4 mx-auto sm:px-2 max-w-7xl py-24"
+              >
+                This is link 06d2b391-eb1a-4dd0-a953-5141213e5cba
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="grid grid-cols-4 py-16 gap-x-8 gap-y-10"
+              >
+                This is link 4170e960-5e18-43e0-82c7-0f1563fa435f
+              </a>
+              <ol class="mt-6 sm:max-w-xl">
+                <li class="flex-1 ml-2 truncate w-0">
+                  This is item 07138548-3f74-47be-b8da-dec2a1dbfc55
+                </li>
+                <li class="text-gray-900">This is item 2920afa7-1c96-41ef-a98f-8ac7d268f2a3</li>
+              </ol>
+            </li>
+            <li class="bg-sky-900 lg:hidden">
+              <ul class="max-w-sm py-6 mx-auto">
+                <li class="text-gray-500 mt-1">
+                  This is item 85549e0b-d716-4142-a804-7503124d3356
+                </li>
+                <li class="text-white font-medium">
+                  This is item 32f0548d-39ab-4ecd-8305-bd8ad278fbe0
+                </li>
+                <li class="hover:bg-gray-100 bg-white py-1.5 focus:z-10">
+                  This is item 912aa5b0-efb9-4826-be64-da9d2b59a025
+                </li>
+                <li class="py-1.5 focus:z-10 bg-white hover:bg-gray-100">
+                  This is item cd62cdef-18e0-4289-9fd4-e564184b6db4
+                </li>
+              </ul>
+              <ul class="flex">
+                <li class="bg-gray-50 lg:py-32 py-16 relative sm:py-24">
+                  This is item ffa33164-0c34-4a5a-a831-f496c4d54289
+                </li>
+                <li
+                  class="flex-col text-gray-500 hover:bg-gray-100 bg-gray-50 h-14 flex px-3 py-2 focus:z-10"
+                >
+                  This is item d21fefa7-1f7d-45c6-8709-ece38f0a5eb1
+                </li>
+                <li
+                  class="-m-2.5 items-center h-10 text-gray-400 rounded-full inline-flex hover:text-gray-500 w-10 justify-center"
+                >
+                  This is item cc8e961d-b1df-447b-a816-6911cfbd35cf
+                </li>
+                <li class="font-medium text-gray-900 text-sm">
+                  This is item e014d1b4-22f5-47f7-9bc7-df088f58dcbe
+                </li>
+                <li class="ring-indigo-600 ring-2">
+                  This is item 826b6a66-349b-402a-a6b9-f741bf9f7fb0
+                </li>
+              </ul>
+              <ol class="h-6 w-6">
+                <li class="flex">This is item 44f37c51-d3e6-4398-b5fe-c06396b52f8e</li>
+                <li class="w-full md:ml-0 flex">
+                  This is item 5e0103fc-5e27-4692-a4ca-bf9562aa0683
+                </li>
+                <li class="bg-white relative text-gray-900 focus:z-10 hover:bg-gray-100 py-1.5">
+                  This is item d2d5d442-4347-4d2e-b1f1-91998adad079
+                </li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+        <li class="font-medium text-lg mt-2 text-gray-900 leading-6 ml-2">
+          <ol class="md:ml-4 md:items-center hidden md:flex">
+            <li class="h-12">
+              <img
+                class="font-medium text-gray-700 group-hover:text-gray-800 text-sm ml-2"
+                alt="Profile picture of user 2bf36ceb-9b93-4a0c-8824-b03848d69b0f"
+                src="https://example.org/pictures/771c3592-d02f-4316-b83f-43f9b4b299bf"
+              />
+              <ul class="bg-gray-50">
+                <li class="sm:mt-8 px-4 mt-6 sm:px-6 sm:flex sm:items-end">
+                  This is item cb88ce91-89ec-44bc-833a-89f968a9ca27
+                </li>
+                <li class="text-gray-500 text-base mt-4">
+                  This is item 7dc9b56d-5478-4bd8-bf69-eecc9a4eb4a1
+                </li>
+                <li class="lg:mt-0 flow-root self-center mt-8">
+                  This is item 1cf4aa6c-3bbe-499d-92d5-4cea16600cde
+                </li>
+              </ul>
+              <img
+                class="h-8"
+                alt="Profile picture of user b8f8742a-a060-4443-979a-806de070ca55"
+                src="https://example.org/pictures/e4fbae29-b191-424e-8aca-4bccd9995f9d"
+              />
+            </li>
+            <li class="mt-10">
+              <img
+                class="divide-y space-y-6 divide-gray-200 sm:space-y-5 pt-8 sm:pt-10"
+                alt="Profile picture of user 216b85c5-a6ff-458d-8655-b408c195062f"
+                src="https://example.org/pictures/1fa3f567-5301-45d3-a0dd-6ce53b5fa4eb"
+              />
+              <ol class="py-4 flex">
+                <li class="relative grid gap-6 py-6 px-5 lg:grid-cols-2 bg-white sm:gap-8 sm:p-8">
+                  This is item 35651a03-a5a5-4f66-8578-310801e4649a
+                </li>
+                <li class="font-medium text-sm text-gray-900">
+                  This is item 04e8b91c-0c2a-4915-ae51-f36c26e6efbf
+                </li>
+                <li
+                  class="text-sm focus:ring-2 focus:outline-none rounded-full focus:ring-offset-2 flex bg-gray-800 focus:ring-white focus:ring-offset-gray-800"
+                >
+                  This is item 7a5e0f09-e7b6-4334-8975-60e1862b12d4
+                </li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+        <li class="py-6">
+          <ul class="w-5 h-5 text-blue-gray-400">
+            <li class="sr-only">
+              <a href="#" rel="noreferrer" class="mx-auto lg:mx-0 max-w-lg">
+                This is link 68a9886d-dd37-4c80-946c-bbf6bef62bef
+              </a>
+              <ol class="whitespace-nowrap">
+                <li class="sr-only">This is item 2645a22e-295e-45fc-b73e-f8c11e42271a</li>
+                <li class="w-5 h-5 flex-shrink-0">
+                  This is item ae7bbc6e-713b-4b5d-99fb-3e31f683f83d
+                </li>
+              </ol>
+              <ol class="text-sm mt-1 text-gray-600">
+                <li class="justify-between flex items-center">
+                  This is item 912a6e5a-0a7f-42b8-9dc1-dd74a8dc9858
+                </li>
+                <li class="font-medium block text-sm text-gray-700">
+                  This is item 6f41c43d-7232-4b9f-9b3d-33d31ec36957
+                </li>
+                <li
+                  class="rounded-md text-base block text-gray-300 font-medium px-3 hover:bg-gray-700 py-2 hover:text-white"
+                >
+                  This is item fc60d591-7f42-4c8a-ba70-723e50ec9fb1
+                </li>
+                <li class="rounded-md absolute inset-0 overflow-hidden">
+                  This is item 21c18db1-e9cc-4d0c-bd1d-a2eda64b7c0b
+                </li>
+                <li class="font-medium text-gray-900">
+                  This is item c6ceb3eb-a39a-440d-9da8-7906d808e3b6
+                </li>
+              </ol>
+              <ul class="text-sm mt-6 sm:mt-0 text-gray-500 text-center">
+                <li class="bg-gray-900">This is item be3ca110-c05c-4a83-a19b-a60bc9ee3357</li>
+                <li
+                  class="rounded-md focus:ring-2 bg-white text-gray-400 hover:text-gray-500 focus:ring-indigo-500"
+                >
+                  This is item 91f61f85-c02e-436f-adc4-906ae8bc8877
+                </li>
+                <li class="flex justify-between">
+                  This is item 71afbb7e-fbf5-4422-bc70-717acb8a3e44
+                </li>
+                <li class="ring-black rounded-lg ring-1 overflow-hidden shadow-lg ring-opacity-5">
+                  This is item d33c5f10-b7c1-40e1-9197-393d2a884be2
+                </li>
+                <li class="text-gray-900 font-medium">
+                  This is item dd141e3b-462c-4ab9-9436-b2275e921db4
+                </li>
+              </ul>
+            </li>
+            <li class="px-4 lg:px-8 mx-auto lg:py-20 py-16 sm:px-6 max-w-7xl">
+              <ul class="w-7 flex mx-auto justify-center h-7 items-center rounded-full">
+                <li class="text-gray-500">This is item 54f62eee-bc7e-40d1-9d85-e265abbe48a5</li>
+                <li class="text-base text-warm-gray-500 hover:text-warm-gray-900">
+                  This is item b59eb8dc-ac99-4c9d-9eee-331e92ff8aa8
+                </li>
+                <li class="mt-1">This is item f015bd48-21df-4197-8278-93b1f1587afb</li>
+              </ul>
+              <a href="#" class="w-full max-w-xs mx-auto">
+                This is link b3199a10-2bb3-465a-a3bb-84239bd3ee28
+              </a>
+              <ol class="lg:px-8 px-4 sm:px-6 mt-6">
+                <li class="group inline-flex">This is item 722203f1-64fd-4d08-8860-2b27b6d8fd48</li>
+                <li class="bg-white">This is item cdc7195c-322f-4071-9941-6b54a9ccdf13</li>
+              </ol>
+            </li>
+            <li class="text-gray-700 text-sm font-medium block">
+              <ol class="w-72">
+                <li class="h-6 rounded-full w-6 flex-none">
+                  This is item 758c2607-ea02-4905-8464-0fc2cac2aedb
+                </li>
+                <li class="flex justify-between mt-2">
+                  This is item d93d6d42-dbe8-44f6-8e00-0c231e2183d2
+                </li>
+              </ol>
+            </li>
+            <li class="hover:text-gray-800">
+              <img
+                class="group-hover:opacity-75 sm:h-96 bg-gray-200 aspect-h-4 sm:aspect-none aspect-w-3"
+                alt="Profile picture of user 59c432c3-5c02-41de-ab12-6afb7249ccea"
+                src="https://example.org/pictures/b483275e-3858-45aa-8a92-bc1de321dc00"
+              />
+              <ul class="justify-center flex h-7 w-7 mx-auto items-center rounded-full">
+                <li class="h-5 w-5">This is item 5a3c7735-43b6-42a0-8296-32d7e55c6eec</li>
+                <li
+                  class="relative text-right font-medium pl-3 pr-4 py-4 sm:pr-6 text-sm whitespace-nowrap"
+                >
+                  This is item 39981567-db9f-4827-965c-60ad7d2097de
+                </li>
+              </ul>
+              <img
+                class="flex pb-4 flex-col overflow-y-auto flex-1 pt-5"
+                alt="Profile picture of user 84394563-cf85-418b-a65f-e9bf7c151013"
+                src="https://example.org/pictures/4fd44d19-cb79-4cf9-b84d-d64096125bf2"
+              />
+              <ul
+                class="aspect-h-1 rounded-lg overflow-hidden group-hover:opacity-75 aspect-w-1 bg-gray-100"
+              >
+                <li class="text-indigo-600 text-sm font-medium hover:text-indigo-500">
+                  This is item ea355b89-e610-46d2-8bb2-941a79aea91c
+                </li>
+                <li class="w-6 h-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500">
+                  This is item 79d2a209-7caf-464a-8b24-a2d30e184e30
+                </li>
+                <li
+                  class="text-indigo-200 rounded-full p-1 focus:ring-offset-2 focus:ring-white focus:ring-2 focus:outline-none focus:ring-offset-indigo-600 bg-indigo-600 hover:text-white"
+                >
+                  This is item cb39961e-7893-4964-ac0b-ab2107db9d34
+                </li>
+              </ul>
+            </li>
+            <li class="h-8 w-auto">
+              <ol class="text-base leading-7 text-indigo-200 mt-2">
+                <li class="w-1/2 rounded-lg absolute h-full right-0">
+                  This is item 218d0c1c-ac3c-4299-a398-60f713d2c0b4
+                </li>
+                <li
+                  class="mt-4 space-x-8 font-medium flex items-center justify-between text-base text-gray-900"
+                >
+                  This is item 61fe2e1a-06d5-4382-8eb5-ce0878e976b5
+                </li>
+              </ol>
+              <ul class="sm:grid py-4 sm:py-5 sm:gap-4 sm:grid-cols-3">
+                <li class="h-full w-full xl:grid xl:grid-cols-2">
+                  This is item d0183cea-29ef-406a-b572-9a4bc216ede6
+                </li>
+                <li class="flex text-gray-700 text-sm items-center hover:text-gray-800 font-medium">
+                  This is item 2d000a11-14e6-4832-a039-4e62cf24fd36
+                </li>
+              </ul>
+              <ol class="text-gray-900">
+                <li class="text-gray-500 text-lg">
+                  This is item 6b40fae8-1826-4f33-be8d-b228132d8b56
+                </li>
+                <li class="mb-1 h-1.5 rounded-full bg-gray-400 w-1.5 mx-0.5">
+                  This is item 0e1f3147-050f-4756-be82-efd4eff49312
+                </li>
+                <li class="focus:z-10 bg-white py-1.5 hover:bg-gray-100">
+                  This is item 092b88c6-b4f2-4fdb-9c28-808723cafd83
+                </li>
+                <li class="flex-shrink-0">This is item 68cf1fdf-ea62-4d73-b530-0e267063a289</li>
+              </ol>
+            </li>
+          </ul>
+          <ol class="sm:col-span-2">
+            <li
+              class="sm:px-6 mx-auto md:items-center max-w-7xl lg:px-8 md:justify-between py-12 md:flex px-4"
+            >
+              <ol class="focus:z-10 hover:bg-gray-100 bg-white py-1.5">
+                <li
+                  class="-ml-2 rounded-md relative group focus-within:ring-white border-transparent bg-gray-900 focus-within:ring-2"
+                >
+                  This is item f4519da5-d63b-4c3a-8b49-1fdea2294334
+                </li>
+                <li class="sr-only">This is item f261a405-a06b-48ed-9211-9c29f4093afe</li>
+              </ol>
+            </li>
+            <li class="sr-only">
+              <img
+                class="text-sm text-gray-700"
+                alt="Profile picture of user 616f8636-273f-4fa2-b0b8-dab5b2067f37"
+                src="https://example.org/pictures/880abf3b-5001-4def-bbb1-58901332a867"
+              />
+              <ul class="text-xl mt-4 text-gray-600">
+                <li class="font-medium text-gray-900 block mt-6">
+                  This is item fada2c80-1d26-424c-8794-f82570aa485b
+                </li>
+                <li class="items-center mx-auto flex rounded-full justify-center w-7 h-7">
+                  This is item 5b86212c-31bf-4000-a2e2-71ce23f2e8f4
+                </li>
+                <li class="text-white">This is item 9ba7bc3d-f287-4428-bf3f-ad8bc4003396</li>
+              </ul>
+              <img
+                class="text-indigo-600 h-6 flex-shrink-0 w-6"
+                alt="Profile picture of user 6b72e8ab-9bcb-44a9-98ce-7cbfa830d4ee"
+                src="https://example.org/pictures/952a81f0-eb62-4d24-85de-d4b4dc53a16c"
+              />
+            </li>
+            <li class="sm:hidden">
+              <img
+                class="w-full -mx-auto max-w-xl"
+                alt="Profile picture of user 1d33ddf0-ae2f-49f5-95b8-5818515a9c6f"
+                src="https://example.org/pictures/06fc20f6-368a-4ff5-b39d-ad964edfcea7"
+              />
+              <ul
+                class="border-t text-gray-900 font-medium border-gray-200 pt-6 text-sm justify-between flex mt-6 items-center"
+              >
+                <li class="mt-1 text-sm text-gray-300">
+                  This is item 650d45c7-c19f-416b-9312-aa620ecbd48a
+                </li>
+                <li class="lg:grid-cols-2 lg:gap-6 lg:grid">
+                  This is item 4f2d250d-ea8b-4542-803b-a22f06f33213
+                </li>
+                <li class="h-6 rounded-full w-6">
+                  This is item 5c68ffb8-4707-4971-8e02-995f8effed12
+                </li>
+                <li class="text-gray-900 font-medium text-base">
+                  This is item e808c564-04fb-4b22-b388-702cda9d9fae
+                </li>
+                <li class="cursor-pointer focus:outline-none">
+                  This is item 37f398dc-394b-4058-b9bc-8ac6d8cb6ecf
+                </li>
+              </ul>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="pl-4 lg:mt-2 lg:border-0 ml-4 lg:pl-0 text-gray-500 border-l lg:ml-0 border-gray-200"
+              >
+                This is link 95c948c4-79a6-4367-9821-4419b0aff9c8
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="lg:text-lg xl:text-xl text-gray-300 sm:text-xl text-base"
+              >
+                This is link e8549f8b-dad8-4709-85b3-71b8fa227a57
+              </a>
+            </li>
+            <li class="font-medium text-gray-900 text-base hover:text-gray-700">
+              <ul class="hover:text-gray-900 text-gray-500 text-base font-medium">
+                <li class="bg-blue-gray-800 relative pb-36">
+                  This is item 2dac4f29-047e-49d6-832a-163330c05f4a
+                </li>
+                <li
+                  class="max-w-xs overflow-y-auto bg-white w-full pb-12 flex flex-col shadow-xl relative"
+                >
+                  This is item 9e3d4441-2653-46ba-ab55-62fb8954bf00
+                </li>
+                <li class="space-x-4 flex">This is item 6dd1d03f-f609-4b06-87d0-8495f2fb6a45</li>
+                <li class="sm:p-6 py-5 px-4">This is item 7cd036c8-9456-4dfe-904b-e2858cde46ad</li>
+                <li class="h-6 w-6">This is item a637dacd-e9d2-4e22-9862-55bcb96c23ec</li>
+              </ul>
+              <ul class="sr-only">
+                <li class="font-medium hover:text-gray-800 text-sm text-gray-700">
+                  This is item 2354d105-e0ee-4ea6-94fa-5cdadd4ba505
+                </li>
+                <li class="flex group">This is item ab4616f6-8234-4b83-8fb1-2b3ad15a2abc</li>
+                <li class="h-8 w-auto">This is item a283bb02-5e5a-4665-b7ce-667585affeec</li>
+              </ul>
+              <img
+                class="space-y-6 border-gray-200 py-6 border-t px-4"
+                alt="Profile picture of user f075312c-4eb5-4f7c-931d-0acae2d47159"
+                src="https://example.org/pictures/5f76c783-8c72-4ead-825a-951d12e7aeba"
+              />
+              <ol class="w-5 text-gray-400 ml-3 h-5">
+                <li
+                  class="lg:col-start-2 max-w-xl lg:mx-0 lg:max-w-none px-6 mx-auto lg:px-0 lg:py-32"
+                >
+                  This is item d12311c1-d9c8-4096-a76b-3cb2f8ddf338
+                </li>
+                <li
+                  class="w-full focus:ring-indigo-500 max-w-lg shadow-sm sm:max-w-xs sm:text-sm block border-gray-300 focus:border-indigo-500 rounded-md"
+                >
+                  This is item 47576c67-6fdb-4de0-9aed-f1e3ba08762f
+                </li>
+                <li class="grid sm:grid-cols-2 lg:grid-cols-4 grid-cols-2 py-20 gap-8 sm:gap-y-0">
+                  This is item 4ce69c28-6892-496b-b476-2203490eff9c
+                </li>
+              </ol>
+            </li>
+            <li class="py-4 lg:table-cell text-sm text-gray-500 px-3 hidden">
+              <img
+                class="text-white text-sm mt-1"
+                alt="Profile picture of user 71f4e784-196e-4658-9736-a9762043e910"
+                src="https://example.org/pictures/8804cdb1-93a5-4114-bae6-56d3a9fc0fa7"
+              />
+            </li>
+          </ol>
+          <a href="#" target="_blank" class="mt-2">
+            This is link a2e1d7fa-dd9b-4070-87ae-eb34293cfa66
+          </a>
+          <a href="#" rel="noreferrer" class="text-4xl font-bold tracking-tight text-gray-900">
+            This is link fb4727b4-b204-4314-8d64-f1816c801648
+          </a>
+        </li>
+      </ul>
+    </li>
+    <li class="xl:col-span-1 space-y-8">
+      <ol class="text-gray-900 sm:col-span-2 mt-1 text-sm">
+        <li class="lg:relative md:-mr-16 lg:m-0 lg:px-0 -mr-48 sm:pl-6 pl-4 lg:h-full">
+          <a href="#" target="_blank" rel="noreferrer" class="flex-shrink-0 h-5 w-5">
+            This is link 71d9e5b1-544b-4e3c-a0b3-e75d81ec5c53
+          </a>
+          <img
+            class="items-center space-x-2 flex"
+            alt="Profile picture of user d9cc37e1-1233-46b1-9b00-81e61f2873fd"
+            src="https://example.org/pictures/fa69e707-3fc1-4737-b84b-d596f783cce3"
+          />
+          <a href="#" target="_blank" rel="noreferrer" class="py-2 bg-white">
+            This is link ecfe9810-ef2d-4b9b-9de6-ec02bb3b9104
+          </a>
+          <img
+            class="h-5 w-5"
+            alt="Profile picture of user 77e67427-38fe-4cc7-8e6a-6187af2e6f6a"
+            src="https://example.org/pictures/5f0185e8-f2a8-4083-ac77-8c07ce5e0b5b"
+          />
+        </li>
+        <li class="text-indigo-600 mx-auto h-5 w-5">
+          <a href="#" class="divide-gray-200 divide-y">
+            This is link c610c86b-4fcf-4ff7-afa2-87c385f7430e
+          </a>
+        </li>
+        <li class="text-gray-500 w-5 h-5">
+          <a
+            href="#"
+            rel="noreferrer"
+            class="lg:px-8 py-16 lg:max-w-7xl sm:px-6 sm:py-24 px-4 mx-auto max-w-2xl"
+          >
+            This is link 7959c290-e7fb-436a-b1ea-697c9263f6ba
+          </a>
+          <ol class="text-gray-400 group-hover:text-gray-500">
+            <li
+              class="focus:outline-none bg-indigo-600 text-sm py-2 shadow-sm px-4 items-center hover:bg-indigo-700 focus:ring-2 inline-flex focus:ring-indigo-500 border border-transparent rounded-md text-white focus:ring-offset-2 font-medium"
+            >
+              <a href="#" class="sr-only"> This is link 491179a9-9d3b-44f8-be70-0afa9bed9424 </a>
+              <img
+                class="bg-white flex-col border shadow-sm border-gray-200 flex p-8 relative rounded-2xl"
+                alt="Profile picture of user eeee1a2f-23e3-4ba9-8906-f18bdacb7379"
+                src="https://example.org/pictures/bacd54ac-a27e-4a37-acfc-b8c055189f89"
+              />
+              <img
+                class="mt-4 text-sm text-gray-500"
+                alt="Profile picture of user cc41b938-1ee1-42dc-beb8-302cbbe58851"
+                src="https://example.org/pictures/a81f2184-68b6-4e33-8649-bfb52dfc88ce"
+              />
+            </li>
+            <li
+              class="px-3 hover:bg-indigo-700 focus:ring-offset-2 bg-indigo-600 focus:outline-none focus:ring-2 font-medium border inline-flex items-center text-xs shadow-sm py-1.5 focus:ring-indigo-500 border-transparent text-white rounded-full"
+            >
+              <img
+                class="hover:text-gray-800"
+                alt="Profile picture of user 39331500-46d4-4e51-b058-c44657a1fbd2"
+                src="https://example.org/pictures/01f045c3-8ccc-4ec6-9d36-21a5b7206900"
+              />
+              <img
+                class="py-2"
+                alt="Profile picture of user f5fcf3f7-d7b9-4200-a607-8057251b6410"
+                src="https://example.org/pictures/55483f60-d14a-4521-b020-0bb3d7e2ffd9"
+              />
+              <ul class="h-5 w-5">
+                <li class="h-6 w-6 text-white">
+                  This is item 9e2188b6-bec1-4939-9c2c-548aa00a3f7f
+                </li>
+                <li class="flow-root">This is item f5fc52e3-e6da-419d-acf4-b1eb57e2fea7</li>
+                <li
+                  class="text-gray-900 ring-gray-200 mt-2 text-sm grid ring-1 rounded-lg shadow grid-cols-7 bg-gray-200 gap-px"
+                >
+                  This is item 47ae5494-7bf4-4f27-b86a-de6970e4b0f3
+                </li>
+                <li
+                  class="md:grid-cols-12 md:auto-rows-min grid-cols-1 grid md:gap-y-16 md:grid-flow-col md:gap-x-8"
+                >
+                  This is item d9cabbaf-5bc2-4b2a-9628-2fb75964ae2b
+                </li>
+                <li
+                  class="ring-2 bg-white focus:outline-none text-sm flex rounded-full focus:ring-opacity-100 ring-opacity-20 ring-white"
+                >
+                  This is item 4c51a137-dbb6-4432-b4f8-5c993c174947
+                </li>
+              </ul>
+            </li>
+            <li class="flex items-center">
+              <a href="#" target="_blank" class="w-6 h-6">
+                This is link 9e6fcdec-776c-4a42-a26d-29c8a42b17f0
+              </a>
+              <img
+                class="truncate text-sm group-hover:text-gray-900 text-gray-500 font-medium"
+                alt="Profile picture of user b084dd9a-ffd4-4a7d-91f4-ae2be7b7f91f"
+                src="https://example.org/pictures/52b4447c-2693-4d03-afde-e7edc85e472f"
+              />
+            </li>
+          </ol>
+        </li>
+        <li class="font-medium text-base text-white">
+          <img
+            class="sr-only"
+            alt="Profile picture of user 4d03a5ed-360d-40bd-8d53-127e06f372c5"
+            src="https://example.org/pictures/a968594e-1cb5-412a-9cdc-7dcfc4d62b4f"
+          />
+          <ul class="py-3.5 whitespace-nowrap font-semibold text-left text-sm px-2 text-gray-900">
+            <li class="bg-indigo-700 lg:bg-transparent">
+              <img
+                class="p-8 bg-white"
+                alt="Profile picture of user 2893083a-a570-4244-b000-2a8100cf3112"
+                src="https://example.org/pictures/9a408aaf-d101-4665-ac34-c25f4028a51a"
+              />
+            </li>
+            <li class="overflow-hidden sm:opacity-0 lg:opacity-100 h-64 rounded-lg w-44">
+              <img
+                class="text-gray-400 bg-gray-50 relative focus:z-10 hover:bg-gray-100 py-1.5"
+                alt="Profile picture of user a1ce52b9-d024-49c1-9fcf-3b75fca4d317"
+                src="https://example.org/pictures/abd7adec-d9b7-4b12-8bab-d2fc2b382fe4"
+              />
+            </li>
+            <li class="w-5 text-gray-400 h-5 flex-shrink-0">
+              <ul class="mt-8">
+                <li class="ml-auto">This is item 7597feca-8419-40c8-9d52-2928a4d72705</li>
+                <li class="md:block hidden">This is item 531b4864-10b2-4fe4-8249-5ae35f8bb827</li>
+                <li class="flex-col flex justify-end flex-1">
+                  This is item 75d8096f-61b9-443d-b27b-d52f2bdedcbd
+                </li>
+              </ul>
+              <ol class="mt-6 space-y-6">
+                <li class="bg-gray-300 w-px h-5 relative md:hidden -mx-px">
+                  This is item 3e208f37-a576-4864-9cb1-1bfedbad0555
+                </li>
+                <li class="w-0 items-center flex flex-1">
+                  This is item 2107bb14-5190-4143-b543-15a9fb039487
+                </li>
+                <li
+                  class="bg-gradient-to-l absolute mix-blend-multiply to-cyan-700 inset-0 from-sky-800"
+                >
+                  This is item 9ceca0bd-37ea-4cd7-8765-fa2bd8708d9d
+                </li>
+                <li class="hover:text-gray-600 text-gray-500">
+                  This is item 2bea4ccb-fef5-4f3d-8983-fecb844c1693
+                </li>
+                <li class="w-0 font-normal py-3 text-right">
+                  This is item 791be99e-5f50-46dd-8b5f-1f1b2da9dfd6
+                </li>
+              </ol>
+              <a href="#" rel="noreferrer" class="bg-white shadow rounded-lg">
+                This is link 252ccb26-2460-441e-a23e-bbb7f03daf67
+              </a>
+              <img
+                class="relative flex flex-col-reverse group"
+                alt="Profile picture of user 3f526d1f-3a13-4821-be0c-3e061e95e609"
+                src="https://example.org/pictures/d0101b26-0726-49fe-ba2c-4e78df5191ac"
+              />
+            </li>
+          </ul>
+          <img
+            class="items-center justify-between flex-wrap flex"
+            alt="Profile picture of user 699979a6-6ea7-4ba6-a499-e4a23ae9bcd3"
+            src="https://example.org/pictures/86b9cc51-22c0-40d0-a5ac-d48341b9055f"
+          />
+        </li>
+        <li class="bg-white">
+          <ul class="text-indigo-600 focus:ring-indigo-500 border-gray-300 w-4 h-4">
+            <li class="ml-auto">
+              <ul class="sr-only">
+                <li class="sr-only">This is item dfb4c63c-e0b1-4063-846f-ff70ef8acd21</li>
+                <li class="bg-indigo-600 flex rounded-full w-10 items-center justify-center h-10">
+                  This is item ba43e118-333e-4fc1-9fd4-bc2891f9415e
+                </li>
+              </ul>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="px-3 ml-3 inline-block text-xs font-medium rounded-full py-0.5"
+              >
+                This is link e939d441-3859-4cb7-b400-3cb9aae19ee2
+              </a>
+              <a href="#" class="rounded-full bg-gray-100 h-10 w-10">
+                This is link 1d8dabf2-5d78-4deb-9a6a-7355e2eecc7c
+              </a>
+              <ul class="space-y-6 flex-col mt-6 flex">
+                <li class="hover:bg-gray-100 py-1.5 bg-white focus:z-10">
+                  This is item 1b8b0c3a-41c3-46b1-8ed8-5850f117c86a
+                </li>
+                <li class="text-gray-400">This is item 79fb8b7d-e616-458e-a940-95c99f29b3b4</li>
+              </ul>
+            </li>
+            <li class="border border-opacity-10 rounded-full w-4 h-4 border-black">
+              <ul class="text-lg text-gray-900 leading-6 font-medium">
+                <li class="tracking-tight text-white font-bold text-2xl">
+                  This is item adb431a4-f5ff-4b20-ab47-af5b5c1b1b34
+                </li>
+                <li class="max-w-7xl lg:px-8 px-4 sm:px-6 mx-auto">
+                  This is item 0c643ecf-9cc4-416c-a92b-b63044cb0478
+                </li>
+              </ul>
+              <a href="#" target="_blank" rel="noreferrer" class="text-sm text-gray-500 mt-2">
+                This is link ff28fe99-0702-4fc6-af57-7b287f381c50
+              </a>
+              <ol class="text-gray-200">
+                <li
+                  class="text-base sm:text-sm bg-white mt-3 justify-center focus:ring-offset-2 border border-gray-300 w-full sm:w-auto px-4 shadow-sm focus:outline-none text-gray-700 py-2 font-medium focus:ring-indigo-500 sm:mt-0 rounded-md focus:ring-2 inline-flex hover:bg-gray-50"
+                >
+                  This is item 1c21a131-7ab2-4b73-ad81-a7c67eb16129
+                </li>
+                <li class="bg-gray-900">This is item 7092f416-e7e2-4b6b-b62d-6ae4d587d292</li>
+              </ol>
+            </li>
+            <li class="text-sm grid-rows-1 gap-8 grid-cols-2 grid">
+              <ol class="text-sm font-semibold text-indigo-600 block hover:text-indigo-500">
+                <li
+                  class="border-transparent rounded-md font-medium bg-indigo-600 focus:ring-2 text-base border hover:bg-indigo-700 focus:ring-indigo-500 focus:outline-none shadow-sm focus:ring-offset-2 focus:ring-offset-gray-50 px-4 py-3 text-white w-full"
+                >
+                  This is item a13bc1c0-1645-4db5-8460-570cf1a70e17
+                </li>
+                <li class="text-gray-500">This is item 706a53de-e173-433b-88ae-bcd09931630e</li>
+                <li
+                  class="justify-center h-8 ring-8 ring-white flex bg-gray-100 items-center rounded-full w-8"
+                >
+                  This is item ae56bdd4-6e27-48b6-a916-6eb7ba24b3e6
+                </li>
+                <li
+                  class="bg-white hover:text-gray-900 text-sm border-b border-t text-gray-700 border-gray-300 hidden hover:bg-gray-50 px-3.5 font-medium focus:relative md:block"
+                >
+                  This is item 69288fa7-a02f-45b1-8b56-ddca176af792
+                </li>
+                <li class="space-y-8 lg:max-w-4xl mx-auto lg:px-0 sm:px-4 max-w-2xl">
+                  This is item 913134e4-70b7-4ec2-a38e-d8d3f8ed9888
+                </li>
+              </ol>
+              <ol class="overflow-hidden rounded-lg bg-white shadow">
+                <li class="lg:w-0 md:flex hidden md:flex-1 justify-end items-center">
+                  This is item ccf789b0-b8ad-4381-93c4-efd76d8fb223
+                </li>
+                <li class="font-bold text-xl sm:text-2xl text-gray-900">
+                  This is item 9ed7232a-c8cf-4b43-8cfe-425b66628760
+                </li>
+                <li
+                  class="text-gray-700 border-b border-gray-300 focus:relative px-3.5 hidden bg-white text-sm border-t hover:bg-gray-50 hover:text-gray-900 font-medium md:block"
+                >
+                  This is item 4f30ebe2-38e5-4a6e-9720-868133543798
+                </li>
+                <li class="h-5 w-5">This is item 1ad350e4-00b5-4f09-b79c-8cf92722d1e9</li>
+                <li class="mt-12">This is item e9368846-8690-4798-9def-16b9c8074d2f</li>
+              </ol>
+            </li>
+          </ul>
+          <ol class="w-16 h-16 rounded-full sm:hidden">
+            <li class="text-sm ml-3 text-gray-600">
+              <ul class="mt-6 text-gray-500 text-center text-sm sm:mt-0">
+                <li class="w-5 text-gray-400 h-5">
+                  This is item 13fba021-a9d2-4ef4-b28b-812f89910746
+                </li>
+                <li class="w-full justify-between flex items-center md:w-auto">
+                  This is item 3856ddd2-7afc-4686-be28-bc5ea6c3c837
+                </li>
+              </ul>
+              <a href="#" class="text-indigo-600 whitespace-nowrap hover:text-indigo-500">
+                This is link 6f40dd25-d3c3-422c-bc44-28e555750442
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                class="border-2 cursor-pointer border-transparent relative ml-4 focus:ring-offset-2 ease-in-out focus:ring-sky-500 duration-200 focus:outline-none focus:ring-2 w-11 transition-colors h-6 inline-flex flex-shrink-0 rounded-full"
+              >
+                This is link 8a03924e-1e9a-4d48-adf4-b40593f45385
+              </a>
+              <a href="#" target="_blank" class="h-full border-2 border-dashed border-gray-200">
+                This is link 1d369d70-4b65-40b1-aaa7-b240011c7ec1
+              </a>
+            </li>
+            <li class="relative bg-white">
+              <a href="#" class="w-5 h-5"> This is link 5781d822-1359-4b01-abd9-9987f17ffe08 </a>
+            </li>
+            <li
+              class="z-10 rounded-md bg-white absolute w-40 mt-2 right-0 ring-opacity-5 focus:outline-none ring-1 origin-top-right shadow-2xl ring-black"
+            >
+              <ul class="lg:gap-y-8 flex-shrink-0 gap-y-6 grid-cols-1 grid">
+                <li class="sm:ml-6 border-gray-200 border-l pl-4 sm:pl-6 ml-4">
+                  This is item 9e708d64-a7af-4e0c-b8f4-489bed6a146d
+                </li>
+                <li class="hover:bg-gray-100 focus:z-10 bg-white py-1.5">
+                  This is item 70a43706-c69c-468e-9fb2-0ce872f49cd6
+                </li>
+                <li class="justify-between items-center flex">
+                  This is item 9eea1c25-6279-47df-a39e-8e5ae93ac904
+                </li>
+              </ul>
+            </li>
+            <li class="w-6 h-6">
+              <img
+                class="bg-white hover:bg-gray-50 text-gray-500 py-2 justify-center border-gray-300 px-4 font-medium inline-flex rounded-md shadow-sm text-sm w-full border"
+                alt="Profile picture of user 19b53f8e-e4e6-47dc-9563-2de84d9f33eb"
+                src="https://example.org/pictures/7ba21118-4ab4-4b96-96ce-d46b508013d7"
+              />
+              <a href="#" class="font-medium text-lg text-gray-900 leading-6">
+                This is link 858f0a19-5ada-4b12-bc53-f929c6a8f893
+              </a>
+              <img
+                class="font-bold"
+                alt="Profile picture of user 2b092344-1ffa-4617-8e17-1171c71f5070"
+                src="https://example.org/pictures/9487b78c-d4f0-4542-af3b-a7408d8f5305"
+              />
+              <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                This is link 8b7fb772-9da0-4303-9059-e11fbc2ad396
+              </a>
+            </li>
+            <li class="relative bg-white">
+              <img
+                class="max-w-none mx-auto"
+                alt="Profile picture of user 6d559391-5b1a-4605-aff3-5f83bf4dd424"
+                src="https://example.org/pictures/8596ecb5-a94a-400a-85e1-7bbf86f4b5f3"
+              />
+              <img
+                class="bg-white hover:bg-gray-100 py-1.5 focus:z-10"
+                alt="Profile picture of user dda6c966-8a29-4de1-a2a7-94f0147a8544"
+                src="https://example.org/pictures/3ace6546-8ddc-453f-a2a0-72f82101d08f"
+              />
+              <ul class="flex py-4">
+                <li
+                  class="focus:z-10 px-3 text-gray-900 bg-white flex hover:bg-gray-100 flex-col py-2 h-14"
+                >
+                  This is item 5dabf9b2-d695-4943-b841-bf13c6f618ee
+                </li>
+                <li class="mt-12">This is item 7e406f44-c4e0-4085-84d5-ab5396f07f30</li>
+                <li class="text-gray-700 font-medium block text-sm">
+                  This is item e78847ac-41cd-4ad4-bf73-ae49d567a123
+                </li>
+                <li class="flex justify-between items-center">
+                  This is item 6e7f9588-82ad-470e-aa69-4b5b8237a3d4
+                </li>
+              </ul>
+              <img
+                class="w-5 ease-in-out inline-block shadow duration-200 transform rounded-full h-5 ring-0 transition bg-white"
+                alt="Profile picture of user 6fad8bef-23e2-4445-9c43-84171c15e105"
+                src="https://example.org/pictures/69f35e0f-1225-402b-a5bc-aec8dd5d4e08"
+              />
+            </li>
+          </ol>
+        </li>
+      </ol>
+      <a href="#" target="_blank" class="flex-shrink-0 bg-indigo-600">
+        This is link 4a584b67-4ea3-4588-b3c9-e136a6bd0225
+      </a>
+      <img
+        class="ml-auto"
+        alt="Profile picture of user e1b7849d-69ce-4322-b040-38aca60dbd00"
+        src="https://example.org/pictures/34faaa53-e860-4038-809f-55db6ec37476"
+      />
+      <ol class="font-semibold text-gray-500 flex-none text-xs ml-3">
+        <li class="rounded-md shadow">
+          <a
+            href="#"
+            class="focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none px-4 rounded-md hover:bg-gray-50 font-medium border text-sm bg-white focus:ring-2 py-2 border-gray-300 text-gray-700 shadow-sm"
+          >
+            This is link 3f15976c-6b5a-4183-a64d-e481b81ed218
+          </a>
+          <a href="#" rel="noreferrer" class="hover:text-gray-100 text-sm font-medium text-white">
+            This is link cfec2d9c-61f5-4d6e-97ab-98098c53a355
+          </a>
+          <img
+            class="flex-col py-6 bg-white overflow-y-scroll shadow-xl flex h-full"
+            alt="Profile picture of user 5c30df26-227b-4d12-962a-0d867a233664"
+            src="https://example.org/pictures/d6409352-cfaa-4fe2-b9b7-45550e4f70be"
+          />
+          <ul
+            class="w-12 -mr-3 items-center hover:text-gray-900 h-12 inline-flex text-gray-500 rounded-md justify-center"
+          >
+            <li class="sr-only sm:not-sr-only">
+              <a href="#" target="_blank" rel="noreferrer" class="font-medium text-gray-700">
+                This is link 23498a5d-e81f-44a5-a834-740e35ce0a66
+              </a>
+              <a href="#" target="_blank" class="px-3 text-gray-500 whitespace-nowrap py-4 text-sm">
+                This is link 65192ac4-9cf3-49e9-81ed-b868ca1fdbd1
+              </a>
+            </li>
+            <li
+              class="absolute transform translate-y-12 hidden right-full translate-x-1/2 lg:block"
+            >
+              <img
+                class="relative py-4 flex items-start"
+                alt="Profile picture of user d6c41470-474f-48cf-9ad9-62386afdc459"
+                src="https://example.org/pictures/6b41afc1-43ab-4d8a-a00b-e6d188152d87"
+              />
+              <img
+                class="border-t border-gray-200"
+                alt="Profile picture of user 7f4a9474-a912-4015-bd5a-42b53b0567a8"
+                src="https://example.org/pictures/d6462743-3d2c-444a-9170-94615532f5d6"
+              />
+              <img
+                class="font-medium text-gray-900"
+                alt="Profile picture of user 0f8e411a-fab9-4858-9171-0998c8274110"
+                src="https://example.org/pictures/b7f838c4-8feb-4d62-b039-6baf1fef4b2b"
+              />
+            </li>
+            <li class="shadow-sm mt-1 rounded-md -space-y-px">
+              <ol class="text-indigo-600 text-lg font-semibold">
+                <li class="block text-gray-900 p-2 -m-2 font-medium">
+                  This is item d9c1d647-62ab-4698-bd56-6bafb6e97c24
+                </li>
+                <li class="sr-only">This is item 945d0ca2-9000-4d7f-ba21-80fba6b1745b</li>
+                <li class="bg-gray-100 border h-3 rounded-full border-gray-200">
+                  This is item 610be942-2d64-4d83-96a2-7ecbe30cc9b5
+                </li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+        <li class="w-full">
+          <img
+            class="border-gray-200 border-t py-2"
+            alt="Profile picture of user 387f9f0b-9942-4f14-a8eb-dedb668b5303"
+            src="https://example.org/pictures/76b565fd-22db-40be-b9a9-bd872beddbc0"
+          />
+          <img
+            class="justify-between flex"
+            alt="Profile picture of user 0e10a6ad-623f-48f5-bf1f-3515c5fd0f04"
+            src="https://example.org/pictures/5925cb06-a9ae-4d04-ab07-29caf2e1d4da"
+          />
+          <a href="#" target="_blank" rel="noreferrer" class="mt-4">
+            This is link 17afc43c-8804-4dd5-8fd1-d75bbe45a1d2
+          </a>
+          <img
+            class="bg-gradient-to-r justify-center shadow-lg inline-flex items-center to-cyan-600 p-3 rounded-md from-teal-500"
+            alt="Profile picture of user 41182902-5b89-4793-9c1f-3499609395fd"
+            src="https://example.org/pictures/2c110fd7-b211-476b-be94-1a2198b7cf58"
+          />
+        </li>
+        <li class="flex-1 items-center w-0 flex">
+          <img
+            class="sm:tracking-tight text-gray-900 sm:text-3xl sm:truncate font-bold leading-7 text-2xl"
+            alt="Profile picture of user 686f62d4-f690-47dd-a45f-9c3ed0d0b471"
+            src="https://example.org/pictures/a2016f8d-e99a-4e00-8d91-79014999278a"
+          />
+          <a href="#" target="_blank" class="text-gray-900 font-medium">
+            This is link 06fc0e0a-11c1-4c28-8815-e5cd940d9790
+          </a>
+        </li>
+      </ol>
+    </li>
+    <li class="mt-1">
+      <a
+        href="#"
+        target="_blank"
+        class="bg-gray-800 py-32 lg:px-16 px-6 sm:px-12 relative sm:py-40"
+      >
+        This is link 71902123-8c4d-468a-b5af-82f831eceec5
+      </a>
+      <img
+        class="bg-indigo-800"
+        alt="Profile picture of user e8ed402d-a130-4878-b271-39be61244d4a"
+        src="https://example.org/pictures/6115d501-afef-4525-b25b-2723311b80e1"
+      />
+      <ol class="grid-cols-1 lg:gap-x-8 gap-y-10 lg:grid-cols-2 lg:gap-y-0 lg:col-span-2 grid">
+        <li class="flex justify-center rounded-full w-7 items-center h-7 mx-auto">
+          <ul class="bg-white">
+            <li
+              class="focus:ring-indigo-500 sm:w-auto border hover:bg-indigo-700 focus:ring-2 font-medium shadow-sm rounded-md text-sm inline-flex justify-center focus:ring-offset-2 text-white bg-indigo-600 focus:outline-none px-4 border-transparent items-center py-2"
+            >
+              <ul class="flex items-center flex-1 justify-end">
+                <li class="flex px-4 space-x-8 -mb-px">
+                  This is item fe70eff5-e8ff-4e2f-a7f5-72de785af0dc
+                </li>
+                <li
+                  class="w-5 duration-150 mr-2 transition-colors group-hover:text-gray-400 flex-shrink-0 h-5 ease-in-out transform"
+                >
+                  This is item f72b3a28-0c3f-4d41-aead-60d3383d3335
+                </li>
+                <li
+                  class="border-gray-300 focus:border-indigo-500 block focus:ring-indigo-500 rounded-md w-full shadow-sm sm:text-sm"
+                >
+                  This is item 91853297-613c-46db-84bc-a204d851f19f
+                </li>
+              </ul>
+              <ol class="max-w-7xl lg:px-8 sm:px-6 mx-auto px-4 mt-4 relative lg:mt-5">
+                <li class="py-1">This is item dbd32ccd-8cad-4264-83cf-886825549ce0</li>
+                <li class="mt-5 flex-col flex flex-grow">
+                  This is item e333be1e-c594-4a00-85ec-8ab650cba984
+                </li>
+              </ol>
+              <ul
+                class="focus:ring-2 focus:outline-none p-2 focus:ring-gray-900 items-center inline-flex focus:ring-inset hover:text-gray-500 text-gray-400 hover:bg-gray-100 justify-center rounded-md"
+              >
+                <li class="sr-only">This is item 0ff030be-dafe-437a-a093-3421b50edd2c</li>
+                <li
+                  class="absolute bottom-0 top-0 pointer-events-none sm:block right-0 lg:hidden hidden w-1/2"
+                >
+                  This is item bde17fe6-f5d0-441f-bf66-36dd33fb71bc
+                </li>
+                <li class="sm:col-span-3">This is item 6ed8d42a-410c-4a7c-958c-520f23981340</li>
+                <li class="grid-cols-2 gap-y-10 grid gap-x-8">
+                  This is item bf70612b-3305-4c8d-8d88-1532b70eb477
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="justify-between flex-wrap flex items-center">
+                This is link 006b35d1-7ea4-4a52-9654-28a27d5d8429
+              </a>
+            </li>
+            <li class="text-gray-400 ml-2 p-2 hover:text-gray-500">
+              <img
+                class="text-gray-500 font-medium text-xl"
+                alt="Profile picture of user 59e04a06-14fa-4d24-a70a-eb73f0c6a0f3"
+                src="https://example.org/pictures/041ea4ab-8b31-47c8-99f7-82a628dee24d"
+              />
+              <a href="#" class="mt-1 flex rounded-md shadow-sm">
+                This is link 85977217-dd00-4c91-89e1-7b2f7fa509e8
+              </a>
+              <img
+                class="lg:px-8 align-middle py-2 inline-block min-w-full md:px-6"
+                alt="Profile picture of user 09f11b11-a47e-4597-8c1d-2bbb1e1d7c53"
+                src="https://example.org/pictures/2c414e7f-5a37-4b80-9cb8-6978c8e0008f"
+              />
+            </li>
+            <li class="ml-2 w-5 group-hover:text-gray-500 h-5">
+              <ul class="gap-x-6 gap-y-10 grid-cols-1 grid">
+                <li class="rounded-full mx-auto justify-center flex h-7 items-center w-7">
+                  This is item 5e9ab136-ace9-4187-8d1e-1241aa3b5d56
+                </li>
+                <li class="focus:z-10 py-1.5 hover:bg-gray-100 bg-white">
+                  This is item 1c9685ae-482d-470a-993b-1fccede871e3
+                </li>
+                <li class="flex text-gray-700 items-center hover:text-gray-800 text-sm font-medium">
+                  This is item 29cd1cce-d82a-49c9-99a9-5a2975307eff
+                </li>
+              </ul>
+              <img
+                class="py-2 border-transparent border px-4 font-medium items-center shadow-sm hover:bg-indigo-700 whitespace-nowrap text-base ml-8 justify-center inline-flex text-white rounded-md bg-indigo-600"
+                alt="Profile picture of user 9eadb997-d2e7-4d1b-a840-5b173c37a7ab"
+                src="https://example.org/pictures/d0f32ff1-4eca-491d-8c8b-78ad740b8008"
+              />
+              <img
+                class="ring-black divide-gray-50 shadow-lg bg-white rounded-lg ring-opacity-5 divide-y-2 ring-1"
+                alt="Profile picture of user c80c773f-4996-434f-be8c-162f6c5cae23"
+                src="https://example.org/pictures/ed41a85f-18a4-4270-9163-75c3cfff5fa1"
+              />
+              <a href="#" class="sm:col-span-4 col-span-full">
+                This is link 6c318e9d-8857-482f-bff4-d4190e039906
+              </a>
+            </li>
+            <li class="px-4 w-1/4">
+              <ol class="mx-auto flex rounded-full h-7 w-7 items-center justify-center">
+                <li class="sm:px-6 py-16 sm:py-20 lg:px-8 text-center mx-auto max-w-2xl px-4">
+                  This is item 284d4380-27e2-4eae-85bd-0207efbaff36
+                </li>
+                <li class="items-center group p-2 flex -m-2">
+                  This is item 90f307ac-212e-4dd5-95ac-3db8a501c657
+                </li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+        <li class="focus:z-10 bg-white py-1.5 hover:bg-gray-100">
+          <a href="#" target="_blank" class="h-full rounded-full w-full">
+            This is link bdf4a115-fb79-4a34-afda-f1640e09f79b
+          </a>
+          <a
+            href="#"
+            class="bg-gray-50 text-gray-400 hover:bg-gray-100 focus:z-10 py-1.5 relative rounded-tl-lg"
+          >
+            This is link f33b5865-4cac-44ac-ac24-5a6779b99366
+          </a>
+          <ol
+            class="lg:table-cell font-semibold px-3 text-gray-900 text-left py-3.5 text-sm hidden"
+          >
+            <li class="lg:hidden relative z-40">
+              <a
+                href="#"
+                class="border-2 border-dashed border-gray-300 w-full text-gray-200 rounded h-full block"
+              >
+                This is link 7de32c4d-8793-4ef9-b2ed-9a25f5c55432
+              </a>
+              <a href="#" target="_blank" rel="noreferrer" class="grid-cols-2 grid relative">
+                This is link cb440acb-ef96-43cc-a0d8-014ca729b776
+              </a>
+              <a href="#" rel="noreferrer" class="bg-gray-900">
+                This is link ac7faeb0-81f3-46ee-a2bc-5a28e562b1a2
+              </a>
+            </li>
+            <li class="flow-root">
+              <ul class="px-3 text-gray-500 whitespace-nowrap text-sm py-4">
+                <li class="mx-auto h-6 w-6 text-gray-500">
+                  This is item 6a780633-056b-41d6-9295-8e822f22dea5
+                </li>
+                <li class="text-sm text-gray-900 font-medium">
+                  This is item 2cafeba2-8659-45e0-aea6-df7740a71b33
+                </li>
+                <li class="ml-auto">This is item 95630b5a-3301-41e8-8b5a-9e715f9f9a26</li>
+                <li class="text-gray-500">This is item 0520b7dc-ea9f-48f9-bf68-78555fa17c1e</li>
+              </ul>
+            </li>
+            <li class="inline-flex p-2 items-center text-gray-400 rounded-md -m-2 justify-center">
+              <ul class="line-clamp-2 mt-1 text-sm text-gray-600">
+                <li class="lg:col-span-3 sm:px-6 px-2 lg:px-0 py-6 lg:py-0">
+                  This is item 8b77ca76-7074-4e18-8a61-cb14fe71957f
+                </li>
+                <li class="mt-1 font-medium text-gray-900">
+                  This is item ac7880e4-0e59-43cd-9736-7b9b23ffa052
+                </li>
+                <li class="lg:border-t-0 mt-7 border-t divide-y">
+                  This is item bf5b0f90-fd58-4a28-bd32-adb816d78141
+                </li>
+                <li class="lg:ml-8 flex items-center">
+                  This is item cc5f10ef-1ed8-48e1-988b-3d43a43c8be8
+                </li>
+                <li class="sr-only">This is item 58e72ca2-f68b-440b-8695-06acacadd709</li>
+              </ul>
+            </li>
+            <li class="block text-gray-700 font-medium text-sm">
+              <ol
+                class="bg-white font-medium rounded-md focus:ring-indigo-500 focus:outline-none focus:ring-2 text-indigo-600 hover:text-indigo-500 focus:ring-offset-2"
+              >
+                <li
+                  class="w-full focus:ring-indigo-500 rounded-md sm:text-sm focus:border-indigo-500 block shadow-sm border-gray-300"
+                >
+                  This is item ddfe5aa5-2e69-428c-b89f-1cc3d6ddad0a
+                </li>
+                <li class="text-gray-700 text-sm px-4 block py-2">
+                  This is item 7c8dbc9f-fab4-45c4-b26f-0680ae764fdc
+                </li>
+                <li class="mt-2 items-center flex text-gray-700">
+                  This is item 2377ecef-f129-4275-840f-1ed581c7664d
+                </li>
+                <li
+                  class="w-full shadow hover:to-pink-600 text-sm border py-2 block from-orange-500 font-semibold rounded-md to-pink-500 mt-6 text-white bg-gradient-to-r text-center border-transparent"
+                >
+                  This is item 14d87872-de52-4182-99e6-c08139bbc813
+                </li>
+                <li class="absolute top-full text-sm inset-x-0 text-gray-500">
+                  This is item 99e21507-0315-4cbb-9604-2913275a2ea3
+                </li>
+              </ol>
+              <img
+                class="z-20 bg-black fixed bg-opacity-25 inset-0"
+                alt="Profile picture of user 0cddc7b8-38c4-4165-a47d-b68ae537c4a5"
+                src="https://example.org/pictures/2ec5a191-a418-4c2e-a214-7b57ea508719"
+              />
+              <ol class="bg-white flex-grow flex flex-col">
+                <li class="-mx-4 md:mx-0 md:rounded-lg ring-gray-300 sm:-mx-6 mt-10 ring-1">
+                  This is item 57f9c47a-b5d4-49be-b15d-53a0598757af
+                </li>
+                <li class="text-gray-500 text-base mt-2">
+                  This is item 9fc38651-1844-4324-bb8a-47e53de1ad0a
+                </li>
+                <li class="text-gray-400 bg-gray-50 hover:bg-gray-100 focus:z-10 py-1.5">
+                  This is item 5b25a636-631b-43f0-8a37-018fdb20bf64
+                </li>
+                <li class="sr-only">This is item 4d06b3ed-3bc8-4fa4-ba04-acab9d82e278</li>
+              </ol>
+              <ol class="font-medium text-gray-700 block text-sm">
+                <li class="w-full mt-4">This is item 56ffb6e0-2c35-4623-bbd7-da84781756df</li>
+                <li class="grid-cols-2 grid gap-x-8 gap-y-10">
+                  This is item 64dbc8f0-19ba-487b-86da-da4d4cd5084d
+                </li>
+                <li class="col-span-full">This is item 60994276-0bfd-47e8-8673-57df2169b364</li>
+              </ol>
+            </li>
+          </ol>
+        </li>
+      </ol>
+      <img
+        class="bg-pink-100 items-center font-medium inline-flex py-0.5 px-2 text-xs text-pink-800 rounded"
+        alt="Profile picture of user 9cdaf293-e82a-4eaa-af91-f766a72ba058"
+        src="https://example.org/pictures/e4d91606-bd0f-470f-af82-84af8c055d34"
+      />
+    </li>
+  </ul>
+  <select class="md:col-span-3 lg:col-span-1 flex justify-center col-span-2">
+    <option>This is item 876e1868-24d7-4264-bff8-a986733316fc</option>
+    <option>This is item 394f476d-4701-44cf-bc76-ad9ab15e2dfd</option>
+    <option>This is item cde0d4e1-8a79-415f-8c4b-68dfef678945</option>
+    <option value="82fb2036-a0a4-4c54-939d-4db9dca59fa9">
+      This is item b6f42e5f-74e7-44b0-9676-b5b4fe6a5606
+    </option>
+    <option value="9beb31eb-39e9-4083-941f-360a1f14fcdd">
+      This is item 42bf097b-999e-4e55-b5f1-6b60b1d41ed7
+    </option>
+    <option value="8d62c76c-a698-4003-aa0e-3b1168f1911a">
+      This is item fa8ce762-6735-4e85-94fe-a0ad7e8e7f9e
+    </option>
+  </select>
+</div>
diff --git a/oxide/crates/core/benches/fixtures/template-003.html b/oxide/crates/core/benches/fixtures/template-003.html
new file mode 100644
index 000000000..e135c0429
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-003.html
@@ -0,0 +1,1797 @@
+<div class="h-8 mt-1 flex w-8 justify-center text-gray-900 items-center font-semibold">
+  <p class="mx-auto flex justify-center items-center h-7 rounded-full w-7">
+    <span class="py-10 bg-gray-100"> This is text 836e86d8-98b4-4cc0-a1e8-d56d2960c916 </span>
+    <a href="#" class="px-2 text-gray-900 py-3 font-medium">
+      This is link 9e4bd8d6-5f33-4b19-83ae-1025bf2ee87d
+    </a>
+  </p>
+  <ol class="w-4 border-gray-300 focus:ring-indigo-500 rounded text-indigo-600 h-4">
+    <li class="text-white h-6 w-6">
+      <img
+        class="text-gray-500"
+        alt="Profile picture of user a0e842b8-d3ae-4ef0-9b48-058444b57fe3"
+        src="https://example.org/pictures/e28efea4-3a03-4796-b6ac-a5e64c5e74c1"
+      />
+      <a href="#" target="_blank" rel="noreferrer" class="border-b border-gray-200">
+        This is link 30477fc0-bc3f-4002-a52c-7c23684d5a25
+      </a>
+      <ol class="text-gray-500 font-medium hover:text-gray-600">
+        <li class="fixed inset-0 flex z-40">
+          <ol class="lg:col-span-2 lg:row-span-2">
+            <li class="items-center flex rounded-full justify-center">
+              <a href="#" target="_blank" class="justify-between items-center flex">
+                This is link c8408f7d-789a-4741-8da5-6c06558648f0
+              </a>
+              <img
+                class="text-gray-600"
+                alt="Profile picture of user 5e352ecc-7e2b-45bd-9c40-be5f325d28ea"
+                src="https://example.org/pictures/1b05b9a1-2d62-4e15-9879-6b113c17686a"
+              />
+            </li>
+            <li class="sr-only">
+              <img
+                class="border hover:bg-indigo-700 border-transparent justify-center py-2 font-medium focus:ring-indigo-500 bg-indigo-600 flex px-4 focus:ring-offset-2 text-white w-full rounded-md shadow-sm focus:outline-none focus:ring-2 items-center text-base"
+                alt="Profile picture of user e5b4fa11-f581-4d3c-a47d-19ed195fd84b"
+                src="https://example.org/pictures/d7d3a831-c7db-4c6f-af64-88d4d9b37128"
+              />
+              <img
+                class="text-base text-gray-500 font-medium"
+                alt="Profile picture of user 587f340d-38db-4961-82a0-cc57b710c6c6"
+                src="https://example.org/pictures/0d96ad14-b3fa-4327-ac2f-26d515b73f8b"
+              />
+            </li>
+            <li class="bg-gray-50 px-4 sm:p-6 py-5">
+              <ol
+                class="border text-gray-500 hover:bg-gray-50 relative text-sm bg-white items-center px-4 inline-flex py-2 focus:z-20 border-gray-300 font-medium"
+              >
+                <li class="text-gray-900 font-medium">
+                  This is item c057ce5b-9c22-4373-8a90-894e3191b1f7
+                </li>
+                <li
+                  class="w-full border-dashed border-gray-300 rounded h-16 text-gray-200 border-2 bg-white block"
+                >
+                  This is item 49196c3d-7bac-456c-ad29-53fa40dc230b
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="rounded-full items-center w-7 h-7 flex justify-center mx-auto"
+              >
+                This is link 061e3624-7c72-4d2c-9dc3-5ea37fc9f5f5
+              </a>
+            </li>
+            <li
+              class="text-gray-900 font-medium border sm:rounded-md inline-flex focus:border-blue-600 focus:ring-1 text-sm focus:z-10 rounded-r-md focus:ring-blue-600 px-2 sm:px-3 bg-white items-center hover:bg-gray-50 focus:outline-none relative border-gray-300 py-2"
+            >
+              <ol class="mt-3">
+                <li class="text-gray-400 h-5 w-5">
+                  This is item 395207e4-33bb-42a2-8f61-58a7f521868c
+                </li>
+                <li class="font-medium block text-sm text-gray-700">
+                  This is item 5f11bf0c-36bd-45aa-977c-bd438a89b0bc
+                </li>
+                <li
+                  class="rounded-lg group-hover:opacity-75 aspect-h-1 overflow-hidden bg-gray-100 aspect-w-1"
+                >
+                  This is item 0e1cd426-b4ed-4cd3-8887-948b4a0da354
+                </li>
+              </ol>
+              <a href="#" target="_blank" class="hidden lg:block lg:self-stretch lg:ml-8">
+                This is link 45f5f357-c72d-43e0-82cb-b0ae9f7722ee
+              </a>
+              <ul
+                class="rounded-lg ring-black overflow-hidden ring-opacity-5 shadow-md ring-1 bg-white"
+              >
+                <li class="font-medium text-gray-900 text-sm">
+                  This is item 0715564d-b88f-403d-ab11-67a2a6e86e18
+                </li>
+                <li class="flex flex-col flex-1 divide-cyan-800 mt-5 overflow-y-auto divide-y">
+                  This is item b3ffbcc2-4e3b-452d-8087-1469ed896687
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <ul class="py-6 space-y-6 border-gray-200 border-t px-4">
+            <li class="text-sm hover:text-gray-100 font-medium text-white">
+              <ol class="flex ml-4 space-x-4 flex-shrink-0 items-start">
+                <li class="text-gray-900 font-medium">
+                  This is item cb579a90-0215-406f-a53a-cbd8cb9331ce
+                </li>
+                <li class="-m-2 items-center p-2 flex">
+                  This is item 0ecc60ca-98a1-472c-ae9f-aea43fe215ab
+                </li>
+                <li class="flex sm:max-w-md mt-2">
+                  This is item 61215cdf-5505-4ae1-8e3a-b334d5b3b07c
+                </li>
+                <li class="sr-only">This is item 2a1b833b-b584-45a3-abff-8ad46d5854b9</li>
+                <li class="w-28 bg-indigo-700 overflow-y-auto md:block hidden">
+                  This is item c7e59f4c-7995-4aa4-9c35-08ffbabdd5e9
+                </li>
+              </ol>
+              <img
+                class="relative"
+                alt="Profile picture of user e6b6607c-0d3d-4971-a913-6b1d823a9837"
+                src="https://example.org/pictures/9045a8fa-af0c-46b3-ac3b-ccd81299ead5"
+              />
+              <ol class="items-center md:hidden flex -mr-2">
+                <li class="bg-gray-50">This is item f5ba4434-ae7e-45ad-952e-47cf0ffdfd2a</li>
+                <li class="mt-4 space-y-4">This is item 340e1a85-cd78-4018-9a18-684cba5a81b5</li>
+                <li class="relative z-0">This is item 53e5348e-d341-4eba-82dc-d9dc77dc7681</li>
+                <li
+                  class="items-center md:max-w-3xl lg:mx-0 xl:px-0 px-6 md:mx-auto py-4 lg:max-w-none flex"
+                >
+                  This is item 8fc1cc12-27cb-4e7e-98da-19b8968be762
+                </li>
+                <li class="pb-10 border-gray-200 border-b">
+                  This is item 50541d5a-8191-4c08-857c-86b6d3d6ec14
+                </li>
+              </ol>
+            </li>
+            <li class="text-gray-700 block ml-3 text-sm font-medium">
+              <ol class="border-b border-gray-200">
+                <li class="mt-1">This is item 9bad4fce-bc73-47da-b830-3669e5535db9</li>
+                <li class="relative mt-px flex">
+                  This is item 90531b39-cf93-4e52-a3d4-8f66448b00e4
+                </li>
+                <li
+                  class="-mb-px duration-200 pt-px relative border-b-2 font-medium items-center z-10 flex ease-out transition-colors text-sm"
+                >
+                  This is item 97306b2c-8c16-4d89-ac20-c869372c6618
+                </li>
+                <li class="focus:z-10 py-1.5 text-gray-400 bg-gray-50 hover:bg-gray-100">
+                  This is item 78a4c873-89c4-44f5-9139-b722276f3371
+                </li>
+                <li class="rounded-full flex w-7 mx-auto h-7 justify-center items-center">
+                  This is item 510e3438-17dd-4c0e-abcb-e536c33fe39a
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="bg-white overflow-hidden shadow sm:rounded-md"
+              >
+                This is link 45438ba5-842a-4435-8f1d-bdcaf227cba8
+              </a>
+              <img
+                class="text-xs sticky left-0 -mt-2.5 text-right pr-2 leading-5 text-gray-400 w-14 -ml-14"
+                alt="Profile picture of user e3a2df48-c057-47cf-ba5d-c36ce5daff6a"
+                src="https://example.org/pictures/844b59a5-dee2-470f-a0a4-5d737df5e770"
+              />
+            </li>
+          </ul>
+          <img
+            class="text-gray-500 -m-2 block p-2"
+            alt="Profile picture of user 97267d42-8a97-499b-9e00-9d9cfa6da07e"
+            src="https://example.org/pictures/71402eff-ad0f-4513-858c-aba933acb759"
+          />
+        </li>
+        <li class="w-full sm:h-full object-cover h-full object-center sm:w-full">
+          <ul class="w-7 h-7 rounded-full flex items-center justify-center mx-auto">
+            <li class="flex-1 bg-white px-2 space-y-1">
+              <a href="#" class="h-5 w-5"> This is link 10c68f64-3291-43b2-9368-178533d0af8f </a>
+              <a href="#" class="text-base font-medium text-gray-900">
+                This is link 3bc959ab-5ecd-4cb8-b281-8fef1c49def3
+              </a>
+              <a href="#" class="mt-1"> This is link 967b2db6-c38f-465f-a256-043db89719d1 </a>
+              <ol class="text-sm items-center text-gray-500 flex mt-2">
+                <li class="bg-white shadow-sm">
+                  This is item 64f7e4a6-8102-448b-82eb-176bbbcd8b5b
+                </li>
+                <li class="sr-only">This is item cea7356f-b8b9-4bb1-8bf3-b466027c2b73</li>
+                <li class="sr-only">This is item 1d561a0c-b820-4f1e-8f7f-c5acea51e676</li>
+                <li class="w-1/4 px-4">This is item c59908ef-a8aa-4ac9-a562-aeb5498901ff</li>
+              </ol>
+            </li>
+            <li class="lg:col-span-7">
+              <ul class="text-sm mt-4 text-gray-700">
+                <li class="sm:max-w-md mt-2 flex">
+                  This is item 989954ab-2b75-4bd1-a988-d96160530009
+                </li>
+                <li class="mt-6">This is item a266e290-5eb4-4ccd-a4e1-7cb3b578499e</li>
+                <li
+                  class="font-medium text-center block px-4 rounded-md shadow border border-transparent w-full hover:bg-green-500 text-white bg-green-400 py-2"
+                >
+                  This is item 602983e8-a1fc-4452-b02e-6224f9ea1002
+                </li>
+              </ul>
+            </li>
+            <li class="rounded-full h-10 w-10">
+              <img
+                class="rounded-full w-7 h-7 justify-center mx-auto flex items-center"
+                alt="Profile picture of user fd6a3e7e-6f06-4e61-9ac0-46fab81b14bb"
+                src="https://example.org/pictures/1accdff4-7b14-49dc-9dda-055f89b78afd"
+              />
+              <ol class="text-indigo-600 hover:text-indigo-900">
+                <li class="relative">This is item b1c61ed4-2740-48a7-a905-8315ecead010</li>
+                <li class="flex-shrink-0 h-5 text-white w-5">
+                  This is item 184eaf1c-248f-4f1b-becd-fd9ff1afe7e1
+                </li>
+                <li class="h-full space-x-8 flex">
+                  This is item d18a7d9f-0957-409c-bb81-6fbdbd7915d6
+                </li>
+                <li class="text-indigo-600 text-sm font-medium hover:text-indigo-500">
+                  This is item c0804123-0c73-4ace-92d6-14c2f86c59f4
+                </li>
+                <li class="sm:max-w-xs mt-4">This is item 2cf99604-4831-45a0-b996-ce5aee4c2edd</li>
+              </ol>
+              <ul class="rounded-md flex mt-1 shadow-sm">
+                <li class="flex items-center w-7 rounded-full mx-auto justify-center h-7">
+                  This is item d781aba5-0df3-49c3-914f-923056e061cb
+                </li>
+                <li class="w-1/4 px-4">This is item b53b6af3-2dff-4241-8623-6f46876e1d0a</li>
+                <li class="sm:text-4xl text-gray-900 font-bold tracking-tight text-4xl">
+                  This is item 309f238a-402b-457d-ac39-f3213233fa44
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="gap-x-4 gap-y-6 sm:grid-cols-3 grid-cols-1 grid mt-6">
+            <li class="text-lg leading-6 text-gray-900 font-medium">
+              <a
+                href="#"
+                target="_blank"
+                class="lg:px-8 sm:px-6 max-w-7xl text-center px-4 mx-auto"
+              >
+                This is link 7fee9a30-c948-4413-b008-07ccdef01f6a
+              </a>
+            </li>
+            <li class="rounded-md shadow-sm mt-1 relative">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="py-2 align-middle min-w-full lg:px-8 md:px-6 inline-block"
+              >
+                This is link cfb757dd-9ad7-4fd1-b4bb-05d8c03f89e7
+              </a>
+              <img
+                class="absolute shadow bg-white top-1/2 inset-0"
+                alt="Profile picture of user 5f0c4f37-7d80-4b81-aa03-4a58c9bd8bd0"
+                src="https://example.org/pictures/728ea3d5-b2f4-4b4e-a9dc-a9a192d094dc"
+              />
+              <ol class="sr-only">
+                <li class="text-sm ml-2 flex text-gray-500 items-center">
+                  This is item e81c40f9-879f-450f-97fc-e20e0d64cbcb
+                </li>
+                <li class="block text-sm font-medium text-warm-gray-900">
+                  This is item 5e582e0c-4296-4044-b337-9e972e2ad643
+                </li>
+                <li class="hover:text-white text-gray-300 hover:bg-gray-700">
+                  This is item 0d449017-fc20-4fd5-978c-5273836c7bc4
+                </li>
+              </ol>
+              <ol class="flex-none hidden text-gray-400 ml-3 w-5 h-5">
+                <li
+                  class="text-gray-900 px-3 py-2 bg-white hover:bg-gray-100 flex focus:z-10 h-14 flex-col"
+                >
+                  This is item 1f22f415-53f3-406b-9cde-83fa9f8c1007
+                </li>
+                <li class="flex-1 flex w-0 -ml-px">
+                  This is item 9c771dc8-ae44-4bb8-b650-534475d0b695
+                </li>
+                <li
+                  class="flex-col-reverse lg:grid lg:gap-x-8 lg:items-center lg:grid-cols-12 flex"
+                >
+                  This is item 8741638b-7866-452f-ac04-5f844bd76850
+                </li>
+                <li class="group-hover:text-indigo-700 text-indigo-500 order-1">
+                  This is item d29e1053-bf22-4e92-bbd8-8deb0b4ed801
+                </li>
+              </ol>
+            </li>
+            <li
+              class="-top-32 left-1/2 absolute sm:translate-x-0 -translate-x-1/2 sm:top-6 transform"
+            >
+              <img
+                class="text-white block"
+                alt="Profile picture of user 958da973-a646-449c-95d3-0d74b837f30b"
+                src="https://example.org/pictures/f41fb102-7d2f-49f1-9312-b6b3fd0b4cfa"
+              />
+            </li>
+            <li class="text-gray-500 mt-6 text-sm">
+              <ul class="lg:py-20 mx-auto sm:px-6 py-16 max-w-7xl px-4 lg:px-8">
+                <li class="py-2 border-gray-200 border-t">
+                  This is item bbb1b755-ec35-45c8-b353-f2e7c41030bf
+                </li>
+                <li class="text-sm font-medium text-gray-900">
+                  This is item aa45ba7d-d709-4656-ae61-5ae5ebc1ae00
+                </li>
+                <li class="sm:px-14 py-14 text-center px-6">
+                  This is item 02b590ec-ac10-48b2-87c1-86f5a33d46cf
+                </li>
+                <li class="h-5 text-gray-400 w-5">
+                  This is item 50cdcd16-49ca-4fa7-9006-0cd2f1028326
+                </li>
+              </ul>
+              <img
+                class="text-gray-500 hover:text-gray-600"
+                alt="Profile picture of user 5623c03d-a5d0-45fc-bf68-d67a2e44e634"
+                src="https://example.org/pictures/e7627ac1-115b-4663-a05b-5cdd55a08eeb"
+              />
+            </li>
+          </ul>
+          <ol
+            class="text-white pr-5 font-medium items-center flex focus:border-transparent bg-none group-hover:text-gray-100 rounded-md pl-2 focus:outline-none bg-gray-900 py-0.5 border-transparent text-sm focus:ring-0"
+          >
+            <li class="gap-y-10 gap-x-8 grid grid-cols-2">
+              <ul class="select-none relative px-3 py-2 cursor-default">
+                <li class="mx-auto items-center h-7 rounded-full justify-center w-7 flex">
+                  This is item 7b8736e5-bc5c-402d-9fc1-81001075e626
+                </li>
+                <li
+                  class="-mt-2.5 w-14 text-gray-400 pr-2 -ml-14 sticky text-xs left-0 text-right leading-5"
+                >
+                  This is item 8de83aa7-e4c7-41fb-8b56-0dae0ea9d19d
+                </li>
+              </ul>
+              <img
+                class="col-span-6 sm:col-span-4"
+                alt="Profile picture of user 98b62066-927a-40af-b29e-80f9beb8d845"
+                src="https://example.org/pictures/92457be1-a0fa-4e25-a1e8-a6daae5a89bf"
+              />
+              <img
+                class="flow-root"
+                alt="Profile picture of user 6b95579e-24e7-46de-9e7d-5747d477691c"
+                src="https://example.org/pictures/ba34f5e8-5ea1-474c-be6c-81658730e588"
+              />
+            </li>
+            <li class="text-indigo-600">
+              <ol class="sr-only">
+                <li class="bg-white">This is item 37d8f011-5c8b-4310-b856-f7d3369d4249</li>
+                <li
+                  class="lg:absolute lg:inset-y-0 sm:py-16 sm:mt-12 sm:relative lg:w-1/2 lg:right-0 py-12"
+                >
+                  This is item b4760918-68e1-49ca-884c-c95db35a06c3
+                </li>
+                <li class="divide-y divide-gray-200">
+                  This is item 17d3fcb9-ebde-4d33-8551-ff391207fd01
+                </li>
+                <li class="col-span-6 sm:col-span-4">
+                  This is item 4af8fee1-8328-4bad-b005-0c5148c624d0
+                </li>
+                <li class="text-gray-400 mx-auto h-12 w-12">
+                  This is item 9fefc0af-9275-4a57-8369-a12cafeeadf4
+                </li>
+              </ol>
+            </li>
+            <li class="sm:mt-4 ml-4 sm:ml-0">
+              <a href="#" target="_blank" rel="noreferrer" class="mt-8">
+                This is link 28f60217-408b-462f-985b-1c5274960125
+              </a>
+              <ul class="sr-only">
+                <li
+                  class="focus:outline-none hover:text-gray-500 -mx-2 focus:ring-indigo-500 focus:ring-2 justify-center p-2 hover:bg-gray-100 inline-flex text-gray-400 focus:ring-inset items-center rounded-md"
+                >
+                  This is item a5d486f8-75e1-4bd1-997a-d9bb608b7b58
+                </li>
+                <li class="text-base text-white font-medium">
+                  This is item f9b8ddfb-00b4-4e8a-81d1-425fc607e6ad
+                </li>
+                <li class="sr-only">This is item 133e5f91-cf58-4cae-a28f-f5eec3325881</li>
+                <li class="rounded-tr-md rounded-tl-md">
+                  This is item d93da5f0-aae5-40d1-8bae-8a06d4ee1391
+                </li>
+                <li class="bg-white relative">This is item e42f0a9c-eab6-4d4c-af19-186577a6197b</li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="text-sm text-gray-500 py-4 px-3 whitespace-nowrap">
+          <a href="#" rel="noreferrer" class="px-5 flex items-center">
+            This is link 6f4e2534-d8a3-4e13-aedb-0d637f22bbe8
+          </a>
+        </li>
+      </ol>
+      <img
+        class="mx-auto w-7 items-center justify-center rounded-full flex h-7"
+        alt="Profile picture of user 42a741ec-a46f-4e64-bf60-ae292daba13b"
+        src="https://example.org/pictures/2027b6f8-24d1-429e-b3e6-1f282fbb2d88"
+      />
+    </li>
+    <li class="min-w-0 py-0 flex-1">
+      <ul class="h-8 w-auto">
+        <li class="h-6 w-6 text-white">
+          <img
+            class="inline-flex text-sm hover:text-gray-900 font-medium group text-gray-700 justify-center"
+            alt="Profile picture of user f568f97e-22fb-4a97-82e2-7c2079b1dea8"
+            src="https://example.org/pictures/98b6870d-e2b7-45b7-b9ad-2b2daa571f48"
+          />
+        </li>
+        <li class="sm:pl-6 text-sm text-left text-gray-900 py-3.5 pl-4 font-semibold pr-3">
+          <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+            This is link e0937178-6d82-4da0-9ca7-c9b4825ff798
+          </a>
+          <img
+            class="object-center w-full h-full object-cover"
+            alt="Profile picture of user 9b0b0356-eeb0-4fb7-b860-f6c8b363d303"
+            src="https://example.org/pictures/b84e25be-10c0-4a53-814b-36b657a65fe8"
+          />
+          <ol class="relative z-10">
+            <li class="mt-6 lg:mt-0 text-gray-500 prose-lg prose prose-indigo">
+              <a href="#" class="md:h-72 w-64 md:w-72 h-64 object-cover rounded-lg">
+                This is link 58676856-1c90-4050-8e95-7b9474cb92cc
+              </a>
+              <a href="#" target="_blank" class="flex">
+                This is link 9a0d716c-6110-40dd-8e51-800a2a613187
+              </a>
+              <ul class="mt-1 text-sm text-white">
+                <li class="text-2xl text-gray-900 font-bold">
+                  This is item a14fc367-fd50-40ab-b66e-67570fe93857
+                </li>
+                <li
+                  class="text-gray-500 px-4 hover:text-gray-700 font-medium border-t-2 hover:border-gray-300 text-sm items-center border-transparent pt-4 inline-flex"
+                >
+                  This is item b5a87c1b-2099-428c-898a-1f8730b9e583
+                </li>
+                <li class="py-2.5 bg-gray-100 text-gray-900 font-semibold text-xs px-4">
+                  This is item 8bf0e268-d4d9-4256-aa29-3f4bcc33a85b
+                </li>
+                <li
+                  class="items-center py-0.5 text-sm focus:ring-0 group-hover:text-gray-100 bg-gray-900 pr-5 bg-none font-medium rounded-md border-transparent focus:outline-none text-white pl-2 focus:border-transparent flex"
+                >
+                  This is item e050379b-819f-4f8d-985f-638222c2471b
+                </li>
+                <li class="px-4 lg:px-8 lg:py-24 py-12 max-w-7xl mx-auto sm:px-6 text-center">
+                  This is item 5a793a0a-2871-4e96-9bb0-8ee894ecf819
+                </li>
+              </ul>
+              <a href="#" rel="noreferrer" class="sr-only">
+                This is link 419bab39-4570-4fba-bd03-0e771e351578
+              </a>
+            </li>
+            <li class="bg-white">
+              <img
+                class="hover:text-gray-900 text-gray-500 text-base"
+                alt="Profile picture of user eb95f7b7-a0b5-434b-b05d-6792544073e3"
+                src="https://example.org/pictures/9e631e1a-0d47-485a-b5e8-1e128916dc97"
+              />
+              <img
+                class="px-2 font-semibold whitespace-nowrap text-sm text-left py-3.5 text-gray-900"
+                alt="Profile picture of user 775195f0-c4d3-4ce0-9153-3f7e4a165423"
+                src="https://example.org/pictures/ac4160c9-37fc-4653-93bb-2d0de6b94fc7"
+              />
+            </li>
+            <li
+              class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 focus:ring-offset-2 font-medium focus:ring-indigo-500 inline-flex border focus:ring-offset-gray-100 py-2 text-sm shadow-sm focus:outline-none justify-center items-center focus:ring-2 rounded-md border-transparent"
+            >
+              <ul class="py-1">
+                <li class="rounded-md shadow-sm mt-1 relative">
+                  This is item 70332add-e165-4964-b2de-c708c2d344a1
+                </li>
+                <li class="font-medium text-gray-900 text-sm">
+                  This is item 53ae5347-7931-4527-8cc8-ddd4ef713d2e
+                </li>
+                <li
+                  class="block shadow-sm border-gray-300 w-full focus:border-indigo-500 sm:text-sm rounded-md focus:ring-indigo-500"
+                >
+                  This is item 65a8238e-275e-4ed0-878d-ccf9cc64d211
+                </li>
+              </ul>
+              <a href="#" rel="noreferrer" class="md:grid-cols-2 md:grid md:gap-8">
+                This is link b5203c36-000c-4c7b-9a57-dbd98964cee8
+              </a>
+              <ul class="sr-only">
+                <li class="z-40 sm:hidden relative">
+                  This is item 64856127-4d03-4244-9f6a-c6bb010874a3
+                </li>
+                <li class="font-medium text-sm text-gray-900">
+                  This is item 54cc09e6-1641-4654-9d19-dc9d2043d834
+                </li>
+                <li class="font-medium text-red-800 text-sm">
+                  This is item 5255680b-ed2a-47fd-a350-9c5c18189adb
+                </li>
+                <li class="text-gray-600">This is item 78d39c9c-97cb-4625-98e4-55a1a9104afe</li>
+              </ul>
+            </li>
+            <li class="bg-white">
+              <ol
+                class="text-white sm:tracking-tight leading-7 font-bold text-2xl sm:text-3xl sm:truncate"
+              >
+                <li
+                  class="bottom-0 hidden w-1/2 absolute pointer-events-none right-0 top-0 lg:block"
+                >
+                  This is item 3b1a1f56-3546-4961-ab6f-ba1e4e481fa6
+                </li>
+                <li class="px-3 text-sm font-medium text-gray-500">
+                  This is item dfd99a59-7d22-4ba2-94f3-3a92f89fa886
+                </li>
+                <li class="text-gray-400 h-12 w-12 mx-auto">
+                  This is item e1b7890a-9a3c-49c9-b7d2-60a4a5de9476
+                </li>
+                <li class="group-hover:opacity-75">
+                  This is item f7d9c6b5-4a57-4443-bf2a-5dc0603b89e4
+                </li>
+              </ol>
+              <ul class="rounded-full mx-auto justify-center flex h-7 items-center w-7">
+                <li class="text-base font-medium text-gray-200">
+                  This is item 144207ad-7633-4eb8-8a9f-783156937897
+                </li>
+                <li class="relative text-left inline-block">
+                  This is item 45cbaa7d-22eb-4fc4-86c1-5956f03324a5
+                </li>
+                <li class="block group">This is item b5eecd7f-0811-43d8-8c45-72d8a52fc9be</li>
+              </ul>
+              <img
+                class="-my-2 -mr-2 md:hidden"
+                alt="Profile picture of user 8c703ccd-ca1c-4f08-b514-99eb940a5720"
+                src="https://example.org/pictures/53ec62d3-c25e-45dc-a465-ef82024f3cd2"
+              />
+              <a href="#" target="_blank" rel="noreferrer" class="flex-1">
+                This is link a5619c84-8bb8-4396-8ddf-a14ab872fec8
+              </a>
+            </li>
+            <li class="w-6 h-6">
+              <img
+                class="mt-4 space-y-4"
+                alt="Profile picture of user e73c41b0-bb7b-4bb7-a0fe-a0b8a4bdf05a"
+                src="https://example.org/pictures/ba4e798d-19b3-4d5d-a92c-b07f73081cf8"
+              />
+              <ul
+                class="ease-in-out transition inline-block transform h-5 duration-200 ring-0 w-5 shadow bg-white rounded-full"
+              >
+                <li class="justify-center col-span-1 flex bg-gray-50 py-8 px-8">
+                  This is item eebbbde8-c3e6-49b4-929b-65ea75acea6d
+                </li>
+                <li class="font-medium text-gray-500 hover:text-gray-900 text-base">
+                  This is item ec11b5af-e161-457e-9287-fa712a1028e1
+                </li>
+                <li class="ml-3 relative">This is item 24c31676-0530-4a89-9f19-0f940fbf11a7</li>
+                <li class="lg:border-gray-200 lg:col-span-2 lg:border-r lg:pr-8">
+                  This is item 6de989fe-1001-4f70-be86-e09ad36d0757
+                </li>
+                <li class="sr-only">This is item 4da5552b-9f59-4dd9-a871-027b3d51b0ec</li>
+              </ul>
+              <a href="#" rel="noreferrer" class="font-medium text-gray-900">
+                This is link 3c640db0-c0f0-4c2d-aba4-2dfabdc10b0a
+              </a>
+            </li>
+          </ol>
+          <ul class="focus:z-10 hover:bg-gray-100 text-gray-400 py-1.5 bg-gray-50">
+            <li class="sr-only">
+              <ul class="flex-none ml-3 w-5 h-5 text-gray-400">
+                <li class="mt-6 space-y-6">This is item 01df3a76-c945-46d8-9256-686b96d33b57</li>
+                <li class="flex">This is item 798722c0-a16f-4570-8426-86c78b49f5b6</li>
+                <li
+                  class="sm:mx-0 border-gray-200 -mx-px md:grid-cols-3 border-l lg:grid-cols-4 grid-cols-2 grid"
+                >
+                  This is item 5b52281f-5c22-4610-87f9-495d2820f535
+                </li>
+                <li class="mt-6">This is item 1b522ca1-d1fe-4342-b3cf-05a518a0d327</li>
+              </ul>
+              <ul class="flex flex-1 items-center lg:hidden">
+                <li class="sr-only">This is item c7fffe7c-ddca-49ef-88c4-1275d796043d</li>
+                <li class="bg-white hover:bg-gray-100 focus:z-10 py-1.5">
+                  This is item a6f6058e-9c37-4753-b667-87d4666230d2
+                </li>
+                <li class="flex">This is item 7de0a12e-091a-436f-aba3-1f31d348b4e3</li>
+                <li class="bg-white py-12 px-4">
+                  This is item e901c9d4-73a0-49cf-bea0-b938b47ef960
+                </li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="hover:text-gray-900 text-gray-500 text-base"
+              >
+                This is link de20ea7c-c436-4a16-8697-e6116d62e702
+              </a>
+            </li>
+            <li class="ml-3">
+              <a
+                href="#"
+                target="_blank"
+                class="relative pb-12 flex shadow-xl bg-white flex-col overflow-y-auto w-full max-w-xs"
+              >
+                This is link 1b62aa0a-17e0-4eb1-8e13-e12c212ac1d1
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="right-0 absolute -mr-12 top-0 pt-2">
+          <a href="#" target="_blank" rel="noreferrer" class="w-8 h-8 rounded-md">
+            This is link 1bb8befc-8e92-498a-8450-22f8f7350ae3
+          </a>
+          <img
+            class="w-7 h-7 rounded-full mx-auto flex items-center justify-center"
+            alt="Profile picture of user e59b75b6-f39f-47a4-9526-69fdf1b74951"
+            src="https://example.org/pictures/94eaffe2-f861-4049-afe0-b2585f3f49c2"
+          />
+          <ol class="lg:bg-transparent bg-gray-100 relative">
+            <li class="h-12">
+              <ul class="block font-medium ml-3 text-gray-900 text-base">
+                <li class="flex-none w-28">This is item 4fb57671-f456-4b76-bea6-7dac6a1230b2</li>
+                <li class="flex sm:text-sm items-center text-base">
+                  This is item 860851f6-7242-4b45-a0d5-9094c58b74db
+                </li>
+              </ul>
+              <ul
+                class="bg-white rounded-md inline-flex focus:outline-none focus:ring-2 hover:text-gray-900 focus:ring-blue-500 focus:ring-offset-2 group items-center text-base font-medium"
+              >
+                <li class="relative z-10">This is item 366c314c-f9a3-4766-8db0-73a5a3205821</li>
+                <li
+                  class="-m-3 font-medium duration-150 items-center p-3 ease-in-out flex hover:bg-gray-50 text-gray-900 text-base transition rounded-md"
+                >
+                  This is item c29817dd-62a7-4d87-8aae-946241a0e602
+                </li>
+                <li class="hover:text-white text-gray-300 text-base">
+                  This is item 11edda55-1024-4883-b805-f1acec8018d9
+                </li>
+                <li class="-m-3 rounded-lg p-3 hover:bg-gray-50 items-start flex">
+                  This is item b27c71f7-c949-43de-9bf0-059984bd1b5a
+                </li>
+              </ul>
+            </li>
+            <li class="group-hover:text-gray-500 mr-3 text-gray-400 h-6 w-6">
+              <img
+                class="overflow-hidden shadow-lg ring-black rounded-lg ring-opacity-5 ring-1"
+                alt="Profile picture of user 56494d73-ed7e-43cd-bc19-79540aa301b1"
+                src="https://example.org/pictures/03ca583b-b506-4d8d-9656-ee72fa5c962e"
+              />
+            </li>
+            <li
+              class="ring-1 focus:outline-none rounded-md absolute z-10 -right-2 ring-opacity-5 w-48 mt-2 bg-white origin-top-right shadow-lg py-1 ring-black"
+            >
+              <a href="#" class="text-gray-900">
+                This is link d3c84b88-828f-4b61-8dbc-88406df468cf
+              </a>
+            </li>
+          </ol>
+          <ul class="bg-white hover:bg-gray-100 py-1.5 focus:z-10">
+            <li class="sr-only">
+              <ul class="hover:text-white text-gray-300 text-base">
+                <li class="flex items-center h-5">
+                  This is item 416632a2-e5c1-4d83-8c7c-1629f73d3201
+                </li>
+                <li class="rounded-full h-10 inline-block w-10">
+                  This is item 547ae974-2d98-4f0f-9dbb-63157a3be51a
+                </li>
+                <li class="gap-y-10 gap-x-8 grid-cols-2 grid">
+                  This is item 8b0fadce-db0a-4cb0-b835-ef9048976840
+                </li>
+                <li class="sr-only">This is item f9658882-5766-4c8b-8f96-f60b6ba5689b</li>
+              </ul>
+              <img
+                class="text-gray-600 text-sm font-medium py-3 text-left w-1/4 pr-4"
+                alt="Profile picture of user 0a65d7ab-4c74-46bb-aafe-527f5010c776"
+                src="https://example.org/pictures/82527611-d214-4e65-9c26-40def801100f"
+              />
+              <ol class="py-1">
+                <li class="text-lg mt-3 text-gray-300">
+                  This is item d194ef9b-ddc8-4758-9828-7d6549efaaee
+                </li>
+                <li class="pb-4 whitespace-nowrap border-b-2 font-medium px-1 text-sm">
+                  This is item 86529bed-e772-46fd-a678-e46261f5de10
+                </li>
+                <li class="sm:grid py-4 sm:py-5 sm:grid-cols-3 sm:gap-4">
+                  This is item 1f8a1969-4baa-401e-a6c2-7a3c1cd40617
+                </li>
+                <li class="w-auto h-8">This is item 094e63c1-065f-450f-92ef-f05c58b494bb</li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="w-full py-3 text-gray-900 hover:bg-gray-100 mt-8 border-transparent block border px-8 font-medium text-base rounded-md sm:w-auto bg-white"
+              >
+                This is link 33aee684-c2b4-4275-8484-b73f175b6d0b
+              </a>
+            </li>
+            <li
+              class="shadow-lg z-10 max-h-56 sm:text-sm overflow-auto focus:outline-none w-full text-base py-1 bg-white ring-1 absolute rounded-md mt-1 ring-opacity-5 ring-black"
+            >
+              <a href="#" target="_blank" class="hover:bg-gray-100 focus:z-10 bg-white py-1.5">
+                This is link aa8532c7-e4cf-4cc4-9e3b-3a2596f481a0
+              </a>
+            </li>
+            <li
+              class="block text-gray-900 px-3 text-base rounded-md hover:bg-gray-100 py-2 font-medium"
+            >
+              <img
+                class="relative inline-block text-left"
+                alt="Profile picture of user f454c7ec-b4d4-49c3-9f73-0dd9468d9cd5"
+                src="https://example.org/pictures/c3ad120e-fa28-4d77-b9e6-4b2ec0e4acfd"
+              />
+              <a
+                href="#"
+                rel="noreferrer"
+                class="text-gray-400 -mr-2 rounded-md focus:outline-none inline-flex focus:ring-blue-600 p-2 focus:ring-inset hover:bg-gray-100 items-center focus:ring-2 hover:text-gray-500 justify-center"
+              >
+                This is link 33520f96-7abc-4988-a09c-3479eacae08c
+              </a>
+              <ol class="text-sm block px-4 py-2">
+                <li class="sr-only">This is item 76213aa9-0b4b-4594-a343-29fedf823483</li>
+                <li class="flex space-x-8 -mb-px">
+                  This is item 500e0ba3-4eea-4652-882c-d285975c65b2
+                </li>
+                <li class="block text-white font-medium text-base px-3 rounded-md py-2">
+                  This is item 0d50da62-6d17-4ede-ae24-92dffbd6de53
+                </li>
+              </ol>
+              <ol class="py-6 flex space-x-6">
+                <li class="flex justify-center items-center px-4 py-12 bg-white">
+                  This is item e090f68b-9911-4ed3-82cb-91da095236ec
+                </li>
+                <li class="sr-only">This is item 40780782-a3bf-44f8-9c80-3117ed333483</li>
+              </ol>
+            </li>
+            <li class="py-12 bg-white justify-center flex px-4">
+              <ul class="pl-3 relative sm:pr-6 pr-4 py-3.5">
+                <li
+                  class="hover:bg-indigo-100 border-transparent rounded-md text-base justify-center bg-indigo-50 font-medium border px-4 items-center text-indigo-800 py-3 shadow-sm flex"
+                >
+                  This is item f0a6fd4d-3234-4f94-b9d3-a29c26214742
+                </li>
+                <li class="h-8 w-auto">This is item cd2cf691-ceb2-48cb-b4b9-8fbaae2d5aaa</li>
+                <li class="shadow bg-white">This is item 82b87855-4bbb-4132-b59b-b46dd580ff64</li>
+                <li class="text-gray-900 font-medium text-lg">
+                  This is item 7dedd7a0-991d-42cc-a620-a4f5915fc685
+                </li>
+              </ul>
+              <ul class="w-7 items-center justify-center mx-auto rounded-full h-7 flex">
+                <li class="flex-col flex space-y-6 mt-6">
+                  This is item 03aecbb6-4ff8-47a1-aba2-b47d308e43f5
+                </li>
+                <li class="flex ml-2 flex-shrink-0">
+                  This is item c7d51352-4b2d-42d6-8bf2-2529116c7756
+                </li>
+                <li class="mr-3 h-4 w-4 text-gray-400">
+                  This is item 9119dcdc-50a3-47f9-bdbb-ee88c95be73d
+                </li>
+                <li class="flex-shrink-0 w-5 mr-1.5 text-gray-500 h-5">
+                  This is item 50cf49c0-111d-47b7-a787-73aef9eec9f9
+                </li>
+                <li class="sr-only">This is item adb1e090-00bf-4f20-8b5f-d65f03523246</li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="-ml-1 h-6 w-6 flex-shrink-0 mr-3">
+          <ol class="z-10 inset-0 absolute">
+            <li class="flex fixed z-40 inset-0">
+              <ol class="mt-8">
+                <li class="sm:mb-8 sm:flex sm:justify-center hidden">
+                  This is item bc885bdf-e19f-48c9-9b0c-76258649d061
+                </li>
+                <li class="flex justify-end py-4 flex-shrink-0 px-4">
+                  This is item ece6b694-40e4-49e1-b870-d70e9d98a3eb
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="sm:bg-gray-600 hidden sm:fixed sm:inset-0 sm:block sm:bg-opacity-75"
+              >
+                This is link 2519e03a-bc5a-41d2-81c2-88515a211441
+              </a>
+              <a href="#" rel="noreferrer" class="h-full w-full object-cover object-center">
+                This is link 69e13912-ad10-40a4-8761-d9e72a60c5cf
+              </a>
+              <a href="#" target="_blank" class="pr-4 w-1/4">
+                This is link 05271b64-a3a0-42eb-a836-a46161f863f6
+              </a>
+            </li>
+            <li class="bg-white relative overflow-hidden">
+              <ul class="grid-cols-2 gap-x-4 grid">
+                <li class="h-8 w-8">This is item 6b4fb5b7-0599-404d-a64b-2a325c920910</li>
+                <li
+                  class="ring-black shadow-lg rounded-lg divide-y-2 bg-white divide-gray-50 ring-1 ring-opacity-5"
+                >
+                  This is item b82e6800-c239-4b14-b54e-50fb7378a4ba
+                </li>
+                <li class="bg-white h-[415px] p-8">
+                  This is item c7101118-bf8d-4ec1-96e6-e8047cd34c12
+                </li>
+              </ul>
+              <ul class="md:grid md:grid-cols-2 md:gap-8">
+                <li class="border-b-2 whitespace-nowrap text-base flex-1 px-1 font-medium py-4">
+                  This is item 1b7093fe-f0ca-4170-9aa3-facae456e232
+                </li>
+                <li class="lg:flex hidden">This is item 0f2a3b3b-4d09-40a4-b641-6f89c0141bf3</li>
+                <li class="text-gray-900 block font-medium mt-6">
+                  This is item 93a1ae96-702b-47e2-ac93-a5d7fd275ea9
+                </li>
+                <li class="flex-shrink-0 w-14">
+                  This is item d2e82235-9f23-4d4b-bdc5-8e42f7ac26b4
+                </li>
+              </ul>
+              <ol
+                class="px-4 focus:ring-indigo-500 border-gray-200 text-gray-500 md:hidden focus:outline-none focus:ring-2 focus:ring-inset border-r"
+              >
+                <li class="sm:ml-16 mt-4 sm:mt-0 sm:flex-none">
+                  This is item 0b3925d5-5234-4206-9338-53d6da8fb093
+                </li>
+                <li
+                  class="w-full bg-white flex-col shadow-xl flex relative max-w-xs pb-12 overflow-y-auto"
+                >
+                  This is item d3b18b1a-d391-4b93-b8f1-8d6d1472b321
+                </li>
+                <li class="px-4 block py-2 text-gray-700 text-sm">
+                  This is item 4266f80c-84c3-4aeb-8b76-782043847e25
+                </li>
+                <li class="flex-shrink-0">This is item bcf0f594-af3b-4211-bb37-3ad1bba89293</li>
+              </ol>
+              <ol class="h-8 w-8 text-white">
+                <li class="flex items-start">This is item 77b0a821-f933-4b9b-9222-9cce8365207e</li>
+                <li class="w-6 text-cyan-200 h-6">
+                  This is item 3b995b79-6f10-4cb3-bbfe-77e35fe5a8a4
+                </li>
+              </ol>
+            </li>
+            <li
+              class="sm:px-0 z-10 absolute w-screen px-2 transform -translate-x-1/2 max-w-md mt-3 left-1/2"
+            >
+              <ol
+                class="font-medium rounded-full items-center py-0.5 inline-flex bg-green-100 text-green-800 px-2.5 text-xs"
+              >
+                <li class="text-sm mt-2 text-gray-700">
+                  This is item 67d5d9c3-8397-49d1-a231-02da836ce4d4
+                </li>
+                <li class="-ml-2 bg-white rounded-md text-gray-400 p-2">
+                  This is item 1a340dfd-216d-4e9e-b115-e45c3ebf811c
+                </li>
+                <li
+                  class="border-2 focus:ring-sky-500 focus:ring-offset-2 flex-shrink-0 h-6 w-11 border-transparent ml-4 transition-colors focus:outline-none ease-in-out rounded-full focus:ring-2 cursor-pointer relative duration-200 inline-flex"
+                >
+                  This is item 63df0cf3-3d65-4062-99ad-a30b41dc8904
+                </li>
+              </ol>
+              <a href="#" rel="noreferrer" class="focus:z-10 bg-white hover:bg-gray-100 py-1.5">
+                This is link d57787d9-fba9-4670-87c6-47c431db5350
+              </a>
+            </li>
+            <li class="hover:bg-gray-100 bg-gray-50 py-1.5 focus:z-10 text-gray-400 rounded-tl-lg">
+              <img
+                class="rounded-md ring-black z-10 right-0 w-48 ring-opacity-5 bg-white origin-top-right mt-2 absolute focus:outline-none ring-1 divide-gray-200 shadow-lg divide-y"
+                alt="Profile picture of user 5af06942-50a7-4956-92a9-b152eac252e3"
+                src="https://example.org/pictures/5993873f-8a1a-4f5d-89e2-8c0d14feb745"
+              />
+              <ul class="text-indigo-200">
+                <li class="flex lg:hidden flex-1 items-center">
+                  This is item 4d8eef66-e20d-433c-b2b9-7fc10ca28d21
+                </li>
+                <li class="sm:shadow-sm inline-flex">
+                  This is item 2da73d83-c62a-4904-b98b-e45b95bf9fd5
+                </li>
+                <li class="hidden sm:block">This is item 0fcde43a-04a0-4ca4-92b4-4b8a4508ba61</li>
+                <li class="h-6 w-6">This is item d086ad53-f39d-411f-986a-0b2c5db001d9</li>
+                <li class="text-sm font-medium hover:text-gray-200 text-gray-400 ml-4">
+                  This is item ce434f3c-11cd-4127-83ce-80b96955b67c
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+    <li
+      class="text-gray-400 hover:bg-gray-50 focus:outline-none flex -mr-2 rounded-md items-center bg-white focus:ring-indigo-500 justify-center h-10 p-2 focus:ring-2 w-10"
+    >
+      <a
+        href="#"
+        target="_blank"
+        rel="noreferrer"
+        class="duration-200 absolute bottom-0 inset-x-0 sm:transform h-0.5 ease-out sm:translate-y-px transition-colors sm:mt-5"
+      >
+        This is link a454857e-44c5-4361-b89d-aa05a85e8435
+      </a>
+      <img
+        class="group-hover:text-gray-500 text-gray-400 flex-shrink-0 h-5 -mr-1 ml-1 w-5"
+        alt="Profile picture of user 56f662ca-63f5-42e9-b367-51a6f1d398fe"
+        src="https://example.org/pictures/ba08b6e7-28bb-4da5-bb69-4d876c331f38"
+      />
+      <a href="#" class="flex-1 justify-between flex space-x-4 pt-1.5 min-w-0">
+        This is link f409a5a0-d473-4011-8334-900443e0f18f
+      </a>
+      <a href="#" target="_blank" class="sm:px-6 px-4 lg:px-8">
+        This is link 268b4b30-93e8-4f5e-a151-a32833ffe426
+      </a>
+    </li>
+    <li class="divide-gray-200 divide-y border-b border-gray-200 border-t mt-2">
+      <img
+        class="mt-4 sm:ml-16 sm:flex-none sm:mt-0"
+        alt="Profile picture of user 5430339c-3ce1-4bac-8f74-dc14b61a05bd"
+        src="https://example.org/pictures/574e31db-b70c-4f4c-9f04-565378c48159"
+      />
+      <a href="#" target="_blank" class="cursor-pointer focus:outline-none">
+        This is link c2c9e114-f9b2-4a5e-8011-28be79a68c71
+      </a>
+      <ul class="text-gray-500 font-medium text-xl">
+        <li class="sm:col-span-2">
+          <ol class="flex-shrink-0 w-5 h-5">
+            <li class="max-w-md pointer-events-auto w-screen">
+              <a href="#" target="_blank" class="font-medium text-white text-base">
+                This is link e45f7944-8675-4fe6-9b82-791950e51983
+              </a>
+              <ul class="py-16">
+                <li class="underline text-indigo-600">
+                  This is item d0df2580-e6ab-4585-bc13-22c65b489a50
+                </li>
+                <li class="relative">This is item a8d5f399-d996-49ef-beb9-e6bd52ef4d33</li>
+                <li class="sm:pl-6 pl-4 pr-3 text-gray-900 font-semibold text-left py-3.5 text-sm">
+                  This is item cdac711c-5694-4dab-b18b-0d244e0dd63a
+                </li>
+                <li
+                  class="focus:ring-offset-gray-100 shadow-sm text-gray-700 w-full justify-center px-4 focus:ring-indigo-500 border-gray-300 hover:bg-gray-50 focus:outline-none rounded-md bg-white py-2 font-medium text-sm focus:ring-2 inline-flex border focus:ring-offset-2"
+                >
+                  This is item d2bd1abd-31ee-42bf-a96d-0f34bbc66367
+                </li>
+                <li class="text-white bg-indigo-600 hover:bg-indigo-700">
+                  This is item b4dfa43a-baba-4b58-b6b0-f959951c85f1
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-700 hover:text-gray-800 font-medium text-sm">
+              <img
+                class="text-gray-700 block text-sm font-medium"
+                alt="Profile picture of user daa0f908-37e5-4794-bd58-bf22b0671b4b"
+                src="https://example.org/pictures/2023ce96-416c-4152-8552-862ab76b958e"
+              />
+              <ul class="w-6 h-6">
+                <li class="font-bold tracking-tight leading-tight text-3xl text-gray-900">
+                  This is item 0c48a48e-40d7-44b4-85ab-f6196279bf43
+                </li>
+                <li class="flex items-center">This is item 23379794-c1aa-4876-90e8-32ad1ea7577a</li>
+                <li class="w-5 h-5">This is item 5064ae15-6411-4f51-a6ec-598be92967a3</li>
+                <li class="p-8 sm:p-10">This is item 0031da59-a7cd-493d-92af-7a62c259580a</li>
+              </ul>
+              <ul
+                class="shadow-sm rounded-md block focus:border-indigo-500 border-gray-300 px-4 py-3 w-full focus:ring-indigo-500"
+              >
+                <li class="text-gray-700 mt-2">
+                  This is item 7203d4e0-2b5c-4a41-ba62-9c9719b2d6b4
+                </li>
+                <li
+                  class="right-0 z-10 shadow-lg rounded-md focus:outline-none bg-white ring-opacity-5 ring-1 overflow-hidden absolute mt-3 origin-top-right ring-black w-36"
+                >
+                  This is item 2fb5ef84-f456-4eef-b6a4-0676646cbadd
+                </li>
+                <li
+                  class="border-transparent rounded-md text-white shadow-sm px-4 focus:ring-offset-2 focus:outline-none inline-flex font-medium text-sm focus:ring-indigo-500 border focus:ring-2 justify-center bg-indigo-600 hover:bg-indigo-700 py-2"
+                >
+                  This is item 23141800-9858-438b-8571-36e6eb91d82b
+                </li>
+              </ul>
+            </li>
+            <li class="mt-1">
+              <a href="#" target="_blank" class="font-semibold text-indigo-600 text-base">
+                This is link 9cc104fd-e415-40f9-b763-9e82158fcc9b
+              </a>
+              <ul
+                class="text-gray-900 justify-center rounded-full items-center mx-auto flex w-8 h-8 hover:bg-gray-200"
+              >
+                <li class="top-1/2 bg-white absolute shadow inset-0">
+                  This is item e8d74548-6565-475e-9a8c-d1f5e55105df
+                </li>
+                <li class="flex md:hidden items-center -mr-2">
+                  This is item c9c52cdf-7244-4432-a788-2e6dfa26f6de
+                </li>
+                <li class="bg-white">This is item 66bbe44c-810f-443d-b239-4376389c466d</li>
+                <li class="mt-6 space-y-6">This is item 10e43390-0ddd-46cf-b721-a1d6dac4101e</li>
+                <li class="py-1.5 focus:z-10 bg-white hover:bg-gray-100">
+                  This is item 46ceca10-6552-42b3-9517-08fb49c75a71
+                </li>
+              </ul>
+              <ul
+                class="text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300"
+              >
+                <li class="bg-white">This is item f600916c-6408-48d6-be1a-fc38a66439e9</li>
+                <li class="ml-3">This is item b2b6c2c5-0d2e-4e64-94a2-f021584719c3</li>
+                <li class="sr-only">This is item 0b179919-1d19-420d-b8f3-4ff8baa40e10</li>
+                <li class="border border-gray-200 rounded-md divide-gray-200 divide-y">
+                  This is item cf003bc1-a051-4ae6-b665-687e194c7f30
+                </li>
+                <li class="bg-white min-h-[980px]">
+                  This is item d92285fd-d158-4898-9d71-15c6e613de58
+                </li>
+              </ul>
+              <img
+                class="py-6 bg-gray-50 px-4 sm:px-6"
+                alt="Profile picture of user 556bf043-22e9-48c4-b617-4d33c8f1cd96"
+                src="https://example.org/pictures/ef965219-606f-47ed-aea4-8681b6deefec"
+              />
+            </li>
+            <li class="text-gray-900 font-medium text-sm">
+              <ul class="lg:flex-1 flex justify-start lg:w-0">
+                <li class="hidden lg:block lg:flex-1 lg:self-stretch">
+                  This is item 3716e037-761d-4d29-bb9b-168cecc29292
+                </li>
+                <li
+                  class="shadow-lg mt-2 w-48 right-0 ring-1 py-1 focus:outline-none ring-black ring-opacity-5 bg-white origin-top-right rounded-md absolute z-10"
+                >
+                  This is item 680e9155-9cc1-4009-8c36-9573c195b706
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <a href="#" rel="noreferrer" class="bg-white">
+            This is link 3ca462d2-05e5-4cf2-b8a8-a7a4ec66b8bc
+          </a>
+          <ul class="sr-only">
+            <li class="focus:z-10 py-1.5 hover:bg-gray-100 bg-white text-gray-900">
+              <ul class="border-gray-200 sm:space-y-4 space-y-6 mt-4 pt-6 border-t">
+                <li class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">
+                  This is item 03e1b234-575b-4357-98b4-a9b6f96b5560
+                </li>
+                <li class="font-medium text-lg text-blue-gray-900">
+                  This is item f9257907-d82d-46e8-a653-1ae85e6f12cc
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="mt-2 flex sm:max-w-md">
+                This is link 10509934-570d-4d14-aebf-254b9b9bf001
+              </a>
+              <a href="#" target="_blank" rel="noreferrer" class="lg:bg-transparent bg-indigo-700">
+                This is link ebf14a51-271f-4b8a-9430-def203b04b0e
+              </a>
+              <ul
+                class="text-xs inline-block -top-2 absolute px-1 left-2 text-gray-900 bg-white -mt-px font-medium"
+              >
+                <li
+                  class="items-center border-dashed justify-center text-gray-400 border-gray-300 border-2 flex h-8 rounded-full w-8"
+                >
+                  This is item b1309e2b-47b3-40d3-9bd0-641826900e41
+                </li>
+                <li class="text-white h-6 w-6">
+                  This is item b33d3bf7-dfc2-4889-b814-70ad48cb8bcc
+                </li>
+                <li class="space-y-10">This is item 2b18c2ed-e08a-4eb2-8dba-3b34cb550aa2</li>
+                <li class="mt-4 text-gray-500 text-lg sm:mt-3">
+                  This is item 9e57e9eb-6d6f-4a34-87e9-2f24c5436245
+                </li>
+                <li class="text-lg font-medium leading-6 text-gray-900">
+                  This is item 8569574e-e2ca-4141-897a-379f66dd74cc
+                </li>
+              </ul>
+            </li>
+            <li class="text-indigo-600 underline">
+              <img
+                class="bg-white py-1.5 relative focus:z-10 text-gray-900 hover:bg-gray-100"
+                alt="Profile picture of user f73aab2b-19fd-4afb-ab46-c25dc9870a88"
+                src="https://example.org/pictures/f341e549-d9d7-4d45-97bc-a47e7ab61865"
+              />
+              <a href="#" rel="noreferrer" class="text-lg font-semibold text-cyan-600">
+                This is link 88253cf6-de69-4709-809b-4481667484de
+              </a>
+              <img
+                class="text-base font-medium hover:text-gray-700 text-gray-900"
+                alt="Profile picture of user 65cf0c13-0e08-4088-98b4-8cdf2602e754"
+                src="https://example.org/pictures/df3126ac-09dd-44ab-b160-a913ae6eec9d"
+              />
+              <ul class="hover:text-gray-500 text-gray-400 p-2 ml-2">
+                <li class="relative bg-white">This is item 2b3de75d-c11f-44cf-83b9-d3fba1fbfbe4</li>
+                <li
+                  class="border-gray-200 border-l-4 md:pt-4 flex py-2 md:border-l-0 md:border-t-4 md:pb-0 hover:border-gray-300 group pl-4 flex-col md:pl-0"
+                >
+                  This is item 1d18392c-2253-41cd-9474-2619c9a54b7c
+                </li>
+                <li class="w-14 leading-5 text-right -ml-14 -mt-2.5 text-xs pr-2 text-gray-400">
+                  This is item 5393b275-6d7e-48a1-94a8-2394cef905b0
+                </li>
+                <li class="md:col-span-2 lg:row-start-1 lg:col-start-1 col-span-1">
+                  This is item 400fb703-342a-4115-be65-590b56b8fa50
+                </li>
+                <li class="block">This is item d55df31c-7841-494e-aeab-5c39c2743757</li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="h-7 items-center justify-center flex w-7 rounded-full mx-auto">
+          <img
+            class="ml-3"
+            alt="Profile picture of user 5f60a1c1-9e3f-4928-87ec-4787e070f888"
+            src="https://example.org/pictures/fe9524c1-e0b8-45f9-9b7b-d2bda761c79c"
+          />
+          <a href="#" target="_blank" class="flex flex-1 min-h-0 flex-col bg-gray-800">
+            This is link d1d99f68-5536-4945-be50-66b1d1ce5342
+          </a>
+          <img
+            class="text-sm text-gray-400"
+            alt="Profile picture of user e23e4396-e2ea-4c9b-b476-52dd36bdd7eb"
+            src="https://example.org/pictures/a3653bb3-cc20-4b20-9d89-35ffcc3e26ef"
+          />
+        </li>
+      </ul>
+      <a href="#" target="_blank" rel="noreferrer" class="relative mt-6">
+        This is link 5717a254-b665-4b24-b123-5f08e45f79ca
+      </a>
+    </li>
+    <li
+      class="py-2 rounded-l-md md:px-2 items-center pl-3 border-gray-300 bg-white justify-center border hover:text-gray-500 focus:relative pr-4 md:w-9 flex text-gray-400 md:hover:bg-gray-50 border-r-0"
+    >
+      <ul class="h-6 w-6 text-green-600">
+        <li class="text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300">
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="lg:gap-x-12 lg:grid lg:grid-cols-2 xl:gap-x-16"
+          >
+            This is link ff60b32d-58b1-4453-bd6d-1d1390a83184
+          </a>
+          <ol class="py-1.5 focus:z-10 hover:bg-gray-100 text-gray-900 bg-white">
+            <li class="relative ml-4 flex-shrink-0">
+              <ol class="hover:bg-indigo-600 hover:text-indigo-100 text-indigo-200">
+                <li class="mx-auto max-w-3xl">This is item 972b4b57-82bb-4f0a-a0dd-00af80a28193</li>
+                <li class="lg:grid-cols-2 grid lg:grid-rows-3 lg:gap-8 grid-cols-1">
+                  This is item 27a5dc22-62e4-4ba2-90be-93a7e28d9b93
+                </li>
+              </ol>
+              <a href="#" rel="noreferrer" class="flex items-start">
+                This is link c136f069-3287-4aa7-a34a-c12a071774e0
+              </a>
+              <ol class="mt-5 text-xl text-indigo-300">
+                <li class="font-medium text-gray-900">
+                  This is item 57bb1b4d-fac3-42b7-b56a-d1195136251a
+                </li>
+                <li class="sm:hidden">This is item 35cf058d-d111-4f14-b6fb-c03e7356f1be</li>
+                <li class="px-4 pb-8 space-y-10 pt-10">
+                  This is item 048a85de-2f65-4cf1-9e9f-d8d1c9296ac8
+                </li>
+              </ol>
+              <ul class="pt-4 border-t pb-3 border-gray-200">
+                <li class="py-1">This is item 0bb622c2-5f6d-449a-8295-42a95dd4d7e7</li>
+                <li
+                  class="text-sm hover:bg-gray-100 bg-gray-50 px-2 relative sm:px-3 items-center rounded-full text-gray-500 py-2 font-medium whitespace-nowrap inline-flex"
+                >
+                  This is item fc46a1a8-7628-42cb-b71b-d4126bb29d62
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-900 hover:bg-gray-100 focus:z-10 py-1.5 bg-white">
+              <a href="#" rel="noreferrer" class="text-sm font-medium ml-4 text-indigo-600">
+                This is link 29eb45be-4033-4a2f-a7f4-776a6c4e5d85
+              </a>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="justify-center transition-opacity h-full absolute inset-0 w-full flex items-center"
+              >
+                This is link cbb38cd9-9ba7-41ac-b360-b0660b8d9c5e
+              </a>
+            </li>
+            <li
+              class="border text-gray-900 text-base focus:outline-none min-w-0 focus:ring-1 px-4 rounded-md placeholder-gray-500 w-full appearance-none border-gray-300 py-2 bg-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            >
+              <ul class="bg-gray-900 bg-opacity-50 absolute inset-0">
+                <li class="mt-6 space-y-6">This is item 2c2450e7-17fe-4318-9b17-7b8c0a45422c</li>
+                <li
+                  class="hover:text-gray-500 items-center text-gray-400 p-2 justify-between flex w-full"
+                >
+                  This is item 5a0461ac-0adc-49d0-9e41-264fbe5b4911
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <ul class="font-medium text-sm text-gray-900">
+            <li class="flex font-medium flex-col">
+              <a href="#" target="_blank" rel="noreferrer" class="bg-white py-16">
+                This is link df255472-6bb2-49b0-aa6e-7ae02b2e203f
+              </a>
+              <ul class="text-gray-700 ml-2">
+                <li class="bg-white">This is item dca49628-ad55-4fc1-8ebe-e9dfc898b3e9</li>
+                <li class="-mr-2">This is item 676d79f9-a16a-4c39-b6fd-e912ad8df464</li>
+              </ul>
+              <ul class="mt-2 flex sm:max-w-md">
+                <li class="py-1">This is item 407be543-a466-4594-a0db-a957bd4ece3f</li>
+                <li class="text-gray-900 font-medium text-sm">
+                  This is item abe60921-f74a-4744-bdd2-ffb37b57f341
+                </li>
+                <li class="mt-6 space-y-6">This is item 28ec01e0-acf9-47b6-b3b1-c67dcfbca714</li>
+              </ul>
+            </li>
+            <li class="bg-white sm:text-sm bg-opacity-60 p-4 text-base">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="w-5 -ml-1 flex-shrink-0 text-gray-400 h-5 mr-1"
+              >
+                This is link 3bba9885-7d6b-4bfb-8823-dbb6e90dfddd
+              </a>
+              <ul class="mt-6 space-y-6">
+                <li class="font-semibold text-gray-900">
+                  This is item 285773fb-cb10-4653-b0c4-7adce578405b
+                </li>
+                <li class="flex justify-center pl-4 flex-1">
+                  This is item 1984a1c6-d35b-4afc-ae85-29427aa29da5
+                </li>
+                <li class="p-3 flex items-start rounded-lg -m-3 hover:bg-gray-50">
+                  This is item 01074765-e1f0-4e81-8d72-f2f97932ed63
+                </li>
+                <li class="lg:col-span-9 sm:px-6 lg:px-0 space-y-6">
+                  This is item 752d3f21-af4d-429a-97b4-6f6db4273f07
+                </li>
+              </ul>
+            </li>
+            <li class="text-indigo-600">
+              <img
+                class="sr-only"
+                alt="Profile picture of user 885fae3d-f262-444e-9e18-a19818194af3"
+                src="https://example.org/pictures/a7a5a90b-a636-46e1-b000-64dbf275c142"
+              />
+            </li>
+            <li class="bg-gray-100">
+              <img
+                class="h-5 w-5"
+                alt="Profile picture of user 3ddd1c18-60f8-4153-ad16-19e58bb93da3"
+                src="https://example.org/pictures/c3266cd3-ef69-45ef-8039-717d0ef7f47d"
+              />
+              <img
+                class="mt-1 relative"
+                alt="Profile picture of user 016ba6f9-2108-45a0-9dbe-3178bf40810a"
+                src="https://example.org/pictures/3e7c0d34-8eb7-4766-9e2e-5690ed2c7d83"
+              />
+            </li>
+            <li class="w-5 text-gray-400 h-5 flex-shrink-0">
+              <a href="#" rel="noreferrer" class="hover:text-gray-600 text-gray-500">
+                This is link c4f619d9-118b-4698-9382-df1c54c06ded
+              </a>
+              <ol class="absolute bg-indigo-500 p-3 rounded-md">
+                <li class="border-t border-gray-200">
+                  This is item 1a8f40cb-9158-446b-9a73-fab229557bbb
+                </li>
+                <li class="h-16 flex justify-between">
+                  This is item 697f4ebd-9f02-4534-a0a2-c0c0e40421b7
+                </li>
+                <li class="text-center">This is item 1616027d-0f6e-449c-bd0d-c141fdb5175f</li>
+              </ol>
+              <a href="#" target="_blank" class="text-sm">
+                This is link 8c52fa27-4797-4ef0-9b1f-eb23c4362690
+              </a>
+            </li>
+          </ul>
+          <ol class="text-gray-500 font-medium text-sm">
+            <li class="block text-gray-700 font-medium text-sm">
+              <img
+                class="space-y-6"
+                alt="Profile picture of user 8d2ee06c-66ec-43a8-b164-58729e086aac"
+                src="https://example.org/pictures/a703beca-1ebc-45ed-be48-95e305c4f38b"
+              />
+              <img
+                class="ml-2 truncate flex-1 w-0"
+                alt="Profile picture of user 7ab72bf8-330a-4bfc-bce7-a4e591fe17f0"
+                src="https://example.org/pictures/4d2cde24-5e70-4de1-8ecf-cf1c657db4a4"
+              />
+              <ol class="flex-shrink-0 ml-5 relative">
+                <li class="overflow-hidden rounded-lg bg-gray-100 aspect-w-4 aspect-h-3">
+                  This is item 9cbcdb21-bfe5-49d8-9a30-48822a962513
+                </li>
+                <li class="truncate text-gray-900 font-medium text-base">
+                  This is item 118feca9-6f06-44bb-af28-5ce1c6857a77
+                </li>
+                <li class="flex items-center">This is item 532b3a46-c994-4062-9de8-c33c52ddff64</li>
+              </ol>
+              <ol class="mt-8 lg:mt-0 lg:ml-8">
+                <li class="bg-black bg-opacity-25 fixed inset-0">
+                  This is item 410af27d-f8fb-4e8d-a19a-254a04b9a2e4
+                </li>
+                <li class="lg:space-y-0 space-y-12 lg:grid lg:grid-cols-3 lg:gap-8">
+                  This is item 802b289c-e3d7-4a9a-b307-3bc5b8fb9fa8
+                </li>
+                <li
+                  class="overflow-hidden ring-1 focus:outline-none ring-black ring-opacity-5 w-36 rounded-md origin-top-right z-10 shadow-lg bg-white right-0 absolute mt-3"
+                >
+                  This is item fb061d7f-1209-4392-bde8-ed8e7d9c1b58
+                </li>
+                <li class="-top-px absolute left-6 bg-gray-200 h-px right-0">
+                  This is item 1e1467eb-5f97-4ad0-9176-e5dc0b622ddb
+                </li>
+                <li class="text-gray-900 tracking-tight text-3xl md:text-4xl font-bold">
+                  This is item 08bfacab-6582-4d66-89a9-14a5dc2a6e13
+                </li>
+              </ol>
+            </li>
+            <li class="sr-only">
+              <ol class="mx-auto rounded-full h-7 justify-center items-center flex w-7">
+                <li
+                  class="border-2 text-gray-200 border-dashed border-gray-300 block rounded h-full w-full"
+                >
+                  This is item 607255cd-3b5b-45a0-9e49-2042ceb1d62d
+                </li>
+                <li class="hidden md:space-x-10 md:flex">
+                  This is item 4dfbb97d-3db8-486f-b15e-20747cb9c1a9
+                </li>
+                <li class="sr-only">This is item 219dfc57-42b0-4525-b9e4-af068808bfbc</li>
+              </ol>
+            </li>
+            <li class="lg:px-8 max-w-7xl sm:py-24 py-16 mx-auto px-4 sm:px-6">
+              <img
+                class="text-sm -mx-4 mt-2 text-gray-700"
+                alt="Profile picture of user 39be8647-ca40-4048-8f59-358b350c4cc9"
+                src="https://example.org/pictures/70dd7deb-d115-488d-ae95-cb35893a64b6"
+              />
+            </li>
+            <li class="h-10 w-10 rounded-full">
+              <ul class="sm:px-6 bg-white px-4 py-6 lg:px-8">
+                <li class="px-4 py-16 sm:px-6 mx-auto lg:px-8 max-w-7xl lg:py-24">
+                  This is item 878e5303-4dfd-4999-a321-5975fc4bdcbe
+                </li>
+                <li class="h-5 mr-2.5 text-gray-400 w-5">
+                  This is item 737593ce-1283-47aa-b995-9a95752e5e33
+                </li>
+                <li class="text-gray-500 text-sm mt-2">
+                  This is item 69f1612b-7dff-49ae-b421-1f11a84506fd
+                </li>
+              </ul>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="font-medium hover:text-gray-100 text-sm text-white"
+              >
+                This is link ac7e9b94-d486-445c-8351-1845d379ad54
+              </a>
+            </li>
+            <li class="mt-1">
+              <ol class="flex h-7 rounded-full items-center w-7 mx-auto justify-center">
+                <li
+                  class="rounded-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
+                >
+                  This is item 159a0e92-7304-474f-9c2a-9996a712a416
+                </li>
+                <li class="p-2">This is item 09b3acba-a146-4eeb-897c-16d1e985a382</li>
+                <li
+                  class="px-3 rounded-full relative border inline-flex border-gray-300 py-0.5 items-center"
+                >
+                  This is item b241a536-8e2f-4815-b565-d90aca2a2a5c
+                </li>
+              </ol>
+              <img
+                class="space-y-2 py-6"
+                alt="Profile picture of user 02635db4-e4fe-4829-b45c-a2b7693562af"
+                src="https://example.org/pictures/997cec8e-e401-46c6-a67e-236472e8ce81"
+              />
+              <ul class="object-center saturate-0 w-full filter object-cover h-full">
+                <li class="sm:col-span-4">This is item 0ec9a2de-2d46-4942-b27b-a5c00957abb9</li>
+                <li class="-m-2 group flex items-center p-2">
+                  This is item b784f4eb-5a56-479a-8341-1353d90080fa
+                </li>
+                <li class="ring-1 ring-opacity-5 shadow-lg rounded-lg overflow-hidden ring-black">
+                  This is item 66fcef9c-156b-4709-bbec-0a42c347b39a
+                </li>
+                <li class="text-sm font-medium text-gray-500">
+                  This is item 805f9916-1d0b-4210-88fa-4fb494708b22
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="py-3.5 pl-3 pr-4 sm:pr-6 relative">
+          <ul class="justify-center flex p-8 items-center bg-white">
+            <li class="text-gray-900 text-sm font-medium">
+              <ol class="md:flex-1 relative md:flex">
+                <li class="text-orange-500">This is item 8e35c97c-0e04-4ef7-9e12-17d364903426</li>
+                <li class="bg-white shadow overflow-hidden px-6 rounded-md py-4">
+                  This is item 64ffb17b-cb90-4e8f-8cf8-ce1e8f27918e
+                </li>
+              </ol>
+            </li>
+            <li class="text-gray-900 font-medium">
+              <ol class="sr-only">
+                <li class="mt-4 space-y-4">This is item c06503d0-fda9-4b87-ab19-f534ba28f0cc</li>
+                <li class="flex inset-0 items-center absolute">
+                  This is item ad90924c-bdae-49d2-b4cc-e3de5811657c
+                </li>
+                <li
+                  class="text-gray-900 bg-white h-14 flex py-2 px-3 hover:bg-gray-100 focus:z-10 flex-col"
+                >
+                  This is item a93b49e5-561b-4e44-8dfb-cf7d2ae642cf
+                </li>
+              </ol>
+              <img
+                class="text-gray-500"
+                alt="Profile picture of user a0a2aee6-7184-4f36-aedc-7334f739bd25"
+                src="https://example.org/pictures/a76c7b7a-ed4d-452c-84f5-4e539c75a056"
+              />
+              <a href="#" target="_blank" class="text-gray-900 font-medium">
+                This is link 5e06acd9-d479-4695-bcf0-d4666f64f0be
+              </a>
+              <img
+                class="h-6 rounded-full cursor-pointer focus:ring-offset-2 relative w-11 transition-colors focus:outline-none border-2 flex-shrink-0 duration-200 inline-flex focus:ring-2 focus:ring-gray-900 border-transparent ease-in-out"
+                alt="Profile picture of user e09d31c5-5dc8-4814-9044-d8992c0664fb"
+                src="https://example.org/pictures/76ec3a21-0519-4e00-961c-1ce9a63d89d8"
+              />
+            </li>
+            <li class="xl:block hidden xl:pl-8">
+              <ol class="text-sm text-gray-900 truncate font-medium">
+                <li class="z-20 ring-white inline-block rounded-full relative ring-2 h-6 w-6">
+                  This is item e1d792ba-c64a-43f2-94f9-d3900191f5cb
+                </li>
+                <li class="text-gray-900 font-medium">
+                  This is item d5d9d984-2557-4bb6-a589-dd04aa36d710
+                </li>
+                <li class="sm:px-6 px-4 py-4">This is item 7cf71db3-a768-4fe7-bab9-153b3b2c67e7</li>
+                <li class="items-start flex">This is item a917c0fc-5349-47b7-9030-6867985fc7be</li>
+              </ol>
+              <img
+                class="bg-gray-50 px-4 sm:py-12 py-8 sm:px-6 xl:pl-12 lg:px-8"
+                alt="Profile picture of user f0754e6c-db06-417c-959f-717d0098676e"
+                src="https://example.org/pictures/dae26da1-597b-42ea-a522-33e8c23ed333"
+              />
+              <ol class="text-gray-500 hover:text-gray-600">
+                <li class="py-20">This is item 1b025056-f5c9-4f0f-9969-374f323727be</li>
+                <li class="text-gray-500 font-medium text-sm">
+                  This is item 9534413c-da2e-45cb-8d54-0a4c2fa01620
+                </li>
+                <li class="mx-auto w-full max-w-xs">
+                  This is item 38c68f6d-6206-4006-b02a-9ae3ef81c98a
+                </li>
+              </ol>
+            </li>
+            <li class="text-gray-500 text-lg leading-6 mt-3">
+              <ol class="items-center rounded-full mx-auto flex justify-center w-7 h-7">
+                <li class="text-gray-900 font-medium text-lg">
+                  This is item 189fa4fa-ca21-4d73-b295-383da320ece6
+                </li>
+                <li class="md:gap-8 md:grid md:grid-cols-12 pb-8 pt-6">
+                  This is item 571fb48f-57f8-47dd-826e-925e7b646d84
+                </li>
+                <li class="font-medium px-3 py-2 rounded-md text-sm">
+                  This is item b7da10be-e360-4e28-8ffb-30870f97c7a6
+                </li>
+              </ol>
+              <ul class="-mt-1 -ml-4 flex flex-wrap">
+                <li class="h-2 -ml-0.5 w-2 text-indigo-400 mr-1.5">
+                  This is item eeca141c-f2fd-4834-9ed7-5993b0cb65e6
+                </li>
+                <li class="w-8 h-8">This is item 1058035d-b1b3-4efb-873e-0486070b4d7d</li>
+                <li class="sr-only">This is item 6f271226-cb1f-467e-87b2-e16d9b070f97</li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="flex absolute left-0 pointer-events-none items-center inset-y-0"
+              >
+                This is link 36819225-12b5-4c11-b2ee-404856bd9878
+              </a>
+              <ol class="h-6 w-6">
+                <li class="bg-white py-1.5 hover:bg-gray-100 focus:z-10 relative text-gray-900">
+                  This is item e38d5c9c-940f-4878-8da5-a65feafac7ab
+                </li>
+                <li class="text-gray-700 text-right text-sm block">
+                  This is item dfc8489e-a4dd-48f7-943b-fba2fabe2ca8
+                </li>
+                <li class="text-gray-400 w-6 h-6 flex-shrink-0">
+                  This is item e3e26f1c-08e2-4b62-b73e-2d349c5de1bf
+                </li>
+                <li class="hover:text-gray-600 text-gray-500">
+                  This is item 9f9719ed-a737-4930-a65e-6474781c64fd
+                </li>
+              </ol>
+            </li>
+            <li
+              class="bg-white transition-all overflow-hidden relative sm:my-8 sm:max-w-lg rounded-lg transform pb-4 shadow-xl px-4 sm:w-full text-left pt-5 sm:p-6"
+            >
+              <img
+                class="space-y-6 border-gray-200 py-6 px-4 border-t"
+                alt="Profile picture of user 1ce02e65-a0f1-4305-9a12-23afd01582cd"
+                src="https://example.org/pictures/d73b35cb-01a9-4384-9f34-da7e7af5b6fd"
+              />
+              <ul class="py-3 flex text-sm justify-between font-medium">
+                <li class="font-bold text-gray-900 tracking-tight text-2xl">
+                  This is item 232d51b9-094b-475c-ad53-89e32bcea259
+                </li>
+                <li class="mt-10 lg:col-start-1 lg:self-start lg:max-w-lg lg:row-start-2">
+                  This is item c1c154fa-3a2d-4109-94d1-b12ba6f0991a
+                </li>
+                <li class="sm:space-y-4 space-y-6 sm:mt-4 mt-6">
+                  This is item 1061b106-4316-4580-b6ff-26e6c0ebb3fe
+                </li>
+                <li class="mt-3">This is item 5ec8657f-7020-476e-b43f-86594f4aecce</li>
+              </ul>
+              <img
+                class="text-gray-400 flex-shrink-0 h-5 w-5"
+                alt="Profile picture of user 76903155-ca94-4f32-8b5c-33f495e0a291"
+                src="https://example.org/pictures/56cd7976-0cc7-4220-b5c2-671b040ce316"
+              />
+              <ol class="hover:text-gray-800">
+                <li class="border-transparent hover:bg-gray-50 text-gray-900 hover:text-gray-900">
+                  This is item 34cba3ff-d465-461c-a7bb-4b7d4881e7e2
+                </li>
+                <li class="text-gray-300 text-base">
+                  This is item 658e812c-66f0-4c8a-9332-8f2b17f7f592
+                </li>
+                <li class="absolute sm:mt-6 left-4 top-4 text-center sm:static">
+                  This is item 635e9312-3baf-45f0-a1cf-9615ae21b6e8
+                </li>
+                <li class="h-6 w-px bg-gray-200">
+                  This is item 311b639e-309f-4ec1-b302-7bb23cd1c71f
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <ol class="mt-6">
+            <li class="hover:bg-gray-100 focus:z-10 text-gray-900 bg-white py-1.5 relative">
+              <a href="#" class="block text-sm font-medium text-gray-700">
+                This is link 516ad276-f409-459b-9daa-8a7ba3562946
+              </a>
+              <ul class="rounded-md h-14 w-14">
+                <li class="text-gray-700 ml-3 text-sm font-medium block">
+                  This is item 1ac42b53-615a-4940-aee3-e57aeb34ebdf
+                </li>
+                <li class="font-medium text-gray-900 text-sm">
+                  This is item 8c9c434a-c624-4ee0-b582-3f41ad4340ff
+                </li>
+                <li class="sr-only">This is item 9ad8cc2a-afe3-46e6-a519-dde03abe7910</li>
+                <li class="mt-6">This is item 9902400a-5f06-4ad3-aebc-39d46eb8e3ff</li>
+              </ul>
+              <ul
+                class="p-2.5 text-gray-700 rounded-md items-center -m-2.5 justify-center inline-flex"
+              >
+                <li class="flex-1 ml-3 min-w-0 text-gray-600">
+                  This is item 460badc8-198f-4d36-bee7-180e75240f27
+                </li>
+                <li class="mt-1">This is item bfeba06a-b690-4d92-8e8b-5198e0f66142</li>
+                <li class="sm:items-center sm:flex">
+                  This is item 9e4dbcc4-4afe-44e0-8b58-f97beb15f526
+                </li>
+                <li class="flow-root">This is item 45486da8-367b-4725-82bd-0da52c7026a4</li>
+                <li class="sm:pr-4 absolute top-0 sm:-ml-10 pt-4 -ml-8 left-0 flex pr-2">
+                  This is item f4361c20-472a-4867-80c3-21deddfbeb3d
+                </li>
+              </ul>
+              <ul class="h-full absolute w-full inset-0 object-cover">
+                <li class="text-gray-400 mr-1.5 flex-shrink-0 h-5 w-5">
+                  This is item 269f6c03-ccd1-4122-b452-f3d0aa63cb53
+                </li>
+                <li class="max-w-lg mx-auto">This is item eb36dd6a-b1f6-4c81-b8b2-e9eff1af9c53</li>
+              </ul>
+            </li>
+            <li class="flex-col flex bg-gray-800 flex-1 overflow-y-auto">
+              <ul class="text-sm mt-4 text-gray-700">
+                <li class="flex-1 w-0 flex items-center">
+                  This is item d7f1babf-f7de-4e67-9c56-938e31f94fb7
+                </li>
+                <li class="bg-gray-100 w-10 h-10 rounded-full">
+                  This is item e432dabd-9a91-4277-813a-e196e7c79a2e
+                </li>
+                <li class="font-medium text-gray-900">
+                  This is item bf28a174-8700-4c44-8eba-3e1e7abb672c
+                </li>
+                <li class="text-gray-400 relative max-w-2xl focus-within:text-gray-500">
+                  This is item 1d215cde-6de7-4ec6-8ddd-4db2d01b961c
+                </li>
+                <li class="text-gray-700 block px-4 text-sm py-2">
+                  This is item 55f92724-681b-4d48-9284-f6ed038c8b5c
+                </li>
+              </ul>
+              <ol class="text-gray-900 font-medium">
+                <li class="focus:z-10 py-1.5 hover:bg-gray-100 bg-white">
+                  This is item 01c29adb-8234-48e8-bea6-22589ea8aaf4
+                </li>
+                <li
+                  class="-m-3 items-center hover:bg-gray-100 text-base rounded-md font-medium p-3 text-gray-900 flex"
+                >
+                  This is item 15c0dae2-5be4-4c0d-9827-5fd6a1a857ce
+                </li>
+                <li class="flex-shrink-0 pt-0.5">
+                  This is item a857ecee-7d18-4918-a0e3-d6a46748bb2a
+                </li>
+                <li class="block -m-2 font-medium text-gray-900 p-2">
+                  This is item 2c14b1c7-4932-4f30-8c06-6de7a40114f6
+                </li>
+                <li class="object-center object-cover group-hover:opacity-75">
+                  This is item a526cd9a-8b0f-43bf-a9e8-809538684e2a
+                </li>
+              </ol>
+              <ol class="cursor-not-allowed opacity-25">
+                <li
+                  class="z-10 ring-opacity-5 absolute bg-white focus:outline-none shadow-2xl rounded-md ring-black right-0 w-40 ring-1 origin-top-right mt-2"
+                >
+                  This is item a945d582-2e27-4338-b3bd-2742e7f3b4ef
+                </li>
+                <li class="justify-between items-center flex">
+                  This is item d574e4a5-3e93-4c27-adc9-01a4ec8f7683
+                </li>
+                <li class="w-7 h-7 mx-auto justify-center rounded-full items-center flex">
+                  This is item 3c000c0e-900e-4086-9e1c-fda41eff8c81
+                </li>
+                <li class="border-gray-200 border-b">
+                  This is item 296b5cc4-2d95-411a-91ec-78e506f0aeaf
+                </li>
+                <li class="items-start flex">This is item e7329e7a-270e-4245-ae59-d2448ba4dd46</li>
+              </ol>
+            </li>
+            <li class="rounded-tl-lg hover:bg-gray-100 text-gray-400 bg-gray-50 focus:z-10 py-1.5">
+              <img
+                class="rounded-md p-2 flex justify-center h-10 items-center -mr-2 bg-white w-10 text-gray-400"
+                alt="Profile picture of user 439a9dce-52c7-4958-a6f5-21f0c899527c"
+                src="https://example.org/pictures/ceb19084-1b80-4248-a0ea-9be2ef802e12"
+              />
+            </li>
+            <li class="sr-only">
+              <ol class="font-medium text-gray-900">
+                <li
+                  class="flex mx-auto w-8 text-gray-900 rounded-full justify-center items-center hover:bg-gray-200 h-8"
+                >
+                  This is item 3f7452fd-97aa-4f16-89c5-3c3d5c3e4b67
+                </li>
+                <li class="relative py-2 bg-white px-3">
+                  This is item 108c3718-b94d-4aa4-a478-905631d04b0d
+                </li>
+                <li class="bg-green-100">This is item 29796ba9-c9f4-43ff-a148-a05d6593c4bc</li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-gray-900 font-medium text-lg"
+              >
+                This is link f4fa01df-4632-4eee-a4cf-9159c954412d
+              </a>
+              <ol
+                class="focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm shadow-sm border-gray-300 block w-full rounded-md mt-1"
+              >
+                <li class="hover:bg-gray-100 bg-white focus:z-10 py-1.5">
+                  This is item aef28e78-2f27-4389-902d-cef41dc6ae94
+                </li>
+                <li class="space-y-6 mt-5">This is item ae8744e7-6b3c-4a1f-b26e-2d84807850ce</li>
+                <li class="sr-only">This is item 19f756c8-d168-4ec0-bc18-c6dafd02c99d</li>
+              </ol>
+              <ul
+                class="hover:bg-indigo-700 text-white inline-flex border-transparent focus:ring-indigo-500 font-medium border bg-indigo-600 text-sm px-4 rounded-md focus:ring-offset-2 py-2 focus:ring-2 shadow-sm focus:outline-none items-center"
+              >
+                <li class="items-center py-3 flex justify-center">
+                  This is item a87cb38a-6c5e-4ccc-9c09-4377c9b34638
+                </li>
+                <li class="w-7 h-7 justify-center rounded-full mx-auto items-center flex">
+                  This is item 764c1216-5c36-42e0-b52d-47faf61ba368
+                </li>
+              </ul>
+            </li>
+            <li class="font-medium text-gray-900 text-sm">
+              <ul class="text-sm">
+                <li class="text-lg font-bold">This is item 2ba85ffa-e465-4003-8cc2-28669af7be40</li>
+                <li class="bg-white -space-y-px rounded-md">
+                  This is item 7db5ffaf-cdf6-404d-986e-5f5a07a880d3
+                </li>
+                <li class="lg:px-8 max-w-2xl lg:max-w-7xl sm:py-32 mx-auto sm:px-6 px-4 py-24">
+                  This is item 72cc9ff6-3017-4571-a33e-09d41a7859f5
+                </li>
+                <li class="font-medium text-base text-gray-900">
+                  This is item f5c5967b-cdae-4e04-b8fd-8e87ed9889f8
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li
+          class="bg-indigo-600 px-4 text-white text-sm border focus:ring-indigo-500 justify-center shadow-sm py-2 font-medium border-transparent rounded-md focus:ring-2 focus:outline-none inline-flex ml-4 hover:bg-indigo-700 focus:ring-offset-2"
+        >
+          <a href="#" target="_blank" class="text-gray-900">
+            This is link 5527db70-73d8-49eb-ad67-b29747b327af
+          </a>
+          <ol class="row-span-full col-start-1">
+            <li class="sr-only">
+              <a
+                href="#"
+                class="focus:outline-none hover:bg-gray-50 text-sm shadow-sm px-4 text-gray-700 bg-white border border-gray-300 focus:ring-indigo-500 py-2 font-medium rounded-md focus:ring-2 focus:ring-offset-2"
+              >
+                This is link 7454bed8-7222-42ce-b419-2cf460982321
+              </a>
+              <a href="#" target="_blank" rel="noreferrer" class="text-sm">
+                This is link dcec0cf7-a859-4bdf-bcb0-af5ceb9f6a2b
+              </a>
+              <ol class="h-64 w-44 overflow-hidden rounded-lg">
+                <li class="space-y-4 mt-4">This is item 66938766-65e7-4e0e-a511-339f0a33cb72</li>
+                <li
+                  class="relative flex shadow-sm focus:outline-none border p-4 bg-white rounded-lg cursor-pointer"
+                >
+                  This is item cc78f6e4-f2d1-427f-b508-f460ed6c1520
+                </li>
+                <li
+                  class="to-indigo-300 bg-clip-text bg-gradient-to-r text-transparent from-purple-300"
+                >
+                  This is item 88beaef2-5a33-4678-a525-bd9ef965fdef
+                </li>
+                <li class="group-hover:text-gray-500 text-gray-400">
+                  This is item 94982416-f7d6-4399-88b7-e8f03ba29486
+                </li>
+              </ol>
+            </li>
+            <li class="ml-auto">
+              <img
+                class="px-5 mt-6"
+                alt="Profile picture of user 999d59e1-3d4c-4a9b-9ead-5411bbbe8c0d"
+                src="https://example.org/pictures/02f09f3f-c5dc-4ccd-a1b5-2a0df26c868e"
+              />
+              <img
+                class="hover:text-gray-700 text-gray-500 hover:border-gray-300 border-transparent"
+                alt="Profile picture of user 563e71df-a830-40fd-8ae2-17243ef47846"
+                src="https://example.org/pictures/f4c9cb4d-f903-41e9-adff-477358eae40d"
+              />
+              <ol class="whitespace-nowrap text-sm text-gray-500 py-4 px-3">
+                <li
+                  class="hover:text-gray-500 w-10 text-gray-400 -m-2.5 rounded-full justify-center inline-flex h-10 items-center"
+                >
+                  This is item a13dcac9-bb50-4b00-9886-39ae13aa1901
+                </li>
+                <li
+                  class="-m-2.5 justify-center items-center text-gray-400 hover:text-gray-500 inline-flex h-10 rounded-full w-10"
+                >
+                  This is item e24cc336-44d0-45be-aa60-bb67f04e0e29
+                </li>
+              </ol>
+            </li>
+            <li
+              class="bg-none text-gray-900 focus:ring-2 text-base rounded-md pl-3 focus:ring-indigo-600 border-0 pr-8 font-medium"
+            >
+              <img
+                class="text-gray-300"
+                alt="Profile picture of user 347bbd2d-9dd1-4aad-a09e-08be08bd9046"
+                src="https://example.org/pictures/e198a8b3-b289-4080-8f93-5d0558eb7c56"
+              />
+              <ol
+                class="text-base bg-warm-gray-100 border rounded-md text-warm-gray-900 border-transparent font-medium px-6 py-2 hover:bg-warm-gray-200"
+              >
+                <li class="h-6 w-6 flex-shrink-0 text-green-500">
+                  This is item f650924f-9eba-49aa-ae11-f6c9f72e9325
+                </li>
+                <li class="space-y-6 mt-6">This is item f64a2440-63c7-4240-aaf3-8b6bc964bb1e</li>
+                <li class="absolute inset-0 opacity-50 mix-blend-multiply saturate-0 filter">
+                  This is item 5a42ee1a-dc80-4398-a445-efea6a9f630e
+                </li>
+                <li class="text-base font-medium text-gray-500">
+                  This is item 7b2d127a-66c6-4093-9b3e-4af7f79ad835
+                </li>
+              </ol>
+            </li>
+            <li class="py-1">
+              <img
+                class="w-6 h-6"
+                alt="Profile picture of user 0e0f6b2a-a613-4029-9593-8b72507766ba"
+                src="https://example.org/pictures/b6c42158-9e5d-47ce-a38d-7ef629b3aa39"
+              />
+              <ul class="bg-indigo-900 w-1/2 fixed top-0 right-0 lg:block h-full hidden">
+                <li class="w-px bg-gray-600 h-6">
+                  This is item 1e1e3942-fba2-4bbe-86cb-0aed0645f96f
+                </li>
+                <li class="text-sm font-medium text-gray-900">
+                  This is item 3a4f6863-0568-4ce5-bddc-49e852780ba6
+                </li>
+                <li class="text-sm font-medium text-gray-900">
+                  This is item d09ba52a-dd4b-461a-a3b2-33f464bd5047
+                </li>
+                <li
+                  class="text-gray-500 hover:border-gray-300 items-center text-sm pt-1 px-1 font-medium inline-flex hover:text-gray-700 border-b-2 border-transparent"
+                >
+                  This is item e30e9604-1f12-4038-8bd1-b34d385dd251
+                </li>
+                <li class="md:flex md:ml-4 md:items-center md:flex-shrink-0 hidden">
+                  This is item 9d3755aa-384e-4fa1-a213-1b9d04f4f2a2
+                </li>
+              </ul>
+              <ol class="text-gray-500">
+                <li
+                  class="border-transparent focus:ring-2 py-2 rounded-md focus:ring-offset-2 text-white text-base items-center border flex hover:bg-indigo-700 w-full px-4 font-medium justify-center focus:ring-indigo-500 bg-indigo-600"
+                >
+                  This is item 8fc349c6-21fc-49bb-bd83-433fcb5b5a98
+                </li>
+                <li class="inset-0 overflow-y-auto z-10 fixed">
+                  This is item 21e4ef21-a014-49b5-8132-31414db75c20
+                </li>
+                <li class="hidden lg:ml-4 lg:block">
+                  This is item 1381fe03-1563-4627-aef0-ab026b16d43a
+                </li>
+              </ol>
+            </li>
+          </ol>
+          <img
+            class="grid-cols-1 gap-x-6 gap-y-10 grid"
+            alt="Profile picture of user b6ae2012-c398-42f8-a0f1-c8d13847f09b"
+            src="https://example.org/pictures/0f0f91e2-23d0-4e44-8639-45cbe7c428ee"
+          />
+        </li>
+      </ul>
+      <img
+        class="rounded-full focus:ring-2 justify-center bg-white focus:ring-indigo-500 relative focus:outline-none h-8 focus:ring-offset-2 w-8 items-center group inline-flex"
+        alt="Profile picture of user 5ba8da39-2c11-4665-9997-a5c220143192"
+        src="https://example.org/pictures/6ca229a6-8fc5-4f62-a69e-2b1c1d09da94"
+      />
+    </li>
+  </ol>
+</div>
diff --git a/oxide/crates/core/benches/fixtures/template-004.html b/oxide/crates/core/benches/fixtures/template-004.html
new file mode 100644
index 000000000..5305278fe
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-004.html
@@ -0,0 +1,1935 @@
+<div class="h-20 flex-none rounded-md object-center object-cover w-20">
+  <a href="#" class="w-6 h-6"> This is link 01c5a0d6-f1d4-4d79-9b17-baac0a7ab391 </a>
+  <nav class="text-rose-400 flex-shrink-0 h-6 w-6">
+    <ul class="ml-4">
+      <li class="w-full object-center h-full object-cover group-hover:opacity-75">
+        <ol class="sm:m-0 flex-shrink-0 sm:order-first ml-4 sm:mr-6">
+          <li class="text-gray-700 block font-medium text-sm">
+            <ul class="py-4">
+              <li class="font-medium hover:text-indigo-500 text-base text-indigo-600">
+                <img
+                  class="mt-6"
+                  alt="Profile picture of user 00048864-9863-4bf6-a54a-fffb1927198f"
+                  src="https://example.org/pictures/9decc4fb-a49b-4aa3-ae2d-dbdbbc330975"
+                />
+              </li>
+              <li class="text-white">
+                <a href="#" target="_blank" rel="noreferrer" class="leading-7 text-base">
+                  This is link 5cc42d1a-0af6-4a10-a066-b2d851395cd0
+                </a>
+                <a href="#" class="flex-1 min-w-0 ml-3">
+                  This is link b5f5e1de-32c9-4995-a79b-2db83f4ea715
+                </a>
+                <ol class="flex ml-3 h-5 items-center"></ol>
+              </li>
+            </ul>
+            <img
+              class="block ml-3 truncate"
+              alt="Profile picture of user 6510e98b-6102-43b6-a102-2ac2bb70d851"
+              src="https://example.org/pictures/13eb2101-165a-4ef9-98d2-34c83152d567"
+            />
+            <img
+              class="sr-only"
+              alt="Profile picture of user 7b1c87f9-925b-4dbc-b29c-74be8594e21b"
+              src="https://example.org/pictures/76996696-c8c2-4ee2-87e0-d9d3c2c4d9bd"
+            />
+          </li>
+          <li class="sm:inline block">
+            <ol class="text-sm text-gray-900 font-medium">
+              <li class="text-gray-200">
+                <ol
+                  class="absolute px-2 rounded-r-md flex focus:outline-none inset-y-0 right-0 items-center"
+                ></ol>
+                <ol class="leading-7 text-base"></ol>
+                <ol
+                  class="object-center object-cover rounded-md sm:w-48 w-20 h-20 flex-none sm:h-48"
+                ></ol>
+              </li>
+              <li class="hover:text-gray-800">
+                <a
+                  href="#"
+                  target="_blank"
+                  class="lg:grid-cols-2 lg:gap-8 relative lg:items-center lg:grid mt-12 lg:mt-24"
+                >
+                  This is link 47a197f0-b39d-4d71-a868-962888f48d7c
+                </a>
+              </li>
+              <li class="border-gray-300 border-l flex pl-4">
+                <a href="#" rel="noreferrer" class="w-auto h-8">
+                  This is link 7e5933f9-a050-4d4b-8baa-c2097edb70f1
+                </a>
+                <a href="#" rel="noreferrer" class="max-w-md mx-auto lg:mx-0 sm:max-w-lg">
+                  This is link 42386eba-0bae-4a5c-9f70-dba961e4fe89
+                </a>
+                <img
+                  class="sm:px-6 lg:px-8 mx-auto max-w-7xl px-4"
+                  alt="Profile picture of user 8c0f327d-a8ca-46a3-be31-20b7d55fe5e1"
+                  src="https://example.org/pictures/eb0fa645-5693-497c-94dc-3d561c48fb02"
+                />
+              </li>
+              <li class="w-8 rounded-full h-8">
+                <ol class="sr-only"></ol>
+                <ol class="text-gray-500 mt-6 font-medium text-base text-center"></ol>
+                <ul class="whitespace-nowrap px-3 text-sm py-4 text-gray-500"></ul>
+              </li>
+            </ol>
+            <a href="#" class="text-sm text-gray-500 min-w-0 pl-5 py-1 flex-1 sm:py-3">
+              This is link 952267b1-312a-4aa6-9ab9-7e3c37343c5f
+            </a>
+            <ol class="items-center flex px-5">
+              <li
+                class="font-medium sm:order-1 text-gray-900 row-end-2 row-span-2 sm:flex-none sm:text-right sm:w-1/3 sm:ml-6"
+              >
+                <ul
+                  class="shadow-sm text-blue-gray-900 w-full focus:ring-blue-500 border-blue-gray-300 rounded-md mt-1 focus:border-blue-500 block sm:text-sm"
+                ></ul>
+                <ol class="sr-only"></ol>
+                <img
+                  class="mt-3 flex items-center"
+                  alt="Profile picture of user 76266747-dbeb-4440-9733-ea92577ca55b"
+                  src="https://example.org/pictures/25c77f95-2fab-4955-8fd0-f97c51125a44"
+                />
+              </li>
+              <li
+                class="lg:col-start-2 col-span-6 grid-cols-2 md:col-start-3 gap-8 sm:grid-cols-3 md:col-span-8 md:mt-0 mt-10 grid md:row-start-1 lg:col-span-6"
+              >
+                <ul class="sm:mt-0 sm:w-auto w-full order-3 mt-2 sm:order-2 flex-shrink-0"></ul>
+                <img
+                  class="text-sm text-gray-900 mt-1 sm:mt-0 sm:col-span-2"
+                  alt="Profile picture of user 34b6fd56-e515-4df0-92a0-694dc7f5d0ff"
+                  src="https://example.org/pictures/e95333db-a197-4eb9-a55a-2507585de19d"
+                />
+                <img
+                  class="col-span-1 rounded-md flex shadow-sm"
+                  alt="Profile picture of user f7fa4dc0-b9a7-439e-9249-b1bba8d4a52e"
+                  src="https://example.org/pictures/df7c350b-fb26-4e27-b199-56b31ac1a212"
+                />
+              </li>
+            </ol>
+          </li>
+        </ol>
+        <ol class="col-span-3 sm:col-span-2">
+          <li class="relative z-10">
+            <a
+              href="#"
+              target="_blank"
+              class="sm:grid-cols-3 sm:grid sm:pt-5 sm:border-gray-200 sm:items-start sm:border-t sm:gap-4"
+            >
+              This is link 65e299a2-9cf9-41e2-8be9-53a876ba6e1a
+            </a>
+            <ol class="h-5 text-gray-300 w-5">
+              <li class="font-medium px-3 text-sm py-2 text-gray-900">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="text-sm hover:text-gray-800 text-gray-700 font-medium"
+                >
+                  This is link 90297e99-d91b-483f-abeb-8059108e8edf
+                </a>
+                <ul class="text-gray-500 mt-2"></ul>
+                <a
+                  href="#"
+                  class="bg-white focus:outline-none text-gray-400 items-center rounded-md focus:ring-indigo-500 hover:bg-gray-100 focus:ring-2 inline-flex justify-center p-2 focus:ring-inset"
+                >
+                  This is link 95eb70cd-d3bd-464b-b537-33a72ef8a241
+                </a>
+              </li>
+              <li class="hidden sm:justify-between sm:flex-1 sm:items-center sm:flex">
+                <a href="#" target="_blank" rel="noreferrer" class="border-transparent">
+                  This is link faa61b01-b9f0-4917-a586-629ba8aab6f3
+                </a>
+                <ol class="relative flex"></ol>
+                <ul class="h-16 items-center flex"></ul>
+                <ul class="space-y-4 mt-4"></ul>
+              </li>
+              <li class="font-medium block text-gray-700 text-sm">
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user 210910cb-4166-4597-abc1-1a336e741051"
+                  src="https://example.org/pictures/1d0cd6df-f240-465b-a181-b4f1f061981a"
+                />
+                <ul class="py-12 px-4 sm:px-6 max-w-7xl lg:px-8 mx-auto"></ul>
+                <ol class="py-4 justify-between items-center flex"></ol>
+              </li>
+              <li
+                class="font-medium border text-gray-700 hover:bg-gray-50 shadow-sm text-sm px-3 bg-white disabled:opacity-30 inline-flex focus:ring-offset-2 py-2 rounded-md border-gray-300 leading-4 focus:ring-indigo-500 focus:outline-none items-center focus:ring-2 disabled:cursor-not-allowed"
+              >
+                <img
+                  class="lg:order-first hidden lg:flex-shrink-0 lg:block"
+                  alt="Profile picture of user cf497404-df94-43f1-adb3-08b596dadd31"
+                  src="https://example.org/pictures/e2d66233-6aee-4eb3-99e3-f2eb50bd10ca"
+                />
+                <ol class="lg:w-0 justify-start lg:flex-1 flex"></ol>
+              </li>
+            </ol>
+          </li>
+          <li class="sm:flex sm:space-x-5 sm:-mt-16 -mt-12 sm:items-end">
+            <a href="#" target="_blank" class="flex-shrink-0">
+              This is link 0584110f-0e96-452d-b216-ba2d4c06cc01
+            </a>
+          </li>
+          <li
+            class="items-center inline-flex justify-center bg-indigo-600 border text-base py-3 font-medium text-white px-5 border-transparent rounded-md hover:bg-indigo-700"
+          >
+            <img
+              class="pt-5"
+              alt="Profile picture of user fc143e07-0211-4488-b563-930199f3f095"
+              src="https://example.org/pictures/694d812b-d694-4dab-8fa7-2a329af3af26"
+            />
+            <img
+              class="space-y-6 mt-6"
+              alt="Profile picture of user ba1b3e7d-ceea-4df0-82d5-c0ccd79e38dd"
+              src="https://example.org/pictures/17ebb49e-d558-4229-a2a1-e86a7661bdc3"
+            />
+          </li>
+          <li class="space-x-3 flex">
+            <ul class="py-12 lg:py-24 lg:px-8 max-w-lg px-4 sm:px-6 mx-auto">
+              <li class="sm:flex-auto">
+                <img
+                  class="flex-auto font-semibold text-gray-900"
+                  alt="Profile picture of user f5983517-3e64-420d-a068-7a03cc785316"
+                  src="https://example.org/pictures/9db57891-fce6-436a-a055-36dd8ade95d2"
+                />
+              </li>
+              <li class="py-4">
+                <img
+                  class="p-2 hover:text-gray-500 lg:hidden text-gray-400"
+                  alt="Profile picture of user 7f95996a-378a-463e-9424-2302aa7d8788"
+                  src="https://example.org/pictures/83fa08fc-0af9-4c82-8dc0-5ec68b1793be"
+                />
+                <img
+                  class="h-6 w-6"
+                  alt="Profile picture of user 57797fc5-93cd-4ea8-ba4a-3e90cffeb303"
+                  src="https://example.org/pictures/61b178f4-5795-4374-aa5a-04daf1834f47"
+                />
+                <a href="#" target="_blank" class="text-gray-900">
+                  This is link 1fc86234-86d5-4443-8ccf-1c01b2bcb124
+                </a>
+              </li>
+              <li
+                class="max-w-xs w-full flex-col flex bg-white shadow-xl pb-12 relative overflow-y-auto"
+              >
+                <ol
+                  class="hover:bg-gray-100 py-2 focus:z-10 flex-col flex text-indigo-600 font-semibold h-14 bg-white px-3"
+                ></ol>
+              </li>
+            </ul>
+          </li>
+          <li class="text-indigo-600 border-gray-300 h-4 focus:ring-indigo-500 w-4">
+            <ul class="text-gray-900 tracking-tight sm:text-3xl font-bold text-2xl">
+              <li class="text-gray-700 text-sm block font-medium">
+                <ul class="focus:z-10 bg-white hover:bg-gray-100 py-1.5"></ul>
+                <ol
+                  class="translate-y-6 lg:translate-y-20 object-cover translate-x-6 object-left-top sm:translate-x-16 transform rounded-md"
+                ></ol>
+                <ol class="space-x-2 flex mt-6"></ol>
+                <img
+                  class="md:gap-x-8 sm:grid-rows-1 grid sm:gap-x-6 sm:grid-cols-12 grid-cols-1 text-sm lg:gap-x-8"
+                  alt="Profile picture of user b9966303-1186-42d6-8d78-1335f12c7160"
+                  src="https://example.org/pictures/59228835-fc9d-4da4-8f23-769a2af7bf10"
+                />
+              </li>
+              <li class="sm:text-sm text-base flex items-center">
+                <img
+                  class="md:flex hidden space-x-10"
+                  alt="Profile picture of user 9885de0d-6165-45f6-a718-c1738083f9a8"
+                  src="https://example.org/pictures/07aeeaee-cc76-4fb7-bd7d-3bbc06fd5cbc"
+                />
+                <ol class="text-sm text-gray-900 truncate font-medium"></ol>
+                <img
+                  class="focus:ring-indigo-500 text-indigo-600 border-gray-300 w-4 rounded h-4"
+                  alt="Profile picture of user 2a01829d-c4a8-403b-b560-3145d4dcd4c9"
+                  src="https://example.org/pictures/51f0f61f-4efe-40e7-a45b-2b0e48532f51"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="py-6 lg:col-span-3 sm:px-6 lg:px-0 px-2 lg:py-0"
+                >
+                  This is link 9144717d-aaeb-4afb-a79b-18979f2cae3e
+                </a>
+              </li>
+            </ul>
+            <ul class="relative z-10">
+              <li class="lg:block hidden">
+                <ol
+                  class="justify-center bg-indigo-500 sm:w-12 sm:h-12 inline-flex items-center w-10 rounded-md text-white h-10"
+                ></ol>
+              </li>
+              <li class="h-6 w-6">
+                <ul class="truncate text-base"></ul>
+                <ol class="hover:underline text-gray-900"></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="w-6 h-6">
+                  This is link 346a7813-228a-4ea9-9280-742f1f6bdad7
+                </a>
+              </li>
+              <li class="mt-0.5">
+                <a href="#" rel="noreferrer" class="font-medium text-gray-900">
+                  This is link 2b9465ae-c6f8-49bc-b242-5cf8a36369b9
+                </a>
+                <ol class="w-full"></ol>
+              </li>
+              <li class="p-2 text-gray-900 -m-2 block font-medium">
+                <ul
+                  class="-m-3 duration-150 rounded-md p-3 font-medium text-gray-900 flex transition ease-in-out text-base hover:bg-gray-50 items-center"
+                ></ul>
+                <img
+                  class="focus:outline-none focus:ring-1 items-center relative hover:bg-gray-50 focus:border-indigo-500 focus:ring-indigo-500 -ml-px focus:z-10 text-gray-500 rounded-r-md font-medium border-gray-300 py-2 px-2 bg-white text-sm border inline-flex"
+                  alt="Profile picture of user e06d2963-b02b-4f87-9d7d-13b90fda07b0"
+                  src="https://example.org/pictures/5bfa7af9-72a4-43f9-907b-4d84a842d53e"
+                />
+              </li>
+              <li class="relative divide-y divide-gray-200 z-0">
+                <ol class="py-2 bg-white"></ol>
+              </li>
+            </ul>
+            <a href="#" target="_blank" rel="noreferrer" class="space-y-10">
+              This is link 79885996-131d-4bd5-8265-289d16099349
+            </a>
+            <a
+              href="#"
+              class="focus:ring-0 text-gray-800 bg-transparent h-12 border-0 pl-11 sm:text-sm placeholder-gray-400 pr-4 w-full"
+            >
+              This is link 8ad67b93-1d1c-4509-9182-7aa0921c8459
+            </a>
+          </li>
+        </ol>
+        <a
+          href="#"
+          target="_blank"
+          rel="noreferrer"
+          class="object-center w-full object-cover h-full"
+        >
+          This is link 9d00a467-bc7f-4856-80e2-b5dd6953b068
+        </a>
+      </li>
+      <li class="text-gray-900">
+        <ul class="space-y-1 pb-8">
+          <li class="p-2 flex group items-center -m-2">
+            <ul class="flow-root">
+              <li class="bg-gray-300 rounded-full w-4 block h-4">
+                <ul class="lg:mt-0 sm:mt-16 mt-12"></ul>
+                <img
+                  class="bg-indigo-600 lg:relative pb-16 lg:pb-0 lg:z-10"
+                  alt="Profile picture of user 91cdec56-e714-4b27-9a6f-43b5aab36518"
+                  src="https://example.org/pictures/d2cd1812-240a-4748-ab48-ff47968e5785"
+                />
+                <ol class="mt-6"></ol>
+              </li>
+              <li
+                class="text-gray-900 focus:z-10 flex px-3 py-2 flex-col h-14 hover:bg-gray-100 bg-white"
+              >
+                <ol
+                  class="py-3 text-grape-600 justify-center mt-8 rounded-md items-center w-full hover:bg-grape-50 text-base font-medium bg-white inline-flex border border-transparent sm:w-auto shadow-md px-5"
+                ></ol>
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user 42c080fc-8e5d-4a20-80cf-d50cae1978de"
+                  src="https://example.org/pictures/b3c37c47-2fe2-4a64-9d93-3ecab556e1bf"
+                />
+                <ol class="lg:px-8 sm:px-6 px-4"></ol>
+              </li>
+            </ul>
+            <ul class="font-medium text-sm hover:text-gray-100 text-white">
+              <li
+                class="focus:ring-2 bg-white text-gray-400 focus:ring-indigo-500 hover:text-gray-500 inline-flex focus:outline-none focus:ring-offset-2 rounded-md"
+              >
+                <a href="#" target="_blank" class="text-center sm:text-left sm:ml-4 mt-3 sm:mt-0">
+                  This is link 9872ff29-25b9-4985-b467-9887d0ea37d9
+                </a>
+              </li>
+              <li class="font-medium text-white text-sm">
+                <img
+                  class="space-y-1"
+                  alt="Profile picture of user 721f11af-ed19-406f-bb6b-210bbbd2869b"
+                  src="https://example.org/pictures/fe73398f-7d0e-4cf9-b253-1924dc52d9fb"
+                />
+              </li>
+              <li class="text-gray-900 text-sm font-medium">
+                <img
+                  class="flex-shrink-0 w-32 mx-auto h-32 rounded-full"
+                  alt="Profile picture of user 07536b69-72c7-4aeb-87b6-048f16dcfa07"
+                  src="https://example.org/pictures/77de2ddf-cfb0-4504-ab75-ed9c02762cca"
+                />
+                <ol class="mt-1"></ol>
+              </li>
+              <li class="mt-6">
+                <img
+                  class="rounded-full overflow-hidden bg-gray-200"
+                  alt="Profile picture of user bc827edb-f535-4493-80e5-ec4498cce18f"
+                  src="https://example.org/pictures/8bd546a4-fd38-4bc8-bb62-65ee2bdfb466"
+                />
+                <ol class="sr-only"></ol>
+                <img
+                  class="text-sm pl-4 pr-4 text-gray-500 py-4 sm:pr-6 whitespace-nowrap"
+                  alt="Profile picture of user 68703225-f44a-4ed0-a969-21a485758448"
+                  src="https://example.org/pictures/8da8bd2e-dc0c-4102-ae4a-35f00c7b145b"
+                />
+                <img
+                  class="mt-6"
+                  alt="Profile picture of user 6a3e9860-b52b-415f-aea0-e6a800eee553"
+                  src="https://example.org/pictures/bd3a848d-19f8-4ecc-a2f5-4a623a68b1cb"
+                />
+              </li>
+              <li class="w-6 h-6">
+                <ul class="flex-none sm:ml-6"></ul>
+                <ol class="sm:mt-0 sm:flex-shrink-0 mt-3 sm:ml-3 rounded-md"></ol>
+                <img
+                  class="hover:bg-gray-200 h-8 w-8 text-gray-900 justify-center items-center flex mx-auto rounded-full"
+                  alt="Profile picture of user ddb8d823-862d-476c-980d-b61b08d4c0bf"
+                  src="https://example.org/pictures/0fbc8599-6abc-4971-a3aa-fb5185266953"
+                />
+                <a href="#" rel="noreferrer" class="md:order-2 flex space-x-6">
+                  This is link eb91f211-d398-484f-bd65-aaae1ac57632
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li
+            class="focus:border-indigo-500 focus:ring-indigo-500 block focus:z-10 rounded-t-md bg-transparent border-gray-300 sm:text-sm rounded-none w-full relative"
+          >
+            <ol class="h-7 flex w-7 items-center mx-auto rounded-full justify-center">
+              <li class="max-w-8xl sm:px-6 mt-2 px-4 mx-auto">
+                <a href="#" target="_blank" class="py-6 flex items-center">
+                  This is link 22b5acb3-b769-41f3-af66-1e62546336bf
+                </a>
+                <ul class="md:mt-0 sm:flex sm:space-x-4 mt-6 sm:space-y-0 space-y-4"></ul>
+                <ol class="h-8 w-8 rounded-full"></ol>
+                <ol class="w-1/2 absolute right-0 inset-y-0 bg-indigo-700"></ol>
+              </li>
+              <li class="inset-0 z-40 fixed flex">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="ml-3 flex-1 min-w-0 text-gray-600"
+                >
+                  This is link 8d9aa54f-668a-4df0-970e-3b56ff59d97b
+                </a>
+                <a href="#" target="_blank" class="text-sm text-gray-500">
+                  This is link 4be40300-8802-4def-ab83-0f896301ed59
+                </a>
+                <ul class="text-gray-200"></ul>
+              </li>
+              <li class="text-xs block font-medium text-gray-900">
+                <a href="#" target="_blank" class="space-y-4 mt-4">
+                  This is link 717ddd01-0974-4e2e-b182-752144d669cc
+                </a>
+                <img
+                  class="font-medium text-lg text-gray-900"
+                  alt="Profile picture of user 793169af-8971-4634-bbba-9c3cb0236140"
+                  src="https://example.org/pictures/92c38417-cd84-41bb-aa57-8676eb0cf415"
+                />
+                <ul class="mt-2"></ul>
+                <img
+                  class="lg:col-span-2 xl:col-span-3 mt-6 lg:mt-0"
+                  alt="Profile picture of user 6bbcd72d-764d-4317-9ce6-f48659725a4e"
+                  src="https://example.org/pictures/6f7b8943-adb5-469b-bd2e-f53f935630d1"
+                />
+              </li>
+              <li class="justify-center h-full flex space-x-8">
+                <ol class="space-y-4"></ol>
+                <ul
+                  class="px-4 lg:max-w-7xl lg:gap-x-8 lg:pt-32 lg:grid-cols-2 lg:px-8 mx-auto sm:pb-32 lg:grid sm:px-6 pt-16 max-w-2xl pb-24"
+                ></ul>
+                <a href="#" target="_blank" class="mt-10">
+                  This is link 435d436c-11f5-4ff8-a098-3d9de35a92ea
+                </a>
+              </li>
+            </ol>
+          </li>
+          <li class="w-auto h-8">
+            <img
+              class="text-gray-500"
+              alt="Profile picture of user 2d259945-0258-4d5c-aa53-14d816ccdc91"
+              src="https://example.org/pictures/e434fb1f-725f-463f-8e57-e6ce52588420"
+            />
+            <img
+              class="sm:max-w-lg"
+              alt="Profile picture of user b5053438-25d3-429f-aff4-d3e4ae9875d1"
+              src="https://example.org/pictures/5e871d0f-f7f7-49cc-8b67-205c0794411f"
+            />
+            <ol class="flex mt-5 justify-center sm:mt-0">
+              <li class="font-medium text-sm text-gray-900">
+                <ol class="lg:max-w-none mx-auto max-w-2xl"></ol>
+                <img
+                  class="mt-10 text-center text-gray-500 grid-cols-7 text-xs grid leading-6"
+                  alt="Profile picture of user 992d2d62-25d9-4fdb-b6c1-e64ec471d6c1"
+                  src="https://example.org/pictures/0f0b7906-bdba-4f97-bbd9-e24323b844ad"
+                />
+                <a href="#" class="h-5 flex-shrink-0 mr-1.5 text-gray-500 w-5">
+                  This is link 6c0cbc40-b93c-4d68-9907-421d40443d50
+                </a>
+              </li>
+              <li class="md:mt-0 sm:space-y-0 sm:flex sm:space-x-4 space-y-4 mt-6">
+                <ol class="focus:z-10 text-gray-400 bg-gray-50 hover:bg-gray-100 py-1.5"></ol>
+                <img
+                  class="text-gray-400 mr-1.5 h-5 flex-shrink-0 w-5"
+                  alt="Profile picture of user 8c9f7860-dbd4-43e1-82b8-ed170d6996a6"
+                  src="https://example.org/pictures/ee75fb1a-cd3c-4db3-b95d-67c5884fcd85"
+                />
+              </li>
+              <li class="text-gray-600 text-xl mt-4">
+                <ol class="mt-4"></ol>
+                <ul class="mt-1 text-sm sm:col-span-2 flex text-gray-900 sm:mt-0"></ul>
+                <ul
+                  class="mx-auto lg:max-w-none lg:col-end-3 lg:mx-0 max-w-md lg:row-end-3 lg:row-start-2 lg:col-start-1"
+                ></ul>
+              </li>
+            </ol>
+          </li>
+          <li class="ml-2 -mr-1 h-5 w-5">
+            <a href="#" class="sm:px-6 px-4 md:px-8 max-w-7xl mx-auto">
+              This is link 3d22778a-6d6f-4e93-ae04-bdfd3f33a137
+            </a>
+            <ul class="ml-3">
+              <li class="lg:col-span-2 sm:col-span-3 col-span-6">
+                <img
+                  class="gap-6 px-5 sm:gap-8 relative sm:p-8 bg-white grid py-6"
+                  alt="Profile picture of user 782b42f5-01b4-46d8-9b5a-ba5d9ab813d4"
+                  src="https://example.org/pictures/7b17844a-bbc6-451b-82eb-01799144fb4c"
+                />
+                <a href="#" class="flex items-center w-7 justify-center mx-auto rounded-full h-7">
+                  This is link abc10f83-a7ce-45d8-b238-1fd4b0c3c79b
+                </a>
+              </li>
+              <li class="text-base font-medium text-gray-500">
+                <a href="#" class="sr-only"> This is link 6a907511-9073-47fc-8379-bd7dcdee0f51 </a>
+                <img
+                  class="left-0 leading-5 pr-2 text-right text-xs w-14 -mt-2.5 text-gray-400 sticky -ml-14 z-20"
+                  alt="Profile picture of user 6ea847e3-cb54-47b4-a4f9-2d5d1eda65d0"
+                  src="https://example.org/pictures/1bdbc77a-9e01-4759-ac24-3e1db12bc7c6"
+                />
+                <ul class="justify-center items-center h-7 flex mx-auto rounded-full w-7"></ul>
+                <ol class="mt-12 md:mt-0"></ol>
+              </li>
+              <li class="-ml-1.5 text-gray-400 w-5 mr-1 h-5">
+                <ul
+                  class="origin-top-right inset-x-0 z-10 transition p-2 absolute md:hidden top-0 transform"
+                ></ul>
+              </li>
+              <li class="py-4 text-gray-500 px-3 whitespace-nowrap text-sm">
+                <a href="#" target="_blank" rel="noreferrer" class="text-gray-300">
+                  This is link c7260886-a1d9-47c6-8a06-88d4b347545a
+                </a>
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user 64650f47-e980-4202-819e-856fbe3c8bed"
+                  src="https://example.org/pictures/5de512fb-32f1-43e5-9b92-24df96d46c6e"
+                />
+                <img
+                  class="sm:text-sm shadow-sm border-gray-300 focus:outline-none px-3 focus:ring-indigo-500 py-2 border rounded-md block mt-1 focus:border-indigo-500 w-full"
+                  alt="Profile picture of user 87bc2dc0-a2a8-4fc4-8973-94323e0a34e2"
+                  src="https://example.org/pictures/5e7d0871-5b88-46bc-884b-b3c4bdcf379d"
+                />
+              </li>
+            </ul>
+            <ol
+              class="text-xs pr-2 text-right -ml-14 left-0 w-14 -mt-2.5 sticky leading-5 text-gray-400 z-20"
+            >
+              <li class="items-center justify-between flex h-16">
+                <ul class="flex px-4 justify-between items-center"></ul>
+                <ol class="flex-shrink-0"></ol>
+                <ol class="items-center flex"></ol>
+                <img
+                  class="text-indigo-600 font-medium hover:text-indigo-500"
+                  alt="Profile picture of user 99ebec65-6375-4636-af9e-a0d82f1ee387"
+                  src="https://example.org/pictures/e10000b3-33ae-4228-b221-dd99d56caa7a"
+                />
+              </li>
+              <li class="-my-3 -mx-2 flow-root">
+                <ul class="ml-auto"></ul>
+                <ul class="flex h-5 items-center"></ul>
+              </li>
+              <li class="bg-white">
+                <a href="#" target="_blank" class="w-px bg-gray-200 h-6 lg:mx-6 mx-4">
+                  This is link 238927b3-e3f6-4342-9215-5481558a4f05
+                </a>
+              </li>
+            </ol>
+          </li>
+          <li class="ml-4 flow-root lg:ml-8">
+            <ol class="flex-1 bg-white w-full pt-5 relative flex max-w-xs flex-col pb-4">
+              <li class="sr-only">
+                <a
+                  href="#"
+                  class="h-10 flex items-center max-w-7xl justify-between sm:px-6 mx-auto px-4 lg:px-8"
+                >
+                  This is link 1484425e-3d83-4b9f-a279-e101db682563
+                </a>
+                <img
+                  class="h-full overflow-y-scroll shadow-xl bg-white flex flex-col"
+                  alt="Profile picture of user 1014a956-ba64-44f9-aa29-d478b0ed0743"
+                  src="https://example.org/pictures/5b3a57bf-5afd-4dc5-b91c-aecafe2ac4ba"
+                />
+              </li>
+              <li class="focus:z-10 bg-gray-50 text-gray-400 hover:bg-gray-100 py-1.5">
+                <ul class="items-center flex text-sm"></ul>
+                <ol
+                  class="min-h-full sm:items-center flex p-4 items-end justify-center text-center sm:p-0"
+                ></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="md:left-0 bg-indigo-600 relative md:absolute h-56 md:h-full md:w-1/2 sm:h-72"
+                >
+                  This is link 0f4ab142-1fc7-4761-a902-b1dca5a36bd2
+                </a>
+              </li>
+              <li
+                class="py-1.5 text-gray-900 bg-white focus:z-10 hover:bg-gray-100 relative rounded-tr-lg"
+              >
+                <a href="#" target="_blank" class="px-3 mt-5">
+                  This is link 5f19f968-e1cd-450b-986e-ea7ed85752bf
+                </a>
+              </li>
+            </ol>
+            <img
+              class="p-2 focus:ring-white focus:outline-none bg-transparent hover:text-white focus:ring-2 inline-flex rounded-md justify-center hover:bg-opacity-10 text-cyan-200 hover:bg-white items-center"
+              alt="Profile picture of user d905f5c1-b485-490a-8cd2-221debef508f"
+              src="https://example.org/pictures/e72f7fc8-c63e-4d9a-b03c-8db4bd995654"
+            />
+          </li>
+        </ul>
+        <ol class="space-y-2">
+          <li class="h-16 justify-between flex items-center">
+            <a href="#" class="inset-y-0 pointer-events-none absolute right-0 flex items-center">
+              This is link cd6791c0-582f-40d3-b0d2-1b0cc5f1e272
+            </a>
+            <img
+              class="py-4 text-right text-sm font-medium whitespace-nowrap relative pl-3 pr-4 sm:pr-6"
+              alt="Profile picture of user 58516306-fa7c-434c-8d71-1fde1eb01fee"
+              src="https://example.org/pictures/5084b03c-5dea-4f98-b394-64f48ee8c569"
+            />
+          </li>
+          <li class="relative">
+            <ul class="p-2">
+              <li class="bg-white hover:bg-gray-50 hover:text-gray-900 text-gray-600">
+                <ol
+                  class="py-2 flex-col text-gray-900 flex px-3 bg-white focus:z-10 hover:bg-gray-100 h-14"
+                ></ol>
+                <ul class="flex flex-col-reverse"></ul>
+                <img
+                  class="mr-2 -ml-1 h-5 w-5 group-hover:text-gray-500"
+                  alt="Profile picture of user 30a8649c-f8a5-40e8-b985-9107a742f8f4"
+                  src="https://example.org/pictures/afcdf93c-e005-4e4b-b890-106ee2fd9942"
+                />
+                <img
+                  class="sm:tracking-tight sm:text-3xl font-bold text-gray-900 text-2xl mt-2"
+                  alt="Profile picture of user e249cb5c-53f1-44e9-9e30-4fa259991b5b"
+                  src="https://example.org/pictures/1737489e-9063-451b-b4cd-65135f242bd1"
+                />
+              </li>
+              <li class="justify-center items-center text-gray-400 rounded-md inline-flex -m-2 p-2">
+                <a href="#" rel="noreferrer" class="focus:z-10 hover:bg-gray-100 bg-white py-1.5">
+                  This is link b14e9a75-fc0d-42ac-a0f5-b20d74fc0534
+                </a>
+              </li>
+              <li class="w-auto block h-8">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="text-gray-900 font-semibold text-lg"
+                >
+                  This is link b931afe6-482d-4242-ace0-65d9a7af5258
+                </a>
+              </li>
+            </ul>
+            <a href="#" rel="noreferrer" class="bg-white hover:bg-gray-100 py-1.5 focus:z-10">
+              This is link a96b569f-9f89-4bd2-b148-b03956ef7e83
+            </a>
+          </li>
+          <li class="max-w-sm text-center mx-auto relative">
+            <ol
+              class="opacity-50 sm:absolute bg-gradient-to-b to-black from-transparent sm:inset-0"
+            >
+              <li class="text-gray-700 block font-medium text-sm">
+                <img
+                  class="flex items-start relative"
+                  alt="Profile picture of user 0f5cc9ce-1551-4338-88a6-8fb37ebeb76a"
+                  src="https://example.org/pictures/c54e2df0-6142-4192-b8ed-3af91b160940"
+                />
+                <img
+                  class="text-gray-900 text-sm font-medium"
+                  alt="Profile picture of user 93b78cf3-7556-4eb6-b014-773092e885b4"
+                  src="https://example.org/pictures/455a276c-ee5d-4fe2-9386-949bdc187bcc"
+                />
+              </li>
+              <li class="h-10 rounded-md w-10">
+                <ul
+                  class="bg-gray-50 focus:ring-2 text-white focus:outline-none flex focus:ring-offset-gray-50 text-sm focus:ring-offset-2 focus:ring-purple-500 rounded-full"
+                ></ul>
+              </li>
+              <li
+                class="border py-2 focus:ring-indigo-500 mt-1 w-full block border-gray-300 focus:border-indigo-500 rounded-md shadow-sm px-3 focus:outline-none sm:text-sm"
+              >
+                <ol
+                  class="hover:text-gray-500 -m-1.5 items-center p-1.5 flex-none flex text-gray-400 justify-center"
+                ></ol>
+              </li>
+              <li class="-ml-2 bg-white p-2 rounded-md text-gray-400">
+                <ol class="sm:hidden"></ol>
+                <img
+                  class="flex flex-col relative space-y-3 p-3 w-20"
+                  alt="Profile picture of user b39a7b62-c4e7-46cb-bc30-07da61245703"
+                  src="https://example.org/pictures/51a35b4c-61eb-4394-b85f-b62537937519"
+                />
+                <ol class="text-gray-500 text-base mx-auto max-w-xl mt-4"></ol>
+                <ul
+                  class="group-hover:opacity-75 overflow-hidden rounded-lg sm:h-auto w-full sm:aspect-h-3 sm:aspect-w-2 h-96"
+                ></ul>
+              </li>
+            </ol>
+            <img
+              class="relative"
+              alt="Profile picture of user e914d56b-4c9a-4d6c-baf6-ad783461c3df"
+              src="https://example.org/pictures/0934ef60-d304-45de-8582-595f4249ebd0"
+            />
+          </li>
+          <li class="md:pr-0 pl-3 sm:pr-6 relative py-3.5 pr-4">
+            <ol class="focus:z-10 py-1.5 hover:bg-gray-100 bg-white">
+              <li
+                class="focus:ring-offset-gray-50 bg-indigo-600 font-medium focus:ring-offset-2 w-full focus:ring-2 focus:ring-indigo-500 text-base px-4 focus:outline-none rounded-md shadow-sm border border-transparent py-3 text-white hover:bg-indigo-700"
+              >
+                <a href="#" class="focus:z-10 bg-gray-50 hover:bg-gray-100 text-gray-400 py-1.5">
+                  This is link 5770f234-4211-4fef-b67f-14d140f14e87
+                </a>
+                <a href="#" target="_blank" class="sm:space-y-4 space-y-6 mt-6 sm:mt-4">
+                  This is link ceb29cc3-1ab2-4224-80c0-fa6f97aaa29b
+                </a>
+                <ul class="rounded-md shadow"></ul>
+                <ul class="relative items-center mt-1 flex"></ul>
+              </li>
+              <li class="group-hover:text-gray-500 text-gray-400 mr-3 w-5 h-5">
+                <a href="#" rel="noreferrer" class="h-8 w-auto">
+                  This is link cfd6d849-7db2-40f7-8d6e-8b3f2f90d755
+                </a>
+              </li>
+              <li class="right-0 inset-y-0 absolute items-center flex pointer-events-none px-2">
+                <ul class="text-gray-400 hover:text-gray-300"></ul>
+                <ol class="border-t space-y-6 border-gray-200 px-4 py-6"></ol>
+                <ul class="inset-0 bg-black bg-opacity-25 fixed"></ul>
+                <img
+                  class="pt-4 pb-3 border-gray-200 border-t"
+                  alt="Profile picture of user 95260ea9-2581-44b9-8eff-ed71c5cb8d29"
+                  src="https://example.org/pictures/33215bb4-c49f-43d4-8e77-326c2c476eed"
+                />
+              </li>
+              <li
+                class="-left-1.5 justify-center p-1.5 flex text-gray-400 hover:text-gray-500 items-center absolute -top-1"
+              >
+                <img
+                  class="md:gap-6 md:grid-cols-3 md:grid"
+                  alt="Profile picture of user 23bcf4c2-140c-4701-844b-30dc92416a2f"
+                  src="https://example.org/pictures/5ddd6db6-9c42-414f-9381-47c1bb1b3073"
+                />
+              </li>
+              <li
+                class="flex border-gray-100 sm:border-r border-b flex-col text-center sm:border-0 p-6"
+              >
+                <a href="#" target="_blank" class="relative">
+                  This is link 226ac524-7424-4ed3-ab07-b8abcd67d02e
+                </a>
+              </li>
+            </ol>
+          </li>
+        </ol>
+        <ul class="h-5 text-gray-500 w-5">
+          <li class="text-white bg-gray-900">
+            <a href="#" target="_blank" rel="noreferrer" class="flex justify-between items-center">
+              This is link 91544178-7643-4229-8242-190f30a1ee98
+            </a>
+            <ol class="overflow-y-auto flex-grow bg-cyan-700 pt-5 flex pb-4 flex-col">
+              <li class="group-hover:text-gray-500 text-gray-400 h-5 w-5">
+                <ol class="p-4"></ol>
+                <img
+                  class="bg-indigo-600 flex h-10 sm:h-12 rounded-md sm:w-12 flex-shrink-0 w-10 justify-center items-center text-white"
+                  alt="Profile picture of user 657e4ffd-f5bb-49d2-8ecf-fbad41aefe60"
+                  src="https://example.org/pictures/d99a36fd-1528-4606-a8d6-61ecbe214ebc"
+                />
+                <a href="#" target="_blank" class="px-2 py-4 flex-1">
+                  This is link cc62eb38-45c5-444c-8279-10e600dfb8f7
+                </a>
+                <a href="#" class="sr-only"> This is link 8673f841-25c6-4ccc-b7f5-7a471a977953 </a>
+              </li>
+              <li class="text-gray-300">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="lg:items-center lg:flex-1 hidden lg:space-x-6 lg:flex lg:justify-end"
+                >
+                  This is link 48d367ce-5c4a-4999-bf31-b7b03b6f48d7
+                </a>
+              </li>
+              <li class="bg-white py-1.5 focus:z-10 hover:bg-gray-100">
+                <ol class="mx-auto max-w-7xl sm:px-6 lg:px-8"></ol>
+                <img
+                  class="items-center flex h-5"
+                  alt="Profile picture of user 64dc51de-428b-4fcc-8053-d628b6045635"
+                  src="https://example.org/pictures/4a237eea-0473-40b2-8949-392115ce12a1"
+                />
+                <a href="#" target="_blank" rel="noreferrer" class="bg-white">
+                  This is link 934eea96-c0f8-4331-8bf3-0a46bd2c81b6
+                </a>
+                <ul class="text-gray-200"></ul>
+              </li>
+              <li class="text-gray-900 font-medium">
+                <ol class="sm:ml-16 mt-4 sm:flex-none sm:mt-0"></ol>
+                <ul class="min-h-[768px] bg-gray-50 h-0"></ul>
+                <ol class="bg-gray-300"></ol>
+              </li>
+            </ol>
+            <ul class="flex items-center justify-between h-16">
+              <li class="rounded-full w-10 h-10">
+                <a href="#" target="_blank" class="mt-3 text-cyan-100 text-sm">
+                  This is link 797f5bd3-5672-4b09-bfc4-4bd80512d4c7
+                </a>
+              </li>
+              <li class="transition-colors duration-200 ease-out h-px w-full">
+                <ul class="flex items-center h-16 justify-between"></ul>
+                <ol class="text-sm ml-3"></ol>
+                <img
+                  class="font-medium text-sm text-gray-700 block"
+                  alt="Profile picture of user 7ebc740d-20ad-49d8-abf1-9896b334168b"
+                  src="https://example.org/pictures/144757e0-d874-4db0-bf5c-93b562132e88"
+                />
+                <img
+                  class="py-1"
+                  alt="Profile picture of user aeb4427a-398d-41eb-a4f1-5378610ea025"
+                  src="https://example.org/pictures/e40e5204-8f10-45a0-8d58-a2522cd85b70"
+                />
+              </li>
+              <li class="isolate flex -space-x-1 overflow-hidden">
+                <ul class="block flex-shrink-0 w-full"></ul>
+                <img
+                  class="px-4 justify-between items-center flex"
+                  alt="Profile picture of user 46aa9d26-be33-41ba-b1ff-6ca34d7f66e6"
+                  src="https://example.org/pictures/a6d483a9-1fe9-4011-98f2-c0fc37a41e24"
+                />
+                <img
+                  class="ring-black ring-opacity-5 rounded-lg overflow-hidden ring-1 shadow-lg"
+                  alt="Profile picture of user b08152b4-40d1-402f-ad8b-d3e402bdc50d"
+                  src="https://example.org/pictures/9152020f-b132-4fa8-a1ff-12509e90c136"
+                />
+              </li>
+            </ul>
+          </li>
+          <li class="font-medium text-sm text-gray-700 block">
+            <img
+              class="text-gray-900 font-medium"
+              alt="Profile picture of user a8c17dca-35e7-48d4-add7-0aab4eb2fc12"
+              src="https://example.org/pictures/d7e4e432-cee6-4e6a-9f52-6049915a1a0a"
+            />
+            <a
+              href="#"
+              target="_blank"
+              rel="noreferrer"
+              class="px-3 font-medium py-0.5 ml-3 rounded-full inline-block text-xs"
+            >
+              This is link 6714b478-d67b-4bd7-aabe-e43c6713c5b1
+            </a>
+            <ol class="border-gray-200 border-b">
+              <li class="sr-only">
+                <img
+                  class="py-1.5 bg-white hover:bg-gray-100 text-gray-900 focus:z-10"
+                  alt="Profile picture of user f1de2d3a-debb-4b02-acfa-4190d41aa928"
+                  src="https://example.org/pictures/dca6e8c4-4752-4e3f-bea2-eca8c2f521a0"
+                />
+                <a href="#" rel="noreferrer" class="justify-between flex">
+                  This is link f19816ca-425a-4635-90de-ac3c386cdb9e
+                </a>
+              </li>
+              <li class="-mr-2">
+                <a href="#" target="_blank" class="space-y-6 mt-6">
+                  This is link 50760677-cfae-4e6f-83c0-fbb3945c1bd7
+                </a>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="hover:text-gray-500 hover:bg-gray-100 focus:ring-inset text-gray-400 inline-flex rounded-md focus:ring-purple-500 focus:outline-none focus:ring-2 justify-center bg-white p-2 items-center"
+                >
+                  This is link a89f79cf-d484-4102-b0e5-a6a6cce1df52
+                </a>
+              </li>
+            </ol>
+            <img
+              class="h-5 items-center flex"
+              alt="Profile picture of user 79370c9d-1224-48ff-864d-9365e30da7aa"
+              src="https://example.org/pictures/5dabb1a6-0f8b-4404-9491-232cad10704e"
+            />
+          </li>
+          <li class="font-bold text-gray-900 sm:text-4xl text-3xl tracking-tight">
+            <img
+              class="block text-base text-gray-900 font-medium ml-3"
+              alt="Profile picture of user 1f44f8d4-c717-439c-837d-d50cf1a939b5"
+              src="https://example.org/pictures/34352055-4040-4445-9a1a-46dd6ff81919"
+            />
+          </li>
+          <li class="flex items-center w-full sm:items-end space-y-4 flex-col">
+            <a
+              href="#"
+              rel="noreferrer"
+              class="text-gray-500 group-hover:text-gray-900 text-sm font-medium ml-3"
+            >
+              This is link 492ff2e2-9e40-4eaf-8e5d-89f68be20126
+            </a>
+            <ol class="sr-only">
+              <li
+                class="bg-gray-50 py-1.5 text-gray-400 focus:z-10 hover:bg-gray-100 relative rounded-bl-lg"
+              >
+                <ol class="lg:hidden"></ol>
+              </li>
+              <li class="sr-only">
+                <ol class="text-center"></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="pb-8 space-y-10 px-4 pt-10">
+                  This is link 7e1e7444-5277-4cc7-843d-42a67b9fd63f
+                </a>
+              </li>
+              <li
+                class="border-transparent px-1 items-center pt-1 text-sm hover:border-gray-300 inline-flex text-gray-500 font-medium hover:text-gray-700 border-b-2"
+              >
+                <ul class="text-base text-blue-gray-900 font-medium"></ul>
+                <img
+                  class="overflow-hidden absolute inset-0"
+                  alt="Profile picture of user a6e25171-2827-4fe6-b7e5-d0b3d46d4c64"
+                  src="https://example.org/pictures/3af8df0d-33f3-49b7-9cf6-bc893da87baf"
+                />
+                <ul class="object-center object-cover"></ul>
+              </li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+  <form class="hover:text-gray-800">
+    <input type="text" class="font-semibold text-xs text-gray-900" />
+    <input type="text" class="-m-2 font-medium block p-2 text-gray-900" />
+    <input type="password" class="h-full object-cover w-full" />
+    <p class="grid-cols-1 flex-auto grid grid-rows-1">
+      <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+        This is link 49239d36-d46d-424a-9600-701b1cdeb0cb
+      </a>
+      <a href="#" class="ml-3 truncate block">
+        This is link c2f9aed6-a254-4aaa-b175-790352f1d6f1
+      </a>
+    </p>
+    <input type="password" class="text-gray-500" />
+    <button type="button">This is action 4e5791ac-790e-4ec7-8aa5-dadd0c1cd264</button>
+  </form>
+  <section class="lg:block font-medium hover:text-gray-800 text-gray-700 hidden text-sm">
+    <main class="justify-center mt-4 flex items-center">
+      <form class="flex mt-6">
+        <p class="z-10 relative">
+          <span class="text-gray-500"> This is text c0187c62-0e4b-467b-ba94-11c40911d04d </span>
+        </p>
+        <select class="flex">
+          <option>This is item 718e4468-dfa7-43de-8199-bf9030a4d779</option>
+          <option>This is item 54d08a65-2821-4dc1-a860-703ca4604db4</option>
+          <option value="adb8ca7c-ba76-4c69-bd83-1030daf5dc5a">
+            This is item e7fc35a0-713c-4746-88ae-15bd240d679d
+          </option>
+          <option>This is item 10bc231f-b2a2-4f00-b837-fe4eff3cc2e2</option>
+          <option value="b81a0756-2022-4f9d-87ff-05e26d731c58">
+            This is item 6ee1958a-af39-46b8-b4f0-184e19ca6ab5
+          </option>
+        </select>
+        <p class="right-0 fixed hidden h-full bg-indigo-900 w-1/2 lg:block top-0">
+          <span class="font-medium text-gray-900 text-lg">
+            This is text 6b0b3226-900e-480d-82d1-611a536332e8
+          </span>
+          <span class="md:hidden z-40 relative">
+            This is text 7bb4dc81-18ea-4cc6-95e5-24dc2ce45025
+          </span>
+        </p>
+        <p class="ml-4 flex">
+          <a
+            href="#"
+            target="_blank"
+            class="w-8 items-center h-8 mx-auto justify-center text-gray-400 hover:bg-gray-200 rounded-full flex"
+          >
+            This is link 1c1dbb04-a07e-4430-9ea1-f4342d1b292b
+          </a>
+          <span class="items-center flex justify-between">
+            This is text b4638612-5f84-4926-a90a-362f24757a40
+          </span>
+          <span class="h-12"> This is text 1c67be87-6139-44e5-b955-58e0338dc17b </span>
+        </p>
+        <input type="text" class="lg:ml-6 lg:flex-grow-0 lg:flex-shrink-0 flex-grow mt-6 lg:mt-0" />
+        <input type="email" class="text-gray-500 hover:text-gray-600" />
+      </form>
+      <ul class="text-gray-400 lg:hidden p-2 hover:text-gray-500">
+        <li class="h-5 ml-2 group-hover:text-gray-500 w-5">
+          <ol class="relative">
+            <li class="flex ml-4 justify-between flex-col relative sm:ml-6 flex-1">
+              <img
+                class="font-medium text-base text-gray-900"
+                alt="Profile picture of user d55af300-9826-4019-8273-a6b86932dbe1"
+                src="https://example.org/pictures/af931ce4-edf7-464f-ac7c-e7a428002720"
+              />
+              <ol class="mt-6">
+                <li class="md:grid-cols-2 md:gap-y-12 md:gap-x-8 md:grid md:space-y-0 space-y-10">
+                  This is item 9384b0d9-e683-40e8-add1-2add1176eace
+                </li>
+                <li class="z-40 md:hidden relative">
+                  This is item 17090f1a-25d1-48e8-b674-f28eeab7014c
+                </li>
+                <li class="text-sm text-gray-600">
+                  This is item 2f3aa993-35e5-4cc3-a579-13f7ee33e96f
+                </li>
+                <li class="w-12 mx-auto h-12 text-gray-400">
+                  This is item cee567f3-21cc-4be8-960b-b94b10447a97
+                </li>
+                <li class="border-gray-200 bg-white border-t">
+                  This is item 86d39040-62dc-4c32-94ea-e9e129a2c442
+                </li>
+              </ol>
+            </li>
+            <li class="hover:bg-gray-100 bg-white py-1.5 focus:z-10">
+              <img
+                class="inset-0 absolute"
+                alt="Profile picture of user d346404a-c6a5-44ba-8943-d34800480afd"
+                src="https://example.org/pictures/8e9fbe69-87b2-4c67-ab8f-f3430381a02f"
+              />
+              <ol class="hover:text-gray-600 text-gray-500">
+                <li
+                  class="-mt-2.5 -ml-14 left-0 text-gray-400 text-xs pr-2 sticky text-right w-14 leading-5"
+                >
+                  This is item 4f1631d4-5fb3-441c-8056-65d9033a0bcd
+                </li>
+                <li class="flex flex-col sm:mt-0 mt-10">
+                  This is item a2c5c303-dcc1-40a7-aed5-f862b4caa8f6
+                </li>
+                <li class="text-sm text-gray-600 font-medium">
+                  This is item 4669b37e-5755-4a34-ad2e-e32455f4ee32
+                </li>
+                <li class="flex-auto sm:mt-0 mt-2">
+                  This is item 1d348981-dada-4d7b-b0b2-82e3480367d0
+                </li>
+              </ol>
+              <img
+                class="group text-gray-500 items-start space-x-2 hover:text-gray-900 inline-flex text-sm"
+                alt="Profile picture of user 6374a5e4-8786-4276-be74-6acfbba11e8c"
+                src="https://example.org/pictures/c896835b-5b59-4c63-9545-de3b5247382d"
+              />
+            </li>
+            <li
+              class="justify-center bg-white relative border-2 items-center flex h-8 border-gray-300 hover:border-gray-400 rounded-full group w-8"
+            >
+              <ol
+                class="whitespace-nowrap items-center font-medium rounded-full sm:px-3 py-2 inline-flex hover:bg-gray-100 relative bg-gray-50 px-2 text-gray-500 text-sm"
+              >
+                <li class="sr-only">This is item 3ee81e71-abbd-4539-b010-cffb6d25af8e</li>
+                <li class="bg-white">This is item 80051657-e197-4d55-8df1-75b0b080f907</li>
+                <li class="items-center justify-center p-8 bg-white flex">
+                  This is item fe710e00-08f7-4af0-a084-e80c8e4fb03f
+                </li>
+              </ol>
+              <ol class="ml-auto">
+                <li
+                  class="items-center w-8 bg-white focus:ring-indigo-500 hover:bg-gray-100 focus:outline-none text-gray-400 justify-center h-8 hover:text-gray-500 focus:ring-2 flex rounded-full -mr-2"
+                >
+                  This is item 620553cf-fba2-435f-aa16-402dec9826e8
+                </li>
+                <li class="sm:col-span-1">This is item 8df0763c-586a-4d88-8840-5a49ed8b43cb</li>
+                <li class="z-10 fixed overflow-y-auto md:p-20 sm:p-6 inset-0 p-4">
+                  This is item 49a613a7-1783-4109-83cc-20a18b2cd827
+                </li>
+                <li class="text-gray-500 text-sm lg:table-cell hidden px-3 py-3.5">
+                  This is item 9a8e474e-ae51-4141-8625-a98c53863c06
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-base text-blue-gray-900 font-medium"
+              >
+                This is link bc485730-a8df-4228-8c34-5bb6d9575f5d
+              </a>
+            </li>
+          </ol>
+          <a href="#" target="_blank" class="items-center right-0 flex absolute pr-4 inset-y-0">
+            This is link 89036df4-3eee-4562-afde-2e138868eece
+          </a>
+          <ul class="text-sm text-gray-700 font-medium ml-3 block">
+            <li class="text-base text-warm-gray-400">
+              <ol
+                class="top-6 right-6 group-hover:text-gray-400 text-gray-300 absolute pointer-events-none"
+              >
+                <li class="hover:text-gray-600 text-gray-500">
+                  This is item a979d7c5-09e6-47ad-9949-1423eef3cf00
+                </li>
+                <li class="table-fixed w-full h-px">
+                  This is item a59c33ca-5bdd-4bc6-8e18-168012682b8a
+                </li>
+              </ol>
+            </li>
+            <li class="h-5 text-gray-400 w-5">
+              <ul class="italic text-gray-500">
+                <li class="h-5 w-5">This is item d0de24f2-5e0a-4f03-afe7-77c6d67bc790</li>
+                <li class="text-gray-900 font-medium text-sm mr-2">
+                  This is item d4685d8e-214b-4d6c-b0bd-9d98340e9e63
+                </li>
+              </ul>
+              <ul
+                class="appearance-none sm:max-w-xs bg-white w-full border focus:border-indigo-500 rounded-md text-gray-900 focus:ring-indigo-500 py-2 focus:placeholder-gray-400 focus:outline-none text-base min-w-0 border-gray-300 px-4 placeholder-gray-500"
+              >
+                <li class="text-sm mt-5">This is item 8f7ebb73-f3e9-469d-ba12-cd777c633b2b</li>
+                <li class="sm:inline hidden">This is item c6ee8849-3090-48cd-a72e-ec9e9ab5a392</li>
+                <li class="bg-gray-50">This is item f21f13d0-9feb-4115-9082-59ae620eaf88</li>
+                <li
+                  class="pl-2 rounded-md group-hover:text-gray-100 flex bg-none text-sm border-transparent pr-5 text-white focus:ring-0 py-0.5 focus:outline-none items-center focus:border-transparent bg-gray-900 font-medium"
+                >
+                  This is item 32c6533f-00d3-4083-b65a-8e65d2f16896
+                </li>
+              </ul>
+              <ul class="h-5 w-5">
+                <li class="lg:grid-cols-12 lg:grid lg:gap-x-16">
+                  This is item c2c324d9-c3c9-499d-963c-9c983ee854c3
+                </li>
+                <li class="items-center flex">This is item 3708dfaa-0802-4666-aedb-7b8b73d60e19</li>
+                <li class="flex-col min-h-full flex relative">
+                  This is item 1ee2718c-e82b-441f-b615-67b0c02d948d
+                </li>
+                <li
+                  class="rounded-full items-center w-8 text-gray-900 mx-auto justify-center h-8 flex hover:bg-gray-200"
+                >
+                  This is item 82deec51-36c3-4176-94ca-bae005d40865
+                </li>
+              </ul>
+              <img
+                class="text-gray-500"
+                alt="Profile picture of user 4bda500c-2aa8-46a9-a05f-f97fa363ac19"
+                src="https://example.org/pictures/c63b254d-49fd-43ec-a341-28f3bb0a7e4a"
+              />
+            </li>
+            <li class="-m-1.5 p-1.5">
+              <a href="#" rel="noreferrer" class="bg-opacity-75 bg-gray-600 fixed inset-0">
+                This is link ae90fca8-818a-4bb8-b55f-f644ca33f546
+              </a>
+            </li>
+          </ul>
+          <a href="#" class="hover:text-indigo-500 text-indigo-600 font-medium">
+            This is link f5a49c9f-328f-44fa-a772-935a3d2025dd
+          </a>
+        </li>
+        <li class="p-2 text-gray-400 -m-2 hover:text-gray-600 flex rounded-full items-center">
+          <img
+            class="font-medium text-gray-900"
+            alt="Profile picture of user 1f9353d5-0dea-4c2a-a115-1e8ee92d42fc"
+            src="https://example.org/pictures/09bda881-8da7-4732-87bb-cf7e3b4f065e"
+          />
+          <img
+            class="border-gray-700 pt-4 border-t pb-3"
+            alt="Profile picture of user 9fc44add-842c-4b38-ae46-64fedb8fc7f0"
+            src="https://example.org/pictures/70744f2d-aee4-457c-8342-493f54a1f859"
+          />
+          <img
+            class="hover:text-gray-800"
+            alt="Profile picture of user b46bcadc-6ed6-493f-9dbd-34c0f0f89e1b"
+            src="https://example.org/pictures/c60b17ad-4c2b-4854-ba9f-17fa492b14ab"
+          />
+        </li>
+        <li
+          class="bg-indigo-600 focus:outline-none disabled:cursor-not-allowed mt-6 hover:bg-indigo-700 border px-4 focus:ring-indigo-500 text-sm border-transparent text-white focus:ring-offset-2 disabled:bg-gray-100 w-full shadow-sm disabled:text-gray-500 rounded-md font-medium py-2 focus:ring-2"
+        >
+          <img
+            class="absolute to-gray-50 inset-x-0 h-1/2 from-white bg-gradient-to-b"
+            alt="Profile picture of user 29e0f3b9-6f0f-4ca0-83c9-eb420662ec93"
+            src="https://example.org/pictures/d6d4c0de-b489-4efd-b311-2a0ec9392efd"
+          />
+          <a
+            href="#"
+            class="sm:px-6 text-sm items-center flex h-10 font-medium bg-indigo-600 px-4 text-white lg:px-8 justify-center"
+          >
+            This is link 1d90cad9-60d4-4989-92bc-07962f0ce4a2
+          </a>
+          <ul class="text-sm font-medium text-gray-900">
+            <li
+              class="w-full block border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm mt-1 shadow-sm rounded-md"
+            >
+              <ol class="space-y-1">
+                <li class="block text-white">This is item 747c75ea-f981-49ba-a8ab-3516f690eb78</li>
+                <li class="bg-gray-50">This is item 78c754d2-adf0-41be-adfa-d4881cd0df80</li>
+                <li
+                  class="items-center justify-between flex border-b py-4 border-gray-200 flex-none px-6"
+                >
+                  This is item fd1ecc78-fbb0-40ca-92f4-bc91bc440a2a
+                </li>
+                <li class="md:flex-shrink-0">This is item 436e65c6-6f42-4d17-ba7b-2799b48cf451</li>
+              </ol>
+              <img
+                class="sr-only"
+                alt="Profile picture of user 8be43222-86ee-4250-a527-a1b023a5f10c"
+                src="https://example.org/pictures/481a569c-d05c-4cd6-9b11-810a1ea55ee0"
+              />
+            </li>
+            <li class="text-lg cursor-auto font-medium w-full text-gray-500 text-left py-6">
+              <img
+                class="sr-only"
+                alt="Profile picture of user 2a9100cb-f271-40f3-8957-be3bc7e2faa7"
+                src="https://example.org/pictures/a8b43d11-df1a-4f52-8d97-dd7025c8263b"
+              />
+            </li>
+            <li
+              class="border-b relative lg:border-none lg:bg-transparent z-10 border-opacity-25 border-teal-500"
+            >
+              <a href="#" rel="noreferrer" class="mx-auto max-w-2xl">
+                This is link c594a628-3bd8-410f-b7a2-0a4871a92bf2
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="sr-only">
+          <img
+            class="text-sm font-medium text-gray-900"
+            alt="Profile picture of user a91ef50f-44b7-4001-84cd-c8d5fb367b16"
+            src="https://example.org/pictures/f4356378-cca1-45a3-8a9d-4b9f894628c4"
+          />
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            class="text-sm inset-x-0 z-20 text-gray-500 absolute top-full"
+          >
+            This is link 61c1f031-630f-4a0f-8248-c8d2281bfaa3
+          </a>
+          <ol class="py-2 px-3 bg-white relative">
+            <li class="text-lg leading-6 font-medium text-gray-900">
+              <img
+                class="flex"
+                alt="Profile picture of user 821bd8f5-eef7-45e7-b364-5a2e638002ba"
+                src="https://example.org/pictures/dc2b3735-e1d3-4c61-a3d0-c9ef7e7b7985"
+              />
+              <ol class="text-sm text-gray-900">
+                <li class="text-sm text-gray-500 truncate">
+                  This is item 6783bbf6-cfc4-4d75-b289-1d628f8a75e6
+                </li>
+                <li
+                  class="mt-2 origin-top-right ring-1 w-48 ring-black right-0 absolute focus:outline-none rounded-md py-1 z-10 bg-white shadow-lg ring-opacity-5"
+                >
+                  This is item 29666aad-1108-4422-bcb0-a712d81a65b3
+                </li>
+              </ol>
+              <img
+                class="w-6 h-6"
+                alt="Profile picture of user ba5ec941-eda0-440e-9783-6cb8a65510ad"
+                src="https://example.org/pictures/a449e3fe-bde0-44a2-8884-7cd7b16c41ef"
+              />
+            </li>
+            <li class="font-medium text-sm">
+              <img
+                class="flex-shrink-0 px-4 items-center flex"
+                alt="Profile picture of user f0fd04a7-5c9c-4569-9eea-46fbb58bc177"
+                src="https://example.org/pictures/b1e2fd64-ac23-467b-98a4-b5fe34eabae9"
+              />
+            </li>
+            <li class="flex">
+              <ul
+                class="max-w-2xl mx-auto items-center flex space-x-2 lg:px-8 px-4 sm:px-6 lg:max-w-7xl"
+              >
+                <li class="-space-x-2 overflow-hidden isolate flex">
+                  This is item 8597fd16-3806-4558-8dcf-6cb481fb3cc8
+                </li>
+                <li class="w-full focus-within:text-gray-600 text-gray-400 relative">
+                  This is item 22aaef57-2e20-49d7-a444-045bc02839fe
+                </li>
+                <li class="border-2 absolute pointer-events-none rounded-lg -inset-px">
+                  This is item 295b4073-9e0a-4115-a386-88dd5bdd91b9
+                </li>
+                <li class="sm:px-8 py-5 sm:py-8 bg-gray-50 px-5">
+                  This is item f82ba2b0-9fe8-4142-a049-53326d03a96b
+                </li>
+              </ul>
+              <img
+                class="lg:col-span-1 lg:col-start-3"
+                alt="Profile picture of user 95e1541a-c01c-46ed-8a27-028110a90366"
+                src="https://example.org/pictures/f889c3a2-c93a-4aee-9cda-04b49c517d93"
+              />
+            </li>
+          </ol>
+        </li>
+      </ul>
+      <ol class="w-6 h-6">
+        <li class="py-10 border-t border-gray-100 text-center">
+          <ul class="sm:w-0 sm:flex-1">
+            <li class="text-sm mt-1 text-gray-500">
+              <ol class="flex">
+                <li
+                  class="sm:text-sm focus:border-indigo-500 relative block focus:ring-indigo-500 focus:z-10 bg-transparent rounded-br-md border-gray-300 w-full rounded-none"
+                >
+                  This is item 306d52bb-5d4a-49bf-9872-a6538d3aad46
+                </li>
+                <li class="grid grid-cols-2 gap-x-8 gap-y-4">
+                  This is item 23f37535-1850-4f6e-a4d7-f5a58da665da
+                </li>
+                <li class="flex-1 text-white text-center text-sm font-medium lg:flex-none">
+                  This is item bd3ae893-6aac-4354-91fd-e5510272f53b
+                </li>
+                <li class="bg-opacity-75 inset-0 fixed transition-opacity bg-gray-500">
+                  This is item 4e22bbb4-9bc2-402d-bb3c-1b885183ee61
+                </li>
+              </ol>
+              <ul class="text-gray-900 font-medium hover:text-gray-700">
+                <li
+                  class="mx-auto items-center h-7 justify-center bg-gray-900 text-white rounded-full w-7 flex font-semibold"
+                >
+                  This is item 37d4ec50-797a-4e55-95d1-cb6c3f979fcc
+                </li>
+                <li class="text-gray-900 font-medium">
+                  This is item 420d3dd7-7365-4178-bda8-bc2ce4a386db
+                </li>
+                <li class="h-6 w-6">This is item 9cbc2729-0d04-4f63-ac56-ab341ed7eadd</li>
+              </ul>
+              <ol class="flex text-gray-500 flex-col mt-2 xl:flex-row">
+                <li class="flex-shrink-0 ml-4 relative">
+                  This is item d5e754b7-1833-4863-9740-f73e5f01434b
+                </li>
+                <li class="text-lg font-medium leading-6 text-gray-900">
+                  This is item d2d5fd2a-87c5-4241-9b85-140d84985289
+                </li>
+                <li class="w-auto h-8">This is item 3d766aee-fac2-4fb3-a04e-84d4f26f9d07</li>
+              </ol>
+            </li>
+            <li
+              class="py-2 shadow-sm border sm:text-sm border-gray-300 focus:border-indigo-500 bg-white focus:ring-indigo-500 focus:outline-none pl-3 focus:ring-1 w-full rounded-md pr-12"
+            >
+              <ol class="w-5 h-5">
+                <li
+                  class="flex rounded-md text-gray-900 font-medium hover:bg-gray-100 text-base -m-3 p-3 items-center"
+                >
+                  This is item 21e61f7c-9bbc-4ab1-91ee-cbec4a5c4eaf
+                </li>
+                <li class="space-x-3 flex justify-between items-start">
+                  This is item 54502c81-eaad-4d0a-9989-134aad82427c
+                </li>
+                <li class="text-sm">This is item 24b9bc2e-e806-48b3-a5c4-c22b9306e410</li>
+                <li class="md:grid md:gap-8 md:grid-cols-2">
+                  This is item 2317ef13-b180-4a47-815b-1e7f8e95677e
+                </li>
+              </ol>
+            </li>
+            <li
+              class="-mt-2.5 text-gray-400 text-right pr-2 w-14 left-0 -ml-14 sticky leading-5 text-xs"
+            >
+              <ol class="scroll-py-3 max-h-96 p-3 overflow-y-auto">
+                <li class="truncate">This is item a84a287d-f392-49a9-87b4-4dd8bd229d0f</li>
+                <li class="text-base text-gray-500">
+                  This is item 4adf8cbb-c4be-419d-bad7-9f8a6a57c91a
+                </li>
+                <li class="sm:mt-4 mt-3">This is item bde9d1d0-4070-46c6-9078-286ccbc9cc33</li>
+              </ol>
+            </li>
+            <li class="text-base text-white font-medium">
+              <ol
+                class="bg-white hover:text-gray-500 text-gray-400 flex justify-between py-3 items-center px-2 w-full"
+              >
+                <li class="block text-base ml-3 font-medium text-gray-900">
+                  This is item 4f5b4c84-df03-42d1-992d-e1e73f50e868
+                </li>
+                <li class="cursor-default px-3 select-none py-2 relative">
+                  This is item 2589dd59-bd33-496d-8eb0-06f1884ab5d8
+                </li>
+                <li class="text-white text-sm lg:flex-none font-medium text-center flex-1">
+                  This is item 7dac40e2-2f08-41b8-b0cb-cf82c2c736bf
+                </li>
+                <li class="pointer-events-none inset-y-0 flex absolute right-0 items-center">
+                  This is item f4dc0e1c-ec82-4fbf-b3a4-275083787c90
+                </li>
+              </ol>
+              <ol class="justify-center flex w-7 rounded-full items-center h-7 mx-auto">
+                <li class="w-5 h-5">This is item b1043fe1-9af2-4fc5-b33e-524b67137e1c</li>
+                <li class="p-2 bg-white text-gray-400 rounded-md lg:hidden">
+                  This is item a4a6e0d6-7eba-4172-a884-24bd4abbc97b
+                </li>
+                <li class="relative flex">This is item 984b0a03-8e84-4309-82b4-c512e70a2bae</li>
+              </ol>
+              <img
+                class="rounded-md mt-8 focus:ring-2 justify-center hover:bg-indigo-700 items-center text-white py-3 focus:outline-none bg-indigo-600 border-transparent w-full text-base border focus:ring-indigo-500 focus:ring-offset-2 flex px-8 font-medium"
+                alt="Profile picture of user 1c7a94db-cce7-41ac-aa8b-3afb57a0e8f1"
+                src="https://example.org/pictures/add33bc8-38bc-4cb8-a73e-a79ad94e43f8"
+              />
+            </li>
+          </ul>
+          <a
+            href="#"
+            class="relative rounded-md group overflow-hidden aspect-h-1 bg-gray-100 aspect-w-1"
+          >
+            This is link dfbfbc59-577b-4627-a060-26448ff0ede3
+          </a>
+          <ol class="-m-2 group flex items-center p-2">
+            <li
+              class="border-transparent h-full pl-8 pr-3 focus:outline-none focus:placeholder-gray-400 focus:border-transparent py-2 text-sm placeholder-gray-500 sm:block focus:ring-0 hidden text-gray-900 w-full"
+            >
+              <a href="#" target="_blank" rel="noreferrer" class="text-gray-900 font-semibold">
+                This is link a455b6cc-3198-45b2-9f51-425abf6781c9
+              </a>
+            </li>
+            <li class="text-gray-500 text-sm hover:text-gray-600 font-medium">
+              <ul class="flex-1 min-w-0">
+                <li class="rounded-full w-10 h-10">
+                  This is item 64ed7346-9434-4509-b830-75968e6bd3dc
+                </li>
+                <li class="relative bg-white">This is item 61e59842-d7d5-4d82-931b-c5302b9a362c</li>
+                <li class="bg-white py-12">This is item 3364ba5d-7f4b-482d-b503-e96aa141da83</li>
+                <li class="sr-only">This is item 4fb1b9dd-4355-459c-bfdd-3c72d44c9a92</li>
+              </ul>
+              <ul class="h-6 w-6">
+                <li class="hover:text-gray-900 text-base text-gray-500 font-medium">
+                  This is item 70a40e4f-504f-4c2f-b89f-ab97daa67962
+                </li>
+                <li class="focus:z-10 bg-white py-1.5 hover:bg-gray-100">
+                  This is item 2b106327-52d2-471f-bde1-903682fea1af
+                </li>
+              </ul>
+            </li>
+            <li class="flex">
+              <a href="#" rel="noreferrer" class="lg:hidden">
+                This is link a15e95f4-fb77-4ffe-80f7-18c8b26e3cd9
+              </a>
+            </li>
+          </ol>
+        </li>
+        <li class="px-4 text-gray-700 block text-sm py-2">
+          <ul class="flex justify-between">
+            <li class="rounded-lg overflow-hidden bg-gray-50">
+              <a href="#" target="_blank" class="rounded-full hover:opacity-75">
+                This is link 9c699d31-f3b7-4c29-88bc-afaaa2f5452f
+              </a>
+              <a href="#" target="_blank" rel="noreferrer" class="block">
+                This is link 3be128a9-48da-4e56-b4d8-742bdee91d2e
+              </a>
+            </li>
+            <li class="w-5 ease-in-out duration-150 transition ml-2 group-hover:text-gray-500 h-5">
+              <ul class="bg-gray-300">
+                <li class="lg:max-w-7xl px-6 lg:px-8 max-w-xl mx-auto">
+                  This is item eb857c33-ad4e-4385-81bb-e6e9d3bac7ac
+                </li>
+                <li
+                  class="lg:gap-x-12 px-6 max-w-7xl lg:grid lg:px-8 py-24 sm:py-32 mx-auto lg:py-40 lg:grid-cols-3"
+                >
+                  This is item 3db90c53-101a-4489-8013-de4bfecef9d1
+                </li>
+              </ul>
+              <ol class="space-y-6 mt-6">
+                <li class="relative bg-gray-800 w-full flex-1">
+                  This is item bfec53ff-c358-4974-8666-3b237150907a
+                </li>
+                <li class="font-medium text-sm text-gray-500">
+                  This is item a6a32b01-c651-4818-bb75-513b2cde5afe
+                </li>
+                <li class="text-sm px-4 py-2 block">
+                  This is item b5c04e5b-9a7e-46dc-bdb0-e0ef5f55cc49
+                </li>
+                <li class="text-gray-900 font-medium mt-6 text-sm">
+                  This is item 42b65be5-b9b6-4311-b4f4-5ee0959f1a9a
+                </li>
+              </ol>
+              <ol
+                class="rounded-md focus:ring-1 focus:ring-indigo-500 py-1.5 max-w-full font-medium sm:text-sm focus:outline-none text-left border-gray-300 text-base border shadow-sm block leading-5 focus:border-indigo-500 text-gray-700"
+              >
+                <li
+                  class="py-0.5 text-sm items-center bg-purple-100 inline-flex px-2.5 rounded-md text-purple-800 font-medium"
+                >
+                  This is item 5bea16ad-fc20-4ee4-bc9c-9edc13ae31a0
+                </li>
+                <li class="sm:pl-1 ml-4 leading-6 font-semibold text-indigo-300 relative sm:ml-24">
+                  This is item be0a2df8-8792-45bb-bcf9-24ba3f39f4b3
+                </li>
+                <li class="space-y-6 mt-8">This is item d485ae8a-617d-4216-84ec-bbd329caba33</li>
+              </ol>
+            </li>
+          </ul>
+          <a href="#" target="_blank" rel="noreferrer" class="mt-1">
+            This is link 58ae89cd-2982-4cee-b5aa-b395e2858ed0
+          </a>
+          <img
+            class="text-base text-gray-500"
+            alt="Profile picture of user 1cf1740a-b90d-4595-86c3-b72203c716a8"
+            src="https://example.org/pictures/0e91d1bc-811a-43a2-975a-35d8700eea54"
+          />
+          <ul class="ml-3 flex-auto truncate">
+            <li class="flex group py-2 items-center text-sm px-4">
+              <img
+                class="inset-0 absolute h-1/2 bg-gray-50"
+                alt="Profile picture of user 9b48e8d6-69c2-4ece-bf14-2720049edfa4"
+                src="https://example.org/pictures/04994a6f-88b9-4545-a623-9d7f29b26861"
+              />
+              <ul class="border-gray-200 border-b">
+                <li class="hidden lg:flex">This is item 6cf51ee2-00e7-42b5-bfd7-931c1f4e91f7</li>
+                <li class="font-medium truncate text-base text-gray-800">
+                  This is item 74c23905-fd0b-4ede-8670-eeebef764401
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="rounded-lg pb-3 lg:pt-12 lg:px-8 pt-6 px-6">
+                This is link 13057dc1-4f63-4bfe-83bf-4ba611566795
+              </a>
+              <ul class="sr-only">
+                <li class="px-6 sm:px-10 sm:pb-8 py-8 sm:pt-10 rounded-t-lg">
+                  This is item 7e736268-431b-484d-8c03-f6e22853adc4
+                </li>
+                <li
+                  class="h-8 flex bg-gray-900 text-white text-base rounded-full items-center w-8 justify-center font-semibold mt-3"
+                >
+                  This is item 2b0581ed-a4b0-4cba-958f-12c243dbf845
+                </li>
+              </ul>
+            </li>
+            <li class="min-w-full divide-y divide-gray-300">
+              <ul class="mt-9">
+                <li class="flex-1">This is item 00d38315-70f0-481b-acb0-5749b802a2e3</li>
+                <li class="sr-only">This is item faebed58-99b1-48f3-af4a-1467d6aa65de</li>
+                <li
+                  class="rounded-full flex text-gray-900 hover:bg-gray-200 h-8 mx-auto items-center w-8 justify-center"
+                >
+                  This is item 89586147-0d22-46db-89a3-ab2296b29fb4
+                </li>
+                <li class="hover:text-gray-100 text-white text-sm font-medium">
+                  This is item 498e73f8-4e3c-4252-827f-505cb4c72a1b
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-900 font-medium">
+              <ul class="ml-3 truncate flex-auto">
+                <li class="text-gray-400 hover:bg-gray-100 py-1.5 bg-gray-50 focus:z-10">
+                  This is item 4a18dfc0-cdcd-4944-8da9-9739024a26b3
+                </li>
+                <li
+                  class="absolute overflow-hidden focus:outline-none ring-opacity-5 bg-white w-36 rounded-md mt-3 ring-1 right-0 z-10 shadow-lg origin-top-right ring-black"
+                >
+                  This is item f7df0ad3-7162-4d3e-acec-04a498b022d8
+                </li>
+                <li class="bg-white sm:grid-cols-3 sm:px-6 px-4 sm:grid py-5 sm:gap-4">
+                  This is item ad69a006-a922-4489-baf0-c8bed1169e08
+                </li>
+                <li class="md:items-center md:flex md:justify-between">
+                  This is item b8f37c33-5727-4e1e-940c-87e165d616ea
+                </li>
+                <li class="font-medium text-gray-900">
+                  This is item 45cc1464-328d-476f-a478-7e37b5e11360
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="h-5 text-white w-5">
+                This is link a1028bab-9943-4bcb-bcb6-82ecb6c2fbec
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li
+          class="text-right pr-2 -ml-14 leading-5 w-14 z-20 text-xs -mt-2.5 sticky text-gray-400 left-0"
+        >
+          <a href="#" target="_blank" rel="noreferrer" class="text-gray-500 text-sm font-medium">
+            This is link 04859fa6-f281-4111-9fcf-90592ca5d65f
+          </a>
+          <ol class="border-gray-200 items-center pt-6 flex border-t justify-between">
+            <li
+              class="rounded-full w-8 text-gray-900 hover:bg-gray-200 items-center mx-auto flex h-8 justify-center"
+            >
+              <ol class="grid relative grid-cols-2">
+                <li class="border-dashed border-gray-200 border-4 h-96 rounded-lg">
+                  This is item 051b6f3a-ca53-4117-9eff-40c4feba688f
+                </li>
+                <li class="group-hover:text-indigo-500 text-indigo-500">
+                  This is item 6b470ba0-bfbf-4d50-ade6-d32a45d9385d
+                </li>
+                <li class="grid grid-cols-1 gap-x-6 mt-10 sm:grid-cols-2 gap-y-4">
+                  This is item 05133aa9-2c68-446c-b720-d37f470b7897
+                </li>
+                <li class="text-sm font-medium text-gray-900">
+                  This is item b33b6cd4-c7a5-40bc-9347-2ec47b4cec47
+                </li>
+                <li class="py-4 flex items-center justify-center bg-blue-700">
+                  This is item 46e78e96-9c57-41c7-b819-b3502f5de3b0
+                </li>
+              </ol>
+              <a href="#" target="_blank" class="px-5 mt-6">
+                This is link a878e2ea-8312-4b38-b1b3-21e1533f3dd7
+              </a>
+              <ol class="rounded-full justify-center flex items-center mx-auto h-7 w-7">
+                <li class="mt-6">This is item c8de1300-c800-425a-93ed-0383f2f1548e</li>
+                <li class="bg-gray-100">This is item b335c2e9-66e8-4348-897e-9ecb3ddaac6f</li>
+              </ol>
+            </li>
+            <li class="sr-only">
+              <ul class="text-sm">
+                <li class="group-hover:text-white w-5 ml-2 h-5">
+                  This is item dafebc8c-ed78-4b08-8ee1-570450f2503e
+                </li>
+                <li class="text-gray-900">This is item 72ddfda3-13d3-48b2-b11f-431578a1610c</li>
+                <li class="absolute xl:h-full h-80 xl:top-0 inset-x-0 bottom-0">
+                  This is item de8485ee-dbf7-4c78-be93-5c286ee80b63
+                </li>
+                <li class="bg-gray-50 min-h-[192px]">
+                  This is item 04823406-6cf2-43b2-af9c-44371e1cef9f
+                </li>
+              </ul>
+              <ul
+                class="border-gray-300 px-4 text-gray-700 focus:outline-none focus:ring-2 border rounded-md flex justify-center focus:ring-offset-2 focus:ring-indigo-500 text-sm font-medium md:w-auto items-center hover:bg-gray-50 shadow-sm bg-white py-2 w-full"
+              >
+                <li class="lg:max-w-none lg:p-0 px-4 mx-auto sm:px-6 sm:max-w-3xl max-w-md">
+                  This is item 92fdfe2a-b01d-46ac-8fa2-df978d0ab995
+                </li>
+                <li class="block text-gray-500 truncate text-sm font-medium">
+                  This is item c815caa1-295d-430b-9d93-f5af2573e961
+                </li>
+                <li
+                  class="text-gray-500 hover:text-gray-900 text-base font-medium whitespace-nowrap"
+                >
+                  This is item 5f146f9c-7e84-402b-869e-6fb93e81fff7
+                </li>
+                <li class="flex flex-1 space-x-2 truncate">
+                  This is item c3060f27-1a70-4e04-8cd6-6bdcb4fe4390
+                </li>
+                <li class="hover:bg-gray-50 block">
+                  This is item 948cb786-9be0-4b0f-aef7-3acd98ca3055
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <ul class="hover:text-white font-medium whitespace-nowrap text-base text-indigo-300">
+            <li class="py-4 flex-1 whitespace-nowrap border-b-2 px-1 text-base font-medium">
+              <ol class="sr-only">
+                <li class="sm:px-6 px-4 py-16 text-center lg:px-8">
+                  This is item e445a3c0-a2a3-4b33-973e-41073925b0a3
+                </li>
+                <li class="p-6 text-center flex-none">
+                  This is item c7b5ddd4-9215-41de-83bb-5233e2e71fb0
+                </li>
+                <li class="text-gray-700 font-medium">
+                  This is item 2e590feb-ecc9-4526-bd53-400e59b93f92
+                </li>
+                <li
+                  class="md:grid-cols-12 grid md:grid-flow-col md:auto-rows-min grid-cols-1 md:gap-y-16 md:gap-x-8"
+                >
+                  This is item 28cecf92-6491-429d-8a43-a88c2e18bb49
+                </li>
+              </ol>
+              <img
+                class="rounded-full w-8 mx-auto flex hover:bg-gray-200 justify-center text-gray-900 items-center h-8"
+                alt="Profile picture of user ff1f1dc2-2b50-4c20-accd-fd0bb262c1a7"
+                src="https://example.org/pictures/d8119549-22e1-4f10-9d98-358f2aecff48"
+              />
+              <ol class="min-h-[592px] bg-white">
+                <li class="text-sm mt-3 text-indigo-200">
+                  This is item 1b1a3bc2-a7e8-4258-aaf2-099365b2fd49
+                </li>
+                <li class="flex-1 min-w-0">This is item cda8248b-9d75-4b4e-a0eb-761a928a885c</li>
+              </ol>
+            </li>
+            <li class="text-sm">
+              <img
+                class="-ml-1 mr-2 h-5 w-5 text-gray-500"
+                alt="Profile picture of user 5306ee35-ec57-4780-859c-a63b91af9c50"
+                src="https://example.org/pictures/3308c4b7-d9e4-4fd9-b480-07e2ecc6379d"
+              />
+              <ol class="space-y-4 mt-4">
+                <li class="relative">This is item 8b67d872-9384-433c-9258-7dcbdfd3ea19</li>
+                <li class="overflow-hidden sm:rounded-md shadow bg-white">
+                  This is item 9e8acccb-b4fc-48a0-9cdf-7ffecb951a12
+                </li>
+                <li class="mt-2">This is item eccf88d3-a0e4-4105-976b-055774239f94</li>
+                <li class="hover:text-gray-300 text-gray-400">
+                  This is item 96a74b2b-586b-4da4-9860-4f1daff47df8
+                </li>
+                <li class="text-indigo-600 xl:inline block">
+                  This is item f9d569d4-0218-4b56-a082-16687dca498b
+                </li>
+              </ol>
+              <img
+                class="rounded-full flex-shrink-0 bg-green-400 inline-block w-2 h-2"
+                alt="Profile picture of user 31f9b04d-7734-4b49-ae53-924712213f16"
+                src="https://example.org/pictures/5ce158c2-de30-45cd-8987-3438c89e1038"
+              />
+            </li>
+            <li class="relative">
+              <ul class="left-0 absolute hidden inset-0 top-0 w-3 lg:block">
+                <li class="w-8 h-8 rounded-full">
+                  This is item 73ba6a6e-efde-43fa-8617-e8d71ac49b92
+                </li>
+                <li class="mt-6">This is item bcf37c92-fa23-4aff-bb41-b6c005e25c95</li>
+                <li class="font-medium text-gray-900 text-sm">
+                  This is item 987ed9e0-3f69-4546-874a-e6b061ce4997
+                </li>
+              </ul>
+            </li>
+            <li class="text-sm">
+              <a href="#" target="_blank" class="py-20">
+                This is link 73741b97-c0f5-43d2-8a94-abe172555d36
+              </a>
+              <ul class="ml-4 flex lg:ml-0">
+                <li class="flex items-center text-indigo-600 text-sm font-medium">
+                  This is item 62d2192c-bc4c-452a-b3d3-b296076aea10
+                </li>
+                <li class="lg:self-center">This is item 8352d250-ea6b-4cd2-97fd-14d378f5fdfd</li>
+                <li class="w-8 h-8 rounded-full">
+                  This is item 0f906147-27d6-408c-ab7b-2b732d2aab6e
+                </li>
+                <li class="flex">This is item b1259231-0692-4761-bad2-533ea9673ca3</li>
+              </ul>
+              <img
+                class="flex-none w-10 h-10 rounded-full"
+                alt="Profile picture of user a4ae7b27-b02d-4410-a842-97c4dd228d21"
+                src="https://example.org/pictures/1e01f0b1-0242-40ec-8323-27988290961a"
+              />
+              <ul class="flex items-center">
+                <li class="w-auto h-6">This is item 5ed95bb3-02da-4500-b7a1-c899e5cc0e0a</li>
+                <li class="text-indigo-600 rounded w-4 focus:ring-indigo-500 h-4 border-gray-300">
+                  This is item 5ceb6efd-3fed-493e-836c-10eaeee7b32f
+                </li>
+                <li class="ring-2 w-6 max-w-none rounded-full ring-white h-6">
+                  This is item 16368227-4592-40d8-b1db-2532070424fe
+                </li>
+                <li class="lg:py-24">This is item 2a911067-75f3-4ffa-ad80-64c18d0e4a87</li>
+                <li class="text-gray-300">This is item 7a279c6a-94e1-45ca-9603-c5ffdea69f11</li>
+              </ul>
+            </li>
+          </ul>
+          <ol class="sr-only">
+            <li class="text-sm block py-2 px-4">
+              <ol class="py-6 bg-gray-100">
+                <li class="text-sm">This is item 9c62d043-ca21-4c3e-89f7-3c4382c0c2d4</li>
+                <li class="bg-center bg-gray-300 bg-cover min-h-[600px]">
+                  This is item b48cae92-a856-48ab-91ea-56f3fe426dbb
+                </li>
+                <li class="flex flex-col">This is item 0c9fc05e-8ecb-49cc-88ff-c49fa3da9f5c</li>
+                <li class="ml-auto">This is item 4887595a-6283-4187-a496-3f870a812cf7</li>
+                <li class="rounded-full w-10 h-10 flex-shrink-0 bg-gray-300">
+                  This is item f2c8dfd9-9214-4848-a438-b282d039f4e8
+                </li>
+              </ol>
+              <img
+                class="mt-6"
+                alt="Profile picture of user 3cd7374e-8fec-4639-8de5-17d5f12a1746"
+                src="https://example.org/pictures/badd1a28-a473-4aa7-b1af-f5f8d91fe914"
+              />
+              <ol
+                class="border-2 flex h-10 border-indigo-600 w-10 justify-center rounded-full items-center"
+              >
+                <li class="-m-2 font-medium p-2 block text-gray-900">
+                  This is item 0f973504-52f4-4fd1-ade3-6cbca5aa8e26
+                </li>
+                <li class="py-1.5 hover:bg-gray-100 bg-gray-50 focus:z-10 text-gray-400">
+                  This is item 3299c1b8-c78a-41f6-9b76-dc43ea52bc8d
+                </li>
+                <li class="mt-2 text-gray-700 text-sm">
+                  This is item 4922a8c1-f798-485c-921a-044f127466b2
+                </li>
+                <li class="block">This is item 4a3b4fe1-e2a2-485e-80ea-f5a6ae3abdd1</li>
+                <li class="group-hover:text-gray-500 text-gray-400">
+                  This is item cf7c405b-7cdf-470e-a8c4-1c08dc538721
+                </li>
+              </ol>
+            </li>
+            <li class="ml-6 relative md:hidden">
+              <ol class="text-sm text-gray-700 block sm:pt-2 font-medium sm:mt-px">
+                <li class="block ml-3 text-gray-900 font-medium text-base">
+                  This is item c5a23660-d738-4c48-a161-c045bbae82fd
+                </li>
+                <li class="rounded-lg flex -m-3 p-3 hover:bg-gray-100">
+                  This is item c128d651-9376-4dfb-adbf-93206c64bdb7
+                </li>
+                <li
+                  class="focus:ring-indigo-500 rounded-md focus:ring-2 items-center border-transparent border shadow-sm px-4 justify-center focus:outline-none hover:bg-indigo-700 focus:ring-offset-2 text-white text-base py-2 font-medium w-full flex bg-indigo-600"
+                >
+                  This is item 6857a68f-3b68-46f0-a7d5-5812de0f1c73
+                </li>
+              </ol>
+              <a href="#" target="_blank" rel="noreferrer" class="py-6">
+                This is link 042c48ee-324a-4262-a986-f0e7d936da8c
+              </a>
+            </li>
+            <li
+              class="flex focus:ring-offset-sky-900 text-sm focus:ring-white focus:ring-offset-2 text-white rounded-full focus:bg-sky-900 focus:ring-2 focus:outline-none"
+            >
+              <img
+                class="mt-6"
+                alt="Profile picture of user d5ce9ad9-2e5b-42e5-ba4d-456596478622"
+                src="https://example.org/pictures/562518e9-7238-46af-813f-48f4476f7946"
+              />
+              <ol class="sm:mt-0 sm:col-span-2 text-sm text-gray-900 mt-1">
+                <li class="border-gray-200 border-t">
+                  This is item 502e41ae-9779-4c8f-ad7e-c68a38dac2fa
+                </li>
+                <li
+                  class="rounded-md w-full py-3 focus:outline-none text-white hover:bg-indigo-600 bg-indigo-500 focus:ring-indigo-300 block focus:ring-2 focus:ring-offset-2 shadow font-medium px-4 focus:ring-offset-gray-900"
+                >
+                  This is item bc658bc3-cb9b-4b0f-83dc-d6a03b9fd2cd
+                </li>
+              </ol>
+              <ol class="text-left text-sm px-3 py-3.5 font-semibold text-gray-900">
+                <li class="p-2">This is item f65e9605-ab09-4606-b56c-1001a5fc588a</li>
+                <li class="border-gray-200 border-b">
+                  This is item a98fbc97-f597-43a7-bc13-f9818575d757
+                </li>
+                <li class="font-medium text-gray-900 -m-2 block p-2">
+                  This is item 3f81b413-5745-4731-a45e-0b0dcccad91c
+                </li>
+                <li class="sr-only">This is item d5e081e2-f8a6-4a26-a92f-25aa281a5c5e</li>
+                <li class="justify-center w-7 h-7 mx-auto rounded-full items-center flex">
+                  This is item e94ccae6-7774-4417-aaee-632f38176871
+                </li>
+              </ol>
+              <img
+                class="h-5 text-green-400 w-5"
+                alt="Profile picture of user ab628726-7925-41ef-ad5d-dfdb53aad986"
+                src="https://example.org/pictures/12102080-452e-4e27-9682-602a4d589eef"
+              />
+            </li>
+            <li class="lg:px-8 sm:px-6 mx-auto max-w-3xl lg:max-w-7xl px-4">
+              <ol
+                class="md:gap-x-8 mt-4 md:grid md:mt-10 xl:mt-0 sm:mt-8 xl:col-span-2 md:grid-cols-2"
+              >
+                <li class="h-12">This is item 2dd3e564-e80c-47d0-94fa-6027446fd8b7</li>
+                <li class="flex mt-8 flex-col">
+                  This is item e57bbb02-d90b-4864-8f22-eb1d0c83c228
+                </li>
+                <li class="text-gray-900">This is item b35e4d47-b316-4eee-8b9a-04ad483eeda1</li>
+                <li class="border-gray-200 py-2 border-t">
+                  This is item c8fb1102-105f-4c21-a6e5-86618fa554ca
+                </li>
+              </ol>
+            </li>
+            <li class="col-start-1 row-start-1 py-4">
+              <ul class="inset-0 fixed">
+                <li class="md:grid md:grid-cols-2 md:gap-8">
+                  This is item be652ad1-2b51-42c2-b5b4-73671725526e
+                </li>
+                <li class="focus:z-10 bg-white py-1.5 hover:bg-gray-100">
+                  This is item 2b477821-a8da-4e6c-9932-f4511dab32f3
+                </li>
+                <li class="divide-gray-200 relative divide-y z-0">
+                  This is item 7471b110-ac05-4a74-aabe-6a947463fbc5
+                </li>
+              </ul>
+              <ul class="text-sm">
+                <li class="px-4 py-16 bg-gray-50">
+                  This is item fbb4a4c7-04f2-4274-9c43-d577435ca255
+                </li>
+                <li
+                  class="text-gray-400 p-2 -m-2 inline-flex rounded-md items-center justify-center"
+                >
+                  This is item c212d9fb-08f2-482b-a84b-5d01ab5348fd
+                </li>
+                <li class="rounded-md bg-white p-2 -ml-2 text-gray-400">
+                  This is item 5aad9313-370b-42c1-b1da-01a163fb819f
+                </li>
+                <li class="flex-shrink-0 ml-2 text-left relative inline-block">
+                  This is item dbcca5ff-a719-4123-856d-98616b80eb5d
+                </li>
+                <li
+                  class="font-medium block py-2 hover:text-gray-800 text-gray-900 px-3 hover:bg-gray-100 text-base rounded-md"
+                >
+                  This is item 80179db5-2b81-411c-b167-67bc9d2e47d6
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="max-w-none text-gray-500 prose prose-sm">
+          <img
+            class="text-sm block font-medium text-gray-700"
+            alt="Profile picture of user 054fdc2b-6a82-4785-83e9-08f956ef1eff"
+            src="https://example.org/pictures/ec337290-d5eb-4c89-88c2-5acd4f2cba81"
+          />
+          <img
+            class="w-0 items-center flex flex-1"
+            alt="Profile picture of user 54106cc8-9c7a-40e1-82f5-85e693bdda75"
+            src="https://example.org/pictures/db52a60f-dde0-4b04-abd6-d1c6368506b2"
+          />
+        </li>
+        <li class="border-gray-300 w-full border-t">
+          <ul class="md:mt-1">
+            <li
+              class="focus:border-indigo-500 w-full block shadow-sm sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500"
+            >
+              <img
+                class="sm:px-6 mx-auto px-4 max-w-7xl lg:px-8"
+                alt="Profile picture of user 4dd8189a-a705-4ce2-a591-2195b7aaf101"
+                src="https://example.org/pictures/45766846-e1c7-46b4-9b77-d21c705f8767"
+              />
+              <ol class="flex-1 -mb-px xl:space-x-8 flex space-x-6">
+                <li class="text-gray-900 font-medium text-base">
+                  This is item 58214fd5-9ecd-4b5e-9571-761e65307926
+                </li>
+                <li
+                  class="sm:text-sm ring-black py-1 max-h-60 rounded-md bg-white ring-opacity-5 absolute shadow-lg z-10 overflow-auto mt-1 ring-1 text-base w-full focus:outline-none"
+                >
+                  This is item 6195dacc-bd81-45a2-876f-3988baf431cd
+                </li>
+              </ol>
+            </li>
+            <li
+              class="-m-1.5 hover:text-gray-500 text-gray-400 flex-none p-1.5 items-center flex justify-center"
+            >
+              <ul class="text-lg font-medium text-gray-500 w-full text-left cursor-auto py-6">
+                <li
+                  class="px-8 border-transparent text-white flex focus:ring-indigo-500 border rounded-md justify-center bg-indigo-600 focus:ring-2 text-base items-center focus:ring-offset-gray-50 w-full focus:outline-none hover:bg-indigo-700 py-3 font-medium focus:ring-offset-2"
+                >
+                  This is item 5152fa18-3378-4006-92d1-3f448a9c7943
+                </li>
+                <li class="block font-medium p-2 text-gray-900 -m-2">
+                  This is item ad07ce6c-c4e0-4a81-b698-4e0de238026a
+                </li>
+                <li
+                  class="border-transparent focus:ring-indigo-500 hover:bg-indigo-700 text-white focus:ring-2 bg-indigo-600 border font-medium justify-center px-4 items-center py-2 focus:outline-none rounded-md flex shadow-sm text-base focus:ring-offset-2 w-full"
+                >
+                  This is item ca23c192-f176-4379-9d7e-07d5c35c7d67
+                </li>
+                <li
+                  class="focus:ring-0 text-gray-800 bg-transparent h-12 border-0 pr-4 sm:text-sm placeholder-gray-400 pl-11 w-full"
+                >
+                  This is item ea951fee-79a0-4e42-9423-bfc951613d98
+                </li>
+                <li class="max-w-2xl text-gray-500 text-sm mt-1">
+                  This is item ac3b140e-d69c-43d4-8bed-5ca4db891e8c
+                </li>
+              </ul>
+              <a href="#" class="font-medium text-gray-900 text-lg">
+                This is link 03558675-3301-4d41-88d1-2ed5ddcccd71
+              </a>
+              <img
+                class="relative ml-3"
+                alt="Profile picture of user 1faed8a5-dcf3-4e33-aab7-4c42f1e553f3"
+                src="https://example.org/pictures/3b9274f5-7207-459c-a55a-1a69f96d5c42"
+              />
+            </li>
+          </ul>
+          <img
+            class="fixed hidden transition-opacity bg-opacity-75 md:block bg-gray-500 inset-0"
+            alt="Profile picture of user 3f8e2ee1-5626-42fc-9feb-ba993905a8fd"
+            src="https://example.org/pictures/4f68071b-4b71-45a0-a72a-d73bba10b36e"
+          />
+        </li>
+      </ol>
+    </main>
+    <img
+      class="mx-auto sm:px-6 px-4 lg:px-8 py-12 text-center max-w-7xl lg:py-24"
+      alt="Profile picture of user 5a5d0abd-d12f-413d-939c-6c7c9a45d5c5"
+      src="https://example.org/pictures/c604e92c-d789-4b7b-b8c9-2ba08f1b726e"
+    />
+    <img
+      class="text-indigo-200"
+      alt="Profile picture of user 5c082dc5-b645-4ff1-8a43-14bb6045d514"
+      src="https://example.org/pictures/5300b579-9219-4b8c-b887-0769e91a525c"
+    />
+    <p class="w-5 h-5">
+      <span
+        class="relative focus:outline-none items-center flex justify-center cursor-pointer -m-0.5 p-0.5 rounded-full"
+      >
+        This is text e858a40e-dd47-4c26-87b8-d6981ac445f8
+      </span>
+      <a href="#" target="_blank" class="ml-3 sm:block hidden">
+        This is link a7ee11b9-e807-4fd5-9104-476e1a8f5fe2
+      </a>
+      <span class="text-gray-600 hover:bg-gray-50 hover:text-gray-900">
+        This is text 80b9ad22-fa28-4b62-b806-7e1faaba6d5d
+      </span>
+    </p>
+  </section>
+</div>
diff --git a/oxide/crates/core/benches/fixtures/template-005.html b/oxide/crates/core/benches/fixtures/template-005.html
new file mode 100644
index 000000000..c1a4ce491
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-005.html
@@ -0,0 +1,5 @@
+<div class="sm:items-baseline sm:space-x-4 flex">
+  <a href="#" target="_blank" class="block sm:hidden px-4 py-2 text-sm">
+    This is link afe0b95d-703b-4471-b828-7fee034e18a0
+  </a>
+</div>
diff --git a/crates/oxide/src/fixtures/example.html b/oxide/crates/core/benches/fixtures/template-006.html
similarity index 100%
rename from crates/oxide/src/fixtures/example.html
rename to oxide/crates/core/benches/fixtures/template-006.html
diff --git a/oxide/crates/core/benches/fixtures/template-007.html b/oxide/crates/core/benches/fixtures/template-007.html
new file mode 100644
index 000000000..8d80eb929
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-007.html
@@ -0,0 +1,6 @@
+<div class="md:absolute items-center flex lg:hidden md:inset-y-0 md:right-0">
+  <input
+    type="password"
+    class="text-pink-800 py-0.5 bg-pink-100 font-medium text-sm items-center px-3 inline-flex rounded-full"
+  />
+</div>
diff --git a/oxide/crates/core/benches/fixtures/template-008.html b/oxide/crates/core/benches/fixtures/template-008.html
new file mode 100644
index 000000000..cb2a02f9e
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-008.html
@@ -0,0 +1,6 @@
+<div class="text-gray-200">
+  <span class="lg:hidden z-40 relative"> This is text cd32f5df-af14-4332-9fd3-0e5589f8d457 </span>
+  <a href="#" target="_blank" rel="noreferrer" class="border-gray-200 border-t">
+    This is link 05289860-74df-49a7-91dd-1a3a0d215bc3
+  </a>
+</div>
diff --git a/oxide/crates/core/benches/fixtures/template-009.html b/oxide/crates/core/benches/fixtures/template-009.html
new file mode 100644
index 000000000..7c1c29a35
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-009.html
@@ -0,0 +1,5 @@
+<div class="italic text-sm text-gray-500">
+  <span class="relative text-left inline-block">
+    This is text bec24672-f081-47d1-8130-cc06506974b5
+  </span>
+</div>
diff --git a/oxide/crates/core/benches/fixtures/template-010.html b/oxide/crates/core/benches/fixtures/template-010.html
new file mode 100644
index 000000000..978745d41
--- /dev/null
+++ b/oxide/crates/core/benches/fixtures/template-010.html
@@ -0,0 +1,3348 @@
+<div class="text-white items-center bg-indigo-500 w-12 rounded-xl flex h-12 justify-center">
+  <ul
+    class="block w-full min-w-0 focus:border-indigo-500 rounded-none border-gray-300 focus:ring-indigo-500 flex-1 rounded-r-md sm:text-sm"
+  >
+    <li class="truncate flex-auto ml-3">
+      <ul class="max-w-2xl sm:mt-32 lg:max-w-none mt-24 mx-auto">
+        <li
+          class="px-3 inline-flex text-gray-500 border sm:text-sm items-center border-r-0 bg-gray-50 rounded-l-md border-gray-300"
+        >
+          <ul class="sr-only">
+            <li class="h-6 w-6 text-white">
+              <ul class="py-6 sm:rounded-lg bg-white shadow sm:px-6 px-4">
+                <li class="max-w-7xl sm:px-6 mx-auto px-4 lg:px-8">
+                  This is item b6232c59-15a9-4b27-b5ad-5794249d2123
+                </li>
+                <li class="text-indigo-200">This is item 84a3b00b-32f2-43a2-9d7e-e756039b3ab7</li>
+                <li class="max-w-2xl lg:px-8 px-4 lg:max-w-7xl mx-auto sm:px-6 py-16 sm:py-24">
+                  This is item b7bfcb3e-49f6-44fd-86d9-5d4fa497b85d
+                </li>
+                <li class="w-5 h-5">This is item 0d4b2b3e-522a-428f-92d7-e029dca21f61</li>
+              </ul>
+            </li>
+            <li class="w-5 h-5">
+              <ol class="h-6 w-6">
+                <li
+                  class="justify-center focus:outline-none inline-flex focus:ring-2 rounded-md p-2 focus:ring-inset hover:bg-gray-100 text-gray-400 focus:ring-indigo-500 hover:text-gray-500 items-center bg-gray-50"
+                >
+                  This is item 38376778-a95c-461e-85a7-8356d6a4cc85
+                </li>
+                <li class="flex">This is item d288ea92-425e-4e21-bb0f-4906984f854f</li>
+              </ol>
+              <img
+                class="px-5 py-2"
+                alt="Profile picture of user cb8a8b85-2462-431f-9e31-ab0b2594594e"
+                src="https://example.org/pictures/c2f932aa-7946-4f91-8600-0bdecec339b9"
+              />
+              <ul
+                class="overflow-hidden rounded-lg sm:aspect-h-3 aspect-h-1 w-full aspect-w-1 sm:aspect-w-2"
+              >
+                <li class="mt-4 justify-between flex items-start">
+                  This is item e7996c44-0be2-4ba9-b4e1-8f3994987a02
+                </li>
+                <li class="bg-white hover:bg-gray-100 py-1.5 focus:z-10">
+                  This is item 54b68818-a75a-429b-a879-50c78b2eaf10
+                </li>
+                <li class="justify-between items-center h-16 flex">
+                  This is item 69a05072-d586-48d1-a1f5-12c985772ec1
+                </li>
+                <li class="text-gray-500">This is item 925c0e35-61d9-4ce8-a585-9f5de266b9db</li>
+                <li class="ml-4">This is item 2968e38a-5628-469a-a27c-ac290d4a842e</li>
+              </ul>
+              <a href="#" rel="noreferrer" class="truncate">
+                This is link fa321831-1871-4f99-beb3-9101f4e5a1d3
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="ml-3 text-sm">
+          <ul class="sm:pl-16 inset-y-0 flex max-w-full right-0 pointer-events-none fixed pl-10">
+            <li class="h-full shadow-xl flex divide-y divide-gray-200 flex-col bg-white">
+              <img
+                class="sr-only"
+                alt="Profile picture of user 7bbfe4be-7858-4bd8-ba43-05191c83ed44"
+                src="https://example.org/pictures/7c333d55-526b-47ff-976c-3e63989e068e"
+              />
+            </li>
+            <li class="flex px-2 pointer-events-none items-center inset-y-0 absolute right-0">
+              <ol class="text-gray-700 block text-sm">
+                <li class="text-sm text-gray-500">
+                  This is item 15b8262a-d807-4e91-9557-76e551c27ead
+                </li>
+                <li
+                  class="focus:outline-none pr-5 bg-none border-transparent group-hover:text-gray-800 focus:border-transparent items-center py-0.5 flex pl-2 font-medium focus:ring-0 text-sm rounded-md text-gray-700"
+                >
+                  This is item a14b2027-5b49-493b-9062-62a8a24c4bfa
+                </li>
+                <li class="flex-shrink-0 h-5 w-5 mr-1.5 text-green-400">
+                  This is item 46ea3b57-c509-42e7-a9b0-401a66a33aae
+                </li>
+                <li class="justify-center bg-gray-100 flex p-8">
+                  This is item 4aa9de6e-78e4-4cf3-b64a-a7b9fab4265b
+                </li>
+              </ol>
+              <img
+                class="top-0 absolute md:hidden origin-top-right transform z-10 transition p-2 inset-x-0"
+                alt="Profile picture of user b251d15a-678e-44a5-b52f-3437a80dc3d6"
+                src="https://example.org/pictures/b975b280-0284-4acc-8486-28286ff2f043"
+              />
+              <ol class="border-b-2 py-4 font-medium flex-1 whitespace-nowrap px-1 text-base">
+                <li class="border-gray-200 py-2 border-t">
+                  This is item ea2a980e-4c44-49fe-ac83-e2324da4220e
+                </li>
+                <li class="hover:bg-gray-100 text-gray-900 py-1.5 focus:z-10 bg-white relative">
+                  This is item 395a9f07-4196-442e-b0c7-63f7bd2240eb
+                </li>
+              </ol>
+            </li>
+            <li class="sm:flex py-6">
+              <img
+                class="xl:h-56 h-40 mx-auto rounded-full xl:w-56 w-40"
+                alt="Profile picture of user 2cd3137b-551b-403a-ae39-cd324123cadd"
+                src="https://example.org/pictures/2e04141a-171d-4b68-83eb-3adfafe2164b"
+              />
+              <ul class="ml-auto">
+                <li class="mt-4">This is item d9df550c-4241-4733-8aa3-b28dcf38ad10</li>
+                <li class="h-8 w-auto">This is item 441a6de1-08f1-4816-80ea-bdcdc5ab416d</li>
+                <li class="py-1">This is item 83f1e3f8-3527-4bb9-b45c-7e2f1300e97f</li>
+                <li
+                  class="hover:bg-gray-100 py-2 flex-col bg-white h-14 px-3 focus:z-10 flex text-gray-900"
+                >
+                  This is item d545a43e-d3d3-4b7d-864c-e698d3975ada
+                </li>
+                <li class="w-5 h-5 text-gray-500">
+                  This is item 5882da1a-e2fd-4769-8c04-8651d107f6b6
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="text-gray-900 font-medium">
+            <li class="font-medium text-gray-900 text-base">
+              <img
+                class="justify-between mt-2 flex"
+                alt="Profile picture of user 63c99cc7-94cf-4916-8a64-363cf89abf70"
+                src="https://example.org/pictures/02c0787f-7cb1-4d29-9a47-c6181cefd373"
+              />
+              <ul class="ml-3">
+                <li class="text-base">This is item 805cd0dc-3b70-416f-bfad-296ca8bd3fa5</li>
+                <li class="text-gray-900 font-medium text-base">
+                  This is item c3e9982e-e03e-445a-94c3-4cb44b773429
+                </li>
+                <li
+                  class="text-sm ease-out transition-colors duration-200 justify-center relative font-medium flex items-center z-10"
+                >
+                  This is item d0378aad-e653-48ea-95ac-8504f4c4c151
+                </li>
+                <li class="h-6 w-6">This is item 5a9d5dcc-55ee-4046-9e2b-40e25599150d</li>
+              </ul>
+              <img
+                class="text-sm text-indigo-600 hidden hover:text-indigo-500 font-medium md:block"
+                alt="Profile picture of user 05fe288a-d6b4-4c0f-91fc-2d16fd716184"
+                src="https://example.org/pictures/ea90adfe-ab4c-427b-84a6-f630f87c6097"
+              />
+              <img
+                class="bg-indigo-100 border-transparent rounded-md font-medium flex justify-center hover:bg-indigo-200 text-base text-indigo-700 px-5 items-center py-3 border"
+                alt="Profile picture of user b0cc2cbb-94ec-4aa1-93b3-fa3130a8633d"
+                src="https://example.org/pictures/5ead9c24-0a52-47f0-9b86-28b42368bf97"
+              />
+            </li>
+            <li class="h-full w-1/2 right-0 absolute rounded-lg">
+              <ul class="block font-medium text-sm text-gray-700">
+                <li class="sr-only">This is item be595ce2-e0ed-4de2-8326-94ef7d8bfc25</li>
+                <li
+                  class="lg:px-8 lg:grid-cols-3 lg:gap-x-8 sm:px-6 mx-auto mt-6 max-w-2xl lg:grid lg:max-w-7xl"
+                >
+                  This is item 4234756d-b8ef-4adf-b9fe-d146b3c08975
+                </li>
+                <li
+                  class="px-2 inset-y-0 right-0 items-center rounded-r-md focus:outline-none absolute flex"
+                >
+                  This is item a4069b4e-82ee-4071-9bd6-507363d81746
+                </li>
+              </ul>
+              <ul class="text-sm text-gray-500">
+                <li class="mt-6">This is item 286c0ee7-d8f9-41dc-a11c-17e51d4b1197</li>
+                <li
+                  class="text-sm focus:outline-none focus:ring-2 flex focus:ring-offset-gray-800 focus:ring-offset-2 focus:ring-white bg-gray-800 rounded-full"
+                >
+                  This is item c7e90975-fb69-4c35-aec5-57d00fafb106
+                </li>
+                <li class="rounded-full w-7 justify-center flex h-7 items-center mx-auto">
+                  This is item 0e3c8e9f-e551-474a-97a2-74e0e0280d44
+                </li>
+                <li class="sm:space-y-4 space-y-6">
+                  This is item a20ebde2-d61d-4f98-a63d-3bb890324e6b
+                </li>
+                <li class="align-middle inline-block md:px-6 py-2 lg:px-8 min-w-full">
+                  This is item 41880cbf-c5e8-40e9-a4f2-725a55151385
+                </li>
+              </ul>
+              <img
+                class="font-medium text-gray-900 text-sm"
+                alt="Profile picture of user b4f9bee4-9334-460f-8ce0-823326931a4a"
+                src="https://example.org/pictures/82d4e075-343b-4ef1-911c-6e91bbdf1cfc"
+              />
+            </li>
+            <li class="text-gray-300">
+              <ul
+                class="grid-cols-1 lg:grid-cols-3 grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:gap-x-8"
+              >
+                <li class="bg-white">This is item 163b6fa0-49d8-49a1-b7c1-054bf1520fe6</li>
+                <li class="max-h-12">This is item 4749d548-ceb9-41d5-bb6f-05576770eb0b</li>
+              </ul>
+              <ol class="py-14 sm:px-14 text-sm px-6 text-center">
+                <li class="text-gray-500 hover:text-gray-700">
+                  This is item c11bbb5b-5ad8-4d28-b1d8-0c137edf1836
+                </li>
+                <li class="sm:col-span-6">This is item db247ff1-e212-4a70-93d0-7fee0fcaa236</li>
+                <li class="bg-white">This is item e745bcb6-abe2-477e-bd50-f0b14d64baf0</li>
+                <li class="text-gray-900 font-medium text-sm">
+                  This is item 96cf1dee-b328-463f-a8ec-dd2ea5732f8e
+                </li>
+                <li
+                  class="text-gray-200 bg-transparent border-gray-300 rounded border-2 border-dashed w-full h-64"
+                >
+                  This is item eae2bccf-69e5-455a-b685-1de1915e0a51
+                </li>
+              </ol>
+              <ul class="lg:block hidden lg:ml-4">
+                <li class="items-center flex justify-between">
+                  This is item e62d7932-c20e-48eb-b61d-80006a39004b
+                </li>
+                <li
+                  class="absolute justify-center from-cyan-600 w-12 items-center bg-gradient-to-r rounded-md to-green-400 h-12 flex"
+                >
+                  This is item a7c5bf32-b4bb-4394-bdb1-5dfa74ebfc96
+                </li>
+                <li class="mx-auto max-w-4xl">This is item 529dc01e-3a77-4812-87e8-55956692dea1</li>
+                <li class="flex items-start">This is item 5d37cc6f-cb92-4831-86b9-3db82dc06e28</li>
+                <li class="text-sm mt-2 text-gray-500">
+                  This is item 13b5e31d-acca-4c24-8817-c423213c3c43
+                </li>
+              </ul>
+              <a
+                href="#"
+                target="_blank"
+                class="lg:right-full -translate-x-1/2 -translate-y-3/4 lg:left-auto transform lg:translate-y-1/4 left-full lg:translate-x-2/3 absolute top-0"
+              >
+                This is link 0589b897-a97d-4ed2-b6fc-8524772925c9
+              </a>
+            </li>
+            <li class="lg:hidden">
+              <img
+                class="h-7 mx-auto rounded-full items-center flex w-7 justify-center"
+                alt="Profile picture of user b33ea1a5-b974-4831-b67d-19cef1240564"
+                src="https://example.org/pictures/dec7452d-3c51-4783-8112-8b0eab878842"
+              />
+              <a
+                href="#"
+                target="_blank"
+                class="gap-x-4 grid-cols-2 sm:grid-cols-3 gap-y-8 lg:grid-cols-4 xl:gap-x-8 grid sm:gap-x-6"
+              >
+                This is link 2be37d39-7812-4a43-819a-d4f1ba4670fe
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="group border-r relative sm:p-6 border-gray-200 p-4 border-b"
+              >
+                This is link fa8b8db4-c39b-4775-bb24-8111156d96af
+              </a>
+              <ul class="text-gray-600">
+                <li class="text-indigo-600">This is item 31dab0c5-aff1-4049-b4e2-192c9fec06f8</li>
+                <li
+                  class="border-transparent focus:ring-indigo-500 w-full justify-center bg-indigo-500 py-2 text-base px-4 focus:ring-offset-gray-800 focus:ring-2 font-medium border hover:bg-indigo-600 text-white flex focus:ring-offset-2 items-center rounded-md focus:outline-none"
+                >
+                  This is item 0539cff1-97c0-4f95-aa6b-81501aa7f724
+                </li>
+                <li class="pt-5 pb-2 flex px-4">
+                  This is item cda6deae-c59a-4c20-a132-2a48ff8c6239
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="font-medium block text-gray-700 text-sm">
+          <ol
+            class="items-center text-gray-400 rounded-full mx-auto justify-center w-8 h-8 flex hover:bg-gray-200"
+          >
+            <li class="h-8 w-auto">
+              <a
+                href="#"
+                class="block focus:border-blue-600 w-full rounded-md focus:ring-blue-600 border-gray-300 pl-10 placeholder-gray-500"
+              >
+                This is link 414f1179-847b-4adb-a4ac-bf15255695cc
+              </a>
+              <img
+                class="sr-only"
+                alt="Profile picture of user aac1e622-1643-4fb4-902f-982a08dcce09"
+                src="https://example.org/pictures/33ceb8c2-0e80-4cf2-a878-062c51610fcd"
+              />
+            </li>
+            <li class="border-gray-200 border-t">
+              <a href="#" target="_blank" rel="noreferrer" class="text-green-700 text-sm mt-2">
+                This is link 3d47422f-4ec3-446c-8b03-45a2834b7d9f
+              </a>
+            </li>
+            <li class="lg:px-8 overflow-hidden mx-auto max-w-7xl sm:px-6 px-4 sm:py-24 py-16">
+              <ul class="z-40 relative lg:hidden">
+                <li class="text-gray-300 w-4 h-5">
+                  This is item 8f96052d-e25c-49a4-acc9-d6d249067882
+                </li>
+                <li class="text-gray-500 text-base mt-4">
+                  This is item f159f932-4872-4ced-841e-b9ca8b335e20
+                </li>
+                <li
+                  class="lg:items-center lg:justify-between xl:mt-0 pt-8 border-gray-200 border-t lg:flex"
+                >
+                  This is item 5e036b67-559a-4e8e-966c-d64bc232e583
+                </li>
+                <li class="block font-medium text-gray-900 mt-6">
+                  This is item 1609f37c-b8bc-4114-b9f6-f63891c04a2b
+                </li>
+              </ul>
+              <a href="#" target="_blank" class="mt-6">
+                This is link f71a79fc-7946-4e61-87ff-b4a466dd97a5
+              </a>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="group-hover:text-gray-100 border-transparent flex pl-2 focus:border-transparent items-center py-0.5 font-medium bg-gray-900 focus:ring-0 focus:outline-none rounded-md pr-5 bg-none text-white text-sm"
+              >
+                This is link fcff06ee-a012-40c1-a346-58dac4596810
+              </a>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="font-medium text-gray-900 text-base hover:text-gray-700"
+              >
+                This is link e4e206e4-1880-4cf5-9410-1d88120f4ba5
+              </a>
+            </li>
+            <li class="py-6 border-gray-200 px-4 border-t">
+              <a href="#" target="_blank" rel="noreferrer" class="sm:px-6 px-4 bg-indigo-700 py-6">
+                This is link 81200b60-94b9-40a9-bdae-b3874dd1f4ac
+              </a>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="py-1.5 hover:bg-gray-100 text-gray-400 focus:z-10 bg-gray-50"
+              >
+                This is link b89f5b78-cfe0-40ac-96b6-fd75af1c400e
+              </a>
+            </li>
+            <li class="px-5 mt-6">
+              <a
+                href="#"
+                rel="noreferrer"
+                class="shadow-sm text-sm focus:outline-none focus:ring-2 px-4 border border-transparent focus:ring-offset-2 text-white focus:ring-indigo-500 font-medium rounded-md bg-indigo-600 flex-1 py-2 hover:bg-indigo-700"
+              >
+                This is link 07910197-c2f9-496a-a31b-b07fd2615530
+              </a>
+            </li>
+          </ol>
+          <img
+            class="flow-root"
+            alt="Profile picture of user 72c00f34-9197-4b11-b140-da5962b4986c"
+            src="https://example.org/pictures/ae537ba8-ecbc-426a-9757-75fb7ab36b52"
+          />
+        </li>
+        <li class="text-sm py-3.5 font-semibold text-gray-900 text-left px-3">
+          <ol class="bg-opacity-60 p-4 text-sm bg-white">
+            <li class="w-8 rounded-full h-8">
+              <a href="#" target="_blank" class="bg-opacity-50 bg-blue-50">
+                This is link 983dfbcc-6499-40a5-8eb4-710490922399
+              </a>
+              <a href="#" class="items-center flex absolute h-5">
+                This is link ab70a9f1-0b40-41e9-a9a5-6e28769f6f9f
+              </a>
+              <img
+                class="mt-2 text-base text-gray-500"
+                alt="Profile picture of user 8f8a9529-90da-420b-85ef-6593fd31ff68"
+                src="https://example.org/pictures/16f6b0c6-c2a2-462c-b921-27f78e046a12"
+              />
+              <ol class="flex text-gray-700 font-medium group items-center">
+                <li
+                  class="font-medium justify-center border bg-indigo-600 px-4 rounded-md flex text-base py-2 text-white hover:bg-indigo-700 items-center w-full border-transparent shadow-sm"
+                >
+                  This is item 4eae390e-a76f-446c-8763-09f83b30f9e9
+                </li>
+                <li class="h-8 w-auto lg:hidden block">
+                  This is item 88050978-d037-42cd-8d9d-a10a7c9a5d4a
+                </li>
+              </ol>
+            </li>
+            <li
+              class="border-gray-200 mt-10 sm:justify-between pt-6 border-t sm:items-center sm:flex"
+            >
+              <a href="#" class="h-5 group-hover:text-gray-500 w-5 ml-2">
+                This is link f70f623f-d1f6-4a73-b133-5d67cc5cdaf0
+              </a>
+            </li>
+            <li class="font-medium text-gray-900">
+              <img
+                class="mx-auto items-center flex justify-center rounded-full h-7 w-7"
+                alt="Profile picture of user ed73cf0d-275e-46d8-b161-97249ef6a285"
+                src="https://example.org/pictures/27a89a71-7c8f-4568-b4c5-926b3f7654a2"
+              />
+              <ul
+                class="py-2 bg-white px-2 border rounded-l-md items-center border-gray-300 inline-flex"
+              >
+                <li class="sr-only">This is item ac85a76b-e65a-4b94-aa30-0eb88a42dab1</li>
+                <li class="sr-only">This is item 20dc876a-5528-4e92-91a2-bb7c455caadb</li>
+                <li class="overflow-hidden inset-0 fixed">
+                  This is item 180ee0b7-0936-4145-8908-882d2f219244
+                </li>
+                <li class="mt-20 lg:mt-0 lg:col-span-2">
+                  This is item e5a1d67d-5e9d-4fb2-83b6-430ccf821e4c
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+    <li class="border-b border-gray-200">
+      <a
+        href="#"
+        target="_blank"
+        class="flex-shrink-0 border overflow-hidden rounded-md w-24 border-gray-200 h-24"
+      >
+        This is link 300efd43-d47f-4955-b202-4cbd3be11e08
+      </a>
+      <a href="#" class="inline-flex shadow rounded-md">
+        This is link f7d44d0d-75c7-43ea-9739-fbd198a8e9d0
+      </a>
+    </li>
+  </ul>
+  <form class="text-gray-500 w-6 flex-none h-6">
+    <input type="password" class="font-medium text-lg space-y-1 leading-6" />
+    <select class="px-4 text-gray-500 py-5 text-left font-normal text-sm">
+      <option>This is item e24faf45-92fc-4a4d-b674-91357878f833</option>
+      <option value="4e5f87e6-935f-4361-973a-4c75f8609071">
+        This is item e6fcafa6-1dca-4fb4-aaff-d9d5cda479eb
+      </option>
+    </select>
+  </form>
+  <span class="mx-auto w-7 flex justify-center h-7 items-center rounded-full">
+    This is text 24221d94-bb69-4fd8-9100-2e0bd6662c87
+  </span>
+  <section class="w-6 h-6">
+    <h3 class="lg:px-8 mx-auto sm:px-6 max-w-7xl py-3 px-3">
+      This is heading 5d33bc2a-b185-422d-b55d-c17aac47f121
+    </h3>
+    <main class="pb-5 border-b border-gray-200">
+      <ul class="flow-root">
+        <li class="ml-3">
+          <a
+            href="#"
+            class="h-16 shadow-sm border-b flex flex-shrink-0 z-10 bg-white relative border-gray-200"
+          >
+            This is link bc8a59bc-26e4-4074-8cee-fcfeae3352a1
+          </a>
+          <ul class="flex fixed inset-0 z-40">
+            <li class="flow-root">
+              <ol class="text-indigo-600">
+                <li class="bg-white focus:z-10 hover:bg-gray-100 py-1.5">
+                  This is item 693d006d-417c-4e44-97ad-0e76a6509439
+                </li>
+                <li class="font-medium text-gray-900 text-lg">
+                  This is item 8540dd39-382c-4965-a778-78ea1d7e21ca
+                </li>
+                <li class="hidden lg:flex">This is item 53bfc944-aeff-49a2-8476-cfd7b51b450d</li>
+                <li class="py-12 max-w-7xl lg:px-8 sm:px-6 mx-auto">
+                  This is item 8d6b675e-0808-4121-8358-f254cce4949f
+                </li>
+                <li
+                  class="group text-gray-600 flex items-center hover:text-gray-900 text-sm hover:bg-gray-50 font-medium px-3 py-2 rounded-md"
+                >
+                  This is item 6571937e-3b09-493e-9819-880375d64c61
+                </li>
+              </ol>
+              <ul class="pr-6">
+                <li class="text-gray-900 sm:tracking-tight text-2xl sm:text-3xl font-bold">
+                  This is item cd8a916c-489a-405c-8204-3c7b8bfbe21a
+                </li>
+                <li
+                  class="bg-green-50 hover:bg-green-100 rounded-md focus:outline-none focus:ring-green-600 focus:ring-offset-green-50 focus:ring-offset-2 text-green-500 inline-flex p-1.5 focus:ring-2"
+                >
+                  This is item fe037e16-beee-4df5-8d56-27bc7c88b861
+                </li>
+                <li class="md:pr-14">This is item d2c23001-7ecd-4d90-a04a-dffeb9b5e7bd</li>
+                <li class="hover:bg-gray-100 py-1.5 bg-white focus:z-10">
+                  This is item f71e889a-bba0-44ee-b8c6-7994ca3feadd
+                </li>
+              </ul>
+            </li>
+            <li class="flex-shrink-0 self-center">
+              <img
+                class="text-center sm:px-14 px-6 py-14"
+                alt="Profile picture of user 72b68307-816c-47bc-8f62-8058a5581811"
+                src="https://example.org/pictures/fc281d95-597d-4cd7-9dc0-c2cedf138464"
+              />
+              <a href="#" target="_blank" class="flex h-full flex-col">
+                This is link f4f9814c-a3b7-40ab-9001-7b50926725e8
+              </a>
+            </li>
+            <li class="sr-only">
+              <img
+                class="inset-0 absolute shadow bg-white top-1/2"
+                alt="Profile picture of user 804da6b2-b21b-4a9c-98d6-23c6f59be6b1"
+                src="https://example.org/pictures/d7d01c15-6272-4578-8d76-3d5f633fb6c5"
+              />
+              <ol class="text-gray-500 hover:text-gray-600">
+                <li class="block lg:inline">This is item 488c7c4e-0c2c-4e2a-bedc-3c5ca0a682d8</li>
+                <li class="space-y-4">This is item 2b59ac91-bf4f-4288-b3e1-74274b93711f</li>
+                <li class="space-y-6 mt-6">This is item 32b280f2-10de-4c69-ad88-c2df0bd0569a</li>
+              </ol>
+              <a href="#" target="_blank" class="items-center lg:ml-8 flex">
+                This is link 701be519-d46e-4227-9a64-20b967687002
+              </a>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="w-9 inline-block rounded-full h-9"
+              >
+                This is link b50f4b2d-2574-47bc-b2d6-eb870a2afd71
+              </a>
+            </li>
+            <li class="col-end-1 font-semibold text-gray-900">
+              <ul class="lg:left-0 lg:absolute lg:w-1/2 lg:inset-y-0">
+                <li class="text-base mt-4 text-gray-500">
+                  This is item 5707a843-bd7d-444e-bf92-e63923c6b0eb
+                </li>
+                <li class="lg:max-w-5xl sm:space-y-4 sm:mx-auto sm:max-w-xl space-y-5">
+                  This is item 32cbf474-92b1-4fc6-8ae4-8d4a239f9403
+                </li>
+                <li class="ml-3 pr-6 font-medium text-sm whitespace-nowrap text-gray-900">
+                  This is item 9522936d-9611-4b39-8242-d3ac14572760
+                </li>
+              </ul>
+              <img
+                class="h-9"
+                alt="Profile picture of user 9ee96d5b-e135-44df-9b0e-2a005135a305"
+                src="https://example.org/pictures/684a915e-1ca4-4e29-a846-9af61f6a44c8"
+              />
+              <ol
+                class="transition-colors duration-200 -mb-px border-b-2 flex ease-out z-10 relative items-center pt-px text-sm font-medium"
+              >
+                <li class="font-medium text-gray-900">
+                  This is item 63066c52-90a5-4852-8583-0d504fc75fc3
+                </li>
+                <li class="mt-4 space-y-4">This is item 26ffbbca-d601-4e02-a032-c2ccb5f9de57</li>
+                <li class="grid grid-cols-2 gap-x-4 gap-y-10">
+                  This is item 81c48939-6eff-476b-baf7-865e09b63b1b
+                </li>
+                <li
+                  class="pr-3 text-gray-500 hidden pt-4 font-normal md:pl-0 sm:table-cell pl-6 text-sm text-right"
+                >
+                  This is item 0992970c-f10b-4546-b379-693182e9acbb
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <ul class="text-sm px-4 flex py-2 justify-between">
+            <li class="justify-end flex">
+              <ul class="hover:text-gray-500 p-2 ml-2 text-gray-400">
+                <li class="text-gray-900 tracking-tight font-bold text-3xl">
+                  This is item e6cd16be-928b-4129-9296-e7a8252a0404
+                </li>
+                <li class="font-medium text-gray-700 text-sm block">
+                  This is item 699c4ae4-8e51-421c-acc2-8154878f97ac
+                </li>
+                <li class="ml-4">This is item b2d30a67-7cd2-4a0d-8dba-19b1492022ff</li>
+                <li class="w-7 mx-auto h-7 flex rounded-full justify-center items-center">
+                  This is item d75c4478-7a96-42de-97cd-0026f7db1c00
+                </li>
+              </ul>
+              <ul class="sr-only">
+                <li
+                  class="hover:text-gray-900 rounded-md text-base group font-medium focus:ring-indigo-500 focus:ring-2 inline-flex items-center focus:outline-none focus:ring-offset-2 bg-white"
+                >
+                  This is item 8458c078-b26b-43f6-a246-c19286b82514
+                </li>
+                <li class="text-sm block font-medium text-gray-700">
+                  This is item b1446e9f-603d-49f9-90d7-03966010b3b2
+                </li>
+                <li
+                  class="font-semibold border-b border-gray-200 px-6 bg-gray-50 text-gray-900 py-3 text-sm text-left"
+                >
+                  This is item 05f1a3cd-94c9-4414-a2c4-7b945385479b
+                </li>
+              </ul>
+              <img
+                class="text-center : ? relative bg-white '' '' 'rounded-r-lg' overflow-hidden }} {{ focus:z-10 flex-1 loop.first : 'rounded-l-lg' py-4 px-6 loop.last }} ? font-medium  min-w-0 {{ text-sm hover:bg-gray-50 group"
+                alt="Profile picture of user cc90d0b5-a2d0-4636-8827-6ef0351ed134"
+                src="https://example.org/pictures/91b82399-0529-414d-b599-01ea3c00be7a"
+              />
+              <a href="#" class="-mr-1 ml-2 h-5 text-gray-500 w-5">
+                This is link 3075addc-d1f5-4255-84fd-edf691d8893a
+              </a>
+            </li>
+            <li class="w-0 flex-1 ml-3">
+              <ul class="inset-0 absolute">
+                <li class="max-w-7xl mx-auto px-4 sm:px-6">
+                  This is item 2cc3ecc3-32ce-4877-9088-c2b0aad37024
+                </li>
+                <li class="flex bg-white min-h-full flex-col lg:relative">
+                  This is item cbdd7446-64cb-485e-9374-5011cfdef78a
+                </li>
+              </ul>
+              <ul class="flex justify-end items-center flex-1">
+                <li class="sm:px-6 max-w-2xl sm:py-20 text-center py-16 mx-auto lg:px-8 px-4">
+                  This is item aa6719fc-b2b3-422f-8c31-4c9a339ef6de
+                </li>
+                <li class="hidden lg:flex lg:items-center lg:space-x-6">
+                  This is item 1b16f040-d1e9-47e4-9324-59386c7d4d86
+                </li>
+                <li
+                  class="focus:ring-indigo-500 block w-full border-gray-300 focus:border-indigo-500 rounded-md mt-1 shadow-sm sm:text-sm"
+                >
+                  This is item 8c96cfa6-6fd2-41eb-a1b1-ead600396d16
+                </li>
+                <li class="block">This is item e11064a1-075d-4abe-bd2c-de8f276ec81d</li>
+              </ul>
+            </li>
+            <li class="w-full flex items-end mx-auto max-w-lg justify-around">
+              <img
+                class="flex px-4 lg:px-0 max-w-2xl lg:w-full lg:max-w-lg mx-auto"
+                alt="Profile picture of user e35196e7-2786-42b4-96d0-023246295df7"
+                src="https://example.org/pictures/461281af-ea30-4248-84fe-7b41e4046982"
+              />
+              <a href="#" rel="noreferrer" class="text-base text-gray-900 font-medium">
+                This is link fb96df76-d670-4228-bc8f-097a1b131200
+              </a>
+              <ol class="text-gray-500 prose prose-indigo mx-auto lg:max-w-none">
+                <li class="inset-0 transition-opacity fixed bg-gray-500 bg-opacity-75">
+                  This is item e8920343-7762-49d2-93ec-7c650d39a4c2
+                </li>
+                <li class="col-span-1 justify-center py-8 bg-gray-50 flex px-8">
+                  This is item feef74d5-f076-41e5-9873-ce28c10b8bdd
+                </li>
+                <li class="focus:z-10 hover:bg-gray-100 py-1.5 bg-white">
+                  This is item bd83b50b-3a59-4c25-844d-4bafba3f7009
+                </li>
+                <li class="block text-sm text-gray-700">
+                  This is item 5b23946b-05c3-4e20-81d2-3a2cd8836522
+                </li>
+                <li class="sm:items-baseline sm:justify-between sm:flex">
+                  This is item b8889163-1b40-4f1e-8602-b50e3554fa82
+                </li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+        <li class="bg-white">
+          <ol class="text-gray-200">
+            <li class="sm:items-center sm:flex">
+              <ol class="text-sm">
+                <li class="w-8 h-8 rounded-full">
+                  This is item 5813df3f-67b8-42ad-9940-c4e72ab9077a
+                </li>
+                <li
+                  class="inline-flex px-1 border-b-2 border-transparent hover:text-gray-700 items-center pt-1 font-medium hover:border-gray-300 text-sm text-gray-500"
+                >
+                  This is item d5b742ac-97bd-4e57-b0d4-65f6371f27ef
+                </li>
+                <li class="col-start-8 row-span-full w-8">
+                  This is item 1d32bc11-41a6-439b-9231-fc3dbd55ebcd
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="lg:max-w-4xl max-w-2xl lg:px-0 mx-auto px-4"
+              >
+                This is link 2453be29-0759-43ca-a80d-6218376ded5f
+              </a>
+              <ol
+                class="bg-white bg-opacity-75 font-medium inline-flex sm:hover:bg-opacity-50 px-4 text-opacity-75 border rounded-md py-2 text-sm sm:bg-opacity-25 text-black items-center border-transparent"
+              >
+                <li class="sr-only">This is item 5467e9de-481d-4427-bf96-21b69ecb0702</li>
+                <li
+                  class="focus:outline-none flex-col max-w-xs w-full flex bg-white relative flex-1"
+                >
+                  This is item b8e42792-6876-4a13-9311-c8f3621478a5
+                </li>
+                <li
+                  class="pl-2 border-transparent flex bg-none text-gray-700 focus:border-transparent pr-5 focus:outline-none focus:ring-0 group-hover:text-gray-800 py-0.5 font-medium text-sm rounded-md items-center"
+                >
+                  This is item c2e09ff4-945e-45b0-9729-190d272322da
+                </li>
+                <li class="h-6 w-6">This is item 564507ad-8cc8-40d1-ae33-9cacaaeca1f1</li>
+                <li class="text-gray-900 font-medium">
+                  This is item eb277196-6a61-44ff-8caf-c20fd0f4281b
+                </li>
+              </ol>
+              <img
+                class="focus:ring-2 text-gray-400 focus:ring-offset-2 hover:text-gray-500 bg-white focus:outline-none rounded-md inline-flex focus:ring-indigo-500"
+                alt="Profile picture of user 9aac5adb-ddd1-47f9-87c4-7004b29cb1f1"
+                src="https://example.org/pictures/58c95da2-0b11-42da-b173-dfb61c92b283"
+              />
+            </li>
+            <li class="max-w-2xl mx-auto lg:px-0 px-4 lg:max-w-none">
+              <ul class="text-sm text-gray-500 whitespace-nowrap flex-shrink-0">
+                <li class="object-center w-full object-cover h-full">
+                  This is item 0ba3007e-dad0-4510-9bf6-1cc142283ea8
+                </li>
+                <li class="hover:bg-gray-100 focus:z-10 text-gray-400 py-1.5 bg-gray-50">
+                  This is item b6e71161-e922-44fe-8a10-d2d9f6be8344
+                </li>
+              </ul>
+              <ol class="text-gray-600">
+                <li class="mr-4 flex-shrink-0">
+                  This is item 323670ab-6780-4a25-a1af-378926293081
+                </li>
+                <li class="text-sm">This is item 1eec22df-6fd6-4c86-b417-8f4683f3a969</li>
+                <li class="text-indigo-300 group-hover:text-white">
+                  This is item 825ca49f-589c-4b97-bf02-5f4edee7b3c4
+                </li>
+              </ol>
+              <a
+                href="#"
+                rel="noreferrer"
+                class="text-left cursor-auto text-lg text-gray-500 w-full font-medium py-6"
+              >
+                This is link adfc3c22-efe1-4c16-8fe3-17267aa07e7f
+              </a>
+              <ol class="mt-1">
+                <li class="w-6 h-6">This is item 136caf51-9340-4b93-ad61-dba2f5a4c6c0</li>
+                <li class="items-center flex rounded-full h-7 w-7 justify-center mx-auto">
+                  This is item 8aed2aa5-bef5-4f88-be8f-8629c46a0c07
+                </li>
+              </ol>
+            </li>
+            <li class="mt-1 text-gray-500 text-sm">
+              <ol class="mt-4 text-gray-900 font-semibold">
+                <li
+                  class="rounded-md w-full border shadow-sm px-3 border-gray-300 py-2 sm:text-sm mt-1 focus:ring-gray-900 focus:border-gray-900 block focus:outline-none"
+                >
+                  This is item a15f4d46-a55a-44d7-a4f4-2fa3311e3028
+                </li>
+                <li class="min-w-0 flex-1">This is item a2446b4e-47c5-42ab-9827-dfb04c7fea38</li>
+                <li class="flex font-medium hover:text-gray-800 items-center text-sm text-gray-700">
+                  This is item c35eae4f-7f90-4c5e-985d-da93b98f97c2
+                </li>
+                <li class="overflow-hidden absolute inset-0">
+                  This is item f4961c8e-7d54-4f97-8e4d-887ee496cf5d
+                </li>
+              </ol>
+              <a href="#" class="bg-gray-100">
+                This is link fc7f315c-2827-42c1-aaec-981a64040dfe
+              </a>
+              <img
+                class="w-6 h-6"
+                alt="Profile picture of user 9e400cbb-01ee-4f8c-96b3-e1703a95612f"
+                src="https://example.org/pictures/cb362651-8cac-496f-9a2c-23960a9805e9"
+              />
+            </li>
+            <li class="flex-col flex-1 flex justify-end">
+              <a href="#" class="space-y-6 mt-6">
+                This is link 060007bf-65ff-446b-bd2a-712538b318e5
+              </a>
+              <ul class="sm:col-span-2">
+                <li class="mt-2">This is item f84cf1f7-1875-4d23-8980-dd8dcf5a2ffd</li>
+                <li class="relative mt-20">This is item ed01e20a-4e98-401a-a057-1ba5442a454d</li>
+                <li class="xl:col-span-1 space-y-8">
+                  This is item 1ff84e80-ad9a-405b-a255-8d004d908d10
+                </li>
+                <li class="text-gray-700 py-2 text-sm px-4 block">
+                  This is item 16d64dab-15e5-4143-8737-ce12060aee17
+                </li>
+              </ul>
+              <ul class="border-gray-200 border-t">
+                <li class="md:mt-0 mt-12">This is item a8bf6c28-c727-4377-ae04-e85d2d91c0b0</li>
+                <li class="pl-4 w-1/4">This is item 9cbb3e55-f9c6-40db-a17c-963c31073806</li>
+                <li class="sm:ml-6 flex-1 flex-col flex ml-4">
+                  This is item d913a2a7-dcbe-45b2-ab11-6475de76eb7e
+                </li>
+                <li class="sm:not-sr-only sr-only text-left text-sm text-gray-500">
+                  This is item 76f0258f-d0ac-4303-9049-76bcab5974c1
+                </li>
+                <li class="inset-0 absolute">This is item 9429b060-d901-4d1b-831b-d175cfbc62c0</li>
+              </ul>
+              <ol class="bg-white p-8 items-center justify-center flex">
+                <li class="text-base text-warm-gray-200 font-medium">
+                  This is item 8894dcea-5326-4d85-9e76-8134ea2f779b
+                </li>
+                <li class="block text-gray-700 font-medium text-sm">
+                  This is item ddfdb4d2-e754-485c-9106-5430116227e9
+                </li>
+              </ol>
+            </li>
+            <li class="sm:py-32 max-w-2xl mx-auto lg:px-8 px-4 sm:px-6 py-24 lg:max-w-7xl">
+              <ul class="max-w-3xl">
+                <li class="-ml-1 w-6 flex-shrink-0 h-6 mr-3">
+                  This is item 0a1f9df5-bf6f-48d3-858a-655766f9b593
+                </li>
+                <li class="font-medium text-gray-500 text-base hover:text-gray-900">
+                  This is item d247cd63-387d-4886-b8f1-8e325d7c8805
+                </li>
+                <li
+                  class="sm:block rounded-none sm:text-sm rounded-l-md hidden w-full focus:border-indigo-500 border-gray-300 focus:ring-indigo-500 pl-10"
+                >
+                  This is item 9893749f-3bb2-455a-ba49-1562840fe599
+                </li>
+                <li
+                  class="hover:bg-gray-100 hover:text-gray-800 block px-3 font-medium text-gray-900 text-base rounded-md py-2"
+                >
+                  This is item a46433ec-55e9-4e61-b08e-97e881fd4d4c
+                </li>
+              </ul>
+              <a
+                href="#"
+                class="focus:ring-2 p-2 -mr-1 rounded-md flex hover:bg-indigo-500 focus:ring-white focus:outline-none"
+              >
+                This is link 8dcf8de6-3aae-48cb-9ac9-854e6f3f762d
+              </a>
+              <img
+                class="font-medium text-gray-900 text-lg"
+                alt="Profile picture of user e45be800-b792-4389-935b-94eb6ef77b88"
+                src="https://example.org/pictures/01a964c2-6b8c-4b8c-9a58-efe1cd88fbec"
+              />
+              <a href="#" rel="noreferrer" class="text-gray-500 mt-6 text-sm">
+                This is link db68407c-90d6-4fba-b9cc-4b500f6abb72
+              </a>
+            </li>
+          </ol>
+          <ol class="hover:text-indigo-500 text-indigo-600 font-medium">
+            <li class="flex lg:flex-row flex-col mt-6">
+              <ol class="mt-3 flex sm:mt-0 sm:ml-4">
+                <li class="w-8 rounded-full h-8">
+                  This is item e23bfb73-7c53-4c20-9272-9eddac5b1eb2
+                </li>
+                <li class="h-8 block w-auto">This is item f7c0fec6-2908-44ae-9ecb-17c3b34c0b06</li>
+              </ol>
+              <ol class="text-cyan-600 text-lg font-semibold">
+                <li class="hover:bg-gray-100 bg-white text-gray-900 py-1.5 focus:z-10">
+                  This is item 52e95eab-0179-41d6-a05e-dedd8ecf2b7f
+                </li>
+                <li class="mt-1">This is item 6b71818e-b6fe-4afe-b147-d5fc44c330ba</li>
+                <li
+                  class="hidden xl:block group-hover:text-indigo-600 flex-none ml-3 text-gray-500"
+                >
+                  This is item 8712b5a4-e6f1-4ffa-8da4-e1eb32b0b3bc
+                </li>
+                <li class="lg:justify-end lg:items-center lg:space-x-6 lg:flex hidden lg:flex-1">
+                  This is item 70b43fc6-cc02-47c4-99dd-573b2003fa10
+                </li>
+              </ol>
+              <ul class="sm:hidden">
+                <li class="p-2 text-gray-400 hover:text-gray-500">
+                  This is item 9f08ad1f-7c5a-46be-ba13-75a99b23184b
+                </li>
+                <li class="bg-gray-900">This is item 78429ef9-0157-415b-af5c-948aa223d484</li>
+                <li class="sr-only">This is item 5765c708-ee5c-4695-ad7c-61bd07a599af</li>
+                <li class="pb-6 pt-5 px-5">This is item 1389803c-5043-4936-80bb-88d0fd6240bd</li>
+                <li class="text-left inline-block relative">
+                  This is item 825d5e55-cc34-4431-ba1c-298977a5520d
+                </li>
+              </ul>
+            </li>
+            <li
+              class="flex-col flex text-xs bg-blue-50 inset-1 leading-5 absolute rounded-lg group p-2 hover:bg-blue-100 overflow-y-auto"
+            >
+              <ol class="py-2 px-4 block text-sm">
+                <li
+                  class="sm:text-sm focus:border-indigo-500 shadow-sm w-full border-gray-300 focus:ring-indigo-500 block rounded-md"
+                >
+                  This is item fb8d394d-68a4-43fe-b00f-2a6d32bfa2d2
+                </li>
+                <li class="border-t divide-y border-b divide-gray-200 border-gray-200">
+                  This is item 5b4fb812-14da-495d-81be-bc76f52deefd
+                </li>
+                <li class="sm:px-6 px-4 py-6">This is item 105a4a77-4ef5-46cb-bebd-678111d26631</li>
+                <li class="pointer-events-auto max-w-md w-screen">
+                  This is item 12931611-03c7-492b-b52c-efca42592600
+                </li>
+                <li
+                  class="sm:space-y-0 mx-auto justify-start items-center sm:flex-row max-w-3xl space-y-4 flex-col sm:items-end flex sm:justify-around"
+                >
+                  This is item 23acf155-a467-4b83-9beb-6f61e617887d
+                </li>
+              </ol>
+              <a href="#" rel="noreferrer" class="text-indigo-600">
+                This is link 433081d7-06a0-487d-95de-bcea62310c88
+              </a>
+            </li>
+          </ol>
+        </li>
+        <li
+          class="rounded-r-md border-gray-300 items-center border-l-0 pr-3 focus:relative md:px-2 md:w-9 text-gray-400 bg-white flex md:hover:bg-gray-50 hover:text-gray-500 border pl-4 py-2 justify-center"
+        >
+          <img
+            class="mt-px flex relative"
+            alt="Profile picture of user f8a6675f-0d50-45a9-98fe-f84a763f0fd9"
+            src="https://example.org/pictures/146753ee-1148-4407-9ce5-ec579643c13f"
+          />
+          <ul class="block text-white">
+            <li class="object-center object-cover group-hover:opacity-75">
+              <ol class="text-warm-gray-500 text-sm">
+                <li
+                  class="ring-black rounded-lg ring-1 shadow-lg overflow-hidden ring-opacity-5 bg-white"
+                >
+                  This is item 4edfc0f2-be48-48cb-bda7-54f1bc38a2cb
+                </li>
+                <li class="font-medium">This is item c9225386-0bdc-4916-8ed8-17dde429dc9a</li>
+                <li class="lg:block rounded-3xl absolute hidden overflow-hidden inset-0">
+                  This is item f143c8d3-0205-4962-b455-b43571b9a593
+                </li>
+                <li class="grid gap-y-8">This is item ff35553c-d3cc-4fee-bd54-3bfa5e803822</li>
+              </ol>
+            </li>
+            <li class="text-gray-900 font-medium text-base">
+              <ul class="bg-opacity-25 bg-black">
+                <li class="z-40 lg:hidden relative">
+                  This is item c1d2769f-f4fc-4f58-8c5e-474a12741d7a
+                </li>
+                <li class="sm:px-6 px-4 lg:px-8 mx-auto py-16 max-w-7xl">
+                  This is item 229c3677-c8d6-40c9-bfdb-8bd793390aea
+                </li>
+              </ul>
+              <ol class="lg:px-8 px-2 max-w-7xl mx-auto sm:px-4">
+                <li class="relative ml-3">This is item 97049a8f-b905-4310-ae15-60fc4e0a24e6</li>
+                <li class="sm:inline hidden">This is item 4602fca0-535a-4d8e-b931-12fa3d3cb588</li>
+                <li class="block">This is item a23469ca-cbb7-4f90-8257-d91f60f35856</li>
+                <li class="w-full h-full object-center object-cover">
+                  This is item a2cc1674-6132-46df-9e37-a903741952af
+                </li>
+              </ol>
+              <ol class="text-gray-500 text-sm mt-1">
+                <li class="mx-auto relative lg:grid-cols-2 lg:px-8 max-w-7xl lg:grid">
+                  This is item f2d4e4dc-c8c1-4160-ae8f-369304e281cb
+                </li>
+                <li class="font-bold tracking-tight text-gray-900 leading-tight text-3xl">
+                  This is item a797b5e7-22dc-4f8e-8339-93433062c0a5
+                </li>
+              </ol>
+              <ul class="lg:z-10 lg:relative lg:ml-4 lg:flex hidden lg:items-center">
+                <li class="text-gray-500">This is item 843063f7-4ac1-4bc1-8404-3ea954430efb</li>
+                <li class="inset-0 md:p-20 fixed z-10 overflow-y-auto p-4 sm:p-6">
+                  This is item fe7f4882-767c-4577-a9b3-0a301ce87f55
+                </li>
+                <li class="overflow-hidden absolute inset-0">
+                  This is item 08768d62-5b08-46e8-a352-906e22614ea4
+                </li>
+              </ul>
+            </li>
+            <li class="gap-y-8 grid">
+              <a href="#" class="text-3xl sm:text-4xl text-gray-900 tracking-tight font-bold">
+                This is link efef93ac-c91f-4848-ab50-52f9cd2390dc
+              </a>
+              <ul class="space-y-6 mt-6">
+                <li class="rounded-md mt-8 inline-flex shadow">
+                  This is item fd518bad-0c90-42a8-b5d4-b109892310cf
+                </li>
+                <li class="ml-3">This is item c5279e23-48bd-423d-8373-652e22a1ceae</li>
+                <li class="py-8 bg-white px-4">
+                  This is item da69af84-15a5-45da-9be2-dd83d41e3890
+                </li>
+              </ul>
+              <ul class="absolute inset-0 z-10">
+                <li class="sr-only">This is item f8454342-de20-44ef-82d4-67405bf52279</li>
+                <li class="space-y-4">This is item eadb097a-a49e-456e-866b-e9294be447b9</li>
+                <li class="py-20 border-gray-200 border-t">
+                  This is item eee50dfc-7bc5-4eb3-9e07-7c2def0291cf
+                </li>
+              </ul>
+            </li>
+            <li class="bg-white">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-sm text-gray-900 font-medium"
+              >
+                This is link 72c48bb3-665a-47dc-a724-4a58eb316182
+              </a>
+              <img
+                class="w-7 flex mx-auto rounded-full h-7 items-center justify-center"
+                alt="Profile picture of user 56190809-8655-40fc-9796-a69de7755e56"
+                src="https://example.org/pictures/117a2198-d941-4bdc-90a5-ff0a913294d8"
+              />
+              <ul
+                class="z-20 text-right text-xs sticky text-gray-400 -mt-2.5 left-0 leading-5 w-14 pr-2 -ml-14"
+              >
+                <li class="bg-gray-50 text-gray-400 focus:z-10 py-1.5 hover:bg-gray-100">
+                  This is item 0130e52f-bae1-4378-b349-1f171e2b6a12
+                </li>
+                <li class="w-9 h-9 inline-block rounded-full">
+                  This is item 14579923-68e2-4f38-a467-9406afc562cd
+                </li>
+                <li class="mt-1">This is item 14b2a269-b6de-4c63-b632-e610d0c4377a</li>
+                <li class="px-4 flow-root sm:px-0 mt-6 sm:mt-10">
+                  This is item 0ab9da94-2772-4445-8f38-ebc2bfe6b719
+                </li>
+                <li class="mt-1">This is item ef187746-f640-4430-8538-d5a7f4ccbbf4</li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="absolute md:mt-0 -mt-72 sm:-mt-32 inset-0">
+            <li class="w-7 justify-center mx-auto items-center h-7 flex rounded-full">
+              <ol class="text-gray-900">
+                <li class="font-medium hover:text-gray-700 text-base text-gray-900">
+                  This is item 7d863aa3-3c42-4cea-8bfd-3727b1732500
+                </li>
+                <li class="flex items-center relative min-w-0 flex-1">
+                  This is item 2e5ed598-8235-47f1-a25b-ebddc473262f
+                </li>
+                <li class="h-6 w-6">This is item bac9381b-d0a7-42ed-a7d9-62d339e99de3</li>
+              </ol>
+            </li>
+            <li class="text-sm">
+              <img
+                class="mt-4 sm:mt-6"
+                alt="Profile picture of user 13ee422c-ee54-4e6e-aaf9-09f9c32f29f4"
+                src="https://example.org/pictures/0dc1ec48-0165-430b-877f-4358dd588cce"
+              />
+              <a href="#" rel="noreferrer" class="text-gray-900 font-medium">
+                This is link 9e259fd8-71a4-4b00-9b70-b353fb86342e
+              </a>
+            </li>
+            <li
+              class="focus:ring-indigo-500 focus:outline-none focus:ring-offset-2 px-4 items-center hover:bg-indigo-700 font-medium focus:ring-2 rounded-md border shadow-sm bg-indigo-600 border-transparent sm:w-auto text-white inline-flex text-sm justify-center py-2"
+            >
+              <ol
+                class="xl:flex overflow-y-auto border-gray-200 flex-shrink-0 relative xl:flex-col border-l w-96 hidden"
+              >
+                <li
+                  class="flex lg:px-8 h-10 sm:px-6 items-center max-w-7xl px-4 justify-between mx-auto"
+                >
+                  This is item 72de1fc8-2c72-42c1-9df2-86f9d091b812
+                </li>
+                <li class="ml-2">This is item 0718a588-e493-4d3a-9164-22eecbac6361</li>
+              </ol>
+              <img
+                class="lg:px-8 px-4 sm:px-6 mx-auto max-w-7xl"
+                alt="Profile picture of user 9e5c63aa-d2a7-4b8e-8bc0-f1da09b8ea0d"
+                src="https://example.org/pictures/4a960c26-4a37-4dd2-a62b-70283cd4abaa"
+              />
+            </li>
+            <li class="text-indigo-600 hover:text-indigo-500">
+              <ol
+                class="shadow-lg ring-black divide-y ring-1 origin-top-right focus:outline-none overflow-hidden w-36 z-10 bg-white rounded-md right-0 divide-gray-100 absolute ring-opacity-5 mt-3"
+              >
+                <li class="text-blue-500">This is item d330ab08-2049-43e3-b5b6-438e442240be</li>
+                <li class="overflow-y-auto mt-5 flex-1 h-0">
+                  This is item 7c9a11b3-e1a6-4f58-85cc-d1dd89f9dda4
+                </li>
+                <li class="border-gray-200 border-b">
+                  This is item 92b399f1-6b83-41c9-8b9f-1e68b97614aa
+                </li>
+                <li class="mt-16 sm:mt-24">This is item dbe4d232-41b5-4acd-b5ce-f3488baa582e</li>
+                <li class="hover:text-purple-500 text-purple-600">
+                  This is item 5a340e20-3c38-4781-98cf-d9c915950b42
+                </li>
+              </ol>
+              <ul class="w-6 h-6">
+                <li class="text-purple-600 border-purple-600 bg-purple-50">
+                  This is item 59b9d368-0f29-48ea-8ea9-754bd6577575
+                </li>
+                <li class="mt-6 grid grid-cols-3 gap-3">
+                  This is item 4e001101-9716-4ac8-955a-6797ee72b2c5
+                </li>
+              </ul>
+              <ol class="bg-gray-100">
+                <li class="text-right leading-5 text-gray-400 -mt-2.5 -ml-14 w-14 pr-2 text-xs">
+                  This is item 2d8d6b81-a5df-495c-a4d2-add24a2f36fe
+                </li>
+                <li class="-ml-0.5 w-4 h-4 mr-2">
+                  This is item 5b908588-6f88-41cd-831b-4f980267cf9a
+                </li>
+              </ol>
+              <ol class="sr-only">
+                <li class="py-6">This is item 5e446ea1-e21d-40cf-8618-09db19dea1d2</li>
+                <li class="sr-only">This is item 880ac8a6-a3ec-42c0-9687-03334343a3f6</li>
+                <li class="text-gray-500">This is item 11fb3678-dfc8-47bb-8f8d-10952b482227</li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <div class="bg-black inset-0 fixed bg-opacity-25">
+        <span class="text-gray-600 mt-3 text-lg max-w-3xl">
+          This is text 84a258b5-b9ca-4b73-bc0f-eb41c7b40e15
+        </span>
+        <input type="text" class="w-5 mr-3 h-5 text-gray-400 group-hover:text-gray-500" />
+        <nav class="mx-auto sm:max-w-3xl max-w-md">
+          <ul class="hover:text-gray-100 text-white text-sm font-medium">
+            <li class="text-lg mt-4 max-w-3xl text-indigo-100">
+              <ol class="text-sm text-gray-900 font-medium">
+                <li class="divide-gray-200 divide-y">
+                  This is item b5ee9d09-592b-4ba4-a46b-5df1df108e71
+                </li>
+                <li class="sr-only">This is item 88c32072-b044-4015-925a-4b7b3511aac0</li>
+                <li class="items-center flex px-4 flex-shrink-0">
+                  This is item ff30f5e1-9953-46d9-9a20-e39a2d03beaf
+                </li>
+                <li class="border-gray-300 focus:ring-indigo-500 rounded text-indigo-600 h-4 w-4">
+                  This is item 3e7b8983-ae85-4363-84f2-5be56c3680f1
+                </li>
+              </ol>
+              <a href="#" target="_blank" class="sr-only">
+                This is link a7f60156-f69f-4a18-ad9b-9b63b6eb365e
+              </a>
+            </li>
+            <li class="divide-gray-200 divide-y">
+              <a
+                href="#"
+                rel="noreferrer"
+                class="font-medium focus-within:ring-indigo-500 focus-within:ring-2 hover:text-indigo-500 cursor-pointer text-indigo-600 bg-white relative rounded-md focus-within:ring-offset-2 focus-within:outline-none"
+              >
+                This is link 1fdde066-2f9a-4548-a48a-61f03914bfe8
+              </a>
+            </li>
+            <li class="text-white text-sm font-medium">
+              <ul class="text-gray-700 text-sm block font-medium">
+                <li class="text-center">This is item 12a3c597-2d5d-4f14-9950-d869baf722bc</li>
+                <li class="text-gray-500">This is item 35ef3208-4884-417e-830f-7d287da85bd0</li>
+              </ul>
+              <ol class="md:items-center md:flex md:justify-between">
+                <li class="mt-4 space-y-4">This is item de289923-c7b7-49ca-b468-ac835f4c6a24</li>
+                <li class="mx-auto flex w-7 h-7 rounded-full items-center justify-center">
+                  This is item da227884-781e-4785-ad6b-d800cdbf988a
+                </li>
+                <li class="text-gray-900 font-medium">
+                  This is item 89cce9f4-89e9-4473-8330-484dffe8810c
+                </li>
+                <li class="sr-only">This is item 82e250a1-7392-46ab-8498-276a55ed3f34</li>
+                <li class="pb-3 px-2 space-y-1 pt-2">
+                  This is item cd0739b0-168c-4ef6-9d77-1f272fac0bca
+                </li>
+              </ol>
+              <ul class="sr-only">
+                <li class="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-end">
+                  This is item 1b61efe3-3ca4-42e3-be4c-dbf2a8c5b2b3
+                </li>
+                <li
+                  class="hover:border-gray-300 text-gray-600 text-base block font-medium py-2 pl-3 pr-4 hover:bg-gray-50 hover:text-gray-800 border-l-4 border-transparent"
+                >
+                  This is item 6dcdcf5a-0e72-47d0-b0b8-229a007b7978
+                </li>
+                <li class="leading-6 text-white font-medium text-lg">
+                  This is item 9514cc3c-52de-4cd5-9b24-fb950b73a94b
+                </li>
+                <li class="text-gray-900 text-sm font-medium">
+                  This is item 01bbf92e-3135-48b4-9a94-ce1c4e841580
+                </li>
+                <li class="md:grid-cols-2 lg:px-8 max-w-7xl mx-auto md:px-6 md:grid">
+                  This is item 3c435ea7-38bd-427a-b143-ed89d69c5407
+                </li>
+              </ul>
+            </li>
+            <li class="flex w-7 mx-auto rounded-full h-7 justify-center items-center">
+              <a href="#" rel="noreferrer" class="border-t py-6 border-gray-200 px-4">
+                This is link 7470b276-fc78-4442-9d5a-a540943a4617
+              </a>
+              <ol class="sr-only">
+                <li class="text-gray-500 text-sm hidden py-3.5 lg:table-cell px-3">
+                  This is item f67439f6-9ddd-44e5-b3ab-8b0001708ce6
+                </li>
+                <li class="justify-between py-2 flex items-center">
+                  This is item 57c9b1ab-b835-45e4-96e3-b698aa1405ba
+                </li>
+              </ol>
+            </li>
+            <li class="space-x-4 flex items-center">
+              <img
+                class="text-gray-700 block py-2 px-4 text-sm"
+                alt="Profile picture of user 2b82d5a5-0aef-4b19-90a8-d87d34068107"
+                src="https://example.org/pictures/8d6290d6-1ce9-47c9-b3c7-22c8266adff3"
+              />
+              <ul class="h-12">
+                <li class="flex group">This is item 6d9546e0-7be9-4199-a11f-6eb23baf3347</li>
+                <li class="flex-1 overflow-y-auto min-w-0 h-full flex-col lg:order-last flex">
+                  This is item b7a8e68f-2f9b-4a18-a33e-a55f72577970
+                </li>
+                <li class="max-w-7xl bg-indigo-600 lg:bg-transparent mx-auto lg:px-8">
+                  This is item c98de165-2884-4c37-9e7a-021bd541ca32
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+        <span class="flex-shrink-0"> This is text e1ba7431-52ae-49b1-9f0a-608fcc1e27ce </span>
+        <nav class="flex-col items-center pt-2 flex pb-3">
+          <ul class="flex justify-between">
+            <li class="text-sm mt-6 text-gray-500">
+              <img
+                class="text-base text-blue-gray-900 font-medium"
+                alt="Profile picture of user c8a94343-193f-40e5-866b-060a18d2ca25"
+                src="https://example.org/pictures/1e9f4394-0b1e-44eb-9ff9-0cd4fe69fc4a"
+              />
+              <img
+                class="leading-8 text-sm text-gray-500"
+                alt="Profile picture of user 96591b8f-2dda-49fd-8d17-b5363f8f1c8b"
+                src="https://example.org/pictures/9aeb70af-dfdb-4667-9250-ffe26052d1a8"
+              />
+              <img
+                class="sr-only"
+                alt="Profile picture of user e3134dc7-5533-4e81-b189-54256f238b1b"
+                src="https://example.org/pictures/8a053c42-fcc1-4d48-b76b-f37f6363d200"
+              />
+              <ul class="flex">
+                <li class="gap-y-10 pt-10 items-start pb-12 gap-x-8 grid grid-cols-2">
+                  This is item ef5e24ca-5786-4167-88a4-b1b253f208fa
+                </li>
+                <li class="space-x-3 flex justify-between">
+                  This is item a5a9a2d4-4195-4fc1-b0a9-a54f9b4f33b6
+                </li>
+              </ul>
+            </li>
+            <li class="text-sm text-gray-600 mt-2">
+              <img
+                class="bg-white py-8"
+                alt="Profile picture of user 03158920-927d-44bb-a489-b6e98854b694"
+                src="https://example.org/pictures/337c3c8a-ea95-44dc-94de-0682fed7c36e"
+              />
+              <a
+                href="#"
+                rel="noreferrer"
+                class="text-sm text-gray-900 px-2 whitespace-nowrap font-semibold text-left py-3.5"
+              >
+                This is link e94df71d-63d9-4926-adfe-353e7b674083
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <p class="border-gray-200 border-t px-4 sm:px-6 py-5">
+        This is paragraph a4c8ae07-7ae6-46b8-83a6-0c896ffa3cd3
+      </p>
+    </main>
+    <ul class="truncate font-medium block ml-3">
+      <li class="absolute inset-0">
+        <ol class="font-medium text-gray-900 text-sm">
+          <li class="hover:text-gray-800 items-center flex text-gray-700">
+            <img
+              class="text-base text-gray-800 font-medium"
+              alt="Profile picture of user ae3e0f95-40ad-4c41-a11f-e9875a5fb886"
+              src="https://example.org/pictures/21a56904-8306-4b81-b9ee-345bcb74b6bc"
+            />
+          </li>
+          <li class="bg-white h-full w-1/2 absolute rounded-lg right-0">
+            <ol class="mx-auto items-center justify-center h-7 w-7 flex rounded-full">
+              <li
+                class="absolute transform origin-top-right transition inset-x-0 md:hidden p-2 top-0"
+              >
+                <ol class="w-auto h-8"></ol>
+                <ol class="border-2 flex-shrink-0 inline-flex border-white rounded-full"></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="items-center flex mt-2">
+                  This is link 27cd7dce-95f0-480a-9be4-8585d5643e8d
+                </a>
+                <img
+                  class="pt-1 sm:pt-3 top-0 sm:pl-3 bg-white md:hidden pl-1 sticky z-10"
+                  alt="Profile picture of user 643b3297-43a3-4ea5-b9e9-3c297a0cfa67"
+                  src="https://example.org/pictures/fd36e0dc-6c18-4750-8fe7-20da9fc0d466"
+                />
+              </li>
+              <li class="left-0 bg-white top-0 hidden w-1/2 lg:block h-full fixed">
+                <img
+                  class="col-span-full"
+                  alt="Profile picture of user 6c3692f0-a69e-43ef-a1cb-6ac349a641a9"
+                  src="https://example.org/pictures/92674a2a-0ad3-475d-948a-18a8b25e8f39"
+                />
+                <img
+                  class="flex"
+                  alt="Profile picture of user 1dcb93c4-23ff-47ff-a388-ca5d05342ad0"
+                  src="https://example.org/pictures/a65f1c41-fe3f-44a4-8505-cec9f19f50f9"
+                />
+                <a href="#" class="font-medium text-base text-gray-900">
+                  This is link fccfe3b6-f8ea-4143-8656-079019ce460c
+                </a>
+                <ul class="text-gray-900 font-semibold"></ul>
+              </li>
+              <li class="group-hover:text-gray-800 text-gray-700 text-sm ml-2 font-medium">
+                <a href="#" target="_blank" class="md:hidden -mr-2 -my-2">
+                  This is link a5a49a6c-0349-4049-a4a4-f1b38090f900
+                </a>
+                <img
+                  class="hidden w-auto lg:block h-8"
+                  alt="Profile picture of user adbca627-7328-4994-9dcd-34f0adbf7dab"
+                  src="https://example.org/pictures/c383a55a-6c95-438d-892c-a6f854b3c58d"
+                />
+                <ul class="hover:text-gray-600 text-gray-500"></ul>
+              </li>
+              <li class="border-gray-100 border-t py-10 text-center">
+                <ol class="items-center flex pb-3 flex-col pt-2"></ol>
+                <img
+                  class="mx-auto sm:px-2 lg:px-8 max-w-7xl"
+                  alt="Profile picture of user 99b95835-43de-454e-9be2-6f9601241831"
+                  src="https://example.org/pictures/af0498da-967f-4cb7-9ff4-dabc0a44a3f5"
+                />
+                <img
+                  class="inline-flex rounded-md bg-yellow-100 font-medium text-sm items-center text-yellow-800 px-2.5 py-0.5"
+                  alt="Profile picture of user f0f937c3-3bda-45f9-a062-54a113a9d816"
+                  src="https://example.org/pictures/88b01792-f6d6-4a2d-8728-5285fb8dafc2"
+                />
+              </li>
+            </ol>
+            <a
+              href="#"
+              target="_blank"
+              rel="noreferrer"
+              class="py-4 whitespace-nowrap pr-3 text-sm pl-4 sm:pl-6"
+            >
+              This is link 92786316-89cf-4959-b303-9c6076878070
+            </a>
+            <ul class="mt-1">
+              <li class="mt-6">
+                <img
+                  class="px-4 space-x-8 -mb-px flex"
+                  alt="Profile picture of user bf5c33b3-dad8-442e-a818-7790e1a6857c"
+                  src="https://example.org/pictures/2ebc2c98-1878-44bc-b36b-6c4429f2ccfc"
+                />
+                <img
+                  class="-ml-1 h-5 mr-2 w-5"
+                  alt="Profile picture of user beedc40c-cc84-417c-8fb4-eaff2bf0e911"
+                  src="https://example.org/pictures/41f8ff42-5eb2-4df1-b08e-cc5e3ac1df38"
+                />
+                <ul class="sm:items-center sm:flex"></ul>
+                <img
+                  class="max-w-7xl sm:px-6 lg:px-8 mx-auto px-4"
+                  alt="Profile picture of user e91c2f1c-22b1-46ee-9a1f-fe03198b3339"
+                  src="https://example.org/pictures/73878a05-e52d-4052-b4e2-3a3621d3568a"
+                />
+              </li>
+              <li
+                class="border-gray-200 px-6 justify-between items-center border-b flex-none flex py-4"
+              >
+                <ul class="text-gray-300 hover:bg-gray-700 hover:text-white"></ul>
+              </li>
+            </ul>
+            <a href="#" rel="noreferrer" class="md:hidden -mr-2 flex">
+              This is link dbbb22de-abef-4512-8f27-49164c199a50
+            </a>
+          </li>
+          <li class="h-5 w-5">
+            <ol class="font-medium text-gray-900">
+              <li
+                class="text-left border cursor-default border-gray-300 focus:ring-1 shadow-sm py-2 sm:text-sm rounded-md focus:outline-none w-full pl-3 focus:ring-indigo-500 relative focus:border-indigo-500 bg-white pr-10"
+              >
+                <img
+                  class="items-center flex h-7 justify-center rounded-full mx-auto w-7"
+                  alt="Profile picture of user d9f38022-84fd-4fab-a3be-45c7cff8b5b5"
+                  src="https://example.org/pictures/8b1ca3c4-1dfd-451a-af3f-70ce23f73b2b"
+                />
+                <ul
+                  class="text-gray-800 focus:ring-0 placeholder-gray-400 pr-4 sm:text-sm pl-11 bg-transparent w-full border-0 h-12"
+                ></ul>
+                <ul class="-my-2 -mx-4 overflow-x-auto lg:-mx-8 sm:-mx-6"></ul>
+                <img
+                  class="border-indigo-700 relative shadow-sm focus:outline-none focus:ring-white font-medium px-6 whitespace-nowrap focus:ring-offset-indigo-700 rounded-md py-2 hover:bg-indigo-50 text-sm focus:z-10 focus:ring-2 bg-white text-indigo-700 focus:ring-offset-2"
+                  alt="Profile picture of user 5a6effca-9a7f-4509-b518-406c420038e7"
+                  src="https://example.org/pictures/642a313a-7e62-4ec9-84fe-3d1b21b27b06"
+                />
+              </li>
+              <li class="font-medium text-base text-gray-900">
+                <ul class="text-gray-700 group-hover:text-gray-900 text-sm font-medium"></ul>
+                <img
+                  class="text-white focus-within:text-gray-600 relative"
+                  alt="Profile picture of user b3ae283d-1bad-48b9-9c7c-50eac8c12fd4"
+                  src="https://example.org/pictures/ae026c66-7aa5-42dd-8131-f04f766a6d96"
+                />
+                <img
+                  class="absolute inset-0"
+                  alt="Profile picture of user 1061960f-3b0d-494d-b8b4-997938ab7b92"
+                  src="https://example.org/pictures/94d1b6d7-656b-4169-95d2-206f6a1ad1f9"
+                />
+              </li>
+              <li
+                class="focus:outline-none focus:ring-2 bg-gray-50 rounded-md text-base inline-flex focus:ring-offset-2 font-medium hover:text-gray-900 items-center focus:ring-cyan-500 group"
+              >
+                <ul
+                  class="text-gray-400 hover:bg-gray-100 focus:z-10 bg-gray-50 py-1.5 rounded-br-lg"
+                ></ul>
+                <ul class="pt-4 justify-between items-center px-5 flex"></ul>
+                <ol class="flex pt-4 md:pt-0 justify-between md:block"></ol>
+                <ul class="justify-between flex"></ul>
+              </li>
+              <li class="inline">
+                <ul class="lg:py-24"></ul>
+              </li>
+            </ol>
+            <a href="#" target="_blank" class="sr-only">
+              This is link cfdeef7f-5ae3-40fe-ad47-7dee18e59e3e
+            </a>
+            <ol class="max-w-3xl">
+              <li
+                class="aspect-w-1 overflow-hidden rounded-md bg-gray-100 group relative aspect-h-1"
+              >
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="aspect-w-3 rounded-lg aspect-h-2 overflow-hidden"
+                >
+                  This is link 2bc4c988-daa9-4b87-842f-ce6a35c484b2
+                </a>
+                <ul class="sr-only"></ul>
+                <ul class="block font-medium text-gray-700 text-sm"></ul>
+              </li>
+              <li class="w-5 text-green-500 flex-shrink-0 h-5">
+                <img
+                  class="text-sm text-gray-900 truncate font-medium"
+                  alt="Profile picture of user 53186a9a-9ccc-48eb-8f9a-af34518dd337"
+                  src="https://example.org/pictures/d08b8ff8-ad57-4c25-a9dc-69e22131aee8"
+                />
+              </li>
+              <li
+                class="sm:px-6 xl:px-24 lg:px-20 flex-1 py-12 justify-center flex-col px-4 flex lg:flex-none"
+              >
+                <ul class="font-medium mt-2 text-cyan-100 text-base"></ul>
+                <img
+                  class="sm:rounded-lg bg-gray-50 overflow-hidden"
+                  alt="Profile picture of user 35e90455-f43b-41af-8acf-dcc231b0e9c0"
+                  src="https://example.org/pictures/f7b0ceab-e1d7-4754-990a-36ec2df44db3"
+                />
+                <a href="#" target="_blank" class="mt-5">
+                  This is link 02845584-5b17-4731-8517-f2f62e76b1a0
+                </a>
+              </li>
+              <li
+                class="text-gray-500 hover:border-gray-300 border-transparent hover:text-gray-700"
+              >
+                <ol class="font-medium text-gray-900"></ol>
+                <img
+                  class="rounded-full h-8 w-8"
+                  alt="Profile picture of user 484d8133-75a1-44e2-9c68-8f377969958c"
+                  src="https://example.org/pictures/a87d6313-b92d-4fe8-aa08-040d1f055c3d"
+                />
+                <img
+                  class="pt-6 pb-5 space-y-6"
+                  alt="Profile picture of user 7ee6bbd1-a01e-4014-977d-6592fbd9ee58"
+                  src="https://example.org/pictures/8fcd3e1f-1379-4283-b448-5f4e5332f518"
+                />
+                <ul class="ring-1 ring-black ring-opacity-5"></ul>
+              </li>
+              <li class="py-16 mx-auto max-w-2xl px-4 sm:px-6 space-y-16">
+                <img
+                  class="gap-x-6 lg:gap-x-8 gap-y-10 mt-16 sm:gap-y-16 grid grid-cols-1 sm:grid-cols-2"
+                  alt="Profile picture of user 24f6aa73-7900-4799-9394-ef21ada8b63e"
+                  src="https://example.org/pictures/dd1fd1cc-fec4-4f53-9c37-aaa3994014e8"
+                />
+                <a href="#" target="_blank" class="col-span-6 sm:col-span-3">
+                  This is link d0f3b72d-f1c7-401a-af00-15f7696a63ba
+                </a>
+                <ol class="absolute inset-0 overflow-hidden"></ol>
+              </li>
+            </ol>
+            <img
+              class="focus:ring-offset-2 items-center bg-indigo-600 hover:text-white focus:outline-none text-indigo-200 hover:bg-indigo-500 focus:ring-white rounded-md focus:ring-offset-indigo-600 justify-center p-2 inline-flex focus:ring-2 hover:bg-opacity-75"
+              alt="Profile picture of user ba7f6558-245f-47be-bb14-c9d976a73c0b"
+              src="https://example.org/pictures/2c4679fa-4012-44ed-9493-295c3c9befb2"
+            />
+          </li>
+          <li class="relative mt-6">
+            <ol class="font-medium text-gray-900">
+              <li
+                class="py-20 grid sm:gap-y-0 gap-8 sm:grid-cols-2 grid-cols-2 border-gray-200 lg:grid-cols-4 border-t"
+              >
+                <ul class="w-full object-cover h-full object-center"></ul>
+                <ul class="-m-2 flex group items-center p-2"></ul>
+                <img
+                  class="text-base hover:text-gray-800 px-4 text-gray-500 py-2 hover:bg-gray-100 block font-medium"
+                  alt="Profile picture of user 7cabb746-88bc-4735-a62e-11a457886f98"
+                  src="https://example.org/pictures/d1cc89b7-145d-44be-bf3b-c1d1ea065c7d"
+                />
+              </li>
+              <li class="mt-6 space-y-1 w-full px-2 flex-1">
+                <ol
+                  class="border-gray-200 text-gray-900 pb-6 space-y-4 text-sm border-b font-medium"
+                ></ol>
+              </li>
+              <li
+                class="rounded-xl bg-gray-900 divide-y divide-gray-500 transition-all overflow-hidden shadow-2xl mx-auto max-w-2xl divide-opacity-20 transform"
+              >
+                <ul class="min-w-0 text-sm flex-1"></ul>
+                <a href="#" target="_blank" class="mt-2">
+                  This is link ebb1edb4-1a04-40fe-a156-1b964ff97103
+                </a>
+                <ol
+                  class="pt-5 flex-col bg-white flex-grow flex overflow-y-auto border-gray-200 pb-4 border-r"
+                ></ol>
+                <ul class="text-gray-400 font-medium text-sm"></ul>
+              </li>
+            </ol>
+            <a href="#" target="_blank" class="py-1.5 focus:z-10 hover:bg-gray-100 bg-white">
+              This is link 297e2f13-a0ee-471f-bb7c-f6912a6e0e0d
+            </a>
+            <ul class="self-center flex flex-shrink-0">
+              <li class="md:grid-cols-2 md:grid md:gap-8">
+                <ul class="sr-only"></ul>
+              </li>
+              <li class="py-10 sm:px-6 lg:hidden px-4">
+                <ul class="h-12"></ul>
+                <ul class="text-gray-900 font-medium"></ul>
+                <a
+                  href="#"
+                  class="hover:text-indigo-500 font-semibold block text-sm text-indigo-600"
+                >
+                  This is link fecc4d04-24a1-4940-84f4-464e9ce20a92
+                </a>
+              </li>
+            </ul>
+            <img
+              class="mt-1"
+              alt="Profile picture of user fde632d5-f880-463a-a717-f6085126e4fd"
+              src="https://example.org/pictures/6b6042d6-a626-41dd-83d4-ad816b2f1051"
+            />
+          </li>
+          <li class="p-2 hover:text-gray-500 ml-2 text-gray-400">
+            <ul class="text-left py-6 cursor-auto text-lg font-medium text-gray-500 w-full">
+              <li class="sr-only">
+                <img
+                  class="flex w-full lg:ml-0"
+                  alt="Profile picture of user 2b2903fc-b372-4901-977f-159ffaeec234"
+                  src="https://example.org/pictures/95794bba-d18e-408f-8c00-521fac431a82"
+                />
+              </li>
+              <li class="flex items-center justify-center rounded-full h-7 w-7 mx-auto">
+                <a
+                  href="#"
+                  class="border rounded-md text-white focus:outline-none text-sm font-medium shadow-sm border-transparent focus:ring-offset-2 focus:ring-indigo-500 bg-indigo-600 px-4 focus:ring-2 py-2 inline-flex hover:bg-indigo-700 justify-center"
+                >
+                  This is link ecbe0534-42cf-45da-9dbc-e33826a19479
+                </a>
+                <ol class="p-6"></ol>
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="bg-gray-50 h-full lg:block top-0 hidden right-0 fixed w-1/2"
+                >
+                  This is link 3abda5e2-bb94-4167-a3ca-ba827a9fc5f8
+                </a>
+              </li>
+            </ul>
+            <a href="#" target="_blank" rel="noreferrer" class="flex">
+              This is link 91d15136-68b9-426b-9c5b-9679287e3439
+            </a>
+          </li>
+        </ol>
+        <a
+          href="#"
+          target="_blank"
+          rel="noreferrer"
+          class="mx-auto text-gray-500 max-w-3xl text-base mt-4"
+        >
+          This is link b62123d6-07df-46c0-bcb7-9209047686fe
+        </a>
+      </li>
+      <li class="font-sans">
+        <ol class="block text-sm px-4 py-2">
+          <li class="text-gray-700 text-sm">
+            <ul class="text-5xl order-1 text-white font-bold tracking-tight">
+              <li class="text-base text-gray-900">
+                <img
+                  class="md:grid-cols-2 md:gap-8 md:grid"
+                  alt="Profile picture of user 1fb5b39c-5a95-40db-8742-09c91262c64b"
+                  src="https://example.org/pictures/6509f22a-93e3-4a9f-a11a-eca27593f986"
+                />
+              </li>
+              <li class="lg:max-w-7xl mx-auto max-w-2xl sm:px-6 lg:px-8 sm:py-24 px-4 py-16">
+                <img
+                  class="text-sm ml-2 font-medium text-gray-700 group-hover:text-gray-800"
+                  alt="Profile picture of user b7ce6147-7331-4574-ac81-5d6fa60095a6"
+                  src="https://example.org/pictures/90df90e1-d9a3-44ff-a251-fde1e01394f3"
+                />
+                <img
+                  class="max-w-7xl px-4 lg:px-8 sm:px-6 mx-auto"
+                  alt="Profile picture of user 9ff6a41f-e896-4e6d-afff-40cdd763246a"
+                  src="https://example.org/pictures/8c4f53cc-e06c-4568-b486-f066590292db"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  class="h-5 left-4 w-5 pointer-events-none absolute top-3.5 text-gray-400"
+                >
+                  This is link a5e29306-d37f-40b1-92d3-db4805bc3970
+                </a>
+              </li>
+              <li class="border-gray-200 border-t py-2">
+                <a href="#" rel="noreferrer" class="opacity-50 absolute inset-0 bg-gray-900">
+                  This is link df4a274e-2a00-43a4-ae1f-76963285a015
+                </a>
+                <ol class="sm:ml-4 text-sm flex sm:text-right sm:flex-col mt-2 sm:mt-0"></ol>
+              </li>
+              <li class="mx-auto rounded-full h-7 flex justify-center w-7 items-center">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="w-4 focus:ring-indigo-500 text-indigo-600 border-gray-300 h-4"
+                >
+                  This is link f7746178-cd0e-4234-ab29-7d7e7aee589b
+                </a>
+                <ol class="h-full w-5 right-0 md:block absolute hidden top-0"></ol>
+                <img
+                  class="bg-gray-600 py-2 border rounded-md focus:outline-none items-center font-medium text-sm hover:bg-gray-700 focus:ring-indigo-500 shadow-sm focus:ring-offset-gray-800 text-white inline-flex border-transparent focus:ring-offset-2 focus:ring-2 px-4"
+                  alt="Profile picture of user b80440fd-1f99-4193-830d-644da77f1a10"
+                  src="https://example.org/pictures/f338e22f-bdbc-443e-8a66-c9f97b8a96b2"
+                />
+              </li>
+            </ul>
+          </li>
+          <li class="flow-root">
+            <a href="#" target="_blank" rel="noreferrer" class="ml-4 flex-shrink-0">
+              This is link 48dca3d3-e814-457a-972c-bf752d175120
+            </a>
+            <ol class="p-2 flex items-center -m-2">
+              <li class="sr-only">
+                <ul
+                  class="py-2 items-center shadow-sm text-white focus:ring-2 rounded-md bg-indigo-600 justify-center font-medium inline-flex sm:w-auto border focus:ring-indigo-500 focus:outline-none border-transparent hover:bg-indigo-700 text-sm px-4 focus:ring-offset-2"
+                ></ul>
+                <img
+                  class="pl-4 w-1/4 -mt-px"
+                  alt="Profile picture of user 0b6ccc0b-5095-4e69-b327-178551e036c0"
+                  src="https://example.org/pictures/26d1e85c-a77e-4c80-9630-ff475565b6bf"
+                />
+                <a href="#" target="_blank" rel="noreferrer" class="min-w-0 flex-1">
+                  This is link ed2a52a4-60b4-40e9-9c01-9caba3eecc5a
+                </a>
+              </li>
+              <li class="flex items-start">
+                <img
+                  class="flex"
+                  alt="Profile picture of user 7d15d706-410a-4b26-b92b-40c27d22aa49"
+                  src="https://example.org/pictures/29497da7-1aa3-4c24-a5ae-8a2604347dea"
+                />
+                <img
+                  class="text-gray-500 text-base"
+                  alt="Profile picture of user 25eaaa28-0b5a-4417-b2e1-4714abe044ad"
+                  src="https://example.org/pictures/f4d6567a-dbdd-4c47-9ac7-49f90384197e"
+                />
+                <a href="#" target="_blank" class="font-medium block text-gray-700 text-sm">
+                  This is link 857e7795-2a3e-4edf-af3a-813b0a811064
+                </a>
+                <a href="#" class="divide-y divide-gray-200">
+                  This is link 1eb79a37-92f2-4464-bce9-edc060344fde
+                </a>
+              </li>
+              <li class="inline-block text-left relative">
+                <a href="#" target="_blank" rel="noreferrer" class="bg-gray-900">
+                  This is link 42ae9428-5f5b-4017-9915-f37621c4a7da
+                </a>
+              </li>
+              <li class="border-4 h-96 rounded-lg border-dashed border-gray-200">
+                <ul class="bg-white focus:z-10 hover:bg-gray-100 py-1.5"></ul>
+                <ul class="sm:grid sm:grid-cols-3 sm:py-5 sm:gap-4 py-4"></ul>
+              </li>
+              <li class="h-6 w-6">
+                <ul class="-mr-1 ml-2 h-5 w-5 text-gray-400"></ul>
+                <img
+                  class="w-7 flex h-7 justify-center mx-auto rounded-full items-center"
+                  alt="Profile picture of user 04b77d94-8375-43f9-8c81-05f41098eb73"
+                  src="https://example.org/pictures/422d6302-6a02-4f98-90e2-2888d9093bd7"
+                />
+                <ul class="xl:p-12 lg:col-span-2 px-6 py-10 sm:px-10"></ul>
+              </li>
+            </ol>
+            <a
+              href="#"
+              rel="noreferrer"
+              class="inline-block bg-green-400 h-2 flex-shrink-0 rounded-full w-2"
+            >
+              This is link ae2e10da-b8bd-4fd9-b546-081682bf9d6e
+            </a>
+            <ul class="font-medium text-gray-900">
+              <li class="flex items-start">
+                <ul class="h-6 text-gray-400 flex-shrink-0 group-hover:text-gray-500 w-6"></ul>
+                <ol class="mt-2 text-indigo-600"></ol>
+              </li>
+              <li class="mt-3 text-xl text-white">
+                <ul class="w-6 h-6"></ul>
+                <ul
+                  class="py-2 block text-warm-gray-900 hover:bg-warm-gray-50 font-medium text-base rounded-md px-3"
+                ></ul>
+                <ul class="text-gray-700 text-sm px-4 block py-2"></ul>
+              </li>
+            </ul>
+          </li>
+          <li
+            class="sm:text-sm rounded-md focus:ring-indigo-500 shadow-sm border-gray-300 block focus:border-indigo-500 w-full"
+          >
+            <ol class="mt-3 px-2 space-y-1">
+              <li class="w-5 h-5 text-green-500 flex-shrink-0">
+                <img
+                  class="border-gray-200 border-b"
+                  alt="Profile picture of user 26e88cf8-2e13-4cdc-839f-9e763ee2891a"
+                  src="https://example.org/pictures/db6b242e-6829-448f-a070-b3683dcc8f02"
+                />
+                <ol
+                  class="px-3 uppercase py-3 border rounded-md sm:flex-1 items-center text-sm font-medium justify-center flex"
+                ></ol>
+                <img
+                  class="text-sm px-3 whitespace-nowrap text-gray-500 py-4"
+                  alt="Profile picture of user 9ff9db61-9d4a-40d5-899e-4e2a7c44101d"
+                  src="https://example.org/pictures/b2f2458e-82c0-4374-b846-06433d8c9e2d"
+                />
+                <img
+                  class="text-sm font-bold"
+                  alt="Profile picture of user 586a2ae3-8883-446f-8475-28d3a3006c89"
+                  src="https://example.org/pictures/3cc519b1-582b-4da7-91b8-e14e2f6db833"
+                />
+              </li>
+              <li class="text-gray-900 font-bold text-3xl tracking-tight">
+                <img
+                  class="mt-auto pt-10 space-y-1"
+                  alt="Profile picture of user 1633f08e-82e7-418a-a2e2-2710d442d3a1"
+                  src="https://example.org/pictures/32526a11-e358-4a9c-b479-8a2833f7d140"
+                />
+                <ul class="-mr-2 items-center flex lg:hidden"></ul>
+              </li>
+              <li
+                class="bg-white hover:bg-gray-50 relative font-medium items-center rounded-md inline-flex border-gray-300 py-2 border text-gray-700 ml-3 text-sm px-4"
+              >
+                <ol class="flex py-4"></ol>
+                <a href="#" rel="noreferrer" class="focus:z-10 hover:bg-gray-100 bg-white py-1.5">
+                  This is link 1df5ddd7-29d6-429d-96e1-98241bcd460e
+                </a>
+                <img
+                  class="items-center flex"
+                  alt="Profile picture of user db8a0c48-058a-4858-8aba-1513656e7a6d"
+                  src="https://example.org/pictures/350e0748-e3dc-4493-958e-b25584d0d153"
+                />
+              </li>
+            </ol>
+            <ol class="relative w-full">
+              <li class="mt-10">
+                <img
+                  class="sr-only"
+                  alt="Profile picture of user b16f37ee-caf4-4333-9f10-89d9ef15c9ac"
+                  src="https://example.org/pictures/a0f8b6c9-c4d7-4a8f-99ba-cf3b20731ef4"
+                />
+                <ol class="space-x-8 flex -mb-px"></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                  This is link 326de4ea-05ee-4bf7-902c-4847fa847694
+                </a>
+              </li>
+              <li class="mt-1">
+                <ul class="w-10 text-sm ml-3 text-right text-gray-900 tabular-nums"></ul>
+                <ul class="pt-2 items-center flex flex-col pb-3"></ul>
+              </li>
+              <li
+                class="border-transparent py-3 w-full hover:bg-gray-100 font-medium mt-8 block border text-base text-gray-900 px-8 bg-white sm:w-auto rounded-md"
+              >
+                <ol class="sm:overflow-hidden shadow sm:rounded-md"></ol>
+              </li>
+              <li class="w-7 items-center justify-center flex mx-auto rounded-full h-7">
+                <a href="#" target="_blank" rel="noreferrer" class="w-px bg-gray-300 ml-6 h-6">
+                  This is link dc7de644-4b92-4c93-8823-06d591ae81bd
+                </a>
+                <ol class="relative"></ol>
+              </li>
+              <li class="flex-shrink-0 ml-4">
+                <a
+                  href="#"
+                  target="_blank"
+                  class="whitespace-nowrap hover:text-indigo-500 text-indigo-600"
+                >
+                  This is link f1bdb958-2f9b-4e65-a343-0c13b8679f8e
+                </a>
+                <a href="#" class="sr-only"> This is link 2e5503d0-67eb-489f-be44-4898b4918d22 </a>
+                <a href="#" class="mt-1 text-gray-500 text-sm">
+                  This is link 8386922f-f80f-405a-af11-62d6d6abf1e7
+                </a>
+                <ul class="h-5 w-5"></ul>
+              </li>
+            </ol>
+            <img
+              class="shadow bg-white sm:rounded-lg"
+              alt="Profile picture of user dcc95a9e-10b6-41b7-ae93-9b3b6293bf4c"
+              src="https://example.org/pictures/1a0cb5e8-b1f0-479b-ae3b-16b993d847ae"
+            />
+          </li>
+          <li class="text-gray-500 mt-2">
+            <ul class="px-4 flex-shrink-0 flex items-center">
+              <li class="col-span-3 sm:col-span-2">
+                <img
+                  class="absolute origin-top right-0 focus:outline-none ring-opacity-5 ring-black shadow-lg mt-1 bg-white divide-y z-10 divide-gray-200 ring-1 mx-3 rounded-md left-0"
+                  alt="Profile picture of user 1ee0f4e3-a0de-4f63-95eb-9ae9c50765b4"
+                  src="https://example.org/pictures/03c2ad8e-3828-4d52-beac-35be56249c9c"
+                />
+                <ol class="text-gray-500 text-sm"></ol>
+                <ul class="max-w-lg mx-auto"></ul>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="text-gray-900 focus:ring-0 pr-4 placeholder-gray-500 h-12 pl-11 w-full sm:text-sm border-0 bg-transparent"
+                >
+                  This is link bcc036c1-966f-41b6-a625-4679a756c6f5
+                </a>
+              </li>
+              <li class="text-sm">
+                <ul class="h-5 w-5 flex-shrink-0"></ul>
+                <img
+                  class="sm:ml-4 sm:flex-shrink-0 mt-3 sm:mt-0"
+                  alt="Profile picture of user d1fb6445-4205-49fe-b720-b487872f2e5e"
+                  src="https://example.org/pictures/9f0ff155-f7eb-4c44-a033-e8ee2ca39187"
+                />
+                <a href="#" class="grid text-sm gap-x-4 grid-cols-2 mt-16 text-gray-600">
+                  This is link ad54cabf-1e62-4153-8302-5044dfd50853
+                </a>
+              </li>
+              <li class="pt-10">
+                <ol
+                  class="px-3 text-xs tracking-wide py-3 font-medium uppercase text-left text-gray-500"
+                ></ol>
+                <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                  This is link 8e1c7a41-e844-4507-b723-3afc622eb14f
+                </a>
+                <a href="#" target="_blank" rel="noreferrer" class="text-sm mt-1 text-gray-900">
+                  This is link 5a6beffe-31c5-42ed-88f7-650248004f57
+                </a>
+              </li>
+              <li class="flex relative justify-between items-center">
+                <a
+                  href="#"
+                  target="_blank"
+                  class="flex h-7 justify-center items-center rounded-full mx-auto w-7"
+                >
+                  This is link 078e79c4-eb97-432f-af4c-e865282f4617
+                </a>
+                <a
+                  href="#"
+                  target="_blank"
+                  class="focus:ring-indigo-500 font-medium ml-6 shadow-sm border focus:ring-offset-2 focus:outline-none px-4 rounded-md border-transparent bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-2 text-sm py-2"
+                >
+                  This is link a7baa57f-3894-4831-8d61-79e7b12dd7be
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ol>
+        <img
+          class="h-6 w-6"
+          alt="Profile picture of user 8153f1b3-1ebe-4d22-96c9-ea43f3de8bf9"
+          src="https://example.org/pictures/821ccdab-c8a8-4f6d-83ab-2258ef12d85f"
+        />
+        <ul class="mx-auto max-w-7xl">
+          <li class="flex-none text-gray-400 text-xs font-semibold ml-3">
+            <ul class="py-8 border-t border-gray-200 mt-12">
+              <li class="justify-center mx-auto w-7 rounded-full h-7 flex items-center">
+                <a href="#" target="_blank" class="ml-4">
+                  This is link 8c98f75f-d5ec-40f7-b2c7-907a04a7c194
+                </a>
+                <ol class="flex-col flex"></ol>
+                <a href="#" target="_blank" class="font-medium text-sm">
+                  This is link fc5fb059-7c32-4909-8d08-ae6448dc25cb
+                </a>
+              </li>
+              <li class="text-gray-500 mt-3">
+                <ol
+                  class="border text-gray-700 rounded-md py-2 focus:outline-none sm:px-8 whitespace-nowrap sm:w-auto font-medium focus:ring-indigo-500 ml-0.5 relative text-sm border-transparent focus:ring-2 w-1/2 focus:z-10"
+                ></ol>
+                <ul class="gap-x-8 grid-cols-3 row-start-1 grid gap-y-10 text-sm"></ul>
+                <img
+                  class="flex relative"
+                  alt="Profile picture of user 662848aa-2677-4b46-ab5c-a58afbabe010"
+                  src="https://example.org/pictures/3660fe07-4705-4429-9f0b-992bf82de90b"
+                />
+              </li>
+              <li class="hidden lg:flex lg:items-center lg:space-x-6">
+                <img
+                  class="mx-auto lg:px-8 sm:px-6 px-4 max-w-7xl py-12"
+                  alt="Profile picture of user 02605c69-6985-497d-af4b-db6b9ba28f91"
+                  src="https://example.org/pictures/086f903d-5015-4d12-a32d-76c543c2fa56"
+                />
+                <ul class="mt-12 space-y-10"></ul>
+                <ol class="mt-1"></ol>
+              </li>
+              <li
+                class="sm:gap-y-0 grid-cols-1 lg:gap-x-8 sm:gap-x-6 mt-6 sm:grid-cols-3 gap-y-10 grid"
+              >
+                <a href="#" target="_blank" rel="noreferrer" class="text-gray-600">
+                  This is link a9e5d22f-3e3f-40d8-8495-2beeaf8a57cf
+                </a>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="text-base text-gray-400 md:mt-0 mt-8 md:order-1"
+                >
+                  This is link d057c5e7-c7c9-408d-aaf1-8212df13db4c
+                </a>
+              </li>
+              <li class="min-h-full">
+                <ol class="w-5 text-yellow-400 h-5"></ol>
+              </li>
+            </ul>
+            <img
+              class="bg-gray-100 rounded-lg"
+              alt="Profile picture of user 2bc9cad3-9023-4c0b-b3b9-50e18e84094b"
+              src="https://example.org/pictures/911a7f5f-ae75-4164-a69c-07c0917674d1"
+            />
+          </li>
+          <li class="md:px-8 min-w-0 lg:px-0 xl:col-span-6 flex-1">
+            <img
+              class="lg:max-w-7xl lg:flex lg:py-32 mx-auto lg:px-8 py-24 lg:items-center px-4 sm:px-6 max-w-md sm:max-w-3xl"
+              alt="Profile picture of user 1876ab89-f2af-4f93-bb9d-43016c505fff"
+              src="https://example.org/pictures/bbdaf721-25b1-49a9-9524-f5f63e4e7eed"
+            />
+            <img
+              class="h-5 flex-shrink-0 w-5"
+              alt="Profile picture of user d9247ba2-2391-408d-beec-41fa88df9428"
+              src="https://example.org/pictures/d26e8d90-6483-4f00-ae71-649702bb1a1f"
+            />
+            <img
+              class="ml-4 items-center md:ml-6 flex"
+              alt="Profile picture of user f8002fc2-f1c4-4564-8e69-00b7699b4b78"
+              src="https://example.org/pictures/91e5a555-f334-4095-94cf-e1d987fc5408"
+            />
+          </li>
+          <li class="min-w-0 text-sm flex-1">
+            <img
+              class="text-gray-500 text-sm"
+              alt="Profile picture of user 2849e315-7d0c-4921-a0e6-63f38de77610"
+              src="https://example.org/pictures/c5028c01-fee7-424c-ad3a-63f3e7b406f9"
+            />
+            <ol class="shadow-xl ring-black/10 bg-white rounded-3xl flex ring-1 flex-col">
+              <li class="lg:flex-1 flex lg:min-w-0">
+                <ul class="mt-1"></ul>
+                <ul
+                  class="focus:ring-2 text-gray-500 focus:ring-purple-500 border-gray-200 border-r focus:outline-none focus:ring-inset lg:hidden px-4"
+                ></ul>
+                <ol
+                  class="bg-gray-50 focus:z-10 py-2 hover:bg-gray-100 flex-col text-gray-500 h-14 px-3 flex"
+                ></ol>
+                <ol class="h-6 w-6"></ol>
+              </li>
+              <li class="sm:col-span-3 lg:col-span-2 col-span-6">
+                <img
+                  class="h-8 w-auto"
+                  alt="Profile picture of user 5d3fee38-f6eb-4a04-ad10-dc56f102fabc"
+                  src="https://example.org/pictures/93c6a598-b07e-4211-adfe-ce88676024cf"
+                />
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="xl:col-span-2 lg:block lg:col-span-3 hidden"
+                >
+                  This is link 4bc5ea3f-ddb2-48e5-92ee-3006be5e6dda
+                </a>
+                <ul class="inset-x-0 absolute top-full"></ul>
+              </li>
+              <li class="flex-auto space-y-1">
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="text-gray-400 -m-2 rounded-md inline-flex justify-center p-2 items-center"
+                >
+                  This is link ba1d4e84-f974-4b53-a54a-78d72322ba7d
+                </a>
+                <ol class="group-hover:text-gray-500 h-5 w-5 text-gray-400"></ol>
+                <ul class="flex-shrink-0 text-gray-400 mr-1.5 h-5 w-5"></ul>
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="px-3 py-2 rounded-md font-medium block text-base"
+                >
+                  This is link 80688e63-2b2e-47f0-9f80-cf62702670bc
+                </a>
+              </li>
+              <li class="pointer-events-none inset-y-0 absolute items-center left-0 flex pl-3">
+                <a
+                  href="#"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="hover:text-gray-900 hover:bg-gray-50 text-gray-900"
+                >
+                  This is link 8c231a81-de67-4513-aaf6-f1f7fab02f79
+                </a>
+                <ol class="fixed inset-0 overflow-y-auto z-10"></ol>
+              </li>
+              <li class="text-indigo-600 hover:text-indigo-900">
+                <ol class="items-center h-7 flex mx-auto justify-center w-7 rounded-full"></ol>
+                <ol class="hover:text-gray-500 sm:ml-7 -m-2 text-gray-400 ml-5 p-2"></ol>
+                <ul class="py-6"></ul>
+                <ol class="-m-2 p-2 block text-gray-900 font-medium"></ol>
+              </li>
+            </ol>
+          </li>
+          <li class="h-6 w-6">
+            <img
+              class="w-7 justify-center items-center flex mx-auto h-7 rounded-full"
+              alt="Profile picture of user c10306b9-9cae-44d4-9f6a-da2c1af266f8"
+              src="https://example.org/pictures/e48c1be2-e5a0-41d0-8afe-91e10fd6fc71"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </section>
+  <main class="mt-1">
+    <h3 class="flex-auto">This is heading 4fb53825-6907-4a33-9e20-578e1029c887</h3>
+    <button type="button">This is action a69f0fd9-ad4f-4409-b5d6-6874eba70fb0</button>
+    <input type="text" class="px-4 absolute inset-0 sm:px-6" />
+    <div class="h-7 rounded-full items-center mx-auto flex justify-center w-7">
+      <section class="lg:border-0 'border-t-0  loop.last '' {{ ? rounded-b-md' : }}">
+        <button type="button">This is action 05e3d6b0-4cd5-4cd6-88f9-d4aaf2aa4e83</button>
+        <h3
+          class="pl-3 hover:border-gray-300 hover:bg-gray-50 py-2 pr-4 border-l-4 border-transparent block text-base font-medium text-gray-500 hover:text-gray-700"
+        >
+          This is heading 3634d4e3-8751-4f22-93b4-da67eebb3b05
+        </h3>
+        <button type="button">This is action cd706340-5758-4a14-a6c6-967ea481834a</button>
+        <input type="text" class="-mx-4 mt-2 text-gray-700 text-sm" />
+        <main class="mt-10">
+          <select class="text-indigo-100 hover:text-white hover:bg-indigo-800">
+            <option>This is item 678d840f-8352-4e93-abbc-4f6706a0e61e</option>
+            <option value="1bf15b22-78fd-4bc8-a539-926908dd4a43">
+              This is item 9e626858-7113-4ea5-9fc8-5053c703a942
+            </option>
+            <option>This is item b0135cf8-2909-44ce-a794-3c5ca68696ba</option>
+            <option>This is item 8c37a5c4-621d-46ef-83a2-e75b791af35f</option>
+            <option value="6086a510-8fd2-4c50-9274-85ae0b0e2c2a">
+              This is item b2f24ac1-f9c1-432b-9b7e-cf0dba1f920b
+            </option>
+            <option>This is item d65e96f5-dd19-49c5-a146-f0dc4e67c230</option>
+            <option>This is item 6b3e9f56-a9db-4979-bee4-ad52846db24b</option>
+          </select>
+          <ul class="w-5 flex-none ml-3 h-5 text-gray-400 hidden">
+            <li class="items-center inset-y-0 absolute pointer-events-none left-0 flex">
+              <img
+                class="rounded-lg hover:bg-gray-400/10 px-3 -mx-3 text-gray-900 text-base font-semibold leading-6 block py-2.5"
+                alt="Profile picture of user 0760da49-1ef6-45e3-b86a-9e497aeb1406"
+                src="https://example.org/pictures/c5e4de78-54f0-43ae-bce1-20209a144980"
+              />
+            </li>
+            <li class="ml-4">
+              <ul class="bg-white overflow-hidden">
+                <li class="sr-only">This is item 11a850af-5057-4b35-b002-1f1610b399bb</li>
+                <li class="pb-6 pt-5 px-5">This is item d7e4aed6-7bd0-4a95-a202-7f35a2ca8716</li>
+                <li
+                  class="relative md:rounded-lg ring-1 overflow-hidden ring-black shadow ring-opacity-5"
+                >
+                  This is item 1b12a400-3c76-4d28-8851-8291baab9707
+                </li>
+                <li class="bg-white">This is item f7fe0f29-e000-4707-a76c-0fc3e0d0b3ee</li>
+              </ul>
+              <a
+                href="#"
+                class="w-56 ring-opacity-5 mt-2 rounded-md ring-black z-10 absolute bg-white shadow-lg focus:outline-none origin-top-right right-0 ring-1"
+              >
+                This is link 6736c917-4c2a-45fa-ae2f-9f7c71e88fb1
+              </a>
+              <a href="#" class="mr-3 w-5 text-gray-400 h-5">
+                This is link 64df8d7f-adbf-46f0-b4ce-86fd3d363e6e
+              </a>
+              <ul class="bg-white hover:bg-gray-100 focus:z-10 py-1.5">
+                <li class="flex w-full max-w-xs justify-end mx-auto">
+                  This is item d2a268db-824f-4b49-8e1f-24b7b49bbc50
+                </li>
+                <li class="mt-6 text-3xl text-center tracking-tight font-bold text-gray-900">
+                  This is item 13bd1eb2-57f2-4faa-9798-8dfa1318ee3f
+                </li>
+              </ul>
+            </li>
+            <li class="text-lg text-gray-900 font-medium">
+              <ol class="bg-white sm:gap-4 sm:grid sm:px-6 sm:grid-cols-3 py-5 px-4">
+                <li class="py-5 px-4 sm:p-6">This is item e5228bf8-2b86-4bc7-be82-7187dde8c6fd</li>
+                <li class="h-5 w-5">This is item 9d0c9ceb-1cc4-45d9-acad-d9fbad921992</li>
+                <li class="ml-3">This is item 6c7c51f5-12e9-42e8-a80d-d6e3e45ef1b2</li>
+              </ol>
+            </li>
+            <li class="w-0 -mt-px flex flex-1">
+              <img
+                class="bg-white"
+                alt="Profile picture of user cff5270b-99b5-4389-bd11-2c10d1e4de0f"
+                src="https://example.org/pictures/cfc20c79-67d6-4114-8514-7dbc0b0c3c4f"
+              />
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="sm:text-4xl text-gray-900 tracking-tight font-bold text-3xl"
+              >
+                This is link 610fbf1a-7671-4a02-a266-5ce35ac6a293
+              </a>
+              <ul class="text-xl font-semibold text-gray-900">
+                <li class="text-gray-500 ml-3">
+                  This is item 747a157c-5b06-4b7b-8e61-09aa19231d4b
+                </li>
+                <li
+                  class="focus:ring-2 bg-white focus:outline-none font-medium hover:text-gray-900 rounded-md group focus:ring-offset-2 items-center text-base inline-flex focus:ring-indigo-500"
+                >
+                  This is item 377c289f-f28e-478e-bc1c-c50e831318c7
+                </li>
+                <li
+                  class="border-gray-300 focus:ring-indigo-500 pl-3 text-left shadow-sm focus:ring-1 bg-white py-2 focus:border-indigo-500 w-full focus:outline-none border cursor-default sm:text-sm pr-10 relative rounded-md"
+                >
+                  This is item ba18cad3-c5a5-4e82-a32c-c86d24116c95
+                </li>
+                <li class="flex items-center">This is item a9b070e6-66b7-49fc-a572-a8c3d16b6d24</li>
+                <li
+                  class="items-center bg-gray-900 flex justify-center text-white font-semibold rounded-full h-8 w-8 mx-auto"
+                >
+                  This is item d0b6f91e-545b-4cfe-8c5b-4caebf2f755f
+                </li>
+              </ul>
+              <ul class="flex-shrink-0">
+                <li
+                  class="rounded-full mx-auto h-8 w-8 hover:bg-gray-200 flex text-gray-900 items-center justify-center"
+                >
+                  This is item 927c62c4-acda-4d77-9700-3ba2cc53c631
+                </li>
+                <li class="text-sm text-gray-500">
+                  This is item 1bb8b36a-adda-418d-b780-b5f3304e44f9
+                </li>
+                <li class="pr-4 w-1/4">This is item 705e24df-7063-47a7-ae0a-7e964d1f2531</li>
+                <li class="text-sm text-indigo-300">
+                  This is item 85b95bb2-d7d9-41c1-a58b-4f0f4c719368
+                </li>
+                <li class="sr-only">This is item a47f8a3f-bbb9-4bbe-ac31-bca0b588b72c</li>
+              </ul>
+            </li>
+          </ul>
+          <a href="#" rel="noreferrer" class="group-hover:text-indigo-400 w-5 h-5 text-indigo-500">
+            This is link aad5bb80-144e-421d-977d-f3d187d22b2e
+          </a>
+          <span class="p-8 bg-white"> This is text 25671534-232f-4b19-a0ef-f0b389de26a0 </span>
+        </main>
+      </section>
+      <ol class="absolute bg-white inset-0 top-1/2 shadow">
+        <li
+          class="rounded-md focus:border-indigo-500 block sm:text-sm w-full border-gray-300 shadow-sm focus:ring-indigo-500"
+        >
+          <ul class="sm:col-span-2 sm:grid-cols-2 gap-y-12 grid-cols-1 grid sm:gap-x-8">
+            <li class="sm:col-span-3">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="text-indigo-600 bg-white hover:bg-gray-100 focus:z-10 font-semibold py-1.5"
+              >
+                This is link c4163bbb-0303-48db-9070-17f8d3ff16be
+              </a>
+              <a href="#" target="_blank" rel="noreferrer" class="bg-white">
+                This is link 0ec43a25-555c-4e0e-9715-b3ba765dc91f
+              </a>
+              <a href="#" rel="noreferrer" class="text-gray-500 mt-1 text-sm">
+                This is link 12ccb757-09d9-4670-8664-8440619bf943
+              </a>
+            </li>
+            <li class="py-6 px-4 space-y-6 border-t border-gray-200">
+              <a href="#" class="bg-white left-0 top-0 w-1/2 fixed h-full">
+                This is link 2acfa02b-5cff-483c-9bcc-c6d72195c0f0
+              </a>
+              <ul class="mt-10 text-gray-900 font-bold text-sm">
+                <li class="sr-only">This is item 84c03b66-99ad-44bc-8f99-0ad19026f226</li>
+                <li
+                  class="py-3 sm:ring-0 relative sm:p-0 rounded-lg sm:bg-transparent sm:shadow-none px-4 sm:rounded-none bg-white"
+                >
+                  This is item 47886fda-b085-4a23-b8d3-e3f465174c84
+                </li>
+                <li class="max-w-7xl sm:px-6 lg:px-8 mx-auto px-4">
+                  This is item 8f265c43-4b84-4805-9359-422d232139bd
+                </li>
+                <li class="justify-between w-full items-center flex md:w-auto">
+                  This is item 31f76ff2-e5af-42c8-a1bc-8afb939f89c2
+                </li>
+              </ul>
+              <a href="#" class="hover:text-gray-700 font-medium text-gray-900 text-base">
+                This is link 1511a294-5cb3-44c1-8ae8-63bef9902ba8
+              </a>
+            </li>
+            <li class="text-gray-500 hover:text-gray-600">
+              <img
+                class="items-center hover:bg-gray-50 flex rounded-md p-3 -m-3"
+                alt="Profile picture of user 9b159b03-2457-42ba-817c-bee3a84188c3"
+                src="https://example.org/pictures/13fde8fd-b027-42ef-8377-4d78b30ab4bf"
+              />
+            </li>
+            <li class="object-center h-20 flex-none w-20 rounded-md object-cover">
+              <img
+                class="h-6 w-6"
+                alt="Profile picture of user 4618d427-092f-43e1-a54d-7d1f1eb247b6"
+                src="https://example.org/pictures/d82bc3c1-9bf1-49f3-b9a7-8a457894bc53"
+              />
+              <ol class="text-gray-500 -m-2 block p-2">
+                <li class="sm:items-baseline sm:grid-cols-3 sm:grid sm:gap-4">
+                  This is item 2343c2b1-811c-4efb-862c-ae5594bfb5c5
+                </li>
+                <li
+                  class="block rounded-md focus:border-indigo-500 border-gray-300 focus:ring-indigo-500 w-full pr-32 sm:text-sm"
+                >
+                  This is item d9fea248-a018-453a-bff8-1a00ccd6af61
+                </li>
+                <li class="text-cyan-600 font-semibold text-lg">
+                  This is item badd9f89-08c9-4db8-9f23-55cf2c9f1722
+                </li>
+              </ol>
+              <ol class="text-gray-500 text-sm mt-2">
+                <li class="bg-white">This is item 8ca8c1b8-e920-4197-b00c-9c99b4dee8c5</li>
+                <li
+                  class="sm:mt-12 mx-auto relative pb-8 mt-8 sm:px-6 px-4 lg:max-w-7xl lg:pb-0 max-w-2xl lg:px-8"
+                >
+                  This is item 2c3503d0-15b9-4568-9eaf-386e5dd12ce0
+                </li>
+                <li class="sm:text-center mt-5 text-gray-500 text-xl">
+                  This is item f69a97b4-143f-4b95-85f3-b61623633eef
+                </li>
+                <li class="text-gray-900 text-base font-medium">
+                  This is item 1874bf76-1e5c-4f49-9b0b-30dc61ad278b
+                </li>
+              </ol>
+            </li>
+          </ul>
+          <ul class="text-gray-900 hover:bg-gray-100 focus:z-10 bg-white py-1.5">
+            <li class="lg:px-8 px-4 sm:px-6">
+              <img
+                class="border-gray-200 justify-between px-6 flex border-b items-center py-4"
+                alt="Profile picture of user d780b28a-59f7-41ff-ad18-30aadfd35d44"
+                src="https://example.org/pictures/432bffe7-760e-4bac-8dc6-09418689f0c4"
+              />
+              <ul class="items-center flex">
+                <li class="group relative">This is item e2c194b0-0f42-4e46-af20-71085b154ef8</li>
+                <li class="hover:bg-gray-100 py-1.5 bg-white focus:z-10">
+                  This is item e16e778b-dd33-4467-8f36-7e6e63ea35e0
+                </li>
+                <li class="text-gray-900 font-medium">
+                  This is item 0475e277-fd09-42d7-9725-3449a1833307
+                </li>
+                <li class="items-center pointer-events-none inset-y-0 flex right-0 pr-3 absolute">
+                  This is item 4722d042-5e29-4e36-b0b0-9e43329ee693
+                </li>
+              </ul>
+              <img
+                class="w-full"
+                alt="Profile picture of user 1204c8dd-13dd-45bc-b4e3-a1e476290357"
+                src="https://example.org/pictures/a1d51bb8-caec-4acd-bd7d-8a196809399b"
+              />
+              <a href="#" class="min-h-[600px] bg-gray-300 bg-cover bg-center">
+                This is link d791afc0-cef6-4ce8-9b66-0195af5b9ea5
+              </a>
+            </li>
+            <li class="mt-6">
+              <img
+                class="mt-12 lg:grid-cols-4 lg:gap-x-8 space-y-10 sm:gap-x-6 sm:gap-y-12 sm:grid sm:space-y-0 sm:grid-cols-2"
+                alt="Profile picture of user 3dd3714c-faf1-454c-a6b9-be06b6d47192"
+                src="https://example.org/pictures/78e68832-77e2-4f89-b2c1-b34731aff112"
+              />
+              <img
+                class="w-auto h-12"
+                alt="Profile picture of user c3c148cf-3019-4254-a0c3-f73bb121caf9"
+                src="https://example.org/pictures/d734ffe8-cbe1-42df-8452-a2f096893686"
+              />
+              <img
+                class="z-10 transition-colors duration-200 ease-out -mb-px pt-px border-b-2 font-medium relative text-sm flex items-center"
+                alt="Profile picture of user 93013497-22d7-432b-be10-dc8f0a9d503b"
+                src="https://example.org/pictures/3165a802-a8bb-4adf-95ef-9172c576b3b9"
+              />
+              <a
+                href="#"
+                target="_blank"
+                class="text-white hover:text-gray-100 font-medium text-sm"
+              >
+                This is link acbc2a94-44ab-4a4b-820b-d6711bc2e374
+              </a>
+            </li>
+            <li class="hover:text-gray-800 items-center flex text-gray-700">
+              <ul class="w-6 h-6 text-white">
+                <li class="border-t border-gray-200 py-6 space-y-6 px-4">
+                  This is item 724f131c-3667-4037-b48a-54a5b11c964a
+                </li>
+                <li class="-m-3 items-start p-3 hover:bg-gray-50 rounded-lg flex">
+                  This is item fe54d9d4-550a-443c-82c4-c8f3bb683d6d
+                </li>
+              </ul>
+            </li>
+            <li class="lg:max-w-7xl px-4 lg:px-8 mx-auto sm:px-6 mt-8 max-w-2xl">
+              <ul class="items-center flex">
+                <li
+                  class="left-0 ring-black w-48 ring-1 focus:outline-none rounded-md -ml-1 py-1 ring-opacity-5 absolute shadow-lg origin-top-left z-10 bg-white mt-2"
+                >
+                  This is item 43376b98-e01a-4304-b401-88f2e8fa5774
+                </li>
+                <li class="lg:auto-rows-min lg:gap-x-8 lg:grid lg:grid-cols-12">
+                  This is item 6536af3b-cc07-4daf-8aeb-50a1c0906145
+                </li>
+                <li
+                  class="aspect-w-2 group sm:aspect-none aspect-h-1 overflow-hidden rounded-lg sm:h-full sm:relative"
+                >
+                  This is item 53f28a1e-55f1-4474-9afe-ee6d5586a79d
+                </li>
+              </ul>
+              <ul class="w-6 h-6">
+                <li class="absolute inset-0">This is item 96a607bf-bf65-48a9-a592-ac2bc08dd77b</li>
+                <li class="text-gray-200">This is item 42c30884-cc7e-46ee-9c24-cb1c60986a90</li>
+                <li class="ml-2 h-5 group-hover:text-gray-500 w-5">
+                  This is item 8aad1010-9d41-441e-89ab-01c9f652e83a
+                </li>
+              </ul>
+              <img
+                class="absolute top-0 ring-2 ring-white block h-2 rounded-full w-2 right-0 bg-red-400"
+                alt="Profile picture of user 79b71af1-baed-474f-93be-09c8e1f13b82"
+                src="https://example.org/pictures/ad7e5edc-0fe4-4253-8d65-a576eee29a6b"
+              />
+            </li>
+            <li class="truncate ml-3 flex-auto">
+              <img
+                class="bg-indigo-400 w-full text-indigo-100 sm:text-sm focus:outline-none placeholder-indigo-200 bg-opacity-25 block pl-10 border py-2 border-transparent rounded-md pr-3 focus:placeholder-gray-400 focus:bg-white focus:text-gray-900 leading-5 focus:ring-0"
+                alt="Profile picture of user 259d53d5-eb0c-440c-a235-f05e6f3534bc"
+                src="https://example.org/pictures/489a7146-77a8-43a1-b58d-d5fd25a85bd8"
+              />
+            </li>
+          </ul>
+          <ol class="rounded-md -space-y-px bg-white relative">
+            <li class="flex-1 flex space-x-4 pt-1.5 justify-between min-w-0">
+              <a
+                href="#"
+                target="_blank"
+                class="justify-center mx-auto flex rounded-full items-center w-7 h-7"
+              >
+                This is link 13d5b4f3-51fd-4a05-80dd-8138be83e9ad
+              </a>
+            </li>
+            <li
+              class="rounded-md text-white md:px-10 items-center bg-indigo-600 w-full border-transparent text-base flex border md:py-4 px-8 justify-center font-medium hover:bg-indigo-700 md:text-lg py-3"
+            >
+              <img
+                class="sm:pt-32 relative lg:px-8 max-w-2xl text-center mx-auto lg:max-w-7xl px-4 pt-16 sm:px-6"
+                alt="Profile picture of user 71252e8c-acc5-4bbd-bbf6-d756b683ce2b"
+                src="https://example.org/pictures/893daf5b-fa6b-4392-99e0-9adba8c51519"
+              />
+              <a href="#" target="_blank" rel="noreferrer" class="sr-only">
+                This is link 552d5a72-779e-4f90-be9f-3ceeadfefcfe
+              </a>
+            </li>
+            <li class="text-gray-700 font-medium text-sm block">
+              <a
+                href="#"
+                class="w-full block focus:ring-0 placeholder-gray-500 text-lg pt-2.5 border-0 font-medium"
+              >
+                This is link 1e2cd04b-6d8b-4a52-9642-e524ef12745d
+              </a>
+            </li>
+            <li class="mt-1 text-sm text-gray-500 max-w-2xl">
+              <ul class="text-gray-500 font-medium text-base">
+                <li class="inset-0 sm:px-6 px-4 absolute">
+                  This is item 8c1f2b68-ec28-4fe4-98d6-14a0303c6782
+                </li>
+                <li
+                  class="px-4 focus:ring-indigo-500 w-full appearance-none focus:border-indigo-500 text-gray-900 py-2 border-gray-300 shadow-sm min-w-0 text-base bg-white rounded-md focus:ring-1 placeholder-gray-500 focus:outline-none border"
+                >
+                  This is item 18925a0d-3a6b-440e-ad92-abace9442f78
+                </li>
+                <li class="flex items-center text-gray-500 text-sm mt-2">
+                  This is item e0cacfc3-c7d7-4558-b043-268e9ff61274
+                </li>
+                <li class="font-medium block text-gray-700 text-sm">
+                  This is item f45a2400-f08e-43cc-ae87-6a9ecf5449c5
+                </li>
+              </ul>
+              <ul class="sm:mt-1">
+                <li class="w-4 border-gray-300 focus:ring-indigo-500 text-indigo-600 h-4">
+                  This is item 9a676bff-0d21-4fa4-99c4-eb1717439e88
+                </li>
+                <li class="py-5 px-4 sm:px-6">This is item 0393f640-dfa0-453c-be34-69dbf36937b8</li>
+              </ul>
+              <ul class="items-end flex absolute p-6 inset-0 rounded-lg">
+                <li class="md:mt-0 mt-12">This is item a7f6e04b-1d75-4f01-9da9-dd664427e83f</li>
+                <li class="px-4 border-t space-y-6 py-6 border-gray-200">
+                  This is item 14757b31-bf98-4486-966c-e7ec8fba30dc
+                </li>
+                <li
+                  class="border w-full block border-gray-300 py-2 focus:border-indigo-500 mt-1 focus:ring-indigo-500 sm:text-sm rounded-md shadow-sm px-3 focus:outline-none"
+                >
+                  This is item c5fc3f2b-2466-4396-bd5d-b39271bd4716
+                </li>
+              </ul>
+            </li>
+          </ol>
+        </li>
+        <li class="font-medium text-gray-500">
+          <ul class="hidden space-x-10 md:flex">
+            <li
+              class="h-12 focus:ring-inset focus:ring-2 items-center text-gray-500 focus:outline-none hover:text-gray-900 focus:ring-indigo-500 -ml-0.5 rounded-md inline-flex w-12 -mt-0.5 justify-center"
+            >
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="w-12 relative sm:px-8 px-6 sm:w-16"
+              >
+                This is link 119c7166-7bd5-4f2e-b7ec-fa2e4c53e767
+              </a>
+              <img
+                class="px-3 py-2 relative bg-white"
+                alt="Profile picture of user 333f26b7-d1cb-4402-944c-dd7be7d3d9dc"
+                src="https://example.org/pictures/4171b1d7-17df-4d31-ac2c-fd0b15888e15"
+              />
+            </li>
+            <li class="justify-center h-7 w-7 flex items-center mx-auto rounded-full">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="flex justify-between py-3 items-center"
+              >
+                This is link ed91656c-96f4-4e3a-ada4-1a513888719a
+              </a>
+              <a href="#" target="_blank" class="px-4 cursor-default py-2 select-none">
+                This is link 4bc92104-93d5-4f7e-88a4-e0584dcb4345
+              </a>
+              <img
+                class="bg-indigo-600 relative"
+                alt="Profile picture of user 34add149-1730-4cb2-93e0-acd328fadf66"
+                src="https://example.org/pictures/8a6fbf33-7a6c-43d0-a767-6ca98e2c0483"
+              />
+              <ul class="mt-1 text-sm text-gray-500">
+                <li class="group-hover:text-blue-700 text-blue-500">
+                  This is item 7cc696f1-21da-4a95-ad52-658475251c5a
+                </li>
+                <li class="text-sm">This is item 8789c10f-1d81-4412-b03c-609ef4aa9770</li>
+                <li class="py-2 bg-white">This is item 1c80f7d3-fd7c-42a3-80a5-bf981d635a4a</li>
+                <li class="h-10 inline-block rounded-full w-10">
+                  This is item bb2108f6-fc60-4c1b-a0b2-5edc3b80e91a
+                </li>
+              </ul>
+            </li>
+            <li class="rounded-full group-hover:opacity-75 h-12 w-12">
+              <img
+                class="space-y-12"
+                alt="Profile picture of user 2486f71b-e414-4230-9c59-cfccd1f61487"
+                src="https://example.org/pictures/161ae6cb-9dc3-408b-898c-e6746657c600"
+              />
+              <img
+                class="w-7 rounded-full flex items-center mx-auto justify-center h-7"
+                alt="Profile picture of user f4433d01-266b-440f-9674-c276634b47a6"
+                src="https://example.org/pictures/61ab908c-1d0a-405c-a869-1b100bcd588d"
+              />
+              <ol class="space-y-10 lg:grid lg:gap-y-10 lg:space-y-0 lg:gap-x-8 lg:grid-cols-2">
+                <li class="text-sm py-2 text-gray-700 px-4 block">
+                  This is item 877f3e3e-8b13-4edb-8c3d-dc5ceacae51a
+                </li>
+                <li
+                  class="border-r-0 px-3 bg-gray-50 border-gray-300 text-gray-500 items-center text-sm border inline-flex rounded-l-md"
+                >
+                  This is item 0ed59c3d-2b00-4413-8cb6-cb012118945e
+                </li>
+                <li
+                  class="sm:space-y-0 space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
+                >
+                  This is item 87e9edac-4b38-44b0-a961-274c43b3d893
+                </li>
+              </ol>
+              <a href="#" class="w-10 rounded-full h-10">
+                This is link 9e39855c-ae16-4f5e-af96-d7388411e738
+              </a>
+            </li>
+            <li class="text-sm">
+              <ol class="relative">
+                <li class="border-t py-2 border-gray-200">
+                  This is item b05b745e-fcb0-4546-a792-43a56d189fed
+                </li>
+                <li
+                  class="sm:gap-x-6 gap-y-12 grid-cols-1 lg:grid-cols-4 sm:grid-cols-2 grid mt-8 xl:gap-x-8"
+                >
+                  This is item b4adc084-7661-45fa-9a0a-ae6c3f5578f0
+                </li>
+                <li class="sr-only">This is item eb30e35c-8c3f-48f6-a52c-bf1b2de6f645</li>
+              </ol>
+            </li>
+          </ul>
+        </li>
+        <li class="font-medium text-gray-900">
+          <a href="#" class="h-6 w-6 text-gray-400">
+            This is link d2599ecf-b5a1-4887-af51-0a1932277ef2
+          </a>
+          <img
+            class="hover:text-gray-500 text-gray-400 ml-2 flex-shrink-0"
+            alt="Profile picture of user 08b2d468-83df-4c19-b98c-017f13473d9d"
+            src="https://example.org/pictures/7804013a-2d61-44e1-887d-43db2103ab02"
+          />
+          <ol class="md:grid-cols-2 md:grid md:space-y-0 md:gap-8 space-y-12">
+            <li class="ml-auto">
+              <img
+                class="lg:pb-28 pb-20 bg-white sm:px-6 lg:pt-24 px-4 pt-16 lg:px-8"
+                alt="Profile picture of user 6571c381-e1db-48af-8cef-3727e81795eb"
+                src="https://example.org/pictures/9545088f-f73c-49b4-abdc-b17293bd6cc8"
+              />
+              <ol class="w-full">
+                <li class="text-gray-900 font-medium">
+                  This is item 4a76062e-f6ab-4b8d-b4e1-1dcb17e4531e
+                </li>
+                <li
+                  class="lg:grid lg:gap-y-10 xl:gap-x-16 lg:grid-rows-1 lg:grid-cols-7 lg:gap-x-8"
+                >
+                  This is item a67f9538-8c13-4147-a405-218b07232377
+                </li>
+              </ol>
+            </li>
+            <li class="space-y-1">
+              <ul class="border-t mt-10 border-gray-200">
+                <li class="px-2 lg:px-0 relative z-10 flex">
+                  This is item 0165d9c7-b39c-4db2-b307-a22545c1534c
+                </li>
+                <li
+                  class="inline-flex hover:bg-gray-50 rounded-r-md border-gray-300 relative text-gray-500 px-2 font-medium border text-sm bg-white focus:z-20 items-center py-2"
+                >
+                  This is item 66370802-d29e-4760-a066-0b58ca86f226
+                </li>
+              </ul>
+              <ol class="text-sm text-gray-500">
+                <li class="md:inset-y-0 md:left-0 lg:static flex md:absolute xl:col-span-2">
+                  This is item 29977110-8d73-47e3-b243-d0bbdfb82651
+                </li>
+                <li class="mt-2 text-gray-700 text-sm">
+                  This is item 2aa424b1-e0d7-4995-92e8-546869bd9705
+                </li>
+                <li class="border-gray-200 flex-none bg-gray-50 p-6 bottom-0 border-t sticky">
+                  This is item eaba2295-68c7-4a65-a093-754f298d0f57
+                </li>
+              </ol>
+              <img
+                class="mt-4 text-purple-200 max-w-3xl text-lg"
+                alt="Profile picture of user a7f9cd91-ee03-4bdb-a93a-2edb1a399e66"
+                src="https://example.org/pictures/4345ece6-b0b8-4ce8-946a-157261820dbe"
+              />
+              <a href="#" target="_blank" class="bg-white border-b xl:hidden border-blue-gray-200">
+                This is link bde76eb0-1e26-4afe-9b8d-d92dacc6688d
+              </a>
+            </li>
+            <li class="max-w-7xl py-16 px-4 lg:px-8 mx-auto sm:py-24 sm:px-6">
+              <ul class="group-hover:opacity-75 pointer-events-none object-cover">
+                <li class="text-gray-900 hover:bg-gray-50 hover:text-gray-900">
+                  This is item 114b2be6-0e4f-40c7-abd6-d7f6843a3cb5
+                </li>
+                <li class="ring-1 overflow-hidden ring-opacity-5 shadow-lg ring-black rounded-lg">
+                  This is item e5754c30-c7ae-4631-930c-95383def0a75
+                </li>
+              </ul>
+              <ul class="truncate ml-3 flex-auto">
+                <li
+                  class="p-1 focus:ring-offset-2 bg-white rounded-full focus:ring-2 hover:text-gray-500 text-gray-400 focus:ring-indigo-500 focus:outline-none"
+                >
+                  This is item 9ce5c3dd-6371-4b36-ac5f-3f312f17535f
+                </li>
+                <li
+                  class="absolute ring-1 py-1 overflow-auto bg-white z-10 ring-black text-base rounded-md mt-1 max-h-60 focus:outline-none ring-opacity-5 sm:text-sm shadow-lg w-full"
+                >
+                  This is item 2ff10843-13ff-4734-be13-ca5d7d339dec
+                </li>
+                <li
+                  class="text-sm ring-1 shadow bg-gray-200 rounded-lg gap-px mt-2 isolate grid-cols-7 grid ring-gray-200"
+                >
+                  This is item 31cb981a-5f2b-4288-9111-80075b57b52a
+                </li>
+              </ul>
+              <a href="#" rel="noreferrer" class="flex-shrink-0 flex items-center">
+                This is link 78d7a8b5-a738-4455-aa84-8bf3decadad2
+              </a>
+              <ol class="text-gray-500 hover:text-gray-600">
+                <li class="bg-gray-50">This is item 329126e4-a11f-40a6-924e-5945f80cb287</li>
+                <li class="text-gray-900 p-2 block font-medium -m-2">
+                  This is item 7f163f33-797b-4e5f-b396-829c33676717
+                </li>
+                <li class="max-w-7xl sm:px-6 lg:px-8 mx-auto px-4">
+                  This is item 82cc7709-199a-447c-ad81-dccecc6e19a5
+                </li>
+                <li class="items-center py-4 justify-between flex">
+                  This is item 347a2ce5-75da-498f-80f9-952ee124ebb4
+                </li>
+              </ol>
+            </li>
+            <li class="text-base font-medium text-gray-900">
+              <ol class="text-indigo-600">
+                <li class="lg:px-8 max-w-7xl mx-auto">
+                  This is item b1b91632-a2d2-4f30-8a35-c6d9874d2b2d
+                </li>
+                <li
+                  class="py-6 bg-gray-100 lg:grid-cols-12 lg:grid sm:rounded-lg lg:gap-x-8 lg:px-8 lg:py-8 px-4 sm:px-6"
+                >
+                  This is item 367fa66c-936e-48e3-9cbe-b1e2bc7c8f96
+                </li>
+                <li class="border-b border-gray-200">
+                  This is item 391cbdae-105b-4a64-884a-886fd1abc756
+                </li>
+                <li class="text-gray-900 text-base font-medium">
+                  This is item db8acafa-d350-4757-8603-5e5cce824414
+                </li>
+              </ol>
+              <img
+                class="rounded-full items-center mx-auto justify-center flex h-7 w-7"
+                alt="Profile picture of user 429411aa-e9da-41ae-b2d9-6cc3eb9f3b5e"
+                src="https://example.org/pictures/69049445-b519-4b6d-b8d1-c2e7d4b5a4f4"
+              />
+              <img
+                class="text-base group-hover:text-gray-900 text-gray-700 font-medium"
+                alt="Profile picture of user 1128aa4e-67cc-400c-96ff-a71851cc0493"
+                src="https://example.org/pictures/9ab59c88-70c1-4f55-9295-60f644535dcc"
+              />
+              <ul class="flex items-center group px-2 py-2 font-medium rounded-md text-sm">
+                <li class="text-sm flex justify-center relative">
+                  This is item 1e78bb79-0846-4a98-ae25-b3fd325ffdb9
+                </li>
+                <li class="font-medium text-gray-900">
+                  This is item e562f003-b36c-478b-9ff8-41c3db844dce
+                </li>
+                <li class="object-center object-cover">
+                  This is item ea103fd1-0fbb-4443-8739-890937166f7e
+                </li>
+              </ul>
+            </li>
+          </ol>
+          <img
+            class="text-gray-300"
+            alt="Profile picture of user 2b62b56c-21ae-4c84-b639-0b093cbcba0a"
+            src="https://example.org/pictures/367e87d8-bba9-4cb7-af02-d8b35cbfef23"
+          />
+        </li>
+      </ol>
+      <ol class="bg-gray-50">
+        <li class="p-4 items-end flex">
+          <img
+            class="mt-6"
+            alt="Profile picture of user 3613fdc6-d257-47e9-913a-91b358607c14"
+            src="https://example.org/pictures/afb3a5f3-9b17-4dca-bd09-f53aaa6ef533"
+          />
+          <img
+            class="sr-only"
+            alt="Profile picture of user 2f515104-ea87-4cf3-88c2-19634520ca0a"
+            src="https://example.org/pictures/26106a1a-d102-4d07-abc9-e1c0f7700c0a"
+          />
+          <a href="#" class="text-lg"> This is link d3be9080-4676-4809-b745-c5d8879c47c2 </a>
+        </li>
+        <li
+          class="border justify-center text-white hover:bg-indigo-700 inline-flex items-center sm:w-auto px-4 shadow-sm focus:ring-offset-2 focus:ring-2 focus:outline-none font-medium focus:ring-indigo-500 py-2 border-transparent text-sm bg-indigo-600 rounded-md"
+        >
+          <img
+            class="py-12"
+            alt="Profile picture of user 97d9415f-27f8-4ffc-b4dc-eb9672f586fc"
+            src="https://example.org/pictures/7812cc38-592d-4167-a0d3-9de509c97eb0"
+          />
+        </li>
+        <li class="lg:px-8 px-6 relative mx-auto max-w-7xl z-10">
+          <a
+            href="#"
+            target="_blank"
+            class="font-medium text-gray-900 hover:text-gray-700 text-base"
+          >
+            This is link 0408d7b2-a595-4fd5-9ab0-b302cc6e7418
+          </a>
+          <ul class="absolute inset-0">
+            <li class="font-medium text-gray-900">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="mx-auto items-center h-7 rounded-full w-7 flex justify-center"
+              >
+                This is link 13a63e14-32bc-4740-8a26-bb9ad2f13633
+              </a>
+              <ul
+                class="mx-auto max-w-7xl sm:px-6 justify-between lg:px-8 px-4 h-10 flex items-center"
+              >
+                <li class="text-gray-700">This is item 1db03e4f-a08f-4909-aa1c-59e48ed1765b</li>
+                <li class="lg:p-0 max-w-md px-4 lg:h-full mx-auto sm:px-6 sm:max-w-3xl">
+                  This is item bbd12713-cb74-4d11-a1c3-9169db70b9a6
+                </li>
+                <li class="flex items-center justify-center ring-8 ring-white">
+                  This is item 21756217-9157-406e-be69-67df869b0723
+                </li>
+              </ul>
+              <ol class="sr-only">
+                <li class="sm:space-x-5 sm:flex">
+                  This is item 75cd1f35-8873-4036-8b41-76bc123408f0
+                </li>
+                <li class="text-white text-lg">
+                  This is item 77b3daf3-27df-48df-a7c4-5fd35f06a0ab
+                </li>
+                <li class="text-gray-700 text-sm block">
+                  This is item ddddebf5-4574-4c58-86b6-88a7c0d38a02
+                </li>
+                <li
+                  class="sm:grid lg:max-w-5xl sm:gap-16 lg:grid-cols-3 mx-auto sm:grid-cols-2 space-y-16 sm:space-y-0"
+                >
+                  This is item 17e3cb82-f3b5-44f9-9db2-1ceeb6d65182
+                </li>
+              </ol>
+              <a href="#" rel="noreferrer" class="text-sm line-clamp-2 mt-1 text-gray-600">
+                This is link 07b0b136-9d93-4681-86a2-fd3fdbeb90fb
+              </a>
+            </li>
+            <li class="hover:underline text-gray-900 font-medium">
+              <img
+                class="lg:gap-8 lg:grid lg:grid-cols-3 lg:max-w-7xl lg:mx-auto lg:px-8"
+                alt="Profile picture of user 640f8e17-8b99-4206-8b42-4a5f5d544702"
+                src="https://example.org/pictures/5613f7d3-efe1-4333-80d5-4ab4d131980b"
+              />
+              <a
+                href="#"
+                class="lg:gap-x-8 grid text-sm sm:gap-x-6 sm:grid-rows-1 sm:grid-cols-12 md:gap-x-8 grid-cols-1"
+              >
+                This is link bc422938-6be6-4cb8-87f3-0bf1fa4d9811
+              </a>
+              <a href="#" class="font-medium text-lg leading-6 text-gray-900">
+                This is link 7e99779d-8209-48cb-aaa1-c9c215655a26
+              </a>
+              <ul class="block text-sm font-medium text-gray-700">
+                <li class="text-gray-500 text-sm mt-1">
+                  This is item f8fa3b03-21c4-4a4c-88f6-f085128c61f6
+                </li>
+                <li class="flex-auto">This is item a03062de-2858-465c-a9cf-064b537654d8</li>
+                <li class="sr-only">This is item 17253be3-abda-45cd-9877-a40ab1be83a6</li>
+                <li class="text-lg font-medium text-gray-900 leading-6 ml-16">
+                  This is item 813cf5cf-8ecb-4297-b9eb-68f0f467223c
+                </li>
+                <li class="sr-only">This is item 088e1682-0714-477a-8c68-0929f934cc9f</li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="h-16 items-center flex">
+          <ol class="hover:bg-gray-100 focus:z-10 py-1.5 bg-white">
+            <li class="min-h-[850px] bg-white">
+              <ul class="mt-4 space-y-4">
+                <li class="cursor-auto text-gray-500 text-left text-lg w-full font-medium py-6">
+                  This is item 114829a6-a705-4104-8818-76b08982b678
+                </li>
+                <li class="inline-block relative">
+                  This is item cdb275b7-c27e-4af9-822a-b00687fb5479
+                </li>
+                <li class="h-6 w-6">This is item 248fd6c7-e955-40de-b6b0-865a2e988cd2</li>
+              </ul>
+              <a href="#" rel="noreferrer" class="mt-0.5">
+                This is link 95194aba-9177-4020-9832-d3c65d839e63
+              </a>
+              <ul class="flex justify-between items-center">
+                <li class="flex-shrink-0 sm:order-3 order-2 sm:ml-3">
+                  This is item d88c898c-286d-4d87-bf6d-472c7ec111f9
+                </li>
+                <li class="sm:col-span-6">This is item cba62412-5c11-43ea-b3fa-caa49c0246f9</li>
+                <li class="w-5 mr-2 -ml-1 text-gray-400 h-5">
+                  This is item 9cd30f2d-448e-41f9-8c6b-cf58a615297a
+                </li>
+              </ul>
+              <ol class="bg-white rounded-tr-lg py-1.5 focus:z-10 hover:bg-gray-100">
+                <li class="items-center flex order-1 sm:flex-col sm:items-start">
+                  This is item a28dd7de-34e4-46ba-81db-6eb59b69d981
+                </li>
+                <li class="sr-only">This is item 006b90b3-bfcf-4168-bba8-04f42fb84720</li>
+                <li class="bg-white">This is item c804d57d-9793-4836-a13b-f7248a6d7aef</li>
+              </ol>
+            </li>
+            <li class="w-2 h-2">
+              <a href="#" rel="noreferrer" class="bg-white">
+                This is link 7bf56a82-847e-4f1c-a0ca-32610961f0e2
+              </a>
+            </li>
+          </ol>
+          <ol class="text-gray-500 hover:text-gray-600">
+            <li class="sm:gap-4 sm:grid sm:py-5 sm:grid-cols-3 py-4">
+              <a href="#" target="_blank" rel="noreferrer" class="text-sm">
+                This is link 8d501524-fd5c-46c2-8100-5aae8f16b819
+              </a>
+              <a href="#" class="sm:ml-7 -m-2 hover:text-gray-500 ml-5 p-2 text-gray-400">
+                This is link 1f61391e-0760-47e2-aaa7-1364e485331d
+              </a>
+              <ol class="text-gray-900 -m-2 block font-medium p-2">
+                <li
+                  class="lg:w-52 sm:h-40 col-start-2 sm:w-40 sm:row-span-2 lg:h-52 sm:col-start-1 w-20 object-center rounded-lg h-20 sm:row-start-1 object-cover col-end-3"
+                >
+                  This is item fab91026-b8b8-4373-9e4c-7735987940d9
+                </li>
+                <li class="text-gray-700 text-sm font-medium block">
+                  This is item 2e02d6fe-0d26-4aa8-8664-1b8395a11230
+                </li>
+                <li
+                  class="focus:outline-none shadow-lg mt-2 absolute origin-top-right rounded-md right-0 z-10 ring-1 ring-opacity-5 bg-white ring-black w-36"
+                >
+                  This is item 7644c78e-9a6a-42ae-89de-e53ea7be3f32
+                </li>
+              </ol>
+              <ul class="flex">
+                <li class="relative w-full flex-1 bg-gray-800">
+                  This is item 72e61f48-0d25-4920-8e72-1a52c2a750a5
+                </li>
+                <li class="relative">This is item 337d9aef-6a85-46c6-958b-34e984315f6c</li>
+                <li class="md:ml-0 w-full flex">
+                  This is item bcd6fc22-536d-4098-9810-f9287e012b46
+                </li>
+                <li class="flex-1 overflow-y-auto h-0">
+                  This is item 5a646d1e-fa42-472e-b8ee-c920d25f7b20
+                </li>
+              </ul>
+            </li>
+            <li class="text-gray-900 tracking-tight text-3xl font-bold">
+              <ol class="hidden md:space-x-8 md:ml-10 md:pr-4 md:block">
+                <li class="py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10 bg-gray-50 relative">
+                  This is item d3c34275-22b9-4c6b-bfc4-d5adf1aa00f3
+                </li>
+                <li class="bg-black inset-0 bg-opacity-25 fixed">
+                  This is item eae60359-b05d-48a3-a0f6-d94359679471
+                </li>
+              </ol>
+              <ul class="sm:hidden mt-10">
+                <li class="flex-col flex">This is item 3810607b-9173-4570-9493-aad902f2bef2</li>
+                <li class="items-center flex py-3 justify-center">
+                  This is item e6712919-16a8-406f-ab00-73499cfd72aa
+                </li>
+              </ul>
+              <ul class="flex">
+                <li class="justify-between h-16 flex">
+                  This is item d5c9b17f-ffea-4758-9da4-1e82867dd893
+                </li>
+                <li class="text-sm">This is item 4eca4e3d-b5c1-443e-953f-3dceea5749c3</li>
+                <li class="mt-2 text-gray-500 text-sm">
+                  This is item 409d34fd-317a-4cf0-ab53-1eccc82dcdcc
+                </li>
+              </ul>
+            </li>
+            <li class="min-w-0 flex-1">
+              <img
+                class="font-medium text-base text-gray-900"
+                alt="Profile picture of user 602e6b5b-511a-4b28-8493-b60a6fd75cff"
+                src="https://example.org/pictures/69198fc1-ebbd-4946-b162-1e020b07ea75"
+              />
+            </li>
+            <li class="py-14 text-center sm:px-14 px-6 text-sm">
+              <img
+                class="flex space-x-5 items-center"
+                alt="Profile picture of user 7abcf285-084c-4541-a381-e30f48ffaa20"
+                src="https://example.org/pictures/b46460f3-82d7-423f-9f1d-290ea5253251"
+              />
+              <img
+                class="text-gray-900"
+                alt="Profile picture of user 0534350c-0095-4f9e-a37f-6fcec406c581"
+                src="https://example.org/pictures/93c78883-e6ca-4de3-b044-3b61d8f0ddd0"
+              />
+            </li>
+          </ol>
+          <a href="#" target="_blank" class="h-12">
+            This is link c12be547-da06-4a92-a8c5-957ac0c0f3c1
+          </a>
+        </li>
+        <li class="font-medium text-base text-white">
+          <ol class="hover:text-gray-800">
+            <li class="sm:col-span-6">
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="overflow-y-auto flex-col max-w-xs flex ml-auto pb-12 shadow-xl h-full relative py-4 w-full bg-white"
+              >
+                This is link aae63805-2525-4f31-8558-e242f1fcd26b
+              </a>
+            </li>
+            <li class="bg-gray-50 text-gray-400 hover:bg-gray-100 focus:z-10 py-1.5">
+              <ol class="font-medium hover:text-yellow-600 text-yellow-700 underline">
+                <li class="sr-only">This is item 671e0f8c-e3f6-4813-a393-5ec420cad226</li>
+                <li
+                  class="px-3 hover:text-white font-medium py-2 hover:bg-gray-700 rounded-md flex group items-center text-gray-300 text-sm"
+                >
+                  This is item 3ff28496-0c3e-46c7-a03d-32ee1fd35f9f
+                </li>
+                <li class="text-lg font-medium text-gray-900">
+                  This is item 5f970434-6fdb-43c0-8bf8-356b53d04774
+                </li>
+              </ol>
+              <ol
+                class="justify-center items-center rounded-full text-gray-900 hover:bg-gray-200 h-8 mx-auto flex w-8"
+              >
+                <li class="flex-shrink-0 w-5 text-gray-400 h-5">
+                  This is item af5094cc-7572-48b0-8685-308da8f4b1c4
+                </li>
+                <li class="text-gray-500 mt-1 text-sm">
+                  This is item 3de52000-35be-4fef-b8de-02a77a86540f
+                </li>
+                <li
+                  class="lg:px-8 relative pb-96 mx-auto sm:px-6 text-center max-w-3xl px-4 sm:pb-0"
+                >
+                  This is item a463d1ac-02b1-4f33-8bba-44d5de36c236
+                </li>
+              </ol>
+              <a
+                href="#"
+                target="_blank"
+                rel="noreferrer"
+                class="focus:z-10 py-1.5 bg-white hover:bg-gray-100"
+              >
+                This is link 4b31b90a-8d78-4e0c-8fee-3ca3209504c5
+              </a>
+              <a href="#" target="_blank" class="hover:text-gray-600 text-gray-500">
+                This is link 4bf9c53f-2980-494c-ba71-e549c27d2e17
+              </a>
+            </li>
+            <li class="hover:bg-gray-100 py-1.5 focus:z-10 bg-white">
+              <img
+                class="h-6 w-6"
+                alt="Profile picture of user eb438e00-ba60-4754-80e0-096e5b68d525"
+                src="https://example.org/pictures/5a6a1ea6-2f34-4ff5-a6b3-e01b6c5c04ce"
+              />
+            </li>
+            <li class="group-hover:text-pink-700 text-pink-500">
+              <ol class="max-w-lg space-y-6 mx-auto">
+                <li class="sr-only">This is item 54668f06-61f1-41da-bbe8-78c81096d40e</li>
+                <li class="pt-10 mt-10 border-t border-gray-200">
+                  This is item 48c32f11-9004-4fc2-8093-f302143b058f
+                </li>
+                <li class="w-6 h-6">This is item 85830811-dfae-4786-9155-bfd645a60547</li>
+                <li class="overflow-hidden aspect-h-4 aspect-w-3 hidden rounded-lg lg:block">
+                  This is item e8a1bb27-56d0-4a0d-9ca5-2768e463478e
+                </li>
+              </ol>
+            </li>
+          </ol>
+          <a href="#" rel="noreferrer" class="w-6 h-6">
+            This is link 3a3031cc-7999-4973-ad65-afd82aebcb43
+          </a>
+          <img
+            class="text-gray-500 text-base"
+            alt="Profile picture of user b1315998-80e4-427a-83e9-443f4b7d585b"
+            src="https://example.org/pictures/1a68635e-92da-4f07-b7aa-eb8638b99dde"
+          />
+          <ul class="justify-center flex mx-auto py-12">
+            <li class="p-2 flex-shrink-0 text-gray-400 ml-auto hover:text-gray-500 bg-white">
+              <a href="#" class="p-8 items-center justify-center bg-white flex">
+                This is link abe7f7aa-7eed-4543-9c1e-bd3c0e3ac57e
+              </a>
+              <ul
+                class="bg-indigo-600 items-center justify-center w-6 font-semibold flex rounded-full h-6 text-white"
+              >
+                <li class="sm:pb-40 sm:pt-24 pt-16 pb-80 lg:pb-48 lg:pt-40">
+                  This is item 8fb6fa8f-37fd-4877-9b09-7d7113c0cbac
+                </li>
+                <li
+                  class="aspect-h-2 rounded-lg group-hover:opacity-75 aspect-w-3 lg:aspect-w-5 overflow-hidden lg:aspect-h-6"
+                >
+                  This is item 77aafa5a-0a5a-47f7-bf5e-a2092d76aaa6
+                </li>
+              </ul>
+              <a href="#" class="font-medium block px-3 py-2 text-base rounded-md">
+                This is link 5d7076f1-e963-4265-8f23-a63a1e5525ad
+              </a>
+              <img
+                class="w-28 flex-none"
+                alt="Profile picture of user 2aaaf712-8d18-4c68-a912-e70d01beb650"
+                src="https://example.org/pictures/d6e9af7e-9683-4ac2-8ae1-6cbd3f30af66"
+              />
+            </li>
+            <li class="font-medium text-sm">
+              <img
+                class="w-4 h-4"
+                alt="Profile picture of user 973ecadf-7ce3-4a1c-8ff2-cfb6e9edc9a4"
+                src="https://example.org/pictures/a12da8af-d373-4d65-934a-beafb74350c1"
+              />
+            </li>
+            <li class="sm:ml-5 sm:mt-0 flex-shrink-0 mt-4">
+              <a href="#" target="_blank" rel="noreferrer" class="flow-root">
+                This is link 19a76f89-1c23-4a4c-a199-fc8e9aaaa62a
+              </a>
+              <ol class="text-base font-medium text-gray-900">
+                <li
+                  class="mx-auto justify-center rounded-full items-center h-8 w-8 hover:bg-gray-200 text-gray-400 flex"
+                >
+                  This is item ca9f7ea2-beb0-4b04-a5fb-a33174bd5549
+                </li>
+                <li class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+                  This is item a3c770fd-2224-4b1b-923a-b696e3947d9f
+                </li>
+              </ol>
+              <ul class="sm:pt-4 sm:space-y-4 space-y-6 pt-6">
+                <li class="md:fixed md:flex-col md:flex hidden md:w-64 md:inset-y-0">
+                  This is item 36afac0a-6f0c-409a-9f6d-9468077a4098
+                </li>
+                <li class="bg-white hover:bg-gray-100 focus:z-10 py-1.5">
+                  This is item 80034255-f910-47f4-92db-84377391131e
+                </li>
+              </ul>
+              <ul class="mx-auto h-7 w-7 justify-center rounded-full items-center flex">
+                <li class="mx-auto px-4 lg:py-16 py-12 lg:px-8 max-w-7xl sm:px-6">
+                  This is item fd25e635-a64e-426c-8f93-1ab66f240040
+                </li>
+                <li class="xl:items-center xl:justify-between xl:flex pb-16">
+                  This is item 73eabc15-a736-4ca4-9306-389b5fd8fc0b
+                </li>
+                <li class="items-center justify-center w-7 flex h-7 mx-auto rounded-full">
+                  This is item d72ec9fe-8cc8-4b15-adb1-9389fbb61273
+                </li>
+              </ul>
+            </li>
+            <li class="justify-between flex h-16 items-center">
+              <img
+                class="bg-white min-h-[1024px]"
+                alt="Profile picture of user 2e0a0165-6a43-4839-83a5-ebc7f36aebeb"
+                src="https://example.org/pictures/e9a146d4-09af-4c3c-8fbd-cc24593fea3a"
+              />
+              <img
+                class="h-full absolute object-cover w-full"
+                alt="Profile picture of user 8098d2bd-c203-4407-b7bf-bd7bd9711276"
+                src="https://example.org/pictures/fe5c8189-cf52-40f8-9407-2dc53bb6ca8a"
+              />
+            </li>
+          </ul>
+        </li>
+      </ol>
+      <a href="#" target="_blank" class="focus-within:text-gray-600 text-gray-400 relative">
+        This is link 6354f18e-547d-491e-8175-9a92b0a8a94b
+      </a>
+      <input type="password" class="mt-4 text-gray-400" />
+      <select class="text-gray-500">
+        <option>This is item ad5137ae-1589-45d1-beb4-25611476b7ab</option>
+        <option value="988676e1-a2b4-4936-95f5-1a8562524211">
+          This is item 13b18e1f-871b-49eb-a0a7-04506c4b9111
+        </option>
+        <option value="f44456c4-d751-4c6f-a892-16b1b3020e98">
+          This is item a6f0d5fa-bd8b-44fc-b273-9cf33c3aead8
+        </option>
+        <option value="bc8ea589-a075-45e8-8fc6-7792fd5ed1c8">
+          This is item 90e09c4e-a3ec-4511-87ab-26ffa6263e72
+        </option>
+        <option>This is item 72cfcfc0-ddb8-40bf-a309-28c2e94b8e5c</option>
+        <option>This is item 49af8c56-a997-461d-adb2-85465c9f1d6b</option>
+        <option value="f77c52d4-0e3c-4eee-a8f4-ab11336c1947">
+          This is item 02ec3e33-4fcb-469d-9f3b-e8712089ffcd
+        </option>
+      </select>
+      <main class="sm:text-5xl tracking-tight text-4xl lg:text-6xl font-bold text-center">
+        <img
+          class="-my-2 md:hidden -mr-2"
+          alt="Profile picture of user 7a7e459e-242a-4d25-94c8-55ba28325a19"
+          src="https://example.org/pictures/f0da850c-3d65-4076-a0ec-cc4eee8fd3ef"
+        />
+        <a href="#" target="_blank" class="lg:mt-0 mt-12 lg:col-span-2">
+          This is link 0179323a-dba5-4f74-8224-9ffc3f2bc303
+        </a>
+        <a href="#" rel="noreferrer" class="sm:col-span-6">
+          This is link 59887750-572f-4c76-a829-b253fa34cfcf
+        </a>
+        <ol class="pt-5 px-6">
+          <li class="flex-wrap justify-between items-center -ml-4 sm:flex-nowrap -mt-4 flex">
+            <ul class="shadow-lg bg-white sm:grid rounded-lg sm:grid-cols-3">
+              <li class="lg:block hidden lg:w-80">
+                <ul class="mt-1"></ul>
+                <img
+                  class="rounded-full ml-2 text-xs text-gray-600 py-0.5 bg-gray-200 px-2"
+                  alt="Profile picture of user 20051a17-f595-4081-ad79-d0af7c72121c"
+                  src="https://example.org/pictures/f4c0efd6-a077-4bc8-a481-a09fdb5d91bc"
+                />
+                <ul class="bg-white shadow-xl flex-col h-full flex py-6 overflow-y-scroll"></ul>
+              </li>
+              <li
+                class="text-gray-600 rounded-full py-0.5 text-xs bg-gray-200 ml-2 tracking-wide px-2"
+              >
+                <a href="#" target="_blank" class="justify-between flex items-center py-4">
+                  This is link cf9a4f15-49cc-4ac2-a67d-8012cf5e5653
+                </a>
+              </li>
+              <li class="text-purple-600 font-medium hover:text-purple-500">
+                <img
+                  class="flex-shrink-0"
+                  alt="Profile picture of user c672e345-c6cb-4db8-a70a-0f5cbb98e045"
+                  src="https://example.org/pictures/69042ef2-4850-423c-bb22-b8f72d375798"
+                />
+              </li>
+              <li class="py-2 block px-4 text-sm">
+                <ul
+                  class="focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 block rounded-l-md sm:text-sm pl-10 w-full rounded-none"
+                ></ul>
+                <a href="#" rel="noreferrer" class="mt-1">
+                  This is link 03f1121b-6df3-4ee1-9cd0-411c13a052b7
+                </a>
+                <ul
+                  class="bg-white w-96 border-r xl:flex-col hidden flex-shrink-0 border-blue-gray-200 xl:flex"
+                ></ul>
+                <ol class="hidden lg:ml-10 lg:block"></ol>
+              </li>
+            </ul>
+            <ul class="w-full border-t border-gray-300">
+              <li
+                class="-z-10 top-[-10rem] absolute overflow-hidden blur-3xl transform-gpu inset-x-0 sm:top-[-20rem]"
+              >
+                <ol class="text-sm flex justify-between px-4 py-2"></ol>
+                <ul class="justify-end flex"></ul>
+              </li>
+              <li class="relative hidden rounded-full lg:block overflow-hidden">
+                <ul
+                  class="px-2.5 ml-3 hidden md:inline-block font-medium py-0.5 text-xs rounded-full"
+                ></ul>
+                <ul class="left-4 pointer-events-none absolute top-3.5 h-5 w-5 text-gray-400"></ul>
+                <ol class="h-6 w-6"></ol>
+                <ul
+                  class="focus:ring-offset-2 bg-gray-600 py-2 border inline-flex focus:ring-2 font-medium hover:bg-gray-700 shadow-sm rounded-md focus:ring-offset-gray-800 border-transparent items-center text-white focus:outline-none px-4 focus:ring-indigo-500 text-sm"
+                ></ul>
+              </li>
+            </ul>
+            <a href="#" target="_blank" class="flex">
+              This is link 0837b434-12c8-41a9-a8eb-0a313bd9c46b
+            </a>
+          </li>
+          <li class="fixed bg-opacity-25 inset-0 bg-black">
+            <ul
+              class="font-semibold text-gray-900 px-4 ring-1 inline-block py-1.5 rounded-lg text-base leading-7 ring-gray-900/10 hover:ring-gray-900/20"
+            >
+              <li class="h-full lg:flex hidden">
+                <ol
+                  class="absolute shadow-lg rounded-md ring-1 w-full ring-opacity-5 focus:outline-none mt-1 bg-white z-10 ring-black text-base max-h-56 sm:text-sm overflow-auto py-1"
+                ></ol>
+                <a href="#" rel="noreferrer" class="flex-shrink-0 w-6 h-6 text-gray-400">
+                  This is link f33a8dc8-1f80-4bde-91d9-e3297bed7799
+                </a>
+                <ol class="flex-auto"></ol>
+                <ul class="max-w-prose text-base lg:ml-auto mx-auto lg:mr-0 lg:max-w-lg"></ul>
+              </li>
+              <li class="flex flex-col h-full">
+                <ol class="space-x-10 hidden lg:flex lg:ml-10"></ol>
+                <ul class="w-6 h-6"></ul>
+                <img
+                  class="bg-gray-900 pl-2 items-center text-white rounded-md bg-none text-sm focus:border-transparent focus:outline-none font-medium pr-5 focus:ring-0 group-hover:text-gray-100 border-transparent py-0.5 flex"
+                  alt="Profile picture of user 8f6df517-a629-499b-bab6-8ccae85c3e88"
+                  src="https://example.org/pictures/3d5c6c5d-d8d5-4278-800d-3092519f5c93"
+                />
+                <a href="#" target="_blank" rel="noreferrer" class="bg-blue-gray-50">
+                  This is link 50df4133-b03a-4cee-9b45-0ca73e84f18d
+                </a>
+              </li>
+              <li class="text-3xl tracking-tight mt-3 font-bold text-white">
+                <a href="#" class="sm:px-6 py-5 px-4">
+                  This is link 4cbb06ed-15c9-473b-81c8-af5400a32a6e
+                </a>
+                <ol class="font-medium text-gray-900"></ol>
+              </li>
+            </ul>
+            <ol
+              class="-mb-px transition-colors items-center border-b-2 relative pt-px ease-out duration-200 font-medium text-sm z-10 flex"
+            >
+              <li class="hidden md:space-x-10 md:flex">
+                <ol
+                  class="block hover:text-gray-700 hover:border-gray-300 py-2 text-base text-gray-500 font-medium border-transparent pr-4 hover:bg-gray-50 pl-3 border-l-4"
+                ></ol>
+              </li>
+              <li class="font-medium text-gray-900 text-sm">
+                <ol class="hidden lg:flex lg:flex-shrink-0"></ol>
+                <a href="#" class="sm:flex sm:items-center mt-1 text-sm text-gray-600">
+                  This is link 2614d94b-3d5e-4262-897c-28559a915aea
+                </a>
+              </li>
+              <li
+                class="rounded-full focus:ring-white focus:ring-2 bg-gray-800 hover:text-white p-1 focus:outline-none focus:ring-offset-gray-800 flex-shrink-0 text-gray-400 focus:ring-offset-2"
+              >
+                <a href="#" target="_blank" rel="noreferrer" class="md:justify-center md:flex">
+                  This is link 8fa5f04b-e268-4880-9b3a-494ca3c046bf
+                </a>
+              </li>
+              <li class="absolute inset-0">
+                <ol class="p-8 justify-center flex bg-gray-100"></ol>
+                <img
+                  class="relative inline-block text-left"
+                  alt="Profile picture of user 567d51bf-d083-46db-8eb4-0f9788010153"
+                  src="https://example.org/pictures/7d34f8bb-2b91-484e-b94d-5e93a9711c1c"
+                />
+              </li>
+              <li class="mt-10">
+                <ol class="tracking-tight font-bold text-2xl text-gray-900"></ol>
+                <ul
+                  class="-mt-2.5 pr-2 text-xs w-14 leading-5 z-20 text-gray-400 sticky left-0 text-right -ml-14"
+                ></ul>
+                <a href="#" rel="noreferrer" class="text-sm font-medium">
+                  This is link fea48002-54fc-405f-b419-3db070403087
+                </a>
+                <ol class="text-sm text-gray-500 font-medium"></ol>
+              </li>
+            </ol>
+            <a href="#" target="_blank" class="text-gray-300 w-5 h-5">
+              This is link 9293c169-559c-4794-9f67-a6a2485dc75c
+            </a>
+          </li>
+          <li class="mx-auto lg:px-8 max-w-3xl sm:px-6 lg:max-w-7xl px-4">
+            <img
+              class="text-indigo-600 w-8 justify-center rounded-full hover:bg-gray-200 flex font-semibold items-center h-8 mx-auto"
+              alt="Profile picture of user 0b915945-71ce-42ed-b638-018b677a87b6"
+              src="https://example.org/pictures/8c60efbf-c7dd-43c1-9ad8-47510b54fa0f"
+            />
+          </li>
+        </ol>
+        <section class="lg:items-center lg:flex lg:justify-between">
+          <p class="sm:max-w-md sm:flex mt-4">
+            <span class="-mr-2"> This is text 495dd7d9-9f9b-480a-b331-8c411d853427 </span>
+            <span class="inset-0 fixed bg-gray-600 bg-opacity-75">
+              This is text 0533e18e-49dc-4d1c-a54f-e0bd121f042e
+            </span>
+          </p>
+          <div class="h-5 w-5">
+            <img
+              class="absolute sm:static inset-x-0 sm:flex-1 bottom-0 sm:self-stretch"
+              alt="Profile picture of user 3229ae0c-7e85-4163-a5bb-0eae924b3bf1"
+              src="https://example.org/pictures/c3ba4908-1f9a-45af-8f44-4d8d1c8469f3"
+            />
+            <ol class="md:items-stretch shadow-sm flex rounded-md items-center">
+              <li class="mt-2">
+                <ul class="tracking-tight text-white text-4xl font-bold"></ul>
+                <img
+                  class="absolute z-10 inset-0"
+                  alt="Profile picture of user e80623b6-64e5-4b17-a323-cca8b7a08d13"
+                  src="https://example.org/pictures/b15c969b-0ed6-4f2c-8251-81b7e9978352"
+                />
+                <a
+                  href="#"
+                  rel="noreferrer"
+                  class="inline-block bg-gray-100 h-14 overflow-hidden rounded-full w-14"
+                >
+                  This is link a1ec646f-49b2-4e0c-826d-85f6d1e48e4a
+                </a>
+                <img
+                  class="border-l border-gray-200 pl-3 ml-3"
+                  alt="Profile picture of user f27f4d43-d818-4173-b2d1-4daf346cc442"
+                  src="https://example.org/pictures/a88b21b8-78df-4943-a2ee-837ba1afc5f0"
+                />
+              </li>
+              <li class="mt-6">
+                <img
+                  class="flex sm:pl-6 sm:border-transparent sm:border-l space-x-3 mt-10"
+                  alt="Profile picture of user 6ddad74b-9773-4d3b-ab83-d1f437028140"
+                  src="https://example.org/pictures/1141ed0a-697e-497c-8865-66ebdddc3b3e"
+                />
+                <a href="#" rel="noreferrer" class="sr-only">
+                  This is link 33a4a214-40ce-49f4-b2ac-4df4e98eebb3
+                </a>
+                <img
+                  class="text-gray-500 text-sm lg:w-48 font-medium sm:flex-shrink-0 sm:w-40"
+                  alt="Profile picture of user b06eabce-8402-4a5f-926a-eb7409a060e3"
+                  src="https://example.org/pictures/58446cfd-e400-483c-9f25-9d2aee7148ad"
+                />
+                <img
+                  class="mt-2 text-warm-gray-500 text-base"
+                  alt="Profile picture of user 4f7ab64e-e3a7-4918-886b-917e7733f25c"
+                  src="https://example.org/pictures/f2f11882-4afe-4b8d-8d75-ba913ab0b6e9"
+                />
+              </li>
+              <li class="lg:self-stretch lg:block lg:ml-8 hidden">
+                <ol class="h-6 text-white w-6"></ol>
+              </li>
+              <li class="h-5 mr-2 w-5 -ml-1 text-gray-400">
+                <img
+                  class="font-medium text-base text-gray-900"
+                  alt="Profile picture of user 3cc6a489-6ce6-4fa7-9c58-a5702f07ad16"
+                  src="https://example.org/pictures/e1755975-987c-4938-a363-842e185f0341"
+                />
+                <ol class="grid-cols-1 auto-rows-min md:grid-cols-2 grid gap-y-10 md:gap-x-6"></ol>
+                <a href="#" target="_blank" class="truncate">
+                  This is link 1feeab52-35d9-42f7-a710-85f661ce7ca7
+                </a>
+                <img
+                  class="font-medium -m-2 p-2 block text-gray-900"
+                  alt="Profile picture of user 5cabcc27-35e9-47c3-9738-c10e4f74bd3a"
+                  src="https://example.org/pictures/58b3dd78-e7d5-436e-bf11-c80f724c934a"
+                />
+              </li>
+              <li class="text-indigo-600">
+                <ul class="justify-center flex h-7 mx-auto items-center rounded-full w-7"></ul>
+              </li>
+            </ol>
+            <form class="text-gray-400 focus:z-10 bg-gray-50 hover:bg-gray-100 py-1.5">
+              <select class="h-7 flex justify-center w-7 items-center mx-auto rounded-full">
+                <option>This is item 45ed0f55-2faa-4931-957a-65db25cb2e8f</option>
+                <option>This is item 8ed4d992-783c-4e6b-8679-e1c88e778239</option>
+                <option>This is item 69bf1407-c6c5-4091-b597-b85af2407b4b</option>
+              </select>
+              <input type="text" class="text-sm text-gray-900 font-medium" />
+              <p class="text-indigo-200 mx-auto sm:max-w-3xl text-center mt-6 text-xl max-w-lg">
+                <span class="hover:bg-gray-50">
+                  This is text 5b96273a-c758-4ae4-a19b-4d416b21d8c7
+                </span>
+                <a
+                  href="#"
+                  class="bg-white items-center border-t justify-between flex sm:px-6 border-gray-200 px-4 py-3"
+                >
+                  This is link 2c2990be-368e-4aa6-8f11-6b24888fbcf3
+                </a>
+              </p>
+              <button type="button">This is action ab3b6013-66ac-4121-9933-123d3cf6da29</button>
+              <button type="button">This is action 5c134189-3f39-4974-9000-8ff527cc58eb</button>
+            </form>
+            <section class="border-gray-200 py-6 space-y-6 border-t px-4">
+              <div class="max-w-4xl mx-auto">
+                <input
+                  type="password"
+                  class="absolute border-2 border-dashed rounded-lg border-gray-200 inset-0"
+                />
+                <form class="text-sm text-right px-6 font-medium whitespace-nowrap py-4"></form>
+                <main class="flex-1 flex flex-col md:pl-64"></main>
+              </div>
+              <main class="py-10 md:items-center md:flex md:justify-between">
+                <h3 class="text-gray-400 p-2 hover:text-gray-500 -m-2">
+                  This is heading b1c1981a-61e6-480a-939d-424eb639dfff
+                </h3>
+                <div class="xl:mt-10 mt-8"></div>
+                <section class="text-sm block text-gray-700 font-medium"></section>
+                <img
+                  class="mt-1"
+                  alt="Profile picture of user ce70952c-6830-4b53-b638-bc81064d38a9"
+                  src="https://example.org/pictures/47131abf-3423-4892-8630-342b5f9d6799"
+                />
+                <nav class="divide-gray-200 space-y-10 divide-y"></nav>
+                <ul class="xl:grid pb-8 xl:gap-8 xl:grid-cols-5"></ul>
+              </main>
+              <span class="sr-only"> This is text fd9fbaa9-86e3-4ffe-954a-5be14de18d54 </span>
+            </section>
+            <button type="reset">This is action 14bf4c7e-656c-439d-8d64-c24560f7d642</button>
+          </div>
+          <button type="reset">This is action 61445215-9cb6-45bc-ad6d-f41e175170b5</button>
+          <ol class="inset-0 overflow-hidden absolute">
+            <li class="font-medium text-indigo-600 hover:text-indigo-500">
+              <a href="#" target="_blank" class="pl-3 sm:pr-6 relative py-3.5 pr-4">
+                This is link 8aa64400-12e8-41eb-b6e6-b26356ad3bfe
+              </a>
+            </li>
+            <li class="text-sm text-gray-600 flex">
+              <ul class="w-7 mx-auto flex items-center justify-center h-7 rounded-full">
+                <li
+                  class="group focus-within:ring-white -ml-2 bg-gray-900 relative rounded-md border-transparent focus-within:ring-2"
+                >
+                  This is item e2131780-3b9c-4578-9918-a463d2361bc0
+                </li>
+                <li class="lg:pb-16 pb-36 lg:px-0 lg:row-start-1 sm:px-6 lg:col-start-1 pt-16 px-4">
+                  This is item 5ec4c3aa-6159-4e3e-b6a6-771fab824ee8
+                </li>
+                <li class="items-center flex">This is item 25651510-b575-4293-93e8-92c11296c663</li>
+              </ul>
+              <ul class="focus:ring-indigo-500 border-gray-300 w-4 text-indigo-600 h-4">
+                <li class="mx-auto rounded-full flex w-7 h-7 items-center justify-center">
+                  This is item b0e9dc7d-a031-41be-a4b5-5cd8f219462c
+                </li>
+                <li class="text-sm">This is item 7a7548c7-f04e-4723-b51c-851de4417829</li>
+                <li class="text-base hover:text-gray-900 text-gray-500">
+                  This is item d6a6296e-e06b-407f-b5d2-9148b014c4fa
+                </li>
+                <li class="w-7 flex items-center h-7 mx-auto justify-center rounded-full">
+                  This is item cab8d7c8-2c34-4d20-a7d2-c72500d2b360
+                </li>
+                <li class="lg:hidden">This is item 88f9eb9a-8c93-46f8-8b5d-81667db0ce7e</li>
+              </ul>
+              <ol class="mt-4 sm:flex-none sm:ml-16 sm:mt-0">
+                <li class="sr-only">This is item 0b1d6523-32f0-4270-bc82-094f37c191e0</li>
+                <li
+                  class="lg:h-full ring-1 w-full lg:max-w-none lg:w-auto ring-opacity-5 shadow-xl lg:left-0 ring-black rounded-xl lg:absolute"
+                >
+                  This is item f807b468-b8ff-49d6-a2a6-91d615364ce4
+                </li>
+              </ol>
+            </li>
+            <li class="rounded-full mx-auto flex justify-center h-7 w-7 items-center">
+              <ol
+                class="ring-opacity-5 ring-1 lg:w-auto lg:left-0 shadow-xl w-full lg:max-w-none ring-black lg:absolute lg:h-full rounded-xl"
+              >
+                <li class="mt-4 space-y-4">This is item 5651f9dc-57e0-46f4-bab8-1af15baef811</li>
+                <li class="space-y-4 mt-4">This is item c392f166-a536-4b62-b289-5f0222dff24c</li>
+                <li class="text-gray-400 h-12 mx-auto w-12">
+                  This is item 2f37915b-e155-4c73-b754-eb49a391bb69
+                </li>
+              </ol>
+            </li>
+          </ol>
+          <p class="flex flex-col">This is paragraph 290a7a29-9bf3-4364-a2ab-b898457fb3dd</p>
+        </section>
+      </main>
+    </div>
+  </main>
+  <button type="submit">This is action 9e7727af-b645-4540-9ccd-2c046b610b13</button>
+  <input
+    type="text"
+    class="relative px-4 sm:max-w-3xl sm:px-6 lg:max-w-none mx-auto lg:py-20 lg:px-0 max-w-md"
+  />
+</div>
diff --git a/oxide/crates/core/benches/parse_candidates.rs b/oxide/crates/core/benches/parse_candidates.rs
new file mode 100644
index 000000000..12e476864
--- /dev/null
+++ b/oxide/crates/core/benches/parse_candidates.rs
@@ -0,0 +1,46 @@
+use criterion::{black_box, criterion_group, criterion_main, Criterion};
+use tailwindcss_core::parser::Extractor;
+
+pub fn criterion_benchmark(c: &mut Criterion) {
+    fn parse(input: &[u8]) {
+        // _ = Extractor::all(black_box(input), ExtractorOptions { preserve_spaces_in_arbitrary: false  });
+        Extractor::unique(black_box(input), Default::default());
+    }
+
+    c.bench_function("scan_files (simple)", |b| b.iter(|| parse(b"underline")));
+
+    c.bench_function("scan_files (with variant)", |b| {
+        b.iter(|| parse(b"hover:underline"))
+    });
+
+    c.bench_function("scan_files (with stacked variants)", |b| {
+        b.iter(|| parse(b"focus:hover:underline"))
+    });
+
+    c.bench_function("scan_files (with arbitrary values)", |b| {
+        b.iter(|| parse(b"p-[20px]"))
+    });
+
+    c.bench_function("scan_files (with variant and arbitrary values)", |b| {
+        b.iter(|| parse(b"hover:p-[20px]"))
+    });
+
+    c.bench_function("scan_files (real world)", |b| {
+        b.iter(|| parse(include_bytes!("./fixtures/template-000.html")))
+    });
+
+    let mut group = c.benchmark_group("sample-size-example");
+    group.sample_size(10);
+
+    group.bench_function("scan_files (fast space skipping)", |b| {
+        let count = 10_000;
+        let crazy1 = format!("{}underline", " ".repeat(count));
+        let crazy2 = crazy1.repeat(count);
+        let crazy3 = crazy2.as_bytes();
+
+        b.iter(|| parse(black_box(crazy3)))
+    });
+}
+
+criterion_group!(benches, criterion_benchmark);
+criterion_main!(benches);
diff --git a/oxide/crates/core/benches/scan_files.rs b/oxide/crates/core/benches/scan_files.rs
new file mode 100644
index 000000000..83af3c720
--- /dev/null
+++ b/oxide/crates/core/benches/scan_files.rs
@@ -0,0 +1,63 @@
+use criterion::{criterion_group, criterion_main, Criterion};
+use std::path::PathBuf;
+use tailwindcss_core::{scan_files, ChangedContent, Parsing, IO};
+
+pub fn criterion_benchmark(c: &mut Criterion) {
+    // current_dir will be set to ./crates/core
+    let fixtures_path = std::env::current_dir()
+        .unwrap()
+        .join("benches")
+        .join("fixtures");
+
+    let mut all_files: Vec<(u64, PathBuf)> = std::fs::read_dir(fixtures_path)
+        .unwrap()
+        .filter_map(Result::ok)
+        .map(|dir_entry| dir_entry.path())
+        .filter(|path| path.is_file())
+        .filter(|path| match path.extension() {
+            Some(ext) => ext == "html",
+            _ => false,
+        })
+        .map(|path| (path.metadata().unwrap().len(), path))
+        .collect();
+
+    // Let's sort them first so that we are working with the same files in the same order every
+    // time.
+    all_files.sort_by(|a, b| a.0.cmp(&b.0));
+
+    // Let's work with the first middle X items (so that we can skip outliers and work with more
+    // interesting files)
+    let amount = 300;
+    let mut files: Vec<_> = all_files
+        .iter()
+        .skip((all_files.len() - amount) / 2) // Skip the first X, so that we can use the middle
+        // {amount} files.
+        .take(amount)
+        .map(|(_, path)| path)
+        .collect();
+
+    // Two (or more) files can technically have the exact same size, but the order is random, so
+    // now that we are scoped to the middle X files, let's sort these alphabetically to guarantee
+    // the same order in our benchmarks.
+    files.sort_by(|a, b| a.file_name().cmp(&b.file_name()));
+
+    let changed_content: Vec<ChangedContent> = files
+        .into_iter()
+        .map(|file| ChangedContent {
+            file: Some(file.to_path_buf()),
+            content: None,
+        })
+        .collect();
+
+    c.bench_function("scan_files", |b| {
+        b.iter(|| {
+            scan_files(
+                changed_content.clone(),
+                Parsing::Parallel as u8 | IO::Parallel as u8,
+            )
+        })
+    });
+}
+
+criterion_group!(benches, criterion_benchmark);
+criterion_main!(benches);
diff --git a/crates/oxide/fuzz/.gitignore b/oxide/crates/core/fuzz/.gitignore
similarity index 100%
rename from crates/oxide/fuzz/.gitignore
rename to oxide/crates/core/fuzz/.gitignore
diff --git a/crates/oxide/fuzz/Cargo.lock b/oxide/crates/core/fuzz/Cargo.lock
similarity index 99%
rename from crates/oxide/fuzz/Cargo.lock
rename to oxide/crates/core/fuzz/Cargo.lock
index 7c7ebc7a8..4b87adb77 100644
--- a/crates/oxide/fuzz/Cargo.lock
+++ b/oxide/crates/core/fuzz/Cargo.lock
@@ -382,7 +382,7 @@ dependencies = [
 ]
 
 [[package]]
-name = "tailwindcss-oxide"
+name = "tailwindcss-core"
 version = "0.1.0"
 dependencies = [
  "bstr",
@@ -399,11 +399,11 @@ dependencies = [
 ]
 
 [[package]]
-name = "tailwindcss-oxide-fuzz"
+name = "tailwindcss-core-fuzz"
 version = "0.0.0"
 dependencies = [
  "libfuzzer-sys",
- "tailwindcss-oxide",
+ "tailwindcss-core",
 ]
 
 [[package]]
diff --git a/crates/oxide/fuzz/Cargo.toml b/oxide/crates/core/fuzz/Cargo.toml
similarity index 83%
rename from crates/oxide/fuzz/Cargo.toml
rename to oxide/crates/core/fuzz/Cargo.toml
index b402014a9..221bb40d4 100644
--- a/crates/oxide/fuzz/Cargo.toml
+++ b/oxide/crates/core/fuzz/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "tailwindcss-oxide-fuzz"
+name = "tailwindcss-core-fuzz"
 version = "0.0.0"
 publish = false
 edition = "2021"
@@ -10,7 +10,7 @@ cargo-fuzz = true
 [dependencies]
 libfuzzer-sys = "0.4"
 
-[dependencies.tailwindcss-oxide]
+[dependencies.tailwindcss-core]
 path = ".."
 
 # Prevent this from interfering with workspaces
diff --git a/crates/oxide/fuzz/fuzz_targets/parsing.rs b/oxide/crates/core/fuzz/fuzz_targets/parsing.rs
similarity index 83%
rename from crates/oxide/fuzz/fuzz_targets/parsing.rs
rename to oxide/crates/core/fuzz/fuzz_targets/parsing.rs
index 02935a20f..ac7a9fd79 100644
--- a/crates/oxide/fuzz/fuzz_targets/parsing.rs
+++ b/oxide/crates/core/fuzz/fuzz_targets/parsing.rs
@@ -2,9 +2,9 @@
 
 use libfuzzer_sys::fuzz_target;
 use std::path::PathBuf;
-use tailwindcss_oxide::candidate::scan_files;
-use tailwindcss_oxide::candidate::Candidate;
-use tailwindcss_oxide::location::Location;
+use tailwindcss_core::candidate::scan_files;
+use tailwindcss_core::candidate::Candidate;
+use tailwindcss_core::location::Location;
 
 // fuzz_target!(|data: &[u8]| {
 //     if let Ok(s) = std::str::from_utf8(data) {
diff --git a/oxide/crates/core/src/cache.rs b/oxide/crates/core/src/cache.rs
new file mode 100644
index 000000000..df0918b5f
--- /dev/null
+++ b/oxide/crates/core/src/cache.rs
@@ -0,0 +1,57 @@
+use std::{path::PathBuf, time::SystemTime};
+use std::fs::{self};
+use fxhash::{FxHashMap, FxHashSet};
+
+/// A cache to manage the list of candidates and the last modified time of files
+/// in the project. This is used to avoid recompiling files that haven't changed.
+#[derive(Default)]
+pub struct Cache {
+    mtimes: FxHashMap<PathBuf, SystemTime>,
+    candidates: FxHashSet<String>,
+}
+
+impl Cache {
+    pub fn clear(&mut self) {
+        self.mtimes.clear();
+        self.candidates.clear();
+    }
+
+    pub fn add_candidates(&mut self, additional_candidates: Vec<String>) {
+        self.candidates.extend(additional_candidates);
+    }
+
+    pub fn get_candidates(&self) -> Vec<String> {
+        let mut result = vec![];
+        result.extend(self.candidates.iter().cloned());
+        result.sort();
+        result
+    }
+
+    pub fn find_modified_files<'a>(&mut self, paths: &'a Vec<PathBuf>) -> Vec<&'a PathBuf> {
+        // Get a list of the files that have been modified since the last time we checked
+        let mut modified: Vec<&PathBuf> = vec![];
+
+        for path in paths {
+            let curr = fs::metadata(path)
+                .and_then(|m| m.modified())
+                .unwrap_or(SystemTime::now());
+
+            let prev = self.mtimes.insert(path.clone(), curr);
+
+            match prev {
+                // Only add the file to the modified list if the mod time has changed
+                Some(prev) if prev != curr => {
+                    modified.push(path);
+                },
+
+                // If the file was already in the cache then we don't need to do anything
+                Some(_) => (),
+
+                // If the file didn't exist before then it's been modified
+                None => modified.push(path),
+            }
+        }
+
+        modified
+    }
+}
diff --git a/oxide/crates/core/src/cursor.rs b/oxide/crates/core/src/cursor.rs
new file mode 100644
index 000000000..0c422c6ff
--- /dev/null
+++ b/oxide/crates/core/src/cursor.rs
@@ -0,0 +1,159 @@
+use std::{ascii::escape_default, fmt::Display};
+
+#[derive(Debug, Clone)]
+pub struct Cursor<'a> {
+    // The input we're scanning
+    pub input: &'a [u8],
+
+    // The location of the cursor in the input
+    pub pos: usize,
+
+    /// Is the cursor at the start of the input
+    pub at_start: bool,
+
+    /// Is the cursor at the end of the input
+    pub at_end: bool,
+
+    /// The previously consumed character
+    /// If `at_start` is true, this will be NUL
+    pub prev: u8,
+
+    /// The current character
+    pub curr: u8,
+
+    /// The upcoming character (if any)
+    /// If `at_end` is true, this will be NUL
+    pub next: u8,
+}
+
+impl<'a> Cursor<'a> {
+    pub fn new(input: &'a [u8]) -> Self {
+        let mut cursor = Self {
+            input,
+            pos: 0,
+            at_start: true,
+            at_end: false,
+            prev: 0x00,
+            curr: 0x00,
+            next: 0x00,
+        };
+        cursor.move_to(0);
+        cursor
+    }
+
+    pub fn rewind_by(&mut self, amount: usize) {
+        self.move_to(self.pos.saturating_sub(amount));
+    }
+
+    pub fn advance_by(&mut self, amount: usize) {
+        self.move_to(self.pos.saturating_add(amount));
+    }
+
+    pub fn move_to(&mut self, pos: usize) {
+        let len = self.input.len();
+        let pos = pos.clamp(0, len);
+
+        self.pos = pos;
+        self.at_start = pos == 0;
+        self.at_end = pos + 1 >= len;
+
+        self.prev = if pos > 0 { self.input[pos - 1] } else { 0x00 };
+        self.curr = if pos < len { self.input[pos] } else { 0x00 };
+        self.next = if pos + 1 < len {
+            self.input[pos + 1]
+        } else {
+            0x00
+        };
+    }
+}
+
+impl<'a> Display for Cursor<'a> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let len = self.input.len().to_string();
+
+        let pos = format!("{: >len_count$}", self.pos, len_count = len.len());
+        write!(f, "{}/{} ", pos, len)?;
+
+        if self.at_start {
+            write!(f, "S ")?;
+        } else if self.at_end {
+            write!(f, "E ")?;
+        } else {
+            write!(f, "M ")?;
+        }
+
+        fn to_str(c: u8) -> String {
+            if c == 0x00 {
+                "NUL".into()
+            } else {
+                format!("{:?}", escape_default(c).to_string())
+            }
+        }
+
+        write!(
+            f,
+            "[{} {} {}]",
+            to_str(self.prev),
+            to_str(self.curr),
+            to_str(self.next)
+        )
+    }
+}
+
+#[cfg(test)]
+mod test {
+    use super::*;
+
+    #[test]
+    fn test_cursor() {
+        let mut cursor = Cursor::new(b"hello world");
+        assert_eq!(cursor.pos, 0);
+        assert!(cursor.at_start);
+        assert!(!cursor.at_end);
+        assert_eq!(cursor.prev, 0x00);
+        assert_eq!(cursor.curr, b'h');
+        assert_eq!(cursor.next, b'e');
+
+        cursor.advance_by(1);
+        assert_eq!(cursor.pos, 1);
+        assert!(!cursor.at_start);
+        assert!(!cursor.at_end);
+        assert_eq!(cursor.prev, b'h');
+        assert_eq!(cursor.curr, b'e');
+        assert_eq!(cursor.next, b'l');
+
+        // Advancing too far should stop at the end
+        cursor.advance_by(10);
+        assert_eq!(cursor.pos, 11);
+        assert!(!cursor.at_start);
+        assert!(cursor.at_end);
+        assert_eq!(cursor.prev, b'd');
+        assert_eq!(cursor.curr, 0x00);
+        assert_eq!(cursor.next, 0x00);
+
+        // Can't advance past the end
+        cursor.advance_by(1);
+        assert_eq!(cursor.pos, 11);
+        assert!(!cursor.at_start);
+        assert!(cursor.at_end);
+        assert_eq!(cursor.prev, b'd');
+        assert_eq!(cursor.curr, 0x00);
+        assert_eq!(cursor.next, 0x00);
+
+        cursor.rewind_by(1);
+        assert_eq!(cursor.pos, 10);
+        assert!(!cursor.at_start);
+        assert!(cursor.at_end);
+        assert_eq!(cursor.prev, b'l');
+        assert_eq!(cursor.curr, b'd');
+        assert_eq!(cursor.next, 0x00);
+
+        cursor.rewind_by(10);
+        assert_eq!(cursor.pos, 0);
+        assert!(cursor.at_start);
+        assert!(!cursor.at_end);
+        assert_eq!(cursor.prev, 0x00);
+        assert_eq!(cursor.curr, b'h');
+        assert_eq!(cursor.next, b'e');
+    }
+}
diff --git a/crates/oxide/src/fast_skip.rs b/oxide/crates/core/src/fast_skip.rs
similarity index 97%
rename from crates/oxide/src/fast_skip.rs
rename to oxide/crates/core/src/fast_skip.rs
index 54930548c..488e61bd6 100644
--- a/crates/oxide/src/fast_skip.rs
+++ b/oxide/crates/core/src/fast_skip.rs
@@ -10,7 +10,7 @@ pub fn fast_skip(cursor: &Cursor) -> Option<usize> {
         return None;
     }
 
-    if !cursor.curr().is_ascii_whitespace() {
+    if !cursor.curr.is_ascii_whitespace() {
         return None;
     }
 
diff --git a/crates/oxide/src/scanner/fixtures/binary-extensions.txt b/oxide/crates/core/src/fixtures/binary-extensions.txt
similarity index 94%
rename from crates/oxide/src/scanner/fixtures/binary-extensions.txt
rename to oxide/crates/core/src/fixtures/binary-extensions.txt
index d26c1c222..e4e7af7cf 100644
--- a/crates/oxide/src/scanner/fixtures/binary-extensions.txt
+++ b/oxide/crates/core/src/fixtures/binary-extensions.txt
@@ -3,6 +3,7 @@
 3g2
 3gp
 7z
+DS_Store
 a
 aac
 adp
@@ -37,7 +38,6 @@ cpio
 cr2
 cur
 dat
-db
 dcm
 deb
 dex
@@ -51,7 +51,6 @@ docx
 dot
 dotm
 dra
-DS_Store
 dsk
 dts
 dtshd
@@ -66,7 +65,6 @@ eol
 eot
 epub
 exe
-exr
 f4v
 fbs
 fh
@@ -79,7 +77,6 @@ fpx
 fst
 fvt
 g3
-geojson
 gh
 gif
 graffle
@@ -88,7 +85,6 @@ gzip
 h261
 h263
 h264
-hdr
 icns
 ico
 ief
@@ -135,12 +131,10 @@ mpg
 mpga
 mxu
 nef
-node
 npx
 numbers
 nupkg
 o
-oa
 odp
 ods
 odt
@@ -157,7 +151,6 @@ pdf
 pea
 pgm
 pic
-plist
 png
 pnm
 pot
@@ -203,13 +196,13 @@ snap
 snk
 so
 sqlite
+sqlite
+sqlite3
 sqlite3
 stl
-storedata
 sub
 suo
 swf
-symbolsarchive
 tar
 tbz
 tbz2
@@ -232,7 +225,6 @@ uvu
 viv
 vob
 war
-wasm
 wav
 wax
 wbmp
diff --git a/crates/oxide/src/scanner/fixtures/ignored-extensions.txt b/oxide/crates/core/src/fixtures/ignored-extensions.txt
similarity index 86%
rename from crates/oxide/src/scanner/fixtures/ignored-extensions.txt
rename to oxide/crates/core/src/fixtures/ignored-extensions.txt
index 4dc099e0d..f147c24fe 100644
--- a/crates/oxide/src/scanner/fixtures/ignored-extensions.txt
+++ b/oxide/crates/core/src/fixtures/ignored-extensions.txt
@@ -1,6 +1,6 @@
+css
 less
 lock
 sass
 scss
 styl
-log
diff --git a/crates/oxide/src/scanner/fixtures/ignored-files.txt b/oxide/crates/core/src/fixtures/ignored-files.txt
similarity index 65%
rename from crates/oxide/src/scanner/fixtures/ignored-files.txt
rename to oxide/crates/core/src/fixtures/ignored-files.txt
index 1e8f1029f..45d4ced87 100644
--- a/crates/oxide/src/scanner/fixtures/ignored-files.txt
+++ b/oxide/crates/core/src/fixtures/ignored-files.txt
@@ -1,6 +1,3 @@
 package-lock.json
 pnpm-lock.yaml
 bun.lockb
-.gitignore
-.env
-.env.*
diff --git a/crates/oxide/src/scanner/fixtures/template-extensions.txt b/oxide/crates/core/src/fixtures/template-extensions.txt
similarity index 93%
rename from crates/oxide/src/scanner/fixtures/template-extensions.txt
rename to oxide/crates/core/src/fixtures/template-extensions.txt
index 096932b6e..c059eff3a 100644
--- a/crates/oxide/src/scanner/fixtures/template-extensions.txt
+++ b/oxide/crates/core/src/fixtures/template-extensions.txt
@@ -2,10 +2,6 @@
 html
 pug
 
-# Glimmer
-gjs
-gts
-
 # JS
 astro
 cjs
diff --git a/oxide/crates/core/src/glob.rs b/oxide/crates/core/src/glob.rs
new file mode 100644
index 000000000..6d688f421
--- /dev/null
+++ b/oxide/crates/core/src/glob.rs
@@ -0,0 +1,456 @@
+use std::iter;
+use std::path::{Path, PathBuf};
+
+pub fn fast_glob(
+    base_path: &Path,
+    patterns: &Vec<String>,
+) -> Result<impl iter::Iterator<Item = PathBuf>, std::io::Error> {
+    Ok(get_fast_patterns(base_path, patterns)
+        .into_iter()
+        .flat_map(|(base_path, patterns)| {
+            globwalk::GlobWalkerBuilder::from_patterns(base_path, &patterns)
+                .follow_links(true)
+                .build()
+                .unwrap()
+                .filter_map(Result::ok)
+                .map(|file| file.path().to_path_buf())
+        }))
+}
+
+/// This function attempts to optimize the glob patterns to improve performance. The problem is
+/// that if you run the following command:
+/// ```sh
+/// tailwind --pwd ./project --content "{pages,components}/**/*.js"
+/// ```
+/// Then the globwalk library will scan every single file and folder in the `./project` folder,
+/// then it will check if the file matches the glob pattern and keep it if it does. This is very
+/// slow, because if you have vendor folders (like node_modules), then this will take a while...
+///
+/// Instead, we will optimize the pattern, and move as many directories as possible to the base
+/// path. This will allow us to scope the globwalk library to only scan the directories that we
+/// care about.
+///
+/// This means, that the following command:
+/// ```sh
+/// tailwind --pwd ./project --content "{pages,components}/**/*.js"
+/// ```
+///
+/// Will now conceptually do this instead behind the scenes:
+/// ```sh
+/// tailwind --pwd ./project/pages --content "**/*.js"
+/// tailwind --pwd ./project/components --content "**/*.js"
+/// ```
+fn get_fast_patterns(base_path: &Path, patterns: &Vec<String>) -> Vec<(PathBuf, Vec<String>)> {
+    let mut optimized_patterns: Vec<(PathBuf, Vec<String>)> = vec![];
+
+    for pattern in patterns {
+        let is_negated = pattern.starts_with('!');
+        let mut pattern = pattern.clone();
+        if is_negated {
+            pattern.remove(0);
+        }
+
+        let mut folders = pattern.split('/').collect::<Vec<_>>();
+
+        if folders.len() <= 1 {
+            // No paths we can simplify, so let's use it as-is.
+            optimized_patterns.push((base_path.to_path_buf(), vec![pattern]));
+        } else {
+            // We do have folders because `/` exists. Let's try to simplify the globs!
+            // Safety: We know that the length is greater than 1, so we can safely unwrap.
+            let file_pattern = folders.pop().unwrap();
+            let all_folders = folders.clone();
+            let mut temp_paths = vec![base_path.to_path_buf()];
+
+            let mut bail = false;
+
+            for (i, folder) in folders.into_iter().enumerate() {
+                // There is a wildcard in the folder, so we have to bail now... 😢 But this also
+                // means that we can skip looking at the rest of the folders, so there is at least
+                // this small optimization we can apply!
+                if folder.contains('*') {
+                    // Get all the remaining folders, attach the existing file_pattern so that this
+                    // can now be the final pattern we use.
+                    let mut remaining_folders = all_folders[i..].to_vec();
+                    remaining_folders.push(file_pattern);
+
+                    let pattern = remaining_folders.join("/");
+                    for path in &temp_paths {
+                        optimized_patterns.push((path.to_path_buf(), vec![pattern.to_string()]));
+                    }
+
+                    bail = true;
+                    break;
+                }
+
+                // The folder is very likely using an expandable pattern which we can expand!
+                if folder.contains('{') && folder.contains('}') {
+                    let branches = expand_braces(folder);
+
+                    let existing_paths = temp_paths;
+                    temp_paths = branches
+                        .iter()
+                        .flat_map(|branch| {
+                            existing_paths
+                                .clone()
+                                .into_iter()
+                                .map(|path| path.join(branch))
+                                .collect::<Vec<_>>()
+                        })
+                        .collect::<Vec<_>>();
+                }
+                // The folder should just be a simple folder name without any glob magic. We should
+                // be able to safely add it to the existing paths.
+                else {
+                    temp_paths = temp_paths
+                        .into_iter()
+                        .map(|path| path.join(folder))
+                        .collect();
+                }
+            }
+
+            // As long as we didn't bail, we can now add the current expanded patterns to the
+            // optimized patterns.
+            if !bail {
+                for path in &temp_paths {
+                    optimized_patterns.push((path.to_path_buf(), vec![file_pattern.to_string()]));
+                }
+            }
+        }
+
+        // Ensure that we re-add all the `!` signs to the patterns.
+        if is_negated {
+            for (_, patterns) in &mut optimized_patterns {
+                for pattern in patterns {
+                    pattern.insert(0, '!');
+                }
+            }
+        }
+    }
+
+    optimized_patterns
+}
+
+/// Given this input: a-{b,c}-d-{e,f}
+/// We will get:
+/// [
+///   a-b-d-e
+///   a-b-d-f
+///   a-c-d-e
+///   a-c-d-f
+/// ]
+/// TODO: There is probably a way nicer way of doing this, but this works for now.
+fn expand_braces(input: &str) -> Vec<String> {
+    let mut result: Vec<String> = vec![];
+
+    let mut in_braces = false;
+    let mut last_char: char = '\0';
+
+    let mut current = String::new();
+
+    // Given the input: a-{b,c}-d-{e,f}-g
+    // The template will look like this: ["a-", "-d-", "g"].
+    let mut template: Vec<String> = vec![];
+
+    // The branches will look like this: [["b", "c"], ["e", "f"]].
+    let mut branches: Vec<Vec<String>> = vec![];
+
+    for (i, c) in input.char_indices() {
+        let is_escaped = i > 0 && last_char == '\\';
+        last_char = c;
+
+        match c {
+            '{' if !is_escaped => {
+                // Ensure that when a new set of braces is opened, that we at least have 1
+                // template.
+                if template.is_empty() {
+                    template.push(String::new());
+                }
+
+                in_braces = true;
+                branches.push(vec![]);
+                template.push(String::new());
+            }
+            '}' if !is_escaped => {
+                in_braces = false;
+                if let Some(last) = branches.last_mut() {
+                    last.push(current.clone());
+                }
+                current.clear();
+            }
+            ',' if !is_escaped && in_braces => {
+                if let Some(last) = branches.last_mut() {
+                    last.push(current.clone());
+                }
+                current.clear();
+            }
+            _ if in_braces => current.push(c),
+            _ => {
+                if template.is_empty() {
+                    template.push(String::new());
+                }
+
+                if let Some(last) = template.last_mut() {
+                    last.push(c);
+                }
+            }
+        };
+    }
+
+    // Ensure we have a string that we can start adding information too.
+    if !template.is_empty() && !branches.is_empty() {
+        result.push("".to_string());
+    }
+
+    // Let's try to generate everything!
+    for (i, template) in template.into_iter().enumerate() {
+        // Append current template string to all existing results.
+        result = result.into_iter().map(|x| x + &template).collect();
+
+        // Get the results, and copy it for every single branch.
+        if let Some(branches) = branches.get(i) {
+            result = branches
+                .iter()
+                .flat_map(|branch| {
+                    result
+                        .clone()
+                        .into_iter()
+                        .map(|x| x + branch)
+                        .collect::<Vec<_>>()
+                })
+                .collect::<Vec<_>>();
+        }
+    }
+
+    result
+}
+
+#[cfg(test)]
+mod tests {
+    use super::get_fast_patterns;
+    use std::path::PathBuf;
+
+    #[test]
+    fn it_should_keep_globs_that_start_with_file_wildcards_as_is() {
+        let actual = get_fast_patterns(&PathBuf::from("/projects"), &vec!["*.html".to_string()]);
+        let expected = vec![(PathBuf::from("/projects"), vec!["*.html".to_string()])];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn it_should_keep_globs_that_start_with_folder_wildcards_as_is() {
+        let actual = get_fast_patterns(&PathBuf::from("/projects"), &vec!["**/*.html".to_string()]);
+        let expected = vec![(PathBuf::from("/projects"), vec!["**/*.html".to_string()])];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn it_should_move_the_starting_folder_to_the_path() {
+        let actual = get_fast_patterns(
+            &PathBuf::from("/projects"),
+            &vec!["example/*.html".to_string()],
+        );
+        let expected = vec![(
+            PathBuf::from("/projects/example"),
+            vec!["*.html".to_string()],
+        )];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn it_should_move_the_starting_folders_to_the_path() {
+        let actual = get_fast_patterns(
+            &PathBuf::from("/projects"),
+            &vec!["example/other/*.html".to_string()],
+        );
+        let expected = vec![(
+            PathBuf::from("/projects/example/other"),
+            vec!["*.html".to_string()],
+        )];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn it_should_branch_expandable_folders() {
+        let actual = get_fast_patterns(
+            &PathBuf::from("/projects"),
+            &vec!["{foo,bar}/*.html".to_string()],
+        );
+        let expected = vec![
+            (PathBuf::from("/projects/foo"), vec!["*.html".to_string()]),
+            (PathBuf::from("/projects/bar"), vec!["*.html".to_string()]),
+        ];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn it_should_expand_multiple_expansions_in_the_same_folder() {
+        let actual = get_fast_patterns(
+            &PathBuf::from("/projects"),
+            &vec!["a-{b,c}-d-{e,f}-g/*.html".to_string()],
+        );
+        let expected = vec![
+            (
+                PathBuf::from("/projects/a-b-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-b-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+        ];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn multiple_expansions_per_folder_starting_at_the_root() {
+        let actual = get_fast_patterns(
+            &PathBuf::from("/projects"),
+            &vec!["{a,b}-c-{d,e}-f/{b,c}-d-{e,f}-g/*.html".to_string()],
+        );
+        let expected = vec![
+            (
+                PathBuf::from("/projects/a-c-d-f/b-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/b-c-d-f/b-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-e-f/b-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/b-c-e-f/b-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-d-f/c-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/b-c-d-f/c-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-e-f/c-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/b-c-e-f/c-d-e-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-d-f/b-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/b-c-d-f/b-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-e-f/b-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/b-c-e-f/b-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-d-f/c-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/b-c-d-f/c-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a-c-e-f/c-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/b-c-e-f/c-d-f-g"),
+                vec!["*.html".to_string()],
+            ),
+        ];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn it_should_stop_expanding_once_we_hit_a_wildcard() {
+        let actual = get_fast_patterns(
+            &PathBuf::from("/projects"),
+            &vec!["{foo,bar}/example/**/{baz,qux}/*.html".to_string()],
+        );
+        let expected = vec![
+            (
+                PathBuf::from("/projects/foo/example"),
+                vec!["**/{baz,qux}/*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/bar/example"),
+                vec!["**/{baz,qux}/*.html".to_string()],
+            ),
+        ];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn it_should_keep_the_negation_symbol_for_all_new_patterns() {
+        let actual = get_fast_patterns(
+            &PathBuf::from("/projects"),
+            &vec!["!{foo,bar}/*.html".to_string()],
+        );
+        let expected = vec![
+            (PathBuf::from("/projects/foo"), vec!["!*.html".to_string()]),
+            (PathBuf::from("/projects/bar"), vec!["!*.html".to_string()]),
+        ];
+
+        assert_eq!(actual, expected,);
+    }
+
+    #[test]
+    fn it_should_expand_a_complex_example() {
+        let actual = get_fast_patterns(
+            &PathBuf::from("/projects"),
+            &vec!["a/{b,c}/d/{e,f}/g/*.html".to_string()],
+        );
+        let expected = vec![
+            (
+                PathBuf::from("/projects/a/b/d/e/g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a/c/d/e/g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a/b/d/f/g"),
+                vec!["*.html".to_string()],
+            ),
+            (
+                PathBuf::from("/projects/a/c/d/f/g"),
+                vec!["*.html".to_string()],
+            ),
+        ];
+
+        assert_eq!(actual, expected,);
+    }
+}
diff --git a/oxide/crates/core/src/lib.rs b/oxide/crates/core/src/lib.rs
new file mode 100644
index 000000000..6f04adae0
--- /dev/null
+++ b/oxide/crates/core/src/lib.rs
@@ -0,0 +1,490 @@
+use crate::parser::Extractor;
+use cache::Cache;
+use fxhash::FxHashSet;
+use ignore::DirEntry;
+use ignore::WalkBuilder;
+use lazy_static::lazy_static;
+use rayon::prelude::*;
+use std::cmp::Ordering;
+use std::path::Path;
+use std::path::PathBuf;
+use std::sync::Mutex;
+use tracing::event;
+use walkdir::WalkDir;
+
+pub mod cache;
+pub mod cursor;
+pub mod fast_skip;
+pub mod glob;
+pub mod parser;
+
+fn init_tracing() {
+    if !*SHOULD_TRACE {
+        return;
+    }
+
+    _ = tracing_subscriber::fmt()
+        .with_max_level(tracing::Level::INFO)
+        .with_span_events(tracing_subscriber::fmt::format::FmtSpan::ACTIVE)
+        .compact()
+        .try_init();
+}
+
+#[derive(Debug, Clone)]
+pub struct ChangedContent {
+    pub file: Option<PathBuf>,
+    pub content: Option<String>,
+}
+
+#[derive(Debug, Clone)]
+pub struct ScanOptions {
+    pub base: String,
+    pub globs: bool,
+}
+
+#[derive(Debug, Clone)]
+pub struct ScanResult {
+    pub candidates: Vec<String>,
+    pub files: Vec<String>,
+    pub globs: Vec<GlobEntry>,
+}
+
+#[derive(Debug, Clone)]
+pub struct GlobEntry {
+    pub base: String,
+    pub glob: String,
+}
+
+pub fn clear_cache() {
+    let mut cache = GLOBAL_CACHE.lock().unwrap();
+    cache.clear();
+}
+
+pub fn scan_dir(opts: ScanOptions) -> ScanResult {
+    init_tracing();
+
+    let root = Path::new(&opts.base);
+
+    let (files, dirs) = resolve_files(root);
+
+    let globs = if opts.globs {
+        resolve_globs(root, dirs)
+    } else {
+        vec![]
+    };
+
+    let mut cache = GLOBAL_CACHE.lock().unwrap();
+
+    let modified_files = cache.find_modified_files(&files);
+
+    let files = files.iter().map(|x| x.display().to_string()).collect();
+
+    if !modified_files.is_empty() {
+        let content: Vec<_> = modified_files
+            .into_iter()
+            .map(|file| ChangedContent {
+                file: Some(file.clone()),
+                content: None,
+            })
+            .collect();
+
+        let candidates = scan_files(content, IO::Parallel as u8 | Parsing::Parallel as u8);
+        cache.add_candidates(candidates);
+    }
+
+    ScanResult {
+        candidates: cache.get_candidates(),
+        files,
+        globs,
+    }
+}
+
+#[tracing::instrument(skip(root))]
+fn resolve_globs(root: &Path, dirs: Vec<PathBuf>) -> Vec<GlobEntry> {
+    let allowed_paths = FxHashSet::from_iter(dirs);
+
+    // A list of directory names where we can't use globs, but we should track each file
+    // individually instead. This is because these directories are often used for both source and
+    // destination files.
+    let mut forced_static_directories = vec![root.join("public")];
+
+    // A list of known extensions + a list of extensions we found in the project.
+    let mut found_extensions = FxHashSet::from_iter(
+        include_str!("fixtures/template-extensions.txt")
+            .trim()
+            .lines()
+            .filter(|x| !x.starts_with('#')) // Drop commented lines
+            .filter(|x| !x.is_empty()) // Drop empty lines
+            .map(|x| x.to_string()),
+    );
+
+    // All root directories.
+    let mut root_directories = FxHashSet::from_iter(vec![root.to_path_buf()]);
+
+    // All directories where we can safely use deeply nested globs to watch all files.
+    // In other comments we refer to these as "deep glob directories" or similar.
+    //
+    // E.g.: `./src/**/*.{html,js}`
+    let mut deep_globable_directories: FxHashSet<PathBuf> = FxHashSet::default();
+
+    // All directories where we can only use shallow globs to watch all direct files but not
+    // folders.
+    // In other comments we refer to these as "shallow glob directories" or similar.
+    //
+    // E.g.: `./src/*/*.{html,js}`
+    let mut shallow_globable_directories: FxHashSet<PathBuf> = FxHashSet::default();
+
+    // Collect all valid paths from the root. This will already filter out ignored files, unknown
+    // extensions and binary files.
+    let mut it = WalkDir::new(root)
+        // Sorting to make sure that we always see the directories before the files. Also sorting
+        // alphabetically by default.
+        .sort_by(
+            |a, z| match (a.file_type().is_dir(), z.file_type().is_dir()) {
+                (true, false) => Ordering::Less,
+                (false, true) => Ordering::Greater,
+                _ => a.file_name().cmp(z.file_name()),
+            },
+        )
+        .into_iter();
+
+    loop {
+        // We are only interested in valid entries
+        let entry = match it.next() {
+            Some(Ok(entry)) => entry,
+            _ => break,
+        };
+
+        // Ignore known directories that we don't want to traverse into.
+        if entry.file_type().is_dir() && entry.file_name() == ".git" {
+            it.skip_current_dir();
+            continue;
+        }
+
+        if entry.file_type().is_dir() {
+            // If we are in a directory where we know that we can't use any globs, then we have to
+            // track each file individually.
+            if forced_static_directories.contains(&entry.path().to_path_buf()) {
+                forced_static_directories.push(entry.path().to_path_buf());
+                root_directories.insert(entry.path().to_path_buf());
+                continue;
+            }
+
+            // If we are in a directory where the parent is a forced static directory, then this
+            // will become a forced static directory as well.
+            if forced_static_directories.contains(&entry.path().parent().unwrap().to_path_buf()) {
+                forced_static_directories.push(entry.path().to_path_buf());
+                root_directories.insert(entry.path().to_path_buf());
+                continue;
+            }
+
+            // If we are in a directory, and the directory is git ignored, then we don't have to
+            // descent into the directory. However, we have to make sure that we mark the _parent_
+            // directory as a shallow glob directory because using deep globs from any of the
+            // parent directories will include this ignored directory which should not be the case.
+            //
+            // Another important part is that if one of the ignored directories is a deep glob
+            // directory, then all of its parents (until the root) should be marked as shallow glob
+            // directories as well.
+            if !allowed_paths.contains(&entry.path().to_path_buf()) {
+                let mut parent = entry.path().parent();
+                while let Some(parent_path) = parent {
+                    // If the parent is already marked as a valid deep glob directory, then we have
+                    // to mark it as a shallow glob directory instead, because we won't be able to
+                    // use deep globs for this directory anymore.
+                    if deep_globable_directories.contains(parent_path) {
+                        deep_globable_directories.remove(parent_path);
+                        shallow_globable_directories.insert(parent_path.to_path_buf());
+                    }
+
+                    // If we reached the root, then we can stop.
+                    if parent_path == root {
+                        break;
+                    }
+
+                    // Mark the parent directory as a shallow glob directory and continue with its
+                    // parent.
+                    shallow_globable_directories.insert(parent_path.to_path_buf());
+                    parent = parent_path.parent();
+                }
+
+                it.skip_current_dir();
+                continue;
+            }
+
+            // If we are in a directory that is not git ignored, then we can mark this directory as
+            // a valid deep glob directory. This is only necessary if any of its parents aren't
+            // marked as deep glob directories already.
+            let mut found_deep_glob_parent = false;
+            let mut parent = entry.path().parent();
+            while let Some(parent_path) = parent {
+                // If we reached the root, then we can stop.
+                if parent_path == root {
+                    break;
+                }
+
+                // If the parent is already marked as a deep glob directory, then we can stop
+                // because this glob will match the current directory already.
+                if deep_globable_directories.contains(parent_path) {
+                    found_deep_glob_parent = true;
+                    break;
+                }
+
+                parent = parent_path.parent();
+            }
+
+            // If we didn't find a deep glob directory parent, then we can mark this directory as a
+            // deep glob directory (unless it is the root).
+            if !found_deep_glob_parent && entry.path() != root {
+                deep_globable_directories.insert(entry.path().to_path_buf());
+            }
+        }
+
+        // Handle allowed content paths
+        if is_allowed_content_path(entry.path())
+            && allowed_paths.contains(&entry.path().to_path_buf())
+        {
+            let path = entry.path();
+
+            // Collect the extension for future use when building globs.
+            if let Some(extension) = path.extension().and_then(|x| x.to_str()) {
+                found_extensions.insert(extension.to_string());
+            }
+        }
+    }
+
+    let extension_list = found_extensions.into_iter().collect::<Vec<_>>().join(",");
+
+    // Build the globs for all globable directories.
+    let shallow_globs = shallow_globable_directories.iter().map(|path| GlobEntry {
+        base: path.display().to_string(),
+        glob: format!("*/*.{{{}}}", extension_list),
+    });
+
+    let deep_globs = deep_globable_directories.iter().map(|path| GlobEntry {
+        base: path.display().to_string(),
+        glob: format!("**/*.{{{}}}", extension_list),
+    });
+
+    shallow_globs.chain(deep_globs).collect::<Vec<_>>()
+}
+
+#[tracing::instrument(skip(root))]
+fn resolve_files(root: &Path) -> (Vec<PathBuf>, Vec<PathBuf>) {
+    let mut files: Vec<PathBuf> = vec![];
+    let mut dirs: Vec<PathBuf> = vec![];
+
+    for entry in resolve_allowed_paths(root) {
+        let Some(file_type) = entry.file_type() else {
+            continue;
+        };
+
+        if file_type.is_file() {
+            files.push(entry.into_path());
+        } else if file_type.is_dir() {
+            dirs.push(entry.into_path());
+        }
+    }
+
+    (files, dirs)
+}
+
+#[tracing::instrument(skip(root))]
+pub fn resolve_allowed_paths(root: &Path) -> impl Iterator<Item = DirEntry> {
+    WalkBuilder::new(root)
+        .hidden(false)
+        .require_git(false)
+        .filter_entry(|entry| match entry.file_type() {
+            Some(file_type) if file_type.is_dir() => match entry.file_name().to_str() {
+                Some(dir) => !IGNORED_CONTENT_DIRS.contains(&dir),
+                None => false,
+            },
+            Some(file_type) if file_type.is_file() || file_type.is_symlink() => {
+                is_allowed_content_path(entry.path())
+            }
+            _ => false,
+        })
+        .build()
+        .filter_map(Result::ok)
+}
+
+lazy_static! {
+    static ref BINARY_EXTENSIONS: Vec<&'static str> =
+        include_str!("fixtures/binary-extensions.txt")
+            .trim()
+            .lines()
+            .collect::<Vec<_>>();
+    static ref IGNORED_EXTENSIONS: Vec<&'static str> =
+        include_str!("fixtures/ignored-extensions.txt")
+            .trim()
+            .lines()
+            .collect::<Vec<_>>();
+    static ref IGNORED_FILES: Vec<&'static str> = include_str!("fixtures/ignored-files.txt")
+        .trim()
+        .lines()
+        .collect::<Vec<_>>();
+    static ref IGNORED_CONTENT_DIRS: Vec<&'static str> = vec![".git"];
+    static ref SHOULD_TRACE: bool = {
+        matches!(std::env::var("DEBUG"), Ok(value) if value.eq("*") || value.eq("1") || value.eq("true") || value.contains("tailwind"))
+    };
+
+    /// Track file modification times and cache candidates. This cache lives for the lifetime of
+    /// the process and simply adds candidates when files are modified. Since candidates aren't
+    /// removed, incremental builds may contain extra candidates.
+    static ref GLOBAL_CACHE: Mutex<Cache> = {
+        Mutex::new(Cache::default())
+    };
+}
+
+pub fn is_allowed_content_path(path: &Path) -> bool {
+    let path = PathBuf::from(path);
+
+    // Skip known ignored files
+    if path
+        .file_name()
+        .unwrap()
+        .to_str()
+        .map(|s| IGNORED_FILES.contains(&s))
+        .unwrap_or(false)
+    {
+        return false;
+    }
+
+    // Skip known ignored extensions
+    path.extension()
+        .map(|s| s.to_str().unwrap_or_default())
+        .map(|ext| !IGNORED_EXTENSIONS.contains(&ext) && !BINARY_EXTENSIONS.contains(&ext))
+        .unwrap_or(false)
+}
+
+#[derive(Debug)]
+pub enum IO {
+    Sequential = 0b0001,
+    Parallel = 0b0010,
+}
+
+impl From<u8> for IO {
+    fn from(item: u8) -> Self {
+        match item & 0b0011 {
+            0b0001 => IO::Sequential,
+            0b0010 => IO::Parallel,
+            _ => unimplemented!("Unknown 'IO' strategy"),
+        }
+    }
+}
+
+#[derive(Debug)]
+pub enum Parsing {
+    Sequential = 0b0100,
+    Parallel = 0b1000,
+}
+
+impl From<u8> for Parsing {
+    fn from(item: u8) -> Self {
+        match item & 0b1100 {
+            0b0100 => Parsing::Sequential,
+            0b1000 => Parsing::Parallel,
+            _ => unimplemented!("Unknown 'Parsing' strategy"),
+        }
+    }
+}
+
+#[tracing::instrument(skip(input, options))]
+pub fn scan_files(input: Vec<ChangedContent>, options: u8) -> Vec<String> {
+    match (IO::from(options), Parsing::from(options)) {
+        (IO::Sequential, Parsing::Sequential) => parse_all_blobs_sync(read_all_files_sync(input)),
+        (IO::Sequential, Parsing::Parallel) => parse_all_blobs(read_all_files_sync(input)),
+        (IO::Parallel, Parsing::Sequential) => parse_all_blobs_sync(read_all_files(input)),
+        (IO::Parallel, Parsing::Parallel) => parse_all_blobs(read_all_files(input)),
+    }
+}
+
+#[tracing::instrument(skip(changed_content))]
+fn read_all_files(changed_content: Vec<ChangedContent>) -> Vec<Vec<u8>> {
+    event!(
+        tracing::Level::INFO,
+        "Reading {:?} file(s)",
+        changed_content.len()
+    );
+
+    changed_content
+        .into_par_iter()
+        .map(|c| match (c.file, c.content) {
+            (Some(file), None) => match std::fs::read(file) {
+                Ok(content) => content,
+                Err(e) => {
+                    event!(tracing::Level::ERROR, "Failed to read file: {:?}", e);
+                    Default::default()
+                }
+            },
+            (None, Some(content)) => content.into_bytes(),
+            _ => Default::default(),
+        })
+        .collect()
+}
+
+#[tracing::instrument(skip(changed_content))]
+fn read_all_files_sync(changed_content: Vec<ChangedContent>) -> Vec<Vec<u8>> {
+    event!(
+        tracing::Level::INFO,
+        "Reading {:?} file(s)",
+        changed_content.len()
+    );
+
+    changed_content
+        .into_iter()
+        .filter_map(|c| match (c.file, c.content) {
+            (Some(file), None) => std::fs::read(file).ok(),
+            (None, Some(content)) => Some(content.into_bytes()),
+            _ => Default::default(),
+        })
+        .collect()
+}
+
+#[tracing::instrument(skip(blobs))]
+fn parse_all_blobs(blobs: Vec<Vec<u8>>) -> Vec<String> {
+    let input: Vec<_> = blobs.iter().map(|blob| &blob[..]).collect();
+    let input = &input[..];
+
+    let mut result: Vec<String> = input
+        .par_iter()
+        .map(|input| Extractor::unique(input, Default::default()))
+        .reduce(Default::default, |mut a, b| {
+            a.extend(b);
+            a
+        })
+        .into_iter()
+        .map(|s| {
+            // SAFETY: When we parsed the candidates, we already guaranteed that the byte slices
+            // are valid, therefore we don't have to re-check here when we want to convert it back
+            // to a string.
+            unsafe { String::from_utf8_unchecked(s.to_vec()) }
+        })
+        .collect();
+    result.sort();
+    result
+}
+
+#[tracing::instrument(skip(blobs))]
+fn parse_all_blobs_sync(blobs: Vec<Vec<u8>>) -> Vec<String> {
+    let input: Vec<_> = blobs.iter().map(|blob| &blob[..]).collect();
+    let input = &input[..];
+
+    let mut result: Vec<String> = input
+        .iter()
+        .map(|input| Extractor::unique(input, Default::default()))
+        .fold(FxHashSet::default(), |mut a, b| {
+            a.extend(b);
+            a
+        })
+        .into_iter()
+        .map(|s| {
+            // SAFETY: When we parsed the candidates, we already guaranteed that the byte slices
+            // are valid, therefore we don't have to re-check here when we want to convert it back
+            // to a string.
+            unsafe { String::from_utf8_unchecked(s.to_vec()) }
+        })
+        .collect();
+    result.sort();
+    result
+}
diff --git a/oxide/crates/core/src/parser.rs b/oxide/crates/core/src/parser.rs
new file mode 100644
index 000000000..ad612f902
--- /dev/null
+++ b/oxide/crates/core/src/parser.rs
@@ -0,0 +1,1427 @@
+use crate::{cursor::Cursor, fast_skip::fast_skip};
+use bstr::ByteSlice;
+use fxhash::FxHashSet;
+use tracing::trace;
+
+#[derive(Debug, PartialEq, Eq, Clone)]
+pub enum ParseAction<'a> {
+    Consume,
+    Skip,
+    RestartAt(usize),
+
+    SingleCandidate(&'a [u8]),
+    MultipleCandidates(Vec<&'a [u8]>),
+    Done,
+}
+
+#[derive(Debug, PartialEq, Eq, Clone)]
+pub enum Bracketing<'a> {
+    Included(&'a [u8]),
+    Wrapped(&'a [u8]),
+    None,
+}
+
+#[derive(Debug, PartialEq, Eq, Clone, Copy)]
+pub struct SplitCandidate<'a> {
+    variant: &'a [u8],
+    utility: &'a [u8],
+}
+
+#[derive(Debug, PartialEq, Eq, Clone, Copy)]
+pub enum ValidationResult {
+    Invalid,
+    Valid,
+    Restart,
+}
+
+#[derive(Default)]
+pub struct ExtractorOptions {
+    pub preserve_spaces_in_arbitrary: bool,
+}
+
+pub struct Extractor<'a> {
+    opts: ExtractorOptions,
+
+    input: &'a [u8],
+    cursor: Cursor<'a>,
+
+    idx_start: usize,
+    idx_end: usize,
+    idx_last: usize,
+    idx_arbitrary_start: usize,
+
+    in_arbitrary: bool,
+    in_candidate: bool,
+    in_escape: bool,
+
+    discard_next: bool,
+
+    quote_stack: Vec<u8>,
+    bracket_stack: Vec<u8>,
+}
+
+impl<'a> Extractor<'a> {
+    pub fn all(input: &'a [u8], opts: ExtractorOptions) -> Vec<&'a [u8]> {
+        Self::new(input, opts).flatten().collect()
+    }
+
+    pub fn unique(input: &'a [u8], opts: ExtractorOptions) -> FxHashSet<&'a [u8]> {
+        let mut candidates: FxHashSet<&[u8]> = Default::default();
+        candidates.reserve(100);
+        candidates.extend(Self::new(input, opts).flatten());
+        candidates
+    }
+
+    pub fn unique_ord(input: &'a [u8], opts: ExtractorOptions) -> Vec<&'a [u8]> {
+        // This is an inefficient way to get an ordered, unique
+        // list as a Vec but it is only meant for testing.
+        let mut candidates = Self::all(input, opts);
+        let mut unique_list = FxHashSet::default();
+        unique_list.reserve(candidates.len());
+        candidates.retain(|c| unique_list.insert(*c));
+
+        candidates
+    }
+}
+
+impl<'a> Extractor<'a> {
+    pub fn new(input: &'a [u8], opts: ExtractorOptions) -> Self {
+        Self {
+            opts,
+            input,
+            cursor: Cursor::new(input),
+
+            idx_start: 0,
+            idx_end: 0,
+            idx_arbitrary_start: 0,
+
+            in_arbitrary: false,
+            in_candidate: false,
+            in_escape: false,
+
+            discard_next: false,
+
+            idx_last: input.len(),
+            quote_stack: Vec::with_capacity(8),
+            bracket_stack: Vec::with_capacity(8),
+        }
+    }
+}
+
+/// Helpers
+impl<'a> Extractor<'a> {
+    #[inline(always)]
+    fn in_quotes(&self) -> bool {
+        !self.quote_stack.is_empty()
+    }
+
+    #[inline(always)]
+    fn get_current_candidate(&mut self) -> ParseAction<'a> {
+        if self.discard_next {
+            return ParseAction::Skip;
+        }
+
+        let mut candidate = &self.input[self.idx_start..=self.idx_end];
+
+        // The bracket stack is not empty, which means that we are dealing with unbalanced
+        // brackets.
+        if !self.bracket_stack.is_empty() {
+            return ParseAction::Skip;
+        }
+
+        while !candidate.is_empty() {
+            match Extractor::is_valid_candidate_string(candidate) {
+                ValidationResult::Valid => return ParseAction::SingleCandidate(candidate),
+                ValidationResult::Restart => return ParseAction::RestartAt(self.idx_start + 1),
+                _ => {}
+            }
+
+            match candidate.split_last() {
+                // At this point the candidate is technically invalid, however it can be that it
+                // has a few dangling characters attached to it. For example, think about a
+                // JavaScript object:
+                //
+                // ```js
+                // { underline: true }
+                // ```
+                //
+                // The candidate at this point will be `underline:`, which is invalid. However, we
+                // can assume in this case that the `:` should not be there, and therefore we can
+                // try to slice it off and retry the validation.
+                Some((b':' | b'/' | b'.', head)) => {
+                    candidate = head;
+                }
+
+                // It could also be that we have the candidate is nested inside of bracket or quote
+                // pairs. In this case we want to retrieve the inner part and try to validate that
+                // inner part instead. For example, in a JavaScript array:
+                //
+                // ```js
+                // let myClasses = ["underline"]
+                // ```
+                //
+                // The `underline` is nested inside of quotes and in square brackets. Let's try to
+                // get the inner part and validate that instead.
+                _ => match Self::slice_surrounding(candidate) {
+                    Some(shorter) if shorter != candidate => {
+                        candidate = shorter;
+                    }
+                    _ => break,
+                },
+            }
+        }
+
+        ParseAction::Consume
+    }
+
+    #[inline(always)]
+    fn split_candidate(candidate: &'a [u8]) -> SplitCandidate {
+        let mut brackets = 0;
+        let mut idx_end = 0;
+
+        for (n, c) in candidate.iter().enumerate() {
+            match c {
+                b'[' => brackets += 1,
+                b']' if brackets > 0 => brackets -= 1,
+                b':' if brackets == 0 => idx_end = n + 1,
+                _ => {}
+            }
+        }
+
+        SplitCandidate {
+            variant: &candidate[0..idx_end],
+            utility: &candidate[idx_end..],
+        }
+    }
+
+    #[inline(always)]
+    fn contains_in_constrained(candidate: &'a [u8], bytes: Vec<u8>) -> bool {
+        let mut brackets = 0;
+
+        for c in candidate {
+            match c {
+                b'[' => brackets += 1,
+                b']' if brackets > 0 => brackets -= 1,
+                _ if brackets == 0 && bytes.contains(c) => return true,
+                _ => {}
+            }
+        }
+
+        false
+    }
+
+    #[inline(always)]
+    fn is_valid_candidate_string(candidate: &'a [u8]) -> ValidationResult {
+        // Reject candidates that start with a capital letter
+        if candidate[0].is_ascii_uppercase() {
+            return ValidationResult::Invalid;
+        }
+
+        // Rejects candidates that end with "-" or "_"
+        if candidate.ends_with(b"-") || candidate.ends_with(b"_") {
+            return ValidationResult::Invalid;
+        }
+
+        // Reject candidates that are single camelCase words, e.g.: `useEffect`
+        if candidate.iter().all(|c| c.is_ascii_alphanumeric())
+            && candidate
+                .iter()
+                .any(|c| c.is_ascii_uppercase() || c.is_ascii_digit())
+        {
+            return ValidationResult::Invalid;
+        }
+
+        // Reject candidates that look like SVG path data, e.g.: `m32.368 m7.5`
+        if !candidate.contains(&b'-')
+            && !candidate.contains(&b':')
+            && candidate.iter().any(|c| c == &b'.' || c.is_ascii_digit())
+        {
+            return ValidationResult::Invalid;
+        }
+
+        // Reject candidates that look like version constraints or email addresses, e.g.: `next@latest`, `bob@example.com`
+        if candidate
+            .iter()
+            .all(|c| c.is_ascii_alphanumeric() || c == &b'.' || c == &b'-' || c == &b'@')
+            && candidate[1..].contains(&b'@')
+        {
+            return ValidationResult::Invalid;
+        }
+
+        // Reject candidates that look like URLs
+        if candidate.starts_with(b"http://") || candidate.starts_with(b"https://") {
+            return ValidationResult::Invalid;
+        }
+
+        // Reject candidates that look short markdown links, e.g.: `[https://example.com]`
+        if candidate.starts_with(b"[http://") || candidate.starts_with(b"[https://") {
+            return ValidationResult::Invalid;
+        }
+
+        // Reject candidates that look like imports with path aliases, e.g.: `@/components/button`
+        if candidate.len() > 1 && candidate[1] == b'/' {
+            return ValidationResult::Invalid;
+        }
+
+        // Reject candidates that look like paths, e.g.: `app/assets/stylesheets`
+        if !candidate.contains(&b':') && !candidate.contains(&b'[') {
+            let mut count = 0;
+            for c in candidate {
+                if c == &b'/' {
+                    count += 1;
+                }
+                if count > 1 {
+                    return ValidationResult::Invalid;
+                }
+            }
+        }
+
+        let split_candidate = Extractor::split_candidate(candidate);
+
+        let mut offset = 0;
+        let mut offset_end = 0;
+        let utility = &split_candidate.utility;
+        let original_utility = &utility;
+
+        // Some special cases that we can ignore while validating
+        if utility.starts_with(b"!-") {
+            offset += 2;
+        } else if utility.starts_with(b"!") || utility.starts_with(b"-") {
+            offset += 1;
+        } else if utility.ends_with(b"!") {
+            offset_end += 1;
+        }
+
+        // These are allowed in arbitrary values and in variants but nowhere else
+        if Extractor::contains_in_constrained(utility, vec![b'<', b'>']) {
+            return ValidationResult::Restart;
+        }
+
+        // It's an arbitrary property
+        if utility.starts_with(b"[")
+            && utility.ends_with(b"]")
+            && (utility.starts_with(b"['")
+                || utility.starts_with(b"[\"")
+                || utility.starts_with(b"[`"))
+        {
+            return ValidationResult::Restart;
+        }
+
+        // Pluck out the part that we are interested in.
+        let utility = &utility[offset..(utility.len() - offset_end)];
+
+        // Validations
+        // We should have _something_
+        if utility.is_empty() {
+            return ValidationResult::Invalid;
+        }
+
+        // <sm is fine, but only as a variant
+        // TODO: We probably have to ensure that this `:` is not inside the arbitrary values...
+        if utility.starts_with(b"<") && !utility.contains(&b':') {
+            return ValidationResult::Invalid;
+        }
+
+        // Only variants can start with a number. E.g.: `2xl` is fine, but only as a variant.
+        // TODO: Adjust this if we run into issues with actual utilities starting with a number?
+        // TODO: We probably have to ensure that this `:` is not inside the arbitrary values...
+        if utility[0] >= b'0' && utility[0] <= b'9' && !utility.contains(&b':') {
+            return ValidationResult::Invalid;
+        }
+
+        // In case of an arbitrary property, we should have at least this structure: [a:b]
+        if utility.starts_with(b"[") && utility.ends_with(b"]") {
+            // [a:b] is at least 5 characters long
+            if utility.len() < 5 {
+                return ValidationResult::Invalid;
+            }
+
+            // Now that we validated that the candidate is technically fine, let's ensure that it
+            // doesn't start with a `-` because that would make it invalid for arbitrary properties.
+            if original_utility.starts_with(b"-") || original_utility.starts_with(b"!-") {
+                return ValidationResult::Invalid;
+            }
+
+            // Make sure an arbitrary property/value pair is valid, otherwise
+            // we may generate invalid CSS that will cause tools like PostCSS
+            // to crash when trying to parse the generated CSS.
+            if !Self::validate_arbitrary_property(utility) {
+                return ValidationResult::Invalid;
+            }
+
+            // The ':` must be preceded by a-Z0-9 because it represents a property name.
+            let colon = utility.find(":").unwrap();
+
+            if !utility
+                .chars()
+                .nth(colon - 1)
+                .map_or_else(|| false, |c| c.is_ascii_alphanumeric())
+            {
+                return ValidationResult::Invalid;
+            }
+
+            let property = &utility[1..colon];
+
+            // The property must match /^[a-zA-Z-][a-zA-Z0-9-_]+$/
+            if !property[0].is_ascii_alphabetic() && property[0] != b'-' {
+                return ValidationResult::Invalid;
+            }
+
+            if !property
+                .iter()
+                .all(|c| c.is_ascii_alphanumeric() || c == &b'-' || c == &b'_')
+            {
+                return ValidationResult::Invalid;
+            }
+        }
+
+        ValidationResult::Valid
+    }
+
+    /**
+     * Make sure an arbitrary property/value pair is valid, otherwise
+     * PostCSS may crash when trying to parse the generated CSS.
+     *
+     * `input` - the full candidate string, including the brackets
+     */
+    fn validate_arbitrary_property(candidate: &[u8]) -> bool {
+        if !candidate.starts_with(b"[") || !candidate.ends_with(b"]") {
+            return false;
+        }
+        let property = &candidate[1..candidate.len() - 1];
+        let is_custom_property = property.starts_with(b"--");
+        let Some(colon_pos) = property.find(b":") else {
+            return false;
+        };
+        if is_custom_property {
+            return true;
+        }
+
+        let mut stack = vec![];
+        let mut iter = property[colon_pos + 1..].iter();
+        while let Some(c) = iter.next() {
+            match c {
+                // The value portion cannot contain unquoted colons.
+                // E.g. `[foo::bar]` leads to "foo::bar; which errors because of the `:`.
+                b':' | b'{' | b'}' if stack.is_empty() => {
+                    return false;
+                }
+
+                b'\'' => {
+                    if let Some(b'\'') = stack.last() {
+                        _ = stack.pop()
+                    } else {
+                        stack.push(b'\'')
+                    }
+                }
+                b'"' => {
+                    if let Some(b'"') = stack.last() {
+                        _ = stack.pop()
+                    } else {
+                        stack.push(b'"')
+                    }
+                }
+
+                // Skip escaped characters.
+                b'\\' => {
+                    iter.next();
+                }
+
+                _ => {}
+            }
+        }
+
+        true
+    }
+
+    #[inline(always)]
+    fn parse_escaped(&mut self) -> ParseAction<'a> {
+        // If this character is escaped, we don't care about it.
+        // It gets consumed.
+        trace!("Escape::Consume");
+
+        self.in_escape = false;
+
+        ParseAction::Consume
+    }
+
+    #[inline(always)]
+    fn parse_arbitrary(&mut self) -> ParseAction<'a> {
+        // In this we could technically use memchr 6 times (then looped) to find the indexes / bounds of arbitrary valuesq
+        if self.in_escape {
+            return self.parse_escaped();
+        }
+
+        match self.cursor.curr {
+            b'\\' => {
+                // The `\` character is used to escape characters in arbitrary content _and_ to prevent the starting of arbitrary content
+                trace!("Arbitrary::Escape");
+                self.in_escape = true;
+            }
+
+            b'(' => self.bracket_stack.push(self.cursor.curr),
+            b')' => match self.bracket_stack.last() {
+                Some(&b'(') => {
+                    self.bracket_stack.pop();
+                }
+
+                // Last bracket is different compared to what we expect, therefore we are not in a
+                // valid arbitrary value.
+                _ if !self.in_quotes() => return ParseAction::Skip,
+
+                // We're probably in quotes or nested brackets, so we keep going
+                _ => {}
+            },
+
+            // Make sure the brackets are balanced
+            b'[' => self.bracket_stack.push(self.cursor.curr),
+            b']' => match self.bracket_stack.last() {
+                // We've ended a nested bracket
+                Some(&b'[') => {
+                    self.bracket_stack.pop();
+                }
+
+                // This is the last bracket meaning the end of arbitrary content
+                _ if !self.in_quotes() => {
+                    if matches!(self.cursor.next, b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9') {
+                        return ParseAction::Consume;
+                    }
+
+                    trace!("Arbitrary::End\t");
+                    self.in_arbitrary = false;
+
+                    if self.cursor.pos - self.idx_arbitrary_start == 1 {
+                        // We have an empty arbitrary value, which is not allowed
+                        return ParseAction::Skip;
+                    }
+                }
+
+                // We're probably in quotes or nested brackets, so we keep going
+                _ => {}
+            },
+
+            // Arbitrary values sometimes contain quotes
+            // These can "escape" the arbitrary value mode
+            // switching of `[` and `]` characters
+            b'"' | b'\'' | b'`' => match self.quote_stack.last() {
+                Some(&last_quote) if last_quote == self.cursor.curr => {
+                    trace!("Quote::End\t");
+                    self.quote_stack.pop();
+                }
+                _ => {
+                    trace!("Quote::Start\t");
+                    self.quote_stack.push(self.cursor.curr);
+                }
+            },
+
+            b' ' if !self.opts.preserve_spaces_in_arbitrary => {
+                trace!("Arbitrary::SkipAndEndEarly\t");
+
+                // Restart the parser ahead of the arbitrary value
+                // It may pick up more candidates
+                return ParseAction::RestartAt(self.idx_arbitrary_start + 1);
+            }
+
+            // Arbitrary values allow any character inside them
+            // Except spaces unless you are in loose mode
+            _ => {
+                trace!("Arbitrary::Consume\t");
+                // No need to move the end index because either the arbitrary value will end properly OR we'll hit invalid characters
+            }
+        }
+
+        ParseAction::Consume
+    }
+
+    #[inline(always)]
+    fn parse_start(&mut self) -> ParseAction<'a> {
+        match self.cursor.curr {
+            // Enter arbitrary value mode
+            b'[' => {
+                trace!("Arbitrary::Start\t");
+                self.in_arbitrary = true;
+                self.idx_arbitrary_start = self.cursor.pos;
+
+                ParseAction::Consume
+            }
+
+            // Allowed first characters.
+            b'@' | b'!' | b'-' | b'<' | b'>' | b'0'..=b'9' | b'a'..=b'z' | b'A'..=b'Z' | b'*' => {
+                // TODO: A bunch of characters that we currently support but maybe we only want it behind
+                // a flag. E.g.: `<sm`
+                // | '$' | '^' | '_'
+
+                // When the new candidate is preceded by a `:`, then we want to keep parsing, but
+                // throw away the full candidate because it can not be a valid candidate at the end
+                // of the day.
+                if self.cursor.prev == b':' {
+                    self.discard_next = true;
+                }
+
+                trace!("Candidate::Start\t");
+
+                ParseAction::Consume
+            }
+
+            _ => ParseAction::Skip,
+        }
+    }
+
+    #[inline(always)]
+    fn parse_continue(&mut self) -> ParseAction<'a> {
+        match self.cursor.curr {
+            // Enter arbitrary value mode
+            b'[' if matches!(
+                self.cursor.prev,
+                b'@' | b'-' | b' ' | b':' | b'/' | b'!' | b'\0'
+            ) =>
+            {
+                trace!("Arbitrary::Start\t");
+                self.in_arbitrary = true;
+                self.idx_arbitrary_start = self.cursor.pos;
+            }
+
+            // Can't enter arbitrary value mode
+            // This can't be a candidate
+            b'[' => {
+                trace!("Arbitrary::Skip_Start\t");
+
+                return ParseAction::Skip;
+            }
+
+            // A % can only appear at the end of the candidate itself. It can also only be after a
+            // digit 0-9. This covers the following cases:
+            // - from-15%
+            b'%' if self.cursor.prev.is_ascii_digit() => {
+                return match (self.cursor.at_end, self.cursor.next) {
+                    // End of string == end of candidate == okay
+                    (true, _) => ParseAction::Consume,
+
+                    // Looks like the end of a candidate == okay
+                    (_, b' ' | b'\'' | b'"' | b'`') => ParseAction::Consume,
+
+                    // Otherwise, not a valid character in a candidate
+                    _ => ParseAction::Skip,
+                };
+            }
+            b'%' => return ParseAction::Skip,
+
+            // < and > can only be part of a variant and only be the first or last character
+            b'<' | b'>' | b'*' => {
+                // Can only be the first or last character
+                //
+                // E.g.:
+                //
+                // - <sm:underline
+                //   ^
+                // - md>:underline
+                //     ^
+                if self.cursor.pos == self.idx_start || self.cursor.pos == self.idx_last {
+                    trace!("Candidate::Consume\t");
+                }
+                // If it is in the middle, it can only be part of a stacked variant
+                // - dark:<sm:underline
+                //        ^
+                // - dark:md>:underline
+                //          ^
+                else if self.cursor.prev == b':' || self.cursor.next == b':' {
+                    trace!("Candidate::Consume\t");
+                } else {
+                    return ParseAction::Skip;
+                }
+            }
+
+            // Allowed characters in the candidate itself
+            // None of these can come after a closing bracket `]`
+            b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9' | b'-' | b'_' | b'@'
+                if self.cursor.prev != b']' =>
+            {
+                /* TODO: The `b'@'` is necessary for custom separators like _@, maybe we can handle this in a better way... */
+                trace!("Candidate::Consume\t");
+            }
+
+            // A dot (.) can only appear in the candidate itself (not the arbitrary part), if the previous
+            // and next characters are both digits. This covers the following cases:
+            // - p-1.5
+            b'.' if self.cursor.prev.is_ascii_digit() => match self.cursor.next {
+                next if next.is_ascii_digit() => {
+                    trace!("Candidate::Consume\t");
+                }
+                _ => return ParseAction::Skip,
+            },
+
+            // Allowed characters in the candidate itself
+            // These MUST NOT appear at the end of the candidate
+            b'/' | b':' if !self.cursor.at_end => {
+                trace!("Candidate::Consume\t");
+            }
+
+            // The important character `!`, is allowed at the end of the candidate
+            b'!' => {
+                trace!("Candidate::Consume\t");
+            }
+
+            _ => return ParseAction::Skip,
+        }
+
+        ParseAction::Consume
+    }
+
+    #[inline(always)]
+    fn can_be_candidate(&mut self) -> bool {
+        self.in_candidate
+            && !self.in_arbitrary
+            && (0..=127).contains(&self.cursor.curr)
+            && (self.idx_start == 0 || self.input[self.idx_start - 1] <= 127)
+    }
+
+    #[inline(always)]
+    fn handle_skip(&mut self) {
+        // In all other cases, we skip characters and reset everything so we can make new candidates
+        trace!("Characters::Skip\t");
+        self.idx_start = self.cursor.pos;
+        self.idx_end = self.cursor.pos;
+        self.in_candidate = false;
+        self.in_arbitrary = false;
+        self.in_escape = false;
+    }
+
+    #[inline(always)]
+    fn parse_char(&mut self) -> ParseAction<'a> {
+        if self.in_arbitrary {
+            self.parse_arbitrary()
+        } else if self.in_candidate {
+            self.parse_continue()
+        } else if self.parse_start() == ParseAction::Consume {
+            self.in_candidate = true;
+            self.idx_start = self.cursor.pos;
+            self.idx_end = self.cursor.pos;
+
+            ParseAction::Consume
+        } else {
+            ParseAction::Skip
+        }
+    }
+
+    #[inline(always)]
+    fn yield_candidate(&mut self) -> ParseAction<'a> {
+        if self.can_be_candidate() {
+            self.get_current_candidate()
+        } else {
+            ParseAction::Consume
+        }
+    }
+
+    #[inline(always)]
+    fn restart(&mut self, pos: usize) {
+        trace!("Parser::Restart\t{}", pos);
+
+        self.idx_start = pos;
+        self.idx_end = pos;
+        self.idx_arbitrary_start = 0;
+
+        self.in_arbitrary = false;
+        self.in_candidate = false;
+        self.in_escape = false;
+
+        self.discard_next = false;
+
+        self.quote_stack.clear();
+        self.bracket_stack.clear();
+        self.cursor.move_to(pos);
+    }
+
+    #[inline(always)]
+    fn without_surrounding(&self) -> Bracketing<'a> {
+        let range = self.idx_start..=self.idx_end;
+        let clipped = &self.input[range];
+
+        Self::slice_surrounding(clipped)
+            .map(Bracketing::Included)
+            .or_else(|| {
+                if self.idx_start == 0 || self.idx_end + 1 == self.idx_last {
+                    return None;
+                }
+
+                let range = self.idx_start - 1..=self.idx_end + 1;
+                let clipped = &self.input[range];
+                Self::slice_surrounding(clipped).map(Bracketing::Wrapped)
+            })
+            .unwrap_or(Bracketing::None)
+    }
+
+    #[inline(always)]
+    fn is_balanced(input: &[u8]) -> bool {
+        let mut depth = 0isize;
+
+        for n in input {
+            match n {
+                b'[' | b'{' | b'(' => depth += 1,
+                b']' | b'}' | b')' => depth -= 1,
+                _ => continue,
+            }
+
+            if depth < 0 {
+                return false;
+            }
+        }
+
+        depth == 0
+    }
+
+    #[inline(always)]
+    fn slice_surrounding(input: &[u8]) -> Option<&[u8]> {
+        let mut prev = None;
+        let mut input = input;
+
+        loop {
+            let leading = input.first().unwrap_or(&0x00);
+            let trailing = input.last().unwrap_or(&0x00);
+
+            let needed = matches!(
+                (leading, trailing),
+                (b'(', b')')
+                    | (b'{', b'}')
+                    | (b'[', b']')
+                    | (b'"', b'"')
+                    | (b'`', b'`')
+                    | (b'\'', b'\'')
+            );
+
+            if needed {
+                prev = Some(input);
+                input = &input[1..input.len() - 1];
+                continue;
+            }
+            if Self::is_balanced(input) && prev.is_some() {
+                return Some(input);
+            }
+            return prev;
+        }
+    }
+
+    #[inline(always)]
+    fn parse_and_yield(&mut self) -> ParseAction<'a> {
+        trace!("Cursor {}", self.cursor);
+
+        // Fast skipping of invalid characters
+        let can_skip_whitespace = false; // if self.opts.preserve_spaces_in_arbitrary { !self.in_arbitrary } else { true };
+        if can_skip_whitespace {
+            if let Some(pos) = fast_skip(&self.cursor) {
+                trace!("FastSkip::Restart\t{}", pos);
+                return ParseAction::RestartAt(pos);
+            }
+        }
+
+        let action = self.parse_char();
+
+        match action {
+            ParseAction::RestartAt(_) => return action,
+            ParseAction::Consume => {
+                self.idx_end = self.cursor.pos;
+
+                // If we're still consuming characters, we keep going
+                // Only exception is if we've hit the end of the input
+                if !self.cursor.at_end {
+                    return action;
+                }
+            }
+            _ => {}
+        }
+
+        let action = self.yield_candidate();
+
+        match (&action, self.cursor.curr) {
+            (ParseAction::RestartAt(_), _) => action,
+            (_, 0x00) => ParseAction::Done,
+            (ParseAction::SingleCandidate(candidate), _) => self.generate_slices(candidate),
+            _ => ParseAction::RestartAt(self.cursor.pos + 1),
+        }
+    }
+
+    /// Peek inside `[]`, `{}`, and `()` pairs
+    /// to look for an additional candidate
+    #[inline(always)]
+    fn generate_slices(&mut self, candidate: &'a [u8]) -> ParseAction<'a> {
+        match self.without_surrounding() {
+            Bracketing::None => ParseAction::SingleCandidate(candidate),
+            Bracketing::Included(sliceable) if sliceable == candidate => {
+                ParseAction::SingleCandidate(candidate)
+            }
+            Bracketing::Included(sliceable) | Bracketing::Wrapped(sliceable) => {
+                let parts = vec![candidate, sliceable];
+                let parts = parts
+                    .into_iter()
+                    .filter(|v| !v.is_empty())
+                    .collect::<Vec<_>>();
+
+                ParseAction::MultipleCandidates(parts)
+            }
+        }
+    }
+}
+
+impl<'a> Iterator for Extractor<'a> {
+    type Item = Vec<&'a [u8]>;
+
+    fn next(&mut self) -> Option<Self::Item> {
+        if self.cursor.at_end {
+            return None;
+        }
+
+        loop {
+            let result = self.parse_and_yield();
+
+            // Cursor control
+            match result {
+                ParseAction::RestartAt(pos) => self.restart(pos),
+                _ => self.cursor.advance_by(1),
+            }
+
+            // Candidate state control
+            match result {
+                ParseAction::SingleCandidate(_) => self.handle_skip(),
+                ParseAction::MultipleCandidates(_) => self.handle_skip(),
+                _ => {}
+            }
+
+            // Iterator results
+            return match result {
+                ParseAction::SingleCandidate(candidate) => Some(vec![candidate]),
+                ParseAction::MultipleCandidates(candidates) => Some(candidates),
+                ParseAction::Done => None,
+                _ => continue,
+            };
+        }
+    }
+}
+
+#[cfg(test)]
+mod test {
+    use super::*;
+
+    fn _please_trace() {
+        tracing_subscriber::fmt()
+            .with_max_level(tracing::Level::TRACE)
+            .with_span_events(tracing_subscriber::fmt::format::FmtSpan::ACTIVE)
+            .compact()
+            .init();
+    }
+
+    fn run(input: &str, loose: bool) -> Vec<&str> {
+        Extractor::unique_ord(
+            input.as_bytes(),
+            ExtractorOptions {
+                preserve_spaces_in_arbitrary: loose,
+            },
+        )
+        .into_iter()
+        .map(|s| unsafe { std::str::from_utf8_unchecked(s) })
+        .collect()
+    }
+
+    #[test]
+    fn it_can_parse_simple_candidates() {
+        let candidates = run("underline", false);
+        assert_eq!(candidates, vec!["underline"]);
+    }
+
+    #[test]
+    fn it_can_parse_multiple_simple_utilities() {
+        let candidates = run("font-bold underline", false);
+        assert_eq!(candidates, vec!["font-bold", "underline"]);
+    }
+
+    #[test]
+    fn it_can_parse_simple_candidates_with_variants() {
+        let candidates = run("hover:underline", false);
+        assert_eq!(candidates, vec!["hover:underline"]);
+    }
+
+    #[test]
+    fn it_can_parse_start_variants() {
+        let candidates = run("*:underline", false);
+        assert_eq!(candidates, vec!["*:underline"]);
+
+        let candidates = run("hover:*:underline", false);
+        assert_eq!(candidates, vec!["hover:*:underline"]);
+    }
+
+    #[test]
+    fn it_can_parse_simple_candidates_with_stacked_variants() {
+        let candidates = run("focus:hover:underline", false);
+        assert_eq!(candidates, vec!["focus:hover:underline"]);
+    }
+
+    #[test]
+    fn it_can_parse_utilities_with_arbitrary_values() {
+        let candidates = run("m-[2px]", false);
+        assert_eq!(candidates, vec!["m-[2px]"]);
+    }
+
+    #[test]
+    fn it_throws_away_arbitrary_values_that_are_unbalanced() {
+        let candidates = run("m-[calc(100px*2]", false);
+        assert!(candidates.is_empty());
+    }
+
+    #[test]
+    fn it_can_parse_utilities_with_arbitrary_values_and_variants() {
+        let candidates = run("hover:m-[2px]", false);
+        assert_eq!(candidates, vec!["hover:m-[2px]"]);
+    }
+
+    #[test]
+    fn it_can_parse_arbitrary_variants() {
+        let candidates = run("[@media(min-width:200px)]:underline", false);
+        assert_eq!(candidates, vec!["[@media(min-width:200px)]:underline"]);
+    }
+
+    #[test]
+    fn it_can_parse_matched_variants() {
+        let candidates = run("group-[&:hover]:underline", false);
+        assert_eq!(candidates, vec!["group-[&:hover]:underline"]);
+    }
+
+    #[test]
+    fn it_should_not_keep_spaces() {
+        let candidates = run("bg-[rgba(0, 0, 0)]", false);
+
+        assert_eq!(candidates, vec!["rgba"]);
+    }
+
+    #[test]
+    fn it_should_keep_spaces_in_loose_mode() {
+        let candidates = run("bg-[rgba(0, 0, 0)]", true);
+        assert_eq!(candidates, vec!["bg-[rgba(0, 0, 0)]"]);
+    }
+
+    #[test]
+    fn it_should_keep_important_arbitrary_properties_legacy() {
+        let candidates = run("![foo:bar]", false);
+        assert_eq!(candidates, vec!["![foo:bar]"]);
+    }
+
+    #[test]
+    fn it_should_keep_important_arbitrary_properties() {
+        let candidates = run("[foo:bar]!", false);
+        assert_eq!(candidates, vec!["[foo:bar]!"]);
+    }
+
+    #[test]
+    fn it_should_keep_important_arbitrary_values() {
+        let candidates = run("w-[calc(var(--size)/2)]!", false);
+        assert_eq!(candidates, vec!["w-[calc(var(--size)/2)]!"]);
+    }
+
+    #[test]
+    fn it_should_keep_important_candidates_legacy() {
+        let candidates = run("!w-4", false);
+        assert_eq!(candidates, vec!["!w-4"]);
+    }
+
+    #[test]
+    fn it_should_keep_important_candidates() {
+        let candidates = run("w-4!", false);
+        assert_eq!(candidates, vec!["w-4!"]);
+    }
+
+    #[test]
+    fn it_should_not_allow_for_bogus_candidates() {
+        let candidates = run("[0]", false);
+        assert!(candidates.is_empty());
+
+        let candidates = run("[something]", false);
+        assert_eq!(candidates, vec!["something"]);
+
+        let candidates = run(" [feature(slice_as_chunks)]", false);
+        assert_eq!(candidates, vec!["feature(slice_as_chunks)"]);
+
+        let candidates = run("![feature(slice_as_chunks)]", false);
+        assert!(candidates.is_empty());
+
+        let candidates = run("-[feature(slice_as_chunks)]", false);
+        assert!(candidates.is_empty());
+
+        let candidates = run("!-[feature(slice_as_chunks)]", false);
+        assert!(candidates.is_empty());
+
+        let candidates = run("-[foo:bar]", false);
+        assert!(candidates.is_empty());
+
+        let candidates = run("!-[foo:bar]", false);
+        assert!(candidates.is_empty());
+    }
+
+    #[test]
+    fn it_should_keep_candidates_with_brackets_in_arbitrary_values_inside_quotes() {
+        let candidates = run("content-['hello_[_]_world']", false);
+        assert_eq!(candidates, vec!["content-['hello_[_]_world']"]);
+    }
+
+    #[test]
+    fn it_should_ignore_leading_spaces() {
+        let candidates = run("        backdrop-filter-none", false);
+        assert_eq!(candidates, vec!["backdrop-filter-none"]);
+    }
+
+    #[test]
+    fn it_should_ignore_trailing_spaces() {
+        let candidates = run("backdrop-filter-none        ", false);
+        assert_eq!(candidates, vec!["backdrop-filter-none"]);
+    }
+
+    #[test]
+    fn it_should_keep_classes_before_an_ending_newline() {
+        let candidates = run("backdrop-filter-none\n", false);
+        assert_eq!(candidates, vec!["backdrop-filter-none"]);
+    }
+
+    #[test]
+    fn it_should_parse_out_the_correct_classes_from_tailwind_tests() {
+        // From: tests/arbitrary-variants.test.js
+        let candidates = run(
+            r#"
+                <div class="dark:lg:hover:[&>*]:underline"></div>
+
+                <div class="[&_.foo\_\_bar]:hover:underline"></div>
+                <div class="hover:[&_.foo\_\_bar]:underline"></div>
+            "#,
+            false,
+        );
+        // TODO: it should not include additional (separate) classes: class, hover:, foo: bar, underline
+        // TODO: Double check the expectations based on above information
+        assert_eq!(
+            candidates,
+            vec![
+                "div",
+                "class",
+                r#"dark:lg:hover:[&>*]:underline"#,
+                r#"[&_.foo\_\_bar]:hover:underline"#,
+                r#"hover:[&_.foo\_\_bar]:underline"#
+            ]
+        );
+    }
+
+    #[test]
+    fn potential_candidates_are_skipped_when_hitting_impossible_characters() {
+        let candidates = run("        <p class=\"text-sm text-blue-700\">A new software update is available. See what’s new in version 2.0.4.</p>", false);
+        assert_eq!(
+            candidates,
+            vec![
+                "p",
+                "class",
+                "text-sm",
+                "text-blue-700",
+                // "A", // Uppercase first letter is not allowed
+                "new",
+                "software",
+                "update",
+                "is",
+                "available",
+                // "See", // Uppercase first letter is not allowed
+                // "what", // what is dropped because it is followed by the fancy: ’
+                // "s",    // s is dropped because it is preceded by the fancy: ’
+                // "new", // Already seen
+                "in",
+                "version",
+            ]
+        );
+    }
+
+    #[test]
+    fn ignores_arbitrary_property_ish_things() {
+        // FIXME: () are only valid in an arbitrary
+        let candidates = run(" [feature(slice_as_chunks)]", false);
+        assert_eq!(candidates, vec!["feature(slice_as_chunks)",]);
+    }
+
+    #[test]
+    fn foo_bar() {
+        // w[…] is not a valid pattern for part of candidate
+        // but @[] is (specifically in the context of a variant)
+
+        let candidates = run("%w[text-[#bada55]]", false);
+        assert_eq!(candidates, vec!["w", "text-[#bada55]"]);
+    }
+
+    #[test]
+    fn crash_001() {
+        let candidates = run("Aҿɿ[~5", false);
+        assert!(candidates.is_empty());
+    }
+
+    #[test]
+    fn crash_002() {
+        let candidates = run("", false);
+        assert!(candidates.is_empty());
+    }
+
+    #[test]
+    fn bad_001() {
+        let candidates = run("[杛杛]/", false);
+        assert_eq!(candidates, vec!["杛杛"]);
+    }
+
+    #[test]
+    fn bad_002() {
+        let candidates = run(r"[\]\\\:[]", false);
+        assert!(candidates.is_empty());
+    }
+
+    #[test]
+    fn bad_003() {
+        // TODO: This seems… wrong
+        let candidates = run(r"[𕤵:]", false);
+        assert_eq!(candidates, vec!["𕤵", "𕤵:"]);
+    }
+
+    #[test]
+    fn classes_in_js_arrays() {
+        let candidates = run(
+            r#"let classes = ['bg-black', 'hover:px-0.5', 'text-[13px]', '[--my-var:1_/_2]', '[.foo_&]:px-[0]', '[.foo_&]:[color:red]']">"#,
+            false,
+        );
+        assert_eq!(
+            candidates,
+            vec![
+                "let",
+                "classes",
+                "bg-black",
+                "hover:px-0.5",
+                "text-[13px]",
+                "[--my-var:1_/_2]",
+                "--my-var:1_/_2",
+                "[.foo_&]:px-[0]",
+                "[.foo_&]:[color:red]",
+            ]
+        );
+    }
+
+    #[test]
+    fn classes_in_js_arrays_without_spaces() {
+        let candidates = run(
+            r#"let classes = ['bg-black','hover:px-0.5','text-[13px]','[--my-var:1_/_2]','[.foo_&]:px-[0]','[.foo_&]:[color:red]']">"#,
+            false,
+        );
+        assert_eq!(
+            candidates,
+            vec![
+                "let",
+                "classes",
+                "bg-black",
+                "hover:px-0.5",
+                "text-[13px]",
+                "[--my-var:1_/_2]",
+                "--my-var:1_/_2",
+                "[.foo_&]:px-[0]",
+                "[.foo_&]:[color:red]",
+            ]
+        );
+    }
+
+    #[test]
+    fn classes_as_object_keys() {
+        let candidates = run(
+            r#"<div :class="{ underline: active, 'px-1.5': online }"></div>"#,
+            false,
+        );
+        assert_eq!(
+            candidates,
+            vec!["div", "underline", "active", "px-1.5", "online"]
+        );
+    }
+
+    #[test]
+    fn multiple_nested_candidates() {
+        let candidates = run(r#"{color:red}"#, false);
+        assert_eq!(candidates, vec!["color:red"]);
+    }
+
+    #[test]
+    fn percent_ended_candidates() {
+        let candidates = run(
+            r#"<!-- This should work `underline from-50% flex` -->"#,
+            false,
+        );
+        assert_eq!(
+            candidates,
+            vec!["should", "work", "underline", "from-50%", "flex",]
+        );
+    }
+
+    #[test]
+    fn candidate_cannot_start_with_uppercase_character() {
+        let candidates = run(r#"<div class="foo Bar baz"></div>"#, false);
+        assert_eq!(candidates, vec!["div", "class", "foo", "baz"]);
+    }
+
+    #[test]
+    fn candidate_cannot_end_with_a_dash() {
+        let candidates = run(r#"<div class="foo bar- baz"></div>"#, false);
+        assert_eq!(candidates, vec!["div", "class", "foo", "baz"]);
+    }
+
+    #[test]
+    fn candidate_cannot_end_with_an_underscore() {
+        let candidates = run(r#"<div class="foo bar_ baz"></div>"#, false);
+        assert_eq!(candidates, vec!["div", "class", "foo", "baz"]);
+    }
+
+    #[test]
+    fn candidate_cannot_be_a_single_camelcase_word() {
+        let candidates = run(r#"<div class="foo useEffect baz"></div>"#, false);
+        assert_eq!(candidates, vec!["div", "class", "foo", "baz"]);
+    }
+
+    #[test]
+    fn candidate_cannot_be_svg_path_data() {
+        let candidates = run(r#"<path d="M25.517 0C18.712">"#, false);
+        assert_eq!(candidates, vec!["path", "d"]);
+    }
+
+    #[test]
+    fn candidate_cannot_be_email_or_version_constraint() {
+        let candidates = run(r#"<div class="@container/dialog"> next@latest"#, false);
+        assert_eq!(candidates, vec!["div", "class", "@container/dialog"]);
+    }
+
+    #[test]
+    fn candidate_cannot_be_a_url() {
+        let candidates = run(
+            r#"Our website is https://example.com or http://example.com if you want a virus"#,
+            false,
+        );
+        assert_eq!(
+            candidates,
+            vec!["website", "is", "com", "or", "if", "you", "want", "a", "virus"]
+        );
+    }
+
+    #[test]
+    fn candidate_cannot_be_a_paths_with_aliases() {
+        let candidates = run(r#"import potato from '@/potato';"#, false);
+        assert_eq!(candidates, vec!["import", "potato", "from"]);
+    }
+
+    #[test]
+    fn candidate_cannot_be_a_path() {
+        let candidates = run(
+            r#"import potato from 'some/path/to/something';
+            import banana from '@/banana';"#,
+            false,
+        );
+        assert_eq!(candidates, vec!["import", "potato", "from", "banana"]);
+    }
+
+    #[test]
+    fn ruby_percent_formatted_strings() {
+        let candidates = run(r#"%w[hover:flex]"#, false);
+        assert_eq!(candidates, vec!["w", "hover:flex"]);
+    }
+
+    #[test]
+    fn urls_in_arbitrary_values_are_ok() {
+        let candidates = run(r#"<div class="bg-[url('/img/hero-pattern.svg')]">"#, false);
+        assert_eq!(
+            candidates,
+            vec!["div", "class", "bg-[url('/img/hero-pattern.svg')]"]
+        );
+    }
+
+    #[test]
+    fn colon_in_arbitrary_property_value() {
+        let candidates = run("[color::] #[test::foo]", false);
+        assert!(candidates
+            .iter()
+            .all(|candidate| !candidate.starts_with('[')));
+    }
+
+    #[test]
+    fn braces_in_arbitrary_property_value() {
+        let candidates = run("[color:${foo}] #[test:{foo}]", false);
+        assert!(candidates
+            .iter()
+            .all(|candidate| !candidate.starts_with('[')));
+    }
+
+    #[test]
+    fn quoted_colon_in_arbitrary_property_value() {
+        let candidates = run("[content:'bar:bar'] [content:\"bar:bar\"]", false);
+        assert!(candidates
+            .iter()
+            .any(|candidate| candidate == &"[content:'bar:bar']"));
+        assert!(candidates
+            .iter()
+            .any(|candidate| candidate == &"[content:\"bar:bar\"]"));
+    }
+
+    #[test]
+    fn quoted_braces_in_arbitrary_property_value() {
+        let candidates = run("[content:'{bar}'] [content:\"{bar}\"]", false);
+        assert!(candidates
+            .iter()
+            .any(|candidate| candidate == &"[content:'{bar}']"));
+        assert!(candidates
+            .iter()
+            .any(|candidate| candidate == &"[content:\"{bar}\"]"));
+    }
+
+    #[test]
+    fn colon_in_custom_property_value() {
+        let candidates = run("[--foo:bar:bar]", false);
+        assert!(candidates
+            .iter()
+            .any(|candidate| candidate == &"[--foo:bar:bar]"));
+    }
+
+    #[test]
+    fn braces_in_custom_property_value() {
+        let candidates = run("[--foo:{bar}]", false);
+        assert!(candidates
+            .iter()
+            .any(|candidate| candidate == &"[--foo:{bar}]"));
+    }
+
+    #[test]
+    fn candidate_slicing() {
+        let result = Extractor::slice_surrounding(&b".foo_&]:px-[0"[..])
+            .map(std::str::from_utf8)
+            .transpose()
+            .unwrap();
+        assert_eq!(result, None);
+
+        let result = Extractor::slice_surrounding(&b"[.foo_&]:px-[0]"[..])
+            .map(std::str::from_utf8)
+            .transpose()
+            .unwrap();
+        assert_eq!(result, Some("[.foo_&]:px-[0]"));
+
+        let result = Extractor::slice_surrounding(&b"{[.foo_&]:px-[0]}"[..])
+            .map(std::str::from_utf8)
+            .transpose()
+            .unwrap();
+        assert_eq!(result, Some("[.foo_&]:px-[0]"));
+
+        let result = Extractor::slice_surrounding(&b"![foo:bar]"[..])
+            .map(std::str::from_utf8)
+            .transpose()
+            .unwrap();
+        assert_eq!(result, None);
+
+        let result = Extractor::slice_surrounding(&b"[\"pt-1.5\"]"[..])
+            .map(std::str::from_utf8)
+            .transpose()
+            .unwrap();
+        assert_eq!(result, Some("pt-1.5"));
+
+        let count = 1_000;
+        let crazy = format!("{}[.foo_&]:px-[0]{}", "[".repeat(count), "]".repeat(count));
+
+        let result = Extractor::slice_surrounding(crazy.as_bytes())
+            .map(std::str::from_utf8)
+            .transpose()
+            .unwrap();
+        assert_eq!(result, Some("[.foo_&]:px-[0]"));
+    }
+}
diff --git a/oxide/crates/core/tests/auto_content.rs b/oxide/crates/core/tests/auto_content.rs
new file mode 100644
index 000000000..6c0217079
--- /dev/null
+++ b/oxide/crates/core/tests/auto_content.rs
@@ -0,0 +1,305 @@
+#[cfg(test)]
+mod auto_content {
+    use std::fs;
+    use std::process::Command;
+
+    use tailwindcss_core::*;
+    use tempfile::tempdir;
+
+    fn scan(paths_with_content: &[(&str, Option<&str>)]) -> (Vec<String>, Vec<String>) {
+        // Create a temporary working directory
+        let dir = tempdir().unwrap().into_path();
+
+        // Initialize this directory as a git repository
+        let _ = Command::new("git").arg("init").current_dir(&dir).output();
+
+        // Create the necessary files
+        for (path, contents) in paths_with_content {
+            let path = dir.join(path);
+            let parent = path.parent().unwrap();
+            if !parent.exists() {
+                fs::create_dir_all(parent).unwrap();
+            }
+
+            match contents {
+                Some(contents) => fs::write(path, contents).unwrap(),
+                None => fs::write(path, "").unwrap(),
+            }
+        }
+
+        let base = format!("{}", dir.display());
+
+        // Resolve all content paths for the (temporary) current working directory
+        let result = scan_dir(ScanOptions {
+            base: base.clone(),
+            globs: true,
+        });
+
+        let mut paths: Vec<_> = result
+            .files
+            .into_iter()
+            .map(|x| x.replace(&format!("{}/", &base), ""))
+            .collect();
+
+        for glob in result.globs {
+            paths.push(format!("{}/{}", glob.base, glob.glob));
+        }
+
+        paths = paths
+            .into_iter()
+            .map(|x| {
+                let parent_dir = format!("{}/", &base.to_string());
+                x.replace(&parent_dir, "")
+            })
+            .collect();
+
+        // Sort the output for easier comparison (depending on internal datastructure the order
+        // _could_ be random)
+        paths.sort();
+
+        (paths, result.candidates)
+    }
+
+    fn test(paths_with_content: &[(&str, Option<&str>)]) -> Vec<String> {
+        scan(paths_with_content).0
+    }
+
+    #[test]
+    fn it_should_work_with_a_set_of_root_files() {
+        let globs = test(&[
+            ("index.html", None),
+            ("a.html", None),
+            ("b.html", None),
+            ("c.html", None),
+        ]);
+        assert_eq!(globs, vec!["a.html", "b.html", "c.html", "index.html"]);
+    }
+
+    #[test]
+    fn it_should_work_with_a_set_of_root_files_and_ignore_ignored_files() {
+        let globs = test(&[
+            (".gitignore", Some("b.html")),
+            ("index.html", None),
+            ("a.html", None),
+            ("b.html", None),
+            ("c.html", None),
+        ]);
+        assert_eq!(globs, vec!["a.html", "c.html", "index.html"]);
+    }
+
+    #[test]
+    fn it_should_list_all_files_in_the_public_folder_explicitly() {
+        let globs = test(&[
+            ("index.html", None),
+            ("public/a.html", None),
+            ("public/b.html", None),
+            ("public/c.html", None),
+        ]);
+        assert_eq!(
+            globs,
+            vec![
+                "index.html",
+                "public/a.html",
+                "public/b.html",
+                "public/c.html",
+            ]
+        );
+    }
+
+    #[test]
+    fn it_should_list_nested_folders_explicitly_in_the_public_folder() {
+        let globs = test(&[
+            ("index.html", None),
+            ("public/a.html", None),
+            ("public/b.html", None),
+            ("public/c.html", None),
+            ("public/nested/a.html", None),
+            ("public/nested/b.html", None),
+            ("public/nested/c.html", None),
+            ("public/nested/again/a.html", None),
+            ("public/very/deeply/nested/a.html", None),
+        ]);
+        assert_eq!(
+            globs,
+            vec![
+                "index.html",
+                "public/a.html",
+                "public/b.html",
+                "public/c.html",
+                "public/nested/a.html",
+                "public/nested/again/a.html",
+                "public/nested/b.html",
+                "public/nested/c.html",
+                "public/very/deeply/nested/a.html",
+            ]
+        );
+    }
+
+    #[test]
+    fn it_should_list_all_files_in_the_public_folder_explicitly_except_ignored_files() {
+        let globs = test(&[
+            (".gitignore", Some("public/b.html\na.html")),
+            ("index.html", None),
+            ("public/a.html", None),
+            ("public/b.html", None),
+            ("public/c.html", None),
+        ]);
+        assert_eq!(globs, vec!["index.html", "public/c.html",]);
+    }
+
+    #[test]
+    fn it_should_use_a_glob_for_top_level_folders() {
+        let globs = test(&[
+            ("index.html", None),
+            ("src/a.html", None),
+            ("src/b.html", None),
+            ("src/c.html", None),
+        ]);
+        assert_eq!(globs, vec![
+            "index.html",
+            "src/**/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+            "src/a.html",
+            "src/b.html",
+            "src/c.html"
+        ]);
+    }
+
+    #[test]
+    fn it_should_ignore_binary_files() {
+        let globs = test(&[
+            ("index.html", None),
+            ("a.mp4", None),
+            ("b.png", None),
+            ("c.lock", None),
+        ]);
+        assert_eq!(globs, vec!["index.html"]);
+    }
+
+    #[test]
+    fn it_should_ignore_known_extensions() {
+        let globs = test(&[
+            ("index.html", None),
+            ("a.css", None),
+            ("b.sass", None),
+            ("c.less", None),
+        ]);
+        assert_eq!(globs, vec!["index.html"]);
+    }
+
+    #[test]
+    fn it_should_ignore_known_files() {
+        let globs = test(&[
+            ("index.html", None),
+            ("package-lock.json", None),
+            ("yarn.lock", None),
+        ]);
+        assert_eq!(globs, vec!["index.html"]);
+    }
+
+    #[test]
+    fn it_should_ignore_and_expand_nested_ignored_folders() {
+        let globs = test(&[
+            // Explicitly listed root files
+            ("foo.html", None),
+            ("bar.html", None),
+            ("baz.html", None),
+            // Nested folder A, using glob
+            ("nested-a/foo.html", None),
+            ("nested-a/bar.html", None),
+            ("nested-a/baz.html", None),
+            // Nested folder B, with deeply nested files, using glob
+            ("nested-b/deeply-nested/foo.html", None),
+            ("nested-b/deeply-nested/bar.html", None),
+            ("nested-b/deeply-nested/baz.html", None),
+            // Nested folder C, with ignored sub-folder
+            ("nested-c/foo.html", None),
+            ("nested-c/bar.html", None),
+            ("nested-c/baz.html", None),
+            //   Ignored folder
+            ("nested-c/.gitignore", Some("ignored-folder/")),
+            ("nested-c/ignored-folder/foo.html", None),
+            ("nested-c/ignored-folder/bar.html", None),
+            ("nested-c/ignored-folder/baz.html", None),
+            //   Deeply nested, without issues
+            ("nested-c/sibling-folder/foo.html", None),
+            ("nested-c/sibling-folder/bar.html", None),
+            ("nested-c/sibling-folder/baz.html", None),
+            // Nested folder D, with deeply nested ignored folder
+            ("nested-d/foo.html", None),
+            ("nested-d/bar.html", None),
+            ("nested-d/baz.html", None),
+            ("nested-d/.gitignore", Some("deep/")),
+            ("nested-d/very/deeply/nested/deep/foo.html", None),
+            ("nested-d/very/deeply/nested/deep/bar.html", None),
+            ("nested-d/very/deeply/nested/deep/baz.html", None),
+            ("nested-d/very/deeply/nested/foo.html", None),
+            ("nested-d/very/deeply/nested/bar.html", None),
+            ("nested-d/very/deeply/nested/baz.html", None),
+            ("nested-d/very/deeply/nested/directory/foo.html", None),
+            ("nested-d/very/deeply/nested/directory/bar.html", None),
+            ("nested-d/very/deeply/nested/directory/baz.html", None),
+            ("nested-d/very/deeply/nested/directory/again/foo.html", None),
+        ]);
+
+        assert_eq!(
+            globs,
+            vec![
+                "bar.html",
+                "baz.html",
+                "foo.html",
+                "nested-a/**/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-a/bar.html",
+                "nested-a/baz.html",
+                "nested-a/foo.html",
+                "nested-b/**/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-b/deeply-nested/bar.html",
+                "nested-b/deeply-nested/baz.html",
+                "nested-b/deeply-nested/foo.html",
+                "nested-c/*/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-c/bar.html",
+                "nested-c/baz.html",
+                "nested-c/foo.html",
+                "nested-c/sibling-folder/**/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-c/sibling-folder/bar.html",
+                "nested-c/sibling-folder/baz.html",
+                "nested-c/sibling-folder/foo.html",
+                "nested-d/*/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-d/bar.html",
+                "nested-d/baz.html",
+                "nested-d/foo.html",
+                "nested-d/very/*/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-d/very/deeply/*/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-d/very/deeply/nested/*/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-d/very/deeply/nested/bar.html",
+                "nested-d/very/deeply/nested/baz.html",
+                "nested-d/very/deeply/nested/directory/**/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}",
+                "nested-d/very/deeply/nested/directory/again/foo.html",
+                "nested-d/very/deeply/nested/directory/bar.html",
+                "nested-d/very/deeply/nested/directory/baz.html",
+                "nested-d/very/deeply/nested/directory/foo.html",
+                "nested-d/very/deeply/nested/foo.html"
+            ]
+        );
+    }
+
+    #[test]
+    fn it_should_scan_for_utilities() {
+        let mut ignores = String::new();
+        ignores.push_str("# md:font-bold\n");
+        ignores.push_str("foo.html\n");
+
+        let candidates = scan(&[
+            // The gitignore file is used to filter out files but not scanned for candidates
+            (".gitignore", Some(&ignores)),
+            // A file that should definitely be scanned
+            ("index.html", Some("font-bold md:flex")),
+            // A file that should definitely not be scanned
+            ("foo.jpg", Some("xl:font-bold")),
+            // A file that is ignored
+            ("foo.html", Some("lg:font-bold")),
+        ])
+        .1;
+
+        assert_eq!(candidates, vec!["font-bold", "md:flex"]);
+    }
+}
diff --git a/oxide/crates/node/.cargo/config.toml b/oxide/crates/node/.cargo/config.toml
new file mode 100644
index 000000000..6890aa910
--- /dev/null
+++ b/oxide/crates/node/.cargo/config.toml
@@ -0,0 +1,7 @@
+[target.aarch64-unknown-linux-gnu]
+linker = "aarch64-linux-gnu-gcc"
+[target.aarch64-unknown-linux-musl]
+linker = "aarch64-linux-musl-gcc"
+rustflags = ["-C", "target-feature=-crt-static"]
+[target.armv7-unknown-linux-gnueabihf]
+linker = "arm-linux-gnueabihf-gcc"
\ No newline at end of file
diff --git a/crates/node/.gitignore b/oxide/crates/node/.gitignore
similarity index 94%
rename from crates/node/.gitignore
rename to oxide/crates/node/.gitignore
index c3f2ec696..2cb3cf980 100644
--- a/crates/node/.gitignore
+++ b/oxide/crates/node/.gitignore
@@ -121,7 +121,7 @@ dist
 .AppleDouble
 .LSOverride
 
-# Icon must end with two
+# Icon must end with two 
 Icon
 
 
@@ -194,14 +194,8 @@ Cargo.lock
 !.yarn/sdks
 !.yarn/versions
 
-# Generated
 *.node
-*.wasm
+
+# Generated
 index.d.ts
 index.js
-browser.js
-tailwindcss-oxide.wasi-browser.js
-tailwindcss-oxide.wasi.cjs
-tailwindcss-oxide.wasi.d.cts
-wasi-worker-browser.mjs
-wasi-worker.mjs
diff --git a/crates/node/.npmignore b/oxide/crates/node/.npmignore
similarity index 100%
rename from crates/node/.npmignore
rename to oxide/crates/node/.npmignore
diff --git a/crates/node/Cargo.toml b/oxide/crates/node/Cargo.toml
similarity index 59%
rename from crates/node/Cargo.toml
rename to oxide/crates/node/Cargo.toml
index a3df7b813..0ded64922 100644
--- a/crates/node/Cargo.toml
+++ b/oxide/crates/node/Cargo.toml
@@ -8,10 +8,11 @@ crate-type = ["cdylib"]
 
 [dependencies]
 # Default enable napi4 feature, see https://nodejs.org/api/n-api.html#node-api-version-matrix
-napi = { version = "3.11.0", default-features = false, features = ["napi4"] }
-napi-derive = "3.6.0"
-tailwindcss-oxide = { path = "../oxide" }
-rayon = "1.12.0"
+napi = { version = "2.13.1", default-features = false, features = ["napi4"] }
+napi-derive = "2.13.0"
+tailwindcss-core = { path = "../core" }
+rayon = "1.5.3"
 
 [build-dependencies]
-napi-build = "2.3.2"
+napi-build = "2.0.1"
+
diff --git a/crates/node/build.rs b/oxide/crates/node/build.rs
similarity index 100%
rename from crates/node/build.rs
rename to oxide/crates/node/build.rs
diff --git a/crates/node/npm/android-arm-eabi/README.md b/oxide/crates/node/npm/android-arm-eabi/README.md
similarity index 100%
rename from crates/node/npm/android-arm-eabi/README.md
rename to oxide/crates/node/npm/android-arm-eabi/README.md
diff --git a/crates/node/npm/android-arm-eabi/package.json b/oxide/crates/node/npm/android-arm-eabi/package.json
similarity index 79%
rename from crates/node/npm/android-arm-eabi/package.json
rename to oxide/crates/node/npm/android-arm-eabi/package.json
index d46ceb237..1425e7d60 100644
--- a/crates/node/npm/android-arm-eabi/package.json
+++ b/oxide/crates/node/npm/android-arm-eabi/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-android-arm-eabi",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/android-arm-eabi"
+    "directory": "oxide/crates/node/npm/android-arm-eabi"
   },
   "os": [
     "android"
@@ -22,6 +22,6 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   }
 }
diff --git a/crates/node/npm/android-arm64/README.md b/oxide/crates/node/npm/android-arm64/README.md
similarity index 100%
rename from crates/node/npm/android-arm64/README.md
rename to oxide/crates/node/npm/android-arm64/README.md
diff --git a/crates/node/npm/android-arm64/package.json b/oxide/crates/node/npm/android-arm64/package.json
similarity index 79%
rename from crates/node/npm/android-arm64/package.json
rename to oxide/crates/node/npm/android-arm64/package.json
index e6e9d577d..ade255977 100644
--- a/crates/node/npm/android-arm64/package.json
+++ b/oxide/crates/node/npm/android-arm64/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-android-arm64",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/android-arm64"
+    "directory": "oxide/crates/node/npm/android-arm64"
   },
   "os": [
     "android"
@@ -22,6 +22,6 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   }
 }
diff --git a/crates/node/npm/darwin-arm64/README.md b/oxide/crates/node/npm/darwin-arm64/README.md
similarity index 100%
rename from crates/node/npm/darwin-arm64/README.md
rename to oxide/crates/node/npm/darwin-arm64/README.md
diff --git a/crates/node/npm/darwin-arm64/package.json b/oxide/crates/node/npm/darwin-arm64/package.json
similarity index 79%
rename from crates/node/npm/darwin-arm64/package.json
rename to oxide/crates/node/npm/darwin-arm64/package.json
index 1cb737c2e..a6a345b22 100644
--- a/crates/node/npm/darwin-arm64/package.json
+++ b/oxide/crates/node/npm/darwin-arm64/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-darwin-arm64",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/darwin-arm64"
+    "directory": "oxide/crates/node/npm/darwin-arm64"
   },
   "os": [
     "darwin"
@@ -22,6 +22,6 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   }
 }
diff --git a/crates/node/npm/darwin-x64/README.md b/oxide/crates/node/npm/darwin-x64/README.md
similarity index 100%
rename from crates/node/npm/darwin-x64/README.md
rename to oxide/crates/node/npm/darwin-x64/README.md
diff --git a/crates/node/npm/darwin-x64/package.json b/oxide/crates/node/npm/darwin-x64/package.json
similarity index 79%
rename from crates/node/npm/darwin-x64/package.json
rename to oxide/crates/node/npm/darwin-x64/package.json
index ffd75e54b..5a25439f9 100644
--- a/crates/node/npm/darwin-x64/package.json
+++ b/oxide/crates/node/npm/darwin-x64/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-darwin-x64",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/darwin-x64"
+    "directory": "oxide/crates/node/npm/darwin-x64"
   },
   "os": [
     "darwin"
@@ -22,6 +22,6 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   }
 }
diff --git a/crates/node/npm/freebsd-x64/README.md b/oxide/crates/node/npm/freebsd-x64/README.md
similarity index 100%
rename from crates/node/npm/freebsd-x64/README.md
rename to oxide/crates/node/npm/freebsd-x64/README.md
diff --git a/crates/node/npm/freebsd-x64/package.json b/oxide/crates/node/npm/freebsd-x64/package.json
similarity index 79%
rename from crates/node/npm/freebsd-x64/package.json
rename to oxide/crates/node/npm/freebsd-x64/package.json
index e248f39d1..128e4bf65 100644
--- a/crates/node/npm/freebsd-x64/package.json
+++ b/oxide/crates/node/npm/freebsd-x64/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-freebsd-x64",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/freebsd-x64"
+    "directory": "oxide/crates/node/npm/freebsd-x64"
   },
   "os": [
     "freebsd"
@@ -22,6 +22,6 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   }
 }
diff --git a/crates/node/npm/linux-arm-gnueabihf/README.md b/oxide/crates/node/npm/linux-arm-gnueabihf/README.md
similarity index 100%
rename from crates/node/npm/linux-arm-gnueabihf/README.md
rename to oxide/crates/node/npm/linux-arm-gnueabihf/README.md
diff --git a/crates/node/npm/linux-arm-gnueabihf/package.json b/oxide/crates/node/npm/linux-arm-gnueabihf/package.json
similarity index 78%
rename from crates/node/npm/linux-arm-gnueabihf/package.json
rename to oxide/crates/node/npm/linux-arm-gnueabihf/package.json
index 50d2aef73..ece8844f0 100644
--- a/crates/node/npm/linux-arm-gnueabihf/package.json
+++ b/oxide/crates/node/npm/linux-arm-gnueabihf/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-linux-arm-gnueabihf",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/linux-arm-gnueabihf"
+    "directory": "oxide/crates/node/npm/linux-arm-gnueabihf"
   },
   "os": [
     "linux"
@@ -22,6 +22,6 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   }
 }
diff --git a/crates/node/npm/linux-arm64-gnu/README.md b/oxide/crates/node/npm/linux-arm64-gnu/README.md
similarity index 100%
rename from crates/node/npm/linux-arm64-gnu/README.md
rename to oxide/crates/node/npm/linux-arm64-gnu/README.md
diff --git a/crates/node/npm/linux-arm64-gnu/package.json b/oxide/crates/node/npm/linux-arm64-gnu/package.json
similarity index 80%
rename from crates/node/npm/linux-arm64-gnu/package.json
rename to oxide/crates/node/npm/linux-arm64-gnu/package.json
index 5875213f8..35c21489e 100644
--- a/crates/node/npm/linux-arm64-gnu/package.json
+++ b/oxide/crates/node/npm/linux-arm64-gnu/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-linux-arm64-gnu",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/linux-arm64-gnu"
+    "directory": "oxide/crates/node/npm/linux-arm64-gnu"
   },
   "os": [
     "linux"
@@ -22,7 +22,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   },
   "libc": [
     "glibc"
diff --git a/crates/node/npm/linux-arm64-musl/README.md b/oxide/crates/node/npm/linux-arm64-musl/README.md
similarity index 100%
rename from crates/node/npm/linux-arm64-musl/README.md
rename to oxide/crates/node/npm/linux-arm64-musl/README.md
diff --git a/crates/node/npm/linux-arm64-musl/package.json b/oxide/crates/node/npm/linux-arm64-musl/package.json
similarity index 80%
rename from crates/node/npm/linux-arm64-musl/package.json
rename to oxide/crates/node/npm/linux-arm64-musl/package.json
index 9da37f3fd..3d4f5db19 100644
--- a/crates/node/npm/linux-arm64-musl/package.json
+++ b/oxide/crates/node/npm/linux-arm64-musl/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-linux-arm64-musl",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/linux-arm64-musl"
+    "directory": "oxide/crates/node/npm/linux-arm64-musl"
   },
   "os": [
     "linux"
@@ -22,7 +22,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   },
   "libc": [
     "musl"
diff --git a/crates/node/npm/linux-x64-gnu/README.md b/oxide/crates/node/npm/linux-x64-gnu/README.md
similarity index 100%
rename from crates/node/npm/linux-x64-gnu/README.md
rename to oxide/crates/node/npm/linux-x64-gnu/README.md
diff --git a/crates/node/npm/linux-x64-gnu/package.json b/oxide/crates/node/npm/linux-x64-gnu/package.json
similarity index 80%
rename from crates/node/npm/linux-x64-gnu/package.json
rename to oxide/crates/node/npm/linux-x64-gnu/package.json
index d409743fa..d43c47f7b 100644
--- a/crates/node/npm/linux-x64-gnu/package.json
+++ b/oxide/crates/node/npm/linux-x64-gnu/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-linux-x64-gnu",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/linux-x64-gnu"
+    "directory": "oxide/crates/node/npm/linux-x64-gnu"
   },
   "os": [
     "linux"
@@ -22,7 +22,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   },
   "libc": [
     "glibc"
diff --git a/crates/node/npm/linux-x64-musl/README.md b/oxide/crates/node/npm/linux-x64-musl/README.md
similarity index 100%
rename from crates/node/npm/linux-x64-musl/README.md
rename to oxide/crates/node/npm/linux-x64-musl/README.md
diff --git a/crates/node/npm/linux-x64-musl/package.json b/oxide/crates/node/npm/linux-x64-musl/package.json
similarity index 80%
rename from crates/node/npm/linux-x64-musl/package.json
rename to oxide/crates/node/npm/linux-x64-musl/package.json
index 5b404fd70..4767c03e3 100644
--- a/crates/node/npm/linux-x64-musl/package.json
+++ b/oxide/crates/node/npm/linux-x64-musl/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-linux-x64-musl",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/linux-x64-musl"
+    "directory": "oxide/crates/node/npm/linux-x64-musl"
   },
   "os": [
     "linux"
@@ -22,7 +22,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   },
   "libc": [
     "musl"
diff --git a/crates/node/npm/win32-x64-msvc/README.md b/oxide/crates/node/npm/win32-x64-msvc/README.md
similarity index 100%
rename from crates/node/npm/win32-x64-msvc/README.md
rename to oxide/crates/node/npm/win32-x64-msvc/README.md
diff --git a/crates/node/npm/win32-x64-msvc/package.json b/oxide/crates/node/npm/win32-x64-msvc/package.json
similarity index 79%
rename from crates/node/npm/win32-x64-msvc/package.json
rename to oxide/crates/node/npm/win32-x64-msvc/package.json
index 82d75c300..36e9e4157 100644
--- a/crates/node/npm/win32-x64-msvc/package.json
+++ b/oxide/crates/node/npm/win32-x64-msvc/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@tailwindcss/oxide-win32-x64-msvc",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "crates/node/npm/win32-x64-msvc"
+    "directory": "oxide/crates/node/npm/win32-x64-msvc"
   },
   "os": [
     "win32"
@@ -22,6 +22,6 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 20"
+    "node": ">= 10"
   }
 }
diff --git a/oxide/crates/node/package.json b/oxide/crates/node/package.json
new file mode 100644
index 000000000..ddfcb6134
--- /dev/null
+++ b/oxide/crates/node/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "@tailwindcss/oxide",
+  "version": "0.0.0-internal.b2586d4e",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
+    "directory": "oxide/crates/node"
+  },
+  "main": "index.js",
+  "types": "index.d.ts",
+  "napi": {
+    "name": "tailwindcss-oxide",
+    "triples": {
+      "additional": [
+        "armv7-linux-androideabi",
+        "aarch64-linux-android",
+        "aarch64-apple-darwin",
+        "aarch64-unknown-linux-gnu",
+        "aarch64-unknown-linux-musl",
+        "armv7-unknown-linux-gnueabihf",
+        "x86_64-unknown-linux-musl",
+        "x86_64-unknown-freebsd",
+        "i686-pc-windows-msvc"
+      ]
+    }
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@napi-rs/cli": "^2.17.0"
+  },
+  "engines": {
+    "node": ">= 10"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts"
+  ],
+  "publishConfig": {
+    "provenance": true,
+    "access": "public"
+  },
+  "scripts": {
+    "artifacts": "npx napi artifacts",
+    "build": "npx napi build --platform --release --no-const-enum",
+    "dev": "cargo watch --quiet --shell 'npm run build'",
+    "build:debug": "npx napi build --platform --no-const-enum",
+    "version": "npx napi version"
+  },
+  "optionalDependencies": {
+    "@tailwindcss/oxide-android-arm64": "workspace:*",
+    "@tailwindcss/oxide-darwin-arm64": "workspace:*",
+    "@tailwindcss/oxide-darwin-x64": "workspace:*",
+    "@tailwindcss/oxide-freebsd-x64": "workspace:*",
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "workspace:*",
+    "@tailwindcss/oxide-linux-arm64-gnu": "workspace:*",
+    "@tailwindcss/oxide-linux-arm64-musl": "workspace:*",
+    "@tailwindcss/oxide-linux-x64-gnu": "workspace:*",
+    "@tailwindcss/oxide-linux-x64-musl": "workspace:*",
+    "@tailwindcss/oxide-win32-x64-msvc": "workspace:*"
+  }
+}
diff --git a/crates/node/rustfmt.toml b/oxide/crates/node/rustfmt.toml
similarity index 100%
rename from crates/node/rustfmt.toml
rename to oxide/crates/node/rustfmt.toml
diff --git a/oxide/crates/node/src/lib.rs b/oxide/crates/node/src/lib.rs
new file mode 100644
index 000000000..2658cdb22
--- /dev/null
+++ b/oxide/crates/node/src/lib.rs
@@ -0,0 +1,89 @@
+use napi::bindgen_prelude::{FromNapiValue, ToNapiValue};
+use std::path::PathBuf;
+
+#[macro_use]
+extern crate napi_derive;
+
+#[derive(Debug, Clone)]
+#[napi(object)]
+pub struct ChangedContent {
+  pub file: Option<String>,
+  pub content: Option<String>,
+  pub extension: String,
+}
+
+impl From<ChangedContent> for tailwindcss_core::ChangedContent {
+  fn from(changed_content: ChangedContent) -> Self {
+    tailwindcss_core::ChangedContent {
+      file: changed_content.file.map(PathBuf::from),
+      content: changed_content.content,
+    }
+  }
+}
+
+#[derive(Debug, Clone)]
+#[napi(object)]
+pub struct ScanResult {
+  pub globs: Vec<GlobEntry>,
+  pub files: Vec<String>,
+  pub candidates: Vec<String>,
+}
+
+#[derive(Debug, Clone)]
+#[napi(object)]
+pub struct GlobEntry {
+  pub base: String,
+  pub glob: String,
+}
+
+#[derive(Debug, Clone)]
+#[napi(object)]
+pub struct ScanOptions {
+  pub base: String,
+  pub globs: Option<bool>,
+}
+
+#[napi]
+pub fn clear_cache() {
+    tailwindcss_core::clear_cache();
+}
+
+#[napi]
+pub fn scan_dir(args: ScanOptions) -> ScanResult {
+  let result = tailwindcss_core::scan_dir(tailwindcss_core::ScanOptions {
+    base: args.base,
+    globs: args.globs.unwrap_or(false),
+  });
+
+  ScanResult {
+    files: result.files,
+    candidates: result.candidates,
+    globs: result
+      .globs
+      .into_iter()
+      .map(|g| GlobEntry {
+        base: g.base,
+        glob: g.glob,
+      })
+      .collect(),
+  }
+}
+
+#[derive(Debug)]
+#[napi]
+pub enum IO {
+  Sequential = 0b0001,
+  Parallel = 0b0010,
+}
+
+#[derive(Debug)]
+#[napi]
+pub enum Parsing {
+  Sequential = 0b0100,
+  Parallel = 0b1000,
+}
+
+#[napi]
+pub fn scan_files(input: Vec<ChangedContent>, strategy: u8) -> Vec<String> {
+  tailwindcss_core::scan_files(input.into_iter().map(Into::into).collect(), strategy)
+}
diff --git a/oxide/package.json b/oxide/package.json
new file mode 100644
index 000000000..6372db6c0
--- /dev/null
+++ b/oxide/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "tailwindcss-oxide",
+  "private": true,
+  "version": "0.1.0",
+  "workspaces": [
+    "node"
+  ],
+  "scripts": {
+    "test": "cargo test",
+    "install:cargo": "cargo install cargo-watch cargo-fuzz",
+    "build": "cargo build --release",
+    "build:node": "npm --prefix ./crates/node run build",
+    "dev": "cargo watch --clear --quiet -x 'run --quiet'",
+    "dev:node": "cargo watch --clear --quiet --shell 'npm --prefix ./crates/node run build:debug'",
+    "fuzz": "cd ./crates/core; cargo fuzz run parsing; cd -",
+    "bench": "cargo bench",
+    "postbench": "open ./target/criterion/report/index.html"
+  },
+  "license": "MIT"
+}
diff --git a/package.json b/package.json
index 7d41a469e..6687e06db 100644
--- a/package.json
+++ b/package.json
@@ -17,17 +17,6 @@
         "options": {
           "parser": "jsonc"
         }
-      },
-      {
-        "files": [
-          "integrations/**/*.ts"
-        ],
-        "options": {
-          "plugins": [
-            "prettier-plugin-embed",
-            "prettier-plugin-organize-imports"
-          ]
-        }
       }
     ]
   },
@@ -35,12 +24,10 @@
     "format": "prettier --write .",
     "lint": "prettier --check . && turbo lint",
     "build": "turbo build --filter=!./playgrounds/*",
-    "postbuild": "node ./scripts/pack-packages.mjs",
     "dev": "turbo dev --filter=!./playgrounds/*",
-    "test": "cargo test && vitest run --hideSkippedTests",
-    "test:integrations": "vitest --root=./integrations",
-    "test:ui": "pnpm run --filter=tailwindcss test:ui && pnpm run --filter=@tailwindcss/browser test:ui",
-    "tdd": "vitest --hideSkippedTests",
+    "test": "pnpm test --prefix=oxide && vitest run",
+    "test:ui": "pnpm run --filter=tailwindcss test:ui",
+    "tdd": "vitest",
     "bench": "vitest bench",
     "version-packages": "node ./scripts/version-packages.mjs",
     "vite": "pnpm run --filter=vite-playground dev",
@@ -48,17 +35,14 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.62.1",
-    "@types/node": "catalog:",
-    "postcss": "catalog:",
-    "postcss-import": "^16.1.1",
-    "prettier": "catalog:",
-    "prettier-plugin-embed": "^0.5.1",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "tsup": "^8.5.1",
-    "turbo": "^2.10.8",
-    "typescript": "^5.9.3",
-    "vitest": "^4.1.10"
-  },
-  "packageManager": "pnpm@11.9.0"
+    "@playwright/test": "^1.41.2",
+    "@types/node": "^20.11.19",
+    "@vitest/coverage-v8": "^1.2.1",
+    "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "tsup": "^8.0.1",
+    "turbo": "^1.12.4",
+    "typescript": "^5.3.3",
+    "vitest": "^1.1.3"
+  }
 }
diff --git a/packages/@tailwindcss-browser/README.md b/packages/@tailwindcss-browser/README.md
deleted file mode 100644
index 5f532607d..000000000
--- a/packages/@tailwindcss-browser/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-<p align="center">
-  <a href="https://tailwindcss.com" target="_blank">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
-      <img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
-    </picture>
-  </a>
-</p>
-
-<p align="center">
-  A utility-first CSS framework for rapidly building custom user interfaces.
-</p>
-
-<p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
-    <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
-</p>
-
----
-
-## Documentation
-
-For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
-
-## Community
-
-For help, discussion about best practices, or feature ideas:
-
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
-
-## Contributing
-
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
diff --git a/packages/@tailwindcss-browser/package.json b/packages/@tailwindcss-browser/package.json
deleted file mode 100644
index 70af78c1e..000000000
--- a/packages/@tailwindcss-browser/package.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "@tailwindcss/browser",
-  "version": "4.3.3",
-  "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
-  "license": "MIT",
-  "main": "./dist/index.global.js",
-  "browser": "./dist/index.global.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "packages/@tailwindcss-browser"
-  },
-  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
-  "homepage": "https://tailwindcss.com",
-  "scripts": {
-    "lint": "tsc --noEmit",
-    "build": "tsup-node",
-    "dev": "pnpm run build -- --watch",
-    "test:ui": "playwright test"
-  },
-  "exports": {
-    ".": "./dist/index.global.js",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "provenance": true,
-    "access": "public"
-  },
-  "devDependencies": {
-    "h3": "^1.15.11",
-    "listhen": "^1.10.1",
-    "tailwindcss": "workspace:*"
-  }
-}
diff --git a/packages/@tailwindcss-browser/playwright.config.ts b/packages/@tailwindcss-browser/playwright.config.ts
deleted file mode 100644
index c6059dd82..000000000
--- a/packages/@tailwindcss-browser/playwright.config.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { defineConfig, devices } from '@playwright/test'
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  testDir: './tests',
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html', { open: 'never' }]],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-    // Playwright 1.60's Windows WebKit worker hangs on shutdown after all tests
-    // pass, causing CI to fail with a worker force-kill error.
-    ...(process.platform === 'win32'
-      ? []
-      : [{ name: 'webkit', use: { ...devices['Desktop Safari'] } }]),
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-        // https://playwright.dev/docs/test-use-options#more-browser-and-context-options
-        launchOptions: {
-          // https://playwright.dev/docs/api/class-browsertype#browser-type-launch-option-firefox-user-prefs
-          firefoxUserPrefs: {
-            // By default, headless Firefox runs as though no pointers
-            // capabilities are available.
-            // https://github.com/microsoft/playwright/issues/7769#issuecomment-966098074
-            //
-            // This impacts our `hover` variant implementation which uses an
-            // '(hover: hover)' media query to determine if hover is available.
-            //
-            // Available values for pointer capabilities:
-            // NO_POINTER            = 0x00;
-            // COARSE_POINTER        = 0x01;
-            // FINE_POINTER          = 0x02;
-            // HOVER_CAPABLE_POINTER = 0x04;
-            //
-            // Setting to 0x02 | 0x04 says the system supports a mouse
-            'ui.primaryPointerCapabilities': 0x02 | 0x04,
-            'ui.allPointerCapabilities': 0x02 | 0x04,
-          },
-        },
-      },
-    },
-  ],
-})
diff --git a/packages/@tailwindcss-browser/src/assets.ts b/packages/@tailwindcss-browser/src/assets.ts
deleted file mode 100644
index e72d47658..000000000
--- a/packages/@tailwindcss-browser/src/assets.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import index from 'tailwindcss/index.css'
-import preflight from 'tailwindcss/preflight.css'
-import theme from 'tailwindcss/theme.css'
-import utilities from 'tailwindcss/utilities.css'
-
-export const css = {
-  index,
-  preflight,
-  theme,
-  utilities,
-}
diff --git a/packages/@tailwindcss-browser/src/index.ts b/packages/@tailwindcss-browser/src/index.ts
deleted file mode 100644
index 49c7e4675..000000000
--- a/packages/@tailwindcss-browser/src/index.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import * as tailwindcss from 'tailwindcss'
-import * as assets from './assets'
-import { Instrumentation } from './instrumentation'
-
-/**
- * The type used by `<style>` tags that contain input CSS.
- */
-const STYLE_TYPE = 'text/tailwindcss'
-
-/**
- * The current Tailwind CSS compiler.
- *
- * This gets recreated:
- * - When stylesheets change
- */
-let compiler: Awaited<ReturnType<typeof tailwindcss.compile>>
-
-/**
- * The list of all seen classes on the page so far. The compiler already has a
- * cache of classes but this lets us only pass new classes to `build(…)`.
- */
-let classes = new Set<string>()
-
-/**
- * The last input CSS that was compiled. If stylesheets "change" without
- * actually changing, we can avoid a full rebuild.
- */
-let lastCss = ''
-
-/**
- * The stylesheet that we use to inject the compiled CSS into the page.
- */
-let sheet = document.createElement('style')
-
-/**
- * The queue of build tasks that need to be run. This is used to ensure that we
- * don't run multiple builds concurrently.
- */
-let buildQueue = Promise.resolve()
-
-/**
- * What build this is
- */
-let nextBuildId = 1
-
-/**
- * Used for instrumenting the build process. This data shows up in the
- * performance tab of the browser's devtools.
- */
-let I = new Instrumentation()
-
-/**
- * Create the Tailwind CSS compiler
- *
- * This handles loading imports, plugins, configs, etc…
- *
- * This does **not** imply that the CSS is actually built. That happens in the
- * `build` function and is a separate scheduled task.
- */
-async function createCompiler() {
-  I.start(`Create compiler`)
-  I.start('Reading Stylesheets')
-
-  // The stylesheets may have changed causing a full rebuild so we'll need to
-  // gather the latest list of stylesheets.
-  let stylesheets: Iterable<HTMLStyleElement> = document.querySelectorAll(
-    `style[type="${STYLE_TYPE}"]`,
-  )
-
-  let css = ''
-  for (let sheet of stylesheets) {
-    observeSheet(sheet)
-    css += sheet.textContent + '\n'
-  }
-
-  // The user might have no stylesheets, or a some stylesheets without `@import`
-  // because they want to customize their theme so we'll inject the main import
-  // for them. However, if they start using `@import` we'll let them control
-  // the build completely.
-  if (!css.includes('@import')) {
-    css = `@import "tailwindcss";${css}`
-  }
-
-  I.end('Reading Stylesheets', {
-    size: css.length,
-    changed: lastCss !== css,
-  })
-
-  // The input CSS did not change so the compiler does not need to be recreated
-  if (lastCss === css) return
-
-  lastCss = css
-
-  I.start('Compile CSS')
-  try {
-    compiler = await tailwindcss.compile(css, {
-      base: '/',
-      loadStylesheet,
-      loadModule,
-    })
-  } finally {
-    I.end('Compile CSS')
-    I.end(`Create compiler`)
-  }
-
-  classes.clear()
-}
-
-async function loadStylesheet(id: string, base: string) {
-  function load() {
-    if (id === 'tailwindcss') {
-      return {
-        path: 'virtual:tailwindcss/index.css',
-        base,
-        content: assets.css.index,
-      }
-    } else if (
-      id === 'tailwindcss/preflight' ||
-      id === 'tailwindcss/preflight.css' ||
-      id === './preflight.css'
-    ) {
-      return {
-        path: 'virtual:tailwindcss/preflight.css',
-        base,
-        content: assets.css.preflight,
-      }
-    } else if (
-      id === 'tailwindcss/theme' ||
-      id === 'tailwindcss/theme.css' ||
-      id === './theme.css'
-    ) {
-      return {
-        path: 'virtual:tailwindcss/theme.css',
-        base,
-        content: assets.css.theme,
-      }
-    } else if (
-      id === 'tailwindcss/utilities' ||
-      id === 'tailwindcss/utilities.css' ||
-      id === './utilities.css'
-    ) {
-      return {
-        path: 'virtual:tailwindcss/utilities.css',
-        base,
-        content: assets.css.utilities,
-      }
-    }
-
-    throw new Error(`The browser build does not support @import for "${id}"`)
-  }
-
-  try {
-    let sheet = load()
-
-    I.hit(`Loaded stylesheet`, {
-      id,
-      base,
-      size: sheet.content.length,
-    })
-
-    return sheet
-  } catch (err) {
-    I.hit(`Failed to load stylesheet`, {
-      id,
-      base,
-      error: (err as Error).message ?? err,
-    })
-
-    throw err
-  }
-}
-
-async function loadModule(): Promise<never> {
-  throw new Error(`The browser build does not support plugins or config files.`)
-}
-
-async function build(kind: 'full' | 'incremental') {
-  if (!compiler) return
-
-  // 1. Refresh the known list of classes
-  let newClasses = new Set<string>()
-
-  I.start(`Collect classes`)
-
-  for (let element of document.querySelectorAll('[class]')) {
-    for (let c of element.classList) {
-      if (classes.has(c)) continue
-
-      classes.add(c)
-      newClasses.add(c)
-    }
-  }
-
-  I.end(`Collect classes`, {
-    count: newClasses.size,
-  })
-
-  if (newClasses.size === 0 && kind === 'incremental') return
-
-  // 2. Compile the CSS
-  I.start(`Build utilities`)
-
-  sheet.textContent = compiler.build(Array.from(newClasses))
-
-  I.end(`Build utilities`)
-}
-
-function rebuild(kind: 'full' | 'incremental') {
-  async function run() {
-    if (!compiler && kind !== 'full') {
-      return
-    }
-
-    let buildId = nextBuildId++
-
-    I.start(`Build #${buildId} (${kind})`)
-
-    if (kind === 'full') {
-      await createCompiler()
-    }
-
-    I.start(`Build`)
-    await build(kind)
-    I.end(`Build`)
-
-    I.end(`Build #${buildId} (${kind})`)
-  }
-
-  buildQueue = buildQueue.then(run).catch((err) => I.error(err))
-}
-
-// Handle changes to known stylesheets
-let styleObserver = new MutationObserver(() => rebuild('full'))
-
-function observeSheet(sheet: HTMLStyleElement) {
-  styleObserver.observe(sheet, {
-    attributes: true,
-    attributeFilter: ['type'],
-    characterData: true,
-    subtree: true,
-    childList: true,
-  })
-}
-
-// Handle changes to the document that could affect the styles
-// - Changes to any element's class attribute
-// - New stylesheets being added to the page
-// - New elements (with classes) being added to the page
-new MutationObserver((records) => {
-  let full = 0
-  let incremental = 0
-
-  for (let record of records) {
-    // New stylesheets == tracking + full rebuild
-    for (let node of record.addedNodes as Iterable<HTMLElement>) {
-      if (node.nodeType !== Node.ELEMENT_NODE) continue
-      if (node.tagName !== 'STYLE') continue
-      if (node.getAttribute('type') !== STYLE_TYPE) continue
-
-      observeSheet(node as HTMLStyleElement)
-      full++
-    }
-
-    // New nodes require an incremental rebuild
-    for (let node of record.addedNodes) {
-      if (node.nodeType !== 1) continue
-
-      // Skip the output stylesheet itself to prevent loops
-      if (node === sheet) continue
-
-      incremental++
-    }
-
-    // Changes to class attributes require an incremental rebuild
-    if (record.type === 'attributes') {
-      incremental++
-    }
-  }
-
-  if (full > 0) {
-    return rebuild('full')
-  } else if (incremental > 0) {
-    return rebuild('incremental')
-  }
-}).observe(document.documentElement, {
-  attributes: true,
-  attributeFilter: ['class'],
-  childList: true,
-  subtree: true,
-})
-
-rebuild('full')
-
-document.head.append(sheet)
diff --git a/packages/@tailwindcss-browser/src/instrumentation.ts b/packages/@tailwindcss-browser/src/instrumentation.ts
deleted file mode 100644
index 0f04e6fea..000000000
--- a/packages/@tailwindcss-browser/src/instrumentation.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export class Instrumentation {
-  start(label: string) {
-    performance.mark(`${label} (start)`)
-  }
-
-  end(label: string, detail?: any) {
-    performance.mark(`${label} (end)`)
-
-    performance.measure(label, {
-      start: `${label} (start)`,
-      end: `${label} (end)`,
-      detail,
-    })
-  }
-
-  hit(label: string, detail?: any) {
-    performance.mark(label, {
-      detail,
-    })
-  }
-
-  error(error: any) {
-    performance.mark(`(error)`, {
-      detail: { error: `${error}` },
-    })
-
-    throw error
-  }
-}
diff --git a/packages/@tailwindcss-browser/src/types.d.ts b/packages/@tailwindcss-browser/src/types.d.ts
deleted file mode 100644
index 8be70dffc..000000000
--- a/packages/@tailwindcss-browser/src/types.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.css' {
-  const content: string
-  export default content
-}
diff --git a/packages/@tailwindcss-browser/tests/ui.spec.ts b/packages/@tailwindcss-browser/tests/ui.spec.ts
deleted file mode 100644
index 241322daa..000000000
--- a/packages/@tailwindcss-browser/tests/ui.spec.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import { expect, test, type Page } from '@playwright/test'
-import { readFile } from 'node:fs/promises'
-
-const html = String.raw
-
-let server: Awaited<ReturnType<typeof createServer>>
-
-test.beforeAll(async ({}, info) => {
-  server = await createServer()
-})
-
-test.afterAll(async () => {
-  await server.close()
-})
-
-test('basic', async ({ page }) => {
-  await server.render({
-    page,
-    body: html`<div data-test class="w-32 h-32 bg-red"></div>`,
-  })
-
-  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(255, 0, 0)')
-})
-
-test('observer', async ({ page }) => {
-  await server.render({
-    page,
-    body: html`<div data-test class="w-32 h-32 bg-red"></div>`,
-  })
-
-  await page.evaluate(() => {
-    document.querySelector('[data-test]')!.classList.replace('bg-red', 'bg-blue')
-  })
-
-  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(0, 0, 255)')
-})
-
-test('custom css', async ({ page }) => {
-  await server.render({
-    page,
-    head: html`
-      <style data-css type="text/tailwindcss">
-        .foo {
-          @apply bg-red;
-        }
-      </style>
-    `,
-    body: html`<div data-test class="w-32 h-32 foo"></div>`,
-  })
-
-  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(255, 0, 0)')
-
-  await page.evaluate(() => {
-    document.querySelector('[data-css]')!.textContent = `
-      .foo {
-        @apply bg-blue;
-      }
-    `
-  })
-
-  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(0, 0, 255)')
-})
-
-test('changes to `@theme`', async ({ page }) => {
-  await server.render({
-    page,
-    head: html`
-      <style data-css type="text/tailwindcss">
-        @theme {
-          --color-primary: #ff0000;
-        }
-      </style>
-    `,
-    body: html`<div data-test class="w-32 h-32 bg-primary"></div>`,
-  })
-
-  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(255, 0, 0)')
-
-  await page.evaluate(() => {
-    document.querySelector('[data-css]')!.textContent = `
-      @theme {
-        --color-primary: #0000ff;
-      }
-    `
-  })
-
-  await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(0, 0, 255)')
-})
-
-test('no classes', async ({ page }) => {
-  await server.render({
-    page,
-    body: html`<div data-test>test</div>`,
-  })
-
-  await expect(page.locator('body')).toHaveCSS('margin', '0px')
-})
-
-test('html classes', async ({ page }) => {
-  await server.render({
-    page,
-    htmlClasses: 'h-4',
-  })
-
-  await expect(page.locator('html')).toHaveCSS('height', '16px')
-})
-
-async function createServer() {
-  const { createApp, createRouter, defineEventHandler, toNodeListener } = await import('h3')
-  const { listen } = await import('listhen')
-
-  interface PageOptions {
-    page: Page
-    head?: string
-    body?: string
-    htmlClasses?: string
-  }
-
-  async function render({ page, htmlClasses, head, body }: PageOptions) {
-    let content = html`
-      <!doctype html>
-      <html lang="en" class="${htmlClasses ?? ''}">
-        <head>
-          <meta charset="UTF-8" />
-          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          <title>Document</title>
-          <script src="/tailwindcss.js"></script>
-          <style type="text/tailwindcss">
-            @theme {
-              --color-red: #ff0000;
-              --color-green: #00ff00;
-              --color-blue: #0000ff;
-            }
-          </style>
-          ${head ?? ''}
-        </head>
-        <body>
-          ${body ?? ''}
-        </body>
-      </html>
-    `
-
-    router.get(
-      '/',
-      defineEventHandler(() => content),
-    )
-
-    await page.goto(server.url)
-  }
-
-  const app = createApp()
-  const router = createRouter()
-
-  router.get(
-    '/tailwindcss.js',
-    defineEventHandler(() => readFile(require.resolve('@tailwindcss/browser'))),
-  )
-
-  app.use(router)
-
-  let workerIndex = Number(process.env.TEST_WORKER_INDEX ?? 0)
-
-  let listener = await listen(toNodeListener(app), {
-    port: 3000 + workerIndex,
-    showURL: false,
-    open: false,
-  })
-
-  return {
-    app,
-    url: listener.url,
-    close: listener.close,
-    render,
-  }
-}
diff --git a/packages/@tailwindcss-browser/tsconfig.json b/packages/@tailwindcss-browser/tsconfig.json
deleted file mode 100644
index 8ea040daf..000000000
--- a/packages/@tailwindcss-browser/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "lib": ["es2022", "esnext.disposable", "dom", "dom.iterable"],
-  },
-}
diff --git a/packages/@tailwindcss-browser/tsup.config.ts b/packages/@tailwindcss-browser/tsup.config.ts
deleted file mode 100644
index 10a73f2b7..000000000
--- a/packages/@tailwindcss-browser/tsup.config.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-  format: ['iife'],
-  clean: true,
-  minify: true,
-  entry: ['src/index.ts'],
-  noExternal: [/.*/],
-  loader: {
-    '.css': 'text',
-  },
-  define: {
-    'process.env.NODE_ENV': '"production"',
-    'process.env.FEATURES_ENV': '"stable"',
-  },
-  esbuildPlugins: [
-    {
-      name: 'patch-intellisense-apis',
-      setup(build) {
-        build.onLoad({ filter: /intellisense.ts$/ }, () => {
-          return {
-            contents: `
-              export function getClassList() { return [] }
-              export function getVariants() { return [] }
-              export function canonicalizeCandidates() { return [] }
-            `,
-          }
-        })
-      },
-    },
-  ],
-})
diff --git a/packages/@tailwindcss-cli/README.md b/packages/@tailwindcss-cli/README.md
index 5f532607d..95ec9d87d 100644
--- a/packages/@tailwindcss-cli/README.md
+++ b/packages/@tailwindcss-cli/README.md
@@ -13,10 +13,10 @@
 </p>
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=next" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
 </p>
 
 ---
@@ -27,10 +27,14 @@ For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
 
 ## Community
 
-For help, discussion about best practices, or feature ideas:
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
 
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
+[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions)
+
+For chatting with others using the framework:
+
+[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
 
 ## Contributing
 
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
+If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**.
diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json
index 7fa5b5500..5907d2bfc 100644
--- a/packages/@tailwindcss-cli/package.json
+++ b/packages/@tailwindcss-cli/package.json
@@ -1,18 +1,18 @@
 {
   "name": "@tailwindcss/cli",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
+    "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
     "directory": "packages/@tailwindcss-cli"
   },
   "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
   "homepage": "https://tailwindcss.com",
   "scripts": {
     "lint": "tsc --noEmit",
-    "build": "tsup-node",
+    "build": "tsup-node ./src/index.ts --format esm --minify --clean",
     "dev": "pnpm run build -- --watch"
   },
   "bin": {
@@ -29,12 +29,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@parcel/watcher": "catalog:",
-    "@tailwindcss/node": "workspace:*",
-    "@tailwindcss/oxide": "workspace:*",
-    "enhanced-resolve": "catalog:",
+    "@parcel/watcher": "^2.4.1",
+    "@tailwindcss/oxide": "workspace:^",
     "mri": "^1.2.0",
-    "picocolors": "^1.1.1",
-    "tailwindcss": "workspace:*"
+    "picocolors": "^1.0.0",
+    "postcss": "8.4.24",
+    "postcss-import": "^16.0.0",
+    "tailwindcss": "workspace:^"
+  },
+  "devDependencies": {
+    "@types/postcss-import": "^14.0.3"
   }
 }
diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts
index ffef2ae8b..e4f65055e 100644
--- a/packages/@tailwindcss-cli/src/commands/build/index.ts
+++ b/packages/@tailwindcss-cli/src/commands/build/index.ts
@@ -1,18 +1,12 @@
-import {
-  compile,
-  env,
-  Instrumentation,
-  optimize,
-  toSourceMap,
-  type SourceMap,
-} from '@tailwindcss/node'
-import { clearRequireCache } from '@tailwindcss/node/require-cache'
-import { Scanner, type ChangedContent } from '@tailwindcss/oxide'
-import { existsSync, type Stats } from 'node:fs'
+import watcher from '@parcel/watcher'
+import { IO, Parsing, scanDir, scanFiles, type ChangedContent } from '@tailwindcss/oxide'
+import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
+import postcss from 'postcss'
+import atImport from 'postcss-import'
+import { compile, optimizeCss } from 'tailwindcss'
 import type { Arg, Result } from '../../utils/args'
-import { Disposables } from '../../utils/disposables'
 import {
   eprintln,
   formatDuration,
@@ -20,13 +14,11 @@ import {
   highlight,
   println,
   relative,
-  wordWrap,
 } from '../../utils/renderer'
+import { resolve } from '../../utils/resolve'
 import { drainStdin, outputFile } from './utils'
 
 const css = String.raw
-const DEBUG = env.DEBUG
-const DEFAULT_POLL_INTERVAL_MS = 250
 
 export function options() {
   return {
@@ -39,20 +31,11 @@ export function options() {
       type: 'string',
       description: 'Output file',
       alias: '-o',
-      default: '-',
     },
     '--watch': {
       type: 'boolean | string',
-      description:
-        'Watch for changes and rebuild as needed, and use `always` to keep watching when stdin is closed',
+      description: 'Watch for changes and rebuild as needed',
       alias: '-w',
-      values: ['always'],
-    },
-    '--poll': {
-      type: 'boolean | number',
-      description: 'Use polling instead of filesystem events when watching',
-      default: false,
-      values: ['ms'],
     },
     '--minify': {
       type: 'boolean',
@@ -68,73 +51,14 @@ export function options() {
       description: 'The current working directory',
       default: '.',
     },
-    '--map': {
-      type: 'boolean | string',
-      description: 'Generate a source map',
-      default: false,
-    },
-    '--silent': {
-      type: 'boolean',
-      description: 'Suppress non-error output',
-    },
   } satisfies Arg
 }
 
-function formatError(error: unknown): string {
-  let seen = new Set() // Track seen errors to prevent circular errors
-  function render(err: unknown, depth: number): string[] {
-    let indent = '  '.repeat(depth)
-    let width = (process.stderr.columns ?? Infinity) - 2 * (depth + 1)
-
-    let output = [
-      `${indent}${red(depth === 0 ? 'Error:' : 'Caused by:')}`,
-      `${indent}${dim('\u250C')}`,
-    ]
-
-    for (let line of `${err}`.split('\n')) {
-      let wrapped = wordWrap(line, width)
-      if (wrapped.length === 0) wrapped = ['']
-      for (let chunk of wrapped) {
-        output.push(`${indent}${dim('\u2502')} ${chunk}`)
-      }
-    }
-
-    output.push(`${indent}${dim('\u2514')}`)
-
-    if (typeof err === 'object' && err !== null && 'cause' in err && err.cause != null) {
-      if (!seen.add(err).has(err.cause)) {
-        output.push(...render(err.cause, depth + 1))
-      }
-    }
-
-    return output
-  }
-
-  return render(error, 0).join('\n')
-}
-
-async function handleError<T>(fn: () => T): Promise<T> {
-  try {
-    return await fn()
-  } catch (err) {
-    eprintln(formatError(err))
-    process.exit(1)
-  }
-}
-
 export async function handle(args: Result<ReturnType<typeof options>>) {
-  if (!args['--silent']) eprintln(header())
-  if (!args['--silent']) eprintln()
-
-  using I = new Instrumentation()
-  DEBUG && I.start('[@tailwindcss/cli] (initial build)')
-
   let base = path.resolve(args['--cwd'])
 
-  // Resolve the output as an absolute path. If the output is a `-`, then we
-  // don't need to resolve it because this is a flag to indicate that we want to
-  // use `stdout` instead.
-  if (args['--output'] && args['--output'] !== '-') {
+  // Resolve the output as an absolute path.
+  if (args['--output']) {
     args['--output'] = path.resolve(base, args['--output'])
   }
 
@@ -146,729 +70,186 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
 
     // Ensure the provided `--input` exists.
     if (!existsSync(args['--input'])) {
+      eprintln(header())
+      eprintln()
       eprintln(`Specified input file ${highlight(relative(args['--input']))} does not exist.`)
       process.exit(1)
     }
   }
 
-  // Check if the input and output file paths are identical, otherwise return an
-  // error to the user.
-  if (args['--input'] === args['--output'] && args['--input'] !== '-') {
-    eprintln(
-      `Specified input file ${highlight(relative(args['--input']))} and output file ${highlight(relative(args['--output']))} are identical.`,
-    )
-    process.exit(1)
-  }
-
-  // If the user passes `{bin} build --map -` then this likely means they want to output the map inline
-  // this is the default behavior of `{bin build} --map` to inform the user of that
-  if (args['--map'] === '-') {
-    eprintln(`Use --map without a value to inline the source map.`)
-    process.exit(1)
-  }
-
-  if (args['--poll'] === undefined) {
-    eprintln(`Use --poll with a non-zero value in milliseconds.`)
-    process.exit(1)
-  }
-  let pollInterval = args['--poll'] === true ? DEFAULT_POLL_INTERVAL_MS : args['--poll']
-  if (pollInterval !== false && pollInterval <= 0) {
-    eprintln(`Specified polling interval must be a positive number.`)
-    process.exit(1)
-  }
-
-  // Resolve the map as an absolute path. If the output is true then we
-  // don't need to resolve it because it'll be an inline source map
-  if (args['--map'] && args['--map'] !== true) {
-    args['--map'] = path.resolve(base, args['--map'])
-  }
-
   let start = process.hrtime.bigint()
+  let { candidates } = scanDir({ base })
 
-  let input = args['--input']
-    ? args['--input'] === '-'
-      ? await drainStdin()
-      : await fs.readFile(args['--input'], 'utf-8')
-    : css`
-        @import 'tailwindcss';
-      `
+  // Resolve the input
+  let [input, cssImportPaths] = await handleImports(
+    args['--input']
+      ? args['--input'] === '-'
+        ? await drainStdin()
+        : await fs.readFile(args['--input'], 'utf-8')
+      : css`
+          @import '${resolve('tailwindcss/index.css')}';
+        `,
+    args['--input'] ?? base,
+  )
 
   let previous = {
     css: '',
     optimizedCss: '',
-    output: null as string | null,
   }
 
-  async function write(
-    css: string,
-    map: SourceMap | null,
-    args: Result<ReturnType<typeof options>>,
-    I: Instrumentation,
-  ) {
+  async function write(css: string, args: Result<ReturnType<typeof options>>) {
     let output = css
 
     // Optimize the output
     if (args['--minify'] || args['--optimize']) {
       if (css !== previous.css) {
-        DEBUG && I.start('Optimize CSS')
-        let optimized = optimize(css, {
+        let optimizedCss = optimizeCss(css, {
           file: args['--input'] ?? 'input.css',
           minify: args['--minify'] ?? false,
-          map: map?.raw ?? undefined,
         })
-        DEBUG && I.end('Optimize CSS')
         previous.css = css
-        previous.optimizedCss = optimized.code
-        if (optimized.map) {
-          map = toSourceMap(optimized.map)
-        }
-        output = optimized.code
+        previous.optimizedCss = optimizedCss
+        output = optimizedCss
       } else {
         output = previous.optimizedCss
       }
     }
 
     // Write the output
-    if (map) {
-      // Inline the source map
-      if (args['--map'] === true) {
-        output += `\n`
-        output += map.inline
-      } else if (typeof args['--map'] === 'string') {
-        let basePath =
-          args['--output'] && args['--output'] !== '-'
-            ? path.dirname(path.resolve(args['--output']))
-            : process.cwd()
-
-        let mapPath = path.resolve(args['--map'])
-
-        let relativePath = path.relative(basePath, mapPath)
-
-        output += `\n`
-        output += map.comment(relativePath)
-
-        DEBUG && I.start('Write source map')
-        await outputFile(args['--map'], map.raw)
-        DEBUG && I.end('Write source map')
-      }
-    }
-
-    let didChange = output !== previous.output
-
-    DEBUG && I.start('Write output')
-    if (args['--output'] && args['--output'] !== '-') {
+    if (args['--output']) {
       await outputFile(args['--output'], output)
-    } else if (didChange) {
+    } else {
       println(output)
     }
-    DEBUG && I.end('Write output')
-
-    previous.output = output
-    return didChange
   }
 
-  let inputFilePath =
-    args['--input'] && args['--input'] !== '-' ? path.resolve(args['--input']) : null
+  // Compile the input
+  let { build } = compile(input)
 
-  let inputBasePath = inputFilePath ? path.dirname(inputFilePath) : process.cwd()
+  await write(build(candidates), args)
 
-  let fullRebuildPaths: string[] = inputFilePath ? [inputFilePath] : []
-  let backupRebuildPaths = fullRebuildPaths
-
-  async function createCompiler(css: string, I: Instrumentation) {
-    DEBUG && I.start('Setup compiler')
-    let compiler = await compile(css, {
-      from: args['--output'] ? (inputFilePath ?? 'stdin.css') : undefined,
-      base: inputBasePath,
-      onDependency(path) {
-        fullRebuildPaths.push(path)
-      },
-    })
-
-    let sources = (() => {
-      // Disable auto source detection
-      if (compiler.root === 'none') {
-        return []
-      }
-
-      // No root specified, use the base directory
-      if (compiler.root === null) {
-        return [{ base, pattern: '**/*', negated: false }]
-      }
-
-      // Use the specified root
-      return [{ ...compiler.root, negated: false }]
-    })().concat(compiler.sources)
-
-    // Do not scan the current executable. Otherwise when using the standalone
-    // CLI, if the CLI lives in the current repo we would be scanning that file.
-    //
-    // This is also immune against renames of the executable file.
-    sources.push({
-      base: path.dirname(process.execPath),
-      pattern: path.basename(process.execPath),
-      negated: true,
-    })
-
-    if (inputFilePath !== null) {
-      sources.push({
-        base: path.dirname(inputFilePath),
-        pattern: path.basename(inputFilePath),
-        negated: false,
-      })
-    }
-
-    let scanner = new Scanner({ sources })
-    DEBUG && I.end('Setup compiler')
-
-    return [compiler, scanner] as const
-  }
-
-  let [compiler, scanner] = await handleError(() => createCompiler(input, I))
-  let cleanupWatchers: (() => Promise<void>)[] = []
+  let end = process.hrtime.bigint()
+  eprintln(header())
+  eprintln()
+  eprintln(`Done in ${formatDuration(end - start)}`)
 
   // Watch for changes
-  if (args['--watch'] && pollInterval === false) {
-    // Ensure the file watcher can be loaded before setting up any watchers,
-    // such that we can present a helpful error message if needed.
-    await handleError(() => loadWatcher())
+  if (args['--watch']) {
+    await watcher.subscribe(base, async (err, events) => {
+      if (err) {
+        console.error(err)
+        return
+      }
 
-    cleanupWatchers.push(
-      await createWatchers(await watchDirectories(scanner), async function handle(files) {
-        try {
-          // If the only change happened to the output file, then we don't want to
-          // trigger a rebuild because that will result in an infinite loop.
-          if (files.length === 1 && files[0] === args['--output']) return
+      try {
+        // If the only change happened to the output file, then we don't want to
+        // trigger a rebuild because that will result in an infinite loop.
+        if (events.length === 1 && events[0].path === args['--output']) return
 
-          using I = new Instrumentation()
-          DEBUG && I.start('[@tailwindcss/cli] (watcher)')
+        let changedFiles: ChangedContent[] = []
+        let rebuildStrategy: 'incremental' | 'full' = 'incremental'
 
-          // Re-compile the input
-          let start = process.hrtime.bigint()
-
-          let resolvedFullRebuildPaths = fullRebuildPaths
-          let rebuildStrategy = getRebuildStrategy(files, resolvedFullRebuildPaths)
-
-          // Track the compiled CSS
-          let compiledCss = ''
-          let compiledMap: SourceMap | null = null
-
-          // Scan the entire `base` directory for full rebuilds.
-          if (rebuildStrategy.kind === 'full') {
-            // Read the new `input`.
-            let input = args['--input']
-              ? args['--input'] === '-'
-                ? await drainStdin()
-                : await fs.readFile(args['--input'], 'utf-8')
-              : css`
-                  @import 'tailwindcss';
-                `
-            clearRequireCache(resolvedFullRebuildPaths)
-
-            // Track current rebuild paths in case something goes wrong when
-            // performing a full rebuild.
-            backupRebuildPaths = fullRebuildPaths.slice()
-
-            // The `inputFilePath`, if provided, will be the only known full
-            // rebuild path before the compiler is re-created.
-            fullRebuildPaths = inputFilePath ? [inputFilePath] : []
-
-            // Create a new compiler, given the new `input`
-            ;[compiler, scanner] = await createCompiler(input, I)
-
-            // Successfully created a new compiler, so the `fullRebuildPaths`
-            // will be updated. If other errors occur, we should be able to
-            // restore the paths unconditionally.
-            backupRebuildPaths = fullRebuildPaths.slice()
-
-            // Scan the directory for candidates
-            DEBUG && I.start('Scan for candidates')
-            let candidates = scanner.scan()
-            DEBUG && I.end('Scan for candidates')
-
-            // Setup new watchers
-            DEBUG && I.start('Setup new watchers')
-            let newCleanupFunction = await createWatchers(await watchDirectories(scanner), handle)
-            DEBUG && I.end('Setup new watchers')
-
-            // Clear old watchers
-            DEBUG && I.start('Cleanup old watchers')
-            await Promise.all(cleanupWatchers.splice(0).map((cleanup) => cleanup()))
-            DEBUG && I.end('Cleanup old watchers')
-
-            cleanupWatchers.push(newCleanupFunction)
-
-            // Re-compile the CSS
-            DEBUG && I.start('Build CSS')
-            compiledCss = compiler.build(candidates)
-            DEBUG && I.end('Build CSS')
-
-            if (args['--map']) {
-              DEBUG && I.start('Build Source Map')
-              compiledMap = toSourceMap(compiler.buildSourceMap())
-              DEBUG && I.end('Build Source Map')
-            }
+        for (let event of events) {
+          // Track new and updated files for incremental rebuilds.
+          if (event.type === 'create' || event.type === 'update') {
+            changedFiles.push({
+              file: event.path,
+              extension: path.extname(event.path).slice(1),
+            } satisfies ChangedContent)
           }
 
-          // Scan changed files only for incremental rebuilds.
-          else if (rebuildStrategy.kind === 'incremental') {
-            DEBUG && I.start('Scan for candidates')
-            let newCandidates = scanner.scanFiles(rebuildStrategy.changedFiles)
-            DEBUG && I.end('Scan for candidates')
+          // If one of the changed files is related to the input CSS files, then
+          // we need to do a full rebuild because the theme might have changed.
+          if (cssImportPaths.includes(event.path)) {
+            rebuildStrategy = 'full'
 
-            // No new candidates found which means we don't need to write to
-            // disk, and can return early.
-            if (newCandidates.length <= 0) {
-              let end = process.hrtime.bigint()
-              if (!args['--silent']) eprintln(`Done in ${formatDuration(end - start)}`)
-              return
-            }
-
-            DEBUG && I.start('Build CSS')
-            compiledCss = compiler.build(newCandidates)
-            DEBUG && I.end('Build CSS')
-
-            if (args['--map']) {
-              DEBUG && I.start('Build Source Map')
-              compiledMap = toSourceMap(compiler.buildSourceMap())
-              DEBUG && I.end('Build Source Map')
-            }
+            // No need to check the rest of the events, because we already know we
+            // need to do a full rebuild.
+            break
           }
-
-          await write(compiledCss, compiledMap, args, I)
-
-          let end = process.hrtime.bigint()
-          if (!args['--silent']) eprintln(`Done in ${formatDuration(end - start)}`)
-        } catch (err) {
-          // It's important that we perform a full rebuild when any of the
-          // dependencies tracked in `fullRebuildPaths` has been changed.
-          //
-          // If we remove one of those files, then a subsequent build will be
-          // triggered, but it will fail because the dependency is gone. The
-          // compiler itself will be in a broken state and won't be able to
-          // register any dependencies therefore we want to restore all the
-          // dependencies from before. If we don't do that, then we won't be
-          // able to recover from a bug in a transitive dependency.
-          //
-          // E.g.:
-          // ```css
-          // /* input.css — known full rebuild path */
-          // @import 'tailwindcss';
-          // @config "./tailwind.config.js";
-          // ```
-          //
-          // ```js
-          // // tailwind.config.js
-          // const theme = require('./my-theme.js');
-          //
-          // module.exports = {
-          //   theme
-          // }
-          // ```
-          // In this case `my-theme.js` is a transitive dependency of
-          // `input.css` via `tailwind.config.js`. Removing `my-theme.js` will
-          // result in an error, restoring `my-theme.js` should trigger a
-          // fresh build even though the compiler didn't restore.
-          //
-          // Once the build error is fixed, a fresh full rebuild will happen
-          // which in turn will fixup the full rebuild paths.
-          fullRebuildPaths = backupRebuildPaths
-
-          // Catch any errors and print them to stderr, but don't exit the process
-          // and keep watching.
-          eprintln(formatError(err))
-
-          let end = process.hrtime.bigint()
-          if (!args['--silent']) eprintln(`Done in ${formatDuration(end - start)}`)
         }
-      }),
-    )
+
+        // Re-compile the input
+        let start = process.hrtime.bigint()
+
+        // Track the compiled CSS
+        let compiledCss = ''
+
+        // Scan the entire `base` directory for full rebuilds.
+        if (rebuildStrategy === 'full') {
+          // Re-scan the directory to get the new `candidates`.
+          candidates = scanDir({ base }).candidates
+
+          // Collect the new `input` and `cssImportPaths`.
+          ;[input, cssImportPaths] = await handleImports(
+            args['--input']
+              ? await fs.readFile(args['--input'], 'utf-8')
+              : css`
+                  @import '${resolve('tailwindcss/index.css')}';
+                `,
+            args['--input'] ?? base,
+          )
+
+          build = compile(input).build
+          compiledCss = build(candidates)
+        }
+
+        // Scan changed files only for incremental rebuilds.
+        else if (rebuildStrategy === 'incremental') {
+          let newCandidates = scanFiles(changedFiles, IO.Sequential | Parsing.Sequential)
+
+          compiledCss = build(newCandidates)
+        }
+
+        await write(compiledCss, args)
+
+        let end = process.hrtime.bigint()
+        eprintln(`Done in ${formatDuration(end - start)}`)
+      } catch (err) {
+        // Catch any errors and print them to stderr, but don't exit the process
+        // and keep watching.
+        if (err instanceof Error) {
+          eprintln(err.toString())
+        }
+      }
+    })
 
     // Abort the watcher if `stdin` is closed to avoid zombie processes. You can
     // disable this behavior with `--watch=always`.
     if (args['--watch'] !== 'always') {
       process.stdin.on('end', () => {
-        Promise.all(cleanupWatchers.map((fn) => fn())).then(
-          () => process.exit(0),
-          () => process.exit(1),
-        )
+        process.exit(0)
       })
     }
 
     // Keep the process running
     process.stdin.resume()
   }
-
-  DEBUG && I.start('Scan for candidates')
-  let candidates = scanner.scan()
-  DEBUG && I.end('Scan for candidates')
-  DEBUG && I.start('Build CSS')
-  let output = await handleError(() => compiler.build(candidates))
-  DEBUG && I.end('Build CSS')
-
-  let map: SourceMap | null = null
-
-  if (args['--map']) {
-    DEBUG && I.start('Build Source Map')
-    map = await handleError(() => toSourceMap(compiler.buildSourceMap()))
-    DEBUG && I.end('Build Source Map')
-  }
-
-  await write(output, map, args, I)
-
-  let end = process.hrtime.bigint()
-  if (!args['--silent']) eprintln(`Done in ${formatDuration(end - start)}`)
-
-  // Watch for changes, using polling
-  if (args['--watch'] && pollInterval !== false) {
-    let cleanupPollingIndicator = () => {}
-
-    function logPollingMessage(message: string) {
-      if (!args['--silent']) {
-        process.stderr.write('\r\x1B[2K')
-      }
-
-      eprintln(message)
-
-      if (!args['--silent']) {
-        process.stderr.write(`\r\x1B[2K${dim(`Polling for changes…`)}`)
-      }
-    }
-
-    async function fullRebuild(I: Instrumentation) {
-      clearRequireCache(fullRebuildPaths)
-      backupRebuildPaths = fullRebuildPaths.slice()
-      fullRebuildPaths = inputFilePath ? [inputFilePath] : []
-
-      let input = args['--input']
-        ? args['--input'] === '-'
-          ? await drainStdin()
-          : await fs.readFile(args['--input'], 'utf-8')
-        : css`
-            @import 'tailwindcss';
-          `
-
-      ;[compiler, scanner] = await createCompiler(input, I)
-      backupRebuildPaths = fullRebuildPaths.slice()
-
-      DEBUG && I.start('Scan for candidates')
-      let candidates = scanner.scan()
-      DEBUG && I.end('Scan for candidates')
-
-      DEBUG && I.start('Build CSS')
-      let output = compiler.build(candidates)
-      DEBUG && I.end('Build CSS')
-
-      let map: SourceMap | null = null
-
-      if (args['--map']) {
-        DEBUG && I.start('Build Source Map')
-        map = toSourceMap(compiler.buildSourceMap())
-        DEBUG && I.end('Build Source Map')
-      }
-
-      await write(output, map, args, I)
-    }
-
-    if (!args['--silent']) {
-      let restored = false
-
-      function restoreCursor() {
-        if (restored) return
-        restored = true
-        process.stderr.write('\r\x1B[2K\x1B[?25h')
-        process.off('exit', restoreCursor)
-        process.off('SIGINT', onSigint)
-        process.off('SIGTERM', onSigterm)
-      }
-
-      function onSigint() {
-        restoreCursor()
-        process.exit(130)
-      }
-
-      function onSigterm() {
-        restoreCursor()
-        process.exit(143)
-      }
-
-      process.stderr.write('\x1B[?25l')
-      process.on('exit', restoreCursor)
-      process.on('SIGINT', onSigint)
-      process.on('SIGTERM', onSigterm)
-
-      cleanupPollingIndicator = restoreCursor
-      cleanupWatchers.push(async () => cleanupPollingIndicator())
-    }
-
-    cleanupWatchers.push(
-      createPollingWatcher(async () => {
-        using I = new Instrumentation()
-
-        DEBUG && I.start('Scan for candidates')
-        let candidates = scanner.scan()
-        DEBUG && I.end('Scan for candidates')
-
-        let files = scanner.scannedFiles.filter(
-          (file) => file !== args['--output'] && file !== args['--map'],
-        )
-
-        if (files.length <= 0) return
-
-        let start = process.hrtime.bigint()
-
-        let strategy = getRebuildStrategy(files, fullRebuildPaths)
-
-        if (strategy.kind === 'full') {
-          try {
-            await fullRebuild(I)
-          } catch (err) {
-            fullRebuildPaths = backupRebuildPaths
-
-            logPollingMessage(formatError(err))
-          }
-
-          if (!args['--silent']) {
-            logPollingMessage(`Done in ${formatDuration(process.hrtime.bigint() - start)}`)
-          }
-          return
-        }
-
-        // No candidates found which means we don't need to write to disk, and
-        // can return early.
-        if (candidates.length <= 0) {
-          if (!args['--silent']) {
-            logPollingMessage(`Done in ${formatDuration(process.hrtime.bigint() - start)}`)
-          }
-          return
-        }
-
-        DEBUG && I.start('Build CSS')
-        let output = compiler.build(candidates)
-        DEBUG && I.end('Build CSS')
-
-        let map: SourceMap | null = null
-
-        if (args['--map']) {
-          DEBUG && I.start('Build Source Map')
-          map = toSourceMap(compiler.buildSourceMap())
-          DEBUG && I.end('Build Source Map')
-        }
-
-        await write(output, map, args, I)
-
-        if (!args['--silent']) {
-          logPollingMessage(`Done in ${formatDuration(process.hrtime.bigint() - start)}`)
-        }
-      }, pollInterval),
-    )
-
-    if (args['--watch'] !== 'always') {
-      process.stdin.on('end', () => {
-        Promise.all(cleanupWatchers.map((fn) => fn())).then(
-          () => process.exit(0),
-          () => process.exit(1),
-        )
-      })
-    }
-
-    process.stdin.resume()
-    if (!args['--silent']) {
-      process.stderr.write(`\r\x1B[2K${dim(`Polling for changes…`)}`)
-    }
-  }
 }
 
-// Load `@parcel/watcher` lazily so a missing or broken native binding only
-// affects `--watch` (without `--poll`), instead of crashing one-off builds and
-// polling mode as well.
-async function loadWatcher(): Promise<typeof import('@parcel/watcher')> {
-  try {
-    return (await import('@parcel/watcher')).default
-  } catch (err) {
-    throw new Error(
-      `Failed to load the file watcher. Your platform may not be supported by \`@parcel/watcher\`. As a workaround, you can use polling instead by passing the \`--watch --poll\` flags.`,
-      { cause: err },
-    )
-  }
-}
-
-async function createWatchers(dirs: string[], cb: (files: string[]) => void) {
-  let watcher = await loadWatcher()
-
-  // Remove any directories that are children of an already watched directory.
-  // If we don't we may not get notified of certain filesystem events regardless
-  // of whether or not they are for the directory that is duplicated.
-
-  // 1. Sort in asc by length
-  dirs = dirs.sort((a, z) => a.length - z.length)
-
-  // 2. Remove any directories that are children of another directory
-  let toRemove = []
-
-  // /project-a 0
-  // /project-a/src 1
-
-  for (let i = 0; i < dirs.length; ++i) {
-    for (let j = 0; j < i; ++j) {
-      if (!dirs[i].startsWith(`${dirs[j]}/`)) continue
-
-      toRemove.push(dirs[i])
-    }
-  }
-
-  dirs = dirs.filter((dir) => !toRemove.includes(dir))
-
-  // Track all Parcel watchers for each glob.
+function handleImports(
+  input: string,
+  file: string,
+): [css: string, paths: string[]] | Promise<[css: string, paths: string[]]> {
+  // TODO: Should we implement this ourselves instead of relying on PostCSS?
   //
-  // When we encounter a change in a CSS file, we need to setup new watchers and
-  // we want to cleanup the old ones we captured here.
-  let watchers = new Disposables()
+  // Relevant specification:
+  //   - CSS Import Resolve: https://csstools.github.io/css-import-resolve/
 
-  // Track all files that were added or changed.
-  let files = new Set<string>()
-
-  // Keep track of the debounce queue to avoid multiple rebuilds.
-  let debounceQueue = new Disposables()
-
-  // A changed file can be watched by multiple watchers, but we only want to
-  // handle the file once. We debounce the handle function with the collected
-  // files to handle them in a single batch and to avoid multiple rebuilds.
-  async function enqueueCallback() {
-    // Dispose all existing macrotasks.
-    await debounceQueue.dispose()
-
-    // Setup a new macrotask to handle the files in batch.
-    debounceQueue.queueMacrotask(() => {
-      cb(Array.from(files))
-      files.clear()
-    })
+  if (!input.includes('@import')) {
+    return [input, [file]]
   }
 
-  // Setup a watcher for every directory.
-  for (let dir of dirs) {
-    let { unsubscribe } = await watcher.subscribe(dir, async (err, events) => {
-      // Whenever an error occurs we want to let the user know about it but we
-      // want to keep watching for changes.
-      if (err) {
-        console.error(err)
-        return
-      }
+  return postcss()
+    .use(atImport())
+    .process(input, { from: file })
+    .then((result) => [
+      result.css,
 
-      await Promise.all(
-        events.map(async (event) => {
-          // When a file is deleted, a rebuild should be triggered such that we
-          // can figure out whether this file must trigger a fresh build or not.
-          //
-          // If it must trigger a fresh build, then we will temporarily end up
-          // in a broken state, but an error will be shown to the user. Once the
-          // user resolves the issue, the CLI will recover.
-          if (event.type === 'delete') {
-            files.add(event.path)
-            return
-          }
-
-          // Ignore directory changes. We only care about file changes
-          let stats: Stats | null = null
-          try {
-            stats = await fs.lstat(event.path)
-          } catch {}
-          if (!stats?.isFile() && !stats?.isSymbolicLink()) {
-            return
-          }
-
-          // Track the changed file.
-          files.add(event.path)
-        }),
-      )
-
-      // Handle the tracked files at some point in the future.
-      await enqueueCallback()
-    })
-
-    // Ensure we cleanup the watcher when we're done.
-    watchers.add(unsubscribe)
-  }
-
-  // Cleanup
-  return async () => {
-    await watchers.dispose()
-    await debounceQueue.dispose()
-  }
-}
-
-function getRebuildStrategy(
-  files: string[],
-  fullRebuildPaths: string[],
-): { kind: 'incremental'; changedFiles: ChangedContent[] } | { kind: 'full' } {
-  let changedFiles: ChangedContent[] = []
-
-  for (let file of files) {
-    // If one of the changed files is related to the input CSS or JS
-    // config/plugin files, then we need to do a full rebuild because
-    // the theme might have changed.
-    if (fullRebuildPaths.includes(file)) {
-      return { kind: 'full' }
-    }
-
-    // Track new and updated files for incremental rebuilds.
-    changedFiles.push({
-      file,
-      extension: path.extname(file).slice(1),
-    } satisfies ChangedContent)
-  }
-
-  return { kind: 'incremental', changedFiles }
-}
-
-function createPollingWatcher(cb: () => Promise<void>, pollInterval: number) {
-  let disposed = false
-  let timer: ReturnType<typeof setTimeout> | null = null
-
-  async function poll() {
-    if (disposed) return
-
-    try {
-      await cb()
-    } catch (err) {
-      console.error(err)
-    } finally {
-      if (!disposed) {
-        timer = setTimeout(poll, pollInterval)
-      }
-    }
-  }
-
-  timer = setTimeout(poll, pollInterval)
-
-  return async () => {
-    disposed = true
-    if (timer) clearTimeout(timer)
-  }
-}
-
-async function watchDirectories(scanner: Scanner) {
-  let directories = (
-    await Promise.all(
-      scanner.normalizedSources.map(async (globEntry) => {
-        let resolvedPath = path.resolve(globEntry.base)
-        let realPath = await fs.realpath(resolvedPath).catch(() => resolvedPath)
-
-        return fs
-          .stat(realPath)
-          .then((stat) => (stat.isDirectory() ? [realPath] : []))
-          .catch(() => [])
-      }),
-    )
-  ).flat(1)
-
-  return Array.from(new Set(directories))
-}
-
-function dim(str: string) {
-  return `\x1B[2m${str}\x1B[22m`
-}
-
-function red(str: string) {
-  return `\x1B[31m${str}\x1B[39m`
+      // Use `result.messages` to get the imported files. This also includes the
+      // current file itself.
+      [file].concat(
+        result.messages.filter((msg) => msg.type === 'dependency').map((msg) => msg.file),
+      ),
+    ])
 }
diff --git a/packages/@tailwindcss-cli/src/commands/build/utils.ts b/packages/@tailwindcss-cli/src/commands/build/utils.ts
index ecdd96726..b41a74358 100644
--- a/packages/@tailwindcss-cli/src/commands/build/utils.ts
+++ b/packages/@tailwindcss-cli/src/commands/build/utils.ts
@@ -13,19 +13,10 @@ export function drainStdin() {
 }
 
 export async function outputFile(file: string, contents: string) {
-  // Check for special files like `/dev/stdout` or pipes. We don't want to read from these as that
-  // will hang the process until the file descriptors are closed.
-  let isSpecialFile = await fs
-    .stat(file)
-    .then((stats) => stats.isCharacterDevice() || stats.isFIFO())
-    .catch(() => false)
-
-  if (!isSpecialFile) {
-    try {
-      let currentContents = await fs.readFile(file, 'utf8')
-      if (currentContents === contents) return // Skip writing the file
-    } catch {}
-  }
+  try {
+    let currentContents = await fs.readFile(file, 'utf8')
+    if (currentContents === contents) return // Skip writing the file
+  } catch {}
 
   // Ensure the parent directories exist
   await fs.mkdir(path.dirname(file), { recursive: true })
diff --git a/packages/@tailwindcss-cli/src/commands/canonicalize/canonicalize.test.ts b/packages/@tailwindcss-cli/src/commands/canonicalize/canonicalize.test.ts
deleted file mode 100644
index 4392380a5..000000000
--- a/packages/@tailwindcss-cli/src/commands/canonicalize/canonicalize.test.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import path from 'node:path'
-import { PassThrough, Readable } from 'node:stream'
-import { fileURLToPath } from 'node:url'
-import { describe, expect, test } from 'vitest'
-import { runCommandLine, streamStdin } from '.'
-import { normalizeWindowsSeparators } from '../../utils/test-helpers'
-
-let css = normalizeWindowsSeparators(
-  path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'fixtures/input.css'),
-)
-
-describe('runCommandLine', { timeout: 30_000 }, () => {
-  test('canonicalizes, collapses, and sorts candidate groups from positional arguments', async () => {
-    let result = await runCommandLine({
-      argv: ['--css', css, 'py-3 p-1 px-3'],
-      stdinIsTTY: true,
-      stdoutIsTTY: false,
-    })
-
-    expect(result).toEqual({
-      exitCode: 0,
-      stdout: 'p-3',
-      stderr: '',
-    })
-  })
-
-  test('falls back to the default tailwind import when --css is omitted', async () => {
-    let result = await runCommandLine({
-      argv: ['py-3 p-1 px-3'],
-      cwd: path.dirname(css),
-      stdinIsTTY: true,
-      stdoutIsTTY: false,
-    })
-
-    expect(result).toEqual({
-      exitCode: 0,
-      stdout: 'p-3',
-      stderr: '',
-    })
-  })
-
-  test('canonicalizes, collapses, and sorts multiple groups from stdin lines', async () => {
-    let result = await runCommandLine({
-      argv: ['--css', css],
-      stdin: '[display:_flex_] py-3 p-1 px-3\nmt-2 mr-2 mb-2 ml-2 focus:hover:p-3 hover:p-1 py-3\n',
-      stdinIsTTY: false,
-      stdoutIsTTY: false,
-    })
-
-    expect(result).toEqual({
-      exitCode: 0,
-      stdout: 'flex p-3\nm-2 py-3 hover:p-1 focus:hover:p-3',
-      stderr: '',
-    })
-  })
-
-  test('collapses equivalent candidates', async () => {
-    let result = await runCommandLine({
-      argv: ['--css', css, 'mt-2 mr-2 mb-2 ml-2'],
-      stdinIsTTY: true,
-      stdoutIsTTY: false,
-    })
-
-    expect(result).toEqual({
-      exitCode: 0,
-      stdout: 'm-2',
-      stderr: '',
-    })
-  })
-
-  test('renders json output for processed candidate groups', async () => {
-    let result = await runCommandLine({
-      argv: ['--css', css, '--format', 'json', 'py-3 p-1 px-3'],
-      stdinIsTTY: true,
-      stdoutIsTTY: false,
-    })
-
-    expect(result.exitCode).toBe(0)
-    expect(JSON.parse(result.stdout)).toEqual([
-      {
-        input: 'py-3 p-1 px-3',
-        output: 'p-3',
-        changed: true,
-      },
-    ])
-    expect(result.stderr).toBe('')
-  })
-
-  test('splits candidate lists with segment-aware spacing', async () => {
-    let result = await runCommandLine({
-      argv: ['--css', css, '--format', 'json', "content-['hello world'] p-1"],
-      stdinIsTTY: true,
-      stdoutIsTTY: false,
-    })
-
-    expect(result.exitCode).toBe(0)
-    expect(JSON.parse(result.stdout)).toEqual([
-      {
-        input: "content-['hello world'] p-1",
-        output: "p-1 content-['hello_world']",
-        changed: true,
-      },
-    ])
-    expect(result.stderr).toBe('')
-  })
-
-  test('shows a usage error when no candidate groups are provided', async () => {
-    let result = await runCommandLine({
-      argv: ['--css', css],
-      stdinIsTTY: true,
-      stdoutIsTTY: false,
-    })
-
-    expect(result.exitCode).toBe(1)
-    expect(result.stderr).toBe('No candidate groups provided')
-    expect(result.stdout).toContain('Usage:')
-  })
-
-  test('streams canonicalized output line by line', async () => {
-    let input = Readable.from('py-3 p-1 px-3\nmt-2 mr-2 mb-2 ml-2\n')
-    let { stream: output, collect: collectOutput } = createOutput()
-
-    await streamStdin({ css, cwd: path.dirname(css), format: 'text', input, output })
-
-    expect(collectOutput()).toBe('p-3\nm-2\n')
-  })
-
-  test('streams empty lines as empty lines', async () => {
-    let input = Readable.from('py-3 p-1 px-3\n\nmt-2 mr-2 mb-2 ml-2\n')
-    let { stream: output, collect: collectOutput } = createOutput()
-
-    await streamStdin({ css, cwd: path.dirname(css), format: 'text', input, output })
-
-    expect(collectOutput()).toBe('p-3\n\nm-2\n')
-  })
-
-  test('streams json output when requested', async () => {
-    let input = Readable.from('py-3 p-1 px-3\nmt-2 mr-2 mb-2 ml-2\n')
-    let { stream: output, collect: collectOutput } = createOutput()
-
-    await streamStdin({ css, cwd: path.dirname(css), format: 'json', input, output })
-
-    expect(JSON.parse(collectOutput())).toEqual([
-      {
-        input: 'py-3 p-1 px-3',
-        output: 'p-3',
-        changed: true,
-      },
-      {
-        input: 'mt-2 mr-2 mb-2 ml-2',
-        output: 'm-2',
-        changed: true,
-      },
-    ])
-  })
-
-  test('streams jsonl output when requested', async () => {
-    let input = Readable.from('py-3 p-1 px-3\nmt-2 mr-2 mb-2 ml-2\n')
-    let { stream: output, collect: collectOutput } = createOutput()
-
-    await streamStdin({ css, cwd: path.dirname(css), format: 'jsonl', input, output })
-
-    expect(collectOutput()).toBe(
-      '{"input":"py-3 p-1 px-3","output":"p-3","changed":true}\n' +
-        '{"input":"mt-2 mr-2 mb-2 ml-2","output":"m-2","changed":true}\n',
-    )
-  })
-})
-
-function createOutput() {
-  let stream = new PassThrough()
-  let chunks: Buffer[] = []
-  stream.on('data', (chunk) => chunks.push(chunk))
-  return { stream, collect: () => Buffer.concat(chunks).toString() }
-}
diff --git a/packages/@tailwindcss-cli/src/commands/canonicalize/index.ts b/packages/@tailwindcss-cli/src/commands/canonicalize/index.ts
deleted file mode 100644
index 5aecfe51e..000000000
--- a/packages/@tailwindcss-cli/src/commands/canonicalize/index.ts
+++ /dev/null
@@ -1,362 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { createInterface } from 'node:readline'
-import type { Readable, Writable } from 'node:stream'
-import { compare } from '../../../../tailwindcss/src/utils/compare'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-import { args, type Arg } from '../../utils/args'
-import { help } from '../help'
-
-const css = String.raw
-export type OutputFormat = 'text' | 'json' | 'jsonl'
-
-export interface CandidateGroupResult {
-  input: string
-  output: string
-  changed: boolean
-}
-
-export interface RunCommandLineOptions {
-  argv?: string[]
-  cwd?: string
-  stdin?: string | null
-  stdinIsTTY?: boolean
-  stdoutIsTTY?: boolean
-}
-
-export interface RunCommandLineResult {
-  exitCode: number
-  stdout: string
-  stderr: string
-}
-
-export function usage() {
-  return 'tailwindcss canonicalize [classes...]'
-}
-
-function usageWithCss() {
-  return 'tailwindcss canonicalize --css input.css [classes...]'
-}
-
-function usageWithStream() {
-  return 'tailwindcss canonicalize --stream [--css input.css]'
-}
-
-export function options() {
-  return {
-    '--css': {
-      type: 'string',
-      description:
-        'CSS entry file used to load the Tailwind design system (defaults to `@import "tailwindcss";`)',
-    },
-    '--format': {
-      type: 'string',
-      description: 'Output format',
-      default: 'text',
-      values: ['text', 'json', 'jsonl'],
-    },
-    '--stream': {
-      type: 'boolean',
-      description: 'Read candidate groups from stdin line by line and write results to stdout',
-      default: false,
-    },
-  } satisfies Arg
-}
-
-const sharedOptions = {
-  '--help': {
-    type: 'boolean',
-    description: 'Display usage information',
-    alias: '-h',
-    default: false,
-  },
-} satisfies Arg
-
-export async function runCommandLine({
-  argv = process.argv.slice(2),
-  cwd = process.cwd(),
-  stdin = null,
-  stdinIsTTY = process.stdin.isTTY,
-  stdoutIsTTY = process.stdout.isTTY,
-}: RunCommandLineOptions = {}): Promise<RunCommandLineResult> {
-  try {
-    let flags = args(
-      {
-        ...options(),
-        ...sharedOptions,
-      },
-      argv,
-    )
-
-    let format = parseFormat(flags['--format'] ?? 'text')
-
-    if ((stdoutIsTTY && argv.length === 0) || flags['--help']) {
-      return {
-        exitCode: 0,
-        stdout: helpMessage() ?? '',
-        stderr: '',
-      }
-    }
-
-    if (flags['--stream']) {
-      await streamStdin({
-        css: flags['--css'],
-        cwd,
-        format,
-        input: process.stdin,
-        output: process.stdout,
-      })
-      return { exitCode: 0, stdout: '', stderr: '' }
-    }
-
-    let inputs = flags._.length > 0 ? flags._ : await readCandidateGroups({ stdin, stdinIsTTY })
-
-    if (inputs.length === 0) {
-      return usageError('No candidate groups provided')
-    }
-
-    let results = await processCandidateGroups({
-      css: flags['--css'],
-      cwd,
-      inputs,
-    })
-
-    return {
-      exitCode: 0,
-      stdout: formatCandidateResults(results, format),
-      stderr: '',
-    }
-  } catch (error) {
-    return {
-      exitCode: 1,
-      stdout: '',
-      stderr: error instanceof Error ? error.message : String(error),
-    }
-  }
-}
-
-export async function streamStdin({
-  css: cssFile,
-  cwd,
-  format,
-  input,
-  output,
-}: {
-  css: string | null
-  cwd: string
-  format: OutputFormat
-  input: Readable
-  output: Writable
-}): Promise<void> {
-  let designSystem = await loadDesignSystem(cssFile, cwd)
-  let rl = createInterface({ input })
-  let first = true
-
-  if (format === 'json') {
-    output.write('[')
-  }
-
-  for await (let line of rl) {
-    let result = createCandidateGroupResult(designSystem, line)
-
-    switch (format) {
-      case 'text': {
-        output.write(result.output + '\n')
-        break
-      }
-
-      case 'jsonl': {
-        output.write(JSON.stringify(result) + '\n')
-        break
-      }
-
-      case 'json': {
-        if (first) {
-          output.write('\n')
-        } else {
-          output.write(',\n')
-        }
-
-        output.write(indent(JSON.stringify(result, null, 2), 2))
-        first = false
-        break
-      }
-    }
-  }
-
-  if (format === 'json') {
-    output.write(first ? ']' : '\n]')
-  }
-}
-
-export function readCandidateGroups({
-  stdin,
-  stdinIsTTY,
-}: {
-  stdin: string | null
-  stdinIsTTY: boolean
-}) {
-  if (stdin !== null) {
-    return Promise.resolve(splitCandidateGroups(stdin))
-  }
-
-  if (stdinIsTTY) {
-    return Promise.resolve([])
-  }
-
-  return drainStdin().then(splitCandidateGroups)
-}
-
-export async function drainStdin() {
-  return new Promise<string>((resolve, reject) => {
-    let result = ''
-
-    process.stdin.on('data', (chunk) => {
-      result += chunk
-    })
-
-    process.stdin.on('end', () => resolve(result))
-    process.stdin.on('error', (err) => reject(err))
-  })
-}
-
-export async function processCandidateGroups({
-  css,
-  cwd = process.cwd(),
-  inputs,
-}: {
-  css: string | null
-  cwd?: string
-  inputs: string[]
-}): Promise<CandidateGroupResult[]> {
-  let designSystem = await loadDesignSystem(css, cwd)
-
-  return inputs.map((input) => createCandidateGroupResult(designSystem, input))
-}
-
-export function formatCandidateResults(results: CandidateGroupResult[], format: OutputFormat) {
-  switch (format) {
-    case 'json':
-      return JSON.stringify(results, null, 2)
-    case 'jsonl':
-      return results.map((result) => JSON.stringify(result)).join('\n')
-    case 'text':
-      return results.map((result) => result.output).join('\n')
-  }
-}
-
-function helpMessage() {
-  return help({
-    render: false,
-    usage: [usage(), usageWithCss(), usageWithStream()],
-    options: {
-      ...options(),
-      ...sharedOptions,
-    },
-  })
-}
-
-async function loadDesignSystem(cssFile: string | null, cwd: string) {
-  if (cssFile === null) {
-    return __unstable__loadDesignSystem(
-      css`
-        @import 'tailwindcss';
-      `,
-      { base: cwd },
-    )
-  }
-
-  let resolvedCssFile = path.resolve(cwd, cssFile)
-  let content = await fs.readFile(resolvedCssFile, 'utf8')
-  return __unstable__loadDesignSystem(content, {
-    base: path.dirname(resolvedCssFile),
-  })
-}
-
-function splitCandidateGroups(input: string) {
-  return input
-    .split(/\r?\n/g)
-    .map((line) => line.trim())
-    .filter((line) => line.length > 0)
-}
-
-function parseFormat(input: string): OutputFormat {
-  if (input === 'text' || input === 'json' || input === 'jsonl') {
-    return input
-  }
-
-  throw new Error(`Invalid value for --format: ${input}`)
-}
-
-function usageError(message: string): RunCommandLineResult {
-  return {
-    exitCode: 1,
-    stdout: helpMessage() ?? '',
-    stderr: message,
-  }
-}
-
-function splitCandidates(input: string) {
-  let trimmedInput = input.trim()
-  if (trimmedInput.length === 0) return []
-
-  return segment(trimmedInput, ' ')
-    .map((candidate) => candidate.trim())
-    .filter((candidate) => candidate.length > 0)
-}
-
-function canonicalize(
-  designSystem: Awaited<ReturnType<typeof __unstable__loadDesignSystem>>,
-  input: string,
-) {
-  let candidates = splitCandidates(input)
-  candidates = designSystem.canonicalizeCandidates(candidates, {
-    collapse: true,
-    logicalToPhysical: true,
-  })
-  return defaultSort(designSystem.getClassOrder(candidates)).join(' ')
-}
-
-function createCandidateGroupResult(
-  designSystem: Awaited<ReturnType<typeof __unstable__loadDesignSystem>>,
-  input: string,
-): CandidateGroupResult {
-  let output = canonicalize(designSystem, input)
-
-  return {
-    input,
-    output,
-    changed: output !== input,
-  }
-}
-
-function indent(input: string, size: number) {
-  let prefix = ' '.repeat(size)
-  return input
-    .split('\n')
-    .map((line) => prefix + line)
-    .join('\n')
-}
-
-function defaultSort(entries: [string, bigint | null][]) {
-  return entries
-    .slice()
-    .sort(([candidateA, orderA], [candidateZ, orderZ]) => {
-      if (orderA === orderZ) return compare(candidateA, candidateZ)
-      if (orderA === null) return -1
-      if (orderZ === null) return 1
-      return bigSign(orderA - orderZ) || compare(candidateA, candidateZ)
-    })
-    .map(([candidate]) => candidate)
-}
-
-function bigSign(value: bigint) {
-  if (value > 0n) {
-    return 1
-  } else if (value === 0n) {
-    return 0
-  } else {
-    return -1
-  }
-}
diff --git a/packages/@tailwindcss-cli/src/commands/help/index.ts b/packages/@tailwindcss-cli/src/commands/help/index.ts
index b557d03e0..20ee78208 100644
--- a/packages/@tailwindcss-cli/src/commands/help/index.ts
+++ b/packages/@tailwindcss-cli/src/commands/help/index.ts
@@ -3,34 +3,30 @@ import type { Arg } from '../../utils/args'
 import { UI, header, highlight, indent, println, wordWrap } from '../../utils/renderer'
 
 export function help({
-  render = true,
   invalid,
   usage,
   options,
 }: {
-  render?: boolean
   invalid?: string
   usage?: string[]
   options?: Arg
 }) {
   // Available terminal width
-  let width = process.stdout.columns ?? 80
-  let lines: string[] = []
-  let writeLine = render ? println : (value = '') => void lines.push(value)
+  let width = process.stdout.columns
 
   // Render header
-  writeLine(header())
+  println(header())
 
   // Render the invalid command
   if (invalid) {
-    writeLine()
-    writeLine(`${pc.dim('Invalid command:')} ${invalid}`)
+    println()
+    println(`${pc.dim('Invalid command:')} ${invalid}`)
   }
 
   // Render usage
   if (usage && usage.length > 0) {
-    writeLine()
-    writeLine(pc.dim('Usage:'))
+    println()
+    println(pc.dim('Usage:'))
     for (let [idx, example] of usage.entries()) {
       // Split the usage example into the command and its options. This allows
       // us to wrap the options based on the available width of the terminal.
@@ -69,7 +65,7 @@ export function help({
       //     tailwindcss other [--watch] [options...]
       // ```
       if (lines.length > 1 && idx !== 0) {
-        writeLine()
+        println()
       }
 
       // Print the usage examples based on available width of the terminal.
@@ -90,9 +86,9 @@ export function help({
       // ```
       //
       // > Note how the second line is indented to align with the first line.
-      writeLine(indent(`${command}${lines.shift()}`))
+      println(indent(`${command}${lines.shift()}`))
       for (let line of lines) {
-        writeLine(indent(line, command.length))
+        println(indent(line, command.length))
       }
     }
   }
@@ -116,11 +112,7 @@ export function help({
     // `alias` followed by `, ` and followed by the `flag`.
     let maxOptionLength = 0
 
-    for (let [flag, { alias, values }] of Object.entries(options)) {
-      if (values?.length) {
-        flag += `[=${values.join(', ')}]`
-      }
-
+    for (let [flag, { alias }] of Object.entries(options)) {
       // The option string, which is the combination of the alias and the flag
       // but already properly indented based on the other aliases to ensure
       // everything is aligned properly.
@@ -135,8 +127,8 @@ export function help({
       maxOptionLength = Math.max(maxOptionLength, option.length)
     }
 
-    writeLine()
-    writeLine(pc.dim('Options:'))
+    println()
+    println(pc.dim('Options:'))
 
     // The minimum amount of dots between the option and the description.
     let minimumGap = 8
@@ -164,19 +156,15 @@ export function help({
       )
 
       // Print the option, the spacer dots and the start of the description.
-      writeLine(
+      println(
         indent(`${pc.blue(option)} ${pc.dim(pc.gray('\u00B7')).repeat(dotCount)} ${lines.shift()}`),
       )
 
       // Print the remaining lines of the description, indenting them to align
       // with the start of the description.
       for (let line of lines) {
-        writeLine(indent(`${' '.repeat(option.length + dotCount + spaces)}${line}`))
+        println(indent(`${' '.repeat(option.length + dotCount + spaces)}${line}`))
       }
     }
   }
-
-  if (!render) {
-    return lines.join('\n')
-  }
 }
diff --git a/packages/@tailwindcss-cli/src/index.ts b/packages/@tailwindcss-cli/src/index.ts
index 1543f7d13..3622a858c 100644
--- a/packages/@tailwindcss-cli/src/index.ts
+++ b/packages/@tailwindcss-cli/src/index.ts
@@ -3,80 +3,43 @@
 import { args, type Arg } from './utils/args'
 
 import * as build from './commands/build'
-import * as canonicalize from './commands/canonicalize'
 import { help } from './commands/help'
 
 const sharedOptions = {
   '--help': { type: 'boolean', description: 'Display usage information', alias: '-h' },
 } satisfies Arg
 
-function buildUsage(command = 'tailwindcss') {
-  return `${command} [--input input.css] [--output output.css] [--watch] [--poll=ms] [options…]`
-}
+const shared = args(sharedOptions)
+const command = shared._[0]
 
-function rootHelp({ invalid }: { invalid?: string } = {}) {
+// Right now we don't support any sub-commands. Let's show the help message
+// instead.
+if (command) {
   help({
-    invalid,
-    usage: [buildUsage('tailwindcss'), buildUsage('tailwindcss build'), canonicalize.usage()],
-    commands: {
-      build: 'Build your CSS',
-      canonicalize: 'Canonicalize candidate lists',
-    },
+    invalid: command,
+    usage: ['tailwindcss [options]'],
     options: { ...build.options(), ...sharedOptions },
   })
+  process.exit(1)
 }
 
-async function run() {
-  let argv = process.argv.slice(2)
-  let command = argv[0]
-  let rootFlags = args({ ...build.options(), ...sharedOptions }, argv)
-
-  if (command === 'build') {
-    let flags = args({ ...build.options(), ...sharedOptions }, argv.slice(1))
-
-    if ((process.stdout.isTTY && argv.length === 1) || flags['--help']) {
-      help({
-        usage: [buildUsage('tailwindcss build')],
-        options: { ...build.options(), ...sharedOptions },
-      })
-      process.exit(0)
-    }
-
-    await build.handle(flags)
-    return
-  }
-
-  if (command === 'canonicalize') {
-    let result = await canonicalize.runCommandLine({ argv: argv.slice(1) })
-
-    if (result.stdout.length > 0) {
-      process.stdout.write(`${result.stdout}\n`)
-    }
-
-    if (result.stderr.length > 0) {
-      process.stderr.write(`${result.stderr}\n`)
-    }
-
-    process.exitCode = result.exitCode
-    return
-  }
-
-  if ((process.stdout.isTTY && command === undefined) || rootFlags['--help']) {
-    rootHelp()
-    process.exit(0)
-  }
-
-  if (command && !command.startsWith('-')) {
-    rootHelp({ invalid: command })
-    process.exit(1)
-  }
-
-  let flags = args({
-    ...build.options(),
-    ...sharedOptions,
+// Display main help message if no command is being used.
+//
+// E.g.:
+//
+//   - `tailwindcss`                // should show the help message
+//
+// E.g.: implicit `build` command
+//
+//   - `tailwindcss -o output.css`  // should run the build command, not show the help message
+//   - `tailwindcss > output.css`   // should run the build command, not show the help message
+if ((process.stdout.isTTY && !process.argv.slice(2).includes('-o')) || shared['--help']) {
+  help({
+    usage: ['tailwindcss [--input input.css] [--output output.css] [--watch] [options…]'],
+    options: { ...build.options(), ...sharedOptions },
   })
-
-  await build.handle(flags)
+  process.exit(0)
 }
 
-await run()
+// Handle the build command
+build.handle(args(build.options()))
diff --git a/packages/@tailwindcss-cli/src/utils/args.test.ts b/packages/@tailwindcss-cli/src/utils/args.test.ts
index 249fb23eb..51d2c4747 100644
--- a/packages/@tailwindcss-cli/src/utils/args.test.ts
+++ b/packages/@tailwindcss-cli/src/utils/args.test.ts
@@ -17,38 +17,6 @@ it('should be possible to parse a single argument', () => {
   `)
 })
 
-it('should only return the last value for duplicate arguments', () => {
-  expect(
-    args(
-      {
-        '--output': { type: 'string', description: 'Output file' },
-      },
-      ['--output', 'output.css', '--output', 'override.css'],
-    ),
-  ).toMatchInlineSnapshot(`
-    {
-      "--output": "override.css",
-      "_": [],
-    }
-  `)
-})
-
-it('uses last value when flag with "-" is supplied multiple times', () => {
-  let result = args(
-    {
-      '--output': { type: 'string', description: 'Output file', alias: '-o' },
-    },
-    ['--output', 'output.css', '--output', '-'],
-  )
-
-  expect(result).toMatchInlineSnapshot(`
-    {
-      "--output": "-",
-      "_": [],
-    }
-  `)
-})
-
 it('should fallback to the default value if no flag is passed', () => {
   expect(
     args(
@@ -153,34 +121,3 @@ it('should be possible to provide multiple types, and convert the value to that
     }
   `)
 })
-
-it('should be possible to provide boolean or number arguments', () => {
-  let options = {
-    '--poll': {
-      type: 'boolean | number',
-      description: 'Use polling instead of filesystem events when watching',
-      default: false,
-    },
-  } satisfies Arg
-
-  expect(args(options, ['--poll'])).toMatchInlineSnapshot(`
-    {
-      "--poll": true,
-      "_": [],
-    }
-  `)
-
-  expect(args(options, ['--poll=50'])).toMatchInlineSnapshot(`
-    {
-      "--poll": 50,
-      "_": [],
-    }
-  `)
-
-  expect(args(options, ['--poll=foo'])).toMatchInlineSnapshot(`
-    {
-      "--poll": undefined,
-      "_": [],
-    }
-  `)
-})
diff --git a/packages/@tailwindcss-cli/src/utils/args.ts b/packages/@tailwindcss-cli/src/utils/args.ts
index 88b306b05..81bd847d5 100644
--- a/packages/@tailwindcss-cli/src/utils/args.ts
+++ b/packages/@tailwindcss-cli/src/utils/args.ts
@@ -7,7 +7,6 @@ export type Arg = {
     description: string
     alias?: `-${string}`
     default?: Types[keyof Types]
-    values?: string[]
   }
 }
 
@@ -68,28 +67,8 @@ export type Result<T extends Arg> = {
 }
 
 export function args<const T extends Arg>(options: T, argv = process.argv.slice(2)): Result<T> {
-  for (let [idx, value] of argv.entries()) {
-    if (value === '-') {
-      argv[idx] = '__IO_DEFAULT_VALUE__'
-    }
-  }
-
   let parsed = parse(argv)
 
-  for (let key in parsed) {
-    let value = parsed[key]
-
-    if (key !== '_' && Array.isArray(value)) {
-      value = value[value.length - 1]
-    }
-
-    if (value === '__IO_DEFAULT_VALUE__') {
-      value = '-'
-    }
-
-    parsed[key] = value
-  }
-
   let result: { _: string[]; [key: string]: unknown } = {
     _: parsed._,
   }
diff --git a/packages/@tailwindcss-cli/src/utils/disposables.ts b/packages/@tailwindcss-cli/src/utils/disposables.ts
deleted file mode 100644
index 737f3ed1e..000000000
--- a/packages/@tailwindcss-cli/src/utils/disposables.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Disposables allow you to manage resources that can be cleaned up. Each helper
- * function returns a dispose function to clean up the resource.
- *
- * The `dispose` method can be called to clean up all resources at once.
- */
-export class Disposables {
-  // Track all disposables
-  #disposables = new Set<Function>([])
-
-  /**
-   * Enqueue a callback in the macrotasks queue.
-   */
-  queueMacrotask(cb: () => void) {
-    let timer = setTimeout(cb, 0)
-
-    return this.add(() => {
-      clearTimeout(timer)
-    })
-  }
-
-  /**
-   * General purpose disposable function that can be cleaned up.
-   */
-  add(dispose: () => void) {
-    this.#disposables.add(dispose)
-
-    return () => {
-      this.#disposables.delete(dispose)
-
-      dispose()
-    }
-  }
-
-  /**
-   * Dispose all disposables at once.
-   */
-  async dispose() {
-    for (let dispose of this.#disposables) {
-      await dispose()
-    }
-
-    this.#disposables.clear()
-  }
-}
diff --git a/packages/@tailwindcss-cli/src/utils/renderer.test.ts b/packages/@tailwindcss-cli/src/utils/renderer.test.ts
index 7acef4551..d234be40f 100644
--- a/packages/@tailwindcss-cli/src/utils/renderer.test.ts
+++ b/packages/@tailwindcss-cli/src/utils/renderer.test.ts
@@ -1,31 +1,24 @@
-import path from 'node:path'
+import path from 'path'
 import { describe, expect, it } from 'vitest'
 import { relative, wordWrap } from './renderer'
-import { normalizeWindowsSeparators } from './test-helpers'
 
 describe('relative', () => {
   it('should print an absolute path relative to the current working directory', () => {
-    expect(normalizeWindowsSeparators(relative(path.resolve('index.css')))).toMatchInlineSnapshot(
-      `"./index.css"`,
-    )
+    expect(relative(path.resolve('index.css'))).toMatchInlineSnapshot(`"./index.css"`)
   })
 
   it('should prefer the shortest value by default', () => {
     // Shortest between absolute and relative paths
-    expect(normalizeWindowsSeparators(relative('index.css'))).toMatchInlineSnapshot(`"index.css"`)
+    expect(relative('index.css')).toMatchInlineSnapshot(`"index.css"`)
   })
 
   it('should be possible to override the current working directory', () => {
-    expect(normalizeWindowsSeparators(relative('../utils/index.css', '..'))).toMatchInlineSnapshot(
-      `"./utils/index.css"`,
-    )
+    expect(relative('../utils/index.css', '..')).toMatchInlineSnapshot(`"./utils/index.css"`)
   })
 
   it('should be possible to always prefer the relative path', () => {
     expect(
-      normalizeWindowsSeparators(
-        relative('index.css', process.cwd(), { preferAbsoluteIfShorter: false }),
-      ),
+      relative('index.css', process.cwd(), { preferAbsoluteIfShorter: false }),
     ).toMatchInlineSnapshot(`"./index.css"`)
   })
 })
diff --git a/packages/@tailwindcss-cli/src/utils/renderer.ts b/packages/@tailwindcss-cli/src/utils/renderer.ts
index da817dda7..35365e8ba 100644
--- a/packages/@tailwindcss-cli/src/utils/renderer.ts
+++ b/packages/@tailwindcss-cli/src/utils/renderer.ts
@@ -8,8 +8,10 @@ import { formatNanoseconds } from './format-ns'
 export const UI = {
   indent: 2,
 }
+
 export function header() {
-  return `${pc.italic(pc.bold(pc.blue('\u2248')))} tailwindcss ${pc.blue(`v${getVersion()}`)}`
+  let { version } = JSON.parse(fs.readFileSync(resolve('tailwindcss/package.json'), 'utf-8'))
+  return `${pc.italic(pc.bold(pc.blue('\u2248')))} tailwindcss ${pc.blue(`v${version}`)}`
 }
 
 export function highlight(file: string) {
@@ -49,9 +51,7 @@ export function wordWrap(text: string, width: number) {
   for (let word of words) {
     let wordLength = stripVTControlCharacters(word).length
 
-    // A word longer than `width` is kept on its own line rather than
-    // introducing an empty line before it.
-    if (lineLength > 0 && lineLength + wordLength + 1 > width) {
+    if (lineLength + wordLength + 1 > width) {
       lines.push(line)
       line = ''
       lineLength = 0
@@ -94,11 +94,3 @@ export function eprintln(value = '') {
 export function println(value = '') {
   process.stdout.write(`${value}\n`)
 }
-
-function getVersion(): string {
-  if (typeof globalThis.__tw_version === 'string') {
-    return globalThis.__tw_version
-  }
-  let { version } = JSON.parse(fs.readFileSync(resolve('tailwindcss/package.json'), 'utf-8'))
-  return version
-}
diff --git a/packages/@tailwindcss-cli/src/utils/resolve.ts b/packages/@tailwindcss-cli/src/utils/resolve.ts
index e9197e874..4702c2a26 100644
--- a/packages/@tailwindcss-cli/src/utils/resolve.ts
+++ b/packages/@tailwindcss-cli/src/utils/resolve.ts
@@ -1,32 +1,3 @@
-import EnhancedResolve from 'enhanced-resolve'
-import fs from 'node:fs'
 import { createRequire } from 'node:module'
 
-const localResolve = createRequire(import.meta.url).resolve
-export function resolve(id: string) {
-  if (typeof globalThis.__tw_resolve === 'function') {
-    let resolved = globalThis.__tw_resolve(id)
-    if (resolved) {
-      return resolved
-    }
-  }
-  return localResolve(id)
-}
-
-const resolver = EnhancedResolve.ResolverFactory.createResolver({
-  fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
-  useSyncFileSystemCalls: true,
-  extensions: ['.css'],
-  mainFields: ['style'],
-  conditionNames: ['style'],
-})
-export function resolveCssId(id: string, base: string) {
-  if (typeof globalThis.__tw_resolve === 'function') {
-    let resolved = globalThis.__tw_resolve(id, base)
-    if (resolved) {
-      return resolved
-    }
-  }
-
-  return resolver.resolveSync({}, base, id)
-}
+export const resolve = createRequire(import.meta.url).resolve
diff --git a/packages/@tailwindcss-cli/src/utils/test-helpers.ts b/packages/@tailwindcss-cli/src/utils/test-helpers.ts
deleted file mode 100644
index 30f4fc777..000000000
--- a/packages/@tailwindcss-cli/src/utils/test-helpers.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import path from 'node:path'
-
-export function normalizeWindowsSeparators(p: string) {
-  return path.sep === '\\' ? p.replaceAll('\\', '/') : p
-}
diff --git a/packages/@tailwindcss-cli/tsup.config.ts b/packages/@tailwindcss-cli/tsup.config.ts
deleted file mode 100644
index 7d82eee2c..000000000
--- a/packages/@tailwindcss-cli/tsup.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-  format: ['esm'],
-  clean: true,
-  minify: true,
-  entry: ['src/index.ts'],
-})
diff --git a/packages/@tailwindcss-node/README.md b/packages/@tailwindcss-node/README.md
deleted file mode 100644
index 5f532607d..000000000
--- a/packages/@tailwindcss-node/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-<p align="center">
-  <a href="https://tailwindcss.com" target="_blank">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
-      <img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
-    </picture>
-  </a>
-</p>
-
-<p align="center">
-  A utility-first CSS framework for rapidly building custom user interfaces.
-</p>
-
-<p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
-    <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
-</p>
-
----
-
-## Documentation
-
-For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
-
-## Community
-
-For help, discussion about best practices, or feature ideas:
-
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
-
-## Contributing
-
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
diff --git a/packages/@tailwindcss-node/package.json b/packages/@tailwindcss-node/package.json
deleted file mode 100644
index 0eced7366..000000000
--- a/packages/@tailwindcss-node/package.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-  "name": "@tailwindcss/node",
-  "version": "4.3.3",
-  "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "packages/@tailwindcss-node"
-  },
-  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
-  "homepage": "https://tailwindcss.com",
-  "scripts": {
-    "build": "tsup-node",
-    "dev": "pnpm run build -- --watch"
-  },
-  "files": [
-    "dist/"
-  ],
-  "publishConfig": {
-    "provenance": true,
-    "access": "public",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.mjs",
-        "require": "./dist/index.js"
-      },
-      "./require-cache": {
-        "types": "./dist/require-cache.d.ts",
-        "default": "./dist/require-cache.js"
-      },
-      "./esm-cache-loader": {
-        "types": "./dist/esm-cache.loader.d.mts",
-        "default": "./dist/esm-cache.loader.mjs"
-      }
-    }
-  },
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "require": "./src/index.cts"
-    },
-    "./require-cache": {
-      "types": "./src/require-cache.ts",
-      "import": "./src/require-cache.ts",
-      "require": "./src/require-cache.cts"
-    },
-    "./esm-cache-loader": {
-      "types": "./src/esm-cache.loader.mts",
-      "default": "./src/esm-cache.loader.mts"
-    }
-  },
-  "dependencies": {
-    "@jridgewell/remapping": "^2.3.5",
-    "enhanced-resolve": "catalog:",
-    "jiti": "^2.7.0",
-    "lightningcss": "catalog:",
-    "magic-string": "^1.1.0",
-    "source-map-js": "^1.2.1",
-    "tailwindcss": "workspace:*"
-  }
-}
diff --git a/packages/@tailwindcss-node/src/compile.ts b/packages/@tailwindcss-node/src/compile.ts
deleted file mode 100644
index e5f8782c8..000000000
--- a/packages/@tailwindcss-node/src/compile.ts
+++ /dev/null
@@ -1,281 +0,0 @@
-import EnhancedResolve from 'enhanced-resolve'
-import { createJiti, type Jiti } from 'jiti'
-import fs from 'node:fs'
-import fsPromises from 'node:fs/promises'
-import path from 'node:path'
-import { pathToFileURL } from 'node:url'
-import {
-  __unstable__loadDesignSystem as ___unstable__loadDesignSystem,
-  compile as _compile,
-  compileAst as _compileAst,
-  Features,
-  Polyfills,
-} from 'tailwindcss'
-import type { AstNode } from '../../tailwindcss/src/ast'
-import { getModuleDependencies } from './get-module-dependencies'
-import { rewriteUrls } from './urls'
-
-export { Features, Polyfills }
-
-export type Resolver = (id: string, base: string) => Promise<string | false | undefined>
-
-export interface CompileOptions {
-  base: string
-  from?: string
-  onDependency: (path: string) => void
-  shouldRewriteUrls?: boolean
-  polyfills?: Polyfills
-
-  customCssResolver?: Resolver
-  customJsResolver?: Resolver
-}
-
-function createCompileOptions({
-  base,
-  from,
-  polyfills,
-  onDependency,
-  shouldRewriteUrls,
-
-  customCssResolver,
-  customJsResolver,
-}: CompileOptions) {
-  return {
-    base,
-    polyfills,
-    from,
-    async loadModule(id: string, base: string) {
-      return loadModule(id, base, onDependency, customJsResolver)
-    },
-    async loadStylesheet(id: string, sheetBase: string) {
-      let sheet = await loadStylesheet(id, sheetBase, onDependency, customCssResolver)
-
-      if (shouldRewriteUrls) {
-        sheet.content = await rewriteUrls({
-          css: sheet.content,
-          root: base,
-          base: sheet.base,
-        })
-      }
-
-      return sheet
-    },
-  }
-}
-
-async function ensureSourceDetectionRootExists(compiler: {
-  root: Awaited<ReturnType<typeof compile>>['root']
-}) {
-  // Verify if the `source(…)` path exists (until the glob pattern starts)
-  if (compiler.root && compiler.root !== 'none') {
-    let globSymbols = /[*{]/
-    let basePath = []
-    for (let segment of compiler.root.pattern.split('/')) {
-      if (globSymbols.test(segment)) {
-        break
-      }
-
-      basePath.push(segment)
-    }
-
-    let exists = await fsPromises
-      .stat(path.resolve(compiler.root.base, basePath.join('/')))
-      .then((stat) => stat.isDirectory())
-      .catch(() => false)
-
-    if (!exists) {
-      throw new Error(
-        `The \`source(${compiler.root.pattern})\` does not exist or is not a directory.`,
-      )
-    }
-  }
-}
-
-export async function compileAst(ast: AstNode[], options: CompileOptions) {
-  let compiler = await _compileAst(ast, createCompileOptions(options))
-  await ensureSourceDetectionRootExists(compiler)
-  return compiler
-}
-
-export async function compile(css: string, options: CompileOptions) {
-  let compiler = await _compile(css, createCompileOptions(options))
-  await ensureSourceDetectionRootExists(compiler)
-  return compiler
-}
-
-export async function __unstable__loadDesignSystem(css: string, { base }: { base: string }) {
-  return ___unstable__loadDesignSystem(css, {
-    base,
-    async loadModule(id, base) {
-      return loadModule(id, base, () => {})
-    },
-    async loadStylesheet(id, base) {
-      return loadStylesheet(id, base, () => {})
-    },
-  })
-}
-
-export async function loadModule(
-  id: string,
-  base: string,
-  onDependency: (path: string) => void,
-  customJsResolver?: Resolver,
-) {
-  if (id[0] !== '.') {
-    let resolvedPath = await resolveJsId(id, base, customJsResolver)
-    if (!resolvedPath) {
-      throw new Error(`Could not resolve '${id}' from '${base}'`)
-    }
-
-    let module = await importModule(pathToFileURL(resolvedPath).href)
-    return {
-      path: resolvedPath,
-      base: path.dirname(resolvedPath),
-      module: module.default ?? module,
-    }
-  }
-
-  let resolvedPath = await resolveJsId(id, base, customJsResolver)
-  if (!resolvedPath) {
-    throw new Error(`Could not resolve '${id}' from '${base}'`)
-  }
-
-  let [module, moduleDependencies] = await Promise.all([
-    importModule(pathToFileURL(resolvedPath).href + '?id=' + Date.now()),
-    getModuleDependencies(resolvedPath),
-  ])
-
-  for (let file of moduleDependencies) {
-    onDependency(file)
-  }
-  return {
-    path: resolvedPath,
-    base: path.dirname(resolvedPath),
-    module: module.default ?? module,
-  }
-}
-
-async function loadStylesheet(
-  id: string,
-  base: string,
-  onDependency: (path: string) => void,
-  cssResolver?: Resolver,
-) {
-  let resolvedPath = await resolveCssId(id, base, cssResolver)
-  if (!resolvedPath) throw new Error(`Could not resolve '${id}' from '${base}'`)
-
-  onDependency(resolvedPath)
-
-  let file = await fsPromises.readFile(resolvedPath, 'utf-8')
-  return {
-    path: resolvedPath,
-    base: path.dirname(resolvedPath),
-    content: file,
-  }
-}
-
-// Attempts to import the module using the native `import()` function. If this
-// fails, it sets up `jiti` and attempts to import this way so that `.ts` files
-// can be resolved properly.
-let jiti: null | Jiti = null
-async function importModule(path: string): Promise<any> {
-  if (typeof globalThis.__tw_load === 'function') {
-    let module = await globalThis.__tw_load(path)
-    if (module) {
-      return module
-    }
-  }
-
-  try {
-    return await import(path)
-  } catch (error) {
-    jiti ??= createJiti(import.meta.url, { moduleCache: false, fsCache: false })
-    return await jiti.import(path)
-  }
-}
-
-const modules = [
-  'node_modules',
-  ...(process.env.NODE_PATH ? [...process.env.NODE_PATH.split(path.delimiter)] : []),
-]
-
-const cssResolver = EnhancedResolve.ResolverFactory.createResolver({
-  fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
-  useSyncFileSystemCalls: true,
-  extensions: ['.css'],
-  mainFields: ['style'],
-  conditionNames: ['style'],
-  modules,
-})
-async function resolveCssId(
-  id: string,
-  base: string,
-  customCssResolver?: Resolver,
-): Promise<string | false | undefined> {
-  if (typeof globalThis.__tw_resolve === 'function') {
-    let resolved = globalThis.__tw_resolve(id, base)
-    if (resolved) {
-      return Promise.resolve(resolved)
-    }
-  }
-
-  if (customCssResolver) {
-    let customResolution = await customCssResolver(id, base)
-    if (customResolution) {
-      return customResolution
-    }
-  }
-
-  return runResolver(cssResolver, id, base)
-}
-
-const esmResolver = EnhancedResolve.ResolverFactory.createResolver({
-  fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
-  useSyncFileSystemCalls: true,
-  extensions: ['.js', '.json', '.node', '.ts'],
-  conditionNames: ['node', 'import'],
-  modules,
-})
-
-const cjsResolver = EnhancedResolve.ResolverFactory.createResolver({
-  fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
-  useSyncFileSystemCalls: true,
-  extensions: ['.js', '.json', '.node', '.ts'],
-  conditionNames: ['node', 'require'],
-  modules,
-})
-
-async function resolveJsId(
-  id: string,
-  base: string,
-  customJsResolver?: Resolver,
-): Promise<string | false | undefined> {
-  if (typeof globalThis.__tw_resolve === 'function') {
-    let resolved = globalThis.__tw_resolve(id, base)
-    if (resolved) {
-      return Promise.resolve(resolved)
-    }
-  }
-
-  if (customJsResolver) {
-    let customResolution = await customJsResolver(id, base)
-    if (customResolution) {
-      return customResolution
-    }
-  }
-
-  return runResolver(esmResolver, id, base).catch(() => runResolver(cjsResolver, id, base))
-}
-
-function runResolver(
-  resolver: EnhancedResolve.Resolver,
-  id: string,
-  base: string,
-): Promise<string | false | undefined> {
-  return new Promise((resolve, reject) =>
-    resolver.resolve({}, base, id, {}, (err, result) => {
-      if (err) return reject(err)
-      resolve(result)
-    }),
-  )
-}
diff --git a/packages/@tailwindcss-node/src/env.ts b/packages/@tailwindcss-node/src/env.ts
deleted file mode 100644
index 3b1a1b726..000000000
--- a/packages/@tailwindcss-node/src/env.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-export const DEBUG = resolveDebug(process.env.DEBUG)
-
-function resolveDebug(debug: typeof process.env.DEBUG) {
-  if (typeof debug === 'boolean') {
-    return debug
-  }
-
-  if (debug === undefined) {
-    return false
-  }
-
-  // Environment variables are strings, so convert to boolean
-  if (debug === 'true' || debug === '1') {
-    return true
-  }
-
-  if (debug === 'false' || debug === '0') {
-    return false
-  }
-
-  // Keep the debug convention into account:
-  // DEBUG=* -> This enables all debug modes
-  // DEBUG=projectA,projectB,projectC -> This enables debug for projectA, projectB and projectC
-  // DEBUG=projectA:* -> This enables all debug modes for projectA (if you have sub-types)
-  // DEBUG=projectA,-projectB -> This enables debug for projectA and explicitly disables it for projectB
-
-  if (debug === '*') {
-    return true
-  }
-
-  let debuggers = debug.split(',').map((d) => d.split(':')[0])
-
-  // Ignoring tailwindcss
-  if (debuggers.includes('-tailwindcss')) {
-    return false
-  }
-
-  // Including tailwindcss
-  if (debuggers.includes('tailwindcss')) {
-    return true
-  }
-
-  return false
-}
diff --git a/packages/@tailwindcss-node/src/esm-cache.loader.mts b/packages/@tailwindcss-node/src/esm-cache.loader.mts
deleted file mode 100644
index 96d297a29..000000000
--- a/packages/@tailwindcss-node/src/esm-cache.loader.mts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
-  isBuiltin,
-  type ResolveFnOutput,
-  type ResolveHook,
-  type ResolveHookContext,
-  type ResolveHookSync,
-} from 'node:module'
-
-export let resolve: ResolveHook = async (specifier, context, nextResolve) => {
-  let result = await nextResolve(specifier, context)
-  return processResolve(context, result)
-}
-
-export let resolveSync: ResolveHookSync = (specifier, context, nextResolve) => {
-  let result = nextResolve(specifier, context)
-  return processResolve(context, result)
-}
-
-function processResolve(context: ResolveHookContext, result: ResolveFnOutput) {
-  try {
-    if (result.url === import.meta.url) return result
-    if (isBuiltin(result.url)) return result
-    if (!context.parentURL) return result
-
-    let parent = new URL(context.parentURL)
-
-    let id = parent.searchParams.get('id')
-    if (id === null) return result
-
-    let url = new URL(result.url)
-    url.searchParams.set('id', id)
-
-    return {
-      ...result,
-      url: `${url}`,
-    }
-  } catch {
-    return result
-  }
-}
diff --git a/packages/@tailwindcss-node/src/get-module-dependencies.ts b/packages/@tailwindcss-node/src/get-module-dependencies.ts
deleted file mode 100644
index 34dedff20..000000000
--- a/packages/@tailwindcss-node/src/get-module-dependencies.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-
-// Patterns we use to match dependencies in a file whether in CJS, ESM, or TypeScript
-const DEPENDENCY_PATTERNS = [
-  /import[\s\S]*?['"](.{3,}?)['"]/gi,
-  /import[\s\S]*from[\s\S]*?['"](.{3,}?)['"]/gi,
-  /export[\s\S]*from[\s\S]*?['"](.{3,}?)['"]/gi,
-  /require\(['"`](.+)['"`]\)/gi,
-]
-
-// Given the current file `a.ts`, we want to make sure that when importing `b` that we resolve
-// `b.ts` before `b.js`
-//
-// E.g.:
-//
-// a.ts
-//   b // .ts
-//   c // .ts
-// a.js
-//   b // .js or .ts
-const JS_EXTENSIONS = ['.js', '.cjs', '.mjs']
-const JS_RESOLUTION_ORDER = ['', '.js', '.cjs', '.mjs', '.ts', '.cts', '.mts', '.jsx', '.tsx']
-const TS_RESOLUTION_ORDER = ['', '.ts', '.cts', '.mts', '.tsx', '.js', '.cjs', '.mjs', '.jsx']
-
-async function resolveWithExtension(file: string, extensions: string[]) {
-  // Try to find `./a.ts`, `./a.cts`, ... from `./a`
-  for (let ext of extensions) {
-    let full = `${file}${ext}`
-
-    let stats = await fs.stat(full).catch(() => null)
-    if (stats?.isFile()) return full
-  }
-
-  // Try to find `./a/index.js` from `./a`
-  for (let ext of extensions) {
-    let full = `${file}/index${ext}`
-
-    let exists = await fs.access(full).then(
-      () => true,
-      () => false,
-    )
-    if (exists) {
-      return full
-    }
-  }
-
-  return null
-}
-
-async function traceDependencies(
-  seen: Set<string>,
-  filename: string,
-  base: string,
-  ext: string,
-): Promise<void> {
-  // Try to find the file
-  let extensions = JS_EXTENSIONS.includes(ext) ? JS_RESOLUTION_ORDER : TS_RESOLUTION_ORDER
-  let absoluteFile = await resolveWithExtension(path.resolve(base, filename), extensions)
-  if (absoluteFile === null) return // File doesn't exist
-
-  // Prevent infinite loops when there are circular dependencies
-  if (seen.has(absoluteFile)) return // Already seen
-
-  // Mark the file as a dependency
-  seen.add(absoluteFile)
-
-  // Resolve new base for new imports/requires
-  base = path.dirname(absoluteFile)
-  ext = path.extname(absoluteFile)
-
-  let contents = await fs.readFile(absoluteFile, 'utf-8')
-
-  // Recursively trace dependencies in parallel
-  let promises = []
-
-  for (let pattern of DEPENDENCY_PATTERNS) {
-    for (let match of contents.matchAll(pattern)) {
-      // Bail out if it's not a relative file
-      if (!match[1].startsWith('.')) continue
-
-      promises.push(traceDependencies(seen, match[1], base, ext))
-    }
-  }
-
-  await Promise.all(promises)
-}
-
-/**
- * Trace all dependencies of a module recursively
- *
- * The result is an unordered set of absolute file paths. Meaning that the order
- * is not guaranteed to be equal to source order or across runs.
- **/
-export async function getModuleDependencies(absoluteFilePath: string) {
-  let seen = new Set<string>()
-
-  await traceDependencies(
-    seen,
-    absoluteFilePath,
-    path.dirname(absoluteFilePath),
-    path.extname(absoluteFilePath),
-  )
-
-  return Array.from(seen)
-}
diff --git a/packages/@tailwindcss-node/src/index.cts b/packages/@tailwindcss-node/src/index.cts
deleted file mode 100644
index 9f2788933..000000000
--- a/packages/@tailwindcss-node/src/index.cts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as Module from 'node:module'
-import { pathToFileURL } from 'node:url'
-import * as env from './env'
-import { resolveSync } from './esm-cache.loader.mjs'
-export * from './compile'
-export * from './instrumentation'
-export * from './normalize-path'
-export * from './optimize'
-export * from './source-maps'
-export { env }
-
-// In Bun, ESM modules will also populate `require.cache`, so the module hook is
-// not necessary.
-if (!process.versions.bun) {
-  // `Module#register` was added in Node v18.19.0 and v20.6.0
-  // `Module#registerHooks` was added in Node v22.15.0 and v23.5.0 and is the preferred API since v25.9.0,
-  // runtime-deprecating `Module#register` since v26
-  //
-  // Not calling it means that while ESM dependencies don't get reloaded, the
-  // actual included files will because they cache bust directly via `?id=…`
-  if (Module.registerHooks) {
-    Module.registerHooks({ resolve: resolveSync })
-  } else {
-    Module.register?.(pathToFileURL(require.resolve('@tailwindcss/node/esm-cache-loader')))
-  }
-}
diff --git a/packages/@tailwindcss-node/src/index.ts b/packages/@tailwindcss-node/src/index.ts
deleted file mode 100644
index 8eff1466a..000000000
--- a/packages/@tailwindcss-node/src/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as Module from 'node:module'
-import { pathToFileURL } from 'node:url'
-import * as env from './env'
-import { resolveSync } from './esm-cache.loader.mjs'
-export * from './compile'
-export * from './instrumentation'
-export * from './normalize-path'
-export * from './optimize'
-export * from './source-maps'
-export { env }
-
-// In Bun, ESM modules will also populate `require.cache`, so the module hook is
-// not necessary.
-if (!process.versions.bun) {
-  // `Module#register` was added in Node v18.19.0 and v20.6.0
-  // `Module#registerHooks` was added in Node v22.15.0 and v23.5.0 and is the preferred API since v25.9.0,
-  // runtime-deprecating `Module#register` since v26
-  //
-  // Not calling it means that while ESM dependencies don't get reloaded, the
-  // actual included files will because they cache bust directly via `?id=…`
-  if (Module.registerHooks) {
-    Module.registerHooks({ resolve: resolveSync })
-  } else {
-    let localRequire = Module.createRequire(import.meta.url)
-    Module.register?.(pathToFileURL(localRequire.resolve('@tailwindcss/node/esm-cache-loader')))
-  }
-}
diff --git a/packages/@tailwindcss-node/src/instrumentation.test.ts b/packages/@tailwindcss-node/src/instrumentation.test.ts
deleted file mode 100644
index 102c7ed8e..000000000
--- a/packages/@tailwindcss-node/src/instrumentation.test.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { stripVTControlCharacters } from 'util'
-import { expect, it } from 'vitest'
-import { Instrumentation } from './instrumentation'
-
-it('should add instrumentation using start/end markers', () => {
-  let I = new Instrumentation()
-
-  I.start('Foo')
-  let x = 1
-  for (let i = 0; i < 100; i++) {
-    I.start('Bar')
-    x **= 2
-    I.end('Bar')
-  }
-  I.end('Foo')
-
-  I.hit('Potato')
-  I.hit('Potato')
-  I.hit('Potato')
-  I.hit('Potato')
-
-  expect.assertions(1)
-
-  I.report((output) => {
-    expect(stripVTControlCharacters(output).replace(/\[.*\]/g, '[0.xxms]')).toMatchInlineSnapshot(`
-      "
-      Hits:
-        Potato × 4
-
-      Timers:
-      [0.xxms] Foo
-      [0.xxms]   ↳ Bar × 100
-      "
-    `)
-  })
-})
-
-it('should measure callbacks via the `span` api', () => {
-  let I = new Instrumentation()
-
-  I.span('Foo', () => {
-    let x = 1
-    for (let i = 0; i < 100; i++) {
-      I.span('Bar', () => {
-        x **= 2
-      })
-    }
-  })
-
-  expect.assertions(1)
-
-  I.report((output) => {
-    expect(stripVTControlCharacters(output).replace(/\[.*\]/g, '[0.xxms]')).toMatchInlineSnapshot(`
-      "
-      [0.xxms] Foo
-      [0.xxms]   ↳ Bar × 100
-      "
-    `)
-  })
-})
-
-it('should measure async callbacks via the `span` api', async () => {
-  let I = new Instrumentation()
-
-  await I.span('Foo', async () => {
-    let x = 1
-    for (let i = 0; i < 100; i++) {
-      I.span('Bar', () => {
-        x **= 2
-      })
-    }
-    await new Promise((r) => setTimeout(r, 500))
-  })
-
-  expect.assertions(2)
-
-  I.report((output) => {
-    expect(stripVTControlCharacters(output).replace(/\[.*\]/g, '[0.xxms]')).toMatchInlineSnapshot(`
-      "
-      [0.xxms] Foo
-      [0.xxms]   ↳ Bar × 100
-      "
-    `)
-
-    let [, duration] = stripVTControlCharacters(output).match(/\[(.*)\]/)!
-    expect(parseFloat(duration)).toBeGreaterThanOrEqual(500 - 2 /* Margin of error */)
-  })
-})
-
-it('should measure blocks until they go out of scope via `using`', () => {
-  let I = new Instrumentation()
-
-  {
-    using _ = I.track('Foo')
-
-    let x = 1
-    for (let i = 0; i < 100; i++) {
-      using _ = I.track('Bar')
-      x **= 2
-    }
-  }
-
-  expect.assertions(1)
-
-  I.report((output) => {
-    expect(stripVTControlCharacters(output).replace(/\[.*\]/g, '[0.xxms]')).toMatchInlineSnapshot(`
-      "
-      [0.xxms] Foo
-      [0.xxms]   ↳ Bar × 100
-      "
-    `)
-  })
-})
-
-it('should auto end pending timers when reporting', () => {
-  let I = new Instrumentation()
-
-  I.start('Foo')
-  let x = 1
-  for (let i = 0; i < 100; i++) {
-    I.start('Bar')
-    x **= 2
-    I.end('Bar')
-  }
-  I.start('Baz')
-
-  expect.assertions(1)
-
-  I.report((output) => {
-    expect(stripVTControlCharacters(output).replace(/\[.*\]/g, '[0.xxms]')).toMatchInlineSnapshot(`
-      "
-      [0.xxms] Foo
-      [0.xxms]   ↳ Bar × 100
-      [0.xxms]   ↳ Baz
-      "
-    `)
-  })
-})
diff --git a/packages/@tailwindcss-node/src/instrumentation.ts b/packages/@tailwindcss-node/src/instrumentation.ts
deleted file mode 100644
index e454e6744..000000000
--- a/packages/@tailwindcss-node/src/instrumentation.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { DefaultMap } from '../../tailwindcss/src/utils/default-map'
-import * as env from './env'
-
-// See: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-2.html#:~:text=Symbol.dispose,-??=%20Symbol(%22Symbol.dispose
-// @ts-expect-error — Ensure Symbol.dispose exists
-Symbol.dispose ??= Symbol('Symbol.dispose')
-// @ts-expect-error — Ensure Symbol.asyncDispose exists
-Symbol.asyncDispose ??= Symbol('Symbol.asyncDispose')
-
-export class Instrumentation implements Disposable {
-  #hits = new DefaultMap(() => ({ value: 0 }))
-  #timers = new DefaultMap(() => ({ value: 0n }))
-  #timerStack: { id: string; label: string; namespace: string; value: bigint }[] = []
-
-  constructor(
-    private shouldReport = env.DEBUG,
-    private defaultFlush = (message: string) => void process.stderr.write(`${message}\n`),
-  ) {}
-
-  hit(label: string) {
-    this.#hits.get(label).value++
-  }
-
-  start(label: string) {
-    let namespace = this.#timerStack.map((t) => t.label).join('//')
-    let id = `${namespace}${namespace.length === 0 ? '' : '//'}${label}`
-
-    this.#hits.get(id).value++
-
-    // Create the timer if it doesn't exist yet
-    this.#timers.get(id)
-
-    this.#timerStack.push({ id, label, namespace, value: process.hrtime.bigint() })
-  }
-
-  end(label: string) {
-    let end = process.hrtime.bigint()
-
-    if (this.#timerStack[this.#timerStack.length - 1].label !== label) {
-      throw new Error(
-        `Mismatched timer label: \`${label}\`, expected \`${
-          this.#timerStack[this.#timerStack.length - 1].label
-        }\``,
-      )
-    }
-
-    let parent = this.#timerStack.pop()!
-    let elapsed = end - parent.value
-    this.#timers.get(parent.id).value += elapsed
-  }
-
-  track(label: string) {
-    this.start(label)
-    let done = false
-
-    return {
-      [Symbol.dispose]: () => {
-        if (!done) {
-          this.end(label)
-          done = true
-        }
-      },
-      [Symbol.asyncDispose]: () => {
-        if (!done) {
-          this.end(label)
-          done = true
-        }
-      },
-    }
-  }
-
-  span<T>(label: string, fn: () => T): T {
-    this.start(label)
-    let isPromise = false
-    try {
-      let result = fn()
-
-      isPromise = result && typeof (result as any).then === 'function'
-
-      // @ts-expect-error — TS can't infer that result is a Promise here
-      return isPromise ? result.finally(() => this.end(label)) : result
-    } finally {
-      if (!isPromise) this.end(label)
-    }
-  }
-
-  reset() {
-    this.#hits.clear()
-    this.#timers.clear()
-    this.#timerStack.splice(0)
-  }
-
-  report(flush = this.defaultFlush) {
-    let output: string[] = []
-    let hasHits = false
-
-    // Auto end any pending timers
-    for (let i = this.#timerStack.length - 1; i >= 0; i--) {
-      this.end(this.#timerStack[i].label)
-    }
-
-    for (let [label, { value: count }] of this.#hits.entries()) {
-      if (this.#timers.has(label)) continue
-      if (output.length === 0) {
-        hasHits = true
-        output.push('Hits:')
-      }
-
-      let depth = label.split('//').length
-      output.push(`${'  '.repeat(depth)}${label} ${dim(blue(`× ${count}`))}`)
-    }
-
-    if (this.#timers.size > 0 && hasHits) {
-      output.push('\nTimers:')
-    }
-
-    let max = -Infinity
-    let computed = new Map<string, string>()
-    for (let [label, { value }] of this.#timers) {
-      let x = `${(Number(value) / 1e6).toFixed(2)}ms`
-      computed.set(label, x)
-      max = Math.max(max, x.length)
-    }
-
-    for (let label of this.#timers.keys()) {
-      let depth = label.split('//').length
-      output.push(
-        `${dim(`[${computed.get(label)!.padStart(max, ' ')}]`)}${'  '.repeat(depth - 1)}${depth === 1 ? ' ' : dim(' ↳ ')}${label.split('//').pop()} ${
-          this.#hits.get(label).value === 1 ? '' : dim(blue(`× ${this.#hits.get(label).value}`))
-        }`.trimEnd(),
-      )
-    }
-
-    flush(`\n${output.join('\n')}\n`)
-    this.reset()
-  }
-
-  [Symbol.dispose]() {
-    this.shouldReport && this.report()
-  }
-}
-
-function dim(input: string) {
-  return `\u001b[2m${input}\u001b[22m`
-}
-
-function blue(input: string) {
-  return `\u001b[34m${input}\u001b[39m`
-}
diff --git a/packages/@tailwindcss-node/src/normalize-path.ts b/packages/@tailwindcss-node/src/normalize-path.ts
deleted file mode 100644
index a8184ef23..000000000
--- a/packages/@tailwindcss-node/src/normalize-path.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// Inlined version of `normalize-path` <https://github.com/jonschlinkert/normalize-path>
-// Copyright (c) 2014-2018, Jon Schlinkert.
-// Released under the MIT License.
-function normalizePathBase(path: string, stripTrailing?: boolean) {
-  if (typeof path !== 'string') {
-    throw new TypeError('expected path to be a string')
-  }
-
-  if (path === '\\' || path === '/') return '/'
-
-  var len = path.length
-  if (len <= 1) return path
-
-  // ensure that win32 namespaces has two leading slashes, so that the path is
-  // handled properly by the win32 version of path.parse() after being normalized
-  // https://msdn.microsoft.com/library/windows/desktop/aa365247(v=vs.85).aspx#namespaces
-  var prefix = ''
-  if (len > 4 && path[3] === '\\') {
-    var ch = path[2]
-    if ((ch === '?' || ch === '.') && path.slice(0, 2) === '\\\\') {
-      path = path.slice(2)
-      prefix = '//'
-    }
-  }
-
-  var segs = path.split(/[/\\]+/)
-  if (stripTrailing !== false && segs[segs.length - 1] === '') {
-    segs.pop()
-  }
-  return prefix + segs.join('/')
-}
-
-export function normalizePath(originalPath: string) {
-  let normalized = normalizePathBase(originalPath)
-
-  // Make sure Windows network share paths are normalized properly
-  // They have to begin with two slashes or they won't resolve correctly
-  if (
-    originalPath.startsWith('\\\\') &&
-    normalized.startsWith('/') &&
-    !normalized.startsWith('//')
-  ) {
-    return `/${normalized}`
-  }
-
-  return normalized
-}
diff --git a/packages/@tailwindcss-node/src/optimize.ts b/packages/@tailwindcss-node/src/optimize.ts
deleted file mode 100644
index 2f0d39589..000000000
--- a/packages/@tailwindcss-node/src/optimize.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import remapping from '@jridgewell/remapping'
-import { Features, transform } from 'lightningcss'
-import MagicString from 'magic-string'
-
-export interface OptimizeOptions {
-  /**
-   * The file being transformed
-   */
-  file?: string
-
-  /**
-   * Enabled minified output
-   */
-  minify?: boolean
-
-  /**
-   * The output source map before optimization
-   *
-   * If omitted a resulting source map will not be available
-   */
-  map?: string
-}
-
-export interface TransformResult {
-  code: string
-  map: string | undefined
-}
-
-export function optimize(
-  input: string,
-  { file = 'input.css', minify = false, map }: OptimizeOptions = {},
-): TransformResult {
-  function optimize(code: Buffer | Uint8Array, map: string | undefined) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: typeof map !== 'undefined',
-      inputSourceMap: map,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: Features.Nesting | Features.MediaQueries,
-      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
-      targets: {
-        safari: (16 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    })
-  }
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  let result = optimize(Buffer.from(input), map)
-  map = result.map?.toString()
-
-  result.warnings = result.warnings.filter((warning) => {
-    // Ignore warnings about unknown pseudo-classes that are used in frameworks
-    // such as Vue or Angular and are handled by their own compilers, before
-    // reaching the browser.
-    if (
-      /'(deep|slotted|global|ng-deep|host-context)' is not recognized as a valid pseudo-/.test(
-        warning.message,
-      )
-    ) {
-      return false
-    }
-
-    return true
-  })
-
-  // Because of `errorRecovery: true`, there could be warnings, so let's let the
-  // user know about them.
-  if (process.env.NODE_ENV !== 'test' && result.warnings.length > 0) {
-    let lines = input.split('\n')
-
-    let output = [
-      `Found ${result.warnings.length} ${result.warnings.length === 1 ? 'warning' : 'warnings'} while optimizing generated CSS:`,
-    ]
-
-    for (let [idx, warning] of result.warnings.entries()) {
-      output.push('')
-      if (result.warnings.length > 1) {
-        output.push(`Issue #${idx + 1}:`)
-      }
-
-      let context = 2
-
-      let start = Math.max(0, warning.loc.line - context - 1)
-      let end = Math.min(lines.length, warning.loc.line + context)
-
-      let snippet = lines.slice(start, end).map((line, idx) => {
-        if (start + idx + 1 === warning.loc.line) {
-          return `${dim(`\u2502`)} ${line}`
-        } else {
-          return dim(`\u2502 ${line}`)
-        }
-      })
-
-      snippet.splice(
-        warning.loc.line - start,
-        0,
-        `${dim('\u2506')}${' '.repeat(warning.loc.column - 1)} ${yellow(`${dim('^--')} ${warning.message}`)}`,
-        `${dim('\u2506')}`,
-      )
-
-      output.push(...snippet)
-    }
-    output.push('')
-
-    console.warn(output.join('\n'))
-  }
-
-  result = optimize(result.code, map)
-  map = result.map?.toString()
-
-  let code = result.code.toString()
-
-  // Work around an issue where the media query range syntax transpilation
-  // generates code that is invalid with `@media` queries level 3.
-  let magic = new MagicString(code)
-  magic.replaceAll('@media not (', '@media not all and (')
-
-  // We have to use a source-map-preserving method of replacing the content
-  // which requires the use of Magic String + remapping(…) to make sure
-  // the resulting map is correct
-  if (map !== undefined && magic.hasChanged()) {
-    let magicMap = magic.generateMap({ source: 'original', hires: 'boundary' }).toString()
-
-    let remapped = remapping([magicMap, map], () => null)
-
-    map = remapped.toString()
-  }
-
-  code = magic.toString()
-
-  return {
-    code,
-    map,
-  }
-}
-
-function dim(str: string) {
-  return `\x1B[2m${str}\x1B[22m`
-}
-
-function yellow(str: string) {
-  return `\x1B[33m${str}\x1B[39m`
-}
diff --git a/packages/@tailwindcss-node/src/require-cache.cts b/packages/@tailwindcss-node/src/require-cache.cts
deleted file mode 100644
index ea0562019..000000000
--- a/packages/@tailwindcss-node/src/require-cache.cts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function clearRequireCache(files: string[]) {
-  for (let key of files) {
-    delete require.cache[key]
-  }
-}
diff --git a/packages/@tailwindcss-node/src/require-cache.ts b/packages/@tailwindcss-node/src/require-cache.ts
deleted file mode 100644
index ea0562019..000000000
--- a/packages/@tailwindcss-node/src/require-cache.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function clearRequireCache(files: string[]) {
-  for (let key of files) {
-    delete require.cache[key]
-  }
-}
diff --git a/packages/@tailwindcss-node/src/source-maps.test.ts b/packages/@tailwindcss-node/src/source-maps.test.ts
deleted file mode 100644
index 96ff8f05c..000000000
--- a/packages/@tailwindcss-node/src/source-maps.test.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { expect, it } from 'vitest'
-import { toSourceMap } from './source-maps'
-
-it('should emit source maps', () => {
-  let map = toSourceMap('{"version":3,"sources":[],"names":[],"mappings":""}')
-
-  expect(map.comment('app.css.map')).toBe('/*# sourceMappingURL=app.css.map */\n')
-})
diff --git a/packages/@tailwindcss-node/src/source-maps.ts b/packages/@tailwindcss-node/src/source-maps.ts
deleted file mode 100644
index 58b79cb25..000000000
--- a/packages/@tailwindcss-node/src/source-maps.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { SourceMapGenerator } from 'source-map-js'
-import type { DecodedSource, DecodedSourceMap } from '../../tailwindcss/src/source-maps/source-map'
-import { DefaultMap } from '../../tailwindcss/src/utils/default-map'
-
-export type { DecodedSource, DecodedSourceMap }
-export interface SourceMap {
-  readonly raw: string
-  readonly inline: string
-  comment(url: string): string
-}
-
-function serializeSourceMap(map: DecodedSourceMap): string {
-  let generator = new SourceMapGenerator()
-
-  let id = 1
-  let sourceTable = new DefaultMap<
-    DecodedSource | null,
-    {
-      url: string
-      content: string
-    }
-  >((src) => {
-    return {
-      url: src?.url ?? `<unknown ${id++}>`,
-      content: src?.content ?? '<none>',
-    }
-  })
-
-  for (let mapping of map.mappings) {
-    let original = sourceTable.get(mapping.originalPosition?.source ?? null)
-
-    generator.addMapping({
-      generated: mapping.generatedPosition,
-      original: mapping.originalPosition,
-      source: original.url,
-      name: mapping.name,
-    })
-
-    generator.setSourceContent(original.url, original.content)
-  }
-
-  return generator.toString()
-}
-
-export function toSourceMap(map: DecodedSourceMap | string): SourceMap {
-  let raw = typeof map === 'string' ? map : serializeSourceMap(map)
-
-  function comment(url: string) {
-    return `/*# sourceMappingURL\x3d${url} */\n`
-  }
-
-  return {
-    raw,
-    get inline() {
-      let inlined = Buffer.from(raw, 'utf-8').toString('base64')
-      return comment(`data:application/json;base64,${inlined}`)
-    },
-    comment,
-  }
-}
diff --git a/packages/@tailwindcss-node/src/urls.test.ts b/packages/@tailwindcss-node/src/urls.test.ts
deleted file mode 100644
index 16ba352a7..000000000
--- a/packages/@tailwindcss-node/src/urls.test.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import { expect, test } from 'vitest'
-import { rewriteUrls } from './urls'
-
-const css = String.raw
-
-test('URLs can be rewritten', async () => {
-  let root = '/root'
-
-  let result = await rewriteUrls({
-    root,
-    base: '/root/foo/bar',
-    // prettier-ignore
-    css: css`
-      .foo {
-        /* Relative URLs: replaced */
-        background: url(./image.jpg);
-        background: url(../image.jpg);
-        background: url('./image.jpg');
-        background: url("./image.jpg");
-
-        /* Absolute URLs: ignored */
-        background: url(/image.jpg);
-        background: url(/foo/image.jpg);
-        background: url('/image.jpg');
-        background: url("/image.jpg");
-
-        /* Potentially Vite-aliased URLs: ignored */
-        background: url(~/image.jpg);
-        background: url(~/foo/image.jpg);
-        background: url('~/image.jpg');
-        background: url("~/image.jpg");
-        background: url(#/image.jpg);
-        background: url(#/foo/image.jpg);
-        background: url('#/image.jpg');
-        background: url("#/image.jpg");
-        background: url(@/image.jpg);
-        background: url(@/foo/image.jpg);
-        background: url('@/image.jpg');
-        background: url("@/image.jpg");
-
-        /* External URL: ignored */
-        background: url(http://example.com/image.jpg);
-        background: url('http://example.com/image.jpg');
-        background: url("http://example.com/image.jpg");
-
-        /* Data URI: ignored */
-        /* background: url(data:image/png;base64,abc==); */
-        background: url('data:image/png;base64,abc==');
-        background: url("data:image/png;base64,abc==");
-
-        /* Function calls: ignored */
-        background: url(var(--foo));
-        background: url(var(--foo, './image.jpg'));
-        background: url(var(--foo, "./image.jpg"));
-
-        /* Fragments: ignored */
-        background: url(#dont-touch-this);
-
-        /* Image Sets - Raw URL: replaced */
-        background: image-set(
-          image1.jpg 1x,
-          image2.jpg 2x
-        );
-        background: image-set(
-          'image1.jpg' 1x,
-          'image2.jpg' 2x
-        );
-        background: image-set(
-          "image1.jpg" 1x,
-          "image2.jpg" 2x
-        );
-
-        /* Image Sets - Relative URLs: replaced */
-        background: image-set(
-          url('image1.jpg') 1x,
-          url('image2.jpg') 2x
-        );
-        background: image-set(
-          url("image1.jpg") 1x,
-          url("image2.jpg") 2x
-        );
-        background: image-set(
-          url('image1.avif') type('image/avif'),
-          url('image2.jpg') type('image/jpeg')
-        );
-        background: image-set(
-          url("image1.avif") type('image/avif'),
-          url("image2.jpg") type('image/jpeg')
-        );
-
-        /* Image Sets - Function calls: ignored */
-        background: image-set(
-          linear-gradient(blue, white) 1x,
-          linear-gradient(blue, green) 2x
-        );
-
-        /* Image Sets - Mixed: replaced */
-        background: image-set(
-          linear-gradient(blue, white) 1x,
-          url("image2.jpg") 2x
-        );
-      }
-
-      /* Fonts - Multiple URLs: replaced */
-      @font-face {
-        font-family: "Newman";
-        src:
-          local("Newman"),
-          url("newman-COLRv1.otf") format("opentype") tech(color-COLRv1),
-          url("newman-outline.otf") format("opentype"),
-          url("newman-outline.woff") format("woff");
-      }
-    `,
-  })
-
-  expect(result).toMatchInlineSnapshot(`
-    ".foo {
-      background: url(./foo/bar/image.jpg);
-      background: url(./foo/image.jpg);
-      background: url('./foo/bar/image.jpg');
-      background: url("./foo/bar/image.jpg");
-      background: url(/image.jpg);
-      background: url(/foo/image.jpg);
-      background: url('/image.jpg');
-      background: url("/image.jpg");
-      background: url(~/image.jpg);
-      background: url(~/foo/image.jpg);
-      background: url('~/image.jpg');
-      background: url("~/image.jpg");
-      background: url(#/image.jpg);
-      background: url(#/foo/image.jpg);
-      background: url('#/image.jpg');
-      background: url("#/image.jpg");
-      background: url(@/image.jpg);
-      background: url(@/foo/image.jpg);
-      background: url('@/image.jpg');
-      background: url("@/image.jpg");
-      background: url(http://example.com/image.jpg);
-      background: url('http://example.com/image.jpg');
-      background: url("http://example.com/image.jpg");
-      background: url('data:image/png;base64,abc==');
-      background: url("data:image/png;base64,abc==");
-      background: url(var(--foo));
-      background: url(var(--foo, './image.jpg'));
-      background: url(var(--foo, "./image.jpg"));
-      background: url(#dont-touch-this);
-      background: image-set(url(./foo/bar/image1.jpg) 1x, url(./foo/bar/image2.jpg) 2x);
-      background: image-set(url('./foo/bar/image1.jpg') 1x, url('./foo/bar/image2.jpg') 2x);
-      background: image-set(url("./foo/bar/image1.jpg") 1x, url("./foo/bar/image2.jpg") 2x);
-      background: image-set(url('./foo/bar/image1.jpg') 1x, url('./foo/bar/image2.jpg') 2x);
-      background: image-set(url("./foo/bar/image1.jpg") 1x, url("./foo/bar/image2.jpg") 2x);
-      background: image-set(url('./foo/bar/image1.avif') type('image/avif'), url('./foo/bar/image2.jpg') type('image/jpeg'));
-      background: image-set(url("./foo/bar/image1.avif") type('image/avif'), url("./foo/bar/image2.jpg") type('image/jpeg'));
-      background: image-set(linear-gradient(blue, white) 1x, linear-gradient(blue, green) 2x);
-      background: image-set(linear-gradient(blue, white) 1x, url("./foo/bar/image2.jpg") 2x);
-    }
-    @font-face {
-      font-family: "Newman";
-      src: local("Newman"), url("./foo/bar/newman-COLRv1.otf") format("opentype") tech(color-COLRv1), url("./foo/bar/newman-outline.otf") format("opentype"), url("./foo/bar/newman-outline.woff") format("woff");
-    }
-    "
-  `)
-})
diff --git a/packages/@tailwindcss-node/src/urls.ts b/packages/@tailwindcss-node/src/urls.ts
deleted file mode 100644
index 61695a9d1..000000000
--- a/packages/@tailwindcss-node/src/urls.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-// Inlined version of code from Vite <https://github.com/vitejs/vite>
-// Copyright (c) 2019-present, VoidZero Inc. and Vite contributors
-// Released under the MIT License.
-//
-// Minor modifications have been made to work with the Tailwind CSS codebase
-
-import * as path from 'node:path'
-import { toCss } from '../../tailwindcss/src/ast'
-import { parse } from '../../tailwindcss/src/css-parser'
-import { walk } from '../../tailwindcss/src/walk'
-import { normalizePath } from './normalize-path'
-
-const cssUrlRE =
-  /(?<!@import\s+)(?<=^|[^\w\-\u0080-\uffff])url\((\s*('[^']+'|"[^"]+")\s*|[^'")]+)\)/
-const cssImageSetRE = /(?<=image-set\()((?:[\w-]{1,256}\([^)]*\)|[^)])*)(?=\))/
-const cssNotProcessedRE = /(?:gradient|element|cross-fade|image)\(/
-
-const dataUrlRE = /^\s*data:/i
-const externalRE = /^([a-z]+:)?\/\//
-const functionCallRE = /^[A-Z_][.\w-]*\(/i
-
-const imageCandidateRE =
-  /(?:^|\s)(?<url>[\w-]+\([^)]*\)|"[^"]*"|'[^']*'|[^,]\S*[^,])\s*(?:\s(?<descriptor>\w[^,]+))?(?:,|$)/g
-const nonEscapedDoubleQuoteRE = /(?<!\\)"/g
-const escapedSpaceCharactersRE = /(?: |\\t|\\n|\\f|\\r)+/g
-
-const isDataUrl = (url: string): boolean => dataUrlRE.test(url)
-const isExternalUrl = (url: string): boolean => externalRE.test(url)
-
-type CssUrlReplacer = (url: string, importer?: string) => string | Promise<string>
-
-interface ImageCandidate {
-  url: string
-  descriptor: string
-}
-
-export async function rewriteUrls({
-  css,
-  base,
-  root,
-}: {
-  css: string
-  base: string
-  root: string
-}) {
-  if (!css.includes('url(') && !css.includes('image-set(')) {
-    return css
-  }
-
-  let ast = parse(css)
-
-  let promises: Promise<void>[] = []
-
-  function replacerForDeclaration(url: string) {
-    if (url[0] === '/') return url
-
-    let absoluteUrl = path.posix.join(normalizePath(base), url)
-    let relativeUrl = path.posix.relative(normalizePath(root), absoluteUrl)
-
-    // If the path points to a file in the same directory, `path.relative` will
-    // remove the leading `./` and we need to add it back in order to still
-    // consider the path relative
-    if (!relativeUrl.startsWith('.')) {
-      relativeUrl = './' + relativeUrl
-    }
-
-    return relativeUrl
-  }
-
-  walk(ast, (node) => {
-    if (node.kind !== 'declaration') return
-    if (!node.value) return
-
-    let isCssUrl = cssUrlRE.test(node.value)
-    let isCssImageSet = cssImageSetRE.test(node.value)
-
-    if (isCssUrl || isCssImageSet) {
-      let rewriterToUse = isCssImageSet ? rewriteCssImageSet : rewriteCssUrls
-
-      promises.push(
-        rewriterToUse(node.value, replacerForDeclaration).then((url) => {
-          node.value = url
-        }),
-      )
-    }
-  })
-
-  if (promises.length) {
-    await Promise.all(promises)
-  }
-
-  return toCss(ast)
-}
-
-function rewriteCssUrls(css: string, replacer: CssUrlReplacer): Promise<string> {
-  return asyncReplace(css, cssUrlRE, async (match) => {
-    const [matched, rawUrl] = match
-    return await doUrlReplace(rawUrl.trim(), matched, replacer)
-  })
-}
-
-async function rewriteCssImageSet(css: string, replacer: CssUrlReplacer): Promise<string> {
-  return await asyncReplace(css, cssImageSetRE, async (match) => {
-    const [, rawUrl] = match
-    const url = await processSrcSet(rawUrl, async ({ url }) => {
-      // the url maybe url(...)
-      if (cssUrlRE.test(url)) {
-        return await rewriteCssUrls(url, replacer)
-      }
-      if (!cssNotProcessedRE.test(url)) {
-        return await doUrlReplace(url, url, replacer)
-      }
-      return url
-    })
-    return url
-  })
-}
-
-async function doUrlReplace(
-  rawUrl: string,
-  matched: string,
-  replacer: CssUrlReplacer,
-  funcName: string = 'url',
-) {
-  let wrap = ''
-  const first = rawUrl[0]
-  if (first === `"` || first === `'`) {
-    wrap = first
-    rawUrl = rawUrl.slice(1, -1)
-  }
-
-  if (skipUrlReplacer(rawUrl)) {
-    return matched
-  }
-
-  let newUrl = await replacer(rawUrl)
-  // The new url might need wrapping even if the original did not have it, e.g. if a space was added during replacement
-  if (wrap === '' && newUrl !== encodeURI(newUrl)) {
-    wrap = '"'
-  }
-  // If wrapping in single quotes and newUrl also contains single quotes, switch to double quotes.
-  // Give preference to double quotes since SVG inlining converts double quotes to single quotes.
-  if (wrap === "'" && newUrl.includes("'")) {
-    wrap = '"'
-  }
-  // Escape double quotes if they exist (they also tend to be rarer than single quotes)
-  if (wrap === '"' && newUrl.includes('"')) {
-    newUrl = newUrl.replace(nonEscapedDoubleQuoteRE, '\\"')
-  }
-  return `${funcName}(${wrap}${newUrl}${wrap})`
-}
-
-function skipUrlReplacer(rawUrl: string, aliases?: string[]) {
-  return (
-    isExternalUrl(rawUrl) ||
-    isDataUrl(rawUrl) ||
-    !rawUrl[0].match(/[.a-zA-Z0-9_]/) ||
-    functionCallRE.test(rawUrl)
-  )
-}
-
-function processSrcSet(
-  srcs: string,
-  replacer: (arg: ImageCandidate) => Promise<string>,
-): Promise<string> {
-  return Promise.all(
-    parseSrcset(srcs).map(async ({ url, descriptor }) => ({
-      url: await replacer({ url, descriptor }),
-      descriptor,
-    })),
-  ).then(joinSrcset)
-}
-
-function parseSrcset(string: string): ImageCandidate[] {
-  const matches = string
-    .trim()
-    .replace(escapedSpaceCharactersRE, ' ')
-    .replace(/\r?\n/, '')
-    .replace(/,\s+/, ', ')
-    .replaceAll(/\s+/g, ' ')
-    .matchAll(imageCandidateRE)
-  return Array.from(matches, ({ groups }) => ({
-    url: groups?.url?.trim() ?? '',
-    descriptor: groups?.descriptor?.trim() ?? '',
-  })).filter(({ url }) => !!url)
-}
-
-function joinSrcset(ret: ImageCandidate[]) {
-  return ret.map(({ url, descriptor }) => url + (descriptor ? ` ${descriptor}` : '')).join(', ')
-}
-
-async function asyncReplace(
-  input: string,
-  re: RegExp,
-  replacer: (match: RegExpExecArray) => string | Promise<string>,
-): Promise<string> {
-  let match: RegExpExecArray | null
-  let remaining = input
-  let rewritten = ''
-  while ((match = re.exec(remaining))) {
-    rewritten += remaining.slice(0, match.index)
-    rewritten += await replacer(match)
-    remaining = remaining.slice(match.index + match[0].length)
-  }
-  rewritten += remaining
-  return rewritten
-}
diff --git a/packages/@tailwindcss-node/tsconfig.json b/packages/@tailwindcss-node/tsconfig.json
deleted file mode 100644
index d2131cbeb..000000000
--- a/packages/@tailwindcss-node/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "verbatimModuleSyntax": false,
-  },
-}
diff --git a/packages/@tailwindcss-node/tsup.config.ts b/packages/@tailwindcss-node/tsup.config.ts
deleted file mode 100644
index 3f2d184d5..000000000
--- a/packages/@tailwindcss-node/tsup.config.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig([
-  {
-    format: ['cjs'],
-    minify: true,
-    dts: true,
-    entry: ['src/index.cts'],
-    define: {
-      'process.env.NODE_ENV': '"production"',
-    },
-  },
-  {
-    format: ['esm'],
-    minify: true,
-    dts: true,
-    entry: ['src/index.ts'],
-    define: {
-      'process.env.NODE_ENV': '"production"',
-    },
-  },
-  {
-    format: ['esm'],
-    minify: true,
-    dts: true,
-    entry: ['src/esm-cache.loader.mts'],
-    define: {
-      'process.env.NODE_ENV': '"production"',
-    },
-  },
-  {
-    format: ['cjs'],
-    minify: true,
-    dts: true,
-    entry: ['src/require-cache.cts'],
-    define: {
-      'process.env.NODE_ENV': '"production"',
-    },
-  },
-])
diff --git a/packages/@tailwindcss-postcss/README.md b/packages/@tailwindcss-postcss/README.md
index 3facf2887..95ec9d87d 100644
--- a/packages/@tailwindcss-postcss/README.md
+++ b/packages/@tailwindcss-postcss/README.md
@@ -13,10 +13,10 @@
 </p>
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=next" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
 </p>
 
 ---
@@ -27,85 +27,14 @@ For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
 
 ## Community
 
-For help, discussion about best practices, or feature ideas:
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
 
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
+[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions)
+
+For chatting with others using the framework:
+
+[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
 
 ## Contributing
 
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
-
----
-
-## `@tailwindcss/postcss` plugin API
-
-### Changing where the plugin searches for source files
-
-You can use the `base` option (defaults to the current working directory) to change the directory in which the plugin searches for source files:
-
-```js
-import tailwindcss from '@tailwindcss/postcss'
-
-export default {
-  plugins: [
-    tailwindcss({
-      base: path.resolve(__dirname, './path'),
-    }),
-  ],
-}
-```
-
-### Enabling or disabling Lightning CSS
-
-By default, this plugin detects whether or not the CSS is being built for production by checking the `NODE_ENV` environment variable. When building for production Lightning CSS will be enabled otherwise it is disabled.
-
-If you want to always enable or disable Lightning CSS the `optimize` option may be used:
-
-```js
-import tailwindcss from '@tailwindcss/postcss'
-
-export default {
-  plugins: [
-    tailwindcss({
-      // Enable or disable Lightning CSS
-      optimize: false,
-    }),
-  ],
-}
-```
-
-It's also possible to keep Lightning CSS enabled but disable minification:
-
-```js
-import tailwindcss from '@tailwindcss/postcss'
-
-export default {
-  plugins: [
-    tailwindcss({
-      optimize: { minify: false },
-    }),
-  ],
-}
-```
-
-### Enabling or disabling `url(…)` rewriting
-
-Our PostCSS plugin can rewrite `url(…)`s for you since it also handles `@import` (no `postcss-import` is needed). This feature is enabled by default.
-
-In some situations the bundler or framework you're using may provide this feature itself. In this case you can set `transformAssetUrls` to `false` to disable this feature:
-
-```js
-import tailwindcss from '@tailwindcss/postcss'
-
-export default {
-  plugins: [
-    tailwindcss({
-      // Disable `url(…)` rewriting
-      transformAssetUrls: false,
-
-      // Enable `url(…)` rewriting (the default)
-      transformAssetUrls: true,
-    }),
-  ],
-}
-```
+If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**.
diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json
index 891578509..265f83767 100644
--- a/packages/@tailwindcss-postcss/package.json
+++ b/packages/@tailwindcss-postcss/package.json
@@ -1,18 +1,18 @@
 {
   "name": "@tailwindcss/postcss",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "description": "PostCSS plugin for Tailwind CSS, a utility-first CSS framework for rapidly building custom user interfaces",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
+    "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
     "directory": "packages/@tailwindcss-postcss"
   },
   "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
   "homepage": "https://tailwindcss.com",
   "scripts": {
     "lint": "tsc --noEmit",
-    "build": "tsup-node",
+    "build": "tsup-node ./src/index.ts --format cjs --dts --cjsInterop --splitting --minify --clean",
     "dev": "pnpm run build -- --watch"
   },
   "files": [
@@ -24,28 +24,18 @@
   },
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js"
     }
   },
   "dependencies": {
-    "@alloc/quick-lru": "^5.2.0",
-    "@tailwindcss/node": "workspace:*",
-    "@tailwindcss/oxide": "workspace:*",
-    "postcss": "catalog:",
-    "tailwindcss": "workspace:*"
+    "@tailwindcss/oxide": "workspace:^",
+    "postcss-import": "^16.0.0",
+    "tailwindcss": "workspace:^"
   },
   "devDependencies": {
-    "@types/node": "catalog:",
-    "@types/postcss-import": "14.0.3",
-    "dedent": "catalog:",
-    "internal-example-plugin": "workspace:*",
-    "postcss-import": "^16.1.1"
+    "@types/node": "^20.11.17",
+    "@types/postcss-import": "^14.0.3",
+    "postcss": "8.4.24"
   }
 }
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 05087fa39..7bb8174f7 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -1,32 +1,408 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-font-weight: initial;
-    }
-  }
-}
-
-@layer theme {
-  :root, :host {
-    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
+"@layer theme {
+  :root {
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: var(--transition-timing-function-in-out);
+    --default-font-family: var(--font-family-sans);
+    --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+    --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+    --default-mono-font-family: var(--font-family-mono);
+    --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
+    --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+    --breakpoint-2xl: 1536px;
     --color-black: #000;
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
-    --font-weight-bold: 700;
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
+    --color-white: #fff;
+    --color-slate-50: #f8fafc;
+    --color-slate-100: #f1f5f9;
+    --color-slate-200: #e2e8f0;
+    --color-slate-300: #cbd5e1;
+    --color-slate-400: #94a3b8;
+    --color-slate-500: #64748b;
+    --color-slate-600: #475569;
+    --color-slate-700: #334155;
+    --color-slate-800: #1e293b;
+    --color-slate-900: #0f172a;
+    --color-slate-950: #020617;
+    --color-gray-50: #f9fafb;
+    --color-gray-100: #f3f4f6;
+    --color-gray-200: #e5e7eb;
+    --color-gray-300: #d1d5db;
+    --color-gray-400: #9ca3af;
+    --color-gray-500: #6b7280;
+    --color-gray-600: #4b5563;
+    --color-gray-700: #374151;
+    --color-gray-800: #1f2937;
+    --color-gray-900: #111827;
+    --color-gray-950: #030712;
+    --color-zinc-50: #fafafa;
+    --color-zinc-100: #f4f4f5;
+    --color-zinc-200: #e4e4e7;
+    --color-zinc-300: #d4d4d8;
+    --color-zinc-400: #a1a1aa;
+    --color-zinc-500: #71717a;
+    --color-zinc-600: #52525b;
+    --color-zinc-700: #3f3f46;
+    --color-zinc-800: #27272a;
+    --color-zinc-900: #18181b;
+    --color-zinc-950: #09090b;
+    --color-neutral-50: #fafafa;
+    --color-neutral-100: #f5f5f5;
+    --color-neutral-200: #e5e5e5;
+    --color-neutral-300: #d4d4d4;
+    --color-neutral-400: #a3a3a3;
+    --color-neutral-500: #737373;
+    --color-neutral-600: #525252;
+    --color-neutral-700: #404040;
+    --color-neutral-800: #262626;
+    --color-neutral-900: #171717;
+    --color-neutral-950: #0a0a0a;
+    --color-stone-50: #fafaf9;
+    --color-stone-100: #f5f5f4;
+    --color-stone-200: #e7e5e4;
+    --color-stone-300: #d6d3d1;
+    --color-stone-400: #a8a29e;
+    --color-stone-500: #78716c;
+    --color-stone-600: #57534e;
+    --color-stone-700: #44403c;
+    --color-stone-800: #292524;
+    --color-stone-900: #1c1917;
+    --color-stone-950: #0c0a09;
+    --color-red-50: #fef2f2;
+    --color-red-100: #fee2e2;
+    --color-red-200: #fecaca;
+    --color-red-300: #fca5a5;
+    --color-red-400: #f87171;
+    --color-red-500: #ef4444;
+    --color-red-600: #dc2626;
+    --color-red-700: #b91c1c;
+    --color-red-800: #991b1b;
+    --color-red-900: #7f1d1d;
+    --color-red-950: #450a0a;
+    --color-orange-50: #fff7ed;
+    --color-orange-100: #ffedd5;
+    --color-orange-200: #fed7aa;
+    --color-orange-300: #fdba74;
+    --color-orange-400: #fb923c;
+    --color-orange-500: #f97316;
+    --color-orange-600: #ea580c;
+    --color-orange-700: #c2410c;
+    --color-orange-800: #9a3412;
+    --color-orange-900: #7c2d12;
+    --color-orange-950: #431407;
+    --color-amber-50: #fffbeb;
+    --color-amber-100: #fef3c7;
+    --color-amber-200: #fde68a;
+    --color-amber-300: #fcd34d;
+    --color-amber-400: #fbbf24;
+    --color-amber-500: #f59e0b;
+    --color-amber-600: #d97706;
+    --color-amber-700: #b45309;
+    --color-amber-800: #92400e;
+    --color-amber-900: #78350f;
+    --color-amber-950: #451a03;
+    --color-yellow-50: #fefce8;
+    --color-yellow-100: #fef9c3;
+    --color-yellow-200: #fef08a;
+    --color-yellow-300: #fde047;
+    --color-yellow-400: #facc15;
+    --color-yellow-500: #eab308;
+    --color-yellow-600: #ca8a04;
+    --color-yellow-700: #a16207;
+    --color-yellow-800: #854d0e;
+    --color-yellow-900: #713f12;
+    --color-yellow-950: #422006;
+    --color-lime-50: #f7fee7;
+    --color-lime-100: #ecfccb;
+    --color-lime-200: #d9f99d;
+    --color-lime-300: #bef264;
+    --color-lime-400: #a3e635;
+    --color-lime-500: #84cc16;
+    --color-lime-600: #65a30d;
+    --color-lime-700: #4d7c0f;
+    --color-lime-800: #3f6212;
+    --color-lime-900: #365314;
+    --color-lime-950: #1a2e05;
+    --color-green-50: #f0fdf4;
+    --color-green-100: #dcfce7;
+    --color-green-200: #bbf7d0;
+    --color-green-300: #86efac;
+    --color-green-400: #4ade80;
+    --color-green-500: #22c55e;
+    --color-green-600: #16a34a;
+    --color-green-700: #15803d;
+    --color-green-800: #166534;
+    --color-green-900: #14532d;
+    --color-green-950: #052e16;
+    --color-emerald-50: #ecfdf5;
+    --color-emerald-100: #d1fae5;
+    --color-emerald-200: #a7f3d0;
+    --color-emerald-300: #6ee7b7;
+    --color-emerald-400: #34d399;
+    --color-emerald-500: #10b981;
+    --color-emerald-600: #059669;
+    --color-emerald-700: #047857;
+    --color-emerald-800: #065f46;
+    --color-emerald-900: #064e3b;
+    --color-emerald-950: #022c22;
+    --color-teal-50: #f0fdfa;
+    --color-teal-100: #ccfbf1;
+    --color-teal-200: #99f6e4;
+    --color-teal-300: #5eead4;
+    --color-teal-400: #2dd4bf;
+    --color-teal-500: #14b8a6;
+    --color-teal-600: #0d9488;
+    --color-teal-700: #0f766e;
+    --color-teal-800: #115e59;
+    --color-teal-900: #134e4a;
+    --color-teal-950: #042f2e;
+    --color-cyan-50: #ecfeff;
+    --color-cyan-100: #cffafe;
+    --color-cyan-200: #a5f3fc;
+    --color-cyan-300: #67e8f9;
+    --color-cyan-400: #22d3ee;
+    --color-cyan-500: #06b6d4;
+    --color-cyan-600: #0891b2;
+    --color-cyan-700: #0e7490;
+    --color-cyan-800: #155e75;
+    --color-cyan-900: #164e63;
+    --color-cyan-950: #083344;
+    --color-sky-50: #f0f9ff;
+    --color-sky-100: #e0f2fe;
+    --color-sky-200: #bae6fd;
+    --color-sky-300: #7dd3fc;
+    --color-sky-400: #38bdf8;
+    --color-sky-500: #0ea5e9;
+    --color-sky-600: #0284c7;
+    --color-sky-700: #0369a1;
+    --color-sky-800: #075985;
+    --color-sky-900: #0c4a6e;
+    --color-sky-950: #082f49;
+    --color-blue-50: #eff6ff;
+    --color-blue-100: #dbeafe;
+    --color-blue-200: #bfdbfe;
+    --color-blue-300: #93c5fd;
+    --color-blue-400: #60a5fa;
+    --color-blue-500: #3b82f6;
+    --color-blue-600: #2563eb;
+    --color-blue-700: #1d4ed8;
+    --color-blue-800: #1e40af;
+    --color-blue-900: #1e3a8a;
+    --color-blue-950: #172554;
+    --color-indigo-50: #eef2ff;
+    --color-indigo-100: #e0e7ff;
+    --color-indigo-200: #c7d2fe;
+    --color-indigo-300: #a5b4fc;
+    --color-indigo-400: #818cf8;
+    --color-indigo-500: #6366f1;
+    --color-indigo-600: #4f46e5;
+    --color-indigo-700: #4338ca;
+    --color-indigo-800: #3730a3;
+    --color-indigo-900: #312e81;
+    --color-indigo-950: #1e1b4b;
+    --color-violet-50: #f5f3ff;
+    --color-violet-100: #ede9fe;
+    --color-violet-200: #ddd6fe;
+    --color-violet-300: #c4b5fd;
+    --color-violet-400: #a78bfa;
+    --color-violet-500: #8b5cf6;
+    --color-violet-600: #7c3aed;
+    --color-violet-700: #6d28d9;
+    --color-violet-800: #5b21b6;
+    --color-violet-900: #4c1d95;
+    --color-violet-950: #2e1065;
+    --color-purple-50: #faf5ff;
+    --color-purple-100: #f3e8ff;
+    --color-purple-200: #e9d5ff;
+    --color-purple-300: #d8b4fe;
+    --color-purple-400: #c084fc;
+    --color-purple-500: #a855f7;
+    --color-purple-600: #9333ea;
+    --color-purple-700: #7e22ce;
+    --color-purple-800: #6b21a8;
+    --color-purple-900: #581c87;
+    --color-purple-950: #3b0764;
+    --color-fuchsia-50: #fdf4ff;
+    --color-fuchsia-100: #fae8ff;
+    --color-fuchsia-200: #f5d0fe;
+    --color-fuchsia-300: #f0abfc;
+    --color-fuchsia-400: #e879f9;
+    --color-fuchsia-500: #d946ef;
+    --color-fuchsia-600: #c026d3;
+    --color-fuchsia-700: #a21caf;
+    --color-fuchsia-800: #86198f;
+    --color-fuchsia-900: #701a75;
+    --color-fuchsia-950: #4a044e;
+    --color-pink-50: #fdf2f8;
+    --color-pink-100: #fce7f3;
+    --color-pink-200: #fbcfe8;
+    --color-pink-300: #f9a8d4;
+    --color-pink-400: #f472b6;
+    --color-pink-500: #ec4899;
+    --color-pink-600: #db2777;
+    --color-pink-700: #be185d;
+    --color-pink-800: #9d174d;
+    --color-pink-900: #831843;
+    --color-pink-950: #500724;
+    --color-rose-50: #fff1f2;
+    --color-rose-100: #ffe4e6;
+    --color-rose-200: #fecdd3;
+    --color-rose-300: #fda4af;
+    --color-rose-400: #fb7185;
+    --color-rose-500: #f43f5e;
+    --color-rose-600: #e11d48;
+    --color-rose-700: #be123c;
+    --color-rose-800: #9f1239;
+    --color-rose-900: #881337;
+    --color-rose-950: #4c0519;
+    --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
+    --blur: 8px;
+    --blur-sm: 4px;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+    --radius: .25rem;
+    --radius-sm: .125rem;
+    --radius-md: .375rem;
+    --radius-lg: .5rem;
+    --radius-xl: .75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+    --shadow-xs: 0 1px #0000000d;
+    --shadow-sm: 0 1px 2px 0 #0000000d;
+    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
+    --shadow-2xl: 0 25px 50px -12px #00000040;
+    --shadow-inner: inset 0 2px 4px 0 #0000000d;
+    --inset-shadow-xs: inset 0 1px #0000000d;
+    --inset-shadow-sm: inset 0 1px 1px #0000000d;
+    --inset-shadow: inset 0 2px 4px #0000000d;
+    --drop-shadow: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
+    --drop-shadow-sm: 0 1px 1px #0000000d;
+    --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f;
+    --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;
+    --width-3xs: 16rem;
+    --width-2xs: 18rem;
+    --width-xs: 20rem;
+    --width-sm: 24rem;
+    --width-md: 28rem;
+    --width-lg: 32rem;
+    --width-xl: 36rem;
+    --width-2xl: 42rem;
+    --width-3xl: 48rem;
+    --width-4xl: 56rem;
+    --width-5xl: 64rem;
+    --width-6xl: 72rem;
+    --width-7xl: 80rem;
+    --width-prose: 65ch;
+    --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-size-xs: .75rem;
+    --font-size-xs--line-height: 1rem;
+    --font-size-sm: .875rem;
+    --font-size-sm--line-height: 1.25rem;
+    --font-size-base: 1rem;
+    --font-size-base--line-height: 1.5rem;
+    --font-size-lg: 1.125rem;
+    --font-size-lg--line-height: 1.75rem;
+    --font-size-xl: 1.25rem;
+    --font-size-xl--line-height: 1.75rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-2xl--line-height: 2rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-3xl--line-height: 2.25rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-4xl--line-height: 2.5rem;
+    --font-size-5xl: 3rem;
+    --font-size-5xl--line-height: 1;
+    --font-size-6xl: 3.75rem;
+    --font-size-6xl--line-height: 1;
+    --font-size-7xl: 4.5rem;
+    --font-size-7xl--line-height: 1;
+    --font-size-8xl: 6rem;
+    --font-size-8xl--line-height: 1;
+    --font-size-9xl: 8rem;
+    --font-size-9xl--line-height: 1;
+    --letter-spacing-tighter: -.05em;
+    --letter-spacing-tight: -.025em;
+    --letter-spacing-normal: 0em;
+    --letter-spacing-wide: .025em;
+    --letter-spacing-wider: .05em;
+    --letter-spacing-widest: .1em;
+    --line-height-none: 1;
+    --line-height-tight: 1.25;
+    --line-height-snug: 1.375;
+    --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;
+    --transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    --transition-timing-function-linear: linear;
+    --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
+    --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
+    --transition-timing-function-in-out: cubic-bezier(.4, 0, .2, 1);
   }
 }
 
 @layer base {
-  *, :after, :before, ::backdrop {
+  *, :after, :before, ::backdrop, :first-letter {
     box-sizing: border-box;
     border: 0 solid;
     margin: 0;
@@ -44,16 +420,20 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
     line-height: 1.5;
-    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     font-feature-settings: var(--default-font-feature-settings, normal);
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
   }
 
+  body {
+    line-height: inherit;
+  }
+
   hr {
-    height: 0;
     color: inherit;
     border-top-width: 1px;
+    height: 0;
   }
 
   abbr:where([title]) {
@@ -70,7 +450,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     color: inherit;
     -webkit-text-decoration: inherit;
     -webkit-text-decoration: inherit;
-    -webkit-text-decoration: inherit;
     text-decoration: inherit;
   }
 
@@ -110,14 +489,58 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     border-collapse: collapse;
   }
 
-  :-moz-focusring:where(:not(iframe)) {
+  button, input, optgroup, select, textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    color: inherit;
+    background: none;
+  }
+
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    color: inherit;
+    background: none;
+  }
+
+  input:where(:not([type="button"], [type="reset"], [type="submit"])), select, textarea {
+    border: 1px solid;
+  }
+
+  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  :-moz-focusring {
     outline: auto;
   }
 
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
   progress {
     vertical-align: baseline;
   }
 
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
   summary {
     display: list-item;
   }
@@ -126,6 +549,19 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     list-style: none;
   }
 
+  textarea {
+    resize: vertical;
+  }
+
+  ::placeholder {
+    opacity: 1;
+    color: color-mix(in srgb, currentColor 50%, transparent);
+  }
+
+  :disabled {
+    cursor: default;
+  }
+
   img, svg, video, canvas, audio, iframe, embed, object {
     vertical-align: middle;
     display: block;
@@ -136,138 +572,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     height: auto;
   }
 
-  button, input, select, optgroup, textarea {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    opacity: 1;
-    background-color: #0000;
-    border-radius: 0;
-  }
-
-  ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    opacity: 1;
-    background-color: #0000;
-    border-radius: 0;
-  }
-
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-
-  ::placeholder {
-    opacity: 1;
-  }
-
-  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      ::placeholder {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-  }
-
-  textarea {
-    resize: vertical;
-  }
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-
-  ::-webkit-datetime-edit {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-year-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-month-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-day-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-hour-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-minute-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-second-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-millisecond-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-calendar-picker-indicator {
-    line-height: 1;
-  }
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  button, input:where([type="button"], [type="reset"], [type="submit"]) {
-    appearance: button;
-  }
-
-  ::file-selector-button {
-    appearance: button;
-  }
-
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  [hidden]:where(:not([hidden="until-found"])) {
+  [hidden] {
     display: none !important;
   }
 }
@@ -276,35 +581,53 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
 @layer utilities {
   .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    font-size: var(--font-size-2xl, 1.5rem);
+    line-height: var(--font-size-2xl--line-height, 2rem);
   }
 
   .text-black\\/50 {
-    color: #00000080;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .text-black\\/50 {
-      color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
+    color: color-mix(in srgb, var(--color-black, #000) 50%, transparent);
   }
 
   .underline {
     text-decoration-line: underline;
   }
 
-  @media (min-width: 96rem) {
+  @media (width >= 1536px) {
     .\\32 xl\\:font-bold {
-      --tw-font-weight: var(--font-weight-bold);
-      font-weight: var(--font-weight-bold);
+      font-weight: 700;
     }
   }
 }
 
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
-"
+
+@keyframes ping {
+  75%, 100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+    transform: translateY(-25%);
+  }
+
+  50% {
+    animation-timing-function: cubic-bezier(0, 0, .2, 1);
+    transform: none;
+  }
+}"
 `;
diff --git a/packages/@tailwindcss-postcss/src/ast.test.ts b/packages/@tailwindcss-postcss/src/ast.test.ts
deleted file mode 100644
index 8a2a5b019..000000000
--- a/packages/@tailwindcss-postcss/src/ast.test.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it } from 'vitest'
-import { toCss } from '../../tailwindcss/src/ast'
-import { parse } from '../../tailwindcss/src/css-parser'
-import { cssAstToPostCssAst, postCssAstToCssAst } from './ast'
-
-let css = dedent
-
-it('should convert a PostCSS AST into a Tailwind CSS AST', () => {
-  let input = css`
-    @charset "UTF-8";
-
-    @layer foo, bar, baz;
-
-    @import 'tailwindcss';
-
-    .foo {
-      color: red;
-
-      &:hover {
-        color: blue;
-      }
-
-      .bar {
-        color: green !important;
-        background-color: yellow;
-
-        @media (min-width: 640px) {
-          color: orange;
-        }
-      }
-    }
-  `
-
-  let ast = postcss.parse(input)
-  let transformedAst = postCssAstToCssAst(ast)
-
-  expect(toCss(transformedAst)).toMatchInlineSnapshot(`
-    "@charset "UTF-8";
-    @layer foo, bar, baz;
-    @import 'tailwindcss';
-    .foo {
-      color: red;
-      &:hover {
-        color: blue;
-      }
-      .bar {
-        color: green !important;
-        background-color: yellow;
-        @media (min-width: 640px) {
-          color: orange;
-        }
-      }
-    }
-    "
-  `)
-})
-
-it('should convert a Tailwind CSS AST into a PostCSS AST', () => {
-  let input = css`
-    @charset "UTF-8";
-
-    @layer foo, bar, baz;
-
-    @import 'tailwindcss';
-
-    .foo {
-      color: red;
-
-      &:hover {
-        color: blue;
-      }
-
-      .bar {
-        color: green !important;
-        background-color: yellow;
-
-        @media (min-width: 640px) {
-          color: orange;
-        }
-      }
-    }
-  `
-
-  let ast = parse(input)
-  let transformedAst = cssAstToPostCssAst(postcss, ast)
-
-  expect(transformedAst.toString()).toMatchInlineSnapshot(`
-    "@charset "UTF-8";
-    @layer foo, bar, baz;
-    @import 'tailwindcss';
-    .foo {
-        color: red;
-        &:hover {
-            color: blue;
-        }
-        .bar {
-            color: green !important;
-            background-color: yellow;
-            @media (min-width: 640px) {
-                color: orange;
-            }
-        }
-    }"
-  `)
-})
diff --git a/packages/@tailwindcss-postcss/src/ast.ts b/packages/@tailwindcss-postcss/src/ast.ts
deleted file mode 100644
index 7ca9e2add..000000000
--- a/packages/@tailwindcss-postcss/src/ast.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import type * as postcss from 'postcss'
-import { atRule, comment, decl, rule, type AstNode } from '../../tailwindcss/src/ast'
-import { createLineTable, type LineTable } from '../../tailwindcss/src/source-maps/line-table'
-import type { Source, SourceLocation } from '../../tailwindcss/src/source-maps/source'
-import { DefaultMap } from '../../tailwindcss/src/utils/default-map'
-
-const EXCLAMATION_MARK = 0x21
-
-export function cssAstToPostCssAst(
-  postcss: postcss.Postcss,
-  ast: AstNode[],
-  source?: postcss.Source,
-): postcss.Root {
-  let inputMap = new DefaultMap<Source, postcss.Input>((src) => {
-    return new postcss.Input(src.code, {
-      map: source?.input.map,
-      from: src.file ?? undefined,
-    })
-  })
-
-  let lineTables = new DefaultMap<Source, LineTable>((src) => createLineTable(src.code))
-
-  let root = postcss.root()
-  root.source = source
-
-  function toSource(loc: SourceLocation | undefined): postcss.Source | undefined {
-    // Use the fallback if this node has no location info in the AST
-    if (!loc) return
-    if (!loc[0]) return
-
-    let table = lineTables.get(loc[0])
-    let start = table.find(loc[1])
-    let end = table.find(loc[2])
-
-    return {
-      input: inputMap.get(loc[0]),
-      start: {
-        line: start.line,
-        column: start.column + 1,
-        offset: loc[1],
-      },
-      end: {
-        line: end.line,
-        column: end.column + 1,
-        offset: loc[2],
-      },
-    }
-  }
-
-  function updateSource(astNode: postcss.ChildNode, loc: SourceLocation | undefined) {
-    let source = toSource(loc)
-
-    // The `source` property on PostCSS nodes must be defined if present because
-    // `toJSON()` reads each property and tries to read from source.input if it
-    // sees a `source` property. This means for a missing or otherwise absent
-    // source it must be *missing* from the object rather than just `undefined`
-    if (source) {
-      astNode.source = source
-    } else {
-      delete astNode.source
-    }
-  }
-
-  function transform(node: AstNode, parent: postcss.Container) {
-    // Declaration
-    if (node.kind === 'declaration') {
-      let astNode = postcss.decl({
-        prop: node.property,
-        value: node.value ?? '',
-        important: node.important,
-      })
-      updateSource(astNode, node.src)
-      parent.append(astNode)
-    }
-
-    // Rule
-    else if (node.kind === 'rule') {
-      let astNode = postcss.rule({ selector: node.selector })
-      updateSource(astNode, node.src)
-      astNode.raws.semicolon = true
-      parent.append(astNode)
-      for (let child of node.nodes) {
-        transform(child, astNode)
-      }
-    }
-
-    // AtRule
-    else if (node.kind === 'at-rule') {
-      let astNode = postcss.atRule({ name: node.name.slice(1), params: node.params })
-      updateSource(astNode, node.src)
-      astNode.raws.semicolon = true
-      parent.append(astNode)
-      for (let child of node.nodes) {
-        transform(child, astNode)
-      }
-    }
-
-    // Comment
-    else if (node.kind === 'comment') {
-      let astNode = postcss.comment({ text: node.value })
-      // Spaces are encoded in our node.value already, no need to add additional
-      // spaces.
-      astNode.raws.left = ''
-      astNode.raws.right = ''
-      updateSource(astNode, node.src)
-      parent.append(astNode)
-    }
-
-    // AtRoot & Context should not happen
-    else if (node.kind === 'at-root' || node.kind === 'context') {
-    }
-
-    // Unknown
-    else {
-      node satisfies never
-    }
-  }
-
-  for (let node of ast) {
-    transform(node, root)
-  }
-
-  return root
-}
-
-export function postCssAstToCssAst(root: postcss.Root): AstNode[] {
-  let inputMap = new DefaultMap<postcss.Input, Source>((input) => ({
-    file: input.file ?? input.id ?? null,
-    code: input.css,
-  }))
-
-  function toSource(node: postcss.ChildNode): SourceLocation | undefined {
-    let source = node.source
-    if (!source) return
-
-    let input = source.input
-    if (!input) return
-    if (source.start === undefined) return
-    if (source.end === undefined) return
-
-    return [inputMap.get(input), source.start.offset, source.end.offset]
-  }
-
-  function transform(
-    node: postcss.ChildNode,
-    parent: Extract<AstNode, { nodes: AstNode[] }>['nodes'],
-  ) {
-    // Declaration
-    if (node.type === 'decl') {
-      let astNode = decl(node.prop, node.value, node.important)
-      astNode.src = toSource(node)
-      parent.push(astNode)
-    }
-
-    // Rule
-    else if (node.type === 'rule') {
-      let astNode = rule(node.selector)
-      astNode.src = toSource(node)
-      node.each((child) => transform(child, astNode.nodes))
-      parent.push(astNode)
-    }
-
-    // AtRule
-    else if (node.type === 'atrule') {
-      let astNode = atRule(`@${node.name}`, node.params)
-      astNode.src = toSource(node)
-      node.each((child) => transform(child, astNode.nodes))
-      parent.push(astNode)
-    }
-
-    // Comment
-    else if (node.type === 'comment') {
-      if (node.text.charCodeAt(0) !== EXCLAMATION_MARK) return
-      let astNode = comment(node.text)
-      astNode.src = toSource(node)
-      parent.push(astNode)
-    }
-
-    // Unknown
-    else {
-      node satisfies never
-    }
-  }
-
-  let ast: AstNode[] = []
-  root.each((node) => transform(node, ast))
-
-  return ast
-}
diff --git a/packages/@tailwindcss-postcss/src/fixtures/example-project/index.html b/packages/@tailwindcss-postcss/src/fixtures/example-project/index.html
index 9d8328479..30d3c6684 100644
--- a/packages/@tailwindcss-postcss/src/fixtures/example-project/index.html
+++ b/packages/@tailwindcss-postcss/src/fixtures/example-project/index.html
@@ -1 +1 @@
-<div class="underline 2xl:font-bold hocus:underline inverted:flex"></div>
+<div class="underline 2xl:font-bold"></div>
diff --git a/packages/@tailwindcss-postcss/src/fixtures/example-project/input.css b/packages/@tailwindcss-postcss/src/fixtures/example-project/input.css
deleted file mode 100644
index f1af498fc..000000000
--- a/packages/@tailwindcss-postcss/src/fixtures/example-project/input.css
+++ /dev/null
@@ -1 +0,0 @@
-/* the content for this file is set in the tests */
diff --git a/packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js b/packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js
deleted file mode 100644
index 085212671..000000000
--- a/packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = function ({ addVariant }) {
-  addVariant('inverted', '@media (inverted-colors: inverted)')
-  addVariant('hocus', ['&:focus', '&:hover'])
-}
diff --git a/packages/@tailwindcss-postcss/src/fixtures/example-project/src/relative-import.css b/packages/@tailwindcss-postcss/src/fixtures/example-project/src/relative-import.css
deleted file mode 100644
index 48a30ab4d..000000000
--- a/packages/@tailwindcss-postcss/src/fixtures/example-project/src/relative-import.css
+++ /dev/null
@@ -1 +0,0 @@
-@plugin '../plugin.js';
diff --git a/packages/@tailwindcss-postcss/src/index.cts b/packages/@tailwindcss-postcss/src/index.cts
deleted file mode 100644
index abc7c2e25..000000000
--- a/packages/@tailwindcss-postcss/src/index.cts
+++ /dev/null
@@ -1,7 +0,0 @@
-import tailwindcss from './index.ts'
-
-// This is used instead of `export default` to work around a bug in
-// `postcss-load-config`
-
-// @ts-ignore
-export = tailwindcss
diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts
index b393cc382..8896d255c 100644
--- a/packages/@tailwindcss-postcss/src/index.test.ts
+++ b/packages/@tailwindcss-postcss/src/index.test.ts
@@ -1,10 +1,6 @@
-import dedent from 'dedent'
-import { mkdir, mkdtemp, readFile, rm, unlink, writeFile } from 'node:fs/promises'
-import { tmpdir } from 'node:os'
-import path from 'path'
+import { unlink, writeFile } from 'node:fs/promises'
 import postcss from 'postcss'
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
-import { pretty } from '../../tailwindcss/src/test-utils/run'
+import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import tailwindcss from './index'
 
 // We give this file path to PostCSS for processing.
@@ -12,32 +8,23 @@ import tailwindcss from './index'
 // We place it in packages/ because Vitest runs in the monorepo root,
 // and packages/tailwindcss must be a sub-folder for
 // @import 'tailwindcss' to work.
-function inputCssFilePath() {
-  // Including the current test name to ensure that the cache is invalidated per
-  // test otherwise the cache will be used across tests.
-  return `${__dirname}/fixtures/example-project/input.css?test=${expect.getState().currentTestName}`
-}
+const INPUT_CSS_PATH = `${__dirname}/fixtures/example-project/input.css`
 
-const css = dedent
+const css = String.raw
 
-async function run(plugin: any, from: string, input: string): Promise<string> {
-  let ast = postcss.parse(input)
-  for (let runner of plugin.plugins) {
-    if (runner.Once) {
-      await runner.Once(ast, { postcss, result: { opts: { from }, messages: [] } })
-    }
-  }
-  return ast.toString()
-}
+beforeEach(async () => {
+  const { clearCache } = await import('@tailwindcss/oxide')
+  clearCache()
+})
 
 test("`@import 'tailwindcss'` is replaced with the generated CSS", async () => {
   let processor = postcss([
     tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
   ])
 
-  let result = await processor.process(`@import 'tailwindcss'`, { from: inputCssFilePath() })
+  let result = await processor.process(`@import 'tailwindcss'`, { from: INPUT_CSS_PATH })
 
-  expect(pretty(result.css)).toMatchSnapshot()
+  expect(result.css.trim()).toMatchSnapshot()
 
   // Check for dependency messages
   expect(result.messages).toContainEqual({
@@ -54,7 +41,7 @@ test("`@import 'tailwindcss'` is replaced with the generated CSS", async () => {
   })
   expect(result.messages).toContainEqual({
     type: 'dir-dependency',
-    dir: expect.stringMatching(/example-project[/|\\]src$/g),
+    dir: expect.stringMatching(/example-project\/src$/g),
     glob: expect.stringMatching(/^\*\*\/\*/g),
     parent: expect.any(String),
     plugin: expect.any(String),
@@ -66,6 +53,8 @@ test('output is optimized by Lightning CSS', async () => {
     tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
   ])
 
+  // `@apply` is used because Lightning is skipped if neither `@tailwind` nor
+  // `@apply` is used.
   let result = await processor.process(
     css`
       @layer utilities {
@@ -80,12 +69,11 @@ test('output is optimized by Lightning CSS', async () => {
         }
       }
     `,
-    { from: inputCssFilePath() },
+    { from: INPUT_CSS_PATH },
   )
 
-  expect(pretty(result.css)).toMatchInlineSnapshot(`
-    "
-    @layer utilities {
+  expect(result.css.trim()).toMatchInlineSnapshot(`
+    "@layer utilities {
       .foo {
         color: #000;
       }
@@ -93,8 +81,7 @@ test('output is optimized by Lightning CSS', async () => {
       .bar {
         color: red;
       }
-    }
-    "
+    }"
   `)
 })
 
@@ -103,44 +90,37 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
     tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
   ])
 
+  // `@apply` is used because Lightning is skipped if neither `@tailwind` nor
+  // `@apply` is used.
   let result = await processor.process(
     css`
-      @reference 'tailwindcss/theme.css';
+      @import 'tailwindcss/theme.css' reference;
       .foo {
         @apply text-red-500;
       }
     `,
-    { from: inputCssFilePath() },
+    { from: INPUT_CSS_PATH },
   )
 
-  expect(pretty(result.css)).toMatchInlineSnapshot(`
-    "
-    .foo {
-      color: var(--color-red-500, oklch(63.7% .237 25.331));
-    }
-    "
+  expect(result.css.trim()).toMatchInlineSnapshot(`
+    ".foo {
+      color: var(--color-red-500, #ef4444);
+    }"
   `)
 })
 
 describe('processing without specifying a base path', () => {
-  let filepath: string
-  let dir: string
+  let filepath = `${process.cwd()}/my-test-file.html`
 
-  beforeEach(async () => {
-    dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
-    await mkdir(dir, { recursive: true })
-    filepath = path.join(dir, 'my-test-file.html')
-    await writeFile(filepath, `<div class="md:[&:hover]:content-['testing_default_base_path']">`)
-  })
+  beforeEach(() =>
+    writeFile(filepath, `<div class="md:[&:hover]:content-['testing_default_base_path']">`),
+  )
   afterEach(() => unlink(filepath))
 
   test('the current working directory is used by default', async () => {
-    using spy = vi.spyOn(process, 'cwd')
-    spy.mockReturnValue(dir)
-
     let processor = postcss([tailwindcss({ optimize: { minify: false } })])
 
-    let result = await processor.process(`@import "tailwindcss"`, { from: inputCssFilePath() })
+    let result = await processor.process(`@import "tailwindcss"`, { from: INPUT_CSS_PATH })
 
     expect(result.css).toContain(
       ".md\\:\\[\\&\\:hover\\]\\:content-\\[\\'testing_default_base_path\\'\\]",
@@ -154,365 +134,3 @@ describe('processing without specifying a base path', () => {
     })
   })
 })
-
-test('fallback to `base` directory when `result.opts.from` is not provided', async () => {
-  using _ = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-  let processor = postcss([
-    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-  ])
-
-  let result = await processor.process(`@import 'tailwindcss'`)
-
-  expect(result.css.length).toBeGreaterThan(0)
-})
-
-describe('plugins', () => {
-  test('local CJS plugin', async () => {
-    let processor = postcss([
-      tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-    ])
-
-    let result = await processor.process(
-      css`
-        @import 'tailwindcss/utilities';
-        @plugin './plugin.js';
-      `,
-      { from: inputCssFilePath() },
-    )
-
-    expect(pretty(result.css)).toMatchInlineSnapshot(`
-      "
-      .underline {
-        text-decoration-line: underline;
-      }
-
-      @media (inverted-colors: inverted) {
-        .inverted\\:flex {
-          display: flex;
-        }
-      }
-
-      .hocus\\:underline:focus, .hocus\\:underline:hover {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  })
-
-  test('local CJS plugin from `@import`-ed file', async () => {
-    let processor = postcss([
-      tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-    ])
-
-    let result = await processor.process(
-      css`
-        @import 'tailwindcss/utilities';
-        @import '../example-project/src/relative-import.css';
-      `,
-      { from: `${__dirname}/fixtures/another-project/input.css` },
-    )
-
-    expect(pretty(result.css)).toMatchInlineSnapshot(`
-      "
-      .underline {
-        text-decoration-line: underline;
-      }
-
-      @media (inverted-colors: inverted) {
-        .inverted\\:flex {
-          display: flex;
-        }
-      }
-
-      .hocus\\:underline:focus, .hocus\\:underline:hover {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  })
-
-  test('published CJS plugin', async () => {
-    let processor = postcss([
-      tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-    ])
-
-    let result = await processor.process(
-      css`
-        @import 'tailwindcss/utilities';
-        @plugin 'internal-example-plugin';
-      `,
-      { from: inputCssFilePath() },
-    )
-
-    expect(pretty(result.css)).toMatchInlineSnapshot(`
-      "
-      .underline {
-        text-decoration-line: underline;
-      }
-
-      @media (inverted-colors: inverted) {
-        .inverted\\:flex {
-          display: flex;
-        }
-      }
-
-      .hocus\\:underline:focus, .hocus\\:underline:hover {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  })
-})
-
-test('bail early when Tailwind is not used', async () => {
-  let processor = postcss([
-    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-  ])
-
-  let result = await processor.process(
-    css`
-      .custom-css {
-        color: red;
-      }
-    `,
-    { from: inputCssFilePath() },
-  )
-
-  // `fixtures/example-project` includes an `underline` candidate. But since we
-  // didn't use `@tailwind utilities` we didn't scan for utilities.
-  expect(result.css).not.toContain('.underline {')
-
-  expect(pretty(result.css)).toMatchInlineSnapshot(`
-    "
-    .custom-css {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('handle CSS when only using a `@reference` (we should not bail early)', async () => {
-  let processor = postcss([
-    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-  ])
-
-  let result = await processor.process(
-    css`
-      @reference "tailwindcss/theme.css";
-
-      .foo {
-        @variant md {
-          bar: baz;
-        }
-      }
-    `,
-    { from: inputCssFilePath() },
-  )
-
-  expect(pretty(result.css)).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 48rem) {
-      .foo {
-        bar: baz;
-      }
-    }
-    "
-  `)
-})
-
-test('handle CSS when using a `@variant` using variants that do not rely on the `@theme`', async () => {
-  let processor = postcss([
-    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-  ])
-
-  let result = await processor.process(
-    css`
-      .foo {
-        @variant data-is-hoverable {
-          bar: baz;
-        }
-      }
-    `,
-    { from: inputCssFilePath() },
-  )
-
-  expect(pretty(result.css)).toMatchInlineSnapshot(`
-    "
-    .foo[data-is-hoverable] {
-      bar: baz;
-    }
-    "
-  `)
-})
-
-test('runs `Once` plugins in the right order', async () => {
-  let before = ''
-  let after = ''
-  let processor = postcss([
-    {
-      postcssPlugin: 'before',
-      Once(root) {
-        before = root.toString()
-      },
-    },
-    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-    {
-      postcssPlugin: 'after',
-      Once(root) {
-        after = root.toString()
-      },
-    },
-  ])
-
-  let result = await processor.process(
-    css`
-      @theme {
-        --color-red-500: red;
-      }
-      .custom-css {
-        color: theme(--color-red-500);
-      }
-    `,
-    { from: inputCssFilePath() },
-  )
-
-  expect(pretty(result.css)).toMatchInlineSnapshot(`
-    "
-    .custom-css {
-      color: red;
-    }
-    "
-  `)
-  expect(pretty(before)).toMatchInlineSnapshot(`
-    "
-    @theme {
-      --color-red-500: red;
-    }
-    .custom-css {
-      color: theme(--color-red-500);
-    }
-    "
-  `)
-  expect(pretty(after)).toMatchInlineSnapshot(`
-    "
-    .custom-css {
-      color: red;
-    }
-    "
-  `)
-})
-
-describe('concurrent builds', () => {
-  let dir: string
-  beforeEach(async () => {
-    dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
-    await writeFile(path.join(dir, 'index.html'), `<div class="underline"></div>`)
-    await writeFile(
-      path.join(dir, 'index.css'),
-      css`
-        @import './dependency.css';
-      `,
-    )
-    await writeFile(
-      path.join(dir, 'dependency.css'),
-      css`
-        @tailwind utilities;
-      `,
-    )
-  })
-  afterEach(() => rm(dir, { recursive: true, force: true }))
-
-  test('does experience a race-condition when calling the plugin two times for the same change', async () => {
-    using spy = vi.spyOn(process, 'cwd')
-    spy.mockReturnValue(dir)
-
-    let from = path.join(dir, 'index.css')
-    let input = (await readFile(path.join(dir, 'index.css'))).toString()
-
-    let plugin = tailwindcss({ optimize: { minify: false } })
-
-    let result = await run(plugin, from, input)
-
-    expect(result).toContain('.underline')
-
-    // Ensure that the mtime is updated
-    await new Promise((resolve) => setTimeout(resolve, 100))
-    await writeFile(
-      path.join(dir, 'dependency.css'),
-      css`
-        @tailwind utilities;
-        .red {
-          color: red;
-        }
-      `,
-    )
-
-    let promise1 = run(plugin, from, input)
-    let promise2 = run(plugin, from, input)
-
-    expect(await promise1).toContain('.red')
-    expect(await promise2).toContain('.red')
-  })
-})
-
-test('rebuilds when the input CSS changes even if the `from` file on disk did not', async () => {
-  let dir = await mkdtemp(path.join(tmpdir(), 'tw-postcss'))
-  // The `from` file exists on disk with a stable mtime. The input CSS is handed
-  // to the plugin directly (as a preprocessor like Sass would produce it), so it
-  // can change without `from`'s mtime ever changing.
-  await writeFile(path.join(dir, 'index.css'), '')
-
-  let from = path.join(dir, 'index.css')
-  let plugin = tailwindcss({ base: dir, optimize: { minify: false } })
-
-  let first = await run(
-    plugin,
-    from,
-    css`
-      @tailwind utilities;
-      .first {
-        @apply underline;
-      }
-    `,
-  )
-  let second = await run(
-    plugin,
-    from,
-    css`
-      @tailwind utilities;
-      .second {
-        @apply line-through;
-      }
-    `,
-  )
-
-  expect(first).toContain('.first')
-  expect(second).toContain('.second')
-
-  await rm(dir, { recursive: true, force: true })
-})
-
-test('does not register the input file as a dependency, even if it is passed in as relative path', async () => {
-  let processor = postcss([
-    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
-  ])
-
-  let result = await processor.process(`@tailwind utilities`, { from: './input.css' })
-
-  expect(pretty(result.css)).toMatchInlineSnapshot(`
-    "
-    .underline {
-      text-decoration-line: underline;
-    }
-    "
-  `)
-
-  // Check for dependency messages
-  expect(result.messages).not.toContainEqual({
-    type: 'dependency',
-    file: expect.stringMatching(/input.css$/g),
-    parent: expect.any(String),
-    plugin: expect.any(String),
-  })
-})
diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts
index a4a8d9326..fbaeb0bd8 100644
--- a/packages/@tailwindcss-postcss/src/index.ts
+++ b/packages/@tailwindcss-postcss/src/index.ts
@@ -1,374 +1,150 @@
-import QuickLRU from '@alloc/quick-lru'
-import {
-  compileAst,
-  env,
-  Features,
-  Instrumentation,
-  optimize as optimizeCss,
-  Polyfills,
-} from '@tailwindcss/node'
-import { clearRequireCache } from '@tailwindcss/node/require-cache'
-import { Scanner } from '@tailwindcss/oxide'
-import fs from 'node:fs'
-import path, { relative } from 'node:path'
-import type { AcceptedPlugin, PluginCreator, Postcss, Root } from 'postcss'
-import { toCss, type AstNode } from '../../tailwindcss/src/ast'
-import { cssAstToPostCssAst, postCssAstToCssAst } from './ast'
-import fixRelativePathsPlugin from './postcss-fix-relative-paths'
+import { scanDir } from '@tailwindcss/oxide'
+import fs from 'fs'
+import postcss, { type AcceptedPlugin, type PluginCreator } from 'postcss'
+import postcssImport from 'postcss-import'
+import { compile, optimizeCss } from 'tailwindcss'
 
-const DEBUG = env.DEBUG
-
-interface CacheEntry {
-  mtimes: Map<string, number>
-  inputCss: string
-  compiler: null | ReturnType<typeof compileAst>
-  scanner: null | Scanner
-  tailwindCssAst: AstNode[]
-  cachedPostCssAst: Root
-  optimizedPostCssAst: Root
-  fullRebuildPaths: string[]
-}
-const cache = new QuickLRU<string, CacheEntry>({ maxSize: 50 })
-
-function getContextFromCache(postcss: Postcss, inputFile: string, opts: PluginOptions): CacheEntry {
-  let key = `${inputFile}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
-  if (cache.has(key)) return cache.get(key)!
-  let entry = {
-    mtimes: new Map<string, number>(),
-    inputCss: '',
-    compiler: null,
-    scanner: null,
-
-    tailwindCssAst: [],
-    cachedPostCssAst: postcss.root(),
-    optimizedPostCssAst: postcss.root(),
-
-    fullRebuildPaths: [] as string[],
+/**
+ * A Map that can generate default values for keys that don't exist.
+ * Generated default values are added to the map to avoid recomputation.
+ */
+class DefaultMap<T = string, V = any> extends Map<T, V> {
+  constructor(private factory: (key: T, self: DefaultMap<T, V>) => V) {
+    super()
+  }
+
+  get(key: T): V {
+    let value = super.get(key)
+
+    if (value === undefined) {
+      value = this.factory(key, this)
+      this.set(key, value)
+    }
+
+    return value
   }
-  cache.set(key, entry)
-  return entry
 }
 
-export type PluginOptions = {
-  /**
-   * The base directory to scan for class candidates.
-   *
-   * Defaults to the current working directory.
-   */
+type PluginOptions = {
+  // The base directory to scan for class candidates.
   base?: string
 
-  /**
-   * Optimize and minify the output CSS.
-   */
+  // Optimize and minify the output CSS.
   optimize?: boolean | { minify?: boolean }
-
-  /**
-   * Enable or disable asset URL rewriting.
-   *
-   * Defaults to `true`.
-   */
-  transformAssetUrls?: boolean
 }
 
 function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
   let base = opts.base ?? process.cwd()
   let optimize = opts.optimize ?? process.env.NODE_ENV === 'production'
-  let shouldRewriteUrls = opts.transformAssetUrls ?? true
+
+  let cache = new DefaultMap(() => {
+    return {
+      mtimes: new Map<string, number>(),
+      build: null as null | ReturnType<typeof compile>['build'],
+      css: '',
+      optimizedCss: '',
+    }
+  })
 
   return {
     postcssPlugin: '@tailwindcss/postcss',
     plugins: [
-      // We need to handle the case where `postcss-import` might have run before
-      // the Tailwind CSS plugin is run. In this case, we need to manually fix
-      // relative paths before processing it in core.
-      fixRelativePathsPlugin(),
+      // We need to run `postcss-import` first to handle `@import` rules.
+      postcssImport(),
 
-      {
-        postcssPlugin: 'tailwindcss',
-        async Once(root, { result, postcss }) {
-          using I = new Instrumentation()
+      (root, result) => {
+        let inputFile = result.opts.from ?? ''
+        let context = cache.get(inputFile)
 
-          let inputFile = result.opts.from ?? ''
-          let isCSSModuleFile = inputFile.endsWith('.module.css')
-
-          DEBUG && I.start(`[@tailwindcss/postcss] ${relative(base, inputFile)}`)
-
-          // Bail out early if this is guaranteed to be a non-Tailwind CSS file.
-          {
-            DEBUG && I.start('Quick bail check')
-            let canBail = true
-            root.walkAtRules((node) => {
-              if (
-                node.name === 'import' ||
-                node.name === 'reference' ||
-                node.name === 'theme' ||
-                node.name === 'variant' ||
-                node.name === 'config' ||
-                node.name === 'plugin' ||
-                node.name === 'apply' ||
-                node.name === 'tailwind'
-              ) {
-                canBail = false
-                return false
-              }
-            })
-            if (canBail) return
-            DEBUG && I.end('Quick bail check')
-          }
-
-          let context = getContextFromCache(postcss, inputFile, opts)
-          let inputBasePath = inputFile ? path.dirname(path.resolve(inputFile)) : base
-
-          // Whether this is the first build or not, if it is, then we can
-          // optimize the build by not creating the compiler until we need it.
-          let isInitialBuild = context.compiler === null
-
-          async function createCompiler() {
-            DEBUG && I.start('Setup compiler')
-            if (context.fullRebuildPaths.length > 0 && !isInitialBuild) {
-              clearRequireCache(context.fullRebuildPaths)
-            }
-
-            context.fullRebuildPaths = []
-
-            DEBUG && I.start('PostCSS AST -> Tailwind CSS AST')
-            let ast = postCssAstToCssAst(root)
-            DEBUG && I.end('PostCSS AST -> Tailwind CSS AST')
-
-            DEBUG && I.start('Create compiler')
-            let compiler = await compileAst(ast, {
-              from: result.opts.from,
-              base: inputBasePath,
-              shouldRewriteUrls,
-              onDependency: (path) => context.fullRebuildPaths.push(path),
-              // In CSS Module files, we have to disable the `@property` polyfill since these will
-              // emit global `*` rules which are considered to be non-pure and will cause builds
-              // to fail.
-              polyfills: isCSSModuleFile ? Polyfills.All ^ Polyfills.AtProperty : Polyfills.All,
-            })
-            DEBUG && I.end('Create compiler')
-
-            DEBUG && I.end('Setup compiler')
-            return compiler
-          }
-
-          try {
-            // Setup the compiler if it doesn't exist yet. This way we can
-            // guarantee a `build()` function is available.
-            context.compiler ??= createCompiler()
-
-            if ((await context.compiler).features === Features.None) {
-              return
-            }
-
-            let rebuildStrategy: 'full' | 'incremental' = 'incremental'
-
-            // Track file modification times to CSS files
-            DEBUG && I.start('Register full rebuild paths')
-            {
-              for (let file of context.fullRebuildPaths) {
-                result.messages.push({
-                  type: 'dependency',
-                  plugin: '@tailwindcss/postcss',
-                  file: path.resolve(file),
-                  parent: result.opts.from,
-                })
-              }
-
-              let files = result.messages.flatMap((message) => {
-                if (message.type !== 'dependency') return []
-                return message.file
-              })
-              files.push(inputFile)
-
-              for (let file of files) {
-                let changedTime = fs.statSync(file, { throwIfNoEntry: false })?.mtimeMs ?? null
-                if (changedTime === null) {
-                  if (file === inputFile) {
-                    rebuildStrategy = 'full'
-                  }
-                  continue
-                }
-
-                let prevTime = context.mtimes.get(file)
-                if (prevTime === changedTime) continue
+        let rebuildStrategy: 'full' | 'incremental' = 'incremental'
 
+        // Track file modification times to CSS files
+        {
+          let files = result.messages.flatMap((message) => {
+            if (message.type !== 'dependency') return []
+            return message.file
+          })
+          files.push(inputFile)
+          for (let file of files) {
+            let changedTime = fs.statSync(file, { throwIfNoEntry: false })?.mtimeMs ?? null
+            if (changedTime === null) {
+              if (file === inputFile) {
                 rebuildStrategy = 'full'
-                context.mtimes.set(file, changedTime)
               }
-
-              // The mtimes above only track files on disk. When the input CSS is
-              // generated by another tool (e.g. Sass) and passed to `process()`,
-              // it can change without any tracked file's mtime changing, so also
-              // rebuild when the input CSS itself differs from the last build.
-              let inputCss = root.source?.input.css ?? root.toString()
-              if (context.inputCss !== inputCss) {
-                rebuildStrategy = 'full'
-                context.inputCss = inputCss
-              }
-            }
-            DEBUG && I.end('Register full rebuild paths')
-
-            if (
-              rebuildStrategy === 'full' &&
-              // We can reuse the compiler if it was created during the
-              // initial build. If it wasn't, we need to create a new one.
-              !isInitialBuild
-            ) {
-              context.compiler = createCompiler()
+              continue
             }
 
-            let compiler = await context.compiler
+            let prevTime = context.mtimes.get(file)
+            if (prevTime === changedTime) continue
 
-            if (context.scanner === null || rebuildStrategy === 'full') {
-              DEBUG && I.start('Setup scanner')
-              let sources = (() => {
-                // Disable auto source detection
-                if (compiler.root === 'none') {
-                  return []
-                }
-
-                // No root specified, use the base directory
-                if (compiler.root === null) {
-                  return [{ base, pattern: '**/*', negated: false }]
-                }
-
-                // Use the specified root
-                return [{ ...compiler.root, negated: false }]
-              })().concat(compiler.sources)
-
-              // Look for candidates used to generate the CSS
-              context.scanner = new Scanner({ sources })
-              DEBUG && I.end('Setup scanner')
-            }
-
-            DEBUG && I.start('Scan for candidates')
-            let candidates = compiler.features & Features.Utilities ? context.scanner.scan() : []
-            DEBUG && I.end('Scan for candidates')
-
-            if (compiler.features & Features.Utilities) {
-              DEBUG && I.start('Register dependency messages')
-              // Add all found files as direct dependencies
-              // Note: With Turbopack, the input file might not be a resolved path
-              let resolvedInputFile = path.resolve(base, inputFile)
-              for (let file of context.scanner.files) {
-                let absolutePath = path.resolve(file)
-                // The CSS file cannot be a dependency of itself
-                if (absolutePath === resolvedInputFile) {
-                  continue
-                }
-                result.messages.push({
-                  type: 'dependency',
-                  plugin: '@tailwindcss/postcss',
-                  file: absolutePath,
-                  parent: result.opts.from,
-                })
-              }
-
-              // Register dependencies so changes in `base` cause a rebuild while
-              // giving tools like Vite or Parcel a glob that can be used to limit
-              // the files that cause a rebuild to only those that match it.
-              for (let { base: globBase, pattern } of context.scanner.globs) {
-                // Avoid adding a dependency on the base directory itself, since it
-                // causes Next.js to start an endless recursion if the `distDir` is
-                // configured to anything other than the default `.next` dir.
-                if (pattern === '*' && base === globBase) {
-                  continue
-                }
-
-                if (pattern === '') {
-                  result.messages.push({
-                    type: 'dependency',
-                    plugin: '@tailwindcss/postcss',
-                    file: path.resolve(globBase),
-                    parent: result.opts.from,
-                  })
-                } else {
-                  result.messages.push({
-                    type: 'dir-dependency',
-                    plugin: '@tailwindcss/postcss',
-                    dir: path.resolve(globBase),
-                    glob: pattern,
-                    parent: result.opts.from,
-                  })
-                }
-              }
-              DEBUG && I.end('Register dependency messages')
-            }
-
-            DEBUG && I.start('Build utilities')
-            let tailwindCssAst = compiler.build(candidates)
-            DEBUG && I.end('Build utilities')
-
-            if (context.tailwindCssAst !== tailwindCssAst) {
-              if (optimize) {
-                DEBUG && I.start('Optimization')
-
-                DEBUG && I.start('AST -> CSS')
-                let css = toCss(tailwindCssAst)
-                DEBUG && I.end('AST -> CSS')
-
-                DEBUG && I.start('Lightning CSS')
-                let optimized = optimizeCss(css, {
-                  minify: typeof optimize === 'object' ? optimize.minify : true,
-                })
-                DEBUG && I.end('Lightning CSS')
-
-                DEBUG && I.start('CSS -> PostCSS AST')
-                context.optimizedPostCssAst = postcss.parse(optimized.code, result.opts)
-                DEBUG && I.end('CSS -> PostCSS AST')
-
-                DEBUG && I.end('Optimization')
-              } else {
-                // Convert our AST to a PostCSS AST
-                DEBUG && I.start('Transform Tailwind CSS AST into PostCSS AST')
-                context.cachedPostCssAst = cssAstToPostCssAst(postcss, tailwindCssAst, root.source)
-                DEBUG && I.end('Transform Tailwind CSS AST into PostCSS AST')
-              }
-            }
-
-            context.tailwindCssAst = tailwindCssAst
-
-            DEBUG && I.start('Update PostCSS AST')
-            root.removeAll()
-            root.append(
-              optimize
-                ? context.optimizedPostCssAst.clone().nodes
-                : context.cachedPostCssAst.clone().nodes,
-            )
-
-            // Trick PostCSS into thinking the indent is 2 spaces, so it uses that
-            // as the default instead of 4.
-            root.raws.indent = '  '
-            DEBUG && I.end('Update PostCSS AST')
-
-            DEBUG && I.end(`[@tailwindcss/postcss] ${relative(base, inputFile)}`)
-          } catch (error) {
-            // An error requires a full rebuild to fix
-            context.compiler = null
-
-            // Ensure all dependencies we have collected thus far are included so that the rebuild
-            // is correctly triggered
-            for (let file of context.fullRebuildPaths) {
-              result.messages.push({
-                type: 'dependency',
-                plugin: '@tailwindcss/postcss',
-                file: path.resolve(file),
-                parent: result.opts.from,
-              })
-            }
-
-            // We found that throwing the error will cause PostCSS to no longer watch for changes
-            // in some situations so we instead log the error and continue with an empty stylesheet.
-            console.error(error)
-
-            if (error && typeof error === 'object' && 'message' in error) {
-              throw root.error(`${error.message}`)
-            }
-
-            throw root.error(`${error}`)
+            rebuildStrategy = 'full'
+            context.mtimes.set(file, changedTime)
           }
-        },
+        }
+
+        let hasApply = false
+        let hasTailwind = false
+
+        root.walkAtRules((rule) => {
+          if (rule.name === 'apply') {
+            hasApply = true
+          } else if (rule.name === 'tailwind') {
+            hasApply = true
+            hasTailwind = true
+            // If we've found `@tailwind` then we already
+            // know we have to run a "full" build
+            return false
+          }
+        })
+
+        // Do nothing if neither `@tailwind` nor `@apply` is used
+        if (!hasTailwind && !hasApply) return
+
+        let css = ''
+
+        // Look for candidates used to generate the CSS
+        let { candidates, files, globs } = scanDir({ base, globs: true })
+
+        // Add all found files as direct dependencies
+        for (let file of files) {
+          result.messages.push({
+            type: 'dependency',
+            plugin: '@tailwindcss/postcss',
+            file,
+            parent: result.opts.from,
+          })
+        }
+
+        // Register dependencies so changes in `base` cause a rebuild while
+        // giving tools like Vite or Parcel a glob that can be used to limit
+        // the files that cause a rebuild to only those that match it.
+        for (let { base, glob } of globs) {
+          result.messages.push({
+            type: 'dir-dependency',
+            plugin: '@tailwindcss/postcss',
+            dir: base,
+            glob,
+            parent: result.opts.from,
+          })
+        }
+
+        if (rebuildStrategy === 'full') {
+          let { build } = compile(root.toString())
+          context.build = build
+          css = build(hasTailwind ? candidates : [])
+        } else if (rebuildStrategy === 'incremental') {
+          css = context.build!(candidates)
+        }
+
+        // Replace CSS
+        if (css !== context.css && optimize) {
+          context.optimizedCss = optimizeCss(css, {
+            minify: typeof optimize === 'object' ? optimize.minify : true,
+          })
+        }
+        context.css = css
+        root.removeAll()
+        root.append(postcss.parse(optimize ? context.optimizedCss : context.css, result.opts))
       },
     ],
   }
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/example-project/src/index.css b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/example-project/src/index.css
deleted file mode 100644
index b8c4fc5f1..000000000
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/example-project/src/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@source "./**/*.ts";
-@source "!./**/*.ts";
-@plugin "./plugin.js";
-@plugin "./what\"s-this.js";
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/example-project/src/invalid.css b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/example-project/src/invalid.css
deleted file mode 100644
index 9eeb9353e..000000000
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/example-project/src/invalid.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@plugin "/absolute/paths";
-@plugin "C:\Program Files\HAL 9000";
-@plugin "\\Media\Pictures\Worth\1000 words";
-@plugin "some-node-dep";
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/index.css b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/index.css
deleted file mode 100644
index 2c014767b..000000000
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/index.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../example-project/src/index.css';
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/invalid.css b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/invalid.css
deleted file mode 100644
index b69d455c0..000000000
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/invalid.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../example-project/src/invalid.css';
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/plugins-in-root.css b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/plugins-in-root.css
deleted file mode 100644
index d6d5f082c..000000000
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/plugins-in-root.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import './plugins-in-sibling.css';
-
-@plugin './plugin-in-root.ts';
-@plugin '../plugin-in-root.ts';
-@plugin 'plugin-in-root';
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/plugins-in-sibling.css b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/plugins-in-sibling.css
deleted file mode 100644
index 5df3cb061..000000000
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/fixtures/external-import/src/plugins-in-sibling.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@plugin './plugin-in-sibling.ts';
-@plugin '../plugin-in-sibling.ts';
-@plugin 'plugin-in-sibling';
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts
deleted file mode 100644
index fd90c483e..000000000
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import postcss from 'postcss'
-import atImport from 'postcss-import'
-import { describe, expect, test } from 'vitest'
-import fixRelativePathsPlugin from '.'
-import { pretty } from '../../../tailwindcss/src/test-utils/run'
-
-describe('fixRelativePathsPlugin', () => {
-  test('rewrites @source and @plugin to be relative to the initial css file', async () => {
-    let cssPath = path.join(__dirname, 'fixtures', 'external-import', 'src', 'index.css')
-    let css = fs.readFileSync(cssPath, 'utf-8')
-
-    let processor = postcss([atImport(), fixRelativePathsPlugin()])
-
-    let result = await processor.process(css, { from: cssPath })
-
-    expect(pretty(result.css)).toMatchInlineSnapshot(`
-      "
-      @source "../../example-project/src/**/*.ts";
-      @source "!../../example-project/src/**/*.ts";
-      @plugin "../../example-project/src/plugin.js";
-      @plugin "../../example-project/src/what\\"s-this.js";
-      "
-    `)
-  })
-
-  test('should not rewrite non-relative paths', async () => {
-    let cssPath = path.join(__dirname, 'fixtures', 'external-import', 'src', 'invalid.css')
-    let css = fs.readFileSync(cssPath, 'utf-8')
-
-    let processor = postcss([atImport(), fixRelativePathsPlugin()])
-
-    let result = await processor.process(css, { from: cssPath })
-
-    expect(pretty(result.css)).toMatchInlineSnapshot(`
-      "
-      @plugin "/absolute/paths";
-      @plugin "C:\\Program Files\\HAL 9000";
-      @plugin "\\\\Media\\Pictures\\Worth\\1000 words";
-      @plugin "some-node-dep";
-      "
-    `)
-  })
-
-  test('should return relative paths even if the file is resolved in the same basedir as the root stylesheet', async () => {
-    let cssPath = path.join(__dirname, 'fixtures', 'external-import', 'src', 'plugins-in-root.css')
-    let css = fs.readFileSync(cssPath, 'utf-8')
-
-    let processor = postcss([atImport(), fixRelativePathsPlugin()])
-
-    let result = await processor.process(css, { from: cssPath })
-
-    expect(pretty(result.css)).toMatchInlineSnapshot(`
-      "
-      @plugin './plugin-in-sibling.ts';
-      @plugin '../plugin-in-sibling.ts';
-      @plugin 'plugin-in-sibling';
-
-      @plugin './plugin-in-root.ts';
-      @plugin '../plugin-in-root.ts';
-      @plugin 'plugin-in-root';
-      "
-    `)
-  })
-})
diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts
deleted file mode 100644
index 68dcb5551..000000000
--- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { normalizePath } from '@tailwindcss/node'
-import path from 'node:path'
-import type { AtRule, Plugin } from 'postcss'
-
-const SINGLE_QUOTE = "'"
-const DOUBLE_QUOTE = '"'
-
-export default function fixRelativePathsPlugin(): Plugin {
-  // Retain a list of touched at-rules to avoid infinite loops
-  let touched: WeakSet<AtRule> = new WeakSet()
-
-  function fixRelativePath(atRule: AtRule) {
-    let rootPath = atRule.root().source?.input.file
-    if (!rootPath) {
-      return
-    }
-
-    let inputFilePath = atRule.source?.input.file
-    if (!inputFilePath) {
-      return
-    }
-
-    if (touched.has(atRule)) {
-      return
-    }
-
-    let value = atRule.params[0]
-
-    let quote =
-      value[0] === DOUBLE_QUOTE && value[value.length - 1] === DOUBLE_QUOTE
-        ? DOUBLE_QUOTE
-        : value[0] === SINGLE_QUOTE && value[value.length - 1] === SINGLE_QUOTE
-          ? SINGLE_QUOTE
-          : null
-    if (!quote) {
-      return
-    }
-    let glob = atRule.params.slice(1, -1)
-
-    // Handle eventual negative rules. We only support one level of negation.
-    let negativePrefix = ''
-    if (glob.startsWith('!')) {
-      glob = glob.slice(1)
-      negativePrefix = '!'
-    }
-
-    // We only want to rewrite relative paths.
-    if (!glob.startsWith('./') && !glob.startsWith('../')) {
-      return
-    }
-
-    let absoluteGlob = path.posix.join(normalizePath(path.dirname(inputFilePath)), glob)
-    let absoluteRootPosixPath = path.posix.dirname(normalizePath(rootPath))
-
-    let relative = path.posix.relative(absoluteRootPosixPath, absoluteGlob)
-
-    // If the path points to a file in the same directory, `path.relative` will
-    // remove the leading `./` and we need to add it back in order to still
-    // consider the path relative
-    if (!relative.startsWith('.')) {
-      relative = './' + relative
-    }
-
-    atRule.params = quote + negativePrefix + relative + quote
-    touched.add(atRule)
-  }
-
-  return {
-    postcssPlugin: 'tailwindcss-postcss-fix-relative-paths',
-    Once(root) {
-      root.walkAtRules(/source|plugin|config/, fixRelativePath)
-    },
-  }
-}
diff --git a/packages/@tailwindcss-postcss/tsconfig.json b/packages/@tailwindcss-postcss/tsconfig.json
index d2131cbeb..6ae022f65 100644
--- a/packages/@tailwindcss-postcss/tsconfig.json
+++ b/packages/@tailwindcss-postcss/tsconfig.json
@@ -1,6 +1,3 @@
 {
   "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "verbatimModuleSyntax": false,
-  },
 }
diff --git a/packages/@tailwindcss-postcss/tsup.config.ts b/packages/@tailwindcss-postcss/tsup.config.ts
deleted file mode 100644
index 684c072ac..000000000
--- a/packages/@tailwindcss-postcss/tsup.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig([
-  {
-    format: ['esm'],
-    minify: true,
-    cjsInterop: true,
-    dts: true,
-    entry: ['src/index.ts'],
-  },
-  {
-    format: ['cjs'],
-    minify: true,
-    cjsInterop: true,
-    dts: true,
-    entry: ['src/index.cts'],
-  },
-])
diff --git a/packages/@tailwindcss-standalone/package.json b/packages/@tailwindcss-standalone/package.json
deleted file mode 100644
index 24f8c93c7..000000000
--- a/packages/@tailwindcss-standalone/package.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "name": "@tailwindcss/standalone",
-  "version": "4.3.3",
-  "private": true,
-  "description": "Standalone CLI for Tailwind CSS",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "packages/@tailwindcss-standalone"
-  },
-  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
-  "homepage": "https://tailwindcss.com",
-  "scripts": {
-    "lint": "tsc --noEmit",
-    "build": "bun ./scripts/build.ts"
-  },
-  "bin": {
-    "tailwindcss": "./dist/index.mjs"
-  },
-  "exports": {
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/cli": "workspace:*",
-    "@tailwindcss/forms": "^0.5.11",
-    "@tailwindcss/typography": "^0.5.20",
-    "detect-libc": "1.0.3",
-    "enhanced-resolve": "catalog:",
-    "tailwindcss": "workspace:*"
-  },
-  "__notes": "These binary packages must be included so Bun can build the CLI for all supported platforms. We also rely on Lightning CSS and Parcel being patched so Bun can statically analyze the executables.",
-  "devDependencies": {
-    "@parcel/watcher-darwin-arm64": "catalog:",
-    "@parcel/watcher-darwin-x64": "catalog:",
-    "@parcel/watcher-linux-arm64-glibc": "catalog:",
-    "@parcel/watcher-linux-arm64-musl": "catalog:",
-    "@parcel/watcher-linux-x64-glibc": "catalog:",
-    "@parcel/watcher-linux-x64-musl": "catalog:",
-    "@parcel/watcher-win32-x64": "catalog:",
-    "@types/bun": "^1.3.14",
-    "bun": "^1.3.14",
-    "lightningcss-darwin-arm64": "catalog:",
-    "lightningcss-darwin-x64": "catalog:",
-    "lightningcss-linux-arm64-gnu": "catalog:",
-    "lightningcss-linux-arm64-musl": "catalog:",
-    "lightningcss-linux-x64-gnu": "catalog:",
-    "lightningcss-linux-x64-musl": "catalog:",
-    "lightningcss-win32-x64-msvc": "catalog:"
-  }
-}
diff --git a/packages/@tailwindcss-standalone/scripts/build.ts b/packages/@tailwindcss-standalone/scripts/build.ts
deleted file mode 100644
index 0aee26435..000000000
--- a/packages/@tailwindcss-standalone/scripts/build.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { createHash } from 'node:crypto'
-import { mkdir, readFile, writeFile } from 'node:fs/promises'
-import * as path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
-
-// Workaround for Bun binary downloads failing on Windows CI when
-// USERPROFILE is passed through by Turborepo.
-//
-// Unfortunately, setting this at runtime doesn't appear to work so we have to
-// spawn a new process without the env var.
-if (process.env.NESTED_BUILD !== '1' && process.env.USERPROFILE && process.env.USERPROFILE !== '') {
-  let result = await Bun.$`bun ${fileURLToPath(import.meta.url)}`.env({
-    USERPROFILE: '',
-    NESTED_BUILD: '1',
-  })
-
-  process.exit(result.exitCode)
-}
-
-// We use baseline builds for all x64 platforms to ensure compatibility with
-// older hardware.
-let builds: { target: Bun.Build.Target; name: string }[] = [
-  { name: 'tailwindcss-linux-arm64', target: 'bun-linux-arm64' },
-  { name: 'tailwindcss-linux-arm64-musl', target: 'bun-linux-arm64-musl' },
-  // @ts-expect-error: Either the types are wrong or the runtime needs to be updated
-  // to accept a `-glibc` at the end like the types suggest.
-  { name: 'tailwindcss-linux-x64', target: 'bun-linux-x64-baseline' },
-  { name: 'tailwindcss-linux-x64-musl', target: 'bun-linux-x64-baseline-musl' },
-  { name: 'tailwindcss-macos-arm64', target: 'bun-darwin-arm64' },
-  { name: 'tailwindcss-macos-x64', target: 'bun-darwin-x64-baseline' },
-  { name: 'tailwindcss-windows-x64.exe', target: 'bun-windows-x64-baseline' },
-]
-
-let summary: { target: Bun.Build.Target; name: string; sum: string }[] = []
-
-// Build platform binaries and checksum them.
-let start = process.hrtime.bigint()
-for (let { target, name } of builds) {
-  let outfile = path.resolve(__dirname, `../dist/${name}`)
-
-  let result = await Bun.build({
-    entrypoints: ['./src/index.ts'],
-    target: 'node',
-    minify: {
-      whitespace: false,
-      syntax: true,
-      identifiers: false,
-      keepNames: true,
-    },
-
-    define: {
-      // This ensures only necessary binaries are bundled for linux targets
-      // It reduces binary size since no runtime selection is necessary
-      'process.env.PLATFORM_LIBC': JSON.stringify(target.includes('-musl') ? 'musl' : 'glibc'),
-
-      // This prevents the WASI build from being bundled with the binary
-      'process.env.NAPI_RS_FORCE_WASI': JSON.stringify(''),
-
-      // This simplifies the Oxide loading code a small amount
-      'process.env.NAPI_RS_NATIVE_LIBRARY_PATH': JSON.stringify(''),
-    },
-
-    compile: {
-      target,
-      outfile,
-
-      // Disable .env loading
-      autoloadDotenv: false,
-
-      // Disable bunfig.toml loading
-      autoloadBunfig: false,
-    },
-
-    plugins: [
-      {
-        name: 'tailwindcss-plugin',
-        setup(build) {
-          build.onLoad({ filter: /tailwindcss-oxide\.wasi\.cjs$/ }, async (args) => {
-            return { contents: '' }
-          })
-        },
-      },
-    ],
-  })
-
-  let entry = result.outputs.find((output) => output.kind === 'entry-point')
-  if (!entry) throw new Error(`Build failed for ${target}`)
-
-  let content = await readFile(outfile)
-
-  summary.push({
-    target,
-    name,
-    sum: createHash('sha256').update(content).digest('hex'),
-  })
-}
-
-await mkdir(path.resolve(__dirname, '../dist'), { recursive: true })
-
-// Write the checksums to a file
-let sumsFile = path.resolve(__dirname, '../dist/sha256sums.txt')
-let sums = summary.map(({ name, sum }) => `${sum}  ./${name}`)
-
-await writeFile(sumsFile, sums.join('\n') + '\n')
-
-console.table(summary.map(({ target, sum }) => ({ target, sum })))
-
-let elapsed = process.hrtime.bigint() - start
-console.log(`Build completed in ${(Number(elapsed) / 1e6).toFixed(0)}ms`)
diff --git a/packages/@tailwindcss-standalone/src/index.ts b/packages/@tailwindcss-standalone/src/index.ts
deleted file mode 100644
index 23a928f8b..000000000
--- a/packages/@tailwindcss-standalone/src/index.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { createRequire } from 'node:module'
-import packageJson from 'tailwindcss/package.json'
-
-import indexCss from 'tailwindcss/index.css' with { type: 'file' }
-import preflightCss from 'tailwindcss/preflight.css' with { type: 'file' }
-import themeCss from 'tailwindcss/theme.css' with { type: 'file' }
-import utilitiesCss from 'tailwindcss/utilities.css' with { type: 'file' }
-
-const localResolve = createRequire(import.meta.url).resolve
-
-globalThis.__tw_resolve = (id, baseDir) => {
-  let isEmbeddedFileBase = baseDir === '/$bunfs/root' || baseDir?.includes(':/~BUN/root')
-  const likelyEmbeddedFile =
-    id === 'tailwindcss' ||
-    id.startsWith('tailwindcss/') ||
-    id.startsWith('@tailwindcss/') ||
-    isEmbeddedFileBase
-
-  if (!likelyEmbeddedFile) {
-    return false
-  }
-
-  id = id.startsWith('tailwindcss/')
-    ? id.slice(12)
-    : isEmbeddedFileBase && id.startsWith('./')
-      ? id.slice(2)
-      : id
-
-  switch (id) {
-    case 'index':
-    case 'index.css':
-    case 'tailwindcss':
-      return localResolve(indexCss)
-    case 'theme':
-    case 'theme.css':
-      return localResolve(themeCss)
-    case 'preflight':
-    case 'preflight.css':
-      return localResolve(preflightCss)
-    case 'utilities':
-    case 'utilities.css':
-      return localResolve(utilitiesCss)
-    case '@tailwindcss/forms':
-    case '@tailwindcss/typography':
-    case '@tailwindcss/aspect-ratio':
-      return id
-    default:
-      return false
-  }
-}
-globalThis.__tw_load = async (id) => {
-  if (id.endsWith('@tailwindcss/forms')) {
-    return require('@tailwindcss/forms')
-  } else if (id.endsWith('@tailwindcss/typography')) {
-    return require('@tailwindcss/typography')
-  } else if (id.endsWith('@tailwindcss/aspect-ratio')) {
-    return require('@tailwindcss/aspect-ratio')
-  } else {
-    return undefined
-  }
-}
-globalThis.__tw_version = packageJson.version
-
-// We use a plugin to make sure that the JS APIs are bundled with the standalone
-// CLI and can be imported inside configs and plugins
-Bun.plugin({
-  name: 'bundle-tailwindcss-apis',
-  target: 'bun',
-  async setup(build) {
-    // These imports must be static strings otherwise they won't be bundled
-    let bundled = {
-      tailwindcss: await import('tailwindcss'),
-      'tailwindcss/colors': await import('tailwindcss/colors'),
-      'tailwindcss/colors.js': await import('tailwindcss/colors'),
-      'tailwindcss/plugin': await import('tailwindcss/plugin'),
-      'tailwindcss/plugin.js': await import('tailwindcss/plugin'),
-      'tailwindcss/package.json': await import('tailwindcss/package.json'),
-      'tailwindcss/lib/util/flattenColorPalette':
-        await import('tailwindcss/lib/util/flattenColorPalette'),
-      'tailwindcss/lib/util/flattenColorPalette.js':
-        await import('tailwindcss/lib/util/flattenColorPalette'),
-      'tailwindcss/defaultTheme': await import('tailwindcss/defaultTheme'),
-      'tailwindcss/defaultTheme.js': await import('tailwindcss/defaultTheme'),
-    }
-
-    for (let [id, exports] of Object.entries(bundled)) {
-      build.module(id, () => ({
-        loader: 'object',
-        exports: {
-          ...exports,
-          __esModule: true,
-        },
-      }))
-    }
-  },
-})
-
-await import('../../@tailwindcss-cli/src/index.ts')
diff --git a/packages/@tailwindcss-standalone/src/types.d.ts b/packages/@tailwindcss-standalone/src/types.d.ts
deleted file mode 100644
index 0b5deb6ea..000000000
--- a/packages/@tailwindcss-standalone/src/types.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-declare module '*.css' {
-  const content: string
-  export default content
-}
-
-declare var __tw_version: string | undefined
-declare var __tw_resolve: undefined | ((id: string, base?: string) => string | false)
-declare var __tw_readFile:
-  undefined | ((path: string, encoding: BufferEncoding) => Promise<string | undefined>)
-declare var __tw_load: undefined | ((path: string) => Promise<object | undefined>)
diff --git a/packages/@tailwindcss-standalone/tsconfig.json b/packages/@tailwindcss-standalone/tsconfig.json
deleted file mode 100644
index 6ae022f65..000000000
--- a/packages/@tailwindcss-standalone/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-}
diff --git a/packages/@tailwindcss-turbopack/README.md b/packages/@tailwindcss-turbopack/README.md
deleted file mode 100644
index ee54b4d03..000000000
--- a/packages/@tailwindcss-turbopack/README.md
+++ /dev/null
@@ -1,99 +0,0 @@
-<p align="center">
-  <a href="https://tailwindcss.com" target="_blank">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
-      <img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
-    </picture>
-  </a>
-</p>
-
-<p align="center">
-  A utility-first CSS framework for rapidly building custom user interfaces.
-</p>
-
-<p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
-    <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
-</p>
-
----
-
-## Documentation
-
-For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
-
-## Community
-
-For help, discussion about best practices, or feature ideas:
-
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
-
-## Contributing
-
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
-
----
-
-## @tailwindcss/turbopack
-
-A Turbopack loader for Tailwind CSS v4.
-
-## Installation
-
-```sh
-npm install @tailwindcss/turbopack
-```
-
-### Usage
-
-```javascript
-// next.config.js
-module.exports = {
-  turbopack: {
-    rules: {
-      '*.css': {
-        loaders: ['@tailwindcss/turbopack'],
-        as: '*.css',
-      },
-    },
-  },
-}
-```
-
-Then create a CSS file that imports Tailwind:
-
-```css
-/* src/index.css */
-@import 'tailwindcss';
-```
-
-### Options
-
-#### `base`
-
-The base directory to scan for class candidates. Defaults to the current working directory.
-
-```javascript
-{
-  loader: '@tailwindcss/turbopack',
-  options: {
-    base: process.cwd(),
-  },
-}
-```
-
-#### `optimize`
-
-Whether to optimize and minify the output CSS. Defaults to `true` in production mode.
-
-```javascript
-{
-  loader: '@tailwindcss/turbopack',
-  options: {
-    optimize: true, // or { minify: true }
-  },
-}
-```
diff --git a/packages/@tailwindcss-turbopack/package.json b/packages/@tailwindcss-turbopack/package.json
deleted file mode 100644
index abdbbe90e..000000000
--- a/packages/@tailwindcss-turbopack/package.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "name": "@tailwindcss/turbopack",
-  "version": "4.3.3",
-  "description": "A Turbopack loader for Tailwind CSS v4.",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "packages/@tailwindcss-turbopack"
-  },
-  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
-  "homepage": "https://tailwindcss.com",
-  "scripts": {
-    "build": "tsup-node",
-    "dev": "pnpm run build -- --watch"
-  },
-  "files": [
-    "dist/"
-  ],
-  "publishConfig": {
-    "provenance": true,
-    "access": "public"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
-  },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "dependencies": {
-    "@alloc/quick-lru": "^5.2.0",
-    "@tailwindcss/node": "workspace:*",
-    "@tailwindcss/oxide": "workspace:*",
-    "tailwindcss": "workspace:*"
-  },
-  "devDependencies": {
-    "@types/node": "catalog:",
-    "webpack": "catalog:"
-  }
-}
diff --git a/packages/@tailwindcss-turbopack/src/index.cts b/packages/@tailwindcss-turbopack/src/index.cts
deleted file mode 100644
index dbdded748..000000000
--- a/packages/@tailwindcss-turbopack/src/index.cts
+++ /dev/null
@@ -1,5 +0,0 @@
-import tailwindLoader from './index.ts'
-
-// CommonJS export for webpack loaders - must be the function directly
-// @ts-ignore
-export = tailwindLoader
diff --git a/packages/@tailwindcss-turbopack/src/index.ts b/packages/@tailwindcss-turbopack/src/index.ts
deleted file mode 100644
index a70f28871..000000000
--- a/packages/@tailwindcss-turbopack/src/index.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-import QuickLRU from '@alloc/quick-lru'
-import {
-  compile,
-  env,
-  Features,
-  Instrumentation,
-  normalizePath,
-  optimize,
-  Polyfills,
-} from '@tailwindcss/node'
-import { clearRequireCache } from '@tailwindcss/node/require-cache'
-import { Scanner } from '@tailwindcss/oxide'
-import fs from 'node:fs'
-import path from 'node:path'
-import type { LoaderContext } from 'webpack'
-
-const DEBUG = env.DEBUG
-
-export interface LoaderOptions {
-  /**
-   * The base directory to scan for class candidates.
-   *
-   * Defaults to the current working directory.
-   */
-  base?: string
-
-  /**
-   * Optimize and minify the output CSS.
-   */
-  optimize?: boolean | { minify?: boolean }
-}
-
-interface CacheEntry {
-  mtimes: Map<string, number>
-  compiler: null | Awaited<ReturnType<typeof compile>>
-  scanner: null | Scanner
-  candidates: Set<string>
-  fullRebuildPaths: string[]
-}
-
-const cache = new QuickLRU<string, CacheEntry>({ maxSize: 50 })
-
-function getCacheKey(resourceId: string, opts: LoaderOptions): string {
-  return `${resourceId}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
-}
-
-function getContextFromCache(resourceId: string, opts: LoaderOptions): CacheEntry {
-  let key = getCacheKey(resourceId, opts)
-  if (cache.has(key)) return cache.get(key)!
-  let entry: CacheEntry = {
-    mtimes: new Map<string, number>(),
-    compiler: null,
-    scanner: null,
-    candidates: new Set<string>(),
-    fullRebuildPaths: [],
-  }
-  cache.set(key, entry)
-  return entry
-}
-
-export default async function tailwindLoader(
-  this: LoaderContext<LoaderOptions>,
-  source: string,
-): Promise<void> {
-  let callback = this.async()
-  let options = this.getOptions() ?? {}
-  let inputFile = this.resourcePath
-  let resourceId = this.resource
-  let base = options.base ?? process.cwd()
-  let shouldOptimize = options.optimize ?? process.env.NODE_ENV === 'production'
-  let isCSSModuleFile = inputFile.endsWith('.module.css')
-
-  using I = new Instrumentation()
-
-  DEBUG && I.start(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
-
-  // Bail out early if this is guaranteed to be a non-Tailwind CSS file.
-  {
-    DEBUG && I.start('Quick bail check')
-    let canBail = !/@(import|reference|theme|variant|config|plugin|apply|tailwind)\b/.test(source)
-    if (canBail) {
-      DEBUG && I.end('Quick bail check')
-      DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
-      callback(null, source)
-      return
-    }
-    DEBUG && I.end('Quick bail check')
-  }
-
-  try {
-    let context = getContextFromCache(resourceId, options)
-    let inputBasePath = path.dirname(path.resolve(inputFile))
-
-    // Whether this is the first build or not
-    let isInitialBuild = context.compiler === null
-
-    async function createCompiler() {
-      DEBUG && I.start('Setup compiler')
-      if (context.fullRebuildPaths.length > 0 && !isInitialBuild) {
-        clearRequireCache(context.fullRebuildPaths)
-      }
-
-      context.fullRebuildPaths = []
-
-      DEBUG && I.start('Create compiler')
-      let compiler = await compile(source, {
-        from: inputFile,
-        base: inputBasePath,
-        shouldRewriteUrls: true,
-        onDependency: (depPath) => context.fullRebuildPaths.push(depPath),
-        // In CSS Module files, we have to disable the `@property` polyfill since these will
-        // emit global `*` rules which are considered to be non-pure and will cause builds
-        // to fail.
-        polyfills: isCSSModuleFile ? Polyfills.All ^ Polyfills.AtProperty : Polyfills.All,
-      })
-      DEBUG && I.end('Create compiler')
-
-      DEBUG && I.end('Setup compiler')
-      return compiler
-    }
-
-    // Setup the compiler if it doesn't exist yet
-    context.compiler ??= await createCompiler()
-
-    // Early exit if no Tailwind features are used
-    if (context.compiler.features === Features.None) {
-      DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
-      callback(null, source)
-      return
-    }
-
-    let rebuildStrategy: 'full' | 'incremental' = 'incremental'
-
-    // Track file modification times to CSS files
-    DEBUG && I.start('Register full rebuild paths')
-    {
-      // Report dependencies for config files, plugins, etc.
-      for (let file of context.fullRebuildPaths) {
-        this.addDependency(path.resolve(file))
-      }
-
-      let files = [...context.fullRebuildPaths, inputFile]
-
-      for (let file of files) {
-        let changedTime: number | null = null
-        try {
-          changedTime = fs.statSync(file)?.mtimeMs ?? null
-        } catch {
-          // File might not exist
-        }
-
-        if (changedTime === null) {
-          if (file === inputFile) {
-            rebuildStrategy = 'full'
-          }
-          continue
-        }
-
-        let prevTime = context.mtimes.get(file)
-        if (prevTime === changedTime) continue
-
-        rebuildStrategy = 'full'
-        context.mtimes.set(file, changedTime)
-      }
-    }
-    DEBUG && I.end('Register full rebuild paths')
-
-    if (rebuildStrategy === 'full' && !isInitialBuild) {
-      context.compiler = await createCompiler()
-    }
-
-    let compiler = context.compiler
-
-    // Check if we need to process this file at all
-    if (
-      !(
-        compiler.features &
-        (Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
-      )
-    ) {
-      DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
-      callback(null, source)
-      return
-    }
-
-    // Setup or update scanner if needed
-    if (context.scanner === null || rebuildStrategy === 'full') {
-      DEBUG && I.start('Setup scanner')
-      let sources = (() => {
-        // Disable auto source detection
-        if (compiler.root === 'none') {
-          return []
-        }
-
-        // No root specified, use the base directory
-        if (compiler.root === null) {
-          return [{ base, pattern: '**/*', negated: false }]
-        }
-
-        // Use the specified root
-        return [{ ...compiler.root, negated: false }]
-      })().concat(compiler.sources)
-
-      context.scanner = new Scanner({ sources })
-      DEBUG && I.end('Setup scanner')
-    }
-
-    // Scan for candidates if utilities are used
-    if (compiler.features & Features.Utilities) {
-      DEBUG && I.start('Scan for candidates')
-      for (let candidate of context.scanner.scan()) {
-        context.candidates.add(candidate)
-      }
-      DEBUG && I.end('Scan for candidates')
-
-      DEBUG && I.start('Register dependency messages')
-      // Add all found files as direct dependencies
-      let resolvedInputFile = path.resolve(base, inputFile)
-      for (let file of context.scanner.files) {
-        let absolutePath = path.resolve(file)
-        // The CSS file cannot be a dependency of itself
-        if (absolutePath === resolvedInputFile) {
-          continue
-        }
-        this.addDependency(absolutePath)
-      }
-
-      // Register context dependencies for glob patterns
-      for (let glob of context.scanner.globs) {
-        // Skip negated patterns
-        if (glob.pattern[0] === '!') continue
-
-        // Avoid adding a dependency on the base directory itself
-        if (glob.pattern === '*' && base === glob.base) {
-          continue
-        }
-
-        this.addContextDependency(path.resolve(glob.base))
-      }
-
-      // Validate that source(...) paths are directories
-      let root = compiler.root
-      if (root !== 'none' && root !== null) {
-        let basePath = normalizePath(path.resolve(root.base, root.pattern))
-        try {
-          let stats = fs.statSync(basePath)
-          if (!stats.isDirectory()) {
-            throw new Error(
-              `The path given to \`source(…)\` must be a directory but got \`source(${basePath})\` instead.`,
-            )
-          }
-        } catch (err) {
-          if ((err as NodeJS.ErrnoException).code !== 'ENOENT') {
-            throw err
-          }
-          // Directory doesn't exist yet, which is fine
-        }
-      }
-      DEBUG && I.end('Register dependency messages')
-    }
-
-    DEBUG && I.start('Build utilities')
-    let css = compiler.build([...context.candidates])
-    DEBUG && I.end('Build utilities')
-
-    // Optionally optimize the output
-    let result = css
-    if (shouldOptimize) {
-      DEBUG && I.start('Optimization')
-      let optimized = optimize(css, {
-        minify: typeof shouldOptimize === 'object' ? shouldOptimize.minify : true,
-      })
-      result = optimized.code
-      DEBUG && I.end('Optimization')
-    }
-
-    DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
-    callback(null, result)
-  } catch (error) {
-    // Clear the cache entry on error to force a full rebuild next time
-    let key = getCacheKey(resourceId, options)
-    cache.delete(key)
-
-    DEBUG && I.end(`[@tailwindcss/turbopack] ${path.relative(base, inputFile)}`)
-    callback(error as Error)
-  }
-}
diff --git a/packages/@tailwindcss-turbopack/tsconfig.json b/packages/@tailwindcss-turbopack/tsconfig.json
deleted file mode 100644
index d2131cbeb..000000000
--- a/packages/@tailwindcss-turbopack/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "verbatimModuleSyntax": false,
-  },
-}
diff --git a/packages/@tailwindcss-turbopack/tsup.config.ts b/packages/@tailwindcss-turbopack/tsup.config.ts
deleted file mode 100644
index 998eebe4f..000000000
--- a/packages/@tailwindcss-turbopack/tsup.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig([
-  {
-    format: ['esm'],
-    clean: true,
-    minify: true,
-    cjsInterop: true,
-    dts: true,
-    entry: ['src/index.ts'],
-  },
-  {
-    format: ['cjs'],
-    minify: true,
-    cjsInterop: true,
-    dts: true,
-    entry: ['src/index.cts'],
-  },
-])
diff --git a/packages/@tailwindcss-upgrade/README.md b/packages/@tailwindcss-upgrade/README.md
deleted file mode 100644
index 5f532607d..000000000
--- a/packages/@tailwindcss-upgrade/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-<p align="center">
-  <a href="https://tailwindcss.com" target="_blank">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
-      <img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
-    </picture>
-  </a>
-</p>
-
-<p align="center">
-  A utility-first CSS framework for rapidly building custom user interfaces.
-</p>
-
-<p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
-    <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
-</p>
-
----
-
-## Documentation
-
-For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
-
-## Community
-
-For help, discussion about best practices, or feature ideas:
-
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
-
-## Contributing
-
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
diff --git a/packages/@tailwindcss-upgrade/package.json b/packages/@tailwindcss-upgrade/package.json
deleted file mode 100644
index e960d7677..000000000
--- a/packages/@tailwindcss-upgrade/package.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "name": "@tailwindcss/upgrade",
-  "version": "4.3.3",
-  "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "packages/@tailwindcss-cli"
-  },
-  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
-  "homepage": "https://tailwindcss.com",
-  "scripts": {
-    "lint": "tsc --noEmit",
-    "build": "tsup-node",
-    "dev": "pnpm run build -- --watch"
-  },
-  "bin": "./dist/index.mjs",
-  "exports": {
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "provenance": true,
-    "access": "public"
-  },
-  "dependencies": {
-    "@tailwindcss/node": "workspace:*",
-    "@tailwindcss/oxide": "workspace:*",
-    "dedent": "catalog:",
-    "enhanced-resolve": "catalog:",
-    "globby": "^16.2.2",
-    "jiti": "^2.7.0",
-    "mri": "^1.2.0",
-    "picocolors": "^1.1.1",
-    "postcss": "catalog:",
-    "postcss-import": "^16.1.1",
-    "postcss-selector-parser": "^7.1.4",
-    "prettier": "catalog:",
-    "semver": "^7.8.5",
-    "tailwindcss": "workspace:*",
-    "tree-sitter": "^0.25.1",
-    "tree-sitter-typescript": "^0.23.2"
-  },
-  "devDependencies": {
-    "@types/node": "catalog:",
-    "@types/postcss-import": "^14.0.3",
-    "@types/semver": "^7.8.0"
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts
deleted file mode 100644
index 6a451333e..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts
+++ /dev/null
@@ -1,553 +0,0 @@
-import { Scanner } from '@tailwindcss/oxide'
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { loadModule } from '../../../../@tailwindcss-node/src/compile'
-import defaultTheme from '../../../../tailwindcss/dist/default-theme'
-import { atRule, toCss, type AstNode } from '../../../../tailwindcss/src/ast'
-import {
-  keyPathToCssProperty,
-  themeableValues,
-} from '../../../../tailwindcss/src/compat/apply-config-to-theme'
-import { keyframesToRules } from '../../../../tailwindcss/src/compat/apply-keyframes-to-theme'
-import {
-  resolveConfig,
-  type ConfigFile,
-} from '../../../../tailwindcss/src/compat/config/resolve-config'
-import type { ResolvedConfig, ThemeConfig } from '../../../../tailwindcss/src/compat/config/types'
-import { buildCustomContainerUtilityRules } from '../../../../tailwindcss/src/compat/container'
-import { darkModePlugin } from '../../../../tailwindcss/src/compat/dark-mode'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { escape } from '../../../../tailwindcss/src/utils/escape'
-import {
-  isValidOpacityValue,
-  isValidSpacingMultiplier,
-} from '../../../../tailwindcss/src/utils/infer-data-type'
-import * as ValueParser from '../../../../tailwindcss/src/value-parser'
-import { findStaticPlugins, type StaticPluginOptions } from '../../utils/extract-static-plugins'
-import { highlight, info, relative } from '../../utils/renderer'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-export type JSConfigMigration =
-  // Could not convert the config file, need to inject it as-is in a @config directive
-  null | {
-    sources: { base: string; pattern: string }[]
-    plugins: { base: string; path: string; options: null | StaticPluginOptions }[]
-    css: string
-  }
-
-export async function migrateJsConfig(
-  designSystem: DesignSystem,
-  fullConfigPath: string,
-  base: string,
-): Promise<JSConfigMigration> {
-  let [unresolvedConfig, source] = await Promise.all([
-    loadModule(fullConfigPath, __dirname, () => {}).then((result) => result.module) as Config,
-    fs.readFile(fullConfigPath, 'utf-8'),
-  ])
-
-  if (!canMigrateConfig(unresolvedConfig, source)) {
-    info(
-      `The configuration file at ${highlight(relative(fullConfigPath, base))} could not be automatically migrated to the new CSS configuration format, so your CSS has been updated to load your existing configuration file.`,
-      { prefix: '↳ ' },
-    )
-    return null
-  }
-
-  let sources: { base: string; pattern: string }[] = []
-  let plugins: { base: string; path: string; options: null | StaticPluginOptions }[] = []
-  let cssConfigs: string[] = []
-
-  if ('darkMode' in unresolvedConfig) {
-    cssConfigs.push(migrateDarkMode(unresolvedConfig as any))
-  }
-
-  if ('content' in unresolvedConfig) {
-    sources = await migrateContent(unresolvedConfig as any, fullConfigPath, base)
-  }
-
-  if ('theme' in unresolvedConfig) {
-    let themeConfig = await migrateTheme(designSystem, unresolvedConfig, base)
-    if (themeConfig) cssConfigs.push(themeConfig)
-  }
-
-  if ('corePlugins' in unresolvedConfig) {
-    info(
-      `The \`corePlugins\` option is no longer supported as of Tailwind CSS v4.0, so it's been removed from your configuration.`,
-    )
-  }
-
-  let simplePlugins = findStaticPlugins(source)
-  if (simplePlugins !== null) {
-    for (let [path, options] of simplePlugins) {
-      plugins.push({ base, path, options })
-    }
-  }
-
-  return {
-    sources,
-    plugins,
-    css: cssConfigs.join('\n'),
-  }
-}
-
-async function migrateTheme(
-  designSystem: DesignSystem,
-  unresolvedConfig: Config,
-  base: string,
-): Promise<string> {
-  // Resolve the config file without applying plugins and presets, as these are
-  // migrated to CSS separately.
-  let configToResolve: ConfigFile = {
-    base,
-    config: { ...unresolvedConfig, plugins: [], presets: undefined },
-    reference: false,
-    src: undefined,
-  }
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(designSystem, [configToResolve])
-
-  let resetNamespaces = new Map<string, boolean>(
-    Array.from(replacedThemeKeys.entries()).map(([key]) => [key, false]),
-  )
-
-  removeUnnecessarySpacingKeys(designSystem, resolvedConfig, replacedThemeKeys)
-
-  let css = ''
-  let prevSectionKey = ''
-  let themeSection: string[] = []
-  let keyframesCss = ''
-  let variants = new Map<string, string>()
-
-  // Special handling of specific theme keys:
-  {
-    if ('keyframes' in resolvedConfig.theme) {
-      keyframesCss += keyframesToCss(resolvedConfig.theme.keyframes)
-      delete resolvedConfig.theme.keyframes
-    }
-
-    if ('container' in resolvedConfig.theme) {
-      let rules = buildCustomContainerUtilityRules(resolvedConfig.theme.container, designSystem)
-      if (rules.length > 0) {
-        // Using `theme` instead of `utility` so it sits before the `@layer
-        // base` with compatibility CSS. While this is technically a utility, it
-        // makes a bit more sense to emit this closer to the `@theme` values
-        // since it is needed for backwards compatibility.
-        css += `\n@tw-bucket theme {\n`
-        css += toCss([atRule('@utility', 'container', rules)])
-        css += '}\n' // @tw-bucket
-      }
-      delete resolvedConfig.theme.container
-    }
-
-    if ('aria' in resolvedConfig.theme) {
-      for (let [key, value] of Object.entries(resolvedConfig.theme.aria ?? {})) {
-        // Will be handled by bare values if the names match.
-        // E.g.: `aria-foo:flex` should produce `[aria-foo="true"]`
-        if (new RegExp(`^${key}=(['"]?)true\\1$`).test(`${value}`)) continue
-
-        // Create custom variant
-        variants.set(`aria-${key}`, `&[aria-${value}]`)
-      }
-      delete resolvedConfig.theme.aria
-    }
-
-    if ('data' in resolvedConfig.theme) {
-      for (let [key, value] of Object.entries(resolvedConfig.theme.data ?? {})) {
-        // Will be handled by bare values if the names match.
-        // E.g.: `data-foo:flex` should produce `[data-foo]`
-        if (key === value) continue
-
-        // Create custom variant
-        variants.set(`data-${key}`, `&[data-${value}]`)
-      }
-      delete resolvedConfig.theme.data
-    }
-
-    if ('supports' in resolvedConfig.theme) {
-      for (let [key, value] of Object.entries(resolvedConfig.theme.supports ?? {})) {
-        // Will be handled by bare values if the value of the declaration is a
-        // CSS variable.
-        let parsed = ValueParser.parse(`${value}`)
-
-        // Unwrap the parens, e.g.: `(foo: var(--bar))` → `foo: var(--bar)`
-        if (parsed.length === 1 && parsed[0].kind === 'function' && parsed[0].value === '') {
-          parsed = parsed[0].nodes
-        }
-
-        // Verify structure: `foo: var(--bar)`
-        //                    ^^^ ← must match the `key`
-        if (
-          parsed.length === 3 &&
-          parsed[0].kind === 'word' &&
-          parsed[0].value === key &&
-          parsed[2].kind === 'function' &&
-          parsed[2].value === 'var'
-        ) {
-          continue
-        }
-
-        // Create custom variant
-        variants.set(`supports-${key}`, `{@supports(${value}){@slot;}}`)
-      }
-      delete resolvedConfig.theme.supports
-    }
-  }
-
-  // Convert theme values to CSS custom properties
-  for (let [key, value] of themeableValues(resolvedConfig.theme)) {
-    if (typeof value !== 'string' && typeof value !== 'number') {
-      continue
-    }
-
-    if (typeof value === 'string') {
-      // This is more advanced than the version in core as ideally something
-      // like `rgba(0 0 0 / <alpha-value>)` becomes `rgba(0 0 0)`. Since we know
-      // from the `/` that it's used in an alpha channel and we can remove it.
-      //
-      // In other cases we may not know exactly how its used, so we'll just
-      // replace it with `1` like core does.
-      value = value.replace(/\s*\/\s*<alpha-value>/, '').replace(/<alpha-value>/, '1')
-    }
-
-    // Convert `opacity` namespace from decimal to percentage values.
-    // Additionally we can drop values that resolve to the same value as the
-    // named modifier with the same name.
-    if (key[0] === 'opacity' && (typeof value === 'number' || typeof value === 'string')) {
-      let numValue = typeof value === 'string' ? parseFloat(value) : value
-
-      if (numValue >= 0 && numValue <= 1) {
-        value = numValue * 100 + '%'
-      }
-
-      if (
-        typeof value === 'string' &&
-        key[1] === value.replace(/%$/, '') &&
-        isValidOpacityValue(key[1])
-      ) {
-        continue
-      }
-    }
-
-    let sectionKey = createSectionKey(key)
-    if (sectionKey !== prevSectionKey) {
-      themeSection.push('')
-      prevSectionKey = sectionKey
-    }
-
-    let property = keyPathToCssProperty(key)
-
-    if (property !== null) {
-      if (
-        !property.startsWith('default-') &&
-        resetNamespaces.has(key[0]) &&
-        resetNamespaces.get(key[0]) === false
-      ) {
-        resetNamespaces.set(key[0], true)
-        let ns = keyPathToCssProperty([key[0]])
-        if (ns !== null) {
-          themeSection.push(`  ${escape(`--${ns}`)}-*: initial;`)
-        }
-      }
-
-      themeSection.push(`  ${escape(`--${property}`)}: ${value};`)
-    }
-  }
-
-  if (keyframesCss) {
-    themeSection.push('', keyframesCss)
-  }
-
-  if (themeSection.length > 0) {
-    css += `\n@tw-bucket theme {\n`
-    css += `\n@theme {\n`
-    css += themeSection.join('\n') + '\n'
-    css += '}\n' // @theme
-    css += '}\n' // @tw-bucket
-  }
-
-  if (variants.size > 0) {
-    css += '\n@tw-bucket custom-variant {\n'
-
-    let previousRoot = ''
-    for (let [name, selector] of variants) {
-      let root = name.split('-')[0]
-      if (previousRoot !== root) css += '\n'
-      previousRoot = root
-
-      if (selector.startsWith('{')) {
-        css += `@custom-variant ${name} ${selector}\n`
-      } else {
-        css += `@custom-variant ${name} (${selector});\n`
-      }
-    }
-    css += '}\n'
-  }
-
-  return css
-}
-
-function migrateDarkMode(unresolvedConfig: Config & { darkMode: any }): string {
-  let variant: string | string[] = ''
-  let addVariant = (_name: string, _variant: string) => (variant = _variant)
-  let config = () => unresolvedConfig.darkMode
-  darkModePlugin({ config, addVariant })
-
-  if (variant === '') {
-    return ''
-  }
-
-  if (!Array.isArray(variant)) {
-    variant = [variant]
-  }
-
-  if (variant.length === 1 && !variant[0].includes('{')) {
-    return `\n@tw-bucket custom-variant {\n@custom-variant dark (${variant[0]});\n}\n`
-  }
-
-  let customVariant = ''
-  for (let variantName of variant) {
-    // Convert to the block syntax if a block is used
-    if (variantName.includes('{')) {
-      customVariant += variantName.replace('}', '{ @slot }}') + '\n'
-    } else {
-      customVariant += variantName + '{ @slot }\n'
-    }
-  }
-
-  if (customVariant !== '') {
-    return `\n@tw-bucket custom-variant {\n@custom-variant dark {${customVariant}};\n}\n`
-  }
-
-  return ''
-}
-
-// Returns a string identifier used to section theme declarations
-function createSectionKey(key: string[]): string {
-  let sectionSegments = []
-  for (let i = 0; i < key.length - 1; i++) {
-    let segment = key[i]
-    // Ignore tuples
-    if (key[i + 1][0] === '-') {
-      break
-    }
-    sectionSegments.push(segment)
-  }
-  return sectionSegments.join('-')
-}
-
-async function migrateContent(
-  unresolvedConfig: Config,
-  configPath: string,
-  base: string,
-): Promise<{ base: string; pattern: string }[]> {
-  let autoContentFiles = autodetectedSourceFiles(base)
-
-  let sources = []
-  let contentIsRelative = (() => {
-    if (!unresolvedConfig.content) return false
-    if (Array.isArray(unresolvedConfig.content)) return false
-    if (unresolvedConfig.content.relative) return true
-    if (unresolvedConfig.future === 'all') return false
-    return unresolvedConfig.future?.relativeContentPathsByDefault ?? false
-  })()
-
-  let sourceGlobs = Array.isArray(unresolvedConfig.content)
-    ? unresolvedConfig.content.map((pattern) => ({ base, pattern }))
-    : (unresolvedConfig.content?.files ?? []).map((pattern) => {
-        if (typeof pattern === 'string' && contentIsRelative) {
-          return { base: path.dirname(configPath), pattern: pattern }
-        }
-        return { base, pattern }
-      })
-
-  for (let { base, pattern } of sourceGlobs) {
-    if (typeof pattern !== 'string') {
-      throw new Error('Unsupported content value: ' + pattern)
-    }
-
-    let sourceFiles = patternSourceFiles({
-      base,
-      pattern: pattern[0] === '!' ? pattern.slice(1) : pattern,
-      negated: pattern[0] === '!',
-    })
-
-    let autoContentContainsAllSourceFiles = true
-    for (let sourceFile of sourceFiles) {
-      if (!autoContentFiles.includes(sourceFile)) {
-        autoContentContainsAllSourceFiles = false
-        break
-      }
-    }
-
-    if (!autoContentContainsAllSourceFiles) {
-      sources.push({ base, pattern })
-    }
-  }
-  return sources
-}
-
-// Applies heuristics to determine if we can attempt to migrate the config
-function canMigrateConfig(unresolvedConfig: Config, source: string): boolean {
-  // The file may not contain non-serializable values
-  function isSimpleValue(value: unknown): boolean {
-    if (typeof value === 'function') return false
-    if (Array.isArray(value)) return value.every(isSimpleValue)
-    if (typeof value === 'object' && value !== null) {
-      return Object.values(value).every(isSimpleValue)
-    }
-    return ['string', 'number', 'boolean', 'undefined'].includes(typeof value)
-  }
-
-  // `theme` and `plugins` are handled separately and allowed to be more complex
-  let { plugins, theme, ...remainder } = unresolvedConfig
-  if (!isSimpleValue(remainder)) {
-    return false
-  }
-
-  // The file may only contain known-migratable top-level properties
-  let knownProperties = [
-    'darkMode',
-    'content',
-    'theme',
-    'plugins',
-    'presets',
-    'prefix', // Prefix is handled in the dedicated prefix migrator
-    'corePlugins',
-    'future',
-    'experimental',
-  ]
-
-  if (Object.keys(unresolvedConfig).some((key) => !knownProperties.includes(key))) {
-    return false
-  }
-
-  if (findStaticPlugins(source) === null) {
-    return false
-  }
-
-  if (unresolvedConfig.presets && unresolvedConfig.presets.length > 0) {
-    return false
-  }
-
-  // If there are unknown "future" flags we should bail
-  if (unresolvedConfig.future && unresolvedConfig.future !== 'all') {
-    let knownFlags = [
-      'hoverOnlyWhenSupported',
-      'respectDefaultRingColorOpacity',
-      'disableColorOpacityUtilitiesByDefault',
-      'relativeContentPathsByDefault',
-    ]
-
-    if (Object.keys(unresolvedConfig.future).some((key) => !knownFlags.includes(key))) {
-      return false
-    }
-  }
-
-  // If there are unknown "experimental" flags we should bail
-  if (unresolvedConfig.experimental && unresolvedConfig.experimental !== 'all') {
-    let knownFlags = ['generalizedModifiers']
-
-    if (Object.keys(unresolvedConfig.experimental).some((key) => !knownFlags.includes(key))) {
-      return false
-    }
-  }
-
-  // Only migrate the config file if all top-level theme keys are allowed to be
-  // migrated
-  if (theme && typeof theme === 'object') {
-    if (theme.extend && !onlyAllowedThemeValues(theme.extend)) return false
-    let { extend: _extend, ...themeCopy } = theme
-    if (!onlyAllowedThemeValues(themeCopy)) return false
-  }
-
-  return true
-}
-
-const ALLOWED_THEME_KEYS = [
-  ...Object.keys(defaultTheme),
-  // Used by @tailwindcss/container-queries
-  'containers',
-]
-function onlyAllowedThemeValues(theme: ThemeConfig): boolean {
-  for (let key of Object.keys(theme)) {
-    if (!ALLOWED_THEME_KEYS.includes(key)) {
-      return false
-    }
-  }
-
-  if ('screens' in theme && typeof theme.screens === 'object' && theme.screens !== null) {
-    for (let screen of Object.values(theme.screens)) {
-      if (typeof screen === 'object' && screen !== null && ('max' in screen || 'raw' in screen)) {
-        return false
-      }
-    }
-  }
-  return true
-}
-
-function keyframesToCss(keyframes: Record<string, unknown>): string {
-  let ast: AstNode[] = keyframesToRules({ theme: { keyframes } })
-  return toCss(ast).trim() + '\n'
-}
-
-function autodetectedSourceFiles(base: string) {
-  let scanner = new Scanner({
-    sources: [
-      {
-        base,
-        pattern: '**/*',
-        negated: false,
-      },
-    ],
-  })
-  scanner.scan()
-  return scanner.files
-}
-
-function patternSourceFiles(source: { base: string; pattern: string; negated: boolean }): string[] {
-  let scanner = new Scanner({ sources: [source] })
-  scanner.scan()
-  return scanner.files
-}
-
-function removeUnnecessarySpacingKeys(
-  designSystem: DesignSystem,
-  resolvedConfig: ResolvedConfig,
-  replacedThemeKeys: Set<string>,
-) {
-  // We want to keep the spacing scale as-is if the user is overwriting
-  if (replacedThemeKeys.has('spacing')) return
-
-  // Ensure we have a spacing multiplier
-  let spacingScale = designSystem.theme.get(['--spacing'])
-  if (!spacingScale) return
-
-  let [spacingMultiplier, spacingUnit] = splitNumberAndUnit(spacingScale)
-  if (!spacingMultiplier || !spacingUnit) return
-
-  if (spacingScale && !replacedThemeKeys.has('spacing')) {
-    for (let [key, value] of Object.entries(resolvedConfig.theme.spacing ?? {})) {
-      let [multiplier, unit] = splitNumberAndUnit(value as string)
-      if (multiplier === null) continue
-
-      if (!isValidSpacingMultiplier(key)) continue
-      if (unit !== spacingUnit) continue
-
-      if (parseFloat(multiplier) === Number(key) * parseFloat(spacingMultiplier)) {
-        delete resolvedConfig.theme.spacing[key]
-        designSystem.theme.clearNamespace(escape(`--spacing-${key.replaceAll('.', '_')}`), 0)
-      }
-    }
-  }
-}
-
-function splitNumberAndUnit(value: string): [string, string] | [null, null] {
-  let match = value.match(/^([0-9.]+)(.*)$/)
-  if (!match) {
-    return [null, null]
-  }
-  return [match[1], match[2]]
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts
deleted file mode 100644
index e16f52287..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts
+++ /dev/null
@@ -1,349 +0,0 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { pkg } from '../../utils/packages'
-import { highlight, info, relative, success, warn } from '../../utils/renderer'
-import { writeFileSafely } from '../../utils/write-file-safely'
-
-// Migrates simple PostCSS setups. This is to cover non-dynamic config files
-// similar to the ones we have all over our docs:
-//
-// ```js
-// module.exports = {
-//   plugins: {
-//     'postcss-import': {},
-//     'tailwindcss/nesting': 'postcss-nesting',
-//     tailwindcss: {},
-//     autoprefixer: {},
-//   }
-// }
-// ```
-export async function migratePostCSSConfig(base: string) {
-  let ranMigration = false
-  let didMigrate = false
-  let didAddPostcssClient = false
-  let didRemoveAutoprefixer = false
-  let didRemovePostCSSImport = false
-
-  let packageJsonPath = path.resolve(base, 'package.json')
-  let packageJson
-  try {
-    packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf-8'))
-  } catch {}
-
-  // Priority 1: Handle JS config files
-  let jsConfigPath = await detectJSConfigPath(base)
-  if (jsConfigPath) {
-    let result = await migratePostCSSJSConfig(jsConfigPath)
-    ranMigration = true
-
-    if (result) {
-      didMigrate = true
-      didAddPostcssClient = result.didAddPostcssClient
-      didRemoveAutoprefixer = result.didRemoveAutoprefixer
-      didRemovePostCSSImport = result.didRemovePostCSSImport
-    }
-  }
-
-  // Priority 2: Handle package.json config
-  if (!ranMigration) {
-    if (packageJson && 'postcss' in packageJson) {
-      let result = await migratePostCSSJsonConfig(packageJson.postcss)
-      ranMigration = true
-
-      if (result) {
-        await writeFileSafely(
-          packageJsonPath,
-          JSON.stringify({ ...packageJson, postcss: result?.json }, null, 2),
-        )
-
-        didMigrate = true
-        didAddPostcssClient = result.didAddPostcssClient
-        didRemoveAutoprefixer = result.didRemoveAutoprefixer
-        didRemovePostCSSImport = result.didRemovePostCSSImport
-      }
-    }
-  }
-
-  // Priority 3: JSON based postcss config files
-  if (!ranMigration) {
-    let jsonConfigPath = await detectJSONConfigPath(base)
-    let jsonConfig: null | any = null
-    if (jsonConfigPath) {
-      try {
-        jsonConfig = JSON.parse(await fs.readFile(jsonConfigPath, 'utf-8'))
-      } catch {}
-      if (jsonConfig) {
-        let result = await migratePostCSSJsonConfig(jsonConfig)
-        ranMigration = true
-
-        if (result) {
-          await writeFileSafely(jsonConfigPath, JSON.stringify(result.json, null, 2))
-
-          didMigrate = true
-          didAddPostcssClient = result.didAddPostcssClient
-          didRemoveAutoprefixer = result.didRemoveAutoprefixer
-          didRemovePostCSSImport = result.didRemovePostCSSImport
-        }
-      }
-    }
-  }
-
-  if (!ranMigration) {
-    info('No PostCSS config found, skipping migration.', {
-      prefix: '↳ ',
-    })
-    return
-  }
-
-  if (didAddPostcssClient) {
-    let location = Object.hasOwn(packageJson?.dependencies ?? {}, 'tailwindcss')
-      ? ('dependencies' as const)
-      : Object.hasOwn(packageJson?.devDependencies ?? {}, 'tailwindcss')
-        ? ('devDependencies' as const)
-        : null
-
-    if (location !== null) {
-      try {
-        await pkg(base).add(['@tailwindcss/postcss@latest'], location)
-        success(`Installed package: ${highlight('@tailwindcss/postcss')}`, { prefix: '↳ ' })
-      } catch {}
-    }
-  }
-
-  if (didRemoveAutoprefixer) {
-    try {
-      await pkg(base).remove(['autoprefixer'])
-      success(`Removed package: ${highlight('autoprefixer')}`, { prefix: '↳ ' })
-    } catch {}
-  }
-
-  if (didRemovePostCSSImport) {
-    try {
-      await pkg(base).remove(['postcss-import'])
-      success(`Removed package: ${highlight('postcss-import')}`, { prefix: '↳ ' })
-    } catch {}
-  }
-
-  if (didMigrate && jsConfigPath) {
-    success(`Migrated PostCSS configuration: ${highlight(relative(jsConfigPath, base))}`, {
-      prefix: '↳ ',
-    })
-  }
-}
-
-async function migratePostCSSJSConfig(configPath: string): Promise<{
-  didAddPostcssClient: boolean
-  didRemoveAutoprefixer: boolean
-  didRemovePostCSSImport: boolean
-} | null> {
-  function isTailwindCSSPlugin(line: string) {
-    return /['"]?tailwindcss['"]?: ?\{\}/.test(line)
-  }
-  function isPostCSSImportPlugin(line: string) {
-    return /['"]?postcss-import['"]?: ?\{\}/.test(line)
-  }
-  function isAutoprefixerPlugin(line: string) {
-    return /['"]?autoprefixer['"]?: ?\{\}/.test(line)
-  }
-  function isTailwindCSSNestingPlugin(line: string) {
-    return /['"]tailwindcss\/nesting['"]: ?(\{\}|['"]postcss-nesting['"])/.test(line)
-  }
-
-  info('Migrating PostCSS configuration…')
-
-  let isSimpleConfig = await isSimplePostCSSConfig(configPath)
-  if (!isSimpleConfig) {
-    warn('The PostCSS config contains dynamic JavaScript and can not be automatically migrated.', {
-      prefix: '↳ ',
-    })
-    return null
-  }
-
-  let didAddPostcssClient = false
-  let didRemoveAutoprefixer = false
-  let didRemovePostCSSImport = false
-
-  let content = await fs.readFile(configPath, 'utf-8')
-  let lines = content.split('\n')
-  let newLines: string[] = []
-  for (let i = 0; i < lines.length; i++) {
-    let line = lines[i]
-
-    if (isTailwindCSSPlugin(line)) {
-      didAddPostcssClient = true
-      newLines.push(line.replace('tailwindcss:', `'@tailwindcss/postcss':`))
-    } else if (isAutoprefixerPlugin(line)) {
-      didRemoveAutoprefixer = true
-    } else if (isPostCSSImportPlugin(line)) {
-      // Check that there are no unknown plugins before the tailwindcss plugin
-      let hasUnknownPluginsBeforeTailwindCSS = false
-      for (let j = i + 1; j < lines.length; j++) {
-        let nextLine = lines[j]
-        if (isTailwindCSSPlugin(nextLine)) {
-          break
-        }
-        if (isTailwindCSSNestingPlugin(nextLine)) {
-          continue
-        }
-        hasUnknownPluginsBeforeTailwindCSS = true
-        break
-      }
-
-      if (!hasUnknownPluginsBeforeTailwindCSS) {
-        didRemovePostCSSImport = true
-      } else {
-        newLines.push(line)
-      }
-    } else if (isTailwindCSSNestingPlugin(line)) {
-      // Check if the following rule is the tailwindcss plugin
-      let nextLine = lines[i + 1]
-      if (isTailwindCSSPlugin(nextLine)) {
-        // Since this plugin is bundled with `tailwindcss`, we don't need to
-        // clean up a package when deleting this line.
-      } else {
-        newLines.push(line)
-      }
-    } else {
-      newLines.push(line)
-    }
-  }
-  await writeFileSafely(configPath, newLines.join('\n'))
-
-  return { didAddPostcssClient, didRemoveAutoprefixer, didRemovePostCSSImport }
-}
-
-async function migratePostCSSJsonConfig(json: any): Promise<{
-  json: any
-  didAddPostcssClient: boolean
-  didRemoveAutoprefixer: boolean
-  didRemovePostCSSImport: boolean
-} | null> {
-  function isTailwindCSSPlugin(plugin: string, options: any) {
-    return plugin === 'tailwindcss' && isEmptyObject(options)
-  }
-  function isPostCSSImportPlugin(plugin: string, options: any) {
-    return plugin === 'postcss-import' && isEmptyObject(options)
-  }
-  function isAutoprefixerPlugin(plugin: string, options: any) {
-    return plugin === 'autoprefixer' && isEmptyObject(options)
-  }
-  function isTailwindCSSNestingPlugin(plugin: string, options: any) {
-    return (
-      plugin === 'tailwindcss/nesting' && (options === 'postcss-nesting' || isEmptyObject(options))
-    )
-  }
-
-  let didAddPostcssClient = false
-  let didRemoveAutoprefixer = false
-  let didRemovePostCSSImport = false
-
-  let plugins = Object.entries(json.plugins || {})
-
-  let newPlugins: [string, any][] = []
-  for (let i = 0; i < plugins.length; i++) {
-    let [plugin, options] = plugins[i]
-
-    if (isTailwindCSSPlugin(plugin, options)) {
-      didAddPostcssClient = true
-      newPlugins.push(['@tailwindcss/postcss', options])
-    } else if (isAutoprefixerPlugin(plugin, options)) {
-      didRemoveAutoprefixer = true
-    } else if (isPostCSSImportPlugin(plugin, options)) {
-      // Check that there are no unknown plugins before the tailwindcss plugin
-      let hasUnknownPluginsBeforeTailwindCSS = false
-      for (let j = i + 1; j < plugins.length; j++) {
-        let [nextPlugin, nextOptions] = plugins[j]
-        if (isTailwindCSSPlugin(nextPlugin, nextOptions)) {
-          break
-        }
-        if (isTailwindCSSNestingPlugin(nextPlugin, nextOptions)) {
-          continue
-        }
-        hasUnknownPluginsBeforeTailwindCSS = true
-        break
-      }
-
-      if (!hasUnknownPluginsBeforeTailwindCSS) {
-        didRemovePostCSSImport = true
-      } else {
-        newPlugins.push([plugin, options])
-      }
-    } else if (isTailwindCSSNestingPlugin(plugin, options)) {
-      // Check if the following rule is the tailwindcss plugin
-      let [nextPlugin, nextOptions] = plugins[i + 1]
-      if (isTailwindCSSPlugin(nextPlugin, nextOptions)) {
-        // Since this plugin is bundled with `tailwindcss`, we don't need to
-        // clean up a package when deleting this line.
-      } else {
-        newPlugins.push([plugin, options])
-      }
-    } else {
-      newPlugins.push([plugin, options])
-    }
-  }
-
-  return {
-    json: { ...json, plugins: Object.fromEntries(newPlugins) },
-    didAddPostcssClient,
-    didRemoveAutoprefixer,
-    didRemovePostCSSImport,
-  }
-}
-
-const JS_CONFIG_FILE_LOCATIONS = [
-  '.postcssrc.js',
-  '.postcssrc.mjs',
-  '.postcssrc.cjs',
-  '.postcssrc.ts',
-  '.postcssrc.mts',
-  '.postcssrc.cts',
-  'postcss.config.js',
-  'postcss.config.mjs',
-  'postcss.config.cjs',
-  'postcss.config.ts',
-  'postcss.config.mts',
-  'postcss.config.cts',
-]
-async function detectJSConfigPath(base: string): Promise<null | string> {
-  for (let file of JS_CONFIG_FILE_LOCATIONS) {
-    let fullPath = path.resolve(base, file)
-    try {
-      await fs.access(fullPath)
-      return fullPath
-    } catch {}
-  }
-  return null
-}
-
-const JSON_CONFIG_FILE_LOCATIONS = [
-  '.postcssrc',
-  '.postcssrc.json',
-  // yaml syntax is not supported
-  // '.postcssrc.yml'
-]
-async function detectJSONConfigPath(base: string): Promise<null | string> {
-  for (let file of JSON_CONFIG_FILE_LOCATIONS) {
-    let fullPath = path.resolve(base, file)
-    try {
-      await fs.access(fullPath)
-      return fullPath
-    } catch {}
-  }
-  return null
-}
-
-async function isSimplePostCSSConfig(configPath: string): Promise<boolean> {
-  let content = await fs.readFile(configPath, 'utf-8')
-  return (
-    content.includes('tailwindcss:') &&
-    !(
-      content.includes('require') ||
-      // Adding a space at the end to not match `'postcss-import'`
-      content.includes('import ')
-    )
-  )
-}
-
-function isEmptyObject(obj: any) {
-  return typeof obj === 'object' && obj !== null && Object.keys(obj).length === 0
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/analyze.ts b/packages/@tailwindcss-upgrade/src/codemods/css/analyze.ts
deleted file mode 100644
index c7058df54..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/analyze.ts
+++ /dev/null
@@ -1,303 +0,0 @@
-import { isGitIgnored } from 'globby'
-import path from 'node:path'
-import postcss, { type Result } from 'postcss'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-import { Stylesheet, type StylesheetConnection } from '../../stylesheet'
-import { gitRoot } from '../../utils/git'
-import { error, highlight, relative } from '../../utils/renderer'
-import { resolveCssId } from '../../utils/resolve'
-
-export async function analyze(stylesheets: Stylesheet[], { base }: { base: string }) {
-  // Use the project's git root, instead of the `base` to ensure all
-  // `.gitignore` rules are being used.
-  let isIgnored = await isGitIgnored({ cwd: gitRoot(base) ?? base })
-  let processingQueue: (() => Promise<Result>)[] = []
-  let stylesheetsByFile = new DefaultMap<string, Stylesheet | null>((file) => {
-    // We don't want to process ignored files (like node_modules)
-    try {
-      if (isIgnored(file)) {
-        return null
-      }
-    } catch {
-      // If the file is not part of the current working directory (which can
-      // happen if you import `tailwindcss` and it's loading a shared file from
-      // pnpm) then this will throw.
-      return null
-    }
-
-    try {
-      let sheet = Stylesheet.loadSync(file)
-
-      // Mutate incoming stylesheets to include the newly discovered sheet
-      stylesheets.push(sheet)
-
-      // Queue up the processing of this stylesheet
-      processingQueue.push(() => processor.process(sheet.root, { from: sheet.file! }))
-
-      return sheet
-    } catch {
-      return null
-    }
-  })
-
-  // Step 1: Record which `@import` rules point to which stylesheets
-  // and which stylesheets are parents/children of each other
-  let processor = postcss([
-    {
-      postcssPlugin: 'mark-import-nodes',
-      AtRule: {
-        import(node) {
-          // Find what the import points to
-          let id = node.params.match(/['"](.*?)['"]/)?.[1]
-          if (!id) return
-
-          let basePath = node.source?.input.file
-            ? path.dirname(node.source.input.file)
-            : process.cwd()
-
-          // Resolve the import to a file path
-          let resolvedPath: string | false = false
-          try {
-            // We first try to resolve the file as relative to the current file
-            // to mimic the behavior of `postcss-import` since that's what was
-            // used to resolve imports in Tailwind CSS v3.
-            if (id[0] !== '.') {
-              try {
-                resolvedPath = resolveCssId(`./${id}`, basePath)
-              } catch {}
-            }
-
-            if (!resolvedPath) {
-              resolvedPath = resolveCssId(id, basePath)
-            }
-          } catch (err) {
-            // Import is a URL, we don't want to process these, but also don't
-            // want to show an error message for them.
-            if (id.startsWith('http://') || id.startsWith('https://') || id.startsWith('//')) {
-              return
-            }
-
-            // Something went wrong, we can't resolve the import.
-            error(
-              `Failed to resolve import: ${highlight(id)} in ${highlight(relative(node.source?.input.file!, basePath))}. Skipping.`,
-              { prefix: '↳ ' },
-            )
-            return
-          }
-
-          if (!resolvedPath) return
-
-          // Find the stylesheet pointing to the resolved path
-          let stylesheet = stylesheetsByFile.get(resolvedPath)
-
-          // If it _does not_ exist in stylesheets we don't care and skip it
-          // this is likely because its in node_modules or a workspace package
-          // that we don't want to modify
-          if (!stylesheet) return
-
-          // Mark the import node with the ID of the stylesheet it points to
-          // We will use these later to build lookup tables and modify the AST
-          node.raws.tailwind_destination_sheet_id = stylesheet.id
-
-          let parent = node.source?.input.file
-            ? stylesheetsByFile.get(node.source.input.file)
-            : undefined
-
-          let layers: string[] = []
-
-          for (let part of segment(node.params, ' ')) {
-            if (!part.startsWith('layer(')) continue
-            if (!part.endsWith(')')) continue
-
-            layers.push(part.slice(6, -1).trim())
-          }
-
-          // Connect sheets together in a dependency graph
-          if (parent) {
-            let meta = { layers }
-            stylesheet.parents.add({ item: parent, meta })
-            parent.children.add({ item: stylesheet, meta })
-          }
-        },
-      },
-    },
-  ])
-
-  // Seed the map with all the known stylesheets, and queue up the processing of
-  // each incoming stylesheet.
-  for (let sheet of stylesheets) {
-    if (sheet.file) {
-      stylesheetsByFile.set(sheet.file, sheet)
-      processingQueue.push(() => processor.process(sheet.root, { from: sheet.file ?? undefined }))
-    }
-  }
-
-  // Process all the stylesheets from step 1
-  while (processingQueue.length > 0) {
-    let task = processingQueue.shift()!
-    await task()
-  }
-
-  // ---
-
-  let commonPath = process.cwd()
-
-  function pathToString(path: StylesheetConnection[]) {
-    let parts: string[] = []
-
-    for (let connection of path) {
-      if (!connection.item.file) continue
-
-      let filePath = connection.item.file.replace(commonPath, '')
-      let layers = connection.meta.layers.join(', ')
-
-      if (layers.length > 0) {
-        parts.push(`${filePath} (layers: ${layers})`)
-      } else {
-        parts.push(filePath)
-      }
-    }
-
-    return parts.join(' <- ')
-  }
-
-  let lines: string[] = []
-
-  for (let sheet of stylesheets) {
-    if (!sheet.file) continue
-
-    let { convertiblePaths, nonConvertiblePaths } = sheet.analyzeImportPaths()
-    let isAmbiguous = convertiblePaths.length > 0 && nonConvertiblePaths.length > 0
-
-    if (!isAmbiguous) continue
-
-    sheet.canMigrate = false
-
-    let filePath = sheet.file.replace(commonPath, '')
-
-    for (let path of convertiblePaths) {
-      lines.push(`- ${filePath} <- ${pathToString(path)}`)
-    }
-
-    for (let path of nonConvertiblePaths) {
-      lines.push(`- ${filePath} <- ${pathToString(path)}`)
-    }
-  }
-
-  if (lines.length === 0) {
-    let tailwindRootLeafs = new Set<Stylesheet>()
-
-    for (let sheet of stylesheets) {
-      // If the current file already contains `@config`, then we can assume it's
-      // a Tailwind CSS root file.
-      sheet.root.walkAtRules('config', () => {
-        sheet.isTailwindRoot = true
-        return false
-      })
-      if (sheet.isTailwindRoot) continue
-
-      // If an `@tailwind` at-rule, or `@import "tailwindcss"` is present,
-      // then we can assume it's a file where Tailwind CSS might be configured.
-      //
-      // However, if 2 or more stylesheets exist with these rules that share a
-      // common parent, then we want to mark the common parent as the root
-      // stylesheet instead.
-      sheet.root.walkAtRules((node) => {
-        if (
-          node.name === 'tailwind' ||
-          (node.name === 'import' && node.params.match(/^["']tailwindcss["']/)) ||
-          (node.name === 'import' && node.params.match(/^["']tailwindcss\/.*?["']$/))
-        ) {
-          sheet.isTailwindRoot = true
-          tailwindRootLeafs.add(sheet)
-        }
-      })
-    }
-
-    // Only a single Tailwind CSS root file exists, no need to do anything else.
-    if (tailwindRootLeafs.size <= 1) {
-      return
-    }
-
-    // Mark the common parent as the root file
-    {
-      // Group each sheet from tailwindRootLeafs by their common parent
-      let commonParents = new DefaultMap<Stylesheet, Set<Stylesheet>>(() => new Set<Stylesheet>())
-
-      // Seed common parents with leafs
-      for (let sheet of tailwindRootLeafs) {
-        commonParents.get(sheet).add(sheet)
-      }
-
-      // If any 2 common parents come from the same tree, then all children of
-      // parent A and parent B will be moved to the parent of parent A and
-      // parent B. Parent A and parent B will be removed.
-      let repeat = true
-      repeat: while (repeat) {
-        repeat = false
-
-        for (let [sheetA, childrenA] of commonParents) {
-          for (let [sheetB, childrenB] of commonParents) {
-            if (sheetA === sheetB) continue
-
-            // Ancestors from self to root. Reversed order so we find the
-            // nearest common parent first
-            //
-            // Including self because if you compare a sheet with its parent,
-            // then the parent is still the common sheet between the two. In
-            // this case, the parent is the root file.
-            let ancestorsA = [sheetA].concat(Array.from(sheetA.ancestors()).reverse())
-            let ancestorsB = [sheetB].concat(Array.from(sheetB.ancestors()).reverse())
-
-            for (let parentA of ancestorsA) {
-              for (let parentB of ancestorsB) {
-                if (parentA !== parentB) continue
-
-                // Found the parent
-                let parent = parentA
-
-                commonParents.delete(sheetA)
-                commonParents.delete(sheetB)
-
-                for (let child of childrenA) {
-                  commonParents.get(parent).add(child)
-                }
-
-                for (let child of childrenB) {
-                  commonParents.get(parent).add(child)
-                }
-
-                // Found a common parent between sheet A and sheet B. We can
-                // stop looking for more common parents between A and B, and
-                // continue with the next sheet.
-                repeat = true
-                continue repeat
-              }
-            }
-          }
-        }
-      }
-
-      // Mark the common parent as the Tailwind CSS root file, and remove the
-      // flag from each leaf.
-      for (let [parent, children] of commonParents) {
-        parent.isTailwindRoot = true
-
-        for (let child of children) {
-          if (parent === child) continue
-
-          child.isTailwindRoot = false
-        }
-      }
-      return
-    }
-  }
-
-  {
-    let error = `You have one or more stylesheets that are imported into a utility layer and non-utility layer.\n`
-    error += `We cannot convert stylesheets under these conditions. Please look at the following stylesheets:\n`
-
-    throw new Error(error + lines.join('\n'))
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/fixtures/test.css b/packages/@tailwindcss-upgrade/src/codemods/css/fixtures/test.css
deleted file mode 100644
index a15c877ac..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/fixtures/test.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.foo {
-  color: red;
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/format-nodes.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/format-nodes.test.ts
deleted file mode 100644
index 9d6393a02..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/format-nodes.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import postcss, { type Plugin } from 'postcss'
-import { expect, it } from 'vitest'
-import { formatNodes } from './format-nodes'
-import { sortBuckets } from './sort-buckets'
-
-function markPretty(): Plugin {
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/mark-pretty',
-    OnceExit(root) {
-      root.walkAtRules('tw-format', (atRule) => {
-        atRule.raws.tailwind_pretty = true
-      })
-    },
-  }
-}
-
-function migrate(input: string) {
-  return postcss()
-    .use(markPretty())
-    .use(sortBuckets())
-    .use(formatNodes())
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it('should format PostCSS nodes', async () => {
-  expect(await migrate(`@utility .foo { .foo { color: red; } }`)).toMatchInlineSnapshot(`
-    "@utility .foo {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should format PostCSS nodes in the `user` bucket', async () => {
-  expect(await migrate(`@tw-bucket user { @tw-format .bar { .foo { color: red; } } }`))
-    .toMatchInlineSnapshot(`
-      "@tw-format .bar {
-        .foo {
-          color: red;
-        }
-      }"
-    `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/format-nodes.ts b/packages/@tailwindcss-upgrade/src/codemods/css/format-nodes.ts
deleted file mode 100644
index 489f2d349..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/format-nodes.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import postcss, { type ChildNode, type Plugin, type Root } from 'postcss'
-import { format, type Options } from 'prettier'
-import { walk } from '../../utils/walk'
-
-const FORMAT_OPTIONS: Options = {
-  parser: 'css',
-  semi: true,
-  singleQuote: true,
-}
-
-// Prettier is used to generate cleaner output, but it's only used on the nodes
-// that were marked as `pretty` during the migration.
-export function formatNodes(): Plugin {
-  async function migrate(root: Root) {
-    // Find the nodes to format
-    let nodesToFormat: ChildNode[] = []
-    walk(root, (child, _idx, parent) => {
-      // Always print semicolons after at-rules
-      if (child.type === 'atrule') {
-        child.raws.semicolon = true
-      }
-
-      if (child.type === 'atrule' && child.name === 'tw-bucket') {
-        nodesToFormat.push(child)
-      } else if (child.raws.tailwind_pretty) {
-        // @ts-expect-error We might not have a parent
-        child.parent ??= parent
-        nodesToFormat.unshift(child)
-      }
-    })
-
-    let output: string[] = []
-
-    // Format the nodes
-    for (let node of nodesToFormat) {
-      let contents = (() => {
-        if (node.type === 'atrule' && node.name === 'tw-bucket') {
-          // Remove the `@tw-bucket` wrapping, and use the contents directly.
-          return node
-            .toString()
-            .trim()
-            .replace(/@tw-bucket(.*?){([\s\S]*)}/, '$2')
-        }
-
-        return node.toString()
-      })()
-
-      // Do not format the user bucket to ensure we keep the user's formatting
-      // intact.
-      if (node.type === 'atrule' && node.name === 'tw-bucket' && node.params === 'user') {
-        output.push(contents)
-        continue
-      }
-
-      // Format buckets
-      if (node.type === 'atrule' && node.name === 'tw-bucket') {
-        output.push(await format(contents, FORMAT_OPTIONS))
-        continue
-      }
-
-      // Format any other nodes
-      node.replaceWith(
-        postcss.parse(
-          `${node.raws.before ?? ''}${(await format(contents, FORMAT_OPTIONS)).trim()}`,
-        ),
-      )
-    }
-
-    root.removeAll()
-    root.append(
-      postcss.parse(
-        output
-          .map((bucket) => bucket.trim())
-          .filter(Boolean)
-          .join('\n\n'),
-      ),
-    )
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/format-nodes',
-    OnceExit: migrate,
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/link.ts b/packages/@tailwindcss-upgrade/src/codemods/css/link.ts
deleted file mode 100644
index 04c2dd770..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/link.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { normalizePath } from '@tailwindcss/node'
-import path from 'node:path'
-import postcss from 'postcss'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-import { Stylesheet } from '../../stylesheet'
-import { error, highlight, relative, success } from '../../utils/renderer'
-import { detectConfigPath } from '../template/prepare-config'
-
-export async function linkConfigs(
-  stylesheets: Stylesheet[],
-  { configPath, base }: { configPath: string | null; base: string },
-) {
-  let rootStylesheets = stylesheets.filter((sheet) => sheet.isTailwindRoot)
-  if (rootStylesheets.length === 0) {
-    throw new Error(
-      `Cannot find any CSS files that reference Tailwind CSS.\nBefore your project can be upgraded you need to create a CSS file that imports Tailwind CSS or uses ${highlight('@tailwind')}.`,
-    )
-  }
-  let withoutAtConfig = rootStylesheets.filter((sheet) => {
-    let hasConfig = false
-    sheet.root.walkAtRules('config', (node) => {
-      let configPath = path.resolve(path.dirname(sheet.file!), node.params.slice(1, -1))
-      sheet.linkedConfigPath = configPath
-      hasConfig = true
-      return false
-    })
-    return !hasConfig
-  })
-
-  // All stylesheets have a `@config` directives
-  if (withoutAtConfig.length === 0) return
-
-  // Find the config file path for each stylesheet
-  let configPathBySheet = new Map<Stylesheet, string>()
-  let sheetByConfigPath = new DefaultMap<string, Set<Stylesheet>>(() => new Set())
-  for (let sheet of withoutAtConfig) {
-    if (!sheet.file) continue
-
-    let localConfigPath = configPath as string
-    if (configPath === null) {
-      localConfigPath = await detectConfigPath(path.dirname(sheet.file), base)
-    } else if (!path.isAbsolute(localConfigPath)) {
-      localConfigPath = path.resolve(base, localConfigPath)
-    }
-
-    configPathBySheet.set(sheet, localConfigPath)
-    sheetByConfigPath.get(localConfigPath).add(sheet)
-  }
-
-  let problematicStylesheets = new Set<Stylesheet>()
-  for (let sheets of sheetByConfigPath.values()) {
-    if (sheets.size > 1) {
-      for (let sheet of sheets) {
-        problematicStylesheets.add(sheet)
-      }
-    }
-  }
-
-  // There are multiple "root" files without `@config` directives. Manual
-  // intervention is needed to link to the correct Tailwind config files.
-  if (problematicStylesheets.size > 1) {
-    for (let sheet of problematicStylesheets) {
-      error(
-        `Could not determine configuration file for: ${highlight(relative(sheet.file!, base))}\nUpdate your stylesheet to use ${highlight('@config')} to specify the correct configuration file explicitly and then run the upgrade tool again.`,
-        { prefix: '↳ ' },
-      )
-    }
-
-    process.exit(1)
-  }
-
-  let relativePath = relative
-  for (let [sheet, configPath] of configPathBySheet) {
-    try {
-      if (!sheet || !sheet.file) return
-      success(
-        `Linked ${highlight(relativePath(configPath, base))} to ${highlight(relativePath(sheet.file, base))}`,
-        { prefix: '↳ ' },
-      )
-
-      // Link the `@config` directive to the root stylesheets
-
-      // Track the config file path on the stylesheet itself for easy access
-      // without traversing the CSS ast and finding the corresponding
-      // `@config` later.
-      sheet.linkedConfigPath = configPath
-
-      // Create a relative path from the current file to the config file.
-      let relative = path.relative(path.dirname(sheet.file), configPath)
-
-      // If the path points to a file in the same directory, `path.relative` will
-      // remove the leading `./` and we need to add it back in order to still
-      // consider the path relative
-      if (!relative.startsWith('.') && !path.isAbsolute(relative)) {
-        relative = './' + relative
-      }
-
-      relative = normalizePath(relative)
-
-      // Add the `@config` directive to the root stylesheet.
-      {
-        let target = sheet.root as postcss.Root | postcss.AtRule
-        let atConfig = postcss.atRule({ name: 'config', params: `'${relative}'` })
-
-        sheet.root.walkAtRules((node) => {
-          if (node.name === 'tailwind' || node.name === 'import') {
-            target = node
-          }
-        })
-
-        if (target.type === 'root') {
-          sheet.root.prepend(atConfig)
-        } else if (target.type === 'atrule') {
-          target.after(atConfig)
-        }
-      }
-    } catch (e: any) {
-      error('Could not load the configuration file: ' + e.message, { prefix: '↳ ' })
-      process.exit(1)
-    }
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.test.ts
deleted file mode 100644
index 9f6a92008..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.test.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it, vi } from 'vitest'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import * as versions from '../../utils/version'
-import { migrateAtApply } from './migrate-at-apply'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-const css = dedent
-
-async function migrate(input: string, config: Config = {}) {
-  let designSystem = await __unstable__loadDesignSystem(
-    css`
-      @import 'tailwindcss';
-
-      /* TODO(perf): Only here to speed up the tests */
-      @theme {
-        --*: initial;
-      }
-    `,
-    { base: __dirname },
-  )
-
-  return postcss()
-    .use(
-      migrateAtApply({
-        designSystem,
-        userConfig: config,
-      }),
-    )
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it('should not migrate `@apply`, when there are no issues', async () => {
-  expect(
-    await migrate(css`
-      .foo {
-        @apply flex flex-col items-center;
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    ".foo {
-      @apply flex flex-col items-center;
-    }"
-  `)
-})
-
-it('should append `!` to each utility, when using `!important`', async () => {
-  expect(
-    await migrate(css`
-      .foo {
-        @apply flex flex-col !important;
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    ".foo {
-      @apply flex! flex-col!;
-    }"
-  `)
-})
-
-it('should move the legacy `!` prefix, to the new `!` postfix notation', async () => {
-  expect(
-    await migrate(css`
-      .foo {
-        @apply !flex flex-col! hover:!items-start items-center;
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    ".foo {
-      @apply flex! flex-col! hover:items-start! items-center;
-    }"
-  `)
-})
-
-it(
-  'should apply all candidate migration when migrating with a config',
-  { timeout: 10_000 },
-  async () => {
-    async function migrateWithPrefix(input: string) {
-      return postcss()
-        .use(
-          migrateAtApply({
-            designSystem: await __unstable__loadDesignSystem(
-              css`
-                @import 'tailwindcss' prefix(tw);
-
-                /* TODO(perf): Only here to speed up the tests */
-                @theme {
-                  --*: initial;
-                }
-              `,
-              { base: __dirname },
-            ),
-            userConfig: {
-              prefix: 'tw_',
-            },
-          }),
-        )
-        .process(input, { from: expect.getState().testPath })
-        .then((result) => result.css)
-    }
-
-    expect(
-      await migrateWithPrefix(css`
-        .foo {
-          @apply !tw_flex [color:--my-color] tw_bg-gradient-to-t;
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-    ".foo {
-      @apply tw:flex! tw:text-(--my-color) tw:bg-linear-to-t;
-    }"
-  `)
-  },
-)
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.ts
deleted file mode 100644
index 69f92688d..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { AtRule, Plugin } from 'postcss'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-import { migrateCandidate } from '../template/migrate'
-
-export function migrateAtApply({
-  designSystem,
-  userConfig,
-}: {
-  designSystem: DesignSystem | null
-  userConfig: Config | null
-}): Plugin {
-  function migrate(atRule: AtRule) {
-    let utilities = atRule.params.split(/(\s+)/)
-    let important =
-      utilities[utilities.length - 1] === '!important' ||
-      utilities[utilities.length - 1] === '#{!important}' // Sass/SCSS
-
-    if (important) utilities.pop() // Remove `!important`
-
-    let params = utilities.map((part) => {
-      // Keep whitespace
-      if (part.trim() === '') return part
-      let variants = segment(part, ':')
-      let utility = variants.pop()!
-
-      // Apply the important modifier to all the rules if necessary
-      if (important && utility[0] !== '!' && utility[utility.length - 1] !== '!') {
-        utility += '!'
-      }
-
-      // Reconstruct the utility with the variants
-      return [...variants, utility].join(':')
-    })
-
-    return async () => {
-      if (!designSystem) return
-
-      // If we have a valid designSystem and config setup, we can run all
-      // candidate migrations on each utility
-      params = await Promise.all(
-        params.map(async (param) => await migrateCandidate(designSystem, userConfig, param)),
-      )
-
-      atRule.params = params.join('').trim()
-    }
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-at-apply',
-    async OnceExit(root) {
-      let migrations: (() => void)[] = []
-      root.walkAtRules('apply', (atRule) => {
-        migrations.push(migrate(atRule))
-      })
-
-      await Promise.allSettled(migrations.map((m) => m()))
-    },
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.test.ts
deleted file mode 100644
index e115951d3..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.test.ts
+++ /dev/null
@@ -1,1178 +0,0 @@
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { describe, expect, it, vi } from 'vitest'
-import { Stylesheet } from '../../stylesheet'
-import * as versions from '../../utils/version'
-import { formatNodes } from './format-nodes'
-import { migrateAtLayerUtilities } from './migrate-at-layer-utilities'
-import { sortBuckets } from './sort-buckets'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-const css = dedent
-
-async function migrate(
-  data:
-    | string
-    | {
-        root: postcss.Root
-        layers?: string[]
-      },
-) {
-  let stylesheet: Stylesheet
-
-  if (typeof data === 'string') {
-    stylesheet = await Stylesheet.fromString(data)
-  } else {
-    stylesheet = await Stylesheet.fromRoot(data.root)
-
-    if (data.layers) {
-      let meta = { layers: data.layers }
-      let parent = await Stylesheet.fromString('.placeholder {}')
-
-      stylesheet.parents.add({ item: parent, meta })
-      parent.children.add({ item: stylesheet, meta })
-    }
-  }
-
-  return postcss()
-    .use(migrateAtLayerUtilities(stylesheet))
-    .use(sortBuckets())
-    .use(formatNodes())
-    .process(stylesheet.root!, { from: expect.getState().testPath })
-    .then((result) => `\n${result.css.trim()}\n`)
-}
-
-it('should migrate simple `@layer utilities` to `@utility`', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .foo {
-          color: red;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      color: red;
-    }
-    "
-  `)
-})
-
-it('should split multiple selectors in separate utilities', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .foo,
-        .bar {
-          color: red;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      color: red;
-    }
-
-    @utility bar {
-      color: red;
-    }
-    "
-  `)
-})
-
-it('should merge `@utility` with the same name', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .foo {
-          color: red;
-        }
-      }
-
-      .bar {
-        color: blue;
-      }
-
-      @layer utilities {
-        .foo {
-          font-weight: bold;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      color: red;
-      font-weight: bold;
-    }
-
-    .bar {
-      color: blue;
-    }
-    "
-  `)
-})
-
-it('should leave non-class utilities alone', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        /* 1. */
-        #before {
-          /* 1.1. */
-          color: red;
-          /* 1.2. */
-          .bar {
-            /* 1.2.1. */
-            font-weight: bold;
-          }
-        }
-
-        /* 2. */
-        .foo {
-          /* 2.1. */
-          color: red;
-          /* 2.2. */
-          .bar {
-            /* 2.2.1. */
-            font-weight: bold;
-          }
-        }
-
-        /* 3. */
-        #after {
-          /* 3.1. */
-          color: blue;
-          /* 3.2. */
-          .bar {
-            /* 3.2.1. */
-            font-weight: bold;
-          }
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      /* 2. */
-      /* 2.1. */
-      color: red;
-      /* 2.2. */
-      .bar {
-        /* 2.2.1. */
-        font-weight: bold;
-      }
-    }
-
-    @layer utilities {
-      /* 1. */
-      #before {
-        /* 1.1. */
-        color: red;
-        /* 1.2. */
-        .bar {
-          /* 1.2.1. */
-          font-weight: bold;
-        }
-      }
-
-      /* 3. */
-      #after {
-        /* 3.1. */
-        color: blue;
-        /* 3.2. */
-        .bar {
-          /* 3.2.1. */
-          font-weight: bold;
-        }
-      }
-    }
-    "
-  `)
-})
-
-it('should not convert empty classes into `@utility` since that would make them invalid', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .good {
-          color: red;
-        }
-
-        .bad-empty {
-        }
-
-        /* Comment above */
-        .bad-with-comment-above {
-        }
-
-        .bad-with-comment-inside {
-          /* Comment inside */
-        }
-
-        .bad-with-comment-below {
-        }
-        /* Comment below */
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility good {
-      color: red;
-    }
-
-    @layer utilities {
-      .bad-empty {
-      }
-
-      /* Comment above */
-      .bad-with-comment-above {
-      }
-
-      .bad-with-comment-inside {
-        /* Comment inside */
-      }
-
-      .bad-with-comment-below {
-      }
-      /* Comment below */
-    }
-    "
-  `)
-})
-
-it('should migrate simple `@layer utilities` with nesting to `@utility`', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .foo {
-          color: red;
-
-          &:hover {
-            color: blue;
-          }
-
-          &:focus {
-            color: green;
-          }
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      color: red;
-
-      &:hover {
-        color: blue;
-      }
-
-      &:focus {
-        color: green;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate multiple simple `@layer utilities` to `@utility`', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .foo {
-          color: red;
-        }
-
-        .bar {
-          color: blue;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      color: red;
-    }
-
-    @utility bar {
-      color: blue;
-    }
-    "
-  `)
-})
-
-it('should not migrate Rules inside of Rules to a `@utility`', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .foo {
-          color: red;
-        }
-
-        .bar {
-          color: blue;
-
-          .baz {
-            color: green;
-          }
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      color: red;
-    }
-
-    @utility bar {
-      color: blue;
-
-      .baz {
-        color: green;
-      }
-    }
-    "
-  `)
-})
-
-it('should invert at-rules to make them migrate-able', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        @media (min-width: 640px) {
-          .foo {
-            color: red;
-          }
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      @media (min-width: 640px) {
-        color: red;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate at-rules with multiple utilities and invert them', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        @media (min-width: 640px) {
-          .foo {
-            color: red;
-          }
-        }
-      }
-
-      @layer utilities {
-        @media (min-width: 640px) {
-          .bar {
-            color: blue;
-          }
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      @media (min-width: 640px) {
-        color: red;
-      }
-    }
-
-    @utility bar {
-      @media (min-width: 640px) {
-        color: blue;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate deeply nested at-rules with multiple utilities and invert them', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        @media (min-width: 640px) {
-          .foo {
-            color: red;
-          }
-
-          .bar {
-            color: blue;
-          }
-
-          @media (min-width: 1024px) {
-            .baz {
-              color: green;
-            }
-
-            @media (min-width: 1280px) {
-              .qux {
-                color: yellow;
-              }
-            }
-          }
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      @media (min-width: 640px) {
-        color: red;
-      }
-    }
-
-    @utility bar {
-      @media (min-width: 640px) {
-        color: blue;
-      }
-    }
-
-    @utility baz {
-      @media (min-width: 640px) {
-        @media (min-width: 1024px) {
-          color: green;
-        }
-      }
-    }
-
-    @utility qux {
-      @media (min-width: 640px) {
-        @media (min-width: 1024px) {
-          @media (min-width: 1280px) {
-            color: yellow;
-          }
-        }
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate classes with pseudo elements', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .no-scrollbar::-webkit-scrollbar {
-          display: none;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility no-scrollbar {
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate classes with attribute selectors', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .no-scrollbar[data-checked=''] {
-          display: none;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility no-scrollbar {
-      &[data-checked=''] {
-        display: none;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate classes with element selectors', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .no-scrollbar main {
-          display: none;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility no-scrollbar {
-      & main {
-        display: none;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate classes attached to an element selector', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        main.no-scrollbar {
-          display: none;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility no-scrollbar {
-      &main {
-        display: none;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate classes with id selectors', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .no-scrollbar#main {
-          display: none;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility no-scrollbar {
-      &#main {
-        display: none;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate classes with another attached class', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .no-scrollbar.main {
-          display: none;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility no-scrollbar {
-      &.main {
-        display: none;
-      }
-    }
-
-    @utility main {
-      &.no-scrollbar {
-        display: none;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate a selector with multiple classes to multiple @utility definitions', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .foo .bar:hover .baz:focus {
-          display: none;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      & .bar:hover .baz:focus {
-        display: none;
-      }
-    }
-
-    @utility bar {
-      .foo &:hover .baz:focus {
-        display: none;
-      }
-    }
-
-    @utility baz {
-      .foo .bar:hover &:focus {
-        display: none;
-      }
-    }
-    "
-  `)
-})
-
-it('should merge `@utility` definitions with the same name', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .step {
-          counter-increment: step;
-        }
-
-        .step:before {
-          @apply absolute w-7 h-7 bg-default-100 rounded-full font-medium text-center text-base inline-flex items-center justify-center -indent-px;
-          @apply ml-[-41px];
-          content: counter(step);
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility step {
-      counter-increment: step;
-
-      &:before {
-        @apply absolute w-7 h-7 bg-default-100 rounded-full font-medium text-center text-base inline-flex items-center justify-center -indent-px;
-        @apply ml-[-41px];
-        content: counter(step);
-      }
-    }
-    "
-  `)
-})
-
-it('should not migrate nested classes inside a `:not(…)`', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        .foo .bar:not(.qux):has(.baz) {
-          display: none;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      & .bar:not(.qux):has(.baz) {
-        display: none;
-      }
-    }
-
-    @utility bar {
-      .foo &:not(.qux):has(.baz) {
-        display: none;
-      }
-    }
-
-    @utility baz {
-      .foo .bar:not(.qux):has(&) {
-        display: none;
-      }
-    }
-    "
-  `)
-})
-
-it('should migrate advanced combinations', async () => {
-  expect(
-    await migrate(css`
-      @layer utilities {
-        @media (width >= 100px) {
-          @supports (display: none) {
-            .foo .bar:not(.qux):has(.baz) {
-              display: none;
-            }
-          }
-
-          .bar {
-            color: red;
-          }
-        }
-
-        @media (width >= 200px) {
-          .foo {
-            &:hover {
-              @apply bg-red-500;
-
-              .bar {
-                color: red;
-              }
-            }
-          }
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @utility foo {
-      @media (width >= 100px) {
-        @supports (display: none) {
-          & .bar:not(.qux):has(.baz) {
-            display: none;
-          }
-        }
-      }
-
-      @media (width >= 200px) {
-        &:hover {
-          @apply bg-red-500;
-
-          .bar {
-            color: red;
-          }
-        }
-      }
-    }
-
-    @utility bar {
-      @media (width >= 100px) {
-        @supports (display: none) {
-          .foo &:not(.qux):has(.baz) {
-            display: none;
-          }
-        }
-        color: red;
-      }
-    }
-
-    @utility baz {
-      @media (width >= 100px) {
-        @supports (display: none) {
-          .foo .bar:not(.qux):has(&) {
-            display: none;
-          }
-        }
-      }
-    }
-    "
-  `)
-})
-
-describe('comments', () => {
-  it('should preserve comment location for a simple utility', async () => {
-    expect(
-      await migrate(css`
-        /* Start of utilities: */
-        @layer utilities {
-          /* Utility #1 */
-          .foo {
-            /* Declarations: */
-            color: red;
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      /* Start of utilities: */
-
-      @utility foo {
-        /* Utility #1 */
-        /* Declarations: */
-        color: red;
-      }
-      "
-    `)
-  })
-
-  it('should copy comments when creating multiple utilities from a single selector', async () => {
-    expect(
-      await migrate(css`
-        /* Start of utilities: */
-        @layer utilities {
-          /* Foo & Bar */
-          .foo .bar {
-            /* Declarations: */
-            color: red;
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      /* Start of utilities: */
-
-      @utility foo {
-        /* Foo & Bar */
-        & .bar {
-          /* Declarations: */
-          color: red;
-        }
-      }
-
-      @utility bar {
-        /* Foo & Bar */
-        .foo & {
-          /* Declarations: */
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  it('should preserve comments for utilities wrapped in at-rules', async () => {
-    expect(
-      await migrate(css`
-        /* Start of utilities: */
-        @layer utilities {
-          /* Mobile only */
-          @media (width <= 640px) {
-            /* Utility #1 */
-            .foo {
-              /* Declarations: */
-              color: red;
-            }
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      /* Start of utilities: */
-
-      @utility foo {
-        /* Mobile only */
-        @media (width <= 640px) {
-          /* Utility #1 */
-          /* Declarations: */
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  it('should preserve comment locations as best as possible', async () => {
-    expect(
-      await migrate(css`
-        /* Above */
-        .before {
-          /* Inside */
-        }
-        /* After */
-
-        /* Tailwind Utilities: */
-        @layer utilities {
-          /* Chrome, Safari and Opera */
-          /* Second comment */
-          @media (min-width: 640px) {
-            /* Foobar */
-            .no-scrollbar::-webkit-scrollbar {
-              display: none;
-            }
-          }
-
-          /* Firefox, IE and Edge */
-          /* Second comment */
-          .no-scrollbar {
-            -ms-overflow-style: none; /* IE and Edge */
-            scrollbar-width: none; /* Firefox */
-          }
-        }
-
-        /* Above */
-        .after {
-          /* Inside */
-        }
-        /* After */
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      /* Tailwind Utilities: */
-
-      @utility no-scrollbar {
-        /* Chrome, Safari and Opera */
-        /* Second comment */
-        @media (min-width: 640px) {
-          /* Foobar */
-          &::-webkit-scrollbar {
-            display: none;
-          }
-        }
-
-        /* Firefox, IE and Edge */
-        /* Second comment */
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-      }
-
-      /* Above */
-      .before {
-        /* Inside */
-      }
-      /* After */
-
-      /* Above */
-      .after {
-        /* Inside */
-      }
-      /* After */
-      "
-    `)
-  })
-})
-
-// Saw this when testing codemods on https://github.com/docker/docs
-it('should not lose attribute selectors', async () => {
-  expect(
-    await migrate(css`
-      @layer components {
-        #TableOfContents {
-          .toc a {
-            @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
-            &[aria-current='true'],
-            &:hover {
-              @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
-            }
-            &:not([aria-current='true']) {
-              @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
-            }
-          }
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer components {
-      #TableOfContents {
-        .toc a {
-          @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
-          &[aria-current='true'],
-          &:hover {
-            @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
-          }
-          &:not([aria-current='true']) {
-            @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
-          }
-        }
-      }
-    }
-    "
-  `)
-})
-
-describe('layered stylesheets', () => {
-  it('should transform classes to utilities inside a layered stylesheet (utilities)', async () => {
-    expect(
-      await migrate({
-        root: postcss.parse(css`
-          /* Utility #1 */
-          .foo {
-            /* Declarations: */
-            color: red;
-          }
-        `),
-        layers: ['utilities'],
-      }),
-    ).toMatchInlineSnapshot(`
-      "
-      @utility foo {
-        /* Utility #1 */
-        /* Declarations: */
-        color: red;
-      }
-      "
-    `)
-  })
-
-  it('should transform classes to utilities inside a layered stylesheet (components)', async () => {
-    expect(
-      await migrate({
-        root: postcss.parse(css`
-          /* Utility #1 */
-          .foo {
-            /* Declarations: */
-            color: red;
-          }
-        `),
-        layers: ['components'],
-      }),
-    ).toMatchInlineSnapshot(`
-      "
-      @utility foo {
-        /* Utility #1 */
-        /* Declarations: */
-        color: red;
-      }
-      "
-    `)
-  })
-
-  it('should NOT transform classes to utilities inside a non-utility, layered stylesheet', async () => {
-    expect(
-      await migrate({
-        root: postcss.parse(css`
-          /* Utility #1 */
-          .foo {
-            /* Declarations: */
-            color: red;
-          }
-        `),
-        layers: ['foo'],
-      }),
-    ).toMatchInlineSnapshot(`
-      "
-      /* Utility #1 */
-      .foo {
-        /* Declarations: */
-        color: red;
-      }
-      "
-    `)
-  })
-
-  it('should handle non-classes in utility-layered stylesheets', async () => {
-    expect(
-      await migrate({
-        root: postcss.parse(css`
-          /* Utility #1 */
-          .foo {
-            /* Declarations: */
-            color: red;
-          }
-          #main {
-            color: red;
-          }
-        `),
-        layers: ['utilities'],
-      }),
-    ).toMatchInlineSnapshot(`
-      "
-      @utility foo {
-        /* Utility #1 */
-        /* Declarations: */
-        color: red;
-      }
-
-      #main {
-        color: red;
-      }
-      "
-    `)
-  })
-
-  it('should handle non-classes in utility-layered stylesheets', async () => {
-    expect(
-      await migrate({
-        root: postcss.parse(css`
-          @layer utilities {
-            @layer utilities {
-              /* Utility #1 */
-              .foo {
-                /* Declarations: */
-                color: red;
-              }
-            }
-
-            /* Utility #2 */
-            .bar {
-              /* Declarations: */
-              color: red;
-            }
-
-            #main {
-              color: red;
-            }
-          }
-
-          /* Utility #3 */
-          .baz {
-            /* Declarations: */
-            color: red;
-          }
-
-          #secondary {
-            color: red;
-          }
-        `),
-        layers: ['utilities'],
-      }),
-    ).toMatchInlineSnapshot(`
-      "
-      @utility foo {
-        @layer utilities {
-          @layer utilities {
-            /* Utility #1 */
-            /* Declarations: */
-            color: red;
-          }
-        }
-      }
-
-      @utility bar {
-        @layer utilities {
-          /* Utility #2 */
-          /* Declarations: */
-          color: red;
-        }
-      }
-
-      @utility baz {
-        /* Utility #3 */
-        /* Declarations: */
-        color: red;
-      }
-
-      @layer utilities {
-
-        #main {
-          color: red;
-        }
-      }
-
-      #secondary {
-        color: red;
-      }
-      "
-    `)
-  })
-
-  it('imports are preserved in layered stylesheets', async () => {
-    expect(
-      await migrate({
-        root: postcss.parse(css`
-          @import 'thing';
-
-          .foo {
-            color: red;
-          }
-        `),
-        layers: ['utilities'],
-      }),
-    ).toMatchInlineSnapshot(`
-      "
-      @import 'thing';
-
-      @utility foo {
-        color: red;
-      }
-      "
-    `)
-  })
-
-  it('charset is preserved in layered stylesheets', async () => {
-    expect(
-      await migrate({
-        root: postcss.parse(css`
-          @charset "utf-8";
-
-          .foo {
-            color: red;
-          }
-        `),
-        layers: ['utilities'],
-      }),
-    ).toMatchInlineSnapshot(`
-      "
-      @charset "utf-8";
-
-      @utility foo {
-        color: red;
-      }
-      "
-    `)
-  })
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.ts
deleted file mode 100644
index 6bcb72d47..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-layer-utilities.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-import { type AtRule, type Comment, type Container, type Plugin, type Rule } from 'postcss'
-import SelectorParser from 'postcss-selector-parser'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-import { Stylesheet } from '../../stylesheet'
-import * as version from '../../utils/version'
-import { walk, WalkAction, walkDepth } from '../../utils/walk'
-
-export function migrateAtLayerUtilities(stylesheet: Stylesheet): Plugin {
-  function migrate(atRule: AtRule) {
-    // Migrating `@layer utilities` to `@utility` is only supported in Tailwind
-    // CSS v3 projects. Tailwind CSS v4 projects could also have `@layer
-    // utilities` but those aren't actual utilities.
-    if (!version.isMajor(3)) return
-
-    // Only migrate `@layer utilities` and `@layer components`.
-    if (atRule.params !== 'utilities' && atRule.params !== 'components') return
-
-    // Keep rules that should not be turned into utilities as is. This will
-    // include rules with element or ID selectors.
-    let defaultsAtRule = atRule.clone()
-
-    // Clone each rule with multiple selectors into their own rule with a single
-    // selector.
-    walk(atRule, (node) => {
-      if (node.type !== 'rule') return
-
-      // Clone the node for each selector
-      let selectors = segment(node.selector, ',')
-      if (selectors.length > 1) {
-        let clonedNodes: Rule[] = []
-        for (let selector of selectors) {
-          let clone = node.clone({ selector })
-          clonedNodes.push(clone)
-        }
-        node.replaceWith(clonedNodes)
-      }
-
-      return WalkAction.Skip
-    })
-
-    // Track all the classes that we want to create an `@utility` for.
-    let classes = new Set<string>()
-
-    walk(atRule, (node) => {
-      if (node.type !== 'rule') return
-      if (isEmpty(node)) return
-
-      // Find all the classes in the selector
-      SelectorParser((selectors) => {
-        selectors.each((selector) => {
-          walk(selector, (selectorNode) => {
-            // Ignore everything in `:not(…)`
-            if (selectorNode.type === 'pseudo' && selectorNode.value === ':not') {
-              return WalkAction.Skip
-            }
-
-            if (selectorNode.type === 'class') {
-              classes.add(selectorNode.value)
-            }
-          })
-        })
-      }).processSync(node.selector, { updateSelector: false })
-
-      return WalkAction.Skip
-    })
-
-    // Remove all the nodes from the default `@layer utilities` that we know
-    // should be turned into `@utility` at-rules.
-    walk(defaultsAtRule, (node) => {
-      if (node.type !== 'rule') return
-
-      SelectorParser((selectors) => {
-        selectors.each((selector) => {
-          walk(selector, (selectorNode) => {
-            // Ignore everything in `:not(…)`
-            if (selectorNode.type === 'pseudo' && selectorNode.value === ':not') {
-              return WalkAction.Skip
-            }
-
-            // Remove the node if the class is in the list
-            if (selectorNode.type === 'class' && classes.has(selectorNode.value)) {
-              node.remove()
-              return WalkAction.Stop
-            }
-          })
-        })
-      }).processSync(node, { updateSelector: true })
-    })
-
-    // Upgrade every Rule in `@layer utilities` to an `@utility` at-rule.
-    let clones: AtRule[] = [defaultsAtRule]
-    for (let cls of classes) {
-      let clone = atRule.clone()
-      clones.push(clone)
-
-      walk(clone, (node) => {
-        if (node.type === 'atrule') {
-          if (!node.nodes || node.nodes?.length === 0) {
-            node.remove()
-          }
-        }
-
-        if (node.type !== 'rule') return
-
-        // Fan out each utility into its own rule.
-        //
-        // E.g.:
-        // ```css
-        // .foo .bar:hover .baz {
-        //   color: red;
-        // }
-        // ```
-        //
-        // Becomes:
-        // ```css
-        // @utility foo {
-        //   & .bar:hover .baz {
-        //     color: red;
-        //   }
-        // }
-        //
-        // @utility bar {
-        //   .foo &:hover .baz {
-        //     color: red;
-        //   }
-        // }
-        //
-        // @utility baz {
-        //   .foo .bar:hover & {
-        //     color: red;
-        //   }
-        // }
-        // ```
-        let containsClass = false
-        SelectorParser((selectors) => {
-          selectors.each((selector) => {
-            walk(selector, (selectorNode) => {
-              // Ignore everything in `:not(…)`
-              if (selectorNode.type === 'pseudo' && selectorNode.value === ':not') {
-                return WalkAction.Skip
-              }
-
-              // Replace the class with `&` and track the new selector
-              if (selectorNode.type === 'class' && selectorNode.value === cls) {
-                containsClass = true
-
-                // Find the node in the clone based on the position of the
-                // original node.
-                let target = selector.atPosition(
-                  selectorNode.source!.start!.line,
-                  selectorNode.source!.start!.column,
-                )
-
-                // Keep moving the target to the front until we hit the start or
-                // find a combinator. This is to prevent `.foo.bar` from
-                // becoming `.bar&`. Instead we want `&.bar`.
-                let parent = target.parent!
-                let idx = (target.parent?.index(target) ?? 0) - 1
-                while (idx >= 0 && parent.at(idx)?.type !== 'combinator') {
-                  let current = parent.at(idx + 1)
-                  let previous = parent.at(idx)
-                  parent.at(idx + 1).replaceWith(previous)
-                  parent.at(idx).replaceWith(current)
-
-                  idx--
-                }
-
-                // Replace the class with `&`
-                target.replaceWith(SelectorParser.nesting())
-              }
-            })
-          })
-        }).processSync(node, { updateSelector: true })
-
-        // Cleanup all the nodes that should not be part of the `@utility` rule.
-        if (!containsClass) {
-          let toRemove: (Comment | Rule)[] = [node]
-          let idx = node.parent?.index(node) ?? null
-          if (idx !== null) {
-            for (let i = idx - 1; i >= 0; i--) {
-              if (node.parent?.nodes.at(i)?.type === 'rule') {
-                break
-              }
-              if (node.parent?.nodes.at(i)?.type === 'comment') {
-                toRemove.push(node.parent?.nodes.at(i) as Comment)
-              }
-            }
-
-            let commentsAfter: Comment[] = []
-            for (let i = idx + 1; i < (node.parent?.nodes.length ?? 0); i++) {
-              if (node.parent?.nodes.at(i)?.type === 'rule') {
-                commentsAfter = []
-                break
-              }
-              if (node.parent?.nodes.at(i)?.type === 'comment') {
-                commentsAfter.push(node.parent?.nodes.at(i) as Comment)
-              }
-            }
-            toRemove.push(...commentsAfter)
-          }
-          for (let node of toRemove) {
-            node.remove()
-          }
-        }
-
-        return WalkAction.Skip
-      })
-
-      // Migrate the `@layer utilities` to `@utility <name>`
-      clone.name = 'utility'
-      clone.params = cls
-
-      clone.raws.before = `${clone.raws.before ?? ''}\n\n`
-    }
-
-    // Cleanup
-    for (let idx = clones.length - 1; idx >= 0; idx--) {
-      let clone = clones[idx]
-
-      walkDepth(clone, (node) => {
-        // Remove comments from the main `@layer utilities` we want to keep,
-        // that are part of any of the other clones.
-        if (clone === defaultsAtRule) {
-          if (node.type === 'comment') {
-            let found = false
-            for (let other of clones) {
-              if (other === defaultsAtRule) continue
-
-              walk(other, (child) => {
-                if (
-                  child.type === 'comment' &&
-                  child.source?.start?.offset === node.source?.start?.offset
-                ) {
-                  node.remove()
-                  found = true
-                  return WalkAction.Stop
-                }
-              })
-
-              if (found) {
-                return WalkAction.Skip
-              }
-            }
-          }
-        }
-
-        // Remove empty rules from `@utility` clones and empty wrapper at-rules
-        // from the default `@layer` clone.
-        if (
-          (node.type === 'atrule' && node.nodes?.length === 0) ||
-          (clone !== defaultsAtRule && node.type === 'rule' && node.nodes?.length === 0)
-        ) {
-          node.remove()
-        }
-
-        // Replace `&` selectors with its children
-        else if (node.type === 'rule' && node.selector === '&') {
-          interface PostCSSNode {
-            type: string
-            parent?: PostCSSNode
-          }
-
-          let parent: PostCSSNode | undefined = node.parent
-          let skip = false
-          while (parent) {
-            if (parent.type === 'rule') {
-              skip = true
-              break
-            }
-
-            parent = parent.parent
-          }
-
-          if (!skip) node.replaceWith(node.nodes)
-        }
-      })
-
-      // Remove empty clones entirely
-      if (clone.nodes?.length === 0) {
-        clones.splice(idx, 1)
-      } else if (clone === defaultsAtRule) {
-        let first = clone.nodes?.[0]
-        if (first) {
-          first.raws.before = first.raws.before?.replace(/\n\s*\n/g, '\n')
-        }
-      }
-    }
-
-    // Finally, replace the original `@layer utilities` with the new rules.
-    atRule.replaceWith(clones)
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-at-layer-utilities',
-    OnceExit: (root, { atRule }) => {
-      let layers = stylesheet.layers()
-      let isUtilityStylesheet = layers.has('utilities') || layers.has('components')
-
-      if (isUtilityStylesheet) {
-        let rule = atRule({ name: 'layer', params: 'utilities' })
-        rule.append(root.nodes)
-        root.append(rule)
-      }
-
-      // Migrate `@layer utilities` and `@layer components` into `@utility`.
-      // Using this instead of the visitor API in case we want to use
-      // postcss-nesting in the future.
-      root.walkAtRules('layer', migrate)
-
-      // Merge `@utility <name>` with the same name into a single rule. This can
-      // happen when the same classes is used in multiple `@layer utilities`
-      // blocks.
-      {
-        let utilities = new Map<string, AtRule>()
-        walk(root, (child) => {
-          if (child.type === 'atrule' && child.name === 'utility') {
-            let existing = utilities.get(child.params)
-            if (existing) {
-              existing.append(child.nodes!)
-              child.remove()
-            } else {
-              utilities.set(child.params, child)
-            }
-          }
-        })
-      }
-
-      // If the stylesheet is inside a layered import then we can remove the top-level layer directive we added
-      if (isUtilityStylesheet) {
-        root.each((node) => {
-          if (node.type !== 'atrule') return
-          if (node.name !== 'layer') return
-          if (node.params !== 'utilities') return
-
-          node.replaceWith(node.nodes ?? [])
-        })
-      }
-    },
-  }
-}
-
-function isEmpty(node: Container): boolean {
-  // We have no body
-  if (node.nodes === undefined) return false
-
-  // We have a body, but no nodes
-  if (node.nodes.length === 0) return true
-
-  // We have nodes, but they are only comments which we consider empty
-  if (node.nodes.every((child) => child.type === 'comment')) return true
-
-  // Not empty
-  return false
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-config.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-config.ts
deleted file mode 100644
index 2004d0969..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-config.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import path from 'node:path'
-import postcss, { AtRule, type Plugin } from 'postcss'
-import { normalizePath } from '../../../../@tailwindcss-node/src/normalize-path'
-import type { Stylesheet } from '../../stylesheet'
-import type { JSConfigMigration } from '../config/migrate-js-config'
-
-const ALREADY_INJECTED = new WeakMap<Stylesheet, string[]>()
-
-export function migrateConfig(
-  sheet: Stylesheet,
-  {
-    configFilePath,
-    jsConfigMigration,
-  }: { configFilePath: string | null; jsConfigMigration: JSConfigMigration | null },
-): Plugin {
-  function migrate() {
-    if (!sheet.isTailwindRoot) return
-    if (!configFilePath) return
-
-    let alreadyInjected = ALREADY_INJECTED.get(sheet)
-    if (alreadyInjected && alreadyInjected.includes(configFilePath)) {
-      return
-    } else if (alreadyInjected) {
-      alreadyInjected.push(configFilePath)
-    } else {
-      ALREADY_INJECTED.set(sheet, [configFilePath])
-    }
-
-    let root = sheet.root
-
-    // We don't have a sheet with a file path
-    if (!sheet.file) return
-
-    let cssConfig = new AtRule()
-
-    // Remove the `@config` directive if it exists and we couldn't migrate the
-    // config file.
-    if (jsConfigMigration !== null) {
-      root.walkAtRules('config', (node) => {
-        node.remove()
-      })
-
-      let css = '\n\n'
-      css += '\n@tw-bucket source {'
-      for (let source of jsConfigMigration.sources) {
-        let absolute = path.resolve(source.base, source.pattern)
-        css += `@source '${relativeToStylesheet(sheet, absolute)}';\n`
-      }
-      css += '}\n'
-
-      css += '\n@tw-bucket plugin {\n'
-      for (let plugin of jsConfigMigration.plugins) {
-        let relative =
-          plugin.path[0] === '.'
-            ? relativeToStylesheet(sheet, path.resolve(plugin.base, plugin.path))
-            : plugin.path
-
-        if (plugin.options === null) {
-          css += `@plugin '${relative}';\n`
-        } else {
-          css += `@plugin '${relative}' {\n`
-          for (let [property, value] of Object.entries(plugin.options)) {
-            let cssValue = ''
-            if (typeof value === 'string') {
-              cssValue = quoteString(value)
-            } else if (Array.isArray(value)) {
-              cssValue = value
-                .map((v) => (typeof v === 'string' ? quoteString(v) : '' + v))
-                .join(', ')
-            } else {
-              cssValue = '' + value
-            }
-
-            css += `  ${property}: ${cssValue};\n`
-          }
-          css += '}\n' // @plugin
-        }
-      }
-      css += '}\n' // @tw-bucket
-
-      cssConfig.append(postcss.parse(css + jsConfigMigration.css))
-    }
-
-    // Inject the `@config` directive
-    root.append(cssConfig.nodes)
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-config',
-    OnceExit: migrate,
-  }
-}
-
-function relativeToStylesheet(sheet: Stylesheet, absolute: string) {
-  if (!sheet.file) throw new Error('Can not find a path for the stylesheet')
-
-  let sheetPath = sheet.file
-
-  let relative = path.relative(path.dirname(sheetPath), absolute)
-  if (relative[0] !== '.') {
-    relative = `./${relative}`
-  }
-  // Ensure relative is a POSIX style path since we will merge it with the
-  // glob.
-  return normalizePath(relative)
-}
-
-function quoteString(value: string): string {
-  return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-import.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-import.test.ts
deleted file mode 100644
index 4fba6de52..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-import.test.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it } from 'vitest'
-import { migrateImport } from './migrate-import'
-
-const css = dedent
-
-async function migrate(input: string) {
-  return postcss()
-    .use(migrateImport())
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it('prints relative file imports as relative paths', async () => {
-  expect(
-    await migrate(css`
-      @import url('https://example.com');
-
-      @import 'fixtures/test';
-      @import 'fixtures/test.css';
-      @import './fixtures/test.css';
-      @import './fixtures/test';
-
-      @import 'fixtures/test' screen;
-      @import 'fixtures/test.css' screen;
-      @import './fixtures/test.css' screen;
-      @import './fixtures/test' screen;
-
-      @import 'fixtures/test' supports(display: grid);
-      @import 'fixtures/test.css' supports(display: grid);
-      @import './fixtures/test.css' supports(display: grid);
-      @import './fixtures/test' supports(display: grid);
-
-      @import 'fixtures/test' layer(utilities);
-      @import 'fixtures/test.css' layer(utilities);
-      @import './fixtures/test.css' layer(utilities);
-      @import './fixtures/test' layer(utilities);
-
-      @import 'fixtures/test' theme(inline);
-      @import 'fixtures/test.css' theme(inline);
-      @import './fixtures/test.css' theme(inline);
-      @import './fixtures/test' theme(inline);
-
-      @import 'fixtures/test' layer(utilities) supports(display: grid) screen and (min-width: 600px);
-      @import 'fixtures/test.css' layer(utilities) supports(display: grid) screen and
-        (min-width: 600px);
-      @import './fixtures/test.css' layer(utilities) supports(display: grid) screen and
-        (min-width: 600px);
-      @import './fixtures/test' layer(utilities) supports(display: grid) screen and
-        (min-width: 600px);
-
-      @import 'tailwindcss';
-      @import 'tailwindcss/theme.css';
-      @import 'tailwindcss/theme';
-    `),
-  ).toMatchInlineSnapshot(`
-    "@import url('https://example.com');
-
-    @import './fixtures/test.css';
-    @import './fixtures/test.css';
-    @import './fixtures/test.css';
-    @import './fixtures/test.css';
-
-    @import './fixtures/test.css' screen;
-    @import './fixtures/test.css' screen;
-    @import './fixtures/test.css' screen;
-    @import './fixtures/test.css' screen;
-
-    @import './fixtures/test.css' supports(display: grid);
-    @import './fixtures/test.css' supports(display: grid);
-    @import './fixtures/test.css' supports(display: grid);
-    @import './fixtures/test.css' supports(display: grid);
-
-    @import './fixtures/test.css' layer(utilities);
-    @import './fixtures/test.css' layer(utilities);
-    @import './fixtures/test.css' layer(utilities);
-    @import './fixtures/test.css' layer(utilities);
-
-    @import './fixtures/test.css' theme(inline);
-    @import './fixtures/test.css' theme(inline);
-    @import './fixtures/test.css' theme(inline);
-    @import './fixtures/test.css' theme(inline);
-
-    @import './fixtures/test.css' layer(utilities) supports(display: grid) screen and (min-width: 600px);
-    @import './fixtures/test.css' layer(utilities) supports(display: grid) screen and
-      (min-width: 600px);
-    @import './fixtures/test.css' layer(utilities) supports(display: grid) screen and
-      (min-width: 600px);
-    @import './fixtures/test.css' layer(utilities) supports(display: grid) screen and
-      (min-width: 600px);
-
-    @import 'tailwindcss';
-    @import 'tailwindcss/theme.css';
-    @import 'tailwindcss/theme';"
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-import.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-import.ts
deleted file mode 100644
index 419f5aa32..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-import.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import fs from 'node:fs/promises'
-import { dirname, resolve } from 'node:path'
-import { type Plugin, type Root } from 'postcss'
-import { parseImportParams } from '../../../../tailwindcss/src/at-import'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-import * as ValueParser from '../../../../tailwindcss/src/value-parser'
-
-export function migrateImport(): Plugin {
-  async function migrate(root: Root) {
-    let file = root.source?.input.file
-    if (!file) return
-
-    let promises: Promise<void>[] = []
-    root.walkAtRules('import', (rule) => {
-      try {
-        let [firstParam, ...rest] = segment(rule.params, ' ')
-
-        let params = parseImportParams(ValueParser.parse(firstParam))
-        if (!params) return
-
-        let isRelative = params.uri[0] === '.'
-        let hasCssExtension = params.uri.endsWith('.css')
-
-        if (isRelative && hasCssExtension) {
-          return
-        }
-
-        let fullPath = resolve(dirname(file), params.uri)
-        if (!hasCssExtension) fullPath += '.css'
-
-        promises.push(
-          fs.stat(fullPath).then(() => {
-            let ext = hasCssExtension ? '' : '.css'
-            let path = isRelative ? params.uri : `./${params.uri}`
-            rule.params = [`'${path}${ext}'`, ...rest].join(' ')
-          }),
-        )
-      } catch {
-        // When an error occurs while parsing the `@import` statement, we skip
-        // the import. This will happen in cases where you import an external
-        // URL.
-      }
-    })
-
-    await Promise.allSettled(promises)
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-import',
-    OnceExit: migrate,
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-media-screen.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-media-screen.test.ts
deleted file mode 100644
index 18ce72e8b..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-media-screen.test.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it } from 'vitest'
-import type { UserConfig } from '../../../../tailwindcss/src/compat/config/types'
-import { formatNodes } from './format-nodes'
-import { migrateMediaScreen } from './migrate-media-screen'
-import { sortBuckets } from './sort-buckets'
-
-const css = dedent
-
-async function migrate(input: string, userConfig: UserConfig = {}) {
-  return postcss()
-    .use(
-      migrateMediaScreen({
-        designSystem: await __unstable__loadDesignSystem(`@import 'tailwindcss';`, {
-          base: __dirname,
-        }),
-        userConfig,
-      }),
-    )
-    .use(sortBuckets())
-    .use(formatNodes())
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it('should migrate a built-in breakpoint', async () => {
-  expect(
-    await migrate(css`
-      @media screen(md) {
-        .foo {
-          color: red;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@media (width >= theme(--breakpoint-md)) {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should migrate `@screen` with a built-in breakpoint', async () => {
-  expect(
-    await migrate(css`
-      @screen md {
-        .foo {
-          color: red;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@media (width >= theme(--breakpoint-md)) {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should migrate a custom min-width screen (string)', async () => {
-  expect(
-    await migrate(
-      css`
-        @media screen(foo) {
-          .foo {
-            color: red;
-          }
-        }
-      `,
-      {
-        theme: {
-          screens: {
-            foo: '123px',
-          },
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "@media (width >= theme(--breakpoint-foo)) {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should migrate a custom min-width screen (object)', async () => {
-  expect(
-    await migrate(
-      css`
-        @media screen(foo) {
-          .foo {
-            color: red;
-          }
-        }
-      `,
-      {
-        theme: {
-          screens: {
-            foo: { min: '123px' },
-          },
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "@media (width >= theme(--breakpoint-foo)) {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should migrate a custom max-width screen', async () => {
-  expect(
-    await migrate(
-      css`
-        @media screen(foo) {
-          .foo {
-            color: red;
-          }
-        }
-      `,
-      {
-        theme: {
-          screens: {
-            foo: { max: '123px' },
-          },
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "@media (123px >= width) {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should migrate a custom min and max-width screen', async () => {
-  expect(
-    await migrate(
-      css`
-        @media screen(foo) {
-          .foo {
-            color: red;
-          }
-        }
-      `,
-      {
-        theme: {
-          screens: {
-            foo: { min: '100px', max: '123px' },
-          },
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "@media (123px >= width >= 100px) {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should migrate a raw media query', async () => {
-  expect(
-    await migrate(
-      css`
-        @media screen(foo) {
-          .foo {
-            color: red;
-          }
-        }
-      `,
-      {
-        theme: {
-          screens: {
-            foo: { raw: 'only screen and (min-width: 123px)' },
-          },
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "@media only screen and (min-width: 123px) {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-media-screen.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-media-screen.ts
deleted file mode 100644
index c10e9ee99..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-media-screen.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { type Plugin, type Root } from 'postcss'
-import { resolveConfig } from '../../../../tailwindcss/src/compat/config/resolve-config'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import { buildMediaQuery } from '../../../../tailwindcss/src/compat/screens-config'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-
-export function migrateMediaScreen({
-  designSystem,
-  userConfig,
-}: {
-  designSystem?: DesignSystem | null
-  userConfig?: Config | null
-} = {}): Plugin {
-  function migrate(root: Root) {
-    if (!designSystem || !userConfig) return
-
-    let { resolvedConfig } = resolveConfig(designSystem, [
-      { base: '', config: userConfig, reference: false, src: undefined },
-    ])
-    let screens = resolvedConfig?.theme?.screens || {}
-
-    let mediaQueries = new DefaultMap<string, string | null>((name) => {
-      let value = designSystem?.resolveThemeValue(`--breakpoint-${name}`, true) ?? screens?.[name]
-      if (typeof value === 'string') return `(width >= theme(--breakpoint-${name}))`
-      return value ? buildMediaQuery(value) : null
-    })
-
-    // First migrate `@screen md` to `@media screen(md)`
-    root.walkAtRules('screen', (node) => {
-      node.name = 'media'
-      node.params = `screen(${node.params})`
-    })
-
-    // Then migrate the `screen(…)` function
-    root.walkAtRules((rule) => {
-      if (rule.name !== 'media') return
-
-      let screen = rule.params.match(/screen\(([^)]+)\)/)
-      if (!screen) return
-
-      let value = mediaQueries.get(screen[1])
-      if (!value) return
-
-      rule.params = value
-    })
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-media-screen',
-    OnceExit: migrate,
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.test.ts
deleted file mode 100644
index 595275874..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.test.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it } from 'vitest'
-import { formatNodes } from './format-nodes'
-import { migrateMissingLayers } from './migrate-missing-layers'
-import { sortBuckets } from './sort-buckets'
-
-const css = dedent
-
-function migrate(input: string) {
-  return postcss()
-    .use(migrateMissingLayers())
-    .use(sortBuckets())
-    .use(formatNodes())
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it('should not migrate already migrated `@import` at-rules', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss';
-    `),
-  ).toMatchInlineSnapshot(`"@import 'tailwindcss';"`)
-})
-
-it('should add missing `layer(…)` to imported files', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/utilities'; /* Expected no layer */
-      @import './foo.css'; /* Expected layer(utilities) */
-      @import './bar.css'; /* Expected layer(utilities) */
-      @import 'tailwindcss/components'; /* Expected no layer */
-    `),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss/utilities'; /* Expected no layer */
-    @import './foo.css' layer(utilities); /* Expected layer(utilities) */
-    @import './bar.css' layer(utilities); /* Expected layer(utilities) */
-    @import 'tailwindcss/components'; /* Expected no layer */"
-  `)
-})
-
-it('should add missing `layer(…)` as the first param after the import itself', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/utilities' supports(--foo); /* Expected no layer */
-      @import './foo.css' supports(--foo); /* Expected layer(utilities) supports(--foo) */
-      @import './bar.css' supports(--foo); /* Expected layer(utilities) supports(--foo) */
-      @import 'tailwindcss/components' supports(--foo); /* Expected no layer */
-    `),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss/utilities' supports(--foo); /* Expected no layer */
-    @import './foo.css' layer(utilities) supports(--foo); /* Expected layer(utilities) supports(--foo) */
-    @import './bar.css' layer(utilities) supports(--foo); /* Expected layer(utilities) supports(--foo) */
-    @import 'tailwindcss/components' supports(--foo); /* Expected no layer */"
-  `)
-})
-
-it('should not migrate anything if no `@tailwind` directives (or imports) are found', async () => {
-  expect(
-    await migrate(css`
-      /* Base */
-      html {
-        color: red;
-      }
-
-      /* Utilities */
-      .foo {
-        color: blue;
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "/* Base */
-    html {
-      color: red;
-    }
-
-    /* Utilities */
-    .foo {
-      color: blue;
-    }"
-  `)
-})
-
-it('should not wrap comments in a layer, if they are the only nodes', async () => {
-  expect(
-    await migrate(css`
-      @tailwind base;
-
-      /* BASE */
-
-      @tailwind components;
-
-      /* COMPONENTS */
-
-      @tailwind utilities;
-
-      /** UTILITIES */
-      /** - Another comment */
-    `),
-  ).toMatchInlineSnapshot(`
-    "@tailwind base;
-
-    /* BASE */
-
-    @tailwind components;
-
-    /* COMPONENTS */
-
-    @tailwind utilities;
-
-    /** UTILITIES */
-    /** - Another comment */"
-  `)
-})
-
-it('should migrate rules above the `@tailwind base` directive in an `@layer base`', async () => {
-  expect(
-    await migrate(css`
-      @charset "UTF-8";
-      @layer foo, bar, baz;
-
-      /**! 
-       * License header
-       */
-
-      html {
-        color: red;
-      }
-
-      @tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-    `),
-  ).toMatchInlineSnapshot(`
-    "@charset "UTF-8";
-    @layer foo, bar, baz;
-
-    /**! 
-     * License header
-     */
-
-    @tailwind base;
-    @tailwind components;
-    @tailwind utilities;
-
-    @layer base {
-      html {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should migrate rules between tailwind directives', async () => {
-  expect(
-    await migrate(css`
-      @tailwind base;
-
-      .base {
-      }
-
-      @tailwind components;
-
-      .component-a {
-      }
-      .component-b {
-      }
-
-      @tailwind utilities;
-
-      .utility-a {
-      }
-      .utility-b {
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@tailwind base;
-
-    @tailwind components;
-
-    @tailwind utilities;
-
-    @layer base {
-      .base {
-      }
-    }
-
-    @layer components {
-      .component-a {
-      }
-      .component-b {
-      }
-    }
-
-    .utility-a {
-    }
-    .utility-b {
-    }"
-  `)
-})
-
-it('should keep CSS above a layer unlayered', async () => {
-  expect(
-    await migrate(css`
-      .foo {
-        color: red;
-      }
-
-      @layer components {
-        .bar {
-          color: blue;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    ".foo {
-      color: red;
-    }
-
-    @layer components {
-      .bar {
-        color: blue;
-      }
-    }"
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.ts
deleted file mode 100644
index 10c9d55de..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { AtRule, type ChildNode, type Plugin, type Root } from 'postcss'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-
-export function migrateMissingLayers(): Plugin {
-  function migrate(root: Root) {
-    let lastLayer = ''
-    let bucket: ChildNode[] = []
-    let buckets: [layer: string, bucket: typeof bucket][] = []
-    let firstLayerName: string | null = null
-
-    root.each((node) => {
-      if (node.type === 'atrule') {
-        // Known Tailwind directives that should not be inside a layer.
-        if (
-          node.name === 'config' ||
-          node.name === 'source' ||
-          node.name === 'theme' ||
-          node.name === 'utility' ||
-          node.name === 'custom-variant' ||
-          node.name === 'variant'
-        ) {
-          if (bucket.length > 0) {
-            buckets.push([lastLayer, bucket.splice(0)])
-          }
-          return
-        }
-
-        // Base
-        if (
-          (node.name === 'tailwind' && node.params === 'base') ||
-          (node.name === 'import' && node.params.match(/^["']tailwindcss\/base["']/))
-        ) {
-          if (bucket.length > 0) {
-            buckets.push([lastLayer, bucket.splice(0)])
-          }
-
-          firstLayerName ??= 'base'
-          lastLayer = 'base'
-          return
-        }
-
-        // Components
-        if (
-          (node.name === 'tailwind' && node.params === 'components') ||
-          (node.name === 'import' && node.params.match(/^["']tailwindcss\/components["']/))
-        ) {
-          if (bucket.length > 0) {
-            buckets.push([lastLayer, bucket.splice(0)])
-          }
-
-          firstLayerName ??= 'components'
-          lastLayer = 'components'
-          return
-        }
-
-        // Utilities
-        if (
-          (node.name === 'tailwind' && node.params === 'utilities') ||
-          (node.name === 'import' && node.params.match(/^["']tailwindcss\/utilities["']/))
-        ) {
-          if (bucket.length > 0) {
-            buckets.push([lastLayer, bucket.splice(0)])
-          }
-
-          firstLayerName ??= 'utilities'
-          lastLayer = 'utilities'
-          return
-        }
-
-        // Already in a layer
-        if (node.name === 'layer') {
-          if (bucket.length > 0) {
-            buckets.push([lastLayer, bucket.splice(0)])
-          }
-          return
-        }
-
-        // Add layer to `@import` at-rules
-        if (node.name === 'import') {
-          if (bucket.length > 0) {
-            buckets.push([lastLayer, bucket.splice(0)])
-          }
-
-          // Create new bucket just for the import. This way every import exists
-          // in its own layer which allows us to add the `layer(…)` parameter
-          // later on.
-          buckets.push([lastLayer, [node]])
-          return
-        }
-      }
-
-      // (License) comments, body-less `@layer` and `@charset` can stay at the
-      // top, when we haven't found any `@tailwind` at-rules yet.
-      if (
-        lastLayer === '' &&
-        (node.type === 'comment' /* Comment */ ||
-          (node.type === 'atrule' && !node.nodes) || // @layer foo, bar, baz;
-          (node.type === 'atrule' && node.name === 'charset')) // @charset "UTF-8";
-      ) {
-        return
-      }
-
-      // Track the node
-      bucket.push(node)
-    })
-
-    for (let [layerName, nodes] of buckets) {
-      let targetLayerName = layerName || firstLayerName || ''
-      if (targetLayerName === '') {
-        continue
-      }
-
-      // Do not wrap comments in a layer, if they are the only nodes.
-      if (nodes.every((node) => node.type === 'comment')) {
-        continue
-      }
-
-      // Add `layer(…)` to `@import` at-rules
-      if (nodes.every((node) => node.type === 'atrule' && node.name === 'import')) {
-        for (let node of nodes) {
-          if (node.type !== 'atrule' || node.name !== 'import') continue
-
-          if (!node.params.includes('layer(')) {
-            let params = segment(node.params, ' ')
-            params.splice(1, 0, `layer(${targetLayerName})`)
-            node.params = params.join(' ')
-            node.raws.tailwind_injected_layer = true
-          }
-        }
-        continue
-      }
-
-      // Wrap each bucket in an `@layer` at-rule
-      let target = nodes[0]
-      let layerNode = new AtRule({
-        name: 'layer',
-        params: targetLayerName,
-        nodes: nodes.map((node) => {
-          // Keep the target node as-is, because we will be replacing that one
-          // with the new layer node.
-          if (node === target) {
-            return node
-          }
-
-          // Every other node should be removed from its original position. They
-          // will be added to the new layer node.
-          return node.remove()
-        }),
-        raws: {
-          tailwind_pretty: true,
-        },
-      })
-      target.replaceWith(layerNode)
-    }
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-missing-layers',
-    OnceExit: migrate,
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-preflight.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-preflight.test.ts
deleted file mode 100644
index 2d8b70041..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-preflight.test.ts
+++ /dev/null
@@ -1,325 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { formatNodes } from './format-nodes'
-import { migratePreflight } from './migrate-preflight'
-import { sortBuckets } from './sort-buckets'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-const css = dedent
-
-async function migrate(input: string) {
-  let designSystem = await __unstable__loadDesignSystem(
-    css`
-      @import 'tailwindcss';
-    `,
-    { base: __dirname },
-  )
-
-  return postcss()
-    .use(migratePreflight({ designSystem }))
-    .use(sortBuckets())
-    .use(formatNodes())
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it("should add compatibility CSS after the `@import 'tailwindcss'`", async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss';
-    `),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss';
-
-    /*
-      The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-      so we've added these compatibility styles to make sure everything still
-      looks the same as it did with Tailwind CSS v3.
-
-      If we ever want to remove these styles, we need to add an explicit border
-      color utility to any element that depends on these defaults.
-    */
-    @layer base {
-      *,
-      ::after,
-      ::before,
-      ::backdrop,
-      ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
-      }
-    }"
-  `)
-})
-
-it('should add the compatibility CSS after the last `@import`', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss';
-      @import './foo.css';
-      @import './bar.css';
-    `),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss';
-    @import './foo.css';
-    @import './bar.css';
-
-    /*
-      The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-      so we've added these compatibility styles to make sure everything still
-      looks the same as it did with Tailwind CSS v3.
-
-      If we ever want to remove these styles, we need to add an explicit border
-      color utility to any element that depends on these defaults.
-    */
-    @layer base {
-      *,
-      ::after,
-      ::before,
-      ::backdrop,
-      ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
-      }
-    }"
-  `)
-})
-
-it('should add the compatibility CSS after the last import, even if a body-less `@layer` exists', async () => {
-  expect(
-    await migrate(css`
-      @charset "UTF-8";
-      @layer foo, bar, baz, base;
-
-      /**!
-       * License header
-       */
-
-      @import 'tailwindcss';
-      @import './foo.css';
-      @import './bar.css';
-    `),
-  ).toMatchInlineSnapshot(`
-    "@charset "UTF-8";
-    @layer foo, bar, baz, base;
-
-    /**!
-     * License header
-     */
-
-    @import 'tailwindcss';
-    @import './foo.css';
-    @import './bar.css';
-
-    /*
-      The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-      so we've added these compatibility styles to make sure everything still
-      looks the same as it did with Tailwind CSS v3.
-
-      If we ever want to remove these styles, we need to add an explicit border
-      color utility to any element that depends on these defaults.
-    */
-    @layer base {
-      *,
-      ::after,
-      ::before,
-      ::backdrop,
-      ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
-      }
-    }"
-  `)
-})
-
-it('should add the compatibility CSS before the first `@layer base` (if the "tailwindcss" import exists)', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss';
-
-      @custom-variant foo {
-      }
-
-      @utility bar {
-      }
-
-      @layer base {
-      }
-
-      @utility baz {
-      }
-
-      @layer base {
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss';
-
-    @custom-variant foo {
-    }
-
-    /*
-      The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-      so we've added these compatibility styles to make sure everything still
-      looks the same as it did with Tailwind CSS v3.
-
-      If we ever want to remove these styles, we need to add an explicit border
-      color utility to any element that depends on these defaults.
-    */
-    @layer base {
-      *,
-      ::after,
-      ::before,
-      ::backdrop,
-      ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
-      }
-    }
-
-    @utility bar {
-    }
-
-    @utility baz {
-    }
-
-    @layer base {
-    }
-
-    @layer base {
-    }"
-  `)
-})
-
-it('should add the compatibility CSS before the first `@layer base` (if the "tailwindcss/preflight" import exists)', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/preflight';
-
-      @custom-variant foo {
-      }
-
-      @utility bar {
-      }
-
-      @layer base {
-      }
-
-      @utility baz {
-      }
-
-      @layer base {
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss/preflight';
-
-    @custom-variant foo {
-    }
-
-    /*
-      The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-      so we've added these compatibility styles to make sure everything still
-      looks the same as it did with Tailwind CSS v3.
-
-      If we ever want to remove these styles, we need to add an explicit border
-      color utility to any element that depends on these defaults.
-    */
-    @layer base {
-      *,
-      ::after,
-      ::before,
-      ::backdrop,
-      ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
-      }
-    }
-
-    @utility bar {
-    }
-
-    @utility baz {
-    }
-
-    @layer base {
-    }
-
-    @layer base {
-    }"
-  `)
-})
-
-it('should not add the backwards compatibility CSS when no `@import "tailwindcss"` or `@import "tailwindcss/preflight"` exists', async () => {
-  expect(
-    await migrate(css`
-      @custom-variant foo {
-      }
-
-      @utility bar {
-      }
-
-      @layer base {
-      }
-
-      @utility baz {
-      }
-
-      @layer base {
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@custom-variant foo {
-    }
-
-    @utility bar {
-    }
-
-    @utility baz {
-    }
-
-    @layer base {
-    }
-
-    @layer base {
-    }"
-  `)
-})
-
-it('should not add the backwards compatibility CSS when another `@import "tailwindcss"` import exists such as theme or utilities', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/theme';
-
-      @custom-variant foo {
-      }
-
-      @utility bar {
-      }
-
-      @layer base {
-      }
-
-      @utility baz {
-      }
-
-      @layer base {
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss/theme';
-
-    @custom-variant foo {
-    }
-
-    @utility bar {
-    }
-
-    @utility baz {
-    }
-
-    @layer base {
-    }
-
-    @layer base {
-    }"
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-preflight.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-preflight.ts
deleted file mode 100644
index d32d96979..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-preflight.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import dedent from 'dedent'
-import postcss, { type Plugin, type Root } from 'postcss'
-import { keyPathToCssProperty } from '../../../../tailwindcss/src/compat/apply-config-to-theme'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { toKeyPath } from '../../../../tailwindcss/src/utils/to-key-path'
-import * as ValueParser from '../../../../tailwindcss/src/value-parser'
-import { walk, WalkAction } from '../../../../tailwindcss/src/walk'
-import * as version from '../../utils/version'
-
-// Defaults in v4
-const DEFAULT_BORDER_COLOR = 'currentcolor'
-
-const css = dedent
-const BORDER_COLOR_COMPATIBILITY_CSS = css`
-  /*
-    The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-    so we've added these compatibility styles to make sure everything still
-    looks the same as it did with Tailwind CSS v3.
-
-    If we ever want to remove these styles, we need to add an explicit border
-    color utility to any element that depends on these defaults.
-  */
-  @layer base {
-    *,
-    ::after,
-    ::before,
-    ::backdrop,
-    ::file-selector-button {
-      border-color: theme(borderColor.DEFAULT);
-    }
-  }
-`
-
-export function migratePreflight({
-  designSystem,
-  userConfig,
-}: {
-  designSystem: DesignSystem | null
-  userConfig?: Config | null
-}): Plugin {
-  // @ts-expect-error
-  let defaultBorderColor = userConfig?.theme?.borderColor?.DEFAULT
-
-  function canResolveThemeValue(path: string) {
-    if (!designSystem) return false
-    let variable = `--${keyPathToCssProperty(toKeyPath(path))}` as const
-    return Boolean(designSystem.theme.get([variable]))
-  }
-
-  function migrate(root: Root) {
-    // CSS for backwards compatibility with v3 should only injected in v3
-    // projects and not v4 projects.
-    if (!version.isMajor(3)) return
-
-    let isTailwindRoot = false
-    root.walkAtRules('import', (node) => {
-      if (
-        /['"]tailwindcss['"]/.test(node.params) ||
-        /['"]tailwindcss\/preflight['"]/.test(node.params)
-      ) {
-        isTailwindRoot = true
-        return false
-      }
-    })
-
-    if (!isTailwindRoot) return
-
-    // Figure out the compatibility CSS to inject
-    let compatibilityCssString = ''
-    if (defaultBorderColor !== DEFAULT_BORDER_COLOR) {
-      compatibilityCssString += BORDER_COLOR_COMPATIBILITY_CSS
-      compatibilityCssString += '\n\n'
-    }
-
-    compatibilityCssString = `\n@tw-bucket compatibility {\n${compatibilityCssString}\n}\n`
-    let compatibilityCss = postcss.parse(compatibilityCssString)
-
-    // Replace the `theme(…)` with v3 values if we can't resolve the theme
-    // value.
-    compatibilityCss.walkDecls((decl) => {
-      if (decl.value.includes('theme(')) {
-        decl.value = substituteFunctionsInValue(ValueParser.parse(decl.value), (path) => {
-          if (canResolveThemeValue(path)) {
-            return defaultBorderColor
-          } else {
-            if (path === 'borderColor.DEFAULT') {
-              return 'var(--color-gray-200, currentcolor)'
-            }
-          }
-          return null
-        })
-      }
-    })
-
-    // Cleanup `--border-color` definition in `theme(…)`
-    root.walkAtRules('theme', (node) => {
-      node.walkDecls('--border-color', (decl) => {
-        decl.remove()
-      })
-
-      if (node.nodes?.length === 0) {
-        node.remove()
-      }
-    })
-
-    // Inject the compatibility CSS
-    root.append(compatibilityCss)
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-preflight',
-    OnceExit: migrate,
-  }
-}
-
-function substituteFunctionsInValue(
-  ast: ValueParser.ValueAstNode[],
-  handle: (value: string, fallback?: string) => string | null,
-) {
-  walk(ast, (node) => {
-    if (node.kind === 'function' && node.value === 'theme') {
-      if (node.nodes.length < 1) return
-
-      // Ignore whitespace before the first argument
-      if (node.nodes[0].kind === 'separator' && node.nodes[0].value.trim() === '') {
-        node.nodes.shift()
-      }
-
-      let pathNode = node.nodes[0]
-      if (pathNode.kind !== 'word') return
-
-      let path = pathNode.value
-
-      // For the theme function arguments, we require all separators to contain
-      // comma (`,`), spaces alone should be merged into the previous word to
-      // avoid splitting in this case:
-      //
-      // theme(--color-red-500 / 75%) theme(--color-red-500 / 75%, foo, bar)
-      //
-      // We only need to do this for the first node, as the fallback values are
-      // passed through as-is.
-      let skipUntilIndex = 1
-      for (let i = skipUntilIndex; i < node.nodes.length; i++) {
-        if (node.nodes[i].value.includes(',')) {
-          break
-        }
-        path += ValueParser.toCss([node.nodes[i]])
-        skipUntilIndex = i + 1
-      }
-
-      path = eventuallyUnquote(path)
-      let fallbackValues = node.nodes.slice(skipUntilIndex + 1)
-
-      let replacement =
-        fallbackValues.length > 0 ? handle(path, ValueParser.toCss(fallbackValues)) : handle(path)
-      if (replacement === null) return
-
-      return WalkAction.Replace(ValueParser.parse(replacement))
-    }
-  })
-
-  return ValueParser.toCss(ast)
-}
-
-function eventuallyUnquote(value: string) {
-  if (value[0] !== "'" && value[0] !== '"') return value
-
-  let unquoted = ''
-  let quoteChar = value[0]
-  for (let i = 1; i < value.length - 1; i++) {
-    let currentChar = value[i]
-    let nextChar = value[i + 1]
-
-    if (currentChar === '\\' && (nextChar === quoteChar || nextChar === '\\')) {
-      unquoted += nextChar
-      i++
-    } else {
-      unquoted += currentChar
-    }
-  }
-
-  return unquoted
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-tailwind-directives.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-tailwind-directives.test.ts
deleted file mode 100644
index fdf480b3e..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-tailwind-directives.test.ts
+++ /dev/null
@@ -1,420 +0,0 @@
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it } from 'vitest'
-import { formatNodes } from './format-nodes'
-import { migrateTailwindDirectives } from './migrate-tailwind-directives'
-import { sortBuckets } from './sort-buckets'
-
-const css = dedent
-
-function migrate(input: string, options: { newPrefix: string | null } = { newPrefix: null }) {
-  return postcss()
-    .use(migrateTailwindDirectives(options))
-    .use(sortBuckets())
-    .use(formatNodes())
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it("should not migrate `@import 'tailwindcss'`", async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss';
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss';
-  `)
-})
-
-it("should append a prefix to `@import 'tailwindcss'`", async () => {
-  expect(
-    await migrate(
-      css`
-        @import 'tailwindcss';
-      `,
-      {
-        newPrefix: 'tw',
-      },
-    ),
-  ).toEqual(css`
-    @import 'tailwindcss' prefix(tw);
-  `)
-})
-
-it('should migrate the tailwind.css import', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/tailwind.css';
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss';
-  `)
-})
-
-it('should migrate the tailwind.css import with a prefix', async () => {
-  expect(
-    await migrate(
-      css`
-        @import 'tailwindcss/tailwind.css';
-      `,
-      {
-        newPrefix: 'tw',
-      },
-    ),
-  ).toEqual(css`
-    @import 'tailwindcss' prefix(tw);
-  `)
-})
-
-it('should migrate the default @tailwind directives to a single import', async () => {
-  expect(
-    await migrate(css`
-      @tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss';
-  `)
-})
-
-it('should migrate the default @tailwind directives to a single import with a prefix', async () => {
-  expect(
-    await migrate(
-      css`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      {
-        newPrefix: 'tw',
-      },
-    ),
-  ).toEqual(css`
-    @import 'tailwindcss' prefix(tw);
-  `)
-})
-
-it('should migrate the default @tailwind directives as imports to a single import', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/base';
-      @import 'tailwindcss/components';
-      @import 'tailwindcss/utilities';
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss';
-  `)
-})
-
-it('should migrate the default @tailwind directives to a single import in a valid location', async () => {
-  expect(
-    await migrate(css`
-      @charset "UTF-8";
-      @layer foo, bar, baz;
-
-      /**!
-       * License header
-       */
-
-      html {
-        color: red;
-      }
-
-      @tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-    `),
-  )
-    // NOTE: The `html {}` is not wrapped in a `@layer` directive, because that
-    // is handled by another migration step. See ../index.test.ts for a
-    // dedicated test.
-    .toEqual(css`
-      @charset "UTF-8";
-      @layer foo, bar, baz;
-
-      /**!
-       * License header
-       */
-
-      @import 'tailwindcss';
-
-      html {
-        color: red;
-      }
-    `)
-})
-
-it('should migrate the default @tailwind directives as imports to a single import in a valid location', async () => {
-  expect(
-    await migrate(css`
-      @charset "UTF-8";
-      @layer foo, bar, baz;
-
-      /**!
-       * License header
-       */
-
-      @import 'tailwindcss/base';
-      @import 'tailwindcss/components';
-      @import 'tailwindcss/utilities';
-    `),
-  ).toEqual(css`
-    @charset "UTF-8";
-    @layer foo, bar, baz;
-
-    /**!
-     * License header
-     */
-
-    @import 'tailwindcss';
-  `)
-})
-
-it('should migrate the default @tailwind directives as imports to a single import with a prefix', async () => {
-  expect(
-    await migrate(
-      css`
-        @import 'tailwindcss/base';
-        @import 'tailwindcss/components';
-        @import 'tailwindcss/utilities';
-      `,
-      {
-        newPrefix: 'tw',
-      },
-    ),
-  ).toEqual(css`
-    @import 'tailwindcss' prefix(tw);
-  `)
-})
-
-it.each([
-  [
-    // The default order
-    css`
-      @tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-    `,
-    css`
-      @import 'tailwindcss';
-    `,
-  ],
-
-  // @tailwind components moved, but has no effect in v4. Therefore `base` and
-  // `utilities` are still in the correct order.
-  [
-    css`
-      @tailwind base;
-      @tailwind utilities;
-      @tailwind components;
-    `,
-    css`
-      @import 'tailwindcss';
-    `,
-  ],
-
-  // Same as previous comment
-  [
-    css`
-      @tailwind components;
-      @tailwind base;
-      @tailwind utilities;
-    `,
-    css`
-      @import 'tailwindcss';
-    `,
-  ],
-
-  // `base` and `utilities` swapped order, thus the `@layer` directives are
-  // needed. The `components` directive is still ignored.
-  [
-    css`
-      @tailwind components;
-      @tailwind utilities;
-      @tailwind base;
-    `,
-    css`
-      @layer theme, components, utilities, base;
-      @import 'tailwindcss';
-    `,
-  ],
-  [
-    css`
-      @tailwind utilities;
-      @tailwind base;
-      @tailwind components;
-    `,
-    css`
-      @layer theme, components, utilities, base;
-      @import 'tailwindcss';
-    `,
-  ],
-  [
-    css`
-      @tailwind utilities;
-      @tailwind components;
-      @tailwind base;
-    `,
-    css`
-      @layer theme, components, utilities, base;
-      @import 'tailwindcss';
-    `,
-  ],
-])(
-  'should migrate the default directives (but in different order) to a single import, order %#',
-  async (input, expected) => {
-    expect(await migrate(input)).toEqual(expected)
-  },
-)
-
-it('should migrate `@tailwind base` to theme and preflight imports', async () => {
-  expect(
-    await migrate(css`
-      @tailwind base;
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss/theme' layer(theme);
-    @import 'tailwindcss/preflight' layer(base);
-  `)
-})
-
-it('should migrate `@tailwind base` to theme and preflight imports with a prefix', async () => {
-  expect(
-    await migrate(
-      css`
-        @tailwind base;
-      `,
-      {
-        newPrefix: 'tw',
-      },
-    ),
-  ).toEqual(css`
-    @import 'tailwindcss/theme' layer(theme) prefix(tw);
-    @import 'tailwindcss/preflight' layer(base);
-  `)
-})
-
-it('should migrate `@import "tailwindcss/base"` to theme and preflight imports', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/base';
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss/theme' layer(theme);
-    @import 'tailwindcss/preflight' layer(base);
-  `)
-})
-
-it('should migrate `@import "tailwindcss/base"` to theme and preflight imports with a prefix', async () => {
-  expect(
-    await migrate(
-      css`
-        @import 'tailwindcss/base';
-      `,
-      {
-        newPrefix: 'tw',
-      },
-    ),
-  ).toEqual(css`
-    @import 'tailwindcss/theme' layer(theme) prefix(tw);
-    @import 'tailwindcss/preflight' layer(base);
-  `)
-})
-
-it('should migrate `@tailwind utilities` to an import', async () => {
-  expect(
-    await migrate(css`
-      @tailwind utilities;
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss/utilities' layer(utilities);
-  `)
-})
-
-it('should migrate `@import "tailwindcss/utilities"` to an import', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/utilities';
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss/utilities' layer(utilities);
-  `)
-})
-
-it('should not migrate existing imports using a custom layer', async () => {
-  expect(
-    await migrate(css`
-      @import 'tailwindcss/utilities' layer(my-utilities);
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss/utilities' layer(my-utilities);
-  `)
-})
-
-// We don't have a `@layer components` anymore, so omitting it should result
-// in the full import as well. Alternatively, we could expand to:
-//
-// ```css
-// @import 'tailwindcss/theme' layer(theme);
-// @import 'tailwindcss/preflight' layer(base);
-// @import 'tailwindcss/utilities' layer(utilities);
-// ```
-it('should migrate `@tailwind base` and `@tailwind utilities` to a single import', async () => {
-  expect(
-    await migrate(css`
-      @tailwind base;
-      @tailwind utilities;
-    `),
-  ).toEqual(css`
-    @import 'tailwindcss';
-  `)
-})
-
-it('should migrate `@tailwind base` and `@tailwind utilities` to a single import with a prefix', async () => {
-  expect(
-    await migrate(
-      css`
-        @import 'tailwindcss/base';
-        @import 'tailwindcss/utilities';
-      `,
-      {
-        newPrefix: 'tw',
-      },
-    ),
-  ).toEqual(css`
-    @import 'tailwindcss' prefix(tw);
-  `)
-})
-
-it('should drop `@tailwind screens;`', async () => {
-  expect(
-    await migrate(css`
-      @tailwind screens;
-    `),
-  ).toEqual('')
-})
-
-it('should drop `@tailwind variants;`', async () => {
-  expect(
-    await migrate(css`
-      @tailwind variants;
-    `),
-  ).toEqual('')
-})
-
-it('should replace `@responsive` with its children', async () => {
-  expect(
-    await migrate(css`
-      @responsive {
-        .foo {
-          color: red;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    ".foo {
-      color: red;
-    }"
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-tailwind-directives.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-tailwind-directives.ts
deleted file mode 100644
index d3d74a65e..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-tailwind-directives.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import { AtRule, type ChildNode, type Plugin, type Root } from 'postcss'
-
-const DEFAULT_LAYER_ORDER = ['theme', 'base', 'components', 'utilities']
-
-export function migrateTailwindDirectives(options: { newPrefix: string | null }): Plugin {
-  let prefixParams = options.newPrefix ? ` prefix(${options.newPrefix})` : ''
-
-  function migrate(root: Root) {
-    let baseNode = null as AtRule | null
-    let utilitiesNode = null as AtRule | null
-    let orderedNodes: AtRule[] = []
-
-    let defaultImportNode = null as AtRule | null
-    let utilitiesImportNode = null as AtRule | null
-    let preflightImportNode = null as AtRule | null
-    let themeImportNode = null as AtRule | null
-
-    let layerOrder: string[] = []
-
-    root.walkAtRules((node) => {
-      // Migrate legacy `@import "tailwindcss/tailwind.css"`
-      if (node.name === 'import' && node.params.match(/^["']tailwindcss\/tailwind\.css["']$/)) {
-        node.params = node.params.replace('tailwindcss/tailwind.css', 'tailwindcss')
-      }
-
-      // Append any new prefix() param to existing `@import 'tailwindcss'` directives
-      if (node.name === 'import' && node.params.match(/^["']tailwindcss["']/)) {
-        node.params += prefixParams
-      }
-
-      // Track old imports and directives
-      else if (
-        (node.name === 'tailwind' && node.params === 'base') ||
-        (node.name === 'import' && node.params.match(/^["']tailwindcss\/base["']$/))
-      ) {
-        layerOrder.push('base')
-        orderedNodes.push(node)
-        baseNode = node
-      } else if (
-        (node.name === 'tailwind' && node.params === 'utilities') ||
-        (node.name === 'import' && node.params.match(/^["']tailwindcss\/utilities["']$/))
-      ) {
-        layerOrder.push('utilities')
-        orderedNodes.push(node)
-        utilitiesNode = node
-      }
-
-      // Remove directives that are not needed anymore
-      else if (
-        (node.name === 'tailwind' && node.params === 'components') ||
-        (node.name === 'tailwind' && node.params === 'screens') ||
-        (node.name === 'tailwind' && node.params === 'variants') ||
-        (node.name === 'import' && node.params.match(/^["']tailwindcss\/components["']$/))
-      ) {
-        node.remove()
-      }
-
-      // Replace Tailwind CSS v2 directives that still worked in v3.
-      else if (node.name === 'responsive') {
-        if (node.nodes) {
-          for (let child of node.nodes) {
-            child.raws.tailwind_pretty = true
-          }
-          node.replaceWith(node.nodes)
-        } else {
-          node.remove()
-        }
-      }
-    })
-
-    // Insert default import if all directives are present
-    if (baseNode !== null && utilitiesNode !== null) {
-      if (!defaultImportNode) {
-        findTargetNode(orderedNodes).before(
-          new AtRule({ name: 'import', params: `'tailwindcss'${prefixParams}` }),
-        )
-      }
-      baseNode?.remove()
-      utilitiesNode?.remove()
-    }
-
-    // Insert individual imports if not all directives are present
-    else if (utilitiesNode !== null) {
-      if (!utilitiesImportNode) {
-        findTargetNode(orderedNodes).before(
-          new AtRule({ name: 'import', params: "'tailwindcss/utilities' layer(utilities)" }),
-        )
-      }
-      utilitiesNode?.remove()
-    } else if (baseNode !== null) {
-      if (!themeImportNode) {
-        findTargetNode(orderedNodes).before(
-          new AtRule({ name: 'import', params: `'tailwindcss/theme' layer(theme)${prefixParams}` }),
-        )
-      }
-
-      if (!preflightImportNode) {
-        findTargetNode(orderedNodes).before(
-          new AtRule({ name: 'import', params: "'tailwindcss/preflight' layer(base)" }),
-        )
-      }
-
-      baseNode?.remove()
-    }
-
-    // Insert `@layer …;` at the top when the order in the CSS was different
-    // from the default.
-    {
-      // Determine if the order is different from the default.
-      let sortedLayerOrder = layerOrder.toSorted((a, z) => {
-        return DEFAULT_LAYER_ORDER.indexOf(a) - DEFAULT_LAYER_ORDER.indexOf(z)
-      })
-
-      if (layerOrder.some((layer, index) => layer !== sortedLayerOrder[index])) {
-        // Create a new `@layer` rule with the sorted order.
-        let newLayerOrder = DEFAULT_LAYER_ORDER.toSorted((a, z) => {
-          return layerOrder.indexOf(a) - layerOrder.indexOf(z)
-        })
-        root.prepend({ name: 'layer', params: newLayerOrder.join(', ') })
-      }
-    }
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-tailwind-directives',
-    OnceExit: migrate,
-  }
-}
-
-// Finds the location where we can inject the new `@import` at-rule. This
-// guarantees that the `@import` is inserted at the most expected location.
-//
-// Ideally it's replacing the existing Tailwind directives, but we have to
-// ensure that the `@import` is valid in this location or not. If not, we move
-// the `@import` up until we find a valid location.
-function findTargetNode(nodes: AtRule[]) {
-  // Start at the `base` or `utilities` node (whichever comes first), and find
-  // the spot where we can insert the new import.
-  let target: ChildNode = nodes.at(0)!
-
-  // Only allowed nodes before the `@import` are:
-  //
-  // - `@charset` at-rule.
-  // - `@layer foo, bar, baz;` at-rule to define the order of the layers.
-  // - `@import` at-rule to import other CSS files.
-  // - Comments.
-  //
-  // Nodes that cannot exist before the `@import` are:
-  //
-  // - Any other at-rule.
-  // - Any rule.
-  let previous = target.prev()
-  while (previous) {
-    // Rules are not allowed before the `@import`, so we have to at least inject
-    // the `@import` before this rule.
-    if (previous.type === 'rule') {
-      target = previous
-    }
-
-    // Some at-rules are allowed before the `@import`.
-    if (previous.type === 'atrule') {
-      // `@charset` and `@import` are allowed before the `@import`.
-      if (previous.name === 'charset' || previous.name === 'import') {
-        // Allowed
-        previous = previous.prev()
-        continue
-      }
-
-      // `@layer` without any nodes is allowed before the `@import`.
-      else if (previous.name === 'layer' && !previous.nodes) {
-        // Allowed
-        previous = previous.prev()
-        continue
-      }
-
-      // Anything other at-rule (`@media`, `@supports`, etc.) is not allowed
-      // before the `@import`.
-      else {
-        target = previous
-      }
-    }
-
-    // Keep checking the previous node.
-    previous = previous.prev()
-  }
-
-  return target
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-theme-to-var.test.ts
deleted file mode 100644
index f0b4844ad..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-theme-to-var.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it } from 'vitest'
-import { formatNodes } from './format-nodes'
-import { migrateThemeToVar } from './migrate-theme-to-var'
-import { sortBuckets } from './sort-buckets'
-
-const css = dedent
-
-async function migrate(input: string) {
-  return postcss()
-    .use(
-      migrateThemeToVar({
-        designSystem: await __unstable__loadDesignSystem(`@import 'tailwindcss';`, {
-          base: __dirname,
-        }),
-      }),
-    )
-    .use(sortBuckets())
-    .use(formatNodes())
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it('should migrate `theme(…)` to `var(…)`', async () => {
-  expect(
-    await migrate(css`
-      @media theme(screens.sm) {
-        .foo {
-          background-color: theme(colors.red.900);
-          color: theme(colors.red.900 / 75%);
-          border-color: theme(colors.red.200/75%);
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@media --theme(--breakpoint-sm) {
-      .foo {
-        background-color: var(--color-red-900);
-        color: --theme(--color-red-900 / 75%);
-        border-color: --theme(--color-red-200 / 75%);
-      }
-    }"
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-theme-to-var.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-theme-to-var.ts
deleted file mode 100644
index 8285def1e..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-theme-to-var.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { type Plugin } from 'postcss'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { Convert, createConverter } from '../template/migrate-theme-to-var'
-
-export function migrateThemeToVar({
-  designSystem,
-}: {
-  designSystem?: DesignSystem | null
-} = {}): Plugin {
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-theme-to-var',
-    OnceExit(root) {
-      if (!designSystem) return
-      let convert = createConverter(designSystem, { prettyPrint: true })
-
-      root.walkDecls((decl) => {
-        let [newValue] = convert(decl.value)
-        decl.value = newValue
-      })
-
-      root.walkAtRules((atRule) => {
-        if (
-          atRule.name === 'media' ||
-          atRule.name === 'custom-media' ||
-          atRule.name === 'container' ||
-          atRule.name === 'supports'
-        ) {
-          let [newValue] = convert(atRule.params, Convert.MigrateThemeOnly)
-          atRule.params = newValue
-        }
-      })
-    },
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-variants-directive.test.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-variants-directive.test.ts
deleted file mode 100644
index 3521d34f7..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-variants-directive.test.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import dedent from 'dedent'
-import postcss from 'postcss'
-import { expect, it } from 'vitest'
-import { formatNodes } from './format-nodes'
-import { migrateVariantsDirective } from './migrate-variants-directive'
-import { sortBuckets } from './sort-buckets'
-
-const css = dedent
-
-function migrate(input: string) {
-  return postcss()
-    .use(migrateVariantsDirective())
-    .use(sortBuckets())
-    .use(formatNodes())
-    .process(input, { from: expect.getState().testPath })
-    .then((result) => result.css)
-}
-
-it('should replace `@variants` with `@layer utilities`', async () => {
-  expect(
-    await migrate(css`
-      @variants hover, focus {
-        .foo {
-          color: red;
-        }
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "@layer utilities {
-      .foo {
-        color: red;
-      }
-    }"
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-variants-directive.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate-variants-directive.ts
deleted file mode 100644
index 1592c0059..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate-variants-directive.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { type Plugin, type Root } from 'postcss'
-
-export function migrateVariantsDirective(): Plugin {
-  function migrate(root: Root) {
-    root.walkAtRules('variants', (node) => {
-      // Migrate `@variants` to `@utility` because `@variants` make the classes
-      // an actual utility.
-      // ```css
-      // @variants hover {
-      //   .foo {}
-      // }
-      // ```
-      //
-      // Means that you can do this in your HTML:
-      // ```html
-      // <div class="focus:foo"></div>
-      // ```
-      //
-      // Notice the `focus:`, even though we _only_ configured the `hover`
-      // variant.
-      //
-      // This means that we can convert it to an `@layer utilities` rule. Later,
-      // this will get converted to an `@utility` rule.
-      if (node.name === 'variants') {
-        node.name = 'layer'
-        node.params = 'utilities'
-      }
-    })
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/migrate-variants-directive',
-    OnceExit: migrate,
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts b/packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts
deleted file mode 100644
index cb9150851..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/migrate.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import postcss from 'postcss'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { Stylesheet } from '../../stylesheet'
-import type { JSConfigMigration } from '../config/migrate-js-config'
-import { migrateAtApply } from './migrate-at-apply'
-import { migrateAtLayerUtilities } from './migrate-at-layer-utilities'
-import { migrateConfig } from './migrate-config'
-import { migrateImport } from './migrate-import'
-import { migrateMediaScreen } from './migrate-media-screen'
-import { migrateMissingLayers } from './migrate-missing-layers'
-import { migratePreflight } from './migrate-preflight'
-import { migrateTailwindDirectives } from './migrate-tailwind-directives'
-import { migrateThemeToVar } from './migrate-theme-to-var'
-import { migrateVariantsDirective } from './migrate-variants-directive'
-
-export interface MigrateOptions {
-  newPrefix: string | null
-  designSystem: DesignSystem | null
-  userConfig: Config | null
-  configFilePath: string | null
-  jsConfigMigration: JSConfigMigration | null
-}
-
-export async function migrate(stylesheet: Stylesheet, options: MigrateOptions) {
-  if (!stylesheet.file) {
-    throw new Error('Cannot migrate a stylesheet without a file path')
-  }
-
-  if (!stylesheet.canMigrate) return
-
-  await migrateContents(stylesheet, options)
-}
-
-export async function migrateContents(
-  stylesheet: Stylesheet | string,
-  options: MigrateOptions,
-  file?: string,
-) {
-  if (typeof stylesheet === 'string') {
-    stylesheet = await Stylesheet.fromString(stylesheet)
-    stylesheet.file = file ?? null
-  }
-
-  return postcss()
-    .use(migrateImport())
-    .use(migrateAtApply(options))
-    .use(migrateMediaScreen(options))
-    .use(migrateVariantsDirective())
-    .use(migrateAtLayerUtilities(stylesheet))
-    .use(migrateMissingLayers())
-    .use(migrateTailwindDirectives(options))
-    .use(migrateConfig(stylesheet, options))
-    .use(migratePreflight(options))
-    .use(migrateThemeToVar(options))
-    .process(stylesheet.root, { from: stylesheet.file ?? undefined })
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/sort-buckets.ts b/packages/@tailwindcss-upgrade/src/codemods/css/sort-buckets.ts
deleted file mode 100644
index 22b0581dd..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/sort-buckets.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import postcss, { type AtRule, type ChildNode, type Comment, type Plugin, type Root } from 'postcss'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-import { walk, WalkAction } from '../../utils/walk'
-
-const BUCKET_ORDER = [
-  // Imports
-  'import', // @import
-
-  // Configuration
-  'config', // @config
-  'plugin', // @plugin
-  'source', // @source
-  'custom-variant', // @custom-variant
-  'theme', // @theme
-
-  // Styles
-  'compatibility', // @layer base with compatibility CSS
-  'utility', // @utility
-
-  // User CSS
-  'user',
-]
-
-export function sortBuckets(): Plugin {
-  async function migrate(root: Root) {
-    // 1. Move items that are not in a bucket, into a bucket
-    {
-      let comments: Comment[] = []
-
-      let buckets = new DefaultMap<string, AtRule>((name) => {
-        let bucket = postcss.atRule({ name: 'tw-bucket', params: name, nodes: [] })
-        root.append(bucket)
-        return bucket
-      })
-
-      // Seed the buckets with existing buckets
-      root.walkAtRules('tw-bucket', (node) => {
-        buckets.set(node.params, node)
-      })
-
-      let lastLayer = 'user'
-      function injectInto(name: string, ...nodes: ChildNode[]) {
-        lastLayer = name
-        buckets.get(name).nodes?.push(...comments.splice(0), ...nodes)
-      }
-
-      walk(root, (node) => {
-        // Already in a bucket, skip it
-        if (node.type === 'atrule' && node.name === 'tw-bucket') {
-          return WalkAction.Skip
-        }
-
-        // Comments belong to the bucket of the nearest node, which is typically
-        // in the "next" bucket.
-        if (node.type === 'comment') {
-          // We already have comments, which means that we already have nodes
-          // that belong in the next bucket, so we should move the current
-          // comment into the next bucket as well.
-          if (comments.length > 0) {
-            comments.push(node)
-            return
-          }
-
-          // Figure out the closest node to the comment
-          let prevDistance = distance(node.prev(), node) ?? Infinity
-          let nextDistance = distance(node, node.next()) ?? Infinity
-
-          if (prevDistance < nextDistance) {
-            buckets.get(lastLayer).nodes?.push(node)
-          } else {
-            comments.push(node)
-          }
-        }
-
-        // Known at-rules
-        else if (
-          node.type === 'atrule' &&
-          ['config', 'plugin', 'source', 'theme', 'utility', 'custom-variant'].includes(node.name)
-        ) {
-          injectInto(node.name, node)
-        }
-
-        // Imports bucket, which also contains the `@charset` and body-less `@layer`
-        else if (
-          (node.type === 'atrule' && node.name === 'layer' && !node.nodes) || // @layer foo, bar;
-          (node.type === 'atrule' && node.name === 'import') ||
-          (node.type === 'atrule' && node.name === 'charset') || // @charset "UTF-8";
-          (node.type === 'atrule' && node.name === 'tailwind')
-        ) {
-          injectInto('import', node)
-        }
-
-        // User CSS
-        else if (node.type === 'rule' || node.type === 'atrule') {
-          injectInto('user', node)
-        }
-
-        // Fallback
-        else {
-          injectInto('user', node)
-        }
-
-        return WalkAction.Skip
-      })
-
-      if (comments.length > 0) {
-        injectInto(lastLayer)
-      }
-    }
-
-    // 2. Merge `@tw-bucket` with the same name together
-    let firstBuckets = new Map<string, AtRule>()
-    root.walkAtRules('tw-bucket', (node) => {
-      let firstBucket = firstBuckets.get(node.params)
-      if (!firstBucket) {
-        firstBuckets.set(node.params, node)
-        return
-      }
-
-      if (node.nodes) {
-        firstBucket.append(...node.nodes)
-      }
-    })
-
-    // 3. Remove empty `@tw-bucket`
-    root.walkAtRules('tw-bucket', (node) => {
-      if (!node.nodes?.length) {
-        node.remove()
-      }
-    })
-
-    // 4. Sort the `@tw-bucket` themselves
-    {
-      let sorted = Array.from(firstBuckets.values()).sort((a, z) => {
-        let aIndex = BUCKET_ORDER.indexOf(a.params)
-        let zIndex = BUCKET_ORDER.indexOf(z.params)
-        return aIndex - zIndex
-      })
-
-      // Re-inject the sorted buckets
-      root.removeAll()
-      root.append(sorted)
-    }
-  }
-
-  return {
-    postcssPlugin: '@tailwindcss/upgrade/sort-buckets',
-    OnceExit: migrate,
-  }
-}
-
-function distance(before?: ChildNode, after?: ChildNode): number | null {
-  if (!before || !after) return null
-  if (!before.source || !after.source) return null
-  if (!before.source.start || !after.source.start) return null
-  if (!before.source.end || !after.source.end) return null
-
-  // Compare end of Before, to start of After
-  let d = Math.abs(before.source.end.line - after.source.start.line)
-  return d
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/css/split.ts b/packages/@tailwindcss-upgrade/src/codemods/css/split.ts
deleted file mode 100644
index 146d30733..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/css/split.ts
+++ /dev/null
@@ -1,257 +0,0 @@
-import postcss from 'postcss'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-import { Stylesheet, type StylesheetId } from '../../stylesheet'
-import { walk, WalkAction } from '../../utils/walk'
-
-export async function split(stylesheets: Stylesheet[]) {
-  let stylesheetsById = new Map<StylesheetId, Stylesheet>()
-  let stylesheetsByFile = new Map<string, Stylesheet>()
-
-  for (let sheet of stylesheets) {
-    stylesheetsById.set(sheet.id, sheet)
-
-    if (sheet.file) {
-      stylesheetsByFile.set(sheet.file, sheet)
-    }
-  }
-
-  // Keep track of sheets that contain `@utility` rules
-  let requiresSplit = new Set<Stylesheet>()
-
-  for (let sheet of stylesheets) {
-    // Root files don't need to be split
-    if (sheet.isTailwindRoot) continue
-
-    let containsUtility = false
-    let containsUnsafe = sheet.layers().size > 0
-
-    walk(sheet.root, (node) => {
-      if (node.type === 'atrule' && node.name === 'utility') {
-        containsUtility = true
-      }
-
-      // Safe to keep without splitting
-      else if (
-        // An `@import "…" layer(…)` is safe
-        (node.type === 'atrule' && node.name === 'import' && node.params.includes('layer(')) ||
-        // @layer blocks are safe
-        (node.type === 'atrule' && node.name === 'layer') ||
-        // Comments are safe
-        node.type === 'comment'
-      ) {
-        return WalkAction.Skip
-      }
-
-      // Everything else is not safe, and requires a split
-      else {
-        containsUnsafe = true
-      }
-
-      // We already know we need to split this sheet
-      if (containsUtility && containsUnsafe) {
-        return WalkAction.Stop
-      }
-
-      return WalkAction.Skip
-    })
-
-    if (containsUtility && containsUnsafe) {
-      requiresSplit.add(sheet)
-    }
-  }
-
-  // Split every imported stylesheet into two parts
-  let utilitySheets = new Map<Stylesheet, Stylesheet>()
-
-  for (let sheet of stylesheets) {
-    // Ignore stylesheets that were not imported
-    if (!sheet.file) continue
-    if (sheet.parents.size === 0) continue
-
-    // Skip stylesheets that don't have utilities
-    // and don't have any children that have utilities
-    if (!requiresSplit.has(sheet)) {
-      if (!Array.from(sheet.descendants()).some((child) => requiresSplit.has(child))) {
-        continue
-      }
-    }
-
-    let utilities = postcss.root()
-
-    walk(sheet.root, (node) => {
-      if (node.type !== 'atrule') return
-      if (node.name !== 'utility') return
-
-      // `append` will move this node from the original sheet
-      // to the new utilities sheet
-      utilities.append(node)
-
-      return WalkAction.Skip
-    })
-
-    let newFileName = sheet.file.replace(/\.css$/, '.utilities.css')
-
-    let counter = 0
-
-    // If we already have a utility sheet with this name, we need to rename it
-    while (stylesheetsByFile.has(newFileName)) {
-      counter += 1
-      newFileName = sheet.file.replace(/\.css$/, `.utilities.${counter}.css`)
-    }
-
-    let utilitySheet = await Stylesheet.fromRoot(utilities, newFileName)
-
-    utilitySheet.extension = counter > 0 ? `.utilities.${counter}.css` : `.utilities.css`
-
-    utilitySheets.set(sheet, utilitySheet)
-    stylesheetsById.set(utilitySheet.id, utilitySheet)
-  }
-
-  // Make sure the utility sheets are linked to one another
-  for (let [normalSheet, utilitySheet] of utilitySheets) {
-    for (let parent of normalSheet.parents) {
-      let utilityParent = utilitySheets.get(parent.item)
-      if (!utilityParent) continue
-      utilitySheet.parents.add({
-        item: utilityParent,
-        meta: parent.meta,
-      })
-    }
-
-    for (let child of normalSheet.children) {
-      let utilityChild = utilitySheets.get(child.item)
-      if (!utilityChild) continue
-      utilitySheet.children.add({
-        item: utilityChild,
-        meta: child.meta,
-      })
-    }
-  }
-
-  for (let sheet of stylesheets) {
-    let utilitySheet = utilitySheets.get(sheet)
-    let utilityImports: Set<postcss.AtRule> = new Set()
-
-    for (let node of sheet.importRules) {
-      let sheetId = node.raws.tailwind_destination_sheet_id as StylesheetId | undefined
-
-      // This import rule does not point to a stylesheet
-      // which likely means it points to `node_modules`
-      if (!sheetId) continue
-
-      let originalDestination = stylesheetsById.get(sheetId)
-
-      // This import points to a stylesheet that no longer exists which likely
-      // means it was removed by the optimizer this will be cleaned up later
-      if (!originalDestination) continue
-
-      let utilityDestination = utilitySheets.get(originalDestination)
-
-      // A utility sheet doesn't exist for this import so it doesn't need
-      // to be processed
-      if (!utilityDestination) continue
-
-      let match = node.params.match(/(['"])(.*)\1/)
-      if (!match) return
-
-      let quote = match[1]
-      let id = match[2]
-
-      let newFile = id.replace(/\.css$/, utilityDestination.extension!)
-
-      // The import will just point to the new file without any media queries,
-      // layers, or other conditions because `@utility` MUST be top-level.
-      let newImport = node.clone({
-        params: `${quote}${newFile}${quote}`,
-        raws: {
-          tailwind_injected_layer: node.raws.tailwind_injected_layer,
-          tailwind_original_params: `${quote}${id}${quote}`,
-          tailwind_destination_sheet_id: utilityDestination.id,
-        },
-      })
-
-      if (utilitySheet) {
-        // If this import is intended to go into the utility sheet
-        // we'll collect it into a list to add later. If we don't'
-        // we'll end up adding them in reverse order.
-        utilityImports.add(newImport)
-      } else {
-        // This import will go immediately after the original import
-        node.after(newImport)
-      }
-    }
-
-    // Add imports to the top of the utility sheet if necessary
-    if (utilitySheet && utilityImports.size > 0) {
-      utilitySheet.root.prepend(Array.from(utilityImports))
-    }
-  }
-
-  // Tracks the at rules that import a given stylesheet
-  let importNodes = new DefaultMap<Stylesheet, Set<postcss.AtRule>>(() => new Set())
-
-  for (let sheet of stylesheetsById.values()) {
-    for (let node of sheet.importRules) {
-      let sheetId = node.raws.tailwind_destination_sheet_id as StylesheetId | undefined
-
-      // This import rule does not point to a stylesheet
-      if (!sheetId) continue
-
-      let destination = stylesheetsById.get(sheetId)
-
-      // This import rule does not point to a stylesheet that exists
-      // We'll remove it later
-      if (!destination) continue
-
-      importNodes.get(destination).add(node)
-    }
-  }
-
-  // At this point we've created many `{name}.utilities.css` files.
-  // If the original file _becomes_ empty after splitting that means that
-  // dedicated utility file is not required and we can move the utilities
-  // back to the original file.
-  //
-  // This could be done in one step but separating them makes it easier to
-  // reason about since the stylesheets are in a consistent state before we
-  // perform any cleanup tasks.
-  let list: Stylesheet[] = []
-
-  for (let sheet of stylesheets.slice()) {
-    for (let child of sheet.descendants()) {
-      list.push(child)
-    }
-
-    list.push(sheet)
-  }
-
-  for (let sheet of list) {
-    let utilitySheet = utilitySheets.get(sheet)
-
-    // This sheet was not split so there's nothing to do
-    if (!utilitySheet) continue
-
-    // This sheet did not become empty
-    if (!sheet.isEmpty) continue
-
-    // We have a sheet that became empty after splitting
-    // 1. Replace the sheet with it's utility sheet content
-    sheet.root = utilitySheet.root
-
-    // 2. Rewrite imports in parent sheets to point to the original sheet
-    // Ideally this wouldn't need to be _undone_ but instead only done once at the end
-    for (let node of importNodes.get(utilitySheet)) {
-      node.params = node.raws.tailwind_original_params as any
-    }
-
-    // 3. Remove the original import from the non-utility sheet
-    for (let node of importNodes.get(sheet)) {
-      node.remove()
-    }
-
-    // 3. Mark the utility sheet for removal
-    utilitySheets.delete(sheet)
-  }
-
-  stylesheets.push(...utilitySheets.values())
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/candidates.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/candidates.test.ts
deleted file mode 100644
index 2e4d150aa..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/candidates.test.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test } from 'vitest'
-import { spliceChangesIntoString } from '../../utils/splice-changes-into-string'
-import { extractRawCandidates } from './candidates'
-
-let html = String.raw
-
-test('extracts candidates with positions from a template', async () => {
-  let content = html`
-    <div class="bg-blue-500 hover:focus:text-white [color:red]">
-      <button class="bg-blue-500 text-white">My button</button>
-    </div>
-  `
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  let candidates = await extractRawCandidates(content, 'html')
-  let validCandidates = candidates.filter(
-    ({ rawCandidate }) => designSystem.parseCandidate(rawCandidate).length > 0,
-  )
-
-  expect(validCandidates).toMatchInlineSnapshot(`
-    [
-      {
-        "end": 28,
-        "rawCandidate": "bg-blue-500",
-        "start": 17,
-      },
-      {
-        "end": 51,
-        "rawCandidate": "hover:focus:text-white",
-        "start": 29,
-      },
-      {
-        "end": 63,
-        "rawCandidate": "[color:red]",
-        "start": 52,
-      },
-      {
-        "end": 98,
-        "rawCandidate": "bg-blue-500",
-        "start": 87,
-      },
-      {
-        "end": 109,
-        "rawCandidate": "text-white",
-        "start": 99,
-      },
-    ]
-  `)
-})
-
-test('replaces the right positions for a candidate', async () => {
-  let content = html`
-    <h1>🤠👋</h1>
-    <div class="bg-blue-500" />
-  `
-
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  let candidates = await extractRawCandidates(content, 'html')
-
-  let candidate = candidates.find(
-    ({ rawCandidate }) => designSystem.parseCandidate(rawCandidate).length > 0,
-  )!
-
-  let migrated = spliceChangesIntoString(content, [
-    {
-      start: candidate.start,
-      end: candidate.end,
-      replacement: 'flex',
-    },
-  ])
-
-  expect(migrated).toMatchInlineSnapshot(`
-    "
-        <h1>🤠👋</h1>
-        <div class="flex" />
-      "
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/candidates.ts b/packages/@tailwindcss-upgrade/src/codemods/template/candidates.ts
deleted file mode 100644
index 88b1e4e03..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/candidates.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Scanner } from '@tailwindcss/oxide'
-import { cloneCandidate, type Candidate } from '../../../../tailwindcss/src/candidate'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-
-export async function extractRawCandidates(
-  content: string,
-  extension: string = 'html',
-): Promise<{ rawCandidate: string; start: number; end: number }[]> {
-  let scanner = new Scanner({})
-  let result = scanner.getCandidatesWithPositions({ content, extension })
-
-  let candidates: { rawCandidate: string; start: number; end: number }[] = []
-  for (let { candidate: rawCandidate, position: start } of result) {
-    candidates.push({ rawCandidate, start, end: start + rawCandidate.length })
-  }
-  return candidates
-}
-
-// Create a basic stripped candidate without variants or important flag
-export function baseCandidate<T extends Candidate>(candidate: T) {
-  let base = cloneCandidate(candidate)
-
-  base.important = false
-  base.variants = []
-
-  return base
-}
-
-export function parseCandidate(designSystem: DesignSystem, input: string) {
-  return designSystem.parseCandidate(
-    designSystem.theme.prefix && !input.startsWith(`${designSystem.theme.prefix}:`)
-      ? `${designSystem.theme.prefix}:${input}`
-      : input,
-  )
-}
-
-export function printUnprefixedCandidate(designSystem: DesignSystem, candidate: Candidate) {
-  let candidateString = designSystem.printCandidate(candidate)
-
-  return designSystem.theme.prefix && candidateString.startsWith(`${designSystem.theme.prefix}:`)
-    ? candidateString.slice(designSystem.theme.prefix.length + 1)
-    : candidateString
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
deleted file mode 100644
index 7cfb16c75..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { describe, expect, test, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { migrateCandidate } from './migrate'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-const css = String.raw
-
-describe('is-safe-migration', async () => {
-  let designSystem = await __unstable__loadDesignSystem(
-    css`
-      @import 'tailwindcss';
-
-      /* TODO(perf): Only here to speed up the tests */
-      @theme {
-        --*: initial;
-        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-      }
-    `,
-    { base: __dirname },
-  )
-
-  test.each([
-    [`let notBorder = !border    \n`, '!border'],
-    [`{ "foo": !border.something + ""}\n`, '!border'],
-    [`<div v-if="something && !border"></div>\n`, '!border'],
-    [`<div v-else-if="something && !border"></div>\n`, '!border'],
-    [`<div v-show="something && !border"></div>\n`, '!border'],
-    [`<div v-if="!border || !border"></div>\n`, '!border'],
-    [`<div v-else-if="!border || !border"></div>\n`, '!border'],
-    [`<div v-show="!border || !border"></div>\n`, '!border'],
-    [`<div v-if="!border"></div>\n`, '!border'],
-    [`<div v-else-if="!border"></div>\n`, '!border'],
-    [`<div v-show="!border"></div>\n`, '!border'],
-    [`<div x-if="!border"></div>\n`, '!border'],
-
-    [`let notShadow = shadow    \n`, 'shadow'],
-    [`{ "foo": shadow.something + ""}\n`, 'shadow'],
-    [`<div v-if="something && shadow"></div>\n`, 'shadow'],
-    [`<div v-else-if="something && shadow"></div>\n`, 'shadow'],
-    [`<div v-show="something && shadow"></div>\n`, 'shadow'],
-    [`<div v-if="shadow || shadow"></div>\n`, 'shadow'],
-    [`<div v-else-if="shadow || shadow"></div>\n`, 'shadow'],
-    [`<div v-show="shadow || shadow"></div>\n`, 'shadow'],
-    [`<div v-if="shadow"></div>\n`, 'shadow'],
-    [`<div v-else-if="shadow"></div>\n`, 'shadow'],
-    [`<div v-show="shadow"></div>\n`, 'shadow'],
-    [`<div x-if="shadow"></div>\n`, 'shadow'],
-    [`<div style={{filter: 'drop-shadow(30px 10px 4px #4444dd)'}}/>\n`, 'shadow'],
-    [`<div style="flex-grow: 1"></div>\n`, 'flex-grow'],
-    [`<div style='flex-shrink: 0'></div>\n`, 'flex-shrink'],
-    [`<div style="  flex-shrink: 0"></div>\n`, 'flex-shrink'],
-    [`<div style="\nflex-shrink: 0\n"></div>\n`, 'flex-shrink'],
-
-    // Next.js Image placeholder cases
-    [`<Image placeholder="blur" src="/image.jpg" />`, 'blur'],
-    [`<Image placeholder={'blur'} src="/image.jpg" />`, 'blur'],
-    [`<Image placeholder={blur} src="/image.jpg" />`, 'blur'],
-
-    // https://github.com/tailwindlabs/tailwindcss/issues/17974
-    ['<div v-if="!duration">', '!duration'],
-    ['<div :active="!duration">', '!duration'],
-    ['<div :active="!visible">', '!visible'],
-
-    // Alpine/Livewire wire:…
-    ['<x-input.number required="foo" wire:model.blur="coins" />', 'blur'],
-
-    // Vue 3 events
-    [`emit('blur', props.modelValue)\n`, 'blur'],
-    [`$emit('blur', props.modelValue)\n`, 'blur'],
-
-    // JavaScript / TypeScript
-    [`document.addEventListener('blur',handleBlur)`, 'blur'],
-    [`document.addEventListener('blur', handleBlur)`, 'blur'],
-
-    [`function foo({ outline = true })`, 'outline'],
-    [`function foo({ before = false, outline = true })`, 'outline'],
-    [`function foo({before=false,outline=true })`, 'outline'],
-    [`function foo({outline=true })`, 'outline'],
-    // https://github.com/tailwindlabs/tailwindcss/issues/18675
-    [
-      // With default value
-      `function foo({ size = "1.25rem", digit, outline = true, textClass = "", className = "" })`,
-      'outline',
-    ],
-    [
-      // Without default value
-      `function foo({ size = "1.25rem", digit, outline, textClass = "", className = "" })`,
-      'outline',
-    ],
-    [
-      // As the last argument
-      `function foo({ size = "1.25rem", digit, outline })`,
-      'outline',
-    ],
-    [
-      // As the last argument, but there is technically another `"` on the same line
-      `function foo({ size = "1.25rem", digit, outline }): { return "foo" }`,
-      'outline',
-    ],
-    [
-      // Tricky quote balancing
-      `function foo({ before = "'", outline, after = "'" }): { return "foo" }`,
-      'outline',
-    ],
-
-    [`function foo(blur, foo)`, 'blur'],
-    [`function foo(blur,foo)`, 'blur'],
-
-    // shadcn/ui variants
-    [`<Button variant="outline" />`, 'outline'],
-    [`<Button variant='outline' />`, 'outline'],
-    [`<Button variant={"outline"} />`, 'outline'],
-    [`<Button variant={'outline'} />`, 'outline'],
-    [`function Button({ variant = "outline" }) {}`, 'outline'],
-    [`function Button({ variant = 'outline' }) {}`, 'outline'],
-    [`function Button({ variant="outline" }) {}`, 'outline'],
-    [`function Button({ variant='outline' }) {}`, 'outline'],
-    [`Button({ variant: "outline" })`, 'outline'],
-    [`Button({ variant: 'outline' })`, 'outline'],
-  ])('does not replace classes in invalid positions #%#', async (example, candidate) => {
-    expect(
-      await migrateCandidate(designSystem, {}, candidate, {
-        contents: example,
-        start: example.indexOf(candidate),
-        end: example.indexOf(candidate) + candidate.length,
-      }),
-    ).toEqual(candidate)
-  })
-
-  test.each([
-    // Vue classes
-    [`<div class="shadow"></div>`, 'shadow', 'shadow-sm'],
-    [`<div :class="{ shadow: true }"></div>`, 'shadow', 'shadow-sm'],
-    [`<div enter-class="shadow"></div>`, 'shadow', 'shadow-sm'],
-    [`<div :enter-class="{ shadow: true }"></div>`, 'shadow', 'shadow-sm'],
-
-    // React classes
-    [`<div className="shadow"></div>`, 'shadow', 'shadow-sm'],
-    [`<div enterClassName="shadow"></div>`, 'shadow', 'shadow-sm'],
-
-    // Preact-style
-    [`<div enterClass="shadow"></div>`, 'shadow', 'shadow-sm'],
-  ])('replaces classes in valid positions #%#', async (example, candidate, expected) => {
-    expect(
-      await migrateCandidate(designSystem, {}, candidate, {
-        contents: example,
-        start: example.indexOf(candidate),
-        end: example.indexOf(candidate) + candidate.length,
-      }),
-    ).toEqual(expected)
-  })
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
deleted file mode 100644
index 2c09f299f..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
+++ /dev/null
@@ -1,367 +0,0 @@
-import { parseCandidate } from '../../../../tailwindcss/src/candidate'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-import * as version from '../../utils/version'
-
-const LOGICAL_OPERATORS = ['&&', '||', '?', '===', '==', '!=', '!==', '>', '>=', '<', '<=']
-const CONDITIONAL_TEMPLATE_SYNTAX = [
-  // Skip any generic attributes like `xxx="shadow"`,
-  // including Vue conditions like `v-if="something && shadow"`
-  // and Alpine conditions like `x-if="shadow"`,
-  // but allow Vue and React classes
-  /(?<!:?class|className)=['"]$/i,
-
-  // JavaScript / TypeScript
-  /addEventListener\(['"`]$/,
-
-  // Alpine
-  /wire:[^\s]*?$/,
-
-  // shadcn/ui variants
-  /variant\s*[:=]\s*\{?['"`]$/,
-]
-const NEXT_PLACEHOLDER_PROP = /placeholder=\{?['"`]$/
-const VUE_3_EMIT = /\b\$?emit\(['"`]$/
-
-export function isSafeMigration(
-  rawCandidate: string,
-  location: { contents: string; start: number; end: number },
-  designSystem: DesignSystem,
-): boolean {
-  // Ensure we are not migrating a candidate in a `<style>` block. The heuristic
-  // would be if the candidate is preceded by a whitespace and followed by a
-  // colon and whitespace.
-  //
-  // E.g.:
-  // ```vue
-  // <template>
-  //   <div class="foo"></div>
-  // </template>
-  //
-  //
-  // <style>
-  // .foo {
-  //   flex-shrink: 0;
-  //  ^           ^^
-  // }
-  // </style>
-  // ```
-  if (
-    // Whitespace before the candidate
-    location.contents[location.start - 1]?.match(/\s/) &&
-    // A colon followed by whitespace after the candidate
-    location.contents.slice(location.end, location.end + 2)?.match(/^:\s/)
-  ) {
-    // Compute all `<style>` ranges once and cache it for the current files
-    let ranges = styleBlockRanges.get(location.contents)
-
-    for (let i = 0; i < ranges.length; i += 2) {
-      let start = ranges[i]
-      let end = ranges[i + 1]
-
-      // Check if the candidate is inside a `<style>` block
-      if (location.start >= start && location.end <= end) {
-        return false
-      }
-    }
-  }
-
-  let currentLineBeforeCandidate = ''
-  for (let i = location.start - 1; i >= 0; i--) {
-    let char = location.contents.at(i)!
-    if (char === '\n') {
-      break
-    }
-    currentLineBeforeCandidate = char + currentLineBeforeCandidate
-  }
-  let currentLineAfterCandidate = ''
-  for (let i = location.end; i < location.contents.length; i++) {
-    let char = location.contents.at(i)!
-    if (char === '\n') {
-      break
-    }
-    currentLineAfterCandidate += char
-  }
-
-  // Inline `style="..."` attributes can contain CSS property names that look
-  // like valid utility candidates, such as `flex-grow`.
-  {
-    let ranges = inlineStyleAttributeValueRanges.get(location.contents)
-
-    for (let i = 0; i < ranges.length; i += 2) {
-      let start = ranges[i]
-      let end = ranges[i + 1]
-
-      if (location.start >= start && location.end <= end) {
-        return false
-      }
-    }
-  }
-
-  let [candidate] = parseCandidate(rawCandidate, designSystem)
-
-  // If we can't parse the candidate, then it's not a candidate at all. However,
-  // we could be dealing with legacy classes like `tw__flex` in Tailwind CSS v3
-  // land, which also wouldn't parse.
-  //
-  // So let's only skip if we couldn't parse and we are not in Tailwind CSS v3.
-  //
-  if (!candidate && version.isGreaterThan(3)) {
-    return false
-  }
-
-  // Parsed a candidate successfully, verify if it's a valid candidate
-  else if (candidate) {
-    // When we have variants, we can assume that the candidate is safe to migrate
-    // because that requires colons.
-    //
-    // E.g.: `hover:focus:flex`
-    if (candidate.variants.length > 0) {
-      return true
-    }
-
-    // When we have an arbitrary property, the candidate has such a particular
-    // structure it's very likely to be safe.
-    //
-    // E.g.: `[color:red]`
-    if (candidate.kind === 'arbitrary') {
-      return true
-    }
-
-    // A static candidate is very likely safe if it contains a dash.
-    //
-    // E.g.: `items-center`
-    if (candidate.kind === 'static' && candidate.root.includes('-')) {
-      return true
-    }
-
-    // A functional candidate is very likely safe if it contains a value (which
-    // implies a `-`). Or if the root contains a dash.
-    //
-    // E.g.: `bg-red-500`, `bg-position-20`
-    if (
-      (candidate.kind === 'functional' && candidate.value !== null) ||
-      (candidate.kind === 'functional' && candidate.root.includes('-'))
-    ) {
-      return true
-    }
-
-    // If the candidate contains a modifier, it's very likely to be safe because
-    // it implies that it contains a `/`.
-    //
-    // E.g.: `text-sm/7`
-    if (candidate.kind === 'functional' && candidate.modifier) {
-      return true
-    }
-  }
-
-  // Heuristic: Require the candidate to be inside quotes
-  let isQuoteBeforeCandidate = isMiddleOfString(currentLineBeforeCandidate)
-  let isQuoteAfterCandidate = isMiddleOfString(currentLineAfterCandidate)
-  if (!isQuoteBeforeCandidate || !isQuoteAfterCandidate) {
-    return false
-  }
-
-  // Heuristic: Disallow object access immediately following the candidate
-  if (currentLineAfterCandidate[0] === '.') {
-    return false
-  }
-
-  // Heuristic: Disallow function call expressions immediately following the candidate
-  if (currentLineAfterCandidate.trim().startsWith('(')) {
-    return false
-  }
-
-  // Heuristic: Disallow logical operators preceding or following the candidate
-  for (let operator of LOGICAL_OPERATORS) {
-    if (
-      currentLineAfterCandidate.trim().startsWith(operator) ||
-      currentLineBeforeCandidate.trim().endsWith(operator)
-    ) {
-      return false
-    }
-  }
-
-  // Heuristic: Disallow conditional template syntax
-  for (let rule of CONDITIONAL_TEMPLATE_SYNTAX) {
-    if (rule.test(currentLineBeforeCandidate)) {
-      return false
-    }
-  }
-
-  // Heuristic: Disallow Next.js Image `placeholder` prop
-  if (NEXT_PLACEHOLDER_PROP.test(currentLineBeforeCandidate)) {
-    return false
-  }
-
-  // Heuristic: Disallow replacements inside `emit('…', …)`
-  if (VUE_3_EMIT.test(currentLineBeforeCandidate)) {
-    return false
-  }
-
-  return true
-}
-
-// Assumptions:
-// - All `<style` tags appear before the next `</style>` tag
-// - All `<style` tags are closed with `</style>`
-// - No nested `<style>` tags
-const styleBlockRanges = new DefaultMap((source: string) => {
-  let ranges: number[] = []
-  let offset = 0
-
-  while (true) {
-    let startTag = source.indexOf('<style', offset)
-    if (startTag === -1) return ranges
-
-    offset = startTag + 1
-
-    // Ensure the style looks like:
-    // - `<style>`   (closed)
-    // - `<style …>` (with attributes)
-    if (!source[startTag + 6].match(/[>\s]/)) continue
-
-    let endTag = source.indexOf('</style>', offset)
-    if (endTag === -1) return ranges
-    offset = endTag + 1
-
-    ranges.push(startTag, endTag)
-  }
-})
-
-const BACKSLASH = 0x5c
-const DOUBLE_QUOTE = 0x22
-const SINGLE_QUOTE = 0x27
-const BACKTICK = 0x60
-const TAB = 0x09
-const NEWLINE = 0x0a
-const FORM_FEED = 0x0c
-const CARRIAGE_RETURN = 0x0d
-const SPACE = 0x20
-const SLASH = 0x2f
-const EQUALS = 0x3d
-const GREATER_THAN = 0x3e
-
-function isMiddleOfString(line: string): boolean {
-  let currentQuote: number | null = null
-
-  for (let i = 0; i < line.length; i++) {
-    let char = line.charCodeAt(i)
-    switch (char) {
-      // Escaped character, skip the next character
-      case BACKSLASH:
-        i++
-        break
-
-      case SINGLE_QUOTE:
-      case DOUBLE_QUOTE:
-      case BACKTICK:
-        // Found matching quote, we are outside of a string
-        if (currentQuote === char) {
-          currentQuote = null
-        }
-
-        // Found a quote, we are inside a string
-        else if (currentQuote === null) {
-          currentQuote = char
-        }
-        break
-    }
-  }
-
-  return currentQuote !== null
-}
-
-const inlineStyleAttributeValueRanges = new DefaultMap((source: string) => {
-  let ranges: number[] = []
-  let offset = 0
-
-  while (true) {
-    let tagStart = source.indexOf('<', offset)
-    if (tagStart === -1) return ranges
-
-    let tagEnd = source.indexOf('>', tagStart + 1)
-    if (tagEnd === -1) return ranges
-
-    offset = tagEnd + 1
-
-    for (let i = tagStart + 1; i < tagEnd; i++) {
-      let char = source.charCodeAt(i)
-
-      if (
-        char === SPACE ||
-        char === TAB ||
-        char === NEWLINE ||
-        char === CARRIAGE_RETURN ||
-        char === FORM_FEED
-      ) {
-        continue
-      }
-
-      let start = i
-      while (i < tagEnd) {
-        let char = source.charCodeAt(i)
-        if (
-          char === SPACE ||
-          char === TAB ||
-          char === NEWLINE ||
-          char === CARRIAGE_RETURN ||
-          char === FORM_FEED ||
-          char === EQUALS ||
-          char === GREATER_THAN ||
-          char === SLASH
-        ) {
-          break
-        }
-
-        i++
-      }
-
-      let attribute = source.slice(start, i).toLowerCase()
-      if (attribute !== 'style' && attribute !== ':style') continue
-
-      while (i < tagEnd) {
-        let char = source.charCodeAt(i)
-        if (
-          char !== SPACE &&
-          char !== TAB &&
-          char !== NEWLINE &&
-          char !== CARRIAGE_RETURN &&
-          char !== FORM_FEED
-        ) {
-          break
-        }
-
-        i++
-      }
-
-      if (source[i] !== '=') continue
-
-      i++
-      while (i < tagEnd) {
-        let char = source.charCodeAt(i)
-        if (
-          char !== SPACE &&
-          char !== TAB &&
-          char !== NEWLINE &&
-          char !== CARRIAGE_RETURN &&
-          char !== FORM_FEED
-        ) {
-          break
-        }
-
-        i++
-      }
-
-      let quote = source[i]
-      if (quote !== '"' && quote !== "'") continue
-
-      let valueStart = i + 1
-      let valueEnd = source.indexOf(quote, valueStart)
-      if (valueEnd === -1 || valueEnd > tagEnd) break
-
-      ranges.push(valueStart, valueEnd)
-      i = valueEnd
-    }
-  }
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-variants.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-variants.ts
deleted file mode 100644
index 258ba1b33..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-arbitrary-variants.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { cloneCandidate } from '../../../../tailwindcss/src/candidate'
-import {
-  PRE_COMPUTED_VARIANTS_KEY,
-  prepareDesignSystemStorage,
-  VARIANT_SIGNATURE_KEY,
-} from '../../../../tailwindcss/src/canonicalize-candidates'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import type { Writable } from '../../../../tailwindcss/src/types'
-import { replaceObject } from '../../../../tailwindcss/src/utils/replace-object'
-import { walkVariants } from '../../utils/walk-variants'
-
-export function migrateArbitraryVariants(
-  baseDesignSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  let designSystem = prepareDesignSystemStorage(baseDesignSystem)
-  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY].get(null)
-  let variants = designSystem.storage[PRE_COMPUTED_VARIANTS_KEY].get(null)
-
-  for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
-    // We are only interested in the variants
-    if (readonlyCandidate.variants.length <= 0) return rawCandidate
-
-    // The below logic makes use of mutation. Since candidates in the
-    // DesignSystem are cached, we can't mutate them directly.
-    let candidate = cloneCandidate(readonlyCandidate) as Writable<typeof readonlyCandidate>
-
-    for (let [variant] of walkVariants(candidate)) {
-      if (variant.kind === 'compound') continue
-
-      let targetString = designSystem.printVariant(variant)
-      let targetSignature = signatures.get(targetString)
-      if (typeof targetSignature !== 'string') continue
-
-      let foundVariants = variants.get(targetSignature)
-      if (foundVariants.length === 0) continue
-
-      // The variant is already in a canonical form, e.g.: `min-lg` and `lg`
-      // produce the same CSS, but both are valid so we keep them as-is.
-      if (foundVariants.includes(targetString)) continue
-
-      let foundVariant = foundVariants[0]
-      let parsedVariant = designSystem.parseVariant(foundVariant)
-      if (parsedVariant === null) continue
-
-      replaceObject(variant, parsedVariant)
-    }
-
-    return designSystem.printCandidate(candidate)
-  }
-
-  return rawCandidate
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-automatic-var-injection.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-automatic-var-injection.test.ts
deleted file mode 100644
index 5da651d51..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-automatic-var-injection.test.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test } from 'vitest'
-import { migrateAutomaticVarInjection } from './migrate-automatic-var-injection'
-
-test.each([
-  // Arbitrary candidates
-  ['[color:--my-color]', '[color:var(--my-color)]'],
-  ['[--my-color:red]', '[--my-color:red]'],
-  ['[--my-color:--my-other-color]', '[--my-color:var(--my-other-color)]'],
-
-  // Arbitrary values for functional candidates
-  ['bg-[--my-color]', 'bg-(--my-color)'],
-  ['bg-[color:--my-color]', 'bg-(color:--my-color)'],
-  ['border-[length:--my-length]', 'border-(length:--my-length)'],
-  ['border-[line-width:--my-width]', 'border-(line-width:--my-width)'],
-
-  // Can clean up the workaround for opting out of automatic var injection
-  ['bg-[_--my-color]', 'bg-[--my-color]'],
-  ['bg-[color:_--my-color]', 'bg-[color:--my-color]'],
-  ['border-[length:_--my-length]', 'border-[length:--my-length]'],
-  ['border-[line-width:_--my-width]', 'border-[line-width:--my-width]'],
-
-  // Modifiers
-  ['[color:--my-color]/[--my-opacity]', '[color:var(--my-color)]/(--my-opacity)'],
-  ['bg-red-500/[--my-opacity]', 'bg-red-500/(--my-opacity)'],
-  ['bg-[--my-color]/[--my-opacity]', 'bg-(--my-color)/(--my-opacity)'],
-  ['bg-[color:--my-color]/[--my-opacity]', 'bg-(color:--my-color)/(--my-opacity)'],
-
-  // Can clean up the workaround for opting out of automatic var injection
-  ['[color:--my-color]/[_--my-opacity]', '[color:var(--my-color)]/[--my-opacity]'],
-  ['bg-red-500/[_--my-opacity]', 'bg-red-500/[--my-opacity]'],
-  ['bg-[--my-color]/[_--my-opacity]', 'bg-(--my-color)/[--my-opacity]'],
-  ['bg-[color:--my-color]/[_--my-opacity]', 'bg-(color:--my-color)/[--my-opacity]'],
-
-  // Variants
-  ['supports-[--test]:flex', 'supports-(--test):flex'],
-  ['supports-[_--test]:flex', 'supports-[--test]:flex'],
-
-  // Custom CSS functions that look like variables should not be converted
-  ['w-[--spacing(5)]', 'w-[--spacing(5)]'],
-  ['bg-[--theme(--color-red-500)]', 'bg-[--theme(--color-red-500)]'],
-
-  // Fallback values should be included inside the `var(…)` function
-  ['bg-[--my-color,red]', 'bg-(--my-color,red)'],
-  // Fallback values can contain CSS functions
-  ['bg-[--my-color,theme(spacing.1)]', 'bg-(--my-color,theme(spacing.1))'],
-
-  // Some properties never had var() injection in v3.
-  ['[scroll-timeline-name:--myTimeline]', '[scroll-timeline-name:--myTimeline]'],
-  ['[timeline-scope:--myScope]', '[timeline-scope:--myScope]'],
-  ['[view-timeline-name:--myTimeline]', '[view-timeline-name:--myTimeline]'],
-  ['[font-palette:--myPalette]', '[font-palette:--myPalette]'],
-  ['[anchor-name:--myAnchor]', '[anchor-name:--myAnchor]'],
-  ['[anchor-scope:--myScope]', '[anchor-scope:--myScope]'],
-  ['[position-anchor:--myAnchor]', '[position-anchor:--myAnchor]'],
-  ['[position-try-options:--myAnchor]', '[position-try-options:--myAnchor]'],
-  ['[scroll-timeline:--myTimeline]', '[scroll-timeline:--myTimeline]'],
-  ['[animation-timeline:--myAnimation]', '[animation-timeline:--myAnimation]'],
-  ['[view-timeline:--myTimeline]', '[view-timeline:--myTimeline]'],
-  ['[position-try:--myAnchor]', '[position-try:--myAnchor]'],
-])('%s => %s', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  let migrated = migrateAutomaticVarInjection(designSystem, {}, candidate)
-  expect(migrated).toEqual(result)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-automatic-var-injection.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-automatic-var-injection.ts
deleted file mode 100644
index 0ea3bd691..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-automatic-var-injection.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import { cloneCandidate, type Candidate, type Variant } from '../../../../tailwindcss/src/candidate'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import type { Writable } from '../../../../tailwindcss/src/types'
-import * as ValueParser from '../../../../tailwindcss/src/value-parser'
-import { walk, WalkAction } from '../../../../tailwindcss/src/walk'
-
-export function migrateAutomaticVarInjection(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
-    // The below logic makes extended use of mutation. Since candidates in the
-    // DesignSystem are cached, we can't mutate them directly.
-    let candidate = cloneCandidate(readonlyCandidate) as Writable<Candidate>
-
-    let didChange = false
-
-    // Add `var(…)` in modifier position, e.g.:
-    //
-    // `bg-red-500/[--my-opacity]` => `bg-red-500/[var(--my-opacity)]`
-    if (
-      'modifier' in candidate &&
-      candidate.modifier?.kind === 'arbitrary' &&
-      !isAutomaticVarInjectionException(designSystem, candidate, candidate.modifier.value)
-    ) {
-      let { value, didChange: modifierDidChange } = injectVar(candidate.modifier.value)
-      candidate.modifier.value = value
-      didChange ||= modifierDidChange
-    }
-
-    // Add `var(…)` to all variants, e.g.:
-    //
-    // `supports-[--test]:flex'` => `supports-[var(--test)]:flex`
-    for (let variant of candidate.variants) {
-      let didChangeVariant = injectVarIntoVariant(designSystem, variant)
-      if (didChangeVariant) {
-        didChange = true
-      }
-    }
-
-    // Add `var(…)` to arbitrary candidates, e.g.:
-    //
-    // `[color:--my-color]` => `[color:var(--my-color)]`
-    if (
-      candidate.kind === 'arbitrary' &&
-      !isAutomaticVarInjectionException(designSystem, candidate, candidate.value)
-    ) {
-      let { value, didChange: valueDidChange } = injectVar(candidate.value)
-      candidate.value = value
-      didChange ||= valueDidChange
-    }
-
-    // Add `var(…)` to arbitrary values for functional candidates, e.g.:
-    //
-    // `bg-[--my-color]` => `bg-[var(--my-color)]`
-    if (
-      candidate.kind === 'functional' &&
-      candidate.value &&
-      candidate.value.kind === 'arbitrary' &&
-      !isAutomaticVarInjectionException(designSystem, candidate, candidate.value.value)
-    ) {
-      let { value, didChange: valueDidChange } = injectVar(candidate.value.value)
-      candidate.value.value = value
-      didChange ||= valueDidChange
-    }
-
-    if (didChange) {
-      return designSystem.printCandidate(candidate)
-    }
-  }
-  return rawCandidate
-}
-
-function injectVar(value: string): { value: string; didChange: boolean } {
-  let didChange = false
-  if (value.startsWith('--')) {
-    // E.g.:
-    //
-    // - `--my-color` → `var(--my-color)`             Convert variable
-    // - `--my-color,red` → `var(--my-color,red)`     Convert variable with fallback
-    // - `--theme(color.red)` → `--theme(color.red)`  Do not convert functions
-    //
-    if (
-      // No `(` definitely means there is no function
-      !value.includes('(') ||
-      // There could be a function call in the fallback value, but it cannot be
-      // top-level, so we can safely check the first part
-      ValueParser.parse(value)[0]?.kind !== 'function'
-    ) {
-      value = `var(${value})`
-      didChange = true
-    }
-  } else if (value.startsWith(' --')) {
-    value = value.slice(1)
-    didChange = true
-  }
-
-  return { value, didChange }
-}
-
-function injectVarIntoVariant(designSystem: DesignSystem, variant: Variant): boolean {
-  let didChange = false
-  if (
-    variant.kind === 'functional' &&
-    variant.value &&
-    variant.value.kind === 'arbitrary' &&
-    !isAutomaticVarInjectionException(
-      designSystem,
-      createEmptyCandidate(variant),
-      variant.value.value,
-    )
-  ) {
-    let { value, didChange: valueDidChange } = injectVar(variant.value.value)
-    variant.value.value = value
-    didChange ||= valueDidChange
-  }
-
-  if (variant.kind === 'compound') {
-    let compoundDidChange = injectVarIntoVariant(designSystem, variant.variant)
-    if (compoundDidChange) {
-      didChange = true
-    }
-  }
-
-  return didChange
-}
-
-function createEmptyCandidate(variant: Variant) {
-  return {
-    kind: 'arbitrary' as const,
-    property: 'color',
-    value: 'red',
-    modifier: null,
-    variants: [variant],
-    important: false,
-    raw: 'candidate',
-  } satisfies Candidate
-}
-
-const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
-  // Concrete properties
-  'scroll-timeline-name',
-  'timeline-scope',
-  'view-timeline-name',
-  'font-palette',
-  'anchor-name',
-  'anchor-scope',
-  'position-anchor',
-  'position-try-options',
-
-  // Shorthand properties
-  'scroll-timeline',
-  'animation-timeline',
-  'view-timeline',
-  'position-try',
-])
-// Some properties never had var() injection in v3. We need to convert the candidate to CSS
-// so we can check the properties used by the utility.
-function isAutomaticVarInjectionException(
-  designSystem: DesignSystem,
-  candidate: Candidate,
-  value: string,
-): boolean {
-  let ast = designSystem.compileAstNodes(candidate).map((n) => n.node)
-
-  let isException = false
-  walk(ast, (node) => {
-    if (
-      node.kind === 'declaration' &&
-      AUTO_VAR_INJECTION_EXCEPTIONS.has(node.property) &&
-      node.value == value
-    ) {
-      isException = true
-      return WalkAction.Stop
-    }
-  })
-  return isException
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-camelcase-in-named-value.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-camelcase-in-named-value.test.ts
deleted file mode 100644
index ed5be23c0..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-camelcase-in-named-value.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { migrateCamelcaseInNamedValue } from './migrate-camelcase-in-named-value'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-test.each([
-  ['text-superRed', 'text-super-red'],
-  ['text-red/superOpaque', 'text-red/super-opaque'],
-  ['text-superRed/superOpaque', 'text-super-red/super-opaque'],
-
-  // Should not migrate named values in modifiers
-  ['group-hover/superGroup:underline', 'group-hover/superGroup:underline'],
-
-  ['hover:text-superRed', 'hover:text-super-red'],
-  ['hover:text-red/superOpaque', 'hover:text-red/super-opaque'],
-  ['hover:text-superRed/superOpaque', 'hover:text-super-red/super-opaque'],
-])('%s => %s', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  expect(migrateCamelcaseInNamedValue(designSystem, {}, candidate)).toEqual(result)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-camelcase-in-named-value.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-camelcase-in-named-value.ts
deleted file mode 100644
index 9cfbc7de0..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-camelcase-in-named-value.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { cloneCandidate } from '../../../../tailwindcss/src/candidate'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import * as version from '../../utils/version'
-
-// Converts named values to use kebab-case. This is necessary because the
-// upgrade tool also renames the theme values to kebab-case, so `text-superRed`
-// will have its theme value renamed to `--color-super-red` and thus the utility
-// will be renamed to `text-super-red`.
-export function migrateCamelcaseInNamedValue(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  if (!version.isMajor(3)) return rawCandidate
-
-  for (let candidate of designSystem.parseCandidate(rawCandidate)) {
-    if (candidate.kind !== 'functional') continue
-    let clone = cloneCandidate(candidate)
-    let didChange = false
-
-    if (
-      candidate.value &&
-      clone.value &&
-      candidate.value.kind === 'named' &&
-      clone.value.kind === 'named' &&
-      candidate.value.value.match(/[A-Z]/)
-    ) {
-      clone.value.value = camelToKebab(candidate.value.value)
-      didChange = true
-    }
-
-    if (
-      candidate.modifier &&
-      clone.modifier &&
-      candidate.modifier.kind === 'named' &&
-      clone.modifier.kind === 'named' &&
-      candidate.modifier.value.match(/[A-Z]/)
-    ) {
-      clone.modifier.value = camelToKebab(candidate.modifier.value)
-      didChange = true
-    }
-
-    if (didChange) {
-      return designSystem.printCandidate(clone)
-    }
-  }
-
-  return rawCandidate
-}
-
-function camelToKebab(str: string): string {
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-canonicalize-candidate.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-canonicalize-candidate.test.ts
deleted file mode 100644
index 57fe80c22..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-canonicalize-candidate.test.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { migrateCanonicalizeCandidate } from './migrate-canonicalize-candidate'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-test.each([
-  // Normalize whitespace in arbitrary properties
-  ['[display:flex]', '[display:flex]'],
-  ['[display:_flex]', '[display:flex]'],
-  ['[display:flex_]', '[display:flex]'],
-  ['[display:_flex_]', '[display:flex]'],
-
-  // Normalize whitespace in `calc` expressions
-  ['w-[calc(100%-2rem)]', 'w-[calc(100%-2rem)]'],
-  ['w-[calc(100%_-_2rem)]', 'w-[calc(100%-2rem)]'],
-
-  // Normalize the important modifier
-  ['!flex', 'flex!'],
-  ['flex!', 'flex!'],
-])('%s => %s', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  expect(migrateCanonicalizeCandidate(designSystem, {}, candidate)).toEqual(result)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-canonicalize-candidate.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-canonicalize-candidate.ts
deleted file mode 100644
index 32d126467..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-canonicalize-candidate.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-
-// Canonicalize the value to its minimal form. This will normalize whitespace,
-// and print the important modifier `!` in the correct place.
-//
-// E.g.:
-//
-// ```
-// [display:_flex_] => [display:flex]
-// [display:_flex]  => [display:flex]
-// [display:flex_]  => [display:flex]
-// [display:flex]   => [display:flex]
-// ```
-//
-export function migrateCanonicalizeCandidate(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-) {
-  for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
-    let canonicalizedCandidate = designSystem.printCandidate(readonlyCandidate)
-    if (canonicalizedCandidate !== rawCandidate) {
-      return canonicalizedCandidate
-    }
-  }
-
-  return rawCandidate
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-handle-empty-arbitrary-values.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-handle-empty-arbitrary-values.test.ts
deleted file mode 100644
index bebd43343..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-handle-empty-arbitrary-values.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { migrateEmptyArbitraryValues } from './migrate-handle-empty-arbitrary-values'
-import { migratePrefix } from './migrate-prefix'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-test.each([
-  ['group-[]:flex', 'group-[&]:flex'],
-  ['group-[]/name:flex', 'group-[&]/name:flex'],
-
-  ['peer-[]:flex', 'peer-[&]:flex'],
-  ['peer-[]/name:flex', 'peer-[&]/name:flex'],
-])('%s => %s (%#)', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  expect(migrateEmptyArbitraryValues(designSystem, {}, candidate)).toEqual(result)
-})
-
-test.each([
-  ['group-[]:tw-flex', 'tw:group-[&]:flex'],
-  ['group-[]/name:tw-flex', 'tw:group-[&]/name:flex'],
-
-  ['peer-[]:tw-flex', 'tw:peer-[&]:flex'],
-  ['peer-[]/name:tw-flex', 'tw:peer-[&]/name:flex'],
-])('%s => %s (%#)', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss" prefix(tw);', {
-    base: __dirname,
-  })
-
-  expect(
-    [migrateEmptyArbitraryValues, migratePrefix].reduce(
-      (acc, step) => step(designSystem, { prefix: 'tw-' }, acc),
-      candidate,
-    ),
-  ).toEqual(result)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-handle-empty-arbitrary-values.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-handle-empty-arbitrary-values.ts
deleted file mode 100644
index 0058814d9..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-handle-empty-arbitrary-values.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-
-export function migrateEmptyArbitraryValues(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  // We can parse the candidate, nothing to do
-  if (designSystem.parseCandidate(rawCandidate).length > 0) {
-    return rawCandidate
-  }
-
-  // No need to handle empty arbitrary values
-  if (!rawCandidate.includes('[]')) {
-    return rawCandidate
-  }
-
-  // Add the `&` placeholder to the empty arbitrary values. Other codemods might
-  // migrate these away, but if not, then it's at least valid to parse.
-  //
-  // E.g.: `group-[]:flex` => `group-[&]:flex`
-  // E.g.: `group-[]/name:flex` => `group-[&]/name:flex`
-  return rawCandidate
-    .replaceAll('-[]:', '-[&]:') // End of variant
-    .replaceAll('-[]/', '-[&]/') // With modifier
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-arbitrary-values.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-arbitrary-values.test.ts
deleted file mode 100644
index 8bb193b43..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-arbitrary-values.test.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test } from 'vitest'
-import { migrateLegacyArbitraryValues } from './migrate-legacy-arbitrary-values'
-
-test.each([
-  ['grid-cols-[auto,1fr]', 'grid-cols-[auto_1fr]'],
-  ['grid-rows-[auto,1fr]', 'grid-rows-[auto_1fr]'],
-  ['object-[10px,20px]', 'object-[10px_20px]'],
-])('%s => %s', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  expect(migrateLegacyArbitraryValues(designSystem, {}, candidate)).toEqual(result)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-arbitrary-values.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-arbitrary-values.ts
deleted file mode 100644
index 2bd7d2fd5..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-arbitrary-values.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cloneCandidate, parseCandidate } from '../../../../tailwindcss/src/candidate'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-
-export function migrateLegacyArbitraryValues(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  for (let candidate of parseCandidate(rawCandidate, designSystem)) {
-    let clone = cloneCandidate(candidate)
-    let changed = false
-
-    // Convert commas to spaces. E.g.: [auto,1fr] to [auto_1fr]
-    if (
-      clone.kind === 'functional' &&
-      clone.value?.kind === 'arbitrary' &&
-      (clone.root === 'grid-cols' || clone.root == 'grid-rows' || clone.root == 'object')
-    ) {
-      changed = true
-      clone.value.value = segment(clone.value.value, ',').join(' ')
-    }
-
-    return changed ? designSystem.printCandidate(clone) : rawCandidate
-  }
-
-  return rawCandidate
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-classes.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-classes.test.ts
deleted file mode 100644
index 5b204386f..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-classes.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { migrateLegacyClasses } from './migrate-legacy-classes'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-test.each([
-  ['shadow', 'shadow-sm'],
-  ['shadow-sm', 'shadow-xs'],
-  ['shadow-xs', 'shadow-2xs'],
-
-  ['inset-shadow', 'inset-shadow-sm'],
-  ['inset-shadow-sm', 'inset-shadow-xs'],
-  ['inset-shadow-xs', 'inset-shadow-2xs'],
-
-  ['drop-shadow', 'drop-shadow-sm'],
-  ['drop-shadow-sm', 'drop-shadow-xs'],
-
-  ['rounded', 'rounded-sm'],
-  ['rounded-sm', 'rounded-xs'],
-
-  ['blur', 'blur-sm'],
-  ['blur-sm', 'blur-xs'],
-
-  ['backdrop-blur', 'backdrop-blur-sm'],
-  ['backdrop-blur-sm', 'backdrop-blur-xs'],
-
-  ['ring', 'ring-3'],
-
-  ['outline', 'outline-solid'],
-
-  ['blur!', 'blur-sm!'],
-  ['hover:blur', 'hover:blur-sm'],
-  ['hover:blur!', 'hover:blur-sm!'],
-
-  ['hover:blur-sm', 'hover:blur-xs'],
-  ['blur-sm!', 'blur-xs!'],
-  ['hover:blur-sm!', 'hover:blur-xs!'],
-])('%s => %s (%#)', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  expect(await migrateLegacyClasses(designSystem, {}, candidate)).toEqual(result)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-classes.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-classes.ts
deleted file mode 100644
index 2b088aa2e..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-legacy-classes.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import path from 'node:path'
-import url from 'node:url'
-import { cloneCandidate, type Candidate } from '../../../../tailwindcss/src/candidate'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-import * as version from '../../utils/version'
-import { baseCandidate } from './candidates'
-
-const __filename = url.fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-const LEGACY_CLASS_MAP = new Map([
-  ['shadow', 'shadow-sm'],
-  ['shadow-sm', 'shadow-xs'],
-  ['shadow-xs', 'shadow-2xs'],
-
-  ['inset-shadow', 'inset-shadow-sm'],
-  ['inset-shadow-sm', 'inset-shadow-xs'],
-  ['inset-shadow-xs', 'inset-shadow-2xs'],
-
-  ['drop-shadow', 'drop-shadow-sm'],
-  ['drop-shadow-sm', 'drop-shadow-xs'],
-
-  ['rounded', 'rounded-sm'],
-  ['rounded-sm', 'rounded-xs'],
-
-  ['blur', 'blur-sm'],
-  ['blur-sm', 'blur-xs'],
-
-  ['backdrop-blur', 'backdrop-blur-sm'],
-  ['backdrop-blur-sm', 'backdrop-blur-xs'],
-
-  ['ring', 'ring-3'],
-
-  ['outline', 'outline-solid'],
-])
-
-const THEME_KEYS = new Map([
-  ['shadow', '--shadow'],
-  ['shadow-sm', '--shadow-sm'],
-  ['shadow-xs', '--shadow-xs'],
-  ['shadow-2xs', '--shadow-2xs'],
-
-  ['drop-shadow', '--drop-shadow'],
-  ['drop-shadow-sm', '--drop-shadow-sm'],
-  ['drop-shadow-xs', '--drop-shadow-xs'],
-
-  ['rounded', '--radius'],
-  ['rounded-sm', '--radius-sm'],
-  ['rounded-xs', '--radius-xs'],
-
-  ['blur', '--blur'],
-  ['blur-sm', '--blur-sm'],
-  ['blur-xs', '--blur-xs'],
-
-  ['backdrop-blur', '--backdrop-blur'],
-  ['backdrop-blur-sm', '--backdrop-blur-sm'],
-  ['backdrop-blur-xs', '--backdrop-blur-xs'],
-
-  ['ring', '--default-ring-width'],
-  ['ring-3', '--ring-width-3'],
-])
-
-const DESIGN_SYSTEMS = new DefaultMap((base) => {
-  return __unstable__loadDesignSystem('@import "tailwindcss";', { base })
-})
-
-export async function migrateLegacyClasses(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): Promise<string> {
-  // These migrations are only safe when migrating from v3 to v4.
-  //
-  // Migrating from `rounded` to `rounded-sm` once is fine (v3 -> v4). But if we
-  // migrate again (v4 -> v4), then `rounded-sm` would be migrated to
-  // `rounded-xs` which is incorrect because we already migrated this.
-  if (!version.isMajor(3)) {
-    return rawCandidate
-  }
-
-  let defaultDesignSystem = await DESIGN_SYSTEMS.get(__dirname)
-
-  function* migrate(rawCandidate: string) {
-    for (let candidate of designSystem.parseCandidate(rawCandidate)) {
-      // Create a base candidate string from the candidate.
-      // E.g.: `hover:blur!` -> `blur`
-      let base = baseCandidate(candidate)
-      let baseCandidateString = designSystem.printCandidate(base)
-
-      // Find the new base candidate string. `blur` -> `blur-sm`
-      let newBaseCandidateString = LEGACY_CLASS_MAP.get(baseCandidateString)
-      if (!newBaseCandidateString) continue
-
-      // Parse the new base candidate string into an actual candidate AST.
-      let [newBaseCandidate] = designSystem.parseCandidate(newBaseCandidateString)
-      if (!newBaseCandidate) continue
-
-      // Re-apply the variants and important flag from the original candidate.
-      // E.g.: `hover:blur!` -> `blur` -> `blur-sm` -> `hover:blur-sm!`
-      let newCandidate = cloneCandidate(newBaseCandidate) as Candidate
-      newCandidate.variants = candidate.variants
-      newCandidate.important = candidate.important
-
-      yield [
-        newCandidate,
-        THEME_KEYS.get(baseCandidateString),
-        THEME_KEYS.get(newBaseCandidateString),
-      ] as const
-    }
-  }
-
-  for (let [toCandidate, fromThemeKey, toThemeKey] of migrate(rawCandidate)) {
-    if (fromThemeKey && toThemeKey) {
-      // Migrating something that resolves to a value in the theme.
-      let customFrom = designSystem.resolveThemeValue(fromThemeKey, true)
-      let defaultFrom = defaultDesignSystem.resolveThemeValue(fromThemeKey, true)
-      let customTo = designSystem.resolveThemeValue(toThemeKey, true)
-      let defaultTo = defaultDesignSystem.resolveThemeValue(toThemeKey)
-
-      // The new theme value is not defined, which means we can't safely
-      // migrate the utility.
-      if (customTo === undefined && defaultTo !== undefined) {
-        continue
-      }
-
-      // The "from" theme value changed compared to the default theme value.
-      if (customFrom !== defaultFrom) {
-        continue
-      }
-
-      // The "to" theme value changed compared to the default theme value.
-      if (customTo !== defaultTo) {
-        continue
-      }
-    }
-
-    return designSystem.printCandidate(toCandidate)
-  }
-
-  return rawCandidate
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-max-width-screen.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-max-width-screen.test.ts
deleted file mode 100644
index 91b57b3db..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-max-width-screen.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test } from 'vitest'
-import { migrateMaxWidthScreen } from './migrate-max-width-screen'
-
-test('converts max-w-screen-* to max-w-[theme(screens.*)] (so it will later be converted to the var injection)', async () => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  let migrated = migrateMaxWidthScreen(designSystem, {}, 'max-w-screen-md')
-  expect(migrated).toMatchInlineSnapshot(`"max-w-[theme(screens.md)]"`)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-max-width-screen.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-max-width-screen.ts
deleted file mode 100644
index cc9b7e9e2..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-max-width-screen.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-
-export function migrateMaxWidthScreen(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  for (let candidate of designSystem.parseCandidate(rawCandidate)) {
-    if (
-      candidate.kind === 'functional' &&
-      candidate.root === 'max-w' &&
-      candidate.value?.value.startsWith('screen-')
-    ) {
-      return designSystem.printCandidate({
-        ...candidate,
-        value: {
-          ...candidate.value,
-          value: `[theme(screens.${candidate.value.value.slice(7)})]`,
-        },
-      })
-    }
-  }
-  return rawCandidate
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-modernize-arbitrary-values.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-modernize-arbitrary-values.test.ts
deleted file mode 100644
index b1887ae0b..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-modernize-arbitrary-values.test.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test, vi } from 'vitest'
-import type { UserConfig } from '../../../../tailwindcss/src/compat/config/types'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import * as versions from '../../utils/version'
-import { migrateArbitraryVariants } from './migrate-arbitrary-variants'
-import { migrateEmptyArbitraryValues } from './migrate-handle-empty-arbitrary-values'
-import { migrateModernizeArbitraryValues } from './migrate-modernize-arbitrary-values'
-import { migratePrefix } from './migrate-prefix'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-const css = String.raw
-
-function migrate(designSystem: DesignSystem, userConfig: UserConfig | null, rawCandidate: string) {
-  for (let migration of [
-    migrateEmptyArbitraryValues,
-    migratePrefix,
-    migrateModernizeArbitraryValues,
-    migrateArbitraryVariants,
-    (designSystem: DesignSystem, _: UserConfig | null, rawCandidate: string) => {
-      return designSystem.canonicalizeCandidates([rawCandidate]).pop() ?? rawCandidate
-    },
-  ]) {
-    rawCandidate = migration(designSystem, userConfig, rawCandidate)
-  }
-  return rawCandidate
-}
-
-test.each([
-  // Some extreme examples of what happens in the wild:
-  ['group-[]:flex', 'in-[.group]:flex'],
-  ['group-[]/name:flex', 'in-[.group\\/name]:flex'],
-
-  // Migrate `peer-[]` to a parsable `peer-[&]` instead:
-  ['peer-[]:flex', 'peer-[&]:flex'],
-  ['peer-[]/name:flex', 'peer-[&]/name:flex'],
-
-  // These shouldn't happen in the real world (because compound variants are
-  // new). But this could happen once we allow codemods to run in v4+ projects.
-  ['has-group-[]:flex', 'has-in-[.group]:flex'],
-  ['has-group-[]/name:flex', 'has-in-[.group\\/name]:flex'],
-  ['not-group-[]:flex', 'not-in-[.group]:flex'],
-  ['not-group-[]/name:flex', 'not-in-[.group\\/name]:flex'],
-])('%s => %s (%#)', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem(
-    css`
-      @import 'tailwindcss';
-      @theme {
-        --*: initial;
-      }
-    `,
-    { base: __dirname },
-  )
-
-  expect(migrate(designSystem, {}, candidate)).toEqual(result)
-})
-
-test.each([
-  // Should not prefix classes in arbitrary values
-  ['[.foo_&]:tw-flex', 'tw:in-[.foo]:flex'],
-
-  // Should migrate `.group` classes
-  ['group-[]:tw-flex', 'tw:in-[.tw\\:group]:flex'],
-  ['group-[]/name:tw-flex', 'tw:in-[.tw\\:group\\/name]:flex'],
-
-  // Migrate `peer-[]` to a parsable `peer-[&]` instead:
-  ['peer-[]:tw-flex', 'tw:peer-[&]:flex'],
-  ['peer-[]/name:tw-flex', 'tw:peer-[&]/name:flex'],
-
-  // However, `.group` inside of an arbitrary variant should not be prefixed:
-  ['[.group_&]:tw-flex', 'tw:in-[.group]:flex'],
-
-  // These shouldn't happen in the real world (because compound variants are
-  // new). But this could happen once we allow codemods to run in v4+ projects.
-  ['has-group-[]:tw-flex', 'tw:has-in-[.tw\\:group]:flex'],
-  ['has-group-[]/name:tw-flex', 'tw:has-in-[.tw\\:group\\/name]:flex'],
-  ['not-group-[]:tw-flex', 'tw:not-in-[.tw\\:group]:flex'],
-  ['not-group-[]/name:tw-flex', 'tw:not-in-[.tw\\:group\\/name]:flex'],
-])('%s => %s (%#)', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem(
-    css`
-      @import 'tailwindcss' prefix(tw);
-      @theme {
-        --*: initial;
-      }
-    `,
-    { base: __dirname },
-  )
-
-  expect(migrate(designSystem, { prefix: 'tw-' }, candidate)).toEqual(result)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-modernize-arbitrary-values.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-modernize-arbitrary-values.ts
deleted file mode 100644
index 91718b323..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-modernize-arbitrary-values.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { cloneCandidate, parseCandidate } from '../../../../tailwindcss/src/candidate'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { replaceObject } from '../../../../tailwindcss/src/utils/replace-object'
-import { walkVariants } from '../../utils/walk-variants'
-
-export function migrateModernizeArbitraryValues(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  for (let candidate of parseCandidate(rawCandidate, designSystem)) {
-    let clone = cloneCandidate(candidate)
-    let changed = false
-
-    for (let [variant] of walkVariants(clone)) {
-      // Forward modifier from the root to the compound variant
-      if (
-        variant.kind === 'compound' &&
-        (variant.root === 'has' || variant.root === 'not' || variant.root === 'in')
-      ) {
-        if (variant.modifier !== null) {
-          if ('modifier' in variant.variant) {
-            variant.variant.modifier = variant.modifier
-            variant.modifier = null
-          }
-        }
-      }
-
-      // Promote `group-[]:flex` to `in-[.group]:flex`
-      //                ^^ Yes, this is empty
-      // Promote `group-[]/name:flex` to `in-[.group\/name]:flex`
-      if (
-        variant.kind === 'compound' &&
-        variant.root === 'group' &&
-        variant.variant.kind === 'arbitrary' &&
-        variant.variant.selector === '&'
-      ) {
-        // `group-[]`
-        if (variant.modifier === null) {
-          changed = true
-          replaceObject(
-            variant,
-            designSystem.parseVariant(
-              designSystem.theme.prefix
-                ? `in-[.${designSystem.theme.prefix}\\:group]`
-                : 'in-[.group]',
-            ),
-          )
-        }
-
-        // `group-[]/name`
-        else if (variant.modifier.kind === 'named') {
-          changed = true
-          replaceObject(
-            variant,
-            designSystem.parseVariant(
-              designSystem.theme.prefix
-                ? `in-[.${designSystem.theme.prefix}\\:group\\/${variant.modifier.value}]`
-                : `in-[.group\\/${variant.modifier.value}]`,
-            ),
-          )
-        }
-        continue
-      }
-    }
-
-    return changed ? designSystem.printCandidate(clone) : rawCandidate
-  }
-
-  return rawCandidate
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-prefix.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-prefix.test.ts
deleted file mode 100644
index f47e181af..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-prefix.test.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { describe, expect, test, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { migratePrefix } from './migrate-prefix'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-describe('for projects with configured prefix', () => {
-  test.each([
-    ['tw-flex', 'tw:flex'],
-    ['-tw-mr-4', 'tw:-mr-4'],
-    ['!tw-flex', 'tw:flex!'],
-    ['tw-text-red-500/50', 'tw:text-red-500/50'],
-
-    // With variants
-    ['hover:tw-flex', 'tw:hover:flex'],
-    ['hover:-tw-mr-4', 'tw:hover:-mr-4'],
-    ['hover:!tw-flex', 'tw:hover:flex!'],
-
-    // Does not change un-prefixed candidates
-    ['flex', 'flex'],
-    ['hover:flex', 'hover:flex'],
-
-    // Adds prefix to arbitrary candidates
-    ['[color:red]', 'tw:[color:red]'],
-
-    // `.group` and `.peer` classes
-    ['tw-group', 'tw:group'],
-    ['tw-group/foo', 'tw:group/foo'],
-    ['tw-peer', 'tw:peer'],
-    ['tw-peer/foo', 'tw:peer/foo'],
-  ])('%s => %s', async (candidate, result) => {
-    let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss" prefix(tw);', {
-      base: __dirname,
-    })
-
-    expect(migratePrefix(designSystem, { prefix: 'tw-' }, candidate)).toEqual(result)
-  })
-})
-
-test('can handle complex prefix separators', async () => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss" prefix(tw);', {
-    base: __dirname,
-  })
-
-  expect(migratePrefix(designSystem, { prefix: 'tw__' }, 'tw__flex')).toEqual('tw:flex')
-})
-
-describe('for projects without configured prefix', () => {
-  test('ignores candidates with prefixes', async () => {
-    let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-      base: __dirname,
-    })
-
-    expect(migratePrefix(designSystem, {}, 'tw-flex')).toEqual('tw-flex')
-  })
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-prefix.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-prefix.ts
deleted file mode 100644
index 776032850..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-prefix.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import { decl } from '../../../../tailwindcss/src/ast'
-import { parseCandidate, type Candidate } from '../../../../tailwindcss/src/candidate'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-import * as version from '../../utils/version'
-
-let seenDesignSystems = new WeakSet<DesignSystem>()
-
-export function migratePrefix(
-  designSystem: DesignSystem,
-  userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  if (!designSystem.theme.prefix) return rawCandidate
-  if (!userConfig) return rawCandidate
-  if (!version.isMajor(3)) return rawCandidate
-
-  if (!seenDesignSystems.has(designSystem)) {
-    designSystem.utilities.functional('group', (value) => [
-      // To ensure that `@apply group` works when computing a signature
-      decl('--phantom-class', 'group'),
-      // To ensure `group` and `group/foo` are considered different classes
-      decl('--phantom-modifier', value.modifier?.value),
-    ])
-    designSystem.utilities.functional('peer', (value) => [
-      // To ensure that `@apply peer` works when computing a signature
-      decl('--phantom-class', 'peer'),
-      // To ensure `peer` and `peer/foo` are considered different classes
-      decl('--phantom-modifier', value.modifier?.value),
-    ])
-    seenDesignSystems.add(designSystem)
-  }
-
-  let v3Base = extractV3Base(designSystem, userConfig, rawCandidate)
-
-  if (!v3Base) return rawCandidate
-
-  // Only migrate candidates which are valid in v4
-  let originalPrefix = designSystem.theme.prefix
-  let candidate: Candidate | null = null
-  try {
-    designSystem.theme.prefix = null
-
-    let unprefixedCandidate =
-      rawCandidate.slice(0, v3Base.start) + v3Base.base + rawCandidate.slice(v3Base.end)
-
-    // Note: This is not a valid candidate in the original DesignSystem, so we
-    // can not use the `DesignSystem#parseCandidate` API here or otherwise this
-    // invalid candidate will be cached.
-    let candidates = [...parseCandidate(unprefixedCandidate, designSystem)]
-    if (candidates.length > 0) {
-      candidate = candidates[0]
-    }
-  } finally {
-    designSystem.theme.prefix = originalPrefix
-  }
-
-  if (!candidate) return rawCandidate
-
-  return designSystem.printCandidate(candidate)
-}
-
-// Parses a raw candidate with v3 compatible prefix syntax. This won't match if
-// the `base` part of the candidate does not match the configured prefix, unless
-// a bare candidate is used.
-function extractV3Base(
-  designSystem: DesignSystem,
-  userConfig: Config,
-  rawCandidate: string,
-): { base: string; start: number; end: number } | null {
-  if (!designSystem.theme.prefix) return null
-  if (!userConfig.prefix)
-    throw new Error(
-      'Could not find the Tailwind CSS v3 `prefix` configuration inside the JavaScript config.',
-    )
-
-  // hover:focus:underline
-  // ^^^^^ ^^^^^^           -> Variants
-  //             ^^^^^^^^^  -> Base
-  let rawVariants = segment(rawCandidate, ':')
-
-  // SAFETY: At this point it is safe to use TypeScript's non-null assertion
-  // operator because even if the `input` was an empty string, splitting an
-  // empty string by `:` will always result in an array with at least one
-  // element.
-  let base = rawVariants.pop()!
-  let start = rawCandidate.length - base.length
-  let end = start + base.length
-
-  let important = false
-  let negative = false
-
-  // Candidates that end with an exclamation mark are the important version with
-  // higher specificity of the non-important candidate, e.g. `mx-4!`.
-  if (base[base.length - 1] === '!') {
-    important = true
-    base = base.slice(0, -1)
-  }
-
-  // Legacy syntax with leading `!`, e.g. `!mx-4`.
-  else if (base[0] === '!') {
-    important = true
-    base = base.slice(1)
-  }
-
-  // Candidates that start with a dash are the negative versions of another
-  // candidate, e.g. `-mx-4`.
-  if (base[0] === '-') {
-    negative = true
-    base = base.slice(1)
-  }
-
-  if (!base.startsWith(userConfig.prefix) && base[0] !== '[') {
-    return null
-  } else {
-    if (base[0] !== '[') base = base.slice(userConfig.prefix.length)
-
-    if (negative) base = '-' + base
-    if (important) base += '!'
-
-    return {
-      base,
-      start,
-      end,
-    }
-  }
-}
-
-const VALID_PREFIX = /([a-z]+)/
-export function migratePrefixValue(prefix: string): string {
-  let result = VALID_PREFIX.exec(prefix.toLocaleLowerCase())
-  if (!result) {
-    console.warn(
-      `The prefix "${prefix} can not be used with Tailwind CSS v4 and cannot be converted to a valid one automatically. We've updated it to "tw" for you.`,
-    )
-    return 'tw'
-  }
-  return result[0]
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-simple-legacy-classes.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-simple-legacy-classes.test.ts
deleted file mode 100644
index 456671dd7..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-simple-legacy-classes.test.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { expect, test, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { migrateSimpleLegacyClasses } from './migrate-simple-legacy-classes'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-test.each([
-  ['overflow-ellipsis', 'text-ellipsis'],
-  ['flex-grow', 'grow'],
-  ['flex-grow-0', 'grow-0'],
-  ['flex-shrink', 'shrink'],
-  ['flex-shrink-0', 'shrink-0'],
-  ['decoration-clone', 'box-decoration-clone'],
-  ['decoration-slice', 'box-decoration-slice'],
-
-  ['max-lg:hover:decoration-slice', 'max-lg:hover:box-decoration-slice'],
-  ['max-lg:hover:decoration-slice!', 'max-lg:hover:box-decoration-slice!'],
-  ['max-lg:hover:!decoration-slice', 'max-lg:hover:box-decoration-slice!'],
-
-  ['focus:outline-none', 'focus:outline-hidden'],
-
-  // Should not convert v2 utilities
-  ['overflow-clip', 'overflow-clip'],
-])('%s => %s', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  expect(migrateSimpleLegacyClasses(designSystem, {}, candidate)).toEqual(result)
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-simple-legacy-classes.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-simple-legacy-classes.ts
deleted file mode 100644
index 415ed524c..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-simple-legacy-classes.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import * as version from '../../utils/version'
-
-// Classes that used to exist in Tailwind CSS v3, but do not exist in Tailwind
-// CSS v4 anymore.
-const LEGACY_CLASS_MAP: Record<string, string> = {
-  'overflow-ellipsis': 'text-ellipsis',
-
-  'flex-grow': 'grow',
-  'flex-grow-0': 'grow-0',
-  'flex-shrink': 'shrink',
-  'flex-shrink-0': 'shrink-0',
-
-  'decoration-clone': 'box-decoration-clone',
-  'decoration-slice': 'box-decoration-slice',
-
-  // Since v4.1.0
-  'bg-left-top': 'bg-top-left',
-  'bg-left-bottom': 'bg-bottom-left',
-  'bg-right-top': 'bg-top-right',
-  'bg-right-bottom': 'bg-bottom-right',
-  'object-left-top': 'object-top-left',
-  'object-left-bottom': 'object-bottom-left',
-  'object-right-top': 'object-top-right',
-  'object-right-bottom': 'object-bottom-right',
-}
-
-let seenDesignSystems = new WeakSet<DesignSystem>()
-
-export function migrateSimpleLegacyClasses(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  // `outline-none` in v3 has the same meaning as `outline-hidden` in v4. However,
-  // `outline-none` in v4 _also_ exists but has a different meaning.
-  //
-  // We can only migrate `outline-none` to `outline-hidden` if we are migrating a
-  // v3 project to v4.
-  if (version.isMajor(3)) {
-    LEGACY_CLASS_MAP['outline-none'] = 'outline-hidden'
-  }
-
-  // Prepare design system with the unknown legacy classes
-  if (!seenDesignSystems.has(designSystem)) {
-    for (let old in LEGACY_CLASS_MAP) {
-      designSystem.utilities.static(old, () => [])
-    }
-    seenDesignSystems.add(designSystem)
-  }
-
-  for (let candidate of designSystem.parseCandidate(rawCandidate)) {
-    if (candidate.kind === 'static' && Object.hasOwn(LEGACY_CLASS_MAP, candidate.root)) {
-      return designSystem.printCandidate({
-        ...candidate,
-        root: LEGACY_CLASS_MAP[candidate.root as keyof typeof LEGACY_CLASS_MAP],
-      })
-    }
-  }
-
-  return rawCandidate
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-theme-to-var.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-theme-to-var.ts
deleted file mode 100644
index e566e7d6e..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-theme-to-var.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-import { type CandidateModifier } from '../../../../tailwindcss/src/candidate'
-import { keyPathToCssProperty } from '../../../../tailwindcss/src/compat/apply-config-to-theme'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { isValidSpacingMultiplier } from '../../../../tailwindcss/src/utils/infer-data-type'
-import { segment } from '../../../../tailwindcss/src/utils/segment'
-import { toKeyPath } from '../../../../tailwindcss/src/utils/to-key-path'
-import * as ValueParser from '../../../../tailwindcss/src/value-parser'
-import { walk, WalkAction } from '../../../../tailwindcss/src/walk'
-
-export const enum Convert {
-  All = 0,
-  MigrateModifier = 1 << 0,
-  MigrateThemeOnly = 1 << 1,
-}
-
-export function createConverter(designSystem: DesignSystem, { prettyPrint = false } = {}) {
-  function convert(input: string, options = Convert.All): [string, CandidateModifier | null] {
-    let ast = ValueParser.parse(input)
-
-    // In some scenarios (e.g.: variants), we can't migrate to `var(…)` if it
-    // ends up in the `@media (…)` part. In this case we only have to migrate to
-    // the new `theme(…)` notation.
-    if (options & Convert.MigrateThemeOnly) {
-      return [substituteFunctionsInValue(ast, toTheme), null]
-    }
-
-    let themeUsageCount = 0
-    let themeModifierCount = 0
-
-    // Analyze AST
-    walk(ast, (node) => {
-      if (node.kind !== 'function') return
-      if (node.value !== 'theme') return
-
-      // We are only interested in the `theme` function
-      themeUsageCount += 1
-
-      // Figure out if a modifier is used
-      walk(node.nodes, (child) => {
-        // If we see a `,`, it means that we have a fallback value
-        if (child.kind === 'separator' && child.value.includes(',')) {
-          return WalkAction.Stop
-        }
-
-        // If we see a `/`, we have a modifier
-        else if (child.kind === 'word' && child.value === '/') {
-          themeModifierCount += 1
-          return WalkAction.Stop
-        }
-
-        return WalkAction.Skip
-      })
-    })
-
-    // No `theme(…)` calls, nothing to do
-    if (themeUsageCount === 0) {
-      return [input, null]
-    }
-
-    // No `theme(…)` with modifiers, we can migrate to `var(…)`
-    if (themeModifierCount === 0) {
-      return [substituteFunctionsInValue(ast, toVar), null]
-    }
-
-    // Multiple modifiers which means that there are multiple `theme(…/…)`
-    // values. In this case, we can't convert the modifier to a candidate
-    // modifier.
-    //
-    // We also can't migrate to `var(…)` because that would lose the modifier.
-    //
-    // Try to convert each `theme(…)` call to the modern syntax.
-    if (themeModifierCount > 1) {
-      return [substituteFunctionsInValue(ast, toTheme), null]
-    }
-
-    // Only a single `theme(…)` with a modifier left, that modifier will be
-    // migrated to a candidate modifier.
-    let modifier: CandidateModifier | null = null
-    let result = substituteFunctionsInValue(ast, (path, fallback) => {
-      let parts = segment(path, '/').map((part) => part.trim())
-
-      // Multiple `/` separators, which makes this an invalid path
-      if (parts.length > 2) return null
-
-      // The path contains a `/`, which means that there is a modifier such as
-      // `theme(colors.red.500/50%)`.
-      //
-      // Currently, we are assuming that this is only being used for colors,
-      // which means that we can typically convert them to a modifier on the
-      // candidate itself.
-      //
-      // If there is more than one node in the AST though, `theme(…)` must not
-      // be the whole value so it's not safe to use a modifier instead.
-      //
-      // E.g.: `inset 0px 1px theme(colors.red.500/50%)` is a shadow, not a color.
-      if (ast.length === 1 && parts.length === 2 && options & Convert.MigrateModifier) {
-        let [pathPart, modifierPart] = parts
-
-        // 50% -> /50
-        if (/^\d+%$/.test(modifierPart)) {
-          modifier = { kind: 'named', value: modifierPart.slice(0, -1) }
-        }
-
-        // .12 -> /12
-        // .12345 -> /[12.345]
-        else if (/^0?\.\d+$/.test(modifierPart)) {
-          let value = Number(modifierPart) * 100
-          modifier = {
-            kind: Number.isInteger(value) ? 'named' : 'arbitrary',
-            value: value.toString(),
-          }
-        }
-
-        // Anything else becomes arbitrary
-        else {
-          modifier = { kind: 'arbitrary', value: modifierPart }
-        }
-
-        // Update path to be the first part
-        path = pathPart
-      }
-
-      return toVar(path, fallback) || toTheme(path, fallback)
-    })
-
-    return [result, modifier]
-  }
-
-  function pathToVariableName(path: string) {
-    let variable = `--${keyPathToCssProperty(toKeyPath(path))}` as const
-    if (!designSystem.theme.get([variable])) return null
-
-    if (designSystem.theme.prefix) {
-      return `--${designSystem.theme.prefix}-${variable.slice(2)}`
-    }
-
-    return variable
-  }
-
-  function toVar(path: string, fallback?: string) {
-    let variable = pathToVariableName(path)
-    if (variable) return fallback ? `var(${variable}, ${fallback})` : `var(${variable})`
-
-    let keyPath = toKeyPath(path)
-    if (keyPath[0] === 'spacing' && designSystem.theme.get(['--spacing'])) {
-      let multiplier = keyPath[1]
-      if (!isValidSpacingMultiplier(multiplier)) return null
-
-      return `--spacing(${multiplier})`
-    }
-
-    return null
-  }
-
-  function toTheme(path: string, fallback?: string) {
-    let parts = segment(path, '/').map((part) => part.trim())
-    path = parts.shift()!
-
-    let variable = pathToVariableName(path)
-    if (!variable) return null
-
-    let modifier =
-      parts.length > 0 ? (prettyPrint ? ` / ${parts.join(' / ')}` : `/${parts.join('/')}`) : ''
-    return fallback
-      ? `--theme(${variable}${modifier}, ${fallback})`
-      : `--theme(${variable}${modifier})`
-  }
-
-  return convert
-}
-
-function substituteFunctionsInValue(
-  ast: ValueParser.ValueAstNode[],
-  handle: (value: string, fallback?: string) => string | null,
-) {
-  walk(ast, (node, ctx) => {
-    if (node.kind === 'function' && node.value === 'theme') {
-      if (node.nodes.length < 1) return
-
-      // Ignore whitespace before the first argument
-      if (node.nodes[0].kind === 'separator' && node.nodes[0].value.trim() === '') {
-        node.nodes.shift()
-      }
-
-      let pathNode = node.nodes[0]
-      if (pathNode.kind !== 'word') return
-
-      let path = pathNode.value
-
-      // For the theme function arguments, we require all separators to contain
-      // comma (`,`), spaces alone should be merged into the previous word to
-      // avoid splitting in this case:
-      //
-      // theme(--color-red-500 / 75%) theme(--color-red-500 / 75%, foo, bar)
-      //
-      // We only need to do this for the first node, as the fallback values are
-      // passed through as-is.
-      let skipUntilIndex = 1
-      for (let i = skipUntilIndex; i < node.nodes.length; i++) {
-        if (node.nodes[i].value.includes(',')) {
-          break
-        }
-        path += ValueParser.toCss([node.nodes[i]])
-        skipUntilIndex = i + 1
-      }
-
-      path = eventuallyUnquote(path)
-      let fallbackValues = node.nodes.slice(skipUntilIndex + 1)
-
-      let replacement =
-        fallbackValues.length > 0 ? handle(path, ValueParser.toCss(fallbackValues)) : handle(path)
-      if (replacement === null) return
-
-      {
-        let idx = ctx.index - 1
-        while (idx !== -1) {
-          let previous = ctx.siblings[idx]
-          // Skip the space separator
-          if (previous.kind === 'separator' && previous.value.trim() === '') {
-            idx -= 1
-            continue
-          }
-
-          // If the previous node is a word and contains an operator, we need to
-          // wrap the replacement in parentheses to make the output less
-          // ambiguous.
-          //
-          // Input:
-          // - `calc(100dvh-theme(spacing.2))`
-          //
-          // Output:
-          // - `calc(100dvh-(--spacing(2)))`
-          //
-          // Not:
-          // -`calc(100dvh---spacing(2))`
-          //
-          if (/^[-+*/]$/.test(previous.value.trim())) {
-            replacement = `(${replacement})`
-          }
-
-          break
-        }
-      }
-
-      return WalkAction.Replace(ValueParser.parse(replacement))
-    }
-  })
-
-  return ValueParser.toCss(ast)
-}
-
-function eventuallyUnquote(value: string) {
-  if (value[0] !== "'" && value[0] !== '"') return value
-
-  let unquoted = ''
-  let quoteChar = value[0]
-  for (let i = 1; i < value.length - 1; i++) {
-    let currentChar = value[i]
-    let nextChar = value[i + 1]
-
-    if (currentChar === '\\' && (nextChar === quoteChar || nextChar === '\\')) {
-      unquoted += nextChar
-      i++
-    } else {
-      unquoted += currentChar
-    }
-  }
-
-  return unquoted
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.test.ts
deleted file mode 100644
index 1b14d533f..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.test.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import dedent from 'dedent'
-import { expect, test, vi } from 'vitest'
-import * as versions from '../../utils/version'
-import { migrateVariantOrder } from './migrate-variant-order'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-let css = dedent
-
-test.each([
-  // Does nothing unless there are at least two variants
-  ['flex', 'flex'],
-  ['hover:flex', 'hover:flex'],
-  ['[color:red]', '[color:red]'],
-  ['[&:focus]:[color:red]', '[&:focus]:[color:red]'],
-
-  // Reorders simple variants that include combinators
-  ['*:first:flex', 'first:*:flex'],
-
-  // Does not reorder variants without combinators
-  ['data-[invalid]:data-[hover]:flex', 'data-[invalid]:data-[hover]:flex'],
-
-  // Does not reorder some known combinations where the order does not matter
-  ['hover:focus:flex', 'hover:focus:flex'],
-  ['focus:hover:flex', 'focus:hover:flex'],
-  ['[&:hover]:[&:focus]:flex', '[&:hover]:[&:focus]:flex'],
-  ['[&:focus]:[&:hover]:flex', '[&:focus]:[&:hover]:flex'],
-  ['data-[a]:data-[b]:flex', 'data-[a]:data-[b]:flex'],
-
-  // Handles pseudo-elements that cannot have anything after them
-  // c.f. https://github.com/tailwindlabs/tailwindcss/pull/13478/files#diff-7779a0eebf6b980dd3abd63b39729b3023cf9a31c91594f5a25ea020b066e1c0
-  ['dark:before:flex', 'dark:before:flex'],
-  ['before:dark:flex', 'dark:before:flex'],
-
-  // Puts some pseudo-elements that must appear at the end of the selector at
-  // the end of the candidate
-  ['dark:*:before:after:flex', 'dark:*:before:after:flex'],
-  ['dark:before:after:*:flex', 'dark:*:before:after:flex'],
-
-  // Some pseudo-elements are treated as regular variants
-  ['dark:*:hover:file:focus:underline', 'dark:focus:file:hover:*:underline'],
-
-  // Keeps at-rule-variants and the dark variant in the beginning and keeps their
-  // order
-  ['sm:dark:hover:flex', 'sm:dark:hover:flex'],
-  ['[@media(print)]:group-hover:flex', '[@media(print)]:group-hover:flex'],
-  ['sm:max-xl:data-[a]:data-[b]:dark:hover:flex', 'sm:max-xl:dark:data-[a]:data-[b]:hover:flex'],
-  [
-    'sm:data-[root]:*:data-[a]:even:*:data-[b]:even:before:underline',
-    'sm:even:data-[b]:*:even:data-[a]:*:data-[root]:before:underline',
-  ],
-  ['hover:[@supports(display:grid)]:flex', '[@supports(display:grid)]:hover:flex'],
-])('%s => %s', async (candidate, result) => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
-
-  expect(migrateVariantOrder(designSystem, {}, candidate)).toEqual(result)
-})
-
-test('it works with custom variants', async () => {
-  let designSystem = await __unstable__loadDesignSystem(
-    css`
-      @import 'tailwindcss';
-      @custom-variant atrule {
-        @media (print) {
-          @slot;
-        }
-      }
-
-      @custom-variant combinator {
-        > * {
-          @slot;
-        }
-      }
-
-      @custom-variant pseudo {
-        &::before {
-          @slot;
-        }
-      }
-    `,
-    {
-      base: __dirname,
-    },
-  )
-
-  expect(migrateVariantOrder(designSystem, {}, 'combinator:pseudo:atrule:underline')).toEqual(
-    'atrule:combinator:pseudo:underline',
-  )
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.ts
deleted file mode 100644
index 3fd84af7c..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate-variant-order.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { type AstNode } from '../../../../tailwindcss/src/ast'
-import { type Variant } from '../../../../tailwindcss/src/candidate'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { walk } from '../../../../tailwindcss/src/walk'
-import * as version from '../../utils/version'
-
-export function migrateVariantOrder(
-  designSystem: DesignSystem,
-  _userConfig: Config | null,
-  rawCandidate: string,
-): string {
-  // This migration is only needed for Tailwind CSS v3
-  //
-  // Changing the variant order when migrating from v3 to v4 is fine, but
-  // migrating v4 to v4 would make it unsafe because the variant order would
-  // flip-flop every time you run the migration.
-  if (!version.isMajor(3)) {
-    return rawCandidate
-  }
-
-  for (let candidate of designSystem.parseCandidate(rawCandidate)) {
-    if (candidate.variants.length <= 1) {
-      continue
-    }
-
-    let atRuleVariants = []
-    let regularVariants = []
-    let pseudoElementVariants = []
-
-    let originalOrder = candidate.variants
-
-    for (let variant of candidate.variants) {
-      if (isAtRuleVariant(designSystem, variant)) {
-        atRuleVariants.push(variant)
-      } else if (isEndOfSelectorPseudoElement(designSystem, variant)) {
-        pseudoElementVariants.push(variant)
-      } else {
-        regularVariants.push(variant)
-      }
-    }
-
-    // We only need to reorder regular variants if order is important
-    let regularVariantsNeedReordering = regularVariants.some((v) =>
-      isCombinatorVariant(designSystem, v),
-    )
-
-    // The candidate list in the AST need to be in reverse order
-    let newOrder = [
-      ...pseudoElementVariants,
-      ...(regularVariantsNeedReordering ? regularVariants.reverse() : regularVariants),
-      ...atRuleVariants,
-    ]
-
-    if (orderMatches(originalOrder, newOrder)) {
-      continue
-    }
-
-    return designSystem.printCandidate({ ...candidate, variants: newOrder })
-  }
-  return rawCandidate
-}
-
-function isAtRuleVariant(designSystem: DesignSystem, variant: Variant) {
-  // Handle the dark variant as an at-rule variant
-  if (variant.kind === 'static' && variant.root === 'dark') {
-    return true
-  }
-  let stack = getAppliedNodeStack(designSystem, variant)
-  return stack.every((node) => node.kind === 'at-rule')
-}
-
-function isCombinatorVariant(designSystem: DesignSystem, variant: Variant) {
-  let stack = getAppliedNodeStack(designSystem, variant)
-  return stack.some(
-    (node) =>
-      node.kind === 'rule' &&
-      // Combinators include any of the following characters
-      (node.selector.includes(' ') ||
-        node.selector.includes('>') ||
-        node.selector.includes('+') ||
-        node.selector.includes('~')),
-  )
-}
-
-function isEndOfSelectorPseudoElement(designSystem: DesignSystem, variant: Variant) {
-  let stack = getAppliedNodeStack(designSystem, variant)
-  return stack.some(
-    (node) =>
-      node.kind === 'rule' &&
-      (node.selector.includes('::after') ||
-        node.selector.includes('::backdrop') ||
-        node.selector.includes('::before') ||
-        node.selector.includes('::first-letter') ||
-        node.selector.includes('::first-line') ||
-        node.selector.includes('::marker') ||
-        node.selector.includes('::placeholder') ||
-        node.selector.includes('::selection')),
-  )
-}
-
-function getAppliedNodeStack(designSystem: DesignSystem, variant: Variant): AstNode[] {
-  let stack: AstNode[] = []
-  let ast = designSystem
-    .compileAstNodes({
-      kind: 'arbitrary',
-      property: 'color',
-      value: 'red',
-      modifier: null,
-      variants: [variant],
-      important: false,
-      raw: 'candidate',
-    })
-    .map((c) => c.node)
-
-  walk(ast, (node) => {
-    // Ignore the variant root class
-    if (node.kind === 'rule' && node.selector === '.candidate') {
-      return
-    }
-    // Ignore the dummy declaration
-    if (node.kind === 'declaration' && node.property === 'color' && node.value === 'red') {
-      return
-    }
-    stack.push(node)
-  })
-  return stack
-}
-
-function orderMatches<T>(a: T[], b: T[]): boolean {
-  if (a.length !== b.length) {
-    return false
-  }
-  return a.every((v, i) => b[i] === v)
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate.test.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate.test.ts
deleted file mode 100644
index 24bb3d5ef..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate.test.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import { describe, expect, test, vi } from 'vitest'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-import * as versions from '../../utils/version'
-import { migrateCandidate as migrate } from './migrate'
-vi.spyOn(versions, 'isMajor').mockReturnValue(false)
-
-const designSystems = new DefaultMap((base: string) => {
-  return new DefaultMap((input: string) => {
-    return __unstable__loadDesignSystem(input, { base })
-  })
-})
-
-const css = String.raw
-
-describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', (strategy) => {
-  let testName = '%s => %s (%#)'
-  if (strategy === 'with-variant') {
-    testName = testName.replaceAll('%s', 'focus:%s')
-  } else if (strategy === 'important') {
-    testName = testName.replaceAll('%s', '%s!')
-  } else if (strategy === 'prefix') {
-    testName = testName.replaceAll('%s', 'tw:%s')
-  }
-
-  // Basic input with minimal design system to keep the tests fast
-  let input = css`
-    @import 'tailwindcss' ${strategy === 'prefix' ? 'prefix(tw)' : ''};
-    @theme {
-      --*: initial;
-      --spacing: 0.25rem;
-      --color-red-500: red;
-
-      /* Equivalent of blue-500/50 */
-      --color-primary: color-mix(in oklab, oklch(62.3% 0.214 259.815) 50%, transparent);
-    }
-  `
-
-  test.each([
-    // Arbitrary property to named functional utility
-    ['[color:red]', 'text-red-500'],
-
-    // Promote data types to more specific utility if it exists
-    ['bg-(position:--my-value)', 'bg-position-(--my-value)'],
-
-    // Promote inferred data type to more specific utility if it exists
-    ['bg-[123px]', 'bg-position-[123px]'],
-
-    // Do not migrate bare values or arbitrary values to named values that are
-    // deprecated
-    ['order-[0]', 'order-0'],
-    ['order-0', 'order-0'],
-
-    // Migrate deprecated named values to bare values
-    ['order-none', 'order-0'],
-
-    // `-0` should not be migrated to `0`.
-    //
-    // This used to be a bug that translate `mt-[0px]` into `-mt-[0px]` because
-    // `-mt-[0px]` translates to `margin-top: calc(0px * -1);` and therefore we
-    // handle the `0px * -1` case which translates to `0px` not `-0px`.
-    //
-    // This translation is actually fine, because now, we will prefer the
-    // non-negative version first so we can replace `-mt-[0px]` with `mt-0`.
-    ['mt-[0px]', 'mt-0'],
-    ['-mt-[0px]', 'mt-0'],
-
-    // Shorthand CSS Variables should be converted to the new syntax, even if
-    // the fallback contains functions. The fallback should also be migrated to
-    // the newest syntax.
-    ['bg-[--my-color,theme(colors.red.500)]', 'bg-(--my-color,var(--color-red-500))'],
-
-    // Both the positive and negative versions of arbitrary utilities should be
-    // converted to the bare value version.
-    ['mb-[32rem]', 'mb-128'],
-    ['mb-[-32rem]', '-mb-128'],
-  ])(testName, async (candidate, result) => {
-    if (strategy === 'with-variant') {
-      candidate = `focus:${candidate}`
-      result = `focus:${result}`
-    } else if (strategy === 'important') {
-      candidate = `${candidate}!`
-      result = `${result}!`
-    } else if (strategy === 'prefix') {
-      // Not only do we need to prefix the candidate, we also have to make
-      // sure that we prefix all CSS variables.
-      candidate = `tw:${candidate.replaceAll('var(--', 'var(--tw-')}`
-      result = `tw:${result.replaceAll('var(--', 'var(--tw-')}`
-    }
-
-    let designSystem = await designSystems.get(__dirname).get(input)
-    let migrated = await migrate(designSystem, {}, candidate)
-    expect(migrated).toEqual(result)
-  })
-
-  test.each([
-    ['order-[0]', 'order-0'],
-    ['order-0', 'order-0'],
-
-    // Do not migrate `order-none` if defined as a custom utility as it is then
-    // not safe to migrate to `order-0`
-    ['order-none', 'order-none'],
-  ])(`${testName} with custom implementations`, async (candidate, result) => {
-    if (strategy === 'with-variant') {
-      candidate = `focus:${candidate}`
-      result = `focus:${result}`
-    } else if (strategy === 'important') {
-      candidate = `${candidate}!`
-      result = `${result}!`
-    } else if (strategy === 'prefix') {
-      // Not only do we need to prefix the candidate, we also have to make
-      // sure that we prefix all CSS variables.
-      candidate = `tw:${candidate.replaceAll('var(--', 'var(--tw-')}`
-      result = `tw:${result.replaceAll('var(--', 'var(--tw-')}`
-    }
-
-    let localInput = css`
-      ${input}
-
-      @utility order-none {
-        order: none; /* imagine this exists */
-      }
-    `
-
-    let designSystem = await designSystems.get(__dirname).get(localInput)
-    let migrated = await migrate(designSystem, {}, candidate)
-    expect(migrated).toEqual(result)
-  })
-})
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts
deleted file mode 100644
index 976c63a83..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import fs from 'node:fs/promises'
-import path, { extname } from 'node:path'
-import {
-  createSignatureOptions,
-  prepareDesignSystemStorage,
-  UTILITY_SIGNATURE_KEY,
-} from '../../../../tailwindcss/src/canonicalize-candidates'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
-import { spliceChangesIntoString, type StringChange } from '../../utils/splice-changes-into-string'
-import { writeFileSafely } from '../../utils/write-file-safely'
-import { extractRawCandidates } from './candidates'
-import { isSafeMigration } from './is-safe-migration'
-import { migrateAutomaticVarInjection } from './migrate-automatic-var-injection'
-import { migrateCamelcaseInNamedValue } from './migrate-camelcase-in-named-value'
-import { migrateCanonicalizeCandidate } from './migrate-canonicalize-candidate'
-import { migrateEmptyArbitraryValues } from './migrate-handle-empty-arbitrary-values'
-import { migrateLegacyArbitraryValues } from './migrate-legacy-arbitrary-values'
-import { migrateLegacyClasses } from './migrate-legacy-classes'
-import { migrateMaxWidthScreen } from './migrate-max-width-screen'
-import { migrateModernizeArbitraryValues } from './migrate-modernize-arbitrary-values'
-import { migratePrefix } from './migrate-prefix'
-import { migrateSimpleLegacyClasses } from './migrate-simple-legacy-classes'
-import { migrateVariantOrder } from './migrate-variant-order'
-
-export type Migration = (
-  designSystem: DesignSystem,
-  userConfig: Config | null,
-  rawCandidate: string,
-) => string | Promise<string>
-
-export const DEFAULT_MIGRATIONS: Migration[] = [
-  migrateEmptyArbitraryValues,
-  migratePrefix,
-  migrateCanonicalizeCandidate,
-  migrateSimpleLegacyClasses,
-  migrateCamelcaseInNamedValue,
-  migrateLegacyClasses,
-  migrateMaxWidthScreen,
-  migrateVariantOrder, // Has to happen before migrations that modify variants
-  migrateAutomaticVarInjection,
-  migrateLegacyArbitraryValues,
-  migrateModernizeArbitraryValues,
-]
-
-let migrateCached = new DefaultMap((baseDesignSystem: DesignSystem) => {
-  let designSystem = prepareDesignSystemStorage(baseDesignSystem)
-  let options = createSignatureOptions(designSystem)
-
-  return new DefaultMap((userConfig: Config | null) => {
-    return new DefaultMap(async (rawCandidate) => {
-      let original = rawCandidate
-
-      for (let migration of DEFAULT_MIGRATIONS) {
-        rawCandidate = await migration(designSystem, userConfig, rawCandidate)
-      }
-
-      // Canonicalize the final migrated candidate to its final form
-      rawCandidate = designSystem.canonicalizeCandidates([rawCandidate]).pop()!
-
-      // Verify that the candidate actually makes sense at all. E.g.: `duration`
-      // is not a valid candidate, but it will parse because `duration-<number>`
-      // exists.
-      let signature = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options).get(rawCandidate)
-      if (typeof signature !== 'string') return original
-
-      return rawCandidate
-    })
-  })
-})
-
-export async function migrateCandidate(
-  designSystem: DesignSystem,
-  userConfig: Config | null,
-  rawCandidate: string,
-  // Location is only set when migrating a candidate from a source file
-  location?: {
-    contents: string
-    start: number
-    end: number
-  },
-): Promise<string> {
-  // Skip this migration if we think that the migration is unsafe
-  if (location && !isSafeMigration(rawCandidate, location, designSystem)) {
-    return rawCandidate
-  }
-
-  return migrateCached.get(designSystem).get(userConfig).get(rawCandidate)
-}
-
-export default async function migrateContents(
-  designSystem: DesignSystem,
-  userConfig: Config | null,
-  contents: string,
-  extension: string,
-): Promise<string> {
-  let candidates = await extractRawCandidates(contents, extension)
-
-  let changes: StringChange[] = []
-
-  for (let { rawCandidate, start, end } of candidates) {
-    let migratedCandidate = await migrateCandidate(designSystem, userConfig, rawCandidate, {
-      contents,
-      start,
-      end,
-    })
-
-    if (migratedCandidate === rawCandidate) {
-      continue
-    }
-
-    changes.push({
-      start,
-      end,
-      replacement: migratedCandidate,
-    })
-  }
-
-  return spliceChangesIntoString(contents, changes)
-}
-
-export async function migrate(
-  designSystem: DesignSystem,
-  userConfig: Config | null,
-  file: string,
-): Promise<boolean> {
-  let fullPath = path.isAbsolute(file) ? file : path.resolve(process.cwd(), file)
-  let contents = await fs.readFile(fullPath, 'utf-8')
-
-  let migrated = await migrateContents(designSystem, userConfig, contents, extname(file))
-  if (migrated === contents) return false // Nothing changed
-  if (migrated.trim() === '') return false // Emptied out, something went horribly wrong
-
-  await writeFileSafely(fullPath, migrated)
-  return true
-}
diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/prepare-config.ts b/packages/@tailwindcss-upgrade/src/codemods/template/prepare-config.ts
deleted file mode 100644
index d9fae442b..000000000
--- a/packages/@tailwindcss-upgrade/src/codemods/template/prepare-config.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { __unstable__loadDesignSystem, compile } from '@tailwindcss/node'
-import fs from 'node:fs/promises'
-import path, { dirname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { loadModule } from '../../../../@tailwindcss-node/src/compile'
-import { resolveConfig } from '../../../../tailwindcss/src/compat/config/resolve-config'
-import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
-import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
-import { error, highlight, relative } from '../../utils/renderer'
-import { migratePrefixValue } from './migrate-prefix'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-
-const css = String.raw
-
-export async function prepareConfig(
-  configFilePath: string | null,
-  options: { base: string },
-): Promise<{
-  designSystem: DesignSystem
-  sources: { base: string; pattern: string }[]
-  userConfig: Config
-  configFilePath: string
-
-  newPrefix: string | null
-}> {
-  try {
-    if (configFilePath === null) {
-      configFilePath = await detectConfigPath(options.base)
-    } else if (!path.isAbsolute(configFilePath)) {
-      configFilePath = path.resolve(options.base, configFilePath)
-    }
-
-    // We create a relative path from the current file to the config file. This is
-    // required so that the base for Tailwind CSS can bet inside the
-    // @tailwindcss-upgrade package and we can require `tailwindcss` properly.
-    let relative = path.relative(__dirname, configFilePath)
-
-    // If the path points to a file in the same directory, `path.relative` will
-    // remove the leading `./` and we need to add it back in order to still
-    // consider the path relative
-    if (!relative.startsWith('.') && !path.isAbsolute(relative)) {
-      relative = './' + relative
-    }
-
-    let userConfig = await createResolvedUserConfig(configFilePath)
-
-    let newPrefix = userConfig.prefix ? migratePrefixValue(userConfig.prefix) : null
-    let input = css`
-      @import 'tailwindcss' ${newPrefix ? `prefix(${newPrefix})` : ''};
-      @config '${relative}';
-    `
-
-    let [compiler, designSystem] = await Promise.all([
-      compile(input, { base: __dirname, onDependency: () => {} }),
-      __unstable__loadDesignSystem(input, { base: __dirname }),
-    ])
-
-    return {
-      designSystem,
-      sources: compiler.sources,
-      userConfig,
-      newPrefix,
-      configFilePath,
-    }
-  } catch (e: any) {
-    error('Could not load the configuration file: ' + e.message, { prefix: '↳ ' })
-    process.exit(1)
-  }
-}
-
-async function createResolvedUserConfig(fullConfigPath: string): Promise<Config> {
-  let [noopDesignSystem, unresolvedUserConfig] = await Promise.all([
-    __unstable__loadDesignSystem(
-      css`
-        @import 'tailwindcss';
-      `,
-      { base: __dirname },
-    ),
-    loadModule(fullConfigPath, __dirname, () => {}).then((result) => result.module) as Config,
-  ])
-
-  return resolveConfig(noopDesignSystem, [
-    { base: dirname(fullConfigPath), config: unresolvedUserConfig, reference: false },
-  ]).resolvedConfig as any
-}
-
-const DEFAULT_CONFIG_FILES = [
-  './tailwind.config.js',
-  './tailwind.config.cjs',
-  './tailwind.config.mjs',
-  './tailwind.config.ts',
-  './tailwind.config.cts',
-  './tailwind.config.mts',
-]
-export async function detectConfigPath(start: string, end: string = start) {
-  for (let base of parentPaths(start, end)) {
-    for (let file of DEFAULT_CONFIG_FILES) {
-      let fullPath = path.resolve(base, file)
-      try {
-        await fs.access(fullPath)
-        return fullPath
-      } catch {}
-    }
-  }
-
-  throw new Error(
-    `No configuration file found for ${highlight(relative(start))}. Please provide a path to the Tailwind CSS v3 config file via the ${highlight('--config')} option.`,
-  )
-}
-
-// Yields all parent paths from `from` to `to` (inclusive on both ends)
-function* parentPaths(from: string, to: string = from) {
-  let fromAbsolute = path.resolve(from)
-  let toAbsolute = path.resolve(to)
-
-  if (!fromAbsolute.startsWith(toAbsolute)) {
-    throw new Error(`The path ${from} is not a parent of ${to}`)
-  }
-
-  if (fromAbsolute === toAbsolute) {
-    yield fromAbsolute
-    return
-  }
-
-  let current = fromAbsolute
-  do {
-    yield current
-    current = path.dirname(current)
-  } while (current !== toAbsolute)
-  yield toAbsolute
-}
diff --git a/packages/@tailwindcss-upgrade/src/commands/help/index.ts b/packages/@tailwindcss-upgrade/src/commands/help/index.ts
deleted file mode 100644
index 20ee78208..000000000
--- a/packages/@tailwindcss-upgrade/src/commands/help/index.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import pc from 'picocolors'
-import type { Arg } from '../../utils/args'
-import { UI, header, highlight, indent, println, wordWrap } from '../../utils/renderer'
-
-export function help({
-  invalid,
-  usage,
-  options,
-}: {
-  invalid?: string
-  usage?: string[]
-  options?: Arg
-}) {
-  // Available terminal width
-  let width = process.stdout.columns
-
-  // Render header
-  println(header())
-
-  // Render the invalid command
-  if (invalid) {
-    println()
-    println(`${pc.dim('Invalid command:')} ${invalid}`)
-  }
-
-  // Render usage
-  if (usage && usage.length > 0) {
-    println()
-    println(pc.dim('Usage:'))
-    for (let [idx, example] of usage.entries()) {
-      // Split the usage example into the command and its options. This allows
-      // us to wrap the options based on the available width of the terminal.
-      let command = example.slice(0, example.indexOf('['))
-      let options = example.slice(example.indexOf('['))
-
-      // Make the options dimmed, to make them stand out less than the command
-      // itself.
-      options = options.replace(/\[.*?\]/g, (option) => pc.dim(option))
-
-      // The space between the command and the options.
-      let space = 1
-
-      // Wrap the options based on the available width of the terminal.
-      let lines = wordWrap(options, width - UI.indent - command.length - space)
-
-      // Print an empty line between the usage examples if we need to split due
-      // to width constraints. This ensures that the usage examples are visually
-      // separated.
-      //
-      // E.g.: when enough space is available
-      //
-      // ```
-      //   Usage:
-      //     tailwindcss build [--input input.css] [--output output.css] [--watch] [options...]
-      //     tailwindcss other [--watch] [options...]
-      // ```
-      //
-      // E.g.: when not enough space is available
-      //
-      // ```
-      //   Usage:
-      //     tailwindcss build [--input input.css] [--output output.css]
-      //                       [--watch] [options...]
-      //
-      //     tailwindcss other [--watch] [options...]
-      // ```
-      if (lines.length > 1 && idx !== 0) {
-        println()
-      }
-
-      // Print the usage examples based on available width of the terminal.
-      //
-      // E.g.: when enough space is available
-      //
-      // ```
-      //   Usage:
-      //     tailwindcss [--input input.css] [--output output.css] [--watch] [options...]
-      // ```
-      //
-      // E.g.: when not enough space is available
-      //
-      // ```
-      //   Usage:
-      //     tailwindcss [--input input.css] [--output output.css]
-      //                 [--watch] [options...]
-      // ```
-      //
-      // > Note how the second line is indented to align with the first line.
-      println(indent(`${command}${lines.shift()}`))
-      for (let line of lines) {
-        println(indent(line, command.length))
-      }
-    }
-  }
-
-  // Render options
-  if (options) {
-    // Track the max alias length, this is used to indent the options that don't
-    // have an alias such that everything is aligned properly.
-    let maxAliasLength = 0
-    for (let { alias } of Object.values(options)) {
-      if (alias) {
-        maxAliasLength = Math.max(maxAliasLength, alias.length)
-      }
-    }
-
-    // The option strings, which are the combination of the `alias` and the
-    // `flag`, with the correct spacing.
-    let optionStrings: string[] = []
-
-    // Track the max option length, which is the longest combination of an
-    // `alias` followed by `, ` and followed by the `flag`.
-    let maxOptionLength = 0
-
-    for (let [flag, { alias }] of Object.entries(options)) {
-      // The option string, which is the combination of the alias and the flag
-      // but already properly indented based on the other aliases to ensure
-      // everything is aligned properly.
-      let option = [
-        alias ? `${alias.padStart(maxAliasLength)}` : alias,
-        alias ? flag : ' '.repeat(maxAliasLength + 2 /* `, `.length */) + flag,
-      ]
-        .filter(Boolean)
-        .join(', ')
-
-      optionStrings.push(option)
-      maxOptionLength = Math.max(maxOptionLength, option.length)
-    }
-
-    println()
-    println(pc.dim('Options:'))
-
-    // The minimum amount of dots between the option and the description.
-    let minimumGap = 8
-
-    for (let { description, default: defaultValue = null } of Object.values(options)) {
-      // The option to render
-      let option = optionStrings.shift() as string
-
-      // The amount of dots to show between the option and the description.
-      let dotCount = minimumGap + (maxOptionLength - option.length)
-
-      // To account for the space before and after the dots.
-      let spaces = 2
-
-      // The available width remaining for the description.
-      let availableWidth = width - option.length - dotCount - spaces - UI.indent
-
-      // Wrap the description and the default value (if present), based on the
-      // available width.
-      let lines = wordWrap(
-        defaultValue !== null
-          ? `${description} ${pc.dim(`[default:\u202F${highlight(`${defaultValue}`)}]`)}`
-          : description,
-        availableWidth,
-      )
-
-      // Print the option, the spacer dots and the start of the description.
-      println(
-        indent(`${pc.blue(option)} ${pc.dim(pc.gray('\u00B7')).repeat(dotCount)} ${lines.shift()}`),
-      )
-
-      // Print the remaining lines of the description, indenting them to align
-      // with the start of the description.
-      for (let line of lines) {
-        println(indent(`${' '.repeat(option.length + dotCount + spaces)}${line}`))
-      }
-    }
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/index.test.ts b/packages/@tailwindcss-upgrade/src/index.test.ts
deleted file mode 100644
index 2eae32f30..000000000
--- a/packages/@tailwindcss-upgrade/src/index.test.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-import { __unstable__loadDesignSystem } from '@tailwindcss/node'
-import dedent from 'dedent'
-import path from 'node:path'
-import postcss from 'postcss'
-import { expect, it, vi } from 'vitest'
-import { formatNodes } from './codemods/css/format-nodes'
-import { migrateContents } from './codemods/css/migrate'
-import { sortBuckets } from './codemods/css/sort-buckets'
-import * as versions from './utils/version'
-vi.spyOn(versions, 'isMajor').mockReturnValue(true)
-
-const css = dedent
-
-let designSystem = await __unstable__loadDesignSystem(
-  css`
-    @import 'tailwindcss';
-  `,
-  { base: __dirname },
-)
-
-let config = {
-  designSystem,
-  userConfig: {},
-  newPrefix: null,
-  configFilePath: path.resolve(__dirname, './tailwind.config.js'),
-  jsConfigMigration: null,
-}
-
-function migrate(input: string, config: any) {
-  return migrateContents(input, config, expect.getState().testPath)
-    .then((result) => postcss([sortBuckets(), formatNodes()]).process(result.root, result.opts))
-    .then((result) => result.css)
-}
-
-it('should print the input as-is', async () => {
-  expect(
-    await migrate(
-      css`
-        /* above */
-        .foo/* after */ {
-          /* above */
-          color:  /* before */ red /* after */;
-          /* below */
-        }
-      `,
-      config,
-    ),
-  ).toMatchInlineSnapshot(`
-    "/* above */
-    .foo/* after */ {
-      /* above */
-      color:  /* before */ red /* after */;
-      /* below */
-    }"
-  `)
-})
-
-it('should migrate a stylesheet', async () => {
-  expect(
-    await migrate(
-      css`
-        @tailwind base;
-
-        html {
-          overflow: hidden;
-        }
-
-        @tailwind components;
-
-        .a {
-          z-index: 1;
-        }
-
-        @layer components {
-          .b {
-            z-index: 2;
-          }
-        }
-
-        .c {
-          z-index: 3;
-        }
-
-        @tailwind utilities;
-
-        .d {
-          z-index: 4;
-        }
-
-        @layer utilities {
-          .e {
-            z-index: 5;
-          }
-        }
-      `,
-      config,
-    ),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss';
-
-    /*
-      The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-      so we've added these compatibility styles to make sure everything still
-      looks the same as it did with Tailwind CSS v3.
-
-      If we ever want to remove these styles, we need to add an explicit border
-      color utility to any element that depends on these defaults.
-    */
-    @layer base {
-      *,
-      ::after,
-      ::before,
-      ::backdrop,
-      ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
-      }
-    }
-
-    @utility b {
-      z-index: 2;
-    }
-
-    @utility e {
-      z-index: 5;
-    }
-
-    @layer base {
-      html {
-        overflow: hidden;
-      }
-    }
-
-    @layer components {
-      .a {
-        z-index: 1;
-      }
-    }
-
-    @layer components {
-      .c {
-        z-index: 3;
-      }
-    }
-
-    @layer utilities {
-      .d {
-        z-index: 4;
-      }
-    }"
-  `)
-})
-
-it('should migrate a stylesheet (with imports)', async () => {
-  expect(
-    await migrate(
-      css`
-        @import 'tailwindcss/base';
-        @import './my-base.css';
-        @import 'tailwindcss/components';
-        @import './my-components.css';
-        @import 'tailwindcss/utilities';
-        @import './my-utilities.css';
-      `,
-      config,
-    ),
-  ).toMatchInlineSnapshot(`
-    "@import 'tailwindcss';
-    @import './my-base.css' layer(base);
-    @import './my-components.css' layer(components);
-    @import './my-utilities.css' layer(utilities);
-
-    /*
-      The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-      so we've added these compatibility styles to make sure everything still
-      looks the same as it did with Tailwind CSS v3.
-
-      If we ever want to remove these styles, we need to add an explicit border
-      color utility to any element that depends on these defaults.
-    */
-    @layer base {
-      *,
-      ::after,
-      ::before,
-      ::backdrop,
-      ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
-      }
-    }"
-  `)
-})
-
-it('should migrate a stylesheet (with preceding rules that should be wrapped in an `@layer`)', async () => {
-  expect(
-    await migrate(
-      css`
-        @charset "UTF-8";
-        @layer foo, bar, baz;
-        /**! My license comment */
-        html {
-          color: red;
-        }
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-      `,
-      config,
-    ),
-  ).toMatchInlineSnapshot(`
-    "@charset "UTF-8";
-    @layer foo, bar, baz;
-    /**! My license comment */
-    @import 'tailwindcss';
-
-    /*
-      The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
-      so we've added these compatibility styles to make sure everything still
-      looks the same as it did with Tailwind CSS v3.
-
-      If we ever want to remove these styles, we need to add an explicit border
-      color utility to any element that depends on these defaults.
-    */
-    @layer base {
-      *,
-      ::after,
-      ::before,
-      ::backdrop,
-      ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
-      }
-    }
-
-    @layer base {
-      html {
-        color: red;
-      }
-    }"
-  `)
-})
-
-it('should keep CSS as-is before existing `@layer` at-rules', async () => {
-  expect(
-    await migrate(
-      css`
-        .foo {
-          color: blue;
-        }
-
-        @layer components {
-          .bar {
-            color: red;
-          }
-        }
-      `,
-      config,
-    ),
-  ).toMatchInlineSnapshot(`
-    "@utility bar {
-      color: red;
-    }
-
-    .foo {
-      color: blue;
-    }"
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/index.ts b/packages/@tailwindcss-upgrade/src/index.ts
deleted file mode 100644
index d304bbe1f..000000000
--- a/packages/@tailwindcss-upgrade/src/index.ts
+++ /dev/null
@@ -1,461 +0,0 @@
-#!/usr/bin/env node
-
-import { Scanner } from '@tailwindcss/oxide'
-import { globby, isGitIgnored } from 'globby'
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import pc from 'picocolors'
-import postcss from 'postcss'
-import { migrateJsConfig } from './codemods/config/migrate-js-config'
-import { migratePostCSSConfig } from './codemods/config/migrate-postcss'
-import { analyze as analyzeStylesheets } from './codemods/css/analyze'
-import { formatNodes } from './codemods/css/format-nodes'
-import { linkConfigs as linkConfigsToStylesheets } from './codemods/css/link'
-import { migrate as migrateStylesheet } from './codemods/css/migrate'
-import { sortBuckets } from './codemods/css/sort-buckets'
-import { split as splitStylesheets } from './codemods/css/split'
-import { migrate as migrateTemplate } from './codemods/template/migrate'
-import { prepareConfig } from './codemods/template/prepare-config'
-import { help } from './commands/help'
-import { Stylesheet } from './stylesheet'
-import { args, type Arg } from './utils/args'
-import { gitRoot, isRepoDirty } from './utils/git'
-import { pkg } from './utils/packages'
-import { eprintln, error, header, highlight, info, relative, success } from './utils/renderer'
-import * as version from './utils/version'
-import { writeFileSafely } from './utils/write-file-safely'
-
-const options = {
-  '--config': { type: 'string', description: 'Path to the configuration file', alias: '-c' },
-  '--help': { type: 'boolean', description: 'Display usage information', alias: '-h' },
-  '--force': { type: 'boolean', description: 'Force the migration', alias: '-f' },
-  '--version': { type: 'boolean', description: 'Display the version number', alias: '-v' },
-} satisfies Arg
-const flags = args(options)
-
-if (flags['--help']) {
-  help({
-    usage: ['npx @tailwindcss/upgrade'],
-    options,
-  })
-  process.exit(0)
-}
-
-async function run() {
-  let base = process.cwd()
-  // Use the project's git root, instead of the `base` to ensure all
-  // `.gitignore` rules are being used.
-  let isIgnored = await isGitIgnored({ cwd: gitRoot(base) ?? base })
-
-  eprintln(header())
-  eprintln()
-
-  let cleanup: (() => void)[] = []
-
-  if (!flags['--force']) {
-    // Require a clean git directory
-    if (isRepoDirty()) {
-      error('Git directory is not clean. Please stash or commit your changes before migrating.')
-      info(
-        `You may use the ${highlight('--force')} flag to silence this warning and perform the migration.`,
-      )
-      process.exit(1)
-    }
-  }
-
-  info(`Upgrading from Tailwind CSS ${highlight(`v${version.installedTailwindVersion(base)}`)}`, {
-    prefix: '↳ ',
-  })
-
-  if (version.installedTailwindVersion(base) !== version.expectedTailwindVersion(base)) {
-    let pkgManager = await pkg(base).manager()
-
-    error(
-      [
-        'Version mismatch',
-        '',
-        pc.dim('```diff'),
-        `${pc.red('-')} ${`${pc.dim('"tailwindcss":')} ${`${pc.dim('"')}${pc.blue(version.expectedTailwindVersion(base))}${pc.dim('"')}`}`} (expected version in ${highlight('package.json')})`,
-        `${pc.green('+')} ${`${pc.dim('"tailwindcss":')} ${`${pc.dim('"')}${pc.blue(version.installedTailwindVersion(base))}${pc.dim('"')}`}`} (installed version in ${highlight('node_modules')})`,
-        pc.dim('```'),
-        '',
-        `Make sure to run ${highlight(`${pkgManager} install`)} and try again.`,
-      ].join('\n'),
-      {
-        prefix: '↳ ',
-      },
-    )
-    process.exit(1)
-  }
-
-  {
-    // Stylesheet migrations
-
-    // Use provided files
-    let files = flags._.map((file) => path.resolve(base, file))
-
-    // Discover CSS files in case no files were provided
-    if (files.length === 0) {
-      info('Searching for CSS files in the current directory and its subdirectories…')
-
-      files = await globby(['**/*.css'], {
-        cwd: base,
-        absolute: true,
-        gitignore: true,
-        // gitignore: true will first search for all .gitignore including node_modules folders, this makes the initial search much faster
-        ignore: ['**/node_modules/**'],
-      })
-    }
-
-    // Ensure we are only dealing with CSS files
-    files = files.filter((file) => file.endsWith('.css'))
-
-    // Analyze the stylesheets
-    let loadResults = await Promise.allSettled(files.map((filepath) => Stylesheet.load(filepath)))
-
-    // Load and parse all stylesheets
-    for (let result of loadResults) {
-      if (result.status === 'rejected') {
-        error(`${result.reason?.message ?? result.reason}`, { prefix: '↳ ' })
-      }
-    }
-
-    let stylesheets = loadResults
-      .filter((result) => result.status === 'fulfilled')
-      .map((result) => result.value)
-    let originals = new Map(stylesheets.map((sheet) => [sheet, sheet.root.toString()]))
-
-    // Analyze the stylesheets
-    try {
-      await analyzeStylesheets(stylesheets, { base })
-    } catch (e: any) {
-      error(`${e?.message ?? e}`, { prefix: '↳ ' })
-    }
-
-    // Ensure stylesheets are linked to configs. But this is only necessary when
-    // migrating from v3 to v4.
-    if (version.isMajor(3)) {
-      try {
-        await linkConfigsToStylesheets(stylesheets, {
-          configPath: flags['--config'],
-          base,
-        })
-      } catch (e: any) {
-        error(`${e?.message ?? e}`, { prefix: '↳ ' })
-      }
-    }
-
-    // Migrate js config files, linked to stylesheets
-    if (stylesheets.some((sheet) => sheet.isTailwindRoot && sheet.linkedConfigPath)) {
-      info('Migrating JavaScript configuration files…')
-    }
-    let configBySheet = new Map<Stylesheet, Awaited<ReturnType<typeof prepareConfig>>>()
-    let jsConfigMigrationBySheet = new Map<
-      Stylesheet,
-      Awaited<ReturnType<typeof migrateJsConfig>>
-    >()
-    for (let sheet of stylesheets) {
-      if (!sheet.isTailwindRoot) continue
-      if (!version.isMajor(3) && !sheet.linkedConfigPath) continue
-
-      let config = await prepareConfig(sheet.linkedConfigPath, { base })
-      configBySheet.set(sheet, config)
-
-      let jsConfigMigration = await migrateJsConfig(
-        config.designSystem,
-        config.configFilePath,
-        base,
-      )
-      jsConfigMigrationBySheet.set(sheet, jsConfigMigration)
-
-      if (jsConfigMigration !== null) {
-        // Remove the JS config if it was fully migrated
-        cleanup.push(() => fs.rm(config.configFilePath))
-      }
-
-      if (jsConfigMigration !== null) {
-        success(
-          `Migrated configuration file: ${highlight(relative(config.configFilePath, base))}`,
-          { prefix: '↳ ' },
-        )
-      }
-    }
-
-    // Migrate each CSS file
-    if (stylesheets.length > 0) {
-      info('Migrating stylesheets…')
-    }
-    await Promise.all(
-      stylesheets.map(async (sheet) => {
-        try {
-          let config = configBySheet.get(sheet)
-          let jsConfigMigration = jsConfigMigrationBySheet.get(sheet) ?? null
-
-          if (!config) {
-            for (let parent of sheet.ancestors()) {
-              if (parent.isTailwindRoot) {
-                config ??= configBySheet.get(parent)!
-                jsConfigMigration ??= jsConfigMigrationBySheet.get(parent) ?? null
-                break
-              }
-            }
-          }
-
-          // Prime the compiler/designSystem cache against the pre-migration AST
-          // so the later template-migration phase sees the same v4 state. After
-          // this point, `sheet.root` may be mutated by `migrateStylesheet`.
-          if (!version.isMajor(3) && sheet.isTailwindRoot) {
-            await Promise.all([sheet.compiler(), sheet.designSystem()])
-          }
-
-          await migrateStylesheet(sheet, {
-            newPrefix: config?.newPrefix ?? null,
-            designSystem: config?.designSystem ?? (await sheet.designSystem()),
-            userConfig: config?.userConfig ?? null,
-            configFilePath: config?.configFilePath ?? null,
-            jsConfigMigration,
-          })
-        } catch (e: any) {
-          error(`${e?.message ?? e} in ${highlight(relative(sheet.file!, base))}`, { prefix: '↳ ' })
-        }
-      }),
-    )
-
-    // Split up stylesheets (as needed)
-    if (version.isMajor(3)) {
-      try {
-        await splitStylesheets(stylesheets)
-      } catch (e: any) {
-        error(`${e?.message ?? e}`, { prefix: '↳ ' })
-      }
-
-      // Cleanup `@import "…" layer(utilities)`
-      for (let sheet of stylesheets) {
-        for (let importRule of sheet.importRules) {
-          if (!importRule.raws.tailwind_injected_layer) continue
-          let importedSheet = stylesheets.find(
-            (sheet) => sheet.id === importRule.raws.tailwind_destination_sheet_id,
-          )
-          if (!importedSheet) continue
-
-          // Only remove the `layer(…)` next to the import if any of the children
-          // contain `@utility`. Otherwise `@utility` will not be top-level.
-          if (
-            !importedSheet.containsRule((node) => node.type === 'atrule' && node.name === 'utility')
-          ) {
-            continue
-          }
-
-          // Make sure to remove the `layer(…)` from the `@import` at-rule
-          importRule.params = importRule.params.replace(/ layer\([^)]+\)/, '').trim()
-        }
-      }
-    }
-
-    // Format nodes
-    for (let sheet of stylesheets) {
-      if (originals.get(sheet) === sheet.root.toString()) continue
-      await postcss([sortBuckets(), formatNodes()]).process(sheet.root!, { from: sheet.file! })
-    }
-
-    // Write all files to disk
-    for (let sheet of stylesheets) {
-      if (!sheet.file) continue
-
-      await writeFileSafely(sheet.file, sheet.root.toString())
-
-      if (sheet.isTailwindRoot) {
-        success(`Migrated stylesheet: ${highlight(relative(sheet.file, base))}`, { prefix: '↳ ' })
-      }
-    }
-
-    info('Updating dependencies…')
-    {
-      let pkgManager = pkg(base)
-      let dependencies = [
-        'tailwindcss',
-        '@tailwindcss/cli',
-        '@tailwindcss/postcss',
-        '@tailwindcss/vite',
-        '@tailwindcss/node',
-        '@tailwindcss/oxide',
-        'prettier-plugin-tailwindcss',
-      ].filter((dependency) => dependency === 'tailwindcss' || pkgManager.has(dependency))
-      try {
-        await pkgManager.add(dependencies.map((dependency) => `${dependency}@latest`))
-        for (let dependency of dependencies) {
-          success(`Updated package: ${highlight(dependency)}`, { prefix: '↳ ' })
-        }
-      } catch {}
-    }
-
-    let tailwindRootStylesheets = stylesheets.filter((sheet) => sheet.isTailwindRoot && sheet.file)
-
-    // Migrate source files
-    if (tailwindRootStylesheets.length > 0) {
-      info('Migrating templates…')
-    }
-    {
-      let seenFiles = new Set()
-
-      // Template migrations
-      for (let sheet of tailwindRootStylesheets) {
-        let compiler = await sheet.compiler()
-        if (!compiler) continue
-        let designSystem = await sheet.designSystem()
-        if (!designSystem) continue
-
-        let config = configBySheet.get(sheet)
-
-        // Figure out the source files to migrate
-        let sources = (() => {
-          // Disable auto source detection
-          if (compiler.root === 'none') {
-            return []
-          }
-
-          // No root specified
-          if (compiler.root === null) {
-            // When coming from Tailwind CSS v3, we have to use the
-            // `config.sources` (which came from `config.content` originally)
-            if (version.isMajor(3)) {
-              if (config?.sources) {
-                return config.sources.map((source) => ({ ...source, negated: false }))
-              }
-
-              // When we don't have any sources, then we have to fallback to no
-              // sources at all. We cannot fallback to the `**/*` pattern.
-              return []
-            }
-
-            // When we are upgrading a Tailwind CSS v4 and up version, we use
-            // the default `**/*` pattern. All custom `@source` directives will
-            // be attached later as sources.
-            return [{ base, pattern: '**/*', negated: false }]
-          }
-
-          // Use the specified root
-          return [{ ...compiler.root, negated: false }]
-        })().concat(compiler.sources)
-        let scanner = new Scanner({ sources })
-        let filesToMigrate = []
-
-        let ignoredPaths = new Set<string>()
-
-        for (let file of scanner.files) {
-          file = await fs.realpath(file).catch(() => file) // Ensure we are dealing with the real path, not symlinks
-          if (file.endsWith('.css')) continue
-
-          // When a file is git ignored, then we don't want to migrate it even
-          // if it was listed in the `config.content` array or part of any
-          // `@source` directives.
-          //
-          // We can make this an option later to explicitly allow this, but
-          // this should be the default. This guarantees that:
-          //
-          // 1. Files coming from node_modules aren't touched
-          // 2. Generated files aren't changed (the source should update, not the target)
-          // 3. You can see all the changes that happened
-          try {
-            if (isIgnored(file)) {
-              let culprit = file
-
-              // To prevent print all ignored files, we can also walk up the
-              // parent tree and log those instead _if_ they are:
-              //
-              // 1. Also git ignored
-              // 2. Are not going outside of the current repo
-              let parent = path.dirname(file)
-              do {
-                try {
-                  if (isIgnored(parent)) {
-                    culprit = parent
-                  }
-                } catch {
-                  // Escaping the current repo
-                  break
-                }
-
-                let nextParent = path.dirname(parent)
-                if (nextParent === parent) break
-                parent = nextParent
-              } while (parent)
-
-              if (ignoredPaths.has(culprit)) continue // Already logged, skip
-              ignoredPaths.add(culprit)
-
-              if (culprit === file) {
-                info(`Git ignored, skipping: ${highlight(relative(culprit, base))}`, {
-                  prefix: '↳ ',
-                })
-              } else {
-                info(`Git ignored folder, skipping: ${highlight(relative(culprit, base))}`, {
-                  prefix: '↳ ',
-                })
-              }
-
-              continue
-            }
-          } catch (err) {
-            info(`Outside repository, skipping: ${highlight(relative(file, base))}`, {
-              prefix: '↳ ',
-            })
-            // Skip this file when we run into errors. E.g.: when the current
-            // file is not part of the current git repo it will throw an error.
-            continue
-          }
-
-          if (seenFiles.has(file)) continue
-          seenFiles.add(file)
-          filesToMigrate.push(file)
-        }
-
-        // Migrate each file
-        let changes = 0
-        await Promise.allSettled(
-          filesToMigrate.map(async (file) => {
-            let changed = await migrateTemplate(designSystem, config?.userConfig ?? null, file)
-            if (changed) {
-              changes++
-              info(`Migrated ${highlight(relative(file, base))}`, { prefix: '↳ ' })
-            }
-          }),
-        )
-
-        if (config?.configFilePath) {
-          success(
-            `Migrated templates for configuration file: ${highlight(relative(config.configFilePath, base))} (${changes} file${changes === 1 ? '' : 's'} changed)`,
-            { prefix: '↳ ' },
-          )
-        } else {
-          success(
-            `Migrated templates for: ${highlight(relative(sheet.file ?? '<unknown>', base))} (${changes} file${changes === 1 ? '' : 's'} changed)`,
-            { prefix: '↳ ' },
-          )
-        }
-      }
-    }
-  }
-
-  if (version.isMajor(3)) {
-    // PostCSS config migration
-    await migratePostCSSConfig(base)
-  }
-
-  // Run all cleanup functions because we completed the migration
-  await Promise.allSettled(cleanup.map((fn) => fn()))
-
-  // Figure out if we made any changes
-  if (isRepoDirty()) {
-    success('Verify the changes and commit them to your repository.')
-  } else {
-    success('No changes were made to your repository.')
-  }
-}
-
-run()
-  .then(() => process.exit(0))
-  .catch((err) => {
-    console.error(err)
-    process.exit(1)
-  })
diff --git a/packages/@tailwindcss-upgrade/src/stylesheet.ts b/packages/@tailwindcss-upgrade/src/stylesheet.ts
deleted file mode 100644
index 573413262..000000000
--- a/packages/@tailwindcss-upgrade/src/stylesheet.ts
+++ /dev/null
@@ -1,317 +0,0 @@
-import { __unstable__loadDesignSystem, compileAst } from '@tailwindcss/node'
-import * as fsSync from 'node:fs'
-import * as fs from 'node:fs/promises'
-import * as path from 'node:path'
-import * as util from 'node:util'
-import * as postcss from 'postcss'
-import { postCssAstToCssAst } from '../../@tailwindcss-postcss/src/ast'
-
-export type StylesheetId = string
-
-export interface StylesheetConnection {
-  item: Stylesheet
-  meta: {
-    layers: string[]
-  }
-}
-
-export class Stylesheet {
-  /**
-   * A unique identifier for this stylesheet
-   *
-   * Used to track the stylesheet in PostCSS nodes.
-   */
-  id: StylesheetId
-
-  /**
-   * The PostCSS AST that represents this stylesheet.
-   */
-  root: postcss.Root
-
-  /**
-   * Whether or not this stylesheet is a Tailwind CSS root stylesheet.
-   */
-  isTailwindRoot = false
-
-  /**
-   * The Tailwind config path that is linked to this stylesheet. Essentially the
-   * contents of `@config`.
-   */
-  linkedConfigPath: string | null = null
-
-  /**
-   * The path to the file that this stylesheet was loaded from.
-   *
-   * If this stylesheet was not loaded from a file this will be `null`.
-   */
-  file: string | null = null
-
-  /**
-   * Stylesheets that import this stylesheet.
-   */
-  parents = new Set<StylesheetConnection>()
-
-  /**
-   * Stylesheets that are imported by stylesheet.
-   */
-  children = new Set<StylesheetConnection>()
-
-  /**
-   * Whether or not this stylesheet can be migrated
-   */
-  canMigrate = true
-
-  /**
-   * Whether or not this stylesheet can be migrated
-   */
-  extension: string | null = null
-
-  static async load(filepath: string) {
-    filepath = path.resolve(process.cwd(), filepath)
-
-    let css = await fs.readFile(filepath, 'utf-8')
-    let root = postcss.parse(css, { from: filepath })
-
-    return new Stylesheet(root, filepath)
-  }
-
-  static loadSync(filepath: string) {
-    filepath = path.resolve(process.cwd(), filepath)
-
-    let css = fsSync.readFileSync(filepath, 'utf-8')
-    let root = postcss.parse(css, { from: filepath })
-
-    return new Stylesheet(root, filepath)
-  }
-
-  static async fromString(css: string) {
-    let root = postcss.parse(css)
-
-    return new Stylesheet(root)
-  }
-
-  static async fromRoot(root: postcss.Root, file?: string) {
-    return new Stylesheet(root, file)
-  }
-
-  constructor(root: postcss.Root, file?: string) {
-    this.id = Math.random().toString(36).slice(2)
-    this.root = root
-    this.file = file ?? null
-
-    if (file) {
-      this.extension = path.extname(file)
-    }
-  }
-
-  get importRules() {
-    let imports = new Set<postcss.AtRule>()
-
-    this.root.walkAtRules('import', (rule) => {
-      imports.add(rule)
-    })
-
-    return imports
-  }
-
-  get isEmpty() {
-    return this.root.toString().trim() === ''
-  }
-
-  *ancestors() {
-    for (let { item } of walkDepth(this, (sheet) => sheet.parents)) {
-      yield item
-    }
-  }
-
-  *descendants() {
-    for (let { item } of walkDepth(this, (sheet) => sheet.children)) {
-      yield item
-    }
-  }
-
-  /**
-   * Return the layers the stylesheet is imported into directly or indirectly
-   */
-  layers() {
-    let layers = new Set<string>()
-
-    for (let { item, path } of walkDepth(this, (sheet) => sheet.parents)) {
-      if (item.parents.size > 0) {
-        continue
-      }
-
-      for (let { meta } of path) {
-        for (let layer of meta.layers) {
-          layers.add(layer)
-        }
-      }
-    }
-
-    return layers
-  }
-
-  /**
-   * Iterate all paths from a stylesheet through its ancestors to all roots
-   *
-   * For example, given the following structure:
-   *
-   * ```
-   * c.css
-   *  -> a.1.css @import "…"
-   *      -> a.css
-   *          -> root.1.css (utility: no)
-   *          -> root.2.css (utility: no)
-   *      -> b.css
-   *          -> root.1.css (utility: no)
-   *          -> root.2.css (utility: no)
-   *
-   *  -> a.2.css @import "…" layer(foo)
-   *      -> a.css
-   *          -> root.1.css (utility: no)
-   *          -> root.2.css (utility: no)
-   *      -> b.css
-   *          -> root.1.css (utility: no)
-   *          -> root.2.css (utility: no)
-   *
-   *  -> b.1.css @import "…" layer(components / utilities)
-   *      -> a.css
-   *          -> root.1.css (utility: yes)
-   *          -> root.2.css (utility: yes)
-   *      -> b.css
-   *          -> root.1.css (utility: yes)
-   *          -> root.2.css (utility: yes)
-   * ```
-   *
-   * We can see there are a total of 12 import paths with various layers.
-   * We need to be able to iterate every one of these paths and inspect
-   * the layers used in each path..
-   */
-  *pathsToRoot(): Iterable<StylesheetConnection[]> {
-    for (let { item, path } of walkDepth(this, (sheet) => sheet.parents)) {
-      // Skip over intermediate stylesheets since all paths from a leaf to a
-      // root will encompass all possible intermediate stylesheet paths.
-      if (item.parents.size > 0) {
-        continue
-      }
-
-      yield path
-    }
-  }
-
-  /**
-   * Analyze a stylesheets import paths to see if some can be considered
-   * for conversion to utility rules and others can't.
-   *
-   * If a stylesheet is imported directly or indirectly and some imports are in
-   * a utility layer and some are not that means that we can't safely convert
-   * the rules in the stylesheet to `@utility`. Doing so would mean that we
-   * would need to replicate the stylesheet and change one to have `@utility`
-   * rules and leave the other as is.
-   *
-   * We can see, given the same structure from the `pathsToRoot` example, that
-   * `css.css` is imported into different layers:
-   * - `a.1.css` has no layers and should not be converted
-   * - `a.2.css` has a layer `foo` and should not be converted
-   * - `b.1.css` has a layer `utilities` (or `components`) which should be
-   *
-   * Since this means that `c.css` must both not be converted and converted
-   * we can't do this without replicating the stylesheet, any ancestors, and
-   * adjusting imports which is a non-trivial task.
-   */
-  analyzeImportPaths() {
-    let convertiblePaths: StylesheetConnection[][] = []
-    let nonConvertiblePaths: StylesheetConnection[][] = []
-
-    for (let path of this.pathsToRoot()) {
-      let isConvertible = false
-
-      for (let { meta } of path) {
-        for (let layer of meta.layers) {
-          isConvertible ||= layer === 'utilities' || layer === 'components'
-        }
-      }
-
-      if (isConvertible) {
-        convertiblePaths.push(path)
-      } else {
-        nonConvertiblePaths.push(path)
-      }
-    }
-
-    return { convertiblePaths, nonConvertiblePaths }
-  }
-
-  containsRule(cb: (rule: postcss.AnyNode) => boolean) {
-    let contains = false
-
-    this.root.walk((rule) => {
-      if (cb(rule)) {
-        contains = true
-        return false
-      }
-    })
-
-    if (contains) {
-      return true
-    }
-
-    for (let child of this.children) {
-      if (child.item.containsRule(cb)) {
-        return true
-      }
-    }
-
-    return false
-  }
-
-  #compiler?: Promise<Awaited<ReturnType<typeof compileAst>> | null>
-  #designSystem?: Promise<Awaited<ReturnType<typeof __unstable__loadDesignSystem>> | null>
-
-  async compiler(): Promise<Awaited<ReturnType<typeof compileAst>> | null> {
-    if (!this.isTailwindRoot) return null
-    if (!this.file) return null
-
-    return (this.#compiler ??= compileAst(postCssAstToCssAst(this.root), {
-      base: path.dirname(this.file),
-      onDependency() {},
-    }))
-  }
-
-  async designSystem(): Promise<Awaited<ReturnType<typeof __unstable__loadDesignSystem>> | null> {
-    if (!this.isTailwindRoot) return null
-    if (!this.file) return null
-
-    return (this.#designSystem ??= __unstable__loadDesignSystem(this.root.toString(), {
-      base: path.dirname(this.file),
-    }))
-  }
-
-  [util.inspect.custom]() {
-    return {
-      ...this,
-      root: this.root.toString(),
-      layers: Array.from(this.layers()),
-      parents: Array.from(this.parents, (s) => s.item.id),
-      children: Array.from(this.children, (s) => s.item.id),
-      parentsMeta: Array.from(this.parents, (s) => s.meta),
-      childrenMeta: Array.from(this.children, (s) => s.meta),
-    }
-  }
-}
-
-function* walkDepth(
-  value: Stylesheet,
-  connections: (value: Stylesheet) => Iterable<StylesheetConnection>,
-  path: StylesheetConnection[] = [],
-): Iterable<{ item: Stylesheet; path: StylesheetConnection[] }> {
-  for (let connection of connections(value)) {
-    let newPath = [...path, connection]
-
-    yield* walkDepth(connection.item, connections, newPath)
-    yield {
-      item: connection.item,
-      path: newPath,
-    }
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/args.test.ts b/packages/@tailwindcss-upgrade/src/utils/args.test.ts
deleted file mode 100644
index 51d2c4747..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/args.test.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { expect, it } from 'vitest'
-import { args, type Arg } from './args'
-
-it('should be possible to parse a single argument', () => {
-  expect(
-    args(
-      {
-        '--input': { type: 'string', description: 'Input file' },
-      },
-      ['--input', 'input.css'],
-    ),
-  ).toMatchInlineSnapshot(`
-    {
-      "--input": "input.css",
-      "_": [],
-    }
-  `)
-})
-
-it('should fallback to the default value if no flag is passed', () => {
-  expect(
-    args(
-      {
-        '--input': { type: 'string', description: 'Input file', default: 'input.css' },
-      },
-      ['--other'],
-    ),
-  ).toMatchInlineSnapshot(`
-    {
-      "--input": "input.css",
-      "_": [],
-    }
-  `)
-})
-
-it('should fallback to null if no flag is passed and no default value is provided', () => {
-  expect(
-    args(
-      {
-        '--input': { type: 'string', description: 'Input file' },
-      },
-      ['--other'],
-    ),
-  ).toMatchInlineSnapshot(`
-    {
-      "--input": null,
-      "_": [],
-    }
-  `)
-})
-
-it('should be possible to parse a single argument using the shorthand alias', () => {
-  expect(
-    args(
-      {
-        '--input': { type: 'string', description: 'Input file', alias: '-i' },
-      },
-      ['-i', 'input.css'],
-    ),
-  ).toMatchInlineSnapshot(`
-    {
-      "--input": "input.css",
-      "_": [],
-    }
-  `)
-})
-
-it('should convert the incoming value to the correct type', () => {
-  expect(
-    args(
-      {
-        '--input': { type: 'string', description: 'Input file' },
-        '--watch': { type: 'boolean', description: 'Watch mode' },
-        '--retries': { type: 'number', description: 'Amount of retries' },
-      },
-      ['--input', 'input.css', '--watch', '--retries', '3'],
-    ),
-  ).toMatchInlineSnapshot(`
-    {
-      "--input": "input.css",
-      "--retries": 3,
-      "--watch": true,
-      "_": [],
-    }
-  `)
-})
-
-it('should be possible to provide multiple types, and convert the value to that type', () => {
-  let options = {
-    '--retries': { type: 'boolean | number | string', description: 'Retries' },
-  } satisfies Arg
-
-  expect(args(options, ['--retries'])).toMatchInlineSnapshot(`
-    {
-      "--retries": true,
-      "_": [],
-    }
-  `)
-  expect(args(options, ['--retries', 'true'])).toMatchInlineSnapshot(`
-    {
-      "--retries": true,
-      "_": [],
-    }
-  `)
-  expect(args(options, ['--retries', 'false'])).toMatchInlineSnapshot(`
-    {
-      "--retries": false,
-      "_": [],
-    }
-  `)
-  expect(args(options, ['--retries', '5'])).toMatchInlineSnapshot(`
-    {
-      "--retries": 5,
-      "_": [],
-    }
-  `)
-  expect(args(options, ['--retries', 'indefinitely'])).toMatchInlineSnapshot(`
-    {
-      "--retries": "indefinitely",
-      "_": [],
-    }
-  `)
-})
diff --git a/packages/@tailwindcss-upgrade/src/utils/args.ts b/packages/@tailwindcss-upgrade/src/utils/args.ts
deleted file mode 100644
index 81bd847d5..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/args.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import parse from 'mri'
-
-// Definition of the arguments for a command in the CLI.
-export type Arg = {
-  [key: `--${string}`]: {
-    type: keyof Types
-    description: string
-    alias?: `-${string}`
-    default?: Types[keyof Types]
-  }
-}
-
-// Each argument will have a type and we want to convert the incoming raw string
-// based value to the correct type. We can't use pure TypeScript types because
-// these don't exist at runtime. Instead, we define a string-based type that
-// maps to a TypeScript type.
-type Types = {
-  boolean: boolean
-  number: number | null
-  string: string | null
-  'boolean | string': boolean | string | null
-  'number | string': number | string | null
-  'boolean | number': boolean | number | null
-  'boolean | number | string': boolean | number | string | null
-}
-
-// Convert the `Arg` type to a type that can be used at runtime.
-//
-// E.g.:
-//
-// Arg:
-// ```
-// { '--input': { type: 'string', description: 'Input file', alias: '-i' } }
-// ```
-//
-// Command:
-// ```
-// ./tailwindcss -i input.css
-// ./tailwindcss --input input.css
-// ```
-//
-// Result type:
-// ```
-// {
-//   _: string[],             // All non-flag arguments
-//   '--input': string | null // The `--input` flag will be filled with `null`, if the flag is not used.
-//                            // The `null` type will not be there if `default` is provided.
-// }
-// ```
-//
-// Result runtime object:
-// ```
-// {
-//   _: [],
-//   '--input': 'input.css'
-// }
-// ```
-export type Result<T extends Arg> = {
-  [K in keyof T]: T[K] extends { type: keyof Types; default?: any }
-    ? undefined extends T[K]['default']
-      ? Types[T[K]['type']]
-      : NonNullable<Types[T[K]['type']]>
-    : never
-} & {
-  // All non-flag arguments
-  _: string[]
-}
-
-export function args<const T extends Arg>(options: T, argv = process.argv.slice(2)): Result<T> {
-  let parsed = parse(argv)
-
-  let result: { _: string[]; [key: string]: unknown } = {
-    _: parsed._,
-  }
-
-  for (let [
-    flag,
-    { type, alias, default: defaultValue = type === 'boolean' ? false : null },
-  ] of Object.entries(options)) {
-    // Start with the default value
-    result[flag] = defaultValue
-
-    // Try to find the `alias`, and map it to long form `flag`
-    if (alias) {
-      let key = alias.slice(1)
-      if (parsed[key] !== undefined) {
-        result[flag] = convert(parsed[key], type)
-      }
-    }
-
-    // Try to find the long form `flag`
-    {
-      let key = flag.slice(2)
-      if (parsed[key] !== undefined) {
-        result[flag] = convert(parsed[key], type)
-      }
-    }
-  }
-
-  return result as Result<T>
-}
-
-// ---
-
-type ArgumentType = string | boolean
-
-// Try to convert the raw incoming `value` (which will be a string or a boolean,
-// this is coming from `mri`'s parse function'), to the correct type based on
-// the `type` of the argument.
-function convert<T extends keyof Types>(value: string | boolean, type: T) {
-  switch (type) {
-    case 'string':
-      return convertString(value)
-    case 'boolean':
-      return convertBoolean(value)
-    case 'number':
-      return convertNumber(value)
-    case 'boolean | string':
-      return convertBoolean(value) ?? convertString(value)
-    case 'number | string':
-      return convertNumber(value) ?? convertString(value)
-    case 'boolean | number':
-      return convertBoolean(value) ?? convertNumber(value)
-    case 'boolean | number | string':
-      return convertBoolean(value) ?? convertNumber(value) ?? convertString(value)
-    default:
-      throw new Error(`Unhandled type: ${type}`)
-  }
-}
-
-function convertBoolean(value: ArgumentType) {
-  if (value === true || value === false) {
-    return value
-  }
-
-  if (value === 'true') {
-    return true
-  }
-
-  if (value === 'false') {
-    return false
-  }
-}
-
-function convertNumber(value: ArgumentType) {
-  if (typeof value === 'number') {
-    return value
-  }
-
-  {
-    let valueAsNumber = Number(value)
-    if (!Number.isNaN(valueAsNumber)) {
-      return valueAsNumber
-    }
-  }
-}
-
-function convertString(value: ArgumentType) {
-  return `${value}`
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/extract-static-plugins.test.ts b/packages/@tailwindcss-upgrade/src/utils/extract-static-plugins.test.ts
deleted file mode 100644
index 4ec33b410..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/extract-static-plugins.test.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-import dedent from 'dedent'
-import { describe, expect, test } from 'vitest'
-import { extractStaticImportMap, findStaticPlugins } from './extract-static-plugins'
-
-const js = dedent
-
-describe('findStaticPlugins', () => {
-  test('parses all export styles', () => {
-    expect(
-      findStaticPlugins(js`
-        import plugin1 from './plugin1'
-
-        export default {
-          plugins: [plugin1, 'plugin2', require('./plugin3')]
-        }
-    `),
-    ).toEqual([
-      ['./plugin1', null],
-      ['plugin2', null],
-      ['./plugin3', null],
-    ])
-
-    expect(
-      findStaticPlugins(js`
-        import plugin1 from './plugin1'
-
-        export default {
-          plugins: [plugin1, 'plugin2', require('./plugin3')]
-        } as any
-    `),
-    ).toEqual([
-      ['./plugin1', null],
-      ['plugin2', null],
-      ['./plugin3', null],
-    ])
-
-    expect(
-      findStaticPlugins(js`
-        import plugin1 from './plugin1'
-
-        export default {
-          plugins: [plugin1, 'plugin2', require('./plugin3')]
-        } satisfies any
-    `),
-    ).toEqual([
-      ['./plugin1', null],
-      ['plugin2', null],
-      ['./plugin3', null],
-    ])
-
-    expect(
-      findStaticPlugins(js`
-        const plugin1 = require('./plugin1')
-
-        module.exports =  {
-          plugins: [plugin1, 'plugin2', require('./plugin3')]
-        } as any
-    `),
-    ).toEqual([
-      ['./plugin1', null],
-      ['plugin2', null],
-      ['./plugin3', null],
-    ])
-
-    expect(
-      findStaticPlugins(js`
-        const plugin1 = require('./plugin1')
-
-        module.exports =  {
-          plugins: [plugin1, 'plugin2', require('./plugin3')]
-        } satisfies any
-    `),
-    ).toEqual([
-      ['./plugin1', null],
-      ['plugin2', null],
-      ['./plugin3', null],
-    ])
-
-    expect(
-      findStaticPlugins(js`
-        const plugin1 = require('./plugin1')
-
-        module.exports =  {
-          plugins: [plugin1, 'plugin2', require('./plugin3')]
-        }
-    `),
-    ).toEqual([
-      ['./plugin1', null],
-      ['plugin2', null],
-      ['./plugin3', null],
-    ])
-  })
-
-  test('can extract plugin options', () => {
-    expect(
-      findStaticPlugins(js`
-        import plugin1 from './plugin1'
-        import plugin2 from './plugin2'
-
-        export default {
-          plugins: [
-            plugin1({
-              foo: 'bar',
-            }),
-            plugin2(),
-            require('./plugin3')({
-              foo: 'bar',
-            }),
-          ]
-        }
-    `),
-    ).toEqual([
-      ['./plugin1', { foo: 'bar' }],
-      ['./plugin2', null],
-      ['./plugin3', { foo: 'bar' }],
-    ])
-  })
-
-  test('can extract all supported data types', () => {
-    expect(
-      findStaticPlugins(js`
-        import plugin from 'plugin'
-
-        export default {
-          plugins: [
-            plugin({
-              'is-arr-mixed': [null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'],
-              'is-arr': ['foo', 'bar'],
-              'is-null': null,
-              'is-true': true,
-              'is-false': false,
-              'is-int': 1234567,
-              'is-float': 1.35,
-              'is-sci': 1.35e-5,
-              'is-str-null': 'null',
-              'is-str-true': 'true',
-              'is-str-false': 'false',
-              'is-str-int': '1234567',
-              'is-str-float': '1.35',
-              'is-str-sci': '1.35e-5',
-            }),
-          ]
-        }
-    `),
-    ).toEqual([
-      [
-        'plugin',
-        {
-          'is-arr-mixed': [null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'],
-          'is-arr': ['foo', 'bar'],
-          'is-null': null,
-          'is-true': true,
-          'is-false': false,
-          'is-int': 1234567,
-          'is-float': 1.35,
-          'is-sci': 1.35e-5,
-          'is-str-null': 'null',
-          'is-str-true': 'true',
-          'is-str-false': 'false',
-          'is-str-int': '1234567',
-          'is-str-float': '1.35',
-          'is-str-sci': '1.35e-5',
-        },
-      ],
-    ])
-  })
-
-  test('bails out on import * as import', () => {
-    expect(
-      findStaticPlugins(js`
-        import * as plugin from './plugin'
-
-        export default {
-          plugins: [plugin]
-        }
-      `),
-    ).toEqual(null)
-  })
-
-  test('bails out on inline plugins', () => {
-    expect(
-      findStaticPlugins(js`
-        import plugin1 from './plugin1'
-
-        export default {
-          plugins: [plugin1, () => {} ]
-        }
-      `),
-    ).toEqual(null)
-
-    expect(
-      findStaticPlugins(js`
-        let plugin1 = () => {}
-
-        export default {
-          plugins: [plugin1]
-        }
-      `),
-    ).toEqual(null)
-  })
-
-  test('bails out on non `require` calls', () => {
-    expect(
-      findStaticPlugins(js`
-        export default {
-          plugins: [load('./plugin1')]
-        }
-      `),
-    ).toEqual(null)
-  })
-
-  test('bails out on named imports for plugins', () => {
-    expect(
-      findStaticPlugins(js`
-        import {plugin1} from './plugin1'
-
-        export default {
-          plugins: [plugin1]
-        }
-      `),
-    ).toEqual(null)
-  })
-
-  test('bails on invalid plugin options', () => {
-    expect(
-      findStaticPlugins(js`
-        import plugin from './plugin'
-
-        export default {
-          plugins: [
-            plugin({ foo }),
-          ]
-        }
-    `),
-    ).toEqual(null)
-
-    expect(
-      findStaticPlugins(js`
-        import plugin from './plugin'
-
-        export default {
-          plugins: [
-            plugin({ foo: { bar: 2 } }),
-          ]
-        }
-    `),
-    ).toEqual(null)
-
-    expect(
-      findStaticPlugins(js`
-        import plugin from './plugin'
-
-        export default {
-          plugins: [
-            plugin({ foo: ${'`bar${""}`'} }),
-          ]
-        }
-    `),
-    ).toEqual(null)
-
-    expect(
-      findStaticPlugins(js`
-        import plugin from './plugin'
-
-        const OPTIONS = { foo: 1 }
-
-        export default {
-          plugins: [
-            plugin(OPTIONS),
-          ]
-        }
-      `),
-    ).toEqual(null)
-
-    expect(
-      findStaticPlugins(js`
-        import plugin from './plugin'
-
-        let something = 1
-
-        export default {
-          plugins: [
-            plugin({ foo: something }),
-          ]
-        }
-    `),
-    ).toEqual(null)
-  })
-
-  test('returns no plugins if none are exported', () => {
-    expect(
-      findStaticPlugins(js`
-        export default {
-          plugins: []
-        }
-      `),
-    ).toEqual([])
-
-    expect(
-      findStaticPlugins(js`
-        export default {}
-      `),
-    ).toEqual([])
-  })
-})
-
-describe('extractStaticImportMap', () => {
-  test('extracts different kind of imports from an ESM file', () => {
-    let extracted = extractStaticImportMap(js`
-      import plugin1 from './plugin1'
-      import * as plugin2 from './plugin2'
-      import plugin6, { plugin3, plugin4, default as plugin5 } from './plugin3'
-      import plugin8, * as plugin7 from './plugin7'
-    `)
-
-    expect(extracted).toEqual({
-      plugin1: { module: './plugin1', export: null },
-      plugin2: { module: './plugin2', export: '*' },
-      plugin3: { module: './plugin3', export: 'plugin3' },
-      plugin4: { module: './plugin3', export: 'plugin4' },
-      plugin5: { module: './plugin3', export: 'default' },
-      plugin6: { module: './plugin3', export: null },
-      plugin7: { module: './plugin7', export: '*' },
-      plugin8: { module: './plugin7', export: null },
-    })
-  })
-
-  test('extracts different kind of imports from an CJS file', () => {
-    let extracted = extractStaticImportMap(js`
-      const plugin1 = require('./plugin1')
-      let plugin2 = require('./plugin2')
-      var plugin3 = require('./plugin3')
-
-      const {plugin4, foo: plugin5, ...plugin6} = require('./plugin4')
-      let {plugin7, foo: plugin8, ...plugin9} = require('./plugin5')
-      var {plugin10, foo: plugin11, ...plugin12} = require('./plugin6')
-    `)
-
-    expect(extracted).toEqual({
-      plugin1: { module: './plugin1', export: null },
-      plugin2: { module: './plugin2', export: null },
-      plugin3: { module: './plugin3', export: null },
-      plugin4: { module: './plugin4', export: 'plugin4' },
-      plugin5: { module: './plugin4', export: 'foo' },
-      plugin6: { module: './plugin4', export: '*' },
-      plugin7: { module: './plugin5', export: 'plugin7' },
-      plugin8: { module: './plugin5', export: 'foo' },
-      plugin9: { module: './plugin5', export: '*' },
-      plugin10: { module: './plugin6', export: 'plugin10' },
-      plugin11: { module: './plugin6', export: 'foo' },
-      plugin12: { module: './plugin6', export: '*' },
-    })
-  })
-})
diff --git a/packages/@tailwindcss-upgrade/src/utils/extract-static-plugins.ts b/packages/@tailwindcss-upgrade/src/utils/extract-static-plugins.ts
deleted file mode 100644
index 4318c14ef..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/extract-static-plugins.ts
+++ /dev/null
@@ -1,382 +0,0 @@
-import Parser from 'tree-sitter'
-import TS from 'tree-sitter-typescript'
-
-let parser = new Parser()
-parser.setLanguage(TS.typescript)
-const treesitter = String.raw
-
-// Extract `plugins` property of the object export for both ESM and CJS files
-const PLUGINS_QUERY = new Parser.Query(
-  TS.typescript,
-  treesitter`
-    ; export default {}
-    (export_statement
-      value: [
-        (satisfies_expression (object
-          (pair
-            key: (property_identifier) @_name (#eq? @_name "plugins")
-            value: (array) @imports
-          )
-        ))
-        value: (as_expression (object
-          (pair
-            key: (property_identifier) @_name (#eq? @_name "plugins")
-            value: (array) @imports
-          )
-        ))
-        value: (object
-          (pair
-            key: (property_identifier) @_name (#eq? @_name "plugins")
-            value: (array) @imports
-          )
-        )
-      ]
-    )
-
-    ; module.exports = {}
-    (expression_statement
-      (assignment_expression
-        left: (member_expression) @left (#eq? @left "module.exports")
-        right: [
-          (satisfies_expression (object
-            (pair
-              key: (property_identifier) @_name (#eq? @_name "plugins")
-              value: (array) @imports
-            )
-          ))
-          (as_expression (object
-            (pair
-              key: (property_identifier) @_name (#eq? @_name "plugins")
-              value: (array) @imports
-            )
-          ))
-          (object
-            (pair
-              key: (property_identifier) @_name (#eq? @_name "plugins")
-              value: (array) @imports
-            )
-          )
-        ]
-      )
-    )
-  `,
-)
-
-// Extract require() calls, as well as identifiers with options or require()
-// with options
-const PLUGIN_CALL_OPTIONS_QUERY = new Parser.Query(
-  TS.typescript,
-  treesitter`
-    (call_expression
-      function: [
-        (call_expression
-          function: (identifier) @_name (#eq? @_name "require")
-          arguments: (arguments
-            (string (string_fragment) @module_string)
-          )
-        )
-        (identifier) @module_identifier
-      ]
-      arguments: [
-        (arguments
-          (object
-            (pair
-              key: [
-                (property_identifier) @property
-                (string (string_fragment) @property)
-              ]
-
-              value: [
-                (string (string_fragment) @str_value)
-                (template_string
-                  . (string_fragment) @str_value
-                  ; If the template string has more than exactly one string
-                  ; fragment at the top, the migration should bail.
-                  _ @error
-                )
-                (number) @num_value
-                (true) @true_value
-                (false) @false_value
-                (null) @null_value
-                (array [
-                  (string (string_fragment) @str_value)
-                  (template_string (string_fragment) @str_value)
-                  (number) @num_value
-                  (true) @true_value
-                  (false) @false_value
-                  (null) @null_value
-                ]) @array_value
-              ]
-            )
-          )
-        )
-        (arguments) @_empty_args (#eq? @_empty_args "()")
-      ]
-    )
-    (call_expression
-      function: (identifier) @_name (#eq? @_name "require")
-      arguments: (arguments
-      (string (string_fragment) @module_string)
-      )
-    )
-  `,
-)
-
-export type StaticPluginOptions = Record<
-  string,
-  | string
-  | number
-  | boolean
-  | null
-  | string
-  | number
-  | boolean
-  | null
-  | Array<string | number | boolean | null>
->
-
-export function findStaticPlugins(source: string): [string, null | StaticPluginOptions][] | null {
-  try {
-    let tree = parser.parse(source)
-    let root = tree.rootNode
-
-    let imports = extractStaticImportMap(source)
-    let captures = PLUGINS_QUERY.matches(root)
-
-    let plugins: [string, null | StaticPluginOptions][] = []
-    for (let match of captures) {
-      for (let capture of match.captures) {
-        if (capture.name !== 'imports') continue
-
-        for (let pluginDefinition of capture.node.children) {
-          if (
-            pluginDefinition.type === '[' ||
-            pluginDefinition.type === ']' ||
-            pluginDefinition.type === ','
-          )
-            continue
-
-          switch (pluginDefinition.type) {
-            case 'identifier':
-              let source = imports[pluginDefinition.text]
-              if (!source || source.export !== null) {
-                return null
-              }
-              plugins.push([source.module, null])
-              break
-            case 'string':
-              plugins.push([pluginDefinition.children[1].text, null])
-              break
-            case 'call_expression':
-              let matches = PLUGIN_CALL_OPTIONS_QUERY.matches(pluginDefinition)
-              if (matches.length === 0) return null
-
-              let moduleName: string | null = null
-              let moduleIdentifier: string | null = null
-
-              let options: StaticPluginOptions | null = null
-              let lastProperty: string | null = null
-
-              let captures = matches.flatMap((m) => m.captures)
-              for (let i = 0; i < captures.length; i++) {
-                let capture = captures[i]
-                switch (capture.name) {
-                  case 'module_identifier': {
-                    moduleIdentifier = capture.node.text
-                    break
-                  }
-                  case 'module_string': {
-                    moduleName = capture.node.text
-                    break
-                  }
-                  case 'property': {
-                    if (lastProperty !== null) return null
-                    lastProperty = capture.node.text
-                    break
-                  }
-                  case 'str_value':
-                  case 'num_value':
-                  case 'null_value':
-                  case 'true_value':
-                  case 'false_value': {
-                    if (lastProperty === null) return null
-                    options ??= {}
-                    options[lastProperty] = extractValue(capture)
-                    lastProperty = null
-                    break
-                  }
-                  case 'array_value': {
-                    if (lastProperty === null) return null
-                    options ??= {}
-
-                    // Loop over all captures after this one that are on the
-                    // same property (it will be one match for any array
-                    // element)
-                    let array: Array<string | number | boolean | null> = []
-                    let lastConsumedIndex = i
-                    arrayLoop: for (let j = i + 1; j < captures.length; j++) {
-                      let innerCapture = captures[j]
-
-                      switch (innerCapture.name) {
-                        case 'property': {
-                          if (innerCapture.node.text !== lastProperty) {
-                            break arrayLoop
-                          }
-                          break
-                        }
-                        case 'str_value':
-                        case 'num_value':
-                        case 'null_value':
-                        case 'true_value':
-                        case 'false_value': {
-                          array.push(extractValue(innerCapture))
-                          lastConsumedIndex = j
-                        }
-                      }
-                    }
-
-                    i = lastConsumedIndex
-                    options[lastProperty] = array
-                    lastProperty = null
-                    break
-                  }
-
-                  case '_name':
-                  case '_empty_args':
-                    break
-                  default:
-                    return null
-                }
-              }
-
-              if (lastProperty !== null) return null
-
-              if (moduleIdentifier !== null) {
-                let source = imports[moduleIdentifier]
-                if (!source || (source.export !== null && source.export !== '*')) {
-                  return null
-                }
-                moduleName = source.module
-              }
-
-              if (moduleName === null) {
-                return null
-              }
-
-              plugins.push([moduleName, options])
-              break
-            default:
-              return null
-          }
-        }
-      }
-    }
-    return plugins
-  } catch (error: any) {
-    error(`${error?.message ?? error}`, { prefix: '↳ ' })
-    return null
-  }
-}
-
-// Extract all top-level imports for both ESM and CJS files
-const IMPORT_QUERY = new Parser.Query(
-  TS.typescript,
-  treesitter`
-    ; ESM import
-    (import_statement
-      (import_clause
-        (identifier)? @default
-        (named_imports
-          (import_specifier
-            name: (identifier) @imported-name
-                alias: (identifier)? @imported-alias
-              )
-        )?
-        (namespace_import (identifier) @imported-namespace)?
-      )
-      (string
-        (string_fragment) @imported-from)
-    )
-
-    ; CJS require
-    (variable_declarator
-      name: (identifier)? @default
-      name: (object_pattern
-        (shorthand_property_identifier_pattern)? @imported-name
-        (pair_pattern
-          key: (property_identifier) @imported-name
-          value: (identifier) @imported-alias
-        )?
-        (rest_pattern
-          (identifier) @imported-namespace
-        )?
-      )?
-      value: (call_expression
-        function: (identifier) @_fn (#eq? @_fn "require")
-        arguments: (arguments
-          (string
-              (string_fragment) @imported-from
-            )
-        )
-      )
-    )
-  `,
-)
-
-export function extractStaticImportMap(source: string) {
-  let tree = parser.parse(source)
-  let root = tree.rootNode
-
-  let captures = IMPORT_QUERY.matches(root)
-
-  let imports: Record<string, { module: string; export: string | null }> = {}
-  for (let match of captures) {
-    let toImport: { name: string; export: null | string }[] = []
-    let from = ''
-    for (let i = 0; i < match.captures.length; i++) {
-      let capture = match.captures[i]
-
-      switch (capture.name) {
-        case 'default':
-          toImport.push({ name: capture.node.text, export: null })
-          break
-        case 'imported-name':
-          toImport.push({ name: capture.node.text, export: capture.node.text })
-          break
-        case 'imported-from':
-          from = capture.node.text
-          break
-        case 'imported-namespace':
-          toImport.push({ name: capture.node.text, export: '*' })
-          break
-        case 'imported-alias':
-          if (toImport.length < 1) {
-            throw new Error('Unexpected alias: ' + JSON.stringify(captures, null, 2))
-          }
-          let prevImport = toImport[toImport.length - 1]
-          let name = prevImport.name
-          prevImport.export = name
-          prevImport.name = capture.node.text
-          break
-      }
-    }
-
-    for (let { name, export: exportSource } of toImport) {
-      imports[name] = { module: from, export: exportSource }
-    }
-  }
-
-  return imports
-}
-
-function extractValue(capture: { name: string; node: { text: string } }) {
-  return capture.name === 'num_value'
-    ? parseFloat(capture.node.text)
-    : capture.name === 'null_value'
-      ? null
-      : capture.name === 'true_value'
-        ? true
-        : capture.name === 'false_value'
-          ? false
-          : capture.node.text
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/format-ns.test.ts b/packages/@tailwindcss-upgrade/src/utils/format-ns.test.ts
deleted file mode 100644
index a5382d217..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/format-ns.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { expect, it } from 'vitest'
-import { formatNanoseconds } from './format-ns'
-
-it.each([
-  [0, '0ns'],
-  [1, '1ns'],
-  [999, '999ns'],
-  [1000, '1µs'],
-  [1001, '1µs'],
-  [999999, '999µs'],
-  [1000000, '1ms'],
-  [1000001, '1ms'],
-  [999999999, '999ms'],
-  [1000000000, '1s'],
-  [1000000001, '1s'],
-  [59999999999, '59s'],
-  [60000000000, '1m'],
-  [60000000001, '1m'],
-  [3599999999999n, '59m'],
-  [3600000000000n, '1h'],
-  [3600000000001n, '1h'],
-  [86399999999999n, '23h'],
-  [86400000000000n, '1d'],
-  [86400000000001n, '1d'],
-  [8640000000000000n, '100d'],
-])('should format %s nanoseconds as %s', (ns, expected) => {
-  expect(formatNanoseconds(ns)).toBe(expected)
-})
diff --git a/packages/@tailwindcss-upgrade/src/utils/format-ns.ts b/packages/@tailwindcss-upgrade/src/utils/format-ns.ts
deleted file mode 100644
index 39889d401..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/format-ns.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export function formatNanoseconds(input: bigint | number) {
-  let ns = typeof input === 'number' ? BigInt(input) : input
-
-  if (ns < 1_000n) return `${ns}ns`
-  ns /= 1_000n
-
-  if (ns < 1_000n) return `${ns}µs`
-  ns /= 1_000n
-
-  if (ns < 1_000n) return `${ns}ms`
-  ns /= 1_000n
-
-  if (ns < 60n) return `${ns}s`
-  ns /= 60n
-
-  if (ns < 60n) return `${ns}m`
-  ns /= 60n
-
-  if (ns < 24n) return `${ns}h`
-  ns /= 24n
-
-  return `${ns}d`
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/git.ts b/packages/@tailwindcss-upgrade/src/utils/git.ts
deleted file mode 100644
index 38edf21cb..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/git.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { execSync } from 'node:child_process'
-
-export function gitRoot(cwd?: string): string | null {
-  try {
-    return execSync('git rev-parse --show-toplevel', {
-      encoding: 'utf-8',
-      cwd,
-      stdio: ['ignore', 'pipe', 'ignore'],
-    }).trim()
-  } catch {
-    return null
-  }
-}
-
-export function isRepoDirty(cwd?: string) {
-  try {
-    let stdout = execSync('git status --porcelain', { encoding: 'utf-8', cwd })
-    return stdout.trim() !== ''
-  } catch (error) {
-    // If it's not a git repository we don't know if it's dirty or not. But we
-    // also don't want to block the migration. Maybe we can still fail and
-    // require a `--force` flag?
-    if (error?.toString?.().includes('not a git repository')) {
-      return false
-    }
-
-    return true
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/package-version.ts b/packages/@tailwindcss-upgrade/src/utils/package-version.ts
deleted file mode 100644
index 64a1e7ed1..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/package-version.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { readFileSync } from 'node:fs'
-import fs from 'node:fs/promises'
-import { resolveJsId } from './resolve'
-
-/**
- * Resolves the version string of an npm dependency installed in the based
- * directory.
- */
-export async function getPackageVersion(pkg: string, base: string): Promise<string | null> {
-  try {
-    let packageJson = resolveJsId(`${pkg}/package.json`, base)
-    if (!packageJson) return null
-    let { version } = JSON.parse(await fs.readFile(packageJson, 'utf8'))
-    return version
-  } catch {
-    return null
-  }
-}
-
-export function getPackageVersionSync(pkg: string, base: string): string | null {
-  try {
-    let packageJson = resolveJsId(`${pkg}/package.json`, base)
-    if (!packageJson) return null
-    let { version } = JSON.parse(readFileSync(packageJson, 'utf8'))
-    return version
-  } catch {
-    return null
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/packages.ts b/packages/@tailwindcss-upgrade/src/utils/packages.ts
deleted file mode 100644
index 461a6983a..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/packages.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { exec as execCb } from 'node:child_process'
-import { readFileSync } from 'node:fs'
-import fs from 'node:fs/promises'
-import { dirname, resolve } from 'node:path'
-import { promisify } from 'node:util'
-import { DefaultMap } from '../../../tailwindcss/src/utils/default-map'
-import { error, warn } from './renderer'
-
-const exec = promisify(execCb)
-
-const SAVE_DEV: Record<string, string> = {
-  default: '-D',
-  bun: '-d',
-}
-
-const manifests = new DefaultMap((base) => {
-  try {
-    let packageJsonPath = resolve(base, 'package.json')
-    return readFileSync(packageJsonPath, 'utf-8')
-  } catch {
-    return ''
-  }
-})
-
-export function pkg(base: string) {
-  return {
-    async manager() {
-      return await packageManagerForBase.get(base)
-    },
-    async add(packages: string[], location: 'dependencies' | 'devDependencies' = 'dependencies') {
-      let packageManager = await packageManagerForBase.get(base)
-      let args = packages.slice()
-      if (location === 'devDependencies') {
-        args.push(SAVE_DEV[packageManager] || SAVE_DEV.default)
-      }
-
-      // Allow running the `pnpm` command in the workspace root without
-      // erroring. Can't just use `--workspace-root` because that will force
-      // install dependencies in the workspace root.
-      if (packageManager === 'pnpm') {
-        args.push('--ignore-workspace-root-check')
-      }
-
-      let command = `${packageManager} add ${args.join(' ')}`
-      try {
-        return await exec(command, { cwd: base })
-      } catch (e: any) {
-        error(`An error occurred while running \`${command}\`\n\n${e.stdout}\n${e.stderr}`, {
-          prefix: '↳ ',
-        })
-        throw e
-      } finally {
-        manifests.delete(base)
-      }
-    },
-    has(name: string) {
-      return manifests.get(base).includes(`"${name}":`)
-    },
-    async remove(packages: string[]) {
-      let packageManager = await packageManagerForBase.get(base)
-      let command = `${packageManager} remove ${packages.join(' ')}`
-      try {
-        return await exec(command, { cwd: base })
-      } catch (e: any) {
-        error(`An error occurred while running \`${command}\`\n\n${e.stdout}\n${e.stderr}`, {
-          prefix: '↳ ',
-        })
-        throw e
-      } finally {
-        manifests.delete(base)
-      }
-    },
-  }
-}
-
-let didWarnAboutPackageManager = false
-let packageManagerForBase = new DefaultMap(async (base) => {
-  do {
-    // 1. Check package.json for a `packageManager` field
-    let packageJsonPath = resolve(base, 'package.json')
-    try {
-      let packageJsonContent = await fs.readFile(packageJsonPath, 'utf-8')
-      let packageJson = JSON.parse(packageJsonContent)
-      if (packageJson.packageManager) {
-        if (packageJson.packageManager.includes('bun')) {
-          return 'bun'
-        }
-        if (packageJson.packageManager.includes('yarn')) {
-          return 'yarn'
-        }
-        if (packageJson.packageManager.includes('pnpm')) {
-          return 'pnpm'
-        }
-        if (packageJson.packageManager.includes('npm')) {
-          return 'npm'
-        }
-      }
-    } catch {}
-
-    // 2. Check for common lockfiles
-    try {
-      await fs.access(resolve(base, 'bun.lockb'))
-      return 'bun'
-    } catch {}
-    try {
-      await fs.access(resolve(base, 'bun.lock'))
-      return 'bun'
-    } catch {}
-    try {
-      await fs.access(resolve(base, 'pnpm-lock.yaml'))
-      return 'pnpm'
-    } catch {}
-
-    try {
-      await fs.access(resolve(base, 'yarn.lock'))
-      return 'yarn'
-    } catch {}
-
-    try {
-      await fs.access(resolve(base, 'package-lock.json'))
-      return 'npm'
-    } catch {}
-
-    // 3. If no lockfile is found, we might be in a monorepo
-    let previousBase = base
-    base = dirname(base)
-
-    // Already at the root
-    if (previousBase === base) {
-      if (!didWarnAboutPackageManager) {
-        didWarnAboutPackageManager = true
-        warn('Could not detect a package manager. Please manually update `tailwindcss` to v4.')
-      }
-
-      return Promise.reject('No package manager detected')
-    }
-  } while (true)
-})
diff --git a/packages/@tailwindcss-upgrade/src/utils/renderer.ts b/packages/@tailwindcss-upgrade/src/utils/renderer.ts
deleted file mode 100644
index c9a967801..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/renderer.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { stripVTControlCharacters } from 'node:util'
-import pc from 'picocolors'
-import { resolve } from '../utils/resolve'
-import { formatNanoseconds } from './format-ns'
-
-export const UI = {
-  indent: 2,
-}
-export function header() {
-  return `${pc.italic(pc.bold(pc.blue('\u2248')))} tailwindcss ${pc.blue(`v${getVersion()}`)}`
-}
-
-export function highlight(file: string) {
-  return `${pc.dim(pc.blue('`'))}${pc.blue(file)}${pc.dim(pc.blue('`'))}`
-}
-
-/**
- * Convert an `absolute` path to a `relative` path from the current working
- * directory.
- */
-export function relative(
-  to: string,
-  from = process.cwd(),
-  { preferAbsoluteIfShorter = true } = {},
-) {
-  let result = path.relative(from, to)
-  if (!result.startsWith('..')) {
-    result = `.${path.sep}${result}`
-  }
-
-  if (preferAbsoluteIfShorter && result.length > to.length) {
-    return to
-  }
-
-  return result
-}
-
-/**
- * Wrap `text` into multiple lines based on the `width`.
- */
-export function wordWrap(text: string, width: number): string[] {
-  // Handle text with newlines by maintaining the newlines, then splitting
-  // each line separately.
-  if (text.includes('\n')) {
-    return text.split('\n').flatMap((line) => (line ? wordWrap(line, width) : ['']))
-  }
-
-  let words = text.split(' ')
-  let lines = []
-
-  let line = ''
-  let lineLength = 0
-  for (let word of words) {
-    let wordLength = stripVTControlCharacters(word).length
-
-    if (lineLength + wordLength + 1 > width) {
-      lines.push(line)
-      line = ''
-      lineLength = 0
-    }
-
-    line += (lineLength ? ' ' : '') + word
-    lineLength += wordLength + (lineLength ? 1 : 0)
-  }
-
-  if (lineLength) {
-    lines.push(line)
-  }
-
-  return lines
-}
-
-/**
- * Format a duration in nanoseconds to a more human readable format.
- */
-export function formatDuration(ns: bigint) {
-  let formatted = formatNanoseconds(ns)
-
-  if (ns <= 50 * 1e6) return pc.green(formatted)
-  if (ns <= 300 * 1e6) return pc.blue(formatted)
-  if (ns <= 1000 * 1e6) return pc.yellow(formatted)
-
-  return pc.red(formatted)
-}
-
-export function indent(value: string, offset = 0) {
-  return `${' '.repeat(offset + UI.indent)}${value}`
-}
-
-function log(message: string, { art = pc.gray('\u2502'), prefix = '', print = eprintln }) {
-  let prefixLength = prefix.length
-  let padding = ' '
-  let paddingLength = padding.length
-  let artLength = stripVTControlCharacters(art).length
-  let availableWidth = process.stderr.columns
-  let totalWidth = availableWidth - prefixLength - paddingLength * 2 - artLength
-
-  wordWrap(message, totalWidth).map((line, idx) => {
-    return print(
-      `${art}${padding}${idx === 0 ? prefix : ' '.repeat(prefixLength)}${line}${padding}`,
-    )
-  })
-  print()
-}
-
-export function success(message: string, { prefix = '', print = eprintln } = {}) {
-  log(message, { art: pc.green('\u2502'), prefix, print })
-}
-
-export function info(message: string, { prefix = '', print = eprintln } = {}) {
-  log(message, { art: pc.blue('\u2502'), prefix, print })
-}
-
-export function error(message: string, { prefix = '', print = eprintln } = {}) {
-  log(message, { art: pc.red('\u2502'), prefix, print })
-}
-
-export function warn(message: string, { prefix = '', print = eprintln } = {}) {
-  log(message, { art: pc.yellow('\u2502'), prefix, print })
-}
-
-// Rust inspired functions to print to the console:
-
-export function eprintln(value = '') {
-  process.stderr.write(`${value}\n`)
-}
-
-export function println(value = '') {
-  process.stdout.write(`${value}\n`)
-}
-
-function getVersion(): string {
-  if (typeof globalThis.__tw_version === 'string') {
-    return globalThis.__tw_version
-  }
-  let { version } = JSON.parse(fs.readFileSync(resolve('tailwindcss/package.json'), 'utf-8'))
-  return version
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/resolve.ts b/packages/@tailwindcss-upgrade/src/utils/resolve.ts
deleted file mode 100644
index 58f5834ba..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/resolve.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import EnhancedResolve from 'enhanced-resolve'
-import fs from 'node:fs'
-import { createRequire } from 'node:module'
-
-const localResolve = createRequire(import.meta.url).resolve
-export function resolve(id: string) {
-  if (typeof globalThis.__tw_resolve === 'function') {
-    let resolved = globalThis.__tw_resolve(id)
-    if (resolved) {
-      return resolved
-    }
-  }
-  return localResolve(id)
-}
-
-const esmResolver = EnhancedResolve.ResolverFactory.createResolver({
-  fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
-  useSyncFileSystemCalls: true,
-  extensions: ['.js', '.json', '.node', '.ts'],
-  conditionNames: ['node', 'import'],
-})
-
-const cjsResolver = EnhancedResolve.ResolverFactory.createResolver({
-  fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
-  useSyncFileSystemCalls: true,
-  extensions: ['.js', '.json', '.node', '.ts'],
-  conditionNames: ['node', 'require'],
-})
-
-export function resolveJsId(id: string, base: string) {
-  try {
-    return esmResolver.resolveSync({}, base, id)
-  } catch {
-    return cjsResolver.resolveSync({}, base, id)
-  }
-}
-
-const resolver = EnhancedResolve.ResolverFactory.createResolver({
-  fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
-  useSyncFileSystemCalls: true,
-  extensions: ['.css'],
-  mainFields: ['style'],
-  conditionNames: ['style'],
-})
-export function resolveCssId(id: string, base: string) {
-  return resolver.resolveSync({}, base, id)
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/splice-changes-into-string.ts b/packages/@tailwindcss-upgrade/src/utils/splice-changes-into-string.ts
deleted file mode 100644
index e1e6f1685..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/splice-changes-into-string.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export interface StringChange {
-  start: number
-  end: number
-  replacement: string
-}
-
-/**
- * Apply the changes to the string such that a change in the length
- * of the string does not break the indexes of the subsequent changes.
- */
-export function spliceChangesIntoString(str: string, changes: StringChange[]) {
-  // If there are no changes, return the original string
-  if (!changes[0]) return str
-
-  // Sort all changes in order to make it easier to apply them
-  changes.sort((a, b) => {
-    return a.end - b.end || a.start - b.start
-  })
-
-  // Append original string between each chunk, and then the chunk itself
-  // This is sort of a String Builder pattern, thus creating less memory pressure
-  let result = ''
-
-  let previous = changes[0]
-
-  result += str.slice(0, previous.start)
-  result += previous.replacement
-
-  for (let i = 1; i < changes.length; ++i) {
-    let change = changes[i]
-
-    result += str.slice(previous.end, change.start)
-    result += change.replacement
-
-    previous = change
-  }
-
-  // Add leftover string from last chunk to end
-  result += str.slice(previous.end)
-
-  return result
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/version.ts b/packages/@tailwindcss-upgrade/src/utils/version.ts
deleted file mode 100644
index 27bc44f2b..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/version.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { execSync } from 'node:child_process'
-import semver from 'semver'
-import { DefaultMap } from '../../../tailwindcss/src/utils/default-map'
-import { getPackageVersionSync } from './package-version'
-
-/**
- * Must be of major version.
- *
- * E.g.: `isMajor(3)`
- */
-export function isMajor(version: number) {
-  return semver.satisfies(installedTailwindVersion(), `>=${version}.0.0 <${version + 1}.0.0`)
-}
-
-/**
- * Must be of greater than the current major version including minor and patch.
- *
- * E.g.: `isGreaterThan(3)`
- */
-export function isGreaterThan(version: number) {
-  return semver.gte(installedTailwindVersion(), `${version + 1}.0.0`)
-}
-
-let cache = new DefaultMap((base) => {
-  let tailwindVersion = getPackageVersionSync('tailwindcss', base)
-  if (!tailwindVersion) throw new Error('Tailwind CSS is not installed')
-  return tailwindVersion
-})
-
-export function installedTailwindVersion(base = process.cwd()): string {
-  return cache.get(base)
-}
-
-let expectedCache = new DefaultMap((base) => {
-  try {
-    // This will report a problem if the package.json/package-lock.json
-    // mismatches with the installed version in node_modules.
-    //
-    // Also tested this with Bun and PNPM, both seem to work fine.
-    execSync('npm ls tailwindcss --json', { cwd: base, stdio: 'pipe' })
-    return installedTailwindVersion(base)
-  } catch (_e) {
-    try {
-      let e = _e as { stdout: Buffer }
-      let data = JSON.parse(e.stdout.toString())
-
-      return (
-        // Could be a sub-dependency issue, but we are only interested in
-        // the top-level version mismatch.
-        /"(.*?)" from the root project/.exec(data.dependencies.tailwindcss.invalid)?.[1] ??
-        // Fallback to the installed version
-        installedTailwindVersion(base)
-      )
-    } catch {
-      // We don't know how to verify, so let's just return the installed
-      // version to not block the user.
-      return installedTailwindVersion(base)
-    }
-  }
-})
-export function expectedTailwindVersion(base = process.cwd()): string {
-  return expectedCache.get(base)
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/walk-variants.ts b/packages/@tailwindcss-upgrade/src/utils/walk-variants.ts
deleted file mode 100644
index e0dd16899..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/walk-variants.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Candidate, Variant } from '../../../tailwindcss/src/candidate'
-
-export function* walkVariants(candidate: Candidate) {
-  function* inner(
-    variant: Variant,
-    parent: Extract<Variant, { kind: 'compound' }> | null = null,
-  ): Iterable<[Variant, Extract<Variant, { kind: 'compound' }> | null]> {
-    yield [variant, parent]
-
-    if (variant.kind === 'compound') {
-      yield* inner(variant.variant, variant)
-    }
-  }
-
-  for (let variant of candidate.variants) {
-    yield* inner(variant, null)
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/walk.ts b/packages/@tailwindcss-upgrade/src/utils/walk.ts
deleted file mode 100644
index f94bdebb4..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/walk.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-export const enum WalkAction {
-  // Continue walking the tree. Default behavior.
-  Continue,
-
-  // Skip walking into the current node.
-  Skip,
-
-  // Stop walking the tree entirely.
-  Stop,
-}
-
-interface Walkable<T> {
-  each(cb: (node: T, index: number) => void): void
-}
-
-// Custom walk implementation where we can skip going into nodes when we don't
-// need to process them.
-export function walk<T>(
-  rule: Walkable<T>,
-  cb: (rule: T, idx: number, parent: Walkable<T>) => void | WalkAction,
-): undefined | false {
-  let result: undefined | false = undefined
-
-  rule.each?.((node, idx) => {
-    let action = cb(node, idx, rule) ?? WalkAction.Continue
-    if (action === WalkAction.Stop) {
-      result = false
-      return result
-    }
-    if (action !== WalkAction.Skip) {
-      result = walk(node as Walkable<T>, cb)
-      return result
-    }
-  })
-
-  return result
-}
-
-// Depth first walk reversal implementation.
-export function walkDepth<T>(rule: Walkable<T>, cb: (rule: T) => void) {
-  rule?.each?.((node) => {
-    walkDepth(node as Walkable<T>, cb)
-    cb(node)
-  })
-}
diff --git a/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts b/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts
deleted file mode 100644
index 2ff99f9e7..000000000
--- a/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { randomUUID } from 'node:crypto'
-import fs from 'node:fs/promises'
-import path from 'node:path'
-
-export async function writeFileSafely(file: string, contents: string) {
-  // Resolve symlinks so the rename replaces the actual target file rather than
-  // replacing the symlink itself with a regular file.
-  let realFile = await fs.realpath(file).catch(() => file)
-
-  // Start by creating a new file in the current directory that is guaranteed to
-  // be unique (via `uuid`). We can embed the `process.id` in case we need to
-  // debug things later.
-  //
-  // While we can write this to a more global `/tmp` folder, I want to be 100%
-  // sure that we are on the same file system (same drive) so the rename
-  // operation is atomic. Once the file is written, we will rename the file. If
-  // this fails, the old file is still intact, if it works we have an updated
-  // file.
-  //
-  // If this still causes problems (but it will slow things down):
-  // 1. We could make sure that we inherit the file permissions
-  // 2. Use an explicit fsync to force a flush to disk
-  let temporaryFile = path.join(
-    path.dirname(realFile),
-    `.${path.basename(realFile)}.tailwind-upgrade.${process.pid}.${randomUUID()}.tmp`,
-  )
-
-  // Write file uses the `w` flag by default, which is defined as:
-  // > Open file for writing. The file is created (if it does not exist) or truncated (if it exists).
-  // > https://nodejs.org/api/fs.html#file-system-flags
-  //
-  // Which means that if this function is actively running, and you cancel the
-  // process at the wrong time, then the truncated files are present. Since all
-  // these migrations happen in parallel, multiple files are open and available
-  // to be written to, it could mean in multiple truncated files.
-  //
-  // Writing to a temp file first means that if the process is cancelled at this
-  // point, that the old original file is still correct.
-  //
-  // The rename part should be atomic (especially because we guarantee it to be
-  // on the same file system) so this either succeeds or doesn't happen.
-  try {
-    await fs.writeFile(temporaryFile, contents, 'utf8')
-    await fs.rename(temporaryFile, realFile)
-  } catch (error) {
-    await fs.unlink(temporaryFile).catch(() => {})
-    throw error
-  }
-}
diff --git a/packages/@tailwindcss-upgrade/tsconfig.json b/packages/@tailwindcss-upgrade/tsconfig.json
deleted file mode 100644
index c4a3e047a..000000000
--- a/packages/@tailwindcss-upgrade/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-  },
-}
diff --git a/packages/@tailwindcss-upgrade/tsup.config.ts b/packages/@tailwindcss-upgrade/tsup.config.ts
deleted file mode 100644
index 7d82eee2c..000000000
--- a/packages/@tailwindcss-upgrade/tsup.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-  format: ['esm'],
-  clean: true,
-  minify: true,
-  entry: ['src/index.ts'],
-})
diff --git a/packages/@tailwindcss-vite/README.md b/packages/@tailwindcss-vite/README.md
index 1a5d25c73..95ec9d87d 100644
--- a/packages/@tailwindcss-vite/README.md
+++ b/packages/@tailwindcss-vite/README.md
@@ -13,10 +13,10 @@
 </p>
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=next" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
 </p>
 
 ---
@@ -27,50 +27,14 @@ For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
 
 ## Community
 
-For help, discussion about best practices, or feature ideas:
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
 
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
+[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions)
+
+For chatting with others using the framework:
+
+[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
 
 ## Contributing
 
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
-
----
-
-## `@tailwindcss/vite` plugin API
-
-### Enabling or disabling Lightning CSS
-
-By default, this plugin detects whether or not the CSS is being built for production by checking the `NODE_ENV` environment variable. When building for production Lightning CSS will be enabled otherwise it is disabled.
-
-If you want to always enable or disable Lightning CSS the `optimize` option may be used:
-
-```js
-import tailwindcss from '@tailwindcss/vite'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  plugins: [
-    tailwindcss({
-      // Disable Lightning CSS optimization
-      optimize: false,
-    }),
-  ],
-})
-```
-
-It's also possible to keep Lightning CSS enabled but disable minification:
-
-```js
-import tailwindcss from '@tailwindcss/vite'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  plugins: [
-    tailwindcss({
-      // Enable Lightning CSS but disable minification
-      optimize: { minify: false },
-    }),
-  ],
-})
-```
+If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**.
diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json
index 821704a1d..c4634cdda 100644
--- a/packages/@tailwindcss-vite/package.json
+++ b/packages/@tailwindcss-vite/package.json
@@ -1,17 +1,17 @@
 {
   "name": "@tailwindcss/vite",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
+    "url": "git+https://github.com/tailwindlabs/tailwindcss.git",
     "directory": "packages/@tailwindcss-vite"
   },
   "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
   "homepage": "https://tailwindcss.com",
   "scripts": {
-    "build": "tsup-node",
+    "build": "tsup-node ./src/index.ts --format esm --dts --minify --clean",
     "dev": "pnpm run build -- --watch"
   },
   "files": [
@@ -24,19 +24,15 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
+      "import": "./dist/index.mjs"
     }
   },
   "dependencies": {
-    "@tailwindcss/node": "workspace:*",
-    "@tailwindcss/oxide": "workspace:*",
-    "tailwindcss": "workspace:*"
+    "@tailwindcss/oxide": "workspace:^",
+    "tailwindcss": "workspace:^"
   },
   "devDependencies": {
-    "@types/node": "catalog:",
-    "vite": "catalog:"
-  },
-  "peerDependencies": {
-    "vite": "^5.2.0 || ^6 || ^7 || ^8"
+    "@types/node": "^20.11.17",
+    "vite": "^5.0.11"
   }
 }
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index 8fc660eaa..64cfa3036 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -1,543 +1,183 @@
-import {
-  compile,
-  env,
-  Features,
-  Instrumentation,
-  normalizePath,
-  optimize,
-  toSourceMap,
-} from '@tailwindcss/node'
-import { clearRequireCache } from '@tailwindcss/node/require-cache'
-import { Scanner } from '@tailwindcss/oxide'
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import type { Environment, InternalResolveOptions, Plugin, ResolvedConfig } from 'vite'
-import * as vite from 'vite'
+import { IO, Parsing, scanFiles } from '@tailwindcss/oxide'
+import path from 'path'
+import { compile, optimizeCss } from 'tailwindcss'
+import type { Plugin, Update, ViteDevServer } from 'vite'
 
-const DEBUG = env.DEBUG
-const SPECIAL_QUERY_RE = /[?&](?:worker|sharedworker|raw|url)\b/
-const COMMON_JS_PROXY_RE = /\?commonjs-proxy/
-const INLINE_STYLE_ID_RE = /[?&]index=\d+\.css$/
+export default function tailwindcss(): Plugin[] {
+  let server: ViteDevServer | null = null
+  let candidates = new Set<string>()
+  let cssModules = new Set<string>()
+  let minify = false
 
-export type PluginOptions = {
-  /**
-   * Optimize and minify the output CSS.
-   */
-  optimize?: boolean | { minify?: boolean }
-}
-
-function createCustomResolver(
-  resolvers: ((id: string, importer: string) => Promise<string | undefined>)[],
-  filter = (_path: string) => true,
-) {
-  return async (id: string, base: string) => {
-    // The resolver expects an `importer` file. We don't really know where the
-    // current `id` was imported from, but Vite will essentially do a
-    // `path.dirname(importer)` so it doesn't really matter.
-    //
-    // It does matter that this is a file, otherwise we would go up a directory,
-    // which means that we would be resolving files from a parent folder first,
-    // instead of the current folder we are in.
-    let importer = path.resolve(base, '__placeholder__.ts')
-
-    for (let resolver of resolvers) {
-      let resolved = await resolver(id, importer)
-
-      // If we didn't resolve, we don't have to bail immediately, but we can try
-      // the next resolver
-      if (!resolved) continue
-
-      if (resolved === id) continue
-
-      // Looks like a relative file, let's resolve it to an absolute path
-      if (resolved[0] === '.') resolved = path.resolve(base, resolved)
-
-      // Must adhere to additional filters (e.g.: must be a .css file)
-      if (!filter(resolved)) continue
-
-      // If it's not an absolute path, then we don't really know how to read
-      // the file from disk.
-      if (!path.isAbsolute(resolved)) continue
-
-      return resolved
-    }
+  function isCssFile(id: string) {
+    let [filename] = id.split('?', 2)
+    let extension = path.extname(filename).slice(1)
+    return extension === 'css'
   }
-}
 
-export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
-  let config: ResolvedConfig | null = null
-  let rootsByEnv = new DefaultMap<string, Map<string, Root>>((env: string) => new Map())
+  // Trigger update to all css modules
+  function updateCssModules() {
+    // If we're building then we don't need to update anything
+    if (!server) return
 
-  let isSSR = false
-  let shouldOptimize = true
-  let minify = true
-
-  function createRoot(env: Environment | null, id: string) {
-    type ResolveFn = (id: string, base: string) => Promise<string | false | undefined>
-
-    let customCssResolver: ResolveFn
-    let customJsResolver: ResolveFn
-
-    if (!env) {
-      // Older, pre-environment Vite API
-      // TODO: Can we drop this??
-      let cssResolver = config!.createResolver({
-        ...config!.resolve,
-        extensions: ['.css'],
-        mainFields: ['style'],
-        conditions: ['style', 'development|production'],
-        tryIndex: false,
-        preferRelative: true,
-      })
-
-      let jsResolver = config!.createResolver(config!.resolve)
-
-      customCssResolver = createCustomResolver(
-        [
-          (id, importer) => cssResolver(id, importer, true, isSSR),
-          (id, importer) => cssResolver(id, importer, false, isSSR),
-        ],
-        (path) => path.endsWith('.css'),
-      )
-      customJsResolver = createCustomResolver(
-        [
-          (id, importer) => jsResolver(id, importer, true, isSSR),
-          (id, importer) => jsResolver(id, importer, false, isSSR),
-        ],
-        (path) => !path.endsWith('.css'),
-      )
-    } else {
-      type ResolveIdFn = (
-        environment: Environment,
-        id: string,
-        importer?: string,
-        aliasOnly?: boolean,
-      ) => Promise<string | undefined>
-
-      // There are cases where Environment API is available,
-      // but `createResolver` is still overridden (for example astro v5)
-      //
-      // Copied as-is from vite, because this function is not a part of public API
-      //
-      // TODO: Remove this function and pre-environment code when Vite < 7 is no longer supported
-      function createBackCompatIdResolver(
-        config: ResolvedConfig,
-        options?: Partial<InternalResolveOptions>,
-      ): ResolveIdFn {
-        const compatResolve = config.createResolver(options)
-        let resolve: ResolveIdFn
-        return async (environment, id, importer, aliasOnly) => {
-          if (environment.name === 'client' || environment.name === 'ssr') {
-            return compatResolve(id, importer, aliasOnly, environment.name === 'ssr')
-          }
-          resolve ??= vite.createIdResolver(config, options)
-          return resolve(environment, id, importer, aliasOnly)
-        }
+    let updates: Update[] = []
+    for (let id of cssModules.values()) {
+      let cssModule = server.moduleGraph.getModuleById(id)
+      if (!cssModule) {
+        // It is safe to remove the item here since we're iterating on a copy of
+        // the values.
+        cssModules.delete(id)
+        continue
       }
 
-      // Newer Vite versions
-      let cssResolver = createBackCompatIdResolver(env.config, {
-        ...env.config.resolve,
-        extensions: ['.css'],
-        mainFields: ['style'],
-        conditions: ['style', 'development|production'],
-        tryIndex: false,
-        preferRelative: true,
+      server.moduleGraph.invalidateModule(cssModule)
+      updates.push({
+        type: `${cssModule.type}-update`,
+        path: cssModule.url,
+        acceptedPath: cssModule.url,
+        timestamp: Date.now(),
       })
-
-      let jsResolver = createBackCompatIdResolver(env.config, env.config.resolve)
-
-      customCssResolver = createCustomResolver(
-        [
-          (id, importer) => cssResolver(env, id, importer, true),
-          (id, importer) => cssResolver(env, id, importer, false),
-        ],
-        (path) => path.endsWith('.css'),
-      )
-      customJsResolver = createCustomResolver(
-        [
-          (id, importer) => jsResolver(env, id, importer, true),
-          (id, importer) => jsResolver(env, id, importer, false),
-        ],
-        (path) => !path.endsWith('.css'),
-      )
     }
 
-    return new Root(
-      id,
-      config!.root,
-      // Currently, Vite only supports CSS source maps in development and they
-      // are off by default. Check to see if we need them or not.
-      config?.css.devSourcemap ?? false,
-      customCssResolver,
-      customJsResolver,
-    )
+    if (updates.length > 0) {
+      server.hot.send({ type: 'update', updates })
+    }
   }
 
+  function scan(src: string, extension: string) {
+    let updated = false
+    // Parse all candidates given the resolved files
+    for (let candidate of scanFiles(
+      [{ content: src, extension }],
+      IO.Sequential | Parsing.Sequential,
+    )) {
+      // On an initial or full build, updated becomes true immediately so we
+      // won't be making extra checks.
+      if (!updated) {
+        if (candidates.has(candidate)) continue
+        updated = true
+      }
+      candidates.add(candidate)
+    }
+    return updated
+  }
+
+  function generateCss(css: string) {
+    return compile(css).build(Array.from(candidates))
+  }
+
+  function generateOptimizedCss(css: string) {
+    return optimizeCss(generateCss(css), { minify })
+  }
+
+  // In dev mode, there isn't a hook to signal that we've seen all files. We use
+  // a timer, resetting it on each file seen, and trigger CSS generation when we
+  // haven't seen any new files after a timeout. If this triggers too early,
+  // there will be a FOOC and but CSS will regenerate after we've seen more files.
+  let initialScan = (() => {
+    // If too short, we're more likely to trigger a FOOC and generate CSS
+    // multiple times. If too long, we delay dev builds.
+    let delayInMs = 50
+
+    let timer: ReturnType<typeof setTimeout>
+    let resolve: () => void
+    let resolved = false
+
+    return {
+      tick() {
+        if (resolved) return
+        timer && clearTimeout(timer)
+        timer = setTimeout(resolve, delayInMs)
+      },
+
+      complete: new Promise<void>((_resolve) => {
+        resolve = () => {
+          resolved = true
+          _resolve()
+        }
+      }),
+    }
+  })()
+
   return [
     {
       // Step 1: Scan source files for candidates
       name: '@tailwindcss/vite:scan',
       enforce: 'pre',
 
-      async configResolved(_config) {
-        config = _config
-        isSSR = config.build.ssr !== false && config.build.ssr !== undefined
+      configureServer(_server) {
+        server = _server
+      },
 
-        // By default we optimize CSS during the build phase but if the user
-        // provides explicit options we'll use those instead
-        if (opts.optimize !== undefined) {
-          shouldOptimize = opts.optimize !== false
+      async configResolved(config) {
+        minify = config.build.cssMinify !== false
+      },
+
+      // Scan index.html for candidates
+      transformIndexHtml(html) {
+        initialScan.tick()
+        let updated = scan(html, 'html')
+
+        // In dev mode, if the generated CSS contains a URL that causes the
+        // browser to load a page (e.g. an URL to a missing image), triggering a
+        // CSS update will cause an infinite loop. We only trigger if the
+        // candidates have been updated.
+        if (server && updated) {
+          updateCssModules()
         }
+      },
 
-        // Minification is also performed when optimizing as long as it's also
-        // enabled in Vite
-        minify = shouldOptimize && config.build.cssMinify !== false
+      // Scan all other files for candidates
+      transform(src, id) {
+        initialScan.tick()
+        if (id.includes('/.vite/')) return
+        let [filename] = id.split('?', 2)
+        let extension = path.extname(filename).slice(1)
+        if (extension === '' || extension === 'css') return
 
-        // But again, the user can override that choice explicitly
-        if (typeof opts.optimize === 'object') {
-          minify = opts.optimize.minify !== false
+        scan(src, extension)
+
+        if (server) {
+          updateCssModules()
         }
       },
     },
 
     {
-      // Step 2 (serve mode): Generate CSS
+      // Step 2 (dev mode): Generate CSS
       name: '@tailwindcss/vite:generate:serve',
       apply: 'serve',
-      enforce: 'pre',
-      transform: {
-        filter: {
-          id: {
-            exclude: [/\/\.vite\//, SPECIAL_QUERY_RE, COMMON_JS_PROXY_RE],
-            include: [/\.css(?:\?.*)?$/, /&lang\.css/, INLINE_STYLE_ID_RE],
-          },
-        },
-        async handler(src, id) {
-          if (!isPotentialCssRootFile(id)) return
+      async transform(src, id) {
+        if (!isCssFile(id) || !src.includes('@tailwind')) return
 
-          using I = new Instrumentation()
-          DEBUG && I.start('[@tailwindcss/vite] Generate CSS (serve)')
+        cssModules.add(id)
 
-          let roots = rootsByEnv.get(this.environment?.name ?? 'default')
-          let root = roots.get(id)
-          if (!root) {
-            root ??= createRoot(this.environment ?? null, id)
-            roots.set(id, root)
-          }
+        // For the initial load we must wait for all source files to be scanned
+        await initialScan.complete
 
-          let result = await root.generate(src, (file) => this.addWatchFile(file), I)
-          if (!result) {
-            roots.delete(id)
-            return
-          }
-
-          DEBUG && I.end('[@tailwindcss/vite] Generate CSS (serve)')
-          return result
-        },
+        return { code: generateCss(src) }
       },
     },
 
     {
       // Step 2 (full build): Generate CSS
       name: '@tailwindcss/vite:generate:build',
+      enforce: 'post',
       apply: 'build',
-      enforce: 'pre',
-      transform: {
-        filter: {
-          id: {
-            exclude: [/\/\.vite\//, SPECIAL_QUERY_RE, COMMON_JS_PROXY_RE],
-            include: [/\.css(?:\?.*)?$/, /&lang\.css/, INLINE_STYLE_ID_RE],
-          },
-        },
-        async handler(src, id) {
-          if (!isPotentialCssRootFile(id)) return
+      generateBundle(_options, bundle) {
+        for (let id in bundle) {
+          let item = bundle[id]
+          if (item.type !== 'asset') continue
+          if (!isCssFile(id)) continue
+          let rawSource = item.source
+          let source =
+            rawSource instanceof Uint8Array ? new TextDecoder().decode(rawSource) : rawSource
 
-          using I = new Instrumentation()
-          DEBUG && I.start('[@tailwindcss/vite] Generate CSS (build)')
-
-          let roots = rootsByEnv.get(this.environment?.name ?? 'default')
-          let root = roots.get(id)
-          if (!root) {
-            root ??= createRoot(this.environment ?? null, id)
-            roots.set(id, root)
+          if (source.includes('@tailwind')) {
+            item.source = generateOptimizedCss(source)
           }
-
-          let result = await root.generate(src, (file) => this.addWatchFile(file), I)
-          if (!result) {
-            roots.delete(id)
-            return
-          }
-          DEBUG && I.end('[@tailwindcss/vite] Generate CSS (build)')
-
-          if (shouldOptimize) {
-            DEBUG && I.start('[@tailwindcss/vite] Optimize CSS')
-            result = optimize(result.code, {
-              minify,
-              map: result.map,
-            })
-            DEBUG && I.end('[@tailwindcss/vite] Optimize CSS')
-          }
-
-          return result
-        },
+        }
       },
     },
   ] satisfies Plugin[]
 }
-
-function getExtension(id: string) {
-  let [filename] = id.split('?', 2)
-  return path.extname(filename).slice(1)
-}
-
-function isPotentialCssRootFile(id: string) {
-  if (id.includes('/.vite/')) return false
-
-  // Don't intercept special static asset resources
-  if (SPECIAL_QUERY_RE.test(id)) return false
-  if (COMMON_JS_PROXY_RE.test(id)) return false
-
-  let extension = getExtension(id)
-  let isCssFile = extension === 'css' || id.includes('&lang.css') || id.match(INLINE_STYLE_ID_RE)
-
-  return isCssFile
-}
-
-function idToPath(id: string) {
-  return path.resolve(id.replace(/\?.*$/, ''))
-}
-
-/**
- * A Map that can generate default values for keys that don't exist.
- * Generated default values are added to the map to avoid recomputation.
- */
-class DefaultMap<K, V> extends Map<K, V> {
-  constructor(private factory: (key: K, self: DefaultMap<K, V>) => V) {
-    super()
-  }
-
-  get(key: K): V {
-    let value = super.get(key)
-
-    if (value === undefined) {
-      value = this.factory(key, this)
-      this.set(key, value)
-    }
-
-    return value
-  }
-}
-
-class Root {
-  // The lazily-initialized Tailwind compiler components. These are persisted
-  // throughout rebuilds but will be re-initialized if the rebuild strategy is
-  // set to `full`.
-  private compiler?: Awaited<ReturnType<typeof compile>>
-
-  // The lazily-initialized Tailwind scanner.
-  private scanner?: Scanner
-
-  // List of all candidates that were being returned by the root scanner during
-  // the lifetime of the root.
-  private candidates: Set<string> = new Set<string>()
-
-  // List of all build dependencies (e.g. imported  stylesheets or plugins) and
-  // their last modification timestamp. If no mtime can be found, we need to
-  // assume the file has always changed.
-  private buildDependencies = new Map<string, number | null>()
-
-  constructor(
-    private id: string,
-    private base: string,
-
-    private enableSourceMaps: boolean,
-    private customCssResolver: (id: string, base: string) => Promise<string | false | undefined>,
-    private customJsResolver: (id: string, base: string) => Promise<string | false | undefined>,
-  ) {}
-
-  // Generate the CSS for the root file. This can return false if the file is
-  // not considered a Tailwind root. When this happened, the root can be GCed.
-  public async generate(
-    content: string,
-    _addWatchFile: (file: string) => void,
-    I: Instrumentation,
-  ): Promise<
-    | {
-        code: string
-        map: string | undefined
-      }
-    | false
-  > {
-    let inputPath = idToPath(this.id)
-
-    function addWatchFile(file: string) {
-      // Don't watch the input file since it's already a dependency and causes
-      // issues with some setups (e.g. Qwik).
-      if (file === inputPath) {
-        return
-      }
-
-      // Scanning `.svg` file containing a `#` or `?` in the path will
-      // crash Vite. We work around this for now by ignoring updates to them.
-      //
-      // https://github.com/tailwindlabs/tailwindcss/issues/16877
-      if (/[#?].*\.svg$/.test(file)) {
-        return
-      }
-      _addWatchFile(file)
-    }
-
-    let requiresBuildPromise = this.requiresBuild()
-    let inputBase = path.dirname(path.resolve(inputPath))
-
-    if (!this.compiler || !this.scanner || (await requiresBuildPromise)) {
-      clearRequireCache(Array.from(this.buildDependencies.keys()))
-      this.buildDependencies.clear()
-
-      this.addBuildDependency(idToPath(inputPath))
-
-      DEBUG && I.start('Setup compiler')
-      let addBuildDependenciesPromises: Promise<void>[] = []
-      this.compiler = await compile(content, {
-        from: this.enableSourceMaps ? this.id : undefined,
-        base: inputBase,
-        shouldRewriteUrls: true,
-        onDependency: (path) => {
-          addWatchFile(path)
-          addBuildDependenciesPromises.push(this.addBuildDependency(path))
-        },
-
-        customCssResolver: this.customCssResolver,
-        customJsResolver: this.customJsResolver,
-      })
-      await Promise.all(addBuildDependenciesPromises)
-      DEBUG && I.end('Setup compiler')
-
-      DEBUG && I.start('Setup scanner')
-
-      let sources = (() => {
-        // Disable auto source detection
-        if (this.compiler.root === 'none') {
-          return []
-        }
-
-        // No root specified, auto-detect based on the `**/*` pattern
-        if (this.compiler.root === null) {
-          return [{ base: this.base, pattern: '**/*', negated: false }]
-        }
-
-        // Use the specified root
-        return [{ ...this.compiler.root, negated: false }]
-      })().concat(this.compiler.sources)
-
-      this.scanner = new Scanner({ sources })
-      DEBUG && I.end('Setup scanner')
-    } else {
-      for (let buildDependency of this.buildDependencies.keys()) {
-        addWatchFile(buildDependency)
-      }
-    }
-
-    if (
-      !(
-        this.compiler.features &
-        (Features.AtApply |
-          Features.JsPluginCompat |
-          Features.ThemeFunction |
-          Features.Utilities |
-          Features.Variants)
-      )
-    ) {
-      return false
-    }
-
-    if (this.compiler.features & Features.Utilities) {
-      // This should not be here, but right now the Vite plugin is setup where we
-      // setup a new scanner and compiler every time we request the CSS file
-      // (regardless whether it actually changed or not).
-      DEBUG && I.start('Scan for candidates')
-      for (let candidate of this.scanner.scan()) {
-        this.candidates.add(candidate)
-      }
-      DEBUG && I.end('Scan for candidates')
-    }
-
-    if (this.compiler.features & Features.Utilities) {
-      DEBUG && I.start('Register dependency messages')
-      // Watch individual files found via custom `@source` paths
-      for (let file of this.scanner.files) {
-        addWatchFile(file)
-      }
-
-      // Watch globs found via custom `@source` paths
-      for (let glob of this.scanner.globs) {
-        if (glob.pattern[0] === '!') continue
-
-        let relative = path.relative(this.base, glob.base)
-        if (relative[0] !== '.') {
-          relative = './' + relative
-        }
-        // Ensure relative is a posix style path since we will merge it with the
-        // glob.
-        relative = normalizePath(relative)
-
-        addWatchFile(path.posix.join(relative, glob.pattern))
-
-        let root = this.compiler.root
-
-        if (root !== 'none' && root !== null) {
-          let basePath = normalizePath(path.resolve(root.base, root.pattern))
-
-          let isDir = await fs.stat(basePath).then(
-            (stats) => stats.isDirectory(),
-            () => false,
-          )
-
-          if (!isDir) {
-            throw new Error(
-              `The path given to \`source(…)\` must be a directory but got \`source(${basePath})\` instead.`,
-            )
-          }
-        }
-      }
-      DEBUG && I.end('Register dependency messages')
-    }
-
-    DEBUG && I.start('Build CSS')
-    let code = this.compiler.build([...this.candidates])
-    DEBUG && I.end('Build CSS')
-
-    DEBUG && I.start('Build Source Map')
-    let map = this.enableSourceMaps ? toSourceMap(this.compiler.buildSourceMap()).raw : undefined
-    DEBUG && I.end('Build Source Map')
-
-    return {
-      code,
-      map,
-    }
-  }
-
-  private async addBuildDependency(path: string) {
-    let mtime: number | null = null
-    try {
-      mtime = (await fs.stat(path)).mtimeMs
-    } catch {}
-    this.buildDependencies.set(path, mtime)
-  }
-
-  private async requiresBuild(): Promise<boolean> {
-    for (let [path, mtime] of this.buildDependencies) {
-      if (mtime === null) return true
-      try {
-        let stat = await fs.stat(path)
-        if (stat.mtimeMs > mtime) {
-          return true
-        }
-      } catch {
-        return true
-      }
-    }
-    return false
-  }
-}
diff --git a/packages/@tailwindcss-vite/tsup.config.ts b/packages/@tailwindcss-vite/tsup.config.ts
deleted file mode 100644
index 85bf3149d..000000000
--- a/packages/@tailwindcss-vite/tsup.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-  format: ['esm'],
-  clean: true,
-  minify: true,
-  dts: true,
-  entry: ['src/index.ts'],
-})
diff --git a/packages/@tailwindcss-webpack/README.md b/packages/@tailwindcss-webpack/README.md
deleted file mode 100644
index 56484ed7f..000000000
--- a/packages/@tailwindcss-webpack/README.md
+++ /dev/null
@@ -1,102 +0,0 @@
-<p align="center">
-  <a href="https://tailwindcss.com" target="_blank">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
-      <img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
-    </picture>
-  </a>
-</p>
-
-<p align="center">
-  A utility-first CSS framework for rapidly building custom user interfaces.
-</p>
-
-<p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
-    <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
-</p>
-
----
-
-## Documentation
-
-For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
-
-## Community
-
-For help, discussion about best practices, or feature ideas:
-
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
-
-## Contributing
-
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
-
----
-
-## @tailwindcss/webpack
-
-A webpack loader for Tailwind CSS v4.
-
-## Installation
-
-```sh
-npm install @tailwindcss/webpack
-```
-
-### Usage
-
-```javascript
-// webpack.config.js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-module.exports = {
-  plugins: [new MiniCssExtractPlugin()],
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'],
-      },
-    ],
-  },
-}
-```
-
-Then create a CSS file that imports Tailwind:
-
-```css
-/* src/index.css */
-@import 'tailwindcss';
-```
-
-### Options
-
-#### `base`
-
-The base directory to scan for class candidates. Defaults to the current working directory.
-
-```javascript
-{
-  loader: '@tailwindcss/webpack',
-  options: {
-    base: process.cwd(),
-  },
-}
-```
-
-#### `optimize`
-
-Whether to optimize and minify the output CSS. Defaults to `true` in production mode.
-
-```javascript
-{
-  loader: '@tailwindcss/webpack',
-  options: {
-    optimize: true, // or { minify: true }
-  },
-}
-```
diff --git a/packages/@tailwindcss-webpack/package.json b/packages/@tailwindcss-webpack/package.json
deleted file mode 100644
index dce09429d..000000000
--- a/packages/@tailwindcss-webpack/package.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "name": "@tailwindcss/webpack",
-  "version": "4.3.3",
-  "description": "A webpack loader for Tailwind CSS v4.",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "packages/@tailwindcss-webpack"
-  },
-  "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
-  "homepage": "https://tailwindcss.com",
-  "scripts": {
-    "build": "tsup-node",
-    "dev": "pnpm run build -- --watch"
-  },
-  "files": [
-    "dist/"
-  ],
-  "publishConfig": {
-    "provenance": true,
-    "access": "public"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
-  },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "dependencies": {
-    "@alloc/quick-lru": "^5.2.0",
-    "@tailwindcss/node": "workspace:*",
-    "@tailwindcss/oxide": "workspace:*",
-    "tailwindcss": "workspace:*"
-  },
-  "devDependencies": {
-    "@types/node": "catalog:",
-    "webpack": "catalog:"
-  },
-  "peerDependencies": {
-    "@rspack/core": "^1.0.0 || ^2.0.0",
-    "webpack": "^5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@rspack/core": {
-      "optional": true
-    },
-    "webpack": {
-      "optional": true
-    }
-  }
-}
diff --git a/packages/@tailwindcss-webpack/src/index.cts b/packages/@tailwindcss-webpack/src/index.cts
deleted file mode 100644
index dbdded748..000000000
--- a/packages/@tailwindcss-webpack/src/index.cts
+++ /dev/null
@@ -1,5 +0,0 @@
-import tailwindLoader from './index.ts'
-
-// CommonJS export for webpack loaders - must be the function directly
-// @ts-ignore
-export = tailwindLoader
diff --git a/packages/@tailwindcss-webpack/src/index.ts b/packages/@tailwindcss-webpack/src/index.ts
deleted file mode 100644
index 6d02f1f0b..000000000
--- a/packages/@tailwindcss-webpack/src/index.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-import QuickLRU from '@alloc/quick-lru'
-import {
-  compile,
-  env,
-  Features,
-  Instrumentation,
-  normalizePath,
-  optimize,
-  Polyfills,
-} from '@tailwindcss/node'
-import { clearRequireCache } from '@tailwindcss/node/require-cache'
-import { Scanner } from '@tailwindcss/oxide'
-import fs from 'node:fs'
-import path from 'node:path'
-import type { LoaderContext } from 'webpack'
-
-const DEBUG = env.DEBUG
-
-export interface LoaderOptions {
-  /**
-   * The base directory to scan for class candidates.
-   *
-   * Defaults to the current working directory.
-   */
-  base?: string
-
-  /**
-   * Optimize and minify the output CSS.
-   */
-  optimize?: boolean | { minify?: boolean }
-}
-
-interface CacheEntry {
-  mtimes: Map<string, number>
-  compiler: null | Awaited<ReturnType<typeof compile>>
-  scanner: null | Scanner
-  candidates: Set<string>
-  fullRebuildPaths: string[]
-}
-
-const cache = new QuickLRU<string, CacheEntry>({ maxSize: 50 })
-
-function getCacheKey(resourceId: string, opts: LoaderOptions): string {
-  return `${resourceId}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}`
-}
-
-function getContextFromCache(resourceId: string, opts: LoaderOptions): CacheEntry {
-  let key = getCacheKey(resourceId, opts)
-  if (cache.has(key)) return cache.get(key)!
-  let entry: CacheEntry = {
-    mtimes: new Map<string, number>(),
-    compiler: null,
-    scanner: null,
-    candidates: new Set<string>(),
-    fullRebuildPaths: [],
-  }
-  cache.set(key, entry)
-  return entry
-}
-
-export default async function tailwindLoader(
-  this: LoaderContext<LoaderOptions>,
-  source: string,
-): Promise<void> {
-  let callback = this.async()
-  let options = this.getOptions() ?? {}
-  let inputFile = this.resourcePath
-  let resourceId = this.resource
-  let base = options.base ?? process.cwd()
-  let shouldOptimize = options.optimize ?? process.env.NODE_ENV === 'production'
-  let isCSSModuleFile = inputFile.endsWith('.module.css')
-
-  using I = new Instrumentation()
-
-  DEBUG && I.start(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
-
-  // Bail out early if this is guaranteed to be a non-Tailwind CSS file.
-  {
-    DEBUG && I.start('Quick bail check')
-    let canBail = !/@(import|reference|theme|variant|config|plugin|apply|tailwind)\b/.test(source)
-    if (canBail) {
-      DEBUG && I.end('Quick bail check')
-      DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
-      callback(null, source)
-      return
-    }
-    DEBUG && I.end('Quick bail check')
-  }
-
-  try {
-    let context = getContextFromCache(resourceId, options)
-    let inputBasePath = path.dirname(path.resolve(inputFile))
-
-    // Whether this is the first build or not
-    let isInitialBuild = context.compiler === null
-
-    async function createCompiler() {
-      DEBUG && I.start('Setup compiler')
-      if (context.fullRebuildPaths.length > 0 && !isInitialBuild) {
-        clearRequireCache(context.fullRebuildPaths)
-      }
-
-      context.fullRebuildPaths = []
-
-      DEBUG && I.start('Create compiler')
-      let compiler = await compile(source, {
-        from: inputFile,
-        base: inputBasePath,
-        shouldRewriteUrls: true,
-        onDependency: (depPath) => context.fullRebuildPaths.push(depPath),
-        // In CSS Module files, we have to disable the `@property` polyfill since these will
-        // emit global `*` rules which are considered to be non-pure and will cause builds
-        // to fail.
-        polyfills: isCSSModuleFile ? Polyfills.All ^ Polyfills.AtProperty : Polyfills.All,
-      })
-      DEBUG && I.end('Create compiler')
-
-      DEBUG && I.end('Setup compiler')
-      return compiler
-    }
-
-    // Setup the compiler if it doesn't exist yet
-    context.compiler ??= await createCompiler()
-
-    // Early exit if no Tailwind features are used
-    if (context.compiler.features === Features.None) {
-      DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
-      callback(null, source)
-      return
-    }
-
-    let rebuildStrategy: 'full' | 'incremental' = 'incremental'
-
-    // Track file modification times to CSS files
-    DEBUG && I.start('Register full rebuild paths')
-    {
-      // Report dependencies for config files, plugins, etc.
-      for (let file of context.fullRebuildPaths) {
-        this.addDependency(path.resolve(file))
-      }
-
-      let files = [...context.fullRebuildPaths, inputFile]
-
-      for (let file of files) {
-        let changedTime: number | null = null
-        try {
-          changedTime = fs.statSync(file)?.mtimeMs ?? null
-        } catch {
-          // File might not exist
-        }
-
-        if (changedTime === null) {
-          if (file === inputFile) {
-            rebuildStrategy = 'full'
-          }
-          continue
-        }
-
-        let prevTime = context.mtimes.get(file)
-        if (prevTime === changedTime) continue
-
-        rebuildStrategy = 'full'
-        context.mtimes.set(file, changedTime)
-      }
-    }
-    DEBUG && I.end('Register full rebuild paths')
-
-    if (rebuildStrategy === 'full' && !isInitialBuild) {
-      context.compiler = await createCompiler()
-    }
-
-    let compiler = context.compiler
-
-    // Check if we need to process this file at all
-    if (
-      !(
-        compiler.features &
-        (Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
-      )
-    ) {
-      DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
-      callback(null, source)
-      return
-    }
-
-    // Setup or update scanner if needed
-    if (context.scanner === null || rebuildStrategy === 'full') {
-      DEBUG && I.start('Setup scanner')
-      let sources = (() => {
-        // Disable auto source detection
-        if (compiler.root === 'none') {
-          return []
-        }
-
-        // No root specified, use the base directory
-        if (compiler.root === null) {
-          return [{ base, pattern: '**/*', negated: false }]
-        }
-
-        // Use the specified root
-        return [{ ...compiler.root, negated: false }]
-      })().concat(compiler.sources)
-
-      context.scanner = new Scanner({ sources })
-      DEBUG && I.end('Setup scanner')
-    }
-
-    // Scan for candidates if utilities are used
-    if (compiler.features & Features.Utilities) {
-      DEBUG && I.start('Scan for candidates')
-      for (let candidate of context.scanner.scan()) {
-        context.candidates.add(candidate)
-      }
-      DEBUG && I.end('Scan for candidates')
-
-      DEBUG && I.start('Register dependency messages')
-      // Add all found files as direct dependencies
-      let resolvedInputFile = path.resolve(base, inputFile)
-      for (let file of context.scanner.files) {
-        let absolutePath = path.resolve(file)
-        // The CSS file cannot be a dependency of itself
-        if (absolutePath === resolvedInputFile) {
-          continue
-        }
-        this.addDependency(absolutePath)
-      }
-
-      // Register context dependencies for glob patterns
-      for (let glob of context.scanner.globs) {
-        // Skip negated patterns
-        if (glob.pattern[0] === '!') continue
-
-        // Avoid adding a dependency on the base directory itself
-        if (glob.pattern === '*' && base === glob.base) {
-          continue
-        }
-
-        this.addContextDependency(path.resolve(glob.base))
-      }
-
-      // Validate that source(...) paths are directories
-      let root = compiler.root
-      if (root !== 'none' && root !== null) {
-        let basePath = normalizePath(path.resolve(root.base, root.pattern))
-        try {
-          let stats = fs.statSync(basePath)
-          if (!stats.isDirectory()) {
-            throw new Error(
-              `The path given to \`source(…)\` must be a directory but got \`source(${basePath})\` instead.`,
-            )
-          }
-        } catch (err) {
-          if ((err as NodeJS.ErrnoException).code !== 'ENOENT') {
-            throw err
-          }
-          // Directory doesn't exist yet, which is fine
-        }
-      }
-      DEBUG && I.end('Register dependency messages')
-    }
-
-    DEBUG && I.start('Build utilities')
-    let css = compiler.build([...context.candidates])
-    DEBUG && I.end('Build utilities')
-
-    // Optionally optimize the output
-    let result = css
-    if (shouldOptimize) {
-      DEBUG && I.start('Optimization')
-      let optimized = optimize(css, {
-        minify: typeof shouldOptimize === 'object' ? shouldOptimize.minify : true,
-      })
-      result = optimized.code
-      DEBUG && I.end('Optimization')
-    }
-
-    DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
-    callback(null, result)
-  } catch (error) {
-    // Clear the cache entry on error to force a full rebuild next time
-    let key = getCacheKey(resourceId, options)
-    cache.delete(key)
-
-    DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`)
-    callback(error as Error)
-  }
-}
diff --git a/packages/@tailwindcss-webpack/tsconfig.json b/packages/@tailwindcss-webpack/tsconfig.json
deleted file mode 100644
index d2131cbeb..000000000
--- a/packages/@tailwindcss-webpack/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "verbatimModuleSyntax": false,
-  },
-}
diff --git a/packages/@tailwindcss-webpack/tsup.config.ts b/packages/@tailwindcss-webpack/tsup.config.ts
deleted file mode 100644
index 998eebe4f..000000000
--- a/packages/@tailwindcss-webpack/tsup.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig([
-  {
-    format: ['esm'],
-    clean: true,
-    minify: true,
-    cjsInterop: true,
-    dts: true,
-    entry: ['src/index.ts'],
-  },
-  {
-    format: ['cjs'],
-    minify: true,
-    cjsInterop: true,
-    dts: true,
-    entry: ['src/index.cts'],
-  },
-])
diff --git a/packages/internal-example-plugin/index.js b/packages/internal-example-plugin/index.js
deleted file mode 100644
index 085212671..000000000
--- a/packages/internal-example-plugin/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = function ({ addVariant }) {
-  addVariant('inverted', '@media (inverted-colors: inverted)')
-  addVariant('hocus', ['&:focus', '&:hover'])
-}
diff --git a/packages/internal-example-plugin/package.json b/packages/internal-example-plugin/package.json
deleted file mode 100644
index cf0dbe5a8..000000000
--- a/packages/internal-example-plugin/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "internal-example-plugin",
-  "version": "0.0.0",
-  "private": true,
-  "main": "index.js"
-}
diff --git a/packages/tailwindcss/README.md b/packages/tailwindcss/README.md
index 5f532607d..95ec9d87d 100644
--- a/packages/tailwindcss/README.md
+++ b/packages/tailwindcss/README.md
@@ -13,10 +13,10 @@
 </p>
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=main" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=next" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
+    <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
 </p>
 
 ---
@@ -27,10 +27,14 @@ For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
 
 ## Community
 
-For help, discussion about best practices, or feature ideas:
+For help, discussion about best practices, or any other conversation that would benefit from being searchable:
 
-[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
+[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions)
+
+For chatting with others using the framework:
+
+[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
 
 ## Contributing
 
-If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
+If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**.
diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json
index d1288d6fa..59556e921 100644
--- a/packages/tailwindcss/package.json
+++ b/packages/tailwindcss/package.json
@@ -1,13 +1,9 @@
 {
   "name": "tailwindcss",
-  "version": "4.3.3",
+  "version": "0.0.0-internal.b2586d4e",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tailwindlabs/tailwindcss.git",
-    "directory": "packages/tailwindcss"
-  },
+  "repository": "https://github.com/tailwindlabs/tailwindcss.git",
   "bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
   "homepage": "https://tailwindcss.com",
   "scripts": {
@@ -23,38 +19,6 @@
       "require": "./dist/lib.js",
       "import": "./src/index.ts"
     },
-    "./colors": {
-      "require": "./src/compat/colors.cts",
-      "import": "./src/compat/colors.ts"
-    },
-    "./colors.js": {
-      "require": "./src/compat/colors.cts",
-      "import": "./src/compat/colors.ts"
-    },
-    "./lib/util/flattenColorPalette": {
-      "require": "./src/compat/flatten-color-palette.cts",
-      "import": "./src/compat/flatten-color-palette.ts"
-    },
-    "./lib/util/flattenColorPalette.js": {
-      "require": "./src/compat/flatten-color-palette.cts",
-      "import": "./src/compat/flatten-color-palette.ts"
-    },
-    "./defaultTheme": {
-      "require": "./src/compat/default-theme.cts",
-      "import": "./src/compat/default-theme.ts"
-    },
-    "./defaultTheme.js": {
-      "require": "./src/compat/default-theme.cts",
-      "import": "./src/compat/default-theme.ts"
-    },
-    "./plugin": {
-      "require": "./src/plugin.cts",
-      "import": "./src/plugin.ts"
-    },
-    "./plugin.js": {
-      "require": "./src/plugin.cts",
-      "import": "./src/plugin.ts"
-    },
     "./package.json": "./package.json",
     "./index.css": "./index.css",
     "./index": "./index.css",
@@ -75,38 +39,6 @@
         "require": "./dist/lib.js",
         "import": "./dist/lib.mjs"
       },
-      "./plugin": {
-        "require": "./dist/plugin.js",
-        "import": "./dist/plugin.mjs"
-      },
-      "./plugin.js": {
-        "require": "./dist/plugin.js",
-        "import": "./dist/plugin.mjs"
-      },
-      "./defaultTheme": {
-        "require": "./dist/default-theme.js",
-        "import": "./dist/default-theme.mjs"
-      },
-      "./defaultTheme.js": {
-        "require": "./dist/default-theme.js",
-        "import": "./dist/default-theme.mjs"
-      },
-      "./colors": {
-        "require": "./dist/colors.js",
-        "import": "./dist/colors.mjs"
-      },
-      "./colors.js": {
-        "require": "./dist/colors.js",
-        "import": "./dist/colors.mjs"
-      },
-      "./lib/util/flattenColorPalette": {
-        "require": "./dist/flatten-color-palette.js",
-        "import": "./dist/flatten-color-palette.mjs"
-      },
-      "./lib/util/flattenColorPalette.js": {
-        "require": "./dist/flatten-color-palette.js",
-        "import": "./dist/flatten-color-palette.mjs"
-      },
       "./package.json": "./package.json",
       "./index.css": "./index.css",
       "./index": "./index.css",
@@ -126,13 +58,11 @@
     "theme.css",
     "utilities.css"
   ],
+  "dependencies": {
+    "lightningcss": "^1.24.0"
+  },
   "devDependencies": {
-    "@jridgewell/remapping": "^2.3.5",
     "@tailwindcss/oxide": "workspace:^",
-    "@types/node": "catalog:",
-    "dedent": "catalog:",
-    "lightningcss": "catalog:",
-    "magic-string": "^1.1.0",
-    "source-map-js": "^1.2.1"
+    "@types/node": "^20.10.8"
   }
 }
diff --git a/packages/tailwindcss/playwright.config.ts b/packages/tailwindcss/playwright.config.ts
index ba8f95d70..1022c63fe 100644
--- a/packages/tailwindcss/playwright.config.ts
+++ b/packages/tailwindcss/playwright.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html', { open: 'never' }]],
+  reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -36,38 +36,10 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-    // Playwright 1.60's Windows WebKit worker hangs on shutdown after all tests
-    // pass, causing CI to fail with a worker force-kill error.
-    ...(process.platform === 'win32'
-      ? []
-      : [{ name: 'webkit', use: { ...devices['Desktop Safari'] } }]),
+
     {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-        // https://playwright.dev/docs/test-use-options#more-browser-and-context-options
-        launchOptions: {
-          // https://playwright.dev/docs/api/class-browsertype#browser-type-launch-option-firefox-user-prefs
-          firefoxUserPrefs: {
-            // By default, headless Firefox runs as though no pointers
-            // capabilities are available.
-            // https://github.com/microsoft/playwright/issues/7769#issuecomment-966098074
-            //
-            // This impacts our `hover` variant implementation which uses an
-            // '(hover: hover)' media query to determine if hover is available.
-            //
-            // Available values for pointer capabilities:
-            // NO_POINTER            = 0x00;
-            // COARSE_POINTER        = 0x01;
-            // FINE_POINTER          = 0x02;
-            // HOVER_CAPABLE_POINTER = 0x04;
-            //
-            // Setting to 0x02 | 0x04 says the system supports a mouse
-            'ui.primaryPointerCapabilities': 0x02 | 0x04,
-            'ui.allPointerCapabilities': 0x02 | 0x04,
-          },
-        },
-      },
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
     },
 
     /* Test against mobile viewports. */
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 04e87905c..82a8bb58b 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -8,6 +8,7 @@
 ::after,
 ::before,
 ::backdrop,
+::first-letter,
 ::file-selector-button {
   box-sizing: border-box; /* 1 */
   margin: 0; /* 2 */
@@ -30,26 +31,29 @@ html,
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   tab-size: 4; /* 3 */
-  font-family: --theme(
+  font-family: var(
     --default-font-family,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    'Noto Sans',
-    Arial,
+    ui-sans-serif,
+    system-ui,
     sans-serif,
     'Apple Color Emoji',
     'Segoe UI Emoji',
     'Segoe UI Symbol',
     'Noto Color Emoji'
   ); /* 4 */
-  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
-  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
+  font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
+  font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
+/*
+  Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  line-height: inherit;
+}
+
 /*
   1. Add the correct height in Firefox.
   2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
@@ -115,7 +119,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: --theme(
+  font-family: var(
     --default-mono-font-family,
     ui-monospace,
     SFMono-Regular,
@@ -125,9 +129,9 @@ pre {
     'Liberation Mono',
     'Courier New',
     monospace
-  ); /* 1 */
-  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
-  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
+  ); /* 4 */
+  font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 5 */
+  font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 6 */
   font-size: 1em; /* 4 */
 }
 
@@ -171,14 +175,59 @@ table {
   border-collapse: collapse; /* 3 */
 }
 
+/*
+  1. Inherit the font styles in all browsers.
+  2. Remove the default background color.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea,
+::file-selector-button {
+  font: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  color: inherit; /* 1 */
+  background: transparent; /* 2 */
+}
+
+/*
+  Reset the default inset border style for form controls to solid.
+*/
+
+input:where(:not([type='button'], [type='reset'], [type='submit'])),
+select,
+textarea {
+  border: 1px solid;
+}
+
+/*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  appearance: button;
+}
+
 /*
   Use the modern Firefox focus style for all focusable elements.
 */
 
-:-moz-focusring:where(:not(iframe)) {
+:-moz-focusring {
   outline: auto;
 }
 
+/*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
 /*
   Add the correct vertical alignment in Chrome and Firefox.
 */
@@ -187,6 +236,23 @@ progress {
   vertical-align: baseline;
 }
 
+/*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
 /*
   Add the correct display in Chrome and Safari.
 */
@@ -205,10 +271,36 @@ menu {
   list-style: none;
 }
 
+/*
+  Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+  2. Set the default placeholder color to a semi-transparent version of the current text color.
+*/
+
+::placeholder {
+  opacity: 1; /* 1 */
+  color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
+}
+
+/*
+  Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
 /*
   1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
   2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-      This can trigger a poorly considered lint error in some tools but is included by design.
+     This can trigger a poorly considered lint error in some tools but is included by design.
 */
 
 img,
@@ -233,166 +325,10 @@ video {
   height: auto;
 }
 
-/*
-  1. Inherit font styles in all browsers.
-  2. Remove border radius in all browsers.
-  3. Remove background color in all browsers.
-  4. Ensure consistent opacity for disabled states in all browsers.
-*/
-
-button,
-input,
-select,
-optgroup,
-textarea,
-::file-selector-button {
-  font: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  border-radius: 0; /* 2 */
-  background-color: transparent; /* 3 */
-  opacity: 1; /* 4 */
-}
-
-/*
-  Restore default font weight.
-*/
-
-:where(select:is([multiple], [size])) optgroup {
-  font-weight: bolder;
-}
-
-/*
-  Restore indentation.
-*/
-
-:where(select:is([multiple], [size])) optgroup option {
-  padding-inline-start: 20px;
-}
-
-/*
-  Restore space after button.
-*/
-
-::file-selector-button {
-  margin-inline-end: 4px;
-}
-
-/*
-  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-*/
-
-::placeholder {
-  opacity: 1;
-}
-
-/*
-  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
-  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
-*/
-
-@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
-  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
-  ::placeholder {
-    color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-/*
-  Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-  Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-  1. Ensure date/time inputs have the same height when empty in iOS Safari.
-  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
-*/
-
-::-webkit-date-and-time-value {
-  min-height: 1lh; /* 1 */
-  text-align: inherit; /* 2 */
-}
-
-/*
-  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
-*/
-
-::-webkit-datetime-edit {
-  display: inline-flex;
-}
-
-/*
-  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
-*/
-
-::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
-}
-
-::-webkit-datetime-edit,
-::-webkit-datetime-edit-year-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-minute-field,
-::-webkit-datetime-edit-second-field,
-::-webkit-datetime-edit-millisecond-field,
-::-webkit-datetime-edit-meridiem-field {
-  padding-block: 0;
-}
-
-/*
-  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
-*/
-
-::-webkit-calendar-picker-indicator {
-  line-height: 1;
-}
-
-/*
-  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-  Correct the inability to style the border radius in iOS Safari.
-*/
-
-button,
-input:where([type='button'], [type='reset'], [type='submit']),
-::file-selector-button {
-  appearance: button;
-}
-
-/*
-  Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
 /*
   Make elements with the HTML hidden attribute stay hidden by default.
 */
 
-[hidden]:where(:not([hidden='until-found'])) {
+[hidden] {
   display: none !important;
 }
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 9921709d7..92eb05cd3 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -1,67 +1,465 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-    }
-  }
-}
-
-:root, :host {
-  --color-red-500: oklch(63.7% .237 25.331);
-  --spacing: .25rem;
+":root {
+  --default-transition-duration: .15s;
+  --default-transition-timing-function: var(--transition-timing-function-in-out);
+  --default-font-family: var(--font-family-sans);
+  --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+  --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+  --default-mono-font-family: var(--font-family-mono);
+  --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
+  --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+  --color-stone-50: #fafaf9;
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a8a29e;
+  --color-stone-500: #78716c;
+  --color-stone-600: #57534e;
+  --color-stone-700: #44403c;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #a21caf;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-300: #fda4af;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+  --color-rose-800: #9f1239;
+  --color-rose-900: #881337;
+  --color-rose-950: #4c0519;
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+  --blur: 8px;
+  --blur-sm: 4px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+  --radius: .25rem;
+  --radius-sm: .125rem;
+  --radius-md: .375rem;
+  --radius-lg: .5rem;
+  --radius-xl: .75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --shadow-xs: 0 1px #0000000d;
+  --shadow-sm: 0 1px 2px 0 #0000000d;
+  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
+  --shadow-2xl: 0 25px 50px -12px #00000040;
+  --shadow-inner: inset 0 2px 4px 0 #0000000d;
+  --inset-shadow-xs: inset 0 1px #0000000d;
+  --inset-shadow-sm: inset 0 1px 1px #0000000d;
+  --inset-shadow: inset 0 2px 4px #0000000d;
+  --drop-shadow: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
+  --drop-shadow-sm: 0 1px 1px #0000000d;
+  --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f;
+  --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;
+  --width-3xs: 16rem;
+  --width-2xs: 18rem;
+  --width-xs: 20rem;
+  --width-sm: 24rem;
+  --width-md: 28rem;
+  --width-lg: 32rem;
+  --width-xl: 36rem;
+  --width-2xl: 42rem;
+  --width-3xl: 48rem;
+  --width-4xl: 56rem;
+  --width-5xl: 64rem;
+  --width-6xl: 72rem;
+  --width-7xl: 80rem;
+  --width-prose: 65ch;
+  --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-size-xs: .75rem;
+  --font-size-xs--line-height: 1rem;
+  --font-size-sm: .875rem;
+  --font-size-sm--line-height: 1.25rem;
+  --font-size-base: 1rem;
+  --font-size-base--line-height: 1.5rem;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.75rem;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.75rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-2xl--line-height: 2rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-3xl--line-height: 2.25rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-4xl--line-height: 2.5rem;
+  --font-size-5xl: 3rem;
+  --font-size-5xl--line-height: 1;
+  --font-size-6xl: 3.75rem;
+  --font-size-6xl--line-height: 1;
+  --font-size-7xl: 4.5rem;
+  --font-size-7xl--line-height: 1;
+  --font-size-8xl: 6rem;
+  --font-size-8xl--line-height: 1;
+  --font-size-9xl: 8rem;
+  --font-size-9xl--line-height: 1;
+  --letter-spacing-tighter: -.05em;
+  --letter-spacing-tight: -.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: .025em;
+  --letter-spacing-wider: .05em;
+  --letter-spacing-widest: .1em;
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --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;
+  --transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  --transition-timing-function-linear: linear;
+  --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
+  --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
+  --transition-timing-function-in-out: cubic-bezier(.4, 0, .2, 1);
 }
 
 .w-4 {
-  width: calc(var(--spacing) * 4);
+  width: var(--spacing-4, 1rem);
 }
 
 .bg-red-500 {
-  background-color: var(--color-red-500);
+  background-color: var(--color-red-500, #ef4444);
 }
 
-.shadow-sm {
-  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+.shadow {
+  --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-@media (min-width: 40rem) {
+@media (width >= 640px) {
   .sm\\:flex {
     display: flex;
   }
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+    transform: translateY(-25%);
+  }
+
+  50% {
+    animation-timing-function: cubic-bezier(0, 0, .2, 1);
+    transform: none;
+  }
+}
+
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
 }
 
-@property --tw-shadow-color {
+@property --tw-shadow-colored {
   syntax: "*";
-  inherits: false
-}
-
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
   inherits: false;
-  initial-value: 100%;
+  initial-value: 0 0 #0000;
 }
 
 @property --tw-inset-shadow {
@@ -70,15 +468,10 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   initial-value: 0 0 #0000;
 }
 
-@property --tw-inset-shadow-color {
+@property --tw-inset-shadow-colored {
   syntax: "*";
-  inherits: false
-}
-
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
   inherits: false;
-  initial-value: 100%;
+  initial-value: 0 0 #0000;
 }
 
 @property --tw-ring-color {
@@ -124,270 +517,5 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
-}
-"
-`;
-
-exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
-"
-@layer theme {
-  :root, :host {
-    --tw-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-    --tw-default-font-family: var(--tw-font-sans);
-    --tw-default-mono-font-family: var(--tw-font-mono);
-  }
-}
-
-@layer base {
-  *, :after, :before, ::backdrop {
-    box-sizing: border-box;
-    border: 0 solid;
-    margin: 0;
-    padding: 0;
-  }
-
-  ::file-selector-button {
-    box-sizing: border-box;
-    border: 0 solid;
-    margin: 0;
-    padding: 0;
-  }
-
-  html, :host {
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    line-height: 1.5;
-    font-family: var(--tw-default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-    font-feature-settings: var(--tw-default-font-feature-settings, normal);
-    font-variation-settings: var(--tw-default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    -webkit-text-decoration: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-
-  b, strong {
-    font-weight: bolder;
-  }
-
-  code, kbd, samp, pre {
-    font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-    font-feature-settings: var(--tw-default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--tw-default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-
-  small {
-    font-size: 80%;
-  }
-
-  sub, sup {
-    vertical-align: baseline;
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-  }
-
-  sub {
-    bottom: -.25em;
-  }
-
-  sup {
-    top: -.5em;
-  }
-
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-
-  :-moz-focusring:where(:not(iframe)) {
-    outline: auto;
-  }
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  summary {
-    display: list-item;
-  }
-
-  ol, ul, menu {
-    list-style: none;
-  }
-
-  img, svg, video, canvas, audio, iframe, embed, object {
-    vertical-align: middle;
-    display: block;
-  }
-
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  button, input, select, optgroup, textarea {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    opacity: 1;
-    background-color: #0000;
-    border-radius: 0;
-  }
-
-  ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    opacity: 1;
-    background-color: #0000;
-    border-radius: 0;
-  }
-
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-
-  ::placeholder {
-    opacity: 1;
-  }
-
-  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      ::placeholder {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-  }
-
-  textarea {
-    resize: vertical;
-  }
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-
-  ::-webkit-datetime-edit {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-year-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-month-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-day-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-hour-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-minute-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-second-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-millisecond-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-calendar-picker-indicator {
-    line-height: 1;
-  }
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  button, input:where([type="button"], [type="reset"], [type="submit"]) {
-    appearance: button;
-  }
-
-  ::file-selector-button {
-    appearance: button;
-  }
-
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  [hidden]:where(:not([hidden="until-found"])) {
-    display: none !important;
-  }
-}
-
-@layer components, utilities;
-"
+}"
 `;
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index d595e8c01..f4f1ad0bf 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -2,1247 +2,74 @@
 
 exports[`getClassList 1`] = `
 [
-  "-bg-conic-0",
-  "-bg-conic-0/oklab",
-  "-bg-conic-0/oklch",
-  "-bg-conic-0/srgb",
-  "-bg-conic-0/hsl",
-  "-bg-conic-0/longer",
-  "-bg-conic-0/shorter",
-  "-bg-conic-0/increasing",
-  "-bg-conic-0/decreasing",
-  "-bg-conic-30",
-  "-bg-conic-30/oklab",
-  "-bg-conic-30/oklch",
-  "-bg-conic-30/srgb",
-  "-bg-conic-30/hsl",
-  "-bg-conic-30/longer",
-  "-bg-conic-30/shorter",
-  "-bg-conic-30/increasing",
-  "-bg-conic-30/decreasing",
-  "-bg-conic-60",
-  "-bg-conic-60/oklab",
-  "-bg-conic-60/oklch",
-  "-bg-conic-60/srgb",
-  "-bg-conic-60/hsl",
-  "-bg-conic-60/longer",
-  "-bg-conic-60/shorter",
-  "-bg-conic-60/increasing",
-  "-bg-conic-60/decreasing",
-  "-bg-conic-90",
-  "-bg-conic-90/oklab",
-  "-bg-conic-90/oklch",
-  "-bg-conic-90/srgb",
-  "-bg-conic-90/hsl",
-  "-bg-conic-90/longer",
-  "-bg-conic-90/shorter",
-  "-bg-conic-90/increasing",
-  "-bg-conic-90/decreasing",
-  "-bg-conic-120",
-  "-bg-conic-120/oklab",
-  "-bg-conic-120/oklch",
-  "-bg-conic-120/srgb",
-  "-bg-conic-120/hsl",
-  "-bg-conic-120/longer",
-  "-bg-conic-120/shorter",
-  "-bg-conic-120/increasing",
-  "-bg-conic-120/decreasing",
-  "-bg-conic-150",
-  "-bg-conic-150/oklab",
-  "-bg-conic-150/oklch",
-  "-bg-conic-150/srgb",
-  "-bg-conic-150/hsl",
-  "-bg-conic-150/longer",
-  "-bg-conic-150/shorter",
-  "-bg-conic-150/increasing",
-  "-bg-conic-150/decreasing",
-  "-bg-conic-180",
-  "-bg-conic-180/oklab",
-  "-bg-conic-180/oklch",
-  "-bg-conic-180/srgb",
-  "-bg-conic-180/hsl",
-  "-bg-conic-180/longer",
-  "-bg-conic-180/shorter",
-  "-bg-conic-180/increasing",
-  "-bg-conic-180/decreasing",
-  "-bg-conic-210",
-  "-bg-conic-210/oklab",
-  "-bg-conic-210/oklch",
-  "-bg-conic-210/srgb",
-  "-bg-conic-210/hsl",
-  "-bg-conic-210/longer",
-  "-bg-conic-210/shorter",
-  "-bg-conic-210/increasing",
-  "-bg-conic-210/decreasing",
-  "-bg-conic-240",
-  "-bg-conic-240/oklab",
-  "-bg-conic-240/oklch",
-  "-bg-conic-240/srgb",
-  "-bg-conic-240/hsl",
-  "-bg-conic-240/longer",
-  "-bg-conic-240/shorter",
-  "-bg-conic-240/increasing",
-  "-bg-conic-240/decreasing",
-  "-bg-conic-270",
-  "-bg-conic-270/oklab",
-  "-bg-conic-270/oklch",
-  "-bg-conic-270/srgb",
-  "-bg-conic-270/hsl",
-  "-bg-conic-270/longer",
-  "-bg-conic-270/shorter",
-  "-bg-conic-270/increasing",
-  "-bg-conic-270/decreasing",
-  "-bg-conic-300",
-  "-bg-conic-300/oklab",
-  "-bg-conic-300/oklch",
-  "-bg-conic-300/srgb",
-  "-bg-conic-300/hsl",
-  "-bg-conic-300/longer",
-  "-bg-conic-300/shorter",
-  "-bg-conic-300/increasing",
-  "-bg-conic-300/decreasing",
-  "-bg-conic-330",
-  "-bg-conic-330/oklab",
-  "-bg-conic-330/oklch",
-  "-bg-conic-330/srgb",
-  "-bg-conic-330/hsl",
-  "-bg-conic-330/longer",
-  "-bg-conic-330/shorter",
-  "-bg-conic-330/increasing",
-  "-bg-conic-330/decreasing",
-  "-bg-linear-0",
-  "-bg-linear-0/oklab",
-  "-bg-linear-0/oklch",
-  "-bg-linear-0/srgb",
-  "-bg-linear-0/hsl",
-  "-bg-linear-0/longer",
-  "-bg-linear-0/shorter",
-  "-bg-linear-0/increasing",
-  "-bg-linear-0/decreasing",
-  "-bg-linear-30",
-  "-bg-linear-30/oklab",
-  "-bg-linear-30/oklch",
-  "-bg-linear-30/srgb",
-  "-bg-linear-30/hsl",
-  "-bg-linear-30/longer",
-  "-bg-linear-30/shorter",
-  "-bg-linear-30/increasing",
-  "-bg-linear-30/decreasing",
-  "-bg-linear-60",
-  "-bg-linear-60/oklab",
-  "-bg-linear-60/oklch",
-  "-bg-linear-60/srgb",
-  "-bg-linear-60/hsl",
-  "-bg-linear-60/longer",
-  "-bg-linear-60/shorter",
-  "-bg-linear-60/increasing",
-  "-bg-linear-60/decreasing",
-  "-bg-linear-90",
-  "-bg-linear-90/oklab",
-  "-bg-linear-90/oklch",
-  "-bg-linear-90/srgb",
-  "-bg-linear-90/hsl",
-  "-bg-linear-90/longer",
-  "-bg-linear-90/shorter",
-  "-bg-linear-90/increasing",
-  "-bg-linear-90/decreasing",
-  "-bg-linear-120",
-  "-bg-linear-120/oklab",
-  "-bg-linear-120/oklch",
-  "-bg-linear-120/srgb",
-  "-bg-linear-120/hsl",
-  "-bg-linear-120/longer",
-  "-bg-linear-120/shorter",
-  "-bg-linear-120/increasing",
-  "-bg-linear-120/decreasing",
-  "-bg-linear-150",
-  "-bg-linear-150/oklab",
-  "-bg-linear-150/oklch",
-  "-bg-linear-150/srgb",
-  "-bg-linear-150/hsl",
-  "-bg-linear-150/longer",
-  "-bg-linear-150/shorter",
-  "-bg-linear-150/increasing",
-  "-bg-linear-150/decreasing",
-  "-bg-linear-180",
-  "-bg-linear-180/oklab",
-  "-bg-linear-180/oklch",
-  "-bg-linear-180/srgb",
-  "-bg-linear-180/hsl",
-  "-bg-linear-180/longer",
-  "-bg-linear-180/shorter",
-  "-bg-linear-180/increasing",
-  "-bg-linear-180/decreasing",
-  "-bg-linear-210",
-  "-bg-linear-210/oklab",
-  "-bg-linear-210/oklch",
-  "-bg-linear-210/srgb",
-  "-bg-linear-210/hsl",
-  "-bg-linear-210/longer",
-  "-bg-linear-210/shorter",
-  "-bg-linear-210/increasing",
-  "-bg-linear-210/decreasing",
-  "-bg-linear-240",
-  "-bg-linear-240/oklab",
-  "-bg-linear-240/oklch",
-  "-bg-linear-240/srgb",
-  "-bg-linear-240/hsl",
-  "-bg-linear-240/longer",
-  "-bg-linear-240/shorter",
-  "-bg-linear-240/increasing",
-  "-bg-linear-240/decreasing",
-  "-bg-linear-270",
-  "-bg-linear-270/oklab",
-  "-bg-linear-270/oklch",
-  "-bg-linear-270/srgb",
-  "-bg-linear-270/hsl",
-  "-bg-linear-270/longer",
-  "-bg-linear-270/shorter",
-  "-bg-linear-270/increasing",
-  "-bg-linear-270/decreasing",
-  "-bg-linear-300",
-  "-bg-linear-300/oklab",
-  "-bg-linear-300/oklch",
-  "-bg-linear-300/srgb",
-  "-bg-linear-300/hsl",
-  "-bg-linear-300/longer",
-  "-bg-linear-300/shorter",
-  "-bg-linear-300/increasing",
-  "-bg-linear-300/decreasing",
-  "-bg-linear-330",
-  "-bg-linear-330/oklab",
-  "-bg-linear-330/oklch",
-  "-bg-linear-330/srgb",
-  "-bg-linear-330/hsl",
-  "-bg-linear-330/longer",
-  "-bg-linear-330/shorter",
-  "-bg-linear-330/increasing",
-  "-bg-linear-330/decreasing",
-  "-bottom-0",
   "-bottom-0.5",
   "-bottom-1",
-  "-bottom-1.5",
-  "-bottom-2",
-  "-bottom-2.5",
   "-bottom-3",
-  "-bottom-3.5",
   "-bottom-4",
-  "-bottom-5",
-  "-bottom-6",
-  "-bottom-7",
-  "-bottom-8",
-  "-bottom-9",
-  "-bottom-10",
-  "-bottom-11",
-  "-bottom-12",
-  "-bottom-14",
-  "-bottom-16",
-  "-bottom-20",
-  "-bottom-24",
-  "-bottom-28",
-  "-bottom-32",
-  "-bottom-36",
-  "-bottom-40",
-  "-bottom-44",
-  "-bottom-48",
-  "-bottom-52",
-  "-bottom-56",
-  "-bottom-60",
-  "-bottom-64",
-  "-bottom-72",
-  "-bottom-80",
-  "-bottom-96",
-  "-bottom-1/2",
-  "-bottom-1/3",
-  "-bottom-1/4",
-  "-bottom-1/5",
-  "-bottom-1/6",
-  "-bottom-1/12",
-  "-bottom-2/3",
-  "-bottom-2/4",
-  "-bottom-2/5",
-  "-bottom-2/6",
-  "-bottom-2/12",
-  "-bottom-3/4",
-  "-bottom-3/5",
-  "-bottom-3/6",
-  "-bottom-3/12",
-  "-bottom-4/5",
-  "-bottom-4/6",
-  "-bottom-4/12",
-  "-bottom-5/6",
-  "-bottom-5/12",
-  "-bottom-6/12",
-  "-bottom-7/12",
-  "-bottom-8/12",
-  "-bottom-9/12",
-  "-bottom-10/12",
-  "-bottom-11/12",
-  "-bottom-full",
-  "-bottom-px",
-  "-col-end-1",
-  "-col-end-2",
-  "-col-end-3",
-  "-col-end-4",
-  "-col-end-5",
-  "-col-end-6",
-  "-col-end-7",
-  "-col-end-8",
-  "-col-end-9",
-  "-col-end-10",
-  "-col-end-11",
-  "-col-end-12",
-  "-col-end-13",
-  "-col-start-1",
-  "-col-start-2",
-  "-col-start-3",
-  "-col-start-4",
-  "-col-start-5",
-  "-col-start-6",
-  "-col-start-7",
-  "-col-start-8",
-  "-col-start-9",
-  "-col-start-10",
-  "-col-start-11",
-  "-col-start-12",
-  "-col-start-13",
-  "-end-full",
-  "-end-px",
-  "-indent-0",
+  "-end-0.5",
+  "-end-1",
+  "-end-3",
+  "-end-4",
   "-indent-0.5",
   "-indent-1",
-  "-indent-1.5",
-  "-indent-2",
-  "-indent-2.5",
   "-indent-3",
-  "-indent-3.5",
   "-indent-4",
-  "-indent-5",
-  "-indent-6",
-  "-indent-7",
-  "-indent-8",
-  "-indent-9",
-  "-indent-10",
-  "-indent-11",
-  "-indent-12",
-  "-indent-14",
-  "-indent-16",
-  "-indent-20",
-  "-indent-24",
-  "-indent-28",
-  "-indent-32",
-  "-indent-36",
-  "-indent-40",
-  "-indent-44",
-  "-indent-48",
-  "-indent-52",
-  "-indent-56",
-  "-indent-60",
-  "-indent-64",
-  "-indent-72",
-  "-indent-80",
-  "-indent-96",
-  "-indent-px",
-  "-inset-0",
   "-inset-0.5",
   "-inset-1",
-  "-inset-1.5",
-  "-inset-2",
-  "-inset-2.5",
   "-inset-3",
-  "-inset-3.5",
   "-inset-4",
-  "-inset-5",
-  "-inset-6",
-  "-inset-7",
-  "-inset-8",
-  "-inset-9",
-  "-inset-10",
-  "-inset-11",
-  "-inset-12",
-  "-inset-14",
-  "-inset-16",
-  "-inset-20",
-  "-inset-24",
-  "-inset-28",
-  "-inset-32",
-  "-inset-36",
-  "-inset-40",
-  "-inset-44",
-  "-inset-48",
-  "-inset-52",
-  "-inset-56",
-  "-inset-60",
-  "-inset-64",
-  "-inset-72",
-  "-inset-80",
-  "-inset-96",
-  "-inset-1/2",
-  "-inset-1/3",
-  "-inset-1/4",
-  "-inset-1/5",
-  "-inset-1/6",
-  "-inset-1/12",
-  "-inset-2/3",
-  "-inset-2/4",
-  "-inset-2/5",
-  "-inset-2/6",
-  "-inset-2/12",
-  "-inset-3/4",
-  "-inset-3/5",
-  "-inset-3/6",
-  "-inset-3/12",
-  "-inset-4/5",
-  "-inset-4/6",
-  "-inset-4/12",
-  "-inset-5/6",
-  "-inset-5/12",
-  "-inset-6/12",
-  "-inset-7/12",
-  "-inset-8/12",
-  "-inset-9/12",
-  "-inset-10/12",
-  "-inset-11/12",
-  "-inset-be-0",
-  "-inset-be-0.5",
-  "-inset-be-1",
-  "-inset-be-1.5",
-  "-inset-be-2",
-  "-inset-be-2.5",
-  "-inset-be-3",
-  "-inset-be-3.5",
-  "-inset-be-4",
-  "-inset-be-5",
-  "-inset-be-6",
-  "-inset-be-7",
-  "-inset-be-8",
-  "-inset-be-9",
-  "-inset-be-10",
-  "-inset-be-11",
-  "-inset-be-12",
-  "-inset-be-14",
-  "-inset-be-16",
-  "-inset-be-20",
-  "-inset-be-24",
-  "-inset-be-28",
-  "-inset-be-32",
-  "-inset-be-36",
-  "-inset-be-40",
-  "-inset-be-44",
-  "-inset-be-48",
-  "-inset-be-52",
-  "-inset-be-56",
-  "-inset-be-60",
-  "-inset-be-64",
-  "-inset-be-72",
-  "-inset-be-80",
-  "-inset-be-96",
-  "-inset-be-1/2",
-  "-inset-be-1/3",
-  "-inset-be-1/4",
-  "-inset-be-1/5",
-  "-inset-be-1/6",
-  "-inset-be-1/12",
-  "-inset-be-2/3",
-  "-inset-be-2/4",
-  "-inset-be-2/5",
-  "-inset-be-2/6",
-  "-inset-be-2/12",
-  "-inset-be-3/4",
-  "-inset-be-3/5",
-  "-inset-be-3/6",
-  "-inset-be-3/12",
-  "-inset-be-4/5",
-  "-inset-be-4/6",
-  "-inset-be-4/12",
-  "-inset-be-5/6",
-  "-inset-be-5/12",
-  "-inset-be-6/12",
-  "-inset-be-7/12",
-  "-inset-be-8/12",
-  "-inset-be-9/12",
-  "-inset-be-10/12",
-  "-inset-be-11/12",
-  "-inset-be-full",
-  "-inset-be-px",
-  "-inset-bs-0",
-  "-inset-bs-0.5",
-  "-inset-bs-1",
-  "-inset-bs-1.5",
-  "-inset-bs-2",
-  "-inset-bs-2.5",
-  "-inset-bs-3",
-  "-inset-bs-3.5",
-  "-inset-bs-4",
-  "-inset-bs-5",
-  "-inset-bs-6",
-  "-inset-bs-7",
-  "-inset-bs-8",
-  "-inset-bs-9",
-  "-inset-bs-10",
-  "-inset-bs-11",
-  "-inset-bs-12",
-  "-inset-bs-14",
-  "-inset-bs-16",
-  "-inset-bs-20",
-  "-inset-bs-24",
-  "-inset-bs-28",
-  "-inset-bs-32",
-  "-inset-bs-36",
-  "-inset-bs-40",
-  "-inset-bs-44",
-  "-inset-bs-48",
-  "-inset-bs-52",
-  "-inset-bs-56",
-  "-inset-bs-60",
-  "-inset-bs-64",
-  "-inset-bs-72",
-  "-inset-bs-80",
-  "-inset-bs-96",
-  "-inset-bs-1/2",
-  "-inset-bs-1/3",
-  "-inset-bs-1/4",
-  "-inset-bs-1/5",
-  "-inset-bs-1/6",
-  "-inset-bs-1/12",
-  "-inset-bs-2/3",
-  "-inset-bs-2/4",
-  "-inset-bs-2/5",
-  "-inset-bs-2/6",
-  "-inset-bs-2/12",
-  "-inset-bs-3/4",
-  "-inset-bs-3/5",
-  "-inset-bs-3/6",
-  "-inset-bs-3/12",
-  "-inset-bs-4/5",
-  "-inset-bs-4/6",
-  "-inset-bs-4/12",
-  "-inset-bs-5/6",
-  "-inset-bs-5/12",
-  "-inset-bs-6/12",
-  "-inset-bs-7/12",
-  "-inset-bs-8/12",
-  "-inset-bs-9/12",
-  "-inset-bs-10/12",
-  "-inset-bs-11/12",
-  "-inset-bs-full",
-  "-inset-bs-px",
-  "-inset-e-0",
-  "-inset-e-0.5",
-  "-inset-e-1",
-  "-inset-e-1.5",
-  "-inset-e-2",
-  "-inset-e-2.5",
-  "-inset-e-3",
-  "-inset-e-3.5",
-  "-inset-e-4",
-  "-inset-e-5",
-  "-inset-e-6",
-  "-inset-e-7",
-  "-inset-e-8",
-  "-inset-e-9",
-  "-inset-e-10",
-  "-inset-e-11",
-  "-inset-e-12",
-  "-inset-e-14",
-  "-inset-e-16",
-  "-inset-e-20",
-  "-inset-e-24",
-  "-inset-e-28",
-  "-inset-e-32",
-  "-inset-e-36",
-  "-inset-e-40",
-  "-inset-e-44",
-  "-inset-e-48",
-  "-inset-e-52",
-  "-inset-e-56",
-  "-inset-e-60",
-  "-inset-e-64",
-  "-inset-e-72",
-  "-inset-e-80",
-  "-inset-e-96",
-  "-inset-e-1/2",
-  "-inset-e-1/3",
-  "-inset-e-1/4",
-  "-inset-e-1/5",
-  "-inset-e-1/6",
-  "-inset-e-1/12",
-  "-inset-e-2/3",
-  "-inset-e-2/4",
-  "-inset-e-2/5",
-  "-inset-e-2/6",
-  "-inset-e-2/12",
-  "-inset-e-3/4",
-  "-inset-e-3/5",
-  "-inset-e-3/6",
-  "-inset-e-3/12",
-  "-inset-e-4/5",
-  "-inset-e-4/6",
-  "-inset-e-4/12",
-  "-inset-e-5/6",
-  "-inset-e-5/12",
-  "-inset-e-6/12",
-  "-inset-e-7/12",
-  "-inset-e-8/12",
-  "-inset-e-9/12",
-  "-inset-e-10/12",
-  "-inset-e-11/12",
-  "-inset-e-full",
-  "-inset-e-px",
-  "-inset-full",
-  "-inset-px",
-  "-inset-s-0",
-  "-inset-s-0.5",
-  "-inset-s-1",
-  "-inset-s-1.5",
-  "-inset-s-2",
-  "-inset-s-2.5",
-  "-inset-s-3",
-  "-inset-s-3.5",
-  "-inset-s-4",
-  "-inset-s-5",
-  "-inset-s-6",
-  "-inset-s-7",
-  "-inset-s-8",
-  "-inset-s-9",
-  "-inset-s-10",
-  "-inset-s-11",
-  "-inset-s-12",
-  "-inset-s-14",
-  "-inset-s-16",
-  "-inset-s-20",
-  "-inset-s-24",
-  "-inset-s-28",
-  "-inset-s-32",
-  "-inset-s-36",
-  "-inset-s-40",
-  "-inset-s-44",
-  "-inset-s-48",
-  "-inset-s-52",
-  "-inset-s-56",
-  "-inset-s-60",
-  "-inset-s-64",
-  "-inset-s-72",
-  "-inset-s-80",
-  "-inset-s-96",
-  "-inset-s-1/2",
-  "-inset-s-1/3",
-  "-inset-s-1/4",
-  "-inset-s-1/5",
-  "-inset-s-1/6",
-  "-inset-s-1/12",
-  "-inset-s-2/3",
-  "-inset-s-2/4",
-  "-inset-s-2/5",
-  "-inset-s-2/6",
-  "-inset-s-2/12",
-  "-inset-s-3/4",
-  "-inset-s-3/5",
-  "-inset-s-3/6",
-  "-inset-s-3/12",
-  "-inset-s-4/5",
-  "-inset-s-4/6",
-  "-inset-s-4/12",
-  "-inset-s-5/6",
-  "-inset-s-5/12",
-  "-inset-s-6/12",
-  "-inset-s-7/12",
-  "-inset-s-8/12",
-  "-inset-s-9/12",
-  "-inset-s-10/12",
-  "-inset-s-11/12",
-  "-inset-s-full",
-  "-inset-s-px",
-  "-inset-x-0",
   "-inset-x-0.5",
   "-inset-x-1",
-  "-inset-x-1.5",
-  "-inset-x-2",
-  "-inset-x-2.5",
   "-inset-x-3",
-  "-inset-x-3.5",
   "-inset-x-4",
-  "-inset-x-5",
-  "-inset-x-6",
-  "-inset-x-7",
-  "-inset-x-8",
-  "-inset-x-9",
-  "-inset-x-10",
-  "-inset-x-11",
-  "-inset-x-12",
-  "-inset-x-14",
-  "-inset-x-16",
-  "-inset-x-20",
-  "-inset-x-24",
-  "-inset-x-28",
-  "-inset-x-32",
-  "-inset-x-36",
-  "-inset-x-40",
-  "-inset-x-44",
-  "-inset-x-48",
-  "-inset-x-52",
-  "-inset-x-56",
-  "-inset-x-60",
-  "-inset-x-64",
-  "-inset-x-72",
-  "-inset-x-80",
-  "-inset-x-96",
-  "-inset-x-1/2",
-  "-inset-x-1/3",
-  "-inset-x-1/4",
-  "-inset-x-1/5",
-  "-inset-x-1/6",
-  "-inset-x-1/12",
-  "-inset-x-2/3",
-  "-inset-x-2/4",
-  "-inset-x-2/5",
-  "-inset-x-2/6",
-  "-inset-x-2/12",
-  "-inset-x-3/4",
-  "-inset-x-3/5",
-  "-inset-x-3/6",
-  "-inset-x-3/12",
-  "-inset-x-4/5",
-  "-inset-x-4/6",
-  "-inset-x-4/12",
-  "-inset-x-5/6",
-  "-inset-x-5/12",
-  "-inset-x-6/12",
-  "-inset-x-7/12",
-  "-inset-x-8/12",
-  "-inset-x-9/12",
-  "-inset-x-10/12",
-  "-inset-x-11/12",
-  "-inset-x-full",
-  "-inset-x-px",
-  "-inset-y-0",
   "-inset-y-0.5",
   "-inset-y-1",
-  "-inset-y-1.5",
-  "-inset-y-2",
-  "-inset-y-2.5",
   "-inset-y-3",
-  "-inset-y-3.5",
   "-inset-y-4",
-  "-inset-y-5",
-  "-inset-y-6",
-  "-inset-y-7",
-  "-inset-y-8",
-  "-inset-y-9",
-  "-inset-y-10",
-  "-inset-y-11",
-  "-inset-y-12",
-  "-inset-y-14",
-  "-inset-y-16",
-  "-inset-y-20",
-  "-inset-y-24",
-  "-inset-y-28",
-  "-inset-y-32",
-  "-inset-y-36",
-  "-inset-y-40",
-  "-inset-y-44",
-  "-inset-y-48",
-  "-inset-y-52",
-  "-inset-y-56",
-  "-inset-y-60",
-  "-inset-y-64",
-  "-inset-y-72",
-  "-inset-y-80",
-  "-inset-y-96",
-  "-inset-y-1/2",
-  "-inset-y-1/3",
-  "-inset-y-1/4",
-  "-inset-y-1/5",
-  "-inset-y-1/6",
-  "-inset-y-1/12",
-  "-inset-y-2/3",
-  "-inset-y-2/4",
-  "-inset-y-2/5",
-  "-inset-y-2/6",
-  "-inset-y-2/12",
-  "-inset-y-3/4",
-  "-inset-y-3/5",
-  "-inset-y-3/6",
-  "-inset-y-3/12",
-  "-inset-y-4/5",
-  "-inset-y-4/6",
-  "-inset-y-4/12",
-  "-inset-y-5/6",
-  "-inset-y-5/12",
-  "-inset-y-6/12",
-  "-inset-y-7/12",
-  "-inset-y-8/12",
-  "-inset-y-9/12",
-  "-inset-y-10/12",
-  "-inset-y-11/12",
-  "-inset-y-full",
-  "-inset-y-px",
-  "-left-0",
   "-left-0.5",
   "-left-1",
-  "-left-1.5",
-  "-left-2",
-  "-left-2.5",
   "-left-3",
-  "-left-3.5",
   "-left-4",
-  "-left-5",
-  "-left-6",
-  "-left-7",
-  "-left-8",
-  "-left-9",
-  "-left-10",
-  "-left-11",
-  "-left-12",
-  "-left-14",
-  "-left-16",
-  "-left-20",
-  "-left-24",
-  "-left-28",
-  "-left-32",
-  "-left-36",
-  "-left-40",
-  "-left-44",
-  "-left-48",
-  "-left-52",
-  "-left-56",
-  "-left-60",
-  "-left-64",
-  "-left-72",
-  "-left-80",
-  "-left-96",
-  "-left-1/2",
-  "-left-1/3",
-  "-left-1/4",
-  "-left-1/5",
-  "-left-1/6",
-  "-left-1/12",
-  "-left-2/3",
-  "-left-2/4",
-  "-left-2/5",
-  "-left-2/6",
-  "-left-2/12",
-  "-left-3/4",
-  "-left-3/5",
-  "-left-3/6",
-  "-left-3/12",
-  "-left-4/5",
-  "-left-4/6",
-  "-left-4/12",
-  "-left-5/6",
-  "-left-5/12",
-  "-left-6/12",
-  "-left-7/12",
-  "-left-8/12",
-  "-left-9/12",
-  "-left-10/12",
-  "-left-11/12",
-  "-left-full",
-  "-left-px",
-  "-m-0",
   "-m-0.5",
   "-m-1",
-  "-m-1.5",
-  "-m-2",
-  "-m-2.5",
   "-m-3",
-  "-m-3.5",
   "-m-4",
-  "-m-5",
-  "-m-6",
-  "-m-7",
-  "-m-8",
-  "-m-9",
-  "-m-10",
-  "-m-11",
-  "-m-12",
-  "-m-14",
-  "-m-16",
-  "-m-20",
-  "-m-24",
-  "-m-28",
-  "-m-32",
-  "-m-36",
-  "-m-40",
-  "-m-44",
-  "-m-48",
-  "-m-52",
-  "-m-56",
-  "-m-60",
-  "-m-64",
-  "-m-72",
-  "-m-80",
-  "-m-96",
-  "-m-px",
-  "-mask-conic-0",
-  "-mask-conic-1",
-  "-mask-conic-2",
-  "-mask-conic-3",
-  "-mask-conic-6",
-  "-mask-conic-12",
-  "-mask-conic-45",
-  "-mask-conic-90",
-  "-mask-conic-180",
-  "-mask-linear-0",
-  "-mask-linear-1",
-  "-mask-linear-2",
-  "-mask-linear-3",
-  "-mask-linear-6",
-  "-mask-linear-12",
-  "-mask-linear-45",
-  "-mask-linear-90",
-  "-mask-linear-180",
-  "-mb-0",
   "-mb-0.5",
   "-mb-1",
-  "-mb-1.5",
-  "-mb-2",
-  "-mb-2.5",
   "-mb-3",
-  "-mb-3.5",
   "-mb-4",
-  "-mb-5",
-  "-mb-6",
-  "-mb-7",
-  "-mb-8",
-  "-mb-9",
-  "-mb-10",
-  "-mb-11",
-  "-mb-12",
-  "-mb-14",
-  "-mb-16",
-  "-mb-20",
-  "-mb-24",
-  "-mb-28",
-  "-mb-32",
-  "-mb-36",
-  "-mb-40",
-  "-mb-44",
-  "-mb-48",
-  "-mb-52",
-  "-mb-56",
-  "-mb-60",
-  "-mb-64",
-  "-mb-72",
-  "-mb-80",
-  "-mb-96",
-  "-mb-px",
-  "-mbe-0",
-  "-mbe-0.5",
-  "-mbe-1",
-  "-mbe-1.5",
-  "-mbe-2",
-  "-mbe-2.5",
-  "-mbe-3",
-  "-mbe-3.5",
-  "-mbe-4",
-  "-mbe-5",
-  "-mbe-6",
-  "-mbe-7",
-  "-mbe-8",
-  "-mbe-9",
-  "-mbe-10",
-  "-mbe-11",
-  "-mbe-12",
-  "-mbe-14",
-  "-mbe-16",
-  "-mbe-20",
-  "-mbe-24",
-  "-mbe-28",
-  "-mbe-32",
-  "-mbe-36",
-  "-mbe-40",
-  "-mbe-44",
-  "-mbe-48",
-  "-mbe-52",
-  "-mbe-56",
-  "-mbe-60",
-  "-mbe-64",
-  "-mbe-72",
-  "-mbe-80",
-  "-mbe-96",
-  "-mbe-px",
-  "-mbs-0",
-  "-mbs-0.5",
-  "-mbs-1",
-  "-mbs-1.5",
-  "-mbs-2",
-  "-mbs-2.5",
-  "-mbs-3",
-  "-mbs-3.5",
-  "-mbs-4",
-  "-mbs-5",
-  "-mbs-6",
-  "-mbs-7",
-  "-mbs-8",
-  "-mbs-9",
-  "-mbs-10",
-  "-mbs-11",
-  "-mbs-12",
-  "-mbs-14",
-  "-mbs-16",
-  "-mbs-20",
-  "-mbs-24",
-  "-mbs-28",
-  "-mbs-32",
-  "-mbs-36",
-  "-mbs-40",
-  "-mbs-44",
-  "-mbs-48",
-  "-mbs-52",
-  "-mbs-56",
-  "-mbs-60",
-  "-mbs-64",
-  "-mbs-72",
-  "-mbs-80",
-  "-mbs-96",
-  "-mbs-px",
-  "-me-0",
   "-me-0.5",
   "-me-1",
-  "-me-1.5",
-  "-me-2",
-  "-me-2.5",
   "-me-3",
-  "-me-3.5",
   "-me-4",
-  "-me-5",
-  "-me-6",
-  "-me-7",
-  "-me-8",
-  "-me-9",
-  "-me-10",
-  "-me-11",
-  "-me-12",
-  "-me-14",
-  "-me-16",
-  "-me-20",
-  "-me-24",
-  "-me-28",
-  "-me-32",
-  "-me-36",
-  "-me-40",
-  "-me-44",
-  "-me-48",
-  "-me-52",
-  "-me-56",
-  "-me-60",
-  "-me-64",
-  "-me-72",
-  "-me-80",
-  "-me-96",
-  "-me-px",
-  "-ml-0",
   "-ml-0.5",
   "-ml-1",
-  "-ml-1.5",
-  "-ml-2",
-  "-ml-2.5",
   "-ml-3",
-  "-ml-3.5",
   "-ml-4",
-  "-ml-5",
-  "-ml-6",
-  "-ml-7",
-  "-ml-8",
-  "-ml-9",
-  "-ml-10",
-  "-ml-11",
-  "-ml-12",
-  "-ml-14",
-  "-ml-16",
-  "-ml-20",
-  "-ml-24",
-  "-ml-28",
-  "-ml-32",
-  "-ml-36",
-  "-ml-40",
-  "-ml-44",
-  "-ml-48",
-  "-ml-52",
-  "-ml-56",
-  "-ml-60",
-  "-ml-64",
-  "-ml-72",
-  "-ml-80",
-  "-ml-96",
-  "-ml-px",
-  "-mr-0",
   "-mr-0.5",
   "-mr-1",
-  "-mr-1.5",
-  "-mr-2",
-  "-mr-2.5",
   "-mr-3",
-  "-mr-3.5",
   "-mr-4",
-  "-mr-5",
-  "-mr-6",
-  "-mr-7",
-  "-mr-8",
-  "-mr-9",
-  "-mr-10",
-  "-mr-11",
-  "-mr-12",
-  "-mr-14",
-  "-mr-16",
-  "-mr-20",
-  "-mr-24",
-  "-mr-28",
-  "-mr-32",
-  "-mr-36",
-  "-mr-40",
-  "-mr-44",
-  "-mr-48",
-  "-mr-52",
-  "-mr-56",
-  "-mr-60",
-  "-mr-64",
-  "-mr-72",
-  "-mr-80",
-  "-mr-96",
-  "-mr-px",
-  "-ms-0",
   "-ms-0.5",
   "-ms-1",
-  "-ms-1.5",
-  "-ms-2",
-  "-ms-2.5",
   "-ms-3",
-  "-ms-3.5",
   "-ms-4",
-  "-ms-5",
-  "-ms-6",
-  "-ms-7",
-  "-ms-8",
-  "-ms-9",
-  "-ms-10",
-  "-ms-11",
-  "-ms-12",
-  "-ms-14",
-  "-ms-16",
-  "-ms-20",
-  "-ms-24",
-  "-ms-28",
-  "-ms-32",
-  "-ms-36",
-  "-ms-40",
-  "-ms-44",
-  "-ms-48",
-  "-ms-52",
-  "-ms-56",
-  "-ms-60",
-  "-ms-64",
-  "-ms-72",
-  "-ms-80",
-  "-ms-96",
-  "-ms-px",
-  "-mt-0",
   "-mt-0.5",
   "-mt-1",
-  "-mt-1.5",
-  "-mt-2",
-  "-mt-2.5",
   "-mt-3",
-  "-mt-3.5",
   "-mt-4",
-  "-mt-5",
-  "-mt-6",
-  "-mt-7",
-  "-mt-8",
-  "-mt-9",
-  "-mt-10",
-  "-mt-11",
-  "-mt-12",
-  "-mt-14",
-  "-mt-16",
-  "-mt-20",
-  "-mt-24",
-  "-mt-28",
-  "-mt-32",
-  "-mt-36",
-  "-mt-40",
-  "-mt-44",
-  "-mt-48",
-  "-mt-52",
-  "-mt-56",
-  "-mt-60",
-  "-mt-64",
-  "-mt-72",
-  "-mt-80",
-  "-mt-96",
-  "-mt-px",
-  "-mx-0",
   "-mx-0.5",
   "-mx-1",
-  "-mx-1.5",
-  "-mx-2",
-  "-mx-2.5",
   "-mx-3",
-  "-mx-3.5",
   "-mx-4",
-  "-mx-5",
-  "-mx-6",
-  "-mx-7",
-  "-mx-8",
-  "-mx-9",
-  "-mx-10",
-  "-mx-11",
-  "-mx-12",
-  "-mx-14",
-  "-mx-16",
-  "-mx-20",
-  "-mx-24",
-  "-mx-28",
-  "-mx-32",
-  "-mx-36",
-  "-mx-40",
-  "-mx-44",
-  "-mx-48",
-  "-mx-52",
-  "-mx-56",
-  "-mx-60",
-  "-mx-64",
-  "-mx-72",
-  "-mx-80",
-  "-mx-96",
-  "-mx-px",
-  "-my-0",
   "-my-0.5",
   "-my-1",
-  "-my-1.5",
-  "-my-2",
-  "-my-2.5",
   "-my-3",
-  "-my-3.5",
   "-my-4",
-  "-my-5",
-  "-my-6",
-  "-my-7",
-  "-my-8",
-  "-my-9",
-  "-my-10",
-  "-my-11",
-  "-my-12",
-  "-my-14",
-  "-my-16",
-  "-my-20",
-  "-my-24",
-  "-my-28",
-  "-my-32",
-  "-my-36",
-  "-my-40",
-  "-my-44",
-  "-my-48",
-  "-my-52",
-  "-my-56",
-  "-my-60",
-  "-my-64",
-  "-my-72",
-  "-my-80",
-  "-my-96",
-  "-my-px",
   "-order-1",
+  "-order-10",
+  "-order-11",
+  "-order-12",
   "-order-2",
   "-order-3",
   "-order-4",
@@ -1251,940 +78,170 @@ exports[`getClassList 1`] = `
   "-order-7",
   "-order-8",
   "-order-9",
-  "-order-10",
-  "-order-11",
-  "-order-12",
-  "-outline-offset-0",
-  "-outline-offset-1",
-  "-outline-offset-2",
-  "-outline-offset-4",
-  "-outline-offset-8",
-  "-right-0",
   "-right-0.5",
   "-right-1",
-  "-right-1.5",
-  "-right-2",
-  "-right-2.5",
   "-right-3",
-  "-right-3.5",
   "-right-4",
-  "-right-5",
-  "-right-6",
-  "-right-7",
-  "-right-8",
-  "-right-9",
-  "-right-10",
-  "-right-11",
-  "-right-12",
-  "-right-14",
-  "-right-16",
-  "-right-20",
-  "-right-24",
-  "-right-28",
-  "-right-32",
-  "-right-36",
-  "-right-40",
-  "-right-44",
-  "-right-48",
-  "-right-52",
-  "-right-56",
-  "-right-60",
-  "-right-64",
-  "-right-72",
-  "-right-80",
-  "-right-96",
-  "-right-1/2",
-  "-right-1/3",
-  "-right-1/4",
-  "-right-1/5",
-  "-right-1/6",
-  "-right-1/12",
-  "-right-2/3",
-  "-right-2/4",
-  "-right-2/5",
-  "-right-2/6",
-  "-right-2/12",
-  "-right-3/4",
-  "-right-3/5",
-  "-right-3/6",
-  "-right-3/12",
-  "-right-4/5",
-  "-right-4/6",
-  "-right-4/12",
-  "-right-5/6",
-  "-right-5/12",
-  "-right-6/12",
-  "-right-7/12",
-  "-right-8/12",
-  "-right-9/12",
-  "-right-10/12",
-  "-right-11/12",
-  "-right-full",
-  "-right-px",
   "-rotate-0",
   "-rotate-1",
+  "-rotate-12",
+  "-rotate-180",
   "-rotate-2",
   "-rotate-3",
-  "-rotate-6",
-  "-rotate-12",
   "-rotate-45",
+  "-rotate-6",
   "-rotate-90",
-  "-rotate-180",
-  "-rotate-x-0",
-  "-rotate-x-1",
-  "-rotate-x-2",
-  "-rotate-x-3",
-  "-rotate-x-6",
-  "-rotate-x-12",
-  "-rotate-x-45",
-  "-rotate-x-90",
-  "-rotate-x-180",
-  "-rotate-y-0",
-  "-rotate-y-1",
-  "-rotate-y-2",
-  "-rotate-y-3",
-  "-rotate-y-6",
-  "-rotate-y-12",
-  "-rotate-y-45",
-  "-rotate-y-90",
-  "-rotate-y-180",
-  "-rotate-z-0",
-  "-rotate-z-1",
-  "-rotate-z-2",
-  "-rotate-z-3",
-  "-rotate-z-6",
-  "-rotate-z-12",
-  "-rotate-z-45",
-  "-rotate-z-90",
-  "-rotate-z-180",
-  "-row-end-1",
-  "-row-end-2",
-  "-row-end-3",
-  "-row-end-4",
-  "-row-end-5",
-  "-row-end-6",
-  "-row-end-7",
-  "-row-end-8",
-  "-row-end-9",
-  "-row-end-10",
-  "-row-end-11",
-  "-row-end-12",
-  "-row-end-13",
-  "-row-start-1",
-  "-row-start-2",
-  "-row-start-3",
-  "-row-start-4",
-  "-row-start-5",
-  "-row-start-6",
-  "-row-start-7",
-  "-row-start-8",
-  "-row-start-9",
-  "-row-start-10",
-  "-row-start-11",
-  "-row-start-12",
-  "-row-start-13",
   "-scale-0",
-  "-scale-50",
-  "-scale-75",
-  "-scale-90",
-  "-scale-95",
   "-scale-100",
   "-scale-105",
   "-scale-110",
   "-scale-125",
   "-scale-150",
   "-scale-200",
+  "-scale-50",
+  "-scale-75",
+  "-scale-90",
+  "-scale-95",
   "-scale-x-0",
-  "-scale-x-50",
-  "-scale-x-75",
-  "-scale-x-90",
-  "-scale-x-95",
   "-scale-x-100",
   "-scale-x-105",
   "-scale-x-110",
   "-scale-x-125",
   "-scale-x-150",
   "-scale-x-200",
+  "-scale-x-50",
+  "-scale-x-75",
+  "-scale-x-90",
+  "-scale-x-95",
   "-scale-y-0",
-  "-scale-y-50",
-  "-scale-y-75",
-  "-scale-y-90",
-  "-scale-y-95",
   "-scale-y-100",
   "-scale-y-105",
   "-scale-y-110",
   "-scale-y-125",
   "-scale-y-150",
   "-scale-y-200",
-  "-scale-z-0",
-  "-scale-z-50",
-  "-scale-z-75",
-  "-scale-z-90",
-  "-scale-z-95",
-  "-scale-z-100",
-  "-scale-z-105",
-  "-scale-z-110",
-  "-scale-z-125",
-  "-scale-z-150",
-  "-scale-z-200",
-  "-scroll-m-0",
+  "-scale-y-50",
+  "-scale-y-75",
+  "-scale-y-90",
+  "-scale-y-95",
   "-scroll-m-0.5",
   "-scroll-m-1",
-  "-scroll-m-1.5",
-  "-scroll-m-2",
-  "-scroll-m-2.5",
   "-scroll-m-3",
-  "-scroll-m-3.5",
   "-scroll-m-4",
-  "-scroll-m-5",
-  "-scroll-m-6",
-  "-scroll-m-7",
-  "-scroll-m-8",
-  "-scroll-m-9",
-  "-scroll-m-10",
-  "-scroll-m-11",
-  "-scroll-m-12",
-  "-scroll-m-14",
-  "-scroll-m-16",
-  "-scroll-m-20",
-  "-scroll-m-24",
-  "-scroll-m-28",
-  "-scroll-m-32",
-  "-scroll-m-36",
-  "-scroll-m-40",
-  "-scroll-m-44",
-  "-scroll-m-48",
-  "-scroll-m-52",
-  "-scroll-m-56",
-  "-scroll-m-60",
-  "-scroll-m-64",
-  "-scroll-m-72",
-  "-scroll-m-80",
-  "-scroll-m-96",
-  "-scroll-m-px",
-  "-scroll-mb-0",
   "-scroll-mb-0.5",
   "-scroll-mb-1",
-  "-scroll-mb-1.5",
-  "-scroll-mb-2",
-  "-scroll-mb-2.5",
   "-scroll-mb-3",
-  "-scroll-mb-3.5",
   "-scroll-mb-4",
-  "-scroll-mb-5",
-  "-scroll-mb-6",
-  "-scroll-mb-7",
-  "-scroll-mb-8",
-  "-scroll-mb-9",
-  "-scroll-mb-10",
-  "-scroll-mb-11",
-  "-scroll-mb-12",
-  "-scroll-mb-14",
-  "-scroll-mb-16",
-  "-scroll-mb-20",
-  "-scroll-mb-24",
-  "-scroll-mb-28",
-  "-scroll-mb-32",
-  "-scroll-mb-36",
-  "-scroll-mb-40",
-  "-scroll-mb-44",
-  "-scroll-mb-48",
-  "-scroll-mb-52",
-  "-scroll-mb-56",
-  "-scroll-mb-60",
-  "-scroll-mb-64",
-  "-scroll-mb-72",
-  "-scroll-mb-80",
-  "-scroll-mb-96",
-  "-scroll-mb-px",
-  "-scroll-mbe-0",
-  "-scroll-mbe-0.5",
-  "-scroll-mbe-1",
-  "-scroll-mbe-1.5",
-  "-scroll-mbe-2",
-  "-scroll-mbe-2.5",
-  "-scroll-mbe-3",
-  "-scroll-mbe-3.5",
-  "-scroll-mbe-4",
-  "-scroll-mbe-5",
-  "-scroll-mbe-6",
-  "-scroll-mbe-7",
-  "-scroll-mbe-8",
-  "-scroll-mbe-9",
-  "-scroll-mbe-10",
-  "-scroll-mbe-11",
-  "-scroll-mbe-12",
-  "-scroll-mbe-14",
-  "-scroll-mbe-16",
-  "-scroll-mbe-20",
-  "-scroll-mbe-24",
-  "-scroll-mbe-28",
-  "-scroll-mbe-32",
-  "-scroll-mbe-36",
-  "-scroll-mbe-40",
-  "-scroll-mbe-44",
-  "-scroll-mbe-48",
-  "-scroll-mbe-52",
-  "-scroll-mbe-56",
-  "-scroll-mbe-60",
-  "-scroll-mbe-64",
-  "-scroll-mbe-72",
-  "-scroll-mbe-80",
-  "-scroll-mbe-96",
-  "-scroll-mbe-px",
-  "-scroll-mbs-0",
-  "-scroll-mbs-0.5",
-  "-scroll-mbs-1",
-  "-scroll-mbs-1.5",
-  "-scroll-mbs-2",
-  "-scroll-mbs-2.5",
-  "-scroll-mbs-3",
-  "-scroll-mbs-3.5",
-  "-scroll-mbs-4",
-  "-scroll-mbs-5",
-  "-scroll-mbs-6",
-  "-scroll-mbs-7",
-  "-scroll-mbs-8",
-  "-scroll-mbs-9",
-  "-scroll-mbs-10",
-  "-scroll-mbs-11",
-  "-scroll-mbs-12",
-  "-scroll-mbs-14",
-  "-scroll-mbs-16",
-  "-scroll-mbs-20",
-  "-scroll-mbs-24",
-  "-scroll-mbs-28",
-  "-scroll-mbs-32",
-  "-scroll-mbs-36",
-  "-scroll-mbs-40",
-  "-scroll-mbs-44",
-  "-scroll-mbs-48",
-  "-scroll-mbs-52",
-  "-scroll-mbs-56",
-  "-scroll-mbs-60",
-  "-scroll-mbs-64",
-  "-scroll-mbs-72",
-  "-scroll-mbs-80",
-  "-scroll-mbs-96",
-  "-scroll-mbs-px",
-  "-scroll-me-0",
   "-scroll-me-0.5",
   "-scroll-me-1",
-  "-scroll-me-1.5",
-  "-scroll-me-2",
-  "-scroll-me-2.5",
   "-scroll-me-3",
-  "-scroll-me-3.5",
   "-scroll-me-4",
-  "-scroll-me-5",
-  "-scroll-me-6",
-  "-scroll-me-7",
-  "-scroll-me-8",
-  "-scroll-me-9",
-  "-scroll-me-10",
-  "-scroll-me-11",
-  "-scroll-me-12",
-  "-scroll-me-14",
-  "-scroll-me-16",
-  "-scroll-me-20",
-  "-scroll-me-24",
-  "-scroll-me-28",
-  "-scroll-me-32",
-  "-scroll-me-36",
-  "-scroll-me-40",
-  "-scroll-me-44",
-  "-scroll-me-48",
-  "-scroll-me-52",
-  "-scroll-me-56",
-  "-scroll-me-60",
-  "-scroll-me-64",
-  "-scroll-me-72",
-  "-scroll-me-80",
-  "-scroll-me-96",
-  "-scroll-me-px",
-  "-scroll-ml-0",
   "-scroll-ml-0.5",
   "-scroll-ml-1",
-  "-scroll-ml-1.5",
-  "-scroll-ml-2",
-  "-scroll-ml-2.5",
   "-scroll-ml-3",
-  "-scroll-ml-3.5",
   "-scroll-ml-4",
-  "-scroll-ml-5",
-  "-scroll-ml-6",
-  "-scroll-ml-7",
-  "-scroll-ml-8",
-  "-scroll-ml-9",
-  "-scroll-ml-10",
-  "-scroll-ml-11",
-  "-scroll-ml-12",
-  "-scroll-ml-14",
-  "-scroll-ml-16",
-  "-scroll-ml-20",
-  "-scroll-ml-24",
-  "-scroll-ml-28",
-  "-scroll-ml-32",
-  "-scroll-ml-36",
-  "-scroll-ml-40",
-  "-scroll-ml-44",
-  "-scroll-ml-48",
-  "-scroll-ml-52",
-  "-scroll-ml-56",
-  "-scroll-ml-60",
-  "-scroll-ml-64",
-  "-scroll-ml-72",
-  "-scroll-ml-80",
-  "-scroll-ml-96",
-  "-scroll-ml-px",
-  "-scroll-mr-0",
   "-scroll-mr-0.5",
   "-scroll-mr-1",
-  "-scroll-mr-1.5",
-  "-scroll-mr-2",
-  "-scroll-mr-2.5",
   "-scroll-mr-3",
-  "-scroll-mr-3.5",
   "-scroll-mr-4",
-  "-scroll-mr-5",
-  "-scroll-mr-6",
-  "-scroll-mr-7",
-  "-scroll-mr-8",
-  "-scroll-mr-9",
-  "-scroll-mr-10",
-  "-scroll-mr-11",
-  "-scroll-mr-12",
-  "-scroll-mr-14",
-  "-scroll-mr-16",
-  "-scroll-mr-20",
-  "-scroll-mr-24",
-  "-scroll-mr-28",
-  "-scroll-mr-32",
-  "-scroll-mr-36",
-  "-scroll-mr-40",
-  "-scroll-mr-44",
-  "-scroll-mr-48",
-  "-scroll-mr-52",
-  "-scroll-mr-56",
-  "-scroll-mr-60",
-  "-scroll-mr-64",
-  "-scroll-mr-72",
-  "-scroll-mr-80",
-  "-scroll-mr-96",
-  "-scroll-mr-px",
-  "-scroll-ms-0",
   "-scroll-ms-0.5",
   "-scroll-ms-1",
-  "-scroll-ms-1.5",
-  "-scroll-ms-2",
-  "-scroll-ms-2.5",
   "-scroll-ms-3",
-  "-scroll-ms-3.5",
   "-scroll-ms-4",
-  "-scroll-ms-5",
-  "-scroll-ms-6",
-  "-scroll-ms-7",
-  "-scroll-ms-8",
-  "-scroll-ms-9",
-  "-scroll-ms-10",
-  "-scroll-ms-11",
-  "-scroll-ms-12",
-  "-scroll-ms-14",
-  "-scroll-ms-16",
-  "-scroll-ms-20",
-  "-scroll-ms-24",
-  "-scroll-ms-28",
-  "-scroll-ms-32",
-  "-scroll-ms-36",
-  "-scroll-ms-40",
-  "-scroll-ms-44",
-  "-scroll-ms-48",
-  "-scroll-ms-52",
-  "-scroll-ms-56",
-  "-scroll-ms-60",
-  "-scroll-ms-64",
-  "-scroll-ms-72",
-  "-scroll-ms-80",
-  "-scroll-ms-96",
-  "-scroll-ms-px",
-  "-scroll-mt-0",
   "-scroll-mt-0.5",
   "-scroll-mt-1",
-  "-scroll-mt-1.5",
-  "-scroll-mt-2",
-  "-scroll-mt-2.5",
   "-scroll-mt-3",
-  "-scroll-mt-3.5",
   "-scroll-mt-4",
-  "-scroll-mt-5",
-  "-scroll-mt-6",
-  "-scroll-mt-7",
-  "-scroll-mt-8",
-  "-scroll-mt-9",
-  "-scroll-mt-10",
-  "-scroll-mt-11",
-  "-scroll-mt-12",
-  "-scroll-mt-14",
-  "-scroll-mt-16",
-  "-scroll-mt-20",
-  "-scroll-mt-24",
-  "-scroll-mt-28",
-  "-scroll-mt-32",
-  "-scroll-mt-36",
-  "-scroll-mt-40",
-  "-scroll-mt-44",
-  "-scroll-mt-48",
-  "-scroll-mt-52",
-  "-scroll-mt-56",
-  "-scroll-mt-60",
-  "-scroll-mt-64",
-  "-scroll-mt-72",
-  "-scroll-mt-80",
-  "-scroll-mt-96",
-  "-scroll-mt-px",
-  "-scroll-mx-0",
   "-scroll-mx-0.5",
   "-scroll-mx-1",
-  "-scroll-mx-1.5",
-  "-scroll-mx-2",
-  "-scroll-mx-2.5",
   "-scroll-mx-3",
-  "-scroll-mx-3.5",
   "-scroll-mx-4",
-  "-scroll-mx-5",
-  "-scroll-mx-6",
-  "-scroll-mx-7",
-  "-scroll-mx-8",
-  "-scroll-mx-9",
-  "-scroll-mx-10",
-  "-scroll-mx-11",
-  "-scroll-mx-12",
-  "-scroll-mx-14",
-  "-scroll-mx-16",
-  "-scroll-mx-20",
-  "-scroll-mx-24",
-  "-scroll-mx-28",
-  "-scroll-mx-32",
-  "-scroll-mx-36",
-  "-scroll-mx-40",
-  "-scroll-mx-44",
-  "-scroll-mx-48",
-  "-scroll-mx-52",
-  "-scroll-mx-56",
-  "-scroll-mx-60",
-  "-scroll-mx-64",
-  "-scroll-mx-72",
-  "-scroll-mx-80",
-  "-scroll-mx-96",
-  "-scroll-mx-px",
-  "-scroll-my-0",
   "-scroll-my-0.5",
   "-scroll-my-1",
-  "-scroll-my-1.5",
-  "-scroll-my-2",
-  "-scroll-my-2.5",
   "-scroll-my-3",
-  "-scroll-my-3.5",
   "-scroll-my-4",
-  "-scroll-my-5",
-  "-scroll-my-6",
-  "-scroll-my-7",
-  "-scroll-my-8",
-  "-scroll-my-9",
-  "-scroll-my-10",
-  "-scroll-my-11",
-  "-scroll-my-12",
-  "-scroll-my-14",
-  "-scroll-my-16",
-  "-scroll-my-20",
-  "-scroll-my-24",
-  "-scroll-my-28",
-  "-scroll-my-32",
-  "-scroll-my-36",
-  "-scroll-my-40",
-  "-scroll-my-44",
-  "-scroll-my-48",
-  "-scroll-my-52",
-  "-scroll-my-56",
-  "-scroll-my-60",
-  "-scroll-my-64",
-  "-scroll-my-72",
-  "-scroll-my-80",
-  "-scroll-my-96",
-  "-scroll-my-px",
+  "-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",
   "-skew-0",
   "-skew-1",
+  "-skew-12",
   "-skew-2",
   "-skew-3",
   "-skew-6",
-  "-skew-12",
   "-skew-x-0",
   "-skew-x-1",
+  "-skew-x-12",
   "-skew-x-2",
   "-skew-x-3",
   "-skew-x-6",
-  "-skew-x-12",
   "-skew-y-0",
   "-skew-y-1",
+  "-skew-y-12",
   "-skew-y-2",
   "-skew-y-3",
   "-skew-y-6",
-  "-skew-y-12",
-  "-space-x-0",
   "-space-x-0.5",
   "-space-x-1",
-  "-space-x-1.5",
-  "-space-x-2",
-  "-space-x-2.5",
   "-space-x-3",
-  "-space-x-3.5",
   "-space-x-4",
-  "-space-x-5",
-  "-space-x-6",
-  "-space-x-7",
-  "-space-x-8",
-  "-space-x-9",
-  "-space-x-10",
-  "-space-x-11",
-  "-space-x-12",
-  "-space-x-14",
-  "-space-x-16",
-  "-space-x-20",
-  "-space-x-24",
-  "-space-x-28",
-  "-space-x-32",
-  "-space-x-36",
-  "-space-x-40",
-  "-space-x-44",
-  "-space-x-48",
-  "-space-x-52",
-  "-space-x-56",
-  "-space-x-60",
-  "-space-x-64",
-  "-space-x-72",
-  "-space-x-80",
-  "-space-x-96",
-  "-space-x-px",
-  "-space-y-0",
   "-space-y-0.5",
   "-space-y-1",
-  "-space-y-1.5",
-  "-space-y-2",
-  "-space-y-2.5",
   "-space-y-3",
-  "-space-y-3.5",
   "-space-y-4",
-  "-space-y-5",
-  "-space-y-6",
-  "-space-y-7",
-  "-space-y-8",
-  "-space-y-9",
-  "-space-y-10",
-  "-space-y-11",
-  "-space-y-12",
-  "-space-y-14",
-  "-space-y-16",
-  "-space-y-20",
-  "-space-y-24",
-  "-space-y-28",
-  "-space-y-32",
-  "-space-y-36",
-  "-space-y-40",
-  "-space-y-44",
-  "-space-y-48",
-  "-space-y-52",
-  "-space-y-56",
-  "-space-y-60",
-  "-space-y-64",
-  "-space-y-72",
-  "-space-y-80",
-  "-space-y-96",
-  "-space-y-px",
-  "-start-full",
-  "-start-px",
-  "-top-0",
+  "-start-0.5",
+  "-start-1",
+  "-start-3",
+  "-start-4",
   "-top-0.5",
   "-top-1",
-  "-top-1.5",
-  "-top-2",
-  "-top-2.5",
   "-top-3",
-  "-top-3.5",
   "-top-4",
-  "-top-5",
-  "-top-6",
-  "-top-7",
-  "-top-8",
-  "-top-9",
-  "-top-10",
-  "-top-11",
-  "-top-12",
-  "-top-14",
-  "-top-16",
-  "-top-20",
-  "-top-24",
-  "-top-28",
-  "-top-32",
-  "-top-36",
-  "-top-40",
-  "-top-44",
-  "-top-48",
-  "-top-52",
-  "-top-56",
-  "-top-60",
-  "-top-64",
-  "-top-72",
-  "-top-80",
-  "-top-96",
-  "-top-1/2",
-  "-top-1/3",
-  "-top-1/4",
-  "-top-1/5",
-  "-top-1/6",
-  "-top-1/12",
-  "-top-2/3",
-  "-top-2/4",
-  "-top-2/5",
-  "-top-2/6",
-  "-top-2/12",
-  "-top-3/4",
-  "-top-3/5",
-  "-top-3/6",
-  "-top-3/12",
-  "-top-4/5",
-  "-top-4/6",
-  "-top-4/12",
-  "-top-5/6",
-  "-top-5/12",
-  "-top-6/12",
-  "-top-7/12",
-  "-top-8/12",
-  "-top-9/12",
-  "-top-10/12",
-  "-top-11/12",
-  "-top-full",
-  "-top-px",
-  "-translate-0",
   "-translate-0.5",
   "-translate-1",
-  "-translate-1.5",
-  "-translate-2",
-  "-translate-2.5",
   "-translate-3",
-  "-translate-3.5",
   "-translate-4",
-  "-translate-5",
-  "-translate-6",
-  "-translate-7",
-  "-translate-8",
-  "-translate-9",
-  "-translate-10",
-  "-translate-11",
-  "-translate-12",
-  "-translate-14",
-  "-translate-16",
-  "-translate-20",
-  "-translate-24",
-  "-translate-28",
-  "-translate-32",
-  "-translate-36",
-  "-translate-40",
-  "-translate-44",
-  "-translate-48",
-  "-translate-52",
-  "-translate-56",
-  "-translate-60",
-  "-translate-64",
-  "-translate-72",
-  "-translate-80",
-  "-translate-96",
-  "-translate-1/2",
-  "-translate-1/3",
-  "-translate-1/4",
-  "-translate-1/5",
-  "-translate-1/6",
-  "-translate-1/12",
-  "-translate-2/3",
-  "-translate-2/4",
-  "-translate-2/5",
-  "-translate-2/6",
-  "-translate-2/12",
-  "-translate-3/4",
-  "-translate-3/5",
-  "-translate-3/6",
-  "-translate-3/12",
-  "-translate-4/5",
-  "-translate-4/6",
-  "-translate-4/12",
-  "-translate-5/6",
-  "-translate-5/12",
-  "-translate-6/12",
-  "-translate-7/12",
-  "-translate-8/12",
-  "-translate-9/12",
-  "-translate-10/12",
-  "-translate-11/12",
-  "-translate-full",
-  "-translate-px",
-  "-translate-x-0",
   "-translate-x-0.5",
   "-translate-x-1",
-  "-translate-x-1.5",
-  "-translate-x-2",
-  "-translate-x-2.5",
   "-translate-x-3",
-  "-translate-x-3.5",
   "-translate-x-4",
-  "-translate-x-5",
-  "-translate-x-6",
-  "-translate-x-7",
-  "-translate-x-8",
-  "-translate-x-9",
-  "-translate-x-10",
-  "-translate-x-11",
-  "-translate-x-12",
-  "-translate-x-14",
-  "-translate-x-16",
-  "-translate-x-20",
-  "-translate-x-24",
-  "-translate-x-28",
-  "-translate-x-32",
-  "-translate-x-36",
-  "-translate-x-40",
-  "-translate-x-44",
-  "-translate-x-48",
-  "-translate-x-52",
-  "-translate-x-56",
-  "-translate-x-60",
-  "-translate-x-64",
-  "-translate-x-72",
-  "-translate-x-80",
-  "-translate-x-96",
-  "-translate-x-1/2",
-  "-translate-x-1/3",
-  "-translate-x-1/4",
-  "-translate-x-1/5",
-  "-translate-x-1/6",
-  "-translate-x-1/12",
-  "-translate-x-2/3",
-  "-translate-x-2/4",
-  "-translate-x-2/5",
-  "-translate-x-2/6",
-  "-translate-x-2/12",
-  "-translate-x-3/4",
-  "-translate-x-3/5",
-  "-translate-x-3/6",
-  "-translate-x-3/12",
-  "-translate-x-4/5",
-  "-translate-x-4/6",
-  "-translate-x-4/12",
-  "-translate-x-5/6",
-  "-translate-x-5/12",
-  "-translate-x-6/12",
-  "-translate-x-7/12",
-  "-translate-x-8/12",
-  "-translate-x-9/12",
-  "-translate-x-10/12",
-  "-translate-x-11/12",
-  "-translate-x-full",
-  "-translate-x-px",
-  "-translate-y-0",
   "-translate-y-0.5",
   "-translate-y-1",
-  "-translate-y-1.5",
-  "-translate-y-2",
-  "-translate-y-2.5",
   "-translate-y-3",
-  "-translate-y-3.5",
   "-translate-y-4",
-  "-translate-y-5",
-  "-translate-y-6",
-  "-translate-y-7",
-  "-translate-y-8",
-  "-translate-y-9",
-  "-translate-y-10",
-  "-translate-y-11",
-  "-translate-y-12",
-  "-translate-y-14",
-  "-translate-y-16",
-  "-translate-y-20",
-  "-translate-y-24",
-  "-translate-y-28",
-  "-translate-y-32",
-  "-translate-y-36",
-  "-translate-y-40",
-  "-translate-y-44",
-  "-translate-y-48",
-  "-translate-y-52",
-  "-translate-y-56",
-  "-translate-y-60",
-  "-translate-y-64",
-  "-translate-y-72",
-  "-translate-y-80",
-  "-translate-y-96",
-  "-translate-y-1/2",
-  "-translate-y-1/3",
-  "-translate-y-1/4",
-  "-translate-y-1/5",
-  "-translate-y-1/6",
-  "-translate-y-1/12",
-  "-translate-y-2/3",
-  "-translate-y-2/4",
-  "-translate-y-2/5",
-  "-translate-y-2/6",
-  "-translate-y-2/12",
-  "-translate-y-3/4",
-  "-translate-y-3/5",
-  "-translate-y-3/6",
-  "-translate-y-3/12",
-  "-translate-y-4/5",
-  "-translate-y-4/6",
-  "-translate-y-4/12",
-  "-translate-y-5/6",
-  "-translate-y-5/12",
-  "-translate-y-6/12",
-  "-translate-y-7/12",
-  "-translate-y-8/12",
-  "-translate-y-9/12",
-  "-translate-y-10/12",
-  "-translate-y-11/12",
-  "-translate-y-full",
-  "-translate-y-px",
-  "-translate-z-0",
-  "-translate-z-0.5",
-  "-translate-z-1",
-  "-translate-z-1.5",
-  "-translate-z-2",
-  "-translate-z-2.5",
-  "-translate-z-3",
-  "-translate-z-3.5",
-  "-translate-z-4",
-  "-translate-z-5",
-  "-translate-z-6",
-  "-translate-z-7",
-  "-translate-z-8",
-  "-translate-z-9",
-  "-translate-z-10",
-  "-translate-z-11",
-  "-translate-z-12",
-  "-translate-z-14",
-  "-translate-z-16",
-  "-translate-z-20",
-  "-translate-z-24",
-  "-translate-z-28",
-  "-translate-z-32",
-  "-translate-z-36",
-  "-translate-z-40",
-  "-translate-z-44",
-  "-translate-z-48",
-  "-translate-z-52",
-  "-translate-z-56",
-  "-translate-z-60",
-  "-translate-z-64",
-  "-translate-z-72",
-  "-translate-z-80",
-  "-translate-z-96",
-  "-translate-z-px",
   "-underline-offset-0",
   "-underline-offset-1",
   "-underline-offset-2",
@@ -2196,79 +253,10 @@ exports[`getClassList 1`] = `
   "-z-30",
   "-z-40",
   "-z-50",
-  "@container",
   "@container-normal",
   "absolute",
-  "accent-auto",
   "accent-current",
-  "accent-current/0",
-  "accent-current/5",
-  "accent-current/10",
-  "accent-current/15",
-  "accent-current/20",
-  "accent-current/25",
-  "accent-current/30",
-  "accent-current/35",
-  "accent-current/40",
-  "accent-current/45",
-  "accent-current/50",
-  "accent-current/55",
-  "accent-current/60",
-  "accent-current/65",
-  "accent-current/70",
-  "accent-current/75",
-  "accent-current/80",
-  "accent-current/85",
-  "accent-current/90",
-  "accent-current/95",
-  "accent-current/100",
-  "accent-current/background",
-  "accent-inherit",
-  "accent-inherit/0",
-  "accent-inherit/5",
-  "accent-inherit/10",
-  "accent-inherit/15",
-  "accent-inherit/20",
-  "accent-inherit/25",
-  "accent-inherit/30",
-  "accent-inherit/35",
-  "accent-inherit/40",
-  "accent-inherit/45",
-  "accent-inherit/50",
-  "accent-inherit/55",
-  "accent-inherit/60",
-  "accent-inherit/65",
-  "accent-inherit/70",
-  "accent-inherit/75",
-  "accent-inherit/80",
-  "accent-inherit/85",
-  "accent-inherit/90",
-  "accent-inherit/95",
-  "accent-inherit/100",
-  "accent-inherit/background",
   "accent-transparent",
-  "accent-transparent/0",
-  "accent-transparent/5",
-  "accent-transparent/10",
-  "accent-transparent/15",
-  "accent-transparent/20",
-  "accent-transparent/25",
-  "accent-transparent/30",
-  "accent-transparent/35",
-  "accent-transparent/40",
-  "accent-transparent/45",
-  "accent-transparent/50",
-  "accent-transparent/55",
-  "accent-transparent/60",
-  "accent-transparent/65",
-  "accent-transparent/70",
-  "accent-transparent/75",
-  "accent-transparent/80",
-  "accent-transparent/85",
-  "accent-transparent/90",
-  "accent-transparent/95",
-  "accent-transparent/100",
-  "accent-transparent/background",
   "align-baseline",
   "align-bottom",
   "align-middle",
@@ -2292,46 +280,45 @@ exports[`getClassList 1`] = `
   "auto-rows-fr",
   "auto-rows-max",
   "auto-rows-min",
-  "backdrop-blur-none",
   "backdrop-brightness-0",
-  "backdrop-brightness-50",
-  "backdrop-brightness-75",
-  "backdrop-brightness-90",
-  "backdrop-brightness-95",
   "backdrop-brightness-100",
   "backdrop-brightness-105",
   "backdrop-brightness-110",
   "backdrop-brightness-125",
   "backdrop-brightness-150",
   "backdrop-brightness-200",
+  "backdrop-brightness-50",
+  "backdrop-brightness-75",
+  "backdrop-brightness-90",
+  "backdrop-brightness-95",
   "backdrop-contrast-0",
-  "backdrop-contrast-50",
-  "backdrop-contrast-75",
   "backdrop-contrast-100",
   "backdrop-contrast-125",
   "backdrop-contrast-150",
   "backdrop-contrast-200",
+  "backdrop-contrast-50",
+  "backdrop-contrast-75",
   "backdrop-grayscale",
   "backdrop-grayscale-0",
+  "backdrop-grayscale-100",
   "backdrop-grayscale-25",
   "backdrop-grayscale-50",
   "backdrop-grayscale-75",
-  "backdrop-grayscale-100",
   "backdrop-hue-rotate-0",
   "backdrop-hue-rotate-15",
+  "backdrop-hue-rotate-180",
   "backdrop-hue-rotate-30",
   "backdrop-hue-rotate-60",
   "backdrop-hue-rotate-90",
-  "backdrop-hue-rotate-180",
   "backdrop-invert",
   "backdrop-invert-0",
+  "backdrop-invert-100",
   "backdrop-invert-25",
   "backdrop-invert-50",
   "backdrop-invert-75",
-  "backdrop-invert-100",
   "backdrop-opacity-0",
-  "backdrop-opacity-5",
   "backdrop-opacity-10",
+  "backdrop-opacity-100",
   "backdrop-opacity-15",
   "backdrop-opacity-20",
   "backdrop-opacity-25",
@@ -2339,6 +326,7 @@ exports[`getClassList 1`] = `
   "backdrop-opacity-35",
   "backdrop-opacity-40",
   "backdrop-opacity-45",
+  "backdrop-opacity-5",
   "backdrop-opacity-50",
   "backdrop-opacity-55",
   "backdrop-opacity-60",
@@ -2349,84 +337,22 @@ exports[`getClassList 1`] = `
   "backdrop-opacity-85",
   "backdrop-opacity-90",
   "backdrop-opacity-95",
-  "backdrop-opacity-100",
-  "backdrop-opacity-background",
   "backdrop-saturate-0",
-  "backdrop-saturate-50",
   "backdrop-saturate-100",
   "backdrop-saturate-150",
   "backdrop-saturate-200",
+  "backdrop-saturate-50",
   "backdrop-sepia",
   "backdrop-sepia-0",
-  "backdrop-sepia-50",
   "backdrop-sepia-100",
-  "backface-hidden",
-  "backface-visible",
-  "basis-0",
+  "backdrop-sepia-50",
   "basis-0.5",
   "basis-1",
-  "basis-1.5",
-  "basis-2",
-  "basis-2.5",
   "basis-3",
-  "basis-3.5",
   "basis-4",
-  "basis-5",
-  "basis-6",
-  "basis-7",
-  "basis-8",
-  "basis-9",
-  "basis-10",
-  "basis-11",
-  "basis-12",
-  "basis-14",
-  "basis-16",
-  "basis-20",
-  "basis-24",
-  "basis-28",
-  "basis-32",
-  "basis-36",
-  "basis-40",
-  "basis-44",
-  "basis-48",
-  "basis-52",
-  "basis-56",
-  "basis-60",
-  "basis-64",
-  "basis-72",
-  "basis-80",
-  "basis-96",
+  "basis-4",
   "basis-auto",
   "basis-full",
-  "basis-lg",
-  "basis-md",
-  "basis-1/2",
-  "basis-1/3",
-  "basis-1/4",
-  "basis-1/5",
-  "basis-1/6",
-  "basis-1/12",
-  "basis-2/3",
-  "basis-2/4",
-  "basis-2/5",
-  "basis-2/6",
-  "basis-2/12",
-  "basis-3/4",
-  "basis-3/5",
-  "basis-3/6",
-  "basis-3/12",
-  "basis-4/5",
-  "basis-4/6",
-  "basis-4/12",
-  "basis-5/6",
-  "basis-5/12",
-  "basis-6/12",
-  "basis-7/12",
-  "basis-8/12",
-  "basis-9/12",
-  "basis-10/12",
-  "basis-11/12",
-  "basis-px",
   "bg-auto",
   "bg-blend-color",
   "bg-blend-color-burn",
@@ -2445,1713 +371,99 @@ exports[`getClassList 1`] = `
   "bg-blend-screen",
   "bg-blend-soft-light",
   "bg-bottom",
-  "bg-bottom-left",
-  "bg-bottom-right",
   "bg-center",
   "bg-clip-border",
   "bg-clip-content",
   "bg-clip-padding",
   "bg-clip-text",
-  "bg-conic",
-  "bg-conic/oklab",
-  "bg-conic/oklch",
-  "bg-conic/srgb",
-  "bg-conic/hsl",
-  "bg-conic/longer",
-  "bg-conic/shorter",
-  "bg-conic/increasing",
-  "bg-conic/decreasing",
-  "bg-conic-0",
-  "bg-conic-0/oklab",
-  "bg-conic-0/oklch",
-  "bg-conic-0/srgb",
-  "bg-conic-0/hsl",
-  "bg-conic-0/longer",
-  "bg-conic-0/shorter",
-  "bg-conic-0/increasing",
-  "bg-conic-0/decreasing",
-  "bg-conic-30",
-  "bg-conic-30/oklab",
-  "bg-conic-30/oklch",
-  "bg-conic-30/srgb",
-  "bg-conic-30/hsl",
-  "bg-conic-30/longer",
-  "bg-conic-30/shorter",
-  "bg-conic-30/increasing",
-  "bg-conic-30/decreasing",
-  "bg-conic-60",
-  "bg-conic-60/oklab",
-  "bg-conic-60/oklch",
-  "bg-conic-60/srgb",
-  "bg-conic-60/hsl",
-  "bg-conic-60/longer",
-  "bg-conic-60/shorter",
-  "bg-conic-60/increasing",
-  "bg-conic-60/decreasing",
-  "bg-conic-90",
-  "bg-conic-90/oklab",
-  "bg-conic-90/oklch",
-  "bg-conic-90/srgb",
-  "bg-conic-90/hsl",
-  "bg-conic-90/longer",
-  "bg-conic-90/shorter",
-  "bg-conic-90/increasing",
-  "bg-conic-90/decreasing",
-  "bg-conic-120",
-  "bg-conic-120/oklab",
-  "bg-conic-120/oklch",
-  "bg-conic-120/srgb",
-  "bg-conic-120/hsl",
-  "bg-conic-120/longer",
-  "bg-conic-120/shorter",
-  "bg-conic-120/increasing",
-  "bg-conic-120/decreasing",
-  "bg-conic-150",
-  "bg-conic-150/oklab",
-  "bg-conic-150/oklch",
-  "bg-conic-150/srgb",
-  "bg-conic-150/hsl",
-  "bg-conic-150/longer",
-  "bg-conic-150/shorter",
-  "bg-conic-150/increasing",
-  "bg-conic-150/decreasing",
-  "bg-conic-180",
-  "bg-conic-180/oklab",
-  "bg-conic-180/oklch",
-  "bg-conic-180/srgb",
-  "bg-conic-180/hsl",
-  "bg-conic-180/longer",
-  "bg-conic-180/shorter",
-  "bg-conic-180/increasing",
-  "bg-conic-180/decreasing",
-  "bg-conic-210",
-  "bg-conic-210/oklab",
-  "bg-conic-210/oklch",
-  "bg-conic-210/srgb",
-  "bg-conic-210/hsl",
-  "bg-conic-210/longer",
-  "bg-conic-210/shorter",
-  "bg-conic-210/increasing",
-  "bg-conic-210/decreasing",
-  "bg-conic-240",
-  "bg-conic-240/oklab",
-  "bg-conic-240/oklch",
-  "bg-conic-240/srgb",
-  "bg-conic-240/hsl",
-  "bg-conic-240/longer",
-  "bg-conic-240/shorter",
-  "bg-conic-240/increasing",
-  "bg-conic-240/decreasing",
-  "bg-conic-270",
-  "bg-conic-270/oklab",
-  "bg-conic-270/oklch",
-  "bg-conic-270/srgb",
-  "bg-conic-270/hsl",
-  "bg-conic-270/longer",
-  "bg-conic-270/shorter",
-  "bg-conic-270/increasing",
-  "bg-conic-270/decreasing",
-  "bg-conic-300",
-  "bg-conic-300/oklab",
-  "bg-conic-300/oklch",
-  "bg-conic-300/srgb",
-  "bg-conic-300/hsl",
-  "bg-conic-300/longer",
-  "bg-conic-300/shorter",
-  "bg-conic-300/increasing",
-  "bg-conic-300/decreasing",
-  "bg-conic-330",
-  "bg-conic-330/oklab",
-  "bg-conic-330/oklch",
-  "bg-conic-330/srgb",
-  "bg-conic-330/hsl",
-  "bg-conic-330/longer",
-  "bg-conic-330/shorter",
-  "bg-conic-330/increasing",
-  "bg-conic-330/decreasing",
   "bg-contain",
   "bg-cover",
   "bg-current",
-  "bg-current/0",
-  "bg-current/5",
-  "bg-current/10",
-  "bg-current/15",
-  "bg-current/20",
-  "bg-current/25",
-  "bg-current/30",
-  "bg-current/35",
-  "bg-current/40",
-  "bg-current/45",
-  "bg-current/50",
-  "bg-current/55",
-  "bg-current/60",
-  "bg-current/65",
-  "bg-current/70",
-  "bg-current/75",
-  "bg-current/80",
-  "bg-current/85",
-  "bg-current/90",
-  "bg-current/95",
-  "bg-current/100",
-  "bg-current/background",
   "bg-fixed",
+  "bg-gradient-to-b",
+  "bg-gradient-to-bl",
+  "bg-gradient-to-br",
+  "bg-gradient-to-l",
+  "bg-gradient-to-r",
+  "bg-gradient-to-t",
+  "bg-gradient-to-tl",
+  "bg-gradient-to-tr",
   "bg-inherit",
-  "bg-inherit/0",
-  "bg-inherit/5",
-  "bg-inherit/10",
-  "bg-inherit/15",
-  "bg-inherit/20",
-  "bg-inherit/25",
-  "bg-inherit/30",
-  "bg-inherit/35",
-  "bg-inherit/40",
-  "bg-inherit/45",
-  "bg-inherit/50",
-  "bg-inherit/55",
-  "bg-inherit/60",
-  "bg-inherit/65",
-  "bg-inherit/70",
-  "bg-inherit/75",
-  "bg-inherit/80",
-  "bg-inherit/85",
-  "bg-inherit/90",
-  "bg-inherit/95",
-  "bg-inherit/100",
-  "bg-inherit/background",
   "bg-left",
-  "bg-linear-0",
-  "bg-linear-0/oklab",
-  "bg-linear-0/oklch",
-  "bg-linear-0/srgb",
-  "bg-linear-0/hsl",
-  "bg-linear-0/longer",
-  "bg-linear-0/shorter",
-  "bg-linear-0/increasing",
-  "bg-linear-0/decreasing",
-  "bg-linear-30",
-  "bg-linear-30/oklab",
-  "bg-linear-30/oklch",
-  "bg-linear-30/srgb",
-  "bg-linear-30/hsl",
-  "bg-linear-30/longer",
-  "bg-linear-30/shorter",
-  "bg-linear-30/increasing",
-  "bg-linear-30/decreasing",
-  "bg-linear-60",
-  "bg-linear-60/oklab",
-  "bg-linear-60/oklch",
-  "bg-linear-60/srgb",
-  "bg-linear-60/hsl",
-  "bg-linear-60/longer",
-  "bg-linear-60/shorter",
-  "bg-linear-60/increasing",
-  "bg-linear-60/decreasing",
-  "bg-linear-90",
-  "bg-linear-90/oklab",
-  "bg-linear-90/oklch",
-  "bg-linear-90/srgb",
-  "bg-linear-90/hsl",
-  "bg-linear-90/longer",
-  "bg-linear-90/shorter",
-  "bg-linear-90/increasing",
-  "bg-linear-90/decreasing",
-  "bg-linear-120",
-  "bg-linear-120/oklab",
-  "bg-linear-120/oklch",
-  "bg-linear-120/srgb",
-  "bg-linear-120/hsl",
-  "bg-linear-120/longer",
-  "bg-linear-120/shorter",
-  "bg-linear-120/increasing",
-  "bg-linear-120/decreasing",
-  "bg-linear-150",
-  "bg-linear-150/oklab",
-  "bg-linear-150/oklch",
-  "bg-linear-150/srgb",
-  "bg-linear-150/hsl",
-  "bg-linear-150/longer",
-  "bg-linear-150/shorter",
-  "bg-linear-150/increasing",
-  "bg-linear-150/decreasing",
-  "bg-linear-180",
-  "bg-linear-180/oklab",
-  "bg-linear-180/oklch",
-  "bg-linear-180/srgb",
-  "bg-linear-180/hsl",
-  "bg-linear-180/longer",
-  "bg-linear-180/shorter",
-  "bg-linear-180/increasing",
-  "bg-linear-180/decreasing",
-  "bg-linear-210",
-  "bg-linear-210/oklab",
-  "bg-linear-210/oklch",
-  "bg-linear-210/srgb",
-  "bg-linear-210/hsl",
-  "bg-linear-210/longer",
-  "bg-linear-210/shorter",
-  "bg-linear-210/increasing",
-  "bg-linear-210/decreasing",
-  "bg-linear-240",
-  "bg-linear-240/oklab",
-  "bg-linear-240/oklch",
-  "bg-linear-240/srgb",
-  "bg-linear-240/hsl",
-  "bg-linear-240/longer",
-  "bg-linear-240/shorter",
-  "bg-linear-240/increasing",
-  "bg-linear-240/decreasing",
-  "bg-linear-270",
-  "bg-linear-270/oklab",
-  "bg-linear-270/oklch",
-  "bg-linear-270/srgb",
-  "bg-linear-270/hsl",
-  "bg-linear-270/longer",
-  "bg-linear-270/shorter",
-  "bg-linear-270/increasing",
-  "bg-linear-270/decreasing",
-  "bg-linear-300",
-  "bg-linear-300/oklab",
-  "bg-linear-300/oklch",
-  "bg-linear-300/srgb",
-  "bg-linear-300/hsl",
-  "bg-linear-300/longer",
-  "bg-linear-300/shorter",
-  "bg-linear-300/increasing",
-  "bg-linear-300/decreasing",
-  "bg-linear-330",
-  "bg-linear-330/oklab",
-  "bg-linear-330/oklch",
-  "bg-linear-330/srgb",
-  "bg-linear-330/hsl",
-  "bg-linear-330/longer",
-  "bg-linear-330/shorter",
-  "bg-linear-330/increasing",
-  "bg-linear-330/decreasing",
-  "bg-linear-to-b",
-  "bg-linear-to-b/oklab",
-  "bg-linear-to-b/oklch",
-  "bg-linear-to-b/srgb",
-  "bg-linear-to-b/hsl",
-  "bg-linear-to-b/longer",
-  "bg-linear-to-b/shorter",
-  "bg-linear-to-b/increasing",
-  "bg-linear-to-b/decreasing",
-  "bg-linear-to-bl",
-  "bg-linear-to-bl/oklab",
-  "bg-linear-to-bl/oklch",
-  "bg-linear-to-bl/srgb",
-  "bg-linear-to-bl/hsl",
-  "bg-linear-to-bl/longer",
-  "bg-linear-to-bl/shorter",
-  "bg-linear-to-bl/increasing",
-  "bg-linear-to-bl/decreasing",
-  "bg-linear-to-br",
-  "bg-linear-to-br/oklab",
-  "bg-linear-to-br/oklch",
-  "bg-linear-to-br/srgb",
-  "bg-linear-to-br/hsl",
-  "bg-linear-to-br/longer",
-  "bg-linear-to-br/shorter",
-  "bg-linear-to-br/increasing",
-  "bg-linear-to-br/decreasing",
-  "bg-linear-to-l",
-  "bg-linear-to-l/oklab",
-  "bg-linear-to-l/oklch",
-  "bg-linear-to-l/srgb",
-  "bg-linear-to-l/hsl",
-  "bg-linear-to-l/longer",
-  "bg-linear-to-l/shorter",
-  "bg-linear-to-l/increasing",
-  "bg-linear-to-l/decreasing",
-  "bg-linear-to-r",
-  "bg-linear-to-r/oklab",
-  "bg-linear-to-r/oklch",
-  "bg-linear-to-r/srgb",
-  "bg-linear-to-r/hsl",
-  "bg-linear-to-r/longer",
-  "bg-linear-to-r/shorter",
-  "bg-linear-to-r/increasing",
-  "bg-linear-to-r/decreasing",
-  "bg-linear-to-t",
-  "bg-linear-to-t/oklab",
-  "bg-linear-to-t/oklch",
-  "bg-linear-to-t/srgb",
-  "bg-linear-to-t/hsl",
-  "bg-linear-to-t/longer",
-  "bg-linear-to-t/shorter",
-  "bg-linear-to-t/increasing",
-  "bg-linear-to-t/decreasing",
-  "bg-linear-to-tl",
-  "bg-linear-to-tl/oklab",
-  "bg-linear-to-tl/oklch",
-  "bg-linear-to-tl/srgb",
-  "bg-linear-to-tl/hsl",
-  "bg-linear-to-tl/longer",
-  "bg-linear-to-tl/shorter",
-  "bg-linear-to-tl/increasing",
-  "bg-linear-to-tl/decreasing",
-  "bg-linear-to-tr",
-  "bg-linear-to-tr/oklab",
-  "bg-linear-to-tr/oklch",
-  "bg-linear-to-tr/srgb",
-  "bg-linear-to-tr/hsl",
-  "bg-linear-to-tr/longer",
-  "bg-linear-to-tr/shorter",
-  "bg-linear-to-tr/increasing",
-  "bg-linear-to-tr/decreasing",
+  "bg-left-bottom",
+  "bg-left-top",
   "bg-local",
   "bg-no-repeat",
   "bg-none",
   "bg-origin-border",
   "bg-origin-content",
   "bg-origin-padding",
-  "bg-radial",
-  "bg-radial/oklab",
-  "bg-radial/oklch",
-  "bg-radial/srgb",
-  "bg-radial/hsl",
-  "bg-radial/longer",
-  "bg-radial/shorter",
-  "bg-radial/increasing",
-  "bg-radial/decreasing",
   "bg-repeat",
-  "bg-repeat-round",
-  "bg-repeat-space",
   "bg-repeat-x",
   "bg-repeat-y",
   "bg-right",
+  "bg-right-bottom",
+  "bg-right-top",
+  "bg-round",
   "bg-scroll",
+  "bg-space",
   "bg-top",
-  "bg-top-left",
-  "bg-top-right",
   "bg-transparent",
-  "bg-transparent/0",
-  "bg-transparent/5",
-  "bg-transparent/10",
-  "bg-transparent/15",
-  "bg-transparent/20",
-  "bg-transparent/25",
-  "bg-transparent/30",
-  "bg-transparent/35",
-  "bg-transparent/40",
-  "bg-transparent/45",
-  "bg-transparent/50",
-  "bg-transparent/55",
-  "bg-transparent/60",
-  "bg-transparent/65",
-  "bg-transparent/70",
-  "bg-transparent/75",
-  "bg-transparent/80",
-  "bg-transparent/85",
-  "bg-transparent/90",
-  "bg-transparent/95",
-  "bg-transparent/100",
-  "bg-transparent/background",
+  "bg-transparent",
   "block",
-  "block-0",
-  "block-0.5",
-  "block-1",
-  "block-1.5",
-  "block-2",
-  "block-2.5",
-  "block-3",
-  "block-3.5",
-  "block-4",
-  "block-5",
-  "block-6",
-  "block-7",
-  "block-8",
-  "block-9",
-  "block-10",
-  "block-11",
-  "block-12",
-  "block-14",
-  "block-16",
-  "block-20",
-  "block-24",
-  "block-28",
-  "block-32",
-  "block-36",
-  "block-40",
-  "block-44",
-  "block-48",
-  "block-52",
-  "block-56",
-  "block-60",
-  "block-64",
-  "block-72",
-  "block-80",
-  "block-96",
-  "block-1/2",
-  "block-1/3",
-  "block-1/4",
-  "block-1/5",
-  "block-1/6",
-  "block-1/12",
-  "block-2/3",
-  "block-2/4",
-  "block-2/5",
-  "block-2/6",
-  "block-2/12",
-  "block-3/4",
-  "block-3/5",
-  "block-3/6",
-  "block-3/12",
-  "block-4/5",
-  "block-4/6",
-  "block-4/12",
-  "block-5/6",
-  "block-5/12",
-  "block-6/12",
-  "block-7/12",
-  "block-8/12",
-  "block-9/12",
-  "block-10/12",
-  "block-11/12",
-  "block-auto",
-  "block-dvh",
-  "block-fit",
-  "block-full",
-  "block-lh",
-  "block-lvh",
-  "block-max",
-  "block-min",
-  "block-px",
-  "block-screen",
-  "block-svh",
-  "blur-none",
   "border",
-  "border/0",
-  "border/5",
-  "border/10",
-  "border/15",
-  "border/20",
-  "border/25",
-  "border/30",
-  "border/35",
-  "border/40",
-  "border/45",
-  "border/50",
-  "border/55",
-  "border/60",
-  "border/65",
-  "border/70",
-  "border/75",
-  "border/80",
-  "border/85",
-  "border/90",
-  "border/95",
-  "border/100",
-  "border/background",
-  "border-0",
-  "border-2",
-  "border-4",
-  "border-8",
   "border-b",
-  "border-b/0",
-  "border-b/5",
-  "border-b/10",
-  "border-b/15",
-  "border-b/20",
-  "border-b/25",
-  "border-b/30",
-  "border-b/35",
-  "border-b/40",
-  "border-b/45",
-  "border-b/50",
-  "border-b/55",
-  "border-b/60",
-  "border-b/65",
-  "border-b/70",
-  "border-b/75",
-  "border-b/80",
-  "border-b/85",
-  "border-b/90",
-  "border-b/95",
-  "border-b/100",
-  "border-b/background",
-  "border-b-0",
-  "border-b-2",
-  "border-b-4",
-  "border-b-8",
   "border-b-current",
-  "border-b-current/0",
-  "border-b-current/5",
-  "border-b-current/10",
-  "border-b-current/15",
-  "border-b-current/20",
-  "border-b-current/25",
-  "border-b-current/30",
-  "border-b-current/35",
-  "border-b-current/40",
-  "border-b-current/45",
-  "border-b-current/50",
-  "border-b-current/55",
-  "border-b-current/60",
-  "border-b-current/65",
-  "border-b-current/70",
-  "border-b-current/75",
-  "border-b-current/80",
-  "border-b-current/85",
-  "border-b-current/90",
-  "border-b-current/95",
-  "border-b-current/100",
-  "border-b-current/background",
-  "border-b-inherit",
-  "border-b-inherit/0",
-  "border-b-inherit/5",
-  "border-b-inherit/10",
-  "border-b-inherit/15",
-  "border-b-inherit/20",
-  "border-b-inherit/25",
-  "border-b-inherit/30",
-  "border-b-inherit/35",
-  "border-b-inherit/40",
-  "border-b-inherit/45",
-  "border-b-inherit/50",
-  "border-b-inherit/55",
-  "border-b-inherit/60",
-  "border-b-inherit/65",
-  "border-b-inherit/70",
-  "border-b-inherit/75",
-  "border-b-inherit/80",
-  "border-b-inherit/85",
-  "border-b-inherit/90",
-  "border-b-inherit/95",
-  "border-b-inherit/100",
-  "border-b-inherit/background",
   "border-b-transparent",
-  "border-b-transparent/0",
-  "border-b-transparent/5",
-  "border-b-transparent/10",
-  "border-b-transparent/15",
-  "border-b-transparent/20",
-  "border-b-transparent/25",
-  "border-b-transparent/30",
-  "border-b-transparent/35",
-  "border-b-transparent/40",
-  "border-b-transparent/45",
-  "border-b-transparent/50",
-  "border-b-transparent/55",
-  "border-b-transparent/60",
-  "border-b-transparent/65",
-  "border-b-transparent/70",
-  "border-b-transparent/75",
-  "border-b-transparent/80",
-  "border-b-transparent/85",
-  "border-b-transparent/90",
-  "border-b-transparent/95",
-  "border-b-transparent/100",
-  "border-b-transparent/background",
-  "border-be",
-  "border-be/0",
-  "border-be/5",
-  "border-be/10",
-  "border-be/15",
-  "border-be/20",
-  "border-be/25",
-  "border-be/30",
-  "border-be/35",
-  "border-be/40",
-  "border-be/45",
-  "border-be/50",
-  "border-be/55",
-  "border-be/60",
-  "border-be/65",
-  "border-be/70",
-  "border-be/75",
-  "border-be/80",
-  "border-be/85",
-  "border-be/90",
-  "border-be/95",
-  "border-be/100",
-  "border-be/background",
-  "border-be-0",
-  "border-be-2",
-  "border-be-4",
-  "border-be-8",
-  "border-be-current",
-  "border-be-current/0",
-  "border-be-current/5",
-  "border-be-current/10",
-  "border-be-current/15",
-  "border-be-current/20",
-  "border-be-current/25",
-  "border-be-current/30",
-  "border-be-current/35",
-  "border-be-current/40",
-  "border-be-current/45",
-  "border-be-current/50",
-  "border-be-current/55",
-  "border-be-current/60",
-  "border-be-current/65",
-  "border-be-current/70",
-  "border-be-current/75",
-  "border-be-current/80",
-  "border-be-current/85",
-  "border-be-current/90",
-  "border-be-current/95",
-  "border-be-current/100",
-  "border-be-current/background",
-  "border-be-inherit",
-  "border-be-inherit/0",
-  "border-be-inherit/5",
-  "border-be-inherit/10",
-  "border-be-inherit/15",
-  "border-be-inherit/20",
-  "border-be-inherit/25",
-  "border-be-inherit/30",
-  "border-be-inherit/35",
-  "border-be-inherit/40",
-  "border-be-inherit/45",
-  "border-be-inherit/50",
-  "border-be-inherit/55",
-  "border-be-inherit/60",
-  "border-be-inherit/65",
-  "border-be-inherit/70",
-  "border-be-inherit/75",
-  "border-be-inherit/80",
-  "border-be-inherit/85",
-  "border-be-inherit/90",
-  "border-be-inherit/95",
-  "border-be-inherit/100",
-  "border-be-inherit/background",
-  "border-be-transparent",
-  "border-be-transparent/0",
-  "border-be-transparent/5",
-  "border-be-transparent/10",
-  "border-be-transparent/15",
-  "border-be-transparent/20",
-  "border-be-transparent/25",
-  "border-be-transparent/30",
-  "border-be-transparent/35",
-  "border-be-transparent/40",
-  "border-be-transparent/45",
-  "border-be-transparent/50",
-  "border-be-transparent/55",
-  "border-be-transparent/60",
-  "border-be-transparent/65",
-  "border-be-transparent/70",
-  "border-be-transparent/75",
-  "border-be-transparent/80",
-  "border-be-transparent/85",
-  "border-be-transparent/90",
-  "border-be-transparent/95",
-  "border-be-transparent/100",
-  "border-be-transparent/background",
-  "border-bs",
-  "border-bs/0",
-  "border-bs/5",
-  "border-bs/10",
-  "border-bs/15",
-  "border-bs/20",
-  "border-bs/25",
-  "border-bs/30",
-  "border-bs/35",
-  "border-bs/40",
-  "border-bs/45",
-  "border-bs/50",
-  "border-bs/55",
-  "border-bs/60",
-  "border-bs/65",
-  "border-bs/70",
-  "border-bs/75",
-  "border-bs/80",
-  "border-bs/85",
-  "border-bs/90",
-  "border-bs/95",
-  "border-bs/100",
-  "border-bs/background",
-  "border-bs-0",
-  "border-bs-2",
-  "border-bs-4",
-  "border-bs-8",
-  "border-bs-current",
-  "border-bs-current/0",
-  "border-bs-current/5",
-  "border-bs-current/10",
-  "border-bs-current/15",
-  "border-bs-current/20",
-  "border-bs-current/25",
-  "border-bs-current/30",
-  "border-bs-current/35",
-  "border-bs-current/40",
-  "border-bs-current/45",
-  "border-bs-current/50",
-  "border-bs-current/55",
-  "border-bs-current/60",
-  "border-bs-current/65",
-  "border-bs-current/70",
-  "border-bs-current/75",
-  "border-bs-current/80",
-  "border-bs-current/85",
-  "border-bs-current/90",
-  "border-bs-current/95",
-  "border-bs-current/100",
-  "border-bs-current/background",
-  "border-bs-inherit",
-  "border-bs-inherit/0",
-  "border-bs-inherit/5",
-  "border-bs-inherit/10",
-  "border-bs-inherit/15",
-  "border-bs-inherit/20",
-  "border-bs-inherit/25",
-  "border-bs-inherit/30",
-  "border-bs-inherit/35",
-  "border-bs-inherit/40",
-  "border-bs-inherit/45",
-  "border-bs-inherit/50",
-  "border-bs-inherit/55",
-  "border-bs-inherit/60",
-  "border-bs-inherit/65",
-  "border-bs-inherit/70",
-  "border-bs-inherit/75",
-  "border-bs-inherit/80",
-  "border-bs-inherit/85",
-  "border-bs-inherit/90",
-  "border-bs-inherit/95",
-  "border-bs-inherit/100",
-  "border-bs-inherit/background",
-  "border-bs-transparent",
-  "border-bs-transparent/0",
-  "border-bs-transparent/5",
-  "border-bs-transparent/10",
-  "border-bs-transparent/15",
-  "border-bs-transparent/20",
-  "border-bs-transparent/25",
-  "border-bs-transparent/30",
-  "border-bs-transparent/35",
-  "border-bs-transparent/40",
-  "border-bs-transparent/45",
-  "border-bs-transparent/50",
-  "border-bs-transparent/55",
-  "border-bs-transparent/60",
-  "border-bs-transparent/65",
-  "border-bs-transparent/70",
-  "border-bs-transparent/75",
-  "border-bs-transparent/80",
-  "border-bs-transparent/85",
-  "border-bs-transparent/90",
-  "border-bs-transparent/95",
-  "border-bs-transparent/100",
-  "border-bs-transparent/background",
   "border-collapse",
   "border-current",
-  "border-current/0",
-  "border-current/5",
-  "border-current/10",
-  "border-current/15",
-  "border-current/20",
-  "border-current/25",
-  "border-current/30",
-  "border-current/35",
-  "border-current/40",
-  "border-current/45",
-  "border-current/50",
-  "border-current/55",
-  "border-current/60",
-  "border-current/65",
-  "border-current/70",
-  "border-current/75",
-  "border-current/80",
-  "border-current/85",
-  "border-current/90",
-  "border-current/95",
-  "border-current/100",
-  "border-current/background",
   "border-dashed",
   "border-dotted",
   "border-double",
   "border-e",
-  "border-e/0",
-  "border-e/5",
-  "border-e/10",
-  "border-e/15",
-  "border-e/20",
-  "border-e/25",
-  "border-e/30",
-  "border-e/35",
-  "border-e/40",
-  "border-e/45",
-  "border-e/50",
-  "border-e/55",
-  "border-e/60",
-  "border-e/65",
-  "border-e/70",
-  "border-e/75",
-  "border-e/80",
-  "border-e/85",
-  "border-e/90",
-  "border-e/95",
-  "border-e/100",
-  "border-e/background",
-  "border-e-0",
-  "border-e-2",
-  "border-e-4",
-  "border-e-8",
   "border-e-current",
-  "border-e-current/0",
-  "border-e-current/5",
-  "border-e-current/10",
-  "border-e-current/15",
-  "border-e-current/20",
-  "border-e-current/25",
-  "border-e-current/30",
-  "border-e-current/35",
-  "border-e-current/40",
-  "border-e-current/45",
-  "border-e-current/50",
-  "border-e-current/55",
-  "border-e-current/60",
-  "border-e-current/65",
-  "border-e-current/70",
-  "border-e-current/75",
-  "border-e-current/80",
-  "border-e-current/85",
-  "border-e-current/90",
-  "border-e-current/95",
-  "border-e-current/100",
-  "border-e-current/background",
-  "border-e-inherit",
-  "border-e-inherit/0",
-  "border-e-inherit/5",
-  "border-e-inherit/10",
-  "border-e-inherit/15",
-  "border-e-inherit/20",
-  "border-e-inherit/25",
-  "border-e-inherit/30",
-  "border-e-inherit/35",
-  "border-e-inherit/40",
-  "border-e-inherit/45",
-  "border-e-inherit/50",
-  "border-e-inherit/55",
-  "border-e-inherit/60",
-  "border-e-inherit/65",
-  "border-e-inherit/70",
-  "border-e-inherit/75",
-  "border-e-inherit/80",
-  "border-e-inherit/85",
-  "border-e-inherit/90",
-  "border-e-inherit/95",
-  "border-e-inherit/100",
-  "border-e-inherit/background",
   "border-e-transparent",
-  "border-e-transparent/0",
-  "border-e-transparent/5",
-  "border-e-transparent/10",
-  "border-e-transparent/15",
-  "border-e-transparent/20",
-  "border-e-transparent/25",
-  "border-e-transparent/30",
-  "border-e-transparent/35",
-  "border-e-transparent/40",
-  "border-e-transparent/45",
-  "border-e-transparent/50",
-  "border-e-transparent/55",
-  "border-e-transparent/60",
-  "border-e-transparent/65",
-  "border-e-transparent/70",
-  "border-e-transparent/75",
-  "border-e-transparent/80",
-  "border-e-transparent/85",
-  "border-e-transparent/90",
-  "border-e-transparent/95",
-  "border-e-transparent/100",
-  "border-e-transparent/background",
   "border-hidden",
-  "border-inherit",
-  "border-inherit/0",
-  "border-inherit/5",
-  "border-inherit/10",
-  "border-inherit/15",
-  "border-inherit/20",
-  "border-inherit/25",
-  "border-inherit/30",
-  "border-inherit/35",
-  "border-inherit/40",
-  "border-inherit/45",
-  "border-inherit/50",
-  "border-inherit/55",
-  "border-inherit/60",
-  "border-inherit/65",
-  "border-inherit/70",
-  "border-inherit/75",
-  "border-inherit/80",
-  "border-inherit/85",
-  "border-inherit/90",
-  "border-inherit/95",
-  "border-inherit/100",
-  "border-inherit/background",
   "border-l",
-  "border-l/0",
-  "border-l/5",
-  "border-l/10",
-  "border-l/15",
-  "border-l/20",
-  "border-l/25",
-  "border-l/30",
-  "border-l/35",
-  "border-l/40",
-  "border-l/45",
-  "border-l/50",
-  "border-l/55",
-  "border-l/60",
-  "border-l/65",
-  "border-l/70",
-  "border-l/75",
-  "border-l/80",
-  "border-l/85",
-  "border-l/90",
-  "border-l/95",
-  "border-l/100",
-  "border-l/background",
-  "border-l-0",
-  "border-l-2",
-  "border-l-4",
-  "border-l-8",
   "border-l-current",
-  "border-l-current/0",
-  "border-l-current/5",
-  "border-l-current/10",
-  "border-l-current/15",
-  "border-l-current/20",
-  "border-l-current/25",
-  "border-l-current/30",
-  "border-l-current/35",
-  "border-l-current/40",
-  "border-l-current/45",
-  "border-l-current/50",
-  "border-l-current/55",
-  "border-l-current/60",
-  "border-l-current/65",
-  "border-l-current/70",
-  "border-l-current/75",
-  "border-l-current/80",
-  "border-l-current/85",
-  "border-l-current/90",
-  "border-l-current/95",
-  "border-l-current/100",
-  "border-l-current/background",
-  "border-l-inherit",
-  "border-l-inherit/0",
-  "border-l-inherit/5",
-  "border-l-inherit/10",
-  "border-l-inherit/15",
-  "border-l-inherit/20",
-  "border-l-inherit/25",
-  "border-l-inherit/30",
-  "border-l-inherit/35",
-  "border-l-inherit/40",
-  "border-l-inherit/45",
-  "border-l-inherit/50",
-  "border-l-inherit/55",
-  "border-l-inherit/60",
-  "border-l-inherit/65",
-  "border-l-inherit/70",
-  "border-l-inherit/75",
-  "border-l-inherit/80",
-  "border-l-inherit/85",
-  "border-l-inherit/90",
-  "border-l-inherit/95",
-  "border-l-inherit/100",
-  "border-l-inherit/background",
   "border-l-transparent",
-  "border-l-transparent/0",
-  "border-l-transparent/5",
-  "border-l-transparent/10",
-  "border-l-transparent/15",
-  "border-l-transparent/20",
-  "border-l-transparent/25",
-  "border-l-transparent/30",
-  "border-l-transparent/35",
-  "border-l-transparent/40",
-  "border-l-transparent/45",
-  "border-l-transparent/50",
-  "border-l-transparent/55",
-  "border-l-transparent/60",
-  "border-l-transparent/65",
-  "border-l-transparent/70",
-  "border-l-transparent/75",
-  "border-l-transparent/80",
-  "border-l-transparent/85",
-  "border-l-transparent/90",
-  "border-l-transparent/95",
-  "border-l-transparent/100",
-  "border-l-transparent/background",
   "border-none",
   "border-r",
-  "border-r/0",
-  "border-r/5",
-  "border-r/10",
-  "border-r/15",
-  "border-r/20",
-  "border-r/25",
-  "border-r/30",
-  "border-r/35",
-  "border-r/40",
-  "border-r/45",
-  "border-r/50",
-  "border-r/55",
-  "border-r/60",
-  "border-r/65",
-  "border-r/70",
-  "border-r/75",
-  "border-r/80",
-  "border-r/85",
-  "border-r/90",
-  "border-r/95",
-  "border-r/100",
-  "border-r/background",
-  "border-r-0",
-  "border-r-2",
-  "border-r-4",
-  "border-r-8",
   "border-r-current",
-  "border-r-current/0",
-  "border-r-current/5",
-  "border-r-current/10",
-  "border-r-current/15",
-  "border-r-current/20",
-  "border-r-current/25",
-  "border-r-current/30",
-  "border-r-current/35",
-  "border-r-current/40",
-  "border-r-current/45",
-  "border-r-current/50",
-  "border-r-current/55",
-  "border-r-current/60",
-  "border-r-current/65",
-  "border-r-current/70",
-  "border-r-current/75",
-  "border-r-current/80",
-  "border-r-current/85",
-  "border-r-current/90",
-  "border-r-current/95",
-  "border-r-current/100",
-  "border-r-current/background",
-  "border-r-inherit",
-  "border-r-inherit/0",
-  "border-r-inherit/5",
-  "border-r-inherit/10",
-  "border-r-inherit/15",
-  "border-r-inherit/20",
-  "border-r-inherit/25",
-  "border-r-inherit/30",
-  "border-r-inherit/35",
-  "border-r-inherit/40",
-  "border-r-inherit/45",
-  "border-r-inherit/50",
-  "border-r-inherit/55",
-  "border-r-inherit/60",
-  "border-r-inherit/65",
-  "border-r-inherit/70",
-  "border-r-inherit/75",
-  "border-r-inherit/80",
-  "border-r-inherit/85",
-  "border-r-inherit/90",
-  "border-r-inherit/95",
-  "border-r-inherit/100",
-  "border-r-inherit/background",
   "border-r-transparent",
-  "border-r-transparent/0",
-  "border-r-transparent/5",
-  "border-r-transparent/10",
-  "border-r-transparent/15",
-  "border-r-transparent/20",
-  "border-r-transparent/25",
-  "border-r-transparent/30",
-  "border-r-transparent/35",
-  "border-r-transparent/40",
-  "border-r-transparent/45",
-  "border-r-transparent/50",
-  "border-r-transparent/55",
-  "border-r-transparent/60",
-  "border-r-transparent/65",
-  "border-r-transparent/70",
-  "border-r-transparent/75",
-  "border-r-transparent/80",
-  "border-r-transparent/85",
-  "border-r-transparent/90",
-  "border-r-transparent/95",
-  "border-r-transparent/100",
-  "border-r-transparent/background",
   "border-s",
-  "border-s/0",
-  "border-s/5",
-  "border-s/10",
-  "border-s/15",
-  "border-s/20",
-  "border-s/25",
-  "border-s/30",
-  "border-s/35",
-  "border-s/40",
-  "border-s/45",
-  "border-s/50",
-  "border-s/55",
-  "border-s/60",
-  "border-s/65",
-  "border-s/70",
-  "border-s/75",
-  "border-s/80",
-  "border-s/85",
-  "border-s/90",
-  "border-s/95",
-  "border-s/100",
-  "border-s/background",
-  "border-s-0",
-  "border-s-2",
-  "border-s-4",
-  "border-s-8",
   "border-s-current",
-  "border-s-current/0",
-  "border-s-current/5",
-  "border-s-current/10",
-  "border-s-current/15",
-  "border-s-current/20",
-  "border-s-current/25",
-  "border-s-current/30",
-  "border-s-current/35",
-  "border-s-current/40",
-  "border-s-current/45",
-  "border-s-current/50",
-  "border-s-current/55",
-  "border-s-current/60",
-  "border-s-current/65",
-  "border-s-current/70",
-  "border-s-current/75",
-  "border-s-current/80",
-  "border-s-current/85",
-  "border-s-current/90",
-  "border-s-current/95",
-  "border-s-current/100",
-  "border-s-current/background",
-  "border-s-inherit",
-  "border-s-inherit/0",
-  "border-s-inherit/5",
-  "border-s-inherit/10",
-  "border-s-inherit/15",
-  "border-s-inherit/20",
-  "border-s-inherit/25",
-  "border-s-inherit/30",
-  "border-s-inherit/35",
-  "border-s-inherit/40",
-  "border-s-inherit/45",
-  "border-s-inherit/50",
-  "border-s-inherit/55",
-  "border-s-inherit/60",
-  "border-s-inherit/65",
-  "border-s-inherit/70",
-  "border-s-inherit/75",
-  "border-s-inherit/80",
-  "border-s-inherit/85",
-  "border-s-inherit/90",
-  "border-s-inherit/95",
-  "border-s-inherit/100",
-  "border-s-inherit/background",
   "border-s-transparent",
-  "border-s-transparent/0",
-  "border-s-transparent/5",
-  "border-s-transparent/10",
-  "border-s-transparent/15",
-  "border-s-transparent/20",
-  "border-s-transparent/25",
-  "border-s-transparent/30",
-  "border-s-transparent/35",
-  "border-s-transparent/40",
-  "border-s-transparent/45",
-  "border-s-transparent/50",
-  "border-s-transparent/55",
-  "border-s-transparent/60",
-  "border-s-transparent/65",
-  "border-s-transparent/70",
-  "border-s-transparent/75",
-  "border-s-transparent/80",
-  "border-s-transparent/85",
-  "border-s-transparent/90",
-  "border-s-transparent/95",
-  "border-s-transparent/100",
-  "border-s-transparent/background",
   "border-separate",
   "border-solid",
-  "border-spacing-0",
   "border-spacing-0.5",
   "border-spacing-1",
-  "border-spacing-1.5",
-  "border-spacing-2",
-  "border-spacing-2.5",
   "border-spacing-3",
-  "border-spacing-3.5",
   "border-spacing-4",
-  "border-spacing-5",
-  "border-spacing-6",
-  "border-spacing-7",
-  "border-spacing-8",
-  "border-spacing-9",
-  "border-spacing-10",
-  "border-spacing-11",
-  "border-spacing-12",
-  "border-spacing-14",
-  "border-spacing-16",
-  "border-spacing-20",
-  "border-spacing-24",
-  "border-spacing-28",
-  "border-spacing-32",
-  "border-spacing-36",
-  "border-spacing-40",
-  "border-spacing-44",
-  "border-spacing-48",
-  "border-spacing-52",
-  "border-spacing-56",
-  "border-spacing-60",
-  "border-spacing-64",
-  "border-spacing-72",
-  "border-spacing-80",
-  "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-2",
-  "border-spacing-x-2.5",
   "border-spacing-x-3",
-  "border-spacing-x-3.5",
   "border-spacing-x-4",
-  "border-spacing-x-5",
-  "border-spacing-x-6",
-  "border-spacing-x-7",
-  "border-spacing-x-8",
-  "border-spacing-x-9",
-  "border-spacing-x-10",
-  "border-spacing-x-11",
-  "border-spacing-x-12",
-  "border-spacing-x-14",
-  "border-spacing-x-16",
-  "border-spacing-x-20",
-  "border-spacing-x-24",
-  "border-spacing-x-28",
-  "border-spacing-x-32",
-  "border-spacing-x-36",
-  "border-spacing-x-40",
-  "border-spacing-x-44",
-  "border-spacing-x-48",
-  "border-spacing-x-52",
-  "border-spacing-x-56",
-  "border-spacing-x-60",
-  "border-spacing-x-64",
-  "border-spacing-x-72",
-  "border-spacing-x-80",
-  "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-2",
-  "border-spacing-y-2.5",
   "border-spacing-y-3",
-  "border-spacing-y-3.5",
   "border-spacing-y-4",
-  "border-spacing-y-5",
-  "border-spacing-y-6",
-  "border-spacing-y-7",
-  "border-spacing-y-8",
-  "border-spacing-y-9",
-  "border-spacing-y-10",
-  "border-spacing-y-11",
-  "border-spacing-y-12",
-  "border-spacing-y-14",
-  "border-spacing-y-16",
-  "border-spacing-y-20",
-  "border-spacing-y-24",
-  "border-spacing-y-28",
-  "border-spacing-y-32",
-  "border-spacing-y-36",
-  "border-spacing-y-40",
-  "border-spacing-y-44",
-  "border-spacing-y-48",
-  "border-spacing-y-52",
-  "border-spacing-y-56",
-  "border-spacing-y-60",
-  "border-spacing-y-64",
-  "border-spacing-y-72",
-  "border-spacing-y-80",
-  "border-spacing-y-96",
-  "border-spacing-y-px",
   "border-t",
-  "border-t/0",
-  "border-t/5",
-  "border-t/10",
-  "border-t/15",
-  "border-t/20",
-  "border-t/25",
-  "border-t/30",
-  "border-t/35",
-  "border-t/40",
-  "border-t/45",
-  "border-t/50",
-  "border-t/55",
-  "border-t/60",
-  "border-t/65",
-  "border-t/70",
-  "border-t/75",
-  "border-t/80",
-  "border-t/85",
-  "border-t/90",
-  "border-t/95",
-  "border-t/100",
-  "border-t/background",
-  "border-t-0",
-  "border-t-2",
-  "border-t-4",
-  "border-t-8",
   "border-t-current",
-  "border-t-current/0",
-  "border-t-current/5",
-  "border-t-current/10",
-  "border-t-current/15",
-  "border-t-current/20",
-  "border-t-current/25",
-  "border-t-current/30",
-  "border-t-current/35",
-  "border-t-current/40",
-  "border-t-current/45",
-  "border-t-current/50",
-  "border-t-current/55",
-  "border-t-current/60",
-  "border-t-current/65",
-  "border-t-current/70",
-  "border-t-current/75",
-  "border-t-current/80",
-  "border-t-current/85",
-  "border-t-current/90",
-  "border-t-current/95",
-  "border-t-current/100",
-  "border-t-current/background",
-  "border-t-inherit",
-  "border-t-inherit/0",
-  "border-t-inherit/5",
-  "border-t-inherit/10",
-  "border-t-inherit/15",
-  "border-t-inherit/20",
-  "border-t-inherit/25",
-  "border-t-inherit/30",
-  "border-t-inherit/35",
-  "border-t-inherit/40",
-  "border-t-inherit/45",
-  "border-t-inherit/50",
-  "border-t-inherit/55",
-  "border-t-inherit/60",
-  "border-t-inherit/65",
-  "border-t-inherit/70",
-  "border-t-inherit/75",
-  "border-t-inherit/80",
-  "border-t-inherit/85",
-  "border-t-inherit/90",
-  "border-t-inherit/95",
-  "border-t-inherit/100",
-  "border-t-inherit/background",
   "border-t-transparent",
-  "border-t-transparent/0",
-  "border-t-transparent/5",
-  "border-t-transparent/10",
-  "border-t-transparent/15",
-  "border-t-transparent/20",
-  "border-t-transparent/25",
-  "border-t-transparent/30",
-  "border-t-transparent/35",
-  "border-t-transparent/40",
-  "border-t-transparent/45",
-  "border-t-transparent/50",
-  "border-t-transparent/55",
-  "border-t-transparent/60",
-  "border-t-transparent/65",
-  "border-t-transparent/70",
-  "border-t-transparent/75",
-  "border-t-transparent/80",
-  "border-t-transparent/85",
-  "border-t-transparent/90",
-  "border-t-transparent/95",
-  "border-t-transparent/100",
-  "border-t-transparent/background",
   "border-transparent",
-  "border-transparent/0",
-  "border-transparent/5",
-  "border-transparent/10",
-  "border-transparent/15",
-  "border-transparent/20",
-  "border-transparent/25",
-  "border-transparent/30",
-  "border-transparent/35",
-  "border-transparent/40",
-  "border-transparent/45",
-  "border-transparent/50",
-  "border-transparent/55",
-  "border-transparent/60",
-  "border-transparent/65",
-  "border-transparent/70",
-  "border-transparent/75",
-  "border-transparent/80",
-  "border-transparent/85",
-  "border-transparent/90",
-  "border-transparent/95",
-  "border-transparent/100",
-  "border-transparent/background",
   "border-x",
-  "border-x/0",
-  "border-x/5",
-  "border-x/10",
-  "border-x/15",
-  "border-x/20",
-  "border-x/25",
-  "border-x/30",
-  "border-x/35",
-  "border-x/40",
-  "border-x/45",
-  "border-x/50",
-  "border-x/55",
-  "border-x/60",
-  "border-x/65",
-  "border-x/70",
-  "border-x/75",
-  "border-x/80",
-  "border-x/85",
-  "border-x/90",
-  "border-x/95",
-  "border-x/100",
-  "border-x/background",
-  "border-x-0",
-  "border-x-2",
-  "border-x-4",
-  "border-x-8",
   "border-x-current",
-  "border-x-current/0",
-  "border-x-current/5",
-  "border-x-current/10",
-  "border-x-current/15",
-  "border-x-current/20",
-  "border-x-current/25",
-  "border-x-current/30",
-  "border-x-current/35",
-  "border-x-current/40",
-  "border-x-current/45",
-  "border-x-current/50",
-  "border-x-current/55",
-  "border-x-current/60",
-  "border-x-current/65",
-  "border-x-current/70",
-  "border-x-current/75",
-  "border-x-current/80",
-  "border-x-current/85",
-  "border-x-current/90",
-  "border-x-current/95",
-  "border-x-current/100",
-  "border-x-current/background",
-  "border-x-inherit",
-  "border-x-inherit/0",
-  "border-x-inherit/5",
-  "border-x-inherit/10",
-  "border-x-inherit/15",
-  "border-x-inherit/20",
-  "border-x-inherit/25",
-  "border-x-inherit/30",
-  "border-x-inherit/35",
-  "border-x-inherit/40",
-  "border-x-inherit/45",
-  "border-x-inherit/50",
-  "border-x-inherit/55",
-  "border-x-inherit/60",
-  "border-x-inherit/65",
-  "border-x-inherit/70",
-  "border-x-inherit/75",
-  "border-x-inherit/80",
-  "border-x-inherit/85",
-  "border-x-inherit/90",
-  "border-x-inherit/95",
-  "border-x-inherit/100",
-  "border-x-inherit/background",
   "border-x-transparent",
-  "border-x-transparent/0",
-  "border-x-transparent/5",
-  "border-x-transparent/10",
-  "border-x-transparent/15",
-  "border-x-transparent/20",
-  "border-x-transparent/25",
-  "border-x-transparent/30",
-  "border-x-transparent/35",
-  "border-x-transparent/40",
-  "border-x-transparent/45",
-  "border-x-transparent/50",
-  "border-x-transparent/55",
-  "border-x-transparent/60",
-  "border-x-transparent/65",
-  "border-x-transparent/70",
-  "border-x-transparent/75",
-  "border-x-transparent/80",
-  "border-x-transparent/85",
-  "border-x-transparent/90",
-  "border-x-transparent/95",
-  "border-x-transparent/100",
-  "border-x-transparent/background",
   "border-y",
-  "border-y/0",
-  "border-y/5",
-  "border-y/10",
-  "border-y/15",
-  "border-y/20",
-  "border-y/25",
-  "border-y/30",
-  "border-y/35",
-  "border-y/40",
-  "border-y/45",
-  "border-y/50",
-  "border-y/55",
-  "border-y/60",
-  "border-y/65",
-  "border-y/70",
-  "border-y/75",
-  "border-y/80",
-  "border-y/85",
-  "border-y/90",
-  "border-y/95",
-  "border-y/100",
-  "border-y/background",
-  "border-y-0",
-  "border-y-2",
-  "border-y-4",
-  "border-y-8",
   "border-y-current",
-  "border-y-current/0",
-  "border-y-current/5",
-  "border-y-current/10",
-  "border-y-current/15",
-  "border-y-current/20",
-  "border-y-current/25",
-  "border-y-current/30",
-  "border-y-current/35",
-  "border-y-current/40",
-  "border-y-current/45",
-  "border-y-current/50",
-  "border-y-current/55",
-  "border-y-current/60",
-  "border-y-current/65",
-  "border-y-current/70",
-  "border-y-current/75",
-  "border-y-current/80",
-  "border-y-current/85",
-  "border-y-current/90",
-  "border-y-current/95",
-  "border-y-current/100",
-  "border-y-current/background",
-  "border-y-inherit",
-  "border-y-inherit/0",
-  "border-y-inherit/5",
-  "border-y-inherit/10",
-  "border-y-inherit/15",
-  "border-y-inherit/20",
-  "border-y-inherit/25",
-  "border-y-inherit/30",
-  "border-y-inherit/35",
-  "border-y-inherit/40",
-  "border-y-inherit/45",
-  "border-y-inherit/50",
-  "border-y-inherit/55",
-  "border-y-inherit/60",
-  "border-y-inherit/65",
-  "border-y-inherit/70",
-  "border-y-inherit/75",
-  "border-y-inherit/80",
-  "border-y-inherit/85",
-  "border-y-inherit/90",
-  "border-y-inherit/95",
-  "border-y-inherit/100",
-  "border-y-inherit/background",
   "border-y-transparent",
-  "border-y-transparent/0",
-  "border-y-transparent/5",
-  "border-y-transparent/10",
-  "border-y-transparent/15",
-  "border-y-transparent/20",
-  "border-y-transparent/25",
-  "border-y-transparent/30",
-  "border-y-transparent/35",
-  "border-y-transparent/40",
-  "border-y-transparent/45",
-  "border-y-transparent/50",
-  "border-y-transparent/55",
-  "border-y-transparent/60",
-  "border-y-transparent/65",
-  "border-y-transparent/70",
-  "border-y-transparent/75",
-  "border-y-transparent/80",
-  "border-y-transparent/85",
-  "border-y-transparent/90",
-  "border-y-transparent/95",
-  "border-y-transparent/100",
-  "border-y-transparent/background",
-  "bottom-0",
   "bottom-0.5",
   "bottom-1",
-  "bottom-1.5",
-  "bottom-2",
-  "bottom-2.5",
   "bottom-3",
-  "bottom-3.5",
   "bottom-4",
-  "bottom-5",
-  "bottom-6",
-  "bottom-7",
-  "bottom-8",
-  "bottom-9",
-  "bottom-10",
-  "bottom-11",
-  "bottom-12",
-  "bottom-14",
-  "bottom-16",
-  "bottom-20",
-  "bottom-24",
-  "bottom-28",
-  "bottom-32",
-  "bottom-36",
-  "bottom-40",
-  "bottom-44",
-  "bottom-48",
-  "bottom-52",
-  "bottom-56",
-  "bottom-60",
-  "bottom-64",
-  "bottom-72",
-  "bottom-80",
-  "bottom-96",
-  "bottom-1/2",
-  "bottom-1/3",
-  "bottom-1/4",
-  "bottom-1/5",
-  "bottom-1/6",
-  "bottom-1/12",
-  "bottom-2/3",
-  "bottom-2/4",
-  "bottom-2/5",
-  "bottom-2/6",
-  "bottom-2/12",
-  "bottom-3/4",
-  "bottom-3/5",
-  "bottom-3/6",
-  "bottom-3/12",
-  "bottom-4/5",
-  "bottom-4/6",
-  "bottom-4/12",
-  "bottom-5/6",
-  "bottom-5/12",
-  "bottom-6/12",
-  "bottom-7/12",
-  "bottom-8/12",
-  "bottom-9/12",
-  "bottom-10/12",
-  "bottom-11/12",
   "bottom-auto",
   "bottom-full",
-  "bottom-px",
   "box-border",
   "box-content",
   "box-decoration-clone",
@@ -4179,89 +491,23 @@ exports[`getClassList 1`] = `
   "break-inside-avoid-page",
   "break-keep",
   "break-normal",
+  "break-words",
   "brightness-0",
-  "brightness-50",
-  "brightness-75",
-  "brightness-90",
-  "brightness-95",
   "brightness-100",
   "brightness-105",
   "brightness-110",
   "brightness-125",
   "brightness-150",
   "brightness-200",
+  "brightness-50",
+  "brightness-75",
+  "brightness-90",
+  "brightness-95",
   "capitalize",
   "caption-bottom",
   "caption-top",
   "caret-current",
-  "caret-current/0",
-  "caret-current/5",
-  "caret-current/10",
-  "caret-current/15",
-  "caret-current/20",
-  "caret-current/25",
-  "caret-current/30",
-  "caret-current/35",
-  "caret-current/40",
-  "caret-current/45",
-  "caret-current/50",
-  "caret-current/55",
-  "caret-current/60",
-  "caret-current/65",
-  "caret-current/70",
-  "caret-current/75",
-  "caret-current/80",
-  "caret-current/85",
-  "caret-current/90",
-  "caret-current/95",
-  "caret-current/100",
-  "caret-current/background",
-  "caret-inherit",
-  "caret-inherit/0",
-  "caret-inherit/5",
-  "caret-inherit/10",
-  "caret-inherit/15",
-  "caret-inherit/20",
-  "caret-inherit/25",
-  "caret-inherit/30",
-  "caret-inherit/35",
-  "caret-inherit/40",
-  "caret-inherit/45",
-  "caret-inherit/50",
-  "caret-inherit/55",
-  "caret-inherit/60",
-  "caret-inherit/65",
-  "caret-inherit/70",
-  "caret-inherit/75",
-  "caret-inherit/80",
-  "caret-inherit/85",
-  "caret-inherit/90",
-  "caret-inherit/95",
-  "caret-inherit/100",
-  "caret-inherit/background",
   "caret-transparent",
-  "caret-transparent/0",
-  "caret-transparent/5",
-  "caret-transparent/10",
-  "caret-transparent/15",
-  "caret-transparent/20",
-  "caret-transparent/25",
-  "caret-transparent/30",
-  "caret-transparent/35",
-  "caret-transparent/40",
-  "caret-transparent/45",
-  "caret-transparent/50",
-  "caret-transparent/55",
-  "caret-transparent/60",
-  "caret-transparent/65",
-  "caret-transparent/70",
-  "caret-transparent/75",
-  "caret-transparent/80",
-  "caret-transparent/85",
-  "caret-transparent/90",
-  "caret-transparent/95",
-  "caret-transparent/100",
-  "caret-transparent/background",
   "clear-both",
   "clear-end",
   "clear-left",
@@ -4270,6 +516,10 @@ exports[`getClassList 1`] = `
   "clear-start",
   "col-auto",
   "col-end-1",
+  "col-end-10",
+  "col-end-11",
+  "col-end-12",
+  "col-end-13",
   "col-end-2",
   "col-end-3",
   "col-end-4",
@@ -4278,12 +528,11 @@ exports[`getClassList 1`] = `
   "col-end-7",
   "col-end-8",
   "col-end-9",
-  "col-end-10",
-  "col-end-11",
-  "col-end-12",
-  "col-end-13",
   "col-end-auto",
   "col-span-1",
+  "col-span-10",
+  "col-span-11",
+  "col-span-12",
   "col-span-2",
   "col-span-3",
   "col-span-4",
@@ -4292,11 +541,12 @@ exports[`getClassList 1`] = `
   "col-span-7",
   "col-span-8",
   "col-span-9",
-  "col-span-10",
-  "col-span-11",
-  "col-span-12",
   "col-span-full",
   "col-start-1",
+  "col-start-10",
+  "col-start-11",
+  "col-start-12",
+  "col-start-13",
   "col-start-2",
   "col-start-3",
   "col-start-4",
@@ -4305,27 +555,22 @@ exports[`getClassList 1`] = `
   "col-start-7",
   "col-start-8",
   "col-start-9",
-  "col-start-10",
-  "col-start-11",
-  "col-start-12",
-  "col-start-13",
   "col-start-auto",
   "collapse",
   "columns-1",
+  "columns-10",
+  "columns-11",
+  "columns-12",
   "columns-2",
   "columns-3",
   "columns-4",
+  "columns-4",
   "columns-5",
   "columns-6",
   "columns-7",
   "columns-8",
   "columns-9",
-  "columns-10",
-  "columns-11",
-  "columns-12",
   "columns-auto",
-  "columns-lg",
-  "columns-md",
   "contain-content",
   "contain-inline-size",
   "contain-layout",
@@ -4334,14 +579,11 @@ exports[`getClassList 1`] = `
   "contain-size",
   "contain-strict",
   "contain-style",
-  "container",
   "content-around",
   "content-baseline",
   "content-between",
   "content-center",
-  "content-center-safe",
   "content-end",
-  "content-end-safe",
   "content-evenly",
   "content-none",
   "content-normal",
@@ -4349,12 +591,12 @@ exports[`getClassList 1`] = `
   "content-stretch",
   "contents",
   "contrast-0",
-  "contrast-50",
-  "contrast-75",
   "contrast-100",
   "contrast-125",
   "contrast-150",
   "contrast-200",
+  "contrast-50",
+  "contrast-75",
   "cursor-alias",
   "cursor-all-scroll",
   "cursor-auto",
@@ -4396,163 +638,29 @@ exports[`getClassList 1`] = `
   "decoration-2",
   "decoration-auto",
   "decoration-current",
-  "decoration-current/0",
-  "decoration-current/5",
-  "decoration-current/10",
-  "decoration-current/15",
-  "decoration-current/20",
-  "decoration-current/25",
-  "decoration-current/30",
-  "decoration-current/35",
-  "decoration-current/40",
-  "decoration-current/45",
-  "decoration-current/50",
-  "decoration-current/55",
-  "decoration-current/60",
-  "decoration-current/65",
-  "decoration-current/70",
-  "decoration-current/75",
-  "decoration-current/80",
-  "decoration-current/85",
-  "decoration-current/90",
-  "decoration-current/95",
-  "decoration-current/100",
-  "decoration-current/background",
   "decoration-dashed",
   "decoration-dotted",
   "decoration-double",
   "decoration-from-font",
-  "decoration-inherit",
-  "decoration-inherit/0",
-  "decoration-inherit/5",
-  "decoration-inherit/10",
-  "decoration-inherit/15",
-  "decoration-inherit/20",
-  "decoration-inherit/25",
-  "decoration-inherit/30",
-  "decoration-inherit/35",
-  "decoration-inherit/40",
-  "decoration-inherit/45",
-  "decoration-inherit/50",
-  "decoration-inherit/55",
-  "decoration-inherit/60",
-  "decoration-inherit/65",
-  "decoration-inherit/70",
-  "decoration-inherit/75",
-  "decoration-inherit/80",
-  "decoration-inherit/85",
-  "decoration-inherit/90",
-  "decoration-inherit/95",
-  "decoration-inherit/100",
-  "decoration-inherit/background",
   "decoration-solid",
   "decoration-transparent",
-  "decoration-transparent/0",
-  "decoration-transparent/5",
-  "decoration-transparent/10",
-  "decoration-transparent/15",
-  "decoration-transparent/20",
-  "decoration-transparent/25",
-  "decoration-transparent/30",
-  "decoration-transparent/35",
-  "decoration-transparent/40",
-  "decoration-transparent/45",
-  "decoration-transparent/50",
-  "decoration-transparent/55",
-  "decoration-transparent/60",
-  "decoration-transparent/65",
-  "decoration-transparent/70",
-  "decoration-transparent/75",
-  "decoration-transparent/80",
-  "decoration-transparent/85",
-  "decoration-transparent/90",
-  "decoration-transparent/95",
-  "decoration-transparent/100",
-  "decoration-transparent/background",
   "decoration-wavy",
-  "delay-75",
   "delay-100",
+  "delay-1000",
   "delay-150",
   "delay-200",
   "delay-300",
   "delay-500",
   "delay-700",
-  "delay-1000",
+  "delay-75",
   "diagonal-fractions",
   "divide-current",
-  "divide-current/0",
-  "divide-current/5",
-  "divide-current/10",
-  "divide-current/15",
-  "divide-current/20",
-  "divide-current/25",
-  "divide-current/30",
-  "divide-current/35",
-  "divide-current/40",
-  "divide-current/45",
-  "divide-current/50",
-  "divide-current/55",
-  "divide-current/60",
-  "divide-current/65",
-  "divide-current/70",
-  "divide-current/75",
-  "divide-current/80",
-  "divide-current/85",
-  "divide-current/90",
-  "divide-current/95",
-  "divide-current/100",
-  "divide-current/background",
   "divide-dashed",
   "divide-dotted",
   "divide-double",
-  "divide-inherit",
-  "divide-inherit/0",
-  "divide-inherit/5",
-  "divide-inherit/10",
-  "divide-inherit/15",
-  "divide-inherit/20",
-  "divide-inherit/25",
-  "divide-inherit/30",
-  "divide-inherit/35",
-  "divide-inherit/40",
-  "divide-inherit/45",
-  "divide-inherit/50",
-  "divide-inherit/55",
-  "divide-inherit/60",
-  "divide-inherit/65",
-  "divide-inherit/70",
-  "divide-inherit/75",
-  "divide-inherit/80",
-  "divide-inherit/85",
-  "divide-inherit/90",
-  "divide-inherit/95",
-  "divide-inherit/100",
-  "divide-inherit/background",
   "divide-none",
   "divide-solid",
   "divide-transparent",
-  "divide-transparent/0",
-  "divide-transparent/5",
-  "divide-transparent/10",
-  "divide-transparent/15",
-  "divide-transparent/20",
-  "divide-transparent/25",
-  "divide-transparent/30",
-  "divide-transparent/35",
-  "divide-transparent/40",
-  "divide-transparent/45",
-  "divide-transparent/50",
-  "divide-transparent/55",
-  "divide-transparent/60",
-  "divide-transparent/65",
-  "divide-transparent/70",
-  "divide-transparent/75",
-  "divide-transparent/80",
-  "divide-transparent/85",
-  "divide-transparent/90",
-  "divide-transparent/95",
-  "divide-transparent/100",
-  "divide-transparent/background",
   "divide-x",
   "divide-x-0",
   "divide-x-2",
@@ -4565,203 +673,23 @@ exports[`getClassList 1`] = `
   "divide-y-4",
   "divide-y-8",
   "divide-y-reverse",
-  "drop-shadow-current",
-  "drop-shadow-current/0",
-  "drop-shadow-current/5",
-  "drop-shadow-current/10",
-  "drop-shadow-current/15",
-  "drop-shadow-current/20",
-  "drop-shadow-current/25",
-  "drop-shadow-current/30",
-  "drop-shadow-current/35",
-  "drop-shadow-current/40",
-  "drop-shadow-current/45",
-  "drop-shadow-current/50",
-  "drop-shadow-current/55",
-  "drop-shadow-current/60",
-  "drop-shadow-current/65",
-  "drop-shadow-current/70",
-  "drop-shadow-current/75",
-  "drop-shadow-current/80",
-  "drop-shadow-current/85",
-  "drop-shadow-current/90",
-  "drop-shadow-current/95",
-  "drop-shadow-current/100",
-  "drop-shadow-current/background",
-  "drop-shadow-inherit",
-  "drop-shadow-inherit/0",
-  "drop-shadow-inherit/5",
-  "drop-shadow-inherit/10",
-  "drop-shadow-inherit/15",
-  "drop-shadow-inherit/20",
-  "drop-shadow-inherit/25",
-  "drop-shadow-inherit/30",
-  "drop-shadow-inherit/35",
-  "drop-shadow-inherit/40",
-  "drop-shadow-inherit/45",
-  "drop-shadow-inherit/50",
-  "drop-shadow-inherit/55",
-  "drop-shadow-inherit/60",
-  "drop-shadow-inherit/65",
-  "drop-shadow-inherit/70",
-  "drop-shadow-inherit/75",
-  "drop-shadow-inherit/80",
-  "drop-shadow-inherit/85",
-  "drop-shadow-inherit/90",
-  "drop-shadow-inherit/95",
-  "drop-shadow-inherit/100",
-  "drop-shadow-inherit/background",
-  "drop-shadow-none",
-  "drop-shadow-sm",
-  "drop-shadow-transparent",
-  "drop-shadow-transparent/0",
-  "drop-shadow-transparent/5",
-  "drop-shadow-transparent/10",
-  "drop-shadow-transparent/15",
-  "drop-shadow-transparent/20",
-  "drop-shadow-transparent/25",
-  "drop-shadow-transparent/30",
-  "drop-shadow-transparent/35",
-  "drop-shadow-transparent/40",
-  "drop-shadow-transparent/45",
-  "drop-shadow-transparent/50",
-  "drop-shadow-transparent/55",
-  "drop-shadow-transparent/60",
-  "drop-shadow-transparent/65",
-  "drop-shadow-transparent/70",
-  "drop-shadow-transparent/75",
-  "drop-shadow-transparent/80",
-  "drop-shadow-transparent/85",
-  "drop-shadow-transparent/90",
-  "drop-shadow-transparent/95",
-  "drop-shadow-transparent/100",
-  "drop-shadow-transparent/background",
-  "duration-75",
   "duration-100",
+  "duration-1000",
   "duration-150",
   "duration-200",
   "duration-300",
   "duration-500",
   "duration-700",
-  "duration-1000",
-  "duration-initial",
-  "ease-initial",
-  "ease-linear",
+  "duration-75",
+  "end-0.5",
+  "end-1",
+  "end-3",
+  "end-4",
   "end-auto",
   "end-full",
-  "end-px",
-  "field-sizing-content",
-  "field-sizing-fixed",
   "fill-current",
-  "fill-current/0",
-  "fill-current/5",
-  "fill-current/10",
-  "fill-current/15",
-  "fill-current/20",
-  "fill-current/25",
-  "fill-current/30",
-  "fill-current/35",
-  "fill-current/40",
-  "fill-current/45",
-  "fill-current/50",
-  "fill-current/55",
-  "fill-current/60",
-  "fill-current/65",
-  "fill-current/70",
-  "fill-current/75",
-  "fill-current/80",
-  "fill-current/85",
-  "fill-current/90",
-  "fill-current/95",
-  "fill-current/100",
-  "fill-current/background",
-  "fill-inherit",
-  "fill-inherit/0",
-  "fill-inherit/5",
-  "fill-inherit/10",
-  "fill-inherit/15",
-  "fill-inherit/20",
-  "fill-inherit/25",
-  "fill-inherit/30",
-  "fill-inherit/35",
-  "fill-inherit/40",
-  "fill-inherit/45",
-  "fill-inherit/50",
-  "fill-inherit/55",
-  "fill-inherit/60",
-  "fill-inherit/65",
-  "fill-inherit/70",
-  "fill-inherit/75",
-  "fill-inherit/80",
-  "fill-inherit/85",
-  "fill-inherit/90",
-  "fill-inherit/95",
-  "fill-inherit/100",
-  "fill-inherit/background",
-  "fill-none",
   "fill-transparent",
-  "fill-transparent/0",
-  "fill-transparent/5",
-  "fill-transparent/10",
-  "fill-transparent/15",
-  "fill-transparent/20",
-  "fill-transparent/25",
-  "fill-transparent/30",
-  "fill-transparent/35",
-  "fill-transparent/40",
-  "fill-transparent/45",
-  "fill-transparent/50",
-  "fill-transparent/55",
-  "fill-transparent/60",
-  "fill-transparent/65",
-  "fill-transparent/70",
-  "fill-transparent/75",
-  "fill-transparent/80",
-  "fill-transparent/85",
-  "fill-transparent/90",
-  "fill-transparent/95",
-  "fill-transparent/100",
-  "fill-transparent/background",
   "fixed",
-  "flex",
-  "flex-1",
-  "flex-2",
-  "flex-3",
-  "flex-4",
-  "flex-5",
-  "flex-6",
-  "flex-7",
-  "flex-8",
-  "flex-9",
-  "flex-10",
-  "flex-11",
-  "flex-12",
-  "flex-1/2",
-  "flex-1/3",
-  "flex-1/4",
-  "flex-1/5",
-  "flex-1/6",
-  "flex-1/12",
-  "flex-2/3",
-  "flex-2/4",
-  "flex-2/5",
-  "flex-2/6",
-  "flex-2/12",
-  "flex-3/4",
-  "flex-3/5",
-  "flex-3/6",
-  "flex-3/12",
-  "flex-4/5",
-  "flex-4/6",
-  "flex-4/12",
-  "flex-5/6",
-  "flex-5/12",
-  "flex-6/12",
-  "flex-7/12",
-  "flex-8/12",
-  "flex-9/12",
-  "flex-10/12",
-  "flex-11/12",
   "flex-auto",
   "flex-col",
   "flex-col-reverse",
@@ -4778,18 +706,24 @@ exports[`getClassList 1`] = `
   "float-right",
   "float-start",
   "flow-root",
+  "font-black",
   "font-bold",
-  "font-sans",
-  "font-stretch-50%",
-  "font-stretch-75%",
-  "font-stretch-90%",
-  "font-stretch-95%",
+  "font-extrabold",
+  "font-extralight",
+  "font-light",
+  "font-medium",
+  "font-normal",
+  "font-semibold",
   "font-stretch-100%",
   "font-stretch-105%",
   "font-stretch-110%",
   "font-stretch-125%",
   "font-stretch-150%",
   "font-stretch-200%",
+  "font-stretch-50%",
+  "font-stretch-75%",
+  "font-stretch-90%",
+  "font-stretch-95%",
   "font-stretch-condensed",
   "font-stretch-expanded",
   "font-stretch-extra-condensed",
@@ -4799,12 +733,12 @@ exports[`getClassList 1`] = `
   "font-stretch-semi-expanded",
   "font-stretch-ultra-condensed",
   "font-stretch-ultra-expanded",
-  "font-superbold",
+  "font-thin",
   "forced-color-adjust-auto",
   "forced-color-adjust-none",
   "from-0%",
-  "from-5%",
   "from-10%",
+  "from-100%",
   "from-15%",
   "from-20%",
   "from-25%",
@@ -4812,6 +746,7 @@ exports[`getClassList 1`] = `
   "from-35%",
   "from-40%",
   "from-45%",
+  "from-5%",
   "from-50%",
   "from-55%",
   "from-60%",
@@ -4822,189 +757,31 @@ exports[`getClassList 1`] = `
   "from-85%",
   "from-90%",
   "from-95%",
-  "from-100%",
   "from-current",
-  "from-current/0",
-  "from-current/5",
-  "from-current/10",
-  "from-current/15",
-  "from-current/20",
-  "from-current/25",
-  "from-current/30",
-  "from-current/35",
-  "from-current/40",
-  "from-current/45",
-  "from-current/50",
-  "from-current/55",
-  "from-current/60",
-  "from-current/65",
-  "from-current/70",
-  "from-current/75",
-  "from-current/80",
-  "from-current/85",
-  "from-current/90",
-  "from-current/95",
-  "from-current/100",
-  "from-current/background",
-  "from-inherit",
-  "from-inherit/0",
-  "from-inherit/5",
-  "from-inherit/10",
-  "from-inherit/15",
-  "from-inherit/20",
-  "from-inherit/25",
-  "from-inherit/30",
-  "from-inherit/35",
-  "from-inherit/40",
-  "from-inherit/45",
-  "from-inherit/50",
-  "from-inherit/55",
-  "from-inherit/60",
-  "from-inherit/65",
-  "from-inherit/70",
-  "from-inherit/75",
-  "from-inherit/80",
-  "from-inherit/85",
-  "from-inherit/90",
-  "from-inherit/95",
-  "from-inherit/100",
-  "from-inherit/background",
   "from-transparent",
-  "from-transparent/0",
-  "from-transparent/5",
-  "from-transparent/10",
-  "from-transparent/15",
-  "from-transparent/20",
-  "from-transparent/25",
-  "from-transparent/30",
-  "from-transparent/35",
-  "from-transparent/40",
-  "from-transparent/45",
-  "from-transparent/50",
-  "from-transparent/55",
-  "from-transparent/60",
-  "from-transparent/65",
-  "from-transparent/70",
-  "from-transparent/75",
-  "from-transparent/80",
-  "from-transparent/85",
-  "from-transparent/90",
-  "from-transparent/95",
-  "from-transparent/100",
-  "from-transparent/background",
-  "gap-0",
   "gap-0.5",
   "gap-1",
-  "gap-1.5",
-  "gap-2",
-  "gap-2.5",
   "gap-3",
-  "gap-3.5",
   "gap-4",
-  "gap-5",
-  "gap-6",
-  "gap-7",
-  "gap-8",
-  "gap-9",
-  "gap-10",
-  "gap-11",
-  "gap-12",
-  "gap-14",
-  "gap-16",
-  "gap-20",
-  "gap-24",
-  "gap-28",
-  "gap-32",
-  "gap-36",
-  "gap-40",
-  "gap-44",
-  "gap-48",
-  "gap-52",
-  "gap-56",
-  "gap-60",
-  "gap-64",
-  "gap-72",
-  "gap-80",
-  "gap-96",
-  "gap-px",
-  "gap-x-0",
   "gap-x-0.5",
   "gap-x-1",
-  "gap-x-1.5",
-  "gap-x-2",
-  "gap-x-2.5",
   "gap-x-3",
-  "gap-x-3.5",
   "gap-x-4",
-  "gap-x-5",
-  "gap-x-6",
-  "gap-x-7",
-  "gap-x-8",
-  "gap-x-9",
-  "gap-x-10",
-  "gap-x-11",
-  "gap-x-12",
-  "gap-x-14",
-  "gap-x-16",
-  "gap-x-20",
-  "gap-x-24",
-  "gap-x-28",
-  "gap-x-32",
-  "gap-x-36",
-  "gap-x-40",
-  "gap-x-44",
-  "gap-x-48",
-  "gap-x-52",
-  "gap-x-56",
-  "gap-x-60",
-  "gap-x-64",
-  "gap-x-72",
-  "gap-x-80",
-  "gap-x-96",
-  "gap-x-px",
-  "gap-y-0",
   "gap-y-0.5",
   "gap-y-1",
-  "gap-y-1.5",
-  "gap-y-2",
-  "gap-y-2.5",
   "gap-y-3",
-  "gap-y-3.5",
   "gap-y-4",
-  "gap-y-5",
-  "gap-y-6",
-  "gap-y-7",
-  "gap-y-8",
-  "gap-y-9",
-  "gap-y-10",
-  "gap-y-11",
-  "gap-y-12",
-  "gap-y-14",
-  "gap-y-16",
-  "gap-y-20",
-  "gap-y-24",
-  "gap-y-28",
-  "gap-y-32",
-  "gap-y-36",
-  "gap-y-40",
-  "gap-y-44",
-  "gap-y-48",
-  "gap-y-52",
-  "gap-y-56",
-  "gap-y-60",
-  "gap-y-64",
-  "gap-y-72",
-  "gap-y-80",
-  "gap-y-96",
-  "gap-y-px",
   "grayscale",
   "grayscale-0",
+  "grayscale-100",
   "grayscale-25",
   "grayscale-50",
   "grayscale-75",
-  "grayscale-100",
   "grid",
   "grid-cols-1",
+  "grid-cols-10",
+  "grid-cols-11",
+  "grid-cols-12",
   "grid-cols-2",
   "grid-cols-3",
   "grid-cols-4",
@@ -5013,9 +790,6 @@ exports[`getClassList 1`] = `
   "grid-cols-7",
   "grid-cols-8",
   "grid-cols-9",
-  "grid-cols-10",
-  "grid-cols-11",
-  "grid-cols-12",
   "grid-cols-none",
   "grid-cols-subgrid",
   "grid-flow-col",
@@ -5024,6 +798,9 @@ exports[`getClassList 1`] = `
   "grid-flow-row",
   "grid-flow-row-dense",
   "grid-rows-1",
+  "grid-rows-10",
+  "grid-rows-11",
+  "grid-rows-12",
   "grid-rows-2",
   "grid-rows-3",
   "grid-rows-4",
@@ -5032,461 +809,48 @@ exports[`getClassList 1`] = `
   "grid-rows-7",
   "grid-rows-8",
   "grid-rows-9",
-  "grid-rows-10",
-  "grid-rows-11",
-  "grid-rows-12",
   "grid-rows-none",
   "grid-rows-subgrid",
   "grow",
   "grow-0",
-  "h-0",
   "h-0.5",
   "h-1",
-  "h-1.5",
-  "h-2",
-  "h-2.5",
   "h-3",
-  "h-3.5",
   "h-4",
-  "h-5",
-  "h-6",
-  "h-7",
-  "h-8",
-  "h-9",
-  "h-10",
-  "h-11",
-  "h-12",
-  "h-14",
-  "h-16",
-  "h-20",
-  "h-24",
-  "h-28",
-  "h-32",
-  "h-36",
-  "h-40",
-  "h-44",
-  "h-48",
-  "h-52",
-  "h-56",
-  "h-60",
-  "h-64",
-  "h-72",
-  "h-80",
-  "h-96",
-  "h-1/2",
-  "h-1/3",
-  "h-1/4",
-  "h-1/5",
-  "h-1/6",
-  "h-1/12",
-  "h-2/3",
-  "h-2/4",
-  "h-2/5",
-  "h-2/6",
-  "h-2/12",
-  "h-3/4",
-  "h-3/5",
-  "h-3/6",
-  "h-3/12",
-  "h-4/5",
-  "h-4/6",
-  "h-4/12",
-  "h-5/6",
-  "h-5/12",
-  "h-6/12",
-  "h-7/12",
-  "h-8/12",
-  "h-9/12",
-  "h-10/12",
-  "h-11/12",
   "h-auto",
   "h-dvh",
-  "h-dvw",
   "h-fit",
   "h-full",
-  "h-lh",
   "h-lvh",
-  "h-lvw",
   "h-max",
   "h-min",
-  "h-px",
   "h-screen",
   "h-svh",
-  "h-svw",
   "hidden",
   "hue-rotate-0",
   "hue-rotate-15",
+  "hue-rotate-180",
   "hue-rotate-30",
   "hue-rotate-60",
   "hue-rotate-90",
-  "hue-rotate-180",
   "hyphens-auto",
   "hyphens-manual",
   "hyphens-none",
-  "indent-0",
   "indent-0.5",
   "indent-1",
-  "indent-1.5",
-  "indent-2",
-  "indent-2.5",
   "indent-3",
-  "indent-3.5",
   "indent-4",
-  "indent-5",
-  "indent-6",
-  "indent-7",
-  "indent-8",
-  "indent-9",
-  "indent-10",
-  "indent-11",
-  "indent-12",
-  "indent-14",
-  "indent-16",
-  "indent-20",
-  "indent-24",
-  "indent-28",
-  "indent-32",
-  "indent-36",
-  "indent-40",
-  "indent-44",
-  "indent-48",
-  "indent-52",
-  "indent-56",
-  "indent-60",
-  "indent-64",
-  "indent-72",
-  "indent-80",
-  "indent-96",
-  "indent-px",
   "inline",
-  "inline-0",
-  "inline-0.5",
-  "inline-1",
-  "inline-1.5",
-  "inline-2",
-  "inline-2.5",
-  "inline-3",
-  "inline-3.5",
-  "inline-4",
-  "inline-5",
-  "inline-6",
-  "inline-7",
-  "inline-8",
-  "inline-9",
-  "inline-10",
-  "inline-11",
-  "inline-12",
-  "inline-14",
-  "inline-16",
-  "inline-20",
-  "inline-24",
-  "inline-28",
-  "inline-32",
-  "inline-36",
-  "inline-40",
-  "inline-44",
-  "inline-48",
-  "inline-52",
-  "inline-56",
-  "inline-60",
-  "inline-64",
-  "inline-72",
-  "inline-80",
-  "inline-96",
-  "inline-auto",
   "inline-block",
-  "inline-dvw",
-  "inline-fit",
   "inline-flex",
-  "inline-full",
   "inline-grid",
-  "inline-lg",
-  "inline-lvw",
-  "inline-max",
-  "inline-md",
-  "inline-1/2",
-  "inline-1/3",
-  "inline-1/4",
-  "inline-1/5",
-  "inline-1/6",
-  "inline-1/12",
-  "inline-2/3",
-  "inline-2/4",
-  "inline-2/5",
-  "inline-2/6",
-  "inline-2/12",
-  "inline-3/4",
-  "inline-3/5",
-  "inline-3/6",
-  "inline-3/12",
-  "inline-4/5",
-  "inline-4/6",
-  "inline-4/12",
-  "inline-5/6",
-  "inline-5/12",
-  "inline-6/12",
-  "inline-7/12",
-  "inline-8/12",
-  "inline-9/12",
-  "inline-10/12",
-  "inline-11/12",
-  "inline-min",
-  "inline-px",
-  "inline-screen",
-  "inline-svw",
   "inline-table",
-  "inset-0",
   "inset-0.5",
   "inset-1",
-  "inset-1.5",
-  "inset-2",
-  "inset-2.5",
   "inset-3",
-  "inset-3.5",
   "inset-4",
-  "inset-5",
-  "inset-6",
-  "inset-7",
-  "inset-8",
-  "inset-9",
-  "inset-10",
-  "inset-11",
-  "inset-12",
-  "inset-14",
-  "inset-16",
-  "inset-20",
-  "inset-24",
-  "inset-28",
-  "inset-32",
-  "inset-36",
-  "inset-40",
-  "inset-44",
-  "inset-48",
-  "inset-52",
-  "inset-56",
-  "inset-60",
-  "inset-64",
-  "inset-72",
-  "inset-80",
-  "inset-96",
-  "inset-1/2",
-  "inset-1/3",
-  "inset-1/4",
-  "inset-1/5",
-  "inset-1/6",
-  "inset-1/12",
-  "inset-2/3",
-  "inset-2/4",
-  "inset-2/5",
-  "inset-2/6",
-  "inset-2/12",
-  "inset-3/4",
-  "inset-3/5",
-  "inset-3/6",
-  "inset-3/12",
-  "inset-4/5",
-  "inset-4/6",
-  "inset-4/12",
-  "inset-5/6",
-  "inset-5/12",
-  "inset-6/12",
-  "inset-7/12",
-  "inset-8/12",
-  "inset-9/12",
-  "inset-10/12",
-  "inset-11/12",
   "inset-auto",
-  "inset-be-0",
-  "inset-be-0.5",
-  "inset-be-1",
-  "inset-be-1.5",
-  "inset-be-2",
-  "inset-be-2.5",
-  "inset-be-3",
-  "inset-be-3.5",
-  "inset-be-4",
-  "inset-be-5",
-  "inset-be-6",
-  "inset-be-7",
-  "inset-be-8",
-  "inset-be-9",
-  "inset-be-10",
-  "inset-be-11",
-  "inset-be-12",
-  "inset-be-14",
-  "inset-be-16",
-  "inset-be-20",
-  "inset-be-24",
-  "inset-be-28",
-  "inset-be-32",
-  "inset-be-36",
-  "inset-be-40",
-  "inset-be-44",
-  "inset-be-48",
-  "inset-be-52",
-  "inset-be-56",
-  "inset-be-60",
-  "inset-be-64",
-  "inset-be-72",
-  "inset-be-80",
-  "inset-be-96",
-  "inset-be-1/2",
-  "inset-be-1/3",
-  "inset-be-1/4",
-  "inset-be-1/5",
-  "inset-be-1/6",
-  "inset-be-1/12",
-  "inset-be-2/3",
-  "inset-be-2/4",
-  "inset-be-2/5",
-  "inset-be-2/6",
-  "inset-be-2/12",
-  "inset-be-3/4",
-  "inset-be-3/5",
-  "inset-be-3/6",
-  "inset-be-3/12",
-  "inset-be-4/5",
-  "inset-be-4/6",
-  "inset-be-4/12",
-  "inset-be-5/6",
-  "inset-be-5/12",
-  "inset-be-6/12",
-  "inset-be-7/12",
-  "inset-be-8/12",
-  "inset-be-9/12",
-  "inset-be-10/12",
-  "inset-be-11/12",
-  "inset-be-auto",
-  "inset-be-full",
-  "inset-be-px",
-  "inset-bs-0",
-  "inset-bs-0.5",
-  "inset-bs-1",
-  "inset-bs-1.5",
-  "inset-bs-2",
-  "inset-bs-2.5",
-  "inset-bs-3",
-  "inset-bs-3.5",
-  "inset-bs-4",
-  "inset-bs-5",
-  "inset-bs-6",
-  "inset-bs-7",
-  "inset-bs-8",
-  "inset-bs-9",
-  "inset-bs-10",
-  "inset-bs-11",
-  "inset-bs-12",
-  "inset-bs-14",
-  "inset-bs-16",
-  "inset-bs-20",
-  "inset-bs-24",
-  "inset-bs-28",
-  "inset-bs-32",
-  "inset-bs-36",
-  "inset-bs-40",
-  "inset-bs-44",
-  "inset-bs-48",
-  "inset-bs-52",
-  "inset-bs-56",
-  "inset-bs-60",
-  "inset-bs-64",
-  "inset-bs-72",
-  "inset-bs-80",
-  "inset-bs-96",
-  "inset-bs-1/2",
-  "inset-bs-1/3",
-  "inset-bs-1/4",
-  "inset-bs-1/5",
-  "inset-bs-1/6",
-  "inset-bs-1/12",
-  "inset-bs-2/3",
-  "inset-bs-2/4",
-  "inset-bs-2/5",
-  "inset-bs-2/6",
-  "inset-bs-2/12",
-  "inset-bs-3/4",
-  "inset-bs-3/5",
-  "inset-bs-3/6",
-  "inset-bs-3/12",
-  "inset-bs-4/5",
-  "inset-bs-4/6",
-  "inset-bs-4/12",
-  "inset-bs-5/6",
-  "inset-bs-5/12",
-  "inset-bs-6/12",
-  "inset-bs-7/12",
-  "inset-bs-8/12",
-  "inset-bs-9/12",
-  "inset-bs-10/12",
-  "inset-bs-11/12",
-  "inset-bs-auto",
-  "inset-bs-full",
-  "inset-bs-px",
-  "inset-e-0",
-  "inset-e-0.5",
-  "inset-e-1",
-  "inset-e-1.5",
-  "inset-e-2",
-  "inset-e-2.5",
-  "inset-e-3",
-  "inset-e-3.5",
-  "inset-e-4",
-  "inset-e-5",
-  "inset-e-6",
-  "inset-e-7",
-  "inset-e-8",
-  "inset-e-9",
-  "inset-e-10",
-  "inset-e-11",
-  "inset-e-12",
-  "inset-e-14",
-  "inset-e-16",
-  "inset-e-20",
-  "inset-e-24",
-  "inset-e-28",
-  "inset-e-32",
-  "inset-e-36",
-  "inset-e-40",
-  "inset-e-44",
-  "inset-e-48",
-  "inset-e-52",
-  "inset-e-56",
-  "inset-e-60",
-  "inset-e-64",
-  "inset-e-72",
-  "inset-e-80",
-  "inset-e-96",
-  "inset-e-1/2",
-  "inset-e-1/3",
-  "inset-e-1/4",
-  "inset-e-1/5",
-  "inset-e-1/6",
-  "inset-e-1/12",
-  "inset-e-2/3",
-  "inset-e-2/4",
-  "inset-e-2/5",
-  "inset-e-2/6",
-  "inset-e-2/12",
-  "inset-e-3/4",
-  "inset-e-3/5",
-  "inset-e-3/6",
-  "inset-e-3/12",
-  "inset-e-4/5",
-  "inset-e-4/6",
-  "inset-e-4/12",
-  "inset-e-5/6",
-  "inset-e-5/12",
-  "inset-e-6/12",
-  "inset-e-7/12",
-  "inset-e-8/12",
-  "inset-e-9/12",
-  "inset-e-10/12",
-  "inset-e-11/12",
-  "inset-e-auto",
-  "inset-e-full",
-  "inset-e-px",
   "inset-full",
-  "inset-px",
   "inset-ring",
   "inset-ring-0",
   "inset-ring-1",
@@ -5494,498 +858,62 @@ exports[`getClassList 1`] = `
   "inset-ring-4",
   "inset-ring-8",
   "inset-ring-current",
-  "inset-ring-current/0",
-  "inset-ring-current/5",
-  "inset-ring-current/10",
-  "inset-ring-current/15",
-  "inset-ring-current/20",
-  "inset-ring-current/25",
-  "inset-ring-current/30",
-  "inset-ring-current/35",
-  "inset-ring-current/40",
-  "inset-ring-current/45",
-  "inset-ring-current/50",
-  "inset-ring-current/55",
-  "inset-ring-current/60",
-  "inset-ring-current/65",
-  "inset-ring-current/70",
-  "inset-ring-current/75",
-  "inset-ring-current/80",
-  "inset-ring-current/85",
-  "inset-ring-current/90",
-  "inset-ring-current/95",
-  "inset-ring-current/100",
-  "inset-ring-current/background",
-  "inset-ring-inherit",
-  "inset-ring-inherit/0",
-  "inset-ring-inherit/5",
-  "inset-ring-inherit/10",
-  "inset-ring-inherit/15",
-  "inset-ring-inherit/20",
-  "inset-ring-inherit/25",
-  "inset-ring-inherit/30",
-  "inset-ring-inherit/35",
-  "inset-ring-inherit/40",
-  "inset-ring-inherit/45",
-  "inset-ring-inherit/50",
-  "inset-ring-inherit/55",
-  "inset-ring-inherit/60",
-  "inset-ring-inherit/65",
-  "inset-ring-inherit/70",
-  "inset-ring-inherit/75",
-  "inset-ring-inherit/80",
-  "inset-ring-inherit/85",
-  "inset-ring-inherit/90",
-  "inset-ring-inherit/95",
-  "inset-ring-inherit/100",
-  "inset-ring-inherit/background",
   "inset-ring-transparent",
-  "inset-ring-transparent/0",
-  "inset-ring-transparent/5",
-  "inset-ring-transparent/10",
-  "inset-ring-transparent/15",
-  "inset-ring-transparent/20",
-  "inset-ring-transparent/25",
-  "inset-ring-transparent/30",
-  "inset-ring-transparent/35",
-  "inset-ring-transparent/40",
-  "inset-ring-transparent/45",
-  "inset-ring-transparent/50",
-  "inset-ring-transparent/55",
-  "inset-ring-transparent/60",
-  "inset-ring-transparent/65",
-  "inset-ring-transparent/70",
-  "inset-ring-transparent/75",
-  "inset-ring-transparent/80",
-  "inset-ring-transparent/85",
-  "inset-ring-transparent/90",
-  "inset-ring-transparent/95",
-  "inset-ring-transparent/100",
-  "inset-ring-transparent/background",
-  "inset-s-0",
-  "inset-s-0.5",
-  "inset-s-1",
-  "inset-s-1.5",
-  "inset-s-2",
-  "inset-s-2.5",
-  "inset-s-3",
-  "inset-s-3.5",
-  "inset-s-4",
-  "inset-s-5",
-  "inset-s-6",
-  "inset-s-7",
-  "inset-s-8",
-  "inset-s-9",
-  "inset-s-10",
-  "inset-s-11",
-  "inset-s-12",
-  "inset-s-14",
-  "inset-s-16",
-  "inset-s-20",
-  "inset-s-24",
-  "inset-s-28",
-  "inset-s-32",
-  "inset-s-36",
-  "inset-s-40",
-  "inset-s-44",
-  "inset-s-48",
-  "inset-s-52",
-  "inset-s-56",
-  "inset-s-60",
-  "inset-s-64",
-  "inset-s-72",
-  "inset-s-80",
-  "inset-s-96",
-  "inset-s-1/2",
-  "inset-s-1/3",
-  "inset-s-1/4",
-  "inset-s-1/5",
-  "inset-s-1/6",
-  "inset-s-1/12",
-  "inset-s-2/3",
-  "inset-s-2/4",
-  "inset-s-2/5",
-  "inset-s-2/6",
-  "inset-s-2/12",
-  "inset-s-3/4",
-  "inset-s-3/5",
-  "inset-s-3/6",
-  "inset-s-3/12",
-  "inset-s-4/5",
-  "inset-s-4/6",
-  "inset-s-4/12",
-  "inset-s-5/6",
-  "inset-s-5/12",
-  "inset-s-6/12",
-  "inset-s-7/12",
-  "inset-s-8/12",
-  "inset-s-9/12",
-  "inset-s-10/12",
-  "inset-s-11/12",
-  "inset-s-auto",
-  "inset-s-full",
-  "inset-s-px",
+  "inset-shadow",
   "inset-shadow-current",
-  "inset-shadow-current/0",
-  "inset-shadow-current/5",
-  "inset-shadow-current/10",
-  "inset-shadow-current/15",
-  "inset-shadow-current/20",
-  "inset-shadow-current/25",
-  "inset-shadow-current/30",
-  "inset-shadow-current/35",
-  "inset-shadow-current/40",
-  "inset-shadow-current/45",
-  "inset-shadow-current/50",
-  "inset-shadow-current/55",
-  "inset-shadow-current/60",
-  "inset-shadow-current/65",
-  "inset-shadow-current/70",
-  "inset-shadow-current/75",
-  "inset-shadow-current/80",
-  "inset-shadow-current/85",
-  "inset-shadow-current/90",
-  "inset-shadow-current/95",
-  "inset-shadow-current/100",
-  "inset-shadow-current/background",
-  "inset-shadow-inherit",
-  "inset-shadow-inherit/0",
-  "inset-shadow-inherit/5",
-  "inset-shadow-inherit/10",
-  "inset-shadow-inherit/15",
-  "inset-shadow-inherit/20",
-  "inset-shadow-inherit/25",
-  "inset-shadow-inherit/30",
-  "inset-shadow-inherit/35",
-  "inset-shadow-inherit/40",
-  "inset-shadow-inherit/45",
-  "inset-shadow-inherit/50",
-  "inset-shadow-inherit/55",
-  "inset-shadow-inherit/60",
-  "inset-shadow-inherit/65",
-  "inset-shadow-inherit/70",
-  "inset-shadow-inherit/75",
-  "inset-shadow-inherit/80",
-  "inset-shadow-inherit/85",
-  "inset-shadow-inherit/90",
-  "inset-shadow-inherit/95",
-  "inset-shadow-inherit/100",
-  "inset-shadow-inherit/background",
-  "inset-shadow-initial",
-  "inset-shadow-none",
-  "inset-shadow-sm",
-  "inset-shadow-sm/0",
-  "inset-shadow-sm/5",
-  "inset-shadow-sm/10",
-  "inset-shadow-sm/15",
-  "inset-shadow-sm/20",
-  "inset-shadow-sm/25",
-  "inset-shadow-sm/30",
-  "inset-shadow-sm/35",
-  "inset-shadow-sm/40",
-  "inset-shadow-sm/45",
-  "inset-shadow-sm/50",
-  "inset-shadow-sm/55",
-  "inset-shadow-sm/60",
-  "inset-shadow-sm/65",
-  "inset-shadow-sm/70",
-  "inset-shadow-sm/75",
-  "inset-shadow-sm/80",
-  "inset-shadow-sm/85",
-  "inset-shadow-sm/90",
-  "inset-shadow-sm/95",
-  "inset-shadow-sm/100",
   "inset-shadow-transparent",
-  "inset-shadow-transparent/0",
-  "inset-shadow-transparent/5",
-  "inset-shadow-transparent/10",
-  "inset-shadow-transparent/15",
-  "inset-shadow-transparent/20",
-  "inset-shadow-transparent/25",
-  "inset-shadow-transparent/30",
-  "inset-shadow-transparent/35",
-  "inset-shadow-transparent/40",
-  "inset-shadow-transparent/45",
-  "inset-shadow-transparent/50",
-  "inset-shadow-transparent/55",
-  "inset-shadow-transparent/60",
-  "inset-shadow-transparent/65",
-  "inset-shadow-transparent/70",
-  "inset-shadow-transparent/75",
-  "inset-shadow-transparent/80",
-  "inset-shadow-transparent/85",
-  "inset-shadow-transparent/90",
-  "inset-shadow-transparent/95",
-  "inset-shadow-transparent/100",
-  "inset-shadow-transparent/background",
-  "inset-x-0",
   "inset-x-0.5",
   "inset-x-1",
-  "inset-x-1.5",
-  "inset-x-2",
-  "inset-x-2.5",
   "inset-x-3",
-  "inset-x-3.5",
   "inset-x-4",
-  "inset-x-5",
-  "inset-x-6",
-  "inset-x-7",
-  "inset-x-8",
-  "inset-x-9",
-  "inset-x-10",
-  "inset-x-11",
-  "inset-x-12",
-  "inset-x-14",
-  "inset-x-16",
-  "inset-x-20",
-  "inset-x-24",
-  "inset-x-28",
-  "inset-x-32",
-  "inset-x-36",
-  "inset-x-40",
-  "inset-x-44",
-  "inset-x-48",
-  "inset-x-52",
-  "inset-x-56",
-  "inset-x-60",
-  "inset-x-64",
-  "inset-x-72",
-  "inset-x-80",
-  "inset-x-96",
-  "inset-x-1/2",
-  "inset-x-1/3",
-  "inset-x-1/4",
-  "inset-x-1/5",
-  "inset-x-1/6",
-  "inset-x-1/12",
-  "inset-x-2/3",
-  "inset-x-2/4",
-  "inset-x-2/5",
-  "inset-x-2/6",
-  "inset-x-2/12",
-  "inset-x-3/4",
-  "inset-x-3/5",
-  "inset-x-3/6",
-  "inset-x-3/12",
-  "inset-x-4/5",
-  "inset-x-4/6",
-  "inset-x-4/12",
-  "inset-x-5/6",
-  "inset-x-5/12",
-  "inset-x-6/12",
-  "inset-x-7/12",
-  "inset-x-8/12",
-  "inset-x-9/12",
-  "inset-x-10/12",
-  "inset-x-11/12",
   "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-2",
-  "inset-y-2.5",
   "inset-y-3",
-  "inset-y-3.5",
   "inset-y-4",
-  "inset-y-5",
-  "inset-y-6",
-  "inset-y-7",
-  "inset-y-8",
-  "inset-y-9",
-  "inset-y-10",
-  "inset-y-11",
-  "inset-y-12",
-  "inset-y-14",
-  "inset-y-16",
-  "inset-y-20",
-  "inset-y-24",
-  "inset-y-28",
-  "inset-y-32",
-  "inset-y-36",
-  "inset-y-40",
-  "inset-y-44",
-  "inset-y-48",
-  "inset-y-52",
-  "inset-y-56",
-  "inset-y-60",
-  "inset-y-64",
-  "inset-y-72",
-  "inset-y-80",
-  "inset-y-96",
-  "inset-y-1/2",
-  "inset-y-1/3",
-  "inset-y-1/4",
-  "inset-y-1/5",
-  "inset-y-1/6",
-  "inset-y-1/12",
-  "inset-y-2/3",
-  "inset-y-2/4",
-  "inset-y-2/5",
-  "inset-y-2/6",
-  "inset-y-2/12",
-  "inset-y-3/4",
-  "inset-y-3/5",
-  "inset-y-3/6",
-  "inset-y-3/12",
-  "inset-y-4/5",
-  "inset-y-4/6",
-  "inset-y-4/12",
-  "inset-y-5/6",
-  "inset-y-5/12",
-  "inset-y-6/12",
-  "inset-y-7/12",
-  "inset-y-8/12",
-  "inset-y-9/12",
-  "inset-y-10/12",
-  "inset-y-11/12",
   "inset-y-auto",
   "inset-y-full",
-  "inset-y-px",
   "invert",
   "invert-0",
+  "invert-100",
   "invert-25",
   "invert-50",
   "invert-75",
-  "invert-100",
   "invisible",
   "isolate",
   "isolation-auto",
   "italic",
   "items-baseline",
-  "items-baseline-last",
   "items-center",
-  "items-center-safe",
   "items-end",
-  "items-end-safe",
   "items-start",
   "items-stretch",
   "justify-around",
   "justify-baseline",
   "justify-between",
   "justify-center",
-  "justify-center-safe",
   "justify-end",
-  "justify-end-safe",
   "justify-evenly",
   "justify-items-center",
-  "justify-items-center-safe",
   "justify-items-end",
-  "justify-items-end-safe",
   "justify-items-normal",
   "justify-items-start",
   "justify-items-stretch",
   "justify-normal",
   "justify-self-auto",
   "justify-self-center",
-  "justify-self-center-safe",
   "justify-self-end",
-  "justify-self-end-safe",
   "justify-self-start",
   "justify-self-stretch",
   "justify-start",
   "justify-stretch",
-  "leading-0",
-  "leading-0.5",
-  "leading-1",
-  "leading-1.5",
-  "leading-2",
-  "leading-2.5",
-  "leading-3",
-  "leading-3.5",
-  "leading-4",
-  "leading-5",
-  "leading-6",
-  "leading-7",
-  "leading-8",
-  "leading-9",
-  "leading-10",
-  "leading-11",
-  "leading-12",
-  "leading-14",
-  "leading-16",
-  "leading-20",
-  "leading-24",
-  "leading-28",
-  "leading-32",
-  "leading-36",
-  "leading-40",
-  "leading-44",
-  "leading-48",
-  "leading-52",
-  "leading-56",
-  "leading-60",
-  "leading-64",
-  "leading-72",
-  "leading-80",
-  "leading-96",
-  "leading-none",
-  "leading-px",
-  "left-0",
   "left-0.5",
   "left-1",
-  "left-1.5",
-  "left-2",
-  "left-2.5",
   "left-3",
-  "left-3.5",
   "left-4",
-  "left-5",
-  "left-6",
-  "left-7",
-  "left-8",
-  "left-9",
-  "left-10",
-  "left-11",
-  "left-12",
-  "left-14",
-  "left-16",
-  "left-20",
-  "left-24",
-  "left-28",
-  "left-32",
-  "left-36",
-  "left-40",
-  "left-44",
-  "left-48",
-  "left-52",
-  "left-56",
-  "left-60",
-  "left-64",
-  "left-72",
-  "left-80",
-  "left-96",
-  "left-1/2",
-  "left-1/3",
-  "left-1/4",
-  "left-1/5",
-  "left-1/6",
-  "left-1/12",
-  "left-2/3",
-  "left-2/4",
-  "left-2/5",
-  "left-2/6",
-  "left-2/12",
-  "left-3/4",
-  "left-3/5",
-  "left-3/6",
-  "left-3/12",
-  "left-4/5",
-  "left-4/6",
-  "left-4/12",
-  "left-5/6",
-  "left-5/12",
-  "left-6/12",
-  "left-7/12",
-  "left-8/12",
-  "left-9/12",
-  "left-10/12",
-  "left-11/12",
   "left-auto",
   "left-full",
-  "left-px",
   "line-clamp-1",
   "line-clamp-2",
   "line-clamp-3",
@@ -6003,3075 +931,67 @@ exports[`getClassList 1`] = `
   "list-none",
   "list-outside",
   "lowercase",
-  "m-0",
   "m-0.5",
   "m-1",
-  "m-1.5",
-  "m-2",
-  "m-2.5",
   "m-3",
-  "m-3.5",
   "m-4",
-  "m-5",
-  "m-6",
-  "m-7",
-  "m-8",
-  "m-9",
-  "m-10",
-  "m-11",
-  "m-12",
-  "m-14",
-  "m-16",
-  "m-20",
-  "m-24",
-  "m-28",
-  "m-32",
-  "m-36",
-  "m-40",
-  "m-44",
-  "m-48",
-  "m-52",
-  "m-56",
-  "m-60",
-  "m-64",
-  "m-72",
-  "m-80",
-  "m-96",
   "m-auto",
-  "m-px",
-  "mask-add",
-  "mask-alpha",
-  "mask-auto",
-  "mask-b-from-0",
-  "mask-b-from-0%",
-  "mask-b-from-0.5",
-  "mask-b-from-1",
-  "mask-b-from-1.5",
-  "mask-b-from-2",
-  "mask-b-from-2.5",
-  "mask-b-from-3",
-  "mask-b-from-3.5",
-  "mask-b-from-4",
-  "mask-b-from-5",
-  "mask-b-from-5%",
-  "mask-b-from-6",
-  "mask-b-from-7",
-  "mask-b-from-8",
-  "mask-b-from-9",
-  "mask-b-from-10",
-  "mask-b-from-10%",
-  "mask-b-from-11",
-  "mask-b-from-12",
-  "mask-b-from-14",
-  "mask-b-from-15%",
-  "mask-b-from-16",
-  "mask-b-from-20",
-  "mask-b-from-20%",
-  "mask-b-from-24",
-  "mask-b-from-25%",
-  "mask-b-from-28",
-  "mask-b-from-30%",
-  "mask-b-from-32",
-  "mask-b-from-35%",
-  "mask-b-from-36",
-  "mask-b-from-40",
-  "mask-b-from-40%",
-  "mask-b-from-44",
-  "mask-b-from-45%",
-  "mask-b-from-48",
-  "mask-b-from-50%",
-  "mask-b-from-52",
-  "mask-b-from-55%",
-  "mask-b-from-56",
-  "mask-b-from-60",
-  "mask-b-from-60%",
-  "mask-b-from-64",
-  "mask-b-from-65%",
-  "mask-b-from-70%",
-  "mask-b-from-72",
-  "mask-b-from-75%",
-  "mask-b-from-80",
-  "mask-b-from-80%",
-  "mask-b-from-85%",
-  "mask-b-from-90%",
-  "mask-b-from-95%",
-  "mask-b-from-96",
-  "mask-b-from-100%",
-  "mask-b-from-current",
-  "mask-b-from-current/0",
-  "mask-b-from-current/5",
-  "mask-b-from-current/10",
-  "mask-b-from-current/15",
-  "mask-b-from-current/20",
-  "mask-b-from-current/25",
-  "mask-b-from-current/30",
-  "mask-b-from-current/35",
-  "mask-b-from-current/40",
-  "mask-b-from-current/45",
-  "mask-b-from-current/50",
-  "mask-b-from-current/55",
-  "mask-b-from-current/60",
-  "mask-b-from-current/65",
-  "mask-b-from-current/70",
-  "mask-b-from-current/75",
-  "mask-b-from-current/80",
-  "mask-b-from-current/85",
-  "mask-b-from-current/90",
-  "mask-b-from-current/95",
-  "mask-b-from-current/100",
-  "mask-b-from-current/background",
-  "mask-b-from-inherit",
-  "mask-b-from-inherit/0",
-  "mask-b-from-inherit/5",
-  "mask-b-from-inherit/10",
-  "mask-b-from-inherit/15",
-  "mask-b-from-inherit/20",
-  "mask-b-from-inherit/25",
-  "mask-b-from-inherit/30",
-  "mask-b-from-inherit/35",
-  "mask-b-from-inherit/40",
-  "mask-b-from-inherit/45",
-  "mask-b-from-inherit/50",
-  "mask-b-from-inherit/55",
-  "mask-b-from-inherit/60",
-  "mask-b-from-inherit/65",
-  "mask-b-from-inherit/70",
-  "mask-b-from-inherit/75",
-  "mask-b-from-inherit/80",
-  "mask-b-from-inherit/85",
-  "mask-b-from-inherit/90",
-  "mask-b-from-inherit/95",
-  "mask-b-from-inherit/100",
-  "mask-b-from-inherit/background",
-  "mask-b-from-transparent",
-  "mask-b-from-transparent/0",
-  "mask-b-from-transparent/5",
-  "mask-b-from-transparent/10",
-  "mask-b-from-transparent/15",
-  "mask-b-from-transparent/20",
-  "mask-b-from-transparent/25",
-  "mask-b-from-transparent/30",
-  "mask-b-from-transparent/35",
-  "mask-b-from-transparent/40",
-  "mask-b-from-transparent/45",
-  "mask-b-from-transparent/50",
-  "mask-b-from-transparent/55",
-  "mask-b-from-transparent/60",
-  "mask-b-from-transparent/65",
-  "mask-b-from-transparent/70",
-  "mask-b-from-transparent/75",
-  "mask-b-from-transparent/80",
-  "mask-b-from-transparent/85",
-  "mask-b-from-transparent/90",
-  "mask-b-from-transparent/95",
-  "mask-b-from-transparent/100",
-  "mask-b-from-transparent/background",
-  "mask-b-to-0",
-  "mask-b-to-0%",
-  "mask-b-to-0.5",
-  "mask-b-to-1",
-  "mask-b-to-1.5",
-  "mask-b-to-2",
-  "mask-b-to-2.5",
-  "mask-b-to-3",
-  "mask-b-to-3.5",
-  "mask-b-to-4",
-  "mask-b-to-5",
-  "mask-b-to-5%",
-  "mask-b-to-6",
-  "mask-b-to-7",
-  "mask-b-to-8",
-  "mask-b-to-9",
-  "mask-b-to-10",
-  "mask-b-to-10%",
-  "mask-b-to-11",
-  "mask-b-to-12",
-  "mask-b-to-14",
-  "mask-b-to-15%",
-  "mask-b-to-16",
-  "mask-b-to-20",
-  "mask-b-to-20%",
-  "mask-b-to-24",
-  "mask-b-to-25%",
-  "mask-b-to-28",
-  "mask-b-to-30%",
-  "mask-b-to-32",
-  "mask-b-to-35%",
-  "mask-b-to-36",
-  "mask-b-to-40",
-  "mask-b-to-40%",
-  "mask-b-to-44",
-  "mask-b-to-45%",
-  "mask-b-to-48",
-  "mask-b-to-50%",
-  "mask-b-to-52",
-  "mask-b-to-55%",
-  "mask-b-to-56",
-  "mask-b-to-60",
-  "mask-b-to-60%",
-  "mask-b-to-64",
-  "mask-b-to-65%",
-  "mask-b-to-70%",
-  "mask-b-to-72",
-  "mask-b-to-75%",
-  "mask-b-to-80",
-  "mask-b-to-80%",
-  "mask-b-to-85%",
-  "mask-b-to-90%",
-  "mask-b-to-95%",
-  "mask-b-to-96",
-  "mask-b-to-100%",
-  "mask-b-to-current",
-  "mask-b-to-current/0",
-  "mask-b-to-current/5",
-  "mask-b-to-current/10",
-  "mask-b-to-current/15",
-  "mask-b-to-current/20",
-  "mask-b-to-current/25",
-  "mask-b-to-current/30",
-  "mask-b-to-current/35",
-  "mask-b-to-current/40",
-  "mask-b-to-current/45",
-  "mask-b-to-current/50",
-  "mask-b-to-current/55",
-  "mask-b-to-current/60",
-  "mask-b-to-current/65",
-  "mask-b-to-current/70",
-  "mask-b-to-current/75",
-  "mask-b-to-current/80",
-  "mask-b-to-current/85",
-  "mask-b-to-current/90",
-  "mask-b-to-current/95",
-  "mask-b-to-current/100",
-  "mask-b-to-current/background",
-  "mask-b-to-inherit",
-  "mask-b-to-inherit/0",
-  "mask-b-to-inherit/5",
-  "mask-b-to-inherit/10",
-  "mask-b-to-inherit/15",
-  "mask-b-to-inherit/20",
-  "mask-b-to-inherit/25",
-  "mask-b-to-inherit/30",
-  "mask-b-to-inherit/35",
-  "mask-b-to-inherit/40",
-  "mask-b-to-inherit/45",
-  "mask-b-to-inherit/50",
-  "mask-b-to-inherit/55",
-  "mask-b-to-inherit/60",
-  "mask-b-to-inherit/65",
-  "mask-b-to-inherit/70",
-  "mask-b-to-inherit/75",
-  "mask-b-to-inherit/80",
-  "mask-b-to-inherit/85",
-  "mask-b-to-inherit/90",
-  "mask-b-to-inherit/95",
-  "mask-b-to-inherit/100",
-  "mask-b-to-inherit/background",
-  "mask-b-to-transparent",
-  "mask-b-to-transparent/0",
-  "mask-b-to-transparent/5",
-  "mask-b-to-transparent/10",
-  "mask-b-to-transparent/15",
-  "mask-b-to-transparent/20",
-  "mask-b-to-transparent/25",
-  "mask-b-to-transparent/30",
-  "mask-b-to-transparent/35",
-  "mask-b-to-transparent/40",
-  "mask-b-to-transparent/45",
-  "mask-b-to-transparent/50",
-  "mask-b-to-transparent/55",
-  "mask-b-to-transparent/60",
-  "mask-b-to-transparent/65",
-  "mask-b-to-transparent/70",
-  "mask-b-to-transparent/75",
-  "mask-b-to-transparent/80",
-  "mask-b-to-transparent/85",
-  "mask-b-to-transparent/90",
-  "mask-b-to-transparent/95",
-  "mask-b-to-transparent/100",
-  "mask-b-to-transparent/background",
-  "mask-bottom",
-  "mask-bottom-left",
-  "mask-bottom-right",
-  "mask-center",
-  "mask-circle",
-  "mask-clip-border",
-  "mask-clip-content",
-  "mask-clip-fill",
-  "mask-clip-padding",
-  "mask-clip-stroke",
-  "mask-clip-view",
-  "mask-conic-0",
-  "mask-conic-1",
-  "mask-conic-2",
-  "mask-conic-3",
-  "mask-conic-6",
-  "mask-conic-12",
-  "mask-conic-45",
-  "mask-conic-90",
-  "mask-conic-180",
-  "mask-conic-from-0",
-  "mask-conic-from-0%",
-  "mask-conic-from-0.5",
-  "mask-conic-from-1",
-  "mask-conic-from-1.5",
-  "mask-conic-from-2",
-  "mask-conic-from-2.5",
-  "mask-conic-from-3",
-  "mask-conic-from-3.5",
-  "mask-conic-from-4",
-  "mask-conic-from-5",
-  "mask-conic-from-5%",
-  "mask-conic-from-6",
-  "mask-conic-from-7",
-  "mask-conic-from-8",
-  "mask-conic-from-9",
-  "mask-conic-from-10",
-  "mask-conic-from-10%",
-  "mask-conic-from-11",
-  "mask-conic-from-12",
-  "mask-conic-from-14",
-  "mask-conic-from-15%",
-  "mask-conic-from-16",
-  "mask-conic-from-20",
-  "mask-conic-from-20%",
-  "mask-conic-from-24",
-  "mask-conic-from-25%",
-  "mask-conic-from-28",
-  "mask-conic-from-30%",
-  "mask-conic-from-32",
-  "mask-conic-from-35%",
-  "mask-conic-from-36",
-  "mask-conic-from-40",
-  "mask-conic-from-40%",
-  "mask-conic-from-44",
-  "mask-conic-from-45%",
-  "mask-conic-from-48",
-  "mask-conic-from-50%",
-  "mask-conic-from-52",
-  "mask-conic-from-55%",
-  "mask-conic-from-56",
-  "mask-conic-from-60",
-  "mask-conic-from-60%",
-  "mask-conic-from-64",
-  "mask-conic-from-65%",
-  "mask-conic-from-70%",
-  "mask-conic-from-72",
-  "mask-conic-from-75%",
-  "mask-conic-from-80",
-  "mask-conic-from-80%",
-  "mask-conic-from-85%",
-  "mask-conic-from-90%",
-  "mask-conic-from-95%",
-  "mask-conic-from-96",
-  "mask-conic-from-100%",
-  "mask-conic-from-current",
-  "mask-conic-from-current/0",
-  "mask-conic-from-current/5",
-  "mask-conic-from-current/10",
-  "mask-conic-from-current/15",
-  "mask-conic-from-current/20",
-  "mask-conic-from-current/25",
-  "mask-conic-from-current/30",
-  "mask-conic-from-current/35",
-  "mask-conic-from-current/40",
-  "mask-conic-from-current/45",
-  "mask-conic-from-current/50",
-  "mask-conic-from-current/55",
-  "mask-conic-from-current/60",
-  "mask-conic-from-current/65",
-  "mask-conic-from-current/70",
-  "mask-conic-from-current/75",
-  "mask-conic-from-current/80",
-  "mask-conic-from-current/85",
-  "mask-conic-from-current/90",
-  "mask-conic-from-current/95",
-  "mask-conic-from-current/100",
-  "mask-conic-from-current/background",
-  "mask-conic-from-inherit",
-  "mask-conic-from-inherit/0",
-  "mask-conic-from-inherit/5",
-  "mask-conic-from-inherit/10",
-  "mask-conic-from-inherit/15",
-  "mask-conic-from-inherit/20",
-  "mask-conic-from-inherit/25",
-  "mask-conic-from-inherit/30",
-  "mask-conic-from-inherit/35",
-  "mask-conic-from-inherit/40",
-  "mask-conic-from-inherit/45",
-  "mask-conic-from-inherit/50",
-  "mask-conic-from-inherit/55",
-  "mask-conic-from-inherit/60",
-  "mask-conic-from-inherit/65",
-  "mask-conic-from-inherit/70",
-  "mask-conic-from-inherit/75",
-  "mask-conic-from-inherit/80",
-  "mask-conic-from-inherit/85",
-  "mask-conic-from-inherit/90",
-  "mask-conic-from-inherit/95",
-  "mask-conic-from-inherit/100",
-  "mask-conic-from-inherit/background",
-  "mask-conic-from-transparent",
-  "mask-conic-from-transparent/0",
-  "mask-conic-from-transparent/5",
-  "mask-conic-from-transparent/10",
-  "mask-conic-from-transparent/15",
-  "mask-conic-from-transparent/20",
-  "mask-conic-from-transparent/25",
-  "mask-conic-from-transparent/30",
-  "mask-conic-from-transparent/35",
-  "mask-conic-from-transparent/40",
-  "mask-conic-from-transparent/45",
-  "mask-conic-from-transparent/50",
-  "mask-conic-from-transparent/55",
-  "mask-conic-from-transparent/60",
-  "mask-conic-from-transparent/65",
-  "mask-conic-from-transparent/70",
-  "mask-conic-from-transparent/75",
-  "mask-conic-from-transparent/80",
-  "mask-conic-from-transparent/85",
-  "mask-conic-from-transparent/90",
-  "mask-conic-from-transparent/95",
-  "mask-conic-from-transparent/100",
-  "mask-conic-from-transparent/background",
-  "mask-conic-to-0",
-  "mask-conic-to-0%",
-  "mask-conic-to-0.5",
-  "mask-conic-to-1",
-  "mask-conic-to-1.5",
-  "mask-conic-to-2",
-  "mask-conic-to-2.5",
-  "mask-conic-to-3",
-  "mask-conic-to-3.5",
-  "mask-conic-to-4",
-  "mask-conic-to-5",
-  "mask-conic-to-5%",
-  "mask-conic-to-6",
-  "mask-conic-to-7",
-  "mask-conic-to-8",
-  "mask-conic-to-9",
-  "mask-conic-to-10",
-  "mask-conic-to-10%",
-  "mask-conic-to-11",
-  "mask-conic-to-12",
-  "mask-conic-to-14",
-  "mask-conic-to-15%",
-  "mask-conic-to-16",
-  "mask-conic-to-20",
-  "mask-conic-to-20%",
-  "mask-conic-to-24",
-  "mask-conic-to-25%",
-  "mask-conic-to-28",
-  "mask-conic-to-30%",
-  "mask-conic-to-32",
-  "mask-conic-to-35%",
-  "mask-conic-to-36",
-  "mask-conic-to-40",
-  "mask-conic-to-40%",
-  "mask-conic-to-44",
-  "mask-conic-to-45%",
-  "mask-conic-to-48",
-  "mask-conic-to-50%",
-  "mask-conic-to-52",
-  "mask-conic-to-55%",
-  "mask-conic-to-56",
-  "mask-conic-to-60",
-  "mask-conic-to-60%",
-  "mask-conic-to-64",
-  "mask-conic-to-65%",
-  "mask-conic-to-70%",
-  "mask-conic-to-72",
-  "mask-conic-to-75%",
-  "mask-conic-to-80",
-  "mask-conic-to-80%",
-  "mask-conic-to-85%",
-  "mask-conic-to-90%",
-  "mask-conic-to-95%",
-  "mask-conic-to-96",
-  "mask-conic-to-100%",
-  "mask-conic-to-current",
-  "mask-conic-to-current/0",
-  "mask-conic-to-current/5",
-  "mask-conic-to-current/10",
-  "mask-conic-to-current/15",
-  "mask-conic-to-current/20",
-  "mask-conic-to-current/25",
-  "mask-conic-to-current/30",
-  "mask-conic-to-current/35",
-  "mask-conic-to-current/40",
-  "mask-conic-to-current/45",
-  "mask-conic-to-current/50",
-  "mask-conic-to-current/55",
-  "mask-conic-to-current/60",
-  "mask-conic-to-current/65",
-  "mask-conic-to-current/70",
-  "mask-conic-to-current/75",
-  "mask-conic-to-current/80",
-  "mask-conic-to-current/85",
-  "mask-conic-to-current/90",
-  "mask-conic-to-current/95",
-  "mask-conic-to-current/100",
-  "mask-conic-to-current/background",
-  "mask-conic-to-inherit",
-  "mask-conic-to-inherit/0",
-  "mask-conic-to-inherit/5",
-  "mask-conic-to-inherit/10",
-  "mask-conic-to-inherit/15",
-  "mask-conic-to-inherit/20",
-  "mask-conic-to-inherit/25",
-  "mask-conic-to-inherit/30",
-  "mask-conic-to-inherit/35",
-  "mask-conic-to-inherit/40",
-  "mask-conic-to-inherit/45",
-  "mask-conic-to-inherit/50",
-  "mask-conic-to-inherit/55",
-  "mask-conic-to-inherit/60",
-  "mask-conic-to-inherit/65",
-  "mask-conic-to-inherit/70",
-  "mask-conic-to-inherit/75",
-  "mask-conic-to-inherit/80",
-  "mask-conic-to-inherit/85",
-  "mask-conic-to-inherit/90",
-  "mask-conic-to-inherit/95",
-  "mask-conic-to-inherit/100",
-  "mask-conic-to-inherit/background",
-  "mask-conic-to-transparent",
-  "mask-conic-to-transparent/0",
-  "mask-conic-to-transparent/5",
-  "mask-conic-to-transparent/10",
-  "mask-conic-to-transparent/15",
-  "mask-conic-to-transparent/20",
-  "mask-conic-to-transparent/25",
-  "mask-conic-to-transparent/30",
-  "mask-conic-to-transparent/35",
-  "mask-conic-to-transparent/40",
-  "mask-conic-to-transparent/45",
-  "mask-conic-to-transparent/50",
-  "mask-conic-to-transparent/55",
-  "mask-conic-to-transparent/60",
-  "mask-conic-to-transparent/65",
-  "mask-conic-to-transparent/70",
-  "mask-conic-to-transparent/75",
-  "mask-conic-to-transparent/80",
-  "mask-conic-to-transparent/85",
-  "mask-conic-to-transparent/90",
-  "mask-conic-to-transparent/95",
-  "mask-conic-to-transparent/100",
-  "mask-conic-to-transparent/background",
-  "mask-contain",
-  "mask-cover",
-  "mask-ellipse",
-  "mask-exclude",
-  "mask-intersect",
-  "mask-l-from-0",
-  "mask-l-from-0%",
-  "mask-l-from-0.5",
-  "mask-l-from-1",
-  "mask-l-from-1.5",
-  "mask-l-from-2",
-  "mask-l-from-2.5",
-  "mask-l-from-3",
-  "mask-l-from-3.5",
-  "mask-l-from-4",
-  "mask-l-from-5",
-  "mask-l-from-5%",
-  "mask-l-from-6",
-  "mask-l-from-7",
-  "mask-l-from-8",
-  "mask-l-from-9",
-  "mask-l-from-10",
-  "mask-l-from-10%",
-  "mask-l-from-11",
-  "mask-l-from-12",
-  "mask-l-from-14",
-  "mask-l-from-15%",
-  "mask-l-from-16",
-  "mask-l-from-20",
-  "mask-l-from-20%",
-  "mask-l-from-24",
-  "mask-l-from-25%",
-  "mask-l-from-28",
-  "mask-l-from-30%",
-  "mask-l-from-32",
-  "mask-l-from-35%",
-  "mask-l-from-36",
-  "mask-l-from-40",
-  "mask-l-from-40%",
-  "mask-l-from-44",
-  "mask-l-from-45%",
-  "mask-l-from-48",
-  "mask-l-from-50%",
-  "mask-l-from-52",
-  "mask-l-from-55%",
-  "mask-l-from-56",
-  "mask-l-from-60",
-  "mask-l-from-60%",
-  "mask-l-from-64",
-  "mask-l-from-65%",
-  "mask-l-from-70%",
-  "mask-l-from-72",
-  "mask-l-from-75%",
-  "mask-l-from-80",
-  "mask-l-from-80%",
-  "mask-l-from-85%",
-  "mask-l-from-90%",
-  "mask-l-from-95%",
-  "mask-l-from-96",
-  "mask-l-from-100%",
-  "mask-l-from-current",
-  "mask-l-from-current/0",
-  "mask-l-from-current/5",
-  "mask-l-from-current/10",
-  "mask-l-from-current/15",
-  "mask-l-from-current/20",
-  "mask-l-from-current/25",
-  "mask-l-from-current/30",
-  "mask-l-from-current/35",
-  "mask-l-from-current/40",
-  "mask-l-from-current/45",
-  "mask-l-from-current/50",
-  "mask-l-from-current/55",
-  "mask-l-from-current/60",
-  "mask-l-from-current/65",
-  "mask-l-from-current/70",
-  "mask-l-from-current/75",
-  "mask-l-from-current/80",
-  "mask-l-from-current/85",
-  "mask-l-from-current/90",
-  "mask-l-from-current/95",
-  "mask-l-from-current/100",
-  "mask-l-from-current/background",
-  "mask-l-from-inherit",
-  "mask-l-from-inherit/0",
-  "mask-l-from-inherit/5",
-  "mask-l-from-inherit/10",
-  "mask-l-from-inherit/15",
-  "mask-l-from-inherit/20",
-  "mask-l-from-inherit/25",
-  "mask-l-from-inherit/30",
-  "mask-l-from-inherit/35",
-  "mask-l-from-inherit/40",
-  "mask-l-from-inherit/45",
-  "mask-l-from-inherit/50",
-  "mask-l-from-inherit/55",
-  "mask-l-from-inherit/60",
-  "mask-l-from-inherit/65",
-  "mask-l-from-inherit/70",
-  "mask-l-from-inherit/75",
-  "mask-l-from-inherit/80",
-  "mask-l-from-inherit/85",
-  "mask-l-from-inherit/90",
-  "mask-l-from-inherit/95",
-  "mask-l-from-inherit/100",
-  "mask-l-from-inherit/background",
-  "mask-l-from-transparent",
-  "mask-l-from-transparent/0",
-  "mask-l-from-transparent/5",
-  "mask-l-from-transparent/10",
-  "mask-l-from-transparent/15",
-  "mask-l-from-transparent/20",
-  "mask-l-from-transparent/25",
-  "mask-l-from-transparent/30",
-  "mask-l-from-transparent/35",
-  "mask-l-from-transparent/40",
-  "mask-l-from-transparent/45",
-  "mask-l-from-transparent/50",
-  "mask-l-from-transparent/55",
-  "mask-l-from-transparent/60",
-  "mask-l-from-transparent/65",
-  "mask-l-from-transparent/70",
-  "mask-l-from-transparent/75",
-  "mask-l-from-transparent/80",
-  "mask-l-from-transparent/85",
-  "mask-l-from-transparent/90",
-  "mask-l-from-transparent/95",
-  "mask-l-from-transparent/100",
-  "mask-l-from-transparent/background",
-  "mask-l-to-0",
-  "mask-l-to-0%",
-  "mask-l-to-0.5",
-  "mask-l-to-1",
-  "mask-l-to-1.5",
-  "mask-l-to-2",
-  "mask-l-to-2.5",
-  "mask-l-to-3",
-  "mask-l-to-3.5",
-  "mask-l-to-4",
-  "mask-l-to-5",
-  "mask-l-to-5%",
-  "mask-l-to-6",
-  "mask-l-to-7",
-  "mask-l-to-8",
-  "mask-l-to-9",
-  "mask-l-to-10",
-  "mask-l-to-10%",
-  "mask-l-to-11",
-  "mask-l-to-12",
-  "mask-l-to-14",
-  "mask-l-to-15%",
-  "mask-l-to-16",
-  "mask-l-to-20",
-  "mask-l-to-20%",
-  "mask-l-to-24",
-  "mask-l-to-25%",
-  "mask-l-to-28",
-  "mask-l-to-30%",
-  "mask-l-to-32",
-  "mask-l-to-35%",
-  "mask-l-to-36",
-  "mask-l-to-40",
-  "mask-l-to-40%",
-  "mask-l-to-44",
-  "mask-l-to-45%",
-  "mask-l-to-48",
-  "mask-l-to-50%",
-  "mask-l-to-52",
-  "mask-l-to-55%",
-  "mask-l-to-56",
-  "mask-l-to-60",
-  "mask-l-to-60%",
-  "mask-l-to-64",
-  "mask-l-to-65%",
-  "mask-l-to-70%",
-  "mask-l-to-72",
-  "mask-l-to-75%",
-  "mask-l-to-80",
-  "mask-l-to-80%",
-  "mask-l-to-85%",
-  "mask-l-to-90%",
-  "mask-l-to-95%",
-  "mask-l-to-96",
-  "mask-l-to-100%",
-  "mask-l-to-current",
-  "mask-l-to-current/0",
-  "mask-l-to-current/5",
-  "mask-l-to-current/10",
-  "mask-l-to-current/15",
-  "mask-l-to-current/20",
-  "mask-l-to-current/25",
-  "mask-l-to-current/30",
-  "mask-l-to-current/35",
-  "mask-l-to-current/40",
-  "mask-l-to-current/45",
-  "mask-l-to-current/50",
-  "mask-l-to-current/55",
-  "mask-l-to-current/60",
-  "mask-l-to-current/65",
-  "mask-l-to-current/70",
-  "mask-l-to-current/75",
-  "mask-l-to-current/80",
-  "mask-l-to-current/85",
-  "mask-l-to-current/90",
-  "mask-l-to-current/95",
-  "mask-l-to-current/100",
-  "mask-l-to-current/background",
-  "mask-l-to-inherit",
-  "mask-l-to-inherit/0",
-  "mask-l-to-inherit/5",
-  "mask-l-to-inherit/10",
-  "mask-l-to-inherit/15",
-  "mask-l-to-inherit/20",
-  "mask-l-to-inherit/25",
-  "mask-l-to-inherit/30",
-  "mask-l-to-inherit/35",
-  "mask-l-to-inherit/40",
-  "mask-l-to-inherit/45",
-  "mask-l-to-inherit/50",
-  "mask-l-to-inherit/55",
-  "mask-l-to-inherit/60",
-  "mask-l-to-inherit/65",
-  "mask-l-to-inherit/70",
-  "mask-l-to-inherit/75",
-  "mask-l-to-inherit/80",
-  "mask-l-to-inherit/85",
-  "mask-l-to-inherit/90",
-  "mask-l-to-inherit/95",
-  "mask-l-to-inherit/100",
-  "mask-l-to-inherit/background",
-  "mask-l-to-transparent",
-  "mask-l-to-transparent/0",
-  "mask-l-to-transparent/5",
-  "mask-l-to-transparent/10",
-  "mask-l-to-transparent/15",
-  "mask-l-to-transparent/20",
-  "mask-l-to-transparent/25",
-  "mask-l-to-transparent/30",
-  "mask-l-to-transparent/35",
-  "mask-l-to-transparent/40",
-  "mask-l-to-transparent/45",
-  "mask-l-to-transparent/50",
-  "mask-l-to-transparent/55",
-  "mask-l-to-transparent/60",
-  "mask-l-to-transparent/65",
-  "mask-l-to-transparent/70",
-  "mask-l-to-transparent/75",
-  "mask-l-to-transparent/80",
-  "mask-l-to-transparent/85",
-  "mask-l-to-transparent/90",
-  "mask-l-to-transparent/95",
-  "mask-l-to-transparent/100",
-  "mask-l-to-transparent/background",
-  "mask-left",
-  "mask-linear-0",
-  "mask-linear-1",
-  "mask-linear-2",
-  "mask-linear-3",
-  "mask-linear-6",
-  "mask-linear-12",
-  "mask-linear-45",
-  "mask-linear-90",
-  "mask-linear-180",
-  "mask-linear-from-0",
-  "mask-linear-from-0%",
-  "mask-linear-from-0.5",
-  "mask-linear-from-1",
-  "mask-linear-from-1.5",
-  "mask-linear-from-2",
-  "mask-linear-from-2.5",
-  "mask-linear-from-3",
-  "mask-linear-from-3.5",
-  "mask-linear-from-4",
-  "mask-linear-from-5",
-  "mask-linear-from-5%",
-  "mask-linear-from-6",
-  "mask-linear-from-7",
-  "mask-linear-from-8",
-  "mask-linear-from-9",
-  "mask-linear-from-10",
-  "mask-linear-from-10%",
-  "mask-linear-from-11",
-  "mask-linear-from-12",
-  "mask-linear-from-14",
-  "mask-linear-from-15%",
-  "mask-linear-from-16",
-  "mask-linear-from-20",
-  "mask-linear-from-20%",
-  "mask-linear-from-24",
-  "mask-linear-from-25%",
-  "mask-linear-from-28",
-  "mask-linear-from-30%",
-  "mask-linear-from-32",
-  "mask-linear-from-35%",
-  "mask-linear-from-36",
-  "mask-linear-from-40",
-  "mask-linear-from-40%",
-  "mask-linear-from-44",
-  "mask-linear-from-45%",
-  "mask-linear-from-48",
-  "mask-linear-from-50%",
-  "mask-linear-from-52",
-  "mask-linear-from-55%",
-  "mask-linear-from-56",
-  "mask-linear-from-60",
-  "mask-linear-from-60%",
-  "mask-linear-from-64",
-  "mask-linear-from-65%",
-  "mask-linear-from-70%",
-  "mask-linear-from-72",
-  "mask-linear-from-75%",
-  "mask-linear-from-80",
-  "mask-linear-from-80%",
-  "mask-linear-from-85%",
-  "mask-linear-from-90%",
-  "mask-linear-from-95%",
-  "mask-linear-from-96",
-  "mask-linear-from-100%",
-  "mask-linear-from-current",
-  "mask-linear-from-current/0",
-  "mask-linear-from-current/5",
-  "mask-linear-from-current/10",
-  "mask-linear-from-current/15",
-  "mask-linear-from-current/20",
-  "mask-linear-from-current/25",
-  "mask-linear-from-current/30",
-  "mask-linear-from-current/35",
-  "mask-linear-from-current/40",
-  "mask-linear-from-current/45",
-  "mask-linear-from-current/50",
-  "mask-linear-from-current/55",
-  "mask-linear-from-current/60",
-  "mask-linear-from-current/65",
-  "mask-linear-from-current/70",
-  "mask-linear-from-current/75",
-  "mask-linear-from-current/80",
-  "mask-linear-from-current/85",
-  "mask-linear-from-current/90",
-  "mask-linear-from-current/95",
-  "mask-linear-from-current/100",
-  "mask-linear-from-current/background",
-  "mask-linear-from-inherit",
-  "mask-linear-from-inherit/0",
-  "mask-linear-from-inherit/5",
-  "mask-linear-from-inherit/10",
-  "mask-linear-from-inherit/15",
-  "mask-linear-from-inherit/20",
-  "mask-linear-from-inherit/25",
-  "mask-linear-from-inherit/30",
-  "mask-linear-from-inherit/35",
-  "mask-linear-from-inherit/40",
-  "mask-linear-from-inherit/45",
-  "mask-linear-from-inherit/50",
-  "mask-linear-from-inherit/55",
-  "mask-linear-from-inherit/60",
-  "mask-linear-from-inherit/65",
-  "mask-linear-from-inherit/70",
-  "mask-linear-from-inherit/75",
-  "mask-linear-from-inherit/80",
-  "mask-linear-from-inherit/85",
-  "mask-linear-from-inherit/90",
-  "mask-linear-from-inherit/95",
-  "mask-linear-from-inherit/100",
-  "mask-linear-from-inherit/background",
-  "mask-linear-from-transparent",
-  "mask-linear-from-transparent/0",
-  "mask-linear-from-transparent/5",
-  "mask-linear-from-transparent/10",
-  "mask-linear-from-transparent/15",
-  "mask-linear-from-transparent/20",
-  "mask-linear-from-transparent/25",
-  "mask-linear-from-transparent/30",
-  "mask-linear-from-transparent/35",
-  "mask-linear-from-transparent/40",
-  "mask-linear-from-transparent/45",
-  "mask-linear-from-transparent/50",
-  "mask-linear-from-transparent/55",
-  "mask-linear-from-transparent/60",
-  "mask-linear-from-transparent/65",
-  "mask-linear-from-transparent/70",
-  "mask-linear-from-transparent/75",
-  "mask-linear-from-transparent/80",
-  "mask-linear-from-transparent/85",
-  "mask-linear-from-transparent/90",
-  "mask-linear-from-transparent/95",
-  "mask-linear-from-transparent/100",
-  "mask-linear-from-transparent/background",
-  "mask-linear-to-0",
-  "mask-linear-to-0%",
-  "mask-linear-to-0.5",
-  "mask-linear-to-1",
-  "mask-linear-to-1.5",
-  "mask-linear-to-2",
-  "mask-linear-to-2.5",
-  "mask-linear-to-3",
-  "mask-linear-to-3.5",
-  "mask-linear-to-4",
-  "mask-linear-to-5",
-  "mask-linear-to-5%",
-  "mask-linear-to-6",
-  "mask-linear-to-7",
-  "mask-linear-to-8",
-  "mask-linear-to-9",
-  "mask-linear-to-10",
-  "mask-linear-to-10%",
-  "mask-linear-to-11",
-  "mask-linear-to-12",
-  "mask-linear-to-14",
-  "mask-linear-to-15%",
-  "mask-linear-to-16",
-  "mask-linear-to-20",
-  "mask-linear-to-20%",
-  "mask-linear-to-24",
-  "mask-linear-to-25%",
-  "mask-linear-to-28",
-  "mask-linear-to-30%",
-  "mask-linear-to-32",
-  "mask-linear-to-35%",
-  "mask-linear-to-36",
-  "mask-linear-to-40",
-  "mask-linear-to-40%",
-  "mask-linear-to-44",
-  "mask-linear-to-45%",
-  "mask-linear-to-48",
-  "mask-linear-to-50%",
-  "mask-linear-to-52",
-  "mask-linear-to-55%",
-  "mask-linear-to-56",
-  "mask-linear-to-60",
-  "mask-linear-to-60%",
-  "mask-linear-to-64",
-  "mask-linear-to-65%",
-  "mask-linear-to-70%",
-  "mask-linear-to-72",
-  "mask-linear-to-75%",
-  "mask-linear-to-80",
-  "mask-linear-to-80%",
-  "mask-linear-to-85%",
-  "mask-linear-to-90%",
-  "mask-linear-to-95%",
-  "mask-linear-to-96",
-  "mask-linear-to-100%",
-  "mask-linear-to-current",
-  "mask-linear-to-current/0",
-  "mask-linear-to-current/5",
-  "mask-linear-to-current/10",
-  "mask-linear-to-current/15",
-  "mask-linear-to-current/20",
-  "mask-linear-to-current/25",
-  "mask-linear-to-current/30",
-  "mask-linear-to-current/35",
-  "mask-linear-to-current/40",
-  "mask-linear-to-current/45",
-  "mask-linear-to-current/50",
-  "mask-linear-to-current/55",
-  "mask-linear-to-current/60",
-  "mask-linear-to-current/65",
-  "mask-linear-to-current/70",
-  "mask-linear-to-current/75",
-  "mask-linear-to-current/80",
-  "mask-linear-to-current/85",
-  "mask-linear-to-current/90",
-  "mask-linear-to-current/95",
-  "mask-linear-to-current/100",
-  "mask-linear-to-current/background",
-  "mask-linear-to-inherit",
-  "mask-linear-to-inherit/0",
-  "mask-linear-to-inherit/5",
-  "mask-linear-to-inherit/10",
-  "mask-linear-to-inherit/15",
-  "mask-linear-to-inherit/20",
-  "mask-linear-to-inherit/25",
-  "mask-linear-to-inherit/30",
-  "mask-linear-to-inherit/35",
-  "mask-linear-to-inherit/40",
-  "mask-linear-to-inherit/45",
-  "mask-linear-to-inherit/50",
-  "mask-linear-to-inherit/55",
-  "mask-linear-to-inherit/60",
-  "mask-linear-to-inherit/65",
-  "mask-linear-to-inherit/70",
-  "mask-linear-to-inherit/75",
-  "mask-linear-to-inherit/80",
-  "mask-linear-to-inherit/85",
-  "mask-linear-to-inherit/90",
-  "mask-linear-to-inherit/95",
-  "mask-linear-to-inherit/100",
-  "mask-linear-to-inherit/background",
-  "mask-linear-to-transparent",
-  "mask-linear-to-transparent/0",
-  "mask-linear-to-transparent/5",
-  "mask-linear-to-transparent/10",
-  "mask-linear-to-transparent/15",
-  "mask-linear-to-transparent/20",
-  "mask-linear-to-transparent/25",
-  "mask-linear-to-transparent/30",
-  "mask-linear-to-transparent/35",
-  "mask-linear-to-transparent/40",
-  "mask-linear-to-transparent/45",
-  "mask-linear-to-transparent/50",
-  "mask-linear-to-transparent/55",
-  "mask-linear-to-transparent/60",
-  "mask-linear-to-transparent/65",
-  "mask-linear-to-transparent/70",
-  "mask-linear-to-transparent/75",
-  "mask-linear-to-transparent/80",
-  "mask-linear-to-transparent/85",
-  "mask-linear-to-transparent/90",
-  "mask-linear-to-transparent/95",
-  "mask-linear-to-transparent/100",
-  "mask-linear-to-transparent/background",
-  "mask-luminance",
-  "mask-match",
-  "mask-no-clip",
-  "mask-no-repeat",
-  "mask-none",
-  "mask-origin-border",
-  "mask-origin-content",
-  "mask-origin-fill",
-  "mask-origin-padding",
-  "mask-origin-stroke",
-  "mask-origin-view",
-  "mask-r-from-0",
-  "mask-r-from-0%",
-  "mask-r-from-0.5",
-  "mask-r-from-1",
-  "mask-r-from-1.5",
-  "mask-r-from-2",
-  "mask-r-from-2.5",
-  "mask-r-from-3",
-  "mask-r-from-3.5",
-  "mask-r-from-4",
-  "mask-r-from-5",
-  "mask-r-from-5%",
-  "mask-r-from-6",
-  "mask-r-from-7",
-  "mask-r-from-8",
-  "mask-r-from-9",
-  "mask-r-from-10",
-  "mask-r-from-10%",
-  "mask-r-from-11",
-  "mask-r-from-12",
-  "mask-r-from-14",
-  "mask-r-from-15%",
-  "mask-r-from-16",
-  "mask-r-from-20",
-  "mask-r-from-20%",
-  "mask-r-from-24",
-  "mask-r-from-25%",
-  "mask-r-from-28",
-  "mask-r-from-30%",
-  "mask-r-from-32",
-  "mask-r-from-35%",
-  "mask-r-from-36",
-  "mask-r-from-40",
-  "mask-r-from-40%",
-  "mask-r-from-44",
-  "mask-r-from-45%",
-  "mask-r-from-48",
-  "mask-r-from-50%",
-  "mask-r-from-52",
-  "mask-r-from-55%",
-  "mask-r-from-56",
-  "mask-r-from-60",
-  "mask-r-from-60%",
-  "mask-r-from-64",
-  "mask-r-from-65%",
-  "mask-r-from-70%",
-  "mask-r-from-72",
-  "mask-r-from-75%",
-  "mask-r-from-80",
-  "mask-r-from-80%",
-  "mask-r-from-85%",
-  "mask-r-from-90%",
-  "mask-r-from-95%",
-  "mask-r-from-96",
-  "mask-r-from-100%",
-  "mask-r-from-current",
-  "mask-r-from-current/0",
-  "mask-r-from-current/5",
-  "mask-r-from-current/10",
-  "mask-r-from-current/15",
-  "mask-r-from-current/20",
-  "mask-r-from-current/25",
-  "mask-r-from-current/30",
-  "mask-r-from-current/35",
-  "mask-r-from-current/40",
-  "mask-r-from-current/45",
-  "mask-r-from-current/50",
-  "mask-r-from-current/55",
-  "mask-r-from-current/60",
-  "mask-r-from-current/65",
-  "mask-r-from-current/70",
-  "mask-r-from-current/75",
-  "mask-r-from-current/80",
-  "mask-r-from-current/85",
-  "mask-r-from-current/90",
-  "mask-r-from-current/95",
-  "mask-r-from-current/100",
-  "mask-r-from-current/background",
-  "mask-r-from-inherit",
-  "mask-r-from-inherit/0",
-  "mask-r-from-inherit/5",
-  "mask-r-from-inherit/10",
-  "mask-r-from-inherit/15",
-  "mask-r-from-inherit/20",
-  "mask-r-from-inherit/25",
-  "mask-r-from-inherit/30",
-  "mask-r-from-inherit/35",
-  "mask-r-from-inherit/40",
-  "mask-r-from-inherit/45",
-  "mask-r-from-inherit/50",
-  "mask-r-from-inherit/55",
-  "mask-r-from-inherit/60",
-  "mask-r-from-inherit/65",
-  "mask-r-from-inherit/70",
-  "mask-r-from-inherit/75",
-  "mask-r-from-inherit/80",
-  "mask-r-from-inherit/85",
-  "mask-r-from-inherit/90",
-  "mask-r-from-inherit/95",
-  "mask-r-from-inherit/100",
-  "mask-r-from-inherit/background",
-  "mask-r-from-transparent",
-  "mask-r-from-transparent/0",
-  "mask-r-from-transparent/5",
-  "mask-r-from-transparent/10",
-  "mask-r-from-transparent/15",
-  "mask-r-from-transparent/20",
-  "mask-r-from-transparent/25",
-  "mask-r-from-transparent/30",
-  "mask-r-from-transparent/35",
-  "mask-r-from-transparent/40",
-  "mask-r-from-transparent/45",
-  "mask-r-from-transparent/50",
-  "mask-r-from-transparent/55",
-  "mask-r-from-transparent/60",
-  "mask-r-from-transparent/65",
-  "mask-r-from-transparent/70",
-  "mask-r-from-transparent/75",
-  "mask-r-from-transparent/80",
-  "mask-r-from-transparent/85",
-  "mask-r-from-transparent/90",
-  "mask-r-from-transparent/95",
-  "mask-r-from-transparent/100",
-  "mask-r-from-transparent/background",
-  "mask-r-to-0",
-  "mask-r-to-0%",
-  "mask-r-to-0.5",
-  "mask-r-to-1",
-  "mask-r-to-1.5",
-  "mask-r-to-2",
-  "mask-r-to-2.5",
-  "mask-r-to-3",
-  "mask-r-to-3.5",
-  "mask-r-to-4",
-  "mask-r-to-5",
-  "mask-r-to-5%",
-  "mask-r-to-6",
-  "mask-r-to-7",
-  "mask-r-to-8",
-  "mask-r-to-9",
-  "mask-r-to-10",
-  "mask-r-to-10%",
-  "mask-r-to-11",
-  "mask-r-to-12",
-  "mask-r-to-14",
-  "mask-r-to-15%",
-  "mask-r-to-16",
-  "mask-r-to-20",
-  "mask-r-to-20%",
-  "mask-r-to-24",
-  "mask-r-to-25%",
-  "mask-r-to-28",
-  "mask-r-to-30%",
-  "mask-r-to-32",
-  "mask-r-to-35%",
-  "mask-r-to-36",
-  "mask-r-to-40",
-  "mask-r-to-40%",
-  "mask-r-to-44",
-  "mask-r-to-45%",
-  "mask-r-to-48",
-  "mask-r-to-50%",
-  "mask-r-to-52",
-  "mask-r-to-55%",
-  "mask-r-to-56",
-  "mask-r-to-60",
-  "mask-r-to-60%",
-  "mask-r-to-64",
-  "mask-r-to-65%",
-  "mask-r-to-70%",
-  "mask-r-to-72",
-  "mask-r-to-75%",
-  "mask-r-to-80",
-  "mask-r-to-80%",
-  "mask-r-to-85%",
-  "mask-r-to-90%",
-  "mask-r-to-95%",
-  "mask-r-to-96",
-  "mask-r-to-100%",
-  "mask-r-to-current",
-  "mask-r-to-current/0",
-  "mask-r-to-current/5",
-  "mask-r-to-current/10",
-  "mask-r-to-current/15",
-  "mask-r-to-current/20",
-  "mask-r-to-current/25",
-  "mask-r-to-current/30",
-  "mask-r-to-current/35",
-  "mask-r-to-current/40",
-  "mask-r-to-current/45",
-  "mask-r-to-current/50",
-  "mask-r-to-current/55",
-  "mask-r-to-current/60",
-  "mask-r-to-current/65",
-  "mask-r-to-current/70",
-  "mask-r-to-current/75",
-  "mask-r-to-current/80",
-  "mask-r-to-current/85",
-  "mask-r-to-current/90",
-  "mask-r-to-current/95",
-  "mask-r-to-current/100",
-  "mask-r-to-current/background",
-  "mask-r-to-inherit",
-  "mask-r-to-inherit/0",
-  "mask-r-to-inherit/5",
-  "mask-r-to-inherit/10",
-  "mask-r-to-inherit/15",
-  "mask-r-to-inherit/20",
-  "mask-r-to-inherit/25",
-  "mask-r-to-inherit/30",
-  "mask-r-to-inherit/35",
-  "mask-r-to-inherit/40",
-  "mask-r-to-inherit/45",
-  "mask-r-to-inherit/50",
-  "mask-r-to-inherit/55",
-  "mask-r-to-inherit/60",
-  "mask-r-to-inherit/65",
-  "mask-r-to-inherit/70",
-  "mask-r-to-inherit/75",
-  "mask-r-to-inherit/80",
-  "mask-r-to-inherit/85",
-  "mask-r-to-inherit/90",
-  "mask-r-to-inherit/95",
-  "mask-r-to-inherit/100",
-  "mask-r-to-inherit/background",
-  "mask-r-to-transparent",
-  "mask-r-to-transparent/0",
-  "mask-r-to-transparent/5",
-  "mask-r-to-transparent/10",
-  "mask-r-to-transparent/15",
-  "mask-r-to-transparent/20",
-  "mask-r-to-transparent/25",
-  "mask-r-to-transparent/30",
-  "mask-r-to-transparent/35",
-  "mask-r-to-transparent/40",
-  "mask-r-to-transparent/45",
-  "mask-r-to-transparent/50",
-  "mask-r-to-transparent/55",
-  "mask-r-to-transparent/60",
-  "mask-r-to-transparent/65",
-  "mask-r-to-transparent/70",
-  "mask-r-to-transparent/75",
-  "mask-r-to-transparent/80",
-  "mask-r-to-transparent/85",
-  "mask-r-to-transparent/90",
-  "mask-r-to-transparent/95",
-  "mask-r-to-transparent/100",
-  "mask-r-to-transparent/background",
-  "mask-radial-at-bottom",
-  "mask-radial-at-bottom-left",
-  "mask-radial-at-bottom-right",
-  "mask-radial-at-center",
-  "mask-radial-at-left",
-  "mask-radial-at-right",
-  "mask-radial-at-top",
-  "mask-radial-at-top-left",
-  "mask-radial-at-top-right",
-  "mask-radial-closest-corner",
-  "mask-radial-closest-side",
-  "mask-radial-farthest-corner",
-  "mask-radial-farthest-side",
-  "mask-radial-from-0",
-  "mask-radial-from-0%",
-  "mask-radial-from-0.5",
-  "mask-radial-from-1",
-  "mask-radial-from-1.5",
-  "mask-radial-from-2",
-  "mask-radial-from-2.5",
-  "mask-radial-from-3",
-  "mask-radial-from-3.5",
-  "mask-radial-from-4",
-  "mask-radial-from-5",
-  "mask-radial-from-5%",
-  "mask-radial-from-6",
-  "mask-radial-from-7",
-  "mask-radial-from-8",
-  "mask-radial-from-9",
-  "mask-radial-from-10",
-  "mask-radial-from-10%",
-  "mask-radial-from-11",
-  "mask-radial-from-12",
-  "mask-radial-from-14",
-  "mask-radial-from-15%",
-  "mask-radial-from-16",
-  "mask-radial-from-20",
-  "mask-radial-from-20%",
-  "mask-radial-from-24",
-  "mask-radial-from-25%",
-  "mask-radial-from-28",
-  "mask-radial-from-30%",
-  "mask-radial-from-32",
-  "mask-radial-from-35%",
-  "mask-radial-from-36",
-  "mask-radial-from-40",
-  "mask-radial-from-40%",
-  "mask-radial-from-44",
-  "mask-radial-from-45%",
-  "mask-radial-from-48",
-  "mask-radial-from-50%",
-  "mask-radial-from-52",
-  "mask-radial-from-55%",
-  "mask-radial-from-56",
-  "mask-radial-from-60",
-  "mask-radial-from-60%",
-  "mask-radial-from-64",
-  "mask-radial-from-65%",
-  "mask-radial-from-70%",
-  "mask-radial-from-72",
-  "mask-radial-from-75%",
-  "mask-radial-from-80",
-  "mask-radial-from-80%",
-  "mask-radial-from-85%",
-  "mask-radial-from-90%",
-  "mask-radial-from-95%",
-  "mask-radial-from-96",
-  "mask-radial-from-100%",
-  "mask-radial-from-current",
-  "mask-radial-from-current/0",
-  "mask-radial-from-current/5",
-  "mask-radial-from-current/10",
-  "mask-radial-from-current/15",
-  "mask-radial-from-current/20",
-  "mask-radial-from-current/25",
-  "mask-radial-from-current/30",
-  "mask-radial-from-current/35",
-  "mask-radial-from-current/40",
-  "mask-radial-from-current/45",
-  "mask-radial-from-current/50",
-  "mask-radial-from-current/55",
-  "mask-radial-from-current/60",
-  "mask-radial-from-current/65",
-  "mask-radial-from-current/70",
-  "mask-radial-from-current/75",
-  "mask-radial-from-current/80",
-  "mask-radial-from-current/85",
-  "mask-radial-from-current/90",
-  "mask-radial-from-current/95",
-  "mask-radial-from-current/100",
-  "mask-radial-from-current/background",
-  "mask-radial-from-inherit",
-  "mask-radial-from-inherit/0",
-  "mask-radial-from-inherit/5",
-  "mask-radial-from-inherit/10",
-  "mask-radial-from-inherit/15",
-  "mask-radial-from-inherit/20",
-  "mask-radial-from-inherit/25",
-  "mask-radial-from-inherit/30",
-  "mask-radial-from-inherit/35",
-  "mask-radial-from-inherit/40",
-  "mask-radial-from-inherit/45",
-  "mask-radial-from-inherit/50",
-  "mask-radial-from-inherit/55",
-  "mask-radial-from-inherit/60",
-  "mask-radial-from-inherit/65",
-  "mask-radial-from-inherit/70",
-  "mask-radial-from-inherit/75",
-  "mask-radial-from-inherit/80",
-  "mask-radial-from-inherit/85",
-  "mask-radial-from-inherit/90",
-  "mask-radial-from-inherit/95",
-  "mask-radial-from-inherit/100",
-  "mask-radial-from-inherit/background",
-  "mask-radial-from-transparent",
-  "mask-radial-from-transparent/0",
-  "mask-radial-from-transparent/5",
-  "mask-radial-from-transparent/10",
-  "mask-radial-from-transparent/15",
-  "mask-radial-from-transparent/20",
-  "mask-radial-from-transparent/25",
-  "mask-radial-from-transparent/30",
-  "mask-radial-from-transparent/35",
-  "mask-radial-from-transparent/40",
-  "mask-radial-from-transparent/45",
-  "mask-radial-from-transparent/50",
-  "mask-radial-from-transparent/55",
-  "mask-radial-from-transparent/60",
-  "mask-radial-from-transparent/65",
-  "mask-radial-from-transparent/70",
-  "mask-radial-from-transparent/75",
-  "mask-radial-from-transparent/80",
-  "mask-radial-from-transparent/85",
-  "mask-radial-from-transparent/90",
-  "mask-radial-from-transparent/95",
-  "mask-radial-from-transparent/100",
-  "mask-radial-from-transparent/background",
-  "mask-radial-to-0",
-  "mask-radial-to-0%",
-  "mask-radial-to-0.5",
-  "mask-radial-to-1",
-  "mask-radial-to-1.5",
-  "mask-radial-to-2",
-  "mask-radial-to-2.5",
-  "mask-radial-to-3",
-  "mask-radial-to-3.5",
-  "mask-radial-to-4",
-  "mask-radial-to-5",
-  "mask-radial-to-5%",
-  "mask-radial-to-6",
-  "mask-radial-to-7",
-  "mask-radial-to-8",
-  "mask-radial-to-9",
-  "mask-radial-to-10",
-  "mask-radial-to-10%",
-  "mask-radial-to-11",
-  "mask-radial-to-12",
-  "mask-radial-to-14",
-  "mask-radial-to-15%",
-  "mask-radial-to-16",
-  "mask-radial-to-20",
-  "mask-radial-to-20%",
-  "mask-radial-to-24",
-  "mask-radial-to-25%",
-  "mask-radial-to-28",
-  "mask-radial-to-30%",
-  "mask-radial-to-32",
-  "mask-radial-to-35%",
-  "mask-radial-to-36",
-  "mask-radial-to-40",
-  "mask-radial-to-40%",
-  "mask-radial-to-44",
-  "mask-radial-to-45%",
-  "mask-radial-to-48",
-  "mask-radial-to-50%",
-  "mask-radial-to-52",
-  "mask-radial-to-55%",
-  "mask-radial-to-56",
-  "mask-radial-to-60",
-  "mask-radial-to-60%",
-  "mask-radial-to-64",
-  "mask-radial-to-65%",
-  "mask-radial-to-70%",
-  "mask-radial-to-72",
-  "mask-radial-to-75%",
-  "mask-radial-to-80",
-  "mask-radial-to-80%",
-  "mask-radial-to-85%",
-  "mask-radial-to-90%",
-  "mask-radial-to-95%",
-  "mask-radial-to-96",
-  "mask-radial-to-100%",
-  "mask-radial-to-current",
-  "mask-radial-to-current/0",
-  "mask-radial-to-current/5",
-  "mask-radial-to-current/10",
-  "mask-radial-to-current/15",
-  "mask-radial-to-current/20",
-  "mask-radial-to-current/25",
-  "mask-radial-to-current/30",
-  "mask-radial-to-current/35",
-  "mask-radial-to-current/40",
-  "mask-radial-to-current/45",
-  "mask-radial-to-current/50",
-  "mask-radial-to-current/55",
-  "mask-radial-to-current/60",
-  "mask-radial-to-current/65",
-  "mask-radial-to-current/70",
-  "mask-radial-to-current/75",
-  "mask-radial-to-current/80",
-  "mask-radial-to-current/85",
-  "mask-radial-to-current/90",
-  "mask-radial-to-current/95",
-  "mask-radial-to-current/100",
-  "mask-radial-to-current/background",
-  "mask-radial-to-inherit",
-  "mask-radial-to-inherit/0",
-  "mask-radial-to-inherit/5",
-  "mask-radial-to-inherit/10",
-  "mask-radial-to-inherit/15",
-  "mask-radial-to-inherit/20",
-  "mask-radial-to-inherit/25",
-  "mask-radial-to-inherit/30",
-  "mask-radial-to-inherit/35",
-  "mask-radial-to-inherit/40",
-  "mask-radial-to-inherit/45",
-  "mask-radial-to-inherit/50",
-  "mask-radial-to-inherit/55",
-  "mask-radial-to-inherit/60",
-  "mask-radial-to-inherit/65",
-  "mask-radial-to-inherit/70",
-  "mask-radial-to-inherit/75",
-  "mask-radial-to-inherit/80",
-  "mask-radial-to-inherit/85",
-  "mask-radial-to-inherit/90",
-  "mask-radial-to-inherit/95",
-  "mask-radial-to-inherit/100",
-  "mask-radial-to-inherit/background",
-  "mask-radial-to-transparent",
-  "mask-radial-to-transparent/0",
-  "mask-radial-to-transparent/5",
-  "mask-radial-to-transparent/10",
-  "mask-radial-to-transparent/15",
-  "mask-radial-to-transparent/20",
-  "mask-radial-to-transparent/25",
-  "mask-radial-to-transparent/30",
-  "mask-radial-to-transparent/35",
-  "mask-radial-to-transparent/40",
-  "mask-radial-to-transparent/45",
-  "mask-radial-to-transparent/50",
-  "mask-radial-to-transparent/55",
-  "mask-radial-to-transparent/60",
-  "mask-radial-to-transparent/65",
-  "mask-radial-to-transparent/70",
-  "mask-radial-to-transparent/75",
-  "mask-radial-to-transparent/80",
-  "mask-radial-to-transparent/85",
-  "mask-radial-to-transparent/90",
-  "mask-radial-to-transparent/95",
-  "mask-radial-to-transparent/100",
-  "mask-radial-to-transparent/background",
-  "mask-repeat",
-  "mask-repeat-round",
-  "mask-repeat-space",
-  "mask-repeat-x",
-  "mask-repeat-y",
-  "mask-right",
-  "mask-subtract",
-  "mask-t-from-0",
-  "mask-t-from-0%",
-  "mask-t-from-0.5",
-  "mask-t-from-1",
-  "mask-t-from-1.5",
-  "mask-t-from-2",
-  "mask-t-from-2.5",
-  "mask-t-from-3",
-  "mask-t-from-3.5",
-  "mask-t-from-4",
-  "mask-t-from-5",
-  "mask-t-from-5%",
-  "mask-t-from-6",
-  "mask-t-from-7",
-  "mask-t-from-8",
-  "mask-t-from-9",
-  "mask-t-from-10",
-  "mask-t-from-10%",
-  "mask-t-from-11",
-  "mask-t-from-12",
-  "mask-t-from-14",
-  "mask-t-from-15%",
-  "mask-t-from-16",
-  "mask-t-from-20",
-  "mask-t-from-20%",
-  "mask-t-from-24",
-  "mask-t-from-25%",
-  "mask-t-from-28",
-  "mask-t-from-30%",
-  "mask-t-from-32",
-  "mask-t-from-35%",
-  "mask-t-from-36",
-  "mask-t-from-40",
-  "mask-t-from-40%",
-  "mask-t-from-44",
-  "mask-t-from-45%",
-  "mask-t-from-48",
-  "mask-t-from-50%",
-  "mask-t-from-52",
-  "mask-t-from-55%",
-  "mask-t-from-56",
-  "mask-t-from-60",
-  "mask-t-from-60%",
-  "mask-t-from-64",
-  "mask-t-from-65%",
-  "mask-t-from-70%",
-  "mask-t-from-72",
-  "mask-t-from-75%",
-  "mask-t-from-80",
-  "mask-t-from-80%",
-  "mask-t-from-85%",
-  "mask-t-from-90%",
-  "mask-t-from-95%",
-  "mask-t-from-96",
-  "mask-t-from-100%",
-  "mask-t-from-current",
-  "mask-t-from-current/0",
-  "mask-t-from-current/5",
-  "mask-t-from-current/10",
-  "mask-t-from-current/15",
-  "mask-t-from-current/20",
-  "mask-t-from-current/25",
-  "mask-t-from-current/30",
-  "mask-t-from-current/35",
-  "mask-t-from-current/40",
-  "mask-t-from-current/45",
-  "mask-t-from-current/50",
-  "mask-t-from-current/55",
-  "mask-t-from-current/60",
-  "mask-t-from-current/65",
-  "mask-t-from-current/70",
-  "mask-t-from-current/75",
-  "mask-t-from-current/80",
-  "mask-t-from-current/85",
-  "mask-t-from-current/90",
-  "mask-t-from-current/95",
-  "mask-t-from-current/100",
-  "mask-t-from-current/background",
-  "mask-t-from-inherit",
-  "mask-t-from-inherit/0",
-  "mask-t-from-inherit/5",
-  "mask-t-from-inherit/10",
-  "mask-t-from-inherit/15",
-  "mask-t-from-inherit/20",
-  "mask-t-from-inherit/25",
-  "mask-t-from-inherit/30",
-  "mask-t-from-inherit/35",
-  "mask-t-from-inherit/40",
-  "mask-t-from-inherit/45",
-  "mask-t-from-inherit/50",
-  "mask-t-from-inherit/55",
-  "mask-t-from-inherit/60",
-  "mask-t-from-inherit/65",
-  "mask-t-from-inherit/70",
-  "mask-t-from-inherit/75",
-  "mask-t-from-inherit/80",
-  "mask-t-from-inherit/85",
-  "mask-t-from-inherit/90",
-  "mask-t-from-inherit/95",
-  "mask-t-from-inherit/100",
-  "mask-t-from-inherit/background",
-  "mask-t-from-transparent",
-  "mask-t-from-transparent/0",
-  "mask-t-from-transparent/5",
-  "mask-t-from-transparent/10",
-  "mask-t-from-transparent/15",
-  "mask-t-from-transparent/20",
-  "mask-t-from-transparent/25",
-  "mask-t-from-transparent/30",
-  "mask-t-from-transparent/35",
-  "mask-t-from-transparent/40",
-  "mask-t-from-transparent/45",
-  "mask-t-from-transparent/50",
-  "mask-t-from-transparent/55",
-  "mask-t-from-transparent/60",
-  "mask-t-from-transparent/65",
-  "mask-t-from-transparent/70",
-  "mask-t-from-transparent/75",
-  "mask-t-from-transparent/80",
-  "mask-t-from-transparent/85",
-  "mask-t-from-transparent/90",
-  "mask-t-from-transparent/95",
-  "mask-t-from-transparent/100",
-  "mask-t-from-transparent/background",
-  "mask-t-to-0",
-  "mask-t-to-0%",
-  "mask-t-to-0.5",
-  "mask-t-to-1",
-  "mask-t-to-1.5",
-  "mask-t-to-2",
-  "mask-t-to-2.5",
-  "mask-t-to-3",
-  "mask-t-to-3.5",
-  "mask-t-to-4",
-  "mask-t-to-5",
-  "mask-t-to-5%",
-  "mask-t-to-6",
-  "mask-t-to-7",
-  "mask-t-to-8",
-  "mask-t-to-9",
-  "mask-t-to-10",
-  "mask-t-to-10%",
-  "mask-t-to-11",
-  "mask-t-to-12",
-  "mask-t-to-14",
-  "mask-t-to-15%",
-  "mask-t-to-16",
-  "mask-t-to-20",
-  "mask-t-to-20%",
-  "mask-t-to-24",
-  "mask-t-to-25%",
-  "mask-t-to-28",
-  "mask-t-to-30%",
-  "mask-t-to-32",
-  "mask-t-to-35%",
-  "mask-t-to-36",
-  "mask-t-to-40",
-  "mask-t-to-40%",
-  "mask-t-to-44",
-  "mask-t-to-45%",
-  "mask-t-to-48",
-  "mask-t-to-50%",
-  "mask-t-to-52",
-  "mask-t-to-55%",
-  "mask-t-to-56",
-  "mask-t-to-60",
-  "mask-t-to-60%",
-  "mask-t-to-64",
-  "mask-t-to-65%",
-  "mask-t-to-70%",
-  "mask-t-to-72",
-  "mask-t-to-75%",
-  "mask-t-to-80",
-  "mask-t-to-80%",
-  "mask-t-to-85%",
-  "mask-t-to-90%",
-  "mask-t-to-95%",
-  "mask-t-to-96",
-  "mask-t-to-100%",
-  "mask-t-to-current",
-  "mask-t-to-current/0",
-  "mask-t-to-current/5",
-  "mask-t-to-current/10",
-  "mask-t-to-current/15",
-  "mask-t-to-current/20",
-  "mask-t-to-current/25",
-  "mask-t-to-current/30",
-  "mask-t-to-current/35",
-  "mask-t-to-current/40",
-  "mask-t-to-current/45",
-  "mask-t-to-current/50",
-  "mask-t-to-current/55",
-  "mask-t-to-current/60",
-  "mask-t-to-current/65",
-  "mask-t-to-current/70",
-  "mask-t-to-current/75",
-  "mask-t-to-current/80",
-  "mask-t-to-current/85",
-  "mask-t-to-current/90",
-  "mask-t-to-current/95",
-  "mask-t-to-current/100",
-  "mask-t-to-current/background",
-  "mask-t-to-inherit",
-  "mask-t-to-inherit/0",
-  "mask-t-to-inherit/5",
-  "mask-t-to-inherit/10",
-  "mask-t-to-inherit/15",
-  "mask-t-to-inherit/20",
-  "mask-t-to-inherit/25",
-  "mask-t-to-inherit/30",
-  "mask-t-to-inherit/35",
-  "mask-t-to-inherit/40",
-  "mask-t-to-inherit/45",
-  "mask-t-to-inherit/50",
-  "mask-t-to-inherit/55",
-  "mask-t-to-inherit/60",
-  "mask-t-to-inherit/65",
-  "mask-t-to-inherit/70",
-  "mask-t-to-inherit/75",
-  "mask-t-to-inherit/80",
-  "mask-t-to-inherit/85",
-  "mask-t-to-inherit/90",
-  "mask-t-to-inherit/95",
-  "mask-t-to-inherit/100",
-  "mask-t-to-inherit/background",
-  "mask-t-to-transparent",
-  "mask-t-to-transparent/0",
-  "mask-t-to-transparent/5",
-  "mask-t-to-transparent/10",
-  "mask-t-to-transparent/15",
-  "mask-t-to-transparent/20",
-  "mask-t-to-transparent/25",
-  "mask-t-to-transparent/30",
-  "mask-t-to-transparent/35",
-  "mask-t-to-transparent/40",
-  "mask-t-to-transparent/45",
-  "mask-t-to-transparent/50",
-  "mask-t-to-transparent/55",
-  "mask-t-to-transparent/60",
-  "mask-t-to-transparent/65",
-  "mask-t-to-transparent/70",
-  "mask-t-to-transparent/75",
-  "mask-t-to-transparent/80",
-  "mask-t-to-transparent/85",
-  "mask-t-to-transparent/90",
-  "mask-t-to-transparent/95",
-  "mask-t-to-transparent/100",
-  "mask-t-to-transparent/background",
-  "mask-top",
-  "mask-top-left",
-  "mask-top-right",
-  "mask-type-alpha",
-  "mask-type-luminance",
-  "mask-x-from-0",
-  "mask-x-from-0%",
-  "mask-x-from-0.5",
-  "mask-x-from-1",
-  "mask-x-from-1.5",
-  "mask-x-from-2",
-  "mask-x-from-2.5",
-  "mask-x-from-3",
-  "mask-x-from-3.5",
-  "mask-x-from-4",
-  "mask-x-from-5",
-  "mask-x-from-5%",
-  "mask-x-from-6",
-  "mask-x-from-7",
-  "mask-x-from-8",
-  "mask-x-from-9",
-  "mask-x-from-10",
-  "mask-x-from-10%",
-  "mask-x-from-11",
-  "mask-x-from-12",
-  "mask-x-from-14",
-  "mask-x-from-15%",
-  "mask-x-from-16",
-  "mask-x-from-20",
-  "mask-x-from-20%",
-  "mask-x-from-24",
-  "mask-x-from-25%",
-  "mask-x-from-28",
-  "mask-x-from-30%",
-  "mask-x-from-32",
-  "mask-x-from-35%",
-  "mask-x-from-36",
-  "mask-x-from-40",
-  "mask-x-from-40%",
-  "mask-x-from-44",
-  "mask-x-from-45%",
-  "mask-x-from-48",
-  "mask-x-from-50%",
-  "mask-x-from-52",
-  "mask-x-from-55%",
-  "mask-x-from-56",
-  "mask-x-from-60",
-  "mask-x-from-60%",
-  "mask-x-from-64",
-  "mask-x-from-65%",
-  "mask-x-from-70%",
-  "mask-x-from-72",
-  "mask-x-from-75%",
-  "mask-x-from-80",
-  "mask-x-from-80%",
-  "mask-x-from-85%",
-  "mask-x-from-90%",
-  "mask-x-from-95%",
-  "mask-x-from-96",
-  "mask-x-from-100%",
-  "mask-x-from-current",
-  "mask-x-from-current/0",
-  "mask-x-from-current/5",
-  "mask-x-from-current/10",
-  "mask-x-from-current/15",
-  "mask-x-from-current/20",
-  "mask-x-from-current/25",
-  "mask-x-from-current/30",
-  "mask-x-from-current/35",
-  "mask-x-from-current/40",
-  "mask-x-from-current/45",
-  "mask-x-from-current/50",
-  "mask-x-from-current/55",
-  "mask-x-from-current/60",
-  "mask-x-from-current/65",
-  "mask-x-from-current/70",
-  "mask-x-from-current/75",
-  "mask-x-from-current/80",
-  "mask-x-from-current/85",
-  "mask-x-from-current/90",
-  "mask-x-from-current/95",
-  "mask-x-from-current/100",
-  "mask-x-from-current/background",
-  "mask-x-from-inherit",
-  "mask-x-from-inherit/0",
-  "mask-x-from-inherit/5",
-  "mask-x-from-inherit/10",
-  "mask-x-from-inherit/15",
-  "mask-x-from-inherit/20",
-  "mask-x-from-inherit/25",
-  "mask-x-from-inherit/30",
-  "mask-x-from-inherit/35",
-  "mask-x-from-inherit/40",
-  "mask-x-from-inherit/45",
-  "mask-x-from-inherit/50",
-  "mask-x-from-inherit/55",
-  "mask-x-from-inherit/60",
-  "mask-x-from-inherit/65",
-  "mask-x-from-inherit/70",
-  "mask-x-from-inherit/75",
-  "mask-x-from-inherit/80",
-  "mask-x-from-inherit/85",
-  "mask-x-from-inherit/90",
-  "mask-x-from-inherit/95",
-  "mask-x-from-inherit/100",
-  "mask-x-from-inherit/background",
-  "mask-x-from-transparent",
-  "mask-x-from-transparent/0",
-  "mask-x-from-transparent/5",
-  "mask-x-from-transparent/10",
-  "mask-x-from-transparent/15",
-  "mask-x-from-transparent/20",
-  "mask-x-from-transparent/25",
-  "mask-x-from-transparent/30",
-  "mask-x-from-transparent/35",
-  "mask-x-from-transparent/40",
-  "mask-x-from-transparent/45",
-  "mask-x-from-transparent/50",
-  "mask-x-from-transparent/55",
-  "mask-x-from-transparent/60",
-  "mask-x-from-transparent/65",
-  "mask-x-from-transparent/70",
-  "mask-x-from-transparent/75",
-  "mask-x-from-transparent/80",
-  "mask-x-from-transparent/85",
-  "mask-x-from-transparent/90",
-  "mask-x-from-transparent/95",
-  "mask-x-from-transparent/100",
-  "mask-x-from-transparent/background",
-  "mask-x-to-0",
-  "mask-x-to-0%",
-  "mask-x-to-0.5",
-  "mask-x-to-1",
-  "mask-x-to-1.5",
-  "mask-x-to-2",
-  "mask-x-to-2.5",
-  "mask-x-to-3",
-  "mask-x-to-3.5",
-  "mask-x-to-4",
-  "mask-x-to-5",
-  "mask-x-to-5%",
-  "mask-x-to-6",
-  "mask-x-to-7",
-  "mask-x-to-8",
-  "mask-x-to-9",
-  "mask-x-to-10",
-  "mask-x-to-10%",
-  "mask-x-to-11",
-  "mask-x-to-12",
-  "mask-x-to-14",
-  "mask-x-to-15%",
-  "mask-x-to-16",
-  "mask-x-to-20",
-  "mask-x-to-20%",
-  "mask-x-to-24",
-  "mask-x-to-25%",
-  "mask-x-to-28",
-  "mask-x-to-30%",
-  "mask-x-to-32",
-  "mask-x-to-35%",
-  "mask-x-to-36",
-  "mask-x-to-40",
-  "mask-x-to-40%",
-  "mask-x-to-44",
-  "mask-x-to-45%",
-  "mask-x-to-48",
-  "mask-x-to-50%",
-  "mask-x-to-52",
-  "mask-x-to-55%",
-  "mask-x-to-56",
-  "mask-x-to-60",
-  "mask-x-to-60%",
-  "mask-x-to-64",
-  "mask-x-to-65%",
-  "mask-x-to-70%",
-  "mask-x-to-72",
-  "mask-x-to-75%",
-  "mask-x-to-80",
-  "mask-x-to-80%",
-  "mask-x-to-85%",
-  "mask-x-to-90%",
-  "mask-x-to-95%",
-  "mask-x-to-96",
-  "mask-x-to-100%",
-  "mask-x-to-current",
-  "mask-x-to-current/0",
-  "mask-x-to-current/5",
-  "mask-x-to-current/10",
-  "mask-x-to-current/15",
-  "mask-x-to-current/20",
-  "mask-x-to-current/25",
-  "mask-x-to-current/30",
-  "mask-x-to-current/35",
-  "mask-x-to-current/40",
-  "mask-x-to-current/45",
-  "mask-x-to-current/50",
-  "mask-x-to-current/55",
-  "mask-x-to-current/60",
-  "mask-x-to-current/65",
-  "mask-x-to-current/70",
-  "mask-x-to-current/75",
-  "mask-x-to-current/80",
-  "mask-x-to-current/85",
-  "mask-x-to-current/90",
-  "mask-x-to-current/95",
-  "mask-x-to-current/100",
-  "mask-x-to-current/background",
-  "mask-x-to-inherit",
-  "mask-x-to-inherit/0",
-  "mask-x-to-inherit/5",
-  "mask-x-to-inherit/10",
-  "mask-x-to-inherit/15",
-  "mask-x-to-inherit/20",
-  "mask-x-to-inherit/25",
-  "mask-x-to-inherit/30",
-  "mask-x-to-inherit/35",
-  "mask-x-to-inherit/40",
-  "mask-x-to-inherit/45",
-  "mask-x-to-inherit/50",
-  "mask-x-to-inherit/55",
-  "mask-x-to-inherit/60",
-  "mask-x-to-inherit/65",
-  "mask-x-to-inherit/70",
-  "mask-x-to-inherit/75",
-  "mask-x-to-inherit/80",
-  "mask-x-to-inherit/85",
-  "mask-x-to-inherit/90",
-  "mask-x-to-inherit/95",
-  "mask-x-to-inherit/100",
-  "mask-x-to-inherit/background",
-  "mask-x-to-transparent",
-  "mask-x-to-transparent/0",
-  "mask-x-to-transparent/5",
-  "mask-x-to-transparent/10",
-  "mask-x-to-transparent/15",
-  "mask-x-to-transparent/20",
-  "mask-x-to-transparent/25",
-  "mask-x-to-transparent/30",
-  "mask-x-to-transparent/35",
-  "mask-x-to-transparent/40",
-  "mask-x-to-transparent/45",
-  "mask-x-to-transparent/50",
-  "mask-x-to-transparent/55",
-  "mask-x-to-transparent/60",
-  "mask-x-to-transparent/65",
-  "mask-x-to-transparent/70",
-  "mask-x-to-transparent/75",
-  "mask-x-to-transparent/80",
-  "mask-x-to-transparent/85",
-  "mask-x-to-transparent/90",
-  "mask-x-to-transparent/95",
-  "mask-x-to-transparent/100",
-  "mask-x-to-transparent/background",
-  "mask-y-from-0",
-  "mask-y-from-0%",
-  "mask-y-from-0.5",
-  "mask-y-from-1",
-  "mask-y-from-1.5",
-  "mask-y-from-2",
-  "mask-y-from-2.5",
-  "mask-y-from-3",
-  "mask-y-from-3.5",
-  "mask-y-from-4",
-  "mask-y-from-5",
-  "mask-y-from-5%",
-  "mask-y-from-6",
-  "mask-y-from-7",
-  "mask-y-from-8",
-  "mask-y-from-9",
-  "mask-y-from-10",
-  "mask-y-from-10%",
-  "mask-y-from-11",
-  "mask-y-from-12",
-  "mask-y-from-14",
-  "mask-y-from-15%",
-  "mask-y-from-16",
-  "mask-y-from-20",
-  "mask-y-from-20%",
-  "mask-y-from-24",
-  "mask-y-from-25%",
-  "mask-y-from-28",
-  "mask-y-from-30%",
-  "mask-y-from-32",
-  "mask-y-from-35%",
-  "mask-y-from-36",
-  "mask-y-from-40",
-  "mask-y-from-40%",
-  "mask-y-from-44",
-  "mask-y-from-45%",
-  "mask-y-from-48",
-  "mask-y-from-50%",
-  "mask-y-from-52",
-  "mask-y-from-55%",
-  "mask-y-from-56",
-  "mask-y-from-60",
-  "mask-y-from-60%",
-  "mask-y-from-64",
-  "mask-y-from-65%",
-  "mask-y-from-70%",
-  "mask-y-from-72",
-  "mask-y-from-75%",
-  "mask-y-from-80",
-  "mask-y-from-80%",
-  "mask-y-from-85%",
-  "mask-y-from-90%",
-  "mask-y-from-95%",
-  "mask-y-from-96",
-  "mask-y-from-100%",
-  "mask-y-from-current",
-  "mask-y-from-current/0",
-  "mask-y-from-current/5",
-  "mask-y-from-current/10",
-  "mask-y-from-current/15",
-  "mask-y-from-current/20",
-  "mask-y-from-current/25",
-  "mask-y-from-current/30",
-  "mask-y-from-current/35",
-  "mask-y-from-current/40",
-  "mask-y-from-current/45",
-  "mask-y-from-current/50",
-  "mask-y-from-current/55",
-  "mask-y-from-current/60",
-  "mask-y-from-current/65",
-  "mask-y-from-current/70",
-  "mask-y-from-current/75",
-  "mask-y-from-current/80",
-  "mask-y-from-current/85",
-  "mask-y-from-current/90",
-  "mask-y-from-current/95",
-  "mask-y-from-current/100",
-  "mask-y-from-current/background",
-  "mask-y-from-inherit",
-  "mask-y-from-inherit/0",
-  "mask-y-from-inherit/5",
-  "mask-y-from-inherit/10",
-  "mask-y-from-inherit/15",
-  "mask-y-from-inherit/20",
-  "mask-y-from-inherit/25",
-  "mask-y-from-inherit/30",
-  "mask-y-from-inherit/35",
-  "mask-y-from-inherit/40",
-  "mask-y-from-inherit/45",
-  "mask-y-from-inherit/50",
-  "mask-y-from-inherit/55",
-  "mask-y-from-inherit/60",
-  "mask-y-from-inherit/65",
-  "mask-y-from-inherit/70",
-  "mask-y-from-inherit/75",
-  "mask-y-from-inherit/80",
-  "mask-y-from-inherit/85",
-  "mask-y-from-inherit/90",
-  "mask-y-from-inherit/95",
-  "mask-y-from-inherit/100",
-  "mask-y-from-inherit/background",
-  "mask-y-from-transparent",
-  "mask-y-from-transparent/0",
-  "mask-y-from-transparent/5",
-  "mask-y-from-transparent/10",
-  "mask-y-from-transparent/15",
-  "mask-y-from-transparent/20",
-  "mask-y-from-transparent/25",
-  "mask-y-from-transparent/30",
-  "mask-y-from-transparent/35",
-  "mask-y-from-transparent/40",
-  "mask-y-from-transparent/45",
-  "mask-y-from-transparent/50",
-  "mask-y-from-transparent/55",
-  "mask-y-from-transparent/60",
-  "mask-y-from-transparent/65",
-  "mask-y-from-transparent/70",
-  "mask-y-from-transparent/75",
-  "mask-y-from-transparent/80",
-  "mask-y-from-transparent/85",
-  "mask-y-from-transparent/90",
-  "mask-y-from-transparent/95",
-  "mask-y-from-transparent/100",
-  "mask-y-from-transparent/background",
-  "mask-y-to-0",
-  "mask-y-to-0%",
-  "mask-y-to-0.5",
-  "mask-y-to-1",
-  "mask-y-to-1.5",
-  "mask-y-to-2",
-  "mask-y-to-2.5",
-  "mask-y-to-3",
-  "mask-y-to-3.5",
-  "mask-y-to-4",
-  "mask-y-to-5",
-  "mask-y-to-5%",
-  "mask-y-to-6",
-  "mask-y-to-7",
-  "mask-y-to-8",
-  "mask-y-to-9",
-  "mask-y-to-10",
-  "mask-y-to-10%",
-  "mask-y-to-11",
-  "mask-y-to-12",
-  "mask-y-to-14",
-  "mask-y-to-15%",
-  "mask-y-to-16",
-  "mask-y-to-20",
-  "mask-y-to-20%",
-  "mask-y-to-24",
-  "mask-y-to-25%",
-  "mask-y-to-28",
-  "mask-y-to-30%",
-  "mask-y-to-32",
-  "mask-y-to-35%",
-  "mask-y-to-36",
-  "mask-y-to-40",
-  "mask-y-to-40%",
-  "mask-y-to-44",
-  "mask-y-to-45%",
-  "mask-y-to-48",
-  "mask-y-to-50%",
-  "mask-y-to-52",
-  "mask-y-to-55%",
-  "mask-y-to-56",
-  "mask-y-to-60",
-  "mask-y-to-60%",
-  "mask-y-to-64",
-  "mask-y-to-65%",
-  "mask-y-to-70%",
-  "mask-y-to-72",
-  "mask-y-to-75%",
-  "mask-y-to-80",
-  "mask-y-to-80%",
-  "mask-y-to-85%",
-  "mask-y-to-90%",
-  "mask-y-to-95%",
-  "mask-y-to-96",
-  "mask-y-to-100%",
-  "mask-y-to-current",
-  "mask-y-to-current/0",
-  "mask-y-to-current/5",
-  "mask-y-to-current/10",
-  "mask-y-to-current/15",
-  "mask-y-to-current/20",
-  "mask-y-to-current/25",
-  "mask-y-to-current/30",
-  "mask-y-to-current/35",
-  "mask-y-to-current/40",
-  "mask-y-to-current/45",
-  "mask-y-to-current/50",
-  "mask-y-to-current/55",
-  "mask-y-to-current/60",
-  "mask-y-to-current/65",
-  "mask-y-to-current/70",
-  "mask-y-to-current/75",
-  "mask-y-to-current/80",
-  "mask-y-to-current/85",
-  "mask-y-to-current/90",
-  "mask-y-to-current/95",
-  "mask-y-to-current/100",
-  "mask-y-to-current/background",
-  "mask-y-to-inherit",
-  "mask-y-to-inherit/0",
-  "mask-y-to-inherit/5",
-  "mask-y-to-inherit/10",
-  "mask-y-to-inherit/15",
-  "mask-y-to-inherit/20",
-  "mask-y-to-inherit/25",
-  "mask-y-to-inherit/30",
-  "mask-y-to-inherit/35",
-  "mask-y-to-inherit/40",
-  "mask-y-to-inherit/45",
-  "mask-y-to-inherit/50",
-  "mask-y-to-inherit/55",
-  "mask-y-to-inherit/60",
-  "mask-y-to-inherit/65",
-  "mask-y-to-inherit/70",
-  "mask-y-to-inherit/75",
-  "mask-y-to-inherit/80",
-  "mask-y-to-inherit/85",
-  "mask-y-to-inherit/90",
-  "mask-y-to-inherit/95",
-  "mask-y-to-inherit/100",
-  "mask-y-to-inherit/background",
-  "mask-y-to-transparent",
-  "mask-y-to-transparent/0",
-  "mask-y-to-transparent/5",
-  "mask-y-to-transparent/10",
-  "mask-y-to-transparent/15",
-  "mask-y-to-transparent/20",
-  "mask-y-to-transparent/25",
-  "mask-y-to-transparent/30",
-  "mask-y-to-transparent/35",
-  "mask-y-to-transparent/40",
-  "mask-y-to-transparent/45",
-  "mask-y-to-transparent/50",
-  "mask-y-to-transparent/55",
-  "mask-y-to-transparent/60",
-  "mask-y-to-transparent/65",
-  "mask-y-to-transparent/70",
-  "mask-y-to-transparent/75",
-  "mask-y-to-transparent/80",
-  "mask-y-to-transparent/85",
-  "mask-y-to-transparent/90",
-  "mask-y-to-transparent/95",
-  "mask-y-to-transparent/100",
-  "mask-y-to-transparent/background",
-  "max-block-0",
-  "max-block-0.5",
-  "max-block-1",
-  "max-block-1.5",
-  "max-block-2",
-  "max-block-2.5",
-  "max-block-3",
-  "max-block-3.5",
-  "max-block-4",
-  "max-block-5",
-  "max-block-6",
-  "max-block-7",
-  "max-block-8",
-  "max-block-9",
-  "max-block-10",
-  "max-block-11",
-  "max-block-12",
-  "max-block-14",
-  "max-block-16",
-  "max-block-20",
-  "max-block-24",
-  "max-block-28",
-  "max-block-32",
-  "max-block-36",
-  "max-block-40",
-  "max-block-44",
-  "max-block-48",
-  "max-block-52",
-  "max-block-56",
-  "max-block-60",
-  "max-block-64",
-  "max-block-72",
-  "max-block-80",
-  "max-block-96",
-  "max-block-1/2",
-  "max-block-1/3",
-  "max-block-1/4",
-  "max-block-1/5",
-  "max-block-1/6",
-  "max-block-1/12",
-  "max-block-2/3",
-  "max-block-2/4",
-  "max-block-2/5",
-  "max-block-2/6",
-  "max-block-2/12",
-  "max-block-3/4",
-  "max-block-3/5",
-  "max-block-3/6",
-  "max-block-3/12",
-  "max-block-4/5",
-  "max-block-4/6",
-  "max-block-4/12",
-  "max-block-5/6",
-  "max-block-5/12",
-  "max-block-6/12",
-  "max-block-7/12",
-  "max-block-8/12",
-  "max-block-9/12",
-  "max-block-10/12",
-  "max-block-11/12",
-  "max-block-dvh",
-  "max-block-fit",
-  "max-block-full",
-  "max-block-lh",
-  "max-block-lvh",
-  "max-block-max",
-  "max-block-min",
-  "max-block-none",
-  "max-block-px",
-  "max-block-screen",
-  "max-block-svh",
-  "max-h-0",
   "max-h-0.5",
   "max-h-1",
-  "max-h-1.5",
-  "max-h-2",
-  "max-h-2.5",
   "max-h-3",
-  "max-h-3.5",
   "max-h-4",
-  "max-h-5",
-  "max-h-6",
-  "max-h-7",
-  "max-h-8",
-  "max-h-9",
-  "max-h-10",
-  "max-h-11",
-  "max-h-12",
-  "max-h-14",
-  "max-h-16",
-  "max-h-20",
-  "max-h-24",
-  "max-h-28",
-  "max-h-32",
-  "max-h-36",
-  "max-h-40",
-  "max-h-44",
-  "max-h-48",
-  "max-h-52",
-  "max-h-56",
-  "max-h-60",
-  "max-h-64",
-  "max-h-72",
-  "max-h-80",
-  "max-h-96",
-  "max-h-1/2",
-  "max-h-1/3",
-  "max-h-1/4",
-  "max-h-1/5",
-  "max-h-1/6",
-  "max-h-1/12",
-  "max-h-2/3",
-  "max-h-2/4",
-  "max-h-2/5",
-  "max-h-2/6",
-  "max-h-2/12",
-  "max-h-3/4",
-  "max-h-3/5",
-  "max-h-3/6",
-  "max-h-3/12",
-  "max-h-4/5",
-  "max-h-4/6",
-  "max-h-4/12",
-  "max-h-5/6",
-  "max-h-5/12",
-  "max-h-6/12",
-  "max-h-7/12",
-  "max-h-8/12",
-  "max-h-9/12",
-  "max-h-10/12",
-  "max-h-11/12",
   "max-h-dvh",
-  "max-h-dvw",
   "max-h-fit",
   "max-h-full",
-  "max-h-lh",
   "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-inline-0",
-  "max-inline-0.5",
-  "max-inline-1",
-  "max-inline-1.5",
-  "max-inline-2",
-  "max-inline-2.5",
-  "max-inline-3",
-  "max-inline-3.5",
-  "max-inline-4",
-  "max-inline-5",
-  "max-inline-6",
-  "max-inline-7",
-  "max-inline-8",
-  "max-inline-9",
-  "max-inline-10",
-  "max-inline-11",
-  "max-inline-12",
-  "max-inline-14",
-  "max-inline-16",
-  "max-inline-20",
-  "max-inline-24",
-  "max-inline-28",
-  "max-inline-32",
-  "max-inline-36",
-  "max-inline-40",
-  "max-inline-44",
-  "max-inline-48",
-  "max-inline-52",
-  "max-inline-56",
-  "max-inline-60",
-  "max-inline-64",
-  "max-inline-72",
-  "max-inline-80",
-  "max-inline-96",
-  "max-inline-dvw",
-  "max-inline-fit",
-  "max-inline-full",
-  "max-inline-lg",
-  "max-inline-lvw",
-  "max-inline-max",
-  "max-inline-md",
-  "max-inline-1/2",
-  "max-inline-1/3",
-  "max-inline-1/4",
-  "max-inline-1/5",
-  "max-inline-1/6",
-  "max-inline-1/12",
-  "max-inline-2/3",
-  "max-inline-2/4",
-  "max-inline-2/5",
-  "max-inline-2/6",
-  "max-inline-2/12",
-  "max-inline-3/4",
-  "max-inline-3/5",
-  "max-inline-3/6",
-  "max-inline-3/12",
-  "max-inline-4/5",
-  "max-inline-4/6",
-  "max-inline-4/12",
-  "max-inline-5/6",
-  "max-inline-5/12",
-  "max-inline-6/12",
-  "max-inline-7/12",
-  "max-inline-8/12",
-  "max-inline-9/12",
-  "max-inline-10/12",
-  "max-inline-11/12",
-  "max-inline-min",
-  "max-inline-none",
-  "max-inline-px",
-  "max-inline-screen",
-  "max-inline-svw",
-  "max-w-0",
   "max-w-0.5",
   "max-w-1",
-  "max-w-1.5",
-  "max-w-2",
-  "max-w-2.5",
   "max-w-3",
-  "max-w-3.5",
   "max-w-4",
-  "max-w-5",
-  "max-w-6",
-  "max-w-7",
-  "max-w-8",
-  "max-w-9",
-  "max-w-10",
-  "max-w-11",
-  "max-w-12",
-  "max-w-14",
-  "max-w-16",
-  "max-w-20",
-  "max-w-24",
-  "max-w-28",
-  "max-w-32",
-  "max-w-36",
-  "max-w-40",
-  "max-w-44",
-  "max-w-48",
-  "max-w-52",
-  "max-w-56",
-  "max-w-60",
-  "max-w-64",
-  "max-w-72",
-  "max-w-80",
-  "max-w-96",
-  "max-w-dvh",
-  "max-w-dvw",
+  "max-w-4",
   "max-w-fit",
   "max-w-full",
-  "max-w-lg",
-  "max-w-lvh",
-  "max-w-lvw",
   "max-w-max",
-  "max-w-md",
-  "max-w-1/2",
-  "max-w-1/3",
-  "max-w-1/4",
-  "max-w-1/5",
-  "max-w-1/6",
-  "max-w-1/12",
-  "max-w-2/3",
-  "max-w-2/4",
-  "max-w-2/5",
-  "max-w-2/6",
-  "max-w-2/12",
-  "max-w-3/4",
-  "max-w-3/5",
-  "max-w-3/6",
-  "max-w-3/12",
-  "max-w-4/5",
-  "max-w-4/6",
-  "max-w-4/12",
-  "max-w-5/6",
-  "max-w-5/12",
-  "max-w-6/12",
-  "max-w-7/12",
-  "max-w-8/12",
-  "max-w-9/12",
-  "max-w-10/12",
-  "max-w-11/12",
   "max-w-min",
   "max-w-none",
-  "max-w-px",
-  "max-w-svh",
-  "max-w-svw",
-  "mb-0",
   "mb-0.5",
   "mb-1",
-  "mb-1.5",
-  "mb-2",
-  "mb-2.5",
   "mb-3",
-  "mb-3.5",
   "mb-4",
-  "mb-5",
-  "mb-6",
-  "mb-7",
-  "mb-8",
-  "mb-9",
-  "mb-10",
-  "mb-11",
-  "mb-12",
-  "mb-14",
-  "mb-16",
-  "mb-20",
-  "mb-24",
-  "mb-28",
-  "mb-32",
-  "mb-36",
-  "mb-40",
-  "mb-44",
-  "mb-48",
-  "mb-52",
-  "mb-56",
-  "mb-60",
-  "mb-64",
-  "mb-72",
-  "mb-80",
-  "mb-96",
   "mb-auto",
-  "mb-px",
-  "mbe-0",
-  "mbe-0.5",
-  "mbe-1",
-  "mbe-1.5",
-  "mbe-2",
-  "mbe-2.5",
-  "mbe-3",
-  "mbe-3.5",
-  "mbe-4",
-  "mbe-5",
-  "mbe-6",
-  "mbe-7",
-  "mbe-8",
-  "mbe-9",
-  "mbe-10",
-  "mbe-11",
-  "mbe-12",
-  "mbe-14",
-  "mbe-16",
-  "mbe-20",
-  "mbe-24",
-  "mbe-28",
-  "mbe-32",
-  "mbe-36",
-  "mbe-40",
-  "mbe-44",
-  "mbe-48",
-  "mbe-52",
-  "mbe-56",
-  "mbe-60",
-  "mbe-64",
-  "mbe-72",
-  "mbe-80",
-  "mbe-96",
-  "mbe-auto",
-  "mbe-px",
-  "mbs-0",
-  "mbs-0.5",
-  "mbs-1",
-  "mbs-1.5",
-  "mbs-2",
-  "mbs-2.5",
-  "mbs-3",
-  "mbs-3.5",
-  "mbs-4",
-  "mbs-5",
-  "mbs-6",
-  "mbs-7",
-  "mbs-8",
-  "mbs-9",
-  "mbs-10",
-  "mbs-11",
-  "mbs-12",
-  "mbs-14",
-  "mbs-16",
-  "mbs-20",
-  "mbs-24",
-  "mbs-28",
-  "mbs-32",
-  "mbs-36",
-  "mbs-40",
-  "mbs-44",
-  "mbs-48",
-  "mbs-52",
-  "mbs-56",
-  "mbs-60",
-  "mbs-64",
-  "mbs-72",
-  "mbs-80",
-  "mbs-96",
-  "mbs-auto",
-  "mbs-px",
-  "me-0",
   "me-0.5",
   "me-1",
-  "me-1.5",
-  "me-2",
-  "me-2.5",
   "me-3",
-  "me-3.5",
   "me-4",
-  "me-5",
-  "me-6",
-  "me-7",
-  "me-8",
-  "me-9",
-  "me-10",
-  "me-11",
-  "me-12",
-  "me-14",
-  "me-16",
-  "me-20",
-  "me-24",
-  "me-28",
-  "me-32",
-  "me-36",
-  "me-40",
-  "me-44",
-  "me-48",
-  "me-52",
-  "me-56",
-  "me-60",
-  "me-64",
-  "me-72",
-  "me-80",
-  "me-96",
   "me-auto",
-  "me-px",
-  "min-block-0",
-  "min-block-0.5",
-  "min-block-1",
-  "min-block-1.5",
-  "min-block-2",
-  "min-block-2.5",
-  "min-block-3",
-  "min-block-3.5",
-  "min-block-4",
-  "min-block-5",
-  "min-block-6",
-  "min-block-7",
-  "min-block-8",
-  "min-block-9",
-  "min-block-10",
-  "min-block-11",
-  "min-block-12",
-  "min-block-14",
-  "min-block-16",
-  "min-block-20",
-  "min-block-24",
-  "min-block-28",
-  "min-block-32",
-  "min-block-36",
-  "min-block-40",
-  "min-block-44",
-  "min-block-48",
-  "min-block-52",
-  "min-block-56",
-  "min-block-60",
-  "min-block-64",
-  "min-block-72",
-  "min-block-80",
-  "min-block-96",
-  "min-block-1/2",
-  "min-block-1/3",
-  "min-block-1/4",
-  "min-block-1/5",
-  "min-block-1/6",
-  "min-block-1/12",
-  "min-block-2/3",
-  "min-block-2/4",
-  "min-block-2/5",
-  "min-block-2/6",
-  "min-block-2/12",
-  "min-block-3/4",
-  "min-block-3/5",
-  "min-block-3/6",
-  "min-block-3/12",
-  "min-block-4/5",
-  "min-block-4/6",
-  "min-block-4/12",
-  "min-block-5/6",
-  "min-block-5/12",
-  "min-block-6/12",
-  "min-block-7/12",
-  "min-block-8/12",
-  "min-block-9/12",
-  "min-block-10/12",
-  "min-block-11/12",
-  "min-block-auto",
-  "min-block-dvh",
-  "min-block-fit",
-  "min-block-full",
-  "min-block-lh",
-  "min-block-lvh",
-  "min-block-max",
-  "min-block-min",
-  "min-block-px",
-  "min-block-screen",
-  "min-block-svh",
-  "min-h-0",
   "min-h-0.5",
   "min-h-1",
-  "min-h-1.5",
-  "min-h-2",
-  "min-h-2.5",
   "min-h-3",
-  "min-h-3.5",
   "min-h-4",
-  "min-h-5",
-  "min-h-6",
-  "min-h-7",
-  "min-h-8",
-  "min-h-9",
-  "min-h-10",
-  "min-h-11",
-  "min-h-12",
-  "min-h-14",
-  "min-h-16",
-  "min-h-20",
-  "min-h-24",
-  "min-h-28",
-  "min-h-32",
-  "min-h-36",
-  "min-h-40",
-  "min-h-44",
-  "min-h-48",
-  "min-h-52",
-  "min-h-56",
-  "min-h-60",
-  "min-h-64",
-  "min-h-72",
-  "min-h-80",
-  "min-h-96",
-  "min-h-1/2",
-  "min-h-1/3",
-  "min-h-1/4",
-  "min-h-1/5",
-  "min-h-1/6",
-  "min-h-1/12",
-  "min-h-2/3",
-  "min-h-2/4",
-  "min-h-2/5",
-  "min-h-2/6",
-  "min-h-2/12",
-  "min-h-3/4",
-  "min-h-3/5",
-  "min-h-3/6",
-  "min-h-3/12",
-  "min-h-4/5",
-  "min-h-4/6",
-  "min-h-4/12",
-  "min-h-5/6",
-  "min-h-5/12",
-  "min-h-6/12",
-  "min-h-7/12",
-  "min-h-8/12",
-  "min-h-9/12",
-  "min-h-10/12",
-  "min-h-11/12",
   "min-h-auto",
   "min-h-dvh",
-  "min-h-dvw",
   "min-h-fit",
   "min-h-full",
-  "min-h-lh",
   "min-h-lvh",
-  "min-h-lvw",
   "min-h-max",
   "min-h-min",
-  "min-h-px",
   "min-h-screen",
   "min-h-svh",
-  "min-h-svw",
-  "min-inline-0",
-  "min-inline-0.5",
-  "min-inline-1",
-  "min-inline-1.5",
-  "min-inline-2",
-  "min-inline-2.5",
-  "min-inline-3",
-  "min-inline-3.5",
-  "min-inline-4",
-  "min-inline-5",
-  "min-inline-6",
-  "min-inline-7",
-  "min-inline-8",
-  "min-inline-9",
-  "min-inline-10",
-  "min-inline-11",
-  "min-inline-12",
-  "min-inline-14",
-  "min-inline-16",
-  "min-inline-20",
-  "min-inline-24",
-  "min-inline-28",
-  "min-inline-32",
-  "min-inline-36",
-  "min-inline-40",
-  "min-inline-44",
-  "min-inline-48",
-  "min-inline-52",
-  "min-inline-56",
-  "min-inline-60",
-  "min-inline-64",
-  "min-inline-72",
-  "min-inline-80",
-  "min-inline-96",
-  "min-inline-auto",
-  "min-inline-dvw",
-  "min-inline-fit",
-  "min-inline-full",
-  "min-inline-lg",
-  "min-inline-lvw",
-  "min-inline-max",
-  "min-inline-md",
-  "min-inline-1/2",
-  "min-inline-1/3",
-  "min-inline-1/4",
-  "min-inline-1/5",
-  "min-inline-1/6",
-  "min-inline-1/12",
-  "min-inline-2/3",
-  "min-inline-2/4",
-  "min-inline-2/5",
-  "min-inline-2/6",
-  "min-inline-2/12",
-  "min-inline-3/4",
-  "min-inline-3/5",
-  "min-inline-3/6",
-  "min-inline-3/12",
-  "min-inline-4/5",
-  "min-inline-4/6",
-  "min-inline-4/12",
-  "min-inline-5/6",
-  "min-inline-5/12",
-  "min-inline-6/12",
-  "min-inline-7/12",
-  "min-inline-8/12",
-  "min-inline-9/12",
-  "min-inline-10/12",
-  "min-inline-11/12",
-  "min-inline-min",
-  "min-inline-px",
-  "min-inline-screen",
-  "min-inline-svw",
-  "min-w-0",
   "min-w-0.5",
   "min-w-1",
-  "min-w-1.5",
-  "min-w-2",
-  "min-w-2.5",
   "min-w-3",
-  "min-w-3.5",
   "min-w-4",
-  "min-w-5",
-  "min-w-6",
-  "min-w-7",
-  "min-w-8",
-  "min-w-9",
-  "min-w-10",
-  "min-w-11",
-  "min-w-12",
-  "min-w-14",
-  "min-w-16",
-  "min-w-20",
-  "min-w-24",
-  "min-w-28",
-  "min-w-32",
-  "min-w-36",
-  "min-w-40",
-  "min-w-44",
-  "min-w-48",
-  "min-w-52",
-  "min-w-56",
-  "min-w-60",
-  "min-w-64",
-  "min-w-72",
-  "min-w-80",
-  "min-w-96",
+  "min-w-4",
   "min-w-auto",
-  "min-w-dvh",
-  "min-w-dvw",
   "min-w-fit",
   "min-w-full",
-  "min-w-lg",
-  "min-w-lvh",
-  "min-w-lvw",
   "min-w-max",
-  "min-w-md",
-  "min-w-1/2",
-  "min-w-1/3",
-  "min-w-1/4",
-  "min-w-1/5",
-  "min-w-1/6",
-  "min-w-1/12",
-  "min-w-2/3",
-  "min-w-2/4",
-  "min-w-2/5",
-  "min-w-2/6",
-  "min-w-2/12",
-  "min-w-3/4",
-  "min-w-3/5",
-  "min-w-3/6",
-  "min-w-3/12",
-  "min-w-4/5",
-  "min-w-4/6",
-  "min-w-4/12",
-  "min-w-5/6",
-  "min-w-5/12",
-  "min-w-6/12",
-  "min-w-7/12",
-  "min-w-8/12",
-  "min-w-9/12",
-  "min-w-10/12",
-  "min-w-11/12",
   "min-w-min",
-  "min-w-px",
-  "min-w-screen",
-  "min-w-svh",
-  "min-w-svw",
   "mix-blend-color",
   "mix-blend-color-burn",
   "mix-blend-color-dodge",
@@ -9090,245 +1010,59 @@ exports[`getClassList 1`] = `
   "mix-blend-saturation",
   "mix-blend-screen",
   "mix-blend-soft-light",
-  "ml-0",
   "ml-0.5",
   "ml-1",
-  "ml-1.5",
-  "ml-2",
-  "ml-2.5",
   "ml-3",
-  "ml-3.5",
   "ml-4",
-  "ml-5",
-  "ml-6",
-  "ml-7",
-  "ml-8",
-  "ml-9",
-  "ml-10",
-  "ml-11",
-  "ml-12",
-  "ml-14",
-  "ml-16",
-  "ml-20",
-  "ml-24",
-  "ml-28",
-  "ml-32",
-  "ml-36",
-  "ml-40",
-  "ml-44",
-  "ml-48",
-  "ml-52",
-  "ml-56",
-  "ml-60",
-  "ml-64",
-  "ml-72",
-  "ml-80",
-  "ml-96",
   "ml-auto",
-  "ml-px",
-  "mr-0",
   "mr-0.5",
   "mr-1",
-  "mr-1.5",
-  "mr-2",
-  "mr-2.5",
   "mr-3",
-  "mr-3.5",
   "mr-4",
-  "mr-5",
-  "mr-6",
-  "mr-7",
-  "mr-8",
-  "mr-9",
-  "mr-10",
-  "mr-11",
-  "mr-12",
-  "mr-14",
-  "mr-16",
-  "mr-20",
-  "mr-24",
-  "mr-28",
-  "mr-32",
-  "mr-36",
-  "mr-40",
-  "mr-44",
-  "mr-48",
-  "mr-52",
-  "mr-56",
-  "mr-60",
-  "mr-64",
-  "mr-72",
-  "mr-80",
-  "mr-96",
   "mr-auto",
-  "mr-px",
-  "ms-0",
   "ms-0.5",
   "ms-1",
-  "ms-1.5",
-  "ms-2",
-  "ms-2.5",
   "ms-3",
-  "ms-3.5",
   "ms-4",
-  "ms-5",
-  "ms-6",
-  "ms-7",
-  "ms-8",
-  "ms-9",
-  "ms-10",
-  "ms-11",
-  "ms-12",
-  "ms-14",
-  "ms-16",
-  "ms-20",
-  "ms-24",
-  "ms-28",
-  "ms-32",
-  "ms-36",
-  "ms-40",
-  "ms-44",
-  "ms-48",
-  "ms-52",
-  "ms-56",
-  "ms-60",
-  "ms-64",
-  "ms-72",
-  "ms-80",
-  "ms-96",
   "ms-auto",
-  "ms-px",
-  "mt-0",
   "mt-0.5",
   "mt-1",
-  "mt-1.5",
-  "mt-2",
-  "mt-2.5",
   "mt-3",
-  "mt-3.5",
   "mt-4",
-  "mt-5",
-  "mt-6",
-  "mt-7",
-  "mt-8",
-  "mt-9",
-  "mt-10",
-  "mt-11",
-  "mt-12",
-  "mt-14",
-  "mt-16",
-  "mt-20",
-  "mt-24",
-  "mt-28",
-  "mt-32",
-  "mt-36",
-  "mt-40",
-  "mt-44",
-  "mt-48",
-  "mt-52",
-  "mt-56",
-  "mt-60",
-  "mt-64",
-  "mt-72",
-  "mt-80",
-  "mt-96",
   "mt-auto",
-  "mt-px",
-  "mx-0",
   "mx-0.5",
   "mx-1",
-  "mx-1.5",
-  "mx-2",
-  "mx-2.5",
   "mx-3",
-  "mx-3.5",
   "mx-4",
-  "mx-5",
-  "mx-6",
-  "mx-7",
-  "mx-8",
-  "mx-9",
-  "mx-10",
-  "mx-11",
-  "mx-12",
-  "mx-14",
-  "mx-16",
-  "mx-20",
-  "mx-24",
-  "mx-28",
-  "mx-32",
-  "mx-36",
-  "mx-40",
-  "mx-44",
-  "mx-48",
-  "mx-52",
-  "mx-56",
-  "mx-60",
-  "mx-64",
-  "mx-72",
-  "mx-80",
-  "mx-96",
   "mx-auto",
-  "mx-px",
-  "my-0",
   "my-0.5",
   "my-1",
-  "my-1.5",
-  "my-2",
-  "my-2.5",
   "my-3",
-  "my-3.5",
   "my-4",
-  "my-5",
-  "my-6",
-  "my-7",
-  "my-8",
-  "my-9",
-  "my-10",
-  "my-11",
-  "my-12",
-  "my-14",
-  "my-16",
-  "my-20",
-  "my-24",
-  "my-28",
-  "my-32",
-  "my-36",
-  "my-40",
-  "my-44",
-  "my-48",
-  "my-52",
-  "my-56",
-  "my-60",
-  "my-64",
-  "my-72",
-  "my-80",
-  "my-96",
   "my-auto",
-  "my-px",
   "no-underline",
   "normal-case",
   "normal-nums",
   "not-italic",
   "not-sr-only",
   "object-bottom",
-  "object-bottom-left",
-  "object-bottom-right",
   "object-center",
   "object-contain",
   "object-cover",
   "object-fill",
   "object-left",
+  "object-left-bottom",
+  "object-left-top",
   "object-none",
   "object-right",
+  "object-right-bottom",
+  "object-right-top",
   "object-scale-down",
   "object-top",
-  "object-top-left",
-  "object-top-right",
   "oldstyle-nums",
   "opacity-0",
-  "opacity-5",
   "opacity-10",
+  "opacity-100",
   "opacity-15",
   "opacity-20",
   "opacity-25",
@@ -9336,6 +1070,7 @@ exports[`getClassList 1`] = `
   "opacity-35",
   "opacity-40",
   "opacity-45",
+  "opacity-5",
   "opacity-50",
   "opacity-55",
   "opacity-60",
@@ -9346,9 +1081,10 @@ exports[`getClassList 1`] = `
   "opacity-85",
   "opacity-90",
   "opacity-95",
-  "opacity-100",
-  "opacity-background",
   "order-1",
+  "order-10",
+  "order-11",
+  "order-12",
   "order-2",
   "order-3",
   "order-4",
@@ -9357,11 +1093,9 @@ exports[`getClassList 1`] = `
   "order-7",
   "order-8",
   "order-9",
-  "order-10",
-  "order-11",
-  "order-12",
   "order-first",
   "order-last",
+  "order-none",
   "ordinal",
   "origin-bottom",
   "origin-bottom-left",
@@ -9373,83 +1107,15 @@ exports[`getClassList 1`] = `
   "origin-top-left",
   "origin-top-right",
   "outline",
-  "outline/0",
-  "outline/5",
-  "outline/10",
-  "outline/15",
-  "outline/20",
-  "outline/25",
-  "outline/30",
-  "outline/35",
-  "outline/40",
-  "outline/45",
-  "outline/50",
-  "outline/55",
-  "outline/60",
-  "outline/65",
-  "outline/70",
-  "outline/75",
-  "outline/80",
-  "outline/85",
-  "outline/90",
-  "outline/95",
-  "outline/100",
-  "outline/background",
   "outline-0",
   "outline-1",
   "outline-2",
   "outline-4",
   "outline-8",
   "outline-current",
-  "outline-current/0",
-  "outline-current/5",
-  "outline-current/10",
-  "outline-current/15",
-  "outline-current/20",
-  "outline-current/25",
-  "outline-current/30",
-  "outline-current/35",
-  "outline-current/40",
-  "outline-current/45",
-  "outline-current/50",
-  "outline-current/55",
-  "outline-current/60",
-  "outline-current/65",
-  "outline-current/70",
-  "outline-current/75",
-  "outline-current/80",
-  "outline-current/85",
-  "outline-current/90",
-  "outline-current/95",
-  "outline-current/100",
-  "outline-current/background",
   "outline-dashed",
   "outline-dotted",
   "outline-double",
-  "outline-hidden",
-  "outline-inherit",
-  "outline-inherit/0",
-  "outline-inherit/5",
-  "outline-inherit/10",
-  "outline-inherit/15",
-  "outline-inherit/20",
-  "outline-inherit/25",
-  "outline-inherit/30",
-  "outline-inherit/35",
-  "outline-inherit/40",
-  "outline-inherit/45",
-  "outline-inherit/50",
-  "outline-inherit/55",
-  "outline-inherit/60",
-  "outline-inherit/65",
-  "outline-inherit/70",
-  "outline-inherit/75",
-  "outline-inherit/80",
-  "outline-inherit/85",
-  "outline-inherit/90",
-  "outline-inherit/95",
-  "outline-inherit/100",
-  "outline-inherit/background",
   "outline-none",
   "outline-offset-0",
   "outline-offset-1",
@@ -9458,28 +1124,6 @@ exports[`getClassList 1`] = `
   "outline-offset-8",
   "outline-solid",
   "outline-transparent",
-  "outline-transparent/0",
-  "outline-transparent/5",
-  "outline-transparent/10",
-  "outline-transparent/15",
-  "outline-transparent/20",
-  "outline-transparent/25",
-  "outline-transparent/30",
-  "outline-transparent/35",
-  "outline-transparent/40",
-  "outline-transparent/45",
-  "outline-transparent/50",
-  "outline-transparent/55",
-  "outline-transparent/60",
-  "outline-transparent/65",
-  "outline-transparent/70",
-  "outline-transparent/75",
-  "outline-transparent/80",
-  "outline-transparent/85",
-  "outline-transparent/90",
-  "outline-transparent/95",
-  "outline-transparent/100",
-  "outline-transparent/background",
   "overflow-auto",
   "overflow-clip",
   "overflow-hidden",
@@ -9505,567 +1149,76 @@ exports[`getClassList 1`] = `
   "overscroll-y-auto",
   "overscroll-y-contain",
   "overscroll-y-none",
-  "p-0",
   "p-0.5",
   "p-1",
-  "p-1.5",
-  "p-2",
-  "p-2.5",
   "p-3",
-  "p-3.5",
   "p-4",
-  "p-5",
-  "p-6",
-  "p-7",
-  "p-8",
-  "p-9",
-  "p-10",
-  "p-11",
-  "p-12",
-  "p-14",
-  "p-16",
-  "p-20",
-  "p-24",
-  "p-28",
-  "p-32",
-  "p-36",
-  "p-40",
-  "p-44",
-  "p-48",
-  "p-52",
-  "p-56",
-  "p-60",
-  "p-64",
-  "p-72",
-  "p-80",
-  "p-96",
-  "p-px",
-  "pb-0",
   "pb-0.5",
   "pb-1",
-  "pb-1.5",
-  "pb-2",
-  "pb-2.5",
   "pb-3",
-  "pb-3.5",
   "pb-4",
-  "pb-5",
-  "pb-6",
-  "pb-7",
-  "pb-8",
-  "pb-9",
-  "pb-10",
-  "pb-11",
-  "pb-12",
-  "pb-14",
-  "pb-16",
-  "pb-20",
-  "pb-24",
-  "pb-28",
-  "pb-32",
-  "pb-36",
-  "pb-40",
-  "pb-44",
-  "pb-48",
-  "pb-52",
-  "pb-56",
-  "pb-60",
-  "pb-64",
-  "pb-72",
-  "pb-80",
-  "pb-96",
-  "pb-px",
-  "pbe-0",
-  "pbe-0.5",
-  "pbe-1",
-  "pbe-1.5",
-  "pbe-2",
-  "pbe-2.5",
-  "pbe-3",
-  "pbe-3.5",
-  "pbe-4",
-  "pbe-5",
-  "pbe-6",
-  "pbe-7",
-  "pbe-8",
-  "pbe-9",
-  "pbe-10",
-  "pbe-11",
-  "pbe-12",
-  "pbe-14",
-  "pbe-16",
-  "pbe-20",
-  "pbe-24",
-  "pbe-28",
-  "pbe-32",
-  "pbe-36",
-  "pbe-40",
-  "pbe-44",
-  "pbe-48",
-  "pbe-52",
-  "pbe-56",
-  "pbe-60",
-  "pbe-64",
-  "pbe-72",
-  "pbe-80",
-  "pbe-96",
-  "pbe-px",
-  "pbs-0",
-  "pbs-0.5",
-  "pbs-1",
-  "pbs-1.5",
-  "pbs-2",
-  "pbs-2.5",
-  "pbs-3",
-  "pbs-3.5",
-  "pbs-4",
-  "pbs-5",
-  "pbs-6",
-  "pbs-7",
-  "pbs-8",
-  "pbs-9",
-  "pbs-10",
-  "pbs-11",
-  "pbs-12",
-  "pbs-14",
-  "pbs-16",
-  "pbs-20",
-  "pbs-24",
-  "pbs-28",
-  "pbs-32",
-  "pbs-36",
-  "pbs-40",
-  "pbs-44",
-  "pbs-48",
-  "pbs-52",
-  "pbs-56",
-  "pbs-60",
-  "pbs-64",
-  "pbs-72",
-  "pbs-80",
-  "pbs-96",
-  "pbs-px",
-  "pe-0",
   "pe-0.5",
   "pe-1",
-  "pe-1.5",
-  "pe-2",
-  "pe-2.5",
   "pe-3",
-  "pe-3.5",
   "pe-4",
-  "pe-5",
-  "pe-6",
-  "pe-7",
-  "pe-8",
-  "pe-9",
-  "pe-10",
-  "pe-11",
-  "pe-12",
-  "pe-14",
-  "pe-16",
-  "pe-20",
-  "pe-24",
-  "pe-28",
-  "pe-32",
-  "pe-36",
-  "pe-40",
-  "pe-44",
-  "pe-48",
-  "pe-52",
-  "pe-56",
-  "pe-60",
-  "pe-64",
-  "pe-72",
-  "pe-80",
-  "pe-96",
-  "pe-px",
-  "perspective-dramatic",
-  "perspective-none",
-  "perspective-normal",
-  "perspective-origin-bottom",
-  "perspective-origin-bottom-left",
-  "perspective-origin-bottom-right",
-  "perspective-origin-center",
-  "perspective-origin-left",
-  "perspective-origin-right",
-  "perspective-origin-top",
-  "perspective-origin-top-left",
-  "perspective-origin-top-right",
-  "pl-0",
   "pl-0.5",
   "pl-1",
-  "pl-1.5",
-  "pl-2",
-  "pl-2.5",
   "pl-3",
-  "pl-3.5",
   "pl-4",
-  "pl-5",
-  "pl-6",
-  "pl-7",
-  "pl-8",
-  "pl-9",
-  "pl-10",
-  "pl-11",
-  "pl-12",
-  "pl-14",
-  "pl-16",
-  "pl-20",
-  "pl-24",
-  "pl-28",
-  "pl-32",
-  "pl-36",
-  "pl-40",
-  "pl-44",
-  "pl-48",
-  "pl-52",
-  "pl-56",
-  "pl-60",
-  "pl-64",
-  "pl-72",
-  "pl-80",
-  "pl-96",
-  "pl-px",
   "place-content-around",
   "place-content-baseline",
   "place-content-between",
   "place-content-center",
-  "place-content-center-safe",
   "place-content-end",
-  "place-content-end-safe",
   "place-content-evenly",
   "place-content-start",
   "place-content-stretch",
   "place-items-baseline",
   "place-items-center",
-  "place-items-center-safe",
   "place-items-end",
-  "place-items-end-safe",
   "place-items-start",
   "place-items-stretch",
   "place-self-auto",
   "place-self-center",
-  "place-self-center-safe",
   "place-self-end",
-  "place-self-end-safe",
   "place-self-start",
   "place-self-stretch",
   "placeholder-current",
-  "placeholder-current/0",
-  "placeholder-current/5",
-  "placeholder-current/10",
-  "placeholder-current/15",
-  "placeholder-current/20",
-  "placeholder-current/25",
-  "placeholder-current/30",
-  "placeholder-current/35",
-  "placeholder-current/40",
-  "placeholder-current/45",
-  "placeholder-current/50",
-  "placeholder-current/55",
-  "placeholder-current/60",
-  "placeholder-current/65",
-  "placeholder-current/70",
-  "placeholder-current/75",
-  "placeholder-current/80",
-  "placeholder-current/85",
-  "placeholder-current/90",
-  "placeholder-current/95",
-  "placeholder-current/100",
-  "placeholder-current/background",
-  "placeholder-inherit",
-  "placeholder-inherit/0",
-  "placeholder-inherit/5",
-  "placeholder-inherit/10",
-  "placeholder-inherit/15",
-  "placeholder-inherit/20",
-  "placeholder-inherit/25",
-  "placeholder-inherit/30",
-  "placeholder-inherit/35",
-  "placeholder-inherit/40",
-  "placeholder-inherit/45",
-  "placeholder-inherit/50",
-  "placeholder-inherit/55",
-  "placeholder-inherit/60",
-  "placeholder-inherit/65",
-  "placeholder-inherit/70",
-  "placeholder-inherit/75",
-  "placeholder-inherit/80",
-  "placeholder-inherit/85",
-  "placeholder-inherit/90",
-  "placeholder-inherit/95",
-  "placeholder-inherit/100",
-  "placeholder-inherit/background",
   "placeholder-transparent",
-  "placeholder-transparent/0",
-  "placeholder-transparent/5",
-  "placeholder-transparent/10",
-  "placeholder-transparent/15",
-  "placeholder-transparent/20",
-  "placeholder-transparent/25",
-  "placeholder-transparent/30",
-  "placeholder-transparent/35",
-  "placeholder-transparent/40",
-  "placeholder-transparent/45",
-  "placeholder-transparent/50",
-  "placeholder-transparent/55",
-  "placeholder-transparent/60",
-  "placeholder-transparent/65",
-  "placeholder-transparent/70",
-  "placeholder-transparent/75",
-  "placeholder-transparent/80",
-  "placeholder-transparent/85",
-  "placeholder-transparent/90",
-  "placeholder-transparent/95",
-  "placeholder-transparent/100",
-  "placeholder-transparent/background",
   "pointer-events-auto",
   "pointer-events-none",
-  "pr-0",
   "pr-0.5",
   "pr-1",
-  "pr-1.5",
-  "pr-2",
-  "pr-2.5",
   "pr-3",
-  "pr-3.5",
   "pr-4",
-  "pr-5",
-  "pr-6",
-  "pr-7",
-  "pr-8",
-  "pr-9",
-  "pr-10",
-  "pr-11",
-  "pr-12",
-  "pr-14",
-  "pr-16",
-  "pr-20",
-  "pr-24",
-  "pr-28",
-  "pr-32",
-  "pr-36",
-  "pr-40",
-  "pr-44",
-  "pr-48",
-  "pr-52",
-  "pr-56",
-  "pr-60",
-  "pr-64",
-  "pr-72",
-  "pr-80",
-  "pr-96",
-  "pr-px",
   "proportional-nums",
-  "ps-0",
   "ps-0.5",
   "ps-1",
-  "ps-1.5",
-  "ps-2",
-  "ps-2.5",
   "ps-3",
-  "ps-3.5",
   "ps-4",
-  "ps-5",
-  "ps-6",
-  "ps-7",
-  "ps-8",
-  "ps-9",
-  "ps-10",
-  "ps-11",
-  "ps-12",
-  "ps-14",
-  "ps-16",
-  "ps-20",
-  "ps-24",
-  "ps-28",
-  "ps-32",
-  "ps-36",
-  "ps-40",
-  "ps-44",
-  "ps-48",
-  "ps-52",
-  "ps-56",
-  "ps-60",
-  "ps-64",
-  "ps-72",
-  "ps-80",
-  "ps-96",
-  "ps-px",
-  "pt-0",
   "pt-0.5",
   "pt-1",
-  "pt-1.5",
-  "pt-2",
-  "pt-2.5",
   "pt-3",
-  "pt-3.5",
   "pt-4",
-  "pt-5",
-  "pt-6",
-  "pt-7",
-  "pt-8",
-  "pt-9",
-  "pt-10",
-  "pt-11",
-  "pt-12",
-  "pt-14",
-  "pt-16",
-  "pt-20",
-  "pt-24",
-  "pt-28",
-  "pt-32",
-  "pt-36",
-  "pt-40",
-  "pt-44",
-  "pt-48",
-  "pt-52",
-  "pt-56",
-  "pt-60",
-  "pt-64",
-  "pt-72",
-  "pt-80",
-  "pt-96",
-  "pt-px",
-  "px-0",
   "px-0.5",
   "px-1",
-  "px-1.5",
-  "px-2",
-  "px-2.5",
   "px-3",
-  "px-3.5",
   "px-4",
-  "px-5",
-  "px-6",
-  "px-7",
-  "px-8",
-  "px-9",
-  "px-10",
-  "px-11",
-  "px-12",
-  "px-14",
-  "px-16",
-  "px-20",
-  "px-24",
-  "px-28",
-  "px-32",
-  "px-36",
-  "px-40",
-  "px-44",
-  "px-48",
-  "px-52",
-  "px-56",
-  "px-60",
-  "px-64",
-  "px-72",
-  "px-80",
-  "px-96",
-  "px-px",
-  "py-0",
   "py-0.5",
   "py-1",
-  "py-1.5",
-  "py-2",
-  "py-2.5",
   "py-3",
-  "py-3.5",
   "py-4",
-  "py-5",
-  "py-6",
-  "py-7",
-  "py-8",
-  "py-9",
-  "py-10",
-  "py-11",
-  "py-12",
-  "py-14",
-  "py-16",
-  "py-20",
-  "py-24",
-  "py-28",
-  "py-32",
-  "py-36",
-  "py-40",
-  "py-44",
-  "py-48",
-  "py-52",
-  "py-56",
-  "py-60",
-  "py-64",
-  "py-72",
-  "py-80",
-  "py-96",
-  "py-px",
   "relative",
-  "resize",
+  "resize-both",
   "resize-none",
   "resize-x",
   "resize-y",
-  "right-0",
   "right-0.5",
   "right-1",
-  "right-1.5",
-  "right-2",
-  "right-2.5",
   "right-3",
-  "right-3.5",
   "right-4",
-  "right-5",
-  "right-6",
-  "right-7",
-  "right-8",
-  "right-9",
-  "right-10",
-  "right-11",
-  "right-12",
-  "right-14",
-  "right-16",
-  "right-20",
-  "right-24",
-  "right-28",
-  "right-32",
-  "right-36",
-  "right-40",
-  "right-44",
-  "right-48",
-  "right-52",
-  "right-56",
-  "right-60",
-  "right-64",
-  "right-72",
-  "right-80",
-  "right-96",
-  "right-1/2",
-  "right-1/3",
-  "right-1/4",
-  "right-1/5",
-  "right-1/6",
-  "right-1/12",
-  "right-2/3",
-  "right-2/4",
-  "right-2/5",
-  "right-2/6",
-  "right-2/12",
-  "right-3/4",
-  "right-3/5",
-  "right-3/6",
-  "right-3/12",
-  "right-4/5",
-  "right-4/6",
-  "right-4/12",
-  "right-5/6",
-  "right-5/12",
-  "right-6/12",
-  "right-7/12",
-  "right-8/12",
-  "right-9/12",
-  "right-10/12",
-  "right-11/12",
   "right-auto",
   "right-full",
-  "right-px",
   "ring",
   "ring-0",
   "ring-1",
@@ -10073,51 +1226,6 @@ exports[`getClassList 1`] = `
   "ring-4",
   "ring-8",
   "ring-current",
-  "ring-current/0",
-  "ring-current/5",
-  "ring-current/10",
-  "ring-current/15",
-  "ring-current/20",
-  "ring-current/25",
-  "ring-current/30",
-  "ring-current/35",
-  "ring-current/40",
-  "ring-current/45",
-  "ring-current/50",
-  "ring-current/55",
-  "ring-current/60",
-  "ring-current/65",
-  "ring-current/70",
-  "ring-current/75",
-  "ring-current/80",
-  "ring-current/85",
-  "ring-current/90",
-  "ring-current/95",
-  "ring-current/100",
-  "ring-current/background",
-  "ring-inherit",
-  "ring-inherit/0",
-  "ring-inherit/5",
-  "ring-inherit/10",
-  "ring-inherit/15",
-  "ring-inherit/20",
-  "ring-inherit/25",
-  "ring-inherit/30",
-  "ring-inherit/35",
-  "ring-inherit/40",
-  "ring-inherit/45",
-  "ring-inherit/50",
-  "ring-inherit/55",
-  "ring-inherit/60",
-  "ring-inherit/65",
-  "ring-inherit/70",
-  "ring-inherit/75",
-  "ring-inherit/80",
-  "ring-inherit/85",
-  "ring-inherit/90",
-  "ring-inherit/95",
-  "ring-inherit/100",
-  "ring-inherit/background",
   "ring-inset",
   "ring-offset-0",
   "ring-offset-1",
@@ -10125,134 +1233,17 @@ exports[`getClassList 1`] = `
   "ring-offset-4",
   "ring-offset-8",
   "ring-offset-current",
-  "ring-offset-current/0",
-  "ring-offset-current/5",
-  "ring-offset-current/10",
-  "ring-offset-current/15",
-  "ring-offset-current/20",
-  "ring-offset-current/25",
-  "ring-offset-current/30",
-  "ring-offset-current/35",
-  "ring-offset-current/40",
-  "ring-offset-current/45",
-  "ring-offset-current/50",
-  "ring-offset-current/55",
-  "ring-offset-current/60",
-  "ring-offset-current/65",
-  "ring-offset-current/70",
-  "ring-offset-current/75",
-  "ring-offset-current/80",
-  "ring-offset-current/85",
-  "ring-offset-current/90",
-  "ring-offset-current/95",
-  "ring-offset-current/100",
-  "ring-offset-current/background",
-  "ring-offset-inherit",
-  "ring-offset-inherit/0",
-  "ring-offset-inherit/5",
-  "ring-offset-inherit/10",
-  "ring-offset-inherit/15",
-  "ring-offset-inherit/20",
-  "ring-offset-inherit/25",
-  "ring-offset-inherit/30",
-  "ring-offset-inherit/35",
-  "ring-offset-inherit/40",
-  "ring-offset-inherit/45",
-  "ring-offset-inherit/50",
-  "ring-offset-inherit/55",
-  "ring-offset-inherit/60",
-  "ring-offset-inherit/65",
-  "ring-offset-inherit/70",
-  "ring-offset-inherit/75",
-  "ring-offset-inherit/80",
-  "ring-offset-inherit/85",
-  "ring-offset-inherit/90",
-  "ring-offset-inherit/95",
-  "ring-offset-inherit/100",
-  "ring-offset-inherit/background",
   "ring-offset-transparent",
-  "ring-offset-transparent/0",
-  "ring-offset-transparent/5",
-  "ring-offset-transparent/10",
-  "ring-offset-transparent/15",
-  "ring-offset-transparent/20",
-  "ring-offset-transparent/25",
-  "ring-offset-transparent/30",
-  "ring-offset-transparent/35",
-  "ring-offset-transparent/40",
-  "ring-offset-transparent/45",
-  "ring-offset-transparent/50",
-  "ring-offset-transparent/55",
-  "ring-offset-transparent/60",
-  "ring-offset-transparent/65",
-  "ring-offset-transparent/70",
-  "ring-offset-transparent/75",
-  "ring-offset-transparent/80",
-  "ring-offset-transparent/85",
-  "ring-offset-transparent/90",
-  "ring-offset-transparent/95",
-  "ring-offset-transparent/100",
-  "ring-offset-transparent/background",
   "ring-transparent",
-  "ring-transparent/0",
-  "ring-transparent/5",
-  "ring-transparent/10",
-  "ring-transparent/15",
-  "ring-transparent/20",
-  "ring-transparent/25",
-  "ring-transparent/30",
-  "ring-transparent/35",
-  "ring-transparent/40",
-  "ring-transparent/45",
-  "ring-transparent/50",
-  "ring-transparent/55",
-  "ring-transparent/60",
-  "ring-transparent/65",
-  "ring-transparent/70",
-  "ring-transparent/75",
-  "ring-transparent/80",
-  "ring-transparent/85",
-  "ring-transparent/90",
-  "ring-transparent/95",
-  "ring-transparent/100",
-  "ring-transparent/background",
   "rotate-0",
   "rotate-1",
+  "rotate-12",
+  "rotate-180",
   "rotate-2",
   "rotate-3",
-  "rotate-6",
-  "rotate-12",
   "rotate-45",
+  "rotate-6",
   "rotate-90",
-  "rotate-180",
-  "rotate-none",
-  "rotate-x-0",
-  "rotate-x-1",
-  "rotate-x-2",
-  "rotate-x-3",
-  "rotate-x-6",
-  "rotate-x-12",
-  "rotate-x-45",
-  "rotate-x-90",
-  "rotate-x-180",
-  "rotate-y-0",
-  "rotate-y-1",
-  "rotate-y-2",
-  "rotate-y-3",
-  "rotate-y-6",
-  "rotate-y-12",
-  "rotate-y-45",
-  "rotate-y-90",
-  "rotate-y-180",
-  "rotate-z-0",
-  "rotate-z-1",
-  "rotate-z-2",
-  "rotate-z-3",
-  "rotate-z-6",
-  "rotate-z-12",
-  "rotate-z-45",
-  "rotate-z-90",
-  "rotate-z-180",
   "rounded-b-full",
   "rounded-b-none",
   "rounded-bl-full",
@@ -10285,6 +1276,10 @@ exports[`getClassList 1`] = `
   "rounded-tr-none",
   "row-auto",
   "row-end-1",
+  "row-end-10",
+  "row-end-11",
+  "row-end-12",
+  "row-end-13",
   "row-end-2",
   "row-end-3",
   "row-end-4",
@@ -10293,12 +1288,11 @@ exports[`getClassList 1`] = `
   "row-end-7",
   "row-end-8",
   "row-end-9",
-  "row-end-10",
-  "row-end-11",
-  "row-end-12",
-  "row-end-13",
   "row-end-auto",
   "row-span-1",
+  "row-span-10",
+  "row-span-11",
+  "row-span-12",
   "row-span-2",
   "row-span-3",
   "row-span-4",
@@ -10307,11 +1301,12 @@ exports[`getClassList 1`] = `
   "row-span-7",
   "row-span-8",
   "row-span-9",
-  "row-span-10",
-  "row-span-11",
-  "row-span-12",
   "row-span-full",
   "row-start-1",
+  "row-start-10",
+  "row-start-11",
+  "row-start-12",
+  "row-start-13",
   "row-start-2",
   "row-start-3",
   "row-start-4",
@@ -10320,1164 +1315,165 @@ exports[`getClassList 1`] = `
   "row-start-7",
   "row-start-8",
   "row-start-9",
-  "row-start-10",
-  "row-start-11",
-  "row-start-12",
-  "row-start-13",
   "row-start-auto",
   "saturate-0",
-  "saturate-50",
   "saturate-100",
   "saturate-150",
   "saturate-200",
+  "saturate-50",
   "scale-0",
-  "scale-3d",
-  "scale-50",
-  "scale-75",
-  "scale-90",
-  "scale-95",
   "scale-100",
   "scale-105",
   "scale-110",
   "scale-125",
   "scale-150",
   "scale-200",
-  "scale-none",
+  "scale-50",
+  "scale-75",
+  "scale-90",
+  "scale-95",
   "scale-x-0",
-  "scale-x-50",
-  "scale-x-75",
-  "scale-x-90",
-  "scale-x-95",
   "scale-x-100",
   "scale-x-105",
   "scale-x-110",
   "scale-x-125",
   "scale-x-150",
   "scale-x-200",
+  "scale-x-50",
+  "scale-x-75",
+  "scale-x-90",
+  "scale-x-95",
   "scale-y-0",
-  "scale-y-50",
-  "scale-y-75",
-  "scale-y-90",
-  "scale-y-95",
   "scale-y-100",
   "scale-y-105",
   "scale-y-110",
   "scale-y-125",
   "scale-y-150",
   "scale-y-200",
-  "scale-z-0",
-  "scale-z-50",
-  "scale-z-75",
-  "scale-z-90",
-  "scale-z-95",
-  "scale-z-100",
-  "scale-z-105",
-  "scale-z-110",
-  "scale-z-125",
-  "scale-z-150",
-  "scale-z-200",
-  "scheme-dark",
-  "scheme-light",
-  "scheme-light-dark",
-  "scheme-normal",
-  "scheme-only-dark",
-  "scheme-only-light",
+  "scale-y-50",
+  "scale-y-75",
+  "scale-y-90",
+  "scale-y-95",
   "scroll-auto",
-  "scroll-m-0",
   "scroll-m-0.5",
   "scroll-m-1",
-  "scroll-m-1.5",
-  "scroll-m-2",
-  "scroll-m-2.5",
   "scroll-m-3",
-  "scroll-m-3.5",
   "scroll-m-4",
-  "scroll-m-5",
-  "scroll-m-6",
-  "scroll-m-7",
-  "scroll-m-8",
-  "scroll-m-9",
-  "scroll-m-10",
-  "scroll-m-11",
-  "scroll-m-12",
-  "scroll-m-14",
-  "scroll-m-16",
-  "scroll-m-20",
-  "scroll-m-24",
-  "scroll-m-28",
-  "scroll-m-32",
-  "scroll-m-36",
-  "scroll-m-40",
-  "scroll-m-44",
-  "scroll-m-48",
-  "scroll-m-52",
-  "scroll-m-56",
-  "scroll-m-60",
-  "scroll-m-64",
-  "scroll-m-72",
-  "scroll-m-80",
-  "scroll-m-96",
-  "scroll-m-px",
-  "scroll-mb-0",
   "scroll-mb-0.5",
   "scroll-mb-1",
-  "scroll-mb-1.5",
-  "scroll-mb-2",
-  "scroll-mb-2.5",
   "scroll-mb-3",
-  "scroll-mb-3.5",
   "scroll-mb-4",
-  "scroll-mb-5",
-  "scroll-mb-6",
-  "scroll-mb-7",
-  "scroll-mb-8",
-  "scroll-mb-9",
-  "scroll-mb-10",
-  "scroll-mb-11",
-  "scroll-mb-12",
-  "scroll-mb-14",
-  "scroll-mb-16",
-  "scroll-mb-20",
-  "scroll-mb-24",
-  "scroll-mb-28",
-  "scroll-mb-32",
-  "scroll-mb-36",
-  "scroll-mb-40",
-  "scroll-mb-44",
-  "scroll-mb-48",
-  "scroll-mb-52",
-  "scroll-mb-56",
-  "scroll-mb-60",
-  "scroll-mb-64",
-  "scroll-mb-72",
-  "scroll-mb-80",
-  "scroll-mb-96",
-  "scroll-mb-px",
-  "scroll-mbe-0",
-  "scroll-mbe-0.5",
-  "scroll-mbe-1",
-  "scroll-mbe-1.5",
-  "scroll-mbe-2",
-  "scroll-mbe-2.5",
-  "scroll-mbe-3",
-  "scroll-mbe-3.5",
-  "scroll-mbe-4",
-  "scroll-mbe-5",
-  "scroll-mbe-6",
-  "scroll-mbe-7",
-  "scroll-mbe-8",
-  "scroll-mbe-9",
-  "scroll-mbe-10",
-  "scroll-mbe-11",
-  "scroll-mbe-12",
-  "scroll-mbe-14",
-  "scroll-mbe-16",
-  "scroll-mbe-20",
-  "scroll-mbe-24",
-  "scroll-mbe-28",
-  "scroll-mbe-32",
-  "scroll-mbe-36",
-  "scroll-mbe-40",
-  "scroll-mbe-44",
-  "scroll-mbe-48",
-  "scroll-mbe-52",
-  "scroll-mbe-56",
-  "scroll-mbe-60",
-  "scroll-mbe-64",
-  "scroll-mbe-72",
-  "scroll-mbe-80",
-  "scroll-mbe-96",
-  "scroll-mbe-px",
-  "scroll-mbs-0",
-  "scroll-mbs-0.5",
-  "scroll-mbs-1",
-  "scroll-mbs-1.5",
-  "scroll-mbs-2",
-  "scroll-mbs-2.5",
-  "scroll-mbs-3",
-  "scroll-mbs-3.5",
-  "scroll-mbs-4",
-  "scroll-mbs-5",
-  "scroll-mbs-6",
-  "scroll-mbs-7",
-  "scroll-mbs-8",
-  "scroll-mbs-9",
-  "scroll-mbs-10",
-  "scroll-mbs-11",
-  "scroll-mbs-12",
-  "scroll-mbs-14",
-  "scroll-mbs-16",
-  "scroll-mbs-20",
-  "scroll-mbs-24",
-  "scroll-mbs-28",
-  "scroll-mbs-32",
-  "scroll-mbs-36",
-  "scroll-mbs-40",
-  "scroll-mbs-44",
-  "scroll-mbs-48",
-  "scroll-mbs-52",
-  "scroll-mbs-56",
-  "scroll-mbs-60",
-  "scroll-mbs-64",
-  "scroll-mbs-72",
-  "scroll-mbs-80",
-  "scroll-mbs-96",
-  "scroll-mbs-px",
-  "scroll-me-0",
   "scroll-me-0.5",
   "scroll-me-1",
-  "scroll-me-1.5",
-  "scroll-me-2",
-  "scroll-me-2.5",
   "scroll-me-3",
-  "scroll-me-3.5",
   "scroll-me-4",
-  "scroll-me-5",
-  "scroll-me-6",
-  "scroll-me-7",
-  "scroll-me-8",
-  "scroll-me-9",
-  "scroll-me-10",
-  "scroll-me-11",
-  "scroll-me-12",
-  "scroll-me-14",
-  "scroll-me-16",
-  "scroll-me-20",
-  "scroll-me-24",
-  "scroll-me-28",
-  "scroll-me-32",
-  "scroll-me-36",
-  "scroll-me-40",
-  "scroll-me-44",
-  "scroll-me-48",
-  "scroll-me-52",
-  "scroll-me-56",
-  "scroll-me-60",
-  "scroll-me-64",
-  "scroll-me-72",
-  "scroll-me-80",
-  "scroll-me-96",
-  "scroll-me-px",
-  "scroll-ml-0",
   "scroll-ml-0.5",
   "scroll-ml-1",
-  "scroll-ml-1.5",
-  "scroll-ml-2",
-  "scroll-ml-2.5",
   "scroll-ml-3",
-  "scroll-ml-3.5",
   "scroll-ml-4",
-  "scroll-ml-5",
-  "scroll-ml-6",
-  "scroll-ml-7",
-  "scroll-ml-8",
-  "scroll-ml-9",
-  "scroll-ml-10",
-  "scroll-ml-11",
-  "scroll-ml-12",
-  "scroll-ml-14",
-  "scroll-ml-16",
-  "scroll-ml-20",
-  "scroll-ml-24",
-  "scroll-ml-28",
-  "scroll-ml-32",
-  "scroll-ml-36",
-  "scroll-ml-40",
-  "scroll-ml-44",
-  "scroll-ml-48",
-  "scroll-ml-52",
-  "scroll-ml-56",
-  "scroll-ml-60",
-  "scroll-ml-64",
-  "scroll-ml-72",
-  "scroll-ml-80",
-  "scroll-ml-96",
-  "scroll-ml-px",
-  "scroll-mr-0",
   "scroll-mr-0.5",
   "scroll-mr-1",
-  "scroll-mr-1.5",
-  "scroll-mr-2",
-  "scroll-mr-2.5",
   "scroll-mr-3",
-  "scroll-mr-3.5",
   "scroll-mr-4",
-  "scroll-mr-5",
-  "scroll-mr-6",
-  "scroll-mr-7",
-  "scroll-mr-8",
-  "scroll-mr-9",
-  "scroll-mr-10",
-  "scroll-mr-11",
-  "scroll-mr-12",
-  "scroll-mr-14",
-  "scroll-mr-16",
-  "scroll-mr-20",
-  "scroll-mr-24",
-  "scroll-mr-28",
-  "scroll-mr-32",
-  "scroll-mr-36",
-  "scroll-mr-40",
-  "scroll-mr-44",
-  "scroll-mr-48",
-  "scroll-mr-52",
-  "scroll-mr-56",
-  "scroll-mr-60",
-  "scroll-mr-64",
-  "scroll-mr-72",
-  "scroll-mr-80",
-  "scroll-mr-96",
-  "scroll-mr-px",
-  "scroll-ms-0",
   "scroll-ms-0.5",
   "scroll-ms-1",
-  "scroll-ms-1.5",
-  "scroll-ms-2",
-  "scroll-ms-2.5",
   "scroll-ms-3",
-  "scroll-ms-3.5",
   "scroll-ms-4",
-  "scroll-ms-5",
-  "scroll-ms-6",
-  "scroll-ms-7",
-  "scroll-ms-8",
-  "scroll-ms-9",
-  "scroll-ms-10",
-  "scroll-ms-11",
-  "scroll-ms-12",
-  "scroll-ms-14",
-  "scroll-ms-16",
-  "scroll-ms-20",
-  "scroll-ms-24",
-  "scroll-ms-28",
-  "scroll-ms-32",
-  "scroll-ms-36",
-  "scroll-ms-40",
-  "scroll-ms-44",
-  "scroll-ms-48",
-  "scroll-ms-52",
-  "scroll-ms-56",
-  "scroll-ms-60",
-  "scroll-ms-64",
-  "scroll-ms-72",
-  "scroll-ms-80",
-  "scroll-ms-96",
-  "scroll-ms-px",
-  "scroll-mt-0",
   "scroll-mt-0.5",
   "scroll-mt-1",
-  "scroll-mt-1.5",
-  "scroll-mt-2",
-  "scroll-mt-2.5",
   "scroll-mt-3",
-  "scroll-mt-3.5",
   "scroll-mt-4",
-  "scroll-mt-5",
-  "scroll-mt-6",
-  "scroll-mt-7",
-  "scroll-mt-8",
-  "scroll-mt-9",
-  "scroll-mt-10",
-  "scroll-mt-11",
-  "scroll-mt-12",
-  "scroll-mt-14",
-  "scroll-mt-16",
-  "scroll-mt-20",
-  "scroll-mt-24",
-  "scroll-mt-28",
-  "scroll-mt-32",
-  "scroll-mt-36",
-  "scroll-mt-40",
-  "scroll-mt-44",
-  "scroll-mt-48",
-  "scroll-mt-52",
-  "scroll-mt-56",
-  "scroll-mt-60",
-  "scroll-mt-64",
-  "scroll-mt-72",
-  "scroll-mt-80",
-  "scroll-mt-96",
-  "scroll-mt-px",
-  "scroll-mx-0",
   "scroll-mx-0.5",
   "scroll-mx-1",
-  "scroll-mx-1.5",
-  "scroll-mx-2",
-  "scroll-mx-2.5",
   "scroll-mx-3",
-  "scroll-mx-3.5",
   "scroll-mx-4",
-  "scroll-mx-5",
-  "scroll-mx-6",
-  "scroll-mx-7",
-  "scroll-mx-8",
-  "scroll-mx-9",
-  "scroll-mx-10",
-  "scroll-mx-11",
-  "scroll-mx-12",
-  "scroll-mx-14",
-  "scroll-mx-16",
-  "scroll-mx-20",
-  "scroll-mx-24",
-  "scroll-mx-28",
-  "scroll-mx-32",
-  "scroll-mx-36",
-  "scroll-mx-40",
-  "scroll-mx-44",
-  "scroll-mx-48",
-  "scroll-mx-52",
-  "scroll-mx-56",
-  "scroll-mx-60",
-  "scroll-mx-64",
-  "scroll-mx-72",
-  "scroll-mx-80",
-  "scroll-mx-96",
-  "scroll-mx-px",
-  "scroll-my-0",
   "scroll-my-0.5",
   "scroll-my-1",
-  "scroll-my-1.5",
-  "scroll-my-2",
-  "scroll-my-2.5",
   "scroll-my-3",
-  "scroll-my-3.5",
   "scroll-my-4",
-  "scroll-my-5",
-  "scroll-my-6",
-  "scroll-my-7",
-  "scroll-my-8",
-  "scroll-my-9",
-  "scroll-my-10",
-  "scroll-my-11",
-  "scroll-my-12",
-  "scroll-my-14",
-  "scroll-my-16",
-  "scroll-my-20",
-  "scroll-my-24",
-  "scroll-my-28",
-  "scroll-my-32",
-  "scroll-my-36",
-  "scroll-my-40",
-  "scroll-my-44",
-  "scroll-my-48",
-  "scroll-my-52",
-  "scroll-my-56",
-  "scroll-my-60",
-  "scroll-my-64",
-  "scroll-my-72",
-  "scroll-my-80",
-  "scroll-my-96",
-  "scroll-my-px",
-  "scroll-p-0",
   "scroll-p-0.5",
   "scroll-p-1",
-  "scroll-p-1.5",
-  "scroll-p-2",
-  "scroll-p-2.5",
   "scroll-p-3",
-  "scroll-p-3.5",
   "scroll-p-4",
-  "scroll-p-5",
-  "scroll-p-6",
-  "scroll-p-7",
-  "scroll-p-8",
-  "scroll-p-9",
-  "scroll-p-10",
-  "scroll-p-11",
-  "scroll-p-12",
-  "scroll-p-14",
-  "scroll-p-16",
-  "scroll-p-20",
-  "scroll-p-24",
-  "scroll-p-28",
-  "scroll-p-32",
-  "scroll-p-36",
-  "scroll-p-40",
-  "scroll-p-44",
-  "scroll-p-48",
-  "scroll-p-52",
-  "scroll-p-56",
-  "scroll-p-60",
-  "scroll-p-64",
-  "scroll-p-72",
-  "scroll-p-80",
-  "scroll-p-96",
-  "scroll-p-px",
-  "scroll-pb-0",
   "scroll-pb-0.5",
   "scroll-pb-1",
-  "scroll-pb-1.5",
-  "scroll-pb-2",
-  "scroll-pb-2.5",
   "scroll-pb-3",
-  "scroll-pb-3.5",
   "scroll-pb-4",
-  "scroll-pb-5",
-  "scroll-pb-6",
-  "scroll-pb-7",
-  "scroll-pb-8",
-  "scroll-pb-9",
-  "scroll-pb-10",
-  "scroll-pb-11",
-  "scroll-pb-12",
-  "scroll-pb-14",
-  "scroll-pb-16",
-  "scroll-pb-20",
-  "scroll-pb-24",
-  "scroll-pb-28",
-  "scroll-pb-32",
-  "scroll-pb-36",
-  "scroll-pb-40",
-  "scroll-pb-44",
-  "scroll-pb-48",
-  "scroll-pb-52",
-  "scroll-pb-56",
-  "scroll-pb-60",
-  "scroll-pb-64",
-  "scroll-pb-72",
-  "scroll-pb-80",
-  "scroll-pb-96",
-  "scroll-pb-px",
-  "scroll-pbe-0",
-  "scroll-pbe-0.5",
-  "scroll-pbe-1",
-  "scroll-pbe-1.5",
-  "scroll-pbe-2",
-  "scroll-pbe-2.5",
-  "scroll-pbe-3",
-  "scroll-pbe-3.5",
-  "scroll-pbe-4",
-  "scroll-pbe-5",
-  "scroll-pbe-6",
-  "scroll-pbe-7",
-  "scroll-pbe-8",
-  "scroll-pbe-9",
-  "scroll-pbe-10",
-  "scroll-pbe-11",
-  "scroll-pbe-12",
-  "scroll-pbe-14",
-  "scroll-pbe-16",
-  "scroll-pbe-20",
-  "scroll-pbe-24",
-  "scroll-pbe-28",
-  "scroll-pbe-32",
-  "scroll-pbe-36",
-  "scroll-pbe-40",
-  "scroll-pbe-44",
-  "scroll-pbe-48",
-  "scroll-pbe-52",
-  "scroll-pbe-56",
-  "scroll-pbe-60",
-  "scroll-pbe-64",
-  "scroll-pbe-72",
-  "scroll-pbe-80",
-  "scroll-pbe-96",
-  "scroll-pbe-px",
-  "scroll-pbs-0",
-  "scroll-pbs-0.5",
-  "scroll-pbs-1",
-  "scroll-pbs-1.5",
-  "scroll-pbs-2",
-  "scroll-pbs-2.5",
-  "scroll-pbs-3",
-  "scroll-pbs-3.5",
-  "scroll-pbs-4",
-  "scroll-pbs-5",
-  "scroll-pbs-6",
-  "scroll-pbs-7",
-  "scroll-pbs-8",
-  "scroll-pbs-9",
-  "scroll-pbs-10",
-  "scroll-pbs-11",
-  "scroll-pbs-12",
-  "scroll-pbs-14",
-  "scroll-pbs-16",
-  "scroll-pbs-20",
-  "scroll-pbs-24",
-  "scroll-pbs-28",
-  "scroll-pbs-32",
-  "scroll-pbs-36",
-  "scroll-pbs-40",
-  "scroll-pbs-44",
-  "scroll-pbs-48",
-  "scroll-pbs-52",
-  "scroll-pbs-56",
-  "scroll-pbs-60",
-  "scroll-pbs-64",
-  "scroll-pbs-72",
-  "scroll-pbs-80",
-  "scroll-pbs-96",
-  "scroll-pbs-px",
-  "scroll-pe-0",
   "scroll-pe-0.5",
   "scroll-pe-1",
-  "scroll-pe-1.5",
-  "scroll-pe-2",
-  "scroll-pe-2.5",
   "scroll-pe-3",
-  "scroll-pe-3.5",
   "scroll-pe-4",
-  "scroll-pe-5",
-  "scroll-pe-6",
-  "scroll-pe-7",
-  "scroll-pe-8",
-  "scroll-pe-9",
-  "scroll-pe-10",
-  "scroll-pe-11",
-  "scroll-pe-12",
-  "scroll-pe-14",
-  "scroll-pe-16",
-  "scroll-pe-20",
-  "scroll-pe-24",
-  "scroll-pe-28",
-  "scroll-pe-32",
-  "scroll-pe-36",
-  "scroll-pe-40",
-  "scroll-pe-44",
-  "scroll-pe-48",
-  "scroll-pe-52",
-  "scroll-pe-56",
-  "scroll-pe-60",
-  "scroll-pe-64",
-  "scroll-pe-72",
-  "scroll-pe-80",
-  "scroll-pe-96",
-  "scroll-pe-px",
-  "scroll-pl-0",
   "scroll-pl-0.5",
   "scroll-pl-1",
-  "scroll-pl-1.5",
-  "scroll-pl-2",
-  "scroll-pl-2.5",
   "scroll-pl-3",
-  "scroll-pl-3.5",
   "scroll-pl-4",
-  "scroll-pl-5",
-  "scroll-pl-6",
-  "scroll-pl-7",
-  "scroll-pl-8",
-  "scroll-pl-9",
-  "scroll-pl-10",
-  "scroll-pl-11",
-  "scroll-pl-12",
-  "scroll-pl-14",
-  "scroll-pl-16",
-  "scroll-pl-20",
-  "scroll-pl-24",
-  "scroll-pl-28",
-  "scroll-pl-32",
-  "scroll-pl-36",
-  "scroll-pl-40",
-  "scroll-pl-44",
-  "scroll-pl-48",
-  "scroll-pl-52",
-  "scroll-pl-56",
-  "scroll-pl-60",
-  "scroll-pl-64",
-  "scroll-pl-72",
-  "scroll-pl-80",
-  "scroll-pl-96",
-  "scroll-pl-px",
-  "scroll-pr-0",
   "scroll-pr-0.5",
   "scroll-pr-1",
-  "scroll-pr-1.5",
-  "scroll-pr-2",
-  "scroll-pr-2.5",
   "scroll-pr-3",
-  "scroll-pr-3.5",
   "scroll-pr-4",
-  "scroll-pr-5",
-  "scroll-pr-6",
-  "scroll-pr-7",
-  "scroll-pr-8",
-  "scroll-pr-9",
-  "scroll-pr-10",
-  "scroll-pr-11",
-  "scroll-pr-12",
-  "scroll-pr-14",
-  "scroll-pr-16",
-  "scroll-pr-20",
-  "scroll-pr-24",
-  "scroll-pr-28",
-  "scroll-pr-32",
-  "scroll-pr-36",
-  "scroll-pr-40",
-  "scroll-pr-44",
-  "scroll-pr-48",
-  "scroll-pr-52",
-  "scroll-pr-56",
-  "scroll-pr-60",
-  "scroll-pr-64",
-  "scroll-pr-72",
-  "scroll-pr-80",
-  "scroll-pr-96",
-  "scroll-pr-px",
-  "scroll-ps-0",
   "scroll-ps-0.5",
   "scroll-ps-1",
-  "scroll-ps-1.5",
-  "scroll-ps-2",
-  "scroll-ps-2.5",
   "scroll-ps-3",
-  "scroll-ps-3.5",
   "scroll-ps-4",
-  "scroll-ps-5",
-  "scroll-ps-6",
-  "scroll-ps-7",
-  "scroll-ps-8",
-  "scroll-ps-9",
-  "scroll-ps-10",
-  "scroll-ps-11",
-  "scroll-ps-12",
-  "scroll-ps-14",
-  "scroll-ps-16",
-  "scroll-ps-20",
-  "scroll-ps-24",
-  "scroll-ps-28",
-  "scroll-ps-32",
-  "scroll-ps-36",
-  "scroll-ps-40",
-  "scroll-ps-44",
-  "scroll-ps-48",
-  "scroll-ps-52",
-  "scroll-ps-56",
-  "scroll-ps-60",
-  "scroll-ps-64",
-  "scroll-ps-72",
-  "scroll-ps-80",
-  "scroll-ps-96",
-  "scroll-ps-px",
-  "scroll-pt-0",
   "scroll-pt-0.5",
   "scroll-pt-1",
-  "scroll-pt-1.5",
-  "scroll-pt-2",
-  "scroll-pt-2.5",
   "scroll-pt-3",
-  "scroll-pt-3.5",
   "scroll-pt-4",
-  "scroll-pt-5",
-  "scroll-pt-6",
-  "scroll-pt-7",
-  "scroll-pt-8",
-  "scroll-pt-9",
-  "scroll-pt-10",
-  "scroll-pt-11",
-  "scroll-pt-12",
-  "scroll-pt-14",
-  "scroll-pt-16",
-  "scroll-pt-20",
-  "scroll-pt-24",
-  "scroll-pt-28",
-  "scroll-pt-32",
-  "scroll-pt-36",
-  "scroll-pt-40",
-  "scroll-pt-44",
-  "scroll-pt-48",
-  "scroll-pt-52",
-  "scroll-pt-56",
-  "scroll-pt-60",
-  "scroll-pt-64",
-  "scroll-pt-72",
-  "scroll-pt-80",
-  "scroll-pt-96",
-  "scroll-pt-px",
-  "scroll-px-0",
   "scroll-px-0.5",
   "scroll-px-1",
-  "scroll-px-1.5",
-  "scroll-px-2",
-  "scroll-px-2.5",
   "scroll-px-3",
-  "scroll-px-3.5",
   "scroll-px-4",
-  "scroll-px-5",
-  "scroll-px-6",
-  "scroll-px-7",
-  "scroll-px-8",
-  "scroll-px-9",
-  "scroll-px-10",
-  "scroll-px-11",
-  "scroll-px-12",
-  "scroll-px-14",
-  "scroll-px-16",
-  "scroll-px-20",
-  "scroll-px-24",
-  "scroll-px-28",
-  "scroll-px-32",
-  "scroll-px-36",
-  "scroll-px-40",
-  "scroll-px-44",
-  "scroll-px-48",
-  "scroll-px-52",
-  "scroll-px-56",
-  "scroll-px-60",
-  "scroll-px-64",
-  "scroll-px-72",
-  "scroll-px-80",
-  "scroll-px-96",
-  "scroll-px-px",
-  "scroll-py-0",
   "scroll-py-0.5",
   "scroll-py-1",
-  "scroll-py-1.5",
-  "scroll-py-2",
-  "scroll-py-2.5",
   "scroll-py-3",
-  "scroll-py-3.5",
   "scroll-py-4",
-  "scroll-py-5",
-  "scroll-py-6",
-  "scroll-py-7",
-  "scroll-py-8",
-  "scroll-py-9",
-  "scroll-py-10",
-  "scroll-py-11",
-  "scroll-py-12",
-  "scroll-py-14",
-  "scroll-py-16",
-  "scroll-py-20",
-  "scroll-py-24",
-  "scroll-py-28",
-  "scroll-py-32",
-  "scroll-py-36",
-  "scroll-py-40",
-  "scroll-py-44",
-  "scroll-py-48",
-  "scroll-py-52",
-  "scroll-py-56",
-  "scroll-py-60",
-  "scroll-py-64",
-  "scroll-py-72",
-  "scroll-py-80",
-  "scroll-py-96",
-  "scroll-py-px",
   "scroll-smooth",
-  "scrollbar-auto",
-  "scrollbar-gutter-auto",
-  "scrollbar-gutter-both",
-  "scrollbar-gutter-stable",
-  "scrollbar-none",
-  "scrollbar-thin",
-  "scrollbar-thumb-current",
-  "scrollbar-thumb-current/0",
-  "scrollbar-thumb-current/5",
-  "scrollbar-thumb-current/10",
-  "scrollbar-thumb-current/15",
-  "scrollbar-thumb-current/20",
-  "scrollbar-thumb-current/25",
-  "scrollbar-thumb-current/30",
-  "scrollbar-thumb-current/35",
-  "scrollbar-thumb-current/40",
-  "scrollbar-thumb-current/45",
-  "scrollbar-thumb-current/50",
-  "scrollbar-thumb-current/55",
-  "scrollbar-thumb-current/60",
-  "scrollbar-thumb-current/65",
-  "scrollbar-thumb-current/70",
-  "scrollbar-thumb-current/75",
-  "scrollbar-thumb-current/80",
-  "scrollbar-thumb-current/85",
-  "scrollbar-thumb-current/90",
-  "scrollbar-thumb-current/95",
-  "scrollbar-thumb-current/100",
-  "scrollbar-thumb-current/background",
-  "scrollbar-thumb-inherit",
-  "scrollbar-thumb-inherit/0",
-  "scrollbar-thumb-inherit/5",
-  "scrollbar-thumb-inherit/10",
-  "scrollbar-thumb-inherit/15",
-  "scrollbar-thumb-inherit/20",
-  "scrollbar-thumb-inherit/25",
-  "scrollbar-thumb-inherit/30",
-  "scrollbar-thumb-inherit/35",
-  "scrollbar-thumb-inherit/40",
-  "scrollbar-thumb-inherit/45",
-  "scrollbar-thumb-inherit/50",
-  "scrollbar-thumb-inherit/55",
-  "scrollbar-thumb-inherit/60",
-  "scrollbar-thumb-inherit/65",
-  "scrollbar-thumb-inherit/70",
-  "scrollbar-thumb-inherit/75",
-  "scrollbar-thumb-inherit/80",
-  "scrollbar-thumb-inherit/85",
-  "scrollbar-thumb-inherit/90",
-  "scrollbar-thumb-inherit/95",
-  "scrollbar-thumb-inherit/100",
-  "scrollbar-thumb-inherit/background",
-  "scrollbar-thumb-transparent",
-  "scrollbar-thumb-transparent/0",
-  "scrollbar-thumb-transparent/5",
-  "scrollbar-thumb-transparent/10",
-  "scrollbar-thumb-transparent/15",
-  "scrollbar-thumb-transparent/20",
-  "scrollbar-thumb-transparent/25",
-  "scrollbar-thumb-transparent/30",
-  "scrollbar-thumb-transparent/35",
-  "scrollbar-thumb-transparent/40",
-  "scrollbar-thumb-transparent/45",
-  "scrollbar-thumb-transparent/50",
-  "scrollbar-thumb-transparent/55",
-  "scrollbar-thumb-transparent/60",
-  "scrollbar-thumb-transparent/65",
-  "scrollbar-thumb-transparent/70",
-  "scrollbar-thumb-transparent/75",
-  "scrollbar-thumb-transparent/80",
-  "scrollbar-thumb-transparent/85",
-  "scrollbar-thumb-transparent/90",
-  "scrollbar-thumb-transparent/95",
-  "scrollbar-thumb-transparent/100",
-  "scrollbar-thumb-transparent/background",
-  "scrollbar-track-current",
-  "scrollbar-track-current/0",
-  "scrollbar-track-current/5",
-  "scrollbar-track-current/10",
-  "scrollbar-track-current/15",
-  "scrollbar-track-current/20",
-  "scrollbar-track-current/25",
-  "scrollbar-track-current/30",
-  "scrollbar-track-current/35",
-  "scrollbar-track-current/40",
-  "scrollbar-track-current/45",
-  "scrollbar-track-current/50",
-  "scrollbar-track-current/55",
-  "scrollbar-track-current/60",
-  "scrollbar-track-current/65",
-  "scrollbar-track-current/70",
-  "scrollbar-track-current/75",
-  "scrollbar-track-current/80",
-  "scrollbar-track-current/85",
-  "scrollbar-track-current/90",
-  "scrollbar-track-current/95",
-  "scrollbar-track-current/100",
-  "scrollbar-track-current/background",
-  "scrollbar-track-inherit",
-  "scrollbar-track-inherit/0",
-  "scrollbar-track-inherit/5",
-  "scrollbar-track-inherit/10",
-  "scrollbar-track-inherit/15",
-  "scrollbar-track-inherit/20",
-  "scrollbar-track-inherit/25",
-  "scrollbar-track-inherit/30",
-  "scrollbar-track-inherit/35",
-  "scrollbar-track-inherit/40",
-  "scrollbar-track-inherit/45",
-  "scrollbar-track-inherit/50",
-  "scrollbar-track-inherit/55",
-  "scrollbar-track-inherit/60",
-  "scrollbar-track-inherit/65",
-  "scrollbar-track-inherit/70",
-  "scrollbar-track-inherit/75",
-  "scrollbar-track-inherit/80",
-  "scrollbar-track-inherit/85",
-  "scrollbar-track-inherit/90",
-  "scrollbar-track-inherit/95",
-  "scrollbar-track-inherit/100",
-  "scrollbar-track-inherit/background",
-  "scrollbar-track-transparent",
-  "scrollbar-track-transparent/0",
-  "scrollbar-track-transparent/5",
-  "scrollbar-track-transparent/10",
-  "scrollbar-track-transparent/15",
-  "scrollbar-track-transparent/20",
-  "scrollbar-track-transparent/25",
-  "scrollbar-track-transparent/30",
-  "scrollbar-track-transparent/35",
-  "scrollbar-track-transparent/40",
-  "scrollbar-track-transparent/45",
-  "scrollbar-track-transparent/50",
-  "scrollbar-track-transparent/55",
-  "scrollbar-track-transparent/60",
-  "scrollbar-track-transparent/65",
-  "scrollbar-track-transparent/70",
-  "scrollbar-track-transparent/75",
-  "scrollbar-track-transparent/80",
-  "scrollbar-track-transparent/85",
-  "scrollbar-track-transparent/90",
-  "scrollbar-track-transparent/95",
-  "scrollbar-track-transparent/100",
-  "scrollbar-track-transparent/background",
   "select-all",
   "select-auto",
   "select-none",
   "select-text",
   "self-auto",
   "self-baseline",
-  "self-baseline-last",
   "self-center",
-  "self-center-safe",
   "self-end",
-  "self-end-safe",
   "self-start",
   "self-stretch",
   "sepia",
   "sepia-0",
-  "sepia-50",
   "sepia-100",
+  "sepia-50",
+  "shadow",
   "shadow-current",
-  "shadow-current/0",
-  "shadow-current/5",
-  "shadow-current/10",
-  "shadow-current/15",
-  "shadow-current/20",
-  "shadow-current/25",
-  "shadow-current/30",
-  "shadow-current/35",
-  "shadow-current/40",
-  "shadow-current/45",
-  "shadow-current/50",
-  "shadow-current/55",
-  "shadow-current/60",
-  "shadow-current/65",
-  "shadow-current/70",
-  "shadow-current/75",
-  "shadow-current/80",
-  "shadow-current/85",
-  "shadow-current/90",
-  "shadow-current/95",
-  "shadow-current/100",
-  "shadow-current/background",
-  "shadow-inherit",
-  "shadow-inherit/0",
-  "shadow-inherit/5",
-  "shadow-inherit/10",
-  "shadow-inherit/15",
-  "shadow-inherit/20",
-  "shadow-inherit/25",
-  "shadow-inherit/30",
-  "shadow-inherit/35",
-  "shadow-inherit/40",
-  "shadow-inherit/45",
-  "shadow-inherit/50",
-  "shadow-inherit/55",
-  "shadow-inherit/60",
-  "shadow-inherit/65",
-  "shadow-inherit/70",
-  "shadow-inherit/75",
-  "shadow-inherit/80",
-  "shadow-inherit/85",
-  "shadow-inherit/90",
-  "shadow-inherit/95",
-  "shadow-inherit/100",
-  "shadow-inherit/background",
-  "shadow-initial",
-  "shadow-none",
   "shadow-transparent",
-  "shadow-transparent/0",
-  "shadow-transparent/5",
-  "shadow-transparent/10",
-  "shadow-transparent/15",
-  "shadow-transparent/20",
-  "shadow-transparent/25",
-  "shadow-transparent/30",
-  "shadow-transparent/35",
-  "shadow-transparent/40",
-  "shadow-transparent/45",
-  "shadow-transparent/50",
-  "shadow-transparent/55",
-  "shadow-transparent/60",
-  "shadow-transparent/65",
-  "shadow-transparent/70",
-  "shadow-transparent/75",
-  "shadow-transparent/80",
-  "shadow-transparent/85",
-  "shadow-transparent/90",
-  "shadow-transparent/95",
-  "shadow-transparent/100",
-  "shadow-transparent/background",
   "shrink",
   "shrink-0",
-  "size-0",
   "size-0.5",
   "size-1",
-  "size-1.5",
-  "size-2",
-  "size-2.5",
   "size-3",
-  "size-3.5",
   "size-4",
-  "size-5",
-  "size-6",
-  "size-7",
-  "size-8",
-  "size-9",
-  "size-10",
-  "size-11",
-  "size-12",
-  "size-14",
-  "size-16",
-  "size-20",
-  "size-24",
-  "size-28",
-  "size-32",
-  "size-36",
-  "size-40",
-  "size-44",
-  "size-48",
-  "size-52",
-  "size-56",
-  "size-60",
-  "size-64",
-  "size-72",
-  "size-80",
-  "size-96",
-  "size-1/2",
-  "size-1/3",
-  "size-1/4",
-  "size-1/5",
-  "size-1/6",
-  "size-1/12",
-  "size-2/3",
-  "size-2/4",
-  "size-2/5",
-  "size-2/6",
-  "size-2/12",
-  "size-3/4",
-  "size-3/5",
-  "size-3/6",
-  "size-3/12",
-  "size-4/5",
-  "size-4/6",
-  "size-4/12",
-  "size-5/6",
-  "size-5/12",
-  "size-6/12",
-  "size-7/12",
-  "size-8/12",
-  "size-9/12",
-  "size-10/12",
-  "size-11/12",
   "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",
   "skew-2",
   "skew-3",
   "skew-6",
-  "skew-12",
   "skew-x-0",
   "skew-x-1",
+  "skew-x-12",
   "skew-x-2",
   "skew-x-3",
   "skew-x-6",
-  "skew-x-12",
   "skew-y-0",
   "skew-y-1",
+  "skew-y-12",
   "skew-y-2",
   "skew-y-3",
   "skew-y-6",
-  "skew-y-12",
   "slashed-zero",
   "snap-align-none",
   "snap-always",
@@ -11491,83 +1487,24 @@ 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-2",
-  "space-x-2.5",
   "space-x-3",
-  "space-x-3.5",
   "space-x-4",
-  "space-x-5",
-  "space-x-6",
-  "space-x-7",
-  "space-x-8",
-  "space-x-9",
-  "space-x-10",
-  "space-x-11",
-  "space-x-12",
-  "space-x-14",
-  "space-x-16",
-  "space-x-20",
-  "space-x-24",
-  "space-x-28",
-  "space-x-32",
-  "space-x-36",
-  "space-x-40",
-  "space-x-44",
-  "space-x-48",
-  "space-x-52",
-  "space-x-56",
-  "space-x-60",
-  "space-x-64",
-  "space-x-72",
-  "space-x-80",
-  "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-2",
-  "space-y-2.5",
   "space-y-3",
-  "space-y-3.5",
   "space-y-4",
-  "space-y-5",
-  "space-y-6",
-  "space-y-7",
-  "space-y-8",
-  "space-y-9",
-  "space-y-10",
-  "space-y-11",
-  "space-y-12",
-  "space-y-14",
-  "space-y-16",
-  "space-y-20",
-  "space-y-24",
-  "space-y-28",
-  "space-y-32",
-  "space-y-36",
-  "space-y-40",
-  "space-y-44",
-  "space-y-48",
-  "space-y-52",
-  "space-y-56",
-  "space-y-60",
-  "space-y-64",
-  "space-y-72",
-  "space-y-80",
-  "space-y-96",
-  "space-y-px",
   "space-y-reverse",
   "sr-only",
   "stacked-fractions",
+  "start-0.5",
+  "start-1",
+  "start-3",
+  "start-4",
   "start-auto",
   "start-full",
-  "start-px",
   "static",
   "sticky",
   "stroke-0",
@@ -11575,79 +1512,9 @@ exports[`getClassList 1`] = `
   "stroke-2",
   "stroke-3",
   "stroke-current",
-  "stroke-current/0",
-  "stroke-current/5",
-  "stroke-current/10",
-  "stroke-current/15",
-  "stroke-current/20",
-  "stroke-current/25",
-  "stroke-current/30",
-  "stroke-current/35",
-  "stroke-current/40",
-  "stroke-current/45",
-  "stroke-current/50",
-  "stroke-current/55",
-  "stroke-current/60",
-  "stroke-current/65",
-  "stroke-current/70",
-  "stroke-current/75",
-  "stroke-current/80",
-  "stroke-current/85",
-  "stroke-current/90",
-  "stroke-current/95",
-  "stroke-current/100",
-  "stroke-current/background",
-  "stroke-inherit",
-  "stroke-inherit/0",
-  "stroke-inherit/5",
-  "stroke-inherit/10",
-  "stroke-inherit/15",
-  "stroke-inherit/20",
-  "stroke-inherit/25",
-  "stroke-inherit/30",
-  "stroke-inherit/35",
-  "stroke-inherit/40",
-  "stroke-inherit/45",
-  "stroke-inherit/50",
-  "stroke-inherit/55",
-  "stroke-inherit/60",
-  "stroke-inherit/65",
-  "stroke-inherit/70",
-  "stroke-inherit/75",
-  "stroke-inherit/80",
-  "stroke-inherit/85",
-  "stroke-inherit/90",
-  "stroke-inherit/95",
-  "stroke-inherit/100",
-  "stroke-inherit/background",
   "stroke-none",
   "stroke-transparent",
-  "stroke-transparent/0",
-  "stroke-transparent/5",
-  "stroke-transparent/10",
-  "stroke-transparent/15",
-  "stroke-transparent/20",
-  "stroke-transparent/25",
-  "stroke-transparent/30",
-  "stroke-transparent/35",
-  "stroke-transparent/40",
-  "stroke-transparent/45",
-  "stroke-transparent/50",
-  "stroke-transparent/55",
-  "stroke-transparent/60",
-  "stroke-transparent/65",
-  "stroke-transparent/70",
-  "stroke-transparent/75",
-  "stroke-transparent/80",
-  "stroke-transparent/85",
-  "stroke-transparent/90",
-  "stroke-transparent/95",
-  "stroke-transparent/100",
-  "stroke-transparent/background",
   "subpixel-antialiased",
-  "tab-2",
-  "tab-4",
-  "tab-8",
   "table",
   "table-auto",
   "table-caption",
@@ -11664,158 +1531,20 @@ exports[`getClassList 1`] = `
   "text-center",
   "text-clip",
   "text-current",
-  "text-current/0",
-  "text-current/5",
-  "text-current/10",
-  "text-current/15",
-  "text-current/20",
-  "text-current/25",
-  "text-current/30",
-  "text-current/35",
-  "text-current/40",
-  "text-current/45",
-  "text-current/50",
-  "text-current/55",
-  "text-current/60",
-  "text-current/65",
-  "text-current/70",
-  "text-current/75",
-  "text-current/80",
-  "text-current/85",
-  "text-current/90",
-  "text-current/95",
-  "text-current/100",
-  "text-current/background",
   "text-ellipsis",
   "text-end",
-  "text-inherit",
-  "text-inherit/0",
-  "text-inherit/5",
-  "text-inherit/10",
-  "text-inherit/15",
-  "text-inherit/20",
-  "text-inherit/25",
-  "text-inherit/30",
-  "text-inherit/35",
-  "text-inherit/40",
-  "text-inherit/45",
-  "text-inherit/50",
-  "text-inherit/55",
-  "text-inherit/60",
-  "text-inherit/65",
-  "text-inherit/70",
-  "text-inherit/75",
-  "text-inherit/80",
-  "text-inherit/85",
-  "text-inherit/90",
-  "text-inherit/95",
-  "text-inherit/100",
-  "text-inherit/background",
   "text-justify",
   "text-left",
   "text-nowrap",
   "text-pretty",
   "text-right",
-  "text-shadow-current",
-  "text-shadow-current/0",
-  "text-shadow-current/5",
-  "text-shadow-current/10",
-  "text-shadow-current/15",
-  "text-shadow-current/20",
-  "text-shadow-current/25",
-  "text-shadow-current/30",
-  "text-shadow-current/35",
-  "text-shadow-current/40",
-  "text-shadow-current/45",
-  "text-shadow-current/50",
-  "text-shadow-current/55",
-  "text-shadow-current/60",
-  "text-shadow-current/65",
-  "text-shadow-current/70",
-  "text-shadow-current/75",
-  "text-shadow-current/80",
-  "text-shadow-current/85",
-  "text-shadow-current/90",
-  "text-shadow-current/95",
-  "text-shadow-current/100",
-  "text-shadow-current/background",
-  "text-shadow-inherit",
-  "text-shadow-inherit/0",
-  "text-shadow-inherit/5",
-  "text-shadow-inherit/10",
-  "text-shadow-inherit/15",
-  "text-shadow-inherit/20",
-  "text-shadow-inherit/25",
-  "text-shadow-inherit/30",
-  "text-shadow-inherit/35",
-  "text-shadow-inherit/40",
-  "text-shadow-inherit/45",
-  "text-shadow-inherit/50",
-  "text-shadow-inherit/55",
-  "text-shadow-inherit/60",
-  "text-shadow-inherit/65",
-  "text-shadow-inherit/70",
-  "text-shadow-inherit/75",
-  "text-shadow-inherit/80",
-  "text-shadow-inherit/85",
-  "text-shadow-inherit/90",
-  "text-shadow-inherit/95",
-  "text-shadow-inherit/100",
-  "text-shadow-inherit/background",
-  "text-shadow-initial",
-  "text-shadow-none",
-  "text-shadow-transparent",
-  "text-shadow-transparent/0",
-  "text-shadow-transparent/5",
-  "text-shadow-transparent/10",
-  "text-shadow-transparent/15",
-  "text-shadow-transparent/20",
-  "text-shadow-transparent/25",
-  "text-shadow-transparent/30",
-  "text-shadow-transparent/35",
-  "text-shadow-transparent/40",
-  "text-shadow-transparent/45",
-  "text-shadow-transparent/50",
-  "text-shadow-transparent/55",
-  "text-shadow-transparent/60",
-  "text-shadow-transparent/65",
-  "text-shadow-transparent/70",
-  "text-shadow-transparent/75",
-  "text-shadow-transparent/80",
-  "text-shadow-transparent/85",
-  "text-shadow-transparent/90",
-  "text-shadow-transparent/95",
-  "text-shadow-transparent/100",
-  "text-shadow-transparent/background",
   "text-start",
   "text-transparent",
-  "text-transparent/0",
-  "text-transparent/5",
-  "text-transparent/10",
-  "text-transparent/15",
-  "text-transparent/20",
-  "text-transparent/25",
-  "text-transparent/30",
-  "text-transparent/35",
-  "text-transparent/40",
-  "text-transparent/45",
-  "text-transparent/50",
-  "text-transparent/55",
-  "text-transparent/60",
-  "text-transparent/65",
-  "text-transparent/70",
-  "text-transparent/75",
-  "text-transparent/80",
-  "text-transparent/85",
-  "text-transparent/90",
-  "text-transparent/95",
-  "text-transparent/100",
-  "text-transparent/background",
   "text-wrap",
   "text-xs",
   "to-0%",
-  "to-5%",
   "to-10%",
+  "to-100%",
   "to-15%",
   "to-20%",
   "to-25%",
@@ -11823,6 +1552,7 @@ exports[`getClassList 1`] = `
   "to-35%",
   "to-40%",
   "to-45%",
+  "to-5%",
   "to-50%",
   "to-55%",
   "to-60%",
@@ -11833,139 +1563,14 @@ exports[`getClassList 1`] = `
   "to-85%",
   "to-90%",
   "to-95%",
-  "to-100%",
   "to-current",
-  "to-current/0",
-  "to-current/5",
-  "to-current/10",
-  "to-current/15",
-  "to-current/20",
-  "to-current/25",
-  "to-current/30",
-  "to-current/35",
-  "to-current/40",
-  "to-current/45",
-  "to-current/50",
-  "to-current/55",
-  "to-current/60",
-  "to-current/65",
-  "to-current/70",
-  "to-current/75",
-  "to-current/80",
-  "to-current/85",
-  "to-current/90",
-  "to-current/95",
-  "to-current/100",
-  "to-current/background",
-  "to-inherit",
-  "to-inherit/0",
-  "to-inherit/5",
-  "to-inherit/10",
-  "to-inherit/15",
-  "to-inherit/20",
-  "to-inherit/25",
-  "to-inherit/30",
-  "to-inherit/35",
-  "to-inherit/40",
-  "to-inherit/45",
-  "to-inherit/50",
-  "to-inherit/55",
-  "to-inherit/60",
-  "to-inherit/65",
-  "to-inherit/70",
-  "to-inherit/75",
-  "to-inherit/80",
-  "to-inherit/85",
-  "to-inherit/90",
-  "to-inherit/95",
-  "to-inherit/100",
-  "to-inherit/background",
   "to-transparent",
-  "to-transparent/0",
-  "to-transparent/5",
-  "to-transparent/10",
-  "to-transparent/15",
-  "to-transparent/20",
-  "to-transparent/25",
-  "to-transparent/30",
-  "to-transparent/35",
-  "to-transparent/40",
-  "to-transparent/45",
-  "to-transparent/50",
-  "to-transparent/55",
-  "to-transparent/60",
-  "to-transparent/65",
-  "to-transparent/70",
-  "to-transparent/75",
-  "to-transparent/80",
-  "to-transparent/85",
-  "to-transparent/90",
-  "to-transparent/95",
-  "to-transparent/100",
-  "to-transparent/background",
-  "top-0",
   "top-0.5",
   "top-1",
-  "top-1.5",
-  "top-2",
-  "top-2.5",
   "top-3",
-  "top-3.5",
   "top-4",
-  "top-5",
-  "top-6",
-  "top-7",
-  "top-8",
-  "top-9",
-  "top-10",
-  "top-11",
-  "top-12",
-  "top-14",
-  "top-16",
-  "top-20",
-  "top-24",
-  "top-28",
-  "top-32",
-  "top-36",
-  "top-40",
-  "top-44",
-  "top-48",
-  "top-52",
-  "top-56",
-  "top-60",
-  "top-64",
-  "top-72",
-  "top-80",
-  "top-96",
-  "top-1/2",
-  "top-1/3",
-  "top-1/4",
-  "top-1/5",
-  "top-1/6",
-  "top-1/12",
-  "top-2/3",
-  "top-2/4",
-  "top-2/5",
-  "top-2/6",
-  "top-2/12",
-  "top-3/4",
-  "top-3/5",
-  "top-3/6",
-  "top-3/12",
-  "top-4/5",
-  "top-4/6",
-  "top-4/12",
-  "top-5/6",
-  "top-5/12",
-  "top-6/12",
-  "top-7/12",
-  "top-8/12",
-  "top-9/12",
-  "top-10/12",
-  "top-11/12",
   "top-auto",
   "top-full",
-  "top-px",
   "touch-auto",
   "touch-manipulation",
   "touch-none",
@@ -11977,248 +1582,31 @@ exports[`getClassList 1`] = `
   "touch-pan-y",
   "touch-pinch-zoom",
   "transform",
-  "transform-3d",
-  "transform-border",
-  "transform-content",
   "transform-cpu",
-  "transform-fill",
-  "transform-flat",
   "transform-gpu",
   "transform-none",
-  "transform-stroke",
-  "transform-view",
   "transition",
   "transition-all",
   "transition-colors",
-  "transition-discrete",
   "transition-none",
-  "transition-normal",
   "transition-opacity",
   "transition-shadow",
   "transition-transform",
-  "translate-0",
   "translate-0.5",
   "translate-1",
-  "translate-1.5",
-  "translate-2",
-  "translate-2.5",
   "translate-3",
-  "translate-3.5",
-  "translate-3d",
   "translate-4",
-  "translate-5",
-  "translate-6",
-  "translate-7",
-  "translate-8",
-  "translate-9",
-  "translate-10",
-  "translate-11",
-  "translate-12",
-  "translate-14",
-  "translate-16",
-  "translate-20",
-  "translate-24",
-  "translate-28",
-  "translate-32",
-  "translate-36",
-  "translate-40",
-  "translate-44",
-  "translate-48",
-  "translate-52",
-  "translate-56",
-  "translate-60",
-  "translate-64",
-  "translate-72",
-  "translate-80",
-  "translate-96",
-  "translate-1/2",
-  "translate-1/3",
-  "translate-1/4",
-  "translate-1/5",
-  "translate-1/6",
-  "translate-1/12",
-  "translate-2/3",
-  "translate-2/4",
-  "translate-2/5",
-  "translate-2/6",
-  "translate-2/12",
-  "translate-3/4",
-  "translate-3/5",
-  "translate-3/6",
-  "translate-3/12",
-  "translate-4/5",
-  "translate-4/6",
-  "translate-4/12",
-  "translate-5/6",
-  "translate-5/12",
-  "translate-6/12",
-  "translate-7/12",
-  "translate-8/12",
-  "translate-9/12",
-  "translate-10/12",
-  "translate-11/12",
   "translate-full",
-  "translate-none",
-  "translate-px",
-  "translate-x-0",
   "translate-x-0.5",
   "translate-x-1",
-  "translate-x-1.5",
-  "translate-x-2",
-  "translate-x-2.5",
   "translate-x-3",
-  "translate-x-3.5",
   "translate-x-4",
-  "translate-x-5",
-  "translate-x-6",
-  "translate-x-7",
-  "translate-x-8",
-  "translate-x-9",
-  "translate-x-10",
-  "translate-x-11",
-  "translate-x-12",
-  "translate-x-14",
-  "translate-x-16",
-  "translate-x-20",
-  "translate-x-24",
-  "translate-x-28",
-  "translate-x-32",
-  "translate-x-36",
-  "translate-x-40",
-  "translate-x-44",
-  "translate-x-48",
-  "translate-x-52",
-  "translate-x-56",
-  "translate-x-60",
-  "translate-x-64",
-  "translate-x-72",
-  "translate-x-80",
-  "translate-x-96",
-  "translate-x-1/2",
-  "translate-x-1/3",
-  "translate-x-1/4",
-  "translate-x-1/5",
-  "translate-x-1/6",
-  "translate-x-1/12",
-  "translate-x-2/3",
-  "translate-x-2/4",
-  "translate-x-2/5",
-  "translate-x-2/6",
-  "translate-x-2/12",
-  "translate-x-3/4",
-  "translate-x-3/5",
-  "translate-x-3/6",
-  "translate-x-3/12",
-  "translate-x-4/5",
-  "translate-x-4/6",
-  "translate-x-4/12",
-  "translate-x-5/6",
-  "translate-x-5/12",
-  "translate-x-6/12",
-  "translate-x-7/12",
-  "translate-x-8/12",
-  "translate-x-9/12",
-  "translate-x-10/12",
-  "translate-x-11/12",
   "translate-x-full",
-  "translate-x-px",
-  "translate-y-0",
   "translate-y-0.5",
   "translate-y-1",
-  "translate-y-1.5",
-  "translate-y-2",
-  "translate-y-2.5",
   "translate-y-3",
-  "translate-y-3.5",
   "translate-y-4",
-  "translate-y-5",
-  "translate-y-6",
-  "translate-y-7",
-  "translate-y-8",
-  "translate-y-9",
-  "translate-y-10",
-  "translate-y-11",
-  "translate-y-12",
-  "translate-y-14",
-  "translate-y-16",
-  "translate-y-20",
-  "translate-y-24",
-  "translate-y-28",
-  "translate-y-32",
-  "translate-y-36",
-  "translate-y-40",
-  "translate-y-44",
-  "translate-y-48",
-  "translate-y-52",
-  "translate-y-56",
-  "translate-y-60",
-  "translate-y-64",
-  "translate-y-72",
-  "translate-y-80",
-  "translate-y-96",
-  "translate-y-1/2",
-  "translate-y-1/3",
-  "translate-y-1/4",
-  "translate-y-1/5",
-  "translate-y-1/6",
-  "translate-y-1/12",
-  "translate-y-2/3",
-  "translate-y-2/4",
-  "translate-y-2/5",
-  "translate-y-2/6",
-  "translate-y-2/12",
-  "translate-y-3/4",
-  "translate-y-3/5",
-  "translate-y-3/6",
-  "translate-y-3/12",
-  "translate-y-4/5",
-  "translate-y-4/6",
-  "translate-y-4/12",
-  "translate-y-5/6",
-  "translate-y-5/12",
-  "translate-y-6/12",
-  "translate-y-7/12",
-  "translate-y-8/12",
-  "translate-y-9/12",
-  "translate-y-10/12",
-  "translate-y-11/12",
   "translate-y-full",
-  "translate-y-px",
-  "translate-z-0",
-  "translate-z-0.5",
-  "translate-z-1",
-  "translate-z-1.5",
-  "translate-z-2",
-  "translate-z-2.5",
-  "translate-z-3",
-  "translate-z-3.5",
-  "translate-z-4",
-  "translate-z-5",
-  "translate-z-6",
-  "translate-z-7",
-  "translate-z-8",
-  "translate-z-9",
-  "translate-z-10",
-  "translate-z-11",
-  "translate-z-12",
-  "translate-z-14",
-  "translate-z-16",
-  "translate-z-20",
-  "translate-z-24",
-  "translate-z-28",
-  "translate-z-32",
-  "translate-z-36",
-  "translate-z-40",
-  "translate-z-44",
-  "translate-z-48",
-  "translate-z-52",
-  "translate-z-56",
-  "translate-z-60",
-  "translate-z-64",
-  "translate-z-72",
-  "translate-z-80",
-  "translate-z-96",
-  "translate-z-px",
   "truncate",
   "underline",
   "underline-offset-0",
@@ -12229,8 +1617,8 @@ exports[`getClassList 1`] = `
   "underline-offset-auto",
   "uppercase",
   "via-0%",
-  "via-5%",
   "via-10%",
+  "via-100%",
   "via-15%",
   "via-20%",
   "via-25%",
@@ -12238,6 +1626,7 @@ exports[`getClassList 1`] = `
   "via-35%",
   "via-40%",
   "via-45%",
+  "via-5%",
   "via-50%",
   "via-55%",
   "via-60%",
@@ -12248,152 +1637,23 @@ exports[`getClassList 1`] = `
   "via-85%",
   "via-90%",
   "via-95%",
-  "via-100%",
   "via-current",
-  "via-current/0",
-  "via-current/5",
-  "via-current/10",
-  "via-current/15",
-  "via-current/20",
-  "via-current/25",
-  "via-current/30",
-  "via-current/35",
-  "via-current/40",
-  "via-current/45",
-  "via-current/50",
-  "via-current/55",
-  "via-current/60",
-  "via-current/65",
-  "via-current/70",
-  "via-current/75",
-  "via-current/80",
-  "via-current/85",
-  "via-current/90",
-  "via-current/95",
-  "via-current/100",
-  "via-current/background",
-  "via-inherit",
-  "via-inherit/0",
-  "via-inherit/5",
-  "via-inherit/10",
-  "via-inherit/15",
-  "via-inherit/20",
-  "via-inherit/25",
-  "via-inherit/30",
-  "via-inherit/35",
-  "via-inherit/40",
-  "via-inherit/45",
-  "via-inherit/50",
-  "via-inherit/55",
-  "via-inherit/60",
-  "via-inherit/65",
-  "via-inherit/70",
-  "via-inherit/75",
-  "via-inherit/80",
-  "via-inherit/85",
-  "via-inherit/90",
-  "via-inherit/95",
-  "via-inherit/100",
-  "via-inherit/background",
   "via-none",
   "via-transparent",
-  "via-transparent/0",
-  "via-transparent/5",
-  "via-transparent/10",
-  "via-transparent/15",
-  "via-transparent/20",
-  "via-transparent/25",
-  "via-transparent/30",
-  "via-transparent/35",
-  "via-transparent/40",
-  "via-transparent/45",
-  "via-transparent/50",
-  "via-transparent/55",
-  "via-transparent/60",
-  "via-transparent/65",
-  "via-transparent/70",
-  "via-transparent/75",
-  "via-transparent/80",
-  "via-transparent/85",
-  "via-transparent/90",
-  "via-transparent/95",
-  "via-transparent/100",
-  "via-transparent/background",
   "visible",
-  "w-0",
   "w-0.5",
   "w-1",
-  "w-1.5",
-  "w-2",
-  "w-2.5",
   "w-3",
-  "w-3.5",
   "w-4",
-  "w-5",
-  "w-6",
-  "w-7",
-  "w-8",
-  "w-9",
-  "w-10",
-  "w-11",
-  "w-12",
-  "w-14",
-  "w-16",
-  "w-20",
-  "w-24",
-  "w-28",
-  "w-32",
-  "w-36",
-  "w-40",
-  "w-44",
-  "w-48",
-  "w-52",
-  "w-56",
-  "w-60",
-  "w-64",
-  "w-72",
-  "w-80",
-  "w-96",
+  "w-4",
   "w-auto",
-  "w-dvh",
   "w-dvw",
   "w-fit",
   "w-full",
-  "w-lg",
-  "w-lvh",
   "w-lvw",
   "w-max",
-  "w-md",
-  "w-1/2",
-  "w-1/3",
-  "w-1/4",
-  "w-1/5",
-  "w-1/6",
-  "w-1/12",
-  "w-2/3",
-  "w-2/4",
-  "w-2/5",
-  "w-2/6",
-  "w-2/12",
-  "w-3/4",
-  "w-3/5",
-  "w-3/6",
-  "w-3/12",
-  "w-4/5",
-  "w-4/6",
-  "w-4/12",
-  "w-5/6",
-  "w-5/12",
-  "w-6/12",
-  "w-7/12",
-  "w-8/12",
-  "w-9/12",
-  "w-10/12",
-  "w-11/12",
   "w-min",
-  "w-px",
   "w-screen",
-  "w-svh",
   "w-svw",
   "whitespace-break-spaces",
   "whitespace-normal",
@@ -12405,9 +1665,6 @@ exports[`getClassList 1`] = `
   "will-change-contents",
   "will-change-scroll",
   "will-change-transform",
-  "wrap-anywhere",
-  "wrap-break-word",
-  "wrap-normal",
   "z-0",
   "z-10",
   "z-20",
@@ -12415,21 +1672,18 @@ exports[`getClassList 1`] = `
   "z-40",
   "z-50",
   "z-auto",
-  "zoom-50",
-  "zoom-75",
-  "zoom-90",
-  "zoom-95",
-  "zoom-100",
-  "zoom-105",
-  "zoom-110",
-  "zoom-125",
-  "zoom-150",
-  "zoom-200",
 ]
 `;
 
 exports[`getVariants 1`] = `
 [
+  {
+    "hasDash": true,
+    "isArbitrary": false,
+    "name": "force",
+    "selectors": [Function],
+    "values": [],
+  },
   {
     "hasDash": true,
     "isArbitrary": false,
@@ -12437,91 +1691,12 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "**",
-    "selectors": [Function],
-    "values": [],
-  },
   {
     "hasDash": true,
     "isArbitrary": true,
     "name": "not",
     "selectors": [Function],
-    "values": [
-      "not",
-      "group",
-      "peer",
-      "first",
-      "last",
-      "only",
-      "odd",
-      "even",
-      "first-of-type",
-      "last-of-type",
-      "only-of-type",
-      "visited",
-      "target",
-      "open",
-      "default",
-      "checked",
-      "indeterminate",
-      "placeholder-shown",
-      "autofill",
-      "optional",
-      "required",
-      "valid",
-      "invalid",
-      "user-valid",
-      "user-invalid",
-      "in-range",
-      "out-of-range",
-      "read-only",
-      "empty",
-      "focus-within",
-      "hover",
-      "focus",
-      "focus-visible",
-      "active",
-      "enabled",
-      "disabled",
-      "inert",
-      "in",
-      "has",
-      "aria",
-      "data",
-      "nth",
-      "nth-last",
-      "nth-of-type",
-      "nth-last-of-type",
-      "supports",
-      "motion-safe",
-      "motion-reduce",
-      "contrast-more",
-      "contrast-less",
-      "max",
-      "sm",
-      "min",
-      "@max",
-      "@",
-      "@min",
-      "portrait",
-      "landscape",
-      "ltr",
-      "rtl",
-      "dark",
-      "print",
-      "forced-colors",
-      "inverted-colors",
-      "pointer-none",
-      "pointer-coarse",
-      "pointer-fine",
-      "any-pointer-none",
-      "any-pointer-coarse",
-      "any-pointer-fine",
-      "noscript",
-    ],
+    "values": [],
   },
   {
     "hasDash": true,
@@ -12552,8 +1727,6 @@ exports[`getVariants 1`] = `
       "required",
       "valid",
       "invalid",
-      "user-valid",
-      "user-invalid",
       "in-range",
       "out-of-range",
       "read-only",
@@ -12565,15 +1738,9 @@ exports[`getVariants 1`] = `
       "active",
       "enabled",
       "disabled",
-      "inert",
-      "in",
       "has",
       "aria",
       "data",
-      "nth",
-      "nth-last",
-      "nth-of-type",
-      "nth-last-of-type",
       "ltr",
       "rtl",
     ],
@@ -12607,8 +1774,6 @@ exports[`getVariants 1`] = `
       "required",
       "valid",
       "invalid",
-      "user-valid",
-      "user-invalid",
       "in-range",
       "out-of-range",
       "read-only",
@@ -12620,15 +1785,9 @@ exports[`getVariants 1`] = `
       "active",
       "enabled",
       "disabled",
-      "inert",
-      "in",
       "has",
       "aria",
       "data",
-      "nth",
-      "nth-last",
-      "nth-of-type",
-      "nth-last-of-type",
       "ltr",
       "rtl",
     ],
@@ -12682,13 +1841,6 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "details-content",
-    "selectors": [Function],
-    "values": [],
-  },
   {
     "hasDash": true,
     "isArbitrary": false,
@@ -12843,20 +1995,6 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "user-valid",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "user-invalid",
-    "selectors": [Function],
-    "values": [],
-  },
   {
     "hasDash": true,
     "isArbitrary": false,
@@ -12934,68 +2072,6 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "inert",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": true,
-    "name": "in",
-    "selectors": [Function],
-    "values": [
-      "not",
-      "group",
-      "peer",
-      "first",
-      "last",
-      "only",
-      "odd",
-      "even",
-      "first-of-type",
-      "last-of-type",
-      "only-of-type",
-      "visited",
-      "target",
-      "open",
-      "default",
-      "checked",
-      "indeterminate",
-      "placeholder-shown",
-      "autofill",
-      "optional",
-      "required",
-      "valid",
-      "invalid",
-      "user-valid",
-      "user-invalid",
-      "in-range",
-      "out-of-range",
-      "read-only",
-      "empty",
-      "focus-within",
-      "hover",
-      "focus",
-      "focus-visible",
-      "active",
-      "enabled",
-      "disabled",
-      "inert",
-      "in",
-      "has",
-      "aria",
-      "data",
-      "nth",
-      "nth-last",
-      "nth-of-type",
-      "nth-last-of-type",
-      "ltr",
-      "rtl",
-    ],
-  },
   {
     "hasDash": true,
     "isArbitrary": true,
@@ -13025,8 +2101,6 @@ exports[`getVariants 1`] = `
       "required",
       "valid",
       "invalid",
-      "user-valid",
-      "user-invalid",
       "in-range",
       "out-of-range",
       "read-only",
@@ -13038,15 +2112,9 @@ exports[`getVariants 1`] = `
       "active",
       "enabled",
       "disabled",
-      "inert",
-      "in",
       "has",
       "aria",
       "data",
-      "nth",
-      "nth-last",
-      "nth-of-type",
-      "nth-last-of-type",
       "ltr",
       "rtl",
     ],
@@ -13075,34 +2143,6 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
-  {
-    "hasDash": true,
-    "isArbitrary": true,
-    "name": "nth",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": true,
-    "name": "nth-last",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": true,
-    "name": "nth-of-type",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": true,
-    "name": "nth-last-of-type",
-    "selectors": [Function],
-    "values": [],
-  },
   {
     "hasDash": true,
     "isArbitrary": true,
@@ -13169,19 +2209,15 @@ exports[`getVariants 1`] = `
     "name": "@max",
     "selectors": [Function],
     "values": [
-      "md",
-      "lg",
+      "4",
     ],
   },
   {
-    "hasDash": false,
+    "hasDash": true,
     "isArbitrary": true,
     "name": "@",
     "selectors": [Function],
-    "values": [
-      "md",
-      "lg",
-    ],
+    "values": [],
   },
   {
     "hasDash": true,
@@ -13189,8 +2225,7 @@ exports[`getVariants 1`] = `
     "name": "@min",
     "selectors": [Function],
     "values": [
-      "md",
-      "lg",
+      "4",
     ],
   },
   {
@@ -13228,13 +2263,6 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "starting",
-    "selectors": [Function],
-    "values": [],
-  },
   {
     "hasDash": true,
     "isArbitrary": false,
@@ -13249,61 +2277,5 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "inverted-colors",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "pointer-none",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "pointer-coarse",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "pointer-fine",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "any-pointer-none",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "any-pointer-coarse",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "any-pointer-fine",
-    "selectors": [Function],
-    "values": [],
-  },
-  {
-    "hasDash": true,
-    "isArbitrary": false,
-    "name": "noscript",
-    "selectors": [Function],
-    "values": [],
-  },
 ]
 `;
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 43e8fdf6f..1ec464f18 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -1,18 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`border-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border {
@@ -25,6 +18,11 @@ exports[`border-* 1`] = `
   border-width: 0;
 }
 
+.border-123 {
+  border-style: var(--tw-border-style);
+  border-width: 123px;
+}
+
 .border-2 {
   border-style: var(--tw-border-style);
   border-width: 2px;
@@ -35,32 +33,12 @@ exports[`border-* 1`] = `
   border-width: 4px;
 }
 
-.border-123 {
-  border-style: var(--tw-border-style);
-  border-width: 123px;
-}
-
-.border-\\[0_1\\] {
-  border-style: var(--tw-border-style);
-  border-width: 0 1px;
-}
-
-.border-\\[0_2px_0_2px\\] {
-  border-style: var(--tw-border-style);
-  border-width: 0 2px;
-}
-
 .border-\\[12px\\] {
   border-style: var(--tw-border-style);
   border-width: 12px;
 }
 
-.border-\\[12px_8px\\] {
-  border-style: var(--tw-border-style);
-  border-width: 12px 8px;
-}
-
-.border-\\[length\\:var\\(--my-width\\)\\], .border-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-\\[length\\:--my-width\\], .border-\\[line-width\\:--my-width\\] {
   border-style: var(--tw-border-style);
   border-width: var(--my-width);
 }
@@ -80,99 +58,44 @@ exports[`border-* 1`] = `
   border-width: thin;
 }
 
-.border-\\[thin_2px\\] {
-  border-style: var(--tw-border-style);
-  border-width: thin 2px;
-}
-
 .border-\\[\\#0088cc\\] {
   border-color: #08c;
 }
 
 .border-\\[\\#0088cc\\]\\/50 {
-  border-color: oklab(59.9824% -.067 -.124 / .5);
+  border-color: #0088cc80;
 }
 
-.border-\\[color\\:var\\(--my-color\\)\\], .border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-\\[--my-color\\] {
   border-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-\\[--my-color\\]\\/50 {
+  border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-\\[var\\(--my-color\\)\\], .border-\\[var\\(--my-color\\)\\]\\/50 {
+.border-\\[color\\:--my-color\\] {
   border-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-\\[var\\(--my-color\\)\\]\\/50 {
-    border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-\\[color\\:--my-color\\]\\/50 {
+  border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-blue-500 {
-  border-color: var(--border-color-blue-500);
-}
-
-.border-current, .border-current\\/50 {
+.border-current {
   border-color: currentColor;
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-current\\/50 {
-    border-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-inherit {
-  border-color: inherit;
+.border-current\\/50 {
+  border-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-red-500 {
-  border-color: var(--color-red-500);
-}
-
-.border-red-500\\/2\\.5 {
-  border-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-red-500\\/2\\.5 {
-    border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-red-500\\/2\\.25 {
-  border-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-red-500\\/2\\.25 {
-    border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-red-500\\/2\\.75 {
-  border-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-red-500\\/2\\.75 {
-    border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-color: var(--color-red-500, #ef4444);
 }
 
 .border-red-500\\/50 {
-  border-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-red-500\\/50 {
-    border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-transparent {
@@ -180,26 +103,18 @@ exports[`border-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
+}"
 `;
 
 exports[`border-b-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border-b {
@@ -212,6 +127,11 @@ exports[`border-b-* 1`] = `
   border-bottom-width: 0;
 }
 
+.border-b-123 {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 123px;
+}
+
 .border-b-2 {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 2px;
@@ -222,32 +142,12 @@ exports[`border-b-* 1`] = `
   border-bottom-width: 4px;
 }
 
-.border-b-123 {
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 123px;
-}
-
-.border-b-\\[0_1\\] {
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 0 1;
-}
-
-.border-b-\\[0_2px_0_2px\\] {
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 0 2px 0 2px;
-}
-
 .border-b-\\[12px\\] {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 12px;
 }
 
-.border-b-\\[12px_8px\\] {
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 12px 8px;
-}
-
-.border-b-\\[length\\:var\\(--my-width\\)\\], .border-b-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-b-\\[length\\:--my-width\\], .border-b-\\[line-width\\:--my-width\\] {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: var(--my-width);
 }
@@ -267,99 +167,44 @@ exports[`border-b-* 1`] = `
   border-bottom-width: thin;
 }
 
-.border-b-\\[thin_2px\\] {
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: thin 2px;
-}
-
 .border-b-\\[\\#0088cc\\] {
   border-bottom-color: #08c;
 }
 
 .border-b-\\[\\#0088cc\\]\\/50 {
-  border-bottom-color: oklab(59.9824% -.067 -.124 / .5);
+  border-bottom-color: #0088cc80;
 }
 
-.border-b-\\[color\\:var\\(--my-color\\)\\], .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-b-\\[--my-color\\] {
   border-bottom-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-b-\\[--my-color\\]\\/50 {
+  border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-b-\\[var\\(--my-color\\)\\], .border-b-\\[var\\(--my-color\\)\\]\\/50 {
+.border-b-\\[color\\:--my-color\\] {
   border-bottom-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-b-\\[var\\(--my-color\\)\\]\\/50 {
-    border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-b-\\[color\\:--my-color\\]\\/50 {
+  border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-b-blue-500 {
-  border-bottom-color: var(--border-color-blue-500);
-}
-
-.border-b-current, .border-b-current\\/50 {
+.border-b-current {
   border-bottom-color: currentColor;
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-b-current\\/50 {
-    border-bottom-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-b-inherit {
-  border-bottom-color: inherit;
+.border-b-current\\/50 {
+  border-bottom-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-b-red-500 {
-  border-bottom-color: var(--color-red-500);
-}
-
-.border-b-red-500\\/2\\.5 {
-  border-bottom-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-b-red-500\\/2\\.5 {
-    border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-b-red-500\\/2\\.25 {
-  border-bottom-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-b-red-500\\/2\\.25 {
-    border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-b-red-500\\/2\\.75 {
-  border-bottom-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-b-red-500\\/2\\.75 {
-    border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-bottom-color: var(--color-red-500, #ef4444);
 }
 
 .border-b-red-500\\/50 {
-  border-bottom-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-b-red-500\\/50 {
-    border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-b-transparent {
@@ -367,400 +212,18 @@ exports[`border-b-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
-`;
-
-exports[`border-be-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
-  --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
-}
-
-.border-be {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 1px;
-}
-
-.border-be-0 {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 0;
-}
-
-.border-be-2 {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 2px;
-}
-
-.border-be-4 {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 4px;
-}
-
-.border-be-123 {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 123px;
-}
-
-.border-be-\\[0_1\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 0 1;
-}
-
-.border-be-\\[0_2px_0_2px\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 0 2px 0 2px;
-}
-
-.border-be-\\[12px\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 12px;
-}
-
-.border-be-\\[12px_8px\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: 12px 8px;
-}
-
-.border-be-\\[length\\:var\\(--my-width\\)\\], .border-be-\\[line-width\\:var\\(--my-width\\)\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: var(--my-width);
-}
-
-.border-be-\\[medium\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: medium;
-}
-
-.border-be-\\[thick\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: thick;
-}
-
-.border-be-\\[thin\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: thin;
-}
-
-.border-be-\\[thin_2px\\] {
-  border-block-end-style: var(--tw-border-style);
-  border-block-end-width: thin 2px;
-}
-
-.border-be-\\[\\#0088cc\\] {
-  border-block-end-color: #08c;
-}
-
-.border-be-\\[\\#0088cc\\]\\/50 {
-  border-block-end-color: oklab(59.9824% -.067 -.124 / .5);
-}
-
-.border-be-\\[color\\:var\\(--my-color\\)\\], .border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-block-end-color: var(--my-color);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-be-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-block-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
-}
-
-.border-be-\\[var\\(--my-color\\)\\], .border-be-\\[var\\(--my-color\\)\\]\\/50 {
-  border-block-end-color: var(--my-color);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-be-\\[var\\(--my-color\\)\\]\\/50 {
-    border-block-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
-}
-
-.border-be-blue-500 {
-  border-block-end-color: var(--border-color-blue-500);
-}
-
-.border-be-current, .border-be-current\\/50 {
-  border-block-end-color: currentColor;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-be-current\\/50 {
-    border-block-end-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-be-inherit {
-  border-block-end-color: inherit;
-}
-
-.border-be-red-500 {
-  border-block-end-color: var(--color-red-500);
-}
-
-.border-be-red-500\\/2\\.5 {
-  border-block-end-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-be-red-500\\/2\\.5 {
-    border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-be-red-500\\/2\\.25 {
-  border-block-end-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-be-red-500\\/2\\.25 {
-    border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-be-red-500\\/2\\.75 {
-  border-block-end-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-be-red-500\\/2\\.75 {
-    border-block-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
-}
-
-.border-be-red-500\\/50 {
-  border-block-end-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-be-red-500\\/50 {
-    border-block-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
-}
-
-.border-be-transparent {
-  border-block-end-color: #0000;
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-"
-`;
-
-exports[`border-bs-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
-  --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
-}
-
-.border-bs {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 1px;
-}
-
-.border-bs-0 {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 0;
-}
-
-.border-bs-2 {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 2px;
-}
-
-.border-bs-4 {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 4px;
-}
-
-.border-bs-123 {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 123px;
-}
-
-.border-bs-\\[0_1\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 0 1;
-}
-
-.border-bs-\\[0_2px_0_2px\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 0 2px 0 2px;
-}
-
-.border-bs-\\[12px\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 12px;
-}
-
-.border-bs-\\[12px_8px\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: 12px 8px;
-}
-
-.border-bs-\\[length\\:var\\(--my-width\\)\\], .border-bs-\\[line-width\\:var\\(--my-width\\)\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: var(--my-width);
-}
-
-.border-bs-\\[medium\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: medium;
-}
-
-.border-bs-\\[thick\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: thick;
-}
-
-.border-bs-\\[thin\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: thin;
-}
-
-.border-bs-\\[thin_2px\\] {
-  border-block-start-style: var(--tw-border-style);
-  border-block-start-width: thin 2px;
-}
-
-.border-bs-\\[\\#0088cc\\] {
-  border-block-start-color: #08c;
-}
-
-.border-bs-\\[\\#0088cc\\]\\/50 {
-  border-block-start-color: oklab(59.9824% -.067 -.124 / .5);
-}
-
-.border-bs-\\[color\\:var\\(--my-color\\)\\], .border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-block-start-color: var(--my-color);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-bs-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-block-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
-}
-
-.border-bs-\\[var\\(--my-color\\)\\], .border-bs-\\[var\\(--my-color\\)\\]\\/50 {
-  border-block-start-color: var(--my-color);
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-bs-\\[var\\(--my-color\\)\\]\\/50 {
-    border-block-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
-}
-
-.border-bs-blue-500 {
-  border-block-start-color: var(--border-color-blue-500);
-}
-
-.border-bs-current, .border-bs-current\\/50 {
-  border-block-start-color: currentColor;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-bs-current\\/50 {
-    border-block-start-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-bs-inherit {
-  border-block-start-color: inherit;
-}
-
-.border-bs-red-500 {
-  border-block-start-color: var(--color-red-500);
-}
-
-.border-bs-red-500\\/2\\.5 {
-  border-block-start-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-bs-red-500\\/2\\.5 {
-    border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-bs-red-500\\/2\\.25 {
-  border-block-start-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-bs-red-500\\/2\\.25 {
-    border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-bs-red-500\\/2\\.75 {
-  border-block-start-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-bs-red-500\\/2\\.75 {
-    border-block-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
-}
-
-.border-bs-red-500\\/50 {
-  border-block-start-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-bs-red-500\\/50 {
-    border-block-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
-}
-
-.border-bs-transparent {
-  border-block-start-color: #0000;
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-"
+}"
 `;
 
 exports[`border-e-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border-e {
@@ -773,6 +236,11 @@ exports[`border-e-* 1`] = `
   border-inline-end-width: 0;
 }
 
+.border-e-123 {
+  border-inline-end-style: var(--tw-border-style);
+  border-inline-end-width: 123px;
+}
+
 .border-e-2 {
   border-inline-end-style: var(--tw-border-style);
   border-inline-end-width: 2px;
@@ -783,32 +251,12 @@ exports[`border-e-* 1`] = `
   border-inline-end-width: 4px;
 }
 
-.border-e-123 {
-  border-inline-end-style: var(--tw-border-style);
-  border-inline-end-width: 123px;
-}
-
-.border-e-\\[0_1\\] {
-  border-inline-end-style: var(--tw-border-style);
-  border-inline-end-width: 0 1;
-}
-
-.border-e-\\[0_2px_0_2px\\] {
-  border-inline-end-style: var(--tw-border-style);
-  border-inline-end-width: 0 2px 0 2px;
-}
-
 .border-e-\\[12px\\] {
   border-inline-end-style: var(--tw-border-style);
   border-inline-end-width: 12px;
 }
 
-.border-e-\\[12px_8px\\] {
-  border-inline-end-style: var(--tw-border-style);
-  border-inline-end-width: 12px 8px;
-}
-
-.border-e-\\[length\\:var\\(--my-width\\)\\], .border-e-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-e-\\[length\\:--my-width\\], .border-e-\\[line-width\\:--my-width\\] {
   border-inline-end-style: var(--tw-border-style);
   border-inline-end-width: var(--my-width);
 }
@@ -828,99 +276,44 @@ exports[`border-e-* 1`] = `
   border-inline-end-width: thin;
 }
 
-.border-e-\\[thin_2px\\] {
-  border-inline-end-style: var(--tw-border-style);
-  border-inline-end-width: thin 2px;
-}
-
 .border-e-\\[\\#0088cc\\] {
   border-inline-end-color: #08c;
 }
 
 .border-e-\\[\\#0088cc\\]\\/50 {
-  border-inline-end-color: oklab(59.9824% -.067 -.124 / .5);
+  border-inline-end-color: #0088cc80;
 }
 
-.border-e-\\[color\\:var\\(--my-color\\)\\], .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-e-\\[--my-color\\] {
   border-inline-end-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-e-\\[--my-color\\]\\/50 {
+  border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-e-\\[var\\(--my-color\\)\\], .border-e-\\[var\\(--my-color\\)\\]\\/50 {
+.border-e-\\[color\\:--my-color\\] {
   border-inline-end-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-e-\\[var\\(--my-color\\)\\]\\/50 {
-    border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-e-\\[color\\:--my-color\\]\\/50 {
+  border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-e-blue-500 {
-  border-inline-end-color: var(--border-color-blue-500);
-}
-
-.border-e-current, .border-e-current\\/50 {
+.border-e-current {
   border-inline-end-color: currentColor;
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-e-current\\/50 {
-    border-inline-end-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-e-inherit {
-  border-inline-end-color: inherit;
+.border-e-current\\/50 {
+  border-inline-end-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-e-red-500 {
-  border-inline-end-color: var(--color-red-500);
-}
-
-.border-e-red-500\\/2\\.5 {
-  border-inline-end-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-e-red-500\\/2\\.5 {
-    border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-e-red-500\\/2\\.25 {
-  border-inline-end-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-e-red-500\\/2\\.25 {
-    border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-e-red-500\\/2\\.75 {
-  border-inline-end-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-e-red-500\\/2\\.75 {
-    border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-inline-end-color: var(--color-red-500, #ef4444);
 }
 
 .border-e-red-500\\/50 {
-  border-inline-end-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-e-red-500\\/50 {
-    border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-inline-end-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-e-transparent {
@@ -928,26 +321,18 @@ exports[`border-e-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
+}"
 `;
 
 exports[`border-l-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border-l {
@@ -960,6 +345,11 @@ exports[`border-l-* 1`] = `
   border-left-width: 0;
 }
 
+.border-l-123 {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 123px;
+}
+
 .border-l-2 {
   border-left-style: var(--tw-border-style);
   border-left-width: 2px;
@@ -970,32 +360,12 @@ exports[`border-l-* 1`] = `
   border-left-width: 4px;
 }
 
-.border-l-123 {
-  border-left-style: var(--tw-border-style);
-  border-left-width: 123px;
-}
-
-.border-l-\\[0_1\\] {
-  border-left-style: var(--tw-border-style);
-  border-left-width: 0 1;
-}
-
-.border-l-\\[0_2px_0_2px\\] {
-  border-left-style: var(--tw-border-style);
-  border-left-width: 0 2px 0 2px;
-}
-
 .border-l-\\[12px\\] {
   border-left-style: var(--tw-border-style);
   border-left-width: 12px;
 }
 
-.border-l-\\[12px_8px\\] {
-  border-left-style: var(--tw-border-style);
-  border-left-width: 12px 8px;
-}
-
-.border-l-\\[length\\:var\\(--my-width\\)\\], .border-l-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-l-\\[length\\:--my-width\\], .border-l-\\[line-width\\:--my-width\\] {
   border-left-style: var(--tw-border-style);
   border-left-width: var(--my-width);
 }
@@ -1015,99 +385,44 @@ exports[`border-l-* 1`] = `
   border-left-width: thin;
 }
 
-.border-l-\\[thin_2px\\] {
-  border-left-style: var(--tw-border-style);
-  border-left-width: thin 2px;
-}
-
 .border-l-\\[\\#0088cc\\] {
   border-left-color: #08c;
 }
 
 .border-l-\\[\\#0088cc\\]\\/50 {
-  border-left-color: oklab(59.9824% -.067 -.124 / .5);
+  border-left-color: #0088cc80;
 }
 
-.border-l-\\[color\\:var\\(--my-color\\)\\], .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-l-\\[--my-color\\] {
   border-left-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-l-\\[--my-color\\]\\/50 {
+  border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-l-\\[var\\(--my-color\\)\\], .border-l-\\[var\\(--my-color\\)\\]\\/50 {
+.border-l-\\[color\\:--my-color\\] {
   border-left-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-l-\\[var\\(--my-color\\)\\]\\/50 {
-    border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-l-\\[color\\:--my-color\\]\\/50 {
+  border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-l-blue-500 {
-  border-left-color: var(--border-color-blue-500);
-}
-
-.border-l-current, .border-l-current\\/50 {
+.border-l-current {
   border-left-color: currentColor;
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-l-current\\/50 {
-    border-left-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-l-inherit {
-  border-left-color: inherit;
+.border-l-current\\/50 {
+  border-left-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-l-red-500 {
-  border-left-color: var(--color-red-500);
-}
-
-.border-l-red-500\\/2\\.5 {
-  border-left-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-l-red-500\\/2\\.5 {
-    border-left-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-l-red-500\\/2\\.25 {
-  border-left-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-l-red-500\\/2\\.25 {
-    border-left-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-l-red-500\\/2\\.75 {
-  border-left-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-l-red-500\\/2\\.75 {
-    border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-left-color: var(--color-red-500, #ef4444);
 }
 
 .border-l-red-500\\/50 {
-  border-left-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-l-red-500\\/50 {
-    border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-l-transparent {
@@ -1115,26 +430,18 @@ exports[`border-l-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
+}"
 `;
 
 exports[`border-r-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border-r {
@@ -1147,6 +454,11 @@ exports[`border-r-* 1`] = `
   border-right-width: 0;
 }
 
+.border-r-123 {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 123px;
+}
+
 .border-r-2 {
   border-right-style: var(--tw-border-style);
   border-right-width: 2px;
@@ -1157,32 +469,12 @@ exports[`border-r-* 1`] = `
   border-right-width: 4px;
 }
 
-.border-r-123 {
-  border-right-style: var(--tw-border-style);
-  border-right-width: 123px;
-}
-
-.border-r-\\[0_1\\] {
-  border-right-style: var(--tw-border-style);
-  border-right-width: 0 1;
-}
-
-.border-r-\\[0_2px_0_2px\\] {
-  border-right-style: var(--tw-border-style);
-  border-right-width: 0 2px 0 2px;
-}
-
 .border-r-\\[12px\\] {
   border-right-style: var(--tw-border-style);
   border-right-width: 12px;
 }
 
-.border-r-\\[12px_8px\\] {
-  border-right-style: var(--tw-border-style);
-  border-right-width: 12px 8px;
-}
-
-.border-r-\\[length\\:var\\(--my-width\\)\\], .border-r-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-r-\\[length\\:--my-width\\], .border-r-\\[line-width\\:--my-width\\] {
   border-right-style: var(--tw-border-style);
   border-right-width: var(--my-width);
 }
@@ -1202,99 +494,44 @@ exports[`border-r-* 1`] = `
   border-right-width: thin;
 }
 
-.border-r-\\[thin_2px\\] {
-  border-right-style: var(--tw-border-style);
-  border-right-width: thin 2px;
-}
-
 .border-r-\\[\\#0088cc\\] {
   border-right-color: #08c;
 }
 
 .border-r-\\[\\#0088cc\\]\\/50 {
-  border-right-color: oklab(59.9824% -.067 -.124 / .5);
+  border-right-color: #0088cc80;
 }
 
-.border-r-\\[color\\:var\\(--my-color\\)\\], .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-r-\\[--my-color\\] {
   border-right-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-r-\\[--my-color\\]\\/50 {
+  border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-r-\\[var\\(--my-color\\)\\], .border-r-\\[var\\(--my-color\\)\\]\\/50 {
+.border-r-\\[color\\:--my-color\\] {
   border-right-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-r-\\[var\\(--my-color\\)\\]\\/50 {
-    border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-r-\\[color\\:--my-color\\]\\/50 {
+  border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-r-blue-500 {
-  border-right-color: var(--border-color-blue-500);
-}
-
-.border-r-current, .border-r-current\\/50 {
+.border-r-current {
   border-right-color: currentColor;
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-r-current\\/50 {
-    border-right-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-r-inherit {
-  border-right-color: inherit;
+.border-r-current\\/50 {
+  border-right-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-r-red-500 {
-  border-right-color: var(--color-red-500);
-}
-
-.border-r-red-500\\/2\\.5 {
-  border-right-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-r-red-500\\/2\\.5 {
-    border-right-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-r-red-500\\/2\\.25 {
-  border-right-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-r-red-500\\/2\\.25 {
-    border-right-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-r-red-500\\/2\\.75 {
-  border-right-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-r-red-500\\/2\\.75 {
-    border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-right-color: var(--color-red-500, #ef4444);
 }
 
 .border-r-red-500\\/50 {
-  border-right-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-r-red-500\\/50 {
-    border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-r-transparent {
@@ -1302,26 +539,18 @@ exports[`border-r-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
+}"
 `;
 
 exports[`border-s-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border-s {
@@ -1334,6 +563,11 @@ exports[`border-s-* 1`] = `
   border-inline-start-width: 0;
 }
 
+.border-s-123 {
+  border-inline-start-style: var(--tw-border-style);
+  border-inline-start-width: 123px;
+}
+
 .border-s-2 {
   border-inline-start-style: var(--tw-border-style);
   border-inline-start-width: 2px;
@@ -1344,32 +578,12 @@ exports[`border-s-* 1`] = `
   border-inline-start-width: 4px;
 }
 
-.border-s-123 {
-  border-inline-start-style: var(--tw-border-style);
-  border-inline-start-width: 123px;
-}
-
-.border-s-\\[0_1\\] {
-  border-inline-start-style: var(--tw-border-style);
-  border-inline-start-width: 0 1;
-}
-
-.border-s-\\[0_2px_0_2px\\] {
-  border-inline-start-style: var(--tw-border-style);
-  border-inline-start-width: 0 2px 0 2px;
-}
-
 .border-s-\\[12px\\] {
   border-inline-start-style: var(--tw-border-style);
   border-inline-start-width: 12px;
 }
 
-.border-s-\\[12px_8px\\] {
-  border-inline-start-style: var(--tw-border-style);
-  border-inline-start-width: 12px 8px;
-}
-
-.border-s-\\[length\\:var\\(--my-width\\)\\], .border-s-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-s-\\[length\\:--my-width\\], .border-s-\\[line-width\\:--my-width\\] {
   border-inline-start-style: var(--tw-border-style);
   border-inline-start-width: var(--my-width);
 }
@@ -1389,99 +603,44 @@ exports[`border-s-* 1`] = `
   border-inline-start-width: thin;
 }
 
-.border-s-\\[thin_2px\\] {
-  border-inline-start-style: var(--tw-border-style);
-  border-inline-start-width: thin 2px;
-}
-
 .border-s-\\[\\#0088cc\\] {
   border-inline-start-color: #08c;
 }
 
 .border-s-\\[\\#0088cc\\]\\/50 {
-  border-inline-start-color: oklab(59.9824% -.067 -.124 / .5);
+  border-inline-start-color: #0088cc80;
 }
 
-.border-s-\\[color\\:var\\(--my-color\\)\\], .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-s-\\[--my-color\\] {
   border-inline-start-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-s-\\[--my-color\\]\\/50 {
+  border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-s-\\[var\\(--my-color\\)\\], .border-s-\\[var\\(--my-color\\)\\]\\/50 {
+.border-s-\\[color\\:--my-color\\] {
   border-inline-start-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-s-\\[var\\(--my-color\\)\\]\\/50 {
-    border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-s-\\[color\\:--my-color\\]\\/50 {
+  border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-s-blue-500 {
-  border-inline-start-color: var(--border-color-blue-500);
-}
-
-.border-s-current, .border-s-current\\/50 {
+.border-s-current {
   border-inline-start-color: currentColor;
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-s-current\\/50 {
-    border-inline-start-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-s-inherit {
-  border-inline-start-color: inherit;
+.border-s-current\\/50 {
+  border-inline-start-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-s-red-500 {
-  border-inline-start-color: var(--color-red-500);
-}
-
-.border-s-red-500\\/2\\.5 {
-  border-inline-start-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-s-red-500\\/2\\.5 {
-    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-s-red-500\\/2\\.25 {
-  border-inline-start-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-s-red-500\\/2\\.25 {
-    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-s-red-500\\/2\\.75 {
-  border-inline-start-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-s-red-500\\/2\\.75 {
-    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-inline-start-color: var(--color-red-500, #ef4444);
 }
 
 .border-s-red-500\\/50 {
-  border-inline-start-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-s-red-500\\/50 {
-    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-inline-start-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-s-transparent {
@@ -1489,26 +648,18 @@ exports[`border-s-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
+}"
 `;
 
 exports[`border-t-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border-t {
@@ -1521,6 +672,11 @@ exports[`border-t-* 1`] = `
   border-top-width: 0;
 }
 
+.border-t-123 {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 123px;
+}
+
 .border-t-2 {
   border-top-style: var(--tw-border-style);
   border-top-width: 2px;
@@ -1531,32 +687,12 @@ exports[`border-t-* 1`] = `
   border-top-width: 4px;
 }
 
-.border-t-123 {
-  border-top-style: var(--tw-border-style);
-  border-top-width: 123px;
-}
-
-.border-t-\\[0_1\\] {
-  border-top-style: var(--tw-border-style);
-  border-top-width: 0 1;
-}
-
-.border-t-\\[0_2px_0_2px\\] {
-  border-top-style: var(--tw-border-style);
-  border-top-width: 0 2px 0 2px;
-}
-
 .border-t-\\[12px\\] {
   border-top-style: var(--tw-border-style);
   border-top-width: 12px;
 }
 
-.border-t-\\[12px_8px\\] {
-  border-top-style: var(--tw-border-style);
-  border-top-width: 12px 8px;
-}
-
-.border-t-\\[length\\:var\\(--my-width\\)\\], .border-t-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-t-\\[length\\:--my-width\\], .border-t-\\[line-width\\:--my-width\\] {
   border-top-style: var(--tw-border-style);
   border-top-width: var(--my-width);
 }
@@ -1576,99 +712,44 @@ exports[`border-t-* 1`] = `
   border-top-width: thin;
 }
 
-.border-t-\\[thin_2px\\] {
-  border-top-style: var(--tw-border-style);
-  border-top-width: thin 2px;
-}
-
 .border-t-\\[\\#0088cc\\] {
   border-top-color: #08c;
 }
 
 .border-t-\\[\\#0088cc\\]\\/50 {
-  border-top-color: oklab(59.9824% -.067 -.124 / .5);
+  border-top-color: #0088cc80;
 }
 
-.border-t-\\[color\\:var\\(--my-color\\)\\], .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-t-\\[--my-color\\] {
   border-top-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-t-\\[--my-color\\]\\/50 {
+  border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-t-\\[var\\(--my-color\\)\\], .border-t-\\[var\\(--my-color\\)\\]\\/50 {
+.border-t-\\[color\\:--my-color\\] {
   border-top-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-t-\\[var\\(--my-color\\)\\]\\/50 {
-    border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-t-\\[color\\:--my-color\\]\\/50 {
+  border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-t-blue-500 {
-  border-top-color: var(--border-color-blue-500);
-}
-
-.border-t-current, .border-t-current\\/50 {
+.border-t-current {
   border-top-color: currentColor;
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-t-current\\/50 {
-    border-top-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-t-inherit {
-  border-top-color: inherit;
+.border-t-current\\/50 {
+  border-top-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-t-red-500 {
-  border-top-color: var(--color-red-500);
-}
-
-.border-t-red-500\\/2\\.5 {
-  border-top-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-t-red-500\\/2\\.5 {
-    border-top-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-t-red-500\\/2\\.25 {
-  border-top-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-t-red-500\\/2\\.25 {
-    border-top-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-t-red-500\\/2\\.75 {
-  border-top-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-t-red-500\\/2\\.75 {
-    border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-top-color: var(--color-red-500, #ef4444);
 }
 
 .border-t-red-500\\/50 {
-  border-top-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-t-red-500\\/50 {
-    border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-t-transparent {
@@ -1676,383 +757,288 @@ exports[`border-t-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
+}"
 `;
 
 exports[`border-x-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border-x {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 1px;
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: 1px;
+  border-right-width: 1px;
 }
 
 .border-x-0 {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 0;
-}
-
-.border-x-2 {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 2px;
-}
-
-.border-x-4 {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 4px;
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: 0;
+  border-right-width: 0;
 }
 
 .border-x-123 {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 123px;
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: 123px;
+  border-right-width: 123px;
 }
 
-.border-x-\\[0_1\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 0 1px;
+.border-x-2 {
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: 2px;
+  border-right-width: 2px;
 }
 
-.border-x-\\[0_2px_0_2px\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 0 2px 0 2px;
+.border-x-4 {
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: 4px;
+  border-right-width: 4px;
 }
 
 .border-x-\\[12px\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 12px;
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: 12px;
+  border-right-width: 12px;
 }
 
-.border-x-\\[12px_8px\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: 12px 8px;
-}
-
-.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: var(--my-width);
+.border-x-\\[length\\:--my-width\\], .border-x-\\[line-width\\:--my-width\\] {
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: var(--my-width);
+  border-right-width: var(--my-width);
 }
 
 .border-x-\\[medium\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: medium;
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: medium;
+  border-right-width: medium;
 }
 
 .border-x-\\[thick\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: thick;
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: thick;
+  border-right-width: thick;
 }
 
 .border-x-\\[thin\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: thin;
-}
-
-.border-x-\\[thin_2px\\] {
-  border-inline-style: var(--tw-border-style);
-  border-inline-width: thin 2px;
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: thin;
+  border-right-width: thin;
 }
 
 .border-x-\\[\\#0088cc\\] {
-  border-inline-color: #08c;
+  border-left-color: #08c;
+  border-right-color: #08c;
 }
 
 .border-x-\\[\\#0088cc\\]\\/50 {
-  border-inline-color: oklab(59.9824% -.067 -.124 / .5);
+  border-left-color: #0088cc80;
+  border-right-color: #0088cc80;
 }
 
-.border-x-\\[color\\:var\\(--my-color\\)\\], .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-color: var(--my-color);
+.border-x-\\[--my-color\\] {
+  border-left-color: var(--my-color);
+  border-right-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-x-\\[--my-color\\]\\/50 {
+  border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-x-\\[var\\(--my-color\\)\\], .border-x-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-color: var(--my-color);
+.border-x-\\[color\\:--my-color\\] {
+  border-left-color: var(--my-color);
+  border-right-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-x-\\[var\\(--my-color\\)\\]\\/50 {
-    border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-x-\\[color\\:--my-color\\]\\/50 {
+  border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-x-blue-500 {
-  border-inline-color: var(--border-color-blue-500);
+.border-x-current {
+  border-left-color: currentColor;
+  border-right-color: currentColor;
 }
 
-.border-x-current, .border-x-current\\/50 {
-  border-inline-color: currentColor;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-x-current\\/50 {
-    border-inline-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-x-inherit {
-  border-inline-color: inherit;
+.border-x-current\\/50 {
+  border-left-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-right-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-x-red-500 {
-  border-inline-color: var(--color-red-500);
-}
-
-.border-x-red-500\\/2\\.5 {
-  border-inline-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-x-red-500\\/2\\.5 {
-    border-inline-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-x-red-500\\/2\\.25 {
-  border-inline-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-x-red-500\\/2\\.25 {
-    border-inline-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-x-red-500\\/2\\.75 {
-  border-inline-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-x-red-500\\/2\\.75 {
-    border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-left-color: var(--color-red-500, #ef4444);
+  border-right-color: var(--color-red-500, #ef4444);
 }
 
 .border-x-red-500\\/50 {
-  border-inline-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-x-red-500\\/50 {
-    border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-x-transparent {
-  border-inline-color: #0000;
+  border-left-color: #0000;
+  border-right-color: #0000;
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
+}"
 `;
 
 exports[`border-y-* 1`] = `
-"
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-:root, :host {
+":root {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
-  --border-color-blue-500: #3b82f6;
 }
 
 .border-y {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 1px;
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: 1px;
+  border-bottom-width: 1px;
 }
 
 .border-y-0 {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 0;
-}
-
-.border-y-2 {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 2px;
-}
-
-.border-y-4 {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 4px;
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: 0;
+  border-bottom-width: 0;
 }
 
 .border-y-123 {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 123px;
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: 123px;
+  border-bottom-width: 123px;
 }
 
-.border-y-\\[0_1\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 0 1px;
+.border-y-2 {
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: 2px;
+  border-bottom-width: 2px;
 }
 
-.border-y-\\[0_2px_0_2px\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 0 2px 0 2px;
+.border-y-4 {
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: 4px;
+  border-bottom-width: 4px;
 }
 
 .border-y-\\[12px\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 12px;
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: 12px;
+  border-bottom-width: 12px;
 }
 
-.border-y-\\[12px_8px\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: 12px 8px;
-}
-
-.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: var(--my-width);
+.border-y-\\[length\\:--my-width\\], .border-y-\\[line-width\\:--my-width\\] {
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: var(--my-width);
+  border-bottom-width: var(--my-width);
 }
 
 .border-y-\\[medium\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: medium;
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: medium;
+  border-bottom-width: medium;
 }
 
 .border-y-\\[thick\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: thick;
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: thick;
+  border-bottom-width: thick;
 }
 
 .border-y-\\[thin\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: thin;
-}
-
-.border-y-\\[thin_2px\\] {
-  border-block-style: var(--tw-border-style);
-  border-block-width: thin 2px;
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: thin;
+  border-bottom-width: thin;
 }
 
 .border-y-\\[\\#0088cc\\] {
-  border-block-color: #08c;
+  border-top-color: #08c;
+  border-bottom-color: #08c;
 }
 
 .border-y-\\[\\#0088cc\\]\\/50 {
-  border-block-color: oklab(59.9824% -.067 -.124 / .5);
+  border-top-color: #0088cc80;
+  border-bottom-color: #0088cc80;
 }
 
-.border-y-\\[color\\:var\\(--my-color\\)\\], .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-block-color: var(--my-color);
+.border-y-\\[--my-color\\] {
+  border-top-color: var(--my-color);
+  border-bottom-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-    border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-y-\\[--my-color\\]\\/50 {
+  border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-y-\\[var\\(--my-color\\)\\], .border-y-\\[var\\(--my-color\\)\\]\\/50 {
-  border-block-color: var(--my-color);
+.border-y-\\[color\\:--my-color\\] {
+  border-top-color: var(--my-color);
+  border-bottom-color: var(--my-color);
 }
 
-@supports (color: color-mix(in lab, red, red)) {
-  .border-y-\\[var\\(--my-color\\)\\]\\/50 {
-    border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-  }
+.border-y-\\[color\\:--my-color\\]\\/50 {
+  border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-y-blue-500 {
-  border-block-color: var(--border-color-blue-500);
+.border-y-current {
+  border-top-color: currentColor;
+  border-bottom-color: currentColor;
 }
 
-.border-y-current, .border-y-current\\/50 {
-  border-block-color: currentColor;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-y-current\\/50 {
-    border-block-color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-.border-y-inherit {
-  border-block-color: inherit;
+.border-y-current\\/50 {
+  border-top-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-bottom-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 .border-y-red-500 {
-  border-block-color: var(--color-red-500);
-}
-
-.border-y-red-500\\/2\\.5 {
-  border-block-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-y-red-500\\/2\\.5 {
-    border-block-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-  }
-}
-
-.border-y-red-500\\/2\\.25 {
-  border-block-color: #ef444406;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-y-red-500\\/2\\.25 {
-    border-block-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-  }
-}
-
-.border-y-red-500\\/2\\.75 {
-  border-block-color: #ef444407;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-y-red-500\\/2\\.75 {
-    border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-  }
+  border-top-color: var(--color-red-500, #ef4444);
+  border-bottom-color: var(--color-red-500, #ef4444);
 }
 
 .border-y-red-500\\/50 {
-  border-block-color: #ef444480;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .border-y-red-500\\/50 {
-    border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-  }
+  border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-y-transparent {
-  border-block-color: #0000;
+  border-top-color: #0000;
+  border-bottom-color: #0000;
 }
 
 @property --tw-border-style {
-  syntax: "*";
+  syntax: "<custom-ident>";
   inherits: false;
   initial-value: solid;
-}
-"
+}"
 `;
diff --git a/packages/tailwindcss/src/apply.ts b/packages/tailwindcss/src/apply.ts
deleted file mode 100644
index 2d5e5b847..000000000
--- a/packages/tailwindcss/src/apply.ts
+++ /dev/null
@@ -1,363 +0,0 @@
-import { Features } from '.'
-import { cloneAstNode, rule, toCss, type AstNode } from './ast'
-import { compileCandidates } from './compile'
-import type { DesignSystem } from './design-system'
-import type { SourceLocation } from './source-maps/source'
-import { DefaultMap } from './utils/default-map'
-import { segment } from './utils/segment'
-import { walk, WalkAction } from './walk'
-
-export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
-  let features = Features.None
-
-  // Wrap the whole AST in a root rule to make sure there is always a parent
-  // available for `@apply` at-rules. In some cases, the incoming `ast` just
-  // contains `@apply` at-rules which means that there is no proper parent to
-  // rely on.
-  let root = rule('&', ast)
-
-  // Track all nodes containing `@apply`
-  let parents = new Set<AstNode>()
-
-  // Track all the dependencies of an `AstNode`
-  let dependencies = new DefaultMap<AstNode, Set<string>>(() => new Set<string>())
-
-  // Track all `@utility` definitions by its root (name)
-  let definitions = new DefaultMap(() => new Set<AstNode>())
-
-  // Collect all new `@utility` definitions and all `@apply` rules first
-  walk([root], (node, ctx) => {
-    if (node.kind !== 'at-rule') return
-
-    // Do not allow `@apply` rules inside `@keyframes` rules.
-    if (node.name === '@keyframes') {
-      walk(node.nodes, (child) => {
-        if (child.kind === 'at-rule' && child.name === '@apply') {
-          throw new Error(`You cannot use \`@apply\` inside \`@keyframes\`.`)
-        }
-      })
-      return WalkAction.Skip
-    }
-
-    // `@utility` defines a utility, which is important information in order to
-    // do a correct topological sort later on.
-    if (node.name === '@utility') {
-      let name = node.params.replace(/-\*$/, '')
-      definitions.get(name).add(node)
-
-      // In case `@apply` rules are used inside `@utility` rules.
-      walk(node.nodes, (child) => {
-        if (child.kind !== 'at-rule' || child.name !== '@apply') return
-
-        parents.add(node)
-
-        for (let dependency of resolveApplyDependencies(child, designSystem)) {
-          dependencies.get(node).add(dependency)
-        }
-      })
-      return
-    }
-
-    // Any other `@apply` node.
-    if (node.name === '@apply') {
-      // `@apply` cannot be top-level, so we need to have a parent such that we
-      // can replace the `@apply` node with the actual utility classes later.
-      if (ctx.parent === null) return
-
-      features |= Features.AtApply
-
-      parents.add(ctx.parent)
-
-      for (let dependency of resolveApplyDependencies(node, designSystem)) {
-        // Mark every parent in the path as having a dependency to that utility.
-        for (let parent of ctx.path()) {
-          if (!parents.has(parent)) continue
-          dependencies.get(parent).add(dependency)
-        }
-      }
-    }
-  })
-
-  // Topological sort before substituting `@apply`
-  let seen = new Set<AstNode>()
-  let sorted: AstNode[] = []
-  let wip = new Set<AstNode>()
-
-  function visit(node: AstNode, path: AstNode[] = []) {
-    if (seen.has(node)) {
-      return
-    }
-
-    // Circular dependency detected
-    if (wip.has(node)) {
-      // Next node in the path is the one that caused the circular dependency
-      let next = path[(path.indexOf(node) + 1) % path.length]
-
-      if (
-        node.kind === 'at-rule' &&
-        node.name === '@utility' &&
-        next.kind === 'at-rule' &&
-        next.name === '@utility'
-      ) {
-        walk(node.nodes, (child) => {
-          if (child.kind !== 'at-rule' || child.name !== '@apply') return
-
-          let candidates = child.params.split(/\s+/g)
-          for (let candidate of candidates) {
-            for (let candidateAstNode of designSystem.parseCandidate(candidate)) {
-              switch (candidateAstNode.kind) {
-                case 'arbitrary':
-                  break
-
-                case 'static':
-                case 'functional':
-                  if (next.params.replace(/-\*$/, '') === candidateAstNode.root) {
-                    throw new Error(
-                      `You cannot \`@apply\` the \`${candidate}\` utility here because it creates a circular dependency.`,
-                    )
-                  }
-                  break
-
-                default:
-                  candidateAstNode satisfies never
-              }
-            }
-          }
-        })
-      }
-
-      // Generic fallback error in case we cannot properly detect the origin of
-      // the circular dependency.
-      throw new Error(
-        `Circular dependency detected:\n\n${toCss([node])}\nRelies on:\n\n${toCss([next])}`,
-      )
-    }
-
-    wip.add(node)
-
-    for (let dependencyId of dependencies.get(node)) {
-      for (let dependency of definitions.get(dependencyId)) {
-        path.push(node)
-        visit(dependency, path)
-        path.pop()
-      }
-    }
-
-    seen.add(node)
-    wip.delete(node)
-
-    sorted.push(node)
-  }
-
-  for (let node of parents) {
-    visit(node)
-  }
-
-  // Substitute the `@apply` at-rules in order. Note that the list is going to
-  // be flattened so we do not have to recursively walk over child rules
-  for (let parent of sorted) {
-    if (!('nodes' in parent)) continue
-
-    walk(parent.nodes, (child) => {
-      if (child.kind !== 'at-rule' || child.name !== '@apply') return
-
-      let parts = child.params.split(/(\s+)/g)
-      let candidateOffsets: Record<string, number> = {}
-      let normalIdents: string[] = []
-      let dashedIdents: string[] = []
-
-      let offset = 0
-      for (let [idx, part] of parts.entries()) {
-        if (idx % 2 === 0) {
-          if (part[0] === '-' && part[1] === '-') {
-            dashedIdents.push(part)
-          } else {
-            normalIdents.push(part)
-          }
-
-          candidateOffsets[part] = offset
-        }
-
-        offset += part.length
-      }
-
-      if (dashedIdents.length) {
-        // If we have an `@apply` that only consists of dashed idents then the
-        // user is intending to use a CSS mixin:
-        // https://drafts.csswg.org/css-mixins-1/#apply-rule
-        //
-        // These are not considered utilities and need to be emitted literally.
-        if (normalIdents.length === 0) return WalkAction.Skip
-
-        // If we find a dashed ident *here* it means that someone is trying
-        // to use mixins and our `@apply` behavior together.
-        //
-        // This is invalid and the rules must be written separately. Let the
-        // user know they need to move them into a separate rule.
-        let list = dashedIdents.join(' ')
-
-        throw new Error(
-          `You cannot use \`@apply\` with both mixins and utilities. Please move \`@apply ${list}\` into a separate rule.`,
-        )
-      }
-
-      let hasBody = child.nodes.length > 0
-
-      if (hasBody && normalIdents.length) {
-        let list = normalIdents.join(' ')
-
-        throw new Error(`The rule \`@apply ${list}\` must not have a body.`)
-      }
-
-      // Replace the `@apply` rule with the actual utility classes
-      {
-        // Parse the candidates to an AST that we can replace the `@apply` rule
-        // with.
-        let candidates = Object.keys(candidateOffsets)
-        let compiled = compileCandidates(candidates, designSystem, {
-          respectImportant: false,
-          onInvalidCandidate: (candidate) => {
-            // When using prefix, make sure prefix is used in candidate
-            if (designSystem.theme.prefix && !candidate.startsWith(designSystem.theme.prefix)) {
-              throw new Error(
-                `Cannot apply unprefixed utility class \`${candidate}\`. Did you mean \`${designSystem.theme.prefix}:${candidate}\`?`,
-              )
-            }
-
-            // When the utility is blocklisted, let the user know
-            //
-            // Note: `@apply` is processed before handling incoming classes from
-            // template files. This means that the `invalidCandidates` set will
-            // only contain explicit classes via:
-            //
-            // - `blocklist` from a JS config
-            // - `@source not inline(…)`
-            if (designSystem.invalidCandidates.has(candidate)) {
-              throw new Error(
-                `Cannot apply utility class \`${candidate}\` because it has been explicitly disabled: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-excluding-classes`,
-              )
-            }
-
-            // Verify if variants exist
-            let parts = segment(candidate, ':')
-            if (parts.length > 1) {
-              let utility = parts.pop()!
-
-              // Ensure utility on its own compiles, if not, we will fallback to
-              // the next error
-              if (designSystem.candidatesToCss([utility])[0]) {
-                let compiledVariants = designSystem.candidatesToCss(
-                  parts.map((variant) => `${variant}:[--tw-variant-check:1]`),
-                )
-                let unknownVariants = parts.filter((_, idx) => compiledVariants[idx] === null)
-                if (unknownVariants.length > 0) {
-                  if (unknownVariants.length === 1) {
-                    throw new Error(
-                      `Cannot apply utility class \`${candidate}\` because the ${unknownVariants.map((variant) => `\`${variant}\``)} variant does not exist.`,
-                    )
-                  } else {
-                    let formatter = new Intl.ListFormat('en', {
-                      style: 'long',
-                      type: 'conjunction',
-                    })
-                    throw new Error(
-                      `Cannot apply utility class \`${candidate}\` because the ${formatter.format(unknownVariants.map((variant) => `\`${variant}\``))} variants do not exist.`,
-                    )
-                  }
-                }
-              }
-            }
-
-            // When the theme is empty, it means that no theme was loaded and
-            // `@import "tailwindcss"`, `@reference "app.css"` or similar is
-            // very likely missing.
-            if (designSystem.theme.size === 0) {
-              throw new Error(
-                `Cannot apply unknown utility class \`${candidate}\`. Are you using CSS modules or similar and missing \`@reference\`? https://tailwindcss.com/docs/functions-and-directives#reference-directive`,
-              )
-            }
-
-            // Fallback to most generic error message
-            throw new Error(`Cannot apply unknown utility class \`${candidate}\``)
-          },
-        })
-
-        let src = child.src
-
-        let candidateAst = compiled.astNodes.map((node) => {
-          let candidate = compiled.nodeSorting.get(node)?.candidate
-          let candidateOffset = candidate ? candidateOffsets[candidate] : undefined
-
-          node = cloneAstNode(node)
-
-          if (!src || !candidate || candidateOffset === undefined) {
-            // While the original nodes may have come from an `@utility` we still
-            // want to replace the source because the `@apply` is ultimately the
-            // reason the node was emitted into the AST.
-            walk([node], (node) => {
-              node.src = src
-            })
-
-            return node
-          }
-
-          let candidateSrc: SourceLocation = [src[0], src[1], src[2]]
-
-          candidateSrc[1] += 7 /* '@apply '.length */ + candidateOffset
-          candidateSrc[2] = candidateSrc[1] + candidate.length
-
-          // While the original nodes may have come from an `@utility` we still
-          // want to replace the source because the `@apply` is ultimately the
-          // reason the node was emitted into the AST.
-          walk([node], (node) => {
-            node.src = candidateSrc
-          })
-
-          return node
-        })
-
-        // Collect the nodes to insert in place of the `@apply` rule. When a rule
-        // was used, we want to insert its children instead of the rule because we
-        // don't want the wrapping selector.
-        let newNodes: AstNode[] = []
-        for (let candidateNode of candidateAst) {
-          if (candidateNode.kind === 'rule') {
-            for (let child of candidateNode.nodes) {
-              newNodes.push(child)
-            }
-          } else {
-            newNodes.push(candidateNode)
-          }
-        }
-
-        return WalkAction.Replace(newNodes)
-      }
-    })
-  }
-
-  return features
-}
-
-function* resolveApplyDependencies(
-  node: Extract<AstNode, { kind: 'at-rule' }>,
-  designSystem: DesignSystem,
-) {
-  for (let candidate of node.params.split(/\s+/g)) {
-    for (let node of designSystem.parseCandidate(candidate)) {
-      switch (node.kind) {
-        case 'arbitrary':
-          // Doesn't matter, because there is no lookup needed
-          break
-
-        case 'static':
-        case 'functional':
-          // Lookup by "root"
-          yield node.root
-          break
-
-        default:
-          node satisfies never
-      }
-    }
-  }
-}
diff --git a/packages/tailwindcss/src/ast.bench.ts b/packages/tailwindcss/src/ast.bench.ts
deleted file mode 100644
index 034faee27..000000000
--- a/packages/tailwindcss/src/ast.bench.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { bench, describe } from 'vitest'
-import { cloneAstNode, toCss, type AstNode } from './ast'
-import * as CSS from './css-parser'
-
-const css = String.raw
-const input = css`
-  @theme {
-    --color-primary: #333;
-  }
-  @tailwind utilities;
-  .foo {
-    color: red;
-    /* comment */
-    &:hover {
-      color: blue;
-      @apply font-bold;
-    }
-  }
-`
-const ast = CSS.parse(input)
-
-describe('AST to CSS', () => {
-  bench('toCss', () => {
-    toCss(ast)
-  })
-
-  bench('toCss with source maps', () => {
-    toCss(ast, true)
-  })
-})
-
-describe('Cloning AST nodes', () => {
-  bench('cloneAstNode()', () => {
-    ast.map(cloneAstNode)
-  })
-
-  bench('cloneAstNode (with spread)', () => {
-    ast.map(cloneAstNodeSpread)
-  })
-
-  bench('structuredClone()', () => {
-    structuredClone(ast)
-  })
-})
-
-function cloneAstNodeSpread<T extends AstNode>(node: T): T {
-  switch (node.kind) {
-    case 'rule':
-    case 'at-rule':
-    case 'at-root':
-      return { ...node, nodes: node.nodes.map(cloneAstNodeSpread) }
-
-    case 'context':
-      return { ...node, context: { ...node.context }, nodes: node.nodes.map(cloneAstNodeSpread) }
-
-    case 'declaration':
-    case 'comment':
-      return { ...node }
-
-    default:
-      node satisfies never
-      throw new Error(`Unknown node kind: ${(node as any).kind}`)
-  }
-}
diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts
index 14092c9f5..da0b19204 100644
--- a/packages/tailwindcss/src/ast.test.ts
+++ b/packages/tailwindcss/src/ast.test.ts
@@ -1,28 +1,10 @@
-import { describe, expect, it, test } from 'vitest'
-import {
-  context,
-  cssContext,
-  decl,
-  handleNesting,
-  optimizeAst,
-  rule,
-  styleRule,
-  toCss,
-  type AstNode,
-} from './ast'
+import { expect, it } from 'vitest'
+import { toCss } from './ast'
 import * as CSS from './css-parser'
-import { buildDesignSystem } from './design-system'
-import { pretty } from './test-utils/run'
-import { Theme } from './theme'
-import { walk, WalkAction } from './walk'
-
-const css = String.raw
-const defaultDesignSystem = buildDesignSystem(new Theme())
 
 it('should pretty print an AST', () => {
-  expect(pretty(toCss(CSS.parse('.foo{color:red;&:hover{color:blue;}}')))).toMatchInlineSnapshot(`
-    "
-    .foo {
+  expect(toCss(CSS.parse('.foo{color:red;&:hover{color:blue;}}'))).toMatchInlineSnapshot(`
+    ".foo {
       color: red;
       &:hover {
         color: blue;
@@ -31,1634 +13,3 @@ it('should pretty print an AST', () => {
     "
   `)
 })
-
-it('allows the placement of context nodes', () => {
-  let ast: AstNode[] = [
-    styleRule('.foo', [decl('color', 'red')]),
-    context({ context: 'a' }, [
-      styleRule('.bar', [
-        decl('color', 'blue'),
-        context({ context: 'b' }, [
-          //
-          styleRule('.baz', [decl('color', 'green')]),
-        ]),
-      ]),
-    ]),
-  ]
-
-  let redContext
-  let blueContext
-  let greenContext
-
-  walk(ast, (node, _ctx) => {
-    if (node.kind !== 'declaration') return
-    let ctx = cssContext(_ctx)
-    switch (node.value) {
-      case 'red':
-        redContext = ctx.context
-        break
-      case 'blue':
-        blueContext = ctx.context
-        break
-      case 'green':
-        greenContext = ctx.context
-        break
-    }
-  })
-
-  expect(redContext).toEqual({})
-  expect(blueContext).toEqual({ context: 'a' })
-  expect(greenContext).toEqual({ context: 'b' })
-
-  expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(`
-    "
-    .foo {
-      color: red;
-    }
-    .bar {
-      color: blue;
-      .baz {
-        color: green;
-      }
-    }
-    "
-  `)
-})
-
-it('should not emit empty rules once optimized', () => {
-  let ast = CSS.parse(css`
-    /* Empty rule */
-    .foo {
-    }
-
-    /* Empty rule, with nesting */
-    .foo {
-      .bar {
-      }
-      .baz {
-      }
-    }
-
-    /* Empty rule, with special case '&' rules */
-    .foo {
-      & {
-        &:hover {
-        }
-        &:focus {
-        }
-      }
-    }
-
-    /* Empty at-rule */
-    @media (min-width: 768px) {
-    }
-
-    /* Empty at-rule with nesting*/
-    @media (min-width: 768px) {
-      .foo {
-      }
-
-      @media (min-width: 1024px) {
-        .bar {
-        }
-      }
-    }
-
-    /* Exceptions: */
-    @charset "UTF-8";
-    @layer foo, bar, baz;
-    @layer foo, bar, baz; /* Will be deduped */
-    @custom-media --modern (color), (hover);
-    @namespace 'http://www.w3.org/1999/xhtml';
-    @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
-  `)
-
-  expect(pretty(toCss(ast))).toMatchInlineSnapshot(`
-    "
-    .foo {
-    }
-    .foo {
-      .bar {
-      }
-      .baz {
-      }
-    }
-    .foo {
-      & {
-        &:hover {
-        }
-        &:focus {
-        }
-      }
-    }
-    @media (min-width: 768px);
-    @media (min-width: 768px) {
-      .foo {
-      }
-      @media (min-width: 1024px) {
-        .bar {
-        }
-      }
-    }
-    @charset "UTF-8";
-    @layer foo, bar, baz;
-    @layer foo, bar, baz;
-    @custom-media --modern (color), (hover);
-    @namespace 'http://www.w3.org/1999/xhtml';
-    @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
-    "
-  `)
-
-  expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(`
-    "
-    @charset "UTF-8";
-    @layer foo, bar, baz;
-    @custom-media --modern (color), (hover);
-    @namespace 'http://www.w3.org/1999/xhtml';
-    @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
-    "
-  `)
-})
-
-it('should not emit exact duplicate declarations in the same rule', () => {
-  let ast = CSS.parse(css`
-    .foo {
-      color: red;
-      .bar {
-        color: green;
-        color: blue;
-        color: green;
-      }
-      color: red;
-    }
-    .foo {
-      color: red;
-      & {
-        color: green;
-        & {
-          color: red;
-          color: green;
-          color: blue;
-        }
-        color: red;
-      }
-      background: blue;
-      .bar {
-        color: green;
-        color: blue;
-        color: green;
-      }
-      caret-color: orange;
-    }
-  `)
-
-  expect(pretty(toCss(ast))).toMatchInlineSnapshot(`
-    "
-    .foo {
-      color: red;
-      .bar {
-        color: green;
-        color: blue;
-        color: green;
-      }
-      color: red;
-    }
-    .foo {
-      color: red;
-      & {
-        color: green;
-        & {
-          color: red;
-          color: green;
-          color: blue;
-        }
-        color: red;
-      }
-      background: blue;
-      .bar {
-        color: green;
-        color: blue;
-        color: green;
-      }
-      caret-color: orange;
-    }
-    "
-  `)
-
-  expect(pretty(toCss(optimizeAst(ast, defaultDesignSystem)))).toMatchInlineSnapshot(`
-    "
-    .foo {
-      .bar {
-        color: green;
-        color: blue;
-        color: green;
-      }
-      color: red;
-      & {
-        color: green;
-        & {
-          color: red;
-          color: green;
-          color: blue;
-        }
-        color: red;
-      }
-      background: blue;
-      .bar {
-        color: green;
-        color: blue;
-        color: green;
-      }
-      caret-color: orange;
-    }
-    "
-  `)
-})
-
-it('should not emit color-mix() fallbacks inside @keyframes', () => {
-  let ast = CSS.parse(css`
-    @keyframes my-animation {
-      0% {
-        color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
-      }
-      100% {
-        color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
-      }
-    }
-  `)
-
-  let theme = new Theme()
-  theme.add('--color-emerald-600', 'oklch(59.6% 0.145 163.225)')
-
-  let design = buildDesignSystem(theme)
-
-  expect(pretty(toCss(optimizeAst(ast, design)))).toMatchInlineSnapshot(`
-    "
-    @keyframes my-animation {
-      0% {
-        color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
-      }
-      100% {
-        color: color-mix(in oklab, var(--color-emerald-600) 0%, transparent);
-      }
-    }
-    "
-  `)
-})
-
-describe('optimization', () => {
-  function optimize(input: string) {
-    let ast = CSS.parse(input)
-    walk(ast, {
-      exit(node) {
-        // Depending on where we use `@scope`, it's handled slightly differently:
-        //
-        // 1. In user authored CSS, we perform the normal CSS nesting and
-        //    hoisting of `@scope` rules
-        // 2. In a `@custom-variant` definition, we need to swap the `@scope`
-        //    with the parent definition. Otherwise you'll never get the
-        //    expected "sandwich" effect.
-        //
-        // This little `@in-variant` hack is just a different way of
-        // differentiating between both cases for these tests.
-        if (node.kind === 'at-rule' && node.name === '@in-variant') {
-          return WalkAction.Replace(context({ source: 'variant' }, node.nodes))
-        }
-      },
-    })
-    return pretty(toCss(handleNesting(ast)))
-  }
-
-  // See: https://drafts.csswg.org/css-nesting-1/
-  describe('CSS Nesting Module Level 1', () => {
-    it('uses the descendant combinator by default', async () => {
-      expect(
-        optimize(css`
-          .a {
-            element {
-              --x: 1;
-            }
-            .class {
-              --x: 2;
-            }
-            #id {
-              --x: 3;
-            }
-            :pseudo-class {
-              --x: 4;
-            }
-            ::pseudo-element {
-              --x: 5;
-            }
-            [attribute] {
-              --x: 6;
-            }
-            * {
-              --x: 7;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a element {
-          --x: 1;
-        }
-        .a .class {
-          --x: 2;
-        }
-        .a #id {
-          --x: 3;
-        }
-        .a :pseudo-class {
-          --x: 4;
-        }
-        .a ::pseudo-element {
-          --x: 5;
-        }
-        .a [attribute] {
-          --x: 6;
-        }
-        .a * {
-          --x: 7;
-        }
-        "
-      `)
-    })
-
-    it('should be possible to change the combinator', async () => {
-      expect(
-        optimize(css`
-          .a {
-            + .b {
-              --x: 1;
-            }
-            > .c {
-              --x: 2;
-            }
-            ~ .d {
-              --x: 3;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a + .b {
-          --x: 1;
-        }
-        .a > .c {
-          --x: 2;
-        }
-        .a ~ .d {
-          --x: 3;
-        }
-        "
-      `)
-    })
-
-    it('should replace the first rule, that contains `&` with `:scope`', async () => {
-      expect(
-        optimize(css`
-          /* Standalone */
-          & {
-            --x: 1;
-          }
-
-          /* In an at-rule */
-          @supports (--y: 1) {
-            & {
-              --x: 2;
-            }
-          }
-
-          /* With :is(…) */
-          :is(&) {
-            --x: 3;
-          }
-
-          /* In an at-rule, with :is(…) */
-          @supports (--y: 2) {
-            :is(&) {
-              --x: 4;
-            }
-          }
-
-          /* With multiple selectors */
-          &,
-          .a {
-            --x: 5;
-          }
-
-          /* With multiple selectors + :is(…) */
-          :is(&),
-          .b {
-            --x: 6;
-          }
-
-          /* With multiple selectors in an at-rule */
-          @supports (--y: 3) {
-            &,
-            .c {
-              --x: 7;
-            }
-          }
-
-          /* With multiple selectors in an at-rule + :is(…) */
-          @supports (--y: 4) {
-            :is(&),
-            .d {
-              --x: 8;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        :scope {
-          --x: 1;
-        }
-        @supports (--y: 1) {
-          :scope {
-            --x: 2;
-          }
-        }
-        :is(:scope) {
-          --x: 3;
-        }
-        @supports (--y: 2) {
-          :is(:scope) {
-            --x: 4;
-          }
-        }
-        :scope, .a {
-          --x: 5;
-        }
-        :is(:scope), .b {
-          --x: 6;
-        }
-        @supports (--y: 3) {
-          :scope, .c {
-            --x: 7;
-          }
-        }
-        @supports (--y: 4) {
-          :is(:scope), .d {
-            --x: 8;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should be possible to use `&` to explicitly match the parent', async () => {
-      expect(
-        optimize(css`
-          .a {
-            & + .b {
-              --x: 1;
-            }
-            & > .c {
-              --x: 2;
-            }
-            & ~ .d {
-              --x: 3;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a + .b {
-          --x: 1;
-        }
-        .a > .c {
-          --x: 2;
-        }
-        .a ~ .d {
-          --x: 3;
-        }
-        "
-      `)
-    })
-
-    it('should be possible to use `&` in a different location', async () => {
-      expect(
-        optimize(css`
-          .a {
-            .b & {
-              --x: 1;
-            }
-            .c + & {
-              --x: 2;
-            }
-            .d > & {
-              --x: 3;
-            }
-            .e ~ & {
-              --x: 4;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .b .a {
-          --x: 1;
-        }
-        .c + .a {
-          --x: 2;
-        }
-        .d > .a {
-          --x: 3;
-        }
-        .e ~ .a {
-          --x: 4;
-        }
-        "
-      `)
-    })
-
-    it('should be possible to use `&` on its own', async () => {
-      expect(
-        optimize(css`
-          .a {
-            & {
-              --x: 1;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a {
-          --x: 1;
-        }
-        "
-      `)
-    })
-
-    it('should be possible to use `&` nested in `:is(…)`', async () => {
-      expect(
-        optimize(css`
-          .a {
-            :is(&) {
-              --x: 1;
-            }
-            :is(:is(:is(&))) {
-              --x: 2;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        :is(.a) {
-          --x: 1;
-        }
-        :is(:is(:is(.a))) {
-          --x: 2;
-        }
-        "
-      `)
-    })
-
-    it('should be possible to handle nesting with a parent selector list', async () => {
-      expect(
-        optimize(css`
-          .a,
-          .b {
-            .c,
-            .d & {
-              --x: 1;
-              &:hover {
-                --x: 2;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        :is(.a, .b) .c, .d :is(.a, .b) {
-          --x: 1;
-          &:hover {
-            --x: 2;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should not replace `\&`', () => {
-      expect(
-        optimize(css`
-          .a {
-            .b-\& {
-              --x: 1;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a .b-\\& {
-          --x: 1;
-        }
-        "
-      `)
-    })
-
-    it('should not replace `&` as part of a string', () => {
-      expect(
-        optimize(css`
-          .a {
-            [data-b='c&d'] {
-              --x: 1;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a [data-b='c&d'] {
-          --x: 1;
-        }
-        "
-      `)
-    })
-
-    it.each([
-      ['element', '&element', ':is(element)element'], // Invalid CSS
-      ['element', 'element&', 'element:is(element)'],
-      ['element', '&.class', 'element.class'],
-      ['element', '.class&', '.class:is(element)'], // Optimization: element.class
-      ['element', '&#id', 'element#id'],
-      ['element', '#id&', '#id:is(element)'], // Optimization: element#id
-      ['element', '&:hover', 'element:hover'],
-      ['element', ':hover&', ':hover:is(element)'],
-      ['element', '&::before', 'element::before'],
-      ['element', '::before&', '::before:is(element)'], // Invalid CSS
-      ['element', '&:not(.x)', 'element:not(.x)'],
-      ['element', ':not(.x)&', ':not(.x):is(element)'], // Optimization: element:not(.x)
-      ['element', '&[attribute]', 'element[attribute]'],
-      ['element', '[attribute]&', '[attribute]:is(element)'], // Optimization: element[attribute]
-      ['element', '&*', ':is(element)*'], // Invalid CSS
-      ['element', '*&', 'element'],
-
-      ['.class', '&element', ':is(.class)element'], // Invalid CSS
-      ['.class', 'element&', 'element.class'],
-      ['.class', '&.class', '.class.class'],
-      ['.class', '.class&', '.class.class'],
-      ['.class', '&#id', '.class#id'],
-      ['.class', '#id&', '#id.class'],
-      ['.class', '&:hover', '.class:hover'],
-      ['.class', ':hover&', ':hover.class'],
-      ['.class', '&::before', '.class::before'],
-      ['.class', '::before&', '::before.class'], // Invalid CSS
-      ['.class', '&:not(.x)', '.class:not(.x)'],
-      ['.class', ':not(.x)&', ':not(.x).class'],
-      ['.class', '&[attribute]', '.class[attribute]'],
-      ['.class', '[attribute]&', '[attribute].class'],
-      ['.class', '&*', ':is(.class)*'], // Invalid CSS
-      ['.class', '*&', '.class'],
-
-      ['#id', '&element', ':is(#id)element'], // Invalid CSS
-      ['#id', 'element&', 'element#id'],
-      ['#id', '&.class', '#id.class'],
-      ['#id', '.class&', '.class#id'],
-      ['#id', '&#id', '#id#id'],
-      ['#id', '#id&', '#id#id'],
-      ['#id', '&:hover', '#id:hover'],
-      ['#id', ':hover&', ':hover#id'],
-      ['#id', '&::before', '#id::before'],
-      ['#id', '::before&', '::before#id'], // Invalid CSS
-      ['#id', '&:not(.x)', '#id:not(.x)'],
-      ['#id', ':not(.x)&', ':not(.x)#id'],
-      ['#id', '&[attribute]', '#id[attribute]'],
-      ['#id', '[attribute]&', '[attribute]#id'],
-      ['#id', '&*', ':is(#id)*'], // Invalid CSS
-      ['#id', '*&', '#id'],
-
-      [':hover', '&element', ':is(:hover)element'], // Invalid CSS
-      [':hover', 'element&', 'element:hover'],
-      [':hover', '&.class', ':hover.class'],
-      [':hover', '.class&', '.class:hover'],
-      [':hover', '&#id', ':hover#id'],
-      [':hover', '#id&', '#id:hover'],
-      [':hover', '&:hover', ':hover:hover'],
-      [':hover', ':hover&', ':hover:hover'],
-      [':hover', '&::before', ':hover::before'],
-      [':hover', '::before&', '::before:hover'],
-      [':hover', '&:not(.x)', ':hover:not(.x)'],
-      [':hover', ':not(.x)&', ':not(.x):hover'],
-      [':hover', '&[attribute]', ':hover[attribute]'],
-      [':hover', '[attribute]&', '[attribute]:hover'],
-      [':hover', '&*', ':is(:hover)*'], // Invalid CSS
-      [':hover', '*&', ':hover'],
-
-      ['::before', '&element', ':is(::before)element'], // Invalid CSS
-      ['::before', 'element&', 'element::before'],
-      ['::before', '&.class', '::before.class'],
-      ['::before', '.class&', '.class::before'],
-      ['::before', '&#id', '::before#id'],
-      ['::before', '#id&', '#id::before'],
-      ['::before', '&:hover', '::before:hover'],
-      ['::before', ':hover&', ':hover::before'],
-      ['::before', '&::before', '::before::before'],
-      ['::before', '::before&', '::before::before'],
-      ['::before', '&:not(.x)', '::before:not(.x)'],
-      ['::before', ':not(.x)&', ':not(.x)::before'],
-      ['::before', '&[attribute]', '::before[attribute]'],
-      ['::before', '[attribute]&', '[attribute]::before'],
-      ['::before', '&*', ':is(::before)*'], // Invalid CSS
-      ['::before', '*&', '::before'],
-
-      [':not(.x)', '&element', ':is(:not(.x))element'], // Invalid CSS
-      [':not(.x)', 'element&', 'element:not(.x)'],
-      [':not(.x)', '&.class', ':not(.x).class'],
-      [':not(.x)', '.class&', '.class:not(.x)'],
-      [':not(.x)', '&#id', ':not(.x)#id'],
-      [':not(.x)', '#id&', '#id:not(.x)'],
-      [':not(.x)', '&:hover', ':not(.x):hover'],
-      [':not(.x)', ':hover&', ':hover:not(.x)'],
-      [':not(.x)', '&::before', ':not(.x)::before'],
-      [':not(.x)', '::before&', '::before:not(.x)'],
-      [':not(.x)', '&:not(.x)', ':not(.x):not(.x)'],
-      [':not(.x)', ':not(.x)&', ':not(.x):not(.x)'],
-      [':not(.x)', '&[attribute]', ':not(.x)[attribute]'],
-      [':not(.x)', '[attribute]&', '[attribute]:not(.x)'],
-      [':not(.x)', '&*', ':is(:not(.x))*'], // Invalid CSS
-      [':not(.x)', '*&', ':not(.x)'],
-
-      ['[attribute]', '&element', ':is([attribute])element'], // Invalid CSS
-      ['[attribute]', 'element&', 'element[attribute]'],
-      ['[attribute]', '&.class', '[attribute].class'],
-      ['[attribute]', '.class&', '.class[attribute]'],
-      ['[attribute]', '&#id', '[attribute]#id'],
-      ['[attribute]', '#id&', '#id[attribute]'],
-      ['[attribute]', '&:hover', '[attribute]:hover'],
-      ['[attribute]', ':hover&', ':hover[attribute]'],
-      ['[attribute]', '&::before', '[attribute]::before'],
-      ['[attribute]', '::before&', '::before[attribute]'],
-      ['[attribute]', '&:not(.x)', '[attribute]:not(.x)'],
-      ['[attribute]', ':not(.x)&', ':not(.x)[attribute]'],
-      ['[attribute]', '&[attribute]', '[attribute][attribute]'],
-      ['[attribute]', '[attribute]&', '[attribute][attribute]'],
-      ['[attribute]', '&*', ':is([attribute])*'], // Invalid CSS
-      ['[attribute]', '*&', '[attribute]'],
-
-      ['*', '&element', ':is(*)element'], // Invalid CSS
-      ['*', 'element&', 'element:is(*)'],
-      ['*', '&.class', '.class'],
-      ['*', '.class&', '.class:is(*)'], // Optimization: *.class → .class
-      ['*', '&#id', '#id'],
-      ['*', '#id&', '#id:is(*)'], // Optimization: *#id → #id
-      ['*', '&:hover', ':hover'],
-      ['*', ':hover&', ':hover:is(*)'],
-      ['*', '&::before', '::before'],
-      ['*', '::before&', '::before:is(*)'], // Invalid CSS
-      ['*', '&:not(.x)', ':not(.x)'],
-      ['*', ':not(.x)&', ':not(.x):is(*)'], // Optimization: *:not(.x) → :not(.x)
-      ['*', '&[attribute]', '[attribute]'],
-      ['*', '[attribute]&', '[attribute]:is(*)'], // Optimization: *[attribute] → [attribute]
-      ['*', '&*', ':is(*)*'], // Invalid CSS
-      ['*', '*&', '*'],
-
-      ['&', '&element', ':is(:scope)element'], // Invalid CSS
-      ['&', 'element&', 'element:scope'],
-      ['&', '&.class', ':scope.class'],
-      ['&', '.class&', '.class:scope'],
-      ['&', '&#id', ':scope#id'],
-      ['&', '#id&', '#id:scope'],
-      ['&', '&:hover', ':scope:hover'],
-      ['&', ':hover&', ':hover:scope'],
-      ['&', '&::before', ':scope::before'],
-      ['&', '::before&', '::before:scope'],
-      ['&', '&:not(.x)', ':scope:not(.x)'],
-      ['&', ':not(.x)&', ':not(.x):scope'],
-      ['&', '&[attribute]', ':scope[attribute]'],
-      ['&', '[attribute]&', '[attribute]:scope'],
-      ['&', '&*', ':is(:scope)*'], // Invalid CSS
-      ['&', '*&', ':scope'],
-    ])(`'%s { %s }' → '%s' (%#)`, async (root, nested, expected) => {
-      let optimized = optimize(toCss([rule(root, [rule(nested, [decl('--x', '0')])])]))
-      let ast = CSS.parse(optimized)
-
-      let count = 0
-      walk(ast, () => void count++)
-
-      // 1 rule, 1 declaration
-      expect(count).toBe(2)
-
-      if (ast[0].kind !== 'rule') throw new Error('expected a rule')
-      expect(ast[0].selector).toEqual(expected)
-    })
-
-    it('should not remove the `*` namespace from namespaced selectors', () => {
-      expect(
-        optimize(css`
-          .a {
-            & *|div {
-              color: red;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a *|div {
-          color: red;
-        }
-        "
-      `)
-    })
-
-    test('multiple selectors in the list are relative to the parent', async () => {
-      expect(
-        optimize(css`
-          .a,
-          .b {
-            --x: 1;
-            + .c {
-              --x: 2;
-            }
-            &.d {
-              --x: 3;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a, .b {
-          --x: 1;
-          + .c {
-            --x: 2;
-          }
-          &.d {
-            --x: 3;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should be possible to use `&` multiple times', async () => {
-      expect(
-        optimize(css`
-          .a {
-            & .b & .c & .d {
-              --x: 1;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a .b .a .c .a .d {
-          --x: 1;
-        }
-        "
-      `)
-    })
-
-    it('should be possible to use `&` multiple times in a row', async () => {
-      expect(
-        optimize(css`
-          .a {
-            &&& {
-              --x: 1;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a.a.a {
-          --x: 1;
-        }
-        "
-      `)
-    })
-
-    it('should be possible to use `&` inside a selector', async () => {
-      expect(
-        optimize(css`
-          .a {
-            :not(&) {
-              --x: 1;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        :not(.a) {
-          --x: 1;
-        }
-        "
-      `)
-    })
-
-    it('should be possible to use deeply nested CSS', async () => {
-      expect(
-        optimize(css`
-          .a,
-          .b {
-            --x: 1;
-
-            .c & {
-              --x: 2;
-
-              &:hover,
-              &:focus {
-                --x: 3;
-                .d {
-                  --x: 4;
-                }
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a, .b {
-          --x: 1;
-          .c & {
-            --x: 2;
-            &:hover, &:focus {
-              --x: 3;
-              .d {
-                --x: 4;
-              }
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    it('should properly split rules to guarantee specificity', async () => {
-      expect(
-        optimize(css`
-          .a {
-            --before: 1;
-            &:hover {
-              --inside: 1;
-            }
-            --after: 1;
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .a {
-          --before: 1;
-          &:hover {
-            --inside: 1;
-          }
-          --after: 1;
-        }
-        "
-      `)
-    })
-
-    it.each([
-      ['div', '&', 'div'],
-      ['div', '[before]&', '[before]:is(div)'],
-      ['div', '&[after]', 'div[after]'],
-      ['div', '[before]&[after]', '[before]:is(div)[after]'],
-      ['div', '[before] &', '[before] div'],
-      ['div', '& [after]', 'div [after]'],
-      ['div', '[before] & [after]', '[before] div [after]'],
-
-      ['.parent', '&', '.parent'],
-      ['.parent', '[before]&', '[before].parent'],
-      ['.parent', '&[after]', '.parent[after]'],
-      ['.parent', '[before]&[after]', '[before].parent[after]'],
-      ['.parent', '[before] &', '[before] .parent'],
-      ['.parent', '& [after]', '.parent [after]'],
-      ['.parent', '[before] & [after]', '[before] .parent [after]'],
-
-      ['.a > .b', '&', '.a > .b'],
-      ['.a > .b', '[before]&', '[before]:is(.a > .b)'],
-      ['.a > .b', '&[after]', '.a > .b[after]'],
-      ['.a > .b', '[before]&[after]', '[before]:is(.a > .b)[after]'],
-      ['.a > .b', '[before] &', '[before] :is(.a > .b)'],
-      ['.a > .b', '& [after]', '.a > .b [after]'],
-      ['.a > .b', '[before] & [after]', '[before] :is(.a > .b) [after]'],
-    ])(`should optimize '%s { %s }' → '%s' (%#)`, async (root, nested, expected) => {
-      let optimized = optimize(toCss([rule(root, [rule(nested, [decl('--x', '0')])])]))
-      let ast = CSS.parse(optimized)
-
-      let count = 0
-      walk(ast, () => void count++)
-
-      // 1 rule, 1 declaration
-      expect(count).toBe(2)
-
-      if (ast[0].kind !== 'rule') throw new Error('expected a rule')
-      expect(ast[0].selector).toEqual(expected)
-    })
-
-    it('should hoist at-rules', async () => {
-      expect(
-        optimize(css`
-          @layer utilities {
-            .a,
-            .b {
-              @media (print) {
-                --x: 1;
-                .c {
-                  @media (min-width: 123px) {
-                    --x: 2;
-                  }
-                }
-              }
-            }
-            .d {
-              @media (print) {
-                @media (min-width: 123px) {
-                  --x: 3;
-                }
-              }
-            }
-          }
-          @property --foo {
-            syntax: '*';
-          }
-          @layer utilities {
-            .e {
-              @media (print) {
-                --x: 4;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @media (print) {
-            .a, .b {
-              --x: 1;
-            }
-            @media (min-width: 123px) {
-              :is(.a, .b) .c {
-                --x: 2;
-              }
-              .d {
-                --x: 3;
-              }
-            }
-          }
-        }
-        @property --foo {
-          syntax: '*';
-        }
-        @layer utilities {
-          @media (print) {
-            .e {
-              --x: 4;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    it('should hoist `@scope` at-rules', async () => {
-      expect(
-        optimize(css`
-          @layer utilities {
-            .parent {
-              @in-variant {
-                @scope (.from) to (.to) {
-                  --x: 1;
-                }
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @scope (.from) to (.to) {
-            .parent {
-              --x: 1;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    // We have an optimization where the moment we see a declaration that we
-    // stop handling the nesting and emit everything as-is. This won't work when
-    // we're dealing with `@scope` and we still want to hoist that out.
-    it('should hoist `@scope` at-rules, even when sibling declarations are present', async () => {
-      expect(
-        optimize(css`
-          @layer utilities {
-            .parent {
-              --x: 1;
-              @in-variant {
-                @scope (.from) {
-                  .inside {
-                    --y: 2;
-                  }
-                }
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          .parent {
-            --x: 1;
-          }
-          @scope (.from) {
-            .parent .inside {
-              --y: 2;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    it('should resolve `&` in the `@scope` prelude when hoisting', async () => {
-      // `&` in the `<scope-start>` selector refers to the elements matched by
-      // the nearest ancestor style rule, while `&` in the `<scope-end>`
-      // selector refers to the scoping root.
-      //
-      // See: https://drafts.csswg.org/css-nesting-1/#nesting-at-scope
-      expect(
-        optimize(css`
-          .parent {
-            @scope (& > .scope) to (& .limit) {
-              .content {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.parent > .scope) to (:where(:scope) .limit) {
-          .content {
-            --x: 1;
-          }
-        }
-        "
-      `)
-
-      // Selector lists need `:is(…)` to keep their meaning
-      expect(
-        optimize(css`
-          .parent-a,
-          .parent-b {
-            @scope (& > .from) {
-              .inside {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (:is(.parent-a, .parent-b) > .from) {
-          .inside {
-            --x: 1;
-          }
-        }
-        "
-      `)
-
-      // The `<scope-start>` selector is optional, so the first group in the
-      // prelude is not necessarily the `<scope-start>` selector.
-      expect(
-        optimize(css`
-          .parent {
-            @scope to (& .to) {
-              .inside {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope to (:where(:scope) .to) {
-          .parent .inside {
-            --x: 1;
-          }
-        }
-        "
-      `)
-
-      // The parent selector is substituted with the same logic as the nesting
-      // selector in regular style rules: `:is(…)` is used when substituting the
-      // parent as-is would change the meaning (e.g. a type selector cannot
-      // appear after a class selector in a compound selector), …
-      expect(
-        optimize(css`
-          main {
-            @scope (.card&) {
-              .inside {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.card:is(main)) {
-          .inside {
-            --x: 1;
-          }
-        }
-        "
-      `)
-
-      // … and dropped when the substitution is provably equivalent, even for
-      // complex parent selectors
-      expect(
-        optimize(css`
-          .a .b {
-            @scope (& > .from) {
-              .inside {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.a .b > .from) {
-          .inside {
-            --x: 1;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should wrap bare declarations inside `@scope` in a `&` rule', async () => {
-      // A bug in Lightning CSS causes an error when there are declarations
-      // directly in the `@scope`. To fix this we will ensure a rule with
-      // `:where(:scope)` is available.
-      expect(
-        optimize(css`
-          @scope (.from) to (.to) {
-            --x: 1;
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.from) to (.to) {
-          :where(:scope) {
-            --x: 1;
-          }
-        }
-        "
-      `)
-
-      // When generated by a variant, the declarations resolve against the
-      // parent rule: the `@scope` rule scopes _where the utility applies_
-      // (like nesting `@media` does, and like variants do).
-      //
-      // Note: this deviates from native CSS nesting, where the `<scope-start>`
-      // selector would be relative to `.parent` and the declarations would
-      // apply to the scoping root. User-authored `@scope` rules (without the
-      // `@in-variant` marker) keep those native semantics.
-      expect(
-        optimize(css`
-          .parent {
-            @in-variant {
-              @scope (.from) {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.from) {
-          .parent {
-            --x: 1;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should replace `&` with `:where(:scope)` for rules directly inside `@scope`', async () => {
-      // Inside an `@scope` rule, the nesting selector behaves like
-      // `:where(:scope)` and matches the scoping root with zero specificity.
-      expect(
-        optimize(css`
-          @scope (.from) {
-            & > p {
-              --x: 1;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.from) {
-          :where(:scope) > p {
-            --x: 1;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should handle `&` deeply nested in `@scope` as normal references to a parent', async () => {
-      expect(
-        optimize(css`
-          @scope (.from) {
-            &,
-            .inside {
-              --x: 1;
-
-              &:hover {
-                --x: 2;
-              }
-
-              &:focus {
-                --x: 3;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.from) {
-          :where(:scope), .inside {
-            --x: 1;
-            &:hover {
-              --x: 2;
-            }
-            &:focus {
-              --x: 3;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    it('should compile user-authored `@scope` rules with their native CSS nesting semantics', async () => {
-      // The `<scope-start>` selector is relative to the parent rule (like
-      // nested style rule selectors are), the rules inside are relative to
-      // the scoping root, and `&` refers to the scoping root
-      expect(
-        optimize(css`
-          .parent {
-            @scope (.from) to (.to) {
-              .inside {
-                --x: 1;
-              }
-
-              & > .child {
-                --x: 2;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.parent .from) to (.to) {
-          .inside {
-            --x: 1;
-          }
-          :where(:scope) > .child {
-            --x: 2;
-          }
-        }
-        "
-      `)
-
-      // A trailing `&` makes the parent rule the scoping root: the scoping
-      // roots are `.parent` elements inside `.from` elements
-      expect(
-        optimize(css`
-          .parent {
-            @scope (.from &) to (.to) {
-              .inside {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.from .parent) to (.to) {
-          .inside {
-            --x: 1;
-          }
-        }
-        "
-      `)
-
-      // Bare declarations apply to the scoping root. They are wrapped in a
-      // `:where(:scope)` rule, which is the spec's exact equivalent, because
-      // Lightning CSS drops bare declarations inside `@scope` entirely.
-      expect(
-        optimize(css`
-          .parent {
-            @scope (.from) {
-              --x: 1;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.parent .from) {
-          :where(:scope) {
-            --x: 1;
-          }
-        }
-        "
-      `)
-
-      // Also at the top level
-      expect(
-        optimize(css`
-          @scope (.from) to (.to) {
-            --x: 1;
-
-            .inside {
-              --x: 2;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.from) to (.to) {
-          :where(:scope) {
-            --x: 1;
-          }
-          .inside {
-            --x: 2;
-          }
-        }
-        "
-      `)
-
-      // Every selector in a `<scope-start>` selector list is relative to the
-      // parent rule, whether it uses `&` or not
-      expect(
-        optimize(css`
-          .parent {
-            @scope (.a, & > .b) {
-              .inside {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (.parent .a, .parent > .b) {
-          .inside {
-            --x: 1;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should leave `@property` and `@apply` alone', async () => {
-      expect(
-        optimize(css`
-          .foo {
-            .bar {
-              @apply text-red-500 hover:text-red-600;
-            }
-          }
-
-          .baz {
-            @property --tw-content {
-              syntax: '*';
-              initial-value: '';
-              inherits: false;
-            }
-
-            @property --tw-border-spacing-x {
-              syntax: '<length>';
-              inherits: false;
-              initial-value: 0;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .foo .bar {
-          @apply text-red-500 hover:text-red-600;
-        }
-        .baz {
-          @property --tw-content {
-            syntax: '*';
-            initial-value: '';
-            inherits: false;
-          }
-          @property --tw-border-spacing-x {
-            syntax: '<length>';
-            inherits: false;
-            initial-value: 0;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should merge a body-less @layer with an @layer with the same name that has a body', async () => {
-      expect(
-        optimize(css`
-          @layer a;
-
-          @layer a {
-            @layer b {
-              .x {
-                color: red;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer a {
-          @layer b {
-            .x {
-              color: red;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    it('should not get rid of `:is(…)` when the compound selector is part of a complex selector', async () => {
-      expect(
-        optimize(css`
-          .foo .bar {
-            .system &:focus {
-              --x: 1;
-            }
-          }
-          .foo:hover {
-            .system &:focus {
-              --x: 2;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .system :is(.foo .bar):focus {
-          --x: 1;
-        }
-        .system .foo:hover:focus {
-          --x: 2;
-        }
-        "
-      `)
-    })
-
-    it('should not dedupe adjacent at-rules with the same prelude but different bodies', async () => {
-      expect(
-        optimize(css`
-          @font-face {
-            font-family: 'A';
-            src: url('/fonts/a.woff2');
-          }
-
-          @font-face {
-            font-family: 'B';
-            src: url('/fonts/b.woff2');
-          }
-
-          @keyframes spin {
-            to {
-              transform: rotate(360deg);
-            }
-          }
-
-          @keyframes spin {
-            to {
-              transform: rotate(-360deg);
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @font-face {
-          font-family: 'A';
-          src: url('/fonts/a.woff2');
-        }
-        @font-face {
-          font-family: 'B';
-          src: url('/fonts/b.woff2');
-        }
-        @keyframes spin {
-          to {
-            transform: rotate(360deg);
-          }
-        }
-        @keyframes spin {
-          to {
-            transform: rotate(-360deg);
-          }
-        }
-        "
-      `)
-    })
-  })
-})
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index 09c3ea051..dae7cf0e8 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -1,76 +1,24 @@
-import { Polyfills } from '.'
-import * as SelectorParser from '../src/selector-parser'
-import { parseAtRule } from './css-parser'
-import type { DesignSystem } from './design-system'
-import type { Source, SourceLocation } from './source-maps/source'
-import { Theme, ThemeOptions } from './theme'
-import { DefaultMap } from './utils/default-map'
-import { segment } from './utils/segment'
-import { extractUsedVariables } from './utils/variables'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction, type VisitContext } from './walk'
-
-const AT_SIGN = 0x40
-const PIPE = 0x7c
-
-export type StyleRule = {
+export type Rule = {
   kind: 'rule'
   selector: string
   nodes: AstNode[]
-
-  src?: SourceLocation
-  dst?: SourceLocation
-}
-
-export type AtRule = {
-  kind: 'at-rule'
-  name: string
-  params: string
-  nodes: AstNode[]
-
-  src?: SourceLocation
-  dst?: SourceLocation
 }
 
 export type Declaration = {
   kind: 'declaration'
   property: string
-  value: string | undefined
+  value: string
   important: boolean
-
-  src?: SourceLocation
-  dst?: SourceLocation
 }
 
 export type Comment = {
   kind: 'comment'
   value: string
-
-  src?: SourceLocation
-  dst?: SourceLocation
 }
 
-export type Context = {
-  kind: 'context'
-  context: Record<string, string | boolean>
-  nodes: AstNode[]
+export type AstNode = Rule | Declaration | Comment
 
-  src?: undefined
-  dst?: undefined
-}
-
-export type AtRoot = {
-  kind: 'at-root'
-  nodes: AstNode[]
-
-  src?: undefined
-  dst?: undefined
-}
-
-export type Rule = StyleRule | AtRule
-export type AstNode = StyleRule | AtRule | Declaration | Comment | Context | AtRoot
-
-export function styleRule(selector: string, nodes: AstNode[] = []): StyleRule {
+export function rule(selector: string, nodes: AstNode[]): Rule {
   return {
     kind: 'rule',
     selector,
@@ -78,29 +26,12 @@ export function styleRule(selector: string, nodes: AstNode[] = []): StyleRule {
   }
 }
 
-export function atRule(name: string, params: string = '', nodes: AstNode[] = []): AtRule {
-  return {
-    kind: 'at-rule',
-    name,
-    params,
-    nodes,
-  }
-}
-
-export function rule(selector: string, nodes: AstNode[] = []): StyleRule | AtRule {
-  if (selector.charCodeAt(0) === AT_SIGN) {
-    return parseAtRule(selector, nodes)
-  }
-
-  return styleRule(selector, nodes)
-}
-
-export function decl(property: string, value: string | undefined, important = false): Declaration {
+export function decl(property: string, value: string): Declaration {
   return {
     kind: 'declaration',
     property,
     value,
-    important,
+    important: false,
   }
 }
 
@@ -111,1614 +42,76 @@ export function comment(value: string): Comment {
   }
 }
 
-export function context(context: Record<string, string | boolean>, nodes: AstNode[]): Context {
-  return {
-    kind: 'context',
-    context,
-    nodes,
-  }
+export enum WalkAction {
+  /** Continue walking, which is the default */
+  Continue,
+
+  /** Skip visiting the children of this node */
+  Skip,
+
+  /** Stop the walk entirely */
+  Stop,
 }
 
-export function atRoot(nodes: AstNode[]): AtRoot {
-  return {
-    kind: 'at-root',
-    nodes,
-  }
-}
-
-export function cloneAstNode<T extends AstNode>(node: T): T {
-  switch (node.kind) {
-    case 'rule':
-      return {
-        kind: node.kind,
-        selector: node.selector,
-        nodes: node.nodes.map(cloneAstNode),
-        src: node.src,
-        dst: node.dst,
-      } satisfies StyleRule as T
-
-    case 'at-rule':
-      return {
-        kind: node.kind,
-        name: node.name,
-        params: node.params,
-        nodes: node.nodes.map(cloneAstNode),
-        src: node.src,
-        dst: node.dst,
-      } satisfies AtRule as T
-
-    case 'at-root':
-      return {
-        kind: node.kind,
-        nodes: node.nodes.map(cloneAstNode),
-        src: node.src,
-        dst: node.dst,
-      } satisfies AtRoot as T
-
-    case 'context':
-      return {
-        kind: node.kind,
-        context: { ...node.context },
-        nodes: node.nodes.map(cloneAstNode),
-        src: node.src,
-        dst: node.dst,
-      } satisfies Context as T
-
-    case 'declaration':
-      return {
-        kind: node.kind,
-        property: node.property,
-        value: node.value,
-        important: node.important,
-        src: node.src,
-        dst: node.dst,
-      } satisfies Declaration as T
-
-    case 'comment':
-      return {
-        kind: node.kind,
-        value: node.value,
-        src: node.src,
-        dst: node.dst,
-      } satisfies Comment as T
-
-    default:
-      node satisfies never
-      throw new Error(`Unknown node kind: ${(node as any).kind}`)
-  }
-}
-
-export function cssContext(
-  ctx: VisitContext<AstNode>,
-): VisitContext<AstNode> & { context: Record<string, string | boolean> } {
-  return {
-    depth: ctx.depth,
-    index: ctx.index,
-    siblings: ctx.siblings,
-    get context() {
-      let context: Record<string, string | boolean> = {}
-      for (let child of ctx.path()) {
-        if (child.kind === 'context') {
-          Object.assign(context, child.context)
-        }
-      }
-
-      // Once computed, we never need to compute this again
-      Object.defineProperty(this, 'context', { value: context })
-      return context
-    },
-    get parent() {
-      let parent = (this.path().pop() as Extract<AstNode, { nodes: AstNode[] }>) ?? null
-
-      // Once computed, we never need to compute this again
-      Object.defineProperty(this, 'parent', { value: parent })
-      return parent
-    },
-    path() {
-      return ctx.path().filter((n) => n.kind !== 'context')
-    },
-  }
-}
-
-// Optimize the AST for printing where all the special nodes that require custom
-// handling are handled such that the printing is a 1-to-1 transformation.
-export function optimizeAst(
+export function walk(
   ast: AstNode[],
-  designSystem: DesignSystem,
-  polyfills: Polyfills = Polyfills.All,
-) {
-  let atRoots: AstNode[] = []
-  let seenAtProperties = new Set<string>()
-  let cssThemeVariables = new DefaultMap<AstNode[], Set<Declaration>>(() => new Set())
-  let colorMixDeclarations = new DefaultMap<AstNode[], Set<Declaration>>(() => new Set())
-  let keyframes = new Set<AtRule>()
-  let usedKeyframeNames = new Set()
-
-  let propertyFallbacksRoot: Declaration[] = []
-  let propertyFallbacksUniversal: Declaration[] = []
-
-  let variableDependencies = new DefaultMap<string, Set<string>>(() => new Set())
-
-  function transform(
+  visit: (
     node: AstNode,
-    parent: AstNode[],
-    context: Record<string, string | boolean> = {},
-    depth = 0,
-  ) {
-    // Declaration
-    if (node.kind === 'declaration') {
-      if (node.property === '--tw-sort' || node.value === undefined || node.value === null) {
-        return
-      }
-
-      // Track variables defined in `@theme`
-      if (context.theme && node.property[0] === '-' && node.property[1] === '-') {
-        // Variables that resolve to `initial` should never be emitted. This can happen because of
-        // the `--theme(…)` being used and evaluated lazily
-        if (node.value === 'initial') {
-          node.value = undefined
-          return
-        }
-
-        if (!context.keyframes) {
-          cssThemeVariables.get(parent).add(node)
-        }
-      }
-
-      // Track used CSS variables
-      if (node.value.includes('var(')) {
-        // Declaring another variable does not count as usage. Instead, we mark
-        // the relationship
-        if (context.theme && node.property[0] === '-' && node.property[1] === '-') {
-          for (let variable of extractUsedVariables(node.value)) {
-            variableDependencies.get(variable).add(node.property)
-          }
-        } else {
-          designSystem.trackUsedVariables(node.value)
-        }
-      }
-
-      // Track used animation names
-      if (node.property === 'animation') {
-        for (let keyframeName of extractKeyframeNames(node.value)) {
-          usedKeyframeNames.add(keyframeName)
-        }
-      }
-
-      // Create fallback values for usages of the `color-mix(…)` function that reference variables
-      // found in the theme config.
-      if (
-        polyfills & Polyfills.ColorMix &&
-        !context.supportsColorMix &&
-        !context.keyframes &&
-        node.value.includes('color-mix(')
-      ) {
-        colorMixDeclarations.get(parent).add(node)
-      }
-
-      parent.push(node)
-    }
-
-    // Rule
-    else if (node.kind === 'rule') {
-      let nodes: AstNode[] = []
-
-      for (let child of node.nodes) {
-        transform(child, nodes, context, depth + 1)
-      }
-
-      if (nodes.length > 0) {
-        parent.push({ ...node, nodes })
-      }
-    }
-
-    // AtRule `@property`
-    else if (node.kind === 'at-rule' && node.name === '@property' && depth === 0) {
-      // Don't output duplicate `@property` rules
-      if (seenAtProperties.has(node.params)) {
-        return
-      }
-
-      // Collect fallbacks for `@property` rules for Firefox support We turn these into rules on
-      // `:root` or `*` and some pseudo-elements based on the value of `inherits`
-      if (polyfills & Polyfills.AtProperty) {
-        let property = node.params
-        let initialValue = null
-        let inherits = false
-
-        for (let prop of node.nodes) {
-          if (prop.kind !== 'declaration') continue
-          if (prop.property === 'initial-value') {
-            initialValue = prop.value
-          } else if (prop.property === 'inherits') {
-            inherits = prop.value === 'true'
-          }
-        }
-
-        let fallback = decl(property, initialValue ?? 'initial')
-        fallback.src = node.src
-
-        if (inherits) {
-          propertyFallbacksRoot.push(fallback)
-        } else {
-          propertyFallbacksUniversal.push(fallback)
-        }
-      }
-
-      seenAtProperties.add(node.params)
-
-      let copy = { ...node, nodes: [] }
-      for (let child of node.nodes) {
-        transform(child, copy.nodes, context, depth + 1)
-      }
-      parent.push(copy)
-    }
-
-    // AtRule
-    else if (node.kind === 'at-rule') {
-      if (node.name === '@keyframes') {
-        context = { ...context, keyframes: true }
-      } else if (node.name === '@supports' && node.params.includes('color-mix(')) {
-        context = { ...context, supportsColorMix: true }
-      }
-
-      let copy = { ...node, nodes: [] }
-      for (let child of node.nodes) {
-        transform(child, copy.nodes, context, depth + 1)
-      }
-
-      // Only track `@keyframes` that could be removed, when they were defined inside of a `@theme`.
-      if (node.name === '@keyframes' && context.theme) {
-        keyframes.add(copy)
-      }
-
-      if (
-        copy.nodes.length > 0 ||
-        copy.name === '@layer' ||
-        copy.name === '@charset' ||
-        copy.name === '@custom-media' ||
-        copy.name === '@namespace' ||
-        copy.name === '@import' ||
-        copy.name === '@apply'
-      ) {
-        parent.push(copy)
-      }
-    }
-
-    // AtRoot
-    else if (node.kind === 'at-root') {
-      for (let child of node.nodes) {
-        let newParent: AstNode[] = []
-        transform(child, newParent, context, 0)
-        for (let child of newParent) {
-          atRoots.push(child)
-        }
-      }
-    }
-
-    // Context
-    else if (node.kind === 'context') {
-      // Remove reference imports from printing
-      if (node.context.reference) {
-        return
-      }
-
-      // Preserve context nodes that track the source of their subtree (variant
-      // bodies and the user content slotted into them), so `handleNesting`
-      // knows whether to compose `@scope` rules with the variant semantics or
-      // their native CSS nesting semantics
-      else if (node.context.source) {
-        let copy = { ...node, nodes: [] as AstNode[] }
-        for (let child of node.nodes) {
-          transform(child, copy.nodes, { ...context, ...node.context }, depth)
-        }
-
-        if (copy.nodes.length > 0) {
-          parent.push(copy)
-        }
-      } else {
-        for (let child of node.nodes) {
-          transform(child, parent, { ...context, ...node.context }, depth)
-        }
-      }
-    }
-
-    // Comment
-    else if (node.kind === 'comment') {
-      parent.push(node)
-    }
-
-    // Unknown
-    else {
-      node satisfies never
-    }
-  }
-
-  let newAst: AstNode[] = []
-  for (let node of ast) {
-    transform(node, newAst, {}, 0)
-  }
-
-  // Remove unused theme variables
-  next: for (let [parent, declarations] of cssThemeVariables) {
-    for (let declaration of declarations) {
-      // Find out if a variable is either used directly or if any of the
-      // variables referencing it is used.
-      let variableUsed = isVariableUsed(
-        declaration.property,
-        designSystem.theme,
-        variableDependencies,
-      )
-      if (variableUsed) {
-        if (declaration.property.startsWith(designSystem.theme.prefixKey('--animate-'))) {
-          for (let keyframeName of extractKeyframeNames(declaration.value!))
-            usedKeyframeNames.add(keyframeName)
-        }
-
-        continue
-      }
-
-      // Remove the declaration (from its parent)
-      let idx = parent.indexOf(declaration)
-      parent.splice(idx, 1)
-
-      // If the parent is now empty, remove it and any `@layer` rules above it
-      // from the AST
-      if (parent.length === 0) {
-        let path = findNode(newAst, (node) => node.kind === 'rule' && node.nodes === parent)
-
-        if (!path || path.length === 0) continue next
-
-        // Add the root of the AST so we can delete from the top-level
-        path.unshift({
-          kind: 'at-root',
-          nodes: newAst,
-        })
-
-        // Remove nodes from the parent as long as the parent is empty
-        // otherwise and consist of only @layer rules
-        do {
-          let nodeToRemove = path.pop()
-          if (!nodeToRemove) break
-
-          let removeFrom = path[path.length - 1]
-          if (!removeFrom) break
-          if (removeFrom.kind !== 'at-root' && removeFrom.kind !== 'at-rule') break
-
-          let idx = removeFrom.nodes.indexOf(nodeToRemove)
-          if (idx === -1) break
-
-          removeFrom.nodes.splice(idx, 1)
-        } while (true)
-
-        continue next
-      }
-    }
-  }
-
-  // Remove unused keyframes
-  for (let keyframe of keyframes) {
-    if (!usedKeyframeNames.has(keyframe.params)) {
-      let idx = atRoots.indexOf(keyframe)
-      atRoots.splice(idx, 1)
-    }
-  }
-
-  newAst = newAst.concat(atRoots)
-
-  // Fallbacks
-  // Create fallback values for usages of the `color-mix(…)` function that reference variables
-  // found in the theme config.
-  if (polyfills & Polyfills.ColorMix) {
-    for (let [parent, declarations] of colorMixDeclarations) {
-      for (let declaration of declarations) {
-        let idx = parent.indexOf(declaration)
-        // If the declaration is no longer present, we don't need to create a polyfill anymore
-        if (idx === -1 || declaration.value == null) continue
-
-        let ast = ValueParser.parse(declaration.value)
-        let requiresPolyfill = false
-        walk(ast, (node) => {
-          if (node.kind !== 'function' || node.value !== 'color-mix') return
-
-          let containsUnresolvableVars = false
-          let containsCurrentcolor = false
-          walk(node.nodes, (node) => {
-            if (node.kind == 'word' && node.value.toLowerCase() === 'currentcolor') {
-              containsCurrentcolor = true
-              requiresPolyfill = true
-              return
-            }
-
-            let varNode: ValueParser.ValueAstNode | null = node
-            let inlinedColor: string | null = null
-            let seenVariables = new Set<string>()
-            do {
-              if (varNode.kind !== 'function' || varNode.value !== 'var') return
-              let firstChild = varNode.nodes[0]
-              if (!firstChild || firstChild.kind !== 'word') return
-
-              let variableName = firstChild.value
-
-              if (seenVariables.has(variableName)) {
-                containsUnresolvableVars = true
-                return
-              }
-
-              seenVariables.add(variableName)
-
-              requiresPolyfill = true
-
-              inlinedColor = designSystem.theme.resolveValue(null, [firstChild.value as any])
-              if (!inlinedColor) {
-                containsUnresolvableVars = true
-                return
-              }
-              if (inlinedColor.toLowerCase() === 'currentcolor') {
-                containsCurrentcolor = true
-                return
-              }
-
-              if (inlinedColor.startsWith('var(')) {
-                let subAst = ValueParser.parse(inlinedColor)
-                varNode = subAst[0]
-              } else {
-                varNode = null
-              }
-            } while (varNode)
-
-            return WalkAction.Replace({ kind: 'word', value: inlinedColor } as const)
-          })
-
-          if (containsUnresolvableVars || containsCurrentcolor) {
-            let separatorIndex = node.nodes.findIndex(
-              (node) => node.kind === 'separator' && node.value.trim().includes(','),
-            )
-            if (separatorIndex === -1) return
-            let firstColorValue =
-              node.nodes.length > separatorIndex ? node.nodes[separatorIndex + 1] : null
-            if (!firstColorValue) return
-            return WalkAction.Replace(firstColorValue)
-          } else if (requiresPolyfill) {
-            // Change the colorspace to `srgb` since the fallback values should not be represented as
-            // `oklab(…)` functions again as their support in Safari <16 is very limited.
-            let colorspace = node.nodes[2]
-            if (
-              colorspace.kind === 'word' &&
-              (colorspace.value === 'oklab' ||
-                colorspace.value === 'oklch' ||
-                colorspace.value === 'lab' ||
-                colorspace.value === 'lch')
-            ) {
-              colorspace.value = 'srgb'
-            }
-          }
-        })
-        if (!requiresPolyfill) continue
-
-        let fallback = {
-          ...declaration,
-          value: ValueParser.toCss(ast),
-        }
-        let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [declaration])
-        colorMixQuery.src = declaration.src
-        parent.splice(idx, 1, fallback, colorMixQuery)
-      }
-    }
-  }
-
-  if (polyfills & Polyfills.AtProperty) {
-    let fallbackAst = []
-
-    if (propertyFallbacksRoot.length > 0) {
-      let wrapper = rule(':root, :host', propertyFallbacksRoot)
-      wrapper.src = propertyFallbacksRoot[0].src
-      fallbackAst.push(wrapper)
-    }
-
-    if (propertyFallbacksUniversal.length > 0) {
-      let wrapper = rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal)
-      wrapper.src = propertyFallbacksUniversal[0].src
-      fallbackAst.push(wrapper)
-    }
-
-    if (fallbackAst.length > 0) {
-      // Insert an empty `@layer properties;` at the beginning of the document. We need to place it
-      // after eventual external imports as `lightningcss` would otherwise move the content into the
-      // same place.
-      let firstValidNodeIndex = newAst.findIndex((node) => {
-        // License comments
-        if (node.kind === 'comment') return false
-
-        if (node.kind === 'at-rule') {
-          // Charset
-          if (node.name === '@charset') return false
-
-          // External imports
-          if (node.name === '@import') return false
-        }
-
-        return true
-      })
-
-      let layerPropertiesStatement = atRule('@layer', 'properties', [])
-      layerPropertiesStatement.src = fallbackAst[0].src
-
-      newAst.splice(
-        firstValidNodeIndex < 0 ? newAst.length : firstValidNodeIndex,
-        0,
-        layerPropertiesStatement,
-      )
-
-      let block = rule('@layer properties', [
-        atRule(
-          '@supports',
-          // We can't write a supports query for `@property` directly so we have to test for
-          // features that are added around the same time in Mozilla and Safari.
-          '((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
-          fallbackAst,
-        ),
-      ])
-
-      block.src = fallbackAst[0].src
-      block.nodes[0].src = fallbackAst[0].src
-
-      newAst.push(block)
-    }
-  }
-
-  return handleNesting(newAst)
-}
-
-export function handleNesting(ast: AstNode[]): AstNode[] {
-  let parseSelectorCache = new DefaultMap(SelectorParser.parse)
-
-  // Nodes with an `@scope` rule somewhere in their subtree. These cannot use
-  // the "emit as-is" fast path for rules containing declarations, because
-  // `@scope` rules change meaning when they stay nested inside a style rule and
-  // must go through the hoisting machinery instead.
-  let containsAtScope = new Set<AstNode>()
-  {
-    function scan(nodes: AstNode[]): boolean {
-      let found = false
-      for (let node of nodes) {
-        if (node.kind === 'declaration' || node.kind === 'comment') continue
-
-        if (scan(node.nodes) || (node.kind === 'at-rule' && node.name === '@scope')) {
-          containsAtScope.add(node)
-          found = true
-        }
-      }
-      return found
-    }
-    scan(ast)
-  }
-
-  // Track `rule` selectors as we go
-  let selectorStack: [
-    selector: string,
-    src: SourceLocation | undefined,
-    dst: SourceLocation | undefined,
-  ][] = []
-
-  // Track `at-rule` information as we go. Tracking this separately from the
-  // selector stack for rules such that we can hoist this above all the rules.
-  let atRuleStack: [
-    name: string,
-    params: string,
-    src: SourceLocation | undefined,
-    dst: SourceLocation | undefined,
-  ][] = []
-
-  // The current "nodes" we can push to
-  let nodes = null as AstNode[] | null
-
-  // Optimization: Track the declaration properties we've seen in the current
-  // nodes.
-  let seenDeclarationProperties = new Set<string>()
-
-  // Track nodes lists where we want to dedupe declarations
-  let dedupeDeclarationsInNodes = new Set<AstNode[]>()
-
-  // The final, new AST
-  let result: AstNode[] = []
-
-  // Track whether we should skip a node in the `exit` phase
-  let skipExit = new Set<AstNode>()
-
-  // Track the source of the subtree we are currently in. Variant bodies are
-  // wrapped in a `context` node with `source: 'variant'`, and the user content
-  // slotted into them is wrapped in `source: 'user'`. `@scope` rules whose
-  // nearest source is a variant are hoisted with the variant semantics, all
-  // other `@scope` rules use their native CSS nesting semantics.
-  let sourceStack: (string | boolean)[] = []
-
-  // Selector stacks that are masked while inside an `@scope` rule whose
-  // `<scope-start>` selector consumed the parent selector via `&`.
-  //
-  // Once the parent selector is part of the `<scope-start>` selector, the rules
-  // inside the `@scope` are relative to the scoping root, not to the parent
-  // rule. Selectors in scoped style rules only match elements in scope, and the
-  // parent matches ancestors of the scoping root, so prefixing the rules with
-  // the parent selector would make them match nothing at all.
-  //
-  // E.g.:
-  //
-  // ```css
-  // .parent {
-  //   @scope (& > .scope) {
-  //     .content {
-  //       color: red;
-  //     }
-  //   }
-  // }
-  // ```
-  //
-  // becomes:
-  //
-  // ```css
-  // @scope (.parent > .scope) {
-  //   .content { /* ← not `.parent .content` */
-  //     color: red;
-  //   }
-  // }
-  // ```
-  let maskedSelectorStacks = new Map<AstNode, typeof selectorStack>()
-
-  walk(ast, {
-    enter(node) {
-      switch (node.kind) {
-        case 'rule': {
-          nodes = null // Start a new level
-
-          // First time we see a rule
-          if (selectorStack.length === 0) {
-            // A rule with a selector containing `&` should replace the `&` with
-            // `:scope` if there is no parent rule.
-            //
-            // Note: there could be false positives when the `&` is escaped or
-            // part of a string inside an attribute selector. But the
-            // SelectorParser will take care of that.
-            if (node.selector.includes('&')) {
-              // Inside an `@scope` rule, the nesting selector behaves like
-              // `:where(:scope)` and matches the scoping root with zero
-              // specificity. E.g.:
-              //
-              // ```css
-              // @scope (.checkout) {
-              //   & > p {
-              //     color: red;
-              //   }
-              // }
-              // ```
-              //
-              // becomes:
-              //
-              // ```css
-              // @scope (.checkout) {
-              //   :where(:scope) > p {
-              //     color: red;
-              //   }
-              // }
-              // ```
-              //
-              // See: https://drafts.csswg.org/css-nesting-1/#nesting-at-scope
-              let replacement = atRuleStack.some(([name]) => name === '@scope')
-                ? ':where(:scope)'
-                : ':scope'
-
-              let ast = SelectorParser.parse(node.selector)
-              let changed = false
-
-              walk(ast, (node) => {
-                if (node.kind === 'selector' && node.value === '&') {
-                  changed = true
-                  node.value = replacement
-                }
-              })
-
-              if (changed) {
-                selectorStack.push([SelectorParser.toCss(ast), node.src, node.dst])
-              } else {
-                selectorStack.push([node.selector, node.src, node.dst])
-              }
-            }
-
-            // No nesting markers, track as-is
-            else {
-              selectorStack.push([node.selector, node.src, node.dst])
-            }
-          }
-
-          // Nested rule, ensure `&` is present in each selector. Then track the
-          // selector.
-          else {
-            // A rule with just `&` can be replaced by its children. Let's
-            // ignore this node and keep walking its children.
-            if (node.selector === '&') {
-              skipExit.add(node)
-              return
-            }
-
-            let lastSelector = selectorStack[selectorStack.length - 1][0]
-            let selector = segment(node.selector, ',')
-              .map((selector) => substituteNestingSelector(selector, lastSelector))
-              .join(', ')
-            selectorStack.push([selector, node.src, node.dst])
-          }
-
-          // Once we hit a rule that has at least one declaration, then we can
-          // stop handling the nested selectors.
-          //
-          // This ensures that browser devtools can at least show _something_
-          // for a given rule. This also means that we can leverage CSS nesting
-          // which is better for gzip results due to increased repetition.
-          //
-          // E.g.:
-          //
-          // ```css
-          // .a {
-          //   &[b] {
-          //     color: red;
-          //     &:hover {
-          //       color: blue;
-          //     }
-          //   }
-          // }
-          // ```
-          //
-          // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
-          //
-          // ```css
-          // .a[b] {          /* ← flattened */
-          //   color: red;    /* ← saw a declaration, therefore */
-          //   &:hover {      /* ← we keep this nested syntax */
-          //     color: blue;
-          //   }
-          // }
-          // ```
-          //
-          // The exception is when the rule contains an `@scope` rule somewhere,
-          // because it must go through the normal hoisting machinery instead.
-          // See `containsAtScope` for more details.
-          if (
-            node.nodes.some((child) => child.kind === 'declaration') &&
-            !containsAtScope.has(node)
-          ) {
-            // Emitting each child instead of the node itself because we do want
-            // to flatten the current node and its selector that is already
-            // pushed to the stack.
-            for (let child of node.nodes) emit(child)
-            return WalkAction.Skip
-          }
-          break
-        }
-
-        case 'at-rule': {
-          nodes = null // Start a new level
-
-          // `@layer` is hoistable, but when it's empty then we have to make
-          // sure that we still emit it because this might influence the layer
-          // order. We can't just get rid of it.
-          if (node.nodes.length === 0 && !DROPPABLE_IF_EMPTY_AT_RULES.has(node.name)) {
-            emit(node)
-            skipExit.add(node)
-            return WalkAction.Skip
-          }
-
-          // Hoist at-rules
-          else if (HOISTABLE_AT_RULES.has(node.name)) {
-            let params = node.params
-
-            // `@scope` is the only hoistable at-rule with selectors in its
-            // prelude, and the only one that changes meaning when it stays
-            // nested inside a style rule. Resolve the prelude and its contents
-            // before hoisting, using one of two composition modes:
-            //
-            // 1. Variant-generated `@scope` rules attach the parent selector
-            //    (the utility) to the rules _inside_ the scope:
-            //
-            //    ```css
-            //    .scoped\:underline {
-            //      @scope (.from) to (.to) {
-            //        text-decoration-line: underline;
-            //      }
-            //    }
-            //    ```
-            //
-            //    becomes:
-            //
-            //    ```css
-            //    @scope (.from) to (.to) {
-            //      .scoped\:underline {
-            //        text-decoration-line: underline;
-            //      }
-            //    }
-            //    ```
-            //    This way the utility is properly sandwiched between the
-            //    `.from` and `.to` boundaries.
-            //
-            // 2. User-authored `@scope` rules keep their native CSS nesting
-            //    semantics: the `<scope-start>` selector is relative to the parent
-            //    rule, and the rules inside are relative to the scoping root:
-            //
-            //    ```css
-            //    .parent {
-            //      @scope (.from) {
-            //        color: red;
-            //      }
-            //    }
-            //    ```
-            //
-            //    becomes:
-            //
-            //    ```css
-            //    @scope (.parent .from) {
-            //      :where(:scope) {
-            //        color: red;
-            //      }
-            //    }
-            //    ```
-            //
-            //    In a perfect world we leave this alone, but Lightning CSS
-            //    seems to incorrectly transform this into a version where the
-            //    `.parent` class is gone entirely:
-            //
-            //    ```css
-            //    @scope (.from) {
-            //      color: red;
-            //    }
-            //    ```
-            //
-            // See: https://drafts.csswg.org/css-nesting-1/#nesting-at-scope
-            if (node.name === '@scope') {
-              let isVariant = sourceStack[sourceStack.length - 1] === 'variant'
-              let hasParent = selectorStack.length > 0
-
-              // Lightning CSS bug: This snippet will error
-              //
-              // ```css
-              // @scope {
-              //   --x: 1;
-              // }
-              // ```
-              //
-              // We will wrap these bare-declarations in a `&` rule to fix the crash:
-              // ```css
-              // @scope {
-              //   & {
-              //     --x: 1;
-              //   }
-              // }
-              // ```
-              {
-                let queue: (AtRule | Context)[] = [node]
-
-                for (let parent of queue) {
-                  let newNodes: AstNode[] = []
-                  let group: AstNode[] | null = null
-
-                  for (let child of parent.nodes) {
-                    if (child.kind === 'context') queue.push(child)
-
-                    if (child.kind === 'declaration' || child.kind === 'comment') {
-                      if (group === null) {
-                        group = []
-                        newNodes.push(styleRule('&', group))
-                      }
-                      group.push(child)
-                    } else {
-                      group = null
-                      newNodes.push(child)
-                    }
-                  }
-
-                  parent.nodes = newNodes
-                }
-              }
-
-              if (params.includes('&') || (!isVariant && hasParent)) {
-                // The selector to substitute for `&` in the `<scope-start>`
-                // selector: the elements matched by the nearest ancestor style
-                // rule, or `:scope` when there is none.
-                let parentSelector = hasParent ? selectorStack[selectorStack.length - 1][0] : null
-
-                let paramsAst = ValueParser.parse(params)
-
-                // Whether the current `(…)` group is a `<scope-end>` selector.
-                //
-                // ```css
-                // @scope (.from) to (.to)
-                //        ^^^^^^^           scope-start (optional)
-                //                   ^^^^^  scope-end
-                //
-                // @scope to (.to)
-                //           ^^^^^          scope-end
-                // ```
-                let isScopeEnd = false
-
-                // Whether the `<scope-start>` selector consumed the parent
-                // selector
-                let consumedParent = false
-
-                for (let paramNode of paramsAst) {
-                  if (paramNode.kind === 'word' && paramNode.value === 'to') {
-                    isScopeEnd = true
-                    continue
-                  }
-
-                  // A `(…)` group parses as a function call without a name
-                  if (paramNode.kind !== 'function' || paramNode.value !== '') continue
-
-                  let selector = ValueParser.toCss(paramNode.nodes)
-
-                  // A user-authored `<scope-start>` selector is relative to the
-                  // parent rule, and resolves exactly like nested style rule
-                  // selectors do: `&` refers to the elements matched by the
-                  // parent rule, and selectors without `&` are prefixed with
-                  // it.
-                  if (!isScopeEnd && !isVariant && parentSelector !== null) {
-                    paramNode.nodes = [
-                      ValueParser.word(
-                        segment(selector, ',')
-                          .map((part) => substituteNestingSelector(part.trim(), parentSelector))
-                          .join(', '),
-                      ),
-                    ]
-                    consumedParent = true
-                  }
-
-                  // Otherwise, only an explicit `&` is resolved. In the
-                  // `<scope-start>` selector, `&` refers to the elements
-                  // matched by the nearest ancestor style rule (or `:scope`
-                  // when there is none). In the `<scope-end>` selector, `&`
-                  // refers to the scoping root and behaves like
-                  // `:where(:scope)`.
-                  else if (selector.includes('&')) {
-                    let replacement = isScopeEnd ? ':where(:scope)' : (parentSelector ?? ':scope')
-
-                    paramNode.nodes = [
-                      ValueParser.word(substituteNestingSelector(selector, replacement)),
-                    ]
-                    if (!isScopeEnd && hasParent) consumedParent = true
-                  }
-                }
-
-                params = ValueParser.toCss(paramsAst)
-
-                // Mask the selector stack for the `@scope` rule's subtree, so
-                // its rules resolve like top-level rules within the scope (and
-                // `&` resolves to `:where(:scope)`). The stack is restored in
-                // the exit phase. See `maskedSelectorStacks` for more details.
-                if (consumedParent) {
-                  maskedSelectorStacks.set(node, selectorStack)
-                  selectorStack = []
-                }
-              }
-            }
-
-            atRuleStack.push([node.name, params, node.src, node.dst])
-          }
-
-          // If we can't hoist them, emit them immediately as-is
-          else {
-            emit(node)
-            skipExit.add(node)
-            return WalkAction.Skip
-          }
-          break
-        }
-
-        case 'declaration':
-        case 'comment': {
-          emit(node)
-          break
-        }
-
-        case 'context':
-          if (node.context.source) sourceStack.push(node.context.source)
-          break
-
-        case 'at-root':
-          break
-
-        default:
-          node satisfies never
-          break
-      }
+    utils: {
+      replaceWith(newNode: AstNode | AstNode[]): void
     },
-    exit(node) {
-      if (skipExit.delete(node)) return
-
-      switch (node.kind) {
-        case 'rule': {
-          nodes = null
-          selectorStack.pop()
-          break
-        }
-
-        case 'at-rule': {
-          nodes = null
-          atRuleStack.pop()
-
-          // Restore the selector stack that was masked by this `@scope` rule
-          let maskedSelectorStack = maskedSelectorStacks.get(node)
-          if (maskedSelectorStack) {
-            selectorStack = maskedSelectorStack
-            maskedSelectorStacks.delete(node)
-          }
-          break
-        }
-
-        case 'context':
-          if (node.context.source) sourceStack.pop()
-          break
-
-        case 'declaration':
-        case 'comment':
-        case 'at-root':
-          break
-
-        default:
-          node satisfies never
-          break
-      }
-    },
-  })
-
-  // Dedupe declarations that we've already seen before if they match the
-  // `property`, `value` and `important` information.
-  {
-    for (let nodes of dedupeDeclarationsInNodes) {
-      let seen = new Set()
-      for (let i = nodes.length - 1; i >= 0; --i) {
-        let node = nodes[i]
-        if (node.kind !== 'declaration') continue
-
-        let id = `${node.property}\0${node.value}\0${node.important}`
-
-        if (seen.has(id)) nodes.splice(i, 1)
-        else seen.add(id)
-      }
-    }
-  }
-
-  return result
-
-  function emit(node: AstNode) {
-    // Existing nodes are available, emit into those nodes
-    if (nodes) {
-      // Optimization: track used declarations in the current node.
-      if (node.kind === 'declaration') {
-        if (seenDeclarationProperties.has(node.property)) {
-          dedupeDeclarationsInNodes.add(nodes)
-        } else {
-          seenDeclarationProperties.add(node.property)
-        }
-      }
-
-      nodes.push(node)
-      return
-    }
-
-    // Nothing available, setup a fresh node
-    {
-      // There are no parent rules or at-rules available, which means that we
-      // can emit the node as-is.
-      if (selectorStack.length === 0 && atRuleStack.length === 0) {
-        let target = result
-        let lastNode = target[target.length - 1]
-
-        // Optimization: when the current and last node are the same, ignore the
-        // new node entirely otherwise we will get unnecessary duplicate
-        // results.
-        //
-        // We only care about at-rules with no body because some of them (such
-        // as `@charset` or `@layer`) need to be emitted. A normal rule that's
-        // empty doesn't need to be emitted. At-rules _with_ a body (such as
-        // `@font-face` or `@keyframes`) can share the same prelude while
-        // containing different bodies, so they must all be emitted.
-        if (
-          lastNode &&
-          lastNode.kind === 'at-rule' &&
-          node.kind === 'at-rule' &&
-          lastNode.nodes.length === 0 &&
-          node.nodes.length === 0 &&
-          lastNode.name === node.name &&
-          lastNode.params === node.params
-        ) {
-          return
-        }
-
-        result.push(node)
-        return
-      }
-
-      // Track the new "parent" nodes
-      {
-        nodes = [node]
-
-        // Clear out seen declarations from the previous work in progress nodes
-        seenDeclarationProperties.clear()
-
-        // Track new declaration
-        if (node.kind === 'declaration') {
-          seenDeclarationProperties.add(node.property)
-        }
-      }
-
-      // Track the new root node that we build up to store in the final AST
-      let root = null as AstNode | null
-
-      let target = result
-      let atRuleOffset = 0
-
-      // Optimization: merge adjacent at-rules
-      //
-      // Figure out whether we can push our new node into a previous node that
-      // was already emitted.
-      //
-      // We have to make sure that the order stays the same, so therefore we
-      // only ever have to look at the last node that was emitted.
-      {
-        let lastNode = target[target.length - 1]
-        if (lastNode && lastNode.kind === 'at-rule') {
-          for (let i = 0; i < atRuleStack.length; i++) {
-            let atRule = atRuleStack[i]
-            if (!lastNode) break
-            if (lastNode.kind !== 'at-rule') break
-            if (lastNode.name !== atRule[0]) break
-            if (lastNode.params !== atRule[1]) break
-
-            atRuleOffset++
-            target = lastNode.nodes
-            lastNode = lastNode.nodes[lastNode.nodes.length - 1]
-          }
-        }
-      }
-
-      // Build up the rule
-      if (selectorStack.length > 0) {
-        let [selector, src, dst] = selectorStack[selectorStack.length - 1]
-
-        // Optimization: merge adjacent rules with the same selector
-        //
-        // Figure out whether we can push into an existing rule.
-        //
-        // If we have some at-rules that we have to keep into account, then we
-        // definitely can't.
-        if (atRuleStack.length - atRuleOffset <= 0) {
-          let lastNode = target[target.length - 1]
-          if (lastNode && lastNode.kind === 'rule' && lastNode.selector === selector) {
-            lastNode.nodes.push(...nodes)
-
-            // Ensure that our current nodes points to the nodes of the
-            // `lastNode`, otherwise we will lose information.
-            nodes = lastNode.nodes
-
-            // We appended a group that could contain declarations already in the
-            // existing rule, so let the final dedupe pass handle it once.
-            //
-            // Note: we could loop over _all_ previous nodes to figure out if we
-            // really want to dedupe this. But this could result in a bunch of
-            // duplicate work if we have `n` nodes that we want to merge
-            // together.
-            dedupeDeclarationsInNodes.add(nodes)
-
-            // We know that we don't have to handle any more at-rules, so we can
-            // bail early since we just merged the nodes with the same selector.
-            return
-          }
-        }
-
-        // Can't push into existing node, create a new node
-        root = rule(selector, nodes)
-        if (src || dst) Object.assign(root, { src, dst })
-      }
-
-      // Wrap in at-rules, if we can push into an existing node then we can
-      // ignore `offset` amount of nodes since the `root`/`nodes` will already
-      // point to a nested node.
-      for (let i = atRuleStack.length - 1; i >= atRuleOffset; --i) {
-        let [name, params, src, dst] = atRuleStack[i]
-
-        root = atRule(name, params, root ? [root] : nodes)
-        if (src || dst) Object.assign(root, { src, dst })
-      }
-
-      // Track the root node in the AST
-      if (root) {
-        target.push(root)
-      }
-
-      // We didn't build up any new root, so we can move our node directly into
-      // the target. This can happen when we emit a node that is not a
-      // declaration or a comment.
-      else {
-        target.push(...nodes)
-      }
-    }
-  }
-
-  // Substitutes the `&` selector with the parent selector with `:is(…)` semantics.
-  //
-  // If the `&` is not found, we will prepend it using a descendant combinator.
-  // E.g.: `& ${selector}` → `${parentSelector} ${selector}`
-  //
-  // In some situations we can get rid of the `:is(…)` wrapper, but only if it's safe to do so.
-  function substituteNestingSelector(selector: string, parentSelector: string): string {
-    // Slow path: we need to replace the `&` with the parent selector. A simple
-    // `replaceAll(…)` won't work because a `&` could be escaped, or could be
-    // part of an attribute selector.
-    //
-    // Much safer to parse the selector and replace the `&` that way
-    if (selector.includes('&')) {
-      let ast = SelectorParser.parse(selector)
-      let changed = false
-      walk(ast, {
-        enter(node, ctx) {
-          if (node.kind !== 'selector' || node.value !== '&') return
-
-          changed = true
-
-          // Safest option: use `is(…)` semantics when substituting `&` for the
-          // parent selector.
-          node.value = `:is(${parentSelector})`
-
-          // We should always have a parent, so this shouldn't happen
-          if (ctx.parent === null) return
-
-          // Optimizations:
-          let parentAst = parseSelectorCache.get(parentSelector)
-
-          // 1. If we're dealing with multiple selectors, then we know that the
-          //    `:is(…)` needs to stay. Nothing to optimize.
-          if (parentAst.length === 1 && parentAst[0].kind === 'list') {
-            return // Keep `:is(…)` semantics
-          }
-
-          // 2. We know that `&` is standalone when it's inside of a complex
-          //    selector. E.g. `[before] & [after]`
-          if (ctx.parent.kind === 'complex') {
-            // `& [after]`
-            //
-            // `:is(…)` semantics are not required, because these are equivalent:
-            //
-            // - `:is(div) [after]`       → `div [after]`
-            // - `:is(.x) [after]`        → `.x [after]`
-            // - `:is([before]) [after]`  → `[before] [after]`
-            // - `:is(.a > .b) [after]`   → `.a > .b [after]`
-            if (ctx.index === 0) {
-              node.value = parentSelector
-              return
-            }
-
-            // `[before] &`
-            //
-            // `:is(…)` semantics are required if we're dealing with a complex
-            // parent selector. Otherwise the meaning of the selector could
-            // change:
-            //
-            // - `[before] :is(div)`      → `[before] div`
-            // - `[before] :is(.x)`       → `[before] .x`
-            // - `[before] :is([after])`  → `[before] [after]`
-            // - `[before] :is(.a > .b)`  → `[before] :is(.a > .b)` (!)
-            else if (ctx.index === ctx.siblings.length - 1) {
-              if (parentAst[0].kind === 'complex') {
-                return // Keep `:is(…)` semantics
-              }
-
-              node.value = parentSelector
-              return
-            }
-
-            // `[before] & [after]`
-            //
-            // `:is(…)` semantics are required if we're dealing with a complex
-            // parent selector. Otherwise the meaning of the selector could
-            // change:
-            //
-            // - `[before] :is(div) [after]`      → `[before] div [after]`
-            // - `[before] :is(.x) [after]`       → `[before] .x [after]`
-            // - `[before] :is(.a > .b) [after]`  → `[before] :is(.a > .b) [after]` (!)
-            else {
-              if (parentAst[0].kind === 'complex') {
-                return // Keep `:is(…)` semantics
-              }
-
-              node.value = parentSelector
-              return
-            }
-          }
-
-          // 3. We know that `&` is attached to some other selector when it's
-          //    inside of a compound selector.
-          //
-          //    E.g. `[before]&[after]`
-          //
-          //    We have to be careful that our parent, when it's part of a complex
-          //    selector, that the same rules apply
-          //
-          //    E.g.: `[before] &[after]`
-          //                    ^          current node
-          //                    ^^^^^^^^   compound selector
-          //           ^^^^^^^^^^^^^^^^^   complex selector
-          //
-          else if (ctx.parent.kind === 'compound') {
-            if (parentAst[0].kind === 'complex') {
-              let path = ctx.path()
-              let grandParent = path[path.length - 2]
-
-              // When our compound parent is part of a complex selector, and it's
-              // not the very first node, then we can't safely get rid of the
-              // `:is(…)` if the last selector is a complex selector as well,
-              // unless the `&` maps to a single selector or compound selector.
-              //
-              // ```css
-              // .foo .bar {            /* Complex selector */
-              //   .system &:focus {    /* Complex selector + compound selecto*/
-              //     --x: 1;
-              //   }
-              // }
-              // .foo:hover {           /* Compound selector */
-              //   .system &:focus {    /* Complex selector + compound selector */
-              //     --x: 2;
-              //   }
-              // }
-              // ```
-              //
-              // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
-              //
-              // ```css
-              // .system :is(.foo .bar):focus { /* Cannot drop the `:is(…)`, otherwise `.system` and `.foo` can be swapped in the DOM */
-              //   --x: 1;
-              // }
-              // .system .foo:hover:focus {
-              //   --x: 2;
-              // }
-              // ```
-              if (
-                grandParent &&
-                grandParent.kind === 'complex' &&
-                grandParent.nodes[0] !== ctx.parent
-              ) {
-                return // Keep `:is(…)` semantics
-              }
-            }
-
-            // `&*` and `&div` are invalid CSS so these should stay invalid. They
-            // should be written as `*&` and `div&` instead.
-            if (
-              ctx.siblings
-                .slice(ctx.index + 1)
-                .some(
-                  (sibling) =>
-                    SelectorParser.isUniversalSelector(sibling) ||
-                    SelectorParser.isTypeSelector(sibling),
-                )
-            ) {
-              return // Keep `:is(…)` semantics
-            }
-
-            // `&[after]`
-            //
-            // `:is(…)` semantics are not required, because these are equivalent:
-            //
-            // - `:is(div)[after]`       → `div[after]`
-            // - `:is(.x)[after]`        → `.x[after]`
-            // - `:is([before])[after]`  → `[before][after]`
-            // - `:is(.a > .b)[after]`   → `.a > .b[after]`
-            if (ctx.index === 0) {
-              node.value = parentSelector
-              return
-            }
-
-            // `[before]&`
-            //
-            // `:is(…)` semantics are required if we're dealing with a
-            //
-            // - complex parent selector, to prevent changing the meaning of the selector
-            // - a universal selector, because `*` needs to be first
-            // - a type selector, because `div` needs to be first
-            //
-            // - `[before]:is(div)`      → `[before]:is(div)` (!)
-            // - `[before]:is(*)`        → `[before]:is(*)` (!)
-            // - `[before]:is(.a > .b)`  → `[before]:is(.a > .b)` (!)
-            // - `[before]:is(.x)`       → `[before].x`
-            else if (ctx.index === ctx.siblings.length - 1) {
-              if (
-                parentAst[0].kind === 'complex' ||
-                SelectorParser.isUniversalSelector(parentAst[0]) ||
-                SelectorParser.isTypeSelector(parentAst[0])
-              ) {
-                return // Keep `:is(…)` semantics
-              }
-
-              node.value = parentSelector
-              return
-            }
-
-            // `[before]&[after]`
-            //
-            // `:is(…)` semantics are required if we're dealing with a
-            //
-            // - complex parent selector, to prevent changing the meaning of the selector
-            // - a universal selector, because `*` needs to be first
-            // - a type selector, because `div` needs to be first
-            //
-            // - `[before]:is(div)[after]`      → `[before]:is(div)[after]` (!)
-            // - `[before]:is(*)[after]`        → `[before]:is(*)[after]` (!)
-            // - `[before]:is(.a > .b)[after]`  → `[before]:is(.a > .b)[after]` (!)
-            // - `[before]:is(.x)[after]`       → `[before].x[after]`
-            else {
-              if (
-                parentAst[0].kind === 'complex' ||
-                SelectorParser.isUniversalSelector(parentAst[0]) ||
-                SelectorParser.isTypeSelector(parentAst[0])
-              ) {
-                return // Keep `:is(…)` semantics
-              }
-
-              node.value = parentSelector
-              return
-            }
-          }
-
-          // 4. When the current node is a function argument (e.g. `:not(&))`,
-          //    then we can drop the `:is(…)` entirely.
-          //
-          //    The only exception is when the parent has multiple selectors
-          //    because then we would introduce multiple arguments. Multiple
-          //    selectors are already handled.
-          else if (ctx.parent.kind === 'function') {
-            node.value = parentSelector
-            return
-          }
+  ) => void | WalkAction,
+) {
+  for (let i = 0; i < ast.length; i++) {
+    let node = ast[i]
+    let status =
+      visit(node, {
+        replaceWith(newNode) {
+          ast.splice(i, 1, ...(Array.isArray(newNode) ? newNode : [newNode]))
+          // We want to visit the newly replaced node(s), which start at the
+          // current index (i). By decrementing the index here, the next loop
+          // will process this position (containing the replaced node) again.
+          i--
         },
-        exit(node, ctx) {
-          // Optimization: We can remove the universal selector `*` if they are
-          // part of a compound selector. E.g.:
-          //
-          // - `*:hover` → `:hover`
-          // - `*[attribute]` → `[attribute]`
-          //
-          // Except when the `*` is a namespace, e.g.: `*|div`, because `*|div`
-          // (any namespace) and `|div` (no namespace) have different meanings.
-          if (
-            ctx.index === 0 &&
-            ctx.siblings.length > 1 &&
-            ctx.parent?.kind === 'compound' &&
-            SelectorParser.isUniversalSelector(node)
-          ) {
-            let next = ctx.siblings[1]
-            if (next.kind === 'selector' && next.value.charCodeAt(0) === PIPE) {
-              return
-            }
-            return WalkAction.ReplaceSkip([])
-          }
-        },
-      })
+      }) ?? WalkAction.Continue
 
-      if (changed) return SelectorParser.toCss(ast)
+    // Stop the walk entirely
+    if (status === WalkAction.Stop) return
+
+    // Skip visiting the children of this node
+    if (status === WalkAction.Skip) continue
+
+    if (node.kind === 'rule') {
+      walk(node.nodes, visit)
     }
-
-    // Fast path: we know there isn't an `&` so we can prepend the parent
-    // selector immediately.
-    let parentAst = parseSelectorCache.get(parentSelector)
-    return `${parentAst.length === 1 && parentAst[0].kind === 'list' ? `:is(${parentSelector})` : parentSelector} ${selector}`
   }
 }
 
-// A set of at-rules that can be hoisted to the top without any repercussions.
-// Typically at-rules that rely on the environment, not parent information and
-// contain other rules/declarations.
-const HOISTABLE_AT_RULES = new Set([
-  '@container',
-  '@layer',
-  '@media',
-  '@page',
-  '@scope',
-  '@starting-style',
-  '@supports',
-  '@view-transition',
-])
-
-// A set of at-rules that can be dropped if they don't contain any nodes. We
-// don't have the distinction between an at-rule with no body, or an at-rule
-// with a body that is empty right now.
-const DROPPABLE_IF_EMPTY_AT_RULES = new Set([
-  '@container',
-  '@media',
-  '@page',
-  '@scope',
-  '@starting-style',
-  '@supports',
-  '@view-transition',
-])
-
-export function toCss(ast: AstNode[], track?: boolean) {
-  let pos = 0
-
-  let source: Source = {
-    file: null,
-    code: '',
-  }
+export function toCss(ast: AstNode[]) {
+  let atRoots: string = ''
+  let seenAtProperties = new Set<string>()
 
   function stringify(node: AstNode, depth = 0): string {
     let css = ''
     let indent = '  '.repeat(depth)
 
-    // Declaration
-    if (node.kind === 'declaration') {
-      css += `${indent}${node.property}: ${node.value}${node.important ? ' !important' : ''};\n`
-
-      if (track) {
-        // indent
-        pos += indent.length
-
-        // node.property
-        let start = pos
-        pos += node.property.length
-
-        // `: `
-        pos += 2
-
-        // node.value
-        pos += node.value?.length ?? 0
-
-        // !important
-        if (node.important) {
-          pos += 11
-        }
-
-        let end = pos
-
-        // `;\n`
-        pos += 2
-
-        node.dst = [source, start, end]
-      }
-    }
-
     // Rule
-    else if (node.kind === 'rule') {
-      css += `${indent}${node.selector} {\n`
-
-      if (track) {
-        // indent
-        pos += indent.length
-
-        // node.selector
-        let start = pos
-        pos += node.selector.length
-
-        // ` `
-        pos += 1
-
-        let end = pos
-        node.dst = [source, start, end]
-
-        // `{\n`
-        pos += 2
+    if (node.kind === 'rule') {
+      // Pull out `@at-root` rules to append later
+      if (node.selector === '@at-root') {
+        for (let child of node.nodes) {
+          atRoots += stringify(child, 0)
+        }
+        return css
       }
 
-      for (let child of node.nodes) {
-        css += stringify(child, depth + 1)
+      if (node.selector === '@tailwind utilities') {
+        for (let child of node.nodes) {
+          css += stringify(child, depth)
+        }
+        return css
       }
 
-      css += `${indent}}\n`
-
-      if (track) {
-        // indent
-        pos += indent.length
-
-        // `}\n`
-        pos += 2
-      }
-    }
-
-    // AtRule
-    else if (node.kind === 'at-rule') {
       // Print at-rules without nodes with a `;` instead of an empty block.
       //
       // E.g.:
@@ -1726,165 +119,46 @@ export function toCss(ast: AstNode[], track?: boolean) {
       // ```css
       // @layer base, components, utilities;
       // ```
-      if (node.nodes.length === 0) {
-        let css = `${indent}${node.name} ${node.params};\n`
-
-        if (track) {
-          // indent
-          pos += indent.length
-
-          // node.name
-          let start = pos
-          pos += node.name.length
-
-          // ` `
-          pos += 1
-
-          // node.params
-          pos += node.params.length
-          let end = pos
-
-          // `;\n`
-          pos += 2
-
-          node.dst = [source, start, end]
-        }
-
-        return css
+      if (node.selector[0] === '@' && node.nodes.length === 0) {
+        return `${indent}${node.selector};\n`
       }
 
-      css += `${indent}${node.name}${node.params ? ` ${node.params} ` : ' '}{\n`
-
-      if (track) {
-        // indent
-        pos += indent.length
-
-        // node.name
-        let start = pos
-        pos += node.name.length
-
-        if (node.params) {
-          // ` `
-          pos += 1
-
-          // node.params
-          pos += node.params.length
+      if (node.selector[0] === '@' && node.selector.startsWith('@property ') && depth === 0) {
+        // Don't output duplicate `@property` rules
+        if (seenAtProperties.has(node.selector)) {
+          return ''
         }
 
-        // ` `
-        pos += 1
-
-        let end = pos
-        node.dst = [source, start, end]
-
-        // `{\n`
-        pos += 2
+        seenAtProperties.add(node.selector)
       }
 
+      css += `${indent}${node.selector} {\n`
       for (let child of node.nodes) {
         css += stringify(child, depth + 1)
       }
-
       css += `${indent}}\n`
-
-      if (track) {
-        // indent
-        pos += indent.length
-
-        // `}\n`
-        pos += 2
-      }
     }
 
     // Comment
     else if (node.kind === 'comment') {
       css += `${indent}/*${node.value}*/\n`
-
-      if (track) {
-        // indent
-        pos += indent.length
-
-        // The comment itself. We do this instead of just the inside because
-        // it seems more useful to have the entire comment span tracked.
-        let start = pos
-        pos += 2 + node.value.length + 2
-        let end = pos
-
-        node.dst = [source, start, end]
-
-        // `\n`
-        pos += 1
-      }
     }
 
-    // These should've been handled already by `optimizeAst` which
-    // means we can safely ignore them here. We return an empty string
-    // immediately to signal that something went wrong.
-    else if (node.kind === 'context' || node.kind === 'at-root') {
-      return ''
-    }
-
-    // Unknown
-    else {
-      node satisfies never
+    // Declaration
+    else if (node.property !== '--tw-sort' && node.value !== undefined && node.value !== null) {
+      css += `${indent}${node.property}: ${node.value}${node.important ? '!important' : ''};\n`
     }
 
     return css
   }
 
   let css = ''
-
   for (let node of ast) {
-    css += stringify(node, 0)
-  }
-
-  source.code = css
-
-  return css
-}
-
-function findNode(ast: AstNode[], fn: (node: AstNode) => boolean): AstNode[] | null {
-  let foundPath: AstNode[] = []
-  walk(ast, (node, ctx) => {
-    if (fn(node)) {
-      foundPath = ctx.path()
-      foundPath.push(node)
-      return WalkAction.Stop
-    }
-  })
-  return foundPath
-}
-
-// Find out if a variable is either used directly or if any of the variables that depend on it are
-// used
-function isVariableUsed(
-  variable: string,
-  theme: Theme,
-  variableDependencies: Map<string, Set<string>>,
-  alreadySeenVariables: Set<string> = new Set(),
-): boolean {
-  // Break recursions when visiting a variable twice
-  if (alreadySeenVariables.has(variable)) {
-    return true
-  } else {
-    alreadySeenVariables.add(variable)
-  }
-
-  let options = theme.getOptions(variable)
-  if (options & (ThemeOptions.STATIC | ThemeOptions.USED)) {
-    return true
-  } else {
-    let dependencies = variableDependencies.get(variable) ?? []
-    for (let dependency of dependencies) {
-      if (isVariableUsed(dependency, theme, variableDependencies, alreadySeenVariables)) {
-        return true
-      }
+    let result = stringify(node)
+    if (result !== '') {
+      css += result
     }
   }
 
-  return false
-}
-
-function extractKeyframeNames(value: string): string[] {
-  return value.split(/[\s,]+/)
+  return `${css}${atRoots}`
 }
diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts
deleted file mode 100644
index a19123105..000000000
--- a/packages/tailwindcss/src/at-import.test.ts
+++ /dev/null
@@ -1,653 +0,0 @@
-import dedent from 'dedent'
-import { expect, test, vi } from 'vitest'
-import { compile, type Config } from './index'
-import plugin from './plugin'
-import { compileCss, run } from './test-utils/run'
-
-const css = dedent
-
-test('can resolve relative @imports', async () => {
-  async function loadStylesheet(id: string, base: string) {
-    expect(base).toBe('/root')
-    expect(id).toBe('./foo/bar.css')
-    return {
-      content: css`
-        .foo {
-          color: red;
-        }
-      `,
-      base: '/root/foo',
-      path: '',
-    }
-  }
-
-  expect(
-    await compileCss(
-      css`
-        @import './foo/bar.css';
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .foo {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('can recursively resolve relative @imports', async () => {
-  async function loadStylesheet(id: string, base: string) {
-    if (base === '/root' && id === './foo/bar.css') {
-      return {
-        content: css`
-          @import './bar/baz.css';
-        `,
-        base: '/root/foo',
-        path: '',
-      }
-    } else if (base === '/root/foo' && id === './bar/baz.css') {
-      return {
-        content: css`
-          .baz {
-            color: blue;
-          }
-        `,
-        base: '/root/foo/bar',
-        path: '',
-      }
-    }
-
-    throw new Error(`Unexpected import: ${id}`)
-  }
-
-  expect(
-    await compileCss(
-      css`
-        @import './foo/bar.css';
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .baz {
-      color: #00f;
-    }
-    "
-  `)
-})
-
-let exampleCSS = css`
-  a {
-    color: red;
-  }
-`
-async function loadStylesheet(id: string) {
-  if (!id.endsWith('example.css')) throw new Error('Unexpected import: ' + id)
-  return {
-    content: exampleCSS,
-    base: '/root',
-    path: '',
-  }
-}
-
-test('extracts path from @import nodes', async () => {
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css';
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    a {
-      color: red;
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import './example.css';
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    a {
-      color: red;
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import '/example.css';
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    a {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('url() imports are passed-through', async () => {
-  expect(
-    await compileCss(
-      css`
-        @import url('example.css');
-      `,
-      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @import "example.css";
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import url('./example.css');
-      `,
-      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @import "./example.css";
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import url('/example.css');
-      `,
-      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @import "/example.css";
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import url(example.css);
-      `,
-      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @import "example.css";
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import url(./example.css);
-      `,
-      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @import "./example.css";
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import url(/example.css);
-      `,
-      { base: '/root', loadStylesheet: () => Promise.reject(new Error('Unexpected stylesheet')) },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @import "/example.css";
-    "
-  `)
-})
-
-test('handles case-insensitive @import directive', async () => {
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css';
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    a {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('@media', async () => {
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' print;
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media print {
-      a {
-        color: red;
-      }
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' print, screen;
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media print, screen {
-      a {
-        color: red;
-      }
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' screen and (orientation: landscape);
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media screen and (orientation: landscape) {
-      a {
-        color: red;
-      }
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' foo(bar);
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media foo(bar) {
-      a {
-        color: red;
-      }
-    }
-    "
-  `)
-})
-
-test('@supports', async () => {
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' supports(display: grid);
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @supports (display: grid) {
-      a {
-        color: red;
-      }
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' supports(display: grid) screen and (max-width: 400px);
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @supports (display: grid) {
-      @media screen and (max-width: 400px) {
-        a {
-          color: red;
-        }
-      }
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' supports((not (display: grid)) and (display: flex)) screen and
-          (max-width: 400px);
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @supports (not (display: grid)) and (display: flex) {
-      @media screen and (max-width: 400px) {
-        a {
-          color: red;
-        }
-      }
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      // prettier-ignore
-      css`
-        @import 'example.css'
-        supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @supports selector(h2 > p) and font-tech(color-COLRv1) {
-      a {
-        color: red;
-      }
-    }
-    "
-  `)
-})
-
-test('@layer', async () => {
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' layer(utilities);
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer utilities {
-      a {
-        color: red;
-      }
-    }
-    "
-  `)
-
-  expect(
-    await compileCss(
-      css`
-        @import 'example.css' layer();
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer {
-      a {
-        color: red;
-      }
-    }
-    "
-  `)
-})
-
-test('supports theme(reference) imports', async () => {
-  expect(
-    await run(
-      ['text-red-500'],
-      css`
-        @tailwind utilities;
-        @import 'example.css' theme(reference);
-      `,
-      {
-        base: '/root',
-        loadStylesheet: () =>
-          Promise.resolve({
-            content: css`
-              @theme {
-                --color-red-500: red;
-              }
-            `,
-            base: '',
-            path: '',
-          }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .text-red-500 {
-      color: var(--color-red-500, red);
-    }
-    "
-  `)
-})
-
-test('updates the base when loading modules inside nested files', async () => {
-  async function loadStylesheet() {
-    return {
-      content: css`
-        @config './nested-config.js';
-        @plugin './nested-plugin.js';
-      `,
-      base: '/root/foo',
-      path: '',
-    }
-  }
-  using loadModule = vi.fn().mockResolvedValue({ base: '', path: '', module: () => {} })
-
-  expect(
-    await compileCss(
-      css`
-        @import './foo/bar.css';
-        @config './root-config.js';
-        @plugin './root-plugin.js';
-      `,
-      { base: '/root', loadStylesheet, loadModule },
-    ),
-  ).toBe('')
-
-  expect(loadModule).toHaveBeenNthCalledWith(1, './nested-config.js', '/root/foo', 'config')
-  expect(loadModule).toHaveBeenNthCalledWith(2, './root-config.js', '/root', 'config')
-  expect(loadModule).toHaveBeenNthCalledWith(3, './nested-plugin.js', '/root/foo', 'plugin')
-  expect(loadModule).toHaveBeenNthCalledWith(4, './root-plugin.js', '/root', 'plugin')
-})
-
-test('emits the right base for @source directives inside nested files', async () => {
-  async function loadStylesheet() {
-    return {
-      content: css`
-        @source './nested/**/*.css';
-      `,
-      base: '/root/foo',
-      path: '',
-    }
-  }
-
-  let compiler = await compile(
-    css`
-      @import './foo/bar.css';
-      @source './root/**/*.css';
-    `,
-    { base: '/root', loadStylesheet },
-  )
-
-  expect(compiler.sources).toEqual([
-    { pattern: './nested/**/*.css', base: '/root/foo', negated: false },
-    { pattern: './root/**/*.css', base: '/root', negated: false },
-  ])
-})
-
-test('emits the right base for @source found inside JS configs and plugins from nested imports', async () => {
-  async function loadStylesheet() {
-    return {
-      content: css`
-        @config './nested-config.js';
-        @plugin './nested-plugin.js';
-      `,
-      base: '/root/foo',
-      path: '',
-    }
-  }
-
-  using loadModule = vi.fn().mockImplementation((id: string) => {
-    let base = id.includes('nested') ? '/root/foo' : '/root'
-    if (id.includes('config')) {
-      let glob = id.includes('nested') ? './nested-config/*.html' : './root-config/*.html'
-      let pluginGlob = id.includes('nested')
-        ? './nested-config-plugin/*.html'
-        : './root-config-plugin/*.html'
-      return {
-        module: {
-          content: [glob],
-          plugins: [plugin(() => {}, { content: [pluginGlob] })],
-        } satisfies Config,
-        base: base + '-config',
-        path: '',
-      }
-    } else {
-      let glob = id.includes('nested') ? './nested-plugin/*.html' : './root-plugin/*.html'
-      return {
-        module: plugin(() => {}, { content: [glob] }),
-        base: base + '-plugin',
-        path: '',
-      }
-    }
-  })
-
-  let compiler = await compile(
-    css`
-      @import './foo/bar.css';
-      @config './root-config.js';
-      @plugin './root-plugin.js';
-    `,
-    { base: '/root', loadStylesheet, loadModule },
-  )
-
-  expect(compiler.sources).toEqual([
-    { pattern: './nested-plugin/*.html', base: '/root/foo-plugin', negated: false },
-    { pattern: './root-plugin/*.html', base: '/root-plugin', negated: false },
-
-    { pattern: './nested-config-plugin/*.html', base: '/root/foo-config', negated: false },
-    { pattern: './nested-config/*.html', base: '/root/foo-config', negated: false },
-
-    { pattern: './root-config-plugin/*.html', base: '/root-config', negated: false },
-    { pattern: './root-config/*.html', base: '/root-config', negated: false },
-  ])
-})
-
-test('it crashes when inside a cycle', async () => {
-  let input = css`
-    @import 'foo.css';
-  `
-
-  async function loadStylesheet() {
-    return {
-      content: input,
-      base: '/root',
-      path: '',
-    }
-  }
-
-  await expect(compileCss(input, { base: '/root', loadStylesheet })).rejects.toMatchInlineSnapshot(
-    `[Error: Exceeded maximum recursion depth while resolving \`foo.css\` in \`/root\`)]`,
-  )
-})
-
-test('resolves @reference as `@import "…" reference`', async () => {
-  async function loadStylesheet(id: string, base: string) {
-    expect(base).toBe('/root')
-    expect(id).toBe('./foo/bar.css')
-    return {
-      content: css`
-        @theme {
-          --color-red-500: red;
-        }
-        .foo {
-          color: red;
-        }
-      `,
-      base: '/root/foo',
-      path: '',
-    }
-  }
-
-  expect(
-    await run(
-      ['text-red-500'],
-      css`
-        @reference './foo/bar.css';
-        @tailwind utilities;
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .text-red-500 {
-      color: var(--color-red-500, red);
-    }
-    "
-  `)
-})
-
-test('resolves `@variant` used as `@custom-variant` inside `@reference`', async () => {
-  async function loadStylesheet(id: string, base: string) {
-    expect(base).toBe('/root')
-    expect(id).toBe('./foo/bar.css')
-    return {
-      content: css`
-        @variant dark {
-          &:where([data-theme='dark'] *) {
-            @slot;
-          }
-        }
-      `,
-      base: '/root/foo',
-      path: '',
-    }
-  }
-
-  expect(
-    await run(
-      ['dark:flex'],
-      css`
-        @reference './foo/bar.css';
-        @tailwind utilities;
-      `,
-      { base: '/root', loadStylesheet },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .dark\\:flex:where([data-theme="dark"] *) {
-      display: flex;
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/at-import.ts b/packages/tailwindcss/src/at-import.ts
deleted file mode 100644
index ba7172f8e..000000000
--- a/packages/tailwindcss/src/at-import.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import { Features } from '.'
-import { atRule, context, type AstNode } from './ast'
-import * as CSS from './css-parser'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction } from './walk'
-
-type LoadStylesheet = (
-  id: string,
-  basedir: string,
-) => Promise<{
-  path: string
-  base: string
-  content: string
-}>
-
-export async function substituteAtImports(
-  ast: AstNode[],
-  base: string,
-  loadStylesheet: LoadStylesheet,
-  recurseCount = 0,
-  track = false,
-) {
-  let features = Features.None
-  let promises: Promise<void>[] = []
-
-  walk(ast, (node) => {
-    if (node.kind === 'at-rule' && (node.name === '@import' || node.name === '@reference')) {
-      let parsed = parseImportParams(ValueParser.parse(node.params))
-      if (parsed === null) return
-      if (node.name === '@reference') {
-        parsed.media = 'reference'
-      }
-
-      features |= Features.AtImport
-
-      let { uri, layer, media, supports } = parsed
-
-      // Skip importing data or remote URIs
-      if (uri.startsWith('data:')) return
-      if (uri.startsWith('http://') || uri.startsWith('https://')) return
-
-      let contextNode = context({}, [])
-
-      promises.push(
-        (async () => {
-          // Since we do not have fully resolved paths in core, we can't
-          // reliably detect circular imports. Instead, we try to limit the
-          // recursion depth to a number that is too large to be reached in
-          // practice.
-          if (recurseCount > 100) {
-            throw new Error(
-              `Exceeded maximum recursion depth while resolving \`${uri}\` in \`${base}\`)`,
-            )
-          }
-
-          let loaded = await loadStylesheet(uri, base)
-          let ast = CSS.parse(loaded.content, { from: track ? loaded.path : undefined })
-          await substituteAtImports(ast, loaded.base, loadStylesheet, recurseCount + 1, track)
-
-          contextNode.nodes = buildImportNodes(
-            node,
-            [context({ base: loaded.base }, ast)],
-            layer,
-            media,
-            supports,
-          )
-        })(),
-      )
-
-      // The resolved Stylesheets already have their transitive @imports
-      // resolved, so we can skip walking them.
-      return WalkAction.ReplaceSkip(contextNode)
-    }
-  })
-
-  if (promises.length > 0) {
-    await Promise.all(promises)
-  }
-
-  return features
-}
-
-// Modified and inlined version of `parse-statements` from
-// `postcss-import` <https://github.com/postcss/postcss-import>
-// Copyright (c) 2014 Maxime Thirouin, Jason Campbell & Kevin Mårtensson
-// Released under the MIT License.
-export function parseImportParams(params: ValueParser.ValueAstNode[]) {
-  let uri
-  let layer: string | null = null
-  let media: string | null = null
-  let supports: string | null = null
-
-  for (let i = 0; i < params.length; i++) {
-    let node = params[i]
-
-    if (node.kind === 'separator') continue
-
-    if (node.kind === 'word' && !uri) {
-      if (!node.value) return null
-      if (node.value[0] !== '"' && node.value[0] !== "'") return null
-
-      uri = node.value.slice(1, -1)
-      continue
-    }
-
-    if (node.kind === 'function' && node.value.toLowerCase() === 'url') {
-      // `@import` with `url(…)` functions are not inlined but skipped and kept
-      // in the final CSS instead.
-      // E.g.: `@import url("https://fonts.google.com")`
-      return null
-    }
-
-    if (!uri) return null
-
-    if (
-      (node.kind === 'word' || node.kind === 'function') &&
-      node.value.toLowerCase() === 'layer'
-    ) {
-      if (layer) return null
-      if (supports) {
-        throw new Error(
-          '`layer(…)` in an `@import` should come before any other functions or conditions',
-        )
-      }
-
-      if ('nodes' in node) {
-        layer = ValueParser.toCss(node.nodes)
-      } else {
-        layer = ''
-      }
-
-      continue
-    }
-
-    if (node.kind === 'function' && node.value.toLowerCase() === 'supports') {
-      if (supports) return null
-      supports = ValueParser.toCss(node.nodes)
-      continue
-    }
-
-    media = ValueParser.toCss(params.slice(i))
-    break
-  }
-
-  if (!uri) return null
-
-  return { uri, layer, media, supports }
-}
-
-function buildImportNodes(
-  importNode: AstNode,
-  importedAst: AstNode[],
-  layer: string | null,
-  media: string | null,
-  supports: string | null,
-): AstNode[] {
-  let root = importedAst
-
-  if (layer !== null) {
-    let node = atRule('@layer', layer, root)
-    node.src = importNode.src
-    root = [node]
-  }
-
-  if (media !== null) {
-    let node = atRule('@media', media, root)
-    node.src = importNode.src
-    root = [node]
-  }
-
-  if (supports !== null) {
-    let node = atRule('@supports', supports[0] === '(' ? supports : `(${supports})`, root)
-    node.src = importNode.src
-    root = [node]
-  }
-
-  return root
-}
diff --git a/packages/tailwindcss/src/attribute-selector-parser.bench.ts b/packages/tailwindcss/src/attribute-selector-parser.bench.ts
deleted file mode 100644
index 2d6e89590..000000000
--- a/packages/tailwindcss/src/attribute-selector-parser.bench.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { bench, describe } from 'vitest'
-import * as AttributeSelectorParser from './attribute-selector-parser'
-
-let examples = [
-  '[open]',
-  '[data-foo]',
-  '[data-state=expanded]',
-  '[data-state = expanded ]',
-  '[data-state*="expanded"]',
-  '[data-state*="expanded"i]',
-  '[data-state*=expanded i]',
-]
-
-const ATTRIBUTE_REGEX =
-  /\[\s*(?<attribute>[a-zA-Z_-][a-zA-Z0-9_-]*)\s*((?<operator>[*|~^$]?=)\s*(?<quote>['"])?\s*(?<value>.*?)\4\s*(?<sensitivity>[is])?\s*)?\]/
-
-describe('parsing', () => {
-  bench('AttributeSelectorParser.parse', () => {
-    for (let example of examples) {
-      AttributeSelectorParser.parse(example)
-    }
-  })
-
-  bench('REGEX.test(…)', () => {
-    for (let example of examples) {
-      ATTRIBUTE_REGEX.exec(example)
-    }
-  })
-
-  bench('….match(REGEX)', () => {
-    for (let example of examples) {
-      example.match(ATTRIBUTE_REGEX)
-    }
-  })
-})
diff --git a/packages/tailwindcss/src/attribute-selector-parser.test.ts b/packages/tailwindcss/src/attribute-selector-parser.test.ts
deleted file mode 100644
index 87f5f3013..000000000
--- a/packages/tailwindcss/src/attribute-selector-parser.test.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { parse } from './attribute-selector-parser'
-
-describe('parse', () => {
-  it.each([
-    [''],
-    [']'],
-    ['[]'],
-    ['['],
-    ['="value"'],
-    ['data-foo]'],
-    ['[data-foo'],
-    ['[data-foo="foo]'],
-    ['[data-foo * = foo]'],
-    ['[data-foo*=]'],
-    ['[data-foo=value x]'],
-    ['[data-foo=value ix]'],
-  ])('should parse an invalid attribute selector (%s) as `null`', (input) => {
-    expect(parse(input)).toBeNull()
-  })
-
-  it.each([
-    [
-      '[data-foo]',
-      { attribute: 'data-foo', operator: null, quote: null, value: null, sensitivity: null },
-    ],
-    [
-      '[ data-foo ]',
-      { attribute: 'data-foo', operator: null, quote: null, value: null, sensitivity: null },
-    ],
-    [
-      // Non-ASCII code points are valid in a CSS ident
-      '[data-état]',
-      { attribute: 'data-état', operator: null, quote: null, value: null, sensitivity: null },
-    ],
-    [
-      '[data-state=expanded]',
-      { attribute: 'data-state', operator: '=', quote: null, value: 'expanded', sensitivity: null },
-    ],
-    [
-      '[data-state = expanded ]',
-      { attribute: 'data-state', operator: '=', quote: null, value: 'expanded', sensitivity: null },
-    ],
-    [
-      '[data-state*="expanded"]',
-      { attribute: 'data-state', operator: '*=', quote: '"', value: 'expanded', sensitivity: null },
-    ],
-    [
-      '[data-state*="expanded"i]',
-      { attribute: 'data-state', operator: '*=', quote: '"', value: 'expanded', sensitivity: 'i' },
-    ],
-    [
-      '[data-state*=expanded i]',
-      { attribute: 'data-state', operator: '*=', quote: null, value: 'expanded', sensitivity: 'i' },
-    ],
-  ])('should parse correctly: %s', (selector, expected) => {
-    expect(parse(selector)).toEqual(expected)
-  })
-
-  it('should work with a real-world example', () => {
-    expect(parse('[data-url$=".com"i]')).toEqual({
-      attribute: 'data-url',
-      operator: '$=',
-      quote: '"',
-      value: '.com',
-      sensitivity: 'i',
-    })
-  })
-})
diff --git a/packages/tailwindcss/src/attribute-selector-parser.ts b/packages/tailwindcss/src/attribute-selector-parser.ts
deleted file mode 100644
index 624043d59..000000000
--- a/packages/tailwindcss/src/attribute-selector-parser.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-const TAB = 9
-const LINE_BREAK = 10
-const CARRIAGE_RETURN = 13
-const SPACE = 32
-const DOUBLE_QUOTE = 34
-const DOLLAR = 36
-const SINGLE_QUOTE = 39
-const ASTERISK = 42
-const EQUALS = 61
-const UPPER_I = 73
-const UPPER_S = 83
-const BACKSLASH = 92
-const CARET = 94
-const LOWER_I = 105
-const LOWER_S = 115
-const PIPE = 124
-const TILDE = 126
-const LOWER_A = 97
-const LOWER_Z = 122
-const UPPER_A = 65
-const UPPER_Z = 90
-const ZERO = 48
-const NINE = 57
-const DASH = 45
-const UNDERSCORE = 95
-const NON_ASCII = 128
-
-interface AttributeSelector {
-  attribute: string
-  operator: '=' | '~=' | '|=' | '^=' | '$=' | '*=' | null
-  quote: '"' | "'" | null
-  value: string | null
-  sensitivity: 'i' | 's' | null
-}
-
-export function parse(input: string): AttributeSelector | null {
-  // Must start with `[` and end with `]`
-  if (input[0] !== '[' || input[input.length - 1] !== ']') {
-    return null
-  }
-
-  let i = 1
-  let start = i
-  let end = input.length - 1
-
-  // Skip whitespace, e.g.: [   data-foo]
-  //                         ^^^
-  while (isAsciiWhitespace(input.charCodeAt(i))) i++
-
-  // Attribute name, e.g.: [data-foo]
-  //                        ^^^^^^^^
-  {
-    start = i
-    for (; i < end; i++) {
-      let currentChar = input.charCodeAt(i)
-      // Skip escaped character
-      if (currentChar === BACKSLASH) {
-        i++
-        continue
-      }
-      if (currentChar >= UPPER_A && currentChar <= UPPER_Z) continue
-      if (currentChar >= LOWER_A && currentChar <= LOWER_Z) continue
-      if (currentChar >= ZERO && currentChar <= NINE) continue
-      if (currentChar === DASH || currentChar === UNDERSCORE) continue
-      // Non-ASCII code points are valid in a CSS ident, e.g.: `[data-état]`
-      if (currentChar >= NON_ASCII) continue
-      break
-    }
-
-    // Must have at least one character in the attribute name
-    if (start === i) {
-      return null
-    }
-  }
-  let attribute = input.slice(start, i)
-
-  // Skip whitespace, e.g.: [data-foo   =value]
-  //                                 ^^^
-  while (isAsciiWhitespace(input.charCodeAt(i))) i++
-
-  // At the end, e.g.: `[data-foo]`
-  if (i === end) {
-    return {
-      attribute,
-      operator: null,
-      quote: null,
-      value: null,
-      sensitivity: null,
-    }
-  }
-
-  // Operator, e.g.: [data-foo*=value]
-  //                          ^^
-  let operator = null
-  let currentChar = input.charCodeAt(i)
-  if (currentChar === EQUALS) {
-    operator = '='
-    i++
-  } else if (
-    (currentChar === TILDE ||
-      currentChar === PIPE ||
-      currentChar === CARET ||
-      currentChar === DOLLAR ||
-      currentChar === ASTERISK) &&
-    input.charCodeAt(i + 1) === EQUALS
-  ) {
-    operator = input[i] + '='
-    i += 2
-  } else {
-    return null // Invalid operator
-  }
-
-  // Skip whitespace, e.g.: [data-foo*=   value]
-  //                                   ^^^
-  while (isAsciiWhitespace(input.charCodeAt(i))) i++
-
-  // At the end, that means that we have an operator but no valid, which is
-  // invalid, e.g.: `[data-foo*=]`
-  if (i === end) {
-    return null
-  }
-
-  // Value, e.g.: [data-foo*=value]
-  //                         ^^^^^
-  let value = ''
-
-  // Quoted value, e.g.: [data-foo*="value"]
-  //                                ^^^^^^^
-  let quote = null
-  currentChar = input.charCodeAt(i)
-  if (currentChar === SINGLE_QUOTE || currentChar === DOUBLE_QUOTE) {
-    quote = input[i] as '"' | "'"
-    i++
-
-    start = i
-    for (let j = i; j < end; j++) {
-      let current = input.charCodeAt(j)
-      // Found ending quote
-      if (current === currentChar) {
-        i = j + 1
-      }
-
-      // Skip escaped character
-      else if (current === BACKSLASH) {
-        j++
-      }
-    }
-
-    value = input.slice(start, i - 1)
-  }
-
-  // Unquoted value, e.g.: [data-foo*=value]
-  //                                  ^^^^^
-  else {
-    start = i
-    // Keep going until we find whitespace or the end
-    while (i < end && !isAsciiWhitespace(input.charCodeAt(i))) i++
-    value = input.slice(start, i)
-  }
-
-  // Skip whitespace, e.g.: [data-foo*=value   ]
-  //                                        ^^^
-  while (isAsciiWhitespace(input.charCodeAt(i))) i++
-
-  // At the end, e.g.: `[data-foo=value]`
-  if (i === end) {
-    return {
-      attribute,
-      operator: operator as '=' | '~=' | '|=' | '^=' | '$=' | '*=',
-      quote: quote as '"' | "'" | null,
-      value,
-      sensitivity: null,
-    }
-  }
-
-  // Sensitivity, e.g.: [data-foo=value i]
-  //                                    ^
-  let sensitivity = null
-  {
-    switch (input.charCodeAt(i)) {
-      case LOWER_I:
-      case UPPER_I: {
-        sensitivity = 'i'
-        i++
-        break
-      }
-
-      case LOWER_S:
-      case UPPER_S: {
-        sensitivity = 's'
-        i++
-        break
-      }
-
-      default:
-        return null // Invalid sensitivity
-    }
-  }
-
-  // Skip whitespace, e.g.: [data-foo=value i   ]
-  //                                         ^^^
-  while (isAsciiWhitespace(input.charCodeAt(i))) i++
-
-  // We must be at the end now, if not, then there is an additional character
-  // after the sensitivity which is invalid, e.g.: [data-foo=value iX]
-  //                                                                ^
-  if (i !== end) {
-    return null
-  }
-
-  // Fully done
-  return {
-    attribute,
-    operator: operator as '=' | '~=' | '|=' | '^=' | '$=' | '*=',
-    quote: quote as '"' | "'" | null,
-    value,
-    sensitivity: sensitivity as 'i' | 's' | null,
-  }
-}
-
-function isAsciiWhitespace(code: number): boolean {
-  switch (code) {
-    case SPACE:
-    case TAB:
-    case LINE_BREAK:
-    case CARRIAGE_RETURN:
-      return true
-
-    default:
-      return false
-  }
-}
diff --git a/packages/tailwindcss/src/candidate.bench.ts b/packages/tailwindcss/src/candidate.bench.ts
index 7ac0dbb0a..f46dec7ec 100644
--- a/packages/tailwindcss/src/candidate.bench.ts
+++ b/packages/tailwindcss/src/candidate.bench.ts
@@ -1,6 +1,6 @@
-import { Scanner } from '@tailwindcss/oxide'
-import { bench, describe } from 'vitest'
-import { cloneCandidate, parseCandidate, type Candidate, type Variant } from './candidate'
+import { scanDir } from '@tailwindcss/oxide'
+import { bench } from 'vitest'
+import { parseCandidate } from './candidate'
 import { buildDesignSystem } from './design-system'
 import { Theme } from './theme'
 
@@ -8,87 +8,12 @@ import { Theme } from './theme'
 const root = process.env.FOLDER || process.cwd()
 
 // Auto content detection
-const scanner = new Scanner({ sources: [{ base: root, pattern: '**/*', negated: false }] })
+const result = scanDir({ base: root, globs: true })
 
-const candidates = scanner.scan()
 const designSystem = buildDesignSystem(new Theme())
 
-describe('parsing', () => {
-  bench('parseCandidate', () => {
-    for (let candidate of candidates) {
-      Array.from(parseCandidate(candidate, designSystem))
-    }
-  })
-})
-
-describe('Candidate cloning', async () => {
-  let parsedCanddiates = candidates.flatMap((candidate) =>
-    Array.from(parseCandidate(candidate, designSystem)),
-  )
-
-  bench('structuredClone', () => {
-    for (let candidate of parsedCanddiates) {
-      structuredClone(candidate)
-    }
-  })
-
-  bench('cloneCandidate', () => {
-    for (let candidate of parsedCanddiates) {
-      cloneCandidate(candidate)
-    }
-  })
-
-  bench('cloneCandidate (spread)', () => {
-    for (let candidate of parsedCanddiates) {
-      cloneCandidateSpread(candidate)
-    }
-  })
-})
-
-function cloneCandidateSpread(candidate: Candidate): Candidate {
-  switch (candidate.kind) {
-    case 'arbitrary':
-      return {
-        ...candidate,
-        modifier: candidate.modifier ? { ...candidate.modifier } : null,
-        variants: candidate.variants.map(cloneVariantSpread),
-      }
-
-    case 'static':
-      return { ...candidate, variants: candidate.variants.map(cloneVariantSpread) }
-
-    case 'functional':
-      return {
-        ...candidate,
-        value: candidate.value ? { ...candidate.value } : null,
-        modifier: candidate.modifier ? { ...candidate.modifier } : null,
-        variants: candidate.variants.map(cloneVariantSpread),
-      }
-
-    default:
-      candidate satisfies never
-      throw new Error('Unknown candidate kind')
+bench('parseCandidate', () => {
+  for (let candidate of result.candidates) {
+    parseCandidate(candidate, designSystem)
   }
-}
-
-function cloneVariantSpread(variant: Variant): Variant {
-  switch (variant.kind) {
-    case 'arbitrary':
-    case 'static':
-      return { ...variant }
-
-    case 'functional':
-      return { ...variant, modifier: variant.modifier ? { ...variant.modifier } : null }
-
-    case 'compound':
-      return {
-        ...variant,
-        variant: cloneVariantSpread(variant.variant),
-        modifier: variant.modifier ? { ...variant.modifier } : null,
-      }
-
-    default:
-      variant satisfies never
-      throw new Error('Unknown variant kind')
-  }
-}
+})
diff --git a/packages/tailwindcss/src/candidate.test.ts b/packages/tailwindcss/src/candidate.test.ts
index b8f914e1b..17d1371b6 100644
--- a/packages/tailwindcss/src/candidate.test.ts
+++ b/packages/tailwindcss/src/candidate.test.ts
@@ -1,36 +1,30 @@
-import { describe, expect, it, test } from 'vitest'
-import { __unstable__loadDesignSystem } from '.'
+import { expect, it } from 'vitest'
 import { buildDesignSystem } from './design-system'
 import { Theme } from './theme'
 import { Utilities } from './utilities'
-import { Compounds, Variants } from './variants'
+import { Variants } from './variants'
 
 function run(
   candidate: string,
-  {
-    utilities,
-    variants,
-    prefix,
-  }: { utilities?: Utilities; variants?: Variants; prefix?: string } = {},
+  { utilities, variants }: { utilities?: Utilities; variants?: Variants } = {},
 ) {
   utilities ??= new Utilities()
   variants ??= new Variants()
 
   let designSystem = buildDesignSystem(new Theme())
-  designSystem.theme.prefix = prefix ?? null
 
   designSystem.utilities = utilities
   designSystem.variants = variants
 
-  return Array.from(designSystem.parseCandidate(candidate))
+  return designSystem.parseCandidate(candidate)
 }
 
 it('should skip unknown utilities', () => {
-  expect(run('unknown-utility')).toEqual([])
+  expect(run('unknown-utility')).toEqual(null)
 })
 
 it('should skip unknown variants', () => {
-  expect(run('unknown-variant:flex')).toEqual([])
+  expect(run('unknown-variant:flex')).toEqual(null)
 })
 
 it('should parse a simple utility', () => {
@@ -38,15 +32,13 @@ it('should parse a simple utility', () => {
   utilities.static('flex', () => [])
 
   expect(run('flex', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "flex",
-        "root": "flex",
-        "variants": [],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [],
+    }
   `)
 })
 
@@ -55,39 +47,35 @@ it('should parse a simple utility that should be important', () => {
   utilities.static('flex', () => [])
 
   expect(run('flex!', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": true,
-        "kind": "static",
-        "raw": "flex!",
-        "root": "flex",
-        "variants": [],
-      },
-    ]
+    {
+      "important": true,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [],
+    }
   `)
 })
 
 it('should parse a simple utility that can be negative', () => {
   let utilities = new Utilities()
-  utilities.functional('-translate-x', () => [])
+  utilities.functional('translate-x', () => [])
 
   expect(run('-translate-x-4', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": null,
-        "raw": "-translate-x-4",
-        "root": "-translate-x",
+        "negative": true,
+        "root": "translate-x",
         "value": {
           "fraction": null,
           "kind": "named",
           "value": "4",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a simple utility with a variant', () => {
@@ -98,20 +86,19 @@ it('should parse a simple utility with a variant', () => {
   variants.static('hover', () => {})
 
   expect(run('hover:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "hover:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "static",
-            "root": "hover",
-          },
-        ],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "static",
+          "root": "hover",
+        },
+      ],
+    }
   `)
 })
 
@@ -124,24 +111,24 @@ it('should parse a simple utility with stacked variants', () => {
   variants.static('focus', () => {})
 
   expect(run('focus:hover:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "focus:hover:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "static",
-            "root": "hover",
-          },
-          {
-            "kind": "static",
-            "root": "focus",
-          },
-        ],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "static",
+          "root": "focus",
+        },
+        {
+          "compounds": true,
+          "kind": "static",
+          "root": "hover",
+        },
+      ],
+    }
   `)
 })
 
@@ -150,50 +137,19 @@ it('should parse a simple utility with an arbitrary variant', () => {
   utilities.static('flex', () => [])
 
   expect(run('[&_p]:flex', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "[&_p]:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "arbitrary",
-            "relative": false,
-            "selector": "& p",
-          },
-        ],
-      },
-    ]
-  `)
-})
-
-it('should parse an arbitrary variant using the automatic var shorthand', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-  let variants = new Variants()
-  variants.functional('supports', () => {})
-
-  expect(run('supports-(--test):flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "supports-(--test):flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "functional",
-            "modifier": null,
-            "root": "supports",
-            "value": {
-              "kind": "arbitrary",
-              "value": "var(--test)",
-            },
-          },
-        ],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "arbitrary",
+          "selector": "& p",
+        },
+      ],
+    }
   `)
 })
 
@@ -205,25 +161,24 @@ it('should parse a simple utility with a parameterized variant', () => {
   variants.functional('data', () => {})
 
   expect(run('data-[disabled]:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "data-[disabled]:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "functional",
-            "modifier": null,
-            "root": "data",
-            "value": {
-              "kind": "arbitrary",
-              "value": "disabled",
-            },
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "functional",
+          "modifier": null,
+          "root": "data",
+          "value": {
+            "kind": "arbitrary",
+            "value": "disabled",
           },
-        ],
-      },
-    ]
+        },
+      ],
+    }
   `)
 })
 
@@ -232,32 +187,31 @@ it('should parse compound variants with an arbitrary value as an arbitrary varia
   utilities.static('flex', () => [])
 
   let variants = new Variants()
-  variants.compound('group', Compounds.StyleRules, () => {})
+  variants.compound('group', () => {})
 
   expect(run('group-[&_p]/parent-name:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "group-[&_p]/parent-name:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "compound",
-            "modifier": {
-              "kind": "named",
-              "value": "parent-name",
-            },
-            "root": "group",
-            "variant": {
-              "kind": "arbitrary",
-              "relative": false,
-              "selector": "& p",
-            },
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "compound",
+          "modifier": {
+            "kind": "named",
+            "value": "parent-name",
           },
-        ],
-      },
-    ]
+          "root": "group",
+          "variant": {
+            "compounds": true,
+            "kind": "arbitrary",
+            "selector": "& p",
+          },
+        },
+      ],
+    }
   `)
 })
 
@@ -266,38 +220,38 @@ it('should parse a simple utility with a parameterized variant and a modifier',
   utilities.static('flex', () => [])
 
   let variants = new Variants()
-  variants.compound('group', Compounds.StyleRules, () => {})
+  variants.compound('group', () => {})
   variants.functional('aria', () => {})
 
   expect(run('group-aria-[disabled]/parent-name:flex', { utilities, variants }))
     .toMatchInlineSnapshot(`
-      [
-        {
-          "important": false,
-          "kind": "static",
-          "raw": "group-aria-[disabled]/parent-name:flex",
-          "root": "flex",
-          "variants": [
-            {
-              "kind": "compound",
-              "modifier": {
-                "kind": "named",
-                "value": "parent-name",
-              },
-              "root": "group",
-              "variant": {
-                "kind": "functional",
-                "modifier": null,
-                "root": "aria",
-                "value": {
-                  "kind": "arbitrary",
-                  "value": "disabled",
-                },
+      {
+        "important": false,
+        "kind": "static",
+        "negative": false,
+        "root": "flex",
+        "variants": [
+          {
+            "compounds": true,
+            "kind": "compound",
+            "modifier": {
+              "kind": "named",
+              "value": "parent-name",
+            },
+            "root": "group",
+            "variant": {
+              "compounds": true,
+              "kind": "functional",
+              "modifier": null,
+              "root": "aria",
+              "value": {
+                "kind": "arbitrary",
+                "value": "disabled",
               },
             },
-          ],
-        },
-      ]
+          },
+        ],
+      }
     `)
 })
 
@@ -307,42 +261,44 @@ it('should parse compound group with itself group-group-*', () => {
 
   let variants = new Variants()
   variants.static('hover', () => {})
-  variants.compound('group', Compounds.StyleRules, () => {})
+  variants.compound('group', () => {})
 
   expect(run('group-group-group-hover/parent-name:flex', { utilities, variants }))
     .toMatchInlineSnapshot(`
-      [
-        {
-          "important": false,
-          "kind": "static",
-          "raw": "group-group-group-hover/parent-name:flex",
-          "root": "flex",
-          "variants": [
-            {
+      {
+        "important": false,
+        "kind": "static",
+        "negative": false,
+        "root": "flex",
+        "variants": [
+          {
+            "compounds": true,
+            "kind": "compound",
+            "modifier": {
+              "kind": "named",
+              "value": "parent-name",
+            },
+            "root": "group",
+            "variant": {
+              "compounds": true,
               "kind": "compound",
-              "modifier": {
-                "kind": "named",
-                "value": "parent-name",
-              },
+              "modifier": null,
               "root": "group",
               "variant": {
+                "compounds": true,
                 "kind": "compound",
                 "modifier": null,
                 "root": "group",
                 "variant": {
-                  "kind": "compound",
-                  "modifier": null,
-                  "root": "group",
-                  "variant": {
-                    "kind": "static",
-                    "root": "hover",
-                  },
+                  "compounds": true,
+                  "kind": "static",
+                  "root": "hover",
                 },
               },
             },
-          ],
-        },
-      ]
+          },
+        ],
+      }
     `)
 })
 
@@ -351,21 +307,19 @@ it('should parse a simple utility with an arbitrary media variant', () => {
   utilities.static('flex', () => [])
 
   expect(run('[@media(width>=123px)]:flex', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "[@media(width>=123px)]:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "arbitrary",
-            "relative": false,
-            "selector": "@media(width>=123px)",
-          },
-        ],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "arbitrary",
+          "selector": "@media(width>=123px)",
+        },
+      ],
+    }
   `)
 })
 
@@ -373,7 +327,7 @@ it('should skip arbitrary variants where @media and other arbitrary variants are
   let utilities = new Utilities()
   utilities.static('flex', () => [])
 
-  expect(run('[@media(width>=123px){&:hover}]:flex', { utilities })).toMatchInlineSnapshot(`[]`)
+  expect(run('[@media(width>=123px){&:hover}]:flex', { utilities })).toMatchInlineSnapshot(`null`)
 })
 
 it('should parse a utility with a modifier', () => {
@@ -381,7 +335,6 @@ it('should parse a utility with a modifier', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-red-500/50', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
@@ -389,17 +342,16 @@ it('should parse a utility with a modifier', () => {
           "kind": "named",
           "value": "50",
         },
-        "raw": "bg-red-500/50",
+        "negative": false,
         "root": "bg",
         "value": {
-          "fraction": "red-500/50",
+          "fraction": "500/50",
           "kind": "named",
           "value": "red-500",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary modifier', () => {
@@ -407,15 +359,15 @@ it('should parse a utility with an arbitrary modifier', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-red-500/[50%]', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": {
+          "dashedIdent": null,
           "kind": "arbitrary",
           "value": "50%",
         },
-        "raw": "bg-red-500/[50%]",
+        "negative": false,
         "root": "bg",
         "value": {
           "fraction": null,
@@ -423,9 +375,8 @@ it('should parse a utility with an arbitrary modifier', () => {
           "value": "red-500",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with a modifier that is important', () => {
@@ -433,7 +384,6 @@ it('should parse a utility with a modifier that is important', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-red-500/50!', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": true,
         "kind": "functional",
@@ -441,17 +391,16 @@ it('should parse a utility with a modifier that is important', () => {
           "kind": "named",
           "value": "50",
         },
-        "raw": "bg-red-500/50!",
+        "negative": false,
         "root": "bg",
         "value": {
-          "fraction": "red-500/50",
+          "fraction": "500/50",
           "kind": "named",
           "value": "red-500",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with a modifier and a variant', () => {
@@ -462,122 +411,51 @@ it('should parse a utility with a modifier and a variant', () => {
   variants.static('hover', () => {})
 
   expect(run('hover:bg-red-500/50', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": {
-          "kind": "named",
-          "value": "50",
-        },
-        "raw": "hover:bg-red-500/50",
-        "root": "bg",
-        "value": {
-          "fraction": "red-500/50",
-          "kind": "named",
-          "value": "red-500",
-        },
-        "variants": [
-          {
-            "kind": "static",
-            "root": "hover",
-          },
-        ],
+    {
+      "important": false,
+      "kind": "functional",
+      "modifier": {
+        "kind": "named",
+        "value": "50",
       },
-    ]
+      "negative": false,
+      "root": "bg",
+      "value": {
+        "fraction": "500/50",
+        "kind": "named",
+        "value": "red-500",
+      },
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "static",
+          "root": "hover",
+        },
+      ],
+    }
   `)
 })
 
-it('should not parse a partial utility', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-  utilities.functional('bg', () => [])
-
-  expect(run('flex-', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-', { utilities })).toMatchInlineSnapshot(`[]`)
-})
-
-it('should not parse static utilities with a modifier', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  expect(run('flex/foo', { utilities })).toMatchInlineSnapshot(`[]`)
-})
-
-it('should not parse static utilities with multiple modifiers', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  expect(run('flex/foo/bar', { utilities })).toMatchInlineSnapshot(`[]`)
-})
-
-it('should not parse functional utilities with multiple modifiers', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  expect(run('bg-red-1/2/3', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-red-500/50/', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-red-500/50//foo', { utilities })).toMatchInlineSnapshot(`[]`)
-})
-
 it('should parse a utility with an arbitrary value', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
   expect(run('bg-[#0088cc]', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": null,
-        "raw": "bg-[#0088cc]",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": null,
           "dataType": null,
           "kind": "arbitrary",
           "value": "#0088cc",
         },
         "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should not parse a utility with an incomplete arbitrary value', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  expect(run('bg-[#0088cc', { utilities })).toMatchInlineSnapshot(`[]`)
-})
-
-it('should parse a utility with an arbitrary value with parens', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  expect(run('bg-(--my-color)', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "bg-(--my-color)",
-        "root": "bg",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "var(--my-color)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should not parse a utility with an arbitrary value with parens that does not start with --', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  expect(run('bg-(my-color)', { utilities })).toMatchInlineSnapshot(`[]`)
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary value including a typehint', () => {
@@ -585,75 +463,21 @@ it('should parse a utility with an arbitrary value including a typehint', () =>
   utilities.functional('bg', () => [])
 
   expect(run('bg-[color:var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": null,
-        "raw": "bg-[color:var(--value)]",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": null,
           "dataType": "color",
           "kind": "arbitrary",
           "value": "var(--value)",
         },
         "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should parse a utility with an arbitrary value with parens including a typehint', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  expect(run('bg-(color:--my-color)', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "bg-(color:--my-color)",
-        "root": "bg",
-        "value": {
-          "dataType": "color",
-          "kind": "arbitrary",
-          "value": "var(--my-color)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should not parse a utility with an arbitrary value with parens including a typehint that does not start with --', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  expect(run('bg-(color:my-color)', { utilities })).toMatchInlineSnapshot(`[]`)
-})
-
-it('should parse a utility with an arbitrary value with parens and a fallback', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  expect(run('bg-(color:--my-color,#0088cc)', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "bg-(color:--my-color,#0088cc)",
-        "root": "bg",
-        "value": {
-          "dataType": "color",
-          "kind": "arbitrary",
-          "value": "var(--my-color,#0088cc)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary value with a modifier', () => {
@@ -661,7 +485,6 @@ it('should parse a utility with an arbitrary value with a modifier', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-[#0088cc]/50', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
@@ -669,17 +492,17 @@ it('should parse a utility with an arbitrary value with a modifier', () => {
           "kind": "named",
           "value": "50",
         },
-        "raw": "bg-[#0088cc]/50",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": null,
           "dataType": null,
           "kind": "arbitrary",
           "value": "#0088cc",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary value with an arbitrary modifier', () => {
@@ -687,25 +510,25 @@ it('should parse a utility with an arbitrary value with an arbitrary modifier',
   utilities.functional('bg', () => [])
 
   expect(run('bg-[#0088cc]/[50%]', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": {
+          "dashedIdent": null,
           "kind": "arbitrary",
           "value": "50%",
         },
-        "raw": "bg-[#0088cc]/[50%]",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": null,
           "dataType": null,
           "kind": "arbitrary",
           "value": "#0088cc",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary value that is important', () => {
@@ -713,68 +536,65 @@ it('should parse a utility with an arbitrary value that is important', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-[#0088cc]!', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": true,
         "kind": "functional",
         "modifier": null,
-        "raw": "bg-[#0088cc]!",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": null,
           "dataType": null,
           "kind": "arbitrary",
           "value": "#0088cc",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an implicit variable as the arbitrary value', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-[var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    [
+  expect(run('bg-[--value]', { utilities })).toMatchInlineSnapshot(`
       {
         "important": false,
         "kind": "functional",
         "modifier": null,
-        "raw": "bg-[var(--value)]",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": "--value",
           "dataType": null,
           "kind": "arbitrary",
           "value": "var(--value)",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an implicit variable as the arbitrary value that is important', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
-    [
+  expect(run('bg-[--value]!', { utilities })).toMatchInlineSnapshot(`
       {
         "important": true,
         "kind": "functional",
         "modifier": null,
-        "raw": "bg-[var(--value)]!",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": "--value",
           "dataType": null,
           "kind": "arbitrary",
           "value": "var(--value)",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an explicit variable as the arbitrary value', () => {
@@ -782,22 +602,21 @@ it('should parse a utility with an explicit variable as the arbitrary value', ()
   utilities.functional('bg', () => [])
 
   expect(run('bg-[var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": null,
-        "raw": "bg-[var(--value)]",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": null,
           "dataType": null,
           "kind": "arbitrary",
           "value": "var(--value)",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an explicit variable as the arbitrary value that is important', () => {
@@ -805,127 +624,37 @@ it('should parse a utility with an explicit variable as the arbitrary value that
   utilities.functional('bg', () => [])
 
   expect(run('bg-[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": true,
         "kind": "functional",
         "modifier": null,
-        "raw": "bg-[var(--value)]!",
+        "negative": false,
         "root": "bg",
         "value": {
+          "dashedIdent": null,
           "dataType": null,
           "kind": "arbitrary",
           "value": "var(--value)",
         },
         "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should not parse invalid arbitrary values', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  for (let candidate of [
-    'bg-red-[#0088cc]',
-    'bg-red[#0088cc]',
-
-    'bg-red-[color:var(--value)]',
-    'bg-red[color:var(--value)]',
-
-    'bg-red-[#0088cc]/50',
-    'bg-red[#0088cc]/50',
-
-    'bg-red-[#0088cc]/[50%]',
-    'bg-red[#0088cc]/[50%]',
-
-    'bg-red-[#0088cc]!',
-    'bg-red[#0088cc]!',
-
-    'bg-red-[var(--value)]',
-    'bg-red[var(--value)]',
-
-    'bg-red-[var(--value)]!',
-    'bg-red[var(--value)]!',
-  ]) {
-    expect(run(candidate, { utilities })).toEqual([])
-  }
-})
-
-it('should not parse invalid arbitrary values in variants', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  let variants = new Variants()
-  variants.functional('data', () => {})
-
-  for (let candidate of [
-    'data-foo-[#0088cc]:flex',
-    'data-foo[#0088cc]:flex',
-
-    'data-foo-[color:var(--value)]:flex',
-    'data-foo[color:var(--value)]:flex',
-
-    'data-foo-[#0088cc]/50:flex',
-    'data-foo[#0088cc]/50:flex',
-
-    'data-foo-[#0088cc]/[50%]:flex',
-    'data-foo[#0088cc]/[50%]:flex',
-
-    'data-foo-[#0088cc]:flex!',
-    'data-foo[#0088cc]:flex!',
-
-    'data-foo-[var(--value)]:flex',
-    'data-foo[var(--value)]:flex',
-
-    'data-foo-[var(--value)]:flex!',
-    'data-foo[var(--value)]:flex!',
-
-    'data-foo-(color:--value):flex',
-    'data-foo(color:--value):flex',
-
-    'data-foo-(color:--value)/50:flex',
-    'data-foo(color:--value)/50:flex',
-
-    'data-foo-(color:--value)/(--mod):flex',
-    'data-foo(color:--value)/(--mod):flex',
-
-    'data-foo-(color:--value)/(number:--mod):flex',
-    'data-foo(color:--value)/(number:--mod):flex',
-
-    'data-foo-(--value):flex',
-    'data-foo(--value):flex',
-
-    'data-foo-(--value)/50:flex',
-    'data-foo(--value)/50:flex',
-
-    'data-foo-(--value)/(--mod):flex',
-    'data-foo(--value)/(--mod):flex',
-
-    'data-foo-(--value)/(number:--mod):flex',
-    'data-foo(--value)/(number:--mod):flex',
-
-    'data-(value):flex',
-  ]) {
-    expect(run(candidate, { utilities, variants })).toEqual([])
-  }
+      }
+    `)
 })
 
 it('should parse a utility with an implicit variable as the modifier', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    [
+  expect(run('bg-red-500/[--value]', { utilities })).toMatchInlineSnapshot(`
       {
         "important": false,
         "kind": "functional",
         "modifier": {
+          "dashedIdent": "--value",
           "kind": "arbitrary",
           "value": "var(--value)",
         },
-        "raw": "bg-red-500/[var(--value)]",
+        "negative": false,
         "root": "bg",
         "value": {
           "fraction": null,
@@ -933,357 +662,24 @@ it('should parse a utility with an implicit variable as the modifier', () => {
           "value": "red-500",
         },
         "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should properly decode escaped underscores but not convert underscores to spaces for CSS variables in arbitrary positions', () => {
-  let utilities = new Utilities()
-  utilities.functional('flex', () => [])
-  let variants = new Variants()
-  variants.functional('supports', () => {})
-
-  expect(run('flex-(--\\_foo)', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "flex-(--\\_foo)",
-        "root": "flex",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "var(--_foo)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-  expect(run('flex-(--_foo)', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "flex-(--_foo)",
-        "root": "flex",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "var(--_foo)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-  expect(run('flex-[var(--\\_foo)]', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "flex-[var(--\\_foo)]",
-        "root": "flex",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "var(--_foo)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-  expect(run('flex-[var(--_foo)]', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "flex-[var(--_foo)]",
-        "root": "flex",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "var(--_foo)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-
-  expect(run('flex-[calc(var(--\\_foo)*0.2)]', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "flex-[calc(var(--\\_foo)*0.2)]",
-        "root": "flex",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "calc(var(--_foo) * 0.2)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-  expect(run('flex-[calc(var(--_foo)*0.2)]', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "flex-[calc(var(--_foo)*0.2)]",
-        "root": "flex",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "calc(var(--_foo) * 0.2)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-
-  // Due to limitations in the CSS value parser, the `var(…)` inside the `calc(…)` is not correctly
-  // scanned here.
-  expect(run('flex-[calc(0.2*var(--\\_foo)]', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "flex-[calc(0.2*var(--\\_foo)]",
-        "root": "flex",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "calc(0.2 * var(--_foo))",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-  expect(run('flex-[calc(0.2*var(--_foo)]', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "flex-[calc(0.2*var(--_foo)]",
-        "root": "flex",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "calc(0.2 * var(-- foo))",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should parse a utility with an implicit variable as the modifier using the shorthand', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  // Standard case (no underscores)
-  expect(run('bg-red-500/(--value)', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": {
-          "kind": "arbitrary",
-          "value": "var(--value)",
-        },
-        "raw": "bg-red-500/(--value)",
-        "root": "bg",
-        "value": {
-          "fraction": null,
-          "kind": "named",
-          "value": "red-500",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-
-  // Should preserve underscores
-  expect(run('bg-red-500/(--with_underscore)', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": {
-          "kind": "arbitrary",
-          "value": "var(--with_underscore)",
-        },
-        "raw": "bg-red-500/(--with_underscore)",
-        "root": "bg",
-        "value": {
-          "fraction": null,
-          "kind": "named",
-          "value": "red-500",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-
-  // Should remove underscores in fallback values
-  expect(run('bg-red-500/(--with_underscore,fallback_value)', { utilities }))
-    .toMatchInlineSnapshot(`
-      [
-        {
-          "important": false,
-          "kind": "functional",
-          "modifier": {
-            "kind": "arbitrary",
-            "value": "var(--with_underscore,fallback value)",
-          },
-          "raw": "bg-red-500/(--with_underscore,fallback_value)",
-          "root": "bg",
-          "value": {
-            "fraction": null,
-            "kind": "named",
-            "value": "red-500",
-          },
-          "variants": [],
-        },
-      ]
+      }
     `)
-
-  // Should keep underscores in the CSS variable itself, but remove underscores
-  // in fallback values
-  expect(run('bg-(--a_b,c_d_var(--e_f,g_h))/(--i_j,k_l_var(--m_n,o_p))', { utilities }))
-    .toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": {
-          "kind": "arbitrary",
-          "value": "var(--i_j,k l var(--m_n,o p))",
-        },
-        "raw": "bg-(--a_b,c_d_var(--e_f,g_h))/(--i_j,k_l_var(--m_n,o_p))",
-        "root": "bg",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "var(--a_b,c d var(--e_f,g h))",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should not parse an invalid arbitrary shorthand modifier', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  // Completely empty
-  expect(run('bg-red-500/()', { utilities })).toMatchInlineSnapshot(`[]`)
-
-  // Invalid due to leading spaces
-  expect(run('bg-red-500/(_--)', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-red-500/(_--x)', { utilities })).toMatchInlineSnapshot(`[]`)
-
-  // Invalid due to leading spaces
-  expect(run('bg-red-500/(_--)', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-red-500/(_--x)', { utilities })).toMatchInlineSnapshot(`[]`)
-
-  // Invalid due to top-level `;` or `}` characters
-  expect(run('bg-red-500/(--x;--y)', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-red-500/(--x:{foo:bar})', { utilities })).toMatchInlineSnapshot(`[]`)
-
-  // Valid, but ensuring that we didn't make an off-by-one error
-  expect(run('bg-red-500/(--x)', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": {
-          "kind": "arbitrary",
-          "value": "var(--x)",
-        },
-        "raw": "bg-red-500/(--x)",
-        "root": "bg",
-        "value": {
-          "fraction": null,
-          "kind": "named",
-          "value": "red-500",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should not parse an invalid arbitrary shorthand value', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  // Completely empty
-  expect(run('bg-()', { utilities })).toMatchInlineSnapshot(`[]`)
-
-  // Invalid due to leading spaces
-  expect(run('bg-(_--)', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-(_--x)', { utilities })).toMatchInlineSnapshot(`[]`)
-
-  // Invalid due to leading spaces
-  expect(run('bg-(_--)', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-(_--x)', { utilities })).toMatchInlineSnapshot(`[]`)
-
-  // Invalid due to top-level `;` or `}` characters
-  expect(run('bg-(--x;--y)', { utilities })).toMatchInlineSnapshot(`[]`)
-  expect(run('bg-(--x:{foo:bar})', { utilities })).toMatchInlineSnapshot(`[]`)
-
-  // Valid, but ensuring that we didn't make an off-by-one error
-  expect(run('bg-(--x)', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "functional",
-        "modifier": null,
-        "raw": "bg-(--x)",
-        "root": "bg",
-        "value": {
-          "dataType": null,
-          "kind": "arbitrary",
-          "value": "var(--x)",
-        },
-        "variants": [],
-      },
-    ]
-  `)
-})
-
-it('should not parse a utility with an implicit invalid variable as the modifier using the shorthand', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-
-  expect(run('bg-red-500/(value)', { utilities })).toMatchInlineSnapshot(`[]`)
 })
 
 it('should parse a utility with an implicit variable as the modifier that is important', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-red-500/[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
-    [
+  expect(run('bg-red-500/[--value]!', { utilities })).toMatchInlineSnapshot(`
       {
         "important": true,
         "kind": "functional",
         "modifier": {
+          "dashedIdent": "--value",
           "kind": "arbitrary",
           "value": "var(--value)",
         },
-        "raw": "bg-red-500/[var(--value)]!",
+        "negative": false,
         "root": "bg",
         "value": {
           "fraction": null,
@@ -1291,9 +687,8 @@ it('should parse a utility with an implicit variable as the modifier that is imp
           "value": "red-500",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an explicit variable as the modifier', () => {
@@ -1301,15 +696,15 @@ it('should parse a utility with an explicit variable as the modifier', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": {
+          "dashedIdent": null,
           "kind": "arbitrary",
           "value": "var(--value)",
         },
-        "raw": "bg-red-500/[var(--value)]",
+        "negative": false,
         "root": "bg",
         "value": {
           "fraction": null,
@@ -1317,9 +712,8 @@ it('should parse a utility with an explicit variable as the modifier', () => {
           "value": "red-500",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should parse a utility with an explicit variable as the modifier that is important', () => {
@@ -1327,39 +721,26 @@ it('should parse a utility with an explicit variable as the modifier that is imp
   utilities.functional('bg', () => [])
 
   expect(run('bg-red-500/[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": true,
-        "kind": "functional",
-        "modifier": {
-          "kind": "arbitrary",
-          "value": "var(--value)",
-        },
-        "raw": "bg-red-500/[var(--value)]!",
-        "root": "bg",
-        "value": {
-          "fraction": null,
-          "kind": "named",
-          "value": "red-500",
-        },
-        "variants": [],
+    {
+      "important": true,
+      "kind": "functional",
+      "modifier": {
+        "dashedIdent": null,
+        "kind": "arbitrary",
+        "value": "var(--value)",
       },
-    ]
+      "negative": false,
+      "root": "bg",
+      "value": {
+        "fraction": null,
+        "kind": "named",
+        "value": "red-500",
+      },
+      "variants": [],
+    }
   `)
 })
 
-it('should not parse a partial variant', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  let variants = new Variants()
-  variants.static('open', () => {})
-  variants.functional('data', () => {})
-
-  expect(run('open-:flex', { utilities, variants })).toMatchInlineSnapshot(`[]`)
-  expect(run('data-:flex', { utilities, variants })).toMatchInlineSnapshot(`[]`)
-})
-
 it('should parse a static variant starting with @', () => {
   let utilities = new Utilities()
   utilities.static('flex', () => [])
@@ -1368,20 +749,19 @@ it('should parse a static variant starting with @', () => {
   variants.static('@lg', () => {})
 
   expect(run('@lg:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "@lg:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "static",
-            "root": "@lg",
-          },
-        ],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "static",
+          "root": "@lg",
+        },
+      ],
+    }
   `)
 })
 
@@ -1393,44 +773,30 @@ it('should parse a functional variant with a modifier', () => {
   variants.functional('foo', () => {})
 
   expect(run('foo-bar/50:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "foo-bar/50:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "functional",
-            "modifier": {
-              "kind": "named",
-              "value": "50",
-            },
-            "root": "foo",
-            "value": {
-              "kind": "named",
-              "value": "bar",
-            },
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "functional",
+          "modifier": {
+            "kind": "named",
+            "value": "50",
           },
-        ],
-      },
-    ]
+          "root": "foo",
+          "value": {
+            "kind": "named",
+            "value": "bar",
+          },
+        },
+      ],
+    }
   `)
 })
 
-it('should not parse variants with multiple modifiers', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  let variants = new Variants()
-  variants.static('hover', () => {})
-  variants.compound('group', Compounds.StyleRules, () => {})
-
-  expect(run('group-hover/foo:flex', { utilities, variants })).toHaveLength(1)
-  expect(run('group-hover/foo/:flex', { utilities, variants })).toEqual([])
-  expect(run('group-hover/foo//bar:flex', { utilities, variants })).toEqual([])
-})
-
 it('should parse a functional variant starting with @', () => {
   let utilities = new Utilities()
   utilities.static('flex', () => [])
@@ -1439,55 +805,24 @@ it('should parse a functional variant starting with @', () => {
   variants.functional('@', () => {})
 
   expect(run('@lg:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "@lg:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "functional",
-            "modifier": null,
-            "root": "@",
-            "value": {
-              "kind": "named",
-              "value": "lg",
-            },
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "functional",
+          "modifier": null,
+          "root": "@",
+          "value": {
+            "kind": "named",
+            "value": "lg",
           },
-        ],
-      },
-    ]
-  `)
-})
-
-it('should parse a functional variant starting with @ that has a hyphen', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  let variants = new Variants()
-  variants.functional('@', () => {})
-
-  expect(run('@foo-bar:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "@foo-bar:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "functional",
-            "modifier": null,
-            "root": "@",
-            "value": {
-              "kind": "named",
-              "value": "foo-bar",
-            },
-          },
-        ],
-      },
-    ]
+        },
+      ],
+    }
   `)
 })
 
@@ -1499,28 +834,27 @@ it('should parse a functional variant starting with @ and a modifier', () => {
   variants.functional('@', () => {})
 
   expect(run('@lg/name:flex', { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "@lg/name:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "functional",
-            "modifier": {
-              "kind": "named",
-              "value": "name",
-            },
-            "root": "@",
-            "value": {
-              "kind": "named",
-              "value": "lg",
-            },
+    {
+      "important": false,
+      "kind": "static",
+      "negative": false,
+      "root": "flex",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "functional",
+          "modifier": {
+            "kind": "named",
+            "value": "name",
           },
-        ],
-      },
-    ]
+          "root": "@",
+          "value": {
+            "kind": "named",
+            "value": "lg",
+          },
+        },
+      ],
+    }
   `)
 })
 
@@ -1529,22 +863,21 @@ it('should replace `_` with ` `', () => {
   utilities.functional('content', () => [])
 
   expect(run('content-["hello_world"]', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": null,
-        "raw": "content-["hello_world"]",
+        "negative": false,
         "root": "content",
         "value": {
+          "dashedIdent": null,
           "dataType": null,
           "kind": "arbitrary",
           "value": ""hello world"",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should not replace `\\_` with ` ` (when it is escaped)', () => {
@@ -1552,152 +885,92 @@ it('should not replace `\\_` with ` ` (when it is escaped)', () => {
   utilities.functional('content', () => [])
 
   expect(run('content-["hello\\_world"]', { utilities })).toMatchInlineSnapshot(`
-    [
       {
         "important": false,
         "kind": "functional",
         "modifier": null,
-        "raw": "content-["hello\\_world"]",
+        "negative": false,
         "root": "content",
         "value": {
+          "dashedIdent": null,
           "dataType": null,
           "kind": "arbitrary",
           "value": ""hello_world"",
         },
         "variants": [],
-      },
-    ]
-  `)
+      }
+    `)
 })
 
 it('should not replace `_` inside of `url()`', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-[no-repeat_url(https://example.com/some_page)]', { utilities }))
-    .toMatchInlineSnapshot(`
-      [
-        {
-          "important": false,
-          "kind": "functional",
-          "modifier": null,
-          "raw": "bg-[no-repeat_url(https://example.com/some_page)]",
-          "root": "bg",
-          "value": {
-            "dataType": null,
-            "kind": "arbitrary",
-            "value": "no-repeat url(https://example.com/some_page)",
-          },
-          "variants": [],
-        },
-      ]
-    `)
-})
-
-it('should not replace `_` in the first argument to `var()`', () => {
-  let utilities = new Utilities()
-  utilities.functional('ml', () => [])
-
-  expect(run('ml-[var(--spacing-1_5,_var(--spacing-2_5,_1rem))]', { utilities }))
-    .toMatchInlineSnapshot(`
-      [
-        {
-          "important": false,
-          "kind": "functional",
-          "modifier": null,
-          "raw": "ml-[var(--spacing-1_5,_var(--spacing-2_5,_1rem))]",
-          "root": "ml",
-          "value": {
-            "dataType": null,
-            "kind": "arbitrary",
-            "value": "var(--spacing-1_5, var(--spacing-2_5, 1rem))",
-          },
-          "variants": [],
-        },
-      ]
-    `)
-})
-
-it('should not replace `_` in the first argument to `theme()`', () => {
-  let utilities = new Utilities()
-  utilities.functional('ml', () => [])
-
-  expect(run('ml-[theme(--spacing-1_5,_theme(--spacing-2_5,_1rem))]', { utilities }))
-    .toMatchInlineSnapshot(`
-      [
-        {
-          "important": false,
-          "kind": "functional",
-          "modifier": null,
-          "raw": "ml-[theme(--spacing-1_5,_theme(--spacing-2_5,_1rem))]",
-          "root": "ml",
-          "value": {
-            "dataType": null,
-            "kind": "arbitrary",
-            "value": "theme(--spacing-1_5, theme(--spacing-2_5, 1rem))",
-          },
-          "variants": [],
-        },
-      ]
-    `)
+  expect(run('bg-[url(https://example.com/some_page)]', { utilities })).toMatchInlineSnapshot(`
+    {
+      "important": false,
+      "kind": "functional",
+      "modifier": null,
+      "negative": false,
+      "root": "bg",
+      "value": {
+        "dashedIdent": null,
+        "dataType": null,
+        "kind": "arbitrary",
+        "value": "url(https://example.com/some_page)",
+      },
+      "variants": [],
+    }
+  `)
 })
 
 it('should parse arbitrary properties', () => {
   expect(run('[color:red]')).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "arbitrary",
-        "modifier": null,
-        "property": "color",
-        "raw": "[color:red]",
-        "value": "red",
-        "variants": [],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "arbitrary",
+      "modifier": null,
+      "property": "color",
+      "value": "red",
+      "variants": [],
+    }
   `)
 })
 
 it('should parse arbitrary properties with a modifier', () => {
   expect(run('[color:red]/50')).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "arbitrary",
-        "modifier": {
-          "kind": "named",
-          "value": "50",
-        },
-        "property": "color",
-        "raw": "[color:red]/50",
-        "value": "red",
-        "variants": [],
+    {
+      "important": false,
+      "kind": "arbitrary",
+      "modifier": {
+        "kind": "named",
+        "value": "50",
       },
-    ]
+      "property": "color",
+      "value": "red",
+      "variants": [],
+    }
   `)
 })
 
 it('should skip arbitrary properties that start with an uppercase letter', () => {
-  expect(run('[Color:red]')).toMatchInlineSnapshot(`[]`)
+  expect(run('[Color:red]')).toMatchInlineSnapshot(`null`)
 })
 
 it('should skip arbitrary properties that do not have a property and value', () => {
-  expect(run('[color]')).toMatchInlineSnapshot(`[]`)
+  expect(run('[color]')).toMatchInlineSnapshot(`null`)
 })
 
 it('should parse arbitrary properties that are important', () => {
   expect(run('[color:red]!')).toMatchInlineSnapshot(`
-    [
-      {
-        "important": true,
-        "kind": "arbitrary",
-        "modifier": null,
-        "property": "color",
-        "raw": "[color:red]!",
-        "value": "red",
-        "variants": [],
-      },
-    ]
+    {
+      "important": true,
+      "kind": "arbitrary",
+      "modifier": null,
+      "property": "color",
+      "value": "red",
+      "variants": [],
+    }
   `)
 })
 
@@ -1706,22 +979,20 @@ it('should parse arbitrary properties with a variant', () => {
   variants.static('hover', () => {})
 
   expect(run('hover:[color:red]', { variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "arbitrary",
-        "modifier": null,
-        "property": "color",
-        "raw": "hover:[color:red]",
-        "value": "red",
-        "variants": [
-          {
-            "kind": "static",
-            "root": "hover",
-          },
-        ],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "arbitrary",
+      "modifier": null,
+      "property": "color",
+      "value": "red",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "static",
+          "root": "hover",
+        },
+      ],
+    }
   `)
 })
 
@@ -1731,426 +1002,52 @@ it('should parse arbitrary properties with stacked variants', () => {
   variants.static('focus', () => {})
 
   expect(run('focus:hover:[color:red]', { variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "arbitrary",
-        "modifier": null,
-        "property": "color",
-        "raw": "focus:hover:[color:red]",
-        "value": "red",
-        "variants": [
-          {
-            "kind": "static",
-            "root": "hover",
-          },
-          {
-            "kind": "static",
-            "root": "focus",
-          },
-        ],
-      },
-    ]
+    {
+      "important": false,
+      "kind": "arbitrary",
+      "modifier": null,
+      "property": "color",
+      "value": "red",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "static",
+          "root": "focus",
+        },
+        {
+          "compounds": true,
+          "kind": "static",
+          "root": "hover",
+        },
+      ],
+    }
   `)
 })
 
 it('should parse arbitrary properties that are important and using stacked arbitrary variants', () => {
   expect(run('[@media(width>=123px)]:[&_p]:[color:red]!')).toMatchInlineSnapshot(`
-    [
-      {
-        "important": true,
-        "kind": "arbitrary",
-        "modifier": null,
-        "property": "color",
-        "raw": "[@media(width>=123px)]:[&_p]:[color:red]!",
-        "value": "red",
-        "variants": [
-          {
-            "kind": "arbitrary",
-            "relative": false,
-            "selector": "& p",
-          },
-          {
-            "kind": "arbitrary",
-            "relative": false,
-            "selector": "@media(width>=123px)",
-          },
-        ],
-      },
-    ]
+    {
+      "important": true,
+      "kind": "arbitrary",
+      "modifier": null,
+      "property": "color",
+      "value": "red",
+      "variants": [
+        {
+          "compounds": true,
+          "kind": "arbitrary",
+          "selector": "@media(width>=123px)",
+        },
+        {
+          "compounds": true,
+          "kind": "arbitrary",
+          "selector": "& p",
+        },
+      ],
+    }
   `)
 })
 
 it('should not parse compound group with a non-compoundable variant', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  let variants = new Variants()
-  variants.compound('group', Compounds.StyleRules, () => {})
-
-  expect(run('group-*:flex', { utilities, variants })).toMatchInlineSnapshot(`[]`)
-})
-
-it('empty data types are invalid', () => {
-  let utilities = new Utilities()
-  utilities.functional('bg', () => [])
-  let variants = new Variants()
-
-  expect(run('bg-[:foo]', { utilities, variants })).toMatchInlineSnapshot(`[]`)
-})
-
-it('should parse a variant containing an arbitrary string with unbalanced parens, brackets, curlies and other quotes', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  let variants = new Variants()
-  variants.functional('string', () => {})
-
-  expect(run(`string-['}[("\\'']:flex`, { utilities, variants })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "string-['}[("\\'']:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "functional",
-            "modifier": null,
-            "root": "string",
-            "value": {
-              "kind": "arbitrary",
-              "value": "'}[("\\''",
-            },
-          },
-        ],
-      },
-    ]
-  `)
-})
-
-it('should parse candidates with a prefix', () => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-
-  let variants = new Variants()
-  variants.static('hover', () => {})
-
-  // A prefix is required
-  expect(run(`flex`, { utilities, variants, prefix: 'tw' })).toEqual([])
-
-  // The prefix always comes first — even before variants
-  expect(run(`tw:flex`, { utilities, variants, prefix: 'tw' })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "tw:flex",
-        "root": "flex",
-        "variants": [],
-      },
-    ]
-  `)
-  expect(run(`tw:hover:flex`, { utilities, variants, prefix: 'tw' })).toMatchInlineSnapshot(`
-    [
-      {
-        "important": false,
-        "kind": "static",
-        "raw": "tw:hover:flex",
-        "root": "flex",
-        "variants": [
-          {
-            "kind": "static",
-            "root": "hover",
-          },
-        ],
-      },
-    ]
-  `)
-})
-
-it.each([
-  // Empty arbitrary value
-  'bg-[]',
-  'bg-()',
-  // — Tricking the parser with a space is not allowed
-  'bg-[_]',
-  'bg-(_)',
-
-  // Empty arbitrary value, with typehint
-  'bg-[color:]',
-  'bg-(color:)',
-  // — Tricking the parser with a space is not allowed
-  'bg-[color:_]',
-  'bg-(color:_)',
-
-  // Empty arbitrary modifier
-  'bg-red-500/[]',
-  'bg-red-500/()',
-  // — Tricking the parser with a space is not allowed
-  'bg-red-500/[_]',
-  'bg-red-500/(_)',
-
-  // Empty arbitrary modifier for arbitrary properties
-  '[color:red]/[]',
-  '[color:red]/()',
-  // — Tricking the parser with a space is not allowed
-  '[color:red]/[_]',
-  '[color:red]/(_)',
-
-  // Empty arbitrary value and modifier
-  'bg-[]/[]',
-  'bg-()/[]',
-  'bg-[]/()',
-  'bg-()/()',
-  // — Tricking the parser with a space is not allowed
-  'bg-[_]/[]',
-  'bg-(_)/[]',
-  'bg-[_]/()',
-  'bg-(_)/()',
-  'bg-[]/[_]',
-  'bg-()/[_]',
-  'bg-[]/(_)',
-  'bg-()/(_)',
-  'bg-[_]/[_]',
-  'bg-(_)/[_]',
-  'bg-[_]/(_)',
-  'bg-(_)/(_)',
-
-  // Functional variants
-  // Empty arbitrary value in variant
-  'data-[]:flex',
-  'data-():flex',
-  // — Tricking the parser with a space is not allowed
-  'data-[_]:flex',
-  'data-(_):flex',
-
-  // Empty arbitrary modifier in variant
-  'data-foo/[]:flex',
-  'data-foo/():flex',
-  // — Tricking the parser with a space is not allowed
-  'data-foo/[_]:flex',
-  'data-foo/(_):flex',
-
-  // Empty arbitrary value and modifier in variant
-  'data-[]/[]:flex',
-  'data-()/[]:flex',
-  'data-[]/():flex',
-  'data-()/():flex',
-  // — Tricking the parser with a space is not allowed
-  'data-[_]/[]:flex',
-  'data-(_)/[]:flex',
-  'data-[_]/():flex',
-  'data-(_)/():flex',
-  'data-[]/[_]:flex',
-  'data-()/[_]:flex',
-  'data-[]/(_):flex',
-  'data-()/(_):flex',
-  'data-[_]/[_]:flex',
-  'data-(_)/[_]:flex',
-  'data-[_]/(_):flex',
-  'data-(_)/(_):flex',
-
-  // Compound variants
-  // Empty arbitrary value in variant
-  'group-data-[]:flex',
-  'group-data-():flex',
-  // — Tricking the parser with a space is not allowed
-  'group-data-[_]:flex',
-  'group-data-(_):flex',
-
-  // Empty arbitrary modifier in variant
-  'group-data-foo/[]:flex',
-  'group-data-foo/():flex',
-  // — Tricking the parser with a space is not allowed
-  'group-data-foo/[_]:flex',
-  'group-data-foo/(_):flex',
-
-  // Empty arbitrary value and modifier in variant
-  'group-data-[]/[]:flex',
-  'group-data-()/[]:flex',
-  'group-data-[]/():flex',
-  'group-data-()/():flex',
-  // — Tricking the parser with a space is not allowed
-  'group-data-[_]/[]:flex',
-  'group-data-(_)/[]:flex',
-  'group-data-[_]/():flex',
-  'group-data-(_)/():flex',
-  'group-data-[]/[_]:flex',
-  'group-data-()/[_]:flex',
-  'group-data-[]/(_):flex',
-  'group-data-()/(_):flex',
-  'group-data-[_]/[_]:flex',
-  'group-data-(_)/[_]:flex',
-  'group-data-[_]/(_):flex',
-  'group-data-(_)/(_):flex',
-])('should not parse invalid empty arbitrary values: %s', (rawCandidate) => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-  utilities.functional('bg', () => [])
-
-  let variants = new Variants()
-  variants.functional('data', () => {})
-  variants.compound('group', Compounds.StyleRules, () => {})
-
-  expect(run(rawCandidate, { utilities, variants })).toEqual([])
-})
-
-it.each([
-  // Arbitrary properties with `;` or `}`
-  '[color:red;color:blue]',
-  '[color:red}html{color:blue]',
-
-  // Arbitrary values that end the declaration
-  'bg-[red;color:blue]',
-
-  // Arbitrary values that end the block
-  'bg-[red}html{color:blue]',
-
-  // Arbitrary variants that end the block
-  '[&{color:red}]:flex',
-
-  // Arbitrary variant values that end the block
-  'data-[a]{color:red}foo[a]:flex',
-
-  // Named values contain invalid characters
-  'data-foo=bar:flex',
-  'bg-foo=bar',
-  'bg-red-500/foo=bar',
-])('should not parse invalid values: %s', (rawCandidate) => {
-  let utilities = new Utilities()
-  utilities.static('flex', () => [])
-  utilities.functional('bg', () => [])
-
-  let variants = new Variants()
-  variants.functional('data', () => {})
-  variants.compound('group', Compounds.StyleRules, () => {})
-
-  expect(run(rawCandidate, { utilities, variants })).toEqual([])
-})
-
-const candidates = [
-  // Arbitrary candidates
-  ['[color:red]', '[color:red]'],
-  ['[color:red]/50', '[color:red]/50'],
-  ['[color:red]/[0.5]', '[color:red]/[0.5]'],
-  ['[color:red]/50!', '[color:red]/50!'],
-  ['![color:red]/50', '[color:red]/50!'],
-  ['[color:red]/[0.5]!', '[color:red]/[0.5]!'],
-
-  // Static candidates
-  ['box-border', 'box-border'],
-  ['underline!', 'underline!'],
-  ['!underline', 'underline!'],
-  ['-inset-full', '-inset-full'],
-
-  // Functional candidates
-  ['bg-red-500', 'bg-red-500'],
-  ['bg-red-500/50', 'bg-red-500/50'],
-  ['bg-red-500/[0.5]', 'bg-red-500/[0.5]'],
-  ['bg-red-500!', 'bg-red-500!'],
-  ['!bg-red-500', 'bg-red-500!'],
-  ['bg-[#0088cc]/50', 'bg-[#0088cc]/50'],
-  ['bg-[#0088cc]/[0.5]', 'bg-[#0088cc]/[0.5]'],
-  ['bg-[#0088cc]!', 'bg-[#0088cc]!'],
-  ['!bg-[#0088cc]', 'bg-[#0088cc]!'],
-  ['bg-[var(--spacing)-1px]', 'bg-[var(--spacing)-1px]'],
-  ['bg-[var(--spacing)_-_1px]', 'bg-[var(--spacing)-1px]'],
-  ['bg-[var(--_spacing)]', 'bg-(--_spacing)'],
-  ['bg-(--_spacing)', 'bg-(--_spacing)'],
-  ['bg-[-1px_-1px]', 'bg-[-1px_-1px]'],
-  ['p-[round(to-zero,1px)]', 'p-[round(to-zero,1px)]'],
-  ['w-1/2', 'w-1/2'],
-  ['p-[calc((100vw-theme(maxWidth.2xl))_/_2)]', 'p-[calc((100vw-theme(maxWidth.2xl))/2)]'],
-
-  // Keep spaces in strings
-  ['content-["hello_world"]', 'content-["hello_world"]'],
-  ['content-[____"hello_world"___]', 'content-["hello_world"]'],
-
-  // Do not escape underscores for url() and CSS variable in var()
-  ['bg-[no-repeat_url(/image_13.png)]', 'bg-[no-repeat_url(/image_13.png)]'],
-  [
-    'bg-[var(--spacing-0_5,_var(--spacing-1_5,_3rem))]',
-    'bg-(--spacing-0_5,var(--spacing-1_5,3rem))',
-  ],
-
-  // Normalize whitespace in arbitrary properties
-  ['[display:flex]', '[display:flex]'],
-  ['[display:_flex]', '[display:flex]'],
-  ['[display:flex_]', '[display:flex]'],
-  ['[display:_flex_]', '[display:flex]'],
-
-  // Normalize whitespace in `calc` expressions
-  ['w-[calc(100%-2rem)]', 'w-[calc(100%-2rem)]'],
-  ['w-[calc(100%_-_2rem)]', 'w-[calc(100%-2rem)]'],
-
-  // Normalize the important modifier
-  ['!flex', 'flex!'],
-  ['flex!', 'flex!'],
-]
-
-const variants = [
-  ['', ''], // no variant
-  ['*:', '*:'],
-  ['focus:', 'focus:'],
-  ['group-focus:', 'group-focus:'],
-
-  ['hover:focus:', 'hover:focus:'],
-  ['hover:group-focus:', 'hover:group-focus:'],
-  ['group-hover:focus:', 'group-hover:focus:'],
-  ['group-hover:group-focus:', 'group-hover:group-focus:'],
-
-  ['min-[10px]:', 'min-[10px]:'],
-
-  // Normalize spaces
-  ['min-[calc(1000px_+_12em)]:', 'min-[calc(1000px+12em)]:'],
-  ['min-[calc(1000px_+12em)]:', 'min-[calc(1000px+12em)]:'],
-  ['min-[calc(1000px+_12em)]:', 'min-[calc(1000px+12em)]:'],
-  ['min-[calc(1000px___+___12em)]:', 'min-[calc(1000px+12em)]:'],
-
-  ['peer-[&_p]:', 'peer-[&_p]:'],
-  ['peer-[&_p]:hover:', 'peer-[&_p]:hover:'],
-  ['hover:peer-[&_p]:', 'hover:peer-[&_p]:'],
-  ['hover:peer-[&_p]:focus:', 'hover:peer-[&_p]:focus:'],
-  ['peer-[&:hover]:peer-[&_p]:', 'peer-[&:hover]:peer-[&_p]:'],
-
-  ['[p]:', '[p]:'],
-  ['[_p_]:', '[p]:'],
-  ['has-[p]:', 'has-[p]:'],
-  ['has-[_p_]:', 'has-[p]:'],
-
-  // Simplify `&:is(p)` to `p`
-  ['[&:is(p)]:', '[p]:'],
-  ['[&:is(_p_)]:', '[p]:'],
-  ['has-[&:is(p)]:', 'has-[p]:'],
-  ['has-[&:is(_p_)]:', 'has-[p]:'],
-
-  // Handle special `@` variants. These shouldn't be printed as `@-`
-  ['@xl:', '@xl:'],
-  ['@[123px]:', '@[123px]:'],
-
-  // Compound variants that forward modifiers
-  ['not-group-hover/name:', 'not-group-hover/name:'],
-  ['has-group-peer-hover/name:', 'has-group-peer-hover/name:'],
-  ['in-group-peer-hover/name:', 'in-group-peer-hover/name:'],
-]
-
-let combinations: [string, string][] = []
-
-for (let [inputVariant, outputVariant] of variants) {
-  for (let [inputCandidate, outputCandidate] of candidates) {
-    combinations.push([`${inputVariant}${inputCandidate}`, `${outputVariant}${outputCandidate}`])
-  }
-}
-
-describe('normalize candidates', () => {
-  test.each(combinations)('`%s` -> `%s`', async (candidate: string, result: string) => {
-    let designSystem = await __unstable__loadDesignSystem('@tailwind utilities', {
-      base: __dirname,
-    })
-
-    let [parsed] = designSystem.parseCandidate(candidate)
-
-    expect(designSystem.printCandidate(parsed)).toEqual(result)
-  })
+  expect(run('group-*:flex')).toMatchInlineSnapshot(`null`)
 })
diff --git a/packages/tailwindcss/src/candidate.ts b/packages/tailwindcss/src/candidate.ts
index a389af365..03420e4d8 100644
--- a/packages/tailwindcss/src/candidate.ts
+++ b/packages/tailwindcss/src/candidate.ts
@@ -1,90 +1,72 @@
 import type { DesignSystem } from './design-system'
 import { decodeArbitraryValue } from './utils/decode-arbitrary-value'
-import { DefaultMap } from './utils/default-map'
-import { isValidArbitrary } from './utils/is-valid-arbitrary'
 import { segment } from './utils/segment'
-import type { ValueFunctionNode } from './value-parser'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction } from './walk'
 
-const COLON = 0x3a
-const DASH = 0x2d
-const LOWER_A = 0x61
-const LOWER_Z = 0x7a
-const IS_VALID_NAMED_VALUE = /^[a-zA-Z0-9_.%-]+$/
-
-export type ArbitraryUtilityValue = {
+type ArbitraryUtilityValue = {
   kind: 'arbitrary'
 
   /**
-   * ```
-   * bg-[color:var(--my-color)]
+   * bg-[color:--my-color]
    *     ^^^^^
-   *
-   * bg-(color:--my-color)
-   *     ^^^^^
-   * ```
    */
   dataType: string | null
 
   /**
-   * ```
    * bg-[#0088cc]
    *     ^^^^^^^
-   *
-   * bg-[var(--my_variable)]
-   *     ^^^^^^^^^^^^^^^^^^
-   *
-   * bg-(--my_variable)
-   *     ^^^^^^^^^^^^^^
-   * ```
+   * bg-[--my_variable]
+   * var(^^^^^^^^^^^^^)
    */
   value: string
+
+  /**
+   * bg-[--my_variable]
+   *     ^^^^^^^^^^^^^
+   */
+  dashedIdent: string | null
 }
 
 export type NamedUtilityValue = {
   kind: 'named'
 
   /**
-   * ```
    * bg-red-500
    *    ^^^^^^^
    *
    * w-1/2
    *   ^
-   * ```
    */
   value: string
 
   /**
-   * ```
    * w-1/2
    *   ^^^
-   * ```
    */
   fraction: string | null
 }
 
-export type ArbitraryModifier = {
+type ArbitraryModifier = {
   kind: 'arbitrary'
 
   /**
-   * ```
    * bg-red-500/[50%]
    *             ^^^
-   * ```
    */
   value: string
+
+  /**
+   * bg-red-500/[--my_variable]
+   *             ^^^^^^^^^^^^^
+   */
+  dashedIdent: string | null
 }
 
-export type NamedModifier = {
+type NamedModifier = {
   kind: 'named'
 
   /**
-   * ```
    * bg-red-500/50
    *            ^^
-   * ```
    */
   value: string
 }
@@ -112,9 +94,8 @@ export type Variant =
       kind: 'arbitrary'
       selector: string
 
-      // Whether or not the selector is a relative selector
-      // @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#relative_selector
-      relative: boolean
+      // If true, it can be applied as a child of a compound variant
+      compounds: boolean
     }
 
   /**
@@ -125,6 +106,9 @@ export type Variant =
   | {
       kind: 'static'
       root: string
+
+      // If true, it can be applied as a child of a compound variant
+      compounds: boolean
     }
 
   /**
@@ -144,6 +128,9 @@ export type Variant =
       root: string
       value: ArbitraryVariantValue | NamedVariantValue | null
       modifier: ArbitraryModifier | NamedModifier | null
+
+      // If true, it can be applied as a child of a compound variant
+      compounds: boolean
     }
 
   /**
@@ -160,6 +147,9 @@ export type Variant =
       root: string
       modifier: ArbitraryModifier | NamedModifier | null
       variant: Variant
+
+      // If true, it can be applied as a child of a compound variant
+      compounds: boolean
     }
 
 export type Candidate =
@@ -180,7 +170,6 @@ export type Candidate =
       modifier: ArbitraryModifier | NamedModifier | null
       variants: Variant[]
       important: boolean
-      raw: string
     }
 
   /**
@@ -189,14 +178,14 @@ export type Candidate =
    * E.g.:
    *
    * - `underline`
-   * - `box-border`
+   * - `flex`
    */
   | {
       kind: 'static'
       root: string
       variants: Variant[]
+      negative: boolean
       important: boolean
-      raw: string
     }
 
   /**
@@ -214,122 +203,16 @@ export type Candidate =
       value: ArbitraryUtilityValue | NamedUtilityValue | null
       modifier: ArbitraryModifier | NamedModifier | null
       variants: Variant[]
+      negative: boolean
       important: boolean
-      raw: string
     }
 
-export function cloneCandidate<T extends Candidate>(candidate: T): T {
-  switch (candidate.kind) {
-    case 'arbitrary':
-      return {
-        kind: candidate.kind,
-        property: candidate.property,
-        value: candidate.value,
-        modifier: candidate.modifier
-          ? { kind: candidate.modifier.kind, value: candidate.modifier.value }
-          : null,
-        variants: candidate.variants.map(cloneVariant),
-        important: candidate.important,
-        raw: candidate.raw,
-      } satisfies Extract<Candidate, { kind: 'arbitrary' }> as T
-
-    case 'static':
-      return {
-        kind: candidate.kind,
-        root: candidate.root,
-        variants: candidate.variants.map(cloneVariant),
-        important: candidate.important,
-        raw: candidate.raw,
-      } satisfies Extract<Candidate, { kind: 'static' }> as T
-
-    case 'functional':
-      return {
-        kind: candidate.kind,
-        root: candidate.root,
-        value: candidate.value
-          ? candidate.value.kind === 'arbitrary'
-            ? {
-                kind: candidate.value.kind,
-                dataType: candidate.value.dataType,
-                value: candidate.value.value,
-              }
-            : {
-                kind: candidate.value.kind,
-                value: candidate.value.value,
-                fraction: candidate.value.fraction,
-              }
-          : null,
-        modifier: candidate.modifier
-          ? { kind: candidate.modifier.kind, value: candidate.modifier.value }
-          : null,
-        variants: candidate.variants.map(cloneVariant),
-        important: candidate.important,
-        raw: candidate.raw,
-      } satisfies Extract<Candidate, { kind: 'functional' }> as T
-
-    default:
-      candidate satisfies never
-      throw new Error('Unknown candidate kind')
-  }
-}
-
-export function cloneVariant<T extends Variant>(variant: T): T {
-  switch (variant.kind) {
-    case 'arbitrary':
-      return {
-        kind: variant.kind,
-        selector: variant.selector,
-        relative: variant.relative,
-      } satisfies Extract<Variant, { kind: 'arbitrary' }> as T
-
-    case 'static':
-      return { kind: variant.kind, root: variant.root } satisfies Extract<
-        Variant,
-        { kind: 'static' }
-      > as T
-
-    case 'functional':
-      return {
-        kind: variant.kind,
-        root: variant.root,
-        value: variant.value ? { kind: variant.value.kind, value: variant.value.value } : null,
-        modifier: variant.modifier
-          ? { kind: variant.modifier.kind, value: variant.modifier.value }
-          : null,
-      } satisfies Extract<Variant, { kind: 'functional' }> as T
-
-    case 'compound':
-      return {
-        kind: variant.kind,
-        root: variant.root,
-        variant: cloneVariant(variant.variant),
-        modifier: variant.modifier
-          ? { kind: variant.modifier.kind, value: variant.modifier.value }
-          : null,
-      } satisfies Extract<Variant, { kind: 'compound' }> as T
-
-    default:
-      variant satisfies never
-      throw new Error('Unknown variant kind')
-  }
-}
-
-export function* parseCandidate(input: string, designSystem: DesignSystem): Iterable<Candidate> {
+export function parseCandidate(input: string, designSystem: DesignSystem): Candidate | null {
   // hover:focus:underline
   // ^^^^^ ^^^^^^           -> Variants
   //             ^^^^^^^^^  -> Base
   let rawVariants = segment(input, ':')
 
-  // A prefix is a special variant used to prefix all utilities. When present,
-  // all utilities must start with that variant which we will then remove from
-  // the variant list so no other part of the codebase has to know about it.
-  if (designSystem.theme.prefix) {
-    if (rawVariants.length === 1) return null
-    if (rawVariants[0] !== designSystem.theme.prefix) return null
-
-    rawVariants.shift()
-  }
-
   // Safety: At this point it is safe to use TypeScript's non-null assertion
   // operator because even if the `input` was an empty string, splitting an
   // empty string by `:` will always result in an array with at least one
@@ -338,71 +221,58 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
 
   let parsedCandidateVariants: Variant[] = []
 
-  for (let i = rawVariants.length - 1; i >= 0; --i) {
-    let parsedVariant = designSystem.parseVariant(rawVariants[i])
-    if (parsedVariant === null) return
+  for (let variant of rawVariants) {
+    let parsedVariant = designSystem.parseVariant(variant)
+    if (parsedVariant === null) return null
 
-    parsedCandidateVariants.push(parsedVariant)
+    // Variants are applied left-to-right meaning that any representing pseudo-
+    // elements must come first. This is because they cannot have anything
+    // after them in a selector. The problem with this is that it's common for
+    // users to write them in the wrong order, for example:
+    //
+    // `dark:before:underline` (wrong)
+    // `before:dark:underline` (right)
+    //
+    // Add pseudo-element variants to the front, making both examples above
+    // function identically which allows users to not care about the order.
+    switch (variant) {
+      case 'after':
+      case 'backdrop':
+      case 'before':
+      case 'first-letter':
+      case 'first-line':
+      case 'marker':
+      case 'placeholder':
+      case 'selection':
+        parsedCandidateVariants.unshift(parsedVariant)
+        break
+      default:
+        parsedCandidateVariants.push(parsedVariant)
+    }
   }
 
-  let important = false
+  let state = {
+    important: false,
+    negative: false,
+  }
 
   // Candidates that end with an exclamation mark are the important version with
   // higher specificity of the non-important candidate, e.g. `mx-4!`.
   if (base[base.length - 1] === '!') {
-    important = true
+    state.important = true
     base = base.slice(0, -1)
   }
 
   // Legacy syntax with leading `!`, e.g. `!mx-4`.
   else if (base[0] === '!') {
-    important = true
+    state.important = true
     base = base.slice(1)
   }
 
-  // Check for an exact match of a static utility first as long as it does not
-  // look like an arbitrary value.
-  if (designSystem.utilities.has(base, 'static') && !base.includes('[')) {
-    yield {
-      kind: 'static',
-      root: base,
-      variants: parsedCandidateVariants,
-      important,
-      raw: input,
-    }
-  }
-
-  // If there's more than one modifier, the utility is invalid.
-  //
-  // E.g.:
-  //
-  // - `bg-red-500/50/50`
-  let parts = segment(base, '/')
-  if (parts.length > 2) return
-
-  // Figure out the new base and the modifier segment if present.
-  //
-  // E.g.:
-  //
-  // ```
-  // bg-red-500/50
-  // ^^^^^^^^^^    -> Base without modifier
-  //            ^^ -> Modifier segment
-  // ```
-  let [baseWithoutModifier, modifierSegment = null] = parts
-
-  let parsedModifier = modifierSegment === null ? null : parseModifier(modifierSegment)
-
-  // Empty arbitrary values are invalid. E.g.: `[color:red]/[]` or `[color:red]/()`.
-  //                                                        ^^                  ^^
-  //                                           `bg-[#0088cc]/[]` or `bg-[#0088cc]/()`.
-  //                                                         ^^                   ^^
-  if (modifierSegment !== null && parsedModifier === null) return
-
   // Arbitrary properties
-  if (baseWithoutModifier[0] === '[') {
-    // Arbitrary properties should end with a `]`.
-    if (baseWithoutModifier[baseWithoutModifier.length - 1] !== ']') return
+  if (base[0] === '[') {
+    let [baseWithoutModifier, modifierSegment = null] = segment(base, '/')
+    if (baseWithoutModifier[baseWithoutModifier.length - 1] !== ']') return null
 
     // The property part of the arbitrary property can only start with a-z
     // lowercase or a dash `-` in case of vendor prefixes such as `-webkit-`
@@ -410,9 +280,7 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
     //
     // Otherwise, it is an invalid candidate, and skip continue parsing.
     let charCode = baseWithoutModifier.charCodeAt(1)
-    if (charCode !== DASH && !(charCode >= LOWER_A && charCode <= LOWER_Z)) {
-      return
-    }
+    if (charCode !== 45 && !(charCode >= 97 && charCode <= 122)) return null
 
     baseWithoutModifier = baseWithoutModifier.slice(1, -1)
 
@@ -424,236 +292,177 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
     // also verify that the colon is not the first or last character in the
     // candidate, because that would make it invalid as well.
     let idx = baseWithoutModifier.indexOf(':')
-    if (idx === -1 || idx === 0 || idx === baseWithoutModifier.length - 1) return
+    if (idx === -1 || idx === 0 || idx === baseWithoutModifier.length - 1) return null
 
     let property = baseWithoutModifier.slice(0, idx)
     let value = decodeArbitraryValue(baseWithoutModifier.slice(idx + 1))
 
-    // Values can't contain `;` or `}` characters at the top-level.
-    if (!isValidArbitrary(value)) return
-
-    yield {
+    return {
       kind: 'arbitrary',
       property,
       value,
-      modifier: parsedModifier,
+      modifier: modifierSegment === null ? null : parseModifier(modifierSegment),
       variants: parsedCandidateVariants,
-      important,
-      raw: input,
+      important: state.important,
     }
-
-    return
   }
 
-  // The different "versions"" of a candidate that are utilities
-  // e.g. `['bg', 'red-500']` and `['bg-red', '500']`
-  let roots: Iterable<Root>
-
-  // If the base of the utility ends with a `]`, then we know it's an arbitrary
-  // value. This also means that everything before the `[…]` part should be the
-  // root of the utility.
-  //
-  // E.g.:
-  //
-  // ```
-  // bg-[#0088cc]
-  // ^^           -> Root
-  //    ^^^^^^^^^ -> Arbitrary value
-  //
-  // border-l-[#0088cc]
-  // ^^^^^^^^           -> Root
-  //          ^^^^^^^^^ -> Arbitrary value
-  // ```
-  if (baseWithoutModifier[baseWithoutModifier.length - 1] === ']') {
-    let idx = baseWithoutModifier.indexOf('-[')
-    if (idx === -1) return
-
-    let root = baseWithoutModifier.slice(0, idx)
-
-    // The root of the utility should exist as-is in the utilities map. If not,
-    // it's an invalid utility and we can skip continue parsing.
-    if (!designSystem.utilities.has(root, 'functional')) return
-
-    let value = baseWithoutModifier.slice(idx + 1)
-
-    roots = [[root, value]]
+  // Candidates that start with a dash are the negative versions of another
+  // candidate, e.g. `-mx-4`.
+  if (base[0] === '-') {
+    state.negative = true
+    base = base.slice(1)
   }
 
-  // If the base of the utility ends with a `)`, then we know it's an arbitrary
-  // value that encapsulates a CSS variable. This also means that everything
-  // before the `(…)` part should be the root of the utility.
+  let [root, value] = findRoot(base, designSystem.utilities)
+
+  let modifierSegment: string | null = null
+
+  // If the root is null, but it contains a `/`, then it could be that we are
+  // dealing with a functional utility that contains a modifier but doesn't
+  // contain a value.
   //
-  // E.g.:
-  //
-  // ```
-  // bg-(--my-var)
-  // ^^            -> Root
-  //    ^^^^^^^^^^ -> Arbitrary value
-  // ```
-  else if (baseWithoutModifier[baseWithoutModifier.length - 1] === ')') {
-    let idx = baseWithoutModifier.indexOf('-(')
-    if (idx === -1) return
+  // E.g.: `@container/parent`
+  if (root === null && base.includes('/')) {
+    let [rootWithoutModifier, rootModifierSegment = null] = segment(base, '/')
 
-    let root = baseWithoutModifier.slice(0, idx)
+    modifierSegment = rootModifierSegment
 
-    // The root of the utility should exist as-is in the utilities map. If not,
-    // it's an invalid utility and we can skip continue parsing.
-    if (!designSystem.utilities.has(root, 'functional')) return
-
-    let value = baseWithoutModifier.slice(idx + 2, -1)
-
-    let parts = segment(value, ':')
-
-    let dataType = null
-    if (parts.length === 2) {
-      dataType = parts[0]
-      value = parts[1]
-    }
-
-    // An arbitrary value with `(…)` should always start with `--` since it
-    // represents a CSS variable.
-    if (value[0] !== '-' || value[1] !== '-') return
-
-    // Values can't contain `;` or `}` characters at the top-level.
-    if (!isValidArbitrary(value)) return
-
-    roots = [[root, dataType === null ? `[var(${value})]` : `[${dataType}:var(${value})]`]]
+    // Try to find the root and value, without the modifier present
+    ;[root, value] = findRoot(rootWithoutModifier, designSystem.utilities)
   }
 
-  // Not an arbitrary value
-  else {
-    roots = findRoots(baseWithoutModifier, (root: string) => {
-      return designSystem.utilities.has(root, 'functional')
-    })
-  }
+  // If there's no root, the candidate isn't a valid class and can be discarded.
+  if (root === null) return null
 
-  for (let [root, value] of roots) {
-    let candidate: Candidate = {
-      kind: 'functional',
+  let kind = designSystem.utilities.kind(root)
+
+  if (kind === 'static') {
+    if (value !== null) return null
+
+    return {
+      kind: 'static',
       root,
-      modifier: parsedModifier,
-      value: null,
       variants: parsedCandidateVariants,
-      important,
-      raw: input,
+      negative: state.negative,
+      important: state.important,
+    }
+  }
+
+  let candidate: Candidate = {
+    kind: 'functional',
+    root,
+    modifier: modifierSegment === null ? null : parseModifier(modifierSegment),
+    value: null,
+    variants: parsedCandidateVariants,
+    negative: state.negative,
+    important: state.important,
+  }
+
+  if (value === null) return candidate
+
+  {
+    // Extract a modifier if present, e.g. `text-xl/9` or `bg-red-500/[14%]`
+    let [valueWithoutModifier, modifierSegment = null] = segment(value, '/')
+
+    if (modifierSegment !== null) {
+      candidate.modifier = parseModifier(modifierSegment)
     }
 
-    if (value === null) {
-      yield candidate
-      continue
-    }
+    let startArbitraryIdx = valueWithoutModifier.indexOf('[')
+    let valueIsArbitrary = startArbitraryIdx !== -1
 
-    {
-      let startArbitraryIdx = value.indexOf('[')
-      let valueIsArbitrary = startArbitraryIdx !== -1
+    if (valueIsArbitrary) {
+      let arbitraryValue = valueWithoutModifier.slice(startArbitraryIdx + 1, -1)
 
-      if (valueIsArbitrary) {
-        // Arbitrary values must end with a `]`.
-        if (value[value.length - 1] !== ']') return
+      // Extract an explicit typehint if present, e.g. `bg-[color:var(--my-var)])`
+      let typehint = ''
+      for (let i = 0; i < arbitraryValue.length; i++) {
+        let code = arbitraryValue.charCodeAt(i)
 
-        let arbitraryValue = decodeArbitraryValue(value.slice(startArbitraryIdx + 1, -1))
-
-        // Values can't contain `;` or `}` characters at the top-level.
-        if (!isValidArbitrary(arbitraryValue)) continue
-
-        // Extract an explicit typehint if present, e.g. `bg-[color:var(--my-var)])`
-        let typehint: string | null = null
-        for (let i = 0; i < arbitraryValue.length; i++) {
-          let code = arbitraryValue.charCodeAt(i)
-
-          // If we hit a ":", we're at the end of a typehint.
-          if (code === COLON) {
-            typehint = arbitraryValue.slice(0, i)
-            arbitraryValue = arbitraryValue.slice(i + 1)
-            break
-          }
-
-          // Keep iterating as long as we've only seen valid typehint characters.
-          if (code === DASH || (code >= LOWER_A && code <= LOWER_Z)) {
-            continue
-          }
-
-          // If we see any other character, there's no typehint so break early.
+        // If we hit a ":", we're at the end of a typehint.
+        if (code === 58 /* ':' */) {
+          typehint = arbitraryValue.slice(0, i)
+          arbitraryValue = arbitraryValue.slice(i + 1)
           break
         }
 
-        // Empty arbitrary values are invalid. E.g.: `p-[]`
-        //                                              ^^
-        if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) {
+        // Keep iterating as long as we've only seen valid typehint characters.
+        if (code === 45 /* '-' */ || (code >= 97 && code <= 122) /* [a-z] */) {
           continue
         }
 
-        if (typehint === '') continue
+        // If we see any other character, there's no typehint so break early.
+        break
+      }
 
-        candidate.value = {
-          kind: 'arbitrary',
-          dataType: typehint || null,
-          value: arbitraryValue,
-        }
+      // If an arbitrary value looks like a CSS variable, we automatically wrap
+      // it with `var(...)`.
+      //
+      // But since some CSS properties accept a `<dashed-ident>` as a value
+      // directly (e.g. `scroll-timeline-name`), we also store the original
+      // value in case the utility matcher is interested in it without
+      // `var(...)`.
+      let dashedIdent: string | null = null
+      if (arbitraryValue[0] === '-' && arbitraryValue[1] === '-') {
+        dashedIdent = arbitraryValue
+        arbitraryValue = `var(${arbitraryValue})`
       } else {
-        // Some utilities support fractions as values, e.g. `w-1/2`. Since it's
-        // ambiguous whether the slash signals a modifier or not, we store the
-        // fraction separately in case the utility matcher is interested in it.
-        let fraction =
-          modifierSegment === null || candidate.modifier?.kind === 'arbitrary'
-            ? null
-            : `${value}/${modifierSegment}`
+        arbitraryValue = decodeArbitraryValue(arbitraryValue)
+      }
 
-        if (!IS_VALID_NAMED_VALUE.test(value)) continue
+      candidate.value = {
+        kind: 'arbitrary',
+        dataType: typehint || null,
+        value: arbitraryValue,
+        dashedIdent,
+      }
+    } else {
+      // Some utilities support fractions as values, e.g. `w-1/2`. Since it's
+      // ambiguous whether the slash signals a modifier or not, we store the
+      // fraction separately in case the utility matcher is interested in it.
+      let fraction =
+        modifierSegment === null || candidate.modifier?.kind === 'arbitrary'
+          ? null
+          : value.slice(valueWithoutModifier.lastIndexOf('-') + 1)
 
-        candidate.value = {
-          kind: 'named',
-          value,
-          fraction,
-        }
+      candidate.value = {
+        kind: 'named',
+        value: valueWithoutModifier,
+        fraction,
       }
     }
-
-    yield candidate
   }
+
+  return candidate
 }
 
-function parseModifier(modifier: string): CandidateModifier | null {
+function parseModifier(modifier: string): CandidateModifier {
   if (modifier[0] === '[' && modifier[modifier.length - 1] === ']') {
-    let arbitraryValue = decodeArbitraryValue(modifier.slice(1, -1))
+    let arbitraryValue = modifier.slice(1, -1)
 
-    // Values can't contain `;` or `}` characters at the top-level.
-    if (!isValidArbitrary(arbitraryValue)) return null
-
-    // Empty arbitrary values are invalid. E.g.: `data-[]:`
-    //                                                 ^^
-    if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null
+    // If an arbitrary value looks like a CSS variable, we automatically wrap
+    // it with `var(...)`.
+    //
+    // But since some CSS properties accept a `<dashed-ident>` as a value
+    // directly (e.g. `scroll-timeline-name`), we also store the original
+    // value in case the utility matcher is interested in it without
+    // `var(...)`.
+    let dashedIdent: string | null = null
+    if (arbitraryValue[0] === '-' && arbitraryValue[1] === '-') {
+      dashedIdent = arbitraryValue
+      arbitraryValue = `var(${arbitraryValue})`
+    } else {
+      arbitraryValue = decodeArbitraryValue(arbitraryValue)
+    }
 
     return {
       kind: 'arbitrary',
       value: arbitraryValue,
+      dashedIdent,
     }
   }
 
-  if (modifier[0] === '(' && modifier[modifier.length - 1] === ')') {
-    // Drop the `(` and `)` characters
-    modifier = modifier.slice(1, -1)
-
-    // A modifier with `(…)` should always start with `--` since it
-    // represents a CSS variable.
-    if (modifier[0] !== '-' || modifier[1] !== '-') return null
-
-    // Values can't contain `;` or `}` characters at the top-level.
-    if (!isValidArbitrary(modifier)) return null
-
-    // Wrap the value in `var(…)` to ensure that it is a valid CSS variable.
-    modifier = `var(${modifier})`
-
-    let arbitraryValue = decodeArbitraryValue(modifier)
-
-    return {
-      kind: 'arbitrary',
-      value: arbitraryValue,
-    }
-  }
-
-  if (!IS_VALID_NAMED_VALUE.test(modifier)) return null
-
   return {
     kind: 'named',
     value: modifier,
@@ -680,169 +489,93 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
 
     let selector = decodeArbitraryValue(variant.slice(1, -1))
 
-    // Values can't contain `;` or `}` characters at the top-level.
-    if (!isValidArbitrary(selector)) return null
-
-    // Empty arbitrary values are invalid. E.g.: `[]:`
-    //                                            ^^
-    if (selector.length === 0 || selector.trim().length === 0) return null
-
-    let relative = selector[0] === '>' || selector[0] === '+' || selector[0] === '~'
-
-    // Ensure `&` is always present by wrapping the selector in `&:is(…)`,
-    // unless it's a relative selector like `> img`.
-    //
-    // E.g.:
-    //
-    // - `[p]:flex`
-    if (!relative && selector[0] !== '@' && !selector.includes('&')) {
-      selector = `&:is(${selector})`
+    if (selector[0] !== '@') {
+      // Ensure `&` is always present by wrapping the selector in `&:is(…)`
+      //
+      // E.g.:
+      //
+      // - `[p]:flex`
+      if (!selector.includes('&')) {
+        selector = `&:is(${selector})`
+      }
     }
 
     return {
       kind: 'arbitrary',
       selector,
-      relative,
+      compounds: true,
     }
   }
 
   // Static, functional and compound variants
   {
+    // group-hover/group-name
+    // ^^^^^^^^^^^            -> Variant without modifier
+    //             ^^^^^^^^^^ -> Modifier
+    let [variantWithoutModifier, modifier = null, additionalModifier] = segment(variant, '/')
+
     // If there's more than one modifier, the variant is invalid.
     //
     // E.g.:
     //
     // - `group-hover/foo/bar`
-    let parts = segment(variant, '/')
-    if (parts.length > 2) return null
+    if (additionalModifier) return null
 
-    // group-hover/group-name
-    // ^^^^^^^^^^^            -> Variant without modifier
-    //             ^^^^^^^^^^ -> Modifier
-    let [variantWithoutModifier, modifier = null] = parts
+    let [root, value] = findRoot(variantWithoutModifier, designSystem.variants)
 
-    let roots = findRoots(variantWithoutModifier, (root) => {
-      return designSystem.variants.has(root)
-    })
+    // Variant is invalid, therefore the candidate is invalid and we can skip
+    // continue parsing it.
+    if (root === null) return null
 
-    for (let [root, value] of roots) {
-      switch (designSystem.variants.kind(root)) {
-        case 'static': {
-          // Static variants do not have a value
-          if (value !== null) return null
+    switch (designSystem.variants.kind(root)) {
+      case 'static': {
+        if (value !== null) return null
 
-          // Static variants do not have a modifier
-          if (modifier !== null) return null
-
-          return {
-            kind: 'static',
-            root,
-          }
+        return {
+          kind: 'static',
+          root,
+          compounds: designSystem.variants.compounds(root),
         }
+      }
 
-        case 'functional': {
-          let parsedModifier = modifier === null ? null : parseModifier(modifier)
-          // Empty arbitrary values are invalid. E.g.: `@max-md/[]:` or `@max-md/():`
-          //                                                    ^^               ^^
-          if (modifier !== null && parsedModifier === null) return null
-
-          if (value === null) {
-            return {
-              kind: 'functional',
-              root,
-              modifier: parsedModifier,
-              value: null,
-            }
-          }
-
-          if (value[value.length - 1] === ']') {
-            // Discard values like `foo-[#bar]`
-            if (value[0] !== '[') continue
-
-            let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))
-
-            // Values can't contain `;` or `}` characters at the top-level.
-            if (!isValidArbitrary(arbitraryValue)) return null
-
-            // Empty arbitrary values are invalid. E.g.: `data-[]:`
-            //                                                 ^^
-            if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null
-
-            return {
-              kind: 'functional',
-              root,
-              modifier: parsedModifier,
-              value: {
-                kind: 'arbitrary',
-                value: arbitraryValue,
-              },
-            }
-          }
-
-          if (value[value.length - 1] === ')') {
-            // Discard values like `foo-(--bar)`
-            if (value[0] !== '(') continue
-
-            let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))
-
-            // Values can't contain `;` or `}` characters at the top-level.
-            if (!isValidArbitrary(arbitraryValue)) return null
-
-            // Empty arbitrary values are invalid. E.g.: `data-():`
-            //                                                 ^^
-            if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null
-
-            // Arbitrary values must start with `--` since it represents a CSS variable.
-            if (arbitraryValue[0] !== '-' || arbitraryValue[1] !== '-') return null
-
-            return {
-              kind: 'functional',
-              root,
-              modifier: parsedModifier,
-              value: {
-                kind: 'arbitrary',
-                value: `var(${arbitraryValue})`,
-              },
-            }
-          }
-
-          if (!IS_VALID_NAMED_VALUE.test(value)) continue
+      case 'functional': {
+        if (value === null) return null
 
+        if (value[0] === '[' && value[value.length - 1] === ']') {
           return {
             kind: 'functional',
             root,
-            modifier: parsedModifier,
-            value: { kind: 'named', value },
+            modifier: modifier === null ? null : parseModifier(modifier),
+            value: {
+              kind: 'arbitrary',
+              value: decodeArbitraryValue(value.slice(1, -1)),
+            },
+            compounds: designSystem.variants.compounds(root),
           }
         }
 
-        case 'compound': {
-          if (value === null) return null
+        return {
+          kind: 'functional',
+          root,
+          modifier: modifier === null ? null : parseModifier(modifier),
+          value: { kind: 'named', value },
+          compounds: designSystem.variants.compounds(root),
+        }
+      }
 
-          // Forward the modifier of the compound variants to its subVariant.
-          // This allows for `not-group-hover/name:flex` to work.
-          if (modifier && (root === 'not' || root === 'has' || root === 'in')) {
-            value = `${value}/${modifier}`
-            modifier = null
-          }
+      case 'compound': {
+        if (value === null) return null
 
-          let subVariant = designSystem.parseVariant(value)
-          if (subVariant === null) return null
+        let subVariant = designSystem.parseVariant(value)
+        if (subVariant === null) return null
+        if (subVariant.compounds === false) return null
 
-          // These two variants must be compatible when compounded
-          if (!designSystem.variants.compoundsWith(root, subVariant)) return null
-
-          let parsedModifier = modifier === null ? null : parseModifier(modifier)
-          // Empty arbitrary values are invalid. E.g.: `group-focus/[]:` or `group-focus/():`
-          //                                                        ^^                   ^^
-          if (modifier !== null && parsedModifier === null) return null
-
-          return {
-            kind: 'compound',
-            root,
-            modifier: parsedModifier,
-            variant: subVariant,
-          }
+        return {
+          kind: 'compound',
+          root,
+          modifier: modifier === null ? null : { kind: 'named', value: modifier },
+          variant: subVariant,
+          compounds: designSystem.variants.compounds(root),
         }
       }
     }
@@ -851,389 +584,43 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
   return null
 }
 
-type Root = [
-  // The root of the utility, e.g.: `bg-red-500`
-  //                                 ^^
-  root: string,
-
-  // The value of the utility, e.g.: `bg-red-500`
-  //                                     ^^^^^^^
-  value: string | null,
-]
-
-function* findRoots(input: string, exists: (input: string) => boolean): Iterable<Root> {
-  // If there is an exact match, then that's the root.
-  if (exists(input)) {
-    yield [input, null]
-  }
+function findRoot(
+  input: string,
+  lookup: { has: (input: string) => boolean },
+): [string | null, string | null] {
+  // If the lookup has an exact match, then that's the root.
+  if (lookup.has(input)) return [input, null]
 
   // Otherwise test every permutation of the input by iteratively removing
   // everything after the last dash.
   let idx = input.lastIndexOf('-')
+  if (idx === -1) {
+    // Variants starting with `@` are special because they don't need a `-`
+    // after the `@` (E.g.: `@-lg` should be written as `@lg`).
+    if (input[0] === '@' && lookup.has('@')) {
+      return ['@', input.slice(1)]
+    }
 
-  // Determine the root and value by testing permutations of the incoming input.
+    return [null, null]
+  }
+
+  // Determine the root and value by testing permutations of the incoming input
+  // against the lookup table.
   //
   // In case of a candidate like `bg-red-500`, this looks like:
   //
   // `bg-red-500` -> No match
   // `bg-red`     -> No match
   // `bg`         -> Match
-  while (idx > 0) {
+  do {
     let maybeRoot = input.slice(0, idx)
 
-    if (exists(maybeRoot)) {
-      let root: Root = [maybeRoot, input.slice(idx + 1)]
-
-      // If the leftover value is an empty string, it means that the value is an
-      // invalid named value, e.g.: `bg-`. This makes the candidate invalid and we
-      // can skip any further parsing.
-      if (root[1] === '') break
-
-      // Edge case: `@-…` is not valid as a variant or a utility so we want to
-      // skip if an `@` is followed by a `-`. Otherwise `@-2xl:flex` and
-      // `@-2xl:flex` would be considered the same.
-      if (root[0] === '@' && exists('@') && input[idx] === '-') break
-
-      yield root
+    if (lookup.has(maybeRoot)) {
+      return [maybeRoot, input.slice(idx + 1)]
     }
 
     idx = input.lastIndexOf('-', idx - 1)
-  }
+  } while (idx > 0)
 
-  // Try '@' variant after permutations. This allows things like `@max` of `@max-foo-bar`
-  // to match before looking for `@`.
-  if (input[0] === '@' && exists('@')) {
-    yield ['@', input.slice(1)]
-  }
-}
-
-export function printCandidate(designSystem: DesignSystem, candidate: Candidate) {
-  let parts: string[] = []
-
-  for (let variant of candidate.variants) {
-    parts.unshift(printVariant(variant))
-  }
-
-  // Handle prefix
-  if (designSystem.theme.prefix) {
-    parts.unshift(designSystem.theme.prefix)
-  }
-
-  let base: string = ''
-
-  // Handle static
-  if (candidate.kind === 'static') {
-    base += candidate.root
-  }
-
-  // Handle functional
-  if (candidate.kind === 'functional') {
-    base += candidate.root
-
-    if (candidate.value) {
-      if (candidate.value.kind === 'arbitrary') {
-        if (candidate.value !== null) {
-          let isVarValue = isVar(candidate.value.value)
-          let value = isVarValue ? candidate.value.value.slice(4, -1) : candidate.value.value
-          let [open, close] = isVarValue ? ['(', ')'] : ['[', ']']
-
-          if (candidate.value.dataType) {
-            base += `-${open}${candidate.value.dataType}:${printArbitraryValue(value)}${close}`
-          } else {
-            base += `-${open}${printArbitraryValue(value)}${close}`
-          }
-        }
-      } else if (candidate.value.kind === 'named') {
-        base += `-${candidate.value.value}`
-      }
-    }
-  }
-
-  // Handle arbitrary
-  if (candidate.kind === 'arbitrary') {
-    base += `[${candidate.property}:${printArbitraryValue(candidate.value)}]`
-  }
-
-  // Handle modifier
-  if (candidate.kind === 'arbitrary' || candidate.kind === 'functional') {
-    base += printModifier(candidate.modifier)
-  }
-
-  // Handle important
-  if (candidate.important) {
-    base += '!'
-  }
-
-  parts.push(base)
-
-  return parts.join(':')
-}
-
-export function printModifier(modifier: ArbitraryModifier | NamedModifier | null) {
-  if (modifier === null) return ''
-
-  let isVarValue = isVar(modifier.value)
-  let value = isVarValue ? modifier.value.slice(4, -1) : modifier.value
-  let [open, close] = isVarValue ? ['(', ')'] : ['[', ']']
-
-  if (modifier.kind === 'arbitrary') {
-    return `/${open}${printArbitraryValue(value)}${close}`
-  } else if (modifier.kind === 'named') {
-    return `/${modifier.value}`
-  } else {
-    modifier satisfies never
-    return ''
-  }
-}
-
-export function printVariant(variant: Variant) {
-  // Handle static variants
-  if (variant.kind === 'static') {
-    return variant.root
-  }
-
-  // Handle arbitrary variants
-  if (variant.kind === 'arbitrary') {
-    return `[${printArbitraryValue(simplifyArbitraryVariant(variant.selector))}]`
-  }
-
-  let base: string = ''
-
-  // Handle functional variants
-  if (variant.kind === 'functional') {
-    base += variant.root
-    // `@` is a special case for functional variants. We want to print: `@lg`
-    // instead of `@-lg`
-    let hasDash = variant.root !== '@'
-    if (variant.value) {
-      if (variant.value.kind === 'arbitrary') {
-        let isVarValue = isVar(variant.value.value)
-        let value = isVarValue ? variant.value.value.slice(4, -1) : variant.value.value
-        let [open, close] = isVarValue ? ['(', ')'] : ['[', ']']
-
-        base += `${hasDash ? '-' : ''}${open}${printArbitraryValue(value)}${close}`
-      } else if (variant.value.kind === 'named') {
-        base += `${hasDash ? '-' : ''}${variant.value.value}`
-      }
-    }
-  }
-
-  // Handle compound variants
-  if (variant.kind === 'compound') {
-    base += variant.root
-    base += '-'
-    base += printVariant(variant.variant)
-  }
-
-  // Handle modifiers
-  if (variant.kind === 'functional' || variant.kind === 'compound') {
-    base += printModifier(variant.modifier)
-  }
-
-  return base
-}
-
-const printArbitraryValueCache = new DefaultMap<string, string>((input) => {
-  let ast = ValueParser.parse(input)
-
-  let drop = new Set<ValueParser.ValueAstNode>()
-
-  let symbols = new Set([
-    // Selectors
-    '~', // Subsequent sibling combinator
-    '>', // Child combinator
-
-    // Math operators
-    '+', // or next sibling combinator
-    '-',
-    '*', // or universal selector
-    '/',
-  ])
-  walk(ast, (node, ctx) => {
-    // Handle operators (e.g.: inside of `calc(…)`)
-    if (node.kind === 'word' && symbols.has(node.value)) {
-      let idx = ctx.index
-
-      // This should not be possible
-      if (idx === -1) return
-
-      // a + b
-      //   ^ node
-      //  ^ previous (whitespace)
-      let previous = ctx.siblings[idx - 1]
-      if (previous?.kind !== 'separator' || previous.value !== ' ') return
-
-      // a + b
-      //   ^ node
-      //    ^ next (whitespace)
-      let next = ctx.siblings[idx + 1]
-      if (next?.kind !== 'separator' || next.value !== ' ') return
-
-      // a + b
-      //   ^ node
-      // ^ previous (node)
-      let previousPrevious = ctx.siblings[idx - 2]
-      if (previousPrevious && symbols.has(previousPrevious.value)) return
-
-      // a + b
-      //   ^ node
-      //     ^ next (node)
-      let nextNext = ctx.siblings[idx + 2]
-      if (nextNext && symbols.has(nextNext.value)) return
-
-      drop.add(previous)
-      drop.add(next)
-    }
-
-    // Leading and trailing whitespace
-    else if (node.kind === 'separator' && node.value.length > 0 && node.value.trim() === '') {
-      if (ctx.siblings[0] === node || ctx.siblings[ctx.siblings.length - 1] === node) {
-        drop.add(node)
-      }
-    }
-
-    // Whitespace around `,` separators can be removed.
-    // E.g.: `min(1px , 2px)` -> `min(1px,2px)`
-    else if (node.kind === 'separator' && node.value.trim() === ',') {
-      node.value = ','
-    }
-
-    // Wrap custom functions starting with `--`, in parentheses if preceded by
-    // a symbol. E.g.: `calc(100%---spacing(2))` → `calc(100%-(--spacing(2)))`
-    else if (node.kind === 'function' && node.value.startsWith('--')) {
-      let idx = ctx.index
-
-      // When it's the first argument, then we don't have to wrap it in `(…)`
-      //
-      // E.g.: `--spacing(…)`, no need to wrap
-      //       `calc(100%---spacing(…))`, we want to wrap
-      //
-      if (idx <= 0) return
-
-      // When it's not the first argument, we likely want to wrap it. However,
-      // when it's separated by a `,` then it's readable enough.
-      //
-      // E.g.: `min(100%,--spacing(2))` is readable, in fact
-      //       `min(100%,(--spacing(2)))` would make it worse
-      let previous = ctx.siblings[idx - 1]
-      if (previous?.kind === 'separator' && previous.value === ',') return
-
-      // When it's part of a bigger list, aka no special symbols were used, then
-      // we don't have to wrap it either.
-      //
-      // E.g.: `shadow-[inset_0px_1px_--theme(--color-white/15%)]`, wrapping would look unnecessary:
-      //       `shadow-[inset_0px_1px_(--theme(--color-white/15%))]`
-      let previousPrevious = ctx.siblings[idx - 2]
-      if (previousPrevious && !symbols.has(previousPrevious.value)) return
-
-      return WalkAction.ReplaceSkip({
-        kind: 'function',
-        value: '', // Unnamed, so will result in `(…)`
-        nodes: [node],
-      } satisfies ValueFunctionNode)
-    }
-  })
-
-  if (drop.size > 0) {
-    walk(ast, (node) => {
-      if (drop.has(node)) {
-        drop.delete(node)
-        return WalkAction.ReplaceSkip([])
-      }
-    })
-  }
-
-  recursivelyEscapeUnderscores(ast)
-
-  return ValueParser.toCss(ast)
-})
-export function printArbitraryValue(input: string) {
-  return printArbitraryValueCache.get(input)
-}
-
-const simplifyArbitraryVariantCache = new DefaultMap<string, string>((input) => {
-  let ast = ValueParser.parse(input)
-
-  // &:is(…)
-  if (
-    ast.length === 3 &&
-    // &
-    ast[0].kind === 'word' &&
-    ast[0].value === '&' &&
-    // :
-    ast[1].kind === 'separator' &&
-    ast[1].value === ':' &&
-    // is(…)
-    ast[2].kind === 'function' &&
-    ast[2].value === 'is'
-  ) {
-    return ValueParser.toCss(ast[2].nodes)
-  }
-
-  return input
-})
-function simplifyArbitraryVariant(input: string) {
-  return simplifyArbitraryVariantCache.get(input)
-}
-
-function recursivelyEscapeUnderscores(ast: ValueParser.ValueAstNode[]) {
-  for (let node of ast) {
-    switch (node.kind) {
-      case 'function': {
-        if (node.value === 'url' || node.value.endsWith('_url')) {
-          // Don't decode underscores in url() but do decode the function name
-          node.value = escapeUnderscore(node.value)
-          break
-        }
-
-        if (
-          node.value === 'var' ||
-          node.value.endsWith('_var') ||
-          node.value === 'theme' ||
-          node.value.endsWith('_theme')
-        ) {
-          node.value = escapeUnderscore(node.value)
-          for (let i = 0; i < node.nodes.length; i++) {
-            recursivelyEscapeUnderscores([node.nodes[i]])
-          }
-          break
-        }
-
-        node.value = escapeUnderscore(node.value)
-        recursivelyEscapeUnderscores(node.nodes)
-        break
-      }
-      case 'separator':
-        node.value = escapeUnderscore(node.value)
-        break
-      case 'word': {
-        // Dashed idents and variables `var(--my-var)` and `--my-var` should not
-        // have underscores escaped
-        if (node.value[0] !== '-' || node.value[1] !== '-') {
-          node.value = escapeUnderscore(node.value)
-        }
-        break
-      }
-      default:
-        never(node)
-    }
-  }
-}
-
-const isVarCache = new DefaultMap<string, boolean>((value) => {
-  let ast = ValueParser.parse(value)
-  return ast.length === 1 && ast[0].kind === 'function' && ast[0].value === 'var'
-})
-function isVar(value: string) {
-  return isVarCache.get(value)
-}
-
-function never(value: never): never {
-  throw new Error(`Unexpected value: ${value}`)
-}
-
-function escapeUnderscore(value: string): string {
-  return value
-    .replaceAll('_', String.raw`\_`) // Escape underscores to keep them as-is
-    .replaceAll(' ', '_') // Replace spaces with underscores
+  return [null, null]
 }
diff --git a/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts b/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts
deleted file mode 100644
index f612e5f7b..000000000
--- a/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { expect, it } from 'vitest'
-import { canonicalizeCalcExpressions } from './canonicalize-calc-expressions'
-
-it.each([
-  ['calc(-1 * var(--foo))', 'calc(var(--foo) * -1)'],
-  ['calc(1rem + var(--foo))', 'calc(var(--foo) + 1rem)'],
-  ['calc(2rem * calc(3px * var(--foo)))', 'calc(calc(var(--foo) * 3px) * 2rem)'],
-  ['calc(var(--b) + var(--a))', 'calc(var(--a) + var(--b))'],
-  ['calc(3px * 2rem)', 'calc(2rem * 3px)'],
-  ['calc(5px * 3px)', 'calc(3px * 5px)'],
-  ['calc(1 * 1rem)', 'calc(1rem * 1)'],
-  ['calc(10 + 2)', 'calc(2 + 10)'],
-])('`%s` → `%s` (%#)', (input, expected) => {
-  expect(canonicalizeCalcExpressions(input)).toBe(expected)
-})
-
-it.each([
-  ['calc(1rem - var(--foo))'],
-  ['calc(1rem / 2)'],
-  ['calc(var(--a) + 1rem)'],
-  ['calc(2rem * 3px)'],
-])('should keep `%s` (%#)', (input) => {
-  expect(canonicalizeCalcExpressions(input)).toBe(input)
-})
diff --git a/packages/tailwindcss/src/canonicalize-calc-expressions.ts b/packages/tailwindcss/src/canonicalize-calc-expressions.ts
deleted file mode 100644
index 7e08f8622..000000000
--- a/packages/tailwindcss/src/canonicalize-calc-expressions.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { dimensions } from './utils/dimensions'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction } from './walk'
-
-// Assumption: We already assume that we receive somewhat valid `calc()`
-// expressions. So we will see `calc(1 + 1)` and not `calc(1+1)`
-export function canonicalizeCalcExpressions(input: string): string {
-  let [canonicalized, valueAst] = canonicalizeCalcExpressionsAst(ValueParser.parse(input))
-
-  return canonicalized ? ValueParser.toCss(valueAst) : input
-}
-
-export function canonicalizeCalcExpressionsAst(
-  ast: ValueParser.ValueAstNode[],
-): [canonicalized: boolean, ast: ValueParser.ValueAstNode[]] {
-  let canonicalized = false
-
-  walk(ast, {
-    exit(valueNode) {
-      // We are only interested in binary expressions in `calc(…)` and `(…)`,
-      // and only with the `*` or `+` operators.
-      if (valueNode.kind !== 'function') return
-      if (valueNode.value !== 'calc' && valueNode.value !== '') return
-      if (valueNode.nodes.length !== 5) return
-      if (valueNode.nodes[2].kind !== 'word') return
-      if (valueNode.nodes[2].value !== '*' && valueNode.nodes[2].value !== '+') return
-
-      let lhs = valueNode.nodes[0]
-      let rhs = valueNode.nodes[4]
-
-      if (shouldSwap(lhs, rhs)) {
-        canonicalized = true
-
-        let replacement: ValueParser.ValueFunctionNode = {
-          kind: 'function',
-          value: valueNode.value,
-          nodes: [
-            rhs, // Now lhs
-            valueNode.nodes[1], // Separator
-            valueNode.nodes[2], // Operator
-            valueNode.nodes[3], // Separator
-            lhs, // Now rhs
-          ],
-        }
-
-        return WalkAction.ReplaceSkip(replacement)
-      }
-    },
-  })
-
-  return [canonicalized, ast]
-}
-
-function shouldSwap(lhs: ValueParser.ValueAstNode, rhs: ValueParser.ValueAstNode): boolean {
-  let lhsDimension = lhs.kind === 'word' ? dimensions.get(lhs.value) : null
-  let rhsDimension = rhs.kind === 'word' ? dimensions.get(rhs.value) : null
-
-  if (lhsDimension !== null && rhsDimension === null) return true
-  if (lhsDimension === null && rhsDimension !== null) return false
-
-  if (lhsDimension !== null && rhsDimension !== null) {
-    let [lhsValue, lhsUnit] = lhsDimension
-    let [rhsValue, rhsUnit] = rhsDimension
-
-    // Within dimensions, keep unit-bearing values ahead of unitless numbers so
-    // `1rem` sorts before `1`.
-    if (lhsUnit === null && rhsUnit !== null) return true
-    if (lhsUnit !== null && rhsUnit === null) return false
-
-    // Then sort dimensions numerically, and finally by unit for ties.
-    if (lhsValue !== rhsValue) {
-      return lhsValue - rhsValue > 0
-    }
-
-    if (lhsUnit !== rhsUnit) {
-      return (lhsUnit ?? '').localeCompare(rhsUnit ?? '') > 0
-    }
-  }
-
-  // Both nodes are unknown values (not dimensions), sort them as strings
-  return ValueParser.toCss([lhs]).localeCompare(ValueParser.toCss([rhs])) > 0
-}
diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts
deleted file mode 100644
index 567f0ad0d..000000000
--- a/packages/tailwindcss/src/canonicalize-candidates.test.ts
+++ /dev/null
@@ -1,1663 +0,0 @@
-import { randomUUID } from 'node:crypto'
-import fs from 'node:fs'
-import path from 'node:path'
-import { describe, expect, test } from 'vitest'
-import { __unstable__loadDesignSystem } from '.'
-import { cartesian } from './cartesian'
-import type { CanonicalizeOptions } from './intellisense'
-import plugin from './plugin'
-import { DefaultMap } from './utils/default-map'
-
-const css = String.raw
-const timeout = 25_000
-const defaultTheme = fs.readFileSync(path.resolve(__dirname, '../theme.css'), 'utf8')
-
-const designSystems = new DefaultMap((base: string) => {
-  return new DefaultMap((input: string) => {
-    return __unstable__loadDesignSystem(input, {
-      base,
-      async loadStylesheet() {
-        return {
-          path: '',
-          base: '',
-          content: css`
-            @tailwind utilities;
-
-            ${defaultTheme}
-
-            /* TODO(perf): Only here to speed up the tests */
-            @theme {
-              --*: initial;
-              --breakpoint-lg: 64rem;
-              --breakpoint-md: 48rem;
-              --color-blue-200: oklch(88.2% 0.059 254.128);
-              --color-blue-500: oklch(62.3% 0.214 259.815);
-              --color-red-500: oklch(63.7% 0.237 25.331);
-              --color-white: #fff;
-              --container-md: 28rem;
-              --font-weight-normal: 400;
-              --leading-relaxed: 1.625;
-              --spacing: 0.25rem;
-              --text-sm--line-height: calc(1.25 / 0.875);
-              --text-sm: 0.875rem;
-              --text-xs--line-height: calc(1 / 0.75);
-              --text-xs: 0.75rem;
-            }
-          `,
-        }
-      },
-    })
-  })
-})
-
-const DEFAULT_CANONICALIZATION_OPTIONS: CanonicalizeOptions = {
-  rem: 16,
-  collapse: true,
-  logicalToPhysical: true,
-}
-
-describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', (strategy) => {
-  let testName = '%s → %s (%#)'
-  if (strategy === 'with-variant') {
-    testName = testName.replaceAll('%s', 'focus:%s')
-  } else if (strategy === 'important') {
-    testName = testName.replaceAll('%s', '%s!')
-  } else if (strategy === 'prefix') {
-    testName = testName.replaceAll('%s', 'tw:%s')
-  }
-
-  function prepare(candidate: string) {
-    if (strategy === 'with-variant') {
-      candidate = `focus:${candidate}`
-    } else if (strategy === 'important') {
-      candidate = `${candidate}!`
-    } else if (strategy === 'prefix') {
-      candidate = `tw:${candidate}`
-
-      // Prefix all known CSS variables with `--tw-`, except when used inside of `--theme(…)`.
-      if (candidate.includes('--')) {
-        candidate = candidate
-          .replace(
-            // Replace the variable, as long as it is preceded by a `(`, e.g.:
-            // `bg-(--foo)` or an `:` in case of `bg-(color:--foo)`.
-            //
-            // It also has to end in a `,` or `)` to prevent replacing functions
-            // that look like variables, e.g.: `--spacing(…)`
-            /([(:])--([\w-]+)([,)])/g,
-            (_, start, variable, end) => `${start}--tw-${variable}${end}`,
-          )
-          .replaceAll('--theme(--tw-', '--theme(--')
-      }
-    }
-
-    return candidate
-  }
-
-  async function expectCanonicalization(
-    input: string,
-    candidates: string,
-    expected: string,
-    options: CanonicalizeOptions = DEFAULT_CANONICALIZATION_OPTIONS,
-  ) {
-    let preparedCandidates = candidates.split(/\s+/g).map(prepare)
-    let preparedExpected = expected.split(/\s+/g).map(prepare)
-
-    if (strategy === 'prefix') {
-      input = input.replace("@import 'tailwindcss';", "@import 'tailwindcss' prefix(tw);")
-    }
-
-    let designSystem = await designSystems.get(__dirname).get(input)
-    let actual = designSystem.canonicalizeCandidates(preparedCandidates, options)
-
-    try {
-      expect(actual).toEqual(preparedExpected)
-    } catch (err) {
-      if (err instanceof Error) Error.captureStackTrace(err, expectCanonicalization)
-      throw err
-    }
-  }
-
-  /// ----------------------------------
-
-  describe('deprecated utilities', () => {
-    test.each([
-      /// Legacy bg-gradient-* → bg-linear-*
-      ['bg-gradient-to-t', 'bg-linear-to-t'],
-      ['bg-gradient-to-tr', 'bg-linear-to-tr'],
-      ['bg-gradient-to-r', 'bg-linear-to-r'],
-      ['bg-gradient-to-br', 'bg-linear-to-br'],
-      ['bg-gradient-to-b', 'bg-linear-to-b'],
-      ['bg-gradient-to-bl', 'bg-linear-to-bl'],
-      ['bg-gradient-to-l', 'bg-linear-to-l'],
-      ['bg-gradient-to-tl', 'bg-linear-to-tl'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    let deprecated: [string, string][] = [
-      ['order-none', 'order-0'],
-      ['break-words', 'wrap-break-word'],
-      ['overflow-ellipsis', 'text-ellipsis'],
-
-      ['start-full', 'inset-s-full'],
-      ['-start-full', '-inset-s-full'],
-      ['start-auto', 'inset-s-auto'],
-      ['start-px', 'inset-s-px'],
-      ['-start-px', '-inset-s-px'],
-      ['start-8', 'inset-s-8'], // Within default spacing scale
-      ['-start-8', '-inset-s-8'], // Within default spacing scale
-      ['start-123', 'inset-s-123'], // Outside of default spacing scale
-      ['-start-123', '-inset-s-123'], // Outside of default spacing scale
-
-      ['end-full', 'inset-e-full'],
-      ['-end-full', '-inset-e-full'],
-      ['end-auto', 'inset-e-auto'],
-      ['end-px', 'inset-e-px'],
-      ['-end-px', '-inset-e-px'],
-      ['end-8', 'inset-e-8'], // Within default spacing scale
-      ['-end-8', '-inset-e-8'], // Within default spacing scale
-      ['end-123', 'inset-e-123'], // Outside of default spacing scale
-      ['-end-123', '-inset-e-123'], // Outside of default spacing scale
-    ]
-
-    test.each(deprecated)(testName, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    describe('With custom implementation', () => {
-      // Creating a shared CSS file such that we can re-use the same design
-      // system for all of these.
-      let customImplementations = deprecated
-        .map(
-          ([candidate]) => css`
-          @utility ${candidate} {
-            --custom-${randomUUID()}: implementation;
-          }
-        `,
-        )
-        .join('\n')
-
-      // Keep the current utility because of the custom implementation
-      test.each(deprecated.map(([candidate]) => [candidate, candidate]))(
-        testName,
-        { timeout },
-        async (candidate, expected) => {
-          let input = css`
-            @import 'tailwindcss';
-
-            ${customImplementations}
-          `
-
-          await expectCanonicalization(input, candidate, expected)
-        },
-      )
-    })
-  })
-
-  describe('arbitrary properties', () => {
-    test.each([
-      /// theme(…) to `var(…)`
-      // Keep candidates that don't contain `theme(…)` or `theme(…, …)`
-      ['[color:red]', 'text-[red]'],
-
-      // Handle special cases around `.1` in the `theme(…)`
-      ['[--value:theme(spacing.1)]', '[--value:--spacing(1)]'],
-      ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--text-xs--line-height)]'],
-      ['[--value:theme(spacing[1.25])]', '[--value:--spacing(1.25)]'],
-
-      // Should not convert invalid spacing values to calc
-      ['[--value:theme(spacing[1.1])]', '[--value:theme(spacing[1.1])]'],
-
-      // Convert to `var(…)` if we can resolve the path
-      ['[color:theme(colors.red.500)]', 'text-red-500'], // Arbitrary property
-      ['[color:theme(colors.red.500)]/50', 'text-red-500/50'], // Arbitrary property + modifier
-
-      // Multiple `theme(… / …)` calls should result in modern syntax of `theme(…)`
-      // - Can't convert to `var(…)` because that would lose the modifier.
-      // - Can't convert to a candidate modifier because there are multiple
-      //   `theme(…)` calls.
-      //
-      //   If we really want to, we can make a fancy migration that tries to move it
-      //   to a candidate modifier _if_ all `theme(…)` calls use the same modifier.
-      [
-        '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]',
-        'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]',
-      ],
-      [
-        '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]/50',
-        'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]/50',
-      ],
-
-      // Convert the `theme(…)`, but try to move the inline modifier (e.g. `50%`),
-      // to a candidate modifier.
-      // Arbitrary property, with simple percentage modifier
-      ['[color:theme(colors.red.500/75%)]', 'text-red-500/75'],
-
-      // Arbitrary property, with numbers (0-1) without a unit
-      ['[color:theme(colors.red.500/.12)]', 'text-red-500/12'],
-      ['[color:theme(colors.red.500/0.12)]', 'text-red-500/12'],
-
-      // Arbitrary property, with more complex modifier (we only allow whole numbers
-      // as bare modifiers). Convert the complex numbers to arbitrary values instead.
-      ['[color:theme(colors.red.500/12.34%)]', 'text-red-500/[12.34%]'],
-      ['[color:theme(colors.red.500/var(--opacity))]', 'text-red-500/(--opacity)'],
-      ['[color:theme(colors.red.500/.12345)]', 'text-red-500/1234.5'],
-      ['[color:theme(colors.red.500/50.25%)]', 'text-red-500/50.25'],
-
-      // Arbitrary property that already contains a modifier
-      ['[color:theme(colors.red.500/50%)]/50', 'text-[--theme(--color-red-500/50%)]/50'],
-
-      // `calc(var(--spacing)*…)` to `--spacing(…)`
-      ['[padding-top:min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'],
-      [
-        '[padding-top:min(20%,calc(var(--spacing)*var(--other)))]',
-        'pt-[min(20%,--spacing(var(--other)))]',
-      ],
-      ['[padding-top:calc(var(--spacing)*8)]', 'pt-8'],
-      ['[padding-top:calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'],
-
-      // `theme(…)` calls valid in v3, but not in v4 should still be converted.
-      ['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'],
-
-      // Invalid cases
-      ['[--foo:theme(colors.red.500/50/50)]', '[--foo:theme(colors.red.500/50/50)]'],
-      ['[--foo:theme(colors.red.500/50/50)]/50', '[--foo:theme(colors.red.500/50/50)]/50'],
-
-      // Partially invalid cases
-      [
-        '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]',
-        '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]',
-      ],
-      [
-        '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]/50',
-        '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]/50',
-      ],
-
-      // If a utility sets `property` and `--tw-{property}` with the same value,
-      // we can ignore the `--tw-{property}`. This is just here for composition.
-      // This means that we should be able to upgrade the one _without_ to the one
-      // _with_ the variable
-      ['[font-weight:400]', 'font-normal'],
-      ['[line-height:0]', 'leading-0'],
-      ['[border-style:solid]', 'border-solid'],
-
-      // Do not constant fold `0<unit>` to `0` when the type is unknown (which
-      // is often the case with CSS variables)
-      ['[--foo:0px]', '[--foo:0px]'],
-      ['[--foo:calc(0px*1)]', '[--foo:calc(0px*1)]'],
-      ['[--foo:calc(0*1rem)]', '[--foo:calc(0*1rem)]'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test.each([
-      // Arbitrary property to static utility
-      ['[text-wrap:balance]', 'text-balance'],
-
-      // Arbitrary property to static utility with slight differences in
-      // whitespace. This will require some canonicalization.
-      ['[display:_flex_]', 'flex'],
-      ['[display:_flex]', 'flex'],
-      ['[display:flex_]', 'flex'],
-
-      // Arbitrary property to named functional utility
-      ['[color:var(--color-red-500)]', 'text-red-500'],
-      ['[background-color:var(--color-red-500)]', 'bg-red-500'],
-
-      // Arbitrary property to named utility (case insensitive)
-      ['[color:#fff]', 'text-white'],
-      ['[color:#FFF]', 'text-white'],
-
-      // Arbitrary property with modifier to named functional utility with modifier
-      ['[color:var(--color-red-500)]/25', 'text-red-500/25'],
-
-      // Arbitrary property with arbitrary modifier to named functional utility with
-      // arbitrary modifier
-      ['[color:var(--color-red-500)]/[25%]', 'text-red-500/25'],
-      ['[color:var(--color-red-500)]/[100%]', 'text-red-500'],
-      ['[color:var(--color-red-500)]/100', 'text-red-500'],
-      ['[color:var(--color-red-500)]/[10%]', 'text-red-500/10'],
-      ['[color:var(--color-red-500)]/[10.0%]', 'text-red-500/10'],
-      ['[color:var(--color-red-500)]/[.1]', 'text-red-500/10'],
-      ['[color:var(--color-red-500)]/[.10]', 'text-red-500/10'],
-      // No need for `/50` because that's already encoded in the `--color-primary`
-      // value
-      ['[color:oklch(62.3%_0.214_259.815)]/50', 'text-primary'],
-
-      // Arbitrary property to arbitrary value
-      ['[max-height:20%]', 'max-h-[20%]'],
-
-      // Arbitrary property to bare value
-      ['[grid-column:2]', 'col-2'],
-      ['[grid-column:1234]', 'col-1234'],
-
-      // Complex arbitrary property to arbitrary value
-      [
-        '[grid-template-columns:repeat(2,minmax(100px,1fr))]',
-        'grid-cols-[repeat(2,minmax(100px,1fr))]',
-      ],
-      // Complex arbitrary property to bare value
-      ['[grid-template-columns:repeat(2,minmax(0,1fr))]', 'grid-cols-2'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-
-        @theme {
-          --*: initial;
-          --spacing: 0.25rem;
-          --color-red-500: red;
-          --color-white: #fff;
-
-          /* Equivalent of blue-500/50 */
-          --color-primary: color-mix(in oklab, oklch(62.3% 0.214 259.815) 50%, transparent);
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  describe('arbitrary values', () => {
-    test.each([
-      // Convert to `var(…)` if we can resolve the path
-      ['bg-[theme(colors.red.500)]', 'bg-red-500'], // Arbitrary value
-      ['bg-[size:theme(spacing.4)]', 'bg-size-[--spacing(4)]'], // Arbitrary value + data type hint
-
-      // Pretty print CSS functions preceded by an operator to prevent consecutive
-      // operator characters.
-      ['w-[calc(100dvh-theme(spacing.2))]', 'w-[calc(100dvh-(--spacing(2)))]'],
-      ['w-[calc(100dvh+theme(spacing.2))]', 'w-[calc(100dvh+(--spacing(2)))]'],
-      ['w-[calc(100dvh/theme(spacing.2))]', 'w-[calc(100dvh/(--spacing(2)))]'],
-      ['w-[calc(100dvh*theme(spacing.2))]', 'w-[calc(100dvh*(--spacing(2)))]'],
-
-      // Convert to `var(…)` if we can resolve the path, but keep fallback values
-      ['bg-[theme(colors.red.500,red)]', 'bg-(--color-red-500,red)'],
-
-      // Keep `theme(…)` if we can't resolve the path
-      ['bg-[theme(colors.foo.1000)]', 'bg-[theme(colors.foo.1000)]'],
-
-      // Keep `theme(…)` if we can't resolve the path, but still try to convert the
-      // fallback value.
-      ['bg-[theme(colors.foo.1000,theme(colors.red.500))]', 'bg-red-500'],
-
-      // Use `theme(…)` (deeply nested) inside of a `calc(…)` function
-      ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--text-xs)*2)]'],
-
-      // Arbitrary value
-      ['bg-[theme(colors.red.500/75%)]', 'bg-red-500/75'],
-      ['bg-[theme(colors.red.500/12.34%)]', 'bg-red-500/[12.34%]'],
-
-      // Arbitrary value with different casing
-      ['bg-[#fff]', 'bg-white'],
-      ['bg-[#FFF]', 'bg-white'],
-
-      // Values that don't contain only `theme(…)` calls should not be converted to
-      // use a modifier since the color is not the whole value.
-      [
-        'shadow-[shadow:inset_0px_1px_theme(colors.white/15%)]',
-        'shadow-[inset_0px_1px_--theme(--color-white/15%)]',
-      ],
-
-      // Arbitrary value, where the candidate already contains a modifier
-      // This should still migrate the `theme(…)` syntax to the modern syntax.
-      ['bg-[theme(colors.red.500/50%)]/50', 'bg-[--theme(--color-red-500/50%)]/50'],
-
-      // Variants, we can't use `var(…)` especially inside of `@media(…)`. But
-      // since the value matches the `lg` breakpoint exactly, we can migrate to
-      // the `max-lg` variant.
-      ['max-[theme(screens.lg)]:flex', 'max-lg:flex'],
-      ['min-[theme(screens.lg)]:flex', 'lg:flex'], // We could also map to `min-lg:flex`
-      // There are no variables for `--spacing` multiples, so we can't convert this
-      ['max-[theme(spacing.4)]:flex', 'max-[theme(spacing.4)]:flex'],
-
-      // This test in itself doesn't make much sense. But we need to make sure
-      // that this doesn't end up as the modifier in the candidate itself.
-      ['max-[theme(spacing.4/50)]:flex', 'max-[theme(spacing.4/50)]:flex'],
-
-      // `theme(…)` calls in another CSS function is replaced correctly.
-      // Additionally we remove unnecessary whitespace.
-      ['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,--spacing(80))_auto]'],
-
-      // `calc(var(--spacing)*…)` to `--spacing(…)`
-      ['pt-[min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'],
-      ['pt-[min(20%,calc(var(--spacing)*var(--other)))]', 'pt-[min(20%,--spacing(var(--other)))]'],
-      ['pt-[calc(var(--spacing)*8)]', 'pt-8'],
-      ['pt-[calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'],
-
-      // Renamed theme keys
-      ['max-w-[theme(screens.md)]', 'max-w-(--breakpoint-md)'],
-      ['w-[theme(maxWidth.md)]', 'w-md'],
-
-      // Arbitrary property to static utility
-      // Map number to keyword-like value
-      ['leading-[1]', 'leading-none'],
-
-      // Arbitrary value to bare value
-      ['border-[2px]', 'border-2'],
-      ['border-[1234px]', 'border-1234'],
-
-      // Arbitrary value with data type, to more specific arbitrary value
-      ['bg-[position:123px]', 'bg-position-[123px]'],
-      ['bg-[size:123px]', 'bg-size-[123px]'],
-
-      // Arbitrary value with inferred data type, to more specific arbitrary value
-      ['bg-[123px]', 'bg-position-[123px]'],
-
-      // Arbitrary value with spacing mul
-      ['w-[64rem]', 'w-256'],
-
-      // Arbitrary value to bare value with percentage
-      ['from-[25%]', 'from-25%'],
-
-      // Arbitrary percentage value must be a whole number. Should not migrate to
-      // a bare value.
-      ['from-[2.5%]', 'from-[2.5%]'],
-
-      // Negative arbitrary values can be simplified
-      // 1. Try to move the sign _inside_ the arbitrary value
-      // 2. Try to move the sign _out_ of the arbitrary value
-      ['-mt-[12rem]', '-mt-48'], // Arbitrary value → bare value
-      ['-mt-[-12rem]', 'mt-48'], // Double negation
-      ['-mt-[12.34rem]', 'mt-[-12.34rem]'], // Move `-` inside
-      ['-mt-[-12.34rem]', 'mt-[12.34rem]'], // Move `-` inside, double negation
-      ['-mt-[12.34px]', 'mt-[-12.34px]'],
-      ['-mt-[-12.34px]', 'mt-[12.34px]'],
-      ['-mt-[492px]', '-mt-123'], // Moving inside, allows us to migrate to a bare value
-      ['-mt-[calc(-1*492px)]', 'mt-123'], // Double negation and constant folding into bare value
-      ['-mt-[-492px]', 'mt-123'],
-      ['-mt-[calc(-1*-492px)]', '-mt-123'], // Constant folding with calc expressions
-      ['-mt-(--my-var)', '-mt-(--my-var)'], // Keep as-is
-      ['-mt-[var(--my-var)]', '-mt-(--my-var)'], // Keep as-is, but convert to shorthand
-      ['mt-[calc(var(--my-var)*-1)]', '-mt-(--my-var)'], // Move `-` out
-      ['mt-[calc(-1*var(--my-var))]', '-mt-(--my-var)'], // Move `-` out
-      ['-mt-[calc(var(--my-var)*-1)]', 'mt-(--my-var)'], // Move `-` out
-      ['-mt-[calc(-1*var(--my-var))]', 'mt-(--my-var)'], // Move `-` out
-      ['mt-[calc(-1*calc(-1*var(--my-var)))]', 'mt-(--my-var)'], // Move `-` out
-      ['-mt-[calc(-1*calc(-1*var(--my-var)))]', '-mt-(--my-var)'], // Move `-` out
-    ])(testName, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-        @theme {
-          --color-white: #fff;
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  describe('arbitrary utilities', () => {
-    test('migrate with custom static utility `@utility custom {…}`', { timeout }, async () => {
-      let candidate = '[--key:value]'
-      let expected = 'custom'
-
-      let input = css`
-        @import 'tailwindcss';
-        @theme {
-          --*: initial;
-        }
-        @utility custom {
-          --key: value;
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test(
-      'migrate with custom functional utility `@utility custom-* {…}`',
-      { timeout },
-      async () => {
-        let candidate = '[--key:value]'
-        let expected = 'custom-value'
-
-        let input = css`
-          @import 'tailwindcss';
-          @theme {
-            --*: initial;
-          }
-          @utility custom-* {
-            --key: --value('value');
-          }
-        `
-
-        await expectCanonicalization(input, candidate, expected)
-      },
-    )
-
-    test(
-      'migrate with custom functional utility `@utility custom-* {…}` that supports bare values',
-      { timeout },
-      async () => {
-        let candidate = '[--resolved-value:4]'
-        let expected = 'example-4'
-
-        let input = css`
-          @import 'tailwindcss';
-          @theme {
-            --*: initial;
-          }
-          @utility example-* {
-            --resolved-value: --value(integer);
-          }
-        `
-
-        await expectCanonicalization(input, candidate, expected)
-      },
-    )
-
-    test.each([
-      ['[--resolved-value:0]', 'example-0'],
-      ['[--resolved-value:4]', 'example-4'],
-      ['[--resolved-value:8]', 'example-a'],
-      ['example-[0]', 'example-0'],
-      ['example-[4]', 'example-4'],
-      ['example-[8]', 'example-a'],
-    ])(
-      'migrate custom @utility from arbitrary values to bare values and named values (based on theme)',
-      async (candidate, expected) => {
-        let input = css`
-          @import 'tailwindcss';
-          @theme {
-            --*: initial;
-            --example-a: 8;
-          }
-
-          @utility example-* {
-            --resolved-value: --value(--example, integer, [integer]);
-          }
-        `
-
-        await expectCanonicalization(input, candidate, expected)
-      },
-    )
-
-    describe.each([['@theme'], ['@theme inline']])('%s', (theme) => {
-      test.each([
-        ['[color:CanvasText]', 'text-canvas'],
-        ['text-[CanvasText]', 'text-canvas'],
-      ])(`migrate arbitrary value to theme value ${testName}`, async (candidate, expected) => {
-        let input = css`
-          @import 'tailwindcss';
-          ${theme} {
-            --*: initial;
-            --color-canvas: CanvasText;
-          }
-        `
-
-        await expectCanonicalization(input, candidate, expected)
-      })
-
-      // Some utilities read from specific namespaces, in this case we do not want
-      // to migrate to a value in that namespace if we reference a variable that
-      // results in the same value, but comes from a different namespace.
-      //
-      // E.g.: `max-w` reads from: ['--max-width', '--spacing', '--container']
-      test.each([
-        // `max-w` does not read from `--breakpoint-md`, but `--breakpoint-md`  and
-        // `--container-3xl` happen to result in the same value. The difference is
-        // the semantics of the value.
-        ['max-w-(--breakpoint-md)', 'max-w-(--breakpoint-md)'],
-        ['max-w-(--container-3xl)', 'max-w-3xl'],
-      ])(
-        `migrate arbitrary value to theme value ${testName}`,
-        { timeout },
-        async (candidate, expected) => {
-          let input = css`
-            @import 'tailwindcss';
-            ${theme} {
-              --*: initial;
-              --breakpoint-md: 48rem;
-              --container-3xl: 48rem;
-            }
-          `
-
-          await expectCanonicalization(input, candidate, expected)
-        },
-      )
-    })
-
-    test(
-      'migrate an arbitrary property without spaces, to a theme value with spaces (canonicalization)',
-      { timeout },
-      async () => {
-        let candidate = 'font-[foo,bar,baz]'
-        let expected = 'font-example'
-        let input = css`
-          @import 'tailwindcss';
-          @theme {
-            --*: initial;
-            --font-example: foo, bar, baz;
-          }
-        `
-
-        await expectCanonicalization(input, candidate, expected)
-      },
-    )
-
-    test.each([
-      // Default spacing scale
-      ['w-[64rem]', 'w-256', '0.25rem'],
-
-      // Non-suggested numbers
-      ['gap-[7.25rem]', 'gap-29', '0.25rem'],
-      ['gap-[calc(7rem+0.25rem)]', 'gap-29', '0.25rem'],
-      ['gap-[116px]', 'gap-29', '0.25rem'],
-
-      // Non-suggested numbers, with the same spacing scale with different
-      // units
-      ['gap-[7.25rem]', 'gap-29', '4px'],
-      ['gap-[calc(7rem+0.25rem)]', 'gap-29', '4px'],
-      ['gap-[116px]', 'gap-29', '4px'],
-
-      // Non-suggested numbers, with a different spacing scale
-      ['gap-[7.25rem]', 'gap-116', '1px'],
-      ['gap-[calc(7rem+0.25rem)]', 'gap-116', '1px'],
-      ['gap-[116px]', 'gap-116', '1px'],
-
-      // Keep arbitrary value if units are different
-      ['w-[124px]', 'w-31', '0.25rem'],
-
-      // Keep arbitrary value if bare value doesn't fit in steps of .25
-      ['w-[0.123rem]', 'w-[0.123rem]', '0.25rem'],
-
-      // Custom pixel based spacing scale
-      ['w-[123px]', 'w-123', '1px'],
-      ['w-[256px]', 'w-128', '2px'],
-    ])(`${testName} (spacing = \`%s\`)`, { timeout }, async (candidate, expected, spacing) => {
-      let input = css`
-        @import 'tailwindcss';
-
-        @theme {
-          --*: initial;
-          --spacing: ${spacing};
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  describe('bare values', () => {
-    let input = css`
-      @import 'tailwindcss';
-      @theme {
-        --*: initial;
-        --spacing: 0.25rem;
-        --aspect-video: 16 / 9;
-        --example-a: 8;
-      }
-
-      @utility example-* {
-        --resolved-value: --value(--example, integer);
-      }
-    `
-
-    test.each([
-      // Built-in utility with bare value fraction
-      ['aspect-16/9', 'aspect-video'],
-
-      // Custom utility with bare value integer
-      ['example-8', 'example-a'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  describe('arbitrary variants', () => {
-    let input = css`
-      @import 'tailwindcss';
-      @theme {
-        --*: initial;
-        --breakpoint-lg: 64rem;
-      }
-    `
-
-    test.each([
-      // Arbitrary variant to static variant
-      ['[&:focus]:flex', 'focus:flex'],
-
-      // Arbitrary variant to static variant with at-rules
-      ['[@media(scripting:_none)]:flex', 'noscript:flex'],
-
-      // Arbitrary variant to static utility at-rules and with slight differences
-      // in whitespace. This will require some canonicalization.
-      ['[@media(scripting:none)]:flex', 'noscript:flex'],
-      ['[@media(scripting:_none)]:flex', 'noscript:flex'],
-      ['[@media_(scripting:_none)]:flex', 'noscript:flex'],
-
-      // Arbitrary variants with media queries cannot use `var(…)`, but if an
-      // equivalent variant exists we can use that one instead.
-      ['[@media(width>=theme(screens.lg))]:flex', 'lg:flex'], // `min-lg:flex` would also be valid
-      ['[@media(width<theme(screens.lg))]:flex', 'max-lg:flex'],
-
-      // With compound variants
-      ['has-[&:focus]:flex', 'has-focus:flex'],
-      ['not-[&:focus]:flex', 'not-focus:flex'],
-      ['group-[&:focus]:flex', 'group-focus:flex'],
-      ['peer-[&:focus]:flex', 'peer-focus:flex'],
-      ['in-[&:focus]:flex', 'in-focus:flex'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('unsafe migrations keep the candidate as-is', { timeout }, async () => {
-      // `hover:` also includes an `@media` query in addition to the `&:hover`
-      // state. Migration is not safe because the functionality would be different.
-      let candidate = '[&:hover]:flex'
-      let expected = '[&:hover]:flex'
-      let input = css`
-        @import 'tailwindcss';
-        @theme {
-          --*: initial;
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('make unsafe migration safe (1)', { timeout }, async () => {
-      // Overriding the `hover:` variant to only use a selector will make the
-      // migration safe.
-      let candidate = '[&:hover]:flex'
-      let expected = 'hover:flex'
-      let input = css`
-        @import 'tailwindcss';
-        @theme {
-          --*: initial;
-        }
-        @variant hover (&:hover);
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('make unsafe migration safe (2)', { timeout }, async () => {
-      // Overriding the `hover:` variant to only use a selector will make the
-      // migration safe. This time with the long-hand `@variant` syntax.
-      let candidate = '[&:hover]:flex'
-      let expected = 'hover:flex'
-      let input = css`
-        @import 'tailwindcss';
-        @theme {
-          --*: initial;
-        }
-        @variant hover {
-          &:hover {
-            @slot;
-          }
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('custom selector-based variants', { timeout }, async () => {
-      let candidate = '[&.macos]:flex'
-      let expected = 'is-macos:flex'
-      let input = css`
-        @import 'tailwindcss';
-        @theme {
-          --*: initial;
-        }
-        @variant is-macos (&.macos);
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test('custom @media-based variants', { timeout }, async () => {
-      let candidate = '[@media(prefers-reduced-transparency:reduce)]:flex'
-      let expected = 'transparency-safe:flex'
-      let input = css`
-        @import 'tailwindcss';
-        @theme {
-          --*: initial;
-        }
-        @variant transparency-safe {
-          @media (prefers-reduced-transparency: reduce) {
-            @slot;
-          }
-        }
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  describe('drop unnecessary data types', () => {
-    let input = css`
-      @import 'tailwindcss';
-      @theme {
-        --*: initial;
-        --color-red-500: red;
-      }
-    `
-
-    test.each([
-      // A color value can be inferred from the value
-      ['bg-[color:#008cc]', 'bg-[#008cc]'],
-
-      // A color is the default for `bg-*`
-      ['bg-(color:--my-value)', 'bg-(--my-value)'],
-
-      // A color with a known theme variable migrates to the full utility
-      ['bg-(color:--color-red-500)', 'bg-red-500'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  describe('arbitrary value to bare value', () => {
-    test.each([
-      ['aspect-[12/34]', 'aspect-12/34'],
-      ['aspect-[1.2/34]', 'aspect-[1.2/34]'],
-      ['col-start-[7]', 'col-start-7'],
-      ['flex-[2]', 'flex-2'], // `flex` is implemented as static and functional utilities
-
-      ['grid-cols-[subgrid]', 'grid-cols-subgrid'],
-      ['grid-rows-[subgrid]', 'grid-rows-subgrid'],
-
-      // Handle zeroes
-      ['m-[0]', 'm-0'],
-      ['m-[0px]', 'm-0'],
-      ['m-[0rem]', 'm-0'],
-
-      ['-m-[0]', 'm-0'],
-      ['-m-[0px]', 'm-0'],
-      ['-m-[0rem]', 'm-0'],
-
-      ['m-[-0]', 'm-0'],
-      ['m-[-0px]', 'm-0'],
-      ['m-[-0rem]', 'm-0'],
-
-      ['-m-[-0]', 'm-0'],
-      ['-m-[-0px]', 'm-0'],
-      ['-m-[-0rem]', 'm-0'],
-
-      ['[margin:0]', 'm-0'],
-      ['[margin:-0]', 'm-0'],
-      ['[margin:0px]', 'm-0'],
-
-      // Limit conversions for big values using the `--spacing` multiplier
-      ['left-[99999px]', 'left-[99999px]'], // This would otherwise result in `left-24999.75`
-      ['left-[-99999px]', 'left-[-99999px]'], // This would otherwise result in `-left-24999.75`
-      ['left-[96rem]', 'left-384'], // Within the limit
-      ['left-[-96rem]', '-left-384'], // Within the limit
-      ['left-[calc(96rem+1px)]', 'left-[calc(96rem+1px)]'], // Out of the positive limit
-      ['left-[calc(-96rem-1px)]', 'left-[calc(-96rem-1px)]'], // Out of the negative limit
-      ['z-[9999999]', 'z-9999999'], // `--spacing` multiplier is not used
-
-      // Not a length-unit, can't safely constant fold
-      ['[margin:0%]', 'm-[0%]'],
-
-      // Only 50-200% (inclusive) are valid:
-      // https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#percentage
-      ['font-stretch-[50%]', 'font-stretch-50%'],
-      ['font-stretch-[50.5%]', 'font-stretch-[50.5%]'],
-      ['font-stretch-[201%]', 'font-stretch-[201%]'],
-      ['font-stretch-[49%]', 'font-stretch-[49%]'],
-      // Should stay as-is
-      ['font-stretch-[1/2]', 'font-stretch-[1/2]'],
-
-      // Bare value with % is valid for these utilities
-      ['from-[28%]', 'from-28%'],
-      ['via-[28%]', 'via-28%'],
-      ['to-[28%]', 'to-28%'],
-      ['from-[28.5%]', 'from-[28.5%]'],
-      ['via-[28.5%]', 'via-[28.5%]'],
-      ['to-[28.5%]', 'to-[28.5%]'],
-
-      // This test in itself is a bit flawed because `text-[1/2]` currently
-      // generates something. Converting it to `text-1/2` doesn't produce anything.
-      ['text-[1/2]', 'text-[1/2]'],
-
-      // Leading is special, because `leading-[123]` is the direct value of 123, but
-      // `leading-123` maps to `calc(--spacing(123))`.
-      ['leading-[123]', 'leading-[123]'],
-
-      ['data-[selected]:flex', 'data-selected:flex'],
-      ['data-[foo=bar]:flex', 'data-[foo=bar]:flex'],
-
-      ['supports-[gap]:flex', 'supports-gap:flex'],
-      ['supports-[display:grid]:flex', 'supports-[display:grid]:flex'],
-
-      ['group-data-[selected]:flex', 'group-data-selected:flex'],
-      ['group-data-[foo=bar]:flex', 'group-data-[foo=bar]:flex'],
-      ['group-has-data-[selected]:flex', 'group-has-data-selected:flex'],
-
-      ['aria-[selected]:flex', 'aria-[selected]:flex'],
-      ['aria-[selected="true"]:flex', 'aria-selected:flex'],
-      ['aria-[selected*="true"]:flex', 'aria-[selected*="true"]:flex'],
-
-      ['group-aria-[selected]:flex', 'group-aria-[selected]:flex'],
-      ['group-aria-[selected="true"]:flex', 'group-aria-selected:flex'],
-      ['group-has-aria-[selected]:flex', 'group-has-aria-[selected]:flex'],
-
-      ['max-lg:hover:data-[selected]:flex', 'max-lg:hover:data-selected:flex'],
-      [
-        'data-[selected]:aria-[selected="true"]:aspect-[12/34]',
-        'data-selected:aria-selected:aspect-12/34',
-      ],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/20365
-  describe('media query and container query variants', () => {
-    test.each([
-      // Breakpoints (`--breakpoint-lg: 64rem`, `--breakpoint-md: 48rem`)
-      ['min-[64rem]:flex', 'lg:flex'],
-      ['max-[64rem]:flex', 'max-lg:flex'],
-      ['min-[48rem]:flex', 'md:flex'],
-      ['max-[48rem]:flex', 'max-md:flex'],
-
-      // With the `rem` option set, equivalent `px` values should also be
-      // canonicalized to the breakpoint variants.
-      ['min-[1024px]:flex', 'lg:flex'],
-      ['max-[1024px]:flex', 'max-lg:flex'],
-
-      // Container queries (`--container-md: 28rem`)
-      ['@min-[28rem]:flex', '@md:flex'],
-      ['@max-[28rem]:flex', '@max-md:flex'],
-      ['@min-[448px]:flex', '@md:flex'],
-      ['@max-[448px]:flex', '@max-md:flex'],
-
-      // Values that don't map to a known breakpoint or container size should
-      // stay as-is.
-      ['min-[123px]:flex', 'min-[123px]:flex'],
-      ['max-[123px]:flex', 'max-[123px]:flex'],
-      ['@min-[123px]:flex', '@min-[123px]:flex'],
-      ['@max-[123px]:flex', '@max-[123px]:flex'],
-
-      // Named variants that produce the same CSS should be kept as-is
-      ['min-lg:flex', 'min-lg:flex'],
-      ['@min-md:flex', '@min-md:flex'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-
-      await expectCanonicalization(input, candidate, expected)
-    })
-
-    test.each([
-      // Without the `rem` option, `px` values cannot be safely converted to
-      // `rem` based breakpoints.
-      ['min-[1024px]:flex', 'min-[1024px]:flex'],
-      ['@min-[448px]:flex', '@min-[448px]:flex'],
-
-      // Same unit still works without the `rem` option
-      ['min-[64rem]:flex', 'lg:flex'],
-      ['max-[64rem]:flex', 'max-lg:flex'],
-      ['@min-[28rem]:flex', '@md:flex'],
-      ['@max-[28rem]:flex', '@max-md:flex'],
-    ])(`${testName} (no rem option)`, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-
-      await expectCanonicalization(input, candidate, expected, {
-        collapse: true,
-        logicalToPhysical: true,
-      })
-    })
-  })
-
-  describe('modernize arbitrary variants', () => {
-    test.each([
-      // Arbitrary variants
-      ['[[data-visible]]:flex', 'data-visible:flex'],
-      ['[&[data-visible]]:flex', 'data-visible:flex'],
-      ['[[data-visible]&]:flex', 'data-visible:flex'],
-      ['[&>[data-visible]]:flex', '*:data-visible:flex'],
-      ['[&_>_[data-visible]]:flex', '*:data-visible:flex'],
-      ['[&>*]:flex', '*:flex'],
-      ['[&_>_*]:flex', '*:flex'],
-      ['[&_>_[foo]]:flex', '*:[[foo]]:flex'],
-      ['[&_[foo]]:flex', '**:[[foo]]:flex'],
-      ['[&_>_[foo=bar]]:flex', '*:[[foo=bar]]:flex'],
-      ['[&_[foo=bar]]:flex', '**:[[foo=bar]]:flex'],
-
-      ['[&_[data-visible]]:flex', '**:data-visible:flex'],
-      ['[&_*]:flex', '**:flex'],
-
-      ['[&:first-child]:flex', 'first:flex'],
-      ['[&:not(:first-child)]:flex', 'not-first:flex'],
-
-      ['[&_:first-child]:flex', '**:first:flex'],
-      ['[&_>_:first-child]:flex', '*:first:flex'],
-      ['[&_:--custom]:flex', '**:[:--custom]:flex'],
-      ['[&_>_:--custom]:flex', '*:[:--custom]:flex'],
-
-      // in-* variants
-      ['[p_&]:flex', 'in-[p]:flex'],
-      ['[.foo_&]:flex', 'in-[.foo]:flex'],
-      ['[[data-visible]_&]:flex', 'in-data-visible:flex'],
-      // Multiple selectors, should stay as-is
-      ['[[data-foo][data-bar]_&]:flex', '[[data-foo][data-bar]_&]:flex'],
-      // Using `>` instead of ` ` should not be transformed:
-      ['[figure>&]:my-0', '[figure>&]:my-0'],
-
-      // nth-child
-      ['[&:nth-child(2)]:flex', 'nth-2:flex'],
-      ['[&:not(:nth-child(2))]:flex', 'not-nth-2:flex'],
-
-      ['[&:nth-child(-n+3)]:flex', 'nth-[-n+3]:flex'],
-      ['[&:not(:nth-child(-n+3))]:flex', 'not-nth-[-n+3]:flex'],
-      ['[&:nth-child(-n_+_3)]:flex', 'nth-[-n+3]:flex'],
-      ['[&:not(:nth-child(-n_+_3))]:flex', 'not-nth-[-n+3]:flex'],
-
-      // nth-last-child
-      ['[&:nth-last-child(2)]:flex', 'nth-last-2:flex'],
-      ['[&:not(:nth-last-child(2))]:flex', 'not-nth-last-2:flex'],
-
-      ['[&:nth-last-child(-n+3)]:flex', 'nth-last-[-n+3]:flex'],
-      ['[&:not(:nth-last-child(-n+3))]:flex', 'not-nth-last-[-n+3]:flex'],
-      ['[&:nth-last-child(-n_+_3)]:flex', 'nth-last-[-n+3]:flex'],
-      ['[&:not(:nth-last-child(-n_+_3))]:flex', 'not-nth-last-[-n+3]:flex'],
-
-      // nth-child odd/even
-      ['[&:nth-child(odd)]:flex', 'odd:flex'],
-      ['[&:not(:nth-child(odd))]:flex', 'even:flex'],
-      ['[&:nth-child(even)]:flex', 'even:flex'],
-      ['[&:not(:nth-child(even))]:flex', 'odd:flex'],
-
-      // Keep multiple attribute selectors as-is
-      ['[[data-visible][data-dark]]:flex', '[[data-visible][data-dark]]:flex'],
-
-      // Keep `:where(…)` as is
-      ['[:where([data-visible])]:flex', '[:where([data-visible])]:flex'],
-
-      // Complex attribute selectors with operators, quotes and insensitivity flags
-      ['[[data-url*="example"]]:flex', 'data-[url*="example"]:flex'],
-      ['[[data-url$=".com"_i]]:flex', 'data-[url$=".com"_i]:flex'],
-      ['[[data-url$=.com_i]]:flex', 'data-[url$=.com_i]:flex'],
-
-      // Attribute selector wrapped in `&:is(…)`
-      ['[&:is([data-visible])]:flex', 'data-visible:flex'],
-
-      // Media queries
-      ['[@media(pointer:fine)]:flex', 'pointer-fine:flex'],
-      ['[@media_(pointer_:_fine)]:flex', 'pointer-fine:flex'],
-      ['[@media_not_(pointer_:_fine)]:flex', 'not-pointer-fine:flex'],
-      ['[@media_print]:flex', 'print:flex'],
-      ['[@media_not_print]:flex', 'not-print:flex'],
-
-      // Hoist the `:not` part to a compound variant
-      ['[@media_not_(prefers-color-scheme:dark)]:flex', 'not-dark:flex'],
-      [
-        '[@media_not_(prefers-color-scheme:unknown)]:flex',
-        'not-[@media_(prefers-color-scheme:unknown)]:flex',
-      ],
-
-      // Compound arbitrary variants
-      ['has-[[data-visible]]:flex', 'has-data-visible:flex'],
-      ['has-[&:is([data-visible])]:flex', 'has-data-visible:flex'],
-      ['has-[&>[data-visible]]:flex', 'has-[&>[data-visible]]:flex'],
-
-      ['has-[[data-slot=description]]:flex', 'has-data-[slot=description]:flex'],
-      ['has-[&:is([data-slot=description])]:flex', 'has-data-[slot=description]:flex'],
-
-      ['has-[[aria-visible="true"]]:flex', 'has-aria-visible:flex'],
-      ['has-[[aria-visible]]:flex', 'has-aria-[visible]:flex'],
-
-      ['has-[&:not(:nth-child(even))]:flex', 'has-odd:flex'],
-
-      // Arbitrary variant to compound + arbitrary variants
-      ['[&:has([role=checkbox])]:flex', 'has-[[role=checkbox]]:flex'],
-      ['[&:has([aria-visible="true"])]:flex', 'has-aria-visible:flex'],
-      ['[&:has([data-slot=description])]:flex', 'has-data-[slot=description]:flex'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  describe('optimize modifier', () => {
-    let input = css`
-      @import 'tailwindcss';
-      @theme {
-        --*: initial;
-        --color-red-500: red;
-      }
-    `
-
-    test.each([
-      // Keep the modifier as-is, nothing to optimize
-      ['bg-red-500/25', 'bg-red-500/25'],
-
-      // Use a bare value modifier
-      ['bg-red-500/[25%]', 'bg-red-500/25'],
-
-      // Convert 0-1 values to bare values
-      ['bg-[#f00]/[0.16]', 'bg-[#f00]/16'],
-
-      // Drop unnecessary modifiers
-      ['bg-red-500/[100%]', 'bg-red-500'],
-      ['bg-red-500/100', 'bg-red-500'],
-
-      // Keep modifiers on classes that don't _really_ exist
-      ['group/name', 'group/name'],
-    ])(testName, { timeout }, async (candidate, expected) => {
-      await expectCanonicalization(input, candidate, expected)
-    })
-  })
-
-  describe('combine to shorthand utilities', () => {
-    test.each([
-      // 4 to 1
-      ['mt-1 mr-1 mb-1 ml-1', 'm-1'],
-      ['border-t-123 border-r-123 border-b-123 border-l-123', 'border-123'],
-      ['border-t-1 border-r-1 border-b-1 border-l-1', 'border'], // `border` is shorter than `border-1`
-      ['border-t-red-500 border-r-red-500 border-b-red-500 border-l-red-500', 'border-red-500'],
-      ['scroll-mt-1 scroll-mr-1 scroll-mb-1 scroll-ml-1', 'scroll-m-1'],
-      ['scroll-pt-1 scroll-pr-1 scroll-pb-1 scroll-pl-1', 'scroll-p-1'],
-
-      // 2 to 1
-      ['mt-1 mb-1', 'my-1'],
-      ['border-t-123 border-b-123', 'border-y-123'],
-      ['border-t-1 border-b-1', 'border-y'], // `border-y` is shorter than `border-y-1`
-      ['border-t-red-500 border-b-red-500', 'border-y-red-500'],
-      ['scroll-mt-1 scroll-mb-1', 'scroll-my-1'],
-      ['scroll-pt-1 scroll-pb-1', 'scroll-py-1'],
-      ['overflow-x-hidden overflow-y-hidden', 'overflow-hidden'],
-      ['overscroll-x-contain overscroll-y-contain', 'overscroll-contain'],
-
-      // Different order as above
-      ['mb-1 mt-1', 'my-1'],
-
-      // To completely different utility
-      ['w-4 h-4', 'size-4'],
-
-      // Goes beyond the default spacing scale that's being used in intellisense
-      // for code completion. Since it's about bare values, we should still be
-      // able to combine them.
-      ['w-123 h-123', 'size-123'],
-      ['w-128 h-128', 'size-128'], // `w-128` on its own would become `w-lg`
-      ['mt-123 mb-123', 'my-123'],
-
-      // Collapse duplicates into themselves
-      ['w-8 w-8', 'w-8'],
-
-      // `w-*` and `h-*` would canonicalize to `size-5`
-      // `size-5` and `size-5` should then canonicalize to `size-5`
-      ['w-[calc(1rem+0.25rem)] h-[calc(1rem+0.25rem)] size-5', 'size-5'],
-
-      // Same as above, but with an additional unrelated class
-      ['w-[calc(1rem+0.25rem)] h-[calc(1rem+0.25rem)] size-5 flex', 'size-5 flex'],
-
-      // Do not touch if not operating on the same variants
-      ['hover:w-4 h-4', 'hover:w-4 h-4'],
-
-      // Arbitrary properties to combined class
-      ['[width:_16px_] [height:16px]', 'size-4'],
-
-      // Arbitrary properties to combined class with modifier
-      ['[font-size:14px] [line-height:1.625]', 'text-sm/relaxed'],
-    ])(testName, { timeout }, async (candidates, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-      await expectCanonicalization(input, candidates, expected)
-    })
-  })
-
-  describe('font-size/line-height to text-{x}/{y}', () => {
-    test.each([
-      ...Array.from(
-        cartesian(
-          ['[font-size:14px]', 'text-[14px]', 'text-[14px]/6', 'text-sm', 'text-sm/6'],
-          ['[line-height:28px]', 'leading-[28px]', 'leading-7'],
-        ),
-      ).map((classes) => [classes.join(' ').padEnd(40, ' '), 'text-sm/7']),
-      ...Array.from(
-        cartesian(
-          ['[font-size:15px]', 'text-[15px]', 'text-[15px]/6'],
-          ['[line-height:28px]', 'leading-[28px]', 'leading-7'],
-        ),
-      ).map((classes) => [classes.join(' ').padEnd(40, ' '), 'text-[15px]/7']),
-      ...Array.from(
-        cartesian(
-          ['[font-size:14px]', 'text-[14px]', 'text-[14px]/6', 'text-sm', 'text-sm/6'],
-          ['[line-height:28.5px]', 'leading-[28.5px]'],
-        ),
-      ).map((classes) => [classes.join(' ').padEnd(40, ' '), 'text-sm/[28.5px]']),
-      ...Array.from(
-        cartesian(
-          ['[font-size:15px]', 'text-[15px]', 'text-[15px]/6'],
-          ['[line-height:28.5px]', 'leading-[28.5px]'],
-        ),
-      ).map((classes) => [classes.join(' ').padEnd(40, ' '), 'text-[15px]/[28.5px]']),
-    ])(testName, { timeout }, async (candidates, expected) => {
-      let input = css`
-        @import 'tailwindcss';
-      `
-      await expectCanonicalization(input, candidates.trim(), expected)
-    })
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1558
-  test.each([
-    ['tracking-[-0.05em]', 'tracking-tighter'],
-    ['tracking-[-0.025em]', 'tracking-tight'],
-    ['tracking-[0em]', 'tracking-normal'],
-    ['tracking-[0.025em]', 'tracking-wide'],
-    ['tracking-[0.05em]', 'tracking-wider'],
-    ['tracking-[0.1em]', 'tracking-widest'],
-
-    // Negative values that don't make sense
-    // See: https://tailwindcss.com/docs/letter-spacing#using-negative-values
-    ['-tracking-tighter', 'tracking-wider'],
-    ['-tracking-tight', 'tracking-wide'],
-    ['-tracking-normal', 'tracking-normal'],
-    ['-tracking-wide', 'tracking-tight'],
-    ['-tracking-wider', 'tracking-tighter'],
-  ])(testName, { timeout }, async (candidate, expected) => {
-    await expectCanonicalization(
-      css`
-        @import 'tailwindcss';
-        @theme {
-          --tracking-tighter: -0.05em;
-          --tracking-tight: -0.025em;
-          --tracking-normal: 0em;
-          --tracking-wide: 0.025em;
-          --tracking-wider: 0.05em;
-          --tracking-widest: 0.1em;
-        }
-      `,
-      candidate,
-      expected,
-    )
-  })
-
-  test.each([
-    // Keep whitespace characters that are significant
-    ['[&:has(~_*_*:checked)]:flex', '[&:has(~_*_*:checked)]:flex'],
-    [
-      'shadow-[inset_0px_1px_--theme(--color-white/15%)]',
-      'shadow-[inset_0px_1px_--theme(--color-white/15%)]',
-    ],
-
-    // Improve readability when whitespace was used for readability
-    ['w-[calc(100%_-_calc(var(--spacing)*60))]', 'w-[calc(100%-(--spacing(60)))]'],
-    ['w-[calc(100%_-_--spacing(60))]', 'w-[calc(100%-(--spacing(60)))]'],
-
-    // No need to wrap in `(…)` after a `,`
-    ['m-[min(100%,_--spacing(6))]', 'm-[min(100%,--spacing(6))]'],
-    ['m-[min(100%_,_--spacing(6))]', 'm-[min(100%,--spacing(6))]'],
-    ['m-[min(100%,--spacing(6))]', 'm-[min(100%,--spacing(6))]'],
-  ])(testName, async (candidate, expected) => {
-    let input = css`
-      @import 'tailwindcss';
-    `
-
-    await expectCanonicalization(input, candidate, expected)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1573
-  test.each([
-    ['-mt-[0.04in]', 'mt-[-0.04in]'],
-    ['mt-[-0.04in]', 'mt-[-0.04in]'],
-    ['-mt-[-0.04in]', 'mt-[0.04in]'],
-  ])(testName, { timeout }, async (candidate, expected) => {
-    let input = css`
-      @import 'tailwindcss';
-    `
-
-    await expectCanonicalization(input, candidate, expected)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1591
-  test.each([
-    ['w-[calc(100%/3.5)]', 'w-[calc(100%/3.5)]'], // Not w-[28.571428571428573%]
-  ])(testName, { timeout }, async (candidate, expected) => {
-    let input = css`
-      @import 'tailwindcss';
-    `
-
-    await expectCanonicalization(input, candidate, expected)
-  })
-})
-
-describe('theme to var', () => {
-  test('extended space scale converts to var or calc', { timeout }, async () => {
-    let designSystem = await __unstable__loadDesignSystem(
-      css`
-        @tailwind utilities;
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-2: 2px;
-          --spacing-miami: 0.875rem;
-        }
-      `,
-      { base: __dirname },
-    )
-    expect(
-      designSystem.canonicalizeCandidates([
-        '[--value:theme(spacing.1)]',
-        '[--value:theme(spacing.2)]',
-        '[--value:theme(spacing.miami)]',
-        '[--value:theme(spacing.nyc)]',
-      ]),
-    ).toEqual([
-      '[--value:--spacing(1)]',
-      '[--value:var(--spacing-2)]',
-      '[--value:var(--spacing-miami)]',
-      '[--value:theme(spacing.nyc)]',
-    ])
-  })
-
-  test('custom space scale converts to var', { timeout }, async () => {
-    let designSystem = await __unstable__loadDesignSystem(
-      css`
-        @tailwind utilities;
-        @theme {
-          --spacing-*: initial;
-          --spacing-1: 0.25rem;
-          --spacing-2: 0.5rem;
-        }
-      `,
-      { base: __dirname },
-    )
-    expect(
-      designSystem.canonicalizeCandidates([
-        '[--value:theme(spacing.1)]',
-        '[--value:theme(spacing.2)]',
-        '[--value:theme(spacing.3)]',
-      ]),
-    ).toEqual([
-      '[--value:var(--spacing-1)]',
-      '[--value:var(--spacing-2)]',
-      '[--value:theme(spacing.3)]',
-    ])
-  })
-})
-
-describe('options', () => {
-  test('normalize `rem` units to `px`', { timeout }, async () => {
-    let designSystem = await __unstable__loadDesignSystem(
-      css`
-        @tailwind utilities;
-        @theme {
-          --spacing: 0.25rem;
-        }
-      `,
-      { base: __dirname },
-    )
-
-    expect(designSystem.canonicalizeCandidates(['m-[16px]'])).toEqual(['m-[16px]'])
-    expect(designSystem.canonicalizeCandidates(['m-[16px]'], { rem: 16 })).toEqual(['m-4'])
-    expect(designSystem.canonicalizeCandidates(['m-[16px]'], { rem: 64 })).toEqual(['m-1'])
-    expect(designSystem.canonicalizeCandidates(['m-[16px]'])).toEqual(['m-[16px]']) // Ensure options don't influence shared state
-  })
-})
-
-describe('regressions', () => {
-  // https://github.com/schoero/eslint-plugin-better-tailwindcss/issues/321
-  {
-    test('a subset of classes should be canonicalizable', { timeout }, async () => {
-      let designSystem = await designSystems.get(__dirname).get(css`
-        @import 'tailwindcss';
-      `)
-
-      let options: CanonicalizeOptions = {
-        collapse: true,
-        logicalToPhysical: true,
-        rem: 16,
-      }
-
-      expect(
-        designSystem.canonicalizeCandidates(['underline', 'h-4', 'w-4', 'text-sm'], options),
-      ).toEqual(['underline', 'text-sm', 'size-4'])
-    })
-
-    test('collapse canonicalization is not affected by previous calls', { timeout }, async () => {
-      let designSystem = await designSystems.get(__dirname).get(css`
-        @import 'tailwindcss';
-      `)
-
-      let options: CanonicalizeOptions = {
-        collapse: true,
-        logicalToPhysical: true,
-        rem: 16,
-      }
-
-      let target = ['underline', 'h-4', 'w-4']
-
-      expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4'])
-
-      designSystem.canonicalizeCandidates(['mb-4', 'text-sm'], options)
-      designSystem.canonicalizeCandidates(['underline', 'mb-4'], options)
-
-      expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4'])
-      expect(designSystem.canonicalizeCandidates(target.concat('text-sm'), options)).toEqual([
-        'underline',
-        'text-sm',
-        'size-4',
-      ])
-    })
-  }
-
-  // https://github.com/tailwindlabs/tailwindcss/pull/19727
-  test(
-    'collapse does not crash when utilities with no standard properties are present',
-    { timeout },
-    async () => {
-      let designSystem = await designSystems.get(__dirname).get(css`
-        @import 'tailwindcss';
-      `)
-
-      let options: CanonicalizeOptions = {
-        collapse: true,
-        logicalToPhysical: true,
-        rem: 16,
-      }
-
-      // Shadow utilities use CSS custom properties and @property rules but may
-      // produce empty property maps in the collapse algorithm. This should not
-      // crash with "Cannot read properties of null" or "X is not iterable".
-      expect(() =>
-        designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options),
-      ).not.toThrow()
-
-      expect(() => designSystem.canonicalizeCandidates(['shadow-md', 'p-4'], options)).not.toThrow()
-
-      expect(() =>
-        designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options),
-      ).not.toThrow()
-
-      // Verify the candidates are returned (not collapsed, since shadows can't
-      // meaningfully collapse with unrelated utilities)
-      expect(designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options)).toEqual(
-        expect.arrayContaining(['shadow-sm', 'border']),
-      )
-
-      expect(designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options)).toEqual(
-        expect.arrayContaining(['shadow-sm', 'shadow-md']),
-      )
-    },
-  )
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/19835
-  test.each([
-    // Arbitrary values should be collapsed to another arbitrary value
-    [
-      ['px-[1.2rem]', 'py-[1.2rem]', 'text-left'],
-      ['text-left', 'p-[1.2rem]'],
-    ],
-
-    // Arbitrary values could also be collapsed into a bare value
-    [
-      ['px-[30.75rem]', 'py-[30.75rem]', 'text-left'],
-      ['text-left', 'p-123'],
-    ],
-  ])(
-    'collapse canonicalization works for arbitrary values',
-    { timeout },
-    async (candidates, expected) => {
-      let designSystem = await designSystems.get(__dirname).get(css`
-        @import 'tailwindcss';
-      `)
-
-      let options: CanonicalizeOptions = {
-        collapse: true,
-        logicalToPhysical: true,
-        rem: 16,
-      }
-
-      expect(designSystem.canonicalizeCandidates(candidates, options)).toEqual(expected)
-    },
-  )
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/20051
-  test(
-    'does not crash when plugin matchComponents rejects speculative values during collapse',
-    { timeout },
-    async () => {
-      let designSystem = await __unstable__loadDesignSystem(
-        css`
-          @import 'tailwindcss';
-          @plugin "./plugin.js";
-        `,
-        {
-          async loadStylesheet(_, base) {
-            return {
-              base,
-              path: '',
-              content: '@tailwind utilities;',
-            }
-          },
-          async loadModule() {
-            return {
-              base: '',
-              path: '',
-              module: plugin(({ matchComponents }) => {
-                matchComponents(
-                  {
-                    myicon: () => {
-                      throw new Error('Mimic as-if a custom plugin failed for some reason')
-                    },
-                  },
-                  { values: { icon: __filename } },
-                )
-              }),
-            }
-          },
-        },
-      )
-
-      expect(
-        designSystem.canonicalizeCandidates(['border-[1.5px]', 'flex'], {
-          collapse: true,
-          logicalToPhysical: true,
-          rem: 16,
-        }),
-      ).toEqual(expect.arrayContaining(['border-[1.5px]', 'flex']))
-    },
-  )
-
-  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1579
-  test('does not suggest invalid alternative when canonicalizing calc expressions', async () => {
-    let designSystem = await designSystems.get(__dirname).get(css`
-      @import 'tailwindcss';
-    `)
-
-    let options: CanonicalizeOptions = {
-      collapse: true,
-      logicalToPhysical: true,
-      rem: 16,
-    }
-
-    expect(designSystem.canonicalizeCandidates(['px-[calc(1rem+0px)]'], options)).toEqual(['px-4'])
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/20295
-  test('canonicalizations work when casing of arbitrary values is different', async () => {
-    let designSystem = await designSystems.get(__dirname).get(css`
-      @import 'tailwindcss';
-      @theme {
-        --color-brand-purple: #3f3cbb;
-      }
-    `)
-
-    let options: CanonicalizeOptions = {
-      collapse: true,
-      logicalToPhysical: true,
-      rem: 16,
-    }
-
-    expect(designSystem.canonicalizeCandidates(['bg-[#3F3cbb]'], options)).toEqual([
-      'bg-brand-purple',
-    ])
-    expect(designSystem.canonicalizeCandidates(['bg-[#3F3Cbb]'], options)).toEqual([
-      'bg-brand-purple',
-    ])
-    expect(designSystem.canonicalizeCandidates(['bg-[#3F3CBB]'], options)).toEqual([
-      'bg-brand-purple',
-    ])
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/20365
-  test('canonicalizes min/max media query and container query variants', async () => {
-    let designSystem = await __unstable__loadDesignSystem(
-      css`
-        @tailwind utilities;
-        @theme {
-          --breakpoint-lg: 64rem;
-          --container-lg: 32rem;
-          --spacing: 0.25rem;
-        }
-      `,
-      { base: __dirname },
-    )
-
-    expect(designSystem.canonicalizeCandidates(['min-[64rem]:flex'])).toEqual(['lg:flex'])
-    expect(designSystem.canonicalizeCandidates(['max-[64rem]:flex'])).toEqual(['max-lg:flex'])
-    expect(designSystem.canonicalizeCandidates(['@min-[32rem]:flex'])).toEqual(['@lg:flex'])
-    expect(designSystem.canonicalizeCandidates(['@max-[32rem]:flex'])).toEqual(['@max-lg:flex'])
-    expect(designSystem.canonicalizeCandidates(['min-[1024px]:flex'], { rem: 16 })).toEqual([
-      'lg:flex',
-    ])
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1610
-  test('does not merge utilities whose theme variables resolve to CSS-wide keywords', async () => {
-    let designSystem = await __unstable__loadDesignSystem(
-      css`
-        @tailwind utilities;
-        @theme {
-          --foreground: unset;
-          --default: unset;
-        }
-        @theme inline {
-          --color-foreground: var(--foreground);
-          --color-default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
-        }
-      `,
-      { base: __dirname },
-    )
-
-    expect(
-      designSystem.canonicalizeCandidates(['text-foreground/60', 'text-default-soft-hover']),
-    ).toEqual(['text-foreground/60', 'text-default-soft-hover'])
-  })
-})
diff --git a/packages/tailwindcss/src/canonicalize-candidates.ts b/packages/tailwindcss/src/canonicalize-candidates.ts
deleted file mode 100644
index d1dfc09de..000000000
--- a/packages/tailwindcss/src/canonicalize-candidates.ts
+++ /dev/null
@@ -1,3062 +0,0 @@
-import { substituteAtApply } from './apply'
-import { atRule, cloneAstNode, styleRule, toCss, type AstNode } from './ast'
-import * as AttributeSelectorParser from './attribute-selector-parser'
-import {
-  cloneCandidate,
-  cloneVariant,
-  printArbitraryValue,
-  printModifier,
-  type Candidate,
-  type CandidateModifier,
-  type NamedUtilityValue,
-  type Variant,
-} from './candidate'
-import { canonicalizeCalcExpressionsAst } from './canonicalize-calc-expressions'
-import { keyPathToCssProperty } from './compat/apply-config-to-theme'
-import { constantFoldDeclaration, constantFoldDeclarationAst } from './constant-fold-declaration'
-import type { DesignSystem as BaseDesignSystem } from './design-system'
-import { CompileAstFlags } from './design-system'
-import { expandDeclaration } from './expand-declaration'
-import * as SelectorParser from './selector-parser'
-import { ThemeOptions } from './theme'
-import type { Writable } from './types'
-import { DefaultMap } from './utils/default-map'
-import { dimensions } from './utils/dimensions'
-import { isPositiveInteger, isValidSpacingMultiplier } from './utils/infer-data-type'
-import { replaceObject } from './utils/replace-object'
-import { segment } from './utils/segment'
-import { toKeyPath } from './utils/to-key-path'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction } from './walk'
-
-export interface CanonicalizeOptions {
-  /**
-   * The root font size in pixels. If provided, `rem` values will be normalized
-   * to `px` values.
-   *
-   * E.g.: `mt-[16px]` with `rem: 16` will become `mt-4` (assuming `--spacing: 0.25rem`).
-   */
-  rem?: number
-
-  /**
-   * Whether to collapse multiple utilities into a single utility if possible.
-   *
-   * E.g.: `mt-2 mr-2 mb-2 ml-2` → `m-2`
-   */
-  collapse?: boolean
-
-  /**
-   * Whether to convert between logical and physical properties when collapsing
-   * utilities.
-   *
-   * E.g.: `mr-2 ml-2` → `mx-2`
-   */
-  logicalToPhysical?: boolean
-}
-
-enum Features {
-  /**
-   * No features enabled (default)
-   */
-  None = 0,
-
-  /**
-   * Collapse multiple utilities into a single utility if possible.
-   */
-  CollapseUtilities = 1 << 0,
-}
-
-interface InternalCanonicalizeOptions {
-  features: Features
-  designSystem: DesignSystem
-  signatureOptions: SignatureOptions
-}
-
-type RemValue = number | null
-
-interface DesignSystem extends BaseDesignSystem {
-  storage: {
-    [SIGNATURE_OPTIONS_KEY]: DefaultMap<RemValue, DefaultMap<SignatureFeatures, SignatureOptions>>
-    [COMPARE_CANDIDATES_KEY]: DefaultMap<
-      SignatureOptions,
-      (a: Candidate | string, b: Candidate | string) => boolean
-    >
-    [INTERNAL_OPTIONS_KEY]: DefaultMap<
-      SignatureOptions,
-      DefaultMap<Features, InternalCanonicalizeOptions>
-    >
-    [CANONICALIZE_CANDIDATE_KEY]: DefaultMap<
-      InternalCanonicalizeOptions,
-      DefaultMap<string, string>
-    >
-    [CANONICALIZE_VARIANT_KEY]: DefaultMap<
-      InternalCanonicalizeOptions,
-      DefaultMap<Variant, Variant[]>
-    >
-    [CANONICALIZE_UTILITY_KEY]: DefaultMap<InternalCanonicalizeOptions, DefaultMap<string, string>>
-    [CONVERTER_KEY]: (input: string, options?: Convert) => [string, CandidateModifier | null]
-    [SPACING_KEY]: DefaultMap<string, number | null> | null
-    [UTILITY_SIGNATURE_KEY]: DefaultMap<SignatureOptions, DefaultMap<string, string | symbol>>
-    [STATIC_UTILITIES_KEY]: DefaultMap<
-      SignatureOptions,
-      DefaultMap<string, DefaultMap<string, Set<string>>>
-    >
-    [UTILITY_PROPERTIES_KEY]: DefaultMap<
-      SignatureOptions,
-      DefaultMap<string, DefaultMap<string, Set<string>>>
-    >
-    [PRE_COMPUTED_UTILITIES_KEY]: DefaultMap<SignatureOptions, DefaultMap<string, string[]>>
-    [VARIANT_SIGNATURE_KEY]: DefaultMap<RemValue, DefaultMap<string, string | symbol>>
-    [PRE_COMPUTED_VARIANTS_KEY]: DefaultMap<RemValue, DefaultMap<string, string[]>>
-  }
-}
-
-export function prepareDesignSystemStorage(
-  baseDesignSystem: BaseDesignSystem,
-  options?: CanonicalizeOptions,
-): DesignSystem {
-  let designSystem = baseDesignSystem as DesignSystem
-
-  designSystem.storage[SIGNATURE_OPTIONS_KEY] ??= createSignatureOptionsCache()
-  designSystem.storage[INTERNAL_OPTIONS_KEY] ??= createInternalOptionsCache(designSystem)
-  designSystem.storage[CANONICALIZE_CANDIDATE_KEY] ??= createCanonicalizeCandidateCache()
-  designSystem.storage[CANONICALIZE_VARIANT_KEY] ??= createCanonicalizeVariantCache()
-  designSystem.storage[CANONICALIZE_UTILITY_KEY] ??= createCanonicalizeUtilityCache()
-  designSystem.storage[CONVERTER_KEY] ??= createConverterCache(designSystem)
-  designSystem.storage[SPACING_KEY] ??= createSpacingCache(designSystem, options)
-  designSystem.storage[UTILITY_SIGNATURE_KEY] ??= createUtilitySignatureCache(designSystem)
-  designSystem.storage[STATIC_UTILITIES_KEY] ??= createStaticUtilitiesCache()
-  designSystem.storage[UTILITY_PROPERTIES_KEY] ??= createUtilityPropertiesCache(designSystem)
-  designSystem.storage[PRE_COMPUTED_UTILITIES_KEY] ??= createPreComputedUtilitiesCache(designSystem)
-  designSystem.storage[VARIANT_SIGNATURE_KEY] ??= createVariantSignatureCache(designSystem)
-  designSystem.storage[PRE_COMPUTED_VARIANTS_KEY] ??= createPreComputedVariantsCache(designSystem)
-  designSystem.storage[COMPARE_CANDIDATES_KEY] ??= createSignatureComparison(designSystem)
-
-  return designSystem
-}
-
-const SIGNATURE_OPTIONS_KEY = Symbol()
-function createSignatureOptionsCache(): DesignSystem['storage'][typeof SIGNATURE_OPTIONS_KEY] {
-  return new DefaultMap((rem: number | null) => {
-    return new DefaultMap((features: SignatureFeatures) => {
-      return { rem, features } satisfies SignatureOptions
-    })
-  })
-}
-
-const COMPARE_CANDIDATES_KEY = Symbol()
-function createSignatureComparison(designSystem: DesignSystem) {
-  return new DefaultMap((options: SignatureOptions) => {
-    let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options)
-
-    return function hasSameSignature(a: Candidate | string, b: Candidate | string): boolean {
-      let aCandidateString = typeof a === 'string' ? a : designSystem.printCandidate(a)
-      let aSignature = signatures.get(aCandidateString)
-      if (typeof aSignature !== 'string') return false
-
-      let bCandidateString = typeof b === 'string' ? b : designSystem.printCandidate(b)
-      let bSignature = signatures.get(bCandidateString)
-      if (typeof bSignature !== 'string') return false
-
-      return aSignature === bSignature
-    }
-  })
-}
-
-export function createSignatureOptions(
-  baseDesignSystem: BaseDesignSystem,
-  options?: CanonicalizeOptions,
-): SignatureOptions {
-  let features = SignatureFeatures.None
-  if (options?.collapse) features |= SignatureFeatures.ExpandProperties
-  if (options?.logicalToPhysical) features |= SignatureFeatures.LogicalToPhysical
-
-  let designSystem = prepareDesignSystemStorage(baseDesignSystem, options)
-
-  return designSystem.storage[SIGNATURE_OPTIONS_KEY].get(options?.rem ?? null).get(features)
-}
-
-const INTERNAL_OPTIONS_KEY = Symbol()
-function createInternalOptionsCache(
-  designSystem: DesignSystem,
-): DesignSystem['storage'][typeof INTERNAL_OPTIONS_KEY] {
-  return new DefaultMap((signatureOptions: SignatureOptions) => {
-    return new DefaultMap((features: Features) => {
-      return { features, designSystem, signatureOptions } satisfies InternalCanonicalizeOptions
-    })
-  })
-}
-
-function createCanonicalizeOptions(
-  baseDesignSystem: BaseDesignSystem,
-  signatureOptions: SignatureOptions,
-  options?: CanonicalizeOptions,
-) {
-  let features = Features.None
-  if (options?.collapse) features |= Features.CollapseUtilities
-
-  let designSystem = prepareDesignSystemStorage(baseDesignSystem)
-
-  return designSystem.storage[INTERNAL_OPTIONS_KEY].get(signatureOptions).get(features)
-}
-
-export function canonicalizeCandidates(
-  baseDesignSystem: BaseDesignSystem,
-  candidates: string[],
-  options?: CanonicalizeOptions,
-): string[] {
-  let signatureOptions = createSignatureOptions(baseDesignSystem, options)
-  let canonicalizeOptions = createCanonicalizeOptions(baseDesignSystem, signatureOptions, options)
-
-  let designSystem = prepareDesignSystemStorage(baseDesignSystem)
-
-  let result = new Set<string>()
-  let cache = designSystem.storage[CANONICALIZE_CANDIDATE_KEY].get(canonicalizeOptions)
-  for (let candidate of candidates) {
-    result.add(cache.get(candidate))
-  }
-
-  return result.size <= 1 || !(canonicalizeOptions.features & Features.CollapseUtilities)
-    ? Array.from(result)
-    : collapseCandidates(canonicalizeOptions, Array.from(result))
-}
-
-function collapseCandidates(options: InternalCanonicalizeOptions, candidates: string[]): string[] {
-  let designSystem = options.designSystem
-
-  // To keep things simple, we group candidates such that we only collapse
-  // candidates with the same variants and important modifier together.
-  let groups = new DefaultMap((_before: string) => {
-    return new DefaultMap((_after: string) => {
-      return new Set<string>()
-    })
-  })
-
-  let prefix = options.designSystem.theme.prefix ? `${options.designSystem.theme.prefix}:` : ''
-
-  for (let candidate of candidates) {
-    let variants = segment(candidate, ':')
-    let utility = variants.pop()!
-
-    let important = utility.endsWith('!')
-    if (important) {
-      utility = utility.slice(0, -1)
-    }
-
-    let before = variants.length > 0 ? `${variants.join(':')}:` : ''
-    let after = important ? '!' : ''
-
-    // Group by variants and important flag
-    groups.get(before).get(after).add(`${prefix}${utility}`)
-  }
-
-  let result = new Set<string>()
-  for (let [before, group] of groups.entries()) {
-    for (let [after, candidates] of group.entries()) {
-      for (let candidate of collapseGroup(Array.from(candidates))) {
-        // Drop the prefix if we had one, because the prefix is already there as
-        // part of the variants.
-        if (prefix && candidate.startsWith(prefix)) {
-          candidate = candidate.slice(prefix.length)
-        }
-
-        result.add(`${before}${candidate}${after}`)
-      }
-    }
-  }
-
-  return Array.from(result)
-
-  function collapseGroup(candidates: string[]) {
-    let signatureOptions = options.signatureOptions
-    let computeUtilitiesPropertiesLookup =
-      designSystem.storage[UTILITY_PROPERTIES_KEY].get(signatureOptions)
-    let staticUtilities = designSystem.storage[STATIC_UTILITIES_KEY].get(signatureOptions)
-
-    // For each candidate, compute the used properties and values. E.g.: `mt-1` → `margin-top` → `0.25rem`
-    //
-    // NOTE: Currently assuming we are dealing with static utilities only. This
-    // will change the moment we have `@utility` for most built-ins.
-    let candidatePropertiesValues = candidates.map((candidate) =>
-      computeUtilitiesPropertiesLookup.get(candidate),
-    )
-
-    // Hard-coded optimization: if any candidate sets `line-height` and another
-    // candidate sets `font-size`, we pre-compute the `text-*` utilities with
-    // this line-height to try and collapse to those combined values.
-    if (candidatePropertiesValues.some((x) => x.has('line-height'))) {
-      let fontSizeNames = designSystem.theme.keysInNamespaces(['--text'])
-      if (fontSizeNames.length > 0) {
-        let interestingLineHeights = new Set<string | number>()
-        let seenLineHeights = new Set<string>()
-        for (let pairs of candidatePropertiesValues) {
-          if (!pairs.has('line-height')) continue
-
-          for (let lineHeight of pairs.get('line-height')) {
-            if (seenLineHeights.has(lineHeight)) continue
-            seenLineHeights.add(lineHeight)
-
-            let bareValue = designSystem.storage[SPACING_KEY]?.get(lineHeight) ?? null
-            if (bareValue !== null) {
-              if (isValidSpacingMultiplier(bareValue)) {
-                interestingLineHeights.add(bareValue)
-
-                for (let name of fontSizeNames) {
-                  computeUtilitiesPropertiesLookup.get(`text-${name}/${bareValue}`)
-                }
-              } else {
-                interestingLineHeights.add(lineHeight)
-
-                for (let name of fontSizeNames) {
-                  computeUtilitiesPropertiesLookup.get(`text-${name}/[${lineHeight}]`)
-                }
-              }
-            }
-          }
-        }
-
-        let seenFontSizes = new Set<string>()
-        for (let pairs of candidatePropertiesValues) {
-          if (!pairs.has('font-size')) continue
-
-          for (let fontSize of pairs.get('font-size')) {
-            if (seenFontSizes.has(fontSize)) continue
-            seenFontSizes.add(fontSize)
-
-            for (let lineHeight of interestingLineHeights) {
-              if (isValidSpacingMultiplier(lineHeight)) {
-                computeUtilitiesPropertiesLookup.get(`text-[${fontSize}]/${lineHeight}`)
-              } else {
-                computeUtilitiesPropertiesLookup.get(`text-[${fontSize}]/[${lineHeight}]`)
-              }
-            }
-          }
-        }
-      }
-    }
-
-    let dynamicUtilities = new DefaultMap((candidate: string) => {
-      let result = new DefaultMap(
-        (_property: string) => new DefaultMap((_value: string) => new Set<string>()),
-      )
-
-      let relevantProperties = new Set(computeUtilitiesPropertiesLookup.get(candidate).keys())
-      if (relevantProperties.size === 0) return result
-
-      for (let parsedCandidate of parseCandidate(designSystem, candidate)) {
-        if (parsedCandidate.kind !== 'functional' || parsedCandidate.value === null) {
-          continue
-        }
-
-        for (let root of designSystem.utilities.keys('functional')) {
-          if (root === parsedCandidate.root) continue // Skip self
-
-          let replacement = printUnprefixedCandidate(designSystem, {
-            ...cloneCandidate(parsedCandidate),
-            root,
-          })
-
-          let propertyValues = computeUtilitiesPropertiesLookup.get(replacement)
-          for (let [property, values] of propertyValues) {
-            if (!relevantProperties.has(property)) continue // Skip properties that are not relevant for the current candidate
-
-            for (let value of values) {
-              result.get(property).get(value).add(replacement)
-            }
-          }
-        }
-
-        return result
-      }
-
-      return result
-    })
-
-    // For each property, lookup other utilities that also set this property and
-    // this exact value. If multiple properties are used, use the intersection of
-    // each property.
-    //
-    // E.g.: `margin-top` → `mt-1`, `my-1`, `m-1`
-    let otherUtilities = candidatePropertiesValues.map((propertyValues, idx) => {
-      let result: Set<string> | null = null
-      for (let property of propertyValues.keys()) {
-        let otherUtilities = new Set<string>()
-        for (let group of staticUtilities.get(property).values()) {
-          for (let candidate of group) {
-            otherUtilities.add(candidate)
-          }
-        }
-
-        for (let value of propertyValues.get(property)) {
-          for (let candidate of dynamicUtilities.get(candidates[idx]).get(property).get(value)) {
-            otherUtilities.add(candidate)
-          }
-        }
-
-        if (result === null) result = otherUtilities
-        else result = intersection(result, otherUtilities)
-
-        // The moment no other utilities match, we can stop searching because
-        // all intersections with an empty set will remain empty.
-        if (result!.size === 0) return result!
-      }
-      return result ?? new Set<string>()
-    })
-
-    // Link each candidate that could be linked via another utility
-    // (intersection). This way we can reduce the amount of required combinations.
-    //
-    // E.g.: `mt-1` and `mb-1` can be linked via `my-1`.
-    //
-    // Candidates that cannot be linked won't be able to be collapsed.
-    // E.g.: `mt-1` and `text-red-500` cannot be collapsed because there is no 3rd
-    // utility with overlapping property/value combinations.
-    let linked = new DefaultMap<number, Set<number>>((key) => new Set<number>([key]))
-    for (let i = 0; i < otherUtilities.length; i++) {
-      let current = otherUtilities[i]
-      for (let j = i + 1; j < otherUtilities.length; j++) {
-        let other = otherUtilities[j]
-
-        for (let property of current) {
-          if (other.has(property)) {
-            linked.get(i).add(j)
-            linked.get(j).add(i)
-
-            // The moment we find a link, we can stop comparing and move on to the
-            // next candidate. This will safe us some time
-            break
-          }
-        }
-      }
-    }
-
-    // Not a single candidate can be linked to another one, nothing left to do
-    if (linked.size === 0) return candidates
-
-    // Each candidate index will now have a set of other candidate indexes as
-    // its value. Let's make the lists unique combinations so that we can
-    // iterate over them.
-    let uniqueCombinations = new DefaultMap((key: string) => key.split(',').map(Number))
-    for (let group of linked.values()) {
-      let sorted = Array.from(group).sort((a, b) => a - b)
-      uniqueCombinations.get(sorted.join(','))
-    }
-
-    // Let's try to actually collapse them now.
-    let result = new Set<string>(candidates)
-    let drop = new Set<string>()
-
-    for (let idxs of uniqueCombinations.values()) {
-      for (let combo of combinations(idxs)) {
-        if (combo.some((idx) => drop.has(candidates[idx]))) continue // Skip already dropped items
-
-        let potentialReplacements = combo.flatMap((idx) => otherUtilities[idx]).reduce(intersection)
-
-        let collapsedSignature = designSystem.storage[UTILITY_SIGNATURE_KEY].get(
-          signatureOptions,
-        ).get(
-          combo
-            .map((idx) => candidates[idx])
-            .sort((a, z) => a.localeCompare(z)) // Sort to increase cache hits
-            .join(' '),
-        )
-
-        for (let replacement of potentialReplacements) {
-          let signature =
-            designSystem.storage[UTILITY_SIGNATURE_KEY].get(signatureOptions).get(replacement)
-          if (signature !== collapsedSignature) continue // Not a safe replacement
-
-          // Use the replacement
-          result.add(replacement)
-
-          // We can replace all items in the combo with the replacement. If the
-          // replacement is already part of the combo, keep that one around.
-          for (let item of combo) {
-            if (candidates[item] !== replacement) {
-              drop.add(candidates[item])
-            }
-          }
-
-          break
-        }
-      }
-    }
-
-    for (let item of drop) {
-      result.delete(item)
-    }
-
-    return Array.from(result)
-  }
-}
-
-const CANONICALIZE_CANDIDATE_KEY = Symbol()
-function createCanonicalizeCandidateCache(): DesignSystem['storage'][typeof CANONICALIZE_CANDIDATE_KEY] {
-  return new DefaultMap((options: InternalCanonicalizeOptions) => {
-    let ds = options.designSystem
-    let prefix = ds.theme.prefix ? `${ds.theme.prefix}:` : ''
-    let variantCache = ds.storage[CANONICALIZE_VARIANT_KEY].get(options)
-    let utilityCache = ds.storage[CANONICALIZE_UTILITY_KEY].get(options)
-
-    return new DefaultMap<string, string>((rawCandidate: string, self) => {
-      for (let candidate of ds.parseCandidate(rawCandidate)) {
-        let variants = candidate.variants
-          .slice()
-          .reverse()
-          .flatMap((variant) => variantCache.get(variant))
-        let important = candidate.important
-
-        // Canonicalize the base candidate (utility), and re-attach the variants
-        // and important flag afterwards. This way we can maximize cache hits for
-        // the base candidate and each individual variant.
-        if (important || variants.length > 0) {
-          let canonicalizedUtility = self.get(
-            ds.printCandidate({ ...candidate, variants: [], important: false }),
-          )
-
-          // Rebuild the final candidate
-          let result = canonicalizedUtility
-
-          // Remove the prefix if there are variants, because the variants exist
-          // between the prefix and the base candidate.
-          if (ds.theme.prefix !== null && variants.length > 0) {
-            result = result.slice(prefix.length)
-          }
-
-          // Re-attach the variants
-          if (variants.length > 0) {
-            result = `${variants.map((v) => ds.printVariant(v)).join(':')}:${result}`
-          }
-
-          // Re-attach the important flag
-          if (important) {
-            result += '!'
-          }
-
-          // Re-attach the prefix if there were variants
-          if (ds.theme.prefix !== null && variants.length > 0) {
-            result = `${prefix}${result}`
-          }
-
-          return result
-        }
-
-        // We are guaranteed to have no variants and no important flag, just the
-        // base candidate left to canonicalize.
-        let result = utilityCache.get(rawCandidate)
-        if (result !== rawCandidate) {
-          return result
-        }
-      }
-
-      return rawCandidate
-    })
-  })
-}
-
-type VariantCanonicalizationFunction = (
-  variant: Variant,
-  options: InternalCanonicalizeOptions,
-) => Variant | Variant[]
-
-const VARIANT_CANONICALIZATIONS: VariantCanonicalizationFunction[] = [
-  themeToVarVariant,
-  arbitraryValueToBareValueVariant,
-  modernizeArbitraryValuesVariant,
-  arbitraryVariants,
-]
-
-const CANONICALIZE_VARIANT_KEY = Symbol()
-function createCanonicalizeVariantCache(): DesignSystem['storage'][typeof CANONICALIZE_VARIANT_KEY] {
-  return new DefaultMap((options: InternalCanonicalizeOptions) => {
-    return new DefaultMap((variant: Variant): Variant[] => {
-      let replacement = [variant]
-      for (let fn of VARIANT_CANONICALIZATIONS) {
-        for (let current of replacement.splice(0)) {
-          // A single variant can result in multiple variants, e.g.:
-          // `[&>[data-selected]]:flex` → `*:data-selected:flex`
-          let result = fn(cloneVariant(current), options)
-          if (Array.isArray(result)) {
-            replacement.push(...result)
-            continue
-          } else {
-            replacement.push(result)
-          }
-        }
-      }
-      return replacement
-    })
-  })
-}
-
-type UtilityCanonicalizationFunction = (
-  candidate: Candidate,
-  options: InternalCanonicalizeOptions,
-) => Candidate
-
-const UTILITY_CANONICALIZATIONS: UtilityCanonicalizationFunction[] = [
-  bgGradientToLinear,
-  themeToVarUtility,
-  calcToSpacingFunction,
-  optimizeArbitraryValueExpressions,
-  arbitraryUtilities,
-  bareValueUtilities,
-  deprecatedUtilities,
-  dropUnnecessaryDataTypes,
-  arbitraryValueToBareValueUtility,
-  optimizeModifier,
-]
-
-const CANONICALIZE_UTILITY_KEY = Symbol()
-function createCanonicalizeUtilityCache(): DesignSystem['storage'][typeof CANONICALIZE_UTILITY_KEY] {
-  return new DefaultMap((options: InternalCanonicalizeOptions) => {
-    let designSystem = options.designSystem
-    return new DefaultMap((rawCandidate: string): string => {
-      for (let readonlyCandidate of designSystem.parseCandidate(rawCandidate)) {
-        let replacement = cloneCandidate(readonlyCandidate) as Writable<typeof readonlyCandidate>
-
-        for (let fn of UTILITY_CANONICALIZATIONS) {
-          replacement = fn(replacement, options)
-        }
-
-        let canonicalizedCandidate = designSystem.printCandidate(replacement)
-        if (rawCandidate !== canonicalizedCandidate) {
-          return canonicalizedCandidate
-        }
-      }
-
-      return rawCandidate
-    })
-  })
-}
-
-// ----
-
-const DIRECTIONS = ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
-function bgGradientToLinear(candidate: Candidate) {
-  if (candidate.kind === 'static' && candidate.root.startsWith('bg-gradient-to-')) {
-    let direction = candidate.root.slice(15)
-
-    if (!DIRECTIONS.includes(direction)) {
-      return candidate
-    }
-
-    candidate.root = `bg-linear-to-${direction}`
-    return candidate
-  }
-
-  return candidate
-}
-
-// ----
-
-const enum Convert {
-  All = 0,
-  MigrateModifier = 1 << 0,
-  MigrateThemeOnly = 1 << 1,
-}
-
-function themeToVarUtility(candidate: Candidate, options: InternalCanonicalizeOptions): Candidate {
-  let convert = options.designSystem.storage[CONVERTER_KEY]
-
-  if (candidate.kind === 'arbitrary') {
-    let [newValue, modifier] = convert(
-      candidate.value,
-      candidate.modifier === null ? Convert.MigrateModifier : Convert.All,
-    )
-    if (newValue !== candidate.value) {
-      candidate.value = newValue
-
-      if (modifier !== null) {
-        candidate.modifier = modifier
-      }
-    }
-  } else if (candidate.kind === 'functional' && candidate.value?.kind === 'arbitrary') {
-    let [newValue, modifier] = convert(
-      candidate.value.value,
-      candidate.modifier === null ? Convert.MigrateModifier : Convert.All,
-    )
-    if (newValue !== candidate.value.value) {
-      candidate.value.value = newValue
-
-      if (modifier !== null) {
-        candidate.modifier = modifier
-      }
-    }
-  }
-
-  return candidate
-}
-
-function themeToVarVariant(
-  variant: Variant,
-  options: InternalCanonicalizeOptions,
-): Variant | Variant[] {
-  let convert = options.designSystem.storage[CONVERTER_KEY]
-
-  let iterator = walkVariants(variant)
-  for (let [variant] of iterator) {
-    if (variant.kind === 'arbitrary') {
-      let [newValue] = convert(variant.selector, Convert.MigrateThemeOnly)
-      if (newValue !== variant.selector) {
-        variant.selector = newValue
-      }
-    } else if (variant.kind === 'functional' && variant.value?.kind === 'arbitrary') {
-      let [newValue] = convert(variant.value.value, Convert.MigrateThemeOnly)
-      if (newValue !== variant.value.value) {
-        variant.value.value = newValue
-      }
-    }
-  }
-
-  return variant
-}
-
-function calcToSpacingFunction(
-  candidate: Candidate,
-  options: InternalCanonicalizeOptions,
-): Candidate {
-  if (candidate.kind === 'arbitrary') {
-    candidate.value = spacingCalcToSpacingFunction(candidate.value, options.designSystem)
-  } else if (candidate.kind === 'functional' && candidate.value?.kind === 'arbitrary') {
-    candidate.value.value = spacingCalcToSpacingFunction(
-      candidate.value.value,
-      options.designSystem,
-    )
-  }
-
-  return candidate
-}
-
-function spacingCalcToSpacingFunction(input: string, designSystem: DesignSystem) {
-  let spacingVariable = designSystem.theme.prefix
-    ? `--${designSystem.theme.prefix}-spacing`
-    : '--spacing'
-
-  let ast = ValueParser.parse(input)
-
-  walk(ast, (node) => {
-    // calc(…)
-    if (node.kind !== 'function' || node.value !== 'calc') return
-
-    // calc(var(--spacing) * 2)
-    //      --------------       1. function        (var)
-    //                    -      2. separator       ( )
-    //                     -     3. word            (*)
-    //                      -    4. separator       ( )
-    //                       -   5. any value, word (2)
-    if (node.nodes.length !== 5) return
-
-    // *
-    if (node.nodes[2].kind !== 'word' || node.nodes[2].value !== '*') {
-      return
-    }
-
-    // var(--spacing)
-    if (
-      node.nodes[0].kind !== 'function' ||
-      node.nodes[0].value !== 'var' ||
-      node.nodes[0].nodes.length !== 1 ||
-      node.nodes[0].nodes[0].kind !== 'word' ||
-      node.nodes[0].nodes[0].value !== spacingVariable
-    ) {
-      return
-    }
-
-    return WalkAction.Replace(
-      ValueParser.parse(
-        `--spacing(${
-          ValueParser.toCss([node.nodes[4]]) // Value node
-        })`,
-      ),
-    )
-  })
-
-  return ValueParser.toCss(ast)
-}
-
-const CONVERTER_KEY = Symbol()
-function createConverterCache(
-  designSystem: DesignSystem,
-): DesignSystem['storage'][typeof CONVERTER_KEY] {
-  return createConverter(designSystem)
-
-  function createConverter(designSystem: DesignSystem) {
-    function convert(input: string, options = Convert.All): [string, CandidateModifier | null] {
-      let ast = ValueParser.parse(input)
-
-      // In some scenarios (e.g.: variants), we can't migrate to `var(…)` if it
-      // ends up in the `@media (…)` part. In this case we only have to migrate to
-      // the new `theme(…)` notation.
-      if (options & Convert.MigrateThemeOnly) {
-        return [substituteFunctionsInValue(ast, toTheme), null]
-      }
-
-      let themeUsageCount = 0
-      let themeModifierCount = 0
-
-      // Analyze AST
-      walk(ast, (node) => {
-        if (node.kind !== 'function') return
-        if (node.value !== 'theme') return
-
-        // We are only interested in the `theme` function
-        themeUsageCount += 1
-
-        // Figure out if a modifier is used
-        walk(node.nodes, (child) => {
-          // If we see a `,`, it means that we have a fallback value
-          if (child.kind === 'separator' && child.value.includes(',')) {
-            return WalkAction.Stop
-          }
-
-          // If we see a `/`, we have a modifier
-          else if (child.kind === 'word' && child.value === '/') {
-            themeModifierCount += 1
-            return WalkAction.Stop
-          }
-
-          return WalkAction.Skip
-        })
-      })
-
-      // No `theme(…)` calls, nothing to do
-      if (themeUsageCount === 0) {
-        return [input, null]
-      }
-
-      // No `theme(…)` with modifiers, we can migrate to `var(…)`
-      if (themeModifierCount === 0) {
-        return [substituteFunctionsInValue(ast, toVar), null]
-      }
-
-      // Multiple modifiers which means that there are multiple `theme(…/…)`
-      // values. In this case, we can't convert the modifier to a candidate
-      // modifier.
-      //
-      // We also can't migrate to `var(…)` because that would lose the modifier.
-      //
-      // Try to convert each `theme(…)` call to the modern syntax.
-      if (themeModifierCount > 1) {
-        return [substituteFunctionsInValue(ast, toTheme), null]
-      }
-
-      // Only a single `theme(…)` with a modifier left, that modifier will be
-      // migrated to a candidate modifier.
-      let modifier: CandidateModifier | null = null
-      let result = substituteFunctionsInValue(ast, (path, fallback) => {
-        let parts = segment(path, '/').map((part) => part.trim())
-
-        // Multiple `/` separators, which makes this an invalid path
-        if (parts.length > 2) return null
-
-        // The path contains a `/`, which means that there is a modifier such as
-        // `theme(colors.red.500/50%)`.
-        //
-        // Currently, we are assuming that this is only being used for colors,
-        // which means that we can typically convert them to a modifier on the
-        // candidate itself.
-        //
-        // If there is more than one node in the AST though, `theme(…)` must not
-        // be the whole value so it's not safe to use a modifier instead.
-        //
-        // E.g.: `inset 0px 1px theme(colors.red.500/50%)` is a shadow, not a color.
-        if (ast.length === 1 && parts.length === 2 && options & Convert.MigrateModifier) {
-          let [pathPart, modifierPart] = parts
-
-          // 50% -> /50
-          if (/^\d+%$/.test(modifierPart)) {
-            modifier = { kind: 'named', value: modifierPart.slice(0, -1) }
-          }
-
-          // .12 -> /12
-          // .12345 -> /[12.345]
-          else if (/^0?\.\d+$/.test(modifierPart)) {
-            let value = Number(modifierPart) * 100
-            modifier = {
-              kind: Number.isInteger(value) ? 'named' : 'arbitrary',
-              value: value.toString(),
-            }
-          }
-
-          // Anything else becomes arbitrary
-          else {
-            modifier = { kind: 'arbitrary', value: modifierPart }
-          }
-
-          // Update path to be the first part
-          path = pathPart
-        }
-
-        return toVar(path, fallback) || toTheme(path, fallback)
-      })
-
-      return [result, modifier]
-    }
-
-    function pathToVariableName(path: string, shouldPrefix = true) {
-      let variable = `--${keyPathToCssProperty(toKeyPath(path))}` as const
-      if (!designSystem.theme.get([variable])) return null
-
-      if (shouldPrefix && designSystem.theme.prefix) {
-        return `--${designSystem.theme.prefix}-${variable.slice(2)}`
-      }
-
-      return variable
-    }
-
-    function toVar(path: string, fallback?: string) {
-      let variable = pathToVariableName(path)
-      if (variable) return fallback ? `var(${variable}, ${fallback})` : `var(${variable})`
-
-      let keyPath = toKeyPath(path)
-      if (keyPath[0] === 'spacing' && designSystem.theme.get(['--spacing'])) {
-        let multiplier = keyPath[1]
-        if (!isValidSpacingMultiplier(multiplier)) return null
-
-        return `--spacing(${multiplier})`
-      }
-
-      return null
-    }
-
-    function toTheme(path: string, fallback?: string) {
-      let parts = segment(path, '/').map((part) => part.trim())
-      path = parts.shift()!
-
-      let variable = pathToVariableName(path, false)
-      if (!variable) return null
-
-      let modifier = parts.length > 0 ? `/${parts.join('/')}` : ''
-      return fallback
-        ? `--theme(${variable}${modifier}, ${fallback})`
-        : `--theme(${variable}${modifier})`
-    }
-
-    return convert
-  }
-}
-
-function substituteFunctionsInValue(
-  ast: ValueParser.ValueAstNode[],
-  handle: (value: string, fallback?: string) => string | null,
-) {
-  walk(ast, (node, ctx) => {
-    if (node.kind === 'function' && node.value === 'theme') {
-      if (node.nodes.length < 1) return
-
-      // Ignore whitespace before the first argument
-      if (node.nodes[0].kind === 'separator' && node.nodes[0].value.trim() === '') {
-        node.nodes.shift()
-      }
-
-      let pathNode = node.nodes[0]
-      if (pathNode.kind !== 'word') return
-
-      let path = pathNode.value
-
-      // For the theme function arguments, we require all separators to contain
-      // comma (`,`), spaces alone should be merged into the previous word to
-      // avoid splitting in this case:
-      //
-      // theme(--color-red-500 / 75%) theme(--color-red-500 / 75%, foo, bar)
-      //
-      // We only need to do this for the first node, as the fallback values are
-      // passed through as-is.
-      let skipUntilIndex = 1
-      for (let i = skipUntilIndex; i < node.nodes.length; i++) {
-        if (node.nodes[i].value.includes(',')) {
-          break
-        }
-        path += ValueParser.toCss([node.nodes[i]])
-        skipUntilIndex = i + 1
-      }
-
-      path = eventuallyUnquote(path)
-      let fallbackValues = node.nodes.slice(skipUntilIndex + 1)
-
-      let replacement =
-        fallbackValues.length > 0 ? handle(path, ValueParser.toCss(fallbackValues)) : handle(path)
-      if (replacement === null) return
-
-      {
-        let idx = ctx.index - 1
-        while (idx !== -1) {
-          let previous = ctx.siblings[idx]
-          // Skip the space separator
-          if (previous.kind === 'separator' && previous.value.trim() === '') {
-            idx -= 1
-            continue
-          }
-
-          // If the previous node is a word and contains an operator, we need to
-          // wrap the replacement in parentheses to make the output less
-          // ambiguous.
-          //
-          // Input:
-          // - `calc(100dvh-theme(spacing.2))`
-          //
-          // Output:
-          // - `calc(100dvh-(--spacing(2)))`
-          //
-          // Not:
-          // -`calc(100dvh---spacing(2))`
-          //
-          if (/^[-+*/]$/.test(previous.value.trim())) {
-            replacement = `(${replacement})`
-          }
-
-          break
-        }
-      }
-
-      return WalkAction.Replace(ValueParser.parse(replacement))
-    }
-  })
-
-  return ValueParser.toCss(ast)
-}
-
-function eventuallyUnquote(value: string) {
-  if (value[0] !== "'" && value[0] !== '"') return value
-
-  let unquoted = ''
-  let quoteChar = value[0]
-  for (let i = 1; i < value.length - 1; i++) {
-    let currentChar = value[i]
-    let nextChar = value[i + 1]
-
-    if (currentChar === '\\' && (nextChar === quoteChar || nextChar === '\\')) {
-      unquoted += nextChar
-      i++
-    } else {
-      unquoted += currentChar
-    }
-  }
-
-  return unquoted
-}
-
-// ----
-
-function* walkVariants(variant: Variant) {
-  function* inner(
-    variant: Variant,
-    parent: Extract<Variant, { kind: 'compound' }> | null = null,
-  ): Iterable<[Variant, Extract<Variant, { kind: 'compound' }> | null]> {
-    yield [variant, parent]
-
-    if (variant.kind === 'compound') {
-      yield* inner(variant.variant, variant)
-    }
-  }
-
-  yield* inner(variant, null)
-}
-
-function parseCandidate(designSystem: DesignSystem, input: string) {
-  return designSystem.parseCandidate(
-    designSystem.theme.prefix && !input.startsWith(`${designSystem.theme.prefix}:`)
-      ? `${designSystem.theme.prefix}:${input}`
-      : input,
-  )
-}
-
-function printUnprefixedCandidate(designSystem: DesignSystem, candidate: Candidate) {
-  let candidateString = designSystem.printCandidate(candidate)
-
-  return designSystem.theme.prefix && candidateString.startsWith(`${designSystem.theme.prefix}:`)
-    ? candidateString.slice(designSystem.theme.prefix.length + 1)
-    : candidateString
-}
-
-// ----
-
-const SPACING_KEY = Symbol()
-
-// We prefer bare values over arbitrary values such as `left-[6px]` →
-// `left-1.5`.
-//
-// There are situations where this doesn't always make sense. E.g.:
-// `left-[99999px]` → `left-24999.75`.
-//
-// We could try and analyze the incoming value and bail out if we detect certain
-// patterns. But a first step would be to limit the bare values for large values
-// and keep them low. The largest rem value we have is for the 2xl breakpoint,
-// which is 96rem, which is 1536px.
-const MAX_BARE_VALUE_IN_PX = 1536
-const MAX_BARE_VALUE_IN_REM = MAX_BARE_VALUE_IN_PX / 16
-
-function isReasonableBareValue(value: number, designSystem: DesignSystem, rem: number | null) {
-  let spacingMultiplier = designSystem.resolveThemeValue('--spacing')
-  if (spacingMultiplier === undefined) return false
-
-  let parsed = dimensions.get(constantFoldDeclaration(spacingMultiplier, rem))
-  if (parsed === null) return false
-
-  let [spacingValue, spacingUnit] = parsed
-  let bareValueInPixels = value * spacingValue
-
-  if (spacingUnit === 'px') return bareValueInPixels <= MAX_BARE_VALUE_IN_PX
-  if (spacingUnit === 'rem') return bareValueInPixels <= MAX_BARE_VALUE_IN_REM
-  return false
-}
-
-function createSpacingCache(
-  designSystem: DesignSystem,
-  options?: CanonicalizeOptions,
-): DesignSystem['storage'][typeof SPACING_KEY] {
-  let spacingMultiplier = designSystem.resolveThemeValue('--spacing')
-  if (spacingMultiplier === undefined) return null
-
-  spacingMultiplier = constantFoldDeclaration(spacingMultiplier, options?.rem ?? null)
-
-  let parsed = dimensions.get(spacingMultiplier)
-  if (!parsed) return null
-
-  let [value, unit] = parsed
-
-  return new DefaultMap<string, number | null>((input) => {
-    // If we already know that the spacing multiplier is 0, all spacing
-    // multipliers will also be 0. No need to even try and parse/canonicalize
-    // the input value.
-    if (value === 0) return null
-
-    let parsed = dimensions.get(constantFoldDeclaration(input, options?.rem ?? null))
-    if (!parsed) return null
-
-    let [myValue, myUnit] = parsed
-    if (myUnit !== unit) return null
-
-    return myValue / value
-  })
-}
-
-function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeOptions): Candidate {
-  // We are only interested in arbitrary properties and arbitrary values
-  if (
-    // Arbitrary property
-    candidate.kind !== 'arbitrary' &&
-    // Arbitrary value
-    !(candidate.kind === 'functional' && candidate.value?.kind === 'arbitrary')
-  ) {
-    return candidate
-  }
-
-  let designSystem = options.designSystem
-  let utilities = designSystem.storage[PRE_COMPUTED_UTILITIES_KEY].get(options.signatureOptions)
-  let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)
-  let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions)
-
-  let targetCandidateString = designSystem.printCandidate(candidate)
-
-  // Compute the signature for the target candidate
-  let targetSignature = signatures.get(targetCandidateString)
-  if (typeof targetSignature !== 'string') return candidate
-
-  // Try a few options to find a suitable replacement utility
-  for (let replacementCandidate of tryReplacements(targetSignature, candidate)) {
-    if (!hasSameSignature(candidate, replacementCandidate)) {
-      continue
-    }
-
-    // Ensure that if CSS variables were used, that they are still used
-    if (!allVariablesAreUsed(designSystem, candidate, replacementCandidate)) {
-      continue
-    }
-
-    return replacementCandidate
-  }
-
-  return candidate
-
-  function* tryReplacements(
-    targetSignature: string,
-    candidate: Extract<Candidate, { kind: 'functional' | 'arbitrary' }>,
-  ): Generator<Candidate> {
-    // Find a corresponding utility for the same signature
-    let replacements = utilities.get(targetSignature)
-
-    // Multiple utilities can map to the same signature.
-    if (replacements.length > 1) {
-      // Prefer positive values over negative values
-      let maybeReplacement: string | undefined = undefined
-      for (let replacement of replacements) {
-        if (replacement[0] === '-') continue // Skip negative values
-
-        // If multiple non-negative replacements exists then we are unsure
-        // what to do, so let's bail.
-        if (maybeReplacement) return
-
-        // Consider this replacement
-        maybeReplacement = replacement
-      }
-
-      if (maybeReplacement) {
-        for (let replacementCandidate of parseCandidate(designSystem, maybeReplacement)) {
-          yield replacementCandidate
-        }
-      }
-
-      return
-    }
-
-    // If we didn't find any replacement utilities, let's try to strip the
-    // modifier and find a replacement then. If we do, we can try to re-add the
-    // modifier later and verify if we have a valid migration.
-    //
-    // This is necessary because `text-red-500/50` will not be pre-computed,
-    // only `text-red-500` will.
-    if (replacements.length === 0 && candidate.modifier) {
-      let candidateWithoutModifier = { ...candidate, modifier: null }
-      let targetSignatureWithoutModifier = signatures.get(
-        designSystem.printCandidate(candidateWithoutModifier),
-      )
-      if (typeof targetSignatureWithoutModifier === 'string') {
-        for (let replacementCandidate of tryReplacements(
-          targetSignatureWithoutModifier,
-          candidateWithoutModifier,
-        )) {
-          yield Object.assign({}, replacementCandidate, { modifier: candidate.modifier })
-        }
-      }
-    }
-
-    // If only a single utility maps to the signature, we can use that as the
-    // replacement.
-    if (replacements.length === 1) {
-      for (let replacementCandidate of parseCandidate(designSystem, replacements[0])) {
-        yield replacementCandidate
-      }
-    }
-
-    // Find a corresponding functional utility for the same signature
-    else if (replacements.length === 0) {
-      // An arbitrary property will only set a single property, we can use that
-      // to find functional utilities that also set this property.
-      let value =
-        candidate.kind === 'arbitrary' ? candidate.value : (candidate.value?.value ?? null)
-      if (value === null) return
-
-      // Try to canonicalize any incoming arbitrary value. Canonicalization of
-      // `rem` and `px` values will be converted to `px`, so we have to
-      // canonicalize the spacing multiplier as well.
-      if (
-        options.signatureOptions.rem !== null &&
-        candidate.kind === 'functional' &&
-        candidate.value?.kind === 'arbitrary'
-      ) {
-        let bareValue = designSystem.storage[SPACING_KEY]?.get(value) ?? null
-        if (bareValue !== null) {
-          if (
-            isValidSpacingMultiplier(bareValue) &&
-            isReasonableBareValue(bareValue, designSystem, options.signatureOptions.rem)
-          ) {
-            yield Object.assign({}, candidate, {
-              value: { kind: 'named', value: bareValue, fraction: null },
-            })
-          }
-        }
-      }
-
-      let spacingMultiplier = designSystem.storage[SPACING_KEY]?.get(value) ?? null
-      let rootPrefix = ''
-      if (spacingMultiplier !== null && spacingMultiplier < 0) {
-        rootPrefix = '-'
-        spacingMultiplier = Math.abs(spacingMultiplier)
-      }
-
-      for (let root of Array.from(designSystem.utilities.keys('functional')).sort(
-        // Sort negative roots after positive roots so that we can try
-        // `mt-*` before `-mt-*`. This is especially useful in situations where
-        // `-mt-[0px]` can be translated to `mt-[0px]`.
-        (a, z) => Number(a[0] === '-') - Number(z[0] === '-'),
-      )) {
-        if (rootPrefix) root = `${rootPrefix}${root}`
-
-        // Try as bare value
-        for (let replacementCandidate of parseCandidate(designSystem, `${root}-${value}`)) {
-          yield replacementCandidate
-        }
-
-        // Try as bare value with modifier
-        if (candidate.modifier) {
-          for (let replacementCandidate of parseCandidate(
-            designSystem,
-            `${root}-${value}${candidate.modifier}`,
-          )) {
-            yield replacementCandidate
-          }
-        }
-
-        // Try bare value based on the `--spacing` value. E.g.:
-        //
-        // - `w-[64rem]` → `w-256`
-        if (
-          spacingMultiplier !== null &&
-          isValidSpacingMultiplier(spacingMultiplier) &&
-          isReasonableBareValue(spacingMultiplier, designSystem, options.signatureOptions.rem)
-        ) {
-          for (let replacementCandidate of parseCandidate(
-            designSystem,
-            `${root}-${spacingMultiplier}`,
-          )) {
-            yield replacementCandidate
-          }
-
-          // Try bare value based on the `--spacing` value, but with a modifier
-          if (candidate.modifier) {
-            for (let replacementCandidate of parseCandidate(
-              designSystem,
-              `${root}-${spacingMultiplier}${printModifier(candidate.modifier)}`,
-            )) {
-              yield replacementCandidate
-            }
-          }
-        }
-
-        // Try as arbitrary value
-        for (let replacementCandidate of parseCandidate(designSystem, `${root}-[${value}]`)) {
-          yield replacementCandidate
-        }
-
-        // Try as arbitrary value with modifier
-        if (candidate.modifier) {
-          for (let replacementCandidate of parseCandidate(
-            designSystem,
-            `${root}-[${value}]${printModifier(candidate.modifier)}`,
-          )) {
-            yield replacementCandidate
-          }
-        }
-      }
-    }
-  }
-}
-
-// Let's make sure that all variables used in the value are also all used in the
-// found replacement. If not, then we are dealing with a different namespace or
-// we could lose functionality in case the variable was changed higher up in the
-// DOM tree.
-function allVariablesAreUsed(
-  designSystem: DesignSystem,
-  candidate: Candidate,
-  replacement: Candidate,
-) {
-  let value: string | null = null
-
-  // Functional utility with arbitrary value and variables
-  if (
-    candidate.kind === 'functional' &&
-    candidate.value?.kind === 'arbitrary' &&
-    candidate.value.value.includes('var(--')
-  ) {
-    value = candidate.value.value
-  }
-
-  // Arbitrary property with variables
-  else if (candidate.kind === 'arbitrary' && candidate.value.includes('var(--')) {
-    value = candidate.value
-  }
-
-  // No variables in the value, so this is a safe migration
-  if (value === null) {
-    return true
-  }
-
-  let replacementAsCss = designSystem
-    .candidatesToCss([designSystem.printCandidate(replacement)])
-    .join('\n')
-
-  let isSafeMigration = true
-  walk(ValueParser.parse(value), (node) => {
-    if (node.kind === 'function' && node.value === 'var') {
-      let variable = node.nodes[0].value
-      let r = new RegExp(`var\\(${variable}[,)]\\s*`, 'g')
-      if (
-        // We need to check if the variable is used in the replacement
-        !r.test(replacementAsCss) ||
-        // The value cannot be set to a different value in the
-        // replacement because that would make it an unsafe migration
-        replacementAsCss.includes(`${variable}:`)
-      ) {
-        isSafeMigration = false
-        return WalkAction.Stop
-      }
-    }
-  })
-
-  return isSafeMigration
-}
-
-// ----
-
-function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeOptions): Candidate {
-  // We are only interested in bare value utilities
-  if (candidate.kind !== 'functional' || candidate.value?.kind !== 'named') {
-    return candidate
-  }
-
-  let designSystem = options.designSystem
-  let utilities = designSystem.storage[PRE_COMPUTED_UTILITIES_KEY].get(options.signatureOptions)
-  let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)
-  let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions)
-
-  let targetCandidateString = designSystem.printCandidate(candidate)
-
-  // Compute the signature for the target candidate
-  let targetSignature = signatures.get(targetCandidateString)
-  if (typeof targetSignature !== 'string') return candidate
-
-  // Try a few options to find a suitable replacement utility
-  for (let replacementCandidate of tryReplacements(targetSignature, candidate)) {
-    if (!hasSameSignature(candidate, replacementCandidate)) {
-      continue
-    }
-
-    return replacementCandidate
-  }
-
-  return candidate
-
-  function* tryReplacements(
-    targetSignature: string,
-    candidate: Extract<Candidate, { kind: 'functional' }>,
-  ): Generator<Candidate> {
-    // Find a corresponding utility for the same signature
-    let replacements = utilities.get(targetSignature)
-
-    // Multiple utilities can map to the same signature.
-    if (replacements.length > 1) {
-      // Prefer positive values over negative values
-      let maybeReplacement: string | undefined = undefined
-      for (let replacement of replacements) {
-        if (replacement[0] === '-') continue // Skip negative values
-
-        // If multiple non-negative replacements exists then we are unsure
-        // what to do, so let's bail.
-        if (maybeReplacement) return
-
-        // Consider this replacement
-        maybeReplacement = replacement
-      }
-
-      if (maybeReplacement) {
-        for (let replacementCandidate of parseCandidate(designSystem, maybeReplacement)) {
-          yield replacementCandidate
-        }
-      }
-
-      return
-    }
-
-    // If we didn't find any replacement utilities, let's try to strip the
-    // modifier and find a replacement then. If we do, we can try to re-add the
-    // modifier later and verify if we have a valid migration.
-    //
-    // This is necessary because `text-red-500/50` will not be pre-computed,
-    // only `text-red-500` will.
-    if (replacements.length === 0 && candidate.modifier) {
-      let candidateWithoutModifier = { ...candidate, modifier: null }
-      let targetSignatureWithoutModifier = signatures.get(
-        designSystem.printCandidate(candidateWithoutModifier),
-      )
-      if (typeof targetSignatureWithoutModifier === 'string') {
-        for (let replacementCandidate of tryReplacements(
-          targetSignatureWithoutModifier,
-          candidateWithoutModifier,
-        )) {
-          yield Object.assign({}, replacementCandidate, { modifier: candidate.modifier })
-        }
-      }
-    }
-
-    // If only a single utility maps to the signature, we can use that as the
-    // replacement.
-    if (replacements.length === 1) {
-      for (let replacementCandidate of parseCandidate(designSystem, replacements[0])) {
-        yield replacementCandidate
-      }
-    }
-  }
-}
-
-// ----
-
-const DEPRECATION_MAP = new Map([
-  ['order-none', 'order-0'],
-  ['break-words', 'wrap-break-word'],
-  ['overflow-ellipsis', 'text-ellipsis'],
-])
-
-const DEPRECATION_TRANSFORMATION_MAP = new Map([
-  [/^(-)?start-(.*?)$/, '$1inset-s-$2'],
-  [/^(-)?end-(.*?)$/, '$1inset-e-$2'],
-])
-
-function* tryDeprecatedUtilities(candidate: string) {
-  // Try static replacements
-  let replacement = DEPRECATION_MAP.get(candidate)
-  if (replacement) yield replacement
-
-  // Try dynamic replacements
-  for (let [searchValue, replaceValue] of DEPRECATION_TRANSFORMATION_MAP) {
-    let replacement = candidate.replace(searchValue, replaceValue)
-    if (replacement === candidate) continue
-
-    yield replacement
-  }
-}
-
-function deprecatedUtilities(
-  candidate: Candidate,
-  options: InternalCanonicalizeOptions,
-): Candidate {
-  let designSystem = options.designSystem
-  let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions)
-
-  let targetCandidateString = printUnprefixedCandidate(designSystem, candidate)
-
-  for (let replacementString of tryDeprecatedUtilities(targetCandidateString)) {
-    if (!hasSameSignature(candidate, replacementString)) {
-      continue
-    }
-
-    let [replacement] = parseCandidate(designSystem, replacementString)
-    return replacement
-  }
-
-  return candidate
-}
-
-// ----
-
-function arbitraryVariants(
-  variant: Variant,
-  options: InternalCanonicalizeOptions,
-): Variant | Variant[] {
-  let designSystem = options.designSystem
-  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY].get(options.signatureOptions.rem)
-  let variants = designSystem.storage[PRE_COMPUTED_VARIANTS_KEY].get(options.signatureOptions.rem)
-
-  let iterator = walkVariants(variant)
-  for (let [variant] of iterator) {
-    if (variant.kind === 'compound') continue
-
-    let targetString = designSystem.printVariant(variant)
-    let targetSignature = signatures.get(targetString)
-    if (typeof targetSignature !== 'string') continue
-
-    let foundVariants = variants.get(targetSignature)
-    if (foundVariants.length === 0) continue
-
-    // The variant is already in a canonical form, e.g.: `min-lg` and `lg`
-    // produce the same CSS, but both are valid so we keep them as-is.
-    if (foundVariants.includes(targetString)) continue
-
-    let foundVariant = foundVariants[0]
-    let parsedVariant = designSystem.parseVariant(foundVariant)
-    if (parsedVariant === null) continue
-
-    replaceObject(variant, parsedVariant)
-  }
-
-  return variant
-}
-
-// ----
-
-function dropUnnecessaryDataTypes(
-  candidate: Candidate,
-  options: InternalCanonicalizeOptions,
-): Candidate {
-  let designSystem = options.designSystem
-  let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)
-
-  if (
-    candidate.kind === 'functional' &&
-    candidate.value?.kind === 'arbitrary' &&
-    candidate.value.dataType !== null
-  ) {
-    let replacement = designSystem.printCandidate({
-      ...candidate,
-      value: { ...candidate.value, dataType: null },
-    })
-
-    if (signatures.get(designSystem.printCandidate(candidate)) === signatures.get(replacement)) {
-      candidate.value.dataType = null
-    }
-  }
-
-  return candidate
-}
-
-// ----
-
-function arbitraryValueToBareValueUtility(
-  candidate: Candidate,
-  options: InternalCanonicalizeOptions,
-): Candidate {
-  // We are only interested in functional utilities with arbitrary values
-  if (candidate.kind !== 'functional' || candidate.value?.kind !== 'arbitrary') {
-    return candidate
-  }
-
-  let designSystem = options.designSystem
-  let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)
-
-  let expectedSignature = signatures.get(designSystem.printCandidate(candidate))
-  if (expectedSignature === null) return candidate
-
-  for (let value of tryValueReplacements(candidate)) {
-    let newSignature = signatures.get(designSystem.printCandidate({ ...candidate, value }))
-    if (newSignature === expectedSignature) {
-      candidate.value = value
-      return candidate
-    }
-  }
-
-  return candidate
-}
-
-function arbitraryValueToBareValueVariant(variant: Variant): Variant | Variant[] {
-  let iterator = walkVariants(variant)
-  for (let [variant] of iterator) {
-    // Convert `data-[selected]` to `data-selected`
-    if (
-      variant.kind === 'functional' &&
-      variant.root === 'data' &&
-      variant.value?.kind === 'arbitrary' &&
-      !variant.value.value.includes('=')
-    ) {
-      variant.value = {
-        kind: 'named',
-        value: variant.value.value,
-      }
-    }
-
-    // Convert `aria-[selected="true"]` to `aria-selected`
-    else if (
-      variant.kind === 'functional' &&
-      variant.root === 'aria' &&
-      variant.value?.kind === 'arbitrary' &&
-      (variant.value.value.endsWith('=true') ||
-        variant.value.value.endsWith('="true"') ||
-        variant.value.value.endsWith("='true'"))
-    ) {
-      let [key, _value] = segment(variant.value.value, '=')
-      if (
-        // aria-[foo~="true"]
-        key[key.length - 1] === '~' ||
-        // aria-[foo|="true"]
-        key[key.length - 1] === '|' ||
-        // aria-[foo^="true"]
-        key[key.length - 1] === '^' ||
-        // aria-[foo$="true"]
-        key[key.length - 1] === '$' ||
-        // aria-[foo*="true"]
-        key[key.length - 1] === '*'
-      ) {
-        continue
-      }
-
-      variant.value = {
-        kind: 'named',
-        value: variant.value.value.slice(0, variant.value.value.indexOf('=')),
-      }
-    }
-
-    // Convert `supports-[gap]` to `supports-gap`
-    else if (
-      variant.kind === 'functional' &&
-      variant.root === 'supports' &&
-      variant.value?.kind === 'arbitrary' &&
-      /^[a-z-][a-z0-9-]*$/i.test(variant.value.value)
-    ) {
-      variant.value = {
-        kind: 'named',
-        value: variant.value.value,
-      }
-    }
-  }
-
-  return variant
-}
-
-// Convert functional utilities with arbitrary values to bare values if we can.
-// We know that bare values can only be:
-//
-// 1. A number (with increments of .25)
-// 2. A percentage (with increments of .25 followed by a `%`)
-// 3. A ratio with whole numbers
-//
-// Not a bare value per se, but if we are dealing with a keyword, that could
-// potentially also look like a bare value (aka no `[` or `]`). E.g.:
-// ```diff
-// grid-cols-[subgrid]
-// grid-cols-subgrid
-// ```
-function* tryValueReplacements(
-  candidate: Extract<Candidate, { kind: 'functional' }>,
-  value: string = candidate.value?.value ?? '',
-  seen: Set<string> = new Set(),
-): Generator<NamedUtilityValue> {
-  if (seen.has(value)) return
-  seen.add(value)
-
-  // 0. Just try to drop the square brackets and see if it works
-  // 1. A number (with increments of .25)
-  yield {
-    kind: 'named',
-    value,
-    fraction: null,
-  }
-
-  // 2. A percentage (with increments of .25 followed by a `%`)
-  //    Try to drop the `%` and see if it works
-  if (value.endsWith('%') && isValidSpacingMultiplier(value.slice(0, -1))) {
-    yield {
-      kind: 'named',
-      value: value.slice(0, -1),
-      fraction: null,
-    }
-  }
-
-  // 3. A ratio with whole numbers
-  if (value.includes('/')) {
-    let [numerator, denominator] = value.split('/')
-    if (isPositiveInteger(numerator) && isPositiveInteger(denominator)) {
-      yield {
-        kind: 'named',
-        value: numerator,
-        fraction: `${numerator}/${denominator}`,
-      }
-    }
-  }
-
-  // It could also be that we have `20px`, we can try just `20` and see if it
-  // results in the same signature.
-  let allNumbersAndFractions = new Set<string>()
-
-  // Figure out all numbers and fractions in the value
-  for (let match of value.matchAll(/(\d+\/\d+)|(\d+\.?\d+)/g)) {
-    allNumbersAndFractions.add(match[0].trim())
-  }
-
-  // Sort the numbers and fractions where the smallest length comes first. This
-  // will result in the smallest replacement.
-  let options = Array.from(allNumbersAndFractions).sort((a, z) => {
-    return a.length - z.length
-  })
-
-  // Try all the options
-  for (let option of options) {
-    yield* tryValueReplacements(candidate, option, seen)
-  }
-}
-
-// ----
-
-function isSingleSelector(ast: SelectorParser.SelectorAstNode[]): boolean {
-  if (ast.length === 1 && ast[0].kind === 'list') return false
-  return true
-}
-
-function isAttributeSelector(node: SelectorParser.SelectorNode): boolean {
-  return node.value[0] === '[' && node.value[node.value.length - 1] === ']'
-}
-
-function modernizeArbitraryValuesVariant(
-  variant: Variant,
-  options: InternalCanonicalizeOptions,
-): Variant | Variant[] {
-  let result = [variant]
-  let designSystem = options.designSystem
-  let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY].get(options.signatureOptions.rem)
-
-  let iterator = walkVariants(variant)
-  for (let [variant, parent] of iterator) {
-    // Forward modifier from the root to the compound variant
-    if (
-      variant.kind === 'compound' &&
-      (variant.root === 'has' || variant.root === 'not' || variant.root === 'in')
-    ) {
-      if (variant.modifier !== null) {
-        if ('modifier' in variant.variant) {
-          variant.variant.modifier = variant.modifier
-          variant.modifier = null
-        }
-      }
-    }
-
-    // Expecting an arbitrary variant
-    if (variant.kind === 'arbitrary') {
-      // Expecting a non-relative arbitrary variant
-      if (variant.relative) continue
-
-      let ast = SelectorParser.parse(variant.selector)
-
-      // Expecting a single selector node
-      if (!isSingleSelector(ast)) continue
-
-      // Keep the existing arbitrary variant modernizations working on a flat
-      // selector sequence while the parser exposes complex selectors as a node.
-      if (ast.length === 1 && ast[0].kind === 'complex') {
-        ast = ast[0].nodes
-      }
-
-      // `[&>*]` can be replaced with `*`
-      if (
-        // Only top-level, so `has-[&>*]` is not supported
-        parent === null &&
-        // [&_>_*]:flex
-        //  ^ ^ ^
-        ast.length === 3 &&
-        ast[0].kind === 'selector' &&
-        ast[0].value === '&' &&
-        ast[1].kind === 'combinator' &&
-        ast[1].value === '>' &&
-        ast[2].kind === 'selector' &&
-        ast[2].value === '*'
-      ) {
-        replaceObject(variant, designSystem.parseVariant('*'))
-        continue
-      }
-
-      // `[&_*]` can be replaced with `**`
-      if (
-        // Only top-level, so `has-[&_*]` is not supported
-        parent === null &&
-        // [&_*]:flex
-        //  ^ ^
-        ast.length === 3 &&
-        ast[0].kind === 'selector' &&
-        ast[0].value === '&' &&
-        ast[1].kind === 'combinator' &&
-        ast[1].value === ' ' &&
-        ast[2].kind === 'selector' &&
-        ast[2].value === '*'
-      ) {
-        replaceObject(variant, designSystem.parseVariant('**'))
-        continue
-      }
-
-      // `[&:has(…)]` can be replaced with `has-[…]`
-      if (
-        // Only top-level, so `group-[&:has(…)]` is not covered
-
-        parent === null &&
-        // [&:has(…)]:flex
-        //  ^ ^^^^^^
-        ast.length === 1 &&
-        ast[0].kind === 'compound' &&
-        ast[0].nodes.length === 2 &&
-        ast[0].nodes[0].kind === 'selector' &&
-        ast[0].nodes[0].value === '&' &&
-        ast[0].nodes[1].kind === 'function' &&
-        ast[0].nodes[1].value === ':has' &&
-        ast[0].nodes[1].nodes.length === 1 &&
-        ast[0].nodes[1].nodes[0].kind === 'selector'
-      ) {
-        replaceObject(
-          variant,
-          designSystem.parseVariant(`has-[${SelectorParser.toCss(ast[0].nodes[1].nodes, true)}]`),
-        )
-        continue
-      }
-
-      // `in-*` variant. If the selector ends with ` &`, we can convert it to an
-      // `in-*` variant.
-      //
-      // E.g.: `[[data-visible]_&]` => `in-data-visible`
-      if (
-        // Only top-level, so `in-[&_[data-visible]]` is not supported
-        parent === null &&
-        // [[data-visible]___&]:flex
-        //  ^^^^^^^^^^^^^^ ^ ^
-        ast.length === 3 &&
-        ast[0].kind === 'selector' &&
-        ast[1].kind === 'combinator' &&
-        ast[1].value === ' ' &&
-        ast[2].kind === 'selector' &&
-        ast[2].value === '&'
-      ) {
-        ast.pop() // Remove the nesting node
-        ast.pop() // Remove the combinator
-
-        // When handling a compound like `in-[[data-visible]]`, we will first
-        // handle `[[data-visible]]`, then the parent `in-*` part. This means
-        // that we can convert `[[data-visible]_&]` to `in-[[data-visible]]`.
-        //
-        // Later this gets converted to `in-data-visible`.
-        replaceObject(variant, designSystem.parseVariant(`in-[${SelectorParser.toCss(ast, true)}]`))
-        continue
-      }
-
-      // Hoist `not` modifier for `@media` or `@supports` variants
-      //
-      // E.g.: `[@media_not_(scripting:none)]:` -> `not-[@media_(scripting:none)]:`
-      if (
-        // Only top-level, so something like `in-[@media(scripting:none)]`
-        // (which is not valid anyway) is not supported
-        parent === null &&
-        // [@media_not(scripting:none)]:flex
-        //  ^^^^^^^^^^^^^^^^^^^^^^^^^^^
-        ast[0].kind === 'selector' &&
-        (ast[0].value === '@media' || ast[0].value === '@supports')
-      ) {
-        let targetSignature = signatures.get(designSystem.printVariant(variant))
-
-        let parsed = ValueParser.parse(SelectorParser.toCss(ast, true))
-        let containsNot = false
-        walk(parsed, (node) => {
-          if (node.kind === 'word' && node.value === 'not') {
-            containsNot = true
-            return WalkAction.Replace([])
-          }
-        })
-
-        // Remove unnecessary whitespace
-        parsed = ValueParser.parse(ValueParser.toCss(parsed))
-        walk(parsed, (node) => {
-          if (node.kind === 'separator' && node.value !== ' ' && node.value.trim() === '') {
-            // node.value contains at least 2 spaces. Normalize it to a single
-            // space.
-            node.value = ' '
-          }
-        })
-
-        if (containsNot) {
-          let hoistedNot = designSystem.parseVariant(`not-[${ValueParser.toCss(parsed)}]`)
-          if (hoistedNot === null) continue
-          let hoistedNotSignature = signatures.get(designSystem.printVariant(hoistedNot))
-          if (targetSignature === hoistedNotSignature) {
-            replaceObject(variant, hoistedNot)
-            continue
-          }
-        }
-      }
-
-      let prefixedVariant: Variant | null = null
-
-      // Handling a child combinator. E.g.: `[&>[data-visible]]` => `*:data-visible`
-      if (
-        // Only top-level, so `has-[&>[data-visible]]` is not supported
-        parent === null &&
-        // [&_>_[data-visible]]:flex
-        //  ^ ^ ^^^^^^^^^^^^^^
-        ast.length === 3 &&
-        ast[0].kind === 'selector' &&
-        ast[0].value === '&' &&
-        ast[1].kind === 'combinator' &&
-        ast[1].value === '>' &&
-        ast[2].kind === 'selector' &&
-        (ast[2].value[0] === ':' || isAttributeSelector(ast[2]))
-      ) {
-        ast = [ast[2]]
-        prefixedVariant = designSystem.parseVariant('*')
-      }
-
-      // Handling a grand child combinator. E.g.: `[&_[data-visible]]` => `**:data-visible`
-      if (
-        // Only top-level, so `has-[&_[data-visible]]` is not supported
-        parent === null &&
-        // [&_[data-visible]]:flex
-        //  ^ ^^^^^^^^^^^^^^
-        ast.length === 3 &&
-        ast[0].kind === 'selector' &&
-        ast[0].value === '&' &&
-        ast[1].kind === 'combinator' &&
-        ast[1].value === ' ' &&
-        ast[2].kind === 'selector' &&
-        (ast[2].value[0] === ':' || isAttributeSelector(ast[2]))
-      ) {
-        ast = [ast[2]]
-        prefixedVariant = designSystem.parseVariant('**')
-      }
-
-      let selectorNodes = ast
-      walk(selectorNodes, {
-        enter(node) {
-          // Filter out `&`. E.g.: `&[data-foo]` => `[data-foo]`
-          if (node.kind === 'selector' && node.value === '&') {
-            return WalkAction.Replace([])
-          }
-
-          if (node.kind === 'function') {
-            return WalkAction.Skip
-          }
-        },
-        exit(node) {
-          if (node.kind === 'compound' && node.nodes.length === 1) {
-            return WalkAction.ReplaceSkip(node.nodes)
-          }
-        },
-      })
-
-      // Expecting a single selector (normal selector or attribute selector)
-      if (selectorNodes.length !== 1) continue
-
-      let target = selectorNodes[0]
-      if (target.kind === 'function' && target.value === ':is') {
-        // Expecting a single selector node
-        if (
-          !isSingleSelector(target.nodes) ||
-          // [foo][bar] is considered a single selector but has multiple nodes
-          target.nodes.length !== 1
-        ) {
-          continue
-        }
-
-        // Expecting a single attribute selector
-        if (target.nodes[0].kind === 'selector' && !isAttributeSelector(target.nodes[0])) continue
-
-        // Unwrap the selector from inside `&:is(…)`
-        target = target.nodes[0]
-      }
-
-      // Expecting a pseudo selector (or function)
-      if (
-        (target.kind === 'function' && target.value[0] === ':') ||
-        (target.kind === 'selector' && target.value[0] === ':')
-      ) {
-        let targetNode = target
-        let compoundNot = false
-        if (targetNode.kind === 'function' && targetNode.value === ':not') {
-          compoundNot = true
-          if (targetNode.nodes.length !== 1) continue
-          if (targetNode.nodes[0].kind !== 'selector' && targetNode.nodes[0].kind !== 'function') {
-            continue
-          }
-          if (targetNode.nodes[0].value[0] !== ':') continue
-
-          targetNode = targetNode.nodes[0]
-        }
-
-        let newVariant = ((value) => {
-          if (
-            value === ':nth-child' &&
-            targetNode.kind === 'function' &&
-            targetNode.nodes.length === 1 &&
-            targetNode.nodes[0].kind === 'value' &&
-            targetNode.nodes[0].value === 'odd'
-          ) {
-            if (compoundNot) {
-              compoundNot = false
-              return 'even'
-            }
-            return 'odd'
-          }
-
-          if (
-            value === ':nth-child' &&
-            targetNode.kind === 'function' &&
-            targetNode.nodes.length === 1 &&
-            targetNode.nodes[0].kind === 'value' &&
-            targetNode.nodes[0].value === 'even'
-          ) {
-            if (compoundNot) {
-              compoundNot = false
-              return 'odd'
-            }
-            return 'even'
-          }
-
-          for (let [selector, variantName] of [
-            [':nth-child', 'nth'],
-            [':nth-last-child', 'nth-last'],
-            [':nth-of-type', 'nth-of-type'],
-            [':nth-last-of-type', 'nth-of-last-type'],
-          ]) {
-            if (
-              value === selector &&
-              targetNode.kind === 'function' &&
-              targetNode.nodes.length === 1
-            ) {
-              if (
-                targetNode.nodes.length === 1 &&
-                targetNode.nodes[0].kind === 'value' &&
-                isPositiveInteger(targetNode.nodes[0].value)
-              ) {
-                return `${variantName}-${targetNode.nodes[0].value}`
-              }
-
-              return `${variantName}-[${SelectorParser.toCss(targetNode.nodes, true)}]`
-            }
-          }
-
-          // Hoist `not` modifier
-          if (compoundNot) {
-            let targetSignature = signatures.get(designSystem.printVariant(variant))
-            let replacementSignature = signatures.get(`not-[${value}]`)
-            if (targetSignature === replacementSignature) {
-              return `[&${value}]`
-            }
-          }
-
-          return null
-        })(targetNode.value)
-
-        if (newVariant === null) {
-          if (prefixedVariant) {
-            replaceObject(variant, {
-              kind: 'arbitrary',
-              selector: target.value,
-              relative: false,
-            } satisfies Variant)
-
-            return [prefixedVariant, variant]
-          }
-
-          continue
-        }
-
-        // Add `not-` prefix
-        if (compoundNot) newVariant = `not-${newVariant}`
-
-        let parsed = designSystem.parseVariant(newVariant)
-        if (parsed === null) continue
-
-        // Update original variant
-        replaceObject(variant, parsed)
-      }
-
-      // Expecting an attribute selector
-      else if (target.kind === 'selector' && isAttributeSelector(target)) {
-        let attributeSelector = AttributeSelectorParser.parse(target.value)
-        if (attributeSelector === null) continue // Invalid attribute selector
-
-        // Migrate `data-*`
-        if (attributeSelector.attribute.startsWith('data-')) {
-          let name = attributeSelector.attribute.slice(5) // Remove `data-`
-
-          replaceObject(variant, {
-            kind: 'functional',
-            root: 'data',
-            modifier: null,
-            value:
-              attributeSelector.value === null
-                ? { kind: 'named', value: name }
-                : {
-                    kind: 'arbitrary',
-                    value: `${name}${attributeSelector.operator}${attributeSelector.quote ?? ''}${attributeSelector.value}${attributeSelector.quote ?? ''}${attributeSelector.sensitivity ? ` ${attributeSelector.sensitivity}` : ''}`,
-                  },
-          } satisfies Variant)
-        }
-
-        // Migrate `aria-*`
-        else if (attributeSelector.attribute.startsWith('aria-')) {
-          let name = attributeSelector.attribute.slice(5) // Remove `aria-`
-          replaceObject(variant, {
-            kind: 'functional',
-            root: 'aria',
-            modifier: null,
-            value:
-              attributeSelector.value === null
-                ? { kind: 'arbitrary', value: name } // aria-[foo]
-                : attributeSelector.operator === '=' &&
-                    attributeSelector.value === 'true' &&
-                    attributeSelector.sensitivity === null
-                  ? { kind: 'named', value: name } // aria-[foo="true"] or aria-[foo='true'] or aria-[foo=true]
-                  : {
-                      kind: 'arbitrary',
-                      value: `${attributeSelector.attribute}${attributeSelector.operator}${attributeSelector.quote ?? ''}${attributeSelector.value}${attributeSelector.quote ?? ''}${attributeSelector.sensitivity ? ` ${attributeSelector.sensitivity}` : ''}`,
-                    }, // aria-[foo~="true"], aria-[foo|="true"], …
-          } satisfies Variant)
-        }
-
-        // Arbitrary attributes
-        else {
-          replaceObject(variant, {
-            kind: 'arbitrary',
-            selector: target.value,
-            relative: false,
-          } satisfies Variant)
-        }
-      }
-
-      if (prefixedVariant) {
-        return [prefixedVariant, variant]
-      }
-    }
-  }
-
-  return result
-}
-
-// ---
-
-function optimizeArbitraryValueExpressions(
-  candidate: Candidate,
-  options: InternalCanonicalizeOptions,
-): Candidate {
-  if (candidate.kind !== 'functional' || candidate.value?.kind !== 'arbitrary') {
-    return candidate
-  }
-
-  let designSystem = options.designSystem
-  let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions)
-
-  let valueAst = ValueParser.parse(candidate.value.value)
-
-  // Start by constant folding the value expression, when dealing with `calc(…)`
-  if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'calc') {
-    let [folded, foldedValueAst] = constantFoldDeclarationAst(valueAst, null, false)
-    if (folded) {
-      let replacement = cloneCandidate(candidate)
-      replacement.value!.value = ValueParser.toCss(foldedValueAst)
-
-      if (hasSameSignature(candidate, replacement)) {
-        candidate = replacement
-        valueAst = foldedValueAst
-      }
-    }
-  }
-
-  // Move `-` sign into the arbitrary value itself
-  if (candidate.root[0] === '-') {
-    // We're dealing with a `var(…)`, keep as-is
-    if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'var') {
-      return candidate
-    }
-
-    // Move `* -1` inside, and try to constant fold to see if it's even worth
-    // updating the candidate or not.
-    let expressionAst = ValueParser.parse(`calc(${candidate.value!.value} * -1)`)
-    let [folded, foldedExpressionAst] = constantFoldDeclarationAst(expressionAst, null, false)
-    if (folded) {
-      let replacement = cloneCandidate(candidate)
-
-      replacement.root = replacement.root.slice(1) // Drop the leading `-`
-      replacement.value!.value = ValueParser.toCss(foldedExpressionAst)
-
-      if (hasSameSignature(candidate, replacement)) {
-        candidate = replacement
-        valueAst = foldedExpressionAst
-      }
-    }
-  }
-
-  // Move `-` sign out of the arbitrary value
-  if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'calc') {
-    let calcArgs = valueAst[0].nodes
-
-    // `calc(arg * -1)` or `calc(-1  * arg)`
-    if (
-      calcArgs.length === 5 &&
-      calcArgs[1].kind === 'separator' &&
-      calcArgs[1].value === ' ' &&
-      calcArgs[2].kind === 'word' &&
-      calcArgs[2].value === '*' &&
-      calcArgs[3].kind === 'separator' &&
-      calcArgs[3].value === ' '
-    ) {
-      let arg =
-        calcArgs[4].kind === 'word' && calcArgs[4].value === '-1'
-          ? calcArgs[0]
-          : calcArgs[0].kind === 'word' && calcArgs[0].value === '-1'
-            ? calcArgs[4]
-            : null
-
-      if (arg) {
-        let replacement = cloneCandidate(candidate)
-        replacement.root = `-${candidate.root}`
-        replacement.value!.value = ValueParser.toCss([arg])
-
-        if (hasSameSignature(candidate, replacement)) {
-          candidate = replacement
-        }
-      }
-    }
-  }
-
-  return candidate
-}
-
-// ----
-
-// Optimize the modifier
-//
-// E.g.:
-//
-// - `/[25%]`   → `/25`
-// - `/[100%]`  → `/100`    → <empty>
-// - `/100`     → <empty>
-//
-function optimizeModifier(candidate: Candidate, options: InternalCanonicalizeOptions): Candidate {
-  // We are only interested in functional or arbitrary utilities with a modifier
-  if (
-    (candidate.kind !== 'functional' && candidate.kind !== 'arbitrary') ||
-    candidate.modifier === null
-  ) {
-    return candidate
-  }
-
-  let designSystem = options.designSystem
-  let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions)
-
-  let targetSignature = signatures.get(designSystem.printCandidate(candidate))
-  let modifier = candidate.modifier
-
-  // 1. Try to drop the modifier entirely
-  if (
-    targetSignature ===
-    signatures.get(designSystem.printCandidate({ ...candidate, modifier: null }))
-  ) {
-    candidate.modifier = null
-    return candidate
-  }
-
-  // 2. Try to remove the square brackets and the `%` sign
-  {
-    let newModifier: NamedUtilityValue = {
-      kind: 'named',
-      value: modifier.value.endsWith('%')
-        ? modifier.value.includes('.')
-          ? `${Number(modifier.value.slice(0, -1))}`
-          : modifier.value.slice(0, -1)
-        : modifier.value,
-      fraction: null,
-    }
-
-    if (
-      targetSignature ===
-      signatures.get(designSystem.printCandidate({ ...candidate, modifier: newModifier }))
-    ) {
-      candidate.modifier = newModifier
-      return candidate
-    }
-  }
-
-  // 3. Try to remove the square brackets, but multiply by 100. E.g.: `[0.16]` -> `16`
-  {
-    let newModifier: NamedUtilityValue = {
-      kind: 'named',
-      value: `${parseFloat(modifier.value) * 100}`,
-      fraction: null,
-    }
-
-    if (
-      targetSignature ===
-      signatures.get(designSystem.printCandidate({ ...candidate, modifier: newModifier }))
-    ) {
-      candidate.modifier = newModifier
-      return candidate
-    }
-  }
-
-  return candidate
-}
-
-export enum SignatureFeatures {
-  None = 0,
-  ExpandProperties = 1 << 0,
-  LogicalToPhysical = 1 << 1,
-}
-
-interface SignatureOptions {
-  /**
-   * The root font size in pixels. If provided, `rem` values will be normalized
-   * to `px` values.
-   *
-   * E.g.: `mt-[16px]` with `rem: 16` will become `mt-4` (assuming `--spacing: 0.25rem`).
-   */
-  rem: number | null
-
-  /**
-   * Features that influence how signatures are computed.
-   */
-  features: SignatureFeatures
-}
-
-// Given a utility, compute a signature that represents the utility. The
-// signature will be a normalised form of the generated CSS for the utility, or
-// a unique symbol if the utility is not valid. The class in the selector will
-// be replaced with the `.x` selector.
-//
-// This function should only be passed the base utility so `flex`, `hover:flex`
-// and `focus:flex` will all use just `flex`. Variants are handled separately.
-//
-// E.g.:
-//
-// | UTILITY          | GENERATED SIGNATURE     |
-// | ---------------- | ----------------------- |
-// | `[display:flex]` | `.x { display: flex; }` |
-// | `flex`           | `.x { display: flex; }` |
-//
-// These produce the same signature, therefore they represent the same utility.
-export const UTILITY_SIGNATURE_KEY = Symbol()
-function createUtilitySignatureCache(
-  designSystem: DesignSystem,
-): DesignSystem['storage'][typeof UTILITY_SIGNATURE_KEY] {
-  return new DefaultMap((options: SignatureOptions) => {
-    return new DefaultMap<string, string | symbol>((utility) => {
-      try {
-        // Ensure the prefix is added to the utility if it is not already present.
-        utility =
-          designSystem.theme.prefix && !utility.startsWith(designSystem.theme.prefix)
-            ? `${designSystem.theme.prefix}:${utility}`
-            : utility
-
-        // Use `@apply` to normalize the selector to `.x`
-        let ast: AstNode[] = [styleRule('.x', [atRule('@apply', utility)])]
-
-        temporarilyDisableThemeInline(designSystem, () => {
-          // There's separate utility caches for respect important vs not
-          // so we want to compile them both with `@theme inline` disabled
-          for (let candidate of designSystem.parseCandidate(utility)) {
-            designSystem.compileAstNodes(candidate, CompileAstFlags.RespectImportant)
-          }
-
-          substituteAtApply(ast, designSystem)
-        })
-
-        // Optimize the AST. This is needed such that any internal intermediate
-        // nodes are gone. This will also cleanup declaration nodes with undefined
-        // values or `--tw-sort` declarations.
-        canonicalizeAst(designSystem, ast, options)
-
-        // Compute the final signature, by generating the CSS for the utility
-        let signature = toCss(ast)
-        return signature
-      } catch {
-        // A unique symbol is returned to ensure that 2 signatures resulting in
-        // `null` are not considered equal.
-        return Symbol()
-      }
-    })
-  })
-}
-
-// #RGB
-// #RGBA
-// #RRGGBB
-// #RRGGBBAA
-const HEX_REGEX = /#(?:[a-f0-9]{8}|[a-f0-9]{6}|[a-f0-9]{4}|[a-f0-9]{3})/gi
-
-// Optimize the CSS AST to make it suitable for signature comparison. We want to
-// expand declarations, ignore comments, sort declarations etc...
-function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: SignatureOptions) {
-  let { rem } = options
-
-  walk(ast, {
-    enter(node, ctx) {
-      // Optimize declarations
-      if (node.kind === 'declaration') {
-        if (node.value === undefined || node.property === '--tw-sort') {
-          return WalkAction.Replace([])
-        }
-
-        // Ignore `--tw-{property}` if `{property}` exists with the same value
-        if (node.property.startsWith('--tw-')) {
-          if (
-            ctx.siblings.some(
-              (sibling) =>
-                sibling.kind === 'declaration' &&
-                node.value === sibling.value &&
-                node.important === sibling.important &&
-                !sibling.property.startsWith('--tw-'),
-            )
-          ) {
-            return WalkAction.Replace([])
-          }
-        }
-
-        if (options.features & SignatureFeatures.ExpandProperties) {
-          let replacement = expandDeclaration(node, options.features)
-          if (replacement) return WalkAction.Replace(replacement)
-        }
-
-        // Resolve theme values to their inlined value.
-        if (node.value.includes('var(')) {
-          node.value = resolveVariablesInValue(node.value, designSystem)
-        }
-
-        let valueAst = ValueParser.parse(node.value)
-
-        // Very basic `calc(…)` constant folding to handle the spacing scale
-        // multiplier:
-        //
-        // Input:  `--spacing(4)`
-        //       → `calc(var(--spacing, 0.25rem) * 4)`
-        //       → `calc(0.25rem * 4)`       ← this is the case we will see
-        //                                     after inlining the variable
-        //       → `1rem`
-        let [folded, foldedValueAst] = constantFoldDeclarationAst(valueAst, rem)
-
-        // Normalize `calc(…)` expressions such that arguments that are
-        // associatively equivalent are rendered in the same way.
-        //
-        // `calc(var(--foo) * -1)` === `calc(-1 * var(--foo))`
-        let [normalized, canonicalizedValueAst] = canonicalizeCalcExpressionsAst(foldedValueAst)
-
-        if (folded || normalized) {
-          node.value = ValueParser.toCss(canonicalizedValueAst)
-        }
-
-        // We will normalize the `node.value`, this is the same kind of logic
-        // we use when printing arbitrary values. It will remove unnecessary
-        // whitespace.
-        //
-        // Essentially normalizing the `node.value` to a canonical form.
-        node.value = printArbitraryValue(node.value)
-      }
-
-      // Replace special nodes with its children
-      else if (node.kind === 'context' || node.kind === 'at-root') {
-        return WalkAction.Replace(node.nodes)
-      }
-
-      // Remove comments
-      else if (node.kind === 'comment') {
-        return WalkAction.Replace([])
-      }
-
-      // Remove at-rules that are not needed for the signature
-      else if (node.kind === 'at-rule' && node.name === '@property') {
-        return WalkAction.Replace([])
-      }
-    },
-    exit(node) {
-      if (node.kind === 'rule' || node.kind === 'at-rule') {
-        // Remove declarations that are re-defined again later.
-        //
-        // This could maybe result in unwanted behavior (because similar
-        // properties typically exist for backwards compatibility), but for
-        // signature purposes we can assume that the last declaration wins.
-        if (node.nodes.length > 1) {
-          let seen = new Set<string>()
-          for (let i = node.nodes.length - 1; i >= 0; i--) {
-            let child = node.nodes[i]
-            if (child.kind !== 'declaration') continue
-            if (child.value === undefined) continue
-
-            if (seen.has(child.property)) {
-              node.nodes.splice(i, 1)
-            }
-            seen.add(child.property)
-          }
-        }
-
-        // Sort declarations alphabetically by property name
-        node.nodes.sort((a, b) => {
-          if (a.kind !== 'declaration') return 0
-          if (b.kind !== 'declaration') return 0
-          return a.property.localeCompare(b.property)
-        })
-      }
-
-      //
-      else if (node.kind === 'declaration' && node.value) {
-        // Leave CSS variables alone
-        if (node.property[0] === '-' && node.property[1] === '-') return
-
-        // Ensure hex colors are always lowercased
-        {
-          HEX_REGEX.lastIndex = 0
-          node.value = node.value.replace(HEX_REGEX, (color) => color.toLowerCase())
-        }
-      }
-    },
-  })
-
-  return ast
-}
-
-// Variables whose theme value is a CSS-wide keyword (e.g.: `unset`) are never
-// inlined. These are typically registered as a placeholder to be re-assigned at
-// runtime, so two variables that share such a value are not interchangeable.
-//
-// E.g.:
-//
-// ```css
-// @theme {
-//   --foreground: unset;
-//   --background: unset;
-// }
-// ```
-//
-// Inlining would make `text-(--foreground)` and `text-(--background)` produce
-// the same signature `color: unset`, even though they are different at runtime.
-//
-// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/Data_types#css-wide_keywords
-const CSS_WIDE_KEYWORDS = ['initial', 'inherit', 'revert', 'revert-layer', 'revert-rule', 'unset']
-
-// Resolve theme values to their inlined value.
-//
-// E.g.:
-//
-// `[color:var(--color-red-500)]` → `[color:oklch(63.7%_0.237_25.331)]`
-// `[color:oklch(63.7%_0.237_25.331)]` → `[color:oklch(63.7%_0.237_25.331)]`
-//
-// Due to the `@apply` from above, this will become:
-//
-// ```css
-// .example {
-//   color: oklch(63.7% 0.237 25.331);
-// }
-// ```
-//
-// Which conveniently will be equivalent to: `text-red-500` when we inline the
-// value.
-//
-// Without inlining:
-// ```css
-// .example {
-//   color: var(--color-red-500, oklch(63.7% 0.237 25.331));
-// }
-// ```
-//
-// Inlined:
-// ```css
-// .example {
-//   color: oklch(63.7% 0.237 25.331);
-// }
-// ```
-//
-// Recently we made sure that utilities like `text-red-500` also generate the
-// fallback value for usage in `@reference` mode.
-//
-// The second assumption is that if you use `var(--key, fallback)` that happens
-// to match a known variable _and_ its inlined value. Then we can replace it
-// with the inlined variable. This allows us to handle custom `@theme` and
-// `@theme inline` definitions.
-function resolveVariablesInValue(value: string, designSystem: DesignSystem): string {
-  let changed = false
-  let valueAst = ValueParser.parse(value)
-
-  let seen = new Set<string>()
-  walk(valueAst, (valueNode) => {
-    if (valueNode.kind !== 'function') return
-    if (valueNode.value !== 'var') return
-
-    // Resolve the underlying value of the variable
-    if (valueNode.nodes.length !== 1 && valueNode.nodes.length < 3) {
-      return
-    }
-
-    let variable = valueNode.nodes[0].value
-
-    // Drop the prefix from the variable name if it is present. The
-    // internal variable doesn't have the prefix.
-    if (designSystem.theme.prefix && variable.startsWith(`--${designSystem.theme.prefix}-`)) {
-      variable = variable.slice(`--${designSystem.theme.prefix}-`.length)
-    }
-    let variableValue = designSystem.resolveThemeValue(variable)
-    // Prevent infinite recursion when the variable value contains the
-    // variable itself.
-    if (seen.has(variable)) return
-    seen.add(variable)
-    if (variableValue === undefined) return // Couldn't resolve the variable
-
-    // CSS-wide keywords are never inlined
-    if (CSS_WIDE_KEYWORDS.includes(variableValue.toLowerCase())) return
-
-    // Inject variable fallbacks when no fallback is present yet.
-    //
-    // A fallback could consist of multiple values.
-    //
-    // E.g.:
-    //
-    // ```
-    // var(--font-sans, ui-sans-serif, system-ui, sans-serif, …)
-    // ```
-    {
-      // More than 1 argument means that a fallback is already present
-      if (valueNode.nodes.length === 1) {
-        // Inject the fallback value into the variable lookup
-        changed = true
-        valueNode.nodes.push(...ValueParser.parse(`,${variableValue}`))
-      }
-    }
-
-    // Replace known variable + inlined fallback value with the value
-    // itself again
-    {
-      // We need at least 3 arguments. The variable, the separator and a fallback value.
-      if (valueNode.nodes.length >= 3) {
-        let nodeAsString = ValueParser.toCss(valueNode.nodes) // This could include more than just the variable
-        let constructedValue = `${valueNode.nodes[0].value},${variableValue}`
-        if (nodeAsString === constructedValue) {
-          changed = true
-          return WalkAction.Replace(ValueParser.parse(variableValue))
-        }
-      }
-    }
-  })
-
-  // Replace the value with the new value
-  if (changed) return ValueParser.toCss(valueAst)
-  return value
-}
-
-// Index all static utilities by property and value
-const STATIC_UTILITIES_KEY = Symbol()
-function createStaticUtilitiesCache(): DesignSystem['storage'][typeof STATIC_UTILITIES_KEY] {
-  return new DefaultMap((_optiones: SignatureOptions) => {
-    return new DefaultMap((_property: string) => {
-      return new DefaultMap((_value: string) => {
-        return new Set<string>()
-      })
-    })
-  })
-}
-
-const UTILITY_PROPERTIES_KEY = Symbol()
-function createUtilityPropertiesCache(
-  designSystem: DesignSystem,
-): DesignSystem['storage'][typeof UTILITY_PROPERTIES_KEY] {
-  return new DefaultMap((options: SignatureOptions) => {
-    return new DefaultMap((className) => {
-      let localPropertyValueLookup = new DefaultMap((_property) => new Set<string>())
-
-      if (designSystem.theme.prefix && !className.startsWith(designSystem.theme.prefix)) {
-        className = `${designSystem.theme.prefix}:${className}`
-      }
-      let parsed = designSystem.parseCandidate(className)
-      if (parsed.length === 0) return localPropertyValueLookup
-
-      try {
-        let ast = designSystem.compileAstNodes(parsed[0]).map((x) => cloneAstNode(x.node))
-        walk(canonicalizeAst(designSystem, ast, options), (node) => {
-          if (node.kind === 'declaration') {
-            localPropertyValueLookup.get(node.property).add(node.value!)
-            designSystem.storage[STATIC_UTILITIES_KEY].get(options)
-              .get(node.property)
-              .get(node.value!)
-              .add(className)
-          }
-        })
-      } catch {
-        // Ignore errors, this could happen when we call a plugin with a value
-        // it didn't expect. But since plugins are functions, we can't know
-        // ahead of time what it expects.
-      }
-
-      return localPropertyValueLookup
-    })
-  })
-}
-
-// For all static utilities in the system, compute a lookup table that maps the
-// utility signature to the utility name. This is used to find the utility name
-// for a given utility signature.
-//
-// For all functional utilities, we can compute static-like utilities by
-// essentially pre-computing the values and modifiers. This is a bit slow, but
-// also only has to happen once per design system.
-const PRE_COMPUTED_UTILITIES_KEY = Symbol()
-function createPreComputedUtilitiesCache(
-  designSystem: DesignSystem,
-): DesignSystem['storage'][typeof PRE_COMPUTED_UTILITIES_KEY] {
-  return new DefaultMap((options: SignatureOptions) => {
-    let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options)
-    let lookup = new DefaultMap<string, string[]>(() => [])
-
-    // Right now all plugins are implemented using functions so they are a black
-    // box. Let's use the `getClassList` and consider every known suggestion as a
-    // static utility for now.
-    for (let [className, meta] of designSystem.getClassList()) {
-      let signature = signatures.get(className)
-      if (typeof signature !== 'string') continue
-
-      // Skip the utility if `-{utility}-0` has the same signature as
-      // `{utility}-0` (its positive version). This will prefer positive values
-      // over negative values.
-      if (className[0] === '-' && className.endsWith('-0')) {
-        let positiveSignature = signatures.get(className.slice(1))
-        if (typeof positiveSignature === 'string' && signature === positiveSignature) {
-          continue
-        }
-      }
-
-      lookup.get(signature).push(className)
-      designSystem.storage[UTILITY_PROPERTIES_KEY].get(options).get(className)
-
-      for (let modifier of meta.modifiers) {
-        // Modifiers representing numbers can be computed and don't need to be
-        // pre-computed. Doing the math and at the time of writing this, this
-        // would save you 250k additionally pre-computed utilities...
-        if (isValidSpacingMultiplier(modifier)) {
-          continue
-        }
-
-        let classNameWithModifier = `${className}/${modifier}`
-        let signature = signatures.get(classNameWithModifier)
-        if (typeof signature !== 'string') continue
-        lookup.get(signature).push(classNameWithModifier)
-        designSystem.storage[UTILITY_PROPERTIES_KEY].get(options).get(classNameWithModifier)
-      }
-    }
-
-    return lookup
-  })
-}
-
-// Given a variant, compute a signature that represents the variant. The
-// signature will be a normalised form of the generated CSS for the variant, or
-// a unique symbol if the variant is not valid. The class in the selector will
-// be replaced with `.x`.
-//
-// E.g.:
-//
-// | VARIANT          | GENERATED SIGNATURE           |
-// | ---------------- | ----------------------------- |
-// | `[&:focus]:flex` | `.x:focus { display: flex; }` |
-// | `focus:flex`     | `.x:focus { display: flex; }` |
-//
-// These produce the same signature, therefore they represent the same variant.
-export const VARIANT_SIGNATURE_KEY = Symbol()
-function createVariantSignatureCache(
-  designSystem: DesignSystem,
-): DesignSystem['storage'][typeof VARIANT_SIGNATURE_KEY] {
-  return new DefaultMap((rem: number | null) => {
-    return new DefaultMap<string, string | symbol>((variant) => {
-      try {
-        // Ensure the prefix is added to the utility if it is not already present.
-        variant =
-          designSystem.theme.prefix && !variant.startsWith(designSystem.theme.prefix)
-            ? `${designSystem.theme.prefix}:${variant}`
-            : variant
-
-        // Use `@apply` to normalize the selector to `.x`
-        let ast: AstNode[] = [styleRule('.x', [atRule('@apply', `${variant}:flex`)])]
-        substituteAtApply(ast, designSystem)
-
-        // Canonicalize selectors to their minimal form
-        walk(ast, (node) => {
-          // At-rules
-          if (node.kind === 'at-rule') {
-            // Normalize dimensions such that equivalent values in different
-            // units are considered the same. E.g.: with a root font size of
-            // `16px`, `@media (width >= 64rem)` and `@media (width >= 1024px)`
-            // are equivalent.
-            node.params = constantFoldDeclaration(node.params, rem)
-
-            if (node.params.includes(' ')) {
-              node.params = node.params.replaceAll(' ', '')
-            }
-          }
-
-          // Style rules
-          else if (node.kind === 'rule') {
-            let selectorAst = SelectorParser.parse(node.selector)
-            let changed = false
-            walk(selectorAst, (node) => {
-              // Assumption: when we have a list of selectors: `.foo, .bar` we
-              // want to mark this as changed because this will be re-printed as
-              // `.foo,.bar`.
-              //
-              // Similarly, when we receive a combinator like `.foo + .bar`, this
-              // will be printed as `.foo+.bar`.
-              //
-              // It could be that this was already optimal, but then this would be
-              // a no-op situation.
-              if (node.kind === 'list' || node.kind === 'combinator') {
-                changed = true
-              }
-
-              // Remove unnecessary `:is(…)` selectors
-              else if (node.kind === 'function' && node.value === ':is') {
-                // A single selector inside of `:is(…)` can be replaced with the
-                // selector itself.
-                //
-                // E.g.: `:is(.foo)` → `.foo`
-                if (node.nodes.length === 1) {
-                  changed = true
-                  return WalkAction.Replace(node.nodes)
-                }
-
-                // A selector with the universal selector `*` followed by a pseudo
-                // class, can be replaced with the pseudo class itself.
-                else if (
-                  node.nodes.length === 2 &&
-                  node.nodes[0].kind === 'selector' &&
-                  node.nodes[0].value === '*' &&
-                  node.nodes[1].kind === 'selector' &&
-                  node.nodes[1].value[0] === ':'
-                ) {
-                  changed = true
-                  return WalkAction.Replace(node.nodes[1])
-                }
-              }
-
-              // Ensure `*` exists before pseudo selectors inside of `:not(…)`,
-              // `:where(…)`, …
-              //
-              // E.g.:
-              //
-              // `:not(:first-child)` → `:not(*:first-child)`
-              //
-              else if (
-                node.kind === 'function' &&
-                node.value[0] === ':' &&
-                node.nodes[0]?.kind === 'selector' &&
-                node.nodes[0]?.value[0] === ':'
-              ) {
-                changed = true
-                node.nodes.unshift({ kind: 'selector', value: '*' })
-              }
-            })
-
-            if (changed) {
-              node.selector = SelectorParser.toCss(selectorAst, true)
-            }
-          }
-        })
-
-        // Compute the final signature, by generating the CSS for the variant
-        let signature = toCss(ast)
-        return signature
-      } catch {
-        // A unique symbol is returned to ensure that 2 signatures resulting in
-        // `null` are not considered equal.
-        return Symbol()
-      }
-    })
-  })
-}
-
-export const PRE_COMPUTED_VARIANTS_KEY = Symbol()
-function createPreComputedVariantsCache(
-  designSystem: DesignSystem,
-): DesignSystem['storage'][typeof PRE_COMPUTED_VARIANTS_KEY] {
-  return new DefaultMap((rem: number | null) => {
-    let signatures = designSystem.storage[VARIANT_SIGNATURE_KEY].get(rem)
-    let lookup = new DefaultMap<string, string[]>(() => [])
-
-    for (let [root, variant] of designSystem.variants.entries()) {
-      // Actual static variants
-      if (variant.kind === 'static') {
-        let signature = signatures.get(root)
-        if (typeof signature !== 'string') continue
-        lookup.get(signature).push(root)
-      }
-
-      // Functional variants with known values, e.g.: `max-lg`, `@min-md`, …
-      else if (variant.kind === 'functional') {
-        for (let value of designSystem.variants.getCompletions(root)) {
-          let name = root === '@' ? `@${value}` : `${root}-${value}`
-          let signature = signatures.get(name)
-          if (typeof signature !== 'string') continue
-          lookup.get(signature).push(name)
-        }
-      }
-    }
-
-    return lookup
-  })
-}
-
-function temporarilyDisableThemeInline<T>(designSystem: DesignSystem, cb: () => T): T {
-  // Turn off `@theme inline` feature such that `@theme` and `@theme inline` are
-  // considered the same. The biggest motivation for this is referencing
-  // variables in another namespace that happen to contain the same value as the
-  // utility's own namespaces it is reading from.
-  //
-  // E.g.:
-  //
-  // The `max-w-*` utility doesn't read from the `--breakpoint-*` namespace.
-  // But it does read from the `--container-*` namespace. It also happens to
-  // be the case that `--breakpoint-md` and `--container-3xl` are the exact
-  // same value.
-  //
-  // If you then use the `max-w-(--breakpoint-md)` utility, inlining the
-  // variable would mean:
-  //  - `max-w-(--breakpoint-md)` → `max-width: 48rem;` → `max-w-3xl`
-  //  - `max-w-(--contianer-3xl)` → `max-width: 48rem;` → `max-w-3xl`
-  //
-  // Not inlining the variable would mean:
-  // - `max-w-(--breakpoint-md)` → `max-width: var(--breakpoint-md);` → `max-w-(--breakpoint-md)`
-  // - `max-w-(--container-3xl)` → `max-width: var(--container-3xl);` → `max-w-3xl`
-
-  // @ts-expect-error We are monkey-patching a method that's considered private
-  // in TypeScript
-  let originalGet = designSystem.theme.values.get
-
-  // Track all values with the inline option set, so we can restore them later.
-  let restorableInlineOptions = new Set<{ options: ThemeOptions }>()
-
-  // @ts-expect-error We are monkey-patching a method that's considered private
-  // in TypeScript
-  designSystem.theme.values.get = (key: string) => {
-    // @ts-expect-error We are monkey-patching a method that's considered private
-    // in TypeScript
-    let value = originalGet.call(designSystem.theme.values, key)
-    if (value === undefined) return value
-
-    // Remove `inline` if it was set
-    if (value.options & ThemeOptions.INLINE) {
-      restorableInlineOptions.add(value)
-      value.options &= ~ThemeOptions.INLINE
-    }
-
-    return value
-  }
-
-  try {
-    // Run the callback with the `@theme inline` feature disabled
-    return cb()
-  } finally {
-    // Restore the `@theme inline` to the original value
-    // @ts-expect-error We are monkey-patching a method that's private
-    designSystem.theme.values.get = originalGet
-
-    // Re-add the `inline` option, in case future lookups are done
-    for (let value of restorableInlineOptions) {
-      value.options |= ThemeOptions.INLINE
-    }
-  }
-}
-
-// Generator that generates all combinations of the given set. Using a generator
-// so we can stop early when we found a suitable combination.
-//
-// NOTE:
-//
-// 1. Yield biggest combinations first
-// 2. Sets of size 1 and 0 are not yielded
-function* combinations<T>(arr: T[]): Generator<T[]> {
-  let n = arr.length
-  let limit = 1n << BigInt(n)
-
-  for (let k = n; k >= 2; k--) {
-    let mask = (1n << BigInt(k)) - 1n
-
-    while (mask < limit) {
-      let out = []
-      for (let i = 0; i < n; i++) {
-        if ((mask >> BigInt(i)) & 1n) {
-          out.push(arr[i])
-        }
-      }
-      yield out
-
-      // Gosper's hack:
-      // - https://programmingforinsomniacs.blogspot.com/2018/03/gospers-hack-explained.html
-      // - https://rosettacode.org/wiki/Gosper%27s_hack
-      //
-      // We need to generate the next mask in lexicographical order.
-      let carry = mask & -mask
-      let ripple = mask + carry
-      mask = (((ripple ^ mask) >> 2n) / carry) | ripple
-    }
-  }
-}
-
-function intersection<T>(a: Set<T>, b: Set<T>): Set<T> {
-  // @ts-expect-error Set.prototype.intersection is only available in Node.js v22+
-  if (typeof a.intersection === 'function') return a.intersection(b)
-
-  // Polyfill for environments that do not support Set.prototype.intersection yet
-  if (a.size === 0 || b.size === 0) return new Set<T>()
-
-  let result = new Set<T>(a)
-  for (let item of b) {
-    if (!result.has(item)) {
-      result.delete(item)
-    }
-  }
-
-  return result
-}
diff --git a/packages/tailwindcss/src/cartesian.ts b/packages/tailwindcss/src/cartesian.ts
deleted file mode 100644
index f0f7bbba4..000000000
--- a/packages/tailwindcss/src/cartesian.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-type CartesianInput = readonly unknown[][]
-
-type CartesianResult<T extends CartesianInput> = T extends [
-  infer Head extends unknown[],
-  ...infer Tail extends CartesianInput,
-]
-  ? [Head[number], ...CartesianResult<Tail>]
-  : []
-
-export function* cartesian<T extends CartesianInput>(...sets: T): Generator<CartesianResult<T>> {
-  let n = sets.length
-  if (n === 0) return
-
-  // If any input set is empty, the Cartesian product is empty.
-  if (sets.some((set) => set.length === 0)) {
-    return
-  }
-
-  // Index lookup
-  let idx = Array(n).fill(0)
-
-  while (true) {
-    // Compute current combination
-    let result = [] as CartesianResult<T>
-    for (let i = 0; i < n; i++) {
-      result[i] = sets[i][idx[i]]
-    }
-    yield result
-
-    // Update index vector
-    let k = n - 1
-    while (k >= 0) {
-      idx[k]++
-      if (idx[k] < sets[k].length) {
-        break
-      }
-      idx[k] = 0
-      k--
-    }
-
-    if (k < 0) {
-      return
-    }
-  }
-}
diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
deleted file mode 100644
index 036b9d88e..000000000
--- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts
+++ /dev/null
@@ -1,426 +0,0 @@
-import { Features } from '..'
-import { cssContext, styleRule, toCss, type AstNode } from '../ast'
-import type { DesignSystem } from '../design-system'
-import type { SourceLocation } from '../source-maps/source'
-import { segment } from '../utils/segment'
-import { walk, WalkAction } from '../walk'
-import { applyConfigToTheme } from './apply-config-to-theme'
-import { applyKeyframesToTheme } from './apply-keyframes-to-theme'
-import { createCompatConfig } from './config/create-compat-config'
-import { resolveConfig } from './config/resolve-config'
-import type { UserConfig } from './config/types'
-import { registerContainerCompat } from './container'
-import { darkModePlugin } from './dark-mode'
-import { registerLegacyUtilities } from './legacy-utilities'
-import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api'
-import { registerScreensConfig } from './screens-config'
-import { registerThemeVariantOverrides } from './theme-variants'
-
-const IS_VALID_PREFIX = /^[a-z]+$/
-
-export async function applyCompatibilityHooks({
-  designSystem,
-  base,
-  ast,
-  loadModule,
-  sources,
-}: {
-  designSystem: DesignSystem
-  base: string
-  ast: AstNode[]
-  loadModule: (
-    path: string,
-    base: string,
-    resourceHint: 'plugin' | 'config',
-  ) => Promise<{
-    path: string
-    base: string
-    module: any
-  }>
-  sources: { base: string; pattern: string; negated: boolean }[]
-}) {
-  let features = Features.None
-  let pluginPaths: [
-    { id: string; base: string; reference: boolean; src: SourceLocation | undefined },
-    CssPluginOptions | null,
-  ][] = []
-  let configPaths: {
-    id: string
-    base: string
-    reference: boolean
-    src: SourceLocation | undefined
-  }[] = []
-
-  walk(ast, (node, _ctx) => {
-    if (node.kind !== 'at-rule') return
-    let ctx = cssContext(_ctx)
-
-    // Collect paths from `@plugin` at-rules
-    if (node.name === '@plugin') {
-      if (ctx.parent !== null) {
-        throw new Error('`@plugin` cannot be nested.')
-      }
-
-      let pluginPath = node.params.slice(1, -1)
-      if (pluginPath.length === 0) {
-        throw new Error('`@plugin` must have a path.')
-      }
-
-      let options: CssPluginOptions = {}
-
-      for (let decl of node.nodes ?? []) {
-        if (decl.kind !== 'declaration') {
-          throw new Error(
-            `Unexpected \`@plugin\` option:\n\n${toCss([decl])}\n\n\`@plugin\` options must be a flat list of declarations.`,
-          )
-        }
-
-        if (decl.value === undefined) continue
-
-        // Parse the declaration value as a primitive type
-        // These are the same primitive values supported by JSON
-        let value: CssPluginOptions[keyof CssPluginOptions] = decl.value
-
-        let parts = segment(value, ',').map((part) => {
-          part = part.trim()
-
-          if (part === 'null') {
-            return null
-          } else if (part === 'true') {
-            return true
-          } else if (part === 'false') {
-            return false
-          } else if (!Number.isNaN(Number(part))) {
-            return Number(part)
-          } else if (
-            (part[0] === '"' && part[part.length - 1] === '"') ||
-            (part[0] === "'" && part[part.length - 1] === "'")
-          ) {
-            return part.slice(1, -1)
-          } else if (part[0] === '{' && part[part.length - 1] === '}') {
-            throw new Error(
-              `Unexpected \`@plugin\` option: Value of declaration \`${toCss([decl]).trim()}\` is not supported.\n\nUsing an object as a plugin option is currently only supported in JavaScript configuration files.`,
-            )
-          }
-
-          return part
-        })
-
-        options[decl.property] = parts.length === 1 ? parts[0] : parts
-      }
-
-      pluginPaths.push([
-        {
-          id: pluginPath,
-          base: ctx.context.base as string,
-          reference: !!ctx.context.reference,
-          src: node.src,
-        },
-        Object.keys(options).length > 0 ? options : null,
-      ])
-
-      features |= Features.JsPluginCompat
-      return WalkAction.Replace([])
-    }
-
-    // Collect paths from `@config` at-rules
-    if (node.name === '@config') {
-      if (node.nodes.length > 0) {
-        throw new Error('`@config` cannot have a body.')
-      }
-
-      if (ctx.parent !== null) {
-        throw new Error('`@config` cannot be nested.')
-      }
-
-      configPaths.push({
-        id: node.params.slice(1, -1),
-        base: ctx.context.base as string,
-        reference: !!ctx.context.reference,
-        src: node.src,
-      })
-      features |= Features.JsPluginCompat
-      return WalkAction.Replace([])
-    }
-  })
-
-  registerLegacyUtilities(designSystem)
-
-  // Override `resolveThemeValue` with a version that is backwards compatible
-  // with dot notation paths like `colors.red.500`. We could do this by default
-  // in `resolveThemeValue` but handling it here keeps all backwards
-  // compatibility concerns localized to our compatibility layer.
-  let resolveThemeVariableValue = designSystem.resolveThemeValue
-
-  designSystem.resolveThemeValue = function resolveThemeValue(path: string, forceInline?: boolean) {
-    if (path.startsWith('--')) {
-      return resolveThemeVariableValue(path, forceInline)
-    }
-
-    // If the theme value is not found in the simple resolver, we upgrade to the full backward
-    // compatibility support implementation of the `resolveThemeValue` function.
-    features |= upgradeToFullPluginSupport({
-      designSystem,
-      base,
-      ast,
-      sources,
-      configs: [],
-      pluginDetails: [],
-    })
-    return designSystem.resolveThemeValue(path, forceInline)
-  }
-
-  // If there are no plugins or configs registered, we don't need to register
-  // any additional backwards compatibility hooks.
-  if (!pluginPaths.length && !configPaths.length) return Features.None
-
-  let [configs, pluginDetails] = await Promise.all([
-    Promise.all(
-      configPaths.map(async ({ id, base, reference, src }) => {
-        let loaded = await loadModule(id, base, 'config')
-        return {
-          path: id,
-          base: loaded.base,
-          config: loaded.module as UserConfig,
-          reference,
-          src,
-        }
-      }),
-    ),
-    Promise.all(
-      pluginPaths.map(async ([{ id, base, reference, src }, pluginOptions]) => {
-        let loaded = await loadModule(id, base, 'plugin')
-        return {
-          path: id,
-          base: loaded.base,
-          plugin: loaded.module as Plugin,
-          options: pluginOptions,
-          reference,
-          src,
-        }
-      }),
-    ),
-  ])
-
-  features |= upgradeToFullPluginSupport({
-    designSystem,
-    base,
-    ast,
-    sources,
-    configs,
-    pluginDetails,
-  })
-
-  return features
-}
-
-function upgradeToFullPluginSupport({
-  designSystem,
-  base,
-  ast,
-  sources,
-  configs,
-  pluginDetails,
-}: {
-  designSystem: DesignSystem
-  base: string
-  ast: AstNode[]
-  sources: { base: string; pattern: string; negated: boolean }[]
-  configs: {
-    path: string
-    base: string
-    config: UserConfig
-    reference: boolean
-    src: SourceLocation | undefined
-  }[]
-  pluginDetails: {
-    path: string
-    base: string
-    plugin: Plugin
-    options: CssPluginOptions | null
-    reference: boolean
-    src: SourceLocation | undefined
-  }[]
-}) {
-  let features = Features.None
-  let pluginConfigs = pluginDetails.map((detail) => {
-    if (!detail.options) {
-      return {
-        config: { plugins: [detail.plugin] },
-        base: detail.base,
-        reference: detail.reference,
-        src: detail.src,
-      }
-    }
-
-    if ('__isOptionsFunction' in detail.plugin) {
-      return {
-        config: { plugins: [detail.plugin(detail.options)] },
-        base: detail.base,
-        reference: detail.reference,
-        src: detail.src,
-      }
-    }
-
-    throw new Error(`The plugin "${detail.path}" does not accept options`)
-  })
-
-  let userConfig = [...pluginConfigs, ...configs]
-
-  let { resolvedConfig } = resolveConfig(designSystem, [
-    { config: createCompatConfig(designSystem.theme), base, reference: true, src: undefined },
-    ...userConfig,
-    { config: { plugins: [darkModePlugin] }, base, reference: true, src: undefined },
-  ])
-  let { resolvedConfig: resolvedUserConfig, replacedThemeKeys } = resolveConfig(
-    designSystem,
-    userConfig,
-  )
-
-  let pluginApiConfig = {
-    designSystem,
-    ast,
-    resolvedConfig,
-    featuresRef: {
-      set current(value: number) {
-        features |= value
-      },
-    },
-  }
-
-  let sharedPluginApi = buildPluginApi({
-    ...pluginApiConfig,
-    referenceMode: false,
-    src: undefined,
-  })
-
-  // Replace `resolveThemeValue` with a version that is backwards compatible
-  // with dot-notation but also aware of any JS theme configurations registered
-  // by plugins or JS config files. This is significantly slower than just
-  // upgrading dot-notation keys so we only use this version if plugins or
-  // config files are actually being used. In the future we may want to optimize
-  // this further by only doing this if plugins or config files _actually_
-  // registered JS config objects.
-  let defaultResolveThemeValue = designSystem.resolveThemeValue
-  designSystem.resolveThemeValue = function resolveThemeValue(path: string, forceInline?: boolean) {
-    if (path[0] === '-' && path[1] === '-') {
-      return defaultResolveThemeValue(path, forceInline)
-    }
-
-    let resolvedValue = sharedPluginApi.theme(path, undefined)
-
-    // If we're dealing with an object that has the `DEFAULT` key, unwrap it to
-    // the default value first. This happens for namespace root lookups where
-    // the CSS theme defines a bare value, e.g. `--shadow` resolved via
-    // `theme('shadow')`.
-    if (
-      typeof resolvedValue === 'object' &&
-      resolvedValue !== null &&
-      !Array.isArray(resolvedValue) &&
-      'DEFAULT' in resolvedValue
-    ) {
-      resolvedValue = resolvedValue.DEFAULT
-    }
-
-    // When a tuple is returned, return the first element
-    if (Array.isArray(resolvedValue) && resolvedValue.length === 2) {
-      return resolvedValue[0]
-    }
-
-    // Arrays get serialized into a comma-separated lists
-    else if (Array.isArray(resolvedValue)) {
-      return resolvedValue.join(', ')
-    }
-
-    // Otherwise only allow string values here, objects (and namespace maps)
-    // are treated as non-resolved values for the CSS `theme()` function.
-    else if (typeof resolvedValue === 'string') {
-      return resolvedValue
-    }
-  }
-
-  for (let { handler, reference, src } of resolvedConfig.plugins) {
-    // Each plugin gets its own instance of the plugin API because nodes added
-    // to the AST may need to point to the `@config` or `@plugin` that they
-    // originated from
-    let api = buildPluginApi({
-      ...pluginApiConfig,
-      referenceMode: reference ?? false,
-      src,
-    })
-
-    handler(api)
-  }
-
-  // Merge the user-configured theme keys into the design system. The compat
-  // config would otherwise expand into namespaces like `background-color` which
-  // core utilities already read from.
-  applyConfigToTheme(designSystem, resolvedUserConfig, replacedThemeKeys)
-  applyKeyframesToTheme(designSystem, resolvedUserConfig)
-
-  registerThemeVariantOverrides(resolvedUserConfig, designSystem)
-  registerScreensConfig(resolvedUserConfig, designSystem)
-  registerContainerCompat(resolvedUserConfig, designSystem)
-
-  // If a prefix has already been set in CSS don't override it
-  if (!designSystem.theme.prefix && resolvedConfig.prefix) {
-    if (resolvedConfig.prefix.endsWith('-')) {
-      resolvedConfig.prefix = resolvedConfig.prefix.slice(0, -1)
-
-      console.warn(
-        `The prefix "${resolvedConfig.prefix}" is invalid. Prefixes must be lowercase ASCII letters (a-z) only and is written as a variant before all utilities. We have fixed up the prefix for you. Remove the trailing \`-\` to silence this warning.`,
-      )
-    }
-
-    if (!IS_VALID_PREFIX.test(resolvedConfig.prefix)) {
-      throw new Error(
-        `The prefix "${resolvedConfig.prefix}" is invalid. Prefixes must be lowercase ASCII letters (a-z) only.`,
-      )
-    }
-
-    designSystem.theme.prefix = resolvedConfig.prefix
-  }
-
-  // If an important strategy has already been set in CSS don't override it
-  if (!designSystem.important && resolvedConfig.important === true) {
-    designSystem.important = true
-  }
-
-  if (typeof resolvedConfig.important === 'string') {
-    let wrappingSelector = resolvedConfig.important
-
-    walk(ast, (node, _ctx) => {
-      if (node.kind !== 'at-rule') return
-      if (node.name !== '@tailwind' || node.params !== 'utilities') return
-
-      let ctx = cssContext(_ctx)
-
-      // The AST node was already manually wrapped so there's nothing to do
-      if (ctx.parent?.kind === 'rule' && ctx.parent.selector === wrappingSelector) {
-        return WalkAction.Stop
-      }
-
-      return WalkAction.ReplaceStop(styleRule(wrappingSelector, [node]))
-    })
-  }
-
-  for (let candidate of resolvedConfig.blocklist) {
-    designSystem.invalidCandidates.add(candidate)
-  }
-
-  for (let file of resolvedConfig.content.files) {
-    if ('raw' in file) {
-      throw new Error(
-        `Error in the config file/plugin/preset. The \`content\` key contains a \`raw\` entry:\n\n${JSON.stringify(file, null, 2)}\n\nThis feature is not currently supported.`,
-      )
-    }
-
-    let negated = false
-    if (file.pattern[0] == '!') {
-      negated = true
-      file.pattern = file.pattern.slice(1)
-    }
-    sources.push({ ...file, negated })
-  }
-  return features
-}
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
deleted file mode 100644
index 12f195e94..000000000
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
+++ /dev/null
@@ -1,319 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { buildDesignSystem } from '../design-system'
-import { Theme, ThemeOptions } from '../theme'
-import { applyConfigToTheme, keyPathToCssProperty } from './apply-config-to-theme'
-import { resolveConfig } from './config/resolve-config'
-
-test('config values can be merged into the theme', () => {
-  let theme = new Theme()
-  let design = buildDesignSystem(theme)
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          colors: {
-            primary: '#c0ffee',
-            red: {
-              500: 'red',
-            },
-          },
-
-          screens: {
-            sm: '1234px',
-          },
-
-          aspectRatio: {
-            retro: '4 / 3',
-          },
-
-          boxShadow: {
-            normal: '0 1px 3px black',
-          },
-
-          borderWidth: {
-            DEFAULT: '1.5px',
-          },
-          outlineWidth: {
-            DEFAULT: '2.5px',
-          },
-          ringWidth: {
-            DEFAULT: '3.5px',
-          },
-
-          borderRadius: {
-            sm: '0.33rem',
-          },
-
-          animation: {
-            blink: 'blink 1s linear infinite',
-          },
-
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-            mono: ['Potato Mono', { fontVariationSettings: '"XHGT" 0.7' }],
-          },
-
-          fontSize: {
-            sm: '0.875rem',
-            base: [
-              '1rem',
-              {
-                lineHeight: '1.5',
-              },
-            ],
-            lg: ['1.125rem', '2'],
-            xl: ['1.5rem', '3rem', 'invalid'],
-            '2xl': ['2rem'],
-          },
-
-          ringColor: {
-            DEFAULT: '#fff',
-          },
-
-          letterSpacing: {
-            superWide: '0.25em',
-          },
-
-          lineHeight: {
-            superLoose: '3',
-          },
-
-          width: {
-            // Purposely setting to something different from the default
-            '1/2': '60%',
-            '0.5': '60%',
-            '100%': '100%',
-          },
-
-          maxWidth: {
-            '9xs': '6rem',
-          },
-
-          transitionTimingFunction: {
-            DEFAULT: 'ease-in-out',
-            fast: 'cubic-bezier(0, 0.55, 0.45, 1)',
-          },
-          transitionDuration: {
-            DEFAULT: '1234ms',
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-  applyConfigToTheme(design, resolvedConfig, replacedThemeKeys)
-
-  expect(theme.resolve('primary', ['--color'])).toEqual('#c0ffee')
-  expect(theme.resolve('sm', ['--breakpoint'])).toEqual('1234px')
-  expect(theme.resolve('normal', ['--shadow'])).toEqual('0 1px 3px black')
-  expect(theme.resolve('retro', ['--aspect'])).toEqual('4 / 3')
-  expect(theme.resolve('sm', ['--radius'])).toEqual('0.33rem')
-  expect(theme.resolve('blink', ['--animate'])).toEqual('blink 1s linear infinite')
-  expect(theme.resolve('red-500', ['--color'])).toEqual('red')
-  expect(theme.resolve('sans', ['--font'])).toEqual('Inter, system-ui, sans-serif')
-  expect(theme.resolveWith('mono', ['--font'], ['--font-variation-settings'])).toEqual([
-    'Potato Mono',
-    { '--font-variation-settings': '"XHGT" 0.7' },
-  ])
-  expect(theme.resolve('sm', ['--text'])).toEqual('0.875rem')
-  expect(theme.resolve('base', ['--text'])).toEqual('1rem')
-  expect(theme.resolveWith('base', ['--text'], ['--line-height'])).toEqual([
-    '1rem',
-    { '--line-height': '1.5' },
-  ])
-  expect(theme.resolve('lg', ['--text'])).toEqual('1.125rem')
-  expect(theme.resolveWith('lg', ['--text'], ['--line-height'])).toEqual([
-    '1.125rem',
-    { '--line-height': '2' },
-  ])
-  expect(theme.resolve('xl', ['--text'])).toEqual('1.5rem')
-  expect(theme.resolveWith('xl', ['--text'], ['--line-height'])).toEqual([
-    '1.5rem',
-    { '--line-height': '3rem' },
-  ])
-  expect(theme.resolve('2xl', ['--text'])).toEqual('2rem')
-  expect(theme.resolveWith('2xl', ['--text'], ['--line-height'])).toEqual(['2rem', {}])
-  expect(theme.resolve('superWide', ['--tracking'])).toEqual('0.25em')
-  expect(theme.resolve('superLoose', ['--leading'])).toEqual('3')
-  expect(theme.resolve('1/2', ['--width'])).toEqual('60%')
-  expect(theme.resolve('0.5', ['--width'])).toEqual('60%')
-  expect(theme.resolve('100%', ['--width'])).toEqual('100%')
-  expect(theme.resolve('9xs', ['--container'])).toEqual('6rem')
-  expect(theme.resolve('fast', ['--ease'])).toEqual('cubic-bezier(0, 0.55, 0.45, 1)')
-
-  expect(theme.get(['--border'])).toEqual(null)
-  expect(theme.get(['--default-border-width'])).toEqual('1.5px')
-
-  expect(theme.get(['--outline'])).toEqual(null)
-  expect(theme.get(['--default-outline-width'])).toEqual('2.5px')
-
-  expect(theme.get(['--ring-color'])).toEqual(null)
-  expect(theme.get(['--default-ring-color'])).toEqual('#fff')
-
-  expect(theme.get(['--ring-width'])).toEqual(null)
-  expect(theme.get(['--default-ring-width'])).toEqual('3.5px')
-
-  expect(theme.get(['--default-transition-duration'])).toEqual('1234ms')
-
-  expect(theme.get(['--ease'])).toEqual(null)
-  expect(theme.get(['--default-transition-timing-function'])).toEqual('ease-in-out')
-})
-
-test('will reset default theme values with overwriting theme values', () => {
-  let theme = new Theme()
-  let design = buildDesignSystem(theme)
-
-  theme.add('--color-blue-400', 'lightblue', ThemeOptions.DEFAULT)
-  theme.add('--color-blue-500', 'blue', ThemeOptions.DEFAULT)
-  theme.add('--color-red-400', '#f87171')
-  theme.add('--color-red-500', '#ef4444')
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          colors: {
-            blue: {
-              500: '#3b82f6',
-            },
-            red: {
-              500: 'red',
-            },
-          },
-          extend: {
-            colors: {
-              blue: {
-                600: '#2563eb',
-              },
-              red: {
-                600: '#dc2626',
-              },
-            },
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-  applyConfigToTheme(design, resolvedConfig, replacedThemeKeys)
-
-  expect(theme.namespace('--color')).toMatchInlineSnapshot(`
-    Map {
-      "red-400" => "#f87171",
-      "red-500" => "#ef4444",
-      "blue-500" => "#3b82f6",
-      "blue-600" => "#2563eb",
-      "red-600" => "#dc2626",
-    }
-  `)
-})
-
-test('invalid keys are not merged into the theme', () => {
-  let theme = new Theme()
-  let design = buildDesignSystem(theme)
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          colors: {
-            'primary color': '#86753099',
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-
-  applyConfigToTheme(design, resolvedConfig, replacedThemeKeys)
-
-  let entries = Array.from(theme.entries())
-
-  expect(entries.length).toEqual(0)
-})
-
-describe('keyPathToCssProperty', () => {
-  test.each([
-    [['width', '40', '2/5'], '--width-40-2/5'],
-    [['spacing', '0.5'], '--spacing-0_5'],
-  ])('converts %s to %s', (keyPath, expected) => {
-    expect(`--${keyPathToCssProperty(keyPath)}`).toEqual(expected)
-  })
-})
-
-test('converts opacity modifiers from decimal to percentage values', () => {
-  let theme = new Theme()
-  let design = buildDesignSystem(theme)
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          opacity: {
-            0: '0',
-            5: '0.05',
-            10: '0.1',
-            15: '0.15',
-            20: 0.2,
-            25: 0.25,
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-  applyConfigToTheme(design, resolvedConfig, replacedThemeKeys)
-
-  expect(theme.resolve('0', ['--opacity'])).toEqual('0%')
-  expect(theme.resolve('5', ['--opacity'])).toEqual('5%')
-  expect(theme.resolve('10', ['--opacity'])).toEqual('10%')
-  expect(theme.resolve('15', ['--opacity'])).toEqual('15%')
-  expect(theme.resolve('20', ['--opacity'])).toEqual('20%')
-  expect(theme.resolve('25', ['--opacity'])).toEqual('25%')
-})
-
-test('handles setting theme keys to null', async () => {
-  let theme = new Theme()
-  let design = buildDesignSystem(theme)
-
-  theme.add('--color-blue-400', 'blue', ThemeOptions.DEFAULT)
-  theme.add('--color-blue-500', '#3b82f6')
-  theme.add('--color-red-400', 'red', ThemeOptions.DEFAULT)
-  theme.add('--color-red-500', '#ef4444')
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          extend: {
-            colors: {
-              blue: null,
-            },
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-  applyConfigToTheme(design, resolvedConfig, replacedThemeKeys)
-
-  expect(theme.namespace('--color')).toMatchInlineSnapshot(`
-    Map {
-      "blue-400" => "blue",
-      "blue-500" => "#3b82f6",
-      "red-400" => "red",
-      "red-500" => "#ef4444",
-    }
-  `)
-})
diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
deleted file mode 100644
index 8757520ee..000000000
--- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts
+++ /dev/null
@@ -1,303 +0,0 @@
-import type { DesignSystem } from '../design-system'
-import { ThemeOptions } from '../theme'
-import type { ResolvedConfig } from './config/types'
-
-function resolveThemeValue(value: unknown, subValue: string | null = null): string | null {
-  if (
-    Array.isArray(value) &&
-    value.length === 2 &&
-    typeof value[1] === 'object' &&
-    typeof value[1] !== null
-  ) {
-    return subValue ? (value[1][subValue] ?? null) : value[0]
-  } else if (Array.isArray(value) && subValue === null) {
-    return value.join(', ')
-  } else if (typeof value === 'string' && subValue === null) {
-    return value
-  }
-
-  return null
-}
-
-export function applyConfigToTheme(
-  designSystem: DesignSystem,
-  { theme }: ResolvedConfig,
-  replacedThemeKeys: Set<string>,
-) {
-  for (let replacedThemeKey of replacedThemeKeys) {
-    let name = keyPathToCssProperty([replacedThemeKey])
-    if (!name) continue
-
-    designSystem.theme.clearNamespace(`--${name}`, ThemeOptions.DEFAULT)
-  }
-
-  for (let [path, value] of themeableValues(theme)) {
-    if (typeof value !== 'string' && typeof value !== 'number') {
-      continue
-    }
-
-    // Replace `<alpha-value>` with `1`
-    if (typeof value === 'string') {
-      value = value.replace(/<alpha-value>/g, '1')
-    }
-
-    // Convert `opacity` namespace from decimal to percentage values
-    if (path[0] === 'opacity' && (typeof value === 'number' || typeof value === 'string')) {
-      let numValue = typeof value === 'string' ? parseFloat(value) : value
-
-      if (numValue >= 0 && numValue <= 1) {
-        value = numValue * 100 + '%'
-      }
-    }
-
-    let name = keyPathToCssProperty(path)
-    if (!name) continue
-
-    designSystem.theme.add(
-      `--${name}`,
-      '' + value,
-      ThemeOptions.INLINE | ThemeOptions.REFERENCE | ThemeOptions.DEFAULT,
-    )
-  }
-
-  // If someone has updated `fontFamily.sans` or `fontFamily.mono` in a JS
-  // config, we need to make sure variables like `--default-font-family` and
-  // `--default-font-feature-settings` are updated to match those explicit
-  // values, because variables like `--font-family-sans` and
-  // `--font-family-sans--feature-settings` (which the `--default-font-*`
-  // variables reference) won't exist in the generated CSS.
-  if (Object.hasOwn(theme, 'fontFamily')) {
-    let options = ThemeOptions.INLINE | ThemeOptions.DEFAULT
-
-    // Replace `--default-font-*` with `fontFamily.sans` values
-    {
-      let fontFamily = resolveThemeValue(theme.fontFamily.sans)
-      if (fontFamily && designSystem.theme.hasDefault('--font-sans')) {
-        designSystem.theme.add('--default-font-family', fontFamily, options)
-        designSystem.theme.add(
-          '--default-font-feature-settings',
-          resolveThemeValue(theme.fontFamily.sans, 'fontFeatureSettings') ?? 'normal',
-          options,
-        )
-        designSystem.theme.add(
-          '--default-font-variation-settings',
-          resolveThemeValue(theme.fontFamily.sans, 'fontVariationSettings') ?? 'normal',
-          options,
-        )
-      }
-    }
-
-    // Replace `--default-mono-font-*` with `fontFamily.mono` values
-    {
-      let fontFamily = resolveThemeValue(theme.fontFamily.mono)
-      if (fontFamily && designSystem.theme.hasDefault('--font-mono')) {
-        designSystem.theme.add('--default-mono-font-family', fontFamily, options)
-        designSystem.theme.add(
-          '--default-mono-font-feature-settings',
-          resolveThemeValue(theme.fontFamily.mono, 'fontFeatureSettings') ?? 'normal',
-          options,
-        )
-        designSystem.theme.add(
-          '--default-mono-font-variation-settings',
-          resolveThemeValue(theme.fontFamily.mono, 'fontVariationSettings') ?? 'normal',
-          options,
-        )
-      }
-    }
-  }
-
-  return theme
-}
-
-export function themeableValues(config: ResolvedConfig['theme']): [string[], unknown][] {
-  let toAdd: [string[], unknown][] = []
-
-  walk(config as any, [], (value, path) => {
-    if (isValidThemePrimitive(value)) {
-      toAdd.push([path, value])
-
-      return WalkAction.Skip
-    }
-
-    if (isValidThemeTuple(value)) {
-      toAdd.push([path, value[0]])
-
-      for (let key of Reflect.ownKeys(value[1]) as string[]) {
-        toAdd.push([[...path, `-${key}`], value[1][key]])
-      }
-
-      return WalkAction.Skip
-    }
-
-    if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
-      if (path[0] === 'fontSize') {
-        toAdd.push([path, value[0]])
-
-        if (value.length >= 2) {
-          toAdd.push([[...path, '-line-height'], value[1]])
-        }
-      } else {
-        toAdd.push([path, value.join(', ')])
-      }
-
-      return WalkAction.Skip
-    }
-  })
-
-  return toAdd
-}
-
-const SPECIAL_DEFAULT_KEYS: Record<string, string> = {
-  borderWidth: 'border-width',
-  outlineWidth: 'outline-width',
-  ringColor: 'ring-color',
-  ringWidth: 'ring-width',
-  transitionDuration: 'transition-duration',
-  transitionTimingFunction: 'transition-timing-function',
-}
-
-const OLD_TO_NEW_NAMESPACE: Record<string, string> = {
-  animation: 'animate',
-  aspectRatio: 'aspect',
-  borderRadius: 'radius',
-  boxShadow: 'shadow',
-  colors: 'color',
-  containers: 'container',
-  fontFamily: 'font',
-  fontSize: 'text',
-  letterSpacing: 'tracking',
-  lineHeight: 'leading',
-  maxWidth: 'container',
-  screens: 'breakpoint',
-  transitionTimingFunction: 'ease',
-}
-
-const IS_VALID_KEY = /^[a-zA-Z0-9-_%/.]+$/
-
-export function keyPathToCssProperty(path: string[]) {
-  // In some special cases the `DEFAULT` key did not map to a "default" utility
-  // e.g. `ringColor.DEFAULT` wasn't *just* used for `ring`. It was used for
-  // all ring utilities as the color when one wasn't specified.
-  //
-  // We place these specialty values under the `--default-*` namespace to signal
-  // that they are defaults used by (potentially) multiple utilities.
-  let specialDefault = SPECIAL_DEFAULT_KEYS[path[0]]
-  if (specialDefault && path[1] === 'DEFAULT') return `default-${specialDefault}`
-
-  // The legacy container component config should not be included in the Theme
-  if (path[0] === 'container') return null
-
-  for (let part of path) {
-    if (!IS_VALID_KEY.test(part)) return null
-  }
-
-  // Map old v3 namespaces to new theme namespaces
-  let ns = OLD_TO_NEW_NAMESPACE[path[0]]
-  if (ns) {
-    path = path.slice()
-    path[0] = ns
-  }
-
-  return (
-    path
-      // [1] should move into the nested object tuple. To create the CSS variable
-      // name for this, we replace it with an empty string that will result in two
-      // subsequent dashes when joined.
-      //
-      // E.g.:
-      // - `fontSize.xs.1.lineHeight` -> `font-size-xs--line-height`
-      // - `spacing.1` -> `--spacing-1`
-      .map((path, idx, all) => (path === '1' && idx !== all.length - 1 ? '' : path))
-
-      // Resolve the key path to a CSS variable segment
-      .map((part, idx) => {
-        part = part.replaceAll('.', '_')
-
-        let shouldConvert =
-          // The first "namespace" part should be converted to kebab-case
-          // This converts things like backgroundColor to `background-color`
-          idx === 0 ||
-          // Any tuple nested key should be converted to kebab-case
-          // These are identified with a leading `-`
-          // e.g. `fontSize.xs.1.lineHeight` -> `font-size-xs--line-height`
-          part.startsWith('-') ||
-          // `lineHeight` is a bit of a special case in which it does not
-          // always begin with a leading `-` even when as a nested tuple key
-          part === 'lineHeight'
-
-        if (shouldConvert) {
-          part = part.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
-        }
-
-        return part
-      })
-
-      // Remove the `DEFAULT` key at the end of a path
-      // We're reading from CSS anyway so it'll be a string
-      .filter((part, index) => part !== 'DEFAULT' || index !== path.length - 1)
-      .join('-')
-  )
-}
-
-function isValidThemePrimitive(value: unknown) {
-  return typeof value === 'number' || typeof value === 'string'
-}
-
-function isValidThemeTuple(value: unknown): value is [string, Record<string, string | number>] {
-  // Check for tuple values of the form
-  // `[string, Record<string, string | number>]`
-  if (!Array.isArray(value)) return false
-  if (value.length !== 2) return false
-
-  // A string or number as the "value"
-  if (typeof value[0] !== 'string' && typeof value[0] !== 'number') return false
-
-  // An object as the nested theme values
-  if (value[1] === undefined || value[1] === null) return false
-  if (typeof value[1] !== 'object') return false
-
-  for (let key of Reflect.ownKeys(value[1])) {
-    if (typeof key !== 'string') return false
-    if (typeof value[1][key] !== 'string' && typeof value[1][key] !== 'number') return false
-  }
-
-  return true
-}
-
-const enum WalkAction {
-  /** Continue walking, which is the default */
-  Continue,
-
-  /** Skip visiting the children of this node */
-  Skip,
-
-  /** Stop the walk entirely */
-  Stop,
-}
-
-function walk(
-  obj: Record<string, unknown>,
-  path: string[] = [],
-  callback: (value: unknown, path: string[]) => WalkAction | void,
-) {
-  for (let key of Reflect.ownKeys(obj) as string[]) {
-    let value = obj[key]
-
-    if (value === undefined || value === null) {
-      continue
-    }
-
-    let keyPath = [...path, key]
-
-    let result = callback(value, keyPath) ?? WalkAction.Continue
-
-    if (result === WalkAction.Skip) continue
-    if (result === WalkAction.Stop) return WalkAction.Stop
-
-    if (!Array.isArray(value) && typeof value !== 'object') continue
-
-    if (walk(value as any, keyPath, callback) === WalkAction.Stop) {
-      return WalkAction.Stop
-    }
-  }
-}
diff --git a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts
deleted file mode 100644
index aed761fce..000000000
--- a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { expect, test } from 'vitest'
-import { atRule, decl, styleRule, toCss } from '../ast'
-import { buildDesignSystem } from '../design-system'
-import { Theme } from '../theme'
-import { applyKeyframesToTheme } from './apply-keyframes-to-theme'
-import { resolveConfig } from './config/resolve-config'
-
-test('keyframes can be merged into the theme', () => {
-  let theme = new Theme()
-  let design = buildDesignSystem(theme)
-
-  let { resolvedConfig } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          extend: {
-            keyframes: {
-              'fade-in': {
-                '0%': { opacity: '0' },
-                '100%': { opacity: '1' },
-              },
-              'fade-out': {
-                '0%': { opacity: '1' },
-                '100%': { opacity: '0' },
-              },
-            },
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-  applyKeyframesToTheme(design, resolvedConfig)
-
-  expect(toCss(design.theme.getKeyframes())).toMatchInlineSnapshot(`
-    "@keyframes fade-in {
-      0% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-    @keyframes fade-out {
-      0% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-    "
-  `)
-})
-
-test('will append to the default keyframes with new keyframes', () => {
-  let theme = new Theme()
-  let design = buildDesignSystem(theme)
-
-  theme.addKeyframes(
-    atRule('@keyframes', 'slide-in', [
-      styleRule('from', [decl('opacity', 'translateX(0%)')]),
-      styleRule('to', [decl('opacity', 'translateX(100%)')]),
-    ]),
-  )
-  theme.addKeyframes(
-    atRule('@keyframes', 'slide-out', [
-      styleRule('from', [decl('opacity', 'translateX(100%)')]),
-      styleRule('to', [decl('opacity', 'translateX(0%)')]),
-    ]),
-  )
-
-  let { resolvedConfig } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          keyframes: {
-            'fade-in': {
-              '0%': { opacity: '0' },
-              '100%': { opacity: '1' },
-            },
-          },
-          extend: {
-            keyframes: {
-              'fade-out': {
-                '0%': { opacity: '1' },
-                '100%': { opacity: '0' },
-              },
-            },
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-  applyKeyframesToTheme(design, resolvedConfig)
-
-  expect(toCss(design.theme.getKeyframes())).toMatchInlineSnapshot(`
-    "@keyframes slide-in {
-      from {
-        opacity: translateX(0%);
-      }
-      to {
-        opacity: translateX(100%);
-      }
-    }
-    @keyframes slide-out {
-      from {
-        opacity: translateX(100%);
-      }
-      to {
-        opacity: translateX(0%);
-      }
-    }
-    @keyframes fade-in {
-      0% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-    @keyframes fade-out {
-      0% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts b/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts
deleted file mode 100644
index d5855545f..000000000
--- a/packages/tailwindcss/src/compat/apply-keyframes-to-theme.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { atRule, type AtRule } from '../ast'
-import type { DesignSystem } from '../design-system'
-import type { ResolvedConfig } from './config/types'
-import { objectToAst } from './plugin-api'
-
-export function applyKeyframesToTheme(
-  designSystem: DesignSystem,
-  resolvedConfig: Pick<ResolvedConfig, 'theme'>,
-) {
-  for (let rule of keyframesToRules(resolvedConfig)) {
-    designSystem.theme.addKeyframes(rule)
-  }
-}
-
-export function keyframesToRules(resolvedConfig: Pick<ResolvedConfig, 'theme'>): AtRule[] {
-  let rules: AtRule[] = []
-  if ('keyframes' in resolvedConfig.theme) {
-    for (let [name, keyframe] of Object.entries(resolvedConfig.theme.keyframes)) {
-      rules.push(atRule('@keyframes', name, objectToAst(keyframe as any)))
-    }
-  }
-  return rules
-}
diff --git a/packages/tailwindcss/src/compat/colors.cts b/packages/tailwindcss/src/compat/colors.cts
deleted file mode 100644
index 92cd2f66b..000000000
--- a/packages/tailwindcss/src/compat/colors.cts
+++ /dev/null
@@ -1,8 +0,0 @@
-import colors from './colors.ts'
-
-// This file exists so that `colors.ts` can be written one time but be
-// compatible with both CJS and ESM. Without it we get a `.default` export when
-// using `require` in CJS.
-
-// @ts-ignore
-export = colors
diff --git a/packages/tailwindcss/src/compat/colors.ts b/packages/tailwindcss/src/compat/colors.ts
deleted file mode 100644
index 64e3bc9c7..000000000
--- a/packages/tailwindcss/src/compat/colors.ts
+++ /dev/null
@@ -1,345 +0,0 @@
-export default {
-  inherit: 'inherit',
-  current: 'currentcolor',
-  transparent: 'transparent',
-  black: '#000',
-  white: '#fff',
-  slate: {
-    '50': 'oklch(98.4% 0.003 247.858)',
-    '100': 'oklch(96.8% 0.007 247.896)',
-    '200': 'oklch(92.9% 0.013 255.508)',
-    '300': 'oklch(86.9% 0.022 252.894)',
-    '400': 'oklch(70.4% 0.04 256.788)',
-    '500': 'oklch(55.4% 0.046 257.417)',
-    '600': 'oklch(44.6% 0.043 257.281)',
-    '700': 'oklch(37.2% 0.044 257.287)',
-    '800': 'oklch(27.9% 0.041 260.031)',
-    '900': 'oklch(20.8% 0.042 265.755)',
-    '950': 'oklch(12.9% 0.042 264.695)',
-  },
-  gray: {
-    '50': 'oklch(98.5% 0.002 247.839)',
-    '100': 'oklch(96.7% 0.003 264.542)',
-    '200': 'oklch(92.8% 0.006 264.531)',
-    '300': 'oklch(87.2% 0.01 258.338)',
-    '400': 'oklch(70.7% 0.022 261.325)',
-    '500': 'oklch(55.1% 0.027 264.364)',
-    '600': 'oklch(44.6% 0.03 256.802)',
-    '700': 'oklch(37.3% 0.034 259.733)',
-    '800': 'oklch(27.8% 0.033 256.848)',
-    '900': 'oklch(21% 0.034 264.665)',
-    '950': 'oklch(13% 0.028 261.692)',
-  },
-  zinc: {
-    '50': 'oklch(98.5% 0 none)',
-    '100': 'oklch(96.7% 0.001 286.375)',
-    '200': 'oklch(92% 0.004 286.32)',
-    '300': 'oklch(87.1% 0.006 286.286)',
-    '400': 'oklch(70.5% 0.015 286.067)',
-    '500': 'oklch(55.2% 0.016 285.938)',
-    '600': 'oklch(44.2% 0.017 285.786)',
-    '700': 'oklch(37% 0.013 285.805)',
-    '800': 'oklch(27.4% 0.006 286.033)',
-    '900': 'oklch(21% 0.006 285.885)',
-    '950': 'oklch(14.1% 0.005 285.823)',
-  },
-  neutral: {
-    '50': 'oklch(98.5% 0 none)',
-    '100': 'oklch(97% 0 none)',
-    '200': 'oklch(92.2% 0 none)',
-    '300': 'oklch(87% 0 none)',
-    '400': 'oklch(70.8% 0 none)',
-    '500': 'oklch(55.6% 0 none)',
-    '600': 'oklch(43.9% 0 none)',
-    '700': 'oklch(37.1% 0 none)',
-    '800': 'oklch(26.9% 0 none)',
-    '900': 'oklch(20.5% 0 none)',
-    '950': 'oklch(14.5% 0 none)',
-  },
-  stone: {
-    '50': 'oklch(98.5% 0.001 106.423)',
-    '100': 'oklch(97% 0.001 106.424)',
-    '200': 'oklch(92.3% 0.003 48.717)',
-    '300': 'oklch(86.9% 0.005 56.366)',
-    '400': 'oklch(70.9% 0.01 56.259)',
-    '500': 'oklch(55.3% 0.013 58.071)',
-    '600': 'oklch(44.4% 0.011 73.639)',
-    '700': 'oklch(37.4% 0.01 67.558)',
-    '800': 'oklch(26.8% 0.007 34.298)',
-    '900': 'oklch(21.6% 0.006 56.043)',
-    '950': 'oklch(14.7% 0.004 49.25)',
-  },
-  mauve: {
-    '50': 'oklch(98.5% 0 none)',
-    '100': 'oklch(96% 0.003 325.6)',
-    '200': 'oklch(92.2% 0.005 325.62)',
-    '300': 'oklch(86.5% 0.012 325.68)',
-    '400': 'oklch(71.1% 0.019 323.02)',
-    '500': 'oklch(54.2% 0.034 322.5)',
-    '600': 'oklch(43.5% 0.029 321.78)',
-    '700': 'oklch(36.4% 0.029 323.89)',
-    '800': 'oklch(26.3% 0.024 320.12)',
-    '900': 'oklch(21.2% 0.019 322.12)',
-    '950': 'oklch(14.5% 0.008 326)',
-  },
-  olive: {
-    '50': 'oklch(98.8% 0.003 106.5)',
-    '100': 'oklch(96.6% 0.005 106.5)',
-    '200': 'oklch(93% 0.007 106.5)',
-    '300': 'oklch(88% 0.011 106.6)',
-    '400': 'oklch(73.7% 0.021 106.9)',
-    '500': 'oklch(58% 0.031 107.3)',
-    '600': 'oklch(46.6% 0.025 107.3)',
-    '700': 'oklch(39.4% 0.023 107.4)',
-    '800': 'oklch(28.6% 0.016 107.4)',
-    '900': 'oklch(22.8% 0.013 107.4)',
-    '950': 'oklch(15.3% 0.006 107.1)',
-  },
-  mist: {
-    '50': 'oklch(98.7% 0.002 197.1)',
-    '100': 'oklch(96.3% 0.002 197.1)',
-    '200': 'oklch(92.5% 0.005 214.3)',
-    '300': 'oklch(87.2% 0.007 219.6)',
-    '400': 'oklch(72.3% 0.014 214.4)',
-    '500': 'oklch(56% 0.021 213.5)',
-    '600': 'oklch(45% 0.017 213.2)',
-    '700': 'oklch(37.8% 0.015 216)',
-    '800': 'oklch(27.5% 0.011 216.9)',
-    '900': 'oklch(21.8% 0.008 223.9)',
-    '950': 'oklch(14.8% 0.004 228.8)',
-  },
-  taupe: {
-    '50': 'oklch(98.6% 0.002 67.8)',
-    '100': 'oklch(96% 0.002 17.2)',
-    '200': 'oklch(92.2% 0.005 34.3)',
-    '300': 'oklch(86.8% 0.007 39.5)',
-    '400': 'oklch(71.4% 0.014 41.2)',
-    '500': 'oklch(54.7% 0.021 43.1)',
-    '600': 'oklch(43.8% 0.017 39.3)',
-    '700': 'oklch(36.7% 0.016 35.7)',
-    '800': 'oklch(26.8% 0.011 36.5)',
-    '900': 'oklch(21.4% 0.009 43.1)',
-    '950': 'oklch(14.7% 0.004 49.3)',
-  },
-  red: {
-    '50': 'oklch(97.1% 0.013 17.38)',
-    '100': 'oklch(93.6% 0.032 17.717)',
-    '200': 'oklch(88.5% 0.062 18.334)',
-    '300': 'oklch(80.8% 0.114 19.571)',
-    '400': 'oklch(70.4% 0.191 22.216)',
-    '500': 'oklch(63.7% 0.237 25.331)',
-    '600': 'oklch(57.7% 0.245 27.325)',
-    '700': 'oklch(50.5% 0.213 27.518)',
-    '800': 'oklch(44.4% 0.177 26.899)',
-    '900': 'oklch(39.6% 0.141 25.723)',
-    '950': 'oklch(25.8% 0.092 26.042)',
-  },
-  orange: {
-    '50': 'oklch(98% 0.016 73.684)',
-    '100': 'oklch(95.4% 0.038 75.164)',
-    '200': 'oklch(90.1% 0.076 70.697)',
-    '300': 'oklch(83.7% 0.128 66.29)',
-    '400': 'oklch(75% 0.183 55.934)',
-    '500': 'oklch(70.5% 0.213 47.604)',
-    '600': 'oklch(64.6% 0.222 41.116)',
-    '700': 'oklch(55.3% 0.195 38.402)',
-    '800': 'oklch(47% 0.157 37.304)',
-    '900': 'oklch(40.8% 0.123 38.172)',
-    '950': 'oklch(26.6% 0.079 36.259)',
-  },
-  amber: {
-    '50': 'oklch(98.7% 0.022 95.277)',
-    '100': 'oklch(96.2% 0.059 95.617)',
-    '200': 'oklch(92.4% 0.12 95.746)',
-    '300': 'oklch(87.9% 0.169 91.605)',
-    '400': 'oklch(82.8% 0.189 84.429)',
-    '500': 'oklch(76.9% 0.188 70.08)',
-    '600': 'oklch(66.6% 0.179 58.318)',
-    '700': 'oklch(55.5% 0.163 48.998)',
-    '800': 'oklch(47.3% 0.137 46.201)',
-    '900': 'oklch(41.4% 0.112 45.904)',
-    '950': 'oklch(27.9% 0.077 45.635)',
-  },
-  yellow: {
-    '50': 'oklch(98.7% 0.026 102.212)',
-    '100': 'oklch(97.3% 0.071 103.193)',
-    '200': 'oklch(94.5% 0.129 101.54)',
-    '300': 'oklch(90.5% 0.182 98.111)',
-    '400': 'oklch(85.2% 0.199 91.936)',
-    '500': 'oklch(79.5% 0.184 86.047)',
-    '600': 'oklch(68.1% 0.162 75.834)',
-    '700': 'oklch(55.4% 0.135 66.442)',
-    '800': 'oklch(47.6% 0.114 61.907)',
-    '900': 'oklch(42.1% 0.095 57.708)',
-    '950': 'oklch(28.6% 0.066 53.813)',
-  },
-  lime: {
-    '50': 'oklch(98.6% 0.031 120.757)',
-    '100': 'oklch(96.7% 0.067 122.328)',
-    '200': 'oklch(93.8% 0.127 124.321)',
-    '300': 'oklch(89.7% 0.196 126.665)',
-    '400': 'oklch(84.1% 0.238 128.85)',
-    '500': 'oklch(76.8% 0.233 130.85)',
-    '600': 'oklch(64.8% 0.2 131.684)',
-    '700': 'oklch(53.2% 0.157 131.589)',
-    '800': 'oklch(45.3% 0.124 130.933)',
-    '900': 'oklch(40.5% 0.101 131.063)',
-    '950': 'oklch(27.4% 0.072 132.109)',
-  },
-  green: {
-    '50': 'oklch(98.2% 0.018 155.826)',
-    '100': 'oklch(96.2% 0.044 156.743)',
-    '200': 'oklch(92.5% 0.084 155.995)',
-    '300': 'oklch(87.1% 0.15 154.449)',
-    '400': 'oklch(79.2% 0.209 151.711)',
-    '500': 'oklch(72.3% 0.219 149.579)',
-    '600': 'oklch(62.7% 0.194 149.214)',
-    '700': 'oklch(52.7% 0.154 150.069)',
-    '800': 'oklch(44.8% 0.119 151.328)',
-    '900': 'oklch(39.3% 0.095 152.535)',
-    '950': 'oklch(26.6% 0.065 152.934)',
-  },
-  emerald: {
-    '50': 'oklch(97.9% 0.021 166.113)',
-    '100': 'oklch(95% 0.052 163.051)',
-    '200': 'oklch(90.5% 0.093 164.15)',
-    '300': 'oklch(84.5% 0.143 164.978)',
-    '400': 'oklch(76.5% 0.177 163.223)',
-    '500': 'oklch(69.6% 0.17 162.48)',
-    '600': 'oklch(59.6% 0.145 163.225)',
-    '700': 'oklch(50.8% 0.118 165.612)',
-    '800': 'oklch(43.2% 0.095 166.913)',
-    '900': 'oklch(37.8% 0.077 168.94)',
-    '950': 'oklch(26.2% 0.051 172.552)',
-  },
-  teal: {
-    '50': 'oklch(98.4% 0.014 180.72)',
-    '100': 'oklch(95.3% 0.051 180.801)',
-    '200': 'oklch(91% 0.096 180.426)',
-    '300': 'oklch(85.5% 0.138 181.071)',
-    '400': 'oklch(77.7% 0.152 181.912)',
-    '500': 'oklch(70.4% 0.14 182.503)',
-    '600': 'oklch(60% 0.118 184.704)',
-    '700': 'oklch(51.1% 0.096 186.391)',
-    '800': 'oklch(43.7% 0.078 188.216)',
-    '900': 'oklch(38.6% 0.063 188.416)',
-    '950': 'oklch(27.7% 0.046 192.524)',
-  },
-  cyan: {
-    '50': 'oklch(98.4% 0.019 200.873)',
-    '100': 'oklch(95.6% 0.045 203.388)',
-    '200': 'oklch(91.7% 0.08 205.041)',
-    '300': 'oklch(86.5% 0.127 207.078)',
-    '400': 'oklch(78.9% 0.154 211.53)',
-    '500': 'oklch(71.5% 0.143 215.221)',
-    '600': 'oklch(60.9% 0.126 221.723)',
-    '700': 'oklch(52% 0.105 223.128)',
-    '800': 'oklch(45% 0.085 224.283)',
-    '900': 'oklch(39.8% 0.07 227.392)',
-    '950': 'oklch(30.2% 0.056 229.695)',
-  },
-  sky: {
-    '50': 'oklch(97.7% 0.013 236.62)',
-    '100': 'oklch(95.1% 0.026 236.824)',
-    '200': 'oklch(90.1% 0.058 230.902)',
-    '300': 'oklch(82.8% 0.111 230.318)',
-    '400': 'oklch(74.6% 0.16 232.661)',
-    '500': 'oklch(68.5% 0.169 237.323)',
-    '600': 'oklch(58.8% 0.158 241.966)',
-    '700': 'oklch(50% 0.134 242.749)',
-    '800': 'oklch(44.3% 0.11 240.79)',
-    '900': 'oklch(39.1% 0.09 240.876)',
-    '950': 'oklch(29.3% 0.066 243.157)',
-  },
-  blue: {
-    '50': 'oklch(97% 0.014 254.604)',
-    '100': 'oklch(93.2% 0.032 255.585)',
-    '200': 'oklch(88.2% 0.059 254.128)',
-    '300': 'oklch(80.9% 0.105 251.813)',
-    '400': 'oklch(70.7% 0.165 254.624)',
-    '500': 'oklch(62.3% 0.214 259.815)',
-    '600': 'oklch(54.6% 0.245 262.881)',
-    '700': 'oklch(48.8% 0.243 264.376)',
-    '800': 'oklch(42.4% 0.199 265.638)',
-    '900': 'oklch(37.9% 0.146 265.522)',
-    '950': 'oklch(28.2% 0.091 267.935)',
-  },
-  indigo: {
-    '50': 'oklch(96.2% 0.018 272.314)',
-    '100': 'oklch(93% 0.034 272.788)',
-    '200': 'oklch(87% 0.065 274.039)',
-    '300': 'oklch(78.5% 0.115 274.713)',
-    '400': 'oklch(67.3% 0.182 276.935)',
-    '500': 'oklch(58.5% 0.233 277.117)',
-    '600': 'oklch(51.1% 0.262 276.966)',
-    '700': 'oklch(45.7% 0.24 277.023)',
-    '800': 'oklch(39.8% 0.195 277.366)',
-    '900': 'oklch(35.9% 0.144 278.697)',
-    '950': 'oklch(25.7% 0.09 281.288)',
-  },
-  violet: {
-    '50': 'oklch(96.9% 0.016 293.756)',
-    '100': 'oklch(94.3% 0.029 294.588)',
-    '200': 'oklch(89.4% 0.057 293.283)',
-    '300': 'oklch(81.1% 0.111 293.571)',
-    '400': 'oklch(70.2% 0.183 293.541)',
-    '500': 'oklch(60.6% 0.25 292.717)',
-    '600': 'oklch(54.1% 0.281 293.009)',
-    '700': 'oklch(49.1% 0.27 292.581)',
-    '800': 'oklch(43.2% 0.232 292.759)',
-    '900': 'oklch(38% 0.189 293.745)',
-    '950': 'oklch(28.3% 0.141 291.089)',
-  },
-  purple: {
-    '50': 'oklch(97.7% 0.014 308.299)',
-    '100': 'oklch(94.6% 0.033 307.174)',
-    '200': 'oklch(90.2% 0.063 306.703)',
-    '300': 'oklch(82.7% 0.119 306.383)',
-    '400': 'oklch(71.4% 0.203 305.504)',
-    '500': 'oklch(62.7% 0.265 303.9)',
-    '600': 'oklch(55.8% 0.288 302.321)',
-    '700': 'oklch(49.6% 0.265 301.924)',
-    '800': 'oklch(43.8% 0.218 303.724)',
-    '900': 'oklch(38.1% 0.176 304.987)',
-    '950': 'oklch(29.1% 0.149 302.717)',
-  },
-  fuchsia: {
-    '50': 'oklch(97.7% 0.017 320.058)',
-    '100': 'oklch(95.2% 0.037 318.852)',
-    '200': 'oklch(90.3% 0.076 319.62)',
-    '300': 'oklch(83.3% 0.145 321.434)',
-    '400': 'oklch(74% 0.238 322.16)',
-    '500': 'oklch(66.7% 0.295 322.15)',
-    '600': 'oklch(59.1% 0.293 322.896)',
-    '700': 'oklch(51.8% 0.253 323.949)',
-    '800': 'oklch(45.2% 0.211 324.591)',
-    '900': 'oklch(40.1% 0.17 325.612)',
-    '950': 'oklch(29.3% 0.136 325.661)',
-  },
-  pink: {
-    '50': 'oklch(97.1% 0.014 343.198)',
-    '100': 'oklch(94.8% 0.028 342.258)',
-    '200': 'oklch(89.9% 0.061 343.231)',
-    '300': 'oklch(82.3% 0.12 346.018)',
-    '400': 'oklch(71.8% 0.202 349.761)',
-    '500': 'oklch(65.6% 0.241 354.308)',
-    '600': 'oklch(59.2% 0.249 0.584)',
-    '700': 'oklch(52.5% 0.223 3.958)',
-    '800': 'oklch(45.9% 0.187 3.815)',
-    '900': 'oklch(40.8% 0.153 2.432)',
-    '950': 'oklch(28.4% 0.109 3.907)',
-  },
-  rose: {
-    '50': 'oklch(96.9% 0.015 12.422)',
-    '100': 'oklch(94.1% 0.03 12.58)',
-    '200': 'oklch(89.2% 0.058 10.001)',
-    '300': 'oklch(81% 0.117 11.638)',
-    '400': 'oklch(71.2% 0.194 13.428)',
-    '500': 'oklch(64.5% 0.246 16.439)',
-    '600': 'oklch(58.6% 0.253 17.585)',
-    '700': 'oklch(51.4% 0.222 16.935)',
-    '800': 'oklch(45.5% 0.188 13.697)',
-    '900': 'oklch(41% 0.159 10.272)',
-    '950': 'oklch(27.1% 0.105 12.094)',
-  },
-}
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
deleted file mode 100644
index 1f69ae446..000000000
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ /dev/null
@@ -1,1849 +0,0 @@
-import { describe, expect, test, vi } from 'vitest'
-import { compile, type Config } from '..'
-import { default as plugin } from '../plugin'
-import { compileCss, run } from '../test-utils/run'
-import flattenColorPalette from './flatten-color-palette'
-
-const css = String.raw
-
-test('Config files can add content', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let compiler = await compile(input, {
-    loadModule: async () => ({ module: { content: ['./file.txt'] }, base: '/root', path: '' }),
-  })
-
-  expect(compiler.sources).toEqual([{ base: '/root', pattern: './file.txt', negated: false }])
-})
-
-test('Config files can change dark mode (media)', async () => {
-  expect(
-    await run(
-      ['dark:underline'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-      `,
-      {
-        loadModule: async () => ({ module: { darkMode: 'media' }, base: '/root', path: '' }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media (prefers-color-scheme: dark) {
-      .dark\\:underline {
-        text-decoration-line: underline;
-      }
-    }
-    "
-  `)
-})
-
-test('Config files can change dark mode (selector)', async () => {
-  expect(
-    await run(
-      ['dark:underline'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-      `,
-      {
-        loadModule: async () => ({ module: { darkMode: 'selector' }, base: '/root', path: '' }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .dark\\:underline:where(.dark, .dark *) {
-      text-decoration-line: underline;
-    }
-    "
-  `)
-})
-
-test('Config files can change dark mode (variant)', async () => {
-  expect(
-    await run(
-      ['dark:underline'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-      `,
-      {
-        loadModule: async () => ({
-          module: { darkMode: ['variant', '&:where(:not(.light))'] },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .dark\\:underline:where(:not(.light)) {
-      text-decoration-line: underline;
-    }
-    "
-  `)
-})
-
-test('Config files can add plugins', async () => {
-  expect(
-    await run(
-      ['no-scrollbar'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            plugins: [
-              plugin(function ({ addUtilities }) {
-                addUtilities({
-                  '.no-scrollbar': {
-                    'scrollbar-width': 'none',
-                  },
-                })
-              }),
-            ],
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .no-scrollbar {
-      scrollbar-width: none;
-    }
-    "
-  `)
-})
-
-test('Plugins loaded from config files can contribute to the config', async () => {
-  expect(
-    await run(
-      ['dark:underline'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            plugins: [
-              plugin(() => {}, {
-                darkMode: ['variant', '&:where(:not(.light))'],
-              }),
-            ],
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .dark\\:underline:where(:not(.light)) {
-      text-decoration-line: underline;
-    }
-    "
-  `)
-})
-
-test('Config file presets can contribute to the config', async () => {
-  expect(
-    await run(
-      ['dark:underline'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-      `,
-      {
-        loadModule: async () => ({
-          module: { presets: [{ darkMode: ['variant', '&:where(:not(.light))'] }] },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .dark\\:underline:where(:not(.light)) {
-      text-decoration-line: underline;
-    }
-    "
-  `)
-})
-
-test('Config files can affect the theme', async () => {
-  expect(
-    await run(
-      ['bg-primary', 'scrollbar-primary'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              extend: {
-                colors: {
-                  primary: '#c0ffee',
-                },
-              },
-            },
-
-            plugins: [
-              plugin(function ({ addUtilities, theme }) {
-                addUtilities({
-                  '.scrollbar-primary': {
-                    scrollbarColor: theme('colors.primary'),
-                  },
-                })
-              }),
-            ],
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .scrollbar-primary {
-      scrollbar-color: #c0ffee;
-    }
-
-    .bg-primary {
-      background-color: #c0ffee;
-    }
-    "
-  `)
-})
-
-// https://github.com/tailwindlabs/tailwindcss/issues/19091
-test('Accessing a default color if a sub-color exists via CSS should work as expected', async () => {
-  expect(
-    await compileCss(
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-
-        .example {
-          color: theme('colors.foo-bar');
-          border-color: theme('colors.foo');
-        }
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              // Internally this object gets converted to something like:
-              // ```
-              // {
-              //   foo: { DEFAULT: 'var(--foo-foo)', bar: 'var(--foo-foo-bar)' },
-              // }
-              // ```
-              colors: {
-                foo: 'var(--foo-foo)',
-                'foo-bar': 'var(--foo-foo-bar)',
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .example {
-      color: var(--foo-foo-bar);
-      border-color: var(--foo-foo);
-    }
-    "
-  `)
-})
-
-test('Variants in CSS overwrite variants from plugins', async () => {
-  expect(
-    await run(
-      ['dark:underline', 'light:underline'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-        @custom-variant dark (&:is(.my-dark));
-        @custom-variant light (&:is(.my-light));
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            darkMode: ['variant', '&:is(.dark)'],
-            plugins: [
-              plugin(function ({ addVariant }) {
-                addVariant('light', '&:is(.light)')
-              }),
-            ],
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .dark\\:underline.my-dark, .light\\:underline.my-light {
-      text-decoration-line: underline;
-    }
-    "
-  `)
-})
-
-describe('theme callbacks', () => {
-  test('tuple values from the config overwrite `@theme default` tuple-ish values from the CSS theme', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['leading-base', 'leading-md', 'leading-xl', 'prose'],
-        css`
-          @theme default {
-            --text-base: 0rem;
-            --text-base--line-height: 1rem;
-            --text-md: 0rem;
-            --text-md--line-height: 1rem;
-            --text-xl: 0rem;
-            --text-xl--line-height: 1rem;
-          }
-          @theme {
-            --text-base: 100rem;
-            --text-md--line-height: 101rem;
-          }
-          @tailwind utilities;
-          @config "./config.js";
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                extend: {
-                  fontSize: {
-                    base: ['200rem', { lineHeight: '201rem' }],
-                    md: ['200rem', { lineHeight: '201rem' }],
-                    xl: ['200rem', { lineHeight: '201rem' }],
-                  },
-
-                  // Direct access
-                  lineHeight: ({ theme }) => ({
-                    base: theme('fontSize.base[1].lineHeight'),
-                    md: theme('fontSize.md[1].lineHeight'),
-                    xl: theme('fontSize.xl[1].lineHeight'),
-                  }),
-
-                  // Tuple access
-                  typography: ({ theme }) => ({
-                    '[class~=lead-base]': {
-                      fontSize: theme('fontSize.base')[0],
-                      ...theme('fontSize.base')[1],
-                    },
-                    '[class~=lead-md]': {
-                      fontSize: theme('fontSize.md')[0],
-                      ...theme('fontSize.md')[1],
-                    },
-                    '[class~=lead-xl]': {
-                      fontSize: theme('fontSize.xl')[0],
-                      ...theme('fontSize.xl')[1],
-                    },
-                  }),
-                },
-              },
-
-              plugins: [
-                plugin(function ({ addUtilities, theme }) {
-                  addUtilities({
-                    '.prose': {
-                      ...theme('typography'),
-                    },
-                  })
-                }),
-              ],
-            } satisfies Config,
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-leading: initial;
-          }
-        }
-      }
-
-      .prose [class~="lead-base"] {
-        font-size: 100rem;
-        line-height: 201rem;
-      }
-
-      .prose [class~="lead-md"] {
-        font-size: 200rem;
-        line-height: 101rem;
-      }
-
-      .prose [class~="lead-xl"] {
-        font-size: 200rem;
-        line-height: 201rem;
-      }
-
-      .leading-base {
-        --tw-leading: 201rem;
-        line-height: 201rem;
-      }
-
-      .leading-md {
-        --tw-leading: 101rem;
-        line-height: 101rem;
-      }
-
-      .leading-xl {
-        --tw-leading: 201rem;
-        line-height: 201rem;
-      }
-
-      @property --tw-leading {
-        syntax: "*";
-        inherits: false
-      }
-      "
-    `)
-  })
-})
-
-describe('theme overrides order', () => {
-  test('user theme > js config > default theme', async () => {
-    expect(
-      await run(
-        ['bg-red', 'bg-blue'],
-        css`
-          @theme default {
-            --color-red: red;
-          }
-          @theme {
-            --color-blue: blue;
-          }
-          @tailwind utilities;
-          @config "./config.js";
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                extend: {
-                  colors: {
-                    red: 'very-red',
-                    blue: 'very-blue',
-                  },
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-blue: blue;
-      }
-
-      .bg-blue {
-        background-color: var(--color-blue);
-      }
-
-      .bg-red {
-        background-color: very-red;
-      }
-      "
-    `)
-  })
-
-  test('user theme > js config > default theme (with nested object)', async () => {
-    expect(
-      await run(
-        [
-          'bg-slate-100',
-          'bg-slate-200',
-          'bg-slate-300',
-          'bg-slate-400',
-          'bg-slate-500',
-          'bg-slate-600',
-          'hover-bg-slate-100',
-          'hover-bg-slate-200',
-          'hover-bg-slate-300',
-          'hover-bg-slate-400',
-          'hover-bg-slate-500',
-          'hover-bg-slate-600',
-        ],
-        css`
-          @theme default {
-            --color-slate-100: #000100;
-            --color-slate-200: #000200;
-            --color-slate-300: #000300;
-          }
-          @theme {
-            --color-slate-400: #100400;
-            --color-slate-500: #100500;
-          }
-          @tailwind utilities;
-          @config "./config.js";
-          @plugin "./plugin.js";
-        `,
-        {
-          loadModule: async (id) => {
-            if (id.includes('config.js')) {
-              return {
-                module: {
-                  theme: {
-                    extend: {
-                      colors: {
-                        slate: {
-                          200: '#200200',
-                          400: '#200400',
-                          600: '#200600',
-                        },
-                      },
-                    },
-                  },
-                } satisfies Config,
-                base: '/root',
-                path: '',
-              }
-            } else {
-              return {
-                module: plugin(({ matchUtilities, theme }) => {
-                  matchUtilities(
-                    {
-                      'hover-bg': (value) => {
-                        return {
-                          '&:hover': {
-                            backgroundColor: value,
-                          },
-                        }
-                      },
-                    },
-                    { values: flattenColorPalette(theme('colors')) },
-                  )
-                }),
-                base: '/root',
-                path: '',
-              }
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-slate-100: #000100;
-        --color-slate-300: #000300;
-        --color-slate-400: #100400;
-        --color-slate-500: #100500;
-      }
-
-      .bg-slate-100 {
-        background-color: var(--color-slate-100);
-      }
-
-      .bg-slate-200 {
-        background-color: #200200;
-      }
-
-      .bg-slate-300 {
-        background-color: var(--color-slate-300);
-      }
-
-      .bg-slate-400 {
-        background-color: var(--color-slate-400);
-      }
-
-      .bg-slate-500 {
-        background-color: var(--color-slate-500);
-      }
-
-      .bg-slate-600 {
-        background-color: #200600;
-      }
-
-      .hover-bg-slate-100:hover {
-        background-color: #000100;
-      }
-
-      .hover-bg-slate-200:hover {
-        background-color: #200200;
-      }
-
-      .hover-bg-slate-300:hover {
-        background-color: #000300;
-      }
-
-      .hover-bg-slate-400:hover {
-        background-color: #100400;
-      }
-
-      .hover-bg-slate-500:hover {
-        background-color: #100500;
-      }
-
-      .hover-bg-slate-600:hover {
-        background-color: #200600;
-      }
-      "
-    `)
-  })
-})
-
-describe('default font family compatibility', () => {
-  test('overriding `fontFamily.sans` sets `--default-font-family`', async () => {
-    expect(
-      await run(
-        ['font-sans'],
-        css`
-          @theme default {
-            --default-font-family: var(--font-family-sans);
-            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  sans: 'Potato Sans',
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-sans {
-        font-family: Potato Sans;
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFamily.sans[1].fontFeatureSettings` sets `--default-font-feature-settings`', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-sans'],
-        css`
-          @theme default {
-            --default-font-family: var(--font-family-sans);
-            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  sans: ['Potato Sans', { fontFeatureSettings: '"cv06"' }],
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-sans {
-        font-feature-settings: "cv06";
-        font-family: Potato Sans;
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFamily.sans[1].fontVariationSettings` sets `--default-font-variation-settings`', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-sans'],
-        css`
-          @theme default {
-            --default-font-family: var(--font-family-sans);
-            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  sans: ['Potato Sans', { fontVariationSettings: '"XHGT" 0.7' }],
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-sans {
-        font-variation-settings: "XHGT" .7;
-        font-family: Potato Sans;
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFeatureSettings` and `fontVariationSettings` for `fontFamily.sans` sets `--default-font-feature-settings` and `--default-font-variation-settings`', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-sans'],
-        css`
-          @theme default {
-            --default-font-family: var(--font-family-sans);
-            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  sans: [
-                    'Potato Sans',
-                    { fontFeatureSettings: '"cv06"', fontVariationSettings: '"XHGT" 0.7' },
-                  ],
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-sans {
-        font-feature-settings: "cv06";
-        font-variation-settings: "XHGT" .7;
-        font-family: Potato Sans;
-      }
-      "
-    `)
-  })
-
-  test('overriding `--font-family-sans` in `@theme` without `default` preserves the original `--default-font-*` values', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-sans'],
-        css`
-          @theme default {
-            --default-font-family: var(--font-family-sans);
-            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-          }
-          @config "./config.js";
-          @theme {
-            --font-sans: Sandwich Sans;
-          }
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  sans: 'Potato Sans',
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --font-sans: Sandwich Sans;
-      }
-
-      .font-sans {
-        font-family: var(--font-sans);
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFamily.sans` in a config file with an array sets `--default-font-family`', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-sans'],
-        css`
-          @theme default {
-            --default-font-family: var(--font-family-sans);
-            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  sans: ['Inter', 'system-ui', 'sans-serif'],
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-sans {
-        font-family: Inter, system-ui, sans-serif;
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFamily.sans` in a config file with an unexpected type is ignored', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-sans'],
-        css`
-          @theme default {
-            --default-font-family: var(--font-family-sans);
-            --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-            --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  sans: { foo: 'bar', banana: 'sandwich' },
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toEqual('')
-  })
-
-  test('overriding `fontFamily.mono` sets `--default-mono-font-family`', async () => {
-    expect(
-      await run(
-        ['font-mono'],
-        css`
-          @theme default {
-            --default-mono-font-family: var(--font-family-mono);
-            --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-            --default-mono-font-variation-settings: var(
-              --font-family-mono--font-variation-settings
-            );
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  mono: 'Potato Mono',
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-mono {
-        font-family: Potato Mono;
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFamily.mono[1].fontFeatureSettings` sets `--default-mono-font-feature-settings`', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-mono'],
-        css`
-          @theme default {
-            --default-mono-font-family: var(--font-family-mono);
-            --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-            --default-mono-font-variation-settings: var(
-              --font-family-mono--font-variation-settings
-            );
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  mono: ['Potato Mono', { fontFeatureSettings: '"cv06"' }],
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-mono {
-        font-feature-settings: "cv06";
-        font-family: Potato Mono;
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFamily.mono[1].fontVariationSettings` sets `--default-mono-font-variation-settings`', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-mono'],
-        css`
-          @theme default {
-            --default-mono-font-family: var(--font-family-mono);
-            --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-            --default-mono-font-variation-settings: var(
-              --font-family-mono--font-variation-settings
-            );
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  mono: ['Potato Mono', { fontVariationSettings: '"XHGT" 0.7' }],
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-mono {
-        font-variation-settings: "XHGT" .7;
-        font-family: Potato Mono;
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFeatureSettings` and `fontVariationSettings` for `fontFamily.mono` sets `--default-mono-font-feature-settings` and `--default-mono-font-variation-settings`', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-mono'],
-        css`
-          @theme default {
-            --default-mono-font-family: var(--font-mono);
-            --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
-            --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  mono: [
-                    'Potato Mono',
-                    { fontFeatureSettings: '"cv06"', fontVariationSettings: '"XHGT" 0.7' },
-                  ],
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .font-mono {
-        font-feature-settings: "cv06";
-        font-variation-settings: "XHGT" .7;
-        font-family: Potato Mono;
-      }
-      "
-    `)
-  })
-
-  test('overriding `--font-family-mono` in `@theme` without `default` preserves the original `--default-mono-font-*` values', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-mono'],
-        css`
-          @theme default {
-            --default-mono-font-family: var(--font-mono);
-            --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
-            --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
-          }
-          @config "./config.js";
-          @theme {
-            --font-mono: Sandwich Mono;
-          }
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  mono: 'Potato Mono',
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --font-mono: Sandwich Mono;
-      }
-
-      .font-mono {
-        font-family: var(--font-mono);
-      }
-      "
-    `)
-  })
-
-  test('overriding `fontFamily.mono` in a config file with an unexpected type is ignored', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['font-mono'],
-        css`
-          @theme default {
-            --default-mono-font-family: var(--font-family-mono);
-            --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-            --default-mono-font-variation-settings: var(
-              --font-family-mono--font-variation-settings
-            );
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                fontFamily: {
-                  mono: { foo: 'bar', banana: 'sandwich' },
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toEqual('')
-  })
-})
-
-test('creates variants for `data`, `supports`, and `aria` theme options at the same level as the core utility ', async () => {
-  expect(
-    await run(
-      [
-        'aria-polite:underline',
-        'supports-child-combinator:underline',
-        'supports-foo:underline',
-        'data-checked:underline',
-
-        // Ensure core variants still work
-        'aria-hidden:flex',
-        'supports-grid:flex',
-        'data-foo:flex',
-
-        // The `print` variant should still be sorted last, even after registering
-        // the other custom variants.
-        'print:flex',
-      ],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              extend: {
-                aria: {
-                  polite: 'live="polite"',
-                },
-                supports: {
-                  'child-combinator': 'selector(h2 > p)',
-                  foo: 'bar',
-                },
-                data: {
-                  checked: 'ui~="checked"',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .aria-hidden\\:flex[aria-hidden="true"] {
-      display: flex;
-    }
-
-    .aria-polite\\:underline[aria-live="polite"], .data-checked\\:underline[data-ui~="checked"] {
-      text-decoration-line: underline;
-    }
-
-    .data-foo\\:flex[data-foo] {
-      display: flex;
-    }
-
-    @supports selector(h2 > p) {
-      .supports-child-combinator\\:underline {
-        text-decoration-line: underline;
-      }
-    }
-
-    @supports (bar: var(--tw)) {
-      .supports-foo\\:underline {
-        text-decoration-line: underline;
-      }
-    }
-
-    @supports (grid: var(--tw)) {
-      .supports-grid\\:flex {
-        display: flex;
-      }
-    }
-
-    @media print {
-      .print\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('merges css breakpoints with js config screens', async () => {
-  expect(
-    await run(
-      ['sm:flex', 'md:flex', 'lg:flex', 'min-sm:max-md:underline'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @theme {
-          --breakpoint-md: 50rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              extend: {
-                screens: {
-                  sm: '44rem',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 44rem) {
-      .sm\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 50rem) {
-        .min-sm\\:max-md\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 50rem) {
-      .md\\:flex {
-        display: flex;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .lg\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('utilities must be prefixed', async () => {
-  let input = css`
-    @tailwind utilities;
-    @config "./config.js";
-
-    @utility custom {
-      color: red;
-    }
-  `
-
-  let options: Partial<Parameters<typeof compile>[1]> = {
-    loadModule: async (_id, base) => ({
-      path: '',
-      base,
-      module: { prefix: 'tw' },
-    }),
-  }
-
-  // Prefixed utilities are generated
-  expect(await run(['tw:underline', 'tw:hover:line-through', 'tw:custom'], input, options))
-    .toMatchInlineSnapshot(`
-      "
-      .tw\\:custom {
-        color: red;
-      }
-
-      .tw\\:underline {
-        text-decoration-line: underline;
-      }
-
-      @media (hover: hover) {
-        .tw\\:hover\\:line-through:hover {
-          text-decoration-line: line-through;
-        }
-      }
-      "
-    `)
-
-  // Non-prefixed utilities are ignored
-  expect(await run(['underline', 'hover:line-through', 'custom'], input, options)).toEqual('')
-})
-
-test('utilities used in @apply must be prefixed', async () => {
-  // Prefixed utilities are generated
-  expect(
-    await compileCss(
-      css`
-        @config "./config.js";
-
-        .my-underline {
-          @apply tw:underline;
-        }
-      `,
-      {
-        loadModule: async (_id, base) => ({
-          path: '',
-          base,
-          module: { prefix: 'tw' },
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .my-underline {
-      text-decoration-line: underline;
-    }
-    "
-  `)
-
-  // Non-prefixed utilities cause an error
-  await expect(
-    compile(
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-
-        .my-underline {
-          @apply underline;
-        }
-      `,
-      {
-        loadModule: async (_id, base) => ({
-          path: '',
-          base,
-          module: { prefix: 'tw' },
-        }),
-      },
-    ),
-  ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `[Error: Cannot apply unprefixed utility class \`underline\`. Did you mean \`tw:underline\`?]`,
-  )
-})
-
-test('Prefixes configured in CSS take precedence over those defined in JS configs', async () => {
-  expect(
-    await run(
-      ['wat:custom'],
-      css`
-        @theme prefix(wat) {
-          --color-red: #f00;
-          --color-green: #0f0;
-          --breakpoint-sm: 640px;
-        }
-
-        @config "./plugin.js";
-
-        @tailwind utilities;
-
-        @utility custom {
-          color: red;
-        }
-      `,
-      {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: { prefix: 'tw' },
-          }
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .wat\\:custom {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('a prefix must be letters only', async () => {
-  await expect(() =>
-    compile(
-      css`
-        @config "./plugin.js";
-      `,
-      {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: { prefix: '__' },
-          }
-        },
-      },
-    ),
-  ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `[Error: The prefix "__" is invalid. Prefixes must be lowercase ASCII letters (a-z) only.]`,
-  )
-})
-
-test('important: `#app`', async () => {
-  expect(
-    await run(
-      ['underline', 'hover:line-through', 'custom'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-
-        @utility custom {
-          color: red;
-        }
-      `,
-      {
-        loadModule: async (_id, base) => ({
-          path: '',
-          base,
-          module: { important: '#app' },
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    #app .custom {
-      color: red;
-    }
-
-    #app .underline {
-      text-decoration-line: underline;
-    }
-
-    @media (hover: hover) {
-      #app .hover\\:line-through:hover {
-        text-decoration-line: line-through;
-      }
-    }
-    "
-  `)
-})
-
-test('important: true', async () => {
-  expect(
-    await run(
-      ['underline', 'hover:line-through', 'custom'],
-      css`
-        @tailwind utilities;
-        @config "./config.js";
-
-        @utility custom {
-          color: red;
-        }
-      `,
-      {
-        loadModule: async (_id, base) => ({
-          path: '',
-          base,
-          module: { important: true },
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .custom {
-      color: red !important;
-    }
-
-    .underline {
-      text-decoration-line: underline !important;
-    }
-
-    @media (hover: hover) {
-      .hover\\:line-through:hover {
-        text-decoration-line: line-through !important;
-      }
-    }
-    "
-  `)
-})
-
-test('blocklisted candidates are not generated', async () => {
-  let input = css`
-    @theme reference {
-      --color-white: #fff;
-      --breakpoint-md: 48rem;
-    }
-    @tailwind utilities;
-    @config "./config.js";
-  `
-
-  let options: Partial<Parameters<typeof compile>[1]> = {
-    async loadModule(_id, base) {
-      return {
-        path: '',
-        base,
-        module: {
-          blocklist: ['bg-white'],
-        },
-      }
-    },
-  }
-
-  // bg-white will not get generated
-  expect(await run(['bg-white'], input, options)).toEqual('')
-
-  // underline will as will md:bg-white
-  expect(await run(['underline', 'bg-white', 'md:bg-white'], input, options))
-    .toMatchInlineSnapshot(`
-      "
-      .underline {
-        text-decoration-line: underline;
-      }
-
-      @media (min-width: 48rem) {
-        .md\\:bg-white {
-          background-color: var(--color-white, #fff);
-        }
-      }
-      "
-    `)
-})
-
-test('blocklisted candidates cannot be used with `@apply`', async () => {
-  await expect(
-    compile(
-      css`
-        @theme reference {
-          --color-white: #fff;
-          --breakpoint-md: 48rem;
-        }
-        @tailwind utilities;
-        @config "./config.js";
-        .foo {
-          @apply bg-white;
-        }
-      `,
-      {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: {
-              blocklist: ['bg-white'],
-            },
-          }
-        },
-      },
-    ),
-  ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `[Error: Cannot apply utility class \`bg-white\` because it has been explicitly disabled: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-excluding-classes]`,
-  )
-})
-
-test('old theme values are merged with their renamed counterparts in the CSS theme', async () => {
-  using didCallPluginFn = vi.fn()
-
-  await compile(
-    css`
-      @theme reference {
-        --breakpoint-a: 1;
-        --breakpoint-b: 2;
-
-        --color-a: 1;
-        --color-b: 2;
-
-        --radius-a: 1;
-        --radius-b: 2;
-
-        --shadow-a: 1;
-        --shadow-b: 2;
-
-        --animate-a: 1;
-        --animate-b: 2;
-
-        --aspect-a: 1;
-        --aspect-b: 2;
-
-        --container-a: 1;
-        --container-b: 2;
-
-        --tracking-a: 1;
-        --tracking-b: 2;
-
-        --leading-a: 1;
-        --leading-b: 2;
-      }
-
-      @plugin "./plugin.js";
-    `,
-    {
-      async loadModule(_id, base) {
-        return {
-          path: '',
-          base,
-          module: plugin(function ({ theme }) {
-            didCallPluginFn()
-
-            expect(theme('screens')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-
-            expect(theme('screens.a')).toEqual('1')
-            expect(theme('screens.b')).toEqual('2')
-
-            expect(theme('colors')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-
-            expect(theme('colors.a')).toEqual('1')
-            expect(theme('colors.b')).toEqual('2')
-
-            expect(theme('borderRadius')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-
-            expect(theme('borderRadius.a')).toEqual('1')
-            expect(theme('borderRadius.b')).toEqual('2')
-
-            expect(theme('animation')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-
-            expect(theme('animation.a')).toEqual('1')
-            expect(theme('animation.b')).toEqual('2')
-
-            expect(theme('aspectRatio')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-
-            expect(theme('aspectRatio.a')).toEqual('1')
-            expect(theme('aspectRatio.b')).toEqual('2')
-
-            expect(theme('boxShadow')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-
-            expect(theme('boxShadow.a')).toEqual('1')
-            expect(theme('boxShadow.b')).toEqual('2')
-
-            expect(theme('maxWidth')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-
-            expect(theme('maxWidth.a')).toEqual('1')
-            expect(theme('maxWidth.b')).toEqual('2')
-
-            expect(theme('letterSpacing.a')).toEqual('1')
-            expect(theme('letterSpacing.b')).toEqual('2')
-
-            expect(theme('letterSpacing')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-
-            expect(theme('lineHeight.a')).toEqual('1')
-            expect(theme('lineHeight.b')).toEqual('2')
-
-            expect(theme('lineHeight')).toMatchObject({
-              a: '1',
-              b: '2',
-            })
-          }),
-        }
-      },
-    },
-  )
-
-  expect(didCallPluginFn).toHaveBeenCalled()
-})
-
-test('handles setting theme keys to null', async () => {
-  expect(
-    await run(
-      ['bg-red-50', 'bg-red-100', 'bg-red-200'],
-      css`
-        @theme default {
-          --color-red-50: oklch(0.971 0.013 17.38);
-          --color-red-100: oklch(0.936 0.032 17.717);
-        }
-        @config "./my-config.js";
-        @tailwind utilities;
-        @theme {
-          --color-red-100: oklch(0.936 0.032 17.717);
-          --color-red-200: oklch(0.885 0.062 18.334);
-        }
-      `,
-      {
-        loadModule: async () => {
-          return {
-            module: {
-              theme: {
-                extend: {
-                  colors: {
-                    red: null,
-                  },
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --color-red-50: oklch(97.1% .013 17.38);
-      --color-red-100: oklch(93.6% .032 17.717);
-      --color-red-200: oklch(88.5% .062 18.334);
-    }
-
-    .bg-red-50 {
-      background-color: var(--color-red-50);
-    }
-
-    .bg-red-100 {
-      background-color: var(--color-red-100);
-    }
-
-    .bg-red-200 {
-      background-color: var(--color-red-200);
-    }
-    "
-  `)
-})
-
-test('The theme() function does not try indexing into strings', async () => {
-  expect(
-    await compileCss(css`
-      @theme default {
-        --color-what-50: #f00;
-        --color-what-950: #f00;
-      }
-
-      @theme {
-        /*
-       * The value of this theme variable is > 50 chars because colors.what.50 was previously
-       * indexing the string: "light-dark(theme(colors.what.950), theme(colors.what.50))"
-       * because the resolved config contained an object with a "what" key that was that string
-       */
-        --color-what: light-dark(theme(colors.what.950), theme(colors.what.50));
-      }
-
-      @source inline("text-what");
-
-      @tailwind utilities;
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --color-what: red;
-    }
-
-    .text-what {
-      color: var(--color-what);
-    }
-    "
-  `)
-})
-
-test('camel case keys are preserved', async () => {
-  expect(
-    await run(
-      [
-        // From CSS
-        'bg-blue-green', // should be output
-        'bg-blueGreen', // should not
-
-        // From JS config
-        'bg-light-green', // should not be output
-        'bg-lightGreen', // should be
-      ],
-      css`
-        @tailwind utilities;
-        @theme {
-          --color-blue-green: slate;
-        }
-        @config "./plugin.js";
-      `,
-      {
-        loadModule: async () => {
-          return {
-            base: '/',
-            path: '',
-            module: {
-              theme: {
-                extend: {
-                  backgroundColor: {
-                    lightGreen: '#c0ffee',
-                  },
-                },
-              },
-            },
-          }
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .bg-blue-green {
-      background-color: var(--color-blue-green);
-    }
-
-    .bg-lightGreen {
-      background-color: #c0ffee;
-    }
-
-    :root, :host {
-      --color-blue-green: slate;
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.test.ts b/packages/tailwindcss/src/compat/config/create-compat-config.test.ts
deleted file mode 100644
index aa1b21cb7..000000000
--- a/packages/tailwindcss/src/compat/config/create-compat-config.test.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { buildDesignSystem } from '../../design-system'
-import { Theme } from '../../theme'
-import { createCompatConfig } from './create-compat-config'
-import { resolveConfig } from './resolve-config'
-
-function buildCompatConfig(cssValues: Record<string, string>) {
-  let theme = new Theme()
-  for (let [key, value] of Object.entries(cssValues)) {
-    theme.add(key, value)
-  }
-  let design = buildDesignSystem(theme)
-
-  let { resolvedConfig } = resolveConfig(design, [
-    { config: createCompatConfig(design.theme), base: '/root', reference: true, src: undefined },
-  ])
-
-  return resolvedConfig
-}
-
-describe('theme namespace lookups', () => {
-  test('a namespace that only defines a bare value resolves to `{ DEFAULT: … }`, not a string', () => {
-    // When the CSS theme only defines `--text` (a single bare value),
-    // `theme('text', {})` used to return the string `'1rem'`.
-    //
-    // Spreading that string, like the compat config does, produced char-indexed
-    // garbage (`{ '0': '1', '1': 'r', … }`) instead of `{ DEFAULT: '1rem' }`.
-    let config = buildCompatConfig({ '--text': '1rem' })
-
-    expect(config.theme?.fontSize?.DEFAULT).toBe('1rem')
-    expect(config.theme?.fontSize).not.toHaveProperty('0')
-  })
-
-  test('a bare value is kept alongside suffixed values in the same namespace', () => {
-    let config = buildCompatConfig({
-      '--text': '1rem',
-      '--text-sm': '0.875rem',
-    })
-
-    expect(config.theme?.fontSize?.DEFAULT).toBe('1rem')
-    expect(config.theme?.fontSize?.sm).toBe('0.875rem')
-  })
-
-  test('a naive spread of a theme namespace in a user config is safe', () => {
-    let theme = new Theme()
-    theme.add('--text', '1rem')
-    let design = buildDesignSystem(theme)
-
-    let { resolvedConfig } = resolveConfig(design, [
-      {
-        config: {
-          theme: {
-            extend: {
-              fontSize: ({ theme }: any) => ({ ...theme('text', {}) }),
-            },
-          },
-        },
-        base: '/root',
-        reference: true,
-        src: undefined,
-      },
-    ])
-
-    expect(resolvedConfig.theme?.fontSize?.DEFAULT).toBe('1rem')
-    expect(resolvedConfig.theme?.fontSize).not.toHaveProperty('0')
-  })
-
-  test('namespace root lookups resolve to an object, key lookups resolve to the value', () => {
-    let theme = new Theme()
-    theme.add('--text', '1rem')
-    theme.add('--animate-spin', 'spin 1s linear infinite')
-    let design = buildDesignSystem(theme)
-
-    let root: unknown
-    let rootWithDefault: unknown
-    let leaf: unknown
-
-    resolveConfig(design, [
-      {
-        config: {
-          theme: {
-            extend: {
-              fontSize: ({ theme }: any) => {
-                root = theme('text')
-                rootWithDefault = theme('text', {})
-                leaf = theme('animate.spin')
-                return {}
-              },
-            },
-          },
-        },
-        base: '/root',
-        reference: true,
-        src: undefined,
-      },
-    ])
-
-    // A namespace root lookup always resolves to an object, like in v3, even
-    // when the namespace only contains a bare value
-    expect(root).toMatchObject({ DEFAULT: '1rem' })
-    expect(rootWithDefault).toMatchObject({ DEFAULT: '1rem' })
-
-    // Lookups of a specific key resolve to the value itself
-    expect(leaf).toBe('spin 1s linear infinite')
-  })
-
-  test('lookups of a specific key still resolve to the value itself', () => {
-    let theme = new Theme()
-    theme.add('--animate-spin', 'spin 1s linear infinite')
-    let design = buildDesignSystem(theme)
-
-    let { resolvedConfig } = resolveConfig(design, [
-      {
-        config: {
-          theme: {
-            extend: {
-              animation: ({ theme }: any) => ({ spin: theme('animate.spin') }),
-            },
-          },
-        },
-        base: '/root',
-        reference: true,
-        src: undefined,
-      },
-    ])
-
-    expect(resolvedConfig.theme?.animation?.spin).toBe('spin 1s linear infinite')
-  })
-})
-
-describe('createCompatConfig namespace mappings', () => {
-  test('fontSize maps from CSS text namespace', () => {
-    let config = buildCompatConfig({ '--text-base': '1rem' })
-    expect(config.theme?.fontSize?.base).toBe('1rem')
-  })
-
-  test('boxShadow maps from CSS shadow namespace', () => {
-    let config = buildCompatConfig({ '--shadow-md': '0 4px 6px #000' })
-    expect(config.theme?.boxShadow?.md).toBe('0 4px 6px #000')
-  })
-
-  test('animation maps from CSS animate namespace', () => {
-    let config = buildCompatConfig({ '--animate-spin': 'spin 1s linear infinite' })
-    expect(config.theme?.animation?.spin).toBe('spin 1s linear infinite')
-  })
-
-  test('aspectRatio maps from CSS aspect namespace', () => {
-    let config = buildCompatConfig({ '--aspect-square': '1 / 1' })
-    expect(config.theme?.aspectRatio?.square).toBe('1 / 1')
-  })
-
-  test('borderRadius maps from CSS radius namespace', () => {
-    let config = buildCompatConfig({ '--radius-lg': '0.5rem' })
-    expect(config.theme?.borderRadius?.lg).toBe('0.5rem')
-  })
-
-  test('screens maps from CSS breakpoint namespace', () => {
-    let config = buildCompatConfig({ '--breakpoint-sm': '640px' })
-    expect(config.theme?.screens?.sm).toBe('640px')
-  })
-
-  test('letterSpacing maps from CSS tracking namespace', () => {
-    let config = buildCompatConfig({ '--tracking-wide': '0.025em' })
-    expect(config.theme?.letterSpacing?.wide).toBe('0.025em')
-  })
-
-  test('lineHeight maps from CSS leading namespace', () => {
-    let config = buildCompatConfig({ '--leading-relaxed': '1.75' })
-    expect(config.theme?.lineHeight?.relaxed).toBe('1.75')
-  })
-
-  test('maxWidth maps from the container namespace in the default theme', () => {
-    let config = buildCompatConfig({})
-    // The default theme has container.sm = '24rem'
-    expect(config.theme?.maxWidth?.sm).toBe('24rem')
-  })
-
-  test('transitionDuration gets DEFAULT from --default-transition-duration', () => {
-    let config = buildCompatConfig({ '--default-transition-duration': '150ms' })
-    expect(config.theme?.transitionDuration?.DEFAULT).toBe('150ms')
-  })
-
-  test('transitionTimingFunction gets DEFAULT from --default-transition-timing-function', () => {
-    let config = buildCompatConfig({
-      '--default-transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
-    })
-    expect(config.theme?.transitionTimingFunction?.DEFAULT).toBe('cubic-bezier(0.4, 0, 0.2, 1)')
-  })
-})
diff --git a/packages/tailwindcss/src/compat/config/create-compat-config.ts b/packages/tailwindcss/src/compat/config/create-compat-config.ts
deleted file mode 100644
index 39bbec07d..000000000
--- a/packages/tailwindcss/src/compat/config/create-compat-config.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { Theme } from '../../theme'
-import defaultTheme from '../default-theme'
-import type { UserConfig } from './types'
-
-export function createCompatConfig(cssTheme: Theme): UserConfig {
-  return {
-    theme: {
-      ...defaultTheme,
-
-      // In the defaultTheme config, the `colors` key is not a function but a
-      // shallow object. We don't want to define the color namespace unless it
-      // is in the CSS theme so here we explicitly overwrite the defaultTheme
-      // and only allow colors from the CSS theme.
-      colors: ({ theme }) => theme('color', {}),
-
-      extend: {
-        fontSize: ({ theme }) => ({
-          ...theme('text', {}),
-        }),
-
-        boxShadow: ({ theme }) => ({
-          ...theme('shadow', {}),
-        }),
-
-        animation: ({ theme }) => ({
-          ...theme('animate', {}),
-        }),
-
-        aspectRatio: ({ theme }) => ({
-          ...theme('aspect', {}),
-        }),
-
-        borderRadius: ({ theme }) => ({
-          ...theme('radius', {}),
-        }),
-
-        screens: ({ theme }) => ({
-          ...theme('breakpoint', {}),
-        }),
-
-        letterSpacing: ({ theme }) => ({
-          ...theme('tracking', {}),
-        }),
-
-        lineHeight: ({ theme }) => ({
-          ...theme('leading', {}),
-        }),
-
-        transitionDuration: {
-          DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
-        },
-
-        transitionTimingFunction: {
-          DEFAULT: cssTheme.get(['--default-transition-timing-function']) ?? null,
-        },
-
-        maxWidth: ({ theme }) => ({
-          ...theme('container', {}),
-        }),
-      },
-    },
-  }
-}
diff --git a/packages/tailwindcss/src/compat/config/deep-merge.ts b/packages/tailwindcss/src/compat/config/deep-merge.ts
deleted file mode 100644
index 2bf15c9b3..000000000
--- a/packages/tailwindcss/src/compat/config/deep-merge.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export function isPlainObject<T>(value: T): value is T & Record<keyof T, unknown> {
-  if (Object.prototype.toString.call(value) !== '[object Object]') {
-    return false
-  }
-
-  const prototype = Object.getPrototypeOf(value)
-  return prototype === null || Object.getPrototypeOf(prototype) === null
-}
-
-export function deepMerge<T extends object>(
-  target: T,
-  sources: (Partial<T> | null | undefined)[],
-  customizer: (a: any, b: any, keypath: (keyof T)[]) => any,
-  path: (keyof T)[] = [],
-) {
-  type Key = keyof T
-  type Value = T[Key]
-
-  for (let source of sources) {
-    if (source === null || source === undefined) {
-      continue
-    }
-
-    for (let k of Reflect.ownKeys(source) as Key[]) {
-      path.push(k)
-      let merged = customizer(target[k], source[k], path)
-
-      if (merged !== undefined) {
-        target[k] = merged
-      } else if (!isPlainObject(target[k]) || !isPlainObject(source[k])) {
-        target[k] = source[k] as Value
-      } else {
-        target[k] = deepMerge({}, [target[k], source[k]], customizer, path as any) as Value
-      }
-      path.pop()
-    }
-  }
-
-  return target
-}
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
deleted file mode 100644
index d8cc21a10..000000000
--- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts
+++ /dev/null
@@ -1,321 +0,0 @@
-import { expect, test } from 'vitest'
-import { buildDesignSystem } from '../../design-system'
-import { Theme } from '../../theme'
-import { resolveConfig } from './resolve-config'
-
-test('top level theme keys are replaced', () => {
-  let design = buildDesignSystem(new Theme())
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          colors: {
-            red: 'red',
-          },
-
-          fontFamily: {
-            sans: 'SF Pro Display',
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-    {
-      config: {
-        theme: {
-          colors: {
-            green: 'green',
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-    {
-      config: {
-        theme: {
-          colors: {
-            blue: 'blue',
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-
-  expect(resolvedConfig).toMatchObject({
-    theme: {
-      colors: {
-        blue: 'blue',
-      },
-      fontFamily: {
-        sans: 'SF Pro Display',
-      },
-    },
-  })
-  expect(replacedThemeKeys).toEqual(new Set(['colors', 'fontFamily']))
-})
-
-test('theme can be extended', () => {
-  let design = buildDesignSystem(new Theme())
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          colors: {
-            red: 'red',
-          },
-
-          fontFamily: {
-            sans: 'SF Pro Display',
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-    {
-      config: {
-        theme: {
-          extend: {
-            colors: {
-              blue: 'blue',
-            },
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-
-  expect(resolvedConfig).toMatchObject({
-    theme: {
-      colors: {
-        red: 'red',
-        blue: 'blue',
-      },
-      fontFamily: {
-        sans: 'SF Pro Display',
-      },
-    },
-  })
-  expect(replacedThemeKeys).toEqual(new Set(['colors', 'fontFamily']))
-})
-
-test('theme keys can reference other theme keys using the theme function regardless of order', ({
-  expect,
-}) => {
-  let design = buildDesignSystem(new Theme())
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          colors: {
-            red: 'red',
-          },
-          placeholderColor: {
-            green: 'green',
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-    {
-      config: {
-        theme: {
-          extend: {
-            colors: ({ theme }) => ({
-              ...theme('placeholderColor'),
-              blue: 'blue',
-            }),
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-    {
-      config: {
-        theme: {
-          extend: {
-            caretColor: ({ theme }) => theme('accentColor'),
-            accentColor: ({ theme }) => theme('backgroundColor'),
-            backgroundColor: ({ theme }) => theme('colors'),
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-
-  expect(resolvedConfig).toMatchObject({
-    theme: {
-      colors: {
-        red: 'red',
-        green: 'green',
-        blue: 'blue',
-      },
-      accentColor: {
-        red: 'red',
-        green: 'green',
-        blue: 'blue',
-      },
-      backgroundColor: {
-        red: 'red',
-        green: 'green',
-        blue: 'blue',
-      },
-      caretColor: {
-        red: 'red',
-        green: 'green',
-        blue: 'blue',
-      },
-    },
-  })
-  expect(replacedThemeKeys).toEqual(new Set(['colors', 'placeholderColor']))
-})
-
-test('theme keys can read from the CSS theme', () => {
-  let theme = new Theme()
-  theme.add('--color-green', 'green')
-
-  let design = buildDesignSystem(theme)
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          colors: ({ theme }) => ({
-            // Reads from the --color-* namespace
-            ...theme('color'),
-            red: 'red',
-          }),
-          accentColor: ({ theme }) => ({
-            // Reads from the --color-* namespace through `colors`
-            ...theme('colors'),
-          }),
-          placeholderColor: ({ theme }) => ({
-            // Reads from the --color-* namespace through `colors`
-            primary: theme('colors.green'),
-
-            // Reads from the --color-* namespace directly
-            secondary: theme('color.green'),
-          }),
-          caretColor: ({ colors }) => ({
-            // Gives access to the colors object directly
-            primary: colors.green,
-          }),
-          transitionColor: (theme: any) => ({
-            // The parameter object is also the theme function
-            ...theme('colors'),
-          }),
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-
-  expect(resolvedConfig).toMatchObject({
-    theme: {
-      colors: {
-        red: 'red',
-        green: 'green',
-      },
-      accentColor: {
-        red: 'red',
-        green: 'green',
-      },
-      placeholderColor: {
-        primary: 'green',
-        secondary: 'green',
-      },
-      caretColor: {
-        primary: {
-          '100': 'oklch(96.2% 0.044 156.743)',
-          '200': 'oklch(92.5% 0.084 155.995)',
-          '300': 'oklch(87.1% 0.15 154.449)',
-          '400': 'oklch(79.2% 0.209 151.711)',
-          '50': 'oklch(98.2% 0.018 155.826)',
-          '500': 'oklch(72.3% 0.219 149.579)',
-          '600': 'oklch(62.7% 0.194 149.214)',
-          '700': 'oklch(52.7% 0.154 150.069)',
-          '800': 'oklch(44.8% 0.119 151.328)',
-          '900': 'oklch(39.3% 0.095 152.535)',
-          '950': 'oklch(26.6% 0.065 152.934)',
-        },
-      },
-      transitionColor: {
-        red: 'red',
-        green: 'green',
-      },
-    },
-  })
-  expect(replacedThemeKeys).toEqual(
-    new Set(['colors', 'accentColor', 'placeholderColor', 'caretColor', 'transitionColor']),
-  )
-})
-
-test('handles null as theme values', () => {
-  let theme = new Theme()
-  theme.add('--color-red-50', 'red')
-  theme.add('--color-red-100', 'red')
-
-  let design = buildDesignSystem(theme)
-
-  let { resolvedConfig, replacedThemeKeys } = resolveConfig(design, [
-    {
-      config: {
-        theme: {
-          colors: ({ theme }) => ({
-            // Reads from the --color-* namespace
-            ...theme('color'),
-          }),
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-    {
-      config: {
-        theme: {
-          extend: {
-            colors: {
-              red: null,
-            },
-          },
-        },
-      },
-      base: '/root',
-      reference: false,
-      src: undefined,
-    },
-  ])
-
-  expect(resolvedConfig).toMatchObject({
-    theme: {
-      colors: {
-        red: null,
-      },
-    },
-  })
-  expect(replacedThemeKeys).toEqual(new Set(['colors']))
-})
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.ts b/packages/tailwindcss/src/compat/config/resolve-config.ts
deleted file mode 100644
index 858f4bbbe..000000000
--- a/packages/tailwindcss/src/compat/config/resolve-config.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-import type { DesignSystem } from '../../design-system'
-import type { SourceLocation } from '../../source-maps/source'
-import colors from '../colors'
-import type { PluginWithConfig } from '../plugin-api'
-import { createThemeFn } from '../plugin-functions'
-import { deepMerge, isPlainObject } from './deep-merge'
-import {
-  type ResolvedConfig,
-  type ResolvedContentConfig,
-  type ResolvedThemeValue,
-  type ThemeValue,
-  type UserConfig,
-} from './types'
-
-export interface ConfigFile {
-  path?: string
-  base: string
-  config: UserConfig
-  reference: boolean
-  src: SourceLocation | undefined
-}
-
-interface ResolutionContext {
-  design: DesignSystem
-  configs: UserConfig[]
-  plugins: PluginWithConfig[]
-  content: ResolvedContentConfig
-  theme: Record<string, ThemeValue>
-  extend: Record<string, ThemeValue[]>
-  result: ResolvedConfig
-}
-
-let minimal: ResolvedConfig = {
-  blocklist: [],
-  future: {},
-  experimental: {},
-  prefix: '',
-  important: false,
-  darkMode: null,
-  theme: {},
-  plugins: [],
-  content: {
-    files: [],
-  },
-}
-
-export function resolveConfig(
-  design: DesignSystem,
-  files: ConfigFile[],
-): { resolvedConfig: ResolvedConfig; replacedThemeKeys: Set<string> } {
-  let ctx: ResolutionContext = {
-    design,
-    configs: [],
-    plugins: [],
-    content: {
-      files: [],
-    },
-    theme: {},
-    extend: {},
-
-    // Start with a minimal valid, but empty config
-    result: structuredClone(minimal),
-  }
-
-  for (let file of files) {
-    extractConfigs(ctx, file)
-  }
-
-  // Merge top level keys
-  for (let config of ctx.configs) {
-    if ('darkMode' in config && config.darkMode !== undefined) {
-      ctx.result.darkMode = config.darkMode ?? null
-    }
-
-    if ('prefix' in config && config.prefix !== undefined) {
-      ctx.result.prefix = config.prefix ?? ''
-    }
-
-    if ('blocklist' in config && config.blocklist !== undefined) {
-      ctx.result.blocklist = config.blocklist ?? []
-    }
-
-    if ('important' in config && config.important !== undefined) {
-      ctx.result.important = config.important ?? false
-    }
-  }
-
-  // Merge themes
-  let replacedThemeKeys = mergeTheme(ctx)
-
-  return {
-    resolvedConfig: {
-      ...ctx.result,
-      content: ctx.content,
-      theme: ctx.theme as ResolvedConfig['theme'],
-      plugins: ctx.plugins,
-    },
-    replacedThemeKeys,
-  }
-}
-
-export function mergeThemeExtension(
-  themeValue: ThemeValue | ThemeValue[],
-  extensionValue: ThemeValue | ThemeValue[],
-) {
-  // When we have an array of objects, we do want to merge it
-  if (Array.isArray(themeValue) && isPlainObject(themeValue[0])) {
-    return themeValue.concat(extensionValue)
-  }
-
-  // When the incoming value is an array, and the existing config is an object,
-  // prepend the existing object
-  if (
-    Array.isArray(extensionValue) &&
-    isPlainObject(extensionValue[0]) &&
-    isPlainObject(themeValue)
-  ) {
-    return [themeValue, ...extensionValue]
-  }
-
-  // Override arrays (for example for font-families, box-shadows, ...)
-  if (Array.isArray(extensionValue)) {
-    return extensionValue
-  }
-
-  // Execute default behavior
-  return undefined
-}
-
-export type PluginUtils = {
-  theme: (keypath: string, defaultValue?: any) => any
-  colors: typeof colors
-}
-
-function extractConfigs(
-  ctx: ResolutionContext,
-  { config, base, path, reference, src }: ConfigFile,
-): void {
-  let plugins: PluginWithConfig[] = []
-
-  // Normalize plugins so they share the same shape
-  for (let plugin of config.plugins ?? []) {
-    if ('__isOptionsFunction' in plugin) {
-      // Happens with `plugin.withOptions()` when no options were passed:
-      // e.g. `require("my-plugin")` instead of `require("my-plugin")(options)`
-      plugins.push({ ...plugin(), reference, src })
-    } else if ('handler' in plugin) {
-      // Happens with `plugin(…)`:
-      // e.g. `require("my-plugin")`
-      //
-      // or with `plugin.withOptions()` when the user passed options:
-      // e.g. `require("my-plugin")(options)`
-      plugins.push({ ...plugin, reference, src })
-    } else {
-      // Just a plain function without using the plugin(…) API
-      plugins.push({ handler: plugin, reference, src })
-    }
-  }
-
-  // Apply configs from presets
-  if (Array.isArray(config.presets) && config.presets.length === 0) {
-    throw new Error(
-      'Error in the config file/plugin/preset. An empty preset (`preset: []`) is not currently supported.',
-    )
-  }
-
-  for (let preset of config.presets ?? []) {
-    extractConfigs(ctx, { path, base, config: preset, reference, src })
-  }
-
-  // Apply configs from plugins
-  for (let plugin of plugins) {
-    ctx.plugins.push(plugin)
-
-    if (plugin.config) {
-      extractConfigs(ctx, {
-        path,
-        base,
-        config: plugin.config,
-        reference: !!plugin.reference,
-        src: plugin.src ?? src,
-      })
-    }
-  }
-
-  // Merge in content paths from multiple configs
-  let content = config.content ?? []
-  let files = Array.isArray(content) ? content : content.files
-
-  for (let file of files) {
-    ctx.content.files.push(typeof file === 'object' ? file : { base, pattern: file })
-  }
-
-  // Then apply the "user" config
-  ctx.configs.push(config)
-}
-
-function mergeTheme(ctx: ResolutionContext): Set<string> {
-  let replacedThemeKeys: Set<string> = new Set()
-
-  let themeFn = createThemeFn(ctx.design, () => ctx.theme, resolveValue)
-  let theme = Object.assign(themeFn, {
-    theme: themeFn,
-    colors,
-  })
-
-  function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {
-    if (typeof value === 'function') {
-      return value(theme) ?? null
-    }
-
-    return value ?? null
-  }
-
-  for (let config of ctx.configs) {
-    let theme = config.theme ?? {}
-    let extend = theme.extend ?? {}
-
-    // Keep track of all theme keys that were reset
-    for (let key in theme) {
-      if (key === 'extend') {
-        continue
-      }
-      replacedThemeKeys.add(key)
-    }
-
-    // Shallow merge themes so latest "group" wins
-    Object.assign(ctx.theme, theme)
-
-    // Collect extensions by key so each group can be lazily deep merged
-    for (let key in extend) {
-      ctx.extend[key] ??= []
-      ctx.extend[key].push(extend[key])
-    }
-  }
-
-  // Remove the `extend` key from the theme It's only used for merging and
-  // should not be present in the resolved theme
-  delete ctx.theme.extend
-
-  // Deep merge every `extend` key into the theme
-  for (let key in ctx.extend) {
-    let values = [ctx.theme[key], ...ctx.extend[key]]
-
-    ctx.theme[key] = () => {
-      let v = values.map(resolveValue)
-
-      let result = deepMerge({}, v, mergeThemeExtension)
-      return result
-    }
-  }
-
-  for (let key in ctx.theme) {
-    ctx.theme[key] = resolveValue(ctx.theme[key])
-  }
-
-  // Turn {min: '123px'} into '123px' in screens
-  if (ctx.theme.screens && typeof ctx.theme.screens === 'object') {
-    for (let key of Object.keys(ctx.theme.screens)) {
-      let screen = ctx.theme.screens[key]
-      if (!screen) continue
-      if (typeof screen !== 'object') continue
-
-      if ('raw' in screen) continue
-      if ('max' in screen) continue
-      if (!('min' in screen)) continue
-
-      ctx.theme.screens[key] = screen.min
-    }
-  }
-
-  return replacedThemeKeys
-}
diff --git a/packages/tailwindcss/src/compat/config/types.ts b/packages/tailwindcss/src/compat/config/types.ts
deleted file mode 100644
index 76851a397..000000000
--- a/packages/tailwindcss/src/compat/config/types.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import type { Plugin, PluginWithConfig } from '../plugin-api'
-import type { PluginUtils } from './resolve-config'
-
-export type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
-
-export interface UserConfig {
-  presets?: UserConfig[]
-  theme?: ThemeConfig
-  plugins?: Plugin[]
-}
-
-export type ThemeValue = ResolvableTo<Record<string, unknown>> | null | undefined
-export type ResolvedThemeValue = Record<string, unknown> | null
-
-export type ThemeConfig = Record<string, ThemeValue> & {
-  extend?: Record<string, ThemeValue>
-}
-
-export interface ResolvedConfig {
-  theme: Record<string, Record<string, unknown>>
-  plugins: PluginWithConfig[]
-}
-
-// Content support
-type ContentFile = string | { raw: string; extension?: string }
-
-export interface UserConfig {
-  content?: ContentFile[] | { relative?: boolean; files: ContentFile[] }
-}
-
-type ResolvedContent = { base: string; pattern: string } | { raw: string; extension?: string }
-
-export interface ResolvedContentConfig {
-  files: ResolvedContent[]
-}
-
-export interface ResolvedConfig {
-  content: ResolvedContentConfig
-}
-
-// Dark Mode support
-type DarkModeStrategy =
-  // No dark mode support
-  | false
-
-  // Use the `media` query strategy.
-  | 'media'
-
-  // Use the `class` strategy, which requires a `.dark` class on the `html`.
-  | 'class'
-
-  // Use the `class` strategy with a custom class instead of `.dark`.
-  | ['class', string]
-
-  // Use the `selector` strategy — same as `class` but uses `:where()` for more predictable behavior
-  | 'selector'
-
-  // Use the `selector` strategy with a custom selector instead of `.dark`.
-  | ['selector', string]
-
-  // Use the `variant` strategy, which allows you to completely customize the selector
-  // It takes a string or an array of strings, which are passed directly to `addVariant()`
-  | ['variant', string | string[]]
-
-export interface UserConfig {
-  darkMode?: DarkModeStrategy
-}
-
-export interface ResolvedConfig {
-  darkMode: DarkModeStrategy | null
-}
-
-// `prefix` support
-export interface UserConfig {
-  prefix?: string
-}
-
-export interface ResolvedConfig {
-  prefix: string
-}
-
-// `blocklist` support
-export interface UserConfig {
-  blocklist?: string[]
-}
-
-export interface ResolvedConfig {
-  blocklist: string[]
-}
-
-// `important` support
-export interface UserConfig {
-  important?: boolean | string
-}
-
-export interface ResolvedConfig {
-  important: boolean | string
-}
-
-// `future` key support
-export interface UserConfig {
-  future?: 'all' | Record<string, boolean>
-}
-
-export interface ResolvedConfig {
-  future: Record<string, boolean>
-}
-
-// `experimental` key support
-export interface UserConfig {
-  experimental?: 'all' | Record<string, boolean>
-}
-
-export interface ResolvedConfig {
-  experimental: Record<string, boolean>
-}
diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts
deleted file mode 100644
index 39a12557c..000000000
--- a/packages/tailwindcss/src/compat/container-config.test.ts
+++ /dev/null
@@ -1,757 +0,0 @@
-import { expect, test } from 'vitest'
-import { run } from '../test-utils/run'
-
-const css = String.raw
-
-test('creates a custom utility to extend the built-in container', async () => {
-  expect(
-    await run(
-      ['container'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              container: {
-                center: true,
-                padding: '2rem',
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .container {
-      width: 100%;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: 40rem;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .container {
-        max-width: 64rem;
-      }
-    }
-
-    @media (min-width: 80rem) {
-      .container {
-        max-width: 80rem;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .container {
-        max-width: 96rem;
-      }
-    }
-
-    .container {
-      margin-inline: auto;
-      padding-inline: 2rem;
-    }
-    "
-  `)
-})
-
-test('allows padding to be defined at custom breakpoints', async () => {
-  expect(
-    await run(
-      ['container'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              container: {
-                padding: {
-                  // The order here is messed up on purpose
-                  '2xl': '3rem',
-                  DEFAULT: '1rem',
-                  lg: '2rem',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .container {
-      width: 100%;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: 40rem;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .container {
-        max-width: 64rem;
-      }
-    }
-
-    @media (min-width: 80rem) {
-      .container {
-        max-width: 80rem;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .container {
-        max-width: 96rem;
-      }
-    }
-
-    .container {
-      padding-inline: 1rem;
-    }
-
-    @media (min-width: 64rem) {
-      .container {
-        padding-inline: 2rem;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .container {
-        padding-inline: 3rem;
-      }
-    }
-    "
-  `)
-})
-
-test('allows breakpoints to be overwritten', async () => {
-  expect(
-    await run(
-      ['container'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              container: {
-                screens: {
-                  xl: '1280px',
-                  '2xl': '1536px',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .container {
-      width: 100%;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: 40rem;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .container {
-        max-width: 64rem;
-      }
-    }
-
-    @media (min-width: 80rem) {
-      .container {
-        max-width: 80rem;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .container {
-        max-width: 96rem;
-      }
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: none;
-      }
-    }
-
-    @media (min-width: 1280px) {
-      .container {
-        max-width: 1280px;
-      }
-    }
-
-    @media (min-width: 1536px) {
-      .container {
-        max-width: 1536px;
-      }
-    }
-    "
-  `)
-})
-
-test('padding applies to custom `container` screens', async () => {
-  expect(
-    await run(
-      ['container'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              container: {
-                padding: {
-                  sm: '2rem',
-                  md: '3rem',
-                },
-                screens: {
-                  md: '48rem',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .container {
-      width: 100%;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: 40rem;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .container {
-        max-width: 64rem;
-      }
-    }
-
-    @media (min-width: 80rem) {
-      .container {
-        max-width: 80rem;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .container {
-        max-width: 96rem;
-      }
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: none;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-        padding-inline: 3rem;
-      }
-    }
-    "
-  `)
-})
-
-test("an empty `screen` config will undo all custom media screens and won't apply any breakpoint-specific padding", async () => {
-  expect(
-    await run(
-      ['container'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              container: {
-                padding: {
-                  DEFAULT: '1rem',
-                  sm: '2rem',
-                  md: '3rem',
-                },
-                screens: {},
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .container {
-      width: 100%;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: 40rem;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .container {
-        max-width: 64rem;
-      }
-    }
-
-    @media (min-width: 80rem) {
-      .container {
-        max-width: 80rem;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .container {
-        max-width: 96rem;
-      }
-    }
-
-    .container {
-      padding-inline: 1rem;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: none;
-      }
-    }
-    "
-  `)
-})
-
-test('legacy container component does not interfere with new --container variables', async () => {
-  expect(
-    await run(
-      ['max-w-sm'],
-      css`
-        @theme default {
-          --container-3xs: 16rem;
-          --container-2xs: 18rem;
-          --container-xs: 20rem;
-          --container-sm: 24rem;
-          --container-md: 28rem;
-          --container-lg: 32rem;
-          --container-xl: 36rem;
-          --container-2xl: 42rem;
-          --container-3xl: 48rem;
-          --container-4xl: 56rem;
-          --container-5xl: 64rem;
-          --container-6xl: 72rem;
-          --container-7xl: 80rem;
-          --container-prose: 65ch;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              container: {
-                center: true,
-                padding: '2rem',
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --container-sm: 24rem;
-    }
-
-    .max-w-sm {
-      max-width: var(--container-sm);
-    }
-    "
-  `)
-})
-
-test('combines custom padding and screen overwrites', async () => {
-  expect(
-    await run(
-      ['container', '!container'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              container: {
-                center: true,
-                padding: {
-                  DEFAULT: '2rem',
-                  '2xl': '4rem',
-                },
-                screens: {
-                  md: '48rem', // Matches a default --breakpoint
-                  xl: '1280px',
-                  '2xl': '1536px',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .\\!container {
-      width: 100% !important;
-    }
-
-    @media (min-width: 40rem) {
-      .\\!container {
-        max-width: 40rem !important;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .\\!container {
-        max-width: 48rem !important;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .\\!container {
-        max-width: 64rem !important;
-      }
-    }
-
-    @media (min-width: 80rem) {
-      .\\!container {
-        max-width: 80rem !important;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .\\!container {
-        max-width: 96rem !important;
-      }
-    }
-
-    .container {
-      width: 100%;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: 40rem;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .container {
-        max-width: 64rem;
-      }
-    }
-
-    @media (min-width: 80rem) {
-      .container {
-        max-width: 80rem;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .container {
-        max-width: 96rem;
-      }
-    }
-
-    .\\!container {
-      margin-inline: auto !important;
-      padding-inline: 2rem !important;
-    }
-
-    @media (min-width: 40rem) {
-      .\\!container {
-        max-width: none !important;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .\\!container {
-        max-width: 48rem !important;
-      }
-    }
-
-    @media (min-width: 1280px) {
-      .\\!container {
-        max-width: 1280px !important;
-      }
-    }
-
-    @media (min-width: 1536px) {
-      .\\!container {
-        max-width: 1536px !important;
-        padding-inline: 4rem !important;
-      }
-    }
-
-    .container {
-      margin-inline: auto;
-      padding-inline: 2rem;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: none;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-      }
-    }
-
-    @media (min-width: 1280px) {
-      .container {
-        max-width: 1280px;
-      }
-    }
-
-    @media (min-width: 1536px) {
-      .container {
-        max-width: 1536px;
-        padding-inline: 4rem;
-      }
-    }
-    "
-  `)
-})
-
-test('filters out complex breakpoints', async () => {
-  expect(
-    await run(
-      ['container'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              container: {
-                center: true,
-                padding: {
-                  DEFAULT: '2rem',
-                  '2xl': '4rem',
-                },
-                screens: {
-                  sm: '20px',
-                  md: { min: '100px' },
-                  lg: { max: '200px' },
-                  xl: { min: '300px', max: '400px' },
-                  '2xl': { raw: 'print' },
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .container {
-      width: 100%;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: 40rem;
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .container {
-        max-width: 48rem;
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .container {
-        max-width: 64rem;
-      }
-    }
-
-    @media (min-width: 80rem) {
-      .container {
-        max-width: 80rem;
-      }
-    }
-
-    @media (min-width: 96rem) {
-      .container {
-        max-width: 96rem;
-      }
-    }
-
-    .container {
-      margin-inline: auto;
-      padding-inline: 2rem;
-    }
-
-    @media (min-width: 40rem) {
-      .container {
-        max-width: none;
-      }
-    }
-
-    @media (min-width: 20px) {
-      .container {
-        max-width: 20px;
-      }
-    }
-
-    @media (min-width: 100px) {
-      .container {
-        max-width: 100px;
-      }
-    }
-
-    @media (min-width: 300px) {
-      .container {
-        max-width: 300px;
-      }
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/compat/container.ts b/packages/tailwindcss/src/compat/container.ts
deleted file mode 100644
index 98f23ce7a..000000000
--- a/packages/tailwindcss/src/compat/container.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { atRule, cloneAstNode, decl, type AstNode, type AtRule } from '../ast'
-import type { DesignSystem } from '../design-system'
-import { compareBreakpoints } from '../utils/compare-breakpoints'
-import type { ResolvedConfig } from './config/types'
-
-export function registerContainerCompat(userConfig: ResolvedConfig, designSystem: DesignSystem) {
-  let container = userConfig.theme.container || {}
-
-  if (typeof container !== 'object' || container === null) {
-    return
-  }
-
-  let rules = buildCustomContainerUtilityRules(container, designSystem)
-
-  if (rules.length === 0) {
-    return
-  }
-
-  designSystem.utilities.static('container', () => rules.map(cloneAstNode))
-}
-
-export function buildCustomContainerUtilityRules(
-  {
-    center,
-    padding,
-    screens,
-  }: {
-    center?: boolean
-    padding?: string | {}
-    screens?: {}
-  },
-  designSystem: DesignSystem,
-): AstNode[] {
-  let rules = []
-  let breakpointOverwrites: null | Map<string, AtRule> = null
-
-  if (center) {
-    rules.push(decl('margin-inline', 'auto'))
-  }
-
-  if (
-    typeof padding === 'string' ||
-    (typeof padding === 'object' && padding !== null && 'DEFAULT' in padding)
-  ) {
-    rules.push(
-      decl('padding-inline', typeof padding === 'string' ? padding : (padding.DEFAULT as string)),
-    )
-  }
-
-  if (typeof screens === 'object' && screens !== null) {
-    breakpointOverwrites = new Map()
-
-    // When setting the `screens` in v3, you were overwriting the default
-    // screens config. To do this in v4, you have to manually unset all core
-    // screens.
-
-    let breakpoints = Array.from(designSystem.theme.namespace('--breakpoint').entries())
-    breakpoints.sort((a, z) => compareBreakpoints(a[1], z[1], 'asc'))
-    if (breakpoints.length > 0) {
-      let [key] = breakpoints[0]
-      // Unset all default breakpoints
-      rules.push(
-        atRule('@media', `(width >= --theme(--breakpoint-${key}))`, [decl('max-width', 'none')]),
-      )
-    }
-
-    for (let [key, value] of Object.entries(screens)) {
-      if (typeof value === 'object') {
-        if ('min' in value) {
-          value = value.min
-        } else {
-          continue
-        }
-      }
-
-      // We're inlining the breakpoint values because the screens configured in
-      // the `container` option do not have to match the ones defined in the
-      // root `screen` setting.
-      breakpointOverwrites.set(
-        key,
-        atRule('@media', `(width >= ${value})`, [decl('max-width', value)]),
-      )
-    }
-  }
-
-  if (typeof padding === 'object' && padding !== null) {
-    let breakpoints = Object.entries(padding)
-      .filter(([key]) => key !== 'DEFAULT')
-      .map(([key, value]) => {
-        return [key, designSystem.theme.resolveValue(key, ['--breakpoint']), value]
-      })
-      .filter(Boolean) as [string, string, string][]
-    breakpoints.sort((a, z) => compareBreakpoints(a[1], z[1], 'asc'))
-
-    for (let [key, , value] of breakpoints) {
-      if (breakpointOverwrites && breakpointOverwrites.has(key)) {
-        let overwrite = breakpointOverwrites.get(key)!
-        overwrite.nodes.push(decl('padding-inline', value))
-      } else if (breakpointOverwrites) {
-        // The breakpoint does not exist in the overwritten breakpoints list, so
-        // we skip rendering it.
-        continue
-      } else {
-        rules.push(
-          atRule('@media', `(width >= theme(--breakpoint-${key}))`, [
-            decl('padding-inline', value),
-          ]),
-        )
-      }
-    }
-  }
-
-  if (breakpointOverwrites) {
-    for (let [, rule] of breakpointOverwrites) {
-      rules.push(rule)
-    }
-  }
-
-  return rules
-}
diff --git a/packages/tailwindcss/src/compat/dark-mode.ts b/packages/tailwindcss/src/compat/dark-mode.ts
deleted file mode 100644
index eceac1498..000000000
--- a/packages/tailwindcss/src/compat/dark-mode.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { ResolvedConfig } from './config/types'
-import type { PluginAPI } from './plugin-api'
-
-export function darkModePlugin({ addVariant, config }: Pick<PluginAPI, 'addVariant' | 'config'>) {
-  let darkMode = config('darkMode', null) as ResolvedConfig['darkMode']
-  let [mode, selector = '.dark'] = Array.isArray(darkMode) ? darkMode : [darkMode]
-
-  if (mode === 'variant') {
-    let formats
-
-    if (Array.isArray(selector)) {
-      formats = selector
-    } else if (typeof selector === 'function') {
-      formats = selector
-    } else if (typeof selector === 'string') {
-      formats = [selector]
-    }
-
-    if (Array.isArray(formats)) {
-      for (let format of formats) {
-        if (format === '.dark') {
-          mode = false
-          console.warn(
-            'When using `variant` for `darkMode`, you must provide a selector.\nExample: `darkMode: ["variant", ".your-selector &"]`',
-          )
-        } else if (!format.includes('&')) {
-          mode = false
-          console.warn(
-            'When using `variant` for `darkMode`, your selector must contain `&`.\nExample `darkMode: ["variant", ".your-selector &"]`',
-          )
-        }
-      }
-    }
-
-    selector = formats as any
-  }
-
-  if (mode === null) {
-    // Do nothing
-  } else if (mode === 'selector') {
-    // New preferred behavior
-    addVariant('dark', `&:where(${selector}, ${selector} *)`)
-  } else if (mode === 'media') {
-    addVariant('dark', '@media (prefers-color-scheme: dark)')
-  } else if (mode === 'variant') {
-    addVariant('dark', selector)
-  } else if (mode === 'class') {
-    // Old behavior
-    addVariant('dark', `&:is(${selector} *)`)
-  }
-}
diff --git a/packages/tailwindcss/src/compat/default-theme.cts b/packages/tailwindcss/src/compat/default-theme.cts
deleted file mode 100644
index aab00f357..000000000
--- a/packages/tailwindcss/src/compat/default-theme.cts
+++ /dev/null
@@ -1,8 +0,0 @@
-import defaultTheme from './default-theme.ts'
-
-// This file exists so that `default-theme.ts` can be written one time but be
-// compatible with both CJS and ESM. Without it we get a `.default` export when
-// using `require` in CJS.
-
-// @ts-ignore
-export = defaultTheme
diff --git a/packages/tailwindcss/src/compat/default-theme.ts b/packages/tailwindcss/src/compat/default-theme.ts
deleted file mode 100644
index 90e699c1c..000000000
--- a/packages/tailwindcss/src/compat/default-theme.ts
+++ /dev/null
@@ -1,1140 +0,0 @@
-import type { NamedUtilityValue } from '../candidate'
-import { isPositiveInteger } from '../utils/infer-data-type'
-import { segment } from '../utils/segment'
-import colors from './colors'
-import type { UserConfig } from './config/types'
-
-function bareValues(fn: (value: NamedUtilityValue) => string | undefined) {
-  return {
-    // Ideally this would be a Symbol but some of the ecosystem assumes object with
-    // string / number keys for example by using `Object.entries()` which means that
-    // the function that handles the bare value would be lost
-    __BARE_VALUE__: fn,
-  }
-}
-
-let bareIntegers = bareValues((value) => {
-  if (isPositiveInteger(value.value)) {
-    return value.value
-  }
-})
-
-let barePercentages = bareValues((value: NamedUtilityValue) => {
-  if (isPositiveInteger(value.value)) {
-    return `${value.value}%`
-  }
-})
-
-let barePixels = bareValues((value: NamedUtilityValue) => {
-  if (isPositiveInteger(value.value)) {
-    return `${value.value}px`
-  }
-})
-
-let bareMilliseconds = bareValues((value: NamedUtilityValue) => {
-  if (isPositiveInteger(value.value)) {
-    return `${value.value}ms`
-  }
-})
-
-let bareDegrees = bareValues((value: NamedUtilityValue) => {
-  if (isPositiveInteger(value.value)) {
-    return `${value.value}deg`
-  }
-})
-
-let bareAspectRatio = bareValues((value) => {
-  if (value.fraction === null) return
-  let [lhs, rhs] = segment(value.fraction, '/')
-  if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) return
-  return value.fraction
-})
-
-let bareRepeatValues = bareValues((value) => {
-  if (isPositiveInteger(Number(value.value))) {
-    return `repeat(${value.value}, minmax(0, 1fr))`
-  }
-})
-
-export default {
-  accentColor: ({ theme }) => theme('colors'),
-  animation: {
-    none: 'none',
-    spin: 'spin 1s linear infinite',
-    ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-    pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-    bounce: 'bounce 1s infinite',
-  },
-  aria: {
-    busy: 'busy="true"',
-    checked: 'checked="true"',
-    disabled: 'disabled="true"',
-    expanded: 'expanded="true"',
-    hidden: 'hidden="true"',
-    pressed: 'pressed="true"',
-    readonly: 'readonly="true"',
-    required: 'required="true"',
-    selected: 'selected="true"',
-  },
-  aspectRatio: {
-    auto: 'auto',
-    square: '1 / 1',
-    video: '16 / 9',
-    ...bareAspectRatio,
-  },
-  backdropBlur: ({ theme }) => theme('blur'),
-  backdropBrightness: ({ theme }) => ({
-    ...theme('brightness'),
-    ...barePercentages,
-  }),
-  backdropContrast: ({ theme }) => ({
-    ...theme('contrast'),
-    ...barePercentages,
-  }),
-  backdropGrayscale: ({ theme }) => ({
-    ...theme('grayscale'),
-    ...barePercentages,
-  }),
-  backdropHueRotate: ({ theme }) => ({
-    ...theme('hueRotate'),
-    ...bareDegrees,
-  }),
-  backdropInvert: ({ theme }) => ({
-    ...theme('invert'),
-    ...barePercentages,
-  }),
-  backdropOpacity: ({ theme }) => ({
-    ...theme('opacity'),
-    ...barePercentages,
-  }),
-  backdropSaturate: ({ theme }) => ({
-    ...theme('saturate'),
-    ...barePercentages,
-  }),
-  backdropSepia: ({ theme }) => ({
-    ...theme('sepia'),
-    ...barePercentages,
-  }),
-  backgroundColor: ({ theme }) => theme('colors'),
-  backgroundImage: {
-    none: 'none',
-    'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
-    'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
-    'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
-    'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
-    'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
-    'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
-    'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
-    'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
-  },
-  backgroundOpacity: ({ theme }) => theme('opacity'),
-  backgroundPosition: {
-    bottom: 'bottom',
-    center: 'center',
-    left: 'left',
-    'left-bottom': 'left bottom',
-    'left-top': 'left top',
-    right: 'right',
-    'right-bottom': 'right bottom',
-    'right-top': 'right top',
-    top: 'top',
-  },
-  backgroundSize: {
-    auto: 'auto',
-    cover: 'cover',
-    contain: 'contain',
-  },
-  blur: {
-    0: '0',
-    none: '',
-    sm: '4px',
-    DEFAULT: '8px',
-    md: '12px',
-    lg: '16px',
-    xl: '24px',
-    '2xl': '40px',
-    '3xl': '64px',
-  },
-  borderColor: ({ theme }) => ({
-    DEFAULT: 'currentcolor',
-    ...theme('colors'),
-  }),
-  borderOpacity: ({ theme }) => theme('opacity'),
-  borderRadius: {
-    none: '0px',
-    sm: '0.125rem',
-    DEFAULT: '0.25rem',
-    md: '0.375rem',
-    lg: '0.5rem',
-    xl: '0.75rem',
-    '2xl': '1rem',
-    '3xl': '1.5rem',
-    full: '9999px',
-  },
-  borderSpacing: ({ theme }) => theme('spacing'),
-  borderWidth: {
-    DEFAULT: '1px',
-    0: '0px',
-    2: '2px',
-    4: '4px',
-    8: '8px',
-    ...barePixels,
-  },
-  boxShadow: {
-    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-    DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-    none: 'none',
-  },
-  boxShadowColor: ({ theme }) => theme('colors'),
-  brightness: {
-    0: '0',
-    50: '.5',
-    75: '.75',
-    90: '.9',
-    95: '.95',
-    100: '1',
-    105: '1.05',
-    110: '1.1',
-    125: '1.25',
-    150: '1.5',
-    200: '2',
-    ...barePercentages,
-  },
-  caretColor: ({ theme }) => theme('colors'),
-  colors: () => ({ ...colors }),
-  columns: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-    '3xs': '16rem',
-    '2xs': '18rem',
-    xs: '20rem',
-    sm: '24rem',
-    md: '28rem',
-    lg: '32rem',
-    xl: '36rem',
-    '2xl': '42rem',
-    '3xl': '48rem',
-    '4xl': '56rem',
-    '5xl': '64rem',
-    '6xl': '72rem',
-    '7xl': '80rem',
-    ...bareIntegers,
-  },
-  container: {},
-  content: {
-    none: 'none',
-  },
-  contrast: {
-    0: '0',
-    50: '.5',
-    75: '.75',
-    100: '1',
-    125: '1.25',
-    150: '1.5',
-    200: '2',
-    ...barePercentages,
-  },
-  cursor: {
-    auto: 'auto',
-    default: 'default',
-    pointer: 'pointer',
-    wait: 'wait',
-    text: 'text',
-    move: 'move',
-    help: 'help',
-    'not-allowed': 'not-allowed',
-    none: 'none',
-    'context-menu': 'context-menu',
-    progress: 'progress',
-    cell: 'cell',
-    crosshair: 'crosshair',
-    'vertical-text': 'vertical-text',
-    alias: 'alias',
-    copy: 'copy',
-    'no-drop': 'no-drop',
-    grab: 'grab',
-    grabbing: 'grabbing',
-    'all-scroll': 'all-scroll',
-    'col-resize': 'col-resize',
-    'row-resize': 'row-resize',
-    'n-resize': 'n-resize',
-    'e-resize': 'e-resize',
-    's-resize': 's-resize',
-    'w-resize': 'w-resize',
-    'ne-resize': 'ne-resize',
-    'nw-resize': 'nw-resize',
-    'se-resize': 'se-resize',
-    'sw-resize': 'sw-resize',
-    'ew-resize': 'ew-resize',
-    'ns-resize': 'ns-resize',
-    'nesw-resize': 'nesw-resize',
-    'nwse-resize': 'nwse-resize',
-    'zoom-in': 'zoom-in',
-    'zoom-out': 'zoom-out',
-  },
-  divideColor: ({ theme }) => theme('borderColor'),
-  divideOpacity: ({ theme }) => theme('borderOpacity'),
-  divideWidth: ({ theme }) => ({
-    ...theme('borderWidth'),
-    ...barePixels,
-  }),
-  dropShadow: {
-    sm: '0 1px 1px rgb(0 0 0 / 0.05)',
-    DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
-    md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
-    lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
-    xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
-    '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
-    none: '0 0 #0000',
-  },
-  fill: ({ theme }) => theme('colors'),
-  flex: {
-    1: '1 1 0%',
-    auto: '1 1 auto',
-    initial: '0 1 auto',
-    none: 'none',
-  },
-  flexBasis: ({ theme }) => ({
-    auto: 'auto',
-    '1/2': '50%',
-    '1/3': '33.333333%',
-    '2/3': '66.666667%',
-    '1/4': '25%',
-    '2/4': '50%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.666667%',
-    '2/6': '33.333333%',
-    '3/6': '50%',
-    '4/6': '66.666667%',
-    '5/6': '83.333333%',
-    '1/12': '8.333333%',
-    '2/12': '16.666667%',
-    '3/12': '25%',
-    '4/12': '33.333333%',
-    '5/12': '41.666667%',
-    '6/12': '50%',
-    '7/12': '58.333333%',
-    '8/12': '66.666667%',
-    '9/12': '75%',
-    '10/12': '83.333333%',
-    '11/12': '91.666667%',
-    full: '100%',
-    ...theme('spacing'),
-  }),
-  flexGrow: {
-    0: '0',
-    DEFAULT: '1',
-    ...bareIntegers,
-  },
-  flexShrink: {
-    0: '0',
-    DEFAULT: '1',
-    ...bareIntegers,
-  },
-  fontFamily: {
-    sans: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      '"Helvetica Neue"',
-      '"Noto Sans"',
-      'Arial',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-      '"Noto Color Emoji"',
-    ],
-    serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
-    mono: [
-      'ui-monospace',
-      'SFMono-Regular',
-      'Menlo',
-      'Monaco',
-      'Consolas',
-      '"Liberation Mono"',
-      '"Courier New"',
-      'monospace',
-    ],
-  },
-  fontSize: {
-    xs: ['0.75rem', { lineHeight: '1rem' }],
-    sm: ['0.875rem', { lineHeight: '1.25rem' }],
-    base: ['1rem', { lineHeight: '1.5rem' }],
-    lg: ['1.125rem', { lineHeight: '1.75rem' }],
-    xl: ['1.25rem', { lineHeight: '1.75rem' }],
-    '2xl': ['1.5rem', { lineHeight: '2rem' }],
-    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
-    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
-    '5xl': ['3rem', { lineHeight: '1' }],
-    '6xl': ['3.75rem', { lineHeight: '1' }],
-    '7xl': ['4.5rem', { lineHeight: '1' }],
-    '8xl': ['6rem', { lineHeight: '1' }],
-    '9xl': ['8rem', { lineHeight: '1' }],
-  },
-  fontWeight: {
-    thin: '100',
-    extralight: '200',
-    light: '300',
-    normal: '400',
-    medium: '500',
-    semibold: '600',
-    bold: '700',
-    extrabold: '800',
-    black: '900',
-  },
-  gap: ({ theme }) => theme('spacing'),
-  gradientColorStops: ({ theme }) => theme('colors'),
-  gradientColorStopPositions: {
-    '0%': '0%',
-    '5%': '5%',
-    '10%': '10%',
-    '15%': '15%',
-    '20%': '20%',
-    '25%': '25%',
-    '30%': '30%',
-    '35%': '35%',
-    '40%': '40%',
-    '45%': '45%',
-    '50%': '50%',
-    '55%': '55%',
-    '60%': '60%',
-    '65%': '65%',
-    '70%': '70%',
-    '75%': '75%',
-    '80%': '80%',
-    '85%': '85%',
-    '90%': '90%',
-    '95%': '95%',
-    '100%': '100%',
-    ...barePercentages,
-  },
-  grayscale: {
-    0: '0',
-    DEFAULT: '100%',
-    ...barePercentages,
-  },
-  gridAutoColumns: {
-    auto: 'auto',
-    min: 'min-content',
-    max: 'max-content',
-    fr: 'minmax(0, 1fr)',
-  },
-  gridAutoRows: {
-    auto: 'auto',
-    min: 'min-content',
-    max: 'max-content',
-    fr: 'minmax(0, 1fr)',
-  },
-  gridColumn: {
-    auto: 'auto',
-    'span-1': 'span 1 / span 1',
-    'span-2': 'span 2 / span 2',
-    'span-3': 'span 3 / span 3',
-    'span-4': 'span 4 / span 4',
-    'span-5': 'span 5 / span 5',
-    'span-6': 'span 6 / span 6',
-    'span-7': 'span 7 / span 7',
-    'span-8': 'span 8 / span 8',
-    'span-9': 'span 9 / span 9',
-    'span-10': 'span 10 / span 10',
-    'span-11': 'span 11 / span 11',
-    'span-12': 'span 12 / span 12',
-    'span-full': '1 / -1',
-  },
-  gridColumnEnd: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-    13: '13',
-    ...bareIntegers,
-  },
-  gridColumnStart: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-    13: '13',
-    ...bareIntegers,
-  },
-  gridRow: {
-    auto: 'auto',
-    'span-1': 'span 1 / span 1',
-    'span-2': 'span 2 / span 2',
-    'span-3': 'span 3 / span 3',
-    'span-4': 'span 4 / span 4',
-    'span-5': 'span 5 / span 5',
-    'span-6': 'span 6 / span 6',
-    'span-7': 'span 7 / span 7',
-    'span-8': 'span 8 / span 8',
-    'span-9': 'span 9 / span 9',
-    'span-10': 'span 10 / span 10',
-    'span-11': 'span 11 / span 11',
-    'span-12': 'span 12 / span 12',
-    'span-full': '1 / -1',
-  },
-  gridRowEnd: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-    13: '13',
-    ...bareIntegers,
-  },
-  gridRowStart: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-    13: '13',
-    ...bareIntegers,
-  },
-  gridTemplateColumns: {
-    none: 'none',
-    subgrid: 'subgrid',
-    1: 'repeat(1, minmax(0, 1fr))',
-    2: 'repeat(2, minmax(0, 1fr))',
-    3: 'repeat(3, minmax(0, 1fr))',
-    4: 'repeat(4, minmax(0, 1fr))',
-    5: 'repeat(5, minmax(0, 1fr))',
-    6: 'repeat(6, minmax(0, 1fr))',
-    7: 'repeat(7, minmax(0, 1fr))',
-    8: 'repeat(8, minmax(0, 1fr))',
-    9: 'repeat(9, minmax(0, 1fr))',
-    10: 'repeat(10, minmax(0, 1fr))',
-    11: 'repeat(11, minmax(0, 1fr))',
-    12: 'repeat(12, minmax(0, 1fr))',
-    ...bareRepeatValues,
-  },
-  gridTemplateRows: {
-    none: 'none',
-    subgrid: 'subgrid',
-    1: 'repeat(1, minmax(0, 1fr))',
-    2: 'repeat(2, minmax(0, 1fr))',
-    3: 'repeat(3, minmax(0, 1fr))',
-    4: 'repeat(4, minmax(0, 1fr))',
-    5: 'repeat(5, minmax(0, 1fr))',
-    6: 'repeat(6, minmax(0, 1fr))',
-    7: 'repeat(7, minmax(0, 1fr))',
-    8: 'repeat(8, minmax(0, 1fr))',
-    9: 'repeat(9, minmax(0, 1fr))',
-    10: 'repeat(10, minmax(0, 1fr))',
-    11: 'repeat(11, minmax(0, 1fr))',
-    12: 'repeat(12, minmax(0, 1fr))',
-    ...bareRepeatValues,
-  },
-  height: ({ theme }) => ({
-    auto: 'auto',
-    '1/2': '50%',
-    '1/3': '33.333333%',
-    '2/3': '66.666667%',
-    '1/4': '25%',
-    '2/4': '50%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.666667%',
-    '2/6': '33.333333%',
-    '3/6': '50%',
-    '4/6': '66.666667%',
-    '5/6': '83.333333%',
-    full: '100%',
-    screen: '100vh',
-    svh: '100svh',
-    lvh: '100lvh',
-    dvh: '100dvh',
-    min: 'min-content',
-    max: 'max-content',
-    fit: 'fit-content',
-    ...theme('spacing'),
-  }),
-  hueRotate: {
-    0: '0deg',
-    15: '15deg',
-    30: '30deg',
-    60: '60deg',
-    90: '90deg',
-    180: '180deg',
-    ...bareDegrees,
-  },
-  inset: ({ theme }) => ({
-    auto: 'auto',
-    '1/2': '50%',
-    '1/3': '33.333333%',
-    '2/3': '66.666667%',
-    '1/4': '25%',
-    '2/4': '50%',
-    '3/4': '75%',
-    full: '100%',
-    ...theme('spacing'),
-  }),
-  invert: {
-    0: '0',
-    DEFAULT: '100%',
-    ...barePercentages,
-  },
-  keyframes: {
-    spin: {
-      to: {
-        transform: 'rotate(360deg)',
-      },
-    },
-    ping: {
-      '75%, 100%': {
-        transform: 'scale(2)',
-        opacity: '0',
-      },
-    },
-    pulse: {
-      '50%': {
-        opacity: '.5',
-      },
-    },
-    bounce: {
-      '0%, 100%': {
-        transform: 'translateY(-25%)',
-        animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
-      },
-      '50%': {
-        transform: 'none',
-        animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
-      },
-    },
-  },
-  letterSpacing: {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0em',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em',
-  },
-  lineHeight: {
-    none: '1',
-    tight: '1.25',
-    snug: '1.375',
-    normal: '1.5',
-    relaxed: '1.625',
-    loose: '2',
-    3: '.75rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-  },
-  listStyleType: {
-    none: 'none',
-    disc: 'disc',
-    decimal: 'decimal',
-  },
-  listStyleImage: {
-    none: 'none',
-  },
-  margin: ({ theme }) => ({
-    auto: 'auto',
-    ...theme('spacing'),
-  }),
-  lineClamp: {
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    ...bareIntegers,
-  },
-  maxHeight: ({ theme }) => ({
-    none: 'none',
-    full: '100%',
-    screen: '100vh',
-    svh: '100svh',
-    lvh: '100lvh',
-    dvh: '100dvh',
-    min: 'min-content',
-    max: 'max-content',
-    fit: 'fit-content',
-    ...theme('spacing'),
-  }),
-  maxWidth: ({ theme }) => ({
-    none: 'none',
-    xs: '20rem',
-    sm: '24rem',
-    md: '28rem',
-    lg: '32rem',
-    xl: '36rem',
-    '2xl': '42rem',
-    '3xl': '48rem',
-    '4xl': '56rem',
-    '5xl': '64rem',
-    '6xl': '72rem',
-    '7xl': '80rem',
-    full: '100%',
-    min: 'min-content',
-    max: 'max-content',
-    fit: 'fit-content',
-    prose: '65ch',
-    ...theme('spacing'),
-  }),
-  minHeight: ({ theme }) => ({
-    full: '100%',
-    screen: '100vh',
-    svh: '100svh',
-    lvh: '100lvh',
-    dvh: '100dvh',
-    min: 'min-content',
-    max: 'max-content',
-    fit: 'fit-content',
-    ...theme('spacing'),
-  }),
-  minWidth: ({ theme }) => ({
-    full: '100%',
-    min: 'min-content',
-    max: 'max-content',
-    fit: 'fit-content',
-    ...theme('spacing'),
-  }),
-  objectPosition: {
-    bottom: 'bottom',
-    center: 'center',
-    left: 'left',
-    'left-bottom': 'left bottom',
-    'left-top': 'left top',
-    right: 'right',
-    'right-bottom': 'right bottom',
-    'right-top': 'right top',
-    top: 'top',
-  },
-  opacity: {
-    0: '0',
-    5: '0.05',
-    10: '0.1',
-    15: '0.15',
-    20: '0.2',
-    25: '0.25',
-    30: '0.3',
-    35: '0.35',
-    40: '0.4',
-    45: '0.45',
-    50: '0.5',
-    55: '0.55',
-    60: '0.6',
-    65: '0.65',
-    70: '0.7',
-    75: '0.75',
-    80: '0.8',
-    85: '0.85',
-    90: '0.9',
-    95: '0.95',
-    100: '1',
-    ...barePercentages,
-  },
-  order: {
-    first: '-9999',
-    last: '9999',
-    none: '0',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-    ...bareIntegers,
-  },
-  outlineColor: ({ theme }) => theme('colors'),
-  outlineOffset: {
-    0: '0px',
-    1: '1px',
-    2: '2px',
-    4: '4px',
-    8: '8px',
-    ...barePixels,
-  },
-  outlineWidth: {
-    0: '0px',
-    1: '1px',
-    2: '2px',
-    4: '4px',
-    8: '8px',
-    ...barePixels,
-  },
-  padding: ({ theme }) => theme('spacing'),
-  placeholderColor: ({ theme }) => theme('colors'),
-  placeholderOpacity: ({ theme }) => theme('opacity'),
-  ringColor: ({ theme }) => ({
-    DEFAULT: 'currentcolor',
-    ...theme('colors'),
-  }),
-  ringOffsetColor: ({ theme }) => theme('colors'),
-  ringOffsetWidth: {
-    0: '0px',
-    1: '1px',
-    2: '2px',
-    4: '4px',
-    8: '8px',
-    ...barePixels,
-  },
-  ringOpacity: ({ theme }) => ({
-    DEFAULT: '0.5',
-    ...theme('opacity'),
-  }),
-  ringWidth: {
-    DEFAULT: '3px',
-    0: '0px',
-    1: '1px',
-    2: '2px',
-    4: '4px',
-    8: '8px',
-    ...barePixels,
-  },
-  rotate: {
-    0: '0deg',
-    1: '1deg',
-    2: '2deg',
-    3: '3deg',
-    6: '6deg',
-    12: '12deg',
-    45: '45deg',
-    90: '90deg',
-    180: '180deg',
-    ...bareDegrees,
-  },
-  saturate: {
-    0: '0',
-    50: '.5',
-    100: '1',
-    150: '1.5',
-    200: '2',
-    ...barePercentages,
-  },
-  scale: {
-    0: '0',
-    50: '.5',
-    75: '.75',
-    90: '.9',
-    95: '.95',
-    100: '1',
-    105: '1.05',
-    110: '1.1',
-    125: '1.25',
-    150: '1.5',
-    ...barePercentages,
-  },
-  screens: {
-    sm: '40rem',
-    md: '48rem',
-    lg: '64rem',
-    xl: '80rem',
-    '2xl': '96rem',
-  },
-  scrollMargin: ({ theme }) => theme('spacing'),
-  scrollPadding: ({ theme }) => theme('spacing'),
-  sepia: {
-    0: '0',
-    DEFAULT: '100%',
-    ...barePercentages,
-  },
-  skew: {
-    0: '0deg',
-    1: '1deg',
-    2: '2deg',
-    3: '3deg',
-    6: '6deg',
-    12: '12deg',
-    ...bareDegrees,
-  },
-  space: ({ theme }) => theme('spacing'),
-  spacing: {
-    px: '1px',
-    0: '0px',
-    0.5: '0.125rem',
-    1: '0.25rem',
-    1.5: '0.375rem',
-    2: '0.5rem',
-    2.5: '0.625rem',
-    3: '0.75rem',
-    3.5: '0.875rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-    11: '2.75rem',
-    12: '3rem',
-    14: '3.5rem',
-    16: '4rem',
-    20: '5rem',
-    24: '6rem',
-    28: '7rem',
-    32: '8rem',
-    36: '9rem',
-    40: '10rem',
-    44: '11rem',
-    48: '12rem',
-    52: '13rem',
-    56: '14rem',
-    60: '15rem',
-    64: '16rem',
-    72: '18rem',
-    80: '20rem',
-    96: '24rem',
-  },
-  stroke: ({ theme }) => ({
-    none: 'none',
-    ...theme('colors'),
-  }),
-  strokeWidth: {
-    0: '0',
-    1: '1',
-    2: '2',
-    ...bareIntegers,
-  },
-  supports: {},
-  data: {},
-  textColor: ({ theme }) => theme('colors'),
-  textDecorationColor: ({ theme }) => theme('colors'),
-  textDecorationThickness: {
-    auto: 'auto',
-    'from-font': 'from-font',
-    0: '0px',
-    1: '1px',
-    2: '2px',
-    4: '4px',
-    8: '8px',
-    ...barePixels,
-  },
-  textIndent: ({ theme }) => theme('spacing'),
-  textOpacity: ({ theme }) => theme('opacity'),
-  textUnderlineOffset: {
-    auto: 'auto',
-    0: '0px',
-    1: '1px',
-    2: '2px',
-    4: '4px',
-    8: '8px',
-    ...barePixels,
-  },
-  transformOrigin: {
-    center: 'center',
-    top: 'top',
-    'top-right': 'top right',
-    right: 'right',
-    'bottom-right': 'bottom right',
-    bottom: 'bottom',
-    'bottom-left': 'bottom left',
-    left: 'left',
-    'top-left': 'top left',
-  },
-  transitionDelay: {
-    0: '0s',
-    75: '75ms',
-    100: '100ms',
-    150: '150ms',
-    200: '200ms',
-    300: '300ms',
-    500: '500ms',
-    700: '700ms',
-    1000: '1000ms',
-    ...bareMilliseconds,
-  },
-  transitionDuration: {
-    DEFAULT: '150ms',
-    0: '0s',
-    75: '75ms',
-    100: '100ms',
-    150: '150ms',
-    200: '200ms',
-    300: '300ms',
-    500: '500ms',
-    700: '700ms',
-    1000: '1000ms',
-    ...bareMilliseconds,
-  },
-  transitionProperty: {
-    none: 'none',
-    all: 'all',
-    DEFAULT:
-      'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-    colors:
-      'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke',
-    opacity: 'opacity',
-    shadow: 'box-shadow',
-    transform: 'transform',
-  },
-  transitionTimingFunction: {
-    DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    linear: 'linear',
-    in: 'cubic-bezier(0.4, 0, 1, 1)',
-    out: 'cubic-bezier(0, 0, 0.2, 1)',
-    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-  },
-  translate: ({ theme }) => ({
-    '1/2': '50%',
-    '1/3': '33.333333%',
-    '2/3': '66.666667%',
-    '1/4': '25%',
-    '2/4': '50%',
-    '3/4': '75%',
-    full: '100%',
-    ...theme('spacing'),
-  }),
-  size: ({ theme }) => ({
-    auto: 'auto',
-    '1/2': '50%',
-    '1/3': '33.333333%',
-    '2/3': '66.666667%',
-    '1/4': '25%',
-    '2/4': '50%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.666667%',
-    '2/6': '33.333333%',
-    '3/6': '50%',
-    '4/6': '66.666667%',
-    '5/6': '83.333333%',
-    '1/12': '8.333333%',
-    '2/12': '16.666667%',
-    '3/12': '25%',
-    '4/12': '33.333333%',
-    '5/12': '41.666667%',
-    '6/12': '50%',
-    '7/12': '58.333333%',
-    '8/12': '66.666667%',
-    '9/12': '75%',
-    '10/12': '83.333333%',
-    '11/12': '91.666667%',
-    full: '100%',
-    min: 'min-content',
-    max: 'max-content',
-    fit: 'fit-content',
-    ...theme('spacing'),
-  }),
-  width: ({ theme }) => ({
-    auto: 'auto',
-
-    '1/2': '50%',
-    '1/3': '33.333333%',
-    '2/3': '66.666667%',
-    '1/4': '25%',
-    '2/4': '50%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.666667%',
-    '2/6': '33.333333%',
-    '3/6': '50%',
-    '4/6': '66.666667%',
-    '5/6': '83.333333%',
-    '1/12': '8.333333%',
-    '2/12': '16.666667%',
-    '3/12': '25%',
-    '4/12': '33.333333%',
-    '5/12': '41.666667%',
-    '6/12': '50%',
-    '7/12': '58.333333%',
-    '8/12': '66.666667%',
-    '9/12': '75%',
-    '10/12': '83.333333%',
-    '11/12': '91.666667%',
-    full: '100%',
-    screen: '100vw',
-    svw: '100svw',
-    lvw: '100lvw',
-    dvw: '100dvw',
-    min: 'min-content',
-    max: 'max-content',
-    fit: 'fit-content',
-    ...theme('spacing'),
-  }),
-  willChange: {
-    auto: 'auto',
-    scroll: 'scroll-position',
-    contents: 'contents',
-    transform: 'transform',
-  },
-  zIndex: {
-    auto: 'auto',
-    0: '0',
-    10: '10',
-    20: '20',
-    30: '30',
-    40: '40',
-    50: '50',
-    ...bareIntegers,
-  },
-} satisfies UserConfig['theme']
diff --git a/packages/tailwindcss/src/compat/flatten-color-palette.cts b/packages/tailwindcss/src/compat/flatten-color-palette.cts
deleted file mode 100644
index d8b4be144..000000000
--- a/packages/tailwindcss/src/compat/flatten-color-palette.cts
+++ /dev/null
@@ -1,8 +0,0 @@
-import flattenColorPalette from './flatten-color-palette.ts'
-
-// This file exists so that `flatten-color-palette.ts` can be written one time
-// but be compatible with both CJS and ESM. Without it we get a `.default`
-// export when using `require` in CJS.
-
-// @ts-ignore
-export = flattenColorPalette
diff --git a/packages/tailwindcss/src/compat/flatten-color-palette.test.ts b/packages/tailwindcss/src/compat/flatten-color-palette.test.ts
deleted file mode 100644
index 7ddda5bd4..000000000
--- a/packages/tailwindcss/src/compat/flatten-color-palette.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { expect, test } from 'vitest'
-import flattenColorPalette from './flatten-color-palette'
-
-test('it should handle private __CSS_VALUES__ to resolve to the right value', () => {
-  expect(
-    flattenColorPalette({
-      'slate-100': '#000100',
-      'slate-200': '#000200',
-      'slate-300': '#000300',
-      'slate-400': '#100400',
-      'slate-500': '#100500',
-      __CSS_VALUES__: {
-        'slate-100': 4,
-        'slate-200': 4,
-        'slate-300': 4,
-        'slate-400': 0,
-        'slate-500': 0,
-      } as any,
-      slate: { '200': '#200200', '400': '#200400', '600': '#200600' },
-      'slate-600': '#200600',
-    }),
-  ).toMatchInlineSnapshot(`
-    {
-      "slate-100": "#000100",
-      "slate-200": "#200200",
-      "slate-300": "#000300",
-      "slate-400": "#100400",
-      "slate-500": "#100500",
-      "slate-600": "#200600",
-    }
-  `)
-})
diff --git a/packages/tailwindcss/src/compat/flatten-color-palette.ts b/packages/tailwindcss/src/compat/flatten-color-palette.ts
deleted file mode 100644
index ca8845688..000000000
--- a/packages/tailwindcss/src/compat/flatten-color-palette.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ThemeOptions } from '../theme'
-
-type Colors = {
-  [key: string | number]: string | Colors
-}
-
-export default function flattenColorPalette(colors: Colors) {
-  let result: Record<string, string> = {}
-
-  for (let [root, children] of Object.entries(colors ?? {})) {
-    if (root === '__CSS_VALUES__') continue
-    if (typeof children === 'object' && children !== null) {
-      for (let [parent, value] of Object.entries(flattenColorPalette(children))) {
-        result[`${root}${parent === 'DEFAULT' ? '' : `-${parent}`}`] = value
-      }
-    } else {
-      result[root] = children
-    }
-  }
-
-  if ('__CSS_VALUES__' in colors) {
-    for (let [key, value] of Object.entries(colors.__CSS_VALUES__)) {
-      if ((Number(value) & ThemeOptions.DEFAULT) === 0) {
-        result[key] = colors[key] as string
-      }
-    }
-  }
-
-  return result
-}
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
deleted file mode 100644
index c90eae845..000000000
--- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts
+++ /dev/null
@@ -1,398 +0,0 @@
-import { expect, test } from 'vitest'
-import { run } from '../test-utils/run'
-
-const css = String.raw
-
-test('bg-gradient-*', async () => {
-  expect(
-    await run([
-      'bg-gradient-to-t',
-      'bg-gradient-to-tr',
-      'bg-gradient-to-r',
-      'bg-gradient-to-br',
-      'bg-gradient-to-b',
-      'bg-gradient-to-bl',
-      'bg-gradient-to-l',
-      'bg-gradient-to-tl',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .bg-gradient-to-b {
-      --tw-gradient-position: to bottom in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-bl {
-      --tw-gradient-position: to bottom left in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-br {
-      --tw-gradient-position: to bottom right in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-l {
-      --tw-gradient-position: to left in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-r {
-      --tw-gradient-position: to right in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-t {
-      --tw-gradient-position: to top in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-tl {
-      --tw-gradient-position: to top left in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-tr {
-      --tw-gradient-position: to top right in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-    "
-  `)
-})
-
-test('max-w-screen', async () => {
-  expect(
-    await run(
-      [
-        'max-w-screen-sm',
-        'max-w-screen-md',
-        'max-w-screen-lg',
-        'max-w-screen-xl',
-        'max-w-screen-2xl',
-      ],
-      css`
-        @theme {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-
-    .max-w-screen-2xl {
-      max-width: var(--breakpoint-2xl);
-    }
-
-    .max-w-screen-lg {
-      max-width: var(--breakpoint-lg);
-    }
-
-    .max-w-screen-md {
-      max-width: var(--breakpoint-md);
-    }
-
-    .max-w-screen-sm {
-      max-width: var(--breakpoint-sm);
-    }
-
-    .max-w-screen-xl {
-      max-width: var(--breakpoint-xl);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'max-w-screen-oh',
-      'max-w-screen-4',
-      'max-w-screen-[4px]',
-      '-max-w-screen-sm',
-      '-max-w-screen-[4px]',
-      'max-w-screen-none/foo',
-      'max-w-screen-full/foo',
-      'max-w-screen-max/foo',
-      'max-w-screen-max/foo',
-      'max-w-screen-fit/foo',
-      'max-w-screen-4/foo',
-      'max-w-screen-xl/foo',
-      'max-w-screen-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('box-decoration', async () => {
-  expect(await run(['decoration-slice', 'decoration-clone'])).toMatchInlineSnapshot(`
-    "
-    .decoration-clone {
-      -webkit-box-decoration-break: clone;
-      box-decoration-break: clone;
-    }
-
-    .decoration-slice {
-      -webkit-box-decoration-break: slice;
-      box-decoration-break: slice;
-    }
-    "
-  `)
-})
-
-test('overflow-ellipsis', async () => {
-  expect(await run(['overflow-ellipsis'])).toMatchInlineSnapshot(`
-    "
-    .overflow-ellipsis {
-      text-overflow: ellipsis;
-    }
-    "
-  `)
-})
-
-test('flex-grow', async () => {
-  expect(await run(['flex-grow', 'flex-grow-0', 'flex-grow-[123]'])).toMatchInlineSnapshot(`
-    "
-    .flex-grow {
-      flex-grow: 1;
-    }
-
-    .flex-grow-0 {
-      flex-grow: 0;
-    }
-
-    .flex-grow-\\[123\\] {
-      flex-grow: 123;
-    }
-    "
-  `)
-  expect(
-    await run([
-      '-flex-grow',
-      'flex-grow--1',
-      'flex-grow-1.5',
-      '-flex-grow-0',
-      '-flex-grow-[123]',
-      'flex-grow-unknown',
-      'flex-grow/foo',
-      'flex-grow-0/foo',
-      'flex-grow-[123]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('flex-shrink', async () => {
-  expect(await run(['flex-shrink', 'flex-shrink-0', 'flex-shrink-[123]'])).toMatchInlineSnapshot(`
-    "
-    .flex-shrink {
-      flex-shrink: 1;
-    }
-
-    .flex-shrink-0 {
-      flex-shrink: 0;
-    }
-
-    .flex-shrink-\\[123\\] {
-      flex-shrink: 123;
-    }
-    "
-  `)
-  expect(
-    await run([
-      '-flex-shrink',
-      'flex-shrink--1',
-      'flex-shrink-1.5',
-      '-flex-shrink-0',
-      '-flex-shrink-[123]',
-      'flex-shrink-unknown',
-      'flex-shrink/foo',
-      'flex-shrink-0/foo',
-      'flex-shrink-[123]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('start', async () => {
-  expect(
-    await run(
-      [
-        'start-shadowned',
-        'start-auto',
-        '-start-full',
-        'start-full',
-        'start-3/4',
-        'start-4',
-        '-start-4',
-        'start-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --inset-shadowned: 1940px;
-    }
-
-    .-start-4 {
-      inset-inline-start: calc(var(--spacing) * -4);
-    }
-
-    .-start-full {
-      inset-inline-start: -100%;
-    }
-
-    .start-3\\/4 {
-      inset-inline-start: 75%;
-    }
-
-    .start-4 {
-      inset-inline-start: calc(var(--spacing) * 4);
-    }
-
-    .start-\\[4px\\] {
-      inset-inline-start: 4px;
-    }
-
-    .start-auto {
-      inset-inline-start: auto;
-    }
-
-    .start-full {
-      inset-inline-start: 100%;
-    }
-
-    .start-shadowned {
-      inset-inline-start: var(--inset-shadowned);
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'start-shadow-sm',
-        'start',
-        'start--1',
-        'start--1/2',
-        'start--1/-2',
-        'start-1/-2',
-        'start-auto/foo',
-        '-start-full/foo',
-        'start-full/foo',
-        'start-3/4/foo',
-        'start-4/foo',
-        '-start-4/foo',
-        'start-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing: 0.25rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
-})
-
-test('end', async () => {
-  expect(
-    await run(
-      [
-        'end-shadowned',
-        'end-auto',
-        '-end-full',
-        'end-full',
-        'end-3/4',
-        'end-4',
-        '-end-4',
-        'end-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --inset-shadowned: 1940px;
-    }
-
-    .-end-4 {
-      inset-inline-end: calc(var(--spacing) * -4);
-    }
-
-    .-end-full {
-      inset-inline-end: -100%;
-    }
-
-    .end-3\\/4 {
-      inset-inline-end: 75%;
-    }
-
-    .end-4 {
-      inset-inline-end: calc(var(--spacing) * 4);
-    }
-
-    .end-\\[4px\\] {
-      inset-inline-end: 4px;
-    }
-
-    .end-auto {
-      inset-inline-end: auto;
-    }
-
-    .end-full {
-      inset-inline-end: 100%;
-    }
-
-    .end-shadowned {
-      inset-inline-end: var(--inset-shadowned);
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'end-shadow-sm',
-        'end',
-        'end--1',
-        'end--1/2',
-        'end--1/-2',
-        'end-1/-2',
-        'end-auto/foo',
-        '-end-full/foo',
-        'end-full/foo',
-        'end-3/4/foo',
-        'end-4/foo',
-        '-end-4/foo',
-        'end-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing: 0.25rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
-})
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts
deleted file mode 100644
index 8e7829035..000000000
--- a/packages/tailwindcss/src/compat/legacy-utilities.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import { decl } from '../ast'
-import type { DesignSystem } from '../design-system'
-import { isPositiveInteger, isValidSpacingMultiplier } from '../utils/infer-data-type'
-import { segment } from '../utils/segment'
-
-export function registerLegacyUtilities(designSystem: DesignSystem) {
-  for (let [value, direction] of [
-    ['t', 'top'],
-    ['tr', 'top right'],
-    ['r', 'right'],
-    ['br', 'bottom right'],
-    ['b', 'bottom'],
-    ['bl', 'bottom left'],
-    ['l', 'left'],
-    ['tl', 'top left'],
-  ]) {
-    designSystem.utilities.suggest(`bg-gradient-to-${value}`, () => [])
-    designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
-      decl('--tw-gradient-position', `to ${direction} in oklab`),
-      decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
-    ])
-  }
-
-  // Legacy `background-position` utilities for compatibility with v4.0 and earlier
-  designSystem.utilities.suggest('bg-left-top', () => [])
-  designSystem.utilities.static('bg-left-top', () => [decl('background-position', 'left top')])
-  designSystem.utilities.suggest('bg-right-top', () => [])
-  designSystem.utilities.static('bg-right-top', () => [decl('background-position', 'right top')])
-  designSystem.utilities.suggest('bg-left-bottom', () => [])
-  designSystem.utilities.static('bg-left-bottom', () => [
-    decl('background-position', 'left bottom'),
-  ])
-  designSystem.utilities.suggest('bg-right-bottom', () => [])
-  designSystem.utilities.static('bg-right-bottom', () => [
-    decl('background-position', 'right bottom'),
-  ])
-
-  // Legacy `object-position` utilities for compatibility with v4.0 and earlier
-  designSystem.utilities.suggest('object-left-top', () => [])
-  designSystem.utilities.static('object-left-top', () => [decl('object-position', 'left top')])
-  designSystem.utilities.suggest('object-right-top', () => [])
-  designSystem.utilities.static('object-right-top', () => [decl('object-position', 'right top')])
-  designSystem.utilities.suggest('object-left-bottom', () => [])
-  designSystem.utilities.static('object-left-bottom', () => [
-    decl('object-position', 'left bottom'),
-  ])
-  designSystem.utilities.suggest('object-right-bottom', () => [])
-  designSystem.utilities.static('object-right-bottom', () => [
-    decl('object-position', 'right bottom'),
-  ])
-
-  designSystem.utilities.suggest('max-w-screen', () => [])
-  designSystem.utilities.functional('max-w-screen', (candidate) => {
-    if (!candidate.value) return
-    if (candidate.value.kind === 'arbitrary') return
-    let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
-    if (!value) return
-    return [decl('max-width', value)]
-  })
-
-  designSystem.utilities.suggest('overflow-ellipsis', () => [])
-  designSystem.utilities.static(`overflow-ellipsis`, () => [decl('text-overflow', `ellipsis`)])
-
-  designSystem.utilities.suggest('decoration-slice', () => [])
-  designSystem.utilities.static(`decoration-slice`, () => [
-    decl('-webkit-box-decoration-break', `slice`),
-    decl('box-decoration-break', `slice`),
-  ])
-
-  designSystem.utilities.suggest('decoration-clone', () => [])
-  designSystem.utilities.static(`decoration-clone`, () => [
-    decl('-webkit-box-decoration-break', `clone`),
-    decl('box-decoration-break', `clone`),
-  ])
-
-  designSystem.utilities.suggest('flex-shrink', () => [])
-  designSystem.utilities.functional('flex-shrink', (candidate) => {
-    if (candidate.modifier) return
-
-    if (!candidate.value) {
-      return [decl('flex-shrink', '1')]
-    }
-
-    if (candidate.value.kind === 'arbitrary') {
-      return [decl('flex-shrink', candidate.value.value)]
-    }
-
-    if (isPositiveInteger(candidate.value.value)) {
-      return [decl('flex-shrink', candidate.value.value)]
-    }
-  })
-
-  designSystem.utilities.suggest('flex-grow', () => [])
-  designSystem.utilities.functional('flex-grow', (candidate) => {
-    if (candidate.modifier) return
-
-    if (!candidate.value) {
-      return [decl('flex-grow', '1')]
-    }
-
-    if (candidate.value.kind === 'arbitrary') {
-      return [decl('flex-grow', candidate.value.value)]
-    }
-
-    if (isPositiveInteger(candidate.value.value)) {
-      return [decl('flex-grow', candidate.value.value)]
-    }
-  })
-
-  designSystem.utilities.suggest('order-none', () => [])
-  designSystem.utilities.static('order-none', () => [decl('order', '0')])
-
-  designSystem.utilities.suggest('break-words', () => [])
-  designSystem.utilities.static('break-words', () => [decl('overflow-wrap', 'break-word')])
-
-  // Legacy `start` and `end` inset utilities, replaced by `inset-s` and `inset-e`
-  for (let [name, property] of [
-    ['start', 'inset-inline-start'],
-    ['end', 'inset-inline-end'],
-  ] as const) {
-    designSystem.utilities.static(`${name}-auto`, () => [decl(property, 'auto')])
-    designSystem.utilities.static(`${name}-full`, () => [decl(property, '100%')])
-    designSystem.utilities.static(`-${name}-full`, () => [decl(property, '-100%')])
-    designSystem.utilities.static(`${name}-px`, () => [decl(property, '1px')])
-    designSystem.utilities.static(`-${name}-px`, () => [decl(property, '-1px')])
-
-    function handleInset({ negative }: { negative: boolean }) {
-      return (candidate: Extract<import('../candidate').Candidate, { kind: 'functional' }>) => {
-        if (candidate.value === null) return
-
-        if (candidate.value.kind === 'arbitrary') {
-          if (candidate.modifier) return
-          let value = candidate.value.value
-          return [decl(property, negative ? `calc(${value} * -1)` : value)]
-        }
-
-        let value = designSystem.theme.resolve(candidate.value.fraction ?? candidate.value.value, [
-          '--inset',
-          '--spacing',
-        ])
-
-        // Handle fractions like `start-1/2`
-        if (value === null && candidate.value.fraction) {
-          let [lhs, rhs] = segment(candidate.value.fraction, '/')
-          if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) return
-          value = `calc(${candidate.value.fraction} * 100%)`
-        }
-
-        // Handle bare spacing multiplier values like `start-4`
-        if (value === null && negative) {
-          let multiplier = designSystem.theme.resolve(null, ['--spacing'])
-          if (multiplier && isValidSpacingMultiplier(candidate.value.value)) {
-            value = `calc(${multiplier} * -${candidate.value.value})`
-            if (value !== null) return [decl(property, value)]
-          }
-        }
-
-        if (value === null) {
-          let multiplier = designSystem.theme.resolve(null, ['--spacing'])
-          if (multiplier && isValidSpacingMultiplier(candidate.value.value)) {
-            value = `calc(${multiplier} * ${candidate.value.value})`
-          }
-        }
-
-        if (value === null) return
-
-        return [decl(property, negative ? `calc(${value} * -1)` : value)]
-      }
-    }
-
-    designSystem.utilities.functional(`-${name}`, handleInset({ negative: true }))
-    designSystem.utilities.functional(name, handleInset({ negative: false }))
-  }
-}
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
deleted file mode 100644
index 5fcacb5cd..000000000
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ /dev/null
@@ -1,4631 +0,0 @@
-import { describe, expect, test, vi } from 'vitest'
-import { compile } from '..'
-import plugin from '../plugin'
-import { compileCss, run } from '../test-utils/run'
-import defaultTheme from './default-theme'
-import type { CssInJs, PluginAPI } from './plugin-api'
-
-const css = String.raw
-
-describe('theme', async () => {
-  test('plugin theme can contain objects', async () => {
-    expect(
-      await compileCss(
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ addBase, theme }) {
-                  addBase({
-                    '@keyframes enter': theme('keyframes.enter'),
-                    '@keyframes exit': theme('keyframes.exit'),
-                  })
-                },
-                {
-                  theme: {
-                    extend: {
-                      keyframes: {
-                        enter: {
-                          from: {
-                            opacity: 'var(--tw-enter-opacity, 1)',
-                            transform:
-                              'translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))',
-                          },
-                        },
-                        exit: {
-                          to: {
-                            opacity: 'var(--tw-exit-opacity, 1)',
-                            transform:
-                              'translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))',
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer base {
-        @keyframes enter {
-          from {
-            opacity: var(--tw-enter-opacity, 1);
-            transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
-          }
-        }
-
-        @keyframes exit {
-          to {
-            opacity: var(--tw-exit-opacity, 1);
-            transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('keyframes added via addUtilities are appended to the AST', async () => {
-    expect(
-      await compileCss(
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ addUtilities }) {
-                addUtilities({
-                  '@keyframes enter': { from: { opacity: 'var(--tw-enter-opacity, 1)' } },
-                })
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @keyframes enter {
-        from {
-          opacity: var(--tw-enter-opacity, 1);
-        }
-      }
-      "
-    `)
-  })
-
-  test('plugin theme can extend colors', async () => {
-    expect(
-      await run(
-        ['scrollbar-red-500', 'scrollbar-russet-700'],
-        css`
-          @theme reference {
-            --color-red-500: #ef4444;
-          }
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { scrollbar: (value) => ({ 'scrollbar-color': value }) },
-                    { values: theme('colors') },
-                  )
-                },
-                { theme: { extend: { colors: { 'russet-700': '#7a4724' } } } },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .scrollbar-red-500 {
-        scrollbar-color: #ef4444;
-      }
-
-      .scrollbar-russet-700 {
-        scrollbar-color: #7a4724;
-      }
-      "
-    `)
-  })
-
-  test('plugin theme values can reference legacy theme keys that have been replaced with bare value support', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['animate-duration-316'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { 'animate-duration': (value) => ({ 'animation-duration': value }) },
-                    { values: theme('animationDuration') },
-                  )
-                },
-                {
-                  theme: {
-                    extend: {
-                      animationDuration: ({ theme }: { theme: (path: string) => any }) => {
-                        return { ...theme('transitionDuration') }
-                      },
-                    },
-                  },
-                },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animate-duration-316 {
-        animation-duration: .316s;
-      }
-      "
-    `)
-  })
-
-  test('plugin theme values that support bare values are merged with other values for that theme key', async ({
-    expect,
-  }) => {
-    expect(
-      await run(
-        ['animate-duration-316', 'animate-duration-slow'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { 'animate-duration': (value) => ({ 'animation-duration': value }) },
-                    { values: theme('animationDuration') },
-                  )
-                },
-                {
-                  theme: {
-                    extend: {
-                      transitionDuration: { slow: '800ms' },
-                      animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
-                        ...theme('transitionDuration'),
-                      }),
-                    },
-                  },
-                },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animate-duration-316 {
-        animation-duration: .316s;
-      }
-
-      .animate-duration-slow {
-        animation-duration: .8s;
-      }
-      "
-    `)
-  })
-
-  test('plugin theme can have opacity modifiers', async () => {
-    expect(
-      await run(
-        ['percentage', 'fraction', 'variable'],
-        css`
-          @tailwind utilities;
-          @theme {
-            --color-red-500: #ef4444;
-          }
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ addUtilities, theme }) {
-                addUtilities({
-                  '.percentage': { color: theme('colors.red.500 / 50%') },
-                  '.fraction': { color: theme('colors.red.500 / 0.5') },
-                  '.variable': { color: theme('colors.red.500 / var(--opacity)') },
-                })
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .fraction, .percentage {
-        color: oklab(63.6834% .187 .088 / .5);
-      }
-
-      .variable {
-        color: #ef4444;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .variable {
-          color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  test('plugin theme colors can use <alpha-value>', async () => {
-    expect(
-      await run(
-        [
-          'bg-custom',
-          'css-percentage',
-          'css-fraction',
-          'css-variable',
-          'js-percentage',
-          'js-fraction',
-          'js-variable',
-        ],
-        css`
-          @tailwind utilities;
-          @theme {
-            /* This should not work */
-            --color-custom-css: rgba(255 0 0 / <alpha-value>);
-          }
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ addUtilities, theme }) {
-                  addUtilities({
-                    '.css-percentage': { color: theme('colors.custom-css / 50%') },
-                    '.css-fraction': { color: theme('colors.custom-css / 0.5') },
-                    '.css-variable': { color: theme('colors.custom-css / var(--opacity)') },
-                    '.js-percentage': { color: theme('colors.custom-js / 50%') },
-                    '.js-fraction': { color: theme('colors.custom-js / 0.5') },
-                    '.js-variable': { color: theme('colors.custom-js / var(--opacity)') },
-                  })
-                },
-                {
-                  theme: {
-                    colors: {
-                      /* This should work */
-                      'custom-js': 'rgb(255 0 0 / <alpha-value>)',
-                    },
-                  },
-                },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .css-fraction, .css-percentage {
-        color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
-      }
-
-      .css-variable {
-        color: rgba(255 0 0 / <alpha-value>);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .css-variable {
-          color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
-        }
-      }
-
-      .js-fraction, .js-percentage {
-        color: oklab(62.7955% .224 .125 / .5);
-      }
-
-      .js-variable {
-        color: red;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .js-variable {
-          color: color-mix(in oklab, red var(--opacity), transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  test('theme value functions are resolved correctly regardless of order', async () => {
-    expect(
-      await run(
-        ['animate-delay-316', 'animate-delay-slow'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { 'animate-delay': (value) => ({ 'animation-delay': value }) },
-                    { values: theme('animationDelay') },
-                  )
-                },
-                {
-                  theme: {
-                    extend: {
-                      animationDuration: ({ theme }: { theme: (path: string) => any }) => ({
-                        ...theme('transitionDuration'),
-                      }),
-                      animationDelay: ({ theme }: { theme: (path: string) => any }) => ({
-                        ...theme('animationDuration'),
-                      }),
-                      transitionDuration: { slow: '800ms' },
-                    },
-                  },
-                },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animate-delay-316 {
-        animation-delay: .316s;
-      }
-
-      .animate-delay-slow {
-        animation-delay: .8s;
-      }
-      "
-    `)
-  })
-
-  test('plugins can override the default key', async () => {
-    expect(
-      await run(
-        ['animate-duration'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { 'animate-duration': (value) => ({ 'animation-delay': value }) },
-                    { values: theme('transitionDuration') },
-                  )
-                },
-                { theme: { extend: { transitionDuration: { DEFAULT: '1500ms' } } } },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animate-duration {
-        animation-delay: 1.5s;
-      }
-      "
-    `)
-  })
-
-  test('plugins can read CSS theme keys using the old theme key notation', async () => {
-    expect(
-      await run(
-        ['animation-spin', 'animation', 'animation2', 'animation2-twist'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-          @theme reference {
-            --animate: pulse 1s linear infinite;
-            --animate-spin: spin 1s linear infinite;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ matchUtilities, theme }) {
-                matchUtilities(
-                  { animation: (value) => ({ animation: value }) },
-                  { values: theme('animation') },
-                )
-
-                matchUtilities(
-                  { animation2: (value) => ({ animation: value }) },
-                  {
-                    values: { DEFAULT: theme('animation.DEFAULT'), twist: theme('animation.spin') },
-                  },
-                )
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animation {
-        animation: 1s linear infinite pulse;
-      }
-
-      .animation-spin {
-        animation: 1s linear infinite spin;
-      }
-
-      .animation2 {
-        animation: 1s linear infinite pulse;
-      }
-
-      .animation2-twist {
-        animation: 1s linear infinite spin;
-      }
-      "
-    `)
-  })
-
-  test('CSS theme values are merged with JS theme values', async () => {
-    expect(
-      await run(
-        ['animation', 'animation-spin', 'animation-bounce'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-          @theme reference {
-            --animate: pulse 1s linear infinite;
-            --animate-spin: spin 1s linear infinite;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { animation: (value) => ({ '--animation': value }) },
-                    { values: theme('animation') },
-                  )
-                },
-                { theme: { extend: { animation: { bounce: 'bounce 1s linear infinite' } } } },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animation {
-        --animation: pulse 1s linear infinite;
-      }
-
-      .animation-bounce {
-        --animation: bounce 1s linear infinite;
-      }
-
-      .animation-spin {
-        --animation: spin 1s linear infinite;
-      }
-      "
-    `)
-  })
-
-  test('CSS theme defaults take precedence over JS theme defaults', async () => {
-    expect(
-      await run(
-        ['animation'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-          @theme reference {
-            --animate: pulse 1s linear infinite;
-            --animate-spin: spin 1s linear infinite;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { animation: (value) => ({ '--animation': value }) },
-                    { values: theme('animation') },
-                  )
-                },
-                { theme: { extend: { animation: { DEFAULT: 'twist 1s linear infinite' } } } },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animation {
-        --animation: pulse 1s linear infinite;
-      }
-      "
-    `)
-  })
-
-  test('CSS theme values take precedence even over non-object JS values', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-      @theme reference {
-        --animate-simple-spin: spin 1s linear infinite;
-        --animate-simple-bounce: bounce 1s linear infinite;
-      }
-    `
-
-    using fn = vi.fn()
-
-    await compile(input, {
-      loadModule: async (_id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            function ({ theme }) {
-              fn(theme('animation.simple'))
-            },
-            {
-              theme: { extend: { animation: { simple: 'simple 1s linear' } } },
-            },
-          ),
-        }
-      },
-    })
-
-    expect(fn).toHaveBeenCalledWith({
-      __CSS_VALUES__: { bounce: 2, spin: 2 },
-      spin: 'spin 1s linear infinite',
-      bounce: 'bounce 1s linear infinite',
-    })
-  })
-
-  test('theme() resolves the DEFAULT value when a bare CSS theme key shares a prefix with a sibling key', async () => {
-    expect(
-      await run(
-        ['example-foo', 'example-foo-bar'],
-        css`
-          @tailwind utilities;
-          @theme {
-            --color-foo: red;
-            --color-foo-bar: blue;
-          }
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ addUtilities, theme }) {
-                addUtilities({
-                  '.example-foo': { color: theme('colors.foo') },
-                  '.example-foo-bar': { color: theme('colors.foo-bar') },
-                })
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .example-foo {
-        color: red;
-      }
-
-      .example-foo-bar {
-        color: #00f;
-      }
-      "
-    `)
-  })
-
-  test('all necessary theme keys support bare values', async () => {
-    expect(
-      await run(
-        [
-          'my-aspect-2/5',
-          'my-backdrop-brightness-1',
-          'my-backdrop-contrast-1',
-          'my-backdrop-grayscale-1',
-          'my-backdrop-hue-rotate-1',
-          'my-backdrop-invert-1',
-          'my-backdrop-opacity-1',
-          'my-backdrop-saturate-1',
-          'my-backdrop-sepia-1',
-          'my-border-width-1',
-          'my-brightness-1',
-          'my-columns-1',
-          'my-contrast-1',
-          'my-divide-width-1',
-          'my-flex-grow-1',
-          'my-flex-shrink-1',
-          'my-gradient-color-stop-positions-1',
-          'my-grayscale-1',
-          'my-grid-row-end-1',
-          'my-grid-row-start-1',
-          'my-grid-template-columns-1',
-          'my-grid-template-rows-1',
-          'my-hue-rotate-1',
-          'my-invert-1',
-          'my-line-clamp-1',
-          'my-opacity-1',
-          'my-order-1',
-          'my-outline-offset-1',
-          'my-outline-width-1',
-          'my-ring-offset-width-1',
-          'my-ring-width-1',
-          'my-rotate-1',
-          'my-saturate-1',
-          'my-scale-1',
-          'my-sepia-1',
-          'my-skew-1',
-          'my-stroke-width-1',
-          'my-text-decoration-thickness-1',
-          'my-text-underline-offset-1',
-          'my-transition-delay-1',
-          'my-transition-duration-1',
-          'my-z-index-1',
-        ],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ matchUtilities, theme }) {
-                function utility(name: string, themeKey: string) {
-                  matchUtilities(
-                    { [name]: (value) => ({ '--value': value }) },
-                    { values: theme(themeKey) },
-                  )
-                }
-
-                utility('my-aspect', 'aspectRatio')
-                utility('my-backdrop-brightness', 'backdropBrightness')
-                utility('my-backdrop-contrast', 'backdropContrast')
-                utility('my-backdrop-grayscale', 'backdropGrayscale')
-                utility('my-backdrop-hue-rotate', 'backdropHueRotate')
-                utility('my-backdrop-invert', 'backdropInvert')
-                utility('my-backdrop-opacity', 'backdropOpacity')
-                utility('my-backdrop-saturate', 'backdropSaturate')
-                utility('my-backdrop-sepia', 'backdropSepia')
-                utility('my-border-width', 'borderWidth')
-                utility('my-brightness', 'brightness')
-                utility('my-columns', 'columns')
-                utility('my-contrast', 'contrast')
-                utility('my-divide-width', 'divideWidth')
-                utility('my-flex-grow', 'flexGrow')
-                utility('my-flex-shrink', 'flexShrink')
-                utility('my-gradient-color-stop-positions', 'gradientColorStopPositions')
-                utility('my-grayscale', 'grayscale')
-                utility('my-grid-row-end', 'gridRowEnd')
-                utility('my-grid-row-start', 'gridRowStart')
-                utility('my-grid-template-columns', 'gridTemplateColumns')
-                utility('my-grid-template-rows', 'gridTemplateRows')
-                utility('my-hue-rotate', 'hueRotate')
-                utility('my-invert', 'invert')
-                utility('my-line-clamp', 'lineClamp')
-                utility('my-opacity', 'opacity')
-                utility('my-order', 'order')
-                utility('my-outline-offset', 'outlineOffset')
-                utility('my-outline-width', 'outlineWidth')
-                utility('my-ring-offset-width', 'ringOffsetWidth')
-                utility('my-ring-width', 'ringWidth')
-                utility('my-rotate', 'rotate')
-                utility('my-saturate', 'saturate')
-                utility('my-scale', 'scale')
-                utility('my-sepia', 'sepia')
-                utility('my-skew', 'skew')
-                utility('my-stroke-width', 'strokeWidth')
-                utility('my-text-decoration-thickness', 'textDecorationThickness')
-                utility('my-text-underline-offset', 'textUnderlineOffset')
-                utility('my-transition-delay', 'transitionDelay')
-                utility('my-transition-duration', 'transitionDuration')
-                utility('my-z-index', 'zIndex')
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .my-aspect-2\\/5 {
-        --value: 2/5;
-      }
-
-      .my-backdrop-brightness-1, .my-backdrop-contrast-1, .my-backdrop-grayscale-1 {
-        --value: 1%;
-      }
-
-      .my-backdrop-hue-rotate-1 {
-        --value: 1deg;
-      }
-
-      .my-backdrop-invert-1, .my-backdrop-opacity-1, .my-backdrop-saturate-1, .my-backdrop-sepia-1 {
-        --value: 1%;
-      }
-
-      .my-border-width-1 {
-        --value: 1px;
-      }
-
-      .my-brightness-1 {
-        --value: 1%;
-      }
-
-      .my-columns-1 {
-        --value: 1;
-      }
-
-      .my-contrast-1 {
-        --value: 1%;
-      }
-
-      .my-divide-width-1 {
-        --value: 1px;
-      }
-
-      .my-flex-grow-1, .my-flex-shrink-1 {
-        --value: 1;
-      }
-
-      .my-gradient-color-stop-positions-1, .my-grayscale-1 {
-        --value: 1%;
-      }
-
-      .my-grid-row-end-1, .my-grid-row-start-1 {
-        --value: 1;
-      }
-
-      .my-grid-template-columns-1, .my-grid-template-rows-1 {
-        --value: repeat(1, minmax(0, 1fr));
-      }
-
-      .my-hue-rotate-1 {
-        --value: 1deg;
-      }
-
-      .my-invert-1 {
-        --value: 1%;
-      }
-
-      .my-line-clamp-1 {
-        --value: 1;
-      }
-
-      .my-opacity-1 {
-        --value: 1%;
-      }
-
-      .my-order-1 {
-        --value: 1;
-      }
-
-      .my-outline-offset-1, .my-outline-width-1, .my-ring-offset-width-1, .my-ring-width-1 {
-        --value: 1px;
-      }
-
-      .my-rotate-1 {
-        --value: 1deg;
-      }
-
-      .my-saturate-1, .my-scale-1, .my-sepia-1 {
-        --value: 1%;
-      }
-
-      .my-skew-1 {
-        --value: 1deg;
-      }
-
-      .my-stroke-width-1 {
-        --value: 1;
-      }
-
-      .my-text-decoration-thickness-1, .my-text-underline-offset-1 {
-        --value: 1px;
-      }
-
-      .my-transition-delay-1, .my-transition-duration-1 {
-        --value: 1ms;
-      }
-
-      .my-z-index-1 {
-        --value: 1;
-      }
-      "
-    `)
-  })
-
-  test('theme keys can derive from other theme keys', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-      @theme {
-        --color-primary: red;
-        --color-secondary: blue;
-      }
-    `
-
-    using fn = vi.fn()
-
-    await compile(input, {
-      loadModule: async (_id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(
-            ({ theme }) => {
-              // The compatibility config specifies that `accentColor` spreads in `colors`
-              fn(theme('accentColor.primary'))
-
-              // This should even work for theme keys specified in plugin configs
-              fn(theme('myAccentColor.secondary'))
-            },
-            {
-              theme: {
-                extend: {
-                  myAccentColor: ({ theme }) => theme('accentColor'),
-                },
-              },
-            },
-          ),
-        }
-      },
-    })
-
-    expect(fn).toHaveBeenCalledWith('red')
-    expect(fn).toHaveBeenCalledWith('blue')
-  })
-
-  test("`theme('*.DEFAULT')` resolves to `undefined` when all theme keys in that namespace have a suffix", async ({
-    expect,
-  }) => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-      @theme {
-        --ease-in: ease-in;
-        --ease-out: ease-out;
-      }
-    `
-
-    using fn = vi.fn()
-
-    await compile(input, {
-      loadModule: async (_id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(({ theme }) => {
-            fn(theme('transitionTimingFunction.DEFAULT'))
-            fn(theme('transitionTimingFunction.in'))
-            fn(theme('transitionTimingFunction.out'))
-          }),
-        }
-      },
-    })
-
-    expect(fn).toHaveBeenNthCalledWith(1, undefined)
-    expect(fn).toHaveBeenNthCalledWith(2, 'ease-in')
-    expect(fn).toHaveBeenNthCalledWith(3, 'ease-out')
-  })
-
-  test('nested theme key lookups work even for flattened keys', async () => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-      @theme {
-        --color-red-100: red;
-        --color-red-200: orangered;
-        --color-red-300: darkred;
-      }
-    `
-
-    using fn = vi.fn()
-
-    await compile(input, {
-      loadModule: async (_id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(({ theme }) => {
-            fn(theme('color.red.100'))
-            fn(theme('colors.red.200'))
-            fn(theme('backgroundColor.red.300'))
-          }),
-        }
-      },
-    })
-
-    expect(fn).toHaveBeenCalledWith('red')
-    expect(fn).toHaveBeenCalledWith('orangered')
-    expect(fn).toHaveBeenCalledWith('darkred')
-  })
-
-  test('keys that do not exist return the default value (or undefined if none)', async ({
-    expect,
-  }) => {
-    let input = css`
-      @tailwind utilities;
-      @plugin "my-plugin";
-    `
-
-    using fn = vi.fn()
-
-    await compile(input, {
-      loadModule: async (_id, base) => {
-        return {
-          path: '',
-          base,
-          module: plugin(({ theme }) => {
-            fn(theme('i.do.not.exist'))
-            fn(theme('color'))
-            fn(theme('color', 'magenta'))
-            fn(theme('colors'))
-          }),
-        }
-      },
-    })
-
-    expect(fn).toHaveBeenCalledWith(undefined) // Not present in CSS or resolved config
-    expect(fn).toHaveBeenCalledWith(undefined) // Not present in CSS or resolved config
-    expect(fn).toHaveBeenCalledWith('magenta') // Not present in CSS or resolved config
-    expect(fn).toHaveBeenCalledWith({}) // Present in the resolved config
-  })
-
-  test('Candidates can match multiple utility definitions', async () => {
-    expect(
-      await run(
-        ['foo-bar'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(({ addUtilities, matchUtilities }) => {
-                addUtilities({ '.foo-bar': { color: 'red' } })
-                matchUtilities(
-                  { foo: (value) => ({ '--my-prop': value }) },
-                  { values: { bar: 'bar-valuer', baz: 'bar-valuer' } },
-                )
-                addUtilities({ '.foo-bar': { backgroundColor: 'red' } })
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo-bar {
-        color: red;
-        --my-prop: bar-valuer;
-        background-color: red;
-      }
-      "
-    `)
-  })
-
-  test('spreading `tailwindcss/defaultTheme` exports keeps bare values', async () => {
-    expect(
-      await run(
-        [
-          'my-aspect-2/5',
-          // 'my-backdrop-brightness-1',
-          // 'my-backdrop-contrast-1',
-          // 'my-backdrop-grayscale-1',
-          // 'my-backdrop-hue-rotate-1',
-          // 'my-backdrop-invert-1',
-          // 'my-backdrop-opacity-1',
-          // 'my-backdrop-saturate-1',
-          // 'my-backdrop-sepia-1',
-          // 'my-divide-width-1',
-          'my-border-width-1',
-          'my-brightness-1',
-          'my-columns-1',
-          'my-contrast-1',
-          'my-flex-grow-1',
-          'my-flex-shrink-1',
-          'my-gradient-color-stop-positions-1',
-          'my-grayscale-1',
-          'my-grid-row-end-1',
-          'my-grid-row-start-1',
-          'my-grid-template-columns-1',
-          'my-grid-template-rows-1',
-          'my-hue-rotate-1',
-          'my-invert-1',
-          'my-line-clamp-1',
-          'my-opacity-1',
-          'my-order-1',
-          'my-outline-offset-1',
-          'my-outline-width-1',
-          'my-ring-offset-width-1',
-          'my-ring-width-1',
-          'my-rotate-1',
-          'my-saturate-1',
-          'my-scale-1',
-          'my-sepia-1',
-          'my-skew-1',
-          'my-stroke-width-1',
-          'my-text-decoration-thickness-1',
-          'my-text-underline-offset-1',
-          'my-transition-delay-1',
-          'my-transition-duration-1',
-          'my-z-index-1',
-        ],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ matchUtilities }) {
-                function utility(name: string, themeKey: string) {
-                  matchUtilities(
-                    { [name]: (value) => ({ '--value': value }) },
-                    // @ts-ignore
-                    { values: defaultTheme[themeKey] },
-                  )
-                }
-
-                utility('my-aspect', 'aspectRatio')
-                // The following keys deliberately doesn't work as these are exported
-                // as functions from the compat config.
-                //
-                // utility('my-backdrop-brightness', 'backdropBrightness')
-                // utility('my-backdrop-contrast', 'backdropContrast')
-                // utility('my-backdrop-grayscale', 'backdropGrayscale')
-                // utility('my-backdrop-hue-rotate', 'backdropHueRotate')
-                // utility('my-backdrop-invert', 'backdropInvert')
-                // utility('my-backdrop-opacity', 'backdropOpacity')
-                // utility('my-backdrop-saturate', 'backdropSaturate')
-                // utility('my-backdrop-sepia', 'backdropSepia')
-                // utility('my-divide-width', 'divideWidth')
-                utility('my-border-width', 'borderWidth')
-                utility('my-brightness', 'brightness')
-                utility('my-columns', 'columns')
-                utility('my-contrast', 'contrast')
-                utility('my-flex-grow', 'flexGrow')
-                utility('my-flex-shrink', 'flexShrink')
-                utility('my-gradient-color-stop-positions', 'gradientColorStopPositions')
-                utility('my-grayscale', 'grayscale')
-                utility('my-grid-row-end', 'gridRowEnd')
-                utility('my-grid-row-start', 'gridRowStart')
-                utility('my-grid-template-columns', 'gridTemplateColumns')
-                utility('my-grid-template-rows', 'gridTemplateRows')
-                utility('my-hue-rotate', 'hueRotate')
-                utility('my-invert', 'invert')
-                utility('my-line-clamp', 'lineClamp')
-                utility('my-opacity', 'opacity')
-                utility('my-order', 'order')
-                utility('my-outline-offset', 'outlineOffset')
-                utility('my-outline-width', 'outlineWidth')
-                utility('my-ring-offset-width', 'ringOffsetWidth')
-                utility('my-ring-width', 'ringWidth')
-                utility('my-rotate', 'rotate')
-                utility('my-saturate', 'saturate')
-                utility('my-scale', 'scale')
-                utility('my-sepia', 'sepia')
-                utility('my-skew', 'skew')
-                utility('my-stroke-width', 'strokeWidth')
-                utility('my-text-decoration-thickness', 'textDecorationThickness')
-                utility('my-text-underline-offset', 'textUnderlineOffset')
-                utility('my-transition-delay', 'transitionDelay')
-                utility('my-transition-duration', 'transitionDuration')
-                utility('my-z-index', 'zIndex')
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .my-aspect-2\\/5 {
-        --value: 2/5;
-      }
-
-      .my-border-width-1 {
-        --value: 1px;
-      }
-
-      .my-brightness-1 {
-        --value: 1%;
-      }
-
-      .my-columns-1 {
-        --value: 1;
-      }
-
-      .my-contrast-1 {
-        --value: 1%;
-      }
-
-      .my-flex-grow-1, .my-flex-shrink-1 {
-        --value: 1;
-      }
-
-      .my-gradient-color-stop-positions-1, .my-grayscale-1 {
-        --value: 1%;
-      }
-
-      .my-grid-row-end-1, .my-grid-row-start-1 {
-        --value: 1;
-      }
-
-      .my-grid-template-columns-1, .my-grid-template-rows-1 {
-        --value: repeat(1, minmax(0, 1fr));
-      }
-
-      .my-hue-rotate-1 {
-        --value: 1deg;
-      }
-
-      .my-invert-1 {
-        --value: 1%;
-      }
-
-      .my-line-clamp-1 {
-        --value: 1;
-      }
-
-      .my-opacity-1 {
-        --value: 1%;
-      }
-
-      .my-order-1 {
-        --value: 1;
-      }
-
-      .my-outline-offset-1, .my-outline-width-1, .my-ring-offset-width-1, .my-ring-width-1 {
-        --value: 1px;
-      }
-
-      .my-rotate-1 {
-        --value: 1deg;
-      }
-
-      .my-saturate-1, .my-scale-1, .my-sepia-1 {
-        --value: 1%;
-      }
-
-      .my-skew-1 {
-        --value: 1deg;
-      }
-
-      .my-stroke-width-1 {
-        --value: 1;
-      }
-
-      .my-text-decoration-thickness-1, .my-text-underline-offset-1 {
-        --value: 1px;
-      }
-
-      .my-transition-delay-1, .my-transition-duration-1 {
-        --value: 1ms;
-      }
-
-      .my-z-index-1 {
-        --value: 1;
-      }
-      "
-    `)
-  })
-
-  test('can use escaped JS variables in theme values', async () => {
-    expect(
-      await run(
-        ['my-width-1', 'my-width-1/2', 'my-width-1.5'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { 'my-width': (value) => ({ width: value }) },
-                    { values: theme('width') },
-                  )
-                },
-                {
-                  theme: {
-                    extend: {
-                      width: {
-                        '1': '0.25rem',
-                        // Purposely setting to something different from the v3 default
-                        '1/2': '60%',
-                        '1.5': '0.375rem',
-                      },
-                    },
-                  },
-                },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .my-width-1 {
-        width: .25rem;
-      }
-
-      .my-width-1\\.5 {
-        width: .375rem;
-      }
-
-      .my-width-1\\/2 {
-        width: 60%;
-      }
-      "
-    `)
-  })
-
-  test('can use escaped CSS variables in theme values', async () => {
-    expect(
-      await run(
-        ['my-width-1', 'my-width-1.5', 'my-width-1/2', 'my-width-2.5'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-
-          @theme {
-            --width-1: 0.25rem;
-            /* Purposely setting to something different from the v3 default */
-            --width-1\/2: 60%;
-            --width-1\.5: 0.375rem;
-            --width-2_5: 0.625rem;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ matchUtilities, theme }) {
-                matchUtilities(
-                  { 'my-width': (value) => ({ width: value }) },
-                  { values: theme('width') },
-                )
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .my-width-1 {
-        width: .25rem;
-      }
-
-      .my-width-1\\.5 {
-        width: .375rem;
-      }
-
-      .my-width-1\\/2 {
-        width: 60%;
-      }
-
-      .my-width-2\\.5 {
-        width: .625rem;
-      }
-      "
-    `)
-  })
-
-  test('can use escaped CSS variables in referenced theme namespace', async () => {
-    expect(
-      await run(
-        ['my-width-1', 'my-width-1.5', 'my-width-1/2', 'my-width-2.5'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-
-          @theme {
-            --width-1: 0.25rem;
-            /* Purposely setting to something different from the v3 default */
-            --width-1\/2: 60%;
-            --width-1\.5: 0.375rem;
-            --width-2_5: 0.625rem;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(
-                function ({ matchUtilities, theme }) {
-                  matchUtilities(
-                    { 'my-width': (value) => ({ width: value }) },
-                    { values: theme('myWidth') },
-                  )
-                },
-                {
-                  theme: { myWidth: ({ theme }) => theme('width') },
-                },
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .my-width-1 {
-        width: .25rem;
-      }
-
-      .my-width-1\\.5 {
-        width: .375rem;
-      }
-
-      .my-width-1\\/2 {
-        width: 60%;
-      }
-
-      .my-width-2\\.5 {
-        width: .625rem;
-      }
-      "
-    `)
-  })
-})
-
-describe('addBase', () => {
-  test('does not create rules when imported via `@import "…" reference`', async () => {
-    expect(
-      await compileCss(
-        css`
-          @tailwind utilities;
-          @plugin "outside";
-          @import './inside.css' reference;
-        `,
-        {
-          loadModule: async (_id, base) => {
-            if (_id === 'inside') {
-              return {
-                path: '',
-                base,
-                module: plugin(function ({ addBase }) {
-                  addBase({ inside: { color: 'red' } })
-                }),
-              }
-            }
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ addBase }) {
-                addBase({ outside: { color: 'red' } })
-              }),
-            }
-          },
-          async loadStylesheet() {
-            return {
-              path: '',
-              base: '',
-              content: css`
-                @plugin "inside";
-              `,
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer base {
-        outside {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('does not modify CSS variables', async () => {
-    expect(
-      await compileCss(
-        css`
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: plugin(function ({ addBase }) {
-              addBase({ ':root': { '--PascalCase': '1', '--camelCase': '1', '--UPPERCASE': '1' } })
-            }),
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer base {
-        :root {
-          --PascalCase: 1;
-          --camelCase: 1;
-          --UPPERCASE: 1;
-        }
-      }
-      "
-    `)
-  })
-
-  test('@variant is replaced inside rules using addBase', async () => {
-    expect(
-      await compileCss(
-        css`
-          @plugin "my-plugin";
-          @theme {
-            --breakpoint-supertiny: 128px;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: plugin(function ({ addBase }) {
-              addBase({
-                ':root': {
-                  '@variant supertiny': {
-                    '--PascalCase': '1',
-                    '--camelCase': '1',
-                    '--UPPERCASE': '1',
-                  },
-                  '@variant data-enabled:focus, disabled': {
-                    '--x': '1',
-                  },
-                },
-              })
-            }),
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer base {
-        @media (min-width: 128px) {
-          :root {
-            --PascalCase: 1;
-            --camelCase: 1;
-            --UPPERCASE: 1;
-          }
-        }
-
-        :root[data-enabled]:focus, :root:disabled {
-          --x: 1;
-        }
-      }
-      "
-    `)
-  })
-
-  test('@variant inside addBase works with custom variants', async () => {
-    expect(
-      await compileCss(
-        css`
-          @plugin "my-plugin";
-
-          @custom-variant custom (&.custom);
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: plugin(function ({ addBase }) {
-              addBase({
-                ':root': {
-                  '@variant custom': {
-                    '--x': '1',
-                  },
-                },
-              })
-            }),
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer base {
-        :root.custom {
-          --x: 1;
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('addVariant', () => {
-  test('addVariant with string selector', async () => {
-    expect(
-      await run(
-        ['hocus:underline', 'group-hocus:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ addVariant }: PluginAPI) => {
-                addVariant('hocus', '&:hover, &:focus')
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
-          display: flex;
-        }
-
-        .hocus\\:underline:hover, .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('addVariant with `@scope`', async () => {
-    expect(
-      await run(
-        ['blue:underline', 'green:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ addVariant }: PluginAPI) => {
-                addVariant('blue', '@scope ([data-theme=blue]) to ([data-theme])')
-                addVariant('green', '@scope ([data-theme=green]) to ([data-theme]) { & }')
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @scope ([data-theme="blue"]) to ([data-theme]) {
-          .blue\\:underline {
-            text-decoration-line: underline;
-          }
-        }
-
-        @scope ([data-theme="green"]) to ([data-theme]) {
-          .green\\:underline {
-            text-decoration-line: underline;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('matchVariant with `@scope`', async () => {
-    expect(
-      await run(
-        ['theme-[blue]:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('theme', (value) => `@scope ([data-theme=${value}]) to ([data-theme])`)
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @scope ([data-theme="blue"]) to ([data-theme]) {
-          .theme-\\[blue\\]\\:underline {
-            text-decoration-line: underline;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('addVariant with array of selectors', async () => {
-    expect(
-      await run(
-        ['hocus:underline', 'group-hocus:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ addVariant }: PluginAPI) => {
-                addVariant('hocus', ['&:hover', '&:focus'])
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
-          display: flex;
-        }
-
-        .hocus\\:underline:hover, .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('addVariant with object syntax and @slot', async () => {
-    expect(
-      await run(
-        ['hocus:underline', 'group-hocus:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ addVariant }: PluginAPI) => {
-                addVariant('hocus', {
-                  '&:hover': '@slot',
-                  '&:focus': '@slot',
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
-          display: flex;
-        }
-
-        .hocus\\:underline:hover, .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('addVariant with object syntax, media, nesting and multiple @slot', async () => {
-    expect(
-      await run(
-        ['hocus:underline', 'group-hocus:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ addVariant }: PluginAPI) => {
-                addVariant('hocus', {
-                  '@media (hover: hover)': {
-                    '&:hover': '@slot',
-                  },
-                  '&:focus': '@slot',
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (hover: hover) {
-          :is(:where(.group):hover .group-hocus\\:flex) {
-            display: flex;
-          }
-        }
-
-        :is(:where(.group):focus .group-hocus\\:flex) {
-          display: flex;
-        }
-
-        @media (hover: hover) {
-          .hocus\\:underline:hover {
-            text-decoration-line: underline;
-          }
-        }
-
-        .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('addVariant with at-rules and placeholder', async () => {
-    expect(
-      await run(
-        ['potato:underline', 'potato:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ addVariant }: PluginAPI) => {
-                addVariant(
-                  'potato',
-                  '@media (max-width: 400px) { @supports (font:bold) { &:large-potato } }',
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (max-width: 400px) {
-          @supports (font: bold) {
-            .potato\\:flex:large-potato {
-              display: flex;
-            }
-
-            .potato\\:underline:large-potato {
-              text-decoration-line: underline;
-            }
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('@slot is preserved when used as a custom property value', async () => {
-    expect(
-      await run(
-        ['hocus:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ addVariant }: PluginAPI) => {
-                addVariant('hocus', {
-                  '&': {
-                    '--custom-property': '@slot',
-                    '&:hover': '@slot',
-                    '&:focus': '@slot',
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .hocus\\:underline {
-          --custom-property: @slot;
-        }
-
-        .hocus\\:underline:hover, .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('ignores variants that use :merge(…) and ensures `peer-*` and `group-*` rules work out of the box', async () => {
-    expect(
-      await run(
-        ['optional:flex', 'group-optional:flex', 'peer-optional:flex', 'group-optional/foo:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ addVariant }: PluginAPI) => {
-                addVariant('optional', '&:optional')
-                addVariant('group-optional', { ':merge(.group):optional &': '@slot' })
-                addVariant('peer-optional', { '&': { ':merge(.peer):optional ~ &': '@slot' } })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        :is(:where(.group):optional .group-optional\\:flex), :is(:where(.group\\/foo):optional .group-optional\\/foo\\:flex), :is(:where(.peer):optional ~ .peer-optional\\:flex), .optional\\:flex:optional {
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('matchVariant', () => {
-  test('partial arbitrary variants', async () => {
-    expect(
-      await run(
-        ['potato-[yellow]:underline', 'potato-[baked]:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('potato', (flavor) => `.potato-${flavor} &`)
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .potato-baked .potato-\\[baked\\]\\:flex {
-          display: flex;
-        }
-
-        .potato-yellow .potato-\\[yellow\\]\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('partial arbitrary variants with at-rules', async () => {
-    expect(
-      await run(
-        ['potato-[yellow]:underline', 'potato-[baked]:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('potato', (flavor) => `@media (potato: ${flavor})`)
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (potato: baked) {
-          .potato-\\[baked\\]\\:flex {
-            display: flex;
-          }
-        }
-
-        @media (potato: yellow) {
-          .potato-\\[yellow\\]\\:underline {
-            text-decoration-line: underline;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('partial arbitrary variants with at-rules and placeholder', async () => {
-    expect(
-      await run(
-        ['potato-[yellow]:underline', 'potato-[baked]:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('potato', (flavor) => {
-                  return `@media (potato: ${flavor}) { @supports (font:bold) { &:large-potato } }`
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (potato: baked) {
-          @supports (font: bold) {
-            .potato-\\[baked\\]\\:flex:large-potato {
-              display: flex;
-            }
-          }
-        }
-
-        @media (potato: yellow) {
-          @supports (font: bold) {
-            .potato-\\[yellow\\]\\:underline:large-potato {
-              text-decoration-line: underline;
-            }
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('partial arbitrary variants with default values', async () => {
-    expect(
-      await run(
-        ['tooltip-bottom:underline', 'tooltip-top:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('tooltip', (side) => `&${side}`, {
-                  values: {
-                    bottom: '[data-location="bottom"]',
-                    top: '[data-location="top"]',
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .tooltip-bottom\\:underline[data-location="bottom"] {
-          text-decoration-line: underline;
-        }
-
-        .tooltip-top\\:flex[data-location="top"] {
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-
-  test('matched variant values maintain the sort order they are registered in', async () => {
-    expect(
-      await run(
-        [
-          'alphabet-c:underline',
-          'alphabet-a:underline',
-          'alphabet-d:underline',
-          'alphabet-b:underline',
-        ],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('alphabet', (side) => `&${side}`, {
-                  values: {
-                    d: '[data-order="1"]',
-                    a: '[data-order="2"]',
-                    c: '[data-order="3"]',
-                    b: '[data-order="4"]',
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .alphabet-d\\:underline[data-order="1"], .alphabet-a\\:underline[data-order="2"], .alphabet-c\\:underline[data-order="3"], .alphabet-b\\:underline[data-order="4"] {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('matchVariant can return an array of format strings from the function', async () => {
-    expect(
-      await run(
-        ['test-[a,b,c]:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('test', (selector) =>
-                  selector.split(',').map((selector) => `&.${selector} > *`),
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .test-\\[a\\,b\\,c\\]\\:underline.a > *, .test-\\[a\\,b\\,c\\]\\:underline.b > *, .test-\\[a\\,b\\,c\\]\\:underline.c > * {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('should be possible to sort variants', async () => {
-    expect(
-      await run(
-        ['testmin-[600px]:flex', 'testmin-[500px]:underline', 'testmin-[700px]:italic'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(a.value) - parseInt(z.value)
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (min-width: 500px) {
-          .testmin-\\[500px\\]\\:underline {
-            text-decoration-line: underline;
-          }
-        }
-
-        @media (min-width: 600px) {
-          .testmin-\\[600px\\]\\:flex {
-            display: flex;
-          }
-        }
-
-        @media (min-width: 700px) {
-          .testmin-\\[700px\\]\\:italic {
-            font-style: italic;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('should be possible to compare arbitrary variants and hardcoded variants', async () => {
-    expect(
-      await run(
-        ['testmin-[700px]:italic', 'testmin-example:italic', 'testmin-[500px]:italic'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                  values: { example: '600px' },
-                  sort(a, z) {
-                    return parseInt(a.value) - parseInt(z.value)
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (min-width: 500px) {
-          .testmin-\\[500px\\]\\:italic {
-            font-style: italic;
-          }
-        }
-
-        @media (min-width: 600px) {
-          .testmin-example\\:italic {
-            font-style: italic;
-          }
-        }
-
-        @media (min-width: 700px) {
-          .testmin-\\[700px\\]\\:italic {
-            font-style: italic;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('should be possible to sort stacked arbitrary variants correctly', async () => {
-    expect(
-      await run(
-        [
-          'testmin-[150px]:testmax-[400px]:order-2',
-          'testmin-[100px]:testmax-[350px]:order-3',
-          'testmin-[100px]:testmax-[300px]:order-4',
-          'testmin-[100px]:testmax-[400px]:order-1',
-        ],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(a.value) - parseInt(z.value)
-                  },
-                })
-
-                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(z.value) - parseInt(a.value)
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (min-width: 100px) {
-          @media (max-width: 400px) {
-            .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
-              order: 1;
-            }
-          }
-        }
-
-        @media (min-width: 150px) {
-          @media (max-width: 400px) {
-            .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 {
-              order: 2;
-            }
-          }
-        }
-
-        @media (min-width: 100px) {
-          @media (max-width: 350px) {
-            .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 {
-              order: 3;
-            }
-          }
-
-          @media (max-width: 300px) {
-            .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 {
-              order: 4;
-            }
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('should maintain sort from other variants, if sort functions of arbitrary variants return 0', async () => {
-    // Expect :focus to come after :hover
-    expect(
-      await run(
-        [
-          'testmin-[100px]:testmax-[200px]:focus:underline',
-          'testmin-[100px]:testmax-[200px]:hover:underline',
-        ],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(a.value) - parseInt(z.value)
-                  },
-                })
-
-                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(z.value) - parseInt(a.value)
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (min-width: 100px) {
-          @media (max-width: 200px) {
-            @media (hover: hover) {
-              .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline:hover {
-                text-decoration-line: underline;
-              }
-            }
-
-            .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:focus\\:underline:focus {
-              text-decoration-line: underline;
-            }
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('should sort arbitrary variants left to right (1)', async () => {
-    expect(
-      await run(
-        [
-          'testmin-[200px]:testmax-[400px]:order-2',
-          'testmin-[200px]:testmax-[300px]:order-4',
-          'testmin-[100px]:testmax-[400px]:order-1',
-          'testmin-[100px]:testmax-[300px]:order-3',
-        ],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(a.value) - parseInt(z.value)
-                  },
-                })
-                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(z.value) - parseInt(a.value)
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (min-width: 100px) {
-          @media (max-width: 400px) {
-            .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
-              order: 1;
-            }
-          }
-        }
-
-        @media (min-width: 200px) {
-          @media (max-width: 400px) {
-            .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 {
-              order: 2;
-            }
-          }
-        }
-
-        @media (min-width: 100px) {
-          @media (max-width: 300px) {
-            .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 {
-              order: 3;
-            }
-          }
-        }
-
-        @media (min-width: 200px) {
-          @media (max-width: 300px) {
-            .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 {
-              order: 4;
-            }
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('should sort arbitrary variants left to right (2)', async () => {
-    expect(
-      await run(
-        [
-          'testmax-[400px]:testmin-[200px]:underline',
-          'testmax-[300px]:testmin-[200px]:underline',
-          'testmax-[400px]:testmin-[100px]:underline',
-          'testmax-[300px]:testmin-[100px]:underline',
-        ],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(a.value) - parseInt(z.value)
-                  },
-                })
-                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                  sort(a, z) {
-                    return parseInt(z.value) - parseInt(a.value)
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (max-width: 400px) {
-          @media (min-width: 100px) {
-            .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-
-          @media (min-width: 200px) {
-            .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-        }
-
-        @media (max-width: 300px) {
-          @media (min-width: 100px) {
-            .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-
-          @media (min-width: 200px) {
-            .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('should guarantee that we are not passing values from other variants to the wrong function', async () => {
-    expect(
-      await run(
-        [
-          'testmin-[200px]:testmax-[400px]:order-2',
-          'testmin-[200px]:testmax-[300px]:order-4',
-          'testmin-[100px]:testmax-[400px]:order-1',
-          'testmin-[100px]:testmax-[300px]:order-3',
-        ],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
-                  sort(a, z) {
-                    let lookup = ['100px', '200px']
-                    if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
-                      throw new Error('We are seeing values that should not be there!')
-                    }
-                    return lookup.indexOf(a.value) - lookup.indexOf(z.value)
-                  },
-                })
-                matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
-                  sort(a, z) {
-                    let lookup = ['300px', '400px']
-                    if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
-                      throw new Error('We are seeing values that should not be there!')
-                    }
-                    return lookup.indexOf(z.value) - lookup.indexOf(a.value)
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (min-width: 100px) {
-          @media (max-width: 400px) {
-            .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
-              order: 1;
-            }
-          }
-        }
-
-        @media (min-width: 200px) {
-          @media (max-width: 400px) {
-            .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 {
-              order: 2;
-            }
-          }
-        }
-
-        @media (min-width: 100px) {
-          @media (max-width: 300px) {
-            .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 {
-              order: 3;
-            }
-          }
-        }
-
-        @media (min-width: 200px) {
-          @media (max-width: 300px) {
-            .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 {
-              order: 4;
-            }
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('should default to the DEFAULT value for variants', async () => {
-    expect(
-      await run(
-        ['foo:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('foo', (value) => `.foo${value} &`, {
-                  values: { DEFAULT: '.bar' },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo.bar .foo\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('should not generate anything if the matchVariant does not have a DEFAULT value configured', async () => {
-    expect(
-      await run(
-        ['foo:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('foo', (value) => `.foo${value} &`)
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities;
-      "
-    `)
-  })
-
-  test('should be possible to use `null` as a DEFAULT value', async () => {
-    expect(
-      await run(
-        ['foo:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('foo', (value) => `.foo${value === null ? '-good' : '-bad'} &`, {
-                  values: { DEFAULT: null },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo-good .foo\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('should be possible to use `undefined` as a DEFAULT value', async () => {
-    expect(
-      await run(
-        ['foo:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
-                  values: { DEFAULT: undefined },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo-good .foo\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('should be called with eventual modifiers', async () => {
-    expect(
-      await run(
-        ['my-container-[250px]:underline', 'my-container-[250px]/placement:underline'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('my-container', (value, { modifier }) => {
-                  function parseValue(value: string) {
-                    const numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
-                    if (numericValue === null) return null
-
-                    return parseFloat(value)
-                  }
-
-                  const parsed = parseValue(value)
-                  return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @container (min-width: 250px) {
-        .my-container-\\[250px\\]\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-
-      @container placement (min-width: 250px) {
-        .my-container-\\[250px\\]\\/placement\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('ignores variants that use :merge(…)', async () => {
-    expect(
-      await run(
-        [
-          'optional-[test]:flex',
-          'group-optional-[test]:flex',
-          'peer-optional-[test]:flex',
-          'group-optional-[test]/foo:flex',
-        ],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('optional', (flavor) => `&:optional:has(${flavor}) &`)
-                matchVariant(
-                  'group-optional',
-                  (flavor) => `:merge(.group):optional:has(${flavor}) &`,
-                )
-                matchVariant(
-                  'peer-optional',
-                  (flavor) => `:merge(.peer):optional:has(${flavor}) ~ &`,
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        :is(:where(.group):optional:has(test) :where(.group) .group-optional-\\[test\\]\\:flex), :is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) .group-optional-\\[test\\]\\/foo\\:flex), :is(:where(.peer):optional:has(test) :where(.peer) ~ .peer-optional-\\[test\\]\\:flex), .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex {
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-
-  test('ignores variants that use unknown values', async () => {
-    expect(
-      await run(
-        ['foo-[test]:flex', 'foo-known:flex', 'foo-unknown:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('foo', (flavor) => `&:is(${flavor})`, {
-                  values: { known: 'known' },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo-known\\:flex:is(known), .foo-\\[test\\]\\:flex:is(test) {
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-
-  test('ignores variants that produce non-string values', async () => {
-    expect(
-      await run(
-        ['foo-[test]:flex', 'foo-string:flex', 'foo-object:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: ({ matchVariant }: PluginAPI) => {
-                matchVariant('foo', (flavor) => `&:is(${flavor})`, {
-                  values: {
-                    string: 'some string',
-                    object: { some: 'object' },
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo-string\\:flex:is(some string), .foo-\\[test\\]\\:flex:is(test) {
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('addUtilities()', () => {
-  test('custom static utility', async () => {
-    expect(
-      await run(
-        ['text-trim', 'lg:text-trim'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  '.text-trim': {
-                    'text-box-trim': 'both',
-                    'text-box-edge': 'cap alphabetic',
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .text-trim {
-          text-box-trim: both;
-          text-box-edge: cap alphabetic;
-        }
-
-        @media (min-width: 1024px) {
-          .lg\\:text-trim {
-            text-box-trim: both;
-            text-box-edge: cap alphabetic;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('return multiple rule objects from a custom utility', async () => {
-    expect(
-      await run(
-        ['text-trim'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities([
-                  {
-                    '.text-trim': [
-                      { 'text-box-trim': 'both' },
-                      { 'text-box-edge': 'cap alphabetic' },
-                    ],
-                  },
-                ])
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .text-trim {
-        text-box-trim: both;
-        text-box-edge: cap alphabetic;
-      }
-      "
-    `)
-  })
-
-  test('define multiple utilities with array syntax', async () => {
-    expect(
-      await run(
-        ['text-trim', 'text-trim-2'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities([
-                  {
-                    '.text-trim': {
-                      'text-box-trim': 'both',
-                      'text-box-edge': 'cap alphabetic',
-                    },
-                  },
-                  {
-                    '.text-trim-2': {
-                      'text-box-trim': 'both',
-                      'text-box-edge': 'cap alphabetic',
-                    },
-                  },
-                ])
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .text-trim, .text-trim-2 {
-        text-box-trim: both;
-        text-box-edge: cap alphabetic;
-      }
-      "
-    `)
-  })
-
-  test('utilities can use arrays for fallback declaration values', async () => {
-    expect(
-      await run(
-        ['outlined'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities([
-                  {
-                    '.outlined': {
-                      outline: ['1px solid ButtonText', '1px auto -webkit-focus-ring-color'],
-                    },
-                  },
-                ])
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .outlined {
-        outline: 1px solid buttontext;
-        outline: 1px auto -webkit-focus-ring-color;
-      }
-      "
-    `)
-  })
-
-  test('camel case properties are converted to kebab-case', async () => {
-    expect(
-      await run(
-        ['text-trim'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  '.text-trim': {
-                    WebkitAppearance: 'none',
-                    textBoxTrim: 'both',
-                    textBoxEdge: 'cap alphabetic',
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .text-trim {
-          -webkit-appearance: none;
-          text-box-trim: both;
-          text-box-edge: cap alphabetic;
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom static utilities support `@apply`', async () => {
-    expect(
-      await run(
-        ['foo', 'lg:foo'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  '.foo': {
-                    '@apply flex dark:underline': {},
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo {
-          display: flex;
-        }
-
-        @media (prefers-color-scheme: dark) {
-          .foo {
-            text-decoration-line: underline;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .lg\\:foo {
-            display: flex;
-          }
-
-          @media (prefers-color-scheme: dark) {
-            .lg\\:foo {
-              text-decoration-line: underline;
-            }
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('throws on custom static utilities with an invalid name', async () => {
-    await expect(() => {
-      return compile(
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  ':hover > *': {
-                    'text-box-trim': 'both',
-                    'text-box-edge': 'cap alphabetic',
-                  },
-                })
-              },
-            }
-          },
-        },
-      )
-    }).rejects.toThrow(/invalid utility selector/)
-  })
-
-  test('supports multiple selector names', async () => {
-    expect(
-      await run(
-        ['form-input', 'lg:form-textarea'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  '.form-input, .form-textarea': {
-                    appearance: 'none',
-                    'background-color': '#fff',
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .form-input {
-        appearance: none;
-        background-color: #fff;
-      }
-
-      @media (min-width: 1024px) {
-        .lg\\:form-textarea {
-          appearance: none;
-          background-color: #fff;
-        }
-      }
-      "
-    `)
-  })
-
-  test('supports pseudo classes and pseudo elements', async () => {
-    expect(
-      await run(
-        ['form-input', 'lg:form-textarea'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  '.form-input, .form-input::placeholder, .form-textarea:hover:focus': {
-                    'background-color': 'red',
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .form-input, .form-input::placeholder {
-        background-color: red;
-      }
-
-      @media (min-width: 1024px) {
-        .lg\\:form-textarea:hover:focus {
-          background-color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('nests complex utility names', async () => {
-    expect(
-      await run(
-        ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  '.a .b:hover .c': { color: 'red' },
-                  '.d > *': { color: 'red' },
-                  '.e .bar:not(.f):has(.g)': { color: 'red' },
-                  '.h~.i': { color: 'red' },
-                  '.j.j': { color: 'red' },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .j.j, .a .b:hover .c, .d > *, .e .bar:not(.f):has(.g), .h ~ .i {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('does not register class names inside `:nth-child(… of …)` as utilities', async () => {
-    expect(
-      await run(
-        ['foo', 'mark'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  '.foo:nth-child(2 of .mark)': { color: 'red' },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo:nth-child(2 of .mark) {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('prefixes nested class names with the configured theme prefix', async () => {
-    expect(
-      await run(
-        ['tw:a', 'tw:b', 'tw:c', 'tw:d'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-          @theme prefix(tw) {
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({ '.a .b:hover .c.d': { color: 'red' } })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .tw\\:a .tw\\:b:hover .tw\\:c.tw\\:d {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('replaces the class name with variants in nested selectors', async () => {
-    expect(
-      await run(
-        ['foo', 'md:foo', 'not-hover:md:foo'],
-        css`
-          @plugin "my-plugin";
-          @theme {
-            --breakpoint-md: 768px;
-          }
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({ '.foo': { ':where(.foo > :first-child)': { color: 'red' } } })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo :where(.foo > :first-child) {
-        color: red;
-      }
-
-      @media (min-width: 768px) {
-        .md\\:foo :where(.md\\:foo > :first-child), .not-hover\\:md\\:foo:not(:hover) :where(.not-hover\\:md\\:foo > :first-child) {
-          color: red;
-        }
-      }
-
-      @media not all and (hover: hover) {
-        @media (min-width: 768px) {
-          .not-hover\\:md\\:foo :where(.not-hover\\:md\\:foo > :first-child) {
-            color: red;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('values that are `false`, `null`, or `undefined` are discarded from CSS object ASTs', async () => {
-    expect(
-      await run(
-        ['foo'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addUtilities }: PluginAPI) => {
-                addUtilities({
-                  '.foo': {
-                    a: 'red',
-                    // @ts-ignore: While this isn't valid per the types this did work in v3
-                    'z-index': 0,
-                    // @ts-ignore
-                    '.bar': false,
-                    // @ts-ignore
-                    '.baz': null,
-                    // @ts-ignore
-                    '.qux': undefined,
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo {
-        a: red;
-        z-index: 0;
-      }
-      "
-    `)
-  })
-})
-
-describe('matchUtilities()', () => {
-  test('custom functional utility', async () => {
-    let input = css`
-      @plugin "my-plugin";
-
-      @tailwind utilities;
-
-      @theme reference {
-        --breakpoint-lg: 1024px;
-      }
-    `
-
-    expect(
-      await run(
-        [
-          'border-block',
-          'border-block-2',
-          'border-block-[35px]',
-          'border-block-[var(--foo)]',
-          'lg:border-block-2',
-        ],
-        input,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  { 'border-block': (value) => ({ 'border-block-width': value }) },
-                  { values: { DEFAULT: '1px', '2': '2px' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .border-block {
-        border-block-width: 1px;
-      }
-
-      .border-block-2 {
-        border-block-width: 2px;
-      }
-
-      .border-block-\\[35px\\] {
-        border-block-width: 35px;
-      }
-
-      .border-block-\\[var\\(--foo\\)\\] {
-        border-block-width: var(--foo);
-      }
-
-      @media (min-width: 1024px) {
-        .lg\\:border-block-2 {
-          border-block-width: 2px;
-        }
-      }
-      "
-    `)
-
-    expect(
-      await run(
-        [
-          '-border-block',
-          '-border-block-2',
-          'lg:-border-block-2',
-          'border-block-unknown',
-          'border-block/1',
-        ],
-        input,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  { 'border-block': (value) => ({ 'border-block-width': value }) },
-                  { values: { DEFAULT: '1px', '2': '2px' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toEqual('')
-  })
-
-  test('custom functional utilities can start with @', async () => {
-    expect(
-      await run(
-        ['@w-1', 'hover:@w-1'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities({ '@w': (value) => ({ width: value }) }, { values: { 1: '1px' } })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .\\@w-1 {
-        width: 1px;
-      }
-
-      @media (hover: hover) {
-        .hover\\:\\@w-1:hover {
-          width: 1px;
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom functional utilities can return an array of rules', async () => {
-    expect(
-      await run(
-        ['all-but-order-bottom-left-radius'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  {
-                    'all-but-order-bottom-left-radius': (value) =>
-                      [
-                        { 'border-top-left-radius': value },
-                        { 'border-top-right-radius': value },
-                        { 'border-bottom-right-radius': value },
-                      ] as CssInJs[],
-                  },
-                  { values: { DEFAULT: '1px' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .all-but-order-bottom-left-radius {
-        border-top-left-radius: 1px;
-        border-top-right-radius: 1px;
-        border-bottom-right-radius: 1px;
-      }
-      "
-    `)
-  })
-
-  test('custom functional utility with any modifier', async () => {
-    expect(
-      await run(
-        ['border-block', 'border-block-2', 'border-block/foo', 'border-block-2/foo'],
-        css`
-          @plugin "my-plugin";
-
-          @tailwind utilities;
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  {
-                    'border-block': (value, { modifier }) => ({
-                      '--my-modifier': modifier ?? 'none',
-                      'border-block-width': value,
-                    }),
-                  },
-                  { values: { DEFAULT: '1px', '2': '2px' }, modifiers: 'any' },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .border-block {
-        --my-modifier: none;
-        border-block-width: 1px;
-      }
-
-      .border-block-2 {
-        --my-modifier: none;
-        border-block-width: 2px;
-      }
-
-      .border-block-2\\/foo {
-        --my-modifier: foo;
-        border-block-width: 2px;
-      }
-
-      .border-block\\/foo {
-        --my-modifier: foo;
-        border-block-width: 1px;
-      }
-      "
-    `)
-  })
-
-  test('custom functional utility with known modifier', async () => {
-    let input = css`
-      @plugin "my-plugin";
-
-      @tailwind utilities;
-
-      @theme reference {
-        --breakpoint-lg: 1024px;
-      }
-    `
-
-    expect(
-      await run(
-        ['border-block', 'border-block-2', 'border-block/foo', 'border-block-2/foo'],
-        input,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  {
-                    'border-block': (value, { modifier }) => ({
-                      '--my-modifier': modifier ?? 'none',
-                      'border-block-width': value,
-                    }),
-                  },
-                  {
-                    values: { DEFAULT: '1px', '2': '2px' },
-                    modifiers: { foo: 'foo' },
-                  },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .border-block {
-        --my-modifier: none;
-        border-block-width: 1px;
-      }
-
-      .border-block-2 {
-        --my-modifier: none;
-        border-block-width: 2px;
-      }
-
-      .border-block-2\\/foo {
-        --my-modifier: foo;
-        border-block-width: 2px;
-      }
-
-      .border-block\\/foo {
-        --my-modifier: foo;
-        border-block-width: 1px;
-      }
-      "
-    `)
-
-    expect(
-      await run(['border-block/unknown', 'border-block-2/unknown'], input, {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ matchUtilities }: PluginAPI) => {
-              matchUtilities(
-                {
-                  'border-block': (value, { modifier }) => ({
-                    '--my-modifier': modifier ?? 'none',
-                    'border-block-width': value,
-                  }),
-                },
-                {
-                  values: { DEFAULT: '1px', '2': '2px' },
-                  modifiers: { foo: 'foo' },
-                },
-              )
-            },
-          }
-        },
-      }),
-    ).toEqual('')
-  })
-
-  // We're not married to this behavior — if there's a good reason to do this differently in the
-  // future don't be afraid to change what should happen in this scenario.
-  describe('plugins that handle a specific arbitrary value type prevent falling through to other plugins if the result is invalid for that plugin', () => {
-    test('implicit color modifier', async () => {
-      let input = css`
-        @tailwind utilities;
-        @plugin "my-plugin";
-      `
-
-      let options: Partial<Parameters<typeof compile>[1]> = {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ matchUtilities }: PluginAPI) => {
-              matchUtilities(
-                { scrollbar: (value) => ({ 'scrollbar-color': value }) },
-                { type: ['color', 'any'] },
-              )
-              matchUtilities(
-                { scrollbar: (value) => ({ 'scrollbar-width': value }) },
-                { type: ['length'] },
-              )
-            },
-          }
-        },
-      }
-
-      expect(
-        await run(['scrollbar-[2px]', 'scrollbar-[#08c]', 'scrollbar-[#08c]/50'], input, options),
-      ).toMatchInlineSnapshot(`
-        "
-        .scrollbar-\\[2px\\] {
-          scrollbar-width: 2px;
-        }
-
-        .scrollbar-\\[\\#08c\\] {
-          scrollbar-color: #08c;
-        }
-
-        .scrollbar-\\[\\#08c\\]\\/50 {
-          scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
-        }
-        "
-      `)
-      expect(await run(['scrollbar-[2px]/50'], input, options)).toEqual('')
-    })
-
-    test('no modifiers are supported by the plugins', async () => {
-      expect(
-        await run(
-          ['scrollbar-[2px]/50'],
-          css`
-            @tailwind utilities;
-            @plugin "my-plugin";
-          `,
-          {
-            async loadModule(_id, base) {
-              return {
-                path: '',
-                base,
-                module: ({ matchUtilities }: PluginAPI) => {
-                  matchUtilities(
-                    { scrollbar: (value) => ({ '--scrollbar-angle': value }) },
-                    { type: ['angle', 'any'] },
-                  )
-
-                  matchUtilities(
-                    { scrollbar: (value) => ({ '--scrollbar-width': value }) },
-                    { type: ['length'] },
-                  )
-                },
-              }
-            },
-          },
-        ),
-      ).toEqual('')
-    })
-
-    test('invalid named modifier', async () => {
-      expect(
-        await run(
-          ['scrollbar-[2px]/foo'],
-          css`
-            @tailwind utilities;
-            @plugin "my-plugin";
-          `,
-          {
-            async loadModule(_id, base) {
-              return {
-                path: '',
-                base,
-                module: ({ matchUtilities }: PluginAPI) => {
-                  matchUtilities(
-                    { scrollbar: (value) => ({ 'scrollbar-color': value }) },
-                    { type: ['color', 'any'], modifiers: { foo: 'foo' } },
-                  )
-
-                  matchUtilities(
-                    { scrollbar: (value) => ({ 'scrollbar-width': value }) },
-                    { type: ['length'], modifiers: { bar: 'bar' } },
-                  )
-                },
-              }
-            },
-          },
-        ),
-      ).toEqual('')
-    })
-  })
-
-  test('custom functional utilities with different types', async () => {
-    let input = css`
-      @plugin "my-plugin";
-
-      @tailwind utilities;
-
-      @theme reference {
-        --breakpoint-lg: 1024px;
-      }
-    `
-
-    expect(
-      await run(
-        [
-          'scrollbar-black',
-          'scrollbar-black/50',
-          'scrollbar-2',
-          'scrollbar-[#fff]',
-          'scrollbar-[#fff]/50',
-          'scrollbar-[2px]',
-          'scrollbar-[var(--my-color)]',
-          'scrollbar-[var(--my-color)]/50',
-          'scrollbar-[color:var(--my-color)]',
-          'scrollbar-[color:var(--my-color)]/50',
-          'scrollbar-[length:var(--my-width)]',
-        ],
-        input,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  { scrollbar: (value) => ({ 'scrollbar-color': value }) },
-                  { type: ['color', 'any'], values: { black: 'black' } },
-                )
-
-                matchUtilities(
-                  { scrollbar: (value) => ({ 'scrollbar-width': value }) },
-                  { type: ['length'], values: { 2: '2px' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .scrollbar-2, .scrollbar-\\[2px\\] {
-        scrollbar-width: 2px;
-      }
-
-      .scrollbar-\\[length\\:var\\(--my-width\\)\\] {
-        scrollbar-width: var(--my-width);
-      }
-
-      .scrollbar-\\[\\#fff\\] {
-        scrollbar-color: #fff;
-      }
-
-      .scrollbar-\\[\\#fff\\]\\/50 {
-        scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
-      }
-
-      .scrollbar-\\[color\\:var\\(--my-color\\)\\], .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        scrollbar-color: var(--my-color);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-          scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        }
-      }
-
-      .scrollbar-\\[var\\(--my-color\\)\\], .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
-        scrollbar-color: var(--my-color);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
-          scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        }
-      }
-
-      .scrollbar-black {
-        scrollbar-color: black;
-      }
-
-      .scrollbar-black\\/50 {
-        scrollbar-color: oklab(0% none none / .5);
-      }
-      "
-    `)
-
-    expect(
-      await run(
-        ['scrollbar-2/50', 'scrollbar-[2px]/50', 'scrollbar-[length:var(--my-width)]/50'],
-        input,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  { scrollbar: (value) => ({ 'scrollbar-color': value }) },
-                  { type: ['color', 'any'], values: { black: 'black' } },
-                )
-
-                matchUtilities(
-                  { scrollbar: (value) => ({ 'scrollbar-width': value }) },
-                  { type: ['length'], values: { 2: '2px' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toEqual('')
-  })
-
-  test('functional utilities with `type: color` automatically support opacity', async () => {
-    expect(
-      await run(
-        [
-          'scrollbar-current',
-          'scrollbar-current/45',
-          'scrollbar-black',
-          'scrollbar-black/33',
-          'scrollbar-black/[50%]',
-          'scrollbar-[var(--my-color)]/[25%]',
-        ],
-        css`
-          @plugin "my-plugin";
-
-          @tailwind utilities;
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  { scrollbar: (value) => ({ 'scrollbar-color': value }) },
-                  { type: ['color', 'any'], values: { black: 'black' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
-        scrollbar-color: var(--my-color);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
-          scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent);
-        }
-      }
-
-      .scrollbar-black {
-        scrollbar-color: black;
-      }
-
-      .scrollbar-black\\/33 {
-        scrollbar-color: oklab(0% none none / .33);
-      }
-
-      .scrollbar-black\\/\\[50\\%\\] {
-        scrollbar-color: oklab(0% none none / .5);
-      }
-
-      .scrollbar-current, .scrollbar-current\\/45 {
-        scrollbar-color: currentcolor;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .scrollbar-current\\/45 {
-          scrollbar-color: color-mix(in oklab, currentcolor 45%, transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  test('functional utilities with explicit modifiers', async () => {
-    expect(
-      await run(
-        ['scrollbar-[12px]', 'scrollbar-[12px]/foo', 'scrollbar-[12px]/bar'],
-        css`
-          @plugin "my-plugin";
-
-          @tailwind utilities;
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-            --opacity-my-opacity: 0.5;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  {
-                    scrollbar: (value, { modifier }) => ({
-                      '--modifier': modifier ?? 'none',
-                      'scrollbar-width': value,
-                    }),
-                  },
-                  { type: ['any'], values: {}, modifiers: { foo: 'foo' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .scrollbar-\\[12px\\] {
-        --modifier: none;
-        scrollbar-width: 12px;
-      }
-
-      .scrollbar-\\[12px\\]\\/foo {
-        --modifier: foo;
-        scrollbar-width: 12px;
-      }
-      "
-    `)
-  })
-
-  test('functional utilities support `@apply`', async () => {
-    expect(
-      await run(
-        ['foo-bar', 'lg:foo-bar', 'foo-[12px]', 'lg:foo-[12px]'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  { foo: (value) => ({ '--foo': value, [`@apply flex`]: {} }) },
-                  { values: { bar: 'bar' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo-\\[12px\\] {
-          --foo: 12px;
-          display: flex;
-        }
-
-        .foo-bar {
-          --foo: bar;
-          display: flex;
-        }
-
-        @media (min-width: 1024px) {
-          .lg\\:foo-\\[12px\\] {
-            --foo: 12px;
-            display: flex;
-          }
-
-          .lg\\:foo-bar {
-            --foo: bar;
-            display: flex;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('throws on custom utilities with an invalid name', async () => {
-    await expect(() => {
-      return compile(
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-        `,
-
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities({
-                  '.text-trim > *': () => ({
-                    'text-box-trim': 'both',
-                    'text-box-edge': 'cap alphabetic',
-                  }),
-                })
-              },
-            }
-          },
-        },
-      )
-    }).rejects.toThrow(/invalid utility name/)
-  })
-
-  test('replaces the class name with variants in nested selectors', async () => {
-    expect(
-      await run(
-        ['foo-red', 'md:foo-red', 'not-hover:md:foo-red'],
-        css`
-          @plugin "my-plugin";
-          @theme {
-            --breakpoint-md: 768px;
-          }
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchUtilities }: PluginAPI) => {
-                matchUtilities(
-                  { foo: (value) => ({ ':where(.foo > :first-child)': { color: value } }) },
-                  { values: { red: 'red' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo-red :where(.foo-red > :first-child) {
-        color: red;
-      }
-
-      @media (min-width: 768px) {
-        .md\\:foo-red :where(.md\\:foo-red > :first-child), .not-hover\\:md\\:foo-red:not(:hover) :where(.not-hover\\:md\\:foo-red > :first-child) {
-          color: red;
-        }
-      }
-
-      @media not all and (hover: hover) {
-        @media (min-width: 768px) {
-          .not-hover\\:md\\:foo-red :where(.not-hover\\:md\\:foo-red > :first-child) {
-            color: red;
-          }
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('addComponents()', () => {
-  test('is an alias for addUtilities', async () => {
-    expect(
-      await run(
-        ['btn', 'btn-blue', 'btn-red'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ addComponents }: PluginAPI) => {
-                addComponents({
-                  '.btn': {
-                    padding: '.5rem 1rem',
-                    borderRadius: '.25rem',
-                    fontWeight: '600',
-                  },
-                  '.btn-blue': {
-                    backgroundColor: '#3490dc',
-                    color: '#fff',
-                    '&:hover': {
-                      backgroundColor: '#2779bd',
-                    },
-                  },
-                  '.btn-red': {
-                    backgroundColor: '#e3342f',
-                    color: '#fff',
-                    '&:hover': {
-                      backgroundColor: '#cc1f1a',
-                    },
-                  },
-                })
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .btn {
-        border-radius: .25rem;
-        padding: .5rem 1rem;
-        font-weight: 600;
-      }
-
-      .btn-blue {
-        color: #fff;
-        background-color: #3490dc;
-      }
-
-      .btn-blue:hover {
-        background-color: #2779bd;
-      }
-
-      .btn-red {
-        color: #fff;
-        background-color: #e3342f;
-      }
-
-      .btn-red:hover {
-        background-color: #cc1f1a;
-      }
-      "
-    `)
-  })
-})
-
-describe('matchComponents()', () => {
-  test('is an alias for matchUtilities', async () => {
-    expect(
-      await run(
-        ['prose', 'sm:prose-sm', 'hover:prose-lg'],
-        css`
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          async loadModule(_id, base) {
-            return {
-              path: '',
-              base,
-              module: ({ matchComponents }: PluginAPI) => {
-                matchComponents(
-                  { prose: (value) => ({ '--container-size': value }) },
-                  { values: { DEFAULT: 'normal', sm: 'sm', lg: 'lg' } },
-                )
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .prose {
-        --container-size: normal;
-      }
-
-      @media (hover: hover) {
-        .hover\\:prose-lg:hover {
-          --container-size: lg;
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('prefix()', () => {
-  test('is an identity function', async () => {
-    using fn = vi.fn()
-    await compile(
-      css`
-        @plugin "my-plugin";
-      `,
-      {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ prefix }: PluginAPI) => {
-              fn(prefix('btn'))
-            },
-          }
-        },
-      },
-    )
-
-    expect(fn).toHaveBeenCalledWith('btn')
-  })
-})
-
-describe('config()', () => {
-  test('can return the resolved config when passed no arguments', async () => {
-    using fn = vi.fn()
-    await compile(
-      css`
-        @plugin "my-plugin";
-      `,
-      {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ config }: PluginAPI) => {
-              fn(config())
-            },
-          }
-        },
-      },
-    )
-
-    expect(fn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        theme: expect.objectContaining({
-          spacing: expect.any(Object),
-        }),
-      }),
-    )
-  })
-
-  test('can return part of the config', async () => {
-    using fn = vi.fn()
-    await compile(
-      css`
-        @plugin "my-plugin";
-      `,
-      {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ config }: PluginAPI) => {
-              fn(config('theme'))
-            },
-          }
-        },
-      },
-    )
-
-    expect(fn).toHaveBeenCalledWith(
-      expect.objectContaining({
-        spacing: expect.any(Object),
-      }),
-    )
-  })
-
-  test('falls back to default value if requested path does not exist', async () => {
-    using fn = vi.fn()
-    await compile(
-      css`
-        @plugin "my-plugin";
-      `,
-      {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: ({ config }: PluginAPI) => {
-              fn(config('somekey', 'defaultvalue'))
-            },
-          }
-        },
-      },
-    )
-
-    expect(fn).toHaveBeenCalledWith('defaultvalue')
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/19721
-  test('matchUtilities does not match Object.prototype properties as values', async ({
-    expect,
-  }) => {
-    // These should not crash or produce output
-    expect(
-      await run(
-        [
-          'test-constructor',
-          'test-hasOwnProperty',
-          'test-toString',
-          'test-valueOf',
-          'test-__proto__',
-        ],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin";
-        `,
-        {
-          loadModule: async (_id, base) => {
-            return {
-              path: '',
-              base,
-              module: plugin(function ({ matchUtilities }) {
-                matchUtilities(
-                  { test: (value) => ({ '--test': value }) },
-                  { values: { foo: 'bar' } },
-                )
-              }),
-            }
-          },
-        },
-      ),
-    ).toEqual('')
-  })
-})
diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts
deleted file mode 100644
index 11878fb30..000000000
--- a/packages/tailwindcss/src/compat/plugin-api.ts
+++ /dev/null
@@ -1,657 +0,0 @@
-import type { Features } from '..'
-import { substituteAtApply } from '../apply'
-import { atRule, cloneAstNode, context, decl, rule, type AstNode } from '../ast'
-import type { Candidate, CandidateModifier, NamedUtilityValue } from '../candidate'
-import { substituteFunctions } from '../css-functions'
-import * as CSS from '../css-parser'
-import type { DesignSystem } from '../design-system'
-import * as SelectorParser from '../selector-parser'
-import type { SourceLocation } from '../source-maps/source'
-import { withAlpha } from '../utilities'
-import { DefaultMap } from '../utils/default-map'
-import { escape } from '../utils/escape'
-import { inferDataType } from '../utils/infer-data-type'
-import { segment } from '../utils/segment'
-import { toKeyPath } from '../utils/to-key-path'
-import { compoundsForSelectors, IS_VALID_VARIANT_NAME, substituteAtSlot } from '../variants'
-import { walk, WalkAction } from '../walk'
-import type { ResolvedConfig, UserConfig } from './config/types'
-import { createThemeFn } from './plugin-functions'
-
-export type Config = UserConfig
-export type PluginFn = (api: PluginAPI) => void
-export type PluginWithConfig = {
-  handler: PluginFn
-  config?: UserConfig
-
-  /** @internal */
-  reference?: boolean
-  src?: SourceLocation | undefined
-}
-export type PluginWithOptions<T> = {
-  (options?: T): PluginWithConfig
-  __isOptionsFunction: true
-}
-
-export type Plugin = PluginFn | PluginWithConfig | PluginWithOptions<any>
-
-export type PluginAPI = {
-  addBase(base: CssInJs): void
-
-  addVariant(name: string, variant: string | string[] | CssInJs): void
-  matchVariant<T = string>(
-    name: string,
-    cb: (value: T | string, extra: { modifier: string | null }) => string | string[],
-    options?: {
-      values?: Record<string, T>
-      sort?(
-        a: { value: T | string; modifier: string | null },
-        b: { value: T | string; modifier: string | null },
-      ): number
-    },
-  ): void
-
-  addUtilities(
-    utilities: Record<string, CssInJs | CssInJs[]> | Record<string, CssInJs | CssInJs[]>[],
-    options?: {},
-  ): void
-  matchUtilities(
-    utilities: Record<
-      string,
-      (value: string, extra: { modifier: string | null }) => CssInJs | CssInJs[]
-    >,
-    options?: Partial<{
-      type: string | string[]
-      supportsNegativeValues: boolean
-      values: Record<string, string> & {
-        __BARE_VALUE__?: (value: NamedUtilityValue) => string | undefined
-      }
-      modifiers: 'any' | Record<string, string>
-    }>,
-  ): void
-
-  addComponents(utilities: Record<string, CssInJs> | Record<string, CssInJs>[], options?: {}): void
-  matchComponents(
-    utilities: Record<string, (value: string, extra: { modifier: string | null }) => CssInJs>,
-    options?: Partial<{
-      type: string | string[]
-      supportsNegativeValues: boolean
-      values: Record<string, string> & {
-        __BARE_VALUE__?: (value: NamedUtilityValue) => string | undefined
-      }
-      modifiers: 'any' | Record<string, string>
-    }>,
-  ): void
-
-  theme(path: string, defaultValue?: any): any
-  config(path?: string, defaultValue?: any): any
-  prefix(className: string): string
-}
-
-const IS_VALID_UTILITY_NAME = /^[a-z@][a-zA-Z0-9/%._-]*$/
-
-export function buildPluginApi({
-  designSystem,
-  ast,
-  resolvedConfig,
-  featuresRef,
-  referenceMode,
-  src,
-}: {
-  designSystem: DesignSystem
-  ast: AstNode[]
-  resolvedConfig: ResolvedConfig
-  featuresRef: { current: Features }
-  referenceMode: boolean
-  src: SourceLocation | undefined
-}): PluginAPI {
-  let api: PluginAPI = {
-    addBase(css) {
-      if (referenceMode) return
-      let baseNodes = objectToAst(css)
-      featuresRef.current |= substituteFunctions(baseNodes, designSystem)
-      let rule = atRule('@layer', 'base', baseNodes)
-      walk([rule], (node) => {
-        node.src = src
-      })
-      ast.push(rule)
-    },
-
-    addVariant(name, variant) {
-      if (!IS_VALID_VARIANT_NAME.test(name)) {
-        throw new Error(
-          `\`addVariant('${name}')\` defines an invalid variant name. Variants should only contain alphanumeric, dashes, or underscore characters and start with a lowercase letter or number.`,
-        )
-      }
-
-      // Ignore variants emitting v3 `:merge(…)` rules. In v4, the `group-*` and `peer-*` variants
-      // compound automatically.
-      if (typeof variant === 'string') {
-        if (variant.includes(':merge(')) return
-      } else if (Array.isArray(variant)) {
-        if (variant.some((v) => v.includes(':merge('))) return
-      } else if (typeof variant === 'object') {
-        function keyIncludes(object: Record<string, any>, search: string): boolean {
-          return Object.entries(object).some(
-            ([key, value]) =>
-              key.includes(search) || (typeof value === 'object' && keyIncludes(value, search)),
-          )
-        }
-        if (keyIncludes(variant, ':merge(')) return
-      }
-
-      // Single selector or multiple parallel selectors
-      if (typeof variant === 'string' || Array.isArray(variant)) {
-        designSystem.variants.static(
-          name,
-          (r) => {
-            r.nodes = parseVariantValue(variant, r.nodes)
-          },
-          {
-            compounds: compoundsForSelectors(typeof variant === 'string' ? [variant] : variant),
-          },
-        )
-      }
-
-      // CSS-in-JS object
-      else if (typeof variant === 'object') {
-        designSystem.variants.fromAst(name, objectToAst(variant), designSystem)
-      }
-    },
-    matchVariant(name, fn, options) {
-      function resolveVariantValue<T extends Parameters<typeof fn>[0]>(
-        value: T,
-        modifier: CandidateModifier | null,
-        nodes: AstNode[],
-      ): AstNode[] {
-        let resolved = fn(value, { modifier: modifier?.value ?? null })
-        return parseVariantValue(resolved, nodes)
-      }
-
-      try {
-        // Sample variant value and ignore variants emitting v3 `:merge` rules. In
-        // v4, the `group-*` and `peer-*` variants compound automatically.
-        let sample = fn('a', { modifier: null })
-        if (typeof sample === 'string' && sample.includes(':merge(')) {
-          return
-        } else if (Array.isArray(sample) && sample.some((r) => r.includes(':merge('))) {
-          return
-        }
-      } catch {}
-
-      let defaultOptionKeys = Object.keys(options?.values ?? {})
-      designSystem.variants.group(
-        () => {
-          designSystem.variants.functional(name, (ruleNodes, variant) => {
-            if (!variant.value) {
-              if (options?.values && 'DEFAULT' in options.values) {
-                ruleNodes.nodes = resolveVariantValue(
-                  options.values.DEFAULT,
-                  variant.modifier,
-                  ruleNodes.nodes,
-                )
-                return
-              }
-              return null
-            }
-
-            if (variant.value.kind === 'arbitrary') {
-              ruleNodes.nodes = resolveVariantValue(
-                variant.value.value,
-                variant.modifier,
-                ruleNodes.nodes,
-              )
-            } else if (variant.value.kind === 'named' && options?.values) {
-              if (!Object.hasOwn(options.values, variant.value.value)) {
-                return null
-              }
-              let defaultValue = options.values[variant.value.value]
-              if (typeof defaultValue !== 'string') {
-                return null
-              }
-
-              ruleNodes.nodes = resolveVariantValue(defaultValue, variant.modifier, ruleNodes.nodes)
-            } else {
-              return null
-            }
-          })
-        },
-        (a, z) => {
-          // Since we only define a functional variant in the group, the `kind`
-          // has to be `functional`.
-          if (a.kind !== 'functional' || z.kind !== 'functional') {
-            return 0
-          }
-
-          let aValueKey = a.value ? a.value.value : 'DEFAULT'
-          let zValueKey = z.value ? z.value.value : 'DEFAULT'
-
-          let aValue =
-            (options?.values && Object.hasOwn(options.values, aValueKey)
-              ? options.values[aValueKey]
-              : undefined) ?? aValueKey
-          let zValue =
-            (options?.values && Object.hasOwn(options.values, zValueKey)
-              ? options.values[zValueKey]
-              : undefined) ?? zValueKey
-
-          if (options && typeof options.sort === 'function') {
-            return options.sort(
-              { value: aValue, modifier: a.modifier?.value ?? null },
-              { value: zValue, modifier: z.modifier?.value ?? null },
-            )
-          }
-
-          let aOrder = defaultOptionKeys.indexOf(aValueKey)
-          let zOrder = defaultOptionKeys.indexOf(zValueKey)
-
-          // Sort arbitrary values after configured values
-          aOrder = aOrder === -1 ? defaultOptionKeys.length : aOrder
-          zOrder = zOrder === -1 ? defaultOptionKeys.length : zOrder
-
-          if (aOrder !== zOrder) return aOrder - zOrder
-
-          // SAFETY: The values don't need to be checked for equality as they
-          // are guaranteed to be unique since we sort a list of de-duped
-          // variants and different (valid) variants cannot produce the same AST.
-          return aValue < zValue ? -1 : 1
-        },
-      )
-
-      designSystem.variants.suggest(name, () =>
-        Object.keys(options?.values ?? {}).filter((v) => v !== 'DEFAULT'),
-      )
-    },
-
-    addUtilities(utilities) {
-      utilities = Array.isArray(utilities) ? utilities : [utilities]
-
-      let entries = utilities.flatMap((u) => Object.entries(u))
-
-      // Split multi-selector utilities into individual utilities
-      entries = entries.flatMap(([name, css]) =>
-        segment(name, ',').map((selector) => [selector.trim(), css] as [string, CssInJs]),
-      )
-
-      // Merge entries for the same class
-      let utils = new DefaultMap<string, AstNode[]>(() => [])
-
-      for (let [name, css] of entries) {
-        if (name.startsWith('@keyframes ')) {
-          if (!referenceMode) {
-            let keyframes = rule(name, objectToAst(css))
-            walk([keyframes], (node) => {
-              node.src = src
-            })
-            ast.push(keyframes)
-          }
-          continue
-        }
-
-        let selectorAst = SelectorParser.parse(name)
-        let foundValidUtility = false
-
-        walk(selectorAst, (node) => {
-          if (
-            node.kind === 'selector' &&
-            node.value[0] === '.' &&
-            IS_VALID_UTILITY_NAME.test(node.value.slice(1))
-          ) {
-            let value = node.value
-            node.value = '&'
-            let selector = SelectorParser.toCss(selectorAst)
-
-            let className = value.slice(1)
-            let contents = selector === '&' ? objectToAst(css) : [rule(selector, objectToAst(css))]
-            utils.get(className).push(...contents)
-            foundValidUtility = true
-
-            node.value = value
-            return
-          }
-
-          if (
-            node.kind === 'function' &&
-            (node.value === ':not' ||
-              // A class inside `:nth-child(… of <selector>)` is part of the
-              // condition, not a utility being defined.
-              node.value === ':nth-child' ||
-              node.value === ':nth-last-child')
-          ) {
-            return WalkAction.Skip
-          }
-        })
-
-        if (!foundValidUtility) {
-          throw new Error(
-            `\`addUtilities({ '${name}' : … })\` defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. \`.scrollbar-none\`.`,
-          )
-        }
-      }
-
-      for (let [className, ast] of utils) {
-        // Prefix all class selector with the configured theme prefix
-        if (designSystem.theme.prefix) {
-          walk(ast, (node) => {
-            if (node.kind === 'rule') {
-              let selectorAst = SelectorParser.parse(node.selector)
-              walk(selectorAst, (node) => {
-                if (node.kind === 'selector' && node.value[0] === '.') {
-                  node.value = `.${designSystem.theme.prefix}\\:${node.value.slice(1)}`
-                }
-              })
-              node.selector = SelectorParser.toCss(selectorAst)
-            }
-          })
-        }
-
-        designSystem.utilities.static(className, (candidate) => {
-          let clonedAst = ast.map(cloneAstNode)
-          replaceNestedClassNameReferences(clonedAst, className, candidate.raw)
-          featuresRef.current |= substituteAtApply(clonedAst, designSystem)
-          return clonedAst
-        })
-      }
-    },
-
-    matchUtilities(utilities, options) {
-      let types = options?.type
-        ? Array.isArray(options?.type)
-          ? options.type
-          : [options.type]
-        : ['any']
-
-      for (let [name, fn] of Object.entries(utilities)) {
-        if (!IS_VALID_UTILITY_NAME.test(name)) {
-          throw new Error(
-            `\`matchUtilities({ '${name}' : … })\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter, eg. \`scrollbar\`.`,
-          )
-        }
-
-        function compileFn({ negative }: { negative: boolean }) {
-          return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-            // Throw out any candidate whose value is not a supported type
-            if (
-              candidate.value?.kind === 'arbitrary' &&
-              types.length > 0 &&
-              !types.includes('any')
-            ) {
-              // The candidate has an explicit data type but it's not in the list
-              // of supported types by this utility. For example, a `scrollbar`
-              // utility that is only used to change the scrollbar color but is
-              // used with a `length` value: `scrollbar-[length:var(--whatever)]`
-              if (candidate.value.dataType && !types.includes(candidate.value.dataType)) {
-                return
-              }
-
-              // The candidate does not have an explicit data type and the value
-              // cannot be inferred as one of the supported types. For example, a
-              // `scrollbar` utility that is only used to change the scrollbar
-              // color but is used with a `length` value: `scrollbar-[33px]`
-              if (
-                !candidate.value.dataType &&
-                !inferDataType(candidate.value.value, types as any[])
-              ) {
-                return
-              }
-            }
-
-            let isColor = types.includes('color')
-
-            // Resolve the candidate value
-            let value: string | null = null
-            let ignoreModifier = false
-
-            {
-              let values = options?.values ?? {}
-
-              if (isColor) {
-                // Color utilities implicitly support `inherit`, `transparent`, and `currentcolor`
-                // for backwards compatibility but still allow them to be overridden
-                values = Object.assign(
-                  {
-                    inherit: 'inherit',
-                    transparent: 'transparent',
-                    current: 'currentcolor',
-                  },
-                  values,
-                )
-              }
-
-              if (!candidate.value) {
-                value = values.DEFAULT ?? null
-              } else if (candidate.value.kind === 'arbitrary') {
-                value = candidate.value.value
-              } else if (
-                candidate.value.fraction &&
-                Object.hasOwn(values, candidate.value.fraction)
-              ) {
-                value = values[candidate.value.fraction]
-                ignoreModifier = true
-              } else if (Object.hasOwn(values, candidate.value.value)) {
-                value = values[candidate.value.value]
-              } else if (values.__BARE_VALUE__) {
-                value = values.__BARE_VALUE__(candidate.value) ?? null
-                ignoreModifier =
-                  (candidate.value.fraction !== null && value?.includes('/')) ?? false
-              }
-            }
-
-            if (value === null) return
-
-            // Resolve the modifier value
-            let modifier: string | null
-
-            {
-              let modifiers = options?.modifiers ?? null
-
-              if (!candidate.modifier) {
-                modifier = null
-              } else if (modifiers === 'any' || candidate.modifier.kind === 'arbitrary') {
-                modifier = candidate.modifier.value
-              } else if (modifiers && Object.hasOwn(modifiers, candidate.modifier.value)) {
-                modifier = modifiers[candidate.modifier.value]
-              } else if (isColor && !Number.isNaN(Number(candidate.modifier.value))) {
-                modifier = `${candidate.modifier.value}%`
-              } else {
-                modifier = null
-              }
-            }
-
-            // A modifier was provided but is invalid
-            if (candidate.modifier && modifier === null && !ignoreModifier) {
-              // For arbitrary values, return `null` to avoid falling through to the next utility
-              return candidate.value?.kind === 'arbitrary' ? null : undefined
-            }
-
-            if (isColor && modifier !== null) {
-              value = withAlpha(value, modifier)
-            }
-
-            if (negative) {
-              value = `calc(${value} * -1)`
-            }
-
-            let ast = objectToAst(fn(value, { modifier }))
-            replaceNestedClassNameReferences(ast, name, candidate.raw)
-            featuresRef.current |= substituteAtApply(ast, designSystem)
-            return ast
-          }
-        }
-
-        if (options?.supportsNegativeValues) {
-          designSystem.utilities.functional(`-${name}`, compileFn({ negative: true }), { types })
-        }
-        designSystem.utilities.functional(name, compileFn({ negative: false }), { types })
-
-        designSystem.utilities.suggest(name, () => {
-          let values = options?.values ?? {}
-          let valueKeys = new Set<string | null>(Object.keys(values))
-
-          // The `__BARE_VALUE__` key is a special key used to ensure bare values
-          // work even with legacy configs and plugins
-          valueKeys.delete('__BARE_VALUE__')
-
-          // The `__CSS_VALUES__` key is a special key used by the theme function
-          // to transport `@theme` metadata about values from CSS
-          valueKeys.delete('__CSS_VALUES__')
-
-          // The `DEFAULT` key is represented as `null` in the utility API
-          if (valueKeys.has('DEFAULT')) {
-            valueKeys.delete('DEFAULT')
-            valueKeys.add(null)
-          }
-
-          let modifiers = options?.modifiers ?? {}
-          let modifierKeys = modifiers === 'any' ? [] : Object.keys(modifiers)
-
-          return [
-            {
-              supportsNegative: options?.supportsNegativeValues ?? false,
-              values: Array.from(valueKeys),
-              modifiers: modifierKeys,
-            },
-          ]
-        })
-      }
-    },
-
-    addComponents(components, options) {
-      this.addUtilities(components, options)
-    },
-
-    matchComponents(components, options) {
-      this.matchUtilities(components, options)
-    },
-
-    theme: createThemeFn(
-      designSystem,
-      () => resolvedConfig.theme ?? {},
-      (value) => value,
-    ),
-
-    prefix(className) {
-      return className
-    },
-
-    config(path, defaultValue) {
-      let obj: Record<any, any> = resolvedConfig
-
-      if (!path) return obj
-
-      let keypath = toKeyPath(path)
-
-      for (let i = 0; i < keypath.length; ++i) {
-        let key = keypath[i]
-
-        if (obj[key] === undefined) return defaultValue
-
-        obj = obj[key]
-      }
-
-      return obj ?? defaultValue
-    },
-  }
-
-  // Bind these functions so they can use `this`
-  api.addComponents = api.addComponents.bind(api)
-  api.matchComponents = api.matchComponents.bind(api)
-
-  return api
-}
-
-export type CssInJs = { [key: string]: string | string[] | CssInJs | CssInJs[] }
-
-export function objectToAst(rules: CssInJs | CssInJs[]): AstNode[] {
-  let ast: AstNode[] = []
-
-  rules = Array.isArray(rules) ? rules : [rules]
-
-  let entries = rules.flatMap((rule) => Object.entries(rule))
-
-  for (let [name, value] of entries) {
-    if (value === null || value === undefined) continue
-
-    // @ts-expect-error
-    // We do not want `false` present in the types but still need to discard these nodes for
-    // compatibility purposes
-    if (value === false) continue
-
-    if (typeof value !== 'object') {
-      if (!name.startsWith('--')) {
-        if (value === '@slot') {
-          ast.push(rule(name, [atRule('@slot')]))
-          continue
-        }
-
-        // Convert camelCase to kebab-case:
-        // https://github.com/postcss/postcss-js/blob/b3db658b932b42f6ac14ca0b1d50f50c4569805b/parser.js#L30-L35
-        name = name.replace(/([A-Z])/g, '-$1').toLowerCase()
-      }
-
-      ast.push(decl(name, String(value)))
-    } else if (Array.isArray(value)) {
-      for (let item of value) {
-        if (typeof item === 'string') {
-          ast.push(decl(name, item))
-        } else {
-          ast.push(rule(name, objectToAst(item)))
-        }
-      }
-    } else {
-      ast.push(rule(name, objectToAst(value)))
-    }
-  }
-
-  return ast
-}
-
-function parseVariantValue(resolved: string | string[], nodes: AstNode[]): AstNode[] {
-  let resolvedArray = typeof resolved === 'string' ? [resolved] : resolved
-  return resolvedArray.flatMap((r): AstNode | AstNode[] => {
-    if (r.trim().endsWith('}')) {
-      let usesAtScope = r.includes('@scope')
-      let updatedCSS = r.replace('}', '{@slot}}')
-      let ast = CSS.parse(updatedCSS)
-
-      if (usesAtScope) {
-        substituteAtSlot(ast, [context({ source: 'user' }, nodes)])
-        return context({ source: 'variant' }, ast)
-      }
-
-      substituteAtSlot(ast, nodes)
-      return ast
-    } else {
-      let node = rule(r, nodes)
-
-      if (node.kind === 'at-rule' && node.name === '@scope') {
-        node.nodes = [context({ source: 'user' }, nodes)]
-        return context({ source: 'variant' }, [node])
-      }
-
-      return node
-    }
-  })
-}
-
-type Primitive = string | number | boolean | null
-export type CssPluginOptions = Record<string, Primitive | Primitive[]>
-
-function replaceNestedClassNameReferences(
-  ast: AstNode[],
-  utilityName: string,
-  rawCandidate: string,
-) {
-  // Replace nested rules using the utility name in the selector
-  walk(ast, (node) => {
-    if (node.kind === 'rule') {
-      let selectorAst = SelectorParser.parse(node.selector)
-      walk(selectorAst, (node) => {
-        if (node.kind === 'selector' && node.value === `.${utilityName}`) {
-          node.value = `.${escape(rawCandidate)}`
-        }
-      })
-      node.selector = SelectorParser.toCss(selectorAst)
-    }
-  })
-}
diff --git a/packages/tailwindcss/src/compat/plugin-functions.ts b/packages/tailwindcss/src/compat/plugin-functions.ts
deleted file mode 100644
index bbd5fac46..000000000
--- a/packages/tailwindcss/src/compat/plugin-functions.ts
+++ /dev/null
@@ -1,281 +0,0 @@
-import type { DesignSystem } from '../design-system'
-import { ThemeOptions, type Theme, type ThemeKey } from '../theme'
-import { withAlpha } from '../utilities'
-import { DefaultMap } from '../utils/default-map'
-import { unescape } from '../utils/escape'
-import { toKeyPath } from '../utils/to-key-path'
-import { keyPathToCssProperty } from './apply-config-to-theme'
-import { deepMerge } from './config/deep-merge'
-import type { UserConfig } from './config/types'
-
-export function createThemeFn(
-  designSystem: DesignSystem,
-  configTheme: () => UserConfig['theme'],
-  resolveValue: (value: any) => any,
-) {
-  return function theme(path: string, defaultValue?: unknown) {
-    // Extract an eventual modifier from the path. e.g.:
-    // - "colors.red.500 / 50%" -> "50%"
-    // - "foo/bar/baz/50%"      -> "50%"
-    let lastSlash = path.lastIndexOf('/')
-    let modifier: string | null = null
-    if (lastSlash !== -1) {
-      modifier = path.slice(lastSlash + 1).trim()
-      path = path.slice(0, lastSlash).trim()
-    }
-
-    let resolvedValue = (() => {
-      let keypath = toKeyPath(path)
-      let [cssValue, options] = readFromCss(designSystem.theme, keypath)
-
-      let configValue = resolveValue(get(configTheme() ?? {}, keypath) ?? null)
-
-      if (typeof configValue === 'string') {
-        configValue = configValue.replace('<alpha-value>', '1')
-      }
-
-      // Resolved to a primitive value.
-      if (typeof cssValue !== 'object') {
-        if (typeof options !== 'object' && options & ThemeOptions.DEFAULT) {
-          return configValue ?? cssValue
-        }
-
-        return cssValue
-      }
-
-      if (configValue !== null && typeof configValue === 'object' && !Array.isArray(configValue)) {
-        let configValueCopy: Record<string, unknown> & { __CSS_VALUES__?: Record<string, number> } =
-          // We want to make sure that we don't mutate the original config
-          // value. Ideally we use `structuredClone` here, but it's not possible
-          // because it can contain functions.
-          deepMerge({}, [configValue], (_, b) => b)
-
-        // There is no `cssValue`, which means we can back-fill it with values
-        // from the `configValue`.
-        if (cssValue === null && Object.hasOwn(configValue, '__CSS_VALUES__')) {
-          let localCssValue: Record<string, unknown> = {}
-          for (let key in configValue.__CSS_VALUES__) {
-            localCssValue[key] = configValue[key]
-            delete configValueCopy[key]
-          }
-          cssValue = localCssValue
-        }
-
-        for (let key in cssValue) {
-          if (key === '__CSS_VALUES__') continue
-
-          // If the value is coming from a default source (`@theme default`),
-          // then we keep the value from the JS config (which is also a
-          // default source, but wins over the built-in defaults).
-          if (
-            configValue?.__CSS_VALUES__?.[key] & ThemeOptions.DEFAULT &&
-            get(configValueCopy, key.split('-')) !== undefined
-          ) {
-            continue
-          }
-
-          // CSS values from `@theme` win over values from the config
-          configValueCopy[unescape(key)] = cssValue[key]
-        }
-
-        return configValueCopy
-      }
-
-      // Handle the tuple case
-      if (Array.isArray(cssValue) && Array.isArray(options) && Array.isArray(configValue)) {
-        let base = cssValue[0]
-        let extra = cssValue[1]
-
-        // Values from the config overwrite any default values from the CSS theme
-        if (options[0] & ThemeOptions.DEFAULT) {
-          base = configValue[0] ?? base
-        }
-
-        for (let key of Object.keys(extra)) {
-          if (options[1][key] & ThemeOptions.DEFAULT) {
-            extra[key] = configValue[1][key] ?? extra[key]
-          }
-        }
-
-        return [base, extra]
-      }
-
-      // If `--color-foo` and `--color-foo-bar` are both defined, `colors.foo`
-      // produces a synthetic object:
-      //
-      // ```ts
-      // { DEFAULT: 'red', bar: 'blue', __CSS_VALUES__: { DEFAULT: 0, bar: 0 } }
-      // ```
-      //
-      // Prefer `DEFAULT` instead of exposing the object to plugin code.
-      //
-      // This only applies to lookups of a specific key (e.g. `colors.foo`). A
-      // namespace root lookup (e.g. `theme('shadow')`) resolves to the whole
-      // namespace as an object, like in v3.
-      if (
-        keypath.length > 1 &&
-        cssValue !== null &&
-        typeof cssValue === 'object' &&
-        !Array.isArray(cssValue) &&
-        'DEFAULT' in cssValue
-      ) {
-        return cssValue.DEFAULT
-      }
-
-      // Values from CSS take precedence over values from the config
-      return cssValue ?? configValue
-    })()
-
-    // Apply the opacity modifier if present
-    if (modifier && typeof resolvedValue === 'string') {
-      resolvedValue = withAlpha(resolvedValue, modifier)
-    }
-
-    return resolvedValue ?? defaultValue
-  }
-}
-
-function readFromCss(
-  theme: Theme,
-  path: string[],
-):
-  | [value: string | null | Record<string, unknown>, options: number]
-  | [value: Record<string, unknown>, options: Record<string, number>] {
-  // `--color-red-500` should resolve to the theme variable directly, no look up
-  // and handling of nested objects is required.
-  if (path.length === 1 && path[0].startsWith('--')) {
-    return [theme.get([path[0] as ThemeKey]), theme.getOptions(path[0])] as const
-  }
-
-  type ThemeValue =
-    // A normal string value
-    | string
-
-    // A nested tuple with additional data
-    | [main: string, extra: Record<string, string>]
-
-  let themeKey = keyPathToCssProperty(path)
-
-  let map = new Map<string | null, ThemeValue>()
-  let nested = new DefaultMap<string | null, Map<string, [value: string, options: number]>>(
-    () => new Map(),
-  )
-
-  let ns = theme.namespace(`--${themeKey}`)
-  if (ns.size === 0) {
-    return [null, ThemeOptions.NONE]
-  }
-
-  let options = new Map()
-
-  for (let [key, value] of ns) {
-    // Non-nested values can be set directly
-    if (!key || !key.includes('--')) {
-      map.set(key, value)
-      options.set(key, theme.getOptions(!key ? `--${themeKey}` : `--${themeKey}-${key}`))
-      continue
-    }
-
-    // Nested values are stored separately
-    let nestedIndex = key.indexOf('--')
-
-    let mainKey = key.slice(0, nestedIndex)
-    let nestedKey = key.slice(nestedIndex + 2)
-
-    // Make `nestedKey` camel case:
-    nestedKey = nestedKey.replace(/-([a-z])/g, (_, a) => a.toUpperCase())
-
-    nested
-      .get(mainKey === '' ? null : mainKey)
-      .set(nestedKey, [value, theme.getOptions(`--${themeKey}${key}`)])
-  }
-
-  let baseOptions = theme.getOptions(`--${themeKey}`)
-  for (let [key, extra] of nested) {
-    let value = map.get(key)
-    if (typeof value !== 'string') continue
-
-    let extraObj: Record<string, string> = {}
-    let extraOptionsObj: Record<string, number> = {}
-
-    for (let [nestedKey, [nestedValue, nestedOptions]] of extra) {
-      extraObj[nestedKey] = nestedValue
-      extraOptionsObj[nestedKey] = nestedOptions
-    }
-
-    map.set(key, [value, extraObj])
-    options.set(key, [baseOptions, extraOptionsObj])
-  }
-
-  // We have to turn the map into object-like structure for v3 compatibility
-  let obj: Record<string, unknown> = {}
-  let optionsObj: Record<string, number> = {}
-
-  for (let [key, value] of map) {
-    set(obj, [key ?? 'DEFAULT'], value)
-  }
-
-  for (let [key, value] of options) {
-    set(optionsObj, [key ?? 'DEFAULT'], value)
-  }
-
-  // If the request looked like `theme('animation.DEFAULT')` it would have been
-  // turned into a lookup for `--animation-*` so we should extract the value for
-  // the `DEFAULT` key from the list of possible values. If there is no
-  // `DEFAULT` in the list, there is no match so return `null`.
-  if (path[path.length - 1] === 'DEFAULT') {
-    return [(obj?.DEFAULT ?? null) as any, optionsObj.DEFAULT ?? ThemeOptions.NONE] as const
-  }
-
-  // The request looked like `theme('animation.spin')` and was turned into a
-  // lookup for `--animation-spin-*` which had only one entry which means it
-  // should be returned directly.
-  //
-  // This only applies to lookups of a specific key (`path.length > 1`). A
-  // namespace root lookup like `theme('shadow')` resolves to the whole
-  // namespace as an object, like in v3, so it must keep the object shape (`{
-  // DEFAULT: … }`).
-  if (path.length > 1 && 'DEFAULT' in obj && Object.keys(obj).length === 1) {
-    return [obj.DEFAULT as any, optionsObj.DEFAULT ?? ThemeOptions.NONE] as const
-  }
-
-  // Attach the CSS values to the object for later use. This object could be
-  // mutated by the user so we want to keep the original CSS values around.
-  obj.__CSS_VALUES__ = optionsObj
-
-  return [obj, optionsObj] as const
-}
-
-function get(obj: any, path: string[]) {
-  for (let i = 0; i < path.length; ++i) {
-    let key = path[i]
-
-    // The key does not exist so concatenate it with the next key.
-    // We use Object.hasOwn to avoid matching inherited prototype properties
-    // (e.g. "constructor", "toString") when traversing config objects.
-    if (obj === null || obj === undefined || typeof obj !== 'object' || !Object.hasOwn(obj, key)) {
-      if (path[i + 1] === undefined) {
-        return undefined
-      }
-
-      path[i + 1] = `${key}-${path[i + 1]}`
-      continue
-    }
-
-    obj = obj[key]
-  }
-
-  return obj
-}
-
-function set(obj: any, path: string[], value: any) {
-  for (let key of path.slice(0, -1)) {
-    if (obj[key] === undefined) {
-      obj[key] = {}
-    }
-
-    obj = obj[key]
-  }
-
-  obj[path[path.length - 1]] = value
-}
diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts
deleted file mode 100644
index d81cd8de6..000000000
--- a/packages/tailwindcss/src/compat/screens-config.test.ts
+++ /dev/null
@@ -1,669 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { run } from '../test-utils/run'
-
-const css = String.raw
-
-test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
-  expect(
-    await run(
-      [
-        'sm:flex',
-        'md:flex',
-        'lg:flex',
-        'min-sm:max-md:underline',
-        'min-md:max-lg:underline',
-        'max-w-screen-sm',
-        // Ensure other core variants appear at the end
-        'print:items-end',
-      ],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @theme {
-          --breakpoint-md: 50rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              extend: {
-                screens: {
-                  sm: '44rem',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .max-w-screen-sm {
-      max-width: 44rem;
-    }
-
-    @media (min-width: 44rem) {
-      .sm\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 50rem) {
-        .min-sm\\:max-md\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 50rem) {
-      .md\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 64rem) {
-        .min-md\\:max-lg\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .lg\\:flex {
-        display: flex;
-      }
-    }
-
-    @media print {
-      .print\\:items-end {
-        align-items: flex-end;
-      }
-    }
-    "
-  `)
-})
-
-test('JS config `screens` extend CSS `--breakpoint-*`', async () => {
-  expect(
-    await run(
-      [
-        // Order is messed up on purpose
-        'md:flex',
-        'sm:flex',
-        'lg:flex',
-        'xs:flex',
-        'min-md:max-lg:underline',
-        'min-sm:max-md:underline',
-        'min-xs:flex',
-        'min-xs:max-md:underline',
-
-        // Ensure other core variants appear at the end
-        'print:items-end',
-      ],
-      css`
-        @theme default {
-          --breakpoint-xs: 39rem;
-          --breakpoint-md: 49rem;
-        }
-        @theme {
-          --breakpoint-md: 50rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              extend: {
-                screens: {
-                  xs: '30rem',
-                  sm: '40rem',
-                  md: '48rem',
-                  lg: '60rem',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 30rem) {
-      .min-xs\\:flex, .xs\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 50rem) {
-        .min-xs\\:max-md\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 40rem) {
-      .sm\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 50rem) {
-        .min-sm\\:max-md\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 50rem) {
-      .md\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 60rem) {
-        .min-md\\:max-lg\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 60rem) {
-      .lg\\:flex {
-        display: flex;
-      }
-    }
-
-    @media print {
-      .print\\:items-end {
-        align-items: flex-end;
-      }
-    }
-    "
-  `)
-})
-
-test('JS config `screens` only setup, even if those match the default-theme export', async () => {
-  expect(
-    await run(
-      [
-        // Order is messed up on purpose
-        'md:flex',
-        'sm:flex',
-        'lg:flex',
-        'min-md:max-lg:underline',
-        'min-sm:max-md:underline',
-
-        // Ensure other core variants appear at the end
-        'print:items-end',
-      ],
-      css`
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              screens: {
-                sm: '40rem',
-                md: '48rem',
-                lg: '64rem',
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 40rem) {
-      .sm\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 48rem) {
-        .min-sm\\:max-md\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .md\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 64rem) {
-        .min-md\\:max-lg\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .lg\\:flex {
-        display: flex;
-      }
-    }
-
-    @media print {
-      .print\\:items-end {
-        align-items: flex-end;
-      }
-    }
-    "
-  `)
-})
-
-test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => {
-  expect(
-    await run(
-      [
-        'sm:flex',
-        'md:flex',
-        'mini:flex',
-        'midi:flex',
-        'maxi:flex',
-        'min-md:max-lg:underline',
-        'min-sm:max-md:underline',
-        'min-midi:max-maxi:underline',
-        'min-mini:max-midi:underline',
-
-        // Ensure other core variants appear at the end
-        'print:items-end',
-      ],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              extend: {
-                screens: {
-                  mini: '40rem',
-                  midi: '48rem',
-                  maxi: '64rem',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 40rem) {
-      .mini\\:flex, .sm\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 48rem) {
-        .min-mini\\:max-midi\\:underline, .min-sm\\:max-md\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .md\\:flex, .midi\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 64rem) {
-        .min-md\\:max-lg\\:underline, .min-midi\\:max-maxi\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .maxi\\:flex {
-        display: flex;
-      }
-    }
-
-    @media print {
-      .print\\:items-end {
-        align-items: flex-end;
-      }
-    }
-    "
-  `)
-})
-
-test('JS config with `theme: { extends }` should not include the `default-config` values', async () => {
-  let input = css`
-    @config "./config.js";
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(['sm:flex', 'md:flex', 'min-md:max-lg:underline', 'min-sm:max-md:underline'], input, {
-      loadModule: async () => ({
-        module: {
-          theme: {
-            extend: {
-              screens: {
-                mini: '40rem',
-                midi: '48rem',
-                maxi: '64rem',
-              },
-            },
-          },
-        },
-        base: '/root',
-        path: '',
-      }),
-    }),
-  ).toBe('')
-
-  expect(
-    await run(
-      [
-        'mini:flex',
-        'midi:flex',
-        'maxi:flex',
-        'min-midi:max-maxi:underline',
-        'min-mini:max-midi:underline',
-
-        // Ensure other core variants appear at the end
-        'print:items-end',
-      ],
-      input,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              extend: {
-                screens: {
-                  mini: '40rem',
-                  midi: '48rem',
-                  maxi: '64rem',
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 40rem) {
-      .mini\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 48rem) {
-        .min-mini\\:max-midi\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 48rem) {
-      .midi\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 64rem) {
-        .min-midi\\:max-maxi\\:underline {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    @media (min-width: 64rem) {
-      .maxi\\:flex {
-        display: flex;
-      }
-    }
-
-    @media print {
-      .print\\:items-end {
-        align-items: flex-end;
-      }
-    }
-    "
-  `)
-})
-
-describe('complex screen configs', () => {
-  test('generates utilities', async () => {
-    let input = css`
-      @config "./config.js";
-      @tailwind utilities;
-    `
-
-    expect(
-      await run(['min-sm:flex', 'min-md:flex', 'min-xl:flex', 'min-tall:flex'], input, {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              extend: {
-                screens: {
-                  sm: { max: '639px' },
-                  md: [
-                    //
-                    { min: '668px', max: '767px' },
-                    '868px',
-                  ],
-                  lg: { min: '868px' },
-                  xl: { min: '1024px', max: '1279px' },
-                  tall: { raw: '(min-height: 800px)' },
-                },
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      }),
-    ).toBe('')
-
-    expect(
-      await run(
-        [
-          'sm:flex',
-          'md:flex',
-          'lg:flex',
-          'min-lg:flex',
-          'xl:flex',
-          'tall:flex',
-
-          // Ensure other core variants appear at the end
-          'print:items-end',
-        ],
-        input,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                extend: {
-                  screens: {
-                    sm: { max: '639px' },
-                    md: [
-                      //
-                      { min: '668px', max: '767px' },
-                      '868px',
-                    ],
-                    lg: { min: '868px' },
-                    xl: { min: '1024px', max: '1279px' },
-                    tall: { raw: '(min-height: 800px)' },
-                  },
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 868px) {
-        .lg\\:flex, .min-lg\\:flex {
-          display: flex;
-        }
-      }
-
-      @media (max-width: 639px) {
-        .sm\\:flex {
-          display: flex;
-        }
-      }
-
-      @media (max-width: 767px) and (min-width: 668px), (min-width: 868px) {
-        .md\\:flex {
-          display: flex;
-        }
-      }
-
-      @media (max-width: 1279px) and (min-width: 1024px) {
-        .xl\\:flex {
-          display: flex;
-        }
-      }
-
-      @media (min-height: 800px) {
-        .tall\\:flex {
-          display: flex;
-        }
-      }
-
-      @media print {
-        .print\\:items-end {
-          align-items: flex-end;
-        }
-      }
-      "
-    `)
-  })
-
-  test("don't interfere with `min-*` and `max-*` variants of non-complex screen configs", async () => {
-    expect(
-      await run(
-        [
-          'sm:flex',
-          'md:flex',
-          'portrait:flex',
-          'min-sm:flex',
-          'min-md:flex',
-          'min-portrait:flex',
-          // Ensure other core variants appear at the end
-          'print:items-end',
-        ],
-        css`
-          @theme default {
-            --breakpoint-sm: 39rem;
-            --breakpoint-md: 48rem;
-          }
-          @config "./config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => ({
-            module: {
-              theme: {
-                extend: {
-                  screens: {
-                    sm: '40rem',
-                    portrait: { raw: 'screen and (orientation: portrait)' },
-                  },
-                },
-              },
-            },
-            base: '/root',
-            path: '',
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 40rem) {
-        .min-sm\\:flex, .sm\\:flex {
-          display: flex;
-        }
-      }
-
-      @media (min-width: 48rem) {
-        .md\\:flex, .min-md\\:flex {
-          display: flex;
-        }
-      }
-
-      @media screen and (orientation: portrait) {
-        .portrait\\:flex {
-          display: flex;
-        }
-      }
-
-      @media print {
-        .print\\:items-end {
-          align-items: flex-end;
-        }
-      }
-      "
-    `)
-  })
-})
-
-test('JS config `screens` can overwrite default CSS `--breakpoint-*`', async () => {
-  // Note: The `sm`, `md`, and other variants are still there because they are
-  // created before the compat layer can intercept. We do not remove them
-  // currently.
-  expect(
-    await run(
-      ['min-sm:flex', 'min-md:flex', 'min-lg:flex', 'min-xl:flex', 'min-2xl:flex'],
-      css`
-        @theme default {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @config "./config.js";
-        @tailwind utilities;
-      `,
-      {
-        loadModule: async () => ({
-          module: {
-            theme: {
-              screens: {
-                mini: '40rem',
-                midi: '48rem',
-                maxi: '64rem',
-              },
-            },
-          },
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toEqual('')
-})
diff --git a/packages/tailwindcss/src/compat/screens-config.ts b/packages/tailwindcss/src/compat/screens-config.ts
deleted file mode 100644
index 8d5c65136..000000000
--- a/packages/tailwindcss/src/compat/screens-config.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { atRule } from '../ast'
-import type { DesignSystem } from '../design-system'
-import type { ResolvedConfig } from './config/types'
-
-export function registerScreensConfig(userConfig: ResolvedConfig, designSystem: DesignSystem) {
-  let screens = userConfig.theme.screens || {}
-
-  // We want to insert the breakpoints in the right order as best we can. In the
-  // core utility, all static breakpoint variants and the `min-*` functional
-  // variant are registered inside a group. Since all the variants within a
-  // group share the same order, we can use the always-defined `min-*` variant
-  // as the order.
-  let coreOrder = designSystem.variants.get('min')?.order ?? 0
-
-  let additionalVariants: ((order: number) => void)[] = []
-
-  // Register static breakpoint variants for everything that comes from the user
-  // theme config.
-  for (let [name, value] of Object.entries(screens)) {
-    let coreVariant = designSystem.variants.get(name)
-
-    // Ignore it if there's a CSS value that takes precedence over the JS config
-    // and the static utilities are already registered.
-    //
-    // This happens when a `@theme { }` block is used that overwrites all JS
-    // config options. We rely on the resolution order of the Theme for
-    // resolving this. If Theme has a different value, we know that this is not
-    // coming from the JS plugin and thus we don't need to handle it explicitly.
-    let cssValue = designSystem.theme.resolveValue(name, ['--breakpoint'])
-    if (coreVariant && cssValue && !designSystem.theme.hasDefault(`--breakpoint-${name}`)) {
-      continue
-    }
-
-    let deferInsert = true
-
-    if (typeof value === 'string') {
-      deferInsert = false
-    }
-
-    let query = buildMediaQuery(value)
-
-    function insert(order: number) {
-      // `min-*` and `max-*` rules do not need to be reconfigured, as they are
-      // reading the latest values from the theme.
-      designSystem.variants.static(
-        name,
-        (ruleNode) => {
-          ruleNode.nodes = [atRule('@media', query, ruleNode.nodes)]
-        },
-        { order },
-      )
-    }
-
-    if (deferInsert) {
-      additionalVariants.push(insert)
-    } else {
-      insert(coreOrder)
-    }
-  }
-
-  // Reserve and insert slots for the additional variants
-  if (additionalVariants.length === 0) return
-
-  for (let [, variant] of designSystem.variants.variants) {
-    if (variant.order > coreOrder) variant.order += additionalVariants.length
-  }
-
-  designSystem.variants.compareFns = new Map(
-    Array.from(designSystem.variants.compareFns).map(([key, value]) => {
-      if (key > coreOrder) key += additionalVariants.length
-      return [key, value]
-    }),
-  )
-
-  for (let [index, callback] of additionalVariants.entries()) {
-    callback(coreOrder + index + 1)
-  }
-}
-
-export function buildMediaQuery(values: unknown) {
-  type ScreenDescriptor = {
-    min?: string
-    max?: string
-    raw?: string
-  }
-
-  let list: unknown[] = Array.isArray(values) ? values : [values]
-  return list
-    .map((value): ScreenDescriptor | null => {
-      if (typeof value === 'string') {
-        return { min: value }
-      }
-
-      if (value && typeof value === 'object') {
-        return value
-      }
-
-      return null
-    })
-    .map((screen) => {
-      if (screen === null) return null
-
-      if ('raw' in screen) {
-        return screen.raw
-      }
-
-      let query = ''
-
-      if (screen.max !== undefined) {
-        query += `${screen.max} >= `
-      }
-
-      query += 'width'
-
-      if (screen.min !== undefined) {
-        query += ` >= ${screen.min}`
-      }
-
-      return `(${query})`
-    })
-    .filter(Boolean)
-    .join(', ')
-}
diff --git a/packages/tailwindcss/src/compat/theme-variants.ts b/packages/tailwindcss/src/compat/theme-variants.ts
deleted file mode 100644
index 76fafade3..000000000
--- a/packages/tailwindcss/src/compat/theme-variants.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { DesignSystem } from '../design-system'
-import type { ResolvedConfig } from './config/types'
-
-export function registerThemeVariantOverrides(config: ResolvedConfig, designSystem: DesignSystem) {
-  let ariaVariants = config.theme.aria || {}
-  let supportsVariants = config.theme.supports || {}
-  let dataVariants = config.theme.data || {}
-
-  if (Object.keys(ariaVariants).length > 0) {
-    let coreAria = designSystem.variants.get('aria')
-    let applyFn = coreAria?.applyFn
-    let compounds = coreAria?.compounds
-    designSystem.variants.functional(
-      'aria',
-      (ruleNode, variant) => {
-        let value = variant.value
-        if (value && value.kind === 'named' && value.value in ariaVariants) {
-          return applyFn?.(ruleNode, {
-            ...variant,
-            value: { kind: 'arbitrary', value: ariaVariants[value.value] as string },
-          })
-        }
-        return applyFn?.(ruleNode, variant)
-      },
-      { compounds },
-    )
-  }
-
-  if (Object.keys(supportsVariants).length > 0) {
-    let coreSupports = designSystem.variants.get('supports')
-    let applyFn = coreSupports?.applyFn
-    let compounds = coreSupports?.compounds
-    designSystem.variants.functional(
-      'supports',
-      (ruleNode, variant) => {
-        let value = variant.value
-        if (value && value.kind === 'named' && value.value in supportsVariants) {
-          return applyFn?.(ruleNode, {
-            ...variant,
-            value: { kind: 'arbitrary', value: supportsVariants[value.value] as string },
-          })
-        }
-        return applyFn?.(ruleNode, variant)
-      },
-      { compounds },
-    )
-  }
-
-  if (Object.keys(dataVariants).length > 0) {
-    let coreData = designSystem.variants.get('data')
-    let applyFn = coreData?.applyFn
-    let compounds = coreData?.compounds
-    designSystem.variants.functional(
-      'data',
-      (ruleNode, variant) => {
-        let value = variant.value
-        if (value && value.kind === 'named' && value.value in dataVariants) {
-          return applyFn?.(ruleNode, {
-            ...variant,
-            value: { kind: 'arbitrary', value: dataVariants[value.value] as string },
-          })
-        }
-        return applyFn?.(ruleNode, variant)
-      },
-      { compounds },
-    )
-  }
-}
diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts
index 46f562918..ebbe2a74c 100644
--- a/packages/tailwindcss/src/compile.ts
+++ b/packages/tailwindcss/src/compile.ts
@@ -1,87 +1,65 @@
-import { atRule, context, decl, rule, type AstNode, type Rule, type StyleRule } from './ast'
+import { rule, type AstNode, type Rule } from './ast'
 import { type Candidate, type Variant } from './candidate'
-import { CompileAstFlags, type DesignSystem } from './design-system'
+import { type DesignSystem } from './design-system'
 import GLOBAL_PROPERTY_ORDER from './property-order'
-import { asColor, type Utility } from './utilities'
-import { compare } from './utils/compare'
 import { escape } from './utils/escape'
 import type { Variants } from './variants'
-import { walk, WalkAction } from './walk'
 
 export function compileCandidates(
   rawCandidates: Iterable<string>,
   designSystem: DesignSystem,
-  {
-    onInvalidCandidate,
-    respectImportant,
-  }: { onInvalidCandidate?: (candidate: string) => void; respectImportant?: boolean } = {},
+  { onInvalidCandidate }: { onInvalidCandidate?: (candidate: string) => void } = {},
 ) {
   let nodeSorting = new Map<
     AstNode,
-    { properties: { order: number[]; count: number }; variants: bigint; candidate: string }
+    { properties: number[]; variants: bigint; candidate: string }
   >()
   let astNodes: AstNode[] = []
-  let matches = new Map<string, Candidate[]>()
+  let candidates = new Map<Candidate, string>()
 
   // Parse candidates and variants
   for (let rawCandidate of rawCandidates) {
-    if (designSystem.invalidCandidates.has(rawCandidate)) {
+    let candidate = designSystem.parseCandidate(rawCandidate)
+    if (candidate === null) {
       onInvalidCandidate?.(rawCandidate)
       continue // Bail, invalid candidate
     }
-
-    let candidates = designSystem.parseCandidate(rawCandidate)
-    if (candidates.length === 0) {
-      onInvalidCandidate?.(rawCandidate)
-      continue // Bail, invalid candidate
-    }
-
-    matches.set(rawCandidate, candidates)
+    candidates.set(candidate, rawCandidate)
   }
 
-  let flags = CompileAstFlags.None
-
-  if (respectImportant ?? true) {
-    flags |= CompileAstFlags.RespectImportant
-  }
-
-  let variantOrderMap = designSystem.getVariantOrder()
+  // Sort the variants
+  let variants = designSystem.getUsedVariants().sort((a, z) => {
+    return designSystem.variants.compare(a, z)
+  })
 
   // Create the AST
-  for (let [rawCandidate, candidates] of matches) {
-    let found = false
-
-    for (let candidate of candidates) {
-      let rules = designSystem.compileAstNodes(candidate, flags)
-      if (rules.length === 0) continue
-
-      found = true
-
-      for (let { node, propertySort } of rules) {
-        // Track the variant order which is a number with each bit representing a
-        // variant. This allows us to sort the rules based on the order of
-        // variants used.
-        let variantOrder = 0n
-        for (let variant of candidate.variants) {
-          variantOrder |= 1n << BigInt(variantOrderMap.get(variant)!)
-        }
-
-        nodeSorting.set(node, {
-          properties: propertySort,
-          variants: variantOrder,
-          candidate: rawCandidate,
-        })
-        astNodes.push(node)
-      }
-    }
-
-    if (!found) {
+  next: for (let [candidate, rawCandidate] of candidates) {
+    let astNode = designSystem.compileAstNodes(rawCandidate)
+    if (astNode === null) {
       onInvalidCandidate?.(rawCandidate)
+      continue next
     }
+
+    let { node, propertySort } = astNode
+
+    // Track the variant order which is a number with each bit representing a
+    // variant. This allows us to sort the rules based on the order of
+    // variants used.
+    let variantOrder = 0n
+    for (let variant of candidate.variants) {
+      variantOrder |= 1n << BigInt(variants.indexOf(variant))
+    }
+
+    nodeSorting.set(node, {
+      properties: propertySort,
+      variants: variantOrder,
+      candidate: rawCandidate,
+    })
+    astNodes.push(node)
   }
 
   astNodes.sort((a, z) => {
-    // SAFETY: At this point it is safe to use TypeScript's non-null assertion
+    // Safety: At this point it is safe to use TypeScript's non-null assertion
     // operator because if the ast nodes didn't exist, we introduced a bug
     // above, but there is no need to re-check just to be sure. If this relied
     // on pure user input, then we would need to check for its existence.
@@ -96,21 +74,20 @@ export function compileCandidates(
     // Find the first property that is different between the two rules
     let offset = 0
     while (
-      offset < aSorting.properties.order.length &&
-      offset < zSorting.properties.order.length &&
-      aSorting.properties.order[offset] === zSorting.properties.order[offset]
+      aSorting.properties.length < offset &&
+      zSorting.properties.length < offset &&
+      aSorting.properties[offset] === zSorting.properties[offset]
     ) {
       offset += 1
     }
 
     return (
       // Sort by lowest property index first
-      (aSorting.properties.order[offset] ?? Infinity) -
-        (zSorting.properties.order[offset] ?? Infinity) ||
+      (aSorting.properties[offset] ?? Infinity) - (zSorting.properties[offset] ?? Infinity) ||
       // Sort by most properties first, then by least properties
-      zSorting.properties.count - aSorting.properties.count ||
+      zSorting.properties.length - aSorting.properties.length ||
       // Sort alphabetically
-      compare(aSorting.candidate, zSorting.candidate)
+      (aSorting.candidate < zSorting.candidate ? -1 : 1)
     )
   })
 
@@ -120,123 +97,82 @@ export function compileCandidates(
   }
 }
 
-export function compileAstNodes(
-  candidate: Candidate,
-  designSystem: DesignSystem,
-  flags: CompileAstFlags,
-) {
-  let asts = compileBaseUtility(candidate, designSystem)
-  if (asts.length === 0) return []
+export function compileAstNodes(rawCandidate: string, designSystem: DesignSystem) {
+  let candidate = designSystem.parseCandidate(rawCandidate)
+  if (candidate === null) return null
 
-  let respectImportant = designSystem.important && Boolean(flags & CompileAstFlags.RespectImportant)
+  let nodes: AstNode[] = []
 
-  let rules: {
-    node: AstNode
-    propertySort: {
-      order: number[]
-      count: number
-    }
-  }[] = []
+  // Handle arbitrary properties
+  if (candidate.kind === 'arbitrary') {
+    let compileFn = designSystem.utilities.getArbitrary()
 
-  let selector = `.${escape(candidate.raw)}`
+    // Build the node
+    let compiledNodes = compileFn(candidate)
+    if (compiledNodes === undefined) return null
 
-  for (let nodes of asts) {
-    let propertySort = getPropertySort(nodes)
-
-    // If the candidate itself is important then we want to always mark
-    // the utility as important. However, at a design system level we want
-    // to be able to opt-out when using things like `@apply`
-    if (candidate.important || respectImportant) {
-      applyImportant(nodes)
-    }
-
-    let node: StyleRule = {
-      kind: 'rule',
-      selector,
-      nodes,
-    }
-
-    for (let variant of candidate.variants) {
-      let result = applyVariant(node, variant, designSystem.variants)
-
-      // When the variant results in `null`, it means that the variant cannot be
-      // applied to the rule. Discard the candidate and continue to the next
-      // one.
-      if (result === null) return []
-    }
-
-    rules.push({
-      node,
-      propertySort,
-    })
+    nodes = compiledNodes
   }
 
-  return rules
+  // Handle named utilities
+  else if (candidate.kind === 'static' || candidate.kind === 'functional') {
+    // Safety: At this point it is safe to use TypeScript's non-null assertion
+    // operator because if the `candidate.root` didn't exist, `parseCandidate`
+    // would have returned `null` and we would have returned early resulting
+    // in not hitting this code path.
+    let { compileFn } = designSystem.utilities.get(candidate.root)!
+
+    // Build the node
+    let compiledNodes = compileFn(candidate)
+    if (compiledNodes === undefined) return null
+
+    nodes = compiledNodes
+  }
+
+  let propertySort = getPropertySort(nodes)
+
+  if (candidate.important) {
+    applyImportant(nodes)
+  }
+
+  let node: Rule = {
+    kind: 'rule',
+    selector: `.${escape(rawCandidate)}`,
+    nodes,
+  }
+
+  for (let variant of candidate.variants) {
+    let result = applyVariant(node, variant, designSystem.variants)
+
+    // When the variant results in `null`, it means that the variant cannot be
+    // applied to the rule. Discard the candidate and continue to the next
+    // one.
+    if (result === null) return null
+  }
+
+  return {
+    node,
+    propertySort,
+  }
 }
 
-export function applyVariant(
-  node: Rule,
-  variant: Variant,
-  variants: Variants,
-  depth: number = 0,
-): null | void {
+export function applyVariant(node: Rule, variant: Variant, variants: Variants): null | void {
   if (variant.kind === 'arbitrary') {
-    // Relative selectors are not valid as an entire arbitrary variant, only as
-    // an arbitrary variant that is part of another compound variant.
-    //
-    // E.g. `[>img]:flex` is not valid, but `has-[>img]:flex` is
-    if (variant.relative && depth === 0) return null
-
-    let child: AstNode = rule(variant.selector, node.nodes)
-
-    // Wrap variant-generated `@scope` rules in a `context` marker, so they are
-    // hoisted with the variant semantics instead of their native CSS nesting
-    // semantics. The slotted content is marked as `user` content, so `@scope`
-    // rules defined there keep their native CSS nesting semantics.
-    if (child.kind === 'at-rule' && child.name === '@scope') {
-      child.nodes = [context({ source: 'user' }, node.nodes)]
-      child = context({ source: 'variant' }, [child])
-    }
-
-    node.nodes = [child]
+    node.nodes = [rule(variant.selector, node.nodes)]
     return
   }
 
-  // SAFETY: At this point it is safe to use TypeScript's non-null assertion
+  // Safety: At this point it is safe to use TypeScript's non-null assertion
   // operator because if the `candidate.root` didn't exist, `parseCandidate`
   // would have returned `null` and we would have returned early resulting in
   // not hitting this code path.
   let { applyFn } = variants.get(variant.root)!
 
   if (variant.kind === 'compound') {
-    // Some variants traverse the AST to mutate the nodes. E.g.: `group-*` wants
-    // to prefix every selector of the variant it's compounding with `.group`.
-    //
-    // E.g.:
-    // ```
-    // group-hover:[&_p]:flex
-    // ```
-    //
-    // Should only prefix the `group-hover` part with `.group`, and not the `&_p` part.
-    //
-    // To solve this, we provide an isolated placeholder node to the variant.
-    // The variant can now apply its logic to the isolated node without
-    // affecting the original node.
-    let isolatedNode = atRule('@slot')
-
-    let result = applyVariant(isolatedNode, variant.variant, variants, depth + 1)
+    let result = applyVariant(node, variant.variant, variants)
     if (result === null) return null
 
-    if (variant.root === 'not' && isolatedNode.nodes.length > 1) {
-      // The `not` variant cannot negate sibling rules / at-rules because these
-      // are an OR relationship. Doing so would require transforming sibling
-      // nodes into nesting while negating them. This isn't possible with the
-      // current implementation of the `not` variant or with how variants are
-      // applied in general (on a per-node basis).
-      return null
-    }
-
-    for (let child of isolatedNode.nodes) {
+    for (let child of node.nodes) {
       // Only some variants wrap children in rules. For example, the `force`
       // variant is a noop on the AST. And the `has` variant modifies the
       // selector rather than the children.
@@ -244,22 +180,11 @@ export function applyVariant(
       // This means `child` may be a declaration and we don't want to apply the
       // variant to it. This also means the entire variant as a whole is not
       // applicable to the rule and should generate nothing.
-      if (child.kind !== 'rule' && child.kind !== 'at-rule') return null
+      if (child.kind !== 'rule') return null
 
-      let result = applyFn(child, variant)
+      let result = applyFn(child as Rule, variant)
       if (result === null) return null
     }
-
-    // Replace the placeholder node with the actual node
-    {
-      walk(isolatedNode.nodes, (child) => {
-        if ((child.kind === 'rule' || child.kind === 'at-rule') && child.nodes.length <= 0) {
-          child.nodes = node.nodes
-          return WalkAction.Skip
-        }
-      })
-      node.nodes = isolatedNode.nodes
-    }
     return
   }
 
@@ -268,90 +193,17 @@ export function applyVariant(
   if (result === null) return null
 }
 
-function isFallbackUtility(utility: Utility) {
-  let types = utility.options?.types ?? []
-  return types.length > 1 && types.includes('any')
-}
-
-function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) {
-  if (candidate.kind === 'arbitrary') {
-    let value: string | null = candidate.value
-
-    // Assumption: If an arbitrary property has a modifier, then we assume it
-    // is an opacity modifier.
-    if (candidate.modifier) {
-      value = asColor(value, candidate.modifier, designSystem.theme)
-    }
-
-    if (value === null) return []
-
-    return [[decl(candidate.property, value)]]
-  }
-
-  let utilities = designSystem.utilities.get(candidate.root) ?? []
-
-  let asts: AstNode[][] = []
-
-  let normalUtilities = utilities.filter((u) => !isFallbackUtility(u))
-  for (let utility of normalUtilities) {
-    if (utility.kind !== candidate.kind) continue
-
-    let compiledNodes = utility.compileFn(candidate)
-    if (compiledNodes === undefined) continue
-    if (compiledNodes === null) {
-      // `null` means that the result is invalid and that this plugin should not
-      // result in any CSS, but that doesn't mean that subsequent plugins are
-      // invalid as well.
-      //
-      // However, for backwards compatibility with `matchUtilities` this means
-      // that we do need to bail entirely: plugins that handle a specific
-      // arbitrary value type prevent falling through to other plugins if the
-      // result is invalid for that plugin
-      if (utility.options?.types?.length) return asts
-
-      continue
-    }
-    asts.push(compiledNodes)
-  }
-
-  if (asts.length > 0) return asts
-
-  let fallbackUtilities = utilities.filter((u) => isFallbackUtility(u))
-  for (let utility of fallbackUtilities) {
-    if (utility.kind !== candidate.kind) continue
-
-    let compiledNodes = utility.compileFn(candidate)
-    if (compiledNodes === undefined) continue
-    if (compiledNodes === null) {
-      // `null` means that the result is invalid and that this plugin should not
-      // result in any CSS, but that doesn't mean that subsequent plugins are
-      // invalid as well.
-      //
-      // However, for backwards compatibility with `matchUtilities` this means
-      // that we do need to bail entirely: plugins that handle a specific
-      // arbitrary value type prevent falling through to other plugins if the
-      // result is invalid for that plugin
-      if (utility.options?.types?.length) return asts
-
-      continue
-    }
-    asts.push(compiledNodes)
-  }
-
-  return asts
-}
-
 function applyImportant(ast: AstNode[]): void {
   for (let node of ast) {
-    // Skip any `AtRoot` nodes — we don't want to make the contents of things
+    // Skip any `@at-root` rules — we don't want to make the contents of things
     // like `@keyframes` or `@property` important.
-    if (node.kind === 'at-root') {
+    if (node.kind === 'rule' && node.selector === '@at-root') {
       continue
     }
 
     if (node.kind === 'declaration') {
       node.important = true
-    } else if (node.kind === 'rule' || node.kind === 'at-rule') {
+    } else if (node.kind === 'rule') {
       applyImportant(node.nodes)
     }
   }
@@ -359,44 +211,34 @@ function applyImportant(ast: AstNode[]): void {
 
 function getPropertySort(nodes: AstNode[]) {
   // Determine sort order based on properties used
-  let order = new Set<number>()
-  let count = 0
+  let propertySort = new Set<number>()
   let q: AstNode[] = nodes.slice()
 
-  let seenTwSort = false
-
   while (q.length > 0) {
-    // SAFETY: At this point it is safe to use TypeScript's non-null assertion
+    // Safety: At this point it is safe to use TypeScript's non-null assertion
     // operator because we guarded against `q.length > 0` above.
     let node = q.shift()!
     if (node.kind === 'declaration') {
-      // Empty strings should still be counted, e.g.: `--tw-foo:;` is valid
-      if (node.value === undefined) continue
-
-      count++
-
-      if (seenTwSort) continue
-
       if (node.property === '--tw-sort') {
-        let idx = GLOBAL_PROPERTY_ORDER.indexOf(node.value ?? '')
+        let idx = GLOBAL_PROPERTY_ORDER.indexOf(node.value)
         if (idx !== -1) {
-          order.add(idx)
-          seenTwSort = true
-          continue
+          propertySort.add(idx)
+          break
         }
       }
 
       let idx = GLOBAL_PROPERTY_ORDER.indexOf(node.property)
-      if (idx !== -1) order.add(idx)
-    } else if (node.kind === 'rule' || node.kind === 'at-rule') {
+      if (idx !== -1) propertySort.add(idx)
+    } else if (node.kind === 'rule') {
+      // Don't consider properties within `@at-root` when determining the sort
+      // order for a rule.
+      if (node.selector === '@at-root') continue
+
       for (let child of node.nodes) {
         q.push(child)
       }
     }
   }
 
-  return {
-    order: Array.from(order).sort((a, z) => a - z),
-    count,
-  }
+  return Array.from(propertySort).sort((a, z) => a - z)
 }
diff --git a/packages/tailwindcss/src/constant-fold-declaration.test.ts b/packages/tailwindcss/src/constant-fold-declaration.test.ts
deleted file mode 100644
index 5a0c867b6..000000000
--- a/packages/tailwindcss/src/constant-fold-declaration.test.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { expect, it } from 'vitest'
-import { constantFoldDeclaration } from './constant-fold-declaration'
-
-it.each([
-  // Simple expression
-  ['calc(1 + 1)', '2'],
-  ['calc(3 - 2)', '1'],
-  ['calc(2 * 3)', '6'],
-  ['calc(8 / 2)', '4'],
-
-  // Nested
-  ['calc(1 + calc(1 + 1))', '3'],
-  ['calc(3 - calc(1 + 2))', '0'],
-  ['calc(2 * calc(1 + 3))', '8'],
-  ['calc(8 / calc(2 + 2))', '2'],
-  ['calc(1 + (1 + 1))', '3'],
-  ['calc(3 - (1 + 2))', '0'],
-  ['calc(2 * (1 + 3))', '8'],
-  ['calc(8 / (2 + 2))', '2'],
-
-  // With units
-  ['calc(1rem * 2)', '2rem'],
-  ['calc(2rem - 0.5rem)', '1.5rem'],
-  ['calc(3rem * 6)', '18rem'],
-  ['calc(5rem / 2)', '2.5rem'],
-
-  // Negating with units
-  ['calc(2rem * -1)', '-2rem'],
-  ['calc(-1 * 2rem)', '-2rem'],
-
-  // Nested partial evaluation
-  ['calc(calc(1 + 2) + 2rem)', 'calc(3 + 2rem)'],
-
-  // Nested multiplication with unknown values
-  ['calc(2 * calc(3 * var(--foo)))', 'calc(6 * var(--foo))'],
-  ['calc(calc(3 * var(--foo)) * 2)', 'calc(6 * var(--foo))'],
-  ['calc(2rem * calc(3 * var(--foo)))', 'calc(6rem * var(--foo))'],
-
-  // Nested addition with unknown values
-  ['calc(1rem + calc(2rem + var(--foo)))', 'calc(3rem + var(--foo))'],
-  ['calc(calc(2rem + var(--foo)) + 1rem)', 'calc(3rem + var(--foo))'],
-
-  // Nested multiplication can collapse away entirely
-  ['calc(-1 * calc(-1 * var(--foo)))', 'var(--foo)'],
-  ['calc(calc(-1 * var(--foo)) * -1)', 'var(--foo)'],
-  ['calc(-1 * calc(var(--foo) * -1))', 'var(--foo)'],
-  ['calc(-1 * (-1 * var(--foo)))', 'var(--foo)'],
-  ['calc(1 * var(--foo))', 'var(--foo)'],
-  ['calc(var(--foo) * 1)', 'var(--foo)'],
-
-  // Evaluation only handles two operands right now, this can change in the future
-  ['calc(1 + 2 + 3)', 'calc(1 + 2 + 3)'],
-])('should constant fold `%s` into `%s`', (input, expected) => {
-  expect(constantFoldDeclaration(input)).toBe(expected)
-})
-
-it.each([
-  ['calc(1rem * 2%)'],
-  ['calc(1rem * 2px)'],
-  ['calc(2rem - 6)'],
-  ['calc(3rem * 3dvw)'],
-  ['calc(3rem * 2dvh)'],
-  ['calc(5rem / 17px)'],
-  ['calc(2rem * calc(3px * var(--foo)))'],
-  ['calc(1rem + 0px + var(--foo))'],
-])('should not constant fold different units `%s`', (input) => {
-  expect(constantFoldDeclaration(input)).toBe(input)
-})
-
-it.each([
-  ['calc(0 * 100vw)'],
-  ['calc(0 * calc(1 * 2))'],
-  ['calc(0 * var(--foo))'],
-  ['calc(0 * calc(var(--spacing) * 32))'],
-
-  ['calc(100vw * 0)'],
-  ['calc(calc(1 * 2) * 0)'],
-  ['calc(var(--foo) * 0)'],
-  ['calc(calc(var(--spacing, 0.25rem) * 32) * 0)'],
-  ['calc(var(--spacing, 0.25rem) * -0)'],
-
-  // Zeroes
-  ['0px'],
-  ['0rem'],
-  ['0em'],
-  ['0dvh'],
-  ['-0'],
-  ['+0'],
-  ['-0.0rem'],
-  ['+0.00rem'],
-
-  // Expressions
-  ['calc(-0px * -1)'],
-  ['calc(-1 * -0px)'],
-])('should constant fold `%s` to `0` (%#)', (input) => {
-  expect(constantFoldDeclaration(input)).toBe('0')
-})
-
-it.each([
-  // Expressions, keep unit when they are nested
-  //
-  // TODO: We might be able to fold this further to just `1rem`, but we can't do
-  // that for any `0<unit>`. E.g.: `calc(0s + 1rem)` which is invalid, would
-  // become valid if we just use `1rem`.
-  ['calc(calc(0px * -1) + 1rem)', 'calc(0px + 1rem)'],
-  ['calc(calc(-1 * 0px) + 1rem)', 'calc(0px + 1rem)'],
-
-  // Non-foldable units
-  ['0deg', '0deg'],
-  ['0rad', '0deg'],
-  ['0%', '0%'],
-  ['0turn', '0deg'],
-  ['0fr', '0fr'],
-  ['0ms', '0s'],
-  ['0s', '0s'],
-  ['-0.0deg', '0deg'],
-  ['-0.0rad', '0deg'],
-  ['-0.0%', '0%'],
-  ['-0.0turn', '0deg'],
-  ['-0.0fr', '0fr'],
-  ['-0.0ms', '0s'],
-  ['-0.0s', '0s'],
-])('should not fold non-foldable units to `0`. Constant fold `%s` into `%s`', (input, expected) => {
-  expect(constantFoldDeclaration(input)).toBe(expected)
-})
-
-it('should not constant fold when dividing by `0`', () => {
-  expect(constantFoldDeclaration('calc(123rem / 0)')).toBe('calc(123rem / 0)')
-})
-
-it('should not constant fold when a computation has a high-precision result', () => {
-  expect(constantFoldDeclaration('calc(100% / 3.5)')).toBe('calc(100% / 3.5)')
-})
-
-it('should constant fold division results with floating-point error after scaling', () => {
-  expect(constantFoldDeclaration('calc(29% / 100)')).toBe('0.29%')
-})
diff --git a/packages/tailwindcss/src/constant-fold-declaration.ts b/packages/tailwindcss/src/constant-fold-declaration.ts
deleted file mode 100644
index c15420150..000000000
--- a/packages/tailwindcss/src/constant-fold-declaration.ts
+++ /dev/null
@@ -1,357 +0,0 @@
-import { dimensions } from './utils/dimensions'
-import { isLength } from './utils/infer-data-type'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction } from './walk'
-
-// Assumption: We already assume that we receive somewhat valid `calc()`
-// expressions. So we will see `calc(1 + 1)` and not `calc(1+1)`
-export function constantFoldDeclaration(
-  input: string,
-  rem: number | null = null,
-  normalizeUnit = true,
-): string {
-  let [folded, valueAst] = constantFoldDeclarationAst(ValueParser.parse(input), rem, normalizeUnit)
-
-  return folded ? ValueParser.toCss(valueAst) : input
-}
-
-export function constantFoldDeclarationAst(
-  ast: ValueParser.ValueAstNode[],
-  rem: number | null = null,
-  normalizeUnit = true,
-): [folded: boolean, ast: ValueParser.ValueAstNode[]] {
-  let folded = false
-
-  walk(ast, {
-    exit(valueNode, ctx) {
-      // Canonicalize dimensions to their simplest form. This includes:
-      // - Convert `-0`, `+0`, `0.0`, … to `0`
-      // - Convert `-0px`, `+0em`, `0.0rem`, … to `0<unit>`
-      // - Convert units to an equivalent unit
-      if (
-        valueNode.kind === 'word' &&
-        valueNode.value !== '0' // Already `0`, nothing to do
-      ) {
-        let canonical = canonicalizeDimension(valueNode.value, rem, normalizeUnit)
-        if (canonical === null) return // Couldn't be canonicalized, nothing to do
-        if (canonical === valueNode.value) return // Already in canonical form, nothing to do
-
-        // We need to be careful with `0` because `0<unit>` can only be
-        // converted to `0` if we're dealing with a `<length>` type.
-        if (canonical === '0') {
-          // When used inside of a function such as `calc(…)`, then this isn't
-          // always safe to convert to `0`.
-          //
-          // E.g.:
-          // - `calc(0px + 1rem)` → `calc(0 + 1rem)` this goes from valid to invalid
-          // - `calc(0px * 1rem)` → `calc(0 * 1rem)` this goes from invalid to valid
-          if (ctx.parent?.kind === 'function') {
-            let withUnit = canonicalizeDimension(valueNode.value, rem, false)
-            if (withUnit === null) return
-
-            folded = true
-            return WalkAction.ReplaceSkip(ValueParser.word(withUnit))
-          }
-        }
-
-        folded = true
-        return WalkAction.ReplaceSkip(ValueParser.word(canonical))
-      }
-
-      // Constant fold `calc()` expressions with two operands and one operator
-      else if (
-        valueNode.kind === 'function' &&
-        (valueNode.value === 'calc' || valueNode.value === '')
-      ) {
-        // [
-        //   { kind: 'word', value: '0.25rem' },            0
-        //   { kind: 'separator', value: ' ' },             1
-        //   { kind: 'word', value: '*' },                  2
-        //   { kind: 'separator', value: ' ' },             3
-        //   { kind: 'word', value: '256' }                 4
-        // ]
-        if (valueNode.nodes.length !== 5) return
-        if (valueNode.nodes[2].kind !== 'word') return
-
-        let lhsNode = valueNode.nodes[0]
-        let operator = valueNode.nodes[2].value
-        let rhsNode = valueNode.nodes[4]
-
-        let lhs = lhsNode.kind === 'word' ? dimensions.get(lhsNode.value) : null
-        let rhs = rhsNode.kind === 'word' ? dimensions.get(rhsNode.value) : null
-
-        // Nullify entire expression when multiplying by `0`, e.g.: `calc(0 * 100vw)` -> `0`
-        //
-        // TODO: Ensure it's safe to do so based on the data types?
-        if (
-          operator === '*' &&
-          ((lhs?.[0] === 0 && lhs?.[1] === null) || // 0 * something
-            (rhs?.[0] === 0 && rhs?.[1] === null)) // something * 0
-        ) {
-          folded = true
-          return WalkAction.ReplaceSkip(ValueParser.word('0'))
-        }
-
-        // Fold `0<unit> * something-without-unit` to just `0<unit>`, inside of a function such as `calc(…)`
-        if (operator === '*' && lhs?.[0] === 0 && lhs?.[1] !== null && rhs?.[1] === null) {
-          folded = true
-          if (ctx.parent?.kind === 'function') {
-            return WalkAction.ReplaceSkip(ValueParser.word(`0${lhs[1]}`))
-          } else {
-            return WalkAction.ReplaceSkip(ValueParser.word('0'))
-          }
-        }
-
-        // Fold `something-without-unit * 0<unit>` to just `0<unit>`, inside of a function such as `calc(…)`
-        if (operator === '*' && rhs?.[0] === 0 && rhs?.[1] !== null && lhs?.[1] === null) {
-          folded = true
-          if (ctx.parent?.kind === 'function') {
-            return WalkAction.ReplaceSkip(ValueParser.word(`0${rhs[1]}`))
-          } else {
-            return WalkAction.ReplaceSkip(ValueParser.word('0'))
-          }
-        }
-
-        if (operator === '*') {
-          // Multiplying by `1` can always unwrap the other side, even when that
-          // side is an expression like `var(--foo)` that we can't fully fold.
-          if (lhs?.[0] === 1 && lhs?.[1] === null) {
-            folded = true
-            return WalkAction.ReplaceSkip(rhsNode)
-          }
-
-          if (rhs?.[0] === 1 && rhs?.[1] === null) {
-            folded = true
-            return WalkAction.ReplaceSkip(lhsNode)
-          }
-        }
-
-        if (operator === '*' || operator === '+') {
-          // If only one side is known, and the unknown side is itself another
-          // binary expression with the same operator, try to combine the two
-          // known parts and keep the unknown part in place.
-          //
-          // E.g.:
-          //
-          // - `calc(2rem * calc(3    * var(--foo)))` → `calc(6rem * var(--foo))`
-          // - `calc(2rem + calc(3rem + var(--foo)))` → `calc(5rem + var(--foo))`
-          //
-          // At this point `lhs` and `rhs` are dimensions ([value, unit] |
-          // null). The `null` one is the unknown node.
-          let constant = lhs ?? rhs
-          let nestedNode = lhs === null ? lhsNode : rhs === null ? rhsNode : null
-
-          if (
-            constant !== null &&
-            nestedNode !== null &&
-            nestedNode.kind === 'function' &&
-            (nestedNode.value === 'calc' || nestedNode.value === '') &&
-            nestedNode.nodes.length === 5 &&
-            nestedNode.nodes[2].kind === 'word' &&
-            nestedNode.nodes[2].value === operator
-          ) {
-            let nestedLhsNode = nestedNode.nodes[0]
-            let nestedRhsNode = nestedNode.nodes[4]
-            let nestedLhs =
-              nestedLhsNode.kind === 'word' ? dimensions.get(nestedLhsNode.value) : null
-            let nestedRhs =
-              nestedRhsNode.kind === 'word' ? dimensions.get(nestedRhsNode.value) : null
-
-            let known = nestedLhs ?? nestedRhs
-            let unknown =
-              nestedLhs === null ? nestedLhsNode : nestedRhs === null ? nestedRhsNode : null
-
-            if (known !== null && unknown !== null) {
-              // `*` requires both values being unitless, or one of them. Both
-              // values having a unit is invalid.
-              //
-              // - `2    * 3`     → valid
-              // - `4rem * 5`     → valid
-              // - `6    * 7rem`  → valid
-              // - `8rem * 9rem`  → invalid
-              if (
-                operator === '*' &&
-                !(
-                  (constant[1] === null && known[1] === null) || // Both can be unitless
-                  (constant[1] === null && known[1] !== null) || // One of them can be unitless, but the other can't
-                  (constant[1] !== null && known[1] === null) // One of them can be unitless, but the other can't
-                )
-              ) {
-                return
-              }
-
-              // `+` requires that both values being unitless, or both values
-              // have a unit. Mixed units are valid, but we won't fold these.
-              //
-              // - `2    + 3`     → valid
-              // - `4rem + 5`     → invalid
-              // - `6    + 7rem`  → invalid
-              // - `8rem + 9rem`  → valid
-              if (
-                operator === '+' &&
-                !(
-                  constant[1] === known[1] // Only same unit is allowed
-                )
-              ) {
-                return
-              }
-
-              // Re-associate nested expressions so we can still fold the known
-              // part of `x op (y op z)` when `z` is unknown.
-              //
-              // Examples:
-              // - `calc(2 * calc(3 * var(--foo)))` -> `calc(6 * var(--foo))`
-              // - `calc(1rem + calc(2rem + var(--foo)))` -> `calc(3rem + var(--foo))`
-              let combined: string
-              switch (operator) {
-                case '*': {
-                  combined = `${constant[0] * known[0]}${constant[1] ?? known[1] ?? ''}`
-                  break
-                }
-                case '+': {
-                  combined = `${constant[0] + known[0]}${constant[1] ?? known[1] ?? ''}`
-                  break
-                }
-
-                default:
-                  return
-              }
-
-              folded = true
-
-              if (operator === '*' && combined === '1') {
-                return WalkAction.ReplaceSkip(unknown)
-              }
-
-              let replacement: ValueParser.ValueFunctionNode = {
-                kind: 'function',
-                value: valueNode.value,
-                nodes: [
-                  ValueParser.word(combined),
-                  valueNode.nodes[1],
-                  valueNode.nodes[2],
-                  valueNode.nodes[3],
-                  unknown,
-                ],
-              }
-
-              return WalkAction.ReplaceSkip(replacement)
-            }
-          }
-        }
-
-        // We're not dealing with dimensions, so we can't fold this
-        if (lhs === null || rhs === null) {
-          return
-        }
-
-        switch (operator) {
-          case '*': {
-            if (
-              lhs[1] === rhs[1] || // Same Units, e.g.: `1rem * 2rem`, `8 * 6`
-              (lhs[1] === null && rhs[1] !== null) || // Unitless * Unit, e.g.: `2 * 1rem`
-              (lhs[1] !== null && rhs[1] === null) // Unit * Unitless, e.g.: `1rem * 2`
-            ) {
-              folded = true
-              return WalkAction.ReplaceSkip(
-                ValueParser.word(`${lhs[0] * rhs[0]}${lhs[1] ?? rhs[1] ?? ''}`),
-              )
-            }
-            break
-          }
-
-          case '+': {
-            if (
-              lhs[1] === rhs[1] // Same unit or unitless, e.g.: `1rem + 2rem`, `8 + 6`
-            ) {
-              folded = true
-              return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] + rhs[0]}${lhs[1] ?? ''}`))
-            }
-            break
-          }
-
-          case '-': {
-            if (
-              lhs[1] === rhs[1] // Same unit or unitless, e.g.: `2rem - 1rem`, `8 - 6`
-            ) {
-              folded = true
-              return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] - rhs[0]}${lhs[1] ?? ''}`))
-            }
-            break
-          }
-
-          case '/': {
-            if (
-              rhs[0] !== 0 && // Don't divide by zero
-              ((lhs[1] === null && rhs[1] === null) || // Unitless / Unitless, e.g.: `8 / 2`
-                (lhs[1] !== null && rhs[1] === null)) // Unit / Unitless, e.g.: `1rem / 2`
-            ) {
-              let computed = lhs[0] / rhs[0]
-
-              // Only fold with .xx precision, anything beyond that might be a bit too much.
-              //
-              // E.g. 100% / 3.5 = 28.571428571428573%, which is correct but not
-              //      as user friendly. Especially when going from
-              //      `w-[calc(100%/3.5)]` → `w-[28.571428571428573%]`
-              if (Math.round(computed * 100) / 100 !== computed) {
-                break
-              }
-
-              folded = true
-              return WalkAction.ReplaceSkip(ValueParser.word(`${computed}${lhs[1] ?? ''}`))
-            }
-            break
-          }
-        }
-      }
-    },
-  })
-
-  return [folded, ast]
-}
-
-function canonicalizeDimension(
-  input: string,
-  rem: number | null = null,
-  normalizeUnit = true,
-): string | null {
-  let dimension = dimensions.get(input)
-  if (dimension === null) return null // This shouldn't happen
-
-  let [value, unit] = dimension
-  if (unit === null) return `${value}` // Already unitless, nothing to do
-
-  // Replace `0<length>` units with just `0`
-  if (value === 0 && isLength(input)) {
-    if (normalizeUnit) return '0'
-    else return `0${unit}` // Keep unit
-  }
-
-  // Only normalize into base units when necessary
-  if (!normalizeUnit) return `${input}`
-
-  // prettier-ignore
-  switch (unit.toLowerCase()) {
-    // <length> to px, https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#lengths
-    case 'in':  return `${value * 96}px`                  // 1in  = 96.000px
-    case 'cm':  return `${value * 96 / 2.54}px`           // 1cm  = 37.795px
-    case 'mm':  return `${value * 96 / 2.54 / 10}px`      // 1mm  =  3.779px
-    case 'q':   return `${value * 96 / 2.54 / 10 / 4}px`  //  1q  =  0.945px
-    case 'pc':  return `${value * 96 / 6}px`              // 1pc  = 16.000px
-    case 'pt':  return `${value * 96 / 72}px`             // 1pt  =  1.333px
-    case 'rem': return rem !== null ? `${value * rem}px` : null    // 1rem = 16.000px (Assuming root font-size is 16px)
-
-    // <angle> to deg, https://developer.mozilla.org/en-US/docs/Web/CSS/angle
-    case 'grad': return `${value * 0.9}deg`               // 1grad =   0.900deg
-    case 'rad':  return `${value * 180 / Math.PI}deg`     //  1rad =  57.296deg
-    case 'turn': return `${value * 360}deg`               // 1turn = 360.000deg
-
-    // <time> to s, https://developer.mozilla.org/en-US/docs/Web/CSS/time
-    case 'ms':   return `${value / 1000}s`                // 1ms = 0.001s
-
-    // <frequency> to hz, https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
-    case 'khz':  return `${value * 1000}hz`               // 1kHz = 1000Hz
-
-    default: return `${value}${unit}` // No canonicalization possible, return as-is
-  }
-}
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
deleted file mode 100644
index 8cab2949f..000000000
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ /dev/null
@@ -1,1573 +0,0 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { describe, expect, test } from 'vitest'
-import { compile } from '.'
-import plugin from './plugin'
-import { compileCss, pretty, run } from './test-utils/run'
-
-const css = String.raw
-
-describe('--alpha(…)', () => {
-  test('--alpha(…)', async () => {
-    expect(
-      await compileCss(css`
-        .foo {
-          margin: --alpha(red / 50%);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo {
-        margin: oklab(62.7955% .224 .125 / .5);
-      }
-      "
-    `)
-  })
-
-  test('--alpha(…) errors when no arguments are used', async () => {
-    await expect(() =>
-      compileCss(css`
-        .foo {
-          margin: --alpha();
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(var(--my-color) / 50%)\`]`,
-    )
-  })
-
-  test('--alpha(…) errors when alpha value is missing', async () => {
-    await expect(() =>
-      compileCss(css`
-        .foo {
-          margin: --alpha(red);
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(red / 50%)\`]`,
-    )
-  })
-
-  test('--alpha(…) errors multiple arguments are used', async () => {
-    await expect(() =>
-      compileCss(css`
-        .foo {
-          margin: --alpha(red / 50%, blue);
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function only accepts one argument, e.g.: \`--alpha(red / 50%)\`]`,
-    )
-  })
-})
-
-describe('--spacing(…)', () => {
-  test('--spacing(…)', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-
-        .foo {
-          margin: --spacing(4);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing: .25rem;
-      }
-
-      .foo {
-        margin: calc(var(--spacing) * 4);
-      }
-      "
-    `)
-  })
-
-  test('--spacing(…) with inline `@theme` value', async () => {
-    expect(
-      await compileCss(css`
-        @theme inline {
-          --spacing: 0.25rem;
-        }
-
-        .foo {
-          margin: --spacing(4);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo {
-        margin: 1rem;
-      }
-      "
-    `)
-  })
-
-  describe('optimizations', () => {
-    // Use custom `compileCss` such that we can use a version without Lightning
-    // CSS. This way we test _our_ optimizations instead of Lightning's
-    // optimizations.
-    async function compileCss(css: string, options: Parameters<typeof compile>[1] = {}) {
-      let { build } = await compile(css, options)
-      return pretty(build([]))
-    }
-
-    test('--spacing(…) optimizes the output when the input is `0`', async () => {
-      expect(
-        await compileCss(css`
-          @theme {
-            --spacing: 0.25rem;
-          }
-
-          .foo {
-            margin: --spacing(0);
-            padding: --spacing(0px);
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .foo {
-          margin: 0px;
-          padding: 0px;
-        }
-        "
-      `)
-    })
-
-    test('--spacing(…) optimizes the output when the input is `0` (with an inlined theme value)', async () => {
-      expect(
-        await compileCss(css`
-          @theme inline {
-            --spacing: 0.25rem;
-          }
-
-          .foo {
-            margin: --spacing(0);
-            padding: --spacing(0px);
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .foo {
-          margin: 0px;
-          padding: 0px;
-        }
-        "
-      `)
-    })
-
-    test('--spacing(…) optimizes the output when the input is `1`', async () => {
-      expect(
-        await compileCss(css`
-          @theme {
-            --spacing: 0.25rem;
-          }
-
-          .foo {
-            margin: --spacing(1);
-            padding: --spacing(1px);
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        :root, :host {
-          --spacing: 0.25rem;
-        }
-        .foo {
-          margin: var(--spacing);
-          padding: var(--spacing);
-        }
-        "
-      `)
-    })
-
-    test('--spacing(…) optimizes the output when the input is `1` (with an inlined theme value)', async () => {
-      expect(
-        await compileCss(css`
-          @theme inline {
-            --spacing: 0.25rem;
-          }
-
-          .foo {
-            margin: --spacing(1);
-            padding: --spacing(1px);
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .foo {
-          margin: 0.25rem;
-          padding: 0.25rem;
-        }
-        "
-      `)
-    })
-  })
-
-  test('--spacing(…) relies on `--spacing` to be defined', async () => {
-    await expect(() =>
-      compileCss(css`
-        .foo {
-          margin: --spacing(4);
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --spacing(…) function requires that the \`--spacing\` theme variable exists, but it was not found.]`,
-    )
-  })
-
-  test('--spacing(…) requires a single value', async () => {
-    await expect(() =>
-      compileCss(css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-
-        .foo {
-          margin: --spacing();
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --spacing(…) function requires an argument, but received none.]`,
-    )
-  })
-
-  test('--spacing(…) does not have multiple arguments', async () => {
-    await expect(() =>
-      compileCss(css`
-        .foo {
-          margin: --spacing(4, 5, 6);
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --spacing(…) function only accepts a single argument, but received 3.]`,
-    )
-  })
-})
-
-describe('--theme(…)', () => {
-  test('--theme(--color-red-500)', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --color-red-500: #f00;
-        }
-        .red {
-          color: --theme(--color-red-500);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: red;
-      }
-
-      .red {
-        color: var(--color-red-500);
-      }
-      "
-    `)
-  })
-
-  test('--theme(--color-red-500 inline)', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --color-red-500: #f00;
-        }
-        .red {
-          color: --theme(--color-red-500 inline);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .red {
-        color: red;
-      }
-      "
-    `)
-  })
-
-  test('--theme(--color-red-500/50)', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --color-red-500: #f00;
-        }
-        .red {
-          color: --theme(--color-red-500/0.5);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: red;
-      }
-
-      .red {
-        color: #ff000080;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .red {
-          color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  test('--theme(--color-red-500/50 inline)', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --color-red-500: #f00;
-        }
-        .red {
-          color: --theme(--color-red-500/50 inline);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .red {
-        color: oklab(62.7955% .224863 .125846);
-      }
-      "
-    `)
-  })
-
-  test('--theme(…) injects the fallback when the value it refers is set to a `--theme(…)` function with the fallback `initial`', async () => {
-    expect(
-      await compileCss(css`
-        @theme prefix(tw) {
-          --default-font-family: --theme(--font-family, initial);
-        }
-        .red {
-          font-family: --theme(--default-font-family, Potato Sans, sans-serif);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .red {
-        font-family: var(--tw-default-font-family, Potato Sans, sans-serif);
-      }
-      "
-    `)
-  })
-
-  test('--theme(…) injects the fallback when the value it refers is set to a `--theme(…)` function with the fallback `initial` in @reference mode', async () => {
-    expect(
-      await compileCss(css`
-        @theme reference prefix(tw) {
-          --default-font-family: --theme(--font-family, initial);
-        }
-        .red {
-          font-family: --theme(--default-font-family, Potato Sans, sans-serif);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .red {
-        font-family: var(--tw-default-font-family, Potato Sans, sans-serif);
-      }
-      "
-    `)
-  })
-
-  test('--theme(…) resolves with the fallback when the value it refers is set to a `--theme(… inline)` function with the fallback `initial`', async () => {
-    expect(
-      await compileCss(css`
-        @theme prefix(tw) {
-          --default-font-family: --theme(--font-family inline, initial);
-        }
-        .red {
-          font-family: --theme(--default-font-family inline, Potato Sans, sans-serif);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .red {
-        font-family: Potato Sans, sans-serif;
-      }
-      "
-    `)
-  })
-
-  test('--theme(…) resolves with the fallback when the value it refers is set to a `--theme(… inline)` function with the fallback `initial` in @reference mode', async () => {
-    expect(
-      await compileCss(css`
-        @theme reference prefix(tw) {
-          --default-font-family: --theme(--font-family inline, initial);
-        }
-        .red {
-          font-family: --theme(--default-font-family inline, Potato Sans, sans-serif);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .red {
-        font-family: Potato Sans, sans-serif;
-      }
-      "
-    `)
-  })
-
-  test('--theme(…) does not inject the fallback if the fallback is `initial`', async () => {
-    expect(
-      await run(
-        ['tw:font-sans'],
-        css`
-          @theme prefix(tw) {
-            --font-sans:
-              ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-              'Segoe UI Symbol', 'Noto Color Emoji';
-            --default-font-family: --theme(--font-sans, initial);
-          }
-          @layer base {
-            html {
-              font-family: --theme(--default-font-family, sans-serif);
-            }
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-                    "Segoe UI Symbol", "Noto Color Emoji";
-        --tw-default-font-family: var(--tw-font-sans);
-      }
-
-      @layer base {
-        html {
-          font-family: var(--tw-default-font-family, sans-serif);
-        }
-      }
-
-      .tw\\:font-sans {
-        font-family: var(--tw-font-sans);
-      }
-      "
-    `)
-  })
-
-  test('--theme(…) forces the value to be retrieved as inline when used inside an at-rule', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-        }
-        @custom-media --md (width >= --theme(--breakpoint-md));
-        @media (--md) {
-          .blue {
-            color: blue;
-          }
-        }
-        @media (width >= --theme(--breakpoint-lg)) {
-          .red {
-            color: red;
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 48rem) {
-        .blue {
-          color: #00f;
-        }
-      }
-
-      @media (min-width: 64rem) {
-        .red {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('--theme(…) can only be used with CSS variables from your @theme', async () => {
-    await expect(() =>
-      compileCss(css`
-        @theme {
-          --color-red-500: #f00;
-        }
-        .red {
-          color: --theme(colors.red.500);
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --theme(…) function can only be used with CSS variables from your theme.]`,
-    )
-
-    await expect(() =>
-      compileCss(css`
-        @theme {
-          --color-red-500: #f00;
-        }
-        .red {
-          color: --theme(--color-green-500);
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: Could not resolve value for theme function: \`theme(--color-green-500)\`. Consider checking if the variable name is correct or provide a fallback value to silence this error.]`,
-    )
-  })
-
-  test('--theme(…) function still works as expected, even when a plugin is imported', async () => {
-    expect(
-      await compileCss(
-        css`
-          @layer base {
-            html,
-            :host {
-              font-family: --theme(--default-font-family, system-ui);
-            }
-          }
-          @layer theme {
-            @theme {
-              --font-sans: sans-serif;
-              --default-font-family: --theme(--font-sans, initial);
-            }
-          }
-          @plugin "my-plugin.js";
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: () => {},
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer base {
-        html, :host {
-          font-family: var(--default-font-family, system-ui);
-        }
-      }
-
-      @layer theme {
-        :root, :host {
-          --font-sans: sans-serif;
-          --default-font-family: var(--font-sans);
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('theme(…)', () => {
-  describe('in declaration values', () => {
-    describe('without fallback values', () => {
-      test('theme(colors.red.500)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors.red.500);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test("theme('colors.red.500')", async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme('colors.red.500');
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test('theme(colors[red]500)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors[red]500);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test('theme(colors[red].500)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors[red].500);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test('theme(colors[red][500])', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors[red][500]);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test('theme(colors[red].[500])', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors[red].[500]);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test('theme(colors.red.500/75%)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors.red.500/75%);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: oklab(62.7955% .224 .125 / .75);
-          }
-          "
-        `)
-      })
-
-      test('theme(colors.red.500 / 75%)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors.red.500 / 75%);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: oklab(62.7955% .224 .125 / .75);
-          }
-          "
-        `)
-      })
-
-      test("theme('colors.red.500 / 75%')", async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme('colors.red.500 / 75%');
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: oklab(62.7955% .224 .125 / .75);
-          }
-          "
-        `)
-      })
-
-      test('theme(colors.red.500/var(--opacity))', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors.red.500/var(--opacity));
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-
-          @supports (color: color-mix(in lab, red, red)) {
-            .red {
-              color: color-mix(in oklab, red var(--opacity), transparent);
-            }
-          }
-          "
-        `)
-      })
-
-      test('theme(colors.red.500/var(--opacity,50%))', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              /* prettier-ignore */
-              color: theme(colors.red.500/var(--opacity,50%));
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-
-          @supports (color: color-mix(in lab, red, red)) {
-            .red {
-              color: color-mix(in oklab, red var(--opacity, 50%), transparent);
-            }
-          }
-          "
-        `)
-      })
-
-      test('theme(spacing.12)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --spacing-12: 3rem;
-            }
-            .space-on-the-left {
-              margin-left: theme(spacing.12);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .space-on-the-left {
-            margin-left: 3rem;
-          }
-          "
-        `)
-      })
-
-      test('theme(spacing[2.5])', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --spacing-2_5: 0.625rem;
-            }
-            .space-on-the-left {
-              margin-left: theme(spacing[2.5]);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .space-on-the-left {
-            margin-left: .625rem;
-          }
-          "
-        `)
-      })
-
-      test('calc(100vh - theme(spacing[2.5]))', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --spacing-2_5: 0.625rem;
-            }
-            .space-on-the-left {
-              margin-left: calc(100vh - theme(spacing[2.5]));
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .space-on-the-left {
-            margin-left: calc(100vh - .625rem);
-          }
-          "
-        `)
-      })
-
-      test('theme(borderRadius.lg)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --radius-lg: 0.5rem;
-            }
-            .radius {
-              border-radius: theme(borderRadius.lg);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .radius {
-            border-radius: .5rem;
-          }
-          "
-        `)
-      })
-
-      describe('for v3 compatibility', () => {
-        test('theme(blur.DEFAULT)', async () => {
-          expect(
-            await compileCss(css`
-              @theme {
-                --blur: 8px;
-              }
-              .default-blur {
-                filter: blur(theme(blur.DEFAULT));
-              }
-            `),
-          ).toMatchInlineSnapshot(`
-            "
-            .default-blur {
-              filter: blur(8px);
-            }
-            "
-          `)
-        })
-
-        test('theme(fontSize.xs[1].lineHeight)', async () => {
-          expect(
-            await compileCss(css`
-              @theme {
-                --text-xs: 1337.75rem;
-                --text-xs--line-height: 1337rem;
-              }
-              .text {
-                font-size: theme(fontSize.xs);
-                line-height: theme(fontSize.xs[1].lineHeight);
-              }
-            `),
-          ).toMatchInlineSnapshot(`
-            "
-            .text {
-              font-size: 1337.75rem;
-              line-height: 1337rem;
-            }
-            "
-          `)
-        })
-
-        test('theme(fontFamily.sans) (css)', async () => {
-          expect(
-            await compileCss(css`
-              @theme default reference {
-                --font-family-sans:
-                  -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans,
-                  Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
-                  Noto Color Emoji;
-              }
-              .fam {
-                font-family: theme(fontFamily.sans);
-              }
-            `),
-          ).toMatchInlineSnapshot(`
-            "
-            .fam {
-              font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-            }
-            "
-          `)
-        })
-
-        test('theme(fontFamily.sans) (config)', async () => {
-          expect(
-            await compileCss(
-              css`
-                @config "./my-config.js";
-                .fam {
-                  font-family: theme(fontFamily.sans);
-                }
-              `,
-              { loadModule: async () => ({ path: '', base: '/root', module: {} }) },
-            ),
-          ).toMatchInlineSnapshot(`
-            "
-            .fam {
-              font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-            }
-            "
-          `)
-        })
-      })
-
-      test('theme(colors.unknown.500)', async () =>
-        await expect(() =>
-          compileCss(css`
-            .red {
-              color: theme(colors.unknown.500);
-            }
-          `),
-        ).rejects.toThrowErrorMatchingInlineSnapshot(
-          `[Error: Could not resolve value for theme function: \`theme(colors.unknown.500)\`. Consider checking if the path is correct or provide a fallback value to silence this error.]`,
-        ))
-    })
-
-    describe('with default values', () => {
-      test('theme(colors.red.unknown / 50%, #f00)', async () => {
-        expect(
-          await compileCss(css`
-            .red {
-              color: theme(colors.red.unknown / 50%, #f00);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test('theme(colors.red.unknown / 75%, theme(colors.red.500 / 25%))', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(colors.red.unknown / 75%, theme(colors.red.500 / 25%));
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: oklab(62.7955% .224 .125 / .25);
-          }
-          "
-        `)
-      })
-
-      test('theme(fontFamily.unknown, Helvetica Neue, Helvetica, sans-serif)', async () => {
-        expect(
-          await compileCss(css`
-            .fam {
-              font-family: theme(fontFamily.unknown, Helvetica Neue, Helvetica, sans-serif);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .fam {
-            font-family: Helvetica Neue, Helvetica, sans-serif;
-          }
-          "
-        `)
-      })
-
-      test('theme(\n\tfontFamily.unknown,\n\tHelvetica Neue,\n\tHelvetica,\n\tsans-serif\n)', async () => {
-        expect(
-          // prettier-ignore
-          await compileCss(css`
-            .fam {
-              font-family: theme(
-                fontFamily.unknown,
-                Helvetica Neue,
-                Helvetica,
-                sans-serif
-              );
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .fam {
-            font-family: Helvetica Neue, Helvetica, sans-serif;
-          }
-          "
-        `)
-      })
-    })
-
-    describe('recursive theme()', () => {
-      test('can references theme inside @theme', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-              --color-foo: theme(colors.red.500);
-            }
-            .red {
-              color: theme(colors.foo);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test('can references theme inside @theme and stacking opacity', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-              --color-foo: theme(colors.red.500 / 50%);
-            }
-            .red {
-              color: theme(colors.foo / 50%);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: oklab(62.7955% .224 .125 / .25);
-          }
-          "
-        `)
-      })
-    })
-
-    describe('with CSS variable syntax', () => {
-      test('theme(--color-red-500)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(--color-red-500);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-
-      test('theme(--color-red-500 / 50%)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(--color-red-500 / 50%);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: oklab(62.7955% .224 .125 / .5);
-          }
-          "
-        `)
-      })
-
-      test('theme("--color-red-500")', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --color-red-500: #f00;
-            }
-            .red {
-              color: theme(--color-red-500);
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .red {
-            color: red;
-          }
-          "
-        `)
-      })
-    })
-
-    describe('resolving --default lookups', () => {
-      test('theme(blur.DEFAULT)', async () => {
-        expect(
-          await compileCss(css`
-            @theme {
-              --blur: 8px;
-            }
-            .blur {
-              filter: blur(theme(blur));
-            }
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .blur {
-            filter: blur(8px);
-          }
-          "
-        `)
-      })
-    })
-
-    describe('with default theme', () => {
-      test.each([
-        [
-          'fontFamily.sans',
-          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-        ],
-        ['maxWidth.xs', '20rem'],
-        ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
-        ['letterSpacing.wide', '.025em'],
-        ['lineHeight.tight', '1.25'],
-        ['backgroundColor.red.500', 'oklch(63.7% .237 25.331)'],
-      ])('theme(%s) → %s', async (value, result) => {
-        let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')
-        let compiled = await compileCss(css`
-          ${defaultTheme}
-          .custom {
-            --custom-value: theme(${value});
-          }
-        `)
-
-        let startOfCustomClass = compiled.indexOf('.custom {\n')
-        let endOfCustomClass = compiled.indexOf('}', startOfCustomClass)
-
-        let customClassRule = compiled
-          .slice(startOfCustomClass + '.custom {\n'.length, endOfCustomClass)
-          .replace('--custom-value:', '')
-          .trim()
-          .slice(0, -1)
-
-        expect(customClassRule).toBe(result)
-      })
-    })
-  })
-
-  describe('in candidates', () => {
-    test('sm:[--color:theme(colors.red[500])]', async () => {
-      expect(
-        await run(
-          ['sm:[--color:theme(colors.red[500])]'],
-          css`
-            @tailwind utilities;
-            @theme {
-              --breakpoint-sm: 40rem;
-              --color-red-500: #f00;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @media (min-width: 40rem) {
-          .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] {
-            --color: red;
-          }
-        }
-        "
-      `)
-    })
-
-    test("values that don't exist don't produce candidates", async () => {
-      let input = css`
-        @tailwind utilities;
-        @theme reference {
-          --radius-sm: 2rem;
-        }
-      `
-
-      // This guarantees that valid candidates still make it through when some are invalid
-      expect(
-        await run(
-          [
-            'rounded-[theme(--radius-sm)]',
-            'rounded-[theme(i.do.not.exist)]',
-            'rounded-[theme(--i-do-not-exist)]',
-          ],
-          input,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        .rounded-\\[theme\\(--radius-sm\\)\\] {
-          border-radius: 2rem;
-        }
-        "
-      `)
-
-      // This guarantees no output for the following candidates
-      expect(
-        await run(['rounded-[theme(i.do.not.exist)]', 'rounded-[theme(--i-do-not-exist)]'], input),
-      ).toEqual('')
-    })
-  })
-
-  describe('in @media queries', () => {
-    test('@media (min-width:theme(breakpoint.md)) and (max-width: theme(--breakpoint-lg))', async () => {
-      expect(
-        await compileCss(css`
-          @theme {
-            --breakpoint-md: 48rem;
-            --breakpoint-lg: 64rem;
-          }
-          /* prettier-ignore */
-          @media (min-width:theme(breakpoint.md)) and (max-width: theme(--breakpoint-lg)) {
-            .red {
-              color: red;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @media (min-width: 48rem) and (max-width: 64rem) {
-          .red {
-            color: red;
-          }
-        }
-        "
-      `)
-    })
-
-    test('@media (width >= theme(breakpoint.md)) and (width<theme(--breakpoint-lg))', async () => {
-      expect(
-        await compileCss(css`
-          @theme {
-            --breakpoint-md: 48rem;
-            --breakpoint-lg: 64rem;
-          }
-          @media (width >= theme(breakpoint.md)) and (width<theme(--breakpoint-lg)) {
-            .red {
-              color: red;
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @media (min-width: 48rem) and (not (min-width: 64rem)) {
-          .red {
-            color: red;
-          }
-        }
-        "
-      `)
-    })
-  })
-
-  test('@custom-media --my-media (min-width: theme(breakpoint.md))', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --breakpoint-md: 48rem;
-        }
-        @custom-media --my-media (min-width: theme(breakpoint.md));
-        @media (--my-media) {
-          .red {
-            color: red;
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 48rem) {
-        .red {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('@container (width > theme(breakpoint.md))', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --breakpoint-md: 48rem;
-        }
-        @container (width > theme(breakpoint.md)) {
-          .red {
-            color: red;
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      @container not (max-width: 48rem) {
-        .red {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('@supports (text-stroke: theme(--font-size-xs))', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --font-size-xs: 0.75rem;
-        }
-        @supports (text-stroke: theme(--font-size-xs)) {
-          .red {
-            color: red;
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      @supports (text-stroke: 0.75rem) {
-        .red {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('in plugins', () => {
-  test('CSS theme functions in plugins are properly evaluated', async () => {
-    expect(
-      await run(
-        ['my-utility'],
-        css`
-          @layer base, utilities;
-          @plugin "my-plugin";
-          @theme reference {
-            --color-red: oklch(62% 0.25 30);
-            --color-orange: oklch(79% 0.17 70);
-            --color-blue: oklch(45% 0.31 264);
-            --color-pink: oklch(87% 0.07 7);
-          }
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          async loadModule() {
-            return {
-              path: '',
-              base: '/root',
-              module: plugin(({ addBase, addUtilities }) => {
-                addBase({
-                  '.my-base-rule': {
-                    color: 'theme(colors.red)',
-                    'outline-color': 'theme(colors.orange / 15%)',
-                    'background-color': 'theme(--color-blue)',
-                    'border-color': 'theme(--color-pink / 10%)',
-                  },
-                })
-
-                addUtilities({
-                  '.my-utility': {
-                    color: 'theme(colors.red)',
-                  },
-                })
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer base {
-        .my-base-rule {
-          color: oklch(62% .25 30);
-          background-color: oklch(45% .31 264);
-          border-color: oklab(87% .069 .008 / .1);
-          outline-color: oklab(79% .058 .159 / .15);
-        }
-      }
-
-      @layer utilities {
-        .my-utility {
-          color: oklch(62% .25 30);
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('in JS config files', () => {
-  test('CSS theme functions in config files are properly evaluated', async () => {
-    expect(
-      await run(
-        ['my-utility'],
-        css`
-          @layer base, utilities;
-          @config "./my-config.js";
-          @theme reference {
-            --color-red: red;
-            --color-orange: orange;
-          }
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: {
-              theme: {
-                extend: {
-                  colors: {
-                    primary: 'theme(colors.red)',
-                    secondary: 'theme(--color-orange)',
-                  },
-                },
-              },
-              plugins: [
-                plugin(({ addBase, addUtilities }) => {
-                  addBase({
-                    '.my-base-rule': {
-                      background: 'theme(colors.primary)',
-                      color: 'theme(colors.secondary)',
-                    },
-                  })
-
-                  addUtilities({
-                    '.my-utility': {
-                      color: 'theme(colors.red)',
-                    },
-                  })
-                }),
-              ],
-            },
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer base {
-        .my-base-rule {
-          color: orange;
-          background: red;
-        }
-      }
-
-      @layer utilities {
-        .my-utility {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-})
-
-test('replaces CSS theme() function with values inside imported stylesheets', async () => {
-  expect(
-    await compileCss(
-      css`
-        @theme {
-          --color-red-500: #f00;
-        }
-        @import './bar.css';
-      `,
-      {
-        async loadStylesheet() {
-          return {
-            path: '',
-            base: '/bar.css',
-            content: css`
-              .red {
-                color: theme(colors.red.500);
-              }
-            `,
-          }
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .red {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('resolves paths ending with a 1', async () => {
-  expect(
-    await compileCss(css`
-      @theme {
-        --spacing-1: 0.25rem;
-      }
-
-      .foo {
-        margin: theme(spacing.1);
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    .foo {
-      margin: .25rem;
-    }
-    "
-  `)
-})
-
-test('upgrades to a full JS compat theme lookup if a value cannot be mapped to a CSS variable', async () => {
-  expect(
-    await compileCss(css`
-      .semi {
-        font-weight: theme(fontWeight.semibold);
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    .semi {
-      font-weight: 600;
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/css-functions.ts b/packages/tailwindcss/src/css-functions.ts
deleted file mode 100644
index 32fba455f..000000000
--- a/packages/tailwindcss/src/css-functions.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import { Features } from '.'
-import { type AstNode } from './ast'
-import type { DesignSystem } from './design-system'
-import { withAlpha } from './utilities'
-import { dimensions } from './utils/dimensions'
-import { segment } from './utils/segment'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction } from './walk'
-
-const CSS_FUNCTIONS: Record<
-  string,
-  (designSystem: DesignSystem, source: AstNode, ...args: string[]) => string
-> = {
-  '--alpha': alpha,
-  '--spacing': spacing,
-  '--theme': theme,
-  theme: legacyTheme,
-}
-
-function alpha(
-  _designSystem: DesignSystem,
-  _source: AstNode,
-  value: string,
-  ...rest: string[]
-): string {
-  let [color, alpha] = segment(value, '/').map((v) => v.trim())
-
-  if (!color || !alpha) {
-    throw new Error(
-      `The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
-    )
-  }
-
-  if (rest.length > 0) {
-    throw new Error(
-      `The --alpha(…) function only accepts one argument, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
-    )
-  }
-
-  return withAlpha(color, alpha)
-}
-
-function spacing(
-  designSystem: DesignSystem,
-  _source: AstNode,
-  value: string,
-  ...rest: string[]
-): string {
-  if (!value) {
-    throw new Error(`The --spacing(…) function requires an argument, but received none.`)
-  }
-
-  if (rest.length > 0) {
-    throw new Error(
-      `The --spacing(…) function only accepts a single argument, but received ${rest.length + 1}.`,
-    )
-  }
-
-  let multiplier = designSystem.theme.resolve(null, ['--spacing'])
-  if (!multiplier) {
-    throw new Error(
-      'The --spacing(…) function requires that the `--spacing` theme variable exists, but it was not found.',
-    )
-  }
-
-  // Optimization:
-  //
-  // - We know that at this point the `--spacing` value must be set.
-  // - We know that `--spacing` must be set to a `<length>` unit, such as `0.25rem`
-  // - We can assume that the `--spacing` value is not set to a `0`-like value.
-  //   Otherwise `p-<anything>` would calculate as `0` which wouldn't make sense.
-  //
-  // - That means that a value of `0` can be replaced by `0px`. It's important
-  //   to keep the unit so the value stays a `<length>`, e.g. when assigned to
-  //   a custom property and later used inside `calc(…)`.
-  // - That means that a value of `1` can be replaced by `multiplier`
-  let valueDimension = dimensions.get(value)
-  if (valueDimension) {
-    if (valueDimension[0] === 0) return '0px'
-    if (valueDimension[0] === 1) return multiplier
-  }
-
-  // No known optimizations available, use full calculation
-  return `calc(${multiplier} * ${value})`
-}
-
-function theme(
-  designSystem: DesignSystem,
-  source: AstNode,
-  path: string,
-  ...fallback: string[]
-): string {
-  if (!path.startsWith('--')) {
-    throw new Error(`The --theme(…) function can only be used with CSS variables from your theme.`)
-  }
-
-  let inline = false
-
-  // Handle `--theme(… inline)` to force inline resolution
-  if (path.endsWith(' inline')) {
-    inline = true
-    path = path.slice(0, -7)
-  }
-
-  // If the `--theme(…)` function is used within an at-rule (e.g. `@media (width >= --theme(…)))`,
-  // we have to always inline the result since CSS does not support CSS variables in these positions
-  if (source.kind === 'at-rule') {
-    inline = true
-  }
-
-  let resolvedValue = designSystem.resolveThemeValue(path, inline)
-
-  if (!resolvedValue) {
-    if (fallback.length > 0) return fallback.join(', ')
-    throw new Error(
-      `Could not resolve value for theme function: \`theme(${path})\`. Consider checking if the variable name is correct or provide a fallback value to silence this error.`,
-    )
-  }
-
-  if (fallback.length === 0) {
-    return resolvedValue
-  }
-
-  let joinedFallback = fallback.join(', ')
-  if (joinedFallback === 'initial') return resolvedValue
-
-  // When the resolved value returns `initial`, resolve with the fallback value
-  if (resolvedValue === 'initial') return joinedFallback
-
-  // Inject the fallback of a `--theme(…)` function into the fallback of a referenced `--theme(…)`
-  // function or `var(…)` declaration. If the referenced function already defines a fallback, we use
-  // a potential fallback value of `initial` in the referenced function to determine if we should
-  // inject the fallback value of the caller. If that's not the case, we keep the fallback as-is
-  // (this is needed for theme variables in reference-mode).
-  if (
-    resolvedValue.startsWith('var(') ||
-    resolvedValue.startsWith('theme(') ||
-    resolvedValue.startsWith('--theme(')
-  ) {
-    let valueAst = ValueParser.parse(resolvedValue)
-    injectFallbackForInitialFallback(valueAst, joinedFallback)
-    return ValueParser.toCss(valueAst)
-  }
-
-  return resolvedValue
-}
-
-function legacyTheme(
-  designSystem: DesignSystem,
-  _source: AstNode,
-  path: string,
-  ...fallback: string[]
-): string {
-  path = eventuallyUnquote(path)
-
-  let resolvedValue = designSystem.resolveThemeValue(path)
-
-  if (!resolvedValue && fallback.length > 0) {
-    return fallback.join(', ')
-  }
-
-  if (!resolvedValue) {
-    throw new Error(
-      `Could not resolve value for theme function: \`theme(${path})\`. Consider checking if the path is correct or provide a fallback value to silence this error.`,
-    )
-  }
-
-  return resolvedValue
-}
-
-export const THEME_FUNCTION_INVOCATION = new RegExp(
-  Object.keys(CSS_FUNCTIONS)
-    .map((x) => `${x}\\(`)
-    .join('|'),
-)
-
-export function substituteFunctions(ast: AstNode[], designSystem: DesignSystem) {
-  let features = Features.None
-  walk(ast, (node) => {
-    // Find all declaration values
-    if (node.kind === 'declaration' && node.value && THEME_FUNCTION_INVOCATION.test(node.value)) {
-      features |= Features.ThemeFunction
-      node.value = substituteFunctionsInValue(node.value, node, designSystem)
-      return
-    }
-
-    // Find at-rules rules
-    if (node.kind === 'at-rule') {
-      if (
-        (node.name === '@media' ||
-          node.name === '@custom-media' ||
-          node.name === '@container' ||
-          node.name === '@supports') &&
-        THEME_FUNCTION_INVOCATION.test(node.params)
-      ) {
-        features |= Features.ThemeFunction
-        node.params = substituteFunctionsInValue(node.params, node, designSystem)
-      }
-    }
-  })
-  return features
-}
-
-export function substituteFunctionsInValue(
-  value: string,
-  source: AstNode,
-  designSystem: DesignSystem,
-): string {
-  let ast = ValueParser.parse(value)
-  walk(ast, (node) => {
-    if (node.kind === 'function' && node.value in CSS_FUNCTIONS) {
-      let args = segment(ValueParser.toCss(node.nodes).trim(), ',').map((x) => x.trim())
-      let result = CSS_FUNCTIONS[node.value as keyof typeof CSS_FUNCTIONS](
-        designSystem,
-        source,
-        ...args,
-      )
-      return WalkAction.Replace(ValueParser.parse(result))
-    }
-  })
-
-  return ValueParser.toCss(ast)
-}
-
-function eventuallyUnquote(value: string) {
-  if (value[0] !== "'" && value[0] !== '"') return value
-
-  let unquoted = ''
-  let quoteChar = value[0]
-  for (let i = 1; i < value.length - 1; i++) {
-    let currentChar = value[i]
-    let nextChar = value[i + 1]
-
-    if (currentChar === '\\' && (nextChar === quoteChar || nextChar === '\\')) {
-      unquoted += nextChar
-      i++
-    } else {
-      unquoted += currentChar
-    }
-  }
-
-  return unquoted
-}
-
-function injectFallbackForInitialFallback(ast: ValueParser.ValueAstNode[], fallback: string): void {
-  walk(ast, (node) => {
-    if (node.kind !== 'function') return
-    if (node.value !== 'var' && node.value !== 'theme' && node.value !== '--theme') return
-
-    if (node.nodes.length === 1) {
-      node.nodes.push({
-        kind: 'word',
-        value: `, ${fallback}`,
-      })
-    } else {
-      let lastNode = node.nodes[node.nodes.length - 1]
-      if (lastNode.kind === 'word' && lastNode.value === 'initial') {
-        lastNode.value = fallback
-      }
-    }
-  })
-}
diff --git a/packages/tailwindcss/src/css-parser.bench.ts b/packages/tailwindcss/src/css-parser.bench.ts
deleted file mode 100644
index d48f88ab3..000000000
--- a/packages/tailwindcss/src/css-parser.bench.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { readFileSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
-
-import { bench } from 'vitest'
-import * as CSS from './css-parser.ts'
-
-const currentFolder = fileURLToPath(new URL('..', import.meta.url))
-const cssFile = readFileSync(currentFolder + './preflight.css', 'utf-8')
-
-bench('css-parser on preflight.css', () => {
-  CSS.parse(cssFile)
-})
-
-bench('CSS with sourcemaps', () => {
-  CSS.parse(cssFile, { from: 'input.css' })
-})
diff --git a/packages/tailwindcss/src/css-parser.test.ts b/packages/tailwindcss/src/css-parser.test.ts
index 0dcbc0a41..d7aa41b26 100644
--- a/packages/tailwindcss/src/css-parser.test.ts
+++ b/packages/tailwindcss/src/css-parser.test.ts
@@ -8,12 +8,6 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
     return CSS.parse(string.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'))
   }
 
-  function parseWithLoc(string: string) {
-    return CSS.parse(string.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'), {
-      from: 'input.css',
-    })
-  }
-
   describe('comments', () => {
     it('should parse a comment and ignore it', () => {
       expect(
@@ -31,23 +25,6 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
       ).toEqual([])
     })
 
-    it('should end a comment at `*/` even when it is preceded by a `\\`', () => {
-      expect(
-        parse(css`
-          /* C:\temp\*/
-          .foo {
-            color: red;
-          }
-        `),
-      ).toEqual([
-        {
-          kind: 'rule',
-          selector: '.foo',
-          nodes: [{ kind: 'declaration', property: 'color', value: 'red', important: false }],
-        },
-      ])
-    })
-
     it('should parse a comment inside of a selector and ignore it', () => {
       expect(
         parse(css`
@@ -109,7 +86,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
           kind: 'comment',
           value: `!
             * License #2
-            `.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'),
+            `,
         },
       ])
     })
@@ -220,7 +197,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
       ])
     })
 
-    it('should parse declarations with strings and escaped string endings', () => {
+    it('should parse declarations with with strings and escaped string endings', () => {
       expect(
         parse(css`
           content: 'These are not the end "\' of the string';
@@ -229,7 +206,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         {
           kind: 'declaration',
           property: 'content',
-          value: `'These are not the end "\\' of the string'`,
+          value: `'These are not the end \"\\' of the string'`,
           important: false,
         },
       ])
@@ -352,28 +329,6 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         ])
       })
 
-      it('should parse a custom property with an empty value', () => {
-        expect(parse('--foo:;')).toEqual([
-          {
-            kind: 'declaration',
-            property: '--foo',
-            value: '',
-            important: false,
-          },
-        ])
-      })
-
-      it('should parse a custom property with a space value', () => {
-        expect(parse('--foo: ;')).toEqual([
-          {
-            kind: 'declaration',
-            property: '--foo',
-            value: '',
-            important: false,
-          },
-        ])
-      })
-
       it('should parse a custom property with a block including nested "css"', () => {
         expect(
           parse(css`
@@ -391,7 +346,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
               background-color: red;
               /* A comment */
               content: 'Hello, world!';
-            }`.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'),
+            }`,
             important: false,
           },
         ])
@@ -419,7 +374,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
               background-color: red;
               /* A comment ; */
               content: 'Hello, world!';
-            }`.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'),
+            }`,
             important: false,
           },
           {
@@ -429,7 +384,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
               background-color: red;
               /* A comment } */
               content: 'Hello, world!';
-            }`.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'),
+            }`,
             important: false,
           },
         ])
@@ -465,28 +420,6 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         ])
       })
 
-      it('should end a comment in a custom property at `*/` even when it is preceded by a `\\`', () => {
-        expect(
-          parse(css`
-            --foo: /* C:\temp\*/ bar;
-            --bar: /* baz */ qux;
-          `),
-        ).toEqual([
-          {
-            kind: 'declaration',
-            property: '--foo',
-            value: '/* C:\\temp\\*/ bar',
-            important: false,
-          },
-          {
-            kind: 'declaration',
-            property: '--bar',
-            value: '/* baz */ qux',
-            important: false,
-          },
-        ])
-      })
-
       it('should parse empty custom properties', () => {
         expect(
           parse(css`
@@ -502,21 +435,6 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
           `),
         ).toEqual([{ kind: 'declaration', property: '--foo', value: 'bar', important: true }])
       })
-
-      it('should parse custom properties with data URL value', () => {
-        expect(
-          parse(css`
-            --foo: 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==';
-          `),
-        ).toEqual([
-          {
-            kind: 'declaration',
-            property: '--foo',
-            value: "'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ=='",
-            important: false,
-          },
-        ])
-      })
     })
 
     it('should parse multiple declarations', () => {
@@ -562,7 +480,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
       ])
     })
 
-    it('should parse multi-line declarations', () => {
+    it('should parse mutlti-line declarations', () => {
       expect(
         parse(css`
           .foo {
@@ -587,59 +505,6 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         },
       ])
     })
-
-    it('should parse url(…) without quotes and special characters such as `;`, `{}`, and `[]`', () => {
-      expect(
-        parse(css`
-          .foo {
-            /* ';' should be valid inside the 'url(…)' function */
-            background: url(data:image/png;base64,abc==);
-
-            /* '{', '}', '[' and ']' should be valid inside the 'url(…)' function */
-            /* '{' and '}' should not start a new block (nesting) */
-            background: url(https://example-image-search.org?q={query;limit=5}&ids=[1,2,3]);
-
-            /* '{' and '}' don't need to be balanced */
-            background: url(https://example-image-search.org?curlies=}});
-
-            /* '(' and ')' are not valid, unless we are in a string with quotes */
-            background: url('https://example-image-search.org?q={query;limit=5}&ids=[1,2,3]&format=(png|jpg)');
-          }
-        `),
-      ).toEqual([
-        {
-          kind: 'rule',
-          selector: '.foo',
-          nodes: [
-            {
-              kind: 'declaration',
-              property: 'background',
-              value: 'url(data:image/png;base64,abc==)',
-              important: false,
-            },
-            {
-              kind: 'declaration',
-              property: 'background',
-              value: 'url(https://example-image-search.org?q={query;limit=5}&ids=[1,2,3])',
-              important: false,
-            },
-            {
-              kind: 'declaration',
-              property: 'background',
-              value: 'url(https://example-image-search.org?curlies=}})',
-              important: false,
-            },
-            {
-              kind: 'declaration',
-              property: 'background',
-              value:
-                "url('https://example-image-search.org?q={query;limit=5}&ids=[1,2,3]&format=(png|jpg)')",
-              important: false,
-            },
-          ],
-        },
-      ])
-    })
   })
 
   describe('selectors', () => {
@@ -735,28 +600,6 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         },
       ])
     })
-
-    it('should parse a multi-line selector', () => {
-      expect(parse(['.foo,', '.bar,', '.baz', '{', 'color:red;', '}'].join('\n'))).toEqual([
-        {
-          kind: 'rule',
-          selector: '.foo, .bar, .baz',
-          nodes: [{ kind: 'declaration', property: 'color', value: 'red', important: false }],
-        },
-      ])
-    })
-
-    it('should parse a multi-line selector and preserves important whitespace', () => {
-      expect(
-        parse(['.foo,', '.bar,', '.baz\t\n \n .qux', '{', 'color:red;', '}'].join('\n')),
-      ).toEqual([
-        {
-          kind: 'rule',
-          selector: '.foo, .bar, .baz .qux',
-          nodes: [{ kind: 'declaration', property: 'color', value: 'red', important: false }],
-        },
-      ])
-    })
   })
 
   describe('at-rules', () => {
@@ -765,35 +608,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         parse(css`
           @charset "UTF-8";
         `),
-      ).toEqual([{ kind: 'at-rule', name: '@charset', params: '"UTF-8"', nodes: [] }])
-    })
-
-    it.each([
-      [' '], // space
-      ['  '], // multiple spaces
-      ['\t'], // tab
-      [' \t'], // space + tab
-      ['\t '], // tab + space
-      ['\t\t'], // multiple tabs
-      ['\n'], // newline
-      [' \n'], // space + newline
-      ['\n '], // newline + space
-      ['\n\n'], // multiple newlines
-      ['\r\n'], // windows newline
-      [' \r\n'], // space + windows newline
-      ['\r\n '], // windows newline + space
-    ])('should parse an at-rule with whitespace %s in the params', (whitespace) => {
-      expect(parse(`@apply${whitespace}bg-red-500;`)).toEqual([
-        { kind: 'at-rule', name: '@apply', params: 'bg-red-500', nodes: [] },
-      ])
-    })
-
-    it('should parse an at-rule without a block or semicolon', () => {
-      expect(
-        parse(`
-          @tailwind utilities
-        `),
-      ).toEqual([{ kind: 'at-rule', name: '@tailwind', params: 'utilities', nodes: [] }])
+      ).toEqual([{ kind: 'rule', selector: '@charset "UTF-8"', nodes: [] }])
     })
 
     it("should parse an at-rule without a block or semicolon when it's the last rule in a block", () => {
@@ -805,10 +620,9 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         `),
       ).toEqual([
         {
-          kind: 'at-rule',
-          name: '@layer',
-          params: 'utilities',
-          nodes: [{ kind: 'at-rule', name: '@tailwind', params: 'utilities', nodes: [] }],
+          kind: 'rule',
+          selector: '@layer utilities',
+          nodes: [{ kind: 'rule', selector: '@tailwind utilities', nodes: [] }],
         },
       ])
     })
@@ -826,17 +640,14 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         `),
       ).toEqual([
         {
-          kind: 'at-rule',
-          name: '@layer',
-          params: 'utilities',
-          nodes: [{ kind: 'at-rule', name: '@charset', params: '"UTF-8"', nodes: [] }],
+          kind: 'rule',
+          selector: '@layer utilities',
+          nodes: [{ kind: 'rule', selector: '@charset "UTF-8"', nodes: [] }],
         },
         {
           kind: 'rule',
           selector: '.foo',
-          nodes: [
-            { kind: 'at-rule', name: '@apply', params: 'font-bold hover:text-red-500', nodes: [] },
-          ],
+          nodes: [{ kind: 'rule', selector: '@apply font-bold hover:text-red-500', nodes: [] }],
         },
       ])
     })
@@ -848,8 +659,8 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
           @tailwind base;
         `),
       ).toEqual([
-        { kind: 'at-rule', name: '@tailwind', params: '', nodes: [] },
-        { kind: 'at-rule', name: '@tailwind', params: 'base', nodes: [] },
+        { kind: 'rule', selector: '@tailwind', nodes: [] },
+        { kind: 'rule', selector: '@tailwind base', nodes: [] },
       ])
     })
 
@@ -870,9 +681,8 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         `),
       ).toEqual([
         {
-          kind: 'at-rule',
-          name: '@media',
-          params: '(width >= 600px)',
+          kind: 'rule',
+          selector: '@media (width >= 600px)',
           nodes: [
             {
               kind: 'rule',
@@ -880,17 +690,15 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
               nodes: [
                 { kind: 'declaration', property: 'color', value: 'red', important: false },
                 {
-                  kind: 'at-rule',
-                  name: '@media',
-                  params: '(width >= 800px)',
+                  kind: 'rule',
+                  selector: '@media (width >= 800px)',
                   nodes: [
                     { kind: 'declaration', property: 'color', value: 'blue', important: false },
                   ],
                 },
                 {
-                  kind: 'at-rule',
-                  name: '@media',
-                  params: '(width >= 1000px)',
+                  kind: 'rule',
+                  selector: '@media (width >= 1000px)',
                   nodes: [
                     { kind: 'declaration', property: 'color', value: 'green', important: false },
                   ],
@@ -918,11 +726,10 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
           kind: 'rule',
           nodes: [
             {
-              kind: 'at-rule',
-              name: '@apply',
-              params:
-                'hover:text-red-100 sm:hover:text-red-200 md:hover:text-red-300 lg:hover:text-red-400 xl:hover:text-red-500',
+              kind: 'rule',
               nodes: [],
+              selector:
+                '@apply hover:text-red-100 sm:hover:text-red-200 md:hover:text-red-300 lg:hover:text-red-400 xl:hover:text-red-500',
             },
           ],
           selector: '.foo',
@@ -1086,9 +893,8 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         `),
       ).toEqual([
         {
-          kind: 'at-rule',
-          name: '@custom',
-          params: '\\{',
+          kind: 'rule',
+          selector: '@custom \\{',
           nodes: [{ kind: 'declaration', property: 'foo', value: 'bar', important: false }],
         },
       ])
@@ -1104,9 +910,8 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
           nodes: [
             { kind: 'declaration', property: 'color', value: 'red', important: false },
             {
-              kind: 'at-rule',
-              name: '@media',
-              params: '(width>=600px)',
+              kind: 'rule',
+              selector: '@media(width>=600px)',
               nodes: [
                 {
                   kind: 'rule',
@@ -1143,38 +948,6 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
         },
       ])
     })
-
-    it('should ignore consecutive semicolons', () => {
-      expect(parse(';;;')).toEqual([])
-    })
-
-    it('should ignore semicolons after an at-rule with a body', () => {
-      expect(parse('@plugin "foo" {} ;')).toEqual([
-        {
-          kind: 'at-rule',
-          name: '@plugin',
-          params: '"foo"',
-          nodes: [],
-        },
-      ])
-    })
-
-    it('should ignore consecutive semicolons a declaration', () => {
-      expect(parse('.foo { color: red;;; }')).toEqual([
-        {
-          kind: 'rule',
-          selector: '.foo',
-          nodes: [
-            {
-              kind: 'declaration',
-              property: 'color',
-              value: 'red',
-              important: false,
-            },
-          ],
-        },
-      ])
-    })
   })
 
   describe('errors', () => {
@@ -1190,20 +963,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
             color: blue;
           }
         `),
-      ).toThrowErrorMatchingInlineSnapshot(`[CssSyntaxError: Missing opening {]`)
-
-      expect(() =>
-        parseWithLoc(`
-          .foo {
-            color: red;
-          }
-
-          .bar
-            /* ^ Missing opening { */
-            color: blue;
-          }
-        `),
-      ).toThrowErrorMatchingInlineSnapshot(`[CssSyntaxError: input.css:9:11: Missing opening {]`)
+      ).toThrowErrorMatchingInlineSnapshot(`[Error: Missing opening {]`)
     })
 
     it('should error when curly brackets are unbalanced (closing)', () => {
@@ -1218,117 +978,31 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
 
        /* ^ Missing closing } */
         `),
-      ).toThrowErrorMatchingInlineSnapshot(`[CssSyntaxError: Missing closing } at .bar]`)
-
-      expect(() =>
-        parseWithLoc(`
-          .foo {
-            color: red;
-          }
-
-          .bar {
-            color: blue;
-
-       /* ^ Missing closing } */
-        `),
-      ).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:6:11: Missing closing } at .bar]`,
-      )
+      ).toThrowErrorMatchingInlineSnapshot(`[Error: Missing closing } at .bar]`)
     })
 
     it('should error when an unterminated string is used', () => {
-      let input = css`
-        .foo {
-          content: "Hello world!
-          /*                    ^ missing " */
-          font-weight: bold;
-        }
-      `
-
-      expect(() => parse(input)).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: Unterminated string: "Hello world!"]`,
-      )
-
-      expect(() => parseWithLoc(input)).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:3:20: Unterminated string: "Hello world!"]`,
-      )
+      expect(() =>
+        parse(css`
+          .foo {
+            content: "Hello world!
+            /*                    ^ missing " */
+            font-weight: bold;
+          }
+        `),
+      ).toThrowErrorMatchingInlineSnapshot(`[Error: Unterminated string: "Hello world!"]`)
     })
 
     it('should error when an unterminated string is used with a `;`', () => {
-      let input = css`
-        .foo {
-          content: "Hello world!;
-          /*                    ^ missing " */
-          font-weight: bold;
-        }
-      `
-
-      expect(() => parse(input)).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: Unterminated string: "Hello world!;"]`,
-      )
-
-      expect(() => parseWithLoc(input)).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:3:20: Unterminated string: "Hello world!;"]`,
-      )
+      expect(() =>
+        parse(css`
+          .foo {
+            content: "Hello world!;
+            /*                    ^ missing " */
+            font-weight: bold;
+          }
+        `),
+      ).toThrowErrorMatchingInlineSnapshot(`[Error: Unterminated string: "Hello world!;"]`)
     })
-
-    it('should error when incomplete custom properties are used', () => {
-      expect(() => parse('--foo')).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: Invalid custom property, expected a value]`,
-      )
-
-      expect(() => parseWithLoc('--foo')).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:1:1: Invalid custom property, expected a value]`,
-      )
-    })
-
-    it('should error when incomplete custom properties are used inside rules', () => {
-      expect(() => parse('.foo { --bar }')).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: Invalid custom property, expected a value]`,
-      )
-
-      expect(() => parseWithLoc('.foo { --bar }')).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:1:8: Invalid custom property, expected a value]`,
-      )
-    })
-
-    it('should error when an unterminated string is used in a custom property', () => {
-      // prettier-ignore
-      let input = css`
-        .foo {
-          --bar: 'Hello world!
-          /*                  ^ missing ' * /;
-        }
-      `
-
-      expect(() => parse(input)).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: Unterminated string: 'Hello world!']`,
-      )
-
-      expect(() => parseWithLoc(input)).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:3:18: Unterminated string: 'Hello world!']`,
-      )
-    })
-
-    it('should error when a declaration is incomplete', () => {
-      expect(() => parse('.foo { bar }')).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: Invalid declaration: \`bar\`]`,
-      )
-
-      expect(() => parseWithLoc('.foo { bar }')).toThrowErrorMatchingInlineSnapshot(
-        `[CssSyntaxError: input.css:1:8: Invalid declaration: \`bar\`]`,
-      )
-    })
-  })
-
-  it('ignores BOM at the beginning of a file', () => {
-    expect(parse("\uFEFF@reference 'tailwindcss';")).toEqual([
-      {
-        kind: 'at-rule',
-        name: '@reference',
-        nodes: [],
-        params: "'tailwindcss'",
-      },
-    ])
   })
 })
diff --git a/packages/tailwindcss/src/css-parser.ts b/packages/tailwindcss/src/css-parser.ts
index 0896881e6..c0e0dccac 100644
--- a/packages/tailwindcss/src/css-parser.ts
+++ b/packages/tailwindcss/src/css-parser.ts
@@ -1,73 +1,7 @@
-import {
-  atRule,
-  comment,
-  decl,
-  rule,
-  type AstNode,
-  type AtRule,
-  type Comment,
-  type Declaration,
-  type Rule,
-} from './ast'
-import { createLineTable } from './source-maps/line-table'
-import type { Source, SourceLocation } from './source-maps/source'
+import { comment, rule, type AstNode, type Comment, type Declaration, type Rule } from './ast'
 
-const BACKSLASH = 0x5c
-const SLASH = 0x2f
-const ASTERISK = 0x2a
-const DOUBLE_QUOTE = 0x22
-const SINGLE_QUOTE = 0x27
-const COLON = 0x3a
-const SEMICOLON = 0x3b
-const LINE_BREAK = 0x0a
-const CARRIAGE_RETURN = 0xd
-const SPACE = 0x20
-const TAB = 0x09
-const OPEN_CURLY = 0x7b
-const CLOSE_CURLY = 0x7d
-const OPEN_PAREN = 0x28
-const CLOSE_PAREN = 0x29
-const OPEN_BRACKET = 0x5b
-const CLOSE_BRACKET = 0x5d
-const DASH = 0x2d
-const AT_SIGN = 0x40
-const EXCLAMATION_MARK = 0x21
-
-export interface ParseOptions {
-  from?: string
-}
-
-/**
- * CSS syntax error with source location information.
- */
-export class CssSyntaxError extends Error {
-  loc: SourceLocation | null
-
-  constructor(message: string, loc: SourceLocation | null) {
-    if (loc) {
-      let source = loc[0]
-      let start = createLineTable(source.code).find(loc[1])
-      message = `${source.file}:${start.line}:${start.column + 1}: ${message}`
-    }
-
-    super(message)
-
-    this.name = 'CssSyntaxError'
-    this.loc = loc
-
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, CssSyntaxError)
-    }
-  }
-}
-
-export function parse(input: string, opts?: ParseOptions) {
-  let source: Source | null = opts?.from ? { file: opts.from, code: input } : null
-
-  // Note: it is important that any transformations of the input string
-  // *before* processing do NOT change the length of the string. This
-  // would invalidate the mechanism used to track source locations.
-  if (input[0] === '\uFEFF') input = ' ' + input.slice(1)
+export function parse(input: string) {
+  input = input.replaceAll('\r\n', '\n')
 
   let ast: AstNode[] = []
   let licenseComments: Comment[] = []
@@ -77,24 +11,11 @@ export function parse(input: string, opts?: ParseOptions) {
   let parent = null as Rule | null
   let node = null as AstNode | null
 
-  let buffer = ''
+  let current = ''
   let closingBracketStack = ''
 
-  // The start of the first non-whitespace character in the buffer
-  let bufferStart = 0
-
-  let peekChar
-
   for (let i = 0; i < input.length; i++) {
-    let currentChar = input.charCodeAt(i)
-
-    // Skip over the CR in CRLF. This allows code below to only check for a line
-    // break even if we're looking at a Windows newline. Peeking the input still
-    // has to check for CRLF but that happens less often.
-    if (currentChar === CARRIAGE_RETURN) {
-      peekChar = input.charCodeAt(i + 1)
-      if (peekChar === LINE_BREAK) continue
-    }
+    let char = input[i]
 
     // Current character is a `\` therefore the next character is escaped,
     // consume it together with the next character and continue.
@@ -106,9 +27,8 @@ export function parse(input: string, opts?: ParseOptions) {
     //       ^
     // ```
     //
-    if (currentChar === BACKSLASH) {
-      if (buffer === '') bufferStart = i
-      buffer += input.slice(i, i + 2)
+    if (char === '\\') {
+      current += input.slice(i, i + 2)
       i += 1
     }
 
@@ -128,24 +48,17 @@ export function parse(input: string, opts?: ParseOptions) {
     //         ^^^^^^^^^^^^^
     // }
     // ```
-    //
-    // The escape character `\` in comments are ignored, this means that a
-    // the end of a comment preceded by `\` does _not_ mean that the end of the
-    // comment is escaped and therefore we have to keep parsing.
-    //
-    // This is a valid comment:
-    // ```
-    // /*C:\*/
-    // ```
-    // See: https://www.w3.org/TR/css-syntax-3/#consume-comment
-    else if (currentChar === SLASH && input.charCodeAt(i + 1) === ASTERISK) {
+    else if (char === '/' && input[i + 1] === '*') {
       let start = i
 
       for (let j = i + 2; j < input.length; j++) {
-        peekChar = input.charCodeAt(j)
+        // Current character is a `\` therefore the next character is escaped.
+        if (input[j] === '\\') {
+          j += 1
+        }
 
-        // End of the comment.
-        if (peekChar === ASTERISK && input.charCodeAt(j + 1) === SLASH) {
+        // End of the comment
+        else if (input[j] === '*' && input[j + 1] === '/') {
           i = j + 1
           break
         }
@@ -155,83 +68,108 @@ export function parse(input: string, opts?: ParseOptions) {
 
       // Collect all license comments so that we can hoist them to the top of
       // the AST.
-      if (commentString.charCodeAt(2) === EXCLAMATION_MARK) {
-        let node = comment(commentString.slice(2, -2))
-        licenseComments.push(node)
-
-        if (source) {
-          node.src = [source, start, i + 1]
-          node.dst = [source, start, i + 1]
-        }
+      if (commentString[2] === '!') {
+        licenseComments.push(comment(commentString.slice(2, -2)))
       }
     }
 
     // Start of a string.
-    else if (currentChar === SINGLE_QUOTE || currentChar === DOUBLE_QUOTE) {
-      let end = parseString(input, i, currentChar, source)
+    else if (char === '"' || char === "'") {
+      let start = i
 
-      // Adjust `buffer` to include the string.
-      buffer += input.slice(i, end + 1)
-      i = end
+      // We need to ensure that the closing quote is the same as the opening
+      // quote.
+      //
+      // E.g.:
+      //
+      // ```css
+      // .foo {
+      //   content: "This is a string with a 'quote' in it";
+      //                                     ^     ^         -> These are not the end of the string.
+      // }
+      // ```
+      for (let j = i + 1; j < input.length; j++) {
+        // Current character is a `\` therefore the next character is escaped.
+        if (input[j] === '\\') {
+          j += 1
+        }
+
+        // End of the string.
+        else if (input[j] === char) {
+          i = j
+          break
+        }
+
+        // End of the line without ending the string but with a `;` at the end.
+        //
+        // E.g.:
+        //
+        // ```css
+        // .foo {
+        //   content: "This is a string with a;
+        //                                    ^ Missing "
+        // }
+        // ```
+        else if (input[j] === ';' && input[j + 1] === '\n') {
+          throw new Error(`Unterminated string: ${input.slice(start, j + 1) + char}`)
+        }
+
+        // End of the line without ending the string.
+        //
+        // E.g.:
+        //
+        // ```css
+        // .foo {
+        //   content: "This is a string with a
+        //                                    ^ Missing "
+        // }
+        // ```
+        else if (input[j] === '\n') {
+          throw new Error(`Unterminated string: ${input.slice(start, j) + char}`)
+        }
+      }
+
+      // Adjust `current` to include the string.
+      current += input.slice(start, i + 1)
     }
 
     // Skip whitespace if the next character is also whitespace. This allows us
     // to reduce the amount of whitespace in the AST.
     else if (
-      (currentChar === SPACE || currentChar === LINE_BREAK || currentChar === TAB) &&
-      (peekChar = input.charCodeAt(i + 1)) &&
-      (peekChar === SPACE ||
-        peekChar === LINE_BREAK ||
-        peekChar === TAB ||
-        (peekChar === CARRIAGE_RETURN &&
-          (peekChar = input.charCodeAt(i + 2)) &&
-          peekChar == LINE_BREAK))
+      (char === ' ' || char === '\n' || char === '\t') &&
+      (input[i + 1] === ' ' || input[i + 1] === '\n' || input[i + 1] === '\t')
     ) {
       continue
     }
 
-    // Replace new lines with spaces.
-    else if (currentChar === LINE_BREAK) {
-      if (buffer.length === 0) continue
-
-      peekChar = buffer.charCodeAt(buffer.length - 1)
-      if (peekChar !== SPACE && peekChar !== LINE_BREAK && peekChar !== TAB) {
-        buffer += ' '
-      }
-    }
-
     // Start of a custom property.
     //
     // Custom properties are very permissive and can contain almost any
     // character, even `;` and `}`. Therefore we have to make sure that we are
     // at the correct "end" of the custom property by making sure everything is
     // balanced.
-    else if (currentChar === DASH && input.charCodeAt(i + 1) === DASH && buffer.length === 0) {
+    else if (char === '-' && input[i + 1] === '-' && current.length === 0) {
       let closingBracketStack = ''
 
       let start = i
       let colonIdx = -1
 
       for (let j = i + 2; j < input.length; j++) {
-        peekChar = input.charCodeAt(j)
-
         // Current character is a `\` therefore the next character is escaped.
-        if (peekChar === BACKSLASH) {
+        if (input[j] === '\\') {
           j += 1
         }
 
-        // Start of a string.
-        else if (peekChar === SINGLE_QUOTE || peekChar === DOUBLE_QUOTE) {
-          j = parseString(input, j, peekChar, source)
-        }
-
         // Start of a comment.
-        else if (peekChar === SLASH && input.charCodeAt(j + 1) === ASTERISK) {
+        else if (input[j] === '/' && input[j + 1] === '*') {
           for (let k = j + 2; k < input.length; k++) {
-            peekChar = input.charCodeAt(k)
+            // Current character is a `\` therefore the next character is escaped.
+            if (input[k] === '\\') {
+              k += 1
+            }
 
-            // End of the comment.
-            if (peekChar === ASTERISK && input.charCodeAt(k + 1) === SLASH) {
+            // End of the comment
+            else if (input[k] === '*' && input[k + 1] === '/') {
               j = k + 1
               break
             }
@@ -239,23 +177,23 @@ export function parse(input: string, opts?: ParseOptions) {
         }
 
         // End of the "property" of the property-value pair.
-        else if (colonIdx === -1 && peekChar === COLON) {
-          colonIdx = buffer.length + j - start
+        else if (colonIdx === -1 && input[j] === ':') {
+          colonIdx = current.length + j - start
         }
 
         // End of the custom property.
-        else if (peekChar === SEMICOLON && closingBracketStack.length === 0) {
-          buffer += input.slice(start, j)
+        else if (input[j] === ';' && closingBracketStack.length === 0) {
+          current += input.slice(start, j)
           i = j
           break
         }
 
         // Start of a block.
-        else if (peekChar === OPEN_PAREN) {
+        else if (input[j] === '(') {
           closingBracketStack += ')'
-        } else if (peekChar === OPEN_BRACKET) {
+        } else if (input[j] === '[') {
           closingBracketStack += ']'
-        } else if (peekChar === OPEN_CURLY) {
+        } else if (input[j] === '{') {
           closingBracketStack += '}'
         }
 
@@ -270,21 +208,14 @@ export function parse(input: string, opts?: ParseOptions) {
         //                  ^
         // }
         // ```
-        else if (
-          (peekChar === CLOSE_CURLY || input.length - 1 === j) &&
-          closingBracketStack.length === 0
-        ) {
+        else if ((input[j] === '}' || input.length - 1 === j) && closingBracketStack.length === 0) {
           i = j - 1
-          buffer += input.slice(start, j)
+          current += input.slice(start, j)
           break
         }
 
         // End of a block.
-        else if (
-          peekChar === CLOSE_PAREN ||
-          peekChar === CLOSE_BRACKET ||
-          peekChar === CLOSE_CURLY
-        ) {
+        else if (input[j] === ')' || input[j] === ']' || input[j] === '}') {
           if (
             closingBracketStack.length > 0 &&
             input[j] === closingBracketStack[closingBracketStack.length - 1]
@@ -294,26 +225,14 @@ export function parse(input: string, opts?: ParseOptions) {
         }
       }
 
-      let declaration = parseDeclaration(buffer, colonIdx)
-      if (!declaration) {
-        throw new CssSyntaxError(
-          `Invalid custom property, expected a value`,
-          source ? [source, start, i] : null,
-        )
-      }
-
-      if (source) {
-        declaration.src = [source, start, i]
-        declaration.dst = [source, start, i]
-      }
-
+      let declaration = parseDeclaration(current, colonIdx)
       if (parent) {
         parent.nodes.push(declaration)
       } else {
         ast.push(declaration)
       }
 
-      buffer = ''
+      current = ''
     }
 
     // End of a body-less at-rule.
@@ -324,13 +243,8 @@ export function parse(input: string, opts?: ParseOptions) {
     // @charset "UTF-8";
     //                 ^
     // ```
-    else if (currentChar === SEMICOLON && buffer.charCodeAt(0) === AT_SIGN) {
-      node = parseAtRule(buffer)
-
-      if (source) {
-        node.src = [source, bufferStart, i]
-        node.dst = [source, bufferStart, i]
-      }
+    else if (char === ';' && current[0] === '@') {
+      node = rule(current, [])
 
       // At-rule is nested inside of a rule, attach it to the parent.
       if (parent) {
@@ -343,7 +257,7 @@ export function parse(input: string, opts?: ParseOptions) {
       }
 
       // Reset the state for the next node.
-      buffer = ''
+      current = ''
       node = null
     }
 
@@ -358,82 +272,50 @@ export function parse(input: string, opts?: ParseOptions) {
     // }
     // ```
     //
-    else if (
-      currentChar === SEMICOLON &&
-      closingBracketStack[closingBracketStack.length - 1] !== ')'
-    ) {
-      let declaration = parseDeclaration(buffer)
-      if (!declaration) {
-        if (buffer.length === 0) continue
-        throw new CssSyntaxError(
-          `Invalid declaration: \`${buffer.trim()}\``,
-          source ? [source, bufferStart, i] : null,
-        )
-      }
-
-      if (source) {
-        declaration.src = [source, bufferStart, i]
-        declaration.dst = [source, bufferStart, i]
-      }
-
+    else if (char === ';') {
+      let declaration = parseDeclaration(current)
       if (parent) {
         parent.nodes.push(declaration)
       } else {
         ast.push(declaration)
       }
 
-      buffer = ''
+      current = ''
     }
 
     // Start of a block.
-    else if (
-      currentChar === OPEN_CURLY &&
-      closingBracketStack[closingBracketStack.length - 1] !== ')'
-    ) {
+    else if (char === '{') {
       closingBracketStack += '}'
 
-      // At this point `buffer` should resemble a selector or an at-rule.
-      node = rule(buffer.trim())
-
-      // Track the source location for source maps
-      if (source) {
-        node.src = [source, bufferStart, i]
-        node.dst = [source, bufferStart, i]
-      }
+      // At this point `current` should resemble a selector or an at-rule.
+      node = rule(current.trim(), [])
 
       // Attach the rule to the parent in case it's nested.
       if (parent) {
         parent.nodes.push(node)
       }
 
-      // Push the parent node to the stack, so that we can go back once the
-      // nested nodes are done.
+      // Push the current node to the stack and make it the new parent.
       stack.push(parent)
-
-      // Make the current node the new parent, so that nested nodes can be
-      // attached to it.
       parent = node
 
       // Reset the state for the next node.
-      buffer = ''
+      current = ''
       node = null
     }
 
     // End of a block.
-    else if (
-      currentChar === CLOSE_CURLY &&
-      closingBracketStack[closingBracketStack.length - 1] !== ')'
-    ) {
+    else if (char === '}') {
       if (closingBracketStack === '') {
-        throw new CssSyntaxError('Missing opening {', source ? [source, i, i] : null)
+        throw new Error('Missing opening {')
       }
 
       closingBracketStack = closingBracketStack.slice(0, -1)
 
-      // When we hit a `}` and `buffer` is filled in, then it means that we did
+      // When we hit a `}` and `current` is filled in, then it means that we did
       // not complete the previous node yet. This means that we hit a
       // declaration without a `;` at the end.
-      if (buffer.length > 0) {
+      if (current.length > 0) {
         // This can happen for nested at-rules.
         //
         // E.g.:
@@ -444,14 +326,8 @@ export function parse(input: string, opts?: ParseOptions) {
         //                      ^
         // }
         // ```
-        if (buffer.charCodeAt(0) === AT_SIGN) {
-          node = parseAtRule(buffer)
-
-          // Track the source location for source maps
-          if (source) {
-            node.src = [source, bufferStart, i]
-            node.dst = [source, bufferStart, i]
-          }
+        if (current[0] === '@') {
+          node = rule(current.trim(), [])
 
           // At-rule is nested inside of a rule, attach it to the parent.
           if (parent) {
@@ -464,7 +340,7 @@ export function parse(input: string, opts?: ParseOptions) {
           }
 
           // Reset the state for the next node.
-          buffer = ''
+          current = ''
           node = null
         }
 
@@ -479,27 +355,22 @@ export function parse(input: string, opts?: ParseOptions) {
         // }
         // ```
         else {
-          // Split `buffer` into a `property` and a `value`. At this point the
+          // Split `current` into a `property` and a `value`. At this point the
           // comments are already removed which means that we don't have to worry
           // about `:` inside of comments.
-          let colonIdx = buffer.indexOf(':')
+          let colonIdx = current.indexOf(':')
 
           // Attach the declaration to the parent.
           if (parent) {
-            let node = parseDeclaration(buffer, colonIdx)
-            if (!node) {
-              throw new CssSyntaxError(
-                `Invalid declaration: \`${buffer.trim()}\``,
-                source ? [source, bufferStart, i] : null,
-              )
-            }
-
-            if (source) {
-              node.src = [source, bufferStart, i]
-              node.dst = [source, bufferStart, i]
-            }
-
-            parent.nodes.push(node)
+            let importantIdx = current.indexOf('!important', colonIdx + 1)
+            parent.nodes.push({
+              kind: 'declaration',
+              property: current.slice(0, colonIdx).trim(),
+              value: current
+                .slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx)
+                .trim(),
+              important: importantIdx !== -1,
+            } satisfies Declaration)
           }
         }
       }
@@ -508,7 +379,7 @@ export function parse(input: string, opts?: ParseOptions) {
       // in the stack.
       let grandParent = stack.pop() ?? null
 
-      // We are the root node which means we are done and continue with the next
+      // We are the root node which means we are done and contine with the next
       // node.
       if (grandParent === null && parent) {
         ast.push(parent)
@@ -518,73 +389,25 @@ export function parse(input: string, opts?: ParseOptions) {
       parent = grandParent
 
       // Reset the state for the next node.
-      buffer = ''
+      current = ''
       node = null
     }
 
-    // `(`
-    else if (currentChar === OPEN_PAREN) {
-      closingBracketStack += ')'
-      buffer += '('
-    }
-
-    // `)`
-    else if (currentChar === CLOSE_PAREN) {
-      if (closingBracketStack[closingBracketStack.length - 1] !== ')') {
-        throw new CssSyntaxError('Missing opening (', source ? [source, i, i] : null)
-      }
-
-      closingBracketStack = closingBracketStack.slice(0, -1)
-      buffer += ')'
-    }
-
     // Any other character is part of the current node.
     else {
       // Skip whitespace at the start of a new node.
-      if (
-        buffer.length === 0 &&
-        (currentChar === SPACE || currentChar === LINE_BREAK || currentChar === TAB)
-      ) {
+      if (current.length === 0 && (char === ' ' || char === '\n' || char === '\t')) {
         continue
       }
 
-      if (buffer === '') bufferStart = i
-
-      buffer += String.fromCharCode(currentChar)
+      current += char
     }
   }
 
-  // If we have a leftover `buffer` that happens to start with an `@` then it
-  // means that we have an at-rule that is not terminated with a semicolon at
-  // the end of the input.
-  if (buffer.charCodeAt(0) === AT_SIGN) {
-    let node = parseAtRule(buffer)
-
-    // Track the source location for source maps
-    if (source) {
-      node.src = [source, bufferStart, input.length]
-      node.dst = [source, bufferStart, input.length]
-    }
-
-    ast.push(node)
-  }
-
   // When we are done parsing then everything should be balanced. If we still
   // have a leftover `parent`, then it means that we have an unterminated block.
   if (closingBracketStack.length > 0 && parent) {
-    if (parent.kind === 'rule') {
-      throw new CssSyntaxError(
-        `Missing closing } at ${parent.selector}`,
-        parent.src ? [parent.src[0], parent.src[1], parent.src[1]] : null,
-      )
-    }
-
-    if (parent.kind === 'at-rule') {
-      throw new CssSyntaxError(
-        `Missing closing } at ${parent.name} ${parent.params}`,
-        parent.src ? [parent.src[0], parent.src[1], parent.src[1]] : null,
-      )
-    }
+    throw new Error(`Missing closing } at ${parent.selector}`)
   }
 
   if (licenseComments.length > 0) {
@@ -594,125 +417,12 @@ export function parse(input: string, opts?: ParseOptions) {
   return ast
 }
 
-export function parseAtRule(buffer: string, nodes: AstNode[] = []): AtRule {
-  let name = buffer
-  let params = ''
-
-  // Assumption: The smallest at-rule in CSS right now is `@page`, this means
-  //             that we can always skip the first 5 characters and start at the
-  //             sixth (at index 5).
-  //
-  // There is a chance someone is using a shorter at-rule, in that case we have
-  // to adjust this number back to 2, e.g.: `@x`.
-  //
-  // This issue can only occur if somebody does the following things:
-  //
-  // 1. Uses a shorter at-rule than `@page`
-  // 2. Disables Lightning CSS from `@tailwindcss/postcss` (because Lightning
-  //    CSS doesn't handle custom at-rules properly right now)
-  // 3. Sandwiches the `@tailwindcss/postcss` plugin between two other plugins
-  //    that can handle the shorter at-rule
-  //
-  // Let's use the more common case as the default and we can adjust this
-  // behavior if necessary.
-  for (let i = 5 /* '@page'.length */; i < buffer.length; i++) {
-    let currentChar = buffer.charCodeAt(i)
-    if (currentChar === SPACE || currentChar === TAB || currentChar === OPEN_PAREN) {
-      name = buffer.slice(0, i)
-      params = buffer.slice(i)
-      break
-    }
+function parseDeclaration(current: string, colonIdx: number = current.indexOf(':')): Declaration {
+  let importantIdx = current.indexOf('!important', colonIdx + 1)
+  return {
+    kind: 'declaration',
+    property: current.slice(0, colonIdx).trim(),
+    value: current.slice(colonIdx + 1, importantIdx === -1 ? current.length : importantIdx).trim(),
+    important: importantIdx !== -1,
   }
-
-  return atRule(name.trim(), params.trim(), nodes)
-}
-
-function parseDeclaration(
-  buffer: string,
-  colonIdx: number = buffer.indexOf(':'),
-): Declaration | null {
-  if (colonIdx === -1) return null
-  let importantIdx = buffer.indexOf('!important', colonIdx + 1)
-  return decl(
-    buffer.slice(0, colonIdx).trim(),
-    buffer.slice(colonIdx + 1, importantIdx === -1 ? buffer.length : importantIdx).trim(),
-    importantIdx !== -1,
-  )
-}
-
-function parseString(
-  input: string,
-  startIdx: number,
-  quoteChar: number,
-  source: Source | null = null,
-): number {
-  let peekChar: number
-
-  // We need to ensure that the closing quote is the same as the opening
-  // quote.
-  //
-  // E.g.:
-  //
-  // ```css
-  // .foo {
-  //   content: "This is a string with a 'quote' in it";
-  //                                     ^     ^         -> These are not the end of the string.
-  // }
-  // ```
-  for (let i = startIdx + 1; i < input.length; i++) {
-    peekChar = input.charCodeAt(i)
-
-    // Current character is a `\` therefore the next character is escaped.
-    if (peekChar === BACKSLASH) {
-      i += 1
-    }
-
-    // End of the string.
-    else if (peekChar === quoteChar) {
-      return i
-    }
-
-    // End of the line without ending the string but with a `;` at the end.
-    //
-    // E.g.:
-    //
-    // ```css
-    // .foo {
-    //   content: "This is a string with a;
-    //                                    ^ Missing "
-    // }
-    // ```
-    else if (
-      peekChar === SEMICOLON &&
-      (input.charCodeAt(i + 1) === LINE_BREAK ||
-        (input.charCodeAt(i + 1) === CARRIAGE_RETURN && input.charCodeAt(i + 2) === LINE_BREAK))
-    ) {
-      throw new CssSyntaxError(
-        `Unterminated string: ${input.slice(startIdx, i + 1) + String.fromCharCode(quoteChar)}`,
-        source ? [source, startIdx, i + 1] : null,
-      )
-    }
-
-    // End of the line without ending the string.
-    //
-    // E.g.:
-    //
-    // ```css
-    // .foo {
-    //   content: "This is a string with a
-    //                                    ^ Missing "
-    // }
-    // ```
-    else if (
-      peekChar === LINE_BREAK ||
-      (peekChar === CARRIAGE_RETURN && input.charCodeAt(i + 1) === LINE_BREAK)
-    ) {
-      throw new CssSyntaxError(
-        `Unterminated string: ${input.slice(startIdx, i) + String.fromCharCode(quoteChar)}`,
-        source ? [source, startIdx, i + 1] : null,
-      )
-    }
-  }
-
-  return startIdx
 }
diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts
index 7786790f6..bebd82a33 100644
--- a/packages/tailwindcss/src/design-system.ts
+++ b/packages/tailwindcss/src/design-system.ts
@@ -1,166 +1,57 @@
-import { Polyfills } from '.'
-import { optimizeAst, toCss, type AstNode } from './ast'
-import {
-  parseCandidate,
-  parseVariant,
-  printCandidate,
-  printVariant,
-  type Candidate,
-  type Variant,
-} from './candidate'
+import { toCss } from './ast'
+import { parseCandidate, parseVariant } from './candidate'
 import { compileAstNodes, compileCandidates } from './compile'
-import { substituteFunctions } from './css-functions'
-import {
-  canonicalizeCandidates,
-  getClassList,
-  getVariants,
-  type CanonicalizeOptions,
-  type ClassEntry,
-  type VariantEntry,
-} from './intellisense'
+import { getClassList, getVariants, type ClassEntry, type VariantEntry } from './intellisense'
 import { getClassOrder } from './sort'
-import type { SourceLocation } from './source-maps/source'
-import { Theme, ThemeOptions, type ThemeKey } from './theme'
-import { Utilities, createUtilities, withAlpha } from './utilities'
+import type { Theme } from './theme'
+import { Utilities, createUtilities } from './utilities'
 import { DefaultMap } from './utils/default-map'
-import { extractUsedVariables } from './utils/variables'
-import { Variants, createVariants, substituteAtVariant } from './variants'
-import { WalkAction, walk } from './walk'
-
-export const enum CompileAstFlags {
-  None = 0,
-  RespectImportant = 1 << 0,
-}
+import { Variants, createVariants } from './variants'
 
 export type DesignSystem = {
   theme: Theme
   utilities: Utilities
   variants: Variants
 
-  invalidCandidates: Set<string>
-
-  // Whether to mark utility declarations as !important
-  important: boolean
-
+  candidatesToCss(classes: string[]): (string | null)[]
   getClassOrder(classes: string[]): [string, bigint | null][]
   getClassList(): ClassEntry[]
   getVariants(): VariantEntry[]
 
-  parseCandidate(candidate: string): Readonly<Candidate>[]
-  parseVariant(variant: string): Readonly<Variant> | null
-  compileAstNodes(candidate: Candidate, flags?: CompileAstFlags): ReturnType<typeof compileAstNodes>
+  parseCandidate(candidate: string): ReturnType<typeof parseCandidate>
+  parseVariant(variant: string): ReturnType<typeof parseVariant>
+  compileAstNodes(candidate: string): ReturnType<typeof compileAstNodes>
 
-  printCandidate(candidate: Candidate): string
-  printVariant(variant: Variant): string
-
-  getVariantOrder(): Map<Variant, number>
-  resolveThemeValue(path: string, forceInline?: boolean): string | undefined
-
-  trackUsedVariables(raw: string): void
-  canonicalizeCandidates(candidates: string[], options?: CanonicalizeOptions): string[]
-
-  // Used by IntelliSense
-  candidatesToCss(classes: string[]): (string | null)[]
-  candidatesToAst(classes: string[]): AstNode[][]
-
-  // General purpose storage
-  storage: Record<symbol, unknown>
+  getUsedVariants(): ReturnType<typeof parseVariant>[]
 }
 
-export function buildDesignSystem(
-  theme: Theme,
-  utilitiesSrc?: SourceLocation | undefined,
-): DesignSystem {
+export function buildDesignSystem(theme: Theme): DesignSystem {
   let utilities = createUtilities(theme)
   let variants = createVariants(theme)
 
   let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem))
-  let cachedVariantOrder: Map<Variant, number> | null = null
-  let cachedVariantOrderSize = -1
-  let parsedCandidates = new DefaultMap((candidate) =>
-    Array.from(parseCandidate(candidate, designSystem)),
-  )
-
-  let compiledAstNodes = new DefaultMap<number>((flags) => {
-    return new DefaultMap<Candidate>((candidate) => {
-      let ast = compileAstNodes(candidate, designSystem, flags)
-
-      try {
-        let nodes = ast.map((value) => value.node)
-
-        // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
-        // properties (`[--my-var:theme(--color-red-500)]`) can contain function
-        // calls so we need evaluate any functions we find there that weren't in
-        // the source CSS.
-        substituteFunctions(nodes, designSystem)
-
-        // JS plugins might contain an `@variant` inside a generated utility
-        substituteAtVariant(nodes, designSystem)
-      } catch (err) {
-        // If substitution fails then the candidate likely contains a call to
-        // `theme()` that is invalid which may be because of incorrect usage,
-        // invalid arguments, or a theme key that does not exist.
-        return []
-      }
-
-      return ast
-    })
-  })
-
-  let trackUsedVariables = new DefaultMap((raw) => {
-    for (let variable of extractUsedVariables(raw)) {
-      theme.markUsedVariable(variable)
-    }
-  })
-
-  function candidatesToAst(classes: string[]): AstNode[][] {
-    let result: AstNode[][] = []
-
-    for (let className of classes) {
-      let wasValid = true
-
-      let { astNodes } = compileCandidates([className], designSystem, {
-        onInvalidCandidate() {
-          wasValid = false
-        },
-      })
-
-      if (utilitiesSrc) {
-        walk(astNodes, (node) => {
-          // We do this conditionally to preserve source locations from both
-          // `@utility` and `@custom-variant`. Even though generated nodes are
-          // cached this should be fine because `utilitiesNode.src` should not
-          // change without a full rebuild which destroys the cache.
-          node.src ??= utilitiesSrc
-          return WalkAction.Continue
-        })
-      }
-
-      // Disable all polyfills to not unnecessarily pollute IntelliSense output
-      astNodes = optimizeAst(astNodes, designSystem, Polyfills.None)
-
-      result.push(wasValid ? astNodes : [])
-    }
-
-    return result
-  }
-
-  function candidatesToCss(classes: string[]): (string | null)[] {
-    return candidatesToAst(classes).map((nodes) => {
-      return nodes.length > 0 ? toCss(nodes) : null
-    })
-  }
+  let parsedCandidates = new DefaultMap((candidate) => parseCandidate(candidate, designSystem))
+  let compiledAstNodes = new DefaultMap((candidate) => compileAstNodes(candidate, designSystem))
 
   let designSystem: DesignSystem = {
     theme,
     utilities,
     variants,
 
-    invalidCandidates: new Set(),
-    important: false,
+    candidatesToCss(classes: string[]) {
+      let result: (string | null)[] = []
 
-    candidatesToCss,
-    candidatesToAst,
+      for (let className of classes) {
+        let { astNodes } = compileCandidates([className], this)
+        if (astNodes.length === 0) {
+          result.push(null)
+        } else {
+          result.push(toCss(astNodes))
+        }
+      }
+
+      return result
+    },
 
     getClassOrder(classes) {
       return getClassOrder(this, classes)
@@ -178,83 +69,12 @@ export function buildDesignSystem(
     parseVariant(variant: string) {
       return parsedVariants.get(variant)
     },
-    compileAstNodes(candidate: Candidate, flags = CompileAstFlags.RespectImportant) {
-      return compiledAstNodes.get(flags).get(candidate)
+    compileAstNodes(candidate: string) {
+      return compiledAstNodes.get(candidate)
     },
-
-    printCandidate(candidate: Candidate) {
-      return printCandidate(designSystem, candidate)
+    getUsedVariants() {
+      return Array.from(parsedVariants.values())
     },
-    printVariant(variant: Variant) {
-      return printVariant(variant)
-    },
-
-    getVariantOrder() {
-      // parsedVariants only grows, so the cache should be reset only when the size changes
-      if (cachedVariantOrder !== null && cachedVariantOrderSize === parsedVariants.size) {
-        return cachedVariantOrder
-      }
-
-      let variants = Array.from(parsedVariants.values())
-      variants.sort((a, z) => this.variants.compare(a, z))
-
-      let order = new Map<Variant, number>()
-      let prevVariant: Variant | undefined = undefined
-      let index: number = 0
-
-      for (let variant of variants) {
-        if (variant === null) {
-          continue
-        }
-        // This variant is not the same order as the previous one
-        // so it goes into a new group
-        if (prevVariant !== undefined && this.variants.compare(prevVariant, variant) !== 0) {
-          index++
-        }
-
-        order.set(variant, index)
-        prevVariant = variant
-      }
-
-      cachedVariantOrder = order
-      cachedVariantOrderSize = parsedVariants.size
-
-      return order
-    },
-
-    resolveThemeValue(path: `${ThemeKey}` | `${ThemeKey}${string}`, forceInline: boolean = true) {
-      // Extract an eventual modifier from the path. e.g.:
-      // - "--color-red-500 / 50%" -> "50%"
-      let lastSlash = path.lastIndexOf('/')
-      let modifier: string | null = null
-      if (lastSlash !== -1) {
-        modifier = path.slice(lastSlash + 1).trim()
-        path = path.slice(0, lastSlash).trim() as ThemeKey
-      }
-
-      let themeValue =
-        theme.resolve(null, [path], forceInline ? ThemeOptions.INLINE : ThemeOptions.NONE) ??
-        undefined
-
-      // Apply the opacity modifier if present
-      if (modifier && themeValue) {
-        return withAlpha(themeValue, modifier)
-      }
-
-      return themeValue
-    },
-
-    trackUsedVariables(raw: string) {
-      trackUsedVariables.get(raw)
-    },
-
-    canonicalizeCandidates(candidates: string[], options?: CanonicalizeOptions) {
-      return canonicalizeCandidates(this, candidates, options)
-    },
-
-    // General purpose storage, each key has to be a unique symbol to avoid
-    // collisions.
-    storage: {},
   }
 
   return designSystem
diff --git a/packages/tailwindcss/src/expand-declaration.test.ts b/packages/tailwindcss/src/expand-declaration.test.ts
deleted file mode 100644
index eb3d5ffb2..000000000
--- a/packages/tailwindcss/src/expand-declaration.test.ts
+++ /dev/null
@@ -1,629 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { toCss } from './ast'
-import { SignatureFeatures } from './canonicalize-candidates'
-import { parse } from './css-parser'
-import { expandDeclaration } from './expand-declaration'
-import { walk, WalkAction } from './walk'
-
-const css = String.raw
-
-function expand(input: string, options: SignatureFeatures): string {
-  let ast = parse(input)
-
-  walk(ast, (node) => {
-    if (node.kind === 'declaration') {
-      let result = expandDeclaration(node, options)
-      if (result) return WalkAction.ReplaceSkip(result)
-    }
-  })
-
-  return toCss(ast)
-}
-
-describe('expand declarations', () => {
-  let options = SignatureFeatures.ExpandProperties
-
-  test('inset', () => {
-    let input = css`
-      .one {
-        inset: 10px;
-      }
-
-      .two {
-        inset: 10px 20px;
-      }
-
-      .three {
-        inset: 10px 20px 30px;
-      }
-
-      .four {
-        inset: 10px 20px 30px 40px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        top: 10px;
-        right: 10px;
-        bottom: 10px;
-        left: 10px;
-      }
-      .two {
-        top: 10px;
-        right: 20px;
-        bottom: 10px;
-        left: 20px;
-      }
-      .three {
-        top: 10px;
-        right: 20px;
-        bottom: 30px;
-        left: 20px;
-      }
-      .four {
-        top: 10px;
-        right: 20px;
-        bottom: 30px;
-        left: 40px;
-      }
-      "
-    `)
-  })
-
-  test('gap', () => {
-    let input = css`
-      .one {
-        gap: 10px;
-      }
-
-      .two {
-        gap: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        row-gap: 10px;
-        column-gap: 10px;
-      }
-      .two {
-        row-gap: 10px;
-        column-gap: 20px;
-      }
-      "
-    `)
-  })
-
-  test('border-width', () => {
-    let input = css`
-      .one {
-        border-width: 1px;
-      }
-
-      .two {
-        border-width: 1px 2px;
-      }
-
-      .three {
-        border-width: 1px 2px 3px;
-      }
-
-      .four {
-        border-width: 1px 2px 3px 4px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        border-top-width: 1px;
-        border-right-width: 1px;
-        border-bottom-width: 1px;
-        border-left-width: 1px;
-      }
-      .two {
-        border-top-width: 1px;
-        border-right-width: 2px;
-        border-bottom-width: 1px;
-        border-left-width: 2px;
-      }
-      .three {
-        border-top-width: 1px;
-        border-right-width: 2px;
-        border-bottom-width: 3px;
-        border-left-width: 2px;
-      }
-      .four {
-        border-top-width: 1px;
-        border-right-width: 2px;
-        border-bottom-width: 3px;
-        border-left-width: 4px;
-      }
-      "
-    `)
-  })
-
-  test('border-style', () => {
-    let input = css`
-      .one {
-        border-style: solid;
-      }
-
-      .two {
-        border-style: solid dashed;
-      }
-
-      .three {
-        border-style: solid dashed dotted;
-      }
-
-      .four {
-        border-style: solid dashed dotted double;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        border-top-style: solid;
-        border-right-style: solid;
-        border-bottom-style: solid;
-        border-left-style: solid;
-      }
-      .two {
-        border-top-style: solid;
-        border-right-style: dashed;
-        border-bottom-style: solid;
-        border-left-style: dashed;
-      }
-      .three {
-        border-top-style: solid;
-        border-right-style: dashed;
-        border-bottom-style: dotted;
-        border-left-style: dashed;
-      }
-      .four {
-        border-top-style: solid;
-        border-right-style: dashed;
-        border-bottom-style: dotted;
-        border-left-style: double;
-      }
-      "
-    `)
-  })
-
-  test('border-color', () => {
-    let input = css`
-      .one {
-        border-color: red;
-      }
-
-      .two {
-        border-color: red green;
-      }
-
-      .three {
-        border-color: red green blue;
-      }
-
-      .four {
-        border-color: red green blue black;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        border-top-color: red;
-        border-right-color: red;
-        border-bottom-color: red;
-        border-left-color: red;
-      }
-      .two {
-        border-top-color: red;
-        border-right-color: green;
-        border-bottom-color: red;
-        border-left-color: green;
-      }
-      .three {
-        border-top-color: red;
-        border-right-color: green;
-        border-bottom-color: blue;
-        border-left-color: green;
-      }
-      .four {
-        border-top-color: red;
-        border-right-color: green;
-        border-bottom-color: blue;
-        border-left-color: black;
-      }
-      "
-    `)
-  })
-
-  test('scroll-margin', () => {
-    let input = css`
-      .one {
-        scroll-margin: 1px;
-      }
-
-      .two {
-        scroll-margin: 1px 2px;
-      }
-
-      .three {
-        scroll-margin: 1px 2px 3px;
-      }
-
-      .four {
-        scroll-margin: 1px 2px 3px 4px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        scroll-margin-top: 1px;
-        scroll-margin-right: 1px;
-        scroll-margin-bottom: 1px;
-        scroll-margin-left: 1px;
-      }
-      .two {
-        scroll-margin-top: 1px;
-        scroll-margin-right: 2px;
-        scroll-margin-bottom: 1px;
-        scroll-margin-left: 2px;
-      }
-      .three {
-        scroll-margin-top: 1px;
-        scroll-margin-right: 2px;
-        scroll-margin-bottom: 3px;
-        scroll-margin-left: 2px;
-      }
-      .four {
-        scroll-margin-top: 1px;
-        scroll-margin-right: 2px;
-        scroll-margin-bottom: 3px;
-        scroll-margin-left: 4px;
-      }
-      "
-    `)
-  })
-
-  test('scroll-padding', () => {
-    let input = css`
-      .one {
-        scroll-padding: 1px;
-      }
-
-      .two {
-        scroll-padding: 1px 2px;
-      }
-
-      .three {
-        scroll-padding: 1px 2px 3px;
-      }
-
-      .four {
-        scroll-padding: 1px 2px 3px 4px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        scroll-padding-top: 1px;
-        scroll-padding-right: 1px;
-        scroll-padding-bottom: 1px;
-        scroll-padding-left: 1px;
-      }
-      .two {
-        scroll-padding-top: 1px;
-        scroll-padding-right: 2px;
-        scroll-padding-bottom: 1px;
-        scroll-padding-left: 2px;
-      }
-      .three {
-        scroll-padding-top: 1px;
-        scroll-padding-right: 2px;
-        scroll-padding-bottom: 3px;
-        scroll-padding-left: 2px;
-      }
-      .four {
-        scroll-padding-top: 1px;
-        scroll-padding-right: 2px;
-        scroll-padding-bottom: 3px;
-        scroll-padding-left: 4px;
-      }
-      "
-    `)
-  })
-
-  test('overflow', () => {
-    let input = css`
-      .one {
-        overflow: clip;
-      }
-
-      .two {
-        overflow: hidden visible;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        overflow-x: clip;
-        overflow-y: clip;
-      }
-      .two {
-        overflow-x: hidden;
-        overflow-y: visible;
-      }
-      "
-    `)
-  })
-
-  test('overscroll-behavior', () => {
-    let input = css`
-      .one {
-        overscroll-behavior: none;
-      }
-
-      .two {
-        overscroll-behavior: auto contain;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        overscroll-behavior-x: none;
-        overscroll-behavior-y: none;
-      }
-      .two {
-        overscroll-behavior-x: auto;
-        overscroll-behavior-y: contain;
-      }
-      "
-    `)
-  })
-
-  test('expansion with `!important`', () => {
-    let input = css`
-      .one {
-        inset: 10px;
-      }
-
-      .two {
-        inset: 10px 20px;
-      }
-
-      .three {
-        inset: 10px 20px 30px !important;
-      }
-
-      .four {
-        inset: 10px 20px 30px 40px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".one {
-        top: 10px;
-        right: 10px;
-        bottom: 10px;
-        left: 10px;
-      }
-      .two {
-        top: 10px;
-        right: 20px;
-        bottom: 10px;
-        left: 20px;
-      }
-      .three {
-        top: 10px !important;
-        right: 20px !important;
-        bottom: 30px !important;
-        left: 20px !important;
-      }
-      .four {
-        top: 10px;
-        right: 20px;
-        bottom: 30px;
-        left: 40px;
-      }
-      "
-    `)
-  })
-})
-
-describe('expand logical properties', () => {
-  let options = SignatureFeatures.ExpandProperties | SignatureFeatures.LogicalToPhysical
-
-  test('margin-inline', () => {
-    let input = css`
-      .example {
-        margin-inline: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        margin-left: 10px;
-        margin-right: 20px;
-      }
-      "
-    `)
-  })
-
-  test('margin-block', () => {
-    let input = css`
-      .example {
-        margin-block: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        margin-top: 10px;
-        margin-bottom: 20px;
-      }
-      "
-    `)
-  })
-
-  test('padding-inline', () => {
-    let input = css`
-      .example {
-        padding-inline: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        padding-left: 10px;
-        padding-right: 20px;
-      }
-      "
-    `)
-  })
-
-  test('padding-block', () => {
-    let input = css`
-      .example {
-        padding-block: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        padding-top: 10px;
-        padding-bottom: 20px;
-      }
-      "
-    `)
-  })
-
-  test('scroll-margin-inline', () => {
-    let input = css`
-      .example {
-        scroll-margin-inline: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        scroll-margin-left: 10px;
-        scroll-margin-right: 20px;
-      }
-      "
-    `)
-  })
-
-  test('scroll-margin-block', () => {
-    let input = css`
-      .example {
-        scroll-margin-block: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        scroll-margin-top: 10px;
-        scroll-margin-bottom: 20px;
-      }
-      "
-    `)
-  })
-
-  test('scroll-padding-inline', () => {
-    let input = css`
-      .example {
-        scroll-padding-inline: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        scroll-padding-left: 10px;
-        scroll-padding-right: 20px;
-      }
-      "
-    `)
-  })
-
-  test('scroll-padding-block', () => {
-    let input = css`
-      .example {
-        scroll-padding-block: 10px 20px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        scroll-padding-top: 10px;
-        scroll-padding-bottom: 20px;
-      }
-      "
-    `)
-  })
-
-  test('border-inline-width', () => {
-    let input = css`
-      .example {
-        border-inline-width: 1px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        border-left-width: 1px;
-        border-right-width: 1px;
-      }
-      "
-    `)
-  })
-
-  test('border-block-width', () => {
-    let input = css`
-      .example {
-        border-block-width: 1px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        border-bottom-width: 1px;
-        border-top-width: 1px;
-      }
-      "
-    `)
-  })
-
-  test('border-inline-style', () => {
-    let input = css`
-      .example {
-        border-inline-style: 1px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        border-left-style: 1px;
-        border-right-style: 1px;
-      }
-      "
-    `)
-  })
-
-  test('border-block-style', () => {
-    let input = css`
-      .example {
-        border-block-style: 1px;
-      }
-    `
-
-    expect(expand(input, options)).toMatchInlineSnapshot(`
-      ".example {
-        border-bottom-style: 1px;
-        border-top-style: 1px;
-      }
-      "
-    `)
-  })
-})
diff --git a/packages/tailwindcss/src/expand-declaration.ts b/packages/tailwindcss/src/expand-declaration.ts
deleted file mode 100644
index 7cef98952..000000000
--- a/packages/tailwindcss/src/expand-declaration.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { decl, type AstNode } from './ast'
-import { SignatureFeatures } from './canonicalize-candidates'
-import { segment } from './utils/segment'
-
-function createPrefixedQuad(
-  prefix: string,
-  t = 'top',
-  r = 'right',
-  b = 'bottom',
-  l = 'left',
-): Record<number, [prop: string, index: number][]> {
-  return createBareQuad(`${prefix}-${t}`, `${prefix}-${r}`, `${prefix}-${b}`, `${prefix}-${l}`)
-}
-
-// prettier-ignore
-function createBareQuad(t = 'top', r = 'right', b = 'bottom', l = 'left'): Record<number, [prop: string, index: number][]> {
-  return {
-    1: [[t, 0], [r, 0], [b, 0], [l, 0]],
-    2: [[t, 0], [r, 1], [b, 0], [l, 1]],
-    3: [[t, 0], [r, 1], [b, 2], [l, 1]],
-    4: [[t, 0], [r, 1], [b, 2], [l, 3]],
-  } as const;
-}
-
-// prettier-ignore
-function createPair(lhs: string, rhs: string): Record<number, [prop: string, index: number][]> {
-  return {
-    1: [[lhs, 0], [rhs, 0]],
-    2: [[lhs, 0], [rhs, 1]],
-  } as const;
-}
-
-// Depending on the length of the value, map to different properties
-let VARIADIC_EXPANSION_MAP: Record<string, Record<number, [prop: string, index: number][]>> = {
-  inset: createBareQuad(),
-  margin: createPrefixedQuad('margin'),
-  padding: createPrefixedQuad('padding'),
-  'scroll-margin': createPrefixedQuad('scroll-margin'),
-  'scroll-padding': createPrefixedQuad('scroll-padding'),
-  'border-width': createPrefixedQuad(
-    'border',
-    'top-width',
-    'right-width',
-    'bottom-width',
-    'left-width',
-  ),
-  'border-style': createPrefixedQuad(
-    'border',
-    'top-style',
-    'right-style',
-    'bottom-style',
-    'left-style',
-  ),
-  'border-color': createPrefixedQuad(
-    'border',
-    'top-color',
-    'right-color',
-    'bottom-color',
-    'left-color',
-  ),
-  gap: createPair('row-gap', 'column-gap'),
-  overflow: createPair('overflow-x', 'overflow-y'),
-  'overscroll-behavior': createPair('overscroll-behavior-x', 'overscroll-behavior-y'),
-}
-
-// Depending on the length of the value, map to different properties
-let VARIADIC_LOGICAL_EXPANSION_MAP: Record<
-  string,
-  Record<number, [prop: string, index: number][]>
-> = {
-  'inset-block': createPair('top', 'bottom'),
-  'inset-inline': createPair('left', 'right'),
-  'margin-block': createPair('margin-top', 'margin-bottom'),
-  'margin-inline': createPair('margin-left', 'margin-right'),
-  'padding-block': createPair('padding-top', 'padding-bottom'),
-  'padding-inline': createPair('padding-left', 'padding-right'),
-  'scroll-margin-block': createPair('scroll-margin-top', 'scroll-margin-bottom'),
-  'scroll-margin-inline': createPair('scroll-margin-left', 'scroll-margin-right'),
-  'scroll-padding-block': createPair('scroll-padding-top', 'scroll-padding-bottom'),
-  'scroll-padding-inline': createPair('scroll-padding-left', 'scroll-padding-right'),
-}
-
-// The entire value is mapped to each property
-let LOGICAL_EXPANSION_MAP: Record<string, string[]> = {
-  'border-block': ['border-bottom', 'border-top'],
-  'border-block-color': ['border-bottom-color', 'border-top-color'],
-  'border-block-style': ['border-bottom-style', 'border-top-style'],
-  'border-block-width': ['border-bottom-width', 'border-top-width'],
-  'border-inline': ['border-left', 'border-right'],
-  'border-inline-color': ['border-left-color', 'border-right-color'],
-  'border-inline-style': ['border-left-style', 'border-right-style'],
-  'border-inline-width': ['border-left-width', 'border-right-width'],
-}
-
-export function expandDeclaration(
-  node: Extract<AstNode, { kind: 'declaration' }>,
-  options: SignatureFeatures,
-): AstNode[] | null {
-  if (options & SignatureFeatures.LogicalToPhysical) {
-    if (node.property in VARIADIC_LOGICAL_EXPANSION_MAP) {
-      let args = segment(node.value!, ' ')
-      return VARIADIC_LOGICAL_EXPANSION_MAP[node.property][args.length]?.map(([prop, index]) => {
-        return decl(prop, args[index], node.important)
-      })
-    }
-
-    if (node.property in LOGICAL_EXPANSION_MAP) {
-      return LOGICAL_EXPANSION_MAP[node.property]?.map((prop) => {
-        return decl(prop, node.value!, node.important)
-      })
-    }
-  }
-
-  if (node.property in VARIADIC_EXPANSION_MAP) {
-    let args = segment(node.value!, ' ')
-    return VARIADIC_EXPANSION_MAP[node.property][args.length]?.map(([prop, index]) => {
-      return decl(prop, args[index], node.important)
-    })
-  }
-
-  return null
-}
diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts
deleted file mode 100644
index a3c9447fc..000000000
--- a/packages/tailwindcss/src/important.test.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { expect, test } from 'vitest'
-import { run } from './test-utils/run'
-
-const css = String.raw
-
-test('Utilities can be wrapped in a selector', async () => {
-  // This is the v4 equivalent of `important: "#app"` from v3
-  expect(
-    await run(
-      ['underline', 'hover:line-through'],
-      css`
-        #app {
-          @tailwind utilities;
-        }
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    #app .underline {
-      text-decoration-line: underline;
-    }
-
-    @media (hover: hover) {
-      #app .hover\\:line-through:hover {
-        text-decoration-line: line-through;
-      }
-    }
-    "
-  `)
-})
-
-test('Utilities can be marked with important', async () => {
-  // This is the v4 equivalent of `important: true` from v3
-  expect(
-    await run(
-      ['underline', 'hover:line-through'],
-      css`
-        @import 'tailwindcss/utilities' important;
-      `,
-      {
-        loadStylesheet: async (_id: string, base: string) => ({
-          base,
-          content: '@tailwind utilities;',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .underline {
-      text-decoration-line: underline !important;
-    }
-
-    @media (hover: hover) {
-      .hover\\:line-through:hover {
-        text-decoration-line: line-through !important;
-      }
-    }
-    "
-  `)
-})
-
-test('Utilities can be wrapped with a selector and marked as important', async () => {
-  // This does not have a direct equivalent in v3 but works as a consequence of
-  // the new APIs
-  expect(
-    await run(
-      ['underline', 'hover:line-through'],
-      css`
-        @media important {
-          #app {
-            @tailwind utilities;
-          }
-        }
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    #app .underline {
-      text-decoration-line: underline !important;
-    }
-
-    @media (hover: hover) {
-      #app .hover\\:line-through:hover {
-        text-decoration-line: line-through !important;
-      }
-    }
-    "
-  `)
-})
-
-test('variables in utilities should not be marked as important', async () => {
-  expect(
-    await run(
-      ['ease-out!', 'z-10!'],
-      css`
-        @theme {
-          --ease-out: cubic-bezier(0, 0, 0.2, 1);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-ease: initial;
-        }
-      }
-    }
-
-    :root, :host {
-      --ease-out: cubic-bezier(0, 0, .2, 1);
-    }
-
-    .z-10\\! {
-      z-index: 10 !important;
-    }
-
-    .ease-out\\! {
-      --tw-ease: var(--ease-out) !important;
-      transition-timing-function: var(--ease-out) !important;
-    }
-
-    @property --tw-ease {
-      syntax: "*";
-      inherits: false
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/index.bench.ts b/packages/tailwindcss/src/index.bench.ts
index 0ca33fde1..6ec69f2f6 100644
--- a/packages/tailwindcss/src/index.bench.ts
+++ b/packages/tailwindcss/src/index.bench.ts
@@ -1,4 +1,4 @@
-import { Scanner } from '@tailwindcss/oxide'
+import { scanDir } from '@tailwindcss/oxide'
 import { bench } from 'vitest'
 import { compile } from '.'
 
@@ -7,12 +7,9 @@ const root = process.env.FOLDER || process.cwd()
 const css = String.raw
 
 bench('compile', async () => {
-  let scanner = new Scanner({ sources: [{ base: root, pattern: '**/*', negated: true }] })
-  let candidates = scanner.scan()
+  let { candidates } = scanDir({ base: root, globs: true })
 
-  let { build } = await compile(css`
+  compile(css`
     @tailwind utilities;
-  `)
-
-  build(candidates)
+  `).build(candidates)
 })
diff --git a/packages/tailwindcss/src/index.cts b/packages/tailwindcss/src/index.cts
deleted file mode 100644
index fc4b691f9..000000000
--- a/packages/tailwindcss/src/index.cts
+++ /dev/null
@@ -1,14 +0,0 @@
-import postcssPlugin, * as tailwindcss from './index.ts'
-
-// This file exists so that `index.ts` can be written one time but be
-// compatible with both CJS and ESM. Without it we get a `.default` export when
-// using `require` in CJS.
-
-for (let key in tailwindcss) {
-  if (key === 'default') continue
-  // @ts-ignore
-  postcssPlugin[key] = tailwindcss[key]
-}
-
-// @ts-ignore
-export = postcssPlugin
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 7f4a0eef3..8f9ca909f 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -1,19 +1,14 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { describe, expect, it, test } from 'vitest'
-import { compile, Features, Polyfills } from '.'
-import { cartesian } from './cartesian'
-import type { PluginAPI } from './compat/plugin-api'
-import plugin from './plugin'
 import { compileCss, run } from './test-utils/run'
 
 const css = String.raw
 
 describe('compiling CSS', () => {
-  test('`@tailwind utilities` is replaced with the generated utility classes', async () => {
+  test('`@tailwind utilities` is replaced with the generated utility classes', () => {
     expect(
-      await run(
-        ['flex', 'md:grid', 'hover:underline', 'dark:bg-black'],
+      compileCss(
         css`
           @theme {
             --color-black: #000;
@@ -24,11 +19,12 @@ describe('compiling CSS', () => {
             @tailwind utilities;
           }
         `,
+        ['flex', 'md:grid', 'hover:underline', 'dark:bg-black'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --color-black: #000;
+        --breakpoint-md: 768px;
       }
 
       @layer utilities {
@@ -36,13 +32,11 @@ describe('compiling CSS', () => {
           display: flex;
         }
 
-        @media (hover: hover) {
-          .hover\\:underline:hover {
-            text-decoration-line: underline;
-          }
+        .hover\\:underline:hover {
+          text-decoration-line: underline;
         }
 
-        @media (min-width: 768px) {
+        @media (width >= 768px) {
           .md\\:grid {
             display: grid;
           }
@@ -50,18 +44,16 @@ describe('compiling CSS', () => {
 
         @media (prefers-color-scheme: dark) {
           .dark\\:bg-black {
-            background-color: var(--color-black);
+            background-color: var(--color-black, #000);
           }
         }
-      }
-      "
+      }"
     `)
   })
 
   test('that only CSS variables are allowed', () => {
-    return expect(
-      run(
-        ['bg-primary'],
+    expect(() =>
+      compileCss(
         css`
           @theme {
             --color-primary: red;
@@ -71,8 +63,9 @@ describe('compiling CSS', () => {
           }
           @tailwind utilities;
         `,
+        ['bg-primary'],
       ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+    ).toThrowErrorMatchingInlineSnapshot(`
       [Error: \`@theme\` blocks must only contain custom properties or \`@keyframes\`.
 
         @theme {
@@ -84,305 +77,75 @@ describe('compiling CSS', () => {
     `)
   })
 
-  test('`@tailwind utilities` is only processed once', async () => {
+  test('`@tailwind utilities` is only processed once', () => {
     expect(
-      await run(
-        ['flex', 'grid'],
+      compileCss(
         css`
           @tailwind utilities;
           @tailwind utilities;
         `,
+        ['flex', 'grid'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      .flex {
+      ".flex {
         display: flex;
       }
 
       .grid {
         display: grid;
-      }
-      "
+      }"
     `)
   })
 
-  test('`@tailwind utilities` is replaced by utilities using the default theme', async () => {
+  test('`@tailwind utilities` is replaced by utilities using the default theme', () => {
     let defaultTheme = fs.readFileSync(path.resolve(__dirname, '..', 'theme.css'), 'utf-8')
 
     expect(
-      await run(
-        ['bg-red-500', 'w-4', 'sm:flex', 'shadow-sm'],
+      compileCss(
         css`
           ${defaultTheme}
           @tailwind utilities;
         `,
+        ['bg-red-500', 'w-4', 'sm:flex', 'shadow'],
       ),
     ).toMatchSnapshot()
   })
-
-  test('prefix all CSS variables inside preflight', async () => {
-    expect(
-      await run(
-        ['font-mono'],
-        css`
-          @import 'tailwindcss' prefix(tw);
-          @tailwind utilities;
-        `,
-        {
-          async loadStylesheet(id) {
-            return {
-              path: '',
-              base: '',
-              content: fs.readFileSync(
-                path.resolve(__dirname, '..', id === 'tailwindcss' ? 'index.css' : id),
-                'utf-8',
-              ),
-            }
-          },
-        },
-      ),
-    ).toMatchSnapshot()
-  })
-
-  test('unescapes underscores to spaces inside arbitrary values except for `url()` and first argument of `var()` and `theme()`', async () => {
-    expect(
-      await run(
-        [
-          'bg-[no-repeat_url(./my_file.jpg)]',
-          'ml-[var(--spacing-1_5,_var(--spacing-2_5,_1rem))]',
-          'ml-[theme(--spacing-1_5,theme(--spacing-2_5,_1rem)))]',
-        ],
-        css`
-          @theme {
-            --spacing-1_5: 1.5rem;
-            --spacing-2_5: 2.5rem;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing-1_5: 1.5rem;
-        --spacing-2_5: 2.5rem;
-      }
-
-      .ml-\\[theme\\(--spacing-1_5\\,theme\\(--spacing-2_5\\,_1rem\\)\\)\\)\\] {
-        margin-left: 1.5rem;
-      }
-
-      .ml-\\[var\\(--spacing-1_5\\,_var\\(--spacing-2_5\\,_1rem\\)\\)\\] {
-        margin-left: var(--spacing-1_5, var(--spacing-2_5, 1rem));
-      }
-
-      .bg-\\[no-repeat_url\\(\\.\\/my_file\\.jpg\\)\\] {
-        background-color: no-repeat url("./my_file.jpg");
-      }
-      "
-    `)
-  })
-
-  test('unescapes theme variables and handles dots as underscore', async () => {
-    expect(
-      await run(
-        ['m-1.5', 'm-2.5', 'm-2_5', 'm-3.5', 'm-foo/bar'],
-        css`
-          @theme {
-            --spacing-*: initial;
-            --spacing-1\.5: 1.5px;
-            --spacing-2_5: 2.5px;
-            --spacing-3\.5: 3.5px;
-            --spacing-3_5: 3.5px;
-            --spacing-foo\/bar: 3rem;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing-1\\.5: 1.5px;
-        --spacing-2_5: 2.5px;
-        --spacing-3\\.5: 3.5px;
-        --spacing-foo\\/bar: 3rem;
-      }
-
-      .m-1\\.5 {
-        margin: var(--spacing-1\\.5);
-      }
-
-      .m-2\\.5, .m-2_5 {
-        margin: var(--spacing-2_5);
-      }
-
-      .m-3\\.5 {
-        margin: var(--spacing-3\\.5);
-      }
-
-      .m-foo\\/bar {
-        margin: var(--spacing-foo\\/bar);
-      }
-      "
-    `)
-  })
-
-  test('adds vendor prefixes', async () => {
-    expect(await run(['[text-size-adjust:none]'])).toMatchInlineSnapshot(`
-      "
-      .\\[text-size-adjust\\:none\\] {
-        -webkit-text-size-adjust: none;
-        -moz-text-size-adjust: none;
-        text-size-adjust: none;
-      }
-      "
-    `)
-  })
 })
 
-describe('arbitrary properties', () => {
-  it('should generate arbitrary properties', async () => {
-    expect(await run(['[color:red]'])).toMatchInlineSnapshot(`
-      "
-      .\\[color\\:red\\] {
+describe('arbitrary prpoerties', () => {
+  it('should generate arbitrary properties', () => {
+    expect(run(['[color:red]'])).toMatchInlineSnapshot(`
+      ".\\[color\\:red\\] {
         color: red;
-      }
-      "
+      }"
     `)
   })
 
-  it('should generate arbitrary properties with modifiers', async () => {
-    expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
-      "
-      .\\[color\\:red\\]\\/50 {
-        color: oklab(62.7955% .224 .125 / .5);
-      }
-      "
+  it('should generate arbitrary properties with modifiers', () => {
+    expect(run(['[color:red]/50'])).toMatchInlineSnapshot(`
+      ".\\[color\\:red\\]\\/50 {
+        color: #ff000080;
+      }"
     `)
   })
 
-  it('should not generate arbitrary properties with invalid modifiers', async () => {
-    expect(await run(['[color:red]/not-a-percentage'])).toEqual('')
+  it('should not generate arbitrary properties with invalid modifiers', () => {
+    expect(run(['[color:red]/not-a-percentage'])).toMatchInlineSnapshot(`""`)
   })
 
-  it('should generate arbitrary properties with variables and with modifiers', async () => {
-    expect(await run(['[color:var(--my-color)]/50'])).toMatchInlineSnapshot(`
-      "
-      .\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        color: var(--my-color);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .\\[color\\:var\\(--my-color\\)\\]\\/50 {
-          color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        }
-      }
-      "
+  it('should generate arbitrary properties with variables and with modifiers', () => {
+    expect(run(['[color:var(--my-color)]/50'])).toMatchInlineSnapshot(`
+      ".\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        color: color-mix(in srgb, var(--my-color) 50%, transparent);
+      }"
     `)
   })
 })
 
 describe('@apply', () => {
-  it('@apply in @keyframes is not allowed', () => {
-    return expect(() =>
-      compileCss(css`
-        @keyframes foo {
-          0% {
-            @apply bg-red-500;
-          }
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: You cannot use \`@apply\` inside \`@keyframes\`.]`,
-    )
-  })
-
-  it('@apply referencing theme values without `@tailwind utilities` or `@reference` should error', () => {
-    return expect(() =>
-      compileCss(css`
-        .foo {
-          @apply p-2;
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: Cannot apply unknown utility class \`p-2\`. Are you using CSS modules or similar and missing \`@reference\`? https://tailwindcss.com/docs/functions-and-directives#reference-directive]`,
-    )
-  })
-
-  it('@apply referencing theme values with `@tailwind utilities` should work', async () => {
-    return expect(
-      await compileCss(
-        css`
-          @import 'tailwindcss';
-
-          .foo {
-            @apply p-2;
-          }
-        `,
-        {
-          async loadStylesheet() {
-            return {
-              path: '',
-              base: '/',
-              content: css`
-                @theme {
-                  --spacing: 0.25rem;
-                }
-                @tailwind utilities;
-              `,
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing: .25rem;
-      }
-
-      .foo {
-        padding: calc(var(--spacing) * 2);
-      }
-      "
-    `)
-  })
-
-  it('@apply referencing theme values with `@reference` should work', async () => {
-    return expect(
-      await compileCss(
-        css`
-          @reference "style.css";
-
-          .foo {
-            @apply p-2;
-          }
-        `,
-        {
-          async loadStylesheet() {
-            return {
-              path: '',
-              base: '/',
-              content: css`
-                @theme {
-                  --spacing: 0.25rem;
-                }
-                @tailwind utilities;
-              `,
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo {
-        padding: calc(var(--spacing, .25rem) * 2);
-      }
-      "
-    `)
-  })
-
-  it('should replace @apply with the correct result', async () => {
+  it('should replace @apply with the correct result', () => {
     expect(
-      await compileCss(css`
+      compileCss(css`
         @theme {
           --color-red-200: #fecaca;
           --color-red-500: #ef4444;
@@ -410,116 +173,67 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-translate-x: 0;
-            --tw-translate-y: 0;
-            --tw-translate-z: 0;
-          }
-        }
-      }
-
-      :root, :host {
+      ":root {
         --color-red-200: #fecaca;
         --color-red-500: #ef4444;
         --color-blue-500: #3b82f6;
         --color-green-200: #bbf7d0;
         --color-green-500: #22c55e;
+        --breakpoint-md: 768px;
         --animate-spin: spin 1s linear infinite;
       }
 
       .foo {
         --tw-translate-x: 100%;
         translate: var(--tw-translate-x) var(--tw-translate-y);
-        animation: var(--animate-spin);
-        background-color: var(--color-red-500);
+        animation: var(--animate-spin, spin 1s linear infinite);
+        background-color: var(--color-red-500, #ef4444);
         text-decoration-line: underline;
       }
 
-      @media (hover: hover) {
-        .foo:hover {
-          background-color: var(--color-blue-500);
-        }
+      .foo:hover {
+        background-color: var(--color-blue-500, #3b82f6);
       }
 
-      @media (min-width: 768px) {
+      @media (width >= 768px) {
         .foo {
-          background-color: var(--color-green-500);
+          background-color: var(--color-green-500, #22c55e);
         }
       }
 
       .foo:hover:focus {
-        background-color: var(--color-red-200);
+        background-color: var(--color-red-200, #fecaca);
       }
 
-      @media (min-width: 768px) {
+      @media (width >= 768px) {
         .foo:hover:focus {
-          background-color: var(--color-green-200);
+          background-color: var(--color-green-200, #bbf7d0);
         }
       }
 
-      @property --tw-translate-x {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0;
-      }
-
-      @property --tw-translate-y {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0;
-      }
-
-      @property --tw-translate-z {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0;
-      }
-
       @keyframes spin {
         to {
           transform: rotate(360deg);
         }
       }
-      "
-    `)
-  })
 
-  it('should replace @apply with the correct result inside imported stylesheets', async () => {
-    expect(
-      await compileCss(
-        css`
-          @import './bar.css';
-          @tailwind utilities;
-        `,
-        {
-          async loadStylesheet() {
-            return {
-              path: '',
-              base: '/bar.css',
-              content: css`
-                .foo {
-                  @apply underline;
-                }
-              `,
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo {
-        text-decoration-line: underline;
+      @property --tw-translate-x {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
       }
-      "
+
+      @property --tw-translate-y {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }"
     `)
   })
 
-  it('should @apply in order the utilities would be sorted in if they were used in HTML', async () => {
+  it('should @apply in order the utilities would be sorted in if they were used in HTML', () => {
     expect(
-      await compileCss(css`
+      compileCss(css`
         @tailwind utilities;
 
         .foo {
@@ -531,109 +245,51 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-
-      .foo, .bar {
+      ".foo, .bar {
         --tw-content: "b";
         content: var(--tw-content);
+        content: var(--tw-content);
       }
 
       @property --tw-content {
         syntax: "*";
         inherits: false;
         initial-value: "";
-      }
-      "
+      }"
     `)
   })
 
-  it('@apply does not cache important state', async () => {
-    expect(
-      await compileCss(css`
-        .c1 {
-          @apply leading-none;
-        }
-        .c2 {
-          @apply leading-none!;
-        }
-        .c3 {
-          @apply leading-none;
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-leading: initial;
-          }
-        }
-      }
-
-      .c1 {
-        --tw-leading: 1;
-        line-height: 1;
-      }
-
-      .c2 {
-        --tw-leading: 1 !important;
-        line-height: 1 !important;
-      }
-
-      .c3 {
-        --tw-leading: 1;
-        line-height: 1;
-      }
-
-      @property --tw-leading {
-        syntax: "*";
-        inherits: false
-      }
-      "
-    `)
-  })
-
-  it('should error when using @apply with a utility that does not exist', async () => {
-    await expect(
-      compile(css`
+  it('should error when using @apply with a utility that does not exist', () => {
+    expect(() =>
+      compileCss(css`
         @tailwind utilities;
 
         .foo {
           @apply bg-not-found;
         }
       `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: Cannot apply unknown utility class \`bg-not-found\`. Are you using CSS modules or similar and missing \`@reference\`? https://tailwindcss.com/docs/functions-and-directives#reference-directive]`,
+    ).toThrowErrorMatchingInlineSnapshot(
+      `[Error: Cannot apply unknown utility class: bg-not-found]`,
     )
   })
 
-  it('should error when using @apply with a variant that does not exist', async () => {
-    await expect(
-      compile(css`
+  it('should error when using @apply with a variant that does not exist', () => {
+    expect(() =>
+      compileCss(css`
         @tailwind utilities;
-        @theme {
-          --color-red-500: red;
-        }
 
         .foo {
-          @apply hocus:hover:pocus:bg-red-500;
+          @apply hocus:bg-red-500;
         }
       `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: Cannot apply utility class \`hocus:hover:pocus:bg-red-500\` because the \`hocus\` and \`pocus\` variants do not exist.]`,
+    ).toThrowErrorMatchingInlineSnapshot(
+      `[Error: Cannot apply unknown utility class: hocus:bg-red-500]`,
     )
   })
 
-  it('should not error with trailing whitespace', async () => {
+  it('should not error with trailing whitespace', () => {
     expect(
-      await compileCss(`
+      compileCss(`
         @tailwind utilities;
 
         .foo {
@@ -641,448 +297,101 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "
-      .foo {
+      ".foo {
         display: flex;
-      }
-      "
+      }"
     `)
   })
-
-  it('should be possible to apply a custom utility', async () => {
-    expect(
-      await compileCss(css`
-        @utility bar {
-          &:before {
-            content: 'bar';
-          }
-        }
-
-        .foo {
-          /* Baz is defined after this rule, but should work */
-          @apply bar baz;
-        }
-
-        @utility baz {
-          &:after {
-            content: 'baz';
-          }
-        }
-
-        @tailwind utilities;
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo:before {
-        content: "bar";
-      }
-
-      .foo:after {
-        content: "baz";
-      }
-      "
-    `)
-  })
-
-  it('should recursively apply with custom `@utility`, which is used before it is defined', async () => {
-    expect(
-      await run(
-        ['a', 'b', 'c', 'flex', 'my-flex'],
-        css`
-          @tailwind utilities;
-
-          @layer base {
-            body {
-              @apply a;
-            }
-          }
-
-          @utility a {
-            @apply b;
-          }
-
-          @utility b {
-            @apply focus:c;
-          }
-
-          @utility c {
-            @apply my-flex!;
-          }
-
-          @utility my-flex {
-            @apply flex;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .a:focus, .b:focus, .c {
-        display: flex !important;
-      }
-
-      .flex, .my-flex {
-        display: flex;
-      }
-
-      @layer base {
-        body:focus {
-          display: flex !important;
-        }
-      }
-      "
-    `)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/16935
-  it('should not swallow @utility declarations when @apply is used in nested rules', async () => {
-    expect(
-      await run(
-        ['custom-utility'],
-        css`
-          @tailwind utilities;
-
-          .ignore-me {
-            @apply underline;
-            div {
-              @apply custom-utility;
-            }
-          }
-
-          @utility custom-utility {
-            @apply flex;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .custom-utility {
-        display: flex;
-      }
-
-      .ignore-me {
-        text-decoration-line: underline;
-      }
-
-      .ignore-me div {
-        display: flex;
-      }
-      "
-    `)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/17924
-  it('should correctly apply nested usages of @apply when one @utility applies another', async () => {
-    expect(
-      await run(
-        ['foo', 'test', 'test2'],
-        css`
-          @theme {
-            --color-green-500: green;
-            --color-red-500: red;
-            --color-indigo-500: indigo;
-          }
-
-          @tailwind utilities;
-
-          @utility test2 {
-            @apply test;
-          }
-
-          @utility test {
-            @apply bg-green-500;
-            &:hover {
-              @apply bg-red-500;
-            }
-            &:disabled {
-              @apply bg-indigo-500;
-            }
-          }
-
-          .foo {
-            @apply test2;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-green-500: green;
-        --color-red-500: red;
-        --color-indigo-500: indigo;
-      }
-
-      .test {
-        background-color: var(--color-green-500);
-      }
-
-      .test:hover {
-        background-color: var(--color-red-500);
-      }
-
-      .test:disabled {
-        background-color: var(--color-indigo-500);
-      }
-
-      .test2 {
-        background-color: var(--color-green-500);
-      }
-
-      .test2:hover {
-        background-color: var(--color-red-500);
-      }
-
-      .test2:disabled {
-        background-color: var(--color-indigo-500);
-      }
-
-      .foo {
-        background-color: var(--color-green-500);
-      }
-
-      .foo:hover {
-        background-color: var(--color-red-500);
-      }
-
-      .foo:disabled {
-        background-color: var(--color-indigo-500);
-      }
-      "
-    `)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/18400
-  it('should ignore the design systems `important` flag when using @apply', async () => {
-    expect(
-      await run(
-        ['flex'],
-        css`
-          @import 'tailwindcss/utilities' important;
-          .flex-explicitly-important {
-            @apply flex!;
-          }
-          .flex-not-important {
-            @apply flex;
-          }
-        `,
-        {
-          async loadStylesheet(_, base) {
-            return {
-              content: '@tailwind utilities;',
-              base,
-              path: '',
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .flex, .flex-explicitly-important {
-        display: flex !important;
-      }
-
-      .flex-not-important {
-        display: flex;
-      }
-      "
-    `)
-  })
-
-  it('should be usable with CSS mixins', async () => {
-    let input = css`
-      .foo {
-        /* Utility usage */
-        @apply underline;
-
-        /* CSS mixin usage */
-        @apply --my-mixin-1;
-        @apply --my-mixin-1();
-        @apply --my-mixin-1 --my-mixin-2;
-        @apply --my-mixin-1() --my-mixin-2();
-        @apply --my-mixin-3 {
-          color: red;
-        }
-      }
-    `
-
-    expect(await compileCss(input)).toMatchInlineSnapshot(`
-      "
-      .foo {
-        text-decoration-line: underline;
-        @apply --my-mixin-1;
-        @apply --my-mixin-1();
-        @apply --my-mixin-1 --my-mixin-2;
-        @apply --my-mixin-1() --my-mixin-2();
-        @apply --my-mixin-3 {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  it('should error when trying to use mixins and utilities together', async () => {
-    await expect(
-      compile(css`
-        .foo {
-          @apply underline --my-mixin-1;
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: You cannot use \`@apply\` with both mixins and utilities. Please move \`@apply --my-mixin-1\` into a separate rule.]`,
-    )
-
-    await expect(
-      compile(css`
-        .foo {
-          @apply --my-mixin-1 underline;
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: You cannot use \`@apply\` with both mixins and utilities. Please move \`@apply --my-mixin-1\` into a separate rule.]`,
-    )
-  })
-
-  it('should error when used with a body', async () => {
-    await expect(
-      compile(css`
-        .foo {
-          @apply underline {
-            color: red;
-          }
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The rule \`@apply underline\` must not have a body.]`,
-    )
-  })
 })
 
 describe('arbitrary variants', () => {
-  it('should generate arbitrary variants', async () => {
-    expect(await run(['[&_p]:flex'])).toMatchInlineSnapshot(`
-      "
-      .\\[\\&_p\\]\\:flex p {
+  it('should generate arbitrary variants', () => {
+    expect(run(['[&_p]:flex'])).toMatchInlineSnapshot(`
+      ".\\[\\&_p\\]\\:flex p {
         display: flex;
-      }
-      "
+      }"
     `)
   })
 
-  it('should generate arbitrary at-rule variants', async () => {
-    expect(await run(['[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 123px) {
+  it('should generate arbitrary at-rule variants', () => {
+    expect(run(['[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(`
+      "@media (width >= 123px) {
         .\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex {
           display: flex;
         }
-      }
-      "
+      }"
     `)
   })
-
-  it('discards arbitrary variants using relative selectors', async () => {
-    expect(await run(['[>img]:flex', '[+img]:flex', '[~img]:flex'])).toBe('')
-  })
 })
 
 describe('variant stacking', () => {
-  it('should stack simple variants', async () => {
-    expect(await run(['focus:hover:flex'])).toMatchInlineSnapshot(`
-      "
-      @media (hover: hover) {
-        .focus\\:hover\\:flex:focus:hover {
-          display: flex;
-        }
-      }
-      "
+  it('should stack simple variants', () => {
+    expect(run(['focus:hover:flex'])).toMatchInlineSnapshot(`
+      ".focus\\:hover\\:flex:hover:focus {
+        display: flex;
+      }"
     `)
   })
 
-  it('should stack arbitrary variants and simple variants', async () => {
-    expect(await run(['[&_p]:hover:flex'])).toMatchInlineSnapshot(`
-      "
-      @media (hover: hover) {
-        .\\[\\&_p\\]\\:hover\\:flex p:hover {
-          display: flex;
-        }
-      }
-      "
+  it('should stack arbitrary variants and simple variants', () => {
+    expect(run(['[&_p]:hover:flex'])).toMatchInlineSnapshot(`
+      ".\\[\\&_p\\]\\:hover\\:flex:hover p {
+        display: flex;
+      }"
     `)
   })
 
-  it('should stack multiple arbitrary variants', async () => {
-    expect(await run(['[&_p]:[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 123px) {
+  it('should stack multiple arbitrary variants', () => {
+    expect(run(['[&_p]:[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(`
+      "@media (width >= 123px) {
         .\\[\\&_p\\]\\:\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex p {
           display: flex;
         }
-      }
-      "
+      }"
     `)
   })
 
-  it('pseudo element variants are re-ordered', async () => {
-    expect(await run(['before:hover:flex', 'hover:before:flex'])).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-
-      .before\\:hover\\:flex:before {
+  it('pseudo element variants are re-ordered', () => {
+    expect(run(['before:hover:flex', 'hover:before:flex'])).toMatchInlineSnapshot(`
+      ".before\\:hover\\:flex:hover:before {
         content: var(--tw-content);
+        display: flex;
       }
 
-      @media (hover: hover) {
-        .before\\:hover\\:flex:before:hover {
-          display: flex;
-        }
-
-        .hover\\:before\\:flex:hover:before {
-          content: var(--tw-content);
-          display: flex;
-        }
+      .hover\\:before\\:flex:hover:before {
+        content: var(--tw-content);
+        display: flex;
       }
 
       @property --tw-content {
         syntax: "*";
         inherits: false;
         initial-value: "";
-      }
-      "
+      }"
     `)
   })
 })
 
 describe('important', () => {
-  it('should generate an important utility', async () => {
-    expect(await run(['underline!'])).toMatchInlineSnapshot(`
-      "
-      .underline\\! {
+  it('should generate an important utility', () => {
+    expect(run(['underline!'])).toMatchInlineSnapshot(`
+      ".underline\\! {
         text-decoration-line: underline !important;
-      }
-      "
+      }"
     `)
   })
 
-  it('should generate an important utility with legacy syntax', async () => {
-    expect(await run(['!underline'])).toMatchInlineSnapshot(`
-      "
-      .\\!underline {
+  it('should generate an important utility with legacy syntax', () => {
+    expect(run(['!underline'])).toMatchInlineSnapshot(`
+      ".\\!underline {
         text-decoration-line: underline !important;
-      }
-      "
+      }"
     `)
   })
 
-  it('should not mark declarations inside of @keyframes as important', async () => {
+  it('should not mark declarations inside of @keyframes as important', () => {
     expect(
-      await run(
-        ['animate-spin!'],
+      compileCss(
         css`
           @theme {
             --animate-spin: spin 1s linear infinite;
@@ -1095,52 +404,48 @@ describe('important', () => {
           }
           @tailwind utilities;
         `,
+        ['animate-spin!'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --animate-spin: spin 1s linear infinite;
       }
 
       .animate-spin\\! {
-        animation: var(--animate-spin) !important;
+        animation: var(--animate-spin, spin 1s linear infinite) !important;
       }
 
       @keyframes spin {
         to {
           transform: rotate(360deg);
         }
-      }
-      "
+      }"
     `)
   })
 
-  it('should generate an important arbitrary property utility', async () => {
-    expect(await run(['[color:red]!'])).toMatchInlineSnapshot(`
-      "
-      .\\[color\\:red\\]\\! {
+  it('should generate an important arbitrary property utility', () => {
+    expect(run(['[color:red]!'])).toMatchInlineSnapshot(`
+      ".\\[color\\:red\\]\\! {
         color: red !important;
-      }
-      "
+      }"
     `)
   })
 })
 
 describe('sorting', () => {
-  it('should sort utilities based on their property order', async () => {
+  it('should sort utilities based on their property order', () => {
     expect(
-      await run(
-        ['pointer-events-none', 'flex', 'p-1', 'px-1', 'pl-1'].sort(() => Math.random() - 0.5),
+      compileCss(
         css`
           @theme {
             --spacing-1: 0.25rem;
           }
           @tailwind utilities;
         `,
+        ['pointer-events-none', 'flex', 'p-1', 'px-1', 'pl-1'].sort(() => Math.random() - 0.5),
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --spacing-1: .25rem;
       }
 
@@ -1153,24 +458,23 @@ describe('sorting', () => {
       }
 
       .p-1 {
-        padding: var(--spacing-1);
+        padding: var(--spacing-1, .25rem);
       }
 
       .px-1 {
-        padding-inline: var(--spacing-1);
+        padding-left: var(--spacing-1, .25rem);
+        padding-right: var(--spacing-1, .25rem);
       }
 
       .pl-1 {
-        padding-left: var(--spacing-1);
-      }
-      "
+        padding-left: var(--spacing-1, .25rem);
+      }"
     `)
   })
 
-  it('should sort based on amount of properties', async () => {
-    expect(await run(['text-clip', 'truncate', 'overflow-scroll'])).toMatchInlineSnapshot(`
-      "
-      .truncate {
+  it('should sort based on amount of properties', () => {
+    expect(run(['text-clip', 'truncate', 'overflow-scroll'])).toMatchInlineSnapshot(`
+      ".truncate {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
@@ -1182,8 +486,7 @@ describe('sorting', () => {
 
       .text-clip {
         text-overflow: clip;
-      }
-      "
+      }"
     `)
   })
 
@@ -1192,10 +495,9 @@ describe('sorting', () => {
    * polyfill for gap. This means that they should be sorted near gap, not
    * margin.
    */
-  it('should sort utilities with a custom internal --tw-sort correctly', async () => {
+  it('should sort utilities with a custom internal --tw-sort correctly', () => {
     expect(
-      await run(
-        ['mx-0', 'gap-4', 'space-x-2'].sort(() => Math.random() - 0.5),
+      compileCss(
         css`
           @theme {
             --spacing-0: 0px;
@@ -1204,166 +506,61 @@ describe('sorting', () => {
           }
           @tailwind utilities;
         `,
+        ['mx-0', 'gap-4', 'space-x-2'].sort(() => Math.random() - 0.5),
       ),
     ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-space-x-reverse: 0;
-          }
-        }
-      }
-
-      :root, :host {
+      ":root {
         --spacing-0: 0px;
         --spacing-2: .5rem;
         --spacing-4: 1rem;
       }
 
       .mx-0 {
-        margin-inline: var(--spacing-0);
+        margin-left: var(--spacing-0, 0px);
+        margin-right: var(--spacing-0, 0px);
       }
 
       .gap-4 {
-        gap: var(--spacing-4);
+        gap: var(--spacing-4, 1rem);
       }
 
-      :where(.space-x-2 > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse)));
+      :where(.space-x-2 > :not([hidden]) ~ :not([hidden])) {
+        margin-inline-start: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse)));
+        margin-inline-end: calc(var(--spacing-2, .5rem) * var(--tw-space-x-reverse));
       }
 
       @property --tw-space-x-reverse {
-        syntax: "*";
+        syntax: "<number>";
         inherits: false;
         initial-value: 0;
-      }
-      "
+      }"
     `)
   })
 
-  it('should sort individual logical properties later than left/right pairs', async () => {
+  it('should move variants to the end while sorting', () => {
     expect(
-      await run(
-        [
-          // scroll-margin
-          'scroll-ms-1',
-          'scroll-me-2',
-          'scroll-mx-3',
-
-          // scroll-padding
-          'scroll-ps-1',
-          'scroll-pe-2',
-          'scroll-px-3',
-
-          // margin
-          'ms-1',
-          'me-2',
-          'mx-3',
-
-          // padding
-          'ps-1',
-          'pe-2',
-          'px-3',
-        ].sort(() => Math.random() - 0.5),
-        css`
-          @theme {
-            --spacing-1: 1px;
-            --spacing-2: 2px;
-            --spacing-3: 3px;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing-1: 1px;
-        --spacing-2: 2px;
-        --spacing-3: 3px;
-      }
-
-      .mx-3 {
-        margin-inline: var(--spacing-3);
-      }
-
-      .ms-1 {
-        margin-inline-start: var(--spacing-1);
-      }
-
-      .me-2 {
-        margin-inline-end: var(--spacing-2);
-      }
-
-      .scroll-mx-3 {
-        scroll-margin-inline: var(--spacing-3);
-      }
-
-      .scroll-ms-1 {
-        scroll-margin-inline-start: var(--spacing-1);
-      }
-
-      .scroll-me-2 {
-        scroll-margin-inline-end: var(--spacing-2);
-      }
-
-      .scroll-px-3 {
-        scroll-padding-inline: var(--spacing-3);
-      }
-
-      .scroll-ps-1 {
-        scroll-padding-inline-start: var(--spacing-1);
-      }
-
-      .scroll-pe-2 {
-        scroll-padding-inline-end: var(--spacing-2);
-      }
-
-      .px-3 {
-        padding-inline: var(--spacing-3);
-      }
-
-      .ps-1 {
-        padding-inline-start: var(--spacing-1);
-      }
-
-      .pe-2 {
-        padding-inline-end: var(--spacing-2);
-      }
-      "
-    `)
-  })
-
-  it('should move variants to the end while sorting', async () => {
-    expect(
-      await run(
+      run(
         ['pointer-events-none', 'flex', 'hover:flex', 'focus:pointer-events-none'].sort(
           () => Math.random() - 0.5,
         ),
       ),
     ).toMatchInlineSnapshot(`
-      "
-      .pointer-events-none {
-        pointer-events: none;
-      }
+        ".pointer-events-none {
+          pointer-events: none;
+        }
 
-      .flex {
-        display: flex;
-      }
+        .flex {
+          display: flex;
+        }
 
-      @media (hover: hover) {
         .hover\\:flex:hover {
           display: flex;
         }
-      }
 
-      .focus\\:pointer-events-none:focus {
-        pointer-events: none;
-      }
-      "
-    `)
+        .focus\\:pointer-events-none:focus {
+          pointer-events: none;
+        }"
+      `)
   })
 
   /**
@@ -1381,47 +578,41 @@ describe('sorting', () => {
    * (stacked variants) should be before `disabled` because all used variants
    * are defined before the `disabled` variant.
    */
-  it('should sort variants and stacked variants by variant position', async () => {
+  it('should sort variants and stacked variants by variant position', () => {
     expect(
-      await run(
+      run(
         ['flex', 'hover:flex', 'focus:flex', 'disabled:flex', 'hover:focus:flex'].sort(
           () => Math.random() - 0.5,
         ),
       ),
     ).toMatchInlineSnapshot(`
-      "
-      .flex {
-        display: flex;
-      }
+        ".flex {
+          display: flex;
+        }
 
-      @media (hover: hover) {
         .hover\\:flex:hover {
           display: flex;
         }
-      }
 
-      .focus\\:flex:focus {
-        display: flex;
-      }
-
-      @media (hover: hover) {
-        .hover\\:focus\\:flex:hover:focus {
+        .focus\\:flex:focus {
           display: flex;
         }
-      }
 
-      .disabled\\:flex:disabled {
-        display: flex;
-      }
-      "
-    `)
+        .hover\\:focus\\:flex:focus:hover {
+          display: flex;
+        }
+
+        .disabled\\:flex:disabled {
+          display: flex;
+        }"
+      `)
   })
 
   // TODO: Extend this test with user-defined variants to ensure they are sorted
   // correctly.
-  it('should order group-* and peer-* variants based on the sort order of the group and peer variant but also based on the variant they are wrapping', async () => {
+  it('should order group-* and peer-* variants based on the sort order of the group and peer variant but also based on the variant they are wrapping', () => {
     expect(
-      await run(
+      run(
         [
           'hover:flex',
 
@@ -1442,125 +633,88 @@ describe('sorting', () => {
         ].sort(() => Math.random() - 0.5),
       ),
     ).toMatchInlineSnapshot(`
-      "
-      @media (hover: hover) {
-        :is(:where(.group):hover .group-hover\\:flex) {
-          display: flex;
-        }
-      }
-
-      :is(:where(.group):focus .group-focus\\:flex) {
+      ".group-hover\\:flex:is(:where(.group):hover *) {
         display: flex;
       }
 
-      @media (hover: hover) {
-        :is(:where(.peer):hover ~ .peer-hover\\:flex) {
-          display: flex;
-        }
-
-        @media (hover: hover) {
-          :is(:where(.peer):hover ~ :is(:where(.group):hover .group-hover\\:peer-hover\\:flex)), :is(:where(.group):hover :is(:where(.peer):hover ~ .peer-hover\\:group-hover\\:flex)) {
-            display: flex;
-          }
-        }
-
-        :is(:where(.peer):hover ~ :is(:where(.group):focus .group-focus\\:peer-hover\\:flex)), :is(:where(.group):focus :is(:where(.peer):hover ~ .peer-hover\\:group-focus\\:flex)) {
-          display: flex;
-        }
-      }
-
-      :is(:where(.peer):focus ~ .peer-focus\\:flex) {
+      .group-focus\\:flex:is(:where(.group):focus *) {
         display: flex;
       }
 
-      @media (hover: hover) {
-        :is(:where(.peer):focus ~ :is(:where(.group):hover .group-hover\\:peer-focus\\:flex)), :is(:where(.group):hover :is(:where(.peer):focus ~ .peer-focus\\:group-hover\\:flex)) {
-          display: flex;
-        }
-      }
-
-      :is(:where(.peer):focus ~ :is(:where(.group):focus .group-focus\\:peer-focus\\:flex)), :is(:where(.group):focus :is(:where(.peer):focus ~ .peer-focus\\:group-focus\\:flex)) {
+      .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
         display: flex;
       }
 
-      @media (hover: hover) {
-        .hover\\:flex:hover {
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/16973
-  it('should not take undefined values into account when sorting', async () => {
-    expect(
-      await run(
-        ['fancy-text', 'text-sm'],
-        css`
-          @theme {
-            --text-sm: 0.875rem;
-            --text-sm--line-height: calc(1.25 / 0.875);
-          }
-          @tailwind utilities;
-          @utility fancy-text {
-            font-size: var(--text-4xl);
-            line-height: var(--text-4xl--line-height);
-            font-weight: var(--font-weight-bold);
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --text-sm: .875rem;
-        --text-sm--line-height: calc(1.25 / .875);
+      .group-hover\\:peer-hover\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):hover *) {
+        display: flex;
       }
 
-      .fancy-text {
-        font-size: var(--text-4xl);
-        line-height: var(--text-4xl--line-height);
-        font-weight: var(--font-weight-bold);
+      .peer-hover\\:group-hover\\:flex:is(:where(.group):hover *):is(:where(.peer):hover ~ *) {
+        display: flex;
       }
 
-      .text-sm {
-        font-size: var(--text-sm);
-        line-height: var(--tw-leading, var(--text-sm--line-height));
+      .group-focus\\:peer-hover\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):focus *) {
+        display: flex;
       }
-      "
+
+      .peer-hover\\:group-focus\\:flex:is(:where(.group):focus *):is(:where(.peer):hover ~ *) {
+        display: flex;
+      }
+
+      .peer-focus\\:flex:is(:where(.peer):focus ~ *) {
+        display: flex;
+      }
+
+      .group-hover\\:peer-focus\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):hover *) {
+        display: flex;
+      }
+
+      .peer-focus\\:group-hover\\:flex:is(:where(.group):hover *):is(:where(.peer):focus ~ *) {
+        display: flex;
+      }
+
+      .group-focus\\:peer-focus\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):focus *) {
+        display: flex;
+      }
+
+      .peer-focus\\:group-focus\\:flex:is(:where(.group):focus *):is(:where(.peer):focus ~ *) {
+        display: flex;
+      }
+
+      .hover\\:flex:hover {
+        display: flex;
+      }"
     `)
   })
 })
 
-describe('Parsing theme values from CSS', () => {
-  test('Can read values from `@theme`', async () => {
+// Parsing theme values from CSS
+describe('Parsing themes values from CSS', () => {
+  test('Can read values from `@theme`', () => {
     expect(
-      await run(
-        ['accent-red-500'],
+      compileCss(
         css`
           @theme {
             --color-red-500: #f00;
           }
           @tailwind utilities;
         `,
+        ['accent-red-500'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --color-red-500: red;
       }
 
       .accent-red-500 {
-        accent-color: var(--color-red-500);
-      }
-      "
+        accent-color: var(--color-red-500, red);
+      }"
     `)
   })
 
-  test('Later values from `@theme` override earlier ones', async () => {
+  test('Later values from `@theme` override earlier ones', () => {
     expect(
-      await run(
-        ['accent-red-500'],
+      compileCss(
         css`
           @theme {
             --color-red-500: #f00;
@@ -1568,24 +722,22 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
+        ['accent-red-500'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --color-red-500: #f10;
       }
 
       .accent-red-500 {
-        accent-color: var(--color-red-500);
-      }
-      "
+        accent-color: var(--color-red-500, #f10);
+      }"
     `)
   })
 
-  test('Multiple `@theme` blocks are merged', async () => {
+  test('Multiple `@theme` blocks are merged', () => {
     expect(
-      await run(
-        ['accent-red-500', 'accent-blue-500'],
+      compileCss(
         css`
           @theme {
             --color-red-500: #f00;
@@ -1595,29 +747,27 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
+        ['accent-red-500', 'accent-blue-500'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --color-red-500: red;
         --color-blue-500: #00f;
       }
 
       .accent-blue-500 {
-        accent-color: var(--color-blue-500);
+        accent-color: var(--color-blue-500, #00f);
       }
 
       .accent-red-500 {
-        accent-color: var(--color-red-500);
-      }
-      "
+        accent-color: var(--color-red-500, red);
+      }"
     `)
   })
 
-  test('`@theme` values with escaped forward slashes map to unescaped slashes in candidate values', async () => {
+  test('`@theme` values with escaped forward slashes map to unescaped slashes in candidate values', () => {
     expect(
-      await run(
-        ['w-1/2', 'w-75%'],
+      compileCss(
         css`
           @theme {
             /* Cursed but we want this to work */
@@ -1626,37 +776,27 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
+        ['w-1/2', 'w-75%'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --width-1\\/2: 75%;
         --width-75\\%: 50%;
       }
 
       .w-1\\/2 {
-        width: var(--width-1\\/2);
+        width: var(--width-1\\/2, 75%);
       }
 
       .w-75\\% {
-        width: var(--width-75\\%);
-      }
-      "
+        width: var(--width-75\\%, 50%);
+      }"
     `)
   })
 
-  // https://github.com/tailwindlabs/tailwindcss/issues/19786
-  test('out-of-range escaped CSS variable candidates do not crash the build', async () => {
-    // Shouldn't crash
-    await run([
-      String.raw`--Coding-Projects-CharacterMapper-Master-Workspace\d8819554-4725-4235-9d22-2d0ed572e924`,
-    ])
-  })
-
-  test('`@keyframes` in `@theme` are hoisted', async () => {
+  test('`@keyframes` in `@theme` are hoisted', () => {
     expect(
-      await run(
-        ['accent-red', 'text-lg'],
+      compileCss(
         css`
           @theme {
             --color-red: red;
@@ -1668,173 +808,75 @@ describe('Parsing theme values from CSS', () => {
               }
             }
 
-            --text-lg: 20px;
+            --font-size-lg: 20px;
           }
           @tailwind utilities;
         `,
+        ['accent-red', 'text-lg'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --color-red: red;
-        --text-lg: 20px;
+        --animate-foo: foo 1s infinite;
+        --font-size-lg: 20px;
       }
 
       .text-lg {
-        font-size: var(--text-lg);
+        font-size: var(--font-size-lg, 20px);
       }
 
       .accent-red {
-        accent-color: var(--color-red);
-      }
-      "
-    `)
-  })
-
-  test('`@keyframes` in `@theme` are generated when name contains a new line', async () => {
-    expect(
-      await run(
-        ['animate-very-long-animation-name'],
-        css`
-          @theme {
-            --animate-very-long-animation-name: very-long-animation-name
-              var(
-                --very-long-animation-name-configuration,
-                2.5s ease-in-out 0s infinite normal none running
-              );
-
-            @keyframes very-long-animation-name {
-              to {
-                opacity: 1;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --animate-very-long-animation-name: very-long-animation-name
-                    var(--very-long-animation-name-configuration, 2.5s ease-in-out 0s infinite normal none running);
+        accent-color: var(--color-red, red);
       }
 
-      .animate-very-long-animation-name {
-        animation: var(--animate-very-long-animation-name);
-      }
-
-      @keyframes very-long-animation-name {
+      @keyframes foo {
         to {
           opacity: 1;
         }
-      }
-      "
+      }"
     `)
   })
 
-  test('`@theme` values can be unset', async () => {
+  test('`@theme` values can be unset', () => {
     expect(
-      await run(
-        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
+      compileCss(
         css`
           @theme {
             --color-red: #f00;
             --color-blue: #00f;
-            --text-sm: 13px;
-            --text-md: 16px;
-
-            --animate-spin: spin 1s infinite linear;
-
-            @keyframes spin {
-              to {
-                transform: rotate(360deg);
-              }
-            }
+            --font-size-sm: 13px;
+            --font-size-md: 16px;
           }
           @theme {
             --color-*: initial;
-            --text-md: initial;
-            --animate-*: initial;
-            --keyframes-*: initial;
+            --font-size-md: initial;
           }
           @theme {
             --color-green: #0f0;
           }
           @tailwind utilities;
         `,
+        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --text-sm: 13px;
+      ":root {
+        --font-size-sm: 13px;
         --color-green: #0f0;
       }
 
       .text-sm {
-        font-size: var(--text-sm);
+        font-size: var(--font-size-sm, 13px);
       }
 
       .accent-green {
-        accent-color: var(--color-green);
-      }
-      "
+        accent-color: var(--color-green, #0f0);
+      }"
     `)
   })
 
-  test('`@theme` values can be unset (using the escaped syntax)', async () => {
+  test('all `@theme` values can be unset at once', () => {
     expect(
-      await run(
-        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
-        css`
-          @theme {
-            --color-red: #f00;
-            --color-blue: #00f;
-            --text-sm: 13px;
-            --text-md: 16px;
-
-            --animate-spin: spin 1s infinite linear;
-
-            @keyframes spin {
-              to {
-                transform: rotate(360deg);
-              }
-            }
-          }
-          @theme {
-            --color-\*: initial;
-            --text-md: initial;
-            --animate-\*: initial;
-            --keyframes-\*: initial;
-          }
-          @theme {
-            --color-green: #0f0;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --text-sm: 13px;
-        --color-green: #0f0;
-      }
-
-      .text-sm {
-        font-size: var(--text-sm);
-      }
-
-      .accent-green {
-        accent-color: var(--color-green);
-      }
-      "
-    `)
-  })
-
-  test('all `@theme` values can be unset at once', async () => {
-    expect(
-      await run(
-        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
+      compileCss(
         css`
           @theme {
             --color-red: #f00;
@@ -1850,275 +892,22 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
+        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --color-green: #0f0;
       }
 
       .accent-green {
-        accent-color: var(--color-green);
-      }
-      "
+        accent-color: var(--color-green, #0f0);
+      }"
     `)
   })
 
-  test('unsetting `--font-*` does not unset `--font-weight-*`', async () => {
+  test('unused keyframes are removed when an animation is unset', () => {
     expect(
-      await run(
-        ['font-bold', 'font-sans', 'font-serif', 'font-body'],
-        css`
-          @theme {
-            --font-weight-bold: bold;
-            --font-sans: sans-serif;
-            --font-serif: serif;
-          }
-          @theme {
-            --font-*: initial;
-            --font-body: Inter;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-font-weight: initial;
-          }
-        }
-      }
-
-      :root, :host {
-        --font-weight-bold: bold;
-        --font-body: Inter;
-      }
-
-      .font-body {
-        font-family: var(--font-body);
-      }
-
-      .font-bold {
-        --tw-font-weight: var(--font-weight-bold);
-        font-weight: var(--font-weight-bold);
-      }
-
-      @property --tw-font-weight {
-        syntax: "*";
-        inherits: false
-      }
-      "
-    `)
-  })
-
-  test('unsetting `--inset-*` does not unset `--inset-shadow-*`', async () => {
-    expect(
-      await run(
-        ['inset-shadow-sm', 'inset-ring-thick', 'inset-lg', 'inset-sm', 'inset-md'],
-        css`
-          @theme {
-            --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
-            --inset-lg: 100px;
-            --inset-sm: 10px;
-          }
-          @theme {
-            --inset-*: initial;
-            --inset-md: 50px;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-shadow: 0 0 #0000;
-            --tw-shadow-color: initial;
-            --tw-shadow-alpha: 100%;
-            --tw-inset-shadow: 0 0 #0000;
-            --tw-inset-shadow-color: initial;
-            --tw-inset-shadow-alpha: 100%;
-            --tw-ring-color: initial;
-            --tw-ring-shadow: 0 0 #0000;
-            --tw-inset-ring-color: initial;
-            --tw-inset-ring-shadow: 0 0 #0000;
-            --tw-ring-inset: initial;
-            --tw-ring-offset-width: 0px;
-            --tw-ring-offset-color: #fff;
-            --tw-ring-offset-shadow: 0 0 #0000;
-          }
-        }
-      }
-
-      :root, :host {
-        --inset-md: 50px;
-      }
-
-      .inset-md {
-        inset: var(--inset-md);
-      }
-
-      .inset-shadow-sm {
-        --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, #0000000d);
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-
-      @property --tw-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-
-      @property --tw-shadow-color {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-shadow-alpha {
-        syntax: "<percentage>";
-        inherits: false;
-        initial-value: 100%;
-      }
-
-      @property --tw-inset-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-
-      @property --tw-inset-shadow-color {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-inset-shadow-alpha {
-        syntax: "<percentage>";
-        inherits: false;
-        initial-value: 100%;
-      }
-
-      @property --tw-ring-color {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-ring-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-
-      @property --tw-inset-ring-color {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-inset-ring-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-
-      @property --tw-ring-inset {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-ring-offset-width {
-        syntax: "<length>";
-        inherits: false;
-        initial-value: 0;
-      }
-
-      @property --tw-ring-offset-color {
-        syntax: "*";
-        inherits: false;
-        initial-value: #fff;
-      }
-
-      @property --tw-ring-offset-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-      "
-    `)
-  })
-
-  test('unsetting `--text-*` does not unset `--text-color-*`, `--text-underline-offset-*`, `--text-indent-*`, `--text-decoration-thickness-*` or `--text-decoration-color-*`', async () => {
-    expect(
-      await run(
-        [
-          'text-potato',
-          'underline-offset-potato',
-          'indent-potato',
-          'decoration-potato',
-          'decoration-salad',
-          'text-lg',
-        ],
-        css`
-          @theme {
-            --text-color-potato: brown;
-            --text-underline-offset-potato: 4px;
-            --text-indent-potato: 6px;
-            --text-decoration-thickness-potato: 8px;
-            --text-decoration-color-salad: yellow;
-            --text-4xl: 60px;
-          }
-          @theme {
-            --text-*: initial;
-            --text-lg: 20px;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --text-color-potato: brown;
-        --text-underline-offset-potato: 4px;
-        --text-indent-potato: 6px;
-        --text-decoration-thickness-potato: 8px;
-        --text-decoration-color-salad: yellow;
-        --text-lg: 20px;
-      }
-
-      .indent-potato {
-        text-indent: var(--text-indent-potato);
-      }
-
-      .text-lg {
-        font-size: var(--text-lg);
-      }
-
-      .text-potato {
-        color: var(--text-color-potato);
-      }
-
-      .decoration-salad {
-        -webkit-text-decoration-color: var(--text-decoration-color-salad);
-        -webkit-text-decoration-color: var(--text-decoration-color-salad);
-        text-decoration-color: var(--text-decoration-color-salad);
-      }
-
-      .decoration-potato {
-        text-decoration-thickness: var(--text-decoration-thickness-potato);
-      }
-
-      .underline-offset-potato {
-        text-underline-offset: var(--text-underline-offset-potato);
-      }
-      "
-    `)
-  })
-
-  test('unused keyframes are removed when an animation is unset', async () => {
-    expect(
-      await run(
-        ['animate-foo', 'animate-foobar'],
+      compileCss(
         css`
           @theme {
             --animate-foo: foo 1s infinite;
@@ -2141,5192 +930,22 @@ describe('Parsing theme values from CSS', () => {
           }
           @tailwind utilities;
         `,
+        ['animate-foo', 'animate-foobar'],
       ),
     ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
+      ":root {
         --animate-foobar: foobar 1s infinite;
       }
 
       .animate-foobar {
-        animation: var(--animate-foobar);
+        animation: var(--animate-foobar, foobar 1s infinite);
       }
 
       @keyframes foobar {
         to {
           opacity: 0;
         }
-      }
-      "
-    `)
-  })
-
-  test('keyframes are generated when used in an animation', async () => {
-    expect(
-      await run(
-        ['animate-foo'],
-        css`
-          @theme {
-            --animate-foo: used 1s infinite;
-            --animate-bar: unused 1s infinite;
-
-            @keyframes used {
-              to {
-                opacity: 1;
-              }
-            }
-
-            @keyframes unused {
-              to {
-                opacity: 0;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --animate-foo: used 1s infinite;
-      }
-
-      .animate-foo {
-        animation: var(--animate-foo);
-      }
-
-      @keyframes used {
-        to {
-          opacity: 1;
-        }
-      }
-      "
-    `)
-  })
-
-  test('keyframes are generated when used in an animation within a prefixed setup', async () => {
-    expect(
-      await run(
-        ['tw:animate-foo'],
-        css`
-          @theme prefix(tw) {
-            --animate-foo: used 1s infinite;
-            --animate-bar: unused 1s infinite;
-
-            @keyframes used {
-              to {
-                opacity: 1;
-              }
-            }
-
-            @keyframes unused {
-              to {
-                opacity: 0;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --tw-animate-foo: used 1s infinite;
-      }
-
-      .tw\\:animate-foo {
-        animation: var(--tw-animate-foo);
-      }
-
-      @keyframes used {
-        to {
-          opacity: 1;
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom properties are generated when used from a CSS var with a prefixed setup', async () => {
-    expect(
-      await compileCss(css`
-        @theme prefix(tw) {
-          --color-tomato: #e10c04;
-        }
-        @tailwind utilities;
-        .red {
-          color: var(--tw-color-tomato);
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --tw-color-tomato: #e10c04;
-      }
-
-      .red {
-        color: var(--tw-color-tomato);
-      }
-      "
-    `)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/16374
-  test('custom properties in keyframes preserved', async () => {
-    expect(
-      await run(
-        ['animate-foo'],
-        css`
-          @theme {
-            --animate-foo: used 1s infinite;
-
-            @keyframes used {
-              to {
-                --other: var(--angle);
-                --angle: 360deg;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --animate-foo: used 1s infinite;
-      }
-
-      .animate-foo {
-        animation: var(--animate-foo);
-      }
-
-      @keyframes used {
-        to {
-          --other: var(--angle);
-          --angle: 360deg;
-        }
-      }
-      "
-    `)
-  })
-
-  test('keyframes are generated when used in an animation using `@theme inline`', async () => {
-    expect(
-      await run(
-        ['animate-foo'],
-        css`
-          @theme inline {
-            --animate-foo: used 1s infinite;
-            --animate-bar: unused 1s infinite;
-
-            @keyframes used {
-              to {
-                opacity: 1;
-              }
-            }
-
-            @keyframes unused {
-              to {
-                opacity: 0;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animate-foo {
-        animation: 1s infinite used;
-      }
-
-      @keyframes used {
-        to {
-          opacity: 1;
-        }
-      }
-      "
-    `)
-  })
-
-  test('keyframes are generated when used in an animation using `@theme static`', async () => {
-    expect(
-      await run(
-        ['animate-foo'],
-        css`
-          @theme static {
-            --animate-foo: used 1s infinite;
-            --animate-bar: unused-but-kept 1s infinite;
-
-            @keyframes used {
-              to {
-                opacity: 1;
-              }
-            }
-
-            @keyframes unused-but-kept {
-              to {
-                opacity: 0;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --animate-foo: used 1s infinite;
-        --animate-bar: unused-but-kept 1s infinite;
-      }
-
-      .animate-foo {
-        animation: var(--animate-foo);
-      }
-
-      @keyframes used {
-        to {
-          opacity: 1;
-        }
-      }
-
-      @keyframes unused-but-kept {
-        to {
-          opacity: 0;
-        }
-      }
-      "
-    `)
-  })
-
-  test('keyframes are generated when used in user CSS', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          @keyframes used {
-            to {
-              opacity: 1;
-            }
-          }
-
-          @keyframes unused {
-            to {
-              opacity: 0;
-            }
-          }
-        }
-
-        .foo {
-          animation: used 1s infinite;
-        }
-
-        @tailwind utilities;
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .foo {
-        animation: 1s infinite used;
-      }
-
-      @keyframes used {
-        to {
-          opacity: 1;
-        }
-      }
-      "
-    `)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/17332
-  test('extracts keyframe names followed by comma', async () => {
-    expect(
-      await run(
-        ['animate-test'],
-        css`
-          @theme {
-            --animate-test: 500ms both fade-in, 1000ms linear 500ms spin infinite;
-
-            @keyframes fade-in {
-              from {
-                opacity: 0%;
-              }
-              to {
-                opacity: 100%;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --animate-test: .5s both fade-in, 1s linear .5s spin infinite;
-      }
-
-      .animate-test {
-        animation: var(--animate-test);
-      }
-
-      @keyframes fade-in {
-        from {
-          opacity: 0;
-        }
-
-        to {
-          opacity: 1;
-        }
-      }
-      "
-    `)
-  })
-
-  test('keyframes outside of `@theme are always preserved', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          @keyframes used {
-            to {
-              opacity: 1;
-            }
-          }
-        }
-
-        @keyframes unused {
-          to {
-            opacity: 0;
-          }
-        }
-
-        .foo {
-          animation: used 1s infinite;
-        }
-
-        @tailwind utilities;
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      @keyframes unused {
-        to {
-          opacity: 0;
-        }
-      }
-
-      .foo {
-        animation: 1s infinite used;
-      }
-
-      @keyframes used {
-        to {
-          opacity: 1;
-        }
-      }
-      "
-    `)
-  })
-
-  test('theme values added as reference are not included in the output as variables but emit fallback values', async () => {
-    expect(
-      await run(
-        ['bg-tomato', 'bg-potato'],
-        css`
-          @theme {
-            --color-tomato: #e10c04;
-          }
-          @theme reference {
-            --color-potato: #ac855b;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-tomato: #e10c04;
-      }
-
-      .bg-potato {
-        background-color: var(--color-potato, #ac855b);
-      }
-
-      .bg-tomato {
-        background-color: var(--color-tomato);
-      }
-      "
-    `)
-  })
-
-  test('`@keyframes` added in `@theme reference` should not be emitted', async () => {
-    return expect(
-      await run(
-        ['animate-foo'],
-        css`
-          @theme reference {
-            --animate-foo: foo 1s infinite;
-
-            @keyframes foo {
-              0%,
-              100% {
-                color: red;
-              }
-              50% {
-                color: blue;
-              }
-            }
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .animate-foo {
-        animation: var(--animate-foo, foo 1s infinite);
-      }
-
-      @keyframes foo {
-        0%, 100% {
-          color: red;
-        }
-
-        50% {
-          color: #00f;
-        }
-      }
-      "
-    `)
-  })
-
-  test('`@keyframes` added in `@theme reference` should not be emitted, even if another `@theme` block exists', async () => {
-    return expect(
-      await run(
-        ['bg-pink', 'animate-foo'],
-        css`
-          @theme reference {
-            --animate-foo: foo 1s infinite;
-
-            @keyframes foo {
-              0%,
-              100% {
-                color: red;
-              }
-              50% {
-                color: blue;
-              }
-            }
-          }
-
-          @theme {
-            --color-pink: pink;
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-pink: pink;
-      }
-
-      .animate-foo {
-        animation: var(--animate-foo, foo 1s infinite);
-      }
-
-      .bg-pink {
-        background-color: var(--color-pink);
-      }
-
-      @keyframes foo {
-        0%, 100% {
-          color: red;
-        }
-
-        50% {
-          color: #00f;
-        }
-      }
-      "
-    `)
-  })
-
-  test('theme values added as reference that override existing theme value suppress the output of the original theme value as a variable', async () => {
-    expect(
-      await run(
-        ['bg-potato'],
-        css`
-          @theme {
-            --color-potato: #ac855b;
-          }
-          @theme reference {
-            --color-potato: #c794aa;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-potato {
-        background-color: var(--color-potato, #c794aa);
-      }
-      "
-    `)
-  })
-
-  test('overriding a reference theme value with a non-reference theme value includes it in the output as a variable', async () => {
-    expect(
-      await run(
-        ['bg-potato'],
-        css`
-          @theme reference {
-            --color-potato: #ac855b;
-          }
-          @theme {
-            --color-potato: #c794aa;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-potato: #c794aa;
-      }
-
-      .bg-potato {
-        background-color: var(--color-potato);
-      }
-      "
-    `)
-  })
-
-  test('wrapping `@theme` with `@media reference` behaves like `@theme reference` to support `@import` statements', async () => {
-    expect(
-      await run(
-        ['bg-tomato', 'bg-potato', 'bg-avocado'],
-        css`
-          @theme {
-            --color-tomato: #e10c04;
-          }
-          @media theme(reference) {
-            @theme {
-              --color-potato: #ac855b;
-            }
-            @theme {
-              --color-avocado: #c0cc6d;
-            }
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-tomato: #e10c04;
-      }
-
-      .bg-avocado {
-        background-color: var(--color-avocado, #c0cc6d);
-      }
-
-      .bg-potato {
-        background-color: var(--color-potato, #ac855b);
-      }
-
-      .bg-tomato {
-        background-color: var(--color-tomato);
-      }
-      "
-    `)
-  })
-
-  test('`@import "tailwindcss" theme(static)` will always generate theme values, regardless of whether they were used or not', async () => {
-    expect(
-      await run(
-        ['bg-tomato'],
-        css`
-          @import 'tailwindcss' theme(static);
-        `,
-        {
-          async loadStylesheet() {
-            return {
-              path: '',
-              base: '',
-              content: css`
-                @theme {
-                  --color-tomato: #e10c04;
-                  --color-potato: #ac855b;
-                  --color-primary: var(--primary);
-                }
-
-                @tailwind utilities;
-              `,
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-tomato: #e10c04;
-        --color-potato: #ac855b;
-        --color-primary: var(--primary);
-      }
-
-      .bg-tomato {
-        background-color: var(--color-tomato);
-      }
-      "
-    `)
-  })
-
-  test('`@media theme(reference)` can only contain `@theme` rules', () => {
-    return expect(
-      run(
-        ['bg-tomato', 'bg-potato', 'bg-avocado'],
-        css`
-          @media theme(reference) {
-            .not-a-theme-rule {
-              color: cursed;
-            }
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `
-      [Error: Files imported with \`@import "…" theme(reference)\` must only contain \`@theme\` blocks.
-      Use \`@reference "…";\` instead.]
-    `,
-    )
-  })
-
-  test('theme values added as `inline` are not wrapped in `var(…)` when used as utility values', async () => {
-    expect(
-      await run(
-        ['bg-tomato', 'bg-potato', 'bg-primary'],
-        css`
-          @theme inline {
-            --color-tomato: #e10c04;
-            --color-potato: #ac855b;
-            --color-primary: var(--primary);
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-potato {
-        background-color: #ac855b;
-      }
-
-      .bg-primary {
-        background-color: var(--primary);
-      }
-
-      .bg-tomato {
-        background-color: #e10c04;
-      }
-      "
-    `)
-  })
-
-  test('`@import "tailwindcss" theme(inline)` theme values added as `inline` are not wrapped in `var(…)` when used as utility values', async () => {
-    expect(
-      await run(
-        ['bg-tomato'],
-        css`
-          @import 'tailwindcss' theme(inline);
-        `,
-        {
-          async loadStylesheet() {
-            return {
-              path: '',
-              base: '',
-              content: css`
-                @theme {
-                  --color-tomato: #e10c04;
-                  --color-potato: #ac855b;
-                  --color-primary: var(--primary);
-                }
-
-                @tailwind utilities;
-              `,
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-tomato {
-        background-color: #e10c04;
-      }
-      "
-    `)
-  })
-
-  test('theme values added as `static` will always be generated, regardless of whether they were used or not', async () => {
-    expect(
-      await run(
-        ['bg-tomato'],
-        css`
-          @theme static {
-            --color-tomato: #e10c04;
-            --color-potato: #ac855b;
-            --color-primary: var(--primary);
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-tomato: #e10c04;
-        --color-potato: #ac855b;
-        --color-primary: var(--primary);
-      }
-
-      .bg-tomato {
-        background-color: var(--color-tomato);
-      }
-      "
-    `)
-  })
-
-  test('when no theme values are emitted, empty layers can be removed', async () => {
-    expect(
-      await run(
-        ['underline'],
-        css`
-          @layer theme1 {
-            @layer theme2 {
-              @theme {
-                --color-tomato: #e10c04;
-                --color-potato: #ac855b;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .underline {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  })
-
-  test('wrapping `@theme` with `@media theme(inline)` behaves like `@theme inline` to support `@import` statements', async () => {
-    expect(
-      await run(
-        ['bg-tomato', 'bg-potato', 'bg-primary'],
-        css`
-          @media theme(inline) {
-            @theme {
-              --color-tomato: #e10c04;
-              --color-potato: #ac855b;
-              --color-primary: var(--primary);
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-potato {
-        background-color: #ac855b;
-      }
-
-      .bg-primary {
-        background-color: var(--primary);
-      }
-
-      .bg-tomato {
-        background-color: #e10c04;
-      }
-      "
-    `)
-  })
-
-  test('`inline` and `reference` can be used together', async () => {
-    expect(
-      await run(
-        ['bg-tomato', 'bg-potato', 'bg-primary'],
-        css`
-          @theme reference inline {
-            --color-tomato: #e10c04;
-            --color-potato: #ac855b;
-            --color-primary: var(--primary);
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-potato {
-        background-color: #ac855b;
-      }
-
-      .bg-primary {
-        background-color: var(--primary);
-      }
-
-      .bg-tomato {
-        background-color: #e10c04;
-      }
-      "
-    `)
-  })
-
-  test('`inline` and `reference` can be used together in `media(…)`', async () => {
-    expect(
-      await run(
-        ['bg-tomato', 'bg-potato', 'bg-primary'],
-        css`
-          @media theme(reference inline) {
-            @theme {
-              --color-tomato: #e10c04;
-              --color-potato: #ac855b;
-              --color-primary: var(--primary);
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-potato {
-        background-color: #ac855b;
-      }
-
-      .bg-primary {
-        background-color: var(--primary);
-      }
-
-      .bg-tomato {
-        background-color: #e10c04;
-      }
-      "
-    `)
-  })
-
-  test('`default` theme values can be overridden by regular theme values`', async () => {
-    expect(
-      await run(
-        ['bg-potato'],
-        css`
-          @theme {
-            --color-potato: #ac855b;
-          }
-          @theme default {
-            --color-potato: #efb46b;
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-potato: #ac855b;
-      }
-
-      .bg-potato {
-        background-color: var(--color-potato);
-      }
-      "
-    `)
-  })
-
-  test('`default` and `inline` can be used together', async () => {
-    expect(
-      await run(
-        ['bg-potato'],
-        css`
-          @theme default inline {
-            --color-potato: #efb46b;
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-potato {
-        background-color: #efb46b;
-      }
-      "
-    `)
-  })
-
-  test('`default` and `reference` can be used together', async () => {
-    expect(
-      await run(
-        ['bg-potato'],
-        css`
-          @theme default reference {
-            --color-potato: #efb46b;
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-potato {
-        background-color: var(--color-potato, #efb46b);
-      }
-      "
-    `)
-  })
-
-  test('`default`, `inline`, and `reference` can be used together', async () => {
-    expect(
-      await run(
-        ['bg-potato'],
-        css`
-          @theme default reference inline {
-            --color-potato: #efb46b;
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bg-potato {
-        background-color: #efb46b;
-      }
-      "
-    `)
-  })
-
-  test('`default` can be used in `media(…)`', async () => {
-    expect(
-      await run(
-        ['bg-potato', 'bg-tomato'],
-        css`
-          @media theme() {
-            @theme {
-              --color-potato: #ac855b;
-            }
-          }
-          @media theme(default) {
-            @theme {
-              --color-potato: #efb46b;
-              --color-tomato: tomato;
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-potato: #ac855b;
-        --color-tomato: tomato;
-      }
-
-      .bg-potato {
-        background-color: var(--color-potato);
-      }
-
-      .bg-tomato {
-        background-color: var(--color-tomato);
-      }
-      "
-    `)
-  })
-
-  test('`default` theme values can be overridden by plugin theme values', async () => {
-    expect(
-      await run(
-        ['text-red', 'text-orange'],
-        css`
-          @theme default {
-            --color-red: red;
-          }
-          @theme {
-            --color-orange: orange;
-          }
-          @plugin "my-plugin";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => {
-            return {
-              path: '',
-              base: '/root',
-              module: plugin(({}) => {}, {
-                theme: {
-                  extend: {
-                    colors: {
-                      red: 'tomato',
-                      orange: '#f28500',
-                    },
-                  },
-                },
-              }),
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-orange: orange;
-      }
-
-      .text-orange {
-        color: var(--color-orange);
-      }
-
-      .text-red {
-        color: tomato;
-      }
-      "
-    `)
-  })
-
-  test('`default` theme values can be overridden by config theme values', async () => {
-    expect(
-      await run(
-        ['text-red', 'text-orange'],
-        css`
-          @theme default {
-            --color-red: red;
-          }
-          @theme {
-            --color-orange: orange;
-          }
-          @config "./my-config.js";
-          @tailwind utilities;
-        `,
-        {
-          loadModule: async () => {
-            return {
-              path: '',
-              base: '/root',
-              module: {
-                theme: {
-                  extend: {
-                    colors: {
-                      red: 'tomato',
-                      orange: '#f28500',
-                    },
-                  },
-                },
-              },
-            }
-          },
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-orange: orange;
-      }
-
-      .text-orange {
-        color: var(--color-orange);
-      }
-
-      .text-red {
-        color: tomato;
-      }
-      "
-    `)
-  })
-
-  test('only emits theme variables that are used outside of being defined by another variable', async () => {
-    expect(
-      await run(
-        ['get-var-b', 'get-var-two'],
-        css`
-          @theme {
-            --var-a: var(--var-b);
-            --var-b: var(--var-c);
-            --var-c: var(--var-d);
-            --var-d: red;
-
-            --var-four: green;
-            --var-three: var(--var-four);
-            --var-two: var(--var-three);
-            --var-one: var(--var-two);
-
-            --var-eins: var(--var-zwei);
-            --var-zwei: var(--var-drei);
-            --var-drei: var(--var-vier);
-            --var-vier: blue;
-          }
-
-          @utility get-var-* {
-            color: --value(--var-\*);
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --var-b: var(--var-c);
-        --var-c: var(--var-d);
-        --var-d: red;
-        --var-four: green;
-        --var-three: var(--var-four);
-        --var-two: var(--var-three);
-      }
-
-      .get-var-b {
-        color: var(--var-b);
-      }
-
-      .get-var-two {
-        color: var(--var-two);
-      }
-      "
+      }"
     `)
   })
 })
-
-describe('plugins', () => {
-  test('@plugin need a path', () => {
-    return expect(
-      compile(
-        css`
-          @plugin;
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', '&:hover, &:focus')
-            },
-          }),
-        },
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(`[Error: \`@plugin\` must have a path.]`)
-  })
-
-  test('@plugin cannot have an empty path', () => {
-    return expect(
-      compile(
-        css`
-          @plugin '';
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', '&:hover, &:focus')
-            },
-          }),
-        },
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(`[Error: \`@plugin\` must have a path.]`)
-  })
-
-  test('@plugin cannot be nested.', () => {
-    return expect(
-      compile(
-        css`
-          div {
-            @plugin "my-plugin";
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', '&:hover, &:focus')
-            },
-          }),
-        },
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(`[Error: \`@plugin\` cannot be nested.]`)
-  })
-
-  test('@plugin can accept options', async () => {
-    expect.hasAssertions()
-
-    expect(
-      await run(
-        ['text-primary'],
-        css`
-          @tailwind utilities;
-          @plugin "my-plugin" {
-            color: red;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: plugin.withOptions((options) => {
-              expect(options).toEqual({
-                color: 'red',
-              })
-
-              return ({ addUtilities }) => {
-                addUtilities({
-                  '.text-primary': {
-                    color: options.color,
-                  },
-                })
-              }
-            }),
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .text-primary {
-        color: red;
-      }
-      "
-    `)
-  })
-
-  test('@plugin options can be null, booleans, string, numbers, or arrays including those types', async () => {
-    expect.hasAssertions()
-
-    await compile(
-      css`
-        @tailwind utilities;
-        @plugin "my-plugin" {
-          is-null: null;
-          is-true: true;
-          is-false: false;
-          is-int: 1234567;
-          is-float: 1.35;
-          is-sci: 1.35e-5;
-          is-str-null: 'null';
-          is-str-true: 'true';
-          is-str-false: 'false';
-          is-str-int: '1234567';
-          is-str-float: '1.35';
-          is-str-sci: '1.35e-5';
-          is-arr: foo, bar;
-          is-arr-mixed: null, true, false, 1234567, 1.35, foo, 'bar', 'true';
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: plugin.withOptions((options) => {
-            expect(options).toEqual({
-              'is-null': null,
-              'is-true': true,
-              'is-false': false,
-              'is-int': 1234567,
-              'is-float': 1.35,
-              'is-sci': 1.35e-5,
-              'is-str-null': 'null',
-              'is-str-true': 'true',
-              'is-str-false': 'false',
-              'is-str-int': '1234567',
-              'is-str-float': '1.35',
-              'is-str-sci': '1.35e-5',
-              'is-arr': ['foo', 'bar'],
-              'is-arr-mixed': [null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'],
-            })
-
-            return () => {}
-          }),
-        }),
-      },
-    )
-  })
-
-  test('@plugin options can only be simple key/value pairs', () => {
-    return expect(
-      compile(
-        css`
-          @plugin "my-plugin" {
-            color: red;
-            sizes {
-              sm: 1rem;
-              md: 2rem;
-            }
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: plugin.withOptions((options) => {
-              return ({ addUtilities }) => {
-                addUtilities({
-                  '.text-primary': {
-                    color: options.color,
-                  },
-                })
-              }
-            }),
-          }),
-        },
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `
-      [Error: Unexpected \`@plugin\` option:
-
-      sizes {
-        sm: 1rem;
-        md: 2rem;
-      }
-
-
-      \`@plugin\` options must be a flat list of declarations.]
-    `,
-    )
-  })
-
-  test('@plugin options can only be provided to plugins using withOptions', () => {
-    return expect(
-      compile(
-        css`
-          @plugin "my-plugin" {
-            color: red;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: plugin(({ addUtilities }) => {
-              addUtilities({
-                '.text-primary': {
-                  color: 'red',
-                },
-              })
-            }),
-          }),
-        },
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The plugin "my-plugin" does not accept options]`,
-    )
-  })
-
-  test('@plugin errors on array-like syntax', () => {
-    return expect(
-      compile(
-        css`
-          @plugin "my-plugin" {
-            --color: [ 'red', 'green', 'blue'];
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: plugin(() => {}),
-          }),
-        },
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The plugin "my-plugin" does not accept options]`,
-    )
-  })
-
-  test('@plugin errors on object-like syntax', () => {
-    return expect(
-      compile(
-        css`
-          @plugin "my-plugin" {
-            --color: {
-              red: 100;
-              green: 200;
-              blue: 300;
-            };
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: plugin(() => {}),
-          }),
-        },
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(`
-      [Error: Unexpected \`@plugin\` option: Value of declaration \`--color: {
-                    red: 100;
-                    green: 200;
-                    blue: 300;
-                  };\` is not supported.
-
-      Using an object as a plugin option is currently only supported in JavaScript configuration files.]
-    `)
-  })
-
-  test('addVariant with string selector', async () => {
-    expect(
-      await run(
-        ['hocus:underline', 'group-hocus:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', '&:hover, &:focus')
-            },
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
-          display: flex;
-        }
-
-        .hocus\\:underline:hover, .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('addVariant with array of selectors', async () => {
-    expect(
-      await run(
-        ['hocus:underline', 'group-hocus:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', ['&:hover', '&:focus'])
-            },
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
-          display: flex;
-        }
-
-        .hocus\\:underline:hover, .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('addVariant with object syntax and @slot', async () => {
-    expect(
-      await run(
-        ['hocus:underline', 'group-hocus:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', {
-                '&:hover': '@slot',
-                '&:focus': '@slot',
-              })
-            },
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
-          display: flex;
-        }
-
-        .hocus\\:underline:hover, .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('addVariant with object syntax, media, nesting and multiple @slot', async () => {
-    expect(
-      await run(
-        ['hocus:underline', 'group-hocus:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', {
-                '@media (hover: hover)': {
-                  '&:hover': '@slot',
-                },
-                '&:focus': '@slot',
-              })
-            },
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media (hover: hover) {
-          :is(:where(.group):hover .group-hocus\\:flex) {
-            display: flex;
-          }
-        }
-
-        :is(:where(.group):focus .group-hocus\\:flex) {
-          display: flex;
-        }
-
-        @media (hover: hover) {
-          .hocus\\:underline:hover {
-            text-decoration-line: underline;
-          }
-        }
-
-        .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('@slot is preserved when used as a custom property value', async () => {
-    expect(
-      await run(
-        ['hocus:underline'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('hocus', {
-                '&': {
-                  '--custom-property': '@slot',
-                  '&:hover': '@slot',
-                  '&:focus': '@slot',
-                },
-              })
-            },
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .hocus\\:underline {
-          --custom-property: @slot;
-        }
-
-        .hocus\\:underline:hover, .hocus\\:underline:focus {
-          text-decoration-line: underline;
-        }
-      }
-      "
-    `)
-  })
-
-  test('built-in variants can be overridden while keeping their order', async () => {
-    expect(
-      await run(
-        // Make sure the order does not change by including the variants
-        // immediately before and after `dark`
-        ['rtl:flex', 'dark:flex', 'starting:flex'],
-        css`
-          @plugin "my-plugin";
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({ addVariant }: PluginAPI) => {
-              addVariant('dark', '&:is([data-theme=dark] *)')
-            },
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), .dark\\:flex:is([data-theme="dark"] *) {
-          display: flex;
-        }
-
-        @starting-style {
-          .starting\\:flex {
-            display: flex;
-          }
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('@source', () => {
-  test('emits @source files', async () => {
-    let { sources } = await compile(
-      css`
-        @source "./foo/bar/*.ts";
-      `,
-      { base: '/root' },
-    )
-
-    expect(sources).toEqual([{ pattern: './foo/bar/*.ts', base: '/root', negated: false }])
-  })
-
-  test('emits multiple @source files', async () => {
-    let { sources } = await compile(
-      css`
-        @source "./foo/**/*.ts";
-        @source "./php/secr3t/smarty.php";
-      `,
-      { base: '/root' },
-    )
-
-    expect(sources).toEqual([
-      { pattern: './foo/**/*.ts', base: '/root', negated: false },
-      { pattern: './php/secr3t/smarty.php', base: '/root', negated: false },
-    ])
-  })
-
-  test('emits negated @source files', async () => {
-    let { sources } = await compile(
-      css`
-        @source not "./foo/**/*.ts";
-        @source not "./php/secr3t/smarty.php";
-      `,
-      { base: '/root' },
-    )
-
-    expect(sources).toEqual([
-      { pattern: './foo/**/*.ts', base: '/root', negated: true },
-      { pattern: './php/secr3t/smarty.php', base: '/root', negated: true },
-    ])
-  })
-
-  describe('@source inline(…)', () => {
-    test('always includes the candidate', async () => {
-      expect(
-        await compileCss(css`
-          @source inline("underline");
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .underline {
-          text-decoration-line: underline;
-        }
-        "
-      `)
-    })
-
-    test('applies brace expansion', async () => {
-      expect(
-        await compileCss(css`
-          @theme {
-            --color-red-50: oklch(0.971 0.013 17.38);
-            --color-red-100: oklch(0.936 0.032 17.717);
-            --color-red-200: oklch(0.885 0.062 18.334);
-            --color-red-300: oklch(0.808 0.114 19.571);
-            --color-red-400: oklch(0.704 0.191 22.216);
-            --color-red-500: oklch(0.637 0.237 25.331);
-            --color-red-600: oklch(0.577 0.245 27.325);
-            --color-red-700: oklch(0.505 0.213 27.518);
-            --color-red-800: oklch(0.444 0.177 26.899);
-            --color-red-900: oklch(0.396 0.141 25.723);
-            --color-red-950: oklch(0.258 0.092 26.042);
-          }
-          @source inline("bg-red-{50,{100..900..100},950}");
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        :root, :host {
-          --color-red-50: oklch(97.1% .013 17.38);
-          --color-red-100: oklch(93.6% .032 17.717);
-          --color-red-200: oklch(88.5% .062 18.334);
-          --color-red-300: oklch(80.8% .114 19.571);
-          --color-red-400: oklch(70.4% .191 22.216);
-          --color-red-500: oklch(63.7% .237 25.331);
-          --color-red-600: oklch(57.7% .245 27.325);
-          --color-red-700: oklch(50.5% .213 27.518);
-          --color-red-800: oklch(44.4% .177 26.899);
-          --color-red-900: oklch(39.6% .141 25.723);
-          --color-red-950: oklch(25.8% .092 26.042);
-        }
-
-        .bg-red-50 {
-          background-color: var(--color-red-50);
-        }
-
-        .bg-red-100 {
-          background-color: var(--color-red-100);
-        }
-
-        .bg-red-200 {
-          background-color: var(--color-red-200);
-        }
-
-        .bg-red-300 {
-          background-color: var(--color-red-300);
-        }
-
-        .bg-red-400 {
-          background-color: var(--color-red-400);
-        }
-
-        .bg-red-500 {
-          background-color: var(--color-red-500);
-        }
-
-        .bg-red-600 {
-          background-color: var(--color-red-600);
-        }
-
-        .bg-red-700 {
-          background-color: var(--color-red-700);
-        }
-
-        .bg-red-800 {
-          background-color: var(--color-red-800);
-        }
-
-        .bg-red-900 {
-          background-color: var(--color-red-900);
-        }
-
-        .bg-red-950 {
-          background-color: var(--color-red-950);
-        }
-        "
-      `)
-    })
-
-    test('adds multiple inline sources separated by spaces', async () => {
-      expect(
-        await compileCss(css`
-          @theme {
-            --color-red-100: oklch(0.936 0.032 17.717);
-            --color-red-200: oklch(0.885 0.062 18.334);
-          }
-          @source inline("block bg-red-{100..200..100}");
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        :root, :host {
-          --color-red-100: oklch(93.6% .032 17.717);
-          --color-red-200: oklch(88.5% .062 18.334);
-        }
-
-        .block {
-          display: block;
-        }
-
-        .bg-red-100 {
-          background-color: var(--color-red-100);
-        }
-
-        .bg-red-200 {
-          background-color: var(--color-red-200);
-        }
-        "
-      `)
-    })
-
-    test('ignores invalid inline candidates', async () => {
-      expect(
-        await compileCss(css`
-          @source inline("my-cucumber");
-          @tailwind utilities;
-        `),
-      ).toEqual('')
-    })
-
-    test('can be negated', async () => {
-      expect(
-        await run(
-          ['container'],
-          css`
-            @theme {
-              --breakpoint-sm: 40rem;
-              --breakpoint-md: 48rem;
-              --breakpoint-lg: 64rem;
-              --breakpoint-xl: 80rem;
-              --breakpoint-2xl: 96rem;
-            }
-            @source not inline("container");
-            @tailwind utilities;
-          `,
-        ),
-      ).toEqual('')
-    })
-
-    test('applies brace expansion to negated sources', async () => {
-      expect(
-        await run(
-          ['bg-red-500', 'bg-red-700'],
-          css`
-            @theme {
-              --color-red-50: oklch(0.971 0.013 17.38);
-              --color-red-100: oklch(0.936 0.032 17.717);
-              --color-red-200: oklch(0.885 0.062 18.334);
-              --color-red-300: oklch(0.808 0.114 19.571);
-              --color-red-400: oklch(0.704 0.191 22.216);
-              --color-red-500: oklch(0.637 0.237 25.331);
-              --color-red-600: oklch(0.577 0.245 27.325);
-              --color-red-700: oklch(0.505 0.213 27.518);
-              --color-red-800: oklch(0.444 0.177 26.899);
-              --color-red-900: oklch(0.396 0.141 25.723);
-              --color-red-950: oklch(0.258 0.092 26.042);
-            }
-            @source not inline("bg-red-{50,{100..900..100},950}");
-            @tailwind utilities;
-          `,
-        ),
-      ).toEqual('')
-    })
-
-    test('works with whitespace around the argument', async () => {
-      expect(
-        await compileCss(css`
-          /* prettier-ignore */
-          @source inline( "underline" );
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .underline {
-          text-decoration-line: underline;
-        }
-        "
-      `)
-    })
-
-    test('works with newlines around the argument', async () => {
-      expect(
-        await compileCss(css`
-          /* prettier-ignore */
-          @source inline(
-            "underline"
-          );
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .underline {
-          text-decoration-line: underline;
-        }
-        "
-      `)
-    })
-  })
-})
-
-describe('@custom-variant', () => {
-  test('@custom-variant must be top-level and cannot be nested', () => {
-    return expect(
-      compileCss(css`
-        @custom-variant foo:bar (&:hover, &:focus);
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@custom-variant foo:bar\` defines an invalid variant name. Variants should only contain alphanumeric, dashes, or underscore characters and start with a lowercase letter or number.]`,
-    )
-  })
-
-  test.each([
-    // Cannot be a dash on its own
-    [`@custom-variant - (&);`],
-    // Cannot be multiple dashes on their own
-    [`@custom-variant --- (&);`],
-    // Cannot be an underscore on its own
-    [`@custom-variant _ (&);`],
-    // Cannot be multiple underscores on their own
-    [`@custom-variant ___ (&);`],
-
-    // Cannot start with a dash
-    [`@custom-variant -foo (&);`],
-    [`@custom-variant --foo (&);`],
-    // Cannot start with an underscore
-    [`@custom-variant _foo (&);`],
-    [`@custom-variant __foo (&);`],
-
-    // Cannot end with a dash
-    [`@custom-variant foo- (&);`],
-    [`@custom-variant foo-- (&);`],
-    // Cannot end with an underscore
-    [`@custom-variant foo_ (&);`],
-    [`@custom-variant foo__ (&);`],
-  ])('@custom-variant must have a valid name', (input) => {
-    return expect(compileCss(input)).rejects.toThrow()
-  })
-
-  test('@custom-variant must not contain special characters', () => {
-    return expect(
-      compileCss(css`
-        .foo {
-          @custom-variant foo:bar (&:hover, &:focus);
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(`[Error: \`@custom-variant\` cannot be nested.]`)
-  })
-
-  test('@custom-variant must not have an empty selector', () => {
-    return expect(
-      compileCss(css`
-        @custom-variant foo ();
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@custom-variant foo ()\` selector is invalid.]`,
-    )
-  })
-
-  test('@custom-variant with multiple selectors, cannot be empty', () => {
-    return expect(
-      compileCss(css`
-        @custom-variant foo (.foo, .bar, );
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@custom-variant foo (.foo, .bar, )\` selector is invalid.]`,
-    )
-  })
-
-  test('@custom-variant with no body must include a selector', () => {
-    return expect(
-      compileCss(css`
-        @custom-variant hocus;
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      '[Error: `@custom-variant hocus` has no selector or body.]',
-    )
-  })
-
-  test('@custom-variant with selector must include a body', () => {
-    return expect(
-      compileCss(css`
-        @custom-variant hocus {
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      '[Error: `@custom-variant hocus` has no selector or body.]',
-    )
-  })
-
-  test('@custom-variant cannot have both a selector and a body', () => {
-    return expect(
-      compileCss(css`
-        @custom-variant hocus (&:hover, &:focus) {
-          &:is(.potato) {
-            @slot;
-          }
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@custom-variant hocus\` cannot have both a selector and a body.]`,
-    )
-  })
-
-  describe('body-less syntax', () => {
-    test('selector variant', async () => {
-      expect(
-        await run(
-          ['hocus:underline', 'group-hocus:flex'],
-          css`
-            @custom-variant hocus (&:hover, &:focus);
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
-            display: flex;
-          }
-
-          .hocus\\:underline:hover, .hocus\\:underline:focus {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-
-    test('at-rule variant', async () => {
-      expect(
-        await run(
-          ['any-hover:hover:underline'],
-          css`
-            @custom-variant any-hover (@media (any-hover: hover));
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @media (any-hover: hover) {
-            @media (hover: hover) {
-              .any-hover\\:hover\\:underline:hover {
-                text-decoration-line: underline;
-              }
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('style-rules and at-rules', async () => {
-      expect(
-        await run(
-          ['cant-hover:focus:underline'],
-          css`
-            @custom-variant cant-hover (&:not(:hover), &:not(:active), @media not (any-hover: hover), @media not (pointer: fine));
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          :is(.cant-hover\\:focus\\:underline:not(:hover), .cant-hover\\:focus\\:underline:not(:active)):focus {
-            text-decoration-line: underline;
-          }
-
-          @media not all and (any-hover: hover) {
-            .cant-hover\\:focus\\:underline:focus {
-              text-decoration-line: underline;
-            }
-          }
-
-          @media not all and (pointer: fine) {
-            .cant-hover\\:focus\\:underline:focus {
-              text-decoration-line: underline;
-            }
-          }
-        }
-        "
-      `)
-    })
-  })
-
-  describe('body with @slot syntax', () => {
-    test('selector with @slot', async () => {
-      expect(
-        await run(
-          ['selected:underline', 'group-selected:underline'],
-          css`
-            @custom-variant selected {
-              &[data-selected] {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          :is(:where(.group)[data-selected] .group-selected\\:underline), .selected\\:underline[data-selected] {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-
-    test('grouped selectors with @slot', async () => {
-      expect(
-        await run(
-          ['hocus:underline', 'group-hocus:underline'],
-          css`
-            @custom-variant hocus {
-              &:hover,
-              &:focus {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:underline), .hocus\\:underline:hover, .hocus\\:underline:focus {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-
-    test('multiple selectors with @slot', async () => {
-      expect(
-        await run(
-          ['hocus:underline', 'group-hocus:underline'],
-          css`
-            @custom-variant hocus {
-              &:hover {
-                @slot;
-              }
-
-              &:focus {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          :is(:where(.group):hover .group-hocus\\:underline), :is(:where(.group):focus .group-hocus\\:underline), .hocus\\:underline:hover, .hocus\\:underline:focus {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-
-    test('nested selector with @slot', async () => {
-      expect(
-        await run(
-          ['custom-before:underline'],
-          css`
-            @custom-variant custom-before {
-              & {
-                --has-before: 1;
-                &::before {
-                  @slot;
-                }
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          .custom-before\\:underline {
-            --has-before: 1;
-          }
-
-          .custom-before\\:underline:before {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-
-    test('grouped nested selectors with @slot', async () => {
-      expect(
-        await run(
-          ['custom-before:underline'],
-          css`
-            @custom-variant custom-before {
-              & {
-                --has-before: 1;
-                &::before {
-                  &:hover,
-                  &:focus {
-                    @slot;
-                  }
-                }
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          .custom-before\\:underline {
-            --has-before: 1;
-          }
-
-          .custom-before\\:underline:before:hover, .custom-before\\:underline:before:focus {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-
-    test('nested multiple selectors with @slot', async () => {
-      expect(
-        await run(
-          ['hocus:underline', 'group-hocus:underline'],
-          css`
-            @custom-variant hocus {
-              &:hover {
-                @media (hover: hover) {
-                  @slot;
-                }
-              }
-
-              &:focus {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @media (hover: hover) {
-            :is(:where(.group):hover .group-hocus\\:underline) {
-              text-decoration-line: underline;
-            }
-          }
-
-          :is(:where(.group):focus .group-hocus\\:underline) {
-            text-decoration-line: underline;
-          }
-
-          @media (hover: hover) {
-            .hocus\\:underline:hover {
-              text-decoration-line: underline;
-            }
-          }
-
-          .hocus\\:underline:focus {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-
-    test('selector nested under at-rule with @slot', async () => {
-      expect(
-        await run(
-          ['hocus:underline', 'group-hocus:underline'],
-          css`
-            @custom-variant hocus {
-              @media (hover: hover) {
-                &:hover {
-                  @slot;
-                }
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @media (hover: hover) {
-            :is(:where(.group):hover .group-hocus\\:underline), .hocus\\:underline:hover {
-              text-decoration-line: underline;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('at-rule with @slot', async () => {
-      expect(
-        await run(
-          ['any-hover:underline'],
-          css`
-            @custom-variant any-hover {
-              @media (any-hover: hover) {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @media (any-hover: hover) {
-            .any-hover\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('multiple at-rules with @slot', async () => {
-      expect(
-        await run(
-          ['desktop:underline'],
-          css`
-            @custom-variant desktop {
-              @media (any-hover: hover) {
-                @slot;
-              }
-
-              @media (pointer: fine) {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @media (any-hover: hover) {
-            .desktop\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-
-          @media (pointer: fine) {
-            .desktop\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('nested at-rules with @slot', async () => {
-      expect(
-        await run(
-          ['custom-variant:underline'],
-          css`
-            @custom-variant custom-variant {
-              @media (orientation: landscape) {
-                @media screen {
-                  @slot;
-                }
-
-                @media print {
-                  display: none;
-                }
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @media (orientation: landscape) {
-            @media screen {
-              .custom-variant\\:underline {
-                text-decoration-line: underline;
-              }
-            }
-
-            @media print {
-              .custom-variant\\:underline {
-                display: none;
-              }
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('at-rule and selector with @slot', async () => {
-      expect(
-        await run(
-          ['custom-dark:underline'],
-          css`
-            @custom-variant custom-dark {
-              @media (prefers-color-scheme: dark) {
-                @slot;
-              }
-              &:is(.dark *) {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @media (prefers-color-scheme: dark) {
-            .custom-dark\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-
-          .custom-dark\\:underline:is(.dark *) {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-  })
-
-  describe('@scope', () => {
-    test('arbitrary variant', async () => {
-      expect(await run(['[@scope_(.from)_to_(.to)]:underline'])).toMatchInlineSnapshot(`
-        "
-        @scope (.from) to (.to) {
-          .\\[\\@scope_\\(\\.from\\)_to_\\(\\.to\\)\\]\\:underline {
-            text-decoration-line: underline;
-          }
-        }
-        "
-      `)
-    })
-
-    test('shorthand syntax', async () => {
-      expect(
-        await run(
-          ['scoped:underline'],
-          css`
-            @custom-variant scoped (@scope (.from) to (.to));
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @scope (.from) to (.to) {
-            .scoped\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('with @slot syntax', async () => {
-      expect(
-        await run(
-          ['scoped:underline'],
-          css`
-            @custom-variant scoped {
-              @scope (.from) to (.to) {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @scope (.from) to (.to) {
-            .scoped\\:underline {
-              text-decoration-line: underline;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('@scope in a custom variant combined with user-authored `@scope` rules', async () => {
-      expect(
-        await run(
-          ['blue:bg-blue-500'],
-          css`
-            @layer utilities {
-              @tailwind utilities;
-            }
-
-            @theme inline {
-              --color-blue-500: blue;
-            }
-
-            /* In a variant */
-            @custom-variant blue {
-              @scope ([data-theme='blue']) to ([data-theme]) {
-                @slot;
-              }
-            }
-
-            /* User CSS */
-            .parent {
-              /* @scope with bare declarations */
-              @scope (.from) to (.to) {
-                --x: 1;
-              }
-
-              .child {
-                .a {
-                  /* Variant with @scope used by @apply */
-                  @apply blue:[--x:2];
-                }
-                .b {
-                  /* Variant with @scope used by @apply combined with another variant */
-                  @apply blue:hover:[--x:3];
-                }
-                .c {
-                  /* Variant with @scoped used by @variant */
-                  @variant blue {
-                    --x: 4;
-                  }
-                }
-              }
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @scope ([data-theme="blue"]) to ([data-theme]) {
-            .blue\\:bg-blue-500 {
-              background-color: #00f;
-            }
-          }
-        }
-
-        @scope (.parent .from) to (.to) {
-          :where(:scope) {
-            --x: 1;
-          }
-        }
-
-        @scope ([data-theme="blue"]) to ([data-theme]) {
-          .parent .child .a {
-            --x: 2;
-          }
-
-          @media (hover: hover) {
-            .parent .child .b:hover {
-              --x: 3;
-            }
-          }
-
-          .parent .child .c {
-            --x: 4;
-          }
-        }
-        "
-      `)
-    })
-
-    test('`&` in the `@scope` prelude of a custom variant controls the composition', async () => {
-      expect(
-        await run(
-          ['in-blue:flex', 'blue-self:flex', 'scoped-panel:flex', 'in-blue:hover:flex'],
-          css`
-            /* Default: the utility applies to elements inside the scope */
-            @custom-variant in-blue {
-              @scope ([data-theme='blue']) to ([data-theme]) {
-                @slot;
-              }
-            }
-
-            /* Trailing &: the utility itself becomes the scoping root */
-            @custom-variant blue-self {
-              @scope ([data-theme='blue'] &) to ([data-theme]) {
-                @slot;
-              }
-            }
-
-            /* Leading &: the scoping roots are found inside the utility */
-            @custom-variant scoped-panel {
-              @scope (& .panel) {
-                @slot;
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @scope ([data-theme="blue"]) to ([data-theme]) {
-            .in-blue\\:flex {
-              display: flex;
-            }
-
-            @media (hover: hover) {
-              .in-blue\\:hover\\:flex:hover {
-                display: flex;
-              }
-            }
-          }
-
-          @scope ([data-theme="blue"] .blue-self\\:flex) to ([data-theme]) {
-            :where(:scope) {
-              display: flex;
-            }
-          }
-
-          @scope (.scoped-panel\\:flex .panel) {
-            :where(:scope) {
-              display: flex;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('user-authored `@scope` inside `@variant` keeps its native semantics', async () => {
-      // The `hocus` variant does not use `@scope` itself, so the inner `@scope`
-      // is user CSS and compiles with the native CSS nesting semantics: the
-      // parent selector moves into the prelude, and bare declarations apply to
-      // the scoping root.
-      expect(
-        await compileCss(css`
-          @custom-variant hocus (&:hover, &:focus);
-
-          .btn {
-            @variant hocus {
-              @scope (.from) to (.to) {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope (:is(.btn:hover, .btn:focus) .from) to (.to) {
-          :where(:scope) {
-            --x: 1;
-          }
-        }
-        "
-      `)
-    })
-
-    test('user-authored `@scope` inside a `@variant` that uses `@scope` keeps its native semantics', async () => {
-      // The `blue` variant uses `@scope` itself, so its own `@scope` takes the
-      // variant composition. But the user CSS slotted into its body is marked
-      // as `user` content, so the inner `@scope` keeps its native CSS nesting
-      // semantics: the parent selector moves into the prelude, and bare
-      // declarations apply to the scoping root.
-      expect(
-        await compileCss(css`
-          @custom-variant blue {
-            @scope ([data-theme='blue']) to ([data-theme]) {
-              @slot;
-            }
-          }
-
-          .btn {
-            @variant blue {
-              @scope (.from) to (.to) {
-                --x: 1;
-              }
-            }
-          }
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        @scope ([data-theme="blue"]) to ([data-theme]) {
-          @scope (.btn .from) to (.to) {
-            :where(:scope) {
-              --x: 1;
-            }
-          }
-        }
-        "
-      `)
-    })
-
-    test('@scope nested in a rule, nested in another @scope, with @slot', async () => {
-      // Both `@scope` rules take the variant composition: neither prelude is
-      // made relative to a parent, the outer/inner nesting order is preserved,
-      // and the rule between them composes into the body with the utility's
-      // selector.
-      expect(
-        await run(
-          ['foo:underline'],
-          css`
-            @custom-variant foo {
-              @scope (.outer) to (.outer-limit) {
-                .middle {
-                  @scope (.inner) to (.inner-limit) {
-                    @slot;
-                  }
-                }
-              }
-            }
-
-            @layer utilities {
-              @tailwind utilities;
-            }
-          `,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        @layer utilities {
-          @scope (.outer) to (.outer-limit) {
-            @scope (.inner) to (.inner-limit) {
-              .foo\\:underline .middle {
-                text-decoration-line: underline;
-              }
-            }
-          }
-        }
-        "
-      `)
-    })
-  })
-
-  test('built-in variants can be overridden while keeping their order', async () => {
-    expect(
-      await run(
-        // Make sure the order does not change by including the variants
-        // immediately before and after `dark`
-        ['rtl:flex', 'dark:flex', 'starting:flex'],
-        css`
-          @custom-variant dark (&:is([data-theme='dark'] *));
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), .dark\\:flex:is([data-theme="dark"] *) {
-          display: flex;
-        }
-
-        @starting-style {
-          .starting\\:flex {
-            display: flex;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('at-rule-only variants cannot be used with compound variants', async () => {
-    expect(
-      await run(
-        ['foo:flex', 'group-foo:flex', 'peer-foo:flex', 'has-foo:flex', 'not-foo:flex'],
-        css`
-          @custom-variant foo (@media foo);
-
-          @layer utilities {
-            @tailwind utilities;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        @media not foo {
-          .not-foo\\:flex {
-            display: flex;
-          }
-        }
-
-        @media foo {
-          .foo\\:flex {
-            display: flex;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('@custom-variant can reuse existing @variant in the definition', async () => {
-    expect(
-      await run(
-        ['hocus:flex'],
-        css`
-          @custom-variant hocus {
-            @variant hover {
-              @variant focus {
-                @slot;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @media (hover: hover) {
-        .hocus\\:flex:hover:focus {
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-
-  test('@custom-variant can reuse @custom-variant that is defined later', async () => {
-    expect(
-      await run(
-        ['hocus:flex'],
-        css`
-          @custom-variant hocus {
-            @variant custom-hover {
-              @variant focus {
-                @slot;
-              }
-            }
-          }
-
-          @custom-variant custom-hover (&:hover);
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .hocus\\:flex:hover:focus {
-        display: flex;
-      }
-      "
-    `)
-  })
-
-  test('@custom-variant can reuse existing @variant that is overwritten later', async () => {
-    expect(
-      await run(
-        ['hocus:flex'],
-        css`
-          @custom-variant hocus {
-            @variant hover {
-              @variant focus {
-                @slot;
-              }
-            }
-          }
-
-          @custom-variant hover (&:hover);
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .hocus\\:flex:hover:focus {
-        display: flex;
-      }
-      "
-    `)
-  })
-
-  test('@custom-variant cannot use @variant that eventually results in a circular dependency', async () => {
-    return expect(() =>
-      run(
-        ['foo:flex'],
-        css`
-          @custom-variant custom-variant {
-            @variant foo {
-              @slot;
-            }
-          }
-
-          @custom-variant foo {
-            @variant hover {
-              @variant bar {
-                @slot;
-              }
-            }
-          }
-
-          @custom-variant bar {
-            @variant focus {
-              @variant baz {
-                @slot;
-              }
-            }
-          }
-
-          @custom-variant baz {
-            @variant active {
-              @variant foo {
-                @slot;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(`
-      [Error: Circular dependency detected in custom variants:
-
-      @custom-variant custom-variant {
-        @variant foo { … }
-      }
-      @custom-variant foo { /* ← */
-        @variant bar { … }
-      }
-      @custom-variant bar {
-        @variant baz { … }
-      }
-      @custom-variant baz {
-        @variant foo { … }
-      }
-      ]
-    `)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/19618
-  test('@custom-variant can use a @variant that eventually uses another @custom-variant', async () => {
-    expect(
-      await run(
-        ['a:flex', 'b:flex', 'a:b:flex', 'b:a:flex'],
-        css`
-          @custom-variant a {
-            @slot;
-          }
-
-          @custom-variant b {
-            @variant a {
-              @slot;
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .a\\:flex, .b\\:flex, .a\\:b\\:flex, .b\\:a\\:flex {
-        display: flex;
-      }
-      "
-    `)
-  })
-
-  test('@custom-variant can use a @variant that eventually uses another @custom-variant (2)', async () => {
-    expect(
-      await run(
-        ['a:flex', 'b:flex', 'a:b:flex', 'b:a:flex'],
-        css`
-          @custom-variant a {
-            .a {
-              @slot;
-            }
-          }
-
-          @custom-variant b {
-            .b {
-              @variant a {
-                .a-inside-b {
-                  @slot;
-                }
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .a\\:flex .a, .b\\:flex .b .a .a-inside-b, .a\\:b\\:flex .a .b .a .a-inside-b, .b\\:a\\:flex .b .a .a-inside-b .a {
-        display: flex;
-      }
-      "
-    `)
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/19618#issuecomment-3830775912
-  test('@custom-variant can use existing @slot @variants', async () => {
-    expect(
-      await run(
-        ['hocus:flex'],
-        css`
-          @custom-variant hocus {
-            @variant hover {
-              @variant focus {
-                @slot;
-              }
-            }
-          }
-
-          @custom-variant hover {
-            &:hover {
-              @slot;
-            }
-
-            &[data-hover] {
-              @slot;
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .hocus\\:flex:hover:focus, .hocus\\:flex[data-hover]:focus {
-        display: flex;
-      }
-      "
-    `)
-  })
-
-  test('@custom-variant setup that results in a circular dependency error can be solved', async () => {
-    expect(
-      await run(
-        ['baz:flex'],
-        css`
-          @custom-variant foo {
-            @variant hover {
-              @variant bar {
-                @slot;
-              }
-            }
-          }
-
-          @custom-variant bar {
-            @variant focus {
-              @variant baz {
-                @slot;
-              }
-            }
-          }
-
-          @custom-variant baz {
-            @variant active {
-              @variant foo {
-                @slot;
-              }
-            }
-          }
-
-          /* Break the circle */
-          @custom-variant foo ([data-broken-circle] &);
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      [data-broken-circle] .baz\\:flex:active {
-        display: flex;
-      }
-      "
-    `)
-  })
-})
-
-describe('@utility', () => {
-  test('@utility must be top-level and cannot be nested', () => {
-    return expect(
-      compileCss(css`
-        .foo {
-          @utility foo {
-            color: red;
-          }
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(`[Error: \`@utility\` cannot be nested.]`)
-  })
-
-  test('@utility must include a body', () => {
-    return expect(
-      compileCss(css`
-        @utility foo {
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@utility foo\` is empty. Utilities should include at least one property.]`,
-    )
-  })
-
-  test('@utility cannot contain any special characters', () => {
-    return expect(
-      compileCss(css`
-        @utility 💨 {
-          color: red;
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@utility 💨\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.]`,
-    )
-  })
-
-  test('@utility can handle escape sequences correctly', async () => {
-    expect(
-      await run(
-        ['push-1/2', 'push-50%'],
-        css`
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @utility push-1\/2 {
-            right: 50%;
-          }
-
-          @utility push-50\% {
-            right: 50%;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .push-1\\/2, .push-50\\% {
-          right: 50%;
-        }
-      }
-      "
-    `)
-  })
-
-  test('A functional @utility must end in -*', () => {
-    return expect(
-      compileCss(css`
-        @utility foo* {
-          color: red;
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@utility foo*\` defines an invalid utility name. A functional utility must end in \`-*\`.]`,
-    )
-  })
-
-  test('Only the last part of a functional @utility can be dynamic', () => {
-    return expect(
-      compileCss(css`
-        @utility my-*-utility {
-          color: red;
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@utility my-*-utility\` defines an invalid utility name. The dynamic portion marked by \`-*\` must appear once at the end.]`,
-    )
-  })
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/19505
-  test('@utility name cannot contain multiple `/` characters', async () => {
-    expect(
-      await run(
-        ['ui/button'],
-        css`
-          @utility ui/button {
-            display: inline-flex;
-            background: blue;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(
-      `
-      "
-      .ui\\/button {
-        background: #00f;
-        display: inline-flex;
-      }
-      "
-    `,
-    )
-
-    await expect(
-      compileCss(css`
-        @utility ui/button/sm {
-          display: inline-flex;
-          background: blue;
-          font-size: 12px;
-        }
-      `),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: \`@utility ui/button/sm\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.]`,
-    )
-  })
-})
-
-test('addBase', async () => {
-  expect(
-    await run(
-      ['underline'],
-      css`
-        @plugin "my-plugin";
-        @layer base, utilities;
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: ({ addBase }: PluginAPI) => {
-            addBase({
-              body: {
-                'font-feature-settings': '"tnum"',
-              },
-            })
-          },
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer base {
-      body {
-        font-feature-settings: "tnum";
-      }
-    }
-
-    @layer utilities {
-      .underline {
-        text-decoration-line: underline;
-      }
-    }
-    "
-  `)
-})
-
-test('JS APIs support @variant', async () => {
-  expect(
-    await run(
-      ['underline', 'foo', 'bar-one'],
-      css`
-        @plugin "my-plugin";
-        @layer base, utilities;
-        @layer utilities {
-          @tailwind utilities;
-        }
-      `,
-      {
-        loadModule: async () => ({
-          path: '',
-          base: '/root',
-          module: ({ addBase, addUtilities, matchUtilities }: PluginAPI) => {
-            addBase({ body: { '@variant dark': { color: 'red' } } })
-            addUtilities({ '.foo': { '@variant dark': { '--foo': 'foo' } } })
-            matchUtilities(
-              { bar: (value) => ({ '@variant dark': { '--bar': value } }) },
-              { values: { one: '1' } },
-            )
-          },
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer base {
-      @media (prefers-color-scheme: dark) {
-        body {
-          color: red;
-        }
-      }
-    }
-
-    @layer utilities {
-      .underline {
-        text-decoration-line: underline;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        .bar-one {
-          --bar: 1;
-        }
-
-        .foo {
-          --foo: foo;
-        }
-      }
-    }
-    "
-  `)
-})
-
-it("should error when `layer(…)` is used, but it's not the first param", async () => {
-  await expect(async () => {
-    return await compileCss(
-      css`
-        @import './bar.css' supports(display: grid) layer(utilities);
-      `,
-      {
-        async loadStylesheet() {
-          return {
-            path: '',
-            base: '/bar.css',
-            content: css`
-              .foo {
-                @apply underline;
-              }
-            `,
-          }
-        },
-      },
-    )
-  }).rejects.toThrowErrorMatchingInlineSnapshot(
-    `[Error: \`layer(…)\` in an \`@import\` should come before any other functions or conditions]`,
-  )
-})
-
-describe('`@reference "…" imports`', () => {
-  test('recursively removes styles', async () => {
-    let loadStylesheet = async (id: string, base = '/root/foo') => {
-      if (id === './foo/baz.css') {
-        return {
-          base,
-          path: '',
-          content: css`
-            .foo {
-              color: red;
-            }
-            @utility foo {
-              color: red;
-            }
-            @theme {
-              --breakpoint-md: 768px;
-            }
-            @custom-variant hocus (&:hover, &:focus);
-          `,
-        }
-      }
-      return {
-        path: '',
-        base: '/root/foo',
-        content: css`
-          @import './foo/baz.css';
-        `,
-      }
-    }
-
-    expect(
-      await compileCss(
-        css`
-          @reference './foo/bar.css';
-
-          .bar {
-            @apply md:hocus:foo;
-          }
-        `,
-        { loadStylesheet },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 768px) {
-        .bar:hover, .bar:focus {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('does not generate utilities', async () => {
-    expect(
-      await run(
-        ['text-underline', 'border'],
-        css`
-          @reference './foo/bar.css';
-        `,
-        {
-          loadStylesheet: async (id: string, base = '/root/foo') => {
-            if (id === './foo/baz.css') {
-              return {
-                base,
-                path: '',
-                content: css`
-                  @layer utilities {
-                    @tailwind utilities;
-                  }
-                `,
-              }
-            }
-            return {
-              path: '',
-              base: '/root/foo',
-              content: css`
-                @import './foo/baz.css';
-              `,
-            }
-          },
-        },
-      ),
-    ).toEqual('')
-  })
-
-  test('removes all @keyframes, even those contributed by JavasScript plugins', async () => {
-    expect(
-      await run(
-        ['animate-spin', 'match-utility-initial', 'match-components-initial'],
-        css`
-          @media reference {
-            @layer theme, base, components, utilities;
-            @layer theme {
-              @theme {
-                --animate-spin: spin 1s linear infinite;
-                --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-                @keyframes spin {
-                  to {
-                    transform: rotate(360deg);
-                  }
-                }
-              }
-            }
-            @layer base {
-              @keyframes ping {
-                75%,
-                100% {
-                  transform: scale(2);
-                  opacity: 0;
-                }
-              }
-            }
-            @plugin "my-plugin";
-          }
-
-          .bar {
-            @apply animate-spin;
-          }
-        `,
-        {
-          loadModule: async () => ({
-            path: '',
-            base: '/root',
-            module: ({
-              addBase,
-              addUtilities,
-              addComponents,
-              matchUtilities,
-              matchComponents,
-            }: PluginAPI) => {
-              addBase({
-                '@keyframes base': { '100%': { opacity: '0' } },
-              })
-              addUtilities({
-                '@keyframes utilities': { '100%': { opacity: '0' } },
-              })
-              addComponents({
-                '@keyframes components ': { '100%': { opacity: '0' } },
-              })
-              matchUtilities(
-                {
-                  'match-utility': (_value) => ({
-                    '@keyframes match-utilities': { '100%': { opacity: '0' } },
-                  }),
-                },
-                { values: { initial: 'initial' } },
-              )
-              matchComponents(
-                {
-                  'match-components': (_value) => ({
-                    '@keyframes match-components': { '100%': { opacity: '0' } },
-                  }),
-                },
-                { values: { initial: 'initial' } },
-              )
-            },
-          }),
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bar {
-        animation: var(--animate-spin, spin 1s linear infinite);
-      }
-
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-      "
-    `)
-  })
-
-  test('emits CSS variable fallback and keyframes defined inside @reference-ed files', async () => {
-    let loadStylesheet = async (id: string, base = '/root') => {
-      switch (id) {
-        case './one.css': {
-          return {
-            base,
-            path: '',
-            content: css`
-              @import './two.css' layer(two);
-            `,
-          }
-        }
-        case './two.css': {
-          return {
-            base,
-            path: '',
-            content: css`
-              @import './three.css' layer(three);
-            `,
-          }
-        }
-        case './three.css': {
-          return {
-            base,
-            path: '',
-            content: css`
-              .foo {
-                color: red;
-              }
-              @theme {
-                --color-red: red;
-                --animate-wiggle: wiggle 1s ease-in-out infinite;
-                @keyframes wiggle {
-                  0%,
-                  100% {
-                    transform: rotate(-3deg);
-                  }
-                  50% {
-                    transform: rotate(3deg);
-                  }
-                }
-              }
-            `,
-          }
-        }
-      }
-
-      throw new Error('unreachable')
-    }
-
-    expect(
-      await compileCss(
-        css`
-          @reference './one.css';
-          .bar {
-            @apply text-red animate-wiggle;
-          }
-        `,
-        { loadStylesheet },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bar {
-        animation: var(--animate-wiggle, wiggle 1s ease-in-out infinite);
-        color: var(--color-red, red);
-      }
-
-      @keyframes wiggle {
-        0%, 100% {
-          transform: rotate(-3deg);
-        }
-
-        50% {
-          transform: rotate(3deg);
-        }
-      }
-      "
-    `)
-  })
-
-  test('supports `@import "…" reference` syntax', async () => {
-    let loadStylesheet = async () => {
-      return {
-        path: '',
-        base: '/root/foo',
-        content: css`
-          .foo {
-            color: red;
-          }
-          @utility foo {
-            color: red;
-          }
-          @theme {
-            --breakpoint-md: 768px;
-          }
-          @custom-variant hocus (&:hover, &:focus);
-        `,
-      }
-    }
-
-    expect(
-      await compileCss(
-        css`
-          @import './foo/bar.css' reference;
-
-          .bar {
-            @apply md:hocus:foo;
-          }
-        `,
-        { loadStylesheet },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 768px) {
-        .bar:hover, .bar:focus {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-
-  test('removes styles when the import resolver was handled outside of Tailwind CSS', async () => {
-    expect(
-      await compileCss(css`
-        @media reference {
-          @layer theme {
-            @theme {
-              --breakpoint-md: 48rem;
-            }
-            .foo {
-              color: red;
-            }
-          }
-          @utility foo {
-            color: red;
-          }
-          @custom-variant hocus (&:hover, &:focus);
-        }
-
-        .bar {
-          @apply md:hocus:foo;
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      @media (min-width: 48rem) {
-        .bar:hover, .bar:focus {
-          color: red;
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('@variant', () => {
-  it('should convert legacy body-less `@variant` as a `@custom-variant`', async () => {
-    expect(
-      await run(
-        ['hocus:underline'],
-        css`
-          @variant hocus (&:hover, &:focus);
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .hocus\\:underline:hover, .hocus\\:underline:focus {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  })
-
-  it('should convert legacy `@variant` with `@slot` as a `@custom-variant`', async () => {
-    expect(
-      await run(
-        ['hocus:underline'],
-        css`
-          @variant hocus {
-            &:hover {
-              @slot;
-            }
-
-            &:focus {
-              @slot;
-            }
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .hocus\\:underline:hover, .hocus\\:underline:focus {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  })
-
-  it('should be possible to use `@variant` in your CSS', async () => {
-    expect(
-      await compileCss(css`
-        .btn {
-          background: black;
-
-          @variant dark {
-            background: white;
-          }
-        }
-
-        @variant hover {
-          @variant landscape {
-            .btn2 {
-              color: red;
-            }
-          }
-        }
-
-        @variant hover {
-          .foo {
-            color: red;
-          }
-          @variant landscape {
-            .bar {
-              color: blue;
-            }
-          }
-          .baz {
-            @variant portrait {
-              color: green;
-            }
-          }
-        }
-
-        @media something {
-          @variant landscape {
-            @page {
-              color: red;
-            }
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .btn {
-        background: #000;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        .btn {
-          background: #fff;
-        }
-      }
-
-      @media (hover: hover) {
-        @media (orientation: landscape) {
-          :scope:hover .btn2 {
-            color: red;
-          }
-        }
-
-        :scope:hover .foo {
-          color: red;
-        }
-
-        @media (orientation: landscape) {
-          :scope:hover .bar {
-            color: #00f;
-          }
-        }
-
-        @media (orientation: portrait) {
-          :scope:hover .baz {
-            color: green;
-          }
-        }
-      }
-
-      @media something {
-        @media (orientation: landscape) {
-          @page {
-            color: red;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  it('should be possible to use `@variant` in your CSS with a `@custom-variant` that is defined later', async () => {
-    expect(
-      await compileCss(css`
-        .btn {
-          background: black;
-
-          @variant hocus {
-            background: white;
-          }
-        }
-
-        @custom-variant hocus (&:hover, &:focus);
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .btn {
-        background: #000;
-      }
-
-      .btn:hover, .btn:focus {
-        background: #fff;
-      }
-      "
-    `)
-  })
-
-  it('should be possible to use nested `@variant` rules', async () => {
-    expect(
-      await run(
-        ['disabled:focus:underline'],
-        css`
-          .btn {
-            background: black;
-
-            @variant disabled {
-              @variant focus {
-                background: white;
-              }
-            }
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .btn {
-        background: #000;
-      }
-
-      .btn:disabled:focus {
-        background: #fff;
-      }
-
-      .disabled\\:focus\\:underline:disabled:focus {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  })
-
-  describe('comma-separated `@variant` rules', () => {
-    it('should be possible to use comma-separated `@variant` rules', async () => {
-      let input = css`
-        .btn {
-          background: black;
-
-          @variant hover, focus {
-            background: red;
-          }
-        }
-        @tailwind utilities;
-      `
-
-      expect(await compileCss(input)).toMatchInlineSnapshot(`
-        "
-        .btn {
-          background: #000;
-        }
-
-        @media (hover: hover) {
-          .btn:hover {
-            background: red;
-          }
-        }
-
-        .btn:focus {
-          background: red;
-        }
-        "
-      `)
-
-      expect(await compileCss(input)).toEqual(
-        await compileCss(css`
-          .btn {
-            background: black;
-
-            @variant hover {
-              background: red;
-            }
-            @variant focus {
-              background: red;
-            }
-          }
-          @tailwind utilities;
-        `),
-      )
-    })
-
-    it.each(
-      Array.from(
-        cartesian(
-          ['', ' ', '  ', '\t', '\t\t'], // Before
-          ['', ' ', '  ', '\t', '\t\t'], // After
-        ),
-      ),
-    )(
-      "should handle optional whitespace ('%s', '%s') between `@variant` variants",
-      async (before, after) => {
-        expect(
-          await compileCss(css`
-            .btn {
-              background: black;
-
-              @variant hover${before},${after}focus {
-                background: red;
-              }
-            }
-            @tailwind utilities;
-          `),
-        ).toMatchInlineSnapshot(`
-          "
-          .btn {
-            background: #000;
-          }
-
-          @media (hover: hover) {
-            .btn:hover {
-              background: red;
-            }
-          }
-
-          .btn:focus {
-            background: red;
-          }
-          "
-        `)
-      },
-    )
-
-    it('should handle variants containing a `,` inside', async () => {
-      expect(
-        await compileCss(css`
-          .btn {
-            background: black;
-
-            @variant [&:is(:hover,:focus)], disabled {
-              background: red;
-            }
-          }
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .btn {
-          background: #000;
-        }
-
-        .btn:is(:hover, :focus), .btn:disabled {
-          background: red;
-        }
-        "
-      `)
-    })
-
-    it('should handle nested comma-separated variants', async () => {
-      let input = css`
-        .btn {
-          background: black;
-
-          @variant hover, focus {
-            background: red;
-
-            @variant active, disabled {
-              background: blue;
-            }
-          }
-        }
-        @tailwind utilities;
-      `
-
-      expect(await compileCss(input)).toMatchInlineSnapshot(`
-        "
-        .btn {
-          background: #000;
-        }
-
-        @media (hover: hover) {
-          .btn:hover {
-            background: red;
-          }
-
-          .btn:hover:active, .btn:hover:disabled {
-            background: #00f;
-          }
-        }
-
-        .btn:focus {
-          background: red;
-        }
-
-        .btn:focus:active, .btn:focus:disabled {
-          background: #00f;
-        }
-        "
-      `)
-
-      expect(await compileCss(input)).toEqual(
-        await compileCss(css`
-          .btn {
-            background: black;
-
-            @variant hover {
-              background: red;
-
-              @variant active {
-                background: blue;
-              }
-
-              @variant disabled {
-                background: blue;
-              }
-            }
-
-            @variant focus {
-              background: red;
-
-              @variant active {
-                background: blue;
-              }
-
-              @variant disabled {
-                background: blue;
-              }
-            }
-          }
-          @tailwind utilities;
-        `),
-      )
-    })
-
-    it('should error on invalid variants (trailing comma)', async () => {
-      await expect(
-        compileCss(css`
-          .btn {
-            background: black;
-
-            @variant hover,focus, {
-              background: red;
-            }
-          }
-          @tailwind utilities;
-        `),
-      ).rejects.toThrowErrorMatchingInlineSnapshot(
-        `[Error: Cannot use \`@variant\` with empty variant]`,
-      )
-    })
-
-    it('should error on invalid variants (double comma)', async () => {
-      await expect(
-        compileCss(css`
-          .btn {
-            background: black;
-
-            @variant hover,,focus {
-              background: red;
-            }
-          }
-          @tailwind utilities;
-        `),
-      ).rejects.toThrowErrorMatchingInlineSnapshot(
-        `[Error: Cannot use \`@variant\` with empty variant]`,
-      )
-    })
-  })
-
-  describe('stacked `@variant` rules', () => {
-    it('should handle stacked variants', async () => {
-      expect(
-        await compileCss(css`
-          .btn {
-            background: black;
-
-            @variant hover:focus {
-              background: red;
-            }
-          }
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .btn {
-          background: #000;
-        }
-
-        @media (hover: hover) {
-          .btn:hover:focus {
-            background: red;
-          }
-        }
-        "
-      `)
-    })
-
-    it('should handle stacked variants & comma-separated variants', async () => {
-      expect(
-        await compileCss(css`
-          .btn {
-            background: black;
-
-            @variant hover:focus, disabled {
-              background: red;
-            }
-          }
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .btn {
-          background: #000;
-        }
-
-        @media (hover: hover) {
-          .btn:hover:focus {
-            background: red;
-          }
-        }
-
-        .btn:disabled {
-          background: red;
-        }
-        "
-      `)
-    })
-
-    it('should handle variants containing a `:` inside', async () => {
-      expect(
-        await compileCss(css`
-          .btn {
-            background: black;
-
-            @variant [&:is(:hover,:focus)]:disabled, aria-disabled:hover {
-              background: red;
-            }
-          }
-          @tailwind utilities;
-        `),
-      ).toMatchInlineSnapshot(`
-        "
-        .btn {
-          background: #000;
-        }
-
-        .btn:is(:hover, :focus):disabled {
-          background: red;
-        }
-
-        @media (hover: hover) {
-          .btn[aria-disabled="true"]:hover {
-            background: red;
-          }
-        }
-        "
-      `)
-    })
-  })
-
-  it('should be possible to use compound and stacked variants in `@variant`', async () => {
-    let input = css`
-      .btn {
-        background: black;
-
-        @variant data-a, data-b:data-c {
-          background: red;
-
-          @variant data-d, data-e:data-f {
-            background: blue;
-          }
-        }
-      }
-      @tailwind utilities;
-    `
-
-    expect(await compileCss(input)).toMatchInlineSnapshot(`
-      "
-      .btn {
-        background: #000;
-      }
-
-      .btn[data-a] {
-        background: red;
-      }
-
-      .btn[data-a][data-d], .btn[data-a][data-e][data-f] {
-        background: #00f;
-      }
-
-      .btn[data-b][data-c] {
-        background: red;
-      }
-
-      .btn[data-b][data-c][data-d], .btn[data-b][data-c][data-e][data-f] {
-        background: #00f;
-      }
-      "
-    `)
-
-    expect(await compileCss(input)).toEqual(
-      await compileCss(css`
-        .btn {
-          background: black;
-
-          @variant data-a {
-            background: red;
-
-            @variant data-d {
-              background: blue;
-            }
-
-            @variant data-e {
-              @variant data-f {
-                background: blue;
-              }
-            }
-          }
-
-          @variant data-b {
-            @variant data-c {
-              background: red;
-
-              @variant data-d {
-                background: blue;
-              }
-
-              @variant data-e {
-                @variant data-f {
-                  background: blue;
-                }
-              }
-            }
-          }
-        }
-        @tailwind utilities;
-      `),
-    )
-  })
-
-  it('should be possible to use `@variant` with a funky looking variants', async () => {
-    expect(
-      await compileCss(css`
-        @theme inline reference {
-          --container-md: 768px;
-        }
-
-        .btn {
-          background: black;
-
-          @variant @md {
-            @variant [&.foo] {
-              background: white;
-            }
-          }
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .btn {
-        background: #000;
-      }
-
-      @container (min-width: 768px) {
-        .btn.foo {
-          background: #fff;
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('`color-mix(…)` polyfill', () => {
-  it('creates an inlined variable version of the color-mix(…) usages', async () => {
-    expect(
-      await run(
-        ['text-red-500/50'],
-        css`
-          @theme {
-            --color-red-500: oklch(63.7% 0.237 25.331);
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: oklch(63.7% .237 25.331);
-      }
-
-      .text-red-500\\/50 {
-        color: #fb2c3680;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-red-500\\/50 {
-          color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  it('creates an inlined variable version of the color-mix(…) usages when it resolves to a var(…) containing another theme variable', async () => {
-    expect(
-      await run(
-        ['text-red/50'],
-        css`
-          @theme {
-            --color-red: var(--color-red-500);
-            --color-red-500: oklch(63.7% 0.237 25.331);
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red: var(--color-red-500);
-        --color-red-500: oklch(63.7% .237 25.331);
-      }
-
-      .text-red\\/50 {
-        color: #fb2c3680;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-red\\/50 {
-          color: color-mix(in oklab, var(--color-red) 50%, transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  it('works for color values in the first and second position', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --color-red-500: oklch(63.7% 0.237 25.331);
-          --color-orange-500: oklch(70.5% 0.213 47.604);
-        }
-        @tailwind utilities;
-        .mixed {
-          color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500));
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: oklch(63.7% .237 25.331);
-        --color-orange-500: oklch(70.5% .213 47.604);
-      }
-
-      .mixed {
-        color: #fc4d1b;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .mixed {
-          color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500));
-        }
-      }
-      "
-    `)
-  })
-
-  it('works for nested `color-mix(…)` calls', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --color-red-500: oklch(63.7% 0.237 25.331);
-        }
-        @tailwind utilities;
-        .stacked {
-          color: color-mix(
-            in lch,
-            color-mix(in lch, var(--color-red-500) 50%, transparent) 50%,
-            transparent
-          );
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: oklch(63.7% .237 25.331);
-      }
-
-      .stacked {
-        color: lch(55.5764% 89.7903 33.1932 / .25098);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .stacked {
-          color: color-mix(in lch, color-mix(in lch, var(--color-red-500) 50%, transparent) 50%, transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  it('works with multiple `color-mix(…)` functions in one declaration', async () => {
-    expect(
-      await compileCss(css`
-        @theme {
-          --color-red-500: oklch(63.7% 0.237 25.331);
-          --color-orange-500: oklch(70.5% 0.213 47.604);
-        }
-        @tailwind utilities;
-        .gradient {
-          background: linear-gradient(
-            90deg,
-            color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%,
-            color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%,
-            100%
-          );
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: oklch(63.7% .237 25.331);
-        --color-orange-500: oklch(70.5% .213 47.604);
-      }
-
-      .gradient {
-        background: linear-gradient(90deg, #fb2c3680 0%, #fe6e0080 0%, 100%);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .gradient {
-          background: linear-gradient(90deg, color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%, color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%, 100%);
-        }
-      }
-      "
-    `)
-  })
-
-  it('works with no spaces after the `var(…)`', async () => {
-    expect(
-      await compileCss(
-        // prettier-ignore
-        css`
-          @theme {
-            --color-red-500: oklch(63.7% 0.237 25.331);
-          }
-          @tailwind utilities;
-          .text-red-500\/50 {
-            color: color-mix(in oklab,var(--color-red-500)50%,transparent);
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: oklch(63.7% .237 25.331);
-      }
-
-      .text-red-500\\/50 {
-        color: #fb2c3680;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-red-500\\/50 {
-          color: color-mix(in oklab,var(--color-red-500)50%,transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  it('uses the first color value as the fallback when the `color-mix(…)` function contains non-theme variables', async () => {
-    expect(
-      await run(
-        ['text-(--my-color)/50', 'text-red-500/(--my-opacity)', 'text-(--my-color)/(--my-opacity)'],
-        css`
-          @theme {
-            --color-red-500: oklch(63.7% 0.237 25.331);
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: oklch(63.7% .237 25.331);
-      }
-
-      .text-\\(--my-color\\)\\/\\(--my-opacity\\) {
-        color: var(--my-color);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-\\(--my-color\\)\\/\\(--my-opacity\\) {
-          color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent);
-        }
-      }
-
-      .text-\\(--my-color\\)\\/50 {
-        color: var(--my-color);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-\\(--my-color\\)\\/50 {
-          color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        }
-      }
-
-      .text-red-500\\/\\(--my-opacity\\) {
-        color: oklch(63.7% .237 25.331);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-red-500\\/\\(--my-opacity\\) {
-          color: color-mix(in oklab, var(--color-red-500) var(--my-opacity), transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  it('uses the first color value as the fallback when the `color-mix(…)` function contains currentcolor', async () => {
-    expect(await run(['text-current/50'])).toMatchInlineSnapshot(`
-      "
-      .text-current\\/50 {
-        color: currentColor;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-current\\/50 {
-          color: color-mix(in oklab, currentcolor 50%, transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  it('uses the first color value as the fallback when the `color-mix(…)` function contains theme variables that resolves to other variables', async () => {
-    expect(
-      await run(
-        ['text-red/50'],
-        css`
-          @tailwind utilities;
-          @theme {
-            --color-red: var(--my-red);
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .text-red\\/50 {
-        color: var(--color-red);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-red\\/50 {
-          color: color-mix(in oklab, var(--color-red) 50%, transparent);
-        }
-      }
-
-      :root, :host {
-        --color-red: var(--my-red);
-      }
-      "
-    `)
-  })
-
-  it('uses the first color value of the inner most `color-mix(…)` function as the fallback when nested `color-mix(…)` function all contain non-theme variables', async () => {
-    expect(
-      await compileCss(css`
-        @tailwind utilities;
-        .stacked {
-          color: color-mix(
-            in oklab,
-            color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent)
-              var(--my-outer-opacity),
-            transparent
-          );
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      .stacked {
-        color: var(--my-color);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .stacked {
-          color: color-mix(in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  it('does not create a fallback when all color values are statically analyzable (lightningcss will flatten this)', async () => {
-    expect(
-      await run(
-        ['text-red-500/50'],
-        css`
-          @theme inline {
-            --color-red-500: oklch(63.7% 0.237 25.331);
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .text-red-500\\/50 {
-        color: oklab(63.7% .214 .101 / .5);
-      }
-      "
-    `)
-  })
-
-  it('also replaces eventual variables in opacity values', async () => {
-    expect(
-      await run(
-        ['text-red-500/(--my-half)'],
-        css`
-          @theme {
-            --my-half: 50%;
-            --color-red-500: oklch(63.7% 0.237 25.331);
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --my-half: 50%;
-        --color-red-500: oklch(63.7% .237 25.331);
-      }
-
-      .text-red-500\\/\\(--my-half\\) {
-        color: #fb2c3680;
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .text-red-500\\/\\(--my-half\\) {
-          color: color-mix(in oklab, var(--color-red-500) var(--my-half), transparent);
-        }
-      }
-      "
-    `)
-  })
-
-  it('does not delete theme variables from the output', async () => {
-    expect(
-      await run(
-        ['text-red-500', 'shadow-xl', 'opacity-disabled'],
-        css`
-          @layer theme {
-            @theme {
-              --color-red-500: red;
-              --shadow-xl: 0 6px 18px 4px color-mix(in oklab, var(--color-red-500) 25%, transparent);
-              --opacity-disabled: 50%;
-            }
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-shadow: 0 0 #0000;
-            --tw-shadow-color: initial;
-            --tw-shadow-alpha: 100%;
-            --tw-inset-shadow: 0 0 #0000;
-            --tw-inset-shadow-color: initial;
-            --tw-inset-shadow-alpha: 100%;
-            --tw-ring-color: initial;
-            --tw-ring-shadow: 0 0 #0000;
-            --tw-inset-ring-color: initial;
-            --tw-inset-ring-shadow: 0 0 #0000;
-            --tw-ring-inset: initial;
-            --tw-ring-offset-width: 0px;
-            --tw-ring-offset-color: #fff;
-            --tw-ring-offset-shadow: 0 0 #0000;
-          }
-        }
-      }
-
-      @layer theme {
-        :root, :host {
-          --color-red-500: red;
-          --opacity-disabled: 50%;
-        }
-      }
-
-      .text-red-500 {
-        color: var(--color-red-500);
-      }
-
-      .opacity-disabled {
-        opacity: var(--opacity-disabled);
-      }
-
-      .shadow-xl {
-        --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, #ff000040);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .shadow-xl {
-          --tw-shadow: 0 6px 18px 4px var(--tw-shadow-color, color-mix(in oklab, var(--color-red-500) 25%, transparent));
-        }
-      }
-
-      .shadow-xl {
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-
-      @property --tw-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-
-      @property --tw-shadow-color {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-shadow-alpha {
-        syntax: "<percentage>";
-        inherits: false;
-        initial-value: 100%;
-      }
-
-      @property --tw-inset-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-
-      @property --tw-inset-shadow-color {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-inset-shadow-alpha {
-        syntax: "<percentage>";
-        inherits: false;
-        initial-value: 100%;
-      }
-
-      @property --tw-ring-color {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-ring-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-
-      @property --tw-inset-ring-color {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-inset-ring-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-
-      @property --tw-ring-inset {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --tw-ring-offset-width {
-        syntax: "<length>";
-        inherits: false;
-        initial-value: 0;
-      }
-
-      @property --tw-ring-offset-color {
-        syntax: "*";
-        inherits: false;
-        initial-value: #fff;
-      }
-
-      @property --tw-ring-offset-shadow {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0 0 #0000;
-      }
-      "
-    `)
-  })
-
-  it('does not apply optimizations when already inside a @supports (color: color-mix... block', async () => {
-    expect(
-      await run(
-        ['mixed'],
-        css`
-          @tailwind utilities;
-          @utility mixed {
-            @supports (color: color-mix(in lab, red, red)) {
-              background: color-mix(in oklab, var(--color-1), var(--color-2) 0%);
-            }
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @supports (color: color-mix(in lab, red, red)) {
-        .mixed {
-          background: color-mix(in oklab, var(--color-1), var(--color-2) 0%);
-        }
-      }
-      "
-    `)
-  })
-})
-
-describe('`@property` polyfill', async () => {
-  it('emits fallbacks', async () => {
-    expect(
-      await compileCss(css`
-        @tailwind utilities;
-
-        @property --no-inherit-no-value {
-          syntax: '*';
-          inherits: false;
-        }
-        @property --no-inherit-value {
-          syntax: '*';
-          inherits: false;
-          initial-value: red;
-        }
-        @property --inherit-no-value {
-          syntax: '*';
-          inherits: true;
-        }
-        @property --inherit-value {
-          syntax: '*';
-          inherits: true;
-          initial-value: red;
-        }
-      `),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          :root, :host {
-            --inherit-no-value: initial;
-            --inherit-value: red;
-          }
-
-          *, :before, :after, ::backdrop {
-            --no-inherit-no-value: initial;
-            --no-inherit-value: red;
-          }
-        }
-      }
-
-      @property --no-inherit-no-value {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --no-inherit-value {
-        syntax: "*";
-        inherits: false;
-        initial-value: red;
-      }
-
-      @property --inherit-no-value {
-        syntax: "*";
-        inherits: true
-      }
-
-      @property --inherit-value {
-        syntax: "*";
-        inherits: true;
-        initial-value: red;
-      }
-      "
-    `)
-  })
-
-  it('emitting fallbacks can be disabled (necessary for CSS modules)', async () => {
-    expect(
-      await compileCss(
-        css`
-          @tailwind utilities;
-
-          @property --no-inherit-no-value {
-            syntax: '*';
-            inherits: false;
-          }
-          @property --no-inherit-value {
-            syntax: '*';
-            inherits: false;
-            initial-value: red;
-          }
-          @property --inherit-no-value {
-            syntax: '*';
-            inherits: true;
-          }
-          @property --inherit-value {
-            syntax: '*';
-            inherits: true;
-            initial-value: red;
-          }
-        `,
-        {
-          polyfills: Polyfills.None,
-        },
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @property --no-inherit-no-value {
-        syntax: "*";
-        inherits: false
-      }
-
-      @property --no-inherit-value {
-        syntax: "*";
-        inherits: false;
-        initial-value: red;
-      }
-
-      @property --inherit-no-value {
-        syntax: "*";
-        inherits: true
-      }
-
-      @property --inherit-value {
-        syntax: "*";
-        inherits: true;
-        initial-value: red;
-      }
-      "
-    `)
-  })
-})
-
-describe('feature detection', () => {
-  test('using `@tailwind utilities`', async () => {
-    let compiler = await compile(css`
-      @tailwind utilities;
-    `)
-
-    expect(compiler.features & Features.Utilities).toBeTruthy()
-  })
-
-  test('using `@apply`', async () => {
-    let compiler = await compile(css`
-      .foo {
-        @apply underline;
-      }
-    `)
-
-    expect(compiler.features & Features.AtApply).toBeTruthy()
-  })
-
-  test('using `@import`', async () => {
-    let compiler = await compile(
-      css`
-        @import 'tailwindcss/preflight';
-      `,
-      { loadStylesheet: async (_, base) => ({ base, path: '', content: '' }) },
-    )
-
-    expect(compiler.features & Features.AtImport).toBeTruthy()
-  })
-
-  test('using `@reference`', async () => {
-    let compiler = await compile(
-      css`
-        @reference 'tailwindcss/preflight';
-      `,
-      { loadStylesheet: async (_, base) => ({ base, path: '', content: '' }) },
-    )
-
-    // There's little difference between `@reference` and `@import` on a feature
-    // level as it's just like an import but with side-effect behavior.
-    //
-    // It's really just shorthand for `@import "…" reference;`
-    expect(compiler.features & Features.AtImport).toBeTruthy()
-  })
-
-  test('using `theme(…)`', async () => {
-    let compiler = await compile(
-      css`
-        @theme {
-          --color-red: #f00;
-        }
-
-        .foo {
-          color: theme(--color-red);
-        }
-      `,
-      { loadStylesheet: async (_, base) => ({ base, path: '', content: '' }) },
-    )
-
-    expect(compiler.features & Features.ThemeFunction).toBeTruthy()
-  })
-
-  test('using `@plugin`', async () => {
-    let compiler = await compile(
-      css`
-        @plugin "./some-plugin.js";
-      `,
-      { loadModule: async (_, base) => ({ base, path: '', module: () => {} }) },
-    )
-
-    expect(compiler.features & Features.JsPluginCompat).toBeTruthy()
-  })
-
-  test('using `@config`', async () => {
-    let compiler = await compile(
-      css`
-        @config "./some-config.js";
-      `,
-      { loadModule: async (_, base) => ({ base, path: '', module: {} }) },
-    )
-
-    expect(compiler.features & Features.JsPluginCompat).toBeTruthy()
-  })
-
-  test('using `@variant`', async () => {
-    let compiler = await compile(css`
-      .foo {
-        @variant dark {
-          color: red;
-        }
-      }
-    `)
-
-    expect(compiler.features & Features.Variants).toBeTruthy()
-  })
-
-  test('legacy `@variant` syntax does not trigger the variant feature', async () => {
-    let compiler = await compile(css`
-      @variant dark (&:is(.dark, .dark *));
-    `)
-
-    expect(compiler.features & Features.Variants).toBeFalsy()
-  })
-
-  test('`@tailwind utilities` is ignored inside `@reference`', async () => {
-    let compiler = await compile(
-      css`
-        @reference "tailwindcss/utilities";
-      `,
-      {
-        async loadStylesheet(_id, base) {
-          return {
-            base,
-            path: '',
-            content: css`
-              @tailwind utilities;
-            `,
-          }
-        },
-      },
-    )
-
-    // We see @tailwind utilities but because of @reference it is ignored
-    expect(compiler.features & Features.AtImport).toBeTruthy()
-    expect(compiler.features & Features.Utilities).toBeFalsy()
-  })
-
-  test('using `@theme`', async () => {
-    let compiler = await compile(css`
-      @theme {
-        --tracking-narrower: -0.02em;
-      }
-    `)
-
-    // We see @theme
-    expect(compiler.features & Features.AtTheme).toBeTruthy()
-
-    // And this produces no output because no other CSS is present
-    expect(compiler.build([])).toEqual('')
-  })
-})
diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
index bc279e624..9678028f0 100644
--- a/packages/tailwindcss/src/index.ts
+++ b/packages/tailwindcss/src/index.ts
@@ -1,871 +1,270 @@
+import { Features, transform } from 'lightningcss'
 import { version } from '../package.json'
-import { substituteAtApply } from './apply'
-import {
-  atRoot,
-  atRule,
-  comment,
-  context,
-  context as contextNode,
-  cssContext,
-  decl,
-  optimizeAst,
-  rule,
-  styleRule,
-  toCss,
-  type AstNode,
-  type AtRule,
-  type Context,
-  type StyleRule,
-} from './ast'
-import { substituteAtImports } from './at-import'
-import { applyCompatibilityHooks } from './compat/apply-compat-hooks'
-import type { UserConfig } from './compat/config/types'
-import { type Plugin } from './compat/plugin-api'
+import { WalkAction, comment, decl, rule, toCss, walk, type AstNode, type Rule } from './ast'
 import { compileCandidates } from './compile'
-import { substituteFunctions } from './css-functions'
 import * as CSS from './css-parser'
-import { buildDesignSystem, type DesignSystem } from './design-system'
-import { createSourceMap, type DecodedSourceMap } from './source-maps/source-map'
-import { Theme, ThemeOptions } from './theme'
-import { createCssUtility } from './utilities'
-import { expand } from './utils/brace-expansion'
-import { escape, unescape } from './utils/escape'
-import { segment } from './utils/segment'
-import { topologicalSort } from './utils/topological-sort'
-import { compoundsForSelectors, IS_VALID_VARIANT_NAME, substituteAtVariant } from './variants'
-import { walk, WalkAction } from './walk'
+import { buildDesignSystem } from './design-system'
+import { Theme } from './theme'
 
-export interface Config extends UserConfig {}
-
-const IS_VALID_PREFIX = /^[a-z]+$/
-
-export const enum Polyfills {
-  None = 0,
-
-  // Control if fallbacks for `@property` rules are emitted
-  AtProperty = 1 << 0,
-
-  // Control if `color-mix(…)` fallbacks are inserted
-  ColorMix = 1 << 1,
-
-  // Enable all
-  All = AtProperty | ColorMix,
-}
-
-type CompileOptions = {
-  base?: string
-  from?: string
-  polyfills?: Polyfills
-  loadModule?: (
-    id: string,
-    base: string,
-    resourceHint: 'plugin' | 'config',
-  ) => Promise<{
-    path: string
-    base: string
-    module: Plugin | Config
-  }>
-  loadStylesheet?: (
-    id: string,
-    base: string,
-  ) => Promise<{
-    path: string
-    base: string
-    content: string
-  }>
-}
-
-function throwOnLoadModule(): never {
-  throw new Error('No `loadModule` function provided to `compile`')
-}
-
-function throwOnLoadStylesheet(): never {
-  throw new Error('No `loadStylesheet` function provided to `compile`')
-}
-
-function parseThemeOptions(params: string) {
-  let options = ThemeOptions.NONE
-  let prefix = null
-
-  for (let option of segment(params, ' ')) {
-    if (option === 'reference') {
-      options |= ThemeOptions.REFERENCE
-    } else if (option === 'inline') {
-      options |= ThemeOptions.INLINE
-    } else if (option === 'default') {
-      options |= ThemeOptions.DEFAULT
-    } else if (option === 'static') {
-      options |= ThemeOptions.STATIC
-    } else if (option.startsWith('prefix(') && option.endsWith(')')) {
-      prefix = option.slice(7, -1)
-    }
-  }
-
-  return [options, prefix] as const
-}
-
-type Root =
-  // Unknown root
-  | null
-
-  // Explicitly no root specified via `source(none)`
-  | 'none'
-
-  // Specified via `source(…)`, relative to the `base`
-  | { base: string; pattern: string }
-
-export const enum Features {
-  None = 0,
-
-  // `@apply` was used
-  AtApply = 1 << 0,
-
-  // `@import` was used
-  AtImport = 1 << 1,
-
-  // `@plugin` or `@config` was used
-  JsPluginCompat = 1 << 2,
-
-  // `theme(…)` was used
-  ThemeFunction = 1 << 3,
-
-  // `@tailwind utilities` was used
-  Utilities = 1 << 4,
-
-  // `@variant` was used
-  Variants = 1 << 5,
-
-  // `@theme` was used
-  AtTheme = 1 << 6,
-}
-
-async function parseCss(
-  ast: AstNode[],
-  {
-    base = '',
-    from,
-    loadModule = throwOnLoadModule,
-    loadStylesheet = throwOnLoadStylesheet,
-  }: CompileOptions = {},
-) {
-  let features = Features.None
-  ast = [contextNode({ base }, ast)] as AstNode[]
-
-  features |= await substituteAtImports(ast, base, loadStylesheet, 0, from !== undefined)
-
-  let important = null as boolean | null
-  let theme = new Theme()
-  let customVariants = new Map<string, (designSystem: DesignSystem) => void>()
-  let customVariantDependencies = new Map<string, Set<string>>()
-  let customUtilities: ((designSystem: DesignSystem) => void)[] = []
-  let firstThemeRule = null as StyleRule | null
-  let utilitiesNode = null as AtRule | null
-  let variantNodes: AtRule[] = []
-  let sources: { base: string; pattern: string; negated: boolean }[] = []
-  let inlineCandidates: string[] = []
-  let ignoredCandidates: string[] = []
-  let root = null as Root
-
-  // Handle at-rules
-  walk(ast, (node, _ctx) => {
-    if (node.kind !== 'at-rule') return
-    let ctx = cssContext(_ctx)
-
-    // Find `@tailwind utilities` so that we can later replace it with the
-    // actual generated utility class CSS.
-    if (
-      node.name === '@tailwind' &&
-      (node.params === 'utilities' || node.params.startsWith('utilities'))
-    ) {
-      // Any additional `@tailwind utilities` nodes can be removed
-      if (utilitiesNode !== null) {
-        return WalkAction.Replace([])
-      }
-
-      // When inside `@reference` we should treat `@tailwind utilities` as if
-      // it wasn't there in the first place. This should also let `build()`
-      // return the cached static AST.
-      if (ctx.context.reference) {
-        return WalkAction.Replace([])
-      }
-
-      let params = segment(node.params, ' ')
-      for (let param of params) {
-        if (param.startsWith('source(')) {
-          let path = param.slice(7, -1)
-
-          // Keyword: `source(none)`
-          if (path === 'none') {
-            root = path
-            continue
-          }
-
-          // Explicit path: `source('…')`
-          if (
-            (path[0] === '"' && path[path.length - 1] !== '"') ||
-            (path[0] === "'" && path[path.length - 1] !== "'") ||
-            (path[0] !== "'" && path[0] !== '"')
-          ) {
-            throw new Error('`source(…)` paths must be quoted.')
-          }
-
-          root = {
-            base: (ctx.context.sourceBase as string) ?? (ctx.context.base as string),
-            pattern: path.slice(1, -1),
-          }
-        }
-      }
-
-      utilitiesNode = node
-      features |= Features.Utilities
-    }
-
-    // Collect custom `@utility` at-rules
-    if (node.name === '@utility') {
-      if (ctx.parent !== null) {
-        throw new Error('`@utility` cannot be nested.')
-      }
-
-      if (node.nodes.length === 0) {
-        throw new Error(
-          `\`@utility ${node.params}\` is empty. Utilities should include at least one property.`,
-        )
-      }
-
-      let utility = createCssUtility(node)
-      if (utility === null) {
-        if (!node.params.endsWith('-*')) {
-          if (node.params.endsWith('*')) {
-            throw new Error(
-              `\`@utility ${node.params}\` defines an invalid utility name. A functional utility must end in \`-*\`.`,
-            )
-          } else if (node.params.includes('*')) {
-            throw new Error(
-              `\`@utility ${node.params}\` defines an invalid utility name. The dynamic portion marked by \`-*\` must appear once at the end.`,
-            )
-          }
-        }
-
-        throw new Error(
-          `\`@utility ${node.params}\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.`,
-        )
-      }
-
-      customUtilities.push(utility)
-    }
-
-    // Collect paths from `@source` at-rules
-    if (node.name === '@source') {
-      if (node.nodes.length > 0) {
-        throw new Error('`@source` cannot have a body.')
-      }
-
-      if (ctx.parent !== null) {
-        throw new Error('`@source` cannot be nested.')
-      }
-
-      let not = false
-      let inline = false
-      let path = node.params
-
-      if (path[0] === 'n' && path.startsWith('not ')) {
-        not = true
-        path = path.slice(4)
-      }
-
-      if (path[0] === 'i' && path.startsWith('inline(')) {
-        inline = true
-        path = path.slice(7, -1).trim()
-      }
-
-      if (
-        (path[0] === '"' && path[path.length - 1] !== '"') ||
-        (path[0] === "'" && path[path.length - 1] !== "'") ||
-        (path[0] !== "'" && path[0] !== '"')
-      ) {
-        throw new Error('`@source` paths must be quoted.')
-      }
-
-      let source = path.slice(1, -1)
-
-      if (inline) {
-        let destination = not ? ignoredCandidates : inlineCandidates
-        let sources = segment(source, ' ')
-        for (let source of sources) {
-          for (let candidate of expand(source)) {
-            destination.push(candidate)
-          }
-        }
-      } else {
-        sources.push({
-          base: ctx.context.base as string,
-          pattern: source,
-          negated: not,
-        })
-      }
-
-      return WalkAction.ReplaceSkip([])
-    }
-
-    // Apply `@variant` at-rules
-    if (node.name === '@variant') {
-      // Legacy `@variant` at-rules containing `@slot` or without a body should
-      // be considered a `@custom-variant` at-rule.
-      if (ctx.parent === null) {
-        // Body-less `@variant`, e.g.: `@variant foo (…);`
-        if (node.nodes.length === 0) {
-          node.name = '@custom-variant'
-        }
-
-        // Using `@slot`:
-        //
-        // ```css
-        // @variant foo {
-        //   &:hover {
-        //     @slot;
-        //   }
-        // }
-        // ```
-        else {
-          walk(node.nodes, (child) => {
-            if (child.kind === 'at-rule' && child.name === '@slot') {
-              node.name = '@custom-variant'
-              return WalkAction.Stop
-            }
-          })
-
-          // No `@slot` found, so this is still a regular `@variant` at-rule
-          if (node.name === '@variant') {
-            variantNodes.push(node)
-          }
-        }
-      }
-
-      // Collect all the `@variant` at-rules, we will replace them later once
-      // all variants are registered in the system.
-      else {
-        variantNodes.push(node)
-      }
-    }
-
-    // Register custom variants from `@custom-variant` at-rules
-    if (node.name === '@custom-variant') {
-      if (ctx.parent !== null) {
-        throw new Error('`@custom-variant` cannot be nested.')
-      }
-
-      let [name, selector] = segment(node.params, ' ')
-
-      if (!IS_VALID_VARIANT_NAME.test(name)) {
-        throw new Error(
-          `\`@custom-variant ${name}\` defines an invalid variant name. Variants should only contain alphanumeric, dashes, or underscore characters and start with a lowercase letter or number.`,
-        )
-      }
-
-      if (node.nodes.length > 0 && selector) {
-        throw new Error(`\`@custom-variant ${name}\` cannot have both a selector and a body.`)
-      }
-
-      // Variants with a selector, but without a body, e.g.: `@custom-variant hocus (&:hover, &:focus);`
-      if (node.nodes.length === 0) {
-        if (!selector) {
-          throw new Error(`\`@custom-variant ${name}\` has no selector or body.`)
-        }
-
-        let selectors = segment(selector.slice(1, -1), ',')
-        if (selectors.length === 0 || selectors.some((selector) => selector.trim() === '')) {
-          throw new Error(
-            `\`@custom-variant ${name} (${selectors.join(',')})\` selector is invalid.`,
-          )
-        }
-
-        let atRuleParams: string[] = []
-        let styleRuleSelectors: string[] = []
-
-        for (let selector of selectors) {
-          selector = selector.trim()
-
-          if (selector[0] === '@') {
-            atRuleParams.push(selector)
-          } else {
-            styleRuleSelectors.push(selector)
-          }
-        }
-
-        let usesAtScope = atRuleParams.some((param) => param.startsWith('@scope'))
-
-        customVariants.set(name, (designSystem) => {
-          designSystem.variants.static(
-            name,
-            (r) => {
-              let slot = usesAtScope ? [contextNode({ source: 'user' }, r.nodes)] : r.nodes
-
-              let nodes: AstNode[] = []
-
-              if (styleRuleSelectors.length > 0) {
-                nodes.push(styleRule(styleRuleSelectors.join(', '), slot))
-              }
-
-              for (let selector of atRuleParams) {
-                nodes.push(rule(selector, slot))
-              }
-
-              r.nodes = usesAtScope ? [contextNode({ source: 'variant' }, nodes)] : nodes
-            },
-            {
-              compounds: compoundsForSelectors([...styleRuleSelectors, ...atRuleParams]),
-            },
-          )
-        })
-        customVariantDependencies.set(name, new Set<string>())
-      }
-
-      // Variants without a selector, but with a body:
-      //
-      // E.g.:
-      //
-      // ```css
-      // @custom-variant hocus {
-      //   &:hover {
-      //     @slot;
-      //   }
-      //
-      //   &:focus {
-      //     @slot;
-      //   }
-      // }
-      // ```
-      else {
-        let dependencies = new Set<string>()
-        walk(node.nodes, (child) => {
-          if (child.kind === 'at-rule' && child.name === '@variant') {
-            dependencies.add(child.params)
-          }
-        })
-
-        customVariants.set(name, (designSystem) => {
-          designSystem.variants.fromAst(name, node.nodes, designSystem)
-        })
-        customVariantDependencies.set(name, dependencies)
-      }
-
-      // Remove `@custom-variant` at-rule so it's not included in the compiled CSS
-      return WalkAction.ReplaceSkip([])
-    }
-
-    if (node.name === '@media') {
-      let params = segment(node.params, ' ')
-      let unknownParams: string[] = []
-
-      for (let param of params) {
-        // Handle `@media source(…)`
-        if (param.startsWith('source(')) {
-          let path = param.slice(7, -1)
-
-          walk(node.nodes, (child) => {
-            if (child.kind !== 'at-rule') return
-
-            if (child.name === '@tailwind' && child.params === 'utilities') {
-              child.params += ` source(${path})`
-              return WalkAction.ReplaceStop([
-                contextNode({ sourceBase: ctx.context.base }, [child]),
-              ])
-            }
-          })
-        }
-
-        // Handle `@media theme(…)`
-        //
-        // We support `@import "tailwindcss" theme(reference)` as a way to
-        // import an external theme file as a reference, which becomes `@media
-        // theme(reference) { … }` when the `@import` is processed.
-        else if (param.startsWith('theme(')) {
-          let themeParams = param.slice(6, -1)
-          let hasReference = themeParams.includes('reference')
-
-          walk(node.nodes, (child) => {
-            if (child.kind === 'context') return
-            if (child.kind !== 'at-rule') {
-              if (hasReference) {
-                throw new Error(
-                  `Files imported with \`@import "…" theme(reference)\` must only contain \`@theme\` blocks.\nUse \`@reference "…";\` instead.`,
-                )
-              }
-
-              return WalkAction.Continue
-            }
-
-            if (child.name === '@theme') {
-              child.params += ' ' + themeParams
-              return WalkAction.Skip
-            }
-          })
-        }
-
-        // Handle `@media prefix(…)`
-        //
-        // We support `@import "tailwindcss" prefix(ident)` as a way to
-        // configure a theme prefix for variables and utilities.
-        else if (param.startsWith('prefix(')) {
-          let prefix = param.slice(7, -1)
-
-          walk(node.nodes, (child) => {
-            if (child.kind !== 'at-rule') return
-            if (child.name === '@theme') {
-              child.params += ` prefix(${prefix})`
-              return WalkAction.Skip
-            }
-          })
-        }
-
-        // Handle important
-        else if (param === 'important') {
-          important = true
-        }
-
-        // Handle `@import "…" reference`
-        else if (param === 'reference') {
-          node.nodes = [contextNode({ reference: true }, node.nodes)]
-        }
-
-        //
-        else {
-          unknownParams.push(param)
-        }
-      }
-
-      if (unknownParams.length > 0) {
-        node.params = unknownParams.join(' ')
-      } else if (params.length > 0) {
-        return WalkAction.Replace(node.nodes)
-      }
-
-      return WalkAction.Continue
-    }
-
-    // Handle `@theme`
-    if (node.name === '@theme') {
-      let [themeOptions, themePrefix] = parseThemeOptions(node.params)
-
-      features |= Features.AtTheme
-
-      if (ctx.context.reference) {
-        themeOptions |= ThemeOptions.REFERENCE
-      }
-
-      if (themePrefix) {
-        if (!IS_VALID_PREFIX.test(themePrefix)) {
-          throw new Error(
-            `The prefix "${themePrefix}" is invalid. Prefixes must be lowercase ASCII letters (a-z) only.`,
-          )
-        }
-
-        theme.prefix = themePrefix
-      }
-
-      // Record all custom properties in the `@theme` declaration
-      walk(node.nodes, (child) => {
-        // Collect `@keyframes` rules to re-insert with theme variables later,
-        // since the `@theme` rule itself will be removed.
-        if (child.kind === 'at-rule' && child.name === '@keyframes') {
-          theme.addKeyframes(child)
-          return WalkAction.Skip
-        }
-
-        if (child.kind === 'comment') return
-        if (child.kind === 'declaration' && child.property.startsWith('--')) {
-          theme.add(unescape(child.property), child.value ?? '', themeOptions, child.src)
-          return
-        }
-
-        let snippet = toCss([atRule(node.name, node.params, [child])])
-          .split('\n')
-          .map((line, idx, all) => `${idx === 0 || idx >= all.length - 2 ? ' ' : '>'} ${line}`)
-          .join('\n')
-
-        throw new Error(
-          `\`@theme\` blocks must only contain custom properties or \`@keyframes\`.\n\n${snippet}`,
-        )
-      })
-
-      // Keep a reference to the first `@theme` rule to update with the full
-      // theme later, and delete any other `@theme` rules.
-      if (!firstThemeRule) {
-        firstThemeRule = styleRule(':root, :host', [])
-        firstThemeRule.src = node.src
-        return WalkAction.ReplaceSkip(firstThemeRule)
-      } else {
-        return WalkAction.ReplaceSkip([])
-      }
-    }
-  })
-
-  let designSystem = buildDesignSystem(theme, utilitiesNode?.src)
-
-  if (important) {
-    designSystem.important = important
-  }
-
-  if (ignoredCandidates.length > 0) {
-    for (let candidate of ignoredCandidates) {
-      designSystem.invalidCandidates.add(candidate)
-    }
-  }
-
-  // Apply hooks from backwards compatibility layer. This function takes a lot
-  // of random arguments because it really just needs access to "the world" to
-  // do whatever ungodly things it needs to do to make things backwards
-  // compatible without polluting core.
-  features |= await applyCompatibilityHooks({
-    designSystem,
-    base,
-    ast,
-    loadModule,
-    sources,
-  })
-
-  for (let name of customVariants.keys()) {
-    // Pre-register the variant to ensure its position in the variant list is
-    // based on the order we see them in the CSS.
-    designSystem.variants.static(name, () => {})
-  }
-
-  // Register custom variants in order
-  for (let variant of topologicalSort(customVariantDependencies, {
-    onCircularDependency(path, start) {
-      let output = toCss(
-        path.map((name, idx) => {
-          return atRule('@custom-variant', name, [atRule('@variant', path[idx + 1] ?? start, [])])
-        }),
-      )
-        .replaceAll(';', ' { … }')
-        .replace(`@custom-variant ${start} {`, `@custom-variant ${start} { /* ← */`)
-
-      throw new Error(`Circular dependency detected in custom variants:\n\n${output}`)
-    },
-  })) {
-    customVariants.get(variant)?.(designSystem)
-  }
-
-  for (let customUtility of customUtilities) {
-    customUtility(designSystem)
-  }
-
-  // Output final set of theme variables at the position of the first
-  // `@theme` rule.
-  if (firstThemeRule) {
-    let nodes = []
-
-    for (let [key, value] of designSystem.theme.entries()) {
-      if (value.options & ThemeOptions.REFERENCE) continue
-      let node = decl(escape(key), value.value)
-      node.src = value.src
-      nodes.push(node)
-    }
-
-    let keyframesRules = designSystem.theme.getKeyframes()
-    for (let keyframes of keyframesRules) {
-      // Wrap `@keyframes` in `AtRoot` so they are hoisted out of `:root` when
-      // printing. We push it to the top-level of the AST so that an eventual
-      // `@reference` does not cut it out when printing the document.
-      ast.push(context({ theme: true }, [atRoot([keyframes])]))
-    }
-
-    firstThemeRule.nodes = [context({ theme: true }, nodes)]
-  }
-
-  features |= substituteAtVariant(ast, designSystem)
-  features |= substituteFunctions(ast, designSystem)
-  features |= substituteAtApply(ast, designSystem)
-
-  // Replace the `@tailwind utilities` node with a context since it prints
-  // children directly.
-  if (utilitiesNode) {
-    let node = utilitiesNode as AstNode as Context
-    node.kind = 'context'
-    node.context = {}
-  }
-
-  // Remove `@utility`, we couldn't replace it before yet because we had to
-  // handle the nested `@apply` at-rules first.
-  walk(ast, (node) => {
-    if (node.kind !== 'at-rule') return
-
-    if (node.name === '@utility') {
-      return WalkAction.Replace([])
-    }
-
-    // The `@utility` has to be top-level, therefore we don't have to traverse
-    // into nested trees.
-    return WalkAction.Skip
-  })
-
-  return {
-    designSystem,
-    ast,
-    sources,
-    root,
-    utilitiesNode,
-    features,
-    inlineCandidates,
-  }
-}
-
-export async function compileAst(
-  input: AstNode[],
-  opts: CompileOptions = {},
-): Promise<{
-  sources: { base: string; pattern: string; negated: boolean }[]
-  root: Root
-  features: Features
-  build(candidates: string[]): AstNode[]
-}> {
-  let { designSystem, ast, sources, root, utilitiesNode, features, inlineCandidates } =
-    await parseCss(input, opts)
+export function compile(css: string): {
+  build(candidates: string[]): string
+} {
+  let ast = CSS.parse(css)
 
   if (process.env.NODE_ENV !== 'test') {
     ast.unshift(comment(`! tailwindcss v${version} | MIT License | https://tailwindcss.com `))
   }
 
   // Track all invalid candidates
+  let invalidCandidates = new Set<string>()
   function onInvalidCandidate(candidate: string) {
-    designSystem.invalidCandidates.add(candidate)
+    invalidCandidates.add(candidate)
+  }
+
+  // Find all `@theme` declarations
+  let theme = new Theme()
+  let firstThemeRule: Rule | null = null
+  let keyframesRules: Rule[] = []
+
+  walk(ast, (node, { replaceWith }) => {
+    if (node.kind !== 'rule') return
+    if (node.selector !== '@theme') return
+
+    // Record all custom properties in the `@theme` declaration
+    walk(node.nodes, (node, { replaceWith }) => {
+      // Collect `@keyframes` rules to re-insert with theme variables later,
+      // since the `@theme` rule itself will be removed.
+      if (node.kind === 'rule' && node.selector.startsWith('@keyframes ')) {
+        keyframesRules.push(node)
+        replaceWith([])
+        return WalkAction.Skip
+      }
+
+      if (node.kind === 'comment') return
+      if (node.kind === 'declaration' && node.property.startsWith('--')) {
+        theme.add(node.property, node.value)
+        return
+      }
+
+      let snippet = toCss([rule('@theme', [node])])
+        .split('\n')
+        .map((line, idx, all) => `${idx === 0 || idx >= all.length - 2 ? ' ' : '>'} ${line}`)
+        .join('\n')
+
+      throw new Error(
+        `\`@theme\` blocks must only contain custom properties or \`@keyframes\`.\n\n${snippet}`,
+      )
+    })
+
+    // Keep a reference to the first `@theme` rule to update with the full theme
+    // later, and delete any other `@theme` rules.
+    if (!firstThemeRule) {
+      firstThemeRule = node
+    } else {
+      replaceWith([])
+    }
+    return WalkAction.Skip
+  })
+
+  // Output final set of theme variables at the position of the first `@theme`
+  // rule.
+  if (firstThemeRule) {
+    firstThemeRule = firstThemeRule as Rule
+    firstThemeRule.selector = ':root'
+
+    let nodes = []
+
+    for (let [key, value] of theme.entries()) {
+      nodes.push(decl(key, value))
+    }
+
+    if (keyframesRules.length > 0) {
+      let animationParts = [...theme.namespace('--animate').values()].flatMap((animation) =>
+        animation.split(' '),
+      )
+
+      for (let keyframesRule of keyframesRules) {
+        // Remove any keyframes that aren't used by an animation variable.
+        let keyframesName = keyframesRule.selector.slice(11) // `@keyframes `.length
+        if (!animationParts.includes(keyframesName)) {
+          continue
+        }
+
+        // Wrap `@keyframes` in `@at-root` so they are hoisted out of `:root`
+        // when printing.
+        nodes.push(
+          Object.assign(keyframesRule, {
+            selector: '@at-root',
+            nodes: [rule(keyframesRule.selector, keyframesRule.nodes)],
+          }),
+        )
+      }
+    }
+    firstThemeRule.nodes = nodes
+  }
+
+  let designSystem = buildDesignSystem(theme)
+
+  let tailwindUtilitiesNode: Rule | null = null
+
+  // Find `@tailwind utilities` and replace it with the actual generated utility
+  // class CSS.
+  walk(ast, (node) => {
+    if (node.kind === 'rule' && node.selector === '@tailwind utilities') {
+      tailwindUtilitiesNode = node
+
+      // Stop walking after finding `@tailwind utilities` to avoid walking all
+      // of the generated CSS. This means `@tailwind utilities` can only appear
+      // once per file but that's the intended usage at this point in time.
+      return WalkAction.Stop
+    }
+  })
+
+  // Replace `@apply` rules with the actual utility classes.
+  if (css.includes('@apply')) {
+    walk(ast, (node, { replaceWith }) => {
+      if (node.kind === 'rule' && node.selector[0] === '@' && node.selector.startsWith('@apply')) {
+        let candidates = node.selector
+          .slice(7 /* Ignore `@apply ` when parsing the selector */)
+          .trim()
+          .split(/\s+/g)
+
+        // Replace the `@apply` rule with the actual utility classes
+        {
+          // Parse the candidates to an AST that we can replace the `@apply` rule with.
+          let candidateAst = compileCandidates(candidates, designSystem, {
+            onInvalidCandidate: (candidate) => {
+              throw new Error(`Cannot apply unknown utility class: ${candidate}`)
+            },
+          }).astNodes
+
+          // Collect the nodes to insert in place of the `@apply` rule. When a
+          // rule was used, we want to insert its children instead of the rule
+          // because we don't want the wrapping selector.
+          let newNodes: AstNode[] = []
+          for (let candidateNode of candidateAst) {
+            if (candidateNode.kind === 'rule' && candidateNode.selector[0] !== '@') {
+              for (let child of candidateNode.nodes) {
+                newNodes.push(child)
+              }
+            } else {
+              newNodes.push(candidateNode)
+            }
+          }
+
+          replaceWith(newNodes)
+        }
+      }
+    })
+  }
+
+  // Drop instances of `@media reference`
+  //
+  // We allow importing a theme as a reference so users can define the theme for
+  // the current CSS file without duplicating the theme vars in the final CSS.
+  // This is useful for users who use `@apply` in Vue SFCs and in CSS modules.
+  //
+  // The syntax is derived from `@import "tailwindcss/theme" reference` which
+  // turns into `@media reference { … }` in the final CSS.
+  if (css.includes('@media reference')) {
+    walk(ast, (node, { replaceWith }) => {
+      if (node.kind === 'rule' && node.selector === '@media reference') {
+        replaceWith([])
+        return WalkAction.Skip
+      }
+    })
   }
 
   // Track all valid candidates, these are the incoming `rawCandidate` that
   // resulted in a generated AST Node. All the other `rawCandidates` are invalid
   // and should be ignored.
   let allValidCandidates = new Set<string>()
-  let compiled = null as AstNode[] | null
+  let compiledCss = toCss(ast)
   let previousAstNodeCount = 0
-  let defaultDidChange = false
-
-  for (let candidate of inlineCandidates) {
-    if (!designSystem.invalidCandidates.has(candidate)) {
-      allValidCandidates.add(candidate)
-      defaultDidChange = true
-    }
-  }
 
   return {
-    sources,
-    root,
-    features,
     build(newRawCandidates: string[]) {
-      if (features === Features.None) {
-        return input
-      }
-
-      if (!utilitiesNode) {
-        compiled ??= optimizeAst(ast, designSystem, opts.polyfills)
-        return compiled
-      }
-
-      let didChange = defaultDidChange
-      let didAddExternalVariable = false
-      defaultDidChange = false
+      let didChange = false
 
       // Add all new candidates unless we know that they are invalid.
       let prevSize = allValidCandidates.size
       for (let candidate of newRawCandidates) {
-        if (!designSystem.invalidCandidates.has(candidate)) {
-          if (candidate[0] === '-' && candidate[1] === '-') {
-            let didMarkVariableAsUsed = designSystem.theme.markUsedVariable(candidate)
-            didChange ||= didMarkVariableAsUsed
-            didAddExternalVariable ||= didMarkVariableAsUsed
-          } else {
-            allValidCandidates.add(candidate)
-            didChange ||= allValidCandidates.size !== prevSize
-          }
+        if (!invalidCandidates.has(candidate)) {
+          allValidCandidates.add(candidate)
+          didChange ||= allValidCandidates.size !== prevSize
         }
       }
 
       // If no new candidates were added, we can return the original CSS. This
       // currently assumes that we only add new candidates and never remove any.
       if (!didChange) {
-        compiled ??= optimizeAst(ast, designSystem, opts.polyfills)
-        return compiled
-      }
-
-      let newNodes = compileCandidates(allValidCandidates, designSystem, {
-        onInvalidCandidate,
-      }).astNodes
-
-      if (opts.from) {
-        walk(newNodes, (node) => {
-          // We do this conditionally to preserve source locations from both
-          // `@utility` and `@custom-variant`. Even though generated nodes are
-          // cached this should be fine because `utilitiesNode.src` should not
-          // change without a full rebuild which destroys the cache.
-          node.src ??= utilitiesNode.src
-        })
-      }
-
-      // If no new ast nodes were generated, then we can return the original
-      // CSS. This currently assumes that we only add new ast nodes and never
-      // remove any.
-      if (!didAddExternalVariable && previousAstNodeCount === newNodes.length) {
-        compiled ??= optimizeAst(ast, designSystem, opts.polyfills)
-        return compiled
-      }
-
-      previousAstNodeCount = newNodes.length
-
-      utilitiesNode.nodes = newNodes
-
-      compiled = optimizeAst(ast, designSystem, opts.polyfills)
-      return compiled
-    },
-  }
-}
-
-export type { DecodedSourceMap }
-
-export async function compile(
-  css: string,
-  opts: CompileOptions = {},
-): Promise<{
-  sources: { base: string; pattern: string; negated: boolean }[]
-  root: Root
-  features: Features
-  build(candidates: string[]): string
-  buildSourceMap(): DecodedSourceMap
-}> {
-  let ast = CSS.parse(css, { from: opts.from })
-  let api = await compileAst(ast, opts)
-  let compiledAst = ast
-  let compiledCss = css
-
-  return {
-    ...api,
-    build(newCandidates) {
-      let newAst = api.build(newCandidates)
-
-      if (newAst === compiledAst) {
         return compiledCss
       }
 
-      compiledCss = toCss(newAst, !!opts.from)
-      compiledAst = newAst
+      if (tailwindUtilitiesNode) {
+        let newNodes = compileCandidates(allValidCandidates, designSystem, {
+          onInvalidCandidate,
+        }).astNodes
+
+        // If no new ast nodes were generated, then we can return the original
+        // CSS. This currently assumes that we only add new ast nodes and never
+        // remove any.
+        if (previousAstNodeCount === newNodes.length) {
+          return compiledCss
+        }
+
+        previousAstNodeCount = newNodes.length
+
+        tailwindUtilitiesNode.nodes = newNodes
+        compiledCss = toCss(ast)
+      }
 
       return compiledCss
     },
-
-    buildSourceMap() {
-      return createSourceMap({
-        ast: compiledAst,
-      })
-    },
   }
 }
 
-export async function __unstable__loadDesignSystem(css: string, opts: CompileOptions = {}) {
-  let result = await parseCss(CSS.parse(css, { from: opts.from }), opts)
-  return result.designSystem
+export function optimizeCss(
+  input: string,
+  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
+) {
+  return transform({
+    filename: file,
+    code: Buffer.from(input),
+    minify,
+    sourceMap: false,
+    drafts: {
+      customMedia: true,
+    },
+    nonStandard: {
+      deepSelectorCombinator: true,
+    },
+    include: Features.Nesting,
+    exclude: Features.LogicalProperties,
+    targets: {
+      safari: (16 << 16) | (4 << 8),
+    },
+    errorRecovery: true,
+  }).code.toString()
 }
 
-export default function postcssPluginWarning() {
-  throw new Error(
-    `It looks like you're trying to use \`tailwindcss\` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install \`@tailwindcss/postcss\` and update your PostCSS configuration.`,
-  )
+export function __unstable__loadDesignSystem(css: string) {
+  // Find all `@theme` declarations
+  let theme = new Theme()
+  let ast = CSS.parse(css)
+
+  walk(ast, (node) => {
+    if (node.kind !== 'rule') return
+    if (node.selector !== '@theme') return
+
+    // Record all custom properties in the `@theme` declaration
+    walk([node], (node) => {
+      if (node.kind !== 'declaration') return
+      if (!node.property.startsWith('--')) return
+
+      theme.add(node.property, node.value)
+    })
+  })
+
+  return buildDesignSystem(theme)
 }
diff --git a/packages/tailwindcss/src/intellisense.bench.ts b/packages/tailwindcss/src/intellisense.bench.ts
deleted file mode 100644
index c9a53749a..000000000
--- a/packages/tailwindcss/src/intellisense.bench.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { bench } from 'vitest'
-import { buildDesignSystem } from './design-system'
-import { Theme } from './theme'
-
-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')
-  theme.add('--font-size-xs', '0.75rem')
-  theme.add('--font-size-xs--line-height', '1rem')
-  theme.add('--perspective-dramatic', '100px')
-  theme.add('--perspective-normal', '500px')
-  theme.add('--opacity-background', '0.3')
-
-  return buildDesignSystem(theme)
-}
-
-let design = loadDesignSystem()
-
-bench('getClassList', () => {
-  design.getClassList()
-})
-
-bench('getVariants', () => {
-  design.getVariants()
-})
-
-bench('getVariants -> selectors(…)', () => {
-  let variants = design.getVariants()
-  let group = variants.find((v) => v.name === 'group')!
-
-  // A selector-based variant
-  group.selectors({ value: 'hover' })
-
-  // A selector-based variant with a modifier
-  group.selectors({ value: 'hover', modifier: 'sidebar' })
-
-  // A nested, compound, selector-based variant
-  group.selectors({ value: 'group-hover' })
-
-  // This variant produced an at rule
-  group.selectors({ value: 'sm' })
-
-  // This variant does not exist
-  group.selectors({ value: 'md' })
-})
-
-bench('candidatesToCss', () => {
-  design.candidatesToCss(['underline', 'i-dont-exist', 'bg-[#fff]', 'bg-[#000]'])
-})
diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts
index 63f9e7576..a7cce5618 100644
--- a/packages/tailwindcss/src/intellisense.test.ts
+++ b/packages/tailwindcss/src/intellisense.test.ts
@@ -1,81 +1,50 @@
 import { expect, test } from 'vitest'
-import { __unstable__loadDesignSystem } from '.'
-import { decl, rule } from './ast'
-import plugin from './plugin'
-import { ThemeOptions } from './theme'
-
-const css = String.raw
+import { buildDesignSystem } from './design-system'
+import { Theme } from './theme'
 
 function loadDesignSystem() {
-  return __unstable__loadDesignSystem(`
-    @theme {
-      --spacing: 0.25rem;
-      --colors-red-500: red;
-      --colors-blue-500: blue;
-      --breakpoint-sm: 640px;
-      --aspect-video: 16 / 9;
-      --font-sans: sans-serif;
-      --font-weight-superbold: 900;
-      --text-xs: 0.75rem;
-      --text-xs--line-height: 1rem;
-      --perspective-dramatic: 100px;
-      --perspective-normal: 500px;
-      --opacity-background: 0.3;
-      --drop-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.05);
-      --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-      --font-weight-bold: 700;
-      --container-md: 768px;
-      --container-lg: 1024px;
-    }
-  `)
+  return buildDesignSystem(
+    new Theme(
+      new Map([
+        ['--spacing-0_5', '0.125rem'],
+        ['--spacing-1', '0.25rem'],
+        ['--spacing-3', '0.75rem'],
+        ['--spacing-4', '1rem'],
+        ['--width-4', '1rem'],
+        ['--colors-red-500', 'red'],
+        ['--colors-blue-500', 'blue'],
+        ['--breakpoint-sm', '640px'],
+        ['--font-size-xs', '0.75rem'],
+        ['--font-size-xs--line-height', '1rem'],
+      ]),
+    ),
+  )
 }
 
-test('getClassList', async () => {
-  let design = await loadDesignSystem()
+test('getClassList', () => {
+  let design = loadDesignSystem()
   let classList = design.getClassList()
-  let classNames = classList.flatMap(([name, meta]) => [
-    name,
-    ...meta.modifiers.map((m) => `${name}/${m}`),
-  ])
+  let classNames = classList.map(([name]) => name)
 
   expect(classNames).toMatchSnapshot()
 })
 
-test('Spacing utilities do not suggest bare values when not using the multiplier-based spacing scale', async () => {
-  let design = await loadDesignSystem()
-
-  // Remove spacing scale
-  design.theme.clearNamespace('--spacing', ThemeOptions.NONE)
-
-  let classList = design.getClassList()
-  let classNames = classList.flatMap(([name, meta]) => [
-    name,
-    ...meta.modifiers.map((m) => `${name}/${m}`),
-  ])
-
-  expect(classNames).not.toContain('p-0')
-  expect(classNames).not.toContain('p-1')
-  expect(classNames).not.toContain('p-2')
-  expect(classNames).not.toContain('p-3')
-  expect(classNames).not.toContain('p-4')
-})
-
-test('Theme values with underscores are converted back to decimal points', async () => {
-  let design = await loadDesignSystem()
+test('Theme values with underscores are converted back to deciaml points', () => {
+  let design = loadDesignSystem()
   let classes = design.getClassList()
 
   expect(classes).toContainEqual(['inset-0.5', { modifiers: [] }])
 })
 
-test('getVariants', async () => {
-  let design = await loadDesignSystem()
+test('getVariants', () => {
+  let design = loadDesignSystem()
   let variants = design.getVariants()
 
   expect(variants).toMatchSnapshot()
 })
 
-test('getVariants compound', async () => {
-  let design = await loadDesignSystem()
+test('getVariants compound', () => {
+  let design = loadDesignSystem()
   let variants = design.getVariants()
   let group = variants.find((v) => v.name === 'group')!
 
@@ -97,688 +66,18 @@ test('getVariants compound', async () => {
   ]
 
   expect(list).toEqual([
-    ['@media (hover: hover) { :is(:where(.group):hover &) }'],
-    ['@media (hover: hover) { :is(:where(.group\\/sidebar):hover &) }'],
-    ['@media (hover: hover) { :is(:is(:where(.group):hover :where(.group)) &) }'],
+    ['&:is(:where(.group):hover *)'],
+    ['&:is(:where(.group\\/sidebar):hover *)'],
+    ['&:is(:where(.group):is(:where(.group):hover *) *)'],
     [],
     [],
   ])
 })
 
-test('variant selectors are in the correct order', async () => {
-  let input = css`
-    @custom-variant overactive {
-      &:hover {
-        @media (hover: hover) {
-          &:focus {
-            &:active {
-              @slot;
-            }
-          }
-        }
-      }
-    }
-  `
-
-  let design = await __unstable__loadDesignSystem(input)
-  let variants = design.getVariants()
-  let overactive = variants.find((v) => v.name === 'overactive')!
-
-  expect(overactive).toBeTruthy()
-  expect(overactive.selectors({})).toMatchInlineSnapshot(`
-    [
-      "@media (hover: hover) { &:hover { &:focus { &:active } } }",
-    ]
-  `)
-})
-
-test('The variant `has-force` does not crash', async () => {
-  let design = await loadDesignSystem()
+test('The variant `has-force` does not crash', () => {
+  let design = loadDesignSystem()
   let variants = design.getVariants()
   let has = variants.find((v) => v.name === 'has')!
 
   expect(has.selectors({ value: 'force' })).toMatchInlineSnapshot(`[]`)
 })
-
-test('Can produce CSS per candidate using `candidatesToCss`', async () => {
-  let design = await loadDesignSystem()
-  design.invalidCandidates = new Set(['bg-[#fff]'])
-
-  expect(design.candidatesToCss(['underline', 'i-dont-exist', 'bg-[#fff]', 'bg-[#000]', 'text-xs']))
-    .toMatchInlineSnapshot(`
-      [
-        ".underline {
-        text-decoration-line: underline;
-      }
-      ",
-        null,
-        null,
-        ".bg-\\[\\#000\\] {
-        background-color: #000;
-      }
-      ",
-        ".text-xs {
-        font-size: var(--text-xs);
-        line-height: var(--tw-leading, var(--text-xs--line-height));
-      }
-      ",
-      ]
-    `)
-})
-
-test('Can produce AST per candidate using `candidatesToAst`', async () => {
-  let design = await loadDesignSystem()
-  design.invalidCandidates = new Set(['bg-[#fff]'])
-
-  expect(
-    design.candidatesToAst(['underline', 'i-dont-exist', 'bg-[#fff]', 'bg-[#000]', 'text-xs']),
-  ).toEqual([
-    [rule('.underline', [decl('text-decoration-line', 'underline')])],
-    [],
-    [],
-    [rule('.bg-\\[\\#000\\]', [decl('background-color', '#000')])],
-    [
-      rule('.text-xs', [
-        decl('font-size', 'var(--text-xs)'),
-        decl('line-height', 'var(--tw-leading, var(--text-xs--line-height))'),
-      ]),
-    ],
-  ])
-})
-
-test('Utilities do not show wrapping selector in intellisense', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-    @config './config.js';
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-    loadModule: async () => ({
-      path: '',
-      base: '',
-      module: {
-        important: '#app',
-      },
-    }),
-  })
-
-  expect(design.candidatesToCss(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
-    [
-      ".underline {
-      text-decoration-line: underline;
-    }
-    ",
-      "@media (hover: hover) {
-      .hover\\:line-through:hover {
-        text-decoration-line: line-through;
-      }
-    }
-    ",
-    ]
-  `)
-})
-
-test('Utilities, when marked as important, show as important in intellisense', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities' important;
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-  })
-
-  expect(design.candidatesToCss(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
-    [
-      ".underline {
-      text-decoration-line: underline !important;
-    }
-    ",
-      "@media (hover: hover) {
-      .hover\\:line-through:hover {
-        text-decoration-line: line-through !important;
-      }
-    }
-    ",
-    ]
-  `)
-})
-
-test('Static utilities from plugins are listed in hovers and completions', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-    @plugin "./plugin.js";
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-    loadModule: async () => ({
-      path: '',
-      base: '',
-      module: plugin(({ addUtilities }) => {
-        addUtilities({
-          '.custom-utility': {
-            color: 'red',
-          },
-        })
-      }),
-    }),
-  })
-
-  expect(design.candidatesToCss(['custom-utility'])).toMatchInlineSnapshot(`
-    [
-      ".custom-utility {
-      color: red;
-    }
-    ",
-    ]
-  `)
-
-  expect(design.getClassList().map((entry) => entry[0])).toContain('custom-utility')
-})
-
-test('Functional utilities from plugins are listed in hovers and completions', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-    @plugin "./plugin.js";
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-    loadModule: async () => ({
-      path: '',
-      base: '',
-      module: plugin(({ matchUtilities }) => {
-        matchUtilities(
-          {
-            'custom-1': (value) => ({
-              color: value,
-            }),
-          },
-          {
-            values: {
-              red: '#ff0000',
-              green: '#ff0000',
-            },
-          },
-        )
-
-        matchUtilities(
-          {
-            'custom-2': (value, { modifier }) => ({
-              color: `${value} / ${modifier ?? '0%'}`,
-            }),
-          },
-          {
-            values: {
-              red: '#ff0000',
-              green: '#ff0000',
-            },
-            modifiers: {
-              '50': '50%',
-              '75': '75%',
-            },
-          },
-        )
-
-        matchUtilities(
-          {
-            'custom-3': (value, { modifier }) => ({
-              color: `${value} / ${modifier ?? '0%'}`,
-            }),
-          },
-          {
-            values: {
-              red: '#ff0000',
-              green: '#ff0000',
-            },
-            modifiers: 'any',
-          },
-        )
-      }),
-    }),
-  })
-
-  expect(design.candidatesToCss(['custom-1-red', 'custom-1-green', 'custom-1-unknown']))
-    .toMatchInlineSnapshot(`
-      [
-        ".custom-1-red {
-        color: #ff0000;
-      }
-      ",
-        ".custom-1-green {
-        color: #ff0000;
-      }
-      ",
-        null,
-      ]
-    `)
-
-  expect(design.candidatesToCss(['custom-2-red', 'custom-2-green', 'custom-2-unknown']))
-    .toMatchInlineSnapshot(`
-      [
-        ".custom-2-red {
-        color: #ff0000 / 0%;
-      }
-      ",
-        ".custom-2-green {
-        color: #ff0000 / 0%;
-      }
-      ",
-        null,
-      ]
-    `)
-
-  expect(design.candidatesToCss(['custom-2-red/50', 'custom-2-red/75', 'custom-2-red/unknown']))
-    .toMatchInlineSnapshot(`
-      [
-        ".custom-2-red\\/50 {
-        color: #ff0000 / 50%;
-      }
-      ",
-        ".custom-2-red\\/75 {
-        color: #ff0000 / 75%;
-      }
-      ",
-        null,
-      ]
-    `)
-
-  let classMap = new Map(design.getClassList())
-  let classNames = Array.from(classMap.keys())
-
-  // matchUtilities without modifiers
-  expect(classNames).toContain('custom-1-red')
-  expect(classMap.get('custom-1-red')?.modifiers).toEqual([])
-
-  expect(classNames).toContain('custom-1-green')
-  expect(classMap.get('custom-1-green')?.modifiers).toEqual([])
-
-  expect(classNames).not.toContain('custom-1-unknown')
-
-  // matchUtilities with a set list of modifiers
-  expect(classNames).toContain('custom-2-red')
-  expect(classMap.get('custom-2-red')?.modifiers).toEqual(['50', '75'])
-
-  expect(classNames).toContain('custom-2-green')
-  expect(classMap.get('custom-2-green')?.modifiers).toEqual(['50', '75'])
-
-  expect(classNames).not.toContain('custom-2-unknown')
-
-  // matchUtilities with any modifiers
-  expect(classNames).toContain('custom-3-red')
-  expect(classMap.get('custom-3-red')?.modifiers).toEqual([])
-
-  expect(classNames).toContain('custom-3-green')
-  expect(classMap.get('custom-3-green')?.modifiers).toEqual([])
-
-  expect(classNames).not.toContain('custom-3-unknown')
-})
-
-test('Custom at-rule variants do not show up as a value under `group`', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-    @custom-variant variant-1 (@media foo);
-    @custom-variant variant-2 {
-      @media bar {
-        @slot;
-      }
-    }
-    @plugin "./plugin.js";
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-    loadModule: async () => ({
-      path: '',
-      base: '',
-      module: plugin(({ addVariant }) => {
-        addVariant('variant-3', '@media baz')
-        addVariant('variant-4', ['@media qux', '@media cat'])
-      }),
-    }),
-  })
-
-  let variants = design.getVariants()
-  let v1 = variants.find((v) => v.name === 'variant-1')!
-  let v2 = variants.find((v) => v.name === 'variant-2')!
-  let v3 = variants.find((v) => v.name === 'variant-3')!
-  let v4 = variants.find((v) => v.name === 'variant-4')!
-  let group = variants.find((v) => v.name === 'group')!
-  let not = variants.find((v) => v.name === 'not')!
-
-  // All the variants should exist
-  expect(v1).not.toBeUndefined()
-  expect(v2).not.toBeUndefined()
-  expect(v3).not.toBeUndefined()
-  expect(v4).not.toBeUndefined()
-  expect(group).not.toBeUndefined()
-  expect(not).not.toBeUndefined()
-
-  // Group should not have variant-1, variant-2, or variant-3
-  expect(group.values).not.toContain('variant-1')
-  expect(group.values).not.toContain('variant-2')
-  expect(group.values).not.toContain('variant-3')
-  expect(group.values).not.toContain('variant-4')
-
-  // Not should have variant-1, variant-2, or variant-3
-  expect(not.values).toContain('variant-1')
-  expect(not.values).toContain('variant-2')
-  expect(not.values).toContain('variant-3')
-  expect(not.values).toContain('variant-4')
-})
-
-test('Custom functional @utility', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-
-    @theme reference {
-      --text-xs: 0.75rem;
-      --text-xs--line-height: calc(1 / 0.75);
-
-      --leading-foo: 1.5;
-      --leading-bar: 2;
-
-      --spacing: 0.25rem;
-      --spacing-custom: 123px;
-
-      --negative-1: 1;
-      --negative-2: 2;
-      --negative-4: 4;
-      --negative-a: 8;
-    }
-
-    @utility example-* {
-      font-size: --value(--text);
-      line-height: --value(--text-* --line-height);
-      line-height: --modifier(--leading, 'normal');
-    }
-
-    @utility with-custom-spacing-* {
-      size: --value(--spacing);
-    }
-
-    @utility with-integer-spacing-* {
-      size: --spacing(--value(integer));
-    }
-
-    @utility with-number-spacing-* {
-      size: --spacing(--value(number));
-    }
-
-    @utility -negative-* {
-      margin: --value(--negative-*);
-    }
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-  })
-
-  let classMap = new Map(design.getClassList())
-  let classNames = Array.from(classMap.keys())
-
-  expect(classNames).toContain('with-custom-spacing-custom')
-  expect(classNames).not.toContain('with-custom-spacing-0')
-  expect(classNames).not.toContain('with-custom-spacing-0.5')
-  expect(classNames).not.toContain('with-custom-spacing-1')
-  expect(classNames).not.toContain('with-custom-spacing-1.5')
-
-  expect(classNames).not.toContain('with-integer-spacing-custom')
-  expect(classNames).toContain('with-integer-spacing-0')
-  expect(classNames).not.toContain('with-integer-spacing-0.5')
-  expect(classNames).toContain('with-integer-spacing-1')
-  expect(classNames).not.toContain('with-integer-spacing-1.5')
-
-  expect(classNames).not.toContain('with-number-spacing-custom')
-  expect(classNames).toContain('with-number-spacing-0')
-  expect(classNames).toContain('with-number-spacing-0.5')
-  expect(classNames).toContain('with-number-spacing-1')
-  expect(classNames).toContain('with-number-spacing-1.5')
-
-  expect(classNames).toContain('-negative-1')
-  expect(classNames).toContain('-negative-2')
-  expect(classNames).toContain('-negative-4')
-  expect(classNames).toContain('-negative-a')
-
-  expect(classNames).not.toContain('--negative-1')
-  expect(classNames).not.toContain('--negative-2')
-  expect(classNames).not.toContain('--negative-4')
-  expect(classNames).not.toContain('--negative-a')
-
-  expect(classNames).toContain('example-xs')
-  expect(classMap.get('example-xs')?.modifiers).toEqual(['normal', 'foo', 'bar'])
-})
-
-test('Custom utilities sharing a root with built-in utilities should merge suggestions', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-    @theme {
-      --font-sans: sans-serif;
-    }
-
-    @theme {
-      --font-weight-custom: 1234;
-      --font-weight-bold: bold; /* Overlap with existing utility */
-    }
-
-    @utility font-* {
-      --my-font-weight: --value(--font-weight-*);
-    }
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-  })
-
-  let classMap = new Map(design.getClassList())
-  let classNames = Array.from(classMap.keys())
-
-  expect(classNames).toContain('font-sans') // Existing font-family utility
-  expect(classNames).toContain('font-bold') // Existing font-family utility & custom font-weight utility
-  expect(classNames).toContain('font-custom') // Custom font-weight utility
-})
-
-test('Theme keys with underscores are suggested with underscores', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-
-    @theme {
-      /* Disable the spacing scale */
-      --spacing: initial;
-
-      /* This will get suggested with a dot because its surrounded by numbers */
-      --spacing-1_5: 1.5rem;
-
-      /* This will get suggested with a dot  */
-      --spacing-2\.5: 1.5rem;
-
-      /* This will get suggested with an underscore */
-      --spacing-logo_margin: 0.875rem;
-    }
-
-    @utility ex-* {
-      width: --value(--spacing-*);
-    }
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-  })
-
-  let entries = design
-    .getClassList()
-    .filter(([name]) => name.startsWith('p-') || name.startsWith('ex-'))
-
-  expect(entries).toContainEqual(['p-1.5', { modifiers: [] }])
-  expect(entries).toContainEqual(['p-2.5', { modifiers: [] }])
-  expect(entries).toContainEqual(['p-logo_margin', { modifiers: [] }])
-
-  expect(entries).toContainEqual(['ex-1.5', { modifiers: [] }])
-  expect(entries).toContainEqual(['ex-2.5', { modifiers: [] }])
-  expect(entries).toContainEqual(['ex-logo_margin', { modifiers: [] }])
-
-  expect(entries).not.toContainEqual(['p-1_5', { modifiers: [] }])
-  expect(entries).not.toContainEqual(['p-2_5', { modifiers: [] }])
-  expect(entries).not.toContainEqual(['p-logo.margin', { modifiers: [] }])
-
-  expect(entries).not.toContainEqual(['ex-1_5', { modifiers: [] }])
-  expect(entries).not.toContainEqual(['ex-2_5', { modifiers: [] }])
-  expect(entries).not.toContainEqual(['ex-logo.margin', { modifiers: [] }])
-})
-
-test('shadow utility default suggestions', async () => {
-  let input = css`
-    @theme {
-      /* nothing */
-    }
-  `
-
-  let design = await __unstable__loadDesignSystem(input)
-  let classNames = design.getClassList().map(([name]) => name)
-
-  expect(classNames).not.toContain('shadow')
-  expect(classNames).not.toContain('inset-shadow')
-  expect(classNames).not.toContain('text-shadow')
-
-  input = css`
-    @theme {
-      --shadow: 0 0 0 solid black;
-      --text-shadow: 0 0 0 solid black;
-      --inset-shadow: 0 0 0 solid black;
-    }
-  `
-
-  design = await __unstable__loadDesignSystem(input)
-  classNames = design.getClassList().map(([name]) => name)
-
-  expect(classNames).toContain('shadow')
-  expect(classNames).toContain('inset-shadow')
-  expect(classNames).toContain('text-shadow')
-})
-
-test('Custom @utility and existing utility with names matching theme keys dont give duplicate results', async () => {
-  let input = css`
-    @theme reference {
-      --leading-sm: 0.25rem;
-      --text-header: 1.5rem;
-    }
-
-    @utility text-header {
-      text-transform: uppercase;
-    }
-  `
-
-  let design = await __unstable__loadDesignSystem(input)
-
-  let classList = design.getClassList()
-  let classMap = new Map(classList)
-  let matches = classList.filter(([className]) => className === 'text-header')
-
-  expect(matches).toHaveLength(1)
-  expect(classMap.get('text-header')?.modifiers).toEqual(['sm'])
-})
-
-test('matchVariant', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-    @plugin "./plugin.js";
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-    loadModule: async () => ({
-      path: '',
-      base: '',
-      module: plugin(({ matchVariant }) => {
-        matchVariant('foo', (val) => `&:is(${val})`, {
-          values: {
-            DEFAULT: '1',
-            a: 'a',
-            b: 'b',
-          },
-        })
-      }),
-    }),
-  })
-
-  let variants = design.getVariants()
-  let v1 = variants.find((v) => v.name === 'foo')!
-  expect(v1).not.toBeUndefined()
-
-  expect(v1.hasDash).toEqual(true)
-  expect(v1.isArbitrary).toEqual(true)
-  expect(v1.name).toEqual('foo')
-  expect(v1.values).toEqual(['a', 'b'])
-})
-
-test('matchUtilities discards internal only helpers from suggestions when using the theme function', async () => {
-  let input = css`
-    @import 'tailwindcss/utilities';
-    @plugin "./plugin.js";
-
-    @theme {
-      --color-red: red;
-    }
-  `
-
-  let design = await __unstable__loadDesignSystem(input, {
-    loadStylesheet: async (_, base) => ({
-      path: '',
-      base,
-      content: '@tailwind utilities;',
-    }),
-    loadModule: async () => ({
-      path: '',
-      base: '',
-      module: plugin(({ matchUtilities, theme }) => {
-        matchUtilities({ foo: (val) => ({ color: val }) }, { values: theme('colors') })
-        matchUtilities({ bar: (val) => ({ color: val }) }, { values: theme('transitionDuration') })
-      }),
-    }),
-  })
-
-  let classNames = design.getClassList().map((e) => e[0])
-
-  expect(classNames).not.toContain('foo-__BARE_VALUE__')
-  expect(classNames).not.toContain('bar-__BARE_VALUE__')
-
-  expect(classNames).not.toContain('foo-__CSS_VALUES__')
-  expect(classNames).not.toContain('bar-__CSS_VALUES__')
-})
diff --git a/packages/tailwindcss/src/intellisense.ts b/packages/tailwindcss/src/intellisense.ts
index e21663fe0..4b1d814fb 100644
--- a/packages/tailwindcss/src/intellisense.ts
+++ b/packages/tailwindcss/src/intellisense.ts
@@ -1,143 +1,46 @@
-import { styleRule } from './ast'
+import { decl, rule } from './ast'
 import { applyVariant } from './compile'
 import type { DesignSystem } from './design-system'
-import { compare } from './utils/compare'
-import { DefaultMap } from './utils/default-map'
-import { walk } from './walk'
-export { canonicalizeCandidates, type CanonicalizeOptions } from './canonicalize-candidates'
 
 interface ClassMetadata {
   modifiers: string[]
 }
 
-export type ClassItem = {
-  name: string
-  utility: string
-  fraction: boolean
-  modifiers: string[]
-}
-
 export type ClassEntry = [string, ClassMetadata]
 
-const IS_FRACTION = /^\d+\/\d+$/
-
 export function getClassList(design: DesignSystem): ClassEntry[] {
-  let items = new DefaultMap<string, ClassItem>((utility) => ({
-    name: utility,
-    utility,
-    fraction: false,
-    modifiers: [],
-  }))
+  let list: [string, ClassMetadata][] = []
 
-  // Static utilities only work as-is
-  for (let utility of design.utilities.keys('static')) {
-    let completions = design.utilities.getCompletions(utility)
-    if (completions.length === 0) continue
+  for (let [utility, fn] of design.utilities.entries()) {
+    if (typeof utility !== 'string') {
+      continue
+    }
 
-    let item = items.get(utility)
-    item.fraction = false
-    item.modifiers = []
-  }
+    // Static utilities only work as-is
+    if (fn.kind === 'static') {
+      list.push([utility, { modifiers: [] }])
+      continue
+    }
 
-  // Functional utilities have their own list of completions
-  for (let utility of design.utilities.keys('functional')) {
+    // Functional utilities have their own list of completions
     let completions = design.utilities.getCompletions(utility)
 
     for (let group of completions) {
       for (let value of group.values) {
-        let fraction = value !== null && IS_FRACTION.test(value)
-
         let name = value === null ? utility : `${utility}-${value}`
 
-        let item = items.get(name)
-        item.utility = utility
-        item.fraction ||= fraction
-        item.modifiers.push(...group.modifiers)
+        list.push([name, { modifiers: group.modifiers }])
 
         if (group.supportsNegative) {
-          let item = items.get(`-${name}`)
-          item.utility = `-${utility}`
-          item.fraction ||= fraction
-          item.modifiers.push(...group.modifiers)
+          list.push([`-${name}`, { modifiers: group.modifiers }])
         }
-
-        // Deduplicate modifiers
-        item.modifiers = Array.from(new Set(item.modifiers))
       }
     }
   }
 
-  if (items.size === 0) return []
+  list.sort((a, b) => (a[0] === b[0] ? 0 : a[0] < b[0] ? -1 : 1))
 
-  // Sort utilities by their class name
-  let list = Array.from(items.values())
-  list.sort((a, b) => compare(a.name, b.name))
-
-  let entries = sortFractionsLast(list)
-
-  return entries
-}
-
-function sortFractionsLast(list: ClassItem[]) {
-  type Bucket = {
-    utility: string
-    items: ClassItem[]
-  }
-
-  // 1. Create "buckets" for each utility group
-  let buckets: Bucket[] = []
-  let current: Bucket | null = null
-
-  // 2. Determine the last bucket for each utility group
-  let lastUtilityBucket = new Map<string, Bucket>()
-
-  // 3. Collect all fractions in a given utility group
-  let fractions = new DefaultMap<string, ClassItem[]>(() => [])
-
-  for (let item of list) {
-    let { utility, fraction } = item
-
-    if (!current) {
-      current = { utility, items: [] }
-      lastUtilityBucket.set(utility, current)
-    }
-
-    if (utility !== current.utility) {
-      buckets.push(current)
-
-      current = { utility, items: [] }
-      lastUtilityBucket.set(utility, current)
-    }
-
-    if (fraction) {
-      fractions.get(utility).push(item)
-    } else {
-      current.items.push(item)
-    }
-  }
-
-  if (current && buckets[buckets.length - 1] !== current) {
-    buckets.push(current)
-  }
-
-  // 4. Add fractions to their respective last utility buckets
-  for (let [utility, items] of fractions) {
-    let bucket = lastUtilityBucket.get(utility)
-    if (!bucket) continue
-
-    bucket.items.push(...items)
-  }
-
-  // 5. Flatten the buckets into a single list
-  let entries: ClassEntry[] = []
-
-  for (let bucket of buckets) {
-    for (let entry of bucket.items) {
-      entries.push([entry.name, { modifiers: entry.modifiers }])
-    }
-  }
-
-  return entries
+  return list
 }
 
 interface SelectorOptions {
@@ -159,12 +62,11 @@ export function getVariants(design: DesignSystem) {
   for (let [root, variant] of design.variants.entries()) {
     if (variant.kind === 'arbitrary') continue
 
-    let hasDash = root !== '@'
     let values = design.variants.getCompletions(root)
 
     function selectors({ value, modifier }: SelectorOptions = {}) {
       let name = root
-      if (value) name += hasDash ? `-${value}` : value
+      if (value) name += `-${value}`
       if (modifier) name += `/${modifier}`
 
       let variant = design.parseVariant(name)
@@ -172,7 +74,7 @@ export function getVariants(design: DesignSystem) {
       if (!variant) return []
 
       // Apply the variant to a placeholder rule
-      let node = styleRule('.__placeholder__', [])
+      let node = rule('.__placeholder__', [decl('color', 'red')])
 
       // If the rule produces no nodes it means the variant does not apply
       if (applyVariant(node, variant, design.variants) === null) {
@@ -182,50 +84,11 @@ export function getVariants(design: DesignSystem) {
       // Now look at the selector(s) inside the rule
       let selectors: string[] = []
 
-      // Produce v3-style selector strings in the face of nested rules
-      // this is more visible for things like group-*, not-*, etc…
-      walk(node.nodes, {
-        exit(node, ctx) {
-          if (node.kind !== 'rule' && node.kind !== 'at-rule') return
-          if (node.nodes.length > 0) return
-
-          let path = ctx.path()
-          path.push(node)
-
-          // Sort at-rules before style rules
-          path.sort((a, b) => {
-            let aIsAtRule = a.kind === 'at-rule'
-            let bIsAtRule = b.kind === 'at-rule'
-
-            if (aIsAtRule && !bIsAtRule) return -1
-            if (!aIsAtRule && bIsAtRule) return 1
-
-            return 0
-          })
-
-          // A list of the selectors / at rules encountered to get to this point
-          let group = path.flatMap((node) => {
-            if (node.kind === 'rule') {
-              return node.selector === '&' ? [] : [node.selector]
-            }
-
-            if (node.kind === 'at-rule') {
-              return [`${node.name} ${node.params}`]
-            }
-
-            return []
-          })
-
-          // Build a v3-style nested selector
-          let selector = ''
-
-          for (let i = group.length - 1; i >= 0; i--) {
-            selector = selector === '' ? group[i] : `${group[i]} { ${selector} }`
-          }
-
-          selectors.push(selector)
-        },
-      })
+      for (let child of node.nodes) {
+        if (child.kind === 'rule') {
+          selectors.push(child.selector)
+        }
+      }
 
       return selectors
     }
@@ -236,7 +99,7 @@ export function getVariants(design: DesignSystem) {
           name: root,
           values,
           isArbitrary: false,
-          hasDash,
+          hasDash: true,
           selectors,
         })
         break
@@ -246,7 +109,7 @@ export function getVariants(design: DesignSystem) {
           name: root,
           values,
           isArbitrary: true,
-          hasDash,
+          hasDash: true,
           selectors,
         })
         break
@@ -256,7 +119,7 @@ export function getVariants(design: DesignSystem) {
           name: root,
           values,
           isArbitrary: true,
-          hasDash,
+          hasDash: true,
           selectors,
         })
         break
diff --git a/packages/tailwindcss/src/plugin.cts b/packages/tailwindcss/src/plugin.cts
deleted file mode 100644
index f7bf734ed..000000000
--- a/packages/tailwindcss/src/plugin.cts
+++ /dev/null
@@ -1,8 +0,0 @@
-import plugin from './plugin.ts'
-
-// This file exists so that `plugin.ts` can be written one time but be
-// compatible with both CJS and ESM. Without it we get a `.default` export when
-// using `require` in CJS.
-
-// @ts-ignore
-export = plugin
diff --git a/packages/tailwindcss/src/plugin.test.ts b/packages/tailwindcss/src/plugin.test.ts
deleted file mode 100644
index a7704ae58..000000000
--- a/packages/tailwindcss/src/plugin.test.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { expect, test } from 'vitest'
-import plugin from './plugin'
-import { compileCss } from './test-utils/run'
-
-const css = String.raw
-
-test('plugin', async () => {
-  expect(
-    await compileCss(
-      css`
-        @plugin "my-plugin";
-      `,
-      {
-        loadModule: async () => ({
-          module: plugin(function ({ addBase }) {
-            addBase({
-              body: {
-                margin: '0',
-              },
-            })
-          }),
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer base {
-      body {
-        margin: 0;
-      }
-    }
-    "
-  `)
-})
-
-test('plugin.withOptions', async () => {
-  expect(
-    await compileCss(
-      css`
-        @plugin "my-plugin";
-      `,
-      {
-        loadModule: async () => ({
-          module: plugin.withOptions(function (opts = { foo: '1px' }) {
-            return function ({ addBase }) {
-              addBase({
-                body: {
-                  margin: opts.foo,
-                },
-              })
-            }
-          }),
-          base: '/root',
-          path: '',
-        }),
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer base {
-      body {
-        margin: 1px;
-      }
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/plugin.ts b/packages/tailwindcss/src/plugin.ts
deleted file mode 100644
index 8035633b0..000000000
--- a/packages/tailwindcss/src/plugin.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { PluginUtils } from './compat/config/resolve-config'
-import type { ThemeConfig } from './compat/config/types'
-import type {
-  Config,
-  Plugin,
-  PluginAPI,
-  PluginFn,
-  PluginWithConfig,
-  PluginWithOptions,
-} from './compat/plugin-api'
-
-function createPlugin(handler: PluginFn, config?: Partial<Config>): PluginWithConfig {
-  return {
-    handler,
-    config,
-  }
-}
-
-createPlugin.withOptions = function <T>(
-  pluginFunction: (options?: T) => PluginFn,
-  configFunction: (options?: T) => Partial<Config> = () => ({}),
-): PluginWithOptions<T> {
-  function optionsFunction(options: T): PluginWithConfig {
-    return {
-      handler: pluginFunction(options),
-      config: configFunction(options),
-    }
-  }
-
-  optionsFunction.__isOptionsFunction = true as const
-
-  return optionsFunction as PluginWithOptions<T>
-}
-
-export default createPlugin
-
-// v3 compatible types previously exported via `tailwindcss/types/config`
-export type {
-  Config,
-  PluginAPI,
-  PluginFn as PluginCreator,
-  Plugin as PluginsConfig,
-  PluginUtils,
-  PluginWithConfig,
-  ThemeConfig,
-}
diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts
deleted file mode 100644
index ded304cad..000000000
--- a/packages/tailwindcss/src/prefix.test.ts
+++ /dev/null
@@ -1,340 +0,0 @@
-import { expect, test } from 'vitest'
-import { compile } from '.'
-import plugin from './plugin'
-import { compileCss, run } from './test-utils/run'
-
-const css = String.raw
-
-test('utilities must be prefixed', async () => {
-  let input = css`
-    @theme reference prefix(tw);
-    @tailwind utilities;
-
-    @utility custom {
-      color: red;
-    }
-  `
-
-  // Prefixed utilities are generated
-  expect(
-    await run(
-      [
-        'tw:underline',
-        'tw:hover:line-through',
-        'tw:custom',
-        'tw:group-hover:flex',
-        'tw:peer-hover:flex',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .tw\\:custom {
-      color: red;
-    }
-
-    .tw\\:underline {
-      text-decoration-line: underline;
-    }
-
-    @media (hover: hover) {
-      :is(:where(.tw\\:group):hover .tw\\:group-hover\\:flex), :is(:where(.tw\\:peer):hover ~ .tw\\:peer-hover\\:flex) {
-        display: flex;
-      }
-
-      .tw\\:hover\\:line-through:hover {
-        text-decoration-line: line-through;
-      }
-    }
-    "
-  `)
-
-  // Non-prefixed utilities are ignored
-  expect(await run(['underline', 'hover:line-through', 'custom'], input)).toEqual('')
-})
-
-test('utilities used in @apply must be prefixed', async () => {
-  // Prefixed utilities are generated
-  expect(
-    await compileCss(css`
-      @theme reference prefix(tw);
-
-      .my-underline {
-        @apply tw:underline;
-      }
-    `),
-  ).toMatchInlineSnapshot(`
-    "
-    .my-underline {
-      text-decoration-line: underline;
-    }
-    "
-  `)
-
-  // Non-prefixed utilities cause an error
-  await expect(
-    compile(css`
-      @theme reference prefix(tw);
-
-      .my-underline {
-        @apply underline;
-      }
-    `),
-  ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `[Error: Cannot apply unprefixed utility class \`underline\`. Did you mean \`tw:underline\`?]`,
-  )
-})
-
-test('CSS variables output by the theme are prefixed', async () => {
-  // Prefixed utilities are generated
-  expect(
-    await run(
-      ['tw:text-red'],
-      css`
-        @theme prefix(tw) {
-          --color-red: #f00;
-          --color-green: #0f0;
-          --breakpoint-sm: 640px;
-        }
-
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --tw-color-red: red;
-    }
-
-    .tw\\:text-red {
-      color: var(--tw-color-red);
-    }
-    "
-  `)
-})
-
-test('CSS theme functions do not use the prefix', async () => {
-  expect(
-    await run(
-      ['tw:[color:theme(--color-red)]', 'tw:text-[theme(--color-red)]'],
-      css`
-        @theme prefix(tw) {
-          --color-red: #f00;
-          --color-green: #0f0;
-          --breakpoint-sm: 640px;
-        }
-
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .tw\\:\\[color\\:theme\\(--color-red\\)\\], .tw\\:text-\\[theme\\(--color-red\\)\\] {
-      color: red;
-    }
-    "
-  `)
-
-  expect(
-    await run(
-      ['tw:[color:theme(--tw-color-red)]', 'tw:text-[theme(--tw-color-red)]'],
-      css`
-        @theme reference prefix(tw) {
-          --color-red: #f00;
-          --color-green: #0f0;
-          --breakpoint-sm: 640px;
-        }
-
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
-})
-
-test('JS theme functions do not use the prefix', async () => {
-  expect(
-    await run(
-      ['tw:my-custom'],
-      css`
-        @theme prefix(tw) {
-          --color-red: #f00;
-          --color-green: #0f0;
-          --breakpoint-sm: 640px;
-        }
-
-        @plugin "./plugin.js";
-
-        @tailwind utilities;
-      `,
-      {
-        async loadModule(_id, base) {
-          return {
-            path: '',
-            base,
-            module: plugin(({ addUtilities, theme }) => {
-              addUtilities({
-                '.my-custom': {
-                  color: theme('--color-red'),
-                },
-              })
-
-              // The theme function does not use the prefix
-              expect(theme('--tw-color-red')).toEqual(undefined)
-            }),
-          }
-        },
-      },
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .tw\\:my-custom {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('a prefix can be configured via @import theme(…)', async () => {
-  let input = css`
-    @import 'tailwindcss/theme' theme(reference prefix(tw));
-    @tailwind utilities;
-
-    @utility custom {
-      color: red;
-    }
-  `
-
-  let options: Partial<Parameters<typeof compile>[1]> = {
-    async loadStylesheet(_id, base) {
-      return {
-        path: '',
-        base,
-        content: css`
-          @theme {
-            --color-potato: #7a4724;
-          }
-        `,
-      }
-    },
-  }
-
-  // Prefixed utilities are generated
-  expect(
-    await run(
-      ['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom', 'flex', 'text-potato'],
-      input,
-      options,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .tw\\:bg-potato {
-      background-color: var(--tw-color-potato, #7a4724);
-    }
-
-    .tw\\:custom {
-      color: red;
-    }
-
-    .tw\\:underline {
-      text-decoration-line: underline;
-    }
-
-    @media (hover: hover) {
-      .tw\\:hover\\:line-through:hover {
-        text-decoration-line: line-through;
-      }
-    }
-    "
-  `)
-
-  // Non-prefixed utilities are ignored
-  expect(await run(['underline', 'hover:line-through', 'custom'], input, options)).toEqual('')
-})
-
-test('a prefix can be configured via @import prefix(…)', async () => {
-  let input = css`
-    @import 'tailwindcss' prefix(tw);
-
-    @utility custom {
-      color: red;
-    }
-  `
-
-  let options: Partial<Parameters<typeof compile>[1]> = {
-    async loadStylesheet(_id, base) {
-      return {
-        path: '',
-        base,
-        content: css`
-          @theme {
-            --color-potato: #7a4724;
-          }
-          @tailwind utilities;
-        `,
-      }
-    },
-  }
-
-  expect(
-    await run(
-      ['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom'],
-      input,
-      options,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --tw-color-potato: #7a4724;
-    }
-
-    .tw\\:bg-potato {
-      background-color: var(--tw-color-potato);
-    }
-
-    .tw\\:custom {
-      color: red;
-    }
-
-    .tw\\:underline {
-      text-decoration-line: underline;
-    }
-
-    @media (hover: hover) {
-      .tw\\:hover\\:line-through:hover {
-        text-decoration-line: line-through;
-      }
-    }
-    "
-  `)
-
-  // Non-prefixed utilities are ignored
-  expect(await run(['underline', 'hover:line-through', 'custom'], input, options)).toEqual('')
-})
-
-test('a prefix must be letters only', async () => {
-  let input = css`
-    @theme reference prefix(__);
-  `
-
-  await expect(() => compile(input)).rejects.toThrowErrorMatchingInlineSnapshot(
-    `[Error: The prefix "__" is invalid. Prefixes must be lowercase ASCII letters (a-z) only.]`,
-  )
-})
-
-test('a candidate matching the prefix does not crash', async () => {
-  expect(
-    await run(
-      ['tomato', 'tomato:flex'],
-      css`
-        @theme reference prefix(tomato);
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .tomato\\:flex {
-      display: flex;
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts
index bf9f0791a..36d38dd49 100644
--- a/packages/tailwindcss/src/property-order.ts
+++ b/packages/tailwindcss/src/property-order.ts
@@ -11,8 +11,6 @@ export default [
   'inset-block',
   'inset-inline-start',
   'inset-inline-end',
-  'inset-block-start',
-  'inset-block-end',
   'top',
   'right',
   'bottom',
@@ -30,10 +28,6 @@ export default [
   'float',
   'clear',
 
-  // Ensure that the included `container` class is always sorted before any
-  // custom container extensions
-  '--tw-container-component',
-
   // How do we make `mx-0` come before `mt-0`?
   // Idea: `margin-x` property that we compile away with a Visitor plugin?
   'margin',
@@ -41,8 +35,6 @@ export default [
   'margin-block',
   'margin-inline-start',
   'margin-inline-end',
-  'margin-block-start',
-  'margin-block-end',
   'margin-top',
   'margin-right',
   'margin-bottom',
@@ -50,9 +42,8 @@ export default [
 
   'box-sizing',
   'display',
-
-  'field-sizing',
   'aspect-ratio',
+
   'height',
   'max-height',
   'min-height',
@@ -76,24 +67,18 @@ export default [
 
   'transform-origin',
 
+  // '--tw-translate-x',
+  // '--tw-translate-y',
   'translate',
-  '--tw-translate-x',
-  '--tw-translate-y',
-  '--tw-translate-z',
-  'scale',
-  '--tw-scale-x',
-  '--tw-scale-y',
-  '--tw-scale-z',
   'rotate',
-  '--tw-rotate-x',
-  '--tw-rotate-y',
-  '--tw-rotate-z',
+  // '--tw-rotate',
   '--tw-skew-x',
   '--tw-skew-y',
+  'scale',
+  // '--tw-scale-x',
+  // '--tw-scale-y',
   'transform',
 
-  'zoom',
-
   'animation',
 
   'cursor',
@@ -110,33 +95,21 @@ export default [
   'scroll-snap-align',
   'scroll-snap-stop',
   'scroll-margin',
-  'scroll-margin-inline',
-  'scroll-margin-block',
   'scroll-margin-inline-start',
   'scroll-margin-inline-end',
-  'scroll-margin-block-start',
-  'scroll-margin-block-end',
   'scroll-margin-top',
   'scroll-margin-right',
   'scroll-margin-bottom',
   'scroll-margin-left',
 
   'scroll-padding',
-  'scroll-padding-inline',
-  'scroll-padding-block',
   'scroll-padding-inline-start',
   'scroll-padding-inline-end',
-  'scroll-padding-block-start',
-  'scroll-padding-block-end',
   'scroll-padding-top',
   'scroll-padding-right',
   'scroll-padding-bottom',
   'scroll-padding-left',
 
-  'scrollbar-width',
-  'scrollbar-color',
-  'scrollbar-gutter',
-
   'list-style-position',
   'list-style-type',
   'list-style-image',
@@ -174,6 +147,7 @@ export default [
   '--tw-divide-y-reverse',
   'divide-style',
   'divide-color',
+  '--tw-divide-opacity',
 
   'place-self',
   'align-self',
@@ -189,6 +163,14 @@ export default [
 
   'scroll-behavior',
 
+  'text-overflow',
+  'hyphens',
+  'white-space',
+
+  'text-wrap',
+  'overflow-wrap',
+  'work-break',
+
   'border-radius',
   'border-start-radius', // Not real
   'border-end-radius', // Not real
@@ -206,45 +188,31 @@ export default [
   'border-bottom-left-radius',
 
   'border-width',
-  'border-inline-width',
-  'border-block-width',
+  'border-inline-width', // Not real
   'border-inline-start-width',
   'border-inline-end-width',
-  'border-block-start-width',
-  'border-block-end-width',
   'border-top-width',
   'border-right-width',
   'border-bottom-width',
   'border-left-width',
 
   'border-style',
-  'border-inline-style',
-  'border-block-style',
-  'border-inline-start-style',
-  'border-inline-end-style',
-  'border-block-start-style',
-  'border-block-end-style',
-  'border-top-style',
-  'border-right-style',
-  'border-bottom-style',
-  'border-left-style',
-
   'border-color',
-  'border-inline-color',
-  'border-block-color',
+  'border-x-color', // Not real
+  'border-y-color', // Not real
   'border-inline-start-color',
   'border-inline-end-color',
-  'border-block-start-color',
-  'border-block-end-color',
   'border-top-color',
   'border-right-color',
   'border-bottom-color',
   'border-left-color',
 
+  '--tw-border-opacity',
+
   'background-color',
+  '--tw-bg-opacity',
 
   'background-image',
-  '--tw-gradient-position',
   '--tw-gradient-stops',
   '--tw-gradient-via-stops',
   '--tw-gradient-from',
@@ -254,59 +222,6 @@ export default [
   '--tw-gradient-to',
   '--tw-gradient-to-position',
 
-  'mask-image',
-
-  // Edge masks
-  '--tw-mask-top',
-  '--tw-mask-top-from-color',
-  '--tw-mask-top-from-position',
-  '--tw-mask-top-to-color',
-  '--tw-mask-top-to-position',
-
-  '--tw-mask-right',
-  '--tw-mask-right-from-color',
-  '--tw-mask-right-from-position',
-  '--tw-mask-right-to-color',
-  '--tw-mask-right-to-position',
-
-  '--tw-mask-bottom',
-  '--tw-mask-bottom-from-color',
-  '--tw-mask-bottom-from-position',
-  '--tw-mask-bottom-to-color',
-  '--tw-mask-bottom-to-position',
-
-  '--tw-mask-left',
-  '--tw-mask-left-from-color',
-  '--tw-mask-left-from-position',
-  '--tw-mask-left-to-color',
-  '--tw-mask-left-to-position',
-
-  // Linear masks
-  '--tw-mask-linear',
-  '--tw-mask-linear-position',
-  '--tw-mask-linear-from-color',
-  '--tw-mask-linear-from-position',
-  '--tw-mask-linear-to-color',
-  '--tw-mask-linear-to-position',
-
-  // Radial masks
-  '--tw-mask-radial',
-  '--tw-mask-radial-shape',
-  '--tw-mask-radial-size',
-  '--tw-mask-radial-position',
-  '--tw-mask-radial-from-color',
-  '--tw-mask-radial-from-position',
-  '--tw-mask-radial-to-color',
-  '--tw-mask-radial-to-position',
-
-  // Conic masks
-  '--tw-mask-conic',
-  '--tw-mask-conic-position',
-  '--tw-mask-conic-from-color',
-  '--tw-mask-conic-from-position',
-  '--tw-mask-conic-to-color',
-  '--tw-mask-conic-to-position',
-
   'box-decoration-break',
 
   'background-size',
@@ -316,15 +231,6 @@ export default [
   'background-repeat',
   'background-origin',
 
-  'mask-composite',
-  'mask-mode',
-  'mask-type',
-  'mask-size',
-  'mask-clip',
-  'mask-position',
-  'mask-repeat',
-  'mask-origin',
-
   'fill',
   'stroke',
   'stroke-width',
@@ -337,8 +243,6 @@ export default [
   'padding-block',
   'padding-inline-start',
   'padding-inline-end',
-  'padding-block-start',
-  'padding-block-end',
   'padding-top',
   'padding-right',
   'padding-bottom',
@@ -349,24 +253,16 @@ export default [
   'vertical-align',
 
   'font-family',
-  'font-feature-settings',
   'font-size',
-  'line-height',
   'font-weight',
-  'letter-spacing',
-  'text-wrap',
-  'overflow-wrap',
-  'word-break',
-  'text-overflow',
-  'hyphens',
-  'white-space',
-  'tab-size',
-
-  'color',
   'text-transform',
   'font-style',
   'font-stretch',
   'font-variant-numeric',
+  'line-height',
+  'letter-spacing',
+  'color',
+  '--tw-text-opacity',
   'text-decoration-line',
   'text-decoration-color',
   'text-decoration-style',
@@ -374,13 +270,12 @@ export default [
   'text-underline-offset',
   '-webkit-font-smoothing',
 
-  'placeholder-color',
+  'placeholder-color', // Not real
+  '--tw-placeholder-opacity',
 
   'caret-color',
   'accent-color',
 
-  'color-scheme',
-
   'opacity',
 
   'background-blend-mode',
@@ -395,6 +290,7 @@ export default [
   '--tw-inset-shadow-color',
   '--tw-inset-ring-shadow',
   '--tw-inset-ring-color',
+  '--tw-ring-opacity',
   '--tw-ring-offset-width',
   '--tw-ring-offset-color',
 
@@ -405,7 +301,7 @@ export default [
 
   '--tw-blur',
   '--tw-brightness',
-  '--tw-contrast',
+  '--tw-contast',
   '--tw-drop-shadow',
   '--tw-grayscale',
   '--tw-hue-rotate',
@@ -416,7 +312,7 @@ export default [
 
   '--tw-backdrop-blur',
   '--tw-backdrop-brightness',
-  '--tw-backdrop-contrast',
+  '--tw-backdrop-contast',
   '--tw-backdrop-grayscale',
   '--tw-backdrop-hue-rotate',
   '--tw-backdrop-invert',
@@ -426,7 +322,6 @@ export default [
   'backdrop-filter',
 
   'transition-property',
-  'transition-behavior',
   'transition-delay',
   'transition-duration',
   'transition-timing-function',
diff --git a/packages/tailwindcss/src/selector-parser.test.ts b/packages/tailwindcss/src/selector-parser.test.ts
deleted file mode 100644
index fa38dc578..000000000
--- a/packages/tailwindcss/src/selector-parser.test.ts
+++ /dev/null
@@ -1,620 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { parse, toCss } from './selector-parser'
-import { walk, WalkAction } from './walk'
-
-describe('parse', () => {
-  it('should parse a simple selector', () => {
-    expect(parse('.foo')).toEqual([{ kind: 'selector', value: '.foo' }])
-  })
-
-  it('should parse a compound selector', () => {
-    expect(parse('.foo.bar:hover#id')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: '.bar' },
-          { kind: 'selector', value: ':hover' },
-          { kind: 'selector', value: '#id' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse a pseudo-element selector with double ::', () => {
-    expect(parse('.foo::before')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: '::before' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse a selector list', () => {
-    expect(parse('.foo,.bar')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: '.bar' },
-        ],
-      },
-    ])
-  })
-
-  // We've got 3 options here:
-  //
-  // 1. We could throw, but then it becomes more annoying when you don't have
-  //    control over the CSS (for example when it's coming from a package).
-  // 2. We could parse it and ignore the invalid cases as-if they weren't there.
-  //    Re-printing the AST would turn it into a valid situation.
-  // 3. We could parse the invalid case and turn it into a `compound` such that
-  //    it stays invalid. When we re-print we would re-introduce the error.
-  //
-  // Before this change, we would keep the errors, and pass it along:
-  // - In a browser environment, these would be ignored
-  // - In Lightning CSS, these are thrown out
-  //
-  // For that reason alone, let's go with option 3 for now, such that the
-  // behavior is the same as before. This does mean that we see "weird" empty
-  // compound nodes.
-  it('should safely parse an invalid selector list', () => {
-    expect(parse('.foo,')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'compound', nodes: [] },
-        ],
-      },
-    ])
-    expect(parse(',.foo')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'compound', nodes: [] },
-          { kind: 'selector', value: '.foo' },
-        ],
-      },
-    ])
-    expect(parse(',.foo,')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'compound', nodes: [] },
-          { kind: 'selector', value: '.foo' },
-          { kind: 'compound', nodes: [] },
-        ],
-      },
-    ])
-    expect(parse('.foo,,.bar')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'compound', nodes: [] },
-          { kind: 'selector', value: '.bar' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse selector lists with whitespace around the comma', () => {
-    expect(parse('.foo, .bar')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: '.bar' },
-        ],
-      },
-    ])
-
-    expect(parse('.foo , .bar')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: '.bar' },
-        ],
-      },
-    ])
-
-    expect(parse('.foo ,.bar')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: '.bar' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse a list of attribute selectors', () => {
-    expect(parse('[foo],[bar]')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'selector', value: '[foo]' },
-          { kind: 'selector', value: '[bar]' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse a list of selectors with just functions', () => {
-    expect(parse(':is(.a),:is(.b)')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'function', value: ':is', nodes: [{ kind: 'selector', value: '.a' }] },
-          { kind: 'function', value: ':is', nodes: [{ kind: 'selector', value: '.b' }] },
-        ],
-      },
-    ])
-  })
-
-  it('should parse selector lists with more than two selectors', () => {
-    expect(parse('.foo,.bar,.baz')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: '.bar' },
-          { kind: 'selector', value: '.baz' },
-        ],
-      },
-    ])
-  })
-
-  it('should group selectors with combinators in a selector list', () => {
-    expect(parse('.a+.b, .c .d[attr], .e')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          {
-            kind: 'complex',
-            nodes: [
-              { kind: 'selector', value: '.a' },
-              { kind: 'combinator', value: '+' },
-              { kind: 'selector', value: '.b' },
-            ],
-          },
-          {
-            kind: 'complex',
-            nodes: [
-              { kind: 'selector', value: '.c' },
-              { kind: 'combinator', value: ' ' },
-              {
-                kind: 'compound',
-                nodes: [
-                  { kind: 'selector', value: '.d' },
-                  { kind: 'selector', value: '[attr]' },
-                ],
-              },
-            ],
-          },
-          { kind: 'selector', value: '.e' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse complex selectors in a selector list', () => {
-    expect(parse('#a.b > .c, .d')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          {
-            kind: 'complex',
-            nodes: [
-              {
-                kind: 'compound',
-                nodes: [
-                  { kind: 'selector', value: '#a' },
-                  { kind: 'selector', value: '.b' },
-                ],
-              },
-              { kind: 'combinator', value: '>' },
-              { kind: 'selector', value: '.c' },
-            ],
-          },
-          { kind: 'selector', value: '.d' },
-        ],
-      },
-    ])
-  })
-
-  it('should combine everything within attribute selectors', () => {
-    expect(parse('.foo[bar="baz"]')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: '[bar="baz"]' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse functions', () => {
-    expect(parse('.foo:hover:not(.bar:focus)')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'selector', value: ':hover' },
-          {
-            kind: 'function',
-            value: ':not',
-            nodes: [
-              {
-                kind: 'compound',
-                nodes: [
-                  { kind: 'selector', value: '.bar' },
-                  { kind: 'selector', value: ':focus' },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    ])
-  })
-
-  it('should parse selector lists in functions', () => {
-    expect(parse(':is(.foo, .bar)')).toEqual([
-      {
-        kind: 'function',
-        value: ':is',
-        nodes: [
-          {
-            kind: 'list',
-            nodes: [
-              { kind: 'selector', value: '.foo' },
-              { kind: 'selector', value: '.bar' },
-            ],
-          },
-        ],
-      },
-    ])
-  })
-
-  it('should handle next-children combinator', () => {
-    expect(parse('.foo + p')).toEqual([
-      {
-        kind: 'complex',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'combinator', value: '+' },
-          { kind: 'selector', value: 'p' },
-        ],
-      },
-    ])
-  })
-
-  it('should normalize combinators', () => {
-    expect(parse('.foo + .bar')).toEqual([
-      {
-        kind: 'complex',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'combinator', value: '+' },
-          { kind: 'selector', value: '.bar' },
-        ],
-      },
-    ])
-
-    expect(parse('.foo  \n\t .bar')).toEqual([
-      {
-        kind: 'complex',
-        nodes: [
-          { kind: 'selector', value: '.foo' },
-          { kind: 'combinator', value: ' ' },
-          { kind: 'selector', value: '.bar' },
-        ],
-      },
-    ])
-  })
-
-  it('should handle escaped characters', () => {
-    expect(parse('foo\\.bar')).toEqual([{ kind: 'selector', value: 'foo\\.bar' }])
-  })
-
-  it('parses :nth-child()', () => {
-    // The `An+B` part is not a selector, it stays an opaque value
-    expect(parse(':nth-child(n+1)')).toEqual([
-      {
-        kind: 'function',
-        value: ':nth-child',
-        nodes: [{ kind: 'value', value: 'n+1' }],
-      },
-    ])
-
-    // The selector list after `of` is parsed as a selector
-    expect(parse(':nth-child(2 of &)')).toEqual([
-      {
-        kind: 'function',
-        value: ':nth-child',
-        nodes: [
-          { kind: 'value', value: '2 of ' },
-          { kind: 'selector', value: '&' },
-        ],
-      },
-    ])
-
-    expect(parse(':nth-child(2n + 1 of .foo, .bar)')).toEqual([
-      {
-        kind: 'function',
-        value: ':nth-child',
-        nodes: [
-          { kind: 'value', value: '2n + 1 of ' },
-          {
-            kind: 'list',
-            nodes: [
-              { kind: 'selector', value: '.foo' },
-              { kind: 'selector', value: '.bar' },
-            ],
-          },
-        ],
-      },
-    ])
-  })
-
-  it('parses &:has(.child:nth-child(2))', () => {
-    expect(parse('&:has(.child:nth-child(2))')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          {
-            kind: 'selector',
-            value: '&',
-          },
-          {
-            kind: 'function',
-            value: ':has',
-            nodes: [
-              {
-                kind: 'compound',
-                nodes: [
-                  {
-                    kind: 'selector',
-                    value: '.child',
-                  },
-                  {
-                    kind: 'function',
-                    value: ':nth-child',
-                    nodes: [
-                      {
-                        kind: 'value',
-                        value: '2',
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    ])
-  })
-
-  it('parses &:has(:nth-child(2))', () => {
-    expect(parse('&:has(:nth-child(2))')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          {
-            kind: 'selector',
-            value: '&',
-          },
-          {
-            kind: 'function',
-            value: ':has',
-            nodes: [
-              {
-                kind: 'function',
-                value: ':nth-child',
-                nodes: [
-                  {
-                    kind: 'value',
-                    value: '2',
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    ])
-  })
-
-  it('parses nesting selector before attribute selector', () => {
-    expect(parse('&[data-foo]')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '&' },
-          { kind: 'selector', value: '[data-foo]' },
-        ],
-      },
-    ])
-  })
-
-  it('parses nesting selector after an attribute selector', () => {
-    expect(parse('[data-foo]&')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '[data-foo]' },
-          { kind: 'selector', value: '&' },
-        ],
-      },
-    ])
-  })
-
-  it('parses universal selector before attribute selector', () => {
-    expect(parse('*[data-foo]')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '*' },
-          { kind: 'selector', value: '[data-foo]' },
-        ],
-      },
-    ])
-  })
-
-  it('parses the universal selector after an attribute selector', () => {
-    expect(parse('[data-foo]*')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '[data-foo]' },
-          { kind: 'selector', value: '*' },
-        ],
-      },
-    ])
-  })
-
-  it('parses another attribute selector after an attribute selector', () => {
-    expect(parse('[data-foo][data-bar]')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '[data-foo]' },
-          { kind: 'selector', value: '[data-bar]' },
-        ],
-      },
-    ])
-  })
-
-  it('parses a type selector before an attribute selector', () => {
-    expect(parse('div[data-foo]')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: 'div' },
-          { kind: 'selector', value: '[data-foo]' },
-        ],
-      },
-    ])
-  })
-
-  it('parses a type selector after an attribute selector', () => {
-    expect(parse('[data-foo]div')).toEqual([
-      {
-        kind: 'compound',
-        nodes: [
-          { kind: 'selector', value: '[data-foo]' },
-          { kind: 'selector', value: 'div' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse selector lists as real selectors', () => {
-    expect(parse('.foo[attr], .bar#id, .baz + .qux')).toEqual([
-      {
-        kind: 'list',
-        nodes: [
-          {
-            kind: 'compound',
-            nodes: [
-              { kind: 'selector', value: '.foo' },
-              { kind: 'selector', value: '[attr]' },
-            ],
-          },
-          {
-            kind: 'compound',
-            nodes: [
-              { kind: 'selector', value: '.bar' },
-              { kind: 'selector', value: '#id' },
-            ],
-          },
-          {
-            kind: 'complex',
-            nodes: [
-              { kind: 'selector', value: '.baz' },
-              { kind: 'combinator', value: '+' },
-              { kind: 'selector', value: '.qux' },
-            ],
-          },
-        ],
-      },
-    ])
-  })
-})
-
-describe('toCss', () => {
-  it('should print a simple selector', () => {
-    expect(toCss(parse('.foo'))).toBe('.foo')
-  })
-
-  it('should print a compound selector', () => {
-    expect(toCss(parse('.foo.bar:hover#id'))).toBe('.foo.bar:hover#id')
-  })
-
-  it('should print a selector list', () => {
-    expect(toCss(parse('.foo, .bar'))).toBe('.foo, .bar')
-  })
-
-  it('should print a selector list with normalized commas', () => {
-    expect(toCss(parse('.foo,.bar'))).toBe('.foo, .bar')
-    expect(toCss(parse('.foo, .bar'))).toBe('.foo, .bar')
-    expect(toCss(parse('.foo , .bar'))).toBe('.foo, .bar')
-    expect(toCss(parse('.foo ,.bar'))).toBe('.foo, .bar')
-  })
-
-  it('should print a selector list but minimized', () => {
-    expect(toCss(parse('.foo, .bar'), true)).toBe('.foo,.bar')
-    expect(toCss(parse('.foo , .bar'), true)).toBe('.foo,.bar')
-    expect(toCss(parse('.foo ,.bar'), true)).toBe('.foo,.bar')
-  })
-
-  it('should print an attribute selectors', () => {
-    expect(toCss(parse('.foo[bar="baz"]'))).toBe('.foo[bar="baz"]')
-  })
-
-  it('should print a function', () => {
-    expect(toCss(parse('.foo:hover:not(.bar:focus)'))).toBe('.foo:hover:not(.bar:focus)')
-  })
-
-  it('should print escaped characters', () => {
-    expect(toCss(parse('foo\\.bar'))).toBe('foo\\.bar')
-  })
-
-  it('should print :nth-child()', () => {
-    // The `An+B` part is printed verbatim, whitespace in the selector list
-    // after `of` is normalized
-    expect(toCss(parse(':nth-child(n+1)'))).toBe(':nth-child(n+1)')
-    expect(toCss(parse(':nth-child(+2)'))).toBe(':nth-child(+2)')
-    expect(toCss(parse(':nth-child(2n + 1 of .foo,.bar)'))).toBe(':nth-child(2n + 1 of .foo, .bar)')
-  })
-
-  it('should pretty print a complex selector', () => {
-    expect(toCss(parse('.a+.b, .c .d[attr], .e'))).toBe('.a + .b, .c .d[attr], .e')
-  })
-
-  it('should minify a complex selector during printing', () => {
-    expect(toCss(parse('.a+.b, .c .d[attr], .e'), true)).toBe('.a+.b,.c .d[attr],.e')
-    //                                                                 ^ This space is significant to indicate a descendant combinator
-  })
-})
-
-describe('walk', () => {
-  it('can be used to replace a function call', () => {
-    const ast = parse('.foo:hover:not(.bar:focus)')
-    walk(ast, (node) => {
-      if (node.kind === 'function' && node.value === ':not') {
-        return WalkAction.Replace({ kind: 'selector', value: '.inverted-bar' } as const)
-      }
-    })
-    expect(toCss(ast)).toBe('.foo:hover.inverted-bar')
-  })
-})
diff --git a/packages/tailwindcss/src/selector-parser.ts b/packages/tailwindcss/src/selector-parser.ts
deleted file mode 100644
index 2a435f687..000000000
--- a/packages/tailwindcss/src/selector-parser.ts
+++ /dev/null
@@ -1,627 +0,0 @@
-type Combinator =
-  | ' ' // Descendant combinator
-  | '>' // Child combinator
-  | '+' // Next-sibling combinator
-  | '~' // Subsequent-sibling combinator
-
-export type SelectorListNode = {
-  kind: 'list'
-  nodes: SelectorAstNode[]
-}
-
-export type SelectorCombinatorNode = {
-  kind: 'combinator'
-  value: Combinator
-}
-
-export type SelectorComplexNode = {
-  kind: 'complex'
-  nodes: SelectorAstNode[]
-}
-
-export type SelectorCompoundNode = {
-  kind: 'compound'
-  nodes: SelectorAstNode[]
-}
-
-export type SelectorNode = {
-  kind: 'selector'
-  value: string
-}
-
-export type SelectorFunctionNode = {
-  kind: 'function'
-  value: string
-  nodes: SelectorAstNode[]
-}
-
-export type SelectorValueNode = {
-  kind: 'value'
-  value: string
-}
-
-export type SelectorAstNode =
-  | SelectorFunctionNode
-  | SelectorCombinatorNode
-  | SelectorComplexNode
-  | SelectorCompoundNode
-  | SelectorListNode
-  | SelectorNode
-  | SelectorValueNode
-
-function combinator(value: Combinator): SelectorCombinatorNode {
-  return {
-    kind: 'combinator',
-    value,
-  }
-}
-
-function complex(nodes: SelectorAstNode[]): SelectorComplexNode {
-  return {
-    kind: 'complex',
-    nodes,
-  }
-}
-
-function compound(nodes: SelectorAstNode[]): SelectorCompoundNode {
-  return {
-    kind: 'compound',
-    nodes,
-  }
-}
-
-export function fun(value: string, nodes: SelectorAstNode[]): SelectorFunctionNode {
-  return {
-    kind: 'function',
-    value,
-    nodes,
-  }
-}
-
-function list(nodes: SelectorAstNode[]): SelectorListNode {
-  return {
-    kind: 'list',
-    nodes,
-  }
-}
-
-export function selector(value: string): SelectorNode {
-  return {
-    kind: 'selector',
-    value,
-  }
-}
-
-function value(value: string): SelectorValueNode {
-  return {
-    kind: 'value',
-    value,
-  }
-}
-
-export function isUniversalSelector(node: SelectorAstNode): boolean {
-  return node.kind === 'selector' && node.value.charCodeAt(0) === ASTERISK
-}
-
-export function isNestingSelector(node: SelectorAstNode): boolean {
-  return node.kind === 'selector' && node.value.charCodeAt(0) === AMPERSAND
-}
-
-export function isClassSelector(node: SelectorAstNode): boolean {
-  return node.kind === 'selector' && node.value.charCodeAt(0) === DOT
-}
-
-export function isIdSelector(node: SelectorAstNode): boolean {
-  return node.kind === 'selector' && node.value.charCodeAt(0) === HASH
-}
-
-export function isPseudoSelector(node: SelectorAstNode): boolean {
-  return node.kind === 'selector' && node.value.charCodeAt(0) === COLON
-}
-
-export function isAttributeSelector(node: SelectorAstNode): boolean {
-  return node.kind === 'selector' && node.value.charCodeAt(0) === OPEN_BRACKET
-}
-
-export function isTypeSelector(node: SelectorAstNode): boolean {
-  if (node.kind !== 'selector') return false
-
-  switch (node.value.charCodeAt(0)) {
-    case ASTERISK: // Universal selector
-    case AMPERSAND: // Nesting selector
-    case DOT: // Class selector
-    case HASH: // ID selector
-    case COLON: // Pseudo selector
-    case OPEN_BRACKET: // Attribute selector
-      return false
-
-    // We don't fully verify whether this is actually a proper type selector,
-    // but we assume it is one if it's not any of the other ones.
-    default:
-      return true
-  }
-}
-
-export function cloneAstNode<T extends SelectorAstNode>(node: T): T {
-  switch (node.kind) {
-    case 'combinator':
-    case 'selector':
-    case 'value':
-      return {
-        kind: node.kind,
-        value: node.value,
-      } as T
-
-    case 'complex':
-    case 'compound':
-    case 'list':
-      return {
-        kind: node.kind,
-        nodes: node.nodes.map(cloneAstNode),
-      } as T
-
-    case 'function':
-      return {
-        kind: node.kind,
-        value: node.value,
-        nodes: node.nodes.map(cloneAstNode),
-      } satisfies SelectorFunctionNode as T
-
-    default:
-      node satisfies never
-      throw new Error(`Unknown node kind: ${(node as any).kind}`)
-  }
-}
-
-export function toCss(ast: SelectorAstNode[], minify = false) {
-  let css = ''
-  for (let node of ast) {
-    switch (node.kind) {
-      case 'selector':
-      case 'value': {
-        css += node.value
-        break
-      }
-      case 'combinator': {
-        if (minify || node.value === ' ') {
-          css += node.value
-        } else {
-          css += ` ${node.value} `
-        }
-        break
-      }
-
-      case 'function': {
-        css += `${node.value}(${toCss(node.nodes, minify)})`
-        break
-      }
-      case 'complex':
-      case 'compound': {
-        css += toCss(node.nodes, minify)
-        break
-      }
-      case 'list': {
-        css += node.nodes.map((node) => toCss([node], minify)).join(minify ? ',' : ', ')
-        break
-      }
-    }
-  }
-  return css
-}
-
-const BACKSLASH = 0x5c
-const CLOSE_BRACKET = 0x5d
-const CLOSE_PAREN = 0x29
-const COLON = 0x3a
-const COMMA = 0x2c
-const DOUBLE_QUOTE = 0x22
-const DOT = 0x2e
-const GREATER_THAN = 0x3e
-const NEWLINE = 0x0a
-const HASH = 0x23
-const OPEN_BRACKET = 0x5b
-const OPEN_PAREN = 0x28
-const PLUS = 0x2b
-const SINGLE_QUOTE = 0x27
-const SPACE = 0x20
-const TAB = 0x09
-const TILDE = 0x7e
-const AMPERSAND = 0x26
-const ASTERISK = 0x2a
-
-export function parse(input: string) {
-  input = input.replaceAll('\r\n', '\n')
-
-  let ast: SelectorAstNode[] = []
-
-  let target = ast
-
-  let containsCombinator = false
-
-  let contextStack: {
-    target: SelectorAstNode[]
-    currentList: SelectorListNode | null
-    containsCombinator: boolean
-  }[] = []
-
-  let currentList: SelectorListNode | null = null
-
-  let buffer = ''
-
-  let peekChar
-
-  function current(nodes = target): SelectorAstNode {
-    return nodes.length === 1 ? nodes[0] : containsCombinator ? complex(nodes) : compound(nodes)
-  }
-
-  function append(node: SelectorAstNode) {
-    let existing = target[target.length - 1]
-
-    if (existing?.kind === 'compound') {
-      existing.nodes.push(node)
-    } else if (existing && existing.kind !== 'list' && existing.kind !== 'combinator') {
-      target[target.length - 1] = compound([existing, node])
-    } else {
-      target.push(node)
-    }
-  }
-
-  for (let i = 0; i < input.length; i++) {
-    let currentChar = input.charCodeAt(i)
-
-    switch (currentChar) {
-      // Handle selector lists
-      //
-      // ```css
-      // .foo, .bar {}
-      //     ^
-      // ```
-      case COMMA: {
-        // Flush remaining buffer as a selector
-        if (buffer.length > 0) {
-          append(selector(buffer))
-          buffer = ''
-        }
-
-        // Skip whitespace
-        for (; i + 1 < input.length; i++) {
-          peekChar = input.charCodeAt(i + 1)
-          if (peekChar !== NEWLINE && peekChar !== SPACE && peekChar !== TAB) {
-            break
-          }
-        }
-
-        // Add nodes to the current list
-        if (currentList) {
-          currentList.nodes.push(current())
-          target = []
-          containsCombinator = false
-        }
-
-        // Start a new list
-        else {
-          let nodes = target.splice(0)
-          let item = current(nodes)
-          let node = list([item])
-          target.push(node)
-          currentList = node
-          target = []
-          containsCombinator = false
-        }
-
-        break
-      }
-
-      // Handle combinators
-      //
-      // E.g.:
-      //
-      // ```css
-      // .foo .bar
-      //     ^
-      //
-      // .foo > .bar
-      //     ^^^
-      // ```
-      case GREATER_THAN:
-      case NEWLINE:
-      case SPACE:
-      case PLUS:
-      case TAB:
-      case TILDE: {
-        // Flush remaining buffer as a selector
-        if (buffer.length > 0) {
-          append(selector(buffer))
-          buffer = ''
-        }
-
-        // Look ahead and find the end of the combinator
-        let start = i
-        let end = i + 1
-        for (; end < input.length; end++) {
-          peekChar = input.charCodeAt(end)
-          if (
-            peekChar !== GREATER_THAN &&
-            peekChar !== NEWLINE &&
-            peekChar !== SPACE &&
-            peekChar !== PLUS &&
-            peekChar !== TAB &&
-            peekChar !== TILDE
-          ) {
-            break
-          }
-        }
-        i = end - 1
-
-        let value = input.slice(start, end).trim()
-        if (
-          value === '' &&
-          (target.length === 0 || end >= input.length || input.charCodeAt(end) === COMMA)
-        ) {
-          break
-        }
-
-        target.push(combinator((value === '' ? ' ' : value) as Combinator))
-        containsCombinator = true
-
-        break
-      }
-
-      // Start of a function call
-      //
-      // E.g.:
-      //
-      // ```css
-      // .foo:not(.bar)
-      //         ^
-      // ```
-      case OPEN_PAREN: {
-        let node = fun(buffer, [])
-        buffer = ''
-
-        // If the function is not one of the following, we combine all its
-        // contents into a single value node
-        if (
-          node.value !== ':not' &&
-          node.value !== ':where' &&
-          node.value !== ':has' &&
-          node.value !== ':is'
-        ) {
-          // Find the end of the function call
-          let start = i + 1
-          let nesting = 0
-
-          // Find the closing bracket
-          for (let j = i + 1; j < input.length; j++) {
-            peekChar = input.charCodeAt(j)
-            if (peekChar === OPEN_PAREN) {
-              nesting++
-              continue
-            }
-            if (peekChar === CLOSE_PAREN) {
-              if (nesting === 0) {
-                i = j
-                break
-              }
-              nesting--
-            }
-          }
-          let end = i
-
-          let contents = input.slice(start, end)
-
-          // `:nth-child(…)` and `:nth-last-child(…)` can contain an
-          // `of <complex-selector-list>` clause. The selector list must be
-          // parsed (e.g. to be able to substitute `&`), but the `An+B` part
-          // is not a selector so it stays an opaque value node. E.g.:
-          //
-          // ```css
-          // :nth-child(2n + 1 of .foo, .bar)
-          //            ^^^^^^^^^^ value
-          //                       ^^^^^^^^^^ selector list
-          // ```
-          if (node.value === ':nth-child' || node.value === ':nth-last-child') {
-            let idx = contents.indexOf('of ')
-            if (idx !== -1) {
-              node.nodes.push(
-                value(
-                  contents.slice(0, idx + 3), // value `2n + 1 of `
-                ),
-                ...parse(
-                  contents.slice(idx + 3), // `.foo, .bar`
-                ),
-              )
-              buffer = ''
-              i = end
-
-              append(node)
-
-              break
-            }
-          }
-
-          node.nodes.push(value(contents))
-          buffer = ''
-          i = end
-
-          append(node)
-
-          break
-        }
-
-        append(node)
-        contextStack.push({ target, currentList, containsCombinator })
-        target = node.nodes
-        containsCombinator = false
-        currentList = null
-
-        break
-      }
-
-      // End of a function call
-      //
-      // E.g.:
-      //
-      // ```css
-      // foo(bar, baz)
-      //             ^
-      // ```
-      case CLOSE_PAREN: {
-        // Flush remaining buffer as a selector
-        if (buffer.length > 0) {
-          append(selector(buffer))
-          buffer = ''
-        }
-
-        if (currentList) {
-          currentList.nodes.push(current())
-        } else if (containsCombinator) {
-          target.splice(0, target.length, complex(target.splice(0)))
-        }
-
-        let context = contextStack.pop()
-        target = context?.target ?? ast
-        currentList = context?.currentList ?? null
-        containsCombinator = context?.containsCombinator ?? false
-
-        break
-      }
-
-      // Split compound selectors
-      //
-      // E.g.:
-      //
-      // ```css
-      // .foo.bar
-      //     ^
-      // ```
-      case DOT:
-      case COLON:
-      case HASH: {
-        if (currentChar === COLON && buffer === ':') {
-          buffer += input[i]
-          break
-        }
-
-        // Handle everything before the combinator as a selector and start a new
-        // selector
-        if (buffer.length > 0) {
-          append(selector(buffer))
-        }
-        buffer = input[i]
-        break
-      }
-
-      // Start of an attribute selector
-      //
-      // NOTE: Right now we don't care about the individual parts of the
-      // attribute selector, we just want to find the matching closing bracket.
-      //
-      // If we need more information from inside the attribute selector in the
-      // future, then we can use the `AttributeSelectorParser` here (and even
-      // inline it if needed)
-      case OPEN_BRACKET: {
-        // Flush remaining buffer as a selector
-        if (buffer.length > 0) {
-          append(selector(buffer))
-          buffer = ''
-        }
-
-        let start = i
-        let nesting = 0
-
-        // Find the closing bracket
-        for (let j = i + 1; j < input.length; j++) {
-          peekChar = input.charCodeAt(j)
-          if (peekChar === OPEN_BRACKET) {
-            nesting++
-            continue
-          }
-          if (peekChar === CLOSE_BRACKET) {
-            if (nesting === 0) {
-              i = j
-              break
-            }
-            nesting--
-          }
-        }
-
-        append(selector(input.slice(start, i + 1)))
-        break
-      }
-
-      // Start of a string
-      case SINGLE_QUOTE:
-      case DOUBLE_QUOTE: {
-        let start = i
-
-        // We need to ensure that the closing quote is the same as the opening
-        // quote.
-        //
-        // E.g.:
-        //
-        // ```css
-        // "This is a string with a 'quote' in it"
-        //                          ^     ^         -> These are not the end of the string
-        // ```
-        for (let j = i + 1; j < input.length; j++) {
-          peekChar = input.charCodeAt(j)
-          // Current character is a `\` therefore the next character is escaped
-          if (peekChar === BACKSLASH) {
-            j += 1
-          }
-
-          // End of the string
-          else if (peekChar === currentChar) {
-            i = j
-            break
-          }
-        }
-
-        // Adjust `buffer` to include the string
-        buffer += input.slice(start, i + 1)
-        break
-      }
-
-      // Nesting `&` is always a new selector
-      // Universal `*` is always a new selector
-      case AMPERSAND:
-      case ASTERISK: {
-        // Flush remaining buffer as a selector
-        if (buffer.length > 0) {
-          append(selector(buffer))
-          buffer = ''
-        }
-
-        // Handle the `&` or `*` as a selector on its own
-        append(selector(input[i]))
-        break
-      }
-
-      // Escaped characters
-      case BACKSLASH: {
-        buffer += input[i] + input[i + 1]
-        i += 1
-        break
-      }
-
-      // Everything else will be collected in the buffer
-      default: {
-        buffer += input[i]
-      }
-    }
-  }
-
-  // Collect the remainder as a selector
-  if (buffer.length > 0) {
-    append(selector(buffer))
-  }
-
-  if (currentList) {
-    currentList.nodes.push(current())
-  } else if (containsCombinator) {
-    target.splice(0, target.length, complex(target.splice(0)))
-  }
-
-  return ast
-}
diff --git a/packages/tailwindcss/src/sort.bench.ts b/packages/tailwindcss/src/sort.bench.ts
index 907793c37..dce0132d3 100644
--- a/packages/tailwindcss/src/sort.bench.ts
+++ b/packages/tailwindcss/src/sort.bench.ts
@@ -4,15 +4,17 @@ import { Theme } from './theme'
 
 const input = 'a-class px-3 p-1 b-class py-3 bg-red-500 bg-blue-500'.split(' ')
 const emptyDesign = buildDesignSystem(new Theme())
-const simpleDesign = (() => {
-  let simpleTheme = new Theme()
-  simpleTheme.add('--spacing-1', '0.25rem')
-  simpleTheme.add('--spacing-3', '0.75rem')
-  simpleTheme.add('--spacing-4', '1rem')
-  simpleTheme.add('--color-red-500', 'red')
-  simpleTheme.add('--color-blue-500', 'blue')
-  return buildDesignSystem(simpleTheme)
-})()
+const simpleDesign = buildDesignSystem(
+  new Theme(
+    new Map([
+      ['--spacing-1', '0.25rem'],
+      ['--spacing-3', '0.75rem'],
+      ['--spacing-4', '1rem'],
+      ['--color-red-500', 'red'],
+      ['--color-blue-500', 'blue'],
+    ]),
+  ),
+)
 
 bench('getClassOrder (empty theme)', () => {
   emptyDesign.getClassOrder(input)
diff --git a/packages/tailwindcss/src/sort.test.ts b/packages/tailwindcss/src/sort.test.ts
index 6ced80929..82ebd85db 100644
--- a/packages/tailwindcss/src/sort.test.ts
+++ b/packages/tailwindcss/src/sort.test.ts
@@ -15,15 +15,15 @@ function loadDesign() {
 }
 
 const table = [
-  // Utilities
-  ['py-3 p-1 px-3', 'p-1 px-3 py-3'],
+  // Utitlies
+  ['px-3 p-1 py-3', 'p-1 py-3 px-3'],
 
   // Utilities with variants
-  ['px-3 focus:hover:p-3 hover:p-1 py-3', 'px-3 py-3 hover:p-1 focus:hover:p-3'],
+  ['px-3 focus:hover:p-3 hover:p-1 py-3', 'py-3 px-3 hover:p-1 focus:hover:p-3'],
 
-  // Utilities with important
-  ['px-3 py-4! p-1', 'p-1 px-3 py-4!'],
-  ['py-4! px-3 p-1', 'p-1 px-3 py-4!'],
+  // Utitlies with important
+  ['px-3 py-4! p-1', 'p-1 py-4! px-3'],
+  ['py-4! px-3 p-1', 'p-1 py-4! px-3'],
 
   // User CSS order is the same and moved to the front
   ['b p-1 a', 'b a p-1'],
@@ -35,54 +35,54 @@ const table = [
   // ['dark a underline', 'a dark underline'],
 ] as const
 
-test.each(table)('sorts classes: "%s" -> "%s"', async (input, expected) => {
-  expect(sortClasses(input, await loadDesign())).toEqual(expected)
+test.each(table)('sorts classes: "%s" -> "%s"', (input, expected) => {
+  expect(sortClasses(input, loadDesign())).toEqual(expected)
 })
 
-test.skip('group, peer, and dark have their own order', async () => {
+test.skip('group, peer, and dark have their own order', () => {
   let input = shuffle(['group', 'peer', 'dark']).join(' ')
-  expect(sortClasses(input, await loadDesign())).toEqual('dark group peer')
+  expect(sortClasses(input, loadDesign())).toEqual('dark group peer')
 })
 
-test('can sort classes deterministically across multiple class lists', async () => {
+test('can sort classes deterministically across multiple class lists', () => {
   let classes = [
     [
       'a-class px-3 p-1 b-class py-3 bg-red-500 bg-blue-500',
-      'a-class b-class bg-blue-500 bg-red-500 p-1 px-3 py-3',
+      'a-class b-class bg-blue-500 bg-red-500 p-1 py-3 px-3',
     ],
     [
       'px-3 b-class p-1 py-3 bg-blue-500 a-class bg-red-500',
-      'b-class a-class bg-blue-500 bg-red-500 p-1 px-3 py-3',
+      'b-class a-class bg-blue-500 bg-red-500 p-1 py-3 px-3',
     ],
   ]
 
   // Shared design
-  let design = await loadDesign()
+  let design = loadDesign()
   for (const [input, output] of classes) {
     expect(sortClasses(input, design)).toEqual(output)
   }
 
   // Fresh design
   for (const [input, output] of classes) {
-    expect(sortClasses(input, await loadDesign())).toEqual(output)
+    expect(sortClasses(input, loadDesign())).toEqual(output)
   }
 })
 
-test('sorts arbitrary values across one or more class lists consistently', async () => {
+test('sorts arbitrary values across one or more class lists consistently', () => {
   let classes = [
     ['[--fg:#fff]', '[--fg:#fff]'],
     ['[--bg:#111] [--bg_hover:#000] [--fg:#fff]', '[--bg:#111] [--bg_hover:#000] [--fg:#fff]'],
   ]
 
   // Shared design
-  let design = await loadDesign()
+  let design = loadDesign()
   for (const [input, output] of classes) {
     expect(sortClasses(input, design)).toEqual(output)
   }
 
   // Fresh design
   for (const [input, output] of classes) {
-    expect(sortClasses(input, await loadDesign())).toEqual(output)
+    expect(sortClasses(input, loadDesign())).toEqual(output)
   }
 })
 
diff --git a/packages/tailwindcss/src/source-maps/line-table.bench.ts b/packages/tailwindcss/src/source-maps/line-table.bench.ts
deleted file mode 100644
index 862e2d398..000000000
--- a/packages/tailwindcss/src/source-maps/line-table.bench.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { readFileSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
-
-import { bench } from 'vitest'
-import { createLineTable } from './line-table'
-
-const currentFolder = fileURLToPath(new URL('..', import.meta.url))
-const cssFile = readFileSync(currentFolder + '../preflight.css', 'utf-8')
-const table = createLineTable(cssFile)
-
-bench('line table lookups', () => {
-  for (let i = 0; i < cssFile.length; ++i) table.find(i)
-})
diff --git a/packages/tailwindcss/src/source-maps/line-table.test.ts b/packages/tailwindcss/src/source-maps/line-table.test.ts
deleted file mode 100644
index 23c46243b..000000000
--- a/packages/tailwindcss/src/source-maps/line-table.test.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import dedent from 'dedent'
-import { expect, test } from 'vitest'
-import { createLineTable } from './line-table'
-
-const css = dedent
-
-test('line tables', () => {
-  let text = css`
-    .foo {
-      color: red;
-    }
-  `
-
-  let table = createLineTable(`${text}\n`)
-
-  // Line 1: `.foo {\n`
-  expect(table.find(0)).toEqual({ line: 1, column: 0 })
-  expect(table.find(1)).toEqual({ line: 1, column: 1 })
-  expect(table.find(2)).toEqual({ line: 1, column: 2 })
-  expect(table.find(3)).toEqual({ line: 1, column: 3 })
-  expect(table.find(4)).toEqual({ line: 1, column: 4 })
-  expect(table.find(5)).toEqual({ line: 1, column: 5 })
-  expect(table.find(6)).toEqual({ line: 1, column: 6 })
-
-  // Line 2: `  color: red;\n`
-  expect(table.find(6 + 1)).toEqual({ line: 2, column: 0 })
-  expect(table.find(6 + 2)).toEqual({ line: 2, column: 1 })
-  expect(table.find(6 + 3)).toEqual({ line: 2, column: 2 })
-  expect(table.find(6 + 4)).toEqual({ line: 2, column: 3 })
-  expect(table.find(6 + 5)).toEqual({ line: 2, column: 4 })
-  expect(table.find(6 + 6)).toEqual({ line: 2, column: 5 })
-  expect(table.find(6 + 7)).toEqual({ line: 2, column: 6 })
-  expect(table.find(6 + 8)).toEqual({ line: 2, column: 7 })
-  expect(table.find(6 + 9)).toEqual({ line: 2, column: 8 })
-  expect(table.find(6 + 10)).toEqual({ line: 2, column: 9 })
-  expect(table.find(6 + 11)).toEqual({ line: 2, column: 10 })
-  expect(table.find(6 + 12)).toEqual({ line: 2, column: 11 })
-  expect(table.find(6 + 13)).toEqual({ line: 2, column: 12 })
-
-  // Line 3: `}\n`
-  expect(table.find(20 + 1)).toEqual({ line: 3, column: 0 })
-  expect(table.find(20 + 2)).toEqual({ line: 3, column: 1 })
-
-  // After the new line
-  expect(table.find(22 + 1)).toEqual({ line: 4, column: 0 })
-})
-
-test('line tables findOffset', () => {
-  let text = css`
-    .foo {
-      color: red;
-    }
-  `
-
-  let table = createLineTable(`${text}\n`)
-
-  // Line 1: `.foo {\n`
-  expect(table.findOffset({ line: 1, column: 0 })).toEqual(0)
-  expect(table.findOffset({ line: 1, column: 1 })).toEqual(1)
-  expect(table.findOffset({ line: 1, column: 2 })).toEqual(2)
-  expect(table.findOffset({ line: 1, column: 3 })).toEqual(3)
-  expect(table.findOffset({ line: 1, column: 4 })).toEqual(4)
-  expect(table.findOffset({ line: 1, column: 5 })).toEqual(5)
-  expect(table.findOffset({ line: 1, column: 6 })).toEqual(6)
-
-  // Line 2: `  color: red;\n`
-  expect(table.findOffset({ line: 2, column: 0 })).toEqual(6 + 1)
-  expect(table.findOffset({ line: 2, column: 1 })).toEqual(6 + 2)
-  expect(table.findOffset({ line: 2, column: 2 })).toEqual(6 + 3)
-  expect(table.findOffset({ line: 2, column: 3 })).toEqual(6 + 4)
-  expect(table.findOffset({ line: 2, column: 4 })).toEqual(6 + 5)
-  expect(table.findOffset({ line: 2, column: 5 })).toEqual(6 + 6)
-  expect(table.findOffset({ line: 2, column: 6 })).toEqual(6 + 7)
-  expect(table.findOffset({ line: 2, column: 7 })).toEqual(6 + 8)
-  expect(table.findOffset({ line: 2, column: 8 })).toEqual(6 + 9)
-  expect(table.findOffset({ line: 2, column: 9 })).toEqual(6 + 10)
-  expect(table.findOffset({ line: 2, column: 10 })).toEqual(6 + 11)
-  expect(table.findOffset({ line: 2, column: 11 })).toEqual(6 + 12)
-  expect(table.findOffset({ line: 2, column: 12 })).toEqual(6 + 13)
-
-  // Line 3: `}\n`
-  expect(table.findOffset({ line: 3, column: 0 })).toEqual(20 + 1)
-  expect(table.findOffset({ line: 3, column: 1 })).toEqual(20 + 2)
-
-  // After the new line
-  expect(table.findOffset({ line: 4, column: 0 })).toEqual(22 + 1)
-})
diff --git a/packages/tailwindcss/src/source-maps/line-table.ts b/packages/tailwindcss/src/source-maps/line-table.ts
deleted file mode 100644
index e16051762..000000000
--- a/packages/tailwindcss/src/source-maps/line-table.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Line offset tables are the key to generating our source maps. They allow us
- * to store indexes with our AST nodes and later convert them into positions as
- * when given the source that the indexes refer to.
- */
-
-const LINE_BREAK = 0x0a
-
-/**
- * A position in source code
- *
- * https://tc39.es/ecma426/#sec-position-record-type
- */
-export interface Position {
-  /** The line number, one-based */
-  line: number
-
-  /** The column/character number, one-based */
-  column: number
-}
-
-/**
- * A table that lets you turn an offset into a line number and column
- */
-export interface LineTable {
-  /**
-   * Find the line/column position in the source code for a given offset
-   *
-   * Searching for a given offset takes O(log N) time where N is the number of
-   * lines of code.
-   *
-   * @param offset The index for which to find the position
-   */
-  find(offset: number): Position
-
-  /**
-   * Find the most likely byte offset for given a position
-   *
-   * @param offset The position for which to find the byte offset
-   */
-  findOffset(pos: Position): number
-}
-
-/**
- * Compute a lookup table to allow for efficient line/column lookups based on
- * offsets in the source code.
- *
- * Creating this table is an O(N) operation where N is the length of the source
- */
-export function createLineTable(source: string): LineTable {
-  let table: number[] = [0]
-
-  // Compute the offsets for the start of each line
-  for (let i = 0; i < source.length; i++) {
-    if (source.charCodeAt(i) === LINE_BREAK) {
-      table.push(i + 1)
-    }
-  }
-
-  function find(offset: number) {
-    // Based on esbuild's binary search for line numbers
-    let line = 0
-    let count = table.length
-    while (count > 0) {
-      // `| 0` improves performance (in V8 at least)
-      let mid = (count | 0) >> 1
-      let i = line + mid
-      if (table[i] <= offset) {
-        line = i + 1
-        count = count - mid - 1
-      } else {
-        count = mid
-      }
-    }
-
-    line -= 1
-
-    let column = offset - table[line]
-
-    return {
-      line: line + 1,
-      column: column,
-    }
-  }
-
-  function findOffset({ line, column }: Position) {
-    line -= 1
-    line = Math.min(Math.max(line, 0), table.length - 1)
-
-    let offsetA = table[line]
-    let offsetB = table[line + 1] ?? offsetA
-
-    return Math.min(Math.max(offsetA + column, 0), offsetB)
-  }
-
-  return {
-    find,
-    findOffset,
-  }
-}
diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts
deleted file mode 100644
index 2bc7b0962..000000000
--- a/packages/tailwindcss/src/source-maps/source-map.test.ts
+++ /dev/null
@@ -1,893 +0,0 @@
-import remapping from '@jridgewell/remapping'
-import dedent from 'dedent'
-import MagicString from 'magic-string'
-import * as fs from 'node:fs/promises'
-import * as path from 'node:path'
-import { SourceMapGenerator, type RawSourceMap } from 'source-map-js'
-import { test } from 'vitest'
-import { compile } from '..'
-import createPlugin from '../plugin'
-import { DefaultMap } from '../utils/default-map'
-import type { DecodedSource, DecodedSourceMap } from './source-map'
-import { visualizeSourceMap } from './visualize-source-map'
-const css = dedent
-
-interface RunOptions {
-  input: string
-  candidates?: string[]
-  options?: Parameters<typeof compile>[1]
-}
-
-async function run({ input, candidates, options }: RunOptions) {
-  let source = new MagicString(input)
-  let root = path.resolve(__dirname, '../..')
-
-  let compiler = await compile(source.toString(), {
-    from: 'input.css',
-    async loadStylesheet(id, base) {
-      let resolvedPath = path.resolve(root, id === 'tailwindcss' ? 'index.css' : id)
-
-      return {
-        path: path.relative(root, resolvedPath),
-        base,
-        content: await fs.readFile(resolvedPath, 'utf-8'),
-      }
-    },
-    ...options,
-  })
-
-  let css = compiler.build(candidates ?? [])
-  let decoded = compiler.buildSourceMap()
-  let rawMap = toRawSourceMap(decoded)
-  let combined = remapping(rawMap, () => null)
-  let map = JSON.parse(rawMap.toString()) as RawSourceMap
-
-  let sources = combined.sources
-  let annotations = visualizeSourceMap(map, css)
-
-  return { css, map, sources, annotations }
-}
-
-function toRawSourceMap(map: DecodedSourceMap): string {
-  let generator = new SourceMapGenerator()
-
-  let id = 1
-  let sourceTable = new DefaultMap<
-    DecodedSource | null,
-    {
-      url: string
-      content: string
-    }
-  >((src) => {
-    return {
-      url: src?.url ?? `<unknown ${id++}>`,
-      content: src?.content ?? '<none>',
-    }
-  })
-
-  for (let mapping of map.mappings) {
-    let original = sourceTable.get(mapping.originalPosition?.source ?? null)
-
-    generator.addMapping({
-      generated: mapping.generatedPosition,
-      original: mapping.originalPosition,
-      source: original.url,
-      name: mapping.name ?? undefined,
-    })
-
-    generator.setSourceContent(original.url, original.content)
-  }
-
-  return generator.toString()
-}
-
-test('source maps trace back to @import location', async ({ expect }) => {
-  let { sources, annotations } = await run({
-    input: css`
-      @import 'tailwindcss';
-
-      .foo {
-        @apply underline;
-      }
-    `,
-  })
-
-  // All CSS should be mapped back to the original source file
-  expect(sources).toEqual([
-    //
-    'index.css',
-    'theme.css',
-    'preflight.css',
-    'input.css',
-  ])
-  expect(sources.length).toBe(4)
-
-  // The output CSS should include annotations linking back to:
-  // 1. The class definition `.foo`
-  // 2. The `@apply underline` line inside of it
-  expect(annotations).toMatchInlineSnapshot(`
-    "
-         output.css                                                                                      |      original
-                                                                                                         | 
-                                                                                                         |      --- index.css ---
-      1  @layer theme, base, components, utilities;                                                      |   1  @layer theme, base, components, utilities;
-         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-41                                            |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-41
-      2  @layer theme {                                                                                  |   3  @import './theme.css' layer(theme);
-         ^^^^^^^^^^^^^ B @ 2:0-13                                                                        |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ B @ 3:0-34
-                                                                                                         |      --- theme.css ---
-      3    :root, :host {                                                                                |   1  @theme default {
-           ^^^^^^^^^^^^^ C @ 3:2-15                                                                      |      ^^^^^^^^^^^^^^^ C @ 1:0-15
-      4      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'N... |   2    --font-sans:
-             ^ D @ 4:4                                                                                   |        ^ D @ 2:2
-      4      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'N... |   3      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Ar...
-             ^ E @ 4:4                                                                                   |      ^ E @ 3:0
-      4      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'N... |   4      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... F @ 4:4-5:0 |      ^ F @ 4:0
-      5      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';   |   4      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-                                                                                        ... G @ 5:92-6:0 |                                                                                         ... G @ 4:92
-                                                                                                         |   5    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-      6      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', '... |   6    --font-mono:
-             ^ H @ 6:4                                                                                   |        ^ H @ 6:2
-      6      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', '... |   7      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-             ^ I @ 6:4                                                                                   |      ^ I @ 7:0
-      6      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', '... |   8      monospace;
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... J @ 6:4-7:0 |      ^ J @ 8:0
-      7      monospace;                                                                                  |   8      monospace;
-                      ^ K @ 7:13-8:0                                                                     |                   ^ K @ 8:13
-      8      --default-font-family: var(--font-sans);                                                    | 494    --default-font-family: --theme(--font-sans, initial);
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ L @ 8:4-43                                          |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ L @ 494:2-54
-                                                                                                         | 495    --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);
-                                                                                                         | 496    --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);
-      9      --default-mono-font-family: var(--font-mono);                                               | 497    --default-mono-font-family: --theme(--font-mono, initial);
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ M @ 9:4-48                                     |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ M @ 497:2-59
-     10    }                                                                                             | 
-     11  }                                                                                               | 
-                                                                                                         |      --- index.css ---
-     12  @layer base {                                                                                   |   4  @import './preflight.css' layer(base);
-         ^^^^^^^^^^^^ N @ 12:0-12                                                                        |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ N @ 4:0-37
-                                                                                                         |      --- preflight.css ---
-     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |   7  *,
-           ^ O @ 13:2                                                                                    |      ^ O @ 7:0
-     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |   8  ::after,
-           ^ P @ 13:2                                                                                    |      ^ P @ 8:0
-     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |   9  ::before,
-           ^ Q @ 13:2                                                                                    |      ^ Q @ 9:0
-     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |  10  ::backdrop,
-           ^ R @ 13:2                                                                                    |      ^ R @ 10:0
-     13    *, ::after, ::before, ::backdrop, ::file-selector-button {                                    |  11  ::file-selector-button {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ S @ 13:2-59                         |      ^^^^^^^^^^^^^^^^^^^^^^^ S @ 11:0-23
-     14      box-sizing: border-box;                                                                     |  12    box-sizing: border-box; /* 1 */
-             ^^^^^^^^^^^^^^^^^^^^^^ T @ 14:4-26                                                          |        ^^^^^^^^^^^^^^^^^^^^^^ T @ 12:2-24
-     15      margin: 0;                                                                                  |  13    margin: 0; /* 2 */
-             ^^^^^^^^^ U @ 15:4-13                                                                       |        ^^^^^^^^^ U @ 13:2-11
-     16      padding: 0;                                                                                 |  14    padding: 0; /* 2 */
-             ^^^^^^^^^^ V @ 16:4-14                                                                      |        ^^^^^^^^^^ V @ 14:2-12
-     17      border: 0 solid;                                                                            |  15    border: 0 solid; /* 3 */
-             ^^^^^^^^^^^^^^^ W @ 17:4-19                                                                 |        ^^^^^^^^^^^^^^^ W @ 15:2-17
-                                                                                                         |  16  }
-     18    }                                                                                             | 
-     19    html, :host {                                                                                 |  28  html,
-           ^ X @ 19:2                                                                                    |      ^ X @ 28:0
-     19    html, :host {                                                                                 |  29  :host {
-           ^^^^^^^^^^^^ Y @ 19:2-14                                                                      |      ^^^^^^ Y @ 29:0-6
-     20      line-height: 1.5;                                                                           |  30    line-height: 1.5; /* 1 */
-             ^^^^^^^^^^^^^^^^ Z @ 20:4-20                                                                |        ^^^^^^^^^^^^^^^^ Z @ 30:2-18
-     21      -webkit-text-size-adjust: 100%;                                                             |  31    -webkit-text-size-adjust: 100%; /* 2 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AA @ 21:4-34                                                 |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AA @ 31:2-32
-     22      tab-size: 4;                                                                                |  32    tab-size: 4; /* 3 */
-             ^^^^^^^^^^^ AB @ 22:4-15                                                                    |        ^^^^^^^^^^^ AB @ 32:2-13
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  33    font-family: --theme(
-             ^ AC @ 23:4                                                                                 |        ^ AC @ 33:2
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  34      --default-font-family,
-             ^ AD @ 23:4                                                                                 |      ^ AD @ 34:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  35      -apple-system,
-             ^ AE @ 23:4                                                                                 |      ^ AE @ 35:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  36      BlinkMacSystemFont,
-             ^ AF @ 23:4                                                                                 |      ^ AF @ 36:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  37      'Segoe UI',
-             ^ AG @ 23:4                                                                                 |      ^ AG @ 37:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  38      Roboto,
-             ^ AH @ 23:4                                                                                 |      ^ AH @ 38:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  39      'Helvetica Neue',
-             ^ AI @ 23:4                                                                                 |      ^ AI @ 39:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  40      'Noto Sans',
-             ^ AJ @ 23:4                                                                                 |      ^ AJ @ 40:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  41      Arial,
-             ^ AK @ 23:4                                                                                 |      ^ AK @ 41:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  42      sans-serif,
-             ^ AL @ 23:4                                                                                 |      ^ AL @ 42:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  43      'Apple Color Emoji',
-             ^ AM @ 23:4                                                                                 |      ^ AM @ 43:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  44      'Segoe UI Emoji',
-             ^ AN @ 23:4                                                                                 |      ^ AN @ 44:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  45      'Segoe UI Symbol',
-             ^ AO @ 23:4                                                                                 |      ^ AO @ 45:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  46      'Noto Color Emoji'
-             ^ AP @ 23:4                                                                                 |      ^ AP @ 46:0
-     23      font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', R... |  47    ); /* 4 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... AQ @ 23:4-226 |      ^^^ AQ @ 47:0-3
-     24      font-feature-settings: var(--default-font-feature-settings, normal);                        |  48    font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AR @ 24:4-71            |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AR @ 48:2-73
-     25      font-variation-settings: var(--default-font-variation-settings, normal);                    |  49    font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AS @ 25:4-75        |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AS @ 49:2-77
-     26      -webkit-tap-highlight-color: transparent;                                                   |  50    -webkit-tap-highlight-color: transparent; /* 7 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AT @ 26:4-44                                       |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AT @ 50:2-42
-                                                                                                         |  51  }
-     27    }                                                                                             | 
-     28    hr {                                                                                          |  59  hr {
-           ^^^ AU @ 28:2-5                                                                               |      ^^^ AU @ 59:0-3
-     29      height: 0;                                                                                  |  60    height: 0; /* 1 */
-             ^^^^^^^^^ AV @ 29:4-13                                                                      |        ^^^^^^^^^ AV @ 60:2-11
-     30      color: inherit;                                                                             |  61    color: inherit; /* 2 */
-             ^^^^^^^^^^^^^^ AW @ 30:4-18                                                                 |        ^^^^^^^^^^^^^^ AW @ 61:2-16
-     31      border-top-width: 1px;                                                                      |  62    border-top-width: 1px; /* 3 */
-             ^^^^^^^^^^^^^^^^^^^^^ AX @ 31:4-25                                                          |        ^^^^^^^^^^^^^^^^^^^^^ AX @ 62:2-23
-                                                                                                         |  63  }
-     32    }                                                                                             | 
-     33    abbr:where([title]) {                                                                         |  69  abbr:where([title]) {
-           ^^^^^^^^^^^^^^^^^^^^ AY @ 33:2-22                                                             |      ^^^^^^^^^^^^^^^^^^^^ AY @ 69:0-20
-     34      -webkit-text-decoration: underline dotted;                                                  |  70    -webkit-text-decoration: underline dotted;
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AZ @ 34:4-45                                      |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ AZ @ 70:2-43
-     35      text-decoration: underline dotted;                                                          |  71    text-decoration: underline dotted;
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BA @ 35:4-37                                              |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BA @ 71:2-35
-                                                                                                         |  72  }
-     36    }                                                                                             | 
-     37    h1, h2, h3, h4, h5, h6 {                                                                      |  78  h1,
-           ^ BB @ 37:2                                                                                   |      ^ BB @ 78:0
-     37    h1, h2, h3, h4, h5, h6 {                                                                      |  79  h2,
-           ^ BC @ 37:2                                                                                   |      ^ BC @ 79:0
-     37    h1, h2, h3, h4, h5, h6 {                                                                      |  80  h3,
-           ^ BD @ 37:2                                                                                   |      ^ BD @ 80:0
-     37    h1, h2, h3, h4, h5, h6 {                                                                      |  81  h4,
-           ^ BE @ 37:2                                                                                   |      ^ BE @ 81:0
-     37    h1, h2, h3, h4, h5, h6 {                                                                      |  82  h5,
-           ^ BF @ 37:2                                                                                   |      ^ BF @ 82:0
-     37    h1, h2, h3, h4, h5, h6 {                                                                      |  83  h6 {
-           ^^^^^^^^^^^^^^^^^^^^^^^ BG @ 37:2-25                                                          |      ^^^ BG @ 83:0-3
-     38      font-size: inherit;                                                                         |  84    font-size: inherit;
-             ^^^^^^^^^^^^^^^^^^ BH @ 38:4-22                                                             |        ^^^^^^^^^^^^^^^^^^ BH @ 84:2-20
-     39      font-weight: inherit;                                                                       |  85    font-weight: inherit;
-             ^^^^^^^^^^^^^^^^^^^^ BI @ 39:4-24                                                           |        ^^^^^^^^^^^^^^^^^^^^ BI @ 85:2-22
-                                                                                                         |  86  }
-     40    }                                                                                             | 
-     41    a {                                                                                           |  92  a {
-           ^^ BJ @ 41:2-4                                                                                |      ^^ BJ @ 92:0-2
-     42      color: inherit;                                                                             |  93    color: inherit;
-             ^^^^^^^^^^^^^^ BK @ 42:4-18                                                                 |        ^^^^^^^^^^^^^^ BK @ 93:2-16
-     43      -webkit-text-decoration: inherit;                                                           |  94    -webkit-text-decoration: inherit;
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BL @ 43:4-36                                               |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ BL @ 94:2-34
-     44      text-decoration: inherit;                                                                   |  95    text-decoration: inherit;
-             ^^^^^^^^^^^^^^^^^^^^^^^^ BM @ 44:4-28                                                       |        ^^^^^^^^^^^^^^^^^^^^^^^^ BM @ 95:2-26
-                                                                                                         |  96  }
-     45    }                                                                                             | 
-     46    b, strong {                                                                                   | 102  b,
-           ^ BN @ 46:2                                                                                   |      ^ BN @ 102:0
-     46    b, strong {                                                                                   | 103  strong {
-           ^^^^^^^^^^ BO @ 46:2-12                                                                       |      ^^^^^^^ BO @ 103:0-7
-     47      font-weight: bolder;                                                                        | 104    font-weight: bolder;
-             ^^^^^^^^^^^^^^^^^^^ BP @ 47:4-23                                                            |        ^^^^^^^^^^^^^^^^^^^ BP @ 104:2-21
-                                                                                                         | 105  }
-     48    }                                                                                             | 
-     49    code, kbd, samp, pre {                                                                        | 114  code,
-           ^ BQ @ 49:2                                                                                   |      ^ BQ @ 114:0
-     49    code, kbd, samp, pre {                                                                        | 115  kbd,
-           ^ BR @ 49:2                                                                                   |      ^ BR @ 115:0
-     49    code, kbd, samp, pre {                                                                        | 116  samp,
-           ^ BS @ 49:2                                                                                   |      ^ BS @ 116:0
-     49    code, kbd, samp, pre {                                                                        | 117  pre {
-           ^^^^^^^^^^^^^^^^^^^^^ BT @ 49:2-23                                                            |      ^^^^ BT @ 117:0-4
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 118    font-family: --theme(
-             ^ BU @ 50:4                                                                                 |        ^ BU @ 118:2
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 119      --default-mono-font-family,
-             ^ BV @ 50:4                                                                                 |      ^ BV @ 119:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 120      ui-monospace,
-             ^ BW @ 50:4                                                                                 |      ^ BW @ 120:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 121      SFMono-Regular,
-             ^ BX @ 50:4                                                                                 |      ^ BX @ 121:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 122      Menlo,
-             ^ BY @ 50:4                                                                                 |      ^ BY @ 122:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 123      Monaco,
-             ^ BZ @ 50:4                                                                                 |      ^ BZ @ 123:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 124      Consolas,
-             ^ CA @ 50:4                                                                                 |      ^ CA @ 124:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 125      'Liberation Mono',
-             ^ CB @ 50:4                                                                                 |      ^ CB @ 125:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 126      'Courier New',
-             ^ CC @ 50:4                                                                                 |      ^ CC @ 126:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 127      monospace
-             ^ CD @ 50:4                                                                                 |      ^ CD @ 127:0
-     50      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco... | 128    ); /* 1 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CE @ 50:4-148 |      ^^^ CE @ 128:0-3
-     51      font-feature-settings: var(--default-mono-font-feature-settings, normal);                   | 129    font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CF @ 51:4-76       |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CF @ 129:2-78
-     52      font-variation-settings: var(--default-mono-font-variation-settings, normal);               | 130    font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CG @ 52:4-80   |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... CG @ 130:2-82
-     53      font-size: 1em;                                                                             | 131    font-size: 1em; /* 4 */
-             ^^^^^^^^^^^^^^ CH @ 53:4-18                                                                 |        ^^^^^^^^^^^^^^ CH @ 131:2-16
-                                                                                                         | 132  }
-     54    }                                                                                             | 
-     55    small {                                                                                       | 138  small {
-           ^^^^^^ CI @ 55:2-8                                                                            |      ^^^^^^ CI @ 138:0-6
-     56      font-size: 80%;                                                                             | 139    font-size: 80%;
-             ^^^^^^^^^^^^^^ CJ @ 56:4-18                                                                 |        ^^^^^^^^^^^^^^ CJ @ 139:2-16
-                                                                                                         | 140  }
-     57    }                                                                                             | 
-     58    sub, sup {                                                                                    | 146  sub,
-           ^ CK @ 58:2                                                                                   |      ^ CK @ 146:0
-     58    sub, sup {                                                                                    | 147  sup {
-           ^^^^^^^^^ CL @ 58:2-11                                                                        |      ^^^^ CL @ 147:0-4
-     59      font-size: 75%;                                                                             | 148    font-size: 75%;
-             ^^^^^^^^^^^^^^ CM @ 59:4-18                                                                 |        ^^^^^^^^^^^^^^ CM @ 148:2-16
-     60      line-height: 0;                                                                             | 149    line-height: 0;
-             ^^^^^^^^^^^^^^ CN @ 60:4-18                                                                 |        ^^^^^^^^^^^^^^ CN @ 149:2-16
-     61      position: relative;                                                                         | 150    position: relative;
-             ^^^^^^^^^^^^^^^^^^ CO @ 61:4-22                                                             |        ^^^^^^^^^^^^^^^^^^ CO @ 150:2-20
-     62      vertical-align: baseline;                                                                   | 151    vertical-align: baseline;
-             ^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 62:4-28                                                       |        ^^^^^^^^^^^^^^^^^^^^^^^^ CP @ 151:2-26
-                                                                                                         | 152  }
-     63    }                                                                                             | 
-     64    sub {                                                                                         | 154  sub {
-           ^^^^ CQ @ 64:2-6                                                                              |      ^^^^ CQ @ 154:0-4
-     65      bottom: -0.25em;                                                                            | 155    bottom: -0.25em;
-             ^^^^^^^^^^^^^^^ CR @ 65:4-19                                                                |        ^^^^^^^^^^^^^^^ CR @ 155:2-17
-                                                                                                         | 156  }
-     66    }                                                                                             | 
-     67    sup {                                                                                         | 158  sup {
-           ^^^^ CS @ 67:2-6                                                                              |      ^^^^ CS @ 158:0-4
-     68      top: -0.5em;                                                                                | 159    top: -0.5em;
-             ^^^^^^^^^^^ CT @ 68:4-15                                                                    |        ^^^^^^^^^^^ CT @ 159:2-13
-                                                                                                         | 160  }
-     69    }                                                                                             | 
-     70    table {                                                                                       | 168  table {
-           ^^^^^^ CU @ 70:2-8                                                                            |      ^^^^^^ CU @ 168:0-6
-     71      text-indent: 0;                                                                             | 169    text-indent: 0; /* 1 */
-             ^^^^^^^^^^^^^^ CV @ 71:4-18                                                                 |        ^^^^^^^^^^^^^^ CV @ 169:2-16
-     72      border-color: inherit;                                                                      | 170    border-color: inherit; /* 2 */
-             ^^^^^^^^^^^^^^^^^^^^^ CW @ 72:4-25                                                          |        ^^^^^^^^^^^^^^^^^^^^^ CW @ 170:2-23
-     73      border-collapse: collapse;                                                                  | 171    border-collapse: collapse; /* 3 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^ CX @ 73:4-29                                                      |        ^^^^^^^^^^^^^^^^^^^^^^^^^ CX @ 171:2-27
-                                                                                                         | 172  }
-     74    }                                                                                             | 
-     75    :-moz-focusring:where(:not(iframe)) {                                                         | 178  :-moz-focusring:where(:not(iframe)) {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CY @ 75:2-38                                             |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CY @ 178:0-36
-     76      outline: auto;                                                                              | 179    outline: auto;
-             ^^^^^^^^^^^^^ CZ @ 76:4-17                                                                  |        ^^^^^^^^^^^^^ CZ @ 179:2-15
-                                                                                                         | 180  }
-     77    }                                                                                             | 
-     78    progress {                                                                                    | 186  progress {
-           ^^^^^^^^^ DA @ 78:2-11                                                                        |      ^^^^^^^^^ DA @ 186:0-9
-     79      vertical-align: baseline;                                                                   | 187    vertical-align: baseline;
-             ^^^^^^^^^^^^^^^^^^^^^^^^ DB @ 79:4-28                                                       |        ^^^^^^^^^^^^^^^^^^^^^^^^ DB @ 187:2-26
-                                                                                                         | 188  }
-     80    }                                                                                             | 
-     81    summary {                                                                                     | 194  summary {
-           ^^^^^^^^ DC @ 81:2-10                                                                         |      ^^^^^^^^ DC @ 194:0-8
-     82      display: list-item;                                                                         | 195    display: list-item;
-             ^^^^^^^^^^^^^^^^^^ DD @ 82:4-22                                                             |        ^^^^^^^^^^^^^^^^^^ DD @ 195:2-20
-                                                                                                         | 196  }
-     83    }                                                                                             | 
-     84    ol, ul, menu {                                                                                | 202  ol,
-           ^ DE @ 84:2                                                                                   |      ^ DE @ 202:0
-     84    ol, ul, menu {                                                                                | 203  ul,
-           ^ DF @ 84:2                                                                                   |      ^ DF @ 203:0
-     84    ol, ul, menu {                                                                                | 204  menu {
-           ^^^^^^^^^^^^^ DG @ 84:2-15                                                                    |      ^^^^^ DG @ 204:0-5
-     85      list-style: none;                                                                           | 205    list-style: none;
-             ^^^^^^^^^^^^^^^^ DH @ 85:4-20                                                               |        ^^^^^^^^^^^^^^^^ DH @ 205:2-18
-                                                                                                         | 206  }
-     86    }                                                                                             | 
-     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 214  img,
-           ^ DI @ 87:2                                                                                   |      ^ DI @ 214:0
-     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 215  svg,
-           ^ DJ @ 87:2                                                                                   |      ^ DJ @ 215:0
-     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 216  video,
-           ^ DK @ 87:2                                                                                   |      ^ DK @ 216:0
-     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 217  canvas,
-           ^ DL @ 87:2                                                                                   |      ^ DL @ 217:0
-     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 218  audio,
-           ^ DM @ 87:2                                                                                   |      ^ DM @ 218:0
-     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 219  iframe,
-           ^ DN @ 87:2                                                                                   |      ^ DN @ 219:0
-     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 220  embed,
-           ^ DO @ 87:2                                                                                   |      ^ DO @ 220:0
-     87    img, svg, video, canvas, audio, iframe, embed, object {                                       | 221  object {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DP @ 87:2-56                           |      ^^^^^^^ DP @ 221:0-7
-     88      display: block;                                                                             | 222    display: block; /* 1 */
-             ^^^^^^^^^^^^^^ DQ @ 88:4-18                                                                 |        ^^^^^^^^^^^^^^ DQ @ 222:2-16
-     89      vertical-align: middle;                                                                     | 223    vertical-align: middle; /* 2 */
-             ^^^^^^^^^^^^^^^^^^^^^^ DR @ 89:4-26                                                         |        ^^^^^^^^^^^^^^^^^^^^^^ DR @ 223:2-24
-                                                                                                         | 224  }
-     90    }                                                                                             | 
-     91    img, video {                                                                                  | 230  img,
-           ^ DS @ 91:2                                                                                   |      ^ DS @ 230:0
-     91    img, video {                                                                                  | 231  video {
-           ^^^^^^^^^^^ DT @ 91:2-13                                                                      |      ^^^^^^ DT @ 231:0-6
-     92      max-width: 100%;                                                                            | 232    max-width: 100%;
-             ^^^^^^^^^^^^^^^ DU @ 92:4-19                                                                |        ^^^^^^^^^^^^^^^ DU @ 232:2-17
-     93      height: auto;                                                                               | 233    height: auto;
-             ^^^^^^^^^^^^ DV @ 93:4-16                                                                   |        ^^^^^^^^^^^^ DV @ 233:2-14
-                                                                                                         | 234  }
-     94    }                                                                                             | 
-     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 243  button,
-           ^ DW @ 95:2                                                                                   |      ^ DW @ 243:0
-     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 244  input,
-           ^ DX @ 95:2                                                                                   |      ^ DX @ 244:0
-     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 245  select,
-           ^ DY @ 95:2                                                                                   |      ^ DY @ 245:0
-     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 246  optgroup,
-           ^ DZ @ 95:2                                                                                   |      ^ DZ @ 246:0
-     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 247  textarea,
-           ^ EA @ 95:2                                                                                   |      ^ EA @ 247:0
-     95    button, input, select, optgroup, textarea, ::file-selector-button {                           | 248  ::file-selector-button {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EB @ 95:2-68               |      ^^^^^^^^^^^^^^^^^^^^^^^ EB @ 248:0-23
-     96      font: inherit;                                                                              | 249    font: inherit; /* 1 */
-             ^^^^^^^^^^^^^ EC @ 96:4-17                                                                  |        ^^^^^^^^^^^^^ EC @ 249:2-15
-     97      font-feature-settings: inherit;                                                             | 250    font-feature-settings: inherit; /* 1 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ED @ 97:4-34                                                 |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ED @ 250:2-32
-     98      font-variation-settings: inherit;                                                           | 251    font-variation-settings: inherit; /* 1 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EE @ 98:4-36                                               |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EE @ 251:2-34
-     99      letter-spacing: inherit;                                                                    | 252    letter-spacing: inherit; /* 1 */
-             ^^^^^^^^^^^^^^^^^^^^^^^ EF @ 99:4-27                                                        |        ^^^^^^^^^^^^^^^^^^^^^^^ EF @ 252:2-25
-    100      color: inherit;                                                                             | 253    color: inherit; /* 1 */
-             ^^^^^^^^^^^^^^ EG @ 100:4-18                                                                |        ^^^^^^^^^^^^^^ EG @ 253:2-16
-    101      border-radius: 0;                                                                           | 254    border-radius: 0; /* 2 */
-             ^^^^^^^^^^^^^^^^ EH @ 101:4-20                                                              |        ^^^^^^^^^^^^^^^^ EH @ 254:2-18
-    102      background-color: transparent;                                                              | 255    background-color: transparent; /* 3 */
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EI @ 102:4-33                                                 |        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EI @ 255:2-31
-    103      opacity: 1;                                                                                 | 256    opacity: 1; /* 4 */
-             ^^^^^^^^^^ EJ @ 103:4-14                                                                    |        ^^^^^^^^^^ EJ @ 256:2-12
-                                                                                                         | 257  }
-    104    }                                                                                             | 
-    105    :where(select:is([multiple], [size])) optgroup {                                              | 263  :where(select:is([multiple], [size])) optgroup {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EK @ 105:2-49                                 |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EK @ 263:0-47
-    106      font-weight: bolder;                                                                        | 264    font-weight: bolder;
-             ^^^^^^^^^^^^^^^^^^^ EL @ 106:4-23                                                           |        ^^^^^^^^^^^^^^^^^^^ EL @ 264:2-21
-                                                                                                         | 265  }
-    107    }                                                                                             | 
-    108    :where(select:is([multiple], [size])) optgroup option {                                       | 271  :where(select:is([multiple], [size])) optgroup option {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EM @ 108:2-56                          |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EM @ 271:0-54
-    109      padding-inline-start: 20px;                                                                 | 272    padding-inline-start: 20px;
-             ^^^^^^^^^^^^^^^^^^^^^^^^^^ EN @ 109:4-30                                                    |        ^^^^^^^^^^^^^^^^^^^^^^^^^^ EN @ 272:2-28
-                                                                                                         | 273  }
-    110    }                                                                                             | 
-    111    ::file-selector-button {                                                                      | 279  ::file-selector-button {
-           ^^^^^^^^^^^^^^^^^^^^^^^ EO @ 111:2-25                                                         |      ^^^^^^^^^^^^^^^^^^^^^^^ EO @ 279:0-23
-    112      margin-inline-end: 4px;                                                                     | 280    margin-inline-end: 4px;
-             ^^^^^^^^^^^^^^^^^^^^^^ EP @ 112:4-26                                                        |        ^^^^^^^^^^^^^^^^^^^^^^ EP @ 280:2-24
-                                                                                                         | 281  }
-    113    }                                                                                             | 
-    114    ::placeholder {                                                                               | 287  ::placeholder {
-           ^^^^^^^^^^^^^^ EQ @ 114:2-16                                                                  |      ^^^^^^^^^^^^^^ EQ @ 287:0-14
-    115      opacity: 1;                                                                                 | 288    opacity: 1;
-             ^^^^^^^^^^ ER @ 115:4-14                                                                    |        ^^^^^^^^^^ ER @ 288:2-12
-                                                                                                         | 289  }
-    116    }                                                                                             | 
-    117    @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {   | 296  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
-           ^ ES @ 117:2                                                                                  |      ^ ES @ 296:0
-    117    @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {   | 297    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... ET @ 117:2-92 |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ET @ 297:0-49
-    118      ::placeholder {                                                                             | 298    ::placeholder {
-             ^^^^^^^^^^^^^^ EU @ 118:4-18                                                                |        ^^^^^^^^^^^^^^ EU @ 298:2-16
-    119        color: currentcolor;                                                                      | 299      color: color-mix(in oklab, currentcolor 50%, transparent);
-               ^^^^^^^^^^^^^^^^^^^ EV @ 119:6-25                                                         |          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 299:4-61
-                                                                                                         | 300    }
-                                                                                                         | 301  }
-    120        @supports (color: color-mix(in lab, red, red)) {                                          | 
-               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 120:6-53                             | 
-    121          color: color-mix(in oklab, currentcolor 50%, transparent);                              | 
-                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EV @ 121:8-65                 | 
-    122        }                                                                                         | 
-    123      }                                                                                           | 
-    124    }                                                                                             | 
-    125    textarea {                                                                                    | 307  textarea {
-           ^^^^^^^^^ EW @ 125:2-11                                                                       |      ^^^^^^^^^ EW @ 307:0-9
-    126      resize: vertical;                                                                           | 308    resize: vertical;
-             ^^^^^^^^^^^^^^^^ EX @ 126:4-20                                                              |        ^^^^^^^^^^^^^^^^ EX @ 308:2-18
-                                                                                                         | 309  }
-    127    }                                                                                             | 
-    128    ::-webkit-search-decoration {                                                                 | 315  ::-webkit-search-decoration {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EY @ 128:2-30                                                    |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ EY @ 315:0-28
-    129      -webkit-appearance: none;                                                                   | 316    -webkit-appearance: none;
-             ^^^^^^^^^^^^^^^^^^^^^^^^ EZ @ 129:4-28                                                      |        ^^^^^^^^^^^^^^^^^^^^^^^^ EZ @ 316:2-26
-                                                                                                         | 317  }
-    130    }                                                                                             | 
-    131    ::-webkit-date-and-time-value {                                                               | 324  ::-webkit-date-and-time-value {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FA @ 131:2-32                                                  |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FA @ 324:0-30
-    132      min-height: 1lh;                                                                            | 325    min-height: 1lh; /* 1 */
-             ^^^^^^^^^^^^^^^ FB @ 132:4-19                                                               |        ^^^^^^^^^^^^^^^ FB @ 325:2-17
-    133      text-align: inherit;                                                                        | 326    text-align: inherit; /* 2 */
-             ^^^^^^^^^^^^^^^^^^^ FC @ 133:4-23                                                           |        ^^^^^^^^^^^^^^^^^^^ FC @ 326:2-21
-                                                                                                         | 327  }
-    134    }                                                                                             | 
-    135    ::-webkit-datetime-edit {                                                                     | 333  ::-webkit-datetime-edit {
-           ^^^^^^^^^^^^^^^^^^^^^^^^ FD @ 135:2-26                                                        |      ^^^^^^^^^^^^^^^^^^^^^^^^ FD @ 333:0-24
-    136      display: inline-flex;                                                                       | 334    display: inline-flex;
-             ^^^^^^^^^^^^^^^^^^^^ FE @ 136:4-24                                                          |        ^^^^^^^^^^^^^^^^^^^^ FE @ 334:2-22
-                                                                                                         | 335  }
-    137    }                                                                                             | 
-    138    ::-webkit-datetime-edit-fields-wrapper {                                                      | 341  ::-webkit-datetime-edit-fields-wrapper {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FF @ 138:2-41                                         |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FF @ 341:0-39
-    139      padding: 0;                                                                                 | 342    padding: 0;
-             ^^^^^^^^^^ FG @ 139:4-14                                                                    |        ^^^^^^^^^^ FG @ 342:2-12
-                                                                                                         | 343  }
-    140    }                                                                                             | 
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 345  ::-webkit-datetime-edit,
-           ^ FH @ 141:2                                                                                  |      ^ FH @ 345:0
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 346  ::-webkit-datetime-edit-year-field,
-           ^ FI @ 141:2                                                                                  |      ^ FI @ 346:0
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 347  ::-webkit-datetime-edit-month-field,
-           ^ FJ @ 141:2                                                                                  |      ^ FJ @ 347:0
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 348  ::-webkit-datetime-edit-day-field,
-           ^ FK @ 141:2                                                                                  |      ^ FK @ 348:0
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 349  ::-webkit-datetime-edit-hour-field,
-           ^ FL @ 141:2                                                                                  |      ^ FL @ 349:0
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 350  ::-webkit-datetime-edit-minute-field,
-           ^ FM @ 141:2                                                                                  |      ^ FM @ 350:0
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 351  ::-webkit-datetime-edit-second-field,
-           ^ FN @ 141:2                                                                                  |      ^ FN @ 351:0
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 352  ::-webkit-datetime-edit-millisecond-field,
-           ^ FO @ 141:2                                                                                  |      ^ FO @ 352:0
-    141    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month... | 353  ::-webkit-datetime-edit-meridiem-field {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... FP @ 141:2-329 |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FP @ 353:0-39
-    142      padding-block: 0;                                                                           | 354    padding-block: 0;
-             ^^^^^^^^^^^^^^^^ FQ @ 142:4-20                                                              |        ^^^^^^^^^^^^^^^^ FQ @ 354:2-18
-                                                                                                         | 355  }
-    143    }                                                                                             | 
-    144    ::-webkit-calendar-picker-indicator {                                                         | 361  ::-webkit-calendar-picker-indicator {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FR @ 144:2-38                                            |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ FR @ 361:0-36
-    145      line-height: 1;                                                                             | 362    line-height: 1;
-             ^^^^^^^^^^^^^^ FS @ 145:4-18                                                                |        ^^^^^^^^^^^^^^ FS @ 362:2-16
-                                                                                                         | 363  }
-    146    }                                                                                             | 
-    147    :-moz-ui-invalid {                                                                            | 369  :-moz-ui-invalid {
-           ^^^^^^^^^^^^^^^^^ FT @ 147:2-19                                                               |      ^^^^^^^^^^^^^^^^^ FT @ 369:0-17
-    148      box-shadow: none;                                                                           | 370    box-shadow: none;
-             ^^^^^^^^^^^^^^^^ FU @ 148:4-20                                                              |        ^^^^^^^^^^^^^^^^ FU @ 370:2-18
-                                                                                                         | 371  }
-    149    }                                                                                             | 
-    150    button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 377  button,
-           ^ FV @ 150:2                                                                                  |      ^ FV @ 377:0
-    150    button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 378  input:where([type='button'], [type='reset'], [type='submit']),
-           ^ FW @ 150:2                                                                                  |      ^ FW @ 378:0
-    150    button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-but... | 379  ::file-selector-button {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^... FX @ 150:2-96 |      ^^^^^^^^^^^^^^^^^^^^^^^ FX @ 379:0-23
-    151      appearance: button;                                                                         | 380    appearance: button;
-             ^^^^^^^^^^^^^^^^^^ FY @ 151:4-22                                                            |        ^^^^^^^^^^^^^^^^^^ FY @ 380:2-20
-                                                                                                         | 381  }
-    152    }                                                                                             | 
-    153    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {                                    | 387  ::-webkit-inner-spin-button,
-           ^ FZ @ 153:2                                                                                  |      ^ FZ @ 387:0
-    153    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {                                    | 388  ::-webkit-outer-spin-button {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GA @ 153:2-59                       |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GA @ 388:0-28
-    154      height: auto;                                                                               | 389    height: auto;
-             ^^^^^^^^^^^^ GB @ 154:4-16                                                                  |        ^^^^^^^^^^^^ GB @ 389:2-14
-                                                                                                         | 390  }
-    155    }                                                                                             | 
-    156    [hidden]:where(:not([hidden='until-found'])) {                                                | 396  [hidden]:where(:not([hidden='until-found'])) {
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GC @ 156:2-47                                   |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GC @ 396:0-45
-    157      display: none !important;                                                                   | 397    display: none !important;
-             ^^^^^^^^^^^^^^^^^^^^^^^^ GD @ 157:4-28                                                      |        ^^^^^^^^^^^^^^^^^^^^^^^^ GD @ 397:2-26
-                                                                                                         | 398  }
-    158    }                                                                                             | 
-    159  }                                                                                               | 
-                                                                                                         |      --- index.css ---
-    160  @layer utilities;                                                                               |   5  @import './utilities.css' layer(utilities);
-         ^^^^^^^^^^^^^^^^ GE @ 160:0-16                                                                  |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GE @ 5:0-42
-                                                                                                         |      --- input.css ---
-    161  .foo {                                                                                          |   3  .foo {
-         ^^^^^ GF @ 161:0-5                                                                              |      ^^^^^ GF @ 3:0-5
-    162    text-decoration-line: underline;                                                              |   4    @apply underline;
-           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ GG @ 162:2-33                                                 |               ^^^^^^^^^ GG @ 4:9-18
-                                                                                                         |   5  }
-    163  }                                                                                               | 
-    164                                                                                                  | 
-    "
-  `)
-})
-
-test('source maps are generated for utilities', async ({ expect }) => {
-  let {
-    sources,
-    css: output,
-    annotations,
-  } = await run({
-    input: css`
-      @import './utilities.css';
-      @plugin "./plugin.js";
-      @utility custom {
-        color: orange;
-      }
-    `,
-    candidates: ['custom', 'custom-js', 'flex'],
-    options: {
-      loadModule: async (_, base) => ({
-        path: '',
-        base,
-        module: createPlugin(({ addUtilities }) => {
-          addUtilities({ '.custom-js': { color: 'blue' } })
-        }),
-      }),
-    },
-  })
-
-  // All CSS should be mapped back to the original source file
-  expect(sources).toEqual(['utilities.css', 'input.css'])
-  expect(sources.length).toBe(2)
-
-  // The output CSS should include annotations linking back to:
-  expect(annotations).toMatchInlineSnapshot(`
-    "
-        output.css                 |    original
-                                   | 
-                                   |    --- utilities.css ---
-     1  .flex {                    | 1  @tailwind utilities;
-        ^^^^^^ A @ 1:0-6           |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
-     2    display: flex;           | 
-          ^^^^^^^^^^^^^ A @ 2:2-15 | 
-     3  }                          | 
-     4  .custom {                  | 
-        ^^^^^^^^ A @ 4:0-8         | 
-                                   |    --- input.css ---
-     5    color: orange;           | 4    color: orange;
-          ^^^^^^^^^^^^^ B @ 5:2-15 |      ^^^^^^^^^^^^^ B @ 4:2-15
-                                   | 5  }
-     6  }                          | 
-     7  .custom-js {               | 
-        ^^^^^^^^^^^ A @ 7:0-11     | 
-     8    color: blue;             | 
-          ^^^^^^^^^^^ A @ 8:2-13   | 
-     9  }                          | 
-    10                             | 
-    "
-  `)
-
-  expect(output).toMatchInlineSnapshot(`
-    ".flex {
-      display: flex;
-    }
-    .custom {
-      color: orange;
-    }
-    .custom-js {
-      color: blue;
-    }
-    "
-  `)
-})
-
-test('utilities have source maps pointing to the utilities node', async ({ expect }) => {
-  let { sources, annotations } = await run({
-    input: `@tailwind utilities;`,
-    candidates: [
-      //
-      'underline',
-    ],
-  })
-
-  expect(sources).toEqual(['input.css'])
-
-  expect(annotations).toMatchInlineSnapshot(`
-    "
-       output.css                                   |    input.css
-                                                    | 
-    1  .underline {                                 | 1  @tailwind utilities;
-       ^^^^^^^^^^^ A @ 1:0-11                       |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
-    2    text-decoration-line: underline;           | 
-         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A @ 2:2-33 | 
-    3  }                                            | 
-    4                                               | 
-    "
-  `)
-})
-
-test('@apply generates source maps', async ({ expect }) => {
-  let { sources, annotations } = await run({
-    input: css`
-      .foo {
-        color: blue;
-        @apply text-[#000] hover:text-[#f00];
-        @apply underline;
-        @apply --my-mixin-1 --my-mixin-2();
-        color: red;
-      }
-    `,
-  })
-
-  expect(sources).toEqual(['input.css'])
-
-  expect(annotations).toMatchInlineSnapshot(`
-    "
-        output.css                                       |    input.css
-                                                         | 
-     1  .foo {                                           | 1  .foo {
-        ^^^^^ A @ 1:0-5                                  |    ^^^^^ A @ 1:0-5
-     2    color: blue;                                   | 2    color: blue;
-          ^^^^^^^^^^^ B @ 2:2-13                         |      ^^^^^^^^^^^ B @ 2:2-13
-     3    color: #000;                                   | 3    @apply text-[#000] hover:text-[#f00];
-          ^^^^^^^^^^^ C @ 3:2-13                         |             ^^^^^^^^^^^ C @ 3:9-20
-     4    &:hover {                                      | 3    @apply text-[#000] hover:text-[#f00];
-          ^^^^^^^^ D @ 4:2-10                            |                         ^^^^^^^^^^^^^^^^^ D @ 3:21-38
-     5      @media (hover: hover) {                      | 
-            ^^^^^^^^^^^^^^^^^^^^^^ D @ 5:4-26            | 
-     6        color: #f00;                               | 
-              ^^^^^^^^^^^ D @ 6:6-17                     | 
-     7      }                                            | 
-     8    }                                              | 
-     9    text-decoration-line: underline;               | 4    @apply underline;
-          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ E @ 9:2-33     |             ^^^^^^^^^ E @ 4:9-18
-    10    @apply --my-mixin-1 --my-mixin-2();            | 5    @apply --my-mixin-1 --my-mixin-2();
-          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ F @ 10:2-36 |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ F @ 5:2-36
-    11    color: red;                                    | 6    color: red;
-          ^^^^^^^^^^ G @ 11:2-12                         |      ^^^^^^^^^^ G @ 6:2-12
-                                                         | 7  }
-    12  }                                                | 
-    13                                                   | 
-    "
-  `)
-})
-
-test('@variant generates source maps', async ({ expect }) => {
-  let { sources, annotations } = await run({
-    input: css`
-      .foo {
-        color: red;
-
-        @variant data-a, data-b:data-c {
-          color: green;
-
-          @variant data-d, data-e:data-f {
-            color: blue;
-          }
-        }
-      }
-    `,
-  })
-
-  expect(sources).toEqual(['input.css'])
-
-  expect(annotations).toMatchInlineSnapshot(`
-    "
-        output.css                         |     input.css
-                                           | 
-     1  .foo {                             |  1  .foo {
-        ^^^^^ A @ 1:0-5                    |     ^^^^^ A @ 1:0-5
-     2    color: red;                      |  2    color: red;
-          ^^^^^^^^^^ B @ 2:2-12            |       ^^^^^^^^^^ B @ 2:2-12
-     3    &[data-a] {                      | 
-                                           |  4    @variant data-a, data-b:data-c {
-     4      color: green;                  |  5      color: green;
-            ^^^^^^^^^^^^ C @ 4:4-16        |         ^^^^^^^^^^^^ C @ 5:4-16
-     5      &[data-d] {                    | 
-                                           |  7      @variant data-d, data-e:data-f {
-     6        color: blue;                 |  8        color: blue;
-              ^^^^^^^^^^^ D @ 6:6-17       |           ^^^^^^^^^^^ D @ 8:6-17
-                                           |  9      }
-                                           | 10    }
-                                           | 11  }
-     7      }                              | 
-     8      &[data-e] {                    | 
-     9        &[data-f] {                  | 
-    10          color: blue;               | 
-                ^^^^^^^^^^^ D @ 10:8-19    | 
-    11        }                            | 
-    12      }                              | 
-    13    }                                | 
-    14    &[data-b] {                      | 
-    15      &[data-c] {                    | 
-    16        color: green;                | 
-              ^^^^^^^^^^^^ C @ 16:6-18     | 
-    17        &[data-d] {                  | 
-    18          color: blue;               | 
-                ^^^^^^^^^^^ D @ 18:8-19    | 
-    19        }                            | 
-    20        &[data-e] {                  | 
-    21          &[data-f] {                | 
-    22            color: blue;             | 
-                  ^^^^^^^^^^^ D @ 22:10-21 | 
-    23          }                          | 
-    24        }                            | 
-    25      }                              | 
-    26    }                                | 
-    27  }                                  | 
-    28                                     | 
-    "
-  `)
-})
-
-test('license comments preserve source locations', async ({ expect }) => {
-  let { sources, annotations } = await run({
-    input: `/*! some comment */`,
-  })
-
-  expect(sources).toEqual(['input.css'])
-
-  expect(annotations).toMatchInlineSnapshot(`
-    "
-       output.css                     |    input.css
-                                      | 
-    1  /*! some comment */            | 1  /*! some comment */
-       ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19 |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
-    "
-  `)
-})
-
-test('license comments with new lines preserve source locations', async ({ expect }) => {
-  let { sources, annotations } = await run({
-    input: `/*! some \n comment */`,
-  })
-
-  expect(sources).toEqual(['input.css'])
-
-  expect(annotations).toMatchInlineSnapshot(`
-    "
-       output.css                |    input.css
-                                 | 
-    1  /*! some                  | 1  /*! some 
-       ^ A @ 1:0                 |    ^ A @ 1:0
-    1  /*! some                  | 2   comment */
-       ^^^^^^^^^ B @ 1:0-2:0     |    ^ B @ 2:0
-    2   comment */               | 2   comment */
-                  ^ C @ 2:11-3:0 |               ^ C @ 2:11
-    "
-  `)
-})
-
-test('Source locations for `addBase` point to the `@plugin` that generated them', async ({
-  expect,
-}) => {
-  let { sources, annotations } = await run({
-    input: css`
-      @plugin "./plugin.js";
-      @config "./config.js";
-    `,
-    options: {
-      async loadModule(id, base) {
-        if (id === './plugin.js') {
-          return {
-            module: createPlugin(({ addBase }) => {
-              addBase({ body: { color: 'red' } })
-            }),
-            base,
-            path: '',
-          }
-        }
-
-        if (id === './config.js') {
-          return {
-            module: {
-              plugins: [
-                createPlugin(({ addBase }) => {
-                  addBase({ body: { color: 'green' } })
-                }),
-              ],
-            },
-            base,
-            path: '',
-          }
-        }
-
-        throw new Error(`unknown module ${id}`)
-      },
-    },
-  })
-
-  expect(sources).toEqual(['input.css'])
-
-  expect(annotations).toMatchInlineSnapshot(`
-    "
-       output.css                  |    input.css
-                                   | 
-    1  @layer base {               | 1  @plugin "./plugin.js";
-       ^^^^^^^^^^^^ A @ 1:0-12     |    ^^^^^^^^^^^^^^^^^^^^^ A @ 1:0-21
-    2    body {                    | 
-         ^^^^^ A @ 2:2-7           | 
-    3      color: red;             | 
-           ^^^^^^^^^^ A @ 3:4-14   | 
-    4      color: green;           | 2  @config "./config.js";
-           ^^^^^^^^^^^^ B @ 4:4-16 |    ^^^^^^^^^^^^^^^^^^^^^ B @ 2:0-21
-    5    }                         | 
-    6  }                           | 
-    7                              | 
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/source-maps/source-map.ts b/packages/tailwindcss/src/source-maps/source-map.ts
deleted file mode 100644
index 31f8a094f..000000000
--- a/packages/tailwindcss/src/source-maps/source-map.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import { type AstNode } from '../ast'
-import { DefaultMap } from '../utils/default-map'
-import { walk } from '../walk'
-import { createLineTable, type LineTable, type Position } from './line-table'
-import type { Source } from './source'
-
-// https://tc39.es/ecma426/#sec-original-position-record-type
-export interface OriginalPosition extends Position {
-  source: DecodedSource
-}
-
-/**
- * A "decoded" sourcemap
- *
- * @see https://tc39.es/ecma426/#decoded-source-map-record
- */
-export interface DecodedSourceMap {
-  file: string | null
-  sources: DecodedSource[]
-  mappings: DecodedMapping[]
-}
-
-/**
- * A "decoded" source
- *
- * @see https://tc39.es/ecma426/#decoded-source-record
- */
-export interface DecodedSource {
-  url: string | null
-  content: string | null
-  ignore: boolean
-}
-
-/**
- * A "decoded" mapping
- *
- * @see https://tc39.es/ecma426/#decoded-mapping-record
- */
-export interface DecodedMapping {
-  // https://tc39.es/ecma426/#sec-original-position-record-type
-  originalPosition: OriginalPosition | null
-
-  // https://tc39.es/ecma426/#sec-position-record-type
-  generatedPosition: Position
-
-  name: string | null
-}
-
-/**
- * Build a source map from the given AST.
- *
- * Our AST is build from flat CSS strings but there are many because we handle
- * `@import`. This means that different nodes can have a different source.
- *
- * Instead of taking an input source map, we take the input CSS string we were
- * originally given, as well as the source text for any imported files, and
- * use that to generate a source map.
- *
- * We then require the use of other tools that can translate one or more
- * "input" source maps into a final output source map. For example,
- * `@jridgewell/remapping` can be used to handle this.
- *
- * This also ensures that tools that expect "local" source maps are able to
- * consume the source map we generate.
- *
- * The source map type we generate may be a bit different from "raw" source maps
- * that the `source-map-js` package uses. It's a "decoded" source map that is
- * represented by an object graph. It's identical to "decoded" source map from
- * the ECMA-426 spec for source maps.
- *
- * Note that the spec itself is still evolving which means our implementation
- * may need to evolve to match it.
- *
- * This can easily be converted to a "raw" source map by any tool that needs to.
- **/
-export function createSourceMap({ ast }: { ast: AstNode[] }) {
-  // Compute line tables for both the original and generated source lazily so we
-  // don't have to do it during parsing or printing.
-  let lineTables = new DefaultMap<Source, LineTable>((src) => createLineTable(src.code))
-  let sourceTable = new DefaultMap<Source, DecodedSource>((src) => ({
-    url: src.file,
-    content: src.code,
-    ignore: false,
-  }))
-
-  // Convert each mapping to a set of positions
-  let map: DecodedSourceMap = {
-    file: null,
-    sources: [],
-    mappings: [],
-  }
-
-  // Get all the indexes from the mappings
-  walk(ast, (node) => {
-    if (!node.src || !node.dst) return
-
-    let originalSource = sourceTable.get(node.src[0])
-    if (!originalSource.content) return
-
-    let originalTable = lineTables.get(node.src[0])
-    let generatedTable = lineTables.get(node.dst[0])
-
-    let originalSlice = originalSource.content.slice(node.src[1], node.src[2])
-
-    // Source maps only encode single locations — not multi-line ranges
-    // So to properly emulate this we'll scan the original text for multiple
-    // lines and create mappings for each of those lines that point to the
-    // destination node (whether it spans multiple lines or not)
-    //
-    // This is not 100% accurate if both the source and destination preserve
-    // their newlines but this only happens in the case of custom properties
-    //
-    // This is _good enough_
-    let offset = 0
-    for (let line of originalSlice.split('\n')) {
-      if (line.trim() !== '') {
-        let originalStart = originalTable.find(node.src[1] + offset)
-        let generatedStart = generatedTable.find(node.dst[1])
-
-        map.mappings.push({
-          name: null,
-          originalPosition: {
-            source: originalSource,
-            ...originalStart,
-          },
-          generatedPosition: generatedStart,
-        })
-      }
-
-      offset += line.length
-      offset += 1
-    }
-
-    let originalEnd = originalTable.find(node.src[2])
-    let generatedEnd = generatedTable.find(node.dst[2])
-
-    map.mappings.push({
-      name: null,
-      originalPosition: {
-        source: originalSource,
-        ...originalEnd,
-      },
-      generatedPosition: generatedEnd,
-    })
-  })
-
-  // Populate
-  for (let source of lineTables.keys()) {
-    map.sources.push(sourceTable.get(source))
-  }
-
-  // Sort the mappings in ascending order
-  map.mappings.sort((a, b) => {
-    return (
-      a.generatedPosition.line - b.generatedPosition.line ||
-      a.generatedPosition.column - b.generatedPosition.column ||
-      (a.originalPosition?.line ?? 0) - (b.originalPosition?.line ?? 0) ||
-      (a.originalPosition?.column ?? 0) - (b.originalPosition?.column ?? 0)
-    )
-  })
-
-  return map
-}
-
-export function createTranslationMap({
-  original,
-  generated,
-}: {
-  original: string
-  generated: string
-}) {
-  // Compute line tables for both the original and generated source lazily so we
-  // don't have to do it during parsing or printing.
-  let originalTable = createLineTable(original)
-  let generatedTable = createLineTable(generated)
-
-  type Translation = [
-    originalStart: Position,
-    originalEnd: Position,
-    generatedStart: Position | null,
-    generatedEnd: Position | null,
-  ]
-
-  return (node: AstNode) => {
-    if (!node.src) return []
-
-    let translations: Translation[] = []
-
-    translations.push([
-      originalTable.find(node.src[1]),
-      originalTable.find(node.src[2]),
-      node.dst ? generatedTable.find(node.dst[1]) : null,
-      node.dst ? generatedTable.find(node.dst[2]) : null,
-    ])
-
-    return translations
-  }
-}
diff --git a/packages/tailwindcss/src/source-maps/source.ts b/packages/tailwindcss/src/source-maps/source.ts
deleted file mode 100644
index c3a4f8988..000000000
--- a/packages/tailwindcss/src/source-maps/source.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * The source code for one or more nodes in the AST
- *
- * This generally corresponds to a stylesheet
- */
-export interface Source {
-  /**
-   * The path to the file that contains the referenced source code
-   *
-   * If this references the *output* source code, this is `null`.
-   */
-  file: string | null
-
-  /**
-   * The referenced source code
-   */
-  code: string
-}
-
-/**
- * The file and offsets within it that this node covers
- *
- * This can represent either:
- * - A location in the original CSS which caused this node to be created
- * - A location in the output CSS where this node resides
- */
-export type SourceLocation = [source: Source, start: number, end: number]
diff --git a/packages/tailwindcss/src/source-maps/translation-map.test.ts b/packages/tailwindcss/src/source-maps/translation-map.test.ts
deleted file mode 100644
index 0c367ebbd..000000000
--- a/packages/tailwindcss/src/source-maps/translation-map.test.ts
+++ /dev/null
@@ -1,371 +0,0 @@
-import dedent from 'dedent'
-import { assert, expect, test } from 'vitest'
-import { toCss, type AstNode } from '../ast'
-import * as CSS from '../css-parser'
-import { createTranslationMap } from './source-map'
-import { visualizeSourceMapRanges, type SourceMapVisualizationRange } from './visualize-source-map'
-
-async function analyze(input: string) {
-  let ast = CSS.parse(input, { from: 'input.css' })
-  let css = toCss(ast, true)
-  let translate = createTranslationMap({
-    original: input,
-    generated: css,
-  })
-
-  function format(node: AstNode) {
-    let ranges: SourceMapVisualizationRange[] = []
-
-    for (let [oStart, oEnd, gStart, gEnd] of translate(node)) {
-      ranges.push({
-        original: {
-          source: 'input.css',
-          start: [oStart.line, oStart.column],
-          end: [oEnd.line, oEnd.column],
-        },
-        generated:
-          gStart && gEnd
-            ? {
-                start: [gStart.line, gStart.column],
-                end: [gEnd.line, gEnd.column],
-              }
-            : null,
-      })
-    }
-
-    return visualizeSourceMapRanges({ 'input.css': input }, css, ranges)
-  }
-
-  return { ast, css, format }
-}
-
-test('comment, single line', async () => {
-  let { ast, css, format } = await analyze(`/*! foo */`)
-
-  assert(ast[0].kind === 'comment')
-  expect(format(ast[0])).toMatchInlineSnapshot(`
-    "
-       output.css            |    input.css
-                             | 
-    1  /*! foo */            | 1  /*! foo */
-       ^^^^^^^^^^ A @ 1:0-10 |    ^^^^^^^^^^ A @ 1:0-10
-    2                        | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    "/*! foo */
-    "
-  `)
-})
-
-test('comment, multi line', async () => {
-  let { ast, css, format } = await analyze(`/*! foo \n bar */`)
-
-  assert(ast[0].kind === 'comment')
-  expect(format(ast[0])).toMatchInlineSnapshot(`
-    "
-       output.css           |    input.css
-                            | 
-    1  /*! foo              | 1  /*! foo 
-       ^^^^^^^^ A @ 1:0-2:7 |    ^^^^^^^^ A @ 1:0-2:7
-    2   bar */              | 2   bar */
-       ^^^^^^^ A            |    ^^^^^^^ A
-    3                       | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    "/*! foo 
-     bar */
-    "
-  `)
-})
-
-test('declaration, normal property, single line', async () => {
-  let { ast, css, format } = await analyze(`.foo { color: red; }`)
-
-  assert(ast[0].kind === 'rule')
-  assert(ast[0].nodes[0].kind === 'declaration')
-  expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
-    "
-       output.css              |    input.css
-                               | 
-    1  .foo {                  | 
-    2    color: red;           | 1  .foo { color: red; }
-         ^^^^^^^^^^ A @ 2:2-12 |           ^^^^^^^^^^ A @ 1:7-17
-    3  }                       | 
-    4                          | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    ".foo {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('declaration, normal property, multi line', async () => {
-  // Works, no changes needed
-  let { ast, css, format } = await analyze(dedent`
-    .foo {
-      grid-template-areas:
-        "a b c"
-        "d e f"
-        "g h i";
-    }
-  `)
-
-  assert(ast[0].kind === 'rule')
-  assert(ast[0].nodes[0].kind === 'declaration')
-  expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
-    "
-       output.css                                                |    input.css
-                                                                 | 
-    1  .foo {                                                    | 
-    2    grid-template-areas: "a b c" "d e f" "g h i";           | 2    grid-template-areas:
-         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ A @ 2:2-46 |      ^^^^^^^^^^^^^^^^^^^^ A @ 2:2-5:11
-                                                                 | 3      "a b c"
-                                                                 |    ^^^^^^^^^^^ A
-                                                                 | 4      "d e f"
-                                                                 |    ^^^^^^^^^^^ A
-                                                                 | 5      "g h i";
-                                                                 |    ^^^^^^^^^^^ A
-                                                                 | 6  }
-    3  }                                                         | 
-    4                                                            | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    ".foo {
-      grid-template-areas: "a b c" "d e f" "g h i";
-    }
-    "
-  `)
-})
-
-test('declaration, custom property, single line', async () => {
-  let { ast, css, format } = await analyze(`.foo { --foo: bar; }`)
-
-  assert(ast[0].kind === 'rule')
-  assert(ast[0].nodes[0].kind === 'declaration')
-  expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
-    "
-       output.css              |    input.css
-                               | 
-    1  .foo {                  | 
-    2    --foo: bar;           | 1  .foo { --foo: bar; }
-         ^^^^^^^^^^ A @ 2:2-12 |           ^^^^^^^^^^ A @ 1:7-17
-    3  }                       | 
-    4                          | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    ".foo {
-      --foo: bar;
-    }
-    "
-  `)
-})
-
-test('declaration, custom property, multi line', async () => {
-  let { ast, css, format } = await analyze(dedent`
-    .foo {
-      --foo: bar\nbaz;
-    }
-  `)
-
-  assert(ast[0].kind === 'rule')
-  assert(ast[0].nodes[0].kind === 'declaration')
-  expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
-    "
-       output.css               |    input.css
-                                | 
-    1  .foo {                   | 
-    2    --foo: bar             | 2    --foo: bar
-         ^^^^^^^^^^ A @ 2:2-3:3 |      ^^^^^^^^^^ A @ 2:2-3:3
-    3  baz;                     | 3  baz;
-       ^^^ A                    |    ^^^ A
-                                | 4  }
-    4  }                        | 
-    5                           | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    ".foo {
-      --foo: bar
-    baz;
-    }
-    "
-  `)
-})
-
-test('at rules, bodyless, single line', async () => {
-  // This intentionally has extra spaces
-  let { ast, css, format } = await analyze(`@layer foo,     bar;`)
-
-  assert(ast[0].kind === 'at-rule')
-  expect(format(ast[0])).toMatchInlineSnapshot(`
-    "
-       output.css                 |    input.css
-                                  | 
-    1  @layer foo, bar;           | 1  @layer foo,     bar;
-       ^^^^^^^^^^^^^^^ A @ 1:0-15 |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
-    2                             | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    "@layer foo, bar;
-    "
-  `)
-})
-
-test('at rules, bodyless, multi line', async () => {
-  let { ast, css, format } = await analyze(dedent`
-    @layer
-      foo,
-      bar
-    ;
-  `)
-
-  assert(ast[0].kind === 'at-rule')
-  expect(format(ast[0])).toMatchInlineSnapshot(`
-    "
-       output.css                 |    input.css
-                                  | 
-    1  @layer foo, bar;           | 1  @layer
-       ^^^^^^^^^^^^^^^ A @ 1:0-15 |    ^^^^^^ A @ 1:0-4:0
-                                  | 2    foo,
-                                  |    ^^^^^^ A
-                                  | 3    bar
-                                  |    ^^^^^ A
-    2                             | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    "@layer foo, bar;
-    "
-  `)
-})
-
-test('at rules, body, single line', async () => {
-  let { ast, css, format } = await analyze(`@layer foo { color: red; }`)
-
-  assert(ast[0].kind === 'at-rule')
-  expect(format(ast[0])).toMatchInlineSnapshot(`
-    "
-       output.css             |    input.css
-                              | 
-    1  @layer foo {           | 1  @layer foo { color: red; }
-       ^^^^^^^^^^^ A @ 1:0-11 |    ^^^^^^^^^^^ A @ 1:0-11
-    2    color: red;          | 
-    3  }                      | 
-    4                         | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    "@layer foo {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('at rules, body, multi line', async () => {
-  let { ast, css, format } = await analyze(dedent`
-    @layer
-      foo
-    {
-      color: baz;
-    }
-  `)
-
-  assert(ast[0].kind === 'at-rule')
-  expect(format(ast[0])).toMatchInlineSnapshot(`
-    "
-       output.css             |    input.css
-                              | 
-    1  @layer foo {           | 1  @layer
-       ^^^^^^^^^^^ A @ 1:0-11 |    ^^^^^^ A @ 1:0-3:0
-                              | 2    foo
-                              |    ^^^^^ A
-    2    color: baz;          | 
-    3  }                      | 
-    4                         | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    "@layer foo {
-      color: baz;
-    }
-    "
-  `)
-})
-
-test('style rules, body, single line', async () => {
-  let { ast, css, format } = await analyze(`.foo:is(.bar) { color: red; }`)
-
-  assert(ast[0].kind === 'rule')
-  expect(format(ast[0])).toMatchInlineSnapshot(`
-    "
-       output.css                |    input.css
-                                 | 
-    1  .foo:is(.bar) {           | 1  .foo:is(.bar) { color: red; }
-       ^^^^^^^^^^^^^^ A @ 1:0-14 |    ^^^^^^^^^^^^^^ A @ 1:0-14
-    2    color: red;             | 
-    3  }                         | 
-    4                            | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    ".foo:is(.bar) {
-      color: red;
-    }
-    "
-  `)
-})
-
-test('style rules, body, multi line', async () => {
-  // Works, no changes needed
-  let { ast, css, format } = await analyze(dedent`
-    .foo:is(
-      .bar
-    ) {
-      color: red;
-    }
-  `)
-
-  assert(ast[0].kind === 'rule')
-  expect(format(ast[0])).toMatchInlineSnapshot(`
-    "
-       output.css                  |    input.css
-                                   | 
-    1  .foo:is( .bar ) {           | 1  .foo:is(
-       ^^^^^^^^^^^^^^^^ A @ 1:0-16 |    ^^^^^^^^ A @ 1:0-3:2
-                                   | 2    .bar
-                                   |    ^^^^^^ A
-                                   | 3  ) {
-                                   |    ^^ A
-    2    color: red;               | 
-    3  }                           | 
-    4                              | 
-    "
-  `)
-
-  expect(css).toMatchInlineSnapshot(`
-    ".foo:is( .bar ) {
-      color: red;
-    }
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/source-maps/visualize-source-map.test.ts b/packages/tailwindcss/src/source-maps/visualize-source-map.test.ts
deleted file mode 100644
index f69bfac31..000000000
--- a/packages/tailwindcss/src/source-maps/visualize-source-map.test.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-import dedent from 'dedent'
-import { SourceMapGenerator, type RawSourceMap } from 'source-map-js'
-import { expect, test } from 'vitest'
-import { visualizeSourceMap, visualizeSourceMapRanges } from './visualize-source-map'
-
-const css = dedent
-
-function sourceMap({
-  sources,
-  mappings,
-}: {
-  sources: Record<string, string>
-  mappings: {
-    source: string
-    original: [line: number, column: number]
-    generated: [line: number, column: number]
-  }[]
-}) {
-  let generator = new SourceMapGenerator()
-
-  for (let mapping of mappings) {
-    generator.addMapping({
-      source: mapping.source,
-      original: {
-        line: mapping.original[0],
-        column: mapping.original[1],
-      },
-      generated: {
-        line: mapping.generated[0],
-        column: mapping.generated[1],
-      },
-    })
-  }
-
-  for (let [source, content] of Object.entries(sources)) {
-    generator.setSourceContent(source, content)
-  }
-
-  return JSON.parse(generator.toString()) as RawSourceMap
-}
-
-test('visualizes single-line ranges', () => {
-  expect(
-    visualizeSourceMapRanges(
-      {
-        // prettier-ignore
-        'input.css': css`.foo { color: red; }`,
-      },
-      css`
-        .foo {
-          color: red;
-        }
-      `,
-      [
-        {
-          original: {
-            source: 'input.css',
-            start: [1, 7],
-            end: [1, 17],
-          },
-          generated: {
-            start: [2, 2],
-            end: [2, 12],
-          },
-        },
-      ],
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-       output.css              |    input.css
-                               | 
-    1  .foo {                  | 
-    2    color: red;           | 1  .foo { color: red; }
-         ^^^^^^^^^^ A @ 2:2-12 |           ^^^^^^^^^^ A @ 1:7-17
-    3  }                       | 
-    "
-  `)
-})
-
-test('visualizes multi-line ranges', () => {
-  expect(
-    visualizeSourceMapRanges(
-      {
-        'input.css': css`
-          /*! foo
-           bar */
-        `,
-      },
-      css`
-        /*! foo
-         bar */
-      `,
-      [
-        {
-          original: {
-            source: 'input.css',
-            start: [1, 0],
-            end: [2, 7],
-          },
-          generated: {
-            start: [1, 0],
-            end: [2, 7],
-          },
-        },
-      ],
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-       output.css          |    input.css
-                           | 
-    1  /*! foo             | 1  /*! foo
-       ^^^^^^^ A @ 1:0-2:7 |    ^^^^^^^ A @ 1:0-2:7
-    2   bar */             | 2   bar */
-       ^^^^^^^ A           |    ^^^^^^^ A
-    "
-  `)
-})
-
-test('visualizes multiple sources', () => {
-  expect(
-    visualizeSourceMapRanges(
-      {
-        'utilities.css': css`
-          @tailwind utilities;
-        `,
-        'input.css': css`
-          @utility custom {
-            color: red;
-          }
-        `,
-      },
-      css`
-        .flex {
-          display: flex;
-        }
-        .custom {
-          color: red;
-        }
-      `,
-      [
-        {
-          original: {
-            source: 'utilities.css',
-            start: [1, 0],
-            end: [1, 19],
-          },
-          generated: {
-            start: [1, 0],
-            end: [1, 6],
-          },
-        },
-        {
-          original: {
-            source: 'utilities.css',
-            start: [1, 0],
-            end: [1, 19],
-          },
-          generated: {
-            start: [2, 2],
-            end: [2, 15],
-          },
-        },
-        {
-          original: {
-            source: 'input.css',
-            start: [2, 2],
-            end: [2, 12],
-          },
-          generated: {
-            start: [5, 2],
-            end: [5, 12],
-          },
-        },
-      ],
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-       output.css                 |    original
-                                  | 
-                                  |    --- utilities.css ---
-    1  .flex {                    | 1  @tailwind utilities;
-       ^^^^^^ A @ 1:0-6           |    ^^^^^^^^^^^^^^^^^^^ A @ 1:0-19
-    2    display: flex;           | 
-         ^^^^^^^^^^^^^ A @ 2:2-15 | 
-    3  }                          | 
-    4  .custom {                  | 
-                                  |    --- input.css ---
-    5    color: red;              | 2    color: red;
-         ^^^^^^^^^^ B @ 5:2-12    |      ^^^^^^^^^^ B @ 2:2-12
-                                  | 3  }
-    6  }                          | 
-    "
-  `)
-})
-
-test('visualizes unmapped source ranges', () => {
-  expect(
-    visualizeSourceMapRanges(
-      {
-        // prettier-ignore
-        'input.css': css`.foo { color: red; }`,
-      },
-      css`
-        .foo {
-          color: red;
-        }
-      `,
-      [
-        {
-          original: {
-            source: 'input.css',
-            start: [1, 7],
-            end: [1, 17],
-          },
-          generated: null,
-        },
-      ],
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-       output.css |    input.css
-                  | 
-       unmapped A | 1  .foo { color: red; }
-                  |           ^^^^^^^^^^ A @ 1:7-17
-    1  .foo {     | 
-    2    color... | 
-    3  }          | 
-    "
-  `)
-})
-
-test('visualizes source-map points as generated segments', () => {
-  let generated = css`
-    /*! foo
-     bar */
-  `
-
-  expect(
-    visualizeSourceMap(
-      sourceMap({
-        sources: {
-          'input.css': css`
-            /*! foo
-             bar */
-          `,
-        },
-        mappings: [
-          { source: 'input.css', original: [1, 0], generated: [1, 0] },
-          { source: 'input.css', original: [2, 0], generated: [2, 0] },
-          { source: 'input.css', original: [2, 7], generated: [2, 7] },
-        ],
-      }),
-      generated,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-       output.css          |    input.css
-                           | 
-    1  /*! foo             | 1  /*! foo
-       ^^^^^^^ A @ 1:0-2:0 |    ^^^^^^^ A @ 1:0-2:0
-    2   bar */             | 2   bar */
-       ^^^^^^^ B @ 2:0-7   |    ^^^^^^^ B @ 2:0-7
-    "
-  `)
-})
-
-test('visualizes final source-map point through end of line', () => {
-  expect(
-    visualizeSourceMap(
-      sourceMap({
-        sources: {
-          'input.css': css`aaaa`,
-        },
-        mappings: [{ source: 'input.css', original: [1, 0], generated: [1, 0] }],
-      }),
-      css`aaaa`,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-       output.css       |    input.css
-                        | 
-    1  aaaa             | 1  aaaa
-       ^^^^ A @ 1:0-2:0 |    ^ A @ 1:0
-    "
-  `)
-})
-
-test('visualizes duplicate source-map points without hiding them', () => {
-  expect(
-    visualizeSourceMap(
-      sourceMap({
-        sources: {
-          'input.css': css`
-            aaaa
-            bbbb
-          `,
-        },
-        mappings: [
-          { source: 'input.css', original: [1, 0], generated: [1, 0] },
-          { source: 'input.css', original: [2, 0], generated: [1, 0] },
-          { source: 'input.css', original: [2, 4], generated: [1, 4] },
-        ],
-      }),
-      css`
-        bbbb
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-       output.css     |    input.css
-                      | 
-    1  bbbb           | 1  aaaa
-       ^ A @ 1:0      |    ^ A @ 1:0
-    1  bbbb           | 2  bbbb
-       ^^^^ B @ 1:0-4 |    ^^^^ B @ 2:0-4
-    "
-  `)
-})
diff --git a/packages/tailwindcss/src/source-maps/visualize-source-map.ts b/packages/tailwindcss/src/source-maps/visualize-source-map.ts
deleted file mode 100644
index d0da423be..000000000
--- a/packages/tailwindcss/src/source-maps/visualize-source-map.ts
+++ /dev/null
@@ -1,538 +0,0 @@
-import { SourceMapConsumer, type RawSourceMap } from 'source-map-js'
-
-import { DefaultMap } from '../utils/default-map'
-
-const COLUMN_WIDTH = 100
-const CONTEXT_LINES = 3
-
-type Range = { start: [number, number]; end: [number, number] }
-
-interface Annotation {
-  original: Range
-  generated: Range | null
-  source: string
-}
-
-interface MappedAnnotation extends Annotation {
-  generated: Range
-}
-
-interface SourceMapPoint {
-  original: [number, number]
-  generated: [number, number]
-  source: string
-}
-
-interface SourceVisualization {
-  before: string[]
-  line: string
-  marker: string
-  after: string[]
-}
-
-export interface SourceMapVisualizationRange {
-  original: Range & { source: string }
-  generated: Range | null
-}
-
-/**
- * Render source map mappings as a side-by-side view of generated and original code.
- *
- * For raw source maps this renders the generated segments implied by mapping points,
- * so duplicate points and unmapped generated lines are visible in snapshots.
- */
-export function visualizeSourceMap(map: RawSourceMap, css: string) {
-  let smc = new SourceMapConsumer(map)
-  let sourceContents = buildSourceContents(map.sources, map.sourcesContent ?? [])
-  let points: SourceMapPoint[] = []
-
-  smc.eachMapping((mapping) => {
-    if (
-      mapping.source === null ||
-      mapping.originalLine === null ||
-      mapping.originalColumn === null
-    ) {
-      return
-    }
-
-    points.push({
-      original: [mapping.originalLine, mapping.originalColumn],
-      generated: [mapping.generatedLine, mapping.generatedColumn],
-      source: mapping.source,
-    })
-  })
-
-  return renderVisualization(sourceContents, buildAnnotationsFromSourceMapPoints(points), css)
-}
-
-export function visualizeSourceMapRanges(
-  sources: Record<string, string>,
-  generated: string,
-  ranges: SourceMapVisualizationRange[],
-) {
-  let sourceContents = buildSourceContents(Object.keys(sources), Object.values(sources))
-  let annotations: Annotation[] = []
-
-  for (let range of ranges) {
-    annotations.push({
-      generated: range.generated,
-      original: range.original,
-      source: range.original.source,
-    })
-  }
-
-  return renderVisualization(sourceContents, annotations, generated)
-}
-
-function buildSourceContents(sources: string[], contents: (string | null)[]) {
-  let result = new Map<string, string[]>()
-
-  for (let i = 0; i < sources.length; i++) {
-    let content = contents[i]
-
-    if (content === undefined || content === null) continue
-
-    result.set(sources[i], content.split('\n'))
-  }
-
-  return result
-}
-
-function buildAnnotationsFromSourceMapPoints(points: SourceMapPoint[]) {
-  let annotations: Annotation[] = []
-  let current: MappedAnnotation | null = null
-
-  function finish(next: SourceMapPoint | null) {
-    if (current === null) return
-
-    if (samePosition(current.generated.start, current.generated.end)) {
-      if (next === null) {
-        current.generated.end = [current.generated.start[0] + 1, 0]
-      } else if (next.generated[0] > current.generated.start[0]) {
-        current.generated.end = [current.generated.start[0] + 1, 0]
-
-        if (
-          next.source === current.source &&
-          next.generated[0] === current.generated.start[0] + 1 &&
-          next.generated[1] === 0 &&
-          next.original[0] === current.original.start[0] + 1 &&
-          next.original[1] === 0
-        ) {
-          current.original.end = next.original
-        }
-      }
-    }
-
-    annotations.push(current)
-    current = null
-  }
-
-  for (let point of points) {
-    if (
-      current !== null &&
-      current.source === point.source &&
-      current.generated.start[0] === point.generated[0] &&
-      point.generated[1] > current.generated.end[1] &&
-      comparePosition(current.original.start, point.original) <= 0
-    ) {
-      current.generated.end = point.generated
-      current.original.end = point.original
-      continue
-    }
-
-    finish(point)
-
-    current = {
-      original: {
-        start: point.original,
-        end: point.original,
-      },
-      generated: {
-        start: point.generated,
-        end: point.generated,
-      },
-      source: point.source,
-    }
-  }
-
-  finish(null)
-
-  return annotations
-}
-
-function renderVisualization(
-  sourceContents: Map<string, string[]>,
-  annotationsList: Annotation[],
-  generated: string,
-) {
-  let generatedLines = generated.split('\n')
-  let nextLabelIdx = 0
-  let labelsBySource = new DefaultMap<string, string>(() => annotationLabel(nextLabelIdx++))
-  let labels = annotationsList.map((annotation) => {
-    return labelsBySource.get(sourceKey(annotation.source, annotation.original))
-  })
-  let generatedLineWidth = String(generatedLines.length).length
-  let sourceLineWidth = Math.max(
-    1,
-    ...Array.from(sourceContents.values(), (lines) => String(lines.length).length),
-  )
-  let leftWidth = Math.min(
-    100,
-    Math.max(
-      withLineNumber(generatedLineWidth, 'output.css').length,
-      ...annotationsList.map((annotation, idx) => {
-        let label = labels[idx]
-
-        if (annotation.generated === null) {
-          return withoutLineNumber(generatedLineWidth, `unmapped ${label}`).length
-        }
-
-        let line = withLineNumber(
-          generatedLineWidth,
-          generatedLines[annotation.generated.start[0] - 1] ?? '',
-          annotation.generated.start[0],
-        )
-        let marker = withoutLineNumber(
-          generatedLineWidth,
-          visualizeRange(
-            annotation.generated,
-            label,
-            generatedLines[annotation.generated.start[0] - 1] ?? '',
-          ),
-        )
-        let after = visualizeGeneratedRangeContinuation(
-          generatedLines,
-          generatedLineWidth,
-          annotation.generated,
-          label,
-        )
-
-        return Math.max(line.length, marker.length, ...after.map((line) => line.length))
-      }),
-    ),
-  )
-  let sources = new Set(annotationsList.map((annotation) => annotation.source))
-  let sourceHeader = sources.size === 1 ? (annotationsList[0]?.source ?? 'original') : 'original'
-  let result: string[] = []
-
-  function add(left: string, right: string) {
-    result.push(sideBySide(left, right, leftWidth))
-  }
-
-  add(
-    withLineNumber(generatedLineWidth, 'output.css'),
-    withLineNumber(sourceLineWidth, sourceHeader),
-  )
-  add(withoutLineNumber(generatedLineWidth, ''), withoutLineNumber(sourceLineWidth, ''))
-
-  let lastLine = 0
-  let lastSourceLine = new Map<string, number>()
-  let lastSource: string | null = null
-  let renderedSources = new Set<string>()
-
-  for (let idx = 0; idx < annotationsList.length; idx++) {
-    let annotation = annotationsList[idx]
-    let label = labels[idx]
-
-    if (annotation.generated === null) {
-      let source = visualizeSource(
-        sourceContents,
-        lastSourceLine,
-        renderedSources,
-        sourceLineWidth,
-        annotation.source,
-        annotation.original,
-        label,
-      )
-
-      if (sources.size > 1 && source.line !== '' && annotation.source !== lastSource) {
-        add(
-          withoutLineNumber(generatedLineWidth, ''),
-          withoutLineNumber(sourceLineWidth, `--- ${annotation.source} ---`),
-        )
-        lastSource = annotation.source
-      }
-
-      for (let line of source.before) {
-        add(withoutLineNumber(generatedLineWidth, ''), line)
-      }
-
-      add(withoutLineNumber(generatedLineWidth, `unmapped ${label}`), source.line)
-      add(withoutLineNumber(generatedLineWidth, ''), source.marker)
-
-      for (let line of source.after) {
-        add(withoutLineNumber(generatedLineWidth, ''), line)
-      }
-
-      continue
-    }
-
-    let lineNumber = annotation.generated.start[0]
-
-    for (let i = lastLine + 1; i < lineNumber; i++) {
-      add(
-        withLineNumber(generatedLineWidth, generatedLines[i - 1] ?? '', i),
-        withoutLineNumber(sourceLineWidth, ''),
-      )
-    }
-
-    let endLine = coveredEndLine(annotation.generated)
-    let generatedAfter = visualizeGeneratedRangeContinuation(
-      generatedLines,
-      generatedLineWidth,
-      annotation.generated,
-      label,
-    )
-    let source = visualizeSource(
-      sourceContents,
-      lastSourceLine,
-      renderedSources,
-      sourceLineWidth,
-      annotation.source,
-      annotation.original,
-      label,
-    )
-
-    if (sources.size > 1 && source.line !== '' && annotation.source !== lastSource) {
-      add(
-        withoutLineNumber(generatedLineWidth, ''),
-        withoutLineNumber(sourceLineWidth, `--- ${annotation.source} ---`),
-      )
-      lastSource = annotation.source
-    }
-
-    for (let line of source.before) {
-      add(withoutLineNumber(generatedLineWidth, ''), line)
-    }
-
-    add(
-      withLineNumber(generatedLineWidth, generatedLines[lineNumber - 1] ?? '', lineNumber),
-      source.line,
-    )
-    add(
-      withoutLineNumber(
-        generatedLineWidth,
-        visualizeRange(annotation.generated, label, generatedLines[lineNumber - 1] ?? ''),
-      ),
-      source.marker,
-    )
-
-    for (let i = 0; i < Math.max(generatedAfter.length, source.after.length); i++) {
-      add(generatedAfter[i] ?? withoutLineNumber(generatedLineWidth, ''), source.after[i] ?? '')
-    }
-
-    lastLine = endLine
-  }
-
-  for (let i = lastLine + 1; i <= generatedLines.length; i++) {
-    add(
-      withLineNumber(generatedLineWidth, generatedLines[i - 1] ?? '', i),
-      withoutLineNumber(sourceLineWidth, ''),
-    )
-  }
-
-  return `\n${result.join('\n')}\n`
-}
-
-function sideBySide(left: string, right: string, leftWidth: number) {
-  return `${fitColumn(left, leftWidth)} | ${fitColumn(right, COLUMN_WIDTH, false)}`
-}
-
-function withLineNumber(width: number, value: string, line?: number) {
-  return `${line === undefined ? ' '.repeat(width) : String(line).padStart(width)}  ${value}`
-}
-
-function withoutLineNumber(width: number, value: string) {
-  if (value === '') return ''
-
-  return `${' '.repeat(width)}  ${value}`
-}
-
-function fitColumn(value: string, width: number, pad = true) {
-  if (value.length <= width) {
-    return pad ? value.padEnd(width) : value
-  }
-
-  let markerIdx = value.indexOf(' @ ')
-
-  if (markerIdx !== -1) {
-    let labelIdx = value.lastIndexOf(' ', markerIdx - 1) + 1
-    let suffix = value.slice(labelIdx)
-    let prefixWidth = width - suffix.length - 4
-
-    if (prefixWidth > 0) {
-      let result = `${value.slice(0, prefixWidth)}... ${suffix}`
-
-      return pad ? result.padEnd(width) : result
-    }
-  }
-
-  return `${value.slice(0, width - 3)}...`
-}
-
-function annotationLabel(idx: number) {
-  let label = ''
-
-  for (let current = idx; current >= 0; current = Math.floor(current / 26) - 1) {
-    label = String.fromCharCode(65 + (current % 26)) + label
-  }
-
-  return label
-}
-
-function visualizeRange(range: Range, label: string, line?: string) {
-  let start = range.start[1]
-  let width = (() => {
-    if (line !== undefined && range.start[0] !== range.end[0]) {
-      return Math.max(1, line.length - start)
-    }
-
-    return Math.max(1, range.end[1] - start)
-  })()
-  return `${' '.repeat(start)}${'^'.repeat(width)} ${label} @ ${formatRange(range)}`
-}
-
-function visualizeSource(
-  sourceContents: Map<string, string[]>,
-  lastSourceLine: Map<string, number>,
-  renderedSources: Set<string>,
-  sourceLineWidth: number,
-  source: string,
-  range: Range,
-  label: string,
-): SourceVisualization {
-  let lines = sourceContents.get(source)
-
-  if (lines === undefined) return { before: [], line: '', marker: '', after: [] }
-
-  let startLine = range.start[0]
-  let line = lines[startLine - 1]
-
-  if (line === undefined) return { before: [], line: '', marker: '', after: [] }
-
-  let before: string[] = []
-  let lastLine = lastSourceLine.get(source) ?? 0
-
-  if (lastLine > 0 && startLine > lastLine && startLine - lastLine <= CONTEXT_LINES + 1) {
-    for (let i = lastLine + 1; i < startLine; i++) {
-      let line = lines[i - 1] ?? ''
-
-      if (line.trim() === '') continue
-
-      before.push(withLineNumber(sourceLineWidth, line, i))
-    }
-  }
-
-  let key = sourceKey(source, range)
-
-  if (renderedSources.has(key)) {
-    lastSourceLine.set(source, Math.max(lastLine, startLine))
-
-    return { before: [], line: '', marker: '', after: [] }
-  }
-
-  renderedSources.add(key)
-
-  let endLine = coveredEndLine(range)
-  let after = visualizeSourceRangeContinuation(lines, sourceLineWidth, range, label)
-
-  if (startLine > lastLine) {
-    for (let i = endLine + 1; i <= Math.min(endLine + CONTEXT_LINES, lines.length); i++) {
-      let line = lines[i - 1]
-
-      if (line?.trim() !== '}') break
-
-      after.push(withLineNumber(sourceLineWidth, line, i))
-      endLine = i
-    }
-  }
-
-  lastSourceLine.set(source, Math.max(lastLine, endLine))
-
-  return {
-    before,
-    line: withLineNumber(sourceLineWidth, line, startLine),
-    marker: withoutLineNumber(sourceLineWidth, visualizeRange(range, label, line)),
-    after,
-  }
-}
-
-function visualizeSourceRangeContinuation(
-  lines: string[],
-  sourceLineWidth: number,
-  range: Range,
-  label: string,
-) {
-  let result: string[] = []
-
-  for (let i = range.start[0] + 1; i <= coveredEndLine(range); i++) {
-    let line = lines[i - 1] ?? ''
-
-    result.push(withLineNumber(sourceLineWidth, line, i))
-    result.push(
-      withoutLineNumber(sourceLineWidth, visualizeContinuationRange(range, label, line, i)),
-    )
-  }
-
-  return result
-}
-
-function visualizeGeneratedRangeContinuation(
-  lines: string[],
-  generatedLineWidth: number,
-  range: Range,
-  label: string,
-) {
-  let result: string[] = []
-
-  for (let i = range.start[0] + 1; i <= coveredEndLine(range); i++) {
-    let line = lines[i - 1] ?? ''
-
-    result.push(withLineNumber(generatedLineWidth, line, i))
-    result.push(
-      withoutLineNumber(generatedLineWidth, visualizeContinuationRange(range, label, line, i)),
-    )
-  }
-
-  return result
-}
-
-function coveredEndLine(range: Range) {
-  if (range.start[0] !== range.end[0] && range.end[1] === 0) {
-    return range.end[0] - 1
-  }
-
-  return range.end[0]
-}
-
-function visualizeContinuationRange(range: Range, label: string, line: string, lineNumber: number) {
-  let start = lineNumber === range.start[0] ? range.start[1] : 0
-  let end = lineNumber === range.end[0] ? range.end[1] : line.length
-  let width = Math.max(1, end - start)
-
-  return `${' '.repeat(start)}${'^'.repeat(width)} ${label}`
-}
-
-function sourceKey(source: string, range: Range) {
-  return `${source}:${range.start[0]}:${range.start[1]}:${range.end[0]}:${range.end[1]}`
-}
-
-function samePosition(a: [number, number], b: [number, number]) {
-  return a[0] === b[0] && a[1] === b[1]
-}
-
-function comparePosition(a: [number, number], b: [number, number]) {
-  return a[0] - b[0] || a[1] - b[1]
-}
-
-function formatRange(range: Range): string {
-  if (range.start[0] === range.end[0]) {
-    if (range.start[1] === range.end[1]) {
-      return `${range.start[0]}:${range.start[1]}`
-    }
-
-    return `${range.start[0]}:${range.start[1]}-${range.end[1]}`
-  }
-
-  return `${range.start[0]}:${range.start[1]}-${range.end[0]}:${range.end[1]}`
-}
diff --git a/packages/tailwindcss/src/test-utils/custom-serializer.ts b/packages/tailwindcss/src/test-utils/custom-serializer.ts
deleted file mode 100644
index 1704340e7..000000000
--- a/packages/tailwindcss/src/test-utils/custom-serializer.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { SnapshotSerializer } from 'vitest'
-
-// We're reducing the precision of parameters to the `oklab()` function from
-// our snapshots as we've observed lightningcss generating different decimal
-// places in the last position when run on different operating systems.
-const HIGH_PRECISION_COLOR_FUNCTION =
-  /(oklab\(|oklch\(|lab\(|lch\()\d{1,2}\.?\d{0,4}% -?\d{0,2}\.(\d{4,8}) -?\d{0,2}.(\d{4,8}) \/ \.\d{1,2}\)/g
-
-export default {
-  test(val) {
-    return typeof val === 'string' && val.match(HIGH_PRECISION_COLOR_FUNCTION) !== null
-  },
-  serialize(val, config, indentation, depth, refs, printer) {
-    if (typeof val !== 'string') {
-      throw new Error('This was already tested in the test() callback')
-    }
-
-    let replaced = val.replaceAll(HIGH_PRECISION_COLOR_FUNCTION, (match, _, first, second) => {
-      return match.replaceAll(first, first.slice(0, 3)).replaceAll(second, second.slice(0, 3))
-    })
-    return printer(replaced, config, indentation, depth, refs)
-  },
-} satisfies SnapshotSerializer
diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts
index 7667ca66f..039560482 100644
--- a/packages/tailwindcss/src/test-utils/run.ts
+++ b/packages/tailwindcss/src/test-utils/run.ts
@@ -1,25 +1,9 @@
-import { compile } from '..'
-import { optimize } from '../../../@tailwindcss-node/src/optimize'
+import { compile, optimizeCss } from '..'
 
-const css = String.raw
-
-export async function run(
-  candidates: string[],
-  input = css`
-    @tailwind utilities;
-  `,
-  options: Parameters<typeof compile>[1] = {},
-) {
-  let { build } = await compile(input, options)
-  return pretty(optimize(build(candidates)).code)
+export function compileCss(css: string, candidates: string[] = []) {
+  return optimizeCss(compile(css).build(candidates)).trim()
 }
 
-export async function compileCss(css: string, options: Parameters<typeof compile>[1] = {}) {
-  return run([], css, options)
-}
-
-export function pretty(input: string) {
-  input = input.trim()
-  if (input === '') return ''
-  return `\n${input}\n`
+export function run(candidates: string[]) {
+  return optimizeCss(compile('@tailwind utilities;').build(candidates)).trim()
 }
diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts
index 073fb242f..137bff75a 100644
--- a/packages/tailwindcss/src/theme.ts
+++ b/packages/tailwindcss/src/theme.ts
@@ -1,63 +1,9 @@
-import { type AtRule, type Declaration } from './ast'
-import { escape, unescape } from './utils/escape'
-
-export const enum ThemeOptions {
-  NONE = 0,
-  INLINE = 1 << 0,
-  REFERENCE = 1 << 1,
-  DEFAULT = 1 << 2,
-
-  STATIC = 1 << 3,
-  USED = 1 << 4,
-}
-
-// In the future we may want to replace this with just a `Set` of known theme
-// keys and let the computer sort out which keys should ignored which other keys
-// based on overlapping prefixes.
-const ignoredThemeKeyMap = new Map([
-  ['--font', ['--font-weight', '--font-size']],
-  ['--inset', ['--inset-shadow', '--inset-ring']],
-  [
-    '--text',
-    [
-      '--text-color',
-      '--text-decoration-color',
-      '--text-decoration-thickness',
-      '--text-indent',
-      '--text-shadow',
-      '--text-underline-offset',
-    ],
-  ],
-  ['--grid-column', ['--grid-column-start', '--grid-column-end']],
-  ['--grid-row', ['--grid-row-start', '--grid-row-end']],
-])
-
-function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) {
-  return (ignoredThemeKeyMap.get(namespace) ?? []).some(
-    (ignoredThemeKey) => themeKey === ignoredThemeKey || themeKey.startsWith(`${ignoredThemeKey}-`),
-  )
-}
+import { escape } from './utils/escape'
 
 export class Theme {
-  public prefix: string | null = null
+  constructor(private values: Map<string, string> = new Map<string, string>()) {}
 
-  constructor(
-    private values = new Map<
-      string,
-      {
-        value: string
-        options: ThemeOptions
-        src: Declaration['src']
-      }
-    >(),
-    private keyframes = new Set<AtRule>([]),
-  ) {}
-
-  get size() {
-    return this.values.size
-  }
-
-  add(key: string, value: string, options = ThemeOptions.NONE, src?: Declaration['src']): void {
+  add(key: string, value: string): void {
     if (key.endsWith('-*')) {
       if (value !== 'initial') {
         throw new Error(`Invalid theme value \`${value}\` for namespace \`${key}\``)
@@ -65,42 +11,31 @@ export class Theme {
       if (key === '--*') {
         this.values.clear()
       } else {
-        this.clearNamespace(
-          key.slice(0, -2),
-          // `--${key}-*: initial;` should clear _all_ theme values
-          ThemeOptions.NONE,
-        )
+        this.clearNamespace(key.slice(0, -2))
       }
     }
 
-    if (options & ThemeOptions.DEFAULT) {
-      let existing = this.values.get(key)
-      if (existing && !(existing.options & ThemeOptions.DEFAULT)) return
-    }
-
     if (value === 'initial') {
       this.values.delete(key)
     } else {
-      this.values.set(key, { value, options, src })
+      this.values.set(key, value)
     }
   }
 
-  keysInNamespaces(themeKeys: Iterable<ThemeKey>): string[] {
+  keysInNamespaces(themeKeys: ThemeKey[]): string[] {
     let keys: string[] = []
 
-    for (let namespace of themeKeys) {
-      let prefix = `${namespace}-`
+    for (let prefix of themeKeys) {
+      let namespace = `${prefix}-`
 
       for (let key of this.values.keys()) {
-        if (!key.startsWith(prefix)) continue
+        if (key.startsWith(namespace)) {
+          if (key.indexOf('--', 2) !== -1) {
+            continue
+          }
 
-        if (key.indexOf('--', 2) !== -1) continue
-
-        if (isIgnoredThemeKey(key as ThemeKey, namespace)) {
-          continue
+          keys.push(key.slice(namespace.length))
         }
-
-        keys.push(key.slice(prefix.length))
       }
     }
 
@@ -111,135 +46,59 @@ export class Theme {
     for (let key of themeKeys) {
       let value = this.values.get(key)
       if (value) {
-        return value.value
+        return value
       }
     }
 
     return null
   }
 
-  hasDefault(key: string): boolean {
-    return (this.getOptions(key) & ThemeOptions.DEFAULT) === ThemeOptions.DEFAULT
-  }
-
-  getOptions(key: string) {
-    key = unescape(this.#unprefixKey(key))
-    return this.values.get(key)?.options ?? ThemeOptions.NONE
-  }
-
   entries() {
-    if (!this.prefix) return this.values.entries()
-
-    return Array.from(this.values, (entry) => {
-      entry[0] = this.prefixKey(entry[0])
-      return entry
-    })
+    return this.values.entries()
   }
 
-  prefixKey(key: string) {
-    if (!this.prefix) return key
-    return `--${this.prefix}-${key.slice(2)}`
-  }
-
-  #unprefixKey(key: string) {
-    if (!this.prefix) return key
-    return `--${key.slice(3 + this.prefix.length)}`
-  }
-
-  clearNamespace(namespace: string, clearOptions: ThemeOptions) {
-    let ignored = ignoredThemeKeyMap.get(namespace) ?? []
-
-    outer: for (let key of this.values.keys()) {
+  clearNamespace(namespace: string) {
+    for (let key of this.values.keys()) {
       if (key.startsWith(namespace)) {
-        if (clearOptions !== ThemeOptions.NONE) {
-          let options = this.getOptions(key)
-          if ((options & clearOptions) !== clearOptions) {
-            continue
-          }
-        }
-        for (let ignoredNamespace of ignored) {
-          if (key.startsWith(ignoredNamespace)) continue outer
-        }
         this.values.delete(key)
       }
     }
   }
 
-  #resolveKey(candidateValue: string | null, themeKeys: ThemeKey[]): string | null {
-    for (let namespace of themeKeys) {
-      let themeKey =
-        candidateValue !== null ? (`${namespace}-${candidateValue}` as ThemeKey) : namespace
+  resolveKey(candidateValue: string, themeKeys: ThemeKey[]): string | null {
+    for (let key of themeKeys) {
+      let themeKey = escape(`${key}-${candidateValue.replaceAll('.', '_')}`)
 
-      if (!this.values.has(themeKey)) {
-        // If the exact theme key is not found, we might be trying to resolve a key containing a dot
-        // that was registered with an underscore instead:
-        if (candidateValue !== null && candidateValue.includes('.')) {
-          themeKey = `${namespace}-${candidateValue.replaceAll('.', '_')}` as ThemeKey
-
-          if (!this.values.has(themeKey)) continue
-        } else {
-          continue
-        }
+      if (this.values.has(themeKey)) {
+        return themeKey
       }
-
-      if (isIgnoredThemeKey(themeKey, namespace)) continue
-
-      return themeKey
     }
 
     return null
   }
 
-  #var(themeKey: string) {
-    let value = this.values.get(themeKey)
-    if (!value) {
+  var(themeKey: string) {
+    if (!this.values.has(themeKey)) {
       return null
     }
 
-    // Since @theme blocks in reference mode do not emit the CSS variables, we can not assume that
-    // the values will eventually be set up in the browser (e.g. when using `@apply` inside roots
-    // that use `@reference`). Ensure we set up a fallback in these cases.
-    let fallback = null
-    if (value.options & ThemeOptions.REFERENCE) {
-      fallback = value.value
-    }
-
-    return `var(${escape(this.prefixKey(themeKey))}${fallback ? `, ${fallback}` : ''})`
+    return `var(${themeKey}, ${this.values.get(themeKey)})`
   }
 
-  markUsedVariable(themeKey: string): boolean {
-    let key = unescape(this.#unprefixKey(themeKey))
-    let value = this.values.get(key)
-    if (!value) return false
-    let isUsed = value.options & ThemeOptions.USED
-    value.options |= ThemeOptions.USED
-    return !isUsed
-  }
-
-  resolve(
-    candidateValue: string | null,
-    themeKeys: ThemeKey[],
-    options: ThemeOptions = ThemeOptions.NONE,
-  ): string | null {
-    let themeKey = this.#resolveKey(candidateValue, themeKeys)
+  resolve(candidateValue: string, themeKeys: ThemeKey[]): string | null {
+    let themeKey = this.resolveKey(candidateValue, themeKeys)
 
     if (!themeKey) return null
 
-    let value = this.values.get(themeKey)!
-
-    if ((options | value.options) & ThemeOptions.INLINE) {
-      return value.value
-    }
-
-    return this.#var(themeKey)
+    return this.var(themeKey)
   }
 
-  resolveValue(candidateValue: string | null, themeKeys: ThemeKey[]): string | null {
-    let themeKey = this.#resolveKey(candidateValue, themeKeys)
+  resolveBare(candidateValue: string, themeKeys: ThemeKey[]): string | null {
+    let themeKey = this.resolveKey(candidateValue, themeKeys)
 
     if (!themeKey) return null
 
-    return this.values.get(themeKey)!.value
+    return this.values.get(themeKey)!
   }
 
   resolveWith(
@@ -247,30 +106,19 @@ export class Theme {
     themeKeys: ThemeKey[],
     nestedKeys: `--${string}`[] = [],
   ): [string, Record<string, string>] | null {
-    let themeKey = this.#resolveKey(candidateValue, themeKeys)
+    let themeKey = this.resolveKey(candidateValue, themeKeys)
 
     if (!themeKey) return null
 
     let extra = {} as Record<string, string>
     for (let name of nestedKeys) {
-      let nestedKey = `${themeKey}${name}`
-      let nestedValue = this.values.get(nestedKey)!
-      if (!nestedValue) continue
-
-      if (nestedValue.options & ThemeOptions.INLINE) {
-        extra[name] = nestedValue.value
-      } else {
-        extra[name] = this.#var(nestedKey)!
+      let nestedValue = this.var(`${themeKey}${name}`)
+      if (nestedValue) {
+        extra[name] = nestedValue
       }
     }
 
-    let value = this.values.get(themeKey)!
-
-    if (value.options & ThemeOptions.INLINE) {
-      return [value.value, extra]
-    }
-
-    return [this.#var(themeKey)!, extra]
+    return [this.var(themeKey)!, extra]
   }
 
   namespace(namespace: string) {
@@ -279,26 +127,135 @@ export class Theme {
 
     for (let [key, value] of this.values) {
       if (key === namespace) {
-        values.set(null, value.value)
-      } else if (key.startsWith(`${prefix}-`)) {
-        // Preserve `--` prefix for sub-variables
-        // e.g. `--font-size-sm--line-height`
-        values.set(key.slice(namespace.length), value.value)
+        values.set(null, value)
       } else if (key.startsWith(prefix)) {
-        values.set(key.slice(prefix.length), value.value)
+        values.set(key.slice(prefix.length), value)
       }
     }
 
     return values
   }
-
-  addKeyframes(value: AtRule): void {
-    this.keyframes.add(value)
-  }
-
-  getKeyframes() {
-    return Array.from(this.keyframes)
-  }
 }
 
-export type ThemeKey = `--${string}`
+export type ThemeKey =
+  | '--accent-color'
+  | '--animate'
+  | '--aspect-ratio'
+  | '--backdrop-blur'
+  | '--backdrop-brightness'
+  | '--backdrop-contrast'
+  | '--backdrop-grayscale'
+  | '--backdrop-hue-rotate'
+  | '--backdrop-invert'
+  | '--backdrop-opacity'
+  | '--backdrop-saturate'
+  | '--backdrop-sepia'
+  | '--background-color'
+  | '--background-image'
+  | '--blur'
+  | '--border-color'
+  | '--border-spacing'
+  | '--border-width'
+  | '--box-shadow-color'
+  | '--breakpoint'
+  | '--brightness'
+  | '--caret-color'
+  | '--color'
+  | '--columns'
+  | '--contrast'
+  | '--cursor'
+  | '--default-border-width'
+  | '--default-ring-color'
+  | '--default-ring-width'
+  | '--divide-width'
+  | '--divide-color'
+  | '--drop-shadow'
+  | '--fill'
+  | '--flex-basis'
+  | '--font-family'
+  | '--font-size'
+  | '--font-weight'
+  | '--gap'
+  | '--gradient-color-stop-positions'
+  | '--grayscale'
+  | '--grid-auto-columns'
+  | '--grid-auto-rows'
+  | '--grid-column'
+  | '--grid-column-end'
+  | '--grid-column-start'
+  | '--grid-row'
+  | '--grid-row-end'
+  | '--grid-row-start'
+  | '--grid-template-columns'
+  | '--grid-template-rows'
+  | '--height'
+  | '--hue-rotate'
+  | '--inset'
+  | '--inset-shadow'
+  | '--invert'
+  | '--letter-spacing'
+  | '--line-height'
+  | '--line-clamp'
+  | '--list-style-image'
+  | '--list-style-type'
+  | '--margin'
+  | '--max-height'
+  | '--max-width'
+  | '--min-height'
+  | '--min-width'
+  | '--object-position'
+  | '--opacity'
+  | '--order'
+  | '--outline-color'
+  | '--outline-width'
+  | '--outline-offset'
+  | '--padding'
+  | '--placeholder-color'
+  | '--radius'
+  | '--ring-color'
+  | '--ring-offset-color'
+  | '--ring-offset-width'
+  | '--ring-width'
+  | '--rotate'
+  | '--saturate'
+  | '--scale'
+  | '--scroll-margin'
+  | '--scroll-padding'
+  | '--sepia'
+  | '--shadow'
+  | '--size'
+  | '--skew'
+  | '--space'
+  | '--spacing'
+  | '--stroke'
+  | '--stroke-width'
+  | '--text-color'
+  | '--text-decoration-color'
+  | '--text-decoration-thickness'
+  | '--text-indent'
+  | '--text-underline-offset'
+  | '--transform-origin'
+  | '--transition-delay'
+  | '--transition-duration'
+  | '--transition-property'
+  | '--transition-timing-function'
+  | '--translate'
+  | '--width'
+  | '--z-index'
+
+export type ColorThemeKey =
+  | '--color'
+  | '--accent-color'
+  | '--background-color'
+  | '--border-color'
+  | '--box-shadow-color'
+  | '--caret-color'
+  | '--divide-color'
+  | '--fill'
+  | '--outline-color'
+  | '--placeholder-color'
+  | '--ring-color'
+  | '--ring-offset-color'
+  | '--stroke'
+  | '--text-color'
+  | '--text-decoration-color'
diff --git a/packages/tailwindcss/src/types.ts b/packages/tailwindcss/src/types.ts
deleted file mode 100644
index f0fca5cf7..000000000
--- a/packages/tailwindcss/src/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Writable<T> = T extends Readonly<infer U> ? U : T
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 66b051d57..8ee2621e1 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -1,15 +1,12 @@
-import { describe, expect, test, vi } from 'vitest'
-import { compile } from '.'
+import { expect, test } from 'vitest'
 import { compileCss, run } from './test-utils/run'
-import { isValidFunctionalUtilityName, isValidStaticUtilityName } from './utilities'
 
 const css = String.raw
 
-test('sr-only', async () => {
-  expect(await run(['sr-only'])).toMatchInlineSnapshot(`
-    "
-    .sr-only {
-      clip-path: inset(50%);
+test('sr-only', () => {
+  expect(run(['sr-only'])).toMatchInlineSnapshot(`
+    ".sr-only {
+      clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border-width: 0;
       width: 1px;
@@ -18,17 +15,15 @@ test('sr-only', async () => {
       padding: 0;
       position: absolute;
       overflow: hidden;
-    }
-    "
+    }"
   `)
-  expect(await run(['-sr-only', 'sr-only-[var(--value)]', 'sr-only/foo'])).toEqual('')
+  expect(run(['-sr-only', 'sr-only-[--value]'])).toEqual('')
 })
 
-test('not-sr-only', async () => {
-  expect(await run(['not-sr-only'])).toMatchInlineSnapshot(`
-    "
-    .not-sr-only {
-      clip-path: none;
+test('not-sr-only', () => {
+  expect(run(['not-sr-only'])).toMatchInlineSnapshot(`
+    ".not-sr-only {
+      clip: auto;
       white-space: normal;
       width: auto;
       height: auto;
@@ -36,38 +31,29 @@ test('not-sr-only', async () => {
       padding: 0;
       position: static;
       overflow: visible;
-    }
-    "
+    }"
   `)
-  expect(await run(['-not-sr-only', 'not-sr-only-[var(--value)]', 'not-sr-only/foo'])).toEqual('')
+  expect(run(['-not-sr-only', 'not-sr-only-[--value]'])).toEqual('')
 })
 
-test('pointer-events', async () => {
-  expect(await run(['pointer-events-none', 'pointer-events-auto'])).toMatchInlineSnapshot(`
-    "
-    .pointer-events-auto {
+test('pointer-events', () => {
+  expect(run(['pointer-events-none', 'pointer-events-auto'])).toMatchInlineSnapshot(`
+    ".pointer-events-auto {
       pointer-events: auto;
     }
 
     .pointer-events-none {
       pointer-events: none;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-pointer-events-none',
-      '-pointer-events-auto',
-      'pointer-events-[var(--value)]',
-      'pointer-events-none/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-pointer-events-none', '-pointer-events-auto', 'pointer-events-[--value]'])).toEqual(
+    '',
+  )
 })
 
-test('visibility', async () => {
-  expect(await run(['visible', 'invisible', 'collapse'])).toMatchInlineSnapshot(`
-    "
-    .collapse {
+test('visibility', () => {
+  expect(run(['visible', 'invisible', 'collapse'])).toMatchInlineSnapshot(`
+    ".collapse {
       visibility: collapse;
     }
 
@@ -77,25 +63,14 @@ test('visibility', async () => {
 
     .visible {
       visibility: visible;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-visible',
-      '-invisible',
-      '-collapse',
-      'visible/foo',
-      'invisible/foo',
-      'collapse/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-visible', '-invisible', '-collapse'])).toEqual('')
 })
 
-test('position', async () => {
-  expect(await run(['static', 'fixed', 'absolute', 'relative', 'sticky'])).toMatchInlineSnapshot(`
-    "
-    .absolute {
+test('position', () => {
+  expect(run(['static', 'fixed', 'absolute', 'relative', 'sticky'])).toMatchInlineSnapshot(`
+    ".absolute {
       position: absolute;
     }
 
@@ -113,32 +88,22 @@ test('position', async () => {
 
     .sticky {
       position: sticky;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-static',
-      '-fixed',
-      '-absolute',
-      '-relative',
-      '-sticky',
-      'static/foo',
-      'fixed/foo',
-      'absolute/foo',
-      'relative/foo',
-      'sticky/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-static', '-fixed', '-absolute', '-relative', '-sticky'])).toEqual('')
 })
 
-test('inset', async () => {
+test('inset', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
       [
         'inset-auto',
-        'inset-shadow-sm',
-        'inset-shadowned',
         '-inset-full',
         'inset-full',
         'inset-3/4',
@@ -146,45 +111,14 @@ test('inset', async () => {
         '-inset-4',
         'inset-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
     .-inset-4 {
-      inset: calc(var(--spacing-4) * -1);
+      inset: calc(var(--spacing-4, 1rem) * -1);
     }
 
     .-inset-full {
@@ -196,7 +130,7 @@ test('inset', async () => {
     }
 
     .inset-4 {
-      inset: var(--spacing-4);
+      inset: var(--spacing-4, 1rem);
     }
 
     .inset-\\[4px\\] {
@@ -209,120 +143,21 @@ test('inset', async () => {
 
     .inset-full {
       inset: 100%;
-    }
-
-    .inset-shadowned {
-      inset: var(--inset-shadowned);
-    }
-
-    .inset-shadow-sm {
-      --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, #0000000d);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    @property --tw-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-
-    @property --tw-shadow-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-shadow-alpha {
-      syntax: "<percentage>";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-inset-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-
-    @property --tw-inset-shadow-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-inset-shadow-alpha {
-      syntax: "<percentage>";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-ring-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-ring-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-
-    @property --tw-inset-ring-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-inset-ring-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-
-    @property --tw-ring-inset {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-ring-offset-width {
-      syntax: "<length>";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-ring-offset-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: #fff;
-    }
-
-    @property --tw-ring-offset-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'inset',
-      'inset--1',
-      'inset--1/2',
-      'inset--1/-2',
-      'inset-1/-2',
-      'inset-auto/foo',
-      '-inset-full/foo',
-      'inset-full/foo',
-      'inset-3/4/foo',
-      'inset-4/foo',
-      '-inset-4/foo',
-      'inset-[4px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['inset'])).toEqual('')
 })
 
-test('inset-x', async () => {
+test('inset-x', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
       [
-        'inset-x-shadowned',
         'inset-x-auto',
         'inset-x-full',
         '-inset-x-full',
@@ -331,87 +166,60 @@ test('inset-x', async () => {
         '-inset-x-4',
         'inset-x-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
     .-inset-x-4 {
-      inset-inline: calc(var(--spacing-4) * -1);
+      right: calc(var(--spacing-4, 1rem) * -1);
+      left: calc(var(--spacing-4, 1rem) * -1);
     }
 
     .-inset-x-full {
-      inset-inline: -100%;
+      left: -100%;
+      right: -100%;
     }
 
     .inset-x-3\\/4 {
-      inset-inline: 75%;
+      left: 75%;
+      right: 75%;
     }
 
     .inset-x-4 {
-      inset-inline: var(--spacing-4);
+      right: var(--spacing-4, 1rem);
+      left: var(--spacing-4, 1rem);
     }
 
     .inset-x-\\[4px\\] {
-      inset-inline: 4px;
+      left: 4px;
+      right: 4px;
     }
 
     .inset-x-auto {
-      inset-inline: auto;
+      left: auto;
+      right: auto;
     }
 
     .inset-x-full {
-      inset-inline: 100%;
-    }
-
-    .inset-x-shadowned {
-      inset-inline: var(--inset-shadowned);
-    }
-    "
+      left: 100%;
+      right: 100%;
+    }"
   `)
+  expect(run(['inset-x'])).toEqual('')
+})
+
+test('inset-y', () => {
   expect(
-    await run(
-      [
-        'inset-x-shadow-sm',
-        'inset-x',
-        'inset-x--1',
-        'inset-x--1/2',
-        'inset-x--1/-2',
-        'inset-x-1/-2',
-        'inset-x-auto/foo',
-        'inset-x-full/foo',
-        '-inset-x-full/foo',
-        'inset-x-3/4/foo',
-        'inset-x-4/foo',
-        '-inset-x-4/foo',
-        'inset-x-[4px]/foo',
-      ],
+    compileCss(
       css`
-        @theme reference {
+        @theme {
           --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px #0000000d;
         }
         @tailwind utilities;
       `,
-    ),
-  ).toEqual('')
-})
-
-test('inset-y', async () => {
-  expect(
-    await run(
       [
-        'inset-y-shadowned',
         'inset-y-auto',
         'inset-y-full',
         '-inset-y-full',
@@ -420,468 +228,171 @@ test('inset-y', async () => {
         '-inset-y-4',
         'inset-y-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
     .-inset-y-4 {
-      inset-block: calc(var(--spacing-4) * -1);
+      top: calc(var(--spacing-4, 1rem) * -1);
+      bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
     .-inset-y-full {
-      inset-block: -100%;
+      top: -100%;
+      bottom: -100%;
     }
 
     .inset-y-3\\/4 {
-      inset-block: 75%;
+      top: 75%;
+      bottom: 75%;
     }
 
     .inset-y-4 {
-      inset-block: var(--spacing-4);
+      top: var(--spacing-4, 1rem);
+      bottom: var(--spacing-4, 1rem);
     }
 
     .inset-y-\\[4px\\] {
-      inset-block: 4px;
+      top: 4px;
+      bottom: 4px;
     }
 
     .inset-y-auto {
-      inset-block: auto;
+      top: auto;
+      bottom: auto;
     }
 
     .inset-y-full {
-      inset-block: 100%;
-    }
-
-    .inset-y-shadowned {
-      inset-block: var(--inset-shadowned);
-    }
-    "
+      top: 100%;
+      bottom: 100%;
+    }"
   `)
-  expect(
-    await run(
-      [
-        'inset-y-shadow-sm',
-        'inset-y',
-        'inset-y--1',
-        'inset-y--1/2',
-        'inset-y--1/-2',
-        'inset-1/-2',
-        'inset-y-auto/foo',
-        'inset-y-full/foo',
-        '-inset-y-full/foo',
-        'inset-y-3/4/foo',
-        'inset-y-4/foo',
-        '-inset-y-4/foo',
-        'inset-y-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
+  expect(run(['inset-y'])).toEqual('')
 })
 
-test('inset-s', async () => {
+test('start', () => {
   expect(
-    await run(
-      [
-        'inset-s-shadowned',
-        'inset-s-auto',
-        '-inset-s-full',
-        'inset-s-full',
-        'inset-s-3/4',
-        'inset-s-4',
-        '-inset-s-4',
-        'inset-s-[4px]',
-      ],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
         }
         @tailwind utilities;
       `,
+      [
+        'start-auto',
+        '-start-full',
+        'start-full',
+        'start-3/4',
+        'start-4',
+        '-start-4',
+        'start-[4px]',
+      ],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
-    .-inset-s-4 {
-      inset-inline-start: calc(var(--spacing-4) * -1);
+    .-start-4 {
+      inset-inline-start: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-inset-s-full {
+    .-start-full {
       inset-inline-start: -100%;
     }
 
-    .inset-s-3\\/4 {
+    .start-3\\/4 {
       inset-inline-start: 75%;
     }
 
-    .inset-s-4 {
-      inset-inline-start: var(--spacing-4);
+    .start-4 {
+      inset-inline-start: var(--spacing-4, 1rem);
     }
 
-    .inset-s-\\[4px\\] {
+    .start-\\[4px\\] {
       inset-inline-start: 4px;
     }
 
-    .inset-s-auto {
+    .start-auto {
       inset-inline-start: auto;
     }
 
-    .inset-s-full {
+    .start-full {
       inset-inline-start: 100%;
-    }
-
-    .inset-s-shadowned {
-      inset-inline-start: var(--inset-shadowned);
-    }
-    "
+    }"
   `)
-  expect(
-    await run(
-      [
-        'inset-s-shadow-sm',
-        'inset-s',
-        'inset-s--1',
-        'inset-s--1/2',
-        'inset-s--1/-2',
-        'inset-s-1/-2',
-        'inset-s-auto/foo',
-        '-inset-s-full/foo',
-        'inset-s-full/foo',
-        'inset-s-3/4/foo',
-        'inset-s-4/foo',
-        '-inset-s-4/foo',
-        'inset-s-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
+  expect(run(['start'])).toEqual('')
 })
 
-test('inset-e', async () => {
+test('end', () => {
   expect(
-    await run(
-      [
-        'inset-e-shadowned',
-        'inset-e-auto',
-        '-inset-e-full',
-        'inset-e-full',
-        'inset-e-3/4',
-        'inset-e-4',
-        '-inset-e-4',
-        'inset-e-[4px]',
-      ],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
         }
         @tailwind utilities;
       `,
+      ['end-auto', '-end-full', 'end-full', 'end-3/4', 'end-4', '-end-4', 'end-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
-    .-inset-e-4 {
-      inset-inline-end: calc(var(--spacing-4) * -1);
+    .-end-4 {
+      inset-inline-end: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-inset-e-full {
+    .-end-full {
       inset-inline-end: -100%;
     }
 
-    .inset-e-3\\/4 {
+    .end-3\\/4 {
       inset-inline-end: 75%;
     }
 
-    .inset-e-4 {
-      inset-inline-end: var(--spacing-4);
+    .end-4 {
+      inset-inline-end: var(--spacing-4, 1rem);
     }
 
-    .inset-e-\\[4px\\] {
+    .end-\\[4px\\] {
       inset-inline-end: 4px;
     }
 
-    .inset-e-auto {
+    .end-auto {
       inset-inline-end: auto;
     }
 
-    .inset-e-full {
+    .end-full {
       inset-inline-end: 100%;
-    }
-
-    .inset-e-shadowned {
-      inset-inline-end: var(--inset-shadowned);
-    }
-    "
+    }"
   `)
-  expect(
-    await run(
-      [
-        'inset-e-shadow-sm',
-        'inset-e',
-        'inset-e--1',
-        'inset-e--1/2',
-        'inset-e--1/-2',
-        'inset-e-1/-2',
-        'inset-e-auto/foo',
-        '-inset-e-full/foo',
-        'inset-e-full/foo',
-        'inset-e-3/4/foo',
-        'inset-e-4/foo',
-        '-inset-e-4/foo',
-        'inset-e-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
+  expect(run(['end'])).toEqual('')
 })
 
-test('inset-bs', async () => {
+test('top', () => {
   expect(
-    await run(
-      [
-        'inset-bs-shadowned',
-        'inset-bs-auto',
-        '-inset-bs-full',
-        'inset-bs-full',
-        'inset-bs-3/4',
-        'inset-bs-4',
-        '-inset-bs-4',
-        'inset-bs-[4px]',
-      ],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
         }
         @tailwind utilities;
       `,
+
+      ['top-auto', '-top-full', 'top-full', 'top-3/4', 'top-4', '-top-4', 'top-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
-    }
-
-    .-inset-bs-4 {
-      inset-block-start: calc(var(--spacing-4) * -1);
-    }
-
-    .-inset-bs-full {
-      inset-block-start: -100%;
-    }
-
-    .inset-bs-3\\/4 {
-      inset-block-start: 75%;
-    }
-
-    .inset-bs-4 {
-      inset-block-start: var(--spacing-4);
-    }
-
-    .inset-bs-\\[4px\\] {
-      inset-block-start: 4px;
-    }
-
-    .inset-bs-auto {
-      inset-block-start: auto;
-    }
-
-    .inset-bs-full {
-      inset-block-start: 100%;
-    }
-
-    .inset-bs-shadowned {
-      inset-block-start: var(--inset-shadowned);
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'inset-bs-shadow-sm',
-        'inset-bs',
-        'inset-bs--1',
-        'inset-bs--1/2',
-        'inset-bs--1/-2',
-        'inset-bs-1/-2',
-        'inset-bs-auto/foo',
-        '-inset-bs-full/foo',
-        'inset-bs-full/foo',
-        'inset-bs-3/4/foo',
-        'inset-bs-4/foo',
-        '-inset-bs-4/foo',
-        'inset-bs-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
-})
-
-test('inset-be', async () => {
-  expect(
-    await run(
-      [
-        'inset-be-shadowned',
-        'inset-be-auto',
-        '-inset-be-full',
-        'inset-be-full',
-        'inset-be-3/4',
-        'inset-be-4',
-        '-inset-be-4',
-        'inset-be-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
-    }
-
-    .-inset-be-4 {
-      inset-block-end: calc(var(--spacing-4) * -1);
-    }
-
-    .-inset-be-full {
-      inset-block-end: -100%;
-    }
-
-    .inset-be-3\\/4 {
-      inset-block-end: 75%;
-    }
-
-    .inset-be-4 {
-      inset-block-end: var(--spacing-4);
-    }
-
-    .inset-be-\\[4px\\] {
-      inset-block-end: 4px;
-    }
-
-    .inset-be-auto {
-      inset-block-end: auto;
-    }
-
-    .inset-be-full {
-      inset-block-end: 100%;
-    }
-
-    .inset-be-shadowned {
-      inset-block-end: var(--inset-shadowned);
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'inset-be-shadow-sm',
-        'inset-be',
-        'inset-be--1',
-        'inset-be--1/2',
-        'inset-be--1/-2',
-        'inset-be-1/-2',
-        'inset-be-auto/foo',
-        '-inset-be-full/foo',
-        'inset-be-full/foo',
-        'inset-be-3/4/foo',
-        'inset-be-4/foo',
-        '-inset-be-4/foo',
-        'inset-be-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
-})
-
-test('top', async () => {
-  expect(
-    await run(
-      [
-        'top-shadowned',
-        'top-auto',
-        '-top-full',
-        'top-full',
-        'top-3/4',
-        'top-4',
-        '-top-4',
-        'top-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
     .-top-4 {
-      top: calc(var(--spacing-4) * -1);
+      top: calc(var(--spacing-4, 1rem) * -1);
     }
 
     .-top-full {
@@ -893,7 +404,7 @@ test('top', async () => {
     }
 
     .top-4 {
-      top: var(--spacing-4);
+      top: var(--spacing-4, 1rem);
     }
 
     .top-\\[4px\\] {
@@ -906,46 +417,21 @@ test('top', async () => {
 
     .top-full {
       top: 100%;
-    }
-
-    .top-shadowned {
-      top: var(--inset-shadowned);
-    }
-    "
+    }"
   `)
+  expect(run(['top'])).toEqual('')
+})
+
+test('right', () => {
   expect(
-    await run(
-      [
-        'top-shadow-sm',
-        'top',
-        'top--1',
-        'top--1/2',
-        'top--1/-2',
-        'top-1/-2',
-        'top-auto/foo',
-        '-top-full/foo',
-        'top-full/foo',
-        'top-3/4/foo',
-        'top-4/foo',
-        '-top-4/foo',
-        'top-[4px]/foo',
-      ],
+    compileCss(
       css`
-        @theme reference {
+        @theme {
           --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
         }
         @tailwind utilities;
       `,
-    ),
-  ).toEqual('')
-})
-
-test('right', async () => {
-  expect(
-    await run(
       [
-        'right-shadowned',
         'right-auto',
         '-right-full',
         'right-full',
@@ -954,23 +440,14 @@ test('right', async () => {
         '-right-4',
         'right-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
     .-right-4 {
-      right: calc(var(--spacing-4) * -1);
+      right: calc(var(--spacing-4, 1rem) * -1);
     }
 
     .-right-full {
@@ -982,7 +459,7 @@ test('right', async () => {
     }
 
     .right-4 {
-      right: var(--spacing-4);
+      right: var(--spacing-4, 1rem);
     }
 
     .right-\\[4px\\] {
@@ -995,46 +472,21 @@ test('right', async () => {
 
     .right-full {
       right: 100%;
-    }
-
-    .right-shadowned {
-      right: var(--inset-shadowned);
-    }
-    "
+    }"
   `)
+  expect(run(['right'])).toEqual('')
+})
+
+test('bottom', () => {
   expect(
-    await run(
-      [
-        'right-shadow-sm',
-        'right',
-        'right--1',
-        'right--1/2',
-        'right--1/-2',
-        'right-1/-2',
-        'right-auto/foo',
-        '-right-full/foo',
-        'right-full/foo',
-        'right-3/4/foo',
-        'right-4/foo',
-        '-right-4/foo',
-        'right-[4px]/foo',
-      ],
+    compileCss(
       css`
-        @theme reference {
+        @theme {
           --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
         }
         @tailwind utilities;
       `,
-    ),
-  ).toEqual('')
-})
-
-test('bottom', async () => {
-  expect(
-    await run(
       [
-        'bottom-shadowned',
         'bottom-auto',
         '-bottom-full',
         'bottom-full',
@@ -1043,23 +495,14 @@ test('bottom', async () => {
         '-bottom-4',
         'bottom-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
     .-bottom-4 {
-      bottom: calc(var(--spacing-4) * -1);
+      bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
     .-bottom-full {
@@ -1071,7 +514,7 @@ test('bottom', async () => {
     }
 
     .bottom-4 {
-      bottom: var(--spacing-4);
+      bottom: var(--spacing-4, 1rem);
     }
 
     .bottom-\\[4px\\] {
@@ -1084,78 +527,29 @@ test('bottom', async () => {
 
     .bottom-full {
       bottom: 100%;
-    }
-
-    .bottom-shadowned {
-      bottom: var(--inset-shadowned);
-    }
-    "
+    }"
   `)
-  expect(
-    await run(
-      [
-        'bottom-shadow-sm',
-        'bottom',
-        'bottom--1',
-        'bottom--1/2',
-        'bottom--1/-2',
-        'bottom-1/-2',
-        'bottom-auto/foo',
-        '-bottom-full/foo',
-        'bottom-full/foo',
-        'bottom-3/4/foo',
-        'bottom-4/foo',
-        '-bottom-4/foo',
-        'bottom-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
+  expect(run(['bottom'])).toEqual('')
 })
 
-test('left', async () => {
+test('left', () => {
   expect(
-    await run(
-      [
-        'left-shadowned',
-        'left-auto',
-        '-left-full',
-        'left-full',
-        'left-3/4',
-        'left-4',
-        '-left-4',
-        'left-[4px]',
-
-        // https://github.com/tailwindlabs/tailwindcss/issues/20010
-        '-left-[(var(--my-var1)+var(--my-var2))]',
-      ],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
-          --inset-shadowned: 1940px;
         }
         @tailwind utilities;
       `,
+      ['left-auto', '-left-full', 'left-full', 'left-3/4', 'left-4', '-left-4', 'left-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --inset-shadowned: 1940px;
     }
 
     .-left-4 {
-      left: calc(var(--spacing-4) * -1);
-    }
-
-    .-left-\\[\\(var\\(--my-var1\\)\\+var\\(--my-var2\\)\\)\\] {
-      left: calc((var(--my-var1) + var(--my-var2)) * -1);
+      left: calc(var(--spacing-4, 1rem) * -1);
     }
 
     .-left-full {
@@ -1167,7 +561,7 @@ test('left', async () => {
     }
 
     .left-4 {
-      left: var(--spacing-4);
+      left: var(--spacing-4, 1rem);
     }
 
     .left-\\[4px\\] {
@@ -1180,139 +574,66 @@ test('left', async () => {
 
     .left-full {
       left: 100%;
-    }
-
-    .left-shadowned {
-      left: var(--inset-shadowned);
-    }
-    "
+    }"
   `)
-  expect(
-    await run(
-      [
-        'left-shadow-sm',
-        'left',
-        'left--1',
-        'left--1/2',
-        'left--1/-2',
-        'left-1/-2',
-        'left-auto/foo',
-        '-left-full/foo',
-        'left-full/foo',
-        'left-3/4/foo',
-        'left-4/foo',
-        '-left-4/foo',
-        'left-[4px]/foo',
-      ],
-      css`
-        @theme reference {
-          --spacing-4: 1rem;
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
+  expect(run(['left'])).toEqual('')
 })
 
-test('isolation', async () => {
-  expect(await run(['isolate', 'isolation-auto'])).toMatchInlineSnapshot(`
-    "
-    .isolate {
+test('isolation', () => {
+  expect(run(['isolate', 'isolation-auto'])).toMatchInlineSnapshot(`
+    ".isolate {
       isolation: isolate;
     }
 
     .isolation-auto {
       isolation: auto;
-    }
-    "
+    }"
   `)
-  expect(await run(['-isolate', '-isolation-auto', 'isolate/foo', 'isolation-auto/foo'])).toEqual(
-    '',
-  )
+  expect(run(['-isolate', '-isolation-auto'])).toEqual('')
 })
 
-test('z-index', async () => {
-  expect(await run(['z-auto', 'z-10', '-z-10', 'z-[123]', '-z-[var(--value)]']))
-    .toMatchInlineSnapshot(`
-      "
-      .-z-10 {
-        z-index: calc(10 * -1);
-      }
+test('z-index', () => {
+  expect(run(['z-auto', 'z-10', '-z-10', 'z-[123]', '-z-[--value]'])).toMatchInlineSnapshot(`
+    ".-z-10 {
+      z-index: calc(10 * -1);
+    }
 
-      .-z-\\[var\\(--value\\)\\] {
-        z-index: calc(var(--value) * -1);
-      }
+    .-z-\\[--value\\] {
+      z-index: calc(var(--value) * -1);
+    }
 
-      .z-10 {
-        z-index: 10;
-      }
+    .z-10 {
+      z-index: 10;
+    }
 
-      .z-\\[123\\] {
-        z-index: 123;
-      }
-
-      .z-auto {
-        z-index: auto;
-      }
-      "
-    `)
-  expect(
-    await run([
-      'z',
-      'z--1',
-      '-z-auto',
-      'z-unknown',
-      'z-123.5',
-      'z-auto/foo',
-      'z-10/foo',
-      '-z-10/foo',
-      'z-[123]/foo',
-      '-z-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['z-auto'],
-      css`
-        @theme {
-          --z-index-auto: 42;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --z-index-auto: 42;
+    .z-\\[123\\] {
+      z-index: 123;
     }
 
     .z-auto {
-      z-index: var(--z-index-auto);
-    }
-    "
+      z-index: auto;
+    }"
   `)
+  expect(run(['z', '-z-auto'])).toEqual('')
 })
 
-test('order', async () => {
+test('order', () => {
   expect(
-    await run([
+    run([
       'order-4',
       '-order-4',
       'order-[123]',
-      '-order-[var(--value)]',
+      '-order-[--value]',
       'order-first',
       'order-last',
       'order-none',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .-order-4 {
+    ".-order-4 {
       order: calc(4 * -1);
     }
 
-    .-order-\\[var\\(--value\\)\\] {
+    .-order-\\[--value\\] {
       order: calc(var(--value) * -1);
     }
 
@@ -1325,105 +646,32 @@ test('order', async () => {
     }
 
     .order-first {
-      order: -9999;
+      order: calc(-infinity);
     }
 
     .order-last {
-      order: 9999;
+      order: calc(infinity);
     }
 
     .order-none {
       order: 0;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'order',
-      'order--4',
-      '-order-first',
-      '-order-last',
-      '-order-none',
-      'order-unknown',
-      'order-123.5',
-      'order-4/foo',
-      '-order-4/foo',
-      'order-[123]/foo',
-      '-order-[var(--value)]/foo',
-      'order-first/foo',
-      'order-last/foo',
-      'order-none/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['order-first'],
-      css`
-        @theme {
-          --order-first: 1;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --order-first: 1;
-    }
-
-    .order-first {
-      order: var(--order-first);
-    }
-    "
-  `)
-
-  expect(
-    await run(
-      ['order-last'],
-      css`
-        @theme {
-          --order-last: -1;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --order-last: -1;
-    }
-
-    .order-last {
-      order: var(--order-last);
-    }
-    "
+    }"
   `)
+  expect(run(['order', '-order-first', '-order-last', '-order-none'])).toEqual('')
 })
 
-test('col', async () => {
+test('col', () => {
   expect(
-    await run([
-      'col-11',
-      '-col-12',
+    run([
       'col-auto',
       'col-span-4',
       'col-span-17',
       'col-span-full',
       'col-[span_123/span_123]',
-      'col-span-[var(--my-variable)]',
+      'col-span-[--my-variable]',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .-col-12 {
-      grid-column: calc(12 * -1);
-    }
-
-    .col-11 {
-      grid-column: 11;
-    }
-
-    .col-\\[span_123\\/span_123\\] {
+    ".col-\\[span_123\\/span_123\\] {
       grid-column: span 123 / span 123;
     }
 
@@ -1431,169 +679,50 @@ test('col', async () => {
       grid-column: auto;
     }
 
-    .col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
     .col-span-17 {
       grid-column: span 17 / span 17;
     }
 
-    .col-span-\\[var\\(--my-variable\\)\\] {
+    .col-span-4 {
+      grid-column: span 4 / span 4;
+    }
+
+    .col-span-\\[--my-variable\\] {
       grid-column: span var(--my-variable) / span var(--my-variable);
     }
 
     .col-span-full {
       grid-column: 1 / -1;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'col',
-      'col-span',
-      'col-span--1',
-      '-col-span-4',
-      'col-span-unknown',
-      'col-auto/foo',
-      'col-span-4/foo',
-      'col-span-17/foo',
-      'col-span-full/foo',
-      'col-[span_123/span_123]/foo',
-      'col-span-[var(--my-variable)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['col-auto'],
-      css`
-        @theme {
-          --grid-column-auto: 5;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-column-auto: 5;
-    }
-
-    .col-auto {
-      grid-column: var(--grid-column-auto);
-    }
-    "
+    }"
   `)
+  expect(run(['col', 'col-span', '-col-span-4'])).toEqual('')
 })
 
-test('col-start', async () => {
-  expect(
-    await run(
-      [
-        'col-start-auto',
-        'col-start-4',
-        'col-start-99',
-        'col-start-[123]',
-        '-col-start-4',
-        'col-start-custom',
-      ],
-      css`
-        @theme {
-          --grid-column-start-custom: 1 column-start;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-column-start-custom: 1 column-start;
-    }
+test('col-start', () => {
+  expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]']))
+    .toMatchInlineSnapshot(`
+      ".col-start-4 {
+        grid-column-start: 4;
+      }
 
-    .-col-start-4 {
-      grid-column-start: calc(4 * -1);
-    }
+      .col-start-99 {
+        grid-column-start: 99;
+      }
 
-    .col-start-4 {
-      grid-column-start: 4;
-    }
+      .col-start-\\[123\\] {
+        grid-column-start: 123;
+      }
 
-    .col-start-99 {
-      grid-column-start: 99;
-    }
-
-    .col-start-\\[123\\] {
-      grid-column-start: 123;
-    }
-
-    .col-start-auto {
-      grid-column-start: auto;
-    }
-
-    .col-start-custom {
-      grid-column-start: var(--grid-column-start-custom);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'col-start',
-      'col-start--1',
-      'col-start-unknown',
-      'col-start-auto/foo',
-      'col-start-4/foo',
-      'col-start-99/foo',
-      'col-start-[123]/foo',
-      '-col-start-4/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['col-start-auto'],
-      css`
-        @theme {
-          --grid-column-start-auto: 7;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-column-start-auto: 7;
-    }
-
-    .col-start-auto {
-      grid-column-start: var(--grid-column-start-auto);
-    }
-    "
-  `)
+      .col-start-auto {
+        grid-column-start: auto;
+      }"
+    `)
+  expect(run(['col-start', '-col-start-4'])).toEqual('')
 })
 
-test('col-end', async () => {
-  expect(
-    await run(
-      ['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4', 'col-end-custom'],
-      css`
-        @theme {
-          --grid-column-end-custom: 1 column-end;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-column-end-custom: 1 column-end;
-    }
-
-    .-col-end-4 {
-      grid-column-end: calc(4 * -1);
-    }
-
-    .col-end-4 {
+test('col-end', () => {
+  expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]'])).toMatchInlineSnapshot(`
+    ".col-end-4 {
       grid-column-end: 4;
     }
 
@@ -1607,72 +736,23 @@ test('col-end', async () => {
 
     .col-end-auto {
       grid-column-end: auto;
-    }
-
-    .col-end-custom {
-      grid-column-end: var(--grid-column-end-custom);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'col-end',
-      'col-end--1',
-      'col-end-unknown',
-      'col-end-auto/foo',
-      'col-end-4/foo',
-      'col-end-99/foo',
-      'col-end-[123]/foo',
-      '-col-end-4/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['col-end-auto'],
-      css`
-        @theme {
-          --grid-column-end-auto: 3;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-column-end-auto: 3;
-    }
-
-    .col-end-auto {
-      grid-column-end: var(--grid-column-end-auto);
-    }
-    "
+    }"
   `)
+  expect(run(['col-end', '-col-end-4'])).toEqual('')
 })
 
-test('row', async () => {
+test('row', () => {
   expect(
-    await run([
-      'row-11',
-      '-row-12',
+    run([
       'row-auto',
       'row-span-4',
       'row-span-17',
       'row-span-full',
       'row-[span_123/span_123]',
-      'row-span-[var(--my-variable)]',
+      'row-span-[--my-variable]',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .-row-12 {
-      grid-row: calc(12 * -1);
-    }
-
-    .row-11 {
-      grid-row: 11;
-    }
-
-    .row-\\[span_123\\/span_123\\] {
+    ".row-\\[span_123\\/span_123\\] {
       grid-row: span 123 / span 123;
     }
 
@@ -1680,176 +760,50 @@ test('row', async () => {
       grid-row: auto;
     }
 
-    .row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
     .row-span-17 {
       grid-row: span 17 / span 17;
     }
 
-    .row-span-\\[var\\(--my-variable\\)\\] {
+    .row-span-4 {
+      grid-row: span 4 / span 4;
+    }
+
+    .row-span-\\[--my-variable\\] {
       grid-row: span var(--my-variable) / span var(--my-variable);
     }
 
     .row-span-full {
       grid-row: 1 / -1;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'row',
-      'row-span',
-      'row-span--1',
-      '-row-span-4',
-      'row-span-unknown',
-      'row-auto/foo',
-      'row-span-4/foo',
-      'row-span-17/foo',
-      'row-span-full/foo',
-      'row-[span_123/span_123]/foo',
-      'row-span-[var(--my-variable)]/foo',
-
-      // Candidates matching Object.prototype properties should not crash or
-      // produce output (see: https://github.com/tailwindlabs/tailwindcss/issues/19721)
-      'row-constructor',
-      'row-hasOwnProperty',
-      'row-toString',
-      'row-valueOf',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['row-auto'],
-      css`
-        @theme {
-          --grid-row-auto: 9;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-row-auto: 9;
-    }
-
-    .row-auto {
-      grid-row: var(--grid-row-auto);
-    }
-    "
+    }"
   `)
+  expect(run(['row', 'row-span', '-row-span-4'])).toEqual('')
 })
 
-test('row-start', async () => {
-  expect(
-    await run(
-      [
-        'row-start-auto',
-        'row-start-4',
-        'row-start-99',
-        'row-start-[123]',
-        '-row-start-4',
-        'row-start-custom',
-      ],
-      css`
-        @theme {
-          --grid-row-start-custom: 1 row-start;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-row-start-custom: 1 row-start;
-    }
+test('row-start', () => {
+  expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]']))
+    .toMatchInlineSnapshot(`
+      ".row-start-4 {
+        grid-row-start: 4;
+      }
 
-    .-row-start-4 {
-      grid-row-start: calc(4 * -1);
-    }
+      .row-start-99 {
+        grid-row-start: 99;
+      }
 
-    .row-start-4 {
-      grid-row-start: 4;
-    }
+      .row-start-\\[123\\] {
+        grid-row-start: 123;
+      }
 
-    .row-start-99 {
-      grid-row-start: 99;
-    }
-
-    .row-start-\\[123\\] {
-      grid-row-start: 123;
-    }
-
-    .row-start-auto {
-      grid-row-start: auto;
-    }
-
-    .row-start-custom {
-      grid-row-start: var(--grid-row-start-custom);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'row-start',
-      'row-start--1',
-      'row-start-unknown',
-      'row-start-auto/foo',
-      'row-start-4/foo',
-      'row-start-99/foo',
-      'row-start-[123]/foo',
-      '-row-start-4/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['row-start-auto'],
-      css`
-        @theme {
-          --grid-row-start-auto: 11;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-row-start-auto: 11;
-    }
-
-    .row-start-auto {
-      grid-row-start: var(--grid-row-start-auto);
-    }
-    "
-  `)
+      .row-start-auto {
+        grid-row-start: auto;
+      }"
+    `)
+  expect(run(['row-start', '-row-start-4'])).toEqual('')
 })
 
-test('row-end', async () => {
-  expect(
-    await run(
-      ['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4', 'row-end-custom'],
-      css`
-        @theme {
-          --grid-row-end-custom: 1 row-end;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-row-end-custom: 1 row-end;
-    }
-
-    .-row-end-4 {
-      grid-row-end: calc(4 * -1);
-    }
-
-    .row-end-4 {
+test('row-end', () => {
+  expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]'])).toMatchInlineSnapshot(`
+    ".row-end-4 {
       grid-row-end: 4;
     }
 
@@ -1863,109 +817,48 @@ test('row-end', async () => {
 
     .row-end-auto {
       grid-row-end: auto;
-    }
-
-    .row-end-custom {
-      grid-row-end: var(--grid-row-end-custom);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'row-end',
-      'row-end--1',
-      'row-end-unknown',
-      'row-end-auto/foo',
-      'row-end-4/foo',
-      'row-end-99/foo',
-      'row-end-[123]/foo',
-      '-row-end-4/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['row-end-auto'],
-      css`
-        @theme {
-          --grid-row-end-auto: 13;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-row-end-auto: 13;
-    }
-
-    .row-end-auto {
-      grid-row-end: var(--grid-row-end-auto);
-    }
-    "
+    }"
   `)
+  expect(run(['row-end', '-row-end-4'])).toEqual('')
 })
 
-test('float', async () => {
-  expect(await run(['float-start', 'float-end', 'float-right', 'float-left', 'float-none']))
+test('float', () => {
+  expect(run(['float-start', 'float-end', 'float-right', 'float-left', 'float-none']))
     .toMatchInlineSnapshot(`
-      "
-      .float-end {
-        float: inline-end;
-      }
+    ".float-end {
+      float: end;
+    }
 
-      .float-left {
-        float: left;
-      }
+    .float-left {
+      float: left;
+    }
 
-      .float-none {
-        float: none;
-      }
+    .float-none {
+      float: none;
+    }
 
-      .float-right {
-        float: right;
-      }
+    .float-right {
+      float: right;
+    }
 
-      .float-start {
-        float: inline-start;
-      }
-      "
-    `)
+    .float-start {
+      float: start;
+    }"
+  `)
   expect(
-    await run([
-      'float',
-      '-float-start',
-      '-float-end',
-      '-float-right',
-      '-float-left',
-      '-float-none',
-      'float-start/foo',
-      'float-end/foo',
-      'float-right/foo',
-      'float-left/foo',
-      'float-none/foo',
-    ]),
+    run(['float', '-float-start', '-float-end', '-float-right', '-float-left', '-float-none']),
   ).toEqual('')
 })
 
-test('clear', async () => {
-  expect(
-    await run([
-      'clear-start',
-      'clear-end',
-      'clear-right',
-      'clear-left',
-      'clear-both',
-      'clear-none',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .clear-both {
+test('clear', () => {
+  expect(run(['clear-start', 'clear-end', 'clear-right', 'clear-left', 'clear-both', 'clear-none']))
+    .toMatchInlineSnapshot(`
+    ".clear-both {
       clear: both;
     }
 
     .clear-end {
-      clear: inline-end;
+      clear: end;
     }
 
     .clear-left {
@@ -1981,12 +874,11 @@ test('clear', async () => {
     }
 
     .clear-start {
-      clear: inline-start;
-    }
-    "
+      clear: start;
+    }"
   `)
   expect(
-    await run([
+    run([
       'clear',
       '-clear-start',
       '-clear-end',
@@ -1994,43 +886,36 @@ test('clear', async () => {
       '-clear-left',
       '-clear-both',
       '-clear-none',
-      'clear-start/foo',
-      'clear-end/foo',
-      'clear-right/foo',
-      'clear-left/foo',
-      'clear-both/foo',
-      'clear-none/foo',
     ]),
   ).toEqual('')
 })
 
-test('margin', async () => {
+test('margin', () => {
   expect(
-    await run(
-      ['m-auto', 'm-4', 'm-[4px]', '-m-4', '-m-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['m-auto', 'm-4', 'm-[4px]', '-m-4', '-m-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-m-4 {
-      margin: calc(var(--spacing-4) * -1);
+      margin: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-m-\\[var\\(--value\\)\\] {
+    .-m-\\[--value\\] {
       margin: calc(var(--value) * -1);
     }
 
     .m-4 {
-      margin: var(--spacing-4);
+      margin: var(--spacing-4, 1rem);
     }
 
     .m-\\[4px\\] {
@@ -2039,1059 +924,440 @@ test('margin', async () => {
 
     .m-auto {
       margin: auto;
-    }
-    "
+    }"
   `)
-  expect(
-    await run(['m', 'm-auto/foo', 'm-4/foo', 'm-[4px]/foo', '-m-4/foo', '-m-[var(--value)]/foo']),
-  ).toEqual('')
+  expect(run(['m'])).toEqual('')
 })
 
-test('mx', async () => {
+test('margin-x', () => {
   expect(
-    await run(
-      [
-        '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)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-mx-4 {
-      margin-inline: calc(var(--spacing) * -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) * -1);
-    }
-
-    .mx-1 {
-      margin-inline: var(--spacing);
-    }
-
-    .mx-4 {
-      margin-inline: calc(var(--spacing) * 4);
-    }
-
-    .mx-99 {
-      margin-inline: calc(var(--spacing) * 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);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mx',
-      'mx-auto/foo',
-      'mx-4/foo',
-      'mx-[4px]/foo',
-      '-mx-4/foo',
-      '-mx-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('my', async () => {
-  expect(
-    await run(
-      [
-        '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)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-my-2\\.5 {
-      margin-block: calc(var(--spacing) * -2.5);
-    }
-
-    .-my-4 {
-      margin-block: calc(var(--spacing) * -4);
-    }
-
-    .-my-\\[4px\\] {
-      margin-block: -4px;
-    }
-
-    .-my-\\[var\\(--my-var\\)\\] {
-      margin-block: calc(var(--my-var) * -1);
-    }
-
-    .-my-big {
-      margin-block: calc(var(--spacing-big) * -1);
-    }
-
-    .my-1 {
-      margin-block: var(--spacing);
-    }
-
-    .my-2\\.5 {
-      margin-block: calc(var(--spacing) * 2.5);
-    }
-
-    .my-99 {
-      margin-block: calc(var(--spacing) * 99);
-    }
-
-    .my-\\[4px\\] {
-      margin-block: 4px;
-    }
-
-    .my-\\[var\\(--my-var\\)\\] {
-      margin-block: var(--my-var);
-    }
-
-    .my-big {
-      margin-block: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'my',
-      'my-auto/foo',
-      'my-4/foo',
-      'my-[4px]/foo',
-      '-my-4/foo',
-      '-my-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mt', async () => {
-  expect(
-    await run(
-      [
-        '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)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-mt-2\\.5 {
-      margin-top: calc(var(--spacing) * -2.5);
-    }
-
-    .-mt-4 {
-      margin-top: calc(var(--spacing) * -4);
-    }
-
-    .-mt-\\[4px\\] {
-      margin-top: -4px;
-    }
-
-    .-mt-\\[var\\(--my-var\\)\\] {
-      margin-top: calc(var(--my-var) * -1);
-    }
-
-    .-mt-big {
-      margin-top: calc(var(--spacing-big) * -1);
-    }
-
-    .mt-1 {
-      margin-top: var(--spacing);
-    }
-
-    .mt-2\\.5 {
-      margin-top: calc(var(--spacing) * 2.5);
-    }
-
-    .mt-99 {
-      margin-top: calc(var(--spacing) * 99);
-    }
-
-    .mt-\\[4px\\] {
-      margin-top: 4px;
-    }
-
-    .mt-\\[var\\(--my-var\\)\\] {
-      margin-top: var(--my-var);
-    }
-
-    .mt-big {
-      margin-top: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mt',
-      'mt-auto/foo',
-      'mt-4/foo',
-      'mt-[4px]/foo',
-      '-mt-4/foo',
-      '-mt-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('ms', async () => {
-  expect(
-    await run(
-      [
-        '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)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-ms-2\\.5 {
-      margin-inline-start: calc(var(--spacing) * -2.5);
-    }
-
-    .-ms-4 {
-      margin-inline-start: calc(var(--spacing) * -4);
-    }
-
-    .-ms-\\[4px\\] {
-      margin-inline-start: -4px;
-    }
-
-    .-ms-\\[var\\(--my-var\\)\\] {
-      margin-inline-start: calc(var(--my-var) * -1);
-    }
-
-    .-ms-big {
-      margin-inline-start: calc(var(--spacing-big) * -1);
-    }
-
-    .ms-1 {
-      margin-inline-start: var(--spacing);
-    }
-
-    .ms-2\\.5 {
-      margin-inline-start: calc(var(--spacing) * 2.5);
-    }
-
-    .ms-99 {
-      margin-inline-start: calc(var(--spacing) * 99);
-    }
-
-    .ms-\\[4px\\] {
-      margin-inline-start: 4px;
-    }
-
-    .ms-\\[var\\(--my-var\\)\\] {
-      margin-inline-start: var(--my-var);
-    }
-
-    .ms-big {
-      margin-inline-start: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'ms',
-      'ms-auto/foo',
-      'ms-4/foo',
-      'ms-[4px]/foo',
-      '-ms-4/foo',
-      '-ms-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('me', async () => {
-  expect(
-    await run(
-      [
-        '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)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-me-2\\.5 {
-      margin-inline-end: calc(var(--spacing) * -2.5);
-    }
-
-    .-me-4 {
-      margin-inline-end: calc(var(--spacing) * -4);
-    }
-
-    .-me-\\[4px\\] {
-      margin-inline-end: -4px;
-    }
-
-    .-me-\\[var\\(--my-var\\)\\] {
-      margin-inline-end: calc(var(--my-var) * -1);
-    }
-
-    .-me-big {
-      margin-inline-end: calc(var(--spacing-big) * -1);
-    }
-
-    .me-1 {
-      margin-inline-end: var(--spacing);
-    }
-
-    .me-2\\.5 {
-      margin-inline-end: calc(var(--spacing) * 2.5);
-    }
-
-    .me-99 {
-      margin-inline-end: calc(var(--spacing) * 99);
-    }
-
-    .me-\\[4px\\] {
-      margin-inline-end: 4px;
-    }
-
-    .me-\\[var\\(--my-var\\)\\] {
-      margin-inline-end: var(--my-var);
-    }
-
-    .me-big {
-      margin-inline-end: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'me',
-      'me-auto/foo',
-      'me-4/foo',
-      'me-[4px]/foo',
-      '-me-4/foo',
-      '-me-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mbs', async () => {
-  expect(
-    await run(
-      [
-        'mbs-1',
-        'mbs-99',
-        'mbs-2.5',
-        'mbs-big',
-        'mbs-[4px]',
-        '-mbs-4',
-        '-mbs-2.5',
-        '-mbs-big',
-        '-mbs-[4px]',
-        'mbs-[var(--my-var)]',
-        '-mbs-[var(--my-var)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-mbs-2\\.5 {
-      margin-block-start: calc(var(--spacing) * -2.5);
-    }
-
-    .-mbs-4 {
-      margin-block-start: calc(var(--spacing) * -4);
-    }
-
-    .-mbs-\\[4px\\] {
-      margin-block-start: -4px;
-    }
-
-    .-mbs-\\[var\\(--my-var\\)\\] {
-      margin-block-start: calc(var(--my-var) * -1);
-    }
-
-    .-mbs-big {
-      margin-block-start: calc(var(--spacing-big) * -1);
-    }
-
-    .mbs-1 {
-      margin-block-start: var(--spacing);
-    }
-
-    .mbs-2\\.5 {
-      margin-block-start: calc(var(--spacing) * 2.5);
-    }
-
-    .mbs-99 {
-      margin-block-start: calc(var(--spacing) * 99);
-    }
-
-    .mbs-\\[4px\\] {
-      margin-block-start: 4px;
-    }
-
-    .mbs-\\[var\\(--my-var\\)\\] {
-      margin-block-start: var(--my-var);
-    }
-
-    .mbs-big {
-      margin-block-start: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mbs',
-      'mbs-auto/foo',
-      'mbs-4/foo',
-      'mbs-[4px]/foo',
-      '-mbs-4/foo',
-      '-mbs-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mbe', async () => {
-  expect(
-    await run(
-      [
-        'mbe-1',
-        'mbe-99',
-        'mbe-2.5',
-        'mbe-big',
-        'mbe-[4px]',
-        '-mbe-4',
-        '-mbe-2.5',
-        '-mbe-big',
-        '-mbe-[4px]',
-        'mbe-[var(--my-var)]',
-        '-mbe-[var(--my-var)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-mbe-2\\.5 {
-      margin-block-end: calc(var(--spacing) * -2.5);
-    }
-
-    .-mbe-4 {
-      margin-block-end: calc(var(--spacing) * -4);
-    }
-
-    .-mbe-\\[4px\\] {
-      margin-block-end: -4px;
-    }
-
-    .-mbe-\\[var\\(--my-var\\)\\] {
-      margin-block-end: calc(var(--my-var) * -1);
-    }
-
-    .-mbe-big {
-      margin-block-end: calc(var(--spacing-big) * -1);
-    }
-
-    .mbe-1 {
-      margin-block-end: var(--spacing);
-    }
-
-    .mbe-2\\.5 {
-      margin-block-end: calc(var(--spacing) * 2.5);
-    }
-
-    .mbe-99 {
-      margin-block-end: calc(var(--spacing) * 99);
-    }
-
-    .mbe-\\[4px\\] {
-      margin-block-end: 4px;
-    }
-
-    .mbe-\\[var\\(--my-var\\)\\] {
-      margin-block-end: var(--my-var);
-    }
-
-    .mbe-big {
-      margin-block-end: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mbe',
-      'mbe-auto/foo',
-      'mbe-4/foo',
-      'mbe-[4px]/foo',
-      '-mbe-4/foo',
-      '-mbe-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mr', async () => {
-  expect(
-    await run(
-      [
-        '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)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-mr-2\\.5 {
-      margin-right: calc(var(--spacing) * -2.5);
-    }
-
-    .-mr-4 {
-      margin-right: calc(var(--spacing) * -4);
-    }
-
-    .-mr-\\[4px\\] {
-      margin-right: -4px;
-    }
-
-    .-mr-\\[var\\(--my-var\\)\\] {
-      margin-right: calc(var(--my-var) * -1);
-    }
-
-    .-mr-big {
-      margin-right: calc(var(--spacing-big) * -1);
-    }
-
-    .mr-1 {
-      margin-right: var(--spacing);
-    }
-
-    .mr-2\\.5 {
-      margin-right: calc(var(--spacing) * 2.5);
-    }
-
-    .mr-99 {
-      margin-right: calc(var(--spacing) * 99);
-    }
-
-    .mr-\\[4px\\] {
-      margin-right: 4px;
-    }
-
-    .mr-\\[var\\(--my-var\\)\\] {
-      margin-right: var(--my-var);
-    }
-
-    .mr-big {
-      margin-right: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mr',
-      'mr-auto/foo',
-      'mr-4/foo',
-      'mr-[4px]/foo',
-      '-mr-4/foo',
-      '-mr-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mb', async () => {
-  expect(
-    await run(
-      [
-        '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)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-mb-2\\.5 {
-      margin-bottom: calc(var(--spacing) * -2.5);
-    }
-
-    .-mb-4 {
-      margin-bottom: calc(var(--spacing) * -4);
-    }
-
-    .-mb-\\[4px\\] {
-      margin-bottom: -4px;
-    }
-
-    .-mb-\\[var\\(--my-var\\)\\] {
-      margin-bottom: calc(var(--my-var) * -1);
-    }
-
-    .-mb-big {
-      margin-bottom: calc(var(--spacing-big) * -1);
-    }
-
-    .mb-1 {
-      margin-bottom: var(--spacing);
-    }
-
-    .mb-2\\.5 {
-      margin-bottom: calc(var(--spacing) * 2.5);
-    }
-
-    .mb-99 {
-      margin-bottom: calc(var(--spacing) * 99);
-    }
-
-    .mb-\\[4px\\] {
-      margin-bottom: 4px;
-    }
-
-    .mb-\\[var\\(--my-var\\)\\] {
-      margin-bottom: var(--my-var);
-    }
-
-    .mb-big {
-      margin-bottom: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mb',
-      'mb-auto/foo',
-      'mb-4/foo',
-      'mb-[4px]/foo',
-      '-mb-4/foo',
-      '-mb-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('ml', async () => {
-  expect(
-    await run(
-      [
-        '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)]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .-ml-2\\.5 {
-      margin-left: calc(var(--spacing) * -2.5);
-    }
-
-    .-ml-4 {
-      margin-left: calc(var(--spacing) * -4);
-    }
-
-    .-ml-\\[4px\\] {
-      margin-left: -4px;
-    }
-
-    .-ml-\\[var\\(--my-var\\)\\] {
-      margin-left: calc(var(--my-var) * -1);
-    }
-
-    .-ml-big {
-      margin-left: calc(var(--spacing-big) * -1);
-    }
-
-    .ml-1 {
-      margin-left: var(--spacing);
-    }
-
-    .ml-2\\.5 {
-      margin-left: calc(var(--spacing) * 2.5);
-    }
-
-    .ml-99 {
-      margin-left: calc(var(--spacing) * 99);
-    }
-
-    .ml-\\[4px\\] {
-      margin-left: 4px;
-    }
-
-    .ml-\\[var\\(--my-var\\)\\] {
-      margin-left: var(--my-var);
-    }
-
-    .ml-big {
-      margin-left: var(--spacing-big);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'ml',
-      'ml-auto/foo',
-      'ml-4/foo',
-      'ml-[4px]/foo',
-      '-ml-4/foo',
-      '-ml-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('margin sort order', async () => {
-  expect(
-    await run(
-      ['mb-4', 'me-4', 'mx-4', 'ml-4', 'ms-4', 'm-4', 'mr-4', 'mt-4', 'my-4'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['mx-auto', 'mx-4', 'mx-[4px]', '-mx-4', '-mx-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
+      --spacing-4: 1rem;
+    }
+
+    .-mx-4 {
+      margin-left: calc(var(--spacing-4, 1rem) * -1);
+      margin-right: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-mx-\\[--value\\] {
+      margin-left: calc(var(--value) * -1);
+      margin-right: calc(var(--value) * -1);
+    }
+
+    .mx-4 {
+      margin-left: var(--spacing-4, 1rem);
+      margin-right: var(--spacing-4, 1rem);
+    }
+
+    .mx-\\[4px\\] {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
+
+    .mx-auto {
+      margin-left: auto;
+      margin-right: auto;
+    }"
+  `)
+  expect(run(['mx'])).toEqual('')
+})
+
+test('margin-y', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
+      ['my-auto', 'my-4', 'my-[4px]', '-my-4', '-my-[--value]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --spacing-4: 1rem;
+    }
+
+    .-my-4 {
+      margin-top: calc(var(--spacing-4, 1rem) * -1);
+      margin-bottom: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-my-\\[--value\\] {
+      margin-top: calc(var(--value) * -1);
+      margin-bottom: calc(var(--value) * -1);
+    }
+
+    .my-4 {
+      margin-top: var(--spacing-4, 1rem);
+      margin-bottom: var(--spacing-4, 1rem);
+    }
+
+    .my-\\[4px\\] {
+      margin-top: 4px;
+      margin-bottom: 4px;
+    }
+
+    .my-auto {
+      margin-top: auto;
+      margin-bottom: auto;
+    }"
+  `)
+  expect(run(['my'])).toEqual('')
+})
+
+test('margin-top', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
+      ['mt-auto', 'mt-4', 'mt-[4px]', '-mt-4', '-mt-[--value]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --spacing-4: 1rem;
+    }
+
+    .-mt-4 {
+      margin-top: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-mt-\\[--value\\] {
+      margin-top: calc(var(--value) * -1);
+    }
+
+    .mt-4 {
+      margin-top: var(--spacing-4, 1rem);
+    }
+
+    .mt-\\[4px\\] {
+      margin-top: 4px;
+    }
+
+    .mt-auto {
+      margin-top: auto;
+    }"
+  `)
+  expect(run(['mt'])).toEqual('')
+})
+
+test('margin-inline-start', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
+      ['ms-auto', 'ms-4', 'ms-[4px]', '-ms-4', '-ms-[--value]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --spacing-4: 1rem;
+    }
+
+    .-ms-4 {
+      margin-inline-start: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-ms-\\[--value\\] {
+      margin-inline-start: calc(var(--value) * -1);
+    }
+
+    .ms-4 {
+      margin-inline-start: var(--spacing-4, 1rem);
+    }
+
+    .ms-\\[4px\\] {
+      margin-inline-start: 4px;
+    }
+
+    .ms-auto {
+      margin-inline-start: auto;
+    }"
+  `)
+  expect(run(['ms'])).toEqual('')
+})
+
+test('margin-inline-end', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
+      ['me-auto', 'me-4', 'me-[4px]', '-me-4', '-me-[--value]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --spacing-4: 1rem;
+    }
+
+    .-me-4 {
+      margin-inline-end: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-me-\\[--value\\] {
+      margin-inline-end: calc(var(--value) * -1);
+    }
+
+    .me-4 {
+      margin-inline-end: var(--spacing-4, 1rem);
+    }
+
+    .me-\\[4px\\] {
+      margin-inline-end: 4px;
+    }
+
+    .me-auto {
+      margin-inline-end: auto;
+    }"
+  `)
+  expect(run(['me'])).toEqual('')
+})
+
+test('margin-right', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
+      ['mr-auto', 'mr-4', 'mr-[4px]', '-mr-4', '-mr-[--value]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --spacing-4: 1rem;
+    }
+
+    .-mr-4 {
+      margin-right: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-mr-\\[--value\\] {
+      margin-right: calc(var(--value) * -1);
+    }
+
+    .mr-4 {
+      margin-right: var(--spacing-4, 1rem);
+    }
+
+    .mr-\\[4px\\] {
+      margin-right: 4px;
+    }
+
+    .mr-auto {
+      margin-right: auto;
+    }"
+  `)
+  expect(run(['mr'])).toEqual('')
+})
+
+test('margin-bottom', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
+      ['mb-auto', 'mb-4', 'mb-[4px]', '-mb-4', '-mb-[--value]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --spacing-4: 1rem;
+    }
+
+    .-mb-4 {
+      margin-bottom: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-mb-\\[--value\\] {
+      margin-bottom: calc(var(--value) * -1);
+    }
+
+    .mb-4 {
+      margin-bottom: var(--spacing-4, 1rem);
+    }
+
+    .mb-\\[4px\\] {
+      margin-bottom: 4px;
+    }
+
+    .mb-auto {
+      margin-bottom: auto;
+    }"
+  `)
+  expect(run(['mb'])).toEqual('')
+})
+
+test('margin-left', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
+      ['ml-auto', 'ml-4', 'ml-[4px]', '-ml-4', '-ml-[--value]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --spacing-4: 1rem;
+    }
+
+    .-ml-4 {
+      margin-left: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-ml-\\[--value\\] {
+      margin-left: calc(var(--value) * -1);
+    }
+
+    .ml-4 {
+      margin-left: var(--spacing-4, 1rem);
+    }
+
+    .ml-\\[4px\\] {
+      margin-left: 4px;
+    }
+
+    .ml-auto {
+      margin-left: auto;
+    }"
+  `)
+  expect(run(['ml'])).toEqual('')
+})
+
+test('margin sort order', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
+      ['mb-4', 'me-4', 'mx-4', 'ml-4', 'ms-4', 'm-4', 'mr-4', 'mt-4', 'my-4'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
       --spacing-4: 1rem;
     }
 
     .m-4 {
-      margin: var(--spacing-4);
+      margin: var(--spacing-4, 1rem);
     }
 
     .mx-4 {
-      margin-inline: var(--spacing-4);
+      margin-left: var(--spacing-4, 1rem);
+      margin-right: var(--spacing-4, 1rem);
     }
 
     .my-4 {
-      margin-block: var(--spacing-4);
+      margin-top: var(--spacing-4, 1rem);
+      margin-bottom: var(--spacing-4, 1rem);
     }
 
     .ms-4 {
-      margin-inline-start: var(--spacing-4);
+      margin-inline-start: var(--spacing-4, 1rem);
     }
 
     .me-4 {
-      margin-inline-end: var(--spacing-4);
+      margin-inline-end: var(--spacing-4, 1rem);
     }
 
     .mt-4 {
-      margin-top: var(--spacing-4);
+      margin-top: var(--spacing-4, 1rem);
     }
 
     .mr-4 {
-      margin-right: var(--spacing-4);
+      margin-right: var(--spacing-4, 1rem);
     }
 
     .mb-4 {
-      margin-bottom: var(--spacing-4);
+      margin-bottom: var(--spacing-4, 1rem);
     }
 
     .ml-4 {
-      margin-left: var(--spacing-4);
-    }
-    "
+      margin-left: var(--spacing-4, 1rem);
+    }"
   `)
-  expect(
-    await run([
-      'm',
-      'mb-4/foo',
-      'me-4/foo',
-      'mx-4/foo',
-      'ml-4/foo',
-      'ms-4/foo',
-      'm-4/foo',
-      'mr-4/foo',
-      'mt-4/foo',
-      'my-4/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['m'])).toEqual('')
 })
 
-test('box-sizing', async () => {
-  expect(await run(['box-border', 'box-content'])).toMatchInlineSnapshot(`
-    "
-    .box-border {
+test('box-sizing', () => {
+  expect(run(['box-border', 'box-content'])).toMatchInlineSnapshot(`
+    ".box-border {
       box-sizing: border-box;
     }
 
     .box-content {
       box-sizing: content-box;
-    }
-    "
+    }"
   `)
-  expect(
-    await run(['box', '-box-border', '-box-content', 'box-border/foo', 'box-content/foo']),
-  ).toEqual('')
+  expect(run(['box', '-box-border', '-box-content'])).toEqual('')
 })
 
-test('line-clamp', async () => {
-  expect(await run(['line-clamp-4', 'line-clamp-99', 'line-clamp-[123]', 'line-clamp-none']))
+test('line-clamp', () => {
+  expect(run(['line-clamp-4', 'line-clamp-99', 'line-clamp-[123]', 'line-clamp-none']))
     .toMatchInlineSnapshot(`
-      "
-      .line-clamp-4 {
+      ".line-clamp-4 {
+        overlow: hidden;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
         display: -webkit-box;
-        overflow: hidden;
       }
 
       .line-clamp-99 {
+        overlow: hidden;
         -webkit-line-clamp: 99;
         -webkit-box-orient: vertical;
         display: -webkit-box;
-        overflow: hidden;
       }
 
       .line-clamp-\\[123\\] {
+        overlow: hidden;
         -webkit-line-clamp: 123;
         -webkit-box-orient: vertical;
         display: -webkit-box;
-        overflow: hidden;
       }
 
       .line-clamp-none {
-        -webkit-line-clamp: unset;
-        -webkit-box-orient: horizontal;
+        overlow: visible;
+        -webkit-box-orient: horizonal;
+        -webkit-line-clamp: none;
         display: block;
-        overflow: visible;
-      }
-      "
+      }"
     `)
-  expect(
-    await run([
-      'line-clamp',
-      'line-clamp--4',
-      '-line-clamp-4',
-      '-line-clamp-[123]',
-      '-line-clamp-none',
-      'line-clamp-unknown',
-      'line-clamp-123.5',
-      'line-clamp-4/foo',
-      'line-clamp-99/foo',
-      'line-clamp-[123]/foo',
-      'line-clamp-none/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['line-clamp-none'],
-      css`
-        @theme {
-          --line-clamp-none: 0;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --line-clamp-none: 0;
-    }
-
-    .line-clamp-none {
-      -webkit-line-clamp: var(--line-clamp-none);
-      -webkit-box-orient: vertical;
-      display: -webkit-box;
-      overflow: hidden;
-    }
-    "
-  `)
+  expect(run(['line-clamp', '-line-clamp-4', '-line-clamp-[123]', '-line-clamp-none'])).toEqual('')
 })
 
-test('display', async () => {
+test('display', () => {
   expect(
-    await run([
+    run([
       'block',
       'inline-block',
       'inline',
@@ -3115,8 +1381,7 @@ test('display', async () => {
       'hidden',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .block {
+    ".block {
       display: block;
     }
 
@@ -3198,11 +1463,10 @@ test('display', async () => {
 
     .table-row-group {
       display: table-row-group;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       '-block',
       '-inline-block',
       '-inline',
@@ -3224,103 +1488,36 @@ test('display', async () => {
       '-contents',
       '-list-item',
       '-hidden',
-      'block/foo',
-      'inline-block/foo',
-      'inline/foo',
-      'flex/foo',
-      'inline-flex/foo',
-      'table/foo',
-      'inline-table/foo',
-      'table-caption/foo',
-      'table-cell/foo',
-      'table-column/foo',
-      'table-column-group/foo',
-      'table-footer-group/foo',
-      'table-header-group/foo',
-      'table-row-group/foo',
-      'table-row/foo',
-      'flow-root/foo',
-      'grid/foo',
-      'inline-grid/foo',
-      'contents/foo',
-      'list-item/foo',
-      'hidden/foo',
     ]),
   ).toEqual('')
 })
 
-test('field-sizing', async () => {
-  expect(await run(['field-sizing-content', 'field-sizing-fixed'])).toMatchInlineSnapshot(`
-    "
-    .field-sizing-content {
-      field-sizing: content;
-    }
-
-    .field-sizing-fixed {
-      field-sizing: fixed;
-    }
-    "
-  `)
-  expect(
-    await run(['field-sizing-[other]', '-field-sizing-content', '-field-sizing-fixed']),
-  ).toEqual('')
-})
-
-test('aspect-ratio', async () => {
-  expect(
-    await run(
-      ['aspect-video', 'aspect-[10/9]', 'aspect-4/3', 'aspect-8.5/11'],
-      css`
-        @theme {
-          --aspect-video: 16 / 9;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --aspect-video: 16 / 9;
-    }
-
-    .aspect-4\\/3 {
+test('aspect-ratio', () => {
+  expect(run(['aspect-video', 'aspect-[10/9]', 'aspect-4/3'])).toMatchInlineSnapshot(`
+    ".aspect-4\\/3 {
       aspect-ratio: 4 / 3;
     }
 
-    .aspect-8\\.5\\/11 {
-      aspect-ratio: 8.5 / 11;
-    }
-
     .aspect-\\[10\\/9\\] {
       aspect-ratio: 10 / 9;
     }
 
     .aspect-video {
-      aspect-ratio: var(--aspect-video);
-    }
-    "
+      aspect-ratio: 16 / 9;
+    }"
   `)
-  expect(
-    await run([
-      'aspect',
-      'aspect-potato',
-      '-aspect-video',
-      '-aspect-[10/9]',
-      'aspect-foo/bar',
-      'aspect-video/foo',
-      'aspect-[10/9]/foo',
-      'aspect-4/3/foo',
-      'aspect--4/3',
-      'aspect--4/-3',
-      'aspect-4/-3',
-      'aspect-1.23/4.56',
-    ]),
-  ).toEqual('')
+  expect(run(['aspect', 'aspect-potato', '-aspect-video', '-aspect-[10/9]'])).toEqual('')
 })
 
-test('size', async () => {
+test('size', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
       [
         'size-auto',
         'size-full',
@@ -3331,16 +1528,9 @@ test('size', async () => {
         'size-1/2',
         'size-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
@@ -3350,8 +1540,8 @@ test('size', async () => {
     }
 
     .size-4 {
-      width: var(--spacing-4);
-      height: var(--spacing-4);
+      width: var(--spacing-4, 1rem);
+      height: var(--spacing-4, 1rem);
     }
 
     .size-\\[4px\\] {
@@ -3382,34 +1572,21 @@ test('size', async () => {
     .size-min {
       width: min-content;
       height: min-content;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'size',
-      'size--1',
-      'size--1/2',
-      'size--1/-2',
-      'size-1/-2',
-      '-size-4',
-      '-size-1/2',
-      '-size-[4px]',
-      'size-auto/foo',
-      'size-full/foo',
-      'size-min/foo',
-      'size-max/foo',
-      'size-fit/foo',
-      'size-4/foo',
-      'size-1/2/foo',
-      'size-[4px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['size', '-size-4', '-size-1/2', '-size-[4px]'])).toEqual('')
 })
 
-test('width', async () => {
+test('width', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --width-xl: 36rem;
+        }
+        @tailwind utilities;
+      `,
       [
         'w-full',
         'w-auto',
@@ -3425,17 +1602,9 @@ test('width', async () => {
         'w-1/2',
         'w-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --width-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
       --width-xl: 36rem;
     }
@@ -3445,7 +1614,7 @@ test('width', async () => {
     }
 
     .w-4 {
-      width: var(--spacing-4);
+      width: var(--spacing-4, 1rem);
     }
 
     .w-\\[4px\\] {
@@ -3489,43 +1658,25 @@ test('width', async () => {
     }
 
     .w-xl {
-      width: var(--width-xl);
-    }
-    "
+      width: var(--width-xl, 36rem);
+    }"
   `)
-  expect(
-    await run([
-      'w',
-      'w--1',
-      'w--1/2',
-      'w--1/-2',
-      'w-1/-2',
-      '-w-4',
-      '-w-1/2',
-      '-w-[4px]',
-      'w-full/foo',
-      'w-auto/foo',
-      'w-screen/foo',
-      'w-svw/foo',
-      'w-lvw/foo',
-      'w-dvw/foo',
-      'w-min/foo',
-      'w-max/foo',
-      'w-fit/foo',
-      'w-4/foo',
-      'w-xl/foo',
-      'w-1/2/foo',
-      'w-[4px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['w', '-w-4', '-w-1/2', '-w-[4px]'])).toEqual('')
 })
 
-test('min-width', async () => {
+test('min-width', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+          --width-xl: 36rem;
+        }
+        @tailwind utilities;
+      `,
       [
-        'min-w-full',
         'min-w-auto',
+        'min-w-full',
         'min-w-min',
         'min-w-max',
         'min-w-fit',
@@ -3533,23 +1684,15 @@ test('min-width', async () => {
         'min-w-xl',
         'min-w-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --container-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --container-xl: 36rem;
+      --width-xl: 36rem;
     }
 
     .min-w-4 {
-      min-width: var(--spacing-4);
+      min-width: var(--spacing-4, 1rem);
     }
 
     .min-w-\\[4px\\] {
@@ -3577,48 +1720,41 @@ test('min-width', async () => {
     }
 
     .min-w-xl {
-      min-width: var(--container-xl);
-    }
-    "
+      min-width: var(--width-xl, 36rem);
+    }"
   `)
-  expect(
-    await run([
-      'min-w',
-      '-min-w-4',
-      '-min-w-[4px]',
-      'min-w-auto/foo',
-      'min-w-full/foo',
-      'min-w-min/foo',
-      'min-w-max/foo',
-      'min-w-fit/foo',
-      'min-w-4/foo',
-      'min-w-xl/foo',
-      'min-w-[4px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['min-w', '-min-w-4', '-min-w-[4px]'])).toEqual('')
 })
 
-test('max-width', async () => {
+test('max-width', () => {
   expect(
-    await run(
-      ['max-w-none', 'max-w-full', 'max-w-max', 'max-w-fit', 'max-w-4', 'max-w-xl', 'max-w-[4px]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
-          --container-xl: 36rem;
+          --width-xl: 36rem;
         }
         @tailwind utilities;
       `,
+      [
+        'max-w-none',
+        'max-w-full',
+        'max-w-max',
+        'max-w-max',
+        'max-w-fit',
+        'max-w-4',
+        'max-w-xl',
+        'max-w-[4px]',
+      ],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
-      --container-xl: 36rem;
+      --width-xl: 36rem;
     }
 
     .max-w-4 {
-      max-width: var(--spacing-4);
+      max-width: var(--spacing-4, 1rem);
     }
 
     .max-w-\\[4px\\] {
@@ -3642,31 +1778,21 @@ test('max-width', async () => {
     }
 
     .max-w-xl {
-      max-width: var(--container-xl);
-    }
-    "
+      max-width: var(--width-xl, 36rem);
+    }"
   `)
-  expect(
-    await run([
-      'max-w',
-      'max-w-auto',
-      '-max-w-4',
-      '-max-w-[4px]',
-      'max-w-none/foo',
-      'max-w-full/foo',
-      'max-w-max/foo',
-      'max-w-max/foo',
-      'max-w-fit/foo',
-      'max-w-4/foo',
-      'max-w-xl/foo',
-      'max-w-[4px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['max-w', '-max-w-4', '-max-w-[4px]'])).toEqual('')
 })
 
-test('height', async () => {
+test('height', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
       [
         'h-full',
         'h-auto',
@@ -3675,23 +1801,15 @@ test('height', async () => {
         'h-lvh',
         'h-dvh',
         'h-min',
-        'h-lh',
         'h-max',
         'h-fit',
         'h-4',
         'h-1/2',
         'h-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
@@ -3700,7 +1818,7 @@ test('height', async () => {
     }
 
     .h-4 {
-      height: var(--spacing-4);
+      height: var(--spacing-4, 1rem);
     }
 
     .h-\\[4px\\] {
@@ -3723,10 +1841,6 @@ test('height', async () => {
       height: 100%;
     }
 
-    .h-lh {
-      height: 1lh;
-    }
-
     .h-lvh {
       height: 100lvh;
     }
@@ -3745,68 +1859,41 @@ test('height', async () => {
 
     .h-svh {
       height: 100svh;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'h',
-      '-h-4',
-      'h--1',
-      'h--1/2',
-      'h--1/-2',
-      'h-1/-2',
-      '-h-1/2',
-      '-h-[4px]',
-      'h-full/foo',
-      'h-auto/foo',
-      'h-screen/foo',
-      'h-svh/foo',
-      'h-lvh/foo',
-      'h-dvh/foo',
-      'h-lh/foo',
-      'h-min/foo',
-      'h-max/foo',
-      'h-fit/foo',
-      'h-4/foo',
-      'h-1/2/foo',
-      'h-[4px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['h', '-h-4', '-h-1/2', '-h-[4px]'])).toEqual('')
 })
 
-test('min-height', async () => {
+test('min-height', () => {
   expect(
-    await run(
-      [
-        'min-h-full',
-        'min-h-auto',
-        'min-h-screen',
-        'min-h-svh',
-        'min-h-lvh',
-        'min-h-dvh',
-        'min-h-min',
-        'min-h-lh',
-        'min-h-max',
-        'min-h-fit',
-        'min-h-4',
-        'min-h-[4px]',
-      ],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      [
+        'min-h-auto',
+        'min-h-full',
+        'min-h-screen',
+        'min-h-svh',
+        'min-h-lvh',
+        'min-h-dvh',
+        'min-h-min',
+        'min-h-max',
+        'min-h-fit',
+        'min-h-4',
+        'min-h-[4px]',
+      ],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .min-h-4 {
-      min-height: var(--spacing-4);
+      min-height: var(--spacing-4, 1rem);
     }
 
     .min-h-\\[4px\\] {
@@ -3829,10 +1916,6 @@ test('min-height', async () => {
       min-height: 100%;
     }
 
-    .min-h-lh {
-      min-height: 1lh;
-    }
-
     .min-h-lvh {
       min-height: 100lvh;
     }
@@ -3851,33 +1934,20 @@ test('min-height', async () => {
 
     .min-h-svh {
       min-height: 100svh;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'min-h',
-      '-min-h-4',
-      '-min-h-[4px]',
-      'min-h-auto/foo',
-      'min-h-full/foo',
-      'min-h-screen/foo',
-      'min-h-svh/foo',
-      'min-h-lvh/foo',
-      'min-h-dvh/foo',
-      'min-h-lh/foo',
-      'min-h-min/foo',
-      'min-h-max/foo',
-      'min-h-fit/foo',
-      'min-h-4/foo',
-      'min-h-[4px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['min-h', '-min-h-4', '-min-h-[4px]'])).toEqual('')
 })
 
-test('max-height', async () => {
+test('max-height', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --spacing-4: 1rem;
+        }
+        @tailwind utilities;
+      `,
       [
         'max-h-none',
         'max-h-full',
@@ -3885,28 +1955,20 @@ test('max-height', async () => {
         'max-h-svh',
         'max-h-lvh',
         'max-h-dvh',
-        'max-h-lh',
         'max-h-min',
         'max-h-max',
         'max-h-fit',
         'max-h-4',
         'max-h-[4px]',
       ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .max-h-4 {
-      max-height: var(--spacing-4);
+      max-height: var(--spacing-4, 1rem);
     }
 
     .max-h-\\[4px\\] {
@@ -3925,10 +1987,6 @@ test('max-height', async () => {
       max-height: 100%;
     }
 
-    .max-h-lh {
-      max-height: 1lh;
-    }
-
     .max-h-lvh {
       max-height: 100lvh;
     }
@@ -3951,842 +2009,16 @@ test('max-height', async () => {
 
     .max-h-svh {
       max-height: 100svh;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'max-h',
-      'max-h-auto',
-      '-max-h-4',
-      '-max-h-[4px]',
-      'max-h-none/foo',
-      'max-h-full/foo',
-      'max-h-screen/foo',
-      'max-h-svh/foo',
-      'max-h-lvh/foo',
-      'max-h-dvh/foo',
-      'max-h-lh/foo',
-      'max-h-min/foo',
-      'max-h-max/foo',
-      'max-h-fit/foo',
-      'max-h-4/foo',
-      'max-h-[4px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['max-h', '-max-h-4', '-max-h-[4px]'])).toEqual('')
 })
 
-test('inline-size', async () => {
+test('flex', () => {
   expect(
-    await run(
-      [
-        'inline-full',
-        'inline-auto',
-        'inline-screen',
-        'inline-svw',
-        'inline-lvw',
-        'inline-dvw',
-        'inline-min',
-        'inline-max',
-        'inline-fit',
-        'inline-4',
-        'inline-xl',
-        'inline-1/2',
-        'inline-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --container-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
+    run(['flex-1', 'flex-99', 'flex-1/2', 'flex-auto', 'flex-initial', 'flex-none', 'flex-[123]']),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-      --container-xl: 36rem;
-    }
-
-    .inline-1\\/2 {
-      inline-size: 50%;
-    }
-
-    .inline-4 {
-      inline-size: var(--spacing-4);
-    }
-
-    .inline-\\[4px\\] {
-      inline-size: 4px;
-    }
-
-    .inline-auto {
-      inline-size: auto;
-    }
-
-    .inline-dvw {
-      inline-size: 100dvw;
-    }
-
-    .inline-fit {
-      inline-size: fit-content;
-    }
-
-    .inline-full {
-      inline-size: 100%;
-    }
-
-    .inline-lvw {
-      inline-size: 100lvw;
-    }
-
-    .inline-max {
-      inline-size: max-content;
-    }
-
-    .inline-min {
-      inline-size: min-content;
-    }
-
-    .inline-screen {
-      inline-size: 100vw;
-    }
-
-    .inline-svw {
-      inline-size: 100svw;
-    }
-
-    .inline-xl {
-      inline-size: var(--container-xl);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'inline--1',
-      'inline--1/2',
-      'inline--1/-2',
-      'inline-1/-2',
-      '-inline-4',
-      '-inline-1/2',
-      '-inline-[4px]',
-      'inline-full/foo',
-      'inline-auto/foo',
-      'inline-screen/foo',
-      'inline-svw/foo',
-      'inline-lvw/foo',
-      'inline-dvw/foo',
-      'inline-min/foo',
-      'inline-max/foo',
-      'inline-fit/foo',
-      'inline-4/foo',
-      'inline-xl/foo',
-      'inline-1/2/foo',
-      'inline-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('min-inline-size', async () => {
-  expect(
-    await run(
-      [
-        'min-inline-full',
-        'min-inline-auto',
-        'min-inline-min',
-        'min-inline-max',
-        'min-inline-fit',
-        'min-inline-4',
-        'min-inline-xl',
-        'min-inline-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --container-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-      --container-xl: 36rem;
-    }
-
-    .min-inline-4 {
-      min-inline-size: var(--spacing-4);
-    }
-
-    .min-inline-\\[4px\\] {
-      min-inline-size: 4px;
-    }
-
-    .min-inline-auto {
-      min-inline-size: auto;
-    }
-
-    .min-inline-fit {
-      min-inline-size: fit-content;
-    }
-
-    .min-inline-full {
-      min-inline-size: 100%;
-    }
-
-    .min-inline-max {
-      min-inline-size: max-content;
-    }
-
-    .min-inline-min {
-      min-inline-size: min-content;
-    }
-
-    .min-inline-xl {
-      min-inline-size: var(--container-xl);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'min-inline',
-      '-min-inline-4',
-      '-min-inline-[4px]',
-      'min-inline-auto/foo',
-      'min-inline-full/foo',
-      'min-inline-min/foo',
-      'min-inline-max/foo',
-      'min-inline-fit/foo',
-      'min-inline-4/foo',
-      'min-inline-xl/foo',
-      'min-inline-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('max-inline-size', async () => {
-  expect(
-    await run(
-      [
-        'max-inline-none',
-        'max-inline-full',
-        'max-inline-max',
-        'max-inline-fit',
-        'max-inline-4',
-        'max-inline-xl',
-        'max-inline-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-          --container-xl: 36rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-      --container-xl: 36rem;
-    }
-
-    .max-inline-4 {
-      max-inline-size: var(--spacing-4);
-    }
-
-    .max-inline-\\[4px\\] {
-      max-inline-size: 4px;
-    }
-
-    .max-inline-fit {
-      max-inline-size: fit-content;
-    }
-
-    .max-inline-full {
-      max-inline-size: 100%;
-    }
-
-    .max-inline-max {
-      max-inline-size: max-content;
-    }
-
-    .max-inline-none {
-      max-inline-size: none;
-    }
-
-    .max-inline-xl {
-      max-inline-size: var(--container-xl);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'max-inline',
-      'max-inline-auto',
-      '-max-inline-4',
-      '-max-inline-[4px]',
-      'max-inline-none/foo',
-      'max-inline-full/foo',
-      'max-inline-max/foo',
-      'max-inline-max/foo',
-      'max-inline-fit/foo',
-      'max-inline-4/foo',
-      'max-inline-xl/foo',
-      'max-inline-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('block-size', async () => {
-  expect(
-    await run(
-      [
-        'block-full',
-        'block-auto',
-        'block-screen',
-        'block-svh',
-        'block-lvh',
-        'block-dvh',
-        'block-min',
-        'block-lh',
-        'block-max',
-        'block-fit',
-        'block-4',
-        'block-1/2',
-        'block-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-    }
-
-    .block-1\\/2 {
-      block-size: 50%;
-    }
-
-    .block-4 {
-      block-size: var(--spacing-4);
-    }
-
-    .block-\\[4px\\] {
-      block-size: 4px;
-    }
-
-    .block-auto {
-      block-size: auto;
-    }
-
-    .block-dvh {
-      block-size: 100dvh;
-    }
-
-    .block-fit {
-      block-size: fit-content;
-    }
-
-    .block-full {
-      block-size: 100%;
-    }
-
-    .block-lh {
-      block-size: 1lh;
-    }
-
-    .block-lvh {
-      block-size: 100lvh;
-    }
-
-    .block-max {
-      block-size: max-content;
-    }
-
-    .block-min {
-      block-size: min-content;
-    }
-
-    .block-screen {
-      block-size: 100vh;
-    }
-
-    .block-svh {
-      block-size: 100svh;
-    }
-    "
-  `)
-  expect(
-    await run([
-      '-block-4',
-      'block--1',
-      'block--1/2',
-      'block--1/-2',
-      'block-1/-2',
-      '-block-1/2',
-      '-block-[4px]',
-      'block-full/foo',
-      'block-auto/foo',
-      'block-screen/foo',
-      'block-svh/foo',
-      'block-lvh/foo',
-      'block-dvh/foo',
-      'block-lh/foo',
-      'block-min/foo',
-      'block-max/foo',
-      'block-fit/foo',
-      'block-4/foo',
-      'block-1/2/foo',
-      'block-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('min-block-size', async () => {
-  expect(
-    await run(
-      [
-        'min-block-full',
-        'min-block-auto',
-        'min-block-screen',
-        'min-block-svh',
-        'min-block-lvh',
-        'min-block-dvh',
-        'min-block-min',
-        'min-block-lh',
-        'min-block-max',
-        'min-block-fit',
-        'min-block-4',
-        'min-block-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-    }
-
-    .min-block-4 {
-      min-block-size: var(--spacing-4);
-    }
-
-    .min-block-\\[4px\\] {
-      min-block-size: 4px;
-    }
-
-    .min-block-auto {
-      min-block-size: auto;
-    }
-
-    .min-block-dvh {
-      min-block-size: 100dvh;
-    }
-
-    .min-block-fit {
-      min-block-size: fit-content;
-    }
-
-    .min-block-full {
-      min-block-size: 100%;
-    }
-
-    .min-block-lh {
-      min-block-size: 1lh;
-    }
-
-    .min-block-lvh {
-      min-block-size: 100lvh;
-    }
-
-    .min-block-max {
-      min-block-size: max-content;
-    }
-
-    .min-block-min {
-      min-block-size: min-content;
-    }
-
-    .min-block-screen {
-      min-block-size: 100vh;
-    }
-
-    .min-block-svh {
-      min-block-size: 100svh;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'min-block',
-      '-min-block-4',
-      '-min-block-[4px]',
-      'min-block-auto/foo',
-      'min-block-full/foo',
-      'min-block-screen/foo',
-      'min-block-svh/foo',
-      'min-block-lvh/foo',
-      'min-block-dvh/foo',
-      'min-block-lh/foo',
-      'min-block-min/foo',
-      'min-block-max/foo',
-      'min-block-fit/foo',
-      'min-block-4/foo',
-      'min-block-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('max-block-size', async () => {
-  expect(
-    await run(
-      [
-        'max-block-none',
-        'max-block-full',
-        'max-block-screen',
-        'max-block-svh',
-        'max-block-lvh',
-        'max-block-dvh',
-        'max-block-lh',
-        'max-block-min',
-        'max-block-max',
-        'max-block-fit',
-        'max-block-4',
-        'max-block-[4px]',
-      ],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-    }
-
-    .max-block-4 {
-      max-block-size: var(--spacing-4);
-    }
-
-    .max-block-\\[4px\\] {
-      max-block-size: 4px;
-    }
-
-    .max-block-dvh {
-      max-block-size: 100dvh;
-    }
-
-    .max-block-fit {
-      max-block-size: fit-content;
-    }
-
-    .max-block-full {
-      max-block-size: 100%;
-    }
-
-    .max-block-lh {
-      max-block-size: 1lh;
-    }
-
-    .max-block-lvh {
-      max-block-size: 100lvh;
-    }
-
-    .max-block-max {
-      max-block-size: max-content;
-    }
-
-    .max-block-min {
-      max-block-size: min-content;
-    }
-
-    .max-block-none {
-      max-block-size: none;
-    }
-
-    .max-block-screen {
-      max-block-size: 100vh;
-    }
-
-    .max-block-svh {
-      max-block-size: 100svh;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'max-block',
-      'max-block-auto',
-      '-max-block-4',
-      '-max-block-[4px]',
-      'max-block-none/foo',
-      'max-block-full/foo',
-      'max-block-screen/foo',
-      'max-block-svh/foo',
-      'max-block-lvh/foo',
-      'max-block-dvh/foo',
-      'max-block-lh/foo',
-      'max-block-min/foo',
-      'max-block-max/foo',
-      'max-block-fit/foo',
-      'max-block-4/foo',
-      'max-block-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-describe('container', () => {
-  test('creates the right media queries and sorts it before width', async () => {
-    expect(
-      await run(
-        ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'],
-        css`
-          @theme {
-            --breakpoint-sm: 40rem;
-            --breakpoint-md: 48rem;
-            --breakpoint-lg: 64rem;
-            --breakpoint-xl: 80rem;
-            --breakpoint-2xl: 96rem;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --breakpoint-sm: 40rem;
-      }
-
-      .container {
-        width: 100%;
-      }
-
-      @media (min-width: 40rem) {
-        .container {
-          max-width: 40rem;
-        }
-      }
-
-      @media (min-width: 48rem) {
-        .container {
-          max-width: 48rem;
-        }
-      }
-
-      @media (min-width: 64rem) {
-        .container {
-          max-width: 64rem;
-        }
-      }
-
-      @media (min-width: 80rem) {
-        .container {
-          max-width: 80rem;
-        }
-      }
-
-      @media (min-width: 96rem) {
-        .container {
-          max-width: 96rem;
-        }
-      }
-
-      .w-1\\/2 {
-        width: 50%;
-      }
-
-      .max-w-\\[var\\(--breakpoint-sm\\)\\] {
-        max-width: var(--breakpoint-sm);
-      }
-      "
-    `)
-  })
-
-  test('sorts breakpoints based on unit and then in ascending aOrder', async () => {
-    expect(
-      await run(
-        ['container'],
-        css`
-          @theme reference {
-            --breakpoint-lg: 64rem;
-            --breakpoint-xl: 80rem;
-            --breakpoint-3xl: 1600px;
-            --breakpoint-sm: 40em;
-            --breakpoint-2xl: 96rem;
-            --breakpoint-xs: 30px;
-            --breakpoint-md: 48em;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .container {
-        width: 100%;
-      }
-
-      @media (min-width: 40em) {
-        .container {
-          max-width: 40em;
-        }
-      }
-
-      @media (min-width: 48em) {
-        .container {
-          max-width: 48em;
-        }
-      }
-
-      @media (min-width: 30px) {
-        .container {
-          max-width: 30px;
-        }
-      }
-
-      @media (min-width: 1600px) {
-        .container {
-          max-width: 1600px;
-        }
-      }
-
-      @media (min-width: 64rem) {
-        .container {
-          max-width: 64rem;
-        }
-      }
-
-      @media (min-width: 80rem) {
-        .container {
-          max-width: 80rem;
-        }
-      }
-
-      @media (min-width: 96rem) {
-        .container {
-          max-width: 96rem;
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom `@utility container` always follow the core utility ', async () => {
-    expect(
-      await run(
-        ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'],
-        css`
-          @theme {
-            --breakpoint-sm: 40rem;
-            --breakpoint-md: 48rem;
-            --breakpoint-lg: 64rem;
-            --breakpoint-xl: 80rem;
-            --breakpoint-2xl: 96rem;
-          }
-          @tailwind utilities;
-
-          @utility container {
-            margin-inline: auto;
-            padding-inline: 1rem;
-
-            @media (width >= theme(--breakpoint-sm)) {
-              padding-inline: 2rem;
-            }
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --breakpoint-sm: 40rem;
-      }
-
-      .container {
-        width: 100%;
-      }
-
-      @media (min-width: 40rem) {
-        .container {
-          max-width: 40rem;
-        }
-      }
-
-      @media (min-width: 48rem) {
-        .container {
-          max-width: 48rem;
-        }
-      }
-
-      @media (min-width: 64rem) {
-        .container {
-          max-width: 64rem;
-        }
-      }
-
-      @media (min-width: 80rem) {
-        .container {
-          max-width: 80rem;
-        }
-      }
-
-      @media (min-width: 96rem) {
-        .container {
-          max-width: 96rem;
-        }
-      }
-
-      .container {
-        margin-inline: auto;
-        padding-inline: 1rem;
-      }
-
-      @media (min-width: 40rem) {
-        .container {
-          padding-inline: 2rem;
-        }
-      }
-
-      .w-1\\/2 {
-        width: 50%;
-      }
-
-      .max-w-\\[var\\(--breakpoint-sm\\)\\] {
-        max-width: var(--breakpoint-sm);
-      }
-      "
-    `)
-  })
-})
-
-test('flex', async () => {
-  expect(
-    await run([
-      'flex-1',
-      'flex-99',
-      'flex-1/2',
-      'flex-auto',
-      'flex-initial',
-      'flex-none',
-      'flex-[123]',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .flex-1 {
+    ".flex-1 {
       flex: 1;
     }
 
@@ -4812,36 +2044,14 @@ test('flex', async () => {
 
     .flex-none {
       flex: none;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-flex-1',
-      'flex--1',
-      '-flex-auto',
-      '-flex-initial',
-      '-flex-none',
-      '-flex-[123]',
-      'flex-unknown',
-      'flex-1/foo',
-      'flex-99/foo',
-      'flex--1/2',
-      'flex--1/-2',
-      'flex-1/-2',
-      'flex-1/2/foo',
-      'flex-auto/foo',
-      'flex-initial/foo',
-      'flex-none/foo',
-      'flex-[123]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-flex-1', '-flex-auto', '-flex-initial', '-flex-none', '-flex-[123]'])).toEqual('')
 })
 
-test('flex-shrink', async () => {
-  expect(await run(['shrink', 'shrink-0', 'shrink-[123]'])).toMatchInlineSnapshot(`
-    "
-    .shrink {
+test('flex-shrink', () => {
+  expect(run(['shrink', 'shrink-0', 'shrink-[123]'])).toMatchInlineSnapshot(`
+    ".shrink {
       flex-shrink: 1;
     }
 
@@ -4851,28 +2061,14 @@ test('flex-shrink', async () => {
 
     .shrink-\\[123\\] {
       flex-shrink: 123;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-shrink',
-      'shrink--1',
-      'shrink-1.5',
-      '-shrink-0',
-      '-shrink-[123]',
-      'shrink-unknown',
-      'shrink/foo',
-      'shrink-0/foo',
-      'shrink-[123]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-shrink', '-shrink-0', '-shrink-[123]'])).toEqual('')
 })
 
-test('flex-grow', async () => {
-  expect(await run(['grow', 'grow-0', 'grow-[123]'])).toMatchInlineSnapshot(`
-    "
-    .grow {
+test('flex-grow', () => {
+  expect(run(['grow', 'grow-0', 'grow-[123]'])).toMatchInlineSnapshot(`
+    ".grow {
       flex-grow: 1;
     }
 
@@ -4882,39 +2078,25 @@ test('flex-grow', async () => {
 
     .grow-\\[123\\] {
       flex-grow: 123;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-grow',
-      'grow--1',
-      'grow-1.5',
-      '-grow-0',
-      '-grow-[123]',
-      'grow-unknown',
-      'grow/foo',
-      'grow-0/foo',
-      'grow-[123]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-grow', '-grow-0', '-grow-[123]'])).toEqual('')
 })
 
-test('flex-basis', async () => {
+test('flex-basis', () => {
   expect(
-    await run(
-      ['basis-auto', 'basis-full', 'basis-xl', 'basis-11/12', 'basis-[123px]'],
+    compileCss(
       css`
         @theme {
-          --container-xl: 36rem;
+          --width-xl: 36rem;
         }
         @tailwind utilities;
       `,
+      ['basis-auto', 'basis-full', 'basis-xl', 'basis-11/12', 'basis-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --container-xl: 36rem;
+    ":root {
+      --width-xl: 36rem;
     }
 
     .basis-11\\/12 {
@@ -4934,113 +2116,70 @@ test('flex-basis', async () => {
     }
 
     .basis-xl {
-      flex-basis: var(--container-xl);
-    }
-    "
+      flex-basis: var(--width-xl, 36rem);
+    }"
   `)
-  expect(
-    await run([
-      'basis',
-      'basis--1',
-      'basis--1/2',
-      'basis--1/-2',
-      'basis-1/-2',
-      '-basis-full',
-      '-basis-[123px]',
-      'basis-auto/foo',
-      'basis-full/foo',
-      'basis-xl/foo',
-      'basis-11/12/foo',
-      'basis-[123px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['basis', '-basis-full', '-basis-[123px]'])).toEqual('')
 })
 
-test('table-layout', async () => {
-  expect(await run(['table-auto', 'table-fixed'])).toMatchInlineSnapshot(`
-    "
-    .table-auto {
+test('table-layout', () => {
+  expect(run(['table-auto', 'table-fixed'])).toMatchInlineSnapshot(`
+    ".table-auto {
       table-layout: auto;
     }
 
     .table-fixed {
       table-layout: fixed;
-    }
-    "
+    }"
   `)
-  expect(await run(['-table-auto', '-table-fixed', 'table-auto/foo', 'table-fixed/foo'])).toEqual(
-    '',
-  )
+  expect(run(['-table-auto', '-table-fixed'])).toEqual('')
 })
 
-test('caption-side', async () => {
-  expect(await run(['caption-top', 'caption-bottom'])).toMatchInlineSnapshot(`
-    "
-    .caption-bottom {
+test('caption-side', () => {
+  expect(run(['caption-top', 'caption-bottom'])).toMatchInlineSnapshot(`
+    ".caption-bottom {
       caption-side: bottom;
     }
 
     .caption-top {
       caption-side: top;
-    }
-    "
+    }"
   `)
-  expect(
-    await run(['-caption-top', '-caption-bottom', 'caption-top/foo', 'caption-bottom/foo']),
-  ).toEqual('')
+  expect(run(['-caption-top', '-caption-bottom'])).toEqual('')
 })
 
-test('border-collapse', async () => {
-  expect(await run(['border-collapse', 'border-separate'])).toMatchInlineSnapshot(`
-    "
-    .border-collapse {
+test('border-collapse', () => {
+  expect(run(['border-collapse', 'border-separate'])).toMatchInlineSnapshot(`
+    ".border-collapse {
       border-collapse: collapse;
     }
 
     .border-separate {
       border-collapse: separate;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-border-collapse',
-      '-border-separate',
-      'border-collapse/foo',
-      'border-separate/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-border-collapse', '-border-separate'])).toEqual('')
 })
 
-test('border-spacing', async () => {
+test('border-spacing', () => {
   expect(
-    await run(
-      ['border-spacing-1', 'border-spacing-[123px]'],
+    compileCss(
       css`
         @theme {
           --spacing-1: 0.25rem;
         }
         @tailwind utilities;
       `,
+      ['border-spacing-1', 'border-spacing-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --spacing-1: .25rem;
     }
 
     .border-spacing-1 {
-      --tw-border-spacing-x: var(--spacing-1);
-      --tw-border-spacing-y: var(--spacing-1);
+      --tw-border-spacing-x: var(--spacing-1, .25rem);
+      --tw-border-spacing-y: var(--spacing-1, .25rem);
       border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
     }
 
@@ -5060,48 +2199,29 @@ test('border-spacing', async () => {
       syntax: "<length>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'border-spacing',
-      '-border-spacing-1',
-      '-border-spacing-[123px]',
-      'border-spacing-1/foo',
-      'border-spacing-[123px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['border-spacing', '-border-spacing-1', '-border-spacing-[123px]'])).toEqual('')
 })
 
-test('border-spacing-x', async () => {
+test('border-spacing-x', () => {
   expect(
-    await run(
-      ['border-spacing-x-1', 'border-spacing-x-[123px]'],
+    compileCss(
       css`
         @theme {
           --spacing-1: 0.25rem;
         }
         @tailwind utilities;
       `,
+      ['border-spacing-x-1', 'border-spacing-x-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --spacing-1: .25rem;
     }
 
     .border-spacing-x-1 {
-      --tw-border-spacing-x: var(--spacing-1);
+      --tw-border-spacing-x: var(--spacing-1, .25rem);
       border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
     }
 
@@ -5120,48 +2240,29 @@ test('border-spacing-x', async () => {
       syntax: "<length>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'border-spacing-x',
-      '-border-spacing-x-1',
-      '-border-spacing-x-[123px]',
-      'border-spacing-x-1/foo',
-      'border-spacing-x-[123px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['border-spacing-x', '-border-spacing-x-1', '-border-spacing-x-[123px]'])).toEqual('')
 })
 
-test('border-spacing-y', async () => {
+test('border-spacing-y', () => {
   expect(
-    await run(
-      ['border-spacing-y-1', 'border-spacing-y-[123px]'],
+    compileCss(
       css`
         @theme {
           --spacing-1: 0.25rem;
         }
         @tailwind utilities;
       `,
+      ['border-spacing-y-1', 'border-spacing-y-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --spacing-1: .25rem;
     }
 
     .border-spacing-y-1 {
-      --tw-border-spacing-y: var(--spacing-1);
+      --tw-border-spacing-y: var(--spacing-1, .25rem);
       border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
     }
 
@@ -5180,23 +2281,14 @@ test('border-spacing-y', async () => {
       syntax: "<length>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'border-spacing-x',
-      '-border-spacing-y-1',
-      '-border-spacing-y-[123px]',
-      'border-spacing-y-1/foo',
-      'border-spacing-y-[123px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['border-spacing-x', '-border-spacing-y-1', '-border-spacing-y-[123px]'])).toEqual('')
 })
 
-test('origin', async () => {
+test('origin', () => {
   expect(
-    await run([
+    run([
       'origin-center',
       'origin-top',
       'origin-top-right',
@@ -5207,16 +2299,15 @@ test('origin', async () => {
       'origin-left',
       'origin-top-left',
       'origin-[50px_100px]',
-      'origin-[var(--value)]',
+      'origin-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .origin-\\[50px_100px\\] {
-      transform-origin: 50px 100px;
+    ".origin-\\[--value\\] {
+      transform-origin: var(--value);
     }
 
-    .origin-\\[var\\(--value\\)\\] {
-      transform-origin: var(--value);
+    .origin-\\[50px_100px\\] {
+      transform-origin: 50px 100px;
     }
 
     .origin-bottom {
@@ -5253,176 +2344,22 @@ test('origin', async () => {
 
     .origin-top-right {
       transform-origin: 100% 0;
-    }
-    "
-  `)
-  expect(
-    await run([
-      '-origin-center',
-      '-origin-[var(--value)]',
-      'origin-center/foo',
-      'origin-top/foo',
-      'origin-top-right/foo',
-      'origin-right/foo',
-      'origin-bottom-right/foo',
-      'origin-bottom/foo',
-      'origin-bottom-left/foo',
-      'origin-left/foo',
-      'origin-top-left/foo',
-      'origin-[50px_100px]/foo',
-      'origin-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['origin-top'],
-      css`
-        @theme {
-          --transform-origin-top: 10px 20px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --transform-origin-top: 10px 20px;
-    }
-
-    .origin-top {
-      transform-origin: var(--transform-origin-top);
-    }
-    "
+    }"
   `)
+  expect(run(['-origin-center', '-origin-[--value]'])).toEqual('')
 })
 
-test('perspective-origin', async () => {
+test('translate', () => {
   expect(
-    await run([
-      'perspective-origin-center',
-      'perspective-origin-top',
-      'perspective-origin-top-right',
-      'perspective-origin-right',
-      'perspective-origin-bottom-right',
-      'perspective-origin-bottom',
-      'perspective-origin-bottom-left',
-      'perspective-origin-left',
-      'perspective-origin-top-left',
-      'perspective-origin-[50px_100px]',
-      'perspective-origin-[var(--value)]',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .perspective-origin-\\[50px_100px\\] {
-      perspective-origin: 50px 100px;
-    }
-
-    .perspective-origin-\\[var\\(--value\\)\\] {
-      perspective-origin: var(--value);
-    }
-
-    .perspective-origin-bottom {
-      perspective-origin: bottom;
-    }
-
-    .perspective-origin-bottom-left {
-      perspective-origin: 0 100%;
-    }
-
-    .perspective-origin-bottom-right {
-      perspective-origin: 100% 100%;
-    }
-
-    .perspective-origin-center {
-      perspective-origin: center;
-    }
-
-    .perspective-origin-left {
-      perspective-origin: 0;
-    }
-
-    .perspective-origin-right {
-      perspective-origin: 100%;
-    }
-
-    .perspective-origin-top {
-      perspective-origin: top;
-    }
-
-    .perspective-origin-top-left {
-      perspective-origin: 0 0;
-    }
-
-    .perspective-origin-top-right {
-      perspective-origin: 100% 0;
-    }
-    "
-  `)
-  expect(
-    await run([
-      '-perspective-origin-center',
-      '-perspective-origin-[var(--value)]',
-      'perspective-origin-center/foo',
-      'perspective-origin-top/foo',
-      'perspective-origin-top-right/foo',
-      'perspective-origin-right/foo',
-      'perspective-origin-bottom-right/foo',
-      'perspective-origin-bottom/foo',
-      'perspective-origin-bottom-left/foo',
-      'perspective-origin-left/foo',
-      'perspective-origin-top-left/foo',
-      'perspective-origin-[50px_100px]/foo',
-      'perspective-origin-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['perspective-origin-top'],
-      css`
-        @theme {
-          --perspective-origin-top: 10px 20px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --perspective-origin-top: 10px 20px;
-    }
-
-    .perspective-origin-top {
-      perspective-origin: var(--perspective-origin-top);
-      perspective: var(--perspective-origin-top);
-    }
-    "
-  `)
-})
-
-test('translate', async () => {
-  expect(
-    await run([
+    run([
       'translate-1/2',
       'translate-full',
       '-translate-full',
       'translate-[123px]',
-      '-translate-[var(--value)]',
+      '-translate-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
-    .-translate-\\[var\\(--value\\)\\] {
+    ".-translate-\\[--value\\] {
       --tw-translate-x: calc(var(--value) * -1);
       --tw-translate-y: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -5453,1097 +2390,240 @@ test('translate', async () => {
     }
 
     @property --tw-translate-x {
-      syntax: "*";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-y {
-      syntax: "*";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 0;
-    }
-
-    @property --tw-translate-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'translate',
-      'translate--1',
-      'translate--1/2',
-      'translate--1/-2',
-      'translate-1/-2',
-      'translate-1/2/foo',
-      'translate-full/foo',
-      '-translate-full/foo',
-      'translate-[123px]/foo',
-      '-translate-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['translate'])).toEqual('')
 })
 
-test('translate-x', async () => {
-  expect(
-    await run([
-      'translate-x-full',
-      '-translate-x-full',
-      'translate-x-px',
-      '-translate-x-[var(--value)]',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
-    .-translate-x-\\[var\\(--value\\)\\] {
-      --tw-translate-x: calc(var(--value) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .-translate-x-full {
-      --tw-translate-x: -100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .translate-x-full {
-      --tw-translate-x: 100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .translate-x-px {
-      --tw-translate-x: 1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    @property --tw-translate-x {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-translate-y {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-translate-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'translate-x',
-      'translate-x--1',
-      'translate-x--1/2',
-      'translate-x--1/-2',
-      'translate-x-1/-2',
-      'translate-x-full/foo',
-      '-translate-x-full/foo',
-      'translate-x-px/foo',
-      '-translate-x-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
-    .-translate-x-\\[var\\(--value\\)\\] {
-      --tw-translate-x: calc(var(--value) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .-translate-x-full {
-      --tw-translate-x: -100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .translate-x-full {
-      --tw-translate-x: 100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .translate-x-px {
-      --tw-translate-x: 1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    @property --tw-translate-x {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-translate-y {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-translate-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'perspective',
-      '-perspective',
-      'perspective-potato',
-      'perspective-123',
-      'perspective-normal/foo',
-      'perspective-dramatic/foo',
-      'perspective-none/foo',
-      'perspective-[456px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('translate-y', async () => {
-  expect(
-    await run([
-      'translate-y-full',
-      '-translate-y-full',
-      'translate-y-px',
-      '-translate-y-[var(--value)]',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
-    .-translate-y-\\[var\\(--value\\)\\] {
-      --tw-translate-y: calc(var(--value) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .-translate-y-full {
-      --tw-translate-y: -100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .translate-y-full {
-      --tw-translate-y: 100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .translate-y-px {
-      --tw-translate-y: 1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    @property --tw-translate-x {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-translate-y {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-translate-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'translate-y',
-      'translate-y--1',
-      'translate-y--1/2',
-      'translate-y--1/-2',
-      'translate-y-1/-2',
-      'translate-y-full/foo',
-      '-translate-y-full/foo',
-      'translate-y-px/foo',
-      '-translate-y-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
-    .-translate-y-\\[var\\(--value\\)\\] {
-      --tw-translate-y: calc(var(--value) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .-translate-y-full {
-      --tw-translate-y: -100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .translate-y-full {
-      --tw-translate-y: 100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    .translate-y-px {
-      --tw-translate-y: 1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-
-    @property --tw-translate-x {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-translate-y {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-translate-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'perspective',
-      '-perspective',
-      'perspective-potato',
-      'perspective-123',
-      'perspective-normal/foo',
-      'perspective-dramatic/foo',
-      'perspective-none/foo',
-      'perspective-[456px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('translate-z', async () => {
-  expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]']))
+test('translate-x', () => {
+  expect(run(['translate-x-full', '-translate-x-full', '-translate-x-[--value]']))
     .toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-translate-x: 0;
-            --tw-translate-y: 0;
-            --tw-translate-z: 0;
-          }
-        }
+      ".-translate-x-\\[--value\\] {
+        --tw-translate-x: calc(var(--value) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
       }
 
-      .-translate-z-\\[var\\(--value\\)\\] {
-        --tw-translate-z: calc(var(--value) * -1);
-        translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+      .-translate-x-full {
+        --tw-translate-x: -100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
       }
 
-      .-translate-z-px {
-        --tw-translate-z: -1px;
-        translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
-      }
-
-      .translate-z-px {
-        --tw-translate-z: 1px;
-        translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+      .translate-x-full {
+        --tw-translate-x: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
       }
 
       @property --tw-translate-x {
-        syntax: "*";
+        syntax: "<length-percentage>";
         inherits: false;
         initial-value: 0;
       }
 
       @property --tw-translate-y {
-        syntax: "*";
+        syntax: "<length-percentage>";
         inherits: false;
         initial-value: 0;
-      }
-
-      @property --tw-translate-z {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0;
-      }
-      "
+      }"
     `)
-  expect(
-    await run([
-      'translate-z',
-      'translate-z--1',
-      'translate-z--1/2',
-      'translate-z--1/-2',
-      'translate-z-1/-2',
-      'translate-z-full',
-      '-translate-z-full',
-      'translate-z-1/2',
-      'translate-y-px/foo',
-      '-translate-z-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['translate-x'])).toEqual('')
 })
 
-test('translate-3d', async () => {
-  expect(await run(['translate-3d'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
+test('translate-y', () => {
+  expect(run(['translate-y-full', '-translate-y-full', '-translate-y-[--value]']))
+    .toMatchInlineSnapshot(`
+      ".-translate-y-\\[--value\\] {
+        --tw-translate-y: calc(var(--value) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
       }
-    }
 
-    .translate-3d {
-      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
-    }
+      .-translate-y-full {
+        --tw-translate-y: -100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    @property --tw-translate-x {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
+      .translate-y-full {
+        --tw-translate-y: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    @property --tw-translate-y {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
+      @property --tw-translate-x {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }
 
-    @property --tw-translate-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
-    "
-  `)
-  expect(await run(['-translate-3d', 'translate-3d/foo'])).toEqual('')
+      @property --tw-translate-y {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }"
+    `)
+  expect(run(['translate-y'])).toEqual('')
 })
 
-test('rotate', async () => {
-  expect(
-    await run([
-      'rotate-45',
-      '-rotate-45',
-      'rotate-[123deg]',
-      'rotate-[0.3_0.7_1_45deg]',
-      'rotate-(--var)',
-      '-rotate-[123deg]',
-      '-rotate-(--var)',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .-rotate-\\(--var\\) {
-      rotate: calc(var(--var) * -1);
-    }
-
-    .-rotate-45 {
+test('rotate', () => {
+  expect(run(['rotate-45', '-rotate-45', 'rotate-[123deg]'])).toMatchInlineSnapshot(`
+    ".-rotate-45 {
       rotate: -45deg;
     }
 
-    .-rotate-\\[123deg\\] {
-      rotate: -123deg;
-    }
-
-    .rotate-\\(--var\\) {
-      rotate: var(--var);
-    }
-
     .rotate-45 {
       rotate: 45deg;
     }
 
-    .rotate-\\[0\\.3_0\\.7_1_45deg\\] {
-      rotate: .3 .7 1 45deg;
-    }
-
     .rotate-\\[123deg\\] {
       rotate: 123deg;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'rotate',
-      'rotate-z',
-      'rotate--2',
-      'rotate-unknown',
-      'rotate-45/foo',
-      '-rotate-45/foo',
-      'rotate-[123deg]/foo',
-      'rotate-[0.3_0.7_1_45deg]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['rotate'])).toEqual('')
 })
 
-test('rotate-x', async () => {
-  expect(
-    await run([
-      'rotate-x-45',
-      '-rotate-x-45',
-      'rotate-x-[123deg]',
-      'rotate-x-(--var)',
-      '-rotate-x-(--var)',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: initial;
-          --tw-rotate-y: initial;
-          --tw-rotate-z: initial;
-          --tw-skew-x: initial;
-          --tw-skew-y: initial;
-        }
-      }
-    }
-
-    .-rotate-x-\\(--var\\) {
-      --tw-rotate-x: rotateX(calc(var(--var) * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .-rotate-x-45 {
-      --tw-rotate-x: rotateX(calc(45deg * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-x-\\(--var\\) {
-      --tw-rotate-x: rotateX(var(--var));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-x-45 {
-      --tw-rotate-x: rotateX(45deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-x-\\[123deg\\] {
-      --tw-rotate-x: rotateX(123deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    @property --tw-rotate-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-y {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-z {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-skew-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-skew-y {
-      syntax: "*";
-      inherits: false
-    }
-    "
-  `)
-  expect(
-    await run([
-      'rotate-x',
-      'rotate-x--1',
-      '-rotate-x',
-      'rotate-x-potato',
-      'rotate-x-45/foo',
-      '-rotate-x-45/foo',
-      'rotate-x-[123deg]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('rotate-y', async () => {
-  expect(
-    await run([
-      'rotate-y-45',
-      'rotate-y-[123deg]',
-      'rotate-y-(--var)',
-      '-rotate-y-45',
-      '-rotate-y-[123deg]',
-      '-rotate-y-(--var)',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: initial;
-          --tw-rotate-y: initial;
-          --tw-rotate-z: initial;
-          --tw-skew-x: initial;
-          --tw-skew-y: initial;
-        }
-      }
-    }
-
-    .-rotate-y-\\(--var\\) {
-      --tw-rotate-y: rotateY(calc(var(--var) * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .-rotate-y-45 {
-      --tw-rotate-y: rotateY(calc(45deg * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .-rotate-y-\\[123deg\\] {
-      --tw-rotate-y: rotateY(calc(123deg * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-y-\\(--var\\) {
-      --tw-rotate-y: rotateY(var(--var));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-y-45 {
-      --tw-rotate-y: rotateY(45deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-y-\\[123deg\\] {
-      --tw-rotate-y: rotateY(123deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    @property --tw-rotate-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-y {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-z {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-skew-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-skew-y {
-      syntax: "*";
-      inherits: false
-    }
-    "
-  `)
-  expect(
-    await run([
-      'rotate-y',
-      'rotate-y--1',
-      '-rotate-y',
-      'rotate-y-potato',
-      'rotate-y-45/foo',
-      '-rotate-y-45/foo',
-      'rotate-y-[123deg]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('rotate-z', async () => {
-  expect(
-    await run([
-      'rotate-z-45',
-      'rotate-z-[123deg]',
-      'rotate-z-(--var)',
-      '-rotate-z-45',
-      '-rotate-z-[123deg]',
-      '-rotate-z-(--var)',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: initial;
-          --tw-rotate-y: initial;
-          --tw-rotate-z: initial;
-          --tw-skew-x: initial;
-          --tw-skew-y: initial;
-        }
-      }
-    }
-
-    .-rotate-z-\\(--var\\) {
-      --tw-rotate-z: rotateZ(calc(var(--var) * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .-rotate-z-45 {
-      --tw-rotate-z: rotateZ(calc(45deg * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .-rotate-z-\\[123deg\\] {
-      --tw-rotate-z: rotateZ(calc(123deg * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-z-\\(--var\\) {
-      --tw-rotate-z: rotateZ(var(--var));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-z-45 {
-      --tw-rotate-z: rotateZ(45deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .rotate-z-\\[123deg\\] {
-      --tw-rotate-z: rotateZ(123deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    @property --tw-rotate-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-y {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-z {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-skew-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-skew-y {
-      syntax: "*";
-      inherits: false
-    }
-    "
-  `)
-  expect(
-    await run([
-      'rotate-z',
-      'rotate-z--1',
-      '-rotate-z',
-      'rotate-z-potato',
-      'rotate-z-45/foo',
-      '-rotate-z-45/foo',
-      'rotate-z-[123deg]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('skew', async () => {
-  expect(await run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: initial;
-          --tw-rotate-y: initial;
-          --tw-rotate-z: initial;
-          --tw-skew-x: initial;
-          --tw-skew-y: initial;
-        }
-      }
-    }
-
-    .-skew-6 {
-      --tw-skew-x: skewX(calc(6deg * -1));
-      --tw-skew-y: skewY(calc(6deg * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+test('skew', () => {
+  expect(run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
+    ".-skew-6 {
+      --tw-skew-x: calc(6deg * -1);
+      --tw-skew-y: calc(6deg * -1);
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     .skew-6 {
-      --tw-skew-x: skewX(6deg);
-      --tw-skew-y: skewY(6deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+      --tw-skew-x: 6deg;
+      --tw-skew-y: 6deg;
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     .skew-\\[123deg\\] {
-      --tw-skew-x: skewX(123deg);
-      --tw-skew-y: skewY(123deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    @property --tw-rotate-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-y {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-z {
-      syntax: "*";
-      inherits: false
+      --tw-skew-x: 123deg;
+      --tw-skew-y: 123deg;
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     @property --tw-skew-x {
-      syntax: "*";
-      inherits: false
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
     }
 
     @property --tw-skew-y {
-      syntax: "*";
-      inherits: false
-    }
-    "
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
+    }"
   `)
-  expect(
-    await run([
-      'skew',
-      'skew--1',
-      'skew-unknown',
-      'skew-6/foo',
-      '-skew-6/foo',
-      'skew-[123deg]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['skew'])).toEqual('')
 })
 
-test('skew-x', async () => {
-  expect(await run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: initial;
-          --tw-rotate-y: initial;
-          --tw-rotate-z: initial;
-          --tw-skew-x: initial;
-          --tw-skew-y: initial;
-        }
-      }
-    }
-
-    .-skew-x-6 {
-      --tw-skew-x: skewX(calc(6deg * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+test('skew-x', () => {
+  expect(run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(`
+    ".-skew-x-6 {
+      --tw-skew-x: calc(6deg * -1);
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     .skew-x-6 {
-      --tw-skew-x: skewX(6deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+      --tw-skew-x: 6deg;
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     .skew-x-\\[123deg\\] {
-      --tw-skew-x: skewX(123deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    @property --tw-rotate-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-y {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-z {
-      syntax: "*";
-      inherits: false
+      --tw-skew-x: 123deg;
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     @property --tw-skew-x {
-      syntax: "*";
-      inherits: false
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
     }
 
     @property --tw-skew-y {
-      syntax: "*";
-      inherits: false
-    }
-    "
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
+    }"
   `)
-  expect(
-    await run([
-      'skew-x',
-      'skew-x--1',
-      'skew-x-unknown',
-      'skew-x-6/foo',
-      '-skew-x-6/foo',
-      'skew-x-[123deg]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['skew-x'])).toEqual('')
 })
 
-test('skew-y', async () => {
-  expect(await run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: initial;
-          --tw-rotate-y: initial;
-          --tw-rotate-z: initial;
-          --tw-skew-x: initial;
-          --tw-skew-y: initial;
-        }
-      }
-    }
-
-    .-skew-y-6 {
-      --tw-skew-y: skewY(calc(6deg * -1));
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+test('skew-y', () => {
+  expect(run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(`
+    ".-skew-y-6 {
+      --tw-skew-y: calc(6deg * -1);
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     .skew-y-6 {
-      --tw-skew-y: skewY(6deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+      --tw-skew-y: 6deg;
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     .skew-y-\\[123deg\\] {
-      --tw-skew-y: skewY(123deg);
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    @property --tw-rotate-x {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-y {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-rotate-z {
-      syntax: "*";
-      inherits: false
+      --tw-skew-y: 123deg;
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
     @property --tw-skew-x {
-      syntax: "*";
-      inherits: false
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
     }
 
     @property --tw-skew-y {
-      syntax: "*";
-      inherits: false
-    }
-    "
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
+    }"
   `)
-  expect(
-    await run([
-      'skew-y',
-      'skew-y--1',
-      'skew-y-unknown',
-      'skew-y-6/foo',
-      '-skew-y-6/foo',
-      'skew-y-[123deg]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['skew-y'])).toEqual('')
 })
 
-test('scale', async () => {
-  expect(await run(['scale-50', '-scale-50', 'scale-[2]', 'scale-[2_1.5_3]']))
-    .toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-scale-x: 1;
-            --tw-scale-y: 1;
-            --tw-scale-z: 1;
-          }
-        }
-      }
-
-      .-scale-50 {
-        --tw-scale-x: calc(50% * -1);
-        --tw-scale-y: calc(50% * -1);
-        --tw-scale-z: calc(50% * -1);
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-
-      .scale-50 {
-        --tw-scale-x: 50%;
-        --tw-scale-y: 50%;
-        --tw-scale-z: 50%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-
-      .scale-\\[2\\] {
-        scale: 2;
-      }
-
-      .scale-\\[2_1\\.5_3\\] {
-        scale: 2 1.5 3;
-      }
-
-      @property --tw-scale-x {
-        syntax: "*";
-        inherits: false;
-        initial-value: 1;
-      }
-
-      @property --tw-scale-y {
-        syntax: "*";
-        inherits: false;
-        initial-value: 1;
-      }
-
-      @property --tw-scale-z {
-        syntax: "*";
-        inherits: false;
-        initial-value: 1;
-      }
-      "
-    `)
-  expect(
-    await run([
-      'scale',
-      'scale--50',
-      'scale-1.5',
-      'scale-unknown',
-      'scale-50/foo',
-      '-scale-50/foo',
-      'scale-[2]/foo',
-      'scale-[2_1.5_3]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('scale-3d', async () => {
-  expect(await run(['scale-3d'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
-        }
-      }
+test('scale', () => {
+  expect(run(['scale-50', '-scale-50', 'scale-[123deg]'])).toMatchInlineSnapshot(`
+    ".-scale-50 {
+      --tw-scale-x: calc(50% * -1);
+      --tw-scale-y: calc(50% * -1);
+      scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    .scale-3d {
-      scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
+    .scale-50 {
+      --tw-scale-x: 50%;
+      --tw-scale-y: 50%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+
+    .scale-\\[123deg\\] {
+      --tw-scale-x: 123deg;
+      --tw-scale-y: 123deg;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
     @property --tw-scale-x {
-      syntax: "*";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "*";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
-    }
-
-    @property --tw-scale-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-    "
+    }"
   `)
-  expect(await run(['-scale-3d', 'scale-3d/foo'])).toEqual('')
+  expect(run(['scale'])).toEqual('')
 })
 
-test('scale-x', async () => {
-  expect(await run(['scale-x-50', '-scale-x-50', 'scale-x-[2]'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
-        }
-      }
-    }
-
-    .-scale-x-50 {
+test('scale-x', () => {
+  expect(run(['scale-x-50', '-scale-x-50', 'scale-x-[123deg]'])).toMatchInlineSnapshot(`
+    ".-scale-x-50 {
       --tw-scale-x: calc(50% * -1);
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
@@ -6553,102 +2633,29 @@ test('scale-x', async () => {
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    .scale-x-\\[2\\] {
-      --tw-scale-x: 2;
+    .scale-x-\\[123deg\\] {
+      --tw-scale-x: 123deg;
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
     @property --tw-scale-x {
-      syntax: "*";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "*";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
-    }
-
-    @property --tw-scale-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-    "
+    }"
   `)
-  expect(await run(['scale-200', 'scale-x-400'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
-        }
-      }
-    }
-
-    .scale-200 {
-      --tw-scale-x: 200%;
-      --tw-scale-y: 200%;
-      --tw-scale-z: 200%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-
-    .scale-x-400 {
-      --tw-scale-x: 400%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-
-    @property --tw-scale-x {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-
-    @property --tw-scale-y {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-
-    @property --tw-scale-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scale-x',
-      'scale-x--1',
-      'scale-x-1.5',
-      'scale-x-unknown',
-      'scale-200/foo',
-      'scale-x-400/foo',
-      'scale-x-50/foo',
-      '-scale-x-50/foo',
-      'scale-x-[2]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scale-x'])).toEqual('')
 })
 
-test('scale-y', async () => {
-  expect(await run(['scale-y-50', '-scale-y-50', 'scale-y-[2]'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
-        }
-      }
-    }
-
-    .-scale-y-50 {
+test('scale-y', () => {
+  expect(run(['scale-y-50', '-scale-y-50', 'scale-y-[123deg]'])).toMatchInlineSnapshot(`
+    ".-scale-y-50 {
       --tw-scale-y: calc(50% * -1);
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
@@ -6658,342 +2665,69 @@ test('scale-y', async () => {
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    .scale-y-\\[2\\] {
-      --tw-scale-y: 2;
+    .scale-y-\\[123deg\\] {
+      --tw-scale-y: 123deg;
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
     @property --tw-scale-x {
-      syntax: "*";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "*";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
-    }
-
-    @property --tw-scale-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scale-y',
-      'scale-y--1',
-      'scale-y-1.5',
-      'scale-y-unknown',
-      'scale-y-50/foo',
-      '-scale-y-50/foo',
-      'scale-y-[2]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scale-y'])).toEqual('')
 })
 
-test('scale-z', async () => {
-  expect(await run(['scale-z-50', '-scale-z-50', 'scale-z-[123deg]'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
-        }
-      }
-    }
-
-    .-scale-z-50 {
-      --tw-scale-z: calc(50% * -1);
-      scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
-    }
-
-    .scale-z-50 {
-      --tw-scale-z: 50%;
-      scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
-    }
-
-    .scale-z-\\[123deg\\] {
-      --tw-scale-z: 123deg;
-      scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
-    }
-
-    @property --tw-scale-x {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-
-    @property --tw-scale-y {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-
-    @property --tw-scale-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 1;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scale-z',
-      'scale-z--1',
-      'scale-z-1.5',
-      'scale-z-50/foo',
-      '-scale-z-50/foo',
-      'scale-z-[123deg]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('transform', async () => {
-  expect(
-    await run([
-      'transform',
-      'transform-cpu',
-      'transform-gpu',
-      'transform-none',
-      'transform-[scaleZ(2)_rotateY(45deg)]',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: initial;
-          --tw-rotate-y: initial;
-          --tw-rotate-z: initial;
-          --tw-skew-x: initial;
-          --tw-skew-y: initial;
-        }
-      }
-    }
-
-    .transform {
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .transform-\\[scaleZ\\(2\\)_rotateY\\(45deg\\)\\] {
-      transform: scaleZ(2) rotateY(45deg);
-    }
-
-    .transform-cpu {
-      transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .transform-gpu {
-      transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-    }
-
-    .transform-none {
+test('transform', () => {
+  expect(run(['transform', 'transform-cpu', 'transform-gpu', 'transform-none']))
+    .toMatchInlineSnapshot(`
+    ".transform-none {
       transform: none;
     }
 
-    @property --tw-rotate-x {
-      syntax: "*";
-      inherits: false
+    .transform {
+      transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
     }
 
-    @property --tw-rotate-y {
-      syntax: "*";
-      inherits: false
+    .transform-cpu {
+      transform: translate(0);
     }
 
-    @property --tw-rotate-z {
-      syntax: "*";
-      inherits: false
+    .transform-gpu {
+      transform: translate(0, 0, 0);
     }
 
     @property --tw-skew-x {
-      syntax: "*";
-      inherits: false
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
     }
 
     @property --tw-skew-y {
-      syntax: "*";
-      inherits: false
-    }
-    "
+      syntax: "<angle>";
+      inherits: false;
+      initial-value: 0deg;
+    }"
   `)
-  expect(
-    await run([
-      'transform-flat',
-      'transform-3d',
-      'transform-content',
-      'transform-border',
-      'transform-fill',
-      'transform-stroke',
-      'transform-view',
-      'backface-visible',
-      'backface-hidden',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .backface-hidden {
-      backface-visibility: hidden;
-    }
-
-    .backface-visible {
-      backface-visibility: visible;
-    }
-
-    .transform-3d {
-      transform-style: preserve-3d;
-    }
-
-    .transform-border {
-      transform-box: border-box;
-    }
-
-    .transform-content {
-      transform-box: content-box;
-    }
-
-    .transform-fill {
-      transform-box: fill-box;
-    }
-
-    .transform-flat {
-      transform-style: flat;
-    }
-
-    .transform-stroke {
-      transform-box: stroke-box;
-    }
-
-    .transform-view {
-      transform-box: view-box;
-    }
-    "
-  `)
-  expect(
-    await run([
-      '-transform',
-      '-transform-cpu',
-      '-transform-gpu',
-      '-transform-none',
-      'transform/foo',
-      'transform-cpu/foo',
-      'transform-gpu/foo',
-      'transform-none/foo',
-      'transform-[scaleZ(2)_rotateY(45deg)]/foo',
-      'transform-flat/foo',
-      'transform-3d/foo',
-      'transform-content/foo',
-      'transform-border/foo',
-      'transform-fill/foo',
-      'transform-stroke/foo',
-      'transform-view/foo',
-      'backface-visible/foo',
-      'backface-hidden/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-transform', '-transform-cpu', '-transform-gpu', '-transform-none'])).toEqual('')
 })
 
-test('zoom', async () => {
-  expect(await run(['zoom-50', 'zoom-100', 'zoom-[var(--zoom)]'])).toMatchInlineSnapshot(`
-    "
-    .zoom-50 {
-      zoom: 50%;
-    }
-
-    .zoom-100 {
-      zoom: 100%;
-    }
-
-    .zoom-\\[var\\(--zoom\\)\\] {
-      zoom: var(--zoom);
-    }
-    "
-  `)
+test('cursor', () => {
   expect(
-    await run(['zoom', '-zoom-50', 'zoom--50', 'zoom-1.5', 'zoom-unknown', 'zoom-50/foo']),
-  ).toEqual('')
-})
-
-test('perspective', async () => {
-  expect(
-    await run(
-      ['perspective-normal', 'perspective-dramatic', 'perspective-none', 'perspective-[456px]'],
+    compileCss(
       css`
         @theme {
-          --perspective-dramatic: 100px;
-          --perspective-normal: 500px;
+          --cursor-custom: url(/my-cursor.png);
         }
         @tailwind utilities;
       `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --perspective-dramatic: 100px;
-      --perspective-normal: 500px;
-    }
-
-    .perspective-\\[456px\\] {
-      perspective: 456px;
-    }
-
-    .perspective-dramatic {
-      perspective: var(--perspective-dramatic);
-    }
-
-    .perspective-none {
-      perspective: none;
-    }
-
-    .perspective-normal {
-      perspective: var(--perspective-normal);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'perspective',
-      '-perspective',
-      'perspective-potato',
-      'perspective-123',
-      'perspective-normal/foo',
-      'perspective-dramatic/foo',
-      'perspective-none/foo',
-      'perspective-[456px]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['perspective-none'],
-      css`
-        @theme {
-          --perspective-none: 400px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --perspective-none: 400px;
-    }
-
-    .perspective-none {
-      perspective: var(--perspective-none);
-    }
-    "
-  `)
-})
-
-test('cursor', async () => {
-  expect(
-    await run(
       [
         'cursor-auto',
         'cursor-default',
@@ -7031,23 +2765,16 @@ test('cursor', async () => {
         'cursor-nwse-resize',
         'cursor-zoom-in',
         'cursor-zoom-out',
-        'cursor-[var(--value)]',
+        'cursor-[--value]',
         'cursor-custom',
       ],
-      css`
-        @theme {
-          --cursor-custom: url(/my-cursor.png);
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --cursor-custom: url("/my-cursor.png");
     }
 
-    .cursor-\\[var\\(--value\\)\\] {
+    .cursor-\\[--value\\] {
       cursor: var(--value);
     }
 
@@ -7084,7 +2811,7 @@ test('cursor', async () => {
     }
 
     .cursor-custom {
-      cursor: var(--cursor-custom);
+      cursor: var(--cursor-custom, url("/my-cursor.png"));
     }
 
     .cursor-default {
@@ -7197,11 +2924,10 @@ test('cursor', async () => {
 
     .cursor-zoom-out {
       cursor: zoom-out;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'cursor',
       '-cursor-auto',
       '-cursor-default',
@@ -7239,54 +2965,15 @@ test('cursor', async () => {
       '-cursor-nwse-resize',
       '-cursor-zoom-in',
       '-cursor-zoom-out',
-      '-cursor-[var(--value)]',
+      '-cursor-[--value]',
       '-cursor-custom',
-      'cursor-auto/foo',
-      'cursor-default/foo',
-      'cursor-pointer/foo',
-      'cursor-wait/foo',
-      'cursor-text/foo',
-      'cursor-move/foo',
-      'cursor-help/foo',
-      'cursor-not-allowed/foo',
-      'cursor-none/foo',
-      'cursor-context-menu/foo',
-      'cursor-progress/foo',
-      'cursor-cell/foo',
-      'cursor-crosshair/foo',
-      'cursor-vertical-text/foo',
-      'cursor-alias/foo',
-      'cursor-copy/foo',
-      'cursor-no-drop/foo',
-      'cursor-grab/foo',
-      'cursor-grabbing/foo',
-      'cursor-all-scroll/foo',
-      'cursor-col-resize/foo',
-      'cursor-row-resize/foo',
-      'cursor-n-resize/foo',
-      'cursor-e-resize/foo',
-      'cursor-s-resize/foo',
-      'cursor-w-resize/foo',
-      'cursor-ne-resize/foo',
-      'cursor-nw-resize/foo',
-      'cursor-se-resize/foo',
-      'cursor-sw-resize/foo',
-      'cursor-ew-resize/foo',
-      'cursor-ns-resize/foo',
-      'cursor-nesw-resize/foo',
-      'cursor-nwse-resize/foo',
-      'cursor-zoom-in/foo',
-      'cursor-zoom-out/foo',
-      'cursor-[var(--value)]/foo',
-      'cursor-custom/foo',
     ]),
   ).toEqual('')
 })
 
-test('touch-action', async () => {
-  expect(await run(['touch-auto', 'touch-none', 'touch-manipulation'])).toMatchInlineSnapshot(`
-    "
-    .touch-auto {
+test('touch-action', () => {
+  expect(run(['touch-auto', 'touch-none', 'touch-manipulation'])).toMatchInlineSnapshot(`
+    ".touch-auto {
       touch-action: auto;
     }
 
@@ -7296,24 +2983,14 @@ test('touch-action', async () => {
 
     .touch-none {
       touch-action: none;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-touch-auto',
-      '-touch-none',
-      '-touch-manipulation',
-      'touch-auto/foo',
-      'touch-none/foo',
-      'touch-manipulation/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-touch-auto', '-touch-none', '-touch-manipulation'])).toEqual('')
 })
 
-test('touch-pan', async () => {
+test('touch-pan', () => {
   expect(
-    await run([
+    run([
       'touch-pan-x',
       'touch-pan-left',
       'touch-pan-right',
@@ -7322,15 +2999,9 @@ test('touch-pan', async () => {
       'touch-pan-down',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-pan-x: initial;
-          --tw-pan-y: initial;
-          --tw-pinch-zoom: initial;
-        }
-      }
+    ".touch-pan-down {
+      --tw-pan-y: pan-down;
+      touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
     }
 
     .touch-pan-left {
@@ -7343,21 +3014,16 @@ test('touch-pan', async () => {
       touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
     }
 
-    .touch-pan-x {
-      --tw-pan-x: pan-x;
-      touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
-    }
-
-    .touch-pan-down {
-      --tw-pan-y: pan-down;
-      touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
-    }
-
     .touch-pan-up {
       --tw-pan-y: pan-up;
       touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
     }
 
+    .touch-pan-x {
+      --tw-pan-x: pan-x;
+      touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
+    }
+
     .touch-pan-y {
       --tw-pan-y: pan-y;
       touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
@@ -7376,41 +3042,23 @@ test('touch-pan', async () => {
     @property --tw-pinch-zoom {
       syntax: "*";
       inherits: false
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       '-touch-pan-x',
       '-touch-pan-left',
       '-touch-pan-right',
       '-touch-pan-y',
       '-touch-pan-up',
       '-touch-pan-down',
-      'touch-pan-x/foo',
-      'touch-pan-left/foo',
-      'touch-pan-right/foo',
-      'touch-pan-y/foo',
-      'touch-pan-up/foo',
-      'touch-pan-down/foo',
     ]),
   ).toEqual('')
 })
 
-test('touch-pinch-zoom', async () => {
-  expect(await run(['touch-pinch-zoom'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-pan-x: initial;
-          --tw-pan-y: initial;
-          --tw-pinch-zoom: initial;
-        }
-      }
-    }
-
-    .touch-pinch-zoom {
+test('touch-pinch-zoom', () => {
+  expect(run(['touch-pinch-zoom'])).toMatchInlineSnapshot(`
+    ".touch-pinch-zoom {
       --tw-pinch-zoom: pinch-zoom;
       touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
     }
@@ -7428,55 +3076,39 @@ test('touch-pinch-zoom', async () => {
     @property --tw-pinch-zoom {
       syntax: "*";
       inherits: false
-    }
-    "
+    }"
   `)
-  expect(await run(['-touch-pinch-zoom', 'touch-pinch-zoom/foo'])).toEqual('')
+  expect(run(['-touch-pinch-zoom'])).toEqual('')
 })
 
-test('select', async () => {
-  expect(await run(['select-none', 'select-text', 'select-all', 'select-auto']))
-    .toMatchInlineSnapshot(`
-      "
-      .select-all {
-        -webkit-user-select: all;
-        user-select: all;
-      }
+test('select', () => {
+  expect(run(['select-none', 'select-text', 'select-all', 'select-auto'])).toMatchInlineSnapshot(`
+    ".select-all {
+      -webkit-user-select: all;
+      user-select: all;
+    }
 
-      .select-auto {
-        -webkit-user-select: auto;
-        user-select: auto;
-      }
+    .select-auto {
+      -webkit-user-select: auto;
+      user-select: auto;
+    }
 
-      .select-none {
-        -webkit-user-select: none;
-        user-select: none;
-      }
+    .select-none {
+      -webkit-user-select: none;
+      user-select: none;
+    }
 
-      .select-text {
-        -webkit-user-select: text;
-        user-select: text;
-      }
-      "
-    `)
-  expect(
-    await run([
-      '-select-none',
-      '-select-text',
-      '-select-all',
-      '-select-auto',
-      'select-none/foo',
-      'select-text/foo',
-      'select-all/foo',
-      'select-auto/foo',
-    ]),
-  ).toEqual('')
+    .select-text {
+      -webkit-user-select: text;
+      user-select: text;
+    }"
+  `)
+  expect(run(['-select-none', '-select-text', '-select-all', '-select-auto'])).toEqual('')
 })
 
-test('resize', async () => {
-  expect(await run(['resize-none', 'resize', 'resize-x', 'resize-y'])).toMatchInlineSnapshot(`
-    "
-    .resize {
+test('resize', () => {
+  expect(run(['resize-none', 'resize-both', 'resize-x', 'resize-y'])).toMatchInlineSnapshot(`
+    ".resize-both {
       resize: both;
     }
 
@@ -7490,35 +3122,14 @@ test('resize', async () => {
 
     .resize-y {
       resize: vertical;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-resize-none',
-      '-resize',
-      '-resize-x',
-      '-resize-y',
-      'resize-none/foo',
-      'resize/foo',
-      'resize-x/foo',
-      'resize-y/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-resize-none', '-resize-both', '-resize-x', '-resize-y'])).toEqual('')
 })
 
-test('scroll-snap-type', async () => {
-  expect(await run(['snap-none', 'snap-x', 'snap-y', 'snap-both'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scroll-snap-strictness: proximity;
-        }
-      }
-    }
-
-    .snap-both {
+test('scroll-snap-type', () => {
+  expect(run(['snap-none', 'snap-x', 'snap-y', 'snap-both'])).toMatchInlineSnapshot(`
+    ".snap-both {
       scroll-snap-type: both var(--tw-scroll-snap-strictness);
     }
 
@@ -7538,35 +3149,14 @@ test('scroll-snap-type', async () => {
       syntax: "*";
       inherits: false;
       initial-value: proximity;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-snap-none',
-      '-snap-x',
-      '-snap-y',
-      '-snap-both',
-      'snap-none/foo',
-      'snap-x/foo',
-      'snap-y/foo',
-      'snap-both/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-snap-none', '-snap-x', '-snap-y', '-snap-both'])).toEqual('')
 })
 
-test('--tw-scroll-snap-strictness', async () => {
-  expect(await run(['snap-mandatory', 'snap-proximity'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scroll-snap-strictness: proximity;
-        }
-      }
-    }
-
-    .snap-mandatory {
+test('--tw-scroll-snap-strictness', () => {
+  expect(run(['snap-mandatory', 'snap-proximity'])).toMatchInlineSnapshot(`
+    ".snap-mandatory {
       --tw-scroll-snap-strictness: mandatory;
     }
 
@@ -7578,1162 +3168,761 @@ test('--tw-scroll-snap-strictness', async () => {
       syntax: "*";
       inherits: false;
       initial-value: proximity;
-    }
-    "
+    }"
   `)
-  expect(
-    await run(['-snap-mandatory', '-snap-proximity', 'snap-mandatory/foo', 'snap-proximity/foo']),
-  ).toEqual('')
+  expect(run(['-snap-mandatory', '-snap-proximity'])).toEqual('')
 })
 
-test('scroll-snap-align', async () => {
-  expect(await run(['snap-align-none', 'snap-start', 'snap-end', 'snap-center']))
-    .toMatchInlineSnapshot(`
-      "
-      .snap-align-none {
-        scroll-snap-align: none;
-      }
+test('scroll-snap-align', () => {
+  expect(run(['snap-align-none', 'snap-start', 'snap-end', 'snap-center'])).toMatchInlineSnapshot(`
+    ".snap-align-none {
+      scroll-snap-align: none;
+    }
 
-      .snap-center {
-        scroll-snap-align: center;
-      }
+    .snap-center {
+      scroll-snap-align: center;
+    }
 
-      .snap-end {
-        scroll-snap-align: end;
-      }
+    .snap-end {
+      scroll-snap-align: end;
+    }
 
-      .snap-start {
-        scroll-snap-align: start;
-      }
-      "
-    `)
-  expect(
-    await run([
-      '-snap-align-none',
-      '-snap-start',
-      '-snap-end',
-      '-snap-center',
-      'snap-align-none/foo',
-      'snap-start/foo',
-      'snap-end/foo',
-      'snap-center/foo',
-    ]),
-  ).toEqual('')
+    .snap-start {
+      scroll-snap-align: start;
+    }"
+  `)
+  expect(run(['-snap-align-none', '-snap-start', '-snap-end', '-snap-center'])).toEqual('')
 })
 
-test('scroll-snap-stop', async () => {
-  expect(await run(['snap-normal', 'snap-always'])).toMatchInlineSnapshot(`
-    "
-    .snap-always {
+test('scroll-snap-stop', () => {
+  expect(run(['snap-normal', 'snap-always'])).toMatchInlineSnapshot(`
+    ".snap-always {
       scroll-snap-stop: always;
     }
 
     .snap-normal {
       scroll-snap-stop: normal;
-    }
-    "
+    }"
   `)
-  expect(await run(['-snap-normal', '-snap-always', 'snap-normal/foo', 'snap-always/foo'])).toEqual(
-    '',
-  )
+  expect(run(['-snap-normal', '-snap-always'])).toEqual('')
 })
 
-test('scroll-m', async () => {
+test('scroll-m', () => {
   expect(
-    await run(
-      ['scroll-m-4', 'scroll-m-[4px]', '-scroll-m-4', '-scroll-m-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-m-4', 'scroll-m-[4px]', '-scroll-m-4', '-scroll-m-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-m-4 {
-      scroll-margin: calc(var(--spacing-4) * -1);
+      scroll-margin: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-m-\\[var\\(--value\\)\\] {
+    .-scroll-m-\\[--value\\] {
       scroll-margin: calc(var(--value) * -1);
     }
 
     .scroll-m-4 {
-      scroll-margin: var(--spacing-4);
+      scroll-margin: var(--spacing-4, 1rem);
     }
 
     .scroll-m-\\[4px\\] {
       scroll-margin: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-m',
-      'scroll-m-4/foo',
-      'scroll-m-[4px]/foo',
-      '-scroll-m-4/foo',
-      '-scroll-m-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-m'])).toEqual('')
 })
 
-test('scroll-mx', async () => {
+test('scroll-mx', () => {
   expect(
-    await run(
-      ['scroll-mx-4', 'scroll-mx-[4px]', '-scroll-mx-4', '-scroll-mx-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-mx-4', 'scroll-mx-[4px]', '-scroll-mx-4', '-scroll-mx-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-mx-4 {
-      scroll-margin-inline: calc(var(--spacing-4) * -1);
+      scroll-margin-left: calc(var(--spacing-4, 1rem) * -1);
+      scroll-margin-right: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-mx-\\[var\\(--value\\)\\] {
-      scroll-margin-inline: calc(var(--value) * -1);
+    .-scroll-mx-\\[--value\\] {
+      scroll-margin-left: calc(var(--value) * -1);
+      scroll-margin-right: calc(var(--value) * -1);
     }
 
     .scroll-mx-4 {
-      scroll-margin-inline: var(--spacing-4);
+      scroll-margin-left: var(--spacing-4, 1rem);
+      scroll-margin-right: var(--spacing-4, 1rem);
     }
 
     .scroll-mx-\\[4px\\] {
-      scroll-margin-inline: 4px;
-    }
-    "
+      scroll-margin-left: 4px;
+      scroll-margin-right: 4px;
+    }"
   `)
-  expect(
-    await run([
-      'scroll-mx',
-      'scroll-mx-4/foo',
-      'scroll-mx-[4px]/foo',
-      '-scroll-mx-4/foo',
-      '-scroll-mx-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-mx'])).toEqual('')
 })
 
-test('scroll-my', async () => {
+test('scroll-my', () => {
   expect(
-    await run(
-      ['scroll-my-4', 'scroll-my-[4px]', '-scroll-my-4', '-scroll-my-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-my-4', 'scroll-my-[4px]', '-scroll-my-4', '-scroll-my-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-my-4 {
-      scroll-margin-block: calc(var(--spacing-4) * -1);
+      scroll-margin-top: calc(var(--spacing-4, 1rem) * -1);
+      scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-my-\\[var\\(--value\\)\\] {
-      scroll-margin-block: calc(var(--value) * -1);
+    .-scroll-my-\\[--value\\] {
+      scroll-margin-top: calc(var(--value) * -1);
+      scroll-margin-bottom: calc(var(--value) * -1);
     }
 
     .scroll-my-4 {
-      scroll-margin-block: var(--spacing-4);
+      scroll-margin-top: var(--spacing-4, 1rem);
+      scroll-margin-bottom: var(--spacing-4, 1rem);
     }
 
     .scroll-my-\\[4px\\] {
-      scroll-margin-block: 4px;
-    }
-    "
+      scroll-margin-top: 4px;
+      scroll-margin-bottom: 4px;
+    }"
   `)
-  expect(
-    await run([
-      'scroll-my',
-      'scroll-my-4/foo',
-      'scroll-my-[4px]/foo',
-      '-scroll-my-4/foo',
-      '-scroll-my-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-my'])).toEqual('')
 })
 
-test('scroll-ms', async () => {
+test('scroll-ms', () => {
   expect(
-    await run(
-      ['scroll-ms-4', 'scroll-ms-[4px]', '-scroll-ms-4', '-scroll-ms-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-ms-4', 'scroll-ms-[4px]', '-scroll-ms-4', '-scroll-ms-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-ms-4 {
-      scroll-margin-inline-start: calc(var(--spacing-4) * -1);
+      scroll-margin-inline-start: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-ms-\\[var\\(--value\\)\\] {
+    .-scroll-ms-\\[--value\\] {
       scroll-margin-inline-start: calc(var(--value) * -1);
     }
 
     .scroll-ms-4 {
-      scroll-margin-inline-start: var(--spacing-4);
+      scroll-margin-inline-start: var(--spacing-4, 1rem);
     }
 
     .scroll-ms-\\[4px\\] {
       scroll-margin-inline-start: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-ms',
-      'scroll-ms-4/foo',
-      'scroll-ms-[4px]/foo',
-      '-scroll-ms-4/foo',
-      '-scroll-ms-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-ms'])).toEqual('')
 })
 
-test('scroll-me', async () => {
+test('scroll-me', () => {
   expect(
-    await run(
-      ['scroll-me-4', 'scroll-me-[4px]', '-scroll-me-4', '-scroll-me-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-me-4', 'scroll-me-[4px]', '-scroll-me-4', '-scroll-me-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-me-4 {
-      scroll-margin-inline-end: calc(var(--spacing-4) * -1);
+      scroll-margin-inline-end: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-me-\\[var\\(--value\\)\\] {
+    .-scroll-me-\\[--value\\] {
       scroll-margin-inline-end: calc(var(--value) * -1);
     }
 
     .scroll-me-4 {
-      scroll-margin-inline-end: var(--spacing-4);
+      scroll-margin-inline-end: var(--spacing-4, 1rem);
     }
 
     .scroll-me-\\[4px\\] {
       scroll-margin-inline-end: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-me',
-      'scroll-me-4/foo',
-      'scroll-me-[4px]/foo',
-      '-scroll-me-4/foo',
-      '-scroll-me-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-me'])).toEqual('')
 })
 
-test('scroll-mbs', async () => {
+test('scroll-mt', () => {
   expect(
-    await run(
-      ['scroll-mbs-4', 'scroll-mbs-[4px]', '-scroll-mbs-4', '-scroll-mbs-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-mt-4', 'scroll-mt-[4px]', '-scroll-mt-4', '-scroll-mt-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-    }
-
-    .-scroll-mbs-4 {
-      scroll-margin-block-start: calc(var(--spacing-4) * -1);
-    }
-
-    .-scroll-mbs-\\[var\\(--value\\)\\] {
-      scroll-margin-block-start: calc(var(--value) * -1);
-    }
-
-    .scroll-mbs-4 {
-      scroll-margin-block-start: var(--spacing-4);
-    }
-
-    .scroll-mbs-\\[4px\\] {
-      scroll-margin-block-start: 4px;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scroll-mbs',
-      'scroll-mbs-4/foo',
-      'scroll-mbs-[4px]/foo',
-      '-scroll-mbs-4/foo',
-      '-scroll-mbs-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('scroll-mbe', async () => {
-  expect(
-    await run(
-      ['scroll-mbe-4', 'scroll-mbe-[4px]', '-scroll-mbe-4', '-scroll-mbe-[var(--value)]'],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-    }
-
-    .-scroll-mbe-4 {
-      scroll-margin-block-end: calc(var(--spacing-4) * -1);
-    }
-
-    .-scroll-mbe-\\[var\\(--value\\)\\] {
-      scroll-margin-block-end: calc(var(--value) * -1);
-    }
-
-    .scroll-mbe-4 {
-      scroll-margin-block-end: var(--spacing-4);
-    }
-
-    .scroll-mbe-\\[4px\\] {
-      scroll-margin-block-end: 4px;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scroll-mbe',
-      'scroll-mbe-4/foo',
-      'scroll-mbe-[4px]/foo',
-      '-scroll-mbe-4/foo',
-      '-scroll-mbe-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('scroll-mt', async () => {
-  expect(
-    await run(
-      ['scroll-mt-4', 'scroll-mt-[4px]', '-scroll-mt-4', '-scroll-mt-[var(--value)]'],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-mt-4 {
-      scroll-margin-top: calc(var(--spacing-4) * -1);
+      scroll-margin-top: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-mt-\\[var\\(--value\\)\\] {
+    .-scroll-mt-\\[--value\\] {
       scroll-margin-top: calc(var(--value) * -1);
     }
 
     .scroll-mt-4 {
-      scroll-margin-top: var(--spacing-4);
+      scroll-margin-top: var(--spacing-4, 1rem);
     }
 
     .scroll-mt-\\[4px\\] {
       scroll-margin-top: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-mt',
-      'scroll-mt-4/foo',
-      'scroll-mt-[4px]/foo',
-      '-scroll-mt-4/foo',
-      '-scroll-mt-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-mt'])).toEqual('')
 })
 
-test('scroll-mr', async () => {
+test('scroll-mr', () => {
   expect(
-    await run(
-      ['scroll-mr-4', 'scroll-mr-[4px]', '-scroll-mr-4', '-scroll-mr-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-mr-4', 'scroll-mr-[4px]', '-scroll-mr-4', '-scroll-mr-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-mr-4 {
-      scroll-margin-right: calc(var(--spacing-4) * -1);
+      scroll-margin-right: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-mr-\\[var\\(--value\\)\\] {
+    .-scroll-mr-\\[--value\\] {
       scroll-margin-right: calc(var(--value) * -1);
     }
 
     .scroll-mr-4 {
-      scroll-margin-right: var(--spacing-4);
+      scroll-margin-right: var(--spacing-4, 1rem);
     }
 
     .scroll-mr-\\[4px\\] {
       scroll-margin-right: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-mr',
-      'scroll-mr-4/foo',
-      'scroll-mr-[4px]/foo',
-      '-scroll-mr-4/foo',
-      '-scroll-mr-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-mr'])).toEqual('')
 })
 
-test('scroll-mb', async () => {
+test('scroll-mb', () => {
   expect(
-    await run(
-      ['scroll-mb-4', 'scroll-mb-[4px]', '-scroll-mb-4', '-scroll-mb-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-mb-4', 'scroll-mb-[4px]', '-scroll-mb-4', '-scroll-mb-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-mb-4 {
-      scroll-margin-bottom: calc(var(--spacing-4) * -1);
+      scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-mb-\\[var\\(--value\\)\\] {
+    .-scroll-mb-\\[--value\\] {
       scroll-margin-bottom: calc(var(--value) * -1);
     }
 
     .scroll-mb-4 {
-      scroll-margin-bottom: var(--spacing-4);
+      scroll-margin-bottom: var(--spacing-4, 1rem);
     }
 
     .scroll-mb-\\[4px\\] {
       scroll-margin-bottom: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-mb',
-      'scroll-mb-4/foo',
-      'scroll-mb-[4px]/foo',
-      '-scroll-mb-4/foo',
-      '-scroll-mb-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-mb'])).toEqual('')
 })
 
-test('scroll-ml', async () => {
+test('scroll-ml', () => {
   expect(
-    await run(
-      ['scroll-ml-4', 'scroll-ml-[4px]', '-scroll-ml-4', '-scroll-ml-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-ml-4', 'scroll-ml-[4px]', '-scroll-ml-4', '-scroll-ml-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .-scroll-ml-4 {
-      scroll-margin-left: calc(var(--spacing-4) * -1);
+      scroll-margin-left: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-ml-\\[var\\(--value\\)\\] {
+    .-scroll-ml-\\[--value\\] {
       scroll-margin-left: calc(var(--value) * -1);
     }
 
     .scroll-ml-4 {
-      scroll-margin-left: var(--spacing-4);
+      scroll-margin-left: var(--spacing-4, 1rem);
     }
 
     .scroll-ml-\\[4px\\] {
       scroll-margin-left: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-ml',
-      'scroll-ml-4/foo',
-      'scroll-ml-[4px]/foo',
-      '-scroll-ml-4/foo',
-      '-scroll-ml-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-ml'])).toEqual('')
 })
 
-test('scroll-p', async () => {
+test('scroll-p', () => {
   expect(
-    await run(
-      ['scroll-p-4', 'scroll-p-[4px]', '-scroll-p-4', '-scroll-p-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-p-4', 'scroll-p-[4px]', '-scroll-p-4', '-scroll-p-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
+    .-scroll-p-4 {
+      scroll-padding: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-scroll-p-\\[--value\\] {
+      scroll-padding: calc(var(--value) * -1);
+    }
+
     .scroll-p-4 {
-      scroll-padding: var(--spacing-4);
+      scroll-padding: var(--spacing-4, 1rem);
     }
 
     .scroll-p-\\[4px\\] {
       scroll-padding: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-p',
-      'scroll-p-4/foo',
-      'scroll-p-[4px]/foo',
-      '-scroll-p-4/foo',
-      '-scroll-p-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-p'])).toEqual('')
 })
 
-test('scroll-px', async () => {
+test('scroll-px', () => {
   expect(
-    await run(
-      ['scroll-px-4', 'scroll-px-[4px]', '-scroll-px-4', '-scroll-px-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-px-4', 'scroll-px-[4px]', '-scroll-px-4', '-scroll-px-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
+    .-scroll-px-4 {
+      scroll-padding-left: calc(var(--spacing-4, 1rem) * -1);
+      scroll-padding-right: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-scroll-px-\\[--value\\] {
+      scroll-padding-left: calc(var(--value) * -1);
+      scroll-padding-right: calc(var(--value) * -1);
+    }
+
     .scroll-px-4 {
-      scroll-padding-inline: var(--spacing-4);
+      scroll-padding-left: var(--spacing-4, 1rem);
+      scroll-padding-right: var(--spacing-4, 1rem);
     }
 
     .scroll-px-\\[4px\\] {
-      scroll-padding-inline: 4px;
-    }
-    "
+      scroll-padding-left: 4px;
+      scroll-padding-right: 4px;
+    }"
   `)
-  expect(
-    await run([
-      'scroll-px',
-      'scroll-px-4/foo',
-      'scroll-px-[4px]/foo',
-      '-scroll-px-4/foo',
-      '-scroll-px-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-px'])).toEqual('')
 })
 
-test('scroll-py', async () => {
+test('scroll-py', () => {
   expect(
-    await run(
-      ['scroll-py-4', 'scroll-py-[4px]', '-scroll-py-4', '-scroll-py-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-py-4', 'scroll-py-[4px]', '-scroll-py-4', '-scroll-py-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
+    .-scroll-py-4 {
+      scroll-padding-top: calc(var(--spacing-4, 1rem) * -1);
+      scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-scroll-py-\\[--value\\] {
+      scroll-padding-top: calc(var(--value) * -1);
+      scroll-padding-bottom: calc(var(--value) * -1);
+    }
+
     .scroll-py-4 {
-      scroll-padding-block: var(--spacing-4);
+      scroll-padding-top: var(--spacing-4, 1rem);
+      scroll-padding-bottom: var(--spacing-4, 1rem);
     }
 
     .scroll-py-\\[4px\\] {
-      scroll-padding-block: 4px;
-    }
-    "
+      scroll-padding-top: 4px;
+      scroll-padding-bottom: 4px;
+    }"
   `)
-  expect(
-    await run([
-      'scroll-py',
-      'scroll-py-4/foo',
-      'scroll-py-[4px]/foo',
-      '-scroll-py-4/foo',
-      '-scroll-py-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-py'])).toEqual('')
 })
 
-test('scroll-ps', async () => {
+test('scroll-ps', () => {
   expect(
-    await run(
-      ['scroll-ps-4', 'scroll-ps-[4px]', '-scroll-ps-4', '-scroll-ps-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-ps-4', 'scroll-ps-[4px]', '-scroll-ps-4', '-scroll-ps-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
+    .-scroll-ps-4 {
+      scroll-padding-inline-start: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-scroll-ps-\\[--value\\] {
+      scroll-padding-inline-start: calc(var(--value) * -1);
+    }
+
     .scroll-ps-4 {
-      scroll-padding-inline-start: var(--spacing-4);
+      scroll-padding-inline-start: var(--spacing-4, 1rem);
     }
 
     .scroll-ps-\\[4px\\] {
       scroll-padding-inline-start: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-ps',
-      'scroll-ps-4/foo',
-      'scroll-ps-[4px]/foo',
-      '-scroll-ps-4/foo',
-      '-scroll-ps-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-ps'])).toEqual('')
 })
 
-test('scroll-pe', async () => {
+test('scroll-pe', () => {
   expect(
-    await run(
-      ['scroll-pe-4', 'scroll-pe-[4px]', '-scroll-pe-4', '-scroll-pe-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-pe-4', 'scroll-pe-[4px]', '-scroll-pe-4', '-scroll-pe-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
+    .-scroll-pe-4 {
+      scroll-padding-inline-end: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-scroll-pe-\\[--value\\] {
+      scroll-padding-inline-end: calc(var(--value) * -1);
+    }
+
     .scroll-pe-4 {
-      scroll-padding-inline-end: var(--spacing-4);
+      scroll-padding-inline-end: var(--spacing-4, 1rem);
     }
 
     .scroll-pe-\\[4px\\] {
       scroll-padding-inline-end: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-pe',
-      'scroll-pe-4/foo',
-      'scroll-pe-[4px]/foo',
-      '-scroll-pe-4/foo',
-      '-scroll-pe-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-pe'])).toEqual('')
 })
 
-test('scroll-pbs', async () => {
+test('scroll-pt', () => {
   expect(
-    await run(
-      ['scroll-pbs-4', 'scroll-pbs-[4px]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-pt-4', 'scroll-pt-[4px]', '-scroll-pt-4', '-scroll-pt-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
-    .scroll-pbs-4 {
-      scroll-padding-block-start: var(--spacing-4);
+    .-scroll-pt-4 {
+      scroll-padding-top: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .scroll-pbs-\\[4px\\] {
-      scroll-padding-block-start: 4px;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scroll-pbs',
-      'scroll-pbs-4/foo',
-      'scroll-pbs-[4px]/foo',
-      '-scroll-pbs-4',
-      '-scroll-pbs-[var(--value)]',
-    ]),
-  ).toEqual('')
-})
-
-test('scroll-pbe', async () => {
-  expect(
-    await run(
-      ['scroll-pbe-4', 'scroll-pbe-[4px]'],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
-    }
-
-    .scroll-pbe-4 {
-      scroll-padding-block-end: var(--spacing-4);
-    }
-
-    .scroll-pbe-\\[4px\\] {
-      scroll-padding-block-end: 4px;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scroll-pbe',
-      'scroll-pbe-4/foo',
-      'scroll-pbe-[4px]/foo',
-      '-scroll-pbe-4',
-      '-scroll-pbe-[var(--value)]',
-    ]),
-  ).toEqual('')
-})
-
-test('scroll-pt', async () => {
-  expect(
-    await run(
-      ['scroll-pt-4', 'scroll-pt-[4px]', '-scroll-pt-4', '-scroll-pt-[var(--value)]'],
-      css`
-        @theme {
-          --spacing-4: 1rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing-4: 1rem;
+    .-scroll-pt-\\[--value\\] {
+      scroll-padding-top: calc(var(--value) * -1);
     }
 
     .scroll-pt-4 {
-      scroll-padding-top: var(--spacing-4);
+      scroll-padding-top: var(--spacing-4, 1rem);
     }
 
     .scroll-pt-\\[4px\\] {
       scroll-padding-top: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-pt',
-      'scroll-pt-4/foo',
-      'scroll-pt-[4px]/foo',
-      '-scroll-pt-4/foo',
-      '-scroll-pt-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-pt'])).toEqual('')
 })
 
-test('scroll-pr', async () => {
+test('scroll-pr', () => {
   expect(
-    await run(
-      ['scroll-pr-4', 'scroll-pr-[4px]', '-scroll-pr-4', '-scroll-pr-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-pr-4', 'scroll-pr-[4px]', '-scroll-pr-4', '-scroll-pr-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
+    .-scroll-pr-4 {
+      scroll-padding-right: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-scroll-pr-\\[--value\\] {
+      scroll-padding-right: calc(var(--value) * -1);
+    }
+
     .scroll-pr-4 {
-      scroll-padding-right: var(--spacing-4);
+      scroll-padding-right: var(--spacing-4, 1rem);
     }
 
     .scroll-pr-\\[4px\\] {
       scroll-padding-right: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-pr',
-      'scroll-pr-4/foo',
-      'scroll-pr-[4px]/foo',
-      '-scroll-pr-4/foo',
-      '-scroll-pr-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-pr'])).toEqual('')
 })
 
-test('scroll-pb', async () => {
+test('scroll-pb', () => {
   expect(
-    await run(
-      ['scroll-pb-4', 'scroll-pb-[4px]', '-scroll-pb-4', '-scroll-pb-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-pb-4', 'scroll-pb-[4px]', '-scroll-pb-4', '-scroll-pb-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
+    .-scroll-pb-4 {
+      scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-scroll-pb-\\[--value\\] {
+      scroll-padding-bottom: calc(var(--value) * -1);
+    }
+
     .scroll-pb-4 {
-      scroll-padding-bottom: var(--spacing-4);
+      scroll-padding-bottom: var(--spacing-4, 1rem);
     }
 
     .scroll-pb-\\[4px\\] {
       scroll-padding-bottom: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-pb',
-      'scroll-pb-4/foo',
-      'scroll-pb-[4px]/foo',
-      '-scroll-pb-4/foo',
-      '-scroll-pb-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-pb'])).toEqual('')
 })
 
-test('scroll-pl', async () => {
+test('scroll-pl', () => {
   expect(
-    await run(
-      ['scroll-pl-4', 'scroll-pl-[4px]', '-scroll-pl-4', '-scroll-pl-[var(--value)]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['scroll-pl-4', 'scroll-pl-[4px]', '-scroll-pl-4', '-scroll-pl-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
+    .-scroll-pl-4 {
+      scroll-padding-left: calc(var(--spacing-4, 1rem) * -1);
+    }
+
+    .-scroll-pl-\\[--value\\] {
+      scroll-padding-left: calc(var(--value) * -1);
+    }
+
     .scroll-pl-4 {
-      scroll-padding-left: var(--spacing-4);
+      scroll-padding-left: var(--spacing-4, 1rem);
     }
 
     .scroll-pl-\\[4px\\] {
       scroll-padding-left: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'scroll-pl',
-      'scroll-pl-4/foo',
-      'scroll-pl-[4px]/foo',
-      '-scroll-pl-4/foo',
-      '-scroll-pl-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['scroll-pl'])).toEqual('')
 })
 
-test('list-style-position', async () => {
-  expect(await run(['list-inside', 'list-outside'])).toMatchInlineSnapshot(`
-    "
-    .list-inside {
+test('list-style-position', () => {
+  expect(run(['list-inside', 'list-outside'])).toMatchInlineSnapshot(`
+    ".list-inside {
       list-style-position: inside;
     }
 
     .list-outside {
       list-style-position: outside;
-    }
-    "
+    }"
   `)
-  expect(
-    await run(['-list-inside', '-list-outside', 'list-inside/foo', 'list-outside/foo']),
-  ).toEqual('')
+  expect(run(['-list-inside', '-list-outside'])).toEqual('')
 })
 
-test('list', async () => {
-  expect(await run(['list-none', 'list-disc', 'list-decimal', 'list-[var(--value)]']))
-    .toMatchInlineSnapshot(`
-      "
-      .list-\\[var\\(--value\\)\\] {
-        list-style-type: var(--value);
-      }
+test('list', () => {
+  expect(run(['list-none', 'list-disc', 'list-decimal', 'list-[--value]'])).toMatchInlineSnapshot(`
+    ".list-\\[--value\\] {
+      list-style-type: var(--value);
+    }
 
-      .list-decimal {
-        list-style-type: decimal;
-      }
+    .list-decimal {
+      list-style-type: decimal;
+    }
 
-      .list-disc {
-        list-style-type: disc;
-      }
-
-      .list-none {
-        list-style-type: none;
-      }
-      "
-    `)
-  expect(
-    await run([
-      '-list-none',
-      '-list-disc',
-      '-list-decimal',
-      '-list-[var(--value)]',
-      'list-none/foo',
-      'list-disc/foo',
-      'list-decimal/foo',
-      'list-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['list-none'],
-      css`
-        @theme {
-          --list-style-type-none: disc;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --list-style-type-none: disc;
+    .list-disc {
+      list-style-type: disc;
     }
 
     .list-none {
-      list-style-type: var(--list-style-type-none);
-    }
-    "
+      list-style-type: none;
+    }"
   `)
+  expect(run(['-list-none', '-list-disc', '-list-decimal', '-list-[--value]'])).toEqual('')
 })
 
-test('list-image', async () => {
-  expect(await run(['list-image-none', 'list-image-[var(--value)]'])).toMatchInlineSnapshot(`
-    "
-    .list-image-\\[var\\(--value\\)\\] {
+test('list-image', () => {
+  expect(run(['list-image-none', 'list-image-[--value]'])).toMatchInlineSnapshot(`
+    ".list-image-\\[--value\\] {
       list-style-image: var(--value);
     }
 
     .list-image-none {
       list-style-image: none;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'list-image',
-      '-list-image-none',
-      '-list-image-[var(--value)]',
-      'list-image-none/foo',
-      'list-image-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['list-image-none'],
-      css`
-        @theme {
-          --list-style-image-none: url(../foo.png);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --list-style-image-none: url("../foo.png");
-    }
-
-    .list-image-none {
-      list-style-image: var(--list-style-image-none);
-    }
-    "
+    }"
   `)
+  expect(run(['list-image', '-list-image-none', '-list-image-[--value]'])).toEqual('')
 })
 
-test('appearance', async () => {
-  expect(await run(['appearance-none', 'appearance-auto'])).toMatchInlineSnapshot(`
-    "
-    .appearance-auto {
+test('appearance', () => {
+  expect(run(['appearance-none', 'appearance-auto'])).toMatchInlineSnapshot(`
+    ".appearance-auto {
       appearance: auto;
     }
 
     .appearance-none {
       appearance: none;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'appearance',
-      '-appearance-none',
-      '-appearance-auto',
-      'appearance-none/foo',
-      'appearance-auto/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['appearance', '-appearance-none', '-appearance-auto'])).toEqual('')
 })
 
-test('color-scheme', async () => {
+test('columns', () => {
   expect(
-    await run([
-      'scheme-normal',
-      'scheme-dark',
-      'scheme-light',
-      'scheme-light-dark',
-      'scheme-only-dark',
-      'scheme-only-light',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .scheme-dark {
-      color-scheme: dark;
-    }
-
-    .scheme-light {
-      color-scheme: light;
-    }
-
-    .scheme-light-dark {
-      color-scheme: light dark;
-    }
-
-    .scheme-normal {
-      color-scheme: normal;
-    }
-
-    .scheme-only-dark {
-      color-scheme: dark only;
-    }
-
-    .scheme-only-light {
-      color-scheme: light only;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scheme',
-      '-scheme-dark',
-      '-scheme-light',
-      '-scheme-light-dark',
-      '-scheme-dark-only',
-      '-scheme-light-only',
-    ]),
-  ).toEqual('')
-})
-
-test('columns', async () => {
-  expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --width-3xs: 16rem;
+          --width-7xl: 80rem;
+        }
+        @tailwind utilities;
+      `,
       [
         'columns-auto',
         'columns-3xs',
@@ -8741,25 +3930,17 @@ test('columns', async () => {
         'columns-4',
         'columns-99',
         'columns-[123]',
-        'columns-[var(--value)]',
+        'columns-[--value]',
       ],
-      css`
-        @theme {
-          --container-3xs: 16rem;
-          --container-7xl: 80rem;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --container-3xs: 16rem;
-      --container-7xl: 80rem;
+    ":root {
+      --width-3xs: 16rem;
+      --width-7xl: 80rem;
     }
 
     .columns-3xs {
-      columns: var(--container-3xs);
+      columns: var(--width-3xs, 16rem);
     }
 
     .columns-4 {
@@ -8767,70 +3948,31 @@ test('columns', async () => {
     }
 
     .columns-7xl {
-      columns: var(--container-7xl);
+      columns: var(--width-7xl, 80rem);
     }
 
     .columns-99 {
       columns: 99;
     }
 
+    .columns-\\[--value\\] {
+      columns: var(--value);
+    }
+
     .columns-\\[123\\] {
       columns: 123;
     }
 
-    .columns-\\[var\\(--value\\)\\] {
-      columns: var(--value);
-    }
-
     .columns-auto {
       columns: auto;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'columns',
-      'columns--4',
-      '-columns-4',
-      '-columns-[123]',
-      '-columns-[var(--value)]',
-      'columns-unknown',
-      'columns-auto/foo',
-      'columns-3xs/foo',
-      'columns-7xl/foo',
-      'columns-4/foo',
-      'columns-99/foo',
-      'columns-[123]/foo',
-      'columns-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['columns-auto'],
-      css`
-        @theme {
-          --columns-auto: 3;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --columns-auto: 3;
-    }
-
-    .columns-auto {
-      columns: var(--columns-auto);
-    }
-    "
+    }"
   `)
+  expect(run(['columns', '-columns-4', '-columns-[123]', '-columns-[--value]'])).toEqual('')
 })
 
-test('break-before', async () => {
+test('break-before', () => {
   expect(
-    await run([
+    run([
       'break-before-auto',
       'break-before-avoid',
       'break-before-all',
@@ -8841,8 +3983,7 @@ test('break-before', async () => {
       'break-before-column',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .break-before-all {
+    ".break-before-all {
       break-before: all;
     }
 
@@ -8872,11 +4013,10 @@ test('break-before', async () => {
 
     .break-before-right {
       break-before: right;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'break-before',
       '-break-before-auto',
       '-break-before-avoid',
@@ -8886,29 +4026,20 @@ test('break-before', async () => {
       '-break-before-left',
       '-break-before-right',
       '-break-before-column',
-      'break-before-auto/foo',
-      'break-before-avoid/foo',
-      'break-before-all/foo',
-      'break-before-avoid-page/foo',
-      'break-before-page/foo',
-      'break-before-left/foo',
-      'break-before-right/foo',
-      'break-before-column/foo',
     ]),
   ).toEqual('')
 })
 
-test('break-inside', async () => {
+test('break-inside', () => {
   expect(
-    await run([
+    run([
       'break-inside-auto',
       'break-inside-avoid',
       'break-inside-avoid-page',
       'break-inside-avoid-column',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .break-inside-auto {
+    ".break-inside-auto {
       break-inside: auto;
     }
 
@@ -8922,27 +4053,22 @@ test('break-inside', async () => {
 
     .break-inside-avoid-page {
       break-inside: avoid-page;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'break-inside',
       '-break-inside-auto',
       '-break-inside-avoid',
       '-break-inside-avoid-page',
       '-break-inside-avoid-column',
-      'break-inside-auto/foo',
-      'break-inside-avoid/foo',
-      'break-inside-avoid-page/foo',
-      'break-inside-avoid-column/foo',
     ]),
   ).toEqual('')
 })
 
-test('break-after', async () => {
+test('break-after', () => {
   expect(
-    await run([
+    run([
       'break-after-auto',
       'break-after-avoid',
       'break-after-all',
@@ -8953,8 +4079,7 @@ test('break-after', async () => {
       'break-after-column',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .break-after-all {
+    ".break-after-all {
       break-after: all;
     }
 
@@ -8984,11 +4109,10 @@ test('break-after', async () => {
 
     .break-after-right {
       break-after: right;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'break-after',
       '-break-after-auto',
       '-break-after-avoid',
@@ -8998,43 +4122,15 @@ test('break-after', async () => {
       '-break-after-left',
       '-break-after-right',
       '-break-after-column',
-      'break-after-auto/foo',
-      'break-after-avoid/foo',
-      'break-after-all/foo',
-      'break-after-avoid-page/foo',
-      'break-after-page/foo',
-      'break-after-left/foo',
-      'break-after-right/foo',
-      'break-after-column/foo',
     ]),
   ).toEqual('')
 })
 
-test('auto-cols', async () => {
+test('auto-cols', () => {
   expect(
-    await run(
-      [
-        'auto-cols-auto',
-        'auto-cols-min',
-        'auto-cols-max',
-        'auto-cols-fr',
-        'auto-cols-[2fr]',
-        'auto-cols-12',
-      ],
-      css`
-        @tailwind utilities;
-        @theme {
-          --spacing: 0.25rem;
-        }
-      `,
-    ),
+    run(['auto-cols-auto', 'auto-cols-min', 'auto-cols-max', 'auto-cols-fr', 'auto-cols-[2fr]']),
   ).toMatchInlineSnapshot(`
-    "
-    .auto-cols-12 {
-      grid-auto-columns: calc(var(--spacing) * 12);
-    }
-
-    .auto-cols-\\[2fr\\] {
+    ".auto-cols-\\[2fr\\] {
       grid-auto-columns: 2fr;
     }
 
@@ -9052,52 +4148,14 @@ test('auto-cols', async () => {
 
     .auto-cols-min {
       grid-auto-columns: min-content;
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'auto-cols',
-      '-auto-cols-auto',
-      '-auto-cols-[2fr]',
-      'auto-cols-auto/foo',
-      'auto-cols-min/foo',
-      'auto-cols-max/foo',
-      'auto-cols-fr/foo',
-      'auto-cols-[2fr]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['auto-cols-auto'],
-      css`
-        @theme {
-          --grid-auto-columns-auto: 2fr;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-auto-columns-auto: 2fr;
-    }
-
-    .auto-cols-auto {
-      grid-auto-columns: var(--grid-auto-columns-auto);
-    }
-    "
+    }"
   `)
+  expect(run(['auto-cols', '-auto-cols-auto', '-auto-cols-[2fr]'])).toEqual('')
 })
 
-test('grid-flow', async () => {
+test('grid-flow', () => {
   expect(
-    await run([
+    run([
       'grid-flow-row',
       'grid-flow-col',
       'grid-flow-dense',
@@ -9105,8 +4163,7 @@ test('grid-flow', async () => {
       'grid-flow-col-dense',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .grid-flow-col {
+    ".grid-flow-col {
       grid-auto-flow: column;
     }
 
@@ -9124,51 +4181,25 @@ test('grid-flow', async () => {
 
     .grid-flow-row-dense {
       grid-auto-flow: row dense;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'grid-flow',
       '-grid-flow-row',
       '-grid-flow-col',
       '-grid-flow-dense',
       '-grid-flow-row-dense',
       '-grid-flow-col-dense',
-      'grid-flow-row/foo',
-      'grid-flow-col/foo',
-      'grid-flow-dense/foo',
-      'grid-flow-row-dense/foo',
-      'grid-flow-col-dense/foo',
     ]),
   ).toEqual('')
 })
 
-test('auto-rows', async () => {
+test('auto-rows', () => {
   expect(
-    await run(
-      [
-        'auto-rows-auto',
-        'auto-rows-min',
-        'auto-rows-max',
-        'auto-rows-fr',
-        'auto-rows-[2fr]',
-        'auto-rows-12',
-      ],
-      css`
-        @tailwind utilities;
-        @theme {
-          --spacing: 0.25rem;
-        }
-      `,
-    ),
+    run(['auto-rows-auto', 'auto-rows-min', 'auto-rows-max', 'auto-rows-fr', 'auto-rows-[2fr]']),
   ).toMatchInlineSnapshot(`
-    "
-    .auto-rows-12 {
-      grid-auto-rows: calc(var(--spacing) * 12);
-    }
-
-    .auto-rows-\\[2fr\\] {
+    ".auto-rows-\\[2fr\\] {
       grid-auto-rows: 2fr;
     }
 
@@ -9186,61 +4217,16 @@ test('auto-rows', async () => {
 
     .auto-rows-min {
       grid-auto-rows: min-content;
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'auto-rows',
-      '-auto-rows-auto',
-      '-auto-rows-[2fr]',
-      'auto-rows-auto/foo',
-      'auto-rows-min/foo',
-      'auto-rows-max/foo',
-      'auto-rows-fr/foo',
-      'auto-rows-[2fr]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['auto-rows-auto'],
-      css`
-        @theme {
-          --grid-auto-rows-auto: 2fr;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-auto-rows-auto: 2fr;
-    }
-
-    .auto-rows-auto {
-      grid-auto-rows: var(--grid-auto-rows-auto);
-    }
-    "
+    }"
   `)
+  expect(run(['auto-rows', '-auto-rows-auto', '-auto-rows-[2fr]'])).toEqual('')
 })
 
-test('grid-cols', async () => {
+test('grid-cols', () => {
   expect(
-    await run([
-      'grid-cols-none',
-      'grid-cols-subgrid',
-      'grid-cols-12',
-      'grid-cols-99',
-      'grid-cols-[123]',
-    ]),
+    run(['grid-cols-none', 'grid-cols-subgrid', 'grid-cols-12', 'grid-cols-99', 'grid-cols-[123]']),
   ).toMatchInlineSnapshot(`
-    "
-    .grid-cols-12 {
+    ".grid-cols-12 {
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
 
@@ -9258,62 +4244,24 @@ test('grid-cols', async () => {
 
     .grid-cols-subgrid {
       grid-template-columns: subgrid;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'grid-cols',
-      'grid-cols-0',
       '-grid-cols-none',
       '-grid-cols-subgrid',
-      'grid-cols--12',
       '-grid-cols-12',
       '-grid-cols-[123]',
-      'grid-cols-unknown',
-      'grid-cols-none/foo',
-      'grid-cols-subgrid/foo',
-      'grid-cols-12/foo',
-      'grid-cols-99/foo',
-      'grid-cols-[123]/foo',
     ]),
   ).toEqual('')
-
-  expect(
-    await run(
-      ['grid-cols-none'],
-      css`
-        @theme {
-          --grid-template-columns-none: 200px 1fr;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-template-columns-none: 200px 1fr;
-    }
-
-    .grid-cols-none {
-      grid-template-columns: var(--grid-template-columns-none);
-    }
-    "
-  `)
 })
 
-test('grid-rows', async () => {
+test('grid-rows', () => {
   expect(
-    await run([
-      'grid-rows-none',
-      'grid-rows-subgrid',
-      'grid-rows-12',
-      'grid-rows-99',
-      'grid-rows-[123]',
-    ]),
+    run(['grid-rows-none', 'grid-rows-subgrid', 'grid-rows-12', 'grid-rows-99', 'grid-rows-[123]']),
   ).toMatchInlineSnapshot(`
-    "
-    .grid-rows-12 {
+    ".grid-rows-12 {
       grid-template-rows: repeat(12, minmax(0, 1fr));
     }
 
@@ -9331,89 +4279,44 @@ test('grid-rows', async () => {
 
     .grid-rows-subgrid {
       grid-template-rows: subgrid;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'grid-rows',
-      'grid-rows-0',
       '-grid-rows-none',
       '-grid-rows-subgrid',
-      'grid-rows--12',
       '-grid-rows-12',
       '-grid-rows-[123]',
-      'grid-rows-unknown',
-      'grid-rows-none/foo',
-      'grid-rows-subgrid/foo',
-      'grid-rows-12/foo',
-      'grid-rows-99/foo',
-      'grid-rows-[123]/foo',
     ]),
   ).toEqual('')
-
-  expect(
-    await run(
-      ['grid-rows-none'],
-      css`
-        @theme {
-          --grid-template-rows-none: 200px 1fr;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --grid-template-rows-none: 200px 1fr;
-    }
-
-    .grid-rows-none {
-      grid-template-rows: var(--grid-template-rows-none);
-    }
-    "
-  `)
 })
 
-test('flex-direction', async () => {
-  expect(await run(['flex-row', 'flex-row-reverse', 'flex-col', 'flex-col-reverse']))
+test('flex-direction', () => {
+  expect(run(['flex-row', 'flex-row-reverse', 'flex-col', 'flex-col-reverse']))
     .toMatchInlineSnapshot(`
-      "
-      .flex-col {
-        flex-direction: column;
-      }
+    ".flex-col {
+      flex-direction: column;
+    }
 
-      .flex-col-reverse {
-        flex-direction: column-reverse;
-      }
+    .flex-col-reverse {
+      flex-direction: column-reverse;
+    }
 
-      .flex-row {
-        flex-direction: row;
-      }
+    .flex-row {
+      flex-direction: row;
+    }
 
-      .flex-row-reverse {
-        flex-direction: row-reverse;
-      }
-      "
-    `)
-  expect(
-    await run([
-      '-flex-row',
-      '-flex-row-reverse',
-      '-flex-col',
-      '-flex-col-reverse',
-      'flex-row/foo',
-      'flex-row-reverse/foo',
-      'flex-col/foo',
-      'flex-col-reverse/foo',
-    ]),
-  ).toEqual('')
+    .flex-row-reverse {
+      flex-direction: row-reverse;
+    }"
+  `)
+  expect(run(['-flex-row', '-flex-row-reverse', '-flex-col', '-flex-col-reverse'])).toEqual('')
 })
 
-test('flex-wrap', async () => {
-  expect(await run(['flex-wrap', 'flex-wrap-reverse', 'flex-nowrap'])).toMatchInlineSnapshot(`
-    "
-    .flex-nowrap {
+test('flex-wrap', () => {
+  expect(run(['flex-wrap', 'flex-wrap-reverse', 'flex-nowrap'])).toMatchInlineSnapshot(`
+    ".flex-nowrap {
       flex-wrap: nowrap;
     }
 
@@ -9423,29 +4326,17 @@ test('flex-wrap', async () => {
 
     .flex-wrap-reverse {
       flex-wrap: wrap-reverse;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-flex-wrap',
-      '-flex-wrap-reverse',
-      '-flex-nowrap',
-      'flex-wrap/foo',
-      'flex-wrap-reverse/foo',
-      'flex-nowrap/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-flex-wrap', '-flex-wrap-reverse', '-flex-nowrap'])).toEqual('')
 })
 
-test('place-content', async () => {
+test('place-content', () => {
   expect(
-    await run([
+    run([
       'place-content-center',
-      'place-content-center-safe',
       'place-content-start',
       'place-content-end',
-      'place-content-end-safe',
       'place-content-between',
       'place-content-around',
       'place-content-evenly',
@@ -9453,9 +4344,8 @@ test('place-content', async () => {
       'place-content-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .place-content-around {
-      place-content: space-around;
+    ".place-content-around {
+      place-content: around;
     }
 
     .place-content-baseline {
@@ -9463,27 +4353,19 @@ test('place-content', async () => {
     }
 
     .place-content-between {
-      place-content: space-between;
+      place-content: between;
     }
 
     .place-content-center {
       place-content: center;
     }
 
-    .place-content-center-safe {
-      place-content: safe center;
-    }
-
     .place-content-end {
       place-content: end;
     }
 
-    .place-content-end-safe {
-      place-content: safe end;
-    }
-
     .place-content-evenly {
-      place-content: space-evenly;
+      place-content: evenly;
     }
 
     .place-content-start {
@@ -9492,11 +4374,10 @@ test('place-content', async () => {
 
     .place-content-stretch {
       place-content: stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'place-content',
       '-place-content-center',
       '-place-content-start',
@@ -9506,32 +4387,21 @@ test('place-content', async () => {
       '-place-content-evenly',
       '-place-content-baseline',
       '-place-content-stretch',
-      'place-content-center/foo',
-      'place-content-start/foo',
-      'place-content-end/foo',
-      'place-content-between/foo',
-      'place-content-around/foo',
-      'place-content-evenly/foo',
-      'place-content-baseline/foo',
-      'place-content-stretch/foo',
     ]),
   ).toEqual('')
 })
 
-test('place-items', async () => {
+test('place-items', () => {
   expect(
-    await run([
+    run([
       'place-items-start',
       'place-items-end',
-      'place-items-end-safe',
       'place-items-center',
-      'place-items-center-safe',
       'place-items-baseline',
       'place-items-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .place-items-baseline {
+    ".place-items-baseline {
       place-items: baseline;
     }
 
@@ -9539,53 +4409,37 @@ test('place-items', async () => {
       place-items: center;
     }
 
-    .place-items-center-safe {
-      place-items: safe center;
-    }
-
     .place-items-end {
       place-items: end;
     }
 
-    .place-items-end-safe {
-      place-items: safe end;
-    }
-
     .place-items-start {
       place-items: start;
     }
 
     .place-items-stretch {
       place-items: stretch stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'place-items',
       '-place-items-start',
       '-place-items-end',
       '-place-items-center',
       '-place-items-baseline',
       '-place-items-stretch',
-      'place-items-start/foo',
-      'place-items-end/foo',
-      'place-items-center/foo',
-      'place-items-baseline/foo',
-      'place-items-stretch/foo',
     ]),
   ).toEqual('')
 })
 
-test('align-content', async () => {
+test('align-content', () => {
   expect(
-    await run([
+    run([
       'content-normal',
       'content-center',
-      'content-center-safe',
       'content-start',
       'content-end',
-      'content-end-safe',
       'content-between',
       'content-around',
       'content-evenly',
@@ -9593,8 +4447,7 @@ test('align-content', async () => {
       'content-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .content-around {
+    ".content-around {
       align-content: space-around;
     }
 
@@ -9610,18 +4463,10 @@ test('align-content', async () => {
       align-content: center;
     }
 
-    .content-center-safe {
-      align-content: safe center;
-    }
-
     .content-end {
       align-content: flex-end;
     }
 
-    .content-end-safe {
-      align-content: safe flex-end;
-    }
-
     .content-evenly {
       align-content: space-evenly;
     }
@@ -9636,11 +4481,10 @@ test('align-content', async () => {
 
     .content-stretch {
       align-content: stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'content',
       '-content-normal',
       '-content-center',
@@ -9651,102 +4495,59 @@ test('align-content', async () => {
       '-content-evenly',
       '-content-baseline',
       '-content-stretch',
-      'content-normal/foo',
-      'content-center/foo',
-      'content-start/foo',
-      'content-end/foo',
-      'content-between/foo',
-      'content-around/foo',
-      'content-evenly/foo',
-      'content-baseline/foo',
-      'content-stretch/foo',
     ]),
   ).toEqual('')
 })
 
-test('items', async () => {
-  expect(
-    await run([
-      'items-start',
-      'items-end',
-      'items-end-safe',
-      'items-center',
-      'items-center-safe',
-      'items-baseline',
-      'items-baseline-last',
-      'items-stretch',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .items-baseline {
+test('items', () => {
+  expect(run(['items-start', 'items-end', 'items-center', 'items-baseline', 'items-stretch']))
+    .toMatchInlineSnapshot(`
+    ".items-baseline {
       align-items: baseline;
     }
 
-    .items-baseline-last {
-      align-items: last baseline;
-    }
-
     .items-center {
       align-items: center;
     }
 
-    .items-center-safe {
-      align-items: safe center;
-    }
-
     .items-end {
       align-items: flex-end;
     }
 
-    .items-end-safe {
-      align-items: safe flex-end;
-    }
-
     .items-start {
       align-items: flex-start;
     }
 
     .items-stretch {
       align-items: stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'items',
       '-items-start',
       '-items-end',
       '-items-center',
       '-items-baseline',
-      '-items-first-baseline',
-      '-items-last-baseline',
       '-items-stretch',
-      'items-start/foo',
-      'items-end/foo',
-      'items-center/foo',
-      'items-baseline/foo',
-      'items-stretch/foo',
     ]),
   ).toEqual('')
 })
 
-test('justify', async () => {
+test('justify', () => {
   expect(
-    await run([
+    run([
       'justify-normal',
       'justify-start',
       'justify-end',
-      'justify-end-safe',
       'justify-center',
-      'justify-center-safe',
       'justify-between',
       'justify-around',
       'justify-evenly',
       'justify-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .justify-around {
+    ".justify-around {
       justify-content: space-around;
     }
 
@@ -9758,18 +4559,10 @@ test('justify', async () => {
       justify-content: center;
     }
 
-    .justify-center-safe {
-      justify-content: safe center;
-    }
-
     .justify-end {
       justify-content: flex-end;
     }
 
-    .justify-end-safe {
-      justify-content: safe flex-end;
-    }
-
     .justify-evenly {
       justify-content: space-evenly;
     }
@@ -9784,11 +4577,10 @@ test('justify', async () => {
 
     .justify-stretch {
       justify-content: stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'justify',
       '-justify-normal',
       '-justify-start',
@@ -9798,781 +4590,508 @@ test('justify', async () => {
       '-justify-around',
       '-justify-evenly',
       '-justify-stretch',
-      'justify-normal/foo',
-      'justify-start/foo',
-      'justify-end/foo',
-      'justify-center/foo',
-      'justify-between/foo',
-      'justify-around/foo',
-      'justify-evenly/foo',
-      'justify-stretch/foo',
     ]),
   ).toEqual('')
 })
 
-test('justify-items', async () => {
+test('justify-items', () => {
   expect(
-    await run([
+    run([
       'justify-items-start',
       'justify-items-end',
-      'justify-items-end-safe',
       'justify-items-center',
-      'justify-items-center-safe',
       'justify-items-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .justify-items-center {
+    ".justify-items-center {
       justify-items: center;
     }
 
-    .justify-items-center-safe {
-      justify-items: safe center;
-    }
-
     .justify-items-end {
       justify-items: end;
     }
 
-    .justify-items-end-safe {
-      justify-items: safe end;
-    }
-
     .justify-items-start {
       justify-items: start;
     }
 
     .justify-items-stretch {
       justify-items: stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'justify-items',
       '-justify-items-start',
       '-justify-items-end',
       '-justify-items-center',
       '-justify-items-stretch',
-      'justify-items-start/foo',
-      'justify-items-end/foo',
-      'justify-items-center/foo',
-      'justify-items-stretch/foo',
     ]),
   ).toEqual('')
 })
 
-test('gap', async () => {
+test('gap', () => {
   expect(
-    await run(
-      ['gap-4', 'gap-[4px]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['gap-4', 'gap-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .gap-4 {
-      gap: var(--spacing-4);
+      gap: var(--spacing-4, 1rem);
     }
 
     .gap-\\[4px\\] {
       gap: 4px;
-    }
-    "
+    }"
   `)
-  expect(await run(['gap', '-gap-4', '-gap-[4px]', 'gap-4/foo', 'gap-[4px]/foo'])).toEqual('')
+  expect(run(['gap', '-gap-4', '-gap-[4px]'])).toEqual('')
 })
 
-test('gap-x', async () => {
+test('gap-x', () => {
   expect(
-    await run(
-      ['gap-x-4', 'gap-x-[4px]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['gap-x-4', 'gap-x-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .gap-x-4 {
-      column-gap: var(--spacing-4);
+      column-gap: var(--spacing-4, 1rem);
     }
 
     .gap-x-\\[4px\\] {
       column-gap: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run(['gap-x', '-gap-x-4', '-gap-x-[4px]', 'gap-x-4/foo', 'gap-x-[4px]/foo']),
-  ).toEqual('')
+  expect(run(['gap-x', '-gap-x-4', '-gap-x-[4px]'])).toEqual('')
 })
 
-test('gap-y', async () => {
+test('gap-y', () => {
   expect(
-    await run(
-      ['gap-y-4', 'gap-y-[4px]'],
+    compileCss(
       css`
         @theme {
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['gap-y-4', 'gap-y-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --spacing-4: 1rem;
     }
 
     .gap-y-4 {
-      row-gap: var(--spacing-4);
+      row-gap: var(--spacing-4, 1rem);
     }
 
     .gap-y-\\[4px\\] {
       row-gap: 4px;
-    }
-    "
+    }"
   `)
-  expect(
-    await run(['gap-y', '-gap-y-4', '-gap-y-[4px]', 'gap-y-4/foo', 'gap-y-[4px]/foo']),
-  ).toEqual('')
+  expect(run(['gap-y', '-gap-y-4', '-gap-y-[4px]'])).toEqual('')
 })
 
-test('space-x', async () => {
+test('space-x', () => {
   expect(
-    await run(
-      [
-        'space-x-0',
-        'space-x-[0]',
-        'space-x-[0px]',
-        '-space-x-0',
-        'space-x-[-0]',
-        'space-x-[-0px]',
-        'space-x-1',
-        '-space-x-1',
-        'space-x-4',
-        'space-x-[4px]',
-        '-space-x-4',
-      ],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['space-x-4', 'space-x-[4px]', '-space-x-4'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-space-x-reverse: 0;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
+    ":root {
       --spacing-4: 1rem;
     }
 
-    :where(.-space-x-0 > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline: 0;
+    :where(.-space-x-4 > :not([hidden]) ~ :not([hidden])) {
+      margin-inline-start: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-x-reverse)));
+      margin-inline-end: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-x-reverse));
     }
 
-    :where(.-space-x-1 > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
+    :where(.space-x-4 > :not([hidden]) ~ :not([hidden])) {
+      margin-inline-start: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-x-reverse)));
+      margin-inline-end: calc(var(--spacing-4, 1rem) * var(--tw-space-x-reverse));
     }
 
-    :where(.-space-x-4 > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-
-    :where(.space-x-0 > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline: 0;
-    }
-
-    :where(.space-x-1 > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)));
-    }
-
-    :where(.space-x-4 > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse)));
-    }
-
-    :where(.space-x-\\[-0\\] > :not(:last-child)), :where(.space-x-\\[-0px\\] > :not(:last-child)), :where(.space-x-\\[0\\] > :not(:last-child)), :where(.space-x-\\[0px\\] > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline: 0;
-    }
-
-    :where(.space-x-\\[4px\\] > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(4px * var(--tw-space-x-reverse));
-      margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse)));
+    :where(.space-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) {
+      margin-inline-start: calc(4px * calc(1 - var(--tw-space-x-reverse)));
+      margin-inline-end: calc(4px * var(--tw-space-x-reverse));
     }
 
     @property --tw-space-x-reverse {
-      syntax: "*";
+      syntax: "<number>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(await run(['space-x', 'space-x-4/foo', 'space-x-[4px]/foo', '-space-x-4/foo'])).toEqual('')
+  expect(run(['space-x'])).toEqual('')
 })
 
-test('space-y', async () => {
+test('space-y', () => {
   expect(
-    await run(
-      [
-        'space-y-0',
-        'space-y-[0]',
-        'space-y-[0px]',
-        '-space-y-0',
-        'space-y-[-0]',
-        'space-y-[-0px]',
-        'space-y-1',
-        '-space-y-1',
-        'space-y-4',
-        'space-y-[4px]',
-        '-space-y-4',
-      ],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
           --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['space-y-4', 'space-y-[4px]', '-space-y-4'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-space-y-reverse: 0;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
+    ":root {
       --spacing-4: 1rem;
     }
 
-    :where(.-space-y-0 > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block: 0;
+    :where(.-space-y-4 > :not([hidden]) ~ :not([hidden])) {
+      margin-bottom: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-y-reverse));
+      margin-top: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-y-reverse)));
     }
 
-    :where(.-space-y-1 > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * -1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-y-reverse)));
+    :where(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
+      margin-bottom: calc(var(--spacing-4, 1rem) * var(--tw-space-y-reverse));
+      margin-top: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-y-reverse)));
     }
 
-    :where(.-space-y-4 > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse)));
-    }
-
-    :where(.space-y-0 > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block: 0;
-    }
-
-    :where(.space-y-1 > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
-    }
-
-    :where(.space-y-4 > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
-    }
-
-    :where(.space-y-\\[-0\\] > :not(:last-child)), :where(.space-y-\\[-0px\\] > :not(:last-child)), :where(.space-y-\\[0\\] > :not(:last-child)), :where(.space-y-\\[0px\\] > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block: 0;
-    }
-
-    :where(.space-y-\\[4px\\] > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(4px * var(--tw-space-y-reverse));
-      margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse)));
+    :where(.space-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) {
+      margin-bottom: calc(4px * var(--tw-space-y-reverse));
+      margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
     }
 
     @property --tw-space-y-reverse {
-      syntax: "*";
+      syntax: "<number>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(await run(['space-y', 'space-y-4/foo', 'space-y-[4px]/foo', '-space-y-4/foo'])).toEqual('')
+  expect(run(['space-y'])).toEqual('')
 })
 
-test('space-x-reverse', async () => {
-  expect(await run(['space-x-reverse'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-space-x-reverse: 0;
-        }
-      }
-    }
-
-    :where(.space-x-reverse > :not(:last-child)) {
+test('space-x-reverse', () => {
+  expect(run(['space-x-reverse'])).toMatchInlineSnapshot(`
+    ":where(.space-x-reverse > :not([hidden]) ~ :not([hidden])) {
       --tw-space-x-reverse: 1;
     }
 
     @property --tw-space-x-reverse {
-      syntax: "*";
+      syntax: "<number>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(await run(['-space-x-reverse', 'space-x-reverse/foo'])).toEqual('')
+  expect(run(['-space-x-reverse'])).toEqual('')
 })
 
-test('space-y-reverse', async () => {
-  expect(await run(['space-y-reverse'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-space-y-reverse: 0;
-        }
-      }
-    }
-
-    :where(.space-y-reverse > :not(:last-child)) {
+test('space-y-reverse', () => {
+  expect(run(['space-y-reverse'])).toMatchInlineSnapshot(`
+    ":where(.space-y-reverse > :not([hidden]) ~ :not([hidden])) {
       --tw-space-y-reverse: 1;
     }
 
     @property --tw-space-y-reverse {
-      syntax: "*";
+      syntax: "<number>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(await run(['-space-y-reverse', 'space-y-reverse/foo'])).toEqual('')
+  expect(run(['-space-y-reverse'])).toEqual('')
 })
 
-test('divide-x', async () => {
-  expect(await run(['divide-x', 'divide-x-0', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]']))
-    .toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-divide-x-reverse: 0;
-            --tw-border-style: solid;
-          }
-        }
-      }
-
-      :where(.divide-x > :not(:last-child)) {
-        --tw-divide-x-reverse: 0;
-        border-inline-style: var(--tw-border-style);
-        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
-        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-      }
-
-      :where(.divide-x-0 > :not(:last-child)) {
-        --tw-divide-x-reverse: 0;
-        border-inline-style: var(--tw-border-style);
-        border-inline-start-width: calc(0px * var(--tw-divide-x-reverse));
-        border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
-      }
-
-      :where(.divide-x-4 > :not(:last-child)) {
-        --tw-divide-x-reverse: 0;
-        border-inline-style: var(--tw-border-style);
-        border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
-        border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
-      }
-
-      :where(.divide-x-123 > :not(:last-child)) {
-        --tw-divide-x-reverse: 0;
-        border-inline-style: var(--tw-border-style);
-        border-inline-start-width: calc(123px * var(--tw-divide-x-reverse));
-        border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse)));
-      }
-
-      :where(.divide-x-\\[4px\\] > :not(:last-child)) {
-        --tw-divide-x-reverse: 0;
-        border-inline-style: var(--tw-border-style);
-        border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
-        border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
-      }
-
-      @property --tw-divide-x-reverse {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0;
-      }
-
-      @property --tw-border-style {
-        syntax: "*";
-        inherits: false;
-        initial-value: solid;
-      }
-      "
-    `)
+test('divide-x', () => {
   expect(
-    await run([
-      '-divide-x',
-      'divide-x--4',
-      '-divide-x-4',
-      '-divide-x-123',
-      'divide-x-unknown',
-      'divide-x/foo',
-      'divide-x-4/foo',
-      'divide-x-123/foo',
-      'divide-x-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('divide-x with custom default border width', async () => {
-  expect(
-    await run(
-      ['divide-x'],
+    compileCss(
       css`
-        @theme {
-          --default-border-width: 2px;
-        }
         @tailwind utilities;
       `,
+      ['divide-x', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
-          --tw-border-style: solid;
-        }
-      }
+    ":where(.divide-x > :not([hidden]) ~ :not([hidden])) {
+      border-inline-style: var(--tw-border-style);
+      border-inline-end-width: calc(1px * var(--tw-divide-x-reverse));
+      border-inline-start-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
     }
 
-    :where(.divide-x > :not(:last-child)) {
-      --tw-divide-x-reverse: 0;
+    :where(.divide-x-123 > :not([hidden]) ~ :not([hidden])) {
       border-inline-style: var(--tw-border-style);
-      border-inline-start-width: calc(2px * var(--tw-divide-x-reverse));
-      border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
+      border-inline-end-width: calc(123px * var(--tw-divide-x-reverse));
+      border-inline-start-width: calc(123px * calc(1 - var(--tw-divide-x-reverse)));
+    }
+
+    :where(.divide-x-4 > :not([hidden]) ~ :not([hidden])) {
+      border-inline-style: var(--tw-border-style);
+      border-inline-end-width: calc(4px * var(--tw-divide-x-reverse));
+      border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
+    }
+
+    :where(.divide-x-\\[4px\\] > :not([hidden]) ~ :not([hidden])) {
+      border-inline-style: var(--tw-border-style);
+      border-inline-end-width: calc(4px * var(--tw-divide-x-reverse));
+      border-inline-start-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
     }
 
     @property --tw-divide-x-reverse {
-      syntax: "*";
+      syntax: "<number>";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-border-style {
-      syntax: "*";
+      syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;
-    }
-    "
+    }"
   `)
-  expect(await run(['divide-x/foo'])).toEqual('')
+  expect(run(['-divide-x', '-divide-x-4', '-divide-x-123'])).toEqual('')
 })
 
-test('divide-y', async () => {
-  expect(await run(['divide-y', 'divide-y-0', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]']))
-    .toMatchInlineSnapshot(`
-      "
-      @layer properties {
-        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-          *, :before, :after, ::backdrop {
-            --tw-divide-y-reverse: 0;
-            --tw-border-style: solid;
-          }
-        }
-      }
-
-      :where(.divide-y > :not(:last-child)) {
-        --tw-divide-y-reverse: 0;
-        border-bottom-style: var(--tw-border-style);
-        border-top-style: var(--tw-border-style);
-        border-top-width: calc(1px * var(--tw-divide-y-reverse));
-        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-      }
-
-      :where(.divide-y-0 > :not(:last-child)) {
-        --tw-divide-y-reverse: 0;
-        border-bottom-style: var(--tw-border-style);
-        border-top-style: var(--tw-border-style);
-        border-top-width: calc(0px * var(--tw-divide-y-reverse));
-        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
-      }
-
-      :where(.divide-y-4 > :not(:last-child)) {
-        --tw-divide-y-reverse: 0;
-        border-bottom-style: var(--tw-border-style);
-        border-top-style: var(--tw-border-style);
-        border-top-width: calc(4px * var(--tw-divide-y-reverse));
-        border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
-      }
-
-      :where(.divide-y-123 > :not(:last-child)) {
-        --tw-divide-y-reverse: 0;
-        border-bottom-style: var(--tw-border-style);
-        border-top-style: var(--tw-border-style);
-        border-top-width: calc(123px * var(--tw-divide-y-reverse));
-        border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse)));
-      }
-
-      :where(.divide-y-\\[4px\\] > :not(:last-child)) {
-        --tw-divide-y-reverse: 0;
-        border-bottom-style: var(--tw-border-style);
-        border-top-style: var(--tw-border-style);
-        border-top-width: calc(4px * var(--tw-divide-y-reverse));
-        border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
-      }
-
-      @property --tw-divide-y-reverse {
-        syntax: "*";
-        inherits: false;
-        initial-value: 0;
-      }
-
-      @property --tw-border-style {
-        syntax: "*";
-        inherits: false;
-        initial-value: solid;
-      }
-      "
-    `)
+test('divide-x with custom default border width', () => {
   expect(
-    await run([
-      '-divide-y',
-      'divide-y--4',
-      '-divide-y-4',
-      '-divide-y-123',
-      'divide-y-unknown',
-      'divide-y/foo',
-      'divide-y-4/foo',
-      'divide-y-123/foo',
-      'divide-y-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('divide-y with custom default border width', async () => {
-  expect(
-    await run(
-      ['divide-y'],
+    compileCss(
       css`
         @theme {
           --default-border-width: 2px;
         }
         @tailwind utilities;
       `,
+      ['divide-x'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
-          --tw-border-style: solid;
-        }
-      }
+    ":root {
+      --default-border-width: 2px;
     }
 
-    :where(.divide-y > :not(:last-child)) {
-      --tw-divide-y-reverse: 0;
-      border-bottom-style: var(--tw-border-style);
-      border-top-style: var(--tw-border-style);
-      border-top-width: calc(2px * var(--tw-divide-y-reverse));
-      border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+    :where(.divide-x > :not([hidden]) ~ :not([hidden])) {
+      border-inline-style: var(--tw-border-style);
+      border-inline-end-width: calc(2px * var(--tw-divide-x-reverse));
+      border-inline-start-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
     }
 
-    @property --tw-divide-y-reverse {
-      syntax: "*";
+    @property --tw-divide-x-reverse {
+      syntax: "<number>";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-border-style {
-      syntax: "*";
+      syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;
-    }
-    "
+    }"
   `)
-  expect(await run(['divide-y/foo'])).toEqual('')
 })
 
-test('divide-x-reverse', async () => {
-  expect(await run(['divide-x-reverse'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
-        }
-      }
+test('divide-y', () => {
+  expect(
+    compileCss(
+      css`
+        @tailwind utilities;
+      `,
+      ['divide-y', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":where(.divide-y > :not([hidden]) ~ :not([hidden])) {
+      border-top-style: var(--tw-border-style);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
 
-    :where(.divide-x-reverse > :not(:last-child)) {
+    :where(.divide-y-123 > :not([hidden]) ~ :not([hidden])) {
+      border-top-style: var(--tw-border-style);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: calc(123px * var(--tw-divide-y-reverse));
+      border-top-width: calc(123px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+
+    :where(.divide-y-4 > :not([hidden]) ~ :not([hidden])) {
+      border-top-style: var(--tw-border-style);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
+      border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+
+    :where(.divide-y-\\[4px\\] > :not([hidden]) ~ :not([hidden])) {
+      border-top-style: var(--tw-border-style);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
+      border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+
+    @property --tw-divide-y-reverse {
+      syntax: "<number>";
+      inherits: false;
+      initial-value: 0;
+    }
+
+    @property --tw-border-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }"
+  `)
+  expect(run(['-divide-y', '-divide-y-4', '-divide-y-123'])).toEqual('')
+})
+
+test('divide-y with custom default border width', () => {
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --default-border-width: 2px;
+        }
+        @tailwind utilities;
+      `,
+      ['divide-y'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --default-border-width: 2px;
+    }
+
+    :where(.divide-y > :not([hidden]) ~ :not([hidden])) {
+      border-top-style: var(--tw-border-style);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
+      border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+
+    @property --tw-divide-y-reverse {
+      syntax: "<number>";
+      inherits: false;
+      initial-value: 0;
+    }
+
+    @property --tw-border-style {
+      syntax: "<custom-ident>";
+      inherits: false;
+      initial-value: solid;
+    }"
+  `)
+})
+
+test('divide-x-reverse', () => {
+  expect(run(['divide-x-reverse'])).toMatchInlineSnapshot(`
+    ":where(.divide-x-reverse > :not([hidden]) ~ :not([hidden])) {
       --tw-divide-x-reverse: 1;
     }
 
     @property --tw-divide-x-reverse {
-      syntax: "*";
+      syntax: "<number>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(await run(['-divide-x-reverse', 'divide-x-reverse/foo'])).toEqual('')
+  expect(run(['-divide-x-reverse'])).toEqual('')
 })
 
-test('divide-y-reverse', async () => {
-  expect(await run(['divide-y-reverse'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
-        }
-      }
-    }
-
-    :where(.divide-y-reverse > :not(:last-child)) {
+test('divide-y-reverse', () => {
+  expect(run(['divide-y-reverse'])).toMatchInlineSnapshot(`
+    ":where(.divide-y-reverse > :not([hidden]) ~ :not([hidden])) {
       --tw-divide-y-reverse: 1;
     }
 
     @property --tw-divide-y-reverse {
-      syntax: "*";
+      syntax: "<number>";
       inherits: false;
       initial-value: 0;
-    }
-    "
+    }"
   `)
-  expect(await run(['-divide-y-reverse', 'divide-y-reverse/foo'])).toEqual('')
+  expect(run(['-divide-y-reverse'])).toEqual('')
 })
 
-test('divide-style', async () => {
+test('divide-style', () => {
+  expect(run(['divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none']))
+    .toMatchInlineSnapshot(`
+      ":where(.divide-dashed > :not([hidden]) ~ :not([hidden])) {
+        --tw-border-style: dashed;
+        border-style: dashed;
+      }
+
+      :where(.divide-dotted > :not([hidden]) ~ :not([hidden])) {
+        --tw-border-style: dotted;
+        border-style: dotted;
+      }
+
+      :where(.divide-double > :not([hidden]) ~ :not([hidden])) {
+        --tw-border-style: double;
+        border-style: double;
+      }
+
+      :where(.divide-none > :not([hidden]) ~ :not([hidden])) {
+        --tw-border-style: none;
+        border-style: none;
+      }
+
+      :where(.divide-solid > :not([hidden]) ~ :not([hidden])) {
+        --tw-border-style: solid;
+        border-style: solid;
+      }"
+    `)
   expect(
-    await run(['divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none']),
-  ).toMatchInlineSnapshot(`
-    "
-    :where(.divide-dashed > :not(:last-child)) {
-      --tw-border-style: dashed;
-      border-style: dashed;
-    }
-
-    :where(.divide-dotted > :not(:last-child)) {
-      --tw-border-style: dotted;
-      border-style: dotted;
-    }
-
-    :where(.divide-double > :not(:last-child)) {
-      --tw-border-style: double;
-      border-style: double;
-    }
-
-    :where(.divide-none > :not(:last-child)) {
-      --tw-border-style: none;
-      border-style: none;
-    }
-
-    :where(.divide-solid > :not(:last-child)) {
-      --tw-border-style: solid;
-      border-style: solid;
-    }
-    "
-  `)
-  expect(
-    await run([
+    run([
       'divide',
       '-divide-solid',
       '-divide-dashed',
       '-divide-dotted',
       '-divide-double',
       '-divide-none',
-      'divide-solid/foo',
-      'divide-dashed/foo',
-      'divide-dotted/foo',
-      'divide-double/foo',
-      'divide-none/foo',
     ]),
   ).toEqual('')
 })
 
-test('accent', async () => {
+test('accent', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         'accent-red-500',
         'accent-red-500/50',
-        'accent-red-500/2.25',
-        'accent-red-500/2.5',
-        'accent-red-500/2.75',
         'accent-red-500/[0.5]',
         'accent-red-500/[50%]',
-        'accent-blue-500',
         'accent-current',
         'accent-current/50',
         'accent-current/[0.5]',
         'accent-current/[50%]',
-        'accent-inherit',
         'accent-transparent',
         'accent-[#0088cc]',
         'accent-[#0088cc]/50',
         'accent-[#0088cc]/[0.5]',
         'accent-[#0088cc]/[50%]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --accent-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --accent-color-blue-500: #3b82f6;
     }
 
     .accent-\\[\\#0088cc\\] {
@@ -10580,121 +5099,33 @@ test('accent', async () => {
     }
 
     .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      accent-color: oklab(59.9824% -.067 -.124 / .5);
+      accent-color: #0088cc80;
     }
 
-    .accent-blue-500 {
-      accent-color: var(--accent-color-blue-500);
-    }
-
-    .accent-current, .accent-current\\/50 {
+    .accent-current {
       accent-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-current\\/50 {
-        accent-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .accent-current\\/\\[0\\.5\\] {
-      accent-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-current\\/\\[0\\.5\\] {
-        accent-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .accent-current\\/\\[50\\%\\] {
-      accent-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-current\\/\\[50\\%\\] {
-        accent-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .accent-inherit {
-      accent-color: inherit;
+    .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] {
+      accent-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .accent-red-500 {
-      accent-color: var(--color-red-500);
+      accent-color: var(--color-red-500, #ef4444);
     }
 
-    .accent-red-500\\/2\\.5 {
-      accent-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-red-500\\/2\\.5 {
-        accent-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .accent-red-500\\/2\\.25 {
-      accent-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-red-500\\/2\\.25 {
-        accent-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .accent-red-500\\/2\\.75 {
-      accent-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-red-500\\/2\\.75 {
-        accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    .accent-red-500\\/50 {
-      accent-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-red-500\\/50 {
-        accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .accent-red-500\\/\\[0\\.5\\] {
-      accent-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-red-500\\/\\[0\\.5\\] {
-        accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .accent-red-500\\/\\[50\\%\\] {
-      accent-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .accent-red-500\\/\\[50\\%\\] {
-        accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] {
+      accent-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .accent-transparent {
       accent-color: #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'accent',
       '-accent-red-500',
-      'accent-red-500/-50',
       '-accent-red-500/50',
       '-accent-red-500/[0.5]',
       '-accent-red-500/[50%]',
@@ -10702,67 +5133,43 @@ test('accent', async () => {
       '-accent-current/50',
       '-accent-current/[0.5]',
       '-accent-current/[50%]',
-      '-accent-inherit',
       '-accent-transparent',
-      'accent-[#0088cc]/-50',
       '-accent-[#0088cc]',
       '-accent-[#0088cc]/50',
       '-accent-[#0088cc]/[0.5]',
       '-accent-[#0088cc]/[50%]',
-      'accent-red-500/foo',
-      'accent-red-500/50/foo',
-      'accent-red-500/[0.5]/foo',
-      'accent-red-500/[50%]/foo',
-      'accent-current/foo',
-      'accent-current/50/foo',
-      'accent-current/[0.5]/foo',
-      'accent-current/[50%]/foo',
-      'accent-inherit/foo',
-      'accent-transparent/foo',
-      'accent-[#0088cc]/foo',
-      'accent-[#0088cc]/50/foo',
-      'accent-[#0088cc]/[0.5]/foo',
-      'accent-[#0088cc]/[50%]/foo',
     ]),
   ).toEqual('')
 })
 
-test('caret', async () => {
+test('caret', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         'caret-red-500',
         'caret-red-500/50',
-        'caret-red-500/2.25',
-        'caret-red-500/2.5',
-        'caret-red-500/2.75',
         'caret-red-500/[0.5]',
         'caret-red-500/[50%]',
-        'caret-blue-500',
         'caret-current',
         'caret-current/50',
         'caret-current/[0.5]',
         'caret-current/[50%]',
-        'caret-inherit',
         'caret-transparent',
         'caret-[#0088cc]',
         'caret-[#0088cc]/50',
         'caret-[#0088cc]/[0.5]',
         'caret-[#0088cc]/[50%]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --caret-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --caret-color-blue-500: #3b82f6;
     }
 
     .caret-\\[\\#0088cc\\] {
@@ -10770,118 +5177,31 @@ test('caret', async () => {
     }
 
     .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      caret-color: oklab(59.9824% -.067 -.124 / .5);
+      caret-color: #0088cc80;
     }
 
-    .caret-blue-500 {
-      caret-color: var(--caret-color-blue-500);
-    }
-
-    .caret-current, .caret-current\\/50 {
+    .caret-current {
       caret-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-current\\/50 {
-        caret-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .caret-current\\/\\[0\\.5\\] {
-      caret-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-current\\/\\[0\\.5\\] {
-        caret-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .caret-current\\/\\[50\\%\\] {
-      caret-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-current\\/\\[50\\%\\] {
-        caret-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .caret-inherit {
-      caret-color: inherit;
+    .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] {
+      caret-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .caret-red-500 {
-      caret-color: var(--color-red-500);
+      caret-color: var(--color-red-500, #ef4444);
     }
 
-    .caret-red-500\\/2\\.5 {
-      caret-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-red-500\\/2\\.5 {
-        caret-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .caret-red-500\\/2\\.25 {
-      caret-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-red-500\\/2\\.25 {
-        caret-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .caret-red-500\\/2\\.75 {
-      caret-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-red-500\\/2\\.75 {
-        caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    .caret-red-500\\/50 {
-      caret-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-red-500\\/50 {
-        caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .caret-red-500\\/\\[0\\.5\\] {
-      caret-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-red-500\\/\\[0\\.5\\] {
-        caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .caret-red-500\\/\\[50\\%\\] {
-      caret-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .caret-red-500\\/\\[50\\%\\] {
-        caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] {
+      caret-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .caret-transparent {
       caret-color: #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'caret',
       '-caret-red-500',
       '-caret-red-500/50',
@@ -10891,185 +5211,99 @@ test('caret', async () => {
       '-caret-current/50',
       '-caret-current/[0.5]',
       '-caret-current/[50%]',
-      '-caret-inherit',
       '-caret-transparent',
       '-caret-[#0088cc]',
       '-caret-[#0088cc]/50',
       '-caret-[#0088cc]/[0.5]',
       '-caret-[#0088cc]/[50%]',
-      'caret-red-500/foo',
-      'caret-red-500/50/foo',
-      'caret-red-500/[0.5]/foo',
-      'caret-red-500/[50%]/foo',
-      'caret-current/foo',
-      'caret-current/50/foo',
-      'caret-current/[0.5]/foo',
-      'caret-current/[50%]/foo',
-      'caret-inherit/foo',
-      'caret-transparent/foo',
-      'caret-[#0088cc]/foo',
-      'caret-[#0088cc]/50/foo',
-      'caret-[#0088cc]/[0.5]/foo',
-      'caret-[#0088cc]/[50%]/foo',
     ]),
   ).toEqual('')
 })
 
-test('divide-color', async () => {
+test('divide-color', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         'divide-red-500',
         'divide-red-500/50',
-        'divide-red-500/2.25',
-        'divide-red-500/2.5',
-        'divide-red-500/2.75',
         'divide-red-500/[0.5]',
         'divide-red-500/[50%]',
-        'divide-best-blue',
         'divide-current',
         'divide-current/50',
         'divide-current/[0.5]',
         'divide-current/[50%]',
-        'divide-inherit',
         'divide-transparent',
         'divide-[#0088cc]',
         'divide-[#0088cc]/50',
         'divide-[#0088cc]/[0.5]',
         'divide-[#0088cc]/[50%]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --border-color-best-blue: #6495ed;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --border-color-best-blue: #6495ed;
     }
 
-    :where(.divide-\\[\\#0088cc\\] > :not(:last-child)) {
+    :where(.divide-\\[\\#0088cc\\] > :not([hidden]) ~ :not([hidden])) {
       border-color: #08c;
     }
 
-    :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: oklab(59.9824% -.067 -.124 / .5);
+    :where(.divide-\\[\\#0088cc\\]\\/50 > :not([hidden]) ~ :not([hidden])) {
+      border-color: #0088cc80;
     }
 
-    :where(.divide-best-blue > :not(:last-child)) {
-      border-color: var(--border-color-best-blue);
+    :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) {
+      border-color: #0088cc80;
     }
 
-    :where(.divide-current > :not(:last-child)), :where(.divide-current\\/50 > :not(:last-child)) {
+    :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) {
+      border-color: #0088cc80;
+    }
+
+    :where(.divide-current > :not([hidden]) ~ :not([hidden])) {
       border-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-current\\/50 > :not(:last-child)) {
-        border-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
+    :where(.divide-current\\/50 > :not([hidden]) ~ :not([hidden])) {
+      border-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
-    :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) {
-      border-color: currentColor;
+    :where(.divide-current\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) {
+      border-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) {
-        border-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
+    :where(.divide-current\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) {
+      border-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
-    :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: currentColor;
+    :where(.divide-red-500 > :not([hidden]) ~ :not([hidden])) {
+      border-color: var(--color-red-500, #ef4444);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
-        border-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
+    :where(.divide-red-500\\/50 > :not([hidden]) ~ :not([hidden])) {
+      border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
-    :where(.divide-inherit > :not(:last-child)) {
-      border-color: inherit;
+    :where(.divide-red-500\\/\\[0\\.5\\] > :not([hidden]) ~ :not([hidden])) {
+      border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
-    :where(.divide-red-500 > :not(:last-child)) {
-      border-color: var(--color-red-500);
+    :where(.divide-red-500\\/\\[50\\%\\] > :not([hidden]) ~ :not([hidden])) {
+      border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
-    :where(.divide-red-500\\/2\\.5 > :not(:last-child)) {
-      border-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-red-500\\/2\\.5 > :not(:last-child)) {
-        border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    :where(.divide-red-500\\/2\\.25 > :not(:last-child)) {
-      border-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-red-500\\/2\\.25 > :not(:last-child)) {
-        border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    :where(.divide-red-500\\/2\\.75 > :not(:last-child)) {
-      border-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-red-500\\/2\\.75 > :not(:last-child)) {
-        border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    :where(.divide-red-500\\/50 > :not(:last-child)) {
-      border-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-red-500\\/50 > :not(:last-child)) {
-        border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) {
-      border-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) {
-        border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
-        border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    :where(.divide-transparent > :not(:last-child)) {
+    :where(.divide-transparent > :not([hidden]) ~ :not([hidden])) {
       border-color: #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'divide',
       '-divide-red-500',
       '-divide-red-500/50',
@@ -11079,44 +5313,26 @@ test('divide-color', async () => {
       '-divide-current/50',
       '-divide-current/[0.5]',
       '-divide-current/[50%]',
-      '-divide-inherit',
       '-divide-transparent',
       '-divide-[#0088cc]',
       '-divide-[#0088cc]/50',
       '-divide-[#0088cc]/[0.5]',
       '-divide-[#0088cc]/[50%]',
-      'divide-red-500/foo',
-      'divide-red-500/50/foo',
-      'divide-red-500/[0.5]/foo',
-      'divide-red-500/[50%]/foo',
-      'divide-current/foo',
-      'divide-current/50/foo',
-      'divide-current/[0.5]/foo',
-      'divide-current/[50%]/foo',
-      'divide-inherit/foo',
-      'divide-transparent/foo',
-      'divide-[#0088cc]/foo',
-      'divide-[#0088cc]/50/foo',
-      'divide-[#0088cc]/[0.5]/foo',
-      'divide-[#0088cc]/[50%]/foo',
     ]),
-  ).toEqual('')
+  ).toMatchInlineSnapshot(`""`)
 })
 
-test('place-self', async () => {
+test('place-self', () => {
   expect(
-    await run([
+    run([
       'place-self-auto',
       'place-self-start',
       'place-self-end',
-      'place-self-end-safe',
       'place-self-center',
-      'place-self-center-safe',
       'place-self-stretch',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .place-self-auto {
+    ".place-self-auto {
       place-self: auto;
     }
 
@@ -11124,60 +5340,35 @@ test('place-self', async () => {
       place-self: center;
     }
 
-    .place-self-center-safe {
-      place-self: safe center;
-    }
-
     .place-self-end {
       place-self: end;
     }
 
-    .place-self-end-safe {
-      place-self: safe end;
-    }
-
     .place-self-start {
       place-self: start;
     }
 
     .place-self-stretch {
       place-self: stretch stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'place-self',
       '-place-self-auto',
       '-place-self-start',
       '-place-self-end',
       '-place-self-center',
       '-place-self-stretch',
-      'place-self-auto/foo',
-      'place-self-start/foo',
-      'place-self-end/foo',
-      'place-self-center/foo',
-      'place-self-stretch/foo',
     ]),
   ).toEqual('')
 })
 
-test('self', async () => {
+test('self', () => {
   expect(
-    await run([
-      'self-auto',
-      'self-start',
-      'self-end',
-      'self-end-safe',
-      'self-center',
-      'self-center-safe',
-      'self-stretch',
-      'self-baseline',
-      'self-baseline-last',
-    ]),
+    run(['self-auto', 'self-start', 'self-end', 'self-center', 'self-stretch', 'self-baseline']),
   ).toMatchInlineSnapshot(`
-    "
-    .self-auto {
+    ".self-auto {
       align-self: auto;
     }
 
@@ -11185,37 +5376,24 @@ test('self', async () => {
       align-self: baseline;
     }
 
-    .self-baseline-last {
-      align-self: last baseline;
-    }
-
     .self-center {
       align-self: center;
     }
 
-    .self-center-safe {
-      align-self: safe center;
-    }
-
     .self-end {
       align-self: flex-end;
     }
 
-    .self-end-safe {
-      align-self: safe flex-end;
-    }
-
     .self-start {
       align-self: flex-start;
     }
 
     .self-stretch {
       align-self: stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'self',
       '-self-auto',
       '-self-start',
@@ -11223,31 +5401,22 @@ test('self', async () => {
       '-self-center',
       '-self-stretch',
       '-self-baseline',
-      'self-auto/foo',
-      'self-start/foo',
-      'self-end/foo',
-      'self-center/foo',
-      'self-stretch/foo',
-      'self-baseline/foo',
     ]),
   ).toEqual('')
 })
 
-test('justify-self', async () => {
+test('justify-self', () => {
   expect(
-    await run([
+    run([
       'justify-self-auto',
       'justify-self-start',
       'justify-self-end',
-      'justify-self-end-safe',
       'justify-self-center',
-      'justify-self-center-safe',
       'justify-self-stretch',
       'justify-self-baseline',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .justify-self-auto {
+    ".justify-self-auto {
       justify-self: auto;
     }
 
@@ -11255,29 +5424,20 @@ test('justify-self', async () => {
       justify-self: center;
     }
 
-    .justify-self-center-safe {
-      justify-self: safe center;
-    }
-
     .justify-self-end {
       justify-self: flex-end;
     }
 
-    .justify-self-end-safe {
-      justify-self: safe flex-end;
-    }
-
     .justify-self-start {
       justify-self: flex-start;
     }
 
     .justify-self-stretch {
       justify-self: stretch;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'justify-self',
       '-justify-self-auto',
       '-justify-self-start',
@@ -11285,19 +5445,13 @@ test('justify-self', async () => {
       '-justify-self-center',
       '-justify-self-stretch',
       '-justify-self-baseline',
-      'justify-self-auto/foo',
-      'justify-self-start/foo',
-      'justify-self-end/foo',
-      'justify-self-center/foo',
-      'justify-self-stretch/foo',
-      'justify-self-baseline/foo',
     ]),
   ).toEqual('')
 })
 
-test('overflow', async () => {
+test('overflow', () => {
   expect(
-    await run([
+    run([
       'overflow-auto',
       'overflow-hidden',
       'overflow-clip',
@@ -11305,8 +5459,7 @@ test('overflow', async () => {
       'overflow-scroll',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .overflow-auto {
+    ".overflow-auto {
       overflow: auto;
     }
 
@@ -11324,29 +5477,23 @@ test('overflow', async () => {
 
     .overflow-visible {
       overflow: visible;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'overflow',
       '-overflow-auto',
       '-overflow-hidden',
       '-overflow-clip',
       '-overflow-visible',
       '-overflow-scroll',
-      'overflow-auto/foo',
-      'overflow-hidden/foo',
-      'overflow-clip/foo',
-      'overflow-visible/foo',
-      'overflow-scroll/foo',
     ]),
   ).toEqual('')
 })
 
-test('overflow-x', async () => {
+test('overflow-x', () => {
   expect(
-    await run([
+    run([
       'overflow-x-auto',
       'overflow-x-hidden',
       'overflow-x-clip',
@@ -11354,8 +5501,7 @@ test('overflow-x', async () => {
       'overflow-x-scroll',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .overflow-x-auto {
+    ".overflow-x-auto {
       overflow-x: auto;
     }
 
@@ -11373,29 +5519,23 @@ test('overflow-x', async () => {
 
     .overflow-x-visible {
       overflow-x: visible;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'overflow-x',
       '-overflow-x-auto',
       '-overflow-x-hidden',
       '-overflow-x-clip',
       '-overflow-x-visible',
       '-overflow-x-scroll',
-      'overflow-x-auto/foo',
-      'overflow-x-hidden/foo',
-      'overflow-x-clip/foo',
-      'overflow-x-visible/foo',
-      'overflow-x-scroll/foo',
     ]),
   ).toEqual('')
 })
 
-test('overflow-y', async () => {
+test('overflow-y', () => {
   expect(
-    await run([
+    run([
       'overflow-y-auto',
       'overflow-y-hidden',
       'overflow-y-clip',
@@ -11403,8 +5543,7 @@ test('overflow-y', async () => {
       'overflow-y-scroll',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .overflow-y-auto {
+    ".overflow-y-auto {
       overflow-y: auto;
     }
 
@@ -11422,460 +5561,119 @@ test('overflow-y', async () => {
 
     .overflow-y-visible {
       overflow-y: visible;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'overflow-y',
       '-overflow-y-auto',
       '-overflow-y-hidden',
       '-overflow-y-clip',
       '-overflow-y-visible',
       '-overflow-y-scroll',
-      'overflow-y-auto/foo',
-      'overflow-y-hidden/foo',
-      'overflow-y-clip/foo',
-      'overflow-y-visible/foo',
-      'overflow-y-scroll/foo',
     ]),
   ).toEqual('')
 })
 
-test('overscroll', async () => {
-  expect(await run(['overscroll-auto', 'overscroll-contain', 'overscroll-none']))
-    .toMatchInlineSnapshot(`
-      "
-      .overscroll-auto {
-        overscroll-behavior: auto;
-      }
+test('overscroll', () => {
+  expect(run(['overscroll-auto', 'overscroll-contain', 'overscroll-none'])).toMatchInlineSnapshot(`
+    ".overscroll-auto {
+      overscroll-behavior: auto;
+    }
 
-      .overscroll-contain {
-        overscroll-behavior: contain;
-      }
+    .overscroll-contain {
+      overscroll-behavior: contain;
+    }
 
-      .overscroll-none {
-        overscroll-behavior: none;
-      }
-      "
-    `)
+    .overscroll-none {
+      overscroll-behavior: none;
+    }"
+  `)
   expect(
-    await run([
-      'overscroll',
-      '-overscroll-auto',
-      '-overscroll-contain',
-      '-overscroll-none',
-      'overscroll-auto/foo',
-      'overscroll-contain/foo',
-      'overscroll-none/foo',
-    ]),
+    run(['overscroll', '-overscroll-auto', '-overscroll-contain', '-overscroll-none']),
   ).toEqual('')
 })
 
-test('overscroll-x', async () => {
-  expect(await run(['overscroll-x-auto', 'overscroll-x-contain', 'overscroll-x-none']))
+test('overscroll-x', () => {
+  expect(run(['overscroll-x-auto', 'overscroll-x-contain', 'overscroll-x-none']))
     .toMatchInlineSnapshot(`
-      "
-      .overscroll-x-auto {
-        overscroll-behavior-x: auto;
-      }
+    ".overscroll-x-auto {
+      overscroll-behavior-x: auto;
+    }
 
-      .overscroll-x-contain {
-        overscroll-behavior-x: contain;
-      }
+    .overscroll-x-contain {
+      overscroll-behavior-x: contain;
+    }
 
-      .overscroll-x-none {
-        overscroll-behavior-x: none;
-      }
-      "
-    `)
+    .overscroll-x-none {
+      overscroll-behavior-x: none;
+    }"
+  `)
   expect(
-    await run([
-      'overscroll-x',
-      '-overscroll-x-auto',
-      '-overscroll-x-contain',
-      '-overscroll-x-none',
-      'overscroll-x-auto/foo',
-      'overscroll-x-contain/foo',
-      'overscroll-x-none/foo',
-    ]),
+    run(['overscroll-x', '-overscroll-x-auto', '-overscroll-x-contain', '-overscroll-x-none']),
   ).toEqual('')
 })
 
-test('overscroll-y', async () => {
-  expect(await run(['overscroll-y-auto', 'overscroll-y-contain', 'overscroll-y-none']))
+test('overscroll-y', () => {
+  expect(run(['overscroll-y-auto', 'overscroll-y-contain', 'overscroll-y-none']))
     .toMatchInlineSnapshot(`
-      "
-      .overscroll-y-auto {
-        overscroll-behavior-y: auto;
-      }
+    ".overscroll-y-auto {
+      overscroll-behavior-y: auto;
+    }
 
-      .overscroll-y-contain {
-        overscroll-behavior-y: contain;
-      }
+    .overscroll-y-contain {
+      overscroll-behavior-y: contain;
+    }
 
-      .overscroll-y-none {
-        overscroll-behavior-y: none;
-      }
-      "
-    `)
+    .overscroll-y-none {
+      overscroll-behavior-y: none;
+    }"
+  `)
   expect(
-    await run([
-      'overscroll-y',
-      '-overscroll-y-auto',
-      '-overscroll-y-contain',
-      '-overscroll-y-none',
-      'overscroll-y-auto/foo',
-      'overscroll-y-contain/foo',
-      'overscroll-y-none/foo',
-    ]),
+    run(['overscroll-y', '-overscroll-y-auto', '-overscroll-y-contain', '-overscroll-y-none']),
   ).toEqual('')
 })
 
-test('scroll-behavior', async () => {
-  expect(await run(['scroll-auto', 'scroll-smooth'])).toMatchInlineSnapshot(`
-    "
-    .scroll-auto {
+test('scroll-behavior', () => {
+  expect(run(['scroll-auto', 'scroll-smooth'])).toMatchInlineSnapshot(`
+    ".scroll-auto {
       scroll-behavior: auto;
     }
 
     .scroll-smooth {
       scroll-behavior: smooth;
-    }
-    "
+    }"
   `)
-  expect(
-    await run(['scroll', '-scroll-auto', '-scroll-smooth', 'scroll-auto/foo', 'scroll-smooth/foo']),
-  ).toEqual('')
+  expect(run(['scroll', '-scroll-auto', '-scroll-smooth'])).toEqual('')
 })
 
-test('scrollbar-width', async () => {
-  expect(await run(['scrollbar-auto', 'scrollbar-thin', 'scrollbar-none'])).toMatchInlineSnapshot(`
-    "
-    .scrollbar-auto {
-      scrollbar-width: auto;
-    }
-
-    .scrollbar-none {
-      scrollbar-width: none;
-    }
-
-    .scrollbar-thin {
-      scrollbar-width: thin;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scrollbar',
-      '-scrollbar-auto',
-      '-scrollbar-thin',
-      '-scrollbar-none',
-      'scrollbar-auto/foo',
-      'scrollbar-thin/foo',
-      'scrollbar-none/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('scrollbar-gutter', async () => {
-  expect(await run(['scrollbar-gutter-auto', 'scrollbar-gutter-stable', 'scrollbar-gutter-both']))
-    .toMatchInlineSnapshot(`
-      "
-      .scrollbar-gutter-auto {
-        scrollbar-gutter: auto;
-      }
-
-      .scrollbar-gutter-both {
-        scrollbar-gutter: stable both-edges;
-      }
-
-      .scrollbar-gutter-stable {
-        scrollbar-gutter: stable;
-      }
-      "
-    `)
-  expect(
-    await run([
-      'scrollbar-gutter',
-      '-scrollbar-gutter-auto',
-      '-scrollbar-gutter-stable',
-      '-scrollbar-gutter-both',
-      'scrollbar-gutter-auto/foo',
-      'scrollbar-gutter-stable/foo',
-      'scrollbar-gutter-both/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('scrollbar-thumb', async () => {
-  expect(
-    await run(
-      [
-        'scrollbar-thumb-red-500',
-        'scrollbar-thumb-red-500/50',
-        'scrollbar-thumb-red-500/[0.5]',
-        'scrollbar-thumb-current',
-        'scrollbar-thumb-inherit',
-        'scrollbar-thumb-transparent',
-        'scrollbar-thumb-[#0088cc]',
-        'scrollbar-thumb-[#0088cc]/50',
-      ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scrollbar-thumb: #0000;
-          --tw-scrollbar-track: #0000;
-        }
-      }
-    }
-
-    :root, :host {
-      --color-red-500: #ef4444;
-    }
-
-    .scrollbar-thumb-\\[\\#0088cc\\] {
-      --tw-scrollbar-thumb: #08c;
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-thumb-\\[\\#0088cc\\]\\/50 {
-      --tw-scrollbar-thumb: oklab(59.9824% -.067 -.124 / .5);
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-thumb-current {
-      --tw-scrollbar-thumb: currentcolor;
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-thumb-inherit {
-      --tw-scrollbar-thumb: inherit;
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-thumb-red-500 {
-      --tw-scrollbar-thumb: var(--color-red-500);
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-thumb-red-500\\/50 {
-      --tw-scrollbar-thumb: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .scrollbar-thumb-red-500\\/50 {
-        --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .scrollbar-thumb-red-500\\/50 {
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-thumb-red-500\\/\\[0\\.5\\] {
-      --tw-scrollbar-thumb: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .scrollbar-thumb-red-500\\/\\[0\\.5\\] {
-        --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .scrollbar-thumb-red-500\\/\\[0\\.5\\] {
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-thumb-transparent {
-      --tw-scrollbar-thumb: transparent;
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    @property --tw-scrollbar-thumb {
-      syntax: "<color>";
-      inherits: false;
-      initial-value: #0000;
-    }
-
-    @property --tw-scrollbar-track {
-      syntax: "<color>";
-      inherits: false;
-      initial-value: #0000;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scrollbar-thumb',
-      '-scrollbar-thumb-red-500',
-      '-scrollbar-thumb-red-500/50',
-      'scrollbar-thumb-red-500/foo',
-      'scrollbar-thumb-[#0088cc]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('scrollbar-track', async () => {
-  expect(
-    await run(
-      [
-        'scrollbar-track-red-500',
-        'scrollbar-track-red-500/50',
-        'scrollbar-track-red-500/[0.5]',
-        'scrollbar-track-current',
-        'scrollbar-track-inherit',
-        'scrollbar-track-transparent',
-        'scrollbar-track-[#0088cc]',
-        'scrollbar-track-[#0088cc]/50',
-      ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-scrollbar-thumb: #0000;
-          --tw-scrollbar-track: #0000;
-        }
-      }
-    }
-
-    :root, :host {
-      --color-red-500: #ef4444;
-    }
-
-    .scrollbar-track-\\[\\#0088cc\\] {
-      --tw-scrollbar-track: #08c;
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-track-\\[\\#0088cc\\]\\/50 {
-      --tw-scrollbar-track: oklab(59.9824% -.067 -.124 / .5);
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-track-current {
-      --tw-scrollbar-track: currentcolor;
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-track-inherit {
-      --tw-scrollbar-track: inherit;
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-track-red-500 {
-      --tw-scrollbar-track: var(--color-red-500);
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-track-red-500\\/50 {
-      --tw-scrollbar-track: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .scrollbar-track-red-500\\/50 {
-        --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .scrollbar-track-red-500\\/50 {
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-track-red-500\\/\\[0\\.5\\] {
-      --tw-scrollbar-track: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .scrollbar-track-red-500\\/\\[0\\.5\\] {
-        --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .scrollbar-track-red-500\\/\\[0\\.5\\] {
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    .scrollbar-track-transparent {
-      --tw-scrollbar-track: transparent;
-      scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
-    }
-
-    @property --tw-scrollbar-thumb {
-      syntax: "<color>";
-      inherits: false;
-      initial-value: #0000;
-    }
-
-    @property --tw-scrollbar-track {
-      syntax: "<color>";
-      inherits: false;
-      initial-value: #0000;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'scrollbar-track',
-      '-scrollbar-track-red-500',
-      '-scrollbar-track-red-500/50',
-      'scrollbar-track-red-500/foo',
-      'scrollbar-track-[#0088cc]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('truncate', async () => {
-  expect(await run(['truncate'])).toMatchInlineSnapshot(`
-    "
-    .truncate {
+test('truncate', () => {
+  expect(run(['truncate'])).toMatchInlineSnapshot(`
+    ".truncate {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-    }
-    "
+    }"
   `)
-  expect(await run(['-truncate', 'truncate/foo'])).toEqual('')
+  expect(run(['-truncate'])).toEqual('')
 })
 
-test('text-overflow', async () => {
-  expect(await run(['text-ellipsis', 'text-clip'])).toMatchInlineSnapshot(`
-    "
-    .text-clip {
+test('text-overflow', () => {
+  expect(run(['text-ellipsis', 'text-clip'])).toMatchInlineSnapshot(`
+    ".text-clip {
       text-overflow: clip;
     }
 
     .text-ellipsis {
       text-overflow: ellipsis;
-    }
-    "
+    }"
   `)
-  expect(await run(['-text-ellipsis', '-text-clip', 'text-ellipsis/foo', 'text-clip/foo'])).toEqual(
-    '',
-  )
+  expect(run(['-text-ellipsis', '-text-clip'])).toEqual('')
 })
 
-test('hyphens', async () => {
-  expect(await run(['hyphens-none', 'hyphens-manual', 'hyphens-auto'])).toMatchInlineSnapshot(`
-    "
-    .hyphens-auto {
+test('hyphens', () => {
+  expect(run(['hyphens-none', 'hyphens-manual', 'hyphens-auto'])).toMatchInlineSnapshot(`
+    ".hyphens-auto {
       -webkit-hyphens: auto;
       hyphens: auto;
     }
@@ -11888,25 +5686,14 @@ test('hyphens', async () => {
     .hyphens-none {
       -webkit-hyphens: none;
       hyphens: none;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'hyphens',
-      '-hyphens-none',
-      '-hyphens-manual',
-      '-hyphens-auto',
-      'hyphens-none/foo',
-      'hyphens-manual/foo',
-      'hyphens-auto/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['hyphens', '-hyphens-none', '-hyphens-manual', '-hyphens-auto'])).toEqual('')
 })
 
-test('whitespace', async () => {
+test('whitespace', () => {
   expect(
-    await run([
+    run([
       'whitespace-normal',
       'whitespace-nowrap',
       'whitespace-pre',
@@ -11915,8 +5702,7 @@ test('whitespace', async () => {
       'whitespace-break-spaces',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .whitespace-break-spaces {
+    ".whitespace-break-spaces {
       white-space: break-spaces;
     }
 
@@ -11938,11 +5724,10 @@ test('whitespace', async () => {
 
     .whitespace-pre-wrap {
       white-space: pre-wrap;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'whitespace',
       '-whitespace-normal',
       '-whitespace-nowrap',
@@ -11950,152 +5735,56 @@ test('whitespace', async () => {
       '-whitespace-pre-line',
       '-whitespace-pre-wrap',
       '-whitespace-break-spaces',
-      'whitespace-normal/foo',
-      'whitespace-nowrap/foo',
-      'whitespace-pre/foo',
-      'whitespace-pre-line/foo',
-      'whitespace-pre-wrap/foo',
-      'whitespace-break-spaces/foo',
     ]),
   ).toEqual('')
 })
 
-test('tab', async () => {
-  expect(await run(['tab-2', 'tab-8', 'tab-[12px]', 'tab-[3]'])).toMatchInlineSnapshot(`
-    "
-    .tab-2 {
-      tab-size: 2;
+test('text-wrap', () => {
+  expect(run(['text-wrap', 'text-nowrap', 'text-balance', 'text-pretty'])).toMatchInlineSnapshot(`
+    ".text-balance {
+      text-wrap: balance;
     }
 
-    .tab-8 {
-      tab-size: 8;
+    .text-nowrap {
+      text-wrap: nowrap;
     }
 
-    .tab-\\[3\\] {
-      tab-size: 3;
+    .text-pretty {
+      text-wrap: pretty;
     }
 
-    .tab-\\[12px\\] {
-      tab-size: 12px;
-    }
-    "
+    .text-wrap {
+      text-wrap: wrap;
+    }"
   `)
-  expect(
-    await run([
-      'tab',
-      '-tab-2',
-      'tab-2.5',
-      'tab-1/2',
-      'tab-unknown',
-      'tab-2/foo',
-      'tab-[12px]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-text-wrap', '-text-nowrap', '-text-balance', '-text-pretty'])).toEqual('')
 })
 
-test('text-wrap', async () => {
-  expect(await run(['text-wrap', 'text-nowrap', 'text-balance', 'text-pretty']))
-    .toMatchInlineSnapshot(`
-      "
-      .text-balance {
-        text-wrap: balance;
-      }
-
-      .text-nowrap {
-        text-wrap: nowrap;
-      }
-
-      .text-pretty {
-        text-wrap: pretty;
-      }
-
-      .text-wrap {
-        text-wrap: wrap;
-      }
-      "
-    `)
-  expect(
-    await run([
-      '-text-wrap',
-      '-text-nowrap',
-      '-text-balance',
-      '-text-pretty',
-      'text-wrap/foo',
-      'text-nowrap/foo',
-      'text-balance/foo',
-      'text-pretty/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('word-break', async () => {
-  expect(await run(['break-normal', 'break-words', 'break-all', 'break-keep']))
-    .toMatchInlineSnapshot(`
-      "
-      .break-normal {
-        overflow-wrap: normal;
-        word-break: normal;
-      }
-
-      .break-words {
-        overflow-wrap: break-word;
-      }
-
-      .break-all {
-        word-break: break-all;
-      }
-
-      .break-keep {
-        word-break: keep-all;
-      }
-      "
-    `)
-  expect(
-    await run([
-      '-break-normal',
-      '-break-words',
-      '-break-all',
-      '-break-keep',
-      'break-normal/foo',
-      'break-words/foo',
-      'break-all/foo',
-      'break-keep/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('overflow-wrap', async () => {
-  expect(await run(['wrap-anywhere', 'wrap-break-word', 'wrap-normal'])).toMatchInlineSnapshot(`
-    "
-    .wrap-anywhere {
-      overflow-wrap: anywhere;
+test('overflow-wrap', () => {
+  expect(run(['break-normal', 'break-words', 'break-all', 'break-keep'])).toMatchInlineSnapshot(`
+    ".break-normal {
+      overflow-wrap: normal;
+      word-break: normal;
     }
 
-    .wrap-break-word {
+    .break-words {
       overflow-wrap: break-word;
     }
 
-    .wrap-normal {
-      overflow-wrap: normal;
+    .break-all {
+      word-break: break-all;
     }
-    "
+
+    .break-keep {
+      word-break: break-keep;
+    }"
   `)
-  expect(
-    await run([
-      '-wrap-anywhere',
-      '-wrap-break-word',
-      '-wrap-normal',
-      'wrap-anywhere/foo',
-      'wrap-break-word/foo',
-      'wrap-normal/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-break-normal', '-break-words', '-break-all', '-break-keep'])).toEqual('')
 })
 
-test('rounded', async () => {
+test('rounded', () => {
   expect(
-    await run(
-      ['rounded', 'rounded-full', 'rounded-none', 'rounded-sm', 'rounded-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-sm: 0.125rem;
@@ -12103,16 +5792,16 @@ test('rounded', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded', 'rounded-full', 'rounded-none', 'rounded-sm', 'rounded-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-sm: .125rem;
       --radius: .25rem;
     }
 
     .rounded {
-      border-radius: var(--radius);
+      border-radius: .25rem;
     }
 
     .rounded-\\[4px\\] {
@@ -12120,7 +5809,7 @@ test('rounded', async () => {
     }
 
     .rounded-full {
-      border-radius: 2147483647px;
+      border-radius: 3.40282e38px;
     }
 
     .rounded-none {
@@ -12128,61 +5817,17 @@ test('rounded', async () => {
     }
 
     .rounded-sm {
-      border-radius: var(--radius-sm);
-    }
-    "
+      border-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run(
-      ['rounded-full'],
-      css`
-        @theme {
-          --radius-full: 99999px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --radius-full: 99999px;
-    }
-
-    .rounded-full {
-      border-radius: var(--radius-full);
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        '-rounded',
-        '-rounded-full',
-        '-rounded-none',
-        '-rounded-sm',
-        '-rounded-[4px]',
-        'rounded/foo',
-        'rounded-full/foo',
-        'rounded-none/foo',
-        'rounded-sm/foo',
-        'rounded-[4px]/foo',
-        'rounded-sm/[5]',
-        'rounded-sm/(--foo)',
-      ],
-      css`
-        @theme {
-          --radius-sm: 0.125rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
+    run(['-rounded', '-rounded-full', '-rounded-none', '-rounded-sm', '-rounded-[4px]']),
   ).toEqual('')
 })
 
-test('rounded-s', async () => {
+test('rounded-s', () => {
   expect(
-    await run(
-      ['rounded-s', 'rounded-s-full', 'rounded-s-none', 'rounded-s-sm', 'rounded-s-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12192,10 +5837,10 @@ test('rounded-s', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-s', 'rounded-s-full', 'rounded-s-none', 'rounded-s-sm', 'rounded-s-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12203,8 +5848,8 @@ test('rounded-s', async () => {
     }
 
     .rounded-s {
-      border-start-start-radius: var(--radius);
-      border-end-start-radius: var(--radius);
+      border-start-start-radius: .25rem;
+      border-end-start-radius: .25rem;
     }
 
     .rounded-s-\\[4px\\] {
@@ -12213,41 +5858,28 @@ test('rounded-s', async () => {
     }
 
     .rounded-s-full {
-      border-start-start-radius: var(--radius-full);
-      border-end-start-radius: var(--radius-full);
+      border-start-start-radius: 3.40282e38px;
+      border-end-start-radius: 3.40282e38px;
     }
 
     .rounded-s-none {
-      border-start-start-radius: var(--radius-none);
-      border-end-start-radius: var(--radius-none);
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
     }
 
     .rounded-s-sm {
-      border-start-start-radius: var(--radius-sm);
-      border-end-start-radius: var(--radius-sm);
-    }
-    "
+      border-start-start-radius: var(--radius-sm, .125rem);
+      border-end-start-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
-      '-rounded-s',
-      '-rounded-s-full',
-      '-rounded-s-none',
-      '-rounded-s-sm',
-      '-rounded-s-[4px]',
-      'rounded-s/foo',
-      'rounded-s-full/foo',
-      'rounded-s-none/foo',
-      'rounded-s-sm/foo',
-      'rounded-s-[4px]/foo',
-    ]),
+    run(['-rounded-s', '-rounded-s-full', '-rounded-s-none', '-rounded-s-sm', '-rounded-s-[4px]']),
   ).toEqual('')
 })
 
-test('rounded-e', async () => {
+test('rounded-e', () => {
   expect(
-    await run(
-      ['rounded-e', 'rounded-e-full', 'rounded-e-none', 'rounded-e-sm', 'rounded-e-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12257,10 +5889,10 @@ test('rounded-e', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-e', 'rounded-e-full', 'rounded-e-none', 'rounded-e-sm', 'rounded-e-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12268,8 +5900,8 @@ test('rounded-e', async () => {
     }
 
     .rounded-e {
-      border-start-end-radius: var(--radius);
-      border-end-end-radius: var(--radius);
+      border-start-end-radius: .25rem;
+      border-end-end-radius: .25rem;
     }
 
     .rounded-e-\\[4px\\] {
@@ -12278,41 +5910,28 @@ test('rounded-e', async () => {
     }
 
     .rounded-e-full {
-      border-start-end-radius: var(--radius-full);
-      border-end-end-radius: var(--radius-full);
+      border-start-end-radius: 3.40282e38px;
+      border-end-end-radius: 3.40282e38px;
     }
 
     .rounded-e-none {
-      border-start-end-radius: var(--radius-none);
-      border-end-end-radius: var(--radius-none);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
     }
 
     .rounded-e-sm {
-      border-start-end-radius: var(--radius-sm);
-      border-end-end-radius: var(--radius-sm);
-    }
-    "
+      border-start-end-radius: var(--radius-sm, .125rem);
+      border-end-end-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
-      '-rounded-e',
-      '-rounded-e-full',
-      '-rounded-e-none',
-      '-rounded-e-sm',
-      '-rounded-e-[4px]',
-      'rounded-e/foo',
-      'rounded-e-full/foo',
-      'rounded-e-none/foo',
-      'rounded-e-sm/foo',
-      'rounded-e-[4px]/foo',
-    ]),
+    run(['-rounded-e', '-rounded-e-full', '-rounded-e-none', '-rounded-e-sm', '-rounded-e-[4px]']),
   ).toEqual('')
 })
 
-test('rounded-t', async () => {
+test('rounded-t', () => {
   expect(
-    await run(
-      ['rounded-t', 'rounded-t-full', 'rounded-t-none', 'rounded-t-sm', 'rounded-t-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12322,10 +5941,10 @@ test('rounded-t', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-t', 'rounded-t-full', 'rounded-t-none', 'rounded-t-sm', 'rounded-t-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12333,8 +5952,8 @@ test('rounded-t', async () => {
     }
 
     .rounded-t {
-      border-top-left-radius: var(--radius);
-      border-top-right-radius: var(--radius);
+      border-top-left-radius: .25rem;
+      border-top-right-radius: .25rem;
     }
 
     .rounded-t-\\[4px\\] {
@@ -12343,41 +5962,28 @@ test('rounded-t', async () => {
     }
 
     .rounded-t-full {
-      border-top-left-radius: var(--radius-full);
-      border-top-right-radius: var(--radius-full);
+      border-top-left-radius: 3.40282e38px;
+      border-top-right-radius: 3.40282e38px;
     }
 
     .rounded-t-none {
-      border-top-left-radius: var(--radius-none);
-      border-top-right-radius: var(--radius-none);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
     }
 
     .rounded-t-sm {
-      border-top-left-radius: var(--radius-sm);
-      border-top-right-radius: var(--radius-sm);
-    }
-    "
+      border-top-left-radius: var(--radius-sm, .125rem);
+      border-top-right-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
-      '-rounded-t',
-      '-rounded-t-full',
-      '-rounded-t-none',
-      '-rounded-t-sm',
-      '-rounded-t-[4px]',
-      'rounded-t/foo',
-      'rounded-t-full/foo',
-      'rounded-t-none/foo',
-      'rounded-t-sm/foo',
-      'rounded-t-[4px]/foo',
-    ]),
+    run(['-rounded-t', '-rounded-t-full', '-rounded-t-none', '-rounded-t-sm', '-rounded-t-[4px]']),
   ).toEqual('')
 })
 
-test('rounded-r', async () => {
+test('rounded-r', () => {
   expect(
-    await run(
-      ['rounded-r', 'rounded-r-full', 'rounded-r-none', 'rounded-r-sm', 'rounded-r-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12387,10 +5993,10 @@ test('rounded-r', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-r', 'rounded-r-full', 'rounded-r-none', 'rounded-r-sm', 'rounded-r-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12398,8 +6004,8 @@ test('rounded-r', async () => {
     }
 
     .rounded-r {
-      border-top-right-radius: var(--radius);
-      border-bottom-right-radius: var(--radius);
+      border-top-right-radius: .25rem;
+      border-bottom-right-radius: .25rem;
     }
 
     .rounded-r-\\[4px\\] {
@@ -12408,41 +6014,28 @@ test('rounded-r', async () => {
     }
 
     .rounded-r-full {
-      border-top-right-radius: var(--radius-full);
-      border-bottom-right-radius: var(--radius-full);
+      border-top-right-radius: 3.40282e38px;
+      border-bottom-right-radius: 3.40282e38px;
     }
 
     .rounded-r-none {
-      border-top-right-radius: var(--radius-none);
-      border-bottom-right-radius: var(--radius-none);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
 
     .rounded-r-sm {
-      border-top-right-radius: var(--radius-sm);
-      border-bottom-right-radius: var(--radius-sm);
-    }
-    "
+      border-top-right-radius: var(--radius-sm, .125rem);
+      border-bottom-right-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
-      '-rounded-r',
-      '-rounded-r-full',
-      '-rounded-r-none',
-      '-rounded-r-sm',
-      '-rounded-r-[4px]',
-      'rounded-r/foo',
-      'rounded-r-full/foo',
-      'rounded-r-none/foo',
-      'rounded-r-sm/foo',
-      'rounded-r-[4px]/foo',
-    ]),
+    run(['-rounded-r', '-rounded-r-full', '-rounded-r-none', '-rounded-r-sm', '-rounded-r-[4px]']),
   ).toEqual('')
 })
 
-test('rounded-b', async () => {
+test('rounded-b', () => {
   expect(
-    await run(
-      ['rounded-b', 'rounded-b-full', 'rounded-b-none', 'rounded-b-sm', 'rounded-b-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12452,10 +6045,10 @@ test('rounded-b', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-b', 'rounded-b-full', 'rounded-b-none', 'rounded-b-sm', 'rounded-b-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12463,8 +6056,8 @@ test('rounded-b', async () => {
     }
 
     .rounded-b {
-      border-bottom-right-radius: var(--radius);
-      border-bottom-left-radius: var(--radius);
+      border-bottom-right-radius: .25rem;
+      border-bottom-left-radius: .25rem;
     }
 
     .rounded-b-\\[4px\\] {
@@ -12473,41 +6066,28 @@ test('rounded-b', async () => {
     }
 
     .rounded-b-full {
-      border-bottom-right-radius: var(--radius-full);
-      border-bottom-left-radius: var(--radius-full);
+      border-bottom-right-radius: 3.40282e38px;
+      border-bottom-left-radius: 3.40282e38px;
     }
 
     .rounded-b-none {
-      border-bottom-right-radius: var(--radius-none);
-      border-bottom-left-radius: var(--radius-none);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
     }
 
     .rounded-b-sm {
-      border-bottom-right-radius: var(--radius-sm);
-      border-bottom-left-radius: var(--radius-sm);
-    }
-    "
+      border-bottom-right-radius: var(--radius-sm, .125rem);
+      border-bottom-left-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
-      '-rounded-b',
-      '-rounded-b-full',
-      '-rounded-b-none',
-      '-rounded-b-sm',
-      '-rounded-b-[4px]',
-      'rounded-b/foo',
-      'rounded-b-full/foo',
-      'rounded-b-none/foo',
-      'rounded-b-sm/foo',
-      'rounded-b-[4px]/foo',
-    ]),
+    run(['-rounded-b', '-rounded-b-full', '-rounded-b-none', '-rounded-b-sm', '-rounded-b-[4px]']),
   ).toEqual('')
 })
 
-test('rounded-l', async () => {
+test('rounded-l', () => {
   expect(
-    await run(
-      ['rounded-l', 'rounded-l-full', 'rounded-l-none', 'rounded-l-sm', 'rounded-l-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12517,10 +6097,10 @@ test('rounded-l', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-l', 'rounded-l-full', 'rounded-l-none', 'rounded-l-sm', 'rounded-l-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12528,8 +6108,8 @@ test('rounded-l', async () => {
     }
 
     .rounded-l {
-      border-top-left-radius: var(--radius);
-      border-bottom-left-radius: var(--radius);
+      border-top-left-radius: .25rem;
+      border-bottom-left-radius: .25rem;
     }
 
     .rounded-l-\\[4px\\] {
@@ -12538,41 +6118,28 @@ test('rounded-l', async () => {
     }
 
     .rounded-l-full {
-      border-top-left-radius: var(--radius-full);
-      border-bottom-left-radius: var(--radius-full);
+      border-top-left-radius: 3.40282e38px;
+      border-bottom-left-radius: 3.40282e38px;
     }
 
     .rounded-l-none {
-      border-top-left-radius: var(--radius-none);
-      border-bottom-left-radius: var(--radius-none);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
 
     .rounded-l-sm {
-      border-top-left-radius: var(--radius-sm);
-      border-bottom-left-radius: var(--radius-sm);
-    }
-    "
+      border-top-left-radius: var(--radius-sm, .125rem);
+      border-bottom-left-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
-      '-rounded-l',
-      '-rounded-l-full',
-      '-rounded-l-none',
-      '-rounded-l-sm',
-      '-rounded-l-[4px]',
-      'rounded-l/foo',
-      'rounded-l-full/foo',
-      'rounded-l-none/foo',
-      'rounded-l-sm/foo',
-      'rounded-l-[4px]/foo',
-    ]),
+    run(['-rounded-l', '-rounded-l-full', '-rounded-l-none', '-rounded-l-sm', '-rounded-l-[4px]']),
   ).toEqual('')
 })
 
-test('rounded-ss', async () => {
+test('rounded-ss', () => {
   expect(
-    await run(
-      ['rounded-ss', 'rounded-ss-full', 'rounded-ss-none', 'rounded-ss-sm', 'rounded-ss-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12582,10 +6149,10 @@ test('rounded-ss', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-ss', 'rounded-ss-full', 'rounded-ss-none', 'rounded-ss-sm', 'rounded-ss-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12593,7 +6160,7 @@ test('rounded-ss', async () => {
     }
 
     .rounded-ss {
-      border-start-start-radius: var(--radius);
+      border-start-start-radius: .25rem;
     }
 
     .rounded-ss-\\[4px\\] {
@@ -12601,38 +6168,31 @@ test('rounded-ss', async () => {
     }
 
     .rounded-ss-full {
-      border-start-start-radius: var(--radius-full);
+      border-start-start-radius: 3.40282e38px;
     }
 
     .rounded-ss-none {
-      border-start-start-radius: var(--radius-none);
+      border-start-start-radius: 0;
     }
 
     .rounded-ss-sm {
-      border-start-start-radius: var(--radius-sm);
-    }
-    "
+      border-start-start-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
+    run([
       '-rounded-ss',
       '-rounded-ss-full',
       '-rounded-ss-none',
       '-rounded-ss-sm',
       '-rounded-ss-[4px]',
-      'rounded-ss/foo',
-      'rounded-ss-full/foo',
-      'rounded-ss-none/foo',
-      'rounded-ss-sm/foo',
-      'rounded-ss-[4px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('rounded-se', async () => {
+test('rounded-se', () => {
   expect(
-    await run(
-      ['rounded-se', 'rounded-se-full', 'rounded-se-none', 'rounded-se-sm', 'rounded-se-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12642,10 +6202,10 @@ test('rounded-se', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-se', 'rounded-se-full', 'rounded-se-none', 'rounded-se-sm', 'rounded-se-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12653,7 +6213,7 @@ test('rounded-se', async () => {
     }
 
     .rounded-se {
-      border-start-end-radius: var(--radius);
+      border-start-end-radius: .25rem;
     }
 
     .rounded-se-\\[4px\\] {
@@ -12661,38 +6221,31 @@ test('rounded-se', async () => {
     }
 
     .rounded-se-full {
-      border-start-end-radius: var(--radius-full);
+      border-start-end-radius: 3.40282e38px;
     }
 
     .rounded-se-none {
-      border-start-end-radius: var(--radius-none);
+      border-start-end-radius: 0;
     }
 
     .rounded-se-sm {
-      border-start-end-radius: var(--radius-sm);
-    }
-    "
+      border-start-end-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
+    run([
       '-rounded-se',
       '-rounded-se-full',
       '-rounded-se-none',
       '-rounded-se-sm',
       '-rounded-se-[4px]',
-      'rounded-se/foo',
-      'rounded-se-full/foo',
-      'rounded-se-none/foo',
-      'rounded-se-sm/foo',
-      'rounded-se-[4px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('rounded-ee', async () => {
+test('rounded-ee', () => {
   expect(
-    await run(
-      ['rounded-ee', 'rounded-ee-full', 'rounded-ee-none', 'rounded-ee-sm', 'rounded-ee-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12702,10 +6255,10 @@ test('rounded-ee', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-ee', 'rounded-ee-full', 'rounded-ee-none', 'rounded-ee-sm', 'rounded-ee-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12713,7 +6266,7 @@ test('rounded-ee', async () => {
     }
 
     .rounded-ee {
-      border-end-end-radius: var(--radius);
+      border-end-end-radius: .25rem;
     }
 
     .rounded-ee-\\[4px\\] {
@@ -12721,38 +6274,31 @@ test('rounded-ee', async () => {
     }
 
     .rounded-ee-full {
-      border-end-end-radius: var(--radius-full);
+      border-end-end-radius: 3.40282e38px;
     }
 
     .rounded-ee-none {
-      border-end-end-radius: var(--radius-none);
+      border-end-end-radius: 0;
     }
 
     .rounded-ee-sm {
-      border-end-end-radius: var(--radius-sm);
-    }
-    "
+      border-end-end-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
+    run([
       '-rounded-ee',
       '-rounded-ee-full',
       '-rounded-ee-none',
       '-rounded-ee-sm',
       '-rounded-ee-[4px]',
-      'rounded-ee/foo',
-      'rounded-ee-full/foo',
-      'rounded-ee-none/foo',
-      'rounded-ee-sm/foo',
-      'rounded-ee-[4px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('rounded-es', async () => {
+test('rounded-es', () => {
   expect(
-    await run(
-      ['rounded-es', 'rounded-es-full', 'rounded-es-none', 'rounded-es-sm', 'rounded-es-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12762,10 +6308,10 @@ test('rounded-es', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-es', 'rounded-es-full', 'rounded-es-none', 'rounded-es-sm', 'rounded-es-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12773,7 +6319,7 @@ test('rounded-es', async () => {
     }
 
     .rounded-es {
-      border-end-start-radius: var(--radius);
+      border-end-start-radius: .25rem;
     }
 
     .rounded-es-\\[4px\\] {
@@ -12781,38 +6327,31 @@ test('rounded-es', async () => {
     }
 
     .rounded-es-full {
-      border-end-start-radius: var(--radius-full);
+      border-end-start-radius: 3.40282e38px;
     }
 
     .rounded-es-none {
-      border-end-start-radius: var(--radius-none);
+      border-end-start-radius: 0;
     }
 
     .rounded-es-sm {
-      border-end-start-radius: var(--radius-sm);
-    }
-    "
+      border-end-start-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
+    run([
       '-rounded-es',
       '-rounded-es-full',
       '-rounded-es-none',
       '-rounded-es-sm',
       '-rounded-es-[4px]',
-      'rounded-es/foo',
-      'rounded-es-full/foo',
-      'rounded-es-none/foo',
-      'rounded-es-sm/foo',
-      'rounded-es-[4px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('rounded-tl', async () => {
+test('rounded-tl', () => {
   expect(
-    await run(
-      ['rounded-tl', 'rounded-tl-full', 'rounded-tl-none', 'rounded-tl-sm', 'rounded-tl-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12822,10 +6361,10 @@ test('rounded-tl', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-tl', 'rounded-tl-full', 'rounded-tl-none', 'rounded-tl-sm', 'rounded-tl-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12833,7 +6372,7 @@ test('rounded-tl', async () => {
     }
 
     .rounded-tl {
-      border-top-left-radius: var(--radius);
+      border-top-left-radius: .25rem;
     }
 
     .rounded-tl-\\[4px\\] {
@@ -12841,38 +6380,31 @@ test('rounded-tl', async () => {
     }
 
     .rounded-tl-full {
-      border-top-left-radius: var(--radius-full);
+      border-top-left-radius: 3.40282e38px;
     }
 
     .rounded-tl-none {
-      border-top-left-radius: var(--radius-none);
+      border-top-left-radius: 0;
     }
 
     .rounded-tl-sm {
-      border-top-left-radius: var(--radius-sm);
-    }
-    "
+      border-top-left-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
+    run([
       '-rounded-tl',
       '-rounded-tl-full',
       '-rounded-tl-none',
       '-rounded-tl-sm',
       '-rounded-tl-[4px]',
-      'rounded-tl/foo',
-      'rounded-tl-full/foo',
-      'rounded-tl-none/foo',
-      'rounded-tl-sm/foo',
-      'rounded-tl-[4px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('rounded-tr', async () => {
+test('rounded-tr', () => {
   expect(
-    await run(
-      ['rounded-tr', 'rounded-tr-full', 'rounded-tr-none', 'rounded-tr-sm', 'rounded-tr-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12882,10 +6414,10 @@ test('rounded-tr', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-tr', 'rounded-tr-full', 'rounded-tr-none', 'rounded-tr-sm', 'rounded-tr-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12893,7 +6425,7 @@ test('rounded-tr', async () => {
     }
 
     .rounded-tr {
-      border-top-right-radius: var(--radius);
+      border-top-right-radius: .25rem;
     }
 
     .rounded-tr-\\[4px\\] {
@@ -12901,38 +6433,31 @@ test('rounded-tr', async () => {
     }
 
     .rounded-tr-full {
-      border-top-right-radius: var(--radius-full);
+      border-top-right-radius: 3.40282e38px;
     }
 
     .rounded-tr-none {
-      border-top-right-radius: var(--radius-none);
+      border-top-right-radius: 0;
     }
 
     .rounded-tr-sm {
-      border-top-right-radius: var(--radius-sm);
-    }
-    "
+      border-top-right-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
+    run([
       '-rounded-tr',
       '-rounded-tr-full',
       '-rounded-tr-none',
       '-rounded-tr-sm',
       '-rounded-tr-[4px]',
-      'rounded-tr/foo',
-      'rounded-tr-full/foo',
-      'rounded-tr-none/foo',
-      'rounded-tr-sm/foo',
-      'rounded-tr-[4px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('rounded-br', async () => {
+test('rounded-br', () => {
   expect(
-    await run(
-      ['rounded-br', 'rounded-br-full', 'rounded-br-none', 'rounded-br-sm', 'rounded-br-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -12942,10 +6467,10 @@ test('rounded-br', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-br', 'rounded-br-full', 'rounded-br-none', 'rounded-br-sm', 'rounded-br-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -12953,7 +6478,7 @@ test('rounded-br', async () => {
     }
 
     .rounded-br {
-      border-bottom-right-radius: var(--radius);
+      border-bottom-right-radius: .25rem;
     }
 
     .rounded-br-\\[4px\\] {
@@ -12961,38 +6486,31 @@ test('rounded-br', async () => {
     }
 
     .rounded-br-full {
-      border-bottom-right-radius: var(--radius-full);
+      border-bottom-right-radius: 3.40282e38px;
     }
 
     .rounded-br-none {
-      border-bottom-right-radius: var(--radius-none);
+      border-bottom-right-radius: 0;
     }
 
     .rounded-br-sm {
-      border-bottom-right-radius: var(--radius-sm);
-    }
-    "
+      border-bottom-right-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
+    run([
       '-rounded-br',
       '-rounded-br-full',
       '-rounded-br-none',
       '-rounded-br-sm',
       '-rounded-br-[4px]',
-      'rounded-br/foo',
-      'rounded-br-full/foo',
-      'rounded-br-none/foo',
-      'rounded-br-sm/foo',
-      'rounded-br-[4px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('rounded-bl', async () => {
+test('rounded-bl', () => {
   expect(
-    await run(
-      ['rounded-bl', 'rounded-bl-full', 'rounded-bl-none', 'rounded-bl-sm', 'rounded-bl-[4px]'],
+    compileCss(
       css`
         @theme {
           --radius-none: 0px;
@@ -13002,10 +6520,10 @@ test('rounded-bl', async () => {
         }
         @tailwind utilities;
       `,
+      ['rounded-bl', 'rounded-bl-full', 'rounded-bl-none', 'rounded-bl-sm', 'rounded-bl-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --radius-none: 0px;
       --radius-full: 9999px;
       --radius-sm: .125rem;
@@ -13013,7 +6531,7 @@ test('rounded-bl', async () => {
     }
 
     .rounded-bl {
-      border-bottom-left-radius: var(--radius);
+      border-bottom-left-radius: .25rem;
     }
 
     .rounded-bl-\\[4px\\] {
@@ -13021,37 +6539,31 @@ test('rounded-bl', async () => {
     }
 
     .rounded-bl-full {
-      border-bottom-left-radius: var(--radius-full);
+      border-bottom-left-radius: 3.40282e38px;
     }
 
     .rounded-bl-none {
-      border-bottom-left-radius: var(--radius-none);
+      border-bottom-left-radius: 0;
     }
 
     .rounded-bl-sm {
-      border-bottom-left-radius: var(--radius-sm);
-    }
-    "
+      border-bottom-left-radius: var(--radius-sm, .125rem);
+    }"
   `)
   expect(
-    await run([
+    run([
       '-rounded-bl',
       '-rounded-bl-full',
       '-rounded-bl-none',
       '-rounded-bl-sm',
       '-rounded-bl-[4px]',
-      'rounded-bl/foo',
-      'rounded-bl-full/foo',
-      'rounded-bl-none/foo',
-      'rounded-bl-sm/foo',
-      'rounded-bl-[4px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('border-style', async () => {
+test('border-style', () => {
   expect(
-    await run([
+    run([
       'border-solid',
       'border-dashed',
       'border-dotted',
@@ -13060,8 +6572,7 @@ test('border-style', async () => {
       'border-none',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .border-dashed {
+    ".border-dashed {
       --tw-border-style: dashed;
       border-style: dashed;
     }
@@ -13089,23 +6600,16 @@ test('border-style', async () => {
     .border-solid {
       --tw-border-style: solid;
       border-style: solid;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       '-border-solid',
       '-border-dashed',
       '-border-dotted',
       '-border-double',
       '-border-hidden',
       '-border-none',
-      'border-solid/foo',
-      'border-dashed/foo',
-      'border-dotted/foo',
-      'border-double/foo',
-      'border-hidden/foo',
-      'border-none/foo',
     ]),
   ).toEqual('')
 })
@@ -13118,8 +6622,6 @@ const prefixes = [
   'border-y',
   'border-s',
   'border-e',
-  'border-bs',
-  'border-be',
   'border-t',
   'border-r',
   'border-b',
@@ -13127,7 +6629,7 @@ const prefixes = [
 ]
 
 for (let prefix of prefixes) {
-  test(`${prefix}-*`, async () => {
+  test(`${prefix}-*`, () => {
     let classes = []
 
     // Width
@@ -13142,88 +6644,58 @@ for (let prefix of prefixes) {
     classes.push(`${prefix}-[medium]`)
     classes.push(`${prefix}-[thick]`)
     classes.push(`${prefix}-[12px]`)
-    classes.push(`${prefix}-[12px_8px]`)
-    classes.push(`${prefix}-[0_2px_0_2px]`)
-    classes.push(`${prefix}-[0_1]`)
-    classes.push(`${prefix}-[thin_2px]`)
-    classes.push(`${prefix}-[length:var(--my-width)]`)
-    classes.push(`${prefix}-[line-width:var(--my-width)]`)
+    classes.push(`${prefix}-[length:--my-width]`)
+    classes.push(`${prefix}-[line-width:--my-width]`)
 
     // Color
     classes.push(`${prefix}-red-500`)
     classes.push(`${prefix}-red-500/50`)
-    classes.push(`${prefix}-red-500/2.25`)
-    classes.push(`${prefix}-red-500/2.5`)
-    classes.push(`${prefix}-red-500/2.75`)
-    classes.push(`${prefix}-blue-500`)
     classes.push(`${prefix}-[#0088cc]`)
     classes.push(`${prefix}-[#0088cc]/50`)
     classes.push(`${prefix}-current`)
     classes.push(`${prefix}-current/50`)
-    classes.push(`${prefix}-inherit`)
     classes.push(`${prefix}-transparent`)
 
     // Inference: Color
-    classes.push(`${prefix}-[var(--my-color)]`)
-    classes.push(`${prefix}-[var(--my-color)]/50`)
-    classes.push(`${prefix}-[color:var(--my-color)]`)
-    classes.push(`${prefix}-[color:var(--my-color)]/50`)
+    classes.push(`${prefix}-[--my-color]`)
+    classes.push(`${prefix}-[--my-color]/50`)
+    classes.push(`${prefix}-[color:--my-color]`)
+    classes.push(`${prefix}-[color:--my-color]/50`)
 
     expect(
-      await run(
-        classes,
+      compileCss(
         css`
           @theme {
             --radius-none: 0px;
             --radius-full: 9999px;
             --radius-sm: 0.125rem;
             --color-red-500: #ef4444;
-            --border-color-blue-500: #3b82f6;
           }
           @tailwind utilities;
         `,
+        classes,
       ),
     ).toMatchSnapshot()
 
     // No border utilities can ever be negative
-    expect(await run(classes.map((cls) => `-${cls}`))).toEqual('')
-    expect(
-      await run([
-        `${prefix}/foo`,
-        `${prefix}-0/foo`,
-        `${prefix}-2/foo`,
-        `${prefix}-4/foo`,
-        `${prefix}-123/foo`,
-        `${prefix}-[thin]/foo`,
-        `${prefix}-[medium]/foo`,
-        `${prefix}-[thick]/foo`,
-        `${prefix}-[12px]/foo`,
-        `${prefix}-[length:var(--my-width)]/foo`,
-        `${prefix}-[line-width:var(--my-width)]/foo`,
-      ]),
-    ).toEqual('')
+    expect(run(classes.map((cls) => `-${cls}`))).toEqual('')
   })
 }
 
-test('border with custom default border width', async () => {
+test('border with custom default border width', () => {
   expect(
-    await run(
-      ['border'],
+    compileCss(
       css`
         @theme {
           --default-border-width: 2px;
         }
         @tailwind utilities;
       `,
+      ['border'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-border-style: solid;
-        }
-      }
+    ":root {
+      --default-border-width: 2px;
     }
 
     .border {
@@ -13232,115 +6704,61 @@ test('border with custom default border width', async () => {
     }
 
     @property --tw-border-style {
-      syntax: "*";
+      syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;
-    }
-    "
+    }"
   `)
-  expect(await run(['-border', 'border/foo'])).toEqual('')
 })
 
-test('bg', async () => {
+test('bg', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         // background-color
+        'bg-inherit',
         'bg-red-500',
         'bg-red-500/50',
-        'bg-red-500/2.25',
-        'bg-red-500/2.5',
-        'bg-red-500/2.75',
         'bg-red-500/[0.5]',
         'bg-red-500/[50%]',
-        'bg-red-500/100',
-        'bg-red-500/[100%]',
-        'bg-blue-500',
         'bg-current',
         'bg-current/50',
         'bg-current/[0.5]',
         'bg-current/[50%]',
-        'bg-current/[var(--bg-opacity)]',
-        'bg-inherit',
         'bg-transparent',
         'bg-[#0088cc]',
         'bg-[#0088cc]/50',
         'bg-[#0088cc]/[0.5]',
         'bg-[#0088cc]/[50%]',
-        'bg-[var(--some-var)]',
-        'bg-[var(--some-var)]/50',
-        'bg-[var(--some-var)]/[0.5]',
-        'bg-[var(--some-var)]/[50%]',
-        'bg-[color:var(--some-var)]',
-        'bg-[color:var(--some-var)]/50',
-        'bg-[color:var(--some-var)]/[0.5]',
-        'bg-[color:var(--some-var)]/[50%]',
+        'bg-[--some-var]',
+        'bg-[--some-var]/50',
+        'bg-[--some-var]/[0.5]',
+        'bg-[--some-var]/[50%]',
+        'bg-[color:--some-var]',
+        'bg-[color:--some-var]/50',
+        'bg-[color:--some-var]/[0.5]',
+        'bg-[color:--some-var]/[50%]',
 
         // background-image
         'bg-none',
-
-        // Modern linear-gradient API
-        'bg-linear-to-t',
-        'bg-linear-to-tr',
-        'bg-linear-to-r',
-        'bg-linear-to-br',
-        'bg-linear-to-b',
-        'bg-linear-to-bl',
-        'bg-linear-to-l',
-        'bg-linear-to-tl',
-        'bg-linear-45',
-        '-bg-linear-45',
-
-        // With interpolation mode modifier
-        'bg-linear-to-r/oklch',
-        'bg-linear-to-r/oklab',
-        'bg-linear-to-r/hsl',
-        'bg-linear-to-r/srgb',
-        'bg-linear-to-r/longer',
-        'bg-linear-to-r/shorter',
-        'bg-linear-to-r/increasing',
-        'bg-linear-to-r/decreasing',
-        'bg-linear-to-r/[in_hsl_longer_hue]',
-        'bg-linear-45/oklab',
-        '-bg-linear-45/oklab',
-        'bg-linear-45/shorter',
-        'bg-linear-45/[in_hsl_longer_hue]',
-        'bg-conic/oklch',
-        'bg-conic/oklab',
-        'bg-conic/hsl',
-        'bg-conic/srgb',
-        'bg-conic/longer',
-        'bg-conic/shorter',
-        'bg-conic/increasing',
-        'bg-conic/decreasing',
-        'bg-conic/[in_hsl_longer_hue]',
-        'bg-conic-45/oklab',
-        '-bg-conic-45/oklab',
-        'bg-conic-45/shorter',
-        'bg-conic-45/[in_hsl_longer_hue]',
-        'bg-radial/oklch',
-        'bg-radial/oklab',
-        'bg-radial/hsl',
-        'bg-radial/srgb',
-        'bg-radial/longer',
-        'bg-radial/shorter',
-        'bg-radial/increasing',
-        'bg-radial/decreasing',
-        'bg-radial/[in_hsl_longer_hue]',
-        'bg-radial-[circle_at_center]',
-        // Invalid but proves not converted to `in oklch longer hue` when used
-        // as an arbitrary value
-        'bg-linear-to-r/[longer]',
-
+        'bg-gradient-to-t',
+        'bg-gradient-to-tr',
+        'bg-gradient-to-r',
+        'bg-gradient-to-br',
+        'bg-gradient-to-b',
+        'bg-gradient-to-bl',
+        'bg-gradient-to-l',
+        'bg-gradient-to-tl',
         'bg-[url(/image.png)]',
-        'bg-[url:var(--my-url)]',
+        'bg-[url:--my-url]',
         'bg-[linear-gradient(to_bottom,red,blue)]',
-        'bg-[image:var(--my-gradient)]',
-        'bg-linear-[125deg]',
-        'bg-linear-[1.3rad]',
-        'bg-linear-[to_bottom]',
-        '-bg-linear-[125deg]',
-        '-bg-linear-[1.3rad]',
+        'bg-[image:--my-gradient]',
 
         // background-size
         'bg-auto',
@@ -13356,48 +6774,31 @@ test('bg', async () => {
         'bg-scroll',
 
         // background-position
-        'bg-top',
-        'bg-top-left',
-        'bg-top-right',
-        'bg-bottom',
-        'bg-bottom-left',
-        'bg-bottom-right',
-        'bg-left',
-        'bg-right',
         'bg-center',
+        'bg-top',
+        'bg-right-top',
+        'bg-right-bottom',
+        'bg-bottom',
+        'bg-left-bottom',
+        'bg-left',
+        'bg-left-top',
         'bg-[50%]',
         'bg-[120px]',
         'bg-[120px_120px]',
-        'bg-[length:120px_120px]',
         'bg-[position:120px_120px]',
-        'bg-[size:120px_120px]',
-        // Legacy versions in v4.0 and earlier
-        'bg-right-top',
-        'bg-right-bottom',
-        'bg-left-bottom',
-        'bg-left-top',
 
         // background-repeat
         'bg-repeat',
         'bg-no-repeat',
         'bg-repeat-x',
         'bg-repeat-y',
-        'bg-repeat-round',
-        'bg-repeat-space',
+        'bg-round',
+        'bg-space',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --background-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --background-color-blue-500: #3b82f6;
     }
 
     .bg-\\[\\#0088cc\\] {
@@ -13405,111 +6806,31 @@ test('bg', async () => {
     }
 
     .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      background-color: oklab(59.9824% -.067 -.124 / .5);
+      background-color: #0088cc80;
     }
 
-    .bg-\\[color\\:var\\(--some-var\\)\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 {
+    .bg-\\[--some-var\\] {
       background-color: var(--some-var);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 {
-        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
-      }
+    .bg-\\[--some-var\\]\\/50, .bg-\\[--some-var\\]\\/\\[0\\.5\\], .bg-\\[--some-var\\]\\/\\[50\\%\\] {
+      background-color: color-mix(in srgb, var(--some-var) 50%, transparent);
     }
 
-    .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] {
+    .bg-\\[color\\:--some-var\\] {
       background-color: var(--some-var);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] {
-        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
-      }
+    .bg-\\[color\\:--some-var\\]\\/50, .bg-\\[color\\:--some-var\\]\\/\\[0\\.5\\], .bg-\\[color\\:--some-var\\]\\/\\[50\\%\\] {
+      background-color: color-mix(in srgb, var(--some-var) 50%, transparent);
     }
 
-    .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] {
-      background-color: var(--some-var);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] {
-        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
-      }
-    }
-
-    .bg-\\[var\\(--some-var\\)\\], .bg-\\[var\\(--some-var\\)\\]\\/50 {
-      background-color: var(--some-var);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-\\[var\\(--some-var\\)\\]\\/50 {
-        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
-      }
-    }
-
-    .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] {
-      background-color: var(--some-var);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] {
-        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
-      }
-    }
-
-    .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] {
-      background-color: var(--some-var);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] {
-        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
-      }
-    }
-
-    .bg-blue-500 {
-      background-color: var(--background-color-blue-500);
-    }
-
-    .bg-current, .bg-current\\/50 {
+    .bg-current {
       background-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-current\\/50 {
-        background-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .bg-current\\/\\[0\\.5\\] {
-      background-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-current\\/\\[0\\.5\\] {
-        background-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .bg-current\\/\\[50\\%\\] {
-      background-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-current\\/\\[50\\%\\] {
-        background-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .bg-current\\/\\[var\\(--bg-opacity\\)\\] {
-      background-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-current\\/\\[var\\(--bg-opacity\\)\\] {
-        background-color: color-mix(in oklab, currentcolor var(--bg-opacity), transparent);
-      }
+    .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
+      background-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .bg-inherit {
@@ -13517,558 +6838,18 @@ test('bg', async () => {
     }
 
     .bg-red-500 {
-      background-color: var(--color-red-500);
+      background-color: var(--color-red-500, #ef4444);
     }
 
-    .bg-red-500\\/2\\.5 {
-      background-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-red-500\\/2\\.5 {
-        background-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .bg-red-500\\/2\\.25 {
-      background-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-red-500\\/2\\.25 {
-        background-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .bg-red-500\\/2\\.75 {
-      background-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-red-500\\/2\\.75 {
-        background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    .bg-red-500\\/50 {
-      background-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-red-500\\/50 {
-        background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .bg-red-500\\/100 {
-      background-color: var(--color-red-500);
-    }
-
-    .bg-red-500\\/\\[0\\.5\\] {
-      background-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-red-500\\/\\[0\\.5\\] {
-        background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .bg-red-500\\/\\[50\\%\\] {
-      background-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-red-500\\/\\[50\\%\\] {
-        background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .bg-red-500\\/\\[100\\%\\] {
-      background-color: var(--color-red-500);
+    .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] {
+      background-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .bg-transparent {
       background-color: #0000;
     }
 
-    .-bg-linear-45 {
-      --tw-gradient-position: calc(45deg * -1);
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .-bg-linear-45 {
-        --tw-gradient-position: calc(45deg * -1) in oklab;
-      }
-    }
-
-    .-bg-linear-45 {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .-bg-linear-45\\/oklab {
-      --tw-gradient-position: calc(45deg * -1);
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .-bg-linear-45\\/oklab {
-        --tw-gradient-position: calc(45deg * -1) in oklab;
-      }
-    }
-
-    .-bg-linear-45\\/oklab {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-45 {
-      --tw-gradient-position: 45deg;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-45 {
-        --tw-gradient-position: 45deg in oklab;
-      }
-    }
-
-    .bg-linear-45 {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-45\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: 45deg;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-45\\/\\[in_hsl_longer_hue\\] {
-        --tw-gradient-position: 45deg in hsl longer hue;
-      }
-    }
-
-    .bg-linear-45\\/\\[in_hsl_longer_hue\\] {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-45\\/oklab {
-      --tw-gradient-position: 45deg;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-45\\/oklab {
-        --tw-gradient-position: 45deg in oklab;
-      }
-    }
-
-    .bg-linear-45\\/oklab {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-45\\/shorter {
-      --tw-gradient-position: 45deg;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-45\\/shorter {
-        --tw-gradient-position: 45deg in oklch shorter hue;
-      }
-    }
-
-    .bg-linear-45\\/shorter {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-b {
-      --tw-gradient-position: to bottom;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-b {
-        --tw-gradient-position: to bottom in oklab;
-      }
-    }
-
-    .bg-linear-to-b {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-bl {
-      --tw-gradient-position: to bottom left;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-bl {
-        --tw-gradient-position: to bottom left in oklab;
-      }
-    }
-
-    .bg-linear-to-bl {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-br {
-      --tw-gradient-position: to bottom right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-br {
-        --tw-gradient-position: to bottom right in oklab;
-      }
-    }
-
-    .bg-linear-to-br {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-l {
-      --tw-gradient-position: to left;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-l {
-        --tw-gradient-position: to left in oklab;
-      }
-    }
-
-    .bg-linear-to-l {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r {
-        --tw-gradient-position: to right in oklab;
-      }
-    }
-
-    .bg-linear-to-r {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] {
-        --tw-gradient-position: to right in hsl longer hue;
-      }
-    }
-
-    .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/\\[longer\\] {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/\\[longer\\] {
-        --tw-gradient-position: to right longer;
-      }
-    }
-
-    .bg-linear-to-r\\/\\[longer\\] {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/decreasing {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/decreasing {
-        --tw-gradient-position: to right in oklch decreasing hue;
-      }
-    }
-
-    .bg-linear-to-r\\/decreasing {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/hsl {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/hsl {
-        --tw-gradient-position: to right in hsl;
-      }
-    }
-
-    .bg-linear-to-r\\/hsl {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/increasing {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/increasing {
-        --tw-gradient-position: to right in oklch increasing hue;
-      }
-    }
-
-    .bg-linear-to-r\\/increasing {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/longer {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/longer {
-        --tw-gradient-position: to right in oklch longer hue;
-      }
-    }
-
-    .bg-linear-to-r\\/longer {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/oklab {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/oklab {
-        --tw-gradient-position: to right in oklab;
-      }
-    }
-
-    .bg-linear-to-r\\/oklab {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/oklch {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/oklch {
-        --tw-gradient-position: to right in oklch;
-      }
-    }
-
-    .bg-linear-to-r\\/oklch {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/shorter {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/shorter {
-        --tw-gradient-position: to right in oklch shorter hue;
-      }
-    }
-
-    .bg-linear-to-r\\/shorter {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-r\\/srgb {
-      --tw-gradient-position: to right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-r\\/srgb {
-        --tw-gradient-position: to right in srgb;
-      }
-    }
-
-    .bg-linear-to-r\\/srgb {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-t {
-      --tw-gradient-position: to top;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-t {
-        --tw-gradient-position: to top in oklab;
-      }
-    }
-
-    .bg-linear-to-t {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-tl {
-      --tw-gradient-position: to top left;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-tl {
-        --tw-gradient-position: to top left in oklab;
-      }
-    }
-
-    .bg-linear-to-tl {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-to-tr {
-      --tw-gradient-position: to top right;
-    }
-
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      .bg-linear-to-tr {
-        --tw-gradient-position: to top right in oklab;
-      }
-    }
-
-    .bg-linear-to-tr {
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .-bg-conic-45\\/oklab {
-      --tw-gradient-position: from calc(45deg * -1) in oklab;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .-bg-linear-\\[1\\.3rad\\] {
-      --tw-gradient-position: calc(74.4845deg * -1);
-      background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
-    }
-
-    .-bg-linear-\\[125deg\\] {
-      --tw-gradient-position: calc(125deg * -1);
-      background-image: linear-gradient(var(--tw-gradient-stops, calc(125deg * -1)));
-    }
-
-    .bg-conic-45\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: from 45deg in hsl longer hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic-45\\/oklab {
-      --tw-gradient-position: from 45deg in oklab;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic-45\\/shorter {
-      --tw-gradient-position: from 45deg in oklch shorter hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: in hsl longer hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/decreasing {
-      --tw-gradient-position: in oklch decreasing hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/hsl {
-      --tw-gradient-position: in hsl;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/increasing {
-      --tw-gradient-position: in oklch increasing hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/longer {
-      --tw-gradient-position: in oklch longer hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/oklab {
-      --tw-gradient-position: in oklab;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/oklch {
-      --tw-gradient-position: in oklch;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/shorter {
-      --tw-gradient-position: in oklch shorter hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-conic\\/srgb {
-      --tw-gradient-position: in srgb;
-      background-image: conic-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-linear-\\[1\\.3rad\\] {
-      --tw-gradient-position: 74.4845deg;
-      background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg));
-    }
-
-    .bg-linear-\\[125deg\\] {
-      --tw-gradient-position: 125deg;
-      background-image: linear-gradient(var(--tw-gradient-stops, 125deg));
-    }
-
-    .bg-linear-\\[to_bottom\\] {
-      --tw-gradient-position: to bottom;
-      background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
-    }
-
-    .bg-radial-\\[circle_at_center\\] {
-      --tw-gradient-position: circle at center;
-      background-image: radial-gradient(var(--tw-gradient-stops, circle at center));
-    }
-
-    .bg-radial\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: in hsl longer hue;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-radial\\/decreasing {
-      --tw-gradient-position: in oklch decreasing hue;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-radial\\/hsl {
-      --tw-gradient-position: in hsl;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-radial\\/increasing {
-      --tw-gradient-position: in oklch increasing hue;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-radial\\/longer {
-      --tw-gradient-position: in oklch longer hue;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-radial\\/oklab {
-      --tw-gradient-position: in oklab;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-radial\\/oklch {
-      --tw-gradient-position: in oklch;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-radial\\/shorter {
-      --tw-gradient-position: in oklch shorter hue;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-radial\\/srgb {
-      --tw-gradient-position: in srgb;
-      background-image: radial-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-\\[image\\:var\\(--my-gradient\\)\\] {
+    .bg-\\[image\\:--my-gradient\\] {
       background-image: var(--my-gradient);
     }
 
@@ -14080,10 +6861,42 @@ test('bg', async () => {
       background-image: url("/image.png");
     }
 
-    .bg-\\[url\\:var\\(--my-url\\)\\] {
+    .bg-\\[url\\:--my-url\\] {
       background-image: var(--my-url);
     }
 
+    .bg-gradient-to-b {
+      background-image: linear-gradient(to bottom, var(--tw-gradient-stops, ));
+    }
+
+    .bg-gradient-to-bl {
+      background-image: linear-gradient(to bottom left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-gradient-to-br {
+      background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, ));
+    }
+
+    .bg-gradient-to-l {
+      background-image: linear-gradient(to left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-gradient-to-r {
+      background-image: linear-gradient(to right, var(--tw-gradient-stops, ));
+    }
+
+    .bg-gradient-to-t {
+      background-image: linear-gradient(to top, var(--tw-gradient-stops, ));
+    }
+
+    .bg-gradient-to-tl {
+      background-image: linear-gradient(to top left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-gradient-to-tr {
+      background-image: linear-gradient(to top right, var(--tw-gradient-stops, ));
+    }
+
     .bg-none {
       background-image: none;
     }
@@ -14096,7 +6909,7 @@ test('bg', async () => {
       background-size: cover;
     }
 
-    .bg-\\[length\\:120px_120px\\], .bg-\\[size\\:120px_120px\\] {
+    .bg-\\[size\\:120px_120px\\] {
       background-size: 120px 120px;
     }
 
@@ -14124,15 +6937,19 @@ test('bg', async () => {
       background-attachment: scroll;
     }
 
-    .bg-\\[50\\%\\] {
-      background-position: 50%;
-    }
-
     .bg-\\[120px\\] {
       background-position: 120px;
     }
 
-    .bg-\\[120px_120px\\], .bg-\\[position\\:120px_120px\\] {
+    .bg-\\[120px_120px\\] {
+      background-position: 120px 120px;
+    }
+
+    .bg-\\[50\\%\\] {
+      background-position: 50%;
+    }
+
+    .bg-\\[position\\:120px_120px\\] {
       background-position: 120px 120px;
     }
 
@@ -14140,14 +6957,6 @@ test('bg', async () => {
       background-position: bottom;
     }
 
-    .bg-bottom-left {
-      background-position: 0 100%;
-    }
-
-    .bg-bottom-right {
-      background-position: 100% 100%;
-    }
-
     .bg-center {
       background-position: center;
     }
@@ -14157,37 +6966,25 @@ test('bg', async () => {
     }
 
     .bg-left-bottom {
-      background-position: 0 100%;
+      background-position: left-bottom;
     }
 
     .bg-left-top {
-      background-position: 0 0;
-    }
-
-    .bg-right {
-      background-position: 100%;
+      background-position: left-top;
     }
 
     .bg-right-bottom {
-      background-position: 100% 100%;
+      background-position: right-bottom;
     }
 
     .bg-right-top {
-      background-position: 100% 0;
+      background-position: right-top;
     }
 
     .bg-top {
       background-position: top;
     }
 
-    .bg-top-left {
-      background-position: 0 0;
-    }
-
-    .bg-top-right {
-      background-position: 100% 0;
-    }
-
     .bg-no-repeat {
       background-repeat: no-repeat;
     }
@@ -14196,14 +6993,6 @@ test('bg', async () => {
       background-repeat: repeat;
     }
 
-    .bg-repeat-round {
-      background-repeat: round;
-    }
-
-    .bg-repeat-space {
-      background-repeat: space;
-    }
-
     .bg-repeat-x {
       background-repeat: repeat-x;
     }
@@ -14211,14 +7000,20 @@ test('bg', async () => {
     .bg-repeat-y {
       background-repeat: repeat-y;
     }
-    "
+
+    .bg-round {
+      background-repeat: round;
+    }
+
+    .bg-space {
+      background-repeat: space;
+    }"
   `)
   expect(
-    await run([
+    run([
       'bg',
-      'bg-unknown',
-
       // background-color
+      '-bg-inherit',
       '-bg-red-500',
       '-bg-red-500/50',
       '-bg-red-500/[0.5]',
@@ -14227,7 +7022,6 @@ test('bg', async () => {
       '-bg-current/50',
       '-bg-current/[0.5]',
       '-bg-current/[50%]',
-      '-bg-inherit',
       '-bg-transparent',
       '-bg-[#0088cc]',
       '-bg-[#0088cc]/50',
@@ -14237,8 +7031,6 @@ test('bg', async () => {
       // background-image
       '-bg-none',
       '-bg-gradient-to-br',
-      '-bg-linear-to-br',
-      '-bg-linear-[to_bottom]',
 
       // background-size
       '-bg-auto',
@@ -14267,178 +7059,45 @@ test('bg', async () => {
       '-bg-repeat-y',
       '-bg-round',
       '-bg-space',
-
-      'bg-none/foo',
-      'bg-[url(/image.png)]/foo',
-      'bg-[url:var(--my-url)]/foo',
-      'bg-[linear-gradient(to_bottom,red,blue)]/foo',
-      'bg-[image:var(--my-gradient)]/foo',
-      'bg-linear-[to_bottom]/hsl',
-      'bg-conic-[45deg]/hsl',
-      'bg-conic-[circle_at_center]/hsl',
-      'bg-auto/foo',
-      'bg-cover/foo',
-      'bg-contain/foo',
-      'bg-[cover]/foo',
-      'bg-[contain]/foo',
-      'bg-[size:120px_120px]/foo',
-      'bg-fixed/foo',
-      'bg-local/foo',
-      'bg-scroll/foo',
-      'bg-center/foo',
-      'bg-top/foo',
-      'bg-right-top/foo',
-      'bg-right-bottom/foo',
-      'bg-bottom/foo',
-      'bg-left-bottom/foo',
-      'bg-left/foo',
-      'bg-left-top/foo',
-      'bg-[50%]/foo',
-      'bg-[120px]/foo',
-      'bg-[120px_120px]/foo',
-      'bg-[length:120px_120px]/foo',
-      'bg-[position:120px_120px]/foo',
-      'bg-[size:120px_120px]/foo',
-      'bg-repeat/foo',
-      'bg-no-repeat/foo',
-      'bg-repeat-x/foo',
-      'bg-repeat-y/foo',
-      'bg-round/foo',
-      'bg-space/foo',
     ]),
   ).toEqual('')
 
   expect(
-    await run(
-      ['bg-current/half', 'bg-current/custom', '[color:red]/half'],
+    compileCss(
       css`
-        @theme reference {
+        @theme {
           --opacity-half: 0.5;
           --opacity-custom: var(--custom-opacity);
         }
         @tailwind utilities;
       `,
+      ['bg-current/half', 'bg-current/custom'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    .bg-current\\/custom {
-      background-color: currentColor;
+    ":root {
+      --opacity-half: .5;
+      --opacity-custom: var(--custom-opacity);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-current\\/custom {
-        background-color: color-mix(in oklab, currentcolor var(--opacity-custom, var(--custom-opacity)), transparent);
-      }
+    .bg-current\\/custom {
+      background-color: color-mix(in srgb, currentColor var(--opacity-custom, var(--custom-opacity)), transparent);
     }
 
     .bg-current\\/half {
-      background-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .bg-current\\/half {
-        background-color: color-mix(in oklab, currentcolor var(--opacity-half, .5), transparent);
-      }
-    }
-
-    .\\[color\\:red\\]\\/half {
-      color: color-mix(in srgb, red .5, transparent);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .\\[color\\:red\\]\\/half {
-        color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
-      }
-    }
-    "
+      background-color: color-mix(in srgb, currentColor var(--opacity-half, .5), transparent);
+    }"
   `)
 })
 
-test('bg-position', async () => {
+test('from', () => {
   expect(
-    await run(
-      ['bg-position-[120px]', 'bg-position-[120px_120px]', 'bg-position-[var(--some-var)]'],
+    compileCss(
       css`
         @theme {
           --color-red-500: #ef4444;
         }
         @tailwind utilities;
       `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .bg-position-\\[120px\\] {
-      background-position: 120px;
-    }
-
-    .bg-position-\\[120px_120px\\] {
-      background-position: 120px 120px;
-    }
-
-    .bg-position-\\[var\\(--some-var\\)\\] {
-      background-position: var(--some-var);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'bg-position',
-      'bg-position/foo',
-      '-bg-position',
-      '-bg-position/foo',
-
-      'bg-position-[120px_120px]/foo',
-
-      '-bg-position-[120px_120px]',
-      '-bg-position-[120px_120px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('bg-size', async () => {
-  expect(
-    await run(
-      ['bg-size-[120px]', 'bg-size-[120px_120px]', 'bg-size-[var(--some-var)]'],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .bg-size-\\[120px\\] {
-      background-size: 120px;
-    }
-
-    .bg-size-\\[120px_120px\\] {
-      background-size: 120px 120px;
-    }
-
-    .bg-size-\\[var\\(--some-var\\)\\] {
-      background-size: var(--some-var);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'bg-size',
-      'bg-size/foo',
-      '-bg-size',
-      '-bg-size/foo',
-
-      'bg-size-[120px_120px]/foo',
-
-      '-bg-size-[120px_120px]',
-      '-bg-size-[120px_120px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('from', async () => {
-  expect(
-    await run(
       [
         // --tw-gradient-from
         'from-red-500',
@@ -14449,20 +7108,19 @@ test('from', async () => {
         'from-current/50',
         'from-current/[0.5]',
         'from-current/[50%]',
-        'from-inherit',
         'from-transparent',
         'from-[#0088cc]',
         'from-[#0088cc]/50',
         'from-[#0088cc]/[0.5]',
         'from-[#0088cc]/[50%]',
-        'from-[var(--my-color)]',
-        'from-[var(--my-color)]/50',
-        'from-[var(--my-color)]/[0.5]',
-        'from-[var(--my-color)]/[50%]',
-        'from-[color:var(--my-color)]',
-        'from-[color:var(--my-color)]/50',
-        'from-[color:var(--my-color)]/[0.5]',
-        'from-[color:var(--my-color)]/[50%]',
+        'from-[--my-color]',
+        'from-[--my-color]/50',
+        'from-[--my-color]/[0.5]',
+        'from-[--my-color]/[50%]',
+        'from-[color:--my-color]',
+        'from-[color:--my-color]/50',
+        'from-[color:--my-color]/[0.5]',
+        'from-[color:--my-color]/[50%]',
 
         // --tw-gradient-from-position
         'from-0%',
@@ -14470,258 +7128,82 @@ test('from', async () => {
         'from-100%',
         'from-[50%]',
         'from-[50px]',
-        'from-[length:var(--my-position)]',
-        'from-[percentage:var(--my-position)]',
+        'from-[length:--my-position]',
+        'from-[percentage:--my-position]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-gradient-position: initial;
-          --tw-gradient-from: #0000;
-          --tw-gradient-via: #0000;
-          --tw-gradient-to: #0000;
-          --tw-gradient-stops: initial;
-          --tw-gradient-via-stops: initial;
-          --tw-gradient-from-position: 0%;
-          --tw-gradient-via-position: 50%;
-          --tw-gradient-to-position: 100%;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
     }
 
     .from-\\[\\#0088cc\\] {
       --tw-gradient-from: #08c;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: oklab(59.9824% -.067 -.124 / .5);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-from: #0088cc80;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[color\\:var\\(--my-color\\)\\] {
+    .from-\\[--my-color\\] {
       --tw-gradient-from: var(--my-color);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    .from-\\[--my-color\\]\\/50, .from-\\[--my-color\\]\\/\\[0\\.5\\], .from-\\[--my-color\\]\\/\\[50\\%\\] {
+      --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    .from-\\[color\\:--my-color\\] {
       --tw-gradient-from: var(--my-color);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .from-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-from: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-\\[var\\(--my-color\\)\\] {
-      --tw-gradient-from: var(--my-color);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-from: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-\\[var\\(--my-color\\)\\]\\/50 {
-        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .from-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-from: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    .from-\\[color\\:--my-color\\]\\/50, .from-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .from-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-current {
-      --tw-gradient-from: currentcolor;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-from: currentColor;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-current\\/50 {
-      --tw-gradient-from: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-current\\/50 {
-        --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .from-current\\/50 {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-current\\/\\[0\\.5\\] {
-      --tw-gradient-from: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-current\\/\\[0\\.5\\] {
-        --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .from-current\\/\\[0\\.5\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-current\\/\\[50\\%\\] {
-      --tw-gradient-from: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-current\\/\\[50\\%\\] {
-        --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .from-current\\/\\[50\\%\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-inherit {
-      --tw-gradient-from: inherit;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {
+      --tw-gradient-from: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-red-500 {
-      --tw-gradient-from: var(--color-red-500);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-from: var(--color-red-500, #ef4444);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-red-500\\/50 {
-      --tw-gradient-from: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-red-500\\/50 {
-        --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .from-red-500\\/50 {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-red-500\\/\\[0\\.5\\] {
-      --tw-gradient-from: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-red-500\\/\\[0\\.5\\] {
-        --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .from-red-500\\/\\[0\\.5\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .from-red-500\\/\\[50\\%\\] {
-      --tw-gradient-from: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .from-red-500\\/\\[50\\%\\] {
-        --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .from-red-500\\/\\[50\\%\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] {
+      --tw-gradient-from: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-transparent {
       --tw-gradient-from: transparent;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-0\\% {
       --tw-gradient-from-position: 0%;
     }
 
-    .from-5\\% {
-      --tw-gradient-from-position: 5%;
-    }
-
     .from-100\\% {
       --tw-gradient-from-position: 100%;
     }
 
+    .from-5\\% {
+      --tw-gradient-from-position: 5%;
+    }
+
     .from-\\[50\\%\\] {
       --tw-gradient-from-position: 50%;
     }
@@ -14730,28 +7212,23 @@ test('from', async () => {
       --tw-gradient-from-position: 50px;
     }
 
-    .from-\\[length\\:var\\(--my-position\\)\\], .from-\\[percentage\\:var\\(--my-position\\)\\] {
+    .from-\\[length\\:--my-position\\], .from-\\[percentage\\:--my-position\\] {
       --tw-gradient-from-position: var(--my-position);
     }
 
-    @property --tw-gradient-position {
-      syntax: "*";
-      inherits: false
-    }
-
     @property --tw-gradient-from {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-via {
+    @property --tw-gradient-to {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-to {
+    @property --tw-gradient-via {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
@@ -14783,19 +7260,12 @@ test('from', async () => {
       syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'from',
-      'from-25.%',
-      'from-25.0%',
       'from-123',
-      'from--123',
-      'from--5%',
-      'from-unknown',
-      'from-unknown%',
 
       // --tw-gradient-from
       '-from-red-500',
@@ -14806,7 +7276,6 @@ test('from', async () => {
       '-from-current/50',
       '-from-current/[0.5]',
       '-from-current/[50%]',
-      '-from-inherit',
       '-from-transparent',
       '-from-[#0088cc]',
       '-from-[#0088cc]/50',
@@ -14821,9 +7290,15 @@ test('from', async () => {
   ).toEqual('')
 })
 
-test('via', async () => {
+test('via', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         // --tw-gradient-stops
         'via-red-500',
@@ -14834,20 +7309,19 @@ test('via', async () => {
         'via-current/50',
         'via-current/[0.5]',
         'via-current/[50%]',
-        'via-inherit',
         'via-transparent',
         'via-[#0088cc]',
         'via-[#0088cc]/50',
         'via-[#0088cc]/[0.5]',
         'via-[#0088cc]/[50%]',
-        'via-[var(--my-color)]',
-        'via-[var(--my-color)]/50',
-        'via-[var(--my-color)]/[0.5]',
-        'via-[var(--my-color)]/[50%]',
-        'via-[color:var(--my-color)]',
-        'via-[color:var(--my-color)]/50',
-        'via-[color:var(--my-color)]/[0.5]',
-        'via-[color:var(--my-color)]/[50%]',
+        'via-[--my-color]',
+        'via-[--my-color]/50',
+        'via-[--my-color]/[0.5]',
+        'via-[--my-color]/[50%]',
+        'via-[color:--my-color]',
+        'via-[color:--my-color]/50',
+        'via-[color:--my-color]/[0.5]',
+        'via-[color:--my-color]/[50%]',
 
         // --tw-gradient-via-position
         'via-0%',
@@ -14855,263 +7329,78 @@ test('via', async () => {
         'via-100%',
         'via-[50%]',
         'via-[50px]',
-        'via-[length:var(--my-position)]',
-        'via-[percentage:var(--my-position)]',
+        'via-[length:--my-position]',
+        'via-[percentage:--my-position]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-gradient-position: initial;
-          --tw-gradient-from: #0000;
-          --tw-gradient-via: #0000;
-          --tw-gradient-to: #0000;
-          --tw-gradient-stops: initial;
-          --tw-gradient-via-stops: initial;
-          --tw-gradient-from-position: 0%;
-          --tw-gradient-via-position: 50%;
-          --tw-gradient-to-position: 100%;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
     }
 
     .via-\\[\\#0088cc\\] {
       --tw-gradient-via: #08c;
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: oklab(59.9824% -.067 -.124 / .5);
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via: #0088cc80;
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[color\\:var\\(--my-color\\)\\] {
+    .via-\\[--my-color\\] {
       --tw-gradient-via: var(--my-color);
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-via: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .via-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    .via-\\[--my-color\\]\\/50, .via-\\[--my-color\\]\\/\\[0\\.5\\], .via-\\[--my-color\\]\\/\\[50\\%\\] {
+      --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+    .via-\\[color\\:--my-color\\] {
       --tw-gradient-via: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-\\[var\\(--my-color\\)\\] {
-      --tw-gradient-via: var(--my-color);
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-via: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-\\[var\\(--my-color\\)\\]\\/50 {
-        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .via-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-via: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    .via-\\[color\\:--my-color\\]\\/50, .via-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .via-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-current {
-      --tw-gradient-via: currentcolor;
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via: currentColor;
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-current\\/50 {
-      --tw-gradient-via: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-current\\/50 {
-        --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .via-current\\/50 {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-current\\/\\[0\\.5\\] {
-      --tw-gradient-via: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-current\\/\\[0\\.5\\] {
-        --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .via-current\\/\\[0\\.5\\] {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-current\\/\\[50\\%\\] {
-      --tw-gradient-via: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-current\\/\\[50\\%\\] {
-        --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .via-current\\/\\[50\\%\\] {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-inherit {
-      --tw-gradient-via: inherit;
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {
+      --tw-gradient-via: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-red-500 {
-      --tw-gradient-via: var(--color-red-500);
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via: var(--color-red-500, #ef4444);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-red-500\\/50 {
-      --tw-gradient-via: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-red-500\\/50 {
-        --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .via-red-500\\/50 {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-red-500\\/\\[0\\.5\\] {
-      --tw-gradient-via: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-red-500\\/\\[0\\.5\\] {
-        --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .via-red-500\\/\\[0\\.5\\] {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-
-    .via-red-500\\/\\[50\\%\\] {
-      --tw-gradient-via: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .via-red-500\\/\\[50\\%\\] {
-        --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .via-red-500\\/\\[50\\%\\] {
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] {
+      --tw-gradient-via: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-transparent {
       --tw-gradient-via: transparent;
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
@@ -15119,14 +7408,14 @@ test('via', async () => {
       --tw-gradient-via-position: 0%;
     }
 
-    .via-5\\% {
-      --tw-gradient-via-position: 5%;
-    }
-
     .via-100\\% {
       --tw-gradient-via-position: 100%;
     }
 
+    .via-5\\% {
+      --tw-gradient-via-position: 5%;
+    }
+
     .via-\\[50\\%\\] {
       --tw-gradient-via-position: 50%;
     }
@@ -15135,28 +7424,23 @@ test('via', async () => {
       --tw-gradient-via-position: 50px;
     }
 
-    .via-\\[length\\:var\\(--my-position\\)\\], .via-\\[percentage\\:var\\(--my-position\\)\\] {
+    .via-\\[length\\:--my-position\\], .via-\\[percentage\\:--my-position\\] {
       --tw-gradient-via-position: var(--my-position);
     }
 
-    @property --tw-gradient-position {
-      syntax: "*";
-      inherits: false
-    }
-
     @property --tw-gradient-from {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-via {
+    @property --tw-gradient-to {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-to {
+    @property --tw-gradient-via {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
@@ -15188,18 +7472,11 @@ test('via', async () => {
       syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'via',
-      'via-123',
-      'via--123',
-      'via--5%',
-      'via-unknown',
-      'via-unknown%',
-
       // --tw-gradient-stops
       '-via-red-500',
       '-via-red-500/50',
@@ -15209,7 +7486,6 @@ test('via', async () => {
       '-via-current/50',
       '-via-current/[0.5]',
       '-via-current/[50%]',
-      '-via-inherit',
       '-via-transparent',
       '-via-[#0088cc]',
       '-via-[#0088cc]/50',
@@ -15224,9 +7500,15 @@ test('via', async () => {
   ).toEqual('')
 })
 
-test('to', async () => {
+test('to', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         // --tw-gradient-to
         'to-red-500',
@@ -15237,20 +7519,19 @@ test('to', async () => {
         'to-current/50',
         'to-current/[0.5]',
         'to-current/[50%]',
-        'to-inherit',
         'to-transparent',
         'to-[#0088cc]',
         'to-[#0088cc]/50',
         'to-[#0088cc]/[0.5]',
         'to-[#0088cc]/[50%]',
-        'to-[var(--my-color)]',
-        'to-[var(--my-color)]/50',
-        'to-[var(--my-color)]/[0.5]',
-        'to-[var(--my-color)]/[50%]',
-        'to-[color:var(--my-color)]',
-        'to-[color:var(--my-color)]/50',
-        'to-[color:var(--my-color)]/[0.5]',
-        'to-[color:var(--my-color)]/[50%]',
+        'to-[--my-color]',
+        'to-[--my-color]/50',
+        'to-[--my-color]/[0.5]',
+        'to-[--my-color]/[50%]',
+        'to-[color:--my-color]',
+        'to-[color:--my-color]/50',
+        'to-[color:--my-color]/[0.5]',
+        'to-[color:--my-color]/[50%]',
 
         // --tw-gradient-to-position
         'to-0%',
@@ -15258,258 +7539,82 @@ test('to', async () => {
         'to-100%',
         'to-[50%]',
         'to-[50px]',
-        'to-[length:var(--my-position)]',
-        'to-[percentage:var(--my-position)]',
+        'to-[length:--my-position]',
+        'to-[percentage:--my-position]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-gradient-position: initial;
-          --tw-gradient-from: #0000;
-          --tw-gradient-via: #0000;
-          --tw-gradient-to: #0000;
-          --tw-gradient-stops: initial;
-          --tw-gradient-via-stops: initial;
-          --tw-gradient-from-position: 0%;
-          --tw-gradient-via-position: 50%;
-          --tw-gradient-to-position: 100%;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
     }
 
     .to-\\[\\#0088cc\\] {
       --tw-gradient-to: #08c;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: oklab(59.9824% -.067 -.124 / .5);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-to: #0088cc80;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[color\\:var\\(--my-color\\)\\] {
+    .to-\\[--my-color\\] {
       --tw-gradient-to: var(--my-color);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    .to-\\[--my-color\\]\\/50, .to-\\[--my-color\\]\\/\\[0\\.5\\], .to-\\[--my-color\\]\\/\\[50\\%\\] {
+      --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    .to-\\[color\\:--my-color\\] {
       --tw-gradient-to: var(--my-color);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .to-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-to: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-\\[var\\(--my-color\\)\\] {
-      --tw-gradient-to: var(--my-color);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-to: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-\\[var\\(--my-color\\)\\]\\/50 {
-        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .to-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-to: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    .to-\\[color\\:--my-color\\]\\/50, .to-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .to-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-current {
-      --tw-gradient-to: currentcolor;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-to: currentColor;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-current\\/50 {
-      --tw-gradient-to: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-current\\/50 {
-        --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .to-current\\/50 {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-current\\/\\[0\\.5\\] {
-      --tw-gradient-to: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-current\\/\\[0\\.5\\] {
-        --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .to-current\\/\\[0\\.5\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-current\\/\\[50\\%\\] {
-      --tw-gradient-to: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-current\\/\\[50\\%\\] {
-        --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .to-current\\/\\[50\\%\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-inherit {
-      --tw-gradient-to: inherit;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {
+      --tw-gradient-to: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-red-500 {
-      --tw-gradient-to: var(--color-red-500);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-to: var(--color-red-500, #ef4444);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-red-500\\/50 {
-      --tw-gradient-to: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-red-500\\/50 {
-        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .to-red-500\\/50 {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-red-500\\/\\[0\\.5\\] {
-      --tw-gradient-to: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-red-500\\/\\[0\\.5\\] {
-        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .to-red-500\\/\\[0\\.5\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-
-    .to-red-500\\/\\[50\\%\\] {
-      --tw-gradient-to: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .to-red-500\\/\\[50\\%\\] {
-        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .to-red-500\\/\\[50\\%\\] {
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] {
+      --tw-gradient-to: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-transparent {
       --tw-gradient-to: transparent;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-0\\% {
       --tw-gradient-to-position: 0%;
     }
 
-    .to-5\\% {
-      --tw-gradient-to-position: 5%;
-    }
-
     .to-100\\% {
       --tw-gradient-to-position: 100%;
     }
 
+    .to-5\\% {
+      --tw-gradient-to-position: 5%;
+    }
+
     .to-\\[50\\%\\] {
       --tw-gradient-to-position: 50%;
     }
@@ -15518,28 +7623,23 @@ test('to', async () => {
       --tw-gradient-to-position: 50px;
     }
 
-    .to-\\[length\\:var\\(--my-position\\)\\], .to-\\[percentage\\:var\\(--my-position\\)\\] {
+    .to-\\[length\\:--my-position\\], .to-\\[percentage\\:--my-position\\] {
       --tw-gradient-to-position: var(--my-position);
     }
 
-    @property --tw-gradient-position {
-      syntax: "*";
-      inherits: false
-    }
-
     @property --tw-gradient-from {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-via {
+    @property --tw-gradient-to {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-to {
+    @property --tw-gradient-via {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
@@ -15571,18 +7671,11 @@ test('to', async () => {
       syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'to',
-      'to-123',
-      'to--123',
-      'to--5%',
-      'to-unknown',
-      'to-unknown%',
-
       // --tw-gradient-to
       '-to-red-500',
       '-to-red-500/50',
@@ -15592,7 +7685,6 @@ test('to', async () => {
       '-to-current/50',
       '-to-current/[0.5]',
       '-to-current/[50%]',
-      '-to-inherit',
       '-to-transparent',
       '-to-[#0088cc]',
       '-to-[#0088cc]/50',
@@ -15607,5831 +7699,9 @@ test('to', async () => {
   ).toEqual('')
 })
 
-test('mask', async () => {
-  expect(
-    await run(
-      [
-        // mask-image
-        'mask-none',
-        'mask-[linear-gradient(#ffff,#0000)]',
-        'mask-[url(http://example.com)]',
-        'mask-[var(--some-var)]',
-        'mask-[image:var(--some-var)]',
-        'mask-[url:var(--some-var)]',
-
-        // mask-composite
-        'mask-add',
-        'mask-subtract',
-        'mask-intersect',
-        'mask-exclude',
-
-        // mask-mode
-        'mask-alpha',
-        'mask-luminance',
-        'mask-match',
-
-        // mask-type
-        'mask-type-alpha',
-        'mask-type-luminance',
-
-        // mask-size
-        'mask-auto',
-        'mask-cover',
-        'mask-contain',
-        'mask-[cover]',
-        'mask-[contain]',
-        'mask-[size:120px_120px]',
-
-        // mask-position
-        'mask-center',
-        'mask-top',
-        'mask-top-right',
-        'mask-top-left',
-        'mask-bottom',
-        'mask-bottom-right',
-        'mask-bottom-left',
-        'mask-left',
-        'mask-right',
-        'mask-center',
-        'mask-[50%]',
-        'mask-[120px]',
-        'mask-[120px_120px]',
-        'mask-[length:120px_120px]',
-        'mask-[position:120px_120px]',
-
-        // mask-repeat
-        'mask-repeat',
-        'mask-no-repeat',
-        'mask-repeat-x',
-        'mask-repeat-y',
-        'mask-repeat-round',
-        'mask-repeat-space',
-      ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .mask-\\[image\\:var\\(--some-var\\)\\] {
-      -webkit-mask-image: var(--some-var);
-      -webkit-mask-image: var(--some-var);
-      mask-image: var(--some-var);
-    }
-
-    .mask-\\[linear-gradient\\(\\#ffff\\,\\#0000\\)\\] {
-      -webkit-mask-image: linear-gradient(#fff, #0000);
-      mask-image: linear-gradient(#fff, #0000);
-    }
-
-    .mask-\\[url\\(http\\:\\/\\/example\\.com\\)\\] {
-      -webkit-mask-image: url("http://example.com");
-      mask-image: url("http://example.com");
-    }
-
-    .mask-\\[url\\:var\\(--some-var\\)\\], .mask-\\[var\\(--some-var\\)\\] {
-      -webkit-mask-image: var(--some-var);
-      -webkit-mask-image: var(--some-var);
-      mask-image: var(--some-var);
-    }
-
-    .mask-none {
-      -webkit-mask-image: none;
-      mask-image: none;
-    }
-
-    .mask-add {
-      -webkit-mask-composite: source-over;
-      -webkit-mask-composite: source-over;
-      mask-composite: add;
-    }
-
-    .mask-exclude {
-      -webkit-mask-composite: xor;
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-    }
-
-    .mask-intersect {
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-subtract {
-      -webkit-mask-composite: source-out;
-      -webkit-mask-composite: source-out;
-      mask-composite: subtract;
-    }
-
-    .mask-alpha {
-      -webkit-mask-source-type: alpha;
-      -webkit-mask-source-type: alpha;
-      mask-mode: alpha;
-    }
-
-    .mask-luminance {
-      -webkit-mask-source-type: luminance;
-      -webkit-mask-source-type: luminance;
-      mask-mode: luminance;
-    }
-
-    .mask-match {
-      -webkit-mask-source-type: auto;
-      -webkit-mask-source-type: auto;
-      mask-mode: match-source;
-    }
-
-    .mask-type-alpha {
-      mask-type: alpha;
-    }
-
-    .mask-type-luminance {
-      mask-type: luminance;
-    }
-
-    .mask-\\[contain\\] {
-      -webkit-mask-size: contain;
-      mask-size: contain;
-    }
-
-    .mask-\\[cover\\] {
-      -webkit-mask-size: cover;
-      mask-size: cover;
-    }
-
-    .mask-\\[length\\:120px_120px\\], .mask-\\[size\\:120px_120px\\] {
-      -webkit-mask-size: 120px 120px;
-      mask-size: 120px 120px;
-    }
-
-    .mask-auto {
-      -webkit-mask-size: auto;
-      mask-size: auto;
-    }
-
-    .mask-contain {
-      -webkit-mask-size: contain;
-      mask-size: contain;
-    }
-
-    .mask-cover {
-      -webkit-mask-size: cover;
-      mask-size: cover;
-    }
-
-    .mask-\\[50\\%\\] {
-      -webkit-mask-position: 50%;
-      mask-position: 50%;
-    }
-
-    .mask-\\[120px\\] {
-      -webkit-mask-position: 120px;
-      mask-position: 120px;
-    }
-
-    .mask-\\[120px_120px\\], .mask-\\[position\\:120px_120px\\] {
-      -webkit-mask-position: 120px 120px;
-      mask-position: 120px 120px;
-    }
-
-    .mask-bottom {
-      -webkit-mask-position: bottom;
-      mask-position: bottom;
-    }
-
-    .mask-bottom-left {
-      -webkit-mask-position: 0 100%;
-      mask-position: 0 100%;
-    }
-
-    .mask-bottom-right {
-      -webkit-mask-position: 100% 100%;
-      mask-position: 100% 100%;
-    }
-
-    .mask-center {
-      -webkit-mask-position: center;
-      mask-position: center;
-    }
-
-    .mask-left {
-      -webkit-mask-position: 0;
-      mask-position: 0;
-    }
-
-    .mask-right {
-      -webkit-mask-position: 100%;
-      mask-position: 100%;
-    }
-
-    .mask-top {
-      -webkit-mask-position: top;
-      mask-position: top;
-    }
-
-    .mask-top-left {
-      -webkit-mask-position: 0 0;
-      mask-position: 0 0;
-    }
-
-    .mask-top-right {
-      -webkit-mask-position: 100% 0;
-      mask-position: 100% 0;
-    }
-
-    .mask-no-repeat {
-      -webkit-mask-repeat: no-repeat;
-      mask-repeat: no-repeat;
-    }
-
-    .mask-repeat {
-      -webkit-mask-repeat: repeat;
-      mask-repeat: repeat;
-    }
-
-    .mask-repeat-round {
-      -webkit-mask-repeat: round;
-      mask-repeat: round;
-    }
-
-    .mask-repeat-space {
-      -webkit-mask-repeat: space;
-      mask-repeat: space;
-    }
-
-    .mask-repeat-x {
-      -webkit-mask-repeat: repeat-x;
-      mask-repeat: repeat-x;
-    }
-
-    .mask-repeat-y {
-      -webkit-mask-repeat: repeat-y;
-      mask-repeat: repeat-y;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mask',
-      'mask-unknown',
-
-      // mask-image
-      '-mask-none',
-      'mask-none/foo',
-      '-mask-[var(--some-var)]',
-      'mask-[var(--some-var)]/foo',
-      '-mask-[image:var(--some-var)]',
-      'mask-[image:var(--some-var)]/foo',
-      '-mask-[url:var(--some-var)]',
-      'mask-[url:var(--some-var)]/foo',
-
-      // mask-composite
-      '-mask-add',
-      '-mask-subtract',
-      '-mask-intersect',
-      '-mask-exclude',
-      'mask-add/foo',
-      'mask-subtract/foo',
-      'mask-intersect/foo',
-      'mask-exclude/foo',
-
-      // mask-mode
-      '-mask-alpha',
-      '-mask-luminance',
-      '-mask-match',
-      'mask-alpha/foo',
-      'mask-luminance/foo',
-      'mask-match/foo',
-
-      // mask-type
-      '-mask-type-alpha',
-      '-mask-type-luminance',
-      'mask-type-alpha/foo',
-      'mask-type-luminance/foo',
-
-      // mask-size
-      '-mask-auto',
-      '-mask-cover',
-      '-mask-contain',
-      '-mask-auto/foo',
-      '-mask-cover/foo',
-      '-mask-contain/foo',
-
-      // mask-position
-      '-mask-center',
-      '-mask-top',
-      '-mask-right-top',
-      '-mask-right-bottom',
-      '-mask-bottom',
-      '-mask-left-bottom',
-      '-mask-left',
-      '-mask-left-top',
-      '-mask-center/foo',
-      '-mask-top/foo',
-      '-mask-right-top/foo',
-      '-mask-right-bottom/foo',
-      '-mask-bottom/foo',
-      '-mask-left-bottom/foo',
-      '-mask-left/foo',
-      '-mask-left-top/foo',
-
-      // mask-repeat
-      'mask-repeat/foo',
-      'mask-no-repeat/foo',
-      'mask-repeat-x/foo',
-      'mask-repeat-y/foo',
-      'mask-round/foo',
-      'mask-space/foo',
-      '-mask-repeat',
-      '-mask-no-repeat',
-      '-mask-repeat-x',
-      '-mask-repeat-y',
-      '-mask-round',
-      '-mask-space',
-      '-mask-repeat/foo',
-      '-mask-no-repeat/foo',
-      '-mask-repeat-x/foo',
-      '-mask-repeat-y/foo',
-      '-mask-round/foo',
-      '-mask-space/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['mask-current/half', 'mask-current/custom', '[color:red]/half'],
-      css`
-        @theme reference {
-          --opacity-half: 0.5;
-          --opacity-custom: var(--custom-opacity);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .\\[color\\:red\\]\\/half {
-      color: color-mix(in srgb, red .5, transparent);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .\\[color\\:red\\]\\/half {
-        color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
-      }
-    }
-    "
-  `)
-})
-
-test('mask-position', async () => {
-  expect(
-    await run(
-      ['mask-position-[120px]', 'mask-position-[120px_120px]', 'mask-position-[var(--some-var)]'],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .mask-position-\\[120px\\] {
-      -webkit-mask-position: 120px;
-      mask-position: 120px;
-    }
-
-    .mask-position-\\[120px_120px\\] {
-      -webkit-mask-position: 120px 120px;
-      mask-position: 120px 120px;
-    }
-
-    .mask-position-\\[var\\(--some-var\\)\\] {
-      -webkit-mask-position: var(--some-var);
-      -webkit-mask-position: var(--some-var);
-      mask-position: var(--some-var);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mask-position',
-      'mask-position/foo',
-      '-mask-position',
-      '-mask-position/foo',
-
-      'mask-position-[120px_120px]/foo',
-
-      '-mask-position-[120px_120px]',
-      '-mask-position-[120px_120px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mask-size', async () => {
-  expect(
-    await run(
-      ['mask-size-[120px]', 'mask-size-[120px_120px]', 'mask-size-[var(--some-var)]'],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .mask-size-\\[120px\\] {
-      -webkit-mask-size: 120px;
-      mask-size: 120px;
-    }
-
-    .mask-size-\\[120px_120px\\] {
-      -webkit-mask-size: 120px 120px;
-      mask-size: 120px 120px;
-    }
-
-    .mask-size-\\[var\\(--some-var\\)\\] {
-      -webkit-mask-size: var(--some-var);
-      -webkit-mask-size: var(--some-var);
-      mask-size: var(--some-var);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mask-size',
-      'mask-size/foo',
-      '-mask-size',
-      '-mask-size/foo',
-
-      'mask-size-[120px_120px]/foo',
-
-      '-mask-size-[120px_120px]',
-      '-mask-size-[120px_120px]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mask-t-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-t-from-0',
-        'mask-t-from-1.5',
-        'mask-t-from-2',
-        'mask-t-from-0%',
-        'mask-t-from-2%',
-        'mask-t-from-[0px]',
-        'mask-t-from-[0%]',
-        'mask-t-from-(--my-var)',
-        'mask-t-from-(color:--my-var)',
-        'mask-t-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-top-from-position: 0%;
-          --tw-mask-top-to-position: 100%;
-          --tw-mask-top-from-color: black;
-          --tw-mask-top-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-t-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-from-\\(--my-var\\), .mask-t-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-top-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-top-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-top-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-t-from',
-        'mask-t-from-2.8175',
-        'mask-t-from--1.5',
-        'mask-t-from--2',
-
-        'mask-t-from-2.5%',
-        'mask-t-from--5%',
-        'mask-t-from-unknown',
-        'mask-t-from-unknown%',
-
-        '-mask-t-from-0',
-        '-mask-t-from-1.5',
-        '-mask-t-from-2',
-        '-mask-t-from-0%',
-        '-mask-t-from-2%',
-        '-mask-t-from-[0px]',
-        '-mask-t-from-[0%]',
-
-        '-mask-t-from-(--my-var)',
-        '-mask-t-from-(color:--my-var)',
-        '-mask-t-from-(length:--my-var)',
-
-        'mask-l-from-[-25%]',
-        'mask-l-from-[25%]/foo',
-        'mask-l-from-[-25%]/foo',
-        '-mask-l-from-[-25%]',
-        '-mask-l-from-[25%]/foo',
-        '-mask-l-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-t-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-t-to-0',
-        'mask-t-to-1.5',
-        'mask-t-to-2',
-        'mask-t-to-0%',
-        'mask-t-to-2%',
-        'mask-t-to-[0px]',
-        'mask-t-to-[0%]',
-        'mask-t-to-(--my-var)',
-        'mask-t-to-(color:--my-var)',
-        'mask-t-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-top-from-position: 0%;
-          --tw-mask-top-to-position: 100%;
-          --tw-mask-top-from-color: black;
-          --tw-mask-top-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-t-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-to-\\(--my-var\\), .mask-t-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-t-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-top-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-top-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-top-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-t-to',
-        'mask-t-to-2.8175',
-        'mask-t-to--1.5',
-        'mask-t-to--2',
-
-        'mask-t-to-2.5%',
-        'mask-t-to--5%',
-        'mask-t-to-unknown',
-        'mask-t-to-unknown%',
-
-        '-mask-t-to-0',
-        '-mask-t-to-1.5',
-        '-mask-t-to-2',
-        '-mask-t-to-0%',
-        '-mask-t-to-2%',
-        '-mask-t-to-[0px]',
-        '-mask-t-to-[0%]',
-
-        '-mask-t-to-(--my-var)',
-        '-mask-t-to-(color:--my-var)',
-        '-mask-t-to-(length:--my-var)',
-
-        'mask-l-from-[-25%]',
-        'mask-l-from-[25%]/foo',
-        'mask-l-from-[-25%]/foo',
-        '-mask-l-from-[-25%]',
-        '-mask-l-from-[25%]/foo',
-        '-mask-l-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-r-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-r-from-0',
-        'mask-r-from-1.5',
-        'mask-r-from-2',
-        'mask-r-from-0%',
-        'mask-r-from-2%',
-        'mask-r-from-[0px]',
-        'mask-r-from-[0%]',
-
-        'mask-r-from-(--my-var)',
-        'mask-r-from-(color:--my-var)',
-        'mask-r-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-right-from-position: 0%;
-          --tw-mask-right-to-position: 100%;
-          --tw-mask-right-from-color: black;
-          --tw-mask-right-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-r-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-from-\\(--my-var\\), .mask-r-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-right-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-right-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-right-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-r-from',
-        'mask-r-from-2.8175',
-        'mask-r-from--1.5',
-        'mask-r-from--2',
-
-        'mask-r-from-2.5%',
-        'mask-r-from--5%',
-        'mask-r-from-unknown',
-        'mask-r-from-unknown%',
-
-        '-mask-r-from-0',
-        '-mask-r-from-1.5',
-        '-mask-r-from-2',
-        '-mask-r-from-0%',
-        '-mask-r-from-2%',
-        '-mask-r-from-[0px]',
-        '-mask-r-from-[0%]',
-
-        '-mask-r-from-(--my-var)',
-        '-mask-r-from-(color:--my-var)',
-        '-mask-r-from-(length:--my-var)',
-
-        'mask-r-from-[-25%]',
-        'mask-r-from-[25%]/foo',
-        'mask-r-from-[-25%]/foo',
-        '-mask-r-from-[-25%]',
-        '-mask-r-from-[25%]/foo',
-        '-mask-r-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-r-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-r-to-0',
-        'mask-r-to-1.5',
-        'mask-r-to-2',
-        'mask-r-to-0%',
-        'mask-r-to-2%',
-        'mask-r-to-[0px]',
-        'mask-r-to-[0%]',
-
-        'mask-r-to-(--my-var)',
-        'mask-r-to-(color:--my-var)',
-        'mask-r-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-right-from-position: 0%;
-          --tw-mask-right-to-position: 100%;
-          --tw-mask-right-from-color: black;
-          --tw-mask-right-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-r-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-to-\\(--my-var\\), .mask-r-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-r-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-right-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-right-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-right-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-r-to',
-        'mask-r-to-2.8175',
-        'mask-r-to--1.5',
-        'mask-r-to--2',
-
-        'mask-r-to-2.5%',
-        'mask-r-to--5%',
-        'mask-r-to-unknown',
-        'mask-r-to-unknown%',
-
-        '-mask-r-to-0',
-        '-mask-r-to-1.5',
-        '-mask-r-to-2',
-        '-mask-r-to-0%',
-        '-mask-r-to-2%',
-        '-mask-r-to-[0px]',
-        '-mask-r-to-[0%]',
-
-        '-mask-r-to-(--my-var)',
-        '-mask-r-to-(color:--my-var)',
-        '-mask-r-to-(length:--my-var)',
-
-        'mask-r-to-[-25%]',
-        'mask-r-to-[25%]/foo',
-        'mask-r-to-[-25%]/foo',
-        '-mask-r-to-[-25%]',
-        '-mask-r-to-[25%]/foo',
-        '-mask-r-to-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-b-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-b-from-0',
-        'mask-b-from-1.5',
-        'mask-b-from-2',
-        'mask-b-from-0%',
-        'mask-b-from-2%',
-        'mask-b-from-[0px]',
-        'mask-b-from-[0%]',
-
-        'mask-b-from-(--my-var)',
-        'mask-b-from-(color:--my-var)',
-        'mask-b-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-bottom-from-position: 0%;
-          --tw-mask-bottom-to-position: 100%;
-          --tw-mask-bottom-from-color: black;
-          --tw-mask-bottom-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-b-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-from-\\(--my-var\\), .mask-b-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-bottom-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-bottom-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-bottom-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-b-from',
-        'mask-b-from-2.8175',
-        'mask-b-from--1.5',
-        'mask-b-from--2',
-
-        'mask-b-from-2.5%',
-        'mask-b-from--5%',
-        'mask-b-from-unknown',
-        'mask-b-from-unknown%',
-
-        '-mask-b-from-0',
-        '-mask-b-from-1.5',
-        '-mask-b-from-2',
-        '-mask-b-from-0%',
-        '-mask-b-from-2%',
-        '-mask-b-from-[0px]',
-        '-mask-b-from-[0%]',
-
-        '-mask-b-from-(--my-var)',
-        '-mask-b-from-(color:--my-var)',
-        '-mask-b-from-(length:--my-var)',
-
-        'mask-b-from-[-25%]',
-        'mask-b-from-[25%]/foo',
-        'mask-b-from-[-25%]/foo',
-        '-mask-b-from-[-25%]',
-        '-mask-b-from-[25%]/foo',
-        '-mask-b-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-b-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-b-to-0',
-        'mask-b-to-1.5',
-        'mask-b-to-2',
-        'mask-b-to-0%',
-        'mask-b-to-2%',
-        'mask-b-to-[0px]',
-        'mask-b-to-[0%]',
-
-        'mask-b-to-(--my-var)',
-        'mask-b-to-(color:--my-var)',
-        'mask-b-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-bottom-from-position: 0%;
-          --tw-mask-bottom-to-position: 100%;
-          --tw-mask-bottom-from-color: black;
-          --tw-mask-bottom-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-b-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-to-\\(--my-var\\), .mask-b-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-b-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-bottom-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-bottom-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-bottom-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-b-to',
-        'mask-b-to-2.8175',
-        'mask-b-to--1.5',
-        'mask-b-to--2',
-
-        'mask-b-to-2.5%',
-        'mask-b-to--5%',
-        'mask-b-to-unknown',
-        'mask-b-to-unknown%',
-
-        '-mask-b-to-0',
-        '-mask-b-to-1.5',
-        '-mask-b-to-2',
-        '-mask-b-to-0%',
-        '-mask-b-to-2%',
-        '-mask-b-to-[0px]',
-        '-mask-b-to-[0%]',
-
-        '-mask-b-to-(--my-var)',
-        '-mask-b-to-(color:--my-var)',
-        '-mask-b-to-(length:--my-var)',
-
-        'mask-b-to-[-25%]',
-        'mask-b-to-[25%]/foo',
-        'mask-b-to-[-25%]/foo',
-        '-mask-b-to-[-25%]',
-        '-mask-b-to-[25%]/foo',
-        '-mask-b-to-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-l-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-l-from-0',
-        'mask-l-from-1.5',
-        'mask-l-from-2',
-        'mask-l-from-0%',
-        'mask-l-from-2%',
-        'mask-l-from-[0px]',
-        'mask-l-from-[0%]',
-
-        'mask-l-from-(--my-var)',
-        'mask-l-from-(color:--my-var)',
-        'mask-l-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-left-from-position: 0%;
-          --tw-mask-left-to-position: 100%;
-          --tw-mask-left-from-color: black;
-          --tw-mask-left-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-l-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-from-\\(--my-var\\), .mask-l-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-left-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-left-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-left-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-l-from',
-        'mask-l-from-2.8175',
-        'mask-l-from--1.5',
-        'mask-l-from--2',
-
-        'mask-l-from-2.5%',
-        'mask-l-from--5%',
-        'mask-l-from-unknown',
-        'mask-l-from-unknown%',
-
-        '-mask-l-from-0',
-        '-mask-l-from-1.5',
-        '-mask-l-from-2',
-        '-mask-l-from-0%',
-        '-mask-l-from-2%',
-        '-mask-l-from-[0px]',
-        '-mask-l-from-[0%]',
-
-        '-mask-l-from-(--my-var)',
-        '-mask-l-from-(color:--my-var)',
-        '-mask-l-from-(length:--my-var)',
-
-        'mask-l-from-[-25%]',
-        'mask-l-from-[25%]/foo',
-        'mask-l-from-[-25%]/foo',
-        '-mask-l-from-[-25%]',
-        '-mask-l-from-[25%]/foo',
-        '-mask-l-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-l-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-l-to-0',
-        'mask-l-to-1.5',
-        'mask-l-to-2',
-        'mask-l-to-0%',
-        'mask-l-to-2%',
-        'mask-l-to-[0px]',
-        'mask-l-to-[0%]',
-
-        'mask-l-to-(--my-var)',
-        'mask-l-to-(color:--my-var)',
-        'mask-l-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-left-from-position: 0%;
-          --tw-mask-left-to-position: 100%;
-          --tw-mask-left-from-color: black;
-          --tw-mask-left-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-l-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-to-\\(--my-var\\), .mask-l-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-l-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-left-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-left-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-left-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-l-to',
-        'mask-l-to-2.8175',
-        'mask-l-to--1.5',
-        'mask-l-to--2',
-
-        'mask-l-to-2.5%',
-        'mask-l-to--5%',
-        'mask-l-to-unknown',
-        'mask-l-to-unknown%',
-
-        '-mask-l-to-0',
-        '-mask-l-to-1.5',
-        '-mask-l-to-2',
-        '-mask-l-to-0%',
-        '-mask-l-to-2%',
-        '-mask-l-to-[0px]',
-        '-mask-l-to-[0%]',
-
-        '-mask-l-to-(--my-var)',
-        '-mask-l-to-(color:--my-var)',
-        '-mask-l-to-(length:--my-var)',
-
-        'mask-l-to-[-25%]',
-        'mask-l-to-[25%]/foo',
-        'mask-l-to-[-25%]/foo',
-        '-mask-l-to-[-25%]',
-        '-mask-l-to-[25%]/foo',
-        '-mask-l-to-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-x-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-x-from-0',
-        'mask-x-from-1.5',
-        'mask-x-from-2',
-        'mask-x-from-0%',
-        'mask-x-from-2%',
-        'mask-x-from-[0px]',
-        'mask-x-from-[0%]',
-
-        'mask-x-from-(--my-var)',
-        'mask-x-from-(color:--my-var)',
-        'mask-x-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-right-from-position: 0%;
-          --tw-mask-right-to-position: 100%;
-          --tw-mask-right-from-color: black;
-          --tw-mask-right-to-color: transparent;
-          --tw-mask-left-from-position: 0%;
-          --tw-mask-left-to-position: 100%;
-          --tw-mask-left-from-color: black;
-          --tw-mask-left-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-x-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-color: var(--my-var);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-from-\\(--my-var\\), .mask-x-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: var(--my-var);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 0px;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 0%;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: calc(var(--spacing) * 1.5);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: calc(var(--spacing) * 2);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 2%;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 0%;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-from-position: 0px;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-right-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-right-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-right-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-
-    @property --tw-mask-left-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-left-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-left-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-left-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-x-from',
-        'mask-x-from-2.8175',
-        'mask-x-from--1.5',
-        'mask-x-from--2',
-
-        'mask-x-from-2.5%',
-        'mask-x-from--5%',
-        'mask-x-from-unknown',
-        'mask-x-from-unknown%',
-
-        '-mask-x-from-0',
-        '-mask-x-from-1.5',
-        '-mask-x-from-2',
-        '-mask-x-from-0%',
-        '-mask-x-from-2%',
-        '-mask-x-from-[0px]',
-        '-mask-x-from-[0%]',
-
-        '-mask-x-from-(--my-var)',
-        '-mask-x-from-(color:--my-var)',
-        '-mask-x-from-(length:--my-var)',
-
-        'mask-x-from-[-25%]',
-        'mask-x-from-[25%]/foo',
-        'mask-x-from-[-25%]/foo',
-        '-mask-x-from-[-25%]',
-        '-mask-x-from-[25%]/foo',
-        '-mask-x-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-x-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-x-to-0',
-        'mask-x-to-1.5',
-        'mask-x-to-2',
-        'mask-x-to-0%',
-        'mask-x-to-2%',
-        'mask-x-to-[0px]',
-        'mask-x-to-[0%]',
-
-        'mask-x-to-(--my-var)',
-        'mask-x-to-(color:--my-var)',
-        'mask-x-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-right-from-position: 0%;
-          --tw-mask-right-to-position: 100%;
-          --tw-mask-right-from-color: black;
-          --tw-mask-right-to-color: transparent;
-          --tw-mask-left-from-position: 0%;
-          --tw-mask-left-to-position: 100%;
-          --tw-mask-left-from-color: black;
-          --tw-mask-left-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-x-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-color: var(--my-var);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-to-\\(--my-var\\), .mask-x-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: var(--my-var);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 0px;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 0%;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: calc(var(--spacing) * 1.5);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: calc(var(--spacing) * 2);
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 2%;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 0%;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-x-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
-      --tw-mask-right-to-position: 0px;
-      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
-      --tw-mask-left-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-right-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-right-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-right-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-
-    @property --tw-mask-left-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-left-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-left-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-left-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-x-to',
-        'mask-x-to-2.8175',
-        'mask-x-to--1.5',
-        'mask-x-to--2',
-
-        'mask-x-to-2.5%',
-        'mask-x-to--5%',
-        'mask-x-to-unknown',
-        'mask-x-to-unknown%',
-
-        '-mask-x-to-0',
-        '-mask-x-to-1.5',
-        '-mask-x-to-2',
-        '-mask-x-to-0%',
-        '-mask-x-to-2%',
-        '-mask-x-to-[0px]',
-        '-mask-x-to-[0%]',
-
-        '-mask-x-to-(--my-var)',
-        '-mask-x-to-(color:--my-var)',
-        '-mask-x-to-(length:--my-var)',
-
-        'mask-x-to-[-25%]',
-        'mask-x-to-[25%]/foo',
-        'mask-x-to-[-25%]/foo',
-        '-mask-x-to-[-25%]',
-        '-mask-x-to-[25%]/foo',
-        '-mask-x-to-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-y-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-y-from-0',
-        'mask-y-from-1.5',
-        'mask-y-from-2',
-        'mask-y-from-0%',
-        'mask-y-from-2%',
-        'mask-y-from-[0px]',
-        'mask-y-from-[0%]',
-
-        'mask-y-from-(--my-var)',
-        'mask-y-from-(color:--my-var)',
-        'mask-y-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-top-from-position: 0%;
-          --tw-mask-top-to-position: 100%;
-          --tw-mask-top-from-color: black;
-          --tw-mask-top-to-color: transparent;
-          --tw-mask-bottom-from-position: 0%;
-          --tw-mask-bottom-to-position: 100%;
-          --tw-mask-bottom-from-color: black;
-          --tw-mask-bottom-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-y-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-color: var(--my-var);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-from-\\(--my-var\\), .mask-y-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: var(--my-var);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 0px;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 0%;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: calc(var(--spacing) * 1.5);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: calc(var(--spacing) * 2);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 2%;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 0%;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-from-position: 0px;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-top-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-top-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-top-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-
-    @property --tw-mask-bottom-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-bottom-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-bottom-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-bottom-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-y-from',
-        'mask-y-from-2.8175',
-        'mask-y-from--1.5',
-        'mask-y-from--2',
-
-        'mask-y-from-2.5%',
-        'mask-y-from--5%',
-        'mask-y-from-unknown',
-        'mask-y-from-unknown%',
-
-        '-mask-y-from-0',
-        '-mask-y-from-1.5',
-        '-mask-y-from-2',
-        '-mask-y-from-0%',
-        '-mask-y-from-2%',
-        '-mask-y-from-[0px]',
-        '-mask-y-from-[0%]',
-
-        '-mask-y-from-(--my-var)',
-        '-mask-y-from-(color:--my-var)',
-        '-mask-y-from-(length:--my-var)',
-
-        'mask-y-from-[-25%]',
-        'mask-y-from-[25%]/foo',
-        'mask-y-from-[-25%]/foo',
-        '-mask-y-from-[-25%]',
-        '-mask-y-from-[25%]/foo',
-        '-mask-y-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-y-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-y-to-0',
-        'mask-y-to-1.5',
-        'mask-y-to-2',
-        'mask-y-to-0%',
-        'mask-y-to-2%',
-        'mask-y-to-[0px]',
-        'mask-y-to-[0%]',
-
-        'mask-y-to-(--my-var)',
-        'mask-y-to-(color:--my-var)',
-        'mask-y-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-top-from-position: 0%;
-          --tw-mask-top-to-position: 100%;
-          --tw-mask-top-from-color: black;
-          --tw-mask-top-to-color: transparent;
-          --tw-mask-bottom-from-position: 0%;
-          --tw-mask-bottom-to-position: 100%;
-          --tw-mask-bottom-from-color: black;
-          --tw-mask-bottom-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-y-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-color: var(--my-var);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-to-\\(--my-var\\), .mask-y-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: var(--my-var);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 0px;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 0%;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: calc(var(--spacing) * 1.5);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: calc(var(--spacing) * 2);
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 2%;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 0%;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-y-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
-      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
-      --tw-mask-top-to-position: 0px;
-      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
-      --tw-mask-bottom-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-left {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-right {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-bottom {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-top-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-top-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-top-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-top-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-
-    @property --tw-mask-bottom-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-bottom-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-bottom-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-bottom-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-y-to',
-        'mask-y-to-2.8175',
-        'mask-y-to--1.5',
-        'mask-y-to--2',
-
-        'mask-y-to-2.5%',
-        'mask-y-to--5%',
-        'mask-y-to-unknown',
-        'mask-y-to-unknown%',
-
-        '-mask-y-to-0',
-        '-mask-y-to-1.5',
-        '-mask-y-to-2',
-        '-mask-y-to-0%',
-        '-mask-y-to-2%',
-        '-mask-y-to-[0px]',
-        '-mask-y-to-[0%]',
-
-        '-mask-y-to-(--my-var)',
-        '-mask-y-to-(color:--my-var)',
-        '-mask-y-to-(length:--my-var)',
-
-        'mask-y-to-[-25%]',
-        'mask-y-to-[25%]/foo',
-        'mask-y-to-[-25%]/foo',
-        '-mask-y-to-[-25%]',
-        '-mask-y-to-[25%]/foo',
-        '-mask-y-to-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-linear', async () => {
-  expect(
-    await run([
-      'mask-linear-0',
-      'mask-linear-1',
-      '-mask-linear-1',
-      'mask-linear-45',
-      'mask-linear-[3rad]',
-      '-mask-linear-45',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-linear-position: 0deg;
-          --tw-mask-linear-from-position: 0%;
-          --tw-mask-linear-to-position: 100%;
-          --tw-mask-linear-from-color: black;
-          --tw-mask-linear-to-color: transparent;
-        }
-      }
-    }
-
-    .-mask-linear-1 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
-      --tw-mask-linear-position: -1deg;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .-mask-linear-45 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
-      --tw-mask-linear-position: calc(1deg * -45);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
-      --tw-mask-linear-position: 0deg;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-1 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
-      --tw-mask-linear-position: 1deg;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-45 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
-      --tw-mask-linear-position: calc(1deg * 45);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-\\[3rad\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
-      --tw-mask-linear-position: 171.887deg;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-linear-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0deg;
-    }
-
-    @property --tw-mask-linear-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-linear-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-linear-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-linear-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mask-linear',
-      '-mask-linear',
-
-      'mask-linear--75',
-      'mask-linear-unknown',
-      'mask-linear--75/foo',
-      'mask-linear-unknown/foo',
-
-      'mask-linear-45/foo',
-      '-mask-linear-45/foo',
-
-      'mask-linear-[3rad]/foo',
-      '-mask-linear-[3rad]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mask-linear-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-linear-from-0',
-        'mask-linear-from-1.5',
-        'mask-linear-from-2',
-        'mask-linear-from-0%',
-        'mask-linear-from-2%',
-        'mask-linear-from-[0px]',
-        'mask-linear-from-[0%]',
-
-        'mask-linear-from-(--my-var)',
-        'mask-linear-from-(color:--my-var)',
-        'mask-linear-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-linear-position: 0deg;
-          --tw-mask-linear-from-position: 0%;
-          --tw-mask-linear-to-position: 100%;
-          --tw-mask-linear-from-color: black;
-          --tw-mask-linear-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-linear-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-from-\\(--my-var\\), .mask-linear-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-linear-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0deg;
-    }
-
-    @property --tw-mask-linear-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-linear-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-linear-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-linear-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-linear-from',
-        'mask-linear-from-2.8175',
-        'mask-linear-from--1.5',
-        'mask-linear-from--2',
-
-        'mask-linear-from-2.5%',
-        'mask-linear-from--5%',
-        'mask-linear-from-unknown',
-        'mask-linear-from-unknown%',
-
-        '-mask-linear-from-0',
-        '-mask-linear-from-1.5',
-        '-mask-linear-from-2',
-        '-mask-linear-from-0%',
-        '-mask-linear-from-2%',
-        '-mask-linear-from-[0px]',
-        '-mask-linear-from-[0%]',
-
-        '-mask-linear-from-(--my-var)',
-        '-mask-linear-from-(color:--my-var)',
-        '-mask-linear-from-(length:--my-var)',
-
-        'mask-linear-from-[-25%]',
-        'mask-linear-from-[25%]/foo',
-        'mask-linear-from-[-25%]/foo',
-        '-mask-linear-from-[-25%]',
-        '-mask-linear-from-[25%]/foo',
-        '-mask-linear-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-linear-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-linear-to-0',
-        'mask-linear-to-1.5',
-        'mask-linear-to-2',
-        'mask-linear-to-0%',
-        'mask-linear-to-2%',
-        'mask-linear-to-[0px]',
-        'mask-linear-to-[0%]',
-
-        'mask-linear-to-(--my-var)',
-        'mask-linear-to-(color:--my-var)',
-        'mask-linear-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-linear-position: 0deg;
-          --tw-mask-linear-from-position: 0%;
-          --tw-mask-linear-to-position: 100%;
-          --tw-mask-linear-from-color: black;
-          --tw-mask-linear-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-linear-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-to-\\(--my-var\\), .mask-linear-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-linear-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
-      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
-      --tw-mask-linear-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-linear-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0deg;
-    }
-
-    @property --tw-mask-linear-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-linear-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-linear-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-linear-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-linear-to',
-        'mask-linear-to-2.8175',
-        'mask-linear-to--1.5',
-        'mask-linear-to--2',
-
-        'mask-linear-to-2.5%',
-        'mask-linear-to--5%',
-        'mask-linear-to-unknown',
-        'mask-linear-to-unknown%',
-
-        '-mask-linear-to-0',
-        '-mask-linear-to-1.5',
-        '-mask-linear-to-2',
-        '-mask-linear-to-0%',
-        '-mask-linear-to-2%',
-        '-mask-linear-to-[0px]',
-        '-mask-linear-to-[0%]',
-
-        '-mask-linear-to-(--my-var)',
-        '-mask-linear-to-(color:--my-var)',
-        '-mask-linear-to-(length:--my-var)',
-
-        'mask-linear-to-[-25%]',
-        'mask-linear-to-[25%]/foo',
-        'mask-linear-to-[-25%]/foo',
-        '-mask-linear-to-[-25%]',
-        '-mask-linear-to-[25%]/foo',
-        '-mask-linear-to-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-radial', async () => {
-  expect(
-    await run([
-      'mask-circle',
-      'mask-ellipse',
-      'mask-radial-closest-side',
-      'mask-radial-farthest-side',
-      'mask-radial-closest-corner',
-      'mask-radial-farthest-corner',
-      'mask-radial-[25%_25%]',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-radial-from-position: 0%;
-          --tw-mask-radial-to-position: 100%;
-          --tw-mask-radial-from-color: black;
-          --tw-mask-radial-to-color: transparent;
-          --tw-mask-radial-shape: ellipse;
-          --tw-mask-radial-size: farthest-corner;
-          --tw-mask-radial-position: center;
-        }
-      }
-    }
-
-    .mask-radial-\\[25\\%_25\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops, var(--tw-mask-radial-size)));
-      --tw-mask-radial-size: 25% 25%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-circle {
-      --tw-mask-radial-shape: circle;
-    }
-
-    .mask-ellipse {
-      --tw-mask-radial-shape: ellipse;
-    }
-
-    .mask-radial-closest-corner {
-      --tw-mask-radial-size: closest-corner;
-    }
-
-    .mask-radial-closest-side {
-      --tw-mask-radial-size: closest-side;
-    }
-
-    .mask-radial-farthest-corner {
-      --tw-mask-radial-size: farthest-corner;
-    }
-
-    .mask-radial-farthest-side {
-      --tw-mask-radial-size: farthest-side;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-radial-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-radial-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-radial-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-
-    @property --tw-mask-radial-shape {
-      syntax: "*";
-      inherits: false;
-      initial-value: ellipse;
-    }
-
-    @property --tw-mask-radial-size {
-      syntax: "*";
-      inherits: false;
-      initial-value: farthest-corner;
-    }
-
-    @property --tw-mask-radial-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: center;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mask-radial',
-      'mask-radial-[25%_25%]/foo',
-      'mask-radial/foo',
-      '-mask-radial',
-      '-mask-radial-[25%_25%]',
-      '-mask-radial/foo',
-      '-mask-radial-[25%_25%]/foo',
-
-      'mask-radial-from-[-25%]',
-      'mask-radial-from-[25%]/foo',
-      'mask-radial-from-[-25%]/foo',
-      '-mask-radial-from-[-25%]',
-      '-mask-radial-from-[25%]/foo',
-      '-mask-radial-from-[-25%]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mask-radial-at', async () => {
-  expect(
-    await run(
-      [
-        'mask-radial-at-top',
-        'mask-radial-at-top-left',
-        'mask-radial-at-top-right',
-        'mask-radial-at-bottom',
-        'mask-radial-at-bottom-left',
-        'mask-radial-at-bottom-right',
-        'mask-radial-at-left',
-        'mask-radial-at-right',
-        'mask-radial-at-[25%]',
-      ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .mask-radial-at-\\[25\\%\\] {
-      --tw-mask-radial-position: 25%;
-    }
-
-    .mask-radial-at-bottom {
-      --tw-mask-radial-position: bottom;
-    }
-
-    .mask-radial-at-bottom-left {
-      --tw-mask-radial-position: bottom left;
-    }
-
-    .mask-radial-at-bottom-right {
-      --tw-mask-radial-position: bottom right;
-    }
-
-    .mask-radial-at-left {
-      --tw-mask-radial-position: left;
-    }
-
-    .mask-radial-at-right {
-      --tw-mask-radial-position: right;
-    }
-
-    .mask-radial-at-top {
-      --tw-mask-radial-position: top;
-    }
-
-    .mask-radial-at-top-left {
-      --tw-mask-radial-position: top left;
-    }
-
-    .mask-radial-at-top-right {
-      --tw-mask-radial-position: top right;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mask-radial-at',
-      'mask-radial-at/foo',
-      'mask-radial-at-25',
-      'mask-radial-at-unknown',
-      'mask-radial-at-[25%]/foo',
-      'mask-radial-at-top/foo',
-      'mask-radial-at-top-left/foo',
-      'mask-radial-at-top-right/foo',
-      'mask-radial-at-bottom/foo',
-      'mask-radial-at-bottom-left/foo',
-      'mask-radial-at-bottom-right/foo',
-      'mask-radial-at-left/foo',
-      'mask-radial-at-right/foo',
-
-      '-mask-radial-at',
-      '-mask-radial-at/foo',
-      '-mask-radial-at-25',
-      '-mask-radial-at-unknown',
-      '-mask-radial-at-[25%]',
-      '-mask-radial-at-[25%]/foo',
-
-      '-mask-radial-at-top',
-      '-mask-radial-at-top-left',
-      '-mask-radial-at-top-right',
-      '-mask-radial-at-bottom',
-      '-mask-radial-at-bottom-left',
-      '-mask-radial-at-bottom-right',
-      '-mask-radial-at-left',
-      '-mask-radial-at-right',
-
-      'mask-radial-at-[25%]/foo',
-      'mask-radial-at-[-25%]/foo',
-      '-mask-radial-at-[-25%]',
-      '-mask-radial-at-[25%]/foo',
-      '-mask-radial-at-[-25%]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mask-radial-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-radial-from-0',
-        'mask-radial-from-1.5',
-        'mask-radial-from-2',
-        'mask-radial-from-0%',
-        'mask-radial-from-2%',
-        'mask-radial-from-[0px]',
-        'mask-radial-from-[0%]',
-
-        'mask-radial-from-(--my-var)',
-        'mask-radial-from-(color:--my-var)',
-        'mask-radial-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-radial-from-position: 0%;
-          --tw-mask-radial-to-position: 100%;
-          --tw-mask-radial-from-color: black;
-          --tw-mask-radial-to-color: transparent;
-          --tw-mask-radial-shape: ellipse;
-          --tw-mask-radial-size: farthest-corner;
-          --tw-mask-radial-position: center;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-radial-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-from-\\(--my-var\\), .mask-radial-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-radial-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-radial-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-radial-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-
-    @property --tw-mask-radial-shape {
-      syntax: "*";
-      inherits: false;
-      initial-value: ellipse;
-    }
-
-    @property --tw-mask-radial-size {
-      syntax: "*";
-      inherits: false;
-      initial-value: farthest-corner;
-    }
-
-    @property --tw-mask-radial-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: center;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-radial-from',
-        'mask-radial-from-2.8175',
-        'mask-radial-from--1.5',
-        'mask-radial-from--2',
-
-        'mask-radial-from-2.5%',
-        'mask-radial-from--5%',
-        'mask-radial-from-unknown',
-        'mask-radial-from-unknown%',
-
-        '-mask-radial-from-0',
-        '-mask-radial-from-1.5',
-        '-mask-radial-from-2',
-        '-mask-radial-from-0%',
-        '-mask-radial-from-2%',
-        '-mask-radial-from-[0px]',
-        '-mask-radial-from-[0%]',
-
-        '-mask-radial-from-(--my-var)',
-        '-mask-radial-from-(color:--my-var)',
-        '-mask-radial-from-(length:--my-var)',
-
-        'mask-radial-from-[-25%]',
-        'mask-radial-from-[25%]/foo',
-        'mask-radial-from-[-25%]/foo',
-        '-mask-radial-from-[-25%]',
-        '-mask-radial-from-[25%]/foo',
-        '-mask-radial-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-radial-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-radial-to-0',
-        'mask-radial-to-1.5',
-        'mask-radial-to-2',
-        'mask-radial-to-0%',
-        'mask-radial-to-2%',
-        'mask-radial-to-[0px]',
-        'mask-radial-to-[0%]',
-
-        'mask-radial-to-(--my-var)',
-        'mask-radial-to-(color:--my-var)',
-        'mask-radial-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-radial-from-position: 0%;
-          --tw-mask-radial-to-position: 100%;
-          --tw-mask-radial-from-color: black;
-          --tw-mask-radial-to-color: transparent;
-          --tw-mask-radial-shape: ellipse;
-          --tw-mask-radial-size: farthest-corner;
-          --tw-mask-radial-position: center;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-radial-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-to-\\(--my-var\\), .mask-radial-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-radial-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
-      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
-      --tw-mask-radial-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-radial-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-radial-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-radial-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-
-    @property --tw-mask-radial-shape {
-      syntax: "*";
-      inherits: false;
-      initial-value: ellipse;
-    }
-
-    @property --tw-mask-radial-size {
-      syntax: "*";
-      inherits: false;
-      initial-value: farthest-corner;
-    }
-
-    @property --tw-mask-radial-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: center;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-radial-to',
-        'mask-radial-to-2.8175',
-        'mask-radial-to--1.5',
-        'mask-radial-to--2',
-
-        'mask-radial-to-2.5%',
-        'mask-radial-to--5%',
-        'mask-radial-to-unknown',
-        'mask-radial-to-unknown%',
-
-        '-mask-radial-to-0',
-        '-mask-radial-to-1.5',
-        '-mask-radial-to-2',
-        '-mask-radial-to-0%',
-        '-mask-radial-to-2%',
-        '-mask-radial-to-[0px]',
-        '-mask-radial-to-[0%]',
-
-        '-mask-radial-to-(--my-var)',
-        '-mask-radial-to-(color:--my-var)',
-        '-mask-radial-to-(length:--my-var)',
-
-        'mask-radial-to-[-25%]',
-        'mask-radial-to-[25%]/foo',
-        'mask-radial-to-[-25%]/foo',
-        '-mask-radial-to-[-25%]',
-        '-mask-radial-to-[25%]/foo',
-        '-mask-radial-to-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-conic', async () => {
-  expect(
-    await run([
-      'mask-conic-0',
-      'mask-conic-1',
-      '-mask-conic-1',
-      'mask-conic-45',
-      'mask-conic-[3rad]',
-      '-mask-conic-45',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-conic-position: 0deg;
-          --tw-mask-conic-from-position: 0%;
-          --tw-mask-conic-to-position: 100%;
-          --tw-mask-conic-from-color: black;
-          --tw-mask-conic-to-color: transparent;
-        }
-      }
-    }
-
-    .-mask-conic-1 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
-      --tw-mask-conic-position: -1deg;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .-mask-conic-45 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
-      --tw-mask-conic-position: calc(1deg * -45);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
-      --tw-mask-conic-position: 0deg;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-1 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
-      --tw-mask-conic-position: 1deg;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-45 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
-      --tw-mask-conic-position: calc(1deg * 45);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-\\[3rad\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
-      --tw-mask-conic-position: 171.887deg;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0deg;
-    }
-
-    @property --tw-mask-conic-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-conic-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-conic-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-conic-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mask-conic',
-      '-mask-conic',
-
-      'mask-conic--75',
-      'mask-conic-unknown',
-      'mask-conic--75/foo',
-      'mask-conic-unknown/foo',
-
-      'mask-conic-45/foo',
-      '-mask-conic-45/foo',
-
-      'mask-conic-[3rad]/foo',
-      '-mask-conic-[3rad]/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mask-conic-from', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-conic-from-0',
-        'mask-conic-from-1.5',
-        'mask-conic-from-2',
-        'mask-conic-from-0%',
-        'mask-conic-from-2%',
-        'mask-conic-from-[0px]',
-        'mask-conic-from-[0%]',
-
-        'mask-conic-from-(--my-var)',
-        'mask-conic-from-(color:--my-var)',
-        'mask-conic-from-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-conic-position: 0deg;
-          --tw-mask-conic-from-position: 0%;
-          --tw-mask-conic-to-position: 100%;
-          --tw-mask-conic-from-color: black;
-          --tw-mask-conic-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-conic-from-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-from-\\(--my-var\\), .mask-conic-from-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-from-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-from-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-from-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-from-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-from-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-from-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-from-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-from-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0deg;
-    }
-
-    @property --tw-mask-conic-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-conic-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-conic-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-conic-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-conic-from',
-        'mask-conic-from-2.8175',
-        'mask-conic-from--1.5',
-        'mask-conic-from--2',
-
-        'mask-conic-from-2.5%',
-        'mask-conic-from--5%',
-        'mask-conic-from-unknown',
-        'mask-conic-from-unknown%',
-
-        '-mask-conic-from-0',
-        '-mask-conic-from-1.5',
-        '-mask-conic-from-2',
-        '-mask-conic-from-0%',
-        '-mask-conic-from-2%',
-        '-mask-conic-from-[0px]',
-        '-mask-conic-from-[0%]',
-
-        '-mask-conic-from-(--my-var)',
-        '-mask-conic-from-(color:--my-var)',
-        '-mask-conic-from-(length:--my-var)',
-
-        'mask-conic-from-[-25%]',
-        'mask-conic-from-[25%]/foo',
-        'mask-conic-from-[-25%]/foo',
-        '-mask-conic-from-[-25%]',
-        '-mask-conic-from-[25%]/foo',
-        '-mask-conic-from-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('mask-conic-to', async () => {
-  let input = css`
-    @theme {
-      --spacing: 0.25rem;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
-      [
-        'mask-conic-to-0',
-        'mask-conic-to-1.5',
-        'mask-conic-to-2',
-        'mask-conic-to-0%',
-        'mask-conic-to-2%',
-        'mask-conic-to-[0px]',
-        'mask-conic-to-[0%]',
-
-        'mask-conic-to-(--my-var)',
-        'mask-conic-to-(color:--my-var)',
-        'mask-conic-to-(length:--my-var)',
-      ],
-      input,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-conic-position: 0deg;
-          --tw-mask-conic-from-position: 0%;
-          --tw-mask-conic-to-position: 100%;
-          --tw-mask-conic-from-color: black;
-          --tw-mask-conic-to-color: transparent;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
-    }
-
-    .mask-conic-to-\\(color\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-color: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-to-\\(--my-var\\), .mask-conic-to-\\(length\\:--my-var\\) {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: var(--my-var);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-to-0 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-to-0\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-to-1\\.5 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: calc(var(--spacing) * 1.5);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-to-2 {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: calc(var(--spacing) * 2);
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-to-2\\% {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: 2%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-to-\\[0\\%\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: 0%;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    .mask-conic-to-\\[0px\\] {
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
-      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
-      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
-      --tw-mask-conic-to-position: 0px;
-      -webkit-mask-composite: source-in;
-      -webkit-mask-composite: source-in;
-      mask-composite: intersect;
-    }
-
-    @property --tw-mask-linear {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-radial {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic {
-      syntax: "*";
-      inherits: false;
-      initial-value: linear-gradient(#fff, #fff);
-    }
-
-    @property --tw-mask-conic-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0deg;
-    }
-
-    @property --tw-mask-conic-from-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0%;
-    }
-
-    @property --tw-mask-conic-to-position {
-      syntax: "*";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-mask-conic-from-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: black;
-    }
-
-    @property --tw-mask-conic-to-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: transparent;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        'mask-conic-to',
-        'mask-conic-to-2.8175',
-        'mask-conic-to--1.5',
-        'mask-conic-to--2',
-
-        'mask-conic-to-2.5%',
-        'mask-conic-to--5%',
-        'mask-conic-to-unknown',
-        'mask-conic-to-unknown%',
-
-        '-mask-conic-to-0',
-        '-mask-conic-to-1.5',
-        '-mask-conic-to-2',
-        '-mask-conic-to-0%',
-        '-mask-conic-to-2%',
-        '-mask-conic-to-[0px]',
-        '-mask-conic-to-[0%]',
-
-        '-mask-conic-to-(--my-var)',
-        '-mask-conic-to-(color:--my-var)',
-        '-mask-conic-to-(length:--my-var)',
-
-        'mask-conic-to-[-25%]',
-        'mask-conic-to-[25%]/foo',
-        'mask-conic-to-[-25%]/foo',
-        '-mask-conic-to-[-25%]',
-        '-mask-conic-to-[25%]/foo',
-        '-mask-conic-to-[-25%]/foo',
-      ],
-      input,
-    ),
-  ).toEqual('')
-})
-
-test('box-decoration', async () => {
-  expect(await run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
-    "
-    .box-decoration-clone {
+test('box-decoration', () => {
+  expect(run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
+    ".box-decoration-clone {
       -webkit-box-decoration-break: clone;
       box-decoration-break: clone;
     }
@@ -21439,223 +7709,60 @@ test('box-decoration', async () => {
     .box-decoration-slice {
       -webkit-box-decoration-break: slice;
       box-decoration-break: slice;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'box',
-      'box-decoration',
-      '-box-decoration-slice',
-      '-box-decoration-clone',
-      'box-decoration-slice/foo',
-      'box-decoration-clone/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['box', 'box-decoration', '-box-decoration-slice', '-box-decoration-clone'])).toEqual(
+    '',
+  )
 })
 
-test('bg-clip', async () => {
-  expect(await run(['bg-clip-border', 'bg-clip-padding', 'bg-clip-content', 'bg-clip-text']))
+test('bg-clip', () => {
+  expect(run(['bg-clip-border', 'bg-clip-padding', 'bg-clip-content', 'bg-clip-text']))
     .toMatchInlineSnapshot(`
-      "
-      .bg-clip-border {
-        background-clip: border-box;
-      }
+    ".bg-clip-border {
+      background-clip: border-box;
+    }
 
-      .bg-clip-content {
-        background-clip: content-box;
-      }
+    .bg-clip-content {
+      background-clip: content-box;
+    }
 
-      .bg-clip-padding {
-        background-clip: padding-box;
-      }
+    .bg-clip-padding {
+      background-clip: padding-box;
+    }
 
-      .bg-clip-text {
-        -webkit-background-clip: text;
-        background-clip: text;
-      }
-      "
-    `)
+    .bg-clip-text {
+      background-clip: text;
+    }"
+  `)
   expect(
-    await run([
-      'bg-clip',
-      '-bg-clip-border',
-      '-bg-clip-padding',
-      '-bg-clip-content',
-      '-bg-clip-text',
-      'bg-clip-border/foo',
-      'bg-clip-padding/foo',
-      'bg-clip-content/foo',
-      'bg-clip-text/foo',
-    ]),
+    run(['bg-clip', '-bg-clip-border', '-bg-clip-padding', '-bg-clip-content', '-bg-clip-text']),
   ).toEqual('')
 })
 
-test('bg-origin', async () => {
-  expect(await run(['bg-origin-border', 'bg-origin-padding', 'bg-origin-content']))
+test('bg-origin', () => {
+  expect(run(['bg-origin-border', 'bg-origin-padding', 'bg-origin-content']))
     .toMatchInlineSnapshot(`
-      "
-      .bg-origin-border {
-        background-origin: border-box;
-      }
-
-      .bg-origin-content {
-        background-origin: content-box;
-      }
-
-      .bg-origin-padding {
-        background-origin: padding-box;
-      }
-      "
-    `)
-  expect(
-    await run([
-      'bg-origin',
-      '-bg-origin-border',
-      '-bg-origin-padding',
-      '-bg-origin-content',
-      'bg-origin-border/foo',
-      'bg-origin-padding/foo',
-      'bg-origin-content/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('mask-clip', async () => {
-  expect(
-    await run([
-      'mask-clip-border',
-      'mask-clip-padding',
-      'mask-clip-content',
-      'mask-clip-fill',
-      'mask-clip-stroke',
-      'mask-clip-view',
-      'mask-no-clip',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .mask-clip-border {
-      -webkit-mask-clip: border-box;
-      mask-clip: border-box;
+    ".bg-origin-border {
+      background-origin: border-box;
     }
 
-    .mask-clip-content {
-      -webkit-mask-clip: content-box;
-      mask-clip: content-box;
+    .bg-origin-content {
+      background-origin: content-box;
     }
 
-    .mask-clip-fill {
-      -webkit-mask-clip: fill-box;
-      mask-clip: fill-box;
-    }
-
-    .mask-clip-padding {
-      -webkit-mask-clip: padding-box;
-      mask-clip: padding-box;
-    }
-
-    .mask-clip-stroke {
-      -webkit-mask-clip: stroke-box;
-      mask-clip: stroke-box;
-    }
-
-    .mask-clip-view {
-      -webkit-mask-clip: view-box;
-      mask-clip: view-box;
-    }
-
-    .mask-no-clip {
-      -webkit-mask-clip: no-clip;
-      mask-clip: no-clip;
-    }
-    "
+    .bg-origin-padding {
+      background-origin: padding-box;
+    }"
   `)
   expect(
-    await run([
-      'mask-clip',
-      '-mask-clip-border',
-      '-mask-clip-padding',
-      '-mask-clip-content',
-      '-mask-clip-fill',
-      '-mask-clip-stroke',
-      '-mask-clip-view',
-      '-mask-no-clip',
-      'mask-clip-border/foo',
-      'mask-clip-padding/foo',
-      'mask-clip-content/foo',
-      'mask-clip-fill/foo',
-      'mask-clip-stroke/foo',
-      'mask-clip-view/foo',
-      'mask-no-clip/foo',
-    ]),
+    run(['bg-origin', '-bg-origin-border', '-bg-origin-padding', '-bg-origin-content']),
   ).toEqual('')
 })
 
-test('mask-origin', async () => {
+test('bg-blend', () => {
   expect(
-    await run([
-      'mask-origin-border',
-      'mask-origin-padding',
-      'mask-origin-content',
-      'mask-origin-fill',
-      'mask-origin-stroke',
-      'mask-origin-view',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .mask-origin-border {
-      -webkit-mask-origin: border-box;
-      mask-origin: border-box;
-    }
-
-    .mask-origin-content {
-      -webkit-mask-origin: content-box;
-      mask-origin: content-box;
-    }
-
-    .mask-origin-fill {
-      -webkit-mask-origin: fill-box;
-      mask-origin: fill-box;
-    }
-
-    .mask-origin-padding {
-      -webkit-mask-origin: padding-box;
-      mask-origin: padding-box;
-    }
-
-    .mask-origin-stroke {
-      -webkit-mask-origin: stroke-box;
-      mask-origin: stroke-box;
-    }
-
-    .mask-origin-view {
-      -webkit-mask-origin: view-box;
-      mask-origin: view-box;
-    }
-    "
-  `)
-  expect(
-    await run([
-      'mask-origin',
-      '-mask-origin-border',
-      '-mask-origin-padding',
-      '-mask-origin-content',
-      '-mask-origin-fill',
-      '-mask-origin-stroke',
-      '-mask-origin-view',
-      'mask-origin-border/foo',
-      'mask-origin-padding/foo',
-      'mask-origin-content/foo',
-      'mask-origin-fill/foo',
-      'mask-origin-stroke/foo',
-      'mask-origin-view/foo',
-    ]),
-  ).toEqual('')
-})
-
-test('bg-blend', async () => {
-  expect(
-    await run([
+    run([
       'bg-blend-normal',
       'bg-blend-multiply',
       'bg-blend-screen',
@@ -21674,8 +7781,7 @@ test('bg-blend', async () => {
       'bg-blend-luminosity',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .bg-blend-color {
+    ".bg-blend-color {
       background-blend-mode: color;
     }
 
@@ -21737,11 +7843,10 @@ test('bg-blend', async () => {
 
     .bg-blend-soft-light {
       background-blend-mode: soft-light;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'bg-blend',
       '-bg-blend-normal',
       '-bg-blend-multiply',
@@ -21759,29 +7864,13 @@ test('bg-blend', async () => {
       '-bg-blend-saturation',
       '-bg-blend-color',
       '-bg-blend-luminosity',
-      'bg-blend-normal/foo',
-      'bg-blend-multiply/foo',
-      'bg-blend-screen/foo',
-      'bg-blend-overlay/foo',
-      'bg-blend-darken/foo',
-      'bg-blend-lighten/foo',
-      'bg-blend-color-dodge/foo',
-      'bg-blend-color-burn/foo',
-      'bg-blend-hard-light/foo',
-      'bg-blend-soft-light/foo',
-      'bg-blend-difference/foo',
-      'bg-blend-exclusion/foo',
-      'bg-blend-hue/foo',
-      'bg-blend-saturation/foo',
-      'bg-blend-color/foo',
-      'bg-blend-luminosity/foo',
     ]),
   ).toEqual('')
 })
 
-test('mix-blend', async () => {
+test('mix-blend', () => {
   expect(
-    await run([
+    run([
       'mix-blend-normal',
       'mix-blend-multiply',
       'mix-blend-screen',
@@ -21802,8 +7891,7 @@ test('mix-blend', async () => {
       'mix-blend-plus-lighter',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .mix-blend-color {
+    ".mix-blend-color {
       mix-blend-mode: color;
     }
 
@@ -21873,11 +7961,10 @@ test('mix-blend', async () => {
 
     .mix-blend-soft-light {
       mix-blend-mode: soft-light;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'mix-blend',
       '-mix-blend-normal',
       '-mix-blend-multiply',
@@ -21896,64 +7983,38 @@ test('mix-blend', async () => {
       '-mix-blend-color',
       '-mix-blend-luminosity',
       '-mix-blend-plus-lighter',
-      'mix-blend-normal/foo',
-      'mix-blend-multiply/foo',
-      'mix-blend-screen/foo',
-      'mix-blend-overlay/foo',
-      'mix-blend-darken/foo',
-      'mix-blend-lighten/foo',
-      'mix-blend-color-dodge/foo',
-      'mix-blend-color-burn/foo',
-      'mix-blend-hard-light/foo',
-      'mix-blend-soft-light/foo',
-      'mix-blend-difference/foo',
-      'mix-blend-exclusion/foo',
-      'mix-blend-hue/foo',
-      'mix-blend-saturation/foo',
-      'mix-blend-color/foo',
-      'mix-blend-luminosity/foo',
-      'mix-blend-plus-darker/foo',
-      'mix-blend-plus-lighter/foo',
     ]),
   ).toEqual('')
 })
 
-test('fill', async () => {
+test('fill', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         'fill-red-500',
         'fill-red-500/50',
-        'fill-red-500/2.25',
-        'fill-red-500/2.5',
-        'fill-red-500/2.75',
         'fill-red-500/[0.5]',
         'fill-red-500/[50%]',
-        'fill-blue-500',
         'fill-current',
         'fill-current/50',
         'fill-current/[0.5]',
         'fill-current/[50%]',
-        'fill-inherit',
         'fill-transparent',
         'fill-[#0088cc]',
         'fill-[#0088cc]/50',
         'fill-[#0088cc]/[0.5]',
         'fill-[#0088cc]/[50%]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --fill-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --fill-blue-500: #3b82f6;
     }
 
     .fill-\\[\\#0088cc\\] {
@@ -21961,120 +8022,32 @@ test('fill', async () => {
     }
 
     .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      fill: oklab(59.9824% -.067 -.124 / .5);
+      fill: #0088cc80;
     }
 
-    .fill-blue-500 {
-      fill: var(--fill-blue-500);
-    }
-
-    .fill-current, .fill-current\\/50 {
+    .fill-current {
       fill: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-current\\/50 {
-        fill: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .fill-current\\/\\[0\\.5\\] {
-      fill: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-current\\/\\[0\\.5\\] {
-        fill: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .fill-current\\/\\[50\\%\\] {
-      fill: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-current\\/\\[50\\%\\] {
-        fill: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .fill-inherit {
-      fill: inherit;
+    .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] {
+      fill: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .fill-red-500 {
-      fill: var(--color-red-500);
+      fill: var(--color-red-500, #ef4444);
     }
 
-    .fill-red-500\\/2\\.5 {
-      fill: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-red-500\\/2\\.5 {
-        fill: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .fill-red-500\\/2\\.25 {
-      fill: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-red-500\\/2\\.25 {
-        fill: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .fill-red-500\\/2\\.75 {
-      fill: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-red-500\\/2\\.75 {
-        fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    .fill-red-500\\/50 {
-      fill: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-red-500\\/50 {
-        fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .fill-red-500\\/\\[0\\.5\\] {
-      fill: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-red-500\\/\\[0\\.5\\] {
-        fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .fill-red-500\\/\\[50\\%\\] {
-      fill: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .fill-red-500\\/\\[50\\%\\] {
-        fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] {
+      fill: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .fill-transparent {
       fill: #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'fill',
-      'fill-unknown',
       '-fill-red-500',
       '-fill-red-500/50',
       '-fill-red-500/[0.5]',
@@ -22083,7 +8056,6 @@ test('fill', async () => {
       '-fill-current/50',
       '-fill-current/[0.5]',
       '-fill-current/[50%]',
-      '-fill-inherit',
       '-fill-transparent',
       '-fill-[#0088cc]',
       '-fill-[#0088cc]/50',
@@ -22093,37 +8065,38 @@ test('fill', async () => {
   ).toEqual('')
 })
 
-test('stroke', async () => {
+test('stroke', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         // Color
         'stroke-red-500',
         'stroke-red-500/50',
-        'stroke-red-500/2.25',
-        'stroke-red-500/2.5',
-        'stroke-red-500/2.75',
         'stroke-red-500/[0.5]',
         'stroke-red-500/[50%]',
-        'stroke-blue-500',
         'stroke-current',
         'stroke-current/50',
         'stroke-current/[0.5]',
         'stroke-current/[50%]',
-        'stroke-inherit',
         'stroke-transparent',
         'stroke-[#0088cc]',
         'stroke-[#0088cc]/50',
         'stroke-[#0088cc]/[0.5]',
         'stroke-[#0088cc]/[50%]',
-        'stroke-[var(--my-color)]',
-        'stroke-[var(--my-color)]/50',
-        'stroke-[var(--my-color)]/[0.5]',
-        'stroke-[var(--my-color)]/[50%]',
-        'stroke-[color:var(--my-color)]',
-        'stroke-[color:var(--my-color)]/50',
-        'stroke-[color:var(--my-color)]/[0.5]',
-        'stroke-[color:var(--my-color)]/[50%]',
+        'stroke-[--my-color]',
+        'stroke-[--my-color]/50',
+        'stroke-[--my-color]/[0.5]',
+        'stroke-[--my-color]/[50%]',
+        'stroke-[color:--my-color]',
+        'stroke-[color:--my-color]/50',
+        'stroke-[color:--my-color]/[0.5]',
+        'stroke-[color:--my-color]/[50%]',
         'stroke-none',
 
         // Width
@@ -22133,23 +8106,14 @@ test('stroke', async () => {
         'stroke-[1.5]',
         'stroke-[12px]',
         'stroke-[50%]',
-        'stroke-[number:var(--my-width)]',
-        'stroke-[length:var(--my-width)]',
-        'stroke-[percentage:var(--my-width)]',
+        'stroke-[number:--my-width]',
+        'stroke-[length:--my-width]',
+        'stroke-[percentage:--my-width]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --stroke-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --stroke-blue-500: #3b82f6;
     }
 
     .stroke-\\[\\#0088cc\\] {
@@ -22157,105 +8121,31 @@ test('stroke', async () => {
     }
 
     .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      stroke: oklab(59.9824% -.067 -.124 / .5);
+      stroke: #0088cc80;
     }
 
-    .stroke-\\[color\\:var\\(--my-color\\)\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    .stroke-\\[--my-color\\] {
       stroke: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .stroke-\\[--my-color\\]\\/50, .stroke-\\[--my-color\\]\\/\\[0\\.5\\], .stroke-\\[--my-color\\]\\/\\[50\\%\\] {
+      stroke: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+    .stroke-\\[color\\:--my-color\\] {
       stroke: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .stroke-\\[color\\:--my-color\\]\\/50, .stroke-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .stroke-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      stroke: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      stroke: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .stroke-\\[var\\(--my-color\\)\\], .stroke-\\[var\\(--my-color\\)\\]\\/50 {
-      stroke: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-\\[var\\(--my-color\\)\\]\\/50 {
-        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      stroke: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      stroke: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .stroke-blue-500 {
-      stroke: var(--stroke-blue-500);
-    }
-
-    .stroke-current, .stroke-current\\/50 {
+    .stroke-current {
       stroke: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-current\\/50 {
-        stroke: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .stroke-current\\/\\[0\\.5\\] {
-      stroke: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-current\\/\\[0\\.5\\] {
-        stroke: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .stroke-current\\/\\[50\\%\\] {
-      stroke: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-current\\/\\[50\\%\\] {
-        stroke: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .stroke-inherit {
-      stroke: inherit;
+    .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] {
+      stroke: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .stroke-none {
@@ -22263,67 +8153,11 @@ test('stroke', async () => {
     }
 
     .stroke-red-500 {
-      stroke: var(--color-red-500);
+      stroke: var(--color-red-500, #ef4444);
     }
 
-    .stroke-red-500\\/2\\.5 {
-      stroke: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-red-500\\/2\\.5 {
-        stroke: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .stroke-red-500\\/2\\.25 {
-      stroke: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-red-500\\/2\\.25 {
-        stroke: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .stroke-red-500\\/2\\.75 {
-      stroke: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-red-500\\/2\\.75 {
-        stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    .stroke-red-500\\/50 {
-      stroke: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-red-500\\/50 {
-        stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .stroke-red-500\\/\\[0\\.5\\] {
-      stroke: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-red-500\\/\\[0\\.5\\] {
-        stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .stroke-red-500\\/\\[50\\%\\] {
-      stroke: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .stroke-red-500\\/\\[50\\%\\] {
-        stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] {
+      stroke: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .stroke-transparent {
@@ -22354,16 +8188,13 @@ test('stroke', async () => {
       stroke-width: 50%;
     }
 
-    .stroke-\\[length\\:var\\(--my-width\\)\\], .stroke-\\[number\\:var\\(--my-width\\)\\], .stroke-\\[percentage\\:var\\(--my-width\\)\\] {
+    .stroke-\\[length\\:--my-width\\], .stroke-\\[number\\:--my-width\\], .stroke-\\[percentage\\:--my-width\\] {
       stroke-width: var(--my-width);
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'stroke',
-      'stroke-unknown',
-
       // Color
       '-stroke-red-500',
       '-stroke-red-500/50',
@@ -22373,7 +8204,6 @@ test('stroke', async () => {
       '-stroke-current/50',
       '-stroke-current/[0.5]',
       '-stroke-current/[50%]',
-      '-stroke-inherit',
       '-stroke-transparent',
       '-stroke-[#0088cc]',
       '-stroke-[#0088cc]/50',
@@ -22382,19 +8212,13 @@ test('stroke', async () => {
 
       // Width
       '-stroke-0',
-      'stroke--1',
-      'stroke-0/foo',
-      'stroke-1/50',
-      'stroke-2/[0.5]',
-      'stroke-2/(--my-opacity)',
-      'stroke-[12px]/foo',
     ]),
   ).toEqual('')
 })
 
-test('object', async () => {
+test('object', () => {
   expect(
-    await run([
+    run([
       // object-fit
       'object-contain',
       'object-cover',
@@ -22403,26 +8227,19 @@ test('object', async () => {
       'object-scale-down',
 
       // object-position
-      'object-[var(--value)]',
-      'object-top',
-      'object-top-left',
-      'object-top-right',
+      'object-[--value]',
       'object-bottom',
-      'object-bottom-left',
-      'object-bottom-right',
-      'object-left',
-      'object-right',
       'object-center',
-
-      // Legacy versions in v4.0 and earlier
+      'object-left',
       'object-left-bottom',
       'object-left-top',
+      'object-right',
       'object-right-bottom',
       'object-right-top',
+      'object-top',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .object-contain {
+    ".object-contain {
       object-fit: contain;
     }
 
@@ -22442,7 +8259,7 @@ test('object', async () => {
       object-fit: scale-down;
     }
 
-    .object-\\[var\\(--value\\)\\] {
+    .object-\\[--value\\] {
       object-position: var(--value);
     }
 
@@ -22450,14 +8267,6 @@ test('object', async () => {
       object-position: bottom;
     }
 
-    .object-bottom-left {
-      object-position: left bottom;
-    }
-
-    .object-bottom-right {
-      object-position: right bottom;
-    }
-
     .object-center {
       object-position: center;
     }
@@ -22488,19 +8297,10 @@ test('object', async () => {
 
     .object-top {
       object-position: top;
-    }
-
-    .object-top-left {
-      object-position: left top;
-    }
-
-    .object-top-right {
-      object-position: right top;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'object',
       // object-fit
       '-object-contain',
@@ -22510,529 +8310,263 @@ test('object', async () => {
       '-object-scale-down',
 
       // object-position
-      '-object-[var(--value)]',
+      '-object-[--value]',
       '-object-bottom',
-
-      'object-contain/foo',
-      'object-cover/foo',
-      'object-fill/foo',
-      'object-none/foo',
-      'object-scale-down/foo',
-      'object-[var(--value)]/foo',
-      'object-bottom/foo',
-      'object-center/foo',
-      'object-left/foo',
-      'object-left-bottom/foo',
-      'object-left-top/foo',
-      'object-right/foo',
-      'object-right-bottom/foo',
-      'object-right-top/foo',
-      'object-top/foo',
     ]),
   ).toEqual('')
-
-  expect(
-    await run(
-      ['object-center'],
-      css`
-        @theme {
-          --object-position-center: top left;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --object-position-center: top left;
-    }
-
-    .object-center {
-      object-position: var(--object-position-center);
-    }
-    "
-  `)
 })
 
-test('p', async () => {
+test('p', () => {
   expect(
-    await run(
-      ['p-1', 'p-4', 'p-99', 'p-big', 'p-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['p-4', 'p-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .p-1 {
-      padding: var(--spacing);
+    ":root {
+      --spacing-4: 1rem;
     }
 
     .p-4 {
-      padding: calc(var(--spacing) * 4);
-    }
-
-    .p-99 {
-      padding: calc(var(--spacing) * 99);
+      padding: var(--spacing-4, 1rem);
     }
 
     .p-\\[4px\\] {
       padding: 4px;
-    }
-
-    .p-big {
-      padding: var(--spacing-big);
-    }
-    "
+    }"
   `)
-  expect(await run(['p', '-p-4', '-p-[4px]', 'p-4/foo', 'p-[4px]/foo'])).toEqual('')
+  expect(run(['p', '-p-4', '-p-[4px]'])).toEqual('')
 })
 
-test('px', async () => {
+test('px', () => {
   expect(
-    await run(
-      ['px-1', 'px-99', 'px-2.5', 'px-big', 'px-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['px-4', 'px-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
+    ":root {
+      --spacing-4: 1rem;
     }
 
-    .px-1 {
-      padding-inline: var(--spacing);
-    }
-
-    .px-2\\.5 {
-      padding-inline: calc(var(--spacing) * 2.5);
-    }
-
-    .px-99 {
-      padding-inline: calc(var(--spacing) * 99);
+    .px-4 {
+      padding-left: var(--spacing-4, 1rem);
+      padding-right: var(--spacing-4, 1rem);
     }
 
     .px-\\[4px\\] {
-      padding-inline: 4px;
-    }
-
-    .px-big {
-      padding-inline: var(--spacing-big);
-    }
-    "
+      padding-left: 4px;
+      padding-right: 4px;
+    }"
   `)
-  expect(await run(['px', '-px-4', '-px-[4px]', 'px-4/foo', 'px-[4px]/foo'])).toEqual('')
+  expect(run(['px', '-px-4', '-px-[4px]'])).toEqual('')
 })
 
-test('py', async () => {
+test('py', () => {
   expect(
-    await run(
-      ['py-1', 'py-4', 'py-99', 'py-big', 'py-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['py-4', 'py-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .py-1 {
-      padding-block: var(--spacing);
+    ":root {
+      --spacing-4: 1rem;
     }
 
     .py-4 {
-      padding-block: calc(var(--spacing) * 4);
-    }
-
-    .py-99 {
-      padding-block: calc(var(--spacing) * 99);
+      padding-top: var(--spacing-4, 1rem);
+      padding-bottom: var(--spacing-4, 1rem);
     }
 
     .py-\\[4px\\] {
-      padding-block: 4px;
-    }
-
-    .py-big {
-      padding-block: var(--spacing-big);
-    }
-    "
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }"
   `)
-  expect(await run(['py', '-py-4', '-py-[4px]', 'py-4/foo', 'py-[4px]/foo'])).toEqual('')
+  expect(run(['py', '-py-4', '-py-[4px]'])).toEqual('')
 })
 
-test('pt', async () => {
+test('pt', () => {
   expect(
-    await run(
-      ['pt-1', 'pt-4', 'pt-99', 'pt-big', 'pt-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['pt-4', 'pt-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .pt-1 {
-      padding-top: var(--spacing);
+    ":root {
+      --spacing-4: 1rem;
     }
 
     .pt-4 {
-      padding-top: calc(var(--spacing) * 4);
-    }
-
-    .pt-99 {
-      padding-top: calc(var(--spacing) * 99);
+      padding-top: var(--spacing-4, 1rem);
     }
 
     .pt-\\[4px\\] {
       padding-top: 4px;
-    }
-
-    .pt-big {
-      padding-top: var(--spacing-big);
-    }
-    "
+    }"
   `)
-  expect(await run(['pt', '-pt-4', '-pt-[4px]', 'pt-4/foo', 'pt-[4px]/foo'])).toEqual('')
+  expect(run(['pt', '-pt-4', '-pt-[4px]'])).toEqual('')
 })
 
-test('ps', async () => {
+test('ps', () => {
   expect(
-    await run(
-      ['ps-1', 'ps-4', 'ps-99', 'ps-big', 'ps-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['ps-4', 'ps-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .ps-1 {
-      padding-inline-start: var(--spacing);
+    ":root {
+      --spacing-4: 1rem;
     }
 
     .ps-4 {
-      padding-inline-start: calc(var(--spacing) * 4);
-    }
-
-    .ps-99 {
-      padding-inline-start: calc(var(--spacing) * 99);
+      padding-inline-start: var(--spacing-4, 1rem);
     }
 
     .ps-\\[4px\\] {
       padding-inline-start: 4px;
-    }
-
-    .ps-big {
-      padding-inline-start: var(--spacing-big);
-    }
-    "
+    }"
   `)
-  expect(await run(['ps', '-ps-4', '-ps-[4px]', 'ps-4/foo', 'ps-[4px]/foo'])).toEqual('')
+  expect(run(['ps', '-ps-4', '-ps-[4px]'])).toEqual('')
 })
 
-test('pe', async () => {
+test('pe', () => {
   expect(
-    await run(
-      ['pe-1', 'pe-4', 'pe-99', 'pe-big', 'pe-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['pe-4', 'pe-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .pe-1 {
-      padding-inline-end: var(--spacing);
+    ":root {
+      --spacing-4: 1rem;
     }
 
     .pe-4 {
-      padding-inline-end: calc(var(--spacing) * 4);
-    }
-
-    .pe-99 {
-      padding-inline-end: calc(var(--spacing) * 99);
+      padding-inline-end: var(--spacing-4, 1rem);
     }
 
     .pe-\\[4px\\] {
       padding-inline-end: 4px;
-    }
-
-    .pe-big {
-      padding-inline-end: var(--spacing-big);
-    }
-    "
+    }"
   `)
-  expect(await run(['pe', '-pe-4', '-pe-[4px]', 'pe-4/foo', 'pe-[4px]/foo'])).toEqual('')
+  expect(run(['pe', '-pe-4', '-pe-[4px]'])).toEqual('')
 })
 
-test('pbs', async () => {
+test('pr', () => {
   expect(
-    await run(
-      ['pbs-1', 'pbs-4', 'pbs-99', 'pbs-big', 'pbs-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['pr-4', 'pr-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .pbs-1 {
-      padding-block-start: var(--spacing);
-    }
-
-    .pbs-4 {
-      padding-block-start: calc(var(--spacing) * 4);
-    }
-
-    .pbs-99 {
-      padding-block-start: calc(var(--spacing) * 99);
-    }
-
-    .pbs-\\[4px\\] {
-      padding-block-start: 4px;
-    }
-
-    .pbs-big {
-      padding-block-start: var(--spacing-big);
-    }
-    "
-  `)
-  expect(await run(['pbs', '-pbs-4', '-pbs-[4px]', 'pbs-4/foo', 'pbs-[4px]/foo'])).toEqual('')
-})
-
-test('pbe', async () => {
-  expect(
-    await run(
-      ['pbe-1', 'pbe-4', 'pbe-99', 'pbe-big', 'pbe-[4px]'],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .pbe-1 {
-      padding-block-end: var(--spacing);
-    }
-
-    .pbe-4 {
-      padding-block-end: calc(var(--spacing) * 4);
-    }
-
-    .pbe-99 {
-      padding-block-end: calc(var(--spacing) * 99);
-    }
-
-    .pbe-\\[4px\\] {
-      padding-block-end: 4px;
-    }
-
-    .pbe-big {
-      padding-block-end: var(--spacing-big);
-    }
-    "
-  `)
-  expect(await run(['pbe', '-pbe-4', '-pbe-[4px]', 'pbe-4/foo', 'pbe-[4px]/foo'])).toEqual('')
-})
-
-test('pr', async () => {
-  expect(
-    await run(
-      ['pr-1', 'pr-4', 'pr-99', 'pr-big', 'pr-[4px]'],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .pr-1 {
-      padding-right: var(--spacing);
+    ":root {
+      --spacing-4: 1rem;
     }
 
     .pr-4 {
-      padding-right: calc(var(--spacing) * 4);
-    }
-
-    .pr-99 {
-      padding-right: calc(var(--spacing) * 99);
+      padding-right: var(--spacing-4, 1rem);
     }
 
     .pr-\\[4px\\] {
       padding-right: 4px;
-    }
-
-    .pr-big {
-      padding-right: var(--spacing-big);
-    }
-    "
+    }"
   `)
-  expect(await run(['pr', '-pr-4', '-pr-[4px]', 'pr-4/foo', 'pr-[4px]/foo'])).toEqual('')
+  expect(run(['pr', '-pr-4', '-pr-[4px]'])).toEqual('')
 })
 
-test('pb', async () => {
+test('pb', () => {
   expect(
-    await run(
-      ['pb-1', 'pb-4', 'pb-99', 'pb-big', 'pb-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['pb-4', 'pb-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .pb-1 {
-      padding-bottom: var(--spacing);
+    ":root {
+      --spacing-4: 1rem;
     }
 
     .pb-4 {
-      padding-bottom: calc(var(--spacing) * 4);
-    }
-
-    .pb-99 {
-      padding-bottom: calc(var(--spacing) * 99);
+      padding-bottom: var(--spacing-4, 1rem);
     }
 
     .pb-\\[4px\\] {
       padding-bottom: 4px;
-    }
-
-    .pb-big {
-      padding-bottom: var(--spacing-big);
-    }
-    "
+    }"
   `)
-  expect(await run(['pb', '-pb-4', '-pb-[4px]', 'pb-4/foo', 'pb-[4px]/foo'])).toEqual('')
+  expect(run(['pb', '-pb-4', '-pb-[4px]'])).toEqual('')
 })
 
-test('pl', async () => {
+test('pl', () => {
   expect(
-    await run(
-      ['pl-1', 'pl-4', 'pl-99', 'pl-big', 'pl-[4px]'],
+    compileCss(
       css`
         @theme {
-          --spacing: 0.25rem;
-          --spacing-big: 100rem;
+          --spacing-4: 1rem;
         }
         @tailwind utilities;
       `,
+      ['pl-4', 'pl-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
-      --spacing-big: 100rem;
-    }
-
-    .pl-1 {
-      padding-left: var(--spacing);
+    ":root {
+      --spacing-4: 1rem;
     }
 
     .pl-4 {
-      padding-left: calc(var(--spacing) * 4);
-    }
-
-    .pl-99 {
-      padding-left: calc(var(--spacing) * 99);
+      padding-left: var(--spacing-4, 1rem);
     }
 
     .pl-\\[4px\\] {
       padding-left: 4px;
-    }
-
-    .pl-big {
-      padding-left: var(--spacing-big);
-    }
-    "
+    }"
   `)
-  expect(await run(['pl', '-pl-4', '-pl-[4px]', 'pl-4/foo', 'pl-[4px]/foo'])).toEqual('')
+  expect(run(['pl', '-pl-4', '-pl-[4px]'])).toEqual('')
 })
 
-test('text-align', async () => {
-  expect(
-    await run(['text-left', 'text-center', 'text-right', 'text-justify', 'text-start', 'text-end']),
-  ).toMatchInlineSnapshot(`
-    "
-    .text-center {
+test('text-align', () => {
+  expect(run(['text-left', 'text-center', 'text-right', 'text-justify', 'text-start', 'text-end']))
+    .toMatchInlineSnapshot(`
+    ".text-center {
       text-align: center;
     }
 
@@ -23054,45 +8588,29 @@ test('text-align', async () => {
 
     .text-start {
       text-align: start;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
-      '-text-left',
-      '-text-center',
-      '-text-right',
-      '-text-justify',
-      '-text-start',
-      '-text-end',
-      'text-left/foo',
-      'text-center/foo',
-      'text-right/foo',
-      'text-justify/foo',
-      'text-start/foo',
-      'text-end/foo',
-    ]),
+    run(['-text-left', '-text-center', '-text-right', '-text-justify', '-text-start', '-text-end']),
   ).toEqual('')
 })
 
-test('indent', async () => {
-  expect(await run(['indent-[4px]', '-indent-[4px]'])).toMatchInlineSnapshot(`
-    "
-    .-indent-\\[4px\\] {
+test('indent', () => {
+  expect(run(['indent-[4px]', '-indent-[4px]'])).toMatchInlineSnapshot(`
+    ".-indent-\\[4px\\] {
       text-indent: -4px;
     }
 
     .indent-\\[4px\\] {
       text-indent: 4px;
-    }
-    "
+    }"
   `)
-  expect(await run(['indent', 'indent-[4px]/foo', '-indent-[4px]/foo'])).toEqual('')
+  expect(run(['indent'])).toEqual('')
 })
 
-test('align', async () => {
+test('align', () => {
   expect(
-    await run([
+    run([
       'align-baseline',
       'align-top',
       'align-middle',
@@ -23102,11 +8620,10 @@ test('align', async () => {
       'align-sub',
       'align-super',
 
-      'align-[var(--value)]',
+      'align-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .align-\\[var\\(--value\\)\\] {
+    ".align-\\[--value\\] {
       vertical-align: var(--value);
     }
 
@@ -23140,11 +8657,10 @@ test('align', async () => {
 
     .align-top {
       vertical-align: top;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'align',
       '-align-baseline',
       '-align-top',
@@ -23155,69 +8671,46 @@ test('align', async () => {
       '-align-sub',
       '-align-super',
 
-      '-align-[var(--value)]',
-
-      'align-baseline/foo',
-      'align-top/foo',
-      'align-middle/foo',
-      'align-bottom/foo',
-      'align-text-top/foo',
-      'align-text-bottom/foo',
-      'align-sub/foo',
-      'align-super/foo',
-      'align-[var(--value)]/foo',
+      '-align-[--value]',
     ]),
   ).toEqual('')
 })
 
-test('font', async () => {
+test('font', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        }
+        @tailwind utilities;
+      `,
       [
         // font-family
         'font-sans',
         'font-["arial_rounded"]',
         'font-[ui-sans-serif]',
-        'font-[var(--my-family)]',
-        'font-[family-name:var(--my-family)]',
-        'font-[generic-name:var(--my-family)]',
+        'font-[--my-family]',
+        'font-[family-name:--my-family]',
+        'font-[generic-name:--my-family]',
 
         // font-weight
         'font-bold',
         'font-[100]',
-        'font-[number:var(--my-weight)]',
+        'font-[number:--my-weight]',
       ],
-      css`
-        @theme {
-          --font-sans:
-            ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-            'Segoe UI Symbol', 'Noto Color Emoji';
-          --font-weight-bold: 650;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-font-weight: initial;
-        }
-      }
-    }
-
-    :root, :host {
-      --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-                "Segoe UI Symbol", "Noto Color Emoji";
-      --font-weight-bold: 650;
+    ":root {
+      --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     }
 
     .font-\\[\\"arial_rounded\\"\\] {
       font-family: arial rounded;
     }
 
-    .font-\\[family-name\\:var\\(--my-family\\)\\], .font-\\[generic-name\\:var\\(--my-family\\)\\] {
+    .font-\\[family-name\\:--my-family\\], .font-\\[generic-name\\:--my-family\\] {
       font-family: var(--my-family);
     }
 
@@ -23226,110 +8719,40 @@ test('font', async () => {
     }
 
     .font-sans {
-      font-family: var(--font-sans);
+      font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     }
 
-    .font-\\[100\\] {
-      --tw-font-weight: 100;
-      font-weight: 100;
-    }
-
-    .font-\\[number\\:var\\(--my-weight\\)\\] {
-      --tw-font-weight: var(--my-weight);
-      font-weight: var(--my-weight);
-    }
-
-    .font-\\[var\\(--my-family\\)\\] {
-      --tw-font-weight: var(--my-family);
+    .font-\\[--my-family\\] {
       font-weight: var(--my-family);
     }
 
+    .font-\\[100\\] {
+      font-weight: 100;
+    }
+
+    .font-\\[number\\:--my-weight\\] {
+      font-weight: var(--my-weight);
+    }
+
     .font-bold {
-      --tw-font-weight: var(--font-weight-bold);
-      font-weight: var(--font-weight-bold);
-    }
-
-    @property --tw-font-weight {
-      syntax: "*";
-      inherits: false
-    }
-    "
+      font-weight: 700;
+    }"
   `)
   expect(
-    await run(
-      [
-        'font',
-        // font-family
-        '-font-sans',
+    run([
+      'font',
+      // font-family
+      '-font-sans',
 
-        // font-weight
-        '-font-bold',
-
-        'font-weight-bold',
-        'font-sans/foo',
-        'font-["arial_rounded"]/foo',
-        'font-[ui-sans-serif]/foo',
-        'font-[var(--my-family)]/foo',
-        'font-[family-name:var(--my-family)]/foo',
-        'font-[generic-name:var(--my-family)]/foo',
-        'font-bold/foo',
-        'font-[100]/foo',
-        'font-[number:var(--my-weight)]/foo',
-      ],
-      css`
-        @theme reference {
-          --font-sans:
-            ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-            'Segoe UI Symbol', 'Noto Color Emoji';
-          --font-weight-bold: 650;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
-})
-
-test('font-features', async () => {
-  expect(
-    await run([
-      'font-features-["smcp"]',
-      'font-features-["c2sc","smcp"]',
-      'font-features-[var(--my-features)]',
-      'font-features-(--my-features)',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .font-features-\\(--my-features\\) {
-      font-feature-settings: var(--my-features);
-    }
-
-    .font-features-\\[\\"c2sc\\"\\,\\"smcp\\"\\] {
-      font-feature-settings: "c2sc","smcp";
-    }
-
-    .font-features-\\[\\"smcp\\"\\] {
-      font-feature-settings: "smcp";
-    }
-
-    .font-features-\\[var\\(--my-features\\)\\] {
-      font-feature-settings: var(--my-features);
-    }
-    "
-  `)
-  expect(
-    await run([
-      'font-features',
-      '-font-features-["smcp"]',
-      'font-features-smcp',
-      'font-features-["smcp"]/foo',
+      // font-weight
+      '-font-bold',
     ]),
   ).toEqual('')
 })
 
-test('text-transform', async () => {
-  expect(await run(['uppercase', 'lowercase', 'capitalize', 'normal-case'])).toMatchInlineSnapshot(`
-    "
-    .capitalize {
+test('text-transform', () => {
+  expect(run(['uppercase', 'lowercase', 'capitalize', 'normal-case'])).toMatchInlineSnapshot(`
+    ".capitalize {
       text-transform: capitalize;
     }
 
@@ -23343,137 +8766,98 @@ test('text-transform', async () => {
 
     .uppercase {
       text-transform: uppercase;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-uppercase',
-      '-lowercase',
-      '-capitalize',
-      '-normal-case',
-      'uppercase/foo',
-      'lowercase/foo',
-      'capitalize/foo',
-      'normal-case/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-uppercase', '-lowercase', '-capitalize', '-normal-case'])).toEqual('')
 })
 
-test('font-style', async () => {
-  expect(await run(['italic', 'not-italic'])).toMatchInlineSnapshot(`
-    "
-    .italic {
+test('font-style', () => {
+  expect(run(['italic', 'not-italic'])).toMatchInlineSnapshot(`
+    ".italic {
       font-style: italic;
     }
 
     .not-italic {
       font-style: normal;
-    }
-    "
+    }"
   `)
-  expect(await run(['-italic', '-not-italic', 'italic/foo', 'not-italic/foo'])).toEqual('')
+  expect(run(['-italic', '-not-italic'])).toEqual('')
 })
 
-test('font-stretch', async () => {
-  expect(await run(['font-stretch-ultra-expanded', 'font-stretch-50%', 'font-stretch-200%']))
+test('font-stretch', () => {
+  expect(run(['font-stretch-ultra-expanded', 'font-stretch-50%', 'font-stretch-200%']))
     .toMatchInlineSnapshot(`
-      "
+      ".font-stretch-200\\% {
+        font-stretch: 200%;
+      }
+
       .font-stretch-50\\% {
         font-stretch: 50%;
       }
 
-      .font-stretch-200\\% {
-        font-stretch: 200%;
-      }
-
       .font-stretch-ultra-expanded {
         font-stretch: ultra-expanded;
-      }
-      "
+      }"
     `)
   expect(
-    await run([
+    run([
       'font-stretch',
       'font-stretch-20%',
       'font-stretch-50',
       'font-stretch-400%',
-      'font-stretch-50.5%',
       'font-stretch-potato',
-      'font-stretch-ultra-expanded/foo',
-      'font-stretch-50%/foo',
-      'font-stretch-200%/foo',
     ]),
   ).toEqual('')
 })
 
-test('text-decoration-line', async () => {
-  expect(await run(['underline', 'overline', 'line-through', 'no-underline']))
-    .toMatchInlineSnapshot(`
-      "
-      .line-through {
-        text-decoration-line: line-through;
-      }
+test('text-decoration-line', () => {
+  expect(run(['underline', 'overline', 'line-through', 'no-underline'])).toMatchInlineSnapshot(`
+    ".line-through {
+      text-decoration-line: line-through;
+    }
 
-      .no-underline {
-        text-decoration-line: none;
-      }
+    .no-underline {
+      text-decoration-line: none;
+    }
 
-      .overline {
-        text-decoration-line: overline;
-      }
+    .overline {
+      text-decoration-line: overline;
+    }
 
-      .underline {
-        text-decoration-line: underline;
-      }
-      "
-    `)
-  expect(
-    await run([
-      '-underline',
-      '-overline',
-      '-line-through',
-      '-no-underline',
-      'underline/foo',
-      'overline/foo',
-      'line-through/foo',
-      'no-underline/foo',
-    ]),
-  ).toEqual('')
+    .underline {
+      text-decoration-line: underline;
+    }"
+  `)
+  expect(run(['-underline', '-overline', '-line-through', '-no-underline'])).toEqual('')
 })
 
-test('placeholder', async () => {
+test('placeholder', () => {
   expect(
-    await run(
-      [
-        'placeholder-red-500',
-        'placeholder-red-500/50',
-        'placeholder-red-500/2.25',
-        'placeholder-red-500/2.5',
-        'placeholder-red-500/2.75',
-        'placeholder-red-500/[0.5]',
-        'placeholder-red-500/[50%]',
-        'placeholder-current',
-        'placeholder-current/50',
-        'placeholder-current/[0.5]',
-        'placeholder-current/[50%]',
-        'placeholder-inherit',
-        'placeholder-transparent',
-        'placeholder-[#0088cc]',
-        'placeholder-[#0088cc]/50',
-        'placeholder-[#0088cc]/[0.5]',
-        'placeholder-[#0088cc]/[50%]',
-      ],
+    compileCss(
       css`
         @theme {
           --color-red-500: #ef4444;
         }
         @tailwind utilities;
       `,
+      [
+        'placeholder-red-500',
+        'placeholder-red-500/50',
+        'placeholder-red-500/[0.5]',
+        'placeholder-red-500/[50%]',
+        'placeholder-current',
+        'placeholder-current/50',
+        'placeholder-current/[0.5]',
+        'placeholder-current/[50%]',
+        'placeholder-transparent',
+        'placeholder-[#0088cc]',
+        'placeholder-[#0088cc]/50',
+        'placeholder-[#0088cc]/[0.5]',
+        'placeholder-[#0088cc]/[50%]',
+      ],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
     }
 
@@ -23481,115 +8865,56 @@ test('placeholder', async () => {
       color: #08c;
     }
 
-    .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder {
-      color: oklab(59.9824% -.067 -.124 / .5);
+    .placeholder-\\[\\#0088cc\\]\\/50::placeholder {
+      color: #0088cc80;
     }
 
-    .placeholder-current::placeholder, .placeholder-current\\/50::placeholder {
+    .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder {
+      color: #0088cc80;
+    }
+
+    .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder {
+      color: #0088cc80;
+    }
+
+    .placeholder-current::placeholder {
       color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-current\\/50::placeholder {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
+    .placeholder-current\\/50::placeholder {
+      color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .placeholder-current\\/\\[0\\.5\\]::placeholder {
-      color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-current\\/\\[0\\.5\\]::placeholder {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
+      color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .placeholder-current\\/\\[50\\%\\]::placeholder {
-      color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-current\\/\\[50\\%\\]::placeholder {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .placeholder-inherit::placeholder {
-      color: inherit;
+      color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .placeholder-red-500::placeholder {
-      color: var(--color-red-500);
-    }
-
-    .placeholder-red-500\\/2\\.5::placeholder {
-      color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-red-500\\/2\\.5::placeholder {
-        color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .placeholder-red-500\\/2\\.25::placeholder {
-      color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-red-500\\/2\\.25::placeholder {
-        color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .placeholder-red-500\\/2\\.75::placeholder {
-      color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-red-500\\/2\\.75::placeholder {
-        color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
+      color: var(--color-red-500, #ef4444);
     }
 
     .placeholder-red-500\\/50::placeholder {
-      color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-red-500\\/50::placeholder {
-        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+      color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .placeholder-red-500\\/\\[0\\.5\\]::placeholder {
-      color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-red-500\\/\\[0\\.5\\]::placeholder {
-        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+      color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .placeholder-red-500\\/\\[50\\%\\]::placeholder {
-      color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .placeholder-red-500\\/\\[50\\%\\]::placeholder {
-        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+      color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .placeholder-transparent::placeholder {
       color: #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'placeholder',
       '-placeholder-red-500',
       '-placeholder-red-500/50',
@@ -23599,7 +8924,6 @@ test('placeholder', async () => {
       '-placeholder-current/50',
       '-placeholder-current/[0.5]',
       '-placeholder-current/[50%]',
-      '-placeholder-inherit',
       '-placeholder-transparent',
       '-placeholder-[#0088cc]',
       '-placeholder-[#0088cc]/50',
@@ -23609,34 +8933,38 @@ test('placeholder', async () => {
   ).toEqual('')
 })
 
-test('decoration', async () => {
+test('decoration', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         // text-decoration-color
         'decoration-red-500',
         'decoration-red-500/50',
         'decoration-red-500/[0.5]',
         'decoration-red-500/[50%]',
-        'decoration-blue-500',
         'decoration-current',
         'decoration-current/50',
         'decoration-current/[0.5]',
         'decoration-current/[50%]',
-        'decoration-inherit',
         'decoration-transparent',
         'decoration-[#0088cc]',
         'decoration-[#0088cc]/50',
         'decoration-[#0088cc]/[0.5]',
         'decoration-[#0088cc]/[50%]',
-        'decoration-[var(--my-color)]',
-        'decoration-[var(--my-color)]/50',
-        'decoration-[var(--my-color)]/[0.5]',
-        'decoration-[var(--my-color)]/[50%]',
-        'decoration-[color:var(--my-color)]',
-        'decoration-[color:var(--my-color)]/50',
-        'decoration-[color:var(--my-color)]/[0.5]',
-        'decoration-[color:var(--my-color)]/[50%]',
+        'decoration-[--my-color]',
+        'decoration-[--my-color]/50',
+        'decoration-[--my-color]/[0.5]',
+        'decoration-[--my-color]/[50%]',
+        'decoration-[color:--my-color]',
+        'decoration-[color:--my-color]/50',
+        'decoration-[color:--my-color]/[0.5]',
+        'decoration-[color:--my-color]/[50%]',
 
         // text-decoration-style
         'decoration-solid',
@@ -23655,22 +8983,13 @@ test('decoration', async () => {
         'decoration-123',
         'decoration-[12px]',
         'decoration-[50%]',
-        'decoration-[length:var(--my-thickness)]',
-        'decoration-[percentage:var(--my-thickness)]',
+        'decoration-[length:--my-thickness]',
+        'decoration-[percentage:--my-thickness]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --text-decoration-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --text-decoration-color-blue-500: #3b82f6;
     }
 
     .decoration-\\[\\#0088cc\\] {
@@ -23678,181 +8997,46 @@ test('decoration', async () => {
     }
 
     .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      text-decoration-color: oklab(59.9824% -.067 -.124 / .5);
+      text-decoration-color: #0088cc80;
     }
 
-    .decoration-\\[color\\:var\\(--my-color\\)\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-      -webkit-text-decoration-color: var(--my-color);
+    .decoration-\\[--my-color\\] {
       -webkit-text-decoration-color: var(--my-color);
       text-decoration-color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .decoration-\\[--my-color\\]\\/50, .decoration-\\[--my-color\\]\\/\\[0\\.5\\], .decoration-\\[--my-color\\]\\/\\[50\\%\\] {
+      -webkit-text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+      text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      -webkit-text-decoration-color: var(--my-color);
+    .decoration-\\[color\\:--my-color\\] {
       -webkit-text-decoration-color: var(--my-color);
       text-decoration-color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .decoration-\\[color\\:--my-color\\]\\/50, .decoration-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .decoration-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      -webkit-text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+      text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: var(--my-color);
-      -webkit-text-decoration-color: var(--my-color);
-      text-decoration-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .decoration-\\[var\\(--my-color\\)\\], .decoration-\\[var\\(--my-color\\)\\]\\/50 {
-      -webkit-text-decoration-color: var(--my-color);
-      -webkit-text-decoration-color: var(--my-color);
-      text-decoration-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-\\[var\\(--my-color\\)\\]\\/50 {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      -webkit-text-decoration-color: var(--my-color);
-      -webkit-text-decoration-color: var(--my-color);
-      text-decoration-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: var(--my-color);
-      -webkit-text-decoration-color: var(--my-color);
-      text-decoration-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .decoration-blue-500 {
-      -webkit-text-decoration-color: var(--text-decoration-color-blue-500);
-      -webkit-text-decoration-color: var(--text-decoration-color-blue-500);
-      text-decoration-color: var(--text-decoration-color-blue-500);
-    }
-
-    .decoration-current, .decoration-current\\/50 {
+    .decoration-current {
       text-decoration-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-current\\/50 {
-        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-        text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .decoration-current\\/\\[0\\.5\\] {
-      text-decoration-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-current\\/\\[0\\.5\\] {
-        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-        text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .decoration-current\\/\\[50\\%\\] {
-      text-decoration-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-current\\/\\[50\\%\\] {
-        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-        text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .decoration-inherit {
-      -webkit-text-decoration-color: inherit;
-      -webkit-text-decoration-color: inherit;
-      text-decoration-color: inherit;
+    .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] {
+      -webkit-text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+      text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .decoration-red-500 {
-      -webkit-text-decoration-color: var(--color-red-500);
-      -webkit-text-decoration-color: var(--color-red-500);
-      text-decoration-color: var(--color-red-500);
+      -webkit-text-decoration-color: var(--color-red-500, #ef4444);
+      text-decoration-color: var(--color-red-500, #ef4444);
     }
 
-    .decoration-red-500\\/50 {
-      text-decoration-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-red-500\\/50 {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .decoration-red-500\\/\\[0\\.5\\] {
-      text-decoration-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-red-500\\/\\[0\\.5\\] {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .decoration-red-500\\/\\[50\\%\\] {
-      text-decoration-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .decoration-red-500\\/\\[50\\%\\] {
-        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-        text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] {
+      -webkit-text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .decoration-transparent {
@@ -23887,6 +9071,10 @@ test('decoration', async () => {
       text-decoration-thickness: 1px;
     }
 
+    .decoration-123 {
+      text-decoration-thickness: 123px;
+    }
+
     .decoration-2 {
       text-decoration-thickness: 2px;
     }
@@ -23895,19 +9083,15 @@ test('decoration', async () => {
       text-decoration-thickness: 4px;
     }
 
-    .decoration-123 {
-      text-decoration-thickness: 123px;
-    }
-
     .decoration-\\[12px\\] {
       text-decoration-thickness: 12px;
     }
 
     .decoration-\\[50\\%\\] {
-      text-decoration-thickness: .5em;
+      text-decoration-thickness: calc(1em / 2);
     }
 
-    .decoration-\\[length\\:var\\(--my-thickness\\)\\], .decoration-\\[percentage\\:var\\(--my-thickness\\)\\] {
+    .decoration-\\[length\\:--my-thickness\\], .decoration-\\[percentage\\:--my-thickness\\] {
       text-decoration-thickness: var(--my-thickness);
     }
 
@@ -23917,11 +9101,10 @@ test('decoration', async () => {
 
     .decoration-from-font {
       text-decoration-thickness: from-font;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'decoration',
       // text-decoration-color
       '-decoration-red-500',
@@ -23946,7 +9129,6 @@ test('decoration', async () => {
       '-decoration-wavy',
 
       // text-decoration-thickness
-      'decoration--2',
       '-decoration-auto',
       '-decoration-from-font',
       '-decoration-0',
@@ -23954,41 +9136,23 @@ test('decoration', async () => {
       '-decoration-2',
       '-decoration-4',
       '-decoration-123',
-
-      'decoration-solid/foo',
-      'decoration-double/foo',
-      'decoration-dotted/foo',
-      'decoration-dashed/foo',
-      'decoration-wavy/foo',
-      'decoration-auto/foo',
-      'decoration-from-font/foo',
-      'decoration-0/foo',
-      'decoration-1/foo',
-      'decoration-2/foo',
-      'decoration-4/foo',
-      'decoration-123/foo',
-      'decoration-[12px]/foo',
-      'decoration-[50%]/foo',
-      'decoration-[length:var(--my-thickness)]/foo',
-      'decoration-[percentage:var(--my-thickness)]/foo',
     ]),
   ).toEqual('')
 })
 
-test('animate', async () => {
+test('animate', () => {
   expect(
-    await run(
-      ['animate-spin', 'animate-none', 'animate-[bounce_1s_infinite]', 'animate-not-found'],
+    compileCss(
       css`
         @theme {
           --animate-spin: spin 1s linear infinite;
         }
         @tailwind utilities;
       `,
+      ['animate-spin', 'animate-none', 'animate-[bounce_1s_infinite]', 'animate-not-found'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --animate-spin: spin 1s linear infinite;
     }
 
@@ -24001,56 +9165,36 @@ test('animate', async () => {
     }
 
     .animate-spin {
-      animation: var(--animate-spin);
-    }
-    "
+      animation: var(--animate-spin, spin 1s linear infinite);
+    }"
   `)
   expect(
-    await run([
+    run([
       'animate',
       '-animate-spin',
       '-animate-none',
       '-animate-[bounce_1s_infinite]',
       '-animate-not-found',
-      'animate-spin/foo',
-      'animate-none/foo',
-      'animate-[bounce_1s_infinite]/foo',
-      'animate-not-found/foo',
     ]),
   ).toEqual('')
+})
 
+test('filter', () => {
   expect(
-    await run(
-      ['animate-none'],
+    compileCss(
       css`
         @theme {
-          --animate-none: bounce 1s infinite;
+          --blur-xl: 24px;
+          --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
+          --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
         }
         @tailwind utilities;
       `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --animate-none: bounce 1s infinite;
-    }
-
-    .animate-none {
-      animation: var(--animate-none);
-    }
-    "
-  `)
-})
-
-test('filter', async () => {
-  expect(
-    await run(
       [
         'filter',
         'filter-none',
-        'filter-[var(--value)]',
+        'filter-[--value]',
         'blur-xl',
-        'blur-none',
         'blur-[4px]',
         'brightness-50',
         'brightness-[1.23]',
@@ -24058,77 +9202,28 @@ test('filter', async () => {
         'contrast-[1.23]',
         'grayscale',
         'grayscale-0',
-        'grayscale-[var(--value)]',
+        'grayscale-[--value]',
         'hue-rotate-15',
         'hue-rotate-[45deg]',
-        '-hue-rotate-15',
-        '-hue-rotate-[45deg]',
         'invert',
         'invert-0',
-        'invert-[var(--value)]',
-        'drop-shadow',
-        'drop-shadow/25',
-        'drop-shadow/12.5',
+        'invert-[--value]',
         'drop-shadow-xl',
-        'drop-shadow-multi',
         'drop-shadow-[0_0_red]',
-        'drop-shadow-red-500',
-        'drop-shadow-red-500/50',
-        'drop-shadow-none',
-        'drop-shadow-inherit',
-        'drop-shadow-calc',
         'saturate-0',
         'saturate-[1.75]',
-        'saturate-[var(--value)]',
+        'saturate-[--value]',
         'sepia',
         'sepia-0',
         'sepia-[50%]',
-        'sepia-[var(--value)]',
+        'sepia-[--value]',
       ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --blur-xl: 24px;
-          --color-red-500: #ef4444;
-          --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
-          --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
-          --drop-shadow-calc: 0 0 calc(1 * var(--spacing)) black;
-        }
-        @theme inline {
-          --drop-shadow-multi: 0 1px 1px rgb(0 0 0 / 0.05), 0 9px 7px rgb(0 0 0 / 0.1);
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-blur: initial;
-          --tw-brightness: initial;
-          --tw-contrast: initial;
-          --tw-grayscale: initial;
-          --tw-hue-rotate: initial;
-          --tw-invert: initial;
-          --tw-opacity: initial;
-          --tw-saturate: initial;
-          --tw-sepia: initial;
-          --tw-drop-shadow: initial;
-          --tw-drop-shadow-color: initial;
-          --tw-drop-shadow-alpha: 100%;
-          --tw-drop-shadow-size: initial;
-        }
-      }
-    }
-
-    :root, :host {
-      --spacing: .25rem;
+    ":root {
       --blur-xl: 24px;
-      --color-red-500: #ef4444;
-      --drop-shadow: 0 1px 1px #0000000d;
-      --drop-shadow-xl: 0 9px 7px #0000001a;
-      --drop-shadow-calc: 0 0 calc(1 * var(--spacing)) black;
+      --drop-shadow: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
+      --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
     }
 
     .blur-\\[4px\\] {
@@ -24136,13 +9231,8 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .blur-none {
-      --tw-blur:  ;
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
     .blur-xl {
-      --tw-blur: blur(var(--blur-xl));
+      --tw-blur: blur(var(--blur-xl, 24px));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
@@ -24156,98 +9246,16 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .contrast-50 {
-      --tw-contrast: contrast(50%);
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    .contrast-\\[1\\.23\\] {
-      --tw-contrast: contrast(1.23);
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    .drop-shadow\\/12\\.5 {
-      --tw-drop-shadow-alpha: 12.5%;
-      --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .125)));
-      --tw-drop-shadow: drop-shadow(var(--drop-shadow));
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    .drop-shadow\\/25 {
-      --tw-drop-shadow-alpha: 25%;
-      --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .25)));
-      --tw-drop-shadow: drop-shadow(var(--drop-shadow));
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    .drop-shadow {
-      --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d));
-      --tw-drop-shadow: drop-shadow(var(--drop-shadow));
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
     .drop-shadow-\\[0_0_red\\] {
-      --tw-drop-shadow-size: drop-shadow(0 0 var(--tw-drop-shadow-color, red));
-      --tw-drop-shadow: var(--tw-drop-shadow-size);
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    .drop-shadow-calc {
-      --tw-drop-shadow-size: drop-shadow(0 0 calc(1 * var(--spacing)) var(--tw-drop-shadow-color, black));
-      --tw-drop-shadow: drop-shadow(var(--drop-shadow-calc));
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    .drop-shadow-multi {
-      --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
-      --tw-drop-shadow: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 9px 7px #0000001a);
+      --tw-drop-shadow: drop-shadow(0 0 red);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
     .drop-shadow-xl {
-      --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
-      --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));
+      --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl, 0 20px 13px #00000008, 0 8px 5px #00000014));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .drop-shadow-none {
-      --tw-drop-shadow:  ;
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    .drop-shadow-inherit {
-      --tw-drop-shadow-color: inherit;
-      --tw-drop-shadow: var(--tw-drop-shadow-size);
-    }
-
-    .drop-shadow-red-500 {
-      --tw-drop-shadow-color: #ef4444;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .drop-shadow-red-500 {
-        --tw-drop-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-drop-shadow-alpha), transparent);
-      }
-    }
-
-    .drop-shadow-red-500 {
-      --tw-drop-shadow: var(--tw-drop-shadow-size);
-    }
-
-    .drop-shadow-red-500\\/50 {
-      --tw-drop-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .drop-shadow-red-500\\/50 {
-        --tw-drop-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-drop-shadow-alpha), transparent);
-      }
-    }
-
-    .drop-shadow-red-500\\/50 {
-      --tw-drop-shadow: var(--tw-drop-shadow-size);
-    }
-
     .grayscale {
       --tw-grayscale: grayscale(100%);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
@@ -24258,21 +9266,11 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .grayscale-\\[var\\(--value\\)\\] {
+    .grayscale-\\[--value\\] {
       --tw-grayscale: grayscale(var(--value));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .-hue-rotate-15 {
-      --tw-hue-rotate: hue-rotate(calc(15deg * -1));
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    .-hue-rotate-\\[45deg\\] {
-      --tw-hue-rotate: hue-rotate(calc(45deg * -1));
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
     .hue-rotate-15 {
       --tw-hue-rotate: hue-rotate(15deg);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
@@ -24293,7 +9291,7 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .invert-\\[var\\(--value\\)\\] {
+    .invert-\\[--value\\] {
       --tw-invert: invert(var(--value));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
@@ -24303,13 +9301,13 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .saturate-\\[1\\.75\\] {
-      --tw-saturate: saturate(1.75);
+    .saturate-\\[--value\\] {
+      --tw-saturate: saturate(var(--value));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .saturate-\\[var\\(--value\\)\\] {
-      --tw-saturate: saturate(var(--value));
+    .saturate-\\[1\\.75\\] {
+      --tw-saturate: saturate(1.75);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
@@ -24323,13 +9321,23 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
+    .sepia-\\[--value\\] {
+      --tw-sepia: sepia(var(--value));
+      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+    }
+
     .sepia-\\[50\\%\\] {
       --tw-sepia: sepia(50%);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .sepia-\\[var\\(--value\\)\\] {
-      --tw-sepia: sepia(var(--value));
+    .contrast-50 {
+      --tw-contrast: contrast(50%);
+      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+    }
+
+    .contrast-\\[1\\.23\\] {
+      --tw-contrast: contrast(1.23);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
@@ -24337,7 +9345,7 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .filter-\\[var\\(--value\\)\\] {
+    .filter-\\[--value\\] {
       filter: var(--value);
     }
 
@@ -24388,235 +9396,53 @@ test('filter', async () => {
     @property --tw-sepia {
       syntax: "*";
       inherits: false
-    }
-
-    @property --tw-drop-shadow {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-drop-shadow-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-drop-shadow-alpha {
-      syntax: "<percentage>";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-drop-shadow-size {
-      syntax: "*";
-      inherits: false
-    }
-    "
+    }"
   `)
   expect(
-    await run(
-      [
-        '-filter',
-        '-filter-none',
-        '-filter-[var(--value)]',
-        '-blur-xl',
-        '-blur-[4px]',
-        'brightness--50',
-        '-brightness-50',
-        '-brightness-[1.23]',
-        'brightness-unknown',
-        'contrast--50',
-        '-contrast-50',
-        '-contrast-[1.23]',
-        'contrast-unknown',
-        '-grayscale',
-        '-grayscale-0',
-        'grayscale--1',
-        '-grayscale-[var(--value)]',
-        'grayscale-unknown',
-        'hue-rotate--5',
-        'hue-rotate-unknown',
-        '-invert',
-        'invert--5',
-        '-invert-0',
-        '-invert-[var(--value)]',
-        'invert-unknown',
-        '-drop-shadow-xl',
-        '-drop-shadow-[0_0_red]',
-
-        'drop-shadow/foo',
-        '-drop-shadow/foo',
-        '-drop-shadow/25',
-        '-drop-shadow-red-500',
-        'drop-shadow-red-500/foo',
-        '-drop-shadow-red-500/foo',
-        '-drop-shadow-red-500/50',
-
-        '-saturate-0',
-        'saturate--5',
-        '-saturate-[1.75]',
-        '-saturate-[var(--value)]',
-        'saturate-saturate',
-        '-sepia',
-        'sepia--50',
-        '-sepia-0',
-        '-sepia-[50%]',
-        '-sepia-[var(--value)]',
-        'sepia-unknown',
-        'filter/foo',
-        'filter-none/foo',
-        'filter-[var(--value)]/foo',
-        'blur-xl/foo',
-        'blur-none/foo',
-        'blur-[4px]/foo',
-        'brightness-50/foo',
-        'brightness-[1.23]/foo',
-        'contrast-50/foo',
-        'contrast-[1.23]/foo',
-        'grayscale/foo',
-        'grayscale-0/foo',
-        'grayscale-[var(--value)]/foo',
-        'hue-rotate-15/foo',
-        'hue-rotate-[45deg]/foo',
-        'invert/foo',
-        'invert-0/foo',
-        'invert-[var(--value)]/foo',
-        'drop-shadow-xl/foo',
-        'drop-shadow-[0_0_red]/foo',
-        'saturate-0/foo',
-        'saturate-[1.75]/foo',
-        'saturate-[var(--value)]/foo',
-        'sepia/foo',
-        'sepia-0/foo',
-        'sepia-[50%]/foo',
-        'sepia-[var(--value)]/foo',
-      ],
-      css`
-        @theme {
-          --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
+    run([
+      '-filter',
+      '-filter-none',
+      '-filter-[--value]',
+      '-blur-xl',
+      '-blur-[4px]',
+      '-brightness-50',
+      '-brightness-[1.23]',
+      '-contrast-50',
+      '-contrast-[1.23]',
+      '-grayscale',
+      '-grayscale-0',
+      '-grayscale-[--value]',
+      '-hue-rotate-15',
+      '-hue-rotate-[45deg]',
+      '-invert',
+      '-invert-0',
+      '-invert-[--value]',
+      '-drop-shadow-xl',
+      '-drop-shadow-[0_0_red]',
+      '-saturate-0',
+      '-saturate-[1.75]',
+      '-saturate-[--value]',
+      '-sepia',
+      '-sepia-0',
+      '-sepia-[50%]',
+      '-sepia-[--value]',
+    ]),
   ).toEqual('')
-
-  expect(
-    await run(
-      ['blur-none'],
-      css`
-        @theme {
-          --blur-none: 2px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-blur: initial;
-          --tw-brightness: initial;
-          --tw-contrast: initial;
-          --tw-grayscale: initial;
-          --tw-hue-rotate: initial;
-          --tw-invert: initial;
-          --tw-opacity: initial;
-          --tw-saturate: initial;
-          --tw-sepia: initial;
-          --tw-drop-shadow: initial;
-          --tw-drop-shadow-color: initial;
-          --tw-drop-shadow-alpha: 100%;
-          --tw-drop-shadow-size: initial;
-        }
-      }
-    }
-
-    :root, :host {
-      --blur-none: 2px;
-    }
-
-    .blur-none {
-      --tw-blur: blur(var(--blur-none));
-      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
-    }
-
-    @property --tw-blur {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-brightness {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-contrast {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-grayscale {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-hue-rotate {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-invert {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-opacity {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-saturate {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-sepia {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-drop-shadow {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-drop-shadow-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-drop-shadow-alpha {
-      syntax: "<percentage>";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-drop-shadow-size {
-      syntax: "*";
-      inherits: false
-    }
-    "
-  `)
 })
 
-test('backdrop-filter', async () => {
+test('backdrop-filter', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --blur-xl: 24px;
+        }
+        @tailwind utilities;
+      `,
       [
         'backdrop-filter',
         'backdrop-filter-none',
-        'backdrop-filter-[var(--value)]',
-        'backdrop-blur-none',
+        'backdrop-filter-[--value]',
         'backdrop-blur-xl',
         'backdrop-blur-[4px]',
         'backdrop-brightness-50',
@@ -24625,54 +9451,26 @@ test('backdrop-filter', async () => {
         'backdrop-contrast-[1.23]',
         'backdrop-grayscale',
         'backdrop-grayscale-0',
-        'backdrop-grayscale-[var(--value)]',
+        'backdrop-grayscale-[--value]',
         'backdrop-hue-rotate-15',
         'backdrop-hue-rotate-[45deg]',
-        '-backdrop-hue-rotate-15',
-        '-backdrop-hue-rotate-[45deg]',
         'backdrop-invert',
         'backdrop-invert-0',
-        'backdrop-invert-[var(--value)]',
+        'backdrop-invert-[--value]',
         'backdrop-opacity-50',
         'backdrop-opacity-71',
-        'backdrop-opacity-1.25',
-        'backdrop-opacity-2.5',
-        'backdrop-opacity-3.75',
         'backdrop-opacity-[0.5]',
         'backdrop-saturate-0',
         'backdrop-saturate-[1.75]',
-        'backdrop-saturate-[var(--value)]',
+        'backdrop-saturate-[--value]',
         'backdrop-sepia',
         'backdrop-sepia-0',
         'backdrop-sepia-[50%]',
-        'backdrop-sepia-[var(--value)]',
+        'backdrop-sepia-[--value]',
       ],
-      css`
-        @theme {
-          --blur-xl: 24px;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-backdrop-blur: initial;
-          --tw-backdrop-brightness: initial;
-          --tw-backdrop-contrast: initial;
-          --tw-backdrop-grayscale: initial;
-          --tw-backdrop-hue-rotate: initial;
-          --tw-backdrop-invert: initial;
-          --tw-backdrop-opacity: initial;
-          --tw-backdrop-saturate: initial;
-          --tw-backdrop-sepia: initial;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --blur-xl: 24px;
     }
 
@@ -24682,14 +9480,8 @@ test('backdrop-filter', async () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-blur-none {
-      --tw-backdrop-blur:  ;
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
     .backdrop-blur-xl {
-      --tw-backdrop-blur: blur(var(--blur-xl));
+      --tw-backdrop-blur: blur(var(--blur-xl, 24px));
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
@@ -24706,18 +9498,6 @@ test('backdrop-filter', async () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-contrast-50 {
-      --tw-backdrop-contrast: contrast(50%);
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
-    .backdrop-contrast-\\[1\\.23\\] {
-      --tw-backdrop-contrast: contrast(1.23);
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
     .backdrop-grayscale {
       --tw-backdrop-grayscale: grayscale(100%);
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -24730,24 +9510,12 @@ test('backdrop-filter', async () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-grayscale-\\[var\\(--value\\)\\] {
+    .backdrop-grayscale-\\[--value\\] {
       --tw-backdrop-grayscale: grayscale(var(--value));
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .-backdrop-hue-rotate-15 {
-      --tw-backdrop-hue-rotate: hue-rotate(calc(15deg * -1));
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
-    .-backdrop-hue-rotate-\\[45deg\\] {
-      --tw-backdrop-hue-rotate: hue-rotate(calc(45deg * -1));
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
     .backdrop-hue-rotate-15 {
       --tw-backdrop-hue-rotate: hue-rotate(15deg);
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -24772,30 +9540,12 @@ test('backdrop-filter', async () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-invert-\\[var\\(--value\\)\\] {
+    .backdrop-invert-\\[--value\\] {
       --tw-backdrop-invert: invert(var(--value));
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-opacity-1\\.25 {
-      --tw-backdrop-opacity: opacity(1.25%);
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
-    .backdrop-opacity-2\\.5 {
-      --tw-backdrop-opacity: opacity(2.5%);
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
-    .backdrop-opacity-3\\.75 {
-      --tw-backdrop-opacity: opacity(3.75%);
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
     .backdrop-opacity-50 {
       --tw-backdrop-opacity: opacity(50%);
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -24820,14 +9570,14 @@ test('backdrop-filter', async () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-saturate-\\[1\\.75\\] {
-      --tw-backdrop-saturate: saturate(1.75);
+    .backdrop-saturate-\\[--value\\] {
+      --tw-backdrop-saturate: saturate(var(--value));
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-saturate-\\[var\\(--value\\)\\] {
-      --tw-backdrop-saturate: saturate(var(--value));
+    .backdrop-saturate-\\[1\\.75\\] {
+      --tw-backdrop-saturate: saturate(1.75);
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
@@ -24844,14 +9594,26 @@ test('backdrop-filter', async () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
+    .backdrop-sepia-\\[--value\\] {
+      --tw-backdrop-sepia: sepia(var(--value));
+      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    }
+
     .backdrop-sepia-\\[50\\%\\] {
       --tw-backdrop-sepia: sepia(50%);
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-sepia-\\[var\\(--value\\)\\] {
-      --tw-backdrop-sepia: sepia(var(--value));
+    .backdrop-contrast-50 {
+      --tw-backdrop-contrast: contrast(50%);
+      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    }
+
+    .backdrop-contrast-\\[1\\.23\\] {
+      --tw-backdrop-contrast: contrast(1.23);
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
@@ -24861,7 +9623,7 @@ test('backdrop-filter', async () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-filter-\\[var\\(--value\\)\\] {
+    .backdrop-filter-\\[--value\\] {
       -webkit-backdrop-filter: var(--value);
       backdrop-filter: var(--value);
     }
@@ -24914,171 +9676,51 @@ test('backdrop-filter', async () => {
     @property --tw-backdrop-sepia {
       syntax: "*";
       inherits: false
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       '-backdrop-filter',
       '-backdrop-filter-none',
-      '-backdrop-filter-[var(--value)]',
+      '-backdrop-filter-[--value]',
       '-backdrop-blur-xl',
       '-backdrop-blur-[4px]',
-      'backdrop-brightness--50',
       '-backdrop-brightness-50',
       '-backdrop-brightness-[1.23]',
-      'backdrop-brightness-unknown',
-      'backdrop-contrast--50',
       '-backdrop-contrast-50',
       '-backdrop-contrast-[1.23]',
-      'backdrop-contrast-unknown',
       '-backdrop-grayscale',
-      'backdrop-grayscale--1',
       '-backdrop-grayscale-0',
-      '-backdrop-grayscale-[var(--value)]',
-      'backdrop-grayscale-unknown',
-      'backdrop-hue-rotate-unknown',
+      '-backdrop-grayscale-[--value]',
+      '-backdrop-hue-rotate-15',
+      '-backdrop-hue-rotate-[45deg]',
       '-backdrop-invert',
-      'backdrop-invert--1',
       '-backdrop-invert-0',
-      '-backdrop-invert-[var(--value)]',
-      'backdrop-invert-unknown',
-      'backdrop-opacity--50',
+      '-backdrop-invert-[--value]',
       '-backdrop-opacity-50',
       '-backdrop-opacity-[0.5]',
-      'backdrop-opacity-unknown',
       '-backdrop-saturate-0',
-      'backdrop-saturate--50',
       '-backdrop-saturate-[1.75]',
-      '-backdrop-saturate-[var(--value)]',
-      'backdrop-saturate-unknown',
+      '-backdrop-saturate-[--value]',
       '-backdrop-sepia',
-      'backdrop-sepia--50',
       '-backdrop-sepia-0',
       '-backdrop-sepia-[50%]',
-      '-backdrop-sepia-[var(--value)]',
-      'backdrop-sepia-unknown',
-      'backdrop-filter/foo',
-      'backdrop-filter-none/foo',
-      'backdrop-filter-[var(--value)]/foo',
-      'backdrop-blur-none/foo',
-      'backdrop-blur-xl/foo',
-      'backdrop-blur-[4px]/foo',
-      'backdrop-brightness-50/foo',
-      'backdrop-brightness-[1.23]/foo',
-      'backdrop-contrast-50/foo',
-      'backdrop-contrast-[1.23]/foo',
-      'backdrop-grayscale/foo',
-      'backdrop-grayscale-0/foo',
-      'backdrop-grayscale-[var(--value)]/foo',
-      'backdrop-hue-rotate--15',
-      'backdrop-hue-rotate-15/foo',
-      'backdrop-hue-rotate-[45deg]/foo',
-      'backdrop-invert/foo',
-      'backdrop-invert-0/foo',
-      'backdrop-invert-[var(--value)]/foo',
-      'backdrop-opacity-50/foo',
-      'backdrop-opacity-71/foo',
-      'backdrop-opacity-[0.5]/foo',
-      'backdrop-saturate-0/foo',
-      'backdrop-saturate-[1.75]/foo',
-      'backdrop-saturate-[var(--value)]/foo',
-      'backdrop-sepia/foo',
-      'backdrop-sepia-0/foo',
-      'backdrop-sepia-[50%]/foo',
-      'backdrop-sepia-[var(--value)]/foo',
+      '-backdrop-sepia-[--value]',
     ]),
   ).toEqual('')
+})
 
+test('transition', () => {
   expect(
-    await run(
-      ['backdrop-blur-none'],
+    compileCss(
       css`
         @theme {
-          --backdrop-blur-none: 2px;
+          --transition-property: color, background-color, border-color, text-decoration-color, fill,
+            stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+          --transition-property-opacity: opacity;
         }
         @tailwind utilities;
       `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-backdrop-blur: initial;
-          --tw-backdrop-brightness: initial;
-          --tw-backdrop-contrast: initial;
-          --tw-backdrop-grayscale: initial;
-          --tw-backdrop-hue-rotate: initial;
-          --tw-backdrop-invert: initial;
-          --tw-backdrop-opacity: initial;
-          --tw-backdrop-saturate: initial;
-          --tw-backdrop-sepia: initial;
-        }
-      }
-    }
-
-    :root, :host {
-      --backdrop-blur-none: 2px;
-    }
-
-    .backdrop-blur-none {
-      --tw-backdrop-blur: blur(var(--backdrop-blur-none));
-      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    }
-
-    @property --tw-backdrop-blur {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-backdrop-brightness {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-backdrop-contrast {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-backdrop-grayscale {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-backdrop-hue-rotate {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-backdrop-invert {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-backdrop-opacity {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-backdrop-saturate {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-backdrop-sepia {
-      syntax: "*";
-      inherits: false
-    }
-    "
-  `)
-})
-
-test('transition', async () => {
-  expect(
-    await run(
       [
         'transition',
         'transition-none',
@@ -25087,182 +9729,75 @@ test('transition', async () => {
         'transition-shadow',
         'transition-colors',
         'transition-opacity',
-        'transition-[var(--value)]',
+        'transition-[--value]',
       ],
-      css`
-        @theme {
-          --default-transition-timing-function: ease;
-          --default-transition-duration: 100ms;
-          --transition-property:
-            color, background-color, border-color, text-decoration-color, fill, stroke, opacity,
-            box-shadow, transform, filter, backdrop-filter;
-          --transition-property-opacity: opacity;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --default-transition-timing-function: ease;
-      --default-transition-duration: .1s;
+    ":root {
+      --transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
       --transition-property-opacity: opacity;
     }
 
     .transition {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
     }
 
-    .transition-\\[var\\(--value\\)\\] {
+    .transition-\\[--value\\] {
       transition-property: var(--value);
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
     }
 
     .transition-all {
       transition-property: all;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
     }
 
     .transition-colors {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
     }
 
     .transition-opacity {
-      transition-property: var(--transition-property-opacity);
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-property: opacity;
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
     }
 
     .transition-shadow {
       transition-property: box-shadow;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
     }
 
     .transition-transform {
       transition-property: transform, translate, scale, rotate;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
     }
 
     .transition-none {
       transition-property: none;
-    }
-    "
+    }"
   `)
-
   expect(
-    await run(
-      ['transition', 'transition-all', 'transition-colors'],
-      css`
-        @theme inline {
-          --default-transition-timing-function: ease;
-          --default-transition-duration: 100ms;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .transition {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-      transition-timing-function: var(--tw-ease, ease);
-      transition-duration: var(--tw-duration, .1s);
-    }
-
-    .transition-all {
-      transition-property: all;
-      transition-timing-function: var(--tw-ease, ease);
-      transition-duration: var(--tw-duration, .1s);
-    }
-
-    .transition-colors {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-      transition-timing-function: var(--tw-ease, ease);
-      transition-duration: var(--tw-duration, .1s);
-    }
-    "
-  `)
-
-  expect(await run(['transition-all'])).toMatchInlineSnapshot(`
-    "
-    .transition-all {
-      transition-property: all;
-      transition-timing-function: var(--tw-ease, ease);
-      transition-duration: var(--tw-duration, 0s);
-    }
-    "
-  `)
-
-  expect(
-    await run([
+    run([
       '-transition',
       '-transition-none',
       '-transition-all',
       '-transition-opacity',
-      '-transition-[var(--value)]',
-      'transition/foo',
-      'transition-none/foo',
-      'transition-all/foo',
-      'transition-transform/foo',
-      'transition-shadow/foo',
-      'transition-colors/foo',
-      'transition-opacity/foo',
-      'transition-[var(--value)]/foo',
+      '-transition-[--value]',
     ]),
   ).toEqual('')
-
-  expect(
-    await run(
-      ['transition-colors'],
-      css`
-        @theme {
-          --transition-property-colors: transform;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --transition-property-colors: transform;
-    }
-
-    .transition-colors {
-      transition-property: var(--transition-property-colors);
-      transition-timing-function: var(--tw-ease, ease);
-      transition-duration: var(--tw-duration, 0s);
-    }
-    "
-  `)
 })
 
-test('transition-behavior', async () => {
-  expect(await run(['transition-discrete', 'transition-normal'])).toMatchInlineSnapshot(`
-    "
-    .transition-discrete {
-      transition-behavior: allow-discrete;
-    }
-
-    .transition-normal {
-      transition-behavior: normal;
-    }
-    "
-  `)
-
-  expect(await run(['-transition-discrete', '-transition-normal'])).toEqual('')
-})
-
-test('delay', async () => {
-  expect(await run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(`
-    "
-    .delay-123 {
+test('delay', () => {
+  expect(run(['delay-123', 'delay-200', 'delay-[300ms]'])).toMatchInlineSnapshot(`
+    ".delay-123 {
       transition-delay: .123s;
     }
 
@@ -25272,176 +9807,72 @@ test('delay', async () => {
 
     .delay-\\[300ms\\] {
       transition-delay: .3s;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'delay',
-      'delay--200',
-      '-delay-200',
-      '-delay-[300ms]',
-      'delay-unknown',
-      'delay-123/foo',
-      'delay-200/foo',
-      'delay-[300ms]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['delay', '-delay-200', '-delay-[300ms]'])).toEqual('')
 })
 
-test('duration', async () => {
-  expect(await run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-duration: initial;
-        }
-      }
-    }
-
-    .duration-123 {
-      --tw-duration: .123s;
+test('duration', () => {
+  expect(run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(`
+    ".duration-123 {
       transition-duration: .123s;
     }
 
     .duration-200 {
-      --tw-duration: .2s;
       transition-duration: .2s;
     }
 
     .duration-\\[300ms\\] {
-      --tw-duration: .3s;
       transition-duration: .3s;
-    }
-
-    @property --tw-duration {
-      syntax: "*";
-      inherits: false
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'duration',
-      'duration--200',
-      '-duration-200',
-      '-duration-[300ms]',
-      'duration-123/foo',
-      'duration-200/foo',
-      'duration-[300ms]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['duration', '-duration-200', '-duration-[300ms]'])).toEqual('')
 })
 
-test('ease', async () => {
+test('ease', () => {
   expect(
-    await run(
-      ['ease-in', 'ease-out', 'ease-[var(--value)]'],
+    compileCss(
       css`
         @theme {
-          --ease-in: cubic-bezier(0.4, 0, 1, 1);
-          --ease-out: cubic-bezier(0, 0, 0.2, 1);
+          --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
+          --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
         }
         @tailwind utilities;
       `,
+      ['ease-in', 'ease-out', 'ease-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-ease: initial;
-        }
-      }
+    ":root {
+      --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
+      --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
     }
 
-    :root, :host {
-      --ease-in: cubic-bezier(.4, 0, 1, 1);
-      --ease-out: cubic-bezier(0, 0, .2, 1);
-    }
-
-    .ease-\\[var\\(--value\\)\\] {
-      --tw-ease: var(--value);
+    .ease-\\[--value\\] {
       transition-timing-function: var(--value);
     }
 
     .ease-in {
-      --tw-ease: var(--ease-in);
-      transition-timing-function: var(--ease-in);
+      transition-timing-function: var(--transition-timing-function-in, cubic-bezier(.4, 0, 1, 1));
     }
 
     .ease-out {
-      --tw-ease: var(--ease-out);
-      transition-timing-function: var(--ease-out);
-    }
-
-    @property --tw-ease {
-      syntax: "*";
-      inherits: false
-    }
-    "
-  `)
-  expect(
-    await run([
-      '-ease-in',
-      '-ease-out',
-      '-ease-[var(--value)]',
-      'ease-in/foo',
-      'ease-out/foo',
-      'ease-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['ease-linear'],
-      css`
-        @theme {
-          --ease-linear: steps(4);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-ease: initial;
-        }
-      }
-    }
-
-    :root, :host {
-      --ease-linear: steps(4);
-    }
-
-    .ease-linear {
-      --tw-ease: var(--ease-linear);
-      transition-timing-function: var(--ease-linear);
-    }
-
-    @property --tw-ease {
-      syntax: "*";
-      inherits: false
-    }
-    "
+      transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, .2, 1));
+    }"
   `)
+  expect(run(['-ease-in', '-ease-out', '-ease-[--value]'])).toEqual('')
 })
 
-test('will-change', async () => {
+test('will-change', () => {
   expect(
-    await run([
+    run([
       'will-change-auto',
       'will-change-contents',
       'will-change-transform',
       'will-change-scroll',
-      'will-change-[var(--value)]',
+      'will-change-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .will-change-\\[var\\(--value\\)\\] {
+    ".will-change-\\[--value\\] {
       will-change: var(--value);
     }
 
@@ -25459,29 +9890,23 @@ test('will-change', async () => {
 
     .will-change-transform {
       will-change: transform;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'will-change',
       '-will-change-auto',
       '-will-change-contents',
       '-will-change-transform',
       '-will-change-scroll',
-      '-will-change-[var(--value)]',
-      'will-change-auto/foo',
-      'will-change-contents/foo',
-      'will-change-transform/foo',
-      'will-change-scroll/foo',
-      'will-change-[var(--value)]/foo',
+      '-will-change-[--value]',
     ]),
   ).toEqual('')
 })
 
-test('contain', async () => {
+test('contain', () => {
   expect(
-    await run([
+    run([
       'contain-none',
       'contain-content',
       'contain-strict',
@@ -25493,44 +9918,7 @@ test('contain', async () => {
       'contain-[unset]',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-contain-size: initial;
-          --tw-contain-layout: initial;
-          --tw-contain-paint: initial;
-          --tw-contain-style: initial;
-        }
-      }
-    }
-
-    .contain-inline-size {
-      --tw-contain-size: inline-size;
-      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
-    }
-
-    .contain-layout {
-      --tw-contain-layout: layout;
-      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
-    }
-
-    .contain-paint {
-      --tw-contain-paint: paint;
-      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
-    }
-
-    .contain-size {
-      --tw-contain-size: size;
-      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
-    }
-
-    .contain-style {
-      --tw-contain-style: style;
-      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
-    }
-
-    .contain-\\[unset\\] {
+    ".contain-\\[unset\\] {
       contain: unset;
     }
 
@@ -25538,14 +9926,39 @@ test('contain', async () => {
       contain: content;
     }
 
+    .contain-inline-size {
+      --tw-contain-size: inline-size;
+      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+    }
+
+    .contain-layout {
+      --tw-contain-layout: layout;
+      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+    }
+
     .contain-none {
       contain: none;
     }
 
+    .contain-paint {
+      --tw-contain-paint: paint;
+      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+    }
+
+    .contain-size {
+      --tw-contain-size: size;
+      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+    }
+
     .contain-strict {
       contain: strict;
     }
 
+    .contain-style {
+      --tw-contain-style: style;
+      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+    }
+
     @property --tw-contain-size {
       syntax: "*";
       inherits: false
@@ -25564,262 +9977,120 @@ test('contain', async () => {
     @property --tw-contain-style {
       syntax: "*";
       inherits: false
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'contain-none/foo',
-      'contain-content/foo',
-      'contain-strict/foo',
-      'contain-size/foo',
-      'contain-inline-size/foo',
-      'contain-layout/foo',
-      'contain-paint/foo',
-      'contain-style/foo',
-      'contain-[unset]/foo',
-    ]),
-  ).toEqual('')
 })
 
-test('content', async () => {
-  expect(
-    await run(
-      ['content-slash', 'content-["hello_world"]'],
-      css`
-        @theme {
-          --content-slash: '/';
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
-    }
-
-    :root, :host {
-      --content-slash: "/";
-    }
-
-    .content-\\[\\"hello_world\\"\\] {
+test('content', () => {
+  expect(run(['content-["hello_world"]'])).toMatchInlineSnapshot(`
+    ".content-\\[\\"hello_world\\"\\] {
       --tw-content: "hello world";
       content: var(--tw-content);
     }
 
-    .content-slash {
-      --tw-content: var(--content-slash);
-      content: var(--tw-content);
-    }
-
     @property --tw-content {
       syntax: "*";
       inherits: false;
       initial-value: "";
-    }
-    "
+    }"
   `)
-  expect(await run(['content', '-content-["hello_world"]', 'content-["hello_world"]/foo'])).toEqual(
-    '',
-  )
+  expect(run(['content', '-content-["hello_world"]'])).toEqual('')
 })
 
-test('forced-color-adjust', async () => {
-  expect(await run(['forced-color-adjust-none', 'forced-color-adjust-auto']))
-    .toMatchInlineSnapshot(`
-      "
-      .forced-color-adjust-auto {
-        forced-color-adjust: auto;
-      }
+test('forced-color-adjust', () => {
+  expect(run(['forced-color-adjust-none', 'forced-color-adjust-auto'])).toMatchInlineSnapshot(`
+    ".forced-color-adjust-auto {
+      forced-color-adjust: auto;
+    }
 
-      .forced-color-adjust-none {
-        forced-color-adjust: none;
-      }
-      "
-    `)
+    .forced-color-adjust-none {
+      forced-color-adjust: none;
+    }"
+  `)
   expect(
-    await run([
+    run([
       'forced',
       'forced-color',
       'forced-color-adjust',
       '-forced-color-adjust-none',
       '-forced-color-adjust-auto',
-      'forced-color-adjust-none/foo',
-      'forced-color-adjust-auto/foo',
     ]),
   ).toEqual('')
 })
 
-test('leading', async () => {
+test('leading', () => {
   expect(
-    await run(
-      ['leading-tight', 'leading-6', 'leading-[var(--value)]'],
+    compileCss(
       css`
         @theme {
-          --leading-tight: 1.25;
-          --leading-6: 1.5rem;
+          --line-height-none: 1;
+          --line-height-6: 1.5rem;
         }
         @tailwind utilities;
       `,
+      ['leading-none', 'leading-6', 'leading-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-leading: initial;
-        }
-      }
-    }
-
-    :root, :host {
-      --leading-tight: 1.25;
-      --leading-6: 1.5rem;
+    ":root {
+      --line-height-none: 1;
+      --line-height-6: 1.5rem;
     }
 
     .leading-6 {
-      --tw-leading: var(--leading-6);
-      line-height: var(--leading-6);
+      line-height: var(--line-height-6, 1.5rem);
     }
 
-    .leading-\\[var\\(--value\\)\\] {
-      --tw-leading: var(--value);
+    .leading-\\[--value\\] {
       line-height: var(--value);
     }
 
-    .leading-tight {
-      --tw-leading: var(--leading-tight);
-      line-height: var(--leading-tight);
-    }
-
-    @property --tw-leading {
-      syntax: "*";
-      inherits: false
-    }
-    "
-  `)
-  expect(
-    await run([
-      'leading',
-      '-leading-tight',
-      '-leading-6',
-      '-leading-[var(--value)]',
-      'leading-tight/foo',
-      'leading-6/foo',
-      'leading-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
-
-  expect(
-    await run(
-      ['leading-none'],
-      css`
-        @theme {
-          --leading-none: 2;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-leading: initial;
-        }
-      }
-    }
-
-    :root, :host {
-      --leading-none: 2;
-    }
-
     .leading-none {
-      --tw-leading: var(--leading-none);
-      line-height: var(--leading-none);
-    }
-
-    @property --tw-leading {
-      syntax: "*";
-      inherits: false
-    }
-    "
+      line-height: var(--line-height-none, 1);
+    }"
   `)
+  expect(run(['leading', '-leading-none', '-leading-6', '-leading-[--value]'])).toEqual('')
 })
 
-test('tracking', async () => {
+test('tracking', () => {
   expect(
-    await run(
-      ['tracking-normal', 'tracking-wide', 'tracking-[var(--value)]', '-tracking-[var(--value)]'],
+    compileCss(
       css`
         @theme {
-          --tracking-normal: 0em;
-          --tracking-wide: 0.025em;
+          --letter-spacing-normal: 0em;
+          --letter-spacing-wide: 0.025em;
         }
         @tailwind utilities;
       `,
+      ['tracking-normal', 'tracking-wide', 'tracking-[--value]', '-tracking-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-tracking: initial;
-        }
-      }
+    ":root {
+      --letter-spacing-normal: 0em;
+      --letter-spacing-wide: .025em;
     }
 
-    :root, :host {
-      --tracking-normal: 0em;
-      --tracking-wide: .025em;
-    }
-
-    .-tracking-\\[var\\(--value\\)\\] {
-      --tw-tracking: calc(var(--value) * -1);
+    .-tracking-\\[--value\\] {
       letter-spacing: calc(var(--value) * -1);
     }
 
-    .tracking-\\[var\\(--value\\)\\] {
-      --tw-tracking: var(--value);
+    .tracking-\\[--value\\] {
       letter-spacing: var(--value);
     }
 
     .tracking-normal {
-      --tw-tracking: var(--tracking-normal);
-      letter-spacing: var(--tracking-normal);
+      letter-spacing: var(--letter-spacing-normal, 0em);
     }
 
     .tracking-wide {
-      --tw-tracking: var(--tracking-wide);
-      letter-spacing: var(--tracking-wide);
-    }
-
-    @property --tw-tracking {
-      syntax: "*";
-      inherits: false
-    }
-    "
+      letter-spacing: var(--letter-spacing-wide, .025em);
+    }"
   `)
-  expect(
-    await run([
-      'tracking',
-      'tracking-normal/foo',
-      'tracking-wide/foo',
-      'tracking-[var(--value)]/foo',
-      '-tracking-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['tracking'])).toEqual('')
 })
 
-test('font-smoothing', async () => {
-  expect(await run(['antialiased', 'subpixel-antialiased'])).toMatchInlineSnapshot(`
-    "
-    .antialiased {
+test('font-smoothing', () => {
+  expect(run(['antialiased', 'subpixel-antialiased'])).toMatchInlineSnapshot(`
+    ".antialiased {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -25827,22 +10098,14 @@ test('font-smoothing', async () => {
     .subpixel-antialiased {
       -webkit-font-smoothing: auto;
       -moz-osx-font-smoothing: auto;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      '-antialiased',
-      '-subpixel-antialiased',
-      'antialiased/foo',
-      'subpixel-antialiased/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['-antialiased', '-subpixel-antialiased'])).toEqual('')
 })
 
-test('font-variant-numeric', async () => {
+test('font-variant-numeric', () => {
   expect(
-    await run([
+    run([
       'normal-nums',
       'ordinal',
       'slashed-zero',
@@ -25854,20 +10117,7 @@ test('font-variant-numeric', async () => {
       'stacked-fractions',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-ordinal: initial;
-          --tw-slashed-zero: initial;
-          --tw-numeric-figure: initial;
-          --tw-numeric-spacing: initial;
-          --tw-numeric-fraction: initial;
-        }
-      }
-    }
-
-    .diagonal-fractions {
+    ".diagonal-fractions {
       --tw-numeric-fraction: diagonal-fractions;
       font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
     }
@@ -25877,6 +10127,10 @@ test('font-variant-numeric', async () => {
       font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
     }
 
+    .normal-nums {
+      font-variant-numeric: normal;
+    }
+
     .oldstyle-nums {
       --tw-numeric-figure: oldstyle-nums;
       font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
@@ -25907,10 +10161,6 @@ test('font-variant-numeric', async () => {
       font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
     }
 
-    .normal-nums {
-      font-variant-numeric: normal;
-    }
-
     @property --tw-ordinal {
       syntax: "*";
       inherits: false
@@ -25934,11 +10184,10 @@ test('font-variant-numeric', async () => {
     @property --tw-numeric-fraction {
       syntax: "*";
       inherits: false
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       '-normal-nums',
       '-ordinal',
       '-slashed-zero',
@@ -25948,25 +10197,21 @@ test('font-variant-numeric', async () => {
       '-tabular-nums',
       '-diagonal-fractions',
       '-stacked-fractions',
-      'normal-nums/foo',
-      'ordinal/foo',
-      'slashed-zero/foo',
-      'lining-nums/foo',
-      'oldstyle-nums/foo',
-      'proportional-nums/foo',
-      'tabular-nums/foo',
-      'diagonal-fractions/foo',
-      'stacked-fractions/foo',
     ]),
   ).toEqual('')
 })
 
-test('outline', async () => {
+test('outline', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         'outline',
-        'outline-hidden',
 
         // outline-style
         'outline-none',
@@ -25980,12 +10225,10 @@ test('outline', async () => {
         'outline-red-500/50',
         'outline-red-500/[0.5]',
         'outline-red-500/[50%]',
-        'outline-blue-500',
         'outline-current',
         'outline-current/50',
         'outline-current/[0.5]',
         'outline-current/[50%]',
-        'outline-inherit',
         'outline-transparent',
         'outline-[#0088cc]',
         'outline-[#0088cc]/50',
@@ -25995,57 +10238,33 @@ test('outline', async () => {
         'outline-[black]/50',
         'outline-[black]/[0.5]',
         'outline-[black]/[50%]',
-        'outline-[var(--value)]',
-        'outline-[var(--value)]/50',
-        'outline-[var(--value)]/[0.5]',
-        'outline-[var(--value)]/[50%]',
-        'outline-[color:var(--value)]',
-        'outline-[color:var(--value)]/50',
-        'outline-[color:var(--value)]/[0.5]',
-        'outline-[color:var(--value)]/[50%]',
+        'outline-[--value]',
+        'outline-[--value]/50',
+        'outline-[--value]/[0.5]',
+        'outline-[--value]/[50%]',
+        'outline-[color:--value]',
+        'outline-[color:--value]/50',
+        'outline-[color:--value]/[0.5]',
+        'outline-[color:--value]/[50%]',
 
         // outline-width
         'outline-0',
         'outline-[1.5]',
         'outline-[12px]',
         'outline-[50%]',
-        'outline-[number:var(--my-width)]',
-        'outline-[length:var(--my-width)]',
-        'outline-[percentage:var(--my-width)]',
+        'outline-[number:--my-width]',
+        'outline-[length:--my-width]',
+        'outline-[percentage:--my-width]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --outline-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-outline-style: solid;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --outline-color-blue-500: #3b82f6;
     }
 
-    .outline-hidden {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-
-    @media (forced-colors: active) {
-      .outline-hidden {
-        outline-offset: 2px;
-        outline: 2px solid #0000;
-      }
+    .outline-none {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
     }
 
     .outline {
@@ -26073,7 +10292,7 @@ test('outline', async () => {
       outline-width: 50%;
     }
 
-    .outline-\\[length\\:var\\(--my-width\\)\\], .outline-\\[number\\:var\\(--my-width\\)\\], .outline-\\[percentage\\:var\\(--my-width\\)\\] {
+    .outline-\\[length\\:--my-width\\], .outline-\\[number\\:--my-width\\], .outline-\\[percentage\\:--my-width\\] {
       outline-style: var(--tw-outline-style);
       outline-width: var(--my-width);
     }
@@ -26083,155 +10302,47 @@ test('outline', async () => {
     }
 
     .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      outline-color: oklab(59.9824% -.067 -.124 / .5);
+      outline-color: #0088cc80;
+    }
+
+    .outline-\\[--value\\] {
+      outline-color: var(--value);
+    }
+
+    .outline-\\[--value\\]\\/50, .outline-\\[--value\\]\\/\\[0\\.5\\], .outline-\\[--value\\]\\/\\[50\\%\\] {
+      outline-color: color-mix(in srgb, var(--value) 50%, transparent);
     }
 
     .outline-\\[black\\] {
       outline-color: #000;
     }
 
-    .outline-\\[black\\]\\/50 {
-      outline-color: oklab(0% none none / .5);
+    .outline-\\[black\\]\\/50, .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\] {
+      outline-color: #00000080;
     }
 
-    .outline-\\[black\\]\\/\\[0\\.5\\] {
-      outline-color: oklab(0% none none / .5);
-    }
-
-    .outline-\\[black\\]\\/\\[50\\%\\] {
-      outline-color: oklab(0% none none / .5);
-    }
-
-    .outline-\\[color\\:var\\(--value\\)\\], .outline-\\[color\\:var\\(--value\\)\\]\\/50 {
+    .outline-\\[color\\:--value\\] {
       outline-color: var(--value);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-\\[color\\:var\\(--value\\)\\]\\/50 {
-        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
-      }
+    .outline-\\[color\\:--value\\]\\/50, .outline-\\[color\\:--value\\]\\/\\[0\\.5\\], .outline-\\[color\\:--value\\]\\/\\[50\\%\\] {
+      outline-color: color-mix(in srgb, var(--value) 50%, transparent);
     }
 
-    .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
-      outline-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
-        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
-      }
-    }
-
-    .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      outline-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
-      }
-    }
-
-    .outline-\\[var\\(--value\\)\\], .outline-\\[var\\(--value\\)\\]\\/50 {
-      outline-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-\\[var\\(--value\\)\\]\\/50 {
-        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
-      }
-    }
-
-    .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] {
-      outline-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] {
-        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
-      }
-    }
-
-    .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
-      outline-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
-        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
-      }
-    }
-
-    .outline-blue-500 {
-      outline-color: var(--outline-color-blue-500);
-    }
-
-    .outline-current, .outline-current\\/50 {
+    .outline-current {
       outline-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-current\\/50 {
-        outline-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .outline-current\\/\\[0\\.5\\] {
-      outline-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-current\\/\\[0\\.5\\] {
-        outline-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .outline-current\\/\\[50\\%\\] {
-      outline-color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-current\\/\\[50\\%\\] {
-        outline-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .outline-inherit {
-      outline-color: inherit;
+    .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] {
+      outline-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .outline-red-500 {
-      outline-color: var(--color-red-500);
+      outline-color: var(--color-red-500, #ef4444);
     }
 
-    .outline-red-500\\/50 {
-      outline-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-red-500\\/50 {
-        outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .outline-red-500\\/\\[0\\.5\\] {
-      outline-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-red-500\\/\\[0\\.5\\] {
-        outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .outline-red-500\\/\\[50\\%\\] {
-      outline-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .outline-red-500\\/\\[50\\%\\] {
-        outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] {
+      outline-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .outline-transparent {
@@ -26253,57 +10364,19 @@ test('outline', async () => {
       outline-style: double;
     }
 
-    .outline-none {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-
     .outline-solid {
       --tw-outline-style: solid;
       outline-style: solid;
     }
 
     @property --tw-outline-style {
-      syntax: "*";
+      syntax: "<custom-ident>";
       inherits: false;
       initial-value: solid;
-    }
-    "
+    }"
   `)
   expect(
-    await run(
-      ['outline'],
-      css`
-        @theme {
-          --default-outline-width: 2px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-outline-style: solid;
-        }
-      }
-    }
-
-    .outline {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-
-    @property --tw-outline-style {
-      syntax: "*";
-      inherits: false;
-      initial-value: solid;
-    }
-    "
-  `)
-  expect(
-    await run([
+    run([
       '-outline',
 
       // outline-style
@@ -26321,7 +10394,6 @@ test('outline', async () => {
       '-outline-current/50',
       '-outline-current/[0.5]',
       '-outline-current/[50%]',
-      '-outline-inherit',
       '-outline-transparent',
       '-outline-[#0088cc]',
       '-outline-[#0088cc]/50',
@@ -26331,33 +10403,24 @@ test('outline', async () => {
 
       // outline-width
       '-outline-0',
-      'outline--10',
-
-      'outline/foo',
-      'outline-none/foo',
-      'outline-solid/foo',
-      'outline-dashed/foo',
-      'outline-dotted/foo',
-      'outline-double/foo',
     ]),
   ).toEqual('')
 })
 
-test('outline-offset', async () => {
+test('outline-offset', () => {
   expect(
-    await run([
+    run([
       'outline-offset-4',
       '-outline-offset-4',
-      'outline-offset-[var(--value)]',
-      '-outline-offset-[var(--value)]',
+      'outline-offset-[--value]',
+      '-outline-offset-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .-outline-offset-4 {
+    ".-outline-offset-4 {
       outline-offset: calc(4px * -1);
     }
 
-    .-outline-offset-\\[var\\(--value\\)\\] {
+    .-outline-offset-\\[--value\\] {
       outline-offset: calc(var(--value) * -1);
     }
 
@@ -26365,202 +10428,119 @@ test('outline-offset', async () => {
       outline-offset: 4px;
     }
 
-    .outline-offset-\\[var\\(--value\\)\\] {
+    .outline-offset-\\[--value\\] {
       outline-offset: var(--value);
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'outline-offset',
-      'outline-offset--4',
-      'outline-offset-unknown',
-      'outline-offset-4/foo',
-      '-outline-offset-4/foo',
-      'outline-offset-[var(--value)]/foo',
-      '-outline-offset-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['outline-offset'])).toEqual('')
 })
 
-test('opacity', async () => {
-  expect(
-    await run([
-      'opacity-15',
-      'opacity-2.5',
-      'opacity-3.25',
-      'opacity-4.75',
-      'opacity-[var(--value)]',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .opacity-2\\.5 {
-      opacity: .025;
-    }
-
-    .opacity-3\\.25 {
-      opacity: .0325;
-    }
-
-    .opacity-4\\.75 {
-      opacity: .0475;
-    }
-
-    .opacity-15 {
+test('opacity', () => {
+  expect(run(['opacity-15', 'opacity-[--value]'])).toMatchInlineSnapshot(`
+    ".opacity-15 {
       opacity: .15;
     }
 
-    .opacity-\\[var\\(--value\\)\\] {
+    .opacity-\\[--value\\] {
       opacity: var(--value);
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'opacity',
-      'opacity--15',
-      'opacity-1.125',
-      '-opacity-15',
-      '-opacity-[var(--value)]',
-      'opacity-unknown',
-      'opacity-15/foo',
-      'opacity-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['opacity', '-opacity-15', '-opacity-[--value]'])).toEqual('')
 })
 
-test('underline-offset', async () => {
+test('underline-offset', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+        }
+        @tailwind utilities;
+      `,
       [
         'underline-offset-auto',
         'underline-offset-4',
         '-underline-offset-4',
         'underline-offset-123',
         '-underline-offset-123',
-        'underline-offset-[var(--value)]',
-        '-underline-offset-[var(--value)]',
+        'underline-offset-[--value]',
+        '-underline-offset-[--value]',
       ],
-      css`
-        @theme {
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
+    ".-underline-offset-123 {
+      text-underline-offset: calc(123px * -1);
+    }
+
     .-underline-offset-4 {
       text-underline-offset: calc(4px * -1);
     }
 
-    .-underline-offset-123 {
-      text-underline-offset: calc(123px * -1);
-    }
-
-    .-underline-offset-\\[var\\(--value\\)\\] {
+    .-underline-offset-\\[--value\\] {
       text-underline-offset: calc(var(--value) * -1);
     }
 
-    .underline-offset-4 {
-      text-underline-offset: 4px;
-    }
-
     .underline-offset-123 {
       text-underline-offset: 123px;
     }
 
-    .underline-offset-\\[var\\(--value\\)\\] {
+    .underline-offset-4 {
+      text-underline-offset: 4px;
+    }
+
+    .underline-offset-\\[--value\\] {
       text-underline-offset: var(--value);
     }
 
     .underline-offset-auto {
       text-underline-offset: auto;
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'underline-offset',
-      'underline-offset--4',
-      '-underline-offset-auto',
-      'underline-offset-unknown',
-      'underline-offset-auto/foo',
-      'underline-offset-4/foo',
-      '-underline-offset-4/foo',
-      'underline-offset-123/foo',
-      '-underline-offset-123/foo',
-      'underline-offset-[var(--value)]/foo',
-      '-underline-offset-[var(--value)]/foo',
-    ]),
-  ).toEqual('')
+  expect(run(['underline-offset', '-underline-offset-auto'])).toEqual('')
+})
 
+test('text', () => {
   expect(
-    await run(
-      ['underline-offset-auto'],
+    compileCss(
       css`
         @theme {
-          --text-underline-offset-auto: 4px;
+          --color-red-500: #ef4444;
+          --line-height-6: 1.5rem;
+          --font-size-sm: 0.875rem;
+          --font-size-sm--line-height: 1.25rem;
+          --line-height-9: 2.25rem;
         }
         @tailwind utilities;
       `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --text-underline-offset-auto: 4px;
-    }
-
-    .underline-offset-auto {
-      text-underline-offset: var(--text-underline-offset-auto);
-    }
-    "
-  `)
-})
-
-test('text', async () => {
-  expect(
-    await run(
       [
         // color
         'text-red-500',
         'text-red-500/50',
-        'text-red-500/2.25',
-        'text-red-500/2.5',
-        'text-red-500/2.75',
         'text-red-500/[0.5]',
         'text-red-500/[50%]',
-        'text-blue-500',
         'text-current',
         'text-current/50',
         'text-current/[0.5]',
         'text-current/[50%]',
-        'text-inherit',
         'text-transparent',
         'text-[#0088cc]',
         'text-[#0088cc]/50',
         'text-[#0088cc]/[0.5]',
         'text-[#0088cc]/[50%]',
 
-        'text-[var(--my-color)]',
-        'text-[var(--my-color)]/50',
-        'text-[var(--my-color)]/[0.5]',
-        'text-[var(--my-color)]/[50%]',
-        'text-[color:var(--my-color)]',
-        'text-[color:var(--my-color)]/50',
-        'text-[color:var(--my-color)]/[0.5]',
-        'text-[color:var(--my-color)]/[50%]',
-        'text-[--alpha(red/20%)]',
+        'text-[--my-color]',
+        'text-[--my-color]/50',
+        'text-[--my-color]/[0.5]',
+        'text-[--my-color]/[50%]',
+        'text-[color:--my-color]',
+        'text-[color:--my-color]/50',
+        'text-[color:--my-color]/[0.5]',
+        'text-[color:--my-color]/[50%]',
 
         // font-size / line-height / letter-spacing / font-weight
         'text-sm',
-        'text-sm/0',
         'text-sm/6',
-        'text-sm/none',
-        'text-[10px]/none',
-        'text-sm/snug',
         'text-sm/[4px]',
         'text-[12px]',
-        'text-[12px]/0',
         'text-[12px]/6',
         'text-[50%]',
         'text-[50%]/6',
@@ -26568,107 +10548,64 @@ test('text', async () => {
         'text-[xx-large]/6',
         'text-[larger]',
         'text-[larger]/6',
-        'text-[length:var(--my-size)]',
-        'text-[percentage:var(--my-size)]',
-        'text-[absolute-size:var(--my-size)]',
-        'text-[relative-size:var(--my-size)]',
+        'text-[length:--my-size]',
+        'text-[percentage:--my-size]',
+        'text-[absolute-size:--my-size]',
+        'text-[relative-size:--my-size]',
         'text-[clamp(1rem,2rem,3rem)]',
         'text-[clamp(1rem,var(--size),3rem)]',
         'text-[clamp(1rem,var(--size),3rem)]/9',
-        'text-[--spacing(2)]',
       ],
-      css`
-        @theme {
-          --spacing: 0.25rem;
-          --color-red-500: #ef4444;
-          --text-color-blue-500: #3b82f6;
-          --text-sm: 0.875rem;
-          --text-sm--line-height: 1.25rem;
-          --leading-snug: 1.375;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
-      --spacing: .25rem;
+    ":root {
       --color-red-500: #ef4444;
-      --text-color-blue-500: #3b82f6;
-      --text-sm: .875rem;
-      --text-sm--line-height: 1.25rem;
-      --leading-snug: 1.375;
+      --line-height-6: 1.5rem;
+      --font-size-sm: .875rem;
+      --font-size-sm--line-height: 1.25rem;
+      --line-height-9: 2.25rem;
     }
 
-    .text-\\[10px\\]\\/none {
-      font-size: 10px;
-      line-height: 1;
-    }
-
-    .text-\\[12px\\]\\/0 {
-      font-size: 12px;
-      line-height: 0;
+    .text-sm {
+      font-size: var(--font-size-sm, .875rem);
+      line-height: var(--font-size-sm--line-height, 1.25rem);
     }
 
     .text-\\[12px\\]\\/6 {
       font-size: 12px;
-      line-height: calc(var(--spacing) * 6);
+      line-height: var(--line-height-6, 1.5rem);
     }
 
     .text-\\[50\\%\\]\\/6 {
       font-size: 50%;
-      line-height: calc(var(--spacing) * 6);
+      line-height: var(--line-height-6, 1.5rem);
     }
 
     .text-\\[clamp\\(1rem\\,var\\(--size\\)\\,3rem\\)\\]\\/9 {
       font-size: clamp(1rem, var(--size), 3rem);
-      line-height: calc(var(--spacing) * 9);
+      line-height: var(--line-height-9, 2.25rem);
     }
 
     .text-\\[larger\\]\\/6 {
       font-size: larger;
-      line-height: calc(var(--spacing) * 6);
+      line-height: var(--line-height-6, 1.5rem);
     }
 
     .text-\\[xx-large\\]\\/6 {
       font-size: xx-large;
-      line-height: calc(var(--spacing) * 6);
-    }
-
-    .text-sm {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-
-    .text-sm\\/0 {
-      font-size: var(--text-sm);
-      line-height: 0;
+      line-height: var(--line-height-6, 1.5rem);
     }
 
     .text-sm\\/6 {
-      font-size: var(--text-sm);
-      line-height: calc(var(--spacing) * 6);
+      font-size: var(--font-size-sm, .875rem);
+      line-height: var(--line-height-6, 1.5rem);
     }
 
     .text-sm\\/\\[4px\\] {
-      font-size: var(--text-sm);
+      font-size: var(--font-size-sm, .875rem);
       line-height: 4px;
     }
 
-    .text-sm\\/none {
-      font-size: var(--text-sm);
-      line-height: 1;
-    }
-
-    .text-sm\\/snug {
-      font-size: var(--text-sm);
-      line-height: var(--leading-snug);
-    }
-
-    .text-\\[--spacing\\(2\\)\\] {
-      font-size: calc(var(--spacing) * 2);
-    }
-
     .text-\\[12px\\] {
       font-size: 12px;
     }
@@ -26677,7 +10614,7 @@ test('text', async () => {
       font-size: 50%;
     }
 
-    .text-\\[absolute-size\\:var\\(--my-size\\)\\] {
+    .text-\\[absolute-size\\:--my-size\\] {
       font-size: var(--my-size);
     }
 
@@ -26693,7 +10630,7 @@ test('text', async () => {
       font-size: larger;
     }
 
-    .text-\\[length\\:var\\(--my-size\\)\\], .text-\\[percentage\\:var\\(--my-size\\)\\], .text-\\[relative-size\\:var\\(--my-size\\)\\] {
+    .text-\\[length\\:--my-size\\], .text-\\[percentage\\:--my-size\\], .text-\\[relative-size\\:--my-size\\] {
       font-size: var(--my-size);
     }
 
@@ -26706,976 +10643,204 @@ test('text', async () => {
     }
 
     .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      color: oklab(59.9824% -.067 -.124 / .5);
+      color: #0088cc80;
     }
 
-    .text-\\[--alpha\\(red\\/20\\%\\)\\] {
-      color: oklab(62.7955% .224 .125 / .2);
-    }
-
-    .text-\\[color\\:var\\(--my-color\\)\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    .text-\\[--my-color\\] {
       color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .text-\\[--my-color\\]\\/50, .text-\\[--my-color\\]\\/\\[0\\.5\\], .text-\\[--my-color\\]\\/\\[50\\%\\] {
+      color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+    .text-\\[color\\:--my-color\\] {
       color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .text-\\[color\\:--my-color\\]\\/50, .text-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .text-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .text-\\[var\\(--my-color\\)\\], .text-\\[var\\(--my-color\\)\\]\\/50 {
-      color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-\\[var\\(--my-color\\)\\]\\/50 {
-        color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .text-blue-500 {
-      color: var(--text-color-blue-500);
-    }
-
-    .text-current, .text-current\\/50 {
+    .text-current {
       color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-current\\/50 {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .text-current\\/\\[0\\.5\\] {
-      color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-current\\/\\[0\\.5\\] {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .text-current\\/\\[50\\%\\] {
-      color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-current\\/\\[50\\%\\] {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .text-inherit {
-      color: inherit;
+    .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] {
+      color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .text-red-500 {
-      color: var(--color-red-500);
+      color: var(--color-red-500, #ef4444);
     }
 
-    .text-red-500\\/2\\.5 {
-      color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-red-500\\/2\\.5 {
-        color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .text-red-500\\/2\\.25 {
-      color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-red-500\\/2\\.25 {
-        color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .text-red-500\\/2\\.75 {
-      color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-red-500\\/2\\.75 {
-        color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    .text-red-500\\/50 {
-      color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-red-500\\/50 {
-        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .text-red-500\\/\\[0\\.5\\] {
-      color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-red-500\\/\\[0\\.5\\] {
-        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .text-red-500\\/\\[50\\%\\] {
-      color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-red-500\\/\\[50\\%\\] {
-        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] {
+      color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .text-transparent {
       color: #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run(
-      [
-        'text',
-        // color
-        '-text-red-500',
-        '-text-red-500/50',
-        '-text-red-500/[0.5]',
-        '-text-red-500/[50%]',
-        '-text-current',
-        '-text-current/50',
-        '-text-current/[0.5]',
-        '-text-current/[50%]',
-        '-text-inherit',
-        '-text-transparent',
-        '-text-[#0088cc]',
-        '-text-[#0088cc]/50',
-        '-text-[#0088cc]/[0.5]',
-        '-text-[#0088cc]/[50%]',
+    run([
+      'text',
+      // color
+      '-text-red-500',
+      '-text-red-500/50',
+      '-text-red-500/[0.5]',
+      '-text-red-500/[50%]',
+      '-text-current',
+      '-text-current/50',
+      '-text-current/[0.5]',
+      '-text-current/[50%]',
+      '-text-transparent',
+      '-text-[#0088cc]',
+      '-text-[#0088cc]/50',
+      '-text-[#0088cc]/[0.5]',
+      '-text-[#0088cc]/[50%]',
 
-        // font-size / line-height / letter-spacing / font-weight
-        '-text-sm',
-        '-text-sm/6',
-        'text-sm/foo',
-        '-text-sm/[4px]',
-        'text-[10px]/foo',
-      ],
-      css`
-        @theme inline reference {
-          --text-sm: 0.875rem;
-        }
-        @tailwind utilities;
-      `,
-    ),
+      // font-size / line-height / letter-spacing / font-weight
+      '-text-sm',
+      '-text-sm/6',
+      '-text-sm/[4px]',
+    ]),
   ).toEqual('')
 })
 
-test('text-shadow', async () => {
+test('shadow', () => {
   expect(
-    await run(
-      [
-        // Shadows
-        'text-shadow-2xs',
-        'text-shadow-sm',
-        'text-shadow-none',
-        'text-shadow-[12px_12px_#0088cc]',
-        'text-shadow-[12px_12px_var(--value)]',
-        'text-shadow-[10px_10px]',
-        'text-shadow-[var(--value)]',
-        'text-shadow-[shadow:var(--value)]',
-
-        'text-shadow-sm/25',
-        'text-shadow-sm/12.5',
-        'text-shadow-[12px_12px_#0088cc]/25',
-        'text-shadow-[12px_12px_var(--value)]/25',
-        'text-shadow-[10px_10px]/25',
-
-        // Colors
-        'text-shadow-red-500',
-        'text-shadow-red-500/50',
-        'text-shadow-red-500/2.25',
-        'text-shadow-red-500/2.5',
-        'text-shadow-red-500/2.75',
-        'text-shadow-red-500/[0.5]',
-        'text-shadow-red-500/[50%]',
-        'text-shadow-current',
-        'text-shadow-current/50',
-        'text-shadow-current/[0.5]',
-        'text-shadow-current/[50%]',
-        'text-shadow-inherit',
-        'text-shadow-transparent',
-        'text-shadow-[#0088cc]',
-        'text-shadow-[#0088cc]/50',
-        'text-shadow-[#0088cc]/[0.5]',
-        'text-shadow-[#0088cc]/[50%]',
-        'text-shadow-[color:var(--value)]',
-        'text-shadow-[color:var(--value)]/50',
-        'text-shadow-[color:var(--value)]/[0.5]',
-        'text-shadow-[color:var(--value)]/[50%]',
-      ],
+    compileCss(
       css`
         @theme {
           --color-red-500: #ef4444;
-          --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.1);
-          --text-shadow-sm: 0px 1px 2px rgb(0 0 0 / 0.06), 0px 2px 2px rgb(0 0 0 / 0.06);
+          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         }
         @tailwind utilities;
       `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-text-shadow-color: initial;
-          --tw-text-shadow-alpha: 100%;
-        }
-      }
-    }
-
-    :root, :host {
-      --color-red-500: #ef4444;
-    }
-
-    .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
-      --tw-text-shadow-alpha: 25%;
-      text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value));
-    }
-
-    @supports (color: lab(from red l a b)) {
-      .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
-        text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from var(--value) l a b / 25%));
-      }
-    }
-
-    .text-shadow-\\[10px_10px\\]\\/25 {
-      --tw-text-shadow-alpha: 25%;
-      text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[10px_10px\\]\\/25 {
-        text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
-      }
-    }
-
-    .text-shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
-      --tw-text-shadow-alpha: 25%;
-      text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(59.9824% -.067 -.124 / .25));
-    }
-
-    .text-shadow-sm\\/12\\.5 {
-      --tw-text-shadow-alpha: 12.5%;
-      text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .125)), 0px 2px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .125));
-    }
-
-    .text-shadow-sm\\/25 {
-      --tw-text-shadow-alpha: 25%;
-      text-shadow: 0px 1px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25)), 0px 2px 2px var(--tw-text-shadow-color, oklab(0% 0 0 / .25));
-    }
-
-    .text-shadow-2xs {
-      text-shadow: 0px 1px 0px var(--tw-text-shadow-color, #0000001a);
-    }
-
-    .text-shadow-\\[\\#0088cc\\] {
-      --tw-text-shadow-color: #08c;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[\\#0088cc\\] {
-        --tw-text-shadow-color: color-mix(in oklab, #08c var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-\\[\\#0088cc\\]\\/50 {
-      --tw-text-shadow-color: #0088cc80;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[\\#0088cc\\]\\/50 {
-        --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
-      --tw-text-shadow-color: #0088cc80;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
-        --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-text-shadow-color: #0088cc80;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-        --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-\\[10px_10px\\] {
-      text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor);
-    }
-
-    .text-shadow-\\[12px_12px_\\#0088cc\\] {
-      text-shadow: 12px 12px var(--tw-text-shadow-color, #08c);
-    }
-
-    .text-shadow-\\[12px_12px_var\\(--value\\)\\] {
-      text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value));
-    }
-
-    .text-shadow-\\[color\\:var\\(--value\\)\\] {
-      --tw-text-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[color\\:var\\(--value\\)\\] {
-        --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
-      --tw-text-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
-      --tw-text-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      --tw-text-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-\\[shadow\\:var\\(--value\\)\\], .text-shadow-\\[var\\(--value\\)\\] {
-      text-shadow: var(--value);
-    }
-
-    .text-shadow-current {
-      --tw-text-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-current {
-        --tw-text-shadow-color: color-mix(in oklab, currentcolor var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-current\\/50 {
-      --tw-text-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-current\\/50 {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-current\\/\\[0\\.5\\] {
-      --tw-text-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-current\\/\\[0\\.5\\] {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-current\\/\\[50\\%\\] {
-      --tw-text-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-current\\/\\[50\\%\\] {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-inherit {
-      --tw-text-shadow-color: inherit;
-    }
-
-    .text-shadow-none {
-      text-shadow: none;
-    }
-
-    .text-shadow-red-500 {
-      --tw-text-shadow-color: #ef4444;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-red-500 {
-        --tw-text-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-red-500\\/2\\.5 {
-      --tw-text-shadow-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-red-500\\/2\\.5 {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-red-500\\/2\\.25 {
-      --tw-text-shadow-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-red-500\\/2\\.25 {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-red-500\\/2\\.75 {
-      --tw-text-shadow-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-red-500\\/2\\.75 {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-red-500\\/50 {
-      --tw-text-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-red-500\\/50 {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-red-500\\/\\[0\\.5\\] {
-      --tw-text-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-red-500\\/\\[0\\.5\\] {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-red-500\\/\\[50\\%\\] {
-      --tw-text-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-red-500\\/\\[50\\%\\] {
-        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    .text-shadow-sm {
-      text-shadow: 0px 1px 2px var(--tw-text-shadow-color, #0000000f), 0px 2px 2px var(--tw-text-shadow-color, #0000000f);
-    }
-
-    .text-shadow-transparent {
-      --tw-text-shadow-color: transparent;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-transparent {
-        --tw-text-shadow-color: color-mix(in oklab, transparent var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
-    @property --tw-text-shadow-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-text-shadow-alpha {
-      syntax: "<percentage>";
-      inherits: false;
-      initial-value: 100%;
-    }
-    "
-  `)
-  expect(
-    await run(
-      [
-        '-text-shadow-sm',
-        '-text-shadow-none',
-        '-text-shadow-red-500',
-        '-text-shadow-red-500/50',
-        '-text-shadow-red-500/[0.5]',
-        '-text-shadow-red-500/[50%]',
-        '-text-shadow-current',
-        '-text-shadow-current/50',
-        '-text-shadow-current/[0.5]',
-        '-text-shadow-current/[50%]',
-        '-text-shadow-inherit',
-        '-text-shadow-transparent',
-        '-text-shadow-[#0088cc]',
-        '-text-shadow-[#0088cc]/50',
-        '-text-shadow-[#0088cc]/[0.5]',
-        '-text-shadow-[#0088cc]/[50%]',
-        '-text-shadow-[var(--value)]',
-        'text-shadow/foo',
-        'text-shadow-sm/foo',
-      ],
-      css`
-        @theme {
-          --text-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
-          --text-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
-})
-
-test('shadow', async () => {
-  expect(
-    await run(
       [
         // Shadows
-        'shadow-sm',
+        'shadow',
         'shadow-xl',
         'shadow-none',
         'shadow-[12px_12px_#0088cc]',
-        'shadow-[12px_12px_var(--value)]',
         'shadow-[10px_10px]',
-        'shadow-[var(--value)]',
-        'shadow-[shadow:var(--value)]',
-
-        'shadow-sm/25',
-        'shadow-sm/12.5',
-        'shadow-[12px_12px_#0088cc]/25',
-        'shadow-[12px_12px_var(--value)]/25',
-        'shadow-[10px_10px]/25',
+        'shadow-[--value]',
+        'shadow-[shadow:--value]',
 
         // Colors
         'shadow-red-500',
         'shadow-red-500/50',
-        'shadow-red-500/2.25',
-        'shadow-red-500/2.5',
-        'shadow-red-500/2.75',
         'shadow-red-500/[0.5]',
         'shadow-red-500/[50%]',
-        'shadow-blue-500',
         'shadow-current',
         'shadow-current/50',
         'shadow-current/[0.5]',
         'shadow-current/[50%]',
-        'shadow-inherit',
         'shadow-transparent',
         'shadow-[#0088cc]',
         'shadow-[#0088cc]/50',
         'shadow-[#0088cc]/[0.5]',
         'shadow-[#0088cc]/[50%]',
-        'shadow-[color:var(--value)]',
-        'shadow-[color:var(--value)]/50',
-        'shadow-[color:var(--value)]/[0.5]',
-        'shadow-[color:var(--value)]/[50%]',
+        'shadow-[color:--value]',
+        'shadow-[color:--value]/50',
+        'shadow-[color:--value]/[0.5]',
+        'shadow-[color:--value]/[50%]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --box-shadow-color-blue-500: #3b82f6;
-          --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --box-shadow-color-blue-500: #3b82f6;
+      --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+      --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
     }
 
-    .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
-      --tw-shadow-alpha: 25%;
-      --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value));
-    }
-
-    @supports (color: lab(from red l a b)) {
-      .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
-        --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from var(--value) l a b / 25%));
-      }
-    }
-
-    .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
+    .shadow {
+      --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .shadow-\\[10px_10px\\]\\/25 {
-      --tw-shadow-alpha: 25%;
-      --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[10px_10px\\]\\/25 {
-        --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
-      }
-    }
-
-    .shadow-\\[10px_10px\\]\\/25 {
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
-      --tw-shadow-alpha: 25%;
-      --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(59.9824% -.067 -.124 / .25));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .shadow-sm\\/12\\.5 {
-      --tw-shadow-alpha: 12.5%;
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .125)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .125));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .shadow-sm\\/25 {
-      --tw-shadow-alpha: 25%;
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, oklab(0% 0 0 / .25)), 0 1px 2px -1px var(--tw-shadow-color, oklab(0% 0 0 / .25));
+    .shadow-\\[--value\\] {
+      --tw-shadow: var(--value);
+      --tw-shadow-colored: var(--value);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .shadow-\\[10px_10px\\] {
-      --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor);
+      --tw-shadow: 10px 10px;
+      --tw-shadow-colored: 10px 10px;
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .shadow-\\[12px_12px_\\#0088cc\\] {
-      --tw-shadow: 12px 12px var(--tw-shadow-color, #08c);
+      --tw-shadow: 12px 12px #08c;
+      --tw-shadow-colored: 12px 12px var(--tw-shadow-color);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .shadow-\\[12px_12px_var\\(--value\\)\\] {
-      --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .shadow-\\[shadow\\:var\\(--value\\)\\], .shadow-\\[var\\(--value\\)\\] {
+    .shadow-\\[shadow\\:--value\\] {
       --tw-shadow: var(--value);
+      --tw-shadow-colored: var(--value);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .shadow-none {
       --tw-shadow: 0 0 #0000;
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .shadow-sm {
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+      --tw-shadow-colored: 0 0 #0000;
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .shadow-xl {
-      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+      --tw-shadow: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a);
+      --tw-shadow-colored: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .shadow-\\[\\#0088cc\\] {
       --tw-shadow-color: #08c;
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[\\#0088cc\\] {
-        --tw-shadow-color: color-mix(in oklab, #08c var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-\\[\\#0088cc\\]\\/50 {
+    .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
       --tw-shadow-color: #0088cc80;
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[\\#0088cc\\]\\/50 {
-        --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
-      --tw-shadow-color: #0088cc80;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
-        --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: #0088cc80;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-        --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-\\[color\\:var\\(--value\\)\\] {
+    .shadow-\\[color\\:--value\\] {
       --tw-shadow-color: var(--value);
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[color\\:var\\(--value\\)\\] {
-        --tw-shadow-color: color-mix(in oklab, var(--value) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
-      --tw-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
-      --tw-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-blue-500 {
-      --tw-shadow-color: #3b82f6;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-blue-500 {
-        --tw-shadow-color: color-mix(in oklab, var(--box-shadow-color-blue-500) var(--tw-shadow-alpha), transparent);
-      }
+    .shadow-\\[color\\:--value\\]\\/50, .shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .shadow-\\[color\\:--value\\]\\/\\[50\\%\\] {
+      --tw-shadow-color: color-mix(in srgb, var(--value) 50%, transparent);
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
     .shadow-current {
-      --tw-shadow-color: currentcolor;
+      --tw-shadow-color: currentColor;
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-current {
-        --tw-shadow-color: color-mix(in oklab, currentcolor var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-current\\/50 {
-      --tw-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-current\\/50 {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-current\\/\\[0\\.5\\] {
-      --tw-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-current\\/\\[0\\.5\\] {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-current\\/\\[50\\%\\] {
-      --tw-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-current\\/\\[50\\%\\] {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-inherit {
-      --tw-shadow-color: inherit;
+    .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {
+      --tw-shadow-color: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
     .shadow-red-500 {
-      --tw-shadow-color: #ef4444;
+      --tw-shadow-color: var(--color-red-500, #ef4444);
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-red-500 {
-        --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-red-500\\/2\\.5 {
-      --tw-shadow-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-red-500\\/2\\.5 {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-red-500\\/2\\.25 {
-      --tw-shadow-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-red-500\\/2\\.25 {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-red-500\\/2\\.75 {
-      --tw-shadow-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-red-500\\/2\\.75 {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-red-500\\/50 {
-      --tw-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-red-500\\/50 {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-red-500\\/\\[0\\.5\\] {
-      --tw-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-red-500\\/\\[0\\.5\\] {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-
-    .shadow-red-500\\/\\[50\\%\\] {
-      --tw-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-red-500\\/\\[50\\%\\] {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
-      }
+    .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] {
+      --tw-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
     .shadow-transparent {
       --tw-shadow-color: transparent;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-transparent {
-        --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
-      }
+      --tw-shadow: var(--tw-shadow-colored);
     }
 
     @property --tw-shadow {
@@ -27684,15 +10849,10 @@ test('shadow', async () => {
       initial-value: 0 0 #0000;
     }
 
-    @property --tw-shadow-color {
+    @property --tw-shadow-colored {
       syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-shadow-alpha {
-      syntax: "<percentage>";
       inherits: false;
-      initial-value: 100%;
+      initial-value: 0 0 #0000;
     }
 
     @property --tw-inset-shadow {
@@ -27701,15 +10861,10 @@ test('shadow', async () => {
       initial-value: 0 0 #0000;
     }
 
-    @property --tw-inset-shadow-color {
+    @property --tw-inset-shadow-colored {
       syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-inset-shadow-alpha {
-      syntax: "<percentage>";
       inherits: false;
-      initial-value: 100%;
+      initial-value: 0 0 #0000;
     }
 
     @property --tw-ring-color {
@@ -27755,90 +10910,33 @@ test('shadow', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run(
-      [
-        '-shadow-sm',
-        '-shadow-none',
-        '-shadow-red-500',
-        '-shadow-red-500/50',
-        '-shadow-red-500/[0.5]',
-        '-shadow-red-500/[50%]',
-        '-shadow-current',
-        '-shadow-current/50',
-        '-shadow-current/[0.5]',
-        '-shadow-current/[50%]',
-        '-shadow-inherit',
-        '-shadow-transparent',
-        '-shadow-[#0088cc]',
-        '-shadow-[#0088cc]/50',
-        '-shadow-[#0088cc]/[0.5]',
-        '-shadow-[#0088cc]/[50%]',
-        '-shadow-[var(--value)]',
-        'shadow/foo',
-        'shadow-sm/foo',
-        'shadow-[10px_10px]/foo',
-        'shadow-[#0088cc]/foo',
-      ],
-      css`
-        @theme {
-          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-          --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-        }
-        @tailwind utilities;
-      `,
-    ),
+    run([
+      '-shadow-xl',
+      '-shadow-none',
+      '-shadow-red-500',
+      '-shadow-red-500/50',
+      '-shadow-red-500/[0.5]',
+      '-shadow-red-500/[50%]',
+      '-shadow-current',
+      '-shadow-current/50',
+      '-shadow-current/[0.5]',
+      '-shadow-current/[50%]',
+      '-shadow-transparent',
+      '-shadow-[#0088cc]',
+      '-shadow-[#0088cc]/50',
+      '-shadow-[#0088cc]/[0.5]',
+      '-shadow-[#0088cc]/[50%]',
+      '-shadow-[--value]',
+    ]),
   ).toEqual('')
 })
 
-test('inset-shadow', async () => {
+test('inset-shadow', () => {
   expect(
-    await run(
-      [
-        // Shadows
-        'inset-shadow',
-        'inset-shadow-sm',
-        'inset-shadow-none',
-        'inset-shadow-[12px_12px_#0088cc]',
-        'inset-shadow-[12px_12px_var(--value)]',
-        'inset-shadow-[10px_10px]',
-        'inset-shadow-[var(--value)]',
-        'inset-shadow-[shadow:var(--value)]',
-        'inset-shadow-[12px_12px_#0088cc,12px_12px_var(--value,#0088cc)]',
-
-        'inset-shadow-sm/25',
-        'inset-shadow-sm/12.5',
-        'inset-shadow-[12px_12px_#0088cc]/25',
-        'inset-shadow-[12px_12px_var(--value)]/25',
-        'inset-shadow-[10px_10px]/25',
-        'inset-shadow-[12px_12px_#0088cc,12px_12px_var(--value,#0088cc)]/25',
-
-        // Colors
-        'inset-shadow-red-500',
-        'inset-shadow-red-500/50',
-        'inset-shadow-red-500/2.25',
-        'inset-shadow-red-500/2.5',
-        'inset-shadow-red-500/2.75',
-        'inset-shadow-red-500/[0.5]',
-        'inset-shadow-red-500/[50%]',
-        'inset-shadow-current',
-        'inset-shadow-current/50',
-        'inset-shadow-current/[0.5]',
-        'inset-shadow-current/[50%]',
-        'inset-shadow-inherit',
-        'inset-shadow-transparent',
-        'inset-shadow-[#0088cc]',
-        'inset-shadow-[#0088cc]/50',
-        'inset-shadow-[#0088cc]/[0.5]',
-        'inset-shadow-[#0088cc]/[50%]',
-        'inset-shadow-[color:var(--value)]',
-        'inset-shadow-[color:var(--value)]/50',
-        'inset-shadow-[color:var(--value)]/[0.5]',
-        'inset-shadow-[color:var(--value)]/[50%]',
-      ],
+    compileCss(
       css`
         @theme {
           --color-red-500: #ef4444;
@@ -27847,339 +10945,128 @@ test('inset-shadow', async () => {
         }
         @tailwind utilities;
       `,
+      [
+        // Shadows
+        'inset-shadow',
+        'inset-shadow-sm',
+        'inset-shadow-none',
+        'inset-shadow-[12px_12px_#0088cc]',
+        'inset-shadow-[10px_10px]',
+        'inset-shadow-[--value]',
+        'inset-shadow-[shadow:--value]',
+
+        // Colors
+        'inset-shadow-red-500',
+        'inset-shadow-red-500/50',
+        'inset-shadow-red-500/[0.5]',
+        'inset-shadow-red-500/[50%]',
+        'inset-shadow-current',
+        'inset-shadow-current/50',
+        'inset-shadow-current/[0.5]',
+        'inset-shadow-current/[50%]',
+        'inset-shadow-transparent',
+        'inset-shadow-[#0088cc]',
+        'inset-shadow-[#0088cc]/50',
+        'inset-shadow-[#0088cc]/[0.5]',
+        'inset-shadow-[#0088cc]/[50%]',
+        'inset-shadow-[color:--value]',
+        'inset-shadow-[color:--value]/50',
+        'inset-shadow-[color:--value]/[0.5]',
+        'inset-shadow-[color:--value]/[50%]',
+      ],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-    }
-
-    .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 {
-      --tw-inset-shadow-alpha: 25%;
-      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c), inset 12px 12px var(--tw-inset-shadow-color, var(--value, #08c));
-    }
-
-    @supports (color: lab(from red l a b)) {
-      .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 {
-        --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25)), inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value, #08c) l a b / 25%));
-      }
-    }
-
-    .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 {
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
-      --tw-inset-shadow-alpha: 25%;
-      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value));
-    }
-
-    @supports (color: lab(from red l a b)) {
-      .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
-        --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value) l a b / 25%));
-      }
-    }
-
-    .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .inset-shadow-\\[10px_10px\\]\\/25 {
-      --tw-inset-shadow-alpha: 25%;
-      --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[10px_10px\\]\\/25 {
-        --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
-      }
-    }
-
-    .inset-shadow-\\[10px_10px\\]\\/25 {
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .inset-shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
-      --tw-inset-shadow-alpha: 25%;
-      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .inset-shadow-sm\\/12\\.5 {
-      --tw-inset-shadow-alpha: 12.5%;
-      --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(0% 0 0 / .125));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .inset-shadow-sm\\/25 {
-      --tw-inset-shadow-alpha: 25%;
-      --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, oklab(0% 0 0 / .25));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --inset-shadow: inset 0 2px 4px #0000000d;
+      --inset-shadow-sm: inset 0 1px 1px #0000000d;
     }
 
     .inset-shadow {
-      --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, #0000000d);
+      --tw-inset-shadow: inset 0 2px 4px #0000000d;
+      --tw-inset-shadow-colored: inset 0 2px 4px var(--tw-inset-shadow-color);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
+    .inset-shadow-\\[--value\\] {
+      --tw-inset-shadow: inset var(--value);
+      --tw-inset-shadow-colored: inset var(--value);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-shadow-\\[10px_10px\\] {
-      --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\] {
-      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c), inset 12px 12px var(--tw-inset-shadow-color, var(--value, #08c));
+      --tw-inset-shadow: inset 10px 10px;
+      --tw-inset-shadow-colored: inset 10px 10px;
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-shadow-\\[12px_12px_\\#0088cc\\] {
-      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c);
+      --tw-inset-shadow: inset 12px 12px #08c;
+      --tw-inset-shadow-colored: inset 12px 12px var(--tw-inset-shadow-color);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .inset-shadow-\\[12px_12px_var\\(--value\\)\\] {
-      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    .inset-shadow-\\[shadow\\:var\\(--value\\)\\], .inset-shadow-\\[var\\(--value\\)\\] {
+    .inset-shadow-\\[shadow\\:--value\\] {
       --tw-inset-shadow: inset var(--value);
+      --tw-inset-shadow-colored: inset var(--value);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-shadow-none {
-      --tw-inset-shadow: inset 0 0 #0000;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-colored: 0 0 #0000;
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-shadow-sm {
-      --tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, #0000000d);
+      --tw-inset-shadow: var(--inset-shadow-sm, inset 0 1px 1px #0000000d);
+      --tw-inset-shadow-colored: var(--inset-shadow-sm, inset 0 1px 1px #0000000d);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-shadow-\\[\\#0088cc\\] {
       --tw-inset-shadow-color: #08c;
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[\\#0088cc\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, #08c var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-\\[\\#0088cc\\]\\/50 {
+    .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
       --tw-inset-shadow-color: #0088cc80;
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[\\#0088cc\\]\\/50 {
-        --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
-      --tw-inset-shadow-color: #0088cc80;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: #0088cc80;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-\\[color\\:var\\(--value\\)\\] {
+    .inset-shadow-\\[color\\:--value\\] {
       --tw-inset-shadow-color: var(--value);
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[color\\:var\\(--value\\)\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, var(--value) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
-      --tw-inset-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
-      --tw-inset-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: var(--value);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
+    .inset-shadow-\\[color\\:--value\\]\\/50, .inset-shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:--value\\]\\/\\[50\\%\\] {
+      --tw-inset-shadow-color: color-mix(in srgb, var(--value) 50%, transparent);
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
     .inset-shadow-current {
-      --tw-inset-shadow-color: currentcolor;
+      --tw-inset-shadow-color: currentColor;
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-current {
-        --tw-inset-shadow-color: color-mix(in oklab, currentcolor var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-current\\/50 {
-      --tw-inset-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-current\\/50 {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-current\\/\\[0\\.5\\] {
-      --tw-inset-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-current\\/\\[0\\.5\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-current\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-current\\/\\[50\\%\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-inherit {
-      --tw-inset-shadow-color: inherit;
+    .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] {
+      --tw-inset-shadow-color: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
     .inset-shadow-red-500 {
-      --tw-inset-shadow-color: #ef4444;
+      --tw-inset-shadow-color: var(--color-red-500, #ef4444);
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-red-500 {
-        --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-red-500\\/2\\.5 {
-      --tw-inset-shadow-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-red-500\\/2\\.5 {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-red-500\\/2\\.25 {
-      --tw-inset-shadow-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-red-500\\/2\\.25 {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-red-500\\/2\\.75 {
-      --tw-inset-shadow-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-red-500\\/2\\.75 {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-red-500\\/50 {
-      --tw-inset-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-red-500\\/50 {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-red-500\\/\\[0\\.5\\] {
-      --tw-inset-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-red-500\\/\\[0\\.5\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
-    .inset-shadow-red-500\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-red-500\\/\\[50\\%\\] {
-        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
-      }
+    .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] {
+      --tw-inset-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
     .inset-shadow-transparent {
       --tw-inset-shadow-color: transparent;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-transparent {
-        --tw-inset-shadow-color: color-mix(in oklab, transparent var(--tw-inset-shadow-alpha), transparent);
-      }
+      --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
     @property --tw-shadow {
@@ -28188,15 +11075,10 @@ test('inset-shadow', async () => {
       initial-value: 0 0 #0000;
     }
 
-    @property --tw-shadow-color {
+    @property --tw-shadow-colored {
       syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-shadow-alpha {
-      syntax: "<percentage>";
       inherits: false;
-      initial-value: 100%;
+      initial-value: 0 0 #0000;
     }
 
     @property --tw-inset-shadow {
@@ -28205,15 +11087,10 @@ test('inset-shadow', async () => {
       initial-value: 0 0 #0000;
     }
 
-    @property --tw-inset-shadow-color {
+    @property --tw-inset-shadow-colored {
       syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-inset-shadow-alpha {
-      syntax: "<percentage>";
       inherits: false;
-      initial-value: 100%;
+      initial-value: 0 0 #0000;
     }
 
     @property --tw-ring-color {
@@ -28259,76 +11136,63 @@ test('inset-shadow', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run(
-      [
-        '-inset-shadow-sm',
-        '-inset-shadow-none',
-        '-inset-shadow-red-500',
-        '-inset-shadow-red-500/50',
-        '-inset-shadow-red-500/[0.5]',
-        '-inset-shadow-red-500/[50%]',
-        '-inset-shadow-current',
-        '-inset-shadow-current/50',
-        '-inset-shadow-current/[0.5]',
-        '-inset-shadow-current/[50%]',
-        '-inset-shadow-inherit',
-        '-inset-shadow-transparent',
-        '-inset-shadow-[#0088cc]',
-        '-inset-shadow-[#0088cc]/50',
-        '-inset-shadow-[#0088cc]/[0.5]',
-        '-inset-shadow-[#0088cc]/[50%]',
-        '-inset-shadow-[var(--value)]',
-        'inset-shadow/foo',
-        'inset-shadow-sm/foo',
-        'inset-shadow-[10px_10px]/foo',
-      ],
-      css`
-        @theme {
-          --inset-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 0.1);
-          --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
-        }
-        @tailwind utilities;
-      `,
-    ),
+    run([
+      '-inset-shadow-sm',
+      '-inset-shadow-none',
+      '-inset-shadow-red-500',
+      '-inset-shadow-red-500/50',
+      '-inset-shadow-red-500/[0.5]',
+      '-inset-shadow-red-500/[50%]',
+      '-inset-shadow-current',
+      '-inset-shadow-current/50',
+      '-inset-shadow-current/[0.5]',
+      '-inset-shadow-current/[50%]',
+      '-inset-shadow-transparent',
+      '-inset-shadow-[#0088cc]',
+      '-inset-shadow-[#0088cc]/50',
+      '-inset-shadow-[#0088cc]/[0.5]',
+      '-inset-shadow-[#0088cc]/[50%]',
+      '-inset-shadow-[--value]',
+    ]),
   ).toEqual('')
 })
 
-test('ring', async () => {
+test('ring', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         // ring color
         'ring-inset',
         'ring-red-500',
         'ring-red-500/50',
-        'ring-red-500/2.25',
-        'ring-red-500/2.5',
-        'ring-red-500/2.75',
         'ring-red-500/[0.5]',
         'ring-red-500/[50%]',
-        'ring-blue-500',
         'ring-current',
         'ring-current/50',
         'ring-current/[0.5]',
         'ring-current/[50%]',
-        'ring-inherit',
         'ring-transparent',
         'ring-[#0088cc]',
         'ring-[#0088cc]/50',
         'ring-[#0088cc]/[0.5]',
         'ring-[#0088cc]/[50%]',
-        'ring-[var(--my-color)]',
-        'ring-[var(--my-color)]/50',
-        'ring-[var(--my-color)]/[0.5]',
-        'ring-[var(--my-color)]/[50%]',
-        'ring-[color:var(--my-color)]',
-        'ring-[color:var(--my-color)]/50',
-        'ring-[color:var(--my-color)]/[0.5]',
-        'ring-[color:var(--my-color)]/[50%]',
+        'ring-[--my-color]',
+        'ring-[--my-color]/50',
+        'ring-[--my-color]/[0.5]',
+        'ring-[--my-color]/[50%]',
+        'ring-[color:--my-color]',
+        'ring-[color:--my-color]/50',
+        'ring-[color:--my-color]/[0.5]',
+        'ring-[color:--my-color]/[50%]',
 
         // ring width
         'ring',
@@ -28337,76 +11201,46 @@ test('ring', async () => {
         'ring-2',
         'ring-4',
         'ring-[12px]',
-        'ring-[length:var(--my-width)]',
+        'ring-[length:--my-width]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --ring-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --ring-color-blue-500: #3b82f6;
     }
 
     .ring {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .ring-0 {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .ring-1 {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .ring-2 {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .ring-4 {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .ring-\\[12px\\] {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(12px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(12px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .ring-\\[length\\:var\\(--my-width\\)\\] {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--my-width) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    .ring-\\[length\\:--my-width\\] {
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--my-width)  + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -28415,169 +11249,39 @@ test('ring', async () => {
     }
 
     .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-ring-color: oklab(59.9824% -.067 -.124 / .5);
+      --tw-ring-color: #0088cc80;
     }
 
-    .ring-\\[color\\:var\\(--my-color\\)\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    .ring-\\[--my-color\\] {
       --tw-ring-color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .ring-\\[--my-color\\]\\/50, .ring-\\[--my-color\\]\\/\\[0\\.5\\], .ring-\\[--my-color\\]\\/\\[50\\%\\] {
+      --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+    .ring-\\[color\\:--my-color\\] {
       --tw-ring-color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .ring-\\[color\\:--my-color\\]\\/50, .ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-color: var(--my-color);
+    .ring-current {
+      --tw-ring-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .ring-\\[var\\(--my-color\\)\\], .ring-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-ring-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-\\[var\\(--my-color\\)\\]\\/50 {
-        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-ring-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .ring-blue-500 {
-      --tw-ring-color: var(--ring-color-blue-500);
-    }
-
-    .ring-current, .ring-current\\/50 {
-      --tw-ring-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-current\\/50 {
-        --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .ring-current\\/\\[0\\.5\\] {
-      --tw-ring-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-current\\/\\[0\\.5\\] {
-        --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .ring-current\\/\\[50\\%\\] {
-      --tw-ring-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-current\\/\\[50\\%\\] {
-        --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .ring-inherit {
-      --tw-ring-color: inherit;
+    .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] {
+      --tw-ring-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .ring-red-500 {
-      --tw-ring-color: var(--color-red-500);
+      --tw-ring-color: var(--color-red-500, #ef4444);
     }
 
-    .ring-red-500\\/2\\.5 {
-      --tw-ring-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-red-500\\/2\\.5 {
-        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .ring-red-500\\/2\\.25 {
-      --tw-ring-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-red-500\\/2\\.25 {
-        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .ring-red-500\\/2\\.75 {
-      --tw-ring-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-red-500\\/2\\.75 {
-        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    .ring-red-500\\/50 {
-      --tw-ring-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-red-500\\/50 {
-        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .ring-red-500\\/\\[0\\.5\\] {
-      --tw-ring-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-red-500\\/\\[0\\.5\\] {
-        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .ring-red-500\\/\\[50\\%\\] {
-      --tw-ring-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-red-500\\/\\[50\\%\\] {
-        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] {
+      --tw-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .ring-transparent {
@@ -28594,15 +11298,10 @@ test('ring', async () => {
       initial-value: 0 0 #0000;
     }
 
-    @property --tw-shadow-color {
+    @property --tw-shadow-colored {
       syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-shadow-alpha {
-      syntax: "<percentage>";
       inherits: false;
-      initial-value: 100%;
+      initial-value: 0 0 #0000;
     }
 
     @property --tw-inset-shadow {
@@ -28611,15 +11310,10 @@ test('ring', async () => {
       initial-value: 0 0 #0000;
     }
 
-    @property --tw-inset-shadow-color {
+    @property --tw-inset-shadow-colored {
       syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-inset-shadow-alpha {
-      syntax: "<percentage>";
       inherits: false;
-      initial-value: 100%;
+      initial-value: 0 0 #0000;
     }
 
     @property --tw-ring-color {
@@ -28665,129 +11359,10 @@ test('ring', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run(
-      ['ring'],
-      css`
-        @theme {
-          --default-ring-width: 2px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
-    .ring {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-
-    @property --tw-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-
-    @property --tw-shadow-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-shadow-alpha {
-      syntax: "<percentage>";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-inset-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-
-    @property --tw-inset-shadow-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-inset-shadow-alpha {
-      syntax: "<percentage>";
-      inherits: false;
-      initial-value: 100%;
-    }
-
-    @property --tw-ring-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-ring-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-
-    @property --tw-inset-ring-color {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-inset-ring-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-
-    @property --tw-ring-inset {
-      syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-ring-offset-width {
-      syntax: "<length>";
-      inherits: false;
-      initial-value: 0;
-    }
-
-    @property --tw-ring-offset-color {
-      syntax: "*";
-      inherits: false;
-      initial-value: #fff;
-    }
-
-    @property --tw-ring-offset-shadow {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0 0 #0000;
-    }
-    "
-  `)
-  expect(
-    await run([
+    run([
       // ring color
       '-ring-inset',
       '-ring-red-500',
@@ -28798,7 +11373,6 @@ test('ring', async () => {
       '-ring-current/50',
       '-ring-current/[0.5]',
       '-ring-current/[50%]',
-      '-ring-inherit',
       '-ring-transparent',
       '-ring-[#0088cc]',
       '-ring-[#0088cc]/50',
@@ -28807,53 +11381,46 @@ test('ring', async () => {
 
       // ring width
       '-ring',
-      'ring--1',
       '-ring-0',
       '-ring-1',
       '-ring-2',
       '-ring-4',
-
-      'ring/foo',
-      'ring-0/foo',
-      'ring-1/foo',
-      'ring-2/foo',
-      'ring-4/foo',
-      'ring-[12px]/foo',
-      'ring-[length:var(--my-width)]/foo',
     ]),
   ).toEqual('')
 })
 
-test('inset-ring', async () => {
+test('inset-ring', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         // ring color
         'inset-ring-red-500',
         'inset-ring-red-500/50',
-        'inset-ring-red-500/2.25',
-        'inset-ring-red-500/2.5',
-        'inset-ring-red-500/2.75',
         'inset-ring-red-500/[0.5]',
         'inset-ring-red-500/[50%]',
         'inset-ring-current',
         'inset-ring-current/50',
         'inset-ring-current/[0.5]',
         'inset-ring-current/[50%]',
-        'inset-ring-inherit',
         'inset-ring-transparent',
         'inset-ring-[#0088cc]',
         'inset-ring-[#0088cc]/50',
         'inset-ring-[#0088cc]/[0.5]',
         'inset-ring-[#0088cc]/[50%]',
-        'inset-ring-[var(--my-color)]',
-        'inset-ring-[var(--my-color)]/50',
-        'inset-ring-[var(--my-color)]/[0.5]',
-        'inset-ring-[var(--my-color)]/[50%]',
-        'inset-ring-[color:var(--my-color)]',
-        'inset-ring-[color:var(--my-color)]/50',
-        'inset-ring-[color:var(--my-color)]/[0.5]',
-        'inset-ring-[color:var(--my-color)]/[50%]',
+        'inset-ring-[--my-color]',
+        'inset-ring-[--my-color]/50',
+        'inset-ring-[--my-color]/[0.5]',
+        'inset-ring-[--my-color]/[50%]',
+        'inset-ring-[color:--my-color]',
+        'inset-ring-[color:--my-color]/50',
+        'inset-ring-[color:--my-color]/[0.5]',
+        'inset-ring-[color:--my-color]/[50%]',
 
         // ring width
         'inset-ring',
@@ -28862,74 +11429,46 @@ test('inset-ring', async () => {
         'inset-ring-2',
         'inset-ring-4',
         'inset-ring-[12px]',
-        'inset-ring-[length:var(--my-width)]',
+        'inset-ring-[length:--my-width]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
     }
 
     .inset-ring {
-      --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+      --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-ring-0 {
-      --tw-inset-ring-shadow: inset 0 0 0 0px var(--tw-inset-ring-color, currentcolor);
+      --tw-inset-ring-shadow: inset 0 0 0 0px var(--tw-inset-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-ring-1 {
-      --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+      --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-ring-2 {
-      --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
+      --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-ring-4 {
-      --tw-inset-ring-shadow: inset 0 0 0 4px var(--tw-inset-ring-color, currentcolor);
+      --tw-inset-ring-shadow: inset 0 0 0 4px var(--tw-inset-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-ring-\\[12px\\] {
-      --tw-inset-ring-shadow: inset 0 0 0 12px var(--tw-inset-ring-color, currentcolor);
+      --tw-inset-ring-shadow: inset 0 0 0 12px var(--tw-inset-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .inset-ring-\\[length\\:var\\(--my-width\\)\\] {
-      --tw-inset-ring-shadow: inset 0 0 0 var(--my-width) var(--tw-inset-ring-color, currentcolor);
+    .inset-ring-\\[length\\:--my-width\\] {
+      --tw-inset-ring-shadow: inset 0 0 0 var(--my-width) var(--tw-inset-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -28938,165 +11477,39 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: oklab(59.9824% -.067 -.124 / .5);
+      --tw-inset-ring-color: #0088cc80;
     }
 
-    .inset-ring-\\[color\\:var\\(--my-color\\)\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    .inset-ring-\\[--my-color\\] {
       --tw-inset-ring-color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .inset-ring-\\[--my-color\\]\\/50, .inset-ring-\\[--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[--my-color\\]\\/\\[50\\%\\] {
+      --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+    .inset-ring-\\[color\\:--my-color\\] {
       --tw-inset-ring-color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .inset-ring-\\[color\\:--my-color\\]\\/50, .inset-ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: var(--my-color);
+    .inset-ring-current {
+      --tw-inset-ring-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .inset-ring-\\[var\\(--my-color\\)\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-inset-ring-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-\\[var\\(--my-color\\)\\]\\/50 {
-        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-inset-ring-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .inset-ring-current, .inset-ring-current\\/50 {
-      --tw-inset-ring-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-current\\/50 {
-        --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .inset-ring-current\\/\\[0\\.5\\] {
-      --tw-inset-ring-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-current\\/\\[0\\.5\\] {
-        --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .inset-ring-current\\/\\[50\\%\\] {
-      --tw-inset-ring-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-current\\/\\[50\\%\\] {
-        --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .inset-ring-inherit {
-      --tw-inset-ring-color: inherit;
+    .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] {
+      --tw-inset-ring-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .inset-ring-red-500 {
-      --tw-inset-ring-color: var(--color-red-500);
+      --tw-inset-ring-color: var(--color-red-500, #ef4444);
     }
 
-    .inset-ring-red-500\\/2\\.5 {
-      --tw-inset-ring-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-red-500\\/2\\.5 {
-        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-      }
-    }
-
-    .inset-ring-red-500\\/2\\.25 {
-      --tw-inset-ring-color: #ef444406;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-red-500\\/2\\.25 {
-        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
-      }
-    }
-
-    .inset-ring-red-500\\/2\\.75 {
-      --tw-inset-ring-color: #ef444407;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-red-500\\/2\\.75 {
-        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-      }
-    }
-
-    .inset-ring-red-500\\/50 {
-      --tw-inset-ring-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-red-500\\/50 {
-        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .inset-ring-red-500\\/\\[0\\.5\\] {
-      --tw-inset-ring-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-red-500\\/\\[0\\.5\\] {
-        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .inset-ring-red-500\\/\\[50\\%\\] {
-      --tw-inset-ring-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-ring-red-500\\/\\[50\\%\\] {
-        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] {
+      --tw-inset-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .inset-ring-transparent {
@@ -29109,15 +11522,10 @@ test('inset-ring', async () => {
       initial-value: 0 0 #0000;
     }
 
-    @property --tw-shadow-color {
+    @property --tw-shadow-colored {
       syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-shadow-alpha {
-      syntax: "<percentage>";
       inherits: false;
-      initial-value: 100%;
+      initial-value: 0 0 #0000;
     }
 
     @property --tw-inset-shadow {
@@ -29126,15 +11534,10 @@ test('inset-ring', async () => {
       initial-value: 0 0 #0000;
     }
 
-    @property --tw-inset-shadow-color {
+    @property --tw-inset-shadow-colored {
       syntax: "*";
-      inherits: false
-    }
-
-    @property --tw-inset-shadow-alpha {
-      syntax: "<percentage>";
       inherits: false;
-      initial-value: 100%;
+      initial-value: 0 0 #0000;
     }
 
     @property --tw-ring-color {
@@ -29180,11 +11583,10 @@ test('inset-ring', async () => {
       syntax: "*";
       inherits: false;
       initial-value: 0 0 #0000;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       // ring color
       '-inset-ring-red-500',
       '-inset-ring-red-500/50',
@@ -29194,7 +11596,6 @@ test('inset-ring', async () => {
       '-inset-ring-current/50',
       '-inset-ring-current/[0.5]',
       '-inset-ring-current/[50%]',
-      '-inset-ring-inherit',
       '-inset-ring-transparent',
       '-inset-ring-[#0088cc]',
       '-inset-ring-[#0088cc]/50',
@@ -29203,26 +11604,23 @@ test('inset-ring', async () => {
 
       // ring width
       '-inset-ring',
-      'inset-ring--1',
       '-inset-ring-0',
       '-inset-ring-1',
       '-inset-ring-2',
       '-inset-ring-4',
-
-      'inset-ring/foo',
-      'inset-ring-0/foo',
-      'inset-ring-1/foo',
-      'inset-ring-2/foo',
-      'inset-ring-4/foo',
-      'inset-ring-[12px]/foo',
-      'inset-ring-[length:var(--my-width)]/foo',
     ]),
   ).toEqual('')
 })
 
-test('ring-offset', async () => {
+test('ring-offset', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
       [
         // ring color
         'ring-offset-inset',
@@ -29230,26 +11628,24 @@ test('ring-offset', async () => {
         'ring-offset-red-500/50',
         'ring-offset-red-500/[0.5]',
         'ring-offset-red-500/[50%]',
-        'ring-offset-blue-500',
         'ring-offset-current',
         'ring-offset-current/50',
         'ring-offset-current/[0.5]',
         'ring-offset-current/[50%]',
-        'ring-offset-inherit',
         'ring-offset-transparent',
         'ring-offset-[#0088cc]',
         'ring-offset-[#0088cc]/50',
         'ring-offset-[#0088cc]/[0.5]',
         'ring-offset-[#0088cc]/[50%]',
 
-        'ring-offset-[var(--my-color)]',
-        'ring-offset-[var(--my-color)]/50',
-        'ring-offset-[var(--my-color)]/[0.5]',
-        'ring-offset-[var(--my-color)]/[50%]',
-        'ring-offset-[color:var(--my-color)]',
-        'ring-offset-[color:var(--my-color)]/50',
-        'ring-offset-[color:var(--my-color)]/[0.5]',
-        'ring-offset-[color:var(--my-color)]/[50%]',
+        'ring-offset-[--my-color]',
+        'ring-offset-[--my-color]/50',
+        'ring-offset-[--my-color]/[0.5]',
+        'ring-offset-[--my-color]/[50%]',
+        'ring-offset-[color:--my-color]',
+        'ring-offset-[color:--my-color]/50',
+        'ring-offset-[color:--my-color]/[0.5]',
+        'ring-offset-[color:--my-color]/[50%]',
 
         // ring width
         'ring-offset-0',
@@ -29257,21 +11653,12 @@ test('ring-offset', async () => {
         'ring-offset-2',
         'ring-offset-4',
         'ring-offset-[12px]',
-        'ring-offset-[length:var(--my-width)]',
+        'ring-offset-[length:--my-width]',
       ],
-      css`
-        @theme {
-          --color-red-500: #ef4444;
-          --ring-offset-color-blue-500: #3b82f6;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    :root, :host {
+    ":root {
       --color-red-500: #ef4444;
-      --ring-offset-color-blue-500: #3b82f6;
     }
 
     .ring-offset-0 {
@@ -29299,7 +11686,7 @@ test('ring-offset', async () => {
       --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
 
-    .ring-offset-\\[length\\:var\\(--my-width\\)\\] {
+    .ring-offset-\\[length\\:--my-width\\] {
       --tw-ring-offset-width: var(--my-width);
       --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
@@ -29309,148 +11696,47 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: oklab(59.9824% -.067 -.124 / .5);
+      --tw-ring-offset-color: #0088cc80;
     }
 
-    .ring-offset-\\[color\\:var\\(--my-color\\)\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    .ring-offset-\\[--my-color\\] {
       --tw-ring-offset-color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .ring-offset-\\[--my-color\\]\\/50, .ring-offset-\\[--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[--my-color\\]\\/\\[50\\%\\] {
+      --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+    .ring-offset-\\[color\\:--my-color\\] {
       --tw-ring-offset-color: var(--my-color);
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
+    .ring-offset-\\[color\\:--my-color\\]\\/50, .ring-offset-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
+      --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: var(--my-color);
+    .ring-offset-current {
+      --tw-ring-offset-color: currentColor;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .ring-offset-\\[var\\(--my-color\\)\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/50 {
-      --tw-ring-offset-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-\\[var\\(--my-color\\)\\]\\/50 {
-        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-      --tw-ring-offset-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
-        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: var(--my-color);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      }
-    }
-
-    .ring-offset-blue-500 {
-      --tw-ring-offset-color: var(--ring-offset-color-blue-500);
-    }
-
-    .ring-offset-current, .ring-offset-current\\/50 {
-      --tw-ring-offset-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-current\\/50 {
-        --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .ring-offset-current\\/\\[0\\.5\\] {
-      --tw-ring-offset-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-current\\/\\[0\\.5\\] {
-        --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .ring-offset-current\\/\\[50\\%\\] {
-      --tw-ring-offset-color: currentcolor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-current\\/\\[50\\%\\] {
-        --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-
-    .ring-offset-inherit {
-      --tw-ring-offset-color: inherit;
+    .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] {
+      --tw-ring-offset-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
     .ring-offset-red-500 {
-      --tw-ring-offset-color: var(--color-red-500);
+      --tw-ring-offset-color: var(--color-red-500, #ef4444);
     }
 
-    .ring-offset-red-500\\/50 {
-      --tw-ring-offset-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-red-500\\/50 {
-        --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .ring-offset-red-500\\/\\[0\\.5\\] {
-      --tw-ring-offset-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-red-500\\/\\[0\\.5\\] {
-        --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
-    }
-
-    .ring-offset-red-500\\/\\[50\\%\\] {
-      --tw-ring-offset-color: #ef444480;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .ring-offset-red-500\\/\\[50\\%\\] {
-        --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      }
+    .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] {
+      --tw-ring-offset-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .ring-offset-transparent {
       --tw-ring-offset-color: transparent;
-    }
-    "
+    }"
   `)
   expect(
-    await run([
+    run([
       'ring-offset',
       // ring color
       '-ring-offset-inset',
@@ -29462,7 +11748,6 @@ test('ring-offset', async () => {
       '-ring-offset-current/50',
       '-ring-offset-current/[0.5]',
       '-ring-offset-current/[50%]',
-      '-ring-offset-inherit',
       '-ring-offset-transparent',
       '-ring-offset-[#0088cc]',
       '-ring-offset-[#0088cc]/50',
@@ -29470,2127 +11755,57 @@ test('ring-offset', async () => {
       '-ring-offset-[#0088cc]/[50%]',
 
       // ring width
-      'ring-offset--1',
       '-ring-offset-0',
       '-ring-offset-1',
       '-ring-offset-2',
       '-ring-offset-4',
-
-      'ring-offset-0/foo',
-      'ring-offset-1/foo',
-      'ring-offset-2/foo',
-      'ring-offset-4/foo',
-      'ring-offset-[12px]/foo',
-      'ring-offset-[length:var(--my-width)]/foo',
     ]),
   ).toEqual('')
 })
 
-test('@container', async () => {
+test('@container', () => {
   expect(
-    await run([
+    run([
       '@container',
       '@container-normal',
       '@container/sidebar',
       '@container-normal/sidebar',
-      '@container-size',
-      '@container-size/sidebar',
+      '@container-[size]',
+      '@container-[size]/sidebar',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .\\@container-normal\\/sidebar {
-      container: sidebar;
-    }
-
-    .\\@container-size\\/sidebar {
-      container: sidebar / size;
-    }
-
-    .\\@container\\/sidebar {
-      container: sidebar / inline-size;
-    }
-
-    .\\@container {
+    ".\\@container {
       container-type: inline-size;
     }
 
+    .\\@container-\\[size\\] {
+      container-type: size;
+    }
+
+    .\\@container-\\[size\\]\\/sidebar {
+      container: sidebar / size;
+    }
+
     .\\@container-normal {
       container-type: normal;
     }
 
-    .\\@container-size {
-      container-type: size;
+    .\\@container-normal\\/sidebar {
+      container: sidebar;
     }
-    "
+
+    .\\@container\\/sidebar {
+      container: sidebar / inline-size;
+    }"
   `)
   expect(
-    await run([
+    run([
       '-@container',
       '-@container-normal',
       '-@container/sidebar',
       '-@container-normal/sidebar',
-      '-@container-size',
-      '-@container-size/sidebar',
+      '-@container-[size]',
+      '-@container-[size]/sidebar',
     ]),
   ).toEqual('')
 })
-
-describe('spacing utilities', () => {
-  test('`--spacing: initial` disables the spacing multiplier', async () => {
-    expect(
-      await run(
-        ['px-1', 'px-4'],
-        css`
-          @theme {
-            --spacing: initial;
-            --spacing-4: 1rem;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing-4: 1rem;
-      }
-
-      .px-4 {
-        padding-inline: var(--spacing-4);
-      }
-      "
-    `)
-  })
-
-  test('`--spacing-*: initial` disables the spacing multiplier', async () => {
-    expect(
-      await run(
-        ['px-1', 'px-4'],
-        css`
-          @theme {
-            --spacing-*: initial;
-            --spacing-4: 1rem;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing-4: 1rem;
-      }
-
-      .px-4 {
-        padding-inline: var(--spacing-4);
-      }
-      "
-    `)
-  })
-
-  test('only multiples of 0.25 with no trailing zeroes are supported with the spacing multiplier', async () => {
-    expect(
-      await run(
-        ['px-0.25', 'px-1.5', 'px-2.75', 'px-0.375', 'px-2.50', 'px-.75'],
-        css`
-          @theme {
-            --spacing: 4px;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing: 4px;
-      }
-
-      .px-0\\.25 {
-        padding-inline: calc(var(--spacing) * .25);
-      }
-
-      .px-1\\.5 {
-        padding-inline: calc(var(--spacing) * 1.5);
-      }
-
-      .px-2\\.75 {
-        padding-inline: calc(var(--spacing) * 2.75);
-      }
-      "
-    `)
-  })
-
-  test('spacing utilities must have a value', async () => {
-    expect(
-      await run(
-        ['px'],
-        css`
-          @theme reference {
-            --spacing: 4px;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toEqual('')
-  })
-
-  test('--spacing-* variables take precedence over --container-* variables', async () => {
-    expect(
-      await run(
-        ['w-sm', 'max-w-sm', 'min-w-sm', 'basis-sm'],
-        css`
-          @theme {
-            --spacing-sm: 8px;
-            --container-sm: 256px;
-          }
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --spacing-sm: 8px;
-      }
-
-      .w-sm {
-        width: var(--spacing-sm);
-      }
-
-      .max-w-sm {
-        max-width: var(--spacing-sm);
-      }
-
-      .min-w-sm {
-        min-width: var(--spacing-sm);
-      }
-
-      .basis-sm {
-        flex-basis: var(--spacing-sm);
-      }
-      "
-    `)
-  })
-})
-
-describe('custom utilities', () => {
-  test.each([
-    ['foo', true], // Simple name
-    ['foo-123', true], // Ending with a number is valid
-    ['foo-2.5', true], // Dots are valid when surrounded by numbers
-    ['-foo', true], // Simple name with negative sign
-    ['foo-bar', true], // With dashes
-    ['foo_bar', true], // With underscores
-    ['foo-50%', true], // Bare value with percentage
-    ['foo-1/2', true], // Bare value with fraction
-    ['foo-sm/8', true], // Bare value with number modifier
-    ['foo-4/snug', true], // Bare value with named modifier
-    ['foo_', true], // This is supported today, so let's not break it
-    ['foo/bar', true], // A slash to separate the modifier is valid.
-
-    ['Foo', false], // Starting with uppercase letter is invalid
-    ['-Foo', false], // Starting with uppercase letter is invalid (negative)
-    ['foo-', false], // Should not end with a dash
-    ['foo-1/', false], // Invalid fraction/modifier
-    ['foo-p%', false], // Invalid percentage
-    ['foo.bar', false], // Dots are only valid when surrounded by numbers
-    ['foo-1..5', false], // Double dots are invalid
-    ['foo..bar', false], // Double dots are invalid definitely without numbers
-    ['foo/bar/baz', false], // Multiple slashes are invalid
-  ])('valid static utility name "%s" (%s)', (name, valid) => {
-    expect(isValidStaticUtilityName(name)).toBe(valid)
-  })
-
-  test.each([
-    ['foo', false], // Simple name, missing '-*' suffix
-    ['foo-*', true], // Simple name
-    ['foo--*', true], // Root ending in `-` is valid (e.g. `border--*`)
-    ['-foo-*', true], // Simple name (negative)
-    ['foo-bar-*', true], // With dashes
-    ['foo_bar-*', true], // With underscores
-    ['Foo-*', false], // Starting with uppercase letter is invalid
-    ['-Foo-*', false], // Starting with uppercase letter is invalid
-    ['foo!-*', false], // Invalid special character
-    ['foo-[…]', false], // Invalid special character
-  ])('valid functional name "%s" (%s)', (name, valid) => {
-    expect(isValidFunctionalUtilityName(name)).toBe(valid)
-  })
-
-  test('custom static utility', async () => {
-    expect(
-      await run(
-        ['text-trim', 'lg:text-trim'],
-        css`
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @theme reference {
-            --breakpoint-lg: 1024px;
-          }
-
-          @utility text-trim {
-            text-box-trim: both;
-            text-box-edge: cap alphabetic;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .text-trim {
-          text-box-trim: both;
-          text-box-edge: cap alphabetic;
-        }
-
-        @media (min-width: 1024px) {
-          .lg\\:text-trim {
-            text-box-trim: both;
-            text-box-edge: cap alphabetic;
-          }
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom static utility emit CSS variables if the utility is used', async () => {
-    let input = css`
-      @layer utilities {
-        @tailwind utilities;
-      }
-
-      @theme {
-        --example-foo: 123px;
-      }
-
-      @utility foo {
-        value: var(--example-foo);
-      }
-    `
-
-    // `foo` is not used yet:
-    expect(await compileCss(input)).toMatchInlineSnapshot(`
-      "
-      @layer utilities;
-      "
-    `)
-
-    // `foo` is used, and the CSS variable is emitted:
-    expect(await run(['foo'], input)).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .foo {
-          value: var(--example-foo);
-        }
-      }
-
-      :root, :host {
-        --example-foo: 123px;
-      }
-      "
-    `)
-  })
-
-  test('custom static utility (negative)', async () => {
-    expect(
-      await run(
-        ['-example', 'lg:-example'],
-        css`
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @utility -example {
-            value: -1;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .-example {
-          value: -1;
-        }
-      }
-      "
-    `)
-  })
-
-  test('Multiple static utilities are merged', async () => {
-    expect(
-      await run(
-        ['really-round'],
-        css`
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @utility really-round {
-            --custom-prop: hi;
-            border-radius: 50rem;
-          }
-
-          @utility really-round {
-            border-radius: 30rem;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .really-round {
-          --custom-prop: hi;
-          border-radius: 30rem;
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom utilities support some special characters', async () => {
-    expect(
-      await run(
-        ['push-1/2', 'push-50%'],
-        css`
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @utility push-1/2 {
-            right: 50%;
-          }
-
-          @utility push-50% {
-            right: 50%;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .push-1\\/2, .push-50\\% {
-          right: 50%;
-        }
-      }
-      "
-    `)
-  })
-
-  test('can override specific versions of a functional utility with a static utility', async () => {
-    expect(
-      await run(
-        ['text-sm'],
-        css`
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @theme reference {
-            --text-sm: 0.875rem;
-            --text-sm--line-height: 1.25rem;
-          }
-
-          @utility text-sm {
-            font-size: var(--text-sm, 0.8755rem);
-            line-height: var(--text-sm--line-height, 1.255rem);
-            text-rendering: optimizeLegibility;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .text-sm {
-          font-size: var(--text-sm, .8755rem);
-          line-height: var(--text-sm--line-height, 1.255rem);
-          text-rendering: optimizelegibility;
-          font-size: var(--text-sm, .875rem);
-          line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem));
-        }
-      }
-      "
-    `)
-  })
-
-  test('can override the default value of a functional utility', async () => {
-    expect(
-      await run(
-        ['rounded', 'rounded-xl', 'rounded-[33px]'],
-        css`
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @theme reference {
-            --radius-xl: 16px;
-          }
-
-          @utility rounded {
-            border-radius: 50rem;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .rounded {
-          border-radius: 50rem;
-        }
-
-        .rounded-\\[33px\\] {
-          border-radius: 33px;
-        }
-
-        .rounded-xl {
-          border-radius: var(--radius-xl, 16px);
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom utilities are sorted by used properties', async () => {
-    expect(
-      await run(
-        ['top-[100px]', 'push-left', 'right-[100px]', 'bottom-[100px]'],
-        css`
-          @layer utilities {
-            @tailwind utilities;
-          }
-
-          @utility push-left {
-            right: 100%;
-          }
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      @layer utilities {
-        .top-\\[100px\\] {
-          top: 100px;
-        }
-
-        .push-left {
-          right: 100%;
-        }
-
-        .right-\\[100px\\] {
-          right: 100px;
-        }
-
-        .bottom-\\[100px\\] {
-          bottom: 100px;
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom utilities must use a valid name definitions', async () => {
-    await expect(() =>
-      compile(css`
-        @utility push-| {
-          right: 100%;
-        }
-      `),
-    ).rejects.toThrow(/should be alphanumeric/)
-
-    await expect(() =>
-      compile(css`
-        @utility ~push {
-          right: 100%;
-        }
-      `),
-    ).rejects.toThrow(/should be alphanumeric/)
-
-    await expect(() =>
-      compile(css`
-        @utility @push {
-          right: 100%;
-        }
-      `),
-    ).rejects.toThrow(/should be alphanumeric/)
-  })
-
-  test('custom utilities work with `@apply`', async () => {
-    expect(
-      await run(
-        ['foo', 'hover:foo', 'bar'],
-        css`
-          @utility foo {
-            @apply flex flex-col underline;
-          }
-
-          @utility bar {
-            @apply z-10;
-
-            .baz {
-              @apply z-20;
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bar {
-        z-index: 10;
-      }
-
-      .bar .baz {
-        z-index: 20;
-      }
-
-      .foo {
-        flex-direction: column;
-        text-decoration-line: underline;
-        display: flex;
-      }
-
-      @media (hover: hover) {
-        .hover\\:foo:hover {
-          flex-direction: column;
-          text-decoration-line: underline;
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-
-  test('referencing custom utilities in custom utilities via `@apply` should work', async () => {
-    expect(
-      await run(
-        ['bar'],
-        css`
-          @utility foo {
-            @apply flex flex-col underline;
-          }
-
-          @utility bar {
-            @apply dark:foo flex-wrap;
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).toMatchInlineSnapshot(`
-      "
-      .bar {
-        flex-wrap: wrap;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        .bar {
-          flex-direction: column;
-          text-decoration-line: underline;
-          display: flex;
-        }
-      }
-      "
-    `)
-  })
-
-  test('custom utilities with `@apply` causing circular dependencies should error', async () => {
-    await expect(() =>
-      run(
-        ['foo', 'bar'],
-        css`
-          @utility foo {
-            @apply flex-wrap hover:bar;
-          }
-
-          @utility bar {
-            @apply flex dark:foo;
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: You cannot \`@apply\` the \`hover:bar\` utility here because it creates a circular dependency.]`,
-    )
-  })
-
-  test('custom utilities with `@apply` causing circular dependencies should error (deeply nesting)', async () => {
-    await expect(() =>
-      run(
-        ['foo', 'bar'],
-        css`
-          @utility foo {
-            .bar {
-              .baz {
-                .qux {
-                  @apply flex-wrap hover:bar;
-                }
-              }
-            }
-          }
-
-          @utility bar {
-            .baz {
-              .qux {
-                @apply flex dark:foo;
-              }
-            }
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: You cannot \`@apply\` the \`hover:bar\` utility here because it creates a circular dependency.]`,
-    )
-  })
-
-  test('custom utilities with `@apply` causing circular dependencies should error (multiple levels)', async () => {
-    await expect(() =>
-      run(
-        ['foo', 'bar'],
-        css`
-          body {
-            @apply foo;
-          }
-
-          @utility foo {
-            @apply flex-wrap hover:bar;
-          }
-
-          @utility bar {
-            @apply flex dark:baz;
-          }
-
-          @utility baz {
-            @apply flex-wrap hover:foo;
-          }
-
-          @tailwind utilities;
-        `,
-      ),
-    ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: You cannot \`@apply\` the \`hover:bar\` utility here because it creates a circular dependency.]`,
-    )
-  })
-
-  describe('functional utilities', () => {
-    test('functional utilities require a `--value(…)`', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: 4;
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example', 'example-foo'], input)).toEqual('')
-    })
-
-    test('functional utilities must resolve at least one `--value(…)`', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value(integer);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-1', 'example-2'], input)).toMatchInlineSnapshot(`
-        "
-        .example-1 {
-          --resolved-value: 1;
-        }
-
-        .example-2 {
-          --resolved-value: 2;
-        }
-        "
-      `)
-
-      expect(await run(['example', 'example-foo', 'example-2.5'], input)).toEqual('')
-    })
-
-    test('resolving values from `@theme`', async () => {
-      let input = css`
-        @theme reference {
-          --example-1: 1;
-          --example-2: 2;
-          --example-4: 4;
-          --example-a: 8;
-        }
-
-        @utility example-* {
-          --resolved-value: --value(--example);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-1', 'example-2', 'example-4', 'example-a'], input))
-        .toMatchInlineSnapshot(`
-          "
-          .example-1 {
-            --resolved-value: var(--example-1, 1);
-          }
-
-          .example-2 {
-            --resolved-value: var(--example-2, 2);
-          }
-
-          .example-4 {
-            --resolved-value: var(--example-4, 4);
-          }
-
-          .example-a {
-            --resolved-value: var(--example-a, 8);
-          }
-          "
-        `)
-      expect(await run(['example-3', 'example-gitlab'], input)).toEqual('')
-    })
-
-    test('functional utility with double-dash separator', async () => {
-      let input = css`
-        @theme reference {
-          --color-border-0: #e5e7eb;
-          --color-border-1: #d1d5db;
-          --color-border-2: #9ca3af;
-        }
-
-        @utility border--* {
-          border-color: --value(--color-border-*, [color]);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['border--0', 'border--1', 'border--2'], input)).toMatchInlineSnapshot(`
-        "
-        .border--0 {
-          border-color: var(--color-border-0, #e5e7eb);
-        }
-
-        .border--1 {
-          border-color: var(--color-border-1, #d1d5db);
-        }
-
-        .border--2 {
-          border-color: var(--color-border-2, #9ca3af);
-        }
-        "
-      `)
-      expect(await run(['border--3'], input)).toEqual('')
-    })
-
-    test('resolving values from `@theme`, with `--example-*` syntax', async () => {
-      let input =
-        // Explicitly not using the css tagged template literal so that
-        // Prettier doesn't format the `value(--example-*)` as
-        // `value(--example- *)`
-        `
-          @theme reference {
-            --example-1: 1;
-            --example-2: 2;
-            --example-4: 4;
-            --example-a: 8;
-          }
-
-          @utility example-* {
-            --resolved-value: --value(--example-*);
-          }
-
-          @tailwind utilities;
-        `
-
-      expect(await run(['example-1', 'example-2', 'example-4', 'example-a'], input))
-        .toMatchInlineSnapshot(`
-          "
-          .example-1 {
-            --resolved-value: var(--example-1, 1);
-          }
-
-          .example-2 {
-            --resolved-value: var(--example-2, 2);
-          }
-
-          .example-4 {
-            --resolved-value: var(--example-4, 4);
-          }
-
-          .example-a {
-            --resolved-value: var(--example-a, 8);
-          }
-          "
-        `)
-      expect(await run(['example-3', 'example-gitlab'], input)).toEqual('')
-    })
-
-    test('resolving values from `@theme`, with `--example-\\*` syntax (prettier friendly)', async () => {
-      let input = css`
-        @theme reference {
-          --example-1: 1;
-          --example-2: 2;
-          --example-4: 4;
-          --example-a: 8;
-        }
-
-        @utility example-* {
-          --resolved-value: --value(--example-\*);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-1', 'example-2', 'example-4', 'example-a'], input))
-        .toMatchInlineSnapshot(`
-          "
-          .example-1 {
-            --resolved-value: var(--example-1, 1);
-          }
-
-          .example-2 {
-            --resolved-value: var(--example-2, 2);
-          }
-
-          .example-4 {
-            --resolved-value: var(--example-4, 4);
-          }
-
-          .example-a {
-            --resolved-value: var(--example-a, 8);
-          }
-          "
-        `)
-      expect(await run(['example-3', 'example-gitlab'], input)).toEqual('')
-    })
-
-    test('resolving bare values', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value(integer);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-1', 'example-76', 'example-971'], input)).toMatchInlineSnapshot(`
-        "
-        .example-1 {
-          --resolved-value: 1;
-        }
-
-        .example-76 {
-          --resolved-value: 76;
-        }
-
-        .example-971 {
-          --resolved-value: 971;
-        }
-        "
-      `)
-      expect(await run(['example-foo'], input)).toEqual('')
-    })
-
-    test('bare values with unsupported data types should result in a warning', async () => {
-      using spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-      let input = css`
-        @utility paint-* {
-          paint: --value([color], color);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['paint-#0088cc', 'paint-red'], input)).toEqual('')
-      expect(spy.mock.calls).toMatchInlineSnapshot(`
-        [
-          [
-            "Unsupported bare value data type: "color".
-        Only valid data types are: "number", "integer", "ratio", "percentage".
-        ",
-          ],
-          [
-            "\`\`\`css
-        --value([color],color)
-                        ^^^^^
-        \`\`\`",
-          ],
-        ]
-      `)
-    })
-
-    test('resolve literal values', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value('revert');
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-revert'], input)).toMatchInlineSnapshot(`
-        "
-        .example-revert {
-          --resolved-value: revert;
-        }
-        "
-      `)
-      expect(await run(['example-initial'], input)).toEqual('')
-    })
-
-    test('resolving bare values with constraints for integer, percentage, and ratio', async () => {
-      let input = css`
-        @utility example-* {
-          --value-as-number: --value(number);
-          --value-as-percentage: --value(percentage);
-          --value-as-ratio: --value(ratio);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-1', 'example-0.5', 'example-20%', 'example-2/3'], input))
-        .toMatchInlineSnapshot(`
-          "
-          .example-0\\.5 {
-            --value-as-number: .5;
-          }
-
-          .example-1 {
-            --value-as-number: 1;
-          }
-
-          .example-2\\/3 {
-            --value-as-ratio: 2 / 3;
-          }
-
-          .example-20\\% {
-            --value-as-percentage: 20%;
-          }
-          "
-        `)
-      expect(
-        await run(
-          ['example-1.23', 'example-12.34%', 'example-1.2/3', 'example-1/2.3', 'example-1.2/3.4'],
-          input,
-        ),
-      ).toEqual('')
-    })
-
-    test('resolving unsupported bare values', async () => {
-      using spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value(color);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-#0088cc', 'example-foo'], input)).toEqual('')
-      expect(
-        `\n${spy.mock.calls
-          .map((c) => c.join(' '))
-          .join('\n')
-          .trim()}\n`,
-      ).toMatchInlineSnapshot(`
-        "
-        Unsupported bare value data type: "color".
-        Only valid data types are: "number", "integer", "ratio", "percentage".
-
-        \`\`\`css
-        --value(color)
-                ^^^^^
-        \`\`\`
-        "
-      `)
-    })
-
-    test('resolving arbitrary values', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value([integer]);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(
-        await run(
-          [
-            'example-[1]',
-            'example-[76]',
-            'example-[971]',
-            'example-[integer:var(--my-value)]',
-            'example-(integer:my-value)',
-          ],
-          input,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        .example-\\[1\\] {
-          --resolved-value: 1;
-        }
-
-        .example-\\[76\\] {
-          --resolved-value: 76;
-        }
-
-        .example-\\[971\\] {
-          --resolved-value: 971;
-        }
-
-        .example-\\[integer\\:var\\(--my-value\\)\\] {
-          --resolved-value: var(--my-value);
-        }
-        "
-      `)
-      expect(
-        await run(
-          [
-            'example-[#0088cc]',
-            'example-[1px]',
-            'example-[var(--my-value)]',
-            'example-(--my-value)',
-            'example-[color:var(--my-value)]',
-            'example-(color:--my-value)',
-          ],
-          input,
-        ),
-      ).toEqual('')
-    })
-
-    test('resolving any arbitrary values', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value([*]);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(
-        await run(
-          [
-            'example-[1]',
-            'example-[76]',
-            'example-[971]',
-            'example-[var(--my-value)]',
-            'example-(--my-value)',
-          ],
-          input,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        .example-\\(--my-value\\) {
-          --resolved-value: var(--my-value);
-        }
-
-        .example-\\[1\\] {
-          --resolved-value: 1;
-        }
-
-        .example-\\[76\\] {
-          --resolved-value: 76;
-        }
-
-        .example-\\[971\\] {
-          --resolved-value: 971;
-        }
-
-        .example-\\[var\\(--my-value\\)\\] {
-          --resolved-value: var(--my-value);
-        }
-        "
-      `)
-    })
-
-    test('resolving any arbitrary values (without space)', async () => {
-      let input = `
-        @utility example-* {
-          --resolved-value: --value([*]);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(
-        await run(
-          [
-            'example-[1]',
-            'example-[76]',
-            'example-[971]',
-            'example-[var(--my-value)]',
-            'example-(--my-value)',
-          ],
-          input,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        .example-\\(--my-value\\) {
-          --resolved-value: var(--my-value);
-        }
-
-        .example-\\[1\\] {
-          --resolved-value: 1;
-        }
-
-        .example-\\[76\\] {
-          --resolved-value: 76;
-        }
-
-        .example-\\[971\\] {
-          --resolved-value: 971;
-        }
-
-        .example-\\[var\\(--my-value\\)\\] {
-          --resolved-value: var(--my-value);
-        }
-        "
-      `)
-    })
-
-    test('resolving any arbitrary values (with escaped `*`)', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value([\*]);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(
-        await run(
-          [
-            'example-[1]',
-            'example-[76]',
-            'example-[971]',
-            'example-[var(--my-value)]',
-            'example-(--my-value)',
-          ],
-          input,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        .example-\\(--my-value\\) {
-          --resolved-value: var(--my-value);
-        }
-
-        .example-\\[1\\] {
-          --resolved-value: 1;
-        }
-
-        .example-\\[76\\] {
-          --resolved-value: 76;
-        }
-
-        .example-\\[971\\] {
-          --resolved-value: 971;
-        }
-
-        .example-\\[var\\(--my-value\\)\\] {
-          --resolved-value: var(--my-value);
-        }
-        "
-      `)
-    })
-
-    test('resolving theme, bare and arbitrary values all at once', async () => {
-      let input = css`
-        @theme reference {
-          --example-a: 8;
-        }
-
-        @utility example-* {
-          --resolved-value: --value([integer]);
-          --resolved-value: --value(integer);
-          --resolved-value: --value(--example);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-a', 'example-76', 'example-[123]'], input)).toMatchInlineSnapshot(`
-        "
-        .example-76 {
-          --resolved-value: 76;
-        }
-
-        .example-\\[123\\] {
-          --resolved-value: 123;
-        }
-
-        .example-a {
-          --resolved-value: var(--example-a, 8);
-        }
-        "
-      `)
-      expect(await run(['example-[#0088cc]', 'example-[1px]'], input)).toEqual('')
-    })
-
-    test('in combination with calc to produce different data types of values', async () => {
-      let input = css`
-        @theme reference {
-          --example-full: 100%;
-        }
-
-        @utility example-* {
-          --resolved-value: --value([percentage]);
-          --resolved-value: calc(--value(integer) * 1%);
-          --resolved-value: --value(--example);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-full', 'example-12', 'example-[20%]'], input))
-        .toMatchInlineSnapshot(`
-          "
-          .example-12 {
-            --resolved-value: calc(12 * 1%);
-          }
-
-          .example-\\[20\\%\\] {
-            --resolved-value: 20%;
-          }
-
-          .example-full {
-            --resolved-value: var(--example-full, 100%);
-          }
-          "
-        `)
-      expect(await run(['example-half', 'example-[#0088cc]'], input)).toEqual('')
-    })
-
-    test('shorthand if resulting values are of the same type', async () => {
-      let input = css`
-        @theme reference {
-          --example-full: 100%;
-        }
-
-        @utility example-* {
-          --resolved-value: calc(--value(integer) * 1%);
-          --resolved-value: --value(--example, [percentage]);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-37', 'example-[50%]', 'example-full'], input))
-        .toMatchInlineSnapshot(`
-          "
-          .example-37 {
-            --resolved-value: calc(37 * 1%);
-          }
-
-          .example-\\[50\\%\\] {
-            --resolved-value: 50%;
-          }
-
-          .example-full {
-            --resolved-value: var(--example-full, 100%);
-          }
-          "
-        `)
-      expect(await run(['example-foo', 'example-[13px]'], input)).toEqual('')
-    })
-
-    test('negative values', async () => {
-      let input = css`
-        @theme reference {
-          --example-full: 100%;
-        }
-
-        @utility example-* {
-          --resolved-value: --value(--example, [percentage], [length]);
-        }
-
-        @utility -example-* {
-          --resolved-value: calc(--value(--example, [percentage], [length]) * -1);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(
-        await run(
-          [
-            'example-full',
-            '-example-full',
-            'example-[10px]',
-            '-example-[10px]',
-            'example-[20%]',
-            '-example-[20%]',
-          ],
-          input,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        .-example-\\[10px\\] {
-          --resolved-value: calc(10px * -1);
-        }
-
-        .-example-\\[20\\%\\] {
-          --resolved-value: calc(20% * -1);
-        }
-
-        .-example-full {
-          --resolved-value: calc(var(--example-full, 100%) * -1);
-        }
-
-        .example-\\[10px\\] {
-          --resolved-value: 10px;
-        }
-
-        .example-\\[20\\%\\] {
-          --resolved-value: 20%;
-        }
-
-        .example-full {
-          --resolved-value: var(--example-full, 100%);
-        }
-        "
-      `)
-      expect(await run(['example-10'], input)).toEqual('')
-    })
-
-    test('using the same value multiple times', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: calc(var(--spacing) * --value(number))
-            calc(var(--spacing) * --value(number));
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-12'], input)).toMatchInlineSnapshot(`
-        "
-        .example-12 {
-          --resolved-value: calc(var(--spacing) * 12)
-                    calc(var(--spacing) * 12);
-        }
-        "
-      `)
-    })
-
-    test('using `--spacing(…)` shorthand', async () => {
-      let input = css`
-        @theme {
-          --spacing: 4px;
-        }
-
-        @utility example-* {
-          margin: --spacing(--value(number));
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-12'], input)).toMatchInlineSnapshot(`
-        "
-        :root, :host {
-          --spacing: 4px;
-        }
-
-        .example-12 {
-          margin: calc(var(--spacing) * 12);
-        }
-        "
-      `)
-    })
-
-    test('using `--spacing(…)` shorthand (inline theme)', async () => {
-      let input = css`
-        @theme inline reference {
-          --spacing: 4px;
-        }
-
-        @utility example-* {
-          margin: --spacing(--value(number));
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-12'], input)).toMatchInlineSnapshot(`
-        "
-        .example-12 {
-          margin: 48px;
-        }
-        "
-      `)
-    })
-
-    test('functional utilities can use `--default(…)` in `--value(…)`', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value(integer, --default(4));
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example', 'example-123'], input)).toMatchInlineSnapshot(`
-        "
-        .example {
-          --resolved-value: 4;
-        }
-
-        .example-123 {
-          --resolved-value: 123;
-        }
-        "
-      `)
-
-      expect(await run(['example-foo'], input)).toEqual('')
-    })
-
-    test('functional utilities can use `--default(…)` in complex expressions', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: calc(--value(integer, --default(4)) * 2);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example', 'example-123'], input)).toMatchInlineSnapshot(`
-        "
-        .example {
-          --resolved-value: calc(4 * 2);
-        }
-
-        .example-123 {
-          --resolved-value: calc(123 * 2);
-        }
-        "
-      `)
-
-      expect(await run(['example-foo'], input)).toEqual('')
-    })
-
-    test('functional utilities can use `--default(…)` with `--modifier(…)`', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value(integer, --default(4));
-          --resolved-modifier: --modifier(integer);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example', 'example/25'], input)).toMatchInlineSnapshot(`
-        "
-        .example\\/25 {
-          --resolved-value: 4;
-          --resolved-modifier: 25;
-        }
-
-        .example {
-          --resolved-value: 4;
-        }
-        "
-      `)
-
-      expect(await run(['example/foo'], input)).toEqual('')
-    })
-
-    test('functional utilities can use `--default(…)` in `--modifier(…)`', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value(integer);
-          --resolved-modifier: --modifier(integer, --default(1));
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-123', 'example-123/25'], input)).toMatchInlineSnapshot(`
-        "
-        .example-123 {
-          --resolved-value: 123;
-          --resolved-modifier: 1;
-        }
-
-        .example-123\\/25 {
-          --resolved-value: 123;
-          --resolved-modifier: 25;
-        }
-        "
-      `)
-
-      expect(await run(['example-123/foo'], input)).toEqual('')
-    })
-
-    test('functional utilities can use `--default(…)` in `--value(…)` and `--modifier(…)`', async () => {
-      let input = css`
-        @utility example-* {
-          --resolved-value: --value(integer, --default(12));
-          --resolved-modifier: --modifier(integer, --default(34));
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example', 'example/1', 'example-1', 'example-1/1'], input))
-        .toMatchInlineSnapshot(`
-          "
-          .example {
-            --resolved-value: 12;
-            --resolved-modifier: 34;
-          }
-
-          .example-1 {
-            --resolved-value: 1;
-            --resolved-modifier: 34;
-          }
-
-          .example-1\\/1 {
-            --resolved-value: 1;
-            --resolved-modifier: 1;
-          }
-
-          .example\\/1 {
-            --resolved-value: 12;
-            --resolved-modifier: 1;
-          }
-          "
-        `)
-
-      expect(await run(['example-123/foo'], input)).toEqual('')
-    })
-
-    test('the value of `--default(…)` is emitted as-is', async () => {
-      let input = css`
-        @theme reference {
-          --text-box-trim-trim-both: trim-both;
-          --text-box-edge-cap: cap alphabetic;
-        }
-
-        @utility trim-* {
-          text-box: --value(--text-box-trim-*)
-            --modifier(--text-box-edge-*, --default(box alphabetic));
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['trim-trim-both', 'trim-trim-both/cap'], input)).toMatchInlineSnapshot(`
-        "
-        .trim-trim-both {
-          text-box: var(--text-box-trim-trim-both, trim-both) box alphabetic;
-        }
-
-        .trim-trim-both\\/cap {
-          text-box: var(--text-box-trim-trim-both, trim-both) var(--text-box-edge-cap, cap alphabetic);
-        }
-        "
-      `)
-    })
-
-    test('modifiers', async () => {
-      let input = css`
-        @theme reference {
-          --value-sm: 14px;
-          --modifier-7: 28px;
-        }
-
-        @utility example-* {
-          --resolved-value: --value(--value, [length]);
-          --resolved-modifier: --modifier(--modifier, [length]);
-          --resolved-modifier-with-calc: calc(--modifier(--modifier, [length]) * 2);
-          --resolved-modifier-literals: --modifier('literal', 'literal-2');
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(
-        await run(
-          [
-            'example-sm',
-            'example-sm/7',
-            'example-[12px]',
-            'example-[12px]/[16px]',
-            'example-sm/literal',
-            'example-sm/literal-2',
-          ],
-          input,
-        ),
-      ).toMatchInlineSnapshot(`
-        "
-        .example-\\[12px\\]\\/\\[16px\\] {
-          --resolved-value: 12px;
-          --resolved-modifier: 16px;
-          --resolved-modifier-with-calc: calc(16px * 2);
-        }
-
-        .example-sm\\/7 {
-          --resolved-value: var(--value-sm, 14px);
-          --resolved-modifier: var(--modifier-7, 28px);
-          --resolved-modifier-with-calc: calc(var(--modifier-7, 28px) * 2);
-        }
-
-        .example-sm\\/literal {
-          --resolved-value: var(--value-sm, 14px);
-          --resolved-modifier-literals: literal;
-        }
-
-        .example-sm\\/literal-2 {
-          --resolved-value: var(--value-sm, 14px);
-          --resolved-modifier-literals: literal-2;
-        }
-
-        .example-\\[12px\\] {
-          --resolved-value: 12px;
-        }
-
-        .example-sm {
-          --resolved-value: var(--value-sm, 14px);
-        }
-        "
-      `)
-      expect(
-        await run(
-          ['example-foo', 'example-foo/[12px]', 'example-foo/12', 'example-sm/unknown-literal'],
-          input,
-        ),
-      ).toEqual('')
-    })
-
-    test('fractions', async () => {
-      let input = css`
-        @theme reference {
-          --example-video: 16 / 9;
-        }
-
-        @utility example-* {
-          --resolved-value: --value(--example, ratio, [ratio]);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-video', 'example-1/1', 'example-[7/9]'], input))
-        .toMatchInlineSnapshot(`
-          "
-          .example-1\\/1 {
-            --resolved-value: 1 / 1;
-          }
-
-          .example-\\[7\\/9\\] {
-            --resolved-value: 7/9;
-          }
-
-          .example-video {
-            --resolved-value: var(--example-video, 16 / 9);
-          }
-          "
-        `)
-      expect(await run(['example-foo'], input)).toEqual('')
-    })
-
-    test('resolve theme values with sub-namespace (--text- * --line-height)', async () => {
-      let input = css`
-        @theme reference {
-          --text-xs: 0.75rem;
-          --text-xs--line-height: calc(1 / 0.75);
-        }
-
-        @utility example-* {
-          font-size: --value(--text);
-          line-height: --value(--text-* --line-height);
-          line-height: --modifier(number);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(`
-        "
-        .example-xs\\/6 {
-          font-size: var(--text-xs, .75rem);
-          line-height: var(--text-xs--line-height, calc(1 / .75));
-          line-height: 6;
-        }
-
-        .example-xs {
-          font-size: var(--text-xs, .75rem);
-          line-height: var(--text-xs--line-height, calc(1 / .75));
-        }
-        "
-      `)
-      expect(await run(['example-foo', 'example-xs/foo'], input)).toEqual('')
-    })
-
-    test('resolve theme values with sub-namespace (--text-\\* --line-height)', async () => {
-      let input = css`
-        @theme reference {
-          --text-xs: 0.75rem;
-          --text-xs--line-height: calc(1 / 0.75);
-        }
-
-        @utility example-* {
-          font-size: --value(--text);
-          line-height: --value(--text-\* --line-height);
-          line-height: --modifier(number);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(`
-        "
-        .example-xs\\/6 {
-          font-size: var(--text-xs, .75rem);
-          line-height: var(--text-xs--line-height, calc(1 / .75));
-          line-height: 6;
-        }
-
-        .example-xs {
-          font-size: var(--text-xs, .75rem);
-          line-height: var(--text-xs--line-height, calc(1 / .75));
-        }
-        "
-      `)
-      expect(await run(['example-foo', 'example-xs/foo'], input)).toEqual('')
-    })
-
-    test('resolve theme values with sub-namespace (--value(--text --line-height))', async () => {
-      let input = css`
-        @theme reference {
-          --text-xs: 0.75rem;
-          --text-xs--line-height: calc(1 / 0.75);
-        }
-
-        @utility example-* {
-          font-size: --value(--text);
-          line-height: --value(--text --line-height);
-          line-height: --modifier(number);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(`
-        "
-        .example-xs\\/6 {
-          font-size: var(--text-xs, .75rem);
-          line-height: var(--text-xs--line-height, calc(1 / .75));
-          line-height: 6;
-        }
-
-        .example-xs {
-          font-size: var(--text-xs, .75rem);
-          line-height: var(--text-xs--line-height, calc(1 / .75));
-        }
-        "
-      `)
-      expect(await run(['example-foo', 'example-xs/foo'], input)).toEqual('')
-    })
-
-    test('resolve theme values with sub-namespace (--value(--text-*--line-height))', async () => {
-      let input = `
-        @theme reference {
-          --text-xs: 0.75rem;
-          --text-xs--line-height: calc(1 / 0.75);
-        }
-
-        @utility example-* {
-          font-size: --value(--text);
-          line-height: --value(--text-*--line-height);
-          line-height: --modifier(number);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-xs', 'example-xs/6'], input)).toMatchInlineSnapshot(`
-        "
-        .example-xs\\/6 {
-          font-size: var(--text-xs, .75rem);
-          line-height: var(--text-xs--line-height, calc(1 / .75));
-          line-height: 6;
-        }
-
-        .example-xs {
-          font-size: var(--text-xs, .75rem);
-          line-height: var(--text-xs--line-height, calc(1 / .75));
-        }
-        "
-      `)
-      expect(await run(['example-foo', 'example-xs/foo'], input)).toEqual('')
-    })
-
-    test('variables used in `@utility` will not be emitted if the utility is not used', async () => {
-      let input = css`
-        @theme {
-          --example-foo: red;
-          --color-red-500: #f00;
-        }
-
-        @utility example-* {
-          color: var(--color-red-500);
-          background-color: --value(--example);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['flex'], input)).toMatchInlineSnapshot(`
-        "
-        .flex {
-          display: flex;
-        }
-        "
-      `)
-    })
-
-    test('variables used in `@utility` will be emitted if the utility is used', async () => {
-      let input = css`
-        @theme {
-          --example-foo: red;
-          --color-red-500: #f00;
-        }
-
-        @utility example-* {
-          color: var(--color-red-500);
-          background-color: --value(--example);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['example-foo'], input)).toMatchInlineSnapshot(`
-        "
-        :root, :host {
-          --example-foo: red;
-          --color-red-500: red;
-        }
-
-        .example-foo {
-          color: var(--color-red-500);
-          background-color: var(--example-foo);
-        }
-        "
-      `)
-    })
-
-    // This originated from a bug. Essentially in the second `--mask-right` we
-    // call both `--modifier(…)` and `--value(…)`. The moment we processed
-    // `--modifier(…)` it deleted the `--mask-right` declaration (expected
-    // behavior). But we didn't properly stop so the `--value(…)` was still
-    // processed and also tried to remove the `--mask-right` declaration.
-    //
-    // This test now ensures that we only remove/replace a declaration once.
-    test('declaration nodes are only replaced/removed once', async () => {
-      let input = css`
-        @utility mask-r-* {
-          --mask-right: linear-gradient(to left, transparent, black --value(percentage));
-          --mask-right: linear-gradient(
-            to left,
-            transparent calc(var(--spacing) * --modifier(integer)),
-            black calc(var(--spacing) * --value(integer))
-          );
-          mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic);
-        }
-
-        @tailwind utilities;
-      `
-
-      expect(await run(['mask-r-20%'], input)).toMatchInlineSnapshot(`
-        "
-        .mask-r-20\\% {
-          --mask-right: linear-gradient(to left, transparent, black 20%);
-          -webkit-mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic);
-          -webkit-mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic);
-          mask-image: var(--mask-linear), var(--mask-radial), var(--mask-conic);
-        }
-        "
-      `)
-    })
-  })
-
-  test('resolve value based on `@theme`', async () => {
-    let input = css`
-      @theme {
-        --example-a: 8;
-      }
-
-      @utility example-* {
-        --resolved-value: --value(--example);
-      }
-
-      @tailwind utilities;
-    `
-
-    expect(await run(['example-a'], input)).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --example-a: 8;
-      }
-
-      .example-a {
-        --resolved-value: var(--example-a);
-      }
-      "
-    `)
-  })
-
-  test('resolve value based on `@theme reference`', async () => {
-    let input = css`
-      @theme reference {
-        --example-a: 8;
-      }
-
-      @utility example-* {
-        --resolved-value: --value(--example);
-      }
-
-      @tailwind utilities;
-    `
-
-    expect(await run(['example-a'], input)).toMatchInlineSnapshot(`
-      "
-      .example-a {
-        --resolved-value: var(--example-a, 8);
-      }
-      "
-    `)
-  })
-
-  test('resolve value based on `@theme inline`', async () => {
-    let input = css`
-      @theme inline {
-        --example-a: 8;
-      }
-
-      @utility example-* {
-        --resolved-value: --value(--example);
-      }
-
-      @tailwind utilities;
-    `
-
-    expect(await run(['example-a'], input)).toMatchInlineSnapshot(`
-      "
-      .example-a {
-        --resolved-value: 8;
-      }
-      "
-    `)
-  })
-
-  test('resolve value based on `@theme inline reference`', async () => {
-    let input = css`
-      @theme inline reference {
-        --example-a: 8;
-      }
-
-      @utility example-* {
-        --resolved-value: --value(--example);
-      }
-
-      @tailwind utilities;
-    `
-
-    expect(await run(['example-a'], input)).toMatchInlineSnapshot(`
-      "
-      .example-a {
-        --resolved-value: 8;
-      }
-      "
-    `)
-  })
-
-  test('sub namespaces can live in different @theme blocks (1)', async () => {
-    let input = `
-      @theme reference {
-        --text-xs: 0.75rem;
-      }
-
-      @theme inline reference {
-        --text-xs--line-height: calc(1 / 0.75);
-      }
-
-      @utility example-* {
-        font-size: --value(--text);
-        line-height: --value(--text-*--line-height);
-      }
-
-      @tailwind utilities;
-    `
-
-    expect(await run(['example-xs'], input)).toMatchInlineSnapshot(`
-      "
-      .example-xs {
-        font-size: var(--text-xs, .75rem);
-        line-height: 1.33333;
-      }
-      "
-    `)
-  })
-
-  test('sub namespaces can live in different @theme blocks (2)', async () => {
-    let input = `
-      @theme inline reference {
-        --text-xs: 0.75rem;
-      }
-
-      @theme reference {
-        --text-xs--line-height: calc(1 / 0.75);
-      }
-
-      @utility example-* {
-        font-size: --value(--text);
-        line-height: --value(--text-*--line-height);
-      }
-
-      @tailwind utilities;
-    `
-
-    expect(await run(['example-xs'], input)).toMatchInlineSnapshot(`
-      "
-      .example-xs {
-        font-size: .75rem;
-        line-height: var(--text-xs--line-height, calc(1 / .75));
-      }
-      "
-    `)
-  })
-
-  test('multiple @utility definitions with the same name but different value types', async () => {
-    let input = css`
-      @theme {
-        --color-red-500: #ef4444;
-        --spacing: 0.25rem;
-      }
-
-      @utility foo-* {
-        color: --value(--color-*);
-      }
-
-      @utility foo-* {
-        font-size: --spacing(--value(number));
-      }
-
-      @tailwind utilities;
-    `
-
-    expect(await run(['foo-red-500', 'foo-123'], input)).toMatchInlineSnapshot(`
-      "
-      :root, :host {
-        --color-red-500: #ef4444;
-        --spacing: .25rem;
-      }
-
-      .foo-123 {
-        font-size: calc(var(--spacing) * 123);
-      }
-
-      .foo-red-500 {
-        color: var(--color-red-500);
-      }
-      "
-    `)
-  })
-})
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 477559d7e..d0c1e32ff 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -1,76 +1,15 @@
-import {
-  atRoot,
-  atRule,
-  cloneAstNode,
-  decl,
-  rule,
-  styleRule,
-  type AstNode,
-  type AtRule,
-  type Declaration,
-  type Rule,
-} from './ast'
+import { decl, rule, type AstNode, type Rule } from './ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate'
-import type { DesignSystem } from './design-system'
-import type { Theme, ThemeKey } from './theme'
-import { compareBreakpoints } from './utils/compare-breakpoints'
-import { DefaultMap } from './utils/default-map'
-import { dimensions } from './utils/dimensions'
-import { unescape } from './utils/escape'
-import {
-  inferDataType,
-  isLength,
-  isPositiveInteger,
-  isStrictPositiveInteger,
-  isValidOpacityValue,
-  isValidSpacingMultiplier,
-} from './utils/infer-data-type'
-import { addWhitespaceAroundMathOperators } from './utils/math-operators'
+import type { ColorThemeKey, Theme, ThemeKey } from './theme'
+import { inferDataType } from './utils/infer-data-type'
 import { replaceShadowColors } from './utils/replace-shadow-colors'
 import { segment } from './utils/segment'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction } from './walk'
 
-const DEFAULT_SPACING_SUGGESTIONS = [
-  '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',
-]
+const ARBITRARY_VARIANT = Symbol('ARBITRARY_VARIANT')
 
 type CompileFn<T extends Candidate['kind']> = (
   value: Extract<Candidate, { kind: T }>,
-) => AstNode[] | undefined | null
+) => AstNode[] | undefined
 
 interface SuggestionGroup {
   supportsNegative?: boolean
@@ -82,7 +21,6 @@ type SuggestionDefinition =
   | string
   | {
       supportsNegative?: boolean
-      supportsFractions?: boolean
       values?: string[]
       modifiers?: string[]
       valueThemeKeys?: ThemeKey[]
@@ -90,74 +28,89 @@ type SuggestionDefinition =
       hasDefaultValue?: boolean
     }
 
-export type UtilityOptions = {
-  types: string[]
-}
-
-export type Utility = {
-  kind: 'static' | 'functional'
-  compileFn: CompileFn<any>
-  options?: UtilityOptions
-}
-
 export class Utilities {
-  private utilities = new DefaultMap<string, Utility[]>(() => [])
+  private utilities = new Map<
+    string | symbol,
+    {
+      kind: Candidate['kind']
+      compileFn: CompileFn<any>
+    }
+  >()
 
   private completions = new Map<string, () => SuggestionGroup[]>()
 
   static(name: string, compileFn: CompileFn<'static'>) {
-    this.utilities.get(name).push({ kind: 'static', compileFn })
+    this.set(name, { kind: 'static', compileFn: compileFn })
   }
 
-  functional(name: string, compileFn: CompileFn<'functional'>, options?: UtilityOptions) {
-    this.utilities.get(name).push({ kind: 'functional', compileFn, options })
+  functional(name: string, compileFn: CompileFn<'functional'>) {
+    this.set(name, { kind: 'functional', compileFn: compileFn })
   }
 
-  has(name: string, kind: 'static' | 'functional') {
-    return this.utilities.has(name) && this.utilities.get(name).some((fn) => fn.kind === kind)
+  arbitrary(compileFn: CompileFn<'arbitrary'>) {
+    this.set(ARBITRARY_VARIANT, { kind: 'arbitrary', compileFn: compileFn })
   }
 
-  get(name: string) {
-    return this.utilities.has(name) ? this.utilities.get(name) : []
+  has(name: string) {
+    return this.utilities.has(name)
+  }
+
+  get(name: string | symbol) {
+    return this.utilities.get(name)
+  }
+
+  kind(name: string) {
+    return this.utilities.get(name)!.kind
   }
 
   getCompletions(name: string): SuggestionGroup[] {
-    if (this.has(name, 'static')) {
-      return (
-        this.completions.get(name)?.() ?? [{ supportsNegative: false, values: [], modifiers: [] }]
-      )
-    }
-
     return this.completions.get(name)?.() ?? []
   }
 
   suggest(name: string, groups: () => SuggestionGroup[]) {
-    let existingGroups = this.completions.get(name)
-    if (existingGroups) {
-      this.completions.set(name, () => [...existingGroups?.(), ...groups?.()])
-    } else {
-      this.completions.set(name, groups)
-    }
+    // TODO: We are calling this multiple times on purpose but ideally only ever
+    // once per utility root.
+    this.completions.set(name, groups)
   }
 
-  keys(kind: 'static' | 'functional') {
-    let keys: string[] = []
+  keys() {
+    return this.utilities.keys()
+  }
 
-    for (let [key, fns] of this.utilities.entries()) {
-      for (let fn of fns) {
-        if (fn.kind === kind) {
-          keys.push(key)
-          break
-        }
+  entries() {
+    return this.utilities.entries()
+  }
+
+  getArbitrary() {
+    return this.get(ARBITRARY_VARIANT)!.compileFn
+  }
+
+  private set<T extends Candidate['kind']>(
+    name: string | symbol,
+    { kind, compileFn }: { kind: T; compileFn: CompileFn<T> },
+  ) {
+    // In test mode, throw an error if we accidentally override another utility
+    // by mistake when implementing a new utility that shares the same root
+    // without realizing the definitions need to be merged.
+    if (process.env.NODE_ENV === 'test') {
+      if (this.utilities.has(name)) {
+        throw new Error(`Duplicate utility prefix [${name.toString()}]`)
       }
     }
 
-    return keys
+    this.utilities.set(name, {
+      kind,
+      compileFn: compileFn,
+    })
   }
 }
 
+function atRoot(rules: Rule[]) {
+  return rule('@at-root', rules)
+}
+
 function property(ident: string, initialValue?: string, syntax?: string) {
-  return atRule('@property', ident, [
+  return rule(`@property ${ident}`, [
     decl('syntax', syntax ? `"${syntax}"` : `"*"`),
     decl('inherits', 'false'),
 
@@ -173,7 +126,7 @@ function property(ident: string, initialValue?: string, syntax?: string) {
 /**
  * Apply opacity to a color using `color-mix`.
  */
-export function withAlpha(value: string, alpha: string): string {
+function withAlpha(value: string, alpha: string): string {
   if (alpha === null) return value
 
   // Convert numeric values (like `0.5`) to percentages (like `50%`) so they
@@ -184,37 +137,13 @@ export function withAlpha(value: string, alpha: string): string {
     alpha = `${alphaAsNumber * 100}%`
   }
 
-  // No need for `color-mix` if the alpha is `100%`
-  if (alpha === '100%') {
-    return value
-  }
-
-  return `color-mix(in oklab, ${value} ${alpha}, transparent)`
-}
-
-/**
- * Replace the opacity in a color using relative color syntax.
- */
-export function replaceAlpha(value: string, alpha: string): string {
-  // Convert numeric values (like `0.5`) to percentages (like `50%`) so they
-  // work properly with `color-mix`. Assume anything that isn't a number is
-  // safe to pass through as-is, like `var(--my-opacity)`.
-  let alphaAsNumber = Number(alpha)
-  if (!Number.isNaN(alphaAsNumber)) {
-    alpha = `${alphaAsNumber * 100}%`
-  }
-
-  return `oklab(from ${value} l a b / ${alpha})`
+  return `color-mix(in srgb, ${value} ${alpha}, transparent)`
 }
 
 /**
  * Resolve a color value + optional opacity modifier to a final color.
  */
-export function asColor(
-  value: string,
-  modifier: CandidateModifier | null,
-  theme: Theme,
-): string | null {
+function asColor(value: string, modifier: CandidateModifier | null, theme: Theme): string | null {
   if (!modifier) return value
 
   if (modifier.kind === 'arbitrary') {
@@ -228,7 +157,7 @@ export function asColor(
     return withAlpha(value, alpha)
   }
 
-  if (!isValidOpacityValue(modifier.value)) {
+  if (Number.isNaN(Number(modifier.value))) {
     return null
   }
 
@@ -237,13 +166,22 @@ export function asColor(
 }
 
 /**
- * Finds a color in the theme under one of the given theme keys that matches
- * `candidateValue`.
- *
- * The values `inherit`, `transparent` and `current` are special-cased as they
- * are universal and don't need to be resolved from the theme.
+ * Negate a numeric value — literals get simplified by Lightning CSS.
  */
-function resolveThemeColor<T extends ThemeKey>(
+function withNegative(
+  value: string,
+  candidate: Extract<Candidate, { kind: 'static' | 'functional' }>,
+) {
+  return candidate.negative ? `calc(${value} * -1)` : value
+}
+
+/**
+ * Finds a color in the theme under one of the given theme keys that matches `candidateValue`.
+ *
+ * The values `transparent` and `current` are special-cased as they are universal and don't need to
+ * be resolved from the theme.
+ */
+function resolveThemeColor<T extends ColorThemeKey>(
   candidate: Extract<Candidate, { kind: 'functional' }>,
   theme: Theme,
   themeKeys: T[],
@@ -261,16 +199,12 @@ function resolveThemeColor<T extends ThemeKey>(
   let value: string | null = null
 
   switch (candidate.value!.value) {
-    case 'inherit': {
-      value = 'inherit'
-      break
-    }
     case 'transparent': {
       value = 'transparent'
       break
     }
     case 'current': {
-      value = 'currentcolor'
+      value = 'currentColor'
       break
     }
     default: {
@@ -282,59 +216,33 @@ function resolveThemeColor<T extends ThemeKey>(
   return value ? asColor(value, candidate.modifier, theme) : null
 }
 
-/**
- * The alpha and beta releases used `_` in theme keys to represent a `.`. This meant we used
- * `--leading-1_5` instead of `--leading-1\.5` to add utilities like `leading-1.5`.
- *
- * We prefer the use of the escaped dot now but still want to make sure suggestions for the
- * legacy key format still works as expected when surrounded by numbers.
- */
-const LEGACY_NUMERIC_KEY = /(\d+)_(\d+)/g
-
 export function createUtilities(theme: Theme) {
   let utilities = new Utilities()
 
+  utilities.arbitrary((candidate) => {
+    let value: string | null = candidate.value
+
+    // Assumption: If an arbitrary property has a modifier, then we assume it
+    // is an opacity modifier.
+    if (candidate.modifier) {
+      value = asColor(value, candidate.modifier, theme)
+    }
+
+    if (value === null) return
+
+    return [decl(candidate.property, value)]
+  })
+
   /**
    * Register list of suggestions for a class
    */
   function suggest(classRoot: string, defns: () => SuggestionDefinition[]) {
     function* resolve(themeKeys: ThemeKey[]) {
       for (let value of theme.keysInNamespaces(themeKeys)) {
-        yield value.replace(LEGACY_NUMERIC_KEY, (_, a, b) => {
-          return `${a}.${b}`
-        })
+        yield value.replaceAll('_', '.')
       }
     }
 
-    let suggestedFractions = [
-      '1/2',
-      '1/3',
-      '2/3',
-      '1/4',
-      '2/4',
-      '3/4',
-      '1/5',
-      '2/5',
-      '3/5',
-      '4/5',
-      '1/6',
-      '2/6',
-      '3/6',
-      '4/6',
-      '5/6',
-      '1/12',
-      '2/12',
-      '3/12',
-      '4/12',
-      '5/12',
-      '6/12',
-      '7/12',
-      '8/12',
-      '9/12',
-      '10/12',
-      '11/12',
-    ]
-
     utilities.suggest(classRoot, () => {
       let groups: SuggestionGroup[] = []
 
@@ -348,13 +256,8 @@ export function createUtilities(theme: Theme) {
           ...(defn.values ?? []),
           ...resolve(defn.valueThemeKeys ?? []),
         ]
-
         let modifiers = [...(defn.modifiers ?? []), ...resolve(defn.modifierThemeKeys ?? [])]
 
-        if (defn.supportsFractions) {
-          values.push(...suggestedFractions)
-        }
-
         if (defn.hasDefaultValue) {
           values.unshift(null)
         }
@@ -370,7 +273,9 @@ export function createUtilities(theme: Theme) {
    * Register a static utility class like `justify-center`.
    */
   function staticUtility(className: string, declarations: ([string, string] | (() => AstNode))[]) {
-    utilities.static(className, () => {
+    utilities.static(className, (candidate) => {
+      if (candidate.negative) return
+
       return declarations.map((node) => {
         return typeof node === 'function' ? node() : decl(node[0], node[1])
       })
@@ -380,12 +285,10 @@ export function createUtilities(theme: Theme) {
   type UtilityDescription = {
     supportsNegative?: boolean
     supportsFractions?: boolean
-    themeKeys?: ThemeKey[]
+    themeKeys: ThemeKey[]
     defaultValue?: string | null
-    staticValues?: Record<string, AstNode[]>
     handleBareValue?: (value: NamedUtilityValue) => string | null
-    handleNegativeBareValue?: (value: NamedUtilityValue) => string | null
-    handle: (value: string, dataType: string | null) => AstNode[] | undefined
+    handle: (value: string) => AstNode[] | undefined
   }
 
   /**
@@ -393,103 +296,57 @@ export function createUtilities(theme: Theme) {
    * user's theme.
    */
   function functionalUtility(classRoot: string, desc: UtilityDescription) {
-    if (desc.staticValues) desc.staticValues = Object.assign(Object.create(null), desc.staticValues)
+    utilities.functional(classRoot, (candidate) => {
+      // If the class candidate has a negative prefix (like `-mx-2`) but this
+      // utility doesn't support negative values (like the `width` utility),
+      // don't generate any rules.
+      if (candidate.negative && !desc.supportsNegative) return
 
-    function handleFunctionalUtility({ negative }: { negative: boolean }) {
-      return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-        let value: string | null = null
-        let dataType: string | null = null
+      let value: string | null = null
 
-        if (!candidate.value) {
-          if (candidate.modifier) return
+      if (!candidate.value) {
+        // If the candidate has no value segment (like `shadow`), use the
+        // `defaultValue` or the `DEFAULT` value in the theme. No utility will
+        // ever support both of these — `defaultValue` is for things like
+        // `grayscale` whereas the `DEFAULT` in theme is for things like
+        // `shadow` or `blur`.
+        value = desc.defaultValue ?? theme.get(desc.themeKeys)
+      } else if (candidate.value.kind === 'arbitrary') {
+        value = candidate.value.value
+      } else {
+        value = theme.resolve(candidate.value.fraction ?? candidate.value.value, desc.themeKeys)
 
-          // If the candidate has no value segment (like `rounded`), use the
-          // `defaultValue` (for candidates like `grow` that have no theme
-          // values) or a bare theme value (like `--radius` for `rounded`). No
-          // utility will ever support both of these.
-          value =
-            desc.defaultValue !== undefined
-              ? desc.defaultValue
-              : theme.resolve(null, desc.themeKeys ?? [])
-        } else if (candidate.value.kind === 'arbitrary') {
-          if (candidate.modifier) return
-          value = candidate.value.value
-          dataType = candidate.value.dataType
-        } else {
-          value = theme.resolve(
-            candidate.value.fraction ?? candidate.value.value,
-            desc.themeKeys ?? [],
-          )
-
-          // If the theme value resolved without consuming the modifier, then
-          // the modifier would be silently ignored and `w-4` and `w-4/foo`
-          // would generate the same CSS.
-          //
-          // The modifier would be consumed if it's a fraction, e.g.: `w-1/2`
-          if (value !== null && candidate.modifier && !candidate.value.fraction) return
-
-          // Automatically handle things like `w-1/2` without requiring `1/2` to
-          // exist as a theme value.
-          if (value === null && desc.supportsFractions && candidate.value.fraction) {
-            let [lhs, rhs] = segment(candidate.value.fraction, '/')
-            if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) return
-            value = `calc(${lhs} / ${rhs} * 100%)`
-          }
-
-          // If there is still no value but the utility supports bare values,
-          // then use the bare candidate value as the value.
-          if (value === null && negative && desc.handleNegativeBareValue) {
-            value = desc.handleNegativeBareValue(candidate.value)
-            if (!value?.includes('/') && candidate.modifier) return
-            if (value !== null) return desc.handle(value, null)
-          }
-
-          if (value === null && desc.handleBareValue) {
-            value = desc.handleBareValue(candidate.value)
-            if (!value?.includes('/') && candidate.modifier) return
-          }
-
-          if (value === null && !negative && desc.staticValues && !candidate.modifier) {
-            let fallback = desc.staticValues[candidate.value.value]
-            if (fallback) return fallback.map(cloneAstNode)
-          }
+        // Automatically handle things like `w-1/2` without requiring `1/2` to
+        // exist as a theme value.
+        if (value === null && desc.supportsFractions && candidate.value.fraction) {
+          value = `calc(${candidate.value.fraction} * 100%)`
         }
 
-        // If there is no value, don't generate any rules.
-        if (value === null) return
-
-        // Negate the value if the candidate has a negative prefix.
-        return desc.handle(
-          negative ? addWhitespaceAroundMathOperators(`calc(${value} * -1)`) : value,
-          dataType,
-        )
+        // If there is still no value but the utility supports bare values, then
+        // use the bare candidate value as the value.
+        if (value === null && desc.handleBareValue) {
+          value = desc.handleBareValue(candidate.value)
+        }
       }
-    }
 
-    if (desc.supportsNegative) {
-      utilities.functional(`-${classRoot}`, handleFunctionalUtility({ negative: true }))
-    }
-    utilities.functional(classRoot, handleFunctionalUtility({ negative: false }))
+      // If there is no value, don't generate any rules.
+      if (value === null) return
+
+      // Negate the value if the candidate has a negative prefix.
+      return desc.handle(withNegative(value, candidate))
+    })
 
     suggest(classRoot, () => [
       {
         supportsNegative: desc.supportsNegative,
-        valueThemeKeys: desc.themeKeys ?? [],
+        valueThemeKeys: desc.themeKeys,
         hasDefaultValue: desc.defaultValue !== undefined && desc.defaultValue !== null,
-        supportsFractions: desc.supportsFractions,
       },
     ])
-
-    // Also suggest any staticValues automatically so callers don't need to
-    // manually add suggestion groups for e.g. `auto`, `none`, `full`, etc.
-    if (desc.staticValues && Object.keys(desc.staticValues).length > 0) {
-      let values = Object.keys(desc.staticValues)
-      suggest(classRoot, () => [{ values }])
-    }
   }
 
   type ColorUtilityDescription = {
-    themeKeys: ThemeKey[]
+    themeKeys: ColorThemeKey[]
     handle: (value: string) => AstNode[] | undefined
   }
 
@@ -503,6 +360,10 @@ export function createUtilities(theme: Theme) {
       // `bg-red-500`, otherwise they would be static utilities.
       if (!candidate.value) return
 
+      // Color utilities never support negative values as there's no sensible
+      // way to negate a color.
+      if (candidate.negative) return
+
       // Find the actual CSS value that the candidate value maps to.
       let value: string | null = null
 
@@ -524,61 +385,10 @@ export function createUtilities(theme: Theme) {
 
     suggest(classRoot, () => [
       {
-        values: ['current', 'inherit', 'transparent'],
+        values: ['current', 'transparent'],
         valueThemeKeys: desc.themeKeys,
-        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      },
-    ])
-  }
-
-  function spacingUtility(
-    name: string,
-    themeKeys: ThemeKey[],
-    handle: (value: string) => AstNode[] | undefined,
-    {
-      supportsNegative = false,
-      supportsFractions = false,
-      staticValues,
-    }: {
-      supportsNegative?: boolean
-      supportsFractions?: boolean
-      staticValues?: Record<string, AstNode[]>
-    } = {},
-  ) {
-    if (supportsNegative) {
-      utilities.static(`-${name}-px`, () => handle('-1px'))
-    }
-    utilities.static(`${name}-px`, () => handle('1px'))
-    functionalUtility(name, {
-      themeKeys,
-      supportsFractions,
-      supportsNegative,
-      defaultValue: null,
-      handleBareValue: ({ value }) => {
-        let multiplier = theme.resolve(null, ['--spacing'])
-        if (!multiplier) return null
-        if (!isValidSpacingMultiplier(value)) return null
-
-        return `--spacing(${value})`
-      },
-      handleNegativeBareValue: ({ value }) => {
-        let multiplier = theme.resolve(null, ['--spacing'])
-        if (!multiplier) return null
-        if (!isValidSpacingMultiplier(value)) return null
-
-        return `--spacing(-${value})`
-      },
-      handle,
-      staticValues,
-    })
-
-    suggest(name, () => [
-      {
-        values: theme.get(['--spacing']) ? DEFAULT_SPACING_SUGGESTIONS : [],
-        supportsNegative,
-        supportsFractions,
-        valueThemeKeys: themeKeys,
+        modifierThemeKeys: ['--opacity'],
       },
     ])
   }
@@ -596,7 +406,7 @@ export function createUtilities(theme: Theme) {
     ['padding', '0'],
     ['margin', '-1px'],
     ['overflow', 'hidden'],
-    ['clip-path', 'inset(50%)'],
+    ['clip', 'rect(0, 0, 0, 0)'],
     ['white-space', 'nowrap'],
     ['border-width', '0'],
   ])
@@ -607,7 +417,7 @@ export function createUtilities(theme: Theme) {
     ['padding', '0'],
     ['margin', '0'],
     ['overflow', 'visible'],
-    ['clip-path', 'none'],
+    ['clip', 'auto'],
     ['white-space', 'normal'],
   ])
 
@@ -636,27 +446,130 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `inset`
    */
-  for (let [name, property] of [
-    ['inset', 'inset'],
-    ['inset-x', 'inset-inline'],
-    ['inset-y', 'inset-block'],
-    ['inset-s', 'inset-inline-start'],
-    ['inset-e', 'inset-inline-end'],
-    ['inset-bs', 'inset-block-start'],
-    ['inset-be', 'inset-block-end'],
-    ['top', 'top'],
-    ['right', 'right'],
-    ['bottom', 'bottom'],
-    ['left', 'left'],
-  ] as const) {
-    staticUtility(`${name}-auto`, [[property, 'auto']])
-    staticUtility(`${name}-full`, [[property, '100%']])
-    staticUtility(`-${name}-full`, [[property, '-100%']])
-    spacingUtility(name, ['--inset', '--spacing'], (value) => [decl(property, value)], {
-      supportsNegative: true,
-      supportsFractions: true,
-    })
-  }
+  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'],
+    handle: (value) => [decl('inset', value)],
+  })
+
+  staticUtility('inset-x-auto', [
+    ['--tw-sort', 'inset-inline'],
+    ['right', 'auto'],
+    ['left', 'auto'],
+  ])
+
+  utilities.static('inset-x-full', (candidate) => {
+    let value = candidate.negative ? '-100%' : '100%'
+    return [decl('--tw-sort', 'inset-inline'), decl('right', value), decl('left', value)]
+  })
+  functionalUtility('inset-x', {
+    supportsNegative: true,
+    supportsFractions: true,
+    themeKeys: ['--inset', '--spacing'],
+    handle: (value) => [
+      decl('--tw-sort', 'inset-inline'),
+      decl('right', value),
+      decl('left', value),
+    ],
+  })
+
+  staticUtility('inset-y-auto', [
+    ['--tw-sort', 'inset-block'],
+    ['top', 'auto'],
+    ['bottom', 'auto'],
+  ])
+  utilities.static('inset-y-full', (candidate) => {
+    let value = candidate.negative ? '-100%' : '100%'
+    return [decl('--tw-sort', 'inset-block'), decl('top', value), decl('bottom', value)]
+  })
+  functionalUtility('inset-y', {
+    supportsNegative: true,
+    supportsFractions: true,
+    themeKeys: ['--inset', '--spacing'],
+    handle: (value) => [
+      decl('--tw-sort', 'inset-block'),
+      decl('top', value),
+      decl('bottom', 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'],
+    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'],
+    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'],
+    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'],
+    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'],
+    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'],
+    handle: (value) => [decl('left', value)],
+  })
 
   /**
    * @css `isolation`
@@ -667,17 +580,12 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `z-index`
    */
+  staticUtility('z-auto', [['z-index', 'auto']])
   functionalUtility('z', {
     supportsNegative: true,
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    handleBareValue: ({ value }) => value,
     themeKeys: ['--z-index'],
     handle: (value) => [decl('z-index', value)],
-    staticValues: {
-      auto: [decl('z-index', 'auto')],
-    },
   })
 
   suggest('z', () => [
@@ -691,18 +599,14 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `order`
    */
+  staticUtility('order-first', [['order', 'calc(-infinity)']])
+  staticUtility('order-last', [['order', 'calc(infinity)']])
+  staticUtility('order-none', [['order', '0']])
   functionalUtility('order', {
     supportsNegative: true,
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    handleBareValue: ({ value }) => value,
     themeKeys: ['--order'],
     handle: (value) => [decl('order', value)],
-    staticValues: {
-      first: [decl('order', '-9999')],
-      last: [decl('order', '9999')],
-    },
   })
 
   suggest('order', () => [
@@ -716,60 +620,36 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `grid-column`
    */
+  staticUtility('col-auto', [['grid-column', 'auto']])
   functionalUtility('col', {
-    supportsNegative: true,
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
     themeKeys: ['--grid-column'],
     handle: (value) => [decl('grid-column', value)],
-    staticValues: {
-      auto: [decl('grid-column', 'auto')],
-    },
   })
-
+  staticUtility('col-span-full', [['grid-column', '1 / -1']])
   functionalUtility('col-span', {
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    themeKeys: [],
+    handleBareValue: ({ value }) => value,
     handle: (value) => [decl('grid-column', `span ${value} / span ${value}`)],
-    staticValues: {
-      full: [decl('grid-column', '1 / -1')],
-    },
   })
 
   /**
    * @css `grid-column-start`
    */
+  staticUtility('col-start-auto', [['grid-column-start', 'auto']])
   functionalUtility('col-start', {
-    supportsNegative: true,
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    handleBareValue: ({ value }) => value,
     themeKeys: ['--grid-column-start'],
     handle: (value) => [decl('grid-column-start', value)],
-    staticValues: {
-      auto: [decl('grid-column-start', 'auto')],
-    },
   })
 
   /**
    * @css `grid-column-end`
    */
+  staticUtility('col-end-auto', [['grid-column-end', 'auto']])
   functionalUtility('col-end', {
-    supportsNegative: true,
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    handleBareValue: ({ value }) => value,
     themeKeys: ['--grid-column-end'],
     handle: (value) => [decl('grid-column-end', value)],
-    staticValues: {
-      auto: [decl('grid-column-end', 'auto')],
-    },
   })
 
   suggest('col-span', () => [
@@ -781,7 +661,6 @@ export function createUtilities(theme: Theme) {
 
   suggest('col-start', () => [
     {
-      supportsNegative: true,
       values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
       valueThemeKeys: ['--grid-column-start'],
     },
@@ -789,7 +668,6 @@ export function createUtilities(theme: Theme) {
 
   suggest('col-end', () => [
     {
-      supportsNegative: true,
       values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
       valueThemeKeys: ['--grid-column-end'],
     },
@@ -798,61 +676,36 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `grid-row`
    */
+  staticUtility('row-auto', [['grid-row', 'auto']])
   functionalUtility('row', {
-    supportsNegative: true,
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
     themeKeys: ['--grid-row'],
     handle: (value) => [decl('grid-row', value)],
-    staticValues: {
-      auto: [decl('grid-row', 'auto')],
-    },
   })
-
+  staticUtility('row-span-full', [['grid-row', '1 / -1']])
   functionalUtility('row-span', {
     themeKeys: [],
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    handleBareValue: ({ value }) => value,
     handle: (value) => [decl('grid-row', `span ${value} / span ${value}`)],
-    staticValues: {
-      full: [decl('grid-row', '1 / -1')],
-    },
   })
 
   /**
    * @css `grid-row-start`
    */
+  staticUtility('row-start-auto', [['grid-row-start', 'auto']])
   functionalUtility('row-start', {
-    supportsNegative: true,
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    handleBareValue: ({ value }) => value,
     themeKeys: ['--grid-row-start'],
     handle: (value) => [decl('grid-row-start', value)],
-    staticValues: {
-      auto: [decl('grid-row-start', 'auto')],
-    },
   })
 
   /**
    * @css `grid-row-end`
    */
+  staticUtility('row-end-auto', [['grid-row-end', 'auto']])
   functionalUtility('row-end', {
-    supportsNegative: true,
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    handleBareValue: ({ value }) => value,
     themeKeys: ['--grid-row-end'],
     handle: (value) => [decl('grid-row-end', value)],
-    staticValues: {
-      auto: [decl('grid-row-end', 'auto')],
-    },
   })
 
   suggest('row-span', () => [
@@ -864,7 +717,6 @@ export function createUtilities(theme: Theme) {
 
   suggest('row-start', () => [
     {
-      supportsNegative: true,
       values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
       valueThemeKeys: ['--grid-row-start'],
     },
@@ -872,7 +724,6 @@ export function createUtilities(theme: Theme) {
 
   suggest('row-end', () => [
     {
-      supportsNegative: true,
       values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
       valueThemeKeys: ['--grid-row-end'],
     },
@@ -881,8 +732,8 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `float`
    */
-  staticUtility('float-start', [['float', 'inline-start']])
-  staticUtility('float-end', [['float', 'inline-end']])
+  staticUtility('float-start', [['float', 'start']])
+  staticUtility('float-end', [['float', 'end']])
   staticUtility('float-right', [['float', 'right']])
   staticUtility('float-left', [['float', 'left']])
   staticUtility('float-none', [['float', 'none']])
@@ -890,8 +741,8 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `clear`
    */
-  staticUtility('clear-start', [['clear', 'inline-start']])
-  staticUtility('clear-end', [['clear', 'inline-end']])
+  staticUtility('clear-start', [['clear', 'start']])
+  staticUtility('clear-end', [['clear', 'end']])
   staticUtility('clear-right', [['clear', 'right']])
   staticUtility('clear-left', [['clear', 'left']])
   staticUtility('clear-both', [['clear', 'both']])
@@ -900,22 +751,28 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `margin`
    */
-  for (let [namespace, property] of [
-    ['m', 'margin'],
-    ['mx', 'margin-inline'],
-    ['my', 'margin-block'],
-    ['ms', 'margin-inline-start'],
-    ['me', 'margin-inline-end'],
-    ['mbs', 'margin-block-start'],
-    ['mbe', 'margin-block-end'],
-    ['mt', 'margin-top'],
-    ['mr', 'margin-right'],
-    ['mb', 'margin-bottom'],
-    ['ml', 'margin-left'],
+  for (let [namespace, properties, sort] of [
+    ['m', ['margin']],
+    ['mx', ['margin-left', 'margin-right'], 'margin-inline'],
+    ['my', ['margin-top', 'margin-bottom'], '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`, [[property, 'auto']])
-    spacingUtility(namespace, ['--margin', '--spacing'], (value) => [decl(property, value)], {
+    staticUtility(
+      `${namespace}-auto`,
+      properties.map((property) => [property, 'auto']),
+    )
+    functionalUtility(namespace, {
       supportsNegative: true,
+      themeKeys: ['--margin', '--spacing'],
+      handle: (value) => [
+        ...(sort ? [decl('--tw-sort', sort)] : []),
+        ...properties.map((property) => decl(property, value)),
+      ],
     })
   }
 
@@ -928,26 +785,21 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `line-clamp`
    */
+  staticUtility('line-clamp-none', [
+    ['overlow', 'visible'],
+    ['display', 'block'],
+    ['-webkit-box-orient', 'horizonal'],
+    ['-webkit-line-clamp', 'none'],
+  ])
   functionalUtility('line-clamp', {
     themeKeys: ['--line-clamp'],
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    handleBareValue: ({ value }) => value,
     handle: (value) => [
-      decl('overflow', 'hidden'),
+      decl('overlow', 'hidden'),
       decl('display', '-webkit-box'),
       decl('-webkit-box-orient', 'vertical'),
       decl('-webkit-line-clamp', value),
     ],
-    staticValues: {
-      none: [
-        decl('overflow', 'visible'),
-        decl('display', 'block'),
-        decl('-webkit-box-orient', 'horizontal'),
-        decl('-webkit-line-clamp', 'unset'),
-      ],
-    },
   })
 
   suggest('line-clamp', () => [
@@ -977,53 +829,31 @@ export function createUtilities(theme: Theme) {
   staticUtility('table-row-group', [['display', 'table-row-group']])
   staticUtility('table-row', [['display', 'table-row']])
   staticUtility('flow-root', [['display', 'flow-root']])
-  staticUtility('flex', [['display', 'flex']])
   staticUtility('grid', [['display', 'grid']])
   staticUtility('inline-grid', [['display', 'inline-grid']])
   staticUtility('contents', [['display', 'contents']])
   staticUtility('list-item', [['display', 'list-item']])
 
-  /**
-   * @css `field-sizing`
-   */
-  staticUtility('field-sizing-content', [['field-sizing', 'content']])
-  staticUtility('field-sizing-fixed', [['field-sizing', 'fixed']])
-
   /**
    * @css `aspect-ratio`
    */
+  staticUtility('aspect-auto', [['aspect-ratio', 'auto']])
+  staticUtility('aspect-square', [['aspect-ratio', '1 / 1']])
+  staticUtility('aspect-video', [['aspect-ratio', '16 / 9']])
   functionalUtility('aspect', {
-    themeKeys: ['--aspect'],
-    handleBareValue: ({ fraction }) => {
-      if (fraction === null) return null
-      let [lhs, rhs] = segment(fraction, '/')
-      if (!isValidSpacingMultiplier(lhs) || !isValidSpacingMultiplier(rhs)) return null
-      return fraction
-    },
+    themeKeys: ['--aspect-ratio'],
+    handleBareValue: ({ fraction }) => fraction,
     handle: (value) => [decl('aspect-ratio', value)],
-    staticValues: {
-      auto: [decl('aspect-ratio', 'auto')],
-      square: [decl('aspect-ratio', '1 / 1')],
-    },
   })
 
   /**
    * @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'],
@@ -1033,146 +863,131 @@ export function createUtilities(theme: Theme) {
       ['width', value],
       ['height', value],
     ])
-    staticUtility(`w-${key}`, [['width', value]])
-    staticUtility(`h-${key}`, [['height', value]])
-    staticUtility(`min-w-${key}`, [['min-width', value]])
-    staticUtility(`min-h-${key}`, [['min-height', value]])
-    staticUtility(`max-w-${key}`, [['max-width', value]])
-    staticUtility(`max-h-${key}`, [['max-height', value]])
-  }
-
-  staticUtility(`size-auto`, [
-    ['--tw-sort', 'size'],
-    ['width', 'auto'],
-    ['height', 'auto'],
-  ])
-  staticUtility(`w-auto`, [['width', 'auto']])
-  staticUtility(`h-auto`, [['height', 'auto']])
-  staticUtility(`min-w-auto`, [['min-width', 'auto']])
-  staticUtility(`min-h-auto`, [['min-height', 'auto']])
-
-  staticUtility(`h-lh`, [['height', '1lh']])
-  staticUtility(`min-h-lh`, [['min-height', '1lh']])
-  staticUtility(`max-h-lh`, [['max-height', '1lh']])
-
-  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(`max-w-none`, [['max-width', 'none']])
-  staticUtility(`max-h-none`, [['max-height', 'none']])
-
-  spacingUtility(
-    'size',
-    ['--size', '--spacing'],
-    (value) => [decl('--tw-sort', 'size'), decl('width', value), decl('height', value)],
-    {
-      supportsFractions: true,
-    },
-  )
-
-  for (let [name, namespaces, property] of [
-    ['w', ['--width', '--spacing', '--container'], 'width'],
-    ['min-w', ['--min-width', '--spacing', '--container'], 'min-width'],
-    ['max-w', ['--max-width', '--spacing', '--container'], 'max-width'],
-    ['h', ['--height', '--spacing'], 'height'],
-    ['min-h', ['--min-height', '--height', '--spacing'], 'min-height'],
-    ['max-h', ['--max-height', '--height', '--spacing'], 'max-height'],
-  ] as [string, ThemeKey[], string][]) {
-    spacingUtility(name, namespaces, (value) => [decl(property, value)], {
-      supportsFractions: true,
-    })
   }
+  functionalUtility('size', {
+    supportsFractions: true,
+    themeKeys: ['--size', '--spacing'],
+    handle: (value) => [decl('--tw-sort', 'size'), decl('width', value), decl('height', value)],
+  })
 
   /**
-   * @css `inline-size`
-   * @css `min-inline-size`
-   * @css `max-inline-size`
-   * @css `block-size`
-   * @css `min-block-size`
-   * @css `max-block-size`
+   * @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(`inline-${key}`, [['inline-size', value]])
-    staticUtility(`block-${key}`, [['block-size', value]])
-    staticUtility(`min-inline-${key}`, [['min-inline-size', value]])
-    staticUtility(`min-block-${key}`, [['min-block-size', value]])
-    staticUtility(`max-inline-${key}`, [['max-inline-size', value]])
-    staticUtility(`max-block-${key}`, [['max-block-size', value]])
+    staticUtility(`min-w-${key}`, [['min-width', value]])
   }
+  functionalUtility('min-w', {
+    themeKeys: ['--min-width', '--width', '--spacing'],
+    handle: (value) => [decl('min-width', value)],
+  })
 
-  // inline-size viewport units (like width)
+  /**
+   * @css `max-width`
+   */
   for (let [key, value] of [
-    ['svw', '100svw'],
-    ['lvw', '100lvw'],
-    ['dvw', '100dvw'],
+    ['none', 'none'],
+    ['full', '100%'],
+    ['min', 'min-content'],
+    ['max', 'max-content'],
+    ['fit', 'fit-content'],
   ]) {
-    staticUtility(`inline-${key}`, [['inline-size', value]])
-    staticUtility(`min-inline-${key}`, [['min-inline-size', value]])
-    staticUtility(`max-inline-${key}`, [['max-inline-size', value]])
+    staticUtility(`max-w-${key}`, [['max-width', value]])
   }
+  functionalUtility('max-w', {
+    themeKeys: ['--max-width', '--width', '--spacing'],
+    handle: (value) => [decl('max-width', value)],
+  })
 
-  // block-size viewport units (like height)
+  /**
+   * @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(`block-${key}`, [['block-size', value]])
-    staticUtility(`min-block-${key}`, [['min-block-size', value]])
-    staticUtility(`max-block-${key}`, [['max-block-size', value]])
+    staticUtility(`h-${key}`, [['height', value]])
   }
+  functionalUtility('h', {
+    supportsFractions: true,
+    themeKeys: ['--height', '--spacing'],
+    handle: (value) => [decl('height', value)],
+  })
 
-  staticUtility(`inline-auto`, [['inline-size', 'auto']])
-  staticUtility(`block-auto`, [['block-size', 'auto']])
-  staticUtility(`min-inline-auto`, [['min-inline-size', 'auto']])
-  staticUtility(`min-block-auto`, [['min-block-size', 'auto']])
-
-  staticUtility(`block-lh`, [['block-size', '1lh']])
-  staticUtility(`min-block-lh`, [['min-block-size', '1lh']])
-  staticUtility(`max-block-lh`, [['max-block-size', '1lh']])
-
-  staticUtility(`inline-screen`, [['inline-size', '100vw']])
-  staticUtility(`min-inline-screen`, [['min-inline-size', '100vw']])
-  staticUtility(`max-inline-screen`, [['max-inline-size', '100vw']])
-  staticUtility(`block-screen`, [['block-size', '100vh']])
-  staticUtility(`min-block-screen`, [['min-block-size', '100vh']])
-  staticUtility(`max-block-screen`, [['max-block-size', '100vh']])
-
-  staticUtility(`max-inline-none`, [['max-inline-size', 'none']])
-  staticUtility(`max-block-none`, [['max-block-size', 'none']])
-
-  for (let [name, namespaces, property] of [
-    ['inline', ['--spacing', '--container'], 'inline-size'],
-    ['min-inline', ['--spacing', '--container'], 'min-inline-size'],
-    ['max-inline', ['--spacing', '--container'], 'max-inline-size'],
-    ['block', ['--spacing'], 'block-size'],
-    ['min-block', ['--spacing'], 'min-block-size'],
-    ['max-block', ['--spacing'], 'max-block-size'],
-  ] as [string, ThemeKey[], string][]) {
-    spacingUtility(name, namespaces, (value) => [decl(property, value)], {
-      supportsFractions: true,
-    })
+  /**
+   * @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]])
   }
+  functionalUtility('min-h', {
+    themeKeys: ['--min-height', '--spacing'],
+    handle: (value) => [decl('min-height', value)],
+  })
 
-  utilities.static('container', () => {
-    let breakpoints = [...theme.namespace('--breakpoint').values()]
-    breakpoints.sort((a, z) => compareBreakpoints(a, z, 'asc'))
-
-    let decls: AstNode[] = [decl('--tw-sort', '--tw-container-component'), decl('width', '100%')]
-    for (let breakpoint of breakpoints) {
-      decls.push(atRule('@media', `(width >= ${breakpoint})`, [decl('max-width', breakpoint)]))
-    }
-
-    return decls
+  /**
+   * @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]])
+  }
+  functionalUtility('max-h', {
+    themeKeys: ['--max-height', '--spacing'],
+    handle: (value) => [decl('max-height', value)],
   })
 
   /**
@@ -1186,39 +1001,30 @@ export function createUtilities(theme: Theme) {
   // generate `flex: 1`. Our `functionalUtility` helper can't handle two properties
   // using the same namespace, so we handle this one manually.
   utilities.functional('flex', (candidate) => {
-    if (!candidate.value) return
+    if (candidate.negative) return
+
+    if (!candidate.value) {
+      return [decl('display', 'flex')]
+    }
 
     if (candidate.value.kind === 'arbitrary') {
-      if (candidate.modifier) return
       return [decl('flex', candidate.value.value)]
     }
 
     if (candidate.value.fraction) {
-      let [lhs, rhs] = segment(candidate.value.fraction, '/')
-      if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) return
       return [decl('flex', `calc(${candidate.value.fraction} * 100%)`)]
     }
 
-    if (isPositiveInteger(candidate.value.value)) {
-      if (candidate.modifier) return
-      return [decl('flex', candidate.value.value)]
-    }
+    return [decl('flex', candidate.value.value)]
   })
 
-  suggest('flex', () => [
-    { supportsFractions: true },
-    { values: Array.from({ length: 12 }, (_, i) => `${i + 1}`) },
-  ])
-
   /**
    * @css `flex-shrink`
    */
   functionalUtility('shrink', {
     defaultValue: '1',
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    themeKeys: [],
+    handleBareValue: ({ value }) => value,
     handle: (value) => [decl('flex-shrink', value)],
   })
 
@@ -1227,10 +1033,8 @@ export function createUtilities(theme: Theme) {
    */
   functionalUtility('grow', {
     defaultValue: '1',
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    themeKeys: [],
+    handleBareValue: ({ value }) => value,
     handle: (value) => [decl('flex-grow', value)],
   })
 
@@ -1255,14 +1059,11 @@ export function createUtilities(theme: Theme) {
    */
   staticUtility('basis-auto', [['flex-basis', 'auto']])
   staticUtility('basis-full', [['flex-basis', '100%']])
-  spacingUtility(
-    'basis',
-    ['--flex-basis', '--spacing', '--container'],
-    (value) => [decl('flex-basis', value)],
-    {
-      supportsFractions: true,
-    },
-  )
+  functionalUtility('basis', {
+    supportsFractions: true,
+    themeKeys: ['--flex-basis', '--width', '--spacing'],
+    handle: (value) => [decl('flex-basis', value)],
+  })
 
   /**
    * @css `table-layout`
@@ -1291,272 +1092,143 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `border-spacing`
    */
-  spacingUtility('border-spacing', ['--border-spacing', '--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)'),
-  ])
+  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-x', ['--border-spacing', '--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-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-y', ['--border-spacing', '--spacing'], (value) => [
-    borderSpacingProperties(),
-    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-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)'),
+    ],
+  })
 
   /**
    * @css `transform-origin`
    */
+  staticUtility('origin-center', [['transform-origin', 'center']])
+  staticUtility('origin-top', [['transform-origin', 'top']])
+  staticUtility('origin-top-right', [['transform-origin', 'top right']])
+  staticUtility('origin-right', [['transform-origin', 'right']])
+  staticUtility('origin-bottom-right', [['transform-origin', 'bottom right']])
+  staticUtility('origin-bottom', [['transform-origin', 'bottom']])
+  staticUtility('origin-bottom-left', [['transform-origin', 'bottom left']])
+  staticUtility('origin-left', [['transform-origin', 'left']])
+  staticUtility('origin-top-left', [['transform-origin', 'top left']])
   functionalUtility('origin', {
     themeKeys: ['--transform-origin'],
     handle: (value) => [decl('transform-origin', value)],
-    staticValues: {
-      center: [decl('transform-origin', 'center')],
-      top: [decl('transform-origin', 'top')],
-      'top-right': [decl('transform-origin', '100% 0')],
-      right: [decl('transform-origin', '100%')],
-      'bottom-right': [decl('transform-origin', '100% 100%')],
-      bottom: [decl('transform-origin', 'bottom')],
-      'bottom-left': [decl('transform-origin', '0 100%')],
-      left: [decl('transform-origin', '0')],
-      'top-left': [decl('transform-origin', '0 0')],
-    },
-  })
-
-  functionalUtility('perspective-origin', {
-    themeKeys: ['--perspective-origin'],
-    handle: (value) => [decl('perspective-origin', value)],
-    staticValues: {
-      center: [decl('perspective-origin', 'center')],
-      top: [decl('perspective-origin', 'top')],
-      'top-right': [decl('perspective-origin', '100% 0')],
-      right: [decl('perspective-origin', '100%')],
-      'bottom-right': [decl('perspective-origin', '100% 100%')],
-      bottom: [decl('perspective-origin', 'bottom')],
-      'bottom-left': [decl('perspective-origin', '0 100%')],
-      left: [decl('perspective-origin', '0')],
-      'top-left': [decl('perspective-origin', '0 0')],
-    },
-  })
-
-  /**
-   * @css `perspective`
-   */
-  functionalUtility('perspective', {
-    themeKeys: ['--perspective'],
-    handle: (value) => [decl('perspective', value)],
-    staticValues: {
-      none: [decl('perspective', 'none')],
-    },
   })
 
   let translateProperties = () =>
     atRoot([
-      property('--tw-translate-x', '0'),
-      property('--tw-translate-y', '0'),
-      property('--tw-translate-z', '0'),
+      property('--tw-translate-x', '0', '<length-percentage>'),
+      property('--tw-translate-y', '0', '<length-percentage>'),
     ])
 
   /**
    * @css `translate`
    */
-  staticUtility('translate-none', [['translate', 'none']])
-  staticUtility('-translate-full', [
-    translateProperties,
-    ['--tw-translate-x', '-100%'],
-    ['--tw-translate-y', '-100%'],
-    ['translate', 'var(--tw-translate-x) var(--tw-translate-y)'],
-  ])
-  staticUtility('translate-full', [
-    translateProperties,
-    ['--tw-translate-x', '100%'],
-    ['--tw-translate-y', '100%'],
-    ['translate', 'var(--tw-translate-x) var(--tw-translate-y)'],
-  ])
+  utilities.static('translate-full', (candidate) => {
+    let value = candidate.negative ? '-100%' : '100%'
 
-  spacingUtility(
-    'translate',
-    ['--translate', '--spacing'],
-    (value) => [
+    return [
+      translateProperties(),
+      decl('--tw-translate-x', value),
+      decl('--tw-translate-y', value),
+      decl('translate', 'var(--tw-translate-x) var(--tw-translate-y)'),
+    ]
+  })
+  functionalUtility('translate', {
+    supportsNegative: true,
+    supportsFractions: true,
+    themeKeys: ['--translate', '--spacing'],
+    handle: (value) => [
       translateProperties(),
       decl('--tw-translate-x', value),
       decl('--tw-translate-y', value),
       decl('translate', 'var(--tw-translate-x) var(--tw-translate-y)'),
     ],
-    { supportsNegative: true, supportsFractions: true },
-  )
+  })
 
-  for (let axis of ['x', 'y']) {
-    staticUtility(`-translate-${axis}-full`, [
-      translateProperties,
-      [`--tw-translate-${axis}`, '-100%'],
-      ['translate', `var(--tw-translate-x) var(--tw-translate-y)`],
-    ])
-    staticUtility(`translate-${axis}-full`, [
-      translateProperties,
-      [`--tw-translate-${axis}`, '100%'],
-      ['translate', `var(--tw-translate-x) var(--tw-translate-y)`],
-    ])
-    spacingUtility(
-      `translate-${axis}`,
-      ['--translate', '--spacing'],
-      (value) => [
-        translateProperties(),
-        decl(`--tw-translate-${axis}`, value),
-        decl('translate', `var(--tw-translate-x) var(--tw-translate-y)`),
-      ],
-      {
-        supportsNegative: true,
-        supportsFractions: true,
-      },
-    )
-  }
+  /**
+   * @css `translate`
+   */
+  utilities.static('translate-x-full', (candidate) => {
+    let value = candidate.negative ? '-100%' : '100%'
 
-  spacingUtility(
-    `translate-z`,
-    ['--translate', '--spacing'],
-    (value) => [
+    return [
       translateProperties(),
-      decl(`--tw-translate-z`, value),
-      decl('translate', 'var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z)'),
+      decl('--tw-translate-x', value),
+      decl('translate', 'var(--tw-translate-x) var(--tw-translate-y)'),
+    ]
+  })
+  functionalUtility('translate-x', {
+    supportsNegative: true,
+    supportsFractions: true,
+    themeKeys: ['--translate', '--spacing'],
+    handle: (value) => [
+      translateProperties(),
+      decl('--tw-translate-x', value),
+      decl('translate', 'var(--tw-translate-x) var(--tw-translate-y)'),
     ],
-    {
-      supportsNegative: true,
-    },
-  )
-
-  staticUtility('translate-3d', [
-    translateProperties,
-    ['translate', 'var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z)'],
-  ])
-
-  let scaleProperties = () =>
-    atRoot([
-      property('--tw-scale-x', '1'),
-      property('--tw-scale-y', '1'),
-      property('--tw-scale-z', '1'),
-    ])
+  })
 
   /**
-   * @css `scale`
+   * @css `translate`
    */
-  staticUtility('scale-none', [['scale', 'none']])
-  function handleScale({ negative }: { negative: boolean }) {
-    return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-      if (!candidate.value || candidate.modifier) return
+  utilities.static('translate-y-full', (candidate) => {
+    let value = candidate.negative ? '-100%' : '100%'
 
-      let value
-      if (candidate.value.kind === 'arbitrary') {
-        value = candidate.value.value
-        value = negative ? `calc(${value} * -1)` : value
-        return [decl('scale', value)]
-      } else {
-        value = theme.resolve(candidate.value.value, ['--scale'])
-        if (!value && isPositiveInteger(candidate.value.value)) {
-          value = `${candidate.value.value}%`
-        }
-        if (!value) return
-      }
-      value = negative ? `calc(${value} * -1)` : value
-      return [
-        scaleProperties(),
-        decl('--tw-scale-x', value),
-        decl('--tw-scale-y', value),
-        decl('--tw-scale-z', value),
-        decl('scale', `var(--tw-scale-x) var(--tw-scale-y)`),
-      ]
-    }
-  }
-  utilities.functional('-scale', handleScale({ negative: true }))
-  utilities.functional('scale', handleScale({ negative: false }))
-
-  suggest('scale', () => [
-    {
-      supportsNegative: true,
-      values: ['0', '50', '75', '90', '95', '100', '105', '110', '125', '150', '200'],
-      valueThemeKeys: ['--scale'],
-    },
-  ])
-
-  for (let axis of ['x', 'y', 'z']) {
-    /**
-     * @css `scale`
-     */
-    functionalUtility(`scale-${axis}`, {
-      supportsNegative: true,
-      themeKeys: ['--scale'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
-      handle: (value) => [
-        scaleProperties(),
-        decl(`--tw-scale-${axis}`, value),
-        decl(
-          'scale',
-          `var(--tw-scale-x) var(--tw-scale-y)${axis === 'z' ? ' var(--tw-scale-z)' : ''}`,
-        ),
-      ],
-    })
-
-    suggest(`scale-${axis}`, () => [
-      {
-        supportsNegative: true,
-        values: ['0', '50', '75', '90', '95', '100', '105', '110', '125', '150', '200'],
-        valueThemeKeys: ['--scale'],
-      },
-    ])
-  }
-
-  /**
-   * @css `scale`
-   */
-  staticUtility('scale-3d', [
-    scaleProperties,
-    ['scale', 'var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z)'],
-  ])
+    return [
+      translateProperties(),
+      decl('--tw-translate-y', value),
+      decl('translate', 'var(--tw-translate-x) var(--tw-translate-y)'),
+    ]
+  })
+  functionalUtility('translate-y', {
+    supportsNegative: true,
+    supportsFractions: true,
+    themeKeys: ['--translate', '--spacing'],
+    handle: (value) => [
+      translateProperties(),
+      decl('--tw-translate-y', value),
+      decl('translate', 'var(--tw-translate-x) var(--tw-translate-y)'),
+    ],
+  })
 
   /**
    * @css `rotate`
-   *
-   * `rotate-45` => `rotate: 45deg`
-   * `rotate-[x_45deg]` => `rotate: x 45deg`
-   * `rotate-[1_2_3_45deg]` => `rotate: 1 2 3 45deg`
    */
-  staticUtility('rotate-none', [['rotate', 'none']])
-
-  function handleRotate({ negative }: { negative: boolean }) {
-    return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-      if (!candidate.value || candidate.modifier) return
-
-      let value
-      if (candidate.value.kind === 'arbitrary') {
-        value = candidate.value.value
-        let type = candidate.value.dataType ?? inferDataType(value, ['angle', 'vector'])
-        if (type === 'vector') {
-          return [decl('rotate', `${value} var(--tw-rotate)`)]
-        } else if (type !== 'angle') {
-          return [decl('rotate', negative ? `calc(${value} * -1)` : value)]
-        }
-      } else {
-        value = theme.resolve(candidate.value.value, ['--rotate'])
-        if (!value && isPositiveInteger(candidate.value.value)) {
-          value = `${candidate.value.value}deg`
-        }
-        if (!value) return
-      }
-      return [decl('rotate', negative ? `calc(${value} * -1)` : value)]
-    }
-  }
-
-  utilities.functional('-rotate', handleRotate({ negative: true }))
-  utilities.functional('rotate', handleRotate({ negative: false }))
+  functionalUtility('rotate', {
+    supportsNegative: true,
+    themeKeys: ['--rotate'],
+    handleBareValue: ({ value }) => `${value}deg`,
+    handle: (value) => [decl('rotate', value)],
+  })
 
   suggest('rotate', () => [
     {
@@ -1566,190 +1238,168 @@ export function createUtilities(theme: Theme) {
     },
   ])
 
-  {
-    let transformValue = [
-      'var(--tw-rotate-x, )',
-      'var(--tw-rotate-y, )',
-      'var(--tw-rotate-z, )',
-      'var(--tw-skew-x, )',
-      'var(--tw-skew-y, )',
-    ].join(' ')
-
-    let transformProperties = () =>
-      atRoot([
-        property('--tw-rotate-x'),
-        property('--tw-rotate-y'),
-        property('--tw-rotate-z'),
-        property('--tw-skew-x'),
-        property('--tw-skew-y'),
-      ])
-
-    for (let axis of ['x', 'y', 'z']) {
-      functionalUtility(`rotate-${axis}`, {
-        supportsNegative: true,
-        themeKeys: ['--rotate'],
-        handleBareValue: ({ value }) => {
-          if (!isPositiveInteger(value)) return null
-          return `${value}deg`
-        },
-        handle: (value) => [
-          transformProperties(),
-          decl(`--tw-rotate-${axis}`, `rotate${axis.toUpperCase()}(${value})`),
-          decl('transform', transformValue),
-        ],
-      })
-
-      suggest(`rotate-${axis}`, () => [
-        {
-          supportsNegative: true,
-          values: ['0', '1', '2', '3', '6', '12', '45', '90', '180'],
-          valueThemeKeys: ['--rotate'],
-        },
-      ])
-    }
-
-    /**
-     * @css `transform`
-     * @css `skew()`
-     */
-    functionalUtility('skew', {
-      supportsNegative: true,
-      themeKeys: ['--skew'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}deg`
-      },
-      handle: (value) => [
-        transformProperties(),
-        decl('--tw-skew-x', `skewX(${value})`),
-        decl('--tw-skew-y', `skewY(${value})`),
-        decl('transform', transformValue),
-      ],
-    })
-
-    /**
-     * @css `transform`
-     * @css `skew()`
-     */
-    functionalUtility('skew-x', {
-      supportsNegative: true,
-      themeKeys: ['--skew'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}deg`
-      },
-      handle: (value) => [
-        transformProperties(),
-        decl('--tw-skew-x', `skewX(${value})`),
-        decl('transform', transformValue),
-      ],
-    })
-
-    /**
-     * @css `transform`
-     * @css `skew()`
-     */
-    functionalUtility('skew-y', {
-      supportsNegative: true,
-      themeKeys: ['--skew'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}deg`
-      },
-      handle: (value) => [
-        transformProperties(),
-        decl('--tw-skew-y', `skewY(${value})`),
-        decl('transform', transformValue),
-      ],
-    })
-
-    suggest('skew', () => [
-      {
-        supportsNegative: true,
-        values: ['0', '1', '2', '3', '6', '12'],
-        valueThemeKeys: ['--skew'],
-      },
-    ])
-
-    suggest('skew-x', () => [
-      {
-        supportsNegative: true,
-        values: ['0', '1', '2', '3', '6', '12'],
-        valueThemeKeys: ['--skew'],
-      },
-    ])
-
-    suggest('skew-y', () => [
-      {
-        supportsNegative: true,
-        values: ['0', '1', '2', '3', '6', '12'],
-        valueThemeKeys: ['--skew'],
-      },
-    ])
-
-    /**
-     * @css `transform`
-     */
-    utilities.functional('transform', (candidate) => {
-      if (candidate.modifier) return
-
-      let value: string | null = null
-      if (!candidate.value) {
-        value = transformValue
-      } else if (candidate.value.kind === 'arbitrary') {
-        value = candidate.value.value
-      }
-
-      if (value === null) return
-
-      return [transformProperties(), decl('transform', value)]
-    })
-    suggest('transform', () => [
-      {
-        hasDefaultValue: true,
-      },
-    ])
-
-    staticUtility('transform-cpu', [['transform', transformValue]])
-    staticUtility('transform-gpu', [['transform', `translateZ(0) ${transformValue}`]])
-    staticUtility('transform-none', [['transform', 'none']])
-  }
+  let skewProperties = () =>
+    atRoot([property('--tw-skew-x', '0deg', '<angle>'), property('--tw-skew-y', '0deg', '<angle>')])
 
   /**
-   * @css `zoom`
+   * @css `transform`
+   * @css `skew()`
    */
-  functionalUtility('zoom', {
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return `${value}%`
-    },
-    handle: (value) => [decl('zoom', value)],
+  functionalUtility('skew', {
+    supportsNegative: true,
+    themeKeys: ['--skew'],
+    handleBareValue: ({ value }) => `${value}deg`,
+    handle: (value) => [
+      skewProperties(),
+      decl('--tw-skew-x', value),
+      decl('--tw-skew-y', value),
+      decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
+    ],
   })
 
-  suggest('zoom', () => [
-    { values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'] },
+  /**
+   * @css `transform`
+   * @css `skew()`
+   */
+  functionalUtility('skew-x', {
+    supportsNegative: true,
+    themeKeys: ['--skew'],
+    handleBareValue: ({ value }) => `${value}deg`,
+    handle: (value) => [
+      skewProperties(),
+      decl('--tw-skew-x', value),
+      decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
+    ],
+  })
+
+  /**
+   * @css `transform`
+   * @css `skew()`
+   */
+  functionalUtility('skew-y', {
+    supportsNegative: true,
+    themeKeys: ['--skew'],
+    handleBareValue: ({ value }) => `${value}deg`,
+    handle: (value) => [
+      skewProperties(),
+      decl('--tw-skew-y', value),
+      decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
+    ],
+  })
+
+  suggest('skew', () => [
+    {
+      supportsNegative: true,
+      values: ['0', '1', '2', '3', '6', '12'],
+      valueThemeKeys: ['--skew'],
+    },
+  ])
+
+  suggest('skew-x', () => [
+    {
+      supportsNegative: true,
+      values: ['0', '1', '2', '3', '6', '12'],
+      valueThemeKeys: ['--skew'],
+    },
+  ])
+
+  suggest('skew-y', () => [
+    {
+      supportsNegative: true,
+      values: ['0', '1', '2', '3', '6', '12'],
+      valueThemeKeys: ['--skew'],
+    },
+  ])
+
+  let scaleProperties = () =>
+    atRoot([
+      property('--tw-scale-x', '1', '<number> | <percentage>'),
+      property('--tw-scale-y', '1', '<number> | <percentage>'),
+    ])
+
+  /**
+   * @css `scale`
+   */
+  functionalUtility('scale', {
+    supportsNegative: true,
+    themeKeys: ['--scale'],
+    handleBareValue: ({ value }) => `${value}%`,
+    handle: (value) => [
+      scaleProperties(),
+      decl('--tw-scale-x', value),
+      decl('--tw-scale-y', value),
+      decl('scale', 'var(--tw-scale-x) var(--tw-scale-y)'),
+    ],
+  })
+
+  /**
+   * @css `scale`
+   */
+  functionalUtility('scale-x', {
+    supportsNegative: true,
+    themeKeys: ['--scale'],
+    handleBareValue: ({ value }) => `${value}%`,
+    handle: (value) => [
+      scaleProperties(),
+      decl('--tw-scale-x', value),
+      decl('scale', 'var(--tw-scale-x) var(--tw-scale-y)'),
+    ],
+  })
+
+  /**
+   * @css `scale`
+   */
+  functionalUtility('scale-y', {
+    supportsNegative: true,
+    themeKeys: ['--scale'],
+    handleBareValue: ({ value }) => `${value}%`,
+    handle: (value) => [
+      scaleProperties(),
+      decl('--tw-scale-y', value),
+      decl('scale', 'var(--tw-scale-x) var(--tw-scale-y)'),
+    ],
+  })
+
+  suggest('scale', () => [
+    {
+      supportsNegative: true,
+      values: ['0', '50', '75', '90', '95', '100', '105', '110', '125', '150', '200'],
+      valueThemeKeys: ['--scale'],
+    },
+  ])
+
+  suggest('scale-x', () => [
+    {
+      supportsNegative: true,
+      values: ['0', '50', '75', '90', '95', '100', '105', '110', '125', '150', '200'],
+      valueThemeKeys: ['--scale'],
+    },
+  ])
+
+  suggest('scale-y', () => [
+    {
+      supportsNegative: true,
+      values: ['0', '50', '75', '90', '95', '100', '105', '110', '125', '150', '200'],
+      valueThemeKeys: ['--scale'],
+    },
   ])
 
   /**
-   * @css `transform-style`
+   * @css `transform`
    */
-  staticUtility('transform-flat', [['transform-style', 'flat']])
-  staticUtility('transform-3d', [['transform-style', 'preserve-3d']])
+  staticUtility('transform', [
+    skewProperties,
+    ['transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'],
+  ])
 
-  /**
-   * @css `transform-box`
-   */
-  staticUtility('transform-content', [['transform-box', 'content-box']])
-  staticUtility('transform-border', [['transform-box', 'border-box']])
-  staticUtility('transform-fill', [['transform-box', 'fill-box']])
-  staticUtility('transform-stroke', [['transform-box', 'stroke-box']])
-  staticUtility('transform-view', [['transform-box', 'view-box']])
-
-  /**
-   * @css `backface-visibility`
-   */
-  staticUtility('backface-visible', [['backface-visibility', 'visible']])
-  staticUtility('backface-hidden', [['backface-visibility', 'hidden']])
+  staticUtility('transform-cpu', [['transform', 'translate(0,0)']])
+  staticUtility('transform-gpu', [['transform', 'translate(0,0,0)']])
+  staticUtility('transform-none', [
+    ['translate', 'none'],
+    ['rotate', 'none'],
+    ['scale', 'none'],
+    ['transform', 'none'],
+  ])
 
   /**
    * @css `cursor`
@@ -1814,7 +1464,7 @@ export function createUtilities(theme: Theme) {
     staticUtility(`touch-pan-${value}`, [
       touchProperties,
       ['--tw-pan-x', `pan-${value}`],
-      ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
+      ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
     ])
   }
 
@@ -1822,14 +1472,14 @@ export function createUtilities(theme: Theme) {
     staticUtility(`touch-pan-${value}`, [
       touchProperties,
       ['--tw-pan-y', `pan-${value}`],
-      ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
+      ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
     ])
   }
 
   staticUtility('touch-pinch-zoom', [
     touchProperties,
     ['--tw-pinch-zoom', `pinch-zoom`],
-    ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
+    ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
   ])
 
   /**
@@ -1846,9 +1496,9 @@ export function createUtilities(theme: Theme) {
    * @css `resize`
    */
   staticUtility('resize-none', [['resize', 'none']])
+  staticUtility('resize-both', [['resize', 'both']])
   staticUtility('resize-x', [['resize', 'horizontal']])
   staticUtility('resize-y', [['resize', 'vertical']])
-  staticUtility('resize', [['resize', 'both']])
 
   /**
    * @css `scroll-snap-type`
@@ -1876,100 +1526,153 @@ export function createUtilities(theme: Theme) {
   staticUtility('snap-normal', [['scroll-snap-stop', 'normal']])
   staticUtility('snap-always', [['scroll-snap-stop', 'always']])
 
-  /**
-   * @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-mbs', 'scroll-margin-block-start'],
-    ['scroll-mbe', 'scroll-margin-block-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', '--spacing'],
-      (value) => [decl(property, value)],
-      {
-        supportsNegative: true,
-      },
-    )
-  }
+  functionalUtility('scroll-m', {
+    supportsNegative: true,
+    themeKeys: ['--scroll-margin', '--spacing'],
+    handle: (value) => [decl('scroll-margin', 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-pbs', 'scroll-padding-block-start'],
-    ['scroll-pbe', 'scroll-padding-block-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', '--spacing'], (value) => [decl(property, value)])
-  }
+  functionalUtility('scroll-mx', {
+    supportsNegative: true,
+    themeKeys: ['--scroll-margin', '--spacing'],
+    handle: (value) => [decl('scroll-margin-left', value), decl('scroll-margin-right', value)],
+  })
+
+  functionalUtility('scroll-my', {
+    supportsNegative: true,
+    themeKeys: ['--scroll-margin', '--spacing'],
+    handle: (value) => [decl('scroll-margin-top', value), decl('scroll-margin-bottom', 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-left', value), decl('scroll-padding-right', value)],
+  })
+
+  functionalUtility('scroll-py', {
+    supportsNegative: true,
+    themeKeys: ['--scroll-padding', '--spacing'],
+    handle: (value) => [decl('scroll-padding-top', value), decl('scroll-padding-bottom', 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)],
+  })
+
+  functionalUtility('scroll-pl', {
+    supportsNegative: true,
+    themeKeys: ['--scroll-padding', '--spacing'],
+    handle: (value) => [decl('scroll-padding-left', value)],
+  })
 
   staticUtility('list-inside', [['list-style-position', 'inside']])
   staticUtility('list-outside', [['list-style-position', 'outside']])
 
+  /**
+   * @css `list-style-type`
+   */
+  staticUtility('list-none', [['list-style-type', 'none']])
+  staticUtility('list-disc', [['list-style-type', 'disc']])
+  staticUtility('list-decimal', [['list-style-type', 'decimal']])
   functionalUtility('list', {
     themeKeys: ['--list-style-type'],
     handle: (value) => [decl('list-style-type', value)],
-    staticValues: {
-      none: [decl('list-style-type', 'none')],
-      disc: [decl('list-style-type', 'disc')],
-      decimal: [decl('list-style-type', 'decimal')],
-    },
   })
 
   // list-image-*
 
+  staticUtility('list-image-none', [['list-style-image', 'none']])
   functionalUtility('list-image', {
     themeKeys: ['--list-style-image'],
     handle: (value) => [decl('list-style-image', value)],
-    staticValues: {
-      none: [decl('list-style-image', 'none')],
-    },
   })
 
   staticUtility('appearance-none', [['appearance', 'none']])
   staticUtility('appearance-auto', [['appearance', 'auto']])
 
-  staticUtility('scheme-normal', [['color-scheme', 'normal']])
-  staticUtility('scheme-dark', [['color-scheme', 'dark']])
-  staticUtility('scheme-light', [['color-scheme', 'light']])
-  staticUtility('scheme-light-dark', [['color-scheme', 'light dark']])
-  staticUtility('scheme-only-dark', [['color-scheme', 'only dark']])
-  staticUtility('scheme-only-light', [['color-scheme', 'only light']])
+  // columns-*
+  staticUtility('columns-auto', [['columns', 'auto']])
 
   functionalUtility('columns', {
-    themeKeys: ['--columns', '--container'],
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
+    themeKeys: ['--columns', '--width'],
+    handleBareValue: ({ value }) => value,
     handle: (value) => [decl('columns', value)],
-    staticValues: {
-      auto: [decl('columns', 'auto')],
-    },
   })
 
   suggest('columns', () => [
     {
       values: Array.from({ length: 12 }, (_, i) => `${i + 1}`),
-      valueThemeKeys: ['--columns', '--container'],
+      valueThemeKeys: ['--columns', '--width'],
     },
   ])
 
@@ -1991,62 +1694,38 @@ export function createUtilities(theme: Theme) {
   staticUtility('grid-flow-row-dense', [['grid-auto-flow', 'row dense']])
   staticUtility('grid-flow-col-dense', [['grid-auto-flow', 'column dense']])
 
+  staticUtility('auto-cols-auto', [['grid-auto-columns', 'auto']])
+  staticUtility('auto-cols-min', [['grid-auto-columns', 'min-content']])
+  staticUtility('auto-cols-max', [['grid-auto-columns', 'max-content']])
+  staticUtility('auto-cols-fr', [['grid-auto-columns', 'minmax(0, 1fr)']])
   functionalUtility('auto-cols', {
     themeKeys: ['--grid-auto-columns'],
-    handleBareValue: ({ value }) => {
-      if (!theme.resolve(null, ['--spacing'])) return null
-      if (!isValidSpacingMultiplier(value)) return null
-      return `--spacing(${value})`
-    },
     handle: (value) => [decl('grid-auto-columns', value)],
-    staticValues: {
-      auto: [decl('grid-auto-columns', 'auto')],
-      min: [decl('grid-auto-columns', 'min-content')],
-      max: [decl('grid-auto-columns', 'max-content')],
-      fr: [decl('grid-auto-columns', 'minmax(0, 1fr)')],
-    },
   })
 
+  staticUtility('auto-rows-auto', [['grid-auto-rows', 'auto']])
+  staticUtility('auto-rows-min', [['grid-auto-rows', 'min-content']])
+  staticUtility('auto-rows-max', [['grid-auto-rows', 'max-content']])
+  staticUtility('auto-rows-fr', [['grid-auto-rows', 'minmax(0, 1fr)']])
   functionalUtility('auto-rows', {
     themeKeys: ['--grid-auto-rows'],
-    handleBareValue: ({ value }) => {
-      if (!theme.resolve(null, ['--spacing'])) return null
-      if (!isValidSpacingMultiplier(value)) return null
-      return `--spacing(${value})`
-    },
     handle: (value) => [decl('grid-auto-rows', value)],
-    staticValues: {
-      auto: [decl('grid-auto-rows', 'auto')],
-      min: [decl('grid-auto-rows', 'min-content')],
-      max: [decl('grid-auto-rows', 'max-content')],
-      fr: [decl('grid-auto-rows', 'minmax(0, 1fr)')],
-    },
   })
 
+  staticUtility('grid-cols-none', [['grid-template-columns', 'none']])
+  staticUtility('grid-cols-subgrid', [['grid-template-columns', 'subgrid']])
   functionalUtility('grid-cols', {
     themeKeys: ['--grid-template-columns'],
-    handleBareValue: ({ value }) => {
-      if (!isStrictPositiveInteger(value)) return null
-      return `repeat(${value}, minmax(0, 1fr))`
-    },
+    handleBareValue: ({ value }) => `repeat(${value}, minmax(0, 1fr))`,
     handle: (value) => [decl('grid-template-columns', value)],
-    staticValues: {
-      none: [decl('grid-template-columns', 'none')],
-      subgrid: [decl('grid-template-columns', 'subgrid')],
-    },
   })
 
+  staticUtility('grid-rows-none', [['grid-template-rows', 'none']])
+  staticUtility('grid-rows-subgrid', [['grid-template-rows', 'subgrid']])
   functionalUtility('grid-rows', {
     themeKeys: ['--grid-template-rows'],
-    handleBareValue: ({ value }) => {
-      if (!isStrictPositiveInteger(value)) return null
-      return `repeat(${value}, minmax(0, 1fr))`
-    },
+    handleBareValue: ({ value }) => `repeat(${value}, minmax(0, 1fr))`,
     handle: (value) => [decl('grid-template-rows', value)],
-    staticValues: {
-      none: [decl('grid-template-rows', 'none')],
-      subgrid: [decl('grid-template-rows', 'subgrid')],
-    },
   })
 
   suggest('grid-cols', () => [
@@ -2075,19 +1754,15 @@ export function createUtilities(theme: Theme) {
   staticUtility('place-content-center', [['place-content', 'center']])
   staticUtility('place-content-start', [['place-content', 'start']])
   staticUtility('place-content-end', [['place-content', 'end']])
-  staticUtility('place-content-center-safe', [['place-content', 'safe center']])
-  staticUtility('place-content-end-safe', [['place-content', 'safe end']])
-  staticUtility('place-content-between', [['place-content', 'space-between']])
-  staticUtility('place-content-around', [['place-content', 'space-around']])
-  staticUtility('place-content-evenly', [['place-content', 'space-evenly']])
+  staticUtility('place-content-between', [['place-content', 'between']])
+  staticUtility('place-content-around', [['place-content', 'around']])
+  staticUtility('place-content-evenly', [['place-content', 'evenly']])
   staticUtility('place-content-baseline', [['place-content', 'baseline']])
   staticUtility('place-content-stretch', [['place-content', 'stretch']])
 
   staticUtility('place-items-center', [['place-items', 'center']])
   staticUtility('place-items-start', [['place-items', 'start']])
   staticUtility('place-items-end', [['place-items', 'end']])
-  staticUtility('place-items-center-safe', [['place-items', 'safe center']])
-  staticUtility('place-items-end-safe', [['place-items', 'safe end']])
   staticUtility('place-items-baseline', [['place-items', 'baseline']])
   staticUtility('place-items-stretch', [['place-items', 'stretch']])
 
@@ -2095,8 +1770,6 @@ export function createUtilities(theme: Theme) {
   staticUtility('content-center', [['align-content', 'center']])
   staticUtility('content-start', [['align-content', 'flex-start']])
   staticUtility('content-end', [['align-content', 'flex-end']])
-  staticUtility('content-center-safe', [['align-content', 'safe center']])
-  staticUtility('content-end-safe', [['align-content', 'safe flex-end']])
   staticUtility('content-between', [['align-content', 'space-between']])
   staticUtility('content-around', [['align-content', 'space-around']])
   staticUtility('content-evenly', [['align-content', 'space-evenly']])
@@ -2106,18 +1779,13 @@ export function createUtilities(theme: Theme) {
   staticUtility('items-center', [['align-items', 'center']])
   staticUtility('items-start', [['align-items', 'flex-start']])
   staticUtility('items-end', [['align-items', 'flex-end']])
-  staticUtility('items-center-safe', [['align-items', 'safe center']])
-  staticUtility('items-end-safe', [['align-items', 'safe flex-end']])
   staticUtility('items-baseline', [['align-items', 'baseline']])
-  staticUtility('items-baseline-last', [['align-items', 'last baseline']])
   staticUtility('items-stretch', [['align-items', 'stretch']])
 
   staticUtility('justify-normal', [['justify-content', 'normal']])
   staticUtility('justify-center', [['justify-content', 'center']])
   staticUtility('justify-start', [['justify-content', 'flex-start']])
   staticUtility('justify-end', [['justify-content', 'flex-end']])
-  staticUtility('justify-center-safe', [['justify-content', 'safe center']])
-  staticUtility('justify-end-safe', [['justify-content', 'safe flex-end']])
   staticUtility('justify-between', [['justify-content', 'space-between']])
   staticUtility('justify-around', [['justify-content', 'space-around']])
   staticUtility('justify-evenly', [['justify-content', 'space-evenly']])
@@ -2128,98 +1796,69 @@ export function createUtilities(theme: Theme) {
   staticUtility('justify-items-center', [['justify-items', 'center']])
   staticUtility('justify-items-start', [['justify-items', 'start']])
   staticUtility('justify-items-end', [['justify-items', 'end']])
-  staticUtility('justify-items-center-safe', [['justify-items', 'safe center']])
-  staticUtility('justify-items-end-safe', [['justify-items', 'safe end']])
   staticUtility('justify-items-stretch', [['justify-items', 'stretch']])
 
-  spacingUtility('gap', ['--gap', '--spacing'], (value) => [decl('gap', value)])
-  spacingUtility('gap-x', ['--gap', '--spacing'], (value) => [decl('column-gap', value)])
-  spacingUtility('gap-y', ['--gap', '--spacing'], (value) => [decl('row-gap', value)])
+  functionalUtility('gap', {
+    themeKeys: ['--gap', '--spacing'],
+    handle: (value) => [decl('gap', value)],
+  })
 
-  spacingUtility(
-    'space-x',
-    ['--space', '--spacing'],
-    (value) => {
-      let zero = (() => {
-        if (value === '--spacing(0)') return true
-        if (value === '--spacing(-0)') return true
+  functionalUtility('gap-x', {
+    themeKeys: ['--gap', '--spacing'],
+    handle: (value) => [decl('column-gap', value)],
+  })
 
-        let parsed = dimensions.get(value)
-        if (parsed && parsed[0] === 0 && (parsed[1] === null || isLength(value))) {
-          return true
-        }
+  functionalUtility('gap-y', {
+    themeKeys: ['--gap', '--spacing'],
+    handle: (value) => [decl('row-gap', value)],
+  })
 
-        return false
-      })()
+  functionalUtility('space-x', {
+    supportsNegative: true,
+    themeKeys: ['--space', '--spacing'],
+    handle: (value) => [
+      atRoot([property('--tw-space-x-reverse', '0', '<number>')]),
 
-      return [
-        atRoot([property('--tw-space-x-reverse', '0')]),
+      rule(':where(& > :not([hidden]) ~ :not([hidden]))', [
+        decl('--tw-sort', 'row-gap'),
+        decl('margin-inline-end', `calc(${value} * var(--tw-space-x-reverse))`),
+        decl('margin-inline-start', `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`),
+      ]),
+    ],
+  })
 
-        styleRule(':where(& > :not(:last-child))', [
-          decl('--tw-sort', 'row-gap'),
-          decl('--tw-space-x-reverse', '0'),
-          decl('margin-inline-start', zero ? '0' : `calc(${value} * var(--tw-space-x-reverse))`),
-          decl(
-            'margin-inline-end',
-            zero ? '0' : `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
-          ),
-        ]),
-      ]
-    },
-    { supportsNegative: true },
-  )
+  functionalUtility('space-y', {
+    supportsNegative: true,
+    themeKeys: ['--space', '--spacing'],
+    handle: (value) => [
+      atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
 
-  spacingUtility(
-    'space-y',
-    ['--space', '--spacing'],
-    (value) => {
-      let zero = (() => {
-        if (value === '--spacing(0)') return true
-        if (value === '--spacing(-0)') return true
-
-        let parsed = dimensions.get(value)
-        if (parsed && parsed[0] === 0 && (parsed[1] === null || isLength(value))) {
-          return true
-        }
-
-        return false
-      })()
-
-      return [
-        atRoot([property('--tw-space-y-reverse', '0')]),
-        styleRule(':where(& > :not(:last-child))', [
-          decl('--tw-sort', 'column-gap'),
-          decl('--tw-space-y-reverse', '0'),
-          decl('margin-block-start', zero ? '0' : `calc(${value} * var(--tw-space-y-reverse))`),
-          decl(
-            'margin-block-end',
-            zero ? '0' : `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
-          ),
-        ]),
-      ]
-    },
-    { supportsNegative: true },
-  )
+      rule(':where(& > :not([hidden]) ~ :not([hidden]))', [
+        decl('--tw-sort', 'column-gap'),
+        decl('margin-bottom', `calc(${value} * var(--tw-space-y-reverse))`),
+        decl('margin-top', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`),
+      ]),
+    ],
+  })
 
   staticUtility('space-x-reverse', [
-    () => atRoot([property('--tw-space-x-reverse', '0')]),
+    () => atRoot([property('--tw-space-x-reverse', '0', '<number>')]),
     () =>
-      styleRule(':where(& > :not(:last-child))', [
+      rule(':where(& > :not([hidden]) ~ :not([hidden]))', [
         decl('--tw-sort', 'row-gap'),
         decl('--tw-space-x-reverse', '1'),
       ]),
   ])
 
   staticUtility('space-y-reverse', [
-    () => atRoot([property('--tw-space-y-reverse', '0')]),
+    () => atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
     () =>
-      styleRule(':where(& > :not(:last-child))', [
+      rule(':where(& > :not([hidden]) ~ :not([hidden]))', [
         decl('--tw-sort', 'column-gap'),
         decl('--tw-space-y-reverse', '1'),
       ]),
   ])
 
-  staticUtility('accent-auto', [['accent-color', 'auto']])
   colorUtility('accent', {
     themeKeys: ['--accent-color', '--color'],
     handle: (value) => [decl('accent-color', value)],
@@ -2231,9 +1870,9 @@ export function createUtilities(theme: Theme) {
   })
 
   colorUtility('divide', {
-    themeKeys: ['--divide-color', '--border-color', '--color'],
+    themeKeys: ['--divide-color', '--color'],
     handle: (value) => [
-      styleRule(':where(& > :not(:last-child))', [
+      rule(':where(& > :not([hidden]) ~ :not([hidden]))', [
         decl('--tw-sort', 'divide-color'),
         decl('border-color', value),
       ]),
@@ -2244,26 +1883,19 @@ export function createUtilities(theme: Theme) {
   staticUtility('place-self-start', [['place-self', 'start']])
   staticUtility('place-self-end', [['place-self', 'end']])
   staticUtility('place-self-center', [['place-self', 'center']])
-  staticUtility('place-self-end-safe', [['place-self', 'safe end']])
-  staticUtility('place-self-center-safe', [['place-self', 'safe center']])
   staticUtility('place-self-stretch', [['place-self', 'stretch']])
 
   staticUtility('self-auto', [['align-self', 'auto']])
   staticUtility('self-start', [['align-self', 'flex-start']])
   staticUtility('self-end', [['align-self', 'flex-end']])
   staticUtility('self-center', [['align-self', 'center']])
-  staticUtility('self-end-safe', [['align-self', 'safe flex-end']])
-  staticUtility('self-center-safe', [['align-self', 'safe center']])
   staticUtility('self-stretch', [['align-self', 'stretch']])
   staticUtility('self-baseline', [['align-self', 'baseline']])
-  staticUtility('self-baseline-last', [['align-self', 'last baseline']])
 
   staticUtility('justify-self-auto', [['justify-self', 'auto']])
   staticUtility('justify-self-start', [['justify-self', 'flex-start']])
   staticUtility('justify-self-end', [['justify-self', 'flex-end']])
   staticUtility('justify-self-center', [['justify-self', 'center']])
-  staticUtility('justify-self-end-safe', [['justify-self', 'safe flex-end']])
-  staticUtility('justify-self-center-safe', [['justify-self', 'safe center']])
   staticUtility('justify-self-stretch', [['justify-self', 'stretch']])
 
   for (let value of ['auto', 'hidden', 'clip', 'visible', 'scroll']) {
@@ -2281,41 +1913,6 @@ export function createUtilities(theme: Theme) {
   staticUtility('scroll-auto', [['scroll-behavior', 'auto']])
   staticUtility('scroll-smooth', [['scroll-behavior', 'smooth']])
 
-  staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']])
-  staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']])
-  staticUtility('scrollbar-none', [['scrollbar-width', 'none']])
-
-  {
-    let scrollbarColorProperties = () => {
-      return atRoot([
-        property('--tw-scrollbar-thumb', '#0000', '<color>'),
-        property('--tw-scrollbar-track', '#0000', '<color>'),
-      ])
-    }
-
-    colorUtility('scrollbar-thumb', {
-      themeKeys: ['--color'],
-      handle: (value) => [
-        scrollbarColorProperties(),
-        decl('--tw-scrollbar-thumb', value),
-        decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
-      ],
-    })
-
-    colorUtility('scrollbar-track', {
-      themeKeys: ['--color'],
-      handle: (value) => [
-        scrollbarColorProperties(),
-        decl('--tw-scrollbar-track', value),
-        decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
-      ],
-    })
-  }
-
-  staticUtility('scrollbar-gutter-auto', [['scrollbar-gutter', 'auto']])
-  staticUtility('scrollbar-gutter-stable', [['scrollbar-gutter', 'stable']])
-  staticUtility('scrollbar-gutter-both', [['scrollbar-gutter', 'stable both-edges']])
-
   staticUtility('truncate', [
     ['overflow', 'hidden'],
     ['text-overflow', 'ellipsis'],
@@ -2345,16 +1942,6 @@ export function createUtilities(theme: Theme) {
   staticUtility('whitespace-pre-wrap', [['white-space', 'pre-wrap']])
   staticUtility('whitespace-break-spaces', [['white-space', 'break-spaces']])
 
-  functionalUtility('tab', {
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return value
-    },
-    handle: (value) => [decl('tab-size', value)],
-  })
-
-  suggest('tab', () => [{ values: ['2', '4', '8'] }])
-
   staticUtility('text-wrap', [['text-wrap', 'wrap']])
   staticUtility('text-nowrap', [['text-wrap', 'nowrap']])
   staticUtility('text-balance', [['text-wrap', 'balance']])
@@ -2363,12 +1950,9 @@ export function createUtilities(theme: Theme) {
     ['overflow-wrap', 'normal'],
     ['word-break', 'normal'],
   ])
+  staticUtility('break-words', [['overflow-wrap', 'break-word']])
   staticUtility('break-all', [['word-break', 'break-all']])
-  staticUtility('break-keep', [['word-break', 'keep-all']])
-
-  staticUtility('wrap-anywhere', [['overflow-wrap', 'anywhere']])
-  staticUtility('wrap-break-word', [['overflow-wrap', 'break-word']])
-  staticUtility('wrap-normal', [['overflow-wrap', 'normal']])
+  staticUtility('break-keep', [['word-break', 'break-keep']])
 
   {
     // border-radius
@@ -2389,13 +1973,17 @@ export function createUtilities(theme: Theme) {
       ['rounded-br', ['border-bottom-right-radius']],
       ['rounded-bl', ['border-bottom-left-radius']],
     ] as const) {
+      staticUtility(
+        `${root}-none`,
+        properties.map((property) => [property, '0']),
+      )
+      staticUtility(
+        `${root}-full`,
+        properties.map((property) => [property, 'calc(infinity * 1px)']),
+      )
       functionalUtility(root, {
         themeKeys: ['--radius'],
         handle: (value) => properties.map((property) => decl(property, value)),
-        staticValues: {
-          none: properties.map((property) => decl(property, '0')),
-          full: properties.map((property) => decl(property, 'calc(infinity * 1px)')),
-        },
       })
     }
   }
@@ -2433,13 +2021,14 @@ export function createUtilities(theme: Theme) {
     }
 
     let borderProperties = () => {
-      return atRoot([property('--tw-border-style', 'solid')])
+      return atRoot([property('--tw-border-style', 'solid', '<custom-ident>')])
     }
 
     function borderSideUtility(classRoot: string, desc: BorderDescription) {
       utilities.functional(classRoot, (candidate) => {
+        if (candidate.negative) return
+
         if (!candidate.value) {
-          if (candidate.modifier) return
           let value = theme.get(['--default-border-width']) ?? '1px'
           let decls = desc.width(value)
           if (!decls) return
@@ -2454,7 +2043,6 @@ export function createUtilities(theme: Theme) {
           switch (type) {
             case 'line-width':
             case 'length': {
-              if (candidate.modifier) return
               let decls = desc.width(value)
               if (!decls) return
               return [borderProperties(), ...decls]
@@ -2478,7 +2066,6 @@ export function createUtilities(theme: Theme) {
 
         // `border-width` property
         {
-          if (candidate.modifier) return
           let value = theme.resolve(candidate.value.value, ['--border-width'])
           if (value) {
             let decls = desc.width(value)
@@ -2486,7 +2073,7 @@ export function createUtilities(theme: Theme) {
             return [borderProperties(), ...decls]
           }
 
-          if (isPositiveInteger(candidate.value.value)) {
+          if (!Number.isNaN(Number(candidate.value.value))) {
             let decls = desc.width(`${candidate.value.value}px`)
             if (!decls) return
             return [borderProperties(), ...decls]
@@ -2496,14 +2083,14 @@ export function createUtilities(theme: Theme) {
 
       suggest(classRoot, () => [
         {
-          values: ['current', 'inherit', 'transparent'],
+          values: ['current', 'transparent'],
           valueThemeKeys: ['--border-color', '--color'],
-          modifierThemeKeys: ['--opacity'],
           modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+          modifierThemeKeys: ['--opacity'],
           hasDefaultValue: true,
         },
         {
-          values: ['0', '2', '4', '8'],
+          values: [],
           valueThemeKeys: ['--border-width'],
         },
       ])
@@ -2519,18 +2106,22 @@ export function createUtilities(theme: Theme) {
 
     borderSideUtility('border-x', {
       width: (value) => [
-        decl('border-inline-style', 'var(--tw-border-style)'),
-        decl('border-inline-width', value),
+        decl('border-left-style', 'var(--tw-border-style)'),
+        decl('border-right-style', 'var(--tw-border-style)'),
+        decl('border-left-width', value),
+        decl('border-right-width', value),
       ],
-      color: (value) => [decl('border-inline-color', value)],
+      color: (value) => [decl('border-left-color', value), decl('border-right-color', value)],
     })
 
     borderSideUtility('border-y', {
       width: (value) => [
-        decl('border-block-style', 'var(--tw-border-style)'),
-        decl('border-block-width', value),
+        decl('border-top-style', 'var(--tw-border-style)'),
+        decl('border-bottom-style', 'var(--tw-border-style)'),
+        decl('border-top-width', value),
+        decl('border-bottom-width', value),
       ],
-      color: (value) => [decl('border-block-color', value)],
+      color: (value) => [decl('border-top-color', value), decl('border-bottom-color', value)],
     })
 
     borderSideUtility('border-s', {
@@ -2549,22 +2140,6 @@ export function createUtilities(theme: Theme) {
       color: (value) => [decl('border-inline-end-color', value)],
     })
 
-    borderSideUtility('border-bs', {
-      width: (value) => [
-        decl('border-block-start-style', 'var(--tw-border-style)'),
-        decl('border-block-start-width', value),
-      ],
-      color: (value) => [decl('border-block-start-color', value)],
-    })
-
-    borderSideUtility('border-be', {
-      width: (value) => [
-        decl('border-block-end-style', 'var(--tw-border-style)'),
-        decl('border-block-end-width', value),
-      ],
-      color: (value) => [decl('border-block-end-color', value)],
-    })
-
     borderSideUtility('border-t', {
       width: (value) => [
         decl('border-top-style', 'var(--tw-border-style)'),
@@ -2600,20 +2175,19 @@ export function createUtilities(theme: Theme) {
     functionalUtility('divide-x', {
       defaultValue: theme.get(['--default-border-width']) ?? '1px',
       themeKeys: ['--divide-width', '--border-width'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}px`
-      },
+      handleBareValue: ({ value }) => `${value}px`,
       handle: (value) => [
-        atRoot([property('--tw-divide-x-reverse', '0')]),
+        atRoot([property('--tw-divide-x-reverse', '0', '<number>')]),
 
-        styleRule(':where(& > :not(:last-child))', [
+        rule(':where(& > :not([hidden]) ~ :not([hidden]))', [
           decl('--tw-sort', 'divide-x-width'),
           borderProperties(),
-          decl('--tw-divide-x-reverse', '0'),
           decl('border-inline-style', 'var(--tw-border-style)'),
-          decl('border-inline-start-width', `calc(${value} * var(--tw-divide-x-reverse))`),
-          decl('border-inline-end-width', `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`),
+          decl('border-inline-end-width', `calc(${value} * var(--tw-divide-x-reverse))`),
+          decl(
+            'border-inline-start-width',
+            `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
+          ),
         ]),
       ],
     })
@@ -2621,21 +2195,17 @@ export function createUtilities(theme: Theme) {
     functionalUtility('divide-y', {
       defaultValue: theme.get(['--default-border-width']) ?? '1px',
       themeKeys: ['--divide-width', '--border-width'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}px`
-      },
+      handleBareValue: ({ value }) => `${value}px`,
       handle: (value) => [
-        atRoot([property('--tw-divide-y-reverse', '0')]),
+        atRoot([property('--tw-divide-y-reverse', '0', '<number>')]),
 
-        styleRule(':where(& > :not(:last-child))', [
+        rule(':where(& > :not([hidden]) ~ :not([hidden]))', [
           decl('--tw-sort', 'divide-y-width'),
           borderProperties(),
-          decl('--tw-divide-y-reverse', '0'),
-          decl('border-bottom-style', 'var(--tw-border-style)'),
           decl('border-top-style', 'var(--tw-border-style)'),
-          decl('border-top-width', `calc(${value} * var(--tw-divide-y-reverse))`),
-          decl('border-bottom-width', `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`),
+          decl('border-bottom-style', 'var(--tw-border-style)'),
+          decl('border-bottom-width', `calc(${value} * var(--tw-divide-y-reverse))`),
+          decl('border-top-width', `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`),
         ]),
       ],
     })
@@ -2657,19 +2227,21 @@ export function createUtilities(theme: Theme) {
     ])
 
     staticUtility('divide-x-reverse', [
-      () => atRoot([property('--tw-divide-x-reverse', '0')]),
-      () => styleRule(':where(& > :not(:last-child))', [decl('--tw-divide-x-reverse', '1')]),
+      () => atRoot([property('--tw-divide-x-reverse', '0', '<number>')]),
+      () =>
+        rule(':where(& > :not([hidden]) ~ :not([hidden]))', [decl('--tw-divide-x-reverse', '1')]),
     ])
 
     staticUtility('divide-y-reverse', [
-      () => atRoot([property('--tw-divide-y-reverse', '0')]),
-      () => styleRule(':where(& > :not(:last-child))', [decl('--tw-divide-y-reverse', '1')]),
+      () => atRoot([property('--tw-divide-y-reverse', '0', '<number>')]),
+      () =>
+        rule(':where(& > :not([hidden]) ~ :not([hidden]))', [decl('--tw-divide-y-reverse', '1')]),
     ])
 
     for (let value of ['solid', 'dashed', 'dotted', 'double', 'none']) {
       staticUtility(`divide-${value}`, [
         () =>
-          styleRule(':where(& > :not(:last-child))', [
+          rule(':where(& > :not([hidden]) ~ :not([hidden]))', [
             decl('--tw-sort', 'divide-style'),
             decl('--tw-border-style', value),
             decl('border-style', value),
@@ -2678,233 +2250,53 @@ export function createUtilities(theme: Theme) {
     }
   }
 
+  staticUtility('bg-inherit', [['background-color', 'inherit']])
+  staticUtility('bg-transparent', [['background-color', 'transparent']])
+
   staticUtility('bg-auto', [['background-size', 'auto']])
   staticUtility('bg-cover', [['background-size', 'cover']])
   staticUtility('bg-contain', [['background-size', 'contain']])
-  functionalUtility('bg-size', {
-    handle(value) {
-      if (!value) return
-      return [decl('background-size', value)]
-    },
-  })
 
   staticUtility('bg-fixed', [['background-attachment', 'fixed']])
   staticUtility('bg-local', [['background-attachment', 'local']])
   staticUtility('bg-scroll', [['background-attachment', 'scroll']])
 
-  staticUtility('bg-top', [['background-position', 'top']])
-  staticUtility('bg-top-left', [['background-position', 'left top']])
-  staticUtility('bg-top-right', [['background-position', 'right top']])
-  staticUtility('bg-bottom', [['background-position', 'bottom']])
-  staticUtility('bg-bottom-left', [['background-position', 'left bottom']])
-  staticUtility('bg-bottom-right', [['background-position', 'right bottom']])
-  staticUtility('bg-left', [['background-position', 'left']])
-  staticUtility('bg-right', [['background-position', 'right']])
   staticUtility('bg-center', [['background-position', 'center']])
-  functionalUtility('bg-position', {
-    handle(value) {
-      if (!value) return
-      return [decl('background-position', value)]
-    },
-  })
+  staticUtility('bg-top', [['background-position', 'top']])
+  staticUtility('bg-right-top', [['background-position', 'right-top']])
+  staticUtility('bg-right', [['background-position', 'right']])
+  staticUtility('bg-right-bottom', [['background-position', 'right-bottom']])
+  staticUtility('bg-bottom', [['background-position', 'bottom']])
+  staticUtility('bg-left-bottom', [['background-position', 'left-bottom']])
+  staticUtility('bg-left', [['background-position', 'left']])
+  staticUtility('bg-left-top', [['background-position', 'left-top']])
 
   staticUtility('bg-repeat', [['background-repeat', 'repeat']])
   staticUtility('bg-no-repeat', [['background-repeat', 'no-repeat']])
   staticUtility('bg-repeat-x', [['background-repeat', 'repeat-x']])
   staticUtility('bg-repeat-y', [['background-repeat', 'repeat-y']])
-  staticUtility('bg-repeat-round', [['background-repeat', 'round']])
-  staticUtility('bg-repeat-space', [['background-repeat', 'space']])
+  staticUtility('bg-round', [['background-repeat', 'round']])
+  staticUtility('bg-space', [['background-repeat', 'space']])
 
   staticUtility('bg-none', [['background-image', 'none']])
 
-  {
-    let suggestedModifiers = [
-      'oklab',
-      'oklch',
-      'srgb',
-      'hsl',
-      'longer',
-      'shorter',
-      'increasing',
-      'decreasing',
-    ]
-
-    let linearGradientDirections = new Map([
-      ['to-t', 'to top'],
-      ['to-tr', 'to top right'],
-      ['to-r', 'to right'],
-      ['to-br', 'to bottom right'],
-      ['to-b', 'to bottom'],
-      ['to-bl', 'to bottom left'],
-      ['to-l', 'to left'],
-      ['to-tl', 'to top left'],
-    ])
-
-    function resolveInterpolationModifier(modifier: CandidateModifier | null) {
-      let interpolationMethod = 'in oklab'
-
-      if (modifier?.kind === 'named') {
-        switch (modifier.value) {
-          case 'longer':
-          case 'shorter':
-          case 'increasing':
-          case 'decreasing':
-            interpolationMethod = `in oklch ${modifier.value} hue`
-            break
-          default:
-            interpolationMethod = `in ${modifier.value}`
-        }
-      } else if (modifier?.kind === 'arbitrary') {
-        interpolationMethod = modifier.value
-      }
-
-      return interpolationMethod
-    }
-
-    function handleBgLinear({ negative }: { negative: boolean }) {
-      return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-        if (!candidate.value) return
-
-        if (candidate.value.kind === 'arbitrary') {
-          if (candidate.modifier) return
-
-          let value = candidate.value.value
-          let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
-
-          switch (type) {
-            case 'angle': {
-              value = negative ? `calc(${value} * -1)` : `${value}`
-
-              return [
-                decl('--tw-gradient-position', value),
-                decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
-              ]
-            }
-            default: {
-              if (negative) return
-
-              return [
-                decl('--tw-gradient-position', value),
-                decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
-              ]
-            }
-          }
-        }
-
-        let value = candidate.value.value
-
-        if (!negative && linearGradientDirections.has(value)) {
-          value = linearGradientDirections.get(value)!
-        } else if (isPositiveInteger(value)) {
-          value = negative ? `calc(${value}deg * -1)` : `${value}deg`
-        } else {
-          return
-        }
-
-        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
-
-        return [
-          decl('--tw-gradient-position', `${value}`),
-          rule('@supports (background-image: linear-gradient(in lab, red, red))', [
-            decl('--tw-gradient-position', `${value} ${interpolationMethod}`),
-          ]),
-          decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
-        ]
-      }
-    }
-
-    utilities.functional('-bg-linear', handleBgLinear({ negative: true }))
-    utilities.functional('bg-linear', handleBgLinear({ negative: false }))
-
-    suggest('bg-linear', () => [
-      {
-        values: [...linearGradientDirections.keys()],
-        modifiers: suggestedModifiers,
-      },
-      {
-        values: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
-        supportsNegative: true,
-        modifiers: suggestedModifiers,
-      },
-    ])
-
-    function handleBgConic({ negative }: { negative: boolean }) {
-      return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-        if (candidate.value?.kind === 'arbitrary') {
-          if (candidate.modifier) return
-          let value = candidate.value.value
-          return [
-            decl('--tw-gradient-position', value),
-            decl('background-image', `conic-gradient(var(--tw-gradient-stops,${value}))`),
-          ]
-        }
-
-        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
-
-        if (!candidate.value) {
-          return [
-            decl('--tw-gradient-position', interpolationMethod),
-            decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
-          ]
-        }
-
-        let value = candidate.value.value
-
-        if (!isPositiveInteger(value)) return
-
-        value = negative ? `calc(${value}deg * -1)` : `${value}deg`
-
-        return [
-          decl('--tw-gradient-position', `from ${value} ${interpolationMethod}`),
-          decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
-        ]
-      }
-    }
-
-    utilities.functional('-bg-conic', handleBgConic({ negative: true }))
-    utilities.functional('bg-conic', handleBgConic({ negative: false }))
-
-    suggest('bg-conic', () => [
-      {
-        hasDefaultValue: true,
-        modifiers: suggestedModifiers,
-      },
-      {
-        values: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
-        supportsNegative: true,
-        modifiers: suggestedModifiers,
-      },
-    ])
-
-    utilities.functional('bg-radial', (candidate) => {
-      if (!candidate.value) {
-        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
-        return [
-          decl('--tw-gradient-position', interpolationMethod),
-          decl('background-image', `radial-gradient(var(--tw-gradient-stops))`),
-        ]
-      }
-
-      if (candidate.value.kind === 'arbitrary') {
-        if (candidate.modifier) return
-        let value = candidate.value.value
-        return [
-          decl('--tw-gradient-position', value),
-          decl('background-image', `radial-gradient(var(--tw-gradient-stops,${value}))`),
-        ]
-      }
-    })
-
-    suggest('bg-radial', () => [
-      {
-        hasDefaultValue: true,
-        modifiers: suggestedModifiers,
-      },
+  for (let [value, direction] of [
+    ['t', 'top'],
+    ['tr', 'top right'],
+    ['r', 'right'],
+    ['br', 'bottom right'],
+    ['b', 'bottom'],
+    ['bl', 'bottom left'],
+    ['l', 'left'],
+    ['tl', 'top left'],
+  ]) {
+    staticUtility(`bg-gradient-to-${value}`, [
+      ['background-image', `linear-gradient(to ${direction}, var(--tw-gradient-stops,))`],
     ])
   }
 
   utilities.functional('bg', (candidate) => {
-    if (!candidate.value) return
+    if (candidate.negative || !candidate.value) return
 
     // Arbitrary values
     if (candidate.value.kind === 'arbitrary') {
@@ -2914,28 +2306,25 @@ export function createUtilities(theme: Theme) {
         inferDataType(value, [
           'image',
           'color',
+          'length',
           'percentage',
           'position',
           'bg-size',
-          'length',
           'url',
         ])
 
       switch (type) {
+        case 'length':
         case 'percentage':
         case 'position': {
-          if (candidate.modifier) return
           return [decl('background-position', value)]
         }
-        case 'bg-size':
-        case 'length':
-        case 'size': {
-          if (candidate.modifier) return
+        case 'size':
+        case 'bg-size': {
           return [decl('background-size', value)]
         }
         case 'image':
         case 'url': {
-          if (candidate.modifier) return
           return [decl('background-image', value)]
         }
         default: {
@@ -2957,7 +2346,6 @@ export function createUtilities(theme: Theme) {
 
     // `background-image` property
     {
-      if (candidate.modifier) return
       let value = theme.resolve(candidate.value.value, ['--background-image'])
       if (value) {
         return [decl('background-image', value)]
@@ -2967,10 +2355,10 @@ export function createUtilities(theme: Theme) {
 
   suggest('bg', () => [
     {
-      values: ['current', 'inherit', 'transparent'],
+      values: ['current', 'transparent'],
       valueThemeKeys: ['--background-color', '--color'],
-      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ['--opacity'],
     },
     {
       values: [],
@@ -2980,10 +2368,11 @@ export function createUtilities(theme: Theme) {
 
   let gradientStopProperties = () => {
     return atRoot([
-      property('--tw-gradient-position'),
       property('--tw-gradient-from', '#0000', '<color>'),
-      property('--tw-gradient-via', '#0000', '<color>'),
       property('--tw-gradient-to', '#0000', '<color>'),
+      property('--tw-gradient-from', 'transparent', '<color>'),
+      property('--tw-gradient-via', 'transparent', '<color>'),
+      property('--tw-gradient-to', 'transparent', '<color>'),
       property('--tw-gradient-stops'),
       property('--tw-gradient-via-stops'),
       property('--tw-gradient-from-position', '0%', '<length-percentage>'),
@@ -2999,7 +2388,7 @@ export function createUtilities(theme: Theme) {
 
   function gradientStopUtility(classRoot: string, desc: GradientStopDescription) {
     utilities.functional(classRoot, (candidate) => {
-      if (!candidate.value) return
+      if (candidate.negative || !candidate.value) return
 
       // Arbitrary values
       if (candidate.value.kind === 'arbitrary') {
@@ -3010,7 +2399,6 @@ export function createUtilities(theme: Theme) {
         switch (type) {
           case 'length':
           case 'percentage': {
-            if (candidate.modifier) return
             return desc.position(value)
           }
           default: {
@@ -3032,14 +2420,10 @@ export function createUtilities(theme: Theme) {
 
       // Known values: Positions
       {
-        if (candidate.modifier) return
         let value = theme.resolve(candidate.value.value, ['--gradient-color-stop-positions'])
         if (value) {
           return desc.position(value)
-        } else if (
-          candidate.value.value[candidate.value.value.length - 1] === '%' &&
-          isPositiveInteger(candidate.value.value.slice(0, -1))
-        ) {
+        } else if (candidate.value.value[candidate.value.value.length - 1] === '%') {
           return desc.position(candidate.value.value)
         }
       }
@@ -3047,10 +2431,10 @@ export function createUtilities(theme: Theme) {
 
     suggest(classRoot, () => [
       {
-        values: ['current', 'inherit', 'transparent'],
+        values: ['current', 'transparent'],
         valueThemeKeys: ['--background-color', '--color'],
-        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ['--opacity'],
       },
       {
         values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
@@ -3066,7 +2450,7 @@ export function createUtilities(theme: Theme) {
       decl('--tw-gradient-from', value),
       decl(
         '--tw-gradient-stops',
-        'var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
+        'var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
       ),
     ],
     position: (value) => [gradientStopProperties(), decl('--tw-gradient-from-position', value)],
@@ -3079,7 +2463,7 @@ export function createUtilities(theme: Theme) {
       decl('--tw-gradient-via', value),
       decl(
         '--tw-gradient-via-stops',
-        'var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)',
+        'var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)',
       ),
       decl('--tw-gradient-stops', 'var(--tw-gradient-via-stops)'),
     ],
@@ -3092,701 +2476,12 @@ export function createUtilities(theme: Theme) {
       decl('--tw-gradient-to', value),
       decl(
         '--tw-gradient-stops',
-        'var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
+        'var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
       ),
     ],
     position: (value) => [gradientStopProperties(), decl('--tw-gradient-to-position', value)],
   })
 
-  /**
-   * @css `mask-image`
-   */
-
-  staticUtility('mask-none', [['mask-image', 'none']])
-
-  utilities.functional('mask', (candidate) => {
-    if (!candidate.value) return
-    if (candidate.modifier) return
-    if (candidate.value.kind !== 'arbitrary') return
-
-    // Arbitrary values
-    let value: string | null = candidate.value.value
-    let type =
-      candidate.value.dataType ??
-      inferDataType(value, ['image', 'percentage', 'position', 'bg-size', 'length', 'url'])
-
-    switch (type) {
-      case 'percentage':
-      case 'position': {
-        if (candidate.modifier) return
-        return [decl('mask-position', value)]
-      }
-      case 'bg-size':
-      case 'length':
-      case 'size': {
-        return [decl('mask-size', value)]
-      }
-      case 'image':
-      case 'url':
-      default: {
-        return [decl('mask-image', value)]
-      }
-    }
-  })
-
-  /**
-   * @css `mask-composite`
-   */
-
-  staticUtility('mask-add', [['mask-composite', 'add']])
-  staticUtility('mask-subtract', [['mask-composite', 'subtract']])
-  staticUtility('mask-intersect', [['mask-composite', 'intersect']])
-  staticUtility('mask-exclude', [['mask-composite', 'exclude']])
-
-  /**
-   * @css `mask-mode`
-   *
-   * Sets the "mode" of the mask given by mask-image
-   */
-
-  staticUtility('mask-alpha', [['mask-mode', 'alpha']])
-  staticUtility('mask-luminance', [['mask-mode', 'luminance']])
-  staticUtility('mask-match', [['mask-mode', 'match-source']])
-
-  /**
-   * @css `mask-type`
-   *
-   * Sets the "mode" of the current `<mask>` element
-   * Is overridden by `mask-mode` if used
-   */
-  staticUtility('mask-type-alpha', [['mask-type', 'alpha']])
-  staticUtility('mask-type-luminance', [['mask-type', 'luminance']])
-
-  /**
-   * @css `mask-size`
-   */
-
-  staticUtility('mask-auto', [['mask-size', 'auto']])
-  staticUtility('mask-cover', [['mask-size', 'cover']])
-  staticUtility('mask-contain', [['mask-size', 'contain']])
-  functionalUtility('mask-size', {
-    handle(value) {
-      if (!value) return
-      return [decl('mask-size', value)]
-    },
-  })
-
-  /**
-   * @css `mask-position`
-   */
-
-  staticUtility('mask-top', [['mask-position', 'top']])
-  staticUtility('mask-top-left', [['mask-position', 'left top']])
-  staticUtility('mask-top-right', [['mask-position', 'right top']])
-  staticUtility('mask-bottom', [['mask-position', 'bottom']])
-  staticUtility('mask-bottom-left', [['mask-position', 'left bottom']])
-  staticUtility('mask-bottom-right', [['mask-position', 'right bottom']])
-  staticUtility('mask-left', [['mask-position', 'left']])
-  staticUtility('mask-right', [['mask-position', 'right']])
-  staticUtility('mask-center', [['mask-position', 'center']])
-  functionalUtility('mask-position', {
-    handle(value) {
-      if (!value) return
-      return [decl('mask-position', value)]
-    },
-  })
-
-  /**
-   * @css `mask-repeat`
-   */
-
-  staticUtility('mask-repeat', [['mask-repeat', 'repeat']])
-  staticUtility('mask-no-repeat', [['mask-repeat', 'no-repeat']])
-  staticUtility('mask-repeat-x', [['mask-repeat', 'repeat-x']])
-  staticUtility('mask-repeat-y', [['mask-repeat', 'repeat-y']])
-  staticUtility('mask-repeat-round', [['mask-repeat', 'round']])
-  staticUtility('mask-repeat-space', [['mask-repeat', 'space']])
-
-  /**
-   * @css `mask-clip`
-   */
-
-  staticUtility('mask-clip-border', [['mask-clip', 'border-box']])
-  staticUtility('mask-clip-padding', [['mask-clip', 'padding-box']])
-  staticUtility('mask-clip-content', [['mask-clip', 'content-box']])
-  staticUtility('mask-clip-fill', [['mask-clip', 'fill-box']])
-  staticUtility('mask-clip-stroke', [['mask-clip', 'stroke-box']])
-  staticUtility('mask-clip-view', [['mask-clip', 'view-box']])
-  staticUtility('mask-no-clip', [['mask-clip', 'no-clip']])
-
-  /**
-   * @css `mask-origin`
-   */
-
-  staticUtility('mask-origin-border', [['mask-origin', 'border-box']])
-  staticUtility('mask-origin-padding', [['mask-origin', 'padding-box']])
-  staticUtility('mask-origin-content', [['mask-origin', 'content-box']])
-  staticUtility('mask-origin-fill', [['mask-origin', 'fill-box']])
-  staticUtility('mask-origin-stroke', [['mask-origin', 'stroke-box']])
-  staticUtility('mask-origin-view', [['mask-origin', 'view-box']])
-
-  /**
-   * @css `mask-image` gradients
-   */
-
-  let maskPropertiesGradient = () =>
-    atRoot([
-      property('--tw-mask-linear', 'linear-gradient(#fff, #fff)'),
-      property('--tw-mask-radial', 'linear-gradient(#fff, #fff)'),
-      property('--tw-mask-conic', 'linear-gradient(#fff, #fff)'),
-    ])
-
-  type MaskStopDescription = {
-    color: (value: string) => AstNode[] | undefined
-    position: (value: string) => AstNode[] | undefined
-  }
-
-  function maskStopUtility(classRoot: string, desc: MaskStopDescription) {
-    utilities.functional(classRoot, (candidate) => {
-      if (!candidate.value) return
-
-      // Arbitrary values
-      if (candidate.value.kind === 'arbitrary') {
-        let value: string | null = candidate.value.value
-        let type =
-          candidate.value.dataType ?? inferDataType(value, ['length', 'percentage', 'color'])
-
-        switch (type) {
-          case 'color': {
-            value = asColor(value, candidate.modifier, theme)
-            if (value === null) return
-
-            return desc.color(value)
-          }
-          case 'percentage': {
-            if (candidate.modifier) return
-            if (!isPositiveInteger(value.slice(0, -1))) return
-
-            return desc.position(value)
-          }
-          default: {
-            if (candidate.modifier) return
-
-            return desc.position(value)
-          }
-        }
-      }
-
-      // Known values: Color Stops
-      {
-        let value = resolveThemeColor(candidate, theme, ['--background-color', '--color'])
-        if (value) {
-          return desc.color(value)
-        }
-      }
-
-      // Known values: Positions
-      {
-        if (candidate.modifier) return
-
-        let type = inferDataType(candidate.value.value, ['number', 'percentage'])
-        if (!type) return
-
-        switch (type) {
-          case 'number': {
-            let multiplier = theme.resolve(null, ['--spacing'])
-            if (!multiplier) return
-            if (!isValidSpacingMultiplier(candidate.value.value)) return
-
-            return desc.position(`--spacing(${candidate.value.value})`)
-          }
-
-          case 'percentage': {
-            if (!isPositiveInteger(candidate.value.value.slice(0, -1))) return
-            return desc.position(candidate.value.value)
-          }
-
-          default: {
-            return
-          }
-        }
-      }
-    })
-
-    suggest(classRoot, () => [
-      {
-        values: ['current', 'inherit', 'transparent'],
-        valueThemeKeys: ['--background-color', '--color'],
-        modifierThemeKeys: ['--opacity'],
-        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      },
-      {
-        values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
-        valueThemeKeys: ['--gradient-color-stop-positions'],
-      },
-    ])
-
-    suggest(classRoot, () => [
-      // Percentages
-      {
-        values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
-      },
-
-      // Spacing Scale
-      {
-        values: theme.get(['--spacing']) ? DEFAULT_SPACING_SUGGESTIONS : [],
-      },
-
-      // Colors
-      {
-        values: ['current', 'inherit', 'transparent'],
-        valueThemeKeys: ['--background-color', '--color'],
-        modifierThemeKeys: ['--opacity'],
-        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      },
-    ])
-  }
-
-  /**
-   * Edge masks
-   */
-
-  let maskPropertiesEdge = () =>
-    atRoot([
-      property('--tw-mask-left', 'linear-gradient(#fff, #fff)'),
-      property('--tw-mask-right', 'linear-gradient(#fff, #fff)'),
-      property('--tw-mask-bottom', 'linear-gradient(#fff, #fff)'),
-      property('--tw-mask-top', 'linear-gradient(#fff, #fff)'),
-    ])
-
-  type MaskEdge = 'top' | 'right' | 'bottom' | 'left'
-  type MaskStop = 'from' | 'to'
-
-  function maskEdgeUtility(name: string, stop: MaskStop, edges: Record<MaskEdge, boolean>) {
-    maskStopUtility(name, {
-      color(value) {
-        let nodes: AstNode[] = [
-          // Common @property declarations
-          maskPropertiesGradient(),
-          maskPropertiesEdge(),
-
-          // Common properties to all edge utilities
-          decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-          decl('mask-composite', 'intersect'),
-          decl(
-            '--tw-mask-linear',
-            'var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top)',
-          ),
-        ]
-
-        for (let edge of ['top', 'right', 'bottom', 'left'] as const) {
-          if (!edges[edge]) continue
-
-          nodes.push(
-            decl(
-              `--tw-mask-${edge}`,
-              `linear-gradient(to ${edge}, var(--tw-mask-${edge}-from-color) var(--tw-mask-${edge}-from-position), var(--tw-mask-${edge}-to-color) var(--tw-mask-${edge}-to-position))`,
-            ),
-          )
-
-          nodes.push(
-            atRoot([
-              property(`--tw-mask-${edge}-from-position`, '0%'),
-              property(`--tw-mask-${edge}-to-position`, '100%'),
-              property(`--tw-mask-${edge}-from-color`, 'black'),
-              property(`--tw-mask-${edge}-to-color`, 'transparent'),
-            ]),
-          )
-
-          nodes.push(decl(`--tw-mask-${edge}-${stop}-color`, value))
-        }
-
-        return nodes
-      },
-      position(value) {
-        let nodes: AstNode[] = [
-          // Common @property declarations
-          maskPropertiesGradient(),
-          maskPropertiesEdge(),
-
-          // Common properties to all edge utilities
-          decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-          decl('mask-composite', 'intersect'),
-          decl(
-            '--tw-mask-linear',
-            'var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top)',
-          ),
-        ]
-
-        for (let edge of ['top', 'right', 'bottom', 'left'] as const) {
-          if (!edges[edge]) continue
-
-          nodes.push(
-            decl(
-              `--tw-mask-${edge}`,
-              `linear-gradient(to ${edge}, var(--tw-mask-${edge}-from-color) var(--tw-mask-${edge}-from-position), var(--tw-mask-${edge}-to-color) var(--tw-mask-${edge}-to-position))`,
-            ),
-          )
-
-          nodes.push(
-            atRoot([
-              property(`--tw-mask-${edge}-from-position`, '0%'),
-              property(`--tw-mask-${edge}-to-position`, '100%'),
-              property(`--tw-mask-${edge}-from-color`, 'black'),
-              property(`--tw-mask-${edge}-to-color`, 'transparent'),
-            ]),
-          )
-
-          nodes.push(decl(`--tw-mask-${edge}-${stop}-position`, value))
-        }
-
-        return nodes
-      },
-    })
-  }
-
-  maskEdgeUtility('mask-x-from', 'from', { top: false, right: true, bottom: false, left: true })
-  maskEdgeUtility('mask-x-to', 'to', { top: false, right: true, bottom: false, left: true })
-  maskEdgeUtility('mask-y-from', 'from', { top: true, right: false, bottom: true, left: false })
-  maskEdgeUtility('mask-y-to', 'to', { top: true, right: false, bottom: true, left: false })
-  maskEdgeUtility('mask-t-from', 'from', { top: true, right: false, bottom: false, left: false })
-  maskEdgeUtility('mask-t-to', 'to', { top: true, right: false, bottom: false, left: false })
-  maskEdgeUtility('mask-r-from', 'from', { top: false, right: true, bottom: false, left: false })
-  maskEdgeUtility('mask-r-to', 'to', { top: false, right: true, bottom: false, left: false })
-  maskEdgeUtility('mask-b-from', 'from', { top: false, right: false, bottom: true, left: false })
-  maskEdgeUtility('mask-b-to', 'to', { top: false, right: false, bottom: true, left: false })
-  maskEdgeUtility('mask-l-from', 'from', { top: false, right: false, bottom: false, left: true })
-  maskEdgeUtility('mask-l-to', 'to', { top: false, right: false, bottom: false, left: true })
-
-  /**
-   *  Linear Masks
-   */
-
-  let maskPropertiesLinear = () =>
-    atRoot([
-      property('--tw-mask-linear-position', '0deg'),
-      property('--tw-mask-linear-from-position', '0%'),
-      property('--tw-mask-linear-to-position', '100%'),
-      property('--tw-mask-linear-from-color', 'black'),
-      property('--tw-mask-linear-to-color', 'transparent'),
-    ])
-
-  functionalUtility('mask-linear', {
-    defaultValue: null,
-    supportsNegative: true,
-    supportsFractions: false,
-    handleBareValue({ value }) {
-      if (!isPositiveInteger(value)) return null
-      let valueAsNumber = Number(value)
-      if (valueAsNumber === 0) return '0deg'
-      if (valueAsNumber === 1) return '1deg'
-      return `calc(1deg * ${value})`
-    },
-    handleNegativeBareValue({ value }) {
-      if (!isPositiveInteger(value)) return null
-      let valueAsNumber = Number(value)
-      if (valueAsNumber === 0) return '0deg'
-      if (valueAsNumber === 1) return '-1deg'
-      return `calc(1deg * -${value})`
-    },
-    handle: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesLinear(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-linear',
-        `linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)))`,
-      ),
-      decl('--tw-mask-linear-position', value),
-    ],
-  })
-
-  suggest('mask-linear', () => [
-    {
-      supportsNegative: true,
-      values: ['0', '1', '2', '3', '6', '12', '45', '90', '180'],
-    },
-  ])
-
-  maskStopUtility('mask-linear-from', {
-    color: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesLinear(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-linear-stops',
-        'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
-      ),
-      decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
-      decl('--tw-mask-linear-from-color', value),
-    ],
-    position: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesLinear(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-linear-stops',
-        'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
-      ),
-      decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
-      decl('--tw-mask-linear-from-position', value),
-    ],
-  })
-
-  maskStopUtility('mask-linear-to', {
-    color: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesLinear(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-linear-stops',
-        'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
-      ),
-      decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
-      decl('--tw-mask-linear-to-color', value),
-    ],
-    position: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesLinear(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-linear-stops',
-        'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
-      ),
-      decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
-      decl('--tw-mask-linear-to-position', value),
-    ],
-  })
-
-  /**
-   * Radial masks
-   */
-
-  let maskPropertiesRadial = () =>
-    atRoot([
-      property('--tw-mask-radial-from-position', '0%'),
-      property('--tw-mask-radial-to-position', '100%'),
-      property('--tw-mask-radial-from-color', 'black'),
-      property('--tw-mask-radial-to-color', 'transparent'),
-      property('--tw-mask-radial-shape', 'ellipse'),
-      property('--tw-mask-radial-size', 'farthest-corner'),
-      property('--tw-mask-radial-position', 'center'),
-    ])
-
-  staticUtility('mask-circle', [['--tw-mask-radial-shape', 'circle']])
-  staticUtility('mask-ellipse', [['--tw-mask-radial-shape', 'ellipse']])
-  staticUtility('mask-radial-closest-side', [['--tw-mask-radial-size', 'closest-side']])
-  staticUtility('mask-radial-farthest-side', [['--tw-mask-radial-size', 'farthest-side']])
-  staticUtility('mask-radial-closest-corner', [['--tw-mask-radial-size', 'closest-corner']])
-  staticUtility('mask-radial-farthest-corner', [['--tw-mask-radial-size', 'farthest-corner']])
-  staticUtility('mask-radial-at-top', [['--tw-mask-radial-position', 'top']])
-  staticUtility('mask-radial-at-top-left', [['--tw-mask-radial-position', 'top left']])
-  staticUtility('mask-radial-at-top-right', [['--tw-mask-radial-position', 'top right']])
-  staticUtility('mask-radial-at-bottom', [['--tw-mask-radial-position', 'bottom']])
-  staticUtility('mask-radial-at-bottom-left', [['--tw-mask-radial-position', 'bottom left']])
-  staticUtility('mask-radial-at-bottom-right', [['--tw-mask-radial-position', 'bottom right']])
-  staticUtility('mask-radial-at-left', [['--tw-mask-radial-position', 'left']])
-  staticUtility('mask-radial-at-right', [['--tw-mask-radial-position', 'right']])
-  staticUtility('mask-radial-at-center', [['--tw-mask-radial-position', 'center']])
-  functionalUtility('mask-radial-at', {
-    defaultValue: null,
-    supportsNegative: false,
-    supportsFractions: false,
-    handle: (value) => [decl('--tw-mask-radial-position', value)],
-  })
-
-  /*
-      This can be used to set just the size in conjunction with `mask-radial-from-*` et al,
-      or can set the whole gradient if it's the only utility you use.
-
-      For example:
-      `mask-radial-[40px_80px] mask-radial-from-50%`
-      `mask-radial-[96px_at_top,black_40%,transparent_80%,black_90%]`
-
-      This will produce nonsense though and break, which is fine:
-      `mask-radial-[96px_at_top,black_40%,transparent_80%,black_90%]  mask-radial-from-50%`
-    */
-  functionalUtility('mask-radial', {
-    defaultValue: null,
-    supportsNegative: false,
-    supportsFractions: false,
-    handle: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesRadial(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-radial',
-        'radial-gradient(var(--tw-mask-radial-stops, var(--tw-mask-radial-size)))',
-      ),
-      decl('--tw-mask-radial-size', value),
-    ],
-  })
-
-  maskStopUtility('mask-radial-from', {
-    color: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesRadial(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-radial-stops',
-        'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
-      ),
-      decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
-      decl('--tw-mask-radial-from-color', value),
-    ],
-    position: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesRadial(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-radial-stops',
-        'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
-      ),
-      decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
-      decl('--tw-mask-radial-from-position', value),
-    ],
-  })
-
-  maskStopUtility('mask-radial-to', {
-    color: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesRadial(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-radial-stops',
-        'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
-      ),
-      decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
-      decl('--tw-mask-radial-to-color', value),
-    ],
-    position: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesRadial(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-radial-stops',
-        'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
-      ),
-      decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
-      decl('--tw-mask-radial-to-position', value),
-    ],
-  })
-
-  /**
-   * Conic masks
-   */
-
-  let maskPropertiesConic = () =>
-    atRoot([
-      property('--tw-mask-conic-position', '0deg'),
-      property('--tw-mask-conic-from-position', '0%'),
-      property('--tw-mask-conic-to-position', '100%'),
-      property('--tw-mask-conic-from-color', 'black'),
-      property('--tw-mask-conic-to-color', 'transparent'),
-    ])
-
-  functionalUtility('mask-conic', {
-    defaultValue: null,
-    supportsNegative: true,
-    supportsFractions: false,
-    handleBareValue({ value }) {
-      if (!isPositiveInteger(value)) return null
-      let valueAsNumber = Number(value)
-      if (valueAsNumber === 0) return '0deg'
-      if (valueAsNumber === 1) return '1deg'
-      return `calc(1deg * ${value})`
-    },
-    handleNegativeBareValue({ value }) {
-      if (!isPositiveInteger(value)) return null
-      let valueAsNumber = Number(value)
-      if (valueAsNumber === 0) return '0deg'
-      if (valueAsNumber === 1) return '-1deg'
-      return `calc(1deg * -${value})`
-    },
-    handle: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesConic(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-conic',
-        'conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)))',
-      ),
-      decl('--tw-mask-conic-position', value),
-    ],
-  })
-
-  suggest('mask-conic', () => [
-    {
-      supportsNegative: true,
-      values: ['0', '1', '2', '3', '6', '12', '45', '90', '180'],
-    },
-  ])
-
-  maskStopUtility('mask-conic-from', {
-    color: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesConic(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-conic-stops',
-        'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
-      ),
-      decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
-      decl('--tw-mask-conic-from-color', value),
-    ],
-    position: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesConic(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-conic-stops',
-        'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
-      ),
-      decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
-      decl('--tw-mask-conic-from-position', value),
-    ],
-  })
-
-  maskStopUtility('mask-conic-to', {
-    color: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesConic(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-conic-stops',
-        'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
-      ),
-      decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
-      decl('--tw-mask-conic-to-color', value),
-    ],
-    position: (value) => [
-      maskPropertiesGradient(),
-      maskPropertiesConic(),
-      decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
-      decl('mask-composite', 'intersect'),
-      decl(
-        '--tw-mask-conic-stops',
-        'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
-      ),
-      decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
-      decl('--tw-mask-conic-to-position', value),
-    ],
-  })
-
   /**
    * @css `box-decoration-break`
    */
@@ -3836,9 +2531,8 @@ export function createUtilities(theme: Theme) {
   staticUtility('mix-blend-plus-darker', [['mix-blend-mode', 'plus-darker']])
   staticUtility('mix-blend-plus-lighter', [['mix-blend-mode', 'plus-lighter']])
 
-  staticUtility('fill-none', [['fill', 'none']])
   utilities.functional('fill', (candidate) => {
-    if (!candidate.value) return
+    if (candidate.negative || !candidate.value) return
 
     if (candidate.value.kind === 'arbitrary') {
       let value = asColor(candidate.value.value, candidate.modifier, theme)
@@ -3854,16 +2548,16 @@ export function createUtilities(theme: Theme) {
 
   suggest('fill', () => [
     {
-      values: ['current', 'inherit', 'transparent'],
+      values: ['current', 'transparent'],
       valueThemeKeys: ['--fill', '--color'],
-      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ['--opacity'],
     },
   ])
 
   staticUtility('stroke-none', [['stroke', 'none']])
   utilities.functional('stroke', (candidate) => {
-    if (!candidate.value) return
+    if (candidate.negative || !candidate.value) return
 
     if (candidate.value.kind === 'arbitrary') {
       let value: string | null = candidate.value.value
@@ -3875,7 +2569,6 @@ export function createUtilities(theme: Theme) {
         case 'number':
         case 'length':
         case 'percentage': {
-          if (candidate.modifier) return
           return [decl('stroke-width', value)]
         }
         default: {
@@ -3895,14 +2588,10 @@ export function createUtilities(theme: Theme) {
     }
 
     {
-      // A modifier is only valid as the opacity of a stroke color. The value
-      // did not resolve to a color, so a modifier would be silently ignored.
-      if (candidate.modifier) return
-
       let value = theme.resolve(candidate.value.value, ['--stroke-width'])
       if (value) {
         return [decl('stroke-width', value)]
-      } else if (isPositiveInteger(candidate.value.value)) {
+      } else if (!Number.isNaN(Number(candidate.value.value))) {
         return [decl('stroke-width', candidate.value.value)]
       }
     }
@@ -3910,10 +2599,10 @@ export function createUtilities(theme: Theme) {
 
   suggest('stroke', () => [
     {
-      values: ['current', 'inherit', 'transparent'],
+      values: ['current', 'transparent'],
       valueThemeKeys: ['--stroke', '--color'],
-      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ['--opacity'],
     },
     {
       values: ['0', '1', '2', '3'],
@@ -3927,37 +2616,59 @@ export function createUtilities(theme: Theme) {
   staticUtility('object-none', [['object-fit', 'none']])
   staticUtility('object-scale-down', [['object-fit', 'scale-down']])
 
+  staticUtility('object-bottom', [['object-position', 'bottom']])
+  staticUtility('object-center', [['object-position', 'center']])
+  staticUtility('object-left', [['object-position', 'left']])
+  staticUtility('object-left-bottom', [['object-position', 'left bottom']])
+  staticUtility('object-left-top', [['object-position', 'left top']])
+  staticUtility('object-right', [['object-position', 'right']])
+  staticUtility('object-right-bottom', [['object-position', 'right bottom']])
+  staticUtility('object-right-top', [['object-position', 'right top']])
+  staticUtility('object-top', [['object-position', 'top']])
   functionalUtility('object', {
     themeKeys: ['--object-position'],
     handle: (value) => [decl('object-position', value)],
-    staticValues: {
-      top: [decl('object-position', 'top')],
-      'top-left': [decl('object-position', 'left top')],
-      'top-right': [decl('object-position', 'right top')],
-      bottom: [decl('object-position', 'bottom')],
-      'bottom-left': [decl('object-position', 'left bottom')],
-      'bottom-right': [decl('object-position', 'right bottom')],
-      left: [decl('object-position', 'left')],
-      right: [decl('object-position', 'right')],
-      center: [decl('object-position', 'center')],
-    },
   })
 
-  for (let [name, property] of [
-    ['p', 'padding'],
-    ['px', 'padding-inline'],
-    ['py', 'padding-block'],
-    ['ps', 'padding-inline-start'],
-    ['pe', 'padding-inline-end'],
-    ['pbs', 'padding-block-start'],
-    ['pbe', 'padding-block-end'],
-    ['pt', 'padding-top'],
-    ['pr', 'padding-right'],
-    ['pb', 'padding-bottom'],
-    ['pl', 'padding-left'],
-  ] as const) {
-    spacingUtility(name, ['--padding', '--spacing'], (value) => [decl(property, value)])
-  }
+  functionalUtility('p', {
+    themeKeys: ['--padding', '--spacing'],
+    handle: (value) => [decl('padding', value)],
+  })
+
+  functionalUtility('px', {
+    themeKeys: ['--padding', '--spacing'],
+    handle: (value) => [decl('padding-left', value), decl('padding-right', value)],
+  })
+
+  functionalUtility('py', {
+    themeKeys: ['--padding', '--spacing'],
+    handle: (value) => [decl('padding-top', value), decl('padding-bottom', 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)],
+  })
 
   staticUtility('text-left', [['text-align', 'left']])
   staticUtility('text-center', [['text-align', 'center']])
@@ -3966,14 +2677,11 @@ export function createUtilities(theme: Theme) {
   staticUtility('text-start', [['text-align', 'start']])
   staticUtility('text-end', [['text-align', 'end']])
 
-  spacingUtility(
-    'indent',
-    ['--text-indent', '--spacing'],
-    (value) => [decl('text-indent', value)],
-    {
-      supportsNegative: true,
-    },
-  )
+  functionalUtility('indent', {
+    supportsNegative: true,
+    themeKeys: ['--text-indent', '--spacing'],
+    handle: (value) => [decl('text-indent', value)],
+  })
 
   staticUtility('align-baseline', [['vertical-align', 'baseline']])
   staticUtility('align-top', [['vertical-align', 'top']])
@@ -3990,7 +2698,7 @@ export function createUtilities(theme: Theme) {
   })
 
   utilities.functional('font', (candidate) => {
-    if (!candidate.value || candidate.modifier) return
+    if (candidate.negative || !candidate.value) return
 
     if (candidate.value.kind === 'arbitrary') {
       let value = candidate.value.value
@@ -4003,11 +2711,7 @@ export function createUtilities(theme: Theme) {
           return [decl('font-family', value)]
         }
         default: {
-          return [
-            atRoot([property('--tw-font-weight')]),
-            decl('--tw-font-weight', value),
-            decl('font-weight', value),
-          ]
+          return [decl('font-weight', value)]
         }
       }
     }
@@ -4015,7 +2719,7 @@ export function createUtilities(theme: Theme) {
     {
       let value = theme.resolveWith(
         candidate.value.value,
-        ['--font'],
+        ['--font-family'],
         ['--font-feature-settings', '--font-variation-settings'],
       )
       if (value) {
@@ -4032,11 +2736,41 @@ export function createUtilities(theme: Theme) {
     {
       let value = theme.resolve(candidate.value.value, ['--font-weight'])
       if (value) {
-        return [
-          atRoot([property('--tw-font-weight')]),
-          decl('--tw-font-weight', value),
-          decl('font-weight', value),
-        ]
+        return [decl('font-weight', value)]
+      }
+
+      switch (candidate.value.value) {
+        case 'thin':
+          value = '100'
+          break
+        case 'extralight':
+          value = '200'
+          break
+        case 'light':
+          value = '300'
+          break
+        case 'normal':
+          value = '400'
+          break
+        case 'medium':
+          value = '500'
+          break
+        case 'semibold':
+          value = '600'
+          break
+        case 'bold':
+          value = '700'
+          break
+        case 'extrabold':
+          value = '800'
+          break
+        case 'black':
+          value = '900'
+          break
+      }
+
+      if (value) {
+        return [decl('font-weight', value)]
       }
     }
   })
@@ -4044,22 +2778,24 @@ export function createUtilities(theme: Theme) {
   suggest('font', () => [
     {
       values: [],
-      valueThemeKeys: ['--font'],
+      valueThemeKeys: ['--font-family'],
     },
     {
-      values: [],
+      values: [
+        'thin',
+        'extralight',
+        'light',
+        'normal',
+        'medium',
+        'semibold',
+        'bold',
+        'extrabold',
+        'black',
+      ],
       valueThemeKeys: ['--font-weight'],
     },
   ])
 
-  /**
-   * @css `font-feature-settings`
-   */
-  functionalUtility('font-features', {
-    themeKeys: [],
-    handle: (value) => [decl('font-feature-settings', value)],
-  })
-
   staticUtility('uppercase', [['text-transform', 'uppercase']])
   staticUtility('lowercase', [['text-transform', 'lowercase']])
   staticUtility('capitalize', [['text-transform', 'capitalize']])
@@ -4082,10 +2818,10 @@ export function createUtilities(theme: Theme) {
   staticUtility('font-stretch-extra-expanded', [['font-stretch', 'extra-expanded']])
   staticUtility('font-stretch-ultra-expanded', [['font-stretch', 'ultra-expanded']])
   functionalUtility('font-stretch', {
+    themeKeys: [],
     handleBareValue: ({ value }) => {
       if (!value.endsWith('%')) return null
       let num = Number(value.slice(0, -1))
-      if (!isPositiveInteger(num)) return null
       // Only 50-200% (inclusive) are valid:
       // https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#percentage
       if (Number.isNaN(num) || num < 50 || num > 200) return null
@@ -4100,9 +2836,9 @@ export function createUtilities(theme: Theme) {
   ])
 
   colorUtility('placeholder', {
-    themeKeys: ['--placeholder-color', '--color'],
+    themeKeys: ['--background-color', '--color'],
     handle: (value) => [
-      styleRule('&::placeholder', [decl('--tw-sort', 'placeholder-color'), decl('color', value)]),
+      rule('&::placeholder', [decl('--tw-sort', 'placeholder-color'), decl('color', value)]),
     ],
   })
 
@@ -4122,7 +2858,7 @@ export function createUtilities(theme: Theme) {
   staticUtility('decoration-from-font', [['text-decoration-thickness', 'from-font']])
 
   utilities.functional('decoration', (candidate) => {
-    if (!candidate.value) return
+    if (candidate.negative || !candidate.value) return
 
     if (candidate.value.kind === 'arbitrary') {
       let value: string | null = candidate.value.value
@@ -4131,7 +2867,6 @@ export function createUtilities(theme: Theme) {
       switch (type) {
         case 'length':
         case 'percentage': {
-          if (candidate.modifier) return
           return [decl('text-decoration-thickness', value)]
         }
         default: {
@@ -4147,12 +2882,10 @@ export function createUtilities(theme: Theme) {
     {
       let value = theme.resolve(candidate.value.value, ['--text-decoration-thickness'])
       if (value) {
-        if (candidate.modifier) return
         return [decl('text-decoration-thickness', value)]
       }
 
-      if (isPositiveInteger(candidate.value.value)) {
-        if (candidate.modifier) return
+      if (!Number.isNaN(Number(candidate.value.value))) {
         return [decl('text-decoration-thickness', `${candidate.value.value}px`)]
       }
     }
@@ -4168,10 +2901,10 @@ export function createUtilities(theme: Theme) {
 
   suggest('decoration', () => [
     {
-      values: ['current', 'inherit', 'transparent'],
+      values: ['current', 'transparent'],
       valueThemeKeys: ['--text-decoration-color', '--color'],
-      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ['--opacity'],
     },
     {
       values: ['0', '1', '2'],
@@ -4179,37 +2912,35 @@ export function createUtilities(theme: Theme) {
     },
   ])
 
+  staticUtility('animate-none', [['animation', 'none']])
   functionalUtility('animate', {
     themeKeys: ['--animate'],
     handle: (value) => [decl('animation', value)],
-    staticValues: {
-      none: [decl('animation', 'none')],
-    },
   })
 
   {
     let cssFilterValue = [
-      'var(--tw-blur, )',
-      'var(--tw-brightness, )',
-      'var(--tw-contrast, )',
-      'var(--tw-grayscale, )',
-      'var(--tw-hue-rotate, )',
-      'var(--tw-invert, )',
-      'var(--tw-saturate, )',
-      'var(--tw-sepia, )',
-      'var(--tw-drop-shadow, )',
+      'var(--tw-blur,)',
+      'var(--tw-brightness,)',
+      'var(--tw-contrast,)',
+      'var(--tw-grayscale,)',
+      'var(--tw-hue-rotate,)',
+      'var(--tw-invert,)',
+      'var(--tw-saturate,)',
+      'var(--tw-sepia,)',
+      'var(--tw-drop-shadow,)',
     ].join(' ')
 
     let cssBackdropFilterValue = [
-      'var(--tw-backdrop-blur, )',
-      'var(--tw-backdrop-brightness, )',
-      'var(--tw-backdrop-contrast, )',
-      'var(--tw-backdrop-grayscale, )',
-      'var(--tw-backdrop-hue-rotate, )',
-      'var(--tw-backdrop-invert, )',
-      'var(--tw-backdrop-opacity, )',
-      'var(--tw-backdrop-saturate, )',
-      'var(--tw-backdrop-sepia, )',
+      'var(--tw-backdrop-blur,)',
+      'var(--tw-backdrop-brightness,)',
+      'var(--tw-backdrop-contrast,)',
+      'var(--tw-backdrop-grayscale,)',
+      'var(--tw-backdrop-hue-rotate,)',
+      'var(--tw-backdrop-invert,)',
+      'var(--tw-backdrop-opacity,)',
+      'var(--tw-backdrop-saturate,)',
+      'var(--tw-backdrop-sepia,)',
     ].join(' ')
 
     let filterProperties = () => {
@@ -4223,10 +2954,6 @@ export function createUtilities(theme: Theme) {
         property('--tw-opacity'),
         property('--tw-saturate'),
         property('--tw-sepia'),
-        property('--tw-drop-shadow'),
-        property('--tw-drop-shadow-color'),
-        property('--tw-drop-shadow-alpha', '100%', '<percentage>'),
-        property('--tw-drop-shadow-size'),
       ])
     }
 
@@ -4245,7 +2972,7 @@ export function createUtilities(theme: Theme) {
     }
 
     utilities.functional('filter', (candidate) => {
-      if (candidate.modifier) return
+      if (candidate.negative) return
 
       if (candidate.value === null) {
         return [filterProperties(), decl('filter', cssFilterValue)]
@@ -4262,7 +2989,7 @@ export function createUtilities(theme: Theme) {
     })
 
     utilities.functional('backdrop-filter', (candidate) => {
-      if (candidate.modifier) return
+      if (candidate.negative) return
 
       if (candidate.value === null) {
         return [
@@ -4292,9 +3019,6 @@ export function createUtilities(theme: Theme) {
         decl('--tw-blur', `blur(${value})`),
         decl('filter', cssFilterValue),
       ],
-      staticValues: {
-        none: [filterProperties(), decl('--tw-blur', ' '), decl('filter', cssFilterValue)],
-      },
     })
 
     functionalUtility('backdrop-blur', {
@@ -4305,22 +3029,11 @@ export function createUtilities(theme: Theme) {
         decl('-webkit-backdrop-filter', cssBackdropFilterValue),
         decl('backdrop-filter', cssBackdropFilterValue),
       ],
-      staticValues: {
-        none: [
-          backdropFilterProperties(),
-          decl('--tw-backdrop-blur', ' '),
-          decl('-webkit-backdrop-filter', cssBackdropFilterValue),
-          decl('backdrop-filter', cssBackdropFilterValue),
-        ],
-      },
     })
 
     functionalUtility('brightness', {
       themeKeys: ['--brightness'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       handle: (value) => [
         filterProperties(),
         decl('--tw-brightness', `brightness(${value})`),
@@ -4330,10 +3043,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('backdrop-brightness', {
       themeKeys: ['--backdrop-brightness', '--brightness'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       handle: (value) => [
         backdropFilterProperties(),
         decl('--tw-backdrop-brightness', `brightness(${value})`),
@@ -4358,10 +3068,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('contrast', {
       themeKeys: ['--contrast'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       handle: (value) => [
         filterProperties(),
         decl('--tw-contrast', `contrast(${value})`),
@@ -4371,10 +3078,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('backdrop-contrast', {
       themeKeys: ['--backdrop-contrast', '--contrast'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       handle: (value) => [
         backdropFilterProperties(),
         decl('--tw-backdrop-contrast', `contrast(${value})`),
@@ -4399,10 +3103,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('grayscale', {
       themeKeys: ['--grayscale'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       defaultValue: '100%',
       handle: (value) => [
         filterProperties(),
@@ -4413,10 +3114,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('backdrop-grayscale', {
       themeKeys: ['--backdrop-grayscale', '--grayscale'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       defaultValue: '100%',
       handle: (value) => [
         backdropFilterProperties(),
@@ -4443,12 +3141,8 @@ export function createUtilities(theme: Theme) {
     ])
 
     functionalUtility('hue-rotate', {
-      supportsNegative: true,
       themeKeys: ['--hue-rotate'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}deg`
-      },
+      handleBareValue: ({ value }) => `${value}deg`,
       handle: (value) => [
         filterProperties(),
         decl('--tw-hue-rotate', `hue-rotate(${value})`),
@@ -4457,12 +3151,8 @@ export function createUtilities(theme: Theme) {
     })
 
     functionalUtility('backdrop-hue-rotate', {
-      supportsNegative: true,
       themeKeys: ['--backdrop-hue-rotate', '--hue-rotate'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}deg`
-      },
+      handleBareValue: ({ value }) => `${value}deg`,
       handle: (value) => [
         backdropFilterProperties(),
         decl('--tw-backdrop-hue-rotate', `hue-rotate(${value})`),
@@ -4487,10 +3177,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('invert', {
       themeKeys: ['--invert'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       defaultValue: '100%',
       handle: (value) => [
         filterProperties(),
@@ -4501,10 +3188,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('backdrop-invert', {
       themeKeys: ['--backdrop-invert', '--invert'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       defaultValue: '100%',
       handle: (value) => [
         backdropFilterProperties(),
@@ -4532,10 +3216,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('saturate', {
       themeKeys: ['--saturate'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       handle: (value) => [
         filterProperties(),
         decl('--tw-saturate', `saturate(${value})`),
@@ -4545,10 +3226,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('backdrop-saturate', {
       themeKeys: ['--backdrop-saturate', '--saturate'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       handle: (value) => [
         backdropFilterProperties(),
         decl('--tw-backdrop-saturate', `saturate(${value})`),
@@ -4573,10 +3251,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('sepia', {
       themeKeys: ['--sepia'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       defaultValue: '100%',
       handle: (value) => [
         filterProperties(),
@@ -4587,10 +3262,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('backdrop-sepia', {
       themeKeys: ['--backdrop-sepia', '--sepia'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       defaultValue: '100%',
       handle: (value) => [
         backdropFilterProperties(),
@@ -4616,164 +3288,23 @@ export function createUtilities(theme: Theme) {
       },
     ])
 
-    staticUtility('drop-shadow-none', [
-      filterProperties,
-      ['--tw-drop-shadow', ' '],
-      ['filter', cssFilterValue],
-    ])
-
-    utilities.functional('drop-shadow', (candidate) => {
-      let alpha: string | undefined
-
-      if (candidate.modifier) {
-        if (candidate.modifier.kind === 'arbitrary') {
-          alpha = candidate.modifier.value
-        } else {
-          if (isValidOpacityValue(candidate.modifier.value)) {
-            alpha = `${candidate.modifier.value}%`
-          }
-        }
-      }
-
-      if (!candidate.value) {
-        let value = theme.get(['--drop-shadow'])
-        let resolved = theme.resolve(null, ['--drop-shadow'])
-        if (value === null || resolved === null) return
-        if (candidate.modifier && !alpha) return
-
-        return [
-          filterProperties(),
-          decl('--tw-drop-shadow-alpha', alpha),
-          ...alphaReplacedDropShadowProperties(
-            '--tw-drop-shadow-size',
-            value,
-            alpha,
-            (color) => `var(--tw-drop-shadow-color, ${color})`,
-          ),
-          decl(
-            '--tw-drop-shadow',
-            segment(resolved, ',')
-              .map((value) => `drop-shadow(${value})`)
-              .join(' '),
-          ),
-          decl('filter', cssFilterValue),
-        ]
-      }
-
-      if (candidate.value.kind === 'arbitrary') {
-        let value: string | null = candidate.value.value
-        let type = candidate.value.dataType ?? inferDataType(value, ['color'])
-
-        switch (type) {
-          case 'color': {
-            value = asColor(value, candidate.modifier, theme)
-            if (value === null) return
-            return [
-              filterProperties(),
-              decl('--tw-drop-shadow-color', withAlpha(value, 'var(--tw-drop-shadow-alpha)')),
-              decl('--tw-drop-shadow', `var(--tw-drop-shadow-size)`),
-            ]
-          }
-          default: {
-            if (candidate.modifier && !alpha) return
-
-            return [
-              filterProperties(),
-              decl('--tw-drop-shadow-alpha', alpha),
-              ...alphaReplacedDropShadowProperties(
-                '--tw-drop-shadow-size',
-                value,
-                alpha,
-                (color) => `var(--tw-drop-shadow-color, ${color})`,
-              ),
-              decl('--tw-drop-shadow', `var(--tw-drop-shadow-size)`),
-              decl('filter', cssFilterValue),
-            ]
-          }
-        }
-      }
-
-      // Shadow size
-      {
-        let value = theme.get([`--drop-shadow-${candidate.value.value}`])
-        let resolved = theme.resolve(candidate.value.value, ['--drop-shadow'])
-        if (value && resolved) {
-          if (candidate.modifier && !alpha) return
-
-          if (alpha) {
-            return [
-              filterProperties(),
-              decl('--tw-drop-shadow-alpha', alpha),
-              ...alphaReplacedDropShadowProperties(
-                '--tw-drop-shadow-size',
-                value,
-                alpha,
-                (color) => `var(--tw-drop-shadow-color, ${color})`,
-              ),
-              decl('--tw-drop-shadow', `var(--tw-drop-shadow-size)`),
-              decl('filter', cssFilterValue),
-            ]
-          }
-
-          return [
-            filterProperties(),
-            decl('--tw-drop-shadow-alpha', alpha),
-            ...alphaReplacedDropShadowProperties(
-              '--tw-drop-shadow-size',
-              value,
-              alpha,
-              (color) => `var(--tw-drop-shadow-color, ${color})`,
-            ),
-            decl(
-              '--tw-drop-shadow',
-              segment(resolved, ',')
-                .map((value) => `drop-shadow(${value})`)
-                .join(' '),
-            ),
-            decl('filter', cssFilterValue),
-          ]
-        }
-      }
-
-      // Shadow color
-      {
-        let value = resolveThemeColor(candidate, theme, ['--drop-shadow-color', '--color'])
-        if (value) {
-          if (value === 'inherit') {
-            return [
-              filterProperties(),
-              decl('--tw-drop-shadow-color', 'inherit'),
-              decl('--tw-drop-shadow', `var(--tw-drop-shadow-size)`),
-            ]
-          }
-
-          return [
-            filterProperties(),
-            decl('--tw-drop-shadow-color', withAlpha(value, 'var(--tw-drop-shadow-alpha)')),
-            decl('--tw-drop-shadow', `var(--tw-drop-shadow-size)`),
-          ]
-        }
-      }
+    functionalUtility('drop-shadow', {
+      themeKeys: ['--drop-shadow'],
+      handle: (value) => [
+        filterProperties(),
+        decl(
+          '--tw-drop-shadow',
+          segment(value, ',')
+            .map((v) => `drop-shadow(${v})`)
+            .join(' '),
+        ),
+        decl('filter', cssFilterValue),
+      ],
     })
 
-    suggest('drop-shadow', () => [
-      {
-        values: ['current', 'inherit', 'transparent'],
-        valueThemeKeys: ['--drop-shadow-color', '--color'],
-        modifierThemeKeys: ['--opacity'],
-        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      },
-      {
-        valueThemeKeys: ['--drop-shadow'],
-      },
-    ])
-
     functionalUtility('backdrop-opacity', {
       themeKeys: ['--backdrop-opacity', '--opacity'],
-      handleBareValue: ({ value }) => {
-        if (!isValidOpacityValue(value)) return null
-        return `${value}%`
-      },
+      handleBareValue: ({ value }) => `${value}%`,
       handle: (value) => [
         backdropFilterProperties(),
         decl('--tw-backdrop-opacity', `opacity(${value})`),
@@ -4791,103 +3322,84 @@ export function createUtilities(theme: Theme) {
   }
 
   {
-    let defaultTimingFunction = `var(--tw-ease, ${theme.resolve(null, ['--default-transition-timing-function']) ?? 'ease'})`
-    let defaultDuration = `var(--tw-duration, ${theme.resolve(null, ['--default-transition-duration']) ?? '0s'})`
+    let defaultTimingFunction = 'var(--default-transition-timing-function)'
+    let defaultDuration = 'var(--default-transition-duration)'
+
+    staticUtility('transition-none', [['transition-property', 'none']])
+    staticUtility('transition-all', [
+      ['transition-property', 'all'],
+      ['transition-timing-function', defaultTimingFunction],
+      ['transition-duration', defaultDuration],
+    ])
+    staticUtility('transition-colors', [
+      [
+        'transition-property',
+        'color, background-color, border-color, text-decoration-color, fill, stroke',
+      ],
+      ['transition-timing-function', defaultTimingFunction],
+      ['transition-duration', defaultDuration],
+    ])
+    staticUtility('transition-opacity', [
+      ['transition-property', 'opacity'],
+      ['transition-timing-function', defaultTimingFunction],
+      ['transition-duration', defaultDuration],
+    ])
+    staticUtility('transition-shadow', [
+      ['transition-property', 'box-shadow'],
+      ['transition-timing-function', defaultTimingFunction],
+      ['transition-duration', defaultDuration],
+    ])
+    staticUtility('transition-transform', [
+      ['transition-property', 'transform, translate, scale, rotate'],
+      ['transition-timing-function', defaultTimingFunction],
+      ['transition-duration', defaultDuration],
+    ])
 
     functionalUtility('transition', {
       defaultValue:
-        'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events',
+        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter',
       themeKeys: ['--transition-property'],
       handle: (value) => [
         decl('transition-property', value),
         decl('transition-timing-function', defaultTimingFunction),
         decl('transition-duration', defaultDuration),
       ],
-      staticValues: {
-        none: [decl('transition-property', 'none')],
-        all: [
-          decl('transition-property', 'all'),
-          decl('transition-timing-function', defaultTimingFunction),
-          decl('transition-duration', defaultDuration),
-        ],
-        colors: [
-          decl(
-            'transition-property',
-            'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to',
-          ),
-          decl('transition-timing-function', defaultTimingFunction),
-          decl('transition-duration', defaultDuration),
-        ],
-        opacity: [
-          decl('transition-property', 'opacity'),
-          decl('transition-timing-function', defaultTimingFunction),
-          decl('transition-duration', defaultDuration),
-        ],
-        shadow: [
-          decl('transition-property', 'box-shadow'),
-          decl('transition-timing-function', defaultTimingFunction),
-          decl('transition-duration', defaultDuration),
-        ],
-        transform: [
-          decl('transition-property', 'transform, translate, scale, rotate'),
-          decl('transition-timing-function', defaultTimingFunction),
-          decl('transition-duration', defaultDuration),
-        ],
-      },
     })
 
-    staticUtility('transition-discrete', [['transition-behavior', 'allow-discrete']])
-    staticUtility('transition-normal', [['transition-behavior', 'normal']])
-
     functionalUtility('delay', {
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}ms`
-      },
+      handleBareValue: ({ value }) => `${value}ms`,
       themeKeys: ['--transition-delay'],
       handle: (value) => [decl('transition-delay', value)],
     })
 
-    {
-      let transitionDurationProperty = () => {
-        return atRoot([property('--tw-duration')])
+    utilities.functional('duration', (candidate) => {
+      // This utility doesn't support negative values.
+      if (candidate.negative) return
+
+      // This utility doesn't support `DEFAULT` values.
+      if (!candidate.value) return
+
+      // Find the actual CSS value that the candidate value maps to.
+      let value: string | null = null
+
+      if (candidate.value.kind === 'arbitrary') {
+        value = candidate.value.value
+      } else {
+        value = theme.resolve(candidate.value.fraction ?? candidate.value.value, [
+          '--transition-duration',
+        ])
+
+        if (value === null && !Number.isNaN(Number(candidate.value.value))) {
+          value = `${candidate.value.value}ms`
+        }
       }
 
-      staticUtility('duration-initial', [transitionDurationProperty, ['--tw-duration', 'initial']])
+      // If the candidate value (like the `sm` in `max-w-sm`) doesn't resolve to
+      // an actual value, don't generate any rules.
+      if (value === null) return
 
-      utilities.functional('duration', (candidate) => {
-        // This utility doesn't support modifiers.
-        if (candidate.modifier) return
-
-        // This utility doesn't support `DEFAULT` values.
-        if (!candidate.value) return
-
-        // Find the actual CSS value that the candidate value maps to.
-        let value: string | null = null
-
-        if (candidate.value.kind === 'arbitrary') {
-          value = candidate.value.value
-        } else {
-          value = theme.resolve(candidate.value.fraction ?? candidate.value.value, [
-            '--transition-duration',
-          ])
-
-          if (value === null && isPositiveInteger(candidate.value.value)) {
-            value = `${candidate.value.value}ms`
-          }
-        }
-
-        // If the candidate value (like the `sm` in `max-w-sm`) doesn't resolve to
-        // an actual value, don't generate any rules.
-        if (value === null) return
-
-        return [
-          transitionDurationProperty(),
-          decl('--tw-duration', value),
-          decl('transition-duration', value),
-        ]
-      })
-    }
+      return [decl('transition-duration', value)]
+    })
 
     suggest('delay', () => [
       {
@@ -4904,28 +3416,10 @@ export function createUtilities(theme: Theme) {
     ])
   }
 
-  {
-    let transitionTimingFunctionProperty = () => {
-      return atRoot([property('--tw-ease')])
-    }
-
-    functionalUtility('ease', {
-      themeKeys: ['--ease'],
-      handle: (value) => [
-        transitionTimingFunctionProperty(),
-        decl('--tw-ease', value),
-        decl('transition-timing-function', value),
-      ],
-      staticValues: {
-        initial: [transitionTimingFunctionProperty(), decl('--tw-ease', 'initial')],
-        linear: [
-          transitionTimingFunctionProperty(),
-          decl('--tw-ease', 'linear'),
-          decl('transition-timing-function', 'linear'),
-        ],
-      },
-    })
-  }
+  functionalUtility('ease', {
+    themeKeys: ['--transition-timing-function'],
+    handle: (value) => [decl('transition-timing-function', value)],
+  })
 
   staticUtility('will-change-auto', [['will-change', 'auto']])
   staticUtility('will-change-scroll', [['will-change', 'scroll-position']])
@@ -4941,9 +3435,7 @@ export function createUtilities(theme: Theme) {
     ['content', 'none'],
   ])
   functionalUtility('content', {
-    // BC: We only read from the `--content` theme key for compatibility reasons. It's recommended
-    // to use the utility with arbitrary values instead.
-    themeKeys: ['--content'],
+    themeKeys: [],
     handle: (value) => [
       atRoot([property('--tw-content', '""')]),
       decl('--tw-content', value),
@@ -4953,7 +3445,7 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssContainValue =
-      'var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, )'
+      'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'
     let cssContainProperties = () => {
       return atRoot([
         property('--tw-contain-size'),
@@ -5006,33 +3498,15 @@ export function createUtilities(theme: Theme) {
   staticUtility('forced-color-adjust-none', [['forced-color-adjust', 'none']])
   staticUtility('forced-color-adjust-auto', [['forced-color-adjust', 'auto']])
 
-  spacingUtility(
-    'leading',
-    ['--leading', '--spacing'],
-    (value) => [
-      atRoot([property('--tw-leading')]),
-      decl('--tw-leading', value),
-      decl('line-height', value),
-    ],
-    {
-      staticValues: {
-        none: [
-          atRoot([property('--tw-leading')]),
-          decl('--tw-leading', '1'),
-          decl('line-height', '1'),
-        ],
-      },
-    },
-  )
+  functionalUtility('leading', {
+    themeKeys: ['--line-height'],
+    handle: (value) => [decl('line-height', value)],
+  })
 
   functionalUtility('tracking', {
     supportsNegative: true,
-    themeKeys: ['--tracking'],
-    handle: (value) => [
-      atRoot([property('--tw-tracking')]),
-      decl('--tw-tracking', value),
-      decl('letter-spacing', value),
-    ],
+    themeKeys: ['--letter-spacing'],
+    handle: (value) => [decl('letter-spacing', value)],
   })
 
   staticUtility('antialiased', [
@@ -5047,7 +3521,7 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssFontVariantNumericValue =
-      'var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )'
+      'var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)'
     let fontVariantNumericProperties = () => {
       return atRoot([
         property('--tw-ordinal'),
@@ -5111,27 +3585,17 @@ export function createUtilities(theme: Theme) {
 
   {
     let outlineProperties = () => {
-      return atRoot([property('--tw-outline-style', 'solid')])
+      return atRoot([property('--tw-outline-style', 'solid', '<custom-ident>')])
     }
 
-    utilities.static('outline-hidden', () => {
-      return [
-        decl('--tw-outline-style', 'none'),
-        decl('outline-style', 'none'),
-        atRule('@media', '(forced-colors: active)', [
-          decl('outline', '2px solid transparent'),
-          decl('outline-offset', '2px'),
-        ]),
-      ]
-    })
+    staticUtility('outline-none', [
+      ['outline', '2px solid transparent'],
+      ['outline-offset', '2px'],
+    ])
 
     /**
      * @css `outline-style`
      */
-    staticUtility('outline-none', [
-      ['--tw-outline-style', 'none'],
-      ['outline-style', 'none'],
-    ])
     staticUtility('outline-solid', [
       ['--tw-outline-style', 'solid'],
       ['outline-style', 'solid'],
@@ -5150,13 +3614,13 @@ export function createUtilities(theme: Theme) {
     ])
 
     utilities.functional('outline', (candidate) => {
+      if (candidate.negative) return
+
       if (candidate.value === null) {
-        if (candidate.modifier) return
-        let value = theme.get(['--default-outline-width']) ?? '1px'
         return [
           outlineProperties(),
           decl('outline-style', 'var(--tw-outline-style)'),
-          decl('outline-width', value),
+          decl('outline-width', '1px'),
         ]
       }
 
@@ -5170,7 +3634,6 @@ export function createUtilities(theme: Theme) {
           case 'length':
           case 'number':
           case 'percentage': {
-            if (candidate.modifier) return
             return [
               outlineProperties(),
               decl('outline-style', 'var(--tw-outline-style)'),
@@ -5196,7 +3659,6 @@ export function createUtilities(theme: Theme) {
 
       // `outline-width` property
       {
-        if (candidate.modifier) return
         let value = theme.resolve(candidate.value.value, ['--outline-width'])
         if (value) {
           return [
@@ -5204,7 +3666,7 @@ export function createUtilities(theme: Theme) {
             decl('outline-style', 'var(--tw-outline-style)'),
             decl('outline-width', value),
           ]
-        } else if (isPositiveInteger(candidate.value.value)) {
+        } else if (!Number.isNaN(Number(candidate.value.value))) {
           return [
             outlineProperties(),
             decl('outline-style', 'var(--tw-outline-style)'),
@@ -5216,10 +3678,10 @@ export function createUtilities(theme: Theme) {
 
     suggest('outline', () => [
       {
-        values: ['current', 'inherit', 'transparent'],
+        values: ['current', 'transparent'],
         valueThemeKeys: ['--outline-color', '--color'],
-        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ['--opacity'],
         hasDefaultValue: true,
       },
       {
@@ -5231,16 +3693,12 @@ export function createUtilities(theme: Theme) {
     functionalUtility('outline-offset', {
       supportsNegative: true,
       themeKeys: ['--outline-offset'],
-      handleBareValue: ({ value }) => {
-        if (!isPositiveInteger(value)) return null
-        return `${value}px`
-      },
+      handleBareValue: ({ value }) => `${value}px`,
       handle: (value) => [decl('outline-offset', value)],
     })
 
     suggest('outline-offset', () => [
       {
-        supportsNegative: true,
         values: ['0', '1', '2', '4', '8'],
         valueThemeKeys: ['--outline-offset'],
       },
@@ -5249,10 +3707,7 @@ export function createUtilities(theme: Theme) {
 
   functionalUtility('opacity', {
     themeKeys: ['--opacity'],
-    handleBareValue: ({ value }) => {
-      if (!isValidOpacityValue(value)) return null
-      return `${value}%`
-    },
+    handleBareValue: ({ value }) => `${value}%`,
     handle: (value) => [decl('opacity', value)],
   })
 
@@ -5263,17 +3718,12 @@ export function createUtilities(theme: Theme) {
     },
   ])
 
+  staticUtility('underline-offset-auto', [['text-underline-offset', 'auto']])
   functionalUtility('underline-offset', {
     supportsNegative: true,
     themeKeys: ['--text-underline-offset'],
-    handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
-      return `${value}px`
-    },
+    handleBareValue: ({ value }) => `${value}px`,
     handle: (value) => [decl('text-underline-offset', value)],
-    staticValues: {
-      auto: [decl('text-underline-offset', 'auto')],
-    },
   })
 
   suggest('underline-offset', () => [
@@ -5285,7 +3735,7 @@ export function createUtilities(theme: Theme) {
   ])
 
   utilities.functional('text', (candidate) => {
-    if (!candidate.value) return
+    if (candidate.negative || !candidate.value) return
 
     if (candidate.value.kind === 'arbitrary') {
       let value: string | null = candidate.value.value
@@ -5303,24 +3753,11 @@ export function createUtilities(theme: Theme) {
             let modifier =
               candidate.modifier.kind === 'arbitrary'
                 ? candidate.modifier.value
-                : theme.resolve(candidate.modifier.value, ['--leading'])
-
-            if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) {
-              let multiplier = theme.resolve(null, ['--spacing'])
-              if (!multiplier) return null
-              modifier = `--spacing(${candidate.modifier.value})`
-            }
-
-            // Shorthand for `leading-none`
-            if (!modifier && candidate.modifier.value === 'none') {
-              modifier = '1'
-            }
+                : theme.resolve(candidate.modifier.value, ['--line-height'])
 
             if (modifier) {
               return [decl('font-size', value), decl('line-height', modifier)]
             }
-
-            return null
           }
 
           return [decl('font-size', value)]
@@ -5346,7 +3783,7 @@ export function createUtilities(theme: Theme) {
     {
       let value = theme.resolveWith(
         candidate.value.value,
-        ['--text'],
+        ['--font-size'],
         ['--line-height', '--letter-spacing', '--font-weight'],
       )
       if (value) {
@@ -5356,22 +3793,7 @@ export function createUtilities(theme: Theme) {
           let modifier =
             candidate.modifier.kind === 'arbitrary'
               ? candidate.modifier.value
-              : theme.resolve(candidate.modifier.value, ['--leading'])
-
-          if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) {
-            let multiplier = theme.resolve(null, ['--spacing'])
-            if (!multiplier) return null
-            modifier = `--spacing(${candidate.modifier.value})`
-          }
-
-          // Shorthand for `leading-none`
-          if (!modifier && candidate.modifier.value === 'none') {
-            modifier = '1'
-          }
-
-          if (!modifier) {
-            return null
-          }
+              : theme.resolve(candidate.modifier.value, ['--line-height'])
 
           let declarations = [decl('font-size', fontSize)]
           modifier && declarations.push(decl('line-height', modifier))
@@ -5384,22 +3806,9 @@ export function createUtilities(theme: Theme) {
 
         return [
           decl('font-size', fontSize),
-          decl(
-            'line-height',
-            options['--line-height'] ? `var(--tw-leading, ${options['--line-height']})` : undefined,
-          ),
-          decl(
-            'letter-spacing',
-            options['--letter-spacing']
-              ? `var(--tw-tracking, ${options['--letter-spacing']})`
-              : undefined,
-          ),
-          decl(
-            'font-weight',
-            options['--font-weight']
-              ? `var(--tw-font-weight, ${options['--font-weight']})`
-              : undefined,
-          ),
+          decl('line-height', options['--line-height']),
+          decl('letter-spacing', options['--letter-spacing']),
+          decl('font-weight', options['--font-weight']),
         ]
       }
     }
@@ -5407,146 +3816,16 @@ export function createUtilities(theme: Theme) {
 
   suggest('text', () => [
     {
-      values: ['current', 'inherit', 'transparent'],
+      values: ['current', 'transparent'],
       valueThemeKeys: ['--text-color', '--color'],
-      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ['--opacity'],
     },
     {
       values: [],
-      valueThemeKeys: ['--text'],
+      valueThemeKeys: ['--font-size'],
       modifiers: [],
-      modifierThemeKeys: ['--leading'],
-    },
-  ])
-
-  let textShadowProperties = () => {
-    return atRoot([
-      property('--tw-text-shadow-color'),
-      property('--tw-text-shadow-alpha', '100%', '<percentage>'),
-    ])
-  }
-
-  staticUtility('text-shadow-initial', [
-    textShadowProperties,
-    ['--tw-text-shadow-color', 'initial'],
-  ])
-
-  utilities.functional('text-shadow', (candidate) => {
-    let alpha: string | undefined
-
-    if (candidate.modifier) {
-      if (candidate.modifier.kind === 'arbitrary') {
-        alpha = candidate.modifier.value
-      } else {
-        if (isValidOpacityValue(candidate.modifier.value)) {
-          alpha = `${candidate.modifier.value}%`
-        }
-      }
-    }
-
-    if (!candidate.value) {
-      let value = theme.get(['--text-shadow'])
-      if (value === null) return
-      if (candidate.modifier && !alpha) return
-
-      return [
-        textShadowProperties(),
-        decl('--tw-text-shadow-alpha', alpha),
-        ...alphaReplacedShadowProperties(
-          'text-shadow',
-          value,
-          alpha,
-          (color) => `var(--tw-text-shadow-color, ${color})`,
-        ),
-      ]
-    }
-
-    if (candidate.value.kind === 'arbitrary') {
-      let value: string | null = candidate.value.value
-      let type = candidate.value.dataType ?? inferDataType(value, ['color'])
-
-      switch (type) {
-        case 'color': {
-          value = asColor(value, candidate.modifier, theme)
-          if (value === null) return
-          return [
-            textShadowProperties(),
-            decl('--tw-text-shadow-color', withAlpha(value, 'var(--tw-text-shadow-alpha)')),
-          ]
-        }
-        default: {
-          if (candidate.modifier && !alpha) return
-
-          return [
-            textShadowProperties(),
-            decl('--tw-text-shadow-alpha', alpha),
-            ...alphaReplacedShadowProperties(
-              'text-shadow',
-              value,
-              alpha,
-              (color) => `var(--tw-text-shadow-color, ${color})`,
-            ),
-          ]
-        }
-      }
-    }
-
-    switch (candidate.value.value) {
-      case 'none':
-        if (candidate.modifier) return
-        return [textShadowProperties(), decl('text-shadow', 'none')]
-
-      case 'inherit':
-        if (candidate.modifier) return
-        return [textShadowProperties(), decl('--tw-text-shadow-color', 'inherit')]
-    }
-
-    // Shadow size
-    {
-      let value = theme.get([`--text-shadow-${candidate.value.value}`])
-      if (value) {
-        if (candidate.modifier && !alpha) return
-
-        return [
-          textShadowProperties(),
-          decl('--tw-text-shadow-alpha', alpha),
-          ...alphaReplacedShadowProperties(
-            'text-shadow',
-            value,
-            alpha,
-            (color) => `var(--tw-text-shadow-color, ${color})`,
-          ),
-        ]
-      }
-    }
-
-    // Shadow color
-    {
-      let value = resolveThemeColor(candidate, theme, ['--text-shadow-color', '--color'])
-      if (value) {
-        return [
-          textShadowProperties(),
-          decl('--tw-text-shadow-color', withAlpha(value, 'var(--tw-text-shadow-alpha)')),
-        ]
-      }
-    }
-  })
-
-  suggest('text-shadow', () => [
-    {
-      values: ['current', 'inherit', 'transparent'],
-      valueThemeKeys: ['--text-shadow-color', '--color'],
-      modifierThemeKeys: ['--opacity'],
-      modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-    },
-    {
-      values: ['none'],
-    },
-    {
-      valueThemeKeys: ['--text-shadow'],
-      modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      hasDefaultValue: theme.get(['--text-shadow']) !== null,
+      modifierThemeKeys: ['--line-height'],
     },
   ])
 
@@ -5563,11 +3842,9 @@ export function createUtilities(theme: Theme) {
     let boxShadowProperties = () => {
       return atRoot([
         property('--tw-shadow', nullShadow),
-        property('--tw-shadow-color'),
-        property('--tw-shadow-alpha', '100%', '<percentage>'),
+        property('--tw-shadow-colored', nullShadow),
         property('--tw-inset-shadow', nullShadow),
-        property('--tw-inset-shadow-color'),
-        property('--tw-inset-shadow-alpha', '100%', '<percentage>'),
+        property('--tw-inset-shadow-colored', nullShadow),
         property('--tw-ring-color'),
         property('--tw-ring-shadow', nullShadow),
         property('--tw-inset-ring-color'),
@@ -5581,35 +3858,17 @@ export function createUtilities(theme: Theme) {
       ])
     }
 
-    staticUtility('shadow-initial', [boxShadowProperties, ['--tw-shadow-color', 'initial']])
-
     utilities.functional('shadow', (candidate) => {
-      let alpha: string | undefined
-
-      if (candidate.modifier) {
-        if (candidate.modifier.kind === 'arbitrary') {
-          alpha = candidate.modifier.value
-        } else {
-          if (isValidOpacityValue(candidate.modifier.value)) {
-            alpha = `${candidate.modifier.value}%`
-          }
-        }
-      }
+      if (candidate.negative) return
 
       if (!candidate.value) {
         let value = theme.get(['--shadow'])
         if (value === null) return
-        if (candidate.modifier && !alpha) return
 
         return [
           boxShadowProperties(),
-          decl('--tw-shadow-alpha', alpha),
-          ...alphaReplacedShadowProperties(
-            '--tw-shadow',
-            value,
-            alpha,
-            (color) => `var(--tw-shadow-color, ${color})`,
-          ),
+          decl('--tw-shadow', value),
+          decl('--tw-shadow-colored', replaceShadowColors(value, 'var(--tw-shadow-color)')),
           decl('box-shadow', cssBoxShadowValue),
         ]
       }
@@ -5625,21 +3884,15 @@ export function createUtilities(theme: Theme) {
 
             return [
               boxShadowProperties(),
-              decl('--tw-shadow-color', withAlpha(value, 'var(--tw-shadow-alpha)')),
+              decl('--tw-shadow-color', value),
+              decl('--tw-shadow', 'var(--tw-shadow-colored)'),
             ]
           }
           default: {
-            if (candidate.modifier && !alpha) return
-
             return [
               boxShadowProperties(),
-              decl('--tw-shadow-alpha', alpha),
-              ...alphaReplacedShadowProperties(
-                '--tw-shadow',
-                value,
-                alpha,
-                (color) => `var(--tw-shadow-color, ${color})`,
-              ),
+              decl('--tw-shadow', value),
+              decl('--tw-shadow-colored', replaceShadowColors(value, 'var(--tw-shadow-color)')),
               decl('box-shadow', cssBoxShadowValue),
             ]
           }
@@ -5648,33 +3901,22 @@ export function createUtilities(theme: Theme) {
 
       switch (candidate.value.value) {
         case 'none':
-          if (candidate.modifier) return
           return [
             boxShadowProperties(),
             decl('--tw-shadow', nullShadow),
+            decl('--tw-shadow-colored', nullShadow),
             decl('box-shadow', cssBoxShadowValue),
           ]
-
-        case 'inherit':
-          if (candidate.modifier) return
-          return [boxShadowProperties(), decl('--tw-shadow-color', 'inherit')]
       }
 
       // Shadow size
       {
-        let value = theme.get([`--shadow-${candidate.value.value}`])
+        let value = theme.resolve(candidate.value.value, ['--shadow'])
         if (value) {
-          if (candidate.modifier && !alpha) return
-
           return [
             boxShadowProperties(),
-            decl('--tw-shadow-alpha', alpha),
-            ...alphaReplacedShadowProperties(
-              '--tw-shadow',
-              value,
-              alpha,
-              (color) => `var(--tw-shadow-color, ${color})`,
-            ),
+            decl('--tw-shadow', value),
+            decl('--tw-shadow-colored', replaceShadowColors(value, 'var(--tw-shadow-color)')),
             decl('box-shadow', cssBoxShadowValue),
           ]
         }
@@ -5686,7 +3928,8 @@ export function createUtilities(theme: Theme) {
         if (value) {
           return [
             boxShadowProperties(),
-            decl('--tw-shadow-color', withAlpha(value, 'var(--tw-shadow-alpha)')),
+            decl('--tw-shadow-color', value),
+            decl('--tw-shadow', 'var(--tw-shadow-colored)'),
           ]
         }
       }
@@ -5694,52 +3937,31 @@ export function createUtilities(theme: Theme) {
 
     suggest('shadow', () => [
       {
-        values: ['current', 'inherit', 'transparent'],
+        values: ['current', 'transparent'],
         valueThemeKeys: ['--box-shadow-color', '--color'],
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
         modifierThemeKeys: ['--opacity'],
-        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-      },
-      {
-        values: ['none'],
       },
       {
+        values: [],
         valueThemeKeys: ['--shadow'],
-        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        hasDefaultValue: theme.get(['--shadow']) !== null,
+        hasDefaultValue: true,
       },
     ])
 
-    staticUtility('inset-shadow-initial', [
-      boxShadowProperties,
-      ['--tw-inset-shadow-color', 'initial'],
-    ])
-
     utilities.functional('inset-shadow', (candidate) => {
-      let alpha: string | undefined
-
-      if (candidate.modifier) {
-        if (candidate.modifier.kind === 'arbitrary') {
-          alpha = candidate.modifier.value
-        } else {
-          if (isValidOpacityValue(candidate.modifier.value)) {
-            alpha = `${candidate.modifier.value}%`
-          }
-        }
-      }
+      if (candidate.negative) return
 
       if (!candidate.value) {
         let value = theme.get(['--inset-shadow'])
         if (value === null) return
-        if (candidate.modifier && !alpha) return
 
         return [
           boxShadowProperties(),
-          decl('--tw-inset-shadow-alpha', alpha),
-          ...alphaReplacedShadowProperties(
-            '--tw-inset-shadow',
-            value,
-            alpha,
-            (color) => `var(--tw-inset-shadow-color, ${color})`,
+          decl('--tw-inset-shadow', value),
+          decl(
+            '--tw-inset-shadow-colored',
+            replaceShadowColors(value, 'var(--tw-inset-shadow-color)'),
           ),
           decl('box-shadow', cssBoxShadowValue),
         ]
@@ -5756,21 +3978,17 @@ export function createUtilities(theme: Theme) {
 
             return [
               boxShadowProperties(),
-              decl('--tw-inset-shadow-color', withAlpha(value, 'var(--tw-inset-shadow-alpha)')),
+              decl('--tw-inset-shadow-color', value),
+              decl('--tw-inset-shadow', 'var(--tw-inset-shadow-colored)'),
             ]
           }
           default: {
-            if (candidate.modifier && !alpha) return
-
             return [
               boxShadowProperties(),
-              decl('--tw-inset-shadow-alpha', alpha),
-              ...alphaReplacedShadowProperties(
-                '--tw-inset-shadow',
-                value,
-                alpha,
-                (color) => `var(--tw-inset-shadow-color, ${color})`,
-                'inset',
+              decl('--tw-inset-shadow', `inset ${value}`),
+              decl(
+                '--tw-inset-shadow-colored',
+                replaceShadowColors(`inset ${value}`, 'var(--tw-inset-shadow-color)'),
               ),
               decl('box-shadow', cssBoxShadowValue),
             ]
@@ -5780,33 +3998,24 @@ export function createUtilities(theme: Theme) {
 
       switch (candidate.value.value) {
         case 'none':
-          if (candidate.modifier) return
           return [
             boxShadowProperties(),
-            decl('--tw-inset-shadow', `inset ${nullShadow}`),
+            decl('--tw-inset-shadow', nullShadow),
+            decl('--tw-inset-shadow-colored', nullShadow),
             decl('box-shadow', cssBoxShadowValue),
           ]
-
-        case 'inherit':
-          if (candidate.modifier) return
-          return [boxShadowProperties(), decl('--tw-inset-shadow-color', 'inherit')]
       }
 
       // Shadow size
       {
-        let value = theme.get([`--inset-shadow-${candidate.value.value}`])
-
+        let value = theme.resolve(candidate.value.value, ['--inset-shadow'])
         if (value) {
-          if (candidate.modifier && !alpha) return
-
           return [
             boxShadowProperties(),
-            decl('--tw-inset-shadow-alpha', alpha),
-            ...alphaReplacedShadowProperties(
-              '--tw-inset-shadow',
-              value,
-              alpha,
-              (color) => `var(--tw-inset-shadow-color, ${color})`,
+            decl('--tw-inset-shadow', value),
+            decl(
+              '--tw-inset-shadow-colored',
+              replaceShadowColors(value, 'var(--tw-inset-shadow-color)'),
             ),
             decl('box-shadow', cssBoxShadowValue),
           ]
@@ -5819,7 +4028,8 @@ export function createUtilities(theme: Theme) {
         if (value) {
           return [
             boxShadowProperties(),
-            decl('--tw-inset-shadow-color', withAlpha(value, 'var(--tw-inset-shadow-alpha)')),
+            decl('--tw-inset-shadow-color', value),
+            decl('--tw-inset-shadow', 'var(--tw-inset-shadow-colored)'),
           ]
         }
       }
@@ -5827,30 +4037,28 @@ export function createUtilities(theme: Theme) {
 
     suggest('inset-shadow', () => [
       {
-        values: ['current', 'inherit', 'transparent'],
+        values: ['current', 'transparent'],
         valueThemeKeys: ['--box-shadow-color', '--color'],
+        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
         modifierThemeKeys: ['--opacity'],
-        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
       },
       {
-        values: ['none'],
-      },
-      {
-        valueThemeKeys: ['--inset-shadow'],
-        modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
-        hasDefaultValue: theme.get(['--inset-shadow']) !== null,
+        values: [],
+        valueThemeKeys: ['--shadow'],
+        hasDefaultValue: true,
       },
     ])
 
     staticUtility('ring-inset', [boxShadowProperties, ['--tw-ring-inset', 'inset']])
 
-    let defaultRingColor = theme.get(['--default-ring-color']) ?? 'currentcolor'
+    let defaultRingColor = theme.get(['--default-ring-color']) ?? 'currentColor'
     function ringShadowValue(value: string) {
-      return `var(--tw-ring-inset, ) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color, ${defaultRingColor})`
+      return `var(--tw-ring-inset,) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color, ${defaultRingColor})`
     }
     utilities.functional('ring', (candidate) => {
+      if (candidate.negative) return
+
       if (!candidate.value) {
-        if (candidate.modifier) return
         let value = theme.get(['--default-ring-width']) ?? '1px'
         return [
           boxShadowProperties(),
@@ -5865,7 +4073,6 @@ export function createUtilities(theme: Theme) {
 
         switch (type) {
           case 'length': {
-            if (candidate.modifier) return
             return [
               boxShadowProperties(),
               decl('--tw-ring-shadow', ringShadowValue(value)),
@@ -5891,9 +4098,8 @@ export function createUtilities(theme: Theme) {
 
       // Ring width
       {
-        if (candidate.modifier) return
         let value = theme.resolve(candidate.value.value, ['--ring-width'])
-        if (value === null && isPositiveInteger(candidate.value.value)) {
+        if (value === null && !Number.isNaN(Number(candidate.value.value))) {
           value = `${candidate.value.value}px`
         }
         if (value) {
@@ -5908,10 +4114,10 @@ export function createUtilities(theme: Theme) {
 
     suggest('ring', () => [
       {
-        values: ['current', 'inherit', 'transparent'],
+        values: ['current', 'transparent'],
         valueThemeKeys: ['--ring-color', '--color'],
-        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ['--opacity'],
       },
       {
         values: ['0', '1', '2', '4', '8'],
@@ -5921,11 +4127,12 @@ export function createUtilities(theme: Theme) {
     ])
 
     function insetRingShadowValue(value: string) {
-      return `inset 0 0 0 ${value} var(--tw-inset-ring-color, currentcolor)`
+      return `inset 0 0 0 ${value} var(--tw-inset-ring-color, currentColor)`
     }
     utilities.functional('inset-ring', (candidate) => {
+      if (candidate.negative) return
+
       if (!candidate.value) {
-        if (candidate.modifier) return
         return [
           boxShadowProperties(),
           decl('--tw-inset-ring-shadow', insetRingShadowValue('1px')),
@@ -5939,7 +4146,6 @@ export function createUtilities(theme: Theme) {
 
         switch (type) {
           case 'length': {
-            if (candidate.modifier) return
             return [
               boxShadowProperties(),
               decl('--tw-inset-ring-shadow', insetRingShadowValue(value)),
@@ -5965,9 +4171,8 @@ export function createUtilities(theme: Theme) {
 
       // Ring width
       {
-        if (candidate.modifier) return
         let value = theme.resolve(candidate.value.value, ['--ring-width'])
-        if (value === null && isPositiveInteger(candidate.value.value)) {
+        if (value === null && !Number.isNaN(Number(candidate.value.value))) {
           value = `${candidate.value.value}px`
         }
         if (value) {
@@ -5982,10 +4187,10 @@ export function createUtilities(theme: Theme) {
 
     suggest('inset-ring', () => [
       {
-        values: ['current', 'inherit', 'transparent'],
+        values: ['current', 'transparent'],
         valueThemeKeys: ['--ring-color', '--color'],
-        modifierThemeKeys: ['--opacity'],
         modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        modifierThemeKeys: ['--opacity'],
       },
       {
         values: ['0', '1', '2', '4', '8'],
@@ -5995,9 +4200,9 @@ export function createUtilities(theme: Theme) {
     ])
 
     let ringOffsetShadowValue =
-      'var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)'
+      'var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)'
     utilities.functional('ring-offset', (candidate) => {
-      if (!candidate.value) return
+      if (candidate.negative || !candidate.value) return
 
       if (candidate.value.kind === 'arbitrary') {
         let value: string | null = candidate.value.value
@@ -6005,7 +4210,6 @@ export function createUtilities(theme: Theme) {
 
         switch (type) {
           case 'length': {
-            if (candidate.modifier) return
             return [
               decl('--tw-ring-offset-width', value),
               decl('--tw-ring-offset-shadow', ringOffsetShadowValue),
@@ -6024,13 +4228,11 @@ export function createUtilities(theme: Theme) {
       {
         let value = theme.resolve(candidate.value.value, ['--ring-offset-width'])
         if (value) {
-          if (candidate.modifier) return
           return [
             decl('--tw-ring-offset-width', value),
             decl('--tw-ring-offset-shadow', ringOffsetShadowValue),
           ]
-        } else if (isPositiveInteger(candidate.value.value)) {
-          if (candidate.modifier) return
+        } else if (!Number.isNaN(Number(candidate.value.value))) {
           return [
             decl('--tw-ring-offset-width', `${candidate.value.value}px`),
             decl('--tw-ring-offset-shadow', ringOffsetShadowValue),
@@ -6050,10 +4252,10 @@ export function createUtilities(theme: Theme) {
 
   suggest('ring-offset', () => [
     {
-      values: ['current', 'inherit', 'transparent'],
+      values: ['current', 'transparent'],
       valueThemeKeys: ['--ring-offset-color', '--color'],
-      modifierThemeKeys: ['--opacity'],
       modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+      modifierThemeKeys: ['--opacity'],
     },
     {
       values: ['0', '1', '2', '4', '8'],
@@ -6062,6 +4264,8 @@ export function createUtilities(theme: Theme) {
   ])
 
   utilities.functional('@container', (candidate) => {
+    if (candidate.negative) return
+
     let value: string | null = null
     if (candidate.value === null) {
       value = 'inline-size'
@@ -6069,8 +4273,6 @@ export function createUtilities(theme: Theme) {
       value = candidate.value.value
     } else if (candidate.value.kind === 'named' && candidate.value.value === 'normal') {
       value = 'normal'
-    } else if (candidate.value.kind === 'named' && candidate.value.value === 'size') {
-      value = 'size'
     }
 
     if (value === null) return
@@ -6086,778 +4288,9 @@ export function createUtilities(theme: Theme) {
     {
       values: ['normal'],
       valueThemeKeys: [],
-      hasDefaultValue: true,
+      hasDefaultValue: false,
     },
   ])
 
   return utilities
 }
-
-// Only allowed bare value data types, to prevent creating new syntax that we
-// typically don't support right now. E.g.: `--value(color)` would allow you to
-// use `text-#0088cc` as a valid utility, which is not what we want.
-export const BARE_VALUE_DATA_TYPES = [
-  'number', // 2.5
-  'integer', // 8
-  'ratio', // 2/3
-  'percentage', // 25%
-]
-
-export function createCssUtility(node: AtRule) {
-  // Allow escaped characters in the name for compatibility with formatters and
-  // other parsers, to ensure valid CSS syntax. E.g.: `@utility foo-1\/2`.
-  //
-  // Note: the actual utility will be `foo-1/2`
-  let name = unescape(node.params)
-
-  // Functional utilities. E.g.: `tab-size-*`
-  if (isValidFunctionalUtilityName(name)) {
-    // API:
-    //
-    // - `--value('literal')`         resolves a literal named value
-    // - `--value(number)`            resolves a bare value of type number
-    // - `--value([number])`          resolves an arbitrary value of type number
-    // - `--value(--color)`           resolves a theme value in the `color` namespace
-    // - `--value(--default(4))`      resolves to a default value when only the
-    //                                root of the functional utility was used.
-    // - `--value(number, [number])`  resolves a bare value of type number or an
-    //                                arbitrary value of type number in order.
-    //
-    // Rules:
-    //
-    // - If `--value(…)` does not resolve to a valid value, the declaration is
-    //   removed.
-    // - If a `--value(ratio)` resolves, the `--modifier(…)` cannot be used.
-    // - If a candidate looks like `foo-2/3`, then the `--value(ratio)` should
-    //   be used OR the `--value(…)` and `--modifier(…)` must be used. But not
-    //   both.
-    // - All parts of the candidate must resolve, otherwise it's not a valid
-    //   utility. E.g.:`
-    //   ```
-    //   @utility foo-* {
-    //     test: --value(number)
-    //   }
-    //   ```
-    //   If you then use `foo-1/2`, this is invalid, because the modifier is not used.
-
-    return (designSystem: DesignSystem) => {
-      let storage = {
-        '--value': {
-          usedSpacingInteger: false,
-          usedSpacingNumber: false,
-          themeKeys: new Set<`--${string}`>(),
-          literals: new Set<string>(),
-        },
-        '--modifier': {
-          usedSpacingInteger: false,
-          usedSpacingNumber: false,
-          themeKeys: new Set<`--${string}`>(),
-          literals: new Set<string>(),
-        },
-      }
-
-      // Pre-process the AST to make it easier to work with.
-      //
-      // - Normalize theme values used in `--value(…)` and `--modifier(…)`
-      //   functions.
-      // - Track information for suggestions
-      walk(node.nodes, (child) => {
-        if (child.kind !== 'declaration') return
-        if (!child.value) return
-        if (!child.value.includes('--value(') && !child.value.includes('--modifier(')) return
-
-        let declarationValueAst = ValueParser.parse(child.value)
-
-        // Required manipulations:
-        //
-        // - `--value(--spacing)`                 -> `--value(--spacing-*)`
-        // - `--value(--spacing- *)`              -> `--value(--spacing-*)`
-        // - `--value(--text- * --line-height)`   -> `--value(--text-*--line-height)`
-        // - `--value(--text --line-height)`      -> `--value(--text-*--line-height)`
-        // - `--value(--text-\\* --line-height)`  -> `--value(--text-*--line-height)`
-        // - `--value([ *])`                      -> `--value([*])`
-        //
-        // Once Prettier / Biome handle these better (e.g.: not crashing without
-        // `\\*` or not inserting whitespace) then most of these can go away.
-        walk(declarationValueAst, (fn) => {
-          if (fn.kind !== 'function') return
-
-          // Track usage of `--spacing(…)`
-          if (
-            fn.value === '--spacing' &&
-            // Quick bail check if we already know that `--value` and `--modifier` are
-            // using the full `--spacing` theme scale.
-            !(storage['--modifier'].usedSpacingNumber && storage['--value'].usedSpacingNumber)
-          ) {
-            walk(fn.nodes, (node) => {
-              if (node.kind !== 'function') return
-              if (node.value !== '--value' && node.value !== '--modifier') return
-              const key = node.value
-
-              for (let arg of node.nodes) {
-                if (arg.kind !== 'word') continue
-
-                if (arg.value === 'integer') {
-                  storage[key].usedSpacingInteger ||= true
-                } else if (arg.value === 'number') {
-                  storage[key].usedSpacingNumber ||= true
-
-                  // Once both `--value` and `--modifier` are using the full
-                  // `number` spacing scale, then there's no need to continue
-                  if (
-                    storage['--modifier'].usedSpacingNumber &&
-                    storage['--value'].usedSpacingNumber
-                  ) {
-                    return WalkAction.Stop
-                  }
-                }
-              }
-            })
-            return WalkAction.Continue
-          }
-
-          if (fn.value !== '--value' && fn.value !== '--modifier') return
-
-          let args = segment(ValueParser.toCss(fn.nodes), ',')
-          for (let [idx, arg] of args.entries()) {
-            arg = arg.trim()
-
-            // The value of `--default(…)` is emitted as-is, so it should not be
-            // normalized.
-            if (arg.startsWith('--default(')) {
-              args[idx] = arg
-              continue
-            }
-
-            // Transform escaped `\\*` -> `*`
-            arg = arg.replace(/\\\*/g, '*')
-
-            // Ensure `--value(--foo --bar)` becomes `--value(--foo-*--bar)`
-            arg = arg.replace(/--(.*?)\s--(.*?)/g, '--$1-*--$2')
-
-            // Remove whitespace, e.g.: `--value([ *])` -> `--value([*])`
-            arg = arg.replace(/\s+/g, '')
-
-            // Ensure multiple `-*` becomes a single `-*`
-            arg = arg.replace(/(-\*){2,}/g, '-*')
-
-            // Ensure trailing `-*` exists if `-*` isn't present yet
-            if (arg[0] === '-' && arg[1] === '-' && !arg.includes('(') && !arg.includes('-*')) {
-              arg += '-*'
-            }
-
-            args[idx] = arg
-          }
-          fn.nodes = ValueParser.parse(args.join(','))
-
-          for (let node of fn.nodes) {
-            // Track literal values
-            if (
-              node.kind === 'word' &&
-              (node.value[0] === '"' || node.value[0] === "'") &&
-              node.value[0] === node.value[node.value.length - 1]
-            ) {
-              let value = node.value.slice(1, -1)
-              storage[fn.value].literals.add(value)
-            }
-
-            // Track theme keys
-            else if (node.kind === 'word' && node.value[0] === '-' && node.value[1] === '-') {
-              let value = node.value.replace(/-\*.*$/g, '') as `--${string}`
-              storage[fn.value].themeKeys.add(value)
-            }
-
-            // Validate bare value data types
-            else if (
-              node.kind === 'word' &&
-              !(node.value[0] === '[' && node.value[node.value.length - 1] === ']') && // Ignore arbitrary values
-              !BARE_VALUE_DATA_TYPES.includes(node.value)
-            ) {
-              console.warn(
-                `Unsupported bare value data type: "${node.value}".\nOnly valid data types are: ${BARE_VALUE_DATA_TYPES.map((x) => `"${x}"`).join(', ')}.\n`,
-              )
-              // TODO: Once we properly track the location of the node, we can
-              //       clean this up in a better way.
-              let dataType = node.value
-              let copy = structuredClone(fn)
-              let sentinelValue = '¶'
-              walk(copy.nodes, (node) => {
-                if (node.kind === 'word' && node.value === dataType) {
-                  return WalkAction.ReplaceSkip({ kind: 'word', value: sentinelValue } as const)
-                }
-              })
-              let underline = '^'.repeat(ValueParser.toCss([node]).length)
-              let offset = ValueParser.toCss([copy]).indexOf(sentinelValue)
-              let output = [
-                '```css',
-                ValueParser.toCss([fn]),
-                ' '.repeat(offset) + underline,
-                '```',
-              ].join('\n')
-              console.warn(output)
-            }
-          }
-        })
-
-        child.value = ValueParser.toCss(declarationValueAst)
-      })
-
-      designSystem.utilities.functional(name.slice(0, -2), (candidate) => {
-        let atRule = cloneAstNode(node)
-
-        let value = candidate.value
-        let modifier = candidate.modifier
-
-        // Functional CSS utilities must resolve at least one `--value(…)`.
-        // Use `--default(…)` inside `--value(…)` for the omitted-value case.
-
-        // Whether `--value(…)` was used
-        let usedValueFn = false
-
-        // Whether any of the declarations successfully resolved a `--value(…)`.
-        // E.g:
-        // ```css
-        // @utility tab-size-* {
-        //   tab-size: --value(integer);
-        //   tab-size: --value(--tab-size);
-        //   tab-size: --value([integer]);
-        // }
-        // ```
-        // Any of these `tab-size` declarations have to resolve to a valid in
-        // order to make the utility valid.
-        let resolvedValueFn = false
-
-        // Whether `--modifier(…)` was used
-        let usedModifierFn = false
-
-        // Whether any of the declarations successfully resolved a `--modifier(…)`
-        let resolvedModifierFn = false
-
-        // A map of all declarations we replaced and their parent rules. We
-        // might need to remove some later on. E.g.: remove declarations that
-        // used `--value(number)` when `--value(ratio)` was resolved.
-        let resolvedDeclarations = new Map<Declaration, AtRule | Rule>()
-
-        // Whether `--value(ratio)` was resolved
-        let resolvedRatioValue = false
-
-        walk<AstNode>([atRule], (node, ctx) => {
-          let parent = ctx.parent
-          if (parent?.kind !== 'rule' && parent?.kind !== 'at-rule') return
-          if (node.kind !== 'declaration') return
-          if (!node.value) return
-
-          let shouldRemoveDeclaration = false
-
-          let valueAst = ValueParser.parse(node.value)
-          walk(valueAst, (fnNode) => {
-            if (fnNode.kind !== 'function') return
-
-            // Value function, e.g.: `--value(integer)`
-            if (fnNode.value === '--value') {
-              usedValueFn = true
-
-              let resolved = resolveValueFunction(value, fnNode, designSystem)
-              if (resolved) {
-                resolvedValueFn = true
-                if (resolved.ratio) {
-                  resolvedRatioValue = true
-                } else {
-                  resolvedDeclarations.set(node, parent)
-                }
-                return WalkAction.ReplaceSkip(resolved.nodes)
-              }
-
-              // Drop the declaration in case we couldn't resolve the value
-              shouldRemoveDeclaration = true
-              return WalkAction.Stop
-            }
-
-            // Modifier function, e.g.: `--modifier(integer)`
-            else if (fnNode.value === '--modifier') {
-              usedModifierFn = true
-
-              let resolved = resolveValueFunction(modifier, fnNode, designSystem)
-              if (resolved) {
-                resolvedModifierFn = true
-                return WalkAction.ReplaceSkip(resolved.nodes)
-              }
-
-              // Drop the declaration in case we couldn't resolve the value
-              shouldRemoveDeclaration = true
-              return WalkAction.Stop
-            }
-          })
-
-          if (shouldRemoveDeclaration) {
-            return WalkAction.ReplaceSkip([])
-          }
-
-          node.value = ValueParser.toCss(valueAst)
-        })
-
-        // Functional CSS utilities require `--value(…)`, and one of those
-        // branches must resolve for the candidate to be valid.
-        if (!usedValueFn || !resolvedValueFn) return null
-
-        // Used `--modifier(…)` but nothing resolved
-        if (usedModifierFn && !resolvedModifierFn && modifier !== null) return null
-
-        // Resolved `--value(ratio)` and `--modifier(…)`, which is invalid
-        if (resolvedRatioValue && resolvedModifierFn) return null
-
-        // When a candidate has a modifier, then the `--modifier(…)` must
-        // resolve correctly or the `--value(ratio)` must resolve correctly.
-        if (modifier && !resolvedRatioValue && !resolvedModifierFn) return null
-
-        // Resolved `--value(ratio)`, so all other declarations that didn't use
-        // `--value(ratio)` should be removed. E.g.: `--value(number)` would
-        // otherwise resolve for `foo-1/2`.
-        if (resolvedRatioValue) {
-          for (let [declaration, parent] of resolvedDeclarations) {
-            let idx = parent.nodes.indexOf(declaration)
-            if (idx !== -1) parent.nodes.splice(idx, 1)
-          }
-        }
-
-        return atRule.nodes
-      })
-
-      designSystem.utilities.suggest(name.slice(0, -2), () => {
-        let values: string[] = []
-        let modifiers: string[] = []
-
-        for (let [target, { literals, usedSpacingNumber, usedSpacingInteger, themeKeys }] of [
-          [values, storage['--value']],
-          [modifiers, storage['--modifier']],
-        ] as const) {
-          // Suggest literal values. E.g.: `--value('literal')`
-          for (let value of literals) {
-            target.push(value)
-          }
-
-          // Suggest `--spacing(…)` values. E.g.: `--spacing(--value(integer))`
-          if (usedSpacingNumber) {
-            target.push(...DEFAULT_SPACING_SUGGESTIONS)
-          } else if (usedSpacingInteger) {
-            for (let value of DEFAULT_SPACING_SUGGESTIONS) {
-              if (isPositiveInteger(value)) {
-                target.push(value)
-              }
-            }
-          }
-
-          // Suggest theme values. E.g.: `--value(--color-*)`
-          for (let value of designSystem.theme.keysInNamespaces(themeKeys)) {
-            target.push(
-              value.replace(LEGACY_NUMERIC_KEY, (_, a, b) => {
-                return `${a}.${b}`
-              }),
-            )
-          }
-        }
-
-        return [{ values, modifiers }] satisfies SuggestionGroup[]
-      })
-    }
-  }
-
-  if (isValidStaticUtilityName(name)) {
-    return (designSystem: DesignSystem) => {
-      designSystem.utilities.static(name, () => node.nodes.map(cloneAstNode))
-    }
-  }
-
-  return null
-}
-
-function resolveValueFunction(
-  value:
-    | Extract<Candidate, { kind: 'functional' }>['value']
-    | Extract<Candidate, { kind: 'functional' }>['modifier'],
-  fn: ValueParser.ValueFunctionNode,
-  designSystem: DesignSystem,
-): { nodes: ValueParser.ValueAstNode[]; ratio?: boolean } | undefined {
-  // No value provided, we can try `--default(…)`
-  if (value === null) {
-    for (let arg of fn.nodes) {
-      // Resolve default value, e.g.: `--default(…)`
-      if (arg.kind === 'function' && arg.value === '--default') {
-        return { nodes: arg.nodes }
-      }
-    }
-    return
-  }
-
-  for (let arg of fn.nodes) {
-    // Resolve literal value, e.g.: `--modifier('closest-side')`
-    if (
-      value.kind === 'named' &&
-      arg.kind === 'word' &&
-      // Should be wreapped in quotes
-      (arg.value[0] === "'" || arg.value[0] === '"') &&
-      arg.value[arg.value.length - 1] === arg.value[0] &&
-      // Values should match
-      arg.value.slice(1, -1) === value.value
-    ) {
-      return { nodes: ValueParser.parse(value.value) }
-    }
-
-    // Resolving theme value, e.g.: `--value(--color)`
-    else if (
-      value.kind === 'named' &&
-      arg.kind === 'word' &&
-      arg.value[0] === '-' &&
-      arg.value[1] === '-'
-    ) {
-      let themeKey = arg.value as `--${string}`
-
-      // Resolve the theme value, e.g.: `--value(--color)`
-      if (themeKey.endsWith('-*')) {
-        // Without `-*` postfix
-        themeKey = themeKey.slice(0, -2) as `--${string}`
-
-        let resolved = designSystem.theme.resolve(value.value, [themeKey])
-        if (resolved) return { nodes: ValueParser.parse(resolved) }
-      }
-
-      // Split `--text-*--line-height` into `--text` and `--line-height`
-      else {
-        let nestedKeys = themeKey.split('-*') as `--${string}`[]
-        if (nestedKeys.length <= 1) continue
-
-        // Resolve theme values with nested keys, e.g.: `--value(--text-*--line-height)`
-        let themeKeys = [nestedKeys.shift()!]
-        let resolved = designSystem.theme.resolveWith(value.value, themeKeys, nestedKeys)
-        if (resolved) {
-          let [, options = {}] = resolved
-
-          // Resolve the value from the `options`
-          {
-            let resolved = options[nestedKeys.pop()!]
-            if (resolved) return { nodes: ValueParser.parse(resolved) }
-          }
-        }
-      }
-    }
-
-    // Bare value, e.g.: `--value(integer)`
-    else if (value.kind === 'named' && arg.kind === 'word') {
-      // Limit the bare value types, to prevent new syntax that we
-      // don't want to support. E.g.: `text-#000` is something we
-      // don't want to support, but could be built this way.
-      if (!BARE_VALUE_DATA_TYPES.includes(arg.value)) {
-        continue
-      }
-
-      let resolved = arg.value === 'ratio' && 'fraction' in value ? value.fraction : value.value
-      if (!resolved) continue
-
-      let type = inferDataType(resolved, [arg.value as any])
-      if (type === null) continue
-
-      // Ratio must be a valid fraction, e.g.: <integer>/<integer>
-      if (type === 'ratio') {
-        let [lhs, rhs] = segment(resolved, '/').map(Number)
-        if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) continue
-      }
-
-      // Non-integer numbers should be a valid multiplier,
-      // e.g.: `1.5`
-      else if (type === 'number' && !isValidSpacingMultiplier(resolved)) {
-        continue
-      }
-
-      // Percentages must be an integer, e.g.: `50%`
-      else if (type === 'percentage' && !isPositiveInteger(resolved.slice(0, -1))) {
-        continue
-      }
-
-      if (type === 'ratio') {
-        let [lhs, rhs] = segment(resolved, '/')
-        return { nodes: ValueParser.parse(`${lhs.trim()} / ${rhs.trim()}`), ratio: true }
-      }
-
-      return { nodes: ValueParser.parse(resolved), ratio: false }
-    }
-
-    // Arbitrary value, e.g.: `--value([integer])`
-    else if (
-      value.kind === 'arbitrary' &&
-      arg.kind === 'word' &&
-      arg.value[0] === '[' &&
-      arg.value[arg.value.length - 1] === ']'
-    ) {
-      let dataType = arg.value.slice(1, -1)
-
-      // Allow any data type, e.g.: `--value([*])`
-      if (dataType === '*') {
-        return { nodes: ValueParser.parse(value.value) }
-      }
-
-      // The forced arbitrary value hint must match the expected
-      // data type.
-      //
-      // ```css
-      // @utility tab-* {
-      //   tab-size: --value([integer]);
-      // }
-      // ```
-      //
-      // Given a candidate like `tab-(color:var(--my-value))`,
-      // should not match because `color` and `integer` don't
-      // match.
-      if ('dataType' in value && value.dataType && value.dataType !== dataType) {
-        continue
-      }
-
-      // Use the provided data type hint
-      if ('dataType' in value && value.dataType) {
-        return { nodes: ValueParser.parse(value.value) }
-      }
-
-      // No data type hint provided, so we have to infer it
-      let type = inferDataType(value.value, [dataType as any])
-      if (type !== null) {
-        return { nodes: ValueParser.parse(value.value) }
-      }
-    }
-  }
-}
-
-function alphaReplacedShadowProperties(
-  property: string,
-  value: string,
-  alpha: string | null | undefined,
-  varInjector: (color: string) => string,
-  prefix: string = '',
-): AstNode[] {
-  let requiresFallback = false
-  let replacedValue = replaceShadowColors(value, (color) => {
-    if (alpha == null) {
-      return varInjector(color)
-    }
-
-    // When the input is currentcolor, we use our existing `color-mix(…)` approach to increase
-    // browser support. Note that the fallback of this is handled more generically in
-    // post-processing.
-    if (color.startsWith('current')) {
-      return varInjector(withAlpha(color, alpha))
-    }
-
-    // If any dynamic values are needed for the relative color syntax, we need to insert a
-    // replacement as lightningcss won't be able to resolve them statically.
-    if (color.startsWith('var(') || alpha.startsWith('var(')) {
-      requiresFallback = true
-    }
-
-    return varInjector(replaceAlpha(color, alpha))
-  })
-
-  function applyPrefix(x: string) {
-    if (!prefix) return x
-    return segment(x, ',')
-      .map((value) => prefix.trim() + ' ' + value.trim())
-      .join(', ')
-  }
-
-  if (requiresFallback) {
-    return [
-      decl(property, applyPrefix(replaceShadowColors(value, varInjector))),
-      rule('@supports (color: lab(from red l a b))', [decl(property, applyPrefix(replacedValue))]),
-    ]
-  } else {
-    return [decl(property, applyPrefix(replacedValue))]
-  }
-}
-
-function alphaReplacedDropShadowProperties(
-  property: string,
-  value: string,
-  alpha: string | null | undefined,
-  varInjector: (color: string) => string,
-  prefix: string = '',
-): AstNode[] {
-  let requiresFallback = false
-
-  let replacedValue = segment(value, ',')
-    .map((value) =>
-      replaceShadowColors(value, (color) => {
-        if (alpha == null) {
-          return varInjector(color)
-        }
-
-        // When the input is currentcolor, we use our existing `color-mix(…)` approach to increase
-        // browser support. Note that the fallback of this is handled more generically in
-        // post-processing.
-        if (color.startsWith('current')) {
-          return varInjector(withAlpha(color, alpha))
-        }
-
-        // If any dynamic values are needed for the relative color syntax, we need to insert a
-        // replacement as lightningcss won't be able to resolve them statically.
-        if (color.startsWith('var(') || alpha.startsWith('var(')) {
-          requiresFallback = true
-        }
-
-        return varInjector(replaceAlpha(color, alpha))
-      }),
-    )
-    .map((value) => `drop-shadow(${value})`)
-    .join(' ')
-
-  if (requiresFallback) {
-    return [
-      decl(
-        property,
-        prefix +
-          segment(value, ',')
-            .map((value) => `drop-shadow(${replaceShadowColors(value, varInjector)})`)
-            .join(' '),
-      ),
-      rule('@supports (color: lab(from red l a b))', [decl(property, prefix + replacedValue)]),
-    ]
-  } else {
-    return [decl(property, prefix + replacedValue)]
-  }
-}
-
-const UTILITY_ROOT = /^-?[a-z][a-zA-Z0-9_-]*/
-
-const PERCENT = 37
-const SLASH = 47
-const DOT = 46
-const LOWER_A = 97
-const LOWER_Z = 122
-const UPPER_A = 65
-const UPPER_Z = 90
-const ZERO = 48
-const NINE = 57
-const UNDERSCORE = 95
-const DASH = 45
-
-export function isValidStaticUtilityName(name: string): boolean {
-  let match = UTILITY_ROOT.exec(name)
-  if (match === null) return false // Invalid root
-
-  let root = match[0]
-  let value = name.slice(root.length)
-
-  // Root should not end in `-` if there is no value
-  //
-  // `tab-size-`
-  //  ---------     Root
-  if (value.length === 0 && root.endsWith('-')) {
-    return false
-  }
-
-  // No remaining value is valid
-  //
-  // `tab-size`
-  //  --------    Root
-  if (value.length === 0) {
-    return true
-  }
-
-  // Any valid (static) utility should be valid including:
-  // - Bare values with `.`: `p-1.5`
-  // - Bare values with `%`: `w-50%`
-  // - With an embedded modifier: `text-xs/8`
-
-  let seenSlash = false
-  for (let i = 0; i < value.length; i++) {
-    let charCode = value.charCodeAt(i)
-    switch (charCode) {
-      case PERCENT: {
-        // A percentage is only valid at the end of the value
-        if (i !== value.length - 1) return false
-
-        // A percent is only valid when preceded by a digit. E.g.: `w-%` is invalid
-        let previousChar = value[i - 1] || root[root.length - 1] || ''
-        let previousCharCode = previousChar.charCodeAt(0)
-        if (previousCharCode < ZERO || previousCharCode > NINE) return false
-        break
-      }
-
-      case SLASH: {
-        // A slash must be followed by at least 1 character. E.g.: `foo/` is invalid
-        if (i === value.length - 1) return false
-
-        // A slash can only appear once. E.g.: `foo/bar/baz` is invalid
-        if (seenSlash) return false
-        seenSlash = true
-        break
-      }
-
-      case DOT: {
-        // Dots are only allowed between digits. E.g.: `p-1.a` is invalid
-        let previousChar = value[i - 1] || root[root.length - 1] || ''
-        let previousCharCode = previousChar.charCodeAt(0)
-        if (previousCharCode < ZERO || previousCharCode > NINE) return false
-
-        let nextChar = value[i + 1] || ''
-        let nextCharCode = nextChar.charCodeAt(0)
-        if (nextCharCode < ZERO || nextCharCode > NINE) return false
-        break
-      }
-
-      // Allowed special characters
-      case UNDERSCORE:
-      case DASH: {
-        continue
-      }
-
-      default: {
-        if (
-          (charCode >= LOWER_A && charCode <= LOWER_Z) || // Allow a-z
-          (charCode >= UPPER_A && charCode <= UPPER_Z) || // Allow A-Z
-          (charCode >= ZERO && charCode <= NINE) // Allow 0-9
-        ) {
-          continue
-        }
-
-        // Everything else is invalid
-        return false
-      }
-    }
-  }
-
-  return true
-}
-
-export function isValidFunctionalUtilityName(name: string): boolean {
-  if (!name.endsWith('-*')) return false // Missing '-*' suffix
-  name = name.slice(0, -2)
-
-  let match = UTILITY_ROOT.exec(name)
-  if (match === null) return false // Invalid root
-
-  let root = match[0]
-  let value = name.slice(root.length)
-
-  // No remaining value is valid
-  //
-  // `tab-size-*`
-  //  --------    Root
-  //          --  Suffix
-  //
-  // Backwards compatibility: a root ending in `-` was valid and correctly
-  // scanned by Oxide. This means that custom utilities can result in candidates
-  // such as `foo--bar`.
-  //
-  // We might want to revisit this for Tailwind CSS v5, but for now we have to
-  // make it backwards compatible.
-  //
-  // PR: https://github.com/tailwindlabs/tailwindcss/pull/19696
-  //
-  if (value.length === 0) {
-    return true
-  }
-
-  // But if there is a value remaining, it's invalid.
-  //
-  // E.g.: `tab-size-[…]-*`
-  //
-  // If we allow more characters, we can extend the validation here
-  return false
-}
diff --git a/packages/tailwindcss/src/utils/brace-expansion.bench.ts b/packages/tailwindcss/src/utils/brace-expansion.bench.ts
deleted file mode 100644
index 6a0e3d8fd..000000000
--- a/packages/tailwindcss/src/utils/brace-expansion.bench.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// import braces from 'braces'
-import { bench } from 'vitest'
-import { expand } from './brace-expansion'
-
-const PATTERN =
-  '{{xs,sm,md,lg}:,}{border-{x,y,t,r,b,l,s,e},bg,text,cursor,accent}-{{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,{100..900..100},950},black,white}{,/{0..100}}'
-
-// bench('braces', () => {
-//   void braces.expand(PATTERN)
-// })
-
-bench('./brace-expansion', () => {
-  void expand(PATTERN)
-})
diff --git a/packages/tailwindcss/src/utils/brace-expansion.test.ts b/packages/tailwindcss/src/utils/brace-expansion.test.ts
deleted file mode 100644
index bab93ac43..000000000
--- a/packages/tailwindcss/src/utils/brace-expansion.test.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { expand } from './brace-expansion'
-
-describe('expand(…)', () => {
-  test.each([
-    ['a/b/c', ['a/b/c']],
-
-    // Groups
-    ['a/{x,y,z}/b', ['a/x/b', 'a/y/b', 'a/z/b']],
-    ['{a,b}/{x,y}', ['a/x', 'a/y', 'b/x', 'b/y']],
-    ['{{xs,sm,md,lg}:,}hidden', ['xs:hidden', 'sm:hidden', 'md:hidden', 'lg:hidden', 'hidden']],
-
-    // Numeric ranges
-    ['a/{0..5}/b', ['a/0/b', 'a/1/b', 'a/2/b', 'a/3/b', 'a/4/b', 'a/5/b']],
-    ['a/{-5..0}/b', ['a/-5/b', 'a/-4/b', 'a/-3/b', 'a/-2/b', 'a/-1/b', 'a/0/b']],
-    ['a/{0..-5}/b', ['a/0/b', 'a/-1/b', 'a/-2/b', 'a/-3/b', 'a/-4/b', 'a/-5/b']],
-    ['a/{0..10..5}/b', ['a/0/b', 'a/5/b', 'a/10/b']],
-    ['a/{0..10..-5}/b', ['a/10/b', 'a/5/b', 'a/0/b']],
-    ['a/{10..0..5}/b', ['a/10/b', 'a/5/b', 'a/0/b']],
-    ['a/{10..0..-5}/b', ['a/0/b', 'a/5/b', 'a/10/b']],
-
-    // Numeric range with padding (we do not support padding)
-    ['a/{00..05}/b', ['a/0/b', 'a/1/b', 'a/2/b', 'a/3/b', 'a/4/b', 'a/5/b']],
-    ['a{001..9}b', ['a1b', 'a2b', 'a3b', 'a4b', 'a5b', 'a6b', 'a7b', 'a8b', 'a9b']],
-
-    // Numeric range with step
-    ['a/{0..5..2}/b', ['a/0/b', 'a/2/b', 'a/4/b']],
-    [
-      'bg-red-{100..900..100}',
-      [
-        'bg-red-100',
-        'bg-red-200',
-        'bg-red-300',
-        'bg-red-400',
-        'bg-red-500',
-        'bg-red-600',
-        'bg-red-700',
-        'bg-red-800',
-        'bg-red-900',
-      ],
-    ],
-
-    // Nested braces
-    ['a{b,c,/{x,y}}/e', ['ab/e', 'ac/e', 'a/x/e', 'a/y/e']],
-    ['a{b,c,/{x,y},{z,w}}/e', ['ab/e', 'ac/e', 'a/x/e', 'a/y/e', 'az/e', 'aw/e']],
-    ['a{b,c,/{x,y},{0..2}}/e', ['ab/e', 'ac/e', 'a/x/e', 'a/y/e', 'a0/e', 'a1/e', 'a2/e']],
-    [
-      'bg-red-{50,{100..900..100},950}',
-      [
-        'bg-red-50',
-        'bg-red-100',
-        'bg-red-200',
-        'bg-red-300',
-        'bg-red-400',
-        'bg-red-500',
-        'bg-red-600',
-        'bg-red-700',
-        'bg-red-800',
-        'bg-red-900',
-        'bg-red-950',
-      ],
-    ],
-
-    // Should not try to expand ranges with decimals
-    ['{1.1..2.2}', ['1.1..2.2']],
-  ])('should expand %s (%#)', (input, expected) => {
-    expect(expand(input).sort()).toEqual(expected.sort())
-  })
-
-  test('throws on unbalanced braces', () => {
-    expect(() => expand('a{b,c{d,e},{f,g}h}x{y,z')).toThrowErrorMatchingInlineSnapshot(
-      `[Error: The pattern \`x{y,z\` is not balanced.]`,
-    )
-  })
-
-  test('throws when step is set to zero', () => {
-    expect(() => expand('a{0..5..0}/b')).toThrowErrorMatchingInlineSnapshot(
-      `[Error: Step cannot be zero in sequence expansion.]`,
-    )
-  })
-})
diff --git a/packages/tailwindcss/src/utils/brace-expansion.ts b/packages/tailwindcss/src/utils/brace-expansion.ts
deleted file mode 100644
index ee382cd82..000000000
--- a/packages/tailwindcss/src/utils/brace-expansion.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { segment } from './segment'
-
-const NUMERICAL_RANGE = /^(-?\d+)\.\.(-?\d+)(?:\.\.(-?\d+))?$/
-
-export function expand(pattern: string): string[] {
-  let index = pattern.indexOf('{')
-  if (index === -1) return [pattern]
-
-  let result: string[] = []
-  let pre = pattern.slice(0, index)
-  let rest = pattern.slice(index)
-
-  // Find the matching closing brace
-  let depth = 0
-  let endIndex = rest.lastIndexOf('}')
-  for (let i = 0; i < rest.length; i++) {
-    let char = rest[i]
-    if (char === '{') {
-      depth++
-    } else if (char === '}') {
-      depth--
-      if (depth === 0) {
-        endIndex = i
-        break
-      }
-    }
-  }
-
-  if (endIndex === -1) {
-    throw new Error(`The pattern \`${pattern}\` is not balanced.`)
-  }
-
-  let inside = rest.slice(1, endIndex)
-  let post = rest.slice(endIndex + 1)
-  let parts: string[]
-
-  if (isSequence(inside)) {
-    parts = expandSequence(inside)
-  } else {
-    parts = segment(inside, ',')
-  }
-
-  parts = parts.flatMap((part) => expand(part))
-
-  let expandedTail = expand(post)
-
-  for (let tail of expandedTail) {
-    for (let part of parts) {
-      result.push(pre + part + tail)
-    }
-  }
-  return result
-}
-
-function isSequence(str: string): boolean {
-  return NUMERICAL_RANGE.test(str)
-}
-
-/**
- * Expands a sequence string like "01..20" (optionally with a step).
- */
-function expandSequence(seq: string): string[] {
-  let seqMatch = seq.match(NUMERICAL_RANGE)
-  if (!seqMatch) {
-    return [seq]
-  }
-  let [, start, end, stepStr] = seqMatch
-  let step = stepStr ? parseInt(stepStr, 10) : undefined
-  let result: string[] = []
-
-  if (/^-?\d+$/.test(start) && /^-?\d+$/.test(end)) {
-    let startNum = parseInt(start, 10)
-    let endNum = parseInt(end, 10)
-
-    if (step === undefined) {
-      step = startNum <= endNum ? 1 : -1
-    }
-    if (step === 0) {
-      throw new Error('Step cannot be zero in sequence expansion.')
-    }
-
-    let increasing = startNum < endNum
-    if (increasing && step < 0) step = -step
-    if (!increasing && step > 0) step = -step
-
-    for (let i = startNum; increasing ? i <= endNum : i >= endNum; i += step) {
-      result.push(i.toString())
-    }
-  }
-  return result
-}
diff --git a/packages/tailwindcss/src/utils/compare-breakpoints.ts b/packages/tailwindcss/src/utils/compare-breakpoints.ts
deleted file mode 100644
index 4eb562764..000000000
--- a/packages/tailwindcss/src/utils/compare-breakpoints.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export function compareBreakpoints(a: string, z: string, direction: 'asc' | 'desc') {
-  if (a === z) return 0
-
-  // Assumption: when a `(` exists, we are dealing with a CSS function.
-  //
-  // E.g.: `calc(100% - 1rem)`
-  let aIsCssFunction = a.indexOf('(')
-  let zIsCssFunction = z.indexOf('(')
-
-  let aBucket =
-    aIsCssFunction === -1
-      ? // No CSS function found, bucket by unit instead
-        a.replace(/[\d.]+/g, '')
-      : // CSS function found, bucket by function name
-        a.slice(0, aIsCssFunction)
-
-  let zBucket =
-    zIsCssFunction === -1
-      ? // No CSS function found, bucket by unit
-        z.replace(/[\d.]+/g, '')
-      : // CSS function found, bucket by function name
-        z.slice(0, zIsCssFunction)
-
-  let order =
-    // Compare by bucket name
-    (aBucket === zBucket ? 0 : aBucket < zBucket ? -1 : 1) ||
-    // If bucket names are the same, compare by value
-    (direction === 'asc' ? parseFloat(a) - parseFloat(z) : parseFloat(z) - parseFloat(a))
-
-  // If the groups are the same, and the contents are not numbers, the
-  // `order` will result in `NaN`. In this case, we want to make sorting
-  // stable by falling back to a string comparison.
-  //
-  // This can happen when using CSS functions such as `calc`.
-  //
-  // E.g.:
-  //
-  // - `min-[calc(100%-1rem)]` and `min-[calc(100%-2rem)]`
-  // - `@[calc(100%-1rem)]` and `@[calc(100%-2rem)]`
-  //
-  // In this scenario, we want to alphabetically sort `calc(100%-1rem)` and
-  // `calc(100%-2rem)` to make it deterministic.
-  if (Number.isNaN(order)) {
-    return a < z ? -1 : 1
-  }
-
-  return order
-}
diff --git a/packages/tailwindcss/src/utils/compare.test.ts b/packages/tailwindcss/src/utils/compare.test.ts
deleted file mode 100644
index 329691fe5..000000000
--- a/packages/tailwindcss/src/utils/compare.test.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import { expect, it } from 'vitest'
-import { compare } from './compare'
-
-const LESS = -1
-const EQUAL = 0
-const GREATER = 1
-
-it.each([
-  // Same strings
-  ['abc', 'abc', EQUAL],
-
-  // Shorter string comes first
-  ['abc', 'abcd', LESS],
-
-  // Longer string comes first
-  ['abcd', 'abc', GREATER],
-
-  // Numbers
-  ['1', '1', EQUAL],
-  ['1', '2', LESS],
-  ['2', '1', GREATER],
-  ['1', '10', LESS],
-  ['10', '1', GREATER],
-
-  // Numbers of different lengths
-  ['75', '700', LESS],
-  ['700', '75', GREATER],
-  ['75', '770', LESS],
-  ['770', '75', GREATER],
-])('should compare "%s" with "%s" as "%d"', (a, b, expected) => {
-  expect(Math.sign(compare(a, b))).toBe(expected)
-})
-
-it('should sort strings with numbers consistently using the `compare` function', () => {
-  expect(
-    ['p-0', 'p-0.5', 'p-1', 'p-1.5', 'p-10', 'p-12', 'p-2', 'p-20', 'p-21']
-      .sort(() => Math.random() - 0.5) // Shuffle the array
-      .sort(compare), // Sort the array
-  ).toMatchInlineSnapshot(`
-    [
-      "p-0",
-      "p-0.5",
-      "p-1",
-      "p-1.5",
-      "p-2",
-      "p-10",
-      "p-12",
-      "p-20",
-      "p-21",
-    ]
-  `)
-})
-
-it('should sort strings with modifiers consistently using the `compare` function', () => {
-  expect(
-    [
-      'text-5xl',
-      'text-6xl',
-      'text-6xl/loose',
-      'text-6xl/wide',
-      'bg-red-500',
-      'bg-red-500/50',
-      'bg-red-500/70',
-      'bg-red-500/60',
-      'bg-red-50',
-      'bg-red-50/50',
-      'bg-red-50/70',
-      'bg-red-50/60',
-    ]
-      .sort(() => Math.random() - 0.5) // Shuffle the array
-      .sort(compare), // Sort the array
-  ).toMatchInlineSnapshot(`
-    [
-      "bg-red-50",
-      "bg-red-50/50",
-      "bg-red-50/60",
-      "bg-red-50/70",
-      "bg-red-500",
-      "bg-red-500/50",
-      "bg-red-500/60",
-      "bg-red-500/70",
-      "text-5xl",
-      "text-6xl",
-      "text-6xl/loose",
-      "text-6xl/wide",
-    ]
-  `)
-})
-
-it('should sort strings with multiple numbers consistently using the `compare` function', () => {
-  expect(
-    [
-      'foo-123-bar-456-baz-789',
-      'foo-123-bar-456-baz-788',
-      'foo-123-bar-456-baz-790',
-      'foo-123-bar-455-baz-789',
-      'foo-123-bar-456-baz-789',
-      'foo-123-bar-457-baz-789',
-      'foo-123-bar-456-baz-789',
-      'foo-124-bar-456-baz-788',
-      'foo-125-bar-456-baz-790',
-      'foo-126-bar-455-baz-789',
-      'foo-127-bar-456-baz-789',
-      'foo-128-bar-457-baz-789',
-      'foo-1-bar-2-baz-3',
-      'foo-12-bar-34-baz-45',
-      'foo-12-bar-34-baz-4',
-      'foo-12-bar-34-baz-456',
-    ]
-      .sort(() => Math.random() - 0.5) // Shuffle the array
-      .sort(compare), // Sort the array
-  ).toMatchInlineSnapshot(`
-    [
-      "foo-1-bar-2-baz-3",
-      "foo-12-bar-34-baz-4",
-      "foo-12-bar-34-baz-45",
-      "foo-12-bar-34-baz-456",
-      "foo-123-bar-455-baz-789",
-      "foo-123-bar-456-baz-788",
-      "foo-123-bar-456-baz-789",
-      "foo-123-bar-456-baz-789",
-      "foo-123-bar-456-baz-789",
-      "foo-123-bar-456-baz-790",
-      "foo-123-bar-457-baz-789",
-      "foo-124-bar-456-baz-788",
-      "foo-125-bar-456-baz-790",
-      "foo-126-bar-455-baz-789",
-      "foo-127-bar-456-baz-789",
-      "foo-128-bar-457-baz-789",
-    ]
-  `)
-})
-
-it('sort is stable', () => {
-  // Heap's algorithm for permutations
-  function* permutations<T>(input: T[]) {
-    let pos = 1
-    let stack = input.map(() => 0)
-
-    yield input.slice()
-
-    while (pos < input.length) {
-      if (stack[pos] < pos) {
-        let k = pos % 2 == 0 ? 0 : stack[pos]
-        ;[input[k], input[pos]] = [input[pos], input[k]]
-        yield input.slice()
-        ++stack[pos]
-        pos = 1
-      } else {
-        stack[pos] = 0
-        ++pos
-      }
-    }
-  }
-
-  let classes = ['duration-initial', 'duration-75', 'duration-150', 'duration-700', 'duration-1000']
-
-  for (let permutation of permutations(classes)) {
-    let sorted = [...permutation].sort(compare)
-    expect(sorted).toEqual([
-      'duration-75',
-      'duration-150',
-      'duration-700',
-      'duration-1000',
-      'duration-initial',
-    ])
-  }
-})
diff --git a/packages/tailwindcss/src/utils/compare.ts b/packages/tailwindcss/src/utils/compare.ts
deleted file mode 100644
index 53b15d174..000000000
--- a/packages/tailwindcss/src/utils/compare.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-const ZERO = 48
-const NINE = 57
-
-/**
- * Compare two strings alphanumerically, where numbers are compared as numbers
- * instead of strings.
- */
-export function compare(a: string, z: string) {
-  let aLen = a.length
-  let zLen = z.length
-  let minLen = aLen < zLen ? aLen : zLen
-
-  for (let i = 0; i < minLen; i++) {
-    let aCode = a.charCodeAt(i)
-    let zCode = z.charCodeAt(i)
-
-    // If both are numbers, compare them as numbers instead of strings.
-    if (aCode >= ZERO && aCode <= NINE && zCode >= ZERO && zCode <= NINE) {
-      let aStart = i
-      let aEnd = i + 1
-      let zStart = i
-      let zEnd = i + 1
-
-      // Consume the number
-      aCode = a.charCodeAt(aEnd)
-      while (aCode >= ZERO && aCode <= NINE) aCode = a.charCodeAt(++aEnd)
-
-      // Consume the number
-      zCode = z.charCodeAt(zEnd)
-      while (zCode >= ZERO && zCode <= NINE) zCode = z.charCodeAt(++zEnd)
-
-      let aNumber = a.slice(aStart, aEnd)
-      let zNumber = z.slice(zStart, zEnd)
-
-      let diff = Number(aNumber) - Number(zNumber)
-      if (diff) return diff
-
-      // Fallback case if numbers are the same but the string representation
-      // is not. Fallback to string sorting. E.g.: `0123` vs `123`
-      if (aNumber < zNumber) return -1
-      if (aNumber > zNumber) return 1
-
-      // Continue with the next character otherwise short strings will appear
-      // after long ones when containing numbers. E.g.:
-      // - bg-red-500/70
-      // - bg-red-500
-      continue
-    }
-
-    // Continue if the characters are the same
-    if (aCode === zCode) continue
-
-    // Otherwise, compare them as strings
-    return aCode - zCode
-  }
-
-  // If we got this far, the strings are equal up to the length of the shortest
-  // string. The shortest string should come first.
-
-  return a.length - z.length
-}
diff --git a/packages/tailwindcss/src/utils/decode-arbitrary-value.test.ts b/packages/tailwindcss/src/utils/decode-arbitrary-value.test.ts
index 0bc4d425c..e78a25f74 100644
--- a/packages/tailwindcss/src/utils/decode-arbitrary-value.test.ts
+++ b/packages/tailwindcss/src/utils/decode-arbitrary-value.test.ts
@@ -16,25 +16,6 @@ describe('decoding arbitrary values', () => {
 
   it('should not replace underscores in url()', () => {
     expect(decodeArbitraryValue('url(./my_file.jpg)')).toBe('url(./my_file.jpg)')
-    expect(decodeArbitraryValue('no-repeat_url(./my_file.jpg)')).toBe(
-      'no-repeat url(./my_file.jpg)',
-    )
-  })
-
-  it('should not replace underscores in the first argument of var()', () => {
-    expect(decodeArbitraryValue('var(--spacing-1_5)')).toBe('var(--spacing-1_5)')
-    expect(decodeArbitraryValue('var(--spacing-1_5,_1rem)')).toBe('var(--spacing-1_5, 1rem)')
-    expect(decodeArbitraryValue('var(--spacing-1_5,_var(--spacing-2_5,_1rem))')).toBe(
-      'var(--spacing-1_5, var(--spacing-2_5, 1rem))',
-    )
-  })
-
-  it('should not replace underscores in the first argument of theme()', () => {
-    expect(decodeArbitraryValue('theme(--spacing-1_5)')).toBe('theme(--spacing-1_5)')
-    expect(decodeArbitraryValue('theme(--spacing-1_5,_1rem)')).toBe('theme(--spacing-1_5, 1rem)')
-    expect(decodeArbitraryValue('theme(--spacing-1_5,_theme(--spacing-2_5,_1rem))')).toBe(
-      'theme(--spacing-1_5, theme(--spacing-2_5, 1rem))',
-    )
   })
 
   it('should leave var(…) as is', () => {
@@ -74,8 +55,8 @@ describe('adds spaces around math operators', () => {
     ['calc(24px+(-1rem))', 'calc(24px + (-1rem))'],
     ['calc(24px_+_(-1rem))', 'calc(24px + (-1rem))'],
     [
-      'calc(var(--10-10px,calc(-20px-(-30px--40px)-50px)))',
-      'calc(var(--10-10px,calc(-20px - (-30px - -40px) - 50px)))',
+      'calc(var(--10-10px,calc(-20px-(-30px--40px)-50px)',
+      'calc(var(--10-10px,calc(-20px - (-30px - -40px) - 50px)',
     ],
     ['calc(theme(spacing.1-bar))', 'calc(theme(spacing.1-bar))'],
     ['theme(spacing.1-bar)', 'theme(spacing.1-bar)'],
@@ -84,28 +65,6 @@ describe('adds spaces around math operators', () => {
     ['calc(theme(spacing.foo-2))', 'calc(theme(spacing.foo-2))'],
     ['calc(theme(spacing.foo-bar))', 'calc(theme(spacing.foo-bar))'],
 
-    // With percentages
-    ['calc(100%-var(--foo))', 'calc(100% - var(--foo))'],
-
-    // With uppercase units
-    ['calc(100PX-theme(spacing.1))', 'calc(100PX - theme(spacing.1))'],
-
-    // Preserving CSS keyword tokens like fit-content without splitting around hyphens in complex expressions
-    ['min(fit-content,calc(100dvh-4rem))', 'min(fit-content, calc(100dvh - 4rem))'],
-    [
-      'min(theme(spacing.foo-bar),fit-content,calc(20*calc(40-30)))',
-      'min(theme(spacing.foo-bar), fit-content, calc(20 * calc(40 - 30)))',
-    ],
-    [
-      'min(fit-content,calc(100dvh-4rem)-calc(50dvh--2px))',
-      'min(fit-content, calc(100dvh - 4rem) - calc(50dvh - -2px))',
-    ],
-    ['min(-3.4e-2-var(--foo),calc-size(auto))', 'min(-3.4e-2 - var(--foo), calc-size(auto))'],
-    [
-      'clamp(-10e3-var(--foo),calc-size(max-content),var(--foo)+-10e3)',
-      'clamp(-10e3 - var(--foo), calc-size(max-content), var(--foo) + -10e3)',
-    ],
-
     // A negative number immediately after a `,` should not have spaces inserted
     ['clamp(-3px+4px,-3px+4px,-3px+4px)', 'clamp(-3px + 4px, -3px + 4px, -3px + 4px)'],
 
@@ -115,12 +74,6 @@ describe('adds spaces around math operators', () => {
     // Prevent formatting inside `env()` functions
     ['calc(env(safe-area-inset-bottom)*2)', 'calc(env(safe-area-inset-bottom) * 2)'],
 
-    // Handle dashed functions that look like known dashed idents
-    [
-      'fit-content(min(max-content,max(min-content,calc(20px+1em))))',
-      'fit-content(min(max-content, max(min-content, calc(20px + 1em))))',
-    ],
-
     // Should format inside `calc()` nested in `env()`
     [
       'env(safe-area-inset-bottom,calc(10px+20px))',
@@ -140,8 +93,6 @@ describe('adds spaces around math operators', () => {
       'radial-gradient(calc(1+2)),radial-gradient(calc(1+2))',
       'radial-gradient(calc(1 + 2)),radial-gradient(calc(1 + 2))',
     ],
-    ['w-[calc(anchor-size(width)+8px)]', 'w-[calc(anchor-size(width) + 8px)]'],
-    ['w-[calc(anchor-size(foo(bar))+8px)]', 'w-[calc(anchor-size(foo(bar)) + 8px)]'],
 
     [
       '[content-start]_calc(100%-1px)_[content-end]_minmax(1rem,1fr)',
@@ -150,7 +101,7 @@ describe('adds spaces around math operators', () => {
 
     // round(…) function
     ['round(1+2,1+3)', 'round(1 + 2, 1 + 3)'],
-    ['round(to-zero,1+2,1+3)', 'round(to-zero, 1 + 2, 1 + 3)'],
+    ['round(to-zero,1+2,1+3)', 'round(to-zero,1 + 2, 1 + 3)'],
 
     // Nested parens in non-math functions don't format their contents
     ['env((safe-area-inset-bottom))', 'env((safe-area-inset-bottom))'],
diff --git a/packages/tailwindcss/src/utils/decode-arbitrary-value.ts b/packages/tailwindcss/src/utils/decode-arbitrary-value.ts
index 145103188..f644e6639 100644
--- a/packages/tailwindcss/src/utils/decode-arbitrary-value.ts
+++ b/packages/tailwindcss/src/utils/decode-arbitrary-value.ts
@@ -1,16 +1,13 @@
-import * as ValueParser from '../value-parser'
 import { addWhitespaceAroundMathOperators } from './math-operators'
 
 export function decodeArbitraryValue(input: string): string {
-  // There are definitely no functions in the input, so bail early
-  if (input.indexOf('(') === -1) {
-    return convertUnderscoresToWhitespace(input)
+  // We do not want to normalize anything inside of a url() because if we
+  // replace `_` with ` `, then it will very likely break the url.
+  if (input.startsWith('url(')) {
+    return input
   }
 
-  let ast = ValueParser.parse(input)
-  recursivelyDecodeArbitraryValues(ast)
-  input = ValueParser.toCss(ast)
-
+  input = convertUnderscoresToWhitespace(input)
   input = addWhitespaceAroundMathOperators(input)
 
   return input
@@ -20,7 +17,7 @@ export function decodeArbitraryValue(input: string): string {
  * Convert `_` to ` `, except for escaped underscores `\_` they should be
  * converted to `_` instead.
  */
-function convertUnderscoresToWhitespace(input: string, skipUnderscoreToSpace = false) {
+function convertUnderscoresToWhitespace(input: string) {
   let output = ''
   for (let i = 0; i < input.length; i++) {
     let char = input[i]
@@ -32,7 +29,7 @@ function convertUnderscoresToWhitespace(input: string, skipUnderscoreToSpace = f
     }
 
     // Unescaped underscore
-    else if (char === '_' && !skipUnderscoreToSpace) {
+    else if (char === '_') {
       output += ' '
     }
 
@@ -44,50 +41,3 @@ function convertUnderscoresToWhitespace(input: string, skipUnderscoreToSpace = f
 
   return output
 }
-
-function recursivelyDecodeArbitraryValues(ast: ValueParser.ValueAstNode[]) {
-  for (let node of ast) {
-    switch (node.kind) {
-      case 'function': {
-        if (node.value === 'url' || node.value.endsWith('_url')) {
-          // Don't decode underscores in url() but do decode the function name
-          node.value = convertUnderscoresToWhitespace(node.value)
-          break
-        }
-
-        if (
-          node.value === 'var' ||
-          node.value.endsWith('_var') ||
-          node.value === 'theme' ||
-          node.value.endsWith('_theme')
-        ) {
-          node.value = convertUnderscoresToWhitespace(node.value)
-          for (let i = 0; i < node.nodes.length; i++) {
-            // Don't decode underscores to spaces in the first argument of var()
-            if (i == 0 && node.nodes[i].kind === 'word') {
-              node.nodes[i].value = convertUnderscoresToWhitespace(node.nodes[i].value, true)
-              continue
-            }
-            recursivelyDecodeArbitraryValues([node.nodes[i]])
-          }
-          break
-        }
-
-        node.value = convertUnderscoresToWhitespace(node.value)
-        recursivelyDecodeArbitraryValues(node.nodes)
-        break
-      }
-      case 'separator':
-      case 'word': {
-        node.value = convertUnderscoresToWhitespace(node.value)
-        break
-      }
-      default:
-        never(node)
-    }
-  }
-}
-
-function never(value: never): never {
-  throw new Error(`Unexpected value: ${value}`)
-}
diff --git a/packages/tailwindcss/src/utils/dimensions.ts b/packages/tailwindcss/src/utils/dimensions.ts
deleted file mode 100644
index 7d647ffe0..000000000
--- a/packages/tailwindcss/src/utils/dimensions.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { DefaultMap } from '../../../tailwindcss/src/utils/default-map'
-
-const DIMENSION_REGEX = /^(?<value>[-+]?(?:\d*\.)?\d+)(?<unit>[a-z]+|%)?$/i
-
-// Parse a dimension such as `64rem` into `[64, 'rem']`.
-export const dimensions = new DefaultMap((input) => {
-  let match = DIMENSION_REGEX.exec(input)
-  if (!match) return null
-
-  let value = match.groups?.value
-  if (value === undefined) return null
-
-  let valueAsNumber = Number(value)
-  if (Number.isNaN(valueAsNumber)) return null
-
-  let unit = match.groups?.unit
-  if (unit === undefined) return [valueAsNumber, null] as const
-
-  return [valueAsNumber, unit] as const
-})
diff --git a/packages/tailwindcss/src/utils/escape.test.ts b/packages/tailwindcss/src/utils/escape.test.ts
deleted file mode 100644
index f4c8e1192..000000000
--- a/packages/tailwindcss/src/utils/escape.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { escape, unescape } from './escape'
-
-describe('escape', () => {
-  test('adds backslashes', () => {
-    expect(escape(String.raw`red-1/2`)).toMatchInlineSnapshot(`"red-1\\/2"`)
-  })
-})
-
-describe('unescape', () => {
-  test('removes backslashes', () => {
-    expect(unescape(String.raw`red-1\/2`)).toMatchInlineSnapshot(`"red-1/2"`)
-  })
-
-  test('replaces out-of-range escaped code points', () => {
-    expect(
-      unescape(
-        String.raw`--Coding-Projects-CharacterMapper-Master-Workspace\d8819554-4725-4235-9d22-2d0ed572e924`,
-      ),
-    ).toMatchInlineSnapshot(
-      `"--Coding-Projects-CharacterMapper-Master-Workspace�54-4725-4235-9d22-2d0ed572e924"`,
-    )
-  })
-})
diff --git a/packages/tailwindcss/src/utils/escape.ts b/packages/tailwindcss/src/utils/escape.ts
index c430e4ad4..da45fb944 100644
--- a/packages/tailwindcss/src/utils/escape.ts
+++ b/packages/tailwindcss/src/utils/escape.ts
@@ -1,20 +1,20 @@
 // https://drafts.csswg.org/cssom/#serialize-an-identifier
 export function escape(value: string) {
-  if (arguments.length === 0) {
+  if (arguments.length == 0) {
     throw new TypeError('`CSS.escape` requires an argument.')
   }
-  let string = String(value)
-  let length = string.length
-  let index = -1
-  let codeUnit: number
-  let result = ''
-  let firstCodeUnit = string.charCodeAt(0)
+  var string = String(value)
+  var length = string.length
+  var index = -1
+  var codeUnit
+  var result = ''
+  var firstCodeUnit = string.charCodeAt(0)
 
   if (
     // If the character is the first character and is a `-` (U+002D), and
     // there is no second character, […]
-    length === 1 &&
-    firstCodeUnit === 0x002d
+    length == 1 &&
+    firstCodeUnit == 0x002d
   ) {
     return '\\' + string
   }
@@ -26,7 +26,7 @@ export function escape(value: string) {
 
     // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
     // (U+FFFD).
-    if (codeUnit === 0x0000) {
+    if (codeUnit == 0x0000) {
       result += '\uFFFD'
       continue
     }
@@ -35,13 +35,13 @@ export function escape(value: string) {
       // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
       // U+007F, […]
       (codeUnit >= 0x0001 && codeUnit <= 0x001f) ||
-      codeUnit === 0x007f ||
+      codeUnit == 0x007f ||
       // If the character is the first character and is in the range [0-9]
       // (U+0030 to U+0039), […]
-      (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+      (index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
       // If the character is the second character and is in the range [0-9]
       // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
-      (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002d)
+      (index == 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit == 0x002d)
     ) {
       // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
       result += '\\' + codeUnit.toString(16) + ' '
@@ -54,8 +54,8 @@ export function escape(value: string) {
     // U+005A), or [a-z] (U+0061 to U+007A), […]
     if (
       codeUnit >= 0x0080 ||
-      codeUnit === 0x002d ||
-      codeUnit === 0x005f ||
+      codeUnit == 0x002d ||
+      codeUnit == 0x005f ||
       (codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
       (codeUnit >= 0x0041 && codeUnit <= 0x005a) ||
       (codeUnit >= 0x0061 && codeUnit <= 0x007a)
@@ -71,27 +71,3 @@ export function escape(value: string) {
   }
   return result
 }
-
-export function unescape(escaped: string) {
-  return escaped.replace(/\\([\dA-Fa-f]{1,6}[\t\n\f\r ]?|[\S\s])/g, (match) => {
-    if (match.length <= 2) {
-      return match[1]
-    }
-
-    let codePoint = Number.parseInt(match.slice(1).trim(), 16)
-
-    if (
-      // Invalid codepoint: https://infra.spec.whatwg.org/#code-point
-      codePoint === 0x0000 ||
-      codePoint > 0x10ffff ||
-      // Is surrogate: https://infra.spec.whatwg.org/#leading-surrogate
-      //  - A leading surrogate is a code point that is in the range U+D800 to U+DBFF, inclusive.
-      //  - A trailing surrogate is a code point that is in the range U+DC00 to U+DFFF, inclusive.
-      (codePoint >= 0xd800 && codePoint <= 0xdfff)
-    ) {
-      return '\uFFFD'
-    }
-
-    return String.fromCodePoint(codePoint)
-  })
-}
diff --git a/packages/tailwindcss/src/utils/infer-data-type.bench.ts b/packages/tailwindcss/src/utils/infer-data-type.bench.ts
index da44ca9fd..82fe874bd 100644
--- a/packages/tailwindcss/src/utils/infer-data-type.bench.ts
+++ b/packages/tailwindcss/src/utils/infer-data-type.bench.ts
@@ -3,8 +3,6 @@ import { inferDataType } from './infer-data-type'
 
 const colors = [
   'slateblue',
-  'black',
-  'orange',
   'rgb(255, 255, 255)',
   'rgba(255, 255, 255, 1)',
   'hsl(0, 0%, 100%)',
diff --git a/packages/tailwindcss/src/utils/infer-data-type.ts b/packages/tailwindcss/src/utils/infer-data-type.ts
index 3317572f3..9025eeb3f 100644
--- a/packages/tailwindcss/src/utils/infer-data-type.ts
+++ b/packages/tailwindcss/src/utils/infer-data-type.ts
@@ -6,9 +6,7 @@ type DataType =
   | 'color'
   | 'length'
   | 'percentage'
-  | 'ratio'
   | 'number'
-  | 'integer'
   | 'url'
   | 'position'
   | 'bg-size'
@@ -18,16 +16,12 @@ type DataType =
   | 'generic-name'
   | 'absolute-size'
   | 'relative-size'
-  | 'angle'
-  | 'vector'
 
 const checks: Record<DataType, (value: string) => boolean> = {
   color: isColor,
   length: isLength,
   percentage: isPercentage,
-  ratio: isFraction,
   number: isNumber,
-  integer: isPositiveInteger,
   url: isUrl,
   position: isBackgroundPosition,
   'bg-size': isBackgroundSize,
@@ -37,8 +31,6 @@ const checks: Record<DataType, (value: string) => boolean> = {
   'generic-name': isGenericName,
   'absolute-size': isAbsoluteSize,
   'relative-size': isRelativeSize,
-  angle: isAngle,
-  vector: isVector,
 }
 
 /**
@@ -67,14 +59,7 @@ function isUrl(value: string): boolean {
 /* -------------------------------------------------------------------------- */
 
 function isLineWidth(value: string): boolean {
-  return segment(value, ' ').every(
-    (value) =>
-      isLength(value) ||
-      isNumber(value) ||
-      value === 'thin' ||
-      value === 'medium' ||
-      value === 'thick',
-  )
+  return value === 'thin' || value === 'medium' || value === 'thick'
 }
 
 /* -------------------------------------------------------------------------- */
@@ -184,14 +169,6 @@ function isPercentage(value: string): boolean {
 
 /* -------------------------------------------------------------------------- */
 
-const IS_FRACTION = new RegExp(`^${HAS_NUMBER.source}\\s*/\\s*${HAS_NUMBER.source}$`)
-
-function isFraction(value: string): boolean {
-  return IS_FRACTION.test(value) || hasMathFn(value)
-}
-
-/* -------------------------------------------------------------------------- */
-
 /**
  * Please refer to MDN when updating this list:
  * @see https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
@@ -232,10 +209,9 @@ const LENGTH_UNITS = [
 ]
 
 const IS_LENGTH = new RegExp(`^${HAS_NUMBER.source}(${LENGTH_UNITS.join('|')})$`)
-const IS_LENGTH_FN = /^(--spacing)\(/i
 
-export function isLength(value: string): boolean {
-  return IS_LENGTH.test(value) || IS_LENGTH_FN.test(value) || hasMathFn(value)
+function isLength(value: string): boolean {
+  return IS_LENGTH.test(value) || hasMathFn(value)
 }
 
 /* -------------------------------------------------------------------------- */
@@ -307,66 +283,3 @@ function isBackgroundSize(value: string) {
 
   return count > 0
 }
-
-/* -------------------------------------------------------------------------- */
-
-const ANGLE_UNITS = ['deg', 'rad', 'grad', 'turn']
-
-const IS_ANGLE = new RegExp(`^${HAS_NUMBER.source}(${ANGLE_UNITS.join('|')})$`)
-
-/**
- * Determine if `value` is valid angle
- *
- * <angle> = <number><units>
- * <units> = deg | rad | grad | turn
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/angle
- */
-function isAngle(value: string) {
-  return IS_ANGLE.test(value)
-}
-
-/* -------------------------------------------------------------------------- */
-
-const IS_VECTOR = new RegExp(`^${HAS_NUMBER.source} +${HAS_NUMBER.source} +${HAS_NUMBER.source}$`)
-
-/**
- * Determine if `value` is valid for the vector component of `rotate`
- *
- * <vector> = <number> <number> <number>
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/rotate#vector_plus_angle_value
- */
-function isVector(value: string) {
-  return IS_VECTOR.test(value)
-}
-
-/**
- * Returns true if the value can be parsed as a positive whole number.
- */
-export function isPositiveInteger(value: any) {
-  let num = Number(value)
-  return Number.isInteger(num) && num >= 0 && String(num) === String(value)
-}
-
-export function isStrictPositiveInteger(value: any) {
-  let num = Number(value)
-  return Number.isInteger(num) && num > 0 && String(num) === String(value)
-}
-
-export function isValidSpacingMultiplier(value: any) {
-  return isMultipleOf(value, 0.25)
-}
-
-export function isValidOpacityValue(value: any) {
-  return isMultipleOf(value, 0.25)
-}
-
-/**
- * Ensures a number (or numeric string) is a multiple of another number, and
- * that it has no unnecessary leading or trailing zeros.
- */
-function isMultipleOf(value: string | number, divisor: number) {
-  let num = Number(value)
-  return num >= 0 && num % divisor === 0 && String(num) === String(value)
-}
diff --git a/packages/tailwindcss/src/utils/is-color.ts b/packages/tailwindcss/src/utils/is-color.ts
index de7c4cbd4..0448556db 100644
--- a/packages/tailwindcss/src/utils/is-color.ts
+++ b/packages/tailwindcss/src/utils/is-color.ts
@@ -1,6 +1,4 @@
-const HASH = 0x23
-
-const NAMED_COLORS = new Set([
+const NAMED_COLORS = [
   // CSS Level 1 colors
   'black',
   'silver',
@@ -193,16 +191,14 @@ const NAMED_COLORS = new Set([
   'graytext',
   'accentcolor',
   'accentcolortext',
-])
+]
 
-const IS_COLOR_FN = /^(rgba?|hsla?|hwb|color|(ok)?(lab|lch)|light-dark|color-mix|--alpha)\(/i
+const IS_COLOR_FN = /^(rgba?|hsla?|hwb|color|(ok)?(lab|lch)|light-dark|color-mix)\(/i
 
 export function isColor(value: string): boolean {
   return (
-    value.charCodeAt(0) === HASH || IS_COLOR_FN.test(value) || NAMED_COLORS.has(value.toLowerCase())
+    value.charCodeAt(0) === 35 /* "#" */ ||
+    IS_COLOR_FN.test(value) ||
+    NAMED_COLORS.includes(value.toLowerCase())
   )
 }
-
-export function isNamedColor(value: string): boolean {
-  return NAMED_COLORS.has(value.toLowerCase())
-}
diff --git a/packages/tailwindcss/src/utils/is-valid-arbitrary.ts b/packages/tailwindcss/src/utils/is-valid-arbitrary.ts
deleted file mode 100644
index 2ee433e48..000000000
--- a/packages/tailwindcss/src/utils/is-valid-arbitrary.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-const BACKSLASH = 0x5c
-const OPEN_CURLY = 0x7b
-const CLOSE_CURLY = 0x7d
-const OPEN_PAREN = 0x28
-const CLOSE_PAREN = 0x29
-const OPEN_BRACKET = 0x5b
-const CLOSE_BRACKET = 0x5d
-const DOUBLE_QUOTE = 0x22
-const SINGLE_QUOTE = 0x27
-const SEMICOLON = 0x3b
-
-// This is a shared buffer that is used to keep track of the current nesting level
-// of parens, brackets, and braces. It is used to determine if a character is at
-// the top-level of a string. This is a performance optimization to avoid memory
-// allocations on every call to `segment`.
-const closingBracketStack = new Uint8Array(256)
-
-/**
- * Determine if a given string might be a valid arbitrary value.
- *
- * Unbalanced parens, brackets, and braces are not allowed. Additionally, a
- * top-level `;` is not allowed.
- *
- * This function is very similar to `segment` but `segment` cannot be used
- * because we'd need to split on a bracket stack character.
- */
-export function isValidArbitrary(input: string) {
-  // SAFETY: We can use an index into a shared buffer because this function is
-  // synchronous, non-recursive, and runs in a single-threaded environment.
-  let stackPos = 0
-  let len = input.length
-
-  for (let idx = 0; idx < len; idx++) {
-    let char = input.charCodeAt(idx)
-
-    switch (char) {
-      case BACKSLASH:
-        // The next character is escaped, so we skip it.
-        idx += 1
-        break
-      // Strings should be handled as-is until the end of the string. No need to
-      // worry about balancing parens, brackets, or curlies inside a string.
-      case SINGLE_QUOTE:
-      case DOUBLE_QUOTE:
-        // Ensure we don't go out of bounds.
-        while (++idx < len) {
-          let nextChar = input.charCodeAt(idx)
-
-          // The next character is escaped, so we skip it.
-          if (nextChar === BACKSLASH) {
-            idx += 1
-            continue
-          }
-
-          if (nextChar === char) {
-            break
-          }
-        }
-        break
-      case OPEN_PAREN:
-        closingBracketStack[stackPos] = CLOSE_PAREN
-        stackPos++
-        break
-      case OPEN_BRACKET:
-        closingBracketStack[stackPos] = CLOSE_BRACKET
-        stackPos++
-        break
-      case OPEN_CURLY:
-        // NOTE: We intentionally do not consider `{` to move the stack pointer
-        // because a candidate like `[&{color:red}]:flex` should not be valid.
-        break
-      case CLOSE_BRACKET:
-      case CLOSE_CURLY:
-      case CLOSE_PAREN:
-        if (stackPos === 0) return false
-
-        if (stackPos > 0 && char === closingBracketStack[stackPos - 1]) {
-          // SAFETY: The buffer does not need to be mutated because the stack is
-          // only ever read from or written to its current position. Its current
-          // position is only ever incremented after writing to it. Meaning that
-          // the buffer can be dirty for the next use and still be correct since
-          // reading/writing always starts at position `0`.
-          stackPos--
-        }
-        break
-      case SEMICOLON:
-        if (stackPos === 0) return false
-        break
-    }
-  }
-
-  return true
-}
diff --git a/packages/tailwindcss/src/utils/math-operators.ts b/packages/tailwindcss/src/utils/math-operators.ts
index d31cc3c52..7c4b1c473 100644
--- a/packages/tailwindcss/src/utils/math-operators.ts
+++ b/packages/tailwindcss/src/utils/math-operators.ts
@@ -1,22 +1,4 @@
-const LOWER_A = 0x61
-const LOWER_Z = 0x7a
-const UPPER_A = 0x41
-const UPPER_Z = 0x5a
-const LOWER_E = 0x65
-const UPPER_E = 0x45
-const ZERO = 0x30
-const NINE = 0x39
-const ADD = 0x2b
-const SUB = 0x2d
-const MUL = 0x2a
-const DIV = 0x2f
-const OPEN_PAREN = 0x28
-const CLOSE_PAREN = 0x29
-const COMMA = 0x2c
-const SPACE = 0x20
-const PERCENT = 0x25
-
-const MATH_FUNCTIONS = [
+const mathFunctions = [
   'calc',
   'min',
   'max',
@@ -39,50 +21,29 @@ const MATH_FUNCTIONS = [
 ]
 
 export function hasMathFn(input: string) {
-  return input.indexOf('(') !== -1 && MATH_FUNCTIONS.some((fn) => input.includes(`${fn}(`))
+  return input.indexOf('(') !== -1 && mathFunctions.some((fn) => input.includes(`${fn}(`))
 }
 
 export function addWhitespaceAroundMathOperators(input: string) {
+  // There's definitely no functions in the input, so bail early
+  if (input.indexOf('(') === -1) {
+    return input
+  }
+
   // Bail early if there are no math functions in the input
-  if (!MATH_FUNCTIONS.some((fn) => input.includes(fn))) {
+  if (!mathFunctions.some((fn) => input.includes(fn))) {
     return input
   }
 
   let result = ''
   let formattable: boolean[] = []
 
-  let valuePos = null
-  let lastValuePos = null
-
   for (let i = 0; i < input.length; i++) {
-    let char = input.charCodeAt(i)
-
-    // Track if we see a number followed by a unit, then we know for sure that
-    // this is not a function call.
-    if (char >= ZERO && char <= NINE) {
-      valuePos = i
-    }
-
-    // If we saw a number before, and we see normal a-z character, then we
-    // assume this is a value such as `123px`
-    else if (
-      valuePos !== null &&
-      (char === PERCENT ||
-        (char >= LOWER_A && char <= LOWER_Z) ||
-        (char >= UPPER_A && char <= UPPER_Z))
-    ) {
-      valuePos = i
-    }
-
-    // Once we see something else, we reset the value position
-    else {
-      lastValuePos = valuePos
-      valuePos = null
-    }
+    let char = input[i]
 
     // Determine if we're inside a math function
-    if (char === OPEN_PAREN) {
-      result += input[i]
+    if (char === '(') {
+      result += char
 
       // Scan backwards to determine the function name. This assumes math
       // functions are named with lowercase alphanumeric characters.
@@ -91,9 +52,9 @@ export function addWhitespaceAroundMathOperators(input: string) {
       for (let j = i - 1; j >= 0; j--) {
         let inner = input.charCodeAt(j)
 
-        if (inner >= ZERO && inner <= NINE) {
+        if (inner >= 48 && inner <= 57) {
           start = j // 0-9
-        } else if (inner >= LOWER_A && inner <= LOWER_Z) {
+        } else if (inner >= 97 && inner <= 122) {
           start = j // a-z
         } else {
           break
@@ -103,7 +64,7 @@ export function addWhitespaceAroundMathOperators(input: string) {
       let fn = input.slice(start, i)
 
       // This is a known math function so start formatting
-      if (MATH_FUNCTIONS.includes(fn)) {
+      if (mathFunctions.includes(fn)) {
         formattable.unshift(true)
         continue
       }
@@ -122,82 +83,70 @@ export function addWhitespaceAroundMathOperators(input: string) {
 
     // We've exited the function so format according to the parent function's
     // type.
-    else if (char === CLOSE_PAREN) {
-      result += input[i]
+    else if (char === ')') {
+      result += char
       formattable.shift()
     }
 
     // Add spaces after commas in math functions
-    else if (char === COMMA && formattable[0]) {
+    else if (char === ',' && formattable[0]) {
       result += `, `
       continue
     }
 
     // Skip over consecutive whitespace
-    else if (char === SPACE && formattable[0] && result.charCodeAt(result.length - 1) === SPACE) {
+    else if (char === ' ' && formattable[0] && result[result.length - 1] === ' ') {
       continue
     }
 
     // Add whitespace around operators inside math functions
-    else if ((char === ADD || char === MUL || char === DIV || char === SUB) && formattable[0]) {
+    else if ((char === '+' || char === '*' || char === '/' || char === '-') && formattable[0]) {
       let trimmed = result.trimEnd()
-      let prev = trimmed.charCodeAt(trimmed.length - 1)
-      let prevPrev = trimmed.charCodeAt(trimmed.length - 2)
-      let next = input.charCodeAt(i + 1)
-
-      // Do not add spaces for scientific notation, e.g.: `-3.4e-2`
-      if ((prev === LOWER_E || prev === UPPER_E) && prevPrev >= ZERO && prevPrev <= NINE) {
-        result += input[i]
-        continue
-      }
+      let prev = trimmed[trimmed.length - 1]
 
       // If we're preceded by an operator don't add spaces
-      else if (prev === ADD || prev === MUL || prev === DIV || prev === SUB) {
-        result += input[i]
+      if (prev === '+' || prev === '*' || prev === '/' || prev === '-') {
+        result += char
         continue
       }
 
       // If we're at the beginning of an argument don't add spaces
-      else if (prev === OPEN_PAREN || prev === COMMA) {
-        result += input[i]
+      else if (prev === '(' || prev === ',') {
+        result += char
         continue
       }
 
       // Add spaces only after the operator if we already have spaces before it
-      else if (input.charCodeAt(i - 1) === SPACE) {
-        result += `${input[i]} `
+      else if (input[i - 1] === ' ') {
+        result += `${char} `
       }
 
-      // Add spaces around the operator, if...
-      else if (
-        // Previous is a digit
-        (prev >= ZERO && prev <= NINE) ||
-        // Next is a digit
-        (next >= ZERO && next <= NINE) ||
-        // Previous is end of a function call (or parenthesized expression)
-        prev === CLOSE_PAREN ||
-        // Next is start of a parenthesized expression
-        next === OPEN_PAREN ||
-        // Next is an operator
-        next === ADD ||
-        next === MUL ||
-        next === DIV ||
-        next === SUB ||
-        // Previous position was a value (+ unit)
-        (lastValuePos !== null && lastValuePos === i - 1)
-      ) {
-        result += ` ${input[i]} `
-      }
-
-      // Everything else
+      // Add spaces around the operator
       else {
-        result += input[i]
+        result += ` ${char} `
       }
     }
 
+    // Skip over `to-zero` when in a math function.
+    //
+    // This is specifically to handle this value in the round(…) function:
+    //
+    // ```
+    // round(to-zero, 1px)
+    //       ^^^^^^^
+    // ```
+    //
+    // This is because the first argument is optionally a keyword and `to-zero`
+    // contains a hyphen and we want to avoid adding spaces inside it.
+    else if (formattable[0] && input.startsWith('to-zero', i)) {
+      let start = i
+      i += 7
+      result += input.slice(start, i + 1)
+    }
+
     // Handle all other characters
     else {
-      result += input[i]
+      result += char
     }
   }
 
diff --git a/packages/tailwindcss/src/utils/replace-object.ts b/packages/tailwindcss/src/utils/replace-object.ts
deleted file mode 100644
index b4fc993fa..000000000
--- a/packages/tailwindcss/src/utils/replace-object.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function replaceObject<T extends object, U extends object | null>(target: T, source: U): U {
-  // Clear out the target object, otherwise inspecting the final object will
-  // look very confusing.
-  for (let key in target) delete target[key]
-
-  return Object.assign(target, source)
-}
diff --git a/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts b/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
index 701e80f05..23895596c 100644
--- a/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
+++ b/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
@@ -1,141 +1,37 @@
-import { describe, expect, it } from 'vitest'
-import { cartesian } from '../cartesian'
-import { replaceAlpha } from '../utilities'
+import { expect, it } from 'vitest'
 import { replaceShadowColors } from './replace-shadow-colors'
 
-describe('without replacer', () => {
-  let replacer = (color: string) => `var(--tw-shadow-color, ${color})`
+const table = [
+  {
+    input: ['var(--my-shadow)'],
+    output: 'var(--my-shadow)',
+  },
+  {
+    input: ['1px var(--my-shadow)'],
+    output: '1px var(--my-shadow)',
+  },
+  {
+    input: ['1px 1px var(--my-color)'],
+    output: '1px 1px var(--tw-shadow-color)',
+  },
+  {
+    input: ['0 0 0 var(--my-color)'],
+    output: '0 0 0 var(--tw-shadow-color)',
+  },
+  {
+    input: ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'],
+    output: [
+      'var(--my-shadow)',
+      '1px 1px var(--tw-shadow-color)',
+      '0 0 1px var(--tw-shadow-color)',
+    ].join(', '),
+  },
+]
 
-  it('should handle var shadow', () => {
-    let parsed = replaceShadowColors('var(--my-shadow)', replacer)
-    expect(parsed).toMatchInlineSnapshot(`"var(--my-shadow)"`)
-  })
-
-  it('should handle var shadow with offset', () => {
-    let parsed = replaceShadowColors('1px var(--my-shadow)', replacer)
-    expect(parsed).toMatchInlineSnapshot(`"1px var(--my-shadow)"`)
-  })
-
-  it('should handle var color with offsets', () => {
-    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
-    expect(parsed).toMatchInlineSnapshot(`"1px 1px var(--tw-shadow-color, var(--my-color))"`)
-  })
-
-  it('should handle var color with zero offsets', () => {
-    let parsed = replaceShadowColors('0 0 0 var(--my-color)', replacer)
-    expect(parsed).toMatchInlineSnapshot(`"0 0 0 var(--tw-shadow-color, var(--my-color))"`)
-  })
-
-  it('should handle two values with currentcolor', () => {
-    let parsed = replaceShadowColors('1px 2px', replacer)
-    expect(parsed).toMatchInlineSnapshot(`"1px 2px var(--tw-shadow-color, currentcolor)"`)
-  })
-
-  it('should handle three values with currentcolor', () => {
-    let parsed = replaceShadowColors('1px 2px 3px', replacer)
-    expect(parsed).toMatchInlineSnapshot(`"1px 2px 3px var(--tw-shadow-color, currentcolor)"`)
-  })
-
-  it('should handle four values with currentcolor', () => {
-    let parsed = replaceShadowColors('1px 2px 3px 4px', replacer)
-    expect(parsed).toMatchInlineSnapshot(`"1px 2px 3px 4px var(--tw-shadow-color, currentcolor)"`)
-  })
-
-  it('should find the color regardless of its position', () => {
-    for (let [x, y, blur, spread, color] of cartesian(
-      ['calc(var(--spacing) * 1)', '1', '--spacing(1)'], // x
-      ['calc(var(--spacing) * 2)', '2', '--spacing(2)'], // y
-      ['calc(var(--spacing) * 3)', '3', '--spacing(3)'], // blur
-      ['calc(var(--spacing) * 4)', '4', '--spacing(4)'], // spread
-      ['black', 'rgb(0, 0, 0)', '#000', '--alpha(var(--color) / 50%)', 'var(--uknown-color)'], // color
-    )) {
-      let expectedColor = `var(--tw-shadow-color, ${color})`
-
-      {
-        let input = `${x} ${color} ${y} ${blur} ${spread}`
-        expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
-      }
-
-      {
-        let input = `${x} ${y} ${color} ${blur} ${spread}`
-        expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
-      }
-
-      {
-        let input = `${x} ${y} ${blur} ${color} ${spread}`
-        expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
-      }
-    }
-  })
-
-  // When using `var(…)`, we don't know the types of the used variables, but we
-  // might be able to find the color itself.
-  it.each([
-    'black', // Named color
-    '#000', // Hex color
-    'rgb(0, 0, 0)', // Color functions
-    '--alpha(var(--color) / 50%)', // Known custom functions
-  ])('should find the color (%s)', (color) => {
-    let expectedColor = `var(--tw-shadow-color, ${color})`
-
-    {
-      let input = `var(--x) var(--y) ${color}`
-      expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
-    }
-
-    {
-      let input = `var(--x) var(--y) var(--blur) ${color}`
-      expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
-    }
-
-    {
-      let input = `var(--x) var(--y) var(--blur) var(--spread) ${color}`
-      expect(replaceShadowColors(input, replacer)).toEqual(input.replace(color, expectedColor))
-    }
-  })
-
-  it('should handle multiple shadows', () => {
-    let parsed = replaceShadowColors(
-      ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
-      replacer,
-    )
-    expect(parsed).toMatchInlineSnapshot(
-      `"var(--my-shadow), 1px 1px var(--tw-shadow-color, var(--my-color)), 0 0 1px var(--tw-shadow-color, var(--my-color))"`,
-    )
-  })
-})
-
-describe('with replacer', () => {
-  let replacer = (color: string) => `var(--tw-shadow-color, ${replaceAlpha(color, '50%')})`
-
-  it('should handle var color with intensity', () => {
-    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
-    expect(parsed).toMatchInlineSnapshot(
-      `"1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`,
-    )
-  })
-
-  it('should handle box-shadow with intensity', () => {
-    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
-    expect(parsed).toMatchInlineSnapshot(
-      `"1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`,
-    )
-  })
-
-  it('should handle four values with intensity and no color value', () => {
-    let parsed = replaceShadowColors('1px 2px 3px 4px', replacer)
-    expect(parsed).toMatchInlineSnapshot(
-      `"1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%))"`,
-    )
-  })
-
-  it('should handle multiple shadows with intensity', () => {
-    let parsed = replaceShadowColors(
-      ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
-      replacer,
-    )
-    expect(parsed).toMatchInlineSnapshot(
-      `"var(--my-shadow), 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%)), 0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`,
-    )
-  })
-})
+it.each(table)(
+  'should be possible to get the names for an animation: $output',
+  ({ input, output }) => {
+    let parsed = replaceShadowColors(input.join(', '), 'var(--tw-shadow-color)')
+    expect(parsed).toEqual(output)
+  },
+)
diff --git a/packages/tailwindcss/src/utils/replace-shadow-colors.ts b/packages/tailwindcss/src/utils/replace-shadow-colors.ts
index 5f9e0264c..e758955be 100644
--- a/packages/tailwindcss/src/utils/replace-shadow-colors.ts
+++ b/packages/tailwindcss/src/utils/replace-shadow-colors.ts
@@ -1,135 +1,38 @@
-import * as ValueParser from '../value-parser'
-import { walk, WalkAction } from '../walk'
-import { isNamedColor } from './is-color'
 import { segment } from './segment'
 
 const KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
-const LENGTH_FUNCTIONS = new Set(['calc', 'clamp', 'max', 'min', '--spacing'])
-const COLOR_FUNCTIONS = new Set([
-  'color',
-  'color-mix',
-  'contrast-color',
-  'device-cmyk',
-  'hsl',
-  'hsla',
-  'hwb',
-  'lab',
-  'lch',
-  'light-dark',
-  'oklab',
-  'oklch',
-  'rgb',
-  'rgba',
-  '--alpha',
-])
-const LENGTH = /^-?(\d+|\.\d+)(.*?)$/
+const LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
 
-export function replaceShadowColors(input: string, replacement: (color: string) => string) {
-  function replaceAst(node: ValueParser.ValueAstNode): ValueParser.ValueAstNode[] {
-    let color = ValueParser.toCss([node])
-    let updatedColor = replacement(color)
-    let ast = ValueParser.parse(updatedColor)
-    return ast
+export function replaceShadowColors(input: string, replacement: string): string {
+  for (let shadow of segment(input, ',')) {
+    let parts = segment(shadow, ' ').filter((part) => part.trim() !== '')
+    let color = null
+    let offsetX = null
+    let offsetY = null
+
+    for (let part of parts) {
+      if (KEYWORDS.has(part)) {
+        continue
+      } else if (LENGTH.test(part)) {
+        if (offsetX === null) {
+          offsetX = part
+        } else if (offsetY === null) {
+          offsetY = part
+        }
+
+        // Reset index, since the regex is stateful.
+        LENGTH.lastIndex = 0
+      } else if (color === null) {
+        color = part
+      }
+    }
+
+    // Only replace if we found an x-offset, y-offset, and color, otherwise we
+    // may be replacing the wrong part of the box-shadow.
+    if (offsetX !== null && offsetY !== null && color !== null) {
+      input = input.replace(color, replacement)
+    }
   }
 
-  let shadows = segment(input, ',').map((shadow) => {
-    shadow = shadow.trim()
-    let ast = ValueParser.parse(shadow)
-
-    let unknown: ValueParser.ValueAstNode | null = null
-    let unknowns = 0
-    let lengths = 0
-    let replaced = false
-
-    walk(ast, (node) => {
-      switch (node.kind) {
-        case 'word': {
-          // Skip known keywords
-          if (KEYWORDS.has(node.value.toLowerCase())) {
-            return WalkAction.Continue
-          }
-
-          // Must be a length
-          if (LENGTH.test(node.value.toLowerCase())) {
-            lengths++
-            return WalkAction.Continue
-          }
-
-          // Must be a color
-          if (node.value[0] === '#' || isNamedColor(node.value)) {
-            replaced = true
-            return WalkAction.ReplaceStop(replaceAst(node))
-          }
-
-          // We're not sure yet
-          unknown = node
-          unknowns++
-          break
-        }
-
-        case 'function': {
-          // Must be a color
-          if (COLOR_FUNCTIONS.has(node.value.toLowerCase())) {
-            replaced = true
-            return WalkAction.ReplaceStop(replaceAst(node))
-          }
-
-          // Must be a length
-          if (LENGTH_FUNCTIONS.has(node.value.toLowerCase())) {
-            lengths++
-            return WalkAction.Skip
-          }
-
-          // We're not sure yet
-          unknown = node
-          unknowns++
-
-          // We're not interested in the arguments of the function
-          return WalkAction.Skip
-        }
-
-        // Ignore separators
-        case 'separator':
-          return WalkAction.Continue
-
-        default:
-          node satisfies never
-      }
-    })
-
-    // We definitely found a color, nothing else to do
-    if (replaced) {
-      return ValueParser.toCss(ast)
-    }
-
-    // If the x and y offsets were not detected, the shadow is either invalid or
-    // using a variable to represent more than one field in the shadow value, so
-    // we can't know what to replace.
-    if (lengths < 2) {
-      return shadow
-    }
-
-    // If no color was found, assume the shadow is relying on the browser
-    // default shadow color and append the replacement color.
-    if (unknowns === 0) {
-      return `${shadow} ${replacement('currentcolor')}`
-    }
-
-    // A single left-over, we assume that this is the color
-    if (unknowns === 1) {
-      walk(ast, (node) => {
-        if (node === unknown) {
-          replaced = true
-          return WalkAction.ReplaceStop(replaceAst(node))
-        }
-
-        // Keep the walk top-level only, no need to go into functions
-        return WalkAction.Skip
-      })
-    }
-
-    return replaced ? ValueParser.toCss(ast) : shadow
-  })
-
-  return shadows.join(', ')
+  return input
 }
diff --git a/packages/tailwindcss/src/utils/segment.bench.ts b/packages/tailwindcss/src/utils/segment.bench.ts
deleted file mode 100644
index 1ee335d5e..000000000
--- a/packages/tailwindcss/src/utils/segment.bench.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { bench } from 'vitest'
-import { segment } from './segment'
-
-const values = [
-  ['hover:focus:underline', ':'],
-  ['var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)', ','],
-  ['var(--some-value,env(safe-area-inset-top,var(--some-other-value,env(safe-area-inset))))', ','],
-]
-
-bench('segment', () => {
-  for (let [value, sep] of values) {
-    segment(value, sep)
-  }
-})
diff --git a/packages/tailwindcss/src/utils/segment.test.ts b/packages/tailwindcss/src/utils/segment.test.ts
index e9bd8c49d..9cfa91f86 100644
--- a/packages/tailwindcss/src/utils/segment.test.ts
+++ b/packages/tailwindcss/src/utils/segment.test.ts
@@ -21,30 +21,6 @@ it('should not split inside of curlies', () => {
   expect(segment('a:{b:c}:d', ':')).toEqual(['a', '{b:c}', 'd'])
 })
 
-it('should not split inside of double quotes', () => {
-  expect(segment('a:"b:c":d', ':')).toEqual(['a', '"b:c"', 'd'])
-})
-
-it('should not split inside of single quotes', () => {
-  expect(segment("a:'b:c':d", ':')).toEqual(['a', "'b:c'", 'd'])
-})
-
-it('should not crash when double quotes are unbalanced', () => {
-  expect(segment('a:"b:c:d', ':')).toEqual(['a', '"b:c:d'])
-})
-
-it('should not crash when single quotes are unbalanced', () => {
-  expect(segment("a:'b:c:d", ':')).toEqual(['a', "'b:c:d"])
-})
-
-it('should skip escaped double quotes', () => {
-  expect(segment(String.raw`a:"b:c\":d":e`, ':')).toEqual(['a', String.raw`"b:c\":d"`, 'e'])
-})
-
-it('should skip escaped single quotes', () => {
-  expect(segment(String.raw`a:'b:c\':d':e`, ':')).toEqual(['a', String.raw`'b:c\':d'`, 'e'])
-})
-
 it('should split by the escape sequence which is escape as well', () => {
   expect(segment('a\\b\\c\\d', '\\')).toEqual(['a', 'b', 'c', 'd'])
   expect(segment('a\\(b\\c)\\d', '\\')).toEqual(['a', '(b\\c)', 'd'])
diff --git a/packages/tailwindcss/src/utils/segment.ts b/packages/tailwindcss/src/utils/segment.ts
index 018485dbb..e043d30a8 100644
--- a/packages/tailwindcss/src/utils/segment.ts
+++ b/packages/tailwindcss/src/utils/segment.ts
@@ -1,24 +1,8 @@
-const BACKSLASH = 0x5c
-const OPEN_CURLY = 0x7b
-const CLOSE_CURLY = 0x7d
-const OPEN_PAREN = 0x28
-const CLOSE_PAREN = 0x29
-const OPEN_BRACKET = 0x5b
-const CLOSE_BRACKET = 0x5d
-const DOUBLE_QUOTE = 0x22
-const SINGLE_QUOTE = 0x27
-
-// This is a shared buffer that is used to keep track of the current nesting level
-// of parens, brackets, and braces. It is used to determine if a character is at
-// the top-level of a string. This is a performance optimization to avoid memory
-// allocations on every call to `segment`.
-const closingBracketStack = new Uint8Array(256)
-
 /**
  * This splits a string on a top-level character.
  *
- * Regex doesn't support recursion (at least not the JS-flavored version),
- * so we have to use a tiny state machine to keep track of paren placement.
+ * Regex doesn't support recursion (at least not the JS-flavored version).
+ * So we have to use a tiny state machine to keep track of paren placement.
  *
  * Expected behavior using commas:
  * var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)
@@ -27,70 +11,43 @@ const closingBracketStack = new Uint8Array(256)
  *        ╰──────────────┴──┴───────────── Ignored b/c inside >= 1 levels of parens
  */
 export function segment(input: string, separator: string) {
-  // SAFETY: We can use an index into a shared buffer because this function is
-  // synchronous, non-recursive, and runs in a single-threaded environment.
-  let stackPos = 0
+  // Stack of characters to close open brackets. Appending to a string because
+  // it's faster than an array of strings.
+  let closingBracketStack = ''
   let parts: string[] = []
   let lastPos = 0
-  let len = input.length
 
-  let separatorCode = separator.charCodeAt(0)
+  for (let idx = 0; idx < input.length; idx++) {
+    let char = input[idx]
 
-  for (let idx = 0; idx < len; idx++) {
-    let char = input.charCodeAt(idx)
-
-    if (stackPos === 0 && char === separatorCode) {
+    if (closingBracketStack.length === 0 && char === separator) {
       parts.push(input.slice(lastPos, idx))
       lastPos = idx + 1
       continue
     }
 
     switch (char) {
-      case BACKSLASH:
+      case '\\':
         // The next character is escaped, so we skip it.
         idx += 1
         break
-      // Strings should be handled as-is until the end of the string. No need to
-      // worry about balancing parens, brackets, or curlies inside a string.
-      case SINGLE_QUOTE:
-      case DOUBLE_QUOTE:
-        // Ensure we don't go out of bounds.
-        while (++idx < len) {
-          let nextChar = input.charCodeAt(idx)
-
-          // The next character is escaped, so we skip it.
-          if (nextChar === BACKSLASH) {
-            idx += 1
-            continue
-          }
-
-          if (nextChar === char) {
-            break
-          }
-        }
+      case '(':
+        closingBracketStack += ')'
         break
-      case OPEN_PAREN:
-        closingBracketStack[stackPos] = CLOSE_PAREN
-        stackPos++
+      case '[':
+        closingBracketStack += ']'
         break
-      case OPEN_BRACKET:
-        closingBracketStack[stackPos] = CLOSE_BRACKET
-        stackPos++
+      case '{':
+        closingBracketStack += '}'
         break
-      case OPEN_CURLY:
-        closingBracketStack[stackPos] = CLOSE_CURLY
-        stackPos++
-        break
-      case CLOSE_BRACKET:
-      case CLOSE_CURLY:
-      case CLOSE_PAREN:
-        if (stackPos > 0 && char === closingBracketStack[stackPos - 1]) {
-          // SAFETY: The buffer does not need to be mutated because the stack is
-          // only ever read from or written to its current position. Its current
-          // position is only ever incremented after writing to it. Meaning that
-          // the buffer can be dirty for the next use and still be correct since
-          // reading/writing always starts at position `0`.
-          stackPos--
+      case ')':
+      case ']':
+      case '}':
+        if (
+          closingBracketStack.length > 0 &&
+          char === closingBracketStack[closingBracketStack.length - 1]
+        ) {
+          closingBracketStack = closingBracketStack.slice(0, closingBracketStack.length - 1)
         }
         break
     }
diff --git a/packages/tailwindcss/src/utils/to-key-path.bench.ts b/packages/tailwindcss/src/utils/to-key-path.bench.ts
deleted file mode 100644
index e2a942762..000000000
--- a/packages/tailwindcss/src/utils/to-key-path.bench.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { bench } from 'vitest'
-import { toKeyPath } from './to-key-path'
-
-bench('toKeyPath', () => {
-  toKeyPath('fontSize.xs')
-  toKeyPath('fontSize.xs[1].lineHeight')
-  toKeyPath('colors.red.500')
-  toKeyPath('colors[red].500')
-  toKeyPath('colors[red].[500]')
-  toKeyPath('colors[red]500')
-  toKeyPath('colors[red][500]')
-})
diff --git a/packages/tailwindcss/src/utils/to-key-path.test.ts b/packages/tailwindcss/src/utils/to-key-path.test.ts
deleted file mode 100644
index 87056c20b..000000000
--- a/packages/tailwindcss/src/utils/to-key-path.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { expect, it } from 'vitest'
-import { toKeyPath } from './to-key-path'
-
-it('can convert key paths to arrays', () => {
-  expect(toKeyPath('fontSize.xs')).toEqual(['fontSize', 'xs'])
-  expect(toKeyPath('fontSize.xs[1].lineHeight')).toEqual(['fontSize', 'xs', '1', 'lineHeight'])
-  expect(toKeyPath('colors.red.500')).toEqual(['colors', 'red', '500'])
-  expect(toKeyPath('colors[red].500')).toEqual(['colors', 'red', '500'])
-  expect(toKeyPath('colors[red].[500]')).toEqual(['colors', 'red', '500'])
-  expect(toKeyPath('colors[red]500')).toEqual(['colors', 'red', '500'])
-  expect(toKeyPath('colors[red][500]')).toEqual(['colors', 'red', '500'])
-  expect(toKeyPath('colors[red]500[50]5')).toEqual(['colors', 'red', '500', '50', '5'])
-})
diff --git a/packages/tailwindcss/src/utils/to-key-path.ts b/packages/tailwindcss/src/utils/to-key-path.ts
deleted file mode 100644
index 40334612e..000000000
--- a/packages/tailwindcss/src/utils/to-key-path.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { segment } from './segment'
-
-/**
- * Parse a path string into an array of path segments
- *
- * Square bracket notation `a[b]` may be used to "escape" dots that would
- * otherwise be interpreted as path separators.
- *
- * Example:
- * a -> ['a']
- * a.b.c -> ['a', 'b', 'c']
- * a[b].c -> ['a', 'b', 'c']
- * a[b.c].e.f -> ['a', 'b.c', 'e', 'f']
- * a[b][c][d] -> ['a', 'b', 'c', 'd']
- *
- * @param {string} path
- **/
-export function toKeyPath(path: string) {
-  let keypath: string[] = []
-
-  for (let part of segment(path, '.')) {
-    if (!part.includes('[')) {
-      keypath.push(part)
-      continue
-    }
-
-    let currentIndex = 0
-
-    while (true) {
-      let bracketL = part.indexOf('[', currentIndex)
-      let bracketR = part.indexOf(']', bracketL)
-
-      if (bracketL === -1 || bracketR === -1) {
-        break
-      }
-
-      // Add the part before the bracket as a key
-      if (bracketL > currentIndex) {
-        keypath.push(part.slice(currentIndex, bracketL))
-      }
-
-      // Add the part inside the bracket as a key
-      keypath.push(part.slice(bracketL + 1, bracketR))
-      currentIndex = bracketR + 1
-    }
-
-    // Add the part after the last bracket as a key
-    if (currentIndex <= part.length - 1) {
-      keypath.push(part.slice(currentIndex))
-    }
-  }
-
-  return keypath
-}
diff --git a/packages/tailwindcss/src/utils/topological-sort.ts b/packages/tailwindcss/src/utils/topological-sort.ts
deleted file mode 100644
index ae20da4aa..000000000
--- a/packages/tailwindcss/src/utils/topological-sort.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export function topologicalSort<Key>(
-  graph: Map<Key, Set<Key>>,
-  options: { onCircularDependency: (path: Key[], start: Key) => void },
-): Key[] {
-  let seen = new Set<Key>()
-  let wip = new Set<Key>()
-
-  let sorted: Key[] = []
-
-  function visit(node: Key, path: Key[] = []) {
-    if (!graph.has(node)) return
-    if (seen.has(node)) return
-
-    // Circular dependency detected
-    if (wip.has(node)) options.onCircularDependency?.(path, node)
-
-    wip.add(node)
-
-    for (let dependency of graph.get(node) ?? []) {
-      path.push(node)
-      visit(dependency, path)
-      path.pop()
-    }
-
-    seen.add(node)
-    wip.delete(node)
-
-    sorted.push(node)
-  }
-
-  for (let node of graph.keys()) {
-    visit(node)
-  }
-
-  return sorted
-}
diff --git a/packages/tailwindcss/src/utils/variables.ts b/packages/tailwindcss/src/utils/variables.ts
deleted file mode 100644
index b72987565..000000000
--- a/packages/tailwindcss/src/utils/variables.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as ValueParser from '../value-parser'
-import { walk, WalkAction } from '../walk'
-import { DefaultMap } from './default-map'
-
-let extractUsedVariablesCache = new DefaultMap((raw) => {
-  let variables: string[] = []
-  walk(ValueParser.parse(raw), (node) => {
-    if (node.kind !== 'function' || node.value !== 'var') return
-
-    walk(node.nodes, (child) => {
-      if (child.kind !== 'word' || child.value[0] !== '-' || child.value[1] !== '-') return
-
-      variables.push(child.value)
-    })
-
-    return WalkAction.Skip
-  })
-  return variables
-})
-
-export function extractUsedVariables(raw: string): string[] {
-  return extractUsedVariablesCache.get(raw)
-}
diff --git a/packages/tailwindcss/src/value-parser.test.ts b/packages/tailwindcss/src/value-parser.test.ts
deleted file mode 100644
index f12949505..000000000
--- a/packages/tailwindcss/src/value-parser.test.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { parse, toCss } from './value-parser'
-import { walk, WalkAction } from './walk'
-
-describe('parse', () => {
-  it('should parse a value', () => {
-    expect(parse('123px')).toEqual([{ kind: 'word', value: '123px' }])
-  })
-
-  it('should parse a string value', () => {
-    expect(parse("'hello world'")).toEqual([{ kind: 'word', value: "'hello world'" }])
-  })
-
-  it('should parse a list', () => {
-    expect(parse('hello world')).toEqual([
-      { kind: 'word', value: 'hello' },
-      { kind: 'separator', value: ' ' },
-      { kind: 'word', value: 'world' },
-    ])
-  })
-
-  it('should parse a string containing parentheses', () => {
-    expect(parse("'hello ( world )'")).toEqual([{ kind: 'word', value: "'hello ( world )'" }])
-  })
-
-  it('should parse a function with no arguments', () => {
-    expect(parse('theme()')).toEqual([{ kind: 'function', value: 'theme', nodes: [] }])
-  })
-
-  it('should parse a function with a single argument', () => {
-    expect(parse('theme(foo)')).toEqual([
-      { kind: 'function', value: 'theme', nodes: [{ kind: 'word', value: 'foo' }] },
-    ])
-  })
-
-  it('should parse a function with a single string argument', () => {
-    expect(parse("theme('foo')")).toEqual([
-      { kind: 'function', value: 'theme', nodes: [{ kind: 'word', value: "'foo'" }] },
-    ])
-  })
-
-  it('should parse a function with multiple arguments', () => {
-    expect(parse('theme(foo, bar)')).toEqual([
-      {
-        kind: 'function',
-        value: 'theme',
-        nodes: [
-          { kind: 'word', value: 'foo' },
-          { kind: 'separator', value: ', ' },
-          { kind: 'word', value: 'bar' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse a function with multiple arguments across lines', () => {
-    expect(parse('theme(\n\tfoo,\n\tbar\n)')).toEqual([
-      {
-        kind: 'function',
-        value: 'theme',
-        nodes: [
-          { kind: 'separator', value: '\n\t' },
-          { kind: 'word', value: 'foo' },
-          { kind: 'separator', value: ',\n\t' },
-          { kind: 'word', value: 'bar' },
-          { kind: 'separator', value: '\n' },
-        ],
-      },
-    ])
-  })
-
-  it('should parse a function with nested arguments', () => {
-    expect(parse('theme(foo, theme(bar))')).toEqual([
-      {
-        kind: 'function',
-        value: 'theme',
-        nodes: [
-          { kind: 'word', value: 'foo' },
-          { kind: 'separator', value: ', ' },
-          { kind: 'function', value: 'theme', nodes: [{ kind: 'word', value: 'bar' }] },
-        ],
-      },
-    ])
-  })
-
-  it('should parse a function with nested arguments separated by `/`', () => {
-    expect(parse('theme(colors.red.500/var(--opacity))')).toEqual([
-      {
-        kind: 'function',
-        value: 'theme',
-        nodes: [
-          { kind: 'word', value: 'colors.red.500' },
-          { kind: 'word', value: '/' },
-          { kind: 'function', value: 'var', nodes: [{ kind: 'word', value: '--opacity' }] },
-        ],
-      },
-    ])
-  })
-
-  it('should handle calculations', () => {
-    expect(parse('calc((1 + 2) * 3)')).toEqual([
-      {
-        kind: 'function',
-        value: 'calc',
-        nodes: [
-          {
-            kind: 'function',
-            value: '',
-            nodes: [
-              { kind: 'word', value: '1' },
-              { kind: 'separator', value: ' ' },
-              { kind: 'word', value: '+' },
-              { kind: 'separator', value: ' ' },
-              { kind: 'word', value: '2' },
-            ],
-          },
-          { kind: 'separator', value: ' ' },
-          { kind: 'word', value: '*' },
-          { kind: 'separator', value: ' ' },
-          { kind: 'word', value: '3' },
-        ],
-      },
-    ])
-  })
-
-  it('should handle media query params with functions', () => {
-    expect(
-      parse(
-        '(min-width: 600px) and (max-width:theme(colors.red.500)) and (theme(--breakpoint-sm)<width<=theme(--breakpoint-md))',
-      ),
-    ).toEqual([
-      {
-        kind: 'function',
-        value: '',
-        nodes: [
-          { kind: 'word', value: 'min-width' },
-          { kind: 'separator', value: ': ' },
-          { kind: 'word', value: '600px' },
-        ],
-      },
-      { kind: 'separator', value: ' ' },
-      { kind: 'word', value: 'and' },
-      { kind: 'separator', value: ' ' },
-      {
-        kind: 'function',
-        value: '',
-        nodes: [
-          { kind: 'word', value: 'max-width' },
-          { kind: 'separator', value: ':' },
-          { kind: 'function', value: 'theme', nodes: [{ kind: 'word', value: 'colors.red.500' }] },
-        ],
-      },
-      { kind: 'separator', value: ' ' },
-      { kind: 'word', value: 'and' },
-      { kind: 'separator', value: ' ' },
-      {
-        kind: 'function',
-        value: '',
-        nodes: [
-          { kind: 'function', value: 'theme', nodes: [{ kind: 'word', value: '--breakpoint-sm' }] },
-          { kind: 'separator', value: '<' },
-          { kind: 'word', value: 'width' },
-          { kind: 'separator', value: '<=' },
-          { kind: 'function', value: 'theme', nodes: [{ kind: 'word', value: '--breakpoint-md' }] },
-        ],
-      },
-    ])
-  })
-
-  it('should not error when extra `)` was passed', () => {
-    expect(parse('calc(1 + 2))')).toEqual([
-      {
-        kind: 'function',
-        value: 'calc',
-        nodes: [
-          { kind: 'word', value: '1' },
-          { kind: 'separator', value: ' ' },
-          { kind: 'word', value: '+' },
-          { kind: 'separator', value: ' ' },
-          { kind: 'word', value: '2' },
-        ],
-      },
-    ])
-  })
-})
-
-describe('toCss', () => {
-  it('should pretty print calculations', () => {
-    expect(toCss(parse('calc((1 + 2) * 3)'))).toBe('calc((1 + 2) * 3)')
-  })
-
-  it('should pretty print nested function calls', () => {
-    expect(toCss(parse('theme(foo, theme(bar))'))).toBe('theme(foo, theme(bar))')
-  })
-
-  it('should pretty print media query params with functions', () => {
-    expect(toCss(parse('(min-width: 600px) and (max-width:theme(colors.red.500))'))).toBe(
-      '(min-width: 600px) and (max-width:theme(colors.red.500))',
-    )
-  })
-
-  it('preserves multiple spaces', () => {
-    expect(toCss(parse('foo(   bar  )'))).toBe('foo(   bar  )')
-  })
-})
-
-describe('walk', () => {
-  it('can be used to replace a function call', () => {
-    const ast = parse('(min-width: 600px) and (max-width: theme(lg))')
-
-    walk(ast, (node) => {
-      if (node.kind === 'function' && node.value === 'theme') {
-        return WalkAction.Replace({ kind: 'word', value: '64rem' } as const)
-      }
-    })
-
-    expect(toCss(ast)).toBe('(min-width: 600px) and (max-width: 64rem)')
-  })
-})
diff --git a/packages/tailwindcss/src/value-parser.ts b/packages/tailwindcss/src/value-parser.ts
deleted file mode 100644
index c9f41f809..000000000
--- a/packages/tailwindcss/src/value-parser.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-export type ValueWordNode = {
-  kind: 'word'
-  value: string
-}
-
-export type ValueFunctionNode = {
-  kind: 'function'
-  value: string
-  nodes: ValueAstNode[]
-}
-
-export type ValueSeparatorNode = {
-  kind: 'separator'
-  value: string
-}
-
-export type ValueAstNode = ValueWordNode | ValueFunctionNode | ValueSeparatorNode
-
-export function word(value: string): ValueWordNode {
-  return {
-    kind: 'word',
-    value,
-  }
-}
-
-function fun(value: string, nodes: ValueAstNode[]): ValueFunctionNode {
-  return {
-    kind: 'function',
-    value: value,
-    nodes,
-  }
-}
-
-function separator(value: string): ValueSeparatorNode {
-  return {
-    kind: 'separator',
-    value,
-  }
-}
-
-export function toCss(ast: ValueAstNode[]) {
-  let css = ''
-  for (const node of ast) {
-    switch (node.kind) {
-      case 'word':
-      case 'separator': {
-        css += node.value
-        break
-      }
-      case 'function': {
-        css += node.value + '(' + toCss(node.nodes) + ')'
-      }
-    }
-  }
-  return css
-}
-
-const BACKSLASH = 0x5c
-const CLOSE_PAREN = 0x29
-const COLON = 0x3a
-const COMMA = 0x2c
-const DOUBLE_QUOTE = 0x22
-const EQUALS = 0x3d
-const GREATER_THAN = 0x3e
-const LESS_THAN = 0x3c
-const NEWLINE = 0x0a
-const OPEN_PAREN = 0x28
-const SINGLE_QUOTE = 0x27
-const SLASH = 0x2f
-const SPACE = 0x20
-const TAB = 0x09
-
-export function parse(input: string) {
-  input = input.replaceAll('\r\n', '\n')
-
-  let ast: ValueAstNode[] = []
-
-  let stack: (ValueFunctionNode | null)[] = []
-
-  let parent = null as ValueFunctionNode | null
-
-  let buffer = ''
-
-  let peekChar
-
-  for (let i = 0; i < input.length; i++) {
-    let currentChar = input.charCodeAt(i)
-
-    switch (currentChar) {
-      // Current character is a `\` therefore the next character is escaped,
-      // consume it together with the next character and continue.
-      case BACKSLASH: {
-        buffer += input[i] + input[i + 1]
-        i++
-        break
-      }
-
-      // Typically for math operators, they have to have spaces around them. But
-      // there are situations in `theme(colors.red.500/10)` where we use `/`
-      // without spaces. Let's make sure this is a separate word as well.
-      case SLASH: {
-        // 1. Handle everything before the separator as a word
-        // Handle everything before the closing paren as a word
-        if (buffer.length > 0) {
-          let node = word(buffer)
-          if (parent) {
-            parent.nodes.push(node)
-          } else {
-            ast.push(node)
-          }
-          buffer = ''
-        }
-
-        // 2. Track the `/` as a word on its own
-        let node = word(input[i])
-        if (parent) {
-          parent.nodes.push(node)
-        } else {
-          ast.push(node)
-        }
-
-        break
-      }
-
-      // Space and commas are bundled into separators
-      //
-      // E.g.:
-      //
-      // ```css
-      // foo(bar, baz)
-      //        ^^
-      // ```
-      case COLON:
-      case COMMA:
-      case EQUALS:
-      case GREATER_THAN:
-      case LESS_THAN:
-      case NEWLINE:
-      case SPACE:
-      case TAB: {
-        // 1. Handle everything before the separator as a word
-        // Handle everything before the closing paren as a word
-        if (buffer.length > 0) {
-          let node = word(buffer)
-          if (parent) {
-            parent.nodes.push(node)
-          } else {
-            ast.push(node)
-          }
-          buffer = ''
-        }
-
-        // 2. Look ahead and find the end of the separator
-        let start = i
-        let end = i + 1
-        for (; end < input.length; end++) {
-          peekChar = input.charCodeAt(end)
-          if (
-            peekChar !== COLON &&
-            peekChar !== COMMA &&
-            peekChar !== EQUALS &&
-            peekChar !== GREATER_THAN &&
-            peekChar !== LESS_THAN &&
-            peekChar !== NEWLINE &&
-            peekChar !== SPACE &&
-            peekChar !== TAB
-          ) {
-            break
-          }
-        }
-        i = end - 1
-
-        let node = separator(input.slice(start, end))
-        if (parent) {
-          parent.nodes.push(node)
-        } else {
-          ast.push(node)
-        }
-
-        break
-      }
-
-      // Start of a string.
-      case SINGLE_QUOTE:
-      case DOUBLE_QUOTE: {
-        let start = i
-
-        // We need to ensure that the closing quote is the same as the opening
-        // quote.
-        //
-        // E.g.:
-        //
-        // ```css
-        // "This is a string with a 'quote' in it"
-        //                          ^     ^         -> These are not the end of the string.
-        // ```
-        for (let j = i + 1; j < input.length; j++) {
-          peekChar = input.charCodeAt(j)
-          // Current character is a `\` therefore the next character is escaped.
-          if (peekChar === BACKSLASH) {
-            j += 1
-          }
-
-          // End of the string.
-          else if (peekChar === currentChar) {
-            i = j
-            break
-          }
-        }
-
-        // Adjust `buffer` to include the string.
-        buffer += input.slice(start, i + 1)
-        break
-      }
-
-      // Start of a function call.
-      //
-      // E.g.:
-      //
-      // ```css
-      // foo(bar, baz)
-      //    ^
-      // ```
-      case OPEN_PAREN: {
-        let node = fun(buffer, [])
-        buffer = ''
-
-        if (parent) {
-          parent.nodes.push(node)
-        } else {
-          ast.push(node)
-        }
-        stack.push(node)
-        parent = node
-
-        break
-      }
-
-      // End of a function call.
-      //
-      // E.g.:
-      //
-      // ```css
-      // foo(bar, baz)
-      //             ^
-      // ```
-      case CLOSE_PAREN: {
-        let tail = stack.pop()
-
-        // Handle everything before the closing paren a word
-        if (buffer.length > 0) {
-          let node = word(buffer)
-          tail?.nodes.push(node)
-          buffer = ''
-        }
-
-        if (stack.length > 0) {
-          parent = stack[stack.length - 1]
-        } else {
-          parent = null
-        }
-
-        break
-      }
-
-      // Everything else will be collected in the buffer
-      default: {
-        buffer += String.fromCharCode(currentChar)
-      }
-    }
-  }
-
-  // Collect the remainder as a word
-  if (buffer.length > 0) {
-    ast.push(word(buffer))
-  }
-
-  return ast
-}
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index 37f9ebbea..3df052b5a 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -1,148 +1,83 @@
 import { expect, test } from 'vitest'
-import createPlugin from './plugin'
-import { run } from './test-utils/run'
-import { Compounds, compoundsForSelectors } from './variants'
+import { compileCss, run } from './test-utils/run'
 
 const css = String.raw
 
-test('*', async () => {
-  expect(await run(['*:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(.\\*\\:flex > *) {
+test('force', () => {
+  expect(run(['force:flex'])).toMatchInlineSnapshot(`
+    ".force\\:flex {
       display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['*/foo:flex'])).toEqual('')
 })
 
-test('**', async () => {
-  expect(await run(['**:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(.\\*\\*\\:flex *) {
-      display: flex;
-    }
-    "
-  `)
-  expect(await run(['**/foo:flex'])).toEqual('')
+test('*', () => {
+  expect(run(['*:flex'])).toMatchInlineSnapshot(`
+  ".\\*\\:flex > * {
+    display: flex;
+  }"
+`)
 })
 
-test('first-letter', async () => {
-  expect(await run(['first-letter:flex'])).toMatchInlineSnapshot(`
-    "
-    .first-letter\\:flex:first-letter {
+test('first-letter', () => {
+  expect(run(['first-letter:flex'])).toMatchInlineSnapshot(`
+    ".first-letter\\:flex:first-letter {
       display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['first-letter/foo:flex'])).toEqual('')
 })
 
-test('first-line', async () => {
-  expect(await run(['first-line:flex'])).toMatchInlineSnapshot(`
-    "
-    .first-line\\:flex:first-line {
+test('first-line', () => {
+  expect(run(['first-line:flex'])).toMatchInlineSnapshot(`
+    ".first-line\\:flex:first-line {
       display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['first-line/foo:flex'])).toEqual('')
 })
 
-test('marker', async () => {
-  expect(await run(['marker:flex'])).toMatchInlineSnapshot(`
-    "
-    .marker\\:flex ::marker {
+test('marker', () => {
+  expect(run(['marker:flex'])).toMatchInlineSnapshot(`
+    ".marker\\:flex ::marker, .marker\\:flex::marker {
       display: flex;
-    }
-
-    .marker\\:flex::marker {
-      display: flex;
-    }
-
-    .marker\\:flex ::-webkit-details-marker {
-      display: flex;
-    }
-
-    .marker\\:flex::-webkit-details-marker {
-      display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['marker/foo:flex'])).toEqual('')
 })
 
-test('selection', async () => {
-  expect(await run(['selection:flex'])).toMatchInlineSnapshot(`
-    "
-    .selection\\:flex ::selection {
+test('selection', () => {
+  expect(run(['selection:flex'])).toMatchInlineSnapshot(`
+    ".selection\\:flex ::selection, .selection\\:flex::selection {
       display: flex;
-    }
-
-    .selection\\:flex::selection {
-      display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['selection/foo:flex'])).toEqual('')
 })
 
-test('file', async () => {
-  expect(await run(['file:flex'])).toMatchInlineSnapshot(`
-    "
-    .file\\:flex::file-selector-button {
+test('file', () => {
+  expect(run(['file:flex'])).toMatchInlineSnapshot(`
+    ".file\\:flex::file-selector-button {
       display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['file/foo:flex'])).toEqual('')
 })
 
-test('placeholder', async () => {
-  expect(await run(['placeholder:flex'])).toMatchInlineSnapshot(`
-    "
-    .placeholder\\:flex::placeholder {
+test('placeholder', () => {
+  expect(run(['placeholder:flex'])).toMatchInlineSnapshot(`
+    ".placeholder\\:flex::placeholder {
       display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['placeholder/foo:flex'])).toEqual('')
 })
 
-test('backdrop', async () => {
-  expect(await run(['backdrop:flex'])).toMatchInlineSnapshot(`
-    "
-    .backdrop\\:flex::backdrop {
+test('backdrop', () => {
+  expect(run(['backdrop:flex'])).toMatchInlineSnapshot(`
+    ".backdrop\\:flex::backdrop {
       display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['backdrop/foo:flex'])).toEqual('')
 })
 
-test('details-content', async () => {
-  expect(await run(['details-content:flex'])).toMatchInlineSnapshot(`
-    "
-    .details-content\\:flex::details-content {
-      display: flex;
-    }
-    "
-  `)
-  expect(await run(['details-content/foo:flex'])).toEqual('')
-})
-
-test('before', async () => {
-  expect(await run(['before:flex'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
-    }
-
-    .before\\:flex:before {
+test('before', () => {
+  expect(run(['before:flex'])).toMatchInlineSnapshot(`
+    ".before\\:flex:before {
       content: var(--tw-content);
       display: flex;
     }
@@ -151,24 +86,13 @@ test('before', async () => {
       syntax: "*";
       inherits: false;
       initial-value: "";
-    }
-    "
+    }"
   `)
-  expect(await run(['before/foo:flex'])).toEqual('')
 })
 
-test('after', async () => {
-  expect(await run(['after:flex'])).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
-    }
-
-    .after\\:flex:after {
+test('after', () => {
+  expect(run(['after:flex'])).toMatchInlineSnapshot(`
+    ".after\\:flex:after {
       content: var(--tw-content);
       display: flex;
     }
@@ -177,474 +101,545 @@ test('after', async () => {
       syntax: "*";
       inherits: false;
       initial-value: "";
-    }
-    "
+    }"
   `)
-  expect(await run(['after/foo:flex'])).toEqual('')
 })
 
-test('first', async () => {
-  expect(await run(['first:flex', 'group-first:flex', 'peer-first:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):first-child .group-first\\:flex), :is(:where(.peer):first-child ~ .peer-first\\:flex), .first\\:flex:first-child {
+test('first', () => {
+  expect(run(['first:flex', 'group-first:flex', 'peer-first:flex'])).toMatchInlineSnapshot(`
+    ".group-first\\:flex:is(:where(.group):first-child *) {
       display: flex;
     }
-    "
-  `)
-  expect(await run(['first/foo:flex'])).toEqual('')
-})
 
-test('last', async () => {
-  expect(await run(['last:flex', 'group-last:flex', 'peer-last:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):last-child .group-last\\:flex), :is(:where(.peer):last-child ~ .peer-last\\:flex), .last\\:flex:last-child {
+    .peer-first\\:flex:is(:where(.peer):first-child ~ *) {
       display: flex;
     }
-    "
+
+    .first\\:flex:first-child {
+      display: flex;
+    }"
   `)
-  expect(await run(['last/foo:flex'])).toEqual('')
 })
 
-test('only', async () => {
-  expect(await run(['only:flex', 'group-only:flex', 'peer-only:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):only-child .group-only\\:flex), :is(:where(.peer):only-child ~ .peer-only\\:flex), .only\\:flex:only-child {
+test('last', () => {
+  expect(run(['last:flex', 'group-last:flex', 'peer-last:flex'])).toMatchInlineSnapshot(`
+    ".group-last\\:flex:is(:where(.group):last-child *) {
       display: flex;
     }
-    "
-  `)
-  expect(await run(['only/foo:flex'])).toEqual('')
-})
 
-test('odd', async () => {
-  expect(await run(['odd:flex', 'group-odd:flex', 'peer-odd:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):nth-child(odd) .group-odd\\:flex), :is(:where(.peer):nth-child(odd) ~ .peer-odd\\:flex), .odd\\:flex:nth-child(odd) {
+    .peer-last\\:flex:is(:where(.peer):last-child ~ *) {
       display: flex;
     }
-    "
+
+    .last\\:flex:last-child {
+      display: flex;
+    }"
   `)
-  expect(await run(['odd/foo:flex'])).toEqual('')
 })
 
-test('even', async () => {
-  expect(await run(['even:flex', 'group-even:flex', 'peer-even:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):nth-child(2n) .group-even\\:flex), :is(:where(.peer):nth-child(2n) ~ .peer-even\\:flex), .even\\:flex:nth-child(2n) {
+test('only', () => {
+  expect(run(['only:flex', 'group-only:flex', 'peer-only:flex'])).toMatchInlineSnapshot(`
+    ".group-only\\:flex:is(:where(.group):only-child *) {
       display: flex;
     }
-    "
+
+    .peer-only\\:flex:is(:where(.peer):only-child ~ *) {
+      display: flex;
+    }
+
+    .only\\:flex:only-child {
+      display: flex;
+    }"
   `)
-  expect(await run(['even/foo:flex'])).toEqual('')
 })
 
-test('first-of-type', async () => {
-  expect(await run(['first-of-type:flex', 'group-first-of-type:flex', 'peer-first-of-type:flex']))
+test('odd', () => {
+  expect(run(['odd:flex', 'group-odd:flex', 'peer-odd:flex'])).toMatchInlineSnapshot(`
+    ".group-odd\\:flex:is(:where(.group):nth-child(odd) *) {
+      display: flex;
+    }
+
+    .peer-odd\\:flex:is(:where(.peer):nth-child(odd) ~ *) {
+      display: flex;
+    }
+
+    .odd\\:flex:nth-child(odd) {
+      display: flex;
+    }"
+  `)
+})
+
+test('even', () => {
+  expect(run(['even:flex', 'group-even:flex', 'peer-even:flex'])).toMatchInlineSnapshot(`
+    ".group-even\\:flex:is(:where(.group):nth-child(2n) *) {
+      display: flex;
+    }
+
+    .peer-even\\:flex:is(:where(.peer):nth-child(2n) ~ *) {
+      display: flex;
+    }
+
+    .even\\:flex:nth-child(2n) {
+      display: flex;
+    }"
+  `)
+})
+
+test('first-of-type', () => {
+  expect(run(['first-of-type:flex', 'group-first-of-type:flex', 'peer-first-of-type:flex']))
     .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):first-of-type .group-first-of-type\\:flex), :is(:where(.peer):first-of-type ~ .peer-first-of-type\\:flex), .first-of-type\\:flex:first-of-type {
+      ".group-first-of-type\\:flex:is(:where(.group):first-of-type *) {
         display: flex;
       }
-      "
-    `)
-  expect(await run(['first-of-type/foo:flex'])).toEqual('')
-})
 
-test('last-of-type', async () => {
-  expect(await run(['last-of-type:flex', 'group-last-of-type:flex', 'peer-last-of-type:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):last-of-type .group-last-of-type\\:flex), :is(:where(.peer):last-of-type ~ .peer-last-of-type\\:flex), .last-of-type\\:flex:last-of-type {
+      .peer-first-of-type\\:flex:is(:where(.peer):first-of-type ~ *) {
         display: flex;
       }
-      "
+
+      .first-of-type\\:flex:first-of-type {
+        display: flex;
+      }"
     `)
-  expect(await run(['last-of-type/foo:flex'])).toEqual('')
 })
 
-test('only-of-type', async () => {
-  expect(await run(['only-of-type:flex', 'group-only-of-type:flex', 'peer-only-of-type:flex']))
+test('last-of-type', () => {
+  expect(run(['last-of-type:flex', 'group-last-of-type:flex', 'peer-last-of-type:flex']))
     .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):only-of-type .group-only-of-type\\:flex), :is(:where(.peer):only-of-type ~ .peer-only-of-type\\:flex), .only-of-type\\:flex:only-of-type {
+      ".group-last-of-type\\:flex:is(:where(.group):last-of-type *) {
         display: flex;
       }
-      "
-    `)
-  expect(await run(['only-of-type/foo:flex'])).toEqual('')
-})
 
-test('visited', async () => {
-  expect(await run(['visited:flex', 'group-visited:flex', 'peer-visited:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):visited .group-visited\\:flex), :is(:where(.peer):visited ~ .peer-visited\\:flex), .visited\\:flex:visited {
+      .peer-last-of-type\\:flex:is(:where(.peer):last-of-type ~ *) {
         display: flex;
       }
-      "
+
+      .last-of-type\\:flex:last-of-type {
+        display: flex;
+      }"
     `)
-  expect(await run(['visited/foo:flex'])).toEqual('')
 })
 
-test('target', async () => {
-  expect(await run(['target:flex', 'group-target:flex', 'peer-target:flex']))
+test('only-of-type', () => {
+  expect(run(['only-of-type:flex', 'group-only-of-type:flex', 'peer-only-of-type:flex']))
     .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):target .group-target\\:flex), :is(:where(.peer):target ~ .peer-target\\:flex), .target\\:flex:target {
+      ".group-only-of-type\\:flex:is(:where(.group):only-of-type *) {
         display: flex;
       }
-      "
-    `)
-  expect(await run(['target/foo:flex'])).toEqual('')
-})
 
-test('open', async () => {
-  expect(await run(['open:flex', 'group-open:flex', 'peer-open:flex', 'not-open:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      .not-open\\:flex:not(:is([open], :popover-open, :open)), :is(:where(.group):is([open], :popover-open, :open) .group-open\\:flex), :is(:where(.peer):is([open], :popover-open, :open) ~ .peer-open\\:flex), .open\\:flex:is([open], :popover-open, :open) {
+      .peer-only-of-type\\:flex:is(:where(.peer):only-of-type ~ *) {
         display: flex;
       }
-      "
+
+      .only-of-type\\:flex:only-of-type {
+        display: flex;
+      }"
     `)
-  expect(await run(['open/foo:flex'])).toEqual('')
 })
 
-test('default', async () => {
-  expect(await run(['default:flex', 'group-default:flex', 'peer-default:flex']))
+test('visited', () => {
+  expect(run(['visited:flex', 'group-visited:flex', 'peer-visited:flex'])).toMatchInlineSnapshot(`
+    ".group-visited\\:flex:is(:where(.group):visited *) {
+      display: flex;
+    }
+
+    .peer-visited\\:flex:is(:where(.peer):visited ~ *) {
+      display: flex;
+    }
+
+    .visited\\:flex:visited {
+      display: flex;
+    }"
+  `)
+})
+
+test('target', () => {
+  expect(run(['target:flex', 'group-target:flex', 'peer-target:flex'])).toMatchInlineSnapshot(`
+    ".group-target\\:flex:is(:where(.group):target *) {
+      display: flex;
+    }
+
+    .peer-target\\:flex:is(:where(.peer):target ~ *) {
+      display: flex;
+    }
+
+    .target\\:flex:target {
+      display: flex;
+    }"
+  `)
+})
+
+test('open', () => {
+  expect(run(['open:flex', 'group-open:flex', 'peer-open:flex'])).toMatchInlineSnapshot(`
+    ".group-open\\:flex:is(:where(.group)[open] *) {
+      display: flex;
+    }
+
+    .peer-open\\:flex:is(:where(.peer)[open] ~ *) {
+      display: flex;
+    }
+
+    .open\\:flex[open] {
+      display: flex;
+    }"
+  `)
+})
+
+test('default', () => {
+  expect(run(['default:flex', 'group-default:flex', 'peer-default:flex'])).toMatchInlineSnapshot(`
+    ".group-default\\:flex:is(:where(.group):default *) {
+      display: flex;
+    }
+
+    .peer-default\\:flex:is(:where(.peer):default ~ *) {
+      display: flex;
+    }
+
+    .default\\:flex:default {
+      display: flex;
+    }"
+  `)
+})
+
+test('checked', () => {
+  expect(run(['checked:flex', 'group-checked:flex', 'peer-checked:flex'])).toMatchInlineSnapshot(`
+    ".group-checked\\:flex:is(:where(.group):checked *) {
+      display: flex;
+    }
+
+    .peer-checked\\:flex:is(:where(.peer):checked ~ *) {
+      display: flex;
+    }
+
+    .checked\\:flex:checked {
+      display: flex;
+    }"
+  `)
+})
+
+test('indeterminate', () => {
+  expect(run(['indeterminate:flex', 'group-indeterminate:flex', 'peer-indeterminate:flex']))
     .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):default .group-default\\:flex), :is(:where(.peer):default ~ .peer-default\\:flex), .default\\:flex:default {
+      ".group-indeterminate\\:flex:is(:where(.group):indeterminate *) {
         display: flex;
       }
-      "
-    `)
-  expect(await run(['default/foo:flex'])).toEqual('')
-})
 
-test('checked', async () => {
-  expect(await run(['checked:flex', 'group-checked:flex', 'peer-checked:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):checked .group-checked\\:flex), :is(:where(.peer):checked ~ .peer-checked\\:flex), .checked\\:flex:checked {
+      .peer-indeterminate\\:flex:is(:where(.peer):indeterminate ~ *) {
         display: flex;
       }
-      "
-    `)
-  expect(await run(['checked/foo:flex'])).toEqual('')
-})
 
-test('indeterminate', async () => {
-  expect(await run(['indeterminate:flex', 'group-indeterminate:flex', 'peer-indeterminate:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):indeterminate .group-indeterminate\\:flex), :is(:where(.peer):indeterminate ~ .peer-indeterminate\\:flex), .indeterminate\\:flex:indeterminate {
+      .indeterminate\\:flex:indeterminate {
         display: flex;
-      }
-      "
+      }"
     `)
-  expect(await run(['indeterminate/foo:flex'])).toEqual('')
 })
 
-test('placeholder-shown', async () => {
+test('placeholder-shown', () => {
   expect(
-    await run([
-      'placeholder-shown:flex',
-      'group-placeholder-shown:flex',
-      'peer-placeholder-shown:flex',
-    ]),
+    run(['placeholder-shown:flex', 'group-placeholder-shown:flex', 'peer-placeholder-shown:flex']),
   ).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):placeholder-shown .group-placeholder-shown\\:flex), :is(:where(.peer):placeholder-shown ~ .peer-placeholder-shown\\:flex), .placeholder-shown\\:flex:placeholder-shown {
+    ".group-placeholder-shown\\:flex:is(:where(.group):placeholder-shown *) {
       display: flex;
     }
-    "
+
+    .peer-placeholder-shown\\:flex:is(:where(.peer):placeholder-shown ~ *) {
+      display: flex;
+    }
+
+    .placeholder-shown\\:flex:placeholder-shown {
+      display: flex;
+    }"
   `)
-  expect(await run(['placeholder-shown/foo:flex'])).toEqual('')
 })
 
-test('autofill', async () => {
-  expect(await run(['autofill:flex', 'group-autofill:flex', 'peer-autofill:flex']))
+test('autofill', () => {
+  expect(run(['autofill:flex', 'group-autofill:flex', 'peer-autofill:flex']))
     .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):autofill .group-autofill\\:flex), :is(:where(.peer):autofill ~ .peer-autofill\\:flex) {
+      ".group-autofill\\:flex:is(:where(.group):autofill *) {
+        display: flex;
+      }
+
+      .peer-autofill\\:flex:is(:where(.peer):autofill ~ *) {
         display: flex;
       }
 
       .autofill\\:flex:autofill {
         display: flex;
-      }
-      "
+      }"
     `)
-  expect(await run(['autofill/foo:flex'])).toEqual('')
 })
 
-test('optional', async () => {
-  expect(await run(['optional:flex', 'group-optional:flex', 'peer-optional:flex']))
+test('optional', () => {
+  expect(run(['optional:flex', 'group-optional:flex', 'peer-optional:flex']))
     .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):optional .group-optional\\:flex), :is(:where(.peer):optional ~ .peer-optional\\:flex), .optional\\:flex:optional {
+      ".group-optional\\:flex:is(:where(.group):optional *) {
         display: flex;
       }
-      "
-    `)
-  expect(await run(['optional/foo:flex'])).toEqual('')
-})
 
-test('required', async () => {
-  expect(await run(['required:flex', 'group-required:flex', 'peer-required:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):required .group-required\\:flex), :is(:where(.peer):required ~ .peer-required\\:flex), .required\\:flex:required {
+      .peer-optional\\:flex:is(:where(.peer):optional ~ *) {
         display: flex;
       }
-      "
+
+      .optional\\:flex:optional {
+        display: flex;
+      }"
     `)
-  expect(await run(['required/foo:flex'])).toEqual('')
 })
 
-test('valid', async () => {
-  expect(await run(['valid:flex', 'group-valid:flex', 'peer-valid:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):valid .group-valid\\:flex), :is(:where(.peer):valid ~ .peer-valid\\:flex), .valid\\:flex:valid {
+test('required', () => {
+  expect(run(['required:flex', 'group-required:flex', 'peer-required:flex']))
+    .toMatchInlineSnapshot(`
+      ".group-required\\:flex:is(:where(.group):required *) {
+        display: flex;
+      }
+
+      .peer-required\\:flex:is(:where(.peer):required ~ *) {
+        display: flex;
+      }
+
+      .required\\:flex:required {
+        display: flex;
+      }"
+    `)
+})
+
+test('valid', () => {
+  expect(run(['valid:flex', 'group-valid:flex', 'peer-valid:flex'])).toMatchInlineSnapshot(`
+    ".group-valid\\:flex:is(:where(.group):valid *) {
       display: flex;
     }
-    "
-  `)
-  expect(await run(['valid/foo:flex'])).toEqual('')
-})
 
-test('invalid', async () => {
-  expect(await run(['invalid:flex', 'group-invalid:flex', 'peer-invalid:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):invalid .group-invalid\\:flex), :is(:where(.peer):invalid ~ .peer-invalid\\:flex), .invalid\\:flex:invalid {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['invalid/foo:flex'])).toEqual('')
-})
-
-test('user-valid', async () => {
-  expect(await run(['user-valid:flex', 'group-user-valid:flex', 'peer-user-valid:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):user-valid .group-user-valid\\:flex), :is(:where(.peer):user-valid ~ .peer-user-valid\\:flex) {
-        display: flex;
-      }
-
-      .user-valid\\:flex:user-valid {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['user-valid/foo:flex'])).toEqual('')
-})
-
-test('user-invalid', async () => {
-  expect(await run(['user-invalid:flex', 'group-user-invalid:flex', 'peer-user-invalid:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):user-invalid .group-user-invalid\\:flex), :is(:where(.peer):user-invalid ~ .peer-user-invalid\\:flex) {
-        display: flex;
-      }
-
-      .user-invalid\\:flex:user-invalid {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['user-invalid/foo:flex'])).toEqual('')
-})
-
-test('in-range', async () => {
-  expect(await run(['in-range:flex', 'group-in-range:flex', 'peer-in-range:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):in-range .group-in-range\\:flex), :is(:where(.peer):in-range ~ .peer-in-range\\:flex), .in-range\\:flex:in-range {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['in-range/foo:flex'])).toEqual('')
-})
-
-test('out-of-range', async () => {
-  expect(await run(['out-of-range:flex', 'group-out-of-range:flex', 'peer-out-of-range:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):out-of-range .group-out-of-range\\:flex), :is(:where(.peer):out-of-range ~ .peer-out-of-range\\:flex), .out-of-range\\:flex:out-of-range {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['out-of-range/foo:flex'])).toEqual('')
-})
-
-test('read-only', async () => {
-  expect(await run(['read-only:flex', 'group-read-only:flex', 'peer-read-only:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):read-only .group-read-only\\:flex), :is(:where(.peer):read-only ~ .peer-read-only\\:flex), .read-only\\:flex:read-only {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['read-only/foo:flex'])).toEqual('')
-})
-
-test('empty', async () => {
-  expect(await run(['empty:flex', 'group-empty:flex', 'peer-empty:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):empty .group-empty\\:flex), :is(:where(.peer):empty ~ .peer-empty\\:flex), .empty\\:flex:empty {
+    .peer-valid\\:flex:is(:where(.peer):valid ~ *) {
       display: flex;
     }
-    "
+
+    .valid\\:flex:valid {
+      display: flex;
+    }"
   `)
-  expect(await run(['empty/foo:flex'])).toEqual('')
 })
 
-test('focus-within', async () => {
-  expect(await run(['focus-within:flex', 'group-focus-within:flex', 'peer-focus-within:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):focus-within .group-focus-within\\:flex), :is(:where(.peer):focus-within ~ .peer-focus-within\\:flex), .focus-within\\:flex:focus-within {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['focus-within/foo:flex'])).toEqual('')
-})
-
-test('hover', async () => {
-  expect(await run(['hover:flex', 'group-hover:flex', 'peer-hover:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (hover: hover) {
-      :is(:where(.group):hover .group-hover\\:flex), :is(:where(.peer):hover ~ .peer-hover\\:flex), .hover\\:flex:hover {
-        display: flex;
-      }
-    }
-    "
-  `)
-  expect(await run(['hover/foo:flex'])).toEqual('')
-})
-
-test('focus', async () => {
-  expect(await run(['focus:flex', 'group-focus:flex', 'peer-focus:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):focus .group-focus\\:flex), :is(:where(.peer):focus ~ .peer-focus\\:flex), .focus\\:flex:focus {
+test('invalid', () => {
+  expect(run(['invalid:flex', 'group-invalid:flex', 'peer-invalid:flex'])).toMatchInlineSnapshot(`
+    ".group-invalid\\:flex:is(:where(.group):invalid *) {
       display: flex;
     }
-    "
-  `)
-  expect(await run(['focus/foo:flex'])).toEqual('')
-})
 
-test('group-hover group-focus sorting', async () => {
-  expect(await run(['group-hover:flex', 'group-focus:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (hover: hover) {
-      :is(:where(.group):hover .group-hover\\:flex) {
-        display: flex;
-      }
-    }
-
-    :is(:where(.group):focus .group-focus\\:flex) {
+    .peer-invalid\\:flex:is(:where(.peer):invalid ~ *) {
       display: flex;
     }
-    "
+
+    .invalid\\:flex:invalid {
+      display: flex;
+    }"
   `)
-  expect(await run(['group-focus:flex', 'group-hover:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (hover: hover) {
-      :is(:where(.group):hover .group-hover\\:flex) {
+})
+
+test('in-range', () => {
+  expect(run(['in-range:flex', 'group-in-range:flex', 'peer-in-range:flex']))
+    .toMatchInlineSnapshot(`
+      ".group-in-range\\:flex:is(:where(.group):in-range *) {
         display: flex;
       }
-    }
 
-    :is(:where(.group):focus .group-focus\\:flex) {
+      .peer-in-range\\:flex:is(:where(.peer):in-range ~ *) {
+        display: flex;
+      }
+
+      .in-range\\:flex:in-range {
+        display: flex;
+      }"
+    `)
+})
+
+test('out-of-range', () => {
+  expect(run(['out-of-range:flex', 'group-out-of-range:flex', 'peer-out-of-range:flex']))
+    .toMatchInlineSnapshot(`
+      ".group-out-of-range\\:flex:is(:where(.group):out-of-range *) {
+        display: flex;
+      }
+
+      .peer-out-of-range\\:flex:is(:where(.peer):out-of-range ~ *) {
+        display: flex;
+      }
+
+      .out-of-range\\:flex:out-of-range {
+        display: flex;
+      }"
+    `)
+})
+
+test('read-only', () => {
+  expect(run(['read-only:flex', 'group-read-only:flex', 'peer-read-only:flex']))
+    .toMatchInlineSnapshot(`
+      ".group-read-only\\:flex:is(:where(.group):read-only *) {
+        display: flex;
+      }
+
+      .peer-read-only\\:flex:is(:where(.peer):read-only ~ *) {
+        display: flex;
+      }
+
+      .read-only\\:flex:read-only {
+        display: flex;
+      }"
+    `)
+})
+
+test('empty', () => {
+  expect(run(['empty:flex', 'group-empty:flex', 'peer-empty:flex'])).toMatchInlineSnapshot(`
+    ".group-empty\\:flex:is(:where(.group):empty *) {
       display: flex;
     }
-    "
-  `)
-})
 
-test('stacking group and peer variants does not duplicate the target selector', async () => {
-  let candidate = Array.from(
-    { length: 12 },
-    (_, i) => `${i % 2 === 0 ? 'group' : 'peer'}-data-active/name${i}`,
-  ).join(':')
-
-  let output = await run([`${candidate}:flex`])
-  expect(output).toContain('display: flex')
-  // Repeating `&` in each variant makes the generated selector grow
-  // exponentially. This many variants should still produce a small rule.
-  expect(output.length).toBeLessThan(2_000)
-})
-
-test('focus-visible', async () => {
-  expect(await run(['focus-visible:flex', 'group-focus-visible:flex', 'peer-focus-visible:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):focus-visible .group-focus-visible\\:flex), :is(:where(.peer):focus-visible ~ .peer-focus-visible\\:flex), .focus-visible\\:flex:focus-visible {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['focus-visible/foo:flex'])).toEqual('')
-})
-
-test('active', async () => {
-  expect(await run(['active:flex', 'group-active:flex', 'peer-active:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):active .group-active\\:flex), :is(:where(.peer):active ~ .peer-active\\:flex), .active\\:flex:active {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['active/foo:flex'])).toEqual('')
-})
-
-test('enabled', async () => {
-  expect(await run(['enabled:flex', 'group-enabled:flex', 'peer-enabled:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):enabled .group-enabled\\:flex), :is(:where(.peer):enabled ~ .peer-enabled\\:flex), .enabled\\:flex:enabled {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['enabled/foo:flex'])).toEqual('')
-})
-
-test('disabled', async () => {
-  expect(await run(['disabled:flex', 'group-disabled:flex', 'peer-disabled:flex']))
-    .toMatchInlineSnapshot(`
-      "
-      :is(:where(.group):disabled .group-disabled\\:flex), :is(:where(.peer):disabled ~ .peer-disabled\\:flex), .disabled\\:flex:disabled {
-        display: flex;
-      }
-      "
-    `)
-  expect(await run(['disabled/foo:flex'])).toEqual('')
-})
-
-test('inert', async () => {
-  expect(await run(['inert:flex', 'group-inert:flex', 'peer-inert:flex'])).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):is([inert], [inert] *) .group-inert\\:flex), :is(:where(.peer):is([inert], [inert] *) ~ .peer-inert\\:flex), .inert\\:flex:is([inert], [inert] *) {
+    .peer-empty\\:flex:is(:where(.peer):empty ~ *) {
       display: flex;
     }
-    "
+
+    .empty\\:flex:empty {
+      display: flex;
+    }"
   `)
-  expect(await run(['inert/foo:flex'])).toEqual('')
 })
 
-test('group-[...]', async () => {
+test('focus-within', () => {
+  expect(run(['focus-within:flex', 'group-focus-within:flex', 'peer-focus-within:flex']))
+    .toMatchInlineSnapshot(`
+      ".group-focus-within\\:flex:is(:where(.group):focus-within *) {
+        display: flex;
+      }
+
+      .peer-focus-within\\:flex:is(:where(.peer):focus-within ~ *) {
+        display: flex;
+      }
+
+      .focus-within\\:flex:focus-within {
+        display: flex;
+      }"
+    `)
+})
+
+test('hover', () => {
+  expect(run(['hover:flex', 'group-hover:flex', 'peer-hover:flex'])).toMatchInlineSnapshot(`
+    ".group-hover\\:flex:is(:where(.group):hover *) {
+      display: flex;
+    }
+
+    .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
+      display: flex;
+    }
+
+    .hover\\:flex:hover {
+      display: flex;
+    }"
+  `)
+})
+
+test('focus', () => {
+  expect(run(['focus:flex', 'group-focus:flex', 'peer-focus:flex'])).toMatchInlineSnapshot(`
+    ".group-focus\\:flex:is(:where(.group):focus *) {
+      display: flex;
+    }
+
+    .peer-focus\\:flex:is(:where(.peer):focus ~ *) {
+      display: flex;
+    }
+
+    .focus\\:flex:focus {
+      display: flex;
+    }"
+  `)
+})
+
+test('group-hover group-focus', () => {
+  expect(run(['group-hover:flex', 'group-focus:flex'])).toMatchInlineSnapshot(`
+    ".group-hover\\:flex:is(:where(.group):hover *) {
+      display: flex;
+    }
+
+    .group-focus\\:flex:is(:where(.group):focus *) {
+      display: flex;
+    }"
+  `)
+  expect(run(['group-focus:flex', 'group-hover:flex'])).toMatchInlineSnapshot(`
+    ".group-hover\\:flex:is(:where(.group):hover *) {
+      display: flex;
+    }
+
+    .group-focus\\:flex:is(:where(.group):focus *) {
+      display: flex;
+    }"
+  `)
+})
+
+test('focus-visible', () => {
+  expect(run(['focus-visible:flex', 'group-focus-visible:flex', 'peer-focus-visible:flex']))
+    .toMatchInlineSnapshot(`
+      ".group-focus-visible\\:flex:is(:where(.group):focus-visible *) {
+        display: flex;
+      }
+
+      .peer-focus-visible\\:flex:is(:where(.peer):focus-visible ~ *) {
+        display: flex;
+      }
+
+      .focus-visible\\:flex:focus-visible {
+        display: flex;
+      }"
+    `)
+})
+
+test('active', () => {
+  expect(run(['active:flex', 'group-active:flex', 'peer-active:flex'])).toMatchInlineSnapshot(`
+    ".group-active\\:flex:is(:where(.group):active *) {
+      display: flex;
+    }
+
+    .peer-active\\:flex:is(:where(.peer):active ~ *) {
+      display: flex;
+    }
+
+    .active\\:flex:active {
+      display: flex;
+    }"
+  `)
+})
+
+test('enabled', () => {
+  expect(run(['enabled:flex', 'group-enabled:flex', 'peer-enabled:flex'])).toMatchInlineSnapshot(`
+    ".group-enabled\\:flex:is(:where(.group):enabled *) {
+      display: flex;
+    }
+
+    .peer-enabled\\:flex:is(:where(.peer):enabled ~ *) {
+      display: flex;
+    }
+
+    .enabled\\:flex:enabled {
+      display: flex;
+    }"
+  `)
+})
+
+test('disabled', () => {
+  expect(run(['disabled:flex', 'group-disabled:flex', 'peer-disabled:flex']))
+    .toMatchInlineSnapshot(`
+      ".group-disabled\\:flex:is(:where(.group):disabled *) {
+        display: flex;
+      }
+
+      .peer-disabled\\:flex:is(:where(.peer):disabled ~ *) {
+        display: flex;
+      }
+
+      .disabled\\:flex:disabled {
+        display: flex;
+      }"
+    `)
+})
+
+test('group-[...]', () => {
   expect(
-    await run([
+    run([
       'group-[&_p]:flex',
       'group-[&_p]:hover:flex',
       'hover:group-[&_p]:flex',
@@ -652,101 +647,58 @@ test('group-[...]', async () => {
       'group-[&:hover]:group-[&_p]:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group) p .group-\\[\\&_p\\]\\:flex), :is(:where(.group) p :is(:where(.group):hover .group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex)) {
+    ".group-\\[\\&_p\\]\\:flex:is(:where(.group) p *) {
       display: flex;
     }
 
-    @media (hover: hover) {
-      :is(:where(.group) p .group-\\[\\&_p\\]\\:hover\\:flex):hover, :is(:where(.group) p .hover\\:group-\\[\\&_p\\]\\:flex:hover) {
-        display: flex;
-      }
-
-      @media (hover: hover) {
-        :is(:where(.group) p .hover\\:group-\\[\\&_p\\]\\:hover\\:flex:hover):hover {
-          display: flex;
-        }
-      }
+    .group-\\[\\&\\:hover\\]\\:group-\\[\\&_p\\]\\:flex:is(:where(.group) p *):is(:where(.group):hover *) {
+      display: flex;
     }
-    "
-  `)
 
+    .group-\\[\\&_p\\]\\:hover\\:flex:hover:is(:where(.group) p *) {
+      display: flex;
+    }
+
+    .hover\\:group-\\[\\&_p\\]\\:flex:is(:where(.group) p *):hover {
+      display: flex;
+    }
+
+    .hover\\:group-\\[\\&_p\\]\\:hover\\:flex:hover:is(:where(.group) p *):hover {
+      display: flex;
+    }"
+  `)
+})
+
+test('group-*', () => {
   expect(
-    await run([
-      'group-[]:flex',
-      'group-hover/[]:flex',
-      'group-[@media_foo]:flex',
-      'group-[>img]:flex',
+    run([
+      'group-hover:flex',
+      'group-focus:flex',
+      'group-hover:group-focus:flex',
+      'group-focus:group-hover:flex',
     ]),
-  ).toEqual('')
-})
-
-test('group-*', async () => {
-  expect(
-    await run(
-      [
-        'group-hover:flex',
-        'group-focus:flex',
-        'group-hocus:flex',
-
-        'group-hover:group-focus:flex',
-        'group-focus:group-hover:flex',
-      ],
-      css`
-        @custom-variant hocus {
-          &:hover,
-          &:focus {
-            @slot;
-          }
-        }
-        @tailwind utilities;
-      `,
-    ),
   ).toMatchInlineSnapshot(`
-    "
-    @media (hover: hover) {
-      :is(:where(.group):hover .group-hover\\:flex) {
-        display: flex;
-      }
-    }
-
-    :is(:where(.group):focus .group-focus\\:flex) {
+    ".group-hover\\:flex:is(:where(.group):hover *) {
       display: flex;
     }
 
-    @media (hover: hover) {
-      :is(:where(.group):hover :is(:where(.group):focus .group-focus\\:group-hover\\:flex)), :is(:where(.group):focus :is(:where(.group):hover .group-hover\\:group-focus\\:flex)) {
-        display: flex;
-      }
-    }
-
-    :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
+    .group-focus\\:flex:is(:where(.group):focus *) {
       display: flex;
     }
-    "
+
+    .group-focus\\:group-hover\\:flex:is(:where(.group):hover *):is(:where(.group):focus *) {
+      display: flex;
+    }
+
+    .group-hover\\:group-focus\\:flex:is(:where(.group):focus *):is(:where(.group):hover *) {
+      display: flex;
+    }"
   `)
-
-  expect(
-    await run(
-      ['group-custom-at-rule:flex', 'group-nested-selectors:flex'],
-      css`
-        @custom-variant custom-at-rule (@media foo);
-        @custom-variant nested-selectors {
-          &:hover {
-            &:focus {
-              @slot;
-            }
-          }
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
 })
 
-test('peer-[...]', async () => {
+test('peer-[...]', () => {
   expect(
-    await run([
+    run([
       'peer-[&_p]:flex',
       'peer-[&_p]:hover:flex',
       'hover:peer-[&_p]:flex',
@@ -754,177 +706,114 @@ test('peer-[...]', async () => {
       'peer-[&:hover]:peer-[&_p]:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    :is(:where(.peer) p ~ .peer-\\[\\&_p\\]\\:flex), :is(:where(.peer) p ~ :is(:where(.peer):hover ~ .peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex)) {
+    ".peer-\\[\\&_p\\]\\:flex:is(:where(.peer) p ~ *) {
       display: flex;
     }
 
-    @media (hover: hover) {
-      :is(:where(.peer) p ~ .hover\\:peer-\\[\\&_p\\]\\:flex:hover), :is(:where(.peer) p ~ .peer-\\[\\&_p\\]\\:hover\\:flex):hover, :is(:where(.peer) p ~ .hover\\:peer-\\[\\&_p\\]\\:focus\\:flex:hover):focus {
-        display: flex;
-      }
+    .peer-\\[\\&\\:hover\\]\\:peer-\\[\\&_p\\]\\:flex:is(:where(.peer) p ~ *):is(:where(.peer):hover ~ *) {
+      display: flex;
     }
-    "
-  `)
 
-  expect(
-    await run(['peer-[]:flex', 'peer-hover/[]:flex', 'peer-[@media_foo]:flex', 'peer-[>img]:flex']),
-  ).toEqual('')
+    .hover\\:peer-\\[\\&_p\\]\\:flex:is(:where(.peer) p ~ *):hover {
+      display: flex;
+    }
+
+    .peer-\\[\\&_p\\]\\:hover\\:flex:hover:is(:where(.peer) p ~ *) {
+      display: flex;
+    }
+
+    .hover\\:peer-\\[\\&_p\\]\\:focus\\:flex:focus:is(:where(.peer) p ~ *):hover {
+      display: flex;
+    }"
+  `)
 })
 
-test('peer-*', async () => {
+test('peer-*', () => {
   expect(
-    await run(
-      [
-        'peer-hover:flex',
-        'peer-focus:flex',
-        'peer-hocus:flex',
-        'peer-hover:peer-focus:flex',
-        'peer-focus:peer-hover:flex',
-      ],
-      css`
-        @custom-variant hocus {
-          &:hover,
-          &:focus {
-            @slot;
-          }
-        }
-        @tailwind utilities;
-      `,
-    ),
+    run([
+      'peer-hover:flex',
+      'peer-focus:flex',
+      'peer-hover:peer-focus:flex',
+      'peer-focus:peer-hover:flex',
+    ]),
   ).toMatchInlineSnapshot(`
-    "
-    @media (hover: hover) {
-      :is(:where(.peer):hover ~ .peer-hover\\:flex) {
-        display: flex;
-      }
-    }
-
-    :is(:where(.peer):focus ~ .peer-focus\\:flex) {
+    ".peer-hover\\:flex:is(:where(.peer):hover ~ *) {
       display: flex;
     }
 
-    @media (hover: hover) {
-      :is(:where(.peer):hover ~ :is(:where(.peer):focus ~ .peer-focus\\:peer-hover\\:flex)), :is(:where(.peer):focus ~ :is(:where(.peer):hover ~ .peer-hover\\:peer-focus\\:flex)) {
-        display: flex;
-      }
-    }
-
-    :is(:is(:where(.peer):hover, :where(.peer):focus) ~ .peer-hocus\\:flex) {
+    .peer-focus\\:flex:is(:where(.peer):focus ~ *) {
       display: flex;
     }
-    "
+
+    .peer-focus\\:peer-hover\\:flex:is(:where(.peer):hover ~ *):is(:where(.peer):focus ~ *) {
+      display: flex;
+    }
+
+    .peer-hover\\:peer-focus\\:flex:is(:where(.peer):focus ~ *):is(:where(.peer):hover ~ *) {
+      display: flex;
+    }"
   `)
-
-  expect(
-    await run(
-      ['peer-custom-at-rule:flex', 'peer-nested-selectors:flex'],
-      css`
-        @custom-variant custom-at-rule (@media foo);
-        @custom-variant nested-selectors {
-          &:hover {
-            &:focus {
-              @slot;
-            }
-          }
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
 })
 
-test('ltr', async () => {
-  expect(await run(['ltr:flex'])).toMatchInlineSnapshot(`
-    "
-    .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+test('ltr', () => {
+  expect(run(['ltr:flex'])).toMatchInlineSnapshot(`
+    ".ltr\\:flex:where([dir="ltr"], [dir="ltr"] *) {
       display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['ltr/foo:flex'])).toEqual('')
 })
 
-test('rtl', async () => {
-  expect(await run(['rtl:flex'])).toMatchInlineSnapshot(`
-    "
-    .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+test('rtl', () => {
+  expect(run(['rtl:flex'])).toMatchInlineSnapshot(`
+    ".rtl\\:flex:where([dir="rtl"], [dir="rtl"] *) {
       display: flex;
-    }
-    "
+    }"
   `)
-  expect(await run(['rtl/foo:flex'])).toEqual('')
 })
 
-test('motion-safe', async () => {
-  expect(await run(['motion-safe:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (prefers-reduced-motion: no-preference) {
+test('motion-safe', () => {
+  expect(run(['motion-safe:flex'])).toMatchInlineSnapshot(`
+    "@media (prefers-reduced-motion: no-preference) {
       .motion-safe\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(await run(['motion-safe/foo:flex'])).toEqual('')
 })
 
-test('motion-reduce', async () => {
-  expect(await run(['motion-reduce:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (prefers-reduced-motion: reduce) {
+test('motion-reduce', () => {
+  expect(run(['motion-reduce:flex'])).toMatchInlineSnapshot(`
+    "@media (prefers-reduced-motion: reduce) {
       .motion-reduce\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(await run(['motion-reduce/foo:flex'])).toEqual('')
 })
 
-test('dark', async () => {
-  expect(await run(['dark:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (prefers-color-scheme: dark) {
+test('dark', () => {
+  expect(run(['dark:flex'])).toMatchInlineSnapshot(`
+    "@media (prefers-color-scheme: dark) {
       .dark\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(await run(['dark/foo:flex'])).toEqual('')
 })
 
-test('starting', async () => {
-  expect(await run(['starting:opacity-0'])).toMatchInlineSnapshot(`
-    "
-    @starting-style {
-      .starting\\:opacity-0 {
-        opacity: 0;
-      }
-    }
-    "
-  `)
-  expect(await run(['starting/foo:flex'])).toEqual('')
-})
-
-test('print', async () => {
-  expect(await run(['print:flex'])).toMatchInlineSnapshot(`
-    "
-    @media print {
+test('print', () => {
+  expect(run(['print:flex'])).toMatchInlineSnapshot(`
+    "@media print {
       .print\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(await run(['print/foo:flex'])).toEqual('')
 })
 
-test('default breakpoints', async () => {
+test('default breakpoints', () => {
   expect(
-    await run(
-      ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'],
+    compileCss(
       css`
         @theme {
           /* Breakpoints */
@@ -936,84 +825,76 @@ test('default breakpoints', async () => {
         }
         @tailwind utilities;
       `,
+      ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 640px) {
+    ":root {
+      --breakpoint-sm: 640px;
+      --breakpoint-md: 768px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-xl: 1280px;
+      --breakpoint-2xl: 1536px;
+    }
+
+    @media (width >= 640px) {
       .sm\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 768px) {
+    @media (width >= 768px) {
       .md\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 1024px) {
+    @media (width >= 1024px) {
       .lg\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 1280px) {
+    @media (width >= 1280px) {
       .xl\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 1536px) {
+    @media (width >= 1536px) {
       .\\32 xl\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(
-    await run(
-      ['sm/foo:flex', 'md/foo:flex', 'lg/foo:flex', 'xl/foo:flex', '2xl/foo:flex'],
-      css`
-        @theme reference {
-          /* Breakpoints */
-          --breakpoint-sm: 640px;
-          --breakpoint-md: 768px;
-          --breakpoint-lg: 1024px;
-          --breakpoint-xl: 1280px;
-          --breakpoint-2xl: 1536px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
 })
 
-test('custom breakpoint', async () => {
+test('custom breakpoint', () => {
   expect(
-    await run(
-      ['10xl:flex'],
+    compileCss(
       css`
         @theme {
           --breakpoint-10xl: 5000px;
         }
         @tailwind utilities;
       `,
+      ['10xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 5000px) {
+    ":root {
+      --breakpoint-10xl: 5000px;
+    }
+
+    @media (width >= 5000px) {
       .\\31 0xl\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
 })
 
-test('max-*', async () => {
+test('max-*', () => {
   expect(
-    await run(
-      ['max-lg:flex', 'max-sm:flex', 'max-md:flex'],
+    compileCss(
       css`
         @theme {
           /* Explicitly ordered in a strange way */
@@ -1023,48 +904,38 @@ test('max-*', async () => {
         }
         @tailwind utilities;
       `,
+      ['max-lg:flex', 'max-sm:flex', 'max-md:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @media not all and (min-width: 1024px) {
+    ":root {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+    }
+
+    @media (width < 1024px) {
       .max-lg\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 768px) {
+    @media (width < 768px) {
       .max-md\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 640px) {
+    @media (width < 640px) {
       .max-sm\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(
-    await run(
-      ['max-lg/foo:flex', 'max-sm/foo:flex', 'max-md/foo:flex'],
-      css`
-        @theme reference {
-          /* Explicitly ordered in a strange way */
-          --breakpoint-sm: 640px;
-          --breakpoint-lg: 1024px;
-          --breakpoint-md: 768px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
 })
 
-test('min-*', async () => {
+test('min-*', () => {
   expect(
-    await run(
-      ['min-lg:flex', 'min-sm:flex', 'min-md:flex'],
+    compileCss(
       css`
         @theme {
           /* Explicitly ordered in a strange way */
@@ -1074,48 +945,38 @@ test('min-*', async () => {
         }
         @tailwind utilities;
       `,
+      ['min-lg:flex', 'min-sm:flex', 'min-md:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 640px) {
+    ":root {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+    }
+
+    @media (width >= 640px) {
       .min-sm\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 768px) {
+    @media (width >= 768px) {
       .min-md\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 1024px) {
+    @media (width >= 1024px) {
       .min-lg\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(
-    await run(
-      ['min-lg/foo:flex', 'min-sm/foo:flex', 'min-md/foo:flex'],
-      css`
-        @theme reference {
-          /* Explicitly ordered in a strange way */
-          --breakpoint-sm: 640px;
-          --breakpoint-lg: 1024px;
-          --breakpoint-md: 768px;
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
 })
 
-test('sorting stacked min-* and max-* variants', async () => {
+test('sorting stacked min-* and max-* variants', () => {
   expect(
-    await run(
-      ['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'],
+    compileCss(
       css`
         @theme {
           /* Explicitly ordered in a strange way */
@@ -1127,46 +988,46 @@ test('sorting stacked min-* and max-* variants', async () => {
         }
         @tailwind utilities;
       `,
+      ['min-sm:max-xl:flex', 'min-md:max-xl:flex', 'min-xs:max-xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 280px) {
-      @media not all and (min-width: 640px) {
-        .min-xs\\:max-sm\\:flex {
+    ":root {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+      --breakpoint-xl: 1280px;
+      --breakpoint-xs: 280px;
+    }
+
+    @media (width < 1280px) {
+      @media (width >= 280px) {
+        .min-xs\\:max-xl\\:flex {
           display: flex;
         }
       }
     }
 
-    @media (min-width: 640px) {
-      @media not all and (min-width: 1280px) {
+    @media (width < 1280px) {
+      @media (width >= 640px) {
         .min-sm\\:max-xl\\:flex {
           display: flex;
         }
       }
+    }
 
-      @media not all and (min-width: 1024px) {
-        .min-sm\\:max-lg\\:flex {
+    @media (width < 1280px) {
+      @media (width >= 768px) {
+        .min-md\\:max-xl\\:flex {
           display: flex;
         }
       }
-    }
-
-    @media (min-width: 768px) {
-      @media not all and (min-width: 1024px) {
-        .min-md\\:max-lg\\:flex {
-          display: flex;
-        }
-      }
-    }
-    "
+    }"
   `)
 })
 
-test('stacked min-* and max-* variants should come after unprefixed variants', async () => {
+test('min, max and unprefixed breakpoints', () => {
   expect(
-    await run(
-      ['sm:flex', 'min-sm:max-lg:flex', 'md:flex', 'min-md:max-lg:flex'],
+    compileCss(
       css`
         @theme {
           /* Explicitly ordered in a strange way */
@@ -1176,39 +1037,6 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a
         }
         @tailwind utilities;
       `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @media (min-width: 640px) {
-      .sm\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 1024px) {
-        .min-sm\\:max-lg\\:flex {
-          display: flex;
-        }
-      }
-    }
-
-    @media (min-width: 768px) {
-      .md\\:flex {
-        display: flex;
-      }
-
-      @media not all and (min-width: 1024px) {
-        .min-md\\:max-lg\\:flex {
-          display: flex;
-        }
-      }
-    }
-    "
-  `)
-})
-
-test('min, max and unprefixed breakpoints', async () => {
-  expect(
-    await run(
       [
         'max-lg-sm-potato:flex',
         'min-lg-sm-potato:flex',
@@ -1225,72 +1053,85 @@ test('min, max and unprefixed breakpoints', async () => {
         'sm:flex',
         'lg:flex',
       ],
-      css`
-        @theme {
-          /* Explicitly ordered in a strange way */
-          --breakpoint-sm: 640px;
-          --breakpoint-lg: 1024px;
-          --breakpoint-md: 768px;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @media not all and (min-width: 1024px) {
+    ":root {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+    }
+
+    @media (width < 1024px) {
       .max-lg\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 1000px) {
+    @media (width < 1000px) {
       .max-\\[1000px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 768px) {
+    @media (width < 768px) {
       .max-md\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 640px) {
+    @media (width < 640px) {
       .max-sm\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 640px) {
-      .min-sm\\:flex, .sm\\:flex {
+    @media (width >= 640px) {
+      .min-sm\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 700px) {
+    @media (width >= 640px) {
+      .sm\\:flex {
+        display: flex;
+      }
+    }
+
+    @media (width >= 700px) {
       .min-\\[700px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 768px) {
-      .md\\:flex, .min-md\\:flex {
+    @media (width >= 768px) {
+      .md\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 1024px) {
-      .lg\\:flex, .min-lg\\:flex {
+    @media (width >= 768px) {
+      .min-md\\:flex {
         display: flex;
       }
     }
-    "
+
+    @media (width >= 1024px) {
+      .lg\\:flex {
+        display: flex;
+      }
+    }
+
+    @media (width >= 1024px) {
+      .min-lg\\:flex {
+        display: flex;
+      }
+    }"
   `)
 })
 
-test('sorting `min` and `max` should sort by unit, then by value, then alphabetically', async () => {
+test('sorting `min` and `max` should sort by unit, then by value, then alphabetically', () => {
   expect(
-    await run([
+    run([
       'min-[10px]:flex',
       'min-[12px]:flex',
       'min-[10em]:flex',
@@ -1313,1325 +1154,506 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti
       'max-[12vh]:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    @media not all and (min-width: calc(1000px + 12em)) {
+    "@media (width < calc(1000px + 12em)) {
       .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: calc(50vh + 12em)) {
+    @media (width < calc(50vh + 12em)) {
       .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 12em) {
+    @media (width < 12em) {
       .max-\\[12em\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 10em) {
+    @media (width < 10em) {
       .max-\\[10em\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 12px) {
+    @media (width < 12px) {
       .max-\\[12px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 10px) {
+    @media (width < 10px) {
       .max-\\[10px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 12rem) {
+    @media (width < 12rem) {
       .max-\\[12rem\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 10rem) {
+    @media (width < 10rem) {
       .max-\\[10rem\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 12vh) {
+    @media (width < 12vh) {
       .max-\\[12vh\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not all and (min-width: 10vh) {
+    @media (width < 10vh) {
       .max-\\[10vh\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: calc(1000px + 12em)) {
+    @media (width >= calc(1000px + 12em)) {
       .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: calc(50vh + 12em)) {
+    @media (width >= calc(50vh + 12em)) {
       .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 10em) {
+    @media (width >= 10em) {
       .min-\\[10em\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 12em) {
+    @media (width >= 12em) {
       .min-\\[12em\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 10px) {
+    @media (width >= 10px) {
       .min-\\[10px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 12px) {
+    @media (width >= 12px) {
       .min-\\[12px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 10rem) {
+    @media (width >= 10rem) {
       .min-\\[10rem\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 12rem) {
+    @media (width >= 12rem) {
       .min-\\[12rem\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 10vh) {
+    @media (width >= 10vh) {
       .min-\\[10vh\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 12vh) {
+    @media (width >= 12vh) {
       .min-\\[12vh\\]\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
 })
 
-test('sorting `min` and `max` should compare decimal values numerically', async () => {
+test('supports', () => {
   expect(
-    await run([
-      'min-[40.5rem]:flex',
-      'min-[40.25rem]:flex',
-      'max-[40.25rem]:flex',
-      'max-[40.5rem]:flex',
-    ]),
+    run(['supports-gap:grid', 'supports-[display:grid]:flex', 'supports-[selector(A_>_B)]:flex']),
   ).toMatchInlineSnapshot(`
-    "
-    @media not all and (min-width: 40.5rem) {
-      .max-\\[40\\.5rem\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (min-width: 40.25rem) {
-      .max-\\[40\\.25rem\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @media (min-width: 40.25rem) {
-      .min-\\[40\\.25rem\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @media (min-width: 40.5rem) {
-      .min-\\[40\\.5rem\\]\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('sorting `@min` and `@max` should compare decimal values numerically', async () => {
-  expect(
-    await run([
-      '@min-[40.5rem]:flex',
-      '@min-[40.25rem]:flex',
-      '@max-[40.25rem]:flex',
-      '@max-[40.5rem]:flex',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @container not (min-width: 40.5rem) {
-      .\\@max-\\[40\\.5rem\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @container not (min-width: 40.25rem) {
-      .\\@max-\\[40\\.25rem\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @container (min-width: 40.25rem) {
-      .\\@min-\\[40\\.25rem\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @container (min-width: 40.5rem) {
-      .\\@min-\\[40\\.5rem\\]\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('supports', async () => {
-  expect(
-    await run([
-      'supports-gap:grid',
-      'supports-[display:grid]:flex',
-      'supports-[selector(A_>_B)]:flex',
-      'supports-[font-format(opentype)]:grid',
-      'supports-[(display:grid)_and_font-format(opentype)]:grid',
-      'supports-[font-tech(color-COLRv1)]:flex',
-      'supports-[var(--test)]:flex',
-      'supports-[--test]:flex',
-
-      // Only top-level and/or/not should have spaces around them. We should
-      // ignore and/or/not inside of `selector(…)`
-      'supports-[selector(a:not(.foo))]:flex',
-      'supports-[selector(a:is(.and,.or))]:flex',
-      'supports-[(display:grid)or(display:flex)]:grid',
-      'supports-[not(display:grid)]:flex',
-      'supports-[foo-not(display:grid)]:flex',
-      'supports-[selector([data-foo="("])or(display:grid)]:flex',
-      'supports-[selector(.foo\\(bar)or(display:grid)]:flex',
-      'supports-[((display:grid)or(display:flex))]:grid',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    @supports (gap: var(--tw)) {
+    "@supports (gap: var(--tw)) {
       .supports-gap\\:grid {
         display: grid;
       }
     }
 
-    @supports (display: grid) or (display: flex) {
-      .supports-\\[\\(\\(display\\:grid\\)or\\(display\\:flex\\)\\)\\]\\:grid {
-        display: grid;
-      }
-    }
-
-    @supports (display: grid) and font-format(opentype) {
-      .supports-\\[\\(display\\:grid\\)_and_font-format\\(opentype\\)\\]\\:grid {
-        display: grid;
-      }
-    }
-
-    @supports (display: grid) or (display: flex) {
-      .supports-\\[\\(display\\:grid\\)or\\(display\\:flex\\)\\]\\:grid {
-        display: grid;
-      }
-    }
-
-    @supports (--test: var(--tw)) {
-      .supports-\\[--test\\]\\:flex {
-        display: flex;
-      }
-    }
-
     @supports (display: grid) {
       .supports-\\[display\\:grid\\]\\:flex {
         display: flex;
       }
     }
 
-    @supports font-format(opentype) {
-      .supports-\\[font-format\\(opentype\\)\\]\\:grid {
-        display: grid;
-      }
-    }
-
-    @supports font-tech(color-COLRv1) {
-      .supports-\\[font-tech\\(color-COLRv1\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @supports foo-not(display:grid) {
-      .supports-\\[foo-not\\(display\\:grid\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @supports not (display: grid) {
-      .supports-\\[not\\(display\\:grid\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @supports selector(.foo\\(bar) or (display: grid) {
-      .supports-\\[selector\\(\\.foo\\\\\\(bar\\)or\\(display\\:grid\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
     @supports selector(A > B) {
       .supports-\\[selector\\(A_\\>_B\\)\\]\\:flex {
         display: flex;
       }
-    }
-
-    @supports selector([data-foo="("]) or (display: grid) {
-      .supports-\\[selector\\(\\[data-foo\\=\\"\\(\\"\\]\\)or\\(display\\:grid\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @supports selector(a:is(.and,.or)) {
-      .supports-\\[selector\\(a\\:is\\(\\.and\\,\\.or\\)\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @supports selector(a:not(.foo)) {
-      .supports-\\[selector\\(a\\:not\\(\\.foo\\)\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @supports var(--test) {
-      .supports-\\[var\\(--test\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-    "
+    }"
   `)
-  expect(
-    await run([
-      'supports-gap/foo:grid',
-      'supports-[display:grid]/foo:flex',
-      'supports-[selector(A_>_B)]/foo:flex',
-      'supports-[font-format(opentype)]/foo:grid',
-      'supports-[(display:grid)_and_font-format(opentype)]/foo:grid',
-      'supports-[font-tech(color-COLRv1)]/foo:flex',
-      'supports-[var(--test)]/foo:flex',
-    ]),
-  ).toEqual('')
 })
 
-test('not', async () => {
+test('not', () => {
   expect(
-    await run(
-      [
-        'not-[:checked]:flex',
-        'not-[@media_print]:flex',
-        'not-[@media(orientation:portrait)]:flex',
-        'not-[@media_(orientation:landscape)]:flex',
-        'not-[@media_not_(orientation:portrait)]:flex',
-        'not-hocus:flex',
-        'not-device-hocus:flex',
+    run([
+      'not-[:checked]:flex',
 
-        'group-not-[:checked]:flex',
-        'group-not-[:checked]/parent-name:flex',
-        'group-not-checked:flex',
-        'group-not-hocus:flex',
-        // 'group-not-hover:flex',
-        // 'group-not-device-hocus:flex',
-        'group-not-hocus/parent-name:flex',
+      'group-not-[:checked]:flex',
+      'group-not-[:checked]/parent-name:flex',
+      'group-not-checked:flex',
 
-        'peer-not-[:checked]:flex',
-        'peer-not-[:checked]/sibling-name:flex',
-        'peer-not-checked:flex',
-        'peer-not-hocus:flex',
-        'peer-not-hocus/sibling-name:flex',
-
-        // Not versions of built-in variants
-        'not-first:flex',
-        'not-last:flex',
-        'not-only:flex',
-        'not-odd:flex',
-        'not-even:flex',
-        'not-first-of-type:flex',
-        'not-last-of-type:flex',
-        'not-only-of-type:flex',
-        'not-visited:flex',
-        'not-target:flex',
-        'not-open:flex',
-        'not-default:flex',
-        'not-checked:flex',
-        'not-indeterminate:flex',
-        'not-placeholder-shown:flex',
-        'not-autofill:flex',
-        'not-optional:flex',
-        'not-required:flex',
-        'not-valid:flex',
-        'not-invalid:flex',
-        'not-in-range:flex',
-        'not-out-of-range:flex',
-        'not-read-only:flex',
-        'not-empty:flex',
-        'not-focus-within:flex',
-        'not-hover:flex',
-        'not-focus:flex',
-        'not-focus-visible:flex',
-        'not-active:flex',
-        'not-enabled:flex',
-        'not-disabled:flex',
-        'not-inert:flex',
-
-        'not-ltr:flex',
-        'not-rtl:flex',
-        'not-motion-safe:flex',
-        'not-motion-reduce:flex',
-        'not-dark:flex',
-        'not-print:flex',
-        'not-supports-grid:flex',
-        'not-has-checked:flex',
-        'not-aria-selected:flex',
-        'not-data-foo:flex',
-        'not-portrait:flex',
-        'not-landscape:flex',
-        'not-contrast-more:flex',
-        'not-contrast-less:flex',
-        'not-forced-colors:flex',
-        'not-nth-2:flex',
-        'not-noscript:flex',
-
-        'not-sm:flex',
-        'not-min-sm:flex',
-        'not-min-[130px]:flex',
-        'not-max-sm:flex',
-        'not-max-[130px]:flex',
-      ],
-      css`
-        @custom-variant hocus {
-          &:hover,
-          &:focus {
-            @slot;
-          }
-        }
-
-        @custom-variant device-hocus {
-          @media (hover: hover) {
-            &:hover,
-            &:focus {
-              @slot;
-            }
-          }
-        }
-
-        @theme {
-          --breakpoint-sm: 640px;
-        }
-
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    .not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target), .not-open\\:flex:not(:is([open], :popover-open, :open)), .not-default\\:flex:not(:default), .not-checked\\:flex:not(:checked), .not-indeterminate\\:flex:not(:indeterminate), .not-placeholder-shown\\:flex:not(:placeholder-shown) {
-      display: flex;
-    }
-
-    .not-autofill\\:flex:not(:autofill) {
-      display: flex;
-    }
-
-    .not-optional\\:flex:not(:optional), .not-required\\:flex:not(:required), .not-valid\\:flex:not(:valid), .not-invalid\\:flex:not(:invalid), .not-in-range\\:flex:not(:in-range), .not-out-of-range\\:flex:not(:out-of-range), .not-read-only\\:flex:not(:read-only), .not-empty\\:flex:not(:empty), .not-focus-within\\:flex:not(:focus-within), .not-hover\\:flex:not(:hover) {
-      display: flex;
-    }
-
-    @media not all and (hover: hover) {
-      .not-hover\\:flex {
-        display: flex;
-      }
-    }
-
-    .not-focus\\:flex:not(:focus), .not-focus-visible\\:flex:not(:focus-visible), .not-active\\:flex:not(:active), .not-enabled\\:flex:not(:enabled), .not-disabled\\:flex:not(:disabled), .not-inert\\:flex:not(:is([inert], [inert] *)), .not-has-checked\\:flex:not(:has(:checked)), .not-aria-selected\\:flex:not([aria-selected="true"]), .not-data-foo\\:flex:not([data-foo]), .not-nth-2\\:flex:not(:nth-child(2)) {
-      display: flex;
-    }
-
-    @supports not (grid: var(--tw)) {
-      .not-supports-grid\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (prefers-reduced-motion: no-preference) {
-      .not-motion-safe\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (prefers-reduced-motion: reduce) {
-      .not-motion-reduce\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (prefers-contrast: more) {
-      .not-contrast-more\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (prefers-contrast: less) {
-      .not-contrast-less\\:flex {
-        display: flex;
-      }
-    }
-
-    @media (min-width: 640px) {
-      .not-max-sm\\:flex {
-        display: flex;
-      }
-    }
-
-    @media (min-width: 130px) {
-      .not-max-\\[130px\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (min-width: 130px) {
-      .not-min-\\[130px\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (min-width: 640px) {
-      .not-min-sm\\:flex, .not-sm\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (orientation: portrait) {
-      .not-portrait\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (orientation: landscape) {
-      .not-landscape\\:flex {
-        display: flex;
-      }
-    }
-
-    .not-ltr\\:flex:not(:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)), .not-rtl\\:flex:not(:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)) {
-      display: flex;
-    }
-
-    @media not all and (prefers-color-scheme: dark) {
-      .not-dark\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not print {
-      .not-print\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (forced-colors: active) {
-      .not-forced-colors\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (scripting: none) {
-      .not-noscript\\:flex {
-        display: flex;
-      }
-    }
-
-    .not-hocus\\:flex:not(:hover, :focus), .not-device-hocus\\:flex:not(:hover, :focus) {
-      display: flex;
-    }
-
-    @media not all and (hover: hover) {
-      .not-device-hocus\\:flex {
-        display: flex;
-      }
-    }
-
-    .not-\\[\\:checked\\]\\:flex:not(:checked) {
-      display: flex;
-    }
-
-    @media not all and (orientation: landscape) {
-      .not-\\[\\@media_\\(orientation\\:landscape\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @media (orientation: portrait) {
-      .not-\\[\\@media_not_\\(orientation\\:portrait\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not print {
-      .not-\\[\\@media_print\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    @media not all and (orientation: portrait) {
-      .not-\\[\\@media\\(orientation\\:portrait\\)\\]\\:flex {
-        display: flex;
-      }
-    }
-
-    :is(:where(.group):not(:checked) .group-not-checked\\:flex), :is(:where(.group):not(:hover, :focus) .group-not-hocus\\:flex), :is(:where(.group\\/parent-name):not(:hover, :focus) .group-not-hocus\\/parent-name\\:flex), :is(:where(.group):not(:checked) .group-not-\\[\\:checked\\]\\:flex), :is(:where(.group\\/parent-name):not(:checked) .group-not-\\[\\:checked\\]\\/parent-name\\:flex), :is(:where(.peer):not(:checked) ~ .peer-not-checked\\:flex), :is(:where(.peer):not(:hover, :focus) ~ .peer-not-hocus\\:flex), :is(:where(.peer\\/sibling-name):not(:hover, :focus) ~ .peer-not-hocus\\/sibling-name\\:flex), :is(:where(.peer):not(:checked) ~ .peer-not-\\[\\:checked\\]\\:flex), :is(:where(.peer\\/sibling-name):not(:checked) ~ .peer-not-\\[\\:checked\\]\\/sibling-name\\:flex) {
-      display: flex;
-    }
-    "
-  `)
-
-  // https://github.com/tailwindlabs/tailwindcss/issues/20058
-  expect(
-    await run(
-      ['not-has-a:flex', 'not-has-b:flex', 'not-has-c:flex', 'not-has-d:flex'],
-      css`
-        @custom-variant has-a {
-          @container style(--a) {
-            @slot;
-          }
-        }
-
-        /* Already negated case */
-        @custom-variant has-b {
-          @container not style(--b) {
-            @slot;
-          }
-        }
-
-        /* Named @container */
-        @custom-variant has-c {
-          @container foo style(--c) {
-            @slot;
-          }
-        }
-
-        /* Named @container, that's already negated case */
-        @custom-variant has-d {
-          @container bar not style(--d) {
-            @slot;
-          }
-        }
-
-        @tailwind utilities;
-      `,
-    ),
-  ).toMatchInlineSnapshot(`
-    "
-    @container not style(--a) {
-      .not-has-a\\:flex {
-        display: flex;
-      }
-    }
-
-    @container style(--b) {
-      .not-has-b\\:flex {
-        display: flex;
-      }
-    }
-
-    @container foo not style(--c) {
-      .not-has-c\\:flex {
-        display: flex;
-      }
-    }
-
-    @container bar style(--d) {
-      .not-has-d\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-
-  expect(
-    await run(
-      [
-        'not-[>img]:flex',
-        'not-[+img]:flex',
-        'not-[~img]:flex',
-        'not-[:checked]/foo:flex',
-        'not-[@media_screen,print]:flex',
-        'not-[@media_not_screen,print]:flex',
-        'not-[@media_not_screen,not_print]:flex',
-
-        'not-nested-at-rules:flex',
-        'not-nested-style-rules:flex',
-        'not-multiple-media-conditions:flex',
-        'not-starting:flex',
-
-        'not-parallel-style-rules:flex',
-        'not-parallel-at-rules:flex',
-        'not-parallel-mixed-rules:flex',
-
-        // The following built-in variants don't have not-* versions because
-        // there is no sensible negative version of them.
-
-        // These just don't make sense as not-*
-        'not-force:flex',
-        'not-*:flex',
-
-        // These contain pseudo-elements
-        'not-first-letter:flex',
-        'not-first-line:flex',
-        'not-marker:flex',
-        'not-selection:flex',
-        'not-file:flex',
-        'not-placeholder:flex',
-        'not-backdrop:flex',
-        'not-before:flex',
-        'not-after:flex',
-
-        // This is not a conditional at rule
-        'not-starting:flex',
-      ],
-      css`
-        @custom-variant nested-at-rules {
-          @media foo {
-            @media bar {
-              @slot;
-            }
-          }
-        }
-        @custom-variant multiple-media-conditions {
-          @media foo, bar {
-            @slot;
-          }
-        }
-        @custom-variant nested-style-rules {
-          &:hover {
-            &:focus {
-              @slot;
-            }
-          }
-        }
-        @custom-variant parallel-style-rules {
-          &:hover {
-            @slot;
-          }
-          &:focus {
-            @slot;
-          }
-        }
-        @custom-variant parallel-at-rules {
-          @media foo {
-            @slot;
-          }
-          @media bar {
-            @slot;
-          }
-        }
-        @custom-variant parallel-mixed-rules {
-          &:hover {
-            @slot;
-          }
-          @media bar {
-            @slot;
-          }
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
-})
-
-test('in', async () => {
-  expect(
-    await run([
-      'in-[p]:flex',
-      'in-[.group]:flex',
-      'not-in-[p]:flex',
-      'not-in-[.group]:flex',
-      'in-data-visible:flex',
+      'peer-not-[:checked]:flex',
+      'peer-not-[:checked]/parent-name:flex',
+      'peer-not-checked:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    .not-in-\\[\\.group\\]\\:flex:not(:where(.group) *), .not-in-\\[p\\]\\:flex:not(:where(:is(p)) *), :where([data-visible]) .in-data-visible\\:flex, :where(.group) .in-\\[\\.group\\]\\:flex, :where(:is(p)) .in-\\[p\\]\\:flex {
+    ".not-\\[\\:checked\\]\\:flex:not(:checked) {
       display: flex;
     }
-    "
+
+    .group-not-checked\\:flex:is(:where(.group):not(:checked) *) {
+      display: flex;
+    }
+
+    .group-not-\\[\\:checked\\]\\:flex:is(:where(.group):not(:checked) *) {
+      display: flex;
+    }
+
+    .group-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):not(:checked) *) {
+      display: flex;
+    }
+
+    .peer-not-checked\\:flex:is(:where(.peer):not(:checked) ~ *) {
+      display: flex;
+    }
+
+    .peer-not-\\[\\:checked\\]\\:flex:is(:where(.peer):not(:checked) ~ *) {
+      display: flex;
+    }
+
+    .peer-not-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name):not(:checked) ~ *) {
+      display: flex;
+    }"
   `)
-  expect(await run(['in-p:flex', 'in-foo-bar:flex'])).toEqual('')
 })
 
-test('has', async () => {
+test('has', () => {
   expect(
-    await run(
-      [
-        'has-checked:flex',
-        'has-[:checked]:flex',
-        'has-[>img]:flex',
-        'has-[+img]:flex',
-        'has-[~img]:flex',
-        'has-[&>img]:flex',
-        'has-hocus:flex',
+    run([
+      'has-[:checked]:flex',
 
-        'group-has-[:checked]:flex',
-        'group-has-[:checked]/parent-name:flex',
-        'group-has-checked:flex',
-        'group-has-checked/parent-name:flex',
-        'group-has-[>img]:flex',
-        'group-has-[>img]/parent-name:flex',
-        'group-has-[+img]:flex',
-        'group-has-[~img]:flex',
-        'group-has-[&>img]:flex',
-        'group-has-[&>img]/parent-name:flex',
-        'group-has-hocus:flex',
-        'group-has-hocus/parent-name:flex',
+      'group-has-[:checked]:flex',
+      'group-has-[:checked]/parent-name:flex',
+      'group-has-checked:flex',
 
-        'peer-has-[:checked]:flex',
-        'peer-has-[:checked]/sibling-name:flex',
-        'peer-has-checked:flex',
-        'peer-has-checked/sibling-name:flex',
-        'peer-has-[>img]:flex',
-        'peer-has-[>img]/sibling-name:flex',
-        'peer-has-[+img]:flex',
-        'peer-has-[~img]:flex',
-        'peer-has-[&>img]:flex',
-        'peer-has-[&>img]/sibling-name:flex',
-        'peer-has-hocus:flex',
-        'peer-has-hocus/sibling-name:flex',
-      ],
-      css`
-        @custom-variant hocus {
-          &:hover,
-          &:focus {
-            @slot;
-          }
-        }
-        @tailwind utilities;
-      `,
-    ),
+      'peer-has-[:checked]:flex',
+      'peer-has-[:checked]/parent-name:flex',
+      'peer-has-checked:flex',
+    ]),
   ).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group):has(:checked) .group-has-checked\\:flex), :is(:where(.group\\/parent-name):has(:checked) .group-has-checked\\/parent-name\\:flex), :is(:where(.group):has(:hover, :focus) .group-has-hocus\\:flex), :is(:where(.group\\/parent-name):has(:hover, :focus) .group-has-hocus\\/parent-name\\:flex), :is(:where(.group):has(:checked) .group-has-\\[\\:checked\\]\\:flex), :is(:where(.group\\/parent-name):has(:checked) .group-has-\\[\\:checked\\]\\/parent-name\\:flex), :is(:where(.group):has(* > img) .group-has-\\[\\&\\>img\\]\\:flex), :is(:where(.group\\/parent-name):has(* > img) .group-has-\\[\\&\\>img\\]\\/parent-name\\:flex), :is(:where(.group):has( + img) .group-has-\\[\\+img\\]\\:flex), :is(:where(.group):has( > img) .group-has-\\[\\>img\\]\\:flex), :is(:where(.group\\/parent-name):has( > img) .group-has-\\[\\>img\\]\\/parent-name\\:flex), :is(:where(.group):has( ~ img) .group-has-\\[\\~img\\]\\:flex), :is(:where(.peer):has(:checked) ~ .peer-has-checked\\:flex), :is(:where(.peer\\/sibling-name):has(:checked) ~ .peer-has-checked\\/sibling-name\\:flex), :is(:where(.peer):has(:hover, :focus) ~ .peer-has-hocus\\:flex), :is(:where(.peer\\/sibling-name):has(:hover, :focus) ~ .peer-has-hocus\\/sibling-name\\:flex), :is(:where(.peer):has(:checked) ~ .peer-has-\\[\\:checked\\]\\:flex), :is(:where(.peer\\/sibling-name):has(:checked) ~ .peer-has-\\[\\:checked\\]\\/sibling-name\\:flex), :is(:where(.peer):has(* > img) ~ .peer-has-\\[\\&\\>img\\]\\:flex), :is(:where(.peer\\/sibling-name):has(* > img) ~ .peer-has-\\[\\&\\>img\\]\\/sibling-name\\:flex), :is(:where(.peer):has( + img) ~ .peer-has-\\[\\+img\\]\\:flex), :is(:where(.peer):has( > img) ~ .peer-has-\\[\\>img\\]\\:flex), :is(:where(.peer\\/sibling-name):has( > img) ~ .peer-has-\\[\\>img\\]\\/sibling-name\\:flex), :is(:where(.peer):has( ~ img) ~ .peer-has-\\[\\~img\\]\\:flex), .has-checked\\:flex:has(:checked), .has-hocus\\:flex:has(:hover, :focus), .has-\\[\\:checked\\]\\:flex:has(:checked), .has-\\[\\&\\>img\\]\\:flex:has(* > img), .has-\\[\\+img\\]\\:flex:has( + img), .has-\\[\\>img\\]\\:flex:has( > img), .has-\\[\\~img\\]\\:flex:has( ~ img) {
+    ".group-has-checked\\:flex:is(:where(.group):has(:checked) *) {
       display: flex;
     }
-    "
-  `)
 
-  expect(
-    await run(
-      [
-        'has-[:checked]/foo:flex',
-        'has-[@media_print]:flex',
-        'has-custom-at-rule:flex',
-        'has-nested-selectors:flex',
-      ],
-      css`
-        @custom-variant custom-at-rule (@media foo);
-        @custom-variant nested-selectors {
-          &:hover {
-            &:focus {
-              @slot;
-            }
-          }
-        }
-        @tailwind utilities;
-      `,
-    ),
-  ).toEqual('')
+    .group-has-\\[\\:checked\\]\\:flex:is(:where(.group):has(:checked) *) {
+      display: flex;
+    }
+
+    .group-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name):has(:checked) *) {
+      display: flex;
+    }
+
+    .peer-has-checked\\:flex:is(:where(.peer):has(:checked) ~ *) {
+      display: flex;
+    }
+
+    .peer-has-\\[\\:checked\\]\\:flex:is(:where(.peer):has(:checked) ~ *) {
+      display: flex;
+    }
+
+    .peer-has-\\[\\:checked\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name):has(:checked) ~ *) {
+      display: flex;
+    }
+
+    .has-\\[\\:checked\\]\\:flex:has(:checked) {
+      display: flex;
+    }"
+  `)
 })
 
-test('aria', async () => {
+test('aria', () => {
   expect(
-    await run([
+    run([
       'aria-checked:flex',
       'aria-[invalid=spelling]:flex',
-      'aria-[valuenow=1]:flex',
-      'aria-[valuenow_=_"1"]:flex',
 
       'group-aria-[modal]:flex',
       'group-aria-checked:flex',
-      'group-aria-[valuenow=1]:flex',
       'group-aria-[modal]/parent-name:flex',
       'group-aria-checked/parent-name:flex',
-      'group-aria-[valuenow=1]/parent-name:flex',
 
       'peer-aria-[modal]:flex',
       'peer-aria-checked:flex',
-      'peer-aria-[valuenow=1]:flex',
-      'peer-aria-[modal]/sibling-name:flex',
-      'peer-aria-checked/sibling-name:flex',
-      'peer-aria-[valuenow=1]/sibling-name:flex',
+      'peer-aria-[modal]/parent-name:flex',
+      'peer-aria-checked/parent-name:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group)[aria-checked="true"] .group-aria-checked\\:flex), :is(:where(.group\\/parent-name)[aria-checked="true"] .group-aria-checked\\/parent-name\\:flex), :is(:where(.group)[aria-modal] .group-aria-\\[modal\\]\\:flex), :is(:where(.group\\/parent-name)[aria-modal] .group-aria-\\[modal\\]\\/parent-name\\:flex), :is(:where(.group)[aria-valuenow="1"] .group-aria-\\[valuenow\\=1\\]\\:flex), :is(:where(.group\\/parent-name)[aria-valuenow="1"] .group-aria-\\[valuenow\\=1\\]\\/parent-name\\:flex), :is(:where(.peer)[aria-checked="true"] ~ .peer-aria-checked\\:flex), :is(:where(.peer\\/sibling-name)[aria-checked="true"] ~ .peer-aria-checked\\/sibling-name\\:flex), :is(:where(.peer)[aria-modal] ~ .peer-aria-\\[modal\\]\\:flex), :is(:where(.peer\\/sibling-name)[aria-modal] ~ .peer-aria-\\[modal\\]\\/sibling-name\\:flex), :is(:where(.peer)[aria-valuenow="1"] ~ .peer-aria-\\[valuenow\\=1\\]\\:flex), :is(:where(.peer\\/sibling-name)[aria-valuenow="1"] ~ .peer-aria-\\[valuenow\\=1\\]\\/sibling-name\\:flex), .aria-checked\\:flex[aria-checked="true"], .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"], .aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow="1"], .aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] {
+    ".group-aria-\\[modal\\]\\:flex:is(:where(.group)[aria-modal] *) {
       display: flex;
     }
-    "
+
+    .group-aria-checked\\:flex:is(:where(.group)[aria-checked="true"] *) {
+      display: flex;
+    }
+
+    .group-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-modal] *) {
+      display: flex;
+    }
+
+    .group-aria-checked\\/parent-name\\:flex:is(:where(.group\\/parent-name)[aria-checked="true"] *) {
+      display: flex;
+    }
+
+    .peer-aria-\\[modal\\]\\:flex:is(:where(.peer)[aria-modal] ~ *) {
+      display: flex;
+    }
+
+    .peer-aria-checked\\:flex:is(:where(.peer)[aria-checked="true"] ~ *) {
+      display: flex;
+    }
+
+    .peer-aria-\\[modal\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[aria-modal] ~ *) {
+      display: flex;
+    }
+
+    .peer-aria-checked\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[aria-checked="true"] ~ *) {
+      display: flex;
+    }
+
+    .aria-checked\\:flex[aria-checked="true"] {
+      display: flex;
+    }
+
+    .aria-\\[invalid\\=spelling\\]\\:flex[aria-invalid="spelling"] {
+      display: flex;
+    }"
   `)
-  expect(await run(['aria-checked/foo:flex', 'aria-[invalid=spelling]/foo:flex'])).toEqual('')
 })
 
-test('data', async () => {
+test('data', () => {
   expect(
-    await run([
+    run([
       'data-disabled:flex',
       'data-[potato=salad]:flex',
-      'data-[potato_=_"salad"]:flex',
-      'data-[potato_^=_"salad"]:flex',
-      'data-[potato="^_="]:flex',
-      'data-[foo=1]:flex',
-      'data-[foo=bar_baz]:flex',
-      "data-[foo$='bar'_i]:flex",
-      'data-[foo$=bar_baz_i]:flex',
 
       'group-data-[disabled]:flex',
       'group-data-[disabled]/parent-name:flex',
-      'group-data-[foo=1]:flex',
-      'group-data-[foo=1]/parent-name:flex',
-      'group-data-[foo=bar baz]/parent-name:flex',
-      "group-data-[foo$='bar'_i]/parent-name:flex",
-      'group-data-[foo$=bar_baz_i]/parent-name:flex',
 
       'peer-data-[disabled]:flex',
-      'peer-data-[disabled]/sibling-name:flex',
-      'peer-data-[foo=1]:flex',
-      'peer-data-[foo=1]/sibling-name:flex',
-      'peer-data-[foo=bar baz]/sibling-name:flex',
-      "peer-data-[foo$='bar'_i]/sibling-name:flex",
-      'peer-data-[foo$=bar_baz_i]/sibling-name:flex',
+      'peer-data-[disabled]/parent-name:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    "
-    :is(:where(.group)[data-disabled] .group-data-\\[disabled\\]\\:flex), :is(:where(.group\\/parent-name)[data-disabled] .group-data-\\[disabled\\]\\/parent-name\\:flex), :is(:where(.group\\/parent-name)[data-foo$="bar" i] .group-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/parent-name\\:flex), :is(:where(.group\\/parent-name)[data-foo$="bar baz" i] .group-data-\\[foo\\$\\=bar_baz_i\\]\\/parent-name\\:flex), :is(:where(.group)[data-foo="1"] .group-data-\\[foo\\=1\\]\\:flex), :is(:where(.group\\/parent-name)[data-foo="1"] .group-data-\\[foo\\=1\\]\\/parent-name\\:flex), :is(:where(.group\\/parent-name)[data-foo="bar baz"] .group-data-\\[foo\\=bar\\ baz\\]\\/parent-name\\:flex), :is(:where(.peer)[data-disabled] ~ .peer-data-\\[disabled\\]\\:flex), :is(:where(.peer\\/sibling-name)[data-disabled] ~ .peer-data-\\[disabled\\]\\/sibling-name\\:flex), :is(:where(.peer\\/sibling-name)[data-foo$="bar" i] ~ .peer-data-\\[foo\\$\\=\\'bar\\'_i\\]\\/sibling-name\\:flex), :is(:where(.peer\\/sibling-name)[data-foo$="bar baz" i] ~ .peer-data-\\[foo\\$\\=bar_baz_i\\]\\/sibling-name\\:flex), :is(:where(.peer)[data-foo="1"] ~ .peer-data-\\[foo\\=1\\]\\:flex), :is(:where(.peer\\/sibling-name)[data-foo="1"] ~ .peer-data-\\[foo\\=1\\]\\/sibling-name\\:flex), :is(:where(.peer\\/sibling-name)[data-foo="bar baz"] ~ .peer-data-\\[foo\\=bar\\ baz\\]\\/sibling-name\\:flex), .data-disabled\\:flex[data-disabled], .data-\\[foo\\$\\=\\'bar\\'_i\\]\\:flex[data-foo$="bar" i], .data-\\[foo\\$\\=bar_baz_i\\]\\:flex[data-foo$="bar baz" i], .data-\\[foo\\=1\\]\\:flex[data-foo="1"], .data-\\[foo\\=bar_baz\\]\\:flex[data-foo="bar baz"], .data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato="salad"], .data-\\[potato_\\^\\=_\\"salad\\"\\]\\:flex[data-potato^="salad"], .data-\\[potato\\=\\"\\^_\\=\\"\\]\\:flex[data-potato="^ ="], .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] {
+    ".group-data-\\[disabled\\]\\:flex:is(:where(.group)[data-disabled] *) {
       display: flex;
     }
-    "
-  `)
-  expect(
-    await run([
-      'data-[]:flex',
-      'data-[foo_^_=_"bar"]:flex', // Can't have spaces between `^` and `=`
-      'data-disabled/foo:flex',
-      'data-[potato=salad]/foo:flex',
-    ]),
-  ).toEqual('')
 
-  // Non-ASCII code points are valid in attribute names
-  expect(await run(['data-[état]:flex', 'aria-[état]:flex'])).toMatchInlineSnapshot(`
-    "
-    .aria-\\[état\\]\\:flex[aria-état], .data-\\[état\\]\\:flex[data-état] {
+    .group-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.group\\/parent-name)[data-disabled] *) {
       display: flex;
     }
-    "
+
+    .peer-data-\\[disabled\\]\\:flex:is(:where(.peer)[data-disabled] ~ *) {
+      display: flex;
+    }
+
+    .peer-data-\\[disabled\\]\\/parent-name\\:flex:is(:where(.peer\\/parent-name)[data-disabled] ~ *) {
+      display: flex;
+    }
+
+    .data-disabled\\:flex[data-disabled] {
+      display: flex;
+    }
+
+    .data-\\[potato\\=salad\\]\\:flex[data-potato="salad"] {
+      display: flex;
+    }"
   `)
 })
 
-test('portrait', async () => {
-  expect(await run(['portrait:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (orientation: portrait) {
+test('portrait', () => {
+  expect(run(['portrait:flex'])).toMatchInlineSnapshot(`
+    "@media (orientation: portrait) {
       .portrait\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(await run(['portrait/foo:flex'])).toEqual('')
 })
 
-test('landscape', async () => {
-  expect(await run(['landscape:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (orientation: landscape) {
+test('landscape', () => {
+  expect(run(['landscape:flex'])).toMatchInlineSnapshot(`
+    "@media (orientation: landscape) {
       .landscape\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(await run(['landscape/foo:flex'])).toEqual('')
 })
 
-test('contrast-more', async () => {
-  expect(await run(['contrast-more:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (prefers-contrast: more) {
+test('contrast-more', () => {
+  expect(run(['contrast-more:flex'])).toMatchInlineSnapshot(`
+    "@media (prefers-contrast: more) {
       .contrast-more\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(await run(['contrast-more/foo:flex'])).toEqual('')
 })
 
-test('contrast-less', async () => {
-  expect(await run(['contrast-less:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (prefers-contrast: less) {
+test('contrast-less', () => {
+  expect(run(['contrast-less:flex'])).toMatchInlineSnapshot(`
+    "@media (prefers-contrast: less) {
       .contrast-less\\:flex {
         display: flex;
       }
-    }
-    "
+    }"
   `)
-  expect(await run(['contrast-less/foo:flex'])).toEqual('')
 })
 
-test('forced-colors', async () => {
-  expect(await run(['forced-colors:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (forced-colors: active) {
+test('forced-colors', () => {
+  expect(run(['forced-colors:flex'])).toMatchInlineSnapshot(`
+    "@media (forced-colors: active) {
       .forced-colors\\:flex {
         display: flex;
       }
-    }
-    "
-  `)
-  expect(await run(['forced-colors/foo:flex'])).toEqual('')
-})
-
-test('inverted-colors', async () => {
-  expect(await run(['inverted-colors:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (inverted-colors: inverted) {
-      .inverted-colors\\:flex {
-        display: flex;
-      }
-    }
-    "
+    }"
   `)
 })
 
-test('pointer-none', async () => {
-  expect(await run(['pointer-none:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (pointer: none) {
-      .pointer-none\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('pointer-coarse', async () => {
-  expect(await run(['pointer-coarse:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (pointer: coarse) {
-      .pointer-coarse\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('pointer-fine', async () => {
-  expect(await run(['pointer-fine:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (pointer: fine) {
-      .pointer-fine\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('any-pointer-none', async () => {
-  expect(await run(['any-pointer-none:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (any-pointer: none) {
-      .any-pointer-none\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('any-pointer-coarse', async () => {
-  expect(await run(['any-pointer-coarse:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (any-pointer: coarse) {
-      .any-pointer-coarse\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('any-pointer-fine', async () => {
-  expect(await run(['any-pointer-fine:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (any-pointer: fine) {
-      .any-pointer-fine\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('scripting-none', async () => {
-  expect(await run(['noscript:flex'])).toMatchInlineSnapshot(`
-    "
-    @media (scripting: none) {
-      .noscript\\:flex {
-        display: flex;
-      }
-    }
-    "
-  `)
-})
-
-test('nth', async () => {
+test('container queries', () => {
   expect(
-    await run([
-      'nth-3:flex',
-      'nth-[2n+1]:flex',
-      'nth-[2n+1_of_.foo]:flex',
-      'nth-last-3:flex',
-      'nth-last-[2n+1]:flex',
-      'nth-last-[2n+1_of_.foo]:flex',
-      'nth-of-type-3:flex',
-      'nth-of-type-[2n+1]:flex',
-      'nth-last-of-type-3:flex',
-      'nth-last-of-type-[2n+1]:flex',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .nth-3\\:flex:nth-child(3), .nth-\\[2n\\+1\\]\\:flex:nth-child(odd), .nth-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-child(odd of .foo), .nth-last-3\\:flex:nth-last-child(3), .nth-last-\\[2n\\+1\\]\\:flex:nth-last-child(odd), .nth-last-\\[2n\\+1_of_\\.foo\\]\\:flex:nth-last-child(odd of .foo), .nth-of-type-3\\:flex:nth-of-type(3), .nth-of-type-\\[2n\\+1\\]\\:flex:nth-of-type(odd), .nth-last-of-type-3\\:flex:nth-last-of-type(3), .nth-last-of-type-\\[2n\\+1\\]\\:flex:nth-last-of-type(odd) {
-      display: flex;
-    }
-    "
-  `)
-
-  expect(
-    await run([
-      'nth-foo:flex',
-      'nth-of-type-foo:flex',
-      'nth-last-foo:flex',
-      'nth-last-of-type-foo:flex',
-    ]),
-  ).toEqual('')
-  expect(
-    await run([
-      'nth--3:flex',
-      'nth-3/foo:flex',
-      'nth-[2n+1]/foo:flex',
-      'nth-[2n+1_of_.foo]/foo:flex',
-      'nth-last--3:flex',
-      'nth-last-3/foo:flex',
-      'nth-last-[2n+1]/foo:flex',
-      'nth-last-[2n+1_of_.foo]/foo:flex',
-      'nth-of-type--3:flex',
-      'nth-of-type-3/foo:flex',
-      'nth-of-type-[2n+1]/foo:flex',
-      'nth-last-of-type--3:flex',
-      'nth-last-of-type-3/foo:flex',
-      'nth-last-of-type-[2n+1]/foo:flex',
-    ]),
-  ).toEqual('')
-})
-
-test('container queries', async () => {
-  let input = css`
-    @theme {
-      --container-lg: 1024px;
-      --container-foo-bar: 1440px;
-    }
-    @tailwind utilities;
-  `
-
-  expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --width-lg: 1024px;
+        }
+        @tailwind utilities;
+      `,
       [
         '@lg:flex',
         '@lg/name:flex',
         '@[123px]:flex',
         '@[456px]/name:flex',
-        '@foo-bar:flex',
-        '@foo-bar/name:flex',
 
         '@min-lg:flex',
         '@min-lg/name:flex',
         '@min-[123px]:flex',
         '@min-[456px]/name:flex',
-        '@min-foo-bar:flex',
-        '@min-foo-bar/name:flex',
 
         '@max-lg:flex',
         '@max-lg/name:flex',
         '@max-[123px]:flex',
         '@max-[456px]/name:flex',
-        '@max-foo-bar:flex',
-        '@max-foo-bar/name:flex',
       ],
-      input,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @container name not (min-width: 1440px) {
-      .\\@max-foo-bar\\/name\\:flex {
-        display: flex;
-      }
+    ":root {
+      --width-lg: 1024px;
     }
 
-    @container not (min-width: 1440px) {
-      .\\@max-foo-bar\\:flex {
-        display: flex;
-      }
-    }
-
-    @container name not (min-width: 1024px) {
-      .\\@max-lg\\/name\\:flex {
-        display: flex;
-      }
-    }
-
-    @container not (min-width: 1024px) {
+    @container (width < 1024px) {
       .\\@max-lg\\:flex {
         display: flex;
       }
     }
 
-    @container name not (min-width: 456px) {
+    @container name (width < 1024px) {
+      .\\@max-lg\\/name\\:flex {
+        display: flex;
+      }
+    }
+
+    @container name (width < 456px) {
       .\\@max-\\[456px\\]\\/name\\:flex {
         display: flex;
       }
     }
 
-    @container not (min-width: 123px) {
+    @container (width < 123px) {
       .\\@max-\\[123px\\]\\:flex {
         display: flex;
       }
     }
 
-    @container (min-width: 123px) {
-      .\\@\\[123px\\]\\:flex, .\\@min-\\[123px\\]\\:flex {
+    @container (width >= 123px) {
+      .\\@\\[123px\\]\\:flex {
         display: flex;
       }
     }
 
-    @container name (min-width: 456px) {
-      .\\@\\[456px\\]\\/name\\:flex, .\\@min-\\[456px\\]\\/name\\:flex {
+    @container (width >= 123px) {
+      .\\@min-\\[123px\\]\\:flex {
         display: flex;
       }
     }
 
-    @container name (min-width: 1024px) {
-      .\\@lg\\/name\\:flex {
+    @container name (width >= 456px) {
+      .\\@\\[456px\\]\\/name\\:flex {
         display: flex;
       }
     }
 
-    @container (min-width: 1024px) {
+    @container name (width >= 456px) {
+      .\\@min-\\[456px\\]\\/name\\:flex {
+        display: flex;
+      }
+    }
+
+    @container (width >= 1024px) {
       .\\@lg\\:flex {
         display: flex;
       }
     }
 
-    @container name (min-width: 1024px) {
-      .\\@min-lg\\/name\\:flex {
+    @container name (width >= 1024px) {
+      .\\@lg\\/name\\:flex {
         display: flex;
       }
     }
 
-    @container (min-width: 1024px) {
+    @container (width >= 1024px) {
       .\\@min-lg\\:flex {
         display: flex;
       }
     }
 
-    @container name (min-width: 1440px) {
-      .\\@foo-bar\\/name\\:flex {
+    @container name (width >= 1024px) {
+      .\\@min-lg\\/name\\:flex {
         display: flex;
       }
-    }
-
-    @container (min-width: 1440px) {
-      .\\@foo-bar\\:flex {
-        display: flex;
-      }
-    }
-
-    @container name (min-width: 1440px) {
-      .\\@min-foo-bar\\/name\\:flex {
-        display: flex;
-      }
-    }
-
-    @container (min-width: 1440px) {
-      .\\@min-foo-bar\\:flex {
-        display: flex;
-      }
-    }
-    "
+    }"
   `)
-  expect(
-    await run(
-      [
-        '@-lg:flex',
-        '@-lg/name:flex',
-        '@-[123px]:flex',
-        '@-[456px]/name:flex',
-        '@-foo-bar:flex',
-        '@-foo-bar/name:flex',
-
-        '@-min-lg:flex',
-        '@-min-lg/name:flex',
-        '@-min-[123px]:flex',
-        '@-min-[456px]/name:flex',
-        '@-min-foo-bar:flex',
-        '@-min-foo-bar/name:flex',
-
-        '@-max-lg:flex',
-        '@-max-lg/name:flex',
-        '@-max-[123px]:flex',
-        '@-max-[456px]/name:flex',
-        '@-max-foo-bar:flex',
-        '@-max-foo-bar/name:flex',
-      ],
-      input,
-    ),
-  ).toEqual('')
 })
 
-test('variant order', async () => {
+test('variant order', () => {
   expect(
-    await run(
+    compileCss(
+      css`
+        @theme {
+          --breakpoint-sm: 640px;
+          --breakpoint-md: 768px;
+          --breakpoint-lg: 1024px;
+          --breakpoint-xl: 1280px;
+          --breakpoint-2xl: 1536px;
+        }
+        @tailwind utilities;
+      `,
       [
         '[&_p]:flex',
         '2xl:flex',
@@ -2654,10 +1676,8 @@ test('variant order', async () => {
         'contrast-less:flex',
         'contrast-more:flex',
         'dark:flex',
-        'data-custom:flex',
         'data-[custom=true]:flex',
         'default:flex',
-        'details-content:flex',
         'disabled:flex',
         'empty:flex',
         'enabled:flex',
@@ -2708,58 +1728,37 @@ test('variant order', async () => {
         'visited:flex',
         'xl:flex',
       ],
-      css`
-        @theme {
-          --breakpoint-sm: 640px;
-          --breakpoint-md: 768px;
-          --breakpoint-lg: 1024px;
-          --breakpoint-xl: 1280px;
-          --breakpoint-2xl: 1536px;
-        }
-        @tailwind utilities;
-      `,
     ),
   ).toMatchInlineSnapshot(`
-    "
-    @layer properties {
-      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
+    ":root {
+      --breakpoint-sm: 640px;
+      --breakpoint-md: 768px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-xl: 1280px;
+      --breakpoint-2xl: 1536px;
     }
 
-    @media (hover: hover) {
-      :is(:where(.group):hover .group-hover\\:flex), :is(:where(.peer):hover ~ .peer-hover\\:flex) {
-        display: flex;
-      }
-    }
-
-    .first-letter\\:flex:first-letter, .first-line\\:flex:first-line {
+    .group-hover\\:flex:is(:where(.group):hover *) {
       display: flex;
     }
 
-    .marker\\:flex ::marker {
+    .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
       display: flex;
     }
 
-    .marker\\:flex::marker {
+    .first-letter\\:flex:first-letter {
       display: flex;
     }
 
-    .marker\\:flex ::-webkit-details-marker {
+    .first-line\\:flex:first-line {
       display: flex;
     }
 
-    .marker\\:flex::-webkit-details-marker {
+    .marker\\:flex ::marker, .marker\\:flex::marker {
       display: flex;
     }
 
-    .selection\\:flex ::selection {
-      display: flex;
-    }
-
-    .selection\\:flex::selection {
+    .selection\\:flex ::selection, .selection\\:flex::selection {
       display: flex;
     }
 
@@ -2767,20 +1766,81 @@ test('variant order', async () => {
       display: flex;
     }
 
-    .placeholder\\:flex::placeholder, .backdrop\\:flex::backdrop {
+    .placeholder\\:flex::placeholder {
       display: flex;
     }
 
-    .details-content\\:flex::details-content {
+    .backdrop\\:flex::backdrop {
       display: flex;
     }
 
-    .before\\:flex:before, .after\\:flex:after {
+    .before\\:flex:before {
       content: var(--tw-content);
       display: flex;
     }
 
-    .first\\:flex:first-child, .last\\:flex:last-child, .only\\:flex:only-child, .odd\\:flex:nth-child(odd), .even\\:flex:nth-child(2n), .first-of-type\\:flex:first-of-type, .last-of-type\\:flex:last-of-type, .only-of-type\\:flex:only-of-type, .visited\\:flex:visited, .target\\:flex:target, .open\\:flex:is([open], :popover-open, :open), .default\\:flex:default, .checked\\:flex:checked, .indeterminate\\:flex:indeterminate, .placeholder-shown\\:flex:placeholder-shown {
+    .after\\:flex:after {
+      content: var(--tw-content);
+      display: flex;
+    }
+
+    .first\\:flex:first-child {
+      display: flex;
+    }
+
+    .last\\:flex:last-child {
+      display: flex;
+    }
+
+    .only\\:flex:only-child {
+      display: flex;
+    }
+
+    .odd\\:flex:nth-child(odd) {
+      display: flex;
+    }
+
+    .even\\:flex:nth-child(2n) {
+      display: flex;
+    }
+
+    .first-of-type\\:flex:first-of-type {
+      display: flex;
+    }
+
+    .last-of-type\\:flex:last-of-type {
+      display: flex;
+    }
+
+    .only-of-type\\:flex:only-of-type {
+      display: flex;
+    }
+
+    .visited\\:flex:visited {
+      display: flex;
+    }
+
+    .target\\:flex:target {
+      display: flex;
+    }
+
+    .open\\:flex[open] {
+      display: flex;
+    }
+
+    .default\\:flex:default {
+      display: flex;
+    }
+
+    .checked\\:flex:checked {
+      display: flex;
+    }
+
+    .indeterminate\\:flex:indeterminate {
+      display: flex;
+    }
+
+    .placeholder-shown\\:flex:placeholder-shown {
       display: flex;
     }
 
@@ -2788,17 +1848,111 @@ test('variant order', async () => {
       display: flex;
     }
 
-    .optional\\:flex:optional, .required\\:flex:required, .valid\\:flex:valid, .invalid\\:flex:invalid, .in-range\\:flex:in-range, .out-of-range\\:flex:out-of-range, .read-only\\:flex:read-only, .empty\\:flex:empty, .focus-within\\:flex:focus-within {
+    .optional\\:flex:optional {
       display: flex;
     }
 
-    @media (hover: hover) {
-      .hover\\:flex:hover {
-        display: flex;
-      }
+    .required\\:flex:required {
+      display: flex;
     }
 
-    .focus\\:flex:focus, .focus-visible\\:flex:focus-visible, .active\\:flex:active, .enabled\\:flex:enabled, .disabled\\:flex:disabled, .has-\\[\\:hover\\]\\:flex:has(:hover), .aria-busy\\:flex[aria-busy="true"], .aria-checked\\:flex[aria-checked="true"], .aria-disabled\\:flex[aria-disabled="true"], .aria-expanded\\:flex[aria-expanded="true"], .aria-hidden\\:flex[aria-hidden="true"], .aria-pressed\\:flex[aria-pressed="true"], .aria-readonly\\:flex[aria-readonly="true"], .aria-required\\:flex[aria-required="true"], .aria-selected\\:flex[aria-selected="true"], .aria-\\[custom\\=true\\]\\:flex[aria-custom="true"], .data-custom\\:flex[data-custom], .data-\\[custom\\=true\\]\\:flex[data-custom="true"] {
+    .valid\\:flex:valid {
+      display: flex;
+    }
+
+    .invalid\\:flex:invalid {
+      display: flex;
+    }
+
+    .in-range\\:flex:in-range {
+      display: flex;
+    }
+
+    .out-of-range\\:flex:out-of-range {
+      display: flex;
+    }
+
+    .read-only\\:flex:read-only {
+      display: flex;
+    }
+
+    .empty\\:flex:empty {
+      display: flex;
+    }
+
+    .focus-within\\:flex:focus-within {
+      display: flex;
+    }
+
+    .hover\\:flex:hover {
+      display: flex;
+    }
+
+    .focus\\:flex:focus {
+      display: flex;
+    }
+
+    .focus-visible\\:flex:focus-visible {
+      display: flex;
+    }
+
+    .active\\:flex:active {
+      display: flex;
+    }
+
+    .enabled\\:flex:enabled {
+      display: flex;
+    }
+
+    .disabled\\:flex:disabled {
+      display: flex;
+    }
+
+    .has-\\[\\:hover\\]\\:flex:has(:hover) {
+      display: flex;
+    }
+
+    .aria-\\[custom\\=true\\]\\:flex[aria-custom="true"] {
+      display: flex;
+    }
+
+    .aria-busy\\:flex[aria-busy="true"] {
+      display: flex;
+    }
+
+    .aria-checked\\:flex[aria-checked="true"] {
+      display: flex;
+    }
+
+    .aria-disabled\\:flex[aria-disabled="true"] {
+      display: flex;
+    }
+
+    .aria-expanded\\:flex[aria-expanded="true"] {
+      display: flex;
+    }
+
+    .aria-hidden\\:flex[aria-hidden="true"] {
+      display: flex;
+    }
+
+    .aria-pressed\\:flex[aria-pressed="true"] {
+      display: flex;
+    }
+
+    .aria-readonly\\:flex[aria-readonly="true"] {
+      display: flex;
+    }
+
+    .aria-required\\:flex[aria-required="true"] {
+      display: flex;
+    }
+
+    .aria-selected\\:flex[aria-selected="true"] {
+      display: flex;
+    }
+
+    .data-\\[custom\\=true\\]\\:flex[data-custom="true"] {
       display: flex;
     }
 
@@ -2832,31 +1986,31 @@ test('variant order', async () => {
       }
     }
 
-    @media (min-width: 640px) {
+    @media (width >= 640px) {
       .sm\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 768px) {
+    @media (width >= 768px) {
       .md\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 1024px) {
+    @media (width >= 1024px) {
       .lg\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 1280px) {
+    @media (width >= 1280px) {
       .xl\\:flex {
         display: flex;
       }
     }
 
-    @media (min-width: 1536px) {
+    @media (width >= 1536px) {
       .\\32 xl\\:flex {
         display: flex;
       }
@@ -2874,7 +2028,11 @@ test('variant order', async () => {
       }
     }
 
-    .ltr\\:flex:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *), .rtl\\:flex:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    .ltr\\:flex:where([dir="ltr"], [dir="ltr"] *) {
+      display: flex;
+    }
+
+    .rtl\\:flex:where([dir="rtl"], [dir="rtl"] *) {
       display: flex;
     }
 
@@ -2904,134 +2062,6 @@ test('variant order', async () => {
       syntax: "*";
       inherits: false;
       initial-value: "";
-    }
-    "
+    }"
   `)
 })
-
-test('variants with the same root are sorted deterministically', async () => {
-  function permute(arr: string[]): string[][] {
-    if (arr.length <= 1) return [arr]
-
-    return arr.flatMap((item, i) =>
-      permute([...arr.slice(0, i), ...arr.slice(i + 1)]).map((permutation) => [
-        item,
-        ...permutation,
-      ]),
-    )
-  }
-
-  let classLists = permute([
-    'data-hover:flex',
-    'data-focus:flex',
-    'data-active:flex',
-    'data-[foo]:flex',
-    'data-[bar]:flex',
-    'data-[baz]:flex',
-  ])
-
-  for (let classList of classLists) {
-    expect(await run(classList)).toMatchInlineSnapshot(`
-      "
-      .data-active\\:flex[data-active], .data-focus\\:flex[data-focus], .data-hover\\:flex[data-hover], .data-\\[bar\\]\\:flex[data-bar], .data-\\[baz\\]\\:flex[data-baz], .data-\\[foo\\]\\:flex[data-foo] {
-        display: flex;
-      }
-      "
-    `)
-  }
-})
-
-test('matchVariant sorts deterministically', async () => {
-  function permute(arr: string[]): string[][] {
-    if (arr.length <= 1) return [arr]
-
-    return arr.flatMap((item, i) =>
-      permute([...arr.slice(0, i), ...arr.slice(i + 1)]).map((permutation) => [
-        item,
-        ...permutation,
-      ]),
-    )
-  }
-
-  let classLists = permute([
-    'is-data:flex',
-    'is-data-foo:flex',
-    'is-data-bar:flex',
-    'is-data-[potato]:flex',
-    'is-data-[sandwich]:flex',
-  ])
-
-  for (let classList of classLists) {
-    expect(
-      await run(classList, '@tailwind utilities; @plugin "./plugin.js";', {
-        async loadModule(_id: string) {
-          return {
-            path: '',
-            base: '/',
-            module: createPlugin(({ matchVariant }) => {
-              matchVariant('is-data', (value) => `&:is([data-${value}])`, {
-                values: {
-                  DEFAULT: 'default',
-                  foo: 'foo',
-                  bar: 'bar',
-                },
-              })
-            }),
-          }
-        },
-      }),
-    ).toMatchInlineSnapshot(`
-      "
-      .is-data\\:flex[data-default], .is-data-foo\\:flex[data-foo], .is-data-bar\\:flex[data-bar], .is-data-\\[potato\\]\\:flex[data-potato], .is-data-\\[sandwich\\]\\:flex[data-sandwich] {
-        display: flex;
-      }
-      "
-    `)
-  }
-})
-
-test('move modifier of compound variant to sub-variant if its also a compound variant', async () => {
-  expect(
-    await run([
-      'not-group-focus/name:flex',
-      'has-group-focus/name:flex',
-      'in-group-focus/name:flex',
-
-      // Keep the `name` on the `group`, don't move it to the `peer` because
-      // that would be a breaking change.
-      'group-peer-focus/name:flex',
-    ]),
-  ).toMatchInlineSnapshot(`
-    "
-    .not-group-focus\\/name\\:flex:not(:is(:where(.group\\/name):focus *)), :is(:is(:where(.peer):focus ~ :where(.group\\/name)) .group-peer-focus\\/name\\:flex), :where(:is(:where(.group\\/name):focus *)) .in-group-focus\\/name\\:flex, .has-group-focus\\/name\\:flex:has(:is(:where(.group\\/name):focus *)) {
-      display: flex;
-    }
-    "
-  `)
-})
-
-test.each([
-  // These are style rules
-  [['.foo'], Compounds.StyleRules],
-  [['&:is(:hover)'], Compounds.StyleRules],
-
-  // These are conditional at rules
-  [['@media foo'], Compounds.AtRules],
-  [['@supports foo'], Compounds.AtRules],
-  [['@container foo'], Compounds.AtRules],
-
-  // These are both
-  [['.foo', '@media foo'], Compounds.StyleRules | Compounds.AtRules],
-
-  // These are never compoundable because:
-  // - Pseudo-elements are not compoundable
-  // - Non-conditional at-rules are not compoundable
-  [['.foo::before'], Compounds.Never],
-  [['@starting-style'], Compounds.Never],
-
-  // The presence of a single non-compoundable selector makes the whole list non-compoundable
-  [['.foo', '@media foo', '.foo::before'], Compounds.Never],
-  [['.foo', '@media foo', '@starting-style'], Compounds.Never],
-])('compoundsForSelectors: %s', (selectors, expected) => {
-  expect(compoundsForSelectors(selectors)).toBe(expected)
-})
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index d2695b4d2..1677f12e6 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/packages/tailwindcss/src/variants.ts
@@ -1,30 +1,7 @@
-import { Features } from '.'
-import {
-  atRoot,
-  atRule,
-  cloneAstNode,
-  context,
-  decl,
-  rule,
-  styleRule,
-  type AstNode,
-  type AtRule,
-  type Rule,
-  type StyleRule,
-} from './ast'
-import * as AttributeSelectorParser from './attribute-selector-parser'
+import { decl, rule, type Rule } from './ast'
 import { type Variant } from './candidate'
-import { applyVariant } from './compile'
-import type { DesignSystem } from './design-system'
 import type { Theme } from './theme'
-import { compareBreakpoints } from './utils/compare-breakpoints'
 import { DefaultMap } from './utils/default-map'
-import { isPositiveInteger } from './utils/infer-data-type'
-import { segment } from './utils/segment'
-import * as ValueParser from './value-parser'
-import { walk, WalkAction } from './walk'
-
-export const IS_VALID_VARIANT_NAME = /^@?[a-z0-9][a-zA-Z0-9_-]*(?<![_-])$/
 
 type VariantFn<T extends Variant['kind']> = (
   rule: Rule,
@@ -33,27 +10,15 @@ type VariantFn<T extends Variant['kind']> = (
 
 type CompareFn = (a: Variant, z: Variant) => number
 
-export const enum Compounds {
-  Never = 0,
-  AtRules = 1 << 0,
-  StyleRules = 1 << 1,
-}
-
 export class Variants {
-  public compareFns = new Map<number, CompareFn>()
-  public variants = new Map<
+  private compareFns = new Map<number, CompareFn>()
+  private variants = new Map<
     string,
     {
       kind: Variant['kind']
       order: number
       applyFn: VariantFn<any>
-
-      // The kind of rules that are allowed in this compound variant
-      compoundsWith: Compounds
-
-      // The kind of rules that are generated by this variant
-      // Determines whether or not a compound variant can use this variant
-      compounds: Compounds
+      compounds: boolean
     }
   >()
 
@@ -72,81 +37,24 @@ export class Variants {
    */
   private lastOrder = 0
 
-  static(
-    name: string,
-    applyFn: VariantFn<'static'>,
-    { compounds, order }: { compounds?: Compounds; order?: number } = {},
-  ) {
-    this.set(name, {
-      kind: 'static',
-      applyFn,
-      compoundsWith: Compounds.Never,
-      compounds: compounds ?? Compounds.StyleRules,
-      order,
-    })
-  }
-
-  fromAst(name: string, ast: AstNode[], designSystem: DesignSystem) {
-    let selectors: string[] = []
-
-    let usesAtVariant = false
-    let usesAtScope = false
-    walk(ast, (node) => {
-      if (node.kind === 'rule') {
-        selectors.push(node.selector)
-      } else if (node.kind === 'at-rule' && node.name === '@variant') {
-        usesAtVariant = true
-      } else if (node.kind === 'at-rule' && node.name !== '@slot') {
-        if (node.name === '@scope') usesAtScope = true
-        selectors.push(`${node.name} ${node.params}`)
-      }
-    })
-
-    this.static(
-      name,
-      (r) => {
-        let body = ast.map(cloneAstNode)
-        if (usesAtVariant) substituteAtVariant(body, designSystem)
-
-        if (usesAtScope) {
-          substituteAtSlot(body, [context({ source: 'user' }, r.nodes)])
-          r.nodes = [context({ source: 'variant' }, body)]
-        } else {
-          substituteAtSlot(body, r.nodes)
-          r.nodes = body
-        }
-      },
-      { compounds: compoundsForSelectors(selectors) },
-    )
+  static(name: string, applyFn: VariantFn<'static'>, { compounds }: { compounds?: boolean } = {}) {
+    this.set(name, { kind: 'static', applyFn, compounds: compounds ?? true })
   }
 
   functional(
     name: string,
     applyFn: VariantFn<'functional'>,
-    { compounds, order }: { compounds?: Compounds; order?: number } = {},
+    { compounds }: { compounds?: boolean } = {},
   ) {
-    this.set(name, {
-      kind: 'functional',
-      applyFn,
-      compoundsWith: Compounds.Never,
-      compounds: compounds ?? Compounds.StyleRules,
-      order,
-    })
+    this.set(name, { kind: 'functional', applyFn, compounds: compounds ?? true })
   }
 
   compound(
     name: string,
-    compoundsWith: Compounds,
     applyFn: VariantFn<'compound'>,
-    { compounds, order }: { compounds?: Compounds; order?: number } = {},
+    { compounds }: { compounds?: boolean } = {},
   ) {
-    this.set(name, {
-      kind: 'compound',
-      applyFn,
-      compoundsWith,
-      compounds: compounds ?? Compounds.StyleRules,
-      order,
-    })
+    this.set(name, { kind: 'compound', applyFn, compounds: compounds ?? true })
   }
 
   group(fn: () => void, compareFn?: CompareFn) {
@@ -168,39 +76,8 @@ export class Variants {
     return this.variants.get(name)?.kind!
   }
 
-  compoundsWith(parent: string, child: string | Variant) {
-    let parentInfo = this.variants.get(parent)
-    let childInfo =
-      typeof child === 'string'
-        ? this.variants.get(child)
-        : child.kind === 'arbitrary'
-          ? // This isn't strictly necessary but it'll allow us to bail quickly
-            // when parsing candidates
-            { compounds: compoundsForSelectors([child.selector]) }
-          : this.variants.get(child.root)
-
-    // One of the variants don't exist
-    if (!parentInfo || !childInfo) return false
-
-    // The parent variant is not a compound variant
-    if (parentInfo.kind !== 'compound') return false
-
-    // The variant `parent` may _compound with_ `child` if `parent` supports the
-    // rules that `child` generates. We instead use static registration metadata
-    // about what `parent` and `child` support instead of trying to apply the
-    // variant at runtime to see if the rules are compatible.
-
-    // The `child` variant cannot compound *ever*
-    if (childInfo.compounds === Compounds.Never) return false
-
-    // The `parent` variant cannot compound *ever*
-    // This shouldn't ever happen because `kind` is `compound`
-    if (parentInfo.compoundsWith === Compounds.Never) return false
-
-    // Any rule that `child` may generate must be supported by `parent`
-    if ((parentInfo.compoundsWith & childInfo.compounds) === 0) return false
-
-    return true
+  compounds(name: string) {
+    return this.variants.get(name)?.compounds!
   }
 
   suggest(name: string, suggestions: () => string[]) {
@@ -217,8 +94,6 @@ export class Variants {
     if (z === null) return 1
 
     if (a.kind === 'arbitrary' && z.kind === 'arbitrary') {
-      // SAFETY: The selectors don't need to be checked for equality as they
-      // are guaranteed to be unique since we sort a list of de-duped variants
       return a.selector < z.selector ? -1 : 1
     } else if (a.kind === 'arbitrary') {
       return 1
@@ -233,51 +108,13 @@ export class Variants {
     if (orderedByVariant !== 0) return orderedByVariant
 
     if (a.kind === 'compound' && z.kind === 'compound') {
-      let order = this.compare(a.variant, z.variant)
-      if (order !== 0) return order
-
-      if (a.modifier && z.modifier) {
-        // SAFETY: The modifiers don't need to be checked for equality as they
-        // are guaranteed to be unique since we sort a list of de-duped variants
-        return a.modifier.value < z.modifier.value ? -1 : 1
-      } else if (a.modifier) {
-        return 1
-      } else if (z.modifier) {
-        return -1
-      } else {
-        return 0
-      }
+      return this.compare(a.variant, z.variant)
     }
 
     let compareFn = this.compareFns.get(aOrder)
-    if (compareFn !== undefined) return compareFn(a, z)
+    if (compareFn === undefined) return 0
 
-    if (a.root !== z.root) return a.root < z.root ? -1 : 1
-
-    // SAFETY: Variants `a` and `z` are both functional at this point. Static
-    // variants are de-duped by the `DefaultMap` and checked earlier.
-    let aValue = (a as Extract<Variant, { kind: 'functional' }>).value
-    let zValue = (z as Extract<Variant, { kind: 'functional' }>).value
-
-    // While no functional variant in core supports a "default" value the parser
-    // will see something like `data:flex` and still parse and store it as a
-    // functional variant even though it actually produces no CSS. This means
-    // that we need to handle the case where the value is `null` here. Even
-    // though _for valid utilities_ this never happens.
-    if (aValue === null) return -1
-    if (zValue === null) return 1
-
-    // Variants with arbitrary values should appear after any with named values
-    if (aValue.kind === 'arbitrary' && zValue.kind !== 'arbitrary') return 1
-    if (aValue.kind !== 'arbitrary' && zValue.kind === 'arbitrary') return -1
-
-    // SAFETY: The values don't need to be checked for equality as they are
-    // guaranteed to be unique since we sort a list of de-duped variants. The
-    // only way this could matter would be when two different variants parse to
-    // the same AST. That is only possible with arbitrary values when spaces are
-    // involved. e.g. `data-[a_b]:flex` and `data-[a ]:flex` but this is not a
-    // concern for us because spaces are not allowed in variant names.
-    return aValue.value < zValue.value ? -1 : 1
+    return compareFn(a, z) || (a.root < z.root ? -1 : 1)
   }
 
   keys() {
@@ -290,36 +127,24 @@ export class Variants {
 
   private set<T extends Variant['kind']>(
     name: string,
-    {
+    { kind, applyFn, compounds }: { kind: T; applyFn: VariantFn<T>; compounds: boolean },
+  ) {
+    // In test mode, throw an error if we accidentally override another variant
+    // by mistake when implementing a new variant that shares the same root
+    // without realizing the definitions need to be merged.
+    if (process.env.NODE_ENV === 'test') {
+      if (this.variants.has(name)) {
+        throw new Error(`Duplicate variant prefix [${name}]`)
+      }
+    }
+
+    this.lastOrder = this.nextOrder()
+    this.variants.set(name, {
       kind,
       applyFn,
+      order: this.lastOrder,
       compounds,
-      compoundsWith,
-      order,
-    }: {
-      kind: T
-      applyFn: VariantFn<T>
-      compoundsWith: Compounds
-      compounds: Compounds
-      order?: number
-    },
-  ) {
-    let existing = this.variants.get(name)
-    if (existing) {
-      Object.assign(existing, { kind, applyFn, compounds })
-    } else {
-      if (order === undefined) {
-        this.lastOrder = this.nextOrder()
-        order = this.lastOrder
-      }
-      this.variants.set(name, {
-        kind,
-        applyFn,
-        order,
-        compoundsWith,
-        compounds,
-      })
-    }
+    })
   }
 
   private nextOrder() {
@@ -327,35 +152,6 @@ export class Variants {
   }
 }
 
-export function compoundsForSelectors(selectors: string[]) {
-  let compounds = Compounds.Never
-
-  for (let sel of selectors) {
-    if (sel[0] === '@') {
-      // Non-conditional at-rules are present so we can't compound
-      if (
-        !sel.startsWith('@media') &&
-        !sel.startsWith('@supports') &&
-        !sel.startsWith('@container')
-      ) {
-        return Compounds.Never
-      }
-
-      compounds |= Compounds.AtRules
-      continue
-    }
-
-    // Pseudo-elements are present so we can't compound
-    if (sel.includes('::')) {
-      return Compounds.Never
-    }
-
-    compounds |= Compounds.StyleRules
-  }
-
-  return compounds
-}
-
 export function createVariants(theme: Theme): Variants {
   // In the future we may want to support returning a rule here if some complex
   // variant requires it. For now pure mutation is sufficient and will be the
@@ -368,10 +164,8 @@ export function createVariants(theme: Theme): Variants {
   function staticVariant(
     name: string,
     selectors: string[],
-    { compounds }: { compounds?: Compounds } = {},
+    { compounds }: { compounds?: boolean } = {},
   ) {
-    compounds = compounds ?? compoundsForSelectors(selectors)
-
     variants.static(
       name,
       (r) => {
@@ -381,331 +175,76 @@ export function createVariants(theme: Theme): Variants {
     )
   }
 
-  staticVariant('*', [':is(& > *)'], { compounds: Compounds.Never })
-  staticVariant('**', [':is(& *)'], { compounds: Compounds.Never })
+  variants.static('force', () => {}, { compounds: false })
+  staticVariant('*', ['& > *'], { compounds: false })
 
-  function negateConditions(ruleName: string, conditions: string[]) {
-    return conditions.map((condition) => {
-      switch (ruleName) {
-        case '@container': {
-          let ast = ValueParser.parse(condition.trim())
-
-          // @container {query}
-          //            ^^^^^^^
-          // ast        0
-          if (ast.length >= 1 && ast[0].kind === 'function') {
-            return `not ${condition}`
-          }
-
-          // @container not   {query}
-          //            ^^^ ^ ^^^^^^^
-          // ast        0   1 2
-          else if (
-            ast.length >= 3 &&
-            ast[0].kind === 'word' &&
-            ast[0].value === 'not' &&
-            ast[2].kind === 'function'
-          ) {
-            // Drop the leading `not` (ast[0]) and separator (ast[1])
-            ast.splice(0, 2)
-
-            return ValueParser.toCss(ast)
-          }
-
-          // @container {name}   not   {query}
-          //            ^^^^^^ ^ ^^^ ^ ^^^^^^^
-          // ast        0      1 2   3 4
-          else if (
-            ast.length >= 5 &&
-            ast[0].kind === 'word' &&
-            ast[2].kind === 'word' &&
-            ast[2].value === 'not' &&
-            ast[4].kind === 'function'
-          ) {
-            // Drop the `not` (ast[2]) and separator (ast[3])
-            ast.splice(2, 2)
-
-            return ValueParser.toCss(ast)
-          }
-
-          // @container {name}   {query}
-          //            ^^^^^^ ^ ^^^^^^^
-          // ast        0      1 2
-          else if (
-            ast.length >= 3 &&
-            ast[0].kind === 'word' &&
-            ast[0].value !== 'not' &&
-            ast[2].kind === 'function'
-          ) {
-            // Inject a separator and a `not`, after the `name` (ast[0])
-            ast.splice(1, 0, { kind: 'separator', value: ' ' }, { kind: 'word', value: 'not' })
-
-            return ValueParser.toCss(ast)
-          }
-
-          // Fallback
-          else {
-            return `not ${condition}`
-          }
-        }
-
-        default: {
-          condition = condition.trim()
-
-          let parts = segment(condition, ' ')
-
-          // @media not {query}
-          // @supports not {query}
-          if (parts[0] === 'not') {
-            return parts.slice(1).join(' ')
-          }
-
-          return `not ${condition}`
-        }
-      }
-    })
-  }
-
-  let conditionalRules = ['@media', '@supports', '@container']
-
-  function negateAtRule(rule: AtRule) {
-    for (let ruleName of conditionalRules) {
-      if (ruleName !== rule.name) continue
-
-      let conditions = segment(rule.params, ',')
-
-      // We don't support things like `@media screen, print` because
-      // the negation would be `@media not screen and print` and we don't
-      // want to deal with that complexity.
-      if (conditions.length > 1) return null
-
-      conditions = negateConditions(rule.name, conditions)
-      return atRule(rule.name, conditions.join(', '))
-    }
-
-    return null
-  }
-
-  function negateSelector(selector: string) {
-    if (selector.includes('::')) return null
-
-    let selectors = segment(selector, ',').map((sel) => {
-      // Replace `&` in target variant with `*`, so variants like `&:hover`
-      // become `&:not(*:hover)`. The `*` will often be optimized away.
-      sel = sel.replaceAll('&', '*')
-
-      return sel
-    })
-
-    return `&:not(${selectors.join(', ')})`
-  }
-
-  variants.compound('not', Compounds.StyleRules | Compounds.AtRules, (ruleNode, variant) => {
-    if (variant.variant.kind === 'arbitrary' && variant.variant.relative) return null
-
-    if (variant.modifier) return null
-
-    let didApply = false
-
-    walk([ruleNode], (node, ctx) => {
-      if (node.kind !== 'rule' && node.kind !== 'at-rule') return WalkAction.Continue
-      if (node.nodes.length > 0) return WalkAction.Continue
-
-      // Throw out any candidates with variants using nested style rules
-      let atRules: AtRule[] = []
-      let styleRules: StyleRule[] = []
-
-      let path = ctx.path()
-      path.push(node)
-
-      for (let node of path) {
-        if (node.kind === 'at-rule') {
-          atRules.push(node)
-        } else if (node.kind === 'rule') {
-          styleRules.push(node)
-        }
-      }
-
-      if (atRules.length > 1) return WalkAction.Stop
-      if (styleRules.length > 1) return WalkAction.Stop
-
-      let rules: Rule[] = []
-
-      for (let node of styleRules) {
-        let selector = negateSelector(node.selector)
-        if (!selector) {
-          didApply = false
-          return WalkAction.Stop
-        }
-
-        rules.push(styleRule(selector, []))
-      }
-
-      for (let node of atRules) {
-        let negatedAtRule = negateAtRule(node)
-        if (!negatedAtRule) {
-          didApply = false
-          return WalkAction.Stop
-        }
-
-        rules.push(negatedAtRule)
-      }
-
-      Object.assign(ruleNode, styleRule('&', rules))
-
-      // Track that the variant was actually applied
-      didApply = true
-
-      return WalkAction.Skip
-    })
-
-    // TODO: Tweak group, peer, has to ignore intermediate `&` selectors (maybe?)
-    if (ruleNode.kind === 'rule' && ruleNode.selector === '&' && ruleNode.nodes.length === 1) {
-      Object.assign(ruleNode, ruleNode.nodes[0])
-    }
-
-    // If the node wasn't modified, this variant is not compatible with
-    // `not-*` so discard the candidate.
-    if (!didApply) return null
+  variants.compound('not', (ruleNode) => {
+    ruleNode.selector = `&:not(${ruleNode.selector.replace('&', '*')})`
   })
 
-  variants.suggest('not', () => {
-    return Array.from(variants.keys()).filter((name) => {
-      return variants.compoundsWith('not', name)
-    })
-  })
-
-  variants.compound('group', Compounds.StyleRules, (ruleNode, variant) => {
-    if (variant.variant.kind === 'arbitrary' && variant.variant.relative) return null
-
+  variants.compound('group', (ruleNode, variant) => {
     // Name the group by appending the modifier to `group` class itself if
     // present.
-    let variantSelector = variant.modifier
-      ? `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}group\\/${variant.modifier.value})`
-      : `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}group)`
+    let groupSelector = variant.modifier
+      ? `:where(.group\\/${variant.modifier.value})`
+      : ':where(.group)'
 
-    let didApply = false
+    // For most variants we rely entirely on CSS nesting to build-up the final
+    // selector, but there is no way to use CSS nesting to make `&` refer to
+    // just the `.group` class the way we'd need to for these variants, so we
+    // need to replace it in the selector ourselves.
+    ruleNode.selector = ruleNode.selector.replace('&', groupSelector)
 
-    walk([ruleNode], (node, ctx) => {
-      if (node.kind !== 'rule') return WalkAction.Continue
-
-      // Throw out any candidates with variants using nested style rules
-      for (let parent of ctx.path()) {
-        if (parent.kind !== 'rule') continue
-
-        didApply = false
-        return WalkAction.Stop
-      }
-
-      // For most variants we rely entirely on CSS nesting to build-up the final
-      // selector, but there is no way to use CSS nesting to make `&` refer to
-      // just the `.group` class the way we'd need to for these variants, so we
-      // need to replace it in the selector ourselves.
-      let selector = node.selector.replaceAll('&', variantSelector)
-
-      // When the selector is a selector _list_ we need to wrap it in `:is`
-      // to make sure the matching behavior is consistent with the original
-      // variant / selector.
-      if (segment(selector, ',').length > 1) {
-        selector = `:is(${selector})`
-      }
-
-      // Put the target inside `:is` so browsers can limit style invalidation to
-      // it when the group changes. Keep `&` instead of the candidate's class so
-      // this also works with `@apply` and variants that change the target.
-      //
-      // The `:is` wrapper also keeps `has-group-*` from anchoring the group
-      // itself to the element carrying the utility.
-      node.selector = `:is(${selector} &)`
-
-      // Track that the variant was actually applied
-      didApply = true
-    })
-
-    // If the node wasn't modified, this variant is not compatible with
-    // `group-*` so discard the candidate.
-    if (!didApply) return null
+    // Use `:where` to make sure the specificity of group variants isn't higher
+    // than the specificity of other variants.
+    ruleNode.selector = `&:is(${ruleNode.selector} *)`
   })
 
   variants.suggest('group', () => {
     return Array.from(variants.keys()).filter((name) => {
-      return variants.compoundsWith('group', name)
+      return variants.get(name)?.compounds ?? false
     })
   })
 
-  variants.compound('peer', Compounds.StyleRules, (ruleNode, variant) => {
-    if (variant.variant.kind === 'arbitrary' && variant.variant.relative) return null
-
+  variants.compound('peer', (ruleNode, variant) => {
     // Name the peer by appending the modifier to `peer` class itself if
     // present.
-    let variantSelector = variant.modifier
-      ? `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}peer\\/${variant.modifier.value})`
-      : `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}peer)`
+    let peerSelector = variant.modifier
+      ? `:where(.peer\\/${variant.modifier.value})`
+      : ':where(.peer)'
 
-    let didApply = false
+    // For most variants we rely entirely on CSS nesting to build-up the final
+    // selector, but there is no way to use CSS nesting to make `&` refer to
+    // just the `.peer` class the way we'd need to for these variants, so we
+    // need to replace it in the selector ourselves.
+    ruleNode.selector = ruleNode.selector.replace('&', peerSelector)
 
-    walk([ruleNode], (node, ctx) => {
-      if (node.kind !== 'rule') return WalkAction.Continue
-
-      // Throw out any candidates with variants using nested style rules
-      for (let parent of ctx.path()) {
-        if (parent.kind !== 'rule') continue
-
-        didApply = false
-        return WalkAction.Stop
-      }
-
-      // For most variants we rely entirely on CSS nesting to build-up the final
-      // selector, but there is no way to use CSS nesting to make `&` refer to
-      // just the `.peer` class the way we'd need to for these variants, so we
-      // need to replace it in the selector ourselves.
-      let selector = node.selector.replaceAll('&', variantSelector)
-
-      // When the selector is a selector _list_ we need to wrap it in `:is`
-      // to make sure the matching behavior is consistent with the original
-      // variant / selector.
-      if (segment(selector, ',').length > 1) {
-        selector = `:is(${selector})`
-      }
-
-      // As with `group`, constrain the target without repeating its selector.
-      node.selector = `:is(${selector} ~ &)`
-
-      // Track that the variant was actually applied
-      didApply = true
-    })
-
-    // If the node wasn't modified, this variant is not compatible with
-    // `peer-*` so discard the candidate.
-    if (!didApply) return null
+    // Use `:where` to make sure the specificity of peer variants isn't higher
+    // than the specificity of other variants.
+    ruleNode.selector = `&:is(${ruleNode.selector} ~ *)`
   })
 
   variants.suggest('peer', () => {
     return Array.from(variants.keys()).filter((name) => {
-      return variants.compoundsWith('peer', name)
+      return variants.get(name)?.compounds ?? false
     })
   })
 
-  staticVariant('first-letter', ['&::first-letter'])
-  staticVariant('first-line', ['&::first-line'])
+  staticVariant('first-letter', ['&::first-letter'], { compounds: false })
+  staticVariant('first-line', ['&::first-line'], { compounds: false })
 
-  staticVariant('marker', [
-    '& *::marker',
-    '&::marker',
-    '& *::-webkit-details-marker',
-    '&::-webkit-details-marker',
-  ])
+  // TODO: Remove alpha vars or no?
+  staticVariant('marker', ['& *::marker', '&::marker'], { compounds: false })
 
-  staticVariant('selection', ['& *::selection', '&::selection'])
-  staticVariant('file', ['&::file-selector-button'])
-  staticVariant('placeholder', ['&::placeholder'])
-  staticVariant('backdrop', ['&::backdrop'])
-  staticVariant('details-content', ['&::details-content'])
+  staticVariant('selection', ['& *::selection', '&::selection'], { compounds: false })
+  staticVariant('file', ['&::file-selector-button'], { compounds: false })
+  staticVariant('placeholder', ['&::placeholder'], { compounds: false })
+  staticVariant('backdrop', ['&::backdrop'], { compounds: false })
 
   {
     function contentProperties() {
-      return atRoot([
-        atRule('@property', '--tw-content', [
+      return rule('@at-root', [
+        rule('@property --tw-content', [
           decl('syntax', '"*"'),
           decl('initial-value', '""'),
           decl('inherits', 'false'),
@@ -716,161 +255,103 @@ export function createVariants(theme: Theme): Variants {
       'before',
       (v) => {
         v.nodes = [
-          styleRule('&::before', [
+          rule('&::before', [
             contentProperties(),
             decl('content', 'var(--tw-content)'),
             ...v.nodes,
           ]),
         ]
       },
-      { compounds: Compounds.Never },
+      { compounds: false },
     )
 
     variants.static(
       'after',
       (v) => {
         v.nodes = [
-          styleRule('&::after', [
-            contentProperties(),
-            decl('content', 'var(--tw-content)'),
-            ...v.nodes,
-          ]),
+          rule('&::after', [contentProperties(), decl('content', 'var(--tw-content)'), ...v.nodes]),
         ]
       },
-      { compounds: Compounds.Never },
+      { compounds: false },
     )
   }
 
-  // Positional
-  staticVariant('first', ['&:first-child'])
-  staticVariant('last', ['&:last-child'])
-  staticVariant('only', ['&:only-child'])
-  staticVariant('odd', ['&:nth-child(odd)'])
-  staticVariant('even', ['&:nth-child(even)'])
-  staticVariant('first-of-type', ['&:first-of-type'])
-  staticVariant('last-of-type', ['&:last-of-type'])
-  staticVariant('only-of-type', ['&:only-of-type'])
+  let pseudos: [name: string, selector: string][] = [
+    // Positional
+    ['first', '&:first-child'],
+    ['last', '&:last-child'],
+    ['only', '&:only-child'],
+    ['odd', '&:nth-child(odd)'],
+    ['even', '&:nth-child(even)'],
+    ['first-of-type', '&:first-of-type'],
+    ['last-of-type', '&:last-of-type'],
+    ['only-of-type', '&:only-of-type'],
 
-  // State
-  staticVariant('visited', ['&:visited'])
-  staticVariant('target', ['&:target'])
-  staticVariant('open', ['&:is([open], :popover-open, :open)'])
+    // State
+    // TODO: Remove alpha vars or no?
+    ['visited', '&:visited'],
 
-  // Forms
-  staticVariant('default', ['&:default'])
-  staticVariant('checked', ['&:checked'])
-  staticVariant('indeterminate', ['&:indeterminate'])
-  staticVariant('placeholder-shown', ['&:placeholder-shown'])
-  staticVariant('autofill', ['&:autofill'])
-  staticVariant('optional', ['&:optional'])
-  staticVariant('required', ['&:required'])
-  staticVariant('valid', ['&:valid'])
-  staticVariant('invalid', ['&:invalid'])
-  staticVariant('user-valid', ['&:user-valid'])
-  staticVariant('user-invalid', ['&:user-invalid'])
-  staticVariant('in-range', ['&:in-range'])
-  staticVariant('out-of-range', ['&:out-of-range'])
-  staticVariant('read-only', ['&:read-only'])
+    ['target', '&:target'],
+    ['open', '&[open]'],
 
-  // Content
-  staticVariant('empty', ['&:empty'])
+    // Forms
+    ['default', '&:default'],
+    ['checked', '&:checked'],
+    ['indeterminate', '&:indeterminate'],
+    ['placeholder-shown', '&:placeholder-shown'],
+    ['autofill', '&:autofill'],
+    ['optional', '&:optional'],
+    ['required', '&:required'],
+    ['valid', '&:valid'],
+    ['invalid', '&:invalid'],
+    ['in-range', '&:in-range'],
+    ['out-of-range', '&:out-of-range'],
+    ['read-only', '&:read-only'],
 
-  // Interactive
-  staticVariant('focus-within', ['&:focus-within'])
-  variants.static('hover', (r) => {
-    r.nodes = [styleRule('&:hover', [atRule('@media', '(hover: hover)', r.nodes)])]
-  })
-  staticVariant('focus', ['&:focus'])
-  staticVariant('focus-visible', ['&:focus-visible'])
-  staticVariant('active', ['&:active'])
-  staticVariant('enabled', ['&:enabled'])
-  staticVariant('disabled', ['&:disabled'])
+    // Content
+    ['empty', '&:empty'],
 
-  staticVariant('inert', ['&:is([inert], [inert] *)'])
+    // Interactive
+    ['focus-within', '&:focus-within'],
+    [
+      'hover',
+      '&:hover',
+      // TODO: Update tests for this:
+      // v => {
+      //   v.nodes = [
+      //     rule('@media (hover: hover) and (pointer: fine)', [
+      //       rule('&:hover', v.nodes),
+      //     ]),
+      //   ]
+      // }
+    ],
+    ['focus', '&:focus'],
+    ['focus-visible', '&:focus-visible'],
+    ['active', '&:active'],
+    ['enabled', '&:enabled'],
+    ['disabled', '&:disabled'],
+  ]
 
-  variants.compound('in', Compounds.StyleRules, (ruleNode, variant) => {
-    if (variant.modifier) return null
+  for (let [key, value] of pseudos) {
+    staticVariant(key, [value])
+  }
 
-    let didApply = false
-
-    walk([ruleNode], (node, ctx) => {
-      if (node.kind !== 'rule') return WalkAction.Continue
-
-      // Throw out any candidates with variants using nested style rules
-      for (let parent of ctx.path()) {
-        if (parent.kind !== 'rule') continue
-
-        didApply = false
-        return WalkAction.Stop
-      }
-
-      // Replace `&` in target variant with `*`, so variants like `&:hover`
-      // become `:where(*:hover) &`. The `*` will often be optimized away.
-      node.selector = `:where(${node.selector.replaceAll('&', '*')}) &`
-
-      // Track that the variant was actually applied
-      didApply = true
-    })
-
-    // If the node wasn't modified, this variant is not compatible with
-    // `in-*` so discard the candidate.
-    if (!didApply) return null
-  })
-
-  variants.suggest('in', () => {
-    return Array.from(variants.keys()).filter((name) => {
-      return variants.compoundsWith('in', name)
-    })
-  })
-
-  variants.compound('has', Compounds.StyleRules, (ruleNode, variant) => {
-    if (variant.modifier) return null
-
-    let didApply = false
-
-    walk([ruleNode], (node, ctx) => {
-      if (node.kind !== 'rule') return WalkAction.Continue
-
-      // Throw out any candidates with variants using nested style rules
-      for (let parent of ctx.path()) {
-        if (parent.kind !== 'rule') continue
-
-        didApply = false
-        return WalkAction.Stop
-      }
-
-      // Replace `&` in target variant with `*`, so variants like `&:hover`
-      // become `&:has(*:hover)`. The `*` will often be optimized away.
-      node.selector = `&:has(${node.selector.replaceAll('&', '*')})`
-
-      // Track that the variant was actually applied
-      didApply = true
-    })
-
-    // If the node wasn't modified, this variant is not compatible with
-    // `has-*` so discard the candidate.
-    if (!didApply) return null
+  variants.compound('has', (ruleNode) => {
+    ruleNode.selector = `&:has(${ruleNode.selector.replace('&', '*')})`
   })
 
   variants.suggest('has', () => {
     return Array.from(variants.keys()).filter((name) => {
-      return variants.compoundsWith('has', name)
+      return variants.get(name)?.compounds ?? false
     })
   })
 
   variants.functional('aria', (ruleNode, variant) => {
-    if (!variant.value || variant.modifier) return null
-
+    if (variant.value === null) return null
     if (variant.value.kind === 'arbitrary') {
-      let selector = `[aria-${quoteAttributeValue(variant.value.value)}]`
-      let parsed = AttributeSelectorParser.parse(selector)
-      if (parsed === null) return null
-      ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)]
+      ruleNode.nodes = [rule(`&[aria-${variant.value.value}]`, ruleNode.nodes)]
     } else {
-      let selector = `[aria-${variant.value.value}="true"]`
-      let parsed = AttributeSelectorParser.parse(selector)
-      if (parsed === null) return null
-      ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)]
+      ruleNode.nodes = [rule(`&[aria-${variant.value.value}="true"]`, ruleNode.nodes)]
     }
   })
 
@@ -887,82 +368,28 @@ export function createVariants(theme: Theme): Variants {
   ])
 
   variants.functional('data', (ruleNode, variant) => {
-    if (!variant.value || variant.modifier) return null
+    if (variant.value === null) return null
 
-    let selector = `[data-${quoteAttributeValue(variant.value.value)}]`
-    let parsed = AttributeSelectorParser.parse(selector)
-    if (parsed === null) return null
-
-    ruleNode.nodes = [styleRule(`&${selector}`, ruleNode.nodes)]
-  })
-
-  variants.functional('nth', (ruleNode, variant) => {
-    if (!variant.value || variant.modifier) return null
-
-    // Only numeric bare values are allowed
-    if (variant.value.kind === 'named' && !isPositiveInteger(variant.value.value)) return null
-
-    ruleNode.nodes = [styleRule(`&:nth-child(${variant.value.value})`, ruleNode.nodes)]
-  })
-
-  variants.functional('nth-last', (ruleNode, variant) => {
-    if (!variant.value || variant.modifier) return null
-
-    // Only numeric bare values are allowed
-    if (variant.value.kind === 'named' && !isPositiveInteger(variant.value.value)) return null
-
-    ruleNode.nodes = [styleRule(`&:nth-last-child(${variant.value.value})`, ruleNode.nodes)]
-  })
-
-  variants.functional('nth-of-type', (ruleNode, variant) => {
-    if (!variant.value || variant.modifier) return null
-
-    // Only numeric bare values are allowed
-    if (variant.value.kind === 'named' && !isPositiveInteger(variant.value.value)) return null
-
-    ruleNode.nodes = [styleRule(`&:nth-of-type(${variant.value.value})`, ruleNode.nodes)]
-  })
-
-  variants.functional('nth-last-of-type', (ruleNode, variant) => {
-    if (!variant.value || variant.modifier) return null
-
-    // Only numeric bare values are allowed
-    if (variant.value.kind === 'named' && !isPositiveInteger(variant.value.value)) return null
-
-    ruleNode.nodes = [styleRule(`&:nth-last-of-type(${variant.value.value})`, ruleNode.nodes)]
+    ruleNode.nodes = [rule(`&[data-${variant.value.value}]`, ruleNode.nodes)]
   })
 
   variants.functional(
     'supports',
     (ruleNode, variant) => {
-      if (!variant.value || variant.modifier) return null
+      if (variant.value === null) return null
 
       let value = variant.value.value
       if (value === null) return null
 
-      // When the value starts with `not()`, `selector()`, `font-tech()`, or
-      // other functions, we can use the value as-is.
-      if (/^[\w-]*\s*\(/.test(value)) {
+      // When `supports-[...]:flex` is used, with `not()`, `and()` or
+      // `selector()`, then we know that want to use this directly as the
+      // supports condition as-is.
+      if (/^\w*\s*\(/.test(value)) {
         // Chrome has a bug where `(condition1)or(condition2)` is not valid, but
         // `(condition1) or (condition2)` is supported.
-        let changed = false
-        let ast = ValueParser.parse(value)
-        walk(ast, (node) => {
-          if (node.kind !== 'function') return
+        let query = value.replace(/\b(and|or|not)\b/g, ' $1 ')
 
-          // Leave selectors as-is, they could contain `selector(a:not(b))`, and
-          // in this case we don't want the space around the `not`.
-          if (node.value === 'selector') return WalkAction.Skip
-
-          if (node.value === 'and' || node.value === 'or' || node.value === 'not') {
-            changed = true
-            node.value = ` ${node.value} `
-          }
-        })
-
-        let query = changed ? ValueParser.toCss(ast) : value
-
-        ruleNode.nodes = [atRule('@supports', query, ruleNode.nodes)]
+        ruleNode.nodes = [rule(`@supports ${query}`, ruleNode.nodes)]
         return
       }
 
@@ -988,22 +415,24 @@ export function createVariants(theme: Theme): Variants {
         value = `(${value})`
       }
 
-      ruleNode.nodes = [atRule('@supports', value, ruleNode.nodes)]
+      ruleNode.nodes = [rule(`@supports ${value}`, ruleNode.nodes)]
     },
-    { compounds: Compounds.AtRules },
+    { compounds: false },
   )
 
-  staticVariant('motion-safe', ['@media (prefers-reduced-motion: no-preference)'])
-  staticVariant('motion-reduce', ['@media (prefers-reduced-motion: reduce)'])
+  staticVariant('motion-safe', ['@media (prefers-reduced-motion: no-preference)'], {
+    compounds: false,
+  })
+  staticVariant('motion-reduce', ['@media (prefers-reduced-motion: reduce)'], { compounds: false })
 
-  staticVariant('contrast-more', ['@media (prefers-contrast: more)'])
-  staticVariant('contrast-less', ['@media (prefers-contrast: less)'])
+  staticVariant('contrast-more', ['@media (prefers-contrast: more)'], { compounds: false })
+  staticVariant('contrast-less', ['@media (prefers-contrast: less)'], { compounds: false })
 
   {
     // Helper to compare variants by their resolved values, this is used by the
     // responsive variants (`sm`, `md`, ...), `min-*`, `max-*` and container
     // queries (`@`).
-    function compareBreakpointVariants(
+    function compareBreakpoints(
       a: Variant,
       z: Variant,
       direction: 'asc' | 'desc',
@@ -1016,7 +445,54 @@ export function createVariants(theme: Theme): Variants {
       let zValue = lookup.get(z)
       if (zValue === null) return direction === 'asc' ? 1 : -1
 
-      return compareBreakpoints(aValue, zValue, direction)
+      if (aValue === zValue) return 0
+
+      // Assumption: when a `(` exists, we are dealing with a CSS function.
+      //
+      // E.g.: `calc(100% - 1rem)`
+      let aIsCssFunction = aValue.indexOf('(')
+      let zIsCssFunction = zValue.indexOf('(')
+
+      let aBucket =
+        aIsCssFunction === -1
+          ? // No CSS function found, bucket by unit instead
+            aValue.replace(/[\d.]+/g, '')
+          : // CSS function found, bucket by function name
+            aValue.slice(0, aIsCssFunction)
+
+      let zBucket =
+        zIsCssFunction === -1
+          ? // No CSS function found, bucket by unit
+            zValue.replace(/[\d.]+/g, '')
+          : // CSS function found, bucket by function name
+            zValue.slice(0, zIsCssFunction)
+
+      let order =
+        // Compare by bucket name
+        (aBucket === zBucket ? 0 : aBucket < zBucket ? -1 : 1) ||
+        // If bucket names are the same, compare by value
+        (direction === 'asc'
+          ? parseInt(aValue) - parseInt(zValue)
+          : parseInt(zValue) - parseInt(aValue))
+
+      // If the groups are the same, and the contents are not numbers, the
+      // `order` will result in `NaN`. In this case, we want to make sorting
+      // stable by falling back to a string comparison.
+      //
+      // This can happen when using CSS functions such as `calc`.
+      //
+      // E.g.:
+      //
+      // - `min-[calc(100%-1rem)]` and `min-[calc(100%-2rem)]`
+      // - `@[calc(100%-1rem)]` and `@[calc(100%-2rem)]`
+      //
+      // In this scenario, we want to alphabetically sort `calc(100%-1rem)` and
+      // `calc(100%-2rem)` to make it deterministic.
+      if (Number.isNaN(order)) {
+        return aValue < zValue ? -1 : 1
+      }
+
+      return order
     }
 
     // Breakpoints
@@ -1025,18 +501,18 @@ export function createVariants(theme: Theme): Variants {
       let resolvedBreakpoints = new DefaultMap((variant: Variant) => {
         switch (variant.kind) {
           case 'static': {
-            return theme.resolveValue(variant.root, ['--breakpoint']) ?? null
+            return breakpoints.get(variant.root) ?? null
           }
 
           case 'functional': {
-            if (!variant.value || variant.modifier) return null
+            if (variant.value === null) return null
 
             let value: string | null = null
 
             if (variant.value.kind === 'arbitrary') {
               value = variant.value.value
             } else if (variant.value.kind === 'named') {
-              value = theme.resolveValue(variant.value.value, ['--breakpoint'])
+              value = theme.resolveBare(variant.value.value, ['--breakpoint'])
             }
 
             if (!value) return null
@@ -1056,16 +532,15 @@ export function createVariants(theme: Theme): Variants {
           variants.functional(
             'max',
             (ruleNode, variant) => {
-              if (variant.modifier) return null
               let value = resolvedBreakpoints.get(variant)
               if (value === null) return null
 
-              ruleNode.nodes = [atRule('@media', `(width < ${value})`, ruleNode.nodes)]
+              ruleNode.nodes = [rule(`@media (width < ${value})`, ruleNode.nodes)]
             },
-            { compounds: Compounds.AtRules },
+            { compounds: false },
           )
         },
-        (a, z) => compareBreakpointVariants(a, z, 'desc', resolvedBreakpoints),
+        (a, z) => compareBreakpoints(a, z, 'desc', resolvedBreakpoints),
       )
 
       variants.suggest(
@@ -1082,25 +557,24 @@ export function createVariants(theme: Theme): Variants {
             variants.static(
               key,
               (ruleNode) => {
-                ruleNode.nodes = [atRule('@media', `(width >= ${value})`, ruleNode.nodes)]
+                ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)]
               },
-              { compounds: Compounds.AtRules },
+              { compounds: false },
             )
           }
 
           variants.functional(
             'min',
             (ruleNode, variant) => {
-              if (variant.modifier) return null
               let value = resolvedBreakpoints.get(variant)
               if (value === null) return null
 
-              ruleNode.nodes = [atRule('@media', `(width >= ${value})`, ruleNode.nodes)]
+              ruleNode.nodes = [rule(`@media (width >= ${value})`, ruleNode.nodes)]
             },
-            { compounds: Compounds.AtRules },
+            { compounds: false },
           )
         },
-        (a, z) => compareBreakpointVariants(a, z, 'asc', resolvedBreakpoints),
+        (a, z) => compareBreakpoints(a, z, 'asc', resolvedBreakpoints),
       )
 
       variants.suggest(
@@ -1110,7 +584,7 @@ export function createVariants(theme: Theme): Variants {
     }
 
     {
-      let widths = theme.namespace('--container')
+      let widths = theme.namespace('--width')
 
       // Container queries
       let resolvedWidths = new DefaultMap((variant: Variant) => {
@@ -1123,7 +597,7 @@ export function createVariants(theme: Theme): Variants {
             if (variant.value.kind === 'arbitrary') {
               value = variant.value.value
             } else if (variant.value.kind === 'named') {
-              value = theme.resolveValue(variant.value.value, ['--container'])
+              value = theme.resolveBare(variant.value.value, ['--width'])
             }
 
             if (!value) return null
@@ -1147,19 +621,18 @@ export function createVariants(theme: Theme): Variants {
               if (value === null) return null
 
               ruleNode.nodes = [
-                atRule(
-                  '@container',
+                rule(
                   variant.modifier
-                    ? `${variant.modifier.value} (width < ${value})`
-                    : `(width < ${value})`,
+                    ? `@container ${variant.modifier.value} (width < ${value})`
+                    : `@container (width < ${value})`,
                   ruleNode.nodes,
                 ),
               ]
             },
-            { compounds: Compounds.AtRules },
+            { compounds: false },
           )
         },
-        (a, z) => compareBreakpointVariants(a, z, 'desc', resolvedWidths),
+        (a, z) => compareBreakpoints(a, z, 'desc', resolvedWidths),
       )
 
       variants.suggest(
@@ -1176,16 +649,15 @@ export function createVariants(theme: Theme): Variants {
               if (value === null) return null
 
               ruleNode.nodes = [
-                atRule(
-                  '@container',
+                rule(
                   variant.modifier
-                    ? `${variant.modifier.value} (width >= ${value})`
-                    : `(width >= ${value})`,
+                    ? `@container ${variant.modifier.value} (width >= ${value})`
+                    : `@container (width >= ${value})`,
                   ruleNode.nodes,
                 ),
               ]
             },
-            { compounds: Compounds.AtRules },
+            { compounds: false },
           )
           variants.functional(
             '@min',
@@ -1194,155 +666,38 @@ export function createVariants(theme: Theme): Variants {
               if (value === null) return null
 
               ruleNode.nodes = [
-                atRule(
-                  '@container',
+                rule(
                   variant.modifier
-                    ? `${variant.modifier.value} (width >= ${value})`
-                    : `(width >= ${value})`,
+                    ? `@container ${variant.modifier.value} (width >= ${value})`
+                    : `@container (width >= ${value})`,
                   ruleNode.nodes,
                 ),
               ]
             },
-            { compounds: Compounds.AtRules },
+            { compounds: false },
           )
         },
-        (a, z) => compareBreakpointVariants(a, z, 'asc', resolvedWidths),
+        (a, z) => compareBreakpoints(a, z, 'asc', resolvedWidths),
       )
 
       variants.suggest(
         '@min',
         () => Array.from(widths.keys()).filter((key) => key !== null) as string[],
       )
-
-      variants.suggest(
-        '@',
-        () => Array.from(widths.keys()).filter((key) => key !== null) as string[],
-      )
     }
   }
 
-  staticVariant('portrait', ['@media (orientation: portrait)'])
-  staticVariant('landscape', ['@media (orientation: landscape)'])
+  staticVariant('portrait', ['@media (orientation: portrait)'], { compounds: false })
+  staticVariant('landscape', ['@media (orientation: landscape)'], { compounds: false })
 
-  staticVariant('ltr', ['&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)'])
-  staticVariant('rtl', ['&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)'])
+  staticVariant('ltr', ['&:where([dir="ltr"], [dir="ltr"] *)'])
+  staticVariant('rtl', ['&:where([dir="rtl"], [dir="rtl"] *)'])
 
-  staticVariant('dark', ['@media (prefers-color-scheme: dark)'])
+  staticVariant('dark', ['@media (prefers-color-scheme: dark)'], { compounds: false })
 
-  staticVariant('starting', ['@starting-style'])
+  staticVariant('print', ['@media print'], { compounds: false })
 
-  staticVariant('print', ['@media print'])
-
-  staticVariant('forced-colors', ['@media (forced-colors: active)'])
-
-  staticVariant('inverted-colors', ['@media (inverted-colors: inverted)'])
-
-  staticVariant('pointer-none', ['@media (pointer: none)'])
-  staticVariant('pointer-coarse', ['@media (pointer: coarse)'])
-  staticVariant('pointer-fine', ['@media (pointer: fine)'])
-  staticVariant('any-pointer-none', ['@media (any-pointer: none)'])
-  staticVariant('any-pointer-coarse', ['@media (any-pointer: coarse)'])
-  staticVariant('any-pointer-fine', ['@media (any-pointer: fine)'])
-
-  staticVariant('noscript', ['@media (scripting: none)'])
+  staticVariant('forced-colors', ['@media (forced-colors: active)'], { compounds: false })
 
   return variants
 }
-
-function quoteAttributeValue(input: string) {
-  if (input.includes('=')) {
-    let [attribute, ...after] = segment(input, '=')
-    let value = after.join('=').trim()
-
-    // If the value is already quoted, skip.
-    if (value[0] === "'" || value[0] === '"') {
-      return input
-    }
-
-    // Handle case sensitivity flags on unescaped values
-    if (value.length > 1) {
-      let trailingCharacter = value[value.length - 1]
-      if (
-        value[value.length - 2] === ' ' &&
-        (trailingCharacter === 'i' ||
-          trailingCharacter === 'I' ||
-          trailingCharacter === 's' ||
-          trailingCharacter === 'S')
-      ) {
-        return `${attribute}="${value.slice(0, -2)}" ${trailingCharacter}`
-      }
-    }
-
-    return `${attribute}="${value}"`
-  }
-
-  return input
-}
-
-export function substituteAtSlot(ast: AstNode[], nodes: AstNode[]) {
-  walk(ast, (node) => {
-    // Replace `@slot` with rule nodes
-    if (node.kind === 'at-rule' && node.name === '@slot') {
-      return WalkAction.ReplaceSkip(nodes)
-    }
-
-    // Wrap `@keyframes` and `@property` in `AtRoot` nodes
-    else if (node.kind === 'at-rule' && (node.name === '@keyframes' || node.name === '@property')) {
-      Object.assign(node, atRoot([atRule(node.name, node.params, node.nodes)]))
-      return WalkAction.Skip
-    }
-  })
-}
-
-export function substituteAtVariant(ast: AstNode[], designSystem: DesignSystem): Features {
-  let features = Features.None
-  walk(ast, (variantNode) => {
-    if (variantNode.kind !== 'at-rule' || variantNode.name !== '@variant') return
-
-    let nodes: AstNode[] = []
-    let compoundVariants = segment(variantNode.params, ',')
-    for (let [idx, compoundVariant] of compoundVariants.entries()) {
-      // Starting with the `&` rule node
-      //
-      // Only clone the nodes when we have multiple compound variants to deal
-      // with. The last one can use the original nodes. We do need unique AST
-      // nodes for sourcemap `dst` location information.
-      let node = styleRule(
-        '&',
-        idx === compoundVariants.length - 1
-          ? variantNode.nodes
-          : variantNode.nodes.map(cloneAstNode),
-      )
-
-      let stackedVariants = segment(compoundVariant, ':')
-      for (let i = stackedVariants.length - 1; i >= 0; --i) {
-        let variant = stackedVariants[i].trim()
-
-        if (!variant) {
-          throw new Error(`Cannot use \`@variant\` with empty variant`)
-        }
-
-        let variantAst = designSystem.parseVariant(variant)
-        if (variantAst === null) {
-          throw new Error(`Cannot use \`@variant\` with unknown variant: ${variant}`)
-        }
-
-        let result = applyVariant(node, variantAst, designSystem.variants)
-        if (result === null) {
-          throw new Error(`Cannot use \`@variant\` with variant: ${variant}`)
-        }
-      }
-
-      if (node.selector === '&') {
-        nodes.push(...node.nodes)
-      } else {
-        nodes.push(node)
-      }
-    }
-
-    // Update the variant at-rule node, to be the `&` rule node
-    features |= Features.Variants
-    return WalkAction.Replace(nodes)
-  })
-  return features
-}
diff --git a/packages/tailwindcss/src/walk.test.ts b/packages/tailwindcss/src/walk.test.ts
deleted file mode 100644
index 794d7e629..000000000
--- a/packages/tailwindcss/src/walk.test.ts
+++ /dev/null
@@ -1,1598 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { decl, rule, toCss, type AstNode as CSSAstNode } from './ast'
-import { walk, WalkAction } from './walk'
-
-type AstNode = { kind: string } | { kind: string; nodes: AstNode[] }
-
-describe('AST Enter (function)', () => {
-  test('visit all nodes in an AST', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'])
-  })
-
-  test('visit all nodes in an AST and calculate their path', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let paths: string[] = []
-    walk(ast, (node, ctx) => {
-      let path = ctx.path().map((n) => n.kind)
-      if (path.length === 0) path.unshift('ø')
-      path.push(node.kind)
-
-      paths.push(path.join(' → ') || 'ø')
-    })
-
-    expect(`\n${paths.join('\n')}\n`).toMatchInlineSnapshot(`
-      "
-      ø → a
-      a → b
-      a → b → c
-      a → d
-      a → d → e
-      a → d → e → f
-      a → g
-      a → g → h
-      ø → i
-      "
-    `)
-  })
-
-  test("skip a node's children (first node)", () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'b') {
-        return WalkAction.Skip
-      }
-    })
-
-    expect(visited).toEqual(['a', 'b', 'd', 'e', 'f', 'g', 'h', 'i'])
-  })
-
-  test("skip a node's children (middle node)", () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'd') {
-        return WalkAction.Skip
-      }
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'g', 'h', 'i'])
-  })
-
-  test("skip a node's children (last node)", () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'g') {
-        return WalkAction.Skip
-      }
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'i'])
-  })
-
-  test('stop entirely', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'd') {
-        return WalkAction.Stop
-      }
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd'])
-  })
-
-  test('replace a node, and visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'd') {
-        return WalkAction.Replace([
-          { kind: 'e1', nodes: [{ kind: 'f1' }] },
-          { kind: 'e2', nodes: [{ kind: 'f2' }] },
-        ])
-      }
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-  })
-
-  test('replace a node, and not visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'd') {
-        return WalkAction.ReplaceSkip([
-          { kind: 'e1', nodes: [{ kind: 'f1' }] },
-          { kind: 'e2', nodes: [{ kind: 'f2' }] },
-        ])
-      }
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'g', 'h', 'i'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-  })
-
-  test('replace a leaf node, and visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'f') {
-        return WalkAction.Replace([
-          { kind: 'foo1', nodes: [{ kind: 'bar1' }] },
-          { kind: 'foo2', nodes: [{ kind: 'bar2' }] },
-        ])
-      }
-    })
-
-    expect(visited).toEqual([
-      'a',
-      'b',
-      'c',
-      'd',
-      'e',
-      'f',
-      'foo1',
-      'bar1',
-      'foo2',
-      'bar2',
-      'g',
-      'h',
-      'i',
-    ])
-  })
-
-  test('replace a leaf node, and not visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'f') {
-        return WalkAction.ReplaceSkip([
-          { kind: 'foo1', nodes: [{ kind: 'bar1' }] },
-          { kind: 'foo2', nodes: [{ kind: 'bar2' }] },
-        ])
-      }
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual([
-      'a',
-      'b',
-      'c',
-      'd',
-      'e',
-      'foo1',
-      'bar1',
-      'foo2',
-      'bar2',
-      'g',
-      'h',
-      'i',
-    ])
-  })
-
-  test('replace a node, and stop the walk entirely', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, (node) => {
-      visited.push(node.kind)
-
-      if (node.kind === 'd') {
-        return WalkAction.ReplaceStop([
-          { kind: 'e1', nodes: [{ kind: 'f1' }] },
-          { kind: 'e2', nodes: [{ kind: 'f2' }] },
-        ])
-      }
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-  })
-})
-
-describe('AST Enter (obj)', () => {
-  test('visit all nodes in an AST', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'])
-  })
-
-  test('visit all nodes in an AST and calculate their path', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let paths: string[] = []
-    walk(ast, {
-      enter(node, ctx) {
-        let path = ctx.path().map((n) => n.kind)
-        if (path.length === 0) path.unshift('ø')
-        path.push(node.kind)
-
-        paths.push(path.join(' → ') || 'ø')
-      },
-    })
-
-    expect(`\n${paths.join('\n')}\n`).toMatchInlineSnapshot(`
-      "
-      ø → a
-      a → b
-      a → b → c
-      a → d
-      a → d → e
-      a → d → e → f
-      a → g
-      a → g → h
-      ø → i
-      "
-    `)
-  })
-
-  test("skip a node's children (first node)", () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'b') {
-          return WalkAction.Skip
-        }
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'd', 'e', 'f', 'g', 'h', 'i'])
-  })
-
-  test("skip a node's children (middle node)", () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'd') {
-          return WalkAction.Skip
-        }
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'g', 'h', 'i'])
-  })
-
-  test("skip a node's children (last node)", () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'g') {
-          return WalkAction.Skip
-        }
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'i'])
-  })
-
-  test('stop entirely', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'd') {
-          return WalkAction.Stop
-        }
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd'])
-  })
-
-  test('replace a node, and visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'd') {
-          return WalkAction.Replace([
-            { kind: 'e1', nodes: [{ kind: 'f1' }] },
-            { kind: 'e2', nodes: [{ kind: 'f2' }] },
-          ])
-        }
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-  })
-
-  test('replace a node, and not visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'd') {
-          return WalkAction.ReplaceSkip([
-            { kind: 'e1', nodes: [{ kind: 'f1' }] },
-            { kind: 'e2', nodes: [{ kind: 'f2' }] },
-          ])
-        }
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'g', 'h', 'i'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-  })
-
-  test('replace a leaf node, and visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'f') {
-          return WalkAction.Replace([
-            { kind: 'foo1', nodes: [{ kind: 'bar1' }] },
-            { kind: 'foo2', nodes: [{ kind: 'bar2' }] },
-          ])
-        }
-      },
-    })
-
-    expect(visited).toEqual([
-      'a',
-      'b',
-      'c',
-      'd',
-      'e',
-      'f',
-      'foo1',
-      'bar1',
-      'foo2',
-      'bar2',
-      'g',
-      'h',
-      'i',
-    ])
-  })
-
-  test('replace a leaf node, and not visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'f') {
-          return WalkAction.ReplaceSkip([
-            { kind: 'foo1', nodes: [{ kind: 'bar1' }] },
-            { kind: 'foo2', nodes: [{ kind: 'bar2' }] },
-          ])
-        }
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual([
-      'a',
-      'b',
-      'c',
-      'd',
-      'e',
-      'foo1',
-      'bar1',
-      'foo2',
-      'bar2',
-      'g',
-      'h',
-      'i',
-    ])
-  })
-
-  test('replace a node, and stop the walk entirely', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'd') {
-          return WalkAction.ReplaceStop([
-            { kind: 'e1', nodes: [{ kind: 'f1' }] },
-            { kind: 'e2', nodes: [{ kind: 'f2' }] },
-          ])
-        }
-      },
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-  })
-})
-
-describe('AST Exit (obj)', () => {
-  test('visit all nodes in an AST', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      exit(node) {
-        visited.push(node.kind)
-      },
-    })
-
-    expect(visited).toEqual(['c', 'b', 'f', 'e', 'd', 'h', 'g', 'a', 'i'])
-  })
-
-  test('visit all nodes in an AST and calculate their path', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let paths: string[] = []
-    walk(ast, {
-      exit(node, ctx) {
-        let path = ctx.path().map((n) => n.kind)
-        if (path.length === 0) path.unshift('ø')
-        path.push(node.kind)
-
-        paths.push(path.join(' → ') || 'ø')
-      },
-    })
-
-    expect(`\n${paths.join('\n')}\n`).toMatchInlineSnapshot(`
-      "
-      a → b → c
-      a → b
-      a → d → e → f
-      a → d → e
-      a → d
-      a → g → h
-      a → g
-      ø → a
-      ø → i
-      "
-    `)
-  })
-
-  test('stop entirely', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      exit(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'd') {
-          return WalkAction.Stop
-        }
-      },
-    })
-
-    expect(visited).toEqual(['c', 'b', 'f', 'e', 'd'])
-  })
-
-  test('replace a node, and not visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      exit(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'd') {
-          return WalkAction.Replace([
-            { kind: 'e1', nodes: [{ kind: 'f1' }] },
-            { kind: 'e2', nodes: [{ kind: 'f2' }] },
-          ])
-        }
-      },
-    })
-
-    expect(visited).toEqual(['c', 'b', 'f', 'e', 'd', 'h', 'g', 'a', 'i'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-  })
-
-  test('replace a leaf node, and not visit the replacements', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      exit(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'f') {
-          return WalkAction.Replace([{ kind: 'f1' }, { kind: 'f2' }])
-        }
-      },
-    })
-
-    expect(visited).toEqual(['c', 'b', 'f', 'e', 'd', 'h', 'g', 'a', 'i'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f1', 'f2', 'g', 'h', 'i'])
-  })
-
-  test('replace a node, and stop the walk entirely', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      exit(node) {
-        visited.push(node.kind)
-
-        if (node.kind === 'd') {
-          return WalkAction.ReplaceStop([
-            { kind: 'e1', nodes: [{ kind: 'f1' }] },
-            { kind: 'e2', nodes: [{ kind: 'f2' }] },
-          ])
-        }
-      },
-    })
-
-    expect(visited).toEqual(['c', 'b', 'f', 'e', 'd'])
-
-    // Let's walk the mutated AST again, to ensure that we properly replaced the
-    // node with new nodes.
-    visited.splice(0)
-    walk(ast, (node) => {
-      visited.push(node.kind)
-    })
-
-    expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-  })
-})
-
-describe('AST Enter & Exit', () => {
-  test('visit all nodes in an AST', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let visited: string[] = []
-    walk(ast, {
-      enter(node, ctx) {
-        expect(ctx.index).toEqual(ctx.siblings.indexOf(node))
-        visited.push(`${'  '.repeat(ctx.depth)} Enter(${node.kind} @ ${ctx.index})`)
-      },
-      exit(node, ctx) {
-        expect(ctx.index).toEqual(ctx.siblings.indexOf(node))
-        visited.push(`${'  '.repeat(ctx.depth)} Exit(${node.kind} @ ${ctx.index})`)
-      },
-    })
-
-    expect(`\n${visited.join('\n')}\n`).toMatchInlineSnapshot(`
-      "
-       Enter(a @ 0)
-         Enter(b @ 0)
-           Enter(c @ 0)
-           Exit(c @ 0)
-         Exit(b @ 0)
-         Enter(d @ 1)
-           Enter(e @ 0)
-             Enter(f @ 0)
-             Exit(f @ 0)
-           Exit(e @ 0)
-         Exit(d @ 1)
-         Enter(g @ 2)
-           Enter(h @ 0)
-           Exit(h @ 0)
-         Exit(g @ 2)
-       Exit(a @ 0)
-       Enter(i @ 1)
-       Exit(i @ 1)
-      "
-    `)
-  })
-
-  test('visit all nodes in an AST and calculate their path', () => {
-    let ast: AstNode[] = [
-      {
-        kind: 'a',
-        nodes: [
-          { kind: 'b', nodes: [{ kind: 'c' }] },
-          { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-          { kind: 'g', nodes: [{ kind: 'h' }] },
-        ],
-      },
-      { kind: 'i' },
-    ]
-
-    let paths: string[] = []
-    walk(ast, {
-      enter(node, ctx) {
-        let path = ctx.path().map((n) => n.kind)
-        if (path.length === 0) path.unshift('ø')
-        path.push(node.kind)
-
-        paths.push(`Enter(${path.join(' → ') || 'ø'})`)
-      },
-      exit(node, ctx) {
-        let path = ctx.path().map((n) => n.kind)
-        if (path.length === 0) path.unshift('ø')
-        path.push(node.kind)
-
-        paths.push(`Exit(${path.join(' → ') || 'ø'})`)
-      },
-    })
-
-    expect(`\n${paths.join('\n')}\n`).toMatchInlineSnapshot(`
-      "
-      Enter(ø → a)
-      Enter(a → b)
-      Enter(a → b → c)
-      Exit(a → b → c)
-      Exit(a → b)
-      Enter(a → d)
-      Enter(a → d → e)
-      Enter(a → d → e → f)
-      Exit(a → d → e → f)
-      Exit(a → d → e)
-      Exit(a → d)
-      Enter(a → g)
-      Enter(a → g → h)
-      Exit(a → g → h)
-      Exit(a → g)
-      Exit(ø → a)
-      Enter(ø → i)
-      Exit(ø → i)
-      "
-    `)
-  })
-
-  test('"real" world use case', () => {
-    let ast: CSSAstNode[] = [
-      rule('.example', [
-        decl('margin-top', '12px'),
-        decl('padding', '8px'),
-        decl('margin', '16px 18px'),
-        decl('colors', 'red'),
-      ]),
-    ]
-
-    walk(ast, {
-      enter(node) {
-        // Expand `margin` shorthand into multiple properties
-        if (node.kind === 'declaration' && node.property === 'margin' && node.value) {
-          let [y, x] = node.value.split(' ')
-          return WalkAction.Replace([
-            decl('margin-top', y),
-            decl('margin-bottom', y),
-            decl('margin-left', x),
-            decl('margin-right', x),
-          ])
-        }
-
-        // These properties should not be uppercased, so skip them
-        else if (node.kind === 'declaration' && node.property === 'colors' && node.value) {
-          return WalkAction.ReplaceSkip([
-            decl('color', node.value),
-            decl('background-color', node.value),
-            decl('border-color', node.value),
-          ])
-        }
-
-        // Make all properties uppercase (this should see the expanded margin properties as well)
-        // but it should not see the `color` property as we skipped it above.
-        else if (node.kind === 'declaration') {
-          node.property = node.property.toUpperCase()
-        }
-      },
-
-      exit(node) {
-        // Sort declarations alphabetically within a rule (this should see the
-        // nodes after transformations in `enter` phase)
-        if (node.kind === 'rule') {
-          node.nodes.sort((a, z) => {
-            if (a.kind === 'declaration' && z.kind === 'declaration') {
-              return a.property.localeCompare(z.property)
-            }
-
-            // Stable sort
-            return 0
-          })
-        }
-      },
-    })
-
-    expect(toCss(ast)).toMatchInlineSnapshot(`
-      ".example {
-        background-color: red;
-        border-color: red;
-        color: red;
-        MARGIN-BOTTOM: 16px;
-        MARGIN-LEFT: 18px;
-        MARGIN-RIGHT: 18px;
-        MARGIN-TOP: 12px;
-        MARGIN-TOP: 16px;
-        PADDING: 8px;
-      }
-      "
-    `)
-  })
-
-  describe('enter phase', () => {
-    test('visit all nodes in an AST', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'])
-    })
-
-    test("skip a node's children (first node)", () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'b') {
-            return WalkAction.Skip
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'd', 'e', 'f', 'g', 'h', 'i'])
-    })
-
-    test("skip a node's children (middle node)", () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'd') {
-            return WalkAction.Skip
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'd', 'g', 'h', 'i'])
-    })
-
-    test("skip a node's children (last node)", () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'g') {
-            return WalkAction.Skip
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'i'])
-    })
-
-    test('stop entirely', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'd') {
-            return WalkAction.Stop
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'd'])
-    })
-
-    test('replace a node, and visit the replacements', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'd') {
-            return WalkAction.Replace([
-              { kind: 'e1', nodes: [{ kind: 'f1' }] },
-              { kind: 'e2', nodes: [{ kind: 'f2' }] },
-            ])
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'd', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-    })
-
-    test('replace a node, and not visit the replacements', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'd') {
-            return WalkAction.ReplaceSkip([
-              { kind: 'e1', nodes: [{ kind: 'f1' }] },
-              { kind: 'e2', nodes: [{ kind: 'f2' }] },
-            ])
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'd', 'g', 'h', 'i'])
-
-      // Let's walk the mutated AST again, to ensure that we properly replaced the
-      // node with new nodes.
-      visited.splice(0)
-      walk(ast, (node) => {
-        visited.push(node.kind)
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-    })
-
-    test('replace a leaf node, and visit the replacements', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'f') {
-            return WalkAction.Replace([
-              { kind: 'foo1', nodes: [{ kind: 'bar1' }] },
-              { kind: 'foo2', nodes: [{ kind: 'bar2' }] },
-            ])
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual([
-        'a',
-        'b',
-        'c',
-        'd',
-        'e',
-        'f',
-        'foo1',
-        'bar1',
-        'foo2',
-        'bar2',
-        'g',
-        'h',
-        'i',
-      ])
-    })
-
-    test('replace a leaf node, and not visit the replacements', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'f') {
-            return WalkAction.ReplaceSkip([
-              { kind: 'foo1', nodes: [{ kind: 'bar1' }] },
-              { kind: 'foo2', nodes: [{ kind: 'bar2' }] },
-            ])
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'])
-
-      // Let's walk the mutated AST again, to ensure that we properly replaced the
-      // node with new nodes.
-      visited.splice(0)
-      walk(ast, (node) => {
-        visited.push(node.kind)
-      })
-
-      expect(visited).toEqual([
-        'a',
-        'b',
-        'c',
-        'd',
-        'e',
-        'foo1',
-        'bar1',
-        'foo2',
-        'bar2',
-        'g',
-        'h',
-        'i',
-      ])
-    })
-
-    test('replace a node, and stop the walk entirely', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'd') {
-            return WalkAction.ReplaceStop([
-              { kind: 'e1', nodes: [{ kind: 'f1' }] },
-              { kind: 'e2', nodes: [{ kind: 'f2' }] },
-            ])
-          }
-        },
-        exit() {},
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'd'])
-
-      // Let's walk the mutated AST again, to ensure that we properly replaced the
-      // node with new nodes.
-      visited.splice(0)
-      walk(ast, (node) => {
-        visited.push(node.kind)
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-    })
-  })
-
-  describe('exit phase', () => {
-    test('visit all nodes in an AST', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter() {},
-        exit(node) {
-          visited.push(node.kind)
-        },
-      })
-
-      expect(visited).toEqual(['c', 'b', 'f', 'e', 'd', 'h', 'g', 'a', 'i'])
-    })
-
-    test('stop entirely', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter() {},
-        exit(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'd') {
-            return WalkAction.Stop
-          }
-        },
-      })
-
-      expect(visited).toEqual(['c', 'b', 'f', 'e', 'd'])
-    })
-
-    test('replace a node, and not visit the replacements', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter() {},
-        exit(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'd') {
-            return WalkAction.Replace([
-              { kind: 'e1', nodes: [{ kind: 'f1' }] },
-              { kind: 'e2', nodes: [{ kind: 'f2' }] },
-            ])
-          }
-        },
-      })
-
-      expect(visited).toEqual(['c', 'b', 'f', 'e', 'd', 'h', 'g', 'a', 'i'])
-
-      // Let's walk the mutated AST again, to ensure that we properly replaced the
-      // node with new nodes.
-      visited.splice(0)
-      walk(ast, (node) => {
-        visited.push(node.kind)
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-    })
-
-    test('replace a node, and stop the walk entirely', () => {
-      let ast: AstNode[] = [
-        {
-          kind: 'a',
-          nodes: [
-            { kind: 'b', nodes: [{ kind: 'c' }] },
-            { kind: 'd', nodes: [{ kind: 'e', nodes: [{ kind: 'f' }] }] },
-            { kind: 'g', nodes: [{ kind: 'h' }] },
-          ],
-        },
-        { kind: 'i' },
-      ]
-
-      let visited: string[] = []
-      walk(ast, {
-        enter() {},
-        exit(node) {
-          visited.push(node.kind)
-
-          if (node.kind === 'd') {
-            return WalkAction.ReplaceStop([
-              { kind: 'e1', nodes: [{ kind: 'f1' }] },
-              { kind: 'e2', nodes: [{ kind: 'f2' }] },
-            ])
-          }
-        },
-      })
-
-      expect(visited).toEqual(['c', 'b', 'f', 'e', 'd'])
-
-      // Let's walk the mutated AST again, to ensure that we properly replaced the
-      // node with new nodes.
-      visited.splice(0)
-      walk(ast, (node) => {
-        visited.push(node.kind)
-      })
-
-      expect(visited).toEqual(['a', 'b', 'c', 'e1', 'f1', 'e2', 'f2', 'g', 'h', 'i'])
-    })
-  })
-})
diff --git a/packages/tailwindcss/src/walk.ts b/packages/tailwindcss/src/walk.ts
deleted file mode 100644
index 2c268a7bd..000000000
--- a/packages/tailwindcss/src/walk.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-const enum WalkKind {
-  Continue,
-  Skip,
-  Stop,
-  Replace,
-  ReplaceSkip,
-  ReplaceStop,
-}
-
-export const WalkAction = {
-  Continue: { kind: WalkKind.Continue } as const,
-  Skip: { kind: WalkKind.Skip } as const,
-  Stop: { kind: WalkKind.Stop } as const,
-  Replace: <T>(nodes: T | T[]) =>
-    ({ kind: WalkKind.Replace, nodes: Array.isArray(nodes) ? nodes : [nodes] }) as const,
-  ReplaceSkip: <T>(nodes: T | T[]) =>
-    ({ kind: WalkKind.ReplaceSkip, nodes: Array.isArray(nodes) ? nodes : [nodes] }) as const,
-  ReplaceStop: <T>(nodes: T | T[]) =>
-    ({ kind: WalkKind.ReplaceStop, nodes: Array.isArray(nodes) ? nodes : [nodes] }) as const,
-} as const
-
-type WalkAction = typeof WalkAction
-type WalkResult<T> =
-  | WalkAction['Continue']
-  | WalkAction['Skip']
-  | WalkAction['Stop']
-  | ReturnType<typeof WalkAction.Replace<T>>
-  | ReturnType<typeof WalkAction.ReplaceSkip<T>>
-  | ReturnType<typeof WalkAction.ReplaceStop<T>>
-
-type EnterResult<T> = WalkResult<T>
-type ExitResult<T> = Exclude<WalkResult<T>, { kind: WalkKind.Skip }>
-
-type Parent<T> = T & { nodes: T[] }
-
-export interface VisitContext<T> {
-  parent: Parent<T> | null
-  depth: number
-  index: number
-  siblings: T[]
-  path: () => T[]
-}
-
-export function walk<T extends object>(
-  ast: T[],
-  hooks:
-    | ((node: T, ctx: VisitContext<T>) => EnterResult<T> | void) // Old API, enter only
-    | {
-        enter?: (node: T, ctx: VisitContext<T>) => EnterResult<T> | void
-        exit?: (node: T, ctx: VisitContext<T>) => ExitResult<T> | void
-      },
-): void {
-  if (typeof hooks === 'function') walkImplementation(ast, hooks)
-  else walkImplementation(ast, hooks.enter, hooks.exit)
-}
-
-interface Stack<T> {
-  value: T
-  prev: Stack<T> | null
-}
-
-function walkImplementation<T extends { nodes?: T[] }>(
-  ast: T[],
-  enter: (node: T, ctx: VisitContext<T>) => EnterResult<T> | void = () => WalkAction.Continue,
-  exit: (node: T, ctx: VisitContext<T>) => ExitResult<T> | void = () => WalkAction.Continue,
-) {
-  type StackFrame = [nodes: T[], offset: number, parent: Parent<T> | null]
-  let stack: Stack<StackFrame> | null = { value: [ast, 0, null], prev: null }
-
-  let ctx: VisitContext<T> = {
-    parent: null,
-    depth: 0,
-    index: 0,
-    siblings: ast,
-    path() {
-      let path: T[] = []
-
-      let frames: Stack<StackFrame> | null = stack
-
-      while (frames) {
-        let parent = frames.value[2]
-        if (parent) path.push(parent)
-        frames = frames.prev
-      }
-
-      path.reverse()
-
-      return path
-    },
-  }
-
-  while (stack !== null) {
-    let frame = stack.value
-    let nodes = frame[0]
-    let offset = frame[1]
-    let parent = frame[2]
-
-    // Done with this level
-    if (offset >= nodes.length) {
-      stack = stack.prev
-      ctx.depth -= 1
-      continue
-    }
-
-    ctx.parent = parent
-    ctx.siblings = nodes
-
-    // Enter phase (offsets are positive)
-    if (offset >= 0) {
-      ctx.index = offset
-
-      let node = nodes[offset]
-      let result = enter(node, ctx) ?? WalkAction.Continue
-
-      switch (result.kind) {
-        case WalkKind.Continue: {
-          if (node.nodes && node.nodes.length > 0) {
-            ctx.depth += 1
-            stack = {
-              value: [node.nodes, 0, node as Parent<T>],
-              prev: stack,
-            }
-          }
-
-          frame[1] = ~offset // Prepare for exit phase, same offset
-          continue
-        }
-
-        case WalkKind.Stop:
-          return // Stop immediately
-
-        case WalkKind.Skip: {
-          frame[1] = ~offset // Prepare for exit phase, same offset
-          continue
-        }
-
-        case WalkKind.Replace: {
-          nodes.splice(offset, 1, ...result.nodes)
-          continue // Re-process at same offset
-        }
-
-        case WalkKind.ReplaceStop: {
-          nodes.splice(offset, 1, ...result.nodes)
-          return // Stop immediately
-        }
-
-        case WalkKind.ReplaceSkip: {
-          nodes.splice(offset, 1, ...result.nodes)
-          frame[1] += result.nodes.length // Advance to next sibling past replacements
-          continue
-        }
-
-        default: {
-          result satisfies never
-          throw new Error(
-            // @ts-expect-error enterResult.kind may be invalid
-            `Invalid \`WalkAction.${WalkKind[result.kind] ?? `Unknown(${result.kind})`}\` in enter.`,
-          )
-        }
-      }
-    }
-
-    // Exit phase for nodes[~offset]
-    let index = ~offset // Two's complement to get original offset
-    ctx.index = index
-    let node = nodes[index]
-
-    let result = exit(node, ctx) ?? WalkAction.Continue
-
-    switch (result.kind) {
-      case WalkKind.Continue:
-        frame[1] = index + 1 // Advance to next sibling
-        continue
-
-      case WalkKind.Stop:
-        return // Stop immediately
-
-      case WalkKind.Replace: {
-        nodes.splice(index, 1, ...result.nodes)
-        frame[1] = index + result.nodes.length // Advance to next sibling past replacements
-        continue
-      }
-
-      case WalkKind.ReplaceStop: {
-        nodes.splice(index, 1, ...result.nodes)
-        return // Stop immediately
-      }
-
-      case WalkKind.ReplaceSkip: {
-        nodes.splice(index, 1, ...result.nodes)
-        frame[1] = index + result.nodes.length // Advance to next sibling past replacements
-        continue
-      }
-
-      default: {
-        result satisfies never
-        throw new Error(
-          // @ts-expect-error `result.kind` could still be filled with an invalid value
-          `Invalid \`WalkAction.${WalkKind[result.kind] ?? `Unknown(${result.kind})`}\` in exit.`,
-        )
-      }
-    }
-  }
-}
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index e5da091d8..ab81307fa 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -1,10 +1,8 @@
 import { expect, test, type Page } from '@playwright/test'
-import { Scanner } from '@tailwindcss/oxide'
-import fs from 'node:fs'
-import path from 'node:path'
-import { optimize } from '../../@tailwindcss-node/src/optimize'
-import { compile } from '../src'
-import { segment } from '../src/utils/segment'
+import { IO, Parsing, scanFiles } from '@tailwindcss/oxide'
+import fs from 'fs'
+import path from 'path'
+import { compile, optimizeCss } from '../src'
 
 const html = String.raw
 const css = String.raw
@@ -29,76 +27,53 @@ test('touch action', async ({ page }) => {
 })
 
 for (let [classes, expected] of [
+  ['from-red-500', 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)'],
   [
-    'bg-linear-to-r from-red',
-    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
+    'via-red-500',
+    'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 50%, rgba(0, 0, 0, 0) 100%)',
+  ],
+  ['to-red-500', 'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 100%)'],
+  [
+    'from-red-500 to-blue-500',
+    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
   ],
   [
-    'bg-linear-to-r via-red',
-    'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)',
+    'via-red-500 to-blue-500',
+    'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 50%, rgb(59, 130, 246) 100%)',
   ],
   [
-    'bg-linear-to-r to-red',
-    'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)',
-  ],
-  [
-    'bg-linear-to-r from-red to-blue',
-    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
-  ],
-  [
-    'bg-linear-45 from-red to-blue',
-    'linear-gradient(45deg in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
-  ],
-  [
-    '-bg-linear-45 from-red to-blue',
-    // Chrome reports a different (but also correct) computed value than Firefox/WebKit so we check
-    // for both options.
-    [
-      'linear-gradient(-45deg in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
-      'linear-gradient(calc(-45deg) in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
-    ],
-  ],
-  [
-    'bg-linear-to-r via-red to-blue',
-    'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
-  ],
-  [
-    'bg-linear-to-r from-red via-green to-blue',
-    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
-  ],
-  [
-    'bg-linear-[to_right,var(--color-red),var(--color-green),var(--color-blue)]',
-    'linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))',
+    'from-red-500 via-green-500 to-blue-500',
+    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
   ],
 ]) {
   test(`background gradient, "${classes}"`, async ({ page }) => {
     let { getPropertyValue } = await render(
       page,
-      html`<div id="x" class="${classes}">Hello world</div>`,
+      html`<div id="x" class="bg-gradient-to-r ${classes}">Hello world</div>`,
     )
 
-    if (Array.isArray(expected)) {
-      expect(expected).toContain(await getPropertyValue('#x', 'background-image'))
-    } else {
-      expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
-    }
+    expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
   })
 }
 
 test('background gradient, going from 2 to 3', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
-    html` <div id="x" class="bg-gradient-to-r from-red hover:via-green to-blue">Hello world</div> `,
+    html`
+      <div id="x" class="bg-gradient-to-r from-red-500 hover:via-green-500 to-blue-500">
+        Hello world
+      </div>
+    `,
   )
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
   )
 
   await page.locator('#x').hover()
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
   )
 })
 
@@ -106,1372 +81,23 @@ test('background gradient, going from 3 to 2', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
     html`
-      <div id="x" class="bg-gradient-to-r from-red via-green hover:via-none to-blue">
+      <div id="x" class="bg-gradient-to-r from-red-500 via-green-500 hover:via-none to-blue-500">
         Hello world
       </div>
     `,
   )
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
   )
 
   await page.locator('#x').hover()
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
   )
 })
 
-for (let [classes, expected] of [
-  ['bg-conic from-red', 'conic-gradient(in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
-  [
-    'bg-conic-45 from-red',
-    'conic-gradient(from 45deg in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
-  ],
-  [
-    'bg-conic-[from_45deg] from-red',
-    'conic-gradient(from 45deg, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
-  ],
-  [
-    'bg-conic-[from_45deg,var(--color-red),transparent]',
-    'conic-gradient(from 45deg, rgb(255, 0, 0), rgba(0, 0, 0, 0))',
-  ],
-]) {
-  test(`conic gradient, "${classes}"`, async ({ page }) => {
-    let { getPropertyValue } = await render(
-      page,
-      html`<div id="x" class="${classes}">Hello world</div>`,
-    )
-
-    expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
-  })
-}
-
-for (let [classes, expected] of [
-  ['bg-radial from-red', 'radial-gradient(in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
-  [
-    'bg-radial-[at_0%_0%] from-red',
-    'radial-gradient(at 0% 0%, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
-  ],
-  [
-    'bg-radial-[at_0%_0%,var(--color-red),transparent]',
-    'radial-gradient(at 0% 0%, rgb(255, 0, 0), rgba(0, 0, 0, 0))',
-  ],
-  [
-    'bg-radial-[at_center] from-red to-green',
-    'radial-gradient(rgb(255, 0, 0) 0%, rgb(0, 255, 0) 100%)',
-  ],
-]) {
-  test(`radial gradient, "${classes}"`, async ({ page }) => {
-    let { getPropertyValue } = await render(
-      page,
-      html`<div id="x" class="${classes}">Hello world</div>`,
-    )
-
-    expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
-  })
-}
-
-/**
- * Edge mask utilities
- */
-for (let [classes, expected] of [
-  //
-  // Single values (from)
-  //
-  [
-    'mask-x-from-20%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-y-from-20%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-t-from-20%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-r-from-20%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-b-from-20%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-l-from-20%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-
-  //
-  // Single values (to)
-  //
-  [
-    'mask-x-to-80%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-y-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-t-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-r-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-b-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-l-to-80%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-
-  //
-  // Multiple values (from + to)
-  //
-  [
-    'mask-x-from-20% mask-x-to-80%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-y-from-20% mask-y-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-t-from-20% mask-t-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-r-from-20% mask-r-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-b-from-20% mask-b-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-l-from-20% mask-l-to-80%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-
-  //
-  // Multiple edges
-  //
-  [
-    'mask-t-from-10% mask-t-to-20% mask-r-from-30% mask-r-to-40% mask-b-from-50% mask-b-to-60% mask-l-from-70% mask-l-to-80%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
-      'linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 60%)',
-      'linear-gradient(to top, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-x-from-10% mask-x-to-20% mask-y-from-30% mask-y-to-40%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
-      'linear-gradient(rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
-      'linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-
-  //
-  // Multiple edges
-  // TRBL takes precedence over XY
-  //
-  [
-    'mask-x-from-20% mask-x-to-80% mask-l-from-30% mask-r-to-70%',
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 70%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-y-from-20% mask-y-to-80% mask-t-from-30% mask-b-to-70%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 70%)',
-      'linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-]) {
-  test(`mask edges, "${classes}"`, async ({ page }) => {
-    let { getPropertyValue } = await render(
-      page,
-      html`<div id="x" class="${classes}">Hello world</div>`,
-    )
-
-    if (Array.isArray(expected)) {
-      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
-    } else {
-      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
-    }
-  })
-}
-
-/**
- * Linear mask utilities
- */
-for (let [classes, expected] of [
-  //
-  // Single values (from, to)
-  //
-  [
-    'mask-linear-45 mask-linear-from-20%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-    ],
-  ],
-  [
-    'mask-linear-45 mask-linear-to-80%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(calc(45deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-    ],
-  ],
-
-  //
-  // Multiple values
-  //
-  [
-    'mask-linear-45 mask-linear-from-20% mask-linear-to-80%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-    ],
-  ],
-]) {
-  test(`mask linear, "${classes}"`, async ({ page }) => {
-    let { getPropertyValue } = await render(
-      page,
-      html`<div id="x" class="${classes}">Hello world</div>`,
-    )
-
-    if (Array.isArray(expected)) {
-      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
-    } else {
-      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
-    }
-  })
-}
-
-/**
- * Radial mask utilities
- */
-for (let [classes, expected] of [
-  //
-  // Single values (from, to)
-  //
-  [
-    'mask-radial-from-20%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-radial-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-
-  //
-  // Multiple values (from, to)
-  //
-  [
-    'mask-radial-from-20% mask-radial-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-
-  //
-  // Shapes
-  //
-  [
-    'mask-circle mask-radial-from-20% mask-radial-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(circle, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-  [
-    'mask-ellipse mask-radial-from-20% mask-radial-to-80%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-
-  //
-  // Positions
-  //
-  [
-    'mask-radial-at-top-left mask-radial-from-20% mask-radial-to-80%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'radial-gradient(at 0% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'radial-gradient(at left top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-    ],
-  ],
-  [
-    'mask-circle mask-radial-at-top-left mask-radial-from-20% mask-radial-to-80%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'radial-gradient(circle at 0% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'radial-gradient(circle at left top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-    ],
-  ],
-
-  //
-  // Sizes
-  //
-  [
-    'mask-radial-[100%_100%] mask-radial-from-20%',
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(100% 100%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ],
-
-  //
-  // Complicated radial gradient
-  //
-  [
-    'mask-radial-[25%_150%] mask-radial-at-top mask-ellipse mask-radial-from-20% mask-radial-to-80%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'radial-gradient(25% 150% at 50% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'radial-gradient(25% 150% at center top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-        // Conic
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      ].join(', '),
-    ],
-  ],
-]) {
-  test(`mask radial, "${classes}"`, async ({ page }) => {
-    let { getPropertyValue } = await render(
-      page,
-      html`<div id="x" class="${classes}">Hello world</div>`,
-    )
-
-    if (Array.isArray(expected)) {
-      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
-    } else {
-      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
-    }
-  })
-}
-
-/**
- * Conic mask utilities
- */
-for (let [classes, expected] of [
-  //
-  // Single values (from, to)
-  //
-  [
-    'mask-conic-45 mask-conic-from-20%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      ].join(', '),
-    ],
-  ],
-  [
-    'mask-conic-45 mask-conic-to-80%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'conic-gradient(from 45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      ].join(', '),
-    ],
-  ],
-
-  //
-  // Multiple values
-  //
-  [
-    'mask-conic-45 mask-conic-from-20% mask-conic-to-80%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Radial
-        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-        // Conic
-        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      ].join(', '),
-    ],
-  ],
-]) {
-  test(`mask conic, "${classes}"`, async ({ page }) => {
-    let { getPropertyValue } = await render(
-      page,
-      html`<div id="x" class="${classes}">Hello world</div>`,
-    )
-
-    if (Array.isArray(expected)) {
-      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
-    } else {
-      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
-    }
-  })
-}
-
-/**
- * Multiple masks
- */
-for (let [classes, expected] of [
-  //
-  // Single values (from, to)
-  //
-  [
-    'mask-conic-45 mask-conic-from-20% mask-linear-30 mask-linear-to-70% mask-circle mask-radial-from-40% mask-radial-to-80%',
-    [
-      // WebKit / Firefox
-      [
-        // Linear
-        'linear-gradient(30deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
-        // Radial
-        'radial-gradient(circle, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 80%)',
-        // Conic
-        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      ].join(', '),
-
-      // Chromium
-      [
-        // Linear
-        'linear-gradient(calc(30deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
-        // Radial
-        'radial-gradient(circle, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 80%)',
-        // Conic
-        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      ].join(', '),
-    ],
-  ],
-]) {
-  test(`mask multiple, "${classes}"`, async ({ page }) => {
-    let { getPropertyValue } = await render(
-      page,
-      html`<div id="x" class="${classes}">Hello world</div>`,
-    )
-
-    if (Array.isArray(expected)) {
-      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
-    } else {
-      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
-    }
-  })
-}
-
-test('mask edges can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html` <div id="x" class="mask-x-from-25% hover:mask-x-to-75%">Hello world</div> `,
-  )
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-
-  await page.locator('#x').hover()
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-})
-
-test('mask edge colors can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="mask-x-from-25% hover:mask-x-from-transparent hover:mask-x-to-black">
-        Hello world
-      </div>
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-
-  await page.locator('#x').hover()
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(to left, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
-      'linear-gradient(to right, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-})
-
-test('linear mask direction can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="mask-linear-15 mask-linear-from-25% hover:mask-linear-45">Hello world</div>
-    `,
-  )
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-
-  await page.locator('#x').hover()
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(45deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(calc(45deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-})
-
-test('linear mask position can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="mask-linear-15 mask-linear-from-25% hover:mask-linear-to-75%">
-        Hello world
-      </div>
-    `,
-  )
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-
-  await page.locator('#x').hover()
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-})
-
-test('linear mask colors can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div
-        id="x"
-        class="mask-linear-15 mask-linear-from-25% hover:mask-linear-from-transparent hover:mask-linear-to-black"
-      >
-        Hello world
-      </div>
-    `,
-  )
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-
-  await page.locator('#x').hover()
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(15deg, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(calc(15deg), rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-})
-
-test('radial mask size can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-[125%_25%]">
-        Hello world
-      </div>
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-
-  await page.locator('#x').hover()
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(125% 25%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-})
-
-test('radial mask position can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-to-75%">
-        Hello world
-      </div>
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-
-  await page.locator('#x').hover()
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-})
-
-test('radial mask color can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div
-        id="x"
-        class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-from-transparent hover:mask-radial-to-black"
-      >
-        Hello world
-      </div>
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-
-  await page.locator('#x').hover()
-
-  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'radial-gradient(50% 50%, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
-      // Conic
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-    ].join(', '),
-  )
-})
-
-test('conic mask direction can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="mask-conic-15 mask-conic-from-25% hover:mask-conic-45">Hello world</div>
-    `,
-  )
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-
-  await page.locator('#x').hover()
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from 45deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from calc(45deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-})
-
-test('conic mask position can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="mask-conic-15 mask-conic-from-25% hover:mask-conic-to-75%">
-        Hello world
-      </div>
-    `,
-  )
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-
-  await page.locator('#x').hover()
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-})
-
-test('conic mask color can be changed on hover', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div
-        id="x"
-        class="mask-conic-15 mask-conic-from-25% hover:mask-conic-from-transparent hover:mask-conic-to-black"
-      >
-        Hello world
-      </div>
-    `,
-  )
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-
-  await page.locator('#x').hover()
-
-  expect([
-    // WebKit / Firefox
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from 15deg, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
-    ].join(', '),
-
-    // Chromium
-    [
-      // Linear
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Radial
-      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
-      // Conic
-      'conic-gradient(from calc(15deg), rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
-    ].join(', '),
-  ]).toContain(await getPropertyValue('#x', 'mask-image'))
-})
-
 test("::backdrop can receive a border with just the 'border' utility", async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
@@ -1514,395 +140,23 @@ test.skip("::file-selector-button can receive a border with just the 'border' ut
 })
 
 test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) => {
-  let { getPropertyList } = await render(
+  let { getPropertyValue } = await render(
     page,
     html`<div
       id="x"
-      class="shadow-sm shadow-[#f00] inset-shadow-sm inset-shadow-[#0f0] ring ring-[#fff] inset-ring inset-ring-[#00f]"
+      class="shadow shadow-[#f00]/50 inset-shadow inset-shadow-[#0f0]/50 ring ring-[#fff]/50 inset-ring inset-ring-[#00f]/50"
     ></div>`,
   )
 
-  expect(await getPropertyList('#x', 'box-shadow')).toEqual([
-    expect.stringMatching(/oklab\(0.866\d+ -0.233\d+ 0.179\d+\) 0px 2px 4px 0px inset/), // inset-shadow
-    'rgb(0, 0, 255) 0px 0px 0px 1px inset', // inset-ring
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px', // ring-offset (disabled)
-    'rgb(255, 255, 255) 0px 0px 0px 1px', // ring
-
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 3px 0px/), // shadow
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px -1px/), // shadow
-  ])
-})
-
-test('shadow colors', async ({ page }) => {
-  let { getPropertyList } = await render(
-    page,
-    html`
-      <div id="a" class="shadow-sm shadow-red"></div>
-      <div id="b" class="shadow-xl shadow-red"></div>
-      <div id="c" class="shadow-[0px_2px_4px] shadow-red"></div>
-      <div id="d" class="shadow-sm shadow-red hover:shadow-xl">Hello world</div>
-      <div id="e" class="shadow-sm shadow-red hover:shadow-xl hover:shadow-initial">
-        Hello world
-      </div>
-
-      <div id="f" class="shadow-xs/75">Hello world</div>
-      <div id="g" class="shadow-xs/75 shadow-red/75">Hello world</div>
-    `,
-  )
-
-  expect(await getPropertyList('#a', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-
-    //
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 3px 0px/),
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px -1px/),
-  ])
-
-  expect(await getPropertyList('#b', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-
-    //
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 20px 25px -5px/),
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 8px 10px -6px/),
-  ])
-
-  expect(await getPropertyList('#c', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-
-    //
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 2px 4px 0px/),
-  ])
-
-  expect(await getPropertyList('#d', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-
-    //
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 3px 0px/),
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px -1px/),
-  ])
-
-  expect(await getPropertyList('#f', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'oklab(0 0 0 / 0.75) 0px 1px 2px 0px',
-  ])
-
-  expect(await getPropertyList('#g', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+ \/ 0.56\d+\) 0px 1px 2px 0px/),
-  ])
-
-  await page.locator('#d').hover()
-
-  expect(await getPropertyList('#d', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-
-    //
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 20px 25px -5px/),
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 8px 10px -6px/),
-  ])
-
-  expect(await getPropertyList('#e', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-
-    //
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 3px 0px/),
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px -1px/),
-  ])
-
-  await page.locator('#e').hover()
-
-  expect(await getPropertyList('#e', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-
-    //
-    'rgba(0, 0, 0, 0.1) 0px 20px 25px -5px',
-    'rgba(0, 0, 0, 0.1) 0px 8px 10px -6px',
-  ])
-})
-
-test('inset shadow colors', async ({ page }) => {
-  let { getPropertyList } = await render(
-    page,
-    html`
-      <div id="a" class="inset-shadow-xs inset-shadow-red"></div>
-      <div id="b" class="inset-shadow-sm inset-shadow-red"></div>
-      <div id="c" class="inset-shadow-[0px_3px_6px] inset-shadow-red"></div>
-      <div id="d" class="inset-shadow-xs inset-shadow-red hover:inset-shadow-sm">Hello world</div>
-      <div
-        id="e"
-        class="inset-shadow-xs inset-shadow-red hover:inset-shadow-sm hover:inset-shadow-initial"
-      >
-        Hello world
-      </div>
-
-      <div id="f" class="inset-shadow-xs/75">Hello world</div>
-      <div id="g" class="inset-shadow-xs/75 inset-shadow-red/75">Hello world</div>
-    `,
-  )
-
-  expect(await getPropertyList('#a', 'box-shadow')).toEqual([
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px 0px inset/),
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-  expect(await getPropertyList('#b', 'box-shadow')).toEqual([
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 2px 4px 0px inset/),
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-  expect(await getPropertyList('#c', 'box-shadow')).toEqual([
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 3px 6px 0px inset/),
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-
-  expect(await getPropertyList('#d', 'box-shadow')).toEqual([
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px 0px inset/),
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-
-  expect(await getPropertyList('#f', 'box-shadow')).toEqual([
-    'oklab(0 0 0 / 0.75) 0px 1px 1px 0px inset',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-
-  expect(await getPropertyList('#g', 'box-shadow')).toEqual([
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+ \/ 0.56\d+\) 0px 1px 1px 0px inset/),
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-
-  await page.locator('#d').hover()
-
-  expect(await getPropertyList('#d', 'box-shadow')).toEqual([
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 2px 4px 0px inset/),
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-
-  expect(await getPropertyList('#e', 'box-shadow')).toEqual([
-    expect.stringMatching(/oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px 0px inset/),
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-
-  await page.locator('#e').hover()
-
-  expect(await getPropertyList('#e', 'box-shadow')).toEqual([
-    'rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-    'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-  ])
-})
-
-test('text shadow colors', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="a" class="text-shadow-xs text-shadow-red"></div>
-      <div id="b" class="text-shadow-lg text-shadow-red"></div>
-      <div id="c" class="text-shadow-[0px_2px_4px] text-shadow-red"></div>
-      <div id="d" class="text-shadow-xs text-shadow-red hover:text-shadow-lg">Hello world</div>
-      <div
-        id="e"
-        class="text-shadow-xs text-shadow-red hover:text-shadow-lg hover:text-shadow-initial"
-      >
-        Hello world
-      </div>
-
-      <div id="f" class="text-shadow-xs/75">Hello world</div>
-      <div id="g" class="text-shadow-xs/75 text-shadow-red/75">Hello world</div>
-    `,
-  )
-
-  expect(await getPropertyValue('#a', 'text-shadow')).toMatch(
-    /oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px/,
-  )
-  expect(await getPropertyValue('#b', 'text-shadow')).toMatch(
-    /oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px, oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 3px 2px, oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 4px 8px/,
-  )
-  expect(await getPropertyValue('#c', 'text-shadow')).toMatch(
-    /oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 2px 4px/,
-  )
-  expect(await getPropertyValue('#d', 'text-shadow')).toMatch(
-    /oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px/,
-  )
-
-  expect(await getPropertyValue('#f', 'text-shadow')).toEqual('oklab(0 0 0 / 0.75) 0px 1px 1px')
-  expect(await getPropertyValue('#g', 'text-shadow')).toMatch(
-    /oklab\(0.627\d+ 0.224\d+ 0.125\d+ \/ 0.56\d+\) 0px 1px 1px/,
-  )
-
-  await page.locator('#d').hover()
-
-  expect(await getPropertyValue('#d', 'text-shadow')).toMatch(
-    /oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 2px, oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 3px 2px, oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 4px 8px/,
-  )
-
-  expect(await getPropertyValue('#e', 'text-shadow')).toMatch(
-    /oklab\(0.627\d+ 0.224\d+ 0.125\d+\) 0px 1px 1px/,
-  )
-
-  await page.locator('#e').hover()
-
-  expect(await getPropertyValue('#e', 'text-shadow')).toEqual(
-    'rgba(0, 0, 0, 0.1) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 3px 2px, rgba(0, 0, 0, 0.1) 0px 4px 8px',
-  )
-})
-
-test('filter', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div
-        id="a"
-        class="blur-md brightness-50 contrast-50 drop-shadow-md grayscale hue-rotate-180 invert saturate-50 sepia"
-      >
-        <div id="b" class="contrast-100"></div>
-      </div>
-    `,
-  )
-
-  expect(await getPropertyValue('#a', 'filter')).toEqual(
+  expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
     [
-      'blur(12px)',
-      'brightness(0.5)',
-      'contrast(0.5)',
-      'grayscale(1)',
-      'hue-rotate(180deg)',
-      'invert(1)',
-      'saturate(0.5)',
-      'sepia(1)',
-      'drop-shadow(rgba(0, 0, 0, 0.12) 0px 3px 3px)',
-    ].join(' '),
+      'rgba(0, 255, 0, 0.5) 0px 2px 4px 0px inset', // inset-shadow
+      'rgba(0, 0, 255, 0.5) 0px 0px 0px 1px inset', // inset-ring
+      'rgba(0, 0, 0, 0) 0px 0px 0px 0px', // ring-offset (disabled)
+      'rgba(255, 255, 255, 0.5) 0px 0px 0px 1px', // ring
+      'rgba(255, 0, 0, 0.5) 0px 1px 3px 0px, rgba(255, 0, 0, 0.5) 0px 1px 2px -1px', // shadow
+    ].join(', '),
   )
-  expect(await getPropertyValue('#b', 'filter')).toEqual('contrast(1)')
-})
-
-test('drop shadow colors', async ({ page }) => {
-  let { getPropertyList } = await render(
-    page,
-    html`
-      <div id="a" class="drop-shadow-md"></div>
-      <div id="b" class="drop-shadow-md drop-shadow-red"></div>
-      <div id="c" class="drop-shadow-md/50"></div>
-      <div id="d" class="drop-shadow-md/50 drop-shadow-red"></div>
-      <div id="e" class="drop-shadow-md/50 drop-shadow-red/50"></div>
-    `,
-  )
-
-  expect(await getPropertyList('#a', 'filter')).toEqual([
-    'drop-shadow(rgba(0, 0, 0, 0.12) 0px 3px 3px)',
-  ])
-
-  expect(await getPropertyList('#b', 'filter')).toEqual([
-    expect.stringMatching(/drop-shadow\(oklab\(0\.627\d+ 0\.224\d+ 0\.125\d+\) 0px 3px 3px\)/),
-  ])
-
-  expect(await getPropertyList('#c', 'filter')).toEqual([
-    'drop-shadow(oklab(0 0 0 / 0.5) 0px 3px 3px)',
-  ])
-
-  expect(await getPropertyList('#d', 'filter')).toEqual([
-    expect.stringMatching(
-      /drop-shadow\(oklab\(0\.627\d+ 0\.224\d+ 0\.125\d+ \/ 0\.5\) 0px 3px 3px\)/,
-    ),
-  ])
-
-  expect(await getPropertyList('#e', 'filter')).toEqual([
-    expect.stringMatching(
-      /drop-shadow\(oklab\(0\.627\d+ 0\.224\d+ 0\.125\d+ \/ 0\.25\) 0px 3px 3px\)/,
-    ),
-  ])
-})
-
-test('multiple drop shadow filters with `@theme inline`', async ({ page }) => {
-  let { getPropertyList } = await render(
-    page,
-    html`
-      <div id="a" class="drop-shadow-inlined"></div>
-      <div id="b" class="drop-shadow-inlined drop-shadow-red"></div>
-      <div style="--drop-shadow-var: 0 20px 20px rgb(0 0 0 / 0.75)">
-        <div id="c" class="drop-shadow-var"></div>
-      </div>
-      <div style="--drop-shadow-var: 0 10px 10px rgb(0 0 0 / 0.75), 0 20px 20px rgb(0 0 0 / 0.75)">
-        <div id="d" class="drop-shadow-var"></div>
-      </div>
-    `,
-    css`
-      @theme {
-        --drop-shadow-var: 0 1px 1px rgb(0 0 0 / 0.5), 0 10px 10px rgb(0 0 0 / 0.25);
-      }
-      @theme inline {
-        --drop-shadow-inlined: 0 1px 1px rgb(0 0 0 / 0.5), 0 10px 10px rgb(0 0 0 / 0.25);
-      }
-    `,
-  )
-
-  expect(await getPropertyList('#a', 'filter')).toEqual([
-    'drop-shadow(rgba(0, 0, 0, 0.5) 0px 1px 1px) drop-shadow(rgba(0, 0, 0, 0.25) 0px 10px 10px)',
-  ])
-
-  expect(await getPropertyList('#b', 'filter')).toEqual([
-    expect.stringMatching(
-      /drop-shadow\(oklab\(0\.627\d+ 0\.224\d+ 0\.125\d+\) 0px 1px 1px\) drop-shadow\(oklab\(0\.627\d+ 0\.224\d+ 0\.125\d+\) 0px 10px 10px\)/,
-    ),
-  ])
-
-  expect(await getPropertyList('#c', 'filter')).toEqual([
-    'drop-shadow(rgba(0, 0, 0, 0.75) 0px 20px 20px)',
-  ])
-
-  // Multiple values are only supported with `@theme inline` because otherwise we use var(…)
-  // inside of drop-shadow(…) which can only ever be a single shadow
-  expect(await getPropertyList('#d', 'filter')).toEqual(['none'])
 })
 
 test('outline style is optional', async ({ page }) => {
@@ -1911,7 +165,7 @@ test('outline style is optional', async ({ page }) => {
     html`<div id="x" class="outline-2 outline-white"></div>`,
   )
 
-  expect(await getPropertyValue('#x', 'outline')).toEqual('2px solid rgb(255, 255, 255)')
+  expect(await getPropertyValue('#x', 'outline')).toEqual('rgb(255, 255, 255) solid 2px')
 })
 
 test('outline style is preserved when changing outline width', async ({ page }) => {
@@ -1922,11 +176,11 @@ test('outline style is preserved when changing outline width', async ({ page })
     </div>`,
   )
 
-  expect(await getPropertyValue('#x', 'outline')).toEqual('2px dotted rgb(255, 255, 255)')
+  expect(await getPropertyValue('#x', 'outline')).toEqual('rgb(255, 255, 255) dotted 2px')
 
   await page.locator('#x').hover()
 
-  expect(await getPropertyValue('#x', 'outline')).toEqual('4px dotted rgb(255, 255, 255)')
+  expect(await getPropertyValue('#x', 'outline')).toEqual('rgb(255, 255, 255) dotted 4px')
 })
 
 test('borders can be added without a border-style utility', async ({ page }) => {
@@ -1938,7 +192,7 @@ test('borders can be added without a border-style utility', async ({ page }) =>
   expect(await getPropertyValue('#x', 'border')).toEqual('2px solid rgb(0, 0, 0)')
 })
 
-test('borders can be added to a single side without a border-style utility', async ({ page }) => {
+test('borders can be added to a single side withou a border-style utility', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
     html`<div id="x" class="text-black border-r-2 border-dashed hover:border-r-4">
@@ -1956,15 +210,15 @@ test('dividers can be added without setting border-style', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
     html`<div id="a" class="divide-y-2 divide-dashed hover:divide-y-4">
-      <div id="b">First</div>
-      <div>Second</div>
+      <div>First</div>
+      <div id="b">Second</div>
     </div>`,
   )
-  expect(await getPropertyValue('#b', 'border-bottom')).toEqual('2px dashed rgb(0, 0, 0)')
+  expect(await getPropertyValue('#b', 'border-top')).toEqual('2px dashed rgb(0, 0, 0)')
 
   await page.locator('#a').hover()
 
-  expect(await getPropertyValue('#b', 'border-bottom')).toEqual('4px dashed rgb(0, 0, 0)')
+  expect(await getPropertyValue('#b', 'border-top')).toEqual('4px dashed rgb(0, 0, 0)')
 })
 
 test('scale can be a number or percentage', async ({ page }) => {
@@ -1993,559 +247,28 @@ test('content-none persists when conditionally styling a pseudo-element', async
   expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')
 })
 
-test('explicit leading utilities are respected when overriding font-size', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="text-sm hover:text-xl">Hello world</div>
-      <div id="y" class="text-sm leading-tight hover:text-xl">Hello world</div>
-      <div id="z" class="text-sm leading-[10px] hover:text-xl">Hello world</div>
-    `,
-    css`
-      @theme {
-        --text-sm: 14px;
-        --text-sm--line-height: 16px;
-        --text-xl: 20px;
-        --text-xl--line-height: 24px;
-        --leading-tight: 8px;
-      }
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'line-height')).toEqual('16px')
-  await page.locator('#x').hover()
-  expect(await getPropertyValue('#x', 'line-height')).toEqual('24px')
-
-  expect(await getPropertyValue('#y', 'line-height')).toEqual('8px')
-  await page.locator('#y').hover()
-  expect(await getPropertyValue('#y', 'line-height')).toEqual('8px')
-
-  expect(await getPropertyValue('#z', 'line-height')).toEqual('10px')
-  await page.locator('#z').hover()
-  expect(await getPropertyValue('#z', 'line-height')).toEqual('10px')
-})
-
-test('explicit leading utilities are overridden by line-height modifiers', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="text-sm hover:text-xl/[100px]">Hello world</div>
-      <div id="y" class="text-sm leading-tight hover:text-xl/[100px]">Hello world</div>
-      <div id="z" class="text-sm leading-[10px] hover:text-xl/[100px]">Hello world</div>
-    `,
-    css`
-      @theme {
-        --text-sm: 14px;
-        --text-sm--line-height: 16px;
-        --text-xl: 20px;
-        --text-xl--line-height: 24px;
-        --leading-tight: 8px;
-      }
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'line-height')).toEqual('16px')
-  await page.locator('#x').hover()
-  expect(await getPropertyValue('#x', 'line-height')).toEqual('100px')
-
-  expect(await getPropertyValue('#y', 'line-height')).toEqual('8px')
-  await page.locator('#y').hover()
-  expect(await getPropertyValue('#y', 'line-height')).toEqual('100px')
-
-  expect(await getPropertyValue('#z', 'line-height')).toEqual('10px')
-  await page.locator('#z').hover()
-  expect(await getPropertyValue('#z', 'line-height')).toEqual('100px')
-})
-
-test('explicit tracking utilities are respected when overriding font-size', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="text-sm hover:text-xl">Hello world</div>
-      <div id="y" class="text-sm tracking-tight hover:text-xl">Hello world</div>
-      <div id="z" class="text-sm tracking-[3px] hover:text-xl">Hello world</div>
-    `,
-    css`
-      @theme {
-        --text-sm--letter-spacing: 5px;
-        --text-xl--letter-spacing: 10px;
-        --tracking-tight: 1px;
-      }
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'letter-spacing')).toEqual('5px')
-  await page.locator('#x').hover()
-  expect(await getPropertyValue('#x', 'letter-spacing')).toEqual('10px')
-
-  expect(await getPropertyValue('#y', 'letter-spacing')).toEqual('1px')
-  await page.locator('#y').hover()
-  expect(await getPropertyValue('#y', 'letter-spacing')).toEqual('1px')
-
-  expect(await getPropertyValue('#z', 'letter-spacing')).toEqual('3px')
-  await page.locator('#z').hover()
-  expect(await getPropertyValue('#z', 'letter-spacing')).toEqual('3px')
-})
-
-test('explicit font-weight utilities are respected when overriding font-size', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="x" class="text-sm hover:text-xl">Hello world</div>
-      <div id="y" class="text-sm font-bold hover:text-xl">Hello world</div>
-      <div id="z" class="text-sm font-[900] hover:text-xl">Hello world</div>
-    `,
-    css`
-      @theme {
-        --text-sm--font-weight: 100;
-        --text-xl--font-weight: 200;
-      }
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'font-weight')).toEqual('100')
-  await page.locator('#x').hover()
-  expect(await getPropertyValue('#x', 'font-weight')).toEqual('200')
-
-  expect(await getPropertyValue('#y', 'font-weight')).toEqual('700')
-  await page.locator('#y').hover()
-  expect(await getPropertyValue('#y', 'font-weight')).toEqual('700')
-
-  expect(await getPropertyValue('#z', 'font-weight')).toEqual('900')
-  await page.locator('#z').hover()
-  expect(await getPropertyValue('#z', 'font-weight')).toEqual('900')
-})
-
-test('explicit duration and ease utilities are respected when overriding transition-property', async ({
-  page,
-}) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div
-        id="x"
-        class="ease-[linear] duration-500 transition-[opacity] hover:transition-[background-color]"
-      >
-        Hello world
-      </div>
-    `,
-  )
-
-  expect(await getPropertyValue('#x', 'transition-timing-function')).toEqual('linear')
-  expect(await getPropertyValue('#x', 'transition-duration')).toEqual('0.5s')
-  await page.locator('#x').hover()
-  expect(await getPropertyValue('#x', 'transition-timing-function')).toEqual('linear')
-  expect(await getPropertyValue('#x', 'transition-duration')).toEqual('0.5s')
-})
-
-test('shadow DOM has access to variables', async ({ page }) => {
-  await render(
-    page,
-    html`
-      <script type="text/javascript">
-        class Component extends HTMLElement {
-          constructor() {
-            super()
-            this.attachShadow({ mode: 'open' })
-          }
-
-          connectedCallback() {
-            this.shadowRoot.innerHTML =
-              '<style>' +
-              document.querySelector('style').textContent +
-              '</style>' +
-              '<div class="flex gap-2" id="x">' +
-              '  <div>one</div>' +
-              '  <div>two</div>' +
-              '</div>'
-          }
-        }
-
-        customElements.define('my-component', Component)
-      </script>
-
-      <my-component id="shadow"></my-component>
-    `,
-  )
-
-  let gap = await page.evaluate(() => {
-    let shadowRoot = document.querySelector('#shadow')!.shadowRoot!
-    let x = shadowRoot.querySelector('#x')!
-    return window.getComputedStyle(x).getPropertyValue('gap')
-  })
-
-  expect(gap).toBe('8px')
-})
-
-// @scope related tests
-{
-  test('custom variant using `@scope`', async ({ page }) => {
-    let { getPropertyValue } = await render(
-      page,
-      html`
-        <div class="checkout">
-          <div id="in" class="in-checkout:underline">In scope</div>
-          <div class="payment">
-            <div id="beyond" class="in-checkout:underline">Beyond the limit</div>
-          </div>
-        </div>
-        <div id="out" class="in-checkout:underline">Not in scope</div>
-      `,
-      css`
-        @custom-variant in-checkout {
-          @scope (.checkout) to (.payment) {
-            @slot;
-          }
-        }
-      `,
-    )
-
-    test.skip(!(await supportsAtScope(page)), '`@scope` is not supported in this browser')
-
-    expect(await getPropertyValue('#in', 'text-decoration-line')).toEqual('underline')
-    expect(await getPropertyValue('#beyond', 'text-decoration-line')).toEqual('none')
-    expect(await getPropertyValue('#out', 'text-decoration-line')).toEqual('none')
-  })
-
-  test('custom variant using `@scope` behaves like the equivalent authored CSS', async ({
-    page,
-  }) => {
-    // Render the same structure twice:
-    // - Once styled by authored CSS using `@scope`, like the "normal CSS"
-    //   reference in https://github.com/tailwindlabs/tailwindcss/issues/18961
-    // - Once styled by utilities using an equivalent custom variant
-    function structure(prefix: string, probe: string) {
-      return html`
-        <div class="checkout">
-          <div id="${prefix}-in" class="${probe}">In scope</div>
-          <div class="payment">
-            <div id="${prefix}-beyond" class="${probe}">Beyond the limit</div>
-          </div>
-        </div>
-        <div id="${prefix}-out" class="${probe}">Not in scope</div>
-      `
-    }
-
-    let { getPropertyValue } = await render(
-      page,
-      structure('a', 'a-probe') + structure('c', 'in-checkout:underline'),
-      css`
-        @custom-variant in-checkout {
-          @scope (.checkout) to (.payment) {
-            @slot;
-          }
-        }
-      `,
-    )
-
-    // The `a-*` structure is styled by the authored CSS as-is
-    await page.addStyleTag({
-      content: css`
-        @scope (.checkout) to (.payment) {
-          .a-probe {
-            text-decoration-line: underline;
-          }
-        }
-      `,
-    })
-
-    test.skip(!(await supportsAtScope(page)), '`@scope` is not supported in this browser')
-
-    for (let prefix of ['a', 'c']) {
-      expect(await getPropertyValue(`#${prefix}-in`, 'text-decoration-line')).toEqual('underline')
-      expect(await getPropertyValue(`#${prefix}-beyond`, 'text-decoration-line')).toEqual('none')
-      expect(await getPropertyValue(`#${prefix}-out`, 'text-decoration-line')).toEqual('none')
-    }
-  })
-
-  test('user-authored nested `@scope` behaves like the authored CSS', async ({ page }) => {
-    // User-authored `@scope` rules are compiled to their native CSS nesting
-    // semantics. Rendering the same structure twice:
-    // - Once styled by the authored (nested) CSS as-is
-    // - Once styled by the compiled output
-    function structure(prefix: string) {
-      return html`
-        <div class="${prefix}-parent">
-          <div class="${prefix}-scope">
-            <span class="${prefix}-content" id="${prefix}-in">in scope</span>
-            <div class="${prefix}-limit">
-              <span class="${prefix}-content" id="${prefix}-beyond">beyond the limit</span>
-            </div>
-          </div>
-        </div>
-        <div class="${prefix}-scope">
-          <span class="${prefix}-content" id="${prefix}-out">scope not inside parent</span>
-        </div>
-      `
-    }
-
-    function scopeCss(prefix: string) {
-      return css`
-        .${prefix}-parent {
-          @scope (& > .${prefix}-scope) to (& .${prefix}-limit) {
-            .${prefix}-content {
-              text-decoration-line: underline;
-            }
-          }
-        }
-      `
-    }
-
-    // The `c-*` structure is styled by the compiled CSS
-    let { getPropertyValue } = await render(page, structure('a') + structure('c'), scopeCss('c'))
-
-    // The `a-*` structure is styled by the authored CSS as-is
-    await page.addStyleTag({ content: scopeCss('a') })
-
-    test.skip(!(await supportsAtScope(page)), '`@scope` is not supported in this browser')
-
-    // The compiled output only applies within the scope
-    expect(await getPropertyValue('#c-in', 'text-decoration-line')).toEqual('underline')
-    expect(await getPropertyValue('#c-beyond', 'text-decoration-line')).toEqual('none')
-    expect(await getPropertyValue('#c-out', 'text-decoration-line')).toEqual('none')
-
-    // The authored CSS behaves the same
-    expect(await getPropertyValue('#a-in', 'text-decoration-line')).toEqual('underline')
-    expect(await getPropertyValue('#a-out', 'text-decoration-line')).toEqual('none')
-
-    // WebKit currently drops the `<scope-end>` limit entirely when it contains
-    // `&`. Since we resolve the `&` at build time, the compiled output works
-    // even though the authored CSS doesn't.
-    if (test.info().project.name !== 'webkit') {
-      expect(await getPropertyValue('#a-beyond', 'text-decoration-line')).toEqual('none')
-    }
-  })
-
-  test('user-authored `@scope` nested inside another `@scope`', async ({ page }) => {
-    function structure(prefix: string) {
-      return html`
-        <!-- Control: outer > middle > inner -->
-        <div class="${prefix}-outer">
-          <div class="${prefix}-middle">
-            <div class="${prefix}-inner" id="${prefix}-ctrl">ctrl</div>
-          </div>
-        </div>
-
-        <!-- Middle is an ancestor of the outer scope root -->
-        <div class="${prefix}-middle">
-          <div class="${prefix}-outer">
-            <div class="${prefix}-inner" id="${prefix}-ancestor">ancestor</div>
-          </div>
-        </div>
-
-        <!-- Middle is beyond the outer limit -->
-        <div class="${prefix}-outer">
-          <div class="${prefix}-outer-limit">
-            <div class="${prefix}-middle">
-              <div class="${prefix}-inner" id="${prefix}-beyond">beyond</div>
-            </div>
-          </div>
-        </div>
-      `
-    }
-
-    function scopeCss(prefix: string) {
-      return css`
-        @scope (.${prefix}-outer) to (.${prefix}-outer-limit) {
-          .${prefix}-middle {
-            @scope (.${prefix}-inner) to (.${prefix}-inner-limit) {
-              text-decoration-line: underline;
-            }
-          }
-        }
-      `
-    }
-
-    // The `c-*` structure is styled by the compiled CSS
-    let { getPropertyValue } = await render(page, structure('a') + structure('c'), scopeCss('c'))
-
-    // The `a-*` structure is styled by the authored CSS as-is
-    await page.addStyleTag({ content: scopeCss('a') })
-
-    test.skip(!(await supportsAtScope(page)), '`@scope` is not supported in this browser')
-
-    // The compiled output behaves the same in every browser
-    expect(await getPropertyValue('#c-ctrl', 'text-decoration-line')).toEqual('underline')
-    expect(await getPropertyValue('#c-ancestor', 'text-decoration-line')).toEqual('none')
-    expect(await getPropertyValue('#c-beyond', 'text-decoration-line')).toEqual('none')
-
-    // The authored CSS behaves the same …
-    expect(await getPropertyValue('#a-ctrl', 'text-decoration-line')).toEqual('underline')
-    expect(await getPropertyValue('#a-beyond', 'text-decoration-line')).toEqual('none')
-
-    // … except in Chromium, which resolves the nesting context of a
-    // rule-nested `@scope` without the enclosing scope's constraint (Safari
-    // and Firefox both constrain it). The compiled output normalizes this
-    // browser difference.
-    if (test.info().project.name !== 'chromium') {
-      expect(await getPropertyValue('#a-ancestor', 'text-decoration-line')).toEqual('none')
-    }
-  })
-
-  function supportsAtScope(page: Page) {
-    return page.evaluate(() => typeof CSSScopeRule !== 'undefined')
-  }
-}
-
-for (let kind of ['group', 'peer']) {
-  test(`${kind}-* variants`, async ({ page }) => {
-    let targets = html`
-      <div id="target" class="${kind}-focus:z-10"></div>
-      <div id="applied" class="applied"></div>
-    `
-
-    let { getPropertyValue } = await render(
-      page,
-      kind === 'group'
-        ? html`<div id="trigger" tabindex="0" class="group owner">${targets}</div>`
-        : html`<div class="owner">
-            <div id="trigger" tabindex="0" class="peer"></div>
-            ${targets}
-          </div>`,
-      css`
-        .owner > .applied {
-          @apply ${kind}-focus:z-20;
-        }
-      `,
-    )
-
-    expect(await getPropertyValue('#target', 'z-index')).toEqual('auto')
-    expect(await getPropertyValue('#applied', 'z-index')).toEqual('auto')
-
-    await page.locator('#trigger').focus()
-
-    expect(await getPropertyValue('#target', 'z-index')).toEqual('10')
-    expect(await getPropertyValue('#applied', 'z-index')).toEqual('20')
-
-    await page.locator('#trigger').blur()
-
-    expect(await getPropertyValue('#target', 'z-index')).toEqual('auto')
-    expect(await getPropertyValue('#applied', 'z-index')).toEqual('auto')
-  })
-}
-
-test('group-* variants do not change specificity', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="trigger" tabindex="0" class="group">
-        <div id="target" class="target group-focus:z-10"></div>
-      </div>
-    `,
-    css`
-      @layer utilities {
-        .target {
-          z-index: 20;
-        }
-        .target.equal {
-          z-index: 30;
-        }
-      }
-    `,
-  )
-
-  await page.locator('#trigger').focus()
-
-  expect(await getPropertyValue('#target', 'z-index')).toEqual('10')
-
-  await page.locator('#target').evaluate((element) => element.classList.add('equal'))
-
-  expect(await getPropertyValue('#target', 'z-index')).toEqual('30')
-})
-
-test('stacked group-* variants match regardless of the order of the groups', async ({ page }) => {
-  for (let [outer, inner] of [
-    ['a', 'b'],
-    ['b', 'a'],
-  ]) {
-    let { getPropertyValue } = await render(
-      page,
-      html`
-        <div class="group/${outer}" data-active>
-          <div id="inner" class="group/${inner}" data-active>
-            <div id="target" class="group-data-active/a:group-data-active/b:z-10"></div>
-          </div>
-        </div>
-      `,
-    )
-
-    expect(await getPropertyValue('#target', 'z-index')).toEqual('10')
-
-    await page.locator('#inner').evaluate((element) => element.removeAttribute('data-active'))
-
-    expect(await getPropertyValue('#target', 'z-index')).toEqual('auto')
-  }
-})
-
-test('compound group-* and peer-* variants', async ({ page }) => {
-  let { getPropertyValue } = await render(
-    page,
-    html`
-      <div id="outer" tabindex="0" class="group">
-        <div id="peer" tabindex="0" class="peer"></div>
-        <div id="middle" class="group peer-group-focus:z-20">
-          <div id="target" class="group-peer-focus:z-10"></div>
-        </div>
-      </div>
-    `,
-  )
-
-  await page.locator('#peer').focus()
-
-  expect(await getPropertyValue('#target', 'z-index')).toEqual('10')
-  expect(await getPropertyValue('#middle', 'z-index')).toEqual('auto')
-
-  await page.locator('#outer').focus()
-
-  expect(await getPropertyValue('#target', 'z-index')).toEqual('auto')
-  expect(await getPropertyValue('#middle', 'z-index')).toEqual('20')
-})
-
 // ---
 
 const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8')
 const defaultTheme = fs.readFileSync(path.resolve(__dirname, '..', 'theme.css'), 'utf-8')
-
-async function render(page: Page, content: string, extraCss: string = '') {
-  let { build } = await compile(css`
-    @layer theme, base, components, utilities;
-    @layer theme {
-      ${defaultTheme}
-
-      @theme {
-        --color-red: rgb(255, 0, 0);
-        --color-green: rgb(0, 255, 0);
-        --color-blue: rgb(0, 0, 255);
-        --color-black: black;
-        --color-transparent: transparent;
-      }
-    }
-    @layer base {
-      ${preflight}
-    }
-    @layer utilities {
-      @tailwind utilities;
-    }
-    ${extraCss}
-  `)
-
-  // We noticed that some of the tests depending on the `hover:` variant were
-  // flaky. After some investigation, we found that injected elements had the
-  // `:hover` state without us explicitly hovering over the element.
-  //
-  // To avoid this, we now set up an explicit placeholder element to move the
-  // mouse to before running the tests.
-  content = `<div id="mouse-park" class="size-12"></div>${content}`
-
-  let scanner = new Scanner({})
-  let candidates = scanner.scanFiles([{ content, extension: 'html' }])
-
-  let { code: styles } = optimize(build(candidates))
-
-  content = `<style type="text/css">${styles}</style>${content}`
+async function render(page: Page, content: string) {
   await page.setContent(content)
-
-  await page.locator('#mouse-park').hover()
+  await page.addStyleTag({
+    content: optimizeCss(
+      compile(css`
+        @layer theme, base, components, utilities;
+        @layer theme {
+          ${defaultTheme}
+        }
+        @layer base {
+          ${preflight}
+        }
+        @layer utilities {
+          @tailwind utilities;
+        }
+      `).build(scanFiles([{ content, extension: 'html' }], IO.Sequential | Parsing.Sequential)),
+    ),
+  })
 
   return {
     getPropertyValue(selector: string | [string, string], property: string) {
@@ -2555,16 +278,6 @@ async function render(page: Page, content: string, extraCss: string = '') {
         property,
       )
     },
-
-    async getPropertyList(selector: string | [string, string], property: string) {
-      let value = await getPropertyValue(
-        page,
-        Array.isArray(selector) ? selector : [selector, undefined],
-        property,
-      )
-
-      return segment(value, ',').map((item) => item.trim())
-    },
   }
 }
 
@@ -2573,7 +286,7 @@ async function getPropertyValue(
   selector: [string, string | undefined],
   property: string,
 ) {
-  let value = await page.evaluate(
+  return page.evaluate(
     ([[selector, pseudo], property]) => {
       return window
         .getComputedStyle(document.querySelector(selector)!, pseudo)
@@ -2581,16 +294,4 @@ async function getPropertyValue(
     },
     [selector, property] as const,
   )
-
-  switch (property) {
-    case 'outline':
-      // Order in webkit vs chromium is different. Sort to normalize.
-      return segment(value, ' ')
-        .map((part) => part.trim())
-        .sort((a, z) => a.length - z.length)
-        .join(' ')
-
-    default:
-      return value
-  }
 }
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 05364f5c2..1c05262c7 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -1,444 +1,432 @@
-@theme default {
-  --font-sans:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-  --font-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
+@theme {
+  /* Defaults */
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: var(--transition-timing-function-in-out);
+  --default-font-family: var(--font-family-sans);
+  --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+  --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+  --default-mono-font-family: var(--font-family-mono);
+  --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
+  --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
 
-  --color-red-50: oklch(97.1% 0.013 17.38);
-  --color-red-100: oklch(93.6% 0.032 17.717);
-  --color-red-200: oklch(88.5% 0.062 18.334);
-  --color-red-300: oklch(80.8% 0.114 19.571);
-  --color-red-400: oklch(70.4% 0.191 22.216);
-  --color-red-500: oklch(63.7% 0.237 25.331);
-  --color-red-600: oklch(57.7% 0.245 27.325);
-  --color-red-700: oklch(50.5% 0.213 27.518);
-  --color-red-800: oklch(44.4% 0.177 26.899);
-  --color-red-900: oklch(39.6% 0.141 25.723);
-  --color-red-950: oklch(25.8% 0.092 26.042);
-
-  --color-orange-50: oklch(98% 0.016 73.684);
-  --color-orange-100: oklch(95.4% 0.038 75.164);
-  --color-orange-200: oklch(90.1% 0.076 70.697);
-  --color-orange-300: oklch(83.7% 0.128 66.29);
-  --color-orange-400: oklch(75% 0.183 55.934);
-  --color-orange-500: oklch(70.5% 0.213 47.604);
-  --color-orange-600: oklch(64.6% 0.222 41.116);
-  --color-orange-700: oklch(55.3% 0.195 38.402);
-  --color-orange-800: oklch(47% 0.157 37.304);
-  --color-orange-900: oklch(40.8% 0.123 38.172);
-  --color-orange-950: oklch(26.6% 0.079 36.259);
-
-  --color-amber-50: oklch(98.7% 0.022 95.277);
-  --color-amber-100: oklch(96.2% 0.059 95.617);
-  --color-amber-200: oklch(92.4% 0.12 95.746);
-  --color-amber-300: oklch(87.9% 0.169 91.605);
-  --color-amber-400: oklch(82.8% 0.189 84.429);
-  --color-amber-500: oklch(76.9% 0.188 70.08);
-  --color-amber-600: oklch(66.6% 0.179 58.318);
-  --color-amber-700: oklch(55.5% 0.163 48.998);
-  --color-amber-800: oklch(47.3% 0.137 46.201);
-  --color-amber-900: oklch(41.4% 0.112 45.904);
-  --color-amber-950: oklch(27.9% 0.077 45.635);
-
-  --color-yellow-50: oklch(98.7% 0.026 102.212);
-  --color-yellow-100: oklch(97.3% 0.071 103.193);
-  --color-yellow-200: oklch(94.5% 0.129 101.54);
-  --color-yellow-300: oklch(90.5% 0.182 98.111);
-  --color-yellow-400: oklch(85.2% 0.199 91.936);
-  --color-yellow-500: oklch(79.5% 0.184 86.047);
-  --color-yellow-600: oklch(68.1% 0.162 75.834);
-  --color-yellow-700: oklch(55.4% 0.135 66.442);
-  --color-yellow-800: oklch(47.6% 0.114 61.907);
-  --color-yellow-900: oklch(42.1% 0.095 57.708);
-  --color-yellow-950: oklch(28.6% 0.066 53.813);
-
-  --color-lime-50: oklch(98.6% 0.031 120.757);
-  --color-lime-100: oklch(96.7% 0.067 122.328);
-  --color-lime-200: oklch(93.8% 0.127 124.321);
-  --color-lime-300: oklch(89.7% 0.196 126.665);
-  --color-lime-400: oklch(84.1% 0.238 128.85);
-  --color-lime-500: oklch(76.8% 0.233 130.85);
-  --color-lime-600: oklch(64.8% 0.2 131.684);
-  --color-lime-700: oklch(53.2% 0.157 131.589);
-  --color-lime-800: oklch(45.3% 0.124 130.933);
-  --color-lime-900: oklch(40.5% 0.101 131.063);
-  --color-lime-950: oklch(27.4% 0.072 132.109);
-
-  --color-green-50: oklch(98.2% 0.018 155.826);
-  --color-green-100: oklch(96.2% 0.044 156.743);
-  --color-green-200: oklch(92.5% 0.084 155.995);
-  --color-green-300: oklch(87.1% 0.15 154.449);
-  --color-green-400: oklch(79.2% 0.209 151.711);
-  --color-green-500: oklch(72.3% 0.219 149.579);
-  --color-green-600: oklch(62.7% 0.194 149.214);
-  --color-green-700: oklch(52.7% 0.154 150.069);
-  --color-green-800: oklch(44.8% 0.119 151.328);
-  --color-green-900: oklch(39.3% 0.095 152.535);
-  --color-green-950: oklch(26.6% 0.065 152.934);
-
-  --color-emerald-50: oklch(97.9% 0.021 166.113);
-  --color-emerald-100: oklch(95% 0.052 163.051);
-  --color-emerald-200: oklch(90.5% 0.093 164.15);
-  --color-emerald-300: oklch(84.5% 0.143 164.978);
-  --color-emerald-400: oklch(76.5% 0.177 163.223);
-  --color-emerald-500: oklch(69.6% 0.17 162.48);
-  --color-emerald-600: oklch(59.6% 0.145 163.225);
-  --color-emerald-700: oklch(50.8% 0.118 165.612);
-  --color-emerald-800: oklch(43.2% 0.095 166.913);
-  --color-emerald-900: oklch(37.8% 0.077 168.94);
-  --color-emerald-950: oklch(26.2% 0.051 172.552);
-
-  --color-teal-50: oklch(98.4% 0.014 180.72);
-  --color-teal-100: oklch(95.3% 0.051 180.801);
-  --color-teal-200: oklch(91% 0.096 180.426);
-  --color-teal-300: oklch(85.5% 0.138 181.071);
-  --color-teal-400: oklch(77.7% 0.152 181.912);
-  --color-teal-500: oklch(70.4% 0.14 182.503);
-  --color-teal-600: oklch(60% 0.118 184.704);
-  --color-teal-700: oklch(51.1% 0.096 186.391);
-  --color-teal-800: oklch(43.7% 0.078 188.216);
-  --color-teal-900: oklch(38.6% 0.063 188.416);
-  --color-teal-950: oklch(27.7% 0.046 192.524);
-
-  --color-cyan-50: oklch(98.4% 0.019 200.873);
-  --color-cyan-100: oklch(95.6% 0.045 203.388);
-  --color-cyan-200: oklch(91.7% 0.08 205.041);
-  --color-cyan-300: oklch(86.5% 0.127 207.078);
-  --color-cyan-400: oklch(78.9% 0.154 211.53);
-  --color-cyan-500: oklch(71.5% 0.143 215.221);
-  --color-cyan-600: oklch(60.9% 0.126 221.723);
-  --color-cyan-700: oklch(52% 0.105 223.128);
-  --color-cyan-800: oklch(45% 0.085 224.283);
-  --color-cyan-900: oklch(39.8% 0.07 227.392);
-  --color-cyan-950: oklch(30.2% 0.056 229.695);
-
-  --color-sky-50: oklch(97.7% 0.013 236.62);
-  --color-sky-100: oklch(95.1% 0.026 236.824);
-  --color-sky-200: oklch(90.1% 0.058 230.902);
-  --color-sky-300: oklch(82.8% 0.111 230.318);
-  --color-sky-400: oklch(74.6% 0.16 232.661);
-  --color-sky-500: oklch(68.5% 0.169 237.323);
-  --color-sky-600: oklch(58.8% 0.158 241.966);
-  --color-sky-700: oklch(50% 0.134 242.749);
-  --color-sky-800: oklch(44.3% 0.11 240.79);
-  --color-sky-900: oklch(39.1% 0.09 240.876);
-  --color-sky-950: oklch(29.3% 0.066 243.157);
-
-  --color-blue-50: oklch(97% 0.014 254.604);
-  --color-blue-100: oklch(93.2% 0.032 255.585);
-  --color-blue-200: oklch(88.2% 0.059 254.128);
-  --color-blue-300: oklch(80.9% 0.105 251.813);
-  --color-blue-400: oklch(70.7% 0.165 254.624);
-  --color-blue-500: oklch(62.3% 0.214 259.815);
-  --color-blue-600: oklch(54.6% 0.245 262.881);
-  --color-blue-700: oklch(48.8% 0.243 264.376);
-  --color-blue-800: oklch(42.4% 0.199 265.638);
-  --color-blue-900: oklch(37.9% 0.146 265.522);
-  --color-blue-950: oklch(28.2% 0.091 267.935);
-
-  --color-indigo-50: oklch(96.2% 0.018 272.314);
-  --color-indigo-100: oklch(93% 0.034 272.788);
-  --color-indigo-200: oklch(87% 0.065 274.039);
-  --color-indigo-300: oklch(78.5% 0.115 274.713);
-  --color-indigo-400: oklch(67.3% 0.182 276.935);
-  --color-indigo-500: oklch(58.5% 0.233 277.117);
-  --color-indigo-600: oklch(51.1% 0.262 276.966);
-  --color-indigo-700: oklch(45.7% 0.24 277.023);
-  --color-indigo-800: oklch(39.8% 0.195 277.366);
-  --color-indigo-900: oklch(35.9% 0.144 278.697);
-  --color-indigo-950: oklch(25.7% 0.09 281.288);
-
-  --color-violet-50: oklch(96.9% 0.016 293.756);
-  --color-violet-100: oklch(94.3% 0.029 294.588);
-  --color-violet-200: oklch(89.4% 0.057 293.283);
-  --color-violet-300: oklch(81.1% 0.111 293.571);
-  --color-violet-400: oklch(70.2% 0.183 293.541);
-  --color-violet-500: oklch(60.6% 0.25 292.717);
-  --color-violet-600: oklch(54.1% 0.281 293.009);
-  --color-violet-700: oklch(49.1% 0.27 292.581);
-  --color-violet-800: oklch(43.2% 0.232 292.759);
-  --color-violet-900: oklch(38% 0.189 293.745);
-  --color-violet-950: oklch(28.3% 0.141 291.089);
-
-  --color-purple-50: oklch(97.7% 0.014 308.299);
-  --color-purple-100: oklch(94.6% 0.033 307.174);
-  --color-purple-200: oklch(90.2% 0.063 306.703);
-  --color-purple-300: oklch(82.7% 0.119 306.383);
-  --color-purple-400: oklch(71.4% 0.203 305.504);
-  --color-purple-500: oklch(62.7% 0.265 303.9);
-  --color-purple-600: oklch(55.8% 0.288 302.321);
-  --color-purple-700: oklch(49.6% 0.265 301.924);
-  --color-purple-800: oklch(43.8% 0.218 303.724);
-  --color-purple-900: oklch(38.1% 0.176 304.987);
-  --color-purple-950: oklch(29.1% 0.149 302.717);
-
-  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
-  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
-  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
-  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
-  --color-fuchsia-400: oklch(74% 0.238 322.16);
-  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
-  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
-  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
-  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
-  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
-  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
-
-  --color-pink-50: oklch(97.1% 0.014 343.198);
-  --color-pink-100: oklch(94.8% 0.028 342.258);
-  --color-pink-200: oklch(89.9% 0.061 343.231);
-  --color-pink-300: oklch(82.3% 0.12 346.018);
-  --color-pink-400: oklch(71.8% 0.202 349.761);
-  --color-pink-500: oklch(65.6% 0.241 354.308);
-  --color-pink-600: oklch(59.2% 0.249 0.584);
-  --color-pink-700: oklch(52.5% 0.223 3.958);
-  --color-pink-800: oklch(45.9% 0.187 3.815);
-  --color-pink-900: oklch(40.8% 0.153 2.432);
-  --color-pink-950: oklch(28.4% 0.109 3.907);
-
-  --color-rose-50: oklch(96.9% 0.015 12.422);
-  --color-rose-100: oklch(94.1% 0.03 12.58);
-  --color-rose-200: oklch(89.2% 0.058 10.001);
-  --color-rose-300: oklch(81% 0.117 11.638);
-  --color-rose-400: oklch(71.2% 0.194 13.428);
-  --color-rose-500: oklch(64.5% 0.246 16.439);
-  --color-rose-600: oklch(58.6% 0.253 17.585);
-  --color-rose-700: oklch(51.4% 0.222 16.935);
-  --color-rose-800: oklch(45.5% 0.188 13.697);
-  --color-rose-900: oklch(41% 0.159 10.272);
-  --color-rose-950: oklch(27.1% 0.105 12.094);
-
-  --color-slate-50: oklch(98.4% 0.003 247.858);
-  --color-slate-100: oklch(96.8% 0.007 247.896);
-  --color-slate-200: oklch(92.9% 0.013 255.508);
-  --color-slate-300: oklch(86.9% 0.022 252.894);
-  --color-slate-400: oklch(70.4% 0.04 256.788);
-  --color-slate-500: oklch(55.4% 0.046 257.417);
-  --color-slate-600: oklch(44.6% 0.043 257.281);
-  --color-slate-700: oklch(37.2% 0.044 257.287);
-  --color-slate-800: oklch(27.9% 0.041 260.031);
-  --color-slate-900: oklch(20.8% 0.042 265.755);
-  --color-slate-950: oklch(12.9% 0.042 264.695);
-
-  --color-gray-50: oklch(98.5% 0.002 247.839);
-  --color-gray-100: oklch(96.7% 0.003 264.542);
-  --color-gray-200: oklch(92.8% 0.006 264.531);
-  --color-gray-300: oklch(87.2% 0.01 258.338);
-  --color-gray-400: oklch(70.7% 0.022 261.325);
-  --color-gray-500: oklch(55.1% 0.027 264.364);
-  --color-gray-600: oklch(44.6% 0.03 256.802);
-  --color-gray-700: oklch(37.3% 0.034 259.733);
-  --color-gray-800: oklch(27.8% 0.033 256.848);
-  --color-gray-900: oklch(21% 0.034 264.665);
-  --color-gray-950: oklch(13% 0.028 261.692);
-
-  --color-zinc-50: oklch(98.5% 0 none);
-  --color-zinc-100: oklch(96.7% 0.001 286.375);
-  --color-zinc-200: oklch(92% 0.004 286.32);
-  --color-zinc-300: oklch(87.1% 0.006 286.286);
-  --color-zinc-400: oklch(70.5% 0.015 286.067);
-  --color-zinc-500: oklch(55.2% 0.016 285.938);
-  --color-zinc-600: oklch(44.2% 0.017 285.786);
-  --color-zinc-700: oklch(37% 0.013 285.805);
-  --color-zinc-800: oklch(27.4% 0.006 286.033);
-  --color-zinc-900: oklch(21% 0.006 285.885);
-  --color-zinc-950: oklch(14.1% 0.005 285.823);
-
-  --color-neutral-50: oklch(98.5% 0 none);
-  --color-neutral-100: oklch(97% 0 none);
-  --color-neutral-200: oklch(92.2% 0 none);
-  --color-neutral-300: oklch(87% 0 none);
-  --color-neutral-400: oklch(70.8% 0 none);
-  --color-neutral-500: oklch(55.6% 0 none);
-  --color-neutral-600: oklch(43.9% 0 none);
-  --color-neutral-700: oklch(37.1% 0 none);
-  --color-neutral-800: oklch(26.9% 0 none);
-  --color-neutral-900: oklch(20.5% 0 none);
-  --color-neutral-950: oklch(14.5% 0 none);
-
-  --color-stone-50: oklch(98.5% 0.001 106.423);
-  --color-stone-100: oklch(97% 0.001 106.424);
-  --color-stone-200: oklch(92.3% 0.003 48.717);
-  --color-stone-300: oklch(86.9% 0.005 56.366);
-  --color-stone-400: oklch(70.9% 0.01 56.259);
-  --color-stone-500: oklch(55.3% 0.013 58.071);
-  --color-stone-600: oklch(44.4% 0.011 73.639);
-  --color-stone-700: oklch(37.4% 0.01 67.558);
-  --color-stone-800: oklch(26.8% 0.007 34.298);
-  --color-stone-900: oklch(21.6% 0.006 56.043);
-  --color-stone-950: oklch(14.7% 0.004 49.25);
-
-  --color-mauve-50: oklch(98.5% 0 none);
-  --color-mauve-100: oklch(96% 0.003 325.6);
-  --color-mauve-200: oklch(92.2% 0.005 325.62);
-  --color-mauve-300: oklch(86.5% 0.012 325.68);
-  --color-mauve-400: oklch(71.1% 0.019 323.02);
-  --color-mauve-500: oklch(54.2% 0.034 322.5);
-  --color-mauve-600: oklch(43.5% 0.029 321.78);
-  --color-mauve-700: oklch(36.4% 0.029 323.89);
-  --color-mauve-800: oklch(26.3% 0.024 320.12);
-  --color-mauve-900: oklch(21.2% 0.019 322.12);
-  --color-mauve-950: oklch(14.5% 0.008 326);
-
-  --color-olive-50: oklch(98.8% 0.003 106.5);
-  --color-olive-100: oklch(96.6% 0.005 106.5);
-  --color-olive-200: oklch(93% 0.007 106.5);
-  --color-olive-300: oklch(88% 0.011 106.6);
-  --color-olive-400: oklch(73.7% 0.021 106.9);
-  --color-olive-500: oklch(58% 0.031 107.3);
-  --color-olive-600: oklch(46.6% 0.025 107.3);
-  --color-olive-700: oklch(39.4% 0.023 107.4);
-  --color-olive-800: oklch(28.6% 0.016 107.4);
-  --color-olive-900: oklch(22.8% 0.013 107.4);
-  --color-olive-950: oklch(15.3% 0.006 107.1);
-
-  --color-mist-50: oklch(98.7% 0.002 197.1);
-  --color-mist-100: oklch(96.3% 0.002 197.1);
-  --color-mist-200: oklch(92.5% 0.005 214.3);
-  --color-mist-300: oklch(87.2% 0.007 219.6);
-  --color-mist-400: oklch(72.3% 0.014 214.4);
-  --color-mist-500: oklch(56% 0.021 213.5);
-  --color-mist-600: oklch(45% 0.017 213.2);
-  --color-mist-700: oklch(37.8% 0.015 216);
-  --color-mist-800: oklch(27.5% 0.011 216.9);
-  --color-mist-900: oklch(21.8% 0.008 223.9);
-  --color-mist-950: oklch(14.8% 0.004 228.8);
-
-  --color-taupe-50: oklch(98.6% 0.002 67.8);
-  --color-taupe-100: oklch(96% 0.002 17.2);
-  --color-taupe-200: oklch(92.2% 0.005 34.3);
-  --color-taupe-300: oklch(86.8% 0.007 39.5);
-  --color-taupe-400: oklch(71.4% 0.014 41.2);
-  --color-taupe-500: oklch(54.7% 0.021 43.1);
-  --color-taupe-600: oklch(43.8% 0.017 39.3);
-  --color-taupe-700: oklch(36.7% 0.016 35.7);
-  --color-taupe-800: oklch(26.8% 0.011 36.5);
-  --color-taupe-900: oklch(21.4% 0.009 43.1);
-  --color-taupe-950: oklch(14.7% 0.004 49.3);
+  /* Breakpoints */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 
+  /* Colors */
   --color-black: #000;
   --color-white: #fff;
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+  --color-stone-50: #fafaf9;
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a8a29e;
+  --color-stone-500: #78716c;
+  --color-stone-600: #57534e;
+  --color-stone-700: #44403c;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #a21caf;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-300: #fda4af;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+  --color-rose-800: #9f1239;
+  --color-rose-900: #881337;
+  --color-rose-950: #4c0519;
 
-  --spacing: 0.25rem;
+  /* Animations */
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
 
-  --breakpoint-sm: 40rem;
-  --breakpoint-md: 48rem;
-  --breakpoint-lg: 64rem;
-  --breakpoint-xl: 80rem;
-  --breakpoint-2xl: 96rem;
+  /* Blurs */
+  --blur: 8px;
+  --blur-sm: 4px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
 
-  --container-3xs: 16rem;
-  --container-2xs: 18rem;
-  --container-xs: 20rem;
-  --container-sm: 24rem;
-  --container-md: 28rem;
-  --container-lg: 32rem;
-  --container-xl: 36rem;
-  --container-2xl: 42rem;
-  --container-3xl: 48rem;
-  --container-4xl: 56rem;
-  --container-5xl: 64rem;
-  --container-6xl: 72rem;
-  --container-7xl: 80rem;
-
-  --text-xs: 0.75rem;
-  --text-xs--line-height: calc(1 / 0.75);
-  --text-sm: 0.875rem;
-  --text-sm--line-height: calc(1.25 / 0.875);
-  --text-base: 1rem;
-  --text-base--line-height: calc(1.5 / 1);
-  --text-lg: 1.125rem;
-  --text-lg--line-height: calc(1.75 / 1.125);
-  --text-xl: 1.25rem;
-  --text-xl--line-height: calc(1.75 / 1.25);
-  --text-2xl: 1.5rem;
-  --text-2xl--line-height: calc(2 / 1.5);
-  --text-3xl: 1.875rem;
-  --text-3xl--line-height: calc(2.25 / 1.875);
-  --text-4xl: 2.25rem;
-  --text-4xl--line-height: calc(2.5 / 2.25);
-  --text-5xl: 3rem;
-  --text-5xl--line-height: 1;
-  --text-6xl: 3.75rem;
-  --text-6xl--line-height: 1;
-  --text-7xl: 4.5rem;
-  --text-7xl--line-height: 1;
-  --text-8xl: 6rem;
-  --text-8xl--line-height: 1;
-  --text-9xl: 8rem;
-  --text-9xl--line-height: 1;
-
-  --font-weight-thin: 100;
-  --font-weight-extralight: 200;
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-  --font-weight-black: 900;
-
-  --tracking-tighter: -0.05em;
-  --tracking-tight: -0.025em;
-  --tracking-normal: 0em;
-  --tracking-wide: 0.025em;
-  --tracking-wider: 0.05em;
-  --tracking-widest: 0.1em;
-
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
-
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
+  /* Radii */
+  --radius: 0.25rem;
+  --radius-sm: 0.125rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
   --radius-2xl: 1rem;
   --radius-3xl: 1.5rem;
-  --radius-4xl: 2rem;
 
-  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
-  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Shadows */
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 
-  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
-  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
-  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+  /* Inset shadows */
+  --inset-shadow-xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --inset-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
 
-  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
-  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
-  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
-  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
-  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+  /* Drop shadows */
+  --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
+  --drop-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.05);
+  --drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06);
+  --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
+  --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
   --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
 
-  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
-  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
-  --text-shadow-sm:
-    0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
-  --text-shadow-md:
-    0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
-  --text-shadow-lg:
-    0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
+  /* 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;
 
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  /* Widths */
+  --width-3xs: 16rem;
+  --width-2xs: 18rem;
+  --width-xs: 20rem;
+  --width-sm: 24rem;
+  --width-md: 28rem;
+  --width-lg: 32rem;
+  --width-xl: 36rem;
+  --width-2xl: 42rem;
+  --width-3xl: 48rem;
+  --width-4xl: 56rem;
+  --width-5xl: 64rem;
+  --width-6xl: 72rem;
+  --width-7xl: 80rem;
+  --width-prose: 65ch;
 
-  --animate-spin: spin 1s linear infinite;
-  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animate-bounce: bounce 1s infinite;
+  /* Fonts */
+  --font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+
+  /* Type scale */
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1rem;
+  --font-size-sm: 0.875rem;
+  --font-size-sm--line-height: 1.25rem;
+  --font-size-base: 1rem;
+  --font-size-base--line-height: 1.5rem;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.75rem;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.75rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-2xl--line-height: 2rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-3xl--line-height: 2.25rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-4xl--line-height: 2.5rem;
+  --font-size-5xl: 3rem;
+  --font-size-5xl--line-height: 1;
+  --font-size-6xl: 3.75rem;
+  --font-size-6xl--line-height: 1;
+  --font-size-7xl: 4.5rem;
+  --font-size-7xl--line-height: 1;
+  --font-size-8xl: 6rem;
+  --font-size-8xl--line-height: 1;
+  --font-size-9xl: 8rem;
+  --font-size-9xl--line-height: 1;
+
+  /* Letter spacing */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* Line-height */
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --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;
+
+  /* Transition timing functions */
+  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-timing-function-linear: linear;
+  --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
+  --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
+  --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
   @keyframes spin {
     to {
@@ -472,39 +460,4 @@
       animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
     }
   }
-
-  --blur-xs: 4px;
-  --blur-sm: 8px;
-  --blur-md: 12px;
-  --blur-lg: 16px;
-  --blur-xl: 24px;
-  --blur-2xl: 40px;
-  --blur-3xl: 64px;
-
-  --perspective-dramatic: 100px;
-  --perspective-near: 300px;
-  --perspective-normal: 500px;
-  --perspective-midrange: 800px;
-  --perspective-distant: 1200px;
-
-  --aspect-video: 16 / 9;
-
-  --default-transition-duration: 150ms;
-  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --default-font-family: --theme(--font-sans, initial);
-  --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);
-  --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);
-  --default-mono-font-family: --theme(--font-mono, initial);
-  --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial);
-  --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial);
-}
-
-/* Deprecated */
-@theme default inline reference {
-  --blur: 8px;
-  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
-  --radius: 0.25rem;
-  --max-width-prose: 65ch;
 }
diff --git a/packages/tailwindcss/tsconfig.json b/packages/tailwindcss/tsconfig.json
index d2131cbeb..6ae022f65 100644
--- a/packages/tailwindcss/tsconfig.json
+++ b/packages/tailwindcss/tsconfig.json
@@ -1,6 +1,3 @@
 {
   "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "verbatimModuleSyntax": false,
-  },
 }
diff --git a/packages/tailwindcss/tsup.config.ts b/packages/tailwindcss/tsup.config.ts
index 6bc831056..8e19667be 100644
--- a/packages/tailwindcss/tsup.config.ts
+++ b/packages/tailwindcss/tsup.config.ts
@@ -1,34 +1,11 @@
 import { defineConfig } from 'tsup'
 
-export default defineConfig([
-  {
-    format: ['esm'],
-    minify: true,
-    dts: true,
-    entry: {
-      lib: 'src/index.ts',
-      plugin: 'src/plugin.ts',
-      colors: 'src/compat/colors.ts',
-      'default-theme': 'src/compat/default-theme.ts',
-      'flatten-color-palette': 'src/compat/flatten-color-palette.ts',
-    },
-    define: {
-      'process.env.FEATURES_ENV': JSON.stringify(process.env.FEATURES_ENV ?? 'insiders'),
-    },
+export default defineConfig({
+  format: ['esm', 'cjs'],
+  clean: true,
+  minify: true,
+  dts: true,
+  entry: {
+    lib: 'src/index.ts',
   },
-  {
-    format: ['cjs'],
-    minify: true,
-    dts: true,
-    entry: {
-      plugin: 'src/plugin.cts',
-      lib: 'src/index.cts',
-      colors: 'src/compat/colors.cts',
-      'default-theme': 'src/compat/default-theme.cts',
-      'flatten-color-palette': 'src/compat/flatten-color-palette.cts',
-    },
-    define: {
-      'process.env.FEATURES_ENV': JSON.stringify(process.env.FEATURES_ENV ?? 'insiders'),
-    },
-  },
-])
+})
diff --git a/packages/tailwindcss/vitest.config.mts b/packages/tailwindcss/vitest.config.mts
deleted file mode 100644
index b13b94d07..000000000
--- a/packages/tailwindcss/vitest.config.mts
+++ /dev/null
@@ -1,12 +0,0 @@
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { defineConfig } from 'vitest/config'
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
-
-export default defineConfig({
-  test: {
-    snapshotSerializers: [path.resolve(__dirname, 'src/test-utils/custom-serializer.ts')],
-    exclude: ['**/*.spec.?(c|m)[jt]s?(x)', 'integrations/**/*'],
-  },
-})
diff --git a/packages/@tailwindcss-browser/vitest.config.mts b/packages/tailwindcss/vitest.config.ts
similarity index 58%
rename from packages/@tailwindcss-browser/vitest.config.mts
rename to packages/tailwindcss/vitest.config.ts
index f6f91227d..d819d1bad 100644
--- a/packages/@tailwindcss-browser/vitest.config.mts
+++ b/packages/tailwindcss/vitest.config.ts
@@ -2,6 +2,6 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
-    exclude: ['**/*.spec.?(c|m)[jt]s?(x)', '**/node_modules/**'],
+    exclude: ['**/*.spec.?(c|m)[jt]s?(x)'],
   },
 })
diff --git a/packages/tsconfig.base.json b/packages/tsconfig.base.json
index 93af60669..32597214a 100644
--- a/packages/tsconfig.base.json
+++ b/packages/tsconfig.base.json
@@ -1,8 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es2022",
-    "lib": ["es2022", "esnext.disposable", "dom"],
-
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
     "module": "ESNext",
     "moduleDetection": "force",
     "allowJs": true,
diff --git a/patches/@napi-rs__cli@3.7.4.patch b/patches/@napi-rs__cli@3.7.4.patch
deleted file mode 100644
index e72212499..000000000
--- a/patches/@napi-rs__cli@3.7.4.patch
+++ /dev/null
@@ -1,80 +0,0 @@
-diff --git a/dist/cli.js b/dist/cli.js
-index c4c2d568bc070c07dbf3a1f9f4a0c946466668cf..353bbca86e3261a2ba9a8fc56dc612c7c84dab6d 100755
---- a/dist/cli.js
-+++ b/dist/cli.js
-@@ -1,4 +1,13 @@
- #!/usr/bin/env node
-+// PATCHED (see patches/@napi-rs__cli@3.7.4.patch): the embedded wasi loader
-+// and worker templates below retry `new WASI(...)` with narrower preopens,
-+// because preopening `/` throws `UVWASI_EACCES` on sandboxed platforms (e.g.
-+// OpenHarmony), which would make the generated wasm binding fail to load.
-+//
-+// The same templates also exist in `dist/index.js` and `dist/index.cjs` (the
-+// programmatic API). Those are intentionally NOT patched because we only
-+// build through the `napi` bin, which runs this file. If we ever start using
-+// the programmatic API, update the patch to cover those bundles too.
- import { createRequire } from "node:module";
- import { Cli, Command, Option } from "clipanion";
- import path, { basename, dirname, isAbsolute, join, parse, resolve } from "node:path";
-@@ -1021,13 +1030,25 @@ const {
- 
- const __rootDir = __nodePath.parse(process.cwd()).root
- 
--const __wasi = new __nodeWASI({
--  version: 'preview1',
--  env: process.env,
--  preopens: {
--    [__rootDir]: __rootDir,
-+const __wasi = (() => {
-+  // Preopening '/' fails with UVWASI_EACCES in sandboxed environments (e.g.
-+  // OpenHarmony, Android), which would prevent the wasm binding from loading
-+  // at all. Retry with narrower preopens instead. Without any preopens the
-+  // binding still loads; only file system access is unavailable.
-+  let lastError = null
-+  for (const dir of [__rootDir, process.cwd(), null]) {
-+    try {
-+      return new __nodeWASI({
-+        version: 'preview1',
-+        env: process.env,
-+        preopens: dir === null ? {} : { [dir]: dir },
-+      })
-+    } catch (error) {
-+      lastError = error
-+    }
-   }
--})
-+  throw lastError
-+})()
- 
- const __emnapiContext = __emnapiGetDefaultContext()
- 
-@@ -1151,13 +1172,22 @@ const __rootDir = parse(process.cwd()).root;
- 
- const handler = new MessageHandler({
-   onLoad({ wasmModule, wasmMemory }) {
--    const wasi = new WASI({
--      version: 'preview1',
--      env: process.env,
--      preopens: {
--        [__rootDir]: __rootDir,
--      },
--    });
-+    // Keep in sync with the preopen fallback in the main-thread loader.
-+    const wasi = (() => {
-+      let lastError = null;
-+      for (const dir of [__rootDir, process.cwd(), null]) {
-+        try {
-+          return new WASI({
-+            version: 'preview1',
-+            env: process.env,
-+            preopens: dir === null ? {} : { [dir]: dir },
-+          });
-+        } catch (error) {
-+          lastError = error;
-+        }
-+      }
-+      throw lastError;
-+    })();
- 
-     return instantiateNapiModuleSync(wasmModule, {
-       childThread: true,
diff --git a/patches/@parcel__watcher@2.6.0.patch b/patches/@parcel__watcher@2.6.0.patch
deleted file mode 100644
index 37ff83f04..000000000
--- a/patches/@parcel__watcher@2.6.0.patch
+++ /dev/null
@@ -1,70 +0,0 @@
-diff --git a/index.js b/index.js
-index 78ee744d74900c39a839cafa46b295258fc86307..f28fd092644ccfb8aff2618b966cb5219a181a02 100644
---- a/index.js
-+++ b/index.js
-@@ -1,43 +1,32 @@
- const {createWrapper} = require('./wrapper');
- 
--let name = `@parcel/watcher-${process.platform}-${process.arch}`;
--if (process.platform === 'linux') {
--  const {MUSL, familySync} = require('detect-libc');
--  const family = familySync();
--  if (family === MUSL) {
--    name += '-musl';
--  } else {
--    name += '-glibc';
--  }
--}
-+// We need to take the `process.env.PLATFORM_LIBC` into account, and we also
-+// need static analysis, so we can't make use of the `parts.push(…)` approach.
-+function loadPackage() {
-+  if (process.platform === 'linux') {
-+    if (process.env.PLATFORM_LIBC === "musl") {
-+      return require(`@parcel/watcher-${process.platform}-${process.arch}-musl`)
-+    } else if (process.env.PLATFORM_LIBC === "glibc") {
-+      return require(`@parcel/watcher-${process.platform}-${process.arch}-glibc`)
-+    } else {
-+      let { MUSL, GLIBC, familySync } = require('detect-libc')
-+      let family = familySync()
- 
--let binding;
--try {
--  binding = require(name);
--} catch (err) {
--  handleError(err);
--  try {
--    binding = require('./build/Release/watcher.node');
--  } catch (err) {
--    handleError(err);
--    try {
--      binding = require('./build/Debug/watcher.node');
--    } catch (err) {
--      handleError(err);
--      throw new Error(
--        `No prebuild or local build of @parcel/watcher found. Tried ${name}. Please ensure it is installed (don't use --no-optional when installing with npm). Otherwise it is possible we don't support your platform yet. If this is the case, please report an issue to https://github.com/parcel-bundler/watcher.`,
--      );
--    }
--  }
--}
- 
--function handleError(err) {
--  if (err?.code !== 'MODULE_NOT_FOUND') {
--    throw err;
-+      if (family === MUSL) {
-+        return require(`@parcel/watcher-${process.platform}-${process.arch}-musl`)
-+      } else if (family === GLIBC) {
-+        return require(`@parcel/watcher-${process.platform}-${process.arch}-glibc`)
-+      } else {
-+        throw new Error(`Unsupported libc on: ${process.platform}-${process.arch}`)
-+      }
-+    }
-+  } else {
-+    return require(`@parcel/watcher-${process.platform}-${process.arch}`)
-   }
- }
- 
--const wrapper = createWrapper(binding);
-+const wrapper = createWrapper(loadPackage());
- exports.writeSnapshot = wrapper.writeSnapshot;
- exports.getEventsSince = wrapper.getEventsSince;
- exports.subscribe = wrapper.subscribe;
diff --git a/patches/lightningcss@1.33.0.patch b/patches/lightningcss@1.33.0.patch
deleted file mode 100644
index e70be2315..000000000
--- a/patches/lightningcss@1.33.0.patch
+++ /dev/null
@@ -1,62 +0,0 @@
-diff --git a/node/index.js b/node/index.js
-index 6fe25aef457aa5448f9ee6204da1e253f5534800..742be0229b94450b631b6e069ffc372d2b35df47 100644
---- a/node/index.js
-+++ b/node/index.js
-@@ -1,25 +1,40 @@
--let parts = [process.platform, process.arch];
--if (process.platform === 'linux') {
--  const { MUSL, familySync } = require('detect-libc');
--  const family = familySync();
--  if (family === MUSL) {
--    parts.push('musl');
--  } else if (process.arch === 'arm') {
--    parts.push('gnueabihf');
-+// We need to take the `process.env.PLATFORM_LIBC` into account, and we also
-+// need static analysis, so we can't make use of the `parts.push(…)` approach.
-+function loadPackage() {
-+  if (process.platform === 'linux') {
-+    if (process.env.PLATFORM_LIBC === 'musl') {
-+      return require(`lightningcss-${process.platform}-${process.arch}-musl`)
-+    } else if (process.env.PLATFORM_LIBC === 'glibc') {
-+      if (process.arch === 'arm') {
-+        return require(`lightningcss-${process.platform}-${process.arch}-gnueabihf`)
-+      } else {
-+        return require(`lightningcss-${process.platform}-${process.arch}-gnu`)
-+      }
-+    } else {
-+      let { MUSL, GLIBC, familySync } = require('detect-libc')
-+      let family = familySync()
-+
-+      if (family === MUSL) {
-+        return require(`lightningcss-${process.platform}-${process.arch}-musl`)
-+      } else if (family === GLIBC) {
-+        if (process.arch === 'arm') {
-+          return require(`lightningcss-${process.platform}-${process.arch}-gnueabihf`)
-+        } else {
-+          return require(`lightningcss-${process.platform}-${process.arch}-gnu`)
-+        }
-+      } else {
-+        throw new Error(`Unsupported libc on: ${process.platform}-${process.arch}`)
-+      }
-+    }
-+  } else if (process.platform === 'win32') {
-+    return require(`lightningcss-${process.platform}-${process.arch}-msvc`)
-   } else {
--    parts.push('gnu');
-+    return require(`lightningcss-${process.platform}-${process.arch}`)
-   }
--} else if (process.platform === 'win32') {
--  parts.push('msvc');
- }
- 
--let native;
--try {
--  native = require(`lightningcss-${parts.join('-')}`);
--} catch (err) {
--  native = require(`../lightningcss.${parts.join('-')}.node`);
--}
- 
-+let native = loadPackage();
- module.exports.transform = wrap(native.transform);
- module.exports.transformStyleAttribute = wrap(native.transformStyleAttribute);
- module.exports.bundle = wrap(native.bundle);
diff --git a/playgrounds/nextjs/app/layout.tsx b/playgrounds/nextjs/app/layout.tsx
index 41ee7f492..cf832e94e 100644
--- a/playgrounds/nextjs/app/layout.tsx
+++ b/playgrounds/nextjs/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="[&_h1]:font-thin">
       <head>{/* <script src="https://cdn.tailwindcss.com"></script> */}</head>
       <body className={inter.className}>{children}</body>
     </html>
diff --git a/playgrounds/nextjs/app/page.module.css b/playgrounds/nextjs/app/page.module.css
index b0117f44c..e0c1bf51e 100644
--- a/playgrounds/nextjs/app/page.module.css
+++ b/playgrounds/nextjs/app/page.module.css
@@ -1,5 +1,228 @@
-@reference "./globals.css";
-
-.heading {
-  @apply text-red-500;
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  width: 100%;
+  z-index: 2;
+  font-family: var(--font-mono);
+}
+
+.description a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.description p {
+  position: relative;
+  margin: 0;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
+}
+
+.code {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(25%, auto));
+  max-width: 100%;
+  width: var(--max-width);
+}
+
+.card {
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition:
+    background 200ms,
+    border 200ms;
+}
+
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
+}
+
+.card h2 {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+
+.card p {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  max-width: 30ch;
+  text-wrap: balance;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
+}
+
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: '';
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+}
+
+.logo {
+  position: relative;
+}
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(
+      to bottom,
+      rgba(var(--background-start-rgb), 1),
+      rgba(var(--callout-rgb), 0.5)
+    );
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%);
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .vercelLogo {
+    filter: invert(1);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
 }
diff --git a/playgrounds/nextjs/app/page.tsx b/playgrounds/nextjs/app/page.tsx
index 70ea89898..3c5390442 100644
--- a/playgrounds/nextjs/app/page.tsx
+++ b/playgrounds/nextjs/app/page.tsx
@@ -1,5 +1,3 @@
-import styles from './page.module.css'
-
 export default function Home() {
-  return <h1 className={styles.heading}>Hello world!</h1>
+  return <h1 className="text-3xl font-bold underline border ring">Hello world!</h1>
 }
diff --git a/playgrounds/nextjs/package.json b/playgrounds/nextjs/package.json
index 5487af5a5..7e603f827 100644
--- a/playgrounds/nextjs/package.json
+++ b/playgrounds/nextjs/package.json
@@ -5,20 +5,23 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "@tailwindcss/postcss": "workspace:^",
-    "fast-glob": "^3.3.3",
-    "next": "16.2.7",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
+    "fast-glob": "^3.3.2",
+    "next": "14.1.0",
+    "react": "^18",
+    "react-dom": "^18",
     "tailwindcss": "workspace:^"
   },
   "devDependencies": {
-    "@types/node": "catalog:",
-    "@types/react": "19.2.15",
-    "@types/react-dom": "19.2.3",
-    "typescript": "^6.0.3"
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "typescript": "^5"
   }
 }
diff --git a/playgrounds/nextjs/postcss.config.js b/playgrounds/nextjs/postcss.config.js
index 52b9b4baf..6c434006e 100644
--- a/playgrounds/nextjs/postcss.config.js
+++ b/playgrounds/nextjs/postcss.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
+  plugins: ['@tailwindcss/postcss'],
 }
diff --git a/playgrounds/nextjs/tsconfig.json b/playgrounds/nextjs/tsconfig.json
index 27414aae7..862143548 100644
--- a/playgrounds/nextjs/tsconfig.json
+++ b/playgrounds/nextjs/tsconfig.json
@@ -10,7 +10,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {
@@ -20,14 +20,7 @@
     "paths": {
       "@/*": ["./*"],
     },
-    "target": "ES2017",
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"],
 }
diff --git a/playgrounds/v3/.eslintrc.json b/playgrounds/v3/.eslintrc.json
deleted file mode 100644
index 591f680e4..000000000
--- a/playgrounds/v3/.eslintrc.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "react/no-unescaped-entities": "off",
-    "react/jsx-no-comment-textnodes": "off"
-  }
-}
diff --git a/playgrounds/v3/.gitignore b/playgrounds/v3/.gitignore
deleted file mode 100644
index fd3dbb571..000000000
--- a/playgrounds/v3/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/playgrounds/v3/app/globals.css b/playgrounds/v3/app/globals.css
deleted file mode 100644
index a31e44411..000000000
--- a/playgrounds/v3/app/globals.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
diff --git a/playgrounds/v3/app/layout.tsx b/playgrounds/v3/app/layout.tsx
deleted file mode 100644
index cf832e94e..000000000
--- a/playgrounds/v3/app/layout.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
-  return (
-    <html lang="en" className="[&_h1]:font-thin">
-      <head>{/* <script src="https://cdn.tailwindcss.com"></script> */}</head>
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
diff --git a/playgrounds/v3/app/page.tsx b/playgrounds/v3/app/page.tsx
deleted file mode 100644
index 3c5390442..000000000
--- a/playgrounds/v3/app/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Home() {
-  return <h1 className="text-3xl font-bold underline border ring">Hello world!</h1>
-}
diff --git a/playgrounds/v3/next.config.mjs b/playgrounds/v3/next.config.mjs
deleted file mode 100644
index 1d6147825..000000000
--- a/playgrounds/v3/next.config.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-export default nextConfig
diff --git a/playgrounds/v3/package.json b/playgrounds/v3/package.json
deleted file mode 100644
index 8c08310db..000000000
--- a/playgrounds/v3/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "v3-playground",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "upgrade": "node scripts/upgrade.mjs"
-  },
-  "dependencies": {
-    "next": "16.2.7",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "tailwindcss": "^3"
-  },
-  "devDependencies": {
-    "@types/node": "catalog:",
-    "@types/react": "19.2.15",
-    "@types/react-dom": "19.2.3",
-    "autoprefixer": "^10.5.0",
-    "typescript": "^6.0.3"
-  }
-}
diff --git a/playgrounds/v3/postcss.config.js b/playgrounds/v3/postcss.config.js
deleted file mode 100644
index 33ad091d2..000000000
--- a/playgrounds/v3/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/playgrounds/v3/scripts/upgrade.mjs b/playgrounds/v3/scripts/upgrade.mjs
deleted file mode 100644
index 51791a394..000000000
--- a/playgrounds/v3/scripts/upgrade.mjs
+++ /dev/null
@@ -1,40 +0,0 @@
-import { execSync } from 'node:child_process'
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
-const cwd = path.join(__dirname, '..')
-
-let originalLockfile = await fs.readFile(path.join(cwd, '../../pnpm-lock.yaml'), 'utf-8')
-
-console.log('Overwriting dependencies for @tailwindcss/upgrade')
-
-// Apply package patches
-let json = JSON.parse(await fs.readFile('package.json', 'utf-8'))
-json.pnpm = {
-  overrides: {
-    '@tailwindcss/upgrade>tailwindcss': 'file:../../dist/tailwindcss.tgz',
-    '@tailwindcss/upgrade>@tailwindcss/node': 'file:../../dist/tailwindcss-node.tgz',
-  },
-}
-json.devDependencies['@tailwindcss/upgrade'] = 'file:../../dist/tailwindcss-upgrade.tgz'
-await fs.writeFile('package.json', JSON.stringify(json, null, 2))
-
-try {
-  execSync('pnpm install --ignore-workspace', { cwd })
-} catch (error) {
-  console.error(error.stdout?.toString() ?? error)
-}
-
-execSync('npx @tailwindcss/upgrade --force', { cwd, stdio: 'inherit' })
-
-// Undo package patches
-json = JSON.parse(await fs.readFile('package.json', 'utf-8'))
-delete json.pnpm
-delete json.devDependencies['@tailwindcss/upgrade']
-await fs.writeFile('package.json', JSON.stringify(json, null, 2))
-
-// Restore original lockfile (to avoid unnecessary changes in git diff)
-await fs.writeFile(path.join(cwd, '../../pnpm-lock.yaml'), originalLockfile)
-await fs.unlink(path.join(cwd, 'pnpm-lock.yaml'))
diff --git a/playgrounds/v3/tailwind.config.js b/playgrounds/v3/tailwind.config.js
deleted file mode 100644
index 88358a3df..000000000
--- a/playgrounds/v3/tailwind.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./app/**/*.tsx'],
-}
diff --git a/playgrounds/v3/tsconfig.json b/playgrounds/v3/tsconfig.json
deleted file mode 100644
index 27414aae7..000000000
--- a/playgrounds/v3/tsconfig.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next",
-      },
-    ],
-    "paths": {
-      "@/*": ["./*"],
-    },
-    "target": "ES2017",
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-  ],
-  "exclude": ["node_modules"],
-}
diff --git a/playgrounds/vite/package.json b/playgrounds/vite/package.json
index 25ab1a33b..48f7bae60 100644
--- a/playgrounds/vite/package.json
+++ b/playgrounds/vite/package.json
@@ -5,20 +5,20 @@
   "scripts": {
     "lint": "tsc --noEmit",
     "dev": "bun --bun vite ./src --config ./vite.config.ts",
-    "build": "bun --bun vite build ./src --outDir ../dist --config ./vite.config.ts --emptyOutDir",
-    "preview": "bun --bun vite preview"
+    "build": "bun --bun vite build ./src --outDir ../dist --config ./vite.config.ts --emptyOutDir"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "bun": "^1.0.26",
+    "vite": "^5.0.11",
+    "vite-plugin-handlebars": "^2.0.0"
   },
   "dependencies": {
     "@tailwindcss/vite": "workspace:^",
-    "@vitejs/plugin-react": "^6.0.2",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "tailwindcss": "workspace:^"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.15",
-    "@types/react-dom": "^19.2.3",
-    "bun": "^1.3.14",
-    "vite": "catalog:"
+    "tailwindcss": "workspace:^",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/packages/@tailwindcss-cli/src/commands/canonicalize/fixtures/input.css b/playgrounds/vite/src/app.css
similarity index 100%
rename from packages/@tailwindcss-cli/src/commands/canonicalize/fixtures/input.css
rename to playgrounds/vite/src/app.css
diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx
index 8ec502989..ab1808bf7 100644
--- a/playgrounds/vite/src/app.tsx
+++ b/playgrounds/vite/src/app.tsx
@@ -1,7 +1,10 @@
+import { Foo } from './foo'
+
 export function App() {
   return (
     <div className="m-3 p-3 border">
       <h1 className="text-blue-500">Hello World</h1>
+      <Foo />
     </div>
   )
 }
diff --git a/playgrounds/vite/src/bar.tsx b/playgrounds/vite/src/bar.tsx
new file mode 100644
index 000000000..1efa2c004
--- /dev/null
+++ b/playgrounds/vite/src/bar.tsx
@@ -0,0 +1,7 @@
+export function Bar() {
+  return (
+    <div>
+      <h2 className="text-red-500 underline">Bar</h2>
+    </div>
+  )
+}
diff --git a/playgrounds/vite/src/foo.tsx b/playgrounds/vite/src/foo.tsx
new file mode 100644
index 000000000..60ec68b55
--- /dev/null
+++ b/playgrounds/vite/src/foo.tsx
@@ -0,0 +1,10 @@
+import { Bar } from './bar'
+
+export function Foo() {
+  return (
+    <div>
+      <h2 className="text-blue-500">Foo</h2>
+      <Bar />
+    </div>
+  )
+}
diff --git a/playgrounds/vite/src/index.css b/playgrounds/vite/src/index.css
deleted file mode 100644
index d4b507858..000000000
--- a/playgrounds/vite/src/index.css
+++ /dev/null
@@ -1 +0,0 @@
-@import 'tailwindcss';
diff --git a/playgrounds/vite/src/index.html b/playgrounds/vite/src/index.html
index 858e0cf2f..d4b60a84a 100644
--- a/playgrounds/vite/src/index.html
+++ b/playgrounds/vite/src/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>≈ Playground</title>
+    <link rel="stylesheet" href="./app.css" />
   </head>
   <body class="h-full">
     <div id="app"></div>
diff --git a/playgrounds/vite/src/main.tsx b/playgrounds/vite/src/main.tsx
index 6b81fa915..b8df681f3 100644
--- a/playgrounds/vite/src/main.tsx
+++ b/playgrounds/vite/src/main.tsx
@@ -2,8 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { App } from './app'
 
-import './index.css'
-
 ReactDOM.createRoot(document.getElementById('app')!).render(
   <React.StrictMode>
     <App />
diff --git a/playgrounds/vite/src/tailwind.css b/playgrounds/vite/src/tailwind.css
new file mode 100644
index 000000000..6f0b0d649
--- /dev/null
+++ b/playgrounds/vite/src/tailwind.css
@@ -0,0 +1 @@
+@tailwind;
diff --git a/playgrounds/vite/tsconfig.json b/playgrounds/vite/tsconfig.json
index 8ff04861d..2c0c2c0d9 100644
--- a/playgrounds/vite/tsconfig.json
+++ b/playgrounds/vite/tsconfig.json
@@ -5,7 +5,6 @@
     "module": "ESNext",
     "moduleDetection": "force",
     "allowJs": true,
-    "jsx": "react-jsx",
 
     /* Bundler mode */
     "moduleResolution": "Bundler",
@@ -21,6 +20,6 @@
     "noFallthroughCasesInSwitch": true,
     "forceConsistentCasingInFileNames": true,
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts"],
   "exclude": ["node_modules"],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8382b2ba5..c869e9925 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,141 +1,42 @@
-lockfileVersion: '9.0'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-catalogs:
-  default:
-    '@parcel/watcher':
-      specifier: 2.6.0
-      version: 2.6.0
-    '@parcel/watcher-darwin-arm64':
-      specifier: 2.6.0
-      version: 2.6.0
-    '@parcel/watcher-darwin-x64':
-      specifier: 2.6.0
-      version: 2.6.0
-    '@parcel/watcher-linux-arm64-glibc':
-      specifier: 2.6.0
-      version: 2.6.0
-    '@parcel/watcher-linux-arm64-musl':
-      specifier: 2.6.0
-      version: 2.6.0
-    '@parcel/watcher-linux-x64-glibc':
-      specifier: 2.6.0
-      version: 2.6.0
-    '@parcel/watcher-linux-x64-musl':
-      specifier: 2.6.0
-      version: 2.6.0
-    '@parcel/watcher-win32-x64':
-      specifier: 2.6.0
-      version: 2.6.0
-    '@types/node':
-      specifier: 22.20.1
-      version: 22.20.1
-    dedent:
-      specifier: 1.7.2
-      version: 1.7.2
-    enhanced-resolve:
-      specifier: ^5.24.5
-      version: 5.24.5
-    lightningcss:
-      specifier: 1.33.0
-      version: 1.33.0
-    lightningcss-darwin-arm64:
-      specifier: 1.33.0
-      version: 1.33.0
-    lightningcss-darwin-x64:
-      specifier: 1.33.0
-      version: 1.33.0
-    lightningcss-linux-arm64-gnu:
-      specifier: 1.33.0
-      version: 1.33.0
-    lightningcss-linux-arm64-musl:
-      specifier: 1.33.0
-      version: 1.33.0
-    lightningcss-linux-x64-gnu:
-      specifier: 1.33.0
-      version: 1.33.0
-    lightningcss-linux-x64-musl:
-      specifier: 1.33.0
-      version: 1.33.0
-    lightningcss-win32-x64-msvc:
-      specifier: 1.33.0
-      version: 1.33.0
-    postcss:
-      specifier: ^8.5.25
-      version: 8.5.25
-    prettier:
-      specifier: 3.9.6
-      version: 3.9.6
-    vite:
-      specifier: ^8.2.0
-      version: 8.2.0
-    webpack:
-      specifier: ^5.109.2
-      version: 5.109.2
-
-patchedDependencies:
-  '@napi-rs/cli@3.7.4': 9912bf0a9c2cef8329d11c41fbce4d33ce2bdcf660a630b258c962c0a3c44bed
-  '@parcel/watcher@2.6.0': 705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da
-  lightningcss@1.33.0: 1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930
-
 importers:
 
   .:
     devDependencies:
       '@playwright/test':
-        specifier: ^1.62.1
-        version: 1.62.1
+        specifier: ^1.41.2
+        version: 1.41.2
       '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
-      postcss:
-        specifier: 'catalog:'
-        version: 8.5.25
-      postcss-import:
-        specifier: ^16.1.1
-        version: 16.1.1(postcss@8.5.25)
+        specifier: ^20.11.19
+        version: 20.11.20
+      '@vitest/coverage-v8':
+        specifier: ^1.2.1
+        version: 1.2.2(vitest@1.2.2)
       prettier:
-        specifier: 'catalog:'
-        version: 3.9.6
-      prettier-plugin-embed:
-        specifier: ^0.5.1
-        version: 0.5.1
+        specifier: ^3.2.5
+        version: 3.2.5
       prettier-plugin-organize-imports:
-        specifier: ^4.3.0
-        version: 4.3.0(prettier@3.9.6)(typescript@5.9.3)
+        specifier: ^3.2.4
+        version: 3.2.4(prettier@3.2.5)(typescript@5.3.3)
       tsup:
-        specifier: ^8.5.1
-        version: 8.5.1(jiti@2.7.0)(postcss@8.5.25)(typescript@5.9.3)(yaml@2.9.0)
+        specifier: ^8.0.1
+        version: 8.0.1(typescript@5.3.3)
       turbo:
-        specifier: ^2.10.8
-        version: 2.10.8
+        specifier: ^1.12.4
+        version: 1.12.4
       typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
+        specifier: ^5.3.3
+        version: 5.3.3
       vitest:
-        specifier: ^4.1.10
-        version: 4.1.10(@types/node@22.20.1)(vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))
+        specifier: ^1.1.3
+        version: 1.2.2(@types/node@20.11.20)
 
-  crates/node:
-    devDependencies:
-      '@emnapi/core':
-        specifier: 1.11.3
-        version: 1.11.3
-      '@emnapi/runtime':
-        specifier: 1.11.3
-        version: 1.11.3
-      '@napi-rs/cli':
-        specifier: 3.7.4
-        version: 3.7.4(patch_hash=9912bf0a9c2cef8329d11c41fbce4d33ce2bdcf660a630b258c962c0a3c44bed)(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(@types/node@25.9.1)(node-addon-api@8.7.0)
-      '@napi-rs/wasm-runtime':
-        specifier: ^1.2.2
-        version: 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      emnapi:
-        specifier: 1.11.3
-        version: 1.11.3(node-addon-api@8.7.0)
+  oxide/crates/node:
     optionalDependencies:
       '@tailwindcss/oxide-android-arm64':
         specifier: workspace:*
@@ -164,395 +65,114 @@ importers:
       '@tailwindcss/oxide-linux-x64-musl':
         specifier: workspace:*
         version: link:npm/linux-x64-musl
-      '@tailwindcss/oxide-wasm32-wasi':
-        specifier: workspace:*
-        version: link:npm/wasm32-wasi
-      '@tailwindcss/oxide-win32-arm64-msvc':
-        specifier: workspace:*
-        version: link:npm/win32-arm64-msvc
       '@tailwindcss/oxide-win32-x64-msvc':
         specifier: workspace:*
         version: link:npm/win32-x64-msvc
-
-  crates/node/npm/android-arm-eabi: {}
-
-  crates/node/npm/android-arm64: {}
-
-  crates/node/npm/darwin-arm64: {}
-
-  crates/node/npm/darwin-x64: {}
-
-  crates/node/npm/freebsd-x64: {}
-
-  crates/node/npm/linux-arm-gnueabihf: {}
-
-  crates/node/npm/linux-arm64-gnu: {}
-
-  crates/node/npm/linux-arm64-musl: {}
-
-  crates/node/npm/linux-x64-gnu: {}
-
-  crates/node/npm/linux-x64-musl: {}
-
-  crates/node/npm/wasm32-wasi:
-    dependencies:
-      '@emnapi/core':
-        specifier: ^1.11.3
-        version: 1.11.3
-      '@emnapi/runtime':
-        specifier: ^1.11.3
-        version: 1.11.3
-      '@emnapi/wasi-threads':
-        specifier: ^1.2.3
-        version: 1.2.3
-      '@napi-rs/wasm-runtime':
-        specifier: ^1.2.2
-        version: 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      '@tybys/wasm-util':
-        specifier: ^0.10.3
-        version: 0.10.3
-      tslib:
-        specifier: ^2.8.1
-        version: 2.8.1
-
-  crates/node/npm/win32-arm64-msvc: {}
-
-  crates/node/npm/win32-x64-msvc: {}
-
-  integrations:
     devDependencies:
-      dedent:
-        specifier: 'catalog:'
-        version: 1.7.2
-      fast-glob:
-        specifier: ^3.3.3
-        version: 3.3.3
-      source-map-js:
-        specifier: ^1.2.1
-        version: 1.2.1
-      yaml:
-        specifier: ^2.9.0
-        version: 2.9.0
+      '@napi-rs/cli':
+        specifier: ^2.17.0
+        version: 2.18.0
 
-  packages/@tailwindcss-browser:
-    devDependencies:
-      h3:
-        specifier: ^1.15.11
-        version: 1.15.11
-      listhen:
-        specifier: ^1.10.1
-        version: 1.10.1(@parcel/watcher@2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da))
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
+  oxide/crates/node/npm/android-arm-eabi: {}
+
+  oxide/crates/node/npm/android-arm64: {}
+
+  oxide/crates/node/npm/darwin-arm64: {}
+
+  oxide/crates/node/npm/darwin-x64: {}
+
+  oxide/crates/node/npm/freebsd-x64: {}
+
+  oxide/crates/node/npm/linux-arm-gnueabihf: {}
+
+  oxide/crates/node/npm/linux-arm64-gnu: {}
+
+  oxide/crates/node/npm/linux-arm64-musl: {}
+
+  oxide/crates/node/npm/linux-x64-gnu: {}
+
+  oxide/crates/node/npm/linux-x64-musl: {}
+
+  oxide/crates/node/npm/win32-x64-msvc: {}
 
   packages/@tailwindcss-cli:
     dependencies:
       '@parcel/watcher':
-        specifier: 'catalog:'
-        version: 2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da)
-      '@tailwindcss/node':
-        specifier: workspace:*
-        version: link:../@tailwindcss-node
+        specifier: ^2.4.1
+        version: 2.4.1
       '@tailwindcss/oxide':
-        specifier: workspace:*
-        version: link:../../crates/node
-      enhanced-resolve:
-        specifier: 'catalog:'
-        version: 5.24.5
+        specifier: workspace:^
+        version: link:../../oxide/crates/node
       mri:
         specifier: ^1.2.0
         version: 1.2.0
       picocolors:
-        specifier: ^1.1.1
-        version: 1.1.1
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-
-  packages/@tailwindcss-node:
-    dependencies:
-      '@jridgewell/remapping':
-        specifier: ^2.3.5
-        version: 2.3.5
-      enhanced-resolve:
-        specifier: 'catalog:'
-        version: 5.24.5
-      jiti:
-        specifier: ^2.7.0
-        version: 2.7.0
-      lightningcss:
-        specifier: 'catalog:'
-        version: 1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930)
-      magic-string:
-        specifier: ^1.1.0
-        version: 1.1.0
-      source-map-js:
-        specifier: ^1.2.1
-        version: 1.2.1
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-
-  packages/@tailwindcss-postcss:
-    dependencies:
-      '@alloc/quick-lru':
-        specifier: ^5.2.0
-        version: 5.2.0
-      '@tailwindcss/node':
-        specifier: workspace:*
-        version: link:../@tailwindcss-node
-      '@tailwindcss/oxide':
-        specifier: workspace:*
-        version: link:../../crates/node
+        specifier: ^1.0.0
+        version: 1.0.0
       postcss:
-        specifier: 'catalog:'
-        version: 8.5.25
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
-      '@types/postcss-import':
-        specifier: 14.0.3
-        version: 14.0.3
-      dedent:
-        specifier: 'catalog:'
-        version: 1.7.2
-      internal-example-plugin:
-        specifier: workspace:*
-        version: link:../internal-example-plugin
+        specifier: 8.4.24
+        version: 8.4.24
       postcss-import:
-        specifier: ^16.1.1
-        version: 16.1.1(postcss@8.5.25)
-
-  packages/@tailwindcss-standalone:
-    dependencies:
-      '@tailwindcss/aspect-ratio':
-        specifier: ^0.4.2
-        version: 0.4.2(tailwindcss@packages+tailwindcss)
-      '@tailwindcss/cli':
-        specifier: workspace:*
-        version: link:../@tailwindcss-cli
-      '@tailwindcss/forms':
-        specifier: ^0.5.11
-        version: 0.5.11(tailwindcss@packages+tailwindcss)
-      '@tailwindcss/typography':
-        specifier: ^0.5.20
-        version: 0.5.20(tailwindcss@packages+tailwindcss)
-      detect-libc:
-        specifier: 1.0.3
-        version: 1.0.3
-      enhanced-resolve:
-        specifier: 'catalog:'
-        version: 5.24.5
+        specifier: ^16.0.0
+        version: 16.0.0(postcss@8.4.24)
       tailwindcss:
-        specifier: workspace:*
+        specifier: workspace:^
         version: link:../tailwindcss
     devDependencies:
-      '@parcel/watcher-darwin-arm64':
-        specifier: 'catalog:'
-        version: 2.6.0
-      '@parcel/watcher-darwin-x64':
-        specifier: 'catalog:'
-        version: 2.6.0
-      '@parcel/watcher-linux-arm64-glibc':
-        specifier: 'catalog:'
-        version: 2.6.0
-      '@parcel/watcher-linux-arm64-musl':
-        specifier: 'catalog:'
-        version: 2.6.0
-      '@parcel/watcher-linux-x64-glibc':
-        specifier: 'catalog:'
-        version: 2.6.0
-      '@parcel/watcher-linux-x64-musl':
-        specifier: 'catalog:'
-        version: 2.6.0
-      '@parcel/watcher-win32-x64':
-        specifier: 'catalog:'
-        version: 2.6.0
-      '@types/bun':
-        specifier: ^1.3.14
-        version: 1.3.14
-      bun:
-        specifier: ^1.3.14
-        version: 1.3.14
-      lightningcss-darwin-arm64:
-        specifier: 'catalog:'
-        version: 1.33.0
-      lightningcss-darwin-x64:
-        specifier: 'catalog:'
-        version: 1.33.0
-      lightningcss-linux-arm64-gnu:
-        specifier: 'catalog:'
-        version: 1.33.0
-      lightningcss-linux-arm64-musl:
-        specifier: 'catalog:'
-        version: 1.33.0
-      lightningcss-linux-x64-gnu:
-        specifier: 'catalog:'
-        version: 1.33.0
-      lightningcss-linux-x64-musl:
-        specifier: 'catalog:'
-        version: 1.33.0
-      lightningcss-win32-x64-msvc:
-        specifier: 'catalog:'
-        version: 1.33.0
-
-  packages/@tailwindcss-turbopack:
-    dependencies:
-      '@alloc/quick-lru':
-        specifier: ^5.2.0
-        version: 5.2.0
-      '@tailwindcss/node':
-        specifier: workspace:*
-        version: link:../@tailwindcss-node
-      '@tailwindcss/oxide':
-        specifier: workspace:*
-        version: link:../../crates/node
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
-      webpack:
-        specifier: 'catalog:'
-        version: 5.109.2(esbuild@0.27.7)(postcss@8.5.25)
-
-  packages/@tailwindcss-upgrade:
-    dependencies:
-      '@tailwindcss/node':
-        specifier: workspace:*
-        version: link:../@tailwindcss-node
-      '@tailwindcss/oxide':
-        specifier: workspace:*
-        version: link:../../crates/node
-      dedent:
-        specifier: 'catalog:'
-        version: 1.7.2
-      enhanced-resolve:
-        specifier: 'catalog:'
-        version: 5.24.5
-      globby:
-        specifier: ^16.2.2
-        version: 16.2.2
-      jiti:
-        specifier: ^2.7.0
-        version: 2.7.0
-      mri:
-        specifier: ^1.2.0
-        version: 1.2.0
-      picocolors:
-        specifier: ^1.1.1
-        version: 1.1.1
-      postcss:
-        specifier: 'catalog:'
-        version: 8.5.25
-      postcss-import:
-        specifier: ^16.1.1
-        version: 16.1.1(postcss@8.5.25)
-      postcss-selector-parser:
-        specifier: ^7.1.4
-        version: 7.1.4
-      prettier:
-        specifier: 'catalog:'
-        version: 3.9.6
-      semver:
-        specifier: ^7.8.5
-        version: 7.8.5
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-      tree-sitter:
-        specifier: ^0.25.1
-        version: 0.25.1
-      tree-sitter-typescript:
-        specifier: ^0.23.2
-        version: 0.23.2(tree-sitter@0.25.1)
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
       '@types/postcss-import':
         specifier: ^14.0.3
         version: 14.0.3
-      '@types/semver':
-        specifier: ^7.8.0
-        version: 7.8.0
+
+  packages/@tailwindcss-postcss:
+    dependencies:
+      '@tailwindcss/oxide':
+        specifier: workspace:^
+        version: link:../../oxide/crates/node
+      postcss-import:
+        specifier: ^16.0.0
+        version: 16.0.0(postcss@8.4.24)
+      tailwindcss:
+        specifier: workspace:^
+        version: link:../tailwindcss
+    devDependencies:
+      '@types/node':
+        specifier: ^20.11.17
+        version: 20.11.17
+      '@types/postcss-import':
+        specifier: ^14.0.3
+        version: 14.0.3
+      postcss:
+        specifier: 8.4.24
+        version: 8.4.24
 
   packages/@tailwindcss-vite:
     dependencies:
-      '@tailwindcss/node':
-        specifier: workspace:*
-        version: link:../@tailwindcss-node
-      '@tailwindcss/oxide':
-        specifier: workspace:*
-        version: link:../../crates/node
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
-      vite:
-        specifier: 'catalog:'
-        version: 8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
-
-  packages/@tailwindcss-webpack:
-    dependencies:
-      '@alloc/quick-lru':
-        specifier: ^5.2.0
-        version: 5.2.0
-      '@rspack/core':
-        specifier: ^1.0.0 || ^2.0.0
-        version: 2.0.2(@swc/helpers@0.5.15)
-      '@tailwindcss/node':
-        specifier: workspace:*
-        version: link:../@tailwindcss-node
-      '@tailwindcss/oxide':
-        specifier: workspace:*
-        version: link:../../crates/node
-      tailwindcss:
-        specifier: workspace:*
-        version: link:../tailwindcss
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
-      webpack:
-        specifier: 'catalog:'
-        version: 5.109.2(esbuild@0.27.7)(postcss@8.5.25)
-
-  packages/internal-example-plugin: {}
-
-  packages/tailwindcss:
-    devDependencies:
-      '@jridgewell/remapping':
-        specifier: ^2.3.5
-        version: 2.3.5
       '@tailwindcss/oxide':
         specifier: workspace:^
-        version: link:../../crates/node
+        version: link:../../oxide/crates/node
+      tailwindcss:
+        specifier: workspace:^
+        version: link:../tailwindcss
+    devDependencies:
       '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
-      dedent:
-        specifier: 'catalog:'
-        version: 1.7.2
+        specifier: ^20.11.17
+        version: 20.11.17
+      vite:
+        specifier: ^5.0.11
+        version: 5.1.1(@types/node@20.11.17)
+
+  packages/tailwindcss:
+    dependencies:
       lightningcss:
-        specifier: 'catalog:'
-        version: 1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930)
-      magic-string:
-        specifier: ^1.1.0
-        version: 1.1.0
-      source-map-js:
-        specifier: ^1.2.1
-        version: 1.2.1
+        specifier: ^1.24.0
+        version: 1.24.0
+    devDependencies:
+      '@tailwindcss/oxide':
+        specifier: workspace:^
+        version: link:../../oxide/crates/node
+      '@types/node':
+        specifier: ^20.10.8
+        version: 20.11.17
 
   playgrounds/nextjs:
     dependencies:
@@ -560,64 +180,39 @@ importers:
         specifier: workspace:^
         version: link:../../packages/@tailwindcss-postcss
       fast-glob:
-        specifier: ^3.3.3
-        version: 3.3.3
+        specifier: ^3.3.2
+        version: 3.3.2
       next:
-        specifier: 16.2.7
-        version: 16.2.7(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        specifier: 14.1.0
+        version: 14.1.0(react-dom@18.2.0)(react@18.2.0)
       react:
-        specifier: 19.2.7
-        version: 19.2.7
+        specifier: ^18
+        version: 18.2.0
       react-dom:
-        specifier: 19.2.7
-        version: 19.2.7(react@19.2.7)
+        specifier: ^18
+        version: 18.2.0(react@18.2.0)
       tailwindcss:
         specifier: workspace:^
         version: link:../../packages/tailwindcss
     devDependencies:
       '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
+        specifier: ^20
+        version: 20.11.17
       '@types/react':
-        specifier: 19.2.15
-        version: 19.2.15
+        specifier: ^18
+        version: 18.2.55
       '@types/react-dom':
-        specifier: 19.2.3
-        version: 19.2.3(@types/react@19.2.15)
+        specifier: ^18
+        version: 18.2.19
+      eslint:
+        specifier: ^8
+        version: 8.44.0
+      eslint-config-next:
+        specifier: 14.1.0
+        version: 14.1.0(eslint@8.44.0)(typescript@5.3.3)
       typescript:
-        specifier: ^6.0.3
-        version: 6.0.3
-
-  playgrounds/v3:
-    dependencies:
-      next:
-        specifier: 16.2.7
-        version: 16.2.7(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      react:
-        specifier: 19.2.7
-        version: 19.2.7
-      react-dom:
-        specifier: 19.2.7
-        version: 19.2.7(react@19.2.7)
-      tailwindcss:
-        specifier: ^3
-        version: 3.4.19(yaml@2.9.0)
-    devDependencies:
-      '@types/node':
-        specifier: 'catalog:'
-        version: 22.20.1
-      '@types/react':
-        specifier: 19.2.15
-        version: 19.2.15
-      '@types/react-dom':
-        specifier: 19.2.3
-        version: 19.2.3(@types/react@19.2.15)
-      autoprefixer:
-        specifier: ^10.5.0
-        version: 10.5.0(postcss@8.5.25)
-      typescript:
-        specifier: ^6.0.3
-        version: 6.0.3
+        specifier: ^5
+        version: 5.3.3
 
   playgrounds/vite:
     dependencies:
@@ -625,2725 +220,4001 @@ importers:
         specifier: workspace:^
         version: link:../../packages/@tailwindcss-vite
       '@vitejs/plugin-react':
-        specifier: ^6.0.2
-        version: 6.0.2(vite@8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))
+        specifier: ^4.2.1
+        version: 4.2.1(vite@5.1.1)
       react:
-        specifier: ^19.2.6
-        version: 19.2.6
+        specifier: ^18.2.0
+        version: 18.2.0
       react-dom:
-        specifier: ^19.2.6
-        version: 19.2.6(react@19.2.6)
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
       tailwindcss:
         specifier: workspace:^
         version: link:../../packages/tailwindcss
     devDependencies:
       '@types/react':
-        specifier: ^19.2.15
-        version: 19.2.15
+        specifier: ^18.2.48
+        version: 18.2.55
       '@types/react-dom':
-        specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.15)
+        specifier: ^18.2.18
+        version: 18.2.19
       bun:
-        specifier: ^1.3.14
-        version: 1.3.14
+        specifier: ^1.0.26
+        version: 1.0.26
       vite:
-        specifier: 'catalog:'
-        version: 8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
+        specifier: ^5.0.11
+        version: 5.1.1(@types/node@20.11.20)
+      vite-plugin-handlebars:
+        specifier: ^2.0.0
+        version: 2.0.0(@types/node@20.11.20)
 
 packages:
 
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
+  /@aashutoshrathi/word-wrap@1.2.6:
+    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
 
-  '@emnapi/core@1.10.0':
-    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
+  /@ampproject/remapping@2.2.1:
+    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.22
 
-  '@emnapi/core@1.11.3':
-    resolution: {integrity: sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==}
+  /@babel/code-frame@7.23.5:
+    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.23.4
+      chalk: 2.4.2
+    dev: false
 
-  '@emnapi/core@2.0.0-alpha.3':
-    resolution: {integrity: sha512-AZypUeJ/yByuxyS7BlSNRDOMLMlROYtjYdIAuBmJssVz1UJDSeYxLrdizhXCFYhedC5bqd/ASy8EuNXbVVXp9g==}
+  /@babel/compat-data@7.23.5:
+    resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==}
+    engines: {node: '>=6.9.0'}
+    dev: false
 
-  '@emnapi/runtime@1.10.0':
-    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+  /@babel/core@7.23.9:
+    resolution: {integrity: sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.6
+      '@babel/helper-compilation-targets': 7.23.6
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.9)
+      '@babel/helpers': 7.23.9
+      '@babel/parser': 7.23.9
+      '@babel/template': 7.23.9
+      '@babel/traverse': 7.23.9
+      '@babel/types': 7.23.9
+      convert-source-map: 2.0.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
 
-  '@emnapi/runtime@1.11.3':
-    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
+  /@babel/generator@7.23.6:
+    resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.9
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.22
+      jsesc: 2.5.2
+    dev: false
 
-  '@emnapi/runtime@2.0.0-alpha.3':
-    resolution: {integrity: sha512-hFPAhMUjJD9BSyCANEISPOogeXC9Zo9ZQl7L6vKnaVsMkCtzznaW/naYypeyl0Gv5rYfWYsZbpixTMpjDJzQeA==}
+  /@babel/helper-compilation-targets@7.23.6:
+    resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/compat-data': 7.23.5
+      '@babel/helper-validator-option': 7.23.5
+      browserslist: 4.22.3
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    dev: false
 
-  '@emnapi/wasi-threads@1.2.1':
-    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+  /@babel/helper-environment-visitor@7.22.20:
+    resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
+    engines: {node: '>=6.9.0'}
+    dev: false
 
-  '@emnapi/wasi-threads@1.2.3':
-    resolution: {integrity: sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==}
+  /@babel/helper-function-name@7.23.0:
+    resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.23.9
+      '@babel/types': 7.23.9
+    dev: false
 
-  '@emnapi/wasi-threads@2.0.1':
-    resolution: {integrity: sha512-9DsSk+o5NBX0CCJT8s0EROGSGxjR/tKu6aBTaVyq+SjAEQH4XcdcRxPBRzsBLizTTJ49MJjF+jgu3qnO9GLQcQ==}
+  /@babel/helper-hoist-variables@7.22.5:
+    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.9
+    dev: false
 
-  '@esbuild/aix-ppc64@0.27.7':
-    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
-    engines: {node: '>=18'}
+  /@babel/helper-module-imports@7.22.15:
+    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.9
+    dev: false
+
+  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.9):
+    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.9
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-validator-identifier': 7.22.20
+    dev: false
+
+  /@babel/helper-plugin-utils@7.22.5:
+    resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helper-simple-access@7.22.5:
+    resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.9
+    dev: false
+
+  /@babel/helper-split-export-declaration@7.22.6:
+    resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.9
+    dev: false
+
+  /@babel/helper-string-parser@7.23.4:
+    resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier@7.22.20:
+    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-option@7.23.5:
+    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helpers@7.23.9:
+    resolution: {integrity: sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.23.9
+      '@babel/traverse': 7.23.9
+      '@babel/types': 7.23.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/highlight@7.23.4:
+    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.20
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: false
+
+  /@babel/parser@7.23.9:
+    resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.23.9
+
+  /@babel/plugin-transform-react-jsx-self@7.23.3(@babel/core@7.23.9):
+    resolution: {integrity: sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.9
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: false
+
+  /@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.9):
+    resolution: {integrity: sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.9
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: false
+
+  /@babel/runtime@7.23.9:
+    resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.1
+    dev: true
+
+  /@babel/template@7.23.9:
+    resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.23.5
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
+    dev: false
+
+  /@babel/traverse@7.23.9:
+    resolution: {integrity: sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.6
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/types@7.23.9:
+    resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.23.4
+      '@babel/helper-validator-identifier': 7.22.20
+      to-fast-properties: 2.0.0
+
+  /@bcoe/v8-coverage@0.2.3:
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+    dev: true
+
+  /@esbuild/aix-ppc64@0.19.12:
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
+    engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/android-arm64@0.27.7':
-    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
-    engines: {node: '>=18'}
+  /@esbuild/android-arm64@0.19.12:
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
+    engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/android-arm@0.27.7':
-    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
-    engines: {node: '>=18'}
+  /@esbuild/android-arm@0.19.12:
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
+    engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/android-x64@0.27.7':
-    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
-    engines: {node: '>=18'}
+  /@esbuild/android-x64@0.19.12:
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
+    engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/darwin-arm64@0.27.7':
-    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
-    engines: {node: '>=18'}
+  /@esbuild/darwin-arm64@0.19.12:
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
+    engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/darwin-x64@0.27.7':
-    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
-    engines: {node: '>=18'}
+  /@esbuild/darwin-x64@0.19.12:
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
+    engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/freebsd-arm64@0.27.7':
-    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
-    engines: {node: '>=18'}
+  /@esbuild/freebsd-arm64@0.19.12:
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
+    engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/freebsd-x64@0.27.7':
-    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
-    engines: {node: '>=18'}
+  /@esbuild/freebsd-x64@0.19.12:
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
+    engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-arm64@0.27.7':
-    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-arm64@0.19.12:
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
+    engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-arm@0.27.7':
-    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-arm@0.19.12:
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
+    engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-ia32@0.27.7':
-    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-ia32@0.19.12:
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
+    engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-loong64@0.27.7':
-    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-loong64@0.19.12:
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
+    engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-mips64el@0.27.7':
-    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-mips64el@0.19.12:
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
+    engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-ppc64@0.27.7':
-    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-ppc64@0.19.12:
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
+    engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-riscv64@0.27.7':
-    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-riscv64@0.19.12:
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
+    engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-s390x@0.27.7':
-    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-s390x@0.19.12:
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
+    engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/linux-x64@0.27.7':
-    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
-    engines: {node: '>=18'}
+  /@esbuild/linux-x64@0.19.12:
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
+    engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/netbsd-arm64@0.27.7':
-    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [netbsd]
-
-  '@esbuild/netbsd-x64@0.27.7':
-    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
-    engines: {node: '>=18'}
+  /@esbuild/netbsd-x64@0.19.12:
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
+    engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/openbsd-arm64@0.27.7':
-    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openbsd]
-
-  '@esbuild/openbsd-x64@0.27.7':
-    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
-    engines: {node: '>=18'}
+  /@esbuild/openbsd-x64@0.19.12:
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
+    engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/openharmony-arm64@0.27.7':
-    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@esbuild/sunos-x64@0.27.7':
-    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
-    engines: {node: '>=18'}
+  /@esbuild/sunos-x64@0.19.12:
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
+    engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/win32-arm64@0.27.7':
-    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
-    engines: {node: '>=18'}
+  /@esbuild/win32-arm64@0.19.12:
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
+    engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/win32-ia32@0.27.7':
-    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
-    engines: {node: '>=18'}
+  /@esbuild/win32-ia32@0.19.12:
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
+    engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
+    requiresBuild: true
+    optional: true
 
-  '@esbuild/win32-x64@0.27.7':
-    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
-    engines: {node: '>=18'}
+  /@esbuild/win32-x64@0.19.12:
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
+    engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    optional: true
 
-  '@img/colour@1.1.0':
-    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
-    engines: {node: '>=18'}
-
-  '@img/sharp-darwin-arm64@0.34.5':
-    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@img/sharp-darwin-x64@0.34.5':
-    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
-    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@img/sharp-libvips-darwin-x64@1.2.4':
-    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@img/sharp-libvips-linux-arm64@1.2.4':
-    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-arm@1.2.4':
-    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
-    cpu: [arm]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
-    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
-    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-s390x@1.2.4':
-    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linux-x64@1.2.4':
-    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
-    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
-    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@img/sharp-linux-arm64@0.34.5':
-    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-arm@0.34.5':
-    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-ppc64@0.34.5':
-    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-riscv64@0.34.5':
-    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-s390x@0.34.5':
-    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linux-x64@0.34.5':
-    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@img/sharp-linuxmusl-arm64@0.34.5':
-    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@img/sharp-linuxmusl-x64@0.34.5':
-    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@img/sharp-wasm32@0.34.5':
-    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [wasm32]
-
-  '@img/sharp-win32-arm64@0.34.5':
-    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@img/sharp-win32-ia32@0.34.5':
-    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@img/sharp-win32-x64@0.34.5':
-    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@inquirer/ansi@2.0.7':
-    resolution: {integrity: sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-
-  '@inquirer/checkbox@5.2.1':
-    resolution: {integrity: sha512-b6xmA/VlTe0ZgDQHDui+Nav470u7u49nRd8/iuhOcQPO9Ch7lGuogydhi2VOmNlZ+zXcM8IcPuNSwQcdJaF/kw==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.44.0):
+    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 8.44.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
 
-  '@inquirer/confirm@6.1.1':
-    resolution: {integrity: sha512-eb8DBZcz/2qHWQda4rk2JiQk5h9QV/cVHi1yjt0f69WFZMRFn0sJTye3EAP8icut8UDMjQPsaH5KbcOogefrFQ==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@eslint-community/regexpp@4.10.0:
+    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
 
-  '@inquirer/core@11.2.1':
-    resolution: {integrity: sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@eslint/eslintrc@2.1.4:
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@inquirer/editor@5.2.2':
-    resolution: {integrity: sha512-ZRVd/oD+sYsUd5zVm0NflqEzlqfYCyHNsqkHl2oWXEUHs12tCbcSFi+wVFEvD8+LGRaMUsVrE7qeo6lSG/S1Vg==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@eslint/js@8.44.0:
+    resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
 
-  '@inquirer/expand@5.1.1':
-    resolution: {integrity: sha512-YmQpenjbFSHAK3sOd44puHh3V1KXXr+JiNpUztoSQ4drLh2rTVzTap/YtlAVu/5xavifIlBfNEzJ/neZJ1a/1g==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@humanwhocodes/config-array@0.11.14:
+    resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 2.0.2
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@inquirer/external-editor@3.0.3':
-    resolution: {integrity: sha512-6thf5I8q7lZwzGLAxPaaGEREEkZ3nyePPDQ1oyobblxmEE8mqTLguScP7pDjUTAibiyb4hfXl+qjUEJ+di/aNA==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
 
-  '@inquirer/figures@2.0.7':
-    resolution: {integrity: sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+  /@humanwhocodes/object-schema@2.0.2:
+    resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
+    dev: true
 
-  '@inquirer/input@5.1.2':
-    resolution: {integrity: sha512-9K/DDBSQpOyZSkt6sOVP9Vo0TR7atX2kuILsUu0x3wVcVbe97lJwIJKMLdMw25tDYuXl/qp6erT0Xs1rfmcfZg==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@isaacs/cliui@8.0.2:
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: /string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: /strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: /wrap-ansi@7.0.0
+    dev: true
 
-  '@inquirer/number@4.1.1':
-    resolution: {integrity: sha512-XF4IXAbPnGPgw0wsbC/i2tPcyfdZgDpUlhsqU0SfT4IRIGWha6Xm9VRgN5yYxJq+jnyXlfXI/nQ3ulfk0iEICA==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@istanbuljs/schema@0.1.3:
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+    dev: true
 
-  '@inquirer/password@5.1.1':
-    resolution: {integrity: sha512-3XBfF7DAsp5qeDsvN5Rd1HmbNokVvEQoUM0QLrRcybC9nX96w3Pbmu7qUsb3IT3J3jBvs2+mTXaKHOUsgHMLzg==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@jest/schemas@29.6.3:
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@sinclair/typebox': 0.27.8
+    dev: true
 
-  '@inquirer/prompts@8.5.2':
-    resolution: {integrity: sha512-IYR/3C/paEVVQYQvdDlFZVjRCJVYHHON0XXMH91KO9GSxs0TdKYWlUdvfQl2EfAHDxUaN3IBffkE/BDTh5nJ6g==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.22
 
-  '@inquirer/rawlist@5.3.1':
-    resolution: {integrity: sha512-QqdTqQddL3qPX/PPrjobpsO25NZ4dWXgTLenrR445L2ptLEYE6Z+PD5c5CNDJNx4ugRgELAIpSIJxZaO2jJ2Og==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
-  '@inquirer/search@4.2.1':
-    resolution: {integrity: sha512-xJj8QWKRSrfKoBIITLZK61dD3zwo0Rz11fgDImku30/Oe81zMdIdGgrLY2h6RkJ+KZ/GhNYIRMKnH/62qBTA5g==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
-  '@inquirer/select@5.2.1':
-    resolution: {integrity: sha512-FlDndEUww8m7BfukO2nJa25vhD+H5jxxCv4oGioKqzyWz3nPHhhw4LKdYRSlXuAx7DsdWia7iyaBPKKS95Evfw==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
-  '@inquirer/type@4.0.7':
-    resolution: {integrity: sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==}
-    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-
-  '@jridgewell/gen-mapping@0.3.13':
-    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
-
-  '@jridgewell/remapping@2.3.5':
-    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
-
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+  /@jridgewell/resolve-uri@3.1.1:
+    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/source-map@0.3.11':
-    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+  /@jridgewell/set-array@1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
 
-  '@jridgewell/sourcemap-codec@1.5.5':
-    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+  /@jridgewell/trace-mapping@0.3.22:
+    resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.4.15
 
-  '@napi-rs/cli@3.7.4':
-    resolution: {integrity: sha512-idELIUceJ9zPgx/shcMt1fSSsteFG68v56RIXi4qUm7OYuJOt7CoMj2KnHVmbOqXgUHWQU1lCULrtQdZDG4F5A==}
-    engines: {node: '>= 16'}
+  /@napi-rs/cli@2.18.0:
+    resolution: {integrity: sha512-lfSRT7cs3iC4L+kv9suGYQEezn5Nii7Kpu+THsYVI0tA1Vh59LH45p4QADaD7hvIkmOz79eEGtoKQ9nAkAPkzA==}
+    engines: {node: '>= 10'}
     hasBin: true
-    peerDependencies:
-      '@emnapi/runtime': ^1.7.1
-    peerDependenciesMeta:
-      '@emnapi/runtime':
-        optional: true
+    dev: true
 
-  '@napi-rs/cross-toolchain@1.0.3':
-    resolution: {integrity: sha512-ENPfLe4937bsKVTDA6zdABx4pq9w0tHqRrJHyaGxgaPq03a2Bd1unD5XSKjXJjebsABJ+MjAv1A2OvCgK9yehg==}
-    peerDependencies:
-      '@napi-rs/cross-toolchain-arm64-target-aarch64': ^1.0.3
-      '@napi-rs/cross-toolchain-arm64-target-armv7': ^1.0.3
-      '@napi-rs/cross-toolchain-arm64-target-ppc64le': ^1.0.3
-      '@napi-rs/cross-toolchain-arm64-target-s390x': ^1.0.3
-      '@napi-rs/cross-toolchain-arm64-target-x86_64': ^1.0.3
-      '@napi-rs/cross-toolchain-x64-target-aarch64': ^1.0.3
-      '@napi-rs/cross-toolchain-x64-target-armv7': ^1.0.3
-      '@napi-rs/cross-toolchain-x64-target-ppc64le': ^1.0.3
-      '@napi-rs/cross-toolchain-x64-target-s390x': ^1.0.3
-      '@napi-rs/cross-toolchain-x64-target-x86_64': ^1.0.3
-    peerDependenciesMeta:
-      '@napi-rs/cross-toolchain-arm64-target-aarch64':
-        optional: true
-      '@napi-rs/cross-toolchain-arm64-target-armv7':
-        optional: true
-      '@napi-rs/cross-toolchain-arm64-target-ppc64le':
-        optional: true
-      '@napi-rs/cross-toolchain-arm64-target-s390x':
-        optional: true
-      '@napi-rs/cross-toolchain-arm64-target-x86_64':
-        optional: true
-      '@napi-rs/cross-toolchain-x64-target-aarch64':
-        optional: true
-      '@napi-rs/cross-toolchain-x64-target-armv7':
-        optional: true
-      '@napi-rs/cross-toolchain-x64-target-ppc64le':
-        optional: true
-      '@napi-rs/cross-toolchain-x64-target-s390x':
-        optional: true
-      '@napi-rs/cross-toolchain-x64-target-x86_64':
-        optional: true
+  /@next/env@14.1.0:
+    resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==}
+    dev: false
 
-  '@napi-rs/lzma-android-arm-eabi@1.4.5':
-    resolution: {integrity: sha512-Up4gpyw2SacmyKWWEib06GhiDdF+H+CCU0LAV8pnM4aJIDqKKd5LHSlBht83Jut6frkB0vwEPmAkv4NjQ5u//Q==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [android]
+  /@next/eslint-plugin-next@14.1.0:
+    resolution: {integrity: sha512-x4FavbNEeXx/baD/zC/SdrvkjSby8nBn8KcCREqk6UuwvwoAPZmaV8TFCAuo/cpovBRTIY67mHhe86MQQm/68Q==}
+    dependencies:
+      glob: 10.3.10
+    dev: true
 
-  '@napi-rs/lzma-android-arm64@1.4.5':
-    resolution: {integrity: sha512-uwa8sLlWEzkAM0MWyoZJg0JTD3BkPknvejAFG2acUA1raXM8jLrqujWCdOStisXhqQjZ2nDMp3FV6cs//zjfuQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
-  '@napi-rs/lzma-darwin-arm64@1.4.5':
-    resolution: {integrity: sha512-0Y0TQLQ2xAjVabrMDem1NhIssOZzF/y/dqetc6OT8mD3xMTDtF8u5BqZoX3MyPc9FzpsZw4ksol+w7DsxHrpMA==}
+  /@next/swc-darwin-arm64@14.1.0:
+    resolution: {integrity: sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma-darwin-x64@1.4.5':
-    resolution: {integrity: sha512-vR2IUyJY3En+V1wJkwmbGWcYiT8pHloTAWdW4pG24+51GIq+intst6Uf6D/r46citObGZrlX0QvMarOkQeHWpw==}
+  /@next/swc-darwin-x64@14.1.0:
+    resolution: {integrity: sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma-freebsd-x64@1.4.5':
-    resolution: {integrity: sha512-XpnYQC5SVovO35tF0xGkbHYjsS6kqyNCjuaLQ2dbEblFRr5cAZVvsJ/9h7zj/5FluJPJRDojVNxGyRhTp4z2lw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@napi-rs/lzma-linux-arm-gnueabihf@1.4.5':
-    resolution: {integrity: sha512-ic1ZZMoRfRMwtSwxkyw4zIlbDZGC6davC9r+2oX6x9QiF247BRqqT94qGeL5ZP4Vtz0Hyy7TEViWhx5j6Bpzvw==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-
-  '@napi-rs/lzma-linux-arm64-gnu@1.4.5':
-    resolution: {integrity: sha512-asEp7FPd7C1Yi6DQb45a3KPHKOFBSfGuJWXcAd4/bL2Fjetb2n/KK2z14yfW8YC/Fv6x3rBM0VAZKmJuz4tysg==}
+  /@next/swc-linux-arm64-gnu@14.1.0:
+    resolution: {integrity: sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma-linux-arm64-musl@1.4.5':
-    resolution: {integrity: sha512-yWjcPDgJ2nIL3KNvi4536dlT/CcCWO0DUyEOlBs/SacG7BeD6IjGh6yYzd3/X1Y3JItCbZoDoLUH8iB1lTXo3w==}
+  /@next/swc-linux-arm64-musl@14.1.0:
+    resolution: {integrity: sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma-linux-ppc64-gnu@1.4.5':
-    resolution: {integrity: sha512-0XRhKuIU/9ZjT4WDIG/qnX7Xz7mSQHYZo9Gb3MP2gcvBgr6BA4zywQ9k3gmQaPn9ECE+CZg2V7DV7kT+x2pUMQ==}
-    engines: {node: '>= 10'}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/lzma-linux-riscv64-gnu@1.4.5':
-    resolution: {integrity: sha512-QrqDIPEUUB23GCpyQj/QFyMlr8SGxxyExeZz9OWFnHfb70kXdTLWrHS/hEI1Ru+lSbQ/6xRqeoGyQ4Aqdg+/RA==}
-    engines: {node: '>= 10'}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/lzma-linux-s390x-gnu@1.4.5':
-    resolution: {integrity: sha512-k8RVM5aMhW86E9H0QXdquwojew4H3SwPxbRVbl49/COJQWCUjGi79X6mYruMnMPEznZinUiT1jgKbFo2A00NdA==}
-    engines: {node: '>= 10'}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/lzma-linux-x64-gnu@1.4.5':
-    resolution: {integrity: sha512-6rMtBgnIq2Wcl1rQdZsnM+rtCcVCbws1nF8S2NzaUsVaZv8bjrPiAa0lwg4Eqnn1d9lgwqT+cZgm5m+//K08Kw==}
+  /@next/swc-linux-x64-gnu@14.1.0:
+    resolution: {integrity: sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma-linux-x64-musl@1.4.5':
-    resolution: {integrity: sha512-eiadGBKi7Vd0bCArBUOO/qqRYPHt/VQVvGyYvDFt6C2ZSIjlD+HuOl+2oS1sjf4CFjK4eDIog6EdXnL0NE6iyQ==}
+  /@next/swc-linux-x64-musl@14.1.0:
+    resolution: {integrity: sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma-wasm32-wasi@1.4.5':
-    resolution: {integrity: sha512-+VyHHlr68dvey6fXc2hehw9gHVFIW3TtGF1XkcbAu65qVXsA9D/T+uuoRVqhE+JCyFHFrO0ixRbZDRK1XJt1sA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@napi-rs/lzma-win32-arm64-msvc@1.4.5':
-    resolution: {integrity: sha512-eewnqvIyyhHi3KaZtBOJXohLvwwN27gfS2G/YDWdfHlbz1jrmfeHAmzMsP5qv8vGB+T80TMHNkro4kYjeh6Deg==}
+  /@next/swc-win32-arm64-msvc@14.1.0:
+    resolution: {integrity: sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma-win32-ia32-msvc@1.4.5':
-    resolution: {integrity: sha512-OeacFVRCJOKNU/a0ephUfYZ2Yt+NvaHze/4TgOwJ0J0P4P7X1mHzN+ig9Iyd74aQDXYqc7kaCXA2dpAOcH87Cg==}
+  /@next/swc-win32-ia32-msvc@14.1.0:
+    resolution: {integrity: sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma-win32-x64-msvc@1.4.5':
-    resolution: {integrity: sha512-T4I1SamdSmtyZgDXGAGP+y5LEK5vxHUFwe8mz6D4R7Sa5/WCxTcCIgPJ9BD7RkpO17lzhlaM2vmVvMy96Lvk9Q==}
+  /@next/swc-win32-x64-msvc@14.1.0:
+    resolution: {integrity: sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@napi-rs/lzma@1.4.5':
-    resolution: {integrity: sha512-zS5LuN1OBPAyZpda2ZZgYOEDC+xecUdAGnrvbYzjnLXkrq/OBC3B9qcRvlxbDR3k5H/gVfvef1/jyUqPknqjbg==}
-    engines: {node: '>= 10'}
-
-  '@napi-rs/tar-android-arm-eabi@1.1.0':
-    resolution: {integrity: sha512-h2Ryndraj/YiKgMV/r5by1cDusluYIRT0CaE0/PekQ4u+Wpy2iUVqvzVU98ZPnhXaNeYxEvVJHNGafpOfaD0TA==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [android]
-
-  '@napi-rs/tar-android-arm64@1.1.0':
-    resolution: {integrity: sha512-DJFyQHr1ZxNZorm/gzc1qBNLF/FcKzcH0V0Vwan5P+o0aE2keQIGEjJ09FudkF9v6uOuJjHCVDdK6S6uHtShAw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
-  '@napi-rs/tar-darwin-arm64@1.1.0':
-    resolution: {integrity: sha512-Zz2sXRzjIX4e532zD6xm2SjXEym6MkvfCvL2RMpG2+UwNVDVscHNcz3d47Pf3sysP2e2af7fBB3TIoK2f6trPw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@napi-rs/tar-darwin-x64@1.1.0':
-    resolution: {integrity: sha512-EI+CptIMNweT0ms9S3mkP/q+J6FNZ1Q6pvpJOEcWglRfyfQpLqjlC0O+dptruTPE8VamKYuqdjxfqD8hifZDOA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@napi-rs/tar-freebsd-x64@1.1.0':
-    resolution: {integrity: sha512-J0PIqX+pl6lBIAckL/c87gpodLbjZB1OtIK+RDscKC9NLdpVv6VGOxzUV/fYev/hctcE8EfkLbgFOfpmVQPg2g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@napi-rs/tar-linux-arm-gnueabihf@1.1.0':
-    resolution: {integrity: sha512-SLgIQo3f3EjkZ82ZwvrEgFvMdDAhsxCYjyoSuWfHCz0U16qx3SuGCp8+FYOPYCECHN3ZlGjXnoAIt9ERd0dEUg==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-
-  '@napi-rs/tar-linux-arm64-gnu@1.1.0':
-    resolution: {integrity: sha512-d014cdle52EGaH6GpYTQOP9Py7glMO1zz/+ynJPjjzYFSxvdYx0byrjumZk2UQdIyGZiJO2MEFpCkEEKFSgPYA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/tar-linux-arm64-musl@1.1.0':
-    resolution: {integrity: sha512-L/y1/26q9L/uBqiW/JdOb/Dc94egFvNALUZV2WCGKQXc6UByPBMgdiEyW2dtoYxYYYYc+AKD+jr+wQPcvX2vrQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@napi-rs/tar-linux-ppc64-gnu@1.1.0':
-    resolution: {integrity: sha512-EPE1K/80RQvPbLRJDJs1QmCIcH+7WRi0F73+oTe1582y9RtfGRuzAkzeBuAGRXAQEjRQw/RjtNqr6UTJ+8UuWQ==}
-    engines: {node: '>= 10'}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/tar-linux-s390x-gnu@1.1.0':
-    resolution: {integrity: sha512-B2jhWiB1ffw1nQBqLUP1h4+J1ovAxBOoe5N2IqDMOc63fsPZKNqF1PvO/dIem8z7LL4U4bsfmhy3gBfu547oNQ==}
-    engines: {node: '>= 10'}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/tar-linux-x64-gnu@1.1.0':
-    resolution: {integrity: sha512-tbZDHnb9617lTnsDMGo/eAMZxnsQFnaRe+MszRqHguKfMwkisc9CCJnks/r1o84u5fECI+J/HOrKXgczq/3Oww==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/tar-linux-x64-musl@1.1.0':
-    resolution: {integrity: sha512-dV6cODlzbO8u6Anmv2N/ilQHq/AWz0xyltuXoLU3yUyXbZcnWYZuB2rL8OBGPmqNcD+x9NdScBNXh7vWN0naSQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@napi-rs/tar-wasm32-wasi@1.1.0':
-    resolution: {integrity: sha512-jIa9nb2HzOrfH0F8QQ9g3WE4aMH5vSI5/1NYVNm9ysCmNjCCtMXCAhlI3WKCdm/DwHf0zLqdrrtDFXODcNaqMw==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@napi-rs/tar-win32-arm64-msvc@1.1.0':
-    resolution: {integrity: sha512-vfpG71OB0ijtjemp3WTdmBKJm9R70KM8vsSExMsIQtV0lVzP07oM1CW6JbNRPXNLhRoue9ofYLiUDk8bE0Hckg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@napi-rs/tar-win32-ia32-msvc@1.1.0':
-    resolution: {integrity: sha512-hGPyPW60YSpOSgzfy68DLBHgi6HxkAM+L59ZZZPMQ0TOXjQg+p2EW87+TjZfJOkSpbYiEkULwa/f4a2hcVjsqQ==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@napi-rs/tar-win32-x64-msvc@1.1.0':
-    resolution: {integrity: sha512-L6Ed1DxXK9YSCMyvpR8MiNAyKNkQLjsHsHK9E0qnHa8NzLFqzDKhvs5LfnWxM2kJ+F7m/e5n9zPm24kHb3LsVw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@napi-rs/tar@1.1.0':
-    resolution: {integrity: sha512-7cmzIu+Vbupriudo7UudoMRH2OA3cTw67vva8MxeoAe5S7vPFI7z0vp0pMXiA25S8IUJefImQ90FeJjl8fjEaQ==}
-    engines: {node: '>= 10'}
-
-  '@napi-rs/wasm-runtime@1.1.4':
-    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
-    peerDependencies:
-      '@emnapi/core': ^1.7.1
-      '@emnapi/runtime': ^1.7.1
-
-  '@napi-rs/wasm-runtime@1.2.2':
-    resolution: {integrity: sha512-JfB4kuJQjaoHuCTseIINHtHWeJnvgEcxjwA5t/Y00ZgaOO1Crz3fjT/p8kT28zA/Caz7oiUMn3d6H2yOVCVwuw==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
-    peerDependencies:
-      '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.3
-      '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.3
-
-  '@napi-rs/wasm-tools-android-arm-eabi@1.0.1':
-    resolution: {integrity: sha512-lr07E/l571Gft5v4aA1dI8koJEmF1F0UigBbsqg9OWNzg80H3lDPO+auv85y3T/NHE3GirDk7x/D3sLO57vayw==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [android]
-
-  '@napi-rs/wasm-tools-android-arm64@1.0.1':
-    resolution: {integrity: sha512-WDR7S+aRLV6LtBJAg5fmjKkTZIdrEnnQxgdsb7Cf8pYiMWBHLU+LC49OUVppQ2YSPY0+GeYm9yuZWW3kLjJ7Bg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
-  '@napi-rs/wasm-tools-darwin-arm64@1.0.1':
-    resolution: {integrity: sha512-qWTI+EEkiN0oIn/N2gQo7+TVYil+AJ20jjuzD2vATS6uIjVz+Updeqmszi7zq7rdFTLp6Ea3/z4kDKIfZwmR9g==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@napi-rs/wasm-tools-darwin-x64@1.0.1':
-    resolution: {integrity: sha512-bA6hubqtHROR5UI3tToAF/c6TDmaAgF0SWgo4rADHtQ4wdn0JeogvOk50gs2TYVhKPE2ZD2+qqt7oBKB+sxW3A==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@napi-rs/wasm-tools-freebsd-x64@1.0.1':
-    resolution: {integrity: sha512-90+KLBkD9hZEjPQW1MDfwSt5J1L46EUKacpCZWyRuL6iIEO5CgWU0V/JnEgFsDOGyyYtiTvHc5bUdUTWd4I9Vg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@napi-rs/wasm-tools-linux-arm64-gnu@1.0.1':
-    resolution: {integrity: sha512-rG0QlS65x9K/u3HrKafDf8cFKj5wV2JHGfl8abWgKew0GVPyp6vfsDweOwHbWAjcHtp2LHi6JHoW80/MTHm52Q==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/wasm-tools-linux-arm64-musl@1.0.1':
-    resolution: {integrity: sha512-jAasbIvjZXCgX0TCuEFQr+4D6Lla/3AAVx2LmDuMjgG4xoIXzjKWl7c4chuaD+TI+prWT0X6LJcdzFT+ROKGHQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@napi-rs/wasm-tools-linux-x64-gnu@1.0.1':
-    resolution: {integrity: sha512-Plgk5rPqqK2nocBGajkMVbGm010Z7dnUgq0wtnYRZbzWWxwWcXfZMPa8EYxrK4eE8SzpI7VlZP1tdVsdjgGwMw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@napi-rs/wasm-tools-linux-x64-musl@1.0.1':
-    resolution: {integrity: sha512-GW7AzGuWxtQkyHknHWYFdR0CHmW6is8rG2Rf4V6GNmMpmwtXt/ItWYWtBe4zqJWycMNazpfZKSw/BpT7/MVCXQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@napi-rs/wasm-tools-wasm32-wasi@1.0.1':
-    resolution: {integrity: sha512-/nQVSTrqSsn7YdAc2R7Ips/tnw5SPUcl3D7QrXCNGPqjbatIspnaexvaOYNyKMU6xPu+pc0BTnKVmqhlJJCPLA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@napi-rs/wasm-tools-win32-arm64-msvc@1.0.1':
-    resolution: {integrity: sha512-PFi7oJIBu5w7Qzh3dwFea3sHRO3pojMsaEnUIy22QvsW+UJfNQwJCryVrpoUt8m4QyZXI+saEq/0r4GwdoHYFQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@napi-rs/wasm-tools-win32-ia32-msvc@1.0.1':
-    resolution: {integrity: sha512-gXkuYzxQsgkj05Zaq+KQTkHIN83dFAwMcTKa2aQcpYPRImFm2AQzEyLtpXmyCWzJ0F9ZYAOmbSyrNew8/us6bw==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@napi-rs/wasm-tools-win32-x64-msvc@1.0.1':
-    resolution: {integrity: sha512-rEAf05nol3e3eei2sRButmgXP+6ATgm0/38MKhz9Isne82T4rPIMYsCIFj0kOisaGeVwoi2fnm7O9oWp5YVnYQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@napi-rs/wasm-tools@1.0.1':
-    resolution: {integrity: sha512-enkZYyuCdo+9jneCPE/0fjIta4wWnvVN9hBo2HuiMpRF0q3lzv1J6b/cl7i0mxZUKhBrV3aCKDBQnCOhwKbPmQ==}
-    engines: {node: '>= 10'}
-
-  '@next/env@16.2.7':
-    resolution: {integrity: sha512-tMJizPlj6ZYpBMMdK8S0LJufrP4QTdR6pcv9KQ/bVETPAmg0j1mlHE9G2c38UyGHxoBapgwuj7XjbGJ2RcDFOg==}
-
-  '@next/swc-darwin-arm64@16.2.7':
-    resolution: {integrity: sha512-vm1EDI/pVaBNNiychmxk3fft+OhQPVD9cIM/tReLZIQ3TfQ4kqI9DwKk00dzuS1ulC7icbrzCFrmRRlk9PfNdw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@next/swc-darwin-x64@16.2.7':
-    resolution: {integrity: sha512-O3IRSv1ZBL1zs0WrIgefTEcTKFVn+ryxBNe54erJ6KsD+2f/Mmt7g2jOYh8PSBdUwPtKQJuCsTMlZ7tIu2AcsQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@next/swc-linux-arm64-gnu@16.2.7':
-    resolution: {integrity: sha512-Re6PZtjBDd0aMU+VcZcC/PrIvj4WhrjDYtMhhCVQamWN4L90EVP0pcEOBQD25prSlw7OzNw5QpHLWMilRLsRNw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@next/swc-linux-arm64-musl@16.2.7':
-    resolution: {integrity: sha512-qyogG9QtBzWxgJfeGBvOEHI3851gTfCF3wLZ5RDLTBJGAmE9p1qDwKCOdrBrvBzRvYDT+gUDp72pzlSEfAXgNA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@next/swc-linux-x64-gnu@16.2.7':
-    resolution: {integrity: sha512-Vhe4ZDuBpmMogrGi5D4R2Kq4JAQlj6+wvgaFYy31zfES0zPmt6TLA+cuYpM/OLrPZjo2MYQTHVqNUSCR6+fDZQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@next/swc-linux-x64-musl@16.2.7':
-    resolution: {integrity: sha512-srvian89JahFLw1YLBEuhvPJ0DO5lpUeJQMXy4xYo7g628ZlNgXdNkqoxSAv9OYrBfByh6vxISMwW/mRbzCY+g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@next/swc-win32-arm64-msvc@16.2.7':
-    resolution: {integrity: sha512-GX3wvLpULFuRFJzwHaKfm7QZJ18F4ZSuxlPJ96BoBglCzBmdSjyeBKF+ZhWhvL/ckxNfLnNa7bsObO2ipYpszw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@next/swc-win32-x64-msvc@16.2.7':
-    resolution: {integrity: sha512-J4WlM72NMk076Qsg0jTdK3SNXatlSdnjW7L7oNGLst1tAGjHrJh/FYi+pw9wyIjEtGRKDNzD0zuiY16oWYWVaw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@nodelib/fs.scandir@2.1.5':
+  /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
 
-  '@nodelib/fs.stat@2.0.5':
+  /@nodelib/fs.stat@2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
 
-  '@nodelib/fs.walk@1.2.8':
+  /@nodelib/fs.walk@1.2.8:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.17.1
 
-  '@octokit/auth-token@6.0.0':
-    resolution: {integrity: sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==}
-    engines: {node: '>= 20'}
-
-  '@octokit/core@7.0.6':
-    resolution: {integrity: sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==}
-    engines: {node: '>= 20'}
-
-  '@octokit/endpoint@11.0.3':
-    resolution: {integrity: sha512-FWFlNxghg4HrXkD3ifYbS/IdL/mDHjh9QcsNyhQjN8dplUoZbejsdpmuqdA76nxj2xoWPs7p8uX2SNr9rYu0Ag==}
-    engines: {node: '>= 20'}
-
-  '@octokit/graphql@9.0.3':
-    resolution: {integrity: sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==}
-    engines: {node: '>= 20'}
-
-  '@octokit/openapi-types@27.0.0':
-    resolution: {integrity: sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==}
-
-  '@octokit/plugin-paginate-rest@14.0.0':
-    resolution: {integrity: sha512-fNVRE7ufJiAA3XUrha2omTA39M6IXIc6GIZLvlbsm8QOQCYvpq/LkMNGyFlB1d8hTDzsAXa3OKtybdMAYsV/fw==}
-    engines: {node: '>= 20'}
-    peerDependencies:
-      '@octokit/core': '>=6'
-
-  '@octokit/plugin-request-log@6.0.0':
-    resolution: {integrity: sha512-UkOzeEN3W91/eBq9sPZNQ7sUBvYCqYbrrD8gTbBuGtHEuycE4/awMXcYvx6sVYo7LypPhmQwwpUe4Yyu4QZN5Q==}
-    engines: {node: '>= 20'}
-    peerDependencies:
-      '@octokit/core': '>=6'
-
-  '@octokit/plugin-rest-endpoint-methods@17.0.0':
-    resolution: {integrity: sha512-B5yCyIlOJFPqUUeiD0cnBJwWJO8lkJs5d8+ze9QDP6SvfiXSz1BF+91+0MeI1d2yxgOhU/O+CvtiZ9jSkHhFAw==}
-    engines: {node: '>= 20'}
-    peerDependencies:
-      '@octokit/core': '>=6'
-
-  '@octokit/request-error@7.1.0':
-    resolution: {integrity: sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==}
-    engines: {node: '>= 20'}
-
-  '@octokit/request@10.0.9':
-    resolution: {integrity: sha512-o8Bi3f608eyM+7BmBiUWxFsdjLb3/ym1cQek5LZOv9KkZcxRrHCPhhRzm6xjO6HVZ85ItD6+sTsjxo821SVa/A==}
-    engines: {node: '>= 20'}
-
-  '@octokit/rest@22.0.1':
-    resolution: {integrity: sha512-Jzbhzl3CEexhnivb1iQ0KJ7s5vvjMWcmRtq5aUsKmKDrRW6z3r84ngmiFKFvpZjpiU/9/S6ITPFRpn5s/3uQJw==}
-    engines: {node: '>= 20'}
-
-  '@octokit/types@16.0.0':
-    resolution: {integrity: sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==}
-
-  '@oven/bun-darwin-aarch64@1.3.14':
-    resolution: {integrity: sha512-Omj20SuiHBOUjUBIyqtkNjSUIjOtEOJwmbix/ZyFH4BaQ6OZTaaRWIR4TjHVz0yadHgli6lLTiAh1uarnvD49A==}
+  /@oven/bun-darwin-aarch64@1.0.26:
+    resolution: {integrity: sha512-7FgUZz2EpMgFdEI9sA68bnHhrnrDBmCwcewpm6641HK0x2RIO1EcFl/7GKSGsD1JmbNfGqxYU16Sc+rgKFtXAg==}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@oven/bun-darwin-x64-baseline@1.3.14':
-    resolution: {integrity: sha512-OSfsTZstc898HHElhU4NccaBGOSSDn5VfahiVTnidZ9B/+wb7WTyfZJaBeJcfjwJ9H2W9uTh2TGtl3UfcXgV9g==}
+  /@oven/bun-darwin-x64-baseline@1.0.26:
+    resolution: {integrity: sha512-ssVJJs6tAvVZKnCx5bXAXZ05nSbfLHJ4qD/XFlVYb+3aue81YhXzQpbsOr9DShv209rBp9756SqHs9KZH66cbQ==}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@oven/bun-darwin-x64@1.3.14':
-    resolution: {integrity: sha512-FFj3QdU/OhlDyZOJ8CWfN5eWLpRlT4qjZg7lMQi7jA6GuoY5ajlO1zWLP/MuHYRSbXQUvV52RejNi8DVnAp13w==}
+  /@oven/bun-darwin-x64@1.0.26:
+    resolution: {integrity: sha512-kWO6ThQEMm4OPfqlhFlWrDRiIFtaUl//bRJfomOHE4BABaP9bdgHjDsaxt0pUWiKP9j9YnPFXtMw91iUbTbCWg==}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@oven/bun-freebsd-aarch64@1.3.14':
-    resolution: {integrity: sha512-LIKrXaFxAHybVO5Pf+9XP2FHUj/5APvXTUKk9dqHm5iFz4oH+W24cmhjkJirNujh9hKeTyrpWSe3no9JZKowIw==}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@oven/bun-freebsd-x64@1.3.14':
-    resolution: {integrity: sha512-uwD+fGUH1ADpIF3B1U2jWzzb20QwRLZfj5QZ28GUCGrAJ/nTmWrD6YYGsblCY1wuhldRez3lU40AyuvSCyLYmw==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oven/bun-linux-aarch64-android@1.3.14':
-    resolution: {integrity: sha512-y4kq5b85lsrmFb9Xvi4w9mA5IEFJkLMrSmYn06q24KjL9rUWDWO3VFZEtteZxUN5+ec3Zm5S8OnJw1umaCbVjA==}
-    cpu: [arm64]
-    os: [android]
-
-  '@oven/bun-linux-aarch64-musl@1.3.14':
-    resolution: {integrity: sha512-jmqOA92Cd1NL/1XBd4bFkJLxQ86K0RW7ohxS2qzzAvuitO4JiIxjjTeCspoU44zCozH72HpfZfUE2On31OjnWA==}
+  /@oven/bun-linux-aarch64@1.0.26:
+    resolution: {integrity: sha512-YSG6pOFMpXquGf3i4/Ta05NAlsSkiZVk5P5EAlfO1fnJANlkcu1QfD/IYvddQ5YY4aOTwlQFqA29pYxYj+2A/A==}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@oven/bun-linux-aarch64@1.3.14':
-    resolution: {integrity: sha512-X5SsPZHs+iYO8R/efIcRtc7gT2Q2DgPfliCxEkx4cXBumwkw0c/EsHMNwH3EgGpCDaZ7IYVPhpCG/xBOQHEwZw==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oven/bun-linux-x64-android@1.3.14':
-    resolution: {integrity: sha512-qe9e1d+3VAEU7nAA2ol9Jvmy/o99PVMSgZhHn7Q/9O3YcDrfEqyQ8zm4zoe5qTEo8HZH0dN03Le0Ys2eQPs7eg==}
-    cpu: [x64]
-    os: [android]
-
-  '@oven/bun-linux-x64-baseline@1.3.14':
-    resolution: {integrity: sha512-q/8EdOC0yUE8FPeoOVq8/Pw5I9/tJaYmUfO/uDUAREx8IUnOJH1RJ5A3BjFqre8pvJoiZA9AovPJq5FnNNjSxA==}
+  /@oven/bun-linux-x64-baseline@1.0.26:
+    resolution: {integrity: sha512-1EjD6t6BFkspGqTRqYGVSQw5eIktDsappweG+1yh/QpmhV95/vDKKoPGXCwoyeSoJIjJMl9VaApX8Fr1vpnUfA==}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@oven/bun-linux-x64-musl-baseline@1.3.14':
-    resolution: {integrity: sha512-n6iE71G4lQE4XkrZhQQcL5YUlxDbnq6nqV7zeQi33PMsLT/0kYE+RvHOtBWZ3w0wMdXZfINmp63hIb9ijUBGtw==}
+  /@oven/bun-linux-x64@1.0.26:
+    resolution: {integrity: sha512-ErEH7yBkWIt01qROMysM6ZQqz8epY+2DtQW0rfjKbaPm8JuEdZVyeA5zoKES3e2J37FUY073MdbwdzE5KPX2cQ==}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@oven/bun-linux-x64-musl@1.3.14':
-    resolution: {integrity: sha512-GBCB/k/sIqcr06eTNgg7g46qiUv35Jasx4XiccJ/n7RGqrE4RWUD/XJBbWFprVPjvqd59+QtSnS99XGqvftHfg==}
-    cpu: [x64]
-    os: [linux]
-
-  '@oven/bun-linux-x64@1.3.14':
-    resolution: {integrity: sha512-7OVTAKvwfPmSbIV1HpdOoVVx5VRc427GuPPne93N6vk4eQBPId9nXmZDh9/zGaKPdbVjVtQSZafWQoUjx38Utw==}
-    cpu: [x64]
-    os: [linux]
-
-  '@oven/bun-windows-aarch64@1.3.14':
-    resolution: {integrity: sha512-T7s3x/BsVKQObGU6QDkZeI6wKynzqGbBH1yI77jrrj5siElclxr3DQrDIk8CV4G5/SJq2HHq4kpLyYY2DKCSmA==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oven/bun-windows-x64-baseline@1.3.14':
-    resolution: {integrity: sha512-uIjLUC1S9DWgICzuoMba7vurBJnBruE4S5CxnvmZkdqWVXRzx1Rgu636HoH+k0qeaQCFh3jeG3JQ1y6fRHv0sw==}
-    cpu: [x64]
-    os: [win32]
-
-  '@oven/bun-windows-x64@1.3.14':
-    resolution: {integrity: sha512-mUFWL3BoYkNpjd8e9PqROiFF/1Xeotq20mABJsiQH62jM1g5zqWh4khw1RZ6bX8Q8fWvlPaxG1PjofkmjUi3vg==}
-    cpu: [x64]
-    os: [win32]
-
-  '@oxc-project/types@0.142.0':
-    resolution: {integrity: sha512-7W+2q5AKQVU36fkaryontrHn3YDt1RyUYXatw9i5H8ocYe2sPKSFB6eS8WNPeRKiN1qAWWZUPm7gwFzJGrccqQ==}
-
-  '@parcel/watcher-android-arm64@2.6.0':
-    resolution: {integrity: sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==}
+  /@parcel/watcher-android-arm64@2.4.1:
+    resolution: {integrity: sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-darwin-arm64@2.6.0':
-    resolution: {integrity: sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==}
+  /@parcel/watcher-darwin-arm64@2.4.1:
+    resolution: {integrity: sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-darwin-x64@2.6.0':
-    resolution: {integrity: sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==}
+  /@parcel/watcher-darwin-x64@2.4.1:
+    resolution: {integrity: sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-freebsd-x64@2.6.0':
-    resolution: {integrity: sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==}
+  /@parcel/watcher-freebsd-x64@2.4.1:
+    resolution: {integrity: sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.6.0':
-    resolution: {integrity: sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==}
+  /@parcel/watcher-linux-arm-glibc@2.4.1:
+    resolution: {integrity: sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-linux-arm-musl@2.6.0':
-    resolution: {integrity: sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==}
-    engines: {node: '>= 10.0.0'}
-    cpu: [arm]
-    os: [linux]
-    libc: [musl]
-
-  '@parcel/watcher-linux-arm64-glibc@2.6.0':
-    resolution: {integrity: sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==}
+  /@parcel/watcher-linux-arm64-glibc@2.4.1:
+    resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-linux-arm64-musl@2.6.0':
-    resolution: {integrity: sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==}
+  /@parcel/watcher-linux-arm64-musl@2.4.1:
+    resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-linux-x64-glibc@2.6.0':
-    resolution: {integrity: sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==}
+  /@parcel/watcher-linux-x64-glibc@2.4.1:
+    resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-linux-x64-musl@2.6.0':
-    resolution: {integrity: sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==}
+  /@parcel/watcher-linux-x64-musl@2.4.1:
+    resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-wasm@2.5.6':
-    resolution: {integrity: sha512-byAiBZ1t3tXQvc8dMD/eoyE7lTXYorhn+6uVW5AC+JGI1KtJC/LvDche5cfUE+qiefH+Ybq0bUCJU0aB1cSHUA==}
-    engines: {node: '>= 10.0.0'}
-    bundledDependencies:
-      - napi-wasm
-
-  '@parcel/watcher-win32-arm64@2.6.0':
-    resolution: {integrity: sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==}
+  /@parcel/watcher-win32-arm64@2.4.1:
+    resolution: {integrity: sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher-win32-x64@2.6.0':
-    resolution: {integrity: sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==}
+  /@parcel/watcher-win32-ia32@2.4.1:
+    resolution: {integrity: sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@parcel/watcher-win32-x64@2.4.1:
+    resolution: {integrity: sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@parcel/watcher@2.6.0':
-    resolution: {integrity: sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==}
+  /@parcel/watcher@2.4.1:
+    resolution: {integrity: sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==}
     engines: {node: '>= 10.0.0'}
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.5
+      node-addon-api: 7.1.0
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.4.1
+      '@parcel/watcher-darwin-arm64': 2.4.1
+      '@parcel/watcher-darwin-x64': 2.4.1
+      '@parcel/watcher-freebsd-x64': 2.4.1
+      '@parcel/watcher-linux-arm-glibc': 2.4.1
+      '@parcel/watcher-linux-arm64-glibc': 2.4.1
+      '@parcel/watcher-linux-arm64-musl': 2.4.1
+      '@parcel/watcher-linux-x64-glibc': 2.4.1
+      '@parcel/watcher-linux-x64-musl': 2.4.1
+      '@parcel/watcher-win32-arm64': 2.4.1
+      '@parcel/watcher-win32-ia32': 2.4.1
+      '@parcel/watcher-win32-x64': 2.4.1
+    dev: false
 
-  '@playwright/test@1.62.1':
-    resolution: {integrity: sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==}
-    engines: {node: '>=20'}
+  /@pkgjs/parseargs@0.11.0:
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@playwright/test@1.41.2:
+    resolution: {integrity: sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==}
+    engines: {node: '>=16'}
     hasBin: true
+    dependencies:
+      playwright: 1.41.2
+    dev: true
 
-  '@rolldown/binding-android-arm64@1.2.1':
-    resolution: {integrity: sha512-02hOeOSryYxVrOIphmLAsqnCJWxwlzFk+pEt/N/i6OgT3lShHO7xGCU5cpgchRDHboAEbSjzgGh+O/u1GswQmA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@rolldown/binding-darwin-arm64@1.2.1':
-    resolution: {integrity: sha512-fMsTOnN0OjFm3CyppWPitKnc8UlliVARUULW6cfU6AIqjdtgmSFWSk9vecHzZduv/yMWIHDlRhM1e8Iff9uAfA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rolldown/binding-darwin-x64@1.2.1':
-    resolution: {integrity: sha512-1wjKdz/XLGKHaTNHjQveQ/B23TKx4ItAqm1JbyVuvNPc4Ze0Fb48s49TAd/2zcplPl8okE/UbTgmlVfwT7eFeQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rolldown/binding-freebsd-x64@1.2.1':
-    resolution: {integrity: sha512-Fa0jHR07E7YBN4vOEsbVf2briYNsuOowfLJaXULZM0ldMlaCaj2LJgLMbMe4iacRyZmvR8efFhgR9wKuGclQUg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.2.1':
-    resolution: {integrity: sha512-pzkgu1SSHGgRRyRZ4fbmSgmajbVt+epaLP99NDjFft69v/ypfTi6swBMiVdh2EkQ0OSnHE1lZDM7DRGkyAzUpA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@rolldown/binding-linux-arm64-gnu@1.2.1':
-    resolution: {integrity: sha512-QI5SEDY8cbiYWHx0VO4vIc3UlS6a32vXHjU8Qy/17adEmZIPuByJg13UEvo9c/UCiUkdcVWY83C+b+JrwnNyUg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-arm64-musl@1.2.1':
-    resolution: {integrity: sha512-Sm41FyCeXqmYcERoYOCbGIL5hNfd8w9LQ7Y61Bev48HkcjaJqV/iiVOaiDxjVTRMS+QKrZmD8cfPt4uMVnvM+A==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-linux-ppc64-gnu@1.2.1':
-    resolution: {integrity: sha512-2x+WhXTGl9yJYPbltW/BSEPTVz9OIWQyER4N+gJEDWkkn904eRcBzELqh/Hf7K0w/ubGbKNMv0ZC+94QK/IFEg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-s390x-gnu@1.2.1':
-    resolution: {integrity: sha512-eEjmQpuRQayHPWWnywaWHkFT3ToPbP3RYy42VVd/B9aBGDA+Ol25EIWHxKQST3IiWJjikCWUF7KtbfqwZrzVwQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-x64-gnu@1.2.1':
-    resolution: {integrity: sha512-/Orga1fZYkLc/56jBICcHrKchl8Z2UKdDSr3LG9ToWO1lQ6a4Livk9Xz+9WN91zsz5QR3XQz2NNoSDEvP6qadw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-x64-musl@1.2.1':
-    resolution: {integrity: sha512-xxBJRL+0q0Kce7orznGWLuylHDY65vuARXZRpX+hPdv+DqK2c3NlCsVA98tlWzWNEE7yPqA/1NQ5nnCrj49Y5A==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-openharmony-arm64@1.2.1':
-    resolution: {integrity: sha512-M6AdXIXw3s+/8XpKMzdGDEXGS1S7kwUsy+rcTIUIOx5Ge4nXKCtAFHFV9YKkXvGcC5WMoTjAteLzlsQROVI0Yw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@rolldown/binding-wasm32-wasi@1.2.1':
-    resolution: {integrity: sha512-/TX0SoRGojHzSAHpfVBbavRVSazg5U3h3Y3VXfcc0cdugq6kxdqw8LPGFiPr+/7gE/60zRcsOY2Vi9b9eT0jww==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
-
-  '@rolldown/binding-win32-arm64-msvc@1.2.1':
-    resolution: {integrity: sha512-EvRrivJieyHG+AO9lleZWgq+g0+S7oV2C51yuqlcyU/R9net+sI4Pj0F+lUoP2bEr6TWX3SqFaaS0SzfLxSzkw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rolldown/binding-win32-x64-msvc@1.2.1':
-    resolution: {integrity: sha512-Z4eCmn5QJ/5+azF9knpLWKfVd9aidn0mAe9TpJgvBLId9Ax3t0+JVxBmT25Bv7NBbVW1TZyKjQjQReouMeH5UQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@rolldown/pluginutils@1.0.1':
-    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
-
-  '@rollup/rollup-android-arm-eabi@4.60.4':
-    resolution: {integrity: sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ==}
+  /@rollup/rollup-android-arm-eabi@4.9.6:
+    resolution: {integrity: sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==}
     cpu: [arm]
     os: [android]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-android-arm64@4.60.4':
-    resolution: {integrity: sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw==}
+  /@rollup/rollup-android-arm64@4.9.6:
+    resolution: {integrity: sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==}
     cpu: [arm64]
     os: [android]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-darwin-arm64@4.60.4':
-    resolution: {integrity: sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA==}
+  /@rollup/rollup-darwin-arm64@4.9.6:
+    resolution: {integrity: sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-darwin-x64@4.60.4':
-    resolution: {integrity: sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg==}
+  /@rollup/rollup-darwin-x64@4.9.6:
+    resolution: {integrity: sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.60.4':
-    resolution: {integrity: sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g==}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@rollup/rollup-freebsd-x64@4.60.4':
-    resolution: {integrity: sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
-    resolution: {integrity: sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.9.6:
+    resolution: {integrity: sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
-    resolution: {integrity: sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==}
-    cpu: [arm]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-arm64-gnu@4.60.4':
-    resolution: {integrity: sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==}
+  /@rollup/rollup-linux-arm64-gnu@4.9.6:
+    resolution: {integrity: sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.60.4':
-    resolution: {integrity: sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==}
+  /@rollup/rollup-linux-arm64-musl@4.9.6:
+    resolution: {integrity: sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.60.4':
-    resolution: {integrity: sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==}
-    cpu: [loong64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-loong64-musl@4.60.4':
-    resolution: {integrity: sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==}
-    cpu: [loong64]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
-    resolution: {integrity: sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-ppc64-musl@4.60.4':
-    resolution: {integrity: sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
-    resolution: {integrity: sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==}
+  /@rollup/rollup-linux-riscv64-gnu@4.9.6:
+    resolution: {integrity: sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.60.4':
-    resolution: {integrity: sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==}
-    cpu: [riscv64]
-    os: [linux]
-    libc: [musl]
-
-  '@rollup/rollup-linux-s390x-gnu@4.60.4':
-    resolution: {integrity: sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@rollup/rollup-linux-x64-gnu@4.60.4':
-    resolution: {integrity: sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==}
+  /@rollup/rollup-linux-x64-gnu@4.9.6:
+    resolution: {integrity: sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.60.4':
-    resolution: {integrity: sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==}
+  /@rollup/rollup-linux-x64-musl@4.9.6:
+    resolution: {integrity: sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-openbsd-x64@4.60.4':
-    resolution: {integrity: sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@rollup/rollup-openharmony-arm64@4.60.4':
-    resolution: {integrity: sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg==}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@rollup/rollup-win32-arm64-msvc@4.60.4':
-    resolution: {integrity: sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw==}
+  /@rollup/rollup-win32-arm64-msvc@4.9.6:
+    resolution: {integrity: sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.60.4':
-    resolution: {integrity: sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA==}
+  /@rollup/rollup-win32-ia32-msvc@4.9.6:
+    resolution: {integrity: sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==}
     cpu: [ia32]
     os: [win32]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.60.4':
-    resolution: {integrity: sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw==}
+  /@rollup/rollup-win32-x64-msvc@4.9.6:
+    resolution: {integrity: sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.60.4':
-    resolution: {integrity: sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw==}
-    cpu: [x64]
-    os: [win32]
+  /@rushstack/eslint-patch@1.7.2:
+    resolution: {integrity: sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==}
+    dev: true
 
-  '@rspack/binding-darwin-arm64@2.0.2':
-    resolution: {integrity: sha512-0o7lbgBBsDlICWdjIH0q3e0BsSco4GRiImHWVfZSVEG+q2+ykZJvSvYCVhPM1Co375Z0S3VMPa/8SjcY1FHwlw==}
-    cpu: [arm64]
-    os: [darwin]
+  /@sinclair/typebox@0.27.8:
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+    dev: true
 
-  '@rspack/binding-darwin-x64@2.0.2':
-    resolution: {integrity: sha512-tOwxZpoPlTlRs/w6UyUinXJ4TYRVHMlR7+eQxO1R3muKpixvhXQjtvoaY16HuFyTVky5F0IfOoWr3x9FEsgdLg==}
-    cpu: [x64]
-    os: [darwin]
+  /@swc/helpers@0.5.2:
+    resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
 
-  '@rspack/binding-linux-arm64-gnu@2.0.2':
-    resolution: {integrity: sha512-1ZD4YFhG1rmgqj+W8hfwHyKV8xDxGsc/3KgU0FwmiVEX7JfzhCkgBO/xlCG79kRKSrzuVzt4icO/G3cCKn0pag==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
+  /@types/babel__core@7.20.5:
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+    dependencies:
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
+      '@types/babel__generator': 7.6.8
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.5
+    dev: false
 
-  '@rspack/binding-linux-arm64-musl@2.0.2':
-    resolution: {integrity: sha512-/PtTkM/DsDLjeuXTmeJeRfbjCDbcL9jvoVgZrgxYFZ28y2cdLvbChbW9uigOzs5dQEs1CIBQXMTTj7KhdBTuQg==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
+  /@types/babel__generator@7.6.8:
+    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
+    dependencies:
+      '@babel/types': 7.23.9
+    dev: false
 
-  '@rspack/binding-linux-x64-gnu@2.0.2':
-    resolution: {integrity: sha512-bBjsZxMHRaPo6X9SokApm6ucs+UhXtAJFyJJyuk2BH4XJsLeCU9Dz1vMwioeohFbJUUeTASVPm6/BL+RhSaunw==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
+  /@types/babel__template@7.4.4:
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+    dependencies:
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
+    dev: false
 
-  '@rspack/binding-linux-x64-musl@2.0.2':
-    resolution: {integrity: sha512-HjlpInqzabDNkhVsUJpsHPqa9QYVWBViJoyWNjzXCAW0vKMDvwaphyUvokSinX8FGTlZi/sr5UEaHJo6XtQ35g==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
+  /@types/babel__traverse@7.20.5:
+    resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==}
+    dependencies:
+      '@babel/types': 7.23.9
+    dev: false
 
-  '@rspack/binding-wasm32-wasi@2.0.2':
-    resolution: {integrity: sha512-YaRYNFLJRpkGfYjSWR7n9f+nQKtrlmrrffpAn/blc2geHcRvXoBc5SCs1idPtsLhj7H9qWWhs7ucjyHy4csWFg==}
-    cpu: [wasm32]
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
-  '@rspack/binding-win32-arm64-msvc@2.0.2':
-    resolution: {integrity: sha512-d/3kTEKq+asLjRFPO96t+wfWiM7DLN76VQEPDD9bc1kdsZXlVJBuvyXfsgK8bbEvKplWXYcSsokhmEnuXrLOpg==}
-    cpu: [arm64]
-    os: [win32]
+  /@types/istanbul-lib-coverage@2.0.6:
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+    dev: true
 
-  '@rspack/binding-win32-ia32-msvc@2.0.2':
-    resolution: {integrity: sha512-161cWineq3RW+Jdm1FAfSpXeUtYWvhB3kAbm46vNT9h/YYz+spwsFMvveAZ1nsVSVL0IC5lDBGUte7yUAY8K2g==}
-    cpu: [ia32]
-    os: [win32]
+  /@types/json5@0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: true
 
-  '@rspack/binding-win32-x64-msvc@2.0.2':
-    resolution: {integrity: sha512-y7Q0S1FE+OlkL5GMqLG0PwxrPw6E1r892KhGrGKE1Vdufe5YTEx6xTPxzZ+b7N2KPD7s9G1/iJmWHQxb1+Bjkg==}
-    cpu: [x64]
-    os: [win32]
+  /@types/node@20.11.17:
+    resolution: {integrity: sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: true
 
-  '@rspack/binding@2.0.2':
-    resolution: {integrity: sha512-0kZPplW9GWx8mfC6DfsaRY3QBIYPuUs42JfmSM6aSb8tMHZAXQeLeMB8M+h8i4SeI+aFtCgO6UuYGtyWf7+L+A==}
+  /@types/node@20.11.20:
+    resolution: {integrity: sha512-7/rR21OS+fq8IyHTgtLkDK949uzsa6n8BkziAKtPVpugIkO6D+/ooXMvzXxDnZrmtXVfjb1bKQafYpb8s89LOg==}
+    dependencies:
+      undici-types: 5.26.5
 
-  '@rspack/core@2.0.2':
-    resolution: {integrity: sha512-VM3UHOo26uC+4QSqY5tU1ybI7KuXY5rTof8nhFOaBY9SYau0Smvr+hMSAPmrmHwknB6dXT8yaNVxrj7I+qxE1Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    peerDependencies:
-      '@module-federation/runtime-tools': ^0.24.1 || ^2.0.0
-      '@swc/helpers': '>=0.5.1'
-    peerDependenciesMeta:
-      '@module-federation/runtime-tools':
-        optional: true
-      '@swc/helpers':
-        optional: true
-
-  '@sindresorhus/merge-streams@4.0.0':
-    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
-    engines: {node: '>=18'}
-
-  '@standard-schema/spec@1.1.0':
-    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
-
-  '@swc/helpers@0.5.15':
-    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
-
-  '@tailwindcss/aspect-ratio@0.4.2':
-    resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==}
-    peerDependencies:
-      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
-
-  '@tailwindcss/forms@0.5.11':
-    resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
-
-  '@tailwindcss/typography@0.5.20':
-    resolution: {integrity: sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || >=4.0.0 || insiders'
-
-  '@turbo/darwin-64@2.10.8':
-    resolution: {integrity: sha512-po+7rfJfUnFXjWlcoN2RwhErgzCdRtBc1T26vYPcywHlggmCQiQe1uWaE4j+BibI2uY9/2pDoFzMN0rmSaPFOw==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@turbo/darwin-arm64@2.10.8':
-    resolution: {integrity: sha512-+zB2btDJ00lnPRuqOvpVvgl4x34k/djZQGZTTCfjn7JgNCl8QFY5Njo5+dqkY1g/+9gbbsnAvWm9CmJg9ebcXA==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@turbo/linux-64@2.10.8':
-    resolution: {integrity: sha512-K1dxqiVisyN7cViVsfQLs6xscQbYuI8aO2nbUhFURDACgEDfZRdP/b4CCxeosBJpcMfhYyiibWqJorCnvz9kKg==}
-    cpu: [x64]
-    os: [android, linux]
-
-  '@turbo/linux-arm64@2.10.8':
-    resolution: {integrity: sha512-Gi77ibVnrE1fEmvr+/wBD/yvRqhwp/RQuCp2+//lv1U1wNFFyVg0V7Wj8FG9FXPFAw5QHReo8rxc9+wBSDZjzA==}
-    cpu: [arm64]
-    os: [android, linux]
-
-  '@turbo/windows-64@2.10.8':
-    resolution: {integrity: sha512-znnLO1haJPYTHoKMKwlAvlkjRiYbbhBzME6wIGaMd+fwir23U6jVd1ecaTWWi1fbnRVqxMfgDBKseQ/hLKb83g==}
-    cpu: [x64]
-    os: [win32]
-
-  '@turbo/windows-arm64@2.10.8':
-    resolution: {integrity: sha512-VN30vh3b3Czh2WzYHNTfF1FE0YMZ5aHsLO8dBMGHJewA6792wX6iJR8ZxlzFW6WdOu0gEAKIvlYhfyT81Wkm4Q==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tybys/wasm-util@0.10.3':
-    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
-
-  '@types/bun@1.3.14':
-    resolution: {integrity: sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw==}
-
-  '@types/chai@5.2.3':
-    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
-
-  '@types/deep-eql@4.0.2':
-    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
-
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
-
-  '@types/estree@1.0.9':
-    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
-
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
-
-  '@types/node@22.20.1':
-    resolution: {integrity: sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==}
-
-  '@types/node@25.9.1':
-    resolution: {integrity: sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==}
-
-  '@types/postcss-import@14.0.3':
+  /@types/postcss-import@14.0.3:
     resolution: {integrity: sha512-raZhRVTf6Vw5+QbmQ7LOHSDML71A5rj4+EqDzAbrZPfxfoGzFxMHRCq16VlddGIZpHELw0BG4G0YE2ANkdZiIQ==}
+    dependencies:
+      postcss: 8.4.24
+    dev: true
 
-  '@types/react-dom@19.2.3':
-    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+  /@types/prop-types@15.7.11:
+    resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
+    dev: true
+
+  /@types/react-dom@18.2.19:
+    resolution: {integrity: sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==}
+    dependencies:
+      '@types/react': 18.2.55
+    dev: true
+
+  /@types/react@18.2.55:
+    resolution: {integrity: sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==}
+    dependencies:
+      '@types/prop-types': 15.7.11
+      '@types/scheduler': 0.16.8
+      csstype: 3.1.3
+    dev: true
+
+  /@types/scheduler@0.16.8:
+    resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
+    dev: true
+
+  /@typescript-eslint/parser@6.21.0(eslint@8.44.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      '@types/react': ^19.2.0
-
-  '@types/react@19.2.15':
-    resolution: {integrity: sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==}
-
-  '@types/semver@7.8.0':
-    resolution: {integrity: sha512-1mAINjtQCXXeLkJ9ehXkwOcBpqtLxiVtKhpUf83DdRNdQKV0iXZpaHYqRr7nj+wvxuJzoAmAwXI+sCNMv1CzLQ==}
-
-  '@vitejs/plugin-react@6.0.2':
-    resolution: {integrity: sha512-DlSMqo4WhThw4vB8Mpn0Woe9J+Jfq1geJ61AKW0QEgLzGMNwtIMdxbDUzLxcun8W7NbJO0e2Jg/Nxm3cCSVzzg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    peerDependencies:
-      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
-      babel-plugin-react-compiler: ^1.0.0
-      vite: ^8.0.0
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
     peerDependenciesMeta:
-      '@rolldown/plugin-babel':
-        optional: true
-      babel-plugin-react-compiler:
+      typescript:
         optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.3.4
+      eslint: 8.44.0
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@vitest/expect@4.1.10':
-    resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==}
+  /@typescript-eslint/scope-manager@6.21.0:
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+    dev: true
 
-  '@vitest/mocker@4.1.10':
-    resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==}
+  /@typescript-eslint/types@6.21.0:
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3):
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      msw: ^2.4.9
-      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
     peerDependenciesMeta:
-      msw:
-        optional: true
-      vite:
+      typescript:
         optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.6.0
+      ts-api-utils: 1.2.1(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@vitest/pretty-format@4.1.10':
-    resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==}
+  /@typescript-eslint/visitor-keys@6.21.0:
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
 
-  '@vitest/runner@4.1.10':
-    resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==}
+  /@vitejs/plugin-react@4.2.1(vite@5.1.1):
+    resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0
+    dependencies:
+      '@babel/core': 7.23.9
+      '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.9)
+      '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.9)
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.14.0
+      vite: 5.1.1(@types/node@20.11.20)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
 
-  '@vitest/snapshot@4.1.10':
-    resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==}
+  /@vitest/coverage-v8@1.2.2(vitest@1.2.2):
+    resolution: {integrity: sha512-IHyKnDz18SFclIEEAHb9Y4Uxx0sPKC2VO1kdDCs1BF6Ip4S8rQprs971zIsooLUn7Afs71GRxWMWpkCGZpRMhw==}
+    peerDependencies:
+      vitest: ^1.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@bcoe/v8-coverage': 0.2.3
+      debug: 4.3.4
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 4.0.1
+      istanbul-reports: 3.1.6
+      magic-string: 0.30.7
+      magicast: 0.3.3
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      test-exclude: 6.0.0
+      v8-to-istanbul: 9.2.0
+      vitest: 1.2.2(@types/node@20.11.20)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@vitest/spy@4.1.10':
-    resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==}
+  /@vitest/expect@1.2.2:
+    resolution: {integrity: sha512-3jpcdPAD7LwHUUiT2pZTj2U82I2Tcgg2oVPvKxhn6mDI2On6tfvPQTjAI4628GUGDZrCm4Zna9iQHm5cEexOAg==}
+    dependencies:
+      '@vitest/spy': 1.2.2
+      '@vitest/utils': 1.2.2
+      chai: 4.4.1
+    dev: true
 
-  '@vitest/utils@4.1.10':
-    resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
+  /@vitest/runner@1.2.2:
+    resolution: {integrity: sha512-JctG7QZ4LSDXr5CsUweFgcpEvrcxOV1Gft7uHrvkQ+fsAVylmWQvnaAr/HDp3LAH1fztGMQZugIheTWjaGzYIg==}
+    dependencies:
+      '@vitest/utils': 1.2.2
+      p-limit: 5.0.0
+      pathe: 1.1.2
+    dev: true
 
-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+  /@vitest/snapshot@1.2.2:
+    resolution: {integrity: sha512-SmGY4saEw1+bwE1th6S/cZmPxz/Q4JWsl7LvbQIky2tKE35US4gd0Mjzqfr84/4OD0tikGWaWdMja/nWL5NIPA==}
+    dependencies:
+      magic-string: 0.30.7
+      pathe: 1.1.2
+      pretty-format: 29.7.0
+    dev: true
 
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+  /@vitest/spy@1.2.2:
+    resolution: {integrity: sha512-k9Gcahssw8d7X3pSLq3e3XEu/0L78mUkCjivUqCQeXJm9clfXR/Td8+AP+VC1O6fKPIDLcHDTAmBOINVuv6+7g==}
+    dependencies:
+      tinyspy: 2.2.1
+    dev: true
 
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+  /@vitest/utils@1.2.2:
+    resolution: {integrity: sha512-WKITBHLsBHlpjnDQahr+XK6RE7MiAsgrIkr0pGhQ9ygoxBfUeG0lUG5iLlzqjmKSlBv3+j5EGsriBzh+C3Tq9g==}
+    dependencies:
+      diff-sequences: 29.6.3
+      estree-walker: 3.0.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+    dev: true
 
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+  /acorn-jsx@5.3.2(acorn@8.11.3):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.11.3
+    dev: true
 
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+  /acorn-walk@8.3.2:
+    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
+    engines: {node: '>=0.4.0'}
+    dev: true
 
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
-
-  '@webassemblyjs/ieee754@1.13.2':
-    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
-
-  '@webassemblyjs/leb128@1.13.2':
-    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
-
-  '@webassemblyjs/utf8@1.13.2':
-    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
-
-  '@webassemblyjs/wasm-edit@1.14.1':
-    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
-
-  '@webassemblyjs/wasm-gen@1.14.1':
-    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
-
-  '@webassemblyjs/wasm-opt@1.14.1':
-    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
-
-  '@webassemblyjs/wasm-parser@1.14.1':
-    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
-
-  '@webassemblyjs/wast-printer@1.14.1':
-    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
-
-  '@xtuc/ieee754@1.2.0':
-    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
-
-  '@xtuc/long@4.2.2':
-    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
-
-  acorn@8.16.0:
-    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+  /acorn@8.11.3:
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
+    dev: true
 
-  ajv-formats@2.1.1:
-    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
-    peerDependencies:
-      ajv: ^8.0.0
-    peerDependenciesMeta:
-      ajv:
-        optional: true
+  /ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
 
-  ajv-keywords@5.1.0:
-    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
-    peerDependencies:
-      ajv: ^8.8.2
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: true
 
-  ajv@8.20.0:
-    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+  /ansi-regex@6.0.1:
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    engines: {node: '>=12'}
+    dev: true
 
-  any-promise@1.3.0:
+  /ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: false
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: true
+
+  /ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+    dev: true
 
-  anymatch@3.1.3:
+  /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
+    requiresBuild: true
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
-  argparse@2.0.1:
+  /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
 
-  assertion-error@2.0.1:
-    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
-    engines: {node: '>=12'}
+  /aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
 
-  autoprefixer@10.5.0:
-    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
+  /array-buffer-byte-length@1.0.1:
+    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      is-array-buffer: 3.0.4
+    dev: true
 
-  baseline-browser-mapping@2.10.31:
-    resolution: {integrity: sha512-MujYO3eP72uvmSE0i4wltsodRfIpZATP3jvzRNRGGxgzId7aVocVJJV3nf01qnzzKFGxQVC9bpWxl5cjxTr/7Q==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
+  /array-includes@3.1.7:
+    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.4
+      is-string: 1.0.7
+    dev: true
 
-  before-after-hook@4.0.0:
-    resolution: {integrity: sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==}
-
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+  /array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
+    dev: true
 
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+  /array.prototype.filter@1.0.3:
+    resolution: {integrity: sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-array-method-boxes-properly: 1.0.0
+      is-string: 1.0.7
+    dev: true
+
+  /array.prototype.findlastindex@1.2.4:
+    resolution: {integrity: sha512-hzvSHUshSpCflDR1QMUBLHGHP1VIEBegT4pix9H/Z92Xw3ySoy6c2qh7lJWTJnRJ8JCZ9bJNCgTyYaJGcJu6xQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.0.2
+    dev: true
+
+  /array.prototype.flat@1.3.2:
+    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.2
+    dev: true
+
+  /array.prototype.flatmap@1.3.2:
+    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-shim-unscopables: 1.0.2
+    dev: true
+
+  /array.prototype.tosorted@1.1.3:
+    resolution: {integrity: sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.0.2
+    dev: true
+
+  /arraybuffer.prototype.slice@1.0.3:
+    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.1
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      is-array-buffer: 3.0.4
+      is-shared-array-buffer: 1.0.2
+    dev: true
+
+  /assertion-error@1.1.0:
+    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
+    dev: true
+
+  /ast-types-flow@0.0.8:
+    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+    dev: true
+
+  /asynciterator.prototype@1.0.0:
+    resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
+  /available-typed-arrays@1.0.6:
+    resolution: {integrity: sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /axe-core@4.7.0:
+    resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /axobject-query@3.2.1:
+    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
+    requiresBuild: true
+    dev: true
 
-  browserslist@4.28.2:
-    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
+  /brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /braces@3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+
+  /browserslist@4.22.3:
+    resolution: {integrity: sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001585
+      electron-to-chromium: 1.4.664
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.13(browserslist@4.22.3)
+    dev: false
 
-  buffer-from@1.1.2:
-    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
-
-  bun-types@1.3.14:
-    resolution: {integrity: sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ==}
-
-  bun@1.3.14:
-    resolution: {integrity: sha512-aB6GVd42x1Y5ie1K16SF+oLGtgSkwX9hgoDdIW88pjvfTccU8F1vfpoOt34QLv0dZ1v3XimtaxPlZUG81Gx9Zg==}
+  /bun@1.0.26:
+    resolution: {integrity: sha512-+aSzKvGLE9hWwCRDwvnhoMTDntCYEk5bKn16L0QGD0v630WJMPhazAMxaSJmfq6dSAtiqPpauPpmHbzwoGPjlQ==}
     cpu: [arm64, x64]
-    os: [darwin, linux, android, freebsd, win32]
+    os: [darwin, linux]
     hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@oven/bun-darwin-aarch64': 1.0.26
+      '@oven/bun-darwin-x64': 1.0.26
+      '@oven/bun-darwin-x64-baseline': 1.0.26
+      '@oven/bun-linux-aarch64': 1.0.26
+      '@oven/bun-linux-x64': 1.0.26
+      '@oven/bun-linux-x64-baseline': 1.0.26
+    dev: true
 
-  bundle-require@5.1.0:
-    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
+  /bundle-require@4.0.2(esbuild@0.19.12):
+    resolution: {integrity: sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     peerDependencies:
-      esbuild: '>=0.18'
+      esbuild: '>=0.17'
+    dependencies:
+      esbuild: 0.19.12
+      load-tsconfig: 0.2.5
+    dev: true
 
-  cac@6.7.14:
+  /busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+    dependencies:
+      streamsearch: 1.1.0
+    dev: false
+
+  /cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
+    dev: true
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
+  /call-bind@1.0.6:
+    resolution: {integrity: sha512-Mj50FLHtlsoVfRfnHaZvyrooHcrlceNZdL/QBvJJVd9Ta55qCQK0gs4ss2oZDeV9zFCs6ewzYgVE5yfVmfFpVg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.1
+    dev: true
 
-  caniuse-lite@1.0.30001793:
-    resolution: {integrity: sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==}
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+    dev: true
 
-  chai@6.2.2:
-    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
-    engines: {node: '>=18'}
+  /caniuse-lite@1.0.30001585:
+    resolution: {integrity: sha512-yr2BWR1yLXQ8fMpdS/4ZZXpseBgE7o4g41x3a6AJOqZuOi+iE/WdJYAuZ6Y95i4Ohd2Y+9MzIWRR+uGABH4s3Q==}
+    dev: false
 
-  chardet@2.1.1:
-    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
+  /chai@4.4.1:
+    resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
+    engines: {node: '>=4'}
+    dependencies:
+      assertion-error: 1.1.0
+      check-error: 1.0.3
+      deep-eql: 4.1.3
+      get-func-name: 2.0.2
+      loupe: 2.3.7
+      pathval: 1.1.1
+      type-detect: 4.0.8
+    dev: true
 
-  chokidar@3.6.0:
+  /chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: false
+
+  /chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
+  /check-error@1.0.3:
+    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
+    dependencies:
+      get-func-name: 2.0.2
+    dev: true
+
+  /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
+    requiresBuild: true
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
 
-  chokidar@4.0.3:
-    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
-    engines: {node: '>= 14.16.0'}
-
-  chrome-trace-event@1.0.4:
-    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
-    engines: {node: '>=6.0'}
-
-  citty@0.2.2:
-    resolution: {integrity: sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==}
-
-  cli-width@4.1.0:
-    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
-    engines: {node: '>= 12'}
-
-  client-only@0.0.1:
+  /client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: false
 
-  clipanion@4.0.0-rc.4:
-    resolution: {integrity: sha512-CXkMQxU6s9GklO/1f714dkKBMu1lopS1WFF0B8o4AxPykR1hpozxSiUZ5ZUeBjfPgCWqbcNOtZVFhB8Lkfp1+Q==}
-    peerDependencies:
-      typanion: '*'
+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: false
 
-  colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: true
 
-  commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: false
 
-  commander@4.1.1:
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: true
+
+  /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
+    dev: true
 
-  confbox@0.1.8:
-    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: true
 
-  consola@3.4.2:
-    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-
-  content-type@2.0.0:
-    resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
-    engines: {node: '>=18'}
-
-  convert-source-map@2.0.0:
+  /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie-es@1.2.3:
-    resolution: {integrity: sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw==}
+  /cross-spawn@7.0.3:
+    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: true
 
-  crossws@0.3.5:
-    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+    dev: true
 
-  crossws@0.4.10:
-    resolution: {integrity: sha512-pz3oubH/dt12KjqsUB0IuXW4nwRDQ583iDsP4555Cpdqx0NoU7pGlWBcayyFI8f/l/idRpgjMEfwuOxSWJYlIA==}
+  /damerau-levenshtein@1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+    dev: true
+
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
-      srvx: '>=0.11.5'
+      supports-color: '*'
     peerDependenciesMeta:
-      srvx:
+      supports-color:
         optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
-  csstype@3.2.3:
-    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
-
-  debug@4.4.3:
-    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+  /debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
     peerDependenciesMeta:
       supports-color:
         optional: true
+    dependencies:
+      ms: 2.1.2
 
-  dedent@1.7.2:
-    resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
-    peerDependencies:
-      babel-plugin-macros: ^3.1.0
-    peerDependenciesMeta:
-      babel-plugin-macros:
-        optional: true
+  /deep-eql@4.1.3:
+    resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
+    engines: {node: '>=6'}
+    dependencies:
+      type-detect: 4.0.8
+    dev: true
 
-  defu@6.1.7:
-    resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
 
-  destr@2.0.5:
-    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+  /define-data-property@1.1.2:
+    resolution: {integrity: sha512-SRtsSqsDbgpJBbW3pABMCOt6rQyeM8s8RiyeSN8jYG8sYmt/kGJejbydttUsnDs1tadr19tvhT4ShwMyoqAm4g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.1
+    dev: true
 
-  detect-libc@1.0.3:
+  /define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.2
+      has-property-descriptors: 1.0.1
+      object-keys: 1.1.1
+    dev: true
+
+  /dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /detect-libc@1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
     hasBin: true
+    dev: false
 
-  detect-libc@2.1.2:
-    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+  /diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dev: true
+
+  /dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
+    dependencies:
+      path-type: 4.0.0
+    dev: true
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+  /doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+  /doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
 
-  electron-to-chromium@1.5.361:
-    resolution: {integrity: sha512-Q6Hts7N9FnJc5LeGRINFvLhCI9xZmNtTDe5ZbcVezQz7cU4a8Aua3GH1b8J2XY8Al9PF+OCwYqhgsOOheMdvkA==}
+  /eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+    dev: true
 
-  emnapi@1.11.3:
-    resolution: {integrity: sha512-+/ZS90YK/rYfVOHtGLHkGffVsnmD/MAKaBHio+Y4XAtg75RLr4cveV/w0jTkUdLM1CcAlaRgG76mpIemWAlk0A==}
-    peerDependencies:
-      node-addon-api: '>= 6.1.0'
-    peerDependenciesMeta:
-      node-addon-api:
-        optional: true
+  /electron-to-chromium@1.4.664:
+    resolution: {integrity: sha512-k9VKKSkOSNPvSckZgDDl/IQx45E1quMjX8QfLzUsAs/zve8AyFDK+ByRynSP/OfEfryiKHpQeMf00z0leLCc3A==}
+    dev: false
 
-  enhanced-resolve@5.24.5:
-    resolution: {integrity: sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==}
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    dev: true
+
+  /emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+    dev: true
+
+  /enhanced-resolve@5.15.0:
+    resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
     engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+    dev: true
 
-  es-errors@1.3.0:
+  /es-abstract@1.22.3:
+    resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.1
+      arraybuffer.prototype.slice: 1.0.3
+      available-typed-arrays: 1.0.6
+      call-bind: 1.0.6
+      es-set-tostringtag: 2.0.2
+      es-to-primitive: 1.2.1
+      function.prototype.name: 1.1.6
+      get-intrinsic: 1.2.4
+      get-symbol-description: 1.0.2
+      globalthis: 1.0.3
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.1
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      hasown: 2.0.0
+      internal-slot: 1.0.7
+      is-array-buffer: 3.0.4
+      is-callable: 1.2.7
+      is-negative-zero: 2.0.2
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      is-string: 1.0.7
+      is-typed-array: 1.1.13
+      is-weakref: 1.0.2
+      object-inspect: 1.13.1
+      object-keys: 1.1.1
+      object.assign: 4.1.5
+      regexp.prototype.flags: 1.5.1
+      safe-array-concat: 1.1.0
+      safe-regex-test: 1.0.3
+      string.prototype.trim: 1.2.8
+      string.prototype.trimend: 1.0.7
+      string.prototype.trimstart: 1.0.7
+      typed-array-buffer: 1.0.1
+      typed-array-byte-length: 1.0.0
+      typed-array-byte-offset: 1.0.0
+      typed-array-length: 1.0.4
+      unbox-primitive: 1.0.2
+      which-typed-array: 1.1.14
+    dev: true
+
+  /es-array-method-boxes-properly@1.0.0:
+    resolution: {integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==}
+    dev: true
+
+  /es-errors@1.3.0:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
+    dev: true
 
-  es-module-lexer@2.1.0:
-    resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
+  /es-iterator-helpers@1.0.15:
+    resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
+    dependencies:
+      asynciterator.prototype: 1.0.0
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-set-tostringtag: 2.0.2
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      globalthis: 1.0.3
+      has-property-descriptors: 1.0.1
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      internal-slot: 1.0.7
+      iterator.prototype: 1.1.2
+      safe-array-concat: 1.1.0
+    dev: true
 
-  es-toolkit@1.50.0:
-    resolution: {integrity: sha512-OyZKhUVvEep9ITEiwHn8GKnMRQIVqoSIX7WnRbkWgJkllCujilqP2rD0u979tkl8wqyc8ICwlc1UBVv/Sl1G6w==}
+  /es-set-tostringtag@2.0.2:
+    resolution: {integrity: sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.4
+      has-tostringtag: 1.0.2
+      hasown: 2.0.0
+    dev: true
 
-  esbuild@0.27.7:
-    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
-    engines: {node: '>=18'}
+  /es-shim-unscopables@1.0.2:
+    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
+    dependencies:
+      hasown: 2.0.0
+    dev: true
+
+  /es-to-primitive@1.2.1:
+    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.0.5
+      is-symbol: 1.0.4
+    dev: true
+
+  /esbuild@0.19.12:
+    resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
+    engines: {node: '>=12'}
     hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.19.12
+      '@esbuild/android-arm': 0.19.12
+      '@esbuild/android-arm64': 0.19.12
+      '@esbuild/android-x64': 0.19.12
+      '@esbuild/darwin-arm64': 0.19.12
+      '@esbuild/darwin-x64': 0.19.12
+      '@esbuild/freebsd-arm64': 0.19.12
+      '@esbuild/freebsd-x64': 0.19.12
+      '@esbuild/linux-arm': 0.19.12
+      '@esbuild/linux-arm64': 0.19.12
+      '@esbuild/linux-ia32': 0.19.12
+      '@esbuild/linux-loong64': 0.19.12
+      '@esbuild/linux-mips64el': 0.19.12
+      '@esbuild/linux-ppc64': 0.19.12
+      '@esbuild/linux-riscv64': 0.19.12
+      '@esbuild/linux-s390x': 0.19.12
+      '@esbuild/linux-x64': 0.19.12
+      '@esbuild/netbsd-x64': 0.19.12
+      '@esbuild/openbsd-x64': 0.19.12
+      '@esbuild/sunos-x64': 0.19.12
+      '@esbuild/win32-arm64': 0.19.12
+      '@esbuild/win32-ia32': 0.19.12
+      '@esbuild/win32-x64': 0.19.12
 
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+  /escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
+    dev: false
 
-  eslint-scope@5.1.1:
-    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
-    engines: {node: '>=8.0.0'}
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: false
 
-  esrecurse@4.3.0:
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /eslint-config-next@14.1.0(eslint@8.44.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-SBX2ed7DoRFXC6CQSLc/SbLY9Ut6HxNB2wPTcoIWjUMd7aF7O/SIE7111L8FdZ9TXsNV4pulUDnfthpyPtbFUg==}
+    peerDependencies:
+      eslint: ^7.23.0 || ^8.0.0
+      typescript: '>=3.3.1'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@next/eslint-plugin-next': 14.1.0
+      '@rushstack/eslint-patch': 1.7.2
+      '@typescript-eslint/parser': 6.21.0(eslint@8.44.0)(typescript@5.3.3)
+      eslint: 8.44.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
+      eslint-plugin-jsx-a11y: 6.8.0(eslint@8.44.0)
+      eslint-plugin-react: 7.33.2(eslint@8.44.0)
+      eslint-plugin-react-hooks: 4.6.0(eslint@8.44.0)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.13.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0):
+    resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+    dependencies:
+      debug: 4.3.4
+      enhanced-resolve: 5.15.0
+      eslint: 8.44.0
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
+      fast-glob: 3.3.2
+      get-tsconfig: 4.7.2
+      is-core-module: 2.13.1
+      is-glob: 4.0.3
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-node
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.21.0(eslint@8.44.0)(typescript@5.3.3)
+      debug: 3.2.7
+      eslint: 8.44.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0):
+    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.21.0(eslint@8.44.0)(typescript@5.3.3)
+      array-includes: 3.1.7
+      array.prototype.findlastindex: 1.2.4
+      array.prototype.flat: 1.3.2
+      array.prototype.flatmap: 1.3.2
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 8.44.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
+      hasown: 2.0.0
+      is-core-module: 2.13.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.7
+      object.groupby: 1.0.2
+      object.values: 1.1.7
+      semver: 6.3.1
+      tsconfig-paths: 3.15.0
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsx-a11y@6.8.0(eslint@8.44.0):
+    resolution: {integrity: sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      '@babel/runtime': 7.23.9
+      aria-query: 5.3.0
+      array-includes: 3.1.7
+      array.prototype.flatmap: 1.3.2
+      ast-types-flow: 0.0.8
+      axe-core: 4.7.0
+      axobject-query: 3.2.1
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      es-iterator-helpers: 1.0.15
+      eslint: 8.44.0
+      hasown: 2.0.0
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.2
+      object.entries: 1.1.7
+      object.fromentries: 2.0.7
+    dev: true
+
+  /eslint-plugin-react-hooks@4.6.0(eslint@8.44.0):
+    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    dependencies:
+      eslint: 8.44.0
+    dev: true
+
+  /eslint-plugin-react@7.33.2(eslint@8.44.0):
+    resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+    dependencies:
+      array-includes: 3.1.7
+      array.prototype.flatmap: 1.3.2
+      array.prototype.tosorted: 1.1.3
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.0.15
+      eslint: 8.44.0
+      estraverse: 5.3.0
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.7
+      object.fromentries: 2.0.7
+      object.hasown: 1.1.3
+      object.values: 1.1.7
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.10
+    dev: true
+
+  /eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint@8.44.0:
+    resolution: {integrity: sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
+      '@eslint-community/regexpp': 4.10.0
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.44.0
+      '@humanwhocodes/config-array': 0.11.14
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.5.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.24.0
+      graphemer: 1.4.0
+      ignore: 5.3.1
+      import-fresh: 3.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.3
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.11.3
+      acorn-jsx: 5.3.2(acorn@8.11.3)
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /esquery@1.5.0:
+    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
 
-  estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
-
-  estraverse@5.3.0:
+  /estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
+    dev: true
 
-  estree-walker@3.0.3:
+  /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
 
-  events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
 
-  expect-type@1.3.0:
-    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
-    engines: {node: '>=12.0.0'}
+  /execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+    dev: true
 
-  fast-content-type-parse@3.0.0:
-    resolution: {integrity: sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==}
+  /execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.2.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+    dev: true
 
-  fast-deep-equal@3.1.3:
+  /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
 
-  fast-equals@5.4.0:
-    resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
-    engines: {node: '>=6.0.0'}
-
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+  /fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
 
-  fast-string-truncated-width@3.0.3:
-    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
+  /fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
 
-  fast-string-width@3.0.2:
-    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
 
-  fast-stringify@4.0.0:
-    resolution: {integrity: sha512-lE2DIivBaLysf6hK5WH/VfMgqRbvBVHcpGVVTmA5Zi8oWIjq9YxIt6lYGdUgP1HNSXxTIat7HEIDnrSvXSeKQw==}
+  /fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+    dependencies:
+      reusify: 1.0.4
 
-  fast-uri@3.1.2:
-    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+  /file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flat-cache: 3.2.0
+    dev: true
 
-  fast-wrap-ansi@0.2.2:
-    resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
-
-  fastq@1.20.1:
-    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
-
-  fdir@6.5.0:
-    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
-
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+  /fill-range@7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
 
-  find-up-simple@1.0.1:
-    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
-    engines: {node: '>=18'}
+  /find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
 
-  fix-dts-default-cjs-exports@1.0.1:
-    resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
+  /flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flatted: 3.2.9
+      keyv: 4.5.4
+      rimraf: 3.0.2
+    dev: true
 
-  fraction.js@5.3.4:
-    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+  /flatted@3.2.9:
+    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
+    dev: true
 
-  fsevents@2.3.2:
+  /for-each@0.3.3:
+    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+    dependencies:
+      is-callable: 1.2.7
+    dev: true
+
+  /foreground-child@3.1.1:
+    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
+    engines: {node: '>=14'}
+    dependencies:
+      cross-spawn: 7.0.3
+      signal-exit: 4.1.0
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  fsevents@2.3.3:
+  /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
+    requiresBuild: true
+    optional: true
 
-  function-bind@1.1.2:
+  /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  get-port-please@3.2.0:
-    resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
+  /function.prototype.name@1.1.6:
+    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      functions-have-names: 1.2.3
+    dev: true
 
-  glob-parent@5.1.2:
+  /functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    dev: true
+
+  /gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /get-func-name@2.0.2:
+    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
+    dev: true
+
+  /get-intrinsic@1.2.4:
+    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      hasown: 2.0.0
+    dev: true
+
+  /get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+    dev: true
+
+  /get-symbol-description@1.0.2:
+    resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /get-tsconfig@4.7.2:
+    resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
+
+  /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
 
-  glob-parent@6.0.2:
+  /glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
 
-  globby@16.2.2:
-    resolution: {integrity: sha512-NLvV9ubZ6NDsJaOpKPy3cQeJpKi9DcWiyCiFUpJPA0YihRqiE6RWaLUmgNNPr8MgPpLZjnBjSmou7uZBRJv9wA==}
-    engines: {node: '>=20'}
+  /glob@10.3.10:
+    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+    dependencies:
+      foreground-child: 3.1.1
+      jackspeak: 2.3.6
+      minimatch: 9.0.3
+      minipass: 7.0.4
+      path-scurry: 1.10.1
+    dev: true
 
-  graceful-fs@4.2.11:
+  /glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
+  /globalthis@1.0.3:
+    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-properties: 1.2.1
+    dev: true
+
+  /globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.1
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
+  /gopd@1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+    dependencies:
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  h3@1.15.11:
-    resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
+  /graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+    dev: true
 
-  has-flag@4.0.0:
+  /handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.17.4
+    dev: true
+
+  /has-bigints@1.0.2:
+    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+    dev: true
+
+  /has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
+    dev: true
 
-  hasown@2.0.3:
-    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
+  /has-property-descriptors@1.0.1:
+    resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==}
+    dependencies:
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /has-proto@1.0.1:
+    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
     engines: {node: '>= 0.4'}
+    dev: true
 
-  http-shutdown@1.2.2:
-    resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
-    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+  /has-symbols@1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  iconv-lite@0.7.2:
-    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
-    engines: {node: '>=0.10.0'}
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
 
-  ignore@7.0.5:
-    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+  /hasown@2.0.0:
+    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+
+  /html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+    dev: true
+
+  /human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+    dev: true
+
+  /human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+    dev: true
+
+  /ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
+    dev: true
 
-  iron-webcrypto@1.2.1:
-    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+  /import-fresh@3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+    dev: true
 
-  is-binary-path@2.1.0:
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /internal-slot@1.0.7:
+    resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.0
+      side-channel: 1.0.5
+    dev: true
+
+  /is-array-buffer@3.0.4:
+    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /is-async-function@2.0.0:
+    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-bigint@1.0.4:
+    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+    dependencies:
+      has-bigints: 1.0.2
+    dev: true
+
+  /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
+    requiresBuild: true
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
 
-  is-core-module@2.16.2:
-    resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
+  /is-boolean-object@1.1.2:
+    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
     engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      has-tostringtag: 1.0.2
+    dev: true
 
-  is-extglob@2.1.1:
+  /is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+    dependencies:
+      hasown: 2.0.0
+
+  /is-date-object@1.0.5:
+    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-glob@4.0.3:
+  /is-finalizationregistry@1.0.2:
+    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
+    dependencies:
+      call-bind: 1.0.6
+    dev: true
+
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-generator-function@1.0.10:
+    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
 
-  is-number@7.0.0:
+  /is-map@2.0.2:
+    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
+    dev: true
+
+  /is-negative-zero@2.0.2:
+    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-number-object@1.0.7:
+    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@4.0.0:
-    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
-    engines: {node: '>=12'}
+  /is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+    dev: true
 
-  jest-worker@27.5.1:
-    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
-    engines: {node: '>= 10.13.0'}
+  /is-regex@1.1.4:
+    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      has-tostringtag: 1.0.2
+    dev: true
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
-    hasBin: true
+  /is-set@2.0.2:
+    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
+    dev: true
 
-  jiti@2.7.0:
-    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
-    hasBin: true
+  /is-shared-array-buffer@1.0.2:
+    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
+    dependencies:
+      call-bind: 1.0.6
+    dev: true
 
-  joycon@3.1.1:
+  /is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /is-string@1.0.7:
+    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-symbol@1.0.4:
+    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
+  /is-typed-array@1.1.13:
+    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      which-typed-array: 1.1.14
+    dev: true
+
+  /is-weakmap@2.0.1:
+    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
+    dev: true
+
+  /is-weakref@1.0.2:
+    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
+    dependencies:
+      call-bind: 1.0.6
+    dev: true
+
+  /is-weakset@2.0.2:
+    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
+    dependencies:
+      call-bind: 1.0.6
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    dev: true
+
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
+
+  /istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+    dev: true
+
+  /istanbul-lib-source-maps@4.0.1:
+    resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
+    engines: {node: '>=10'}
+    dependencies:
+      debug: 4.3.4
+      istanbul-lib-coverage: 3.2.2
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /istanbul-reports@3.1.6:
+    resolution: {integrity: sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==}
+    engines: {node: '>=8'}
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+    dev: true
+
+  /iterator.prototype@1.1.2:
+    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
+    dependencies:
+      define-properties: 1.2.1
+      get-intrinsic: 1.2.4
+      has-symbols: 1.0.3
+      reflect.getprototypeof: 1.0.5
+      set-function-name: 2.0.1
+    dev: true
+
+  /jackspeak@2.3.6:
+    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+    dev: true
+
+  /joycon@3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
+    dev: true
 
-  js-yaml@4.3.1:
-    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  /js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
 
-  json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+  /jsesc@2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: false
 
-  json-with-bigint@3.5.8:
-    resolution: {integrity: sha512-eq/4KP6K34kwa7TcFdtvnftvHCD9KvHOGGICWwMFc4dOOKF5t4iYqnfLK8otCRCRv06FXOzGGyqE8h8ElMvvdw==}
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: true
 
-  lightningcss-android-arm64@1.33.0:
-    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [android]
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
 
-  lightningcss-darwin-arm64@1.33.0:
-    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: false
+
+  /jsonc-parser@3.2.1:
+    resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
+    dev: true
+
+  /jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      array-includes: 3.1.7
+      array.prototype.flat: 1.3.2
+      object.assign: 4.1.5
+      object.values: 1.1.7
+    dev: true
+
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: true
+
+  /language-subtag-registry@0.3.22:
+    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
+    dev: true
+
+  /language-tags@1.0.9:
+    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      language-subtag-registry: 0.3.22
+    dev: true
+
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /lightningcss-darwin-arm64@1.24.0:
+    resolution: {integrity: sha512-rTNPkEiynOu4CfGdd5ZfVOQe2gd2idfQd4EfX1l2ZUUwd+2SwSdbb7cG4rlwfnZckbzCAygm85xkpekRE5/wFw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss-darwin-x64@1.33.0:
-    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+  /lightningcss-darwin-x64@1.24.0:
+    resolution: {integrity: sha512-4KCeF2RJjzp9xdGY8zIH68CUtptEg8uz8PfkHvsIdrP4t9t5CIgfDBhiB8AmuO75N6SofdmZexDZIKdy9vA7Ww==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss-freebsd-x64@1.33.0:
-    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+  /lightningcss-freebsd-x64@1.24.0:
+    resolution: {integrity: sha512-FJAYlek1wXuVTsncNU0C6YD41q126dXcIUm97KAccMn9C4s/JfLSqGWT2gIzAblavPFkyGG2gIADTWp3uWfN1g==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.33.0:
-    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+  /lightningcss-linux-arm-gnueabihf@1.24.0:
+    resolution: {integrity: sha512-N55K6JqzMx7C0hYUu1YmWqhkHwzEJlkQRMA6phY65noO0I1LOAvP4wBIoFWrzRE+O6zL0RmXJ2xppqyTbk3sYw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss-linux-arm64-gnu@1.33.0:
-    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+  /lightningcss-linux-arm64-gnu@1.24.0:
+    resolution: {integrity: sha512-MqqUB2TpYtFWeBvvf5KExDdClU3YGLW5bHKs50uKKootcvG9KoS7wYwd5UichS+W3mYLc5yXUPGD1DNWbLiYKw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss-linux-arm64-musl@1.33.0:
-    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+  /lightningcss-linux-arm64-musl@1.24.0:
+    resolution: {integrity: sha512-5wn4d9tFwa5bS1ao9mLexYVJdh3nn09HNIipsII6ZF7z9ZA5J4dOEhMgKoeCl891axTGTUYd8Kxn+Hn3XUSYRQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss-linux-x64-gnu@1.33.0:
-    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+  /lightningcss-linux-x64-gnu@1.24.0:
+    resolution: {integrity: sha512-3j5MdTh+LSDF3o6uDwRjRUgw4J+IfDCVtdkUrJvKxL79qBLUujXY7CTe5X3IQDDLKEe/3wu49r8JKgxr0MfjbQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss-linux-x64-musl@1.33.0:
-    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+  /lightningcss-linux-x64-musl@1.24.0:
+    resolution: {integrity: sha512-HI+rNnvaLz0o36z6Ki0gyG5igVGrJmzczxA5fznr6eFTj3cHORoR/j2q8ivMzNFR4UKJDkTWUH5LMhacwOHWBA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss-win32-arm64-msvc@1.33.0:
-    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
-  lightningcss-win32-x64-msvc@1.33.0:
-    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+  /lightningcss-win32-x64-msvc@1.24.0:
+    resolution: {integrity: sha512-oeije/t7OZ5N9vSs6amyW/34wIYoBCpE6HUlsSKcP2SR1CVgx9oKEM00GtQmtqNnYiMIfsSm7+ppMb4NLtD5vg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  lightningcss@1.33.0:
-    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+  /lightningcss@1.24.0:
+    resolution: {integrity: sha512-y36QEEDVx4IM7/yIZNsZJMRREIu26WzTsauIysf5s76YeCmlSbRZS7aC97IGPuoFRnyZ5Wx43OBsQBFB5Ne7ng==}
     engines: {node: '>= 12.0.0'}
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.24.0
+      lightningcss-darwin-x64: 1.24.0
+      lightningcss-freebsd-x64: 1.24.0
+      lightningcss-linux-arm-gnueabihf: 1.24.0
+      lightningcss-linux-arm64-gnu: 1.24.0
+      lightningcss-linux-arm64-musl: 1.24.0
+      lightningcss-linux-x64-gnu: 1.24.0
+      lightningcss-linux-x64-musl: 1.24.0
+      lightningcss-win32-x64-msvc: 1.24.0
+    dev: false
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+  /lilconfig@3.0.0:
+    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
     engines: {node: '>=14'}
+    dev: true
 
-  lines-and-columns@1.2.4:
+  /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: true
 
-  listhen@1.10.1:
-    resolution: {integrity: sha512-6nt/86SkqUQSLW1ofz8MxC6RhRMqOl3ONISe6qqvJ3xj09aJWQx6DhgSZpugs3PX4PXdOas/WD6A9jx6J2N19A==}
-    hasBin: true
-    peerDependencies:
-      '@parcel/watcher': ^2.5.6
-    peerDependenciesMeta:
-      '@parcel/watcher':
-        optional: true
-
-  load-tsconfig@0.2.5:
+  /load-tsconfig@0.2.5:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
 
-  magic-string@0.30.21:
-    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+  /local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.5.0
+      pkg-types: 1.0.3
+    dev: true
 
-  magic-string@1.1.0:
-    resolution: {integrity: sha512-kS3VHe0nEPST2saQV4Rbkchcd3UBRkVTQHo1D3h/ZTwFDhai/mfKkmtPAtD129EOI7K3HlHIsFOt0WrI2/oU9g==}
+  /locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
 
-  merge-stream@2.0.0:
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
+  /lodash.sortby@4.7.0:
+    resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
+    dev: true
+
+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+
+  /loupe@2.3.7:
+    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
+    dependencies:
+      get-func-name: 2.0.2
+    dev: true
+
+  /lru-cache@10.2.0:
+    resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
+    engines: {node: 14 || >=16.14}
+    dev: true
+
+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+    dev: false
+
+  /lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /magic-string@0.30.7:
+    resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /magicast@0.3.3:
+    resolution: {integrity: sha512-ZbrP1Qxnpoes8sz47AM0z08U+jW6TyRgZzcWy3Ma3vDhJttwMwAFDMMQFobwdBxByBD46JYmxRzeF7w2+wJEuw==}
+    dependencies:
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
+      source-map-js: 1.0.2
+    dev: true
+
+  /make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+    dependencies:
+      semver: 7.6.0
+    dev: true
+
+  /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+    dev: true
 
-  merge2@1.4.1:
+  /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  micro-memoize@5.1.1:
-    resolution: {integrity: sha512-QDwluos8YeMijiKxZGwaV4f4tzj0soS6+xcsJhJ3+4wdEIHMyKbIKVUziebOgWX3e6yiijdoaHo+9tyhbnaWXA==}
-
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+  /micromatch@4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
 
-  mime-db@1.54.0:
-    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
-    engines: {node: '>= 0.6'}
+  /mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+    dev: true
 
-  mini-svg-data-uri@1.4.4:
-    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
-    hasBin: true
+  /mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+    dev: true
 
-  minimizer-webpack-plugin@5.6.1:
-    resolution: {integrity: sha512-DoeAZz8Q1C1znwsUzej1fdoi4jCf7/+Em27ouLqfK/+3m8G+D7yDhUwrc3CNhjSzGUN1kn7Iv4sWmjflQHenpw==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      '@minify-html/node': '*'
-      '@swc/core': '*'
-      '@swc/css': '*'
-      '@swc/html': '*'
-      clean-css: '*'
-      cssnano: '*'
-      csso: '*'
-      esbuild: '*'
-      html-minifier-terser: '*'
-      lightningcss: '*'
-      postcss: '*'
-      uglify-js: '*'
-      webpack: ^5.1.0
-    peerDependenciesMeta:
-      '@minify-html/node':
-        optional: true
-      '@swc/core':
-        optional: true
-      '@swc/css':
-        optional: true
-      '@swc/html':
-        optional: true
-      clean-css:
-        optional: true
-      cssnano:
-        optional: true
-      csso:
-        optional: true
-      esbuild:
-        optional: true
-      html-minifier-terser:
-        optional: true
-      lightningcss:
-        optional: true
-      postcss:
-        optional: true
-      uglify-js:
-        optional: true
+  /minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: true
 
-  mlly@1.8.2:
-    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
+  /minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
 
-  mri@1.2.0:
+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: true
+
+  /minipass@7.0.4:
+    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dev: true
+
+  /mlly@1.5.0:
+    resolution: {integrity: sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==}
+    dependencies:
+      acorn: 8.11.3
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      ufo: 1.4.0
+    dev: true
+
+  /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
+    dev: false
 
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+  /ms@2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
-  mute-stream@3.0.0:
-    resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
-    engines: {node: ^20.17.0 || >=22.9.0}
-
-  mz@2.7.0:
+  /mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+    dev: true
 
-  nanoid@3.3.12:
-    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@3.3.16:
-    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
 
-  neo-async@2.6.2:
+  /neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+    dev: true
 
-  next@16.2.7:
-    resolution: {integrity: sha512-eMJxgjRzBaj3olkP4cBamHDXL79A8FC6u1GcsO1D1Tsx8bw/LLXUJCaoajVxtnhD3A1IJqIT8IcRJjgBIPJq4w==}
-    engines: {node: '>=20.9.0'}
+  /next@14.1.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==}
+    engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.51.1
-      babel-plugin-react-compiler: '*'
-      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
-      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react: ^18.2.0
+      react-dom: ^18.2.0
       sass: ^1.3.0
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
-      '@playwright/test':
-        optional: true
-      babel-plugin-react-compiler:
-        optional: true
       sass:
         optional: true
+    dependencies:
+      '@next/env': 14.1.0
+      '@swc/helpers': 0.5.2
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001585
+      graceful-fs: 4.2.11
+      postcss: 8.4.31
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      styled-jsx: 5.1.1(react@18.2.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.1.0
+      '@next/swc-darwin-x64': 14.1.0
+      '@next/swc-linux-arm64-gnu': 14.1.0
+      '@next/swc-linux-arm64-musl': 14.1.0
+      '@next/swc-linux-x64-gnu': 14.1.0
+      '@next/swc-linux-x64-musl': 14.1.0
+      '@next/swc-win32-arm64-msvc': 14.1.0
+      '@next/swc-win32-ia32-msvc': 14.1.0
+      '@next/swc-win32-x64-msvc': 14.1.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: false
 
-  node-addon-api@7.1.1:
-    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+  /node-addon-api@7.1.0:
+    resolution: {integrity: sha512-mNcltoe1R8o7STTegSOHdnJNN7s5EUvhoS7ShnTHDyOSd+8H+UdWODq6qSv67PjC8Zc5JRT8+oLAMCr0SIXw7g==}
+    engines: {node: ^16 || ^18 || >= 20}
+    dev: false
 
-  node-addon-api@8.7.0:
-    resolution: {integrity: sha512-9MdFxmkKaOYVTV+XVRG8ArDwwQ77XIgIPyKASB1k3JPq3M8fGQQQE3YpMOrKm6g//Ktx8ivZr8xo1Qmtqub+GA==}
-    engines: {node: ^18 || ^20 || >= 21}
+  /node-releases@2.0.14:
+    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+    dev: false
 
-  node-forge@1.4.0:
-    resolution: {integrity: sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==}
-    engines: {node: '>= 6.13.0'}
-
-  node-gyp-build@4.8.4:
-    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
-    hasBin: true
-
-  node-mock-http@1.0.4:
-    resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==}
-
-  node-releases@2.0.46:
-    resolution: {integrity: sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==}
-    engines: {node: '>=18'}
-
-  normalize-path@3.0.0:
+  /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dev: true
 
-  object-assign@4.1.1:
+  /npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-key: 3.1.1
+    dev: true
+
+  /npm-run-path@5.2.0:
+    resolution: {integrity: sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      path-key: 4.0.0
+    dev: true
+
+  /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
+  /object-inspect@1.13.1:
+    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
+    dev: true
 
-  obug@2.1.1:
-    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+  /object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  obug@2.1.4:
-    resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
-    engines: {node: '>=12.20.0'}
+  /object.assign@4.1.5:
+    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      has-symbols: 1.0.3
+      object-keys: 1.1.1
+    dev: true
 
-  package-up@5.0.0:
-    resolution: {integrity: sha512-MQEgDUvXCa3sGvqHg3pzHO8e9gqTCMPVrWUko3vPQGntwegmFo52mZb2abIVTjFnUcW0BcPz0D93jV5Cas1DWA==}
+  /object.entries@1.1.7:
+    resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
+  /object.fromentries@2.0.7:
+    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
+  /object.groupby@1.0.2:
+    resolution: {integrity: sha512-bzBq58S+x+uo0VjurFT0UktpKHOZmv4/xePiOA1nbB9pMqpGK7rUPNgf+1YC+7mE+0HzhTMqNUuCqvKhj6FnBw==}
+    dependencies:
+      array.prototype.filter: 1.0.3
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-errors: 1.3.0
+    dev: true
+
+  /object.hasown@1.1.3:
+    resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
+    dependencies:
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
+  /object.values@1.1.7:
+    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+    dependencies:
+      mimic-fn: 2.1.0
+    dev: true
+
+  /onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      mimic-fn: 4.0.0
+    dev: true
+
+  /optionator@0.9.3:
+    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      '@aashutoshrathi/word-wrap': 1.2.6
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-limit@5.0.0:
+    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
     engines: {node: '>=18'}
+    dependencies:
+      yocto-queue: 1.0.0
+    dev: true
 
-  path-parse@1.0.7:
+  /p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
+  /parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+    dev: true
+
+  /path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  pathe@2.0.3:
-    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+  /path-scurry@1.10.1:
+    resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      lru-cache: 10.2.0
+      minipass: 7.0.4
+    dev: true
 
-  picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+  /path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+    dev: true
 
-  picomatch@2.3.2:
-    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+  /pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+    dev: true
+
+  /pathval@1.1.1:
+    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
+    dev: true
+
+  /picocolors@1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
-  picomatch@4.0.4:
-    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
-    engines: {node: '>=12'}
-
-  picomatch@4.0.5:
-    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
-    engines: {node: '>=12'}
-
-  pify@2.3.0:
+  /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
-  pirates@4.0.7:
-    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+  /pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
+    dev: true
 
-  pkg-types@1.3.1:
-    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+  /pkg-types@1.0.3:
+    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
+    dependencies:
+      jsonc-parser: 3.2.1
+      mlly: 1.5.0
+      pathe: 1.1.2
+    dev: true
 
-  playwright-core@1.62.1:
-    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
-    engines: {node: '>=20'}
+  /playwright-core@1.41.2:
+    resolution: {integrity: sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==}
+    engines: {node: '>=16'}
     hasBin: true
+    dev: true
 
-  playwright@1.62.1:
-    resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==}
-    engines: {node: '>=20'}
+  /playwright@1.41.2:
+    resolution: {integrity: sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==}
+    engines: {node: '>=16'}
     hasBin: true
+    dependencies:
+      playwright-core: 1.41.2
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-import@16.1.1:
-    resolution: {integrity: sha512-2xVS1NCZAfjtVdvXiyegxzJ447GyqCeEI5V7ApgQVOWnros1p5lGNovJNapwPpMombyFBfqDwt7AD3n2l0KOfQ==}
+  /postcss-import@16.0.0(postcss@8.4.24):
+    resolution: {integrity: sha512-e77lhVvrD1I2y7dYmBv0k9ULTdArgEYZt97T4w6sFIU5uxIHvDFQlKgUUyY7v7Barj0Yf/zm5A4OquZN7jKm5Q==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.24
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+    dev: false
 
-  postcss-js@4.1.0:
-    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
-    engines: {node: ^12 || ^14 || >= 16}
+  /postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
     peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@6.0.1:
-    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      jiti: '>=1.21.0'
       postcss: '>=8.0.9'
-      tsx: ^4.8.1
-      yaml: ^2.4.2
+      ts-node: '>=9.0.0'
     peerDependenciesMeta:
-      jiti:
-        optional: true
       postcss:
         optional: true
-      tsx:
-        optional: true
-      yaml:
+      ts-node:
         optional: true
+    dependencies:
+      lilconfig: 3.0.0
+      yaml: 2.3.4
+    dev: true
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-selector-parser@6.0.10:
-    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
-    engines: {node: '>=4'}
-
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
-  postcss-selector-parser@7.1.4:
-    resolution: {integrity: sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==}
-    engines: {node: '>=4'}
-
-  postcss-value-parser@4.2.0:
+  /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: false
 
-  postcss@8.4.31:
+  /postcss@8.4.24:
+    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
+  /postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: false
 
-  postcss@8.5.16:
-    resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
+  /postcss@8.4.35:
+    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
     engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
 
-  postcss@8.5.25:
-    resolution: {integrity: sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==}
-    engines: {node: ^10 || ^12 || >=14}
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
 
-  prettier-plugin-embed@0.5.1:
-    resolution: {integrity: sha512-2Ege8gIlLNTvHElUeU5XcFsD7/dbDXkQA6H9TczHSJAGxB58nNjjifk/dlRMS5E29eqQx/z+ToA4ZVMWzjME/A==}
-
-  prettier-plugin-organize-imports@4.3.0:
-    resolution: {integrity: sha512-FxFz0qFhyBsGdIsb697f/EkvHzi5SZOhWAjxcx2dLt+Q532bAlhswcXGYB1yzjZ69kW8UoadFBw7TyNwlq96Iw==}
+  /prettier-plugin-organize-imports@3.2.4(prettier@3.2.5)(typescript@5.3.3):
+    resolution: {integrity: sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==}
     peerDependencies:
+      '@volar/vue-language-plugin-pug': ^1.0.4
+      '@volar/vue-typescript': ^1.0.4
       prettier: '>=2.0'
       typescript: '>=2.9'
-      vue-tsc: ^2.1.0 || 3
     peerDependenciesMeta:
-      vue-tsc:
+      '@volar/vue-language-plugin-pug':
         optional: true
+      '@volar/vue-typescript':
+        optional: true
+    dependencies:
+      prettier: 3.2.5
+      typescript: 5.3.3
+    dev: true
 
-  prettier@3.9.6:
-    resolution: {integrity: sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==}
+  /prettier@3.2.5:
+    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
     engines: {node: '>=14'}
     hasBin: true
+    dev: true
 
-  queue-microtask@1.2.3:
+  /pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@jest/schemas': 29.6.3
+      ansi-styles: 5.2.0
+      react-is: 18.2.0
+    dev: true
+
+  /prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+    dev: true
+
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  radix3@1.1.2:
-    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
-
-  react-dom@19.2.6:
-    resolution: {integrity: sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==}
+  /react-dom@18.2.0(react@18.2.0):
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
-      react: ^19.2.6
+      react: ^18.2.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+    dev: false
 
-  react-dom@19.2.7:
-    resolution: {integrity: sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==}
-    peerDependencies:
-      react: ^19.2.7
+  /react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: true
 
-  react@19.2.6:
-    resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
+  /react-is@18.2.0:
+    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+    dev: true
+
+  /react-refresh@0.14.0:
+    resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
-  react@19.2.7:
-    resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
+  /react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
 
-  read-cache@1.0.0:
+  /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: false
 
-  readdirp@3.6.0:
+  /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
+    requiresBuild: true
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
 
-  readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
+  /reflect.getprototypeof@1.0.5:
+    resolution: {integrity: sha512-62wgfC8dJWrmxv44CA36pLDnP6KKl3Vhxb7PL+8+qrrFMMoJij4vgiMP8zV4O8+CBMXY1mHxI5fITGHXFHVmQQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      globalthis: 1.0.3
+      which-builtin-type: 1.1.3
+    dev: true
 
-  require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
+  /regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+    dev: true
 
-  resolve-from@5.0.0:
+  /regexp.prototype.flags@1.5.1:
+    resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      set-function-name: 2.0.1
+    dev: true
+
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
+    dev: true
 
-  resolve@1.22.12:
-    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
-    engines: {node: '>= 0.4'}
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
 
-  reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+  /resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rolldown@1.2.1:
-    resolution: {integrity: sha512-4FKJhg8d3OiyQOA6Q1Q0hoFFpW9/OoX+VsHzpECsdsIZoOArrAK90gl59YK/Z+gnDel45bgJZK03ozH/9bCqEw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  /rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
 
-  rollup@4.60.4:
-    resolution: {integrity: sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==}
+  /rollup@4.9.6:
+    resolution: {integrity: sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.9.6
+      '@rollup/rollup-android-arm64': 4.9.6
+      '@rollup/rollup-darwin-arm64': 4.9.6
+      '@rollup/rollup-darwin-x64': 4.9.6
+      '@rollup/rollup-linux-arm-gnueabihf': 4.9.6
+      '@rollup/rollup-linux-arm64-gnu': 4.9.6
+      '@rollup/rollup-linux-arm64-musl': 4.9.6
+      '@rollup/rollup-linux-riscv64-gnu': 4.9.6
+      '@rollup/rollup-linux-x64-gnu': 4.9.6
+      '@rollup/rollup-linux-x64-musl': 4.9.6
+      '@rollup/rollup-win32-arm64-msvc': 4.9.6
+      '@rollup/rollup-win32-ia32-msvc': 4.9.6
+      '@rollup/rollup-win32-x64-msvc': 4.9.6
+      fsevents: 2.3.3
 
-  run-parallel@1.2.0:
+  /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
 
-  safer-buffer@2.1.2:
-    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+  /safe-array-concat@1.1.0:
+    resolution: {integrity: sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==}
+    engines: {node: '>=0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      get-intrinsic: 1.2.4
+      has-symbols: 1.0.3
+      isarray: 2.0.5
+    dev: true
 
-  scheduler@0.27.0:
-    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+  /safe-regex-test@1.0.3:
+    resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      es-errors: 1.3.0
+      is-regex: 1.1.4
+    dev: true
 
-  schema-utils@4.3.3:
-    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
-    engines: {node: '>= 10.13.0'}
+  /scheduler@0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
 
-  semver@7.8.5:
-    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
-    engines: {node: '>=10'}
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  sharp@0.34.5:
-    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  /semver@7.6.0:
+    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
 
-  siginfo@2.0.0:
+  /set-function-length@1.2.1:
+    resolution: {integrity: sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.2
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.1
+    dev: true
+
+  /set-function-name@2.0.1:
+    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.2
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.1
+    dev: true
+
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: true
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /side-channel@1.0.5:
+    resolution: {integrity: sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      object-inspect: 1.13.1
+    dev: true
+
+  /siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+    dev: true
 
-  signal-exit@4.1.0:
+  /signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: true
+
+  /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
+    dev: true
 
-  slash@5.1.0:
-    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
-    engines: {node: '>=14.16'}
+  /slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+    dev: true
 
-  source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+  /source-map-js@1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
-  source-map-support@0.5.21:
-    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
-
-  source-map@0.6.1:
+  /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
-  source-map@0.7.6:
-    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
-    engines: {node: '>= 12'}
+  /source-map@0.8.0-beta.0:
+    resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
+    engines: {node: '>= 8'}
+    dependencies:
+      whatwg-url: 7.1.0
+    dev: true
 
-  stackback@0.0.2:
+  /stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+    dev: true
 
-  std-env@4.1.0:
-    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
+  /std-env@3.7.0:
+    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+    dev: true
 
-  std-env@4.2.0:
-    resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==}
+  /streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+    dev: false
 
-  styled-jsx@5.1.6:
-    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    dev: true
+
+  /string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+    dev: true
+
+  /string.prototype.matchall@4.0.10:
+    resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      get-intrinsic: 1.2.4
+      has-symbols: 1.0.3
+      internal-slot: 1.0.7
+      regexp.prototype.flags: 1.5.1
+      set-function-name: 2.0.1
+      side-channel: 1.0.5
+    dev: true
+
+  /string.prototype.trim@1.2.8:
+    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
+  /string.prototype.trimend@1.0.7:
+    resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
+  /string.prototype.trimstart@1.0.7:
+    resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+    dev: true
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: true
+
+  /strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-regex: 6.0.1
+    dev: true
+
+  /strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /strip-literal@1.3.0:
+    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
+    dependencies:
+      acorn: 8.11.3
+    dev: true
+
+  /styled-jsx@5.1.1(react@18.2.0):
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       '@babel/core': '*'
       babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
     peerDependenciesMeta:
       '@babel/core':
         optional: true
       babel-plugin-macros:
         optional: true
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+    dev: false
 
-  sucrase@3.35.1:
-    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+  /sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      commander: 4.1.1
+      glob: 10.3.10
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+    dev: true
 
-  supports-color@8.1.1:
-    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
-    engines: {node: '>=10'}
+  /supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: false
 
-  supports-preserve-symlinks-flag@1.0.0:
+  /supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  tagged-tag@1.0.0:
-    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
-    engines: {node: '>=20'}
-
-  tailwindcss@3.4.19:
-    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
-  tapable@2.3.3:
-    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+  /tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
+    dev: true
 
-  terser@5.48.0:
-    resolution: {integrity: sha512-J/9An6vs9Us6wKRriSFXBWdRZapREHqFzdNUKk0pmu804EMR6dr6winwo7e5JDxN4xahxQsuysyYFwlwj4XN/Q==}
-    engines: {node: '>=10'}
-    hasBin: true
+  /test-exclude@6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+    dev: true
 
-  thenify-all@1.6.0:
+  /text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
+
+  /thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+    dev: true
 
-  thenify@3.3.1:
+  /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+    dev: true
 
-  tiny-jsonc@1.0.2:
-    resolution: {integrity: sha512-f5QDAfLq6zIVSyCZQZhhyl0QS6MvAyTxgz4X4x3+EoCktNWEYJ6PeoEA97fyb98njpBNNi88ybpD7m+BDFXaCw==}
+  /tinybench@2.6.0:
+    resolution: {integrity: sha512-N8hW3PG/3aOoZAN5V/NSAEDz0ZixDSSt5b/a05iqtpgfLWMSVuCo7w0k2vVvEjdrIoeGqZzweX2WlyioNIHchA==}
+    dev: true
 
-  tinybench@2.9.0:
-    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
-
-  tinyclip@0.1.15:
-    resolution: {integrity: sha512-uo33abH+Ays0xYaDysoBt494Hb3hsEczMpcC0MwFl773pazORx4fmvKhclhR1wonUbB6vvpRsvVMwnhfqeMc+A==}
-    engines: {node: ^16.14.0 || >= 17.3.0}
-
-  tinyexec@0.3.2:
-    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
-
-  tinyexec@1.1.2:
-    resolution: {integrity: sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==}
-    engines: {node: '>=18'}
-
-  tinyglobby@0.2.16:
-    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
-    engines: {node: '>=12.0.0'}
-
-  tinyglobby@0.2.17:
-    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
-    engines: {node: '>=12.0.0'}
-
-  tinyrainbow@3.1.0:
-    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
+  /tinypool@0.8.2:
+    resolution: {integrity: sha512-SUszKYe5wgsxnNOVlBYO6IC+8VGWdVGZWAqUxp3UErNBtptZvWbwyUOyzNL59zigz2rCA92QiL3wvG+JDSdJdQ==}
     engines: {node: '>=14.0.0'}
+    dev: true
 
-  to-regex-range@5.0.1:
+  /tinyspy@2.2.1:
+    resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
 
-  tree-kill@1.2.2:
+  /tr46@1.0.1:
+    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
+
+  /tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
+    dev: true
 
-  tree-sitter-javascript@0.23.1:
-    resolution: {integrity: sha512-/bnhbrTD9frUYHQTiYnPcxyHORIw157ERBa6dqzaKxvR/x3PC4Yzd+D1pZIMS6zNg2v3a8BZ0oK7jHqsQo9fWA==}
+  /ts-api-utils@1.2.1(typescript@5.3.3):
+    resolution: {integrity: sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==}
+    engines: {node: '>=16'}
     peerDependencies:
-      tree-sitter: ^0.21.1
-    peerDependenciesMeta:
-      tree-sitter:
-        optional: true
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.3.3
+    dev: true
 
-  tree-sitter-typescript@0.23.2:
-    resolution: {integrity: sha512-e04JUUKxTT53/x3Uq1zIL45DoYKVfHH4CZqwgZhPg5qYROl5nQjV+85ruFzFGZxu+QeFVbRTPDRnqL9UbU4VeA==}
-    peerDependencies:
-      tree-sitter: ^0.21.0
-    peerDependenciesMeta:
-      tree-sitter:
-        optional: true
-
-  tree-sitter@0.25.1:
-    resolution: {integrity: sha512-mrcEdkYtHfrK1A6fs3O6FxkBo0Qig5XUXqHhxUOQu0bmPo00QF4XaSx4edpazdHwxnSCjlGKGgIqWdaN4dvTLA==}
-
-  ts-interface-checker@0.1.13:
+  /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+    dev: true
 
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+  /tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+    dev: true
 
-  tsup@8.5.1:
-    resolution: {integrity: sha512-xtgkqwdhpKWr3tKPmCkvYmS9xnQK3m3XgxZHwSUjvfTjp7YfXe5tT3GgWi0F2N+ZSMsOeWeZFh7ZZFg5iPhing==}
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+    dev: false
+
+  /tsup@8.0.1(typescript@5.3.3):
+    resolution: {integrity: sha512-hvW7gUSG96j53ZTSlT4j/KL0q1Q2l6TqGBFc6/mu/L46IoNWqLLUzLRLP1R8Q7xrJTmkDxxDoojV5uCVs1sVOg==}
     engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
@@ -3360,94 +4231,254 @@ packages:
         optional: true
       typescript:
         optional: true
+    dependencies:
+      bundle-require: 4.0.2(esbuild@0.19.12)
+      cac: 6.7.14
+      chokidar: 3.6.0
+      debug: 4.3.4
+      esbuild: 0.19.12
+      execa: 5.1.1
+      globby: 11.1.0
+      joycon: 3.1.1
+      postcss-load-config: 4.0.2
+      resolve-from: 5.0.0
+      rollup: 4.9.6
+      source-map: 0.8.0-beta.0
+      sucrase: 3.35.0
+      tree-kill: 1.2.2
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+      - ts-node
+    dev: true
 
-  turbo@2.10.8:
-    resolution: {integrity: sha512-9+8YX5QOkGXzZxcIykTHgaooRHGMWO+jfdyRK0o+rN0U7hBIig2MrJ8r/aNzIPDPhdA73SGb0O+tIztaModTMg==}
+  /turbo-darwin-64@1.12.4:
+    resolution: {integrity: sha512-dBwFxhp9isTa9RS/fz2gDVk5wWhKQsPQMozYhjM7TT4jTrnYn0ZJMzr7V3B/M/T8QF65TbniW7w1gtgxQgX5Zg==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-darwin-arm64@1.12.4:
+    resolution: {integrity: sha512-1Uo5iI6xsJ1j9ObsqxYRsa3W26mEbUe6fnj4rQYV6kDaqYD54oAMJ6hM53q9rB8JvFxwdrUXGp3PwTw9A0qqkA==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-linux-64@1.12.4:
+    resolution: {integrity: sha512-ONg2aSqKP7LAQOg7ysmU5WpEQp4DGNxSlAiR7um+LKtbmC/UxogbR5+T+Uuq6zGuQ5kJyKjWJ4NhtvUswOqBsA==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-linux-arm64@1.12.4:
+    resolution: {integrity: sha512-9FPufkwdgfIKg/9jj87Cdtftw8o36y27/S2vLN7FTR2pp9c0MQiTBOLVYadUr1FlShupddmaMbTkXEhyt9SdrA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-windows-64@1.12.4:
+    resolution: {integrity: sha512-2mOtxHW5Vjh/5rDVu/aFwsMzI+chs8XcEuJHlY1sYOpEymYTz+u6AXbnzRvwZFMrLKr7J7fQOGl+v96sLKbNdA==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-windows-arm64@1.12.4:
+    resolution: {integrity: sha512-nOY5wae9qnxPOpT1fRuYO0ks6dTwpKMPV6++VkDkamFDLFHUDVM/9kmD2UTeh1yyrKnrZksbb9zmShhmfj1wog==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo@1.12.4:
+    resolution: {integrity: sha512-yUJ7elEUSToiGwFZogXpYKJpQ0BvaMbkEuQECIWtkBLcmWzlMOt6bActsIm29oN83mRU0WbzGt4e8H1KHWedhg==}
     hasBin: true
+    optionalDependencies:
+      turbo-darwin-64: 1.12.4
+      turbo-darwin-arm64: 1.12.4
+      turbo-linux-64: 1.12.4
+      turbo-linux-arm64: 1.12.4
+      turbo-windows-64: 1.12.4
+      turbo-windows-arm64: 1.12.4
+    dev: true
 
-  typanion@3.14.0:
-    resolution: {integrity: sha512-ZW/lVMRabETuYCd9O9ZvMhAh8GslSqaUjxmK/JLPCh6l73CvLBiuXswj/+7LdnWOgYsQ130FqLzFz5aGT4I3Ug==}
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
 
-  type-fest@5.6.0:
-    resolution: {integrity: sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA==}
-    engines: {node: '>=20'}
+  /type-detect@4.0.8:
+    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
+    engines: {node: '>=4'}
+    dev: true
 
-  typescript@5.9.3:
-    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+  /type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /typed-array-buffer@1.0.1:
+    resolution: {integrity: sha512-RSqu1UEuSlrBhHTWC8O9FnPjOduNs4M7rJ4pRKoEjtx1zUNOPN2sSXHLDX+Y2WPbHIxbvg4JFo2DNAEfPIKWoQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      es-errors: 1.3.0
+      is-typed-array: 1.1.13
+    dev: true
+
+  /typed-array-byte-length@1.0.0:
+    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      for-each: 0.3.3
+      has-proto: 1.0.1
+      is-typed-array: 1.1.13
+    dev: true
+
+  /typed-array-byte-offset@1.0.0:
+    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.6
+      call-bind: 1.0.6
+      for-each: 0.3.3
+      has-proto: 1.0.1
+      is-typed-array: 1.1.13
+    dev: true
+
+  /typed-array-length@1.0.4:
+    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
+    dependencies:
+      call-bind: 1.0.6
+      for-each: 0.3.3
+      is-typed-array: 1.1.13
+    dev: true
+
+  /typescript@5.3.3:
+    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
     engines: {node: '>=14.17'}
     hasBin: true
+    dev: true
 
-  typescript@6.0.3:
-    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
-    engines: {node: '>=14.17'}
+  /ufo@1.4.0:
+    resolution: {integrity: sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==}
+    dev: true
+
+  /uglify-js@3.17.4:
+    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
+    engines: {node: '>=0.8.0'}
     hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  ufo@1.6.4:
-    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
+  /unbox-primitive@1.0.2:
+    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+    dependencies:
+      call-bind: 1.0.6
+      has-bigints: 1.0.2
+      has-symbols: 1.0.3
+      which-boxed-primitive: 1.0.2
+    dev: true
 
-  uncrypto@0.1.3:
-    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+  /undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
-
-  undici-types@7.24.6:
-    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
-
-  unicorn-magic@0.4.0:
-    resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
-    engines: {node: '>=20'}
-
-  universal-user-agent@7.0.3:
-    resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
-
-  untun@0.2.2:
-    resolution: {integrity: sha512-+NnOJcSiEtYsVgJmXUzQbJeRAFXJC4yPJYuh6kF9B0Rm6zunXcs/3GZOTllyocSbUDIxD6Bj7e/4ATw7sph1Sw==}
-    hasBin: true
-
-  update-browserslist-db@1.2.3:
-    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+  /update-browserslist-db@1.0.13(browserslist@4.22.3):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.22.3
+      escalade: 3.1.2
+      picocolors: 1.0.0
+    dev: false
 
-  uqr@0.1.3:
-    resolution: {integrity: sha512-0rjE8iEJe4YmT9TOhwsZtqCMRLc5DXZUI2UEYUUg63ikBkqqE5EYWaI0etFe/5KUcmcYwLih2RND1kq+hrUJXA==}
+  /uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
 
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+  /v8-to-istanbul@9.2.0:
+    resolution: {integrity: sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==}
+    engines: {node: '>=10.12.0'}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.22
+      '@types/istanbul-lib-coverage': 2.0.6
+      convert-source-map: 2.0.0
+    dev: true
 
-  vite@8.2.0:
-    resolution: {integrity: sha512-pn+CFpM0lwDeKwmOq1ZaBK/9sjorZcgqxki6MbY/jPEVd9vichIlmlD4HmQ5wdP5EgqQCFRaACBxMC7uEGc6lQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  /vite-node@1.2.2(@types/node@20.11.20):
+    resolution: {integrity: sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.1.1(@types/node@20.11.20)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vite-plugin-handlebars@2.0.0(@types/node@20.11.20):
+    resolution: {integrity: sha512-+J3It0nyhPzx4nT1I+fnWH+jShTEXzm6X0Tgsggdm9IYFD7/eJ6a3ROI13HTe0CVoyaxm/fPxH5HDAKyfz7T0g==}
+    dependencies:
+      handlebars: 4.7.8
+      vite: 5.1.1(@types/node@20.11.20)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - terser
+    dev: true
+
+  /vite@5.1.1(@types/node@20.11.17):
+    resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': ^20.19.0 || >=22.12.0
-      '@vitejs/devtools': ^0.4.0
-      esbuild: ^0.27.0 || ^0.28.0
-      jiti: '>=1.21.0'
-      less: ^4.0.0
-      sass: ^1.70.0
-      sass-embedded: ^1.70.0
-      stylus: '>=0.54.8'
-      sugarss: ^5.0.0
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
     peerDependenciesMeta:
       '@types/node':
         optional: true
-      '@vitejs/devtools':
-        optional: true
-      esbuild:
-        optional: true
-      jiti:
-        optional: true
       less:
         optional: true
-      sass:
+      lightningcss:
         optional: true
-      sass-embedded:
+      sass:
         optional: true
       stylus:
         optional: true
@@ -3455,44 +4486,67 @@ packages:
         optional: true
       terser:
         optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
+    dependencies:
+      '@types/node': 20.11.17
+      esbuild: 0.19.12
+      postcss: 8.4.35
+      rollup: 4.9.6
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
 
-  vitest@4.1.10:
-    resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
-    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+  /vite@5.1.1(@types/node@20.11.20):
+    resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 20.11.20
+      esbuild: 0.19.12
+      postcss: 8.4.35
+      rollup: 4.9.6
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  /vitest@1.2.2(@types/node@20.11.20):
+    resolution: {integrity: sha512-d5Ouvrnms3GD9USIK36KG8OZ5bEvKEkITFtnGv56HFaSlbItJuYr7hv2Lkn903+AvRAgSixiamozUVfORUekjw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@opentelemetry/api': ^1.9.0
-      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/browser-playwright': 4.1.10
-      '@vitest/browser-preview': 4.1.10
-      '@vitest/browser-webdriverio': 4.1.10
-      '@vitest/coverage-istanbul': 4.1.10
-      '@vitest/coverage-v8': 4.1.10
-      '@vitest/ui': 4.1.10
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': ^1.0.0
+      '@vitest/ui': ^1.0.0
       happy-dom: '*'
       jsdom: '*'
-      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
-      '@opentelemetry/api':
-        optional: true
       '@types/node':
         optional: true
-      '@vitest/browser-playwright':
-        optional: true
-      '@vitest/browser-preview':
-        optional: true
-      '@vitest/browser-webdriverio':
-        optional: true
-      '@vitest/coverage-istanbul':
-        optional: true
-      '@vitest/coverage-v8':
+      '@vitest/browser':
         optional: true
       '@vitest/ui':
         optional: true
@@ -3500,2432 +4554,161 @@ packages:
         optional: true
       jsdom:
         optional: true
+    dependencies:
+      '@types/node': 20.11.20
+      '@vitest/expect': 1.2.2
+      '@vitest/runner': 1.2.2
+      '@vitest/snapshot': 1.2.2
+      '@vitest/spy': 1.2.2
+      '@vitest/utils': 1.2.2
+      acorn-walk: 8.3.2
+      cac: 6.7.14
+      chai: 4.4.1
+      debug: 4.3.4
+      execa: 8.0.1
+      local-pkg: 0.5.0
+      magic-string: 0.30.7
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      strip-literal: 1.3.0
+      tinybench: 2.6.0
+      tinypool: 0.8.2
+      vite: 5.1.1(@types/node@20.11.20)
+      vite-node: 1.2.2(@types/node@20.11.20)
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
 
-  watchpack@2.5.2:
-    resolution: {integrity: sha512-6i/00NBjP4yGPs+caKSyRfpTF/8Torsu0MOW3mMzIbhgISFder8i7xbqgHlLMwJrdiN8ndBV3UA1/AfzPSr+jg==}
-    engines: {node: '>=10.13.0'}
+  /webidl-conversions@4.0.2:
+    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
+    dev: true
 
-  webpack-sources@3.5.1:
-    resolution: {integrity: sha512-jyuiGJdtvY434z5bUZrjz67v76/ePNvFZTp9Mdz29IlH4+GPsgyGjiv0fKI+M7BdkU6ADjulUcKAd3tUK3WlEw==}
-    engines: {node: '>=10.13.0'}
+  /whatwg-url@7.1.0:
+    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
+    dependencies:
+      lodash.sortby: 4.7.0
+      tr46: 1.0.1
+      webidl-conversions: 4.0.2
+    dev: true
 
-  webpack@5.109.2:
-    resolution: {integrity: sha512-U9/cvLzxObKNEZ9+TtdqrHM5/9z3lgl2c+c4BzbqGxFQvQvBAq87yql5A8pQ+rrMbS496MZJeF5enVBndIy2hw==}
-    engines: {node: '>=10.13.0'}
+  /which-boxed-primitive@1.0.2:
+    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+    dependencies:
+      is-bigint: 1.0.4
+      is-boolean-object: 1.1.2
+      is-number-object: 1.0.7
+      is-string: 1.0.7
+      is-symbol: 1.0.4
+    dev: true
+
+  /which-builtin-type@1.1.3:
+    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function.prototype.name: 1.1.6
+      has-tostringtag: 1.0.2
+      is-async-function: 2.0.0
+      is-date-object: 1.0.5
+      is-finalizationregistry: 1.0.2
+      is-generator-function: 1.0.10
+      is-regex: 1.1.4
+      is-weakref: 1.0.2
+      isarray: 2.0.5
+      which-boxed-primitive: 1.0.2
+      which-collection: 1.0.1
+      which-typed-array: 1.1.14
+    dev: true
+
+  /which-collection@1.0.1:
+    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
+    dependencies:
+      is-map: 2.0.2
+      is-set: 2.0.2
+      is-weakmap: 2.0.1
+      is-weakset: 2.0.2
+    dev: true
+
+  /which-typed-array@1.1.14:
+    resolution: {integrity: sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.6
+      call-bind: 1.0.6
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
     hasBin: true
-    peerDependencies:
-      webpack-cli: '*'
-    peerDependenciesMeta:
-      webpack-cli:
-        optional: true
+    dependencies:
+      isexe: 2.0.0
+    dev: true
 
-  why-is-node-running@2.3.0:
-    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+  /why-is-node-running@2.2.2:
+    resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==}
     engines: {node: '>=8'}
     hasBin: true
-
-  yaml@2.9.0:
-    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
-    engines: {node: '>= 14.6'}
-    hasBin: true
-
-snapshots:
-
-  '@alloc/quick-lru@5.2.0': {}
-
-  '@emnapi/core@1.10.0':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.1
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/core@1.11.3':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.3
-      tslib: 2.8.1
-
-  '@emnapi/core@2.0.0-alpha.3':
-    dependencies:
-      '@emnapi/wasi-threads': 2.0.1
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/runtime@1.10.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/runtime@1.11.3':
-    dependencies:
-      tslib: 2.8.1
-
-  '@emnapi/runtime@2.0.0-alpha.3':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/wasi-threads@1.2.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/wasi-threads@1.2.3':
-    dependencies:
-      tslib: 2.8.1
-
-  '@emnapi/wasi-threads@2.0.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@esbuild/aix-ppc64@0.27.7':
-    optional: true
-
-  '@esbuild/android-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/android-arm@0.27.7':
-    optional: true
-
-  '@esbuild/android-x64@0.27.7':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/darwin-x64@0.27.7':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-arm@0.27.7':
-    optional: true
-
-  '@esbuild/linux-ia32@0.27.7':
-    optional: true
-
-  '@esbuild/linux-loong64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.27.7':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.27.7':
-    optional: true
-
-  '@esbuild/linux-s390x@0.27.7':
-    optional: true
-
-  '@esbuild/linux-x64@0.27.7':
-    optional: true
-
-  '@esbuild/netbsd-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.27.7':
-    optional: true
-
-  '@esbuild/openbsd-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.27.7':
-    optional: true
-
-  '@esbuild/openharmony-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/sunos-x64@0.27.7':
-    optional: true
-
-  '@esbuild/win32-arm64@0.27.7':
-    optional: true
-
-  '@esbuild/win32-ia32@0.27.7':
-    optional: true
-
-  '@esbuild/win32-x64@0.27.7':
-    optional: true
-
-  '@img/colour@1.1.0':
-    optional: true
-
-  '@img/sharp-darwin-arm64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
-    optional: true
-
-  '@img/sharp-darwin-x64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.2.4
-    optional: true
-
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-darwin-x64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-arm64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-arm@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-s390x@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-x64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
-    optional: true
-
-  '@img/sharp-linux-arm64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-arm@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-ppc64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-riscv64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-s390x@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-x64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.2.4
-    optional: true
-
-  '@img/sharp-linuxmusl-arm64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
-    optional: true
-
-  '@img/sharp-linuxmusl-x64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
-    optional: true
-
-  '@img/sharp-wasm32@0.34.5':
-    dependencies:
-      '@emnapi/runtime': 1.11.3
-    optional: true
-
-  '@img/sharp-win32-arm64@0.34.5':
-    optional: true
-
-  '@img/sharp-win32-ia32@0.34.5':
-    optional: true
-
-  '@img/sharp-win32-x64@0.34.5':
-    optional: true
-
-  '@inquirer/ansi@2.0.7': {}
-
-  '@inquirer/checkbox@5.2.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/confirm@6.1.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/core@11.2.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-      cli-width: 4.1.0
-      fast-wrap-ansi: 0.2.2
-      mute-stream: 3.0.0
-      signal-exit: 4.1.0
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/editor@5.2.2(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/external-editor': 3.0.3(@types/node@25.9.1)
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/expand@5.1.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/external-editor@3.0.3(@types/node@25.9.1)':
-    dependencies:
-      chardet: 2.1.1
-      iconv-lite: 0.7.2
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/figures@2.0.7': {}
-
-  '@inquirer/input@5.1.2(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/number@4.1.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/password@5.1.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/prompts@8.5.2(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/checkbox': 5.2.1(@types/node@25.9.1)
-      '@inquirer/confirm': 6.1.1(@types/node@25.9.1)
-      '@inquirer/editor': 5.2.2(@types/node@25.9.1)
-      '@inquirer/expand': 5.1.1(@types/node@25.9.1)
-      '@inquirer/input': 5.1.2(@types/node@25.9.1)
-      '@inquirer/number': 4.1.1(@types/node@25.9.1)
-      '@inquirer/password': 5.1.1(@types/node@25.9.1)
-      '@inquirer/rawlist': 5.3.1(@types/node@25.9.1)
-      '@inquirer/search': 4.2.1(@types/node@25.9.1)
-      '@inquirer/select': 5.2.1(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/rawlist@5.3.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/search@4.2.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/select@5.2.1(@types/node@25.9.1)':
-    dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@25.9.1)
-      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@25.9.1)
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@inquirer/type@4.0.7(@types/node@25.9.1)':
-    optionalDependencies:
-      '@types/node': 25.9.1
-
-  '@jridgewell/gen-mapping@0.3.13':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/remapping@2.3.5':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/resolve-uri@3.1.2': {}
-
-  '@jridgewell/source-map@0.3.11':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/sourcemap-codec@1.5.5': {}
-
-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  '@napi-rs/cli@3.7.4(patch_hash=9912bf0a9c2cef8329d11c41fbce4d33ce2bdcf660a630b258c962c0a3c44bed)(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)(@types/node@25.9.1)(node-addon-api@8.7.0)':
-    dependencies:
-      '@inquirer/prompts': 8.5.2(@types/node@25.9.1)
-      '@napi-rs/cross-toolchain': 1.0.3(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      '@napi-rs/wasm-tools': 1.0.1(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      '@octokit/rest': 22.0.1
-      clipanion: 4.0.0-rc.4(typanion@3.14.0)
-      colorette: 2.0.20
-      emnapi: 1.11.3(node-addon-api@8.7.0)
-      es-toolkit: 1.50.0
-      js-yaml: 4.3.1
-      obug: 2.1.4
-      semver: 7.8.5
-      typanion: 3.14.0
-    optionalDependencies:
-      '@emnapi/runtime': 1.11.3
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@napi-rs/cross-toolchain-arm64-target-aarch64'
-      - '@napi-rs/cross-toolchain-arm64-target-armv7'
-      - '@napi-rs/cross-toolchain-arm64-target-ppc64le'
-      - '@napi-rs/cross-toolchain-arm64-target-s390x'
-      - '@napi-rs/cross-toolchain-arm64-target-x86_64'
-      - '@napi-rs/cross-toolchain-x64-target-aarch64'
-      - '@napi-rs/cross-toolchain-x64-target-armv7'
-      - '@napi-rs/cross-toolchain-x64-target-ppc64le'
-      - '@napi-rs/cross-toolchain-x64-target-s390x'
-      - '@napi-rs/cross-toolchain-x64-target-x86_64'
-      - '@types/node'
-      - node-addon-api
-      - supports-color
-
-  '@napi-rs/cross-toolchain@1.0.3(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
-    dependencies:
-      '@napi-rs/lzma': 1.4.5(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      '@napi-rs/tar': 1.1.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - supports-color
-
-  '@napi-rs/lzma-android-arm-eabi@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-android-arm64@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-darwin-arm64@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-darwin-x64@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-freebsd-x64@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-linux-arm-gnueabihf@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-linux-arm64-gnu@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-linux-arm64-musl@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-linux-ppc64-gnu@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-linux-riscv64-gnu@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-linux-s390x-gnu@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-linux-x64-gnu@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-linux-x64-musl@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-wasm32-wasi@1.4.5(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-    optional: true
-
-  '@napi-rs/lzma-win32-arm64-msvc@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-win32-ia32-msvc@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma-win32-x64-msvc@1.4.5':
-    optional: true
-
-  '@napi-rs/lzma@1.4.5(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
-    optionalDependencies:
-      '@napi-rs/lzma-android-arm-eabi': 1.4.5
-      '@napi-rs/lzma-android-arm64': 1.4.5
-      '@napi-rs/lzma-darwin-arm64': 1.4.5
-      '@napi-rs/lzma-darwin-x64': 1.4.5
-      '@napi-rs/lzma-freebsd-x64': 1.4.5
-      '@napi-rs/lzma-linux-arm-gnueabihf': 1.4.5
-      '@napi-rs/lzma-linux-arm64-gnu': 1.4.5
-      '@napi-rs/lzma-linux-arm64-musl': 1.4.5
-      '@napi-rs/lzma-linux-ppc64-gnu': 1.4.5
-      '@napi-rs/lzma-linux-riscv64-gnu': 1.4.5
-      '@napi-rs/lzma-linux-s390x-gnu': 1.4.5
-      '@napi-rs/lzma-linux-x64-gnu': 1.4.5
-      '@napi-rs/lzma-linux-x64-musl': 1.4.5
-      '@napi-rs/lzma-wasm32-wasi': 1.4.5(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      '@napi-rs/lzma-win32-arm64-msvc': 1.4.5
-      '@napi-rs/lzma-win32-ia32-msvc': 1.4.5
-      '@napi-rs/lzma-win32-x64-msvc': 1.4.5
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-
-  '@napi-rs/tar-android-arm-eabi@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-android-arm64@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-darwin-arm64@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-darwin-x64@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-freebsd-x64@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-linux-arm-gnueabihf@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-linux-arm64-gnu@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-linux-arm64-musl@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-linux-ppc64-gnu@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-linux-s390x-gnu@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-linux-x64-gnu@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-linux-x64-musl@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-wasm32-wasi@1.1.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-    optional: true
-
-  '@napi-rs/tar-win32-arm64-msvc@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-win32-ia32-msvc@1.1.0':
-    optional: true
-
-  '@napi-rs/tar-win32-x64-msvc@1.1.0':
-    optional: true
-
-  '@napi-rs/tar@1.1.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
-    optionalDependencies:
-      '@napi-rs/tar-android-arm-eabi': 1.1.0
-      '@napi-rs/tar-android-arm64': 1.1.0
-      '@napi-rs/tar-darwin-arm64': 1.1.0
-      '@napi-rs/tar-darwin-x64': 1.1.0
-      '@napi-rs/tar-freebsd-x64': 1.1.0
-      '@napi-rs/tar-linux-arm-gnueabihf': 1.1.0
-      '@napi-rs/tar-linux-arm64-gnu': 1.1.0
-      '@napi-rs/tar-linux-arm64-musl': 1.1.0
-      '@napi-rs/tar-linux-ppc64-gnu': 1.1.0
-      '@napi-rs/tar-linux-s390x-gnu': 1.1.0
-      '@napi-rs/tar-linux-x64-gnu': 1.1.0
-      '@napi-rs/tar-linux-x64-musl': 1.1.0
-      '@napi-rs/tar-wasm32-wasi': 1.1.0(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      '@napi-rs/tar-win32-arm64-msvc': 1.1.0
-      '@napi-rs/tar-win32-ia32-msvc': 1.1.0
-      '@napi-rs/tar-win32-x64-msvc': 1.1.0
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-
-  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
-    dependencies:
-      '@emnapi/core': 1.10.0
-      '@emnapi/runtime': 1.10.0
-      '@tybys/wasm-util': 0.10.3
-    optional: true
-
-  '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
-    dependencies:
-      '@emnapi/core': 1.11.3
-      '@emnapi/runtime': 1.11.3
-      '@tybys/wasm-util': 0.10.3
-
-  '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@2.0.0-alpha.3)(@emnapi/runtime@2.0.0-alpha.3)':
-    dependencies:
-      '@emnapi/core': 2.0.0-alpha.3
-      '@emnapi/runtime': 2.0.0-alpha.3
-      '@tybys/wasm-util': 0.10.3
-    optional: true
-
-  '@napi-rs/wasm-tools-android-arm-eabi@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-android-arm64@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-darwin-arm64@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-darwin-x64@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-freebsd-x64@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-linux-arm64-gnu@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-linux-arm64-musl@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-linux-x64-gnu@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-linux-x64-musl@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-wasm32-wasi@1.0.1(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-    optional: true
-
-  '@napi-rs/wasm-tools-win32-arm64-msvc@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-win32-ia32-msvc@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools-win32-x64-msvc@1.0.1':
-    optional: true
-
-  '@napi-rs/wasm-tools@1.0.1(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
-    optionalDependencies:
-      '@napi-rs/wasm-tools-android-arm-eabi': 1.0.1
-      '@napi-rs/wasm-tools-android-arm64': 1.0.1
-      '@napi-rs/wasm-tools-darwin-arm64': 1.0.1
-      '@napi-rs/wasm-tools-darwin-x64': 1.0.1
-      '@napi-rs/wasm-tools-freebsd-x64': 1.0.1
-      '@napi-rs/wasm-tools-linux-arm64-gnu': 1.0.1
-      '@napi-rs/wasm-tools-linux-arm64-musl': 1.0.1
-      '@napi-rs/wasm-tools-linux-x64-gnu': 1.0.1
-      '@napi-rs/wasm-tools-linux-x64-musl': 1.0.1
-      '@napi-rs/wasm-tools-wasm32-wasi': 1.0.1(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
-      '@napi-rs/wasm-tools-win32-arm64-msvc': 1.0.1
-      '@napi-rs/wasm-tools-win32-ia32-msvc': 1.0.1
-      '@napi-rs/wasm-tools-win32-x64-msvc': 1.0.1
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-
-  '@next/env@16.2.7': {}
-
-  '@next/swc-darwin-arm64@16.2.7':
-    optional: true
-
-  '@next/swc-darwin-x64@16.2.7':
-    optional: true
-
-  '@next/swc-linux-arm64-gnu@16.2.7':
-    optional: true
-
-  '@next/swc-linux-arm64-musl@16.2.7':
-    optional: true
-
-  '@next/swc-linux-x64-gnu@16.2.7':
-    optional: true
-
-  '@next/swc-linux-x64-musl@16.2.7':
-    optional: true
-
-  '@next/swc-win32-arm64-msvc@16.2.7':
-    optional: true
-
-  '@next/swc-win32-x64-msvc@16.2.7':
-    optional: true
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.20.1
-
-  '@octokit/auth-token@6.0.0': {}
-
-  '@octokit/core@7.0.6':
-    dependencies:
-      '@octokit/auth-token': 6.0.0
-      '@octokit/graphql': 9.0.3
-      '@octokit/request': 10.0.9
-      '@octokit/request-error': 7.1.0
-      '@octokit/types': 16.0.0
-      before-after-hook: 4.0.0
-      universal-user-agent: 7.0.3
-
-  '@octokit/endpoint@11.0.3':
-    dependencies:
-      '@octokit/types': 16.0.0
-      universal-user-agent: 7.0.3
-
-  '@octokit/graphql@9.0.3':
-    dependencies:
-      '@octokit/request': 10.0.9
-      '@octokit/types': 16.0.0
-      universal-user-agent: 7.0.3
-
-  '@octokit/openapi-types@27.0.0': {}
-
-  '@octokit/plugin-paginate-rest@14.0.0(@octokit/core@7.0.6)':
-    dependencies:
-      '@octokit/core': 7.0.6
-      '@octokit/types': 16.0.0
-
-  '@octokit/plugin-request-log@6.0.0(@octokit/core@7.0.6)':
-    dependencies:
-      '@octokit/core': 7.0.6
-
-  '@octokit/plugin-rest-endpoint-methods@17.0.0(@octokit/core@7.0.6)':
-    dependencies:
-      '@octokit/core': 7.0.6
-      '@octokit/types': 16.0.0
-
-  '@octokit/request-error@7.1.0':
-    dependencies:
-      '@octokit/types': 16.0.0
-
-  '@octokit/request@10.0.9':
-    dependencies:
-      '@octokit/endpoint': 11.0.3
-      '@octokit/request-error': 7.1.0
-      '@octokit/types': 16.0.0
-      content-type: 2.0.0
-      fast-content-type-parse: 3.0.0
-      json-with-bigint: 3.5.8
-      universal-user-agent: 7.0.3
-
-  '@octokit/rest@22.0.1':
-    dependencies:
-      '@octokit/core': 7.0.6
-      '@octokit/plugin-paginate-rest': 14.0.0(@octokit/core@7.0.6)
-      '@octokit/plugin-request-log': 6.0.0(@octokit/core@7.0.6)
-      '@octokit/plugin-rest-endpoint-methods': 17.0.0(@octokit/core@7.0.6)
-
-  '@octokit/types@16.0.0':
-    dependencies:
-      '@octokit/openapi-types': 27.0.0
-
-  '@oven/bun-darwin-aarch64@1.3.14':
-    optional: true
-
-  '@oven/bun-darwin-x64-baseline@1.3.14':
-    optional: true
-
-  '@oven/bun-darwin-x64@1.3.14':
-    optional: true
-
-  '@oven/bun-freebsd-aarch64@1.3.14':
-    optional: true
-
-  '@oven/bun-freebsd-x64@1.3.14':
-    optional: true
-
-  '@oven/bun-linux-aarch64-android@1.3.14':
-    optional: true
-
-  '@oven/bun-linux-aarch64-musl@1.3.14':
-    optional: true
-
-  '@oven/bun-linux-aarch64@1.3.14':
-    optional: true
-
-  '@oven/bun-linux-x64-android@1.3.14':
-    optional: true
-
-  '@oven/bun-linux-x64-baseline@1.3.14':
-    optional: true
-
-  '@oven/bun-linux-x64-musl-baseline@1.3.14':
-    optional: true
-
-  '@oven/bun-linux-x64-musl@1.3.14':
-    optional: true
-
-  '@oven/bun-linux-x64@1.3.14':
-    optional: true
-
-  '@oven/bun-windows-aarch64@1.3.14':
-    optional: true
-
-  '@oven/bun-windows-x64-baseline@1.3.14':
-    optional: true
-
-  '@oven/bun-windows-x64@1.3.14':
-    optional: true
-
-  '@oxc-project/types@0.142.0': {}
-
-  '@parcel/watcher-android-arm64@2.6.0':
-    optional: true
-
-  '@parcel/watcher-darwin-arm64@2.6.0': {}
-
-  '@parcel/watcher-darwin-x64@2.6.0': {}
-
-  '@parcel/watcher-freebsd-x64@2.6.0':
-    optional: true
-
-  '@parcel/watcher-linux-arm-glibc@2.6.0':
-    optional: true
-
-  '@parcel/watcher-linux-arm-musl@2.6.0':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-glibc@2.6.0': {}
-
-  '@parcel/watcher-linux-arm64-musl@2.6.0': {}
-
-  '@parcel/watcher-linux-x64-glibc@2.6.0': {}
-
-  '@parcel/watcher-linux-x64-musl@2.6.0': {}
-
-  '@parcel/watcher-wasm@2.5.6':
-    dependencies:
-      is-glob: 4.0.3
-      picomatch: 4.0.5
-
-  '@parcel/watcher-win32-arm64@2.6.0':
-    optional: true
-
-  '@parcel/watcher-win32-x64@2.6.0': {}
-
-  '@parcel/watcher@2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da)':
-    dependencies:
-      detect-libc: 2.1.2
-      is-glob: 4.0.3
-      node-addon-api: 7.1.1
-      picomatch: 4.0.5
-    optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.6.0
-      '@parcel/watcher-darwin-arm64': 2.6.0
-      '@parcel/watcher-darwin-x64': 2.6.0
-      '@parcel/watcher-freebsd-x64': 2.6.0
-      '@parcel/watcher-linux-arm-glibc': 2.6.0
-      '@parcel/watcher-linux-arm-musl': 2.6.0
-      '@parcel/watcher-linux-arm64-glibc': 2.6.0
-      '@parcel/watcher-linux-arm64-musl': 2.6.0
-      '@parcel/watcher-linux-x64-glibc': 2.6.0
-      '@parcel/watcher-linux-x64-musl': 2.6.0
-      '@parcel/watcher-win32-arm64': 2.6.0
-      '@parcel/watcher-win32-x64': 2.6.0
-
-  '@playwright/test@1.62.1':
-    dependencies:
-      playwright: 1.62.1
-
-  '@rolldown/binding-android-arm64@1.2.1':
-    optional: true
-
-  '@rolldown/binding-darwin-arm64@1.2.1':
-    optional: true
-
-  '@rolldown/binding-darwin-x64@1.2.1':
-    optional: true
-
-  '@rolldown/binding-freebsd-x64@1.2.1':
-    optional: true
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.2.1':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-gnu@1.2.1':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-musl@1.2.1':
-    optional: true
-
-  '@rolldown/binding-linux-ppc64-gnu@1.2.1':
-    optional: true
-
-  '@rolldown/binding-linux-s390x-gnu@1.2.1':
-    optional: true
-
-  '@rolldown/binding-linux-x64-gnu@1.2.1':
-    optional: true
-
-  '@rolldown/binding-linux-x64-musl@1.2.1':
-    optional: true
-
-  '@rolldown/binding-openharmony-arm64@1.2.1':
-    optional: true
-
-  '@rolldown/binding-wasm32-wasi@1.2.1':
-    dependencies:
-      '@emnapi/core': 2.0.0-alpha.3
-      '@emnapi/runtime': 2.0.0-alpha.3
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@2.0.0-alpha.3)(@emnapi/runtime@2.0.0-alpha.3)
-    optional: true
-
-  '@rolldown/binding-win32-arm64-msvc@1.2.1':
-    optional: true
-
-  '@rolldown/binding-win32-x64-msvc@1.2.1':
-    optional: true
-
-  '@rolldown/pluginutils@1.0.1': {}
-
-  '@rollup/rollup-android-arm-eabi@4.60.4':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.60.4':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.60.4':
-    optional: true
-
-  '@rollup/rollup-darwin-x64@4.60.4':
-    optional: true
-
-  '@rollup/rollup-freebsd-arm64@4.60.4':
-    optional: true
-
-  '@rollup/rollup-freebsd-x64@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-loong64-gnu@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-loong64-musl@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-ppc64-musl@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-musl@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-s390x-gnu@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-x64-gnu@4.60.4':
-    optional: true
-
-  '@rollup/rollup-linux-x64-musl@4.60.4':
-    optional: true
-
-  '@rollup/rollup-openbsd-x64@4.60.4':
-    optional: true
-
-  '@rollup/rollup-openharmony-arm64@4.60.4':
-    optional: true
-
-  '@rollup/rollup-win32-arm64-msvc@4.60.4':
-    optional: true
-
-  '@rollup/rollup-win32-ia32-msvc@4.60.4':
-    optional: true
-
-  '@rollup/rollup-win32-x64-gnu@4.60.4':
-    optional: true
-
-  '@rollup/rollup-win32-x64-msvc@4.60.4':
-    optional: true
-
-  '@rspack/binding-darwin-arm64@2.0.2':
-    optional: true
-
-  '@rspack/binding-darwin-x64@2.0.2':
-    optional: true
-
-  '@rspack/binding-linux-arm64-gnu@2.0.2':
-    optional: true
-
-  '@rspack/binding-linux-arm64-musl@2.0.2':
-    optional: true
-
-  '@rspack/binding-linux-x64-gnu@2.0.2':
-    optional: true
-
-  '@rspack/binding-linux-x64-musl@2.0.2':
-    optional: true
-
-  '@rspack/binding-wasm32-wasi@2.0.2':
-    dependencies:
-      '@emnapi/core': 1.10.0
-      '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
-    optional: true
-
-  '@rspack/binding-win32-arm64-msvc@2.0.2':
-    optional: true
-
-  '@rspack/binding-win32-ia32-msvc@2.0.2':
-    optional: true
-
-  '@rspack/binding-win32-x64-msvc@2.0.2':
-    optional: true
-
-  '@rspack/binding@2.0.2':
-    optionalDependencies:
-      '@rspack/binding-darwin-arm64': 2.0.2
-      '@rspack/binding-darwin-x64': 2.0.2
-      '@rspack/binding-linux-arm64-gnu': 2.0.2
-      '@rspack/binding-linux-arm64-musl': 2.0.2
-      '@rspack/binding-linux-x64-gnu': 2.0.2
-      '@rspack/binding-linux-x64-musl': 2.0.2
-      '@rspack/binding-wasm32-wasi': 2.0.2
-      '@rspack/binding-win32-arm64-msvc': 2.0.2
-      '@rspack/binding-win32-ia32-msvc': 2.0.2
-      '@rspack/binding-win32-x64-msvc': 2.0.2
-
-  '@rspack/core@2.0.2(@swc/helpers@0.5.15)':
-    dependencies:
-      '@rspack/binding': 2.0.2
-    optionalDependencies:
-      '@swc/helpers': 0.5.15
-
-  '@sindresorhus/merge-streams@4.0.0': {}
-
-  '@standard-schema/spec@1.1.0': {}
-
-  '@swc/helpers@0.5.15':
-    dependencies:
-      tslib: 2.8.1
-
-  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@packages+tailwindcss)':
-    dependencies:
-      tailwindcss: link:packages/tailwindcss
-
-  '@tailwindcss/forms@0.5.11(tailwindcss@packages+tailwindcss)':
-    dependencies:
-      mini-svg-data-uri: 1.4.4
-      tailwindcss: link:packages/tailwindcss
-
-  '@tailwindcss/typography@0.5.20(tailwindcss@packages+tailwindcss)':
-    dependencies:
-      postcss-selector-parser: 6.0.10
-      tailwindcss: link:packages/tailwindcss
-
-  '@turbo/darwin-64@2.10.8':
-    optional: true
-
-  '@turbo/darwin-arm64@2.10.8':
-    optional: true
-
-  '@turbo/linux-64@2.10.8':
-    optional: true
-
-  '@turbo/linux-arm64@2.10.8':
-    optional: true
-
-  '@turbo/windows-64@2.10.8':
-    optional: true
-
-  '@turbo/windows-arm64@2.10.8':
-    optional: true
-
-  '@tybys/wasm-util@0.10.3':
-    dependencies:
-      tslib: 2.8.1
-
-  '@types/bun@1.3.14':
-    dependencies:
-      bun-types: 1.3.14
-
-  '@types/chai@5.2.3':
-    dependencies:
-      '@types/deep-eql': 4.0.2
-      assertion-error: 2.0.1
-
-  '@types/deep-eql@4.0.2': {}
-
-  '@types/estree@1.0.8': {}
-
-  '@types/estree@1.0.9': {}
-
-  '@types/json-schema@7.0.15': {}
-
-  '@types/node@22.20.1':
-    dependencies:
-      undici-types: 6.21.0
-
-  '@types/node@25.9.1':
-    dependencies:
-      undici-types: 7.24.6
-
-  '@types/postcss-import@14.0.3':
-    dependencies:
-      postcss: 8.5.25
-
-  '@types/react-dom@19.2.3(@types/react@19.2.15)':
-    dependencies:
-      '@types/react': 19.2.15
-
-  '@types/react@19.2.15':
-    dependencies:
-      csstype: 3.2.3
-
-  '@types/semver@7.8.0': {}
-
-  '@vitejs/plugin-react@6.0.2(vite@8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))':
-    dependencies:
-      '@rolldown/pluginutils': 1.0.1
-      vite: 8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
-
-  '@vitest/expect@4.1.10':
-    dependencies:
-      '@standard-schema/spec': 1.1.0
-      '@types/chai': 5.2.3
-      '@vitest/spy': 4.1.10
-      '@vitest/utils': 4.1.10
-      chai: 6.2.2
-      tinyrainbow: 3.1.0
-
-  '@vitest/mocker@4.1.10(vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))':
-    dependencies:
-      '@vitest/spy': 4.1.10
-      estree-walker: 3.0.3
-      magic-string: 0.30.21
-    optionalDependencies:
-      vite: 8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
-
-  '@vitest/pretty-format@4.1.10':
-    dependencies:
-      tinyrainbow: 3.1.0
-
-  '@vitest/runner@4.1.10':
-    dependencies:
-      '@vitest/utils': 4.1.10
-      pathe: 2.0.3
-
-  '@vitest/snapshot@4.1.10':
-    dependencies:
-      '@vitest/pretty-format': 4.1.10
-      '@vitest/utils': 4.1.10
-      magic-string: 0.30.21
-      pathe: 2.0.3
-
-  '@vitest/spy@4.1.10': {}
-
-  '@vitest/utils@4.1.10':
-    dependencies:
-      '@vitest/pretty-format': 4.1.10
-      convert-source-map: 2.0.0
-      tinyrainbow: 3.1.0
-
-  '@webassemblyjs/ast@1.14.1':
-    dependencies:
-      '@webassemblyjs/helper-numbers': 1.13.2
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2': {}
-
-  '@webassemblyjs/helper-api-error@1.13.2': {}
-
-  '@webassemblyjs/helper-buffer@1.14.1': {}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    dependencies:
-      '@webassemblyjs/floating-point-hex-parser': 1.13.2
-      '@webassemblyjs/helper-api-error': 1.13.2
-      '@xtuc/long': 4.2.2
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2': {}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/wasm-gen': 1.14.1
-
-  '@webassemblyjs/ieee754@1.13.2':
-    dependencies:
-      '@xtuc/ieee754': 1.2.0
-
-  '@webassemblyjs/leb128@1.13.2':
-    dependencies:
-      '@xtuc/long': 4.2.2
-
-  '@webassemblyjs/utf8@1.13.2': {}
-
-  '@webassemblyjs/wasm-edit@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/helper-wasm-section': 1.14.1
-      '@webassemblyjs/wasm-gen': 1.14.1
-      '@webassemblyjs/wasm-opt': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      '@webassemblyjs/wast-printer': 1.14.1
-
-  '@webassemblyjs/wasm-gen@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/ieee754': 1.13.2
-      '@webassemblyjs/leb128': 1.13.2
-      '@webassemblyjs/utf8': 1.13.2
-
-  '@webassemblyjs/wasm-opt@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-buffer': 1.14.1
-      '@webassemblyjs/wasm-gen': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-
-  '@webassemblyjs/wasm-parser@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/helper-api-error': 1.13.2
-      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
-      '@webassemblyjs/ieee754': 1.13.2
-      '@webassemblyjs/leb128': 1.13.2
-      '@webassemblyjs/utf8': 1.13.2
-
-  '@webassemblyjs/wast-printer@1.14.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.14.1
-      '@xtuc/long': 4.2.2
-
-  '@xtuc/ieee754@1.2.0': {}
-
-  '@xtuc/long@4.2.2': {}
-
-  acorn@8.16.0: {}
-
-  ajv-formats@2.1.1(ajv@8.20.0):
-    optionalDependencies:
-      ajv: 8.20.0
-
-  ajv-keywords@5.1.0(ajv@8.20.0):
-    dependencies:
-      ajv: 8.20.0
-      fast-deep-equal: 3.1.3
-
-  ajv@8.20.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-uri: 3.1.2
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-
-  any-promise@1.3.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.2
-
-  arg@5.0.2: {}
-
-  argparse@2.0.1: {}
-
-  assertion-error@2.0.1: {}
-
-  autoprefixer@10.5.0(postcss@8.5.25):
-    dependencies:
-      browserslist: 4.28.2
-      caniuse-lite: 1.0.30001793
-      fraction.js: 5.3.4
-      picocolors: 1.1.1
-      postcss: 8.5.25
-      postcss-value-parser: 4.2.0
-
-  baseline-browser-mapping@2.10.31: {}
-
-  before-after-hook@4.0.0: {}
-
-  binary-extensions@2.3.0: {}
-
-  braces@3.0.3:
-    dependencies:
-      fill-range: 7.1.1
-
-  browserslist@4.28.2:
-    dependencies:
-      baseline-browser-mapping: 2.10.31
-      caniuse-lite: 1.0.30001793
-      electron-to-chromium: 1.5.361
-      node-releases: 2.0.46
-      update-browserslist-db: 1.2.3(browserslist@4.28.2)
-
-  buffer-from@1.1.2: {}
-
-  bun-types@1.3.14:
-    dependencies:
-      '@types/node': 25.9.1
-
-  bun@1.3.14:
-    optionalDependencies:
-      '@oven/bun-darwin-aarch64': 1.3.14
-      '@oven/bun-darwin-x64': 1.3.14
-      '@oven/bun-darwin-x64-baseline': 1.3.14
-      '@oven/bun-freebsd-aarch64': 1.3.14
-      '@oven/bun-freebsd-x64': 1.3.14
-      '@oven/bun-linux-aarch64': 1.3.14
-      '@oven/bun-linux-aarch64-android': 1.3.14
-      '@oven/bun-linux-aarch64-musl': 1.3.14
-      '@oven/bun-linux-x64': 1.3.14
-      '@oven/bun-linux-x64-android': 1.3.14
-      '@oven/bun-linux-x64-baseline': 1.3.14
-      '@oven/bun-linux-x64-musl': 1.3.14
-      '@oven/bun-linux-x64-musl-baseline': 1.3.14
-      '@oven/bun-windows-aarch64': 1.3.14
-      '@oven/bun-windows-x64': 1.3.14
-      '@oven/bun-windows-x64-baseline': 1.3.14
-
-  bundle-require@5.1.0(esbuild@0.27.7):
-    dependencies:
-      esbuild: 0.27.7
-      load-tsconfig: 0.2.5
-
-  cac@6.7.14: {}
-
-  camelcase-css@2.0.1: {}
-
-  caniuse-lite@1.0.30001793: {}
-
-  chai@6.2.2: {}
-
-  chardet@2.1.1: {}
-
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
-  chokidar@4.0.3:
-    dependencies:
-      readdirp: 4.1.2
-
-  chrome-trace-event@1.0.4: {}
-
-  citty@0.2.2: {}
-
-  cli-width@4.1.0: {}
-
-  client-only@0.0.1: {}
-
-  clipanion@4.0.0-rc.4(typanion@3.14.0):
-    dependencies:
-      typanion: 3.14.0
-
-  colorette@2.0.20: {}
-
-  commander@2.20.3: {}
-
-  commander@4.1.1: {}
-
-  confbox@0.1.8: {}
-
-  consola@3.4.2: {}
-
-  content-type@2.0.0: {}
-
-  convert-source-map@2.0.0: {}
-
-  cookie-es@1.2.3: {}
-
-  crossws@0.3.5:
-    dependencies:
-      uncrypto: 0.1.3
-
-  crossws@0.4.10: {}
-
-  cssesc@3.0.0: {}
-
-  csstype@3.2.3: {}
-
-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
-
-  dedent@1.7.2: {}
-
-  defu@6.1.7: {}
-
-  destr@2.0.5: {}
-
-  detect-libc@1.0.3: {}
-
-  detect-libc@2.1.2: {}
-
-  didyoumean@1.2.2: {}
-
-  dlv@1.1.3: {}
-
-  electron-to-chromium@1.5.361: {}
-
-  emnapi@1.11.3(node-addon-api@8.7.0):
-    optionalDependencies:
-      node-addon-api: 8.7.0
-
-  enhanced-resolve@5.24.5:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.3
-
-  es-errors@1.3.0: {}
-
-  es-module-lexer@2.1.0: {}
-
-  es-toolkit@1.50.0: {}
-
-  esbuild@0.27.7:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.27.7
-      '@esbuild/android-arm': 0.27.7
-      '@esbuild/android-arm64': 0.27.7
-      '@esbuild/android-x64': 0.27.7
-      '@esbuild/darwin-arm64': 0.27.7
-      '@esbuild/darwin-x64': 0.27.7
-      '@esbuild/freebsd-arm64': 0.27.7
-      '@esbuild/freebsd-x64': 0.27.7
-      '@esbuild/linux-arm': 0.27.7
-      '@esbuild/linux-arm64': 0.27.7
-      '@esbuild/linux-ia32': 0.27.7
-      '@esbuild/linux-loong64': 0.27.7
-      '@esbuild/linux-mips64el': 0.27.7
-      '@esbuild/linux-ppc64': 0.27.7
-      '@esbuild/linux-riscv64': 0.27.7
-      '@esbuild/linux-s390x': 0.27.7
-      '@esbuild/linux-x64': 0.27.7
-      '@esbuild/netbsd-arm64': 0.27.7
-      '@esbuild/netbsd-x64': 0.27.7
-      '@esbuild/openbsd-arm64': 0.27.7
-      '@esbuild/openbsd-x64': 0.27.7
-      '@esbuild/openharmony-arm64': 0.27.7
-      '@esbuild/sunos-x64': 0.27.7
-      '@esbuild/win32-arm64': 0.27.7
-      '@esbuild/win32-ia32': 0.27.7
-      '@esbuild/win32-x64': 0.27.7
-
-  escalade@3.2.0: {}
-
-  eslint-scope@5.1.1:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 4.3.0
-
-  esrecurse@4.3.0:
-    dependencies:
-      estraverse: 5.3.0
-
-  estraverse@4.3.0: {}
-
-  estraverse@5.3.0: {}
-
-  estree-walker@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.9
-
-  events@3.3.0: {}
-
-  expect-type@1.3.0: {}
-
-  fast-content-type-parse@3.0.0: {}
-
-  fast-deep-equal@3.1.3: {}
-
-  fast-equals@5.4.0: {}
-
-  fast-glob@3.3.3:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
-  fast-string-truncated-width@3.0.3: {}
-
-  fast-string-width@3.0.2:
-    dependencies:
-      fast-string-truncated-width: 3.0.3
-
-  fast-stringify@4.0.0: {}
-
-  fast-uri@3.1.2: {}
-
-  fast-wrap-ansi@0.2.2:
-    dependencies:
-      fast-string-width: 3.0.2
-
-  fastq@1.20.1:
-    dependencies:
-      reusify: 1.1.0
-
-  fdir@6.5.0(picomatch@4.0.4):
-    optionalDependencies:
-      picomatch: 4.0.4
-
-  fdir@6.5.0(picomatch@4.0.5):
-    optionalDependencies:
-      picomatch: 4.0.5
-
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
-
-  find-up-simple@1.0.1: {}
-
-  fix-dts-default-cjs-exports@1.0.1:
-    dependencies:
-      magic-string: 0.30.21
-      mlly: 1.8.2
-      rollup: 4.60.4
-
-  fraction.js@5.3.4: {}
-
-  fsevents@2.3.2:
-    optional: true
-
-  fsevents@2.3.3:
-    optional: true
-
-  function-bind@1.1.2: {}
-
-  get-port-please@3.2.0: {}
-
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  globby@16.2.2:
-    dependencies:
-      '@sindresorhus/merge-streams': 4.0.0
-      fast-glob: 3.3.3
-      ignore: 7.0.5
-      is-path-inside: 4.0.0
-      slash: 5.1.0
-      unicorn-magic: 0.4.0
-
-  graceful-fs@4.2.11: {}
-
-  h3@1.15.11:
-    dependencies:
-      cookie-es: 1.2.3
-      crossws: 0.3.5
-      defu: 6.1.7
-      destr: 2.0.5
-      iron-webcrypto: 1.2.1
-      node-mock-http: 1.0.4
-      radix3: 1.1.2
-      ufo: 1.6.4
-      uncrypto: 0.1.3
-
-  has-flag@4.0.0: {}
-
-  hasown@2.0.3:
-    dependencies:
-      function-bind: 1.1.2
-
-  http-shutdown@1.2.2: {}
-
-  iconv-lite@0.7.2:
-    dependencies:
-      safer-buffer: 2.1.2
-
-  ignore@7.0.5: {}
-
-  iron-webcrypto@1.2.1: {}
-
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
-  is-core-module@2.16.2:
-    dependencies:
-      hasown: 2.0.3
-
-  is-extglob@2.1.1: {}
-
-  is-glob@4.0.3:
-    dependencies:
-      is-extglob: 2.1.1
-
-  is-number@7.0.0: {}
-
-  is-path-inside@4.0.0: {}
-
-  jest-worker@27.5.1:
-    dependencies:
-      '@types/node': 25.9.1
-      merge-stream: 2.0.0
-      supports-color: 8.1.1
-
-  jiti@1.21.7: {}
-
-  jiti@2.7.0: {}
-
-  joycon@3.1.1: {}
-
-  js-yaml@4.3.1:
-    dependencies:
-      argparse: 2.0.1
-
-  json-schema-traverse@1.0.0: {}
-
-  json-with-bigint@3.5.8: {}
-
-  lightningcss-android-arm64@1.33.0:
-    optional: true
-
-  lightningcss-darwin-arm64@1.33.0: {}
-
-  lightningcss-darwin-x64@1.33.0: {}
-
-  lightningcss-freebsd-x64@1.33.0:
-    optional: true
-
-  lightningcss-linux-arm-gnueabihf@1.33.0:
-    optional: true
-
-  lightningcss-linux-arm64-gnu@1.33.0: {}
-
-  lightningcss-linux-arm64-musl@1.33.0: {}
-
-  lightningcss-linux-x64-gnu@1.33.0: {}
-
-  lightningcss-linux-x64-musl@1.33.0: {}
-
-  lightningcss-win32-arm64-msvc@1.33.0:
-    optional: true
-
-  lightningcss-win32-x64-msvc@1.33.0: {}
-
-  lightningcss@1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930):
-    dependencies:
-      detect-libc: 2.1.2
-    optionalDependencies:
-      lightningcss-android-arm64: 1.33.0
-      lightningcss-darwin-arm64: 1.33.0
-      lightningcss-darwin-x64: 1.33.0
-      lightningcss-freebsd-x64: 1.33.0
-      lightningcss-linux-arm-gnueabihf: 1.33.0
-      lightningcss-linux-arm64-gnu: 1.33.0
-      lightningcss-linux-arm64-musl: 1.33.0
-      lightningcss-linux-x64-gnu: 1.33.0
-      lightningcss-linux-x64-musl: 1.33.0
-      lightningcss-win32-arm64-msvc: 1.33.0
-      lightningcss-win32-x64-msvc: 1.33.0
-
-  lilconfig@3.1.3: {}
-
-  lines-and-columns@1.2.4: {}
-
-  listhen@1.10.1(@parcel/watcher@2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da)):
-    dependencies:
-      '@parcel/watcher-wasm': 2.5.6
-      citty: 0.2.2
-      consola: 3.4.2
-      crossws: 0.4.10
-      defu: 6.1.7
-      get-port-please: 3.2.0
-      h3: 1.15.11
-      http-shutdown: 1.2.2
-      jiti: 2.7.0
-      node-forge: 1.4.0
-      pathe: 2.0.3
-      std-env: 4.2.0
-      tinyclip: 0.1.15
-      ufo: 1.6.4
-      untun: 0.2.2
-      uqr: 0.1.3
-    optionalDependencies:
-      '@parcel/watcher': 2.6.0(patch_hash=705ce75ccea54337110c4d7fe0a8b421658ea0c23e1a77c1fa890a86041179da)
-    transitivePeerDependencies:
-      - srvx
-
-  load-tsconfig@0.2.5: {}
-
-  magic-string@0.30.21:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  magic-string@1.1.0:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  merge-stream@2.0.0: {}
-
-  merge2@1.4.1: {}
-
-  micro-memoize@5.1.1:
-    dependencies:
-      fast-equals: 5.4.0
-      fast-stringify: 4.0.0
-
-  micromatch@4.0.8:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.2
-
-  mime-db@1.54.0: {}
-
-  mini-svg-data-uri@1.4.4: {}
-
-  minimizer-webpack-plugin@5.6.1(esbuild@0.27.7)(postcss@8.5.25)(webpack@5.109.2(esbuild@0.27.7)(postcss@8.5.25)):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
-      jest-worker: 27.5.1
-      schema-utils: 4.3.3
-      terser: 5.48.0
-      webpack: 5.109.2(esbuild@0.27.7)(postcss@8.5.25)
-    optionalDependencies:
-      esbuild: 0.27.7
-      postcss: 8.5.25
-
-  mlly@1.8.2:
-    dependencies:
-      acorn: 8.16.0
-      pathe: 2.0.3
-      pkg-types: 1.3.1
-      ufo: 1.6.4
-
-  mri@1.2.0: {}
-
-  ms@2.1.3: {}
-
-  mute-stream@3.0.0: {}
-
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
-  nanoid@3.3.12: {}
-
-  nanoid@3.3.16: {}
-
-  neo-async@2.6.2: {}
-
-  next@16.2.7(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
-    dependencies:
-      '@next/env': 16.2.7
-      '@swc/helpers': 0.5.15
-      baseline-browser-mapping: 2.10.31
-      caniuse-lite: 1.0.30001793
-      postcss: 8.4.31
-      react: 19.2.7
-      react-dom: 19.2.7(react@19.2.7)
-      styled-jsx: 5.1.6(react@19.2.7)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 16.2.7
-      '@next/swc-darwin-x64': 16.2.7
-      '@next/swc-linux-arm64-gnu': 16.2.7
-      '@next/swc-linux-arm64-musl': 16.2.7
-      '@next/swc-linux-x64-gnu': 16.2.7
-      '@next/swc-linux-x64-musl': 16.2.7
-      '@next/swc-win32-arm64-msvc': 16.2.7
-      '@next/swc-win32-x64-msvc': 16.2.7
-      '@playwright/test': 1.62.1
-      sharp: 0.34.5
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
-  node-addon-api@7.1.1: {}
-
-  node-addon-api@8.7.0: {}
-
-  node-forge@1.4.0: {}
-
-  node-gyp-build@4.8.4: {}
-
-  node-mock-http@1.0.4: {}
-
-  node-releases@2.0.46: {}
-
-  normalize-path@3.0.0: {}
-
-  object-assign@4.1.1: {}
-
-  object-hash@3.0.0: {}
-
-  obug@2.1.1: {}
-
-  obug@2.1.4: {}
-
-  package-up@5.0.0:
-    dependencies:
-      find-up-simple: 1.0.1
-
-  path-parse@1.0.7: {}
-
-  pathe@2.0.3: {}
-
-  picocolors@1.1.1: {}
-
-  picomatch@2.3.2: {}
-
-  picomatch@4.0.4: {}
-
-  picomatch@4.0.5: {}
-
-  pify@2.3.0: {}
-
-  pirates@4.0.7: {}
-
-  pkg-types@1.3.1:
-    dependencies:
-      confbox: 0.1.8
-      mlly: 1.8.2
-      pathe: 2.0.3
-
-  playwright-core@1.62.1: {}
-
-  playwright@1.62.1:
-    dependencies:
-      playwright-core: 1.62.1
-    optionalDependencies:
-      fsevents: 2.3.2
-
-  postcss-import@15.1.0(postcss@8.5.16):
-    dependencies:
-      postcss: 8.5.16
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.12
-
-  postcss-import@16.1.1(postcss@8.5.25):
-    dependencies:
-      postcss: 8.5.25
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.12
-
-  postcss-js@4.1.0(postcss@8.5.16):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.16
-
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.16)(yaml@2.9.0):
-    dependencies:
-      lilconfig: 3.1.3
-    optionalDependencies:
-      jiti: 1.21.7
-      postcss: 8.5.16
-      yaml: 2.9.0
-
-  postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.25)(yaml@2.9.0):
-    dependencies:
-      lilconfig: 3.1.3
-    optionalDependencies:
-      jiti: 2.7.0
-      postcss: 8.5.25
-      yaml: 2.9.0
-
-  postcss-nested@6.2.0(postcss@8.5.16):
-    dependencies:
-      postcss: 8.5.16
-      postcss-selector-parser: 6.1.2
-
-  postcss-selector-parser@6.0.10:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-selector-parser@7.1.4:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-value-parser@4.2.0: {}
-
-  postcss@8.4.31:
-    dependencies:
-      nanoid: 3.3.12
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  postcss@8.5.16:
-    dependencies:
-      nanoid: 3.3.12
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  postcss@8.5.25:
-    dependencies:
-      nanoid: 3.3.16
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  prettier-plugin-embed@0.5.1:
-    dependencies:
-      '@types/estree': 1.0.9
-      dedent: 1.7.2
-      micro-memoize: 5.1.1
-      package-up: 5.0.0
-      tiny-jsonc: 1.0.2
-      type-fest: 5.6.0
-    transitivePeerDependencies:
-      - babel-plugin-macros
-
-  prettier-plugin-organize-imports@4.3.0(prettier@3.9.6)(typescript@5.9.3):
-    dependencies:
-      prettier: 3.9.6
-      typescript: 5.9.3
-
-  prettier@3.9.6: {}
-
-  queue-microtask@1.2.3: {}
-
-  radix3@1.1.2: {}
-
-  react-dom@19.2.6(react@19.2.6):
-    dependencies:
-      react: 19.2.6
-      scheduler: 0.27.0
-
-  react-dom@19.2.7(react@19.2.7):
-    dependencies:
-      react: 19.2.7
-      scheduler: 0.27.0
-
-  react@19.2.6: {}
-
-  react@19.2.7: {}
-
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.2
-
-  readdirp@4.1.2: {}
-
-  require-from-string@2.0.2: {}
-
-  resolve-from@5.0.0: {}
-
-  resolve@1.22.12:
-    dependencies:
-      es-errors: 1.3.0
-      is-core-module: 2.16.2
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
-  reusify@1.1.0: {}
-
-  rolldown@1.2.1:
-    dependencies:
-      '@oxc-project/types': 0.142.0
-      '@rolldown/pluginutils': 1.0.1
-    optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.2.1
-      '@rolldown/binding-darwin-arm64': 1.2.1
-      '@rolldown/binding-darwin-x64': 1.2.1
-      '@rolldown/binding-freebsd-x64': 1.2.1
-      '@rolldown/binding-linux-arm-gnueabihf': 1.2.1
-      '@rolldown/binding-linux-arm64-gnu': 1.2.1
-      '@rolldown/binding-linux-arm64-musl': 1.2.1
-      '@rolldown/binding-linux-ppc64-gnu': 1.2.1
-      '@rolldown/binding-linux-s390x-gnu': 1.2.1
-      '@rolldown/binding-linux-x64-gnu': 1.2.1
-      '@rolldown/binding-linux-x64-musl': 1.2.1
-      '@rolldown/binding-openharmony-arm64': 1.2.1
-      '@rolldown/binding-wasm32-wasi': 1.2.1
-      '@rolldown/binding-win32-arm64-msvc': 1.2.1
-      '@rolldown/binding-win32-x64-msvc': 1.2.1
-
-  rollup@4.60.4:
-    dependencies:
-      '@types/estree': 1.0.8
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.60.4
-      '@rollup/rollup-android-arm64': 4.60.4
-      '@rollup/rollup-darwin-arm64': 4.60.4
-      '@rollup/rollup-darwin-x64': 4.60.4
-      '@rollup/rollup-freebsd-arm64': 4.60.4
-      '@rollup/rollup-freebsd-x64': 4.60.4
-      '@rollup/rollup-linux-arm-gnueabihf': 4.60.4
-      '@rollup/rollup-linux-arm-musleabihf': 4.60.4
-      '@rollup/rollup-linux-arm64-gnu': 4.60.4
-      '@rollup/rollup-linux-arm64-musl': 4.60.4
-      '@rollup/rollup-linux-loong64-gnu': 4.60.4
-      '@rollup/rollup-linux-loong64-musl': 4.60.4
-      '@rollup/rollup-linux-ppc64-gnu': 4.60.4
-      '@rollup/rollup-linux-ppc64-musl': 4.60.4
-      '@rollup/rollup-linux-riscv64-gnu': 4.60.4
-      '@rollup/rollup-linux-riscv64-musl': 4.60.4
-      '@rollup/rollup-linux-s390x-gnu': 4.60.4
-      '@rollup/rollup-linux-x64-gnu': 4.60.4
-      '@rollup/rollup-linux-x64-musl': 4.60.4
-      '@rollup/rollup-openbsd-x64': 4.60.4
-      '@rollup/rollup-openharmony-arm64': 4.60.4
-      '@rollup/rollup-win32-arm64-msvc': 4.60.4
-      '@rollup/rollup-win32-ia32-msvc': 4.60.4
-      '@rollup/rollup-win32-x64-gnu': 4.60.4
-      '@rollup/rollup-win32-x64-msvc': 4.60.4
-      fsevents: 2.3.3
-
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
-  safer-buffer@2.1.2: {}
-
-  scheduler@0.27.0: {}
-
-  schema-utils@4.3.3:
-    dependencies:
-      '@types/json-schema': 7.0.15
-      ajv: 8.20.0
-      ajv-formats: 2.1.1(ajv@8.20.0)
-      ajv-keywords: 5.1.0(ajv@8.20.0)
-
-  semver@7.8.5: {}
-
-  sharp@0.34.5:
-    dependencies:
-      '@img/colour': 1.1.0
-      detect-libc: 2.1.2
-      semver: 7.8.5
-    optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.34.5
-      '@img/sharp-darwin-x64': 0.34.5
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
-      '@img/sharp-libvips-darwin-x64': 1.2.4
-      '@img/sharp-libvips-linux-arm': 1.2.4
-      '@img/sharp-libvips-linux-arm64': 1.2.4
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
-      '@img/sharp-libvips-linux-s390x': 1.2.4
-      '@img/sharp-libvips-linux-x64': 1.2.4
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
-      '@img/sharp-linux-arm': 0.34.5
-      '@img/sharp-linux-arm64': 0.34.5
-      '@img/sharp-linux-ppc64': 0.34.5
-      '@img/sharp-linux-riscv64': 0.34.5
-      '@img/sharp-linux-s390x': 0.34.5
-      '@img/sharp-linux-x64': 0.34.5
-      '@img/sharp-linuxmusl-arm64': 0.34.5
-      '@img/sharp-linuxmusl-x64': 0.34.5
-      '@img/sharp-wasm32': 0.34.5
-      '@img/sharp-win32-arm64': 0.34.5
-      '@img/sharp-win32-ia32': 0.34.5
-      '@img/sharp-win32-x64': 0.34.5
-    optional: true
-
-  siginfo@2.0.0: {}
-
-  signal-exit@4.1.0: {}
-
-  slash@5.1.0: {}
-
-  source-map-js@1.2.1: {}
-
-  source-map-support@0.5.21:
-    dependencies:
-      buffer-from: 1.1.2
-      source-map: 0.6.1
-
-  source-map@0.6.1: {}
-
-  source-map@0.7.6: {}
-
-  stackback@0.0.2: {}
-
-  std-env@4.1.0: {}
-
-  std-env@4.2.0: {}
-
-  styled-jsx@5.1.6(react@19.2.7):
-    dependencies:
-      client-only: 0.0.1
-      react: 19.2.7
-
-  sucrase@3.35.1:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      commander: 4.1.1
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      tinyglobby: 0.2.16
-      ts-interface-checker: 0.1.13
-
-  supports-color@8.1.1:
-    dependencies:
-      has-flag: 4.0.0
-
-  supports-preserve-symlinks-flag@1.0.0: {}
-
-  tagged-tag@1.0.0: {}
-
-  tailwindcss@3.4.19(yaml@2.9.0):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.16
-      postcss-import: 15.1.0(postcss@8.5.16)
-      postcss-js: 4.1.0(postcss@8.5.16)
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.16)(yaml@2.9.0)
-      postcss-nested: 6.2.0(postcss@8.5.16)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.12
-      sucrase: 3.35.1
-    transitivePeerDependencies:
-      - tsx
-      - yaml
-
-  tapable@2.3.3: {}
-
-  terser@5.48.0:
-    dependencies:
-      '@jridgewell/source-map': 0.3.11
-      acorn: 8.16.0
-      commander: 2.20.3
-      source-map-support: 0.5.21
-
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
-  tiny-jsonc@1.0.2: {}
-
-  tinybench@2.9.0: {}
-
-  tinyclip@0.1.15: {}
-
-  tinyexec@0.3.2: {}
-
-  tinyexec@1.1.2: {}
-
-  tinyglobby@0.2.16:
-    dependencies:
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
-
-  tinyglobby@0.2.17:
-    dependencies:
-      fdir: 6.5.0(picomatch@4.0.5)
-      picomatch: 4.0.5
-
-  tinyrainbow@3.1.0: {}
-
-  to-regex-range@5.0.1:
-    dependencies:
-      is-number: 7.0.0
-
-  tree-kill@1.2.2: {}
-
-  tree-sitter-javascript@0.23.1(tree-sitter@0.25.1):
-    dependencies:
-      node-addon-api: 8.7.0
-      node-gyp-build: 4.8.4
-    optionalDependencies:
-      tree-sitter: 0.25.1
-
-  tree-sitter-typescript@0.23.2(tree-sitter@0.25.1):
-    dependencies:
-      node-addon-api: 8.7.0
-      node-gyp-build: 4.8.4
-      tree-sitter-javascript: 0.23.1(tree-sitter@0.25.1)
-    optionalDependencies:
-      tree-sitter: 0.25.1
-
-  tree-sitter@0.25.1:
-    dependencies:
-      node-addon-api: 8.7.0
-      node-gyp-build: 4.8.4
-
-  ts-interface-checker@0.1.13: {}
-
-  tslib@2.8.1: {}
-
-  tsup@8.5.1(jiti@2.7.0)(postcss@8.5.25)(typescript@5.9.3)(yaml@2.9.0):
-    dependencies:
-      bundle-require: 5.1.0(esbuild@0.27.7)
-      cac: 6.7.14
-      chokidar: 4.0.3
-      consola: 3.4.2
-      debug: 4.4.3
-      esbuild: 0.27.7
-      fix-dts-default-cjs-exports: 1.0.1
-      joycon: 3.1.1
-      picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.25)(yaml@2.9.0)
-      resolve-from: 5.0.0
-      rollup: 4.60.4
-      source-map: 0.7.6
-      sucrase: 3.35.1
-      tinyexec: 0.3.2
-      tinyglobby: 0.2.16
-      tree-kill: 1.2.2
-    optionalDependencies:
-      postcss: 8.5.25
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - jiti
-      - supports-color
-      - tsx
-      - yaml
-
-  turbo@2.10.8:
-    optionalDependencies:
-      '@turbo/darwin-64': 2.10.8
-      '@turbo/darwin-arm64': 2.10.8
-      '@turbo/linux-64': 2.10.8
-      '@turbo/linux-arm64': 2.10.8
-      '@turbo/windows-64': 2.10.8
-      '@turbo/windows-arm64': 2.10.8
-
-  typanion@3.14.0: {}
-
-  type-fest@5.6.0:
-    dependencies:
-      tagged-tag: 1.0.0
-
-  typescript@5.9.3: {}
-
-  typescript@6.0.3: {}
-
-  ufo@1.6.4: {}
-
-  uncrypto@0.1.3: {}
-
-  undici-types@6.21.0: {}
-
-  undici-types@7.24.6: {}
-
-  unicorn-magic@0.4.0: {}
-
-  universal-user-agent@7.0.3: {}
-
-  untun@0.2.2: {}
-
-  update-browserslist-db@1.2.3(browserslist@4.28.2):
-    dependencies:
-      browserslist: 4.28.2
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
-  uqr@0.1.3: {}
-
-  util-deprecate@1.0.2: {}
-
-  vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0):
-    dependencies:
-      lightningcss: 1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930)
-      picomatch: 4.0.5
-      postcss: 8.5.25
-      rolldown: 1.2.1
-      tinyglobby: 0.2.17
-    optionalDependencies:
-      '@types/node': 22.20.1
-      esbuild: 0.27.7
-      fsevents: 2.3.3
-      jiti: 2.7.0
-      terser: 5.48.0
-      yaml: 2.9.0
-
-  vite@8.2.0(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0):
-    dependencies:
-      lightningcss: 1.33.0(patch_hash=1d4a8800d60d13d42887b88b3a86576df4b451670308145fb432ec8abbf40930)
-      picomatch: 4.0.5
-      postcss: 8.5.25
-      rolldown: 1.2.1
-      tinyglobby: 0.2.17
-    optionalDependencies:
-      '@types/node': 25.9.1
-      esbuild: 0.27.7
-      fsevents: 2.3.3
-      jiti: 2.7.0
-      terser: 5.48.0
-      yaml: 2.9.0
-
-  vitest@4.1.10(@types/node@22.20.1)(vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)):
-    dependencies:
-      '@vitest/expect': 4.1.10
-      '@vitest/mocker': 4.1.10(vite@8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0))
-      '@vitest/pretty-format': 4.1.10
-      '@vitest/runner': 4.1.10
-      '@vitest/snapshot': 4.1.10
-      '@vitest/spy': 4.1.10
-      '@vitest/utils': 4.1.10
-      es-module-lexer: 2.1.0
-      expect-type: 1.3.0
-      magic-string: 0.30.21
-      obug: 2.1.1
-      pathe: 2.0.3
-      picomatch: 4.0.4
-      std-env: 4.1.0
-      tinybench: 2.9.0
-      tinyexec: 1.1.2
-      tinyglobby: 0.2.17
-      tinyrainbow: 3.1.0
-      vite: 8.2.0(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.48.0)(yaml@2.9.0)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 22.20.1
-    transitivePeerDependencies:
-      - msw
-
-  watchpack@2.5.2:
-    dependencies:
-      graceful-fs: 4.2.11
-
-  webpack-sources@3.5.1: {}
-
-  webpack@5.109.2(esbuild@0.27.7)(postcss@8.5.25):
-    dependencies:
-      '@types/estree': 1.0.9
-      '@types/json-schema': 7.0.15
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.16.0
-      browserslist: 4.28.2
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.24.5
-      es-module-lexer: 2.1.0
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      graceful-fs: 4.2.11
-      mime-db: 1.54.0
-      minimizer-webpack-plugin: 5.6.1(esbuild@0.27.7)(postcss@8.5.25)(webpack@5.109.2(esbuild@0.27.7)(postcss@8.5.25))
-      neo-async: 2.6.2
-      schema-utils: 4.3.3
-      tapable: 2.3.3
-      watchpack: 2.5.2
-      webpack-sources: 3.5.1
-    transitivePeerDependencies:
-      - '@minify-html/node'
-      - '@swc/core'
-      - '@swc/css'
-      - '@swc/html'
-      - clean-css
-      - cssnano
-      - csso
-      - esbuild
-      - html-minifier-terser
-      - lightningcss
-      - postcss
-      - uglify-js
-
-  why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
       stackback: 0.0.2
+    dev: true
 
-  yaml@2.9.0: {}
+  /wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+    dev: true
+
+  /wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
+  /wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+    dev: true
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
+
+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: false
+
+  /yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+    dev: true
+
+  /yaml@2.3.4:
+    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
+    engines: {node: '>= 14'}
+    dev: true
+
+  /yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /yocto-queue@1.0.0:
+    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
+    engines: {node: '>=12.20'}
+    dev: true
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index bcddef126..665bcbcb5 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,54 +1,5 @@
 packages:
-  - 'crates/node'
-  - 'crates/node/npm/*'
+  - 'oxide/crates/node'
+  - 'oxide/crates/node/npm/*'
   - 'packages/*'
   - 'playgrounds/*'
-  - 'integrations'
-
-patchedDependencies:
-  '@napi-rs/cli@3.7.4': patches/@napi-rs__cli@3.7.4.patch
-  '@parcel/watcher@2.6.0': patches/@parcel__watcher@2.6.0.patch
-  lightningcss@1.33.0: patches/lightningcss@1.33.0.patch
-
-catalog:
-  '@types/node': 22.20.1
-  dedent: 1.7.2
-  enhanced-resolve: ^5.24.5
-  lightningcss-darwin-arm64: 1.33.0
-  lightningcss-darwin-x64: 1.33.0
-  lightningcss-linux-arm64-gnu: 1.33.0
-  lightningcss-linux-arm64-musl: 1.33.0
-  lightningcss-linux-x64-gnu: 1.33.0
-  lightningcss-linux-x64-musl: 1.33.0
-  lightningcss-win32-x64-msvc: 1.33.0
-  lightningcss: 1.33.0
-  '@parcel/watcher-darwin-arm64': 2.6.0
-  '@parcel/watcher-darwin-x64': 2.6.0
-  '@parcel/watcher-linux-arm64-glibc': 2.6.0
-  '@parcel/watcher-linux-arm64-musl': 2.6.0
-  '@parcel/watcher-linux-x64-glibc': 2.6.0
-  '@parcel/watcher-linux-x64-musl': 2.6.0
-  '@parcel/watcher-win32-x64': 2.6.0
-  '@parcel/watcher': 2.6.0
-  postcss: ^8.5.25
-  prettier: 3.9.6
-  vite: ^8.2.0
-  webpack: ^5.109.2
-
-onlyBuiltDependencies:
-  - '@parcel/watcher'
-  - bun
-  - esbuild
-  - sharp
-  - tree-sitter
-  - tree-sitter-javascript
-  - tree-sitter-typescript
-
-allowBuilds:
-  '@parcel/watcher': true
-  bun: true
-  esbuild: true
-  sharp: true
-  tree-sitter: true
-  tree-sitter-javascript: true
-  tree-sitter-typescript: true
diff --git a/rust-toolchain.toml b/rust-toolchain.toml
deleted file mode 100644
index f92020c65..000000000
--- a/rust-toolchain.toml
+++ /dev/null
@@ -1,3 +0,0 @@
-[toolchain]
-channel = "1.95.0"
-profile = "default"
diff --git a/scripts/pack-packages.mjs b/scripts/pack-packages.mjs
deleted file mode 100644
index 2b0b9f15d..000000000
--- a/scripts/pack-packages.mjs
+++ /dev/null
@@ -1,74 +0,0 @@
-import { exec, execSync } from 'node:child_process'
-import fs from 'node:fs/promises'
-import { platform } from 'node:os'
-import path, { dirname } from 'node:path'
-import url from 'node:url'
-
-const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
-let root = path.resolve(__dirname, '..')
-
-let command = platform() === 'win32' ? 'cd' : 'pwd'
-let rawPaths = execSync(`pnpm --silent --filter=!./playgrounds/* -r exec ${command}`).toString()
-
-let paths = rawPaths
-  .trim()
-  .split(/\r?\n/)
-  .map((x) => path.join(x, 'package.json'))
-
-let workspaces = new Map()
-
-// Track all the workspaces
-for (let path of paths) {
-  let pkg = await fs.readFile(path, 'utf8').then(JSON.parse)
-  if (pkg.private) continue
-  workspaces.set(pkg.name, {
-    version: pkg.version ?? '',
-    dir: dirname(path),
-    hasBundledDependencies: pkg.bundledDependencies?.length > 0 ?? false,
-  })
-}
-
-// Clean dist folder
-await fs.rm(path.join(root, 'dist'), { recursive: true, force: true })
-
-Promise.all(
-  [...workspaces.entries()].map(async ([name, { dir, hasBundledDependencies }]) => {
-    function pack() {
-      return new Promise((resolve) => {
-        // `bundledDependencies` can only be packed with the hoisted node linker
-        // since pnpm v10. We opt into it for those packages only, instead of
-        // changing the node linker for the entire workspace.
-        exec(
-          `pnpm pack --pack-gzip-level=0 --pack-destination="${path.join(root, 'dist').replace(/\\/g, '\\\\')}"${hasBundledDependencies ? ' --config.node-linker=hoisted' : ''}`,
-          { cwd: dir },
-          (err, stdout, stderr) => {
-            if (err) {
-              console.error(err, stdout, stderr)
-            }
-
-            resolve(lastLine(stdout.trim()))
-          },
-        )
-      })
-    }
-
-    let filename = await pack()
-    // Remove version suffix
-    await fs.rename(
-      path.join(root, 'dist', path.basename(filename)),
-      path.join(root, 'dist', pkgToFilename(name)),
-    )
-  }),
-).then(() => {
-  console.log('Done.')
-})
-
-function pkgToFilename(name) {
-  return `${name.replace('@', '').replace('/', '-')}.tgz`
-}
-
-function lastLine(str) {
-  let index = str.lastIndexOf('\n')
-  if (index === -1) return str
-  return str.slice(index + 1)
-}
diff --git a/scripts/pre-publish-optimizations.mjs b/scripts/pre-publish-optimizations.mjs
deleted file mode 100644
index 9f72de212..000000000
--- a/scripts/pre-publish-optimizations.mjs
+++ /dev/null
@@ -1,21 +0,0 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import postcss from 'postcss'
-import atImport from 'postcss-import'
-import prettier from 'prettier'
-
-// Performance optimization: Inline the contents of the `tailwindcss/index.css`
-// file so that we don't need to handle imports at runtime.
-{
-  let __dirname = path.dirname(new URL(import.meta.url).pathname)
-  let file = path.resolve(__dirname, '../packages/tailwindcss/index.css')
-  let contents = await fs.readFile(file, 'utf-8')
-  let inlined = await prettier.format(
-    await postcss()
-      .use(atImport())
-      .process(contents, { from: file })
-      .then((result) => result.css),
-    { filepath: file },
-  )
-  await fs.writeFile(file, inlined, 'utf-8')
-}
diff --git a/scripts/release-channel.js b/scripts/release-channel.js
deleted file mode 100644
index 15dc7df82..000000000
--- a/scripts/release-channel.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// Given a version, figure out what the release channel is so that we can publish to the correct
-// channel on npm.
-//
-// E.g.:
-//
-//   1.2.3                  -> latest (default)
-//   0.0.0-insiders.ffaa88  -> insiders
-//   4.1.0-alpha.4          -> alpha
-
-let version =
-  process.argv[2] ||
-  process.env.npm_package_version ||
-  require('../packages/tailwindcss/package.json').version
-
-let match = /\d+\.\d+\.\d+-(.*)\.\d+/g.exec(version)
-if (match) {
-  console.log(match[1])
-} else {
-  console.log('latest')
-}
diff --git a/scripts/release-notes.mjs b/scripts/release-notes.mjs
deleted file mode 100644
index bb703c07b..000000000
--- a/scripts/release-notes.mjs
+++ /dev/null
@@ -1,29 +0,0 @@
-// Given a version, figure out what the release notes are so that we can use this to pre-fill the
-// release notes on a GitHub release for the current version.
-
-import * as fs from 'node:fs/promises'
-import * as path from 'node:path'
-import * as url from 'node:url'
-
-const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
-
-let version = process.argv[2] || process.env.npm_package_version
-if (!version) {
-  let pkgPath = path.resolve(__dirname, '../packages/tailwindcss/package.json')
-  let pkg = await fs.readFile(pkgPath, 'utf8').then(JSON.parse)
-
-  version = pkg.version
-}
-
-let changelog = await fs.readFile(path.resolve(__dirname, '..', 'CHANGELOG.md'), 'utf8')
-let match = new RegExp(
-  `## \\[${version}\\] - (.*)\\n\\n([\\s\\S]*?)\\n(?:(?:##\\s)|(?:\\[))`,
-  'g',
-).exec(changelog)
-
-if (match) {
-  let [, , notes] = match
-  console.log(notes.trim())
-} else {
-  console.log(`Placeholder release notes for version: v${version}`)
-}
diff --git a/scripts/version-packages.mjs b/scripts/version-packages.mjs
index 1641d5404..6a6456955 100644
--- a/scripts/version-packages.mjs
+++ b/scripts/version-packages.mjs
@@ -8,32 +8,28 @@ import prettier from 'prettier'
 
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
 const root = path.resolve(__dirname, '..')
-const version = process.argv[2] || null
 
 // The known workspace is: @tailwindcss/oxide
-// All the workspaces in `crates/node/npm/*` should always be in sync with
+// All the workspaces in `oxide/crates/node/npm/*` should always be in sync with
 // `@tailwindcss/oxide`. You can think of them as one big package, but they are
 // split into multiple packages because they are OS specific.
 const syncedWorkspaces = new Map([
   [
     '@tailwindcss/oxide',
     [
-      'crates/node/npm/android-arm-eabi',
-      'crates/node/npm/android-arm64',
-      'crates/node/npm/darwin-arm64',
-      'crates/node/npm/darwin-x64',
-      'crates/node/npm/freebsd-x64',
-      'crates/node/npm/linux-arm-gnueabihf',
-      'crates/node/npm/linux-arm64-gnu',
-      'crates/node/npm/linux-arm64-musl',
-      'crates/node/npm/linux-x64-gnu',
-      'crates/node/npm/linux-x64-musl',
-      'crates/node/npm/wasm32-wasi',
-      'crates/node/npm/win32-arm64-msvc',
-      'crates/node/npm/win32-x64-msvc',
+      'oxide/crates/node/npm/android-arm-eabi',
+      'oxide/crates/node/npm/android-arm64',
+      'oxide/crates/node/npm/darwin-arm64',
+      'oxide/crates/node/npm/darwin-x64',
+      'oxide/crates/node/npm/freebsd-x64',
+      'oxide/crates/node/npm/linux-arm-gnueabihf',
+      'oxide/crates/node/npm/linux-arm64-gnu',
+      'oxide/crates/node/npm/linux-arm64-musl',
+      'oxide/crates/node/npm/linux-x64-gnu',
+      'oxide/crates/node/npm/linux-x64-musl',
+      'oxide/crates/node/npm/win32-x64-msvc',
     ],
   ],
-  ['@tailwindcss/cli', ['packages/@tailwindcss-standalone']],
 ])
 
 const inverseSyncedWorkspaces = new Map()
@@ -48,19 +44,79 @@ for (let [name, paths] of syncedWorkspaces) {
   }
 }
 
-exec(
-  "pnpm --silent --filter='!./playgrounds/*' --filter='!./integrations' --filter='!./packages/internal-example-plugin' -r exec pwd",
-  async (err, stdout) => {
-    if (err) {
-      console.error(err)
-      process.exit(1)
-    }
+exec('pnpm --silent --filter=!./playgrounds/* -r exec pwd', async (err, stdout) => {
+  if (err) {
+    console.error(err)
+    process.exit(1)
+  }
 
-    if (version !== null) {
-      for (let pkgPath of stdout
-        .trim()
-        .split('\n')
-        .map((x) => path.resolve(x, 'package.json'))) {
+  let paths = stdout
+    .trim()
+    .split('\n')
+    .map((x) => path.resolve(x, 'package.json'))
+    // Workspaces that are in sync with another workspace should not be updated
+    // manually, they should be updated by updating the main workspace.
+    .filter((x) => !inverseSyncedWorkspaces.has(x))
+
+  let workspaces = new Map()
+
+  // Track all the workspaces
+  for (let path of paths) {
+    let pkg = await fs.readFile(path, 'utf8').then(JSON.parse)
+    workspaces.set(pkg.name, { version: pkg.version ?? '', path })
+  }
+
+  // Build the editable output
+  let lines = ['# Update the versions of the packages you want to change', '']
+  for (let [name, info] of workspaces) {
+    lines.push(`${name}: ${info.version}`)
+  }
+  let output = lines.join('\n')
+
+  // Edit the file
+  {
+    // Figure out which editor to use.
+    //
+    // In this case we still split on whitespace, because it can happen that the
+    // EDITOR env variable is configured as `code --wait`. This means that we
+    // want `code` as the editor, but `--wait` is one of the arguments.
+    let args = process.env.EDITOR.split(' ')
+    let editor = args.shift()
+
+    // Create a temporary file which will be edited
+    let filepath = path.resolve(tmpdir(), `version-${randomUUID()}.txt`)
+    await fs.writeFile(filepath, output)
+
+    // Edit the file, once the editor is closed, the file will be saved and we
+    // can read the changes
+    spawnSync(editor, [...args, filepath], {
+      stdio: 'inherit',
+    })
+
+    let newOutput = await fs.readFile(filepath, 'utf8').then((x) => x.trim().split('\n'))
+
+    // Cleanup temporary file
+    await fs.unlink(filepath)
+
+    // Update the package.json files
+    for (let line of newOutput) {
+      if (line[0] === '#') continue // Skip comment lines
+      if (line.trim() === '') continue // Skip empty lines
+
+      let [name, version = ''] = line.split(':').map((x) => x.trim())
+
+      // Figure out all the paths to the package.json files that need to be
+      // updated with the new version
+      let paths = [
+        // The package.json file of the main workspace
+        workspaces.get(name).path,
+
+        // The package.json files of the workspaces that are in sync with the
+        // main workspace
+        ...(syncedWorkspaces.get(name) ?? []),
+      ]
+
+      for (let pkgPath of paths) {
         let pkg = await fs.readFile(pkgPath, 'utf8').then(JSON.parse)
         let name = pkg.name
         if (version !== '') {
@@ -79,100 +135,8 @@ exec(
             .then((x) => `${x.trim()}\n`),
         )
       }
-
-      console.log('Done.')
-      return
     }
+  }
 
-    let paths = stdout
-      .trim()
-      .split('\n')
-      .map((x) => path.resolve(x, 'package.json'))
-      // Workspaces that are in sync with another workspace should not be updated
-      // manually, they should be updated by updating the main workspace.
-      .filter((x) => !inverseSyncedWorkspaces.has(x))
-
-    let workspaces = new Map()
-
-    // Track all the workspaces
-    for (let path of paths) {
-      let pkg = await fs.readFile(path, 'utf8').then(JSON.parse)
-      if (pkg.private) continue
-      workspaces.set(pkg.name, { version: pkg.version ?? '', path })
-    }
-
-    // Build the editable output
-    let lines = ['# Update the versions of the packages you want to change', '']
-    for (let [name, info] of workspaces) {
-      lines.push(`${name}: ${info.version}`)
-    }
-    let output = lines.join('\n')
-
-    // Edit the file
-    {
-      // Figure out which editor to use.
-      //
-      // In this case we still split on whitespace, because it can happen that the
-      // EDITOR env variable is configured as `code --wait`. This means that we
-      // want `code` as the editor, but `--wait` is one of the arguments.
-      let args = process.env.EDITOR.split(' ')
-      let editor = args.shift()
-
-      // Create a temporary file which will be edited
-      let filepath = path.resolve(tmpdir(), `version-${randomUUID()}.txt`)
-      await fs.writeFile(filepath, output)
-
-      // Edit the file, once the editor is closed, the file will be saved and we
-      // can read the changes
-      spawnSync(editor, [...args, filepath], {
-        stdio: 'inherit',
-      })
-
-      let newOutput = await fs.readFile(filepath, 'utf8').then((x) => x.trim().split('\n'))
-
-      // Cleanup temporary file
-      await fs.unlink(filepath)
-
-      // Update the package.json files
-      for (let line of newOutput) {
-        if (line[0] === '#') continue // Skip comment lines
-        if (line.trim() === '') continue // Skip empty lines
-
-        let [name, version = ''] = line.split(':').map((x) => x.trim())
-
-        // Figure out all the paths to the package.json files that need to be
-        // updated with the new version
-        let paths = [
-          // The package.json file of the main workspace
-          workspaces.get(name).path,
-
-          // The package.json files of the workspaces that are in sync with the
-          // main workspace
-          ...(syncedWorkspaces.get(name) ?? []),
-        ]
-
-        for (let pkgPath of paths) {
-          let pkg = await fs.readFile(pkgPath, 'utf8').then(JSON.parse)
-          let name = pkg.name
-          if (version !== '') {
-            // Ensure the version is set after the name and before everything else
-            delete pkg.name
-            delete pkg.version
-
-            // This allows us to keep the order of the keys in the package.json
-            pkg = { name, version, ...pkg }
-          }
-
-          await fs.writeFile(
-            pkgPath,
-            await prettier
-              .format(JSON.stringify(pkg, null, 2), { filepath: pkgPath })
-              .then((x) => `${x.trim()}\n`),
-          )
-        }
-      }
-    }
-
-    console.log('Done.')
-  },
-)
+  console.log('Done.')
+})
diff --git a/turbo.json b/turbo.json
index c48410b29..006c9e553 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,7 +1,6 @@
 {
-  "$schema": "https://v2-10-8.turborepo.dev/schema.json",
-  "ui": "tui",
-  "tasks": {
+  "$schema": "https://turbo.build/schema.json",
+  "pipeline": {
     "@tailwindcss/oxide#build": {
       "dependsOn": ["^build"],
       "outputs": ["./index.d.ts", "./index.js", "./*.node"],
@@ -10,9 +9,8 @@
         "./build.rs",
         "./package.json",
         "./Cargo.toml",
-        "./.cargo/config.toml",
-        "../oxide/src/**/*",
-        "../oxide/Cargo.toml",
+        "../core/src/**/*",
+        "../core/Cargo.toml",
         "../Cargo.toml",
         "../package.json"
       ]
@@ -25,9 +23,8 @@
         "./build.rs",
         "./package.json",
         "./Cargo.toml",
-        "./.cargo/config.toml",
-        "../oxide/src/**/*",
-        "../oxide/Cargo.toml",
+        "../core/src/**/*",
+        "../core/Cargo.toml",
         "../Cargo.toml",
         "../package.json"
       ],
@@ -36,16 +33,12 @@
     },
     "build": {
       "dependsOn": ["^build"],
-      "outputs": ["dist/**"],
-      "env": ["FEATURES_ENV"]
+      "outputs": ["dist/**"]
     },
     "lint": {},
     "dev": {
       "cache": false,
       "persistent": true
     }
-  },
-  // If rustup is installed outside of the default ~/.rustup directory, we need
-  // to pass the path through to the individual rust tasks.
-  "globalPassThroughEnv": ["RUSTUP_HOME"]
+  }
 }
diff --git a/vitest.config.mts b/vitest.config.mts
deleted file mode 100644
index 3ef999be2..000000000
--- a/vitest.config.mts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    projects: ['./packages/*', '!./packages/tsconfig.base.json'],
-    exclude: ['**/*.spec.?(c|m)[jt]s?(x)', 'integrations/**/*'],
-  },
-})
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 000000000..4ccde0667
--- /dev/null
+++ b/vitest.workspace.ts
@@ -0,0 +1 @@
+export default ['packages/*']