Vue 3 + Vite + Tailwind CSS

This component provide to use the dark mode functionality with tailwind CSS with a toggle button.

Recommended IDE Setup

• VS Code + Volar

Installation

Run npm -i mk-dm-toggle

Setup

Enable dark mode

To enable dark mode with tailwind CSS, you have to had this to your tailwind.config.js : "darkMode" : "class"

Uses

This component will work by add and remove the class "dark" on the html statement. By default, the toggle button is on the dark mode. So, you have to add on your html statement the class. After that you just have to click on the button to switch between light and dark mode.

To specify on each component how it render you have to add the prefix "dark:" in the class list. By default the light theme will use the class without this prefix.