Funded by ChaiCode

CSS without
the CSS.

uvwind scans your HTML, injects a <style> tag at runtime. No build step. No CSS file ever generated. Just add a class — it works.

Get started → Try playground
4kb gzipped
0 CSS files
0 build steps
index.html HTML
123 456 789 101112
<!-- 1. Add uvwind -->
<script src="uvwind.js"></script>
 
<!-- 2. Use classes -->
<div class="" >
  Hello world
</div>
 
<!-- 3. uvwind injects: -->
<style id="uvwind">
  waiting...
</style>
LIVE PREVIEW
Hello world
no CSS file· DOM injection· 4kb gzipped· VS Code IntelliSense· zero build step· hover states· glass effect· npm + CDN· no CSS file· DOM injection· 4kb gzipped· VS Code IntelliSense· zero build step· hover states· glass effect· npm + CDN·
// why uvwind

Built different.
Works everywhere.

01

No CSS file. Ever.

Tailwind generates a .css file at build time. uvwind injects a <style> tag at runtime. Open DevTools — no stylesheet. Just inline JS magic.

02

Single DOM scan.

On load, uvwind scans your entire DOM once, collects every class used, builds the CSS string, injects it. 500 classes = 1 scan. Not 500.

03

Works with React, Vue, vanilla.

MutationObserver watches for dynamic class changes. Add a class via JS after load — uvwind catches it and styles it instantly.

04

Glass effect built in.

bg-glass, bg-glass-dark, bg-glass-chai. Glassmorphism with one class. No Tailwind plugin needed. Unique to uvwind.

Feature uvwind Tailwind
CSS file generated No ✓ Yes ✗
Build step required No ✓ Yes ✗
Works in plain HTML Yes ✓ Limited ✗
Dynamic class support Yes ✓ No ✗
Glass effect built in Yes ✓ No ✗
VS Code IntelliSense Yes ✓ Plugin ✗
// interactive playground

Try it. Break it. Ship it.

Type classes. Watch the style tag get injected. Open DevTools to verify — no CSS file, just a <style> tag in <head>.

Colors
bg-red-5 bg-blue-5 bg-green-5 bg-orange-5 bg-purple-5
Spacing
p-2 p-4 p-8
Effects
bg-glass bg-glass-dark rounded-lg rounded-full shadow-lg font-bold text-white uppercase
injected <style> tag:
// apply classes to see injection
uvwind box
DevTools — Elements
<head>
<style id= "uvwind" >
// empty
</style>
</head>
// get started

Ship in 30 seconds.

index.html 
<!-- drop in <head>, nothing else needed -->
<script src="https://cdn.jsdelivr.net/gh/uvesh/uvwind/uvwind.min.js"></script>

<!-- use classes anywhere -->
<div class="bg-red-5 p-4 rounded-lg text-white">
  Hello uvwind
</div>
Spacing
p-1padding: 4px
p-2padding: 8px
p-4padding: 16px
p-8padding: 32px
m-4margin: 16px
Colors
bg-red-5■
bg-blue-5■
bg-green-5■
bg-orange-5■
bg-*-1 to 1010 shades each
Typography
text-whitecolor: #fff
font-boldweight: 700
text-xlsize: 1.25rem
uppercasetransform: upper
italicstyle: italic
Glass ✦
bg-glassfrosted light
bg-glass-darkfrosted dark
bg-glass-lgheavy blur
bg-glass-chaiorange tint
unique to uvwind