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 & 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 & 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!
Tailwind - Utility CSS
By Chris Wu
Tailwind - Utility CSS
- 1,779