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

【问题标题】：TailwindCSS Dark mode not working in Nuxt.jsTailwindCSS 暗模式在 Nuxt.js 中不起作用
【发布时间】：2021-05-04 03:33:49
【问题描述】：

我已经在这里工作了几天，但似乎仍然无法正常工作。我正在尝试使用 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

感谢任何提供帮助的人:)

【问题讨论】：

标签： javascript css typescript nuxt.js tailwind-css

【解决方案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。

【讨论】：