Can you sell me Tailwindcss over Styled Components?

I'm seeing a lot of Tailwindcss recently and I'm a bit concerned to understand what's future of that.

Is it only made for people who never used css before?
Is it going to replace styled-components in the future?

I find it hard personally to debug code with tailwindcss

// Styled Components
<S.Box>
  <S.Title>Title name</S.Title>
  <S.Img src='./image.jpg' />
</S.Box>

vs

// Tailwindcss
<div className='block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline'>
  <h1 className='text-4xl font-bold text-center text-blue-500'>Title name</h1>
  <img src='./image.jpg' className='block h-8 w-8 rounded-full border-2 border-gray-600 focus:border-yellow-600'
</div>

Comments

[yellow1912]

I'm not going to convince you, that is useless. You have your own opinion I won't be able to change it. That said, we build web builder platform and we want to standardize the code and the overall look across the elements. Our clients do not have need for super customized, bespoke websites. Using tailwind allows us to do that quick. Another advantage is parsing the html, importing and exporting from html to style object becomes super simple as well. This is not true for the pro coders of course, but for average users the use of tailwind and purgecss do produce overall smaller file size without breaking things. So that's our use case and we are happy with that.

Edit: I should add that I agree with you completely regarding debugging. I even raised a ticket on making tailwind easier for dev testing and their response was that it's their job to do the testing already, there is no need to test on our end anymore. I was like ... Seriously dude?

[diamondback15]

Yes, I see your point. You just have to push technologies sometimes and you have to convince other dev into an organization. Thanks for your comment :)

[Andrew Stuntz]

Is it only made for people who never used css before?

Definitely not!

Is it going to replace styled-components in the future?

I hope so. In your example, where are your styles? S.Box? What is that? What happens if you need to change that here, or in a different component.

Also, you can use tailwind in your css using the provided @apply directive and build out classes much as you'd like.

There is a lot more flexibility with individual components when using Tailwind.

Rather than applying CSS with a selector, then overriding it with a more specific selector to change it to work slightly differently when you need to "reuse" your component, you know exactly what the component should look like when it's rendered out, just by looking at the classes.

Also your example assumes you're using JSX which is definitely not always the case.