如何在Nuxt3的TailwindCSS中修改暗黑模式自定义选择器？

1. 修正 tailwind.config.js 中的 darkMode 配置 #

你的配置存在选择器写法和参数格式问题，正确配置如下：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
  ], // 必须配置content扫描组件文件，否则自定义变体无法生效
  theme: {
    extend: {},
  },
  plugins: [],
  prefix: 'tw-',
  // 配置类触发模式，指定触发选择器为body上的body--dark类
  darkMode: ['class', 'body.body--dark']
}

关键说明：

• ['class', 'body.body--dark'] 表示启用类触发的暗黑模式，当<body>元素带有body--dark类时，自动应用暗黑样式
• 避免使用body[class="body--dark"]这种精确匹配写法，否则body有其他类时会失效；用body.body--dark或.body--dark均可（后者兼容性更强）
• content数组必须正确配置，确保Tailwind能扫描到你的Vue组件，否则自定义暗黑变体不会被生成

2. 修正Vue模板中的暗黑模式类写法 #

你模板里同时写了tw-dark:tw-bg-blue-800和dark:tw-bg-blue-800，后者写法错误。因为tw-前缀仅作用于工具类，变体前缀（如dark:）不需要加前缀，正确写法只保留tw-dark:tw-bg-blue-800即可：

<script lang="ts" setup>

</script>

<template>
  <div class="tw-bg-orange-400 tw-dark:tw-bg-blue-800 tw-flex tw-justify-center tw-items-center tw-h-20 tw-w-full">
    <button class="tw-inline-block tw-rounded tw-bg-blue-500 tw-px-6 tw-pb-2 tw-pt-2.5 tw-text-xs tw-font-medium tw-uppercase tw-leading-normal tw-text-white tw-shadow-primary-3 tw-transition tw-duration-150 tw-ease-in-out hover:tw-bg-primary-accent-300 hover:tw-shadow-primary-2 focus:tw-bg-primary-accent-300 focus:tw-shadow-primary-2 focus:tw-outline-none focus:tw-ring-0 active:tw-bg-primary-600 active:tw-shadow-primary-2 motion-reduce:tw-transition-none tw-dark:tw-shadow-black/30" @click="$q.dark.toggle()">DarkMode Toggle</button>
  </div>
</template>

<style scoped></style>

3. 配置Quasar切换暗黑模式时操作body的class #

你使用$q.dark.toggle()切换模式，默认Quasar会给<html>元素添加/移除dark类，需要修改配置让它操作<body>的body--dark类：

在nuxt.config.ts中添加Quasar配置：

export default defineNuxtConfig({
  // ...其他配置
  quasar: {
    config: {
      dark: {
        class: 'body--dark',
        element: 'body'
      }
    }
  }
})

修改后点击按钮，Quasar会给<body>添加/移除body--dark类，Tailwind就能正确识别并应用暗黑模式样式了。

内容的提问来源于stack exchange，提问作者AIRGG