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

Question

我已經在這里工作了幾天，但似乎仍然無法正常工作。 我試圖讓整個黑暗模式與 Nuxt.js 中的 Tailwind CSS 一起使用。

我認為這可能是 CSS 設置的問題，而不是 TypeScript 方面的問題，因為我有一個切換開關<hmtl></html> class 到亮和暗

作為參考，我一直在嘗試復制 Fayazara 的作品，您可以在此處找到。

環境：

• Windows 10 Pro
• 節點 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',
}

這通過 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 文檔中的手動切換暗模式。