Creating a Custom Utility-First CSS Engine (Like Tailwind) Using JavaScript + Vite
In this project, I built my own lightweight utility-first CSS engine inspired by Tailwind CSS 🚀
Instead of writing traditional CSS, this system allows developers to use custom classes like:
chai-p-4 → padding
chai-bg-primary → background
chai-text-16 → font size
The engine scans the DOM, extracts class names, generates CSS dynamically, and applies styles in real time.
---
🔧 What this project covers:
DOM traversal and class extraction
Regex-based class parsing
Dynamic CSS generation (JIT-style)
Runtime style injection using JavaScript
Building a reusable front-end library
Publishing an NPM package
---
📦 NPM Package:
👉 https://www.npmjs.com/package/vins-ka-tail...
💻 GitHub Repository:
👉 https://github.com/vinnymadaan/chai-tailwind
🌐 Live Demo:
👉 https://vinskatailwind.netlify.app/
---
🎥 In this video:
00:00 Introduction
00:30 Project Overview
01:30 How the Engine Works
03:00 Code Walkthrough
06:00 Live Demo
08:00 NPM Package & Deployment
---
💡 Why this project is important:
This project helped me understand how frameworks like Tailwind CSS actually work under the hood. It focuses on core JavaScript concepts like parsing, DOM manipulation, and system design.
---
🧠 Tech Stack:
JavaScript (Vanilla)
Vite
NPM Package Publishing
---
⭐ If you found this helpful:
Like 👍 | Subscribe 🔔 | Share 🚀
---
#javascript #tailwindcss #webdevelopment #frontend #npm #vite #codingproject