A utility-first CSS framework

tailwindcss

CW

Web Developer

Design, F2E, Backend, DevOps

 

Former Drupal UGTW leader

黒ネコ最高

🐦 @amourow

Chris Wu

CW

Web Developer

Design, F2E, Backend, DevOps

 

Former Drupal UGTW leader

黒ネコ最高

🐦 @amourow

Chris Wu

CW

あなたの職種を教えでください

CW

あなたの職種を教えでください

学際的5年制博士課程

沖縄科学技術大学院大学

Okinawa Institute of Science and Technology Graduate University

Cross-Disciplinary Approach to Research and Education

CW

About

tailwindcss

CW

tailwind について

CW

Functional & Utility CSS Framework

CW

功能性CSSフレームワーク

CW

Tachyons

4.12.0

Basscss

8.0.2

Bootstrap

8.0.2

CW

Bootstrap

.mx, .my, .pt, .pr
.col-6, .col-md-4
.d-flex, .flex-column, 
.justify-content-md-center

Tachyons

4.12.0

Basscss

8.0.2

Adam

Wathan

CW

tailwindcss 作者

Course

Podcast
Refactoring UI

CW

https://adamwathan.me/

A utility-first CSS framework

CW

tailwindcss

Bootstrap 4

A utility-first CSS framework

CW

Bootstrap 4

tailwindcss

tailwindcss

CW

Bootstrap 4

Utility-First

UI Component + Utility

 ✔︎ Easy

 ✔︎ Difficult 

Type

Customization

Difficulty

File size

Target user

High

 Easy - High 

Large (144.6-1996kb)

Small (22.7-187kb)

Experienced F2E

Jr. F2E / Backend

Showcases

CW

実際のケース 

Showcases

CW

Showcases

CW

Showcases

CW

Showcases

CW

More Showcases

CW

その他のケース

https://builtwithtailwind.com/

Why tailwindcss

CW

どうして tailwindcss

BEM

CW

Block、Element、Modifierの略語です 

.block__element--modifier

BEM + BS Utilities

CW

BEMとBootstrapのユーディリディ

<div class="
     block__element--modifier 
     col-6 col-md-3 col-lg-4
     ">
  ...
</div>

COVID-19 Projects

CW

BEM + BS Utilities

CW

<div class="cocr__card col-xs-12 col-sm-6 col-lg-4">      
  <div class="cocr__card__img-wrapper">
    <a href="...">
      <img class="cocr__card__img img-responsive img-fluid" src="..." />
    </a>
    <span class="cocr__card__project-tag cocr__card__project-tag--research">
      Research &amp; Engineering
    </span>
  </div>    
  <div class="cocr__card__content-wrapper col-xs-12">
    <div class="cocr__card__content__title">
      <h2 class="h3">
        <a href="...">
          Involvement with the COVID-19 Disease Map project
        </a>
      </h2>
    </div>
    <div class="cocr__card__content__description">
        The COVID-19 Disease Map project is an international...
    </div>
  </div>
</div>

tailwindcss

CW

<div class="w-full sm:w-1/2 md:w-1/3">
  <div class="relative">
    <a href="...">
      <img src="...">
    </a>
    <span class="text-sm bg-red-800 text-white px-2 py-1 absolute bottom-0 mb-3">
      Research &amp; Engineering
    </span>
  </div>
  <div class="w-full text-white p-4">
    <div>
      <h2 class="text-2xl font-bold">
        <a href="...">
          Involvement with the COVID-19 Disease Map project
        </a>
      </h2>
    </div>
    <div class="text-gray-500 text-sm pt-3">
      The COVID-19 Disease Map project is an international...
    </div>
  </div>
</div>

Tailwind

CW

BEM+BS

Less refactoring

More refactoring in HTML & CSS

More inline classes

Less classes, cleaner HTML

No native component

BS Component

More power for enduser

More consistent style

－

✔︎

✖︎

✔︎

－

－

✔︎

✖︎

✔︎

－

✔︎

What is your preference?

好みは何ですか？

Resources

CW

tailwindcss リソース

Resources

CW

  • Document 

  • Youtube

  • tailwind Component

  • Awesome tailwind

公式ドキュメント

プレイリスト

資源サイト

資源リストリポジトリ

Resources

CW

Resources

CW

Resources

CW

Resources

CW

Resources

CW

!important;

CW

重要点

Controlling
file size

CW

ファイルサイズ制御

Controlling file size

CW

Dec, 2019

Controlling file size

CW

This might sound enormous but the development build is large by design.

これは大きいかもしれませんが、開発ビルドは意図的に大きくなっています。

Controlling file size

CW

  • PostCSS

  • PurgeCSS

  • Use from CDN

❌

CW

CSS size

Minified 21.07kb

Gzip transferred 7.11kb

Preflight

CW

normalize.cssと同じ

Preflight

CW

  • Built on top of normalize.css 

- <h1>Manage Account<h1>
+ <h1 class="text-xl font-semibold">Manage Account<h1>

Customization

CW

カスタマイズ

CW

Bootstrap 4

tailwindcss

_variables.scss

?

// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;

$btn-border-width:            $input-btn-border-width !default;

$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:        .65 !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;

Customization

CW

tailwind.config.js

$ npx tailwindcss init --full
// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      }
    }
  }
}

ご清聴ありがとうございました

CW

Thank you!

Made with Slides.com