このスクラップを描く経緯

このスクラップを書いてみようと思った一番大きな理由は以下の記事を読んだからです。
https://blog.uhy.ooo/entry/2022-10-01/tailwind/

また、前提として筆者はまだまだ技術的な知見が弱いです。
ちょうど最近Tailwindに対して感じることがちょっと変わってきていた中、上記の記事を読みました。
どのように変化したのかというと、初めて使った時は漠然と便利だと感じていたのですが、最近はstyled-compontsだけでも良いのでは？と感じるようになってきました。
この感じ方の変化を自分なりにも整理してみようと思い、スクラップを書いてみることにしました。

書きたいことがまとまったら記事にしてみます。

（こういうのってつよいエンジニアの方の考えを見るとすごく勉強になった気がしますが、結局は自分の頭で考えてみないと発見できないものもあると思うので書いてみます）

最初に感じたHTML CSSの辛いところ

以前、素のHTMLとCSSを記述する機会がありました。辛いと感じた部分を挙げてみます。

• class名を他と被らないように考えること
• 上記と似ているが、記述したstyleの影響範囲に考慮しながら記述すること
  （すみません、すごく当たり前のことになってしまいました）

Tailwind CSSとの出会い、最初の印象

上記を感じていた中、業務でTailwind CSSに出会いました（フロントエンド開発でReactを利用しているプロジェクト）。
素のHTML, CSSを書いていた際に感じていた辛いところが解消されたので非常に便利だと感じたのを覚えています。

styled-compontsだけで良いと感じたのはなぜだったのか

styled-compontsを利用する場合、以下のようなstyleを当てたコンポーネントを作成して利用することが一般的かと思います。

const StyledBox = styled.div`
  display: flex;
  align-items: center;
`

const StyledBox = styled.div`
  display: flex;
  align-items: center;
`

コンポーネント名を考える必要はあるのですが、影響範囲は記述しているファイル内のみなので、影響範囲について特別意識する必要はないと感じています。
なので、こちらも素のHTML, CSSを書いていた際に感じていた辛いところは解消されていると言って良いと思います。
また、Tailwind CSSを利用した時と比較するとJSXは比較的汚れずに済みます。

おそらく上記の理由で「styled-compontsだけで良いのでは」と感じたのだと整理できました。

Tailwind CSSのメリットは？

スクラップの冒頭でも紹介させていただいた記事の通り、やはり簡単にデザインシステムを導入できる点なのかなという結論に至りました。
ただ、styled-componentsでも実現可能なことですよね（やったことないですが）・・
また、styleを比較的記述量少なく書けることもメリットにはなるのかなと思いました。
あとは使っていないclassを削除してくれることでしょうか。

Tailwind CSSのメリットと言われているもの

よく聞くのが「classの命名を考えなくて良い」というものです。
個人的には、これはstyled-componentsでほとんど解決できているなと感じています。
また、命名を考えずにclassにstyleを記述するということは、jsxが少し汚くなるということだと思いますので、その辺りもデメリットも考慮する必要があるのかなと思いました。