Build Your Own Tailwind CSS from Scratch (Atomic CSS Engine in JavaScript)

In this video, we build AtomicChai, a lightweight, runtime atomic CSS engine inspired by Tailwind CSS. Instead of just using a framework, we dive deep into how it actually works under the hood, from parsing class names to generating styles dynamically in the browser. ━━━━━━━━━━━━━━━━━━━━━━ 🔗 ChaiAtomic Links GitHub Repository: https://github.com/sameerbhagtani/ato... NPM Package: https://www.npmjs.com/package/atomic-... Landing Page: https://sameerbhagtani.github.io/atom... ━━━━━━━━━━━━━━━━━━━━━━ 🎓️ Get 10% OFF on ChaiCode Courses Use my code: SAMEER63723 👉️ https://courses.chaicode.com/learn ━━━━━━━━━━━━━━━━━━━━━━ Topics covered in this video: What is Atomic CSS? Reset browser default CSS Designing a class parsing system Building static and dynamic utility classes Using regex for class matching Injecting styles into the DOM Supporting arbitrary values (like chai-w-[50%]) Creating an extendable API (AtomicChai.addClass) Optimizing performance with caching ━━━━━━━━━━━━━━━━━━━━━━ ⏱️ Timestamps 00:00 Introduction & What We’re Building 02:35 Understanding Atomic CSS 04:23 AtomicChai Project Demo 14:17 High-Level Flow 20:42 Deep Dive into the Code 36:54 Wrap-up & Final Thoughts ━━━━━━━━━━━━━━━━━━━━━━ 📚 Assignment from ChaiCode Web Development Cohort This video was created as part of an assignment from the ChaiCode Web Development Cohort. Huge thanks to the mentors and the community for the learning experience! ChaiCode: ‪@chaiaurcode‬ Hitesh Choudhary: ‪@HiteshCodeLab‬ Piyush Garg: ‪@piyushgargdev‬ ━━━━━━━━━━━━━━━━━━━━━━ 🔗 Connect With Me Twitter/X: https://x.com/sameerbhagtani LinkedIn:   / sameerbhagtani   GitHub: https://github.com/sameerbhagtani Instagram:   / sameerbhagtani