2 files changed, 28 insertions, 3 deletions
diff --git a/tailwindcss/02-vite/src/main.js b/tailwindcss/02-vite/src/main.js
index 9a69e49..c39e9ff 100644
--- a/tailwindcss/02-vite/src/main.js
+++ b/tailwindcss/02-vite/src/main.js
@@ -1,3 +1,5 @@
+/* Toggle button (or link) to change the theme */
+
 const toggleButton = document.querySelector('#theme-toggle');
 
 toggleButton.addEventListener('click', () => {
@@ -8,3 +10,26 @@ toggleButton.addEventListener('click', () => {
   const isDark = document.documentElement.classList.contains('dark');
   localStorage.setItem('theme', isDark ? 'dark' : 'light');
 });
+
+
+/* Font size increase or decrease */
+
+let currentSize = 1; // 1 rem is the baseline
+
+function increaseFontSize() {
+  if (currentSize < 1.5) { // Cap at 150%
+    currentSize += 0.1;
+    applyFontSize();
+  }
+}
+
+function decreaseFontSize() {
+  if (currentSize > 0.8) { // Set a minimum limit
+    currentSize -= 0.1;
+    applyFontSize();
+  }
+}
+
+function applyFontSize() {
+  document.documentElement.style.fontSize = currentSize * 100 + "%";
+}
diff --git a/tailwindcss/02-vite/src/style.css b/tailwindcss/02-vite/src/style.css
index d848adb..5842c85 100644
--- a/tailwindcss/02-vite/src/style.css
+++ b/tailwindcss/02-vite/src/style.css
@@ -5,14 +5,14 @@
 
 /* Base layer customization with Tailwind CSS classes - applies to elements like p, a, img */
 @layer base {
-  a {
-    @apply text-pink-500;
+  h2 {
+    @apply dark:text-pink-500;
   }
 }
 
 /* Components layer - Specify rules for components like btn, card, badge, etc. */
 @layer components {
   .btn {
-    @apply inline-block rounded p-2 bg-gray-300 hover:bg-gray-900 hover:text-white transition;
+    @apply inline-block rounded p-2 bg-gray-300  hover:bg-gray-900 dark:bg-neutral-800 dark:hover:bg-neutral-700 hover:text-white transition;
   }
 }
 \ No newline at end of file