├── .gitignore
├── README.md
├── index.js
├── package-lock.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | # tailwindcss-aspect-raito gitgnore
2 | .DS_STORE
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Transition Utility Tailwind Plugin
 2 | 
 3 | ## Installation
 4 | 
 5 | Add this plugin to your project:
 6 | 
 7 | ```bash
 8 | # Install via npm
 9 | npm install --save-dev tailwindcss-transition
10 | ```
11 | 
12 | ## Usage
13 | 
14 | This plugin exposes options for you to use. Here is the example for adding it to your project plugins
15 | 
16 | ```js
17 | require('tailwindcss-transition')({
18 |   standard: 'all .3s ease',
19 |   transitions: {
20 |     'slow': 'all 2s ease',
21 |     'normal-in-out-quad': 'all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
22 |     'slow-in-out-quad': 'all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
23 |   }  
24 | })
25 | ```
26 | 
27 | This configuration would create the following classes:
28 | 
29 | ```css
30 | .transition { transition: all .3s ease; }
31 | .transition-slow { transition: all 2s ease; }
32 | .transition-normal-in-out-quad { transition: all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
33 | .transition-slow-in-out-quad { transition: all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
34 | ```
35 | 
36 | As per the [tailwind plugin docs](https://tailwindcss.com/docs/plugins/) you are able to pass variants (repsonsive, hover etc) as a parameter.
37 | 
38 | ```js
39 | require('tailwindcss-transition')({
40 |   standard: 'all .3s ease',
41 |   transitions: {
42 |     'slow': 'all 2s ease',
43 |     'normal-in-out-quad': 'all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
44 |     'slow-in-out-quad': 'all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
45 |   },
46 |   variants: ['responsive', 'hover'],
47 | })
48 | ```
49 | 
50 | ### Extra Thoughts (Not included in current version)
51 | 
52 | _note: this was just an idea_
53 | 
54 | It was taken into consideration that the plugin should accept a more complex set
55 | of options, more akin to the following:
56 | 
57 | ```js
58 | property: [ 'color', 'all' ],
59 | duration: [ '.3s', '2s' ],
60 | timing: [ 'ease', 'ease-in-out' ],
61 | delay: []
62 | ```
63 | 
64 | However this is on the back burner for the moment as it feels a little bit over-
65 | engineered, creates complex class names and, although sounds good from a config
66 | perspective, is probably overkill and cumbersome to use in real-world projects.
67 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const _ = require('lodash');
 2 | const className = 'transition'
 3 | 
 4 | module.exports = function({ standard, transitions, variants }) {
 5 |   return function({ addUtilities, e }) {
 6 |     let utilities = _.map(transitions, (val, name) => ({
 7 |       [`.${e(`${className}-${name}`)}`]: {
 8 |         transition: val
 9 |       }
10 |     }))
11 | 
12 |     if (standard) utilities = _.concat(utilities,  { [`.${className}`]: { transition: standard } } );
13 | 
14 |     addUtilities(utilities, variants)
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-transition",
 3 |   "version": "1.0.5",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "lodash": {
 8 |       "version": "4.17.5",
 9 |       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
10 |       "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
11 |       "dev": true
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-transition",
 3 |   "version": "1.0.5",
 4 |   "description": "Transition utility plugin for tailwindcss framework",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/webdna/tailwindcss-transition.git"
12 |   },
13 |   "keywords": [
14 |     "tailwind",
15 |     "tailwindcss",
16 |     "plugin",
17 |     "tailwindcss-plugin"
18 |   ],
19 |   "author": "webdna",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/webdna/tailwindcss-transition/issues"
23 |   },
24 |   "homepage": "https://github.com/webdna/tailwindcss-transition#readme",
25 |   "devDependencies": {
26 |     "lodash": "^4.17.5"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------