Funded by ChaiCode

CSS without
the CSS.

uvwind reads your HTML classes and injects a <style> tag. No build step. No CSS file. No config needed. Just add a class.

Get started → Try playground

4kb gzipped

0 CSS files

0 build steps

index.html HTML

123 456 789 101112

Hello world

</div>

waiting...

</style>

LIVE PREVIEW

Hello world

no CSS file· styleMap approach· DOM injection· VS Code IntelliSense· zero build step· glass effect included· npm + CDN· 13 color families· no CSS file· styleMap approach· DOM injection· VS Code IntelliSense· zero build step· glass effect included· npm + CDN· 13 color families·

// why uvwind

How it actually works.

styleMap approach

Every class maps to one CSS property in a plain JS object. Simple. You can add your own classes in seconds.

One DOM scan on load

Scans your page once, collects every class used, builds one CSS string, injects one style tag. Done.

No stylesheet. Ever.

Open DevTools. See the style tag in head with your classes. No external CSS file linked anywhere.

Glass effect included

bg-glass, bg-glass-dark, bg-glass-chai. Glassmorphism with one class. Not in Tailwind by default.

Feature uvwind Tailwind

Generates a CSS file No ✓ Yes

Needs a build step No ✓ Yes

Works in plain HTML file Yes ✓ Limited

Glass effect built in Yes ✓ No

Infinite arbitrary values No Yes ✓

Large app performance Good Better ✓

// try it live

Type a class. See it inject.

Open DevTools → Elements → head — watch the style tag appear.

Colors

bg-red-5 bg-blue-5 bg-green-5 bg-orange-6 bg-purple-5

Spacing

p2 p4 p6

Effects

bg-glass b-lg b-circle t-white

injected <style> tag: // type a class above

uvwind box

DevTools — Elements

<head>

// empty

</style>

</head>

// color palette

Every color. Ready to use.

10 shades per color. Light to dark. Just add the class.

red

orange

yellow

green

blue

purple

pink

gray

brown

chai ✦

hover a swatch to see class name · click to copy

// get started

Ship in 30 seconds.

index.html

<!-- drop in <head> -->
<script src="https://cdn.jsdelivr.net/gh/UV921/UVWIND-1@main/src/engine.js"></script>

<!-- use classes anywhere -->
<div class="bg-red-5 p4 b-lg t-white">
  Hello uvwind
</div>

terminal

# npm init-y
npm install uvwind

import 'uvwind'

Spacing

p1padding: 4px

p2padding: 8px

p4padding: 20px

p6padding: 28px

m4margin: 20px

Colors

bg-red-5■

bg-blue-5■

bg-green-5■

bg-orange-6■

bg-*-1 to 1010 shades

Text

t-whitecolor: #fff

t-chaicolor: #f97316

t-centertext-align: center

t-mutedcolor: #6b7280

t-gray-1 to 1010 shades

Glass ✦

bg-glassfrosted light

bg-glass-darkfrosted dark

bg-glass-lgheavy blur

bg-glass-chaiorange tint

unique to uvwind

CSS withoutthe CSS.