1.0.4 • Published 3 years ago
@downwindcss/easings v1.0.4
@downwindcss/easings
A Tailwind CSS Preset to extend Transition Timing Functions (easings).
Usage
Once you install and configure (steps below), you can access new easings via ease-*
prefix.
Note: Most of easings are available in https://easings.net/ except some because the preset uses postcss-easings internally.
ease-in-back
ease-in-circ
ease-in-cubic
ease-in-expo
ease-in-out-back
ease-in-out-circ
ease-in-out-cubic
ease-in-out-expo
ease-in-out-quad
ease-in-out-quart
ease-in-out-quint
ease-in-out-sine
ease-in-quad
ease-in-quart
ease-in-quint
ease-in-sine
ease-out-back
ease-out-circ
ease-out-cubic
ease-out-expo
ease-out-quad
ease-out-quart
ease-out-quint
ease-out-sine
Installation
$ npm install --save-dev @downwindcss/easings
# Or using a short-form flag
$ npm install -D @downwindcss/easings
Using yarn
.
$ yarn add --dev @downwindcss/easings
# or
$ yarn add -D @downwindcss/easings
Configuration
Add the preset, @downwindcss/easings
to the Tailwind CSS configuration file, tailwind.config.js
.
module.exports = {
presets: [require('@downwindcss/easings')],
// rest of configuration...
};
Examples
Check out Chromatic (Storybook) link, https://www.chromatic.com/library?appId=603ee5eb3e3e1c00231fcf04&branch=main
1.0.4
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.0.1
3 years ago
0.0.1-beta.0
3 years ago
0.0.1-alpha.2
3 years ago
0.0.1-alpha.1
3 years ago
0.0.1-alpha.0
3 years ago