-

Tailwind CSSの同人誌を作った話

技術書典で頒布した同人誌の紹介など

虎の穴ラボ 古賀広隆 (@kght6123)
おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

自己紹介

古賀 広隆(@kght6123)
Twitter/GitHub

とらのあな通販のコスト削減関連の開発に携わっています。2児の父です。

フロントエンド、サーバサイドが主な担当です。

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

あじぇんだ!

  1. なぜ作ろうと思ったか?
  2. どんな人に向けた本か?
  3. オススメのポイントとか
  4. 最後に
  5. 他の同人誌を紹介とか
おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

1. なぜ作ろうと思ったか?

最近、Tailwind CSSをよく使うなぁ

公式サイトも使いやすいけど、まとめた本が欲しい

Tailwind CSSを扱った本がない(当時)

前々から同人誌作りたいとおもっていた

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

2. どんな人に向けた本か?

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

Tailwind CSS について

  • はじめての人(基本的な CSS はわかる)
  • さらに詳しく知りたい人
  • 最新バージョンでできることが知りたい人
  • 公式サイトを読む時間がない人
おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

3. オススメのポイントとか

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

1. 何度も書き直した冒頭(1章)

2. 設定や関数、命令をまとめた(2〜3章)

3. Just-in-Time Mode をまとめた(10章)

4. 最新の v3.0 をまとめ(13章)

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

1. 何度も書き直した冒頭(1章)

  • 何度も公式サイトの解釈を考えて
  • 作り終わった後に、もう一度、再検討して練り直し
  • 新しい章をバージョンアップで追記するごとに、手を加えてます

3番目に時間かけている

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

改めて、冒頭で伝えたかったこと

  • 素の CSS に近い低レベルのユーティリティクラスの集まり
  • ユーティリティを組み合わせて、オリジナルの部品を作れる
  • 設定ファイルの変更によって、ユーティリティに高い柔軟性をもたせられる

また、書き直したい

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

2. 設定や関数、命令をまとめた(2〜3章)

  • よく使いそうな設定や関数、命令をまとめ
  • 標準的な手法は網羅する
  • 他 CSS ライブラリと共存やプロジェクトに合わせた設定ができるように

開発の導入部分で重要なところ!

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

3. Just-in-Time Mode をまとめた(10章)

  • 利点や欠点、注意点をまとめ
  • v2.1 で有効化する方法
  • 任意の値や疑似要素のサポートをまとめ

これからのTailwind CSSで重要なところ!

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

任意の値のサンプルコード

<div class="
w-[762px]
h-[918px]
top-[-325px]
right-[62px]
md:top-[-400px]
md:right-[80px]
">
</div>

横幅、縦幅などに対して、classで任意の値を指定できる

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

5. 最新のv3.0をまとめ(13章)

  • 破壊的な変更点、v2系からの修正方法をまとめ
  • 追加された新規機能をまとめ
  • 任意の値等の改善をまとめ

「#技術書典12」で大きく追記したところ!

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

お気に入りの機能

<div class="
w-40
h-40
shadow-lg
rounded-full
bg-white
shadow-blue-400/75
"></div>

影の色(blue-400)と影の透明度(75%)を指定できる

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

実行結果

背景色の黄色と影の青色が馴染む

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

6. さいごに

念願の技術同人誌が頒布できました。
また、機会があれば作りたいと思っています。

今回、紹介した同人誌はBooth技術書典で頒布中です!

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

商業版について

商業版がインプレスR&D様から技術の泉シリーズとして刊行されました。
製本はカラーです。
ぜひ、購入後にレビューをお願いします🙏

Amazon

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話

虎の穴ラボの薄い本。vol.5

去年の虎の穴ラボブログをまとめて、
技術書典12で頒布しました。
価格は無料です、こちらもよろしければどうぞ。

技術書典

おすすめの技術書 LT会 - vol.3
Tailwind CSSの同人誌を作った話
おすすめの技術書 LT会 - vol.3