A utility-first CSS framework

tailwindcss

CW

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

Chris

CW

About

tailwindcss

CW

tailwind について

CW

Functional & Utility CSS Framework

CW

tailwind について

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

tailwind 作者

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

tailwind について

Showcases

CW

Showcases

CW

Showcases

CW

Showcases

CW

More Showcases

CW

tailwind について

https://builtwithtailwind.com/

Why tailwindcss

CW

tailwind について

BEM

CW

tailwind について

.block__element--modifier

BEM + BS Utilities

CW

tailwind について

.block__element--modifier

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="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>

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

tailwind について

Resources

CW

  • Document

  • Youtube

  • tailwind Component

  • Awesome tailwind

Resources

CW

Resources

CW

Resources

CW

Resources

CW

Resources

CW

!important;

CW

tailwind について

Controlling
file size

CW

tailwind について

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

tailwind について

Preflight

CW

  • Built on top of normalize.css 

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

Customization

CW

tailwind について

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!

Tailwind - Utility CSS

By Chris Wu

Made with Slides.com

Tailwind - Utility CSS

  • 881

More from Chris Wu