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

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

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

2e8382c47f4f148ecdbc3b2fbd528228?s=128

rhistoba

November 30, 2019
Tweet

Transcript

  1. 2.

    About 私 鳥羽 隼司(@rhistoba) belongs 株式会社リゾーム 普段使う技術: Ruby on Rails

    好きな技術: Vue.js   Tailwindcss ゲーム好き、最近やりたいゲームが多すぎる 2
  2. 4.

    名前衝突しないようするのが辛い <button class=”btn”> ここは変えたくない </button> <article> <button class=”btn”> ここを変えたい </button>

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

    値指定の難しさ A A ちょうどいいグレーとはどれか? 文字の大きさは何が適切? 文字サイズに規則性はあるか? .title-sub { font-size: ?;

    /* 12ptの見出しと24ptの見出しがあるなら? */ color: ?; /* ちょうどいいグレーにしたかったら? */ } 5
  4. 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
  5. 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; }
  6. 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
  7. 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
  8. 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のクラスが使える
  9. 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>