DEV Community

loading...

Redefining The Way You Style Components Using Styled-Wind

deepansharora27 profile image Deepanshu Arora Updated on ・3 min read

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

The Name of that Big Player is styled-wind

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.

Alt Text

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

Discussion

pic
Editor guide