tailwindcss-motion

A standard Astro project follows this directory structure:

• src/pages/: Contains .astro or .md files. Each file is exposed as a route based on its filename.
• src/components/: Recommended location for Astro, React, Vue, Svelte, or Preact components.
• src/layouts/: Contains layout components used to wrap pages.
• public/: Stores static assets like images and favicons that are served directly.
• package.json: Defines project dependencies and scripts.

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

You can create a new Astro project using the 'basics' template by running the following command in your terminal:

npm create astro@latest -- --template basics

Use utility classes to animate dimensions inline without defining custom keyframes. You can animate properties like translation, opacity, and scale directly. Alternatively, use pre-defined presets.

Examples:

• Inline animation: motion-translate-x-in-25 motion-opacity-in-0
• Preset animation: motion-preset-fade

Register the plugin in your tailwind.config.js file. You can use the CommonJS require syntax or the ESM import syntax depending on your project configuration.

// CommonJS approach
export default {
     content: [...],
     theme: {
        extend: {...},
     },
     plugins: [require('tailwindcss-motion')],
};

// ESM approach
import tailwindcssMotion from "tailwindcss-motion";

/** @type {import('tailwindcss').Config} */
export default {
     content: [...],
     theme: {
          extend: {},
     },
     plugins: [tailwindcssMotion],
};

Install the tailwindcss-motion package as a development dependency using npm.

npm i -D tailwindcss-motion

tailwindcss-motion allows you to target specific animation properties using modifiers. This prevents global animation changes and allows fine-grained control over scale, translation, rotation, filters, opacity, and colors.

Supported modifiers:

• scale
• translate
• rotate
• blur / grayscale (targets filter)
• opacity
• background (targets background color)
• text (targets text color)

Example usage in class names:

• motion-duration-scale-[value]
• motion-delay-translate-[value]
• motion-ease-rotate-[value]
• motion-loop-opacity-[value]

For loop-based animations (scale, translate, rotate, blur, grayscale, opacity, background-color, and text-color), you can use Tailwind modifiers to control the loop behavior:

• mirror: The default behavior (e.g., motion-scale-loop-mirror).
• reset: Resets the animation state (e.g., motion-scale-loop-reset).

The plugin provides built-in TypeScript definitions. You can extend the theme with typed configurations for motionScale and motionTimingFunction within your Tailwind config.

import type { Config } from "tailwindcss";
import motion from "tailwindcss-motion";

const config: Config = {
  theme: {
    extend: {
      motionScale: {
        "200": "200%",
      },
      motionTimingFunction: {
        custom: "cubic-bezier(0.4, 0, 0.2, 1)",
      },
    },
  },
  plugins: [motion],
};

You can customize the motion animation values by extending the baseAnimationsTheme in your Tailwind configuration. The theme object provides defaults for various motion properties:

• motionScale: Inherits from scale with a DEFAULT of 50%.
• motionTranslate: Provides preset percentages (0, 25, 50, 75, 100, 150) and a DEFAULT of 25%.
• motionRotate: Inherits from rotate with a DEFAULT of 12deg.
• motionBlur: Inherits from blur.
• motionGrayscale: Inherits from grayscale.
• motionOpacity: Inherits from opacity with DEFAULT: '0' and 0: '0.001'.
• motionBackgroundColor: Flattens your Tailwind colors palette.
• motionTextColor: Flattens your Tailwind colors palette.

Run these commands from the root of your project to manage your development lifecycle:

| Command                   | Action                                           |
| :------------------------ | :----------------------------------------------- |
| `npm install`             | Installs dependencies                            |
| `npm run dev`             | Starts local dev server at `localhost:4321`      |
| `npm run build`           | Build your production site to `./dist/`         |
| `npm run preview`         | Preview your build locally, before deploying     |
| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI                     |

Apply a fade-in animation using the motion-preset-fade utility. You can specify the duration using the sm, md, or lg modifiers.

• sm: 300ms
• md: 500ms (default)
• lg: 800ms