diff --git a/taking-flight-with-tailwind-css/README.rst b/taking-flight-with-tailwind-css/README.rst
new file mode 100644
index 0000000..ff65dd5
--- /dev/null
+++ b/taking-flight-with-tailwind-css/README.rst
@@ -0,0 +1,4 @@
+Taking Flight with Tailwind CSS
+###############################
+
+https://www.oliverdavies.uk/talks/taking-flight-tailwind-css
diff --git a/taking-flight-with-tailwind-css/code/1-adding-tailwind-directives.txt b/taking-flight-with-tailwind-css/code/1-adding-tailwind-directives.txt
new file mode 100644
index 0000000..df2c1d6
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/1-adding-tailwind-directives.txt
@@ -0,0 +1,7 @@
+/* src/css/tailwind.pcss */
+
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
\ No newline at end of file
diff --git a/taking-flight-with-tailwind-css/code/10-hover-class-example.txt b/taking-flight-with-tailwind-css/code/10-hover-class-example.txt
new file mode 100644
index 0000000..dd59b24
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/10-hover-class-example.txt
@@ -0,0 +1,6 @@
+
+ Read more
+
diff --git a/taking-flight-with-tailwind-css/code/11-default-variants.txt b/taking-flight-with-tailwind-css/code/11-default-variants.txt
new file mode 100644
index 0000000..634b242
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/11-default-variants.txt
@@ -0,0 +1,13 @@
+// defaultConfig.stub.js
+
+variants: {
+ alignContent: ['responsive'],
+ alignItems: ['responsive'],
+ alignSelf: ['responsive'],
+ appearance: ['responsive'],
+ backgroundAttachment: ['responsive'],
+ backgroundColor: ['responsive', 'hover', 'focus'],
+ backgroundPosition: ['responsive'],
+ backgroundRepeat: ['responsive'],
+ // ...
+}
\ No newline at end of file
diff --git a/taking-flight-with-tailwind-css/code/12-default-screens.txt b/taking-flight-with-tailwind-css/code/12-default-screens.txt
new file mode 100644
index 0000000..27c8c0e
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/12-default-screens.txt
@@ -0,0 +1,8 @@
+// defaultConfig.stub.js
+
+screens: {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+},
diff --git a/taking-flight-with-tailwind-css/code/13-responsive-classes.txt b/taking-flight-with-tailwind-css/code/13-responsive-classes.txt
new file mode 100644
index 0000000..7b4780a
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/13-responsive-classes.txt
@@ -0,0 +1,9 @@
+.block {
+ display: block;
+}
+
+@media (min-width: 640px) {
+ .sm\:block {
+ display: block;
+ }
+}
diff --git a/taking-flight-with-tailwind-css/code/14-responsive-class-example.txt b/taking-flight-with-tailwind-css/code/14-responsive-class-example.txt
new file mode 100644
index 0000000..5d8120e
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/14-responsive-class-example.txt
@@ -0,0 +1,9 @@
+
+
+ Column 1
+
+
+
+ Column 2
+
+
Adults
+{% include 'class-list' with {
+ classes: page.classes,
+ type: 'adults',
+} %}
+
+Kids
+{% include 'class-list' with {
+ classes: page.classes,
+ type: 'kids',
+} %}
diff --git a/taking-flight-with-tailwind-css/code/3-layers.txt b/taking-flight-with-tailwind-css/code/3-layers.txt
new file mode 100644
index 0000000..7e205af
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/3-layers.txt
@@ -0,0 +1,9 @@
+/* src/css/tailwind.pcss */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+ /* Custom components */
+}
\ No newline at end of file
diff --git a/taking-flight-with-tailwind-css/code/4-sample-output.txt b/taking-flight-with-tailwind-css/code/4-sample-output.txt
new file mode 100644
index 0000000..2fd678d
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/4-sample-output.txt
@@ -0,0 +1,15 @@
+.text-left {
+ text-align: left;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.text-justify {
+ text-align: justify;
+}
diff --git a/taking-flight-with-tailwind-css/code/5-webpack-config.txt b/taking-flight-with-tailwind-css/code/5-webpack-config.txt
new file mode 100644
index 0000000..5198354
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/5-webpack-config.txt
@@ -0,0 +1,10 @@
+let Encore = require('@symfony/webpack-encore')
+
+Encore
+ .disableSingleRuntimeChunk()
+ .setOutputPath('dist/')
+ .setPublicPath('/dist')
+ .addStyleEntry('app', './src/css/tailwind.pcss')
+ .enablePostCssLoader()
+
+module.exports = Encore.getWebpackConfig()
diff --git a/taking-flight-with-tailwind-css/code/6-postcss-config.txt b/taking-flight-with-tailwind-css/code/6-postcss-config.txt
new file mode 100644
index 0000000..378bc50
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/6-postcss-config.txt
@@ -0,0 +1,5 @@
+module.exports = {
+ plugins: [
+ require('tailwindcss')
+ ]
+}
diff --git a/taking-flight-with-tailwind-css/code/7-webpack-output.txt b/taking-flight-with-tailwind-css/code/7-webpack-output.txt
new file mode 100644
index 0000000..541bb9e
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/7-webpack-output.txt
@@ -0,0 +1,9 @@
+$ npx encore dev
+
+Running webpack ...
+
+DONE Compiled successfully in 1705ms
+
+1 files written to build
+
+Entrypoint app [big] = app.css
\ No newline at end of file
diff --git a/taking-flight-with-tailwind-css/code/8-html.txt b/taking-flight-with-tailwind-css/code/8-html.txt
new file mode 100644
index 0000000..2e90092
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/8-html.txt
@@ -0,0 +1,9 @@
+
+
+
+
+ My new website
+
+
+
+
\ No newline at end of file
diff --git a/taking-flight-with-tailwind-css/code/9-hover-classes.txt b/taking-flight-with-tailwind-css/code/9-hover-classes.txt
new file mode 100644
index 0000000..52c91d4
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/9-hover-classes.txt
@@ -0,0 +1,11 @@
+.text-red-500 {
+ color: #f56565;
+}
+
+.hover\:text-red-500:hover {
+ color: #f56565;
+}
+
+.focus\:text-red-500:focus {
+ color: #f56565;
+}
diff --git a/taking-flight-with-tailwind-css/code/additional-config-options.txt b/taking-flight-with-tailwind-css/code/additional-config-options.txt
new file mode 100644
index 0000000..05a8034
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/additional-config-options.txt
@@ -0,0 +1,14 @@
+module.exports = {
+ important: true,
+ prefix: '',
+ separator: ':',
+ purge: [],
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ colors: {
+ inherit: 'inherit'
+ },
+ extend: {},
+ },
+ // ...
+}
diff --git a/taking-flight-with-tailwind-css/code/css-apply-after.txt b/taking-flight-with-tailwind-css/code/css-apply-after.txt
new file mode 100644
index 0000000..13064ad
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/css-apply-after.txt
@@ -0,0 +1,17 @@
+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;
+}
diff --git a/taking-flight-with-tailwind-css/code/css-apply-before.txt b/taking-flight-with-tailwind-css/code/css-apply-before.txt
new file mode 100644
index 0000000..4a1d8f2
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/css-apply-before.txt
@@ -0,0 +1,7 @@
+a.btn {
+ @apply text-sm no-underline font-bold;
+ @apply rounded-full inline-block px-5 py-2;
+ @apply text-white bg-blue-600;
+
+ @apply hover:bg-blue-700;
+}
diff --git a/taking-flight-with-tailwind-css/code/extending-colours.txt b/taking-flight-with-tailwind-css/code/extending-colours.txt
new file mode 100644
index 0000000..53a0ec2
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/extending-colours.txt
@@ -0,0 +1,12 @@
+module.exports = {
+ purge: [],
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ extend: {
+ colors: {
+ inherit: 'inherit'
+ }
+ },
+ },
+ // ...
+}
diff --git a/taking-flight-with-tailwind-css/code/override-colours.txt b/taking-flight-with-tailwind-css/code/override-colours.txt
new file mode 100644
index 0000000..658637c
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/override-colours.txt
@@ -0,0 +1,11 @@
+module.exports = {
+ purge: [],
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ colors: {
+ inherit: 'inherit'
+ },
+ extend: {},
+ },
+ // ...
+}
diff --git a/taking-flight-with-tailwind-css/code/plugins-add-plugin.txt b/taking-flight-with-tailwind-css/code/plugins-add-plugin.txt
new file mode 100644
index 0000000..e31ac00
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/plugins-add-plugin.txt
@@ -0,0 +1,11 @@
+// tailwind.config.js
+
+module.exports = {
+ theme: {
+ extend: {},
+ },
+ plugins: [
+ require('tailwindcss-list-reset')()
+ ],
+ variants: {},
+}
diff --git a/taking-flight-with-tailwind-css/code/plugins-generated-css.txt b/taking-flight-with-tailwind-css/code/plugins-generated-css.txt
new file mode 100644
index 0000000..386cde2
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/plugins-generated-css.txt
@@ -0,0 +1,4 @@
+.list-reset {
+ list-style: none;
+ padding: 0;
+}
diff --git a/taking-flight-with-tailwind-css/code/plugins-plugin-source.txt b/taking-flight-with-tailwind-css/code/plugins-plugin-source.txt
new file mode 100644
index 0000000..e24a51f
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/plugins-plugin-source.txt
@@ -0,0 +1,13 @@
+// index.js
+
+module.exports = variants => ({ addUtilities }) => {
+ addUtilities(
+ {
+ '.list-reset': {
+ listStyle: 'none',
+ padding: 0,
+ },
+ },
+ variants,
+ )
+}
diff --git a/taking-flight-with-tailwind-css/code/tailwind-basic-config.txt b/taking-flight-with-tailwind-css/code/tailwind-basic-config.txt
new file mode 100644
index 0000000..62dfdaf
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/tailwind-basic-config.txt
@@ -0,0 +1,11 @@
+module.exports = {
+ purge: [],
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ extend: {},
+ },
+ variants: {
+ extend: {},
+ },
+ plugins: [],
+}
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..2647ab4
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..1d3dc45
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..0cea450
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..6f5f8cf
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..6796aec
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..78862ed
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..33446f5
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..a087040
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..007c7ee
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..0fc76ec
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..8e677f0
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..fbe4648
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..00aac50
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..1494118
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..faa865b
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/od-logo.png b/taking-flight-with-tailwind-css/images/od-logo.png
new file mode 100644
index 0000000..b865d24
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/od-logo.png differ
diff --git a/taking-flight-with-tailwind-css/images/paul-hennell-tweet.png b/taking-flight-with-tailwind-css/images/paul-hennell-tweet.png
new file mode 100644
index 0000000..db3b619
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/paul-hennell-tweet.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-css.png b/taking-flight-with-tailwind-css/images/tailwind-css.png
new file mode 100644
index 0000000..055238a
Binary files /dev/null and b/taking-flight-with-tailwind-css/images/tailwind-css.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/main.style b/taking-flight-with-tailwind-css/main.style
new file mode 100644
index 0000000..aae8f6f
--- /dev/null
+++ b/taking-flight-with-tailwind-css/main.style
@@ -0,0 +1,122 @@
+pageSetup:
+ firstTemplate: coverPage
+ height: 18cm
+ margin-bottom: 0cm
+ margin-gutter: 0cm
+ margin-left: 0cm
+ margin-right: 0cm
+ margin-top: 0cm
+ size: null
+ spacing-footer: 2mm
+ spacing-header: 2mm
+ width: 32cm
+
+pageTemplates:
+ coverPage:
+ # background: images/title.png
+ frames: []
+ [12%, 10%, 76%, 75%]
+ showFooter: false
+ showHeader: false
+
+ titlePage:
+ alignment: TA_CENTER
+ frames: []
+ [8%, 8%, 85%, 65%]
+ showFooter: true
+ showHeader: false
+
+ standardPage:
+ frames: []
+ [3%, 3%, 92%, 92%]
+ showFooter: true
+ showHeader: false
+
+ imagePage:
+ alignment: TA_CENTER
+ frames: []
+ [12%, 10%, 76%, 80%]
+ showFooter: true
+ showHeader: false
+
+ outputPage:
+ frames: []
+ [8%, 10%, 82%, 65%]
+ showFooter: false
+ showHeader: false
+
+linkColor: #24608a
+
+styles:
+ normal:
+ fontSize: 24
+ leading: 32
+ textColor: #383745
+
+ bodytext:
+ alignment: TA_LEFT
+
+ heading:
+ fontSize: 20
+ spaceAfter: 16
+ textColor: #24608a
+
+ title:
+ fontSize: 300%
+ parent: heading
+
+ bullet-list:
+ commands: []
+ [LEFTPADDING, [0, 0], [1, -1], 10]
+ [RIGHTPADDING, [0, 0], [1, -1], 0]
+ [VALIGN, [0, 0], [-1, -1], TOP]
+ colWidths: ["20", null]
+ textColor: #aaaaaa
+
+ bullet-list-item:
+ spaceBefore: 14
+ spaceAfter: 0
+
+ titleslideinfo:
+ alignment: TA_CENTER
+ fontSize: 140%
+ parent: normal
+
+ footer:
+ alignment: TA_RIGHT
+ fontName: stdMono
+ fontSize: 20
+ textColor: #24608a
+ rightIndent: 16
+ spaceBefore: 0
+
+ literal:
+ backColor: #eeeeee
+ fontName: stdMono
+
+ code:
+ backColor: #eeeeee
+ borderWidth: 0
+ fontSize: 20
+ leading: 24
+ parent: literal
+ spaceBefore: 4
+
+ blockquote:
+ parent: normal
+ fontName: stdItalic
+ leading: 36
+
+ attribution:
+ parent: normal
+ textColor: #66666
+
+ centered:
+ alignment: TA_CENTER
+
+ centredtitle:
+ alignment: TA_CENTER
+ fontName: stdBold
+ fontSize: 48
+ leading: 64
+ parent: heading
diff --git a/taking-flight-with-tailwind-css/sections/components.rst b/taking-flight-with-tailwind-css/sections/components.rst
new file mode 100644
index 0000000..86cb7f1
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/components.rst
@@ -0,0 +1,62 @@
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+How I deal with repetition?
+
+.. page::
+
+.. class:: centredtitle
+
+Avoid repetition by extracting components
+
+.. page::
+
+.. class:: centredtitle
+
+Does something justify becoming a component?
+
+.. page::
+
+.. class:: centredtitle
+
+Could the duplication be moved elsewhere?
+
+.. raw:: pdf
+
+ TextAnnotation "Twig partials, Vue components, WordPress template parts."
+
+.. page:: standardPage
+
+Loops
+=====
+
+.. code-block:: twig
+ :include: code/20-loops.txt
+ :linenos:
+
+Includes
+========
+
+.. code-block:: twig
+ :include: code/21-includes.txt
+ :linenos:
+
+.. raw:: pdf
+
+ TextAnnotation "Move the duplicate markup into a partial, so there's only one version. Pass data in."
+
+Extracting CSS components
+=========================
+
+.. code-block:: css
+ :include: code/css-apply-before.txt
+ :linenos:
+
+Extracting CSS components
+=========================
+
+.. code-block:: css
+ :include: code/css-apply-after.txt
+ :linenos:
diff --git a/taking-flight-with-tailwind-css/sections/customising.rst b/taking-flight-with-tailwind-css/sections/customising.rst
new file mode 100644
index 0000000..053896f
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/customising.rst
@@ -0,0 +1,58 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Customising Tailwind
+
+.. page::
+
+.. class:: centredtitle
+
+``npx tailwind init``
+
+.. page:: standardPage
+
+tailwind.config.js
+==================
+
+.. code-block:: javascript
+ :include: code/tailwind-basic-config.txt
+ :linenos:
+
+Overriding configuration
+========================
+
+.. code-block:: javascript
+ :include: code/override-colours.txt
+ :hl_lines: 5 6 7
+ :linenos:
+
+.. raw:: pdf
+
+ TextAnnotation "Overrides all colours."
+
+Extending configuration
+=======================
+
+.. code-block:: javascript
+ :include: code/extending-colours.txt
+ :hl_lines: 5 6 7 8 9
+ :linenos:
+
+.. raw:: pdf
+
+ TextAnnotation "Extends Tailwind's default colours."
+
+Additional options
+==================
+
+.. code-block:: javascript
+ :include: code/additional-config-options.txt
+ :hl_lines: 2 3 4
+ :linenos:
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+``npx tailwind init --full``
diff --git a/taking-flight-with-tailwind-css/sections/file-size.rst b/taking-flight-with-tailwind-css/sections/file-size.rst
new file mode 100644
index 0000000..4f04ec0
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/file-size.rst
@@ -0,0 +1,80 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Keeping Things Small: Controlling the File size
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Disabling unused variants and core plugins
+
+.. page:: standardPage
+
+Default variants
+================
+
+.. code-block:: javascript
+ :include: code/15-variants-before.txt
+ :linenos:
+
+Updated variants
+================
+
+.. code-block:: diff
+ :include: code/16-variants-after.txt
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Manually removing unused or unwanted classes
+
+.. page:: standardPage
+
+.. code-block:: javascript
+ :include: code/17-config-before.txt
+
+.. page::
+
+.. code-block:: diff
+ :include: code/18-config-after.txt
+
+.. raw:: pdf
+
+ TextAnnotation "Needs to be done manually"
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Automatically removing unused classes
+
+.. page::
+
+.. class:: centredtitle
+
+Tailwind + PurgeCSS
+
+.. page:: standardPage
+
+PurgeCSS configuration
+======================
+
+.. code-block:: javascript
+ :include: code/19-purge-config.txt
+ :linenos:
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+``npx encore dev``
+
+.. page::
+
+.. class:: centredtitle
+
+``NODE_ENV=production
+npx encore prod``
diff --git a/taking-flight-with-tailwind-css/sections/installation.rst b/taking-flight-with-tailwind-css/sections/installation.rst
new file mode 100644
index 0000000..3e937f4
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/installation.rst
@@ -0,0 +1,154 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+How do I install Tailwind?
+
+.. page::
+
+.. class:: centredtitle
+
+1\. Use the CDN
+
+|
+
+https://unpkg.com/tailwindcss/dist/tailwind.min.css
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+To get the most out of Tailwind, you really should install it via npm
+
+.. raw:: pdf
+
+ TextAnnotation "You can't customize Tailwind's default theme."
+ TextAnnotation "You can't use any directives like @apply, @variants, etc.."
+ TextAnnotation "You can't enable features like group-hover."
+ TextAnnotation "You can't install third-party plugins."
+
+.. page::
+
+.. class:: centredtitle
+
+2\. Installing Tailwind via NPM
+
+.. page::
+
+.. class:: centredtitle
+
+``npm install --save-dev
+tailwindcss``
+
+.. class:: centredtitle
+
+``yarn add -D tailwindcss``
+
+.. raw:: pdf
+
+ TextAnnotation "Adds it as a dependency to your package.json file"
+
+.. page::
+
+.. class:: centredtitle
+
+Adding Tailwind to your CSS
+
+.. page:: standardPage
+
+Including Tailwind
+==================
+
+.. code-block:: css
+ :include: code/1-adding-tailwind-directives.txt
+ :linenos:
+
+Adding your own classes
+=======================
+
+.. code-block:: css
+ :include: code/2-adding-custom-classes.txt
+ :linenos:
+
+Adding your own classes (with layers)
+=====================================
+
+.. code-block:: css
+ :include: code/3-layers.txt
+ :linenos:
+
+.. raw:: pdf
+
+ TextAnnotation "Automatically places your code in the right position."
+ TextAnnotation "Can be purged if needed."
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Processing your CSS with the build command
+
+.. raw:: pdf
+
+ TextAnnotation "Compile the generated CSS Pass through PostCSS and Tailwind."
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+``npx tailwind build
+src/css/tailwind.pcss
+-o dist/app.css``
+
+.. page:: standardPage
+
+.. code-block:: css
+ :include: code/4-sample-output.txt
+ :linenos:
+
+.. raw:: pdf
+
+ TextAnnotation "Small, low-level, re-usable utility classes."
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Processing your CSS with Webpack Encore
+
+.. page::
+
+.. class:: centredtitle
+
+``npm install --save-dev
+@symfony/webpack-encore``
+
+.. page:: standardPage
+
+webpack.config.js
+=================
+
+.. code-block:: javascript
+ :include: code/5-webpack-config.txt
+
+.. raw:: pdf
+
+ TextAnnotation "PostCSS - useful if you're including other PostCSS plugins like PostCSS Nested"
+
+postcss.config.js
+=================
+
+.. code-block:: javascript
+ :include: code/6-postcss-config.txt
+
+Running Webpack
+===============
+
+.. code-block::
+ :include: code/7-webpack-output.txt
+
+Adding Tailwind to HTML
+=======================
+
+.. code-block:: html
+ :include: code/8-html.txt
diff --git a/taking-flight-with-tailwind-css/sections/interaction-states.rst b/taking-flight-with-tailwind-css/sections/interaction-states.rst
new file mode 100644
index 0000000..dd5766e
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/interaction-states.rst
@@ -0,0 +1,57 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Interaction states
+
+hover, focus, active, disabled, visited,
+group-hover, focus-within,
+first-child, last-child...
+
+.. page::
+
+.. class:: centredtitle
+
+``[state][separator][class]``
+
+.. raw:: pdf
+
+ TextAnnotation "State = hover, focus, group focus, focus within."
+ TextAnnotation "Separator = configurable"
+ TextAnnotation "Colon by default"
+ TextAnnotation "Class = the same utility class that you would have used normally"
+
+.. page::
+
+.. class:: centredtitle
+
+``hover:text-red-500``
+
+|
+
+.. class:: centredtitle
+
+``focus:text-red-500``
+
+.. page:: standardPage
+
+Interaction states in CSS
+=========================
+
+.. code-block:: css
+ :include: code/9-hover-classes.txt
+ :linenos:
+
+Interaction states in HTML
+==========================
+
+.. code-block:: html
+ :include: code/10-hover-class-example.txt
+ :linenos:
+
+Default variants
+================
+
+.. code-block:: javascript
+ :include: code/11-default-variants.txt
+ :linenos:
diff --git a/taking-flight-with-tailwind-css/sections/intro.rst b/taking-flight-with-tailwind-css/sections/intro.rst
new file mode 100644
index 0000000..193575c
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/intro.rst
@@ -0,0 +1,92 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+What is Tailwind CSS?
+
+.. page::
+
+.. class:: centredtitle
+
+A utility-first CSS framework for rapidly building custom designs
+
+.. raw:: pdf
+
+ TextAnnotation "CSS utility class generator."
+ TextAnnotation "PostCSS plugin."
+ TextAnnotation "Make different looking sites using the same class names."
+ TextAnnotation "No 'Tailwind looking site' like there is with Bootstrap."
+
+.. page::
+
+.. class:: centredtitle
+
+Tailwind CSS is a highly customizable, low-level CSS framework
+
+.. raw:: pdf
+
+ TextAnnotation "No components like Bootstrap or Bulma."
+ TextAnnotation "Configure it per project."
+ TextAnnotation "Extendable if needed via additional plugins."
+ TextAnnotation "Avoids the need to name things prematurely."
+ TextAnnotation "Can extract components if needed (reusability)."
+
+.. page::
+
+.. class:: centredtitle
+
+Tailwind is more than a CSS framework, it's an engine for creating design systems
+
+.. raw:: pdf
+
+ TextAnnotation "Good default values provided - colours, fonts, padding, widths"
+ TextAnnotation "Designing with constraints."
+ TextAnnotation "Using inline styles, every value is a magic number."
+ TextAnnotation "With utilities, you're choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs."
+
+.. page:: standardPage
+
+- Text/border/background colours
+- Font size/family/weight
+- Alignment
+- Padding/margin/negative margin
+- Flexbox
+- Positioning
+- Lists
+- z-index
+- Opacity
+
+.. raw:: pdf
+
+ TextAnnotation "Some of the 'original' things that Tailwind would generate classes for."
+
+.. page::
+
+- Screenreader visibility
+- Placeholder colour
+- first-child, last-child, nth-child
+- CSS Grid
+- Transition
+- Transform
+- Spacing / Divide
+- Focus ring
+- Text clamping
+
+.. raw:: pdf
+
+ TextAnnotation "All generated from a single, customisable configuration file."
+
+.. page:: imagePage
+
+.. image:: images/screenshot-laravel-nova.png
+ :width: 23cm
+
+.. page::
+
+.. image:: images/screenshot-send-firefox.png
+ :width: 23cm
+
+.. page::
+
+.. image:: images/screenshot-rebuilding-bartik.png
+ :width: 23cm
diff --git a/taking-flight-with-tailwind-css/sections/plugins.rst b/taking-flight-with-tailwind-css/sections/plugins.rst
new file mode 100644
index 0000000..956771c
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/plugins.rst
@@ -0,0 +1,35 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Extending Tailwind CSS with Plugins
+
+.. page::
+
+.. class:: centredtitle
+
+``npm install --save-dev
+tailwindcss-list-reset``
+
+.. page:: standardPage
+
+Adding a plugin
+===============
+
+.. code-block:: javascript
+ :include: code/plugins-add-plugin.txt
+ :linenos:
+
+Generated CSS
+=============
+
+.. code-block:: css
+ :include: code/plugins-generated-css.txt
+ :linenos:
+
+Writing a plugin
+================
+
+.. code-block:: javascript
+ :include: code/plugins-plugin-source.txt
+ :linenos:
diff --git a/taking-flight-with-tailwind-css/sections/responsive.rst b/taking-flight-with-tailwind-css/sections/responsive.rst
new file mode 100644
index 0000000..7d11486
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/responsive.rst
@@ -0,0 +1,50 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Responsive
+
+.. raw:: pdf
+
+ TextAnnotation "Mobile first by default"
+
+.. page::
+
+.. class:: centredtitle
+
+``[screen][separator][class]``
+
+.. page:: standardPage
+
+Screens (aka breakpoints)
+=========================
+
+.. code-block:: javascript
+ :include: code/12-default-screens.txt
+ :linenos:
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+``md:flex``
+
+|
+
+.. class:: centredtitle
+
+``md:hover:bg-red-500``
+
+.. page:: standardPage
+
+Responsive classes in CSS
+=========================
+
+.. code-block:: css
+ :include: code/13-responsive-classes.txt
+
+Responsive classes in HTML
+==========================
+
+.. code-block:: html
+ :include: code/14-responsive-class-example.txt
diff --git a/taking-flight-with-tailwind-css/sections/usage.rst b/taking-flight-with-tailwind-css/sections/usage.rst
new file mode 100644
index 0000000..b8e9d9a
--- /dev/null
+++ b/taking-flight-with-tailwind-css/sections/usage.rst
@@ -0,0 +1,108 @@
+.. page:: titlePage
+
+.. class:: centredtitle
+
+How do I use Tailwind?
+
+.. page::
+
+.. class:: centredtitle
+
+Style elements by applying pre-existing classes directly in your HTML
+
+.. page::
+
+.. class:: centredtitle
+
+Using utility classes to build custom designs without writing CSS
+
+.. page:: standardPage
+
+Benefits
+========
+
+- You aren't wasting time and energy inventing class names
+- Your CSS stops growing
+- Making changes feels safer
+
+.. raw:: pdf
+
+ TextAnnotation "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."
+ TextAnnotation "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."
+ TextAnnotation "CSS is global and you never know what you're breaking when you make a change."
+ TextAnnotation "Classes in your HTML are local, so you can change them without worrying about something else breaking."
+
+.. page:: imagePage
+
+.. image:: images/example/0.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/1.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/2.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/3.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/4.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/5.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/6.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/7.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/8.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/9.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/10.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/11.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/12.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/13.png
+ :width: 18cm
+
+.. page::
+
+.. image:: images/example/14.png
+ :width: 18cm
diff --git a/taking-flight-with-tailwind-css/slides.rst b/taking-flight-with-tailwind-css/slides.rst
new file mode 100644
index 0000000..1af0edb
--- /dev/null
+++ b/taking-flight-with-tailwind-css/slides.rst
@@ -0,0 +1,59 @@
+.. footer:: @opdavies
+
+Taking Flight with Tailwind CSS
+################################
+
+|
+
+.. class:: titleslideinfo
+
+Oliver Davies (@opdavies)
+
+.. raw:: pdf
+
+ TextAnnotation "I work primarily with Drupal and Symfony."
+ TextAnnotation "I work for Inviqa, but this based on my personal and side projects."
+
+.. page:: imagePage
+
+.. image:: images/techs.png
+ :width: 16cm
+
+.. include:: sections/intro.rst
+.. include:: sections/usage.rst
+.. include:: sections/installation.rst
+.. include:: sections/interaction-states.rst
+.. include:: sections/responsive.rst
+.. include:: sections/customising.rst
+.. include:: sections/file-size.rst
+.. include:: sections/components.rst
+.. include:: sections/plugins.rst
+
+.. page:: titlePage
+
+.. class:: centredtitle
+
+Demo
+
+.. page:: imagePage
+
+.. image:: images/paul-hennell-tweet.png
+ :width: 18cm
+
+.. page:: standardPage
+
+Thanks!
+=======
+
+References:
+
+* https://tailwindcss.com
+* https://tailwindui.com
+* https://www.youtube.com/c/TailwindLabs
+* https://drupal.org/project/tailwindcss
+
+|
+
+Me:
+
+* https://www.oliverdavies.uk