refactor(formi): replace unocss with tailwind

DerYeger · DerYeger · commit 73b5ecfefff8 · 2026-03-09T17:42:07.000+01:00
diff --git a/.changeset/empty-foxes-create.md b/.changeset/empty-foxes-create.md
@@ -0,0 +1,5 @@
+---
+'d3-graph-controller': patch
+---
+
+improve style export config
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -5,5 +5,32 @@
   "sortImports": {},
   "sortPackageJson": {
     "sortScripts": true
-  }
+  },
+  "overrides": [
+    {
+      "files": ["apps/formi/**/*.{ts,vue}"],
+      "options": {
+        "sortTailwindcss": {
+          "stylesheet": "apps/formi/assets/css/main.css"
+        }
+      }
+    },
+    {
+      "files": ["apps/wiener-time/**/*.{ts,tsx}"],
+      "options": {
+        "sortTailwindcss": {
+          "stylesheet": "apps/wiener-time/src/styles/globals.css"
+        }
+      }
+    },
+    {
+      "files": ["packages/turbo-graph-ui/**/*.{ts,tsx}"],
+      "options": {
+        "sortTailwindcss": {
+          "stylesheet": "packages/turbo-graph-ui/app/globals.css",
+          "functions": ["cn"]
+        }
+      }
+    }
+  ]
 }
diff --git a/apps/formi/assets/css/main.css b/apps/formi/assets/css/main.css
@@ -1,3 +1,4 @@
+@import 'tailwindcss';
 @import 'd3-graph-controller/default.css';
 @import 'vue-toastification/dist/index.css';
 
@@ -17,6 +18,10 @@ body,
   overflow-y: auto;
 }
 
+.font-ui {
+  font-family: 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
+}
+
 :root {
   --green: #22c55e;
   --splitpanes-border-color: #57534e;
diff --git a/apps/formi/components/CircledNumber.vue b/apps/formi/components/CircledNumber.vue
@@ -5,9 +5,9 @@ const { number } = toRefs(props)
 
 <template>
   <div
-    class="border-1 rounded-10 w-1.25em h-1.25em font-200 flex select-none items-center justify-center border-stone-900"
+    class="flex h-[1.25em] w-[1.25em] items-center justify-center rounded-full border border-stone-900 font-extralight select-none"
   >
-    <span class="text-0.875em">
+    <span class="text-[0.875em]">
       {{ number }}
     </span>
   </div>
diff --git a/apps/formi/components/DemoCard.vue b/apps/formi/components/DemoCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-testid="demo-card"
-    class="border-1 overflow-hidden rounded border-stone-400 bg-white shadow-xl"
+    class="overflow-hidden rounded border border-stone-400 bg-white shadow-xl"
   >
     <slot />
   </div>
diff --git a/apps/formi/components/FOLTree.vue b/apps/formi/components/FOLTree.vue
@@ -17,7 +17,7 @@ const borderBreakpoints = [1, 3, 5] as const
 <template>
   <div
     :data-testid="level === 0 ? 'fol-tree' : undefined"
-    class="bg-op-25 border-1 flex size-fit flex-col items-center justify-center rounded bg-stone-900 p-2 text-stone-100 shadow"
+    class="flex size-fit flex-col items-center justify-center rounded border bg-stone-900/25 p-2 text-stone-100 shadow"
     :class="{
       'border-stone-600': level < borderBreakpoints[0],
       'border-stone-700': level >= borderBreakpoints[0],
@@ -26,7 +26,7 @@ const borderBreakpoints = [1, 3, 5] as const
     }"
   >
     <code
-      class="select-none px-1"
+      class="px-1 select-none"
       :class="{ 'cursor-pointer': children.length > 0 }"
       style="white-space: nowrap"
       @click="expanded = !expanded"
diff --git a/apps/formi/components/FeatureParagraph.vue b/apps/formi/components/FeatureParagraph.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-testid="feature-paragraph"
-    class="children:max-w-128 children:text-center my-16 flex flex-col justify-center text-stone-600"
+    class="my-16 flex flex-col justify-center text-stone-600 [&>*]:max-w-[32rem] [&>*]:text-center"
   >
     <slot />
   </div>
