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 🌟

https://styled-wind.netlify.app/

Contributions (PRs, Feature requests and issues) are welcome

Thank You

@vilvaathibanpb

Made with Slides.com