How I got married to tailwindcss

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”> 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, …

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