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组件，即可实现功能完整的暗黑模式切换。
❓
延伸问答
如何在React应用中安装Tailwind CSS？
按照官方文档进行安装即可。
Tailwind v4.0中暗黑模式的设置方式有什么变化？
Tailwind v4.0移除了tailwind.config.js，暗黑模式的设置方式发生了改变。
如何在index.css中配置Tailwind以支持暗黑模式？
在index.css中添加@import 'tailwindcss';和@custom-variant dark (&:is(.dark *));。
如何创建一个主题切换组件？
创建一个ToggleTheme组件，使用useState和useEffect管理主题状态。
如何使用localStorage保存主题状态？
在useEffect中使用localStorage.setItem保存当前主题状态。
如何在项目中使用ToggleTheme组件？
只需在项目中导入ToggleTheme组件即可实现暗黑模式切换功能。
➡️
