Soaring with utility-first CSS and Tailwind

Workshop for Florida DrupalCamp.

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