teawindcss 1.0.0 → 1.0.1

package/README.md

@@ -6,6 +6,8 @@ CSS can be incredibly stressful. Centering a div, fighting specificity, and mana
 
 That's exactly why every class in this library starts with the prefix `chai-`. It's a built-in reminder: whenever you're styling your app and things get overwhelming, take a deep breath, take a sip of **chai (tea)** ☕️, and calm down. We've got the styles covered.
 
+
+🌐 **Live Demo & Full Documentation:** [Visit the TeaWind Showcase](https://preetmax85.github.io/teawindcss/)
 ---
 
 ##  What is TeaWind?
@@ -34,11 +36,46 @@ npm install teawindcss
 
 ## ⚡️ Quick Start
 
-### HTML / Vanilla JS
+### HTML / Vanilla JS (no bundler)
+
+The simplest way. Load the script directly — no import needed.
+```html
+<script src="./node_modules/teawindcss/teawind.js"></script>
+```
+
+TeaWind auto-initializes on `DOMContentLoaded`. Just write your classes and it handles the rest:
+```html
+<div class="chai-flex chai-p-16 chai-bg-blue-dark chai-rounded-xl">
+  <h1 class="chai-text-3xl chai-font-bold chai-text-white">Hello TeaWind</h1>
+</div>
+```
+
+---
 
-Just import the package once. TeaWind auto-initializes and processes the entire DOM on load.
+### ES Modules
 
+If you want to use a module script tag or import statement:
+```html
+<script type="module" src="main.js"></script>
+```
 ```javascript
+// main.js
+import 'teawindcss'; // auto-initializes. done.
+```
+
+Or with manual control via `brew()`:
+```javascript
+import { brew } from 'teawindcss';
+brew();
+```
+
+---
+
+### React (Vite / Create React App)
+
+Import once at the root. The built-in `MutationObserver` handles all dynamic renders automatically — no `useEffect` needed anywhere.
+```jsx
+// main.jsx
 import 'teawindcss';
 ```
 

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "teawindcss",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A lightweight utility-first CSS engine for the browser",
   "main": "teawind.js",
+  "homepage": "https://preetmax85.github.io/teawindcss",
   "files": [
     "teawind.js",
     "README.md"

package/teawind.js

@@ -73,6 +73,7 @@ const stylesDictionary = {
     "chai-border-red": "border-color: red",
     "chai-border-green": "border-color: green",
     "chai-border-blue": "border-color: blue",
+    "chai-border-subtle": "border-color: #292929",
     "chai-border-solid": "border-style: solid",
     "chai-border-dashed": "border-style: dashed",
     "chai-border-dotted": "border-style: dotted",
@@ -251,6 +252,7 @@ class TeaWind {
         const multipleClasses = [...e.classList];
         multipleClasses.forEach(c => {
             if (!c.startsWith(this.prefix)) return;
+
             const styleString = this.resolveClass(c);
             if (styleString) {
                 e.style.cssText += styleString;
@@ -262,7 +264,6 @@ class TeaWind {
         return count;
     }
 
-    // DOM Scanner and Injector
     init() {
         const startTime = performance.now();
         let parsedCount = 0;
@@ -275,6 +276,10 @@ class TeaWind {
 
         const endTime = performance.now();
         console.log(`🍵 TeaWind initialized in ${(endTime - startTime).toFixed(2)}ms. Processed ${parsedCount} utility classes.`);
+        
+        if (typeof document !== 'undefined' && document.body) {
+            document.body.style.visibility = 'visible';
+        }
 
         const observer = new MutationObserver((mutations) => {
             mutations.forEach(mutation => {