tailwindlabs
Tailwind Standalone Throwing Caniuse Browserlist Error When Running Without Tailwind CLI
Tailwind is throwing a caniuse/browserslist outdated issue without using the CLI:
To repeat the issue:
1: Open a project, npm init -y => npm i -D tailwindcss
2: Initialize tailwind with npx tailwindcss init, and set up tailwind input file in current directory (input.css):
@tailwind base; @tailwind components; @tailwind utilities;
3: Set up start command: "start": "npx tailwindcss -i ./input.css -o ./output.css --watch",
4: That's it, error is
Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest Why you should do it regularly: https://github.com/browserslist/update-db#readme
This error doesn't happen with the tailwindcss-cli installed, running npx update-browserslist-db@latest does not fix it. I think it has to do with the bundle of tailwind, if the cli needs to be installed it should be updated on the docs, ideally though there shouldn't really need to be another package installed for it to work standalone. Stuff still rebuilds and it updates the classes fine without the CLI, but the error is everlasting without it.
After installing the tailwindcss-cli the error magically vanishes, even though the commands remain the same:
Just crashed into this, thanks for opening this issue <3
Took me a few hours to figure out the issue the first time I ran into it, thought I would hopefully save a little bit of time for those running into it in the future, nowhere on the docs does anyone mention the CLI needs to be installed, and Caniuse/Browserslist shouldn’t be too hard for someone to update if they’re familiar with the developer setup for the project.
Glad to be of some assistance <3
In Windows, installing Tailwind CLI does not appear to resolve this issue/annoyance.
Adding to the chorus; A fresh rails project w tailwind v3.4.3 through NPM throws caniuse out-of-date errors. Running npx update-browserslist-db@latest did not fix the error. Installing the standalone tailwindcss cli (v3.4.3) and running it manually (tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify) still reports out-of-date, directly after running npx update-browserlist-db and verifying it reports being up-to-date.
Platform is
@Ikariusrb @pm64 Try running the command ‘npx tailwindcss -i input.css -o output.css’, for me this works on MacOS, I’m not sure about windows, hopefully it exhibits similar behavior but no promises as it’s untested, I know the npx running of the command didn’t throw errors when this was posted though, so may be worth a shot
@RockyWearsAHat - that is the command for tailwind to build the css, and it varies project to project. In my case it's tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css ... and it's the command which is throwing the error indicating the caniuse db is out-of-date, even when it IS up to date.
I merged in a fix for this (hopefully) — will get a patch release out soon.
@thecrypticace - I looked at the PR, and it appears to simply update the caniuse db inside the tailwindcss package. Does that mean this behavior will reappear the next time the caniuse db gets updated?
@Ikariusrb From what I can tell the check for the database appears to be something like "was the database version released more than 6 months ago". So I think we'd got bundled with an older version and after some point the date check started kicking in.
So, the answer is probably if we don't release another patch within however many months. I'm going to look into why updating a local version doesn't appear to work but the lock file should take care of stuff for now I think. Going to be testing this here shortly.
I've release v3.4.4 which has updated the embedded database and the error is now gone. I'll still be investigating a way to make this a non-issue going forward but, for now at least, the issue is fixed. 👍
@thecrypticace Is there a way with Yarn or Npm to not specify package version and have the manager decide the package version for the latest release? Just wondering if that could be a more permanent fix?
Not that I know of no. browserslist depends on a version of caniuse-lite. This means it's embedded in the package-lock.json / yarn.lock files. The other thing is that npm doesn't generally update indirect deps unless:
- You update a dependency which directly or indirectly depends on a newer version
- You run
npm upgrade - Some tool explicitly updates it in the lock file (this is what
npx update-browserslist-db@latestdoes)