tailwind css は賛成派と反対派が大きく分かれるらしいツールのようです
私の場合は 以前は良さそうと思ってたのですが 最近では反対派よりです

基本的な方針は良いはず

よくある CSS の使い方では HTML の要素にその要素が何かを表すようなクラス名をつけます
title とか username とか article-header などです
CSS 側ではそれらのクラスに対してスタイルを設定します
これだと 名前をつけるほどもない レイアウト調整のためだけの div などにつけるクラス名に困るんですよね

そういうところって適用したいスタイルはよく使うものが 1 つ 2 つくらいなことが多いですし 無理やりクラス名をつけてもわかりづらくなったり あとあと扱いづらくなったりします
なので

.mt10 {
	margin-top: 10px;
}
.flex {
	display: flex;
}
.align-right {
	text-align: right;
}

のように 適用したいスタイルごとに クラス名を作ってそのクラス名を HTML に設定するような使い方をしていました

tailwind css ではこの考え方で CSS の指定ひとつひとつに対応するクラス名が用意されています
ただ tailwind css の場合はよく使いそうな一部ではなく 全部のスタイルをクラス名だけで適用できるようにして CSS ファイルを使わないような方針です
（使い方次第なので別にそうしなくてもいいのだけど）

自分でも似たようなことをやっていて 毎回似たようなスタイル定義を CSS に書いてたので それを最初から提供してくれる tailwind css は良さそうと思っていました
しかし 2 つ 3 つくらいのスタイルなら問題なかったのですが 全部をクラス名でやろうとすると問題も出てきます

HTML が見にくい

ちょっとしたレイアウト調整以外のところになると 1 つの HTML 要素に適用したいスタイルは 10 を超えることもよくあります
HTML で 1 つのタグの class 属性に 10 以上もクラス名を書くとそれだけで HTML がごちゃごちゃしてきて見づらくなります

Playground の例を見ても これがわかりやすいとは思えません
これなら div が何を表しているかをクラス名で書いて それぞれのスタイルを CSS ファイルで書いたほうが何倍も見やすいと思います

変更したいところがあったら そこのクラス名を CSS ファイルから探す手間はあると思いますが devtools を使えばあまり困ることもありません
HTML 側にクラス名と仮のスタイルだけ書いておいて あとは devtools 上で CSS を調整します
Element タブの左側に HTML ツリーがあって 右側に選択中の要素に適用済みスタイルが表示されるので ファイルが離れていることによる問題はあまりないです
むしろ 全部のスタイルをクラス名で管理することになると devtools との相性が悪くなります

style 属性との差

クラスを使って 1 つ 1 つのスタイルを HTML のタグに対して直接書くのなら style をタグを使えば良いと思います
直接 style 属性を書くのは書きづらさもありますが 最近の DOM 管理をしてくれるライブラリなら css-in-js 対応も多く style={} のところにオブジェクトを指定すれば適用してくれます

lit-html だとこういう感じです

html`
	<p style=${styleMap({ color: "red" })}>text</p>
`

これも長くなって HTML 構造が見やすいとは言えませんが 指定するものが多くなってくるとクラスに書いたとしてもどっちもどっちです
それなら普段使いの CSS の知識で済んで覚え直す必要もない style で良いと思います

tailwind css では 自由に指定できる数値系入力 (margin サイズなど) はある程度よく使うものに絞り込まれていて 迷うことがなく統一性ができるメリットがあると聞いたことがあります
ですが それは JavaScript を使う方法でも事前に変数に保持していおいて基本はそれを使うようにすれば良いです

const px10 = "10px"
const px20 = "20px"

html`
	<p style=${styleMap({ marginTop: px10 })}>text</p>
`

例外的に事前に用意されてない値を使う必要が出たときには 直接数値を入れれば済みますし対応しやすいです

また box-shadow のように 設定が複雑になるものを短く書ける点でも 事前に変数に入れておけば同じく短く書けます

テーマ

tailwind css の方法では 一応クラスを通してるのでテーマ切り替えがしたいときに HTML 要素には手を加えずに対応可能です
それに対して JavaScript の方法ではスタイルが直接設定されているので 変更するには style 属性を更新しないといけません
全体の HTML の属性を確認して更新 (全コンポーネントの再レンダリング) する必要があります

