Thank you for the article Ryan. I still can't understand tailwind approach that looks very similar to me with writing styles inline. So there are no difference between writing for example div class="overflow-hidden" and style="overflow:hidden".
Thank you. This is totally understandable that it looks similar to inline styling on occasion. I prefer the Tailwind approach using "micro CSS classes" opposed to inline styling. It shines when you have more properties you're applying especially on more than one page. If we wanted to apply a background, rounded corners, font-size, etc. it would be more likeclass="bg-indigo-300 rounded text-sm" (etc.).
Since these are classes and not inline, if we ever needed to update what font was used, anything using the Utility class would be styled the same. Tailwind's theme docs for a little more on this.
I would say the main benefit of tailwind is that it provides you with a consistent design system which scales well. you don't need to think about what is degree of green I need to use as background and what is degree of green I need to use as the text color. simply use the pre-defined class like text-green-100 or text-green-500 without thinking about the hex color. It also works the same way for scaling the font size, without thinking about what specific font size used for heading or paragraph. Simply try text-lg, text-base to see how it fits your design.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thank you for the article Ryan. I still can't understand tailwind approach that looks very similar to me with writing styles inline. So there are no difference between writing for example div class="overflow-hidden" and style="overflow:hidden".
Thank you. This is totally understandable that it looks similar to inline styling on occasion. I prefer the Tailwind approach using "micro CSS classes" opposed to inline styling. It shines when you have more properties you're applying especially on more than one page. If we wanted to apply a background, rounded corners, font-size, etc. it would be more like
class="bg-indigo-300 rounded text-sm"(etc.).Since these are classes and not inline, if we ever needed to update what font was used, anything using the Utility class would be styled the same. Tailwind's theme docs for a little more on this.
I would say the main benefit of tailwind is that it provides you with a consistent design system which scales well. you don't need to think about what is degree of green I need to use as background and what is degree of green I need to use as the text color. simply use the pre-defined class like text-green-100 or text-green-500 without thinking about the hex color. It also works the same way for scaling the font size, without thinking about what specific font size used for heading or paragraph. Simply try text-lg, text-base to see how it fits your design.