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

Soaring with utility-first CSS and Tailwind

Oliver Davies
February 18, 2021

Soaring with utility-first CSS and Tailwind

Workshop for Florida DrupalCamp.

Oliver Davies

February 18, 2021
Tweet

More Decks by Oliver Davies

Other Decks in Technology

Transcript

  1. Soaring with utility-first
    CSS and Tailwind
    Oliver Davies (@opdavies)

    View Slide

  2. Prerequisites
    • Git
    • PHP
    • Composer
    • npm/yarn
    @opdavies

    View Slide

  3. Before we start
    git clone https://github.com/opdavies/workshop-tailwind-css.git
    cd workshop-tailwind-css
    composer install
    php -S 127.0.0.1:8000 -t public
    @opdavies

    View Slide

  4. @opdavies

    View Slide

  5. What is Tailwind CSS?
    @opdavies

    View Slide

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

    View Slide

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

    View Slide

  8. Tailwind is more than a CSS
    framework, it's an engine for
    creating design systems
    @opdavies

    View Slide

  9. • Text/border/background colours
    • Font size/family/weight
    • Alignment
    • Padding/margin/negative margin
    • Flexbox
    • Positioning
    • Lists
    • z-index
    • Opacity
    @opdavies

    View Slide

  10. • Screenreader visibility
    • Placeholder colour
    • first-child, last-child, nth-child
    • CSS Grid
    • Transition
    • Transform
    • Spacing / Divide
    • Focus ring
    • Text clamping
    @opdavies

    View Slide

  11. @opdavies

    View Slide

  12. @opdavies

    View Slide

  13. @opdavies

    View Slide

  14. Task 1: Adding Tailwind CSS
    @opdavies

    View Slide

  15. # Add Tailwind, PostCSS, Autoprefixer, PostCSS CLI
    yarn add cross-env \
    tailwindcss@latest \
    postcss@latest \
    autoprefixer@latest \
    postcss-cli
    # Generate Tailwind and PostCSS configuration files
    npx tailwindcss init -p
    @opdavies

    View Slide

  16. Create the source file:
    /* assets/css/tailwind.pcss */
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    @opdavies

    View Slide

  17. Add to package.json:
    "scripts": {
    "dev": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css",
    "prod": "cross-env NODE_ENV=production postcss assets/css/tailwind.pcss -o public/build/tailwind.css",
    "watch": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css --watch"
    }
    Add to templates/html.html.twig:

    @opdavies

    View Slide

  18. @opdavies

    View Slide

  19. Task 2: Add text styling
    @opdavies

    View Slide

  20. Before we start
    git add -A
    git commit -m 'Save progress'
    git checkout -b local/2-text-styling origin/task/1-add-tailwind-css
    @opdavies

    View Slide

  21. Adding intro text


    Florida DrupalCamp is an annual conference that brings
    together web developers from all over the world to learn,
    network and discuss web development and the Drupal content
    management system.
    Learn more

    @opdavies

    View Slide

  22. @opdavies

    View Slide



  23. Florida DrupalCamp is an annual conference that brings
    together web developers from all over the world to learn,
    network and discuss web development and the Drupal content
    management system.
    Learn more

    @opdavies

    View Slide

  24. @opdavies

    View Slide




  25. Florida DrupalCamp is an annual conference that brings
    together web developers from all over the world to learn,
    network and discuss web development and the Drupal content
    management system.
    Learn more

    @opdavies

    View Slide




  26. Florida DrupalCamp is an annual conference that brings
    together web developers from all over the world to learn,
    network and discuss web development and the Drupal content
    management system.
    href="#0">Learn more

    @opdavies

    View Slide

  27. @opdavies

    View Slide

  28. Task 3: Add a navbar component
    @opdavies

    View Slide

  29. Before we start
    git add -A
    git commit -m 'Save progress'
    git checkout -b local/3-navbar origin/task/2-intro-text
    @opdavies

    View Slide











  30. Conference
    Sponsors
    Community
    FAQ
    Register




    @opdavies

    View Slide

  31. @opdavies

    View Slide











  32. Conference
    Sponsors
    Community
    FAQ
    Register




    @opdavies

    View Slide

  33. @opdavies

    View Slide











  34. Conference
    Sponsors
    Community
    FAQ
    Register





    @opdavies

    View Slide

  35. @opdavies

    View Slide

  36. Task 4: Change the default
    configuration
    @opdavies

    View Slide

  37. Before we start
    git add -A
    git commit -m 'Save progress'
    git checkout -b local/4-config origin/task/3-navbar
    @opdavies

    View Slide

  38. tailwind.config.js
    1 module.exports = {
    2 // ...
    3
    4 theme: {
    5 fontFamily: {
    6 display: ['Bebas Neue', 'Arial Narrow', 'Arial', 'sans-serif'],
    7 sans: ['Helvetica', 'Arial', 'sans-serif'],
    8 },
    9 colors: {
    10 blue: {
    11 DEFAULT: '#56a9db',
    12 dark: '#1772ae',
    13 },
    14 gray: {
    @opdavies

    View Slide

  39. 15 dark: '#333333',
    16 },
    17 orange: '#fcb040',
    18 white: '#ffffff',
    19 },
    20 extend: {
    21 fontSize: {
    22 '2xl': '1.5625rem', // 25px
    23 '3xl': '1.6875rem', // 27px
    24 },
    25 },
    26 },
    27 }
    @opdavies

    View Slide

  40. Adding the Bebas font
    {# templates/html.html.twig #}
    {% block title %}Tailwind CSS workshop{% endblock %}




    {% block stylesheets %}{% endblock %}
    @opdavies

    View Slide

  41. Updating existing classes
    -
    +
    -
    +
    - + href="#0">
    @opdavies

    View Slide

  42. Updating existing classes
    {# templates/includes/navbar.html.twig #}
    - + @opdavies

    View Slide

  43. @opdavies

    View Slide

  44. Task 5: Refactor - avoid
    duplication using loops
    @opdavies

    View Slide

  45. Before we start
    git add -A
    git commit -m 'Save progress'
    git checkout -b local/5-loops origin/task/4-configuration
    @opdavies

    View Slide

  46. Using a loop
    Community
    FAQ
    href="#0">Register
    @opdavies

    View Slide

  47. Using a loop
    {% for menu_item in menu_items.findAll() %}
    {% set linkClasses = [
    'block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display
    text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark',
    menu_item.is_active ? 'text-white bg-blue'
    ] %}


    {{ menu_item.title }}


    {% endfor %}
    @opdavies

    View Slide

  48. Task 6: Add the video
    component
    @opdavies

    View Slide

  49. Before we start
    git add -A
    git commit -m 'Save progress'
    git checkout -b local/6-video origin/task/5-refactor-menu-item-loop
    @opdavies

    View Slide


  50. poster="https://www.fldrupal.camp/sites/all/themes/fldc17/images/video-poster.jpg"
    preload="auto"
    >
    src="https://www.fldrupal.camp/sites/default/files/FLDC17%20Promo-high.mp4"
    type="video/mp4"
    >


    @opdavies

    View Slide

  51. @opdavies

    View Slide

  52. -
    +
    poster="https://www.fldrupal.camp/sites/all/themes/fldc17/images/video-poster.jpg"
    preload="auto"
    + class="w-full opacity-60"
    >
    src="https://www.fldrupal.camp/sites/default/files/FLDC17%20Promo-high.mp4"
    type="video/mp4"
    >


    @opdavies

    View Slide

  53. @opdavies

    View Slide

  54. Adding the logo

    poster="https://www.fldrupal.camp/sites/all/themes/fldc17/images/video-poster.jpg"
    preload="auto"
    class="w-full opacity-60"
    >
    src="https://www.fldrupal.camp/sites/default/files/FLDC17%20Promo-high.mp4"
    type="video/mp4"
    >

    alt="Florida Drupalcamp Logo">

    @opdavies

    View Slide

  55. @opdavies

    View Slide

  56. Positioning the logo
    -
    +
    - + @opdavies

    View Slide

  57. @opdavies

    View Slide

  58. Adding stars
    class="absolute w-96"
    src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/logo-general.svg"
    alt="Florida Drupalcamp Logo">



    @opdavies

    View Slide

  59. Positioning the stars
    -
    +
    -
    -
    -
    + + src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/stars-1.svg" alt="">
    + + src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/stars-2.svg" alt="">
    + + src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/stars-3.svg" alt="">
    @opdavies

    View Slide

  60. @opdavies

    View Slide

  61. Task 7: Add the sponsors
    component
    @opdavies

    View Slide

  62. git add -A
    git commit -m 'Save progress'
    git checkout -b local/7-sponsors origin/task/6-video
    composer install
    yarn dev
    @opdavies

    View Slide


  63. Sponsors

    {% include 'includes/sponsor-list.html.twig' with {
    title: 'Platinum Sponsors',
    type: 'platinum',
    } only %}
    {% include 'includes/sponsor-list.html.twig' with {
    title: 'Gold Sponsors',
    type: 'gold',
    } only %}


    @opdavies

    View Slide


  64. {{ title }}

    {% for sponsor in sponsors.findByType(type) %}



    {{ sponsor.name }}


    {% endfor %}


    @opdavies

    View Slide

  65. @opdavies

    View Slide

  66. {% set titleClasses = [
    'text-5xl font-display',
    type == 'bronze' ? 'text-bronze',
    type == 'gold' ? 'text-gold',
    type == 'in_kind' ? 'text-blue-dark',
    type == 'platinum' ? 'text-platinum',
    type == 'silver' ? 'text-silver',
    ] %}

    {{ title }}


    {# ... #}

    @opdavies

    View Slide

  67. {% for sponsor in sponsors.findByType(type) %}

    class="flex flex-col items-center justify-center w-64 h-48 p-4 bg-gray-light"
    href="#0"
    >

    class="block w-4/5 max-h-full mx-auto"
    src="{{ sponsor.logo_url }}"
    alt=""
    >

    {{ sponsor.name }}


    {% endfor %}
    @opdavies

    View Slide

  68. @opdavies

    View Slide

  69. Task 8: Make it responsive
    @opdavies

    View Slide

  70. Before we start
    git add -A
    git commit -m 'Save progress'
    git checkout -b local/8-responsive origin/task/7-sponsors
    yarn dev
    @opdavies

    View Slide

  71. {# templates/includes/home/intro-text.html.twig #}
    -
    +
    - + Learn more
    @opdavies

    View Slide

  72. {# templates/includes/navbar.html.twig #}
    - + -
    +
    +
    + + viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    + + d="M4 6h16M4 12h16M4 18h16">
    +
    +
    +
    -
    +
    @opdavies

    View Slide

  73. {# templates/includes/home/sponsor-list.html.twig #}
    -
    - - href="#0">
    +
    +
    @opdavies

    View Slide

  74. Task 9: Configure PurgeCSS
    @opdavies

    View Slide

  75. # yarn dev
    yarn run v1.22.5
    $ cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css
    Done in 2.77s.
    # ls -lh public/build
    total 1.8M
    -rw-r--r-- 1 root root 3.8M Feb 11 12:00 tailwind.css
    @opdavies

    View Slide

  76. # yarn prod
    yarn run v1.22.5
    $ cross-env NODE_ENV=production postcss assets/css/tailwind.pcss -o public/build/tailwind.css
    warn - Tailwind is not purging unused styles because no template paths have been provided.
    warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately
    not removing unused styles, set `purge: false` in your Tailwind config file to silence
    this warning.
    warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    Done in 2.75s.
    @opdavies

    View Slide

  77. Configuring PurgeCSS
    // tailwind.config.js
    {
    - purge: [],
    + purge: {
    + content: ["templates/**/*.twig"]
    + },
    // ...
    }
    @opdavies

    View Slide

  78. # yarn prod
    yarn run v1.22.5
    $ cross-env NODE_ENV=production postcss assets/css/tailwind.pcss -o public/build/tailwind.css
    Done in 2.52s.
    # ls -lh public/build
    total 16K
    -rw-r--r-- 1 root root 12K Feb 11 17:31 tailwind.css
    @opdavies

    View Slide

  79. 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

    View Slide