refactor: migrate from windi to tailwind (#26516)

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> Co-authored-by: Stokes Player <stokes.player@gmail.com> Co-authored-by: astone123 <adams@cypress.io> Co-authored-by: Stokes Player <stokes@cypress.io>
2026-01-06 06:29:45 -06:00 · 2023-04-28 07:29:24 -07:00
parent 296342c7c4
commit 8f75b139a4
288 changed files with 1469 additions and 1383 deletions
--- a/.vscode/cspell.json
+++ b/.vscode/cspell.json
@@ -59,8 +59,7 @@
        "viewports",
        "vite",
        "vitejs",
-        "vueuse",
-        "Windi"
+        "vueuse"
    ],
    "ignoreWords": [],
    "import": []
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -22,9 +22,9 @@
    // Description: Adds syntax highlighting for all gql tags.
    "apollographql.vscode-apollo",

-    // Name: WindiCSS Intellisense
-    // Description: Automatically sorts your WindiCSS classes.
-    "voorjaar.windicss-intellisense",
+    // Name: TailwindCSS Intellisense
+    // Description: Automatically sorts your TailwindCSS classes.
+    "bradlc.vscode-tailwindcss",

    // Name: Volar
    // Description: Language server for Vue. Required for any syntax highlighting in Vue files.
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,9 +23,6 @@
  },
  "typescript.tsdk": "node_modules/typescript/lib",

-  // A flag that controls whether or not Windi CSS classes will be sorted on save on save.
-  "windicss.sortOnSave": true,
-
  // Support autocompletion and preview of strings.
  // Additionally, support extraction of hardcoded strings into key-values.
  "i18n-ally.localesPaths": "packages/frontend-shared/src/locales",
--- a/packages/app/cypress/component/support/index.ts
+++ b/packages/app/cypress/component/support/index.ts
@@ -18,8 +18,6 @@ import { registerMountFn } from '@packages/frontend-shared/cypress/support/commo

 // Import commands.js using ES2015 syntax:

-import 'virtual:windi.css'
-import '../../../src/main.scss'
 import '@iconify/iconify'
 import { createRouter } from '../../../src/router/router'
 import { createPinia } from '../../../src/store'
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -20,8 +20,8 @@
  },
  "dependencies": {},
  "devDependencies": {
-    "@cypress-design/vue-icon": "0.18.1",
-    "@cypress-design/vue-statusicon": "0.2.4",
+    "@cypress-design/vue-icon": "0.20.0",
+    "@cypress-design/vue-statusicon": "0.3.0",
    "@graphql-typed-document-node/core": "^3.1.0",
    "@headlessui/vue": "1.4.0",
    "@iconify/iconify": "2.1.2",
--- a/packages/app/postcss.config.js
+++ b/packages/app/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/packages/app/src/App.vue
+++ b/packages/app/src/App.vue
@@ -19,17 +19,3 @@ import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 import LoginConnectModals from '@cy/gql-components/LoginConnectModals.vue'
 import CloudViewerAndProject from '@packages/frontend-shared/src/gql-components/CloudViewerAndProject.vue'
 </script>
-
-<style lang="scss">
-html,
-body,
-#app {
-  @apply bg-white h-full;
-}
-
-@font-face {
-  font-family: "Fira Code";
-  src: local("Fira Code"),
-   url('../../frontend-shared/src/assets/fonts/FiraCode-VariableFont_wght.ttf') format("truetype");
-}
-</style>
--- a/packages/app/src/components/FileMatch.vue
+++ b/packages/app/src/components/FileMatch.vue
@@ -28,23 +28,23 @@

 <template>
  <div>
-    <div class="rounded border-1 h-40px w-full inline-flex items-center hocus-default focus-within-default truncate">
+    <div class="rounded border h-[40px] w-full inline-flex items-center hocus-default focus-within-default truncate">
      <FileMatchButton
        :expanded="expanded"
        @click="toggleExpanded()"
      >
        <span v-if="!expanded">{{ localExtensionPattern }}</span>
      </FileMatchButton>
-      <div class="flex-grow min-w-min inline-flex items-center group">
+      <div class="grow min-w-min inline-flex items-center group">
        <i-cy-magnifying-glass_x16
          v-if="!expanded"
-          class="mr-8px ml-12px inline-block icon-light-gray-50 icon-dark-gray-500 group-focus-within:icon-light-indigo-50 group-focus-within:icon-dark-indigo-400"
+          class="mr-[8px] ml-[12px] inline-block icon-light-gray-50 icon-dark-gray-500 group-focus-within:icon-light-indigo-50 group-focus-within:icon-dark-indigo-400"
        />

        <FileMatchInput
          v-if="expanded"
          v-model="localExtensionPattern"
-          class="ml-12px"
+          class="ml-[12px]"
          :placeholder="t('components.fileSearch.byExtensionInput')"
        />
        <FileMatchInput
@@ -56,7 +56,7 @@
      </div>
      <slot name="matches">
        <FileMatchIndicator
-          class="mr-8px truncate"
+          class="mr-[8px] truncate"
          data-cy="file-match-indicator"
        >
          {{ indicatorText }}
@@ -65,11 +65,11 @@
    </div>

    <div
-      class="rounded border-1 h-40px mt-8px w-full inline-flex items-center hocus-default focus-within-default"
+      class="rounded border h-[40px] mt-[8px] w-full inline-flex items-center hocus-default focus-within-default"
      :class="{ 'hidden' : !expanded }"
    >
-      <div class="flex-grow inline-flex items-center group">
-        <i-cy-magnifying-glass_x16 class="mr-8px ml-12px inline-block icon-light-gray-50 icon-dark-gray-500 group-focus-within:icon-light-indigo-50 group-focus-within:icon-dark-indigo-400" />
+      <div class="grow inline-flex items-center group">
+        <i-cy-magnifying-glass_x16 class="mr-[8px] ml-[12px] inline-block icon-light-gray-50 icon-dark-gray-500 group-focus-within:icon-light-indigo-50 group-focus-within:icon-dark-indigo-400" />
        <FileMatchInput
          v-model="localPattern"
          :placeholder="t('components.fileSearch.byFilenameInput')"
--- a/packages/app/src/components/FileMatchButton.vue
+++ b/packages/app/src/components/FileMatchButton.vue
@@ -1,10 +1,10 @@
 <template>
  <button
    data-cy="file-match-button"
-    class="inline-flex items-center h-full text-gray-700 transition duration-150 rounded-l outline-none group bg-gray-50 border-r-gray-100 border-r-1 hocus:bg-indigo-50 hocus:border-r-indigo-300 hocus:text-indigo-500 px-12px"
+    class="inline-flex items-center h-full text-gray-700 transition duration-150 rounded-l outline-none group bg-gray-50 border-r-gray-100 border-r hocus:bg-indigo-50 hocus:border-r-indigo-300 hocus:text-indigo-500 px-[12px]"
  >
    <i-cy-chevron-right-small_x16
-      class="transition duration-150 transform min-w-16px min-h-16px icon-dark-gray-400 group-hocus:icon-dark-indigo-400"
+      class="transition duration-150 transform min-w-[16px] min-h-[16px] icon-dark-gray-400 group-hocus:icon-dark-indigo-400"
      :class="{
        'rotate-90': expanded
      }"
--- a/packages/app/src/components/FileMatchIndicator.vue
+++ b/packages/app/src/components/FileMatchIndicator.vue
@@ -4,7 +4,7 @@
    data-cy="file-match-indicator"
  >
    <span
-      class="rounded font-medium  h-24px text-center px-8px  truncate select-none"
+      class="rounded font-medium  h-[24px] text-center px-[8px]  truncate select-none"
      :class="color"
    >
      <slot /></span>
--- a/packages/app/src/components/FileMatchInput.vue
+++ b/packages/app/src/components/FileMatchInput.vue
@@ -1,7 +1,7 @@
 <template>
  <input
    v-model="localModelValue"
-    class="flex-grow p-0 text-gray-700 placeholder-gray-400 border-transparent outline-none placeholder-shown:overflow-ellipsis placeholder-shown:truncate hocus:border-transparent mr-8px"
+    class="grow p-0 text-gray-700 placeholder-gray-400 border-transparent outline-none placeholder-shown:overflow-ellipsis placeholder-shown:truncate hocus:border-transparent mr-[8px]"
    type="search"
    autocomplete="off"
  >
--- a/packages/app/src/components/SpecPatternModal.vue
+++ b/packages/app/src/components/SpecPatternModal.vue
@@ -9,7 +9,7 @@
    @update:model-value="emits('close')"
  >
    <div
-      class="w-full p-24px sm:min-w-640px"
+      class="w-full p-[24px] sm:min-w-[640px]"
    >
      <SpecPatterns
        :gql="props.gql"
@@ -17,7 +17,7 @@
      />
    </div>
    <StandardModalFooter
-      class="flex gap-16px items-center"
+      class="flex gap-[16px] items-center"
    >
      <OpenConfigFileInIDE
        v-slot="{onClick}"
--- a/packages/app/src/components/SpecPatterns.cy.tsx
+++ b/packages/app/src/components/SpecPatterns.cy.tsx
@@ -4,7 +4,7 @@ import { SpecPatternsFragmentDoc } from '../generated/graphql-test'
 describe('<SpecPatterns />', () => {
  it('renders spec patterns', () => {
    cy.mountFragment(SpecPatternsFragmentDoc, {
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql} /></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql} /></div>,
    })

    cy.get('[data-cy="spec-pattern"]').contains('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}')
@@ -23,7 +23,7 @@ describe('<SpecPatterns />', () => {
        res.currentTestingType = 'component'
        res.specs = res.specs.slice(0, 50) || []
      },
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql} /></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql} /></div>,
    })

    cy.get('[data-cy="spec-pattern"]').contains('**/*.cy.{js,jsx,ts,tsx}')
@@ -40,7 +40,7 @@ describe('<SpecPatterns />', () => {
        res.currentTestingType = 'component'
        res.specs = res.specs.slice(0, 50) || []
      },
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql} variant='info' /></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql} variant='info' /></div>,
    })

    cy.get('[data-cy="spec-pattern"]').contains('**/*.cy.{js,jsx,ts,tsx}')
@@ -57,7 +57,7 @@ describe('<SpecPatterns />', () => {
        res.currentTestingType = 'component'
        res.specs = []
      },
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql}/></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql}/></div>,
    })

    cy.get('[data-cy="file-match-indicator"]').contains('No matches')
@@ -73,7 +73,7 @@ describe('<SpecPatterns />', () => {
        res.currentTestingType = 'component'
        res.specs = res.specs.slice(0, 1) || []
      },
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql}/></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql}/></div>,
    })

    cy.get('[data-cy="file-match-indicator"]').contains('1 match')
--- a/packages/app/src/components/SpecPatterns.vue
+++ b/packages/app/src/components/SpecPatterns.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="rounded border-gray-100 border-1px w-full">
-    <div class="flex p-16px items-center justify-between">
+  <div class="rounded border-gray-100 border-[1px] w-full">
+    <div class="flex p-[16px] items-center justify-between">
      <FileMatchIndicator :variant="props.variant">
        <span v-if="props.variant === 'info'">specPattern</span>
        <span v-else>{{ t('components.specPattern.matches', props.gql.specs.length) }}</span>
@@ -10,7 +10,7 @@
        :gql="props.gql"
      >
        <button
-          class="flex outline-transparent text-indigo-500 gap-8px items-center group"
+          class="flex outline-transparent text-indigo-500 gap-[8px] items-center group"
          @click="onClick"
        >
          <i-cy-document-text_x16 class="icon-light-gray-100 icon-dark-gray-500" />
@@ -19,11 +19,11 @@
      </OpenConfigFileInIDE>
    </div>

-    <div class="divide-gray-200 divide-y-1 bg-gray-50 px-16px">
+    <div class="divide-gray-200 divide-y bg-gray-50 px-[16px]">
      <code
        v-for="pattern in specPatterns"
        :key="pattern"
-        class="flex py-8px text-gray-600 text-size-14px leading-24px block"
+        class="flex py-[8px] text-gray-600 text-[14px] leading-[24px] block"
        data-cy="spec-pattern"
      >
        {{ pattern }}
