tailwindcss-animate Typosquats Flagged as npm Malware

Two npm packages named tailwindcss-anim and tailwind-anim were flagged as critical malware this week for impersonating tailwindcss-animate, one of the most widely installed animation helpers in the Tailwind CSS ecosystem. Both typosquats were recorded in the supplychainattack.org catalog on August 2 and August 3, 2026, and both carry a critical severity rating. The names are one deleted suffix away from a package that ships as a default dependency in shadcn/ui, so a single fat-fingered npm install (or a coding assistant that guesses a plausible name) is all it takes to pull the wrong thing into a project. That is the whole design of a typosquat, and Tailwind tooling has been a repeat target for years.

What happened with the tailwindcss-animate typosquats

Two packages were published to the public npm registry using names built to sit next to the real tailwindcss-animate. The catalog lists tailwindcss-anim (recorded August 2) and tailwind-anim (recorded August 3), each marked critical. Both drop characters from the legitimate name: one trims the trailing ate, the other also drops the css- segment. These are the kind of near-miss strings that pass a quick visual check in a terminal or a pull request diff.

We want to be precise about what is confirmed. The critical classification comes from automated malware detection on the published package contents. As of this writing, a detailed public payload teardown (install-script contents, command-and-control endpoints, file hashes, and download totals for the two versions) was not yet available from an independent research vendor. Treat the mechanics below as the standard typosquat playbook these packages fit, not line-by-line confirmed behavior. Where we lack a verified fact, we say so rather than guess.

The two packages did not land in isolation. The same catalog recorded other critical npm entries on August 3, including malicious code in @custombots/custombot and malicious code in @types-beta/sdk. That steady drip of individually flagged packages is the normal texture of the npm threat surface right now, not an anomaly.

Why tailwindcss-animate is a high-value target

tailwindcss-animate is a small plugin that adds animation utility classes to Tailwind CSS. It is popular well beyond its size because it is wired into the component tooling that a large share of React and Next.js teams use. When you scaffold a project with shadcn/ui, this plugin comes along as a dependency, which pushes its install count into the range that makes impersonation worthwhile. A package that many people install without thinking is exactly the sort of name attackers copy.

Tailwind-branded packages have been abused before, which is part of why these new entries matter. Security researchers documented a malicious npm package mimicking a Material Tailwind CSS tool back in 2022, and Dark Reading reported on a package posing as a Tailwind tool in December 2023. The pattern is consistent: pick a trusted front-end brand, register a name a hair off from the real one, and wait for typos, stale copy-paste instructions, or an autocomplete miss to do the delivery.

There is a newer wrinkle worth naming. Coding assistants sometimes suggest package names that sound right but do not exist, a failure mode people call slopsquatting, and attackers register those plausible names in advance. We have no evidence either package was seeded that way, but both names are exactly the kind of shortened, "sounds correct" strings a tired human or a language model can produce.

Timeline

• August 2, 2026: tailwindcss-anim recorded in the catalog and rated critical.
• August 3, 2026: tailwind-anim recorded and rated critical, alongside other same-day critical npm flags.
• Ongoing: no CVE or coordinated public advisory was attached to these two names at publication time, and registry removal can lag detection.

Who is affected

The people at direct risk are anyone who installed tailwindcss-anim or tailwind-anim, in any version, into a project, a container image, or a CI pipeline. That most likely means front-end developers working in Tailwind, React, and Next.js codebases, since that is the population most exposed to a near-miss of tailwindcss-animate.

The blast radius is larger than one workstation when the install happens in automation. A malicious package that runs during npm install on a build agent executes with whatever that agent can reach: environment variables, cloud metadata endpoints, npm and registry tokens, and any secrets mounted for the build. If your CI installed one of these names even once, treat the runner's secrets as exposed until you have rotated them. Developers who install with lifecycle scripts enabled are the most exposed, because a postinstall hook runs on its own with no code review step in between.

How typosquat npm malware like this works

The general pattern is worth spelling out because it drives the remediation. A typosquat package usually earns its keep in one of two ways.

