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"> 使一切变得黑暗。

删除它，一切都将成为轻型模式。添加回来，一切都将是黑暗模式。

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

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

1 个答案: