Laravel 8 Tailwind 3 黑暗模式无法正常工作

Question

所以我正在尝试在我的网站上启用暗模式。我在我的 app.layouts 文件中添加了一个切换开关，它向文件根目录的元素添加和删除了深色 class 并切换复选框添加和删除了这个 class.

我已将 darkMode: 'class', 添加到我的 tailwind.config.js 文件的顶部（正下方 module.exports = {

我有运行 npm run dev 和 npm run dev watch 并且我已经清除了缓存（为了方便，我现在在路由中有这个）

我的页面有一个 div，其中包含一种背景颜色和一种在深色模式下的颜色

<div class="w-full text-center bg-blue-300 dark:bg-blue-600">34</div>

tailwind 正在加载，该区域显示为 bg-blue-300 颜色，但是当我切换到深色模式时，除了 class 深色添加到我的 <html> 之外没有任何变化这样的元素 <html class="dark" lang="en">。我已经检查了文档，看不到我遗漏的任何步骤。

我关注了这个啧啧https://www.section.io/engineering-education/implementing-dark-mode-using-tailwind-css/

我的计划是将 tailwind 配置设置从 class 切换到 media 并在我知道它可以工作时删除切换按钮。

** 编辑 ** 感谢@lordisp，底层功能似乎可以正常工作，但 css 中的 classes 不存在。我想我可以添加一个完整的缩小 tailwind.css 文件，但宁愿只编译我需要的资产。

所以查看我的 tailwind.config.js 文件，我在内容部分有以下内容

ontent: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

看起来 livewire 组件正在加载，所以它们应该添加 css 对吗？

Answer 1

将您的 dark-mode 类添加到 tailwind.config.js 中的 Safelisting classes:

module.exports = {
    darkMode: 'class',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    safelist: [
        'bg-blue-300',
        'bg-blue-600',
    ],
    // ...
}

Laravel 8 Tailwind 3 黑暗模式无法正常工作

Laravel 8 Tailwind 3 darkmode isn't working

tailwind-css

darkmode

laravel-8