はじめに

このブログのCSSフレームワークをBulmaからTailwind CSSに変更しました。

いろんなところでTailwind CSSという言葉を見かけていたのがきっかけに興味を持ち、勉強がてら変更しようと思い立って変更しました。
いわゆるCSSフレームワークとは違い、.buttonのようなコンポーネントは用意されていません。borderやfont-boldのようなユーティリティなクラスが用意されています。
CSSのエイリアスとしてクラスが用意されている、BootstrapやBulmaよりも低レイヤーなフレームワークというイメージです。
そのため、いわゆるフレームワークよりはCSS自体の知識が求められます。

使ってみた感想

低レイヤーなフレームワークなので、Bulmaよりも柔軟にコンポーネントを変更できるのが良いです。
Bulmaだと、ボタンコンポーネントをイジりたいとなるとBulmaのCSSから上書きする形で自前のCSSを適応することになります。
Tailwind CSSであれば、イチからつくるので最初の作り始めるコストはありますが、変更に強いコンポーネントにできます。

tailwindcss-typography

MarkdownからレンダリングされるHTMLに対するスタイル適応はtailwindcss-typographyを使いました。
が、これがイマイチでところどころ納得いかないUIでした。なので、細々とした変更を加えています。
変更せずともいい感じでスタイルがあたってほしいです。

Prism.jsと相性が悪い

tailwindcss-typographyはPrism.jsと相性が悪いです。
気に入らない部分はtailwind.config.jsで設定していくのですが、シンタックスハイライト部分（codeタグ）のスタイルはPrism.jsが上書きしてしまいます。
Prism.jsのスタイルを上書きするために直接CSSを書いています。

学習コスト

Tailwindに変更するPRのスタートが1月で、完了したのが3月。Tailwindの学習もこのタイミングからスタートしたので学習コストは2ヶ月ほどでした。
そこまでコストは高くないのかなあという印象です。