Hey Everyone ,
In this Blog Post , we will see a better way by which we can style our UI Components. If you develop UI Components , chances that you might be using styled-components or to style them , since it is the de-facto CSS in JavaScript Frameworks which is used now a days.
But Ladies and Gentlemen ,what If I told you that something better than this exists which inherits features from styled-components and TailWind CSS
The Name of that Big Player is styled-wind
With styled-wind, you can make use of Tailwind CSS classnames into your styled-components project,
Now, you might be wondering why migrate to styled-wind when I am okay with styled-components in the first place.
Let me give you few reasons to justify why you should migrate to styled-wind.
1). The Ability to write Responsive Code
Since , styled-wind is a subset of TailWind CSS i.e.
you can make the use of TailWind CSS classnames into your Project , it becomes very easy to make your project responsive.
Since every class in TailWind can be applied for different breakpoints , it becomes very easy to bring responsiveness into your project , and the fact of the matter is you do not have to use those classic Media Queries into your HTML to make your web project responsive. Let styled-wind do all the heavy lifting for you.
2).By Using styled-wind , you do not have to memorize CSS Properties
When using styled-wind , you get away with this headache of recalling those classic CSS properties and then applying them to style your CSS components. Instead , you can just refer Class Names from TailWind CSS and then you are good to go.
If you clearly observe this above Code Snippet Example , you can clearly observe that instead of using any of the classic CSS properties , you can refer the required class name which you want to use from TailWind CSS.
3).Flexibility of using TailWind CSS in styled-components
Now , since styled-wind is the hybrid form of TailWindCSS+styled-components , it becomes a lot easier to integrate TailWind CSS in a styled-components project.
As , we discussed in the first point , you can just refer to the required classname in the TailWind CSS Documentation , and then appropriately use it in your Project.
For Instance , Suppose you want to add vertical padding of 4 rem to an element. Now had you made use of Traditional CSS into your project , you would have to explicitly specify to your CSS file :
padding-top : 4 rem ;
padding-bottom : 4rem ;
but with styled-wind , you get away this mess , you can simply write py-4 and you are done.
I hope , by now you must be fan of TailWind CSS :D
Well , there are other reasons also as to why using styled-wind is more advantageous. But , in my Opinion as a Developer , these two reasons are strong enough to propel you towards using styled-wind.
Now , there is nothing wrong in using styled-components, but the main factor which I found as a limiting factor was that , everytime I want to style a component , I have to refer those traditional CSS properties.
So , that's it for this blog post
You can deep dive into styled-wind by referring to its User Friendly Documentation here :
https://styled-wind.netlify.app/#/
I hope , I was able to provide some value through this Blog
You can connect with me through these following platforms :
Linkedin : https://www.linkedin.com/in/deepansharora27/
Twitter : https://twitter.com/deepansharora27
Top comments (0)