Tailwind CSS (Next.js Guide)
指导在Next.js项目中集成和使用Tailwind CSS的助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind CSS (Next.js Guide)。 它的用途是：指导在Next.js项目中集成和使用Tailwind CSS的助手 详细介绍见：https://321skill.com/skills/tailwind-css-next-js-guide/ 请根据该页面的说明完成安装。
使用示例
“我正在用Next.js 15启动一个新项目，想集成Tailwind CSS，请给我详细的安装和配置步骤。”，它会提供从安装依赖、初始化配置、修改配置文件到在组件中使用的完整流程。或者问：“如何在Next.js项目中使用Tailwind CSS实现深色模式切换？”，它会给出基于`next-themes`库或使用CSS变量的具体实现方案。
介绍
这个Skill旨在解决开发者在Next.js项目中配置和使用Tailwind CSS时遇到的困惑，例如如何正确安装、配置以利用Next.js的特性，以及如何高效地编写样式。它通过提供清晰的步骤指导和最佳实践，帮助用户快速上手。
使用时，开发者可以询问关于Tailwind CSS在Next.js中的具体配置问题、类名使用技巧，或是如何解决样式冲突等。Skill会结合Next.js的框架特性给出针对性建议。
它特别适合正在或计划使用Next.js框架进行前端开发，并希望采用Tailwind CSS作为样式解决方案的开发者。无论是项目初始化阶段还是后续的样式优化，都能提供有效支持。
建议在使用前确保对Next.js有基本了解，并准备好项目环境。对于Tailwind CSS的高级自定义需求，可结合官方文档一同查阅。
核心特点
本Skill专注于Tailwind CSS与Next.js这一特定技术栈的深度集成，提供了针对Next.js项目结构、服务端组件（RSC）、App Router等新特性的样式配置方案，而非泛泛而谈Tailwind CSS的通用用法。
注意事项
不适合不使用Next.js框架或需要学习Tailwind CSS基础概念（如响应式设计原理）的纯新手场景。
常见问题
在Next.js 15的App Router中如何正确配置Tailwind CSS？
通常需要安装`tailwindcss`、`postcss`、`autoprefixer`包，运行`npx tailwindcss init`生成配置文件，并确保`tailwind.config.js`中正确配置了`content`路径以扫描App Router下的文件。
Tailwind CSS的样式在Next.js的服务端组件中不生效怎么办？
检查是否在服务端组件中直接使用了`className`，确保Tailwind的CSS文件（如`app/globals.css`）已正确导入，并且构建过程包含了这些样式。