Package Exports

@askphill/tailwind-easings
@askphill/tailwind-easings/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 (@askphill/tailwind-easings) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

<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