Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@opdavies

Slide 5

Slide 5 text

What is Tailwind CSS? @opdavies

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@opdavies

Slide 12

Slide 12 text

@opdavies

Slide 13

Slide 13 text

@opdavies

Slide 14

Slide 14 text

Task 1: Adding Tailwind CSS @opdavies

Slide 15

Slide 15 text

# 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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

@opdavies

Slide 19

Slide 19 text

Task 2: Add text styling @opdavies

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@opdavies

Slide 23

Slide 23 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

Slide 24

Slide 24 text

@opdavies

Slide 25

Slide 25 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

Slide 26

Slide 26 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

Slide 27

Slide 27 text

@opdavies

Slide 28

Slide 28 text

Task 3: Add a navbar component @opdavies

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

  • Conference
  • Sponsors
  • Community
  • FAQ
  • Register
@opdavies

Slide 31

Slide 31 text

@opdavies

Slide 32

Slide 32 text

  • Conference
  • Sponsors
  • Community
  • FAQ
  • Register
@opdavies

Slide 33

Slide 33 text

@opdavies

Slide 34

Slide 34 text

  • Conference
  • Sponsors
  • Community
  • FAQ
  • Register
@opdavies

Slide 35

Slide 35 text

@opdavies

Slide 36

Slide 36 text

Task 4: Change the default configuration @opdavies

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Updating existing classes -
+
-

+

- @opdavies

Slide 42

Slide 42 text

Updating existing classes {# templates/includes/navbar.html.twig #} -

Slide 43

Slide 43 text

@opdavies

Slide 44

Slide 44 text

Task 5: Refactor - avoid duplication using loops @opdavies

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Using a loop Community FAQ Register @opdavies

Slide 47

Slide 47 text

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

    Slide 48

    Slide 48 text

    Task 6: Add the video component @opdavies

    Slide 49

    Slide 49 text

    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

    Slide 50

    Slide 50 text

    @opdavies

    Slide 51

    Slide 51 text

    @opdavies

    Slide 52

    Slide 52 text

    -
    +
    @opdavies

    Slide 53

    Slide 53 text

    @opdavies

    Slide 54

    Slide 54 text

    Adding the logo
    Florida Drupalcamp Logo
    @opdavies

    Slide 55

    Slide 55 text

    @opdavies

    Slide 56

    Slide 56 text

    Positioning the logo -
    +
    -

    Slide 57

    Slide 57 text

    @opdavies

    Slide 58

    Slide 58 text

    Adding stars Florida Drupalcamp Logo @opdavies

    Slide 59

    Slide 59 text

    Positioning the stars -
    +
    - - - + + + @opdavies

    Slide 60

    Slide 60 text

    @opdavies

    Slide 61

    Slide 61 text

    Task 7: Add the sponsors component @opdavies

    Slide 62

    Slide 62 text

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

    Slide 63

    Slide 63 text

    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

    Slide 64

    Slide 64 text

    {{ title }}

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

    • {{ sponsor.name }}
      • {% endfor %}
    @opdavies

    Slide 65

    Slide 65 text

    @opdavies

    Slide 66

    Slide 66 text

    {% 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

    Slide 67

    Slide 67 text

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

  • {{ sponsor.name }}
    • {% endfor %} @opdavies

    Slide 68

    Slide 68 text

    @opdavies

    Slide 69

    Slide 69 text

    Task 8: Make it responsive @opdavies

    Slide 70

    Slide 70 text

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

    Slide 71

    Slide 71 text

    {# templates/includes/home/intro-text.html.twig #} -

    +

    - Learn more @opdavies

    Slide 72

    Slide 72 text

    {# templates/includes/navbar.html.twig #} - +
    + + + + + + -
      +
        @opdavies

    Slide 73

    Slide 73 text

    {# templates/includes/home/sponsor-list.html.twig #} -
  • - +
  • + @opdavies

    • Slide 74

    Slide 74 text

    Task 9: Configure PurgeCSS @opdavies

    Slide 75

    Slide 75 text

    # 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

    Slide 76

    Slide 76 text

    # 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

    Slide 77

    Slide 77 text

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

    Slide 78

    Slide 78 text

    # 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

    Slide 79

    Slide 79 text

    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