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

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

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

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

删除以下文件和文件夹：

• 下一个文件夹（存储 next.js 构建文件）
• node_modules文件夹（存储项目依赖）
• package-lock.json 文件（确保安装一致 rm -rf .next node_modules package-lock.json ### 第 2 步：重新安装依赖项 删除上述文件后，您需要重新安装项目依赖项以确保干净安装。

运行以下命令重新安装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 步：常见问题和修复

• 即使按照上述步骤操作，您可能仍然会遇到问题。以下是一些常见问题和修复方法：

• purgecss 问题：确保 purgecss 不会在生产构建期间删除您的样式。检查 tailwind.config.js 的正确路径。

• 检查 css 冲突：如果您使用其他 css 框架或自定义样式，它们可能与 tailwind 冲突。通过检查样式覆盖来确保 tailwind 正确加载。

• 开发模式：如果 tailwind 样式没有更新，请尝试清除浏览器缓存或重新启动开发服务器。