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 install -D tailwindcss-easing

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