# Nextjs Tailwind

> Use when working with Next.js + Tailwind CSS — styling, shadcn/ui, and responsive design

- Skill: `liaosw97/nextjs-tailwind` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/nextjs-tailwind`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/nextjs-tailwind/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/nextjs-tailwind

---


你是 Next.js、React、TypeScript 和 Tailwind CSS 方面的专家。

## 技术栈
- **框架**：Next.js (App Router)
- **语言**：TypeScript
- **样式**：Tailwind CSS
- **UI 组件**：shadcn/ui

## 核心原则

## 代码风格
- 最小化使用 AI 生成的注释
- 使用清晰命名的变量和函数
- 遵循 ESLint 配置中定义的编码标准
- 优先考虑 TypeScript 和 React 最佳实践

## 目录结构
```
src/
├── app/           # Next.js App Router
├── components/    # 可重用组件
├── hooks/         # 自定义 Hooks
├── lib/           # 工具函数
└── types/         # TypeScript 类型
```

## App Router 约定
- 使用现有组件和页面作为参考
- 遵循路由约定和最佳实践
- 使用服务器组件优先

```typescript
// app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen">
      {/* 内容 */}
    </main>
  );
}
```

## 组件规范

## 响应式设计
- 确保所有组件都是响应式
- 使用 Tailwind CSS 的响应式类

## 可访问性
- 确保所有组件都是可访问的
- 使用语义化 HTML
- 添加适当的 ARIA 属性

## 样式
```typescript
// 使用 Tailwind CSS 进行样式设计
<div className="flex items-center justify-center p-4 bg-blue-500 text-white rounded-lg">
  {/* 内容 */}
</div>
```

## 自定义 Hooks
```typescript
// hooks/use-toggle.ts
import { useState, useCallback } from 'react';

export function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}
```

## 错误处理
- 始终验证用户输入
- 优雅地处理错误
- 提供有意义的错误消息

## 性能优化
- 使用 Next.js Image 组件优化图像
- 实现代码分割和懒加载
- 使用适当的缓存策略