Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
tailwindcss-transitions-plugin
Advanced tools
This is a very simple transitions plugin for Tailwind CSS which will add some utility classes.
npm install tailwindcss-transitions-plugin
or
yarn add tailwindcss-transitions-plugin
Add the following code to your tailwind.config.js
file
plugins: [
require('tailwindcss-transitions-plugin')
]
The plugin will generate a set of classes for you by default. The current classes will have the following format:
Class name: .transition-{value}
CSS Prop: transition-property
Class name: .transition-speed-{value}
CSS Prop: transition-duration
Class name: .transition-origin-{value}
CSS Prop: tranform-origin-{value}
Class name: .transition-timing-function-{value}
CSS Prop: transition-timing-function
In order to override the defaults, set the following properties inside your main tailwind.config.js
object that is being exported. Feel free to completely ovewrride and/or add new values, they will be processed by the plugin.
// Generated Ex: transition-background-color, transition-box-shadow
transitionProperties: ['background-color', 'transform', 'box-shadow'],
// Generated Ex: transition-speed-slow
transitionSpeeds: {
slow: '200ms',
normal: '150ms',
fast: '100ms'
},
// Generated Ex: transition-origin-tl
transitionOrigins: {
t: 'top',
r: 'right',
b: 'bottom',
l: 'left',
tl: 'top left',
tr: 'top right',
bl: 'bottom left',
br: 'bottom right'
},
// Generated ex: transition-function-cubic
transitionTimingFunctions: {
cubic: 'cubic-bezier(0.4, 0, 0.2, 1)'
},
Now apply to the element you're animating.
<button class="transition-background-color transition-speed-slow transition-function-cubic">Has Transitions</button>
That's it :)
PRs welcome
FAQs
TailwindCSS plugin that adds transition classes
We found that tailwindcss-transitions-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.