A utility-first CSS framework
tailwindcss
CW
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.
Chris
CW
CW
CW
CW
CW
4.12.0
8.0.2
8.0.2
CW
.mx, .my, .pt, .pr
.col-6, .col-md-4
.d-flex, .flex-column,
.justify-content-md-center
4.12.0
8.0.2
CW
CW
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
CW
CW
CW
CW
CW
CW
CW
CW
.block__element--modifier
CW
.block__element--modifier
CW
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>
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>
CW
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
-
✔︎
✖︎
✔︎
-
-
✔︎
✖︎
✔︎
-
✔︎
CW
CW
CW
CW
CW
CW
CW
CW
CW
CW
Dec, 2019
CW
This might sound enormous but the development build is large by design.
CW
❌
CW
Minified 21.07kb
Gzip transferred 7.11kb
CW
CW
- <h1>Manage Account<h1>
+ <h1 class="text-xl font-semibold">Manage Account<h1>
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;
CW
$ 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