Restructure, tidy up

source/deploying-drupal-ansible-ansistrano/slides.md

@@ -0,0 +1,538 @@
+theme: poster, 8
+autoscale: true
+build-lists: true
+header-emphasis: #53B0EB
+header: alignment(left)
+text: alignment(left)
+text-emphasis: #53B0EB
+code: Monaco, line-height(1.2)
+
+[.header: alignment(center)]
+
+
+# [fit] Deploying PHP applications
+# [fit] _With Ansible, Ansible Vault and Ansistrano_
+
+---
+
+[.background-color: #FFFFFF]
+[.build-lists: false]
+[.header: #111111]
+[.text: #111111, alignment(left)]
+
+![right 800%](../images/me-phpnw.png)
+
+- Full Stack Web Developer & System Administrator
+- Senior Developer at Microserve
+- Part-time freelancer
+- Acquia certified Drupal 8 Grand Master
+- Drupal 7 & 8 core contributor
+- Symfony, Laravel, Sculpin
+- @opdavies
+- www.oliverdavies.uk
+
+^ Work at Microserve.
+Maintain Drupal modules, PHP CLI tools and libraries
+Blog on my website
+
+---
+
+[.background-color: #FFFFFF]
+[.build-lists: false]
+[.text: #111111, alignment(left)]
+
+![right 100%](../images/microserve-light.png)
+
+- https://microserve.io
+- https://www.drupal.org/microserve
+- https://github.com/microserve-io
+- https://twitter.com/microserveltd
+- https://www.linkedin.com/company/microserve-ltd
+
+---
+
+### _Things we'll be_
+# Looking at
+
+---
+
+[.background-color: #FFFFFF]
+
+
+![10%](images/ansible.png)
+![85%](images/vagrant.png)
+![325%](images/druplicon.png)
+![325%](images/composer.png)
+
+^ Ansible - software provisioning and deployment tool
+Vagrant - used for managing virtual machines. Used instead of a real server
+Drupal
+Composer - required by Drupal 8 to pull in dependencies (e.g. Symfony)
+
+---
+
+1. Ansible crash course
+1. Initial setup and provisioning
+1. Basic deployment setup
+1. Using Ansible Vault for variables
+1. Adding and configuring Ansistrano
+
+---
+
+[.background-color: #FFFFFF]
+[.text: #111111, alignment(left)]
+
+## When should I use this?
+
+* Dedicated hosting: probably has this already
+* Shared hosting: probably not flexible enough
+* VPS or dedicated server
+
+---
+
+### _What is_
+# Ansible?
+
+---
+
+[.background-color: #FFFFFF]
+[.text: #111111]
+[.footer: https://en.wikipedia.org/wiki/Ansible_(software)]
+
+Ansible is _open source software_<br>that automates _software provisioning_, <br>_configuration management_, <br>and _application deployment_.
+
+---
+
+[.background-color: #FFFFFF]
+[.text: #111111, alignment(left)]
+
+![10% right](images/ansible.png)
+
+# What is Ansible?
+
+* YAML
+* Batteries included
+* Executes remote commands
+* Installs software packages
+* Performs deployment steps
+
+---
+
+[.background-color: #FFFFFF]
+[.text: #111111, alignment(left)]
+
+![10% right](images/ansible.png)
+
+# What is Ansible?
+
+* Hosts
+* Commands
+* Playbooks
+* Tasks
+* Roles
+
+---
+
+
+[.background-color: #FFFFFF]
+[.text: #111111, alignment(left)]
+
+![10% right](images/ansible.png)
+
+# Why Ansible?
+
+* Familiar syntax
+* Easily readable
+* No server dependencies
+* Easy to add to an existing project
+* Includes relevant modules (e.g. Composer)
+
+---
+
+### _Ansible_
+# Hosts
+
+---
+
+```ini
+# hosts.ini
+
+[dransible]
+192.168.33.10
+```
+
+---
+
+### _Ansible_
+# Commands
+
+---
+
+```
+ansible all -m ping
+
+ansible all -m command -a 'git pull --chdir=/var/www/app'
+```
+
+---
+
+### _Ansible_
+# [fit] Tasks and Playbooks
+
+---
+
+```yaml
+# playbook.yml
+
+---
+- hosts: all
+
+  tasks:
+    - name: Update the code
+      command: git pull
+        args:
+            chdir: /var/www/app
+```
+
+---
+
+```
+ansible-playbook playbook.yml -i hosts.ini
+```
+
+---
+
+### _Ansible_
+# Roles
+
+^ Collections of tasks, variables and handlers
+
+---
+
+```yaml
+# requirements.yml
+
+---
+- src: geerlingguy.apache
+- src: geerlingguy.composer
+- src: geerlingguy.mysql
+- src: geerlingguy.php
+- src: geerlingguy.php-mysql
+```
+
+---
+
+```
+ansible-galaxy -r ansible/requirements.yml install
+```
+
+---
+
+```yaml
+# playbook.yml
+
+---
+- hosts: all
+
+  roles:
+    - geerlingguy.apache
+    - geerlingguy.mysql
+    - geerlingguy.php
+    - geerlingguy.php-mysql
+    - geerlingguy.composer
+```
+
+^ Role order matters!
+
+---
+
+[.header: alignment(center)]
+
+## Let's take a look <br>at the code
+
+---
+
+### _Basic deployment_
+# Ansible
+
+^ Any questions on Ansible so far?
+
+---
+
+```yaml
+# ansible/provision.yml
+
+tasks:
+  - name: Create a database
+    mysql_db:
+      name: mydatabase
+      state: present
+
+  - name: Add the database user
+    mysql_user:
+      name: drupal
+      password: secret
+      priv: '*.*:ALL'
+      state: present
+```
+
+---
+
+```yaml
+# ansible/deploy.yml
+
+tasks:
+  - name: Creating project directory
+    file:
+      path: /var/www/app
+      state: directory
+
+  - name: Uploading application
+    synchronize:
+      src: "{{ playbook_dir }}/../"
+      dest: /var/www/app
+
+  - name: Installing Composer dependencies
+    composer:
+      command: install
+      working_dir: /var/www/app
+```
+
+---
+
+[.background-color: #FFFFFF]
+[.text: #111111, alignment(left)]
+
+# Disadvantages
+
+* Single point of failure
+* No ability to roll back
+* Sensitive data stored in plain text
+
+---
+
+### _Keeping secrets_
+# Ansible Vault
+
+---
+
+```bash
+ansible-vault create ansible/vault.yml
+```
+
+---
+
+```
+$ANSIBLE_VAULT;1.1;AES256
+36656233323539616336393838396137343939623233393338666530313730373233663263633065
+3133633335316364306366333539613936376239383133330a356365666232623537333730663638
+37393264616134613163663762666464373733663737383039316163336263323538393533323266
+3432346662613438330a386435393432323761386137333736363436386466643031386662353933
+30393631386463313265653862633866663530626439623063393934653235666530656462643135
+39366431353762383434663536663761323565616564336131666339653038326333306433326264
+31623539643166626234663736656337633036323837333137343533386165366531626462643662
+66626631663930626266653937323634366231326537626131663662396335393361336635373736
+3435
+```
+
+---
+
+```yaml
+# ansible/vars/vault.yml
+
+---
+vault_app_db_name: mydatabase
+vault_app_db_user: drupal
+vault_app_db_password: secret
+```
+
+^ Optional, but easier to see where variables are set
+
+---
+
+```yaml
+# ansible/vars/vars.yml
+
+---
+app_db_name: "{{ vault_app_db_name }}"
+app_db_user: "{{ vault_app_db_user }}"
+app_db_password: "{{ vault_app_db_password }}"
+```
+
+---
+
+```yaml
+# ansible/provision.yml
+
+tasks:
+  - name: Create a database
+    mysql_db:
+      name: '{{ app_db_name }}'
+      state: present
+```
+
+---
+
+```bash
+ansible-vault edit ansible/vault.yml
+```
+
+---
+
+### _Better deployments_
+# Ansistrano
+
+---
+
+![full inline](images/ansistrano.png)
+
+^ Just another role, specifically for deployments
+Ansible port of Capistrano
+
+---
+
+[.background-color: #FFFFFF]
+[.text: #111111, alignment(center)]
+
+Capistrano is an open-source tool for running scripts on multiple servers; its main use is deploying web applications. <br><br><br>It automates the process of making a new version of an application available on one or more web servers, including supporting tasks such as changing databases.
+
+---
+
+[.background-color: #FFFFFF]
+[.text: #111111, alignment(left)]
+
+# Features
+
+* Multiple release directories
+* Shared paths and files
+* Customisable
+* Multiple deployment strategies
+* Multi-stage environments
+* Prune old releases
+* Rollbacks
+
+^ rsync, Git, SVN etc
+
+---
+
+```yaml
+# ansible/requirements.yml
+
+---
+...
+- ansistrano.deploy
+- ansistrano.rollback
+```
+
+---
+
+```yaml
+# ansible/deploy.yml
+
+---
+- hosts: all
+
+  roles:
+    - ansistrano.deploy
+```
+
+---
+
+```yaml
+# ansible/deploy.yml
+
+---
+  ...
+  vars:
+    ansistrano_deploy_to: /var/www
+    ansistrano_deploy_via: git
+    ansistrano_git_branch: master
+    ansistrano_git_repo: 'git@github.com:foo/bar.git'
+```
+
+---
+
+```yaml
+# ansible/rollback.yml
+
+---
+- hosts: all
+
+  roles:
+    - ansistrano.rollback
+
+  vars:
+    ansistrano_deploy_to: /var/www
+```
+
+---
+
+### _Customising Ansistrano_
+# Build Hooks
+
+---
+
+[.background-color: #FFFFFF]
+
+![inline 125%](images/ansistrano-flow.png)
+
+---
+
+```yaml
+# ansible/deploy.yml
+
+vars:
+  ...
+  ansistrano_after_symlink_shared_tasks_file: "{{ playbook_dir }}/deploy/after-symlink-shared.yml"
+  ansistrano_after_symlink_tasks_file: "{{ playbook_dir }}/deploy/after-symlink.yml"
+  ansistrano_after_update_code_tasks_file: "{{ playbook_dir }}/deploy/after-update-code.yml"
+
+  release_web_path: "{{ ansistrano_release_path.stdout }}/web"
+  release_drush_path: "{{ ansistrano_release_path.stdout }}/vendor/bin/drush"
+```
+
+---
+
+```yaml
+# ansible/deploy/after-update-code.yml
+
+---
+- name: Install Composer dependencies
+  composer:
+    command: install
+    working_dir: '{{ ansistrano_release_path.stdout }}'
+```
+
+---
+
+```yaml
+# ansible/deploy/after-symlink-shared.yml
+
+---
+- name: Run database updates
+  command: '{{ release_drush_path }} --root {{ release_web_path }} updatedb'
+```
+
+---
+
+```yaml
+# ansible/deploy/after-symlink.yml
+
+---
+- name: Clear Drupal cache
+  command: '{{ release_drush_path }} --root {{ release_web_path }} cache-rebuild'
+```
+
+---
+
+[.header: alignment(center)]
+
+# Questions?
+
+---
+
+[.header: alignment(center)]
+
+# Thanks
+### _@opdavies_
+### _oliverdavies.uk_

source/having-fun-drupal-8-drupalorg-api/notes.md

@@ -0,0 +1,62 @@
+# Having fun with Drupal 8, PHP libraries  Drupal.org API
+
+- Open slides
+- Open Chrome tabs
+- Open PhpStorm for all projects
+- Open Sequel Pro for both DBs
+  + Clear cache tables
+- Start PHP server for each site
+- Start recording
+
+## PHP library
+
+- Show in PhpStorm
+- Show readme with examples
+  + Run test.php
+- Show query classes
+  + Not drupal coding standards (PSR-2)
+  + Explain laravel collections
+- Show entity classes
+- Show tests
+  + Show fake query classes
+- Run tests
+
+## Project statistics
+
+- Show /projects page
+- Show routing
+- Show ProjectController
+  + Using PHP 7 return types
+  + Explain dependency injection
+  + Explain about collection
+  + Explain render array
+  + Show how to change ordering
+- Show ProjectRetriever
+  + More dependency injection
+  + Show services file
+- Show settings form
+- Add another module (Sophie's simple integrations?)
+  + See it loading on projects page
+  + See it cached
+
+## Drupalversary
+
+- Show front page
+- Show block
+- Show block form
+- Show accountretriever
+  + Highlight caching
+  + Services file
+  + Show cached items in the DB
+- Show routing
+- Show UserController
+  + More dependency injection
+  + Services file
+- Show date parser
+  + Show drupalversary model
+- Show adding own username via form
+  + See it cached
+  + Show adding uid via form
+  + See it cached
+- Show Dries' because this year drupalversary has passed
+- Try with attendee ID

source/having-fun-drupal-8-drupalorg-api/slides.txt

@@ -0,0 +1,210 @@
+autoscale: true
+build-lists: true
+footer-style: alignment(left)
+footer: @opdavies | opdavi.es
+header-emphasis: #53B0EB
+header: alignment(left)
+text: alignment(left)
+text-emphasis: #53B0EB
+theme: poster, 8
+
+[.header: alignment(center)]
+
+## Having fun with
+## _Drupal 8_, _PHP libraries_
+## and the _Drupal.org API_
+
+---
+
+[.background-color: #FFFFFF]
+[.build-lists: false]
+[.header: #111111]
+[.text: #111111, alignment(left)]
+
+![right 700%](../images/me-phpnw.png)
+
+- Full stack Web Developer & System Administrator
+- Senior Developer at Microserve
+- Part-time freelancer
+- Acquia certified Drupal 8 Grand Master
+- Drupal core contributor
+- Open source project maintainer
+- opdavies (Drupal.org, GitHub, Twitter)
+- www.oliverdavies.uk
+
+^ Work at Microserve.
+Maintain Drupal modules, PHP CLI tools and libraries
+Talking about some open source project that I've written or in the process of writing.
+
+---
+
+[.header: alignment(center)]
+
+## _Drupal 8 crash course_
+
+### PHP libraries, Unit testing,
+### Composer, Routing, Services,
+### Dependency injection, caching
+
+^ Please feel free to ask questions as we go along!
+
+---
+
+[.header: alignment(center)]
+
+## _Live Demo_ alert!
+
+---
+
+[.hide-footer]
+
+![fit](images/microserve-website.png)
+
+^ In 2018 we rebuilt the Microserve website
+
+---
+
+[.hide-footer]
+
+![fit](images/spatie-website.png)
+
+^ Looking for a way to replicate Spatie's open source page for Drupal
+
+---
+
+### _Did you know that_
+## Drupal.org has an API?
+
+^ We're all familiar with Drupal.org (it's where everyone registered for this event), but did you know D.o has a public API?
+
+---
+
+[.hide-footer]
+
+![fit](images/api-page.png)
+
+---
+
+[.hide-footer]
+
+![fit](images/api-result.png)
+
+---
+
+### _A PHP library for the_
+## Drupal.org API
+
+^ The first thing I built was...
+It's what the Drupal examples are built on top of.
+
+---
+
+- Retrieve _node_ and _user_ data
+- Filter by properties
+- Provides own entity classes
+- Methods for retrieving common properties
+- Reusable
+- Unit tested
+
+^ Re-usable by Drupal 7, Drupal 8, Symfony, Laravel etc
+Testing already covered.
+Demo
+
+---
+
+[.hide-footer]
+
+![fit](images/library-github.png)
+
+---
+
+[.hide-footer]
+
+![fit](images/library-packagist.png)
+
+---
+
+[.hide-footer]
+
+![fit](images/library-travis.png)
+
+---
+
+```bash
+$ composer require opdavies/drupalorg-api-php
+```
+
+---
+
+### _Displaying Drupal.org_
+## project statistics
+
+---
+
+[.text: alignment(left)]
+
+- Inspired by _spatie.be/en/opensource_
+- Displays _downloads_ and _stars_
+- Drupal 8 module
+    + Configuration form to enter project IDs
+    + Queries the API
+    + Displays project information
+    + Retrieved data cached locally
+
+^ Demo
+
+---
+
+[.hide-footer]
+
+![fit](images/do-projects-settings.png)
+
+---
+
+[.hide-footer]
+
+![fit](images/do-projects-page.png)
+
+---
+
+### _When is your_
+## Drupalversary?
+
+---
+
+[.text: alignment(left)]
+
+- When did you register on Drupal.org?
+- Drupal 8 module
+    + Enter a username
+    + Queries the API
+    + Displays information - next Drupalversary _date_ and _number of days_ until, _number of years_ on Drupal.org
+    + Retrieved data cached locally
+
+^ Stored in cache tables, but could use a custom entity?
+Demo
+
+---
+
+[.hide-footer]
+
+![fit](images/drupalversary.png)
+
+---
+
+- opdavi.es/_talks_
+- opdavi.es/_do-library_
+- opdavi.es/_drupalversary_
+- opdavi.es/_do-projects_
+
+---
+
+[.header: alignment(center)]
+
+## Questions?
+
+---
+
+[.header: alignment(center)]
+
+# Thanks

source/taking-flight-with-tailwind-css/images/tailwind.svg

@@ -0,0 +1,10 @@
+<svg class="w-10 h-10 lg:w-12 lg:h-12 block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+                  <title>Tailwind CSS</title>
+                  <path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoMarkGradient)" fill-rule="evenodd"></path>
+                  <defs>
+                    <linearGradient x1="0%" y1="0%" y2="100%" id="logoMarkGradient">
+                      <stop stop-color="#2298BD"></stop>
+                      <stop offset="1" stop-color="#0ED7B5"></stop>
+                    </linearGradient>
+                  </defs>
+                </svg>

source/taking-flight-with-tailwind-css/taking-flight-tailwind-css.md

@@ -0,0 +1,883 @@
+autoscale: true
+theme: Plain Jane, 1
+
+# **Taking Flight with <br>Tailwind CSS**
+
+![40%](images/tailwind.svg)
+
+^ Tailwind CSS is a framework that I've been using for the last year and a half
+Going to be using Tailwind 1.0 which was released recently (May 13th)
+
+---
+
+- PHP and Front End Developer
+- System Administrator
+- Senior Engineer at Inviqa
+- Part-time freelancer
+- Open sourcer
+- @opdavies
+- oliverdavies.uk
+
+![right](../images/me-phpnw.png)
+
+^ Co-organiser of PHP South Wales and DrupalCamp Bristol
+
+---
+
+![125%](images/techs.png)
+
+---
+
+# **What is Tailwind CSS?**
+
+---
+
+[.footer: tailwindcss.com]
+
+# A **utility-first** CSS framework for rapidly building **custom designs**.
+
+^ CSS utility class generator
+PostCSS
+Make different looking sites using the same class names
+No "Tailwind looking site" like there is with Bootstrap
+
+---
+
+[.footer: tailwindcss.com]
+
+# Tailwind CSS is a **highly customizable**, **low-level** CSS framework
+
+^ No components like Bootstrap or Bulma
+Configure it per project
+Extendable if needed via additional plugins
+Avoids the need to name things prematurely
+Can extract components if needed (reusability)
+
+---
+
+[.footer: tailwindcss.com/docs/what-is-tailwind/#designed-to-be-customized]
+
+# Tailwind is more than a CSS framework, it's an engine for <br>**creating design systems**.
+
+^ Good default values provided - colours, fonts, padding, widths
+Designing with constraints. Using inline styles, every value is a magic number. With utilities, you're choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
+
+---
+
+- Text/border/background colours
+- Font size/family/weight
+- Alignment
+- Padding/margin/negative margin
+- Flexbox
+- Positioning
+- Lists
+- z-index
+- Opacity
+- ...
+
+^ All generated from a single, customisable configuration file.
+
+---
+
+![](images/screenshot-laravel-nova.png)
+
+---
+
+![](images/screenshot-send-firefox.png)
+
+---
+
+![](images/screenshot-rebuilding-bartik.png)
+
+---
+
+# **How do I use Tailwind?**
+
+^ From the new tailwindcss.com website
+
+---
+
+# With Tailwind, you style elements <br>by **applying pre-existing classes** directly in your HTML.
+
+---
+
+# Using **utility classes** to build custom designs **without writing CSS**
+
+---
+
+## **Benefits**
+- You aren't wasting time and energy inventing class names
+- Your CSS stops growing
+- Making changes feels safer
+
+^ No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container.
+
+^ Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
+
+^ CSS is global and you never know what you're breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.
+
+---
+
+![500%](images/example/0.png)
+
+---
+
+![500%](images/example/1.png)
+
+^ Add padding with p-6
+
+---
+
+![500%](images/example/2.png)
+
+^ Rounded image - rounded-full
+
+---
+
+![500%](images/example/3.png)
+
+^ Centre image using mx-auto
+
+---
+
+![500%](images/example/4.png)
+
+^ Larger text - text-lg
+
+---
+
+![500%](images/example/5.png)
+
+^ Purple text - text-purple-500
+
+---
+
+![500%](images/example/6.png)
+
+^ Grey text - text-gray-600
+
+---
+
+![500%](images/example/7.png)
+
+^ Centre text - text-center
+
+---
+
+![500%](images/example/8.png)
+
+^ Responsive: enable flexbox on medium screens - md:flex
+
+---
+
+![500%](images/example/9.png)
+
+^ Remove margin around image - md:mx-0
+
+---
+
+![500%](images/example/10.png)
+
+^ Re-align text on medium screens - md:text-left
+
+---
+
+![500%](images/example/11.png)
+
+^ md:mr-6 - add margin to the side of the image on medium screens
+
+---
+
+![500%](images/example/12.png)
+
+^ Increase image size - md:h-24 md:w-24
+
+---
+
+![500%](images/example/13.png)
+
+^ Smaller view
+
+---
+
+# **How do I install Tailwind?**
+
+---
+
+# **1. Use the CDN**
+
+---
+
+[.footer: https://next.tailwindcss.com/docs/installation]
+
+## **https://unpkg.com/tailwindcss/dist/tailwind.min.css**
+
+---
+
+[.footer: https://next.tailwindcss.com/docs/installation]
+
+## **To get the most out of Tailwind, <br>you really should install it via npm.**
+
+^ - You can't customize Tailwind's default theme
+- You can't use any directives like *@apply*, *@variants*, etc.
+- You can't enable features like *group-hover*
+- You can't install third-party plugins
+
+---
+
+## **2. Installing Tailwind via NPM**
+
+---
+
+## `npm install --save-dev` <br>`tailwindcss`
+
+## `yarn add -D tailwindcss`
+
+^ Adds it as a dependency to your package.json file
+
+---
+
+## **Adding Tailwind to your CSS**
+
+---
+
+[.code-highlight: 2-7]
+
+```css
+# src/css/style.css
+
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
+```
+
+---
+
+[.code-highlight: 5,9,13]
+
+```
+# app.css
+
+@tailwind base;
+
+# Custom base styles
+
+@tailwind components;
+
+# Custom components
+
+@tailwind utilities;
+
+# Custom utilities
+```
+
+---
+
+## **Processing your CSS with Tailwind <br>with the build command**
+
+^ Compile the generated CSS
+Pass through PostCSS and Tailwind
+
+---
+
+# `npx tailwind build` <br>`src/css/app.css` <br>`-o dist/css/app.css`
+
+---
+
+```css
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.text-justify {
+    text-align: justify;
+}
+```
+
+---
+
+## **Processing your CSS with Tailwind <br>with Laravel Mix**
+
+---
+
+# `npm install --save-dev laravel-mix`
+
+---
+
+```js
+const mix = require('laravel-mix')
+
+mix.postCss('src/css/app.css', 'dist/css', [
+  require('tailwindcss')()
+])
+```
+
+^ PostCSS - useful if you're including other PostCSS plugins like PostCSS Nested
+
+---
+
+```js
+const mix = require('laravel-mix')
+
+require('laravel-mix-tailwind')
+
+mix.postCss('src/css/app.css', 'dist/css')
+  .tailwind()
+```
+
+---
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>My new website</title>
+    <link rel="stylesheet" href="/dist/css/app.css">
+  </head>
+  <body>
+
+  </body>
+</html>
+```
+
+---
+
+# `npm run dev`
+
+# `npm run watch`
+
+# `npm run prod`
+
+
+---
+
+# **Interaction states**
+## hover, focus, group-hover, focus-within
+
+^ Start to differ from inline styles
+
+---
+
+# `.[state][separator][class]`
+
+^ State = hover, focus, group focus, focus within
+Separator = configurable, colon by default
+Class = the same utility class that you would have used normally
+
+---
+
+# `.hover:text-red-500`
+
+---
+
+```html
+<a href="#" class="text-red-500 hover:text-red-800">
+  Read more
+</a>
+```
+
+---
+
+```css
+.text-red-500 {
+  color: #f56565;
+}
+
+.hover\:text-red-500:hover {
+  color: #f56565;
+}
+
+.focus\:text-red-500:focus {
+  color: #f56565;
+}
+```
+
+---
+
+```js
+// defaultConfig.stub.js
+
+variants: {
+  alignContent: ['responsive'],
+  alignItems: ['responsive'],
+  alignSelf: ['responsive'],
+  appearance: ['responsive'],
+  backgroundAttachment: ['responsive'],
+  backgroundColor: ['responsive', 'hover', 'focus'],
+  backgroundPosition: ['responsive'],
+  backgroundRepeat: ['responsive'],
+  ...
+```
+
+---
+
+# **Responsive**
+
+^ Mobile first
+
+---
+
+# [fit] `.[screen][separator][class]`
+
+---
+
+```js
+// defaultConfig.stub.js
+
+screens: {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+},
+```
+
+---
+
+# `md:flex`
+
+---
+
+```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>
+```
+
+---
+
+```css
+.block {
+  display: block;
+}
+
+@media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:block {
+    display: block;
+  }
+}
+```
+
+---
+
+# **Keeping Things Small: <br>Controlling the File Size**
+
+---
+
+# Disabling unused variants <br>and core plugins
+
+---
+
+```js
+// tailwind.config.js
+
+variants: {
+  alignContent: ['responsive'],
+  alignItems: ['responsive'],
+  alignSelf: ['responsive'],
+  appearance: ['responsive'],
+  backgroundAttachment: ['responsive'],
+  backgroundColor: ['responsive', 'hover', 'focus'],
+```
+
+---
+
+```diff
+// tailwind.config.js
+
+variants: {
+  alignContent: ['responsive'],
+  alignItems: ['responsive'],
+- alignSelf: ['responsive'],
++ alignSelf: false,
+  appearance: ['responsive'],
+  backgroundAttachment: ['responsive'],
+- backgroundColor: ['responsive', 'hover', 'focus'],
++ backgroundColor: ['responsive'],
+```
+
+---
+
+# Manually removing unused or unwanted classes
+
+---
+
+```js
+screens: {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+},
+colors: {
+  transparent: 'transparent',
+
+  black: '#000',
+  white: '#fff',
+
+  gray: {
+    100: '#f7fafc',
+    200: '#edf2f7',
+    300: '#e2e8f0',
+    400: '#cbd5e0',
+    500: '#a0aec0',
+    600: '#718096',
+    700: '#4a5568',
+    800: '#2d3748',
+    900: '#1a202c',
+  },
+```
+
+---
+
+```diff
+screens: {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+- xl: '1280px',
+},
+colors: {
+  transparent: 'transparent',
+
+  black: '#000',
+  white: '#fff',
+
+  gray: {
+    100: '#f7fafc',
+-   200: '#edf2f7',
+    300: '#e2e8f0',
+-   400: '#cbd5e0',
+-   500: '#a0aec0',
+    600: '#718096',
+    700: '#4a5568',
+-   800: '#2d3748',
+    900: '#1a202c',
+  },
+```
+
+^ Needs to be done manually
+
+---
+
+# Automatically removing <br>unused classes
+
+---
+
+# `npm install --save-dev laravel-mix-purgecss`
+
+---
+
+```js
+const mix = require('laravel-mix')
+
+mix.postCss('src/css/site.css', 'dist/css')
+  .purgeCss({
+    folders: ['templates'],
+    extensions: ['html', 'php', 'twig']
+  })
+```
+
+---
+
+[.code-highlight: 1,3,6-9]
+
+```js
+const mix = require('laravel-mix')
+
+require('laravel-mix-purgecss')
+
+mix.postCss('src/css/site.css', 'dist/css')
+  .purgeCss({
+    folders: ['templates'],
+    extensions: ['html', 'php', 'twig']
+  })
+```
+
+^ Can be tricky using Drupal/WordPress as you don't know where the classes could be coming from, no generated output directory
+
+---
+
+# **Avoiding Repetition: <br>Extracting Components**
+
+---
+
+# Does something **justify** <br>becoming a component?
+
+---
+
+# Could the duplication <br>**be moved elsewhere**?
+
+^ Twig partials
+Vue components
+WordPress template parts
+
+---
+
+```twig
+{# 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 %}
+```
+
+^ Using a loop
+
+---
+
+```twig
+{# 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',
+} %}
+```
+
+^ Move the duplicate markup into a partial, so there's only one version
+Pass data in.
+
+---
+
+```css
+a.btn {
+  @apply text-sm no-underline font-bold;
+  @apply rounded-full inline-block px-5 py-2;
+  @apply text-white bg-blue-600;
+}
+
+a.btn:hover {
+  @apply bg-blue-700;
+}
+```
+
+^ Use utilities as mixins
+Copy classes from markup
+Still re-using the same design system and constraints as before
+
+---
+
+```css
+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;
+}
+
+a.btn:hover {
+  background-color: #2b6cb0;
+}
+```
+
+---
+
+# **Customising Tailwind**
+
+---
+
+# `npx tailwind init`
+
+---
+
+```js
+// tailwind.config.js
+
+module.exports = {
+  theme: {
+    extend: {}
+  },
+  plugins: [],
+  variants: {}
+}
+```
+---
+
+[.code-highlight: 5-7]
+
+```js
+// tailwind.config.js
+
+module.exports = {
+  theme: {
+    colors: {
+      inherit: 'inherit'
+    },
+    extend: {}
+  },
+  plugins: [],
+  variants: {}
+}
+```
+
+^ Overrides all colours.
+
+---
+
+[.code-highlight: 5-9]
+
+```js
+// tailwind.config.js
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        inherit: 'inherit'
+      }
+    }
+  },
+  plugins: [],
+  variants: {}
+}
+```
+
+^ Extends Tailwind's default colours
+
+---
+
+[.code-highlight: 1,4-5]
+
+```js
+// tailwind.config.js
+
+module.exports = {
+  prefix: '',
+  important: false,
+  theme: {
+    extend: {}
+  },
+  plugins: [],
+  variants: {}
+}
+```
+
+---
+
+# `npx tailwind init --full`
+
+---
+
+# **Extending Tailwind CSS <br>with Plugins**
+
+---
+
+# `npm install --save-dev tailwindcss-list-reset`
+
+---
+
+[.code-highlight: 7-9]
+
+```js
+// tailwind.config.js
+
+module.exports = {
+  theme: {
+    extend: {}
+  },
+  plugins: [
+    require('tailwindcss-list-reset')()
+  ],
+  variants: {}
+}
+```
+
+---
+
+```css
+.list-reset {
+  list-style: none;
+  padding: 0;
+}
+```
+
+---
+
+```js
+// index.js
+
+module.exports = (variants) => ({ addUtilities }) => {
+  addUtilities({
+    '.list-reset': {
+      listStyle: 'none',
+      padding: 0
+    }
+  }, variants)
+}
+```
+
+---
+
+# **Demo**
+
+---
+
+## **Resources**
+
+- tailwindcss.com
+- tailwindcomponents.com
+- builtwithtailwind.com
+- github.com/aniftyco/awesome-tailwind
+- youtube.com/adamwathan
+- opdavi.es/tailwind-repos
+- opdavi.es/tags/tailwind-css
+
+---
+
+# **Questions?**
+
+---
+
+# **Thanks!**
+# opdavi.es/talks/tailwind
+## _@opdavies_ <br>_oliverdavies.uk_
+
+^ Find this talk at opdavi.es/talks/tailwind
+Follow me on Twitter
+oliverdavies.uk where I blog about PHP, Drupal, Symfony, automated testing, Tailwind etc.
+Subscribe to the RSS feed