CSS for semantic HTML

Start with HTML. Grow into Tailwind.

Give semantic HTML a polished baseline with one stylesheet. Add Tailwind when the interface grows—without rewriting the markup.

See native HTML ↓ Install Semanticwind ↓

Standalone: no build step · no runtime JavaScript

Native HTML

Native elements, styled.

Typography, forms, validation, disclosure, and popovers—without replacing the elements the browser provides.

Readable by default

Headings, paragraphs, quotations, code, and keyboard hints share a deliberate rhythm before you write a utility class.

A small release note

Released version 0.1.0

Semantic HTML arrives with polished defaults while its meaning stays intact.

Style only choices that make sense for almost every correct use of an element.

Contributor contract

Element names render as <main>; shortcuts render as ⌘ + K.

Forms communicate state

Labels, controls, validation, and feedback remain connected and readable without a form component.

Native interaction stays native

The browser owns disclosure and popover behavior; Semanticwind supplies the visual baseline and state feedback.

What changes when Tailwind is added?

The stylesheet imports. The HTML stays.

72% 86%

Native popover

The browser opens and closes it; Semanticwind styles the surface while applications own placement.

Explore the complete reference →

Installation

Use it with or without Tailwind.

Link the compiled stylesheet in a plain HTML project. In a Tailwind CSS v4 project, install the package and import it after Tailwind.

Current release: Semanticwind 0.1.0 on npm · MIT

No build step

Link the standalone stylesheet

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/semanticwind@0.1.0/dist/semanticwind.min.css">

Tailwind CSS v4

Install the package

npm install semanticwind

/* app.css */
@import "tailwindcss";
@import "semanticwind";

Need syntax colors? Semanticwind styles the code block; Highlight.js colors the tokens.