Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Was it really necessary to break all existing apps using `npx @tailwindcss`?

It's an easy enough change to `npx @tailwindcss/cli` but we now have to go back and update all Apps and templates and since it uses v4 we now have to test every App to see if anything's broken with a v4 major release.

Given its massive install base, surprised they wouldn't maintain backward compatibility with v3 and have an explicit opt-in upgrade path to v4.

Edit:

v4 did actually break all our Tailwind Apps which doesn't support `@import "tailwindcss"`, likely because we use `npx tailwindcss` without any local npm dependencies. Trying to use the existing v3 `@tailwind components` renders a useless app.css. Only solution atm is to explicitly use v3 and change all our build scripts to use `npx tailwindcss@v3`.



You’re doing something silly living without a lock file to use a tool as part of your build process. Why don’t you actually include the version of the tool you want in your dev dependencies + lock file? That way, you don’t get broken. We’ve had the solution to this problem - lock files - for 15ish years, since Ruby’s `bundle` introduced it.


Not everything is a node App. We don't have a lock file because we don't have any local npm dependencies (as already mentioned). We're using `npx tailwindcss` as-is.


You clearly have a dependency on tailwindcss (if it can break you, you depend on it), and are using npm to fetch it (npx uses npm internally, they are installed together) so you can easily solve your problem by adding a couple json files with some version numbers in them. npx will pick up and use the version from your package.json, so no workflow change other than running `npm install …` once to generate package.json for your preferred semver specifier, and package-lock.json to guarantee your builds use a known-good version from now on.


FWIW Tailwind can be used as a standalone executable.

This is how Phoenix/Elixir bundles Tailwind without requiring npm.


I don’t care how you do it, just make getting your dependencies deterministic based on files committed to your repo!

Happily the Tailwind hex package encourages you configure a fixed version number, so you’ll never get surprise breakage as long as you’re committing your mix.lock file as well.

I’m only suggesting package.json/package-lock.json because their projects are already using the npm ecosystem to fetch the tailwind dependency. A Makefile that does `curl $TAILWIND_GITHUB_RELEASE_URL -o ./departing/tailwind` is fine too (this is what Tailwind.hex is doing under the hood).


AFAIK using the tailwindcss-cli without npm makes it impossible to use Tailwind plugins, such as DaisyUI.


This is not true, here is a demo projects which uses the Hex Tailwind and DaisyUI: https://github.com/naymspace/backpex/tree/develop/demo


Doesn't this still require NPM to install daisyui?


I believe that is true, although there is a project which bundles Tailwinds and DaisyUI into a single standalone executable:

https://github.com/dobicinaitis/tailwind-cli-extra

I have not tried this out yet, personally.


I just tried it... failed to load with very strange errors about postcss and unknown words.

FWIW, the tailwind binary from the official channel works great. I install it in my build.rs.


FFS we don't have local dependencies. Which means we don't have any local node_modules and have never ran npm install (there are no dependencies to install!). There is no lock file or dependencies.

Our Apps don't have any npm dependencies nor needs to run npm install by design, we're not going to start now, as already stated we're switching to `tailwindcss@v3` instead.

The point is this was a documented supported use-case which all our non node.js Apps used, which have now broken as a result of this release.


YOU DO have a local dependency.

Just add a mostly empty package.json like this:

    {
      "devDependencies": {
        "tailwindcss": "^3.4.17"
      }
    }
Run npm install once, and be done with it. You could even commit your node_modules if it helps.


We don't, we use npx to avoid needing any local dependencies.

`npx tailwind@v3` is the solution, definitely wont be committing node_modules to git, ever.


I find it really hard to not immediately be reminded of this:

https://xkcd.com/1172/


We only use npm dependencies and bloated node_modules folders [1] if we absolutely have to and for our non node.js Apps we explicitly don't.

[1] https://www.reddit.com/r/ProgrammerHumor/comments/6s0wov/hea...


But why not though

I also use tailwindcss in a non-node project, but use npm package / lock files to easily lock javascript / css dependencies and make renovate able to update them for me.


I've linked to why. We prefer #NoBuild solutions where we'd only use local npm deps/node_modules if we absolutely have to, and for non JS Apps we don't.


The node_modules folder is still somewhere on your system (~/.npm/_npx probably?) containing the same tailwindcss dependency files, but if it helps you sleep easier at night it’s okay to pretend it doesn’t exist.


No kidding, I thought global tools worked with fairy cloud dust, now I wont be able to sleep! But knowing there's not a going to be a bloated node_modules folder and local dependencies running different versions unnecessarily maintained in every project will definitely help.


Shove an @ version in it


Yep `npx tailwindcss@v3` is the solution we ended up with. Just had to change this in all our Apps and project templates.


I wish @-less wasn't be allowed. Like you can do @latest but then human confirm is needed. That way you don't get this problem in scripts.


> then human confirm is needed

"Suppress this prompt with the -y or --yes option" [1]

[1] https://docs.npmjs.com/cli/v11/commands/npx


So why not npx tailwindcss@^3.0.0 (or whatever version was there when you started)?


> Given its massive install base, surprised they wouldn't maintain backward compatibility with v3 and have an explicit opt-in upgrade path to v4.

Given it's a major version change, I'd expect it to create breaking changes, otherwise it would be a minor version change.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: