Tailwind CSS実践入門 エンジニア選書

工藤智祥(著者)

• 販売会社／発売会社: 技術評論社
• 発売年月日: 2024/01/26
• JAN: 9784297139438

商品レビュー

2024/08/04

前から気になっていたけど、今関わっているプロジェクトでTailwind CSSを使っているので読んでみた。
Tailwind CSSについては全体をとおして満遍なく解説されてあるのはもちろん、なぜユーティリティファーストがいいのかや、どのようなデザインシステムを構築すればいいかということまで書かれてあってとてもよかった。実際に業務で使ってきたからこそ書ける内容なのだと思う。

Tailwind CSSは、最初はインライン指定みたいでちょっと抵抗があったけど、慣れたら全然問題ないよなと思う。むしろ、クラス名考えなくてよくなる分かなり楽。
UIフレームワークとか、全部TailwindCSSで実装するようにしてもらえないかなとすら思う。

Tailwind CSSのクラス調べてみると、けっこう知らないCSSのプロパティがあるのだと気づく。
「font-variant-numeric」とか初めて知った。数字は等幅表示したいということは確かにあるので、覚えておきたい。
後、text-wrapにbalanceという値を指定できるとか。これで、各行を同じ幅になるように改行してもらえるようになるらしい。

前から疑問なのだけど、なんで「justify-content」に対応するクラスは「justify-○○」なのに、「align-content」に対応するクラスは「align-○○」ではなくて「content-○○」なのだろう。「content-○○」だとどっちか分からなくなるのだけど…。

後、チェックボックスにindeterminate(未確定)な状態があるということを初めて知った。あまり使いどころがなさそうな気もするけど、覚えておきたい。

Tailwind CSSとRadix UIを利用した「shadcn/ui」というコンポーネントライブラリがよさそうだと思った。自分の場合、Vue.jsを使うことが多いけど、非公式でVue版も開発されているらしい。Nuxt UIも似たようなところあるけど、ちょっと気になる。

プラグインの作り方については、全く知らなかったので勉強になった。ただ、使わないならそれにこしたことはないのだろうなと思う。

Preflightを無効にすることができるということも初めて知った。これができるなら、確かに別のCSSフレームワーク使っているプロジェクトでも使えそう。覚えておきたい。

後、line-heightによる隙間をハーフレディングというのを初めて知った。最初の行の上側や、最後の行の下側の隙間を無くしたいことがあるようで、どう対応すればいいかということについて書いてあった。直接的にTailwind CSSと関係があるわけではなさそうだったけど、いろいろ工夫してることが伝わってきた。

2024/02/29

技術的に難しい、さほど関係の無い箇所もあったため飛ばしながら読んだが、すごい本だ。
2024/2 時点、おそらくは日本語で Tailwind CSS を網羅した唯一の本。
ただ Tailwind の使い方を説明した本ではなくて、どういう時に Tailwind を使うべきか、どう使うべきか、すべきではないことは何か、非常に丁寧に書かれている。

2024/02/14

セマンティックなCSS設計を含む既存の手法で難しかったこととそれを乗り越えるためのユーティリティファーストという発明いった歴史の話から、ユーティリティクラスで書いて必要に応じてコンポーネント化するという考え方の話、TailwindCSSはカスタマイズも可能なのでなく、カスタマイズを前提としたフレームワークのフレームワークであるという話、さらに既存プロジェクトへの導入についての案内、デザインシステムの構築や運用手法についてのとっかかりとなる解説など、幅広く学べてとても楽しめた。これは単なるコーディングのリファレンス・解説書ではない。実践入門というタイトルに偽りなし。