Skip to content


Setting Up Browsersync

Add live reloads and synchronized cross-device testing to your workflow

Because your development environment may have its own approach to Browsersync-like functionality, Browsersync is not included by default. You can install it as follows (in the same place you ran npm install):

npm install browser-sync --save-dev

If you’re using a custom .test domain for local development, you can use Browsersync’s proxy mode with that domain by adding the following line to the scripts section of your package.json file alongside the other watch:* commands:

"watch:browser-sync": "browser-sync start --proxy \"development-website.test\" --files \"theme\" --no-notify --no-inject-changes",Code language: plaintext (plaintext)

You’ll just need to update development-website.test to match your local development domain.

Separating Browsersync from the watch script

If you don’t want to use Browersync every time you run npm run watch, you’ll need to remove the command from the previous section and create a command for Browsersync without the watch: prefix:

"browser-sync": "browser-sync start --proxy \"development-website.test\" --files \"theme\" --no-notify --no-inject-changes",Code language: plaintext (plaintext)

Then you can add a command that runs the normal watch:* scripts alongside your new browser-sync command:

"watch-bs": "run-p watch:** browser-sync",Code language: plaintext (plaintext)

Running npm run watch will continue to work the same way as it always has, and npm run watch-bs will run the standard series of watch:* commands alongside your new one to execute Browsersync.

All Documentation

  • Quickstart
    Get started quickly, and deploy to production sooner than you expect


  • Installation
    Generate your custom theme, install it in WordPress and run your first Tailwind builds
  • Development
    Watch for changes, build for production and learn more about how _tw, WordPress and Tailwind work together
  • Deployment
    Share your new WordPress theme with the world
  • Troubleshooting
    Find solutions to potential issues and answers to frequently asked questions

In Depth