ChaiWind — Build Your Own TailwindCSS

A from-scratch JavaScript implementation of a utility-first CSS framework, inspired by TailwindCSS. Built to understand how modern CSS frameworks really work under the hood.

What is ChaiWind?

ChaiWind is a learning-focused project that recreates the core mechanics of TailwindCSS from the ground up using vanilla JavaScript. Instead of just using a CSS framework, this project digs into how one is built — from parsing utility class names to generating CSS on the fly.

Think of it as brewing your own chai instead of buying a store-bought teabag. Same idea, but you understand every ingredient.

Features

• Custom utility-first CSS class generation inspired by TailwindCSS
• Built with pure JavaScript (95%+ of the codebase)
• Lightweight, zero external CSS framework dependencies
• Clean index.html demo to see the framework in action
• Simple project structure — easy to read, extend, and learn from

Project Structure

ChaiWind---Own-TailwindCSS/
├── index.html       # Demo HTML file using ChaiWind classes
├── main.js          # Core framework logic — class parser & CSS generator
├── package.json     # Project metadata
└── .gitignore       # Git ignore rules

Getting Started

Prerequisites

Make sure you have Node.js installed on your machine.

Installation

Clone the repository and install dependencies:

git clone https://github.com/amanone4t-code/ChaiWind---Own-TailwindCSS.git
cd ChaiWind---Own-TailwindCSS
npm install

Running the Project

Open index.html directly in your browser, or use a local development server like Live Server in VS Code for the best experience.

How It Works

ChaiWind works by scanning your HTML for utility class names and dynamically generating the corresponding CSS rules — similar to how TailwindCSS's JIT (Just-in-Time) mode works. The core logic lives in main.js, which:

1. Scans the DOM for elements and their class names
2. Parses each class name to identify the utility and its value (e.g., text-red, p-4)
3. Generates the appropriate CSS and injects it into the page

This makes it a fantastic project for understanding how utility-first frameworks turn class names into styles.

What You'll Learn from This Project

Building a CSS framework from scratch teaches concepts that are hard to pick up just by using TailwindCSS:

• How utility class names map to CSS properties
• String parsing and pattern matching in JavaScript
• Dynamic stylesheet injection via the DOM
• The design philosophy behind atomic/utility-first CSS

Supported Utility Classes

ChaiWind uses a chai- prefix for all its utility classes, which keeps them clearly namespaced and avoids conflicts with any other CSS you may have on the page. You apply them directly in your HTML just like TailwindCSS — no configuration files needed.

<h1 class="chai-bg-blue">Hello, ChaiWind!</h1>

Background Colors

Background color utilities let you set the background-color of any element. The class format is chai-bg-{color}.

| Class | CSS Output | |---|---| | chai-bg-red | background-color: red | | chai-bg-blue | background-color: blue | | chai-bg-green | background-color: green | | chai-bg-yellow | background-color: yellow | | chai-bg-white | background-color: white | | chai-bg-black | background-color: black | | chai-bg-gray | background-color: gray | | chai-bg-orange | background-color: orange | | chai-bg-purple | background-color: purple | | chai-bg-pink | background-color: pink |

Text Colors

Text color utilities control the color property of an element's text content. The format is chai-text-{color}.

| Class | CSS Output | |---|---| | chai-text-red | color: red | | chai-text-blue | color: blue | | chai-text-green | color: green | | chai-text-white | color: white | | chai-text-black | color: black | | chai-text-gray | color: gray | | chai-text-yellow | color: yellow |

Spacing — Padding

Padding utilities add inner spacing to an element. ChaiWind supports both uniform padding and directional padding using the chai-p-{value} pattern.

| Class | CSS Output | |---|---| | chai-p-1 | padding: 4px | | chai-p-2 | padding: 8px | | chai-p-4 | padding: 16px | | chai-p-6 | padding: 24px | | chai-p-8 | padding: 32px | | chai-px-4 | padding-left: 16px; padding-right: 16px | | chai-py-4 | padding-top: 16px; padding-bottom: 16px |

Spacing — Margin

Margin utilities add outer spacing around an element, using the chai-m-{value} pattern.

| Class | CSS Output | |---|---| | chai-m-1 | margin: 4px | | chai-m-2 | margin: 8px | | chai-m-4 | margin: 16px | | chai-m-6 | margin: 24px | | chai-m-8 | margin: 32px | | chai-mx-4 | margin-left: 16px; margin-right: 16px | | chai-my-4 | margin-top: 16px; margin-bottom: 16px |

Typography — Font Size

Font size utilities follow the chai-text-{size} pattern and map to standard readable scale values.

| Class | CSS Output | |---|---| | chai-text-xs | font-size: 12px | | chai-text-sm | font-size: 14px | | chai-text-base | font-size: 16px | | chai-text-lg | font-size: 18px | | chai-text-xl | font-size: 20px | | chai-text-2xl | font-size: 24px | | chai-text-3xl | font-size: 30px |

Typography — Font Weight

Font weight utilities let you control text boldness using the chai-font-{weight} pattern.

| Class | CSS Output | |---|---| | chai-font-thin | font-weight: 100 | | chai-font-normal | font-weight: 400 | | chai-font-medium | font-weight: 500 | | chai-font-semibold | font-weight: 600 | | chai-font-bold | font-weight: 700 | | chai-font-extrabold | font-weight: 800 |

Display & Layout

Layout utilities control how elements are displayed and positioned on the page.

| Class | CSS Output | |---|---| | chai-flex | display: flex | | chai-block | display: block | | chai-inline | display: inline | | chai-hidden | display: none | | chai-flex-row | flex-direction: row | | chai-flex-col | flex-direction: column | | chai-items-center | align-items: center | | chai-justify-center | justify-content: center | | chai-justify-between | justify-content: space-between |

Width & Height

Size utilities help you define the dimensions of an element.

| Class | CSS Output | |---|---| | chai-w-full | width: 100% | | chai-w-half | width: 50% | | chai-h-full | height: 100% | | chai-h-screen | height: 100vh | | chai-w-screen | width: 100vw |

Border & Rounded Corners

Border utilities let you add outlines and rounded corners to elements.

| Class | CSS Output | |---|---| | chai-border | border: 1px solid black | | chai-border-2 | border: 2px solid black | | chai-rounded | border-radius: 4px | | chai-rounded-md | border-radius: 8px | | chai-rounded-lg | border-radius: 12px | | chai-rounded-full | border-radius: 9999px |

Usage Example

Here is a quick example showing how to combine multiple ChaiWind utilities to build a styled card component:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ChaiWind Demo</title>
</head>
<body class="chai-bg-gray chai-flex chai-items-center chai-justify-center chai-h-screen">

  <div class="chai-bg-white chai-p-8 chai-rounded-lg chai-border">
    <h1 class="chai-text-2xl chai-font-bold chai-text-blue">Welcome to ChaiWind ☕</h1>
    <p class="chai-text-base chai-text-gray chai-my-4">
      A utility-first CSS framework built from scratch in JavaScript.
    </p>
    <button class="chai-bg-blue chai-text-white chai-px-4 chai-py-4 chai-rounded-md">
      Get Started
    </button>
  </div>

  <script src="main.js"></script>
</body>
</html>