From 639de3a234a527effc3d289985148e439b58d64f Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 22 Feb 2023 23:26:04 +0000
Subject: [PATCH] Updates before nor(DEV):con

---
 .../code/writing-plugin-1.js                  |  24 +
 .../code/writing-plugin-2.js                  |  47 +
 ...opdavies-dark.style => opdavies-dark.yaml} | 191 ++--
 ...davies-light.style => opdavies-light.yaml} | 172 +--
 .../sections/adding-classes.rst               |  44 -
 .../sections/arbitrary-values.rst             |  34 -
 .../sections/components.rst                   |  62 --
 .../sections/customising.rst                  |  55 -
 .../sections/existing-project.rst             |  97 --
 .../sections/file-size.rst                    |  33 -
 .../sections/installation.rst                 |  30 -
 .../sections/interaction-states.rst           |  57 -
 .../sections/intro.rst                        | 131 ---
 .../sections/plugins.rst                      | 104 --
 .../sections/responsive.rst                   |  52 -
 .../sections/usage.rst                        |  74 --
 .../taking-flight-with-tailwind-css.rst       | 991 +++++++++++++++++-
 17 files changed, 1257 insertions(+), 941 deletions(-)
 create mode 100644 taking-flight-with-tailwind-css/code/writing-plugin-1.js
 create mode 100644 taking-flight-with-tailwind-css/code/writing-plugin-2.js
 rename taking-flight-with-tailwind-css/{opdavies-dark.style => opdavies-dark.yaml} (65%)
 rename taking-flight-with-tailwind-css/{opdavies-light.style => opdavies-light.yaml} (64%)
 delete mode 100644 taking-flight-with-tailwind-css/sections/adding-classes.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/arbitrary-values.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/components.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/customising.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/existing-project.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/file-size.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/installation.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/interaction-states.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/intro.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/plugins.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/responsive.rst
 delete mode 100644 taking-flight-with-tailwind-css/sections/usage.rst

diff --git a/taking-flight-with-tailwind-css/code/writing-plugin-1.js b/taking-flight-with-tailwind-css/code/writing-plugin-1.js
new file mode 100644
index 0000000..6ddec47
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/writing-plugin-1.js
@@ -0,0 +1,24 @@
+// Start require plugin
+const plugin = require("tailwindcss/plugin");
+// End require plugin
+
+// Start add function
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function({ addUtilities }) {
+
+})
+// End add function
+
+// Start function contents
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function({ addUtilities }) {
+  addUtilities({
+    '.list-reset': {
+      listStyle: 'none',
+      padding: 0,
+    },
+  })
+})
+// End function contents
diff --git a/taking-flight-with-tailwind-css/code/writing-plugin-2.js b/taking-flight-with-tailwind-css/code/writing-plugin-2.js
new file mode 100644
index 0000000..edbc5ce
--- /dev/null
+++ b/taking-flight-with-tailwind-css/code/writing-plugin-2.js
@@ -0,0 +1,47 @@
+// Start create plugin
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ addComponents, theme }) {
+
+});
+// End create plugin
+
+// Start define styles
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ addComponents, theme }) {
+  let styles = {
+    primary: {
+      default: {
+        backgroundColor: theme("colors.primary.DEFAULT"),
+        border: `2px solid ${theme("colors.primary.dark")}`,
+        borderRadius: "10px",
+        color: theme("colors.white"),
+        cursor: "pointer",
+        padding: `${theme("padding.3")} ${theme("padding.12")}`,
+      },
+
+      hover: {
+        backgroundColor: theme("colors.white"),
+        color: theme("colors.primary.DEFAULT"),
+      },
+    },
+  }
+});
+
+// End define styles
+
+// Start add components
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ addComponents, theme }) {
+
+  // ...
+
+  addComponents({
+    "#edit-checkout.button": styles.primary.default,
+    "#edit-checkout.button:hover, #edit-checkout.button:focus":
+      styles.primary.hover,
+  });
+});
+// End add components
diff --git a/taking-flight-with-tailwind-css/opdavies-dark.style b/taking-flight-with-tailwind-css/opdavies-dark.yaml
similarity index 65%
rename from taking-flight-with-tailwind-css/opdavies-dark.style
rename to taking-flight-with-tailwind-css/opdavies-dark.yaml
index e02b3b1..44b7250 100644
--- a/taking-flight-with-tailwind-css/opdavies-dark.style
+++ b/taking-flight-with-tailwind-css/opdavies-dark.yaml
@@ -1,15 +1,23 @@
-embeddedFonts: []
-  ["Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf"]
-  ["Helvetica.ttf", "Helvetica-Bold.ttf", "Helvetica.ttf", "Helvetica-Bold.ttf"]
+embeddedFonts:
+  - - Inconsolata.ttf
+    - Inconsolata.ttf
+    - Inconsolata.ttf
+    - Inconsolata.ttf
+  - - Helvetica.ttf
+    - Helvetica-Bold.ttf
+    - Helvetica.ttf
+    - Helvetica-Bold.ttf
 
 fontsAlias:
-  fontFont: Helvetica
   fontBold: Helvetica-Bold
+  fontFont: Helvetica
   fontItalic: Helvetica
   fontMono: Inconsolata
   fontMonoBold: Inconsolata
   fontMonoBoldItalic: Inconsolata
   fontMonoItalic: Inconsolata
+  
+linkColor: '#60a5fa'
 
 pageSetup:
   firstTemplate: coverPage
@@ -26,99 +34,84 @@ pageSetup:
 
 pageTemplates:
   coverPage:
