npm run dev not injecting CSS through BrowserSync

[robhuijben]

For hours I'm trying to figure out what prevents BrowserSync from injecting CSS changes into the browser. I've got a DDEV setup with Wordpress running on https://wordpress.ddev.site/. I changed the proxy in local.json to the host URL and ran npm run dev. When opening localhost:3000 I see BrowserSync is connect and injecting HTML changes, for example when I change one of the CSS classes (bg-indigo) in templates/partials/example.php to bg-indigo-200.

I expected the CSS in build/css/app.css to change too, as the original file contains .bg-indigo-700 which should now be .bg-indigo-200.

Should the npm command also generate the needed CSS before injecting it into the browser?

Steps I took to try to solve the issue

• Adding a host parameter to the BrowserSync config in webpack.mix.js
• Exposing port 3000 in DDEV docker compose yaml
• Running the npm run dev command from within the container
• Delete the build/css/app.css file after running npm run dev. No file was generated when editing a HTML CSS class.

[EDIT]

I figured this has something to do with de mode: jit parameter in tailwind.js. When disabling the Sass is generated and reloading the page in the browser actually displays the correct result, although injecting the CSS does still not seem to work properly.

[JBraddockm]

I have also this issue. In watch mode, any changes in SASS files result in immediate change in the css file but this simply doesn’t happen with normal files. Reruning the npm run dev generate the new css successfully. Any idea why this is happening? Thank you.

[mishterk]

Howdy. Sorry for the lack of response here — I haven't had much time to get into these issues. I'm working alongside this issue where the JIT compiler doesn't seem to pick up changes made to the SASS files. I'm often needing to rerun npm run build to affect the changes. I would say the issue is what affects the browser sync aspect as that will be looking for changes to generated files.

I don't have a solution at the moment and have just been working around it. When I get some time, I'll be looking into whether there is some way I can get these working properly together or if perhaps SASS support needs to be dropped. Personally, I love having SASS in there so if I can get it working, I will. It's just a matter of finding the time at the moment.

[mishterk]

Further discovery while working on a project today — I noticed that changes made to files that are @imported within an @layer directive trigger the build but the changes aren't picked up. e.g;

@layer components {

     // Changes made inside this file trigger the compiler but the changes aren't added to the built stylesheet.
    @import "components/ComponentOne";

    // Changes made here trigger the compiler and the changes appear in the built stylesheet.
    .ComponentTwo{
        color: blue;
    }
}

Need to investigate why this is happening. Also need to look at whether fixing this (or using the .ComponentTwo example above) triggers BrowserSync.

[JBraddockm]

I believe that it is not possible to use @import inside a layer. It seems that the only way to work with partials scss files and integrate them into Tailwind is to use @import after Tailwind’s base, components, and utilities styles, depending on which category the partials fall into.

I started from scratch by using your setup and other tutorials I did find online and tried to simplify the setup so that I could understand and fix any potential issues in the future. I haven't integrated the BrowserSync yet but so far it seems to work pretty well and JIT picks up the changes in SASS files. After I've integrated the BrowserSync, I'll test it on an actual WordPress setup.

This is webpack.mix.js.

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.setPublicPath('./public');

mix
    .js('assets/js/app.js', 'public/js')
    .sass('assets/scss/app.scss', 'public/css')
    .options({
        postCss: [ tailwindcss('./tailwind.config.js') ],
        processCssUrls: false,
    })
    .version()

if (mix.inProduction()) {
    mix.sourceMaps();
}

I'll remove cssNano from here and rely on postcss.config.js completely. Removed.

This is postcss.config.js:

module.exports = (ctx) => ({
  plugins: {
      'tailwindcss/nesting': {},
      'tailwindcss': {},
      'autoprefixer': {},
      'cssnano': ctx.env === 'production' ? {
        "preset": [
          "default",
          {"discardComments": {"removeAll": true}}
        ]
      } : false,  
  },
})

The issue I am having here is I want to add tailwindcss/nesting but the syntax is different from tutorials online. If I change the script to accept require('tailwindcss/nesting'), then ctx.env gets broken. This is from Thirus. This is obsolete. I updated the code above.

package.json:

{
  "name": "tailwind-2dot2",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "development": "TAILWIND_MODE=build NODE_ENV=development mix",
    "watch": "TAILWIND_MODE=watch NODE_ENV=development mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "TAILWIND_MODE=build NODE_ENV=production mix --production"
  },
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "browser-sync": "^2.27.5",
    "cssnano": "^5.0.6",
    "laravel-mix": "^6.0.31",
    "postcss-cli": "^8.3.1",
    "resolve-url-loader": "^4.0.0",
    "sass": "^1.41.1",
    "sass-loader": "^12.1.0",
    "tailwindcss": "^2.2.4"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

I believe TAILWIND_MODE=build and TAILWIND_MODE=watch are needed to fix some potentials issues with JIT.

tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: [
    './index.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

I am learning as I go and most of the time it is just trial and error so I don't know what I am talking about :)

Thank you.

Edited: I updated the postcss.config.js to include tailwindcss/nesting and pass options for cssnano.

[mtssnk]

Any update on a fix for this? Experiencing arbitrary classes not being injected with "npm run dev". I have to restart the process for these classes to be output e.g. text-[red].

[charlie-george-1989]

Any updates on this? I am unable to get a simple text-color update without re-running npm run dev. Very frustrating :-(