Docker部署Next.js+Tailwind项目时出现@tailwind语法解析错误

这个错误的核心原因是Docker容器内缺少Tailwind CSS正常工作所需的依赖与配置，导致Next.js无法识别CSS中的@tailwind指令。以下是分步修复方案：

1. 补全项目核心依赖 #

你的package.json缺少Next.js本身、PostCSS和Autoprefixer——这三个是Next.js集成Tailwind的必要依赖（本地环境可能已全局安装或遗留依赖，因此无报错）。修改后的package.json如下：

{
    "name": "frontend",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://localhost:3003",
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "next": "^14.1.0",
        "tailwindcss": "^3.4.1",
        "postcss": "^8.4.35",
        "autoprefixer": "^10.4.17"
    }
}

2. 添加Tailwind与PostCSS配置文件 #

在项目根目录创建两个配置文件，让Next.js的构建工具能够解析@tailwind指令：

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js #

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

3. 修复Dockerfile的问题 #

原Dockerfile存在环境不匹配、依赖安装逻辑冗余的问题，修改后如下：

开发环境Dockerfile #

FROM node:lts-alpine

WORKDIR /usr/frontend

ARG PORT=3000
ENV PORT ${PORT}
ENV NODE_ENV=development

EXPOSE ${PORT}

# 先复制依赖配置，利用Docker缓存加快构建
COPY package*.json ./

RUN npm install

# 再复制项目代码
COPY . .

CMD ["npm", "run", "dev"]

生产环境Dockerfile（如需部署正式环境） #

FROM node:lts-alpine

WORKDIR /usr/frontend

ARG PORT=3000
ENV PORT ${PORT}
ENV NODE_ENV=production

EXPOSE ${PORT}

COPY package*.json ./

# 仅安装生产依赖
RUN npm ci --only=production

COPY . .

# 先构建项目再启动
RUN npm run build

CMD ["npm", "run", "start"]

验证步骤 #

1. （可选）删除本地node_modules和package-lock.json，确保环境干净
2. 构建Docker镜像：docker build -t next-tailwind-app .
3. 运行容器：docker run -p 3000:3000 next-tailwind-app

内容的提问来源于stack exchange，提问作者Cường Nguyễn Mạnh