Styled wind: Best of Best worlds
- Vilva Athiban P B
@vilvaathibanpb
About Me
- Work @ Omio
- OSS is
- Creator of styled-wind, hql-tag, etc
- Building query-library, OSSPuppy
- All Social Platforms: Vilva Athiban
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
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
Let see some code
Roadmap 🚗
- VSCode extension for autocomplete
- Linter
Give it a 🌟
Contributions (PRs, Feature requests and issues) are welcome
Thank You
@vilvaathibanpb
Styled wind: Best of Best worlds
By Vilva Athiban
