fix(tailwind): restore v3 hover, blur and breakpoint behaviour

An independent parity audit across light, dark and touch contexts found four
user-visible differences the earlier desktop-only checks could not see.

- hover: v4 wraps `hover:`/`group-hover:`/`peer-hover:` in
  `@media (hover: hover)`, so 64 hover-family classes were dead on touch
  devices — row highlights, reveal-on-hover icons, nav menus. This codebase
  already has `hover-hover` for the cases that want that gating, so plain
  `hover:` was meant to apply everywhere. Restored with `@custom-variant hover`.
- blur-0 no longer exists in v4. Two sites used `group-hover:blur-0` to clear a
  base `blur-[2px]`, leaving the icon permanently blurred. Renamed to
  `blur-none`.
- space-y-* dropped from specificity 0-3-0 to `:where()` 0-0-0 and moved to the
  preceding sibling, so a child's own `mt-*` now wins. Two layouts grew 4-8px;
  removed the child margins v3 was overriding.
- Breakpoints: v4 emits rem, which resolves against the browser's initial font
  size rather than `html { font-size }`, so a reader on a larger default text
  size got the mobile layout at desktop widths. Pinned back to v3's px.

Hardening from the same pass:
- `::before`/`::after`/`::backdrop` border-color — v4 leaves them
  `currentColor` and the app's `*` rule did not cover pseudo-elements.
- apps/docs was missing the `cn-tables.ts` source exclusion, so its bundle
  carried phantom `float-left`, `clear-end` and every `mix-blend-*`.
- Hairline plugin: narrowed to border-width longhands (it could rewrite an
  `outline-width` sharing a rule), stopped `\b1px\b` splicing into `0.1px`, and
  skipped node_modules stylesheets. Added 18 fixture tests.
- 23 golden-case tests for `cn`, pinning the font-size class group.
- The tables drift check now derives its flags from `cn:build` so the two
  cannot diverge, uses the local bin instead of `bun x`, and writes to tmpdir.

Author: waleedlatif1

.gitignore

@@ -107,9 +107,3 @@ __pycache__/
 # `apps/sim/lib/uploads/` — 61 files of tracked source — and silently ignore
 # anything added there later.
 /uploads
-
-# Scratch dir for `check:cn-tables` (regenerates the cn lookup tables to a
-# throwaway path and diffs them against the committed copy). Anchored to the one
-# directory the script actually creates, so an unrelated `.cn-check` elsewhere
-# is not silently hidden.
-/packages/emcn/.cn-check/

apps/docs/app/global.css

@@ -5,6 +5,13 @@
 @source "../../../packages/emcn/src";
 @source "../../../packages/workflow-renderer/src";
 
+/* emcn's compiled `cn` lookup tables encode Tailwind's own class-group literals
+   as string data. The scanner cannot tell those from real class usage, so
+   leaving the file in scope emits utilities nothing renders (`float-left`,
+   `clear-end`, every `mix-blend-*`, …). apps/sim/app/_styles/globals.css
+   carries the same exclusion — both apps scan packages/emcn/src. */
+@source not "../../../packages/emcn/src/lib/cn-tables.ts";
+
 /* Every @sim/emcn component expresses hover through `hover-hover:` so touch
    devices never latch a sticky hover state. The app registers it as a plugin
    variant in apps/sim/app/_styles/globals.css; docs is CSS-first Tailwind v4 with no

apps/sim/app/(landing)/components/content-post-page/content-post-loading.tsx

@@ -40,7 +40,7 @@ export function ContentPostLoading() {
               <Skeleton className='h-[16px] w-[95%] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-[88%] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--surface-hover)]' />
-              <Skeleton className='mt-6 h-[24px] w-[200px] rounded-[4px] bg-[var(--surface-hover)]' />
+              <Skeleton className='h-[24px] w-[200px] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-full rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-[92%] rounded-[4px] bg-[var(--surface-hover)]' />
               <Skeleton className='h-[16px] w-[85%] rounded-[4px] bg-[var(--surface-hover)]' />

apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx

@@ -101,7 +101,7 @@ interface StageHomeProps {
 const ENTER_BASE =
   'transition-[opacity,transform,filter] [transition-timing-function:cubic-bezier(0.2,0,0,1)]'
 const enterState = (shown: boolean) =>
-  shown ? 'translate-y-0 opacity-100 blur-0' : 'translate-y-1.5 opacity-0 blur-[3px]'
+  shown ? 'translate-y-0 opacity-100 blur-none' : 'translate-y-1.5 opacity-0 blur-[3px]'
 
 const Caret = () => (
   <span

apps/sim/app/_styles/globals.css

@@ -42,6 +42,15 @@
  */
 @custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
 
