Spring transitions in tailwindCSS using tailwindcss-spring

Plugin

I came across this tweet from Kevin Grajeda on a new tailwind plugin he had created, called tailwindcss-spring.

Earned an immediate star and a follow! Truly a great plugin, using just native css linear() transitions to make some juicy spring animations.

Installation

 pnpm i tailwindcss-spring 

Adding to tailwind.config.js

module.exports = {
  plugins: [
    require("tailwindcss-spring"),
    // ...
  ],
}

Usage

const Button = () => {
  return (
    <button 
      className="spring-bounce-40 spring-duration-300 hover:scale-95 active:scale-100"
      type="button"
    >
    hello
    </button>
  )
}