Tailwind Dark Theme

created at: 5/27/2022
# tailwind
# css

For toggling Dark Mode inside a Tailwind-Application manually, add this snippet to your tailwind.config.js

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

By doing so, you can use the dark: modifier to apply tailwind classes only in dark mode.

For making use of the “class approach”, the css class dark needs to be added ideally to the html-tag of the page, or the body-tag.

NOTE: Based on experiences, I had issues using the dark:-modifier inside a regular css class in combination with the @apply-decorator in SvelteKit

References

© 2022