Change Tailwind CSS about spacebook

[broeker]

Hi @enmcewan thanks for catching this -- I have pushed a fix to main for this:

  nav ul li a:hover {
    @apply text-gray-900 dark:text-gray-400;
  }

On my end I was able to see this change via hot reload, so not sure what is going on with your build but it sounds like the _tmp/style.css is not getting "watched" correctly. Did you run npm run build after running your first npm install?

[enmcewan]

Hi @broeker, no problem. Thanks for building this!

I thought I ran npm run build initially, but I later ran it again (trying to see if that fixed the other issues) and was getting errors.

As suspected, it's because I'm on Windows .To get the build script running, I installed the cross-env package and changed the script to:

"build": "cross-env NODE_ENV=production=true eleventy && cross-env NODE_ENV=production postcss styles/tailwind.css --o _site/style.css && cross-env ./node_modules/.bin/cleancss -o _site/style.css _site/style.css",

I've done that before for other eleventy sites. The build script runs now.

I tried a fresh install of spacebook and with cross-env, updated the script and rannpm run build.
But still, any changes to Tailwind are not updated. In fact, _tmp\style.css is never updated with build or start.
I'm thinking there must be another setting somewhere that is ignored on Windows, but there's no errors. Any clues where to look?

[broeker]

Interesting. Have you tested other eleventy projects?

The way I have the css watch set up mirrors this starter:

https://github.com/gregwolanski/eleventy-tailwindcss-alpinejs-starter

So I'd be curious if you have similar issues on that project or if it is something specfic to mine.I don't have a Windows machine to test but there seem to have been numerous issues (most closed) in the eleventy issue queue for hot reload problems in Windows, perhaps something in here might help?

11ty/eleventy#701

If you ever do get a working Windows install I'd be interested in adding any changes to my documentation!

[enmcewan]

OK, the issue is that I'm running VS Code integrated terminal in Cmd/Node mode. With that, the '& or &&' operator is ignored in the npm scripts. E.g. :

"start": "eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch"

Here only eleventy --serve runs and the postcss command is ignored.

One solution in this case (Using Cmd/Node Terminal) is another way to run multiple commands. Install npm-run-all and then adding new scripts like below:

    "postcss": "postcss styles/tailwind.css --o _tmp/style.css --watch",
    "eleventy": "eleventy --serve",
    "start2": "npm-run-all --parallel postcss eleventy",

Run start2 from the Cmd/Node Terminal and everything works. Note that a similar change is required for the "build" script.

[enmcewan]

Ha! I was in the middle of my reply when yours came in. I actually ran through eleventy-tailwindcss-alpinejs-starter as a sanity check and had the same issue. Finally I recalled an eleventy project from last year I did and used the npm-run-all solution.
Subsequently I have started using Git and figured out that Git Bash runs everything out of the box. Deduced that after reading this article.

I hope my previous reply is enough for you to update your documentation. If you need anything else, just let me know.

[broeker]

Nicely done, and thanks for leaving so much info for the next Windows user who stumbles across these issues 🤠