Package Exports

tailwindcss-animation-delay
tailwindcss-animation-delay/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-animation-delay) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tailwindcss-animation-delay

Tailwind CSS plugin, add animation-delay CSS property.

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-animation-delay

# Using Yarn
yarn add tailwindcss-animation-delay

Then add the plugin to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-animation-delay"),
    // ...
  ],
}

Usage

animation-delay-{n} class to specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.

<svg class="animate-bounce animation-delay-300 w-6 h-6 ...">
  <!-- ... -->
</svg>

Class	Properties
animation-delay-none	animation-delay: 0s;
animation-delay-75	animation-delay: 75ms;
animation-delay-100	animation-delay: 100ms;
animation-delay-150	animation-delay: 150ms;
animation-delay-200	animation-delay: 200ms;
animation-delay-300	animation-delay: 300ms;
animation-delay-400	animation-delay: 400ms;
animation-delay-500	animation-delay: 500ms;
animation-delay-600	animation-delay: 600ms;
animation-delay-700	animation-delay: 700ms;
animation-delay-800	animation-delay: 800ms;
animation-delay-900	animation-delay: 900ms;
animation-delay-1000	animation-delay: 1000ms;
animation-delay-1100	animation-delay: 1100ms;
animation-delay-1200	animation-delay: 1200ms;
animation-delay-1300	animation-delay: 1300ms;
animation-delay-1400	animation-delay: 1400ms;
animation-delay-1500	animation-delay: 1500ms;
animation-delay-2000	animation-delay: 2000ms;
animation-delay-3000	animation-delay: 3000ms;
animation-delay-4000	animation-delay: 4000ms;
animation-delay-5000	animation-delay: 5000ms;
animation-delay-6000	animation-delay: 6000ms;
animation-delay-7000	animation-delay: 7000ms;
animation-delay-8000	animation-delay: 8000ms;
animation-delay-9000	animation-delay: 9000ms;

Configuration

You can configure which values and variants are generated by this plugin under the animationDelay key in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    animationDelay: {
      100: "100ms",
      200: "200ms",
      300: "300ms",
      400: "400ms",
    },
  },
  variants: {
    animationDelay: ["responsive", "hover"],
  },
}

Extending the default theme

If you’d like to preserve the default values for a theme option but also add new values, add your extensions under the theme.extend key in your configuration file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animationDelay: {
        120: "120ms",
        250: "250ms",
        350: "350ms",
        450: "450ms",
      },
    },
  },
}