javascript - מצב כהה של TailwindCSS לא עובד ב-Nuxt.js

אני עוסק בזה כבר כמה ימים ועדיין לא מצליח לגרום לזה לעבוד. אני מנסה להפעיל את מצב הלילה כולו עם Tailwind CSS ב-Nuxt.js.

אני חושב שזה עשוי להיות בעיה בהגדרת ה-CSS ולא בצד של TypeScript מכיוון שיש לי מתג שמחליף את המחלקה <html></html> בין בהיר וכהה.

כהתייחסות, ניסיתי להעתיק את עבודתו של פיאזארה שתוכל למצוא כאן.

סביבה :

• ווינדוס 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 בשביל כל הקבצים האחרים

תודה לכל מי שעוזר :)

תשובה #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.