# TailwindCSS Dark Mode

By default, tailwindcss-dark-mode, opens in a new window uses the .mode-dark selector for dark mode.

It is possible to changing the Selector, opens in a new window in "tailwindcss-dark-mode" plug-in, however, you can also adjust the class using the className prop to generate the class compatible with the plugin.

e.g.

<DarkMode className="mode-%cm">
  <template v-slot="{ mode }">
    Color mode: {{ mode }}
  </template>
</DarkMode>
 
        Copied!

Output

<!DOCTYPE html>
<html lang="en" class="mode-dark">
<head>
  <meta charset="UTF-8">
...
 
        Copied!

TailwindCSS Dark Mode | Vue dark-mode has loaded