Javascript TailwindCSS暗模式在Nuxt.js中不工作

我已经做了几天了，但似乎仍然无法让它工作。我正试图在Nuxt.js中使用Tailwind CSS实现整个黑暗模式

我认为这可能是CSS设置的问题，而不是TypeScript方面的问题，因为我有一个开关，可以将

类切换为亮和暗

作为参考，我一直在试图复制你能找到的Fayazara的作品

环境：

• Windows10Pro
• 节点14.15.4
• NPM 6.14.10
• Nuxt.js 2.14.12
• 尾风CSS 2.0.2

以下是一些配置文件：

numxt.config.js:

导出默认值{
负责人：{
//元材料
},
purgeCSS:{
白名单：[“暗模式”]，
},
组成部分：正确，
构建模块：[
“@nuxt/typescript build”，
“@nuxtjs/tailwindcss”，
“@nuxtjs/color mode”，
],
颜色模式：{
类后缀：“
},
...
...
}

tailwind.config.js:

module.exports={
主题：{
黑色选择器：'.dark mode'，
},
变体：{
背景颜色：[“暗”、“暗悬停”、“暗组悬停”、“暗偶数”、“暗奇数”、“悬停”、“响应性”]，
边框颜色：[“暗”、“暗焦点”、“暗焦点内”、“悬停”、“响应性”]，
textColor:['dark'、'dark hover'、'dark active'、'hover'、'responsive']
},
插件：[
需要（'tailwindcss-dark-mode'）（）
]
}

~/assets/css/tailwind.css:

@import'tailwindcss/base'；
@导入“tailwindcss/组件”；
@导入“tailwindcss/utilities”；

我在我的设置页面中有这个设置，即使使用切换，它也会保持蓝色

我已将我的项目上载到所有其他文件

---

感谢所有帮助您的人：）

看起来您正在使用第三方插件来启用暗模式支持。TailwindCSS 2.0（您正在使用的）本身支持暗模式，因此无需添加插件

将您的

tailwind.config.js

更改为：

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

通过类

dark

启用暗模式

然后在

layouts/default

中，您有：

<template>
    <div class="dark">
        <Navigation />
        <Nuxt />
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Navigation from '~/components/Navigation.vue'
export default Vue.extend({
    name: 'Default',
    components: {
        Navigation
    }
})
</script>

从“Vue”导入Vue
从“~/components/Navigation.vue”导入导航
导出默认Vue.extend({
名称：“默认值”，
组成部分：{
航行
}
})

那

让一切变得黑暗

移除该选项，所有内容都将处于灯光模式。再加上它，一切都将是黑暗模式

有关更多信息，请参阅TailwindCSS文档