vins-ka-tailwind
v1.0.4
Published
A custom-built, client-side **utility-first CSS engine** inspired by Tailwind CSS.
Readme
🚀 Vins Ka Tailwind — Lightweight Utility-First CSS Engine
A custom-built, client-side utility-first CSS engine inspired by Tailwind CSS.
Instead of writing traditional CSS, developers can use structured utility classes like:
chai-p-2 → padding: 8px
chai-bg-red → background-color: red
chai-text-16 → font-size: 16px
The engine dynamically scans the DOM, extracts class names, generates CSS, and applies styles at runtime.
📌 Project Overview
This project demonstrates how utility-first CSS frameworks work internally by implementing:
- DOM traversal
- Class extraction and parsing
- Dynamic CSS generation
- Runtime style injection
It is designed as a lightweight, reusable JavaScript library.
🌐 Live Demo
👉 https://vinskatailwind.netlify.app/
📂 GitHub Repository
👉 https://github.com/vinnymadaan/chai-tailwind
🎥 Video Walkthrough
👉 https://youtu.be/sQX9O0Lcqm8
The video should include:
- Explanation of your approach
- How class parsing works
- Code walkthrough
- Browser demo
🐦 Twitter (X) Post
👉 https://x.com/VinnyMadaan3/status/2034988401775321172?s=20
Include:
- What you built
- How it works (brief)
- Screenshots/demo
- GitHub + live links
⚙️ How It Works
Pipeline:
DOM → Extract Classes → Parse Utilities → Generate CSS → Apply Styles
1. DOM Traversal
- Reads HTML using: document.body.innerHTML
- Finds all class attributes
2. Class Extraction
- Extracts all class names
- Splits them into individual classes
- Removes duplicates
3. Pattern Parsing
Only classes starting with:
chai-*
are processed.
Format:
chai-{property}-{value}
Examples:
- chai-p-4 → padding
- chai-m-2 → margin
- chai-text-16 → font-size
4. CSS Generation
The engine converts class names into CSS rules.
Dynamic Utilities
| Class | Output | |------|--------| | chai-p-4 | padding: 16px | | chai-m-2 | margin: 8px | | chai-text-18 | font-size: 18px |
5. Style Injection
- Creates a
<style>tag - Injects generated CSS into
<head> - Styles are applied instantly
🧪 Example Usage
HTML
<div class="chai-p-4 chai-bg-primary chai-text-light">
Hello World
</div>
<button class="chai-btn">Click Me</button>