Tailwind css didn't make sense to me at all until I read an article which explained things. It's a 'utility css' framework. Very roughly: it allows you to set css attributes directly on an html element in the html itself, without the 'indirection' of a separate css file with a css class which has that same attribute. Basically: pt-4 -> padding-top: 4px"
This makes sense in projects where you already have this css class indirection or abstraction at a higher level, for example React and Vue components. Then your 'UserCard' component itself is already the abstraction that normally a css class .usercard provides. It is convenient to add the tailwind css utility classes to your component's html markup as were it css properties. Yyou don't have to keep a separate css class and/or mess with css priority rules, inheritance, etc. as React/Vue isolate css.
If you want to reuse the UserCard or create a variation, you just import/extend it in React or you make the component flexible.
If you 'only' have plain html and css, without a macro system you can't do that (imagine copy/pasting a huge style="" attribute if you need another UserCard div in your html). Unless you group the css attributes under a css class and re-use the same css class.