Installation

Import the layer once and declare the layer order before Tailwind. Getting that order wrong is the single most common failure.

Import the layer

Once, globally. Everything easeful ships lives inside @layer easeful, so your own unlayered CSS always wins without a specificity fight.

@layer easeful, theme, base, components, utilities;
@import "easeful";
@import "tailwindcss";

Declare the layer order first

This is the single most common failure, and it fails quietly: the attribute is present, the CSS is loaded, and nothing animates. The @layer line has to come before any @import when Tailwind v4 is present. A layer's position is fixed by where it is first named, so if Tailwind names its layers first, easeful lands after them and loses.

Activate the types

Add easeful/types to the types array in your tsconfig.json. Without it data-motion accepts any string and a misspelt preset name is silent.

{
  "compilerOptions": {
    "types": ["easeful/types"]
  }
}