如何在 React / Nextjs 中使用 Tailwind CSS？-JavaScript中文网-JavaScript教程资源分享门户

什么是 Tailwind CSS？

Tailwind CSS 是一个实用而强大的 CSS 框架，它可以帮助您快速构建漂亮的响应式 UI，而不必担心自定义样式，或者从头开始编写 CSS。

Tailwind CSS 的核心理念是将任务分解为小任务。相对于一个全能型框架，Tailwind CSS 更像是一个工具箱，其中包含许多样式组件。开发者可以根据自己的需求，自由选择这些组件，并且通过配置文件进行个性化的定制。

在本文中，我们将介绍如何在 React / Nextjs 中使用 Tailwind CSS，以及如何充分利用其强大的功能。

在开始介绍如何在 React / Nextjs 中使用 Tailwind CSS 前，我们先来了解一下，如何基于 React 和 Nextjs 创建项目。

创建 React / Nextjs 项目

我们可以使用 create-next-app 工具快速创建一个 React / Nextjs 项目。首先，我们需要在终端中输入以下命令，从 npm 官方库中安装 create-next-app：

$ npm install -g create-next-app

接下来，我们就可以创建一个新的项目了。我们在终端中输入以下命令：

$ create-next-app my-app

命令执行完毕后，我们就可以在 my-app 目录中看到一个全新的 React / Nextjs 项目。

引入 Tailwind CSS

首先，我们需要在项目中安装 Tailwind CSS。我们可以使用 npm 包管理工具在终端中输入以下命令进行安装：

$ npm install tailwindcss

安装完成后，我们需要配置 tailwind.config.js 配置文件，以便可以在项目中使用自定义的 Tailwind 样式。我们在项目根目录下创建 tailwind.config.js 文件，并添加以下代码：

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  // 其他的配置项...
};

purge 配置项用于确定哪些项目文件应该被包含在 Tailwind 样式中。在上面的示例中，我们将所有位于 ./pages 和 ./components 目录下的文件的样式包含在内。

然后，我们创建一个名为 styles 的目录，并在其中创建一个名为 tailwind.css 的文件。在该文件中，我们使用 @tailwind 命令来导入 Tailwind 的样式：

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

接下来，我们需要在 Nextjs 的配置文件 next.config.js 中添加一个新的插件，以使我们可以在项目中添加自定义的 CSS 文件。

const withCSS = require("@zeit/next-css");
module.exports = withCSS();

添加完毕后，我们可以在 Nextjs 的 pages/_app.js 文件中，引入我们创建的 tailwind.css 文件：

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

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

现在，我们就可以在 React / Nextjs 中使用 Tailwind CSS 的样式了。

其他功能

响应式设计

Tailwind CSS 的一个重要特性是响应式 UI 设计。借助于 Tailwind CSS，我们可以轻松构建适应不同屏幕尺寸和设备的响应式 UI。

首先，我们需要在配置文件 tailwind.config.js 中添加我们需要的响应式尺寸：

-- -------------------- ---- -------
-------------- - -
  ------ -
    -------- -
      --- --------
      --- --------
      --- ---------
      --- ---------
    --
    -- ---------
  --
--

然后，我们就可以在样式中使用这些尺寸了。例如，我们可以使用 sm: 前缀表示仅适用于 sm 屏幕尺寸的样式代码：

<div className="bg-gray-100 md:bg-blue-100 lg:bg-red-100 xl:bg-green-100 p-4 md:p-8 lg:p-12 xl:p-16"></div>

自定义样式

通过 Tailwind CSS，我们可以根据需要自由地编写自定义样式。为此，我们需要在配置文件 tailwind.config.js 中添加我们自定义的样式。

例如，我们在配置文件中添加以下代码：

-- -------------------- ---- -------
-------------- - -
  ------ -
    ------- -
      ------- -
        -------- ----------
        ---------- ----------
        ------ ----------
      --
    --
  --
--

在上面的示例中，我们通过 theme.extend.colors 属性声明了三种自定义颜色： primary，secondary 和 brand。

然后，我们可以在项目中使用这些颜色了。例如，在样式中，我们可以使用以下代码，表示将文本颜色设置为 brand：

<h1 className="text-brand">Hello Tailwind CSS</h1>

客制化配置

通过修改配置文件 tailwind.config.js，我们可以修改 Tailwind CSS 的默认样式以适应自己的需求。例如，我们可以修改默认的字体系列、类名前缀等。

修改完毕后，我们需要运行 npm run build:css 命令来生成新的样式文件，并用它替换项目中的 tailwind.css 文件。

总结

本文介绍了如何在 React / Nextjs 中使用 Tailwind CSS，并通过实际示例和介绍，向读者展示了 Tailwind CSS 的各种功能和用法。Tailwind CSS 是一个强大且实用的 UI 框架，它可以帮助我们快速创建漂亮的响应式 UI，同时也允许我们按需自定义样式。相信通过本文的学习，读者们已经能够充分掌握 Tailwind CSS 的基本用法，同时也能够对 Tailwind CSS 的更多高级用法有一定的了解。

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