Next.js Tailwind CSS

Tailwind CSS 是一个功能优先的 CSS 框架，它提供了一系列原子化的 CSS 类，让你可以直接在 HTML 中快速构建现代化的用户界面。Next.js 与 Tailwind CSS 的集成非常顺畅，本章将指导你如何在 Next.js 项目中设置和使用 Tailwind CSS。

1. 为什么选择 Tailwind CSS？

• 快速开发：通过组合原子类，可以快速实现复杂的设计，而无需编写自定义 CSS。
• 约束性设计：预定义的设计系统（颜色、间距、字体大小等）有助于保持 UI 的一致性。
• 高性能：通过 PurgeCSS（在 Tailwind CSS v2.0+ 中内置），可以自动移除生产环境中未使用的 CSS，从而生成极小的 CSS 文件。
• 可定制性：可以轻松地通过 tailwind.config.js 文件扩展或修改默认的设计系统。

2. 在 Next.js 中安装和配置 Tailwind CSS

从 Next.js 12 开始，官方提供了对 Tailwind CSS 的内置支持，使得集成过程变得非常简单。

步骤 1：创建 Next.js 项目

如果你还没有项目，可以使用 create-next-app 并选择 Tailwind CSS 选项：

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

这会自动为你配置好所有需要的文件。

步骤 2：手动安装和配置

如果你想在现有项目中添加 Tailwind CSS，请按照以下步骤操作。

1. 安装依赖：

   npm install -D tailwindcss postcss autoprefixer

2. 生成配置文件：

   npx tailwindcss init -p

   这个命令会创建两个重要的文件：

   • tailwind.config.js：用于配置 Tailwind CSS。
   • postcss.config.js：用于配置 PostCSS，Next.js 会自动使用它。

3. 配置 tailwind.config.js：

   打开 tailwind.config.js 文件，并配置 content 字段，告诉 Tailwind CSS 需要扫描哪些文件来查找使用的类。

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       './pages/**/*.{js,ts,jsx,tsx,mdx}',
       './components/**/*.{js,ts,jsx,tsx,mdx}',
       './app/**/*.{js,ts,jsx,tsx,mdx}', // 如果使用 App Router
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

4. 在全局 CSS 中引入 Tailwind：

   打开 styles/globals.css 文件，并用以下内容替换原有内容，以引入 Tailwind 的基础样式、组件和工具类。

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

5. 在 _app.js 中导入全局样式：

   确保 styles/globals.css 文件已在 pages/_app.js 中导入。

   // pages/_app.js
   import '../styles/globals.css';
   
   function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />;
   }
   
   export default MyApp;

3. 在组件中使用 Tailwind CSS

完成上述配置后，你就可以在任何组件或页面中直接使用 Tailwind CSS 的原子类了。

示例：创建一个响应式卡片组件

// components/Card.js

export default function Card({ title, children }) {
  return (
    <div className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white p-6 m-4">
      <div className="font-bold text-xl mb-2 text-gray-800">{title}</div>
      <p className="text-gray-700 text-base">
        {children}
      </p>
      <div className="mt-6">
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
          Learn More
        </button>
      </div>
    </div>
  );
}

在页面中使用该组件：

// pages/index.js

import Card from '../components/Card';

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
      <h1 className="text-4xl font-bold text-center text-blue-600 mb-8">
        Welcome to Next.js with Tailwind CSS
      </h1>
      <div className="flex flex-wrap justify-center">
        <Card title="Declarative UI">
          Tailwind CSS allows you to build complex user interfaces by composing simple utility classes.
        </Card>
        <Card title="Responsive Design">
          Use responsive modifiers like `md:` and `lg:` to build adaptive layouts for any screen size.
        </Card>
      </div>
    </div>
  );
}

4. 高级用法

自定义主题

你可以通过修改 tailwind.config.js 中的 theme 对象来定制设计系统。例如，添加自定义颜色或字体。

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
        'brand-green': '#42b983',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  // ...
}

现在你可以在项目中使用 bg-brand-blue 或 font-sans 等自定义类。

使用 @apply 提取组件类

如果你发现自己在重复使用相同的原子类组合，可以使用 @apply 指令将它们提取到自定义的 CSS 类中。

styles/components.css (需要导入到 globals.css):

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300;
  }
}

然后你可以在 HTML 中使用 class="btn-primary"。

注意：过度使用 @apply 可能会违背 Tailwind 的初衷。通常建议优先使用原子类，只在必要时提取组件类。

总结

将 Tailwind CSS 与 Next.js 结合使用，可以极大地提高开发效率和 UI 一致性。通过简单的配置，你就能获得一个功能强大且高度可定制的样式解决方案。在下一章中，我们将学习如何在 Next.js 中处理图片和字体等静态资源。