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
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.
- Install PostCSS-Easings
npm install --save-dev postcss postcss-easings
- 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
Webmentions
Loading counts...