Skip to content

Latest commit

 

History

History
38 lines (27 loc) · 715 Bytes

README.md

File metadata and controls

38 lines (27 loc) · 715 Bytes
Raw

Tailwind CSS Dark Mode Toggle

Floating button to toggle dark mode for Tailwind CSS

How to use

  1. Enable selector for the dark mode.
/** @type {import('tailwindcss').Config} */

export default {
  darkMode: "selector",
  // ...
};
  1. Optional: Add the data-theme attribute to the html tag.
<html lang="en" class="dark:[color-scheme:dark]">
  <!-- ... -->
</html>
  1. Load the script before the body tag.
<script
  src="https://cdn.jsdelivr.net/gh/gasatrya/tw-toggle@1.0.1/tw-theme-toggle.min.js"
  type="module"
  defer
></script>

Demo

https://tailspace.vercel.app/components/team/team-a.html