DEV Community

Discussion on: Styled Components

Collapse
 
victorocna profile image
Victor Ocnarescu

Exactly my opinion as well. Instead of writing display: flex in every styled component, why not write the Tailwind class flex and use plain css classes?! Utility css classes are amazing.

Collapse
 
kayis profile image
K

Tailwind is just styled components implemented with CSS classes instead of JS.

Back in the day we didn't have Tailwind and emulated that behavior with JS, now I'd say this workaround isn't needed anymore.

Thread Thread
 
victorocna profile image
Victor Ocnarescu

I'm not sure I understand. I wanted to point out the power of CSS classes that do one thing and only one thing. For instance, the text-center class that aligns your text to the center.

It's so powerful because you don't need anything else, no JS, no styled components, just boring CSS. Bonus: almost anyone that reads that class will assume that it just aligns the text to the center.

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

Tailwind and styled component have the same issues, as any other solution. With Tailwind the same developer that repeat display:flex everywhere will repeat the flex class everywhere.

Collapse
 
david_rajcher profile image
David Rajcher
  1. You cans till use classes when using styled components.

  2. You can create more layers of abstraction. For example create a FlexBox styled component which is a div that comes built in with flex. It can also receive props that will tell it how to align and justify (for example).

Then, when creating a new div you can actually create it from styled(FlexBox)

Collapse
 
david_rajcher profile image
David Rajcher

Also, creating consistence design you can have a Text component that receives a boolean prop named "center".

So if you see you know it is aligned to the center.