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

Taking Flight with Tailwind CSS

Oliver Davies
February 23, 2023

Taking Flight with Tailwind CSS

Oliver Davies

February 23, 2023
Tweet

More Decks by Oliver Davies

Other Decks in Technology

Transcript

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

    for creating design systems @opdavies
  2. • Text/border/background colours • Font size/family/weight • Alignment • Padding/margin/negative

    margin • Flexbox • Positioning • Lists • z-index • Opacity @opdavies
  3. • Screenreader visibility • Placeholder colour • first-child, last-child, nth-child

    • CSS Grid • Transition • Transform • Spacing / Divide • Focus ring • Text clamping @opdavies
  4. Benefits • 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
  5. 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
  6. Interaction states in HTML 1 <a 2 href="#" 3 class="text-red-500

    hover:text-red-800" 4 > 5 Read more 6 </a> @opdavies
  7. Screens (aka breakpoints) 1 // defaultConfig.stub.js 2 3 screens: {

    4 sm: '640px', 5 md: '768px', 6 lg: '1024px', 7 xl: '1280px', 8 }, @opdavies
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. Extracting CSS components 1 a.btn { 2 @apply text-sm no-underline

    font-bold; 3 @apply rounded-full inline-block px-5 py-2; 4 @apply text-white bg-blue-600; 5 6 @apply hover:bg-blue-700; 7 } @opdavies
  15. Extracting CSS components 1 a.btn { 2 font-size: 0.875rem; 3

    text-decoration: none; 4 font-weight: 700; 5 border-radius: 9999px; 6 display: inline-block; 7 padding-left: 1.25rem; 8 padding-right: 1.25rem; 9 padding-top: 0.5rem; 10 padding-bottom: 0.5rem; 11 color: #fff; 12 background-color: #3182ce; 13 } @opdavies
  16. Content Tell Tailwind where it should look for utility classes.

    1 // tailwind.config.js 2 3 module.exports = { 4 mode: "jit", 5 content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], 6 // ... 7 } @opdavies
  17. tailwind.config.js 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = {

    3 content: [], 4 theme: { 5 extend: {}, 6 }, 7 plugins: [], 8 } @opdavies
  18. 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
  19. 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
  20. Including Tailwind 1 /* src/css/tailwind.pcss */ 2 3 @tailwind base;

    4 5 @tailwind components; 6 7 @tailwind utilities; @opdavies
  21. 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
  22. 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
  23. 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
  24. Writing plugins 1 const plugin = require("tailwindcss/plugin"); 2 3 module.exports

    = plugin(function({ addUtilities }) { 4 5 }) 6 @opdavies
  25. 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
  26. 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
  27. 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
  28. Writing plugins Creating a button component: 1 const plugin =

    require("tailwindcss/plugin"); 2 3 module.exports = plugin(({ addComponents, theme }) { 4 5 }); 6 @opdavies
  29. Writing plugins 1 const plugin = require("tailwindcss/plugin"); 2 3 module.exports

    = plugin(({ addComponents, theme }) { 4 let styles = { 5 primary: { 6 default: { 7 backgroundColor: theme("colors.primary.DEFAULT"), 8 border: `2px solid ${theme("colors.primary.dark")}`, 9 borderRadius: "10px", 10 color: theme("colors.white"), 11 cursor: "pointer", 12 padding: `${theme("padding.3")} ${theme("padding.12")}`, 13 }, @opdavies
  30. Writing plugins 1 const plugin = require("tailwindcss/plugin"); 2 3 module.exports

    = plugin(({ addComponents, theme }) { 4 5 // ... 6 7 addComponents({ 8 "#edit-checkout.button": styles.primary.default, 9 "#edit-checkout.button:hover, #edit-checkout.button:focus": 10 styles.primary.hover, 11 }); 12 }); 13 @opdavies
  31. 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
  32. 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
  33. !important 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = {

    3 important: true, 4 content: [], 5 theme: { 6 extend: {}, 7 }, 8 plugins: [], 9 } @opdavies
  34. !important 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = {

    3 important: "#app", 4 content: [], 5 theme: { 6 extend: {}, 7 }, 8 plugins: [], 9 } @opdavies