Next.js Discord

Discord Forum

There's missing CSS from my docker-compose build

Answered
Ninhache posted this in #help-forum
Open in Discord
Avatar
The title is not really correct but the CSS does not appear in my NextJS application :
I've google it and found that : https://stackoverflow.com/questions/71739571/why-doesnt-css-work-when-i-deploy-the-next-js-sample-project-in-production

But that not really the same as me !
([this comment](https://stackoverflow.com/a/71857128/16435873) is maybe a part of the solution tho)

~~

The stackoverflow I linked above is trying to use NextJS for a production deploy.. I'm still trying to use it in local lol
My goal is simply to use docker-compose to up both of my app and my db at the same time !

Anyone could help with that stuff ? Or atleast aim me on something ? Since there's not even a single error.. i'm pretty lost
Answered by Ninhache
Hey ! you sure it's a CSS problem ? (no it's not we can see CSS using ctrl+U or by adding * { border: 2px solid red;} in css

NO It's NOT it's from tailwind..

I were missing both tailwind.config.ts & postcss.config.mjs..

Working fine now I've ALL files
View full answer

2 Replies

Avatar
Also, there's both of my docker-compose & Dockerfile used for the build :

version: "3"

services:
  next-app:
    container_name: next-app
    build:
      context: .
      dockerfile: Dockerfile
    env_file:
      - .env
    # volumes:
    #   - ./app:/app
    #   - ./public:/public
    restart: always
    ports:
      - 3000:3000
    networks:
      - my_network

  # db:
  #   container_name: db
  #   image: postgres:latest
  #   environment:
  #     POSTGRES_DB: ${POSTGRES_DB}
  #     POSTGRES_USER: ${POSTGRES_USER}
  #     POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
  #   ports:
  #     - "5432:5432"

networks:
  my_network:
    external: true
    # driver: bridge


FROM node:18-alpine

WORKDIR /app

COPY package.json yarn.lock ./
COPY packages ./packages

RUN yarn --frozen-lockfile

COPY app ./app
COPY public ./public
COPY lib ./lib
COPY components ./components
COPY styles ./styles
COPY next.config.mjs .
COPY tsconfig.json .
COPY .next .next

ENV NEXT_TELEMETRY_DISABLED 1

CMD ["yarn", "dev"]


Don't know if it's really related
Avatar
Hey ! you sure it's a CSS problem ? (no it's not we can see CSS using ctrl+U or by adding * { border: 2px solid red;} in css

NO It's NOT it's from tailwind..

I were missing both tailwind.config.ts & postcss.config.mjs..

Working fine now I've ALL files
Answer