A presentation at Stahlstadt.js #24 in in Linz, Austria by Klaus
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
WTF Utility-first
High and DRY
#soDRY
Scope: Think less when styling ‐ Classes instead of CSS properties <span class=”text-primary”> Importante! </span> .text-primary { color: red; line-height: 1.25; } <span class=”text-red leading-tight”> Importante! </span>
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, …
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!
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!
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
for free. You
can too.