Tailwind CSS and Internal CSS Styling
In this approach, The elements utilize Tailwind CSS classes for styling, and the animations are applied using the defined internal CSS animations. We’ve added two new animations: slide-in-bottom and spin-scale. Each animation is defined using internal CSS. The first element slides in from the bottom with fading opacity, defined by the slideInBottom keyframes animation. The second element combines scaling and spinning effects
Example: The example below shows CSS Animations with Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS and Internal CSS Styling</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
<style>
.slide-in-bottom {
animation: slideInBottom 1s forwards;
}
@keyframes slideInBottom {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.spin-scale {
animation: spinScale 1s ease-in-out infinite alternate;
}
@keyframes spinScale {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(1.2) rotate(360deg);
}
}
</style>
</head>
<body class="bg-gray-100 flex justify-center
items-center h-screen">
<div class="text-center">
<div class="slide-in-bottom bg-blue-500
text-white px-4 py-2 rounded-md
shadow-md mb-4 cursor-pointer
hover:bg-blue-600">
Slide In from Bottom</div>
<div class="spin-scale bg-green-500 text-white
px-4 py-2 rounded-md shadow-md mb-4
cursor-pointer hover:bg-green-600">
Spin and Scale</div>
</div>
</body>
</html>
Output:
How to use CSS Animations with Tailwind CSS ?
Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind’s animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs.
Table of Content
- Tailwind CSS Animation Utility Classes
- CSS Animations with Tailwind CSS and JavaScript
- Tailwind CSS and Internal CSS Styling