+/**
+ * v4 wraps `hover:` (and the `group-hover:`/`peer-hover:` variants derived from
+ * it) in `@media (hover: hover)`, so hover styling goes dead on touch devices.
+ * v3 emitted them unconditionally, and this codebase already has `hover-hover`
+ * below for the cases that genuinely want that gating — so plain `hover:` was
+ * deliberately meant to apply everywhere. Restored to the v3 semantics.
+ */
+@custom-variant hover (&:hover);
+
 @custom-variant hover-hover {
   @media (hover: hover) and (pointer: fine) {
     &:hover {
@@ -77,6 +86,18 @@
     var(--font-martian-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 
+  /**
+   * Pinned in px. v4's defaults are rem, and rem in a media query resolves
+   * against the browser's initial font size rather than `html { font-size }` —
+   * so a reader who raised their browser's default text size would get the
+   * mobile layout at a desktop width. These are v3's px values unchanged.
+   */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
   --text-micro: 10px;
   /**
    * `xs` is the one size here that also exists in Tailwind's own scale, so it
@@ -1034,8 +1055,20 @@ html.sidebar-booting .sidebar-shell-inner {
  * Base styles for body, scrollbars, and global elements
  */
 @layer base {
-  * {
+  /**
+   * The pseudo-elements are listed because v4's Preflight no longer defaults
+   * their border-color the way v3's did — it leaves them at `currentColor`, so
+   * the first `before:border-*` anyone writes would draw a near-black hairline
+   * instead of the neutral token.
+   */
+  *,
+  ::before,
+  ::after,
+  ::backdrop {
     border-color: var(--border);
+  }
+
+  * {
     overscroll-behavior-x: none;
   }
 

apps/sim/app/unsubscribe/unsubscribe.tsx

@@ -124,7 +124,7 @@ function UnsubscribeContent() {
         <p className={'text-[var(--text-muted)] text-md'}>
           Choose which emails you'd like to stop receiving.
         </p>
-        <p className={'mt-2 text-[var(--text-muted)] text-sm'}>{data?.email}</p>
+        <p className={'text-[var(--text-muted)] text-sm'}>{data?.email}</p>
       </div>
 
       <div className={'mt-8 w-full max-w-[410px] space-y-3'}>

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -540,8 +540,8 @@ function BreadcrumbLocationPopover({
             )}
           >
             <span className='relative inline-grid size-[16px] shrink-0 place-items-center'>
-              <Icon className='col-start-1 row-start-1 size-[16px] text-[var(--text-icon)] opacity-100 blur-0 transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
-              <ArrowUpLeft className='col-start-1 row-start-1 size-[16px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-0 group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-0 motion-reduce:transition-none' />
+              <Icon className='col-start-1 row-start-1 size-[16px] text-[var(--text-icon)] opacity-100 blur-none transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
+              <ArrowUpLeft className='col-start-1 row-start-1 size-[16px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-none group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-none motion-reduce:transition-none' />
             </span>
             {rootBreadcrumb?.label && (
               <OverflowText

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx

@@ -102,15 +102,15 @@ export const MicButton = memo(function MicButton({
           <span
             className={cn(
               'absolute inset-0 flex items-center justify-center transition-[opacity,filter,scale] duration-300 [transition-timing-function:cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
-              isListening ? 'scale-100 opacity-100 blur-0' : 'scale-[0.25] opacity-0 blur-[4px]'
+              isListening ? 'scale-100 opacity-100 blur-none' : 'scale-[0.25] opacity-0 blur-[4px]'
             )}
           >
             <VoiceWaveform audioLevelsRef={audioLevelsRef} isListening={isListening} />
           </span>
           <Mic
             className={cn(
               'size-[16px] transition-[opacity,filter,scale] duration-300 [transition-timing-function:cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
-              isListening ? 'scale-[0.25] opacity-0 blur-[4px]' : 'scale-100 opacity-100 blur-0'
+              isListening ? 'scale-[0.25] opacity-0 blur-[4px]' : 'scale-100 opacity-100 blur-none'
             )}
           />
         </Button>

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -516,8 +516,8 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
                       className='-mx-1.5 -my-0.5 group flex w-fit min-w-0 max-w-[calc(100%+0.75rem)] items-center gap-1.5 rounded-[5px] px-1.5 py-0.5 transition-colors hover-hover:bg-[var(--surface-active)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
                     >
                       <span className='inline-grid size-[14px] shrink-0 place-items-center'>
-                        <Workflow className='col-start-1 row-start-1 size-[14px] text-[var(--text-icon)] opacity-100 blur-0 transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
-                        <SquareArrowUpRight className='col-start-1 row-start-1 size-[14px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-0 group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-0 motion-reduce:transition-none' />
+                        <Workflow className='col-start-1 row-start-1 size-[14px] text-[var(--text-icon)] opacity-100 blur-none transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-[0.25] group-hover:opacity-0 group-hover:blur-[2px] group-focus-visible:scale-[0.25] group-focus-visible:opacity-0 group-focus-visible:blur-[2px] motion-reduce:transition-none' />
+                        <SquareArrowUpRight className='col-start-1 row-start-1 size-[14px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-none group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-none motion-reduce:transition-none' />
                       </span>
                       <span className='min-w-0 truncate text-[var(--text-secondary)] text-sm transition-colors group-hover:text-[var(--text-primary)] group-focus-visible:text-[var(--text-primary)]'>
                         {workflowLabel}

apps/sim/lib/postcss/hairline-border-width.mjs

@@ -32,7 +32,31 @@ const HAIRLINE_UTILITIES = new Set([
   'divide-y',
 ])
 
-const WIDTH_PROPERTY = /(^|-)width$/
+/**
+ * Only border-width longhands. A looser `/-width$/` would also catch
+ * `outline-width`, `stroke-width`, `column-rule-width` and friends if one ever
+ * shared a rule with a border utility — reachable through `@apply`.
+ */
+const BORDER_WIDTH_PROPERTIES = new Set([
+  'border-width',
+  'border-top-width',
+  'border-right-width',
+  'border-bottom-width',
+  'border-left-width',
+  'border-inline-width',
+  'border-inline-start-width',
+  'border-inline-end-width',
+  'border-block-width',
+  'border-block-start-width',
+  'border-block-end-width',
+])
+
+/**
+ * Bare `1px` only. `\b1px\b` would also match the `1px` inside `0.1px` and
+ * splice the variable into the middle of the number, producing CSS that is
+ * silently invalid rather than failing the build.
+ */
+const ONE_PIXEL = /(?<![\w.])1px\b/g
 
 /**
  * Every class name a selector references, unescaped. The escape alternative
@@ -62,14 +86,19 @@ function isHairlineRule(rule) {
 
 const plugin = () => ({
   postcssPlugin: 'sim-hairline-border-width',
-  OnceExit(root) {
+  OnceExit(root, { result }) {
+    // Third-party stylesheets travel through the same pipeline. Several are
+    // themselves Tailwind output, so a dependency bump could ship a `.border`
+    // rule that has no idea what `--border-width` is.
+    if (result.opts.from?.includes('node_modules')) return
+
     root.walkRules((rule) => {
       if (!isHairlineRule(rule)) return
       rule.walkDecls((decl) => {
-        if (!WIDTH_PROPERTY.test(decl.prop)) return
-        // `1px` only — an arbitrary `border-[2px]` keeps its own value, and the
+        if (!BORDER_WIDTH_PROPERTIES.has(decl.prop)) return
+        // An arbitrary `border-[2px]` keeps its own value; the divide utilities'
         // `calc(1px * var(--tw-divide-*-reverse))` form is rewritten in place.
-        decl.value = decl.value.replace(/\b1px\b/g, 'var(--border-width)')
+        decl.value = decl.value.replace(ONE_PIXEL, 'var(--border-width)')
       })
     })
   },