本地环境中Tailwind CSS切换按钮无法正常工作的问题

1. React属性语法修正 #

你的代码混用了原生HTML的class属性，但React中必须使用className；同时静态的checked属性会导致复选框无法切换状态，需先移除。修正后的代码：

<div>
    <aside className='bg-gray-900 w-64 h-screen py-10'>
        <div className='flex items-start justify-start h-10 w-auto py-5 mt-6 cursor-pointer'>
            <CiDark className='ml-8' style={{ color: "white" }} size={32} />
            <span className='ml-3 text-white font-semibold text-xl'>Dark Mode</span>
            <label className='relative inline-flex items-center cursor-pointer'>
                <input type="checkbox" value="" className="sr-only peer" />
                <div className="w-11 h-6 bg-gray-200 mt-1 ml-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white peer:after:content-[''] after:absolute after:top-0.7 after:left-[5px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
            </label>
        </div>
    </aside>
</div>

2. 检查Tailwind版本兼容性 #

Tailwind Playground使用最新版本，而本地旧版本可能不支持peer-checked:after:*这类嵌套伪元素选择器。执行以下命令升级到最新稳定版：

npm install tailwindcss@latest postcss@latest autoprefixer@latest

升级完成后重启React开发服务器。

3. 确认Tailwind样式生成配置 #

• 检查tailwind.config.js的content字段，确保覆盖了所有包含该组件的文件路径，当前配置"./src/**/*.{js,jsx,ts,tsx}"是合理的，但如果组件不在src目录下需调整。
• 强制清除缓存并重新生成样式：停止开发服务器，删除项目根目录下的node_modules/.cache文件夹（Create React App/Vite项目适用），再重启服务器。

4. 清除浏览器缓存 #

浏览器可能缓存了旧的CSS文件，导致新样式未加载。按下Ctrl+Shift+R强制刷新页面，或在开发者工具的Network面板勾选“禁用缓存”选项后重新加载。

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