├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── index.d.ts ├── index.js ├── package.json └── tailwindcss-v4.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # parcel-bundler cache (https://parceljs.org/) 61 | .cache 62 | 63 | # next.js build output 64 | .next 65 | 66 | # nuxt.js build output 67 | .nuxt 68 | 69 | # vuepress build output 70 | .vuepress/dist 71 | 72 | # Serverless directories 73 | .serverless 74 | 75 | # FuseBox cache 76 | .fusebox/ 77 | 78 | # test dir 79 | .test/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 burnworks 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-animation-delay 2 | 3 | Tailwind CSS plugin, add animation-delay CSS property. 4 | 5 | > [!NOTE] 6 | > With Tailwind CSS v4, you can now define custom properties directly in your CSS file without using any plugins. 7 | > If you’re working with v4.0 or later, please include the contents of `tailwindcss-v4.css`. 8 | 9 | ## Installation 10 | 11 | Install the plugin from npm: 12 | 13 | ```sh 14 | # Using npm 15 | npm install tailwindcss-animation-delay 16 | 17 | # Using Yarn 18 | yarn add tailwindcss-animation-delay 19 | ``` 20 | 21 | Then add the plugin to your tailwind.config.js file: 22 | 23 | ```js 24 | /** @type {import('tailwindcss').Config} */ 25 | module.exports = { 26 | theme: { 27 | // ... 28 | }, 29 | plugins: [ 30 | require("tailwindcss-animation-delay"), 31 | // ... 32 | ], 33 | } 34 | ``` 35 | 36 | ## Usage 37 | 38 | `animation-delay-{n}` class to specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. 39 | 40 | ```html 41 | 42 | 43 | 44 | ``` 45 | 46 | ### Negative values 47 | 48 | To use a negative animation-delay value, prefix the class name with a dash to convert it to a negative value. 49 | 50 | ```html 51 | 52 | 53 | 54 | ``` 55 | 56 | 57 | | Class | Properties | 58 | | -------------------- | ------------------------ | 59 | | animation-delay-none | animation-delay: 0s; | 60 | | animation-delay-75 | animation-delay: 75ms; | 61 | | animation-delay-100 | animation-delay: 100ms; | 62 | | animation-delay-150 | animation-delay: 150ms; | 63 | | animation-delay-200 | animation-delay: 200ms; | 64 | | animation-delay-300 | animation-delay: 300ms; | 65 | | animation-delay-400 | animation-delay: 400ms; | 66 | | animation-delay-500 | animation-delay: 500ms; | 67 | | animation-delay-600 | animation-delay: 600ms; | 68 | | animation-delay-700 | animation-delay: 700ms; | 69 | | animation-delay-800 | animation-delay: 800ms; | 70 | | animation-delay-900 | animation-delay: 900ms; | 71 | | animation-delay-1000 | animation-delay: 1000ms; | 72 | | animation-delay-1100 | animation-delay: 1100ms; | 73 | | animation-delay-1200 | animation-delay: 1200ms; | 74 | | animation-delay-1300 | animation-delay: 1300ms; | 75 | | animation-delay-1400 | animation-delay: 1400ms; | 76 | | animation-delay-1500 | animation-delay: 1500ms; | 77 | | animation-delay-2000 | animation-delay: 2000ms; | 78 | | animation-delay-3000 | animation-delay: 3000ms; | 79 | | animation-delay-4000 | animation-delay: 4000ms; | 80 | | animation-delay-5000 | animation-delay: 5000ms; | 81 | | animation-delay-6000 | animation-delay: 6000ms; | 82 | | animation-delay-7000 | animation-delay: 7000ms; | 83 | | animation-delay-8000 | animation-delay: 8000ms; | 84 | | animation-delay-9000 | animation-delay: 9000ms; | 85 | | -animation-delay-75 | animation-delay: -75ms; | 86 | | -animation-delay-100 | animation-delay: -100ms; | 87 | | -animation-delay-150 | animation-delay: -150ms; | 88 | | -animation-delay-200 | animation-delay: -200ms; | 89 | | -animation-delay-300 | animation-delay: -300ms; | 90 | | -animation-delay-400 | animation-delay: -400ms; | 91 | | -animation-delay-500 | animation-delay: -500ms; | 92 | | -animation-delay-600 | animation-delay: -600ms; | 93 | | -animation-delay-700 | animation-delay: -700ms; | 94 | | -animation-delay-800 | animation-delay: -800ms; | 95 | | -animation-delay-900 | animation-delay: -900ms; | 96 | | -animation-delay-1000 | animation-delay: -1000ms; | 97 | | -animation-delay-1100 | animation-delay: -1100ms; | 98 | | -animation-delay-1200 | animation-delay: -1200ms; | 99 | | -animation-delay-1300 | animation-delay: -1300ms; | 100 | | -animation-delay-1400 | animation-delay: -1400ms; | 101 | | -animation-delay-1500 | animation-delay: -1500ms; | 102 | | -animation-delay-2000 | animation-delay: -2000ms; | 103 | | -animation-delay-3000 | animation-delay: -3000ms; | 104 | | -animation-delay-4000 | animation-delay: -4000ms; | 105 | | -animation-delay-5000 | animation-delay: -5000ms; | 106 | | -animation-delay-6000 | animation-delay: -6000ms; | 107 | | -animation-delay-7000 | animation-delay: -7000ms; | 108 | | -animation-delay-8000 | animation-delay: -8000ms; | 109 | | -animation-delay-9000 | animation-delay: -9000ms; | 110 | 111 | ## Configuration 112 | 113 | You can configure which values and variants are generated by this plugin under the `animationDelay` key in your tailwind.config.js file: 114 | 115 | ```js 116 | /** @type {import('tailwindcss').Config} */ 117 | module.exports = { 118 | theme: { 119 | animationDelay: { 120 | 100: "100ms", 121 | 200: "200ms", 122 | 300: "300ms", 123 | 400: "400ms", 124 | "-3000": "-3000ms", 125 | "-7000": "-7000ms", 126 | }, 127 | }, 128 | variants: { 129 | animationDelay: ["focus"], 130 | }, 131 | } 132 | ``` 133 | 134 | ### Extending the default theme 135 | 136 | If you’d like to preserve the default values for a theme option but also add new values, add your extensions under the `theme.extend` key in your configuration file. 137 | 138 | ```js 139 | /** @type {import('tailwindcss').Config} */ 140 | module.exports = { 141 | theme: { 142 | extend: { 143 | animationDelay: { 144 | 120: "120ms", 145 | 250: "250ms", 146 | 350: "350ms", 147 | 450: "450ms", 148 | "-3500": "-3500ms", 149 | "-7500": "-7500ms", 150 | }, 151 | }, 152 | }, 153 | } 154 | ``` 155 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare const plugin: { handler: () => void }; 2 | 3 | export = plugin; 4 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | 3 | const animationDelay = plugin(function ({ matchUtilities, theme }) { 4 | const defaultValues = { 5 | 'none': '0s', 6 | 75: '75ms', 7 | 100: '100ms', 8 | 150: '150ms', 9 | 200: '200ms', 10 | 300: '300ms', 11 | 400: '400ms', 12 | 500: '500ms', 13 | 600: '600ms', 14 | 700: '700ms', 15 | 800: '800ms', 16 | 900: '900ms', 17 | 1000: '1000ms', 18 | 1100: '1100ms', 19 | 1200: '1200ms', 20 | 1300: '1300ms', 21 | 1400: '1400ms', 22 | 1500: '1500ms', 23 | 2000: '2000ms', 24 | 3000: '3000ms', 25 | 4000: '4000ms', 26 | 5000: '5000ms', 27 | 6000: '6000ms', 28 | 7000: '7000ms', 29 | 8000: '8000ms', 30 | 9000: '9000ms', 31 | '-75': '-75ms', 32 | '-100': '-100ms', 33 | '-150': '-150ms', 34 | '-200': '-200ms', 35 | '-300': '-300ms', 36 | '-400': '-400ms', 37 | '-500': '-500ms', 38 | '-600': '-600ms', 39 | '-700': '-700ms', 40 | '-800': '-800ms', 41 | '-900': '-900ms', 42 | '-1000': '-1000ms', 43 | '-1100': '-1100ms', 44 | '-1200': '-1200ms', 45 | '-1300': '-1300ms', 46 | '-1400': '-1400ms', 47 | '-1500': '-1500ms', 48 | '-2000': '-2000ms', 49 | '-3000': '-3000ms', 50 | '-4000': '-4000ms', 51 | '-5000': '-5000ms', 52 | '-6000': '-6000ms', 53 | '-7000': '-7000ms', 54 | '-8000': '-8000ms', 55 | '-9000': '-9000ms', 56 | }; 57 | 58 | const userValues = theme('animationDelay'); 59 | const values = { ...defaultValues, ...userValues }; 60 | 61 | matchUtilities({ 62 | 'animation-delay': (value) => ({ 63 | animationDelay: value, 64 | }), 65 | }, { 66 | values, 67 | variants: ["responsive", "hover"], 68 | supportsNegativeValues: true, 69 | }); 70 | }); 71 | 72 | module.exports = animationDelay; 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-animation-delay", 3 | "version": "2.0.2", 4 | "description": "Tailwind CSS plugin, add animation-delay CSS property.", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "author": "burnworks", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/burnworks/tailwindcss-animation-delay" 11 | }, 12 | "keywords": [ 13 | "tailwindcss", 14 | "tailwindcss-plugin", 15 | "animation-delay" 16 | ], 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "peerDependencies": { 21 | "tailwindcss": ">=2.0.0 || >=4.0.0" 22 | } 23 | } -------------------------------------------------------------------------------- /tailwindcss-v4.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | /* ======================== 4 | tailwindcss-animation-delay 5 | https://github.com/burnworks/tailwindcss-animation-delay 6 | ======================== */ 7 | @utility animation-delay-none { 8 | animation-delay: 0s; 9 | } 10 | @utility animation-delay-inherit { 11 | animation-delay: inherit; 12 | } 13 | @utility animation-delay-initial { 14 | animation-delay: initial; 15 | } 16 | @utility animation-delay-revert { 17 | animation-delay: revert; 18 | } 19 | @utility animation-delay-revert-layer { 20 | animation-delay: revert-layer; 21 | } 22 | @utility animation-delay-unset { 23 | animation-delay: unset; 24 | } 25 | @utility animation-delay-* { 26 | animation-delay: --value([*]); 27 | animation-delay: calc(--value(integer) * 1ms); 28 | } 29 | 30 | /* Usage ======================== 31 | 1) Integer 32 | e.g. 33 | animation-delay-75 -> animation-delay: 75ms; 34 | animation-delay-300 -> animation-delay: 300ms; 35 | 36 | 2) Keyword (the following are predefined) 37 | animation-delay-none -> animation-delay: 0s; 38 | animation-delay-inherit -> animation-delay: inherit; 39 | animation-delay-initial -> animation-delay: initial; 40 | animation-delay-revert -> animation-delay: revert; 41 | animation-delay-revert-layer -> animation-delay: revert-layer; 42 | animation-delay-unset -> animation-delay: unset; 43 | 44 | 3) Any