sung.codes

Adding PostCSS-Easings to Extend Tailwind CSS Transition Timing Functions

tailwindtailwindcsseasingstransition

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
  1. Extend transitionTimingFunction in TW configuration file, tailwind.config.js.
1const { easings } = require("postcss-easings");2
3module.exports = {4  theme: {5    extend: {6      transitionTimingFunction: { ...easings },7    },8  },9  // Other configurations10  // ..11};

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

1const { easings } = require("postcss-easings");2
3module.exports = {4  theme: {5    extend: {6      transitionTimingFunction: { ...easings },7    },8  },9};

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

1module.exports = {2  purge: [],3  presets: [require("./tailwind-preset.js")],4  darkMode: false, // or 'media' or 'class'5  theme: {6    extend: {},7  },8  variants: {9    extend: {},10  },11  plugins: [],12};

Image by Angelo Esslinger from Pixabay