{"_id":"tailwindcss-visual-kit","_rev":"3-d1373dabf42d52fe63ce816085b7dee8","name":"tailwindcss-visual-kit","dist-tags":{"latest":"1.3.7"},"versions":{"0.0.0-stage":{"name":"tailwindcss-visual-kit","version":"0.0.0-stage","_id":"tailwindcss-visual-kit@0.0.0-stage","stub":true,"maintainers":[{"name":"johnsmith0821","email":"johnsmith08211@outlook.com"}],"dist":{"shasum":"eabe75db1b105b288592c12f6dd5dc3a8805ec72","tarball":"https://registry.npmjs.org/tailwindcss-visual-kit/-/tailwindcss-visual-kit-0.0.0-stage.tgz","fileCount":2,"integrity":"sha512-Ywz4qOGl0bYWqBoisSpvw99I7fFxlLl+ooUiG0gF+mqTsmTp9V5yN5ljaitkfSH78UEycwivX9nYx7FEepXAJw==","signatures":[{"sig":"MEQCIGWnZoN4ayKt6csH38IXXdERXD2s0qstWjZl+hhAhM0wAiAFoenOvKRUWHJSPY9Z1NcASOrcHTw7Ap17zBOzapKgoA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":344},"_npmUser":{"name":"johnsmith0821","email":"johnsmith08211@outlook.com"},"description":"Temporary package placeholder for staged publishing","directories":{}},"1.3.6":{"name":"tailwindcss-visual-kit","version":"1.3.6","keywords":["tailwindcss","tailwindcss-plugin","animate.css","animation","keyframes","motion"],"author":{"name":"sericpieap"},"license":"MIT","_id":"tailwindcss-visual-kit@1.3.6","maintainers":[{"name":"johnsmith0821","email":"johnsmith08211@outlook.com"}],"homepage":"https://sericpieap.github.io/tailwindcss-visual-kit/","bugs":{"url":"https://github.com/sericpieap/tailwindcss-visual-kit/issues"},"dist":{"shasum":"e52691d845d2d07ea6a27e990348a51b97a373a2","tarball":"https://registry.npmjs.org/tailwindcss-visual-kit/-/tailwindcss-visual-kit-1.3.6.tgz","fileCount":8,"integrity":"sha512-s/Cu98F44WqDxCNvxdEwa9j7qtT6t78jsfZKl4rsy6P+aj+zZx9wve7qEkCWJoDOsdAYPC6wo6mQZSTDMm7vVA==","signatures":[{"sig":"MEUCIGN/2wnL1IzZ+2jIPj1rpk0I5gYProlv0rI9zQ4/OiFaAiEAtQbRjmGPVqFQk+8lZJyNRsqGlYuhWMhkL5IQ2stEucU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEYCIQCQD3siciICVhybsM8vaTZlGoo7AweoLNZTb4Fg7Zqx5QIhAIwuUkn6rModNz3BbabMVPEwBKtB1sTvN364lzpcnBt+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16886},"main":"plugin.js","engines":{"node":">=18"},"exports":"./plugin.js","scripts":{"lint":"eslint . --ext .js","test":"node --test"},"_npmUser":{"name":"johnsmith0821","email":"johnsmith08211@outlook.com"},"repository":{"url":"git+https://github.com/sericpieap/tailwindcss-visual-kit.git","type":"git"},"_npmVersion":"11.17.0","description":"A configurable, namespaced Animate.css integration for Tailwind CSS","directories":{},"_nodeVersion":"24.18.0","dependencies":{"postcss":"^8.4.5","postcss-js":"^3.0.3","animate.css":"^4.1.1","postcss-selector-parser":"^6.0.8","@jasperquinn/postcss-motion-helpers":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.5.0","tailwindcss":"^3.0.7","eslint-plugin-import":"^2.25.2","eslint-config-airbnb-base":"15.0.0"},"peerDependencies":{"tailwindcss":"^3"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-visual-kit_1.3.6_1791559112873_0.706316334522628","host":"s3://npm-registry-packages-npm-production"}},"1.3.7":{"_id":"tailwindcss-visual-kit@1.3.7","bugs":{"url":"https://github.com/sericpieap/tailwindcss-visual-kit/issues"},"dist":{"shasum":"54328670da4938288a963b2b0639f14820e14738","tarball":"https://registry.npmjs.org/tailwindcss-visual-kit/-/tailwindcss-visual-kit-1.3.7.tgz","fileCount":8,"integrity":"sha512-MaXPYBYEOrpmcvWGkGy2axjiAFTNGfmw4RfElQK4fMPwEcdepF9nC9PGYzK61evE55MUN40IOgQTRgQ1i5Fcxw==","signatures":[{"sig":"MEQCIFHlN7Z9Pu1Bpk6jRuAp909aN4pZeVy5Vlj8tmouTiuqAiBUeGgb8ieXUxLar3gpniQJP/G7ToPe0V3s9FCYDPPHtg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBtVR59I67WSuVcLiLN9dfayf9zBwBN9VCI6zUob//PZAiEAsEQgrVRHc705P7cSsNotOlcthu4MNetAm7Ss5SVTS/Q="}],"unpackedSize":16890},"main":"plugin.js","name":"tailwindcss-visual-kit","author":{"name":"sericpieap"},"engines":{"node":">=18"},"exports":"./plugin.js","license":"MIT","scripts":{"lint":"eslint . --ext .js","test":"node --test"},"version":"1.3.7","_npmUser":{"name":"johnsmith0821","email":"johnsmith08211@outlook.com"},"homepage":"https://sericpieap.github.io/tailwindcss-visual-kit/","keywords":["tailwindcss","tailwindcss-plugin","animate.css","animation","keyframes","motion"],"repository":{"url":"git+https://github.com/sericpieap/tailwindcss-visual-kit.git","type":"git"},"_npmVersion":"11.17.0","description":"A configurable, namespaced Animate.css integration for Tailwind CSS","directories":{},"maintainers":[{"name":"johnsmith0821","email":"johnsmith08211@outlook.com"}],"_nodeVersion":"24.18.0","dependencies":{"postcss":"^8.4.5","postcss-js":"^3.0.3","animate.css":"^4.1.1","postcss-selector-parser":"^6.0.8","@nexlayerlabs/postcss-keyframe-utils":"^1.0.3"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.5.0","tailwindcss":"^3.0.7","eslint-plugin-import":"^2.25.2","eslint-config-airbnb-base":"15.0.0"},"peerDependencies":{"tailwindcss":"^3"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwindcss-visual-kit_1.3.7_1793305539668_0.953138627771808"}}},"time":{"created":"2026-10-09T15:16:24.875Z","modified":"2026-10-29T20:25:39.898Z","0.0.0-stage":"2026-10-09T15:16:24.875Z","1.3.6":"2026-10-09T15:18:32.969Z","1.3.7":"2026-10-29T20:25:39.758Z"},"bugs":{"url":"https://github.com/sericpieap/tailwindcss-visual-kit/issues"},"author":{"name":"sericpieap"},"license":"MIT","homepage":"https://sericpieap.github.io/tailwindcss-visual-kit/","keywords":["tailwindcss","tailwindcss-plugin","animate.css","animation","keyframes","motion"],"repository":{"url":"git+https://github.com/sericpieap/tailwindcss-visual-kit.git","type":"git"},"description":"A configurable, namespaced Animate.css integration for Tailwind CSS","maintainers":[{"name":"johnsmith0821","email":"johnsmith08211@outlook.com"}],"readme":"# tailwindcss-visual-kit\r\n\r\nA configurable Animate.css integration for Tailwind CSS 3. It reads the installed Animate.css catalog at build time, emits only the animations you select, and namespaces generated keyframes to prevent collisions.\r\n\r\nGlobal `duration`, `delay`, and `iterationCount` values are passed to `@nexlayerlabs/postcss-keyframe-utils`, which generates the corresponding Tailwind base custom properties.\r\n\r\n## Installation\r\n\r\n```sh\r\nnpm install tailwindcss-visual-kit animate.css\r\n```\r\n\r\n## Basic usage\r\n\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],\r\n  plugins: [\r\n    require('tailwindcss-visual-kit')({\r\n      animations: ['bounce', 'fadeIn', 'fadeOut', 'slideInUp']\r\n    })\r\n  ]\r\n};\r\n```\r\n\r\nApply the base class together with an animation class:\r\n\r\n```html\r\n<div class=\"keyframe keyframe-fade-in\">Content</div>\r\n```\r\n\r\nAnimation names are converted to kebab case in generated class names. For example, `fadeInDownBig` becomes `keyframe-fade-in-down-big`.\r\n\r\n## Configuration\r\n\r\n```js\r\nrequire('tailwindcss-visual-kit')({\r\n  prefix: 'motion',\r\n  animations: ['bounce', 'fadeIn'],\r\n  exclude: ['bounce'],\r\n  aliases: {\r\n    enter: 'fadeIn'\r\n  },\r\n  duration: '900ms',\r\n  delay: '0s',\r\n  iterationCount: '1',\r\n  namespaceKeyframes: true,\r\n  respectReducedMotion: true,\r\n  modifiers: true,\r\n  durations: {\r\n    quick: '300ms',\r\n    deliberate: '1400ms'\r\n  },\r\n  delays: {\r\n    short: '150ms',\r\n    long: '800ms'\r\n  },\r\n  repeats: {\r\n    twice: '2',\r\n    forever: 'infinite'\r\n  }\r\n})\r\n```\r\n\r\n| Option | Default | Purpose |\r\n| --- | --- | --- |\r\n| `prefix` | `keyframe` | Prefix for classes and generated keyframes |\r\n| `animations` | `'*'` | Animate.css names to include; `'*'` includes the full catalog |\r\n| `exclude` | `[]` | Animation names to omit |\r\n| `aliases` | `{}` | Public class names mapped to Animate.css animation names |\r\n| `duration` | `1s` | Default animation duration |\r\n| `delay` | `0s` | Default animation delay |\r\n| `iterationCount` | `1` | Default iteration count |\r\n| `namespaceKeyframes` | `true` | Prefix keyframe identifiers to prevent collisions |\r\n| `respectReducedMotion` | `true` | Minimize animation when the user requests reduced motion |\r\n| `modifiers` | `true` | Generate timing, repeat, pause, and run utilities |\r\n| `durations` | Built-in map | Duration modifier tokens |\r\n| `delays` | Built-in map | Delay modifier tokens |\r\n| `repeats` | Built-in map | Iteration modifier tokens |\r\n\r\nThe deprecated `classes` option remains an alias for `animations` during migration.\r\n\r\n## Generated utilities\r\n\r\nWith the default prefix, the plugin generates:\r\n\r\n```html\r\n<div class=\"keyframe keyframe-bounce keyframe-duration-fast keyframe-delay-1s keyframe-repeat-2\"></div>\r\n```\r\n\r\n- `keyframe-duration-{token}` sets the duration variable.\r\n- `keyframe-delay-{token}` sets the delay variable.\r\n- `keyframe-repeat-{token}` sets the iteration-count variable.\r\n- `keyframe-paused` and `keyframe-running` control playback.\r\n\r\nTailwind variants work normally:\r\n\r\n```html\r\n<div class=\"keyframe keyframe-fade-in hover:keyframe-paused md:keyframe-duration-slow\"></div>\r\n```\r\n\r\n## Aliases\r\n\r\nAliases provide stable semantic names without copying keyframes:\r\n\r\n```js\r\nrequire('tailwindcss-visual-kit')({\r\n  animations: [],\r\n  aliases: {\r\n    notificationEnter: 'fadeInDown',\r\n    notificationExit: 'fadeOutUp'\r\n  }\r\n})\r\n```\r\n\r\n```html\r\n<aside class=\"keyframe keyframe-notification-enter\"></aside>\r\n```\r\n\r\n## Catalog\r\n\r\nThe package exposes the animation names found in the installed Animate.css version:\r\n\r\n```js\r\nconst keyframes = require('tailwindcss-visual-kit');\r\nconsole.log(keyframes.catalog());\r\n```\r\n\r\n## Migration from 1.x\r\n\r\n- The default class prefix changed from `animatecss` to `keyframe`.\r\n- Generated animation class names use kebab case.\r\n- Keyframe names are namespaced by default.\r\n- `animations` replaces `classes`; `classes` remains a compatibility alias.\r\n- `@nexlayerlabs/postcss-keyframe-utils` now processes global timing options and is installed automatically.\r\n- Reduced-motion handling is enabled by default.\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}