Changelog

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.

Screenshot of the Htmlwind gradients tool with gradient cards and copy buttons

Colors tool

Tailwind CSS color reference showing every default palette color with hex, RGB, HSL, and OKLCH values. Click any value to copy.

Screenshot of the Htmlwind colors tool with color swatches and value codes

Application UI components

10 new Application UI categories, 80 components. Dashboards, settings pages, app interfaces.

  • Buttons - 12 components (primary, secondary, outline, icon, disabled, loading states)
  • Badges - 12 components (solid, soft, outline, with dot, with remove button, pill)
  • Avatars - 10 components (circular, with status, with verified tick, stacked, initials)
  • Tabs - 10 components (underline, pills, full-width, with icons, with badges)
  • Progress bars - 8 components (simple, striped, circular, with label, stacked)
  • Notifications - 6 components (toast, with avatar, with actions, with thumbnail)
  • Alerts - 6 components (simple, outlined, with close, with border, with actions)
  • Sign-in and Forgot password - 9 components (centered card, split-screen, compact)
  • Button groups - 4 components (simple, icon-only, with dropdown, with icon)
  • Pagination - 3 components (numbered, centered, buttons on right)

Logo Clouds

Logo Clouds added to Marketing UI. 12 components.

Pricing Sections

Pricing Sections added to Marketing UI. 11 components.

CTA Sections

CTA Sections added to Marketing UI. 14 components.

Team Sections

Team Sections added to Marketing UI with 9 components. Updated Blog Sections with refreshed designs.

Testimonials

Testimonials added to Marketing UI. 9 components.

Contact Sections and Stats

Contact Sections added to Marketing UI with 9 components. Stats added with 11 components.

Feature Sections

Feature Sections added to Marketing UI with 18 components. Replaced FAQ Sections with updated designs.

Footers

Footers added to Marketing UI. 12 components.

Blog Sections

Blog Sections added to Marketing UI. 11 components.

FAQ Sections

FAQ Sections added to Marketing UI. 10 components.

Launch

Htmlwind launched with Hero Sections as the first category, 12 components. Copy-paste Tailwind CSS components.