使用者界面源于精心组织的代码结构。Next.js 支持多种样式方案，每种方案都有其特定的适用场景。其实，选择合适的工具将使样式开发过程更加高效和愉悦。

一、样式方案概览

Next.js 对样式方案没有任何强制限制，几乎所有主流的 CSS 方法都能开箱即用。再看主要选项包括，

mindmap root) Tailwind CSS 工具类优先 高度可定制 开发效率高 CSS Modules 局部作用域 原生 CSS 无额外依赖 全局样式 app/globals.css 适合全局变量 Styled Components Emotion 需特殊配置 Sass / SCSS 变量和嵌套 向后兼容

选择建议

根据项目需求选择合适的方案：

二、Tailwind CSS：实用优先的现代化方案

Tailwind CSS 是一个 "实用优先" 的 CSS 框架。不同于 Bootstrap 提供预建立组件。Tailwind 提供数百个原子级工具类，通过组合类名建立自定义 UI。

使用 create-next-app 创建项目时选择 Tailwind CSS 选项，程序将自动完成所有配置。

. 基础用法

// 无需编写额外 CSS 文件。直接在 JSX 中使用工具类
export function Button({
children,variant = 'primary'
}: {
children: React.ReactNode
variant?: 'primary' | 'secondary' | 'danger'
}) {
const variants = {
primary: 'bg-blue-500 hover:bg-blue-600 text-white'。secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-800',danger: 'bg-red-500 hover:bg-red-600 text-white',};return (

{children}

);}

. 响应式设计

Tailwind 提供断点前缀实现响应式布局：

export function ProductCard {
return (





{product.name}

{product.description}





);
}

常用断点前缀

• sm: - 640px 及以上
• md: - 768px 及以上
• lg: - 1024px 及以上
• xl: - 1280px 及以上
• 2xl: - 1536px 及以上

. 自定义设计程序

Tailwind 的真正优势在于其强大的定制能力。可在 tailwind.config.ts 中 或覆盖默认主题，建立符合品牌的设计程序：

// tailwind.config.ts
import type { Config } from 'tailwindcss';老实说，const config: Config = {
content:,me: {
extend的观点是，{
// 自定义颜色程序
colors的观点是，{
说到brand，{
从'50'来看，'#eff6ff', ace'100': '#dbeafe'。 e'500': '#3b82f6', e'600': '#2563eb', e'700': '#1d4ed8', e// ... 其他颜色
 e// ... 其他自定义
};export default config;

// 安装依赖 npm install clsx tailwind-merg

// lib/utils.ts import { clsx,type ClassValue } from 'clsx';// 条件合并类名 import { twMerge } from 'tailwind-merge';// 处理 Tailwind 类名冲突 /** 合并类名并智能处理 Tailwind 重复类名 */ export function cn { return twMerge);按理说，// 先合并条件类名，再调整 Tailwind 类名 }

// Button.tsx 示例——动态生成不同状态的按钮样式。且无冲突 import { cn } from '@/lib/utils';// 复用上述封装的 cn 函数 interface ButtonProps { variant: 'primary' | 'secondary';children: React.ReactNode;} export function Button { const baseStyles = 'px-4 py- rounded-lg font-medium transition-colors';// 公共基础样式 const variants = { primary: 'bg-blue hover:bg-blue text-white'。secondary: 'bg-gray hover:bg-gray text-gray',};// 不同变体的专用样式 return (

);说起来，}

CSS Modules 是 Next.js 内置支持的样式方案。无需额外配置，其主要特性是自动作用域隔离