しかし tailwind css のようなクラス指定では CSS のスタイルがどうなるかを明確に指定しています
display を flex にするとか 折返しはしないとか 中央揃えするとかです
これらはテーマによって変わることはないと思いますし middle のような曖昧性のある部分の具体値を変えるくらいでしょうか

他に実際のスタイルが変わるメリットというと レスポンシブ対応はありそうです
「@media」 をつかって スクリーンサイズによって完全にスタイルを置き換えるタイプのレスポンシブデザインにしたい場合は向いてそうです
直接 style 属性で指定してしまうと resize イベントのたびに再レンダリングになりますから

ただ 私の場合は レスポンシブ対応しても ボックスの最大最小幅の設定や flexbox の折返し許可程度で 大きく見た目が変わるようなことはしないです
「@media」 を使うことなんてほぼないです
なので このあたりのメリットは使うだけの理由にはなりませんでした

クラス名を覚える必要あり

tailwind css では CSS のスタイルがクラス名に対応しているので tailwind css のクラス名を覚える必要があります
CSS 標準ですら あまり使わないものを含めるとすべてを覚えて使いこなすのは難しいだけの量があるのに それを 1 ライブラリ用の別名で覚え直すとかコストが高すぎです
さらにメジャーアップデートでは クラス名の変更もあったはずです

これが気軽に使い始めようと思えない部分のひとつです
上で書いた style 属性を使う方法に比べると 長さは少し短く書ける程度です
それだけのために 全部を覚え直すだけの価値があるのでしょうか

個人で使うなら自分が覚えればいいだけですが チームで作るようなときは賛成が得られづらいと思います
React+JSX くらいにスタンダードに近いポジションを獲得して すぐには廃れないと思われるくらいになってるなら 多少のコストはあっても覚える価値があるかもしれませんが 現時点ではコストのほうが高く感じます

コンポーネント前提

ul 内の li など 繰り返し同じ HTML 構造が表れるところでは そのすべてに同じスタイルを当てる必要があります
これまでの CSS なら list-item のようなクラス名を指定しておき CSS の方で詳細にスタイルを書きました
これだと変更したいときには CSS の方を変更するだけ済みます
それで全部の li が更新されます

それが tailwind css のやり方だと すべての li で同じクラスの変更が必要になります

同じものを何度も使う箇所をコンポーネント化していれば 1 箇所で済むのですが そうなってるとは限らないのですよね
JavaScript ツールなしで 静的な HTML だけ使って画面のイメージを作るようなときには コピペして同じものが並んでいたりします
コンポーネント化できていないところでは デメリットが目立ちます

ビルドツールの使用が前提

tailwind css では 基本的にはビルドツールが必要になります
使わずに CDN から CSS ファイルをロードするだけでも可能にはなっているのですが 全部のスタイルに対応するクラスのスタイルを定義しているのでデータ量がすごく大きくなります
圧縮なしだと 2, 3MB ほどです

ビルドツールを使うのであれば post-css を使って使用されている (正規表現にマッチしてる) クラス名のみ残して それ以外を除外することでサイズを減らしています
なので 基本的にはビルドツールを使うことが前提になっています

ある程度大きなものを作るならともかく ちょっとしたものを作るときにわざわざビルドツールを導入したくないです
かと言って CDN を使うと 2, 3 KB 程度の HTML のページに対してちょっとスタイル調整するために 数 MB という大きすぎるものになってしまいます
それなら tailwind css なしで 自分でスタイル書くので良いかなという気持ちになります

機会があれば

使うのであれば すでに post-css を使うのが前提になっている環境で これまでどおりの CSS と組み合わせてでしょうか
全部を クラス名にせず title とか preview-area とか名前をつけれるようなところは 名前をつけて CSS ファイルでスタイル定義して その他の名前をつけるほどじゃない要素にちょっとスタイル当てるというところで使うという感じです

あとは 関連ライブラリの充実度ですね
React だって 類似ツールが色々あるのにこれを選ぶ理由って 主に関連ライブラリだと思ってます
外部ライブラリを一切使わないなら lit-html/lit-element で十分なのですが 他ライブラリとの組み合わせにはあまり強くないので React にすることがそれなりにあります

tailwind css 関連だと 最近では headless ui という tailwind css 用の ui ライブラリが出たようです
フォームパーツなどのコンポーネントだけど スタイルは tailwind css で当てるという風になっています
こういう関連ライブラリが充実してきて使いたいのが出てきたら考えるかもというところです