Ask Phill Tailwind Easings

A Tailwind CSS plugin extends transitionTimingFunction with easing similar to the GSAP ones.

Installation

Install the plugin from npm:

npm i @askphill/tailwind-easings

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

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("@askphill/tailwind-easings"),
    // ...
  ],
};

Usage

We have the following easing curves:

• linear
• quad
• cubic
• quart
• expo
• back

you can prefix it with

• ease-in-{curve},
• ease-out-{curve}
• ease-in-out-{curve}

So for example use it as;

<div class="ease-in-out-expo ...">Cart drawer</div>

or

<div class="ease-in-quart ...">Cart drawer</div>

Keep in mind for linear you cannot use a prefix: so thats always ease-linear

All available classes

 ease-linear

 ease-in-quad
 ease-out-quad
 ease-in-out-quad

 ease-in-cubic
 ease-out-cubic
 ease-in-out-cubic

 ease-in-quart
 ease-out-quart
 ease-in-out-quart

 ease-in-expo
 ease-out-expo
 ease-in-out-expo

 ease-in-back
 ease-out-back
 ease-in-out-back