Side project · 2023
Tailwind Preview
Write HTML and Tailwind on the left, watch the design render on the right. No build step, no project setup, just the feedback loop.
Visit live site- Role
- Everything
- Year
- 2023
- Origin
- Side project
- Stack
- Next.js · Tailwind
01
What it is
A split-pane playground for Tailwind CSS. I wanted the shortest possible distance between typing a class and seeing what it does, both for learning Tailwind and for sketching real components before they enter a codebase.
It turned out to be useful at both ends: beginners get instant feedback while they learn the utility names, and people who already know Tailwind get a scratchpad for iterating a layout until it is pixel-perfect.
02
What I built
- 01The editor and preview panes, with the render updating as you type instead of on save.
- 02Zero compile wait: the preview reflects your markup immediately, which is the whole point of the tool.
- 03Shipped as an open source Next.js app, with the code on GitHub.