TailwindCSS 深色模式在 Nuxt.js 中不起作用

Question

我已经用了几天了，但似乎仍然无法正常工作。我正在尝试在 Nuxt.js.

中与 Tailwind CSS 一起使用整个黑暗模式

我认为这可能是 CSS 设置的问题，而不是 TypeScript 方面的问题，因为我有一个开关可以将 <hmtl></html> class 切换为明暗。

作为参考，我一直在尝试复制 Fayazara 的作品，您可以找到 here。

环境：

Windows 10 专业版
节点 14.15.4
NPM 6.14.10
Nuxt.js 2.14.12
顺风CSS 2.0.2

以下是一些配置文件：

nuxt.config.js:

export default {
    head: {
        // meta stuff
    },
    purgeCSS: {    
        whitelist: ['dark-mode'],  
    },
    components: true,
    buildModules: [
        '@nuxt/typescript-build',
        '@nuxtjs/tailwindcss',
        '@nuxtjs/color-mode',      
    ],
    colorMode: {
        classSuffix: ""
    },
    ...
    ...
}

tailwind.config.js:

module.exports = {
    theme: {
        darkSelector: '.dark-mode',
    },
    variants: {
        backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', 'hover', 'responsive'],
        borderColor: ['dark', 'dark-focus', 'dark-focus-within', 'hover', 'responsive'],
        textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'responsive']
    },
    plugins: [
        require('tailwindcss-dark-mode')()
    ]
}

~/assets/css/tailwind.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

我的设置页面中有这个 <p class="bg-blue-500 dark:bg-red-500">Settings</p> 即使使用切换按钮也保持蓝色

我将我的项目上传到 GitHub 以获取所有其他文件

感谢所有帮助过的人:)

Answer 1

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

将您的 tailwind.config.js 更改为：

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

通过 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>

那个 <div class="dark"> 让一切都变暗了。

删除它，一切都将是轻模式。把它加回去，一切都会变成黑暗模式。

有关详细信息，请参阅 TailwindCSS 文档中的 Toggling dark mode manually。

TailwindCSS 深色模式在 Nuxt.js 中不起作用

TailwindCSS Dark mode not working in Nuxt.js

javascript

css

typescript

nuxt.js

tailwind-css