https://github.com/downwindcss/easings

Tailwind CSS preset to extend Tailwind CSS's Transition Timing Function
https://github.com/downwindcss/easings

cjs javascript npm npm-package tailwindcss tsdx typescript

Last synced: about 1 month ago
JSON representation

Tailwind CSS preset to extend Tailwind CSS's Transition Timing Function

• Host: GitHub
• URL: https://github.com/downwindcss/easings
• Owner: downwindcss
• License: mit
• Created: 2021-02-13T07:21:34.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-13T06:44:26.000Z (about 3 years ago)
• Last Synced: 2024-07-23T15:33:59.890Z (about 2 months ago)
• Topics: cjs, javascript, npm, npm-package, tailwindcss, tsdx, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@downwindcss/easings
• Size: 834 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @downwindcss/easings

A Tailwind CSS [Preset](https://tailwindcss.com/docs/presets) to extend [Transition Timing Function](https://tailwindcss.com/docs/transition-timing-function)s (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](https://github.com/postcss/postcss-easings) internally.

```css

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

```bash

$ npm install --save-dev @downwindcss/easings

# Or using a short-form flag

$ npm install -D @downwindcss/easings

```

Using `yarn`.

```bash

$ 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`.

```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