Redefining The Way You Style Components Using Styled-Wind
Published: 2020-11-26 12:18:54

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**


![Fasten Your Seatbelts](https://dev-to-uploads.s3.amazonaws.com/i/a8i2ro90nifs6kibr2jq.jpg)

The Name of that Big Player  is **styled-wind**

![styled-wind](https://dev-to-uploads.s3.amazonaws.com/i/p69498z2fwhd79lnkr77.png)

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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r4f5fgduip5rgh578dlt.png)

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