BlaizeDuke's avatar

NPM run dev and NPM run watch not updating tailwind file

I've got a fresh install of laravel and am trying to use custom colors through tailwind. The problem is tailwind doesn't bring in the new colors unless they are used in the HTML somewhere it seems. I figured NPM run watch would work to update it. However both NPM run watch and NPM run dev do not seem to update the main css file to have these new classes.

Instead I have to run NPM run build anytime I want it to update. Is there a way to fix this?

tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      "./resources/**/*.blade.php",
      "./resources/**/*/*.js",
      "./resources/**/*.vue"
  ],
  theme: {
      colors: {
          'gray': '#414041',
          'white': '#FFFFFF',
          'primary': {
              light: '#D0E9F2',
              DEFAULT: '#87d4ef',
              dark: '#6aa7BD',
              darker: '#3F6370'
          }
      },
    extend: {},
  },
  plugins: [],
}

Package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.14",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "postcss": "^8.4.23",
        "tailwindcss": "^3.3.2",
        "vite": "^4.0.0"
    }
}

Vite config

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});
0 likes
11 replies
LaryAI's avatar
LaryAI
AI
2 years ago
Level 58

The issue seems to be with the Vite configuration. The laravel-vite-plugin is only watching the input files specified in the configuration. In this case, it is only watching resources/css/app.css and resources/js/app.js. To fix this, we need to add the output file generated by Tailwind to the input files.

Update the Vite configuration to include the output file generated by Tailwind:

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

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

Here, we have added public/css/main.css to the input files. This is the file generated by Tailwind and contains all the styles. Now, when we run npm run watch or npm run dev, Vite will watch for changes in this file and rebuild the assets accordingly.

Note: Make sure that the path to the output file is correct. In this case, it is assumed that the output file is generated in the public/css directory. If it is generated in a different directory, update the path accordingly.

Snapey's avatar

what css are you including in the layout?

build will create a file in public/build folder

BlaizeDuke's avatar

@Snapey I have a file under resources/css/app.css to include the

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

Other than that I am just testing the basics.

        <div class="px-3 py-3 bg-primary-darker">Hello</div>
        <div class="px-3 py-3 bg-primary-dark">Hello</div>
        <div class="px-3 py-3 bg-primary">Hello</div>
        <div class="px-3 py-3 bg-primary-light">Hello</div>
        <div class="px-3 py-3 bg-gray text-primary-light">Hello</div>

If for instance I change the second div to have text-primary it will not work until I run npm run build again.

Edit: And to be clear if I were to use text-primary-light I wouldn't have to run build because it had already been used in my application.

BlaizeDuke's avatar

@laryai It doesn't look like run dev is even generating a file for tailwind. Instead, I believe vite is putting a file in public/build/assets/app-5ceaf0f8.css

There is no generic app.css file in public.

dcx's avatar

@BlaizeDuke maybe check your vite.config.js I see you're using vue in tailwind config (so it works on build) but vite is perhaps not refreshing because it's not in the config, see below example...

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});
Snapey's avatar

Check your layout file to see which css file you are including in the master layout file....

BlaizeDuke's avatar

@Snapey

<!doctype html>
<html lang="en" class="h-full bg-gray-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu Matrix - {{ $title ?? "Home" }}</title>
    @vite('resources/css/app.css')
    @vite('resources/js/app.js')

</head>
BlaizeDuke's avatar

I figured it out after watching a bunch of vite videos. I had to open two separate terminals and run php artisan serve in the first terminal and npm run dev in the second. I don't know if that was intended, but everything is working perfectly now.

1 like
AmaanS's avatar

@BlaizeDuke Hi, I got same error as yours, but I am already following the solution which you suggested, still the issue persists. Did you do anything apart from running those two commands in separate window.

Snapey's avatar

npm run dev starts a server for the vite assets providing compilation and hot-reload of the browser when a source file changes.

Then you are supposed to run npm run build for production which should create static assets

But either should be producing the same css ?

Please or to participate in this conversation.