20 Tailwind Retro UI

The key declaration is image-rendering: pixelated on the scaled sprite, applied in Tailwind via an arbitrary property like [image-rendering:pixelated]. The browser default is bilinear smoothing, which turns a 12×12 sprite blown up to 8× into a blurry smear; pixelated tells it to use nearest-neighbour so every source pixel becomes a crisp block. Two common bugs: first, the effect only looks right at integer scale factors — a 3.5× scale leaves uneven pixel widths, so pin the container to whole multiples of the source size. Second, a few browsers honour crisp-edges instead, so ship both values. Keep the intrinsic sprite small and let CSS do the upscale; upscaling a large image defeats the point. A background sprite needs the same rule on the element carrying background-image, not on a child.

Scanlines are a repeating-linear-gradient laid over the content: alternate a transparent stripe with a faint black stripe every two pixels, e.g. repeating-linear-gradient(to bottom, transparent 0 1px, rgba(0,0,0,.35) 1px 2px), on an overlay element with pointer-events: none so it never blocks clicks. Curvature is faked with a large border-radius plus an inset box-shadow that darkens the corners like a real tube. Phosphor bloom is a soft text-shadow in the phosphor colour, and mains flicker is a low-opacity animation on the overlay. The overlay must sit absolute inset-0 above the screen layer with a higher z-index, and keep the stripe at 1–2px — wider stripes read as window blinds, not scanlines. Combine all four layers rather than one; a single effect on its own looks flat and unconvincing.

Every raised or sunken control of that era is four stacked box-shadow insets: a light shadow on the top-left edges and a dark shadow on the bottom-right, e.g. inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #000. To make a button look pressed, swap the light and dark sets so the highlight moves to the bottom-right. In Tailwind write it as one arbitrary [box-shadow:...] value and set border: none, because the bevel replaces the border entirely. The usual bug is anti-aliasing softening the 1px edges — keep every offset at whole pixels and avoid sub-pixel transform on the element. Do not combine a real border with the shadows; the two edges fight each other and the crisp two-tone look is lost.

Several demos animate continuously — CRT mains flicker, the arcade attract cycle, the cassette reels, the terminal boot typing and the guestbook counter. Each guards its motion behind @media (prefers-reduced-motion: reduce) with animation: none, so a user who opts out gets the static frame. The flicker is the important one: a rapidly pulsing opacity can trigger discomfort, so it stays subtle and is removed entirely under reduced motion. For the desktop demos, the draggable windows are pointer-operated, so keyboard and screen-reader users need the window content to stay reachable in normal document order — the drag is an enhancement, not the only way in. Icon-only controls such as transport keys and window buttons carry aria-label, and the decorative scanline and bezel layers use aria-hidden so assistive tech skips them.

Ordered dithering fakes a colour a limited palette does not have by alternating two colours it does have in a fixed grid. In CSS you build the grid with layered repeating-linear-gradient, or a small tile repeated as a background: a checkerboard is two repeating-linear-gradients at 45 and -45 degrees, and a Bayer-style pattern is several offset gradients stacked. Set background-size to the cell size — 2px or 4px reads as fine dithering, larger reads as a visible pattern. The classic bug is smoothing: gradients interpolate by default, so use hard colour stops like #000 0 2px, #fff 2px 4px with no soft transition, otherwise you get a blur instead of two flat colours. Blend by layering two flat gradient tiles, rather than reaching for a real smooth gradient, which defeats the limited-palette illusion entirely.

The window drag is a small pointer-event handler, not CSS. On pointerdown over the title bar you record the pointer position and the window's current offset, call setPointerCapture so the drag survives the cursor leaving the element, then on pointermove apply the delta with transform: translate(...). Using transform is smoother than writing left and top because it stays on the compositor. Release on pointerup. Two bugs to avoid: text selection during the drag — set user-select: none on the title bar while a drag is active — and accidentally starting a drag from the system buttons, so exclude events that originate on the close or resize controls. Raise the focused window with a higher z-index on pointerdown so it stacks above its siblings, the way a real desktop does.

Retro styling is a strong aesthetic, not a default. Skip it on anything where the priority is fast, unambiguous task completion — checkout flows, dashboards, and forms handling money or health data — because bevels, scanlines and low-contrast phosphor palettes reduce legibility and can push text below the contrast ratios those interfaces need. The character-cell and teletext demos use tight monospace grids that do not reflow gracefully, so they suit a hero, an about page or a game UI rather than dense responsive content. The CRT flicker and pixel scaling are decorative layers; keep them off the actual reading surface. Use these styles where the nostalgia is the message — a portfolio, a launch page, a game menu — and reach for a plain, accessible layout wherever the user came to get something done rather than to admire the frame.

Most of the look is reachable with Tailwind's arbitrary-value syntax rather than a separate stylesheet. The bevels are one [box-shadow:...] value, scanlines are an [background:repeating-linear-gradient(...)], pixel scaling is [image-rendering:pixelated], and the phosphor glow is [text-shadow:...]. Keyframes are the exception: @keyframes cannot live inside a class, so the flicker, boot-typing and reel-spin animations are defined once in a small @layer or a plain style block and then referenced with animate-[name]. Fonts matter too — the terminal and DOS demos need a real monospace face loaded, and the pixel demos want a bitmap-style font; Tailwind only sets the family, it does not ship the font itself. Everything else — layout, spacing, colour and plain borders — is ordinary utility classes.