Adding PostCSS-Easings to Extend Tailwind CSS Transition Timing Functions

Introduction

Tailwind CSS ("TW" hereafter) provides Transition Timing Functions (TTFs hereafter. I will use easings and TTFs interchangably).

• ease-linear
• ease-in
• ease-out
• ease-in-out

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#Keywords_for_common_cubic-bezier_easing_functions

Sometimes, you want more of such TTFs.

PostCSS-Easings provide most of easing functions on Easings.net

Note: "Most" because some easing functions require JavaScript, and non-trivial to add to TW thus not covered.

Implementation

Here are the steps to add PostCSS-Easings to TW.

1. Install PostCSS-Easings

npm install --save-dev postcss postcss-easings

2. Extend transitionTimingFunction in TW configuration file, tailwind.config.js.

const { easings } = require("postcss-easings")

module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: { ...easings },
    },
  },
  // Other configurations
  // ..
}

Usage

When you extend transitionTimingFunction, the new TTFs can be accessed with ease-* prefix.

<img
  src="..."
  class="h-1/3 w-1/3 transition ease-easeInOutBack duration-300"
  alt="logo"
/>

ease-easeInOutBack will work like https://easings.net/#easeInOutBack.

Sharing Easings

You can also create a local preset, which can be shared in another project (in a monorepo) or even create an NPM library out of it.

./tailwind-preset.js

const { easings } = require("postcss-easings")

module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: { ...easings },
    },
  },
}

And apply the above preset in tailwind.config.js.

module.exports = {
  purge: [],
  presets: [require("./tailwind-preset.js")],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Image by Angelo Esslinger from Pixabay