category: CSS
Posted on: May 5th 2021, 6:00pm
Last modified: May 5th 2021, 6:00pm
First in html,
<div class="p-10 min-h-screen flex items-center justify-center bg-teal-500">
<!-- custom animation -->
<div class="animate-wiggle">
<div class="w-32 h-32 rounded-lg bg-white"></div>
</div>
</div>Then at tailwind.config.js file,
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
animation: {
bounce: "bounce 0.3s infinite",
wiggle: "wiggle 1s infinite"
},
keyframes: {
wiggle: {
"0%, 100%": {
transform: "scale(1.2) rotate(7deg)"
},
"50%": {
transform: "scale(0.8) rotate(-7deg)"
}
}
}
},
},
variants: {},
plugins: [],
} references:
Recommended
HTML markdown cheatsheetInstall netlify cli globallyCustomizing font family and color in Tailwind.cssGenerate full version of tailwind.config.js fileEnable variant in the config file for Tailwind.cssSetup Tailwind workflowUsing @apply with Complex ClassesCustom animation in Tailwind.cssGradient in TailwindLoop through JSON object