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.
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.
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.
A technology-education specialist and software developer with extensive experience leading both teams and projects and over a decade of teaching students and training staff.
You cans till use classes when using styled components.
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)
A technology-education specialist and software developer with extensive experience leading both teams and projects and over a decade of teaching students and training staff.
Exactly my opinion as well. Instead of writing
display: flex
in every styled component, why not write the Tailwind classflex
and use plain css classes?! Utility css classes are amazing.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.
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.
Tailwind and styled component have the same issues, as any other solution. With Tailwind the same developer that repeat
display:flex
everywhere will repeat theflex
class everywhere.You cans till use classes when using styled components.
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)
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.