要使用 tailwind css 设置 next.js，请按照以下步骤操作：
第 1 步：创建一个新的 next.js 项目
如果您尚未创建 next.js 项目，您可以使用 create-next-app 创建一个项目。
npx create-next-app@latest my-next-app cd my-next-app
第 2 步：安装 tailwind css
在 next.js 项目中，安装 tailwind css 及其所需的依赖项。
npm install -d tailwindcss postcss autoprefixer
第 3 步：初始化 tailwind css
通过生成 tailwind.config.js 和 postcss.config.js 文件来初始化 tailwind css。
npx tailwindcss init -p
这将在项目的根目录中创建 tailwind.config.js 和 postcss.config.js 文件。
步骤4：配置tailwind.config.js
将 tailwind.config.js 的内容替换为以下配置，即可在相关文件中启用 tailwind：
/** @type {import('tailwindcss').config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
}
第 5 步：将 tailwind css 添加到您的 css 文件中
在您的项目中，打开或创建 ./styles/globals.css 文件并添加以下行以导入 tailwind 的基础、组件和实用程序：
@tailwind base; @tailwind components; @tailwind utilities;
第 6 步：运行开发服务器
现在，启动开发服务器来查看 tailwind css 的运行情况：
npm run dev
您的 next.js 项目现在应该使用 tailwind css 设置。您可以在组件中使用 tailwind 实用程序类来设置它们的样式。
用法示例
这是在 next.js 页面 (pages/index.js) 中使用 tailwind css 的示例：
export default function Home() {
return (
Welcome to Next.js with Tailwind CSS!
);
}
通过此设置，您现在可以开始使用 tailwind 实用程序优先的 css 框架构建 next.js 应用程序！
立即学习“前端免费学习笔记（深入）”；
