如何修复 Tailwind CSS 在 Nextjs 中不起作用的问题

如果您遇到 tailwind css 未在 next.js 项目中应用样式的问题，本指南将引导您完成如何解决该问题。我们将一步步进行，涵盖安装、故障排除和潜在修复。

步骤1：删除.next文件夹、node_modules和package-lock.json

开始之前，如果 tailwind css 在安装后仍无法正常工作，干净的设置可能会解决问题。

删除以下文件和文件夹：

运行以下命令重新安装node_modules并重新生成package-lock.json

npm 安装
npm run dev

第 3 步：验证 tailwind css 设置

按照以下步骤确保您已正确安装 tailwind css

安装 tailwind css：

npm install -d tailwindcss postcss autoprefixer
初始化 tailwind：

npx tailwindcss init -p
这将创建 tailwind.config.js 和 postcss.config.js 文件。

配置 tailwind.config.js：确保正确设置内容路径以包含您的项目文件：

立即学习“前端免费学习笔记（深入）”；

将其添加到 tailwind.config.js

module.exports = {  content: [    './pages/**/*.{js,ts,jsx,tsx}',    './components/**/*.{js,ts,jsx,tsx}',  ],  theme: {    extend: {},  },  plugins: [],}

添加 postcss.config.js

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

将 tailwind 添加到 css：在 globals.css 文件（通常位于 styles 中）中，添加以下内容：

css 在 global.css 或 index.css 中使用

@tailwind base;@tailwind components;@tailwind utilities;

第 4 步：常见问题和修复