在 Next.js 开发中，使用合适的样式库可以帮助前端开发者更高效地构建应用程序。而 tailwindcss 是一个基于现代 CSS 的实用（utility-first）样式库，它提供了一组可重用的 CSS 类，这些类包含了各种常见的样式和布局属性。这篇文章将为大家介绍如何在 Next.js 中正确地使用 tailwindcss。
安装 tailwindcss
首先，我们需要在 Next.js 项目中安装 tailwindcss。使用以下命令实现：
npm install tailwindcss
安装完成后，在项目的根目录中创建一个文件夹，命名为styles。并在该文件夹中创建一个名为tailwind.css的新文件。
在 tailwind.css 中，我们需要引入 tailwindcss 的样式表。为此，我们可以使用一个特殊的 @tailwind 关键字。在文件开头加入以下代码：
@tailwind base; @tailwind components; @tailwind utilities;
这些关键字会告诉 tailwindcss 引入其基本样式、组件样式以及实用类样式。
最后，在项目的 package.json 文件中添加以下两个脚本：
{
"scripts": {
"build:tailwind": "tailwindcss build styles/tailwind.css -o public/tailwind.css",
"dev": "next dev"
}
}这样我们就创建了一个名为 build:tailwind 的命令，用于将我们的 tailwindcss 样式构建到一个单独的 CSS 文件中。
配置 Tailwind CSS
使用 tailwindcss 后，我们需要在项目中添加一个tailwind.config.js文件，用它来配置我们为项目所选配置选项。我们可以使用命令：
npx tailwindcss init
命令执行后它会在项目根目录中创建一个配置文件 tailwind.config.js。
下面是一个 tailwindcss 的基本配置文件示例：
-- -------------------- ---- -------
-------------- - -
------ ------------------------------ -----------------------
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
--该示例配置默认开启了 purge，这可以帮助我们减小最终的 CSS 文件大小。
注意，由于 Next.js 是 SSR 应用程序，我们需要让 tailwindcss 的配置能够在 SSR 和客户端渲染之间正确传递。具体来说，我们需要将配置文件中的 purge 选项设置为与 Next.js 项目相同。
下面来看一下如何修改配置以适应 Next.js：
-- -------------------- ---- -------
-- ------------------
-------------- - -
------- -
--------- -----
--
------ -------------------------------- -------------------------------------
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
--在这里，我们将 purge 选项传递到 pages 和 components 文件夹中的所有代码中。这就确保了我们仅包含实际使用的代码。
在 Next.js 中使用 Tailwind CSS
现在我们已经准备好使用 tailwindcss 了！为此，我们需要将 tailwind.css 文件引入 Next.js 应用中。
// pages/_app.js
import "../styles/tailwind.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;现在 tailwindcss 应该成功地运行了。如果您在控制台中运行 npm run build:tailwind 并打开生成的 public/tailwind.css 文件，应该会看到以下内容：
-- -------------------- ---- ------- --- ----------- ------- - --- ------- - ----------------------- -- --- ---------------- ------ - --- ------- - ------------------------------------------------ -- --- - --- - ------ --- ----- -------------- -- -- ---------- -------- - ----------- ----------- - -------
这就是 tailwindcss 为我们提供的一大堆 CSS 样式和布局类。现在，我们可以在项目中使用这些实用程序类。
使用 Tailwind CSS 的 class
使用 tailwindcss 的实用程序类时，我们可以在 HTML 元素上添加像这样的类：
<div class="bg-gray-800 text-white p-4">Hello, Tailwind!</div>
这将设置一个灰色背景颜色，白色文本颜色，并添加辅助内边距。这个类名由几个部分组成，以中划线分隔。
更详细的文档可以在 tailwindcss 的官方文档中找到。不过，重要的是要知道，tailwindcss 类名的命名规则非常一致。下面是一份备忘录，帮助您理解它们：
sm, md, lg, xl：屏幕尺寸范围。
p，pb，pl，pr，pt：填充（
padding），下边距（padding-bottom），左边距（padding-left），右边距（padding-right）和上边距（padding-top）。这些都可以与数字一起使用，例如p-4表示填充 4 个单位。m，mb，ml，mr，mt：边距（
magin），下边距（margin-bottom），左边距（margin-left），右边距（margin-right）和上边距（margin-top）。这些都可以与数字一起使用，例如m-4表示边距 4 个单位。w，h：宽度和高度。这些可以与数字或百分比一起使用。例如，
w-full会使元素充满其容器的整个宽度。bg，text：背景和文本颜色。
总结
tailwindcss 是一个非常有用的实用程序样式库，它可以帮助我们快速构建和样式化 React 应用程序。在 Next.js 中使用 Tailwind CSS 并不困难，只需要几个简单的步骤即可完成。
为了在 Next.js 中正确地使用 tailwindcss，请确保安装正确的依赖项并按照这篇文章中的指南构建 tailwind.css 文件。接下来，您可以轻松地通过 tailwindcss 的实用程序类样式化您的组件。
我希望这篇文章能够帮助您更好地了解 tailwindcss 的使用正确姿势，并为您在 Next.js 中使用 tailwindcss 提供指导。如果您有任何疑问，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5d1d7f6b2d6eab314c67f