DEV Community

Cover image for Animating with TailwindCSS

Animating with TailwindCSS

Gonçalo Alves on July 28, 2024

When it comes to enhancing user experience in web applications, animations play a pivotal role. TailwindCSS simplifies the process of adding animat...
Collapse
 
coolerhansen profile image
CoolerHansen

Image description

Collapse
 
medardm profile image
Medard Mandane • Edited

Tailwind can make development faster, at least you don't have to switch from markup file to CSS, then thinking about what you'll name a certain class that you will reference in the css file. Or in case of other tools like bootstrap, it's easier to create customized components or what.

If the problem is the markup will be cluttered you can always create a separate file per components that contains the CSS, use styled components or what, there's a lot of ways. Another good thing about tailwind is it cancels out the default styling of browsers, you can achieve great consistency when it comes to styling

Collapse
 
shishantbiswas profile image
Shishant Biswas

True, but the primitives style on them are great start and picking color on the fly as well, I using tailwind for most of the styling and inline style for dynamic stuff based on some state

Collapse
 
iamgoncaloalves profile image
Gonçalo Alves

Somewhat true but I find it much easier to understand and even to learn CSS.

Collapse
 
coolerhansen profile image
CoolerHansen

While that's great, that's not its purpose. In fact, there's absolutely no other valid argument for Tailwinds.

Thread Thread
 
iamgoncaloalves profile image
Gonçalo Alves

I think developer experience is a great argument for it.

As usual, in tech, what matters is if the app works as required. The tech stack is up to the devs.

Collapse
 
arjunbroepic profile image
Arjun S

You think that way cuz you haven't used tailwind on a project properly yet. It's game changing, especially combining it with a component/partial based framework or rendering engine.

Collapse
 
martinbaun profile image
Martin Baun

Just what I needed right now. Tailwind’s first-party animation utilities are lacking, and I wasn’t 100% happy with the existing animate.css plugins Thank you for putting this together :)

Collapse
 
iamgoncaloalves profile image
Gonçalo Alves

You are welcome. Really glad you liked it.

Thanks for the awesome feedback!

Collapse
 
jayantbh profile image
Jayant Bhawal

I would love a small section on why someone might prefer using this approach, over just defining a class in CSS. Might be a good idea for others who might feel this is basically writing CSS the long way. :)

Collapse
 
iamgoncaloalves profile image
Gonçalo Alves

Thanks for the awesome feedback!

I will definitely write an article about that.

Collapse
 
shishantbiswas profile image
Shishant Biswas

Is tailwind capable of scroll based animation with or without plugin, I'm making a basic navbar like it disappears at top of the screen and show up on scroll I don't like using framer-motion it's overkill for what I want

Collapse
 
iamgoncaloalves profile image
Gonçalo Alves

Sorry for the delay in the answer.

The answer is yes. I dont know any plugin but I bet there are a couple.

Without plugin you need to create a custom hook to determine if the navbar is visible in the view port of not and apply some tailwind classes like:

transition-opacity
ease-in
duration-700
${isVisible ? "opacity-100" : "opacity-0"}

You can check out this article for more information: medium.com/@jacobvejlinjensen/how-...

Collapse
 
mawalou14 profile image
Mouhamadou Awalou

Great post thanks, actually I'm used to the basic annimation proposed by tailwind, the annimate plugin seems to give more controll over the annimation.

Collapse
 
iamgoncaloalves profile image
Gonçalo Alves

Thanks!

Collapse
 
whattheportal profile image
WTP | WhatThePortal.com

Tailwind is the only way to style components - prove us wrong.

Collapse
 
danny69 profile image
Danny

thanks

Collapse
 
iamgoncaloalves profile image
Gonçalo Alves

You are welcome!