$30 off During Our Annual Pro Sale. View Details »

Tailwind: The Future of CSS is Here!

Tailwind: The Future of CSS is Here!

Can you write a beautiful, maintainable, and responsive web applications without a single line of CSS? With Tailwind, you can. Unlike the majority of CSS frameworks that give you prebuilt components, Tailwind provides you with low-level CSS utility classes that you can combine to create custom designs. The goal of this presentation is to help you understand the value proposition of the utility-first philosophy. We will have a look at:
- why utility-first CSS is the future
- how Tailwind makes building bespoke user interfaces a total breeze
- the benefits and challenges of the utility-first approach

Amadou Sall

April 23, 2021
Tweet

More Decks by Amadou Sall

Other Decks in Programming

Transcript

  1. AHASALL ng-conf 2021 Tailwind: The Future of CSS is Here!

  2. AHASALL github.com/ahasall amadousall.com twitter.com/ahasall GDE in Angular Hi, I am

    Amadou Sall 2
  3. AHASALL Like many of you, I have a love-hate relationship

    with CSS 3
  4. AHASALL The current state of CSS

  5. AHASALL Two options 5 vs

  6. AHASALL The Bronze Plan You can write everything from scratch

    using Vanilla CSS™ 6
  7. AHASALL <button class="my-button">My Button!</button> 7

  8. AHASALL .my-button { padding: .5rem 1rem; border-width: 1px; border-color: transparent;

    border-radius: .375rem; color: #fff; font-size: .875rem; line-height: 1.25rem; font-weight: 500; background-color: #1413e9; cursor: pointer; } 8
  9. AHASALL .my-button:hover, .my-button:active { background-color: #3939e3; } .my-button:focus { outline:

    none; border-color: #3B67BC; } 9
  10. AHASALL 10

  11. AHASALL ✅ Lots of freedom ❌ Lots of work ❌

    Lots of risks 11
  12. AHASALL The Silver Plan You can use prebuilt components from

    a component-oriented CSS framework 12
  13. AHASALL <button class="btn btn-primary">My Button!</button> 13

  14. AHASALL 14

  15. AHASALL ✅ Very fast ✅ Very easy ✅ Very good

    ❌ Very monotonous ❌ Very rigid 15
  16. AHASALL What if you could build custom designs without the

    downsides of vanilla CSS? 16
  17. AHASALL What if you could build custom designs without losing

    your mind? 17
  18. AHASALL I have a solution for you: Tailwind CSS, a

    utility-first CSS framework 18
  19. AHASALL Disclaimer This may seem like a terrible idea at

    first, but please be open-minded 19
  20. AHASALL Warning Once you start using Tailwind, you will not

    want to use anything else 20
  21. AHASALL Demo time!

  22. AHASALL What will Tailwind do for you?

  23. AHASALL Ensure consistency at scale with a true design system

    out of the box 23
  24. AHASALL Effortlessly create responsive layouts so you can focus on

    "real work" 24
  25. AHASALL Create highly customizable layouts without compromising your design 25

  26. AHASALL A highly extensible framework means that you are never

    painted into a corner 26
  27. AHASALL A performant framework provides a globally accessible experience 27

  28. AHASALL Ultimately, you are provided with a great developer experience

    28
  29. AHASALL The Tailwind Developer Experience™ You can stay in your

    HTML You can avoid naming things You can rapidly prototype You can refactor with confidence 29
  30. AHASALL Real talk! What are the tradeoffs?

  31. AHASALL You need to know CSS to be successful with

    Tailwind 31
  32. AHASALL The huge number of HTML classes can make your

    pull requests harder to review 32
  33. AHASALL Building a component library from scratch is no easy

    task 33
  34. AHASALL ✅ A true design system ✅ Responsive to the

    core ✅ Highly customizable ✅ Extensible ✅ More performant ✅ Great developer experience ❌ Requires you to know CSS ❌ It’s verbose ❌ No components Summary
  35. AHASALL Amadou Sall Frontend Software Engineer @ahasall www.amadousall.com ng-conf 2021

    Thank You!