Scribd
Upload
252 views

Tailwind Css

1. Klaus Fischer gives a presentation on tailwindcss to motivate others to try it. 2. Tailwindcss is a utility-first CSS framework that uses classes instead of CSS properties to scope styles and provide responsive variants. It helps establish flexible design systems. 3. Klaus was initially skeptical of other frameworks but chose tailwindcss for a low-risk project due to its performance, minimalism, and potential for enthusiasm. He emphasizes taking time to learn the framework.

Uploaded by

mirian flores
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
252 views

Tailwind Css

1. Klaus Fischer gives a presentation on tailwindcss to motivate others to try it. 2. Tailwindcss is a utility-first CSS framework that uses classes instead of CSS properties to scope styles and provide responsive variants. It helps establish flexible design systems. 3. Klaus was initially skeptical of other frameworks but chose tailwindcss for a low-risk project due to its performance, minimalism, and potential for enthusiasm. He emphasizes taking time to learn the framework.

Uploaded by

mirian flores
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

How I got married to

tailwindcss
Klaus Fischer
[email protected]
@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.fi[email protected]

Klaus Fischer
@klausinger
STOP CSS NOW, TALK JS
Wanna code tailwind or something else?
klaus.fi[email protected]

Klaus Fischer
@klausinger

You might also like