How I got married to
tailwindcss
Klaus Fischer
klaus@supersimple.at
@klausinger
Goal
Motivate 3 people
to try tailwind!
How is the motivation happening? (Agenda)
1. What is tailwind?
2. What problems does it solve?
3. How did I get convinced?
4. Quickstart
5. Future & Improvements
1. What is tailwind?
A utility-first
CSS framework
for rapidly building
custom designs.
WTF Utility-first
High
and
DRY
#soDRY
2. What problems
does tailwind solve?
Scope: Think less when styling
‐ Classes instead of CSS properties
<span class=”text-primary”> <span class=”text-red
Importante! leading-tight”>
</span> Importante!
</span>
.text-primary {
color: red;
line-height: 1.25;
}
Responsive utility classes
‐ Variants supercharge your classes
<span class=”text-lg
md:text-xl
hover:text-red
md:hover:text-blue”>
Importante!
</span>
Establish flexible design systems
‐ Declare your design system/styleguide in tailwind.config.js
‐ Atoms → Components
‐ Build combos for repeating elements (e.g. forms)
<input type=”text” class=”tw-input”>
.tw-input {
@apply px-4 py-3 border border-gray-400 appearance-none;
}
It’s CSS only!
‐ No JS components → Use it with your favorite jQuery
version JS framework 😉
‐ Do one thing and do it well
‐ Less cognitive connection between CSS and JS, easier
onboarding
‐ More utility-based CSS frameworks: tachyons, ...
3. How did I get convinced?
History lesson!
‐ Bootstrap :( there has to be something better!
‐ uikit 2 → uikit 3
‐ Utility based → tachyons?
○ 👍 Minimalism, typo 👎 Maintenance
‐ Stick with uikit 3
“We really should try that new thing!”
Make a sustainable choice
I won’t regret.
Sustainable choice, huh?
‐ Perf: Generate ALL the classes → purgecss
‐ Low risk project (budget, few tech. unknowns, low
maintenance)
‐ Take the time to learn
‐ Encourage enthusiasm
‐ Decide afterwards
“Mkay, gimme half the pill and a way out.”
Technical integration
‐ Symfony Boilerplate + Storyblok
‐ SSR with PHP + twig
‐ SCSS (uikit)
‐ ES6, Vue.js, webpack
‐ Gulp
→
PostCSS
Why PostCSS?
‐ more modular than scss
‐ postcss-preset-env (!!!)
‐ CSS custom properties a.k.a. CSS Variables, imports,
nesting
Workflow
‐ Half a day to make it work
‐ VSCode plugin as cheatsheet
‐ Designs → extract design system → typo, colors, spacings
‐ tailwind.config.js overrides
‐ Start building!
4. tailwindcss Quickstart
tailwindcss Quickstart
‐ Start plain or add to your setup
‐ Don’t panic, use the force search! (it’s really good)
‐ IDE Plugin / Cheatsheet
‐ Component-based approach
‐ Grid, Typography, Spacings (Sample Markdown)
‐ Give yourself some time!
5. THE FUTURE
Future & Improvements
‐ Order classes: text-red border-red md:text-lg
‐ Improve combo-readability
‐ Combine with JS libs (sliders, modals, ... )
‐ https://www.tailwindui.com/
‐ Share experiences!
Summary (finally!)
Summary
1. What is tailwind? utility-based
2. What problems does it solve? scope, variants, focused
3. How did I get convinced? Low risk, purgeCSS, enthusiasm
4. Quickstart: pick a project, search docs, IDE plugin
5. Take some time and try it!
Hope you’ve enjoyed, try it!
Wanna code tailwind or something else?
klaus.fischer@netural.com
Klaus Fischer
@klausinger
STOP CSS NOW, TALK JS
Wanna code tailwind or something else?
klaus.fischer@netural.com
Klaus Fischer
@klausinger
