TailwindsCSS dont load

@Sinnbeck Im using docker, running npm run dev only in container and im using vite

app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@raloseq Did you open the port in the container? Check the browser console for errors

@Sinnbeck In console i can see

Failed to load resource: net::ERR_CONNECTION_REFUSED app.js:1
Failed to load resource: net::ERR_CONNECTION_REFUSED app.css:1
Failed to load resource: net::ERR_CONNECTION_REFUSED client:1

@raloseq so sounds like you haven't. Show the docker-compose.yml

@Sinnbeck

version: "3.8"

networks:
  laravel:

services:
  nginx:
    image: nginx:stable-alpine
    ports:
      - "80:80"
    volumes:
      - .:/var/www/html
      - ./default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php
      - mysql
    networks:
      - laravel

  mysql:
    image: mariadb:latest
    restart: unless-stopped
    tty: true
    ports:
      - "${DB_PORT}:3306"
    environment:
      - MYSQL_DATABASE=${DB_DATABASE}
      - MYSQL_USERNAME=${DB_USERNAME}
      - MYSQL_PASSWORD=${DB_PASSWORD}
      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
    networks:
      - laravel

  php:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/var/www/html
    ports:
      - "8000:8000"
    networks:
      - laravel

@raloseq which container is running npm run dev? You need to open the port in that container

@Sinnbeck php container

@raloseq ok if I recall correctly, it is running on port 5173 by default. It should tell you in the error in the console

    ports:
      - "8000:8000"
      - "5173:5173"

@Sinnbeck Ye its port 5173 but adding this didn't solve the problem.

@raloseq are you sure you rebuild using docker compose?

@Sinnbeck ye i did dcker-compose build --no-cache then docker-compose up and run command npm run dev etc..

@raloseq check that the port is open and forwarded with docker ps

@Sinnbeck php container, btw im using nginx container to host app

 0.0.0.0:5173->5173/tcp, 0.0.0.0:8000->8000/tcp, 9000/tcp

@raloseq yeah it shouldn't be run through nginx. Just directly expose it in the php container.

Here is how I got it all working with lando (a docker wrapper) https://sinnbeck.dev/posts/getting-vite-and-laravel-to-work-with-lando

I run it in a node only container, but that isn't needed if you just have npm installed in the php container

@Sinnbeck I mean

3a84b8772af3   nginx:stable-alpine     0.0.0.0:80->80/tcp 
                                        
6aac0b4ec028   mariadb:latest         0.0.0.0:3306->3306/tcp

50670f470ee4   php   0.0.0.0:5173->5173/tcp, 0.0.0.0:8000->8000/tcp, 9000/tcp  

it is in php container or i misunderstood. I have installed npm in container so i need to change vite config i guess.

@raloseq as long as it's the same container it should work. If not I will need more information

@Sinnbeck Hmm what information do u need? Im doing composer install, npm install etc. in php dockerfile but im opening localhost:80 (nginx). Im not using php artisan serve.

@MohamedTammam vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '127.0.0.1'
      },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            backgroundImage: {
                'hero-pattern': "url('./storage/app/images/front-page.jpg')",
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};