Tailwind does not hot reload after editing the html

[j-delisle]

Info:
using Eleventy as SSG
NPM scripts, postccs config etc found here

I've been struggling to find a good solution/answer to this. I'm not even sure it is possible, though I believe it is. Whenever I add a tailwind class or edit the html page with tailwind - my local dev environment does not hot reload. I have to ctrl c out of the server running and then restart it and run my scripts again in order for the page to update the html/tailwind changes on the page. It works, but its annoying and not the best workflow to have to ctrl c the running server then run the scripts again every time I make a little change in order to see it. Any ideas/thoughts greatly appreciated - esp if I'm just completely missing something here - thanks in advance

[Natetronn]

11ty is using BrowserSync for hot reloading and as such I'm not sure this has nothing to do with Tailwind; I could be wrong, though (double checking now...)

https://www.11ty.dev/docs/getting-started/#step-5-gaze-upon-your-templates

Do you get the following message when running the script "serve": "eleventy --serve", (npm run serve, yarn run serve etc.)?

[Browsersync] Serving files from: _site

ETA

Maybe you'll want to add some BrowserSync options:

https://www.11ty.dev/docs/watch-serve/#override-browsersync-server-options

https://browsersync.io/docs/options#option-files

[j-delisle]

Hey thanks for the reply - So it seems it could be a mix of Tailwind and Eleventy - the problem seems that when an html file is saved - it doesn't see the event change - when I run my npm run dev it outputs:

[Browsersync] Reloading Browsers... (buffered 23 events)
[Browsersync] File event [change] : _site/static/css/main.css

however, once I make the change to an html file - it reloads the browsers - the first step above but it never sees a change in the main.css - obviously cause the css didn't change its the html of the files that changed by adding a tailwind utility class - but I'm not sure how to get it to see those changes - I guess you are right that it is more eleventy - as when I edit an html file and add the tailwind css utility class - I really need the eleventy build command to run again and output those files...

when I run the npm run serve I get the message you shared above yes - but my site is not styled - there is no css cause psotcss doesn't run and process the css so.

thanks again for the reply

[simonswiss]

So far, I have been using the npm-run-all technique on 11ty, and running the npx @11ty/eleventy serve and the postcss in --watch mode. It's not great, but it works.

Here is my script setup:

"scripts": {
    "start": "yarn watch",
    "watch": "npm-run-all --parallel watch:css watch:html",
    "watch:css": "postcss src/_includes/tailwind/tailwind.css -o src/css/tailwind-generated.css --watch",
    "watch:html": "npx @11ty/eleventy clean && npx @11ty/eleventy --serve"
  },

I will be going on a live stream on Monday morning (Sunday afternoon/evening in most of the World 😅) to pair with Mike Riethmuller and help him build an 11ty plugin for Tailwind CSS.

Idea is to build a plugin that you can require in your eleventy.js file and takes care of processing your CSS through PostCSS.

I'll post a link here after we've recorded the stream 👍

[j-delisle]

I'll have to try your scripts and see what happens - But that sounds awesome - I will check back to watch this video/live stream - it sounds like it will be a good one!

[Natetronn]

That's a neat little trick, using npm-run-all. Nice to see a plugin is in the works, though.