diff --git a/apps/formi/components/Footer.vue b/apps/formi/components/Footer.vue
@@ -22,15 +22,15 @@ const resources: Link[] = [
 </script>
 
 <template>
-  <footer class="align-start mx-auto mt-8 flex w-fit flex-wrap justify-between gap-12">
+  <footer class="mx-auto mt-8 flex w-fit flex-wrap items-start justify-between gap-12">
     <FooterColumn title="Resources">
       <a
         v-for="link of resources"
         :key="link.to"
         target="_blank"
         rel="noreferrer"
         :href="link.to"
-        class="my--2 w-full cursor-pointer py-2 transition-colors hover:text-stone-900"
+        class="-my-2 w-full cursor-pointer py-2 transition-colors hover:text-stone-900"
       >
         {{ link.text }}
       </a>
diff --git a/apps/formi/components/FooterColumn.vue b/apps/formi/components/FooterColumn.vue
@@ -4,8 +4,8 @@ const { title } = toRefs(props)
 </script>
 
 <template>
-  <div class="font-300 flex flex-col gap-2 text-sm text-stone-600">
-    <span class="font-400 mb-4 text-stone-900">{{ title }}</span>
+  <div class="flex flex-col gap-2 text-sm font-light text-stone-600">
+    <span class="mb-4 font-normal text-stone-900">{{ title }}</span>
     <slot />
   </div>
 </template>
diff --git a/apps/formi/components/HLine.vue b/apps/formi/components/HLine.vue
@@ -1,3 +1,3 @@
 <template>
-  <div class="h-0.1rem flex-1 bg-stone-700" />
+  <div class="h-[0.1rem] flex-1 bg-stone-700" />
 </template>
diff --git a/apps/formi/components/HeroImage.vue b/apps/formi/components/HeroImage.vue
@@ -5,18 +5,18 @@ const { accessibleDescription } = useLogo()
 <template>
   <figure
     v-once
-    class="mt-12.5% mb--12.5% md:ml-12.5% md:w-128 xl:w-172 pb-100% children:select-none relative w-72 max-w-full sm:w-96 md:mt-0"
+    class="relative mt-[12.5%] -mb-[12.5%] w-72 max-w-full pb-[100%] sm:w-96 md:mt-0 md:ml-[12.5%] md:w-[32rem] xl:w-[43rem] [&>*]:select-none"
   >
     <img
       src="/hero-first.webp"
       :alt="accessibleDescription"
-      class="drop-shadow-custom translate-x--12.5% translate-y--12.5% absolute"
+      class="drop-shadow-custom absolute -translate-x-[12.5%] -translate-y-[12.5%]"
       sizes="sm:512px md:512px xl:688px"
     />
     <img
       src="/hero-second.webp"
       :alt="accessibleDescription"
-      class="drop-shadow-custom translate-x-12.5% translate-y-12.5% absolute"
+      class="drop-shadow-custom absolute translate-x-[12.5%] translate-y-[12.5%]"
       sizes="sm:512px md:512px xl:688px"
     />
     <figcaption class="sr-only">
diff --git a/apps/formi/components/HeroProse.vue b/apps/formi/components/HeroProse.vue
@@ -1,7 +1,7 @@
 <template>
   <p
     data-testid="hero-prose"
-    class="font-300 !md:leading-10 text-justify !leading-8 text-stone-700 md:text-start"
+    class="text-justify leading-8! font-light text-stone-700 md:text-start md:leading-10!"
   >
     <slot />
   </p>
diff --git a/apps/formi/components/IconButton.vue b/apps/formi/components/IconButton.vue
@@ -6,7 +6,7 @@ const { name } = toRefs(props)
 
 <template>
   <button
-    class="m--1 flex size-7 items-center justify-center rounded-3xl p-1 transition-colors hover:bg-stone-300 hover:text-stone-600"
+    class="-m-1 flex size-7 items-center justify-center rounded-3xl p-1 transition-colors hover:bg-stone-300 hover:text-stone-600"
     @click="emit('click')"
   >
     <Icon :name="name" />
diff --git a/apps/formi/components/LinkButton.vue b/apps/formi/components/LinkButton.vue
@@ -12,7 +12,7 @@ const { link, description } = toRefs(props)
     :aria-label="description ?? link.text"
     :title="link.text"
     :data-testid="`link-button-${link.to}`"
-    class="md:text-md rounded-7 font-300 flex select-none items-center bg-stone-900 px-12 py-4 text-sm text-stone-100 transition-all duration-500 hover:bg-stone-700 hover:shadow-2xl"
+    class="flex items-center rounded-[1.75rem] bg-stone-900 px-12 py-4 text-sm font-light text-stone-100 transition-all duration-500 select-none hover:bg-stone-700 hover:shadow-2xl md:text-base"
   >
     <slot />
     <span v-if="description" class="sr-only">{{ description }}</span>
diff --git a/apps/formi/components/ModelCheckerTraceTree.vue b/apps/formi/components/ModelCheckerTraceTree.vue
@@ -19,7 +19,7 @@ const borderBreakpoints = [1, 3, 5] as const
 <template>
   <div
     :data-testid="level === 0 ? 'model-checker-trace-root' : 'model-checker-trace-child'"
-    class="bg-op-25 border-1 flex size-fit flex-col items-center justify-center rounded bg-stone-900 p-2 text-stone-100 shadow"
+    class="flex size-fit flex-col items-center justify-center rounded border bg-stone-900/25 p-2 text-stone-100 shadow"
     :class="{
       'border-stone-600': level < borderBreakpoints[0],
       'border-stone-700': level >= borderBreakpoints[0],
@@ -28,7 +28,7 @@ const borderBreakpoints = [1, 3, 5] as const
     }"
   >
     <code
