Tailwind - For the win!

My career...

You can argue which is the best JS libraries/frameworks/whatever but Tailwind is 💯

Write once, run everywhere

• Like jQuery Bootstrap played an import role in the days where browsers (IE) made web development difficult/impossible to get right

• Development became easier/faster using prebuilt components

• On boarding CSS didn't involve learning custom company css

• Foundation and other UI kits followed!

• It started appearing in job ads as a requirement!

• The solution to every problem is probably to add a div!

• All of this came at a cost!

Have we met before?

• Sites started to look the same

• You had to start overriding things

• Specificity wars led to rise of !important

Less/Scss/Whatever to the rescue

• Start providing your own variables

• Hard to control use of nesting/mixins

• Still one big css file at the end

• Could enforce styling rules, but not naming

• Had to run preprocessor

• 'Normally' these css files live in a galaxy far far away from the code

Angular directives/React/Vue/Whatever changed the game

A component needs three things

• template
• css
• js

But if you're using a JS library/framework do you still need a UI Kit?

For React - ReactStrap For Vue - vuetifyjs

• You can't use normal version of Bootstrap... why would you want to?

• You still have to learn their DSL

• Still have to turn into detective to find out what is going on

• You still have to override

• You now have them as a dependency!

• What happens if they don't fix a bug?

• What happens when they don't move to Bootstrap 5 or next version of Material Design?

• What happens if they stop supporting the version you're currently using?

• What happens when one of your dependencies clashes with theirs!

• Size is difficult to control

• What happens if you switch library/framework?

So WTF is tailwind

• Utility CSS

• Think functional vs OO

• Bootstrap already starting to do this with bootstrap utilities

• Design tokens!

• Design systems help provide constraints

• Performance

The future of CSS

We want to be able to create components with just the CSS we need with some hope it works as we intended

• CSS in JS

• CSS modules

• Shadow dom!