feat: new notes

obsidian/.obsidian/workspace.json

@@ -18,8 +18,21 @@
                 "source": true
               }
             }
+          },
+          {
+            "id": "c3b9f8dd450f94d2",
+            "type": "leaf",
+            "state": {
+              "type": "markdown",
+              "state": {
+                "file": "Resources/web/Tailwind glowing gradient effect.md",
+                "mode": "preview",
+                "source": true
+              }
+            }
           }
-        ]
+        ],
+        "currentTab": 1
       }
     ],
     "direction": "vertical"
@@ -77,7 +90,7 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "Resources/web/Vercel-Build-Capacity.md",
+                "file": "Resources/web/Tailwind glowing gradient effect.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -106,17 +119,17 @@
       "zk-prefixer:Create new unique note": false
     }
   },
-  "active": "c162e30caf31860d",
+  "active": "c3b9f8dd450f94d2",
   "lastOpenFiles": [
-    "Resources/web/Vercel-getting-started.md",
-    "Resources/web/Vercel-Build-Capacity.md",
+    "Areas/Tailwind.md",
+    "Resources/web/Tailwind glowing gradient effect.md",
     "Resources/web/Theming with Tailwind.md",
-    "Resources/web/Tailwind-Dark-Theme.md",
     "Resources/web/Configure Gitpod.md",
+    "Resources/web/Tailwind-Dark-Theme.md",
+    "Resources/web/Vercel-Build-Capacity.md",
+    "Resources/web/Vercel-getting-started.md",
     "Resources/web/Cloudinary-Svelte-Society-Stream.md",
     "Areas/Vercel.md",
-    "Areas/Tailwind.md",
-    "Areas/SvelteKit.md",
-    "Areas/Preview Environment.md"
+    "Areas/SvelteKit.md"
   ]
 }

obsidian/Areas/Tailwind.md

@@ -6,4 +6,5 @@ created: 27-05-2022
 Tailwind is an open-source CSS framework, that focuses on utility. Instead of providing classes for elements like buttons, it provides utility classes for adding padding, margin, etc...
 
 [[Tailwind-Dark-Theme]] - Adding a dark theme to Tailwind-Pages  
-[[Theming with Tailwind]] - Add themes to tailwind projects
+[[Theming with Tailwind]] - Add themes to tailwind projects  
+[[Tailwind glowing gradient effect]] - Create an glow effect on elements

obsidian/Resources/web/Tailwind glowing gradient effect.md

@@ -0,0 +1,24 @@
+---
+title: Tailwind glowing gradient effect
+tags: [tailwind, css]
+created: 24-12-2022
+---
+For effects like a glowing background, sometimes a drop-shadow is not the right thing. Shadows should be used to display elevation.
+
+Another option here is `blur` that gets applied to an element with the desired background (e.g. a color or a gradient). The important part is, that the element that is responsible for the glow is positioned as `absolute` behind the root element.
+
+```html
+<div class="group relative inline-block">
+  <div
+    class="absolute -inset-0.5 rounded-lg bg-skin-accent opacity-75 blur transition-all duration-200 group-hover:opacity-100"
+  />
+
+  <button class="relative rounded-lg bg-skin-background {classMap[type]}">
+    <slot />
+  </button>
+</div>
+```
+
+
+## References
+- https://www.youtube.com/watch?v=5W6kEP65AH4