diff --git a/taking-flight-with-tailwind-css/2018-07-31-php-south-wales/slides.md b/taking-flight-with-tailwind-css/2018-07-31-php-south-wales/slides.md
index a54bd48..bbb3adc 100644
--- a/taking-flight-with-tailwind-css/2018-07-31-php-south-wales/slides.md
+++ b/taking-flight-with-tailwind-css/2018-07-31-php-south-wales/slides.md
@@ -5,12 +5,15 @@ header-emphasis: #53B0EB
header: alignment(left)
text: alignment(left)
text-emphasis: #53B0EB
-code: Monaco, line-height(1.2)
+code: line-height(1.2)
[.hide-footer]
[.header: alignment(center)]
-## _Taking Flight with_
Tailwind CSS
+## [fit] _Taking Flight with_
+## [fit] Tailwind CSS
+
+With Oliver Davies
---
@@ -200,10 +203,23 @@ var colors = {
let mix = require('laravel-mix');
-require('laravel-mix-tailwind');
-mix.postCss('build', 'assets/css/app.css')
- .tailwind();
+mix.postCss('build', 'assets/css/app.css', [
+ require('laravel-mix-tailwind')()
+])
+```
+
+---
+
+```js
+// webpack.mix.js
+
+let mix = require('laravel-mix');
+
+
+mix.postCss('build', 'assets/css/app.css', [
+ require('laravel-mix-tailwind')('./tailwind.config.js')
+])
```
---
diff --git a/taking-flight-with-tailwind-css/2018-07-31-php-south-wales/slides3.pdf b/taking-flight-with-tailwind-css/2018-07-31-php-south-wales/slides3.pdf
deleted file mode 100644
index 474d827..0000000
Binary files a/taking-flight-with-tailwind-css/2018-07-31-php-south-wales/slides3.pdf and /dev/null differ
diff --git a/taking-flight-with-tailwind-css/2019-05-18-wordcamp-bristol/slides.pdf b/taking-flight-with-tailwind-css/2019-05-18-wordcamp-bristol/slides.pdf
new file mode 100644
index 0000000..96b113f
Binary files /dev/null and b/taking-flight-with-tailwind-css/2019-05-18-wordcamp-bristol/slides.pdf differ
diff --git a/taking-flight-with-tailwind-css/images/example/0.png b/taking-flight-with-tailwind-css/images/example/0.png
new file mode 100644
index 0000000..5c18c18
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/0.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/1.png b/taking-flight-with-tailwind-css/images/example/1.png
new file mode 100644
index 0000000..0933af5
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/1.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/10.png b/taking-flight-with-tailwind-css/images/example/10.png
new file mode 100644
index 0000000..2a0bde4
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/10.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/11.png b/taking-flight-with-tailwind-css/images/example/11.png
new file mode 100644
index 0000000..534f996
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/11.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/12.png b/taking-flight-with-tailwind-css/images/example/12.png
new file mode 100644
index 0000000..85b310f
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/12.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/13.png b/taking-flight-with-tailwind-css/images/example/13.png
new file mode 100644
index 0000000..9de9e18
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/13.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/14.png b/taking-flight-with-tailwind-css/images/example/14.png
new file mode 100644
index 0000000..af03c5c
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/14.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/2.png b/taking-flight-with-tailwind-css/images/example/2.png
new file mode 100644
index 0000000..cf0fe3f
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/2.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/3.png b/taking-flight-with-tailwind-css/images/example/3.png
new file mode 100644
index 0000000..26233a4
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/3.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/4.png b/taking-flight-with-tailwind-css/images/example/4.png
new file mode 100644
index 0000000..ce168f4
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/4.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/5.png b/taking-flight-with-tailwind-css/images/example/5.png
new file mode 100644
index 0000000..708d35c
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/5.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/6.png b/taking-flight-with-tailwind-css/images/example/6.png
new file mode 100644
index 0000000..3199432
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/6.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/7.png b/taking-flight-with-tailwind-css/images/example/7.png
new file mode 100644
index 0000000..d74bc3c
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/7.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/8.png b/taking-flight-with-tailwind-css/images/example/8.png
new file mode 100644
index 0000000..8c0db33
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/8.png differ
diff --git a/taking-flight-with-tailwind-css/images/example/9.png b/taking-flight-with-tailwind-css/images/example/9.png
new file mode 100644
index 0000000..7b52027
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/example/9.png differ
diff --git a/taking-flight-with-tailwind-css/images/screenshot-laravel-nova.png b/taking-flight-with-tailwind-css/images/screenshot-laravel-nova.png
new file mode 100644
index 0000000..c5864e3
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/screenshot-laravel-nova.png differ
diff --git a/taking-flight-with-tailwind-css/images/screenshot-rebuilding-bartik.png b/taking-flight-with-tailwind-css/images/screenshot-rebuilding-bartik.png
new file mode 100644
index 0000000..bea7ef3
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/screenshot-rebuilding-bartik.png differ
diff --git a/taking-flight-with-tailwind-css/images/screenshot-send-firefox.png b/taking-flight-with-tailwind-css/images/screenshot-send-firefox.png
new file mode 100644
index 0000000..9400658
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/screenshot-send-firefox.png differ
diff --git a/taking-flight-with-tailwind-css/images/tailwind.svg b/taking-flight-with-tailwind-css/images/tailwind.svg
new file mode 100644
index 0000000..920128d
--- /dev/null
+++ b/taking-flight-with-tailwind-css/images/tailwind.svg
@@ -0,0 +1,10 @@
+
diff --git a/taking-flight-with-tailwind-css/images/techs.png b/taking-flight-with-tailwind-css/images/techs.png
new file mode 100644
index 0000000..525ab7a
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/techs.png differ
diff --git a/taking-flight-with-tailwind-css/taking-flight-tailwind-css.md b/taking-flight-with-tailwind-css/taking-flight-tailwind-css.md
new file mode 100644
index 0000000..fe4b516
--- /dev/null
+++ b/taking-flight-with-tailwind-css/taking-flight-tailwind-css.md
@@ -0,0 +1,883 @@
+autoscale: true
+theme: Plain Jane, 1
+
+# **Taking Flight with
Tailwind CSS**
+
+
+
+^ 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
+
+
+
+^ Co-organiser of PHP South Wales and DrupalCamp Bristol
+
+---
+
+
+
+---
+
+# **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
**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.
+
+---
+
+
+
+---
+
+
+
+---
+
+
+
+---
+
+# **How do I use Tailwind?**
+
+^ From the new tailwindcss.com website
+
+---
+
+# With Tailwind, you style elements
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.
+
+---
+
+
+
+---
+
+
+
+^ Add padding with p-6
+
+---
+
+
+
+^ Rounded image - rounded-full
+
+---
+
+
+
+^ Centre image using mx-auto
+
+---
+
+
+
+^ Larger text - text-lg
+
+---
+
+
+
+^ Purple text - text-purple-500
+
+---
+
+
+
+^ Grey text - text-gray-600
+
+---
+
+
+
+^ Centre text - text-center
+
+---
+
+
+
+^ Responsive: enable flexbox on medium screens - md:flex
+
+---
+
+
+
+^ Remove margin around image - md:mx-0
+
+---
+
+
+
+^ Re-align text on medium screens - md:text-left
+
+---
+
+
+
+^ md:mr-6 - add margin to the side of the image on medium screens
+
+---
+
+
+
+^ Increase image size - md:h-24 md:w-24
+
+---
+
+
+
+^ 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,
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`
`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
with the build command**
+
+^ Compile the generated CSS
+Pass through PostCSS and Tailwind
+
+---
+
+# `npx tailwind build`
`src/css/app.css`
`-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
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
+
+
+
+
+ My new website
+
+
+
+
+
+
+```
+
+---
+
+# `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
+
+ Read more
+
+```
+
+---
+
+```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
+
+
+ Column 1
+
+
+
+ Column 2
+
+
Controlling the File Size**
+
+---
+
+# Disabling unused variants
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
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:
Extracting Components**
+
+---
+
+# Does something **justify**
becoming a component?
+
+---
+
+# Could the duplication
**be moved elsewhere**?
+
+^ Twig partials
+Vue components
+WordPress template parts
+
+---
+
+```twig
+{# base.html.twig #}
+
+{% for item in navItems %}
+
+ {{ item.title }}
+
+{% endfor %}
+```
+
+^ Using a loop
+
+---
+
+```twig
+{# classes.html.twig #}
+
+Adults
+
+{% include 'class-list' with {
+ classes: page.classes,
+ type: 'adults',
+} %}
+
+Kids
+
+{% 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
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_
_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