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
1.8k

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
46
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
150
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
69
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
1k
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
120
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
2.2k
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
680
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
430
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
130

Other Decks in Technology

See All in Technology
40301c0affdf359eaca771713e22b71a?s=48 harshbothra
0
150
A73ed5cefbbd84abd2c5e14a5eb4a339?s=48 ippey
2
210
2c68dc672293cc3f8a7a57d3af86f15b?s=48 koukyo1994
6
1.7k
Db4af41c084fb66f56725d0b3b40fb09?s=48 go5paopao
9
1.7k
8a84268593355816432ceaf78777d585?s=48 dena_tech
3
630
3353b76e1480888ea7a482ebaa883dcb?s=48 robcrowley
1
460
3eb404f4dcac484d6ab897749c9265a8?s=48 kaori_cho
1
210
108409e419edd9c842381bf1f05aa8af?s=48 piazza
0
130
8a84268593355816432ceaf78777d585?s=48 dena_tech
1
770
847a328633b1df6b11cc2f72430025e6?s=48 ks91
PRO
0
150
24312cfba087ce175856b94b0829a3a9?s=48 uzabase_saas_product
0
110
Db4af41c084fb66f56725d0b3b40fb09?s=48 go5paopao
4
540

Featured

See All Featured
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
117
4.9k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
58k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.4k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
260k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
40k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
245cee81a9c424266e5e401d844ea881?s=48 lara
15
2.7k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
328
36k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
652
110k

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