Is TailwindCSS worth it?

<div class="w-1/3 mx-auto my-2 shadow-sm rounded-lg">
<div class="bg-gray-100 text-gray-600 px-3 py-2 text-lg font-semibold rounded-t-lg">Header</div>
<div class="bg-white text-gray-600 p-3 rounded-b-lg">
This is a card example in Tailwind CSS.
</div>
</div>
<div style="width: 33.33%; margin: 1rem auto; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border-radius: 7.5px;">
<div style="background-color: #f4f5f7; color: #4b5563; padding: .6rem .75rem; font-weight: 520; font-size: 1.1rem; border-top-left-radius: 7.5px; border-top-right-radius: 7.5px;">Header</div>
<div style="background-color: white; color: #4b5563; padding: .75rem; border-bottom-left-radius: 7.5px; border-bottom-right-radius: 7.5px;">This is a card example in inline CSS.</div>
</div>
.card {
@apply "mx-auto my-2 shadow-sm rounded-lg";
}
.card-header {
@apply "bg-gray-100 text-gray-600 px-3 py-2 text-lg font-semibold rounded-t-lg";
}
.card-body {
@apply "bg-white text-gray-600 p-3 rounded-b-lg";
}
<div class="w-1/3 card">
<div class="card-header">Header</div>
<div class="card-body">
This is a card example in Tailwind CSS.
</div>
</div>
Please keep any comments relevant to the experience of new developers who may be struggling to understand the immediate benefit or technical debt associated with this framework. Overall any discussion should be constructive and offer insights to help inform others in the community.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store