NAMRA SUTHAR

Fullstack Developer | Built My Own Tailwind Engine

Passionate about learning web development through hands-on projects. I've built a custom utility-first CSS engine called Chaiwind that converts class names into inline styles using JavaScript.

Chaiwind – Custom CSS Engine

A powerful JavaScript-based utility-first CSS system that mimics Tailwind's approach. It parses class names and dynamically applies inline styles to elements. This system demonstrates the core concepts of modern CSS frameworks and includes support for 20+ utilities including padding, margin, colors, typography, and more.

Live Demo

Test the Chaiwind engine in real-time:

This box is styled with Chaiwind classes!

Try These Combinations:

  • ⚫ Red Card
  • ⚫ Green Shadow
  • ⚫ Purple Rounded
  • ⚫ Dark Yellow
  • ⚫ Amber Accent

Features & Utilities

Spacing

Padding & Margin (p, m): 0-50px

Colors

Background & Text (10+ colors)

Typography

Font sizes: sm to 4xl

Layout

Flex, Grid, Block, Hidden

Effects

Shadows, Borders, Opacity

Responsive

Dynamic MutationObserver

Supported Utilities

Padding

chai-p-0 to chai-p-50

Margin

chai-m-0 to chai-m-50

Background Colors

chai-bg-[red|blue|green|purple|black|white|gray|yellow|amber|orange]

Text Colors

chai-text-[white|black|red|blue|green|yellow|gray]

Font Size

chai-text-[sm|base|lg|xl|2xl|3xl]

Display

chai-flex | chai-block | chai-hidden | chai-grid

Flexbox

chai-flex-col | chai-justify-center | chai-items-center

Borders

chai-rounded | chai-rounded-lg | chai-rounded-full

Shadows

chai-shadow | chai-shadow-lg | chai-shadow-xl

Opacity

chai-opacity-[50|75|100]

Dimensions

chai-w-full | chai-h-full | chai-h-screen

Gap

chai-gap-[4|8|12|16]