如何在 Next.js 中使用 TailwindCSS？-JavaScript中文网-JavaScript教程资源分享门户

介绍

TailwindCSS 是一个实用的 CSS 框架，旨在提高开发者的开发效率。它提供了一套可复用的样式，而不是提供大量的易变组件。使用 TailwindCSS 可以让我们更快地构建样式，同时保持一致性和易维护性。

Next.js 是一个流行的 React 框架，用于构建现代应用程序。它已经成为 React 生态系统中最受欢迎的框架之一。 Next.js 提供了很多有用的功能，如自动代码分割和静态文件生成等。使用 TailwindCSS 可以更方便地在 Next.js 中构建应用程序。

在这篇文章中，我们将探讨如何在 Next.js 中使用 TailwindCSS，并且使用一些示例代码来帮助你开始。

步骤

第一步：安装 TailwindCSS

首先，我们需要在项目中安装 TailwindCSS 。可以使用 npm 或者 yarn 进行安装。

npm install tailwindcss

或者

yarn add tailwindcss

第二步：创建 tailwind.config.js

接下来，我们需要在项目根目录下创建一个 tailwind.config.js 文件。在这个文件中，你可以配置 TailwindCSS ，如字体大小、颜色、边框等等。例如：

// javascriptcn.com 代码示例
// tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
  purge: ["./pages/**/*.js", "./components/**/*.js"],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        orange: colors.orange,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

这里，我们添加了一个扩展颜色，orange ，从 TailwindCSS 的颜色库中引用了一个颜色。我们还配置了一个 purge 选项，用于删除未使用的样式。

第三步：创建 styles.css

现在，我们需要在项目中创建一个 styles.css 文件，以便将 TailwindCSS 样式应用于我们的应用程序。

在 styles.css 中，我们将导入 TailwindCSS 默认的基础样式，并使用 npm 导入 TailwindCSS：

/* styles.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

在 Next.js 中，这个 styles.css 文件会自动应用于所有页面。因此，我们不需要手动引入它。

第四步：添加 PostCSS 插件

最后，我们需要添加 PostCSS 插件来使 TailwindCSS 正常工作。

首先，我们需要安装 postcss-preset-env 和 autoprefixer ，它们可以自动添加 CSS前缀以确保跨浏览器兼容性。

npm install postcss-preset-env autoprefixer

或者

yarn add postcss-preset-env autoprefixer

然后，我们需要在项目根目录下创建一个 postcss.config.js 文件，并将插件配置为：

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

第五步：运行 Next.js

现在，我们已经准备好在我们的 Next.js 应用程序中使用 TailwindCSS 了。我们可以在组件中使用 TailwindCSS 样式，就像这样：

// javascriptcn.com 代码示例
import React from "react";

const Button = () => {
  return (
    <button className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-full">
      Click me
    </button>
  );
};

export default Button;

这里我们使用 TailwindCSS 类名 bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-full 来设置样式。

现在，我们可以运行我们的 Next.js 应用程序了：

npm run dev

或者

yarn dev

现在打开你的浏览器，在 http://localhost:3000 上查看你的应用程序。

总结

在本文中，我们讨论了如何在 Next.js 中使用 TailwindCSS，并介绍了一些基本的步骤来设置它。我们还提供了一些示例代码来帮助你快速开始使用 TailwindCSS。

TailwindCSS 在构建现代 Web 应用程序时可以带来很多效率提升，并且保证了样式一致性和可维护性。它的类名和提供的样式非常直观，使开发者可以在构建组件和页面时快速设置样式。

如果你是一名 React 开发者，并且正在寻找一种快速设置应用程序样式的方法，那么 TailwindCSS + Next.js 是一个不错的组合。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65484b1a7d4982a6eb29239e