--- a/packages/app/src/debug/DebugArtifactLink.cy.tsx
+++ b/packages/app/src/debug/DebugArtifactLink.cy.tsx
@@ -11,7 +11,7 @@ describe('<DebugArtifacts />', () => {
  it('mounts correctly, provides expected tooltip content, and emits correct event', () => {
    artifactMapping.forEach((artifact) => {
      cy.mount(() => (
-        <DebugArtifactLink class="m-24px inline-flex" icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
+        <DebugArtifactLink class="m-[24px] inline-flex" icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
      ))

      cy.findByTestId(`artifact-for-${artifact.icon}`).should('have.length', 1)
@@ -26,7 +26,7 @@ describe('<DebugArtifacts />', () => {

  it('mounts correctly for all icons together and has correct URLs', () => {
    cy.mount(() => (
-      <div class="flex flex-grow space-x-4.5 pt-24px justify-center" data-cy='debug-artifacts-all'>
+      <div class="flex grow space-x-4.5 pt-[24px] justify-center" data-cy='debug-artifacts-all'>
        <DebugArtifactLink icon={'TERMINAL_LOG'} popperText={'View Log'} url={'www.cypress.io'}/>
        <DebugArtifactLink icon={'IMAGE_SCREENSHOT'} popperText={'View Screenshot'} url={'cloud.cypress.io'}/>
        <DebugArtifactLink icon={'PLAY'} popperText={'View Video'} url={'www.cypress.io'}/>
--- a/packages/app/src/debug/DebugArtifactLink.vue
+++ b/packages/app/src/debug/DebugArtifactLink.vue
@@ -5,7 +5,7 @@
    :distance="8"
  >
    <ExternalLink
-      class="flex h-24px w-24px justify-center items-center hocus:rounded-md group hocus:border-1px hocus:border-indigo-500"
+      class="flex h-[24px] w-[24px] justify-center items-center hocus:rounded-md group hocus:border-[1px] hocus:border-indigo-500"
      :data-cy="`${icon}-button`"
      :href="props.url || '#'"
      :use-default-hocus="true"
--- a/packages/app/src/debug/DebugCancelledAlert.vue
+++ b/packages/app/src/debug/DebugCancelledAlert.vue
@@ -3,23 +3,23 @@
    :title="t('debugPage.manuallyCancelled')"
    status="warning"
    :icon="ErrorOutlineIcon"
-    class="flex flex-col mb-24px w-full"
+    class="flex flex-col mb-[24px] w-full"
  >
    <div class="flex items-center">
      <div>{{ t('debugPage.specsSkipped', {n: totalSpecs, totalSkippedSpecs}) }}</div>
      <template v-if="cancellation.cancelledBy?.email && cancellation.cancelledBy.fullName">
-        <div class="rounded-full font-semibold bg-orange-500 h-3px mx-10px w-3px" />
+        <div class="rounded-full font-semibold bg-orange-500 h-[3px] mx-[10px] w-[3px]" />
        <div class="flex items-center">
          <UserAvatar
            :email="cancellation.cancelledBy.email"
-            class="h-20px mr-7px w-20px"
+            class="h-[20px] mr-[7px] w-[20px]"
            data-cy="cancelled-by-user-avatar"
          />
          <div>{{ cancellation.cancelledBy.fullName }}</div>
        </div>
      </template>
      <template v-if="cancellation.cancelledAt">
-        <div class="rounded-full font-semibold bg-orange-500 h-3px mx-10px w-3px" />
+        <div class="rounded-full font-semibold bg-orange-500 h-[3px] mx-[10px] w-[3px]" />
        <div>
          {{ dayjs(cancellation.cancelledAt).local().format('MMM D, YYYY h:mm A') }}
        </div>
--- a/packages/app/src/debug/DebugContainer.cy.tsx
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -126,7 +126,7 @@ describe('<DebugContainer />', () => {
        },
        render: (gqlVal) => {
          return (
-            <div class="h-850px">
+            <div class="h-[850px]">
              <DebugContainer
                gql={gqlVal}
              />
@@ -256,7 +256,7 @@ describe('<DebugContainer />', () => {
          }
        },
        render: (gqlVal) =>
-          <div class="h-850px">
+          <div class="h-[850px]">
            <DebugContainer
              gql={gqlVal}
            />
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -22,12 +22,12 @@
      />
      <div
        v-else-if="run?.status"
-        class="flex flex-col p-1.5rem gap-24px"
+        class="flex flex-col p-[1.5rem] gap-[24px]"
        :class="{'h-full': shouldBeFullHeight}"
      >
        <DebugRunNavigation
          v-if="allRuns && run.runNumber"
-          class="flex-shrink-0"
+          class="shrink-0"
          :runs="allRuns"
          :current-run-number="run.runNumber"
          :current-commit-info="currentCommitInfo"
@@ -42,13 +42,13 @@
          <DebugTestingProgress
            v-if="isRunning && run.id"
            :run-id="run.id"
-            class="flex-shrink-0"
+            class="shrink-0"
          />
        </TransitionQuickFade>

        <DebugPendingRunSplash
          v-if="shouldShowPendingRunSplash"
-          class="flex-grow"
+          class="grow"
          :is-completion-scheduled="isScheduledToComplete"
        />

--- a/packages/app/src/debug/DebugErrored.vue
+++ b/packages/app/src/debug/DebugErrored.vue
@@ -3,18 +3,18 @@
    :title="t('debugPage.incomplete')"
    status="warning"
    :icon="ErrorOutlineIcon"
-    class="flex flex-col mb-24px w-full"
+    class="flex flex-col mb-[24px] w-full"
  >
-    <div class="ml-5px">
+    <div class="ml-[5px]">
      <ul
        v-for="(error, index) in errors"
        :key="index"
-        class="list-disc ml-25px"
+        class="list-disc ml-[25px]"
      >
        <li><pre>{{ error }}</pre></li>
      </ul>
    </div>
-    <div class="mt-20px">
+    <div class="mt-[20px]">
      {{ t('debugPage.specsSkipped', {n: totalSpecs, totalSkippedSpecs}) }}
    </div>
  </Alert>
--- a/packages/app/src/debug/DebugFailedTest.vue
+++ b/packages/app/src/debug/DebugFailedTest.vue
@@ -7,7 +7,7 @@
      size="16"
      status="failed"
      data-cy="failed-icon"
-      class="min-w-16px isolate"
+      class="min-w-[16px] isolate"
    />
    <template
      v-for="{text, type}, index in failedTestData.mappedTitleParts"
@@ -48,7 +48,7 @@
    <div
      v-if="!props.expandable"
      data-cy="debug-artifacts"
-      class="flex flex-grow opacity-0 px-18px gap-16px justify-end test-row-artifacts"
+      class="flex grow opacity-0 px-[18px] gap-[16px] justify-end test-row-artifacts"
    >
      <div
        v-for="result, i in failedTestData.debugArtifacts"
@@ -67,7 +67,7 @@
    <div
      v-if="props.expandable"
      data-cy="debug-failed-test-groups"
-      class="divide-y rounded border-gray-100 border-1"
+      class="divide-y rounded border-gray-100 border"
    >
      <GroupedDebugFailedTestVue
        :failed-tests="props.failedTestsResult"
--- a/packages/app/src/debug/DebugNoTests.vue
+++ b/packages/app/src/debug/DebugNoTests.vue
@@ -3,7 +3,7 @@
    :title="t('debugPage.incomplete')"
    status="warning"
    :icon="ErrorOutlineIcon"
-    class="flex flex-col mb-24px w-full"
+    class="flex flex-col mb-[24px] w-full"
  >
    {{ t('debugPage.runHasNoTests') }}
  </Alert>
--- a/packages/app/src/debug/DebugOverLimit.vue
+++ b/packages/app/src/debug/DebugOverLimit.vue
@@ -1,17 +1,17 @@
 <template>
  <div
-    class="flex flex-col max-w-440px items-center"
+    class="flex flex-col max-w-[440px] items-center"
  >
    <LockedProject :class="iconClasses" />
-    <span class="font-medium mt-24px text-lg text-gray-900">
+    <span class="font-medium mt-[24px] text-lg text-gray-900">
      {{ copy.title }}
    </span>
-    <span class="mt-10px text-center text-gray-600">
+    <span class="mt-[10px] text-center text-gray-600">
      {{ copy.message }}
    </span>
    <Button
      size="lg"
-      class="mt-25px"
+      class="mt-[25px]"
      :href="actionUrl"
    >
      {{ copy.actionLabel }}
--- a/packages/app/src/debug/DebugPageDetails.vue
+++ b/packages/app/src/debug/DebugPageDetails.vue
@@ -20,7 +20,7 @@
  />
  <div
    v-if="['PASSED', 'OVERLIMIT'].includes(status) || isHidden"
-    class="flex flex-col flex-grow w-full p-12 justify-center items-center align-middle "
+    class="flex flex-col grow w-full p-12 justify-center items-center align-middle "
  >
    <DebugPassed v-if="status === 'PASSED' && !isHidden" />
    <DebugOverLimit
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    data-cy="debug"
-    class="flex flex-col gap-16px"
+    class="flex flex-col gap-[16px]"
  >
    <div
      data-cy="debug-header"
@@ -13,7 +13,7 @@
        <li
          v-if="debug?.commitInfo?.summary"
          class="font-medium text-lg text-gray-900 inline"
-          :class="{'mr-8px': props.commitsAhead}"
+          :class="{'mr-[8px]': props.commitsAhead}"
          data-cy="debug-test-summary"
        >
          {{ debug.commitInfo.summary }}
@@ -30,7 +30,7 @@
          </span>
        </li>
        <li
-          class="text-lg text-gray-400 w-16px inline"
+          class="text-lg text-gray-400 w-[16px] inline"
          aria-hidden="true"
        >
          •
@@ -65,7 +65,7 @@
          v-if="debug?.commitInfo?.branch"
          data-cy="debug-header-branch"
        >
-          <i-cy-tech-branch-h_x16 class="mr-1 mr-8px icon-dark-gray-300" />
+          <i-cy-tech-branch-h_x16 class="mr-2 icon-dark-gray-300" />
          <span class="sr-only">Branch Name:</span> {{ debug.commitInfo.branch }}
        </li>
        <li
@@ -73,7 +73,7 @@
          data-cy="debug-header-commitHash"
        >
          <CommitIcon
-            class="h-16px fill-white mr-11px w-16px"
+            class="h-[16px] fill-white mr-2 w-[16px]"
          />
          <span class="sr-only">Commit Hash:</span> {{ debug.commitInfo?.sha?.substring(0,7) }}
        </li>
@@ -82,7 +82,7 @@
          data-cy="debug-header-author"
        >
          <UserAvatar
-            class="h-16px mr-8px w-16px"
+            class="h-[16px] mr-2 w-[16px]"
            :email="debug?.commitInfo?.authorEmail"
            data-cy="debug-header-avatar"
          />
@@ -94,7 +94,7 @@
        >
          <IconTimeStopwatch
            size="16"
-            class="mr-9px"
+            class="mr-2"
            stroke-color="gray-500"
            fill-color="gray-50"
          />
@@ -159,6 +159,6 @@ const { relativeCreatedAt, totalDuration } = useRunDateTimeInterval(debug)
 <style scoped>
 [data-cy=metadata] li:not(:first-child)::before {
  content: '•';
-  @apply text-lg text-gray-400 pr-8px
+  @apply text-lg text-gray-400 pr-[8px]
 }
 </style>
--- a/packages/app/src/debug/DebugPassed.vue
+++ b/packages/app/src/debug/DebugPassed.vue
@@ -4,10 +4,10 @@
    data-cy="debug-passed"
  >
    <DashboardCheckmark class="icon-dark-gray-500" />
-    <span class="font-medium mt-24px text-gray-900">
+    <span class="font-medium mt-[24px] text-gray-900">
      {{ t('debugPage.wellDone') }}
    </span>
-    <span class="mt-5px text-gray-700">{{ t('debugPage.allYourTestsPassed') }}</span>
+    <span class="mt-[5px] text-gray-700">{{ t('debugPage.allYourTestsPassed') }}</span>
  </div>
 </template>

--- a/packages/app/src/debug/DebugPendingRunSplash.vue
+++ b/packages/app/src/debug/DebugPendingRunSplash.vue
@@ -4,7 +4,7 @@
    class="flex p-12"
  >
    <div class="flex flex-col w-full items-center justify-center">
-      <IconTechnologyDashboardRunning class="mb-16px" />
+      <IconTechnologyDashboardRunning class="mb-[16px]" />
      <span
        data-cy="title"
        class="font-medium text-lg text-gray-900"
@@ -14,7 +14,7 @@
      <div
        v-if="!isCompletionScheduled"
        data-cy="splash-subtitle"
-        class="font-normal mt-4px text-md text-gray-600"
+        class="font-normal mt-[4px] text-md text-gray-600"
      >
        {{ t('debugPage.pending.failuresHere') }}
      </div>
--- a/packages/app/src/debug/DebugResults.vue
+++ b/packages/app/src/debug/DebugResults.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="flex gap-8px items-center"
+    class="flex gap-[8px] items-center"
    data-cy="debug-results-holder"
  >
    <ResultCounts
@@ -13,7 +13,7 @@
    <div
      v-if="results?.totalFlakyTests"
      data-cy="debug-flaky-badge"
-      class="border rounded flex flex-row gap-8px items-center h-6 bg-orange-50 border-orange-200 text-sm text-orange-600 px-2 gap-x-1 border-1"
+      class="border rounded flex flex-row gap-[8px] items-center h-6 bg-orange-50 border-orange-200 text-sm text-orange-600 px-2 gap-x-1 border"
    >
      <span
        data-cy="total-flaky-tests"
@@ -21,7 +21,7 @@
      >
        {{ results.totalFlakyTests }}
      </span>
-      <div class="w-px my-6px h-6 border-orange-200 border" />
+      <div class="w-px my-[6px] h-6 border-orange-200 border" />
      <span class="font-semibold pl-1">
        {{ t('specPage.flaky.badgeLabel') }}
      </span>
--- a/packages/app/src/debug/DebugRunNavigation.vue
+++ b/packages/app/src/debug/DebugRunNavigation.vue
@@ -1,21 +1,21 @@
 <template>
  <div
    v-if="shouldShow"
-    class="border rounded border-indigo-100 overflow-hidden"
+    class="overflow-hidden border border-indigo-100 rounded"
  >
    <div
-      class="bg-indigo-50 p-12px group"
+      class="bg-indigo-50 p-[12px] group"
      data-cy="debug-detailed-header"
    >
      <div
        class="flex items-center justify-between"
      >
-        <div class="flex min-w-0 items-center">
+        <div class="flex items-center min-w-0">
          <button
            v-if="!hideToggle"
            :aria-expanded="showRuns"
            aria-controls="debug-runs-container"
-            class="border border-transparent rounded flex p-2px transition items-center hocus-default hover:bg-white focus:bg-white active:bg-white group-hover:(outline outline-indigo-100) "
+            class="border border-transparent rounded flex p-[2px] transition items-center hocus-default hover:bg-white focus:bg-white active:bg-white group-hover:outline group-hover:outline-indigo-100"
            data-cy="debug-toggle"
            @click="toggleRuns()"
          >
@@ -25,7 +25,7 @@
              stroke-color="indigo-400"
            />
            <span
-              class="font-medium text-sm mr-4px ml-8px text-indigo-500"
+              class="font-medium text-sm mr-[4px] ml-[8px] text-indigo-500"
              :class="{'sr-only': !latestIsCurrentlySelected}"
            >
              {{ t('debugPage.switchRun') }}
@@ -41,25 +41,25 @@
            <DebugRunNumber
              :status="latest.status"
              :value="latest.runNumber"
-              class="mx-8px"
+              class="mx-[8px]"
            />
            <DebugResults
              v-if="latest"
              :gql="latest"
-              class="bg-white mr-12px"
+              class="bg-white mr-[12px]"
            />
            <span
              class="font-medium text-gray-800 truncate"
              :title="latest.commitInfo?.summary!"
            >{{ latest.commitInfo?.summary }}</span>
            <Dot class="hidden lg:block" />
-            <span class="flex-shrink-0 text-gray-700 truncate hidden lg:block">{{ specsCompleted(latest) }}</span>
+            <span class="hidden text-gray-700 truncate shrink-0 lg:block">{{ specsCompleted(latest) }}</span>
          </template>
        </div>
        <Button
          v-if="!latestIsCurrentlySelected"
          data-cy="switch-to-latest"
-          class="flex-shrink-0 ml-8px"
+          class="shrink-0 ml-[8px]"
          @click="$event => changeRun(latest!)"
        >
          {{ t('debugPage.switchToLatestRun') }}
@@ -71,11 +71,11 @@
      <div v-if="showRuns">
        <div
          id="debug-runs-container"
-          class="max-h-30vh overflow-y-scroll"
+          class="overflow-y-scroll max-h-[30vh]"
          data-cy="debug-runs-container"
        >
          <ul
-            class="my-8px relative before:(content-DEFAULT top-20px bottom-10px w-5px border-2 border-dashed border-l-0 border-y-0 border-r-gray-100 left-[19px] absolute) "
+            class="my-[8px] relative before:content-[''] before:absolute before:top-[20px] before:bottom-[10px] before:w-[5px] before:border-2 before:border-dashed before:border-l-0 before:border-y-0 before:border-r-gray-100 before:left-[19px]"
            data-cy="debug-historical-runs"
          >
            <li
@@ -83,14 +83,14 @@
              :key="sha"
              :data-cy="`commit-${sha}`"
            >
-              <div class="flex my-10px mx-16px items-center">
-                <DebugCommitIcon class="flex-shrink-0" />
-                <LightText class="flex-shrink-0 ml-12px truncate">
+              <div class="flex items-center my-[10px] mx-[16px]">
+                <DebugCommitIcon class="shrink-0" />
+                <LightText class="shrink-0 truncate ml-[12px]">
                  {{ sha.slice(0, 7) }}
                </LightText>
                <Dot />
                <span
-                  class="font-medium text-sm text-gray-800 truncate"
+                  class="text-sm font-medium text-gray-800 truncate"
                  :title="groupByCommit[sha].message!"
                >
                  {{ groupByCommit[sha].message }}
@@ -98,9 +98,7 @@
                <span
                  v-if="sha === currentCommitInfo?.sha"
                  data-cy="tag-checked-out"
-                  class="border rounded font-medium border-gray-100 border-1 flex-shrink-0
-              h-16px ml-8px px-4px text-12px text-purple-400 leading-16px
-              align-middle inline-flex items-center"
+                  class="inline-flex items-center shrink-0 font-medium text-purple-400 align-middle border border-gray-100 rounded border-1 h-[16px] ml-[8px] px-[4px] text-[12px] leading-[16px]"
                >
                  Checked out
                </span>
@@ -203,7 +201,7 @@ const props = defineProps<{
 }>()

 const Dot: FunctionalComponent = () => {
-  return h('span', { class: 'px-8px text-gray-300' }, '•')
+  return h('span', { class: 'px-[8px] text-gray-300' }, '•')
 }

 const LightText: FunctionalComponent = (_props, { slots }) => {
--- a/packages/app/src/debug/DebugRunNavigationRow.vue
+++ b/packages/app/src/debug/DebugRunNavigationRow.vue
@@ -1,12 +1,12 @@
 <template>
  <li
-    class="mr-12px ml-6px "
+    class="mr-[12px] ml-[6px] "
    :data-cy="isCurrentRun ? 'current-run' : 'run'"
  >
    <component
      :is="isCurrentRun ? 'div': 'button'"
      :aria-label="t('debugPage.switchToRun', {runNumber: gql.runNumber})"
-      class="rounded flex w-full p-10px pl-35px relative hocus:bg-indigo-50 focus:(outline outline-indigo-500) "
+      class="rounded flex w-full p-[10px] pl-[35px] relative hocus:bg-indigo-50 focus:outline focus:outline-indigo-500"
      :class="{ 'bg-indigo-50': isCurrentRun }"
      @click="$emit('changeRun')"
    >
@@ -17,14 +17,14 @@
      />
      <div
        :data-cy="`run-${props.gql.runNumber}`"
-        class="flex w-full justify-between items-center"
+        class="flex items-center justify-between w-full"
      >
-        <div class="flex min-w-0 items-center">
+        <div class="flex items-center min-w-0">
          <DebugRunNumber
            v-if="props.gql.status && props.gql.runNumber"
            :status="props.gql.status"
            :value="props.gql.runNumber"
-            class="mr-8px"
+            class="mr-[8px]"
          />
          <DebugResults
            v-if="props.gql"
@@ -37,7 +37,7 @@
          </LightText>
        </div>

-        <LightText class="flex-shrink-0 ml-8px">
+        <LightText class="shrink-0 ml-[8px]">
          {{ totalDuration }} ({{ relativeCreatedAt }})
        </LightText>
      </div>
@@ -80,7 +80,7 @@ fragment DebugProgress_DebugTests on CloudRun {
 }`

 const Dot: FunctionalComponent = () => {
-  return h('span', { class: 'px-8px text-gray-300' }, '•')
+  return h('span', { class: 'px-[8px] text-gray-300' }, '•')
 }

 useDebugRunSummary(props.gql)
--- a/packages/app/src/debug/DebugSpec.cy.tsx
+++ b/packages/app/src/debug/DebugSpec.cy.tsx
@@ -172,7 +172,7 @@ describe('<DebugSpec/> with multiple test results', () => {

  it('mounts correctly for single groups', () => {
    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <DebugSpec spec={spec}
          testResults={testResultSingleGroup}
          groups={singleGroup}
@@ -231,7 +231,7 @@ describe('<DebugSpec/> responsive UI', () => {
    }

    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <DebugSpec spec={spec} testResults={testResultSingleGroup} groups={singleGroup} testingType={'component'} foundLocally={true} matchesCurrentTestingType={true}/>
      </div>
    ))
@@ -298,7 +298,7 @@ describe('<DebugSpec/> responsive UI', () => {
    }

    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <DebugSpec spec={spec} testResults={testResult} groups={singleGroup} testingType={'e2e'} matchesCurrentTestingType={true} foundLocally={true}/>
      </div>
    ))
@@ -328,7 +328,7 @@ describe('testing groupings', () => {
    }

    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <DebugSpec spec={spec} testResults={testResultMultipleGroups} groups={multipleGroups} foundLocally={true} testingType={'e2e'} matchesCurrentTestingType={true}/>
      </div>
    ))
@@ -435,7 +435,7 @@ describe('testing groupings', () => {
    }

    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <DebugSpec spec={spec} testResults={tests} groups={repeatedValueGroups} foundLocally={true} testingType={'component'} matchesCurrentTestingType={true}/>
      </div>
    ))
@@ -473,7 +473,7 @@ describe('Run Failures button', () => {

  it('is disabled if spec is not found locally', () => {
    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <DebugSpec spec={spec} testResults={testResultSingleGroup} groups={singleGroup} foundLocally={false} testingType={'e2e'} matchesCurrentTestingType={true}/>
      </div>
    ))
@@ -489,7 +489,7 @@ describe('Run Failures button', () => {

  it('is disabled if run testing-type differs from the current testing-type', () => {
    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <DebugSpec
          spec={spec}
          testResults={testResultSingleGroup}
@@ -518,7 +518,7 @@ describe('Run Failures button', () => {

  it('is enabled if found locally and same testing type', () => {
    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <DebugSpec spec={spec} testResults={testResultSingleGroup} groups={singleGroup} foundLocally={true} testingType={'e2e'} matchesCurrentTestingType={true}/>
      </div>
    ))
@@ -546,7 +546,7 @@ describe('Open in IDE', () => {
  }

  const renderDebugSpec = ({ foundLocally } = { foundLocally: true }) => cy.mount(() =>
-    <div class="p-24px">
+    <div class="p-[24px]">
      <DebugSpec spec={spec}
        testResults={testResultSingleGroup}
        groups={singleGroup}
--- a/packages/app/src/debug/DebugSpec.vue
+++ b/packages/app/src/debug/DebugSpec.vue
@@ -1,21 +1,21 @@
 <template>
  <div
    data-cy="debug-spec-col"
-    class="flex flex-col grid gap-24px self-stretch"
+    class="flex flex-col grid gap-[24px] self-stretch"
  >
    <div
      data-cy="debug-spec-item"
-      class="rounded flex flex-col border-gray-100 border-t-1px border-x-1px w-full overflow-hidden items-start box-border"
+      class="rounded flex flex-col border-gray-100 border-t-[1px] border-x-[1px] w-full overflow-hidden items-start box-border"
    >
      <div
        data-cy="debug-spec-header"
-        class="rounded-t flex flex-row bg-gray-50 border-b-1px border-b-gray-100 w-full py-12px items-center"
+        class="rounded-t flex flex-row bg-gray-50 border-b-[1px] border-b-gray-100 w-full py-[12px] items-center"
      >
        <div
          data-cy="spec-contents"
-          class="flex w-full grid px-18px gap-y-8px items-center"
+          class="flex w-full grid px-[18px] gap-y-[8px] items-center"
        >
-          <div class="flex-grow flex w-full gap-x-2 truncate items-center">
+          <div class="grow flex w-full gap-x-2 truncate items-center">
            <Tooltip
              v-if="foundLocally"
              placement="bottom"
@@ -27,7 +27,7 @@
                :file-path="specData.fullPath"
              >
                <button
-                  class="rounded-md border-1px border-gray-100 p-4px group hocus:border-indigo-200"
+                  class="rounded-md border-[1px] border-gray-100 p-[4px] group hocus:border-indigo-200"
                  :aria-label="t('debugPage.openFile.openInIDE')"
                  @click="onClick"
                >
@@ -38,7 +38,7 @@
                    hocus-fill-color="indigo-200"
                    size="16"
                    interactive-colors-on-group
-                    class="min-w-16px"
+                    class="min-w-[16px]"
                  />
                </button>
              </OpenFileInIDE>
@@ -46,7 +46,7 @@
                #popper
              >
                <div
-                  class="text-center text-sm max-w-240px"
+                  class="text-center text-sm max-w-[240px]"
                  data-cy="open-in-ide-tooltip"
                >
                  {{ t('debugPage.openFile.openInIDE') }}
@@ -62,20 +62,20 @@
              <button
                aria-disabled
                :aria-label="t('debugPage.openFile.notFoundLocally')"
-                class="rounded-md border-1px border-gray-100 p-4px"
+                class="rounded-md border-[1px] border-gray-100 p-[4px]"
              >
                <IconDocumentMinus
                  stroke-color="gray-500"
                  fill-color="gray-100"
                  size="16"
-                  class="min-w-16px"
+                  class="min-w-[16px]"
                />
              </button>
              <template
                #popper
              >
                <div
-                  class="text-center text-sm max-w-240px"
+                  class="text-center text-sm max-w-[240px]"
                  data-cy="open-in-ide-disabled-tooltip"
                >
                  {{ t('debugPage.openFile.notFoundLocally') }}
@@ -84,7 +84,7 @@
            </Tooltip>
            <div
              data-cy="spec-path"
-              class="flex-grow text-base non-italic truncate"
+              class="grow text-base non-italic truncate"
            >
              <span
                class="font-normal text-gray-600"
@@ -147,7 +147,7 @@
          </div>
        </div>
        <div
-          class="mr-16px"
+          class="mr-[16px]"
        >
          <Tooltip
            placement="bottom"
@@ -159,7 +159,7 @@
            <Button
              data-cy="run-failures"
              variant="white"
-              class="gap-x-10px inline-flex whitespace-nowrap justify-center items-center isolate"
+              class="gap-x-[10px] inline-flex whitespace-nowrap justify-center items-center isolate"
              :disabled="runAllFailuresState.disabled"
              :to="{ path: '/specs/runner', query: { file: posixify(specData.fullPath), mode: 'debug' } }"
            >
@@ -179,14 +179,14 @@
              #popper
            >
              <div
-                class="flex flex-col text-sm max-w-350px items-center"
+                class="flex flex-col text-sm max-w-[350px] items-center"
                data-cy="run-all-failures-tooltip"
              >
                <span class="text-center">{{ runAllFailuresState.message }}</span>
                <Button
                  v-if="runAllFailuresState.cta"
                  variant="text"
-                  class="rounded-md font-medium bg-gray-800 my-12px"
+                  class="rounded-md font-medium bg-gray-800 my-[12px]"
                  @click="runAllFailuresState.cta?.action"
                >
                  {{ runAllFailuresState.cta.message }}
@@ -201,8 +201,8 @@
          v-for="thumbprint in Object.keys(specData.failedTests)"
          :key="`test-${thumbprint}`"
          data-cy="test-group"
-          class="flex flex-col flex-start border-b-gray-100 border-b-1px w-full pr-16px pl-16px justify-center"
-          :class="Object.keys(specData.groups).length > 1 ? 'pb-16px': 'hover:bg-gray-50 focus-within:bg-gray-50'"
+          class="flex flex-col flex-start border-b-gray-100 border-b-[1px] w-full pr-[16px] pl-[16px] justify-center"
+          :class="Object.keys(specData.groups).length > 1 ? 'pb-[16px]': 'hover:bg-gray-50 focus-within:bg-gray-50'"
        >
          <DebugFailedTest
            v-if="specData.failedTests[thumbprint].length >= 1"
--- a/packages/app/src/debug/DebugSpecLimitBanner.vue
+++ b/packages/app/src/debug/DebugSpecLimitBanner.vue
@@ -4,7 +4,7 @@
    data-cy="debug-spec-limit"
    class="w-full"
  >
-    <ul class="border rounded flex flex-row flex-wrap bg-indigo-50 border-indigo-100 p-12px p-4 gap-x-2 items-center whitespace-nowrap children:flex children:items-center">
+    <ul class="border rounded flex flex-row flex-wrap bg-indigo-50 border-indigo-100 p-4 gap-x-2 items-center whitespace-nowrap children:flex children:items-center">
      <li class="font-medium text-sm text-gray-900">
        {{ t('debugPage.limit.title') }}
      </li>
@@ -44,6 +44,6 @@ const cloudRunUrlWithUtmParams = computed(() => props.cloudRunUrl && getUrlWithP
 <style scoped>
 #limit-row li:not(:first-child)::before {
  content: '•';
-  @apply text-lg text-gray-500 pr-8px
+  @apply text-lg text-gray-500 pr-[8px] leading-5
 }
 </style>
--- a/packages/app/src/debug/DebugSpecList.vue
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    data-cy="debug-spec-list"
-    class="flex flex-col gap-24px self-stretch"
+    class="flex flex-col gap-[24px] self-stretch"
  >
    <TransitionGroupQuickFade>
      <DebugSpec
--- a/packages/app/src/debug/DebugTestingProgress.vue
+++ b/packages/app/src/debug/DebugTestingProgress.vue
@@ -3,7 +3,7 @@
    data-cy="debug-testing-progress"
    class="border rounded border-gray-100 relative overflow-hidden"
  >
-    <div class="flex text-md py-14px px-16px text-gray-900">
+    <div class="flex text-md py-[14px] px-[16px] text-gray-900">
      <div
        data-cy="title"
        class="font-medium"
@@ -24,10 +24,10 @@
        />
      </div>
    </div>
-    <div class=" bg-gray-50 h-4px w-full bottom-0 absolute">
+    <div class=" bg-gray-50 h-[4px] w-full bottom-0 absolute">
      <div
        data-cy="progress"
-        class=" bg-indigo-600 h-4px transition-all duration-500"
+        class=" bg-indigo-600 h-[4px] transition-all duration-500"
        :style="{ width: specCompletion + '%'}"
      />
    </div>
@@ -116,6 +116,6 @@ watch([() => {
 <style scoped>
 .before-dot:before {
  content: '•';
-  @apply text-gray-400 px-8px
+  @apply text-gray-400 px-[8px]
 }
 </style>
--- a/packages/app/src/debug/DebugTimedout.vue
+++ b/packages/app/src/debug/DebugTimedout.vue
@@ -3,7 +3,7 @@
    :title="t('debugPage.incomplete')"
    status="warning"
    :icon="ErrorOutlineIcon"
-    class="flex flex-col mb-24px w-full"
+    class="flex flex-col mb-[24px] w-full"
  >
    {{ t('debugPage.theRunStartedButNeverCompleted') }}
    <span v-if="ci && hasCiInfo">
@@ -17,7 +17,7 @@
      </i18n-t>
    </span>
    {{ t('debugPage.archiveThisRun') }}
-    <div class="mt-20px">
+    <div class="mt-[20px]">
      {{ t('debugPage.specsSkipped', {n: totalSpecs, totalSkippedSpecs}) }}
    </div>
  </Alert>
--- a/packages/app/src/debug/GroupedDebugFailedTest.cy.tsx
+++ b/packages/app/src/debug/GroupedDebugFailedTest.cy.tsx
@@ -74,7 +74,7 @@ describe('<GroupedDebugFailedTest/>', () => {
    cy.get('body').realHover({ position: 'topLeft' })

    cy.mount(() => (
-      <div class='p-24px'>
+      <div class='p-[24px]'>
        <GroupedDebugFailedTest groups={groups} failedTests={testResult} />
      </div>
    ))
--- a/packages/app/src/debug/GroupedDebugFailedTest.vue
+++ b/packages/app/src/debug/GroupedDebugFailedTest.vue
@@ -3,7 +3,7 @@
    <div
      v-for="(group, j) in props.groups"
      :key="j"
-      class="flex flex-col flex-start w-full pl-16px justify-center grouped-row-class hover:bg-gray-50"
+      class="flex flex-col flex-start w-full pl-[16px] justify-center grouped-row-class hover:bg-gray-50"
      data-cy="grouped-row"
    >
      <div
@@ -17,7 +17,7 @@
        />
        <div
          data-cy="debug-artifacts"
-          class="flex flex-grow space-x-4.5 opacity-0 px-18px justify-end grouped-row-artifacts"
+          class="flex grow space-x-4.5 opacity-0 px-[18px] justify-end grouped-row-artifacts"
        >
          <div
            v-for="artifact, l in debugArtifacts[group.id]"
--- a/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
+++ b/packages/app/src/debug/LayeredBrowserIcons.cy.tsx
@@ -7,7 +7,7 @@ describe('<LayeredBrowserIcons/>', () => {
  it('mounts correctly for single browser', () => {
    browsers.forEach((ele) => {
      cy.mount(() => (
-        <div class='bg-gray-50 p-24px'>
+        <div class='bg-gray-50 p-[24px]'>
          <LayeredBrowserIcons browsers={[ele]}/>
        </div>
      ))
@@ -18,7 +18,7 @@ describe('<LayeredBrowserIcons/>', () => {

  it('mounts correctly for multiple browsers', () => {
    cy.mount(() => (
-      <div class='bg-gray-50 p-24px'>
+      <div class='bg-gray-50 p-[24px]'>
        <LayeredBrowserIcons browsers={browsers} />
        <LayeredBrowserIcons browsers={['CHROME', 'FIREFOX', 'EDGE']}/>
        <LayeredBrowserIcons browsers={['CHROME-CANARY', 'WEBKIT', 'ELECTRON']} />
--- a/packages/app/src/debug/LayeredBrowserIcons.vue
+++ b/packages/app/src/debug/LayeredBrowserIcons.vue
@@ -1,12 +1,12 @@
 <template>
  <ul
    data-cy="layered-browser-icons"
-    class="flex mr-8px pl-8px"
+    class="flex mr-[8px] pl-[8px]"
  >
    <li
      v-for="(result, i) in results"
      :key="i"
-      class="rounded-full rounded flex h-5 -ml-8px w-5 items-center justify-center"
+      class="rounded-full rounded flex h-5 ml-[-8px] w-5 items-center justify-center"
      :class="(results.length > 1 ? 'bg-gray-50' : '')"
    >
      <component
--- a/packages/app/src/debug/StatsMetadata.vue
+++ b/packages/app/src/debug/StatsMetadata.vue
@@ -31,7 +31,7 @@
      >
        <component
          :is="result.icon"
-          class="mr-8px text-gray-500"
+          class="mr-[8px] text-gray-500"
          stroke-color="gray-500"
          fill-color="gray-100"
          :data-cy="`${result.name} ${result.value}`"
@@ -199,6 +199,6 @@ const ORDER_MAP = computed<Record<StatType, Metadata>>(() => {
 <style scoped>
 .stats-metadata-class li:not(:first-child)::before {
  content: '.';
-  @apply -mt-8px text-lg text-gray-400 pr-8px
+  @apply mt-[-8px] text-lg text-gray-400 pr-[8px]
 }
 </style>
--- a/packages/app/src/debug/empty/DebugEmptyView.vue
+++ b/packages/app/src/debug/empty/DebugEmptyView.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="flex flex-col mx-auto my-45px max-w-680px items-center">
+  <div class="flex flex-col mx-auto my-[45px] max-w-[680px] items-center">
    <div class="flex flex-col items-center justify-evenly">
      <div><i-cy-box-open_x48 class="icon-dark-gray-500 icon-light-indigo-100" /></div>
-      <div class="flex flex-col mt-25px mb-20px max-w-640px items-center">
-        <div class="font-medium my-5px text-center text-gray-900 text-18px">
+      <div class="flex flex-col gap-1 my-6 max-w-[640px] items-center">
+        <div class="font-medium text-center text-gray-900 text-lg">
          {{ title }}
        </div>
-        <div class="font-normal my-5px text-center leading-relaxed text-16px text-gray-600">
+        <div class="font-normal text-center leading-relaxed text-gray-600">
          {{ description }}
          <span
            v-if="helpLinkHref"
-            class="ml-4px"
+            class="ml-[4px]"
          >
            <ExternalLink
              :href="helpLink"
@@ -32,7 +32,7 @@
      v-if="step !== undefined && steps"
      v-model="step"
      :steps="steps"
-      class="my-40px w-full"
+      class="my-[40px] w-full"
      @slideshow-complete="saveSlideshowComplete"
    />
  </div>
--- a/packages/app/src/debug/empty/DebugError.vue
+++ b/packages/app/src/debug/empty/DebugError.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-25px">
+  <div class="m-[25px]">
    <Alert
      data-cy="debug-alert"
      status="warning"
--- a/packages/app/src/debug/empty/DebugLoading.vue
+++ b/packages/app/src/debug/empty/DebugLoading.vue
@@ -1,80 +1,80 @@
 <template>
  <div
    data-cy="debug-loading"
-    class="p-30px"
+    class="p-[30px]"
  >
    <div>
      <div class="flex items-center">
-        <div class="rounded-full bg-gray-50 h-16px w-344px" />
+        <div class="rounded-full bg-gray-50 h-[16px] w-[344px]" />
        <DebugLoadingDivider />
-        <div class="rounded-full bg-gray-50 h-8px ml-8px w-120px" />
+        <div class="rounded-full bg-gray-50 h-[8px] ml-[8px] w-[120px]" />
      </div>

-      <div class="flex mt-15px items-center">
-        <div class="rounded-full bg-gray-50 h-16px w-72px" />
-        <div class="rounded-full bg-gray-50 h-16px ml-8px w-160px" />
-        <div class="rounded-full bg-gray-50 h-16px ml-8px w-72px" />
+      <div class="flex mt-[15px] items-center">
+        <div class="rounded-full bg-gray-50 h-[16px] w-[72px]" />
+        <div class="rounded-full bg-gray-50 h-[16px] ml-[8px] w-[160px]" />
+        <div class="rounded-full bg-gray-50 h-[16px] ml-[8px] w-[72px]" />
        <template
          v-for="n in 4"
          :key="n"
        >
          <DebugLoadingDivider />
-          <div class="rounded-full bg-gray-50 h-8px ml-8px w-80px" />
+          <div class="rounded-full bg-gray-50 h-[8px] ml-[8px] w-[80px]" />
        </template>
      </div>
    </div>
-    <div class="mt-24px">
+    <div class="mt-[24px]">
      <DebugTestLoadingContainer
        width-class="w-full"
        dot-class="icon-light-gray-50"
-        :rows="[['w-200px', 'w-200px'], ['w-200px', 'w-200px'], ['w-200px', 'w-200px']]"
+        :rows="[['w-[200px]', 'w-[200px]'], ['w-[200px]', 'w-[200px]'], ['w-[200px]', 'w-[200px]']]"
      >
        <template #header>
          <div class="flex items center justify-between">
            <div>
              <div class="flex items-center">
                <i-cy-dot-solid_x4 class="icon-light-gray-100" />
-                <div class="rounded-full bg-gray-100 h-16px ml-8px w-200px" />
+                <div class="rounded-full bg-gray-100 h-[16px] ml-[8px] w-[200px]" />
              </div>
-              <div class="flex mt-20px items-center">
-                <div class="rounded-full bg-gray-100 h-8px w-180px" />
+              <div class="flex mt-[20px] items-center">
+                <div class="rounded-full bg-gray-100 h-[8px] w-[180px]" />
                <DebugLoadingDivider />

-                <div class="rounded-full bg-gray-100 h-8px ml-8px w-99px" />
+                <div class="rounded-full bg-gray-100 h-[8px] ml-[8px] w-[99px]" />
                <DebugLoadingDivider />
-                <div class="rounded-full bg-gray-100 h-8px ml-8px w-99px" />
+                <div class="rounded-full bg-gray-100 h-[8px] ml-[8px] w-[99px]" />
              </div>
            </div>
-            <div class="mt-12px">
-              <div class="rounded-full bg-gray-100 h-20px w-120px" />
+            <div class="mt-[12px]">
+              <div class="rounded-full bg-gray-100 h-[20px] w-[120px]" />
            </div>
          </div>
        </template>
      </DebugTestLoadingContainer>
    </div>
-    <div class="mt-24px">
+    <div class="mt-[24px]">
      <DebugTestLoadingContainer
        width-class="w-full"
        dot-class="icon-light-gray-50"
-        :rows="[['w-200px', 'w-200px'], ['w-200px', 'w-200px']]"
+        :rows="[['w-[200px]', 'w-[200px]'], ['w-[200px]', 'w-[200px]']]"
      >
        <template #header>
          <div class="flex items center justify-between">
            <div>
              <div class="flex items-center">
                <i-cy-dot-solid_x4 class="icon-light-gray-100" />
-                <div class="rounded-full bg-gray-100 h-16px ml-8px w-200px" />
+                <div class="rounded-full bg-gray-100 h-[16px] ml-[8px] w-[200px]" />
              </div>
-              <div class="flex mt-20px items-center">
-                <div class="rounded-full bg-gray-100 h-8px w-180px" />
+              <div class="flex mt-[20px] items-center">
+                <div class="rounded-full bg-gray-100 h-[8px] w-[180px]" />
                <DebugLoadingDivider />
-                <div class="rounded-full bg-gray-100 h-8px ml-8px w-99px" />
+                <div class="rounded-full bg-gray-100 h-[8px] ml-[8px] w-[99px]" />
                <DebugLoadingDivider />
-                <div class="rounded-full bg-gray-100 h-8px ml-8px w-99px" />
+                <div class="rounded-full bg-gray-100 h-[8px] ml-[8px] w-[99px]" />
              </div>
            </div>
-            <div class="mt-12px">
-              <div class="rounded-full bg-gray-100 h-20px w-120px" />
+            <div class="mt-[12px]">
+              <div class="rounded-full bg-gray-100 h-[20px] w-[120px]" />
            </div>
          </div>
        </template>
--- a/packages/app/src/debug/empty/DebugLoadingDivider.vue
+++ b/packages/app/src/debug/empty/DebugLoadingDivider.vue
@@ -1,3 +1,3 @@
 <template>
-  <div class="rounded-full font-semibold bg-gray-100 h-2px ml-8px w-2px" />
+  <div class="rounded-full font-semibold bg-gray-100 h-[2px] ml-[8px] w-[2px]" />
 </template>
--- a/packages/app/src/debug/empty/DebugSkeleton.vue
+++ b/packages/app/src/debug/empty/DebugSkeleton.vue
@@ -10,12 +10,12 @@
    >
      <template #header>
        <div class="flex justify-between">
-          <div class="bg-white border rounded-md flex border-gray-100 py-4px px-8px text-14px text-gray-700 gap-8px items-center">
-            <i-cy-status-failed_x12 class="h-12px w-12px" />
+          <div class="bg-white border rounded-md flex border-gray-100 py-[4px] px-[8px] text-[14px] text-gray-700 gap-[8px] items-center">
+            <i-cy-status-failed_x12 class="h-[12px] w-[12px]" />
            <span>-</span>
            <div
              v-if="exampleTestName"
-              class="border-l border-gray-100 pl-8px"
+              class="border-l border-gray-100 pl-[8px]"
            >
              {{ exampleTestName }}
            </div>
@@ -49,8 +49,8 @@ defineProps<{
 }>()

 const loadingRows = [
-  ['w-40px', 'w-[40%]'],
-  ['w-40px', 'w-[50%]'],
-  ['w-40px', 'w-[65%]'],
+  ['w-[40px]', 'w-[40%]'],
+  ['w-[40px]', 'w-[50%]'],
+  ['w-[40px]', 'w-[65%]'],
 ]
 </script>
--- a/packages/app/src/debug/empty/DebugSlide.vue
+++ b/packages/app/src/debug/empty/DebugSlide.vue
@@ -1,22 +1,22 @@
 <template>
  <div
-    class="w-680px"
+    class="w-[680px]"
    data-cy="debug-slideshow-slide"
  >
    <img
      :src="img"
      :alt="t('debugPage.emptyStates.slideshow.imgAlt')"
    >
-    <div class="rounded-b-md bg-purple-500 text-white p-16px">
+    <div class="rounded-b-md bg-purple-500 text-white p-[16px]">
      <h2 class="font-semibold">
        {{ title }}
      </h2>
-      <p class="text-white text-sm mb-16px text-opacity-70">
+      <p class="text-white text-sm mb-[16px] text-opacity-70">
        {{ description }}
      </p>
      <div class="flex justify-between">
        <span data-cy="debug-slideshow-step">{{ step }}/{{ totalSteps -1 }}</span>
-        <div class="flex gap-8px">
+        <div class="flex gap-[8px]">
          <Button
            v-if="step > 1"
            variant="outline"
@@ -39,7 +39,7 @@
          <Button
            v-else
            variant="outline"
-            class="w-80px slide-override"
+            class="w-[80px] slide-override"
            @click="incrementStep"
          >
            {{ t('debugPage.emptyStates.slideshow.controls.done') }}
--- a/packages/app/src/debug/empty/DebugTestLoadingContainer.vue
+++ b/packages/app/src/debug/empty/DebugTestLoadingContainer.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="border-t border-l border-r rounded-t-md bg-gray-50 border-0 border-gray-100 p-16px"
+    class="border-t border-l border-r rounded-t-md bg-gray-50 border-0 border-gray-100 p-[16px]"
    :class="widthClass"
  >
    <slot name="header" />
@@ -8,27 +8,27 @@
  <div
    v-for="(row, i) in rows"
    :key="i"
-    class="bg-white border flex border-b-0 border-gray-100 p-16px items-center overflow-hidden last:border-b last:rounded-b-md"
+    class="bg-white border flex border-b-0 border-gray-100 p-[16px] items-center overflow-hidden last:border-b last:rounded-b-md"
    :class="widthClass"
  >
    <div>
      <i-cy-dot-solid_x4 :class="dotClass" />
    </div>
    <div
-      class="ml-10px"
+      class="ml-[10px]"
      :class="row[0]"
    >
-      <div class="rounded-full bg-gray-50 h-16px w-full" />
+      <div class="rounded-full bg-gray-50 h-[16px] w-full" />
    </div>
-    <div class="ml-10px">
+    <div class="ml-[10px]">
      <i-cy-chevron-right_x16 class="icon-dark-gray-200" />
    </div>
    <div
-      class="ml-10px"
+      class="ml-[10px]"
      :class="row[1]"
    >
      <div
-        class="rounded-full bg-gray-50 h-16px w-full"
+        class="rounded-full bg-gray-50 h-[16px] w-full"
      />
    </div>
  </div>
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="h-screen min-w-728px grid grid-cols-[auto,1fr]"
+    class="h-screen min-w-[728px] grid grid-cols-[auto,1fr]"
    :class="{
      'grid-rows-[64px,1fr]': showHeader
    }"
@@ -18,7 +18,7 @@
    />
    <div
      v-if="query.data.value?.baseError || query.data.value?.currentProject?.isLoadingConfigFile || query.data.value?.currentProject?.isLoadingNodeEvents"
-      class="bg-white h-full w-full pt-100px top-0 right-0 left-0 z-10 absolute overflow-scroll"
+      class="bg-white h-full w-full pt-[100px] top-0 right-0 left-0 z-10 absolute overflow-scroll"
    >
      <BaseError
        v-if="query.data.value?.baseError"
--- a/packages/app/src/main.ts
+++ b/packages/app/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import './main.scss'
-import 'virtual:windi.css'
+import 'tailwindcss/tailwind.css'
 import urql from '@urql/vue'
 import App from './App.vue'
 import { makeUrqlClient } from '@packages/frontend-shared/src/graphql/urqlClient'
--- a/packages/app/src/navigation/KeyboardBindingsModal.vue
+++ b/packages/app/src/navigation/KeyboardBindingsModal.vue
@@ -8,19 +8,19 @@
    :no-help="true"
    @update:model-value="emits('close')"
  >
-    <ul class="m-24px w-384px">
+    <ul class="m-[24px] w-[384px]">
      <li
        v-for="binding in keyBindings"
        :key="binding.key.join('-')"
-        class="flex h-24px my-16px items-center"
+        class="flex h-[24px] my-[16px] items-center"
      >
-        <p class="flex-grow text-gray-700 text-16px leading-24px">
+        <p class="grow text-gray-700 text-[16px] leading-[24px]">
          {{ binding.description }}
        </p>
        <span
          v-for="key in binding.key"
          :key="key"
-          class="border rounded-sm bg-gray-50 border-gray-100 h-24px text-center ml-8px text-indigo-500 text-14px leading-20px w-24px inline-block"
+          class="border rounded-sm bg-gray-50 border-gray-100 h-[24px] text-center ml-[8px] text-indigo-500 text-[14px] leading-[20px] w-[24px] inline-block"
        >
          {{ key }}
        </span>
--- a/packages/app/src/navigation/SidebarNavigation.cy.tsx
+++ b/packages/app/src/navigation/SidebarNavigation.cy.tsx
@@ -41,7 +41,7 @@ function mountComponent (props: { initialNavExpandedVal?: boolean, cloudProject?

      return (
        <div>
-          <div class={[withDefaults.initialNavExpandedVal ? 'w-248px' : 'w-64px', 'transition-all', 'h-screen', 'grid', 'grid-rows-1']}>
+          <div class={[withDefaults.initialNavExpandedVal ? 'w-[248px]' : 'w-[64px]', 'transition-all', 'h-screen', 'grid', 'grid-rows-1']}>
            <SidebarNavigation gql={gql} isLoading={withDefaults.isLoading} online={withDefaults.online}/>
          </div>
        </div>
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -2,12 +2,12 @@
  <HideDuringScreenshot
    id="sidebar"
    data-cy="sidebar"
-    class="flex flex-col bg-gray-1000 border-gray-900 border-r-1 transition-all duration-300 relative"
-    :class="isNavBarExpanded ? 'w-248px' : 'w-64px'"
+    class="flex flex-col bg-gray-1000 border-gray-900 border-r transition-all duration-300 relative"
+    :class="isNavBarExpanded ? 'w-[248px]' : 'w-[64px]'"
  >
    <button
      v-if="navIsAlwaysCollapsed"
-      class="cursor-pointer left-full top-0 bottom-0 w-16px z-1 absolute group hocus:outline-transparent"
+      class="cursor-pointer left-full top-0 bottom-0 w-[16px] z-1 absolute group hocus:outline-transparent"
      type="button"
      :aria-label="isNavBarExpanded ? t('sidebar.toggleLabel.expanded') : t('sidebar.toggleLabel.collapsed')"
      data-cy="toggle-sidebar"
@@ -17,11 +17,11 @@
    >
      <div
        data-cy="sidebar-nav-indicator"
-        class="flex h-full transform origin-left transition-transform w-16px scale-x-0 duration-300 items-center group-hocus:scale-x-100"
+        class="flex h-full transform origin-left transition-transform w-[16px] scale-x-0 duration-300 items-center group-hocus:scale-x-100"
      >
-        <div class="h-full bg-indigo-400 w-3px" />
+        <div class="h-full bg-indigo-400 w-[3px]" />
        <i-cy-chevron-right_x16
-          class="h-16px w-16px icon-dark-indigo-400"
+          class="h-[16px] w-[16px] icon-dark-indigo-400"
          :class="isNavBarExpanded ? 'transform rotate-180': ''"
        />
      </div>
@@ -62,15 +62,15 @@
          data-cy="keyboard-modal-trigger"
          type="button"
          class="border border-transparent rounded
-              cursor-pointer h-32px m-16px
-              p-7px transform transition-all
-              right-0 bottom-0 w-32px duration-300
+              cursor-pointer h-[32px] m-[16px]
+              p-[7px] transform transition-all
+              right-0 bottom-0 w-[32px] duration-300
              inline-block absolute hover:border-gray-500"
-          :class="{ '-translate-y-48px': !isNavBarExpanded }"
+          :class="{ 'translate-y-[-48px]': !isNavBarExpanded }"
          :aria-label="t('sidebar.keyboardShortcuts.title')"
          @click="bindingsOpen = true"
        >
-          <i-cy-command-key_x16 class="h-16px w-16px icon-dark-gray-500" />
+          <i-cy-command-key_x16 class="h-[16px] w-[16px] icon-dark-gray-500" />
        </button>
        <template #popper>
          {{ t('sidebar.keyboardShortcuts.title') }}
@@ -82,7 +82,7 @@
      />
      <img
        :src="CypressLogo"
-        class="h-32px m-16px w-32px"
+        class="h-[32px] m-[16px] w-[32px]"
        alt="Cypress"
      >
    </div>
--- a/packages/app/src/navigation/SidebarNavigationHeader.cy.tsx
+++ b/packages/app/src/navigation/SidebarNavigationHeader.cy.tsx
@@ -4,7 +4,7 @@ import { SidebarNavigationHeaderFragmentDoc } from '../generated/graphql-test'
 describe('SidebarNavigationHeader', () => {
  it('renders e2e icon', () => {
    cy.mountFragment(SidebarNavigationHeaderFragmentDoc, {
-      render: (gql) => <div class="p-16px"><SidebarNavigationHeader gql={gql} isNavBarExpanded /></div>,
+      render: (gql) => <div class="p-[16px]"><SidebarNavigationHeader gql={gql} isNavBarExpanded /></div>,
    })

    cy.get('[data-cy="testing-type-e2e"]').should('exist')
@@ -21,7 +21,7 @@ describe('SidebarNavigationHeader', () => {

        res.currentProject.currentTestingType = 'component'
      },
-      render: (gql) => <div class="p-16px"><SidebarNavigationHeader gql={gql} isNavBarExpanded /></div>,
+      render: (gql) => <div class="p-[16px]"><SidebarNavigationHeader gql={gql} isNavBarExpanded /></div>,
    })

    cy.get('[data-cy="testing-type-component"]').should('exist')
--- a/packages/app/src/navigation/SidebarNavigationHeader.vue
+++ b/packages/app/src/navigation/SidebarNavigationHeader.vue
@@ -8,9 +8,9 @@
    <div
      role="button"
      :aria-label="`${props.gql.currentProject?.title ?? 'Cypress'} - ${t('testingType.modalTitle')}`"
-      class="border-b cursor-pointer flex border-gray-900 flex-shrink-0 h-64px pl-20px transition-all duration-300 items-center hover:bg-gray-900"
+      class="border-b cursor-pointer flex border-gray-900 shrink-0 h-[64px] pl-[20px] transition-all duration-300 items-center hover:bg-gray-900"
      :popper-top-offset="4"
-      popper-class="h-56px"
+      popper-class="h-[56px]"
      data-cy="sidebar-header"
      tabindex="0"
      @click="showModal = true"
@@ -24,23 +24,23 @@
      <component
        :is="testingType.icon"
        class="
-            flex-shrink-0 h-24px
-            mr-20px w-24px
+            shrink-0 h-[24px]
+            mr-[20px] w-[24px]
            icon-dark-jade-600 icon-light-jade-300
            children:transition
            children:duration-300"
      />
-      <div class="text-gray-50 text-size-16px leading-24px truncate">
+      <div class="text-gray-50 text-[16px] leading-[24px] truncate">
        {{ props.gql.currentProject?.title ?? 'Cypress' }}
-        <p class="text-gray-600 text-size-14px leading-20px truncate">
+        <p class="text-gray-600 text-[14px] leading-[20px] truncate">
          {{ props.gql.currentProject?.branch }}
        </p>
      </div>
    </div>
    <template #popper>
-      <div class="text-left text-gray-50 text-size-16px leading-16px truncate">
+      <div class="text-left text-gray-50 text-[16px] leading-[16px] truncate">
        {{ props.gql.currentProject?.title ?? 'Cypress' }}
-        <p class="text-gray-600 text-size-14px leading-20px truncate">
+        <p class="text-gray-600 text-[14px] leading-[20px] truncate">
          {{ props.gql.currentProject?.branch }}
        </p>
      </div>
--- a/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
+++ b/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
@@ -11,7 +11,7 @@ describe('SidebarNavigationRow', () => {
  it('renders something', () => {
    cy.mount(() => (<div>
      <div
-        class="space-y-4 bg-gray-900 h-500px w-256px resize-x overflow-auto"
+        class="space-y-4 bg-gray-900 h-[500px] w-[256px] resize-x overflow-auto"
      >
        <h2 class="text-white text-sm uppercase truncate">Tab Style</h2>
        <SidebarNavigationRow icon={IconTechnologyCodeEditor} name="book" active isNavBarExpanded/>
--- a/packages/app/src/navigation/SidebarNavigationRow.vue
+++ b/packages/app/src/navigation/SidebarNavigationRow.vue
@@ -5,19 +5,20 @@
    :distance="8"
  >
    <div
-      :class="active
-        ? 'before:(bg-indigo-300 scale-x-100 transition-colors) cursor-default'
-        : 'before:(scale-x-0 transition-transform bg-gray-300)'"
      class="rounded-md flex
-        h-40px
-        my-16px
+        h-[40px]
+        my-[16px]
        w-full
-        min-w-40px
+        min-w-[40px]
        relative
        items-center
        group
        focus-visible:outline-none
-        before:(rounded-r-md h-40px mr-4px text-transparent transform origin-left w-4px duration-300 content-open-square) hover:before:scale-x-100 "
+        before:rounded-r-md before:h-[40px] before:mr-[4px] before:text-transparent before:transform before:origin-left
+        before:w-[4px] before:shrink-0 before:duration-300 before:content-open-square hover:before:scale-x-100"
+      :class="active
+        ? 'before:bg-indigo-300 before:scale-x-100 before:transition-colors cursor-default'
+        : 'before:scale-x-0 before:transition-transform before:bg-gray-300'"
      :data-selected="active"
    >
      <component
@@ -26,7 +27,7 @@
        size="24"
        stroke-color="indigo-300"
        fill-color="indigo-700"
-        class="flex-shrink-0 h-24px m-12px w-24px children:transition children:duration-300"
+        class="shrink-0 h-[24px] m-[12px] w-[24px] children:transition children:duration-300"
      />
      <component
        :is="icon"
@@ -39,11 +40,11 @@
        focus-stroke-color="gray-300"
        focus-fill-color="gray-800"
        interactive-colors-on-group
-        class="flex-shrink-0 h-24px m-12px w-24px children:transition children:duration-300"
+        class="shrink-0 h-[24px] m-[12px] w-[24px] children:transition children:duration-300"
      />
      <span
        :class="[active ? 'text-indigo-300' : 'text-gray-500 group-hocus:text-gray-300']"
-        class="ml-8px transition-colors duration-300 truncate"
+        class="ml-[8px] transition-colors duration-300 truncate"
      >
        {{ name }}
      </span>
@@ -51,7 +52,7 @@
        v-if="badge"
        data-cy="debug-badge"
        :aria-label="badge.label"
-        class="rounded-md font-medium text-white p-4px transition-opacity z-1"
+        class="font-medium text-white transition-opacity rounded-md z-1"
        :class="[badgeVariant, badgeColorStyles[badge.status], {'opacity-0': transitioning}]"
      >
        {{ badge.value }}
@@ -86,16 +87,16 @@ const badgeVariant = computed(() => {
  const classes: string[] = []

  if (props.isNavBarExpanded) {
-    classes.push('ml-16px', 'h-20px', 'text-sm', 'leading-3')
+    classes.push('ml-[16px]', 'h-[20px]', 'text-sm', 'leading-3', 'p-[4px]')
  } else {
-    classes.push('absolute', 'outline-gray-1000', 'outline-2px', 'outline', 'bottom-0', 'text-xs', 'h-16px', 'leading-2')
+    classes.push('absolute', 'outline-gray-1000', 'outline-[2px]', 'outline', 'bottom-0', 'text-xs', 'h-[16px]', 'leading-2', 'px-[4px]')

    // Keep failure count from overflowing sidebar (#25662)
    if (props.badge && (props.badge.status === 'failed' || props.badge.status === 'error') && props.badge.value.length >= 3) {
-      classes.push('right-4px')
+      classes.push('right-[4px]')
    } else {
      // Anything else should left-align and overflow sidebar if needed
-      classes.push('left-36px')
+      classes.push('left-[36px]')
    }
  }

--- a/packages/app/src/navigation/SwitchTestingTypeModal.vue
+++ b/packages/app/src/navigation/SwitchTestingTypeModal.vue
@@ -1,6 +1,6 @@
 <template>
  <StandardModal
-    class="transition-all transition duration-200"
+    class="transition-all duration-200"
    variant="bare"
    :title="t('testingType.modalTitle')"
    help-link="https://on.cypress.io/choosing-testing-type"
--- a/packages/app/src/pages/Runs.vue
+++ b/packages/app/src/pages/Runs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full p-24px relative">
+  <div class="h-full p-[24px] relative">
    <TransitionQuickFade mode="out-in">
      <RunsSkeleton v-if="query.fetching.value || !query.data.value" />
      <RunsContainer
--- a/packages/app/src/pages/[...all].vue
+++ b/packages/app/src/pages/[...all].vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="rounded-md mx-auto border-1 mt-20 text-center p-20px w-400px">
+  <div class="rounded-md mx-auto border mt-20 text-center p-[20px] w-[400px]">
    <h1 class="text-2xl">
      You seem to have gotten lost...
    </h1>
    <p class="text-gray-600">
      Try one of these links instead
    </p>
-    <nav class="space-y-2 mt-40px">
+    <nav class="space-y-2 mt-[40px]">
      <li
        v-for="route in routes"
        :key="route.path"
-        class="text-left text-indigo-700 underline underline-2 underline-offset-1 underline-indigo-700 hover:text-indigo-500 hover:underline-indigo-500"
+        class="text-left text-indigo-700 underline decoration-2 underline-offset-1 decoration-indigo-700 hover:text-indigo-500 hover:decoration-indigo-500"
      >
        <RouterLink :to="route.path">
          {{ route.name }}
--- a/packages/app/src/runner/ResizablePanels.cy.tsx
+++ b/packages/app/src/runner/ResizablePanels.cy.tsx
@@ -24,7 +24,7 @@ const dragHandleToClientX = (panel: DraggablePanel, x: number) => {
 const slotContents = {
  panel1: () => <div class="h-full bg-emerald-100">panel1</div>,
  panel2: () => <div class="h-full bg-purple-300">panel2</div>,
-  panel3: () => <div class="flex-grow h-full bg-indigo-100">panel3</div>,
+  panel3: () => <div class="grow h-full bg-indigo-100">panel3</div>,
 }

 describe('<ResizablePanels />', { viewportWidth: 1500, defaultCommandTimeout: 4000 }, () => {
@@ -109,8 +109,8 @@ describe('<ResizablePanels />', { viewportWidth: 1500, defaultCommandTimeout: 40
    it('handles being offset by some distance on the left', () => {
      cy.mount(() => (
        <div class="flex">
-          <div class='bg-green-600 text-white w-100px'> 100px wide sidebar</div>
-          <div class="flex-grow h-screen">
+          <div class='bg-green-600 text-white w-[100px]'> 100px wide sidebar</div>
+          <div class="grow h-screen">
            <ResizablePanels
              maxTotalWidth={1500}
              v-slots={slotContents}
--- a/packages/app/src/runner/ResizablePanels.vue
+++ b/packages/app/src/runner/ResizablePanels.vue
@@ -12,7 +12,7 @@
    <div
      v-show="showPanel1"
      data-cy="specs-list-panel"
-      class="h-full flex-shrink-0 z-20 relative"
+      class="h-full shrink-0 z-20 relative"
      :style="{width: `${panel1Width}px`}"
    >
      <slot
@@ -22,7 +22,7 @@

      <div
        data-cy="panel1ResizeHandle"
-        class="cursor-ew-resize h-full top-0 -right-6px w-10px z-30 absolute"
+        class="cursor-ew-resize h-full top-0 right-[-6px] w-[10px] z-30 absolute"
        @mousedown="handleMousedown('panel1', $event)"
      />
    </div>
@@ -30,21 +30,21 @@
    <div
      v-show="showPanel2"
      data-cy="reporter-panel"
-      class="h-full flex-shrink-0 z-10 relative"
+      class="h-full shrink-0 z-10 relative"
      :style="{width: `${panel2Width}px`}"
    >
      <slot name="panel2" />

      <div
        data-cy="panel2ResizeHandle"
-        class="cursor-ew-resize h-full top-0 -right-6px w-10px z-30 absolute"
+        class="cursor-ew-resize h-full top-0 right-[-6px] w-[10px] z-30 absolute"
        @mousedown="handleMousedown('panel2', $event)"
      />
    </div>

    <div
      data-cy="aut-panel"
-      class="flex-grow h-full bg-gray-100 relative"
+      class="grow h-full bg-gray-100 relative"
      :class="{'pointer-events-none':panel2IsDragging}"
      :style="{
        width: `${panel3width}px`
--- a/packages/app/src/runner/ScriptError.vue
+++ b/packages/app/src/runner/ScriptError.vue
@@ -1,6 +1,6 @@
 <template>
  <pre
-    class="bg-white text-sm p-24px text-red-500 overflow-auto whitespace-pre-wrap break-all"
+    class="bg-white text-sm p-[24px] text-red-500 overflow-auto whitespace-pre-wrap break-all"
    :style="style"
    v-html="scriptError"
  />
--- a/packages/app/src/runner/SnapshotControls.vue
+++ b/packages/app/src/runner/SnapshotControls.vue
@@ -6,12 +6,12 @@
  >
    <div class="flex justify-center">
      <div
-        class="rounded flex bg-gray-1000 shadow min-h-40px py-4px px-8px text-gray-600 gap-4px items-center"
+        class="rounded flex bg-gray-1000 shadow min-h-[40px] py-[4px] px-[8px] text-gray-600 gap-[4px] items-center"
      >
        <i-cy-object-pin_x16 class="icon-dark-purple-400 icon-light-purple-800" />
        <span
          v-if="snapshotStore.messageTitle"
-          class="rounded min-h-24px p-4px text-14px text-gray-600 capitalize block"
+          class="rounded min-h-[24px] p-[4px] text-[14px] text-gray-600 capitalize block"
        >{{ snapshotStore.messageTitle }}</span>

        <SnapshotToggle
@@ -29,7 +29,7 @@

        <button
          v-if="shouldShowStateControls || shouldShowHighlightControls"
-          class="border-transparent rounded outline-none bg-gray-900 border-1 my-1 mr-2px transition duration-150 hocus:border-purple-300 "
+          class="border-transparent rounded outline-none bg-gray-900 border my-1 mr-[2px] transition duration-150 hocus:border-purple-300 "
          style="padding: 3px"
          @click="unpin"
        >
--- a/packages/app/src/runner/SnapshotHighlightControls.vue
+++ b/packages/app/src/runner/SnapshotHighlightControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded flex font-medium bg-gray-900 py-2px px-12px text-gray-200 text-14px leading-20px gap-8px items-center">
+  <div class="rounded flex font-medium bg-gray-900 py-[2px] px-[12px] text-gray-200 text-[14px] leading-[20px] gap-[8px] items-center">
    <Switch
      name="toggle-highlights"
      :value="props.value"
--- a/packages/app/src/runner/SnapshotToggle.vue
+++ b/packages/app/src/runner/SnapshotToggle.vue
@@ -1,13 +1,13 @@
 <template>
  <div
-    class="rounded font-medium text-14px overflow-hidden children:leading-20px"
+    class="rounded font-medium text-[14px] overflow-hidden children:leading-[20px]"
    data-cy="snapshot-toggle"
  >
    <button
      v-for="message, idx in messages"
      :key="message.id"
      :data-cy-active-snapshot-toggle="idx === activeIndex ? 'true' : undefined"
-      class="border-transparent font-medium outline-none border-1 my-1 transition duration-150 hocus:border-purple-300"
+      class="border-transparent font-medium outline-none border my-1 transition duration-150 hocus:border-purple-300"
      style="padding: 1px 12px;"
      :class="{
        'rounded-l': idx === 0,
--- a/packages/app/src/runner/SpecRunnerDropdown.vue
+++ b/packages/app/src/runner/SpecRunnerDropdown.vue
@@ -1,11 +1,11 @@
 <template>
  <Popover
    :key="`${props.disabled}`"
-    class="bg-white rounded border-1px border-gray-100 h-32px relative"
+    class="bg-white rounded border-[1px] border-gray-100 h-[32px] relative"
    #="{ open, close }"
  >
    <PopoverButton
-      class="border-transparent rounded flex-grow h-full border-1px px-12px group"
+      class="border-transparent rounded grow h-full border-[1px] px-[12px] group"
      :class="{
        'hocus-default': !props.disabled,
        'opacity-50 cursor-auto': props.disabled,
@@ -13,7 +13,7 @@
      :disabled="props.disabled"
    >
      <div
-        class="flex gap-8px items-center"
+        class="flex gap-[8px] items-center"
        :class="{
          'group-hocus:text-indigo-600': !props.disabled,
          'text-indigo-600': open,
@@ -26,7 +26,7 @@
          :close="close"
        />
        <i-cy-chevron-down
-          class="transform transition-all w-10px duration-300"
+          class="transform transition-all w-[10px] duration-300"
          :class="{
            'group-hocus:icon-dark-indigo-500': !props.disabled,
            'icon-dark-gray-200': !open,
@@ -38,7 +38,7 @@
    <TransitionQuickFade>
      <PopoverPanel
        static
-        class="bg-white rounded shadow-dropdown top-36px z-10 absolute"
+        class="bg-white rounded shadow-dropdown top-[36px] z-10 absolute"
        :class="{'hidden': !open, 'right-0': align === 'right', 'left-0': align === 'left'}"
      >
        <ul
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -2,13 +2,13 @@
  <div
    id="spec-runner-header"
    ref="autHeaderEl"
-    class="min-h-64px text-14px"
+    class="min-h-[64px] text-[14px]"
  >
-    <div class="flex flex-wrap flex-grow p-16px gap-12px justify-end">
+    <div class="flex flex-wrap grow p-[16px] gap-[12px] justify-end">
      <div
        v-if="props.gql.currentTestingType === 'e2e'"
        data-cy="aut-url"
-        class="border rounded flex flex-grow border-gray-100 border-1px h-32px overflow-hidden align-middle"
+        class="border rounded flex grow border-gray-100 h-[32px] overflow-hidden align-middle"
        :class="{
          'bg-gray-50': autStore.isLoadingUrl
        }"
@@ -16,7 +16,7 @@
        <Button
          data-cy="playground-activator"
          :disabled="isDisabled"
-          class="rounded-none border-gray-100 border-r-1px mr-12px"
+          class="rounded-none border-gray-100 border-r-[1px] mr-[12px]"
          variant="text"
          :aria-label="t('runner.selectorPlayground.toggle')"
          @click="togglePlayground"
@@ -28,7 +28,7 @@
          target="_blank"
          :value="studioStore.needsUrl ? urlInProgress : autUrl"
          data-cy="aut-url-input"
-          class="flex flex-grow mr-12px leading-normal max-w-100% text-indigo-500 z-51 self-center hocus-link-default truncate"
+          class="flex grow mr-[12px] leading-normal max-w-full text-indigo-500 z-51 self-center hocus-link-default truncate"
          @input="setStudioUrl"
          @click="openInNewTab"
          @keyup.enter="visitUrl"
@@ -44,12 +44,12 @@

      <div
        v-else
-        class="flex-grow"
+        class="grow"
      >
        <Button
          data-cy="playground-activator"
          :disabled="isDisabled"
-          class="border-gray-100 mr-12px"
+          class="border-gray-100 mr-[12px]"
          variant="outline"
          :aria-label="t('runner.selectorPlayground.toggle')"
          @click="togglePlayground"
@@ -64,7 +64,7 @@
      >
        <template #heading>
          <img
-            class="min-w-16px w-16px"
+            class="min-w-[16px] w-[16px]"
            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
            :alt="selectedBrowser.displayName"
          >
@@ -72,7 +72,7 @@
        </template>

        <template #default>
-          <div class="max-h-50vh overflow-auto">
+          <div class="max-h-[50vh] overflow-auto">
            <VerticalBrowserListItems
              :gql="props.gql"
              :spec-path="activeSpecPath"
@@ -89,17 +89,17 @@
          <span class="whitespace-nowrap">{{ autStore.viewportWidth }}x{{ autStore.viewportHeight }}</span>
          <span
            v-if="displayScale"
-            class="-ml-6px text-gray-500"
+            class="ml-[-6px] text-gray-500"
          >
            ({{ displayScale }})
          </span>
        </template>
        <template #default>
-          <div class="max-h-50vw p-24px pt-5 text-gray-700 leading-5 w-346px overflow-auto">
+          <div class="max-h-50vw p-[24px] pt-5 text-gray-700 leading-5 w-[346px] overflow-auto">
            <i18n-t
              tag="p"
              keypath="runner.viewportTooltip.infoText"
-              class="mb-24px"
+              class="mb-[24px]"
            >
              <strong class="font-bold">{{ autStore.defaultViewportWidth }}px</strong>
              <strong class="font-bold">{{ autStore.defaultViewportHeight }}px</strong>
@@ -109,7 +109,7 @@
            <i18n-t
              tag="p"
              keypath="runner.viewportTooltip.configText"
-              class="mb-24px"
+              class="mb-[24px]"
            >
              <template #configFile>
                <!-- disable rule to prevent trailing space from being added to <InlineCodeFragment/> content -->
@@ -153,7 +153,7 @@
      dismissible
    >
      <template #title>
-        <i-cy-book_x16 class="pr-2px inline-block icon-dark-indigo-500 icon-light-indigo-200" />
+        <i-cy-book_x16 class="pr-[2px] inline-block icon-dark-indigo-500 icon-light-indigo-200" />
        <ExternalLink href="https://on.cypress.io/styling-components">
          {{ t('runner.header.reviewDocs') }}
        </ExternalLink>
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
@@ -2,25 +2,25 @@
  <div
    id="spec-runner-header"
    ref="autHeaderEl"
-    class="min-h-64px px-16px text-14px"
+    class="min-h-[64px] px-[16px] text-[14px]"
  >
    <!-- this is similar to the Open Mode header but it's not interactive, so can be a lot smaller-->
-    <div class="flex flex-grow flex-wrap py-16px gap-12px justify-end">
+    <div class="flex grow flex-wrap py-[16px] gap-[12px] justify-end">
      <div
        v-if="testingType === 'e2e'"
        data-cy="aut-url"
-        class="border rounded flex flex-grow border-1px border-gray-100 h-32px align-middle overflow-hidden"
+        class="border rounded flex grow border-[1px] border-gray-100 h-[32px] align-middle overflow-hidden"
        :class="{
          'bg-gray-50': autStore.isLoadingUrl
        }"
      >
-        <div class="mx-12px max-w-100% grid text-gray-600 items-center truncate">
+        <div class="mx-[12px] max-w-full grid text-gray-600 items-center truncate">
          {{ autStore.url }}
        </div>
      </div>
      <div
        v-else
-        class="flex-grow"
+        class="grow"
      >
        <!-- spacer -->
      </div>
@@ -31,7 +31,7 @@
        <template #heading>
          <img
            v-if="selectedBrowser.displayName"
-            class="min-w-16px w-16px"
+            class="min-w-[16px] w-[16px]"
            alt=""
            :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
          > {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
@@ -46,7 +46,7 @@
          <span class="whitespace-nowrap">{{ autStore.viewportWidth }}x{{ autStore.viewportHeight }}</span>
          <span
            v-if="displayScale"
-            class="-mr-6px text-gray-500"
+            class="mr-[-6px] text-gray-500"
          >({{ displayScale }})</span>
        </template>
      </SpecRunnerDropdown>
--- a/packages/app/src/runner/SpecRunnerOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerOpenMode.vue
@@ -39,7 +39,7 @@
          v-if="props.gql.currentProject"
          v-show="runnerUiStore.isSpecsListOpen"
          id="inline-spec-list"
-          class="h-full bg-gray-1000 border-gray-900 border-r-1 force-dark"
+          class="h-full bg-gray-1000 border-gray-900 border-r force-dark"
          :class="{'pointer-events-none': isDragging}"
        >
          <InlineSpecList
@@ -77,7 +77,7 @@
        </HideDuringScreenshot>

        <RemoveClassesDuringScreenshotting
-          class="h-0 p-16px"
+          class="h-0 p-[16px]"
        >
          <ScriptError
            v-if="autStore.scriptError"
--- a/packages/app/src/runner/SpecRunnerRunMode.vue
+++ b/packages/app/src/runner/SpecRunnerRunMode.vue
@@ -42,7 +42,7 @@
          />
        </HideDuringScreenshot>
        <RemoveClassesDuringScreenshotting
-          class="h-0 p-16px"
+          class="h-0 p-[16px]"
        >
          <ScriptError
            v-if="autStore.scriptError"
--- a/packages/app/src/runner/automation/AutInfo.vue
+++ b/packages/app/src/runner/automation/AutInfo.vue
@@ -1,10 +1,10 @@
 <template>
  <div
-    class="flex flex-col p-32px gap-16px items-center"
+    class="flex flex-col p-[32px] gap-[16px] items-center"
    :style="{width: `${windowWidth}px`}"
  >
    <img
-      class="h-64px w-64px"
+      class="h-[64px] w-[64px]"
      src="../../../../frontend-shared/src/assets/logos/cypress-dark.png"
    >
    <slot />
--- a/packages/app/src/runner/automation/AutomationDisconnected.vue
+++ b/packages/app/src/runner/automation/AutomationDisconnected.vue
@@ -5,9 +5,9 @@
      status="warning"
      :icon="ErrorOutlineIcon"
      :dismissible="false"
-      class="w-full max-w-600px"
+      class="w-full max-w-[600px]"
    >
-      <div class="flex flex-col gap-16px">
+      <div class="flex flex-col gap-[16px]">
        <p>
          {{ t('runner.automation.disconnected.description') }}
        </p>
@@ -20,10 +20,10 @@
          {{ t('runner.automation.disconnected.reload') }}
        </Button>
        <ExternalLink
-          class="mt-16px text-indigo-500"
+          class="mt-[16px] text-indigo-500"
          href="https://on.cypress.io/launching-browsers"
        >
-          <i-cy-book_x16 class="ml-8px -top-2px relative inline-block icon-dark-indigo-500 icon-light-indigo-100" />
+          <i-cy-book_x16 class="ml-[8px] -top-[2px] relative inline-block icon-dark-indigo-500 icon-light-indigo-100" />
          {{ t('runner.automation.shared.link') }}
        </ExternalLink>
      </div>
--- a/packages/app/src/runner/automation/AutomationMissing.vue
+++ b/packages/app/src/runner/automation/AutomationMissing.vue
@@ -6,9 +6,9 @@
      :icon="ErrorOutlineIcon"
      :dismissible="false"
      :overflow="false"
-      class="w-full max-w-600px"
+      class="w-full max-w-[600px]"
    >
-      <div class="flex flex-col gap-16px">
+      <div class="flex flex-col gap-[16px]">
        <p>
          {{ t('runner.automation.missing.description') }}
        </p>
@@ -20,14 +20,14 @@
        >
          <template #heading>
            <img
-              class="min-w-16px w-16px"
+              class="min-w-[16px] w-[16px]"
              :src="allBrowsersIcons[selectedBrowser.displayName] || allBrowsersIcons.generic"
            >
            {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
          </template>

          <template #default>
-            <div class="max-h-50vh overflow-auto">
+            <div class="max-h-[50vh] overflow-auto">
              <VerticalBrowserListItems
                :gql="props.gql"
              />
@@ -35,10 +35,10 @@
          </template>
        </SpecRunnerDropdown>
        <ExternalLink
-          class="mt-16px text-indigo-500"
+          class="mt-[16px] text-indigo-500"
          href="https://on.cypress.io/launching-browsers"
        >
-          <i-cy-book_x16 class="ml-8px -top-2px relative inline-block icon-dark-indigo-500 icon-light-indigo-100" />
+          <i-cy-book_x16 class="ml-[8px] -top-[2px] relative inline-block icon-dark-indigo-500 icon-light-indigo-100" />
          {{ t('runner.automation.shared.link') }}
        </ExternalLink>
      </div>
--- a/packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx
+++ b/packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx
@@ -12,7 +12,7 @@ describe('SelectorPlayground', () => {
    return {
      autIframe,
      element: cy.mount(() => (
-        <div class="py-64px">
+        <div class="py-[64px]">
          <SelectorPlayground
            eventManager={eventManager}
            getAutIframe={() => autIframe}
--- a/packages/app/src/runner/selector-playground/SelectorPlayground.vue
+++ b/packages/app/src/runner/selector-playground/SelectorPlayground.vue
@@ -1,14 +1,14 @@
 <template>
  <div
    id="selector-playground"
-    class="border-t border-b bg-gray-50 border-gray-200 h-56px grid py-12px px-16px gap-12px grid-cols-[40px,1fr,auto] items-center "
+    class="border-t border-b bg-gray-50 border-gray-200 h-[56px] grid py-[12px] px-[16px] gap-[12px] grid-cols-[40px,1fr,auto] items-center "
  >
    <SelectorPlaygroundTooltip
      :hover-text="t('runner.selectorPlayground.playgroundTooltip')"
      class="flex h-full"
    >
      <button
-        class="border rounded-md flex h-full outline-none border-gray-200 text-white transition w-40px duration-150 items-center justify-center hocus-default"
+        class="border rounded-md flex h-full outline-none border-gray-200 text-white transition w-[40px] duration-150 items-center justify-center hocus-default"
        data-cy="playground-toggle"
        @click="toggleEnabled"
      >
@@ -22,7 +22,7 @@
      <Menu #="{ open }">
        <MenuButton
          :aria-label="t('runner.selectorPlayground.selectorMethodsLabel')"
-          class="border border-r-transparent rounded-l-md flex h-full outline-none border-gray-200 text-white w-40px items-center justify-center hocus-default"
+          class="border border-r-transparent rounded-l-md flex h-full outline-none border-gray-200 text-white w-[40px] items-center justify-center hocus-default"
          @click.stop
        >
          <i-cy-chevron-down-small_x16
@@ -31,7 +31,7 @@
          />
        </MenuButton>
        <MenuItems
-          class="rounded flex flex-col outline-transparent bg-gray-900 text-white top-34px z-40 absolute overflow-scroll"
+          class="rounded flex flex-col outline-transparent bg-gray-900 text-white top-[34px] z-40 absolute overflow-scroll"
        >
          <MenuItem
            v-for="method in methods"
@@ -40,7 +40,7 @@
          >
            <button
              :class="{ 'bg-gray-700': active }"
-              class="border-b border-b-gray-800 text-left py-8px px-16px"
+              class="border-b border-b-gray-800 text-left py-[8px] px-[16px]"
              @click="selectorPlaygroundStore.setMethod(method.value)"
            >
              {{ method.display }}
@@ -49,11 +49,11 @@
        </MenuItems>
      </Menu>
      <code
-        class="flex-1 py-2px pr-2px pl-0 relative overflow-hidden"
+        class="flex-1 py-[2px] pr-[2px] pl-0 relative overflow-hidden"
        :style="{height: 'calc(100% + 4px)'}"
      >
        <span
-          class="flex pl-12px inset-y-0 text-gray-600 absolute items-center pointer-events-none"
+          class="flex pl-[12px] inset-y-0 text-gray-600 absolute items-center pointer-events-none"
          data-cy="selected-playground-method"
        >
          <span class="text-gray-800">cy</span>.<span class="text-purple-500">{{ selectorPlaygroundStore.method }}</span>(‘
@@ -77,7 +77,7 @@
        >’)</span>
        <div
          ref="match"
-          class="bg-white border-l flex font-sans border-l-gray-200 my-6px px-16px inset-y-0 right-3px text-gray-600 absolute items-center"
+          class="bg-white border-l flex font-sans border-l-gray-200 my-[6px] px-[16px] inset-y-0 right-[3px] text-gray-600 absolute items-center"
          data-cy="playground-num-elements"
        >
          <template v-if="!selectorPlaygroundStore.isValid">
@@ -90,7 +90,7 @@
      </code>
    </div>

-    <div class="flex gap-12px">
+    <div class="flex gap-[12px]">
      <SelectorPlaygroundTooltip
        :hover-text="t('runner.selectorPlayground.copyTooltip')"
        :click-text="t('runner.selectorPlayground.copyTooltipAction')"
@@ -229,9 +229,6 @@ const copyToClipboard = () => {
 </script>

 <style scoped lang="scss">
-#selector-playground {
-  height: 40px;
-}
 button.override-border {
  @apply border-gray-200
 }
--- a/packages/app/src/runner/studio/StudioInstructionsModal.vue
+++ b/packages/app/src/runner/studio/StudioInstructionsModal.vue
@@ -11,31 +11,29 @@
      {{ t('runner.studio.studio') }} {{ t('versions.beta') }}
    </template>

-    <div class="max-w-2xl py-7 px-15 text-gray-900">
-      <div class="text-center">
+    <div class="max-w-2xl p-6 text-gray-900">
+      <p class="mb-1">
        {{ t('runner.studio.studioDetailedDescription') }}
-      </div>
+      </p>

-      <div class="flex mt-3 justify-center">
-        <ul>
-          <li>
-            <pre>.check()</pre>
-          </li>
-          <li>
-            <pre>.click()</pre>
-          </li>
-          <li>
-            <pre>.select()</pre>
-          </li>
-          <li>
-            <pre>.type()</pre>
-          </li>
-          <li>
-            <pre>.uncheck()</pre>
-          </li>
-        </ul>
-      </div>
-      <div class="my-3 text-center">
+      <ul class="mb-1">
+        <li>
+          <pre>.check()</pre>
+        </li>
+        <li>
+          <pre>.click()</pre>
+        </li>
+        <li>
+          <pre>.select()</pre>
+        </li>
+        <li>
+          <pre>.type()</pre>
+        </li>
+        <li>
+          <pre>.uncheck()</pre>
+        </li>
+      </ul>
+      <p>
        {{ t('runner.studio.experimentalMessage') }}
        <i18n-t
          scope="global"
@@ -47,7 +45,7 @@
            target="_blank"
          >{{ t('runner.studio.feedbackLink') }}</a>
        </i18n-t>
-      </div>
+      </p>
    </div>
  </StandardModal>
 </template>
--- a/packages/app/src/runner/studio/StudioUrlPrompt.vue
+++ b/packages/app/src/runner/studio/StudioUrlPrompt.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    cy-data="studio-url-prompt"
-    class="border rounded-md flex flex-col h-fit bg-gray-1000 border-gray-200 w-fit py-4 px-3 top-16 left-15 text-gray-200 z-51 studio-url-container absolute"
+    class="border rounded-md flex flex-col h-fit bg-gray-1000 border-gray-200 w-fit py-4 px-3 top-16 left-16 text-gray-200 z-51 studio-url-container absolute"
  >
    <div class="text-center">
      <span>{{ t('runner.studio.enterValidUrl') }}</span>
@@ -28,7 +28,7 @@
  </div>
  <div
    cy-data="studio-url-overlay"
-    class="bg-black h-full w-full opacity-35 top-0 right-0 bottom-0 left-0 z-50 fixed"
+    class="bg-black h-full w-full opacity-[.35] top-0 right-0 bottom-0 left-0 z-50 fixed"
  />
 </template>

--- a/packages/app/src/runs/RunCard.vue
+++ b/packages/app/src/runs/RunCard.vue
@@ -15,16 +15,16 @@
        />
      </template>
      <template #header>
-        <span class="font-semibold mr-8px whitespace-pre-wrap">{{ run.commitInfo?.summary }}</span>
+        <span class="font-semibold mr-[8px] whitespace-pre-wrap">{{ run.commitInfo?.summary }}</span>
        <span
          v-for="tag in tags"
          :key="tag"
-          class="rounded-md font-semibold border-gray-200 border-1px text-xs mr-8px px-4px text-gray-700"
+          class="rounded-md font-semibold border-gray-200 border-[1px] text-xs mr-[8px] px-[4px] text-gray-700"
          data-cy="run-tag"
        >{{ tag }}</span>
      </template>
      <template #description>
-        <ul class="flex flex-wrap text-sm text-gray-700 gap-8px items-center whitespace-nowrap children:flex children:items-center">
+        <ul class="flex flex-wrap text-sm text-gray-700 gap-[8px] items-center whitespace-nowrap children:flex children:items-center">
          <li
            v-if="run.commitInfo?.authorName"
            data-cy="run-card-author"
@@ -141,6 +141,6 @@ const tags = computed(() => {
 <style scoped>
 li:not(:first-child)::before {
  content: '•';
-  @apply text-lg text-gray-400 pr-8px
+  @apply text-lg text-gray-400 pr-[8px]
 }
 </style>
--- a/packages/app/src/runs/RunResults.vue
+++ b/packages/app/src/runs/RunResults.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex gap-8px items-center">
+  <div class="flex gap-[8px] items-center">
    <span
      v-if="props.gql.totalFlakyTests"
-      class="rounded-md font-semibold bg-warning-100 text-sm py-2px px-4px text-warning-600 whitespace-nowrap"
+      class="rounded-md font-semibold bg-warning-100 text-sm py-[2px] px-[4px] text-warning-600 whitespace-nowrap"
    >{{ props.gql.totalFlakyTests }} Flaky</span>
    <ResultCounts
      :total-failed="props.gql.totalFailed"
--- a/packages/app/src/runs/RunsConnect.vue
+++ b/packages/app/src/runs/RunsConnect.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="flex flex-col h-full mx-auto text-center max-w-714px justify-center">
-    <h2 class="mb-40px text-18px text-gray-900">
+  <div class="flex flex-col h-full mx-auto text-center max-w-[714px] justify-center">
+    <h2 class="mb-[40px] text-[18px] text-gray-900">
      {{ t("runs.connect.title") }}
    </h2>
-    <div class="flex gap-32px">
+    <div class="flex gap-[32px]">
      <div
        v-for="(block, i) in notions"
        :key="i"
      >
        <component
          :is="block.icon"
-          class="mx-auto h-120px w-120px"
+          class="mx-auto h-[120px] w-[120px]"
        />
-        <p class="h-48px mt-8px text-gray-600">
+        <p class="h-[48px] mt-[8px] text-gray-600">
          {{ block.description }}
        </p>
      </div>
    </div>
    <CloudConnectButton
      utm-medium="Runs Tab"
-      class="mx-auto mt-40px"
+      class="mx-auto mt-[40px]"
    />
  </div>
 </template>
--- a/packages/app/src/runs/RunsConnectSuccessAlert.vue
+++ b/packages/app/src/runs/RunsConnectSuccessAlert.vue
@@ -2,12 +2,12 @@
  <Alert
    v-model="showAlert"
    status="success"
-    class="mb-24px"
+    class="mb-[24px]"
    dismissible
    :title="t('runs.connectSuccessAlert.title')"
  >
-    <p class="flex px-16px pt-16px leading-24px md:items-center">
-      <i-cy-arrow-outline-right_x16 class="h-16px mr-8px w-16px inline align-middle icon-dark-jade-500 mt-4px md:mt-0" />
+    <p class="flex px-[16px] pt-[16px] leading-[24px] md:items-center">
+      <i-cy-arrow-outline-right_x16 class="h-[16px] mr-[8px] w-[16px] inline align-middle icon-dark-jade-500 mt-[4px] md:mt-0" />
      <span>
        <i18n-t
          scope="global"
@@ -22,8 +22,8 @@
        </i18n-t>
      </span>
    </p>
-    <p class="flex px-16px pt-16px pb-16px leading-24px md:items-center">
-      <i-cy-arrow-outline-right_x16 class="h-16px mr-8px w-16px inline align-middle icon-dark-jade-500 mt-4px md:mt-0" />
+    <p class="flex px-[16px] pt-[16px] pb-[16px] leading-[24px] md:items-center">
+      <i-cy-arrow-outline-right_x16 class="h-[16px] mr-[8px] w-[16px] inline align-middle icon-dark-jade-500 mt-[4px] md:mt-0" />
      <span>
        <i18n-t
          scope="global"
--- a/packages/app/src/runs/RunsContainer.vue
+++ b/packages/app/src/runs/RunsContainer.vue
@@ -6,7 +6,7 @@
    <RunsConnectSuccessAlert
      v-if="currentProject && showConnectSuccessAlert"
      :gql="currentProject"
-      :class="{ 'absolute left-24px right-24px top-24px': currentProject?.cloudProject?.__typename === 'CloudProject' && !currentProject.cloudProject.runs?.nodes.length }"
+      :class="{ 'absolute left-[24px] right-[24px] top-[24px]': currentProject?.cloudProject?.__typename === 'CloudProject' && !currentProject.cloudProject.runs?.nodes.length }"
    />
    <RunsConnect
      v-if="!currentProject?.projectId || !cloudViewer?.id"
@@ -22,14 +22,14 @@
    <div
      v-else
      data-cy="runs"
-      class="flex flex-col pb-24px gap-16px"
+      class="flex flex-col pb-[24px] gap-[16px]"
    >
      <Warning
        v-if="!online"
        :title="t('launchpadErrors.noInternet.header')"
        :message="t('launchpadErrors.noInternet.message')"
        :dismissible="false"
-        class="mx-auto mb-24px"
+        class="mx-auto mb-[24px]"
      />
      <RunCard
        v-for="run of currentProject?.cloudProject?.runs?.nodes"
--- a/packages/app/src/runs/RunsEmpty.vue
+++ b/packages/app/src/runs/RunsEmpty.vue
@@ -1,13 +1,13 @@
 <template>
  <div
    data-cy="no-runs"
-    class="flex flex-col mx-auto min-h-full max-w-688px leading-24px items-center justify-center"
+    class="flex flex-col mx-auto min-h-full max-w-[688px] leading-[24px] items-center justify-center"
  >
-    <i-cy-dashboard-checkmark_x48 class="h-48px w-48px icon-dark-gray-500 icon-light-gray-100" />
-    <h2 class="mt-32px mb-8px text-gray-900 text-18px">
+    <i-cy-dashboard-checkmark_x48 class="h-[48px] w-[48px] icon-dark-gray-500 icon-light-gray-100" />
+    <h2 class="mt-[32px] mb-[8px] text-gray-900 text-[18px]">
      {{ t("runs.empty.title") }}
    </h2>
-    <p class="h-48px mb-8px text-gray-600">
+    <p class="h-[48px] mb-[8px] text-gray-600">
      {{ t("runs.empty.description") }}
    </p>
    <RecordPromptAdapter class="w-full" />
--- a/packages/app/src/runs/RunsError.vue
+++ b/packages/app/src/runs/RunsError.vue
@@ -2,16 +2,16 @@
  <div class="flex flex-col h-full text-center justify-center items-center">
    <i-cy-locked-project_x48
      v-if="icon === 'access'"
-      class="h-48px w-48px icon-dark-gray-500 icon-light-gray-100 icon-dark-secondary-jade-400 icon-light-secondary-jade-200"
+      class="h-[48px] w-[48px] icon-dark-gray-500 icon-light-gray-100 icon-dark-secondary-jade-400 icon-light-secondary-jade-200"
    />
    <i-cy-dashboard-fail_x48
      v-if="icon === 'error'"
-      class="h-48px w-48px icon-dark-gray-500 icon-light-gray-100 icon-dark-secondary-red-500 icon-light-secondary-red-300"
+      class="h-[48px] w-[48px] icon-dark-gray-500 icon-light-gray-100 icon-dark-secondary-red-500 icon-light-secondary-red-300"
    />
-    <h2 class="mt-24px mb-4px text-gray-900 text-18px leading-24px w-640px">
+    <h2 class="mt-[24px] mb-[4px] text-gray-900 text-[18px] leading-[24px] w-[640px]">
      {{ message }}
    </h2>
-    <p class="mb-24px text-gray-600 text-16px leading-24px w-672px">
+    <p class="mb-[24px] text-gray-600 text-[16px] leading-[24px] w-[672px]">
      <slot />
    </p>
    <Button
--- a/packages/app/src/runs/RunsSkeleton.vue
+++ b/packages/app/src/runs/RunsSkeleton.vue
@@ -12,23 +12,23 @@
        class="border border-gray-100"
      >
        <template #icon>
-          <div class="h-20px w-20px bg-gray-100 rounded-xl mx-2px" />
+          <div class="h-[20px] w-[20px] bg-gray-100 rounded-xl mx-[2px]" />
        </template>
        <template #header>
-          <div class="w-256px rounded-xl h-16px bg-gray-50 my-4px" />
+          <div class="w-[256px] rounded-xl h-[16px] bg-gray-50 my-[4px]" />
        </template>
        <template #description>
          <div
            v-for="j in 4"
            :key="j"
-            class="rounded-lg h-8px bg-gray-50 mr-20px inline-block"
-            :class="j === 4 ? 'w-64px' : 'w-80px'"
+            class="rounded-lg h-[8px] bg-gray-50 mr-[20px] inline-block"
+            :class="j === 4 ? 'w-[64px]' : 'w-[80px]'"
          />
        </template>
        <template #right>
          <div
            v-if="i >= 2"
-            class="rounded-lg h-16px bg-gray-50 w-216px"
+            class="rounded-lg h-[16px] bg-gray-50 w-[216px]"
          />
        </template>
      </ListRowHeader>
--- a/packages/app/src/settings/SettingsCard.cy.tsx
+++ b/packages/app/src/settings/SettingsCard.cy.tsx
@@ -11,7 +11,7 @@ describe('<SettingsCard />', () => {
    const contentSelector = '[data-testid=content]'

    cy.mount(() => (
-      <div class="p-24px">
+      <div class="p-[24px]">
        <SettingsCard title={title} description={description} icon={IconLaptop} maxHeight="800px">
          <div data-testid="content">
            <p>The body of the content</p>
@@ -48,7 +48,7 @@ describe('<SettingsCard />', () => {
    const description2 = 'Lorem ipsum dolor sit amet'

    cy.mount(() => (
-      <div class="flex flex-col p-24px gap-24px">
+      <div class="flex flex-col p-[24px] gap-[24px]">
        <SettingsCard title={title} description={description} icon={IconLaptop} maxHeight="800px">
          <div data-testid="content">
            <p>The body of the content</p>
--- a/packages/app/src/settings/SettingsCard.vue
+++ b/packages/app/src/settings/SettingsCard.vue
@@ -15,7 +15,7 @@
        <template #icon>
          <component
            :is="icon"
-            class="h-24px w-24px icon-dark-indigo-500 icon-light-indigo-200"
+            class="h-[24px] w-[24px] icon-dark-indigo-500 icon-light-indigo-200"
          />
        </template>
        <template #header>
@@ -27,14 +27,14 @@
        <template #right>
          <i-cy-chevron-down
            :class="{ 'rotate-180': open }"
-            class="max-w-16px transform transition duration-250 icon-dark-gray-300"
+            class="max-w-[16px] transform transition duration-250 icon-dark-gray-300"
          />
        </template>
      </ListRowHeader>
    </template>
    <div
      data-cy="setting-expanded-container"
-      class="divide-y space-y-32px divide-gray-100 p-24px children:pt-24px first:first:pt-0"
+      class="divide-y space-y-[32px] divide-gray-100 p-[24px] children:pt-[24px] first:first:pt-0"
    >
      <slot />
    </div>
--- a/packages/app/src/settings/SettingsContainer.vue
+++ b/packages/app/src/settings/SettingsContainer.vue
@@ -1,9 +1,9 @@
 <template>
  <div
-    class="space-y-32px h-[calc(100vh-64px)] p-32px overflow-auto"
+    class="space-y-[32px] h-[calc(100vh-[64px])] p-[32px] overflow-auto"
    data-cy="settings"
  >
-    <div class="space-y-24px">
+    <div class="space-y-[24px]">
      <SettingsCard
        :title="t('settingsPage.project.title')"
        :description="t('settingsPage.project.description')"
@@ -35,7 +35,7 @@
      </SettingsCard>
    </div>
    <hr class="border-gray-100">
-    <p class="mx-auto font-light text-center text-gray-500 max-w-500px text-16px leading-24px">
+    <p class="mx-auto font-light text-center text-gray-500 max-w-[500px] text-[16px] leading-[24px]">
      {{ footerText }}
    </p>
    <Button
--- a/packages/app/src/settings/SettingsSection.cy.tsx
+++ b/packages/app/src/settings/SettingsSection.cy.tsx
@@ -12,7 +12,7 @@ describe('<SettingsSection />', () => {
    }
    const code = 'projectId'

-    cy.mount(() => (<div class="p-24px">
+    cy.mount(() => (<div class="p-[24px]">
      <SettingsSection
        v-slots={slots}
        code={code}
--- a/packages/app/src/settings/SettingsSection.vue
+++ b/packages/app/src/settings/SettingsSection.vue
@@ -1,15 +1,15 @@
 <template>
  <section>
-    <h2 class="font-medium text-size-16px text-gray-900 leading-24px inline-flex items-baseline align-middle">
+    <h2 class="font-medium text-[16px] text-gray-900 leading-[24px] inline-flex items-baseline align-middle">
      <slot name="title" />
      <code
        v-if="code"
-        class="rounded font-normal bg-gray-50 h-20px mx-8px px-4px text-size-14px text-purple-500 leading-24px"
+        class="rounded font-normal bg-gray-50 h-[20px] mx-[8px] px-[4px] text-[14px] text-purple-500 leading-[24px]"
      >
        {{ code }}
      </code>
    </h2>
-    <p class="text-sm mb-16px text-gray-600">
+    <p class="text-sm mb-[16px] text-gray-600">
      <slot name="description" />
    </p>
    <slot />
--- a/packages/app/src/settings/device/ProxySettings.cy.tsx
+++ b/packages/app/src/settings/device/ProxySettings.cy.tsx
@@ -12,7 +12,7 @@ describe('<ProxySettings />', {
        ctx.localSettings.preferences.proxyServer = 'proxy-server'
        ctx.localSettings.preferences.proxyBypass = 'proxy-bypass'
      },
-      render: (gql) => <div class="p-24px"><ProxySettings gql={gql} /></div>,
+      render: (gql) => <div class="p-[24px]"><ProxySettings gql={gql} /></div>,
    })

    cy.findByText('Proxy bypass list')
@@ -28,7 +28,7 @@ describe('<ProxySettings />', {
    const proxySection = defaultMessages.settingsPage.proxy

    cy.mountFragment(ProxySettingsFragmentDoc, {
-      render: (gql) => <div class="p-24px"><ProxySettings gql={gql} /></div>,
+      render: (gql) => <div class="p-[24px]"><ProxySettings gql={gql} /></div>,
    })

    cy.findByText(proxySection.description).should('be.visible')
@@ -37,7 +37,7 @@ describe('<ProxySettings />', {

  it('renders empty', () => {
    cy.mountFragment(ProxySettingsFragmentDoc, {
-      render: (gql) => <div class="p-24px"><ProxySettings gql={gql} /></div>,
+      render: (gql) => <div class="p-[24px]"><ProxySettings gql={gql} /></div>,
    })

    cy.findByText('Proxy bypass list')
--- a/packages/app/src/settings/device/ProxySettings.vue
+++ b/packages/app/src/settings/device/ProxySettings.vue
@@ -6,7 +6,7 @@
    <template #description>
      {{ t('settingsPage.proxy.description') }}
    </template>
-    <div class="rounded bg-gray-50 border-1 border-gray-100 grid py-18px px-20px text-14px w-364px gap-12px">
+    <div class="rounded bg-gray-50 border border-gray-100 grid py-[18px] px-[20px] text-[14px] w-[364px] gap-[12px]">
      <div class="flex justify-between">
        <span class="font-medium text-gray-800">{{ t('settingsPage.proxy.proxyServer') }}</span>
        <span
--- a/packages/app/src/settings/device/TestingPreferences.cy.tsx
+++ b/packages/app/src/settings/device/TestingPreferences.cy.tsx
@@ -5,7 +5,7 @@ import TestingPreferences from './TestingPreferences.vue'
 describe('<TestingPreferences />', () => {
  it('renders', () => {
    cy.mountFragment(TestingPreferencesFragmentDoc, {
-      render: (gql) => (<div class="p-24px">
+      render: (gql) => (<div class="p-[24px]">
        <TestingPreferences gql={gql} />
      </div>),
    })
@@ -17,7 +17,7 @@ describe('<TestingPreferences />', () => {
    const testingPreferences = defaultMessages.settingsPage.testingPreferences

    cy.mountFragment(TestingPreferencesFragmentDoc, {
-      render: (gql) => (<div class="p-24px">
+      render: (gql) => (<div class="p-[24px]">
        <TestingPreferences gql={gql} />
      </div>),
    })
@@ -33,7 +33,7 @@ describe('<TestingPreferences />', () => {
          ctx.localSettings.preferences.autoScrollingEnabled = false
        }
      },
-      render: (gql) => (<div class="p-24px">
+      render: (gql) => (<div class="p-[24px]">
        <TestingPreferences gql={gql} />
      </div>),
    })
--- a/packages/app/src/settings/device/TestingPreferences.vue
+++ b/packages/app/src/settings/device/TestingPreferences.vue
@@ -7,19 +7,19 @@
      {{ t('settingsPage.testingPreferences.description') }}
    </template>
    <div
-      class="divide-y border rounded divide-gray-200 border-gray-100 px-16px"
+      class="divide-y border rounded divide-gray-200 border-gray-100 px-[16px]"
    >
-      <div class="py-16px">
-        <h4 class="flex text-gray-800 text-size-16px leading-24px items-center">
+      <div class="py-[16px]">
+        <h4 class="flex text-gray-800 text-[16px] leading-[24px] items-center">
          <label :for="autoScrollingPreference.id">{{ autoScrollingPreference.title }}</label>
          <Switch
-            class="mx-8px"
+            class="mx-[8px]"
            :value="props.gql.localSettings.preferences[autoScrollingPreference.id] ?? false"
            :name="autoScrollingPreference.id"
            @update="(value) => updatePref(value)"
          />
        </h4>
-        <p class="text-size-14px text-gray-600 leading-24px">
+        <p class="text-[14px] text-gray-600 leading-[24px]">
          {{ autoScrollingPreference.description }}
        </p>
      </div>
--- a/packages/app/src/settings/project/CloudSettings.cy.tsx
+++ b/packages/app/src/settings/project/CloudSettings.cy.tsx
@@ -8,7 +8,7 @@ describe('<CloudSettings />', () => {

      render: (gqlVal) => {
        return (
-          <div class="py-4 px-8 children:py-24px">
+          <div class="py-4 px-8 children:py-[24px]">
            <CloudSettings gql={gqlVal}/>
          </div>
        )
@@ -31,7 +31,7 @@ describe('<CloudSettings />', () => {
      },
      render: (gqlVal) => {
        return (
-          <div class="py-4 px-8 children:py-24px">
+          <div class="py-4 px-8 children:py-[24px]">
            <CloudSettings gql={gqlVal}/>
          </div>
        )
@@ -55,7 +55,7 @@ describe('<CloudSettings />', () => {
      },
      render: (gqlVal) => {
        return (
-          <div class="py-4 px-8 children:py-24px">
+          <div class="py-4 px-8 children:py-[24px]">
            <CloudSettings gql={gqlVal}/>
          </div>
        )
--- a/packages/app/src/settings/project/CodeBox.vue
+++ b/packages/app/src/settings/project/CodeBox.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="bg-gray-50 flex items-center w-400px h-32px pr-16px border rounded border-gray-100 text-jade-500 relative">
+  <div class="bg-gray-50 flex items-center w-[400px] h-[32px] pr-[16px] border rounded border-gray-100 text-jade-500 relative">
    <component
      :is="prefixIcon"
-      class="h-16px w-16px icon-dark-gray-500 mx-8px"
+      class="h-[16px] w-[16px] icon-dark-gray-500 mx-[8px]"
    />
    <button
      v-if="confidential"
-      class="absolute right-8px focus:outline-transparent"
+      class="absolute right-[8px] focus:outline-transparent"
      @click="localConfidential = !localConfidential"
    >
      <i-cy-eye-open_x16
@@ -22,7 +22,7 @@
      />
    </button>
    <code
-      class="text-size-14px"
+      class="text-[14px]"
      :class="{ 'text-gray-500': localConfidential }"
      data-cy="code-box"
    >
--- a/packages/app/src/settings/project/Config.vue
+++ b/packages/app/src/settings/project/Config.vue
@@ -21,7 +21,7 @@
      <ConfigLegend
        :gql="props.gql"
        data-cy="config-legend"
-        class="rounded-tr-md rounded-br-md border-1 border-l-0 min-w-280px py-28px px-22px"
+        class="rounded-tr-md rounded-br-md border border-l-0 min-w-[280px] py-[28px] px-[22px]"
      />
    </div>
  </SettingsSection>
--- a/packages/app/src/settings/project/ConfigBadge.vue
+++ b/packages/app/src/settings/project/ConfigBadge.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="text-sm">
    <p
-      class="font-mono whitespace-nowrap rounded px-2px w-min"
+      class="font-mono whitespace-nowrap rounded px-[2px] w-min"
      data-testid="legend-label"
      v-bind="$attrs"
    >
--- a/packages/app/src/settings/project/ConfigCode.vue
+++ b/packages/app/src/settings/project/ConfigCode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-bl-md rounded-tl-md mx-auto border-1 w-full min-w-100px relative hide-scrollbar overflow-auto grow-1">
+  <div class="rounded-bl-md rounded-tl-md mx-auto border w-full min-w-[100px] relative hide-scrollbar overflow-auto grow-1">
    <OpenConfigFileInIDE
      v-slot="{onClick}"
      :gql="props.gql"
@@ -15,10 +15,10 @@
      </Button>
    </OpenConfigFileInIDE>
    <code
-      class="font-thin p-16px text-gray-600 text-size-14px leading-24px block"
+      class="font-thin p-[16px] text-gray-600 text-[14px] leading-[24px] block"
    >
      {<br>
-      <div class="pl-24px">
+      <div class="pl-[24px]">
        <span
          v-for="{ field, value, from } in sortAlphabetical(props.gql.config)"
          :key="field"
@@ -27,7 +27,7 @@
          <template v-if="value && typeof value === 'object'">
            <RenderObject
              :value="value"
-              :color-classes="`rounded-sm px-2px ${colorMap[from]}`"
+              :color-classes="`rounded-sm px-[2px] ${colorMap[from]}`"
              :from="from"
            />
            <span>,</span>
@@ -37,7 +37,7 @@
            :from="from"
            :value="value"
            :data-cy-config="from"
-            class="rounded-sm px-2px"
+            class="rounded-sm px-[2px]"
            :class="colorMap[from]"
          />
          <br>
--- a/Show More
+++ b/Show More