Next.js Tailwind CSS #

一、Tailwind CSS基础 #

1.1 什么是Tailwind CSS #

Tailwind CSS是一个功能类优先的CSS框架，提供原子化的CSS类：

tsx

export default function Card() {
    return (
        <div className="bg-white rounded-lg shadow-md p-6">
            <h2 className="text-xl font-bold text-gray-900">标题</h2>
            <p className="text-gray-600 mt-2">描述内容</p>
        </div>
    )
}

1.2 安装配置 #

Next.js默认集成Tailwind CSS：

bash

npx create-next-app@latest my-app --tailwind

1.3 配置文件 #

tailwind.config.ts

typescript

import type { Config } from 'tailwindcss'

const config: Config = {
    content: [
        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

export default config

二、布局 #

2.1 容器 #

tsx

export default function Page() {
    return (
        <div className="container mx-auto px-4">
            内容
        </div>
    )
}

2.2 Flexbox #

tsx

export default function FlexLayout() {
    return (
        <div className="flex items-center justify-between">
            <div className="flex-1">左侧</div>
            <div>右侧</div>
        </div>
    )
}

2.3 Grid #

tsx

export default function GridLayout() {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="bg-gray-100 p-4">卡片1</div>
            <div className="bg-gray-100 p-4">卡片2</div>
            <div className="bg-gray-100 p-4">卡片3</div>
        </div>
    )
}

三、排版 #

3.1 字体大小 #

tsx

export default function Typography() {
    return (
        <div>
            <p className="text-xs">超小文字</p>
            <p className="text-sm">小文字</p>
            <p className="text-base">正常文字</p>
            <p className="text-lg">大文字</p>
            <p className="text-xl">超大文字</p>
            <p className="text-2xl">标题2</p>
            <p className="text-3xl">标题1</p>
        </div>
    )
}

3.2 字体粗细 #

tsx

export default function FontWeight() {
    return (
        <div>
            <p className="font-light">轻字重</p>
            <p className="font-normal">正常字重</p>
            <p className="font-medium">中等字重</p>
            <p className="font-semibold">半粗字重</p>
            <p className="font-bold">粗字重</p>
        </div>
    )
}

3.3 文本颜色 #

tsx

export default function TextColor() {
    return (
        <div>
            <p className="text-gray-900">深灰色</p>
            <p className="text-gray-600">中灰色</p>
            <p className="text-gray-400">浅灰色</p>
            <p className="text-blue-500">蓝色</p>
            <p className="text-red-500">红色</p>
        </div>
    )
}

四、间距 #

4.1 内边距 #

tsx

export default function Padding() {
    return (
        <div>
            <div className="p-4">四周内边距</div>
            <div className="px-4 py-2">水平垂直内边距</div>
            <div className="pt-4 pb-2 pl-6 pr-8">各方向内边距</div>
        </div>
    )
}

4.2 外边距 #

tsx

export default function Margin() {
    return (
        <div>
            <div className="m-4">四周外边距</div>
            <div className="mx-auto my-4">水平居中</div>
            <div className="mt-4 mb-2 ml-6 mr-8">各方向外边距</div>
        </div>
    )
}

4.3 间距值 #

类名	值
p-0	0
p-1	0.25rem
p-2	0.5rem
p-4	1rem
p-6	1.5rem
p-8	2rem

五、背景与边框 #

5.1 背景色 #

tsx

export default function Background() {
    return (
        <div>
            <div className="bg-white">白色背景</div>
            <div className="bg-gray-100">浅灰背景</div>
            <div className="bg-blue-500">蓝色背景</div>
            <div className="bg-gradient-to-r from-blue-500 to-purple-500">
                渐变背景
            </div>
        </div>
    )
}

5.2 边框 #

tsx

export default function Border() {
    return (
        <div>
            <div className="border">默认边框</div>
            <div className="border-2">粗边框</div>
            <div className="border border-blue-500">蓝色边框</div>
            <div className="border-l-4 border-l-blue-500">左边框</div>
        </div>
    )
}

5.3 圆角 #

tsx

export default function BorderRadius() {
    return (
        <div>
            <div className="rounded">小圆角</div>
            <div className="rounded-md">中圆角</div>
            <div className="rounded-lg">大圆角</div>
            <div className="rounded-full">圆形</div>
        </div>
    )
}

5.4 阴影 #

tsx

export default function Shadow() {
    return (
        <div>
            <div className="shadow-sm">小阴影</div>
            <div className="shadow">默认阴影</div>
            <div className="shadow-md">中阴影</div>
            <div className="shadow-lg">大阴影</div>
            <div className="shadow-xl">超大阴影</div>
        </div>
    )
}

六、响应式设计 #

6.1 断点 #

断点	前缀	最小宽度
sm	sm:	640px
md	md:	768px
lg	lg:	1024px
xl	xl:	1280px
2xl	2xl:	1536px

6.2 响应式布局 #

tsx

export default function ResponsiveLayout() {
    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <div className="bg-gray-100 p-4">卡片1</div>
            <div className="bg-gray-100 p-4">卡片2</div>
            <div className="bg-gray-100 p-4">卡片3</div>
            <div className="bg-gray-100 p-4">卡片4</div>
        </div>
    )
}