-    # background: images/title.png
-    frames: []
-      [12%, 10%, 76%, 75%]
+    background: ../images/bg-dark.png
+    frames:
+      - - 12%
+        - 10%
+        - 76%
+        - 75%
     showFooter: false
     showHeader: false
+ 
+  imagePage:
+    alignment: TA_CENTER
     background: ../images/bg-dark.png
+    frames:
+      - - 3%
+        - 3%
+        - 92%
+        - 92%
+    showFooter: true
+    showHeader: false
+
+  outputPage:
+    background: ../images/bg-dark.png
+    frames:
+      - - 8%
+        - 10%
+        - 82%
+        - 65%
+    showFooter: false
+    showHeader: false
+
+  standardPage:
+    background: ../images/bg-dark.png
+    frames:
+      - - 3%
+        - 3%
+        - 92%
+        - 92%
+    showFooter: true
+    showHeader: false
 
   titlePage:
     alignment: TA_CENTER
-    frames: []
-      [8%, 8%, 85%, 65%]
+    background: ../images/bg-dark.png
+    frames:
+      - - 8%
+        - 8%
+        - 85%
+        - 65%
     showFooter: true
     showHeader: false
-    background: ../images/bg-dark.png
-
-  standardPage:
-    frames: []
-      [3%, 3%, 92%, 92%]
-    showFooter: true
-    showHeader: false
-    background: ../images/bg-dark.png
-
-  imagePage:
-    alignment: TA_CENTER
-    frames: []
-      [3%, 3%, 92%, 92%]
-    showFooter: true
-    showHeader: false
-    background: ../images/bg-dark.png
-
-  outputPage:
-    frames: []
-      [8%, 10%, 82%, 65%]
-    showFooter: false
-    showHeader: false
-    background: ../images/bg-dark.png
-
-linkColor: #60a5fa
 
 styles:
-  normal:
-    fontSize: 24
-    textColor: #ffffff
-
   bodytext:
     alignment: TA_LEFT
 
-  heading:
-    fontName: fontBold
-    fontSize: 20
-    spaceAfter: 16
-    textColor: #60a5fa
-
-  title:
-    fontSize: 300%
-    parent: heading
-
   bullet-list:
-    commands: []
-       [LEFTPADDING, [0, 0], [1, -1], 5]
-       [RIGHTPADDING, [0, 0], [1, -1], 0]
-    colWidths: ["20", null]
-    textColor: #ffffff
+    colWidths:
+      - '20'
+      - null
+    commands:
+      - - LEFTPADDING
+        - - 0
+          - 0
+        - - 1
+          - -1
+        - 5
+      - - RIGHTPADDING
+        - - 0
+          - 0
+        - - 1
+          - -1
+        - 0
+    textColor: '#ffffff'
 
   bullet-list-item:
-    spaceBefore: 18
     spaceAfter: 0
+    spaceBefore: 18
 
-  titleslideinfo:
-    alignment: TA_CENTER
-    fontSize: 140%
-    parent: normal
-
-  footer:
-    alignment: TA_RIGHT
-    fontName: fontMono
-    fontSize: 20
-    textColor: #24608a
-    rightIndent: 16
-    spaceBefore: 0
-
-  literal:
-    backColor: #111111
-    fontName: fontMono
-
-  code:
-    backColor: #111111
-    borderWidth: 0
-    fontSize: 24
-    leading: 26
-    parent: literal
-    spaceBefore: 4
-  
   centred:
     alignment: TA_CENTER
     parent: normal
@@ -129,3 +122,43 @@ styles:
     fontSize: 48
     leading: 64
     parent: heading
+
+  code:
+    backColor: '#111111'
+    borderWidth: 0
+    fontSize: 24
+    leading: 26
+    parent: literal
+    spaceBefore: 4
+
+  footer:
+    alignment: TA_RIGHT
+    fontName: fontMono
+    fontSize: 20
+    rightIndent: 16
+    spaceBefore: 0
+    textColor: '#24608a'
+
+  heading:
+    fontName: fontBold
+    fontSize: 20
+    spaceAfter: 16
+    textColor: '#60a5fa'
+
+  literal:
+    backColor: '#111111'
+    fontName: fontMono
+
+  normal:
+    fontSize: 24
+    textColor: '#ffffff'
+
+  title:
+    fontSize: 300%
+    parent: heading
+
+  titleslideinfo:
+    alignment: TA_CENTER
+    fontSize: 140%
+    parent: normal
+
diff --git a/taking-flight-with-tailwind-css/opdavies-light.style b/taking-flight-with-tailwind-css/opdavies-light.yaml
similarity index 64%
rename from taking-flight-with-tailwind-css/opdavies-light.style
rename to taking-flight-with-tailwind-css/opdavies-light.yaml
index 4eb25f2..563a244 100644
--- a/taking-flight-with-tailwind-css/opdavies-light.style
+++ b/taking-flight-with-tailwind-css/opdavies-light.yaml
@@ -1,16 +1,24 @@
-embeddedFonts: []
-  ["Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf"]
-  ["Helvetica.ttf", "Helvetica-Bold.ttf", "Helvetica.ttf", "Helvetica-Bold.ttf"]
+embeddedFonts:
+  - - Inconsolata.ttf
+    - Inconsolata.ttf
+    - Inconsolata.ttf
+    - Inconsolata.ttf
+  - - Helvetica.ttf
+    - Helvetica-Bold.ttf
+    - Helvetica.ttf
+    - Helvetica-Bold.ttf
 
 fontsAlias:
-  fontFont: Helvetica
   fontBold: Helvetica-Bold
