diff --git a/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/1.png b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/1.png
new file mode 100644
index 0000000..d371250
Binary files /dev/null and b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/1.png differ
diff --git a/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/images/1.png b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/images/1.png
new file mode 100644
index 0000000..afbb8ca
Binary files /dev/null and b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/images/1.png differ
diff --git a/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.md b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.md
new file mode 100644
index 0000000..9b45f2f
--- /dev/null
+++ b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.md
@@ -0,0 +1,518 @@
+autoscale: true
+build-lists: true
+theme: Fira, 1
+
+[.hide-footer]
+
+# [fit] _**Taking Flight with**<br>Tailwind CSS_
+
+---
+
+[.build-lists: false]
+
+- Full Stack Web Developer
+- Acquia certified Drupal specialist
+- @opdavies
+- oliverdavies.uk
+
+---
+
+> A Utility-First CSS Framework for Rapid UI Development
+
+^ What is Tailwind?
+
+---
+
+[.build-lists: false]
+
+- Utility CSS class generator
+- PostCSS
+- Configurable
+- Some preprocessor features
+- Can be used in addition to preprocessors
+- Open source
+
+^ Works with plain CSS or any preprocessor
+Can be configured to enable/disable modules, configure colours etc.
+Can use features like variables if using plain CSS.
+
+---
+
+```css
+.title {
+ background-color: #3490DC;
+ color: #FFF;
+ display: block;
+ font-size: 1.5rem;
+ padding: 2rem;
+}
+```
+
+---
+
+```css
+.text-2xl {
+ font-size: 1.5rem;
+}
+
+.bg-blue {
+ background-color: #3490DC;
+}
+
+.text-white {
+ color: #FFF;
+}
+```
+
+---
+
+```html
+<div class="text-2xl bg-blue-dark text-white p-8">
+ <p>Hello, Drupal Bristol!</p>
+</div>
+```
+
+---
+
+
+
+---
+
+## __Installation__
+
+---
+
+## Option 1
+
+```
+https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
+```
+
+---
+
+## Option 2
+
+```bash
+yarn add postcss tailwindcss --save
+
+yarn run tailwind init
+```
+
+^ Install with npm or Yarn
+Run "tailwind init" to generate a default tailwind.js file
+
+---
+
+```js
+// tailwind.js
+
+var colors = {
+ 'transparent': 'transparent',
+
+ 'black': '#222b2f',
+ 'grey-darkest': '#364349',
+ 'grey-darker': '#596a73',
+ 'grey-dark': '#70818a',
+ 'grey': '#9babb4',
+ 'grey-light': '#dae4e9',
+ 'grey-lighter': '#f2f2f2',
+ 'grey-lightest': '#fafcfc',
+ 'white': '#ffffff',
+ ...
+```
+
+---
+
+```js
+// postcss.config.js
+
+module.exports = {
+ plugins: [
+ require('tailwindcss')('./tailwind.js'),
+ require('autoprefixer'),
+ ]
+}
+```
+
+---
+
+```less
+// main.less
+
+@tailwind preflight;
+
+// Any custom styles.
+
+@tailwind utilities;
+```
+
+---
+
+```js
+// webpack.config.js
+
+Encore
+ ...
+ .enableLessLoader()
+ .addStyleEntry('site', './less/main.less')
+ .enablePostCssLoader(function(options) {
+ options.config = {
+ path: 'postcss.config.js'
+ };
+ })
+ ...
+;
+```
+
+^ Using Webpack Encore
+
+---
+
+```html
+<head>
+ <title>Hello, World!</title>
+ <link rel="stylesheet" href="/build/site.css">
+...
+```
+
+---
+
+```
+.text-left {
+ text-align: left;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.text-justify {
+ text-align: justify;
+}
+```
+
+---
+
+```html
+<div class="text-bold text-red bg-blue">
+ Hello, world!
+</div>
+```
+
+---
+
+## __Configuration__
+
+---
+
+```javascript
+// tailwind.js
+
+var colors = {
+ ...
+
+ 'blue-darkest': '#05233b',
+ 'blue-darker': '#103d60',
+ 'blue-dark': '#2779bd',
+ 'blue': '#0678be',
+ 'blue-light': '#6cb2eb',
+ 'blue-lighter': '#bcdefa',
+ 'blue-lightest': '#eff8ff',
+
+ ...
+}
+```
+
+^ Add, change, remove values as needed
+
+---
+
+```js
+screens: {
+ 'sm': '576px',
+ 'md': '768px',
+ 'lg': '992px',
+ 'xl': '1200px',
+}
+```
+
+---
+
+```js
+textSizes: {
+ 'xs': '.75rem', // 12px
+ 'sm': '.875rem', // 14px
+ 'base': '1rem', // 16px
+ 'lg': '1.125rem', // 18px
+ 'xl': '1.25rem', // 20px
+ '2xl': '1.5rem', // 24px
+ '3xl': '1.875rem', // 30px
+ '4xl': '2.25rem', // 36px
+ '5xl': '3rem', // 48px
+}
+```
+
+---
+
+```js
+width: {
+ 'auto': 'auto',
+ 'px': '1px',
+ '1': '0.25rem',
+ '2': '0.5rem',
+ '3': '0.75rem',
+ '4': '1rem',
+ '6': '1.5rem',
+ '8': '2rem',
+ '10': '2.5rem',
+ '12': '3rem',
+ '16': '4rem',
+ '24': '6rem',
+ ...
+}
+```
+
+---
+
+```js
+padding: {
+ 'px': '1px',
+ '0': '0',
+ '1': '0.25rem',
+ '2': '0.5rem',
+ '3': '0.75rem',
+ '4': '1rem',
+ '5': '1.25rem',
+ '6': '1.5rem',
+ '8': '2rem',
+ '16': '4rem',
+}
+```
+
+---
+
+```javascript
+options: {
+ prefix: '',
+ important: false,
+ separator: ':',
+}
+```
+
+^ - Drupal important config
+- By adding a prefix, we don't clash with Drupal's core styles - e.g. ".block"
+
+---
+
+[.build-lists: false]
+
+- Colours (text and background)
+- Font family, size, weight
+- Leading (line height), tracking (letter spacing)
+- Border widths, colours, radius
+- Width, height, min/max width/height
+
+---
+
+[.build-lists: false]
+
+- Padding, margin (positive and negative)
+- Shadows
+- Z-index
+- Opacity
+- SVG fill, stroke
+- Screen sizes (breakpoints)
+
+---
+
+## __States__
+
+### Hover, Focus, Active
+
+---
+
+```css
+.{state}{separator}{class}
+```
+
+---
+
+```twig
+<a class="bg-grey hover:bg-grey-dark focus:bg-grey-dark" href="/">
+ Home
+</a>
+```
+
+---
+
+## __Responsive__
+
+---
+
+```less
+.{screen}{separator}{class}
+```
+
+---
+
+```html
+<div class="block sm:inline-block md:flex lg:block">
+ <p>Hello, World!</p>
+</div>
+```
+
+---
+
+## __Extracting <br>Components__
+
+---
+
+```twig
+{% for item in items %}
+ <a class="block py-3 px-4 text-sm text-grey" href="{{ item.url }}">
+ {{ item.title }}
+ </a>
+{% endfor %}
+```
+
+---
+
+```html
+<a href="inline-block rounded text-sm py-2 px-3 text-white bg-red">
+ Click me!
+</a>
+
+<a href="inline-block rounded text-sm py-2 px-3 text-white bg-green">
+ Click me too!
+</a>
+```
+
+---
+
+```less
+// main.less
+
+.button {
+ .inline-block;
+ .rounded;
+ .text-sm;
+ .py-2;
+ .px-3;
+ .text-white;
+}
+```
+
+---
+
+```css
+# main.css
+
+.button {
+ @apply .inline-block;
+ @apply .rounded;
+ @apply .text-sm;
+ @apply .py-2;
+ @apply .px-3;
+ @apply .text-white;
+}
+```
+
+---
+
+```html
+<a href="button bg-red">
+ Click me!
+</a>
+
+<a href="button bg-green">
+ Click me too!
+</a>
+```
+
+---
+
+```less
+// table.less
+
+.table-responsive {
+ @apply .mb-4 .border .w-full;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.table-responsive table {
+ @apply .mb-0 .border-0 .whitespace-no-wrap;
+}
+
+.table {
+ @apply .w-full .table-collapse;
+}
+
+.table tr:nth-child(odd) {
+ @apply .bg-grey-lightest;
+}
+
+.table tr th {
+ @apply .text-left .p-3 .bg-white;
+}
+
+.table td {
+ @apply .px-3 .py-3 .border-t;
+}
+```
+
+---
+
+## Advantages
+
+- Quick to prototype and make changes
+- Write less CSS
+- More consistency
+- Easy to customise, promote to components
+- Mix and match with normal CSS
+
+^ Do more with browser dev tools
+Only picking from pre-defined colours, widths. No magic numbers.
+Less ramp-up time as using the same framework on different sites.
+Same classes, but no visual similarities like with other frameworks like Bootstrap
+
+---
+
+## Disadvantages
+
+- Extra build tools and steps
+- Lots of classes in markup
+- Large file size by default
+
+^ - Need a build tool (Gulp, Grunt, Webpack) to build CSS
+
+
+---
+
+## For Drupal
+
+- Add a prefix to avoid clashing
+- Enable `important` setting to override existing styles
+- Add classes in templates where possible
+- Use `@apply` to limit the number of templates, to avoid adding classes in PHP code or config (e.g. Views), to style hard-to-reach elements
+
+---
+
+## Resources
+
+- tailwindcss.com
+- tailwindcomponents.com
+- github.com/merchedhq/awesome-tailwindcss
+- youtube.com/adamwathan
+- github.com/opdavies/oliverdavies.uk
+- github.com/phpsw/phpsw-ng
+
+---
+
+## __Thank you__
+
+### @opdavies
diff --git a/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.pdf b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.pdf
new file mode 100644
index 0000000..404deb0
Binary files /dev/null and b/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.pdf differ
diff --git a/taking-flight-with-tailwind-css/abstract.md b/taking-flight-with-tailwind-css/abstract.md
new file mode 100644
index 0000000..d0b6df6
--- /dev/null
+++ b/taking-flight-with-tailwind-css/abstract.md
@@ -0,0 +1,10 @@
+# Taking Flight with Tailwind CSS
+
+An introduction to utility class and component based styling, and how to soar with Tailwind CSS.
+
+Things we’ll cover:
+
+- Advantages and disadvantages to utility based styling and Tailwind.
+- How to install Tailwind and add it to your build process.
+- How to customise Tailwind.
+- How to promote repeating classes into re-usable components.-