如何在Laravel 12中使用TailwindCSS启用暗黑模式并配置darkMode:class

第一步：添加darkMode: 'class'到Tailwind配置 #

Laravel 12默认生成的tailwind.config.js确实没有darkMode配置项，直接手动添加到配置对象即可：

打开项目根目录的tailwind.config.js，在顶层配置里加入darkMode: 'class'，修改后的配置文件示例如下：

export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    darkMode: 'class', // 新增这一行
    theme: {
        extend: {},
    },
    plugins: [],
}

这个配置会让Tailwind通过HTML元素的dark类识别暗黑模式状态，而非依赖系统主题偏好。

第二步：实现暗黑模式切换逻辑 #

配置完成后，需要添加切换按钮和JS逻辑来控制html标签上的dark类：

1. 在Blade视图中添加切换按钮

<button id="dark-mode-toggle" class="px-4 py-2 rounded-md bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
    切换暗黑模式
</button>

2. 添加切换逻辑到JavaScript
   在resources/js/app.js中加入以下代码：

document.addEventListener('DOMContentLoaded', () => {
    const toggleBtn = document.getElementById('dark-mode-toggle');
    const htmlElement = document.documentElement;

    // 页面加载时恢复之前的暗黑模式状态
    if (localStorage.getItem('darkMode') === 'active') {
        htmlElement.classList.add('dark');
    }

    toggleBtn.addEventListener('click', () => {
        htmlElement.classList.toggle('dark');
        
        // 将状态保存到localStorage，下次打开页面自动应用
        if (htmlElement.classList.contains('dark')) {
            localStorage.setItem('darkMode', 'active');
        } else {
            localStorage.removeItem('darkMode');
        }
    });
});

第三步：测试暗黑模式样式 #

现在可以用dark:前缀编写暗黑模式专属样式，比如：

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6 rounded-lg shadow-md">
    这是一个支持暗黑模式的容器
</div>

点击切换按钮后，html标签会被加上dark类，所有带dark:前缀的样式会自动生效。

内容的提问来源于stack exchange，提问作者Bastard_Ape