Next.js 中如何使用 Tailwind CSS
随着前端技术的发展，UI 库已经越来越重要，其中 Tailwind CSS 是一个广泛使用的 CSS 工具包。Next.js 是一种非常受欢迎的 React 框架，这是一种 SSR（服务器端渲染）的框架，它可以帮助我们快速实现一些方面的开发，如 SEO，首次加载速度等等。本文将介绍如何在 Next.js 中使用 Tailwind CSS。
第一步：创建一个 Next.js 应用程序
首先创建一个基本的 Next.js 应用程序。您可以使用create-next-app 命令来创建：
npx create-next-app my-app cd my-app npm run dev # or yarn dev
这将在本地启动服务器，并为您提供一个基本的应用程序，让我们可以在其上添加代码。
第二步：安装 Tailwind CSS
接下来，我们需要安装 Tailwind CSS。在本示例中，我们将使用 npm 来安装。
npm install tailwindcss postcss-preset-env --save-dev # or yarn add tailwindcss postcss-preset-env --dev
此命令将安装 Tailwind CSS 和 postcss-preset-env，后者 帮助我们在开发期间使用最新的CSS 语法，如果您的项目中使用了任何其他的库，那么 postcss-preset-env 还可以处理任何未知的CSS 语法。
接下来，在您的项目根文件夹中创建 postcss.config.js 文件，并添加以下配置：
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}您还需要在项目根目录中添加一个 tailwind.config.js 文件：
-- -------------------- ---- -------
-- ------------------
-------------- - -
------ ---
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
-以上是基本的配置，但实际上您需要根据您项目的需求进行更改。在这里您可以添加配置颜色，字体，间距等等。
第三步：在 Next.js 中使用 Tailwind CSS
现在您已经成功地安装并配置了 Tailwind CSS，是时候将其应用于 Next.js 应用程序了。
首先，打开 pages/ 文件夹，找到 _app.js。此文件是 Next.js 中所有页面的共同父级，意味着您可以在此文件中定义全局样式等。
在_app.js 中，我们需要使用 two stylesheets：
- global CSS，它是您的项目中的所有页面共享的样式。添加以下代码：
// _app.js import '../styles/globals.css'
- Tailwind CSS，它被应用到您整个应用程序中，用于自定义您的样式。添加以下代码：
// _app.js import 'tailwindcss/tailwind.css'
现在，您可以创建一个新的页面并开始使用 Tailwind CSS。
例如，在页面文件夹中创建 index.js 文件，在文件中添加以下代码：
-- -------------------- ---- -------
-- --------
------ ------- -------- ------ -
------ -
---- ---------------------- -------
--- ------------------- --------- ------------------ -- -- ------------
-- ------------------ ---------- -- - ------- ----------- ----- -------- --------
------- ---------------- ----------- ----------------- ---------- --------- ---- ---- ---------
----- --
---------
------
-
-可以看到，我们使用 className 属性来添加 Tailwind CSS 样式。例如，通过添加 mt-10 类，我们在元素上带上了 10 的间距。
上面代码展示了一个简单的 Welcome 页面，其中包含一些基本的 Tailwind CSS 样式。
结论
这就是如何在 Next.js 中使用 Tailwind CSS。虽然需要一些安装和配置，但结果是可以方便地应用它的样式，大大提升项目的开发效率。此外，Tailwind CSS 还有大量的可用类，您可以在所需的情况下轻松地自定义您的样式。
希望这篇文章能对您的 Next.js + Tailwind CSS 开发提供一些指导!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6718a429ad1e889fe22d0126