利用 Next.js 和 Tailwind CSS 打造完美的响应式网站-JavaScript中文网-JavaScript教程资源分享门户

利用 Next.js 和 Tailwind CSS 打造完美的响应式网站

随着移动设备的普及，响应式网站设计已成为当今网站设计的标准，而 Next.js 和 Tailwind CSS 这两个工具的出现，极大地简化了响应式网站开发的流程。本文将为读者介绍如何使用 Next.js 和 Tailwind CSS 来搭建一个完美的响应式网站，并提供详细的示例代码和指导。

一、Next.js 简介

Next.js 是 React 框架的一种扩展，它使得开发者可以更加方便地创建具有服务端渲染功能的 React 应用程序。Next.js 极大地减少了前端开发人员在配置和操作方面的困惑，在增加功能和优化访问速度上也同样非常出色。

搭建 Next.js 环境需要先安装 Node.js，再用 Node.js 的包管理器（npm）来安装 Next.js。安装完成后，运行 npm run dev 命令即可开始开发。同时，Next.js 对 SEO 优化和性能优化也非常友好，值得开发者们尝试。

二、Tailwind CSS 简介

Tailwind CSS 是一个高度可配置的 CSS 框架，具有许多可重用的 CSS 类，可以帮助开发者快速地实现自定义和响应式网站的设计。Tailwind CSS 的灵活性和自定义性使其非常适合设计师和开发者的合作，易于组织和协作，减少了开发和设计的时间和成本。

使用 Tailwind CSS 时，只需要在 HTML 标签中添加对应的 CSS 类即可实现各种样式。Tailwind CSS 还提供了许多工具类和插件来增强自定义性，如自适应容器类、过渡类、网格类、滚动类等。同时，Tailwind CSS 也支持在项目中引用已有 CSS 代码，不影响已有的样式。

三、利用 Next.js 和 Tailwind CSS 打造响应式网站

创建 Next.js 应用程序并安装 Tailwind CSS

首先，我们要先创建一个基于 Next.js 的应用程序，安装好相应的依赖，再安装 Tailwind CSS。在项目根目录执行以下命令完成安装：

npm init next-app tailwind-app
cd tailwind-app
npm install tailwindcss -D

安装完成后，在项目根目录建立一个 tailwind.config.js 文件并添加以下代码：

// www.javascriptcn.com code example
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', '../shared/**/*.{js,jsx,ts,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

此处规定了相关配置参数，其中 mode 为 JIT 模式 (JIT 即 Just-In-Time 编译，一种新型的编译方式)，purge 规定了哪些文件会用到 Tailwind CSS，theme 用于添加自定义主题，variants 用于添加自定义变量，plugins 可以用于添加 Tailwind CSS 插件。

导入 Tailwind CSS 样式

在 _app.js 文件中，我们导入 Tailwind CSS 样式：

import "../styles/globals.css";
import "tailwindcss/tailwind.css";

同时，可以在 styles/globals.css 文件中导入全局样式：

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

以上三个指令的作用分别是导入基础样式、组件样式和实用工具样式。

创建页面

使用 Next.js，我们可以通过在 pages 目录下添加文件来创建页面。接下来，我们分别为首页、博客、关于和联系我们创建页面：

index.js

export default function Home() {
  return (
    <div>
      <h1>Welcome to my homepage</h1>
    </div>
  )
}

blog.js

export default function Blog() {
  return (
    <div>
      <h1>Welcome to my blog</h1>
    </div>
  )
}

about.js

export default function About() {
  return (
    <div>
      <h1>About me</h1>
      <p>I am a web developer based in Beijing, China.</p>
    </div>
  )
}

contact.js

export default function Contact() {
  return (
    <div>
      <h1>Contact me</h1>
      <p>Email: abc@example.com</p>
    </div>
  )
}

构建导航栏

导航栏是网站中的重要部分，它让用户可以一眼找到自己想要的内容。我们通过在 _app.js 文件中添加一个导航组件来为网站构建导航栏。

// www.javascriptcn.com code example
import "../styles/globals.css";
import "tailwindcss/tailwind.css";
import Link from "next/link";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <nav className="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-gray-100 mb-3">
        <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
          <div className="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
            <Link href="/">
              <a className="text-xl font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase">
                Logo
              </a>
            </Link>
            <button
              className="text-gray-500 cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
              type="button"
            >
              <span className="block relative w-6 h-1 rounded-md bg-gray-500"></span>
              <span className="block relative w-6 h-1 rounded-md bg-gray-500 mt-1"></span>
              <span className="block relative w-6 h-1 rounded-md bg-gray-500 mt-1"></span>
            </button>
          </div>
          <div
            className={
              "lg:flex flex-grow items-center bg-gray-100 lg:bg-transparent lg:shadow-none" +
              (open ? " block" : " hidden")
            }
            id="example-navbar-warning"
          >
            <ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
              <li className="nav-item">
                <Link href="/">
                  <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-gray-900 hover:opacity-75 transition-all duration-200">
                    <span className="ml-2">Home</span>
                  </a>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/blog">
                  <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-gray-900 hover:opacity-75 transition-all duration-200">
                    <span className="ml-2">Blog</span>
                  </a>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/about">
                  <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-gray-900 hover:opacity-75 transition-all duration-200">
                    <span className="ml-2">About</span>
                  </a>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/contact">
                  <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-gray-900 hover:opacity-75 transition-all duration-200">
                    <span className="ml-2">Contact</span>
                  </a>
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

在导航栏中，我们使用了许多 Tailwind CSS 的样式类，如 container、mx-auto、flex、justify-between 等来构建布局。同时，我们在页面中使用了导入 Link 组件的方式来添加页面链接。

四、结语

在本文中，我们通过使用 Next.js 和 Tailwind CSS，为读者介绍了如何快速搭建响应式网站。Next.js 提供了服务端渲染的能力和 SEO 优化，Tailwind CSS 则带来了极高的自定义性。希望读者们可以从这篇文章中学到一些实用技巧和知识，更好地发挥这两个工具的威力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfdc80e46428fe9ec0b0cc

利用 Next.js 和 Tailwind CSS 打造完美的响应式网站

接着读