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

Taking Flight with Tailwind CSS

71c9ebde850996d2533c5df4df2c93c6?s=128

Oliver Davies

February 10, 2021
Tweet

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