downwindcss / easings

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

@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

easings's Issues

test: Add more thorough test

Refer to https://github.com/benface/tailwindcss-gradients

feat: Convert the preset into plugin.

I didn't know the difference between a preset and a plugin at the time of the creation.

This fits more as a plugin so convert it so with a major version update.

Doesn't compile

I got this error when trying to use it in nextjs with postcss:

Require stack:
- C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\@[email protected]\node_modules\@downwindcss\easings\dist\easings.cjs.development.js
- C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\@[email protected]\node_modules\@downwindcss\easings\dist\index.js
- C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\tailwind.config.cjs
- C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\[email protected][email protected]\node_modules\tailwind-config-viewer\cli\index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\@[email protected]\node_modules\@downwindcss\easings\dist\easings.cjs.development.js:3:22)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)```

perf: Purge Tailwind CSS for Storybook

Current code base doesn't purge CSS for storybook:
https://github.com/downwindcss/easings/blob/main/tailwind.config.js#L2

module.exports = {
  purge: [], // <--- Add purge regex here
  darkMode: false, // or 'media' or 'class'
  // rest of configuration...
};

feat: Create a storybook

What?

Create a storybook

How?

Show how each easings work

To Do

• Learn storybook - https://www.learnstorybook.com/
• Playaround
• Add Tailwind CSS to Storybook
• Create stories for each easing
• Exclude Storybook from output
• Publish

Resources

1. Storybook Home
2. Learn StoryBook
3. SO - Addding TW to Storybook
4. Chromatic
5. How to Build A React TS Tailwind Design System on DEV