Styled wind: Best of Best worlds
- Vilva Athiban P B
@vilvaathibanpb
![](https://cdn2.iconfinder.com/data/icons/minimalism/512/twitter.png)
About Me
- Work @ Omio
- OSS is
- Creator of styled-wind, hql-tag, etc
- Building query-library, OSSPuppy
- All Social Platforms: Vilva Athiban
![](https://freepngimg.com/thumb/heart/37352-6-3d-red-heart-transparent-background.png)
![](https://i.pinimg.com/originals/ed/34/1f/ed341f450724c35d7bbece6345f2a860.gif)
Lets Begin
Styled Wind 🎤
Tailwind + Styled components = Styled wind
Tailwind - Pros 🤠
- Quick to prototype
- Atomic CSS
Tailwind - Cons 🤦♂
- No official React Native support
- Big bundle size (purgecss can help)
- Readability
- Very hugeeee number of classes
- Extra build tools
Styled Components - Pros 🤠
- Official React Native support
- No CSS pollution
- Composable CSS with React Components
- Component Name is attached with the styles
- No extra build tools
Styled Components - Cons 🤦♂
- Write CSS by yourself
- Difficult to write atomic CSS
![](https://media0.giphy.com/media/26BRFeWzERenC1ugM/source.gif)
What can we do?
Best of both worlds
const StyledContainer = styled.div`
.text-blue-600;
.lg:text-green-600;
.hover:bg-yellow;
.pt-10;
`
Styled Wind 🎉
- Official React Native support
- Tailwind like atomic CSS
- Smaller bundle size
- Composable CSS with React Components
Styled Wind 🎉
- Component Name is attached with the styles
- One step Migration
- With babel-plugin, no additional bundle cost or deps
- No extra build tools
How does it work
![](https://s3.amazonaws.com/media-p.slid.es/uploads/906873/images/7959838/Screenshot_2020-11-21_at_04.13.08.png)
![](https://media1.tenor.com/images/349e0c107499a4c341ad9ea64fec68c4/tenor.gif?itemid=4531449)
Let see some code
![](https://media0.giphy.com/media/A06UFEx8jxEwU/giphy.gif)
Roadmap 🚗
- VSCode extension for autocomplete
- Linter
Give it a 🌟
Contributions (PRs, Feature requests and issues) are welcome
![](https://media1.tenor.com/images/d2373d8843a18af5f97a3d3a2f67a12a/tenor.gif?itemid=13447082)
Thank You
@vilvaathibanpb
![](https://cdn2.iconfinder.com/data/icons/minimalism/512/twitter.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/906873/images/7959749/MGsbLDlQ.jpg)
Styled wind: Best of Best worlds
By Vilva Athiban
Styled wind: Best of Best worlds
- 321