+  fontFont: Helvetica
   fontItalic: Helvetica
   fontMono: Inconsolata
   fontMonoBold: Inconsolata
   fontMonoBoldItalic: Inconsolata
   fontMonoItalic: Inconsolata
 
+linkColor: '#24608a'
+
 pageSetup:
   firstTemplate: coverPage
   height: 18cm
@@ -26,94 +34,79 @@ pageSetup:
 
 pageTemplates:
   coverPage:
-    # background: images/title.png
-    frames: []
-      [12%, 10%, 76%, 75%]
+    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: []
-      [3%, 3%, 92%, 92%]
+    frames:
+      - - 3%
+        - 3%
+        - 92%
+        - 92%
     showFooter: true
     showHeader: false
 
   outputPage:
-    frames: []
-      [8%, 10%, 82%, 65%]
+    frames:
+      - - 8%
+        - 10%
+        - 82%
+        - 65%
     showFooter: false
     showHeader: false
 
-linkColor: #24608a
+  standardPage:
+    frames:
+      - - 3%
+        - 3%
+        - 92%
+        - 92%
+    showFooter: true
+    showHeader: false
+
+  titlePage:
+    alignment: TA_CENTER
+    frames:
+      - - 8%
+        - 8%
+        - 85%
+        - 65%
+    showFooter: true
+    showHeader: false
 
 styles:
-  normal:
-    fontSize: 24
-    textColor: #383745
-
   bodytext:
     alignment: TA_LEFT
 
-  heading:
-    fontName: fontBold
-    fontSize: 20
-    spaceAfter: 16
-    textColor: #24608a
-
-  title:
-    fontSize: 300%
-    parent: heading
-
   bullet-list:
-    commands: []
-       [LEFTPADDING, [0, 0], [1, -1], 5]
-       [RIGHTPADDING, [0, 0], [1, -1], 0]
-    colWidths: ["20", null]
-    textColor: #aaaaaa
+    colWidths:
+      - '20'
+      - null
+    commands:
+      - - LEFTPADDING
+        - - 0
+          - 0
+        - - 1
+          - -1
+        - 5
+      - - RIGHTPADDING
+        - - 0
+          - 0
+        - - 1
+          - -1
+        - 0
+    textColor: '#aaaaaa'
 
   bullet-list-item:
-    spaceBefore: 18
     spaceAfter: 0
+    spaceBefore: 18
 
-  titleslideinfo:
-    alignment: TA_CENTER
-    fontSize: 140%
-    parent: normal
-
-  footer:
-    alignment: TA_RIGHT
-    fontName: fontMono
-    fontSize: 20
-    textColor: #24608a
-    rightIndent: 16
-    spaceBefore: 0
-
-  literal:
-    backColor: white
-    fontName: fontMono
-
-  code:
-    backColor: white
-    borderWidth: 0
-    fontSize: 24
-    leading: 26
-    parent: literal
-    spaceBefore: 0
-  
   centred:
     alignment: TA_CENTER
     parent: normal
@@ -124,3 +117,42 @@ styles:
     fontSize: 48
     leading: 64
     parent: heading
