DEV Community
·
🚀在2025年使用Next.js 15、ShadCN和Tailwind CSS v4（无需配置）搭建深色模式
内容提要
本文介绍了如何在2025年使用Next.js 15、ShadCN和Tailwind CSS v4快速搭建现代网页项目。通过全局CSS定义主题变量，支持深色模式，无需配置文件。步骤包括创建Next.js应用、安装ShadCN UI组件、配置Tailwind CSS和启用深色模式，最终实现现代UI组件和良好性能。
关键要点
-
介绍如何在2025年使用Next.js 15、ShadCN和Tailwind CSS v4快速搭建现代网页项目。
-
确保安装Node.js 18+和npm或pnpm，并具备Next.js和Tailwind CSS的基础知识。
-
通过命令创建一个基于TypeScript的Next.js 15项目，自动配置Tailwind CSS。
-
安装ShadCN UI组件，提供美观、可访问和可定制的UI组件。
-
Tailwind CSS v4不再需要配置文件，通过在global.css中定义变量来实现主题。
-
启用深色模式，使用next-themes库，创建主题提供者和切换组件。
-
修改layout.tsx以使用主题提供者和切换按钮。
-
启动Next.js开发服务器，完成项目搭建，享受现代UI组件和良好性能。
延伸问答
如何在2025年使用Next.js 15搭建网页项目？
可以通过创建一个基于TypeScript的Next.js 15项目，并自动配置Tailwind CSS来搭建网页项目。
Tailwind CSS v4的配置有什么变化？
Tailwind CSS v4不再需要配置文件，而是通过在global.css中定义主题变量来实现样式。
如何在项目中启用深色模式？
可以使用next-themes库，创建主题提供者和切换组件来启用深色模式。
ShadCN UI组件有什么特点？
ShadCN提供美观、可访问和可定制的UI组件，适合现代网页项目使用。
在Next.js 15中如何使用主题提供者？
需要在layout.tsx中导入并使用ThemeProvider组件，以便在应用中管理主题。
搭建完成后如何启动Next.js开发服务器？
可以通过运行命令npm run dev来启动Next.js开发服务器。
