TailwindCSS — how to make CSS great again

"Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. The speaker will demonstrate how you can build beautiful UIs without touching CSS at all via live coding.

This talk is for everyone. For beginners who have never done CSS and for CSS pros. Everyone will find something useful for themselves."

The talk was given at a monthly WebHack meetup in Tokyo, 2019.
https://webhack.connpass.com/event/142480

Transcript

1. TailwindCSS — how to make CSS great again
2. Dariusz Czajkowski dczajkowski.com @DCzajkowski @CzajkowskiDarek
8. Who has never written any CSS?
9. Who heard about atomic/utility css?
11. hard
12. Naming stuff
13. There are only two hard things in Computer Science: cache invalidation and naming things. — Phil Karlton ’ ’
14. Random unit values Search... padding: 10px
15. Random unit values Search... padding: 10px top: 8px
16. Random colors Search... #7f7f7f #828787 #838787
17. Premature abstractions Search... .search-input { padding: 1rem; /* ... */ }
18. Specificity is !important .list-item { padding: 1rem; }
19. Specificity is !important .list-item { padding: 1rem; } .header .list-item { padding: 1.5rem; }
20. Specificity is !important .list-item { padding: 1rem; } .header .list-item { padding: 1.5rem; } .list-item--large-padding { padding: 3rem; }
21. Specificity is !important .list-item { padding: 1rem; } .header .list-item { padding: 1.5rem; } .list-item--large-padding { padding: 3rem !important; }
22. Specificity is !important .list-item { padding: 1rem; } .header .list-item { padding: 1.5rem; } .header .list-item--large-padding, .list-item--larg padding: 3rem; }
23. Specificity is !important .list-item { padding: 1rem; } .header .list-item { padding: 1.5rem; } .list-item--large-padding.list-item--large-padding padding: 3rem; }
24. Appending to global CSS
25. Naming collisions
26. CSS recompilation
27. Solution?
28. Use variables and modules
29. Use variables and modules Ups - Consistent unit values - Predefined colors - Divides code into smaller modules
30. Use variables and modules Downs - Does not solve premature abstractions problem - Does not solve specificity problem - Does not solve naming collisions - Does not solve recompilation - Does not enforce any style
31. Use CSS-in-JS
32. Use CSS-in-JS import { css } from 'emotion'; import { gray500, gray700, teal600 } from '@/styles/colors'; import { s4, s8 } from '@/styles/scale'; import { large as fontLarge } from '@/styles/fonts'; import { radius } from '@/styles/misc'; const input = css` padding: ${s4} ${s8}; background-color: ${gray500}; border: 1px solid ${gray700}; font-size: ${fontLarge}; border-radius: ${radius}; &:focus { border-color: ${teal600}; } `; export default () => <input className={input} placeholder="Search..." />;
33. Use CSS-in-JS Ups - More-or-less solves random units - More-or-less solves random colors - Solves premature abstractions - Solves specificity problem - Solves appending to global styles - Solves naming collisions - Solves rebulding CSS
34. Use CSS-in-JS Downs - Does not enforce usage of variables - CSS styles leak to the JS code - Not easily reusable - Forces a use of a build system
35. Use utility classes™
36. Use utility classes <input class=" py-4 px-8 bg-gray-500 border border-gray-700 text-lg rounded focus:border-teal-700 " placeholder="Search..." />
37. Ups - Solves unit problems - Solves weird colors problem - Solves premature abstraction - Solves specificity problem - Solves appending to global styles - Solves naming collisions - Solves rebuilding CSS - CSS is still in your CSS file - Gives you building blocks = easily reusable Use utility classes
38. Downs - Pollutes markup with the presentation logic - Classes are reusable, but components are not Use utility classes
40. How does it work?
41. Tailwind is just a PostCSS plugin
42. $ yarn add tailwindcss
43. // postcss.config.js module.exports = { plugins: [ // ... require('tailwindcss'), require('autoprefixer'), // ... ], };
44. // tailwind.config.js module.exports = { theme: {}, variants: {}, plugins: [], }; $ npx tailwind init
45. /* app.css */ @tailwind base; @tailwind components; @tailwind utilities;
46. Demo time!
48. K, but what about the file size?
49. With a default config
50. Resources - https://adamwathan.me/css-utility-classes-and- separation-of-concerns - https://frontstuff.io/in-defense-of-utility-first-css Articles Tools - https://tailwind.run - https://github.com/aniftyco/awesome-tailwindcss
51. Thank you for listening!
52. Questions?
53. Slides and source code are available at: darek.dev/tailwind