All the updates we've shipped to Htmlwind, newest first.
Inputs, checkboxes, and toggles
Three new Application UI categories, 25 components total.
Inputs has 16 components: basic labeled inputs, error states with red ring styling, leading and trailing icons, inline prefix inputs, a combined input with trailing dropdown, file inputs, and a drag and drop upload zone with vanilla JavaScript that handles file drops, validates type and size, and updates the hidden file input.
Checkboxes has 4 components: a simple checkbox with label, one with a description below, a vertical list for multi-select, and a list with avatars for things like team member selection. They use custom SVG check and indeterminate marks so they look the same across browsers.
Toggles has 5 components: a standard toggle, a thinner compact version, toggles with left or right labels, and one with both a label and description. Each toggle includes vanilla JavaScript that handles the click and keeps aria-checked in sync.
v3/v4 toggle and bug reports for the CSS to Tailwind tool
The CSS to Tailwind converter now supports both v3 and v4 output. The v3 to v4 conversion handles renamed utilities automatically. Also added a bug report modal so users can flag conversion issues from the tool page.
Open source, new tool, and redesign
CSS to Tailwind converter
New tool that converts plain CSS to Tailwind utility classes, entirely client-side. It handles shorthand expansion for border, transition, background, padding, and margin properties, and falls back to arbitrary values for anything unmapped. There's a shareable URL feature that encodes your input as base64 in the URL hash.
Tools redesign
All three tools (Colors, Gradients, CSS to Tailwind) got a dark terminal-inspired UI. Space Grotesk for headlines, JetBrains Mono for code, light/dark mode with the preference saved to localStorage.
Open-sourced, paywall removed
All components are free. No signup, no subscription. Copy and paste.
Gradients tool
A gallery of Tailwind CSS gradient presets at /gradients. Browse, preview, and copy the utility classes or raw CSS.
Colors tool
Tailwind CSS color reference showing every default palette color with hex, RGB, HSL, and OKLCH values. Click any value to copy.