I was about to record a TailwindCSS video, and this kind of screencast works better if the browser shows you the changes in real-time; otherwise, you have to refresh the page with every change you make – and that’s just annoying.

The first thing that popped into my mind was tailwind play, an online playground where you can try out tailwind stuff. Any change you make will instantly appear on the right.

Then I remembered Laravel mix can do pretty much the same thing with BrowserSync.

Here’s how you can use it when serving a Laravel app with artisan:

mix.browserSync({
  proxy: 'http://127.0.0.1:8000/'
});

And here’s how to do it when using Laravel valet to serve a custom domain:

mix.browserSync({
  proxy: 'https://myapp.test',
  host: 'myapp.test',
  open: 'external',
  https: {
    key: '/Users/yourUser/.config/valet/Certificates/myapp.test.key',
    cert: '/Users/yourUser/.config/valet/Certificates/myapp.test.crt',
  },
});

It’s nowhere near as fast as tailwind play, but it’s good enough when working on entire projects.