Taking Flight with Tailwind CSS

https://www.oliverdavies.uk/talks/tailwind

Transcript

1. Taking Flight with Tailwind CSS Oliver Davies (@opdavies) https://opdavi.es/dcg
2. What is utility-first CSS? • A different way to write CSS. • Instead of writing CSS in separate files, you work primarily in HTML. • Small CSS classes with a single responsibility. • Classes are named by what they do, not where they are used. @opdavies
3. The traditional CSS approach @opdavies
4. 1 h1 { 2 font-size: 3rem; 3 font-weight: bold; 4 color: #020617; /* Dark grey */ 5 padding: .5rem 0 2rem; 6 } @opdavies
5. 1 h1 { 2 font-size: 3rem; 3 font-weight: bold; 4 color: #020617; /* Dark grey */ 5 padding: .5rem 0 2rem; 6 } 7 8 .card { 9 padding: 2rem; 10 } 11 12 .card p { 13 color: #020617; /* Dark grey */ 14 font-size: 3rem; 15 font-weight: bold; 16 } @opdavies
6. 1 h1 { 2 font-size: 3rem; 3 font-weight: bold; 4 color: #020617; /* Dark grey */ 5 padding: .5rem 0 2rem; 6 } 7 8 .card { 9 padding: 2rem; 10 } 11 12 .card p { 13 color: #020617; /* Dark grey */ 14 font-size: 3rem; 15 font-weight: bold; 16 } @opdavies
7. 1 h1 { 2 font-size: 3rem; 3 font-weight: bold; 4 color: #020617; /* Dark grey */ 5 padding: .5rem 0 2rem; 6 } 7 8 .card { 9 padding: 2rem; 10 } 11 12 .card p { 13 color: #020617; /* Dark grey */ 14 font-size: 3rem; 15 font-weight: bold; 16 } @opdavies
8. 1 h1 { 2 font-size: 3rem; 3 font-weight: bold; 4 color: #020617; /* Dark grey */ 5 padding: .5rem 0 2rem; 6 } 7 8 .card { 9 padding: 2rem; 10 } 11 12 .card p { 13 color: #020617; /* Dark grey */ 14 font-size: 3rem; 15 font-weight: bold; 16 } @opdavies
9. 1 h1 { 2 font-size: 3rem; 3 font-weight: bold; 4 color: #020617; /* Dark grey */ 5 padding: .5rem 0 2rem; 6 } 7 8 .card { 9 padding: 2rem; 10 } 11 12 .card p { 13 color: #020617; /* Dark grey */ 14 font-size: 3rem; 15 font-weight: bold; 16 } @opdavies
10. The utility-first CSS approach @opdavies
11. 1 .font-bold { 2 font-weight: bold; 3 } 4 5 .text-slate-900 { 6 color: #020617; 7 } 8 9 .text-5xl { 10 text-size: 3rem; 11 } 12 13 .flex { 14 display: flex; 15 } @opdavies
12. 1 .font-bold { 2 font-weight: bold; 3 } 4 5 .text-slate-900 { 6 color: #020617; 7 } 8 9 .text-5xl { 10 text-size: 3rem; 11 } 12 13 .flex { 14 display: flex; 15 } @opdavies
13. 1 .font-bold { 2 font-weight: bold; 3 } 4 5 .text-slate-900 { 6 color: #020617; 7 } 8 9 .text-5xl { 10 text-size: 3rem; 11 } 12 13 .flex { 14 display: flex; 15 } @opdavies
14. 1 .font-bold { 2 font-weight: bold; 3 } 4 5 .text-slate-900 { 6 color: #020617; 7 } 8 9 .text-5xl { 10 text-size: 3rem; 11 } 12 13 .flex { 14 display: flex; 15 } @opdavies
15. 1 .font-bold { 2 font-weight: bold; 3 } 4 5 .text-slate-900 { 6 color: #020617; 7 } 8 9 .text-5xl { 10 text-size: 3rem; 11 } 12 13 .flex { 14 display: flex; 15 } @opdavies
16. What problems does this solve? • You don't waste time and energy inventing class names. • No switching between CSS and HTML files. • Your CSS stops growing. • Reusability. • Making changes feels (and is) safer. @opdavies
17. Examples @opdavies
18. @opdavies
19. @opdavies
20. @opdavies
21. What is Tailwind CSS? @opdavies
22. Tailwind CSS is a highly customisable, low-level CSS framework @opdavies
23. CSS utility class generator @opdavies
24. • Text/border/background colours • Font size/family/weight • Alignment • Padding/margin/negative margin • Flexbox • Positioning • Lists • z-index • Opacity @opdavies
25. • Screenreader visibility • Placeholder colour • first-child, last-child, nth-child • CSS Grid • Transition • Transform • Spacing / Divide • Focus ring • Text clamping @opdavies
26. block inline flex grid @opdavies
27. text-sm text-base text-lg text-xl text-2xl @opdavies
28. text-blue-50 text-blue-100 text-blue-200 text-blue-300 text-blue-400 text-blue-500 @opdavies
29. Installation and Usage @opdavies
30. npm install --save-dev tailwindcss @opdavies
31. npx tailwind --content index.html --output build/tailwind.css @opdavies
32. Interaction states @opdavies
33. hover, focus, active, disabled, visited, focus-within, first-child, last-child @opdavies
34. [state][separator][class] @opdavies
35. hover:text-red-500 focus:text-red-500 @opdavies
36. Interaction states in CSS 1 .text-red-500 { 2 color: #f56565; 3 } 4 5 .hover\:text-red-500:hover { 6 color: #f56565; 7 } 8 9 .focus\:text-red-500:focus { 10 color: #f56565; 11 } @opdavies
37. Interaction states in CSS 1 .text-red-500 { 2 color: #f56565; 3 } 4 5 .hover\:text-red-500:hover { 6 color: #f56565; 7 } 8 9 .focus\:text-red-500:focus { 10 color: #f56565; 11 } @opdavies
38. Interaction states in CSS 1 .text-red-500 { 2 color: #f56565; 3 } 4 5 .hover\:text-red-500:hover { 6 color: #f56565; 7 } 8 9 .focus\:text-red-500:focus { 10 color: #f56565; 11 } @opdavies
39. Interaction states in CSS 1 .text-red-500 { 2 color: #f56565; 3 } 4 5 .hover\:text-red-500:hover { 6 color: #f56565; 7 } 8 9 .focus\:text-red-500:focus { 10 color: #f56565; 11 } @opdavies
40. Interaction states in HTML 1 <a 2 href="#" 3 class="text-red-500 hover:text-red-800" 4 > 5 Read more 6 </a> @opdavies
41. Interaction states in HTML 1 <a 2 href="#" 3 class="text-red-500 hover:text-red-800" 4 > 5 Read more 6 </a> @opdavies
42. Responsive @opdavies
43. [screen][separator][class] @opdavies
44. Screens (aka breakpoints) 1 // defaultConfig.stub.js 2 3 screens: { 4 sm: '640px', 5 md: '768px', 6 lg: '1024px', 7 xl: '1280px', 8 }, @opdavies
45. md:flex md:hover:bg-red-500 @opdavies
46. Responsive classes in CSS 1 .block { 2 display: block; 3 } 4 5 @media (min-width: 640px) { 6 .sm\:block { 7 display: block; 8 } 9 } @opdavies
47. Responsive classes in CSS 1 .block { 2 display: block; 3 } 4 5 @media (min-width: 640px) { 6 .sm\:block { 7 display: block; 8 } 9 } @opdavies
48. Responsive classes in CSS 1 .block { 2 display: block; 3 } 4 5 @media (min-width: 640px) { 6 .sm\:block { 7 display: block; 8 } 9 } @opdavies
49. Responsive classes in HTML 1 <div class="block md:flex"> 2 <div class="w-full md:w-1/2"> 3 Column 1 4 </div> 5 6 <div class="w-full md:w-1/2"> 7 Column 2 8 </div> 9 </div> @opdavies
50. Responsive classes in HTML 1 <div class="block md:flex"> 2 <div class="w-full md:w-1/2"> 3 Column 1 4 </div> 5 6 <div class="w-full md:w-1/2"> 7 Column 2 8 </div> 9 </div> @opdavies
51. Responsive classes in HTML 1 <div class="block md:flex"> 2 <div class="w-full md:w-1/2"> 3 Column 1 4 </div> 5 6 <div class="w-full md:w-1/2"> 7 Column 2 8 </div> 9 </div> @opdavies
52. Arbitrary values @opdavies
53. w-[23px] md:w-[250px] text-[#abc123] @opdavies
54. grid-cols-[fit-content(theme(sp acing.32))] @opdavies
55. lg:[&:nth-child(3)]:hover :underline @opdavies
56. How I deal with repetition? @opdavies
57. Avoid repetition by extracting components @opdavies
58. Loops 1 {% for item in navItems %} 2 <a 3 class="block py-3 px-4 text-sm text-gray-800" 4 href="{{ item.url }}" 5 > 6 {{ item.title }} 7 </a> 8 {% endfor %} @opdavies
59. Loops 1 {% for item in navItems %} 2 <a 3 class="block py-3 px-4 text-sm text-gray-800" 4 href="{{ item.url }}" 5 > 6 {{ item.title }} 7 </a> 8 {% endfor %} @opdavies
60. Loops 1 {% for item in navItems %} 2 <a 3 class="block py-3 px-4 text-sm text-gray-800" 4 href="{{ item.url }}" 5 > 6 {{ item.title }} 7 </a> 8 {% endfor %} @opdavies
61. Loops 1 {navItems.map(item => ( 2 <a 3 class="block py-3 px-4 text-sm text-gray-800" 4 href={item.url} 5 > 6 {item.title} 7 </a> 8 ))} @opdavies
62. Loops 1 {navItems.map(item => ( 2 <a 3 class="block py-3 px-4 text-sm text-gray-800" 4 href={item.url} 5 > 6 {item.title} 7 </a> 8 ))} @opdavies
63. Loops 1 {navItems.map(item => ( 2 <a 3 class="block py-3 px-4 text-sm text-gray-800" 4 href={item.url} 5 > 6 {item.title} 7 </a> 8 ))} @opdavies
64. Includes 1 <h2>Adults</h2> 2 3 {% include 'class-list' with { 4 classes: page.classes, 5 type: 'adults', 6 } %} 7 8 <h2>Kids</h2> 9 10 {% include 'class-list' with { 11 classes: page.classes, 12 type: 'kids', 13 } %} @opdavies
65. Includes 1 <h2>Adults</h2> 2 3 <ClassList classes={classes} type="kids" /> 4 5 <h2>Kids</h2> 6 7 <ClassList classes={classes} type="adults" /> @opdavies
66. Keeping Things Small: Controlling the file size @opdavies
67. Just in Time (JIT mode) @opdavies
68. Content Tell Tailwind where it should look for utility classes. 1 // tailwind.config.js 2 3 module.exports = { 4 content: ['./templates/**/*.twig'], 5 // ... 6 } @opdavies
69. Customising Tailwind @opdavies
70. npx tailwind init @opdavies
71. tailwind.config.js 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 content: [], 4 theme: { 5 extend: {}, 6 }, 7 plugins: [], 8 } @opdavies
72. Overriding configuration 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 content: [], 4 theme: { 5 colors: { 6 inherit: 'inherit' 7 }, 8 extend: {}, 9 }, 10 plugins: [], 11 } @opdavies
73. Extending configuration 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 content: [], 4 theme: { 5 extend: { 6 colors: { 7 inherit: 'inherit' 8 } 9 }, 10 }, 11 plugins: [], 12 } @opdavies
74. npx tailwind init --full @opdavies
75. Adding Tailwind to your CSS @opdavies
76. Including Tailwind 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base; 4 5 @tailwind components; 6 7 @tailwind utilities; @opdavies
77. Adding your own classes 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base; 4 /* Custom base styles */ 5 6 @tailwind components; 7 /* Custom components */ 8 9 @tailwind utilities; 10 /* Custom utilities */ @opdavies
78. Adding your own classes 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base; 4 /* Custom base styles */ 5 6 @tailwind components; 7 /* Custom components */ 8 9 @tailwind utilities; 10 /* Custom utilities */ @opdavies
79. Adding your own classes 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base; 4 /* Custom base styles */ 5 6 @tailwind components; 7 /* Custom components */ 8 9 @tailwind utilities; 10 /* Custom utilities */ @opdavies
80. Adding your own classes 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base; 4 /* Custom base styles */ 5 6 @tailwind components; 7 /* Custom components */ 8 9 @tailwind utilities; 10 /* Custom utilities */ @opdavies
81. Adding your own classes (with layers) 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base; 4 @tailwind components; 5 @tailwind utilities; 6 7 @layer components { 8 /* Custom components */ 9 } @opdavies
82. Adding your own classes (with layers) 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base; 4 @tailwind components; 5 @tailwind utilities; 6 7 @layer components { 8 /* Custom components */ 9 } @opdavies
83. Adding your own classes (with layers) 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base; 4 @tailwind components; 5 @tailwind utilities; 6 7 @layer components { 8 /* Custom components */ 9 } @opdavies
84. npx tailwind --input src/css/tailwind.pcss --output dist/tailwind.css @opdavies
85. Extending Tailwind CSS with Plugins @opdavies
86. npm install --save-dev tailwindcss-list-reset @opdavies
87. Adding a plugin 1 // tailwind.config.js 2 3 module.exports = { 4 theme: { 5 extend: {}, 6 }, 7 plugins: [ 8 require('tailwindcss-list-reset')() 9 ], 10 variants: {}, 11 } @opdavies
88. Adding a plugin 1 // tailwind.config.js 2 3 module.exports = { 4 theme: { 5 extend: {}, 6 }, 7 plugins: [ 8 require('tailwindcss-list-reset')() 9 ], 10 variants: {}, 11 } @opdavies
89. Generated CSS 1 .list-reset { 2 list-style: none; 3 padding: 0; 4 } @opdavies
90. Writing plugins 1 const plugin = require("tailwindcss/plugin"); 2 @opdavies
91. Writing plugins 1 const plugin = require("tailwindcss/plugin"); 2 3 module.exports = plugin(function({ addUtilities }) { 4 5 }) 6 @opdavies
92. Writing plugins 1 const plugin = require("tailwindcss/plugin"); 2 3 module.exports = plugin(function({ addUtilities }) { 4 addUtilities({ 5 '.list-reset': { 6 listStyle: 'none', 7 padding: 0, 8 }, 9 }) 10 }) 11 @opdavies
93. Writing plugins Adding child and child-hover variants: 1 const plugin = require('tailwindcss/plugin'); 2 3 module.exports = plugin(({ addVariant }) => { 4 addVariant('child', '& > *'); 5 addVariant('child-hover', '& > *:hover'); 6 }); @opdavies
94. Writing plugins Adding a hocus variant: 1 const plugin = require('tailwindcss/plugin'); 2 3 module.exports = plugin(({ addVariant }) => { 4 addVariant('hocus', ['&:hover', '&:focus']); 5 }); @opdavies
95. Adding Tailwind CSS to an existing project @opdavies
96. Disabling the reset styles 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 content: [], 4 theme: { 5 extend: {}, 6 }, 7 corePlugins: { 8 preflight: false, 9 }, 10 plugins: [], 11 } @opdavies
97. Prefixing class names Turn classes like flex into tw-flex. 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 prefix: "tw-", 4 content: [], 5 theme: { 6 extend: {}, 7 }, 8 plugins: [], 9 } @opdavies
98. !important 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 important: true, 4 content: [], 5 theme: { 6 extend: {}, 7 }, 8 plugins: [], 9 } @opdavies
99. !important 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 important: "#app", 4 content: [], 5 theme: { 6 extend: {}, 7 }, 8 plugins: [], 9 } @opdavies
100. !important !flex @opdavies
101. Tailwind CSS in Drupal @opdavies
102. @opdavies
103. @opdavies
104. composer require drupal/tailwindcss:^5 @opdavies
105. php web/core/scripts/drupal generate-theme my_theme --starterkit tailwindcss @opdavies
106. @opdavies
107. @opdavies
108. @opdavies
109. @opdavies
110. @opdavies
111. Thanks! References: • https://tailwindcss.com • https://tailwindui.com • https://www.youtube.com/c/TailwindLabs • https://www.protailwind.com • https://drupal.org/project/tailwindcss Me: • https://www.oliverdavies.uk @opdavies