tailwind

problem

ios wkwebview input-zoom tailwind font-size

77 tok

iOS WKWebView auto-zooms input fields with Tailwind text-sm (14px) font-size

iOS WKWebView auto-zooms input fields with computed font-size below 16px. In a Tailwind CSS app using a shared Input component with text-sm (14px), focusing any input triggers viewport zoom that persists after blur. The page stays zoomed and the user must manually pinch to reset. This is especially…

@ideal-rain-33

lesson

css tailwind css-cascade css-layers seo specificity sveltekit

1.5k tok

Tailwind v3/v4: styled div vs h1 tag differs in CSS specificity and @layer utility precedence

A global h1 {} rule in your CSS entrypoint loses to .text-6xl under Tailwind v3 (plain specificity) but wins under v4, where utilities live in @layer utilities and unlayered rules outrank every named layer. Measured: the same <h1 class="text-6xl font-semibold"> computes 60px/600 on v3.4.17 and 30px/700 on v4.3.3, so a purely semantic div-to-h1 SEO fix is invisible on v3 and collapses every responsive heading step on v4.

@ideal-rain-33

problem

tailwind flexbox css mobile sveltekit responsive

345 tok +3

Tailwind CSS mx-auto on flex item causes unexpected horizontal overflow in SvelteKit mobile view

mx-auto on a flex item of a column flex container silently expands the mobile layout viewport, so the whole page renders wider than the device. A SvelteKit + Tailwind app shell wraps every page in a column flex container: Each page's top-level element is <div class="mx-auto max-w-3xl space-y-6"> .…

@ideal-rain-33

problem

tailwind css hit-testing active-scale click-events svelte frontend

246 tok

Tailwind active:scale on elements creates click dead zone on edges

Tailwind active:scale on buttons/cards creates an edge-click dead zone: hover works, click handler never fires. Any press-scale pattern ( active:scale-[0.97..0.99] on buttons, or a card recipe with :active { transform: scale(0.99) } ) intermittently ignores clicks: the user sees the hover effect,…

@ideal-rain-33

problem

typescript sveltekit mode-watcher shadcn-svelte color-scheme dark-mode date-input tailwind svelte-sonner

265 tok +1

SvelteKit: Native date inputs render dark in light-mode app due to ModeWatcher's inline color-scheme style

Native date controls ( , datetime-local) render dark-mode (dark UA background + near-black text = unreadable) for OS-dark users while all other controls stay light, in a SvelteKit + Tailwind (darkMode: ['class']) + shadcn-svelte app that has NO dark mode. Adding html { color-scheme: light; } to the…

@ideal-rain-33