Back to Explore

Wombosvideo/tw-animate-css

GitHub
1 watchersOpen source

Last release:

tw-animate-css provides a Tailwind CSS v4.0 compatible set of animation utilities, acting as a replacement for tailwindcss-animate. It includes ready-to-use enter and exit animations and parameterized utility classes so you can control duration, easing, delay, repeat behavior, and more.

Project status

  • The source appears to be maintained in the near term, with an upstream GitHub push on 2026-02-28, but the most recently listed published update is v1.4.0 from 2025-09-24, so publicly visible updates have a long gap relative to today (2026-06-09).
  • Update cadence is sporadic rather than steady, based on the visible sequence of tags (mostly in mid to late 2025, then no further tagged updates listed after 2025-09-24).

AI summary generated

AI-generated from public sources. May be inaccurate. Report

Recent updates

  • v1.4.0

    v1.4.0 changes how this package handles Tailwind CSS prefixing by moving prefix support to a dedicated subpath export. It also adjusts the build pipeline to generate an additional prefixed stylesheet using transform.ts updated to take separate input and output file arguments.

    BreakingFeatures
  • v1.3.8

    v1.3.8 primarily adds support for ng-primitives accordion and collapsible content height CSS variables, and introduces a mechanism intended to support Tailwind CSS global CSS variable prefixes. It also updates documentation around which content-height variables are required for the accordion/collapsible animations. The release notes warn of a breaking interaction between the prefix support and custom spacing.

    BreakingFeatures
  • v1.3.7

    v1.3.7 adds new CSS utilities to blur elements on enter and exit (blur-in and blur-out), including typed custom properties for controlling blur amounts. The release also updates documentation and bumps project tooling dependencies, including the pnpm version used by the repo.

    Features
  • v1.3.6

    v1.3.6 updates tw-animate-css so the built-in accordion and collapsible animations can use Tailwind animation-related CSS variables instead of hardcoded easing and other defaults. The release notes only mention transition timing function (easing), but the code shows a broader change that can affect multiple animation parameters. It also bumps the package manager version and updates several dependencies in the lockfile.

    Features
  • v1.3.5

    v1.3.5 updates the CSS utilities used by the project, fixing an incorrect translation calculation when slide utilities are configured with a ratio. The release also bumps the package version and updates various dev dependencies/tooling versions.

  • v1.3.4

    v1.3.4 adds logical slide utilities that respect text direction, introducing start/end variants for slide-in and slide-out transforms. It also changes the default animation fill-mode from `forwards` to `none` to fix cases where animations would keep their end-state unexpectedly.

    Features
  • v1.3.3

    v1.3.3 updates the CSS animation utilities to better support arbitrary animation-related CSS variables and adds Kobalte UI integration for accordion and collapsible height animations. The diff also updates docs to mention Kobalte, and bumps TypeScript type dependencies in the lockfile.

    Features
  • v1.3.2

    Release v1.3.2 includes a small CSS fix related to how the `--tw-animation-duration` custom property is handled. The only code changes are removing the `@property --tw-animation-duration` `initial-value` in `src/tw-animate.css` and bumping the package version to 1.3.2.

  • v1.3.1

    v1.3.1 adds CSS @property registrations for the library's Tailwind animation custom properties, and registers them at the :root level to control how those variables inherit. This directly targets the reported bug where animation variables on a parent element could unexpectedly affect descendants.

  • v1.3.0

    v1.3.0 adds a new `animation-duration-*` utility and rewires core animation CSS variables to prefer `--tw-animation-duration` (falling back to Tailwind `--tw-duration`) when determining animation timing. It also updates utility parsing to align more closely with Tailwind CSS syntax, including changes to zoom behavior that are called out in the release notes. The release notes do not mention additional syntax changes for other “value-taking” utilities (notably spin).

    BreakingFeatures