+
+  code:
+    backColor: white
+    borderWidth: 0
+    fontSize: 24
+    leading: 26
+    parent: literal
+    spaceBefore: 0
+
+  footer:
+    alignment: TA_RIGHT
+    fontName: fontMono
+    fontSize: 20
+    rightIndent: 16
+    spaceBefore: 0
+    textColor: '#24608a'
+
+  heading:
+    fontName: fontBold
+    fontSize: 20
+    spaceAfter: 16
+    textColor: '#24608a'
+
+  literal:
+    backColor: white
+    fontName: fontMono
+
+  normal:
+    fontSize: 24
+    textColor: '#383745'
+
+  title:
+    fontSize: 300%
+    parent: heading
+
+  titleslideinfo:
+    alignment: TA_CENTER
+    fontSize: 140%
+    parent: normal
diff --git a/taking-flight-with-tailwind-css/sections/adding-classes.rst b/taking-flight-with-tailwind-css/sections/adding-classes.rst
deleted file mode 100644
index 1ea11a6..0000000
--- a/taking-flight-with-tailwind-css/sections/adding-classes.rst
+++ /dev/null
@@ -1,44 +0,0 @@
-.. class:: centredtitle
-
-Adding Tailwind to your CSS
-
-.. page:: standardPage
-
-Including Tailwind
-==================
-
-.. code-block:: css 
-    :linenos:
-    :include: code/1-adding-tailwind-directives.txt
-
-Adding your own classes
-=======================
-
-.. code-block:: css
-    :linenos:
-    :include: code/2-adding-custom-classes.txt
-
-Adding your own classes (with layers)
-=====================================
-
-.. code-block:: css
-    :linenos:
-    :include: code/3-layers.txt
-
-.. raw:: pdf
-
-    TextAnnotation "Automatically places your code in the right position."
-
-.. raw:: pdf
-
-   PageBreak titlePage
-
-.. class:: centredtitle
-
-``npx tailwind
---input src/css/tailwind.pcss
---output dist/tailwind.css``
-
-.. raw:: pdf
-
-   TextAnnotation "As well as the output file, we need to specify the input file."
diff --git a/taking-flight-with-tailwind-css/sections/arbitrary-values.rst b/taking-flight-with-tailwind-css/sections/arbitrary-values.rst
deleted file mode 100644
index afa77fa..0000000
--- a/taking-flight-with-tailwind-css/sections/arbitrary-values.rst
+++ /dev/null
@@ -1,34 +0,0 @@
-.. Switch to a title page.
-.. raw:: pdf
-
-   PageBreak titlePage
-
-.. class:: centredtitle
-
-Arbitrary values
-
-.. raw:: pdf
-
-   PageBreak
-
-.. class:: centredtitle
-
-``w-[23px] md:w-[250px]``
-``text-[#abc123]``
-
-.. raw:: pdf
-
-   PageBreak
-
-.. class:: centredtitle
-
-``grid-cols-[fit-content(theme(spacing.32))]``
-
-.. raw:: pdf
-
-   PageBreak
-
-.. class:: centredtitle
-
-``lg:[&:nth-child(3)]:hover
-:underline``
diff --git a/taking-flight-with-tailwind-css/sections/components.rst b/taking-flight-with-tailwind-css/sections/components.rst
deleted file mode 100644
index 3821fc7..0000000
--- a/taking-flight-with-tailwind-css/sections/components.rst
+++ /dev/null
@@ -1,62 +0,0 @@
-
-.. 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 
-    :linenos:
-    :include: code/20-loops.txt
-
-Includes
-========
-
-.. code-block:: twig 
-    :linenos:
-    :include: code/21-includes.txt
-
-.. 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 
-    :linenos:
-    :include: code/css-apply-before.txt
-
-Extracting CSS components
-=========================
-
-.. code-block:: css 
-    :linenos:
-    :include: code/css-apply-after.txt
diff --git a/taking-flight-with-tailwind-css/sections/customising.rst b/taking-flight-with-tailwind-css/sections/customising.rst
deleted file mode 100644
index 2efe9d9..0000000
--- a/taking-flight-with-tailwind-css/sections/customising.rst
+++ /dev/null
@@ -1,55 +0,0 @@
-.. 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
-   :linenos:
-   :hl_lines: 5 6 7
-
-.. raw:: pdf
-
-    TextAnnotation "Overrides all colours."
-
-Extending configuration
-=======================
-
-.. code-block:: javascript
-   :linenos:
-   :include: code/extending-colours.txt
-   :hl_lines: 5 6 7 8 9
-
-.. raw:: pdf
-
-    TextAnnotation "Extends Tailwind's default colours."
-
-.. page:: titlePage
-
-.. class:: centredtitle
-
-``npx tailwind init --full``
-
-.. raw:: pdf
-
-   PageBreak titlePage
diff --git a/taking-flight-with-tailwind-css/sections/existing-project.rst b/taking-flight-with-tailwind-css/sections/existing-project.rst
deleted file mode 100644
index bc5c682..0000000
--- a/taking-flight-with-tailwind-css/sections/existing-project.rst
+++ /dev/null
@@ -1,97 +0,0 @@
-.. raw:: pdf
-
-   PageBreak titlePage
-
-.. class:: centredtitle
-
-Adding Tailwind CSS to an existing project
-
-
-.. raw:: pdf
-
-   PageBreak standardPage
-
-Disabling the reset styles
-==========================
-
-.. code-block:: javascript
-   :linenos:
-   :hl_lines: 7 8 9
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      content: [],
-      theme: {
-        extend: {},
-      },
-      corePlugins: {
-        preflight: false,
-      },
-      plugins: [],
-    }
-
-Prefixing class names
-=====================
-
-Turn classes like ``flex`` into ``tw-flex``.
-
-|
-
-.. code-block:: javascript
-   :linenos:
-   :hl_lines: 3
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      prefix: "tw-",
-      content: [],
-      theme: {
-        extend: {},
-      },
-      plugins: [],
-    }
-
-!important
-==========
-
-.. code-block:: javascript
-   :linenos:
-   :hl_lines: 3
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      important: true,
-      content: [],
-      theme: {
-        extend: {},
-      },
-      plugins: [],
-    }
-
-!important
-==========
-
-.. code-block:: javascript
-   :linenos:
-   :hl_lines: 3
-
-    /** @type {import('tailwindcss').Config} */
-    module.exports = {
-      important: "#app",
-      content: [],
-      theme: {
-        extend: {},
-      },
-      plugins: [],
-    }
-
-!important
-==========
-
-|
-
-|
-
-.. class:: centredtitle
-
-``!flex``
diff --git a/taking-flight-with-tailwind-css/sections/file-size.rst b/taking-flight-with-tailwind-css/sections/file-size.rst
deleted file mode 100644
index 7529da3..0000000
--- a/taking-flight-with-tailwind-css/sections/file-size.rst
+++ /dev/null
@@ -1,33 +0,0 @@
-.. page:: titlePage
-
-.. class:: centredtitle
-
-Keeping Things Small: Controlling the file size
-
-.. page:: titlePage
-
-.. class:: centredtitle
-
-Just in Time (JIT mode)
-
-.. raw:: pdf
-
-   TextAnnotation "Since the JIT mode was added and changed to be the default option, Tailwind only generates the classes that it needs to - i.e. only the classes in your HTML."
-
-.. page:: standardPage
-
-Content
-=======
-
-Tell Tailwind where it should look for utility classes.
-
-|
-
-
-.. code-block:: javascript
-    :linenos:
-    :include: code/tailwind-config-content.js
-
-.. raw:: pdf
-
-   TextAnnotation "Tailwind will scan the files within the content array and "
diff --git a/taking-flight-with-tailwind-css/sections/installation.rst b/taking-flight-with-tailwind-css/sections/installation.rst
deleted file mode 100644
index b6e246d..0000000
--- a/taking-flight-with-tailwind-css/sections/installation.rst
+++ /dev/null
@@ -1,30 +0,0 @@
-.. page:: titlePage
-
-.. class:: centredtitle
-
-Installation and Usage
-
-.. page::
-
-.. class:: centredtitle
-
-``npm install --save-dev
-tailwindcss``
-
-.. raw:: pdf
-
-    TextAnnotation "There is a CDN version available that provides everything but you can't customise it."
-    TextAnnotation "There's also the play.tailwindcss.com website that you can use."
-    TextAnnotation "Adds it as a dependency to your package.json file"
-
-.. page::
-
-.. class:: centredtitle
-
-``npx tailwind
---content **/*.html
---output build/tailwind.css``
-
-.. raw:: pdf
-
-   TextAnnotation "tailwind.config.js is optional, and an input file is optional."
diff --git a/taking-flight-with-tailwind-css/sections/interaction-states.rst b/taking-flight-with-tailwind-css/sections/interaction-states.rst
deleted file mode 100644
index 4f94f6d..0000000
--- a/taking-flight-with-tailwind-css/sections/interaction-states.rst
+++ /dev/null
@@ -1,57 +0,0 @@
-.. page:: titlePage
-
-.. class:: centredtitle
-
-Interaction states
-
-
-.. raw:: pdf
-
-   PageBreak
-
-.. class:: centredtitle
-
-``hover, focus, active, disabled, visited,
-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:
diff --git a/taking-flight-with-tailwind-css/sections/intro.rst b/taking-flight-with-tailwind-css/sections/intro.rst
deleted file mode 100644
index 4c7abb1..0000000
--- a/taking-flight-with-tailwind-css/sections/intro.rst
+++ /dev/null
@@ -1,131 +0,0 @@
-.. 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 customisable, 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
-
-    PageBreak titlePage
-    TextAnnotation "All generated from a single, customisable configuration file."
-
-.. class:: centredtitle
-
-``block
-inline
-flex
-grid``
-
-.. raw:: pdf
-
-   PageBreak
-   TextAnnotation "A class that toggles a single CSS property."
-
-
-.. class:: centredtitle
-
-``text-sm
-text-base
-text-lg
-text-xl
-text-2xl``
-
-.. raw:: pdf
-
-    PageBreak
-    TextAnnotation "T-shirt size arguments."
-
-.. class:: centredtitle
-
-``text-blue-50
-text-blue-100
-text-blue-200
-text-blue-300
-text-blue-400
-text-blue-500``
-
-.. raw:: pdf
-
-    PageBreak imagePage
-    TextAnnotation "Arguments for text colour and shade."
-
-.. 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
deleted file mode 100644
index 8308fca..0000000
--- a/taking-flight-with-tailwind-css/sections/plugins.rst
+++ /dev/null
@@ -1,104 +0,0 @@
-.. 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
-    :linenos:
-    :include: code/plugins-add-plugin.txt
-
-Generated CSS
-=============
-
-.. code-block:: css
-   :linenos:
-   :include: code/plugins-generated-css.txt
-
-Writing plugins
-===============
-
-.. code-block:: javascript 
-   :linenos:
-   :include: code/plugins-plugin-source.txt
-
-Writing plugins
-===============
-
-Adding `child` and `child-hover` variants:
-
-|
-
-.. code-block:: javascript 
-   :linenos:
-
-   const plugin = require('tailwindcss/plugin');
-
-   module.exports = plugin(({ addVariant }) => {
-     addVariant('child', '& > *');
-     addVariant('child-hover', '& > *:hover');
-   });
-
-Writing plugins
-===============
-
-Adding a `hocus` variant:
-
-|
-
-.. code-block:: javascript 
-   :linenos:
-
-   const plugin = require('tailwindcss/plugin');
-
-   module.exports = plugin(({ addVariant }) => {
-     addVariant('hocus', ['&:hover', '&:focus']);
-   });
-
-Writing plugins
-===============
-
-Creating a button component:
-
-|
-
-.. code-block:: javascript 
-    :linenos:
-
-    plugin(function ({ addComponents, theme }) {
-      let styles = {
-        primary: {
-          default: {
-            backgroundColor: theme("colors.primary.DEFAULT"),
-            border: `2px solid ${theme("colors.primary.dark")}`,
-            borderRadius: "10px",
-            color: theme("colors.white"),
-            cursor: "pointer",
-            padding: `${theme("padding.3")} ${theme("padding.12")}`,
-          },
-
-          hover: {
-            backgroundColor: theme("colors.white"),
-            color: theme("colors.primary.DEFAULT"),
-          },
-        },
-      }
-
-      addComponents({
-        "#edit-checkout.button": styles.primary.default,
-        "#edit-checkout.button:hover, #edit-checkout.button:focus":
-          styles.primary.hover,
-      })
-    })
diff --git a/taking-flight-with-tailwind-css/sections/responsive.rst b/taking-flight-with-tailwind-css/sections/responsive.rst
deleted file mode 100644
index 04bf9d3..0000000
--- a/taking-flight-with-tailwind-css/sections/responsive.rst
+++ /dev/null
@@ -1,52 +0,0 @@
-.. 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
-    :linenos:
-    :include: code/12-default-screens.txt
-
-.. page:: titlePage
-
-.. class:: centredtitle
-
-``md:flex``
-
-|
-
-.. class:: centredtitle
-
-``md:hover:bg-red-500``
-
-.. page:: standardPage
-
-Responsive classes in CSS
-=========================
-
-.. code-block:: css
-    :linenos:
-    :include: code/13-responsive-classes.txt
-
-Responsive classes in HTML
-==========================
-
-.. code-block:: html
-    :linenos:
-    :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
deleted file mode 100644
index e5476a2..0000000
--- a/taking-flight-with-tailwind-css/sections/usage.rst
+++ /dev/null
@@ -1,74 +0,0 @@
-.. 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 don't waste time and energy inventing class names.
-- No switching between CSS and HTML files.
-- Your CSS stops growing.
-- Making changes feels (and is) 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
diff --git a/taking-flight-with-tailwind-css/taking-flight-with-tailwind-css.rst b/taking-flight-with-tailwind-css/taking-flight-with-tailwind-css.rst
index c206031..4066051 100644
--- a/taking-flight-with-tailwind-css/taking-flight-with-tailwind-css.rst
+++ b/taking-flight-with-tailwind-css/taking-flight-with-tailwind-css.rst
@@ -11,40 +11,993 @@ Oliver Davies (@opdavies)
 
 .. raw:: pdf
 
-    TextAnnotation "I'll be talking about Tailwind CSS, which is a CSS framework that I've been using and I was an early adopter of."
-    TextAnnotation ""
-    TextAnnotation "Version 0.1.0 was tagged in November 2017, my first talk was January 2018, version 1.0.0 was released in May 2019."
+    TextAnnotation "I'll be talking about utility class styling and Tailwind CSS, which is a CSS framework that I've been using and I was an early adopter of."
     TextAnnotation ""
     TextAnnotation "I'm always updating the talk every time I give it as things change in the framework and ecosystem."
 
-.. page:: imagePage
+.. Switch to an image page.
+.. raw:: pdf
+
+  PageBreak imagePage
 
 .. image:: images/techs.png
     :width: 16cm 
 
 .. raw:: pdf
 
-    TextAnnotation "I work primarily with Drupal and Symfony."
+    TextAnnotation "I'm a Full Stack Software Developer. I work primarily with PHP and JavaScript, and specifically Drupal, Symfony and Vue.js."
+    TextAnnotation "I can use Tailwind CSS on all of these projects."
 
-.. include:: sections/intro.rst
-.. include:: sections/usage.rst
-.. include:: sections/installation.rst
-.. include:: sections/interaction-states.rst
-.. include:: sections/responsive.rst
-.. include:: sections/arbitrary-values.rst
-.. include:: sections/components.rst
-.. include:: sections/file-size.rst
-.. include:: sections/customising.rst
-.. include:: sections/adding-classes.rst
-.. include:: sections/plugins.rst
-.. include:: sections/existing-project.rst
+.. Switch to a title page.
+.. raw:: pdf
 
-.. page:: imagePage
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+What is Tailwind CSS?
+
+.. raw:: pdf
+
+   PageBreak
+
+.. class:: centredtitle
+
+A utility-first CSS framework for rapidly building custom designs
+
+.. raw:: pdf
+
+    TextAnnotation "CSS utility class generator."
+    TextAnnotation ""
+    TextAnnotation "PostCSS plugin."
+    TextAnnotation ""
+    TextAnnotation "Make different looking sites using the same class names."
+    TextAnnotation "No 'Tailwind looking site' like there is with Bootstrap."
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+Tailwind CSS is a highly customisable, 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)."
+
+.. raw:: pdf
+
+  PageBreak
+
+.. 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."
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak 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."
+
+.. raw:: pdf
+
+  PageBreak
+
+- Screenreader visibility
+- Placeholder colour
+- first-child, last-child, nth-child
+- CSS Grid
+- Transition
+- Transform
+- Spacing / Divide
+- Focus ring
+- Text clamping
+
+.. raw:: pdf
+
+    PageBreak titlePage
+    TextAnnotation "All generated from a single, customisable configuration file."
+
+.. class:: centredtitle
+
+``block
+inline
+flex
+grid``
+
+.. raw:: pdf
+
+   PageBreak
+
+   TextAnnotation "Instead of component-level classes like 'navbar' and 'card', we have classes like 'block', 'inline', 'flex' and 'grid' that describe what an element looks like and not what it is."
+   TextAnnotation ""
+   TextAnnotation "A class that toggles a single CSS property."
+
+
+.. class:: centredtitle
+
+``text-sm
+text-base
+text-lg
+text-xl
+text-2xl``
+
+.. raw:: pdf
+
+    PageBreak
+    TextAnnotation "T-shirt size arguments."
+
+.. class:: centredtitle
+
+``text-blue-50
+text-blue-100
+text-blue-200
+text-blue-300
+text-blue-400
+text-blue-500``
+
+.. raw:: pdf
+
+    PageBreak imagePage
+    TextAnnotation "Arguments for text colour and shade."
+
+.. image:: images/screenshot-laravel-nova.png
+    :width: 23cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/screenshot-send-firefox.png
+    :width: 23cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/screenshot-rebuilding-bartik.png
+    :width: 23cm
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+How to use Tailwind
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+Style elements by applying pre-existing classes directly in your HTML
+
+.. raw:: pdf
+
+   TextAnnotation "Instead of switching back and forth between HTML and CSS files, styling is done within the HTML markup by applying existing classes."
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+Using utility classes to build custom designs without writing CSS
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak standardPage
+
+Benefits
+========
+
+- You don't waste time and energy inventing class names.
+- No switching between CSS and HTML files.
+- Your CSS stops growing.
+- Reusability.
+- Making changes feels (and is) 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 ""
+    TextAnnotation "You can re-use components like a news card on events page as the classes aren't coupled to a specific component."
+    TextAnnotation ""
+    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."
+
+.. Switch to an image page.
+.. raw:: pdf
+
+  PageBreak imagePage
+
+.. image:: images/example/0.png
+    :width: 18cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/example/1.png
+    :width: 18cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/example/2.png
+    :width: 18cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/example/3.png
+    :width: 18cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/example/4.png
+    :width: 18cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/example/5.png
+    :width: 18cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/example/6.png
+    :width: 18cm
+
+.. raw:: pdf
+
+  PageBreak
+
+.. image:: images/example/7.png
+    :width: 18cm
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+Installation and Usage
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+``npm install --save-dev
+tailwindcss``
+
+.. raw:: pdf
+
+    TextAnnotation "There is a CDN version available that provides everything but you can't customise it."
+    TextAnnotation "There's also the play.tailwindcss.com website that you can use."
+    TextAnnotation "Adds it as a dependency to your package.json file"
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+``npx tailwind
+--content index.html
+--output build/tailwind.css``
+
+.. raw:: pdf
+
+   TextAnnotation "tailwind.config.js is optional, and an input file is optional."
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+Interaction states
+
+.. raw:: pdf
+
+   PageBreak
+
+.. class:: centredtitle
+
+``hover, focus, active, disabled, visited,
+focus-within,
+first-child, last-child``
+
+.. raw:: pdf
+
+  PageBreak
+
+.. 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"
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+``hover:text-red-500``
+
+|
+
+.. class:: centredtitle
+
+``focus:text-red-500``
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak 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:
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+Responsive
+
+.. raw:: pdf
+
+    TextAnnotation "Mobile first by default"
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+``[screen][separator][class]``
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak standardPage
+
+Screens (aka breakpoints)
+=========================
+
+.. code-block:: javascript
+    :linenos:
+    :include: code/12-default-screens.txt
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+``md:flex``
+
+|
+
+.. class:: centredtitle
+
+``md:hover:bg-red-500``
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak standardPage
+
+Responsive classes in CSS
+=========================
+
+.. code-block:: css
+    :linenos:
+    :include: code/13-responsive-classes.txt
+
+Responsive classes in HTML
+==========================
+
+.. code-block:: html
+    :linenos:
+    :include: code/14-responsive-class-example.txt
+
+.. Switch to a title page.
+.. raw:: pdf
+
+   PageBreak titlePage
+
+.. class:: centredtitle
+
+Arbitrary values
+
+.. raw:: pdf
+
+   PageBreak
+
+.. class:: centredtitle
+
+``w-[23px] md:w-[250px]``
+``text-[#abc123]``
+
+.. raw:: pdf
+
+   PageBreak
+
+.. class:: centredtitle
+
+``grid-cols-[fit-content(theme(spacing.32))]``
+
+.. raw:: pdf
+
+   PageBreak
+
+.. class:: centredtitle
+
+``lg:[&:nth-child(3)]:hover
+:underline``
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+How I deal with repetition?
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+Avoid repetition by extracting components
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak standardPage
+
+Loops
+=====
+
+.. code-block:: twig 
+    :linenos:
+    :include: code/20-loops.txt
+
+Loops
+=====
+
+.. code-block:: html
+   :linenos:
+
+    {navItems.map(item => (
+       <a
+         class="block py-3 px-4 text-sm text-gray-800"
+         href={item.url}
+       >
+         {item.title}
+       </a>
+    ))}
+
+Includes
+========
+
+.. code-block:: twig 
+    :linenos:
+    :include: code/21-includes.txt
+
+.. raw:: pdf
+
+    TextAnnotation "Move the duplicate markup into a partial, so there's only one version. Pass data in."
+
+Includes
+========
+
+.. code-block:: html 
+    :linenos:
+
+    <h2>Adults</h2>
+
+    <ClassList classes={classes} type="kids" />
+
+    <h2>Kids</h2>
+
+    <ClassList classes={classes} type="adults" />
+
+Extracting CSS components
+=========================
+
+.. code-block:: css 
+    :linenos:
+    :include: code/css-apply-before.txt
+
+Extracting CSS components
+=========================
+
+.. code-block:: css 
+    :linenos:
+    :include: code/css-apply-after.txt
+  
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+Keeping Things Small: Controlling the file size
+
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+Just in Time (JIT mode)
+
+.. raw:: pdf
+
+   TextAnnotation "Since the JIT mode was added and changed to be the default option, Tailwind only generates the classes that it needs to - i.e. only the classes in your HTML."
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak standardPage
+
+Content
+=======
+
+Tell Tailwind where it should look for utility classes.
+
+|
+
+
+.. code-block:: javascript
+    :linenos:
+    :include: code/tailwind-config-content.js
+
+.. raw:: pdf
+
+   TextAnnotation "Tailwind will scan the files within the content array and "
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+Customising Tailwind
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+``npx tailwind init``
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak standardPage
+
+tailwind.config.js
+==================
+
+.. code-block:: javascript
+   :include: code/tailwind-basic-config.txt
+   :linenos:
+
+Overriding configuration
+========================
+
+.. code-block:: javascript
+   :include: code/override-colours.txt
+   :linenos:
+   :hl_lines: 5 6 7
+
+.. raw:: pdf
+
+    TextAnnotation "Overrides all colours. Great for when you've been given a colour pallete for a project from a Designer."
+
+Extending configuration
+=======================
+
+.. code-block:: javascript
+   :linenos:
+   :include: code/extending-colours.txt
+   :hl_lines: 5 6 7 8 9
+
+.. raw:: pdf
+
+    TextAnnotation "Extends Tailwind's default colours."
+
+.. Switch to a title page.
+.. raw:: pdf
+
+  PageBreak titlePage
+
+.. class:: centredtitle
+
+``npx tailwind init --full``
+
+.. raw:: pdf
+
+   PageBreak
+
+.. class:: centredtitle
+
+Adding Tailwind to your CSS
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak standardPage
+
+Including Tailwind
+==================
+
+.. code-block:: css 
+    :linenos:
+    :include: code/1-adding-tailwind-directives.txt
+
+Adding your own classes
+=======================
+
+.. code-block:: css
+    :linenos:
+    :include: code/2-adding-custom-classes.txt
+
+Adding your own classes (with layers)
+=====================================
+
+.. code-block:: css
+    :linenos:
+    :include: code/3-layers.txt
+
+.. raw:: pdf
+
+    TextAnnotation "Automatically places your code in the right position."
+
+.. Switch to a title page.
+.. raw:: pdf
+
+   PageBreak titlePage
+
+.. class:: centredtitle
+
+``npx tailwind
+--input src/css/tailwind.pcss
+--output dist/tailwind.css``
+
+.. raw:: pdf
+
+   TextAnnotation "As well as the output file, we need to specify the input file."
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+Extending Tailwind CSS with Plugins
+
+.. raw:: pdf
+
+  PageBreak
+
+.. class:: centredtitle
+
+``npm install --save-dev
+tailwindcss-list-reset``
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak standardPage
+
+Adding a plugin
+===============
+
+.. code-block:: javascript
+    :linenos:
+    :hl_lines: 7 8 9
+    :include: code/plugins-add-plugin.txt
+
+Generated CSS
+=============
+
+.. code-block:: css
+   :linenos:
+   :include: code/plugins-generated-css.txt
+
+Writing plugins
+===============
+
+.. code-block:: javascript 
+   :linenos:
+   :include: code/writing-plugin-1.js
+   :start-after: // Start require plugin
+   :end-before: // End require plugin
+
+.. raw:: pdf
+
+   TextAnnotation "In a separate file or the plugins section of tailwind.config.js."
+
+Writing plugins
+===============
+
+.. code-block:: javascript 
+   :linenos:
+   :hl_lines: 3 4 5
+   :include: code/writing-plugin-1.js
+   :start-after: // Start add function
+   :end-before: // End add function
+
+Writing plugins
+===============
+
+.. code-block:: javascript 
+   :linenos:
+   :hl_lines: 4 5 6 7 8 9
+   :include: code/writing-plugin-1.js
+   :start-after: // Start function contents
+   :end-before: // End function contents
+
+Writing plugins
+===============
+
+Adding `child` and `child-hover` variants:
+
+|
+
+.. code-block:: javascript 
+   :linenos:
+   :hl_lines: 3 4 5 6
+
+   const plugin = require('tailwindcss/plugin');
+
+   module.exports = plugin(({ addVariant }) => {
+     addVariant('child', '& > *');
+     addVariant('child-hover', '& > *:hover');
+   });
+
+Writing plugins
+===============
+
+Adding a `hocus` variant:
+
+|
+
+.. code-block:: javascript 
+   :linenos:
+   :hl_lines: 3 4 5 6
+
+   const plugin = require('tailwindcss/plugin');
+
+   module.exports = plugin(({ addVariant }) => {
+     addVariant('hocus', ['&:hover', '&:focus']);
+   });
+
+Writing plugins
+===============
+
+Creating a button component:
+
+|
+
+.. code-block:: javascript 
+   :linenos:
+   :include: code/writing-plugin-2.js
+   :start-after: // Start create plugin
+   :end-before: // End create plugin
+
+Writing plugins
+===============
+
+.. code-block:: javascript 
+   :linenos:
+   :hl_lines: 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
+   :include: code/writing-plugin-2.js
+   :start-after: // Start define styles
+   :end-before: // End define styles
+
+Writing plugins
+===============
+
+.. code-block:: javascript 
+   :linenos:
+   :hl_lines: 6 7 8 9 10 11
+   :include: code/writing-plugin-2.js
+   :start-after: // Start add components
+   :end-before: // End add components
+
+.. Switch to a title page.
+.. raw:: pdf
+
+   PageBreak titlePage
+
+.. class:: centredtitle
+
+Adding Tailwind CSS to an existing project
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+   PageBreak standardPage
+
+Disabling the reset styles
+==========================
+
+.. code-block:: javascript
+   :linenos:
+   :hl_lines: 7 8 9
+
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+      content: [],
+      theme: {
+        extend: {},
+      },
+      corePlugins: {
+        preflight: false,
+      },
+      plugins: [],
+    }
+
+Prefixing class names
+=====================
+
+Turn classes like ``flex`` into ``tw-flex``.
+
+|
+
+.. code-block:: javascript
+   :linenos:
+   :hl_lines: 3
+
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+      prefix: "tw-",
+      content: [],
+      theme: {
+        extend: {},
+      },
+      plugins: [],
+    }
+
+!important
+==========
+
+.. code-block:: javascript
+   :linenos:
+   :hl_lines: 3
+
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+      important: true,
+      content: [],
+      theme: {
+        extend: {},
+      },
+      plugins: [],
+    }
+
+!important
+==========
+
+.. code-block:: javascript
+   :linenos:
+   :hl_lines: 3
+
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+      important: "#app",
+      content: [],
+      theme: {
+        extend: {},
+      },
+      plugins: [],
+    }
+
+!important
+==========
+
+|
+
+|
+
+.. class:: centredtitle
+
+``!flex``
+
+.. Switch to an image page.
+.. raw:: pdf
+
+  PageBreak imagePage
 
 .. image:: images/paul-hennell-tweet.png
     :width: 18cm
 
-.. page:: standardPage
+.. Switch to a title page.
+.. raw:: pdf
+
+   PageBreak titlePage
+
+.. class:: centredtitle
+
+Demo
+
+.. Switch to a standard page.
+.. raw:: pdf
+
+  PageBreak standardPage
 
 Thanks!
 =======