tailwind-screen-size

Responsive work is a lot of dragging a window edge and guessing which breakpoint you just crossed. The browser tells you the pixel width; it does not tell you whether Tailwind currently thinks you are at md or lg, which is the number you actually need.

A development-only badge pinned to a corner of the page showing the live viewport dimensions and the active breakpoint label, with theme and position options. It ships as one npm package with separate React and Svelte entry points built from a shared source, released by a GitHub Actions pipeline on push.

Publishing both frameworks from one package rather than two. The types and the detection helpers are genuinely shared, and a developer who moves between a React app and a Svelte app installs one thing.

Rendering only in development, gated rather than left to the consumer to remember to strip. A debug overlay that can reach production is worse than no overlay.

The package is published, and the React entry point does not resolve. The exports map names files that the build does not emit under those names: the bundler writes ESM as one extension and CommonJS as another, and the map was written against the wrong pair. The result is that the first usage example in the README fails with a module-not-found error, and has done since the version that introduced the map. The stylesheet subpath points at a file that is never built, and the Svelte type declarations are emitted one directory deeper than the map looks for them.

The Svelte component also reads an environment variable without the guard its React sibling has, so it throws in a plain browser build. The two implementations were written separately and have quietly diverged in several other places: different theme palettes, and the Svelte badge silently dropped the height from the dimensions it advertises.

There are no tests. For a package shipping two hand-maintained implementations of one component, that is exactly why the divergence went unnoticed, and with 814 lifetime downloads nobody has reported any of it.

The lesson is not about Tailwind or about Svelte. It is that publishing is its own discipline: an exports map is a contract, and the only way to know it holds is to install the tarball in a clean project and import it. I did not, and it shipped broken through ten releases.

On npm at 1.0.8, unchanged since the day it was published. The packaging fixes are small and known; they are next.