# 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.

```css
@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.

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