JAVASCRIPT

tailwind css dark mode

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark Mode!!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Example Text
  </p>
</div>

<script>
  // Change in Tailwinds Config.
  module.exports = {
  darkMode: 'media',
}
</script>

Setting darkmode using Tailwind

<script>
    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark')
    }
</script>

tailwind dark mode class

module.exports = {
  darkMode: 'class',
  // ...
}