Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

2e8382c47f4f148ecdbc3b2fbd528228?s=47 rhistoba
November 30, 2019
360

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

2e8382c47f4f148ecdbc3b2fbd528228?s=128

rhistoba

November 30, 2019
Tweet

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>