Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Taking Flight with Tailwind CSS

71c9ebde850996d2533c5df4df2c93c6?s=47 Oliver Davies
February 10, 2021
Technology
0
2.1k

Taking Flight with Tailwind CSS

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

71c9ebde850996d2533c5df4df2c93c6?s=128

Oliver Davies

February 10, 2021
Tweet

More Decks by Oliver Davies

See All by Oliver Davies
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
2.6k
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
180
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
90
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
190
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
94
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
1.2k
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
820
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
450
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
150

Other Decks in Technology

See All in Technology
97a7f7899e0df28c3636b8d44bbe6578?s=48 korodroid
0
120
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
2.7k
65f840d22d4507284fc10332fdde00fe?s=48 lulak21
0
130
00851927294532e0742c2c174730dff0?s=48 ido_kara_deru
2
180
828bebe205894e1aa5f75a1fc6935a9c?s=48 ganchan11
0
120
573d75e1a72107ff5c806d7e70a9e67d?s=48 michimani
1
320
B0cd2f94d292187c9baaf34b3979154d?s=48 quandohr
1
1.6k
Cd891a89dfec6ca7bd278b5f5bd87c90?s=48 tzkoba
9
2.4k
93aef1d166a8a3536538eff713f80307?s=48 flant
0
4.1k
Ec84be044168226842bf1d38ae2e8e50?s=48 nagahara
6
790
6500a96a5f0786d7ff0c53429d691ae6?s=48 kazuhiro4949
1
180
B22a79a9c1bf42c1825ce42dedd41765?s=48 shinpsan
0
280

Featured

See All Featured
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
158
6.6k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
210k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
73
270k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
243
21k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
259
24k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
289
110k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
108
15k
78b475797a14c84799063c7cd073962f?s=48 holman
290
130k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
101
11k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
31
1.2k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
238
23k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
1.5k

