diff options
Diffstat (limited to 'tailwindcss')
| -rw-r--r-- | tailwindcss/02-vite/README | 1 | ||||
| -rw-r--r-- | tailwindcss/02-vite/index.html | 19 | ||||
| -rw-r--r-- | tailwindcss/02-vite/src/main.js | 25 | ||||
| -rw-r--r-- | tailwindcss/02-vite/src/style.css | 6 |
4 files changed, 42 insertions, 9 deletions
diff --git a/tailwindcss/02-vite/README b/tailwindcss/02-vite/README index 75a9204..bfd1a1d 100644 --- a/tailwindcss/02-vite/README +++ b/tailwindcss/02-vite/README @@ -9,6 +9,7 @@ What Tailwind CSS features are used: Other important aspects of this project: - JavaScript local storage is used to permanently store the set theme by the user. This is not always required and Tailwind CSS can automatically pick the theme set at OS level. + - Font size increas and decress does not use Tailwind CSS. JavaScript has been used to set the root element's font size. That changes the size of all components in the page. Why? (Hint: Think about how the rem unit works) Try this sample project: diff --git a/tailwindcss/02-vite/index.html b/tailwindcss/02-vite/index.html index f44f5a1..3060e72 100644 --- a/tailwindcss/02-vite/index.html +++ b/tailwindcss/02-vite/index.html @@ -6,11 +6,11 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/src/style.css" rel="stylesheet"> <title>Tailwind CSS Starter</title> - + <!-- Prevent screen flashing on initial load --> <script> - if (localStorage.getItem('theme') === 'dark' || - (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + if (localStorage.getItem('theme') === 'dark' || + (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); @@ -19,7 +19,7 @@ </head> <body class="transition-colors duration-300"> - <div class="flex gap-10 min-h-screen flex-col bg-white dark:bg-gray-800"> + <div class="flex gap-10 min-h-screen flex-col bg-white dark:bg-gray-800 dark:text-white"> <div class="flex justify-between px-6 py-4 shadow-lg text-black dark:text-white"> <h1 class="text-lg font-bold">MyWebsite</h1> <nav class="flex gap-4"> @@ -27,6 +27,8 @@ <a href="#">Blog</a> <a href="#">Contact</a> <a href="#" id="theme-toggle">Toggle Theme</a> + <a href="#" onclick="increaseFontSize()">A+</a> + <a href="#" onclick="decreaseFontSize()">A-</a> </nav> </div> @@ -71,10 +73,15 @@ <section class="text-center"> <h2 class="text-xl font-semibold text-center mb-4">Layers</h2> - <p>Reference: <a href="https://tailwindcss.com/docs/adding-custom-styles" target="_blank">Adding custom + <p>Reference: <a class="underline" href="https://tailwindcss.com/docs/adding-custom-styles" target="_blank">Adding + custom classes</a></p> - <a href="#" class="btn">Test</a> <a href="#" class="btn">Test</a> <a href="#" class="btn border-red">Test</a> + <div class="flex gap-3 justify-center mt-3"> + <a href="#" class="btn">Test</a> + <a href="#" class="btn">Test</a> + <a href="#" class="btn">Test</a> + </div> </section> <footer 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 |