DEV Community
·
在Tailwind v4.0 + React中实现暗黑模式 🌙
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
Tailwind v4.0移除了tailwind.config.js，暗黑模式设置方式改变。在React应用中，安装Tailwind CSS并在index.css中配置，创建主题切换组件，使用localStorage保存主题状态，实现暗黑模式切换。
🎯
关键要点
- Tailwind v4.0移除了tailwind.config.js，暗黑模式设置方式改变。
- 在React应用中安装Tailwind CSS，按照官方文档进行配置。
- 在index.css中添加@import 'tailwindcss';和@custom-variant dark (&:is(.dark *));。
- 创建一个主题切换组件ToggleTheme，使用useState和useEffect管理主题状态。
- 使用localStorage保存主题状态，实现暗黑模式切换。
- 在项目中导入ToggleTheme组件，即可实现功能完整的暗黑模式切换。
➡️