6.3 响应式隐藏 #

tsx

export default function ResponsiveHide() {
    return (
        <div>
            <div className="hidden md:block">中等屏幕及以上显示</div>
            <div className="md:hidden">中等屏幕以下显示</div>
            <div className="hidden lg:block">大屏幕及以上显示</div>
        </div>
    )
}

七、交互状态 #

7.1 悬停 #

tsx

export default function Hover() {
    return (
        <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
            悬停变色
        </button>
    )
}

7.2 焦点 #

tsx

export default function Focus() {
    return (
        <input
            className="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 px-4 py-2 rounded"
            placeholder="输入内容"
        />
    )
}

7.3 激活 #

tsx

export default function Active() {
    return (
        <button className="bg-blue-500 active:bg-blue-700 text-white px-4 py-2 rounded">
            点击变色
        </button>
    )
}

7.4 禁用 #

tsx

export default function Disabled() {
    return (
        <button
            className="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-4 py-2 rounded"
            disabled
        >
            禁用按钮
        </button>
    )
}

八、暗色模式 #

8.1 配置 #

typescript

import type { Config } from 'tailwindcss'

const config: Config = {
    darkMode: 'class',
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

export default config

8.2 使用暗色模式 #

tsx

export default function Card() {
    return (
        <div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-lg">
            <h2 className="text-xl font-bold">标题</h2>
            <p className="text-gray-600 dark:text-gray-300 mt-2">描述内容</p>
        </div>
    )
}

8.3 切换主题 #

tsx

'use client'

import { useState, useEffect } from 'react'

export default function ThemeToggle() {
    const [isDark, setIsDark] = useState(false)
    
    useEffect(() => {
        document.documentElement.classList.toggle('dark', isDark)
    }, [isDark])
    
    return (
        <button
            onClick={() => setIsDark(!isDark)}
            className="p-2 rounded-lg bg-gray-200 dark:bg-gray-700"
        >
            {isDark ? '🌙' : '☀️'}
        </button>
    )
}

九、自定义配置 #

9.1 扩展主题 #

typescript

import type { Config } from 'tailwindcss'

const config: Config = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    500: '#3b82f6',
                    600: '#2563eb',
                    700: '#1d4ed8',
                },
            },
            fontFamily: {
                sans: ['Inter', 'sans-serif'],
            },
            spacing: {
                '128': '32rem',
            },
        },
    },
    plugins: [],
}

export default config

9.2 使用自定义颜色 #

tsx

export default function CustomColors() {
    return (
        <div className="bg-primary-500 text-white p-4">
            自定义主色
        </div>
    )
}

十、最佳实践 #

10.1 组件封装 #

tsx

interface ButtonProps {
    variant?: 'primary' | 'secondary'
    size?: 'sm' | 'md' | 'lg'
    children: React.ReactNode
}

export default function Button({
    variant = 'primary',
    size = 'md',
    children,
}: ButtonProps) {
    const baseStyles = 'rounded font-medium transition-colors'
    
    const variants = {
        primary: 'bg-blue-500 text-white hover:bg-blue-600',
        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    }
    
    const sizes = {
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2',
        lg: 'px-6 py-3 text-lg',
    }
    
    return (
        <button className={`${baseStyles} ${variants[variant]} ${sizes[size]}`}>
            {children}
        </button>
    )
}

10.2 使用@apply #

css

.btn {
    @apply px-4 py-2 rounded font-medium transition-colors;
}

.btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300;
}

十一、总结 #

Tailwind CSS要点：

要点	说明
原子化类	直接使用工具类
响应式	sm/md/lg/xl前缀
状态	hover/focus/active
暗色模式	dark:前缀
自定义	tailwind.config.ts
组件封装	封装可复用组件

下一步，让我们学习CSS-in-JS！