The first is an install-time script. The package declares a preinstall, install, or postinstall hook in package.json, and npm runs it automatically when the dependency is installed. That script can read environment variables, harvest tokens, scan for wallet files, or pull a second-stage binary. This is the pattern behind many recent npm incidents, from credential-stealing waves to the crypto-focused stealers we have catalogued this summer.

The second is runtime code that only fires when your application imports the module, which is stealthier because it survives an install that blocked scripts. Both approaches lean on the same trust assumption: that the name in your lockfile is the name you meant.

One structural change helps here. npm v12 began blocking lifecycle install scripts by default, which removes the easiest execution path for the install-time variant. That default does not undo a malicious package that already ran on an older client, and it does nothing for runtime payloads, so it lowers risk rather than removing it.

How to check if you are affected

Start with your lockfiles, because they record exactly what resolved, not just what you asked for. Run these from the root of each repository and each build image you can reach.

# search every common lockfile for the two typosquat names
grep -R -n -E "tailwindcss-anim|tailwind-anim" \
  package-lock.json yarn.lock pnpm-lock.yaml npm-shrinkwrap.json 2>/dev/null

# ask the installed tree directly (run inside the project)
npm ls tailwindcss-anim tailwind-anim 2>/dev/null

# confirm the legitimate package is what you actually have
npm ls tailwindcss-animate

If the first two commands return nothing and the third shows tailwindcss-animate, you are clear for that project. If either malicious name shows up, note the version and the parent that pulled it in, then move to remediation. Check your CI logs too. Search build output for tailwindcss-anim and tailwind-anim to see whether an install ran on a runner rather than only on a laptop.

Remediation

If you find either package, work through this in order. Do not just delete the folder and move on, because the risk is what may have already run.

# 1. remove the malicious dependency
npm uninstall tailwindcss-anim tailwind-anim

# 2. install the correct package if your project needs it
npm install tailwindcss-animate

# 3. wipe caches so a bad tarball is not reused
npm cache clean --force
rm -rf node_modules
npm ci

Then rotate anything the install could have touched. Revoke and reissue npm tokens, CI secrets, and any cloud keys that were present on an affected machine or runner.

# list and revoke npm tokens, then create a fresh one
npm token list
npm token revoke <TOKEN_ID>
npm token create

For anything installed in CI, assume the runner's environment was readable and rotate on that assumption. Pin dependencies with a committed lockfile, and where possible install with scripts disabled (npm ci --ignore-scripts) so a lifecycle hook cannot fire before you have reviewed a change. If you maintain an allowlist or use a private proxy in front of npm, add tailwindcss-anim and tailwind-anim to the blocklist so they cannot be reinstalled by an old script or a cached manifest.

FAQ

Is tailwindcss-animate safe to use?

Yes. The legitimate tailwindcss-animate plugin is not the subject of this incident. The malicious packages are the look-alike names tailwindcss-anim and tailwind-anim. Install the correctly spelled tailwindcss-animate, pin it in your lockfile, and verify the name character by character before you accept it into a project.

How do I know if I installed tailwindcss-anim or tailwind-anim?

Search your lockfiles and your installed tree. Run grep -R -n -E "tailwindcss-anim|tailwind-anim" package-lock.json yarn.lock pnpm-lock.yaml at the repo root, and npm ls tailwindcss-anim tailwind-anim inside the project. If both come back empty, you did not install them. Repeat the check inside any container image or CI job that runs npm install.

What should I do if I already installed one of these packages?

Remove it, rebuild from a clean node_modules, and rotate every credential that was reachable from the affected machine or runner. That includes npm tokens, registry credentials, CI secrets, and cloud keys. Because the exact payload for these two packages was not publicly documented at publication time, treat any secret that touched an affected environment as compromised rather than trying to judge severity from behavior you cannot yet see.

Why do attackers keep targeting Tailwind packages?

Reach and habit. Tailwind tooling is installed constantly across front-end projects, often as a transitive dependency of scaffolding like shadcn/ui, so a convincing look-alike gets a steady stream of accidental installs. The same brand has been impersonated before, including a 2022 package mimicking a Material Tailwind CSS tool and a 2023 package posing as a Tailwind tool, which tells you this is a recurring target rather than a one-off.