npx nuxi@latest module add color-mode

      

        
export default defineNuxtConfig({
modules: [
  '@nuxt/color-mode',
],
});

      

        
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

      

        
export default defineNuxtConfig({
    css: ['~/assets/css/main.css'],
    postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        },
    },
});

      

        
module.exports = { 
    content: [ 
    './components/**/*.{js,vue,ts}', 
    './layouts/**/*.vue', 
    './pages/**/*.vue', 
    './plugins/**/*.{js,ts}', 
    './app.vue', 
    './error.vue', 
    ], 
    theme: { 
    extend: {}, 
    }, 
    plugins: [], 
}

      

        
@tailwind base;
@tailwind components;
@tailwind utilities;

      

        
<script setup lang='ts'>
const colorMode = useColorMode()
</script>

<template>
<div>
  <h1>Theme mode: {{ $colorMode.value }}</h1>
  <select v-model='$colorMode.preference'>
    <option value='system'>System</option>
    <option value='light'>Light</option>
    <option value='dark'>Dark</option>
    <option value='sepia'>Sepia</option>
  </select>
</div>
</template>

      

        
<script setup lang='ts'>
const colorMode = useColorMode()
</script>

<template>
<div class='bg-white dark:bg-black'>
  <h1 class='text-black dark:text-white'>Hello World!</h1>
  <button 
    class='border border-slate-500 dark:border-slate-950 hover:bg-slate-200 dark:hover:bg-slate-900'>
    Click me!
  </button>
</div>
</template>