Tailwindcssを使って CSSを恐れず書こう @rhistoba

About 私 鳥羽 隼司(@rhistoba) belongs 株式会社リゾーム 普段使う技術: Ruby on Rails 好きな技術: Vue.js　　　Tailwindcss ゲーム好き、最近やりたいゲームが多すぎる 2

CSSの困難 Web開発では欠かすことのできないCSSだが、困難が付き物 ● 名前衝突しないようにするのが辛い ● 値指定の難しさ ● CSSフレームワーク難しい 3

名前衝突しないようするのが辛い ここは変えたくない ここを変えたい .btn-custom { ... } /* もしくは */ article .btn { ... } 既存のクラスと名前衝突しないように、 気をつけて名前空間を作るのが辛い 4

値指定の難しさ A A ちょうどいいグレーとはどれか？ 文字の大きさは何が適切？ 文字サイズに規則性はあるか？ .title-sub { font-size: ?; /* 12ptの見出しと24ptの見出しがあるなら？ */ color: ?; /* ちょうどいいグレーにしたかったら？ */ } 5

CSSフレームワーク難しい .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } Bootstrapの.btn 6

CSSを恐れずに書くには Tailwindcssを使おう - https://tailwindcss.com ● Utility FirstなローレベルのCSSフレームワーク ● .btnや.cardのようなコンポーネントクラスは存在しない ● あるのは.font-boldや.float-rightといった役割のはっきりしたユーティリ ティークラスのみ 7

Tailwindcssのクラスの例 8 .bg-gray-500 { background-color: #a0aec0; } .text-base { font-size: 1rem; } .text-right { text-align: right; } .border { border-width: 1px; } .rounded { border-radius: .25rem; }

Tailwindcssで書くとこうなる 9 Button Button Bootstrap Tailwindcss

カスタムしてみる 10 Button .btn-custom { font-size: 1.5rem; font-weight: 100; border-radius: 0; } Button Bootstrap Tailwindcss

スタイルの使い回し方 ● コンポーネントクラスを定義する ○ TailwindcssのクラスがCSS定義に使える ● React、Vue.jsなどはコンポーネントとして分離すればよい 11 .btn-custom { @apply text-2xl font-hairline rounded-none; } {{text}}

Tailwindcssの特徴 Positive ● HTMLを編集するだけでスタイルが変更できるようになった → CSSを書かなくていいので名前衝突・意図しない箇所の変更がない ● 色、文字や余白の大きさなどを用意されたクラスから決められる → 自分で具体的な値を決めなくてよい ● HTMLのクラス群だけで具体的な見た目が把握できる → HTMLを見るだけでスタイルが明確的 12

Tailwindcssの特徴 Negative ● 基本的にユーティリティークラスを並べて見た目を構成する → コンポーネントクラスが無いので自力で見た目を整える必要がある → 素のCSSの知識が必要 → 他のCSSフレームワークに比べて学習コストが大きい ● Bootstrapとか使う方が楽じゃね？ 13

Tailwindcssと他のCSSフレームワークを使う Tailwindcssにコンポーネントクラスが無いなら、 他のCSSフレームワークのを使えばよい 14 module.exports = { important: true, // important! を追加 prefix: 'tw-', // クラスのプレフィクス tw-を追加 } Button 名前衝突の回避と優先順位の設定を tailwind.config.jsに追加 他CSSフレームワークのクラスを使いながら Tailwindcssのクラスが使える

まとめ 以上、CSSの救世主となるTailwindcssの紹介でした。 ● CSSの管理がぐっと楽になる ● HTMLを書くだけで見た目が変えられる ● 他のCSSフレームワークと一緒に使える 15

16