Define your own keyframes and animation utilities through theme.extend — slide-ins, fades, marquees.

Classes#

reference
js
// nakshora.config.js
theme: {
  extend: {
    keyframes: {
      rise: { from: { opacity: 0, transform: "translateY(8px)" }, to: { opacity: 1, transform: "none" } },
    },
    animation: { rise: "rise 0.4s ease-out both" },
  },
}

Example#

example
html
// nakshora.config.js
theme: {
  extend: {
    keyframes: {
      rise: { from: { opacity: 0, transform: "translateY(8px)" }, to: { opacity: 1, transform: "none" } },
    },
    animation: { rise: "rise 0.4s ease-out both" },
  },
}

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Name animations by intent (rise, fade-in), not effect
  • Both from and to keep reduced-motion fallbacks sane

utilities/transitions/transition-property|Transitions