A utility-first CSS framework
tailwindcss
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459465/pasted-from-clipboard.png)
CW
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7405537/2017-03-23-52676b_2.jpg)
Chris
CW
About
tailwindcss
CW
tailwind について
CW
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459694/pasted-from-clipboard.png)
Functional & Utility CSS Framework
CW
tailwind について
CW
Tachyons
4.12.0
Basscss
8.0.2
Bootstrap
8.0.2
CW
Bootstrap
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459813/pasted-from-clipboard.png)
.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 作者
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7461345/pasted-from-clipboard.png)
Course
Podcast
Refactoring UI
CW
https://adamwathan.me/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7461345/pasted-from-clipboard.png)
A utility-first CSS framework
CW
tailwindcss
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459465/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459813/pasted-from-clipboard.png)
Bootstrap 4
A utility-first CSS framework
CW
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459813/pasted-from-clipboard.png)
Bootstrap 4
tailwindcss
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459465/pasted-from-clipboard.png)
tailwindcss
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459465/pasted-from-clipboard.png)
CW
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459813/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7462900/Screen_Shot_2020-06-14_at_1.31.01_PM.png)
Showcases
CW
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7461828/Screen_Shot_2020-06-13_at_11.43.49_PM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7462790/Screen_Shot_2020-06-14_at_11.58.21_AM.png)
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="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>
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7462803/https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_58268_11bae2d9-2f02-131a-243d-8d58ae81e568__1_.png)
Dec, 2019
Controlling file size
CW
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7462816/Screen_Shot_2020-06-14_at_12.20.33_PM.png)
This might sound enormous but the development build is large by design.
Controlling file size
CW
-
PostCSS
-
PurgeCSS
-
Use from CDN
❌
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7462862/Screen_Shot_2020-06-14_at_12.26.23_PM.png)
CW
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7462900/Screen_Shot_2020-06-14_at_1.31.01_PM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459813/pasted-from-clipboard.png)
Bootstrap 4
tailwindcss
![](https://s3.amazonaws.com/media-p.slid.es/uploads/59023/images/7459465/pasted-from-clipboard.png)
_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
- 842