Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' error when i run react with docker

Question

I am creating a project that will use tailwind. I've dockerized my react project, but I get Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'. If I run it without docker it'll work without an error.

Here's my react docker-compose part:

reactclient:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    volumes:
      - ./frontend:/frontend
      - /frontend/node_modules
    ports:
      - 5173:5173
    stdin_open: true

Dockerfile

FROM node:18-alpine

WORKDIR /frontend

COPY package.json .
RUN npm i

COPY . .

EXPOSE 5173

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

I've got default tailwind.config.js and post-css.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

I've tried to remove and install node_modules.

Answer 1

I know this is late but might help someone else running in to this problem.

The issue is that node_modules inside you volume is not updating. I fixed this by deleting the volume and then running build and up again.

docker compose down
docker volume ls

This will give you a list of all your volumes. Find the name of the volume for this project and then:

docker volume rm <volume_name>
docker compose build
docker compose up