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

Transcript

1. Tailwindcssを使って CSSを恐れず書こう @rhistoba
2. About 私 鳥羽 隼司(@rhistoba) belongs 株式会社リゾーム 普段使う技術: Ruby on Rails 好きな技術: Vue.js　　　Tailwindcss ゲーム好き、最近やりたいゲームが多すぎる 2
3. CSSの困難 Web開発では欠かすことのできないCSSだが、困難が付き物 • 名前衝突しないようにするのが辛い • 値指定の難しさ • CSSフレームワーク難しい 3
4. 名前衝突しないようするのが辛い <button class=”btn”> ここは変えたくない </button> <article> <button class=”btn”> ここを変えたい </button> </article> .btn-custom { ... } /* もしくは */ article .btn { ... } 既存のクラスと名前衝突しないように、 気をつけて名前空間を作るのが辛い 4
5. 値指定の難しさ A A ちょうどいいグレーとはどれか？ 文字の大きさは何が適切？ 文字サイズに規則性はあるか？ .title-sub { font-size: ?; /* 12ptの見出しと24ptの見出しがあるなら？ */ color: ?; /* ちょうどいいグレーにしたかったら？ */ } 5
6. 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
7. CSSを恐れずに書くには Tailwindcssを使おう - https://tailwindcss.com • Utility FirstなローレベルのCSSフレームワーク • .btnや.cardのようなコンポーネントクラスは存在しない • あるのは.font-boldや.float-rightといった役割のはっきりしたユーティリ ティークラスのみ 7
8. 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; }
9. Tailwindcssで書くとこうなる 9 <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded select-none"> Button </button> <button class="btn btn-primary"> Button </button> Bootstrap Tailwindcss
10. カスタムしてみる 10 <button class="btn btn-primary btn-custom"> Button </button> .btn-custom { font-size: 1.5rem; font-weight: 100; border-radius: 0; } <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 select-none font-hairline text-2xl rounded-none">Button </button> Bootstrap Tailwindcss
11. スタイルの使い回し方 • コンポーネントクラスを定義する ◦ TailwindcssのクラスがCSS定義に使える • React、Vue.jsなどはコンポーネントとして分離すればよい 11 .btn-custom { @apply text-2xl font-hairline rounded-none; } <template> <button class="bg-blue-500 ...">{{text}}</button> </template>
12. Tailwindcssの特徴 Positive • HTMLを編集するだけでスタイルが変更できるようになった → CSSを書かなくていいので名前衝突・意図しない箇所の変更がない • 色、文字や余白の大きさなどを用意されたクラスから決められる → 自分で具体的な値を決めなくてよい • HTMLのクラス群だけで具体的な見た目が把握できる → HTMLを見るだけでスタイルが明確的 12
13. Tailwindcssの特徴 Negative • 基本的にユーティリティークラスを並べて見た目を構成する → コンポーネントクラスが無いので自力で見た目を整える必要がある → 素のCSSの知識が必要 → 他のCSSフレームワークに比べて学習コストが大きい • Bootstrapとか使う方が楽じゃね？ 13
14. Tailwindcssと他のCSSフレームワークを使う Tailwindcssにコンポーネントクラスが無いなら、 他のCSSフレームワークのを使えばよい 14 module.exports = { important: true, // important! を追加 prefix: 'tw-', // クラスのプレフィクス tw-を追加 } <button class="btn btn-primary tw-text-2xl tw-font-hairline tw-rounded-none">Button</button> 名前衝突の回避と優先順位の設定を tailwind.config.jsに追加 他CSSフレームワークのクラスを使いながら Tailwindcssのクラスが使える
15. まとめ 以上、CSSの救世主となるTailwindcssの紹介でした。 • CSSの管理がぐっと楽になる • HTMLを書くだけで見た目が変えられる • 他のCSSフレームワークと一緒に使える 15
16. 16 <div class="font-serif bg-teal-200 h-screen flex justify-center items-center"> <span class="text-6xl text-teal-800 font-thin tracking-widest"> Tailwindcssはいいぞ </span> </div>