-      class="flex select-none items-center gap-2 rounded px-2 py-1"
+      class="flex items-center gap-2 rounded px-2 py-1 select-none"
       :class="{
         'cursor-pointer': children.length > 0,
       }"
@@ -37,7 +37,7 @@ const borderBreakpoints = [1, 3, 5] as const
     >
       <Icon
         :name="trace.actual ? 'mdi:check-bold' : 'mdi:close-thick'"
-        class="text-1.25em"
+        class="text-[1.25em]"
         :class="{
           'text-green-500': !isMismatched,
           'text-red-500': isMismatched,
diff --git a/apps/formi/components/ModelGraph.vue b/apps/formi/components/ModelGraph.vue
@@ -100,7 +100,7 @@ function resetGraphController(
     <div ref="el" />
     <IconButton
       name="system-uicons:reset"
-      class="absolute right-2 top-2"
+      class="absolute top-2 right-2"
       aria-label="Reset"
       @click="controller?.restart(0.5)"
     />
diff --git a/apps/formi/components/ModelInput.vue b/apps/formi/components/ModelInput.vue
@@ -65,11 +65,11 @@ watch(
       :disabled="disabled"
       @update:model-value="(value) => emit('update:modelValue', value)"
     />
-    <div class="absolute right-2 top-2 flex h-fit items-center gap-2">
+    <div class="absolute top-2 right-2 flex h-fit items-center gap-2">
       <Icon v-if="error" name="mdi:alert-circle" class="text-red-500" />
       <CopyButton :content="modelValue" />
     </div>
-    <Status v-if="error" class="border-t absolute inset-x-0 bottom-0">
+    <Status v-if="error" class="absolute inset-x-0 bottom-0 border-t">
       <code class="text-red-500">{{ error }}</code>
     </Status>
   </div>
diff --git a/apps/formi/components/PaneTitle.vue b/apps/formi/components/PaneTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="absolute left-1 top-1 select-none text-xs text-stone-500">
+  <span class="absolute top-1 left-1 text-xs text-stone-500 select-none">
     <slot />
   </span>
 </template>
diff --git a/apps/formi/components/Toolbar.vue b/apps/formi/components/Toolbar.vue
@@ -4,13 +4,13 @@ const { homeLink } = useLinks()
 
 <template>
   <div
-    class="border-b-1 flex h-6 items-center border-stone-600 bg-stone-200 p-2 text-stone-900 md:h-8"
+    class="flex h-6 items-center border-b border-stone-600 bg-stone-200 p-2 text-stone-900 md:h-8"
   >
     <NuxtLink
       :to="homeLink.to"
       aria-label="Back to Home"
       title="Back to Home"
-      class="m--1 flex size-7 items-center rounded-3xl p-1 transition-colors hover:bg-stone-400"
+      class="-m-1 flex size-7 items-center rounded-3xl p-1 transition-colors hover:bg-stone-400"
     >
       <Icon name="carbon:arrow-left" class="ml-1" />
     </NuxtLink>
diff --git a/apps/formi/layouts/default.vue b/apps/formi/layouts/default.vue
@@ -20,7 +20,7 @@ const { accessibleDescription } = useLogo()
           src="/hero-first-small.webp"
           :width="48"
           :height="48"
-          class="display-none md:display-block drop-shadow-custom mb--2 mt--3 select-none"
+          class="drop-shadow-custom -mt-3 -mb-2 hidden select-none md:block"
           :alt="accessibleDescription"
         />
       </span>
@@ -30,16 +30,16 @@ const { accessibleDescription } = useLogo()
         :key="link.to"
         :to="link.to"
         :title="link.text"
-        class="font-300 text-xs uppercase md:text-sm"
-        active-class="font-600"
+        class="text-xs font-light uppercase md:text-sm"
+        active-class="font-semibold"
       >
         {{ link.text }}
       </NuxtLink>
     </header>
     <main class="my-16 md:my-32">
       <slot />
     </main>
-    <HLine class="w-100vw !w-100dvw ml--4 !bg-stone-400 md:ml--16" />
+    <HLine class="-ml-4 w-dvw! w-screen bg-stone-400! md:-ml-16" />
     <Footer />
   </div>
 </template>
diff --git a/apps/formi/nuxt.config.ts b/apps/formi/nuxt.config.ts
@@ -1,3 +1,5 @@
+import tailwindcss from '@tailwindcss/vite'
+
 const appName = 'Formi'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -30,11 +32,11 @@ export default defineNuxtConfig({
 
   modules: [
     '@nuxtjs/robots',
-    '@unocss/nuxt',
     '@vite-pwa/nuxt',
     '@vueuse/nuxt',
     '@nuxt/icon',
     '@nuxt/test-utils',
+    '@nuxt/fonts',
   ],
 
   css: ['@/assets/css/main.css'],
@@ -43,6 +45,11 @@ export default defineNuxtConfig({
     transpile: ['vue-toastification'],
   },
 
+  fonts: {
+    provider: 'npm',
+    families: [{ name: 'Readex Pro', provider: 'npm', weights: [200, 300, 400, 500, 600, 700] }],
+  },
+
   pwa: {
     registerType: 'autoUpdate',
     manifest: {
@@ -68,30 +75,9 @@ export default defineNuxtConfig({
     },
   },
 
-  unocss: {
-    icons: true,
-    attributify: true,
-    preflight: true,
-    theme: {
-      breakpoints: {
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1280px',
-        '2xl': '1536px',
-      },
-    },
-    webFonts: {
-      fonts: {
-        ui: {
-          name: 'Readex Pro',
-          weights: [200, 300, 400, 500, 600, 700],
-        },
-      },
-    },
-    shortcuts: [],
-    rules: [],
+  compatibilityDate: '2026-03-09',
+  vite: {
+    // @ts-expect-error - Vite type mismatch
+    plugins: [tailwindcss()],
   },
-
-  compatibilityDate: '2025-01-18',
 })
diff --git a/apps/formi/package.json b/apps/formi/package.json
@@ -29,13 +29,14 @@
     "zod": "catalog:"
   },
   "devDependencies": {
+    "@fontsource/readex-pro": "catalog:",
+    "@nuxt/fonts": "catalog:",
     "@nuxt/icon": "catalog:",
     "@nuxt/test-utils": "catalog:",
     "@nuxtjs/robots": "catalog:",
     "@playwright/test": "catalog:",
+    "@tailwindcss/vite": "catalog:",
     "@types/node": "catalog:",
-    "@unocss/nuxt": "catalog:",
-    "@unocss/reset": "catalog:",
     "@vite-pwa/nuxt": "catalog:",
     "@vitest/browser-playwright": "catalog:",
     "@vitest/coverage-v8": "catalog:",
@@ -45,6 +46,7 @@
     "@yeger/vitest-utils": "workspace:*",
     "nuxt": "catalog:",
     "serve": "catalog:",
+    "tailwindcss": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
     "vitest": "catalog:",
diff --git a/apps/formi/pages/app.vue b/apps/formi/pages/app.vue
diff --git a/apps/formi/pages/features.vue b/apps/formi/pages/features.vue
diff --git a/apps/formi/pages/index.vue b/apps/formi/pages/index.vue
diff --git a/apps/formi/turbo.jsonc b/apps/formi/turbo.jsonc
diff --git a/packages/d3-graph-controller/package.json b/packages/d3-graph-controller/package.json
diff --git a/packages/turbo-graph-ui/components/Checkbox.tsx b/packages/turbo-graph-ui/components/Checkbox.tsx
diff --git a/packages/turbo-graph-ui/components/LogOutput.tsx b/packages/turbo-graph-ui/components/LogOutput.tsx
diff --git a/packages/turbo-graph-ui/components/ParameterInputs.tsx b/packages/turbo-graph-ui/components/ParameterInputs.tsx
diff --git a/packages/turbo-graph-ui/components/Task.tsx b/packages/turbo-graph-ui/components/Task.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'d3-graph-controller': patch
 +---
++
 +improve style export config
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`<template>`
`2`	`2`	`<div`
`3`	`3`	`data-testid="demo-card"`
`4`		`- class="border-1 overflow-hidden rounded border-stone-400 bg-white shadow-xl"`
	`4`	`+ class="overflow-hidden rounded border border-stone-400 bg-white shadow-xl"`
`5`	`5`	`>`
`6`	`6`	`<slot />`
`7`	`7`	`</div>`