如何使用NextJS设置Tailwind CSS
与提供预先设计的组件的传统 CSS 框架不同，Tailwind CSS 专注于提供一组全面的实用程序类，您可以直接将这些类应用于 HTML 元素。
当与用于构建服务器端呈现应用程序的强大 React 框架 Next.js 结合使用时，您可以解锁无缝开发体验并创建高性能、可扩展的 Web 应用程序。
在本教程中，我将引导您完成使用 Next.js 设置 Tailwind CSS 的过程，以便您可以在 Next.js 项目中利用 Tailwind 实用程序类的强大功能。
（更多优质教程：java567.com）
先决条件
在开始之前，请确保您具备以下先决条件：
Node.js 安装在你的机器上
JavaScript 和 React 的基础知识
熟悉 Next.js
Tailwind CSS 和实用程序类如何工作
Tailwind CSS 遵循实用程序优先的样式设置方法。它提供了大量小型、单一用途的实用程序类，您可以将这些类直接应用于您的 HTML 元素。
每个实用程序类代表一个特定的 CSS 属性或属性组合，通过将这些类组合在一起可以轻松构建复杂的 UI 组件。
例如，无需定义自定义 CSS 类来设置按钮的颜色，您可以简单地应用“text-blue-500”实用程序类来实现所需的效果。
Tailwind CSS 中的实用程序类被设计为高度灵活和可定制的。您可以利用 Tailwind 提供的直观命名约定轻松调整边距、填充、字体大小、颜色等属性。
这种方法提供了对样式的细粒度控制，无需为最常见的样式方案编写自定义 CSS。
为什么将 Tailwind CSS 与 Next.js 一起使用？
Next.js 是一个强大的框架，用于构建服务器端呈现的 React 应用程序。它提供了出色的开发体验，并提供了自动代码拆分、服务器端呈现和静态站点生成等功能。
当您将 Next 与 Tailwind CSS 一起使用时，它使您能够毫不费力地将 Tailwind 的实用程序类集成到您的应用程序开发工作流程中。
Next.js 通过在构建过程中自动摇树未使用的 CSS 来优化 CSS 样式的传递。这意味着即使 Tailwind CSS 提供了一组广泛的实用程序类，但只有您在应用程序中实际使用的样式才会包含在最终包中。这种方法可确保您的应用程序保持轻量级并高效执行。
通过结合使用 Tailwind CSS 和 Next.js，您可以快速制作原型、设计和构建响应式用户界面，同时享受简化的开发流程和优化的性能带来的好处。
现在您了解了 Tailwind CSS 和 Next.js 之间的优势和协同作用，让我们深入了解使用 Next.js 设置 Tailwind CSS 的分步过程。
第 1 步：创建一个新的 Next.js 项目
首先，让我们创建一个新的 Next.js 项目。打开终端并运行以下命令：
npx create-next-app my-tailwind-project
这将在同名目录中创建一个名为“my-tailwind-project”的新 Next.js 项目。
第 2 步：安装 Tailwind CSS
通过运行以下命令导航到项目目录：
cd my-tailwind-project
接下来，通过运行以下命令安装 Tailwind CSS 及其依赖项：
npm install tailwindcss postcss autoprefixer
第 3 步：配置 Tailwind CSS
安装 Tailwind CSS 后，我们需要配置它以使用 Next.js。在项目根目录新建文件postcss.config.js，添加如下代码：
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
'postcss-preset-env',
[
'postcss-normalize',
{
allowDuplicates: false,
},
],
[
'@fullhuman/postcss-purgecss',
{
content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
},
],
'autoprefixer',
],
};
此配置设置 Tailwind CSS，添加必要的 PostCSS 插件，并包括 PurgeCSS 以删除生产构建中未使用的 CSS。
第 4 步：创建 Tailwind CSS 配置
接下来，我们需要为 Tailwind CSS 生成默认配置文件。此配置文件允许您根据项目的特定需求自定义 Tailwind CSS。它定义了调色板、排版设置、间距实用程序等。
tailwind.config.js 文件充当 Tailwind CSS 的中央配置中心。它提供了一个 JavaScript 对象，您可以在其中定义自定义项并扩展默认配置。
通过生成默认配置文件，您可以灵活地修改 Tailwind CSS 的各个方面，包括主题自定义、扩展实用程序类以及在生产构建期间清除未使用的 CSS。
自定义配置文件允许您定制实用程序类和整体设计系统，以符合您的应用程序要求和品牌指南。
现在让我们为 Tailwind CSS 生成默认配置文件。运行以下命令：
npx tailwindcss init
这将在项目的根目录中创建一个 tailwind.config.js 文件。
第 5 步：自定义 Tailwind CSS
打开 tailwind.config.js 文件并根据项目需要自定义 Tailwind CSS。以下是自定义 tailwind.config.js 文件的示例：
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {
colors: {
primary: '#FF0000',
secondary: '#00FF00',
},
fontFamily: {
sans: ['Roboto', 'Arial', 'sans-serif'],
},
},
},
variants: {
extend: {},
},
plugins: [],
};
在此示例中，我们通过以下方式自定义 Tailwind CSS 配置：
使用清除选项指定要清除的文件。这确保只有项目中使用的 CSS 类包含在最终构建中。
通过将darkMode设置为false来禁用暗模式功能。
使用两种自定义颜色扩展调色板：primary和secondary。
添加一个名为sans的自定义字体系列，其中包括字体 Roboto、Arial 和通用的 sans-serif 后备字体。
将此基本配置的变体和插件部分保留为空。
您可以通过探索官方文档中可用的其他配置选项来进一步自定义 Tailwind CSS。Tailwind CSS 提供了广泛的灵活性，允许您根据项目的特定设计要求定制框架。
自定义 tailwind.config.js 文件后，保存它，然后继续下一步。
第 6 步：导入 Tailwind CSS 样式
要在您的 Next.js 项目中使用 Tailwind CSS 样式，请将样式导入到您的 pages/_app.js 文件中。打开文件并添加以下代码：
import 'tailwindcss/tailwind.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
这会导入已编译的 Tailwind CSS 样式并将它们应用于您的整个应用程序。
第 7 步：启动开发服务器
现在，您已准备好启动开发服务器并查看 Tailwind CSS 的运行情况。运行以下命令：
npm run dev
http://localhost:3000在浏览器中访问，您应该会看到应用了 Tailwind CSS 样式的 Next.js 应用程序。
这将生成您的应用程序的生产就绪构建，仅包括必要的 CSS 样式。
结论
恭喜！您已成功使用 Next.js 设置 Tailwind CSS。您现在可以开始利用 Tailwind 的实用程序类在您的 Next.js 项目中快速构建美观且响应迅速的 UI 组件。
随意浏览 Tailwind CSS 文档以发现范围广泛的可用实用程序类。
请记住定期更新 Tailwind CSS 及其依赖项，以便从最新功能和错误修复中获益。
