Unexpected character '@' (1:0) @tailwind base when run Docker

Question

I am deploying my nextJs project using tailwind build Docker, my package.json: (And another dependencies)

{
    "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": {
        "tailwindcss": "^3.4.1"
    }
}

My css file has error:

@tailwind base;           //<------------------ error
@tailwind components;
@tailwind utilities;

.border-b-sm {
  border-bottom-width: 0.0625rem;
}
.border-b-neutral-border-weak {
  border-bottom-color: var(--color-neutral-border-weak);
}

And my 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 install

RUN npm install next

COPY . .

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

When I run on my computer, there is no problem. But when run in docker container:

./src/app/globals.css
Module parse failed: Unexpected character '@' (1:0)
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

Answer 1

Here's a minimal setup.

Packages in package.json:

{
  "name": "next-tailwind",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.5.5",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.17",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Contents of tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Contents of styles/globals.css:

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

Minimal page content in app/page.tsx:

import Image from "next/image";

export default function Home() {
  return (
    <div className="flex justify-center items-center h-screen">
      <h1 className="text-4xl font-bold">
        Hello, Next.js with Tailwind!
      </h1>
    </div>
  )
}

Now the Dockerfile:

FROM node:alpine

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

CMD ["npm", "start"]

Build.

docker build -t next-tailwind .

Run.

docker run --rm -p 3000:3000 next-tailwind

Go to http://127.0.0.1:3000/.

You can find more details of a simple working setup here.