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

Question

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

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

作为引用，我一直在尝试复制 Fayazara 的作品，您可以找到 here .

环境:

• Windows 10 专业版
• 节点 14.15.4
• NPM 6.14.10
• Nuxt.js 2.14.12
• TailwindCSS 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',
}

通过类 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">正在使一切变暗。

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

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