JellywindCSS
A CSS 2.1 utility-first stylesheet inspired by Tailwind
What is JellywindCSS?
JellywindCSS is CSS 2.1 stylesheet that brings utility-first styling to environments where modern CSS features are unavailable. It provides a subset of Tailwind-like classes that work in legacy browsers and restricted rendering contexts.
This project is ideal for any environment that cannot or don't want to support CSS3 or newer specifications.
For people who have already been poisoned by modern web tooling, it can be not so satisfying to write CSS without a utility-class approach. Constraints create challenges, don’t they? You can think about it this way if you have a “guilty pleasure” for writing markup and laying out pages. But keep in mind that the web must die!
Intentionally Removed Features
To maintain CSS 2.1 compatibility, the following features are not included:
- Flexbox - No flex, items-center, justify-between, etc.
- Grid - No grid layout utilities
- Media Queries - No responsive breakpoints (sm:, md:, lg:)
- Pseudo-classes - No hover:, focus:, active: variants
- CSS Variables - No custom properties
- Transforms - No rotate, scale, translate
- Transitions - No animation utilities
- calc() - No dynamic calculations
And others.
Available Utilities
JellywindCSS provides these CSS 2.1-compatible utility classes:
Layout
display, position, float, clear, overflow, z-index, top/right/bottom/left
Spacing
margin (m-), padding (p-), space-x, space-y with scale from 0 to 96
Sizing
width (w-), height (h-), min/max width and height
Typography
font-size (text-xs to text-9xl), font-weight, font-family (no specific fonts allowed, only sans-serif/serif/mono), text-align, line-height, letter-spacing
Colors
Full color palette
Borders
border-width, border-style, border-color
Other
visibility, cursor, list-style, text-decoration, vertical-align
Usage Example
Layout without flexbox using floats:
<div class="container"> <div class="column-left">Left content</div> <div class="column-right">Right content</div> <div>
Source code
jellywindcss-v0.0.1.css — 135.3kB
Color Palette
Generated Utilities| Class Name | Visual Preview | Hex Code |
|---|---|---|
| bg-red-50 | #fef2f2 | |
| bg-red-100 | #ffe2e2 | |
| bg-red-200 | #ffc9c9 | |
| bg-red-300 | #ffa2a2 | |
| bg-red-400 | #ff6467 | |
| bg-red-500 | #fb2c36 | |
| bg-red-600 | #e7000b | |
| bg-red-700 | #c10007 | |
| bg-red-800 | #9f0712 | |
| bg-red-900 | #82181a | |
| bg-red-950 | #460809 | |
| bg-orange-50 | #fff7ed | |
| bg-orange-100 | #ffedd4 | |
| bg-orange-200 | #ffd6a7 | |
| bg-orange-300 | #ffb86a | |
| bg-orange-400 | #ff8904 | |
| bg-orange-500 | #ff6900 | |
| bg-orange-600 | #f54900 | |
| bg-orange-700 | #ca3500 | |
| bg-orange-800 | #9f2d00 | |
| bg-orange-900 | #7e2a0c | |
| bg-orange-950 | #441306 | |
| bg-amber-50 | #fffbeb | |
| bg-amber-100 | #fef3c6 | |
| bg-amber-200 | #fee685 | |
| bg-amber-300 | #ffd230 | |
| bg-amber-400 | #ffb900 | |
| bg-amber-500 | #fe9a00 | |
| bg-amber-600 | #e17100 | |
| bg-amber-700 | #bb4d00 | |
| bg-amber-800 | #973c00 | |
| bg-amber-900 | #7b3306 | |
| bg-amber-950 | #461901 | |
| bg-yellow-50 | #fefce8 | |
| bg-yellow-100 | #fef9c2 | |
| bg-yellow-200 | #fff085 | |
| bg-yellow-300 | #ffdf20 | |
| bg-yellow-400 | #fdc700 | |
| bg-yellow-500 | #f0b100 | |
| bg-yellow-600 | #d08700 | |
| bg-yellow-700 | #a65f00 | |
| bg-yellow-800 | #894b00 | |
| bg-yellow-900 | #733e0a | |
| bg-yellow-950 | #432004 | |
| bg-lime-50 | #f7fee7 | |
| bg-lime-100 | #ecfcca | |
| bg-lime-200 | #d8f999 | |
| bg-lime-300 | #bbf451 | |
| bg-lime-400 | #9ae600 | |
| bg-lime-500 | #7ccf00 | |
| bg-lime-600 | #5ea500 | |
| bg-lime-700 | #497d00 | |
| bg-lime-800 | #3c6300 | |
| bg-lime-900 | #35530e | |
| bg-lime-950 | #192e03 | |
| bg-green-50 | #f0fdf4 | |
| bg-green-100 | #dcfce7 | |
| bg-green-200 | #b9f8cf | |
| bg-green-300 | #7bf1a8 | |
| bg-green-400 | #05df72 | |
| bg-green-500 | #00c950 | |
| bg-green-600 | #00a63e | |
| bg-green-700 | #008236 | |
| bg-green-800 | #016630 | |
| bg-green-900 | #0d542b | |
| bg-green-950 | #032e15 | |
| bg-emerald-50 | #ecfdf5 | |
| bg-emerald-100 | #d0fae5 | |
| bg-emerald-200 | #a4f4cf | |
| bg-emerald-300 | #5ee9b5 | |
| bg-emerald-400 | #00d492 | |
| bg-emerald-500 | #00bc7d | |
| bg-emerald-600 | #009966 | |
| bg-emerald-700 | #007a55 | |
| bg-emerald-800 | #006045 | |
| bg-emerald-900 | #004f3b | |
| bg-emerald-950 | #002c22 | |
| bg-teal-50 | #f0fdfa | |
| bg-teal-100 | #cbfbf1 | |
| bg-teal-200 | #96f7e4 | |
| bg-teal-300 | #46ecd5 | |
| bg-teal-400 | #00d5be | |
| bg-teal-500 | #00bba7 | |
| bg-teal-600 | #009689 | |
| bg-teal-700 | #00786f | |
| bg-teal-800 | #005f5a | |
| bg-teal-900 | #0b4f4a | |
| bg-teal-950 | #022f2e | |
| bg-cyan-50 | #ecfeff | |
| bg-cyan-100 | #cefafe | |
| bg-cyan-200 | #a2f4fd | |
| bg-cyan-300 | #53eafd | |
| bg-cyan-400 | #00d3f2 | |
| bg-cyan-500 | #00b8db | |
| bg-cyan-600 | #0092b8 | |
| bg-cyan-700 | #007595 | |
| bg-cyan-800 | #005f78 | |
| bg-cyan-900 | #104e64 | |
| bg-cyan-950 | #053345 | |
| bg-sky-50 | #f0f9ff | |
| bg-sky-100 | #dff2fe | |
| bg-sky-200 | #b8e6fe | |
| bg-sky-300 | #74d4ff | |
| bg-sky-400 | #00bcff | |
| bg-sky-500 | #00a6f4 | |
| bg-sky-600 | #0084d1 | |
| bg-sky-700 | #0069a8 | |
| bg-sky-800 | #00598a | |
| bg-sky-900 | #024a70 | |
| bg-sky-950 | #052f4a | |
| bg-blue-50 | #eff6ff | |
| bg-blue-100 | #dbeafe | |
| bg-blue-200 | #bedbff | |
| bg-blue-300 | #8ec5ff | |
| bg-blue-400 | #51a2ff | |
| bg-blue-500 | #2b7fff | |
| bg-blue-600 | #155dfc | |
| bg-blue-700 | #1447e6 | |
| bg-blue-800 | #193cb8 | |
| bg-blue-900 | #1c398e | |
| bg-blue-950 | #162456 | |
| bg-indigo-50 | #eef2ff | |
| bg-indigo-100 | #e0e7ff | |
| bg-indigo-200 | #c6d2ff | |
| bg-indigo-300 | #a3b3ff | |
| bg-indigo-400 | #7c86ff | |
| bg-indigo-500 | #615fff | |
| bg-indigo-600 | #4f39f6 | |
| bg-indigo-700 | #432dd7 | |
| bg-indigo-800 | #372aac | |
| bg-indigo-900 | #312c85 | |
| bg-indigo-950 | #1e1a4d | |
| bg-violet-50 | #f5f3ff | |
| bg-violet-100 | #ede9fe | |
| bg-violet-200 | #ddd6ff | |
| bg-violet-300 | #c4b4ff | |
| bg-violet-400 | #a684ff | |
| bg-violet-500 | #8e51ff | |
| bg-violet-600 | #7f22fe | |
| bg-violet-700 | #7008e7 | |
| bg-violet-800 | #5d0ec0 | |
| bg-violet-900 | #4d179a | |
| bg-violet-950 | #2f0d68 | |
| bg-purple-50 | #faf5ff | |
| bg-purple-100 | #f3e8ff | |
| bg-purple-200 | #e9d4ff | |
| bg-purple-300 | #dab2ff | |
| bg-purple-400 | #c27aff | |
| bg-purple-500 | #ad46ff | |
| bg-purple-600 | #9810fa | |
| bg-purple-700 | #8200db | |
| bg-purple-800 | #6e11b0 | |
| bg-purple-900 | #59168b | |
| bg-purple-950 | #3c0366 | |
| bg-fuchsia-50 | #fdf4ff | |
| bg-fuchsia-100 | #fae8ff | |
| bg-fuchsia-200 | #f6cfff | |
| bg-fuchsia-300 | #f4a8ff | |
| bg-fuchsia-400 | #ed6aff | |
| bg-fuchsia-500 | #e12afb | |
| bg-fuchsia-600 | #c800de | |
| bg-fuchsia-700 | #a800b7 | |
| bg-fuchsia-800 | #8a0194 | |
| bg-fuchsia-900 | #721378 | |
| bg-fuchsia-950 | #4b004f | |
| bg-pink-50 | #fdf2f8 | |
| bg-pink-100 | #fce7f3 | |
| bg-pink-200 | #fccee8 | |
| bg-pink-300 | #fda5d5 | |
| bg-pink-400 | #fb64b6 | |
| bg-pink-500 | #f6339a | |
| bg-pink-600 | #e60076 | |
| bg-pink-700 | #c6005c | |
| bg-pink-800 | #a3004c | |
| bg-pink-900 | #861043 | |
| bg-pink-950 | #510424 | |
| bg-rose-50 | #fff1f2 | |
| bg-rose-100 | #ffe4e6 | |
| bg-rose-200 | #ffccd3 | |
| bg-rose-300 | #ffa1ad | |
| bg-rose-400 | #ff637e | |
| bg-rose-500 | #ff2056 | |
| bg-rose-600 | #ec003f | |
| bg-rose-700 | #c70036 | |
| bg-rose-800 | #a50036 | |
| bg-rose-900 | #8b0836 | |
| bg-rose-950 | #4d0218 | |
| bg-slate-50 | #f8fafc | |
| bg-slate-100 | #f1f5f9 | |
| bg-slate-200 | #e2e8f0 | |
| bg-slate-300 | #cad5e2 | |
| bg-slate-400 | #90a1b9 | |
| bg-slate-500 | #62748e | |
| bg-slate-600 | #45556c | |
| bg-slate-700 | #314158 | |
| bg-slate-800 | #1d293d | |
| bg-slate-900 | #0f172b | |
| bg-slate-950 | #020618 | |
| bg-gray-50 | #f9fafb | |
| bg-gray-100 | #f3f4f6 | |
| bg-gray-200 | #e5e7eb | |
| bg-gray-300 | #d1d5dc | |
| bg-gray-400 | #99a1af | |
| bg-gray-500 | #6a7282 | |
| bg-gray-600 | #4a5565 | |
| bg-gray-700 | #364153 | |
| bg-gray-800 | #1e2939 | |
| bg-gray-900 | #101828 | |
| bg-gray-950 | #030712 | |
| bg-zinc-50 | #fafafa | |
| bg-zinc-100 | #f4f4f5 | |
| bg-zinc-200 | #e4e4e7 | |
| bg-zinc-300 | #d4d4d8 | |
| bg-zinc-400 | #9f9fa9 | |
| bg-zinc-500 | #71717b | |
| bg-zinc-600 | #52525c | |
| bg-zinc-700 | #3f3f46 | |
| bg-zinc-800 | #27272a | |
| bg-zinc-900 | #18181b | |
| bg-zinc-950 | #09090b | |
| bg-neutral-50 | #fafafa | |
| bg-neutral-100 | #f5f5f5 | |
| bg-neutral-200 | #e5e5e5 | |
| bg-neutral-300 | #d4d4d4 | |
| bg-neutral-400 | #a1a1a1 | |
| bg-neutral-500 | #737373 | |
| bg-neutral-600 | #525252 | |
| bg-neutral-700 | #404040 | |
| bg-neutral-800 | #262626 | |
| bg-neutral-900 | #171717 | |
| bg-neutral-950 | #0a0a0a | |
| bg-stone-50 | #fafaf9 | |
| bg-stone-100 | #f5f5f4 | |
| bg-stone-200 | #e7e5e4 | |
| bg-stone-300 | #d6d3d1 | |
| bg-stone-400 | #a6a09b | |
| bg-stone-500 | #79716b | |
| bg-stone-600 | #57534d | |
| bg-stone-700 | #44403b | |
| bg-stone-800 | #292524 | |
| bg-stone-900 | #1c1917 | |
| bg-stone-950 | #0c0a09 | |
| bg-black | #000 | |
| bg-white | #fff |
JellywindCSS v0.0.1
Based on Tailwind CSS v2.2.19 | Licensed under Croco's Individualistic Free Software License
Maxim Nikonov © 2026 maxim.nikonov@mlibren.com