Transcript

  1. Taking Flight with Tailwind CSS Oliver Davies (@opdavies)

  2. @opdavies

  3. What is Tailwind CSS? @opdavies

  4. A utility-first CSS framework for rapidly building custom designs @opdavies

  5. Tailwind CSS is a highly customisable, low-level CSS framework @opdavies

  6. Tailwind is more than a CSS framework, it's an engine

    for creating design systems @opdavies

  7. • Text/border/background colours • Font size/family/weight • Alignment • Padding/margin/negative

    margin • Flexbox • Positioning • Lists • z-index • Opacity @opdavies

  8. • Screenreader visibility • Placeholder colour • first-child, last-child, nth-child

    • CSS Grid • Transition • Transform • Spacing / Divide • Focus ring • Text clamping @opdavies

  9. @opdavies

  10. @opdavies

  11. @opdavies

  12. How do I use Tailwind? @opdavies

  13. Style elements by applying pre-existing classes directly in your HTML

    @opdavies

  14. Using utility classes to build custom designs without writing CSS

    @opdavies

  15. Benefits • You aren't wasting time and energy inventing class

    names • Your CSS stops growing • Making changes feels safer @opdavies

  16. @opdavies

  17. @opdavies

  18. @opdavies

  19. @opdavies

  20. @opdavies

  21. @opdavies

  22. @opdavies

  23. @opdavies

  24. How do I install Tailwind? @opdavies

  25. 1. Use the CDN @opdavies

  26. To get the most out of Tailwind, you really should

    install it via npm @opdavies

  27. 2. Installing Tailwind via NPM @opdavies

  28. npm install --save-dev tailwindcss yarn add -D tailwindcss @opdavies

  29. Adding Tailwind to your CSS @opdavies

  30. Including Tailwind /* src/css/tailwind.pcss */ @tailwind base; @tailwind components; @tailwind

    utilities; @opdavies

  31. Adding your own classes /* src/css/tailwind.pcss */ @tailwind base; /*

    Custom base styles */ @tailwind components; /* Custom components */ @tailwind utilities; /* Custom utilities */ @opdavies

  32. Adding your own classes (with layers) /* src/css/tailwind.pcss */ @tailwind

    base; @tailwind components; @tailwind utilities; @layer components { /* Custom components */ } @opdavies

  33. Processing your CSS with the build command @opdavies

  34. npx tailwind build src/css/tailwind.pcss -o dist/app.css @opdavies

  35. .text-left { text-align: left; } .text-center { text-align: center; }

    .text-right { text-align: right; } .text-justify { text-align: justify; } @opdavies

  36. Processing your CSS with Webpack Encore @opdavies

  37. npm install --save-dev @symfony/webpack-encore @opdavies

  38. webpack.config.js let Encore = require('@symfony/webpack-encore') Encore .disableSingleRuntimeChunk() .setOutputPath('dist/') .setPublicPath('/dist') .addStyleEntry('app',

    './src/css/tailwind.pcss') .enablePostCssLoader() module.exports = Encore.getWebpackConfig() @opdavies

  39. postcss.config.js module.exports = { plugins: [ require('tailwindcss') ] } @opdavies

  40. Running Webpack $ npx encore dev Running webpack ... DONE

    Compiled successfully in 1705ms 1 files written to build Entrypoint app [big] = app.css @opdavies

  41. Adding Tailwind to HTML <!DOCTYPE html> <html lang="en"> <head> <meta

    charset="UTF-8" /> <title>My new website</title> <link rel="stylesheet" href="/dist/app.css" /> </head> <body></body> </html> @opdavies

  42. Interaction states hover, focus, active, disabled, visited, group-hover, focus-within, first-child,

    last-child... @opdavies

  43. [state][separator][class] @opdavies

  44. hover:text-red-500 focus:text-red-500 @opdavies

  45. Interaction states in CSS .text-red-500 { color: #f56565; } .hover\:text-red-500:hover

    { color: #f56565; } .focus\:text-red-500:focus { color: #f56565; } @opdavies

  46. Interaction states in HTML <a href="#" class="text-red-500 hover:text-red-800" > Read

    more </a> @opdavies

  47. Default variants // defaultConfig.stub.js variants: { alignContent: ['responsive'], alignItems: ['responsive'],

    alignSelf: ['responsive'], appearance: ['responsive'], backgroundAttachment: ['responsive'], backgroundColor: ['responsive', 'hover', 'focus'], backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], // ... } @opdavies

  48. Responsive @opdavies

  49. [screen][separator][class] @opdavies

  50. Screens (aka breakpoints) // defaultConfig.stub.js screens: { sm: '640px', md:

    '768px', lg: '1024px', xl: '1280px', }, @opdavies

  51. md:flex md:hover:bg-red-500 @opdavies

  52. Responsive classes in CSS .block { display: block; } @media

    (min-width: 640px) { .sm\:block { display: block; } } @opdavies

  53. Responsive classes in HTML <div class="block md:flex"> <div class="w-full md:w-1/2">

    Column 1 </div> <div class="w-full md:w-1/2"> Column 2 </div> </div> @opdavies

  54. Customising Tailwind @opdavies

  55. npx tailwind init @opdavies

  56. tailwind.config.js module.exports = { purge: [], darkMode: false, // or

    'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } @opdavies

  57. Overriding configuration module.exports = { purge: [], darkMode: false, //

    or 'media' or 'class' theme: { colors: { inherit: 'inherit' }, extend: {}, }, // ... } @opdavies

  58. Extending configuration module.exports = { purge: [], darkMode: false, //

    or 'media' or 'class' theme: { extend: { colors: { inherit: 'inherit' } }, }, // ... } @opdavies

  59. Additional options module.exports = { important: true, prefix: '', separator:

    ':', purge: [], darkMode: false, // or 'media' or 'class' theme: { colors: { inherit: 'inherit' }, extend: {}, }, // ... } @opdavies

  60. npx tailwind init --full @opdavies

  61. Keeping Things Small: Controlling the File size @opdavies

  62. Disabling unused variants and core plugins @opdavies

  63. Default variants // tailwind.config.js variants: { alignContent: ['responsive'], alignItems: ['responsive'],

    alignSelf: ['responsive'], appearance: ['responsive'], backgroundAttachment: ['responsive'], backgroundColor: ['responsive', 'hover', 'focus'], // ... } @opdavies

  64. Updated variants // tailwind.config.js variants: { alignContent: ['responsive'], alignItems: ['responsive'],

    - alignSelf: ['responsive'], + alignSelf: false, appearance: ['responsive'], backgroundAttachment: ['responsive'], - backgroundColor: ['responsive', 'hover', 'focus'], + backgroundColor: ['responsive'], @opdavies

  65. Manually removing unused or unwanted classes @opdavies

  66. screens: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px',

    }, colors: { transparent: 'transparent', black: '#000', white: '#fff', gray: { 100: '#f7fafc', 200: '#edf2f7', 300: '#e2e8f0', }, // ... @opdavies

  67. screens: { sm: '640px', md: '768px', lg: '1024px', - xl:

    '1280px', }, colors: { transparent: 'transparent', black: '#000', white: '#fff', gray: { 100: '#f7fafc', - 200: '#edf2f7', - 300: '#e2e8f0', }, // ... @opdavies

  68. Automatically removing unused classes @opdavies

  69. Tailwind + PurgeCSS @opdavies

  70. PurgeCSS configuration module.exports = { purge: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx',

    ], theme: {}, variants: {}, plugins: [], } @opdavies

  71. npx encore dev @opdavies

  72. NODE_ENV=production npx encore prod @opdavies

  73. How I deal with repetition? @opdavies

  74. Avoid repetition by extracting components @opdavies

  75. Does something justify becoming a component? @opdavies

  76. Could the duplication be moved elsewhere? @opdavies

  77. Loops {# base.html.twig #} {% for item in navItems %}

    <a class="block py-3 px-4 text-sm text-gray-800" href="{{ item.url }}" > {{ item.title }} </a> {% endfor %} @opdavies

  78. Includes {# classes.html.twig #} <h2>Adults</h2> {% include 'class-list' with {

    classes: page.classes, type: 'adults', } %} <h2>Kids</h2> {% include 'class-list' with { classes: page.classes, type: 'kids', } %} @opdavies

  79. Extracting CSS components a.btn { @apply text-sm no-underline font-bold; @apply

    rounded-full inline-block px-5 py-2; @apply text-white bg-blue-600; @apply hover:bg-blue-700; } @opdavies

  80. Extracting CSS components a.btn { font-size: 0.875rem; text-decoration: none; font-weight:

    700; border-radius: 9999px; display: inline-block; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: #fff; background-color: #3182ce; } @opdavies

  81. a.btn:hover { background-color: #2b6cb0; } @opdavies

  82. Extending Tailwind CSS with Plugins @opdavies

  83. npm install --save-dev tailwindcss-list-reset @opdavies

  84. Adding a plugin // tailwind.config.js module.exports = { theme: {

    extend: {}, }, plugins: [ require('tailwindcss-list-reset')() ], variants: {}, } @opdavies

  85. Generated CSS .list-reset { list-style: none; padding: 0; } @opdavies

  86. Writing a plugin // index.js module.exports = variants => ({

    addUtilities }) => { addUtilities( { '.list-reset': { listStyle: 'none', padding: 0, }, }, variants, ) } @opdavies

  87. Demo @opdavies

  88. @opdavies

  89. Thanks! References: • https://tailwindcss.com • https://tailwindui.com • https://www.youtube.com/c/TailwindLabs • https://drupal.org/project/tailwindcss

    Me: • https://www.oliverdavies.uk @opdavies