Tailwind CSS - Transitioning Away from Styled Components

Presentation of Tailwind CSS for front-end developers. Quick focus regarding the transition from Styled Components to Tailwind CSS.

Overview

- Introduction
- Benefits and disadvantages of Tailwind CSS
- From Styled Components to Tailwind CSS
- Tailwind CSS every day
- CSS Frameworks based on Tailwind CSS
- The power of the GPTs
- The future of Tailwind CSS

Transcript

1. Tailwind CSS Transitioning Away from Styled Components March 2024 By David Dias Photo by Hal Gatewood on Unsplash
2. Hi, I’m David Dias
4. - Scope: no leak or clash with other styles - Component-based, code collocation - Dynamic styles based on props, states etc - Nice DX with automatic vendor pre fi xes, listing and support of theming. Solutions provided by CSS-in-JS
5. - CSS included in the JavaScript bundle (performance bottleneck) - Doesn’t enforce re-usability and consistency (easy to create one off component) - Not the fastest way to prototype and developing - Less frequent releases, community is shrinking Problems faced using CSS-in-JS
6. Overview • Introduction • Bene fi ts and disadvantages of Tailwind CSS • From Styled Components to Tailwind CSS • Tailwind CSS every day • CSS Frameworks based on Tailwind CSS • The power of the GPTs • The future of Tailwind CSS
7. Introduction
8. - Utility- fi rst CSS framework - Let you directly customize your HTML/components - Fully customizable - Focus on consistency, maintainability… What is Tailwind CSS?
10. - Utility- fi rst CSS framework - Let you directly customize your HTML/components - Fully customizable - Focus on consistency, maintainability… What is Tailwind CSS?
11. - Utility- fi rst CSS framework - Let you directly customize your HTML/components - Fully customizable - Focus on consistency, maintainability… What is Tailwind CSS?
12. - Utility- fi rst CSS framework - Let you directly customize your HTML/components - Fully customizable - Focus on consistency, maintainability… What is Tailwind CSS?
13. - It’s not a UI Kit: no prede fi ned components - Not a opinionated library What is NOT Tailwind CSS?
14. - It’s not a UI Kit: no prede fi ned components - Not a opinionated library What is NOT Tailwind CSS?
16. - Utility- fi rst vs component based - More in depth customization vs pre-build components - Small learning curve vs Bootstrap’s component-base design - CSS directly on the markup vs ready-made UI components Tailwind CSS vs Twitter Bootstrap
18. - Utility- fi rst vs component based - More in depth customization vs pre-build components - Small learning curve vs Bootstrap’s component-base design - CSS directly on the markup vs ready-made UI components Tailwind CSS vs Twitter Bootstrap
19. - Utility- fi rst vs component based - More in depth customization vs pre-build components - Small learning curve vs Bootstrap’s component-base design - CSS directly on the markup vs ready-made UI components Tailwind CSS vs Twitter Bootstrap
20. - Utility- fi rst vs component based - More in depth customization vs pre-build components - Small learning curve vs Bootstrap’s component-base design - CSS directly on the markup vs ready-made UI components Tailwind CSS vs Twitter Bootstrap
21. Bene fi ts and disadvantages of Tailwind CSS
22. - Mobile fi rst - Fast to style / use - No need to fi nd the “best” class name - Not opinionated ( fl exible and customizable con fi g) - No side effects (due to common classes) - Strip and optimized unused CSS (CSS nano) Advantages of Tailwind CSS?
23. - Mobile fi rst - Fast to style / use - No need to fi nd the “best” class name - Not opinionated ( fl exible and customizable con fi g) - No side effects (due to common classes) - Strip and optimized unused CSS (CSS nano) Advantages of Tailwind CSS?
24. - Mobile fi rst - Fast to style / use - No need to fi nd the “best” class name - Not opinionated ( fl exible and customizable con fi g) - No side effects (due to common classes) - Strip and optimized unused CSS (CSS nano) Advantages of Tailwind CSS?
25. - Mobile fi rst - Fast to style / use - No need to fi nd the “best” class name - Not opinionated ( fl exible and customizable con fi g) - No side effects (due to common classes) - Strip and optimized unused CSS (CSS nano) Advantages of Tailwind CSS?
26. - Mobile fi rst - Fast to style / use - No need to fi nd the “best” class name - Not opinionated ( fl exible and customizable con fi g) - No side effects (due to common classes) - Strip and optimized unused CSS (CSS nano) Advantages of Tailwind CSS?
27. - Mobile fi rst - Fast to style / use - No need to fi nd the “best” class name - Not opinionated ( fl exible and customizable con fi g) - No side effects (due to common classes) - Strip and optimized unused CSS (CSS nano) Advantages of Tailwind CSS?
28. - Styling and HTML are mixed - Small learning curve (practice, practice, practice) - No pre-build components (Possible) Disadvantages of Tailwind CSS
30. - Styling and HTML are mixed - Small learning curve (practice, practice, practice) - No pre-build components (Possible) Disadvantages of Tailwind CSS
31. - Styling and HTML are mixed - Small learning curve (practice, practice, practice) - No pre-build components (Possible) Disadvantages of Tailwind CSS
32. From Styled Components to Tailwind CSS (adapted to our use case)
33. Demo Install and con fi gure Tailwind CSS
34. - Install Tailwind CSS - Update the con fi guration fi le - Start adding classes to the code
37. Demo Converting a Styled Component
38. Tailwind CSS every day
39. @apply
41. Learn, practice, inspect
46. Structure, type
48. Explore more…
49. class=“container” class=“size-24” class=“divide” class=“space” (when not using flexbox, grid) class=“truncate” class=“animate-*” class=“sr-only”
50. CSS Frameworks based on Tailwind CSS
57. And a lot more…
58. The power of the GPTs
59. TailwindCSS GPT
60. Design to Tailwind Converter
61. The future of Tailwind CSS
62. V4 V3 . . . Alpha
64. - Tailwind v4 features a new engine: 10x faster, 35% smaller and Rust for critical parts - Zero-con fi guration content detection: automatically detects content fi les. - Tailwind becomes an all-in-one tool: integrates features like @import, vendor pre fi xing… - Addition of modern web features like native cascade layers, custom properties, and container queries.
65. Thank you. Merci. Obrigado. speakerdeck